/* USCIS Filing Observatory — dashboard-first interface */

:root { color-scheme: light; }
html { scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; background: #edf3f7; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"], html[data-theme="dark"] body { background: #07111b; }
* { box-sizing: border-box; }

.viz-root {
  --page: #edf3f7;
  --surface-1: #ffffff;
  --surface-2: #f7fafc;
  --surface-3: #e9f0f4;
  --ink-1: #0d2538;
  --ink-2: #425b6d;
  --muted: #718696;
  --grid: #dde7ed;
  --baseline: #c4d1d9;
  --border: rgba(19, 52, 73, .12);
  --shadow: 0 18px 50px rgba(16, 42, 67, .08);
  --shadow-soft: 0 6px 24px rgba(16, 42, 67, .06);
  --navy: #102a43;
  --navy-2: #163e5f;
  --aqua: #35c4b5;
  --aqua-soft: #dff7f3;
  --orange: #f29a57;
  --good: #08876f;
  --bad: #c74e58;
  --received: #2375d8;
  --approved: #0b9477;
  --denied: #df5e66;
  --pending: #7656d6;
  --proctime: #e8843f;
  --other: #91a5b3;
  --compare: #7b5bd6;
  --pulse-a: #0d2a40;
  --pulse-b: #133d57;
  --pulse-ink: #edf7fb;
  --pulse-muted: #a9beca;

  min-height: 100vh;
  padding: 0 max(24px, calc((100vw - 1240px) / 2));
  color: var(--ink-1);
  background:
    radial-gradient(circle at 5% 3%, rgba(53,196,181,.10), transparent 26rem),
    radial-gradient(circle at 96% 17%, rgba(35,117,216,.08), transparent 29rem),
    var(--page);
  font-family: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  line-height: 1.5;
}

.viz-root[data-theme="dark"] {
  --page: #07111b;
  --surface-1: #0d1b27;
  --surface-2: #112432;
  --surface-3: #142a39;
  --ink-1: #f3f8fb;
  --ink-2: #b9c9d3;
  --muted: #8398a6;
  --grid: #203644;
  --baseline: #385160;
  --border: rgba(225,240,248,.11);
  --shadow: 0 18px 50px rgba(0,0,0,.22);
  --shadow-soft: 0 6px 24px rgba(0,0,0,.18);
  --aqua-soft: #123b3a;
  --good: #48c7ad;
  --bad: #f27c84;
  --received: #65a8f4;
  --approved: #44bea3;
  --denied: #f07980;
  --pending: #a38ae7;
  --proctime: #f5a46b;
  --other: #718896;
  --compare: #b398f0;
  --pulse-a: #0a2234;
  --pulse-b: #10364d;
  --pulse-ink: #f1f8fb;
  --pulse-muted: #9fb5c1;
  background:
    radial-gradient(circle at 5% 3%, rgba(53,196,181,.08), transparent 26rem),
    radial-gradient(circle at 96% 17%, rgba(35,117,216,.08), transparent 29rem),
    var(--page);
}

/* Follow the operating-system theme before JavaScript resolves a preference. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]), html:not([data-theme]) body { color-scheme: dark; background: #07111b; }
  html:not([data-theme]) .viz-root {
    --page: #07111b;
    --surface-1: #0d1b27;
    --surface-2: #112432;
    --surface-3: #142a39;
    --ink-1: #f3f8fb;
    --ink-2: #b9c9d3;
    --muted: #8398a6;
    --grid: #203644;
    --baseline: #385160;
    --border: rgba(225,240,248,.11);
    --shadow: 0 18px 50px rgba(0,0,0,.22);
    --shadow-soft: 0 6px 24px rgba(0,0,0,.18);
    --aqua-soft: #123b3a;
    --good: #48c7ad;
    --bad: #f27c84;
    --received: #65a8f4;
    --approved: #44bea3;
    --denied: #f07980;
    --pending: #a38ae7;
    --proctime: #f5a46b;
    --other: #718896;
    --compare: #b398f0;
    --pulse-a: #0a2234;
    --pulse-b: #10364d;
    --pulse-ink: #f1f8fb;
    --pulse-muted: #9fb5c1;
    background:
      radial-gradient(circle at 5% 3%, rgba(53,196,181,.08), transparent 26rem),
      radial-gradient(circle at 96% 17%, rgba(35,117,216,.08), transparent 29rem),
      var(--page);
  }
}

a, button, select, input { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible, select:focus-visible, input:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--received), transparent 55%);
  outline-offset: 3px;
}

/* Header */
.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 76px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 28px;
  padding-inline: 14px;
  background: color-mix(in srgb, var(--page), transparent 12%);
  border-bottom: 1px solid color-mix(in srgb, var(--border), transparent 25%);
  backdrop-filter: blur(18px);
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: 10px; color: var(--ink-1); text-decoration: none; }
.brand-mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  background: var(--navy);
  color: #fff;
  font-family: "Manrope", sans-serif;
  font-size: .86rem;
  font-weight: 800;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
}
.brand-name { font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 800; letter-spacing: -.03em; }
.brand-name span { color: var(--muted); font-weight: 600; }
.topnav { justify-self: center; display: flex; align-items: center; gap: 5px; padding: 5px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface-1), transparent 18%); }
.topnav a { padding: 7px 12px; border-radius: 9px; color: var(--ink-2); font-size: .75rem; font-weight: 600; text-decoration: none; }
.topnav a:hover { background: var(--surface-3); color: var(--ink-1); }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 16px; }
.source-shortcut { color: var(--ink-2); text-decoration: none; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.source-shortcut:hover { color: var(--ink-1); }
.theme-toggle { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-1); color: var(--ink-1); box-shadow: var(--shadow-soft); cursor: pointer; transition: transform .18s ease, border-color .18s ease; }
.theme-toggle:hover { transform: translateY(-2px); border-color: var(--baseline); }
.theme-icon { width: 16px; color: var(--received); font-family: Georgia, serif; font-size: 1rem; line-height: 1; text-align: center; }
.theme-label { color: var(--ink-2); font-size: .68rem; font-weight: 700; letter-spacing: .02em; }

