:root {
  color-scheme: light;
  --ink: #182b36;
  --muted: #65747e;
  --line: #dce3e7;
  --teal: #086d68;
  --paper: #f5f7f8;
}
* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font:
    14px/1.55 system-ui,
    sans-serif;
  color: var(--ink);
  background: var(--paper);
}
[hidden] {
  display: none !important;
}
a {
  color: var(--teal);
  text-underline-offset: 3px;
}
button,
input,
textarea,
select {
  font: inherit;
}
button {
  cursor: pointer;
  background: white;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 8px 12px;
  color: inherit;
}
button:hover {
  border-color: var(--teal);
  background: #edf7f5;
}
button:disabled {
  opacity: 0.55;
  cursor: wait;
}
.primary {
  background: var(--teal);
  border-color: var(--teal);
  color: white;
}
.primary:hover {
  background: #075954;
  color: white;
}
:focus-visible {
  outline: 3px solid #d19837;
  outline-offset: 3px;
}
label {
  display: block;
  font-size: 12px;
  font-weight: 650;
}
input,
textarea,
select {
  width: 100%;
  display: block;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 10px;
  color: var(--ink);
  background: white;
  margin: 5px 0 12px;
}
textarea {
  resize: vertical;
}
h1,
h2,
h3,
p {
  margin: 0 0 14px;
}
h2 {
  font-size: 21px;
  line-height: 1.3;
}
h3 {
  font-size: 16px;
}
blockquote {
  margin: 12px 0;
  padding-left: 14px;
  border-left: 2px solid #b9d5d0;
  white-space: pre-wrap;
}
small,
.muted,
.scope {
  color: var(--muted);
  font-size: 12px;
}
.eyebrow {
  font-size: 10px;
  letter-spacing: 1.8px;
  font-weight: 750;
  color: var(--muted);
  margin: 18px 0 10px;
}
.brand {
  display: block;
  font-family: Georgia, serif;
  font-size: 26px;
  text-decoration: none;
  color: inherit;
  line-height: 1.15;
}
.brand span {
  display: block;
  font: 9px/2.8 system-ui;
  letter-spacing: 2px;
}
.gate {
  min-height: 100vh;
  padding: 40px 7%;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px 70px;
  background: linear-gradient(135deg, #eef5f1, #f9f8f4);
}
.gate > .brand {
  grid-column: 1/-1;
}
.welcome h1 {
  font:
    clamp(40px, 5vw, 66px) / 1.06 Georgia,
    serif;
  letter-spacing: -2px;
  margin: 20px 0;
}
.welcome > p {
  max-width: 530px;
  font-size: 17px;
}
.welcome-steps {
  display: flex;
  gap: 24px;
  margin: 38px 0;
}
.welcome-steps p {
  font-size: 12px;
  flex: 1;
}
.welcome-steps b {
  display: block;
  margin-bottom: 8px;
}
.auth-card {
  background: white;
  border: 1px solid var(--line);
  padding: 32px;
  border-radius: 10px;
  align-self: start;
  max-width: 430px;
}
.auth-card button {
  width: 100%;
  margin: 6px 0;
}
.desk {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr) 280px;
  min-height: 100vh;
}
.sidebar {
  background: #142934;
  color: #dce5e8;
  padding: 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.sidebar .brand {
  margin-bottom: 24px;
  color: white;
}
.sidebar .eyebrow {
  color: #97afb9;
}
.sidebar a {
  color: #c7dddf;
}
.sidebar-bottom {
  margin-top: auto;
  display: grid;
  gap: 12px;
  font-size: 12px;
  padding-top: 30px;
  overflow-wrap: anywhere;
}
.sidebar-bottom button {
  background: transparent;
  color: inherit;
}
.saved-item {
  background: transparent;
  color: #dce5e8;
  border: 0;
  text-align: left;
  display: block;
  width: 100%;
  margin: 0 0 5px;
  overflow-wrap: anywhere;
}
.saved-item[aria-current="true"] {
  background: #29434c;
}
.saved-item small {
  display: block;
  color: #9db4bd;
}
.desk-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: white;
  border-bottom: 1px solid var(--line);
  padding: 17px 28px;
  font-size: 11px;
  color: var(--muted);
  gap: 12px;
}
.desk-top > div {
  display: flex;
  align-items: center;
  gap: 14px;
}
.workspace {
  padding: 24px 30px;
  max-width: 1350px;
  margin: auto;
}
.title-input {
  font:
    30px/1.2 Georgia,
    serif;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 12px 0 24px;
}
.people-bar {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin: 18px 0;
}
.people-bar > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.chip {
  display: inline-block;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white;
  font-size: 11px;
  color: var(--ink);
  text-decoration: none;
}
.metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line);
  background: white;
  border-radius: 7px;
  margin: 20px 0;
}
.metric {
  padding: 14px;
  border-right: 1px solid var(--line);
}
.metric:last-child {
  border: 0;
}
.metric b {
  font-size: 25px;
  font-weight: 600;
  display: block;
}
.metric span {
  font-size: 10px;
  color: var(--muted);
}
.tabs {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  margin: 26px 0 18px;
}
.tabs button {
  border: 0;
  border-radius: 0;
  background: transparent;
  white-space: nowrap;
  padding: 12px 0;
  color: var(--muted);
}
.tabs button[aria-current="true"] {
  border-bottom: 3px solid var(--teal);
  color: var(--teal);
  font-weight: 700;
}
.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
}
.filters label {
  flex: 1;
  min-width: 110px;
}
.filters label:nth-child(2) {
  flex: 2;
}
.filters input,
.filters select {
  font-size: 12px;
  padding: 8px;
}
.card {
  background: white;
  border: 1px solid var(--line);
  border-radius: 7px;
  padding: 20px;
  margin-bottom: 14px;
  overflow-wrap: anywhere;
}
.card header,
.row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.meta {
  color: var(--muted);
  font-size: 11px;
  margin: 8px 0;
}
.card details {
  margin: 12px 0;
}
.card summary {
  cursor: pointer;
  color: var(--teal);
}
.card-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 11px;
}
.card-foot button {
  padding: 4px 8px;
  font-size: 11px;
}
.columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.empty {
  border: 1px dashed #bdcdd2;
  padding: 32px;
  border-radius: 8px;
  margin: 14px 0;
  color: var(--muted);
}
.topic-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 22px;
}
.evidence-dock {
  background: #eef2f3;
  border-left: 1px solid var(--line);
  padding: 25px 18px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: auto;
}
.pin {
  border-top: 1px solid #cedade;
  padding: 14px 0;
  font-size: 12px;
}
.pin select {
  font-size: 11px;
  padding: 5px;
  margin: 8px 0;
}
.pin button {
  font-size: 10px;
  padding: 3px 6px;
}
.pin blockquote {
  font-size: 12px;
}
.scope {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.scenario-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.scenario-grid input[type="number"] {
  max-width: 110px;
}
.scenario-result {
  padding: 18px;
  background: #edf6f3;
  border: 1px solid #bad9d0;
  border-radius: 6px;
}
.bar {
  height: 7px;
  background: #dce7e5;
  margin: 8px 0;
}
.bar span {
  display: block;
  background: var(--teal);
  height: 100%;
}
.table-wrap {
  overflow-x: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 12px;
}
th,
td {
  text-align: left;
  border-bottom: 1px solid var(--line);
  padding: 12px 8px;
  vertical-align: top;
}
.timeline-date {
  font-size: 11px;
  color: var(--teal);
  font-weight: 700;
}
dialog {
  width: min(650px, 94vw);
  max-height: 85vh;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 24px;
  color: var(--ink);
}
dialog::backdrop {
  background: #10242aa8;
}
.dialog-head,
.dialog-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}
.dialog-foot {
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.picker {
  max-height: 45vh;
  overflow: auto;
  margin: 12px 0;
}
.picker label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  font-weight: 500;
}
.picker input {
  width: auto;
  margin: 0;
}
.picker small {
  display: block;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
}
#loadStatus,
#saveState,
#gateMsg {
  overflow-wrap: anywhere;
}
#loadStatus:empty {
  display: none;
}
@media (min-width: 1650px) {
  .desk {
    grid-template-columns: 235px minmax(0, 1fr) 320px;
  }
}
@media (max-width: 1200px) {
  .desk {
    grid-template-columns: 190px minmax(0, 1fr);
  }
  .evidence-dock {
    position: static;
    height: auto;
    grid-column: 2;
    border-top: 1px solid var(--line);
  }
  .workspace {
    padding: 22px;
  }
  .sidebar {
    grid-row: 1/3;
  }
}
@media (max-width: 760px) {
  .desk {
    display: block;
  }
  .sidebar {
    position: static;
    height: auto;
    padding: 18px;
  }
  .sidebar .brand {
    margin: 0;
  }
  .sidebar-bottom {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
  }
  .sidebar .eyebrow {
    margin-top: 6px;
  }
  #savedList {
    max-height: 150px;
    overflow: auto;
  }
  .desk-top {
    padding: 14px;
    flex-wrap: wrap;
  }
  .workspace {
    padding: 18px;
  }
  .columns,
  .scenario-grid {
    grid-template-columns: 1fr;
  }
  .metrics {
    grid-template-columns: repeat(2, 1fr);
  }
  .metric:nth-child(2) {
    border: 0;
  }
  .people-bar {
    align-items: flex-start;
  }
  .people-bar button {
    flex-shrink: 0;
  }
  .gate {
    display: block;
    padding: 28px;
  }
  .welcome h1 {
    font-size: 43px;
  }
  .welcome-steps {
    gap: 12px;
  }
  .auth-card {
    margin-top: 28px;
    max-width: none;
  }
  .evidence-dock {
    padding: 24px;
  }
  .tabs {
    gap: 20px;
  }
  .title-input {
    font-size: 28px;
  }
}


