/* Air Cargo Intelligence.

   Light by default. This is a reference surface people read numbers off,
   often next to printed tables, and dark screens make dense figures harder
   to scan. Dark is offered and fully specified rather than derived, because
   an inverted light theme reads as an afterthought.

   The palette takes its cue from Navi Mumbai International Airport: a deep
   indigo drawn from its night livery, and a warm saffron from the lotus
   form of the terminal roof. Indigo carries structure, saffron marks the
   things a reader should look at.                                        */

:root {
  --ink:        #0e1b2e;
  --ink-2:      #3d5170;
  --muted:      #6c7f9b;
  --faint:      #97a7bd;

  --bg:         #f4f7fb;
  --surface:    #ffffff;
  --surface-2:  #f7f9fc;
  --surface-3:  #eef3f9;
  --border:     #dde5ef;
  --border-2:   #c6d3e3;

  --indigo:     #1b4079;
  --indigo-2:   #2c5fa8;
  --indigo-dim: #e4ecf8;
  --saffron:    #d97706;
  --saffron-dim:#fdf1e3;
  --teal:       #0e8f84;
  --teal-dim:   #e0f4f2;
  --rose:       #c0392f;
  --rose-dim:   #fceceb;
  --violet:     #6d4fb8;
  --violet-dim: #eee9f9;

  --radius:     12px;
  --radius-sm:  8px;
  --rail:       246px;

  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;

  --shadow:    0 1px 2px rgba(14,27,46,.05), 0 6px 20px -12px rgba(14,27,46,.16);
  --shadow-lg: 0 2px 6px rgba(14,27,46,.07), 0 18px 40px -20px rgba(14,27,46,.28);
}

[data-theme="dark"] {
  --ink:        #e8eef7;
  --ink-2:      #b3c2d6;
  --muted:      #8296b0;
  --faint:      #61738d;

  --bg:         #080d16;
  --surface:    #0e1624;
  --surface-2:  #141d2e;
  --surface-3:  #1b2639;
  --border:     #1e2b40;
  --border-2:   #2c3c56;

  --indigo:     #5b93e6;
  --indigo-2:   #7aa9ee;
  --indigo-dim: #16273f;
  --saffron:    #f0a53e;
  --saffron-dim:#2c2113;
  --teal:       #2fc4b2;
  --teal-dim:   #102b2a;
  --rose:       #f0736a;
  --rose-dim:   #2c1917;
  --violet:     #a78bfa;
  --violet-dim: #221c37;

  --shadow:    0 1px 2px rgba(0,0,0,.4), 0 8px 24px -14px rgba(0,0,0,.7);
  --shadow-lg: 0 2px 8px rgba(0,0,0,.5), 0 22px 48px -22px rgba(0,0,0,.8);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; height: 100%;
  background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 14.5px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 640; letter-spacing: -0.015em; }
a { color: var(--indigo); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --------------------------------------------------------------- shell */

.shell { display: flex; min-height: 100vh; }

.rail {
  width: var(--rail); flex: 0 0 var(--rail);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; padding: 20px 14px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}

.brand { display: flex; align-items: center; gap: 11px; padding: 0 8px 22px; }
.brand-mark {
  width: 36px; height: 36px; border-radius: 10px;
  display: grid; place-items: center; flex: none;
  background: linear-gradient(150deg, var(--indigo) 0%, var(--indigo-2) 55%, var(--saffron) 165%);
  color: #fff; box-shadow: var(--shadow);
}
.brand-mark svg { width: 22px; height: 22px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 14.5px; }
.brand-text span { font-size: 10.5px; color: var(--muted); letter-spacing: .1em; text-transform: uppercase; }

.nav { display: flex; flex-direction: column; gap: 1px; }
.nav-group {
  margin: 16px 10px 5px; font-size: 10.5px; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--faint);
}
.nav-group:first-child { margin-top: 0; }

.nav-item {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 9px 11px; background: none; border: 0; border-radius: var(--radius-sm);
  color: var(--ink-2); font: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); }