/* Dashboard heading */
.dashboard { padding: 52px 0 86px; scroll-margin-top: 76px; }
.dashboard-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-bottom: 30px; }
.dashboard-heading > div:first-child { max-width: 800px; }
.section-kicker { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; color: var(--received); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; font-weight: 700; }
.live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--aqua); box-shadow: 0 0 0 5px color-mix(in srgb, var(--aqua), transparent 84%); }
.dashboard-heading h1 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(2.25rem, 5vw, 4.45rem); line-height: 1; letter-spacing: -.065em; }
.dashboard-title-row { display: flex; align-items: center; gap: 17px; }
.statistics-icon { position: relative; flex: none; width: 58px; height: 58px; display: flex; align-items: flex-end; justify-content: center; gap: 5px; padding: 13px 12px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg, var(--surface-1), var(--surface-3)); box-shadow: var(--shadow-soft); }
.statistics-icon::after { content: ""; position: absolute; left: 11px; right: 11px; bottom: 11px; height: 1px; background: var(--baseline); }
.statistics-icon > span { position: relative; z-index: 1; width: 7px; border-radius: 5px 5px 2px 2px; background: linear-gradient(to top, var(--received), var(--aqua)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--surface-1), transparent 70%); }
.statistics-icon > span:nth-child(1) { height: 14px; }
.statistics-icon > span:nth-child(2) { height: 25px; }
.statistics-icon > span:nth-child(3) { height: 20px; }
.dashboard-heading > div:first-child > p:last-child { max-width: 680px; margin: 15px 0 0; color: var(--ink-2); font-size: 1.02rem; }
.heading-meta { display: flex; align-items: flex-end; flex-direction: column; gap: 9px; color: var(--muted); font-size: .7rem; white-space: nowrap; }
.data-badge, .api-badge { display: inline-flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-1); color: var(--ink-2); font-size: .71rem; font-weight: 600; box-shadow: var(--shadow-soft); white-space: nowrap; }
.data-badge i, .api-badge i { width: 7px; height: 7px; border-radius: 50%; background: var(--approved); box-shadow: 0 0 0 4px color-mix(in srgb, var(--approved), transparent 83%); }
.api-badge i { background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 82%); }

/* Latest system overview */
.system-overview { display: grid; grid-template-columns: minmax(310px, .72fr) minmax(0, 1.28fr); gap: 15px; min-width: 0; margin-bottom: 15px; }
.system-pulse { position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 390px; display: grid; grid-template-rows: auto 1fr auto; padding: 25px; border: 1px solid rgba(255,255,255,.09); border-radius: 22px; background: linear-gradient(145deg, var(--pulse-a), var(--pulse-b)); color: var(--pulse-ink); box-shadow: 0 22px 55px rgba(10,35,53,.16); }
.system-pulse::after { content: ""; position: absolute; z-index: -1; width: 250px; height: 250px; right: -105px; top: -120px; border-radius: 50%; background: radial-gradient(circle, rgba(53,196,181,.25), transparent 68%); }
.pulse-eyebrow { margin: 0 0 7px; color: #72d9ce; font-size: .65rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; }
.pulse-title-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.pulse-title-line h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.55rem, 2.5vw, 2.15rem); letter-spacing: -.045em; }
.pulse-quarter { flex: none; padding: 6px 9px; border: 1px solid rgba(255,255,255,.13); border-radius: 999px; background: rgba(4,20,31,.22); color: var(--pulse-ink); font-size: .64rem; font-weight: 700; }
.pulse-copy > p:last-child { max-width: 340px; margin: 8px 0 0; color: var(--pulse-muted); font-size: .72rem; line-height: 1.5; }
.pulse-stats { align-self: center; margin: 17px 0; }
.pulse-stats > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 14px; padding: 12px 0; border-top: 1px solid rgba(255,255,255,.10); }
.pulse-stats dt { color: var(--pulse-muted); font-size: .64rem; font-weight: 600; }
.pulse-stats dd:not(.pulse-delta) { grid-column: 2; grid-row: 1 / span 2; align-self: center; margin: 0; font-family: "Manrope", sans-serif; font-size: 1.2rem; font-weight: 700; letter-spacing: -.035em; font-variant-numeric: tabular-nums; }
.pulse-stats .pulse-delta { grid-column: 1; grid-row: 2; margin: 0; color: var(--pulse-muted); font-size: .59rem; font-variant-numeric: tabular-nums; }
.pulse-trend { display: grid; grid-template-columns: minmax(0, 1fr) 126px; align-items: end; gap: 14px; color: var(--pulse-muted); font-size: .61rem; }
.pulse-spark { height: 43px; display: flex; align-items: flex-end; gap: 4px; padding-bottom: 2px; border-bottom: 1px solid rgba(255,255,255,.13); }
.pulse-spark span { flex: 1; min-width: 4px; border-radius: 4px 4px 1px 1px; background: linear-gradient(to top, rgba(53,196,181,.35), #62d9cc); }
.pulse-spark .is-gap { height: 3px; border-radius: 999px; background: rgba(255,255,255,.16); }
.backlog-rank-card { min-width: 0; }
.backlog-rank-wrap { height: 312px; }

/* Form explorer */
.explorer-head { overflow: hidden; display: grid; grid-template-columns: minmax(320px, .85fr) 1.45fr; min-height: 156px; margin-bottom: 15px; border: 1px solid var(--border); border-radius: 24px; background: var(--surface-1); box-shadow: var(--shadow); }
.controls { display: flex; padding: 27px; border-right: 1px solid var(--grid); background: var(--surface-2); }
.controls label, .compare-heading label, #receiptForm > label { width: 100%; display: flex; flex-direction: column; gap: 10px; color: var(--muted); font-size: .68rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; }
.select-shell { position: relative; display: block; }
.select-shell::after { content: "⌄"; position: absolute; right: 15px; top: 50%; transform: translateY(-58%); color: var(--ink-2); pointer-events: none; font-size: 1.05rem; }
select { appearance: none; width: 100%; min-height: 54px; padding: 0 44px 0 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-1); color: var(--ink-1); font: 500 .88rem/1.3 "DM Sans", sans-serif; cursor: pointer; }
select:hover { border-color: var(--baseline); }
.form-head { align-self: center; padding: 27px 34px; }
.form-head .form-code { margin: 0 0 7px; color: var(--received); font-size: .69rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.form-head h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 2.4vw, 1.8rem); line-height: 1.2; letter-spacing: -.038em; }
.form-head #formMeta { margin: 8px 0 0; color: var(--muted); font-size: .75rem; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.form-actions .compact-button { min-height: 36px; padding-inline: 12px; font-size: .68rem; }
.form-actions .compact-button[aria-pressed="true"] { border-color: color-mix(in srgb, var(--approved), transparent 42%); background: var(--aqua-soft); color: var(--good); }
.action-feedback { color: var(--muted); font-size: .65rem; }

/* Local watchlist and latest-report changes */
.personal-insights { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 15px; min-width: 0; margin-bottom: 15px; scroll-margin-top: 92px; }
.personal-insights .card { padding-bottom: 21px; }
.tool-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.tool-heading .section-kicker { margin-bottom: 5px; }
.tool-heading h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: 1.18rem; letter-spacing: -.035em; }
.local-badge, .quarter-pill-soft { flex: none; display: inline-flex; align-items: center; padding: 6px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: .61rem; font-weight: 700; white-space: nowrap; }
.local-badge::before { content: ""; width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: var(--approved); }
.tool-description { margin: 8px 0 0; color: var(--ink-2); font-size: .74rem; line-height: 1.5; }
.snapshot-line { min-height: 18px; margin: 10px 0 7px; color: var(--muted); font-size: .64rem; }
.watch-list { display: grid; gap: 8px; }
.watch-empty { margin: 0; padding: 18px; border: 1px dashed var(--baseline); border-radius: 14px; color: var(--muted); background: var(--surface-2); font-size: .72rem; line-height: 1.5; }
.watch-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch; overflow: hidden; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.watch-open { min-width: 0; display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); align-items: center; gap: 12px; padding: 12px 14px; border: 0; background: transparent; color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; }
.watch-open:hover { background: color-mix(in srgb, var(--received), transparent 94%); }
.watch-name { min-width: 0; }
.watch-name strong, .quarter-change-copy strong { display: block; font-family: "Manrope", sans-serif; font-size: .76rem; }
.watch-name small, .quarter-change-copy small { display: block; overflow: hidden; margin-top: 2px; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.watch-changes { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; }
.change-chip { display: inline-flex; padding: 4px 6px; border-radius: 7px; background: var(--surface-1); color: var(--ink-2); font-size: .58rem; font-variant-numeric: tabular-nums; }
.change-chip.up { color: var(--bad); }
.change-chip.down { color: var(--good); }
.watch-remove { width: 39px; border: 0; border-left: 1px solid var(--border); background: transparent; color: var(--muted); font-size: 1rem; cursor: pointer; }
.watch-remove:hover { background: color-mix(in srgb, var(--denied), transparent 91%); color: var(--bad); }
.quarter-change-list { display: grid; gap: 7px; margin: 13px 0 10px; }
.quarter-change-item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--grid); }
.quarter-change-value { flex: none; font-family: "Manrope", sans-serif; font-size: .75rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.quarter-change-value.up { color: var(--bad); }
.quarter-change-value.down { color: var(--good); }

/* KPI row */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 15px; }
.kpi { position: relative; overflow: hidden; min-width: 0; padding: 18px 17px 16px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-1); box-shadow: var(--shadow-soft); transition: transform .2s ease, border-color .2s ease; }
.kpi:hover { transform: translateY(-3px); border-color: var(--baseline); }
.kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--metric-color, var(--received)); opacity: .9; }
.kpi .label { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: .63rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.kpi .swatch { width: 8px; height: 8px; border-radius: 3px; flex: none; }
.kpi .value { margin-top: 8px; font-family: "Manrope", sans-serif; font-size: clamp(1.25rem, 2vw, 1.72rem); font-weight: 700; letter-spacing: -.045em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi .delta { min-height: 18px; margin-top: 3px; color: var(--muted); font-size: .65rem; font-variant-numeric: tabular-nums; }
.kpi .delta.up { color: var(--good); }
.kpi .delta.down { color: var(--bad); }

/* Chart surfaces */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; min-width: 0; margin-bottom: 15px; }
.card { min-width: 0; max-width: 100%; margin: 0; padding: 23px 23px 17px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-1); box-shadow: var(--shadow); }
.card.wide { grid-column: 1 / -1; }
.card figcaption { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 18px; }
.card figcaption > span:first-child { display: flex; flex-direction: column; gap: 2px; }
.card figcaption strong { font-family: "Manrope", sans-serif; font-size: .95rem; letter-spacing: -.02em; }
.card figcaption small { color: var(--muted); font-size: .69rem; font-weight: 400; }
.legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--ink-2); font-size: .66rem; }
.legend span, .decision-totals span { display: inline-flex; align-items: center; gap: 5px; }
.legend i, .decision-totals i { width: 9px; height: 9px; border-radius: 3px; }
.chart-wrap { position: relative; min-width: 0; height: 270px; }
.chart-wrap canvas { max-width: 100% !important; }
.chart-wrap.chart-large { height: 345px; }
.primary-chart-row { margin-bottom: 15px; }
.insight-grid { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.52fr); gap: 15px; min-width: 0; margin-bottom: 15px; }
.outcome-card { min-width: 0; }
.donut-wrap { position: relative; height: 215px; }
.donut-center { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; pointer-events: none; }
.donut-center strong { font-family: "Manrope", sans-serif; font-size: 1.65rem; letter-spacing: -.05em; }
.donut-center span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .07em; }
.decision-totals { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px 13px; min-height: 22px; color: var(--ink-2); font-size: .65rem; }
.landscape-row { margin-bottom: 54px; }
.landscape-key { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .67rem; }
.landscape-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange), transparent 80%); }
.chart-note { margin: 5px 0 0; color: var(--muted); font-size: .68rem; }