/* One workspace: product navigation stays visible while the research changes. */
body{font-size:16px}
label,.muted,.filters input,.filters select,.sidebar-bottom,.card-foot,.card-foot button{font-size:14px}
small,.meta,.scope,.chip,.metric span,.desk-top,.pin,.pin select,.pin blockquote,table,.timeline-date{font-size:13px}
.eyebrow,.brand span{font-size:12px;letter-spacing:1.2px}
.desk-overview{grid-template-columns:220px minmax(0,1fr)}
.desk main{min-width:0}
.desk-top{position:sticky;top:0;z-index:20}
.workspace-navigation{display:grid;gap:5px;margin:2px 0 12px}
.workspace-navigation a{padding:11px 12px;border-radius:5px;text-decoration:none;color:#dce5e8;font-size:14px}
.workspace-navigation a:hover,.workspace-navigation a[aria-current="page"]{background:#29434c;color:white}
.workspace-navigation a[aria-current="page"]{box-shadow:inset 3px 0 #7bcab9;font-weight:650}
.sidebar-bottom a[aria-current="page"]{color:white;text-decoration:underline}
.dashboard-home{max-width:1250px;padding:40px}
.dashboard-home h1{font:400 clamp(30px,3vw,44px)/1.15 Georgia,serif;margin:12px 0 18px;letter-spacing:-.6px}
.home-lede{color:var(--muted);max-width:62ch}
.start-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:32px 0 42px}
.start-card{display:block;text-align:left;padding:24px;background:white;border:1px solid var(--line);border-radius:8px;color:var(--ink);text-decoration:none;font:inherit}
.start-card:hover{border-color:var(--teal);background:#f0f8f6}
.start-card>span{display:block;font-size:12px;letter-spacing:.08em;color:var(--muted);margin-bottom:22px}
.start-card h2{font-size:20px}
.start-card p{font-size:15px;color:var(--muted);line-height:1.6}
.start-card b{display:block;color:var(--teal);font-size:14px;margin-top:24px}
.home-recent{margin:30px 0}
#recentInvestigations{display:grid;gap:10px;margin-top:20px}
.recent-investigation{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:7px;text-align:left;padding:18px 20px}
.recent-investigation strong{font-size:17px;overflow-wrap:anywhere}
.recent-investigation span{grid-column:1;font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.recent-investigation small{grid-column:2;grid-row:1/3;align-self:center}
.starter-example{display:flex;align-items:center;gap:30px;justify-content:space-between;padding:26px 30px;background:#eaf2f3;border:1px solid #d2e1e3;border-radius:8px;margin-top:32px}
.starter-example p{max-width:64ch;font-size:15px}
.starter-example button{flex-shrink:0}
.browse-panel{display:flex;flex-direction:column;height:calc(100vh - 78px);min-height:550px;background:white}
.browse-toolbar{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:15px 25px;border-bottom:1px solid var(--line);font-size:14px}
#browseOriginal{margin-left:auto}
#browseStatus{font-size:14px;padding:12px 24px;margin:0;color:var(--muted)}
#browseStatus:empty{display:none}
#recordBrowser{display:block;width:100%;flex:1;min-height:400px;border:0;background:white}
.mobile-navigation{display:none}
.skip-workspace{position:fixed;top:-100px;left:20px;background:white;padding:14px;z-index:100}
.skip-workspace:focus{top:12px}
@media(min-width:1650px){.desk-overview{grid-template-columns:235px minmax(0,1fr)}}
@media(max-width:1200px){.desk-overview{grid-template-columns:190px minmax(0,1fr)}.dashboard-home{padding:28px}.start-grid{gap:12px}.start-card{padding:18px}.starter-example{flex-wrap:wrap}}
@media(max-width:900px){.start-grid{grid-template-columns:1fr}.start-card>span{margin-bottom:12px}.start-card b{margin-top:12px}.home-recent .row{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){
 .mobile-navigation{display:inline-block}
 .sidebar{display:none;position:fixed;inset:0 auto 0 0;z-index:50;width:min(310px,100vw);height:100dvh;overflow:auto;box-shadow:20px 0 60px #10242a44}
 .sidebar.navigation-open{display:flex}
 .sidebar-bottom{display:grid;margin-top:auto}
 .sidebar #closeNavigation{background:transparent;color:inherit;border-color:#607880;align-self:flex-end}
 .dashboard-home{padding:24px 18px}
 .recent-investigation{grid-template-columns:1fr}.recent-investigation small{grid-column:1;grid-row:auto}
 .starter-example{padding:22px;gap:12px}
 .browse-toolbar{padding:12px;gap:14px}
 #browseOriginal{margin-left:0}
 .browse-panel{height:calc(100dvh - 76px)}
}