/* Manhattan research dashboard, using the existing dark docs palette and navigation. */
:root {
  --dash-paper: var(--surface);
  --dash-paper-raised: #191f2d;
  --dash-muted: var(--text-muted);
  --dash-faint: #8491a7;
  --dash-line: var(--border);
  --dash-green: var(--accent);
  --dash-green-soft: rgba(0,229,160,.08);
  --dash-amber: #fbbf24;
  --dash-amber-soft: rgba(251,191,36,.08);
  --dash-red: #f87171;
  --dash-red-soft: rgba(248,113,113,.08);
  --dash-radius: 10px;
}

.topbar {
  position: sticky; top: 0; z-index: 10; height: 58px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 0 clamp(22px, 4vw, 48px);
  border-bottom: 1px solid var(--dash-line);
  background: rgba(11,13,20,.94); backdrop-filter: blur(12px);
}
.breadcrumbs { color: var(--dash-faint); font-size: 11px; }
.breadcrumbs span { margin: 0 7px; color: #596276; }
.breadcrumbs strong { color: var(--text); font-weight: 600; }
.top-actions { display: flex; align-items: center; gap: 14px; }
.readonly-pill { padding: 4px 9px; border: 1px solid var(--dash-line); border-radius: 18px; color: var(--dash-muted); font-size: 10px; }
.readonly-pill span { color: var(--accent); margin-right: 5px; font-size: 8px; }
.refresh-button { border: 0; background: none; color: var(--dash-muted); cursor: pointer; font-size: 11px; padding: 7px 2px; }
.refresh-button:hover { color: var(--accent-light); }
.refresh-button span { margin-right: 5px; font-size: 15px; }
.refresh-button:disabled { opacity: .55; cursor: wait; }
.content { max-width: 1500px; margin: auto; padding: 30px clamp(24px, 4vw, 48px) 54px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; gap: 22px; margin: 10px 0 22px; }
.eyebrow, .overline, .card-kicker, .metric-label, .usage-label {
  color: var(--accent-light); font: 500 9px/1.45 var(--font-mono); letter-spacing: .12em;
}
.eyebrow-dot, .live-mark, .updated-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--accent); vertical-align: 1px; }
.eyebrow-separator { padding: 0 5px; color: var(--dash-faint); }
.page-heading h1 { margin: 8px 0 5px; color: var(--text); font-size: clamp(25px, 3vw, 32px); font-weight: 500; letter-spacing: -.04em; line-height: 1.15; }
.lede { margin: 0; color: var(--dash-muted); font-size: 12px; }
.updated-box { display: flex; align-items: center; gap: 9px; min-width: 200px; padding: 9px 12px; border: 1px solid var(--dash-line); border-radius: 8px; background: var(--surface); }
.updated-box strong, .updated-box small { display: block; }
.updated-box strong { color: var(--text); font-size: 10px; font-weight: 600; }
.updated-box small { margin-top: 2px; color: var(--dash-faint); font-size: 9px; }
.updated-dot { width: 6px; height: 6px; margin: 0; background: #7b8796; }
.updated-dot.ok { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,160,.1); }
.updated-dot.warn { background: var(--dash-amber); box-shadow: 0 0 0 3px var(--dash-amber-soft); }
.updated-dot.bad { background: var(--dash-red); box-shadow: 0 0 0 3px var(--dash-red-soft); }
.notice { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 11px 14px; border: 1px solid rgba(251,191,36,.28); border-radius: 8px; background: var(--dash-amber-soft); color: #f5d184; font-size: 11px; }
.notice[hidden] { display: none; }
.notice-icon { display: grid; place-items: center; flex: none; width: 19px; height: 19px; border: 1px solid rgba(251,191,36,.4); border-radius: 50%; font-weight: 700; }
.overview-grid { display: grid; grid-template-columns: minmax(0,1.14fr) minmax(300px,.86fr); gap: 13px; align-items: start; }
.primary-card, .metric-card, .observation-card, .account-card, .queue-group, .usage-card {
  border: 1px solid var(--dash-line); border-radius: var(--dash-radius); background: var(--dash-paper);
}
.primary-card { position: relative; overflow: hidden; padding: 19px 22px 0; background: linear-gradient(135deg,rgba(0,229,160,.035),transparent 55%),var(--dash-paper); }
.primary-card:after { position: absolute; top: -100px; right: -60px; width: 245px; height: 245px; border: 1px solid rgba(0,229,160,.09); border-radius: 50%; box-shadow: 0 0 0 22px rgba(0,229,160,.025),0 0 0 46px rgba(0,229,160,.018); content: ''; pointer-events: none; }
.card-kicker, .overline { color: var(--dash-faint); }
.live-mark { width: 6px; height: 6px; margin-right: 7px; box-shadow: 0 0 0 3px rgba(0,229,160,.12); }
.primary-card h2 { position: relative; z-index: 1; max-width: 650px; margin: 12px 0 6px; border: 0; color: var(--text); font-size: 19px; font-weight: 600; letter-spacing: -.025em; line-height: 1.35; }
.active-question { position: relative; z-index: 1; max-width: 700px; margin: 0; color: var(--dash-muted); font-size: 12px; line-height: 1.6; }
.active-meta { position: relative; z-index: 1; display: flex; align-items: center; flex-wrap: wrap; gap: 9px; margin-top: 14px; color: var(--dash-muted); font-size: 10px; }
.tag { padding: 3px 8px; border: 1px solid var(--dash-line); border-radius: 18px; background: rgba(255,255,255,.025); color: #b8d9ca; font: 9px var(--font-mono); }
.meta-divider { color: var(--dash-faint); }
.deadline-row { position: relative; z-index: 1; display: flex; gap: 48px; margin-top: 17px; padding: 12px 0 14px; border-top: 1px solid var(--dash-line); }
.deadline-row small, .countdown small { display: block; color: var(--dash-faint); font: 8px var(--font-mono); letter-spacing: .08em; }
.deadline-row strong, .countdown strong { display: block; margin-top: 4px; color: var(--text); font-size: 11px; font-weight: 600; }
.countdown strong { color: var(--accent-light); }
.card-foot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 -22px; padding: 9px 22px; border-top: 1px solid var(--dash-line); background: rgba(255,255,255,.018); color: var(--dash-faint); font-size: 9px; }
.card-foot a, .text-link { color: var(--accent-light); font-size: 10px; font-weight: 600; }
.card-foot a span, .text-link span { margin-left: 4px; font-size: 13px; }
.metric-stack { display: grid; grid-template-rows: repeat(3,auto); gap: 10px; }
.metric-card { padding: 12px 15px; }
.metric-top { display: flex; align-items: center; gap: 8px; }
.metric-icon { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 7px; font-size: 14px; }
.icon-green { color: var(--accent-light); background: var(--dash-green-soft); }
.icon-orange { color: #f3c781; background: var(--dash-amber-soft); }
.icon-red { color: #ff9e9e; background: var(--dash-red-soft); }
.metric-label { color: var(--dash-faint); font-size: 8px; }
.state-chip { display: inline-flex; align-items: center; gap: 5px; margin-left: auto; padding: 3px 7px; border-radius: 16px; background: var(--dash-green-soft); color: var(--accent-light); font: 500 8px var(--font-mono); white-space: nowrap; }
.state-chip:before { width: 5px; height: 5px; border-radius: 50%; background: currentColor; content: ''; }
.state-chip.neutral { background: rgba(255,255,255,.06); color: #b2bdcf; }
.state-chip.warn { background: var(--dash-amber-soft); color: #f5d184; }
.state-chip.danger { background: var(--dash-red-soft); color: #ff9e9e; }
.metric-value { margin: 6px 0 1px; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.03em; line-height: 1.3; }
.metric-sub { overflow: hidden; color: var(--dash-faint); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.result-value { font-size: 14px; }
.text-link { display: inline-block; margin-top: 4px; }
.meter { overflow: hidden; height: 3px; margin-top: 8px; border-radius: 4px; background: var(--surface2); }
.meter span { display: block; width: 0; height: 100%; border-radius: 4px; background: var(--accent); transition: width .3s; }
.section-block { margin-top: 34px; scroll-margin-top: 76px; }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 15px; margin-bottom: 13px; }
.section-heading h2 { margin: 4px 0 3px; padding: 0; border: 0; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.025em; line-height: 1.3; }
.section-heading p { margin: 0; color: var(--dash-muted); font-size: 11px; }
.section-note { padding: 5px 8px; border: 1px solid var(--dash-line); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--dash-faint); font-size: 9px; white-space: nowrap; }
.journey-track { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.journey-step { position: relative; min-height: 68px; padding: 10px 9px; border: 1px solid var(--dash-line); border-radius: 8px; background: var(--surface); }
.journey-step.current { border-color: rgba(0,229,160,.35); background: rgba(0,229,160,.045); }
.journey-step.attention { border-color: rgba(248,113,113,.35); background: rgba(248,113,113,.035); }
.journey-step .step-top { display: flex; align-items: center; gap: 6px; color: var(--dash-faint); font: 9px var(--font-mono); }
.step-dot { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #596276; }
.journey-step.current .step-dot { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,160,.1); }
.journey-step.attention .step-dot { background: var(--dash-red); box-shadow: 0 0 0 3px var(--dash-red-soft); }
.journey-step strong { display: block; margin: 5px 0 2px; color: var(--text); font-size: 10px; font-weight: 600; }
.journey-step small { display: block; overflow: hidden; color: var(--dash-faint); font-size: 8px; text-overflow: ellipsis; white-space: nowrap; }
.journey-step:after { position: absolute; top: 21px; right: -6px; z-index: 1; background: var(--bg); color: #7a8497; content: '›'; font-size: 15px; line-height: 1; }
.journey-step:last-child:after { display: none; }
.stage-work { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.stage-pill { padding: 4px 8px; border: 1px solid var(--dash-line); border-radius: 5px; background: var(--surface); color: var(--dash-muted); font-size: 9px; }
.stage-work a.stage-pill { text-decoration: none; }
.stage-work a.stage-pill:hover { border-color: var(--accent); color: var(--text); }
.stage-pill b { margin-right: 4px; color: var(--accent-light); }
.observation-card { padding: 16px 18px 0; }
.observation-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.observation-header h3 { margin: 4px 0 0; color: var(--text); font-size: 15px; font-weight: 600; letter-spacing: -.02em; }
.obs-question { max-width: 950px; margin: 8px 0 13px; color: var(--dash-muted); font-size: 12px; }
.observation-stats { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 7px; }
.obs-stat { padding: 9px 10px; border: 1px solid var(--dash-line); border-radius: 7px; background: var(--surface2); }
.obs-stat span { display: block; color: var(--dash-faint); font-size: 8px; }
.obs-stat strong { display: block; margin-top: 3px; color: var(--text); font-size: 13px; font-weight: 600; letter-spacing: -.02em; }
.obs-stat small { display: block; margin-top: 1px; color: var(--dash-faint); font-size: 8px; }
.report-summary { margin: 11px 0 0; padding: 10px 12px; border-left: 2px solid var(--accent); border-radius: 0 7px 7px 0; background: rgba(0,229,160,.055); color: var(--dash-muted); font-size: 10px; }
.report-summary strong { color: var(--text); }
.report-summary p { margin: 4px 0 0; color: var(--dash-muted); }
.detail-disclosure { margin-top: 12px; border-top: 1px solid var(--dash-line); }
.detail-disclosure summary { padding: 9px 0; color: var(--accent-light); font-size: 10px; font-weight: 600; cursor: pointer; list-style: none; }
.detail-disclosure summary::-webkit-details-marker { display: none; }
.detail-disclosure summary:after { float: right; color: var(--dash-faint); content: '＋'; }
.detail-disclosure[open] summary:after { content: '−'; }
.detail-columns { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; padding: 1px 0 12px; }
.detail-column strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 9px; }
.detail-column p { margin: 0; color: var(--dash-muted); font-size: 10px; }
.observation-footer { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--dash-line); color: var(--dash-faint); font-size: 8px; }
.paper-note { display: flex; align-items: start; gap: 10px; margin-top: 9px; padding: 10px 12px; border: 1px solid rgba(251,191,36,.2); border-radius: 8px; background: var(--dash-amber-soft); color: #e8c987; font-size: 10px; }
.paper-note strong { display: block; color: #f5d184; font-size: 10px; }
.account-grid, .queue-groups, .usage-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.account-card, .queue-group, .usage-card { padding: 13px 14px; }
.account-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--dash-line); }
.account-id { color: var(--accent-light); font: 500 11px var(--font-mono); }
.account-state { padding: 3px 6px; border-radius: 14px; background: var(--dash-amber-soft); color: #f5d184; font: 8px var(--font-mono); }
.account-facts { display: grid; gap: 8px; }
.account-fact strong { display: block; color: var(--dash-faint); font: 500 8px var(--font-mono); letter-spacing: .06em; text-transform: uppercase; }
.account-fact span { display: block; margin-top: 2px; color: var(--dash-muted); font-size: 10px; line-height: 1.5; }
.account-footer { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--dash-line); color: var(--dash-faint); font-size: 9px; }
.queue-title { display: flex; align-items: center; gap: 7px; margin-bottom: 3px; padding-bottom: 8px; border-bottom: 1px solid var(--dash-line); }
.queue-title .step-dot { width: 7px; height: 7px; }
.queue-title strong { color: var(--text); font-size: 10px; font-weight: 600; }
.queue-title span:last-child { margin-left: auto; color: var(--dash-faint); font: 10px var(--font-mono); }
.queue-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,.055); }
.queue-item:last-child { border-bottom: 0; }
.queue-item summary { display: flex; align-items: start; justify-content: space-between; gap: 7px; cursor: pointer; list-style: none; }
.queue-item summary::-webkit-details-marker { display: none; }
.queue-item summary strong { color: var(--text); font-size: 10px; font-weight: 600; }
.queue-item summary small { color: var(--dash-faint); font: 8px var(--font-mono); white-space: nowrap; }
.queue-item p { margin: 4px 0 0; color: var(--dash-muted); font-size: 10px; }
.queue-item .resume { color: var(--accent-light); }
.queue-item .evidence-ref { color: var(--dash-faint); font-family: var(--font-mono); font-size: 9px; overflow-wrap: anywhere; }
.market-card { overflow: hidden; border: 1px solid var(--dash-line); border-radius: var(--dash-radius); background: var(--dash-paper); }
.market-table-wrap { overflow-x: auto; }
.market-table { width: 100%; border-collapse: collapse; min-width: 620px; }
.market-table th, .market-table td { padding: 10px 13px; border-bottom: 1px solid var(--dash-line); text-align: left; }
.market-table th { color: var(--dash-faint); font: 500 8px var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.market-table td { color: var(--dash-muted); font-size: 10px; }
.market-table td:first-child { color: var(--accent-light); font-family: var(--font-mono); }
.market-meta, .market-note { margin: 0; padding: 9px 13px; color: var(--dash-faint); font-size: 9px; }
.market-note { padding-top: 0; line-height: 1.5; }
.queue-empty { padding: 8px 0; color: var(--dash-faint); font-size: 10px; }
.usage-card .usage-label { color: var(--dash-faint); font-size: 8px; }
.usage-main { margin: 5px 0 2px; color: var(--text); font-size: 17px; font-weight: 600; }
.usage-main em { color: var(--dash-faint); font-size: 10px; font-style: normal; font-weight: 400; }
.usage-card p { margin: 0; color: var(--dash-muted); font-size: 9px; }
.usage-limits { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; padding-top: 7px; border-top: 1px solid var(--dash-line); color: var(--dash-muted); font-size: 9px; }
.reference-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.reference-row a { padding: 6px 9px; border: 1px solid var(--dash-line); border-radius: 6px; background: var(--surface); color: var(--accent-light); font-size: 10px; }
.reference-row a:hover { border-color: var(--accent); }
.page-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 34px; padding-top: 20px; border-top: 1px solid var(--dash-line); color: var(--dash-faint); font-size: 9px; }
.sidebar-status { display: flex; align-items: center; gap: 9px; margin: 22px 18px 0; padding-top: 14px; border-top: 1px solid rgba(255,255,255,.08); color: var(--text); font-size: 11px; }
.sidebar-status strong, .sidebar-status small { display: block; }
.sidebar-status small { margin-top: 3px; color: var(--dash-faint); font-size: 9px; }
.status-orb { flex: none; width: 7px; height: 7px; border-radius: 50%; background: #7b8796; }
.status-orb.ok { background: var(--accent); box-shadow: 0 0 0 3px rgba(0,229,160,.1); }
.status-orb.warn { background: var(--dash-amber); box-shadow: 0 0 0 3px var(--dash-amber-soft); }
.status-orb.bad { background: var(--dash-red); box-shadow: 0 0 0 3px var(--dash-red-soft); }
.doc-search-trigger { display: block; width: calc(100% - 32px); margin: 0 16px 8px; padding: 8px 10px; border: 1px solid var(--dash-line); border-radius: 6px; background: rgba(255,255,255,.025); color: var(--dash-muted); text-align: left; font-size: 11px; }
.doc-search-trigger kbd { float: right; color: var(--dash-faint); font-size: 9px; }
.doc-menu-toggle, .doc-menu-overlay { display: none; }
.doc-search-modal { position: fixed; inset: 0; z-index: 60; display: grid; place-items: start center; padding-top: 15vh; background: rgba(0,0,0,.72); }
.doc-search-modal[hidden] { display: none; }
.doc-search-dialog { position: relative; width: min(620px,calc(100% - 30px)); padding: 24px; border: 1px solid var(--dash-line); border-radius: 12px; background: var(--surface); box-shadow: 0 20px 70px rgba(0,0,0,.55); }
.doc-search-dialog label { display: block; margin-bottom: 10px; color: var(--text); font-weight: 600; }
.doc-search-dialog input { width: 100%; padding: 11px 12px; border: 1px solid var(--dash-line); border-radius: 7px; outline: none; background: var(--bg); color: var(--text); }
.doc-search-dialog input:focus { border-color: var(--accent); }
.doc-search-close { position: absolute; top: 10px; right: 12px; border: 0; background: none; color: var(--dash-muted); font-size: 22px; cursor: pointer; }
.search-results { margin-top: 10px; }
.search-results a { display: block; padding: 10px 8px; border-top: 1px solid var(--dash-line); }
.search-results a strong, .search-results a span { display: block; }
.search-results a strong { color: var(--accent-light); font-size: 12px; }
.search-results a span, .search-hint { color: var(--dash-muted); font-size: 10px; }

@media (max-width: 1100px) {
  .overview-grid { grid-template-columns: 1fr; }
  .metric-stack { grid-template: auto / repeat(3,minmax(0,1fr)); }
  .journey-track { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .journey-step:nth-child(4):after { display: none; }
  .queue-groups { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 900px) {
  .account-grid, .usage-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .layout { display: block; }
  .layout > .main { width: 100%; margin-left: 0; }
  .content { padding: 23px 18px 38px; }
  .topbar { height: 55px; padding: 0 18px; gap: 10px; }
  .breadcrumbs { font-size: 10px; }
  .breadcrumbs span { margin: 0 4px; }
  .crumb-section, .crumb-divider:first-of-type { display: none; }
  .top-actions { gap: 8px; }
  .readonly-pill { padding: 5px 7px; font-size: 9px; white-space: nowrap; }
  .refresh-button { padding: 5px; font-size: 0; }
  .refresh-button span { margin: 0; font-size: 18px; }
  .page-heading { align-items: start; flex-direction: column; gap: 11px; margin: 7px 0 18px; }
  .updated-box { min-width: 0; }
  .metric-stack { grid-template: auto / 1fr; }
  .section-block { margin-top: 29px; }
  .section-heading { align-items: start; flex-direction: column; gap: 7px; }
  .section-heading p { line-height: 1.5; }
  .section-note { white-space: normal; }
  .journey-track { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; }
  .journey-step:nth-child(2n):after { display: none; }
  .journey-step { min-height: 63px; }
  .observation-card { padding: 13px 12px 0; }
  .observation-header { align-items: start; }
  .observation-header h3 { font-size: 13px; }
  .observation-stats { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .detail-columns { grid-template-columns: 1fr; gap: 9px; }
  .observation-footer, .page-footer { align-items: start; flex-direction: column; gap: 4px; }
  .account-grid, .queue-groups, .usage-grid { grid-template-columns: 1fr; }
  .deadline-row { gap: 28px; }
  .primary-card { padding: 16px 13px 0; }
  .card-foot { margin: 0 -13px; padding-right: 13px; padding-left: 13px; }
  .doc-menu-toggle { position: fixed; top: 10px; left: 12px; z-index: 40; display: block; padding: 6px 9px; border: 1px solid var(--dash-line); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 10px; }
  .topbar { padding-left: 72px; }
  .doc-menu-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(0,0,0,.55); }
  .menu-open .doc-menu-overlay { display: block; }
  .sidebar { position: fixed; inset: 0 auto 0 0; z-index: 30; width: 258px; transform: translateX(-105%); transition: transform .2s; }
  .menu-open .sidebar { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; } }