/* Comparison lab */
.compare-section { scroll-margin-top: 92px; margin: 0 0 16px; padding: 34px; border-radius: 28px; background: linear-gradient(135deg, #0d2a40, #133d57); color: #edf7fb; box-shadow: 0 24px 60px rgba(10,35,53,.18); }
.compare-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(440px, .9fr); align-items: end; gap: 40px; margin-bottom: 24px; }
.compare-heading h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.75rem, 3vw, 2.8rem); letter-spacing: -.05em; }
.compare-heading > div > p:last-child { max-width: 580px; margin: 8px 0 0; color: #a9beca; font-size: .88rem; }
.compare-heading .section-kicker { color: #72d9ce; }
.compare-heading label { color: #8fa8b6; }
.compare-controls { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr); gap: 12px; }
.compare-heading select { border-color: rgba(255,255,255,.13); background: rgba(5,24,37,.56); color: #f1f8fb; }
.compare-heading .select-shell::after { color: #bed0d9; }
.compare-card { border-color: rgba(255,255,255,.10); background: rgba(7,28,42,.58); color: #f4f9fb; box-shadow: inset 0 1px rgba(255,255,255,.03); }
.compare-card figcaption small, .compare-card .legend { color: #99afbb; }
.compare-note { margin: 8px 0 0; color: #99afbb; font-size: .68rem; line-height: 1.5; }

.details-toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 18px 22px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-1); color: var(--ink-1); box-shadow: var(--shadow-soft); font: inherit; text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease; }
.details-toggle:hover { border-color: var(--baseline); transform: translateY(-2px); }
.toggle-copy { display: flex; flex-direction: column; gap: 2px; }
.toggle-copy strong { font-family: "Manrope", sans-serif; font-size: .84rem; }
.toggle-copy small { color: var(--muted); font-size: .68rem; }
.details-toggle .chev { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-3); color: var(--ink-2); transition: transform .22s ease; }
.details-toggle.open .chev { transform: rotate(180deg); }
.details { margin-top: 15px; }
.details[hidden] { display: none; }
.table-wrap { overflow-x: auto; margin-top: 15px; padding: 8px 20px 14px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-1); box-shadow: var(--shadow-soft); }
table { width: 100%; border-collapse: collapse; font-size: .76rem; }
th, td { padding: 11px 12px; border-bottom: 1px solid var(--grid); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
th:first-child, td:first-child { position: sticky; left: 0; z-index: 1; text-align: left; background: var(--surface-1); }
thead th { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; }
tbody th { color: var(--ink-1); font-weight: 600; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }

/* Receipt intelligence */
.receipt-lab { scroll-margin-top: 92px; margin: 0 calc(-1 * max(24px, calc((100vw - 1240px) / 2))); padding: 86px max(24px, calc((100vw - 1240px) / 2)); background: color-mix(in srgb, var(--surface-1), var(--page) 30%); border-top: 1px solid var(--border); }
.receipt-heading { display: flex; align-items: end; justify-content: space-between; gap: 34px; margin-bottom: 30px; }
.receipt-heading > div { max-width: 800px; }
.receipt-heading h2, .about-heading h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(2rem, 4vw, 3.55rem); line-height: 1.06; letter-spacing: -.058em; }
.receipt-heading > div > p:last-child, .about-heading > p:last-child { max-width: 670px; margin: 13px 0 0; color: var(--ink-2); font-size: .93rem; }
.api-badge { box-shadow: none; }
.receipt-grid { display: grid; grid-template-columns: 1.2fr .8fr; overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background: var(--surface-1); box-shadow: var(--shadow); }
.receipt-form-panel { padding: clamp(28px, 4vw, 46px); }
#receiptForm { display: grid; gap: 17px; }
#receiptForm > label { gap: 0; }
.receipt-input-row { display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.receipt-input-row input { min-width: 0; height: 58px; padding: 0 17px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-2); color: var(--ink-1); font: 700 1rem/1 "Manrope", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.receipt-input-row input::placeholder { color: var(--muted); font-weight: 600; opacity: .65; }
.receipt-input-row button, .official-button { min-height: 58px; padding: 0 21px; border: 0; border-radius: 15px; background: var(--aqua); color: #082a33; font: 700 .79rem/1 "DM Sans", sans-serif; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; }
#receiptHelp { margin: -10px 0 2px; color: var(--muted); font-size: .68rem; }
.form-error { min-height: 19px; margin: -11px 0 0; color: var(--bad); font-size: .72rem; font-weight: 600; }
.case-form-select select { background: var(--surface-2); }
.case-result { margin-top: 28px; padding-top: 26px; border-top: 1px solid var(--grid); }
.case-result[hidden] { display: none; }
.case-result-top { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.case-result-top > div { display: flex; flex-direction: column; gap: 2px; }
.case-result-top span { color: var(--muted); font-size: .65rem; text-transform: uppercase; letter-spacing: .08em; }
.case-result-top strong { font-family: "Manrope", sans-serif; font-size: 1.28rem; letter-spacing: .04em; }
.valid-badge { padding: 7px 10px; border-radius: 999px; background: var(--aqua-soft); color: var(--good) !important; font-weight: 700; }
.receipt-anatomy { margin-bottom: 18px; }
.receipt-anatomy h3 { margin: 0 0 10px; font-family: "Manrope", sans-serif; font-size: .88rem; letter-spacing: -.02em; }
.anatomy-grid { display: grid; grid-template-columns: .72fr 1.28fr; gap: 9px; }
.anatomy-grid > div { min-width: 0; padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); }
.anatomy-grid span { display: block; color: var(--muted); font-size: .61rem; text-transform: uppercase; letter-spacing: .07em; }
.anatomy-grid strong { display: block; margin-top: 4px; font-family: "Manrope", sans-serif; font-size: 1rem; letter-spacing: .04em; }
.anatomy-grid p { margin: 5px 0 0; color: var(--ink-2); font-size: .68rem; line-height: 1.45; }
.prefix-caveat { margin: 10px 0 0; padding: 10px 12px; border-left: 3px solid var(--orange); border-radius: 0 10px 10px 0; background: color-mix(in srgb, var(--orange), transparent 92%); color: var(--ink-2); font-size: .68rem; line-height: 1.5; }
.prefix-caveat a, .method-source-link { color: var(--received); font-weight: 700; text-decoration: none; }
.prefix-caveat a:hover, .method-source-link:hover { text-decoration: underline; }
.case-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.case-stat-grid > div { min-width: 0; padding: 12px; border-radius: 13px; background: var(--surface-2); }
.case-stat-grid span { display: block; color: var(--muted); font-size: .61rem; }
.case-stat-grid strong { display: block; margin-top: 3px; font-family: "Manrope", sans-serif; font-size: .92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-reading { margin: 16px 0; color: var(--ink-2); font-size: .76rem; line-height: 1.6; }
.case-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.secondary-button { min-height: 44px; padding: 0 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); color: var(--ink-1); font: 600 .75rem/1 "DM Sans", sans-serif; cursor: pointer; }
.official-button { min-height: 44px; background: var(--navy); color: #fff; }
.tracker-action { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.danger-button { color: var(--bad); }
.case-journal { margin-top: 24px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-2); }
.case-journal[hidden], .journal-workspace[hidden] { display: none; }
.journal-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.journal-eyebrow { display: block; margin-bottom: 3px; color: var(--received); font-size: .6rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.journal-heading h3 { margin: 0; font-family: "Manrope", sans-serif; font-size: 1rem; letter-spacing: -.025em; }
.journal-description { margin: 8px 0 14px; color: var(--ink-2); font-size: .7rem; line-height: 1.5; }
.journal-enable { min-height: 40px; }
.journal-form { display: grid; grid-template-columns: minmax(0, 1fr) minmax(130px, .5fr); gap: 10px; padding-top: 15px; border-top: 1px solid var(--grid); }
.journal-form label { display: flex; flex-direction: column; gap: 6px; color: var(--muted); font-size: .62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.journal-form select, .journal-form input, .journal-form textarea { width: 100%; min-height: 43px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-1); color: var(--ink-1); font: 500 .75rem/1.4 "DM Sans", sans-serif; }
.journal-form select { appearance: auto; }
.journal-form textarea { min-height: 74px; resize: vertical; }
.journal-note-field { grid-column: 1 / -1; }
.journal-add { justify-self: start; min-height: 40px; padding-inline: 17px; border: 0; }
.journal-entries { display: grid; gap: 8px; margin-top: 16px; }
.journal-empty { margin: 0; padding: 13px; border: 1px dashed var(--baseline); border-radius: 11px; color: var(--muted); font-size: .68rem; }
.journal-entry { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); }
.journal-date { color: var(--muted); font-size: .62rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.journal-entry strong { display: block; font-size: .72rem; }
.journal-entry p { margin: 3px 0 0; color: var(--ink-2); font-size: .68rem; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.journal-entry-remove { width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.journal-entry-remove:hover { background: color-mix(in srgb, var(--denied), transparent 90%); color: var(--bad); }
.journal-controls { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 13px; }
.journal-controls .secondary-button { min-height: 38px; }
.journal-status { min-height: 17px; margin: 9px 0 0; color: var(--muted); font-size: .64rem; }
.case-capability { padding: clamp(28px, 4vw, 44px); background: linear-gradient(145deg, #0c293f, #123a53); color: #edf7fb; }
.capability-head { display: flex; flex-direction: column; gap: 4px; margin-bottom: 25px; }
.capability-head span { color: #79d9ce; font-size: .65rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.capability-head strong { font-family: "Manrope", sans-serif; font-size: 1.22rem; letter-spacing: -.03em; }
.capability-list { margin: 0; padding: 0; list-style: none; }
.capability-list li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; padding: 15px 0; border-top: 1px solid rgba(255,255,255,.10); }
.capability-list li > span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: rgba(86,213,197,.12); color: #80ded3; font-size: .6rem; font-weight: 700; }
.capability-list .locked > span { background: rgba(255,255,255,.07); color: #90a7b3; }
.capability-list strong { display: block; font-size: .77rem; }
.capability-list p { margin: 3px 0 0; color: #9eb4c0; font-size: .69rem; line-height: 1.5; }
.privacy-note { margin: 20px 0 0; padding: 13px 14px; border: 1px solid rgba(255,255,255,.09); border-radius: 12px; color: #9eb4c0; background: rgba(4,20,31,.25); font-size: .65rem; line-height: 1.5; }
.tracker-companion { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr); gap: 28px 44px; margin-top: 20px; padding: clamp(26px, 4vw, 42px); overflow: hidden; border: 1px solid var(--border); border-radius: 28px; background:
  radial-gradient(circle at 93% 12%, color-mix(in srgb, var(--aqua), transparent 83%), transparent 31%),
  linear-gradient(135deg, color-mix(in srgb, var(--surface-1), var(--page) 12%), var(--surface-1));
  box-shadow: var(--shadow-soft); }
.tracker-companion-copy h3 { max-width: 720px; margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.45rem, 2.7vw, 2.25rem); line-height: 1.08; letter-spacing: -.045em; }
.tracker-companion-copy > p:last-of-type { max-width: 700px; margin: 13px 0 0; color: var(--ink-2); font-size: .8rem; line-height: 1.65; }
.tracker-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tracker-links .secondary-button { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.tracker-steps { display: grid; align-content: center; gap: 0; margin: 0; padding: 0; list-style: none; }
.tracker-steps li { display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; padding: 15px 0; border-top: 1px solid var(--grid); }
.tracker-steps li:first-child { border-top: 0; }
.tracker-steps li > span { display: grid; place-items: center; align-self: start; width: 31px; height: 31px; border-radius: 10px; background: var(--aqua-soft); color: var(--good); font: 800 .6rem/1 "Manrope", sans-serif; }
.tracker-steps p { margin: 0; }
.tracker-steps strong, .tracker-steps small { display: block; }
.tracker-steps strong { color: var(--ink-1); font-size: .78rem; }
.tracker-steps small { margin-top: 4px; color: var(--ink-2); font-size: .7rem; line-height: 1.5; }
.tracker-disclosure { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--grid); color: var(--muted); font-size: .66rem; line-height: 1.55; }

/* Methodology and footer */
.about { margin: 0 calc(-1 * max(24px, calc((100vw - 1240px) / 2))); padding: 86px max(24px, calc((100vw - 1240px) / 2)); border-top: 1px solid var(--border); }
.about-heading { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 50px; align-items: end; margin-bottom: 38px; }
.about-heading .section-kicker { grid-column: 1 / -1; }
.about-heading > p:last-child { justify-self: end; }
.about-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.about-grid article { padding: 25px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-1); }
.about-number { display: block; margin-bottom: 30px; color: var(--received); font-family: "Manrope", sans-serif; font-size: .68rem; font-weight: 800; }
.about-grid h3 { margin: 0 0 9px; font-family: "Manrope", sans-serif; font-size: .96rem; letter-spacing: -.02em; }
.about-grid p { margin: 0; color: var(--ink-2); font-size: .79rem; line-height: 1.62; }
.method-source-link { display: inline-block; margin-top: 14px; font-size: .72rem; }
.more-reyml { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin: 0 0 24px; padding: 24px 26px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface-1); box-shadow: var(--shadow-soft); }
.more-reyml .section-kicker { margin-bottom: 5px; }
.more-reyml h2 { margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.15rem, 2.2vw, 1.55rem); letter-spacing: -.035em; }
.more-reyml p:last-child { margin: 5px 0 0; color: var(--muted); font-size: .72rem; }
.more-reyml > a { flex: none; padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px; color: var(--ink-1); font-size: .72rem; font-weight: 700; text-decoration: none; }
.more-reyml > a:hover { border-color: var(--baseline); background: var(--surface-2); }
footer { display: flex; justify-content: space-between; align-items: center; gap: 40px; padding: 32px 0 42px; color: var(--muted); font-size: .69rem; }
.footer-brand { margin-bottom: 7px; }
.footer-brand .brand-mark { width: 30px; height: 30px; border-radius: 9px; }
footer p { margin: 3px 0; }
.footer-meta { max-width: 620px; text-align: right; }
.footer-meta a { color: var(--received); font-weight: 700; text-decoration: none; }
.footer-meta a:hover { text-decoration: underline; }

@media (max-width: 1040px) {
  .topbar { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 8px; }
  .topnav { display: flex; padding: 0; border: 0; background: transparent; }
  .topnav a { display: none; }
  .topnav a[href="#receiptLab"] { display: block; padding: 7px 10px; border: 1px solid var(--border); background: var(--surface-1); }
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .personal-insights { grid-template-columns: 1fr; }
  .system-overview { grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr); }
  .compare-heading { grid-template-columns: minmax(0, 1fr) minmax(400px, .95fr); gap: 25px; }
  .receipt-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 780px) {
  .viz-root { padding-inline: 16px; }
  .topbar { height: 68px; padding-inline: 4px; }
  .source-shortcut { display: none; }
  .dashboard { padding: 38px 0 64px; }
  .dashboard-heading, .receipt-heading { align-items: flex-start; flex-direction: column; }
  .heading-meta { align-items: flex-start; }
  .dashboard-heading h1 { font-size: clamp(2.35rem, 12vw, 3.35rem); }
  .statistics-icon { width: 50px; height: 50px; padding: 10px; border-radius: 15px; }
  .statistics-icon::after { left: 9px; right: 9px; bottom: 9px; }
  .statistics-icon > span:nth-child(1) { height: 12px; }
  .statistics-icon > span:nth-child(2) { height: 22px; }
  .statistics-icon > span:nth-child(3) { height: 17px; }
  .system-overview { grid-template-columns: minmax(0, 1fr); }
  .system-pulse { min-height: 350px; }
  .explorer-head { grid-template-columns: 1fr; }
  .controls { border-right: 0; border-bottom: 1px solid var(--grid); }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .charts, .insight-grid { grid-template-columns: minmax(0, 1fr); }
  .card.wide { grid-column: auto; }
  .card { padding: 20px 16px 15px; }
  .card figcaption { flex-direction: column; }
  .legend { justify-content: flex-start; }
  .chart-wrap.chart-large { height: 310px; }
  .landscape-row { margin-bottom: 40px; }
  .compare-section { padding: 26px 18px; border-radius: 23px; }
  .compare-heading { grid-template-columns: 1fr; gap: 24px; }
  .receipt-lab, .about { margin-inline: -16px; padding: 66px 16px; }
  .receipt-grid { grid-template-columns: 1fr; }
  .tracker-companion { grid-template-columns: 1fr; }
  .watch-open { grid-template-columns: minmax(0, 1fr); gap: 7px; }
  .watch-changes { justify-content: flex-start; }
  .about-heading { display: block; }
  .about-heading > p:last-child { margin-top: 13px; }
  .about-grid { grid-template-columns: 1fr; }
  .about-number { margin-bottom: 18px; }
  footer { flex-direction: column; align-items: flex-start; }
  .footer-meta { text-align: left; }
}

@media (max-width: 480px) {
  .brand-name { display: none; }
  .theme-toggle { width: 40px; padding-inline: 0; }
  .theme-label { display: none; }
  .dashboard-heading h1 { letter-spacing: -.06em; }
  .dashboard-title-row { gap: 11px; align-items: flex-end; }
  .statistics-icon { width: 44px; height: 44px; padding: 8px; border-radius: 13px; }
  .statistics-icon::after { bottom: 7px; }
  .statistics-icon > span { width: 6px; }
  .statistics-icon > span:nth-child(1) { height: 10px; }
  .statistics-icon > span:nth-child(2) { height: 19px; }
  .statistics-icon > span:nth-child(3) { height: 15px; }
  .pulse-trend { grid-template-columns: 1fr; }
  .pulse-spark { width: 100%; }
  .backlog-rank-wrap { height: 330px; }
  .data-badge { white-space: normal; }
  .kpis { gap: 9px; }
  .kpi { padding: 16px 13px 14px; }
  .kpi .label { white-space: normal; }
  .kpi .value { font-size: 1.24rem; }
  .form-head, .controls { padding: 22px; }
  .receipt-input-row { grid-template-columns: 1fr; }
  .receipt-input-row button { min-height: 50px; }
  .case-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .anatomy-grid { grid-template-columns: 1fr; }
  .case-actions { flex-direction: column; }
  .case-actions > * { width: 100%; }
  .tracker-links { flex-direction: column; }
  .tracker-links > * { width: 100%; }
  .journal-heading { flex-direction: column; }
  .journal-form { grid-template-columns: 1fr; }
  .journal-note-field { grid-column: auto; }
  .more-reyml { align-items: flex-start; flex-direction: column; }
  .compare-controls { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Language switch (EN / ES) */
.lang-switch { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-1); box-shadow: var(--shadow-soft); }
.lang-opt { border: 0; background: transparent; color: var(--muted); font: 700 .72rem/1 "DM Sans", system-ui, sans-serif; letter-spacing: .04em; padding: 7px 10px; border-radius: 9px; cursor: pointer; transition: color .15s ease, background .15s ease; }
.lang-opt:hover { color: var(--ink-1); }
.lang-opt.active { background: var(--navy); color: #fff; }
.viz-root[data-theme="dark"] .lang-opt.active { background: var(--received); color: #06121d; }

/* Receipt-form helper text (form can't be derived from the receipt number) */
.case-form-help { margin: 9px 0 0; color: var(--muted); font-size: .76rem; line-height: 1.45; }

@media (max-width: 640px) {
  .topnav { display: none; }
}

/* Evidence-first intelligence cockpit */
.dashboard { padding-top: 34px; }
.dashboard-heading { align-items: center; margin-bottom: 24px; }
.dashboard-heading h1 { font-size: clamp(1.85rem, 3.4vw, 3.15rem); letter-spacing: -.055em; }
.dashboard-heading > div:first-child > p:last-child { margin-top: 10px; font-size: .9rem; }
.statistics-icon { width: 48px; height: 48px; padding: 10px; border-radius: 15px; }
.explorer-head { margin-bottom: 12px; box-shadow: var(--shadow-soft); }

.form-intelligence {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 28px;
  margin-bottom: 12px;
  padding: 26px 28px;
  border: 1px solid color-mix(in srgb, var(--received), transparent 78%);
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0, color-mix(in srgb, var(--aqua), transparent 78%), transparent 24rem),
    linear-gradient(135deg, color-mix(in srgb, var(--received), var(--surface-1) 91%), color-mix(in srgb, var(--aqua), var(--surface-1) 94%));
}
.form-intelligence::after { content: ""; position: absolute; width: 170px; height: 170px; right: -92px; bottom: -118px; border: 26px solid color-mix(in srgb, var(--compare), transparent 85%); border-radius: 50%; pointer-events: none; }
.form-intelligence h2 { max-width: 920px; margin: 0; font-family: "Manrope", sans-serif; font-size: clamp(1.35rem, 2.7vw, 2.35rem); line-height: 1.08; letter-spacing: -.045em; }
.form-intelligence p:last-child { max-width: 850px; margin: 10px 0 0; color: var(--ink-2); font-size: .83rem; line-height: 1.55; }
.insight-quarter { position: relative; z-index: 1; flex: none; display: inline-flex; padding: 7px 10px; border: 1px solid var(--border); border-radius: 999px; background: color-mix(in srgb, var(--surface-1), transparent 12%); color: var(--ink-2); font-size: .65rem; font-weight: 700; }

.kpis { gap: 10px; margin-bottom: 12px; }
.kpi { min-height: 118px; padding: 17px 16px 14px; border-radius: 16px; box-shadow: none; }
.kpi .value { font-size: clamp(1.28rem, 2vw, 1.82rem); }
.kpi .delta { margin-top: 6px; }

.signal-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; min-width: 0; margin-bottom: 14px; }
.signal-card { padding: 21px 20px 15px; box-shadow: var(--shadow-soft); }
.signal-card figcaption { min-height: 42px; margin-bottom: 11px; }
.signal-card .chart-wrap { height: 225px; }
.signal-card.flow-card { grid-column: 1 / -1; background: linear-gradient(180deg, color-mix(in srgb, var(--received), var(--surface-1) 96%), var(--surface-1)); }
.signal-card.flow-card .chart-wrap { height: 285px; }
.signal-card.pending-card { background: linear-gradient(180deg, color-mix(in srgb, var(--pending), var(--surface-1) 96%), var(--surface-1)); }
.signal-card.time-card { background: linear-gradient(180deg, color-mix(in srgb, var(--proctime), var(--surface-1) 96%), var(--surface-1)); }
.signal-card.decision-card { background: linear-gradient(180deg, color-mix(in srgb, var(--approved), var(--surface-1) 96%), var(--surface-1)); }
.signal-value { flex: none; color: var(--ink-1); font-family: "Manrope", sans-serif; font-size: .95rem; letter-spacing: -.03em; }
.signal-reading { margin: 5px 0 0; color: var(--ink-2); font-size: .68rem; line-height: 1.45; }

.landscape-row { margin: 0 0 14px; }
.landscape-card { padding: 27px; background:
  radial-gradient(circle at 7% 4%, color-mix(in srgb, var(--aqua), transparent 88%), transparent 25rem),
  var(--surface-1); }
.landscape-heading { align-items: center !important; }
.report-control { display: grid; grid-template-columns: auto minmax(120px, 190px) auto; align-items: center; gap: 10px; color: var(--muted); font-size: .65rem; font-weight: 700; }
.report-control input { width: 100%; accent-color: var(--received); }
.report-control output { min-width: 68px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--ink-1); text-align: center; }
.landscape-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(260px, .65fr); gap: 18px; align-items: stretch; }
.landscape-plot { min-width: 0; }
.landscape-plot .chart-wrap { height: 465px; }
.size-key { display: flex; align-items: center; justify-content: flex-end; gap: 13px; min-height: 24px; margin-top: 4px; color: var(--muted); font-size: .58rem; }
.size-key span { display: inline-flex; align-items: center; gap: 5px; }
.size-key i { display: inline-block; border-radius: 50%; background: color-mix(in srgb, var(--received), transparent 74%); border: 1px solid color-mix(in srgb, var(--received), transparent 45%); }
.bubble-small { width: 8px; height: 8px; }.bubble-medium { width: 14px; height: 14px; }.bubble-large { width: 21px; height: 21px; }
.landscape-detail { display: flex; flex-direction: column; justify-content: space-between; gap: 18px; min-width: 0; padding: 20px; border: 1px solid var(--border); border-radius: 19px; background: color-mix(in srgb, var(--surface-2), transparent 4%); }
.landscape-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .61rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.landscape-detail-head em { font-style: normal; }
.landscape-detail h3 { margin: 10px 0 0; font-family: "Manrope", sans-serif; font-size: 1.35rem; letter-spacing: -.045em; }
.landscape-description { margin: 5px 0 15px; color: var(--ink-2); font-size: .69rem; line-height: 1.45; }
.landscape-stat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.landscape-stat-grid > div { min-width: 0; padding: 11px; border-radius: 12px; background: var(--surface-1); }
.landscape-stat-grid span { display: block; color: var(--muted); font-size: .57rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.landscape-stat-grid strong { display: block; overflow: hidden; margin-top: 4px; font-family: "Manrope", sans-serif; font-size: 1rem; letter-spacing: -.035em; text-overflow: ellipsis; }
.landscape-stat-grid small { display: block; margin-top: 3px; color: var(--muted); font-size: .55rem; line-height: 1.35; }
.landscape-change { margin: 12px 0 0; color: var(--ink-2); font-size: .65rem; }
.landscape-actions { display: grid; grid-template-columns: 1fr; gap: 7px; }
.landscape-actions button { width: 100%; min-height: 40px; }
.landscape-actions button:disabled { opacity: .42; cursor: default; }

.compare-section {
  margin-bottom: 14px;
  padding: 30px;
  border: 1px solid color-mix(in srgb, var(--compare), transparent 78%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 7% 0, color-mix(in srgb, var(--received), transparent 84%), transparent 31rem),
    radial-gradient(circle at 96% 8%, color-mix(in srgb, var(--compare), transparent 86%), transparent 28rem),
    var(--surface-1);
  color: var(--ink-1);
  box-shadow: var(--shadow);
}
.compare-section .section-kicker { color: var(--received); }
.compare-heading { grid-template-columns: minmax(0, .75fr) minmax(520px, 1.25fr); align-items: end; margin-bottom: 22px; }
.compare-heading > div > p:last-child { color: var(--ink-2); }
.compare-pickers { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: end; gap: 9px; }
.compare-pickers label { display: flex; flex-direction: column; gap: 8px; color: var(--muted); font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.compare-section .compare-pickers select { min-height: 50px; border-color: var(--border); background: var(--surface-1); color: var(--ink-1); }
.compare-section .compare-pickers .select-shell::after { color: var(--ink-2); }
.compare-swap { width: 46px; height: 50px; padding: 0; font-size: 1rem; }
.compare-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 14px; background: color-mix(in srgb, var(--surface-2), transparent 4%); }
.compare-identities { display: flex; flex-wrap: wrap; gap: 8px; }
.compare-identities > span { display: inline-flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: 999px; background: var(--surface-1); color: var(--ink-2); font-size: .65rem; }
.compare-identities i { width: 9px; height: 9px; border-radius: 50%; }.identity-a i { background: var(--received); }.identity-b i { background: var(--compare); }
.compare-identities strong { color: var(--ink-1); }
.compare-story { margin: 0 0 12px; padding: 16px 18px; border-left: 4px solid var(--aqua); border-radius: 4px 14px 14px 4px; background: color-mix(in srgb, var(--aqua), transparent 91%); color: var(--ink-1); font-family: "Manrope", sans-serif; font-size: .85rem; font-weight: 700; line-height: 1.55; }
.compare-snapshot { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--surface-1), transparent 3%); }
.compare-snapshot table { width: 100%; border-collapse: collapse; }
.compare-snapshot th, .compare-snapshot td { padding: 12px 14px; border-bottom: 1px solid var(--grid); text-align: right; }
.compare-snapshot th:first-child { text-align: left; }
.compare-snapshot thead th { color: var(--muted); background: var(--surface-2); font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; }
.compare-snapshot tbody tr:last-child > * { border-bottom: 0; }
.compare-snapshot tbody th { color: var(--ink-2); font-size: .7rem; }
.compare-snapshot td strong { display: block; color: var(--ink-1); font-family: "Manrope", sans-serif; font-size: .82rem; }
.compare-snapshot td small { display: block; margin-top: 2px; color: var(--muted); font-size: .56rem; }
.compare-snapshot .gap-cell { color: var(--ink-2); font-size: .68rem; font-weight: 700; }
.compare-context { display: grid; grid-template-columns: minmax(190px, .42fr) minmax(0, 1.58fr); gap: 25px; align-items: center; margin-bottom: 12px; padding: 18px; border: 1px solid var(--border); border-radius: 17px; background: color-mix(in srgb, var(--compare), transparent 95%); }
.compare-context h3 { margin: 0; font-family: "Manrope", sans-serif; font-size: .88rem; letter-spacing: -.025em; }
.compare-context > div:first-child p { margin: 5px 0 0; color: var(--muted); font-size: .62rem; line-height: 1.45; }
.context-rails { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
.rail-heading { display: flex; justify-content: space-between; gap: 12px; color: var(--ink-2); font-size: .58rem; }
.rail-heading span { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); }
.rail-heading i { width: 6px; height: 6px; border-radius: 50%; }.a-dot { background: var(--received); }.b-dot { background: var(--compare); margin-left: 4px; }
.rail-track { position: relative; height: 7px; margin: 7px 0 3px; border-radius: 999px; background: linear-gradient(90deg, var(--grid), var(--baseline)); }
.rail-marker { position: absolute; top: 50%; width: 12px; height: 12px; transform: translate(-50%, -50%); border: 2px solid var(--surface-1); border-radius: 50%; box-shadow: 0 0 0 1px var(--border); }.rail-marker.a { background: var(--received); }.rail-marker.b { background: var(--compare); }
.context-rail small { display: block; color: var(--muted); font-size: .52rem; }
.compare-facets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.compare-facet { padding: 18px 16px 12px; border-radius: 17px; box-shadow: none; }
.compare-facet figcaption { margin-bottom: 8px; }
.compare-chart-wrap { position: relative; height: 225px; }
.compare-note { color: var(--muted); }

.system-overview { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 12px; margin: 0 0 12px; }
.system-story, .pressure-watch { min-width: 0; padding: 25px; border: 1px solid var(--border); border-radius: 22px; background: var(--surface-1); box-shadow: var(--shadow-soft); }
.system-story { background:
  radial-gradient(circle at 100% 0, color-mix(in srgb, var(--received), transparent 84%), transparent 24rem),
  linear-gradient(145deg, color-mix(in srgb, var(--aqua), var(--surface-1) 94%), var(--surface-1)); }
.system-story-top { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.system-story h2 { max-width: 700px; margin: 10px 0 0; font-family: "Manrope", sans-serif; font-size: clamp(1.6rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -.055em; }
.system-narrative { max-width: 720px; margin: 12px 0 18px; color: var(--ink-2); font-size: .75rem; line-height: 1.55; }
.system-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.system-metrics > div { padding: 12px; border-radius: 13px; background: color-mix(in srgb, var(--surface-1), transparent 5%); }
.system-metrics dt { color: var(--muted); font-size: .57rem; text-transform: uppercase; letter-spacing: .05em; }
.system-metrics dd { margin: 4px 0 0; font-family: "Manrope", sans-serif; font-size: 1rem; font-weight: 700; }
.system-metrics small { display: block; margin-top: 2px; color: var(--muted); font-size: .52rem; line-height: 1.3; }
.system-spark { display: grid; grid-template-columns: auto minmax(160px, 1fr); align-items: end; gap: 14px; margin-top: 18px; color: var(--muted); font-size: .6rem; }
.system-spark .pulse-spark { height: 44px; }
.pressure-watch .tool-heading { margin-bottom: 10px; }
.pressure-list { display: grid; gap: 6px; }
.pressure-item { width: 100%; display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 11px; padding: 10px; border: 1px solid transparent; border-radius: 13px; background: var(--surface-2); color: var(--ink-1); font: inherit; text-align: left; cursor: pointer; }
.pressure-item:hover { border-color: var(--border); background: color-mix(in srgb, var(--received), transparent 94%); transform: translateX(3px); }
.pressure-index { color: var(--muted); font: 700 .58rem "Manrope", sans-serif; }
.pressure-copy { min-width: 0; }
.pressure-copy small, .pressure-copy strong, .pressure-copy em { display: block; }
.pressure-copy small { color: var(--received); font-size: .52rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.pressure-copy strong { overflow: hidden; margin-top: 2px; font-family: "Manrope", sans-serif; font-size: .72rem; text-overflow: ellipsis; white-space: nowrap; }
.pressure-copy em { margin-top: 1px; color: var(--muted); font-size: .54rem; font-style: normal; }
.pressure-value { color: var(--ink-1); font-family: "Manrope", sans-serif; font-size: .76rem; font-weight: 700; white-space: nowrap; }
.personal-insights { margin-bottom: 12px; }

@media (max-width: 1040px) {
  .signal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-card { grid-column: 1 / -1; }
  .signal-card.decision-card { grid-column: 1 / -1; }
  .compare-heading { grid-template-columns: 1fr; }
  .landscape-layout { grid-template-columns: minmax(0, 1.35fr) minmax(250px, .65fr); }
}

@media (max-width: 780px) {
  .dashboard { padding-top: 22px; }
  .dashboard-heading { gap: 12px; margin-bottom: 18px; }
  .dashboard-heading h1 { font-size: clamp(1.65rem, 7vw, 2.2rem); }
  .dashboard-heading > div:first-child > p:last-child { display: none; }
  .dashboard-title-row { align-items: center; }
  .dashboard-title-row .statistics-icon { width: 40px; height: 40px; padding: 8px; border-radius: 12px; }
  .heading-meta { flex-direction: row; align-items: center; }
  #generatedBadge { display: none; }
  .form-intelligence { padding: 22px 19px; }
  .signal-grid, .compare-facets { grid-template-columns: minmax(0, 1fr); }
  .flow-card, .signal-card.decision-card { grid-column: auto; }
  .signal-card.flow-card .chart-wrap, .signal-card .chart-wrap { height: 240px; }
  .landscape-card { padding: 20px 16px; }
  .landscape-heading { align-items: flex-start !important; }
  .report-control { width: 100%; grid-template-columns: auto minmax(0, 1fr) auto; }
  .landscape-layout { grid-template-columns: minmax(0, 1fr); }
  .landscape-plot .chart-wrap { height: 390px; }
  .landscape-detail { padding: 17px; }
  .compare-section { padding: 24px 16px; }
  .compare-pickers { grid-template-columns: 1fr; }
  .compare-swap { width: 100%; height: 42px; }
  .compare-toolbar { align-items: stretch; flex-direction: column; }
  .compare-report-control { width: 100%; }
  .compare-context { grid-template-columns: 1fr; gap: 13px; }
  .context-rails { grid-template-columns: 1fr; }
  .system-overview { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .form-intelligence { flex-direction: column; gap: 14px; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi:last-child { grid-column: 1 / -1; }
  .landscape-plot .chart-wrap { height: 340px; }
  .landscape-stat-grid { grid-template-columns: 1fr 1fr; }
  .compare-snapshot thead { display: none; }
  .compare-snapshot tr { display: grid; grid-template-columns: 1fr 1fr 1fr; padding: 11px 12px; border-bottom: 1px solid var(--grid); }
  .compare-snapshot tbody tr:last-child { border-bottom: 0; }
  .compare-snapshot th { grid-column: 1 / -1; padding: 0 0 7px; border: 0; }
  .compare-snapshot td { padding: 0 5px; border: 0; text-align: left; }
  .compare-snapshot td::before { display: block; margin-bottom: 2px; color: var(--muted); font-size: .49rem; text-transform: uppercase; }
  .compare-snapshot td:nth-child(2)::before { content: "A"; }.compare-snapshot td:nth-child(3)::before { content: "B"; }.compare-snapshot td:nth-child(4)::before { content: "B − A"; }
  .system-metrics { grid-template-columns: 1fr; }
  .system-spark { grid-template-columns: 1fr; }
  .quarter-change-item { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: 7px; padding-block: 13px; }
  .quarter-change-copy { min-width: 0; }
  .quarter-change-copy small { overflow: visible; text-overflow: clip; white-space: normal; }
  .quarter-change-value { max-width: 100%; justify-self: end; text-align: right; white-space: normal; }
}