.nav-item.is-active { background: var(--indigo-dim); color: var(--indigo); font-weight: 600; }
.nav-ico { width: 15px; text-align: center; font-size: 12px; opacity: .8; }
.nav-tag {
  margin-left: auto; font-family: var(--mono); font-size: 10.5px;
  color: var(--muted); background: var(--surface-3);
  padding: 1px 7px; border-radius: 20px;
}
.nav-tag.warn:not(:empty) { background: var(--saffron-dim); color: var(--saffron); }

.rail-foot { margin-top: auto; padding-top: 16px; display: flex; flex-direction: column; gap: 9px; }
.pipeline-chip {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-2);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 8px 10px; border-radius: var(--radius-sm);
}
.pipeline-chip .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: none; }
.pipeline-chip.ok  .dot { background: var(--teal); box-shadow: 0 0 0 3px var(--teal-dim); }
.pipeline-chip.bad .dot { background: var(--rose); box-shadow: 0 0 0 3px var(--rose-dim); }

.theme-btn {
  background: var(--surface-2); border: 1px solid var(--border); color: var(--ink-2);
  border-radius: var(--radius-sm); padding: 8px; font: inherit; font-size: 12px; cursor: pointer;
}
.theme-btn:hover { border-color: var(--border-2); color: var(--ink); }

/* ---------------------------------------------------------------- main */

.main { flex: 1; min-width: 0; padding: 26px 30px 70px; max-width: 1520px; }

.topbar { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 18px; }
.topbar-text { flex: 1; min-width: 0; }
.topbar h1 { font-size: 24px; }
.view-sub { margin: 4px 0 0; color: var(--muted); font-size: 13.5px; }
.freshness {
  font-family: var(--mono); font-size: 11.5px; color: var(--muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 7px 11px; border-radius: var(--radius-sm); white-space: nowrap;
}

.menu-btn {
  display: none; background: var(--surface); border: 1px solid var(--border);
  color: var(--ink); border-radius: var(--radius-sm); padding: 7px 11px;
  font-size: 15px; cursor: pointer; line-height: 1;
}

.view { display: none; flex-direction: column; gap: 18px; }
.view.is-active { display: flex; }

/* Sets context before the numbers. The panels used to present figures with
   no statement of what they were or how to read them, which is most of what
   made the interface opaque. */
.explainer {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--indigo);
  border-radius: var(--radius); padding: 13px 17px;
  font-size: 13.5px; color: var(--ink-2); line-height: 1.62;
}
.explainer strong { color: var(--ink); }
.explainer em { font-style: normal; font-weight: 600; color: var(--indigo); }

/* --------------------------------------------------------------- panel */

.panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow);
  overflow: hidden; min-width: 0;
}
.panel-head {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 15px 18px; border-bottom: 1px solid var(--border);
}
.panel-head h2 { font-size: 15px; }
.panel-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); line-height: 1.5; max-width: 62ch; }
.panel-head .controls { margin-left: auto; display: flex; gap: 8px; flex: none; }
.panel-body { padding: 18px; }
.panel-body.flush { padding: 0; }
.panel-foot {
  padding: 10px 18px; border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--muted); background: var(--surface-2);
}
.panel.tall { min-height: 72vh; display: flex; flex-direction: column; }
.unit { font-family: var(--mono); }

.grid { display: grid; gap: 18px; }
.grid.two { grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); }
.grid.replay { grid-template-columns: minmax(0, 1.6fr) minmax(310px, 1fr); }
.stack { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

@media (max-width: 1100px) { .grid.replay { grid-template-columns: 1fr; } }
@media (max-width: 900px) {
  .rail { position: fixed; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .rail.is-open { transform: none; }
  .menu-btn { display: block; }
  .main { padding: 16px; }
  .grid.two { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(2, 1fr) !important; }
  .panel-head { flex-wrap: wrap; }
  .panel-head .controls { margin-left: 0; }
}
.scrim { position: fixed; inset: 0; z-index: 35; background: rgba(14,27,46,.45); }

/* -------------------------------------------------------------- inputs */

.sel, .btn, .chat-input input {
  font: inherit; font-size: 13px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 7px 11px; cursor: pointer;
}
.sel:hover, .btn:hover { border-color: var(--indigo); }
.btn.primary { background: var(--indigo); border-color: var(--indigo); color: #fff; font-weight: 600; }
.btn.primary:hover { background: var(--indigo-2); }
.btn:disabled { opacity: .55; cursor: default; }
a.btn { text-decoration: none; color: var(--ink-2); }

/* ----------------------------------------------------------------- kpi */

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 14px; }
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 17px; box-shadow: var(--shadow);
}
.kpi .k-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.kpi .k-value { font-size: 27px; font-weight: 650; font-family: var(--mono); margin-top: 6px; letter-spacing: -.025em; }
.kpi .k-note  { font-size: 12px; color: var(--muted); margin-top: 3px; }
.kpi.accent .k-value { color: var(--indigo); }

/* --------------------------------------------------------------- table */

.rows { display: flex; flex-direction: column; }
.row {
  display: grid; align-items: center; gap: 14px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); font-size: 13.5px;
}
.row:last-child { border-bottom: 0; }
.row:hover { background: var(--surface-2); }
.row.clickable { cursor: pointer; }
.row .rank { font-family: var(--mono); color: var(--faint); font-size: 12px; width: 20px; }
.row .code {
  font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  background: var(--indigo-dim); color: var(--indigo); padding: 3px 7px; border-radius: 5px;
}
.row .name { min-width: 0; }
/* display:block matters. text-overflow has no effect on an inline
   element, so this rule looked right and did nothing: seven of the ten
   airport names ran across the tonnage column instead of truncating. */
.row .name-main {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.row .num { font-family: var(--mono); text-align: right; font-size: 13px; font-variant-numeric: tabular-nums; }
.row .delta { font-family: var(--mono); font-size: 12.5px; text-align: right; min-width: 66px; font-weight: 600; }
.delta.up { color: var(--teal); } .delta.down { color: var(--rose); }

.rank-row { grid-template-columns: 20px auto 1fr auto 72px; }
.tool-row { grid-template-columns: 1fr auto auto; }
.src-row  { grid-template-columns: auto 1fr auto; }
.fc-row   { grid-template-columns: auto 1fr auto auto auto; }
.run-row  { grid-template-columns: auto 1fr auto auto auto; cursor: pointer; }
.run-row.is-selected { background: var(--indigo-dim); }

.bar-wrap { height: 4px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.bar { height: 100%; background: var(--indigo); border-radius: 3px; }

.loading, .empty { padding: 26px 18px; color: var(--muted); font-size: 13px; text-align: center; line-height: 1.6; }

/* --------------------------------------------------------------- chart */

.chart-wrap { width: 100%; overflow-x: auto; }
.chart-wrap svg { display: block; width: 100%; height: auto; min-width: 520px; }
.ax-line { stroke: var(--border); stroke-width: 1; }
.ax-text { font-size: 10.5px; fill: var(--muted); font-family: var(--mono); }
.band     { fill: var(--saffron); opacity: .16; }
.line-hist { fill: none; stroke: var(--indigo); stroke-width: 2.2; stroke-linejoin: round; }
.line-fc   { fill: none; stroke: var(--saffron); stroke-width: 2.2; stroke-dasharray: 5 4; }
.pt-hist { fill: var(--indigo); }
.pt-fc   { fill: var(--saffron); }
.pt-anom { fill: var(--rose); stroke: var(--surface); stroke-width: 2; }
.grid-line { stroke: var(--border); stroke-dasharray: 2 4; }

.legend-row { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--ink-2); }
.legend-row .key { display: flex; align-items: center; gap: 7px; }
.legend-row .swatch { width: 16px; height: 3px; border-radius: 2px; }
.legend-row .swatch.dash { background: repeating-linear-gradient(90deg, var(--saffron) 0 5px, transparent 5px 9px); }
.legend-row .swatch.band { height: 11px; opacity: .3; border-radius: 3px; }
.legend-row .swatch.dot { width: 9px; height: 9px; border-radius: 50%; }

.chart .b-label { font-size: 11.5px; fill: var(--ink-2); }
.chart .b-value { font-size: 11px; fill: var(--muted); font-family: var(--mono); }
.chart .b-rect  { fill: var(--indigo); }
.chart svg { width: 100%; height: auto; display: block; }

/* --------------------------------------------------------------- pills */

.pill {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 20px; white-space: nowrap;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
}
.pill.model     { background: var(--violet-dim); color: var(--violet); border-color: transparent; }
.pill.heuristic { background: var(--indigo-dim); color: var(--indigo); border-color: transparent; }
.pill.fallback  { background: var(--saffron-dim); color: var(--saffron); border-color: transparent; }
.pill.ok        { background: var(--teal-dim);   color: var(--teal);   border-color: transparent; }
.pill.bad       { background: var(--rose-dim);   color: var(--rose);   border-color: transparent; }
.pill.warn      { background: var(--saffron-dim); color: var(--saffron); border-color: transparent; }

/* -------------------------------------------------------------- alerts */

.alert { padding: 14px 18px; border-bottom: 1px solid var(--border); display: flex; gap: 14px; }
.alert:last-child { border-bottom: 0; }
.alert:hover { background: var(--surface-2); }
.alert-sev { width: 3px; border-radius: 2px; flex: none; background: var(--faint); }
.alert-sev.high { background: var(--rose); }
.alert-sev.med { background: var(--saffron); }
.alert-sev.low { background: var(--indigo); }
.alert-body { min-width: 0; flex: 1; }
.alert-top { display: flex; gap: 9px; align-items: baseline; flex-wrap: wrap; }
.alert-name { font-weight: 600; font-size: 14px; }
.alert-plain { font-size: 13px; color: var(--ink-2); margin-top: 5px; }
.alert-detail { font-size: 11.5px; color: var(--muted); margin-top: 4px; font-family: var(--mono); }

.insight { padding: 15px 18px; border-bottom: 1px solid var(--border); }
.insight:last-child { border-bottom: 0; }
.insight h3 { font-size: 13.5px; margin-bottom: 5px; }
.insight p { margin: 0; font-size: 13px; color: var(--ink-2); }

/* ------------------------------------------------------ agent console */

.console-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.stat .s-value { font-family: var(--mono); font-size: 21px; font-weight: 650; }
.stat .s-label { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: 3px; font-weight: 600; }

.replay-panel { display: flex; flex-direction: column; }
.replay-body { flex: 1; overflow-y: auto; max-height: 580px; }
.replay-goal { margin-bottom: 14px; }
.goal-line { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; margin-bottom: 7px; }
.goal-text { font-size: 14px; }

.steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.step { display: grid; grid-template-columns: 26px 1fr; gap: 13px; padding: 12px 0; position: relative; animation: rise .28s ease both; }
.step::before { content: ""; position: absolute; left: 12px; top: 31px; bottom: -12px; width: 1px; background: var(--border); }
.step:last-child::before { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

.step-dot {
  width: 25px; height: 25px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--mono); font-size: 10.5px; font-weight: 700; z-index: 1;
  background: var(--surface-3); color: var(--muted); border: 1px solid var(--border);
}
.step.ok  .step-dot { background: var(--teal-dim); color: var(--teal); border-color: transparent; }
.step.err .step-dot { background: var(--rose-dim); color: var(--rose); border-color: transparent; }
.step-main { min-width: 0; }
.step-top { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.step-tool { font-family: var(--mono); font-size: 12.5px; font-weight: 700; }
.step-ms { font-family: var(--mono); font-size: 11px; color: var(--muted); margin-left: auto; }
.step-why { font-size: 13px; color: var(--ink-2); margin: 6px 0 0; border-left: 2px solid var(--violet); padding-left: 10px; }
.step-args, .step-obs {
  font-family: var(--mono); font-size: 11.5px; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 7px 10px; margin-top: 7px; overflow-x: auto;
  white-space: pre-wrap; word-break: break-word; color: var(--ink-2);
}
.step.err .step-obs { color: var(--rose); border-color: var(--rose-dim); }

.policy-bar { display: flex; height: 10px; border-radius: 5px; overflow: hidden; margin-bottom: 13px; background: var(--surface-3); }
.legend { display: flex; flex-direction: column; gap: 8px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.legend-item .num { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

/* ---------------------------------------------------------------- chat */

.chat-body { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 14px; }
.chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 14px; padding-right: 4px; }
.msg { max-width: 90%; padding: 13px 16px; border-radius: var(--radius); font-size: 13.5px; }
.msg.user { align-self: flex-end; background: var(--indigo); color: #fff; }
.msg.bot { align-self: flex-start; background: var(--surface-2); border: 1px solid var(--border); }
.msg p { margin: 0 0 7px; } .msg p:last-child { margin-bottom: 0; }
.msg .meta { display: flex; gap: 8px; align-items: center; margin-bottom: 9px; flex-wrap: wrap; }
.msg .cites { margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--border); font-size: 12px; }
.msg .cites a { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg .cites a:hover { color: var(--indigo); }

.passage {
  margin-top: 8px; padding: 9px 11px; font-size: 11.5px;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 2px solid var(--violet); border-radius: var(--radius-sm);
  font-family: var(--mono); color: var(--ink-2); max-height: 96px; overflow: hidden;
}
.p-src { color: var(--muted); font-size: 10.5px; margin-bottom: 4px; }

.answer-table { width: 100%; border-collapse: collapse; margin-top: 11px; font-size: 13px; }
.answer-table th, .answer-table td { padding: 6px 10px; text-align: left; border-bottom: 1px solid var(--border); }
.answer-table th { color: var(--muted); font-weight: 600; font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; }
.answer-table td.n { font-family: var(--mono); text-align: right; font-variant-numeric: tabular-nums; }

.suggestions { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  font-size: 12.5px; padding: 6px 13px; border-radius: 20px;
  background: var(--surface); border: 1px solid var(--border-2); color: var(--ink-2); cursor: pointer;
}
.chip:hover { border-color: var(--indigo); color: var(--indigo); background: var(--indigo-dim); }

.chat-input { display: flex; gap: 9px; }
.chat-input input { flex: 1; cursor: text; padding: 10px 13px; font-size: 13.5px; }
.chat-input input:focus { outline: none; border-color: var(--indigo); box-shadow: 0 0 0 3px var(--indigo-dim); }

/* -------------------------------------------------------------- misc */

.result { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.result:last-child { border-bottom: 0; }
.result-head { display: flex; gap: 9px; align-items: center; margin-bottom: 6px; flex-wrap: wrap; }
.result-body { font-family: var(--mono); font-size: 11.5px; color: var(--ink-2); max-height: 78px; overflow: hidden; }

.brief-body { max-height: 76vh; overflow-y: auto; }
.brief-body h1, .brief-body h2, .brief-body h3 { margin: 20px 0 9px; }
.brief-body h1:first-child { margin-top: 0; }
.brief-body table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 13px; }
.brief-body th, .brief-body td { padding: 7px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.brief-body th { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.brief-body svg { max-width: 100%; height: auto; }

.stage-row { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.stage-row:last-child { border-bottom: 0; }
.stage-name { font-weight: 600; min-width: 96px; }
.stage-detail { color: var(--muted); font-size: 12px; font-family: var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stage-secs { margin-left: auto; font-family: var(--mono); font-size: 12.5px; color: var(--ink-2); }

.metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-top: 16px; }
.metric { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.metric .m-name { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.metric .m-val { font-size: 17px; font-weight: 650; font-family: var(--mono); margin-top: 3px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
::-webkit-scrollbar-track { background: transparent; }


/* ---------------------------------------------------------- operations */

/* Contribution bars run from a shared zero so positive and negative
   movements are comparable at a glance rather than by reading signs. */
.contrib-row { grid-template-columns: auto minmax(0,1fr) 96px 150px 74px; }
.contrib-track {
  position: relative; height: 16px; background: var(--surface-3);
  border-radius: 4px; overflow: hidden;
}
.contrib-zero { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border-2); }
.contrib-fill { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.contrib-fill.pos { background: var(--teal); }
.contrib-fill.neg { background: var(--rose); }

.hhi-note { font-size: 13px; color: var(--ink-2); margin: 0 0 12px; }
.hhi-note strong { color: var(--ink); }
.eff-row { grid-template-columns: minmax(0,1fr) 92px 96px 84px; }
.lf-bar { height: 5px; background: var(--surface-3); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.lf-bar span { display: block; height: 100%; background: var(--teal); border-radius: 3px; }


/* Two effects on a shared scale, so their relative size is the message
   rather than the numbers printed beside them. */
.decomp { display: flex; flex-direction: column; gap: 14px; }
.decomp-head { font-size: 14px; color: var(--ink-2); }
.decomp-head strong { color: var(--ink); }
.decomp-bar { display: flex; align-items: center; gap: 12px; }
.decomp-label { width: 128px; font-size: 13px; color: var(--ink-2); flex: none; }
.decomp-track { flex: 1; height: 22px; background: var(--surface-3); border-radius: 5px; position: relative; }
.decomp-mid { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--border-2); left: 50%; }
.decomp-fill { position: absolute; top: 0; bottom: 0; border-radius: 4px; }
.decomp-fill.pos { background: var(--teal); }
.decomp-fill.neg { background: var(--rose); }
.decomp-val { width: 108px; text-align: right; font-family: var(--mono); font-size: 13px; flex: none; }
.decomp-note { font-size: 12.5px; color: var(--muted); }
.ae-row { grid-template-columns: auto minmax(0,1fr) 96px 92px 88px; }


/* ------------------------------------------------------------- subtabs */

/* Views that carried five stacked panels became a long scroll in which the
   first panel was the only one most readers ever saw. Grouping them under
   tabs makes the alternatives visible at the top instead of buried below
   the fold, and lets each tab fetch only its own data. */
/* Tabs and the controls that apply to the whole view share one row, which
   is what makes it legible that the controls are not part of any single
   tab. */
.tabbar {
  display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 20;
  background: var(--bg); padding-top: 2px;
}
.tabbar .subtabs { border-bottom: 0; position: static; flex: 1; margin-bottom: 0; }
.page-controls { display: flex; gap: 8px; padding-bottom: 7px; flex-wrap: wrap; }
.page-controls .sel { max-width: 320px; }

.subtabs {
  display: flex; gap: 2px; flex-wrap: wrap;
  border-bottom: 1px solid var(--border);
  margin-bottom: 2px;
  position: sticky; top: 0; z-index: 20;
  background: var(--bg);
  padding-top: 2px;
}
.subtab {
  appearance: none; background: none; border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 15px 10px; margin-bottom: -1px;
  font: inherit; font-size: 13.5px; color: var(--muted);
  cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s;
}
.subtab:hover { color: var(--ink); }
.subtab.is-active { color: var(--indigo); border-bottom-color: var(--indigo); font-weight: 600; }
.subtab .count {
  font-family: var(--mono); font-size: 10.5px; color: var(--faint);
  margin-left: 6px;
}
.subtab.is-active .count { color: var(--indigo); }

.tabpanel { display: none; flex-direction: column; gap: 18px; }
.tabpanel.is-active { display: flex; animation: fade .18s ease both; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .tabbar { flex-direction: column; align-items: stretch; gap: 0; }
  .page-controls { padding: 8px 0; }
  .page-controls .sel { flex: 1; max-width: none; }
  .subtabs { overflow-x: auto; flex-wrap: nowrap; scrollbar-width: none; }
  .subtabs::-webkit-scrollbar { display: none; }
  .subtab { padding: 9px 12px 10px; font-size: 13px; }
}