/* tool/css/wire.css — IRPP theme styling: IRPP design tokens (D36, D95).
   Brand palette: #004667 (Navy), #44A3A4 (Teal), #DEAC28 (Gold), #D97706 (Amber). */

:root {
  /* IRPP Brand Primitives */
  --irpp-navy: #004667;
  --irpp-teal: #44a3a4;
  --irpp-gold: #deac28;
  --irpp-red: #ce2129;

  /* Semantic Roles */
  --brand: var(--irpp-navy);
  --brand-light: #f0f6fa;
  --brand-tint: #dceaf2;
  --brand-hover: #003650;

  --ink: #1a1a1a;
  --ink-2: #4a4a4a;
  --ink-3: #6b6b6b;
  --line: #d9d9d9;
  --line-2: #ececec;
  --ground: #f6f8fa;
  --accent: var(--brand);
  --pending: #8a8a8a;
  --override: #fff8e6;
  --override-line: #deac28;
  --supplier: #5a9ec0;

  /* Sequential Choropleth Scale (IRPP Brand Blue ramp, 6 shades for nonlinear upper tail) */
  --scale-0: #f0f4f8;
  --scale-1: #d6e6ef;
  --scale-2: #a9cbe0;
  --scale-3: #6fabcf;
  --scale-4: #3682a8;
  --scale-5: #00557d;
  --scale-6: #00314a;

  /* Pure Neutral Greys (OKLCH zero-chroma) */
  --grey-ground: oklch(0.982 0 0);
  --grey-line: oklch(0.90 0 0);

  /* Grey & Greyer-Blue (OKLCH with sRGB hex fallbacks) */
  --slate-ground: oklch(0.968 0.008 240);
  --slate-line: oklch(0.88 0.012 240);
  --slate-dot: oklch(0.68 0.022 240);
}
* { box-sizing: border-box; }
body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; color: var(--ink); background: #fff; font-size: 15px; line-height: 1.4; }
a { color: var(--ink); }
button, select, input { font: inherit; color: inherit; }
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }
.small { font-size: 13px; }
.lbl { font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); }
.pending { display: inline-block; border: 1px dashed var(--pending); border-radius: 3px; padding: 0 6px; color: var(--pending); font-style: italic; font-size: 13px; font-weight: 400; }
.page { max-width: 1440px; margin: 0 auto; }

/* Header */
.hdr { display: flex; align-items: center; gap: 28px; height: 53px; padding: 0 24px; border-top: 3px solid var(--irpp-red); border-bottom: 1px solid var(--line); background: #fff; }
.hdr-brand-group { display: flex; align-items: center; gap: 12px; flex: none; }
.hdr-logo-link { display: flex; align-items: center; line-height: 1; text-decoration: none; opacity: .95; transition: opacity .15s ease; }
.hdr-logo-link:hover { opacity: 1; }
.hdr-logo { height: 25px; width: auto; display: block; }
.hdr-divider { display: inline-block; width: 1px; height: 18px; background: var(--line); }
.hdr .brand { font-weight: 700; color: var(--brand); font-size: 15px; white-space: nowrap; text-decoration: none; transition: color .12s; }
.hdr .brand:hover { color: var(--irpp-red); }
.hdr nav { display: flex; gap: 4px; }
.hdr nav a { padding: 15px 10px; text-decoration: none; color: var(--ink-2); transition: color .12s; }
.hdr nav a:hover:not(.on) { color: var(--irpp-red); }
.hdr nav a.on { color: var(--brand); font-weight: 600; box-shadow: inset 0 -3px 0 var(--brand); }
.hdr nav a.stub { color: var(--ink-3); }
.hdr .right { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--ink-3); }
.hdr .hdr-prog { color: var(--ink-2); text-decoration: none; font-weight: 500; font-size: 13px; white-space: nowrap; transition: color .12s; }
.hdr .hdr-prog:hover { color: var(--irpp-red); text-decoration: underline; }

/* Summary strip */
.strip { background: var(--ground); border-bottom: 1px solid var(--line); padding: 12px 24px 14px; display: flex; flex-direction: column; gap: 10px; }
.seeing { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.chip button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--ink-3); font-size: 16px; line-height: 1; }
select.ctl { height: 32px; border: 1px solid var(--line); border-radius: 6px; background: #fff; padding: 0 6px; max-width: 260px; }
.ladder { display: grid; grid-template-columns: 1fr 1fr 1.4fr; }
.ladder > div { padding: 0 20px; border-left: 1px solid var(--line); }
.ladder > div:first-child { padding-left: 0; border-left: 0; }
.ladder .k { font-size: 14px; color: var(--ink-2); }
.ladder .v { font-size: 26px; font-weight: 600; line-height: 34px; }
.ladder .lead .v { font-size: 30px; font-weight: 700; }
.ladder .s { font-size: 13px; color: var(--ink-3); }

/* Explore layout */
.explore { display: grid; grid-template-columns: minmax(0, 1fr) 340px 320px; gap: 20px; padding: 16px 24px; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: 12px 14px; }
.card h2, .sec h2 { margin: 0 0 8px; font-size: 16px; }
.sec { padding: 8px 24px 24px; }

/* Search */
.search { position: relative; }
.search input { width: 100%; height: 44px; border: 2px solid var(--ink); border-radius: 6px; padding: 0 12px; font-size: 16px; }
.search input:focus { outline: none; border-color: var(--brand); }
.search ul { position: absolute; z-index: 5; left: 0; right: 0; top: 46px; margin: 0; padding: 4px 0; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.08); max-height: 320px; overflow: auto; }
.search li button { display: flex; justify-content: space-between; gap: 8px; width: 100%; border: 0; background: none; padding: 8px 12px; text-align: left; cursor: pointer; }
.search li button:hover, .search li button.hi { background: var(--ground); }

/* Map */
.map { position: relative; border: 1px solid var(--line); border-radius: 6px; margin-top: 12px; }
.map svg { display: block; width: 100%; height: 520px; }
.map path { vector-effect: non-scaling-stroke; }
.map path.cd { stroke: #fff; stroke-width: .5px; cursor: pointer; }
.map path.cd:hover { stroke: var(--brand); stroke-width: 1.5px; }
.map path.prov { fill: none; stroke: #555; stroke-width: 1px; pointer-events: none; }
.map.prov-mode path.prov { stroke: #fff; stroke-width: 1.5px; }
.map.prov-mode path.cd:hover { stroke: none; }
.map path.sel { fill: none; stroke: var(--irpp-red); stroke-width: 2.2px; pointer-events: none; }
.map .bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid var(--line-2); font-size: 13px; }
.map .zooms { display: flex; gap: 4px; flex-wrap: wrap; }
.map .zooms button, .seg button { height: 28px; padding: 0 8px; border: 1px solid var(--line); background: #fff; border-radius: 4px; cursor: pointer; font-size: 13px; }
.seg button[disabled] { color: var(--ink-3); background: var(--ground); border-style: dashed; cursor: not-allowed; }
.map .zooms button.on, .seg button.on { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.legend { display: flex; align-items: center; gap: 0; padding: 6px 10px 8px; font-size: 12px; color: var(--ink-2); }
.legend i { width: 34px; height: 10px; display: inline-block; }
.legend span { margin: 0 6px; }
.tip { position: fixed; z-index: 10; pointer-events: none; background: var(--ink); color: #fff; font-size: 13px; padding: 6px 8px; border-radius: 4px; display: none; }

/* Choropleth map scales: IRPP Navy ramp for Exposed, Neutral Grey for Dependent (6 buckets) */
.map, .map[data-rung="exposed"], [data-rung="exposed"] .map {
  --scale-0: #f0f4f8;
  --scale-1: #d6e6ef;
  --scale-2: #a9cbe0;
  --scale-3: #6fabcf;
  --scale-4: #3682a8;
  --scale-5: #00557d;
  --scale-6: #00314a;
}
.map[data-rung="tied"], [data-rung="tied"] .map {
  --scale-0: #f5f5f5;
  --scale-1: #e6e6e6;
  --scale-2: #cccccc;
  --scale-3: #a6a6a6;
  --scale-4: #7d7d7d;
  --scale-5: #525252;
  --scale-6: #262626;
}

[data-rung="exposed"] .tl-c i { background: #9bc2d6; }
[data-rung="exposed"] .tl-c.on i { background: #004667; }
[data-rung="tied"] .tl-c i { background: #bfbfbf; }
[data-rung="tied"] .tl-c.on i { background: #383838; }

/* Direct and supplier driver bars in left panel (industries & tariffs) on Dependent */
[data-rung="tied"] .xside .kd { background: #383838; }
[data-rung="tied"] .xside .ks { background: #3b9a9c; }
[data-rung="tied"] .xside .ko { background: var(--irpp-gold); }

/* Lists and tables */
.seg { display: inline-flex; gap: 0; }
.seg button { border-radius: 0; margin-left: -1px; }
.seg button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.seg button:last-child { border-radius: 0 4px 4px 0; }
table.t { width: 100%; border-collapse: collapse; font-size: 14px; }
table.t th { text-align: left; font-size: 12px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 4px 6px; white-space: nowrap; }
table.t td { border-bottom: 1px solid var(--line-2); padding: 7px 6px; vertical-align: top; }
.scroll table.t thead th { position: sticky; top: 0; background: #fff; }
table.t .r { text-align: right; }
table.t tr.pick { cursor: pointer; }
table.t tr.pick:hover td { background: var(--ground); }
table.t tr.on td { background: var(--brand-light); font-weight: 600; color: var(--brand); }
table.t tr.on td:first-child { box-shadow: inset 3.5px 0 0 var(--brand); }
.scroll { max-height: 470px; overflow: auto; }
.btn { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 40px; padding: 0 12px; margin-top: 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; }
.btn[disabled] { color: var(--ink-3); cursor: not-allowed; background: var(--ground); }
.bars { display: inline-block; height: 8px; background: var(--scale-3); vertical-align: middle; }

/* Compare */
.cmp-head { display: flex; align-items: center; gap: 16px; padding: 14px 24px 10px; }
.cmp-head h1 { margin: 0; font-size: 22px; }
.shared { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 8px 24px; background: var(--ground); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 14px; }
.cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding: 16px 24px 24px; align-items: start; }
.col { border: 1px solid var(--line); border-radius: 6px; }
.col.ov { border-color: #c9a400; }
.col > div { padding: 10px 14px; border-top: 1px solid var(--line-2); }
.col > div:first-child { border-top: 0; min-height: 132px; }
.col .name { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; }
.col .badge { width: 22px; height: 22px; border-radius: 11px; background: var(--ink); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.col .x { margin-left: auto; border: 0; background: none; font-size: 18px; color: var(--ink-3); cursor: pointer; }
.col .head-v { font-size: 26px; font-weight: 700; line-height: 32px; }
.col .row { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 14px; border-top: 1px solid var(--line-2); }
.col .row:first-child { border-top: 0; }
.ovchip { display: inline-flex; align-items: center; gap: 4px; background: var(--override); border: 1px solid #c9a400; border-radius: 4px; padding: 1px 6px; font-size: 13px; }
.ovchip button { border: 0; background: none; padding: 0; cursor: pointer; font-size: 15px; line-height: 1; }
.add { border: 2px dashed var(--line); border-radius: 6px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.ind { display: grid; grid-template-columns: minmax(0, 1fr) 90px; gap: 8px; padding: 4px 0; font-size: 13px; line-height: 16px; }
.ind .n { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ind .v { text-align: right; white-space: nowrap; }
.hist { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 2px; align-items: end; height: 60px; }
.hist i { display: block; background: var(--scale-2); min-height: 1px; }
.hist i.on { background: var(--ink); }

/* Explore, sidebar + map (D38). Fits from 1024px (D37). */
.explore2 { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; padding: 12px 24px; height: calc(100vh - 52px); min-height: 680px; }
.side { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.side .search input { height: 40px; font-size: 15px; border-width: 1px; }
#side { display: flex; flex-direction: column; gap: 10px; }
.side .seg button { height: 26px; }
.seeing2 .place-name { display: flex; align-items: center; gap: 6px; font-size: 22px; font-weight: 700; line-height: 28px; }
.seeing2 .place-name button { margin-left: auto; border: 1px solid var(--line); background: #fff; border-radius: 14px; width: 28px; height: 28px; cursor: pointer; color: var(--ink-3); font-size: 16px; }
fieldset.kpis { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
fieldset.kpis legend { padding: 0; margin-bottom: 4px; }
.kpi { display: flex; gap: 8px; align-items: flex-start; padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.kpi.on { border-color: var(--ink); background: var(--ground); }
.kpi.off { cursor: default; color: var(--ink-3); }
.kpi input { margin-top: 3px; }
.kpi-b { display: flex; flex-direction: column; }
.kpi-k { font-size: 13px; color: var(--ink-2); }
.kpi-v { font-size: 17px; font-weight: 700; line-height: 21px; }
.kpi-v:empty, .kpi-s:empty { display: none; }
.kpi.on .kpi-v { font-size: 22px; line-height: 26px; }
.kpi-s { font-size: 12px; color: var(--ink-3); }
.field { display: flex; flex-direction: column; gap: 4px; }
.field select.ctl { max-width: none; width: 100%; }
details.panel { border: 1px solid var(--line); border-radius: 6px; }
details.panel summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; cursor: pointer; font-weight: 600; font-size: 14px; }
.panel-b { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 4px; }
.radio { display: flex; gap: 6px; align-items: center; font-size: 14px; }
.side-list { flex: 1; min-height: 220px; display: flex; flex-direction: column; }
.plist { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.plist .scroll { flex: 1; max-height: none; min-height: 0; }
.plist table.t td, .plist table.t th { padding: 5px 4px; }
.mapcol { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; }
.mapcol .map { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 0; }
.mapcol .map svg { flex: 1; height: auto; min-height: 0; }
/* Title, then the values line: always two lines, so the timeline (and the map above it) keeps one height on every rung. */
.tl-head-row { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; margin-bottom: 5px; }
.tl-head-row .tl-title { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.tl-head-row .tl-meta { font-size: 12px; color: var(--ink-2); display: flex; align-items: baseline; gap: 4px; }
.tl { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; align-items: end; border-bottom: 1px solid var(--line-2); padding-bottom: 3px; }
.tl-c { display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 3px; border: 0; background: none; padding: 3px 2px; border-radius: 4px; text-align: center; cursor: pointer; font: inherit; transition: background 0.15s ease; }
button.tl-c:hover { background: var(--brand-light); }
.tl-c i { display: block; background: var(--scale-2); border-radius: 3px 3px 0 0; transition: background 0.15s ease; }
button.tl-c:hover i { background: var(--scale-3); }
.tl-c.on i { background: var(--brand); }
.tl-c.ref i { background: var(--line); }
.tl-c.ref { cursor: default; }
.tl-v { font-size: 11px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tl-c.on .tl-v { font-weight: 700; color: var(--brand); }
.tl-l { font-size: 11px; line-height: 14px; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tl-c.on .tl-l { font-weight: 700; color: var(--brand); }
.tl-d { font-size: 10.5px; color: var(--ink-3); line-height: 1.2; }
.tl-c.on .tl-d { font-weight: 600; color: var(--brand); }
.tl-event { font-size: 9.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.tl-c.on .tl-event { font-weight: 600; color: var(--brand); }
.tl.compact { gap: 2px; border-bottom: 0; padding-bottom: 0; }
.tl.compact .tl-c { padding: 0; cursor: default; }
.tl.compact .tl-v, .tl.compact .tl-event { display: none; }
.tl.narrow .tl-c { padding: 2px 0; }
.tl.narrow .tl-v { font-size: 10.5px; white-space: nowrap; }
.tl.narrow .tl-event { display: none; }

/* Controls row above the map */
.cbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cbar select.ctl { flex: 1 1 220px; max-width: 360px; }
.cbar .cf-scen { margin-left: auto; }
.cbar details.pop { position: relative; background: #fff; transition: border-color 0.15s ease, background 0.15s ease; }
.cbar details.pop.on { border-color: var(--ink); background: var(--ground); }
.cbar details.pop.is-disabled { opacity: 0.5; background: var(--ground); }
.cbar details.pop.is-disabled summary { cursor: not-allowed; }
.cbar details.pop summary { gap: 8px; height: 32px; padding: 0 10px; align-items: center; font-size: 13px; white-space: nowrap; list-style: none; }
.cbar details.pop summary::-webkit-details-marker { display: none; }
.cbar details.pop summary .car { font-size: 11px; color: var(--ink-3); }
.cbar details.pop summary .lx { border: 0; background: none; padding: 0 2px; font-size: 14px; line-height: 1; color: var(--ink-2); cursor: pointer; }
.cbar details.pop summary .lx:hover { color: var(--ink); }
.cbar details.pop .panel-b { position: absolute; right: -1px; top: 35px; z-index: 20; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); gap: 5px; }
.cbar details.pop .scen-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 7px 10px; border: 1px solid var(--line-2); border-radius: 5px; background: #fff; cursor: pointer; transition: border-color 0.12s ease, background 0.12s ease; }
.cbar details.pop .scen-opt:hover { border-color: var(--ink-3); background: var(--ground); }
.cbar details.pop .scen-opt.on { border-color: var(--ink); background: var(--ground); box-shadow: inset 3px 0 0 var(--ink); }
.cbar details.pop .scen-opt strong { font-size: 13px; font-weight: 600; color: var(--ink); }
.cbar details.pop .scen-foot { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--line-2); display: flex; justify-content: flex-end; font-size: 12px; }

/* Explore, three columns (D38 revised): sidebar | map | list; controls above, timeline below. */
.explore3 { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "side controls controls" "side map list";
  gap: 10px 16px; padding: 12px 24px; height: calc(100vh - 52px); min-height: 640px; }
.explore3 .side { grid-area: side; overflow: auto; }
.a-controls { grid-area: controls; }
.a-map { grid-area: map; min-height: 0; min-width: 0; display: flex; flex-direction: column; margin-top: 0 !important; }
.a-map svg { flex: 1; height: auto !important; min-height: 0; }
.a-list { grid-area: list; min-height: 0; display: flex; flex-direction: column; }
.a-timeline { grid-area: timeline; }
@media (min-width: 1280px) { .explore3 { grid-template-columns: 300px minmax(0, 1fr) 320px; } }

.cbar { flex-wrap: nowrap; }
.cbar select.ctl { min-width: 0; }
.cbar details.pop summary .muted { white-space: nowrap; }
.map .bar { justify-content: flex-start; }
.map .zooms { flex-wrap: nowrap; }
.map .zooms button { padding: 0 7px; font-size: 12px; }
.legend { flex-wrap: wrap; gap: 4px 10px; }
.legend [data-legend] { display: inline-flex; align-items: center; }
.map .zooms button { white-space: nowrap; }
.tl-l { font-size: 11px; }

.cf { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cf .lbl { line-height: 15px; }
.cf.grow { flex: 1 1 200px; max-width: 280px; }
.cf select.ctl { width: 100%; max-width: none; }
.cf .seg button { height: 32px; }
.cf .lbl a { text-decoration: none; border: 1px solid var(--line); border-radius: 8px; padding: 0 4px; font-size: 10px; }
.cbar { align-items: flex-end; gap: 10px; height: 50px; }
.cbar-row { display: flex; align-items: flex-end; width: 100%; position: relative; height: 50px; min-height: 50px; }
.cbar-row.closed { justify-content: flex-end; }
.cbar-row.open { justify-content: flex-start; }
.cbar-toggle { position: absolute; right: 0; bottom: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 50px; padding: 0 16px; border-radius: 6px; font-size: 13px; font-weight: 600; color: var(--ink-2); background: var(--ground); border: 1px solid var(--line); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; user-select: none; box-sizing: border-box; }
.cbar-toggle:hover { background: #fff; color: var(--ink); border-color: var(--ink-3); }
.cbar-toggle.on { background: var(--ground); color: var(--ink); border-color: var(--ink); }
.cbar-toggle .car { font-size: 11px; }
.tl.narrow { gap: 3px; }
.tl.narrow .tl-c { padding: 2px 0; }
.tl.narrow .tl-v { font-size: 11px; white-space: nowrap; }
#timeline { border-top: 1px solid var(--line-2); padding-top: 8px; }
.cf select.ctl { flex: none; height: 32px; }
.crumbs button { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 13px; }
.map.prov-mode path.cd:hover { stroke-width: .5px; }

/* Page capped at the viewport: nothing below the map (D38 revised). */
.explore3 { grid-template-areas: "side controls controls" "side map right"; }
.explore3 .side { overflow: hidden; }
.a-right { grid-area: right; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.right-list { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.side-groups { flex: 1; min-height: 120px; display: flex; flex-direction: column; border-top: 1px solid var(--line-2); padding-top: 10px; }
.gscroll { flex: 1; min-height: 0; overflow: auto; }
table.gt { table-layout: fixed; }
table.gt td { padding: 4px 4px; }
table.gt td.gn { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.gt td.gv { width: 84px; white-space: nowrap; }
table.gt td.gx { width: 18px; padding: 4px 0; text-align: center; }
table.gt td.gx a { text-decoration: none; color: var(--ink-3); }
#timeline { border-top: 1px solid var(--line-2); padding-top: 8px; }

/* Compare (D41): capped at the viewport, columns fill the height, industries scroll inside. */
.compare2 { display: flex; flex-direction: column; gap: 12px; padding: 12px 24px; height: calc(100vh - 52px); min-height: 640px; }
.cmp-top { display: flex; flex-direction: column; gap: 8px; }
.cmp-title { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.cmp-title h1 { margin: 0; font-size: 22px; }
.cols2 { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 12px; }
.cols2 .col { display: flex; flex-direction: column; min-height: 0; min-width: 0; overflow-y: auto; overflow-x: hidden; }
.cols2 .col > div { padding: 8px 12px; border-top: 1px solid var(--line-2); flex-shrink: 0; }
.cols2 .col > div:first-child { border-top: 0; min-height: 0; }
.col-head .name { display: flex; align-items: center; gap: 6px; font-size: 18px; font-weight: 700; min-width: 0; }
.col-head .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.col-head .x { margin-left: auto; }
.ovs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; min-height: 22px; align-items: center; }
.ovchip { max-width: 100%; }
.ovchip .ovt { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 170px; display: inline-block; vertical-align: bottom; }
details.colset { margin-top: 4px; }
details.colset summary { cursor: pointer; color: var(--ink-2); }
.colset-b { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.colset-field { display: flex; flex-direction: column; gap: 3px; }
.colset-head { display: flex; justify-content: space-between; align-items: baseline; }
.colset-b select.ctl { width: 100%; max-width: none; text-transform: none; letter-spacing: 0; color: var(--ink); font-weight: 400; }
.col-kpis { display: flex; flex-direction: column; gap: 2px; }
.kpi.static { cursor: default; padding: 4px 8px; }
.kv { display: flex; justify-content: space-between; gap: 6px; font-size: 13px; padding: 2px 8px; }
.col-groups { flex: 1 1 120px; min-height: 120px; display: flex; flex-direction: column; }
.col-foot { display: flex; gap: 12px; }
.cols2 .add { min-width: 0; }
.one { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.col-kpis .kpi-b { min-width: 0; }
.col-kpis .kpi { min-width: 0; }
.kv .pending { flex: none; }
.cols2 .add { padding: 12px; }
.add-quick { display: flex; flex-direction: column; gap: 6px; }
.add-quick .btn { margin-top: 0; }
.add-quick select.ctl { width: 100%; max-width: none; height: 40px; }
.pinnote { text-transform: none; letter-spacing: 0; font-weight: 400; color: #8a6d00; background: var(--override); border-radius: 3px; padding: 0 4px; margin-left: 4px; }
.locpill { flex: none; border: 1px solid #c9a400; background: var(--override); color: #5e4500; border-radius: 10px; padding: 1px 8px; font-size: 12px; font-weight: 600; cursor: pointer; }
.col-head .locpill { margin-left: auto; }
.col-head .locpill + .x { margin-left: 4px; }
mark.loc { background: var(--override); color: inherit; border-radius: 3px; padding: 0 3px; box-shadow: inset 0 -1px 0 #c9a400; }
.useshared { border: 0; background: none; padding: 0; font-size: 11px; color: #8a6d00; text-decoration: underline; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* Trace (P4, D43): tracing line, trail bar (one slot per step), two panes. Capped at the viewport. */
.trace { display: flex; flex-direction: column; gap: 10px; padding: 12px 24px; height: calc(100vh - 52px); min-height: 640px; }
.tr-seeing { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 16px; align-items: center; }
.tr-what { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 15px; }
.tr-tools { display: flex; gap: 6px; align-items: center; }
.tr-note { grid-column: 1 / -1; background: var(--ground); border-radius: 4px; padding: 5px 8px; }
.btn-s { height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; }
details.pop { position: relative; }
details.pop > summary { list-style: none; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[open] > summary { background: var(--ground); }
.pop-b { position: absolute; right: 0; top: 34px; z-index: 6; width: 320px; display: flex; flex-direction: column; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.1); }
.pop-b.wide { width: 560px; max-height: 60vh; overflow: auto; gap: 6px; font-size: 13px; }
.pop-b label.lbl { display: flex; flex-direction: column; gap: 3px; }
.pop-b select.ctl { max-width: none; width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); }
.pop-b .search input { height: 36px; font-size: 14px; border-width: 1px; }
.go-sample { border-bottom: 1px dashed var(--ink); }

.tr-bar { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.tr-step { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; min-width: 0; }
button.tr-step:hover { background: var(--ground); }
.tr-step.on { border-color: var(--ink); box-shadow: inset 0 -3px 0 var(--ink); cursor: default; }
.tr-step.empty { border-style: dashed; cursor: default; min-height: 82px; }
.tr-s-name { font-weight: 600; font-size: 14px; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tr-s-v { font-size: 17px; font-weight: 700; line-height: 21px; }

.tr-panes { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: 12px; }
.pane { min-height: 0; min-width: 0; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 6px; }
.pane.cur { border-color: var(--ink); }
.pane.hint { border-style: dashed; }
.pane-h { padding: 8px 12px; border-bottom: 1px solid var(--line-2); }
.pane-h h2 { margin: 2px 0 0; font-size: 17px; line-height: 22px; }
.pane-b { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 12px; font-size: 14px; }
.pane-b > * { min-width: 0; }
.pane-b p { margin: 0; }

/* Step content (classes from the prototype backtracer, greyscale) */
.tr-value { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; background: var(--ground); border-radius: 6px; padding: 8px 10px; }
.tr-value .l { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); font-weight: 600; }
.tr-value .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tr-sub { font-size: 13px; color: var(--ink-3); }
.tr-h { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); font-weight: 700; margin-bottom: 4px; }
.tr-eq { font-size: 13px; line-height: 1.6; background: #fafafa; border-left: 3px solid var(--ink); padding: 6px 10px; }
.tr-eq .row { display: flex; flex-wrap: wrap; gap: 0 5px; align-items: baseline; }
.tr-eq .op { color: var(--ink-3); }
.tr-eq .res { font-weight: 700; }
.tr-eq .note { font-size: 12px; color: var(--ink-3); }
button.go { font: inherit; color: var(--ink); background: none; border: 0; padding: 0; cursor: pointer; border-bottom: 1px dashed var(--ink); text-align: left; }
button.go:hover { background: var(--line-2); }
button.go.active { background: #e0e0e0; border-bottom-style: solid; font-weight: 600; }
.tr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.tr-table th { text-align: left; font-size: 11px; font-weight: 600; color: var(--ink-3); border-bottom: 1px solid var(--line); padding: 4px 5px; vertical-align: bottom; position: sticky; top: -10px; background: #fff; }
.tr-table td { border-bottom: 1px solid var(--line-2); padding: 5px; vertical-align: top; }
.tr-table .n { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tr-table tr.sel td { background: #e6e6e6; }
.tr-table tr.rest td { color: var(--ink-3); font-style: italic; }
.tr-scroll { max-height: none; }
.tr-prov { font-size: 13px; line-height: 1.5; color: var(--ink-2); }
.tr-prov p { margin: 0 0 4px; }
.tr-flags { display: grid; gap: 4px; font-size: 13px; line-height: 1.45; }
.tr-flag { display: flex; gap: 6px; align-items: baseline; }
.sym { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 22px; height: 22px; padding: 0 3px; border-radius: 4px; background: var(--ground); border: 1px solid var(--line); font-size: 12px; font-weight: 700; line-height: 1; }
.sym.info { border-style: dashed; }
.tr-refs { font-size: 12px; color: var(--ink-3); line-height: 1.5; }
.tr-refs summary { cursor: pointer; }
.tr-refs .ref { display: block; }
.tr-refs .signed, .tr-refs .unsigned { font-weight: 700; color: var(--ink-2); }
.chip-sm { display: inline-block; font-size: 11px; padding: 0 5px; border-radius: 8px; background: var(--ground); border: 1px solid var(--line-2); color: var(--ink-2); white-space: nowrap; }

/* Trace, plain layer first (D44) */
.plain { display: flex; flex-direction: column; gap: 12px; }
.plain p { margin: 0; max-width: 72ch; }
.plain .lead { font-size: 17px; line-height: 1.45; }
.recipe { background: var(--ground); border-radius: 6px; padding: 8px 12px; }
.recipe ol { margin: 4px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 3px; }
.eqn { display: flex; align-items: stretch; gap: 6px; flex-wrap: wrap; }
.eqn > div { flex: 1 1 0; min-width: 100px; display: flex; flex-direction: column; gap: 2px; background: var(--ground); border-radius: 6px; padding: 8px 10px; }
.eqn > div.res { background: #fff; border: 2px solid var(--ink); }
.eqn .op { align-self: center; font-size: 20px; color: var(--ink-3); }
.eqn .v, .two .v { font-size: 20px; font-weight: 700; line-height: 26px; }
.eqn .k, .two .k { font-size: 12px; color: var(--ink-2); line-height: 1.3; }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.two > div { display: flex; flex-direction: column; gap: 2px; background: var(--ground); border-radius: 6px; padding: 8px 10px; }
.nexts { display: flex; flex-direction: column; gap: 6px; }
button.next { display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; min-height: 38px; padding: 4px 12px; border: 1px solid var(--line); border-radius: 6px; background: #fff; text-align: left; cursor: pointer; font-size: 14px; }
button.next:hover { background: var(--ground); }
button.next.on { border-color: var(--ink); font-weight: 600; }
table.pl td { padding: 6px 5px; }
table.pl .nw { white-space: nowrap; }
table.pl tr.tot td { font-weight: 700; border-top: 1px solid var(--line); }
table.pl tr.rest td { border-bottom: 0; }
.srcs { font-size: 12px; color: var(--ink-3); }
.srcs .lbl { margin-right: 4px; }
details.why summary { cursor: pointer; font-size: 14px; color: var(--ink-2); }
details.why p { margin-top: 4px; font-size: 14px; }
details.full { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 4px; }
details.full > summary { cursor: pointer; font-weight: 600; font-size: 14px; }
.full-b { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.btn-s.sw { gap: 6px; }

/* Shared vocabulary pass (D45): Explore's lead sentence; "Why a range?" beside the range control. */
.lead-s { margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.why-pop { display: inline-block; position: relative; text-transform: none; letter-spacing: 0; font-weight: 400; margin-left: 4px; }
.why-pop summary { list-style: none; cursor: pointer; text-decoration: underline; color: var(--ink-2); font-size: 11px; }
.why-pop summary::-webkit-details-marker { display: none; }
.why-b { position: absolute; z-index: 7; right: -60px; top: 18px; width: 320px; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: 10px; box-shadow: 0 6px 16px rgba(0,0,0,.1); color: var(--ink); line-height: 1.45; }
.why-b p { margin: 6px 0 0; }

/* Tariffs (P5, D47): shared controls row; in force · by measure · products & HTS-10 inspector. Capped at the viewport. */
.tariffs { display: grid; grid-template-columns: 300px minmax(0, 1fr) minmax(0, 1.35fr); grid-template-rows: auto minmax(0, 1fr);
  grid-template-areas: "controls controls controls" "summary measures products"; gap: 10px 18px; padding: 10px 24px 12px; height: calc(100vh - 53px); min-height: 640px; }
@media (min-width: 1280px) { .tariffs { grid-template-columns: 330px minmax(0, 1fr) minmax(0, 1.45fr); } }
.tf-controls { grid-area: controls; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.tf-controls .cbar { width: 100%; }
.tf-col { min-height: 0; min-width: 0; display: flex; flex-direction: column; }
#summary { grid-area: summary; overflow-y: auto; gap: 8px; padding-right: 4px; }
#measures { grid-area: measures; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
#products { grid-area: products; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; }
.tf-card { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.tf-h { margin: 0; font-size: 20px; line-height: 25px; }
.tf-summary p { margin: 0; }
.tf-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 2px; }
.tf-kpi { background: var(--ground); border: 1px solid var(--line-2); border-radius: 6px; padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; }
.tf-kpi .k { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); }
.tf-kpi .v { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.tf-kpi .s { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
ol.snaps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
ol.snaps li.ref { display: flex; flex-direction: column; padding: 6px 9px; border: 1px dashed var(--line); border-radius: 6px; font-size: 13px; background: var(--ground); }
ol.snaps button { width: 100%; display: flex; flex-direction: column; align-items: flex-start; padding: 6px 9px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; text-align: left; font-size: 13px; transition: background-color .12s, border-color .12s; }
ol.snaps button:hover { background: var(--ground); }
ol.snaps button.on { border-color: var(--brand); background: var(--brand-light); box-shadow: inset 3px 0 0 var(--brand); }
.tf-phd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--line-2); }
.tf-pttl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-2); display: flex; align-items: center; gap: 6px; }
.tf-search { width: 240px; max-width: 100%; }
.tf-search input { width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 5px; padding: 0 9px; font-size: 12.5px; background: var(--ground); color: var(--ink); }
.tf-search input:focus { outline: none; border-color: var(--brand); background: #fff; }
.tf-fbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; font-size: 12px; color: var(--ink-2); }
.tf-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tf-chip { display: inline-flex; align-items: center; gap: 4px; background: var(--ground); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; font-size: 11.5px; color: var(--ink); }
.tf-chip button { border: 0; background: none; padding: 0 1px; cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; }
.tf-chip button:hover { color: var(--ink); }
.tf-bar { display: block; height: 4px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.tf-bar i { display: block; height: 100%; background: var(--brand); }
.m-n { font-weight: 600; font-size: 13px; color: var(--ink); }
.pn { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-weight: 500; }
table.tf-pt { table-layout: fixed; }
table.tf-pt th:nth-child(2), table.tf-pt td:nth-child(2) { width: 88px; }
table.tf-pt th:nth-child(3), table.tf-pt td:nth-child(3) { width: 116px; }
button.linkish { border: 0; background: none; padding: 0; color: var(--ink-2); text-decoration: underline; cursor: pointer; font-size: 13px; align-self: flex-start; }
.tf-prod-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.tf-prod-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Methods & data (P7, D48, D55): field guide reading page; contents on the left, one text column. Not viewport-capped. */
.methods { display: grid; grid-template-columns: 220px minmax(0, 760px); gap: 40px; padding: 20px 24px 80px; }
.toc { position: sticky; top: 16px; align-self: start; }
.toc-filter { width: 100%; height: 28px; border: 1px solid var(--line); border-radius: 5px; padding: 0 9px; font-size: 12.5px; background: var(--ground); color: var(--ink); }
.toc-filter:focus { outline: none; border-color: var(--brand); background: #fff; }
.toc ol { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.toc a { display: block; padding: 3px 6px; margin-left: -6px; border-radius: 4px; color: var(--ink-2); text-decoration: none; }
.toc a:hover { text-decoration: underline; }
.toc a.on { color: var(--brand); font-weight: 600; background: var(--brand-light); }
.doc h1 { margin: 0 0 4px; font-size: 28px; }
.doc section { padding: 18px 0; border-top: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 10px; scroll-margin-top: 12px; }
.doc h2 { margin: 0; font-size: 21px; }
.doc .m-subh { margin: 8px 0 0; font-size: 16px; }
.doc p { margin: 0; line-height: 1.55; }
.doc .lead-s { font-size: 17px; }
.draft { display: inline-block; background: var(--ground); border: 1px dashed var(--pending); border-radius: 4px; padding: 2px 8px; margin-bottom: 8px !important; }
ul.plainlist { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }
.formula { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #fafafa; border-left: 3px solid var(--ink); padding: 8px 12px; line-height: 1.7; }
details.tech { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
details.tech summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.tech[open] { display: flex; flex-direction: column; gap: 10px; }
.doc table.pl td { vertical-align: top; }
.m-callout { background: var(--brand-light); border-left: 3px solid var(--brand); border-radius: 0 6px 6px 0; padding: 10px 14px; font-size: 14.5px; line-height: 1.5; }
.m-spine { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 10px; }
.m-steps { display: flex; flex-direction: column; gap: 6px; }
.m-step { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 6px 8px; border-radius: 5px; background: var(--ground); font-size: 13.5px; line-height: 1.45; }
.m-num { font-weight: 700; font-size: 12.5px; color: var(--ink); }
.m-doors { padding-top: 8px; border-top: 1px solid var(--line-2); }
.m-door-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.m-pages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.m-pcard { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 6px; }
.m-phead { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hdr .right a { color: var(--ink-3); }

/* Lab (P6, D49): settings on the left, results as in Explore on the right. Capped at the viewport. */
.lab { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; padding: 12px 24px; height: calc(100vh - 52px); min-height: 640px; }
.lab-setup { overflow: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 6px; min-height: 0; }
details.lab-g { border: 1px solid var(--line); border-radius: 6px; }
details.lab-g > summary { display: flex; justify-content: space-between; gap: 8px; padding: 8px 10px; cursor: pointer; font-weight: 600; }
.lab-gb { padding: 0 10px 10px; display: flex; flex-direction: column; gap: 6px; }
.lab-gb label.lbl { display: flex; flex-direction: column; gap: 3px; }
.lab-gb select.ctl, .lab-gb input.ctl { max-width: none; width: 100%; text-transform: none; letter-spacing: 0; font-weight: 400; color: var(--ink); height: 32px; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; }
.lab-gb input[disabled], .lab-gb select[disabled] { background: var(--ground); color: var(--ink-3); }
.lab-gb .btn { margin-top: 0; }
.lab-row { display: grid; grid-template-columns: minmax(0, 1fr) 70px auto; gap: 6px; align-items: center; font-size: 13px; }
.lab-row input.ctl { height: 28px; }
.lab-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.corners { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.corner { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; cursor: pointer; min-height: 64px; }
.corner.on { border-color: var(--ink); background: var(--ground); box-shadow: inset 0 -3px 0 var(--ink); }
.corner.off { border-style: dashed; cursor: default; color: var(--ink-3); }
.lab-results { min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.lab-seeing { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 14px; }
.lab-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.lab-tables { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
.lab-tables .side-groups { border-top: 0; padding-top: 0; }
.hdr .right a.on { color: var(--ink); font-weight: 600; }

/* Explore redesign: B1 / B5 sidebars (components/exploreSide.js) */
.hdr .draft { color: #8a3b00; background: #fff1e0; border: 1px solid #e0a060; border-radius: 4px; padding: 1px 8px; font-weight: 600; }
.xside { display: flex; flex-direction: column; gap: 12px; }
.xside .who .place-name { font-size: 22px; margin: 2px 0 0; font-weight: 700; }
.xside .crumbs button { border: 0; background: none; padding: 0; color: var(--ink-3); cursor: pointer; text-decoration: underline; font: inherit; }
.xside .hl .k { font-size: 13px; color: var(--ink-2); }
.xside .hl .big { font-size: 28px; font-weight: 700; line-height: 1.2; }
.xside .hl .sub { font-size: 13px; color: var(--ink-2); }
.xside .hl .l2 { margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line-2); font-size: 13px; color: var(--ink-2); }
.xside .hl .mid { font-size: 18px; font-weight: 600; color: var(--ink); }
.xside .xtrace { font-size: 11.5px; color: var(--ink-3); text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 0 4px; margin-left: 4px; white-space: nowrap; }
.xside details summary { cursor: pointer; font-size: 13px; color: var(--ink-2); }
.xside details.sub2 { margin-top: 6px; }
.xside .lt { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-top: 6px; }
.xside .lt th { text-align: right; color: var(--ink-3); font-weight: 600; font-size: 11.5px; }
.xside .lt th:first-child, .xside .lt td:first-child { text-align: left; padding-right: 8px; }
.xside .lt td { text-align: right; padding: 3px 0; border-top: 1px solid var(--line-2); vertical-align: top; }
.xside .foot { line-height: 1.5; }
.xside .xind .ih { display: flex; justify-content: space-between; align-items: center; }
.xside .key { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--ink-2); }
.xside .key i { width: 12px; height: 8px; display: inline-block; margin-left: 6px; }
.xside .kd { background: var(--brand); } .xside .ks { background: var(--supplier); } .xside .ke { background: var(--irpp-teal); }
.xside .crow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; padding: 3px 2px; border: 0; border-bottom: 1px solid var(--line-2); background: none; text-align: left; cursor: pointer; font: inherit; width: 100%; box-sizing: border-box; }
.xside .crow:hover, .xside .crow.on { background: var(--ground); }
.xside .crow.on .cn { font-weight: 700; }
.xside .crow .cn { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.xside .crow .cv { font-size: 13px; }
.xside .crow .cb { grid-column: 1 / -1; display: flex; height: 7px; }
.xside .crow .cb i { display: block; height: 7px; }
.xside .link, .xside .pw { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.xside .link { font-size: 12.5px; color: var(--ink-2); text-decoration: underline; text-align: left; }
.xside .flag, .plist .flag { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; font-weight: 400; }
.xside.b5 .lead1, .xside.b5 .lead2, .xside.b5 .lead3 { margin: 0; font-family: Georgia, "Times New Roman", serif; }
.xside.b5 .lead1 { font-size: 20px; line-height: 1.45; }
.xside.b5 .lead2 { font-size: 16px; line-height: 1.45; color: var(--ink-2); }
.xside.b5 .lead3 { font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.xside .pw { text-decoration: underline dotted; text-underline-offset: 3px; }
.xside .pw.on { text-decoration-style: solid; background: var(--ground); }
.xside .panel { border-top: 2px solid var(--ink); padding-top: 8px; }
.xside .panel .ph { display: flex; justify-content: space-between; margin-bottom: 4px; }
.map .legend .lx { margin-left: auto; display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map .legend .lx .seg button { white-space: nowrap; }
.hdr .draft { white-space: nowrap; }
.map .legend { flex-wrap: wrap; gap: 6px; }
.plist th button.th { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; }
.cbar .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; font-size: 13px; }
.cbar .chip button { border: 0; background: none; cursor: pointer; color: var(--ink-3); font-size: 15px; padding: 0; }

/* Landing page (home.js; tool_design D72): text at reading width, findings and figure at full width */
.hdr a.brand { text-decoration: none; color: var(--ink); }
.home { --hl: var(--brand); }
main.home { max-width: 1180px; margin: 0 auto; padding: 26px 24px 40px; display: flex; flex-direction: column; gap: 26px; }
.home .intro2 { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 40px; align-items: start; position: relative; }
.home .intro { display: flex; flex-direction: column; gap: 10px; }
.home .k1btn { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 15px; color: var(--ink-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; text-align: left; }
.home .k1btn[aria-expanded="true"] { color: var(--ink); text-decoration-style: solid; font-weight: 600; }
.home .k1 { border-left: 3px solid var(--ink); background: var(--ground); padding: 12px 16px; border-radius: 0 8px 8px 0; position: absolute; top: 0; right: 0; width: calc(100% - 760px - 40px); z-index: 5; box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.home .k1 .k1h { display: flex; justify-content: space-between; align-items: center; }
.home .k1 .k1x { border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--ink-3); line-height: 1; }
.home .k1 ul { margin: 8px 0; padding-left: 18px; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); display: flex; flex-direction: column; gap: 6px; }
.home .k1 a { font-size: 13px; color: var(--ink); text-decoration: underline; transition: color .12s; }
.home .k1 a:hover { color: var(--irpp-red); }
.home .t1 { font-size: 30px; margin: 0; }
.home .lede { font-size: 21px; line-height: 1.45; margin: 0; }
.home .desc { font-size: 15px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.home .lrh { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.home .lrh .seg button { white-space: nowrap; }
.home .cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home .card { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; }
.home .card .cn { font-size: 30px; font-weight: 700; line-height: 1.1; }
.home .lp { font-size: 15px; font-weight: 400; color: var(--ink-2); white-space: nowrap; }
.home .card .cl { font-size: 15px; line-height: 1.4; flex: 1; }
.home .card .csub { font-size: 13.5px; color: var(--ink-2); padding-top: 6px; border-top: 1px solid var(--line-2); line-height: 1.35; }
.home .card .csub .num { font-weight: 600; color: var(--ink); }
.home .card .csub .lp { font-size: 13px; }
.home .card .cm { align-self: flex-start; border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--ink-2); text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; text-align: left; transition: color .12s; }
.home .card .cm:hover { color: var(--irpp-red); }
.home .figblock { display: flex; flex-direction: column; gap: 18px; padding: 8px 0 12px; }
.home .fcap { margin-top: 10px; display: flex; align-items: center; gap: 6px; }
.home .frow { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.home .fsearch { width: 420px; max-width: 100%; }
.home .pills { display: flex; gap: 4px; flex-wrap: wrap; }
.home .pill { border: 1px solid var(--line); background: #fff; border-radius: 12px; height: 26px; padding: 0 9px; font-size: 12px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.home .pill:hover { border-color: var(--ink-3); }
.home .pill.on { background: var(--hl); border-color: var(--hl); color: #fff; }
.home .fgrid { display: grid; grid-template-columns: minmax(0, 760px) minmax(0, 1fr); gap: 40px; align-items: start; }
.home #spec svg { display: block; }
.home #spec .band { fill: var(--ground); }
.home #spec .grid { stroke: #fff; stroke-width: 1; }
.home #spec .tick { font-size: 11px; fill: var(--ink-3); }
.home #spec .ax { font-size: 12px; fill: var(--ink-2); }
.home #spec .ref { stroke: var(--ink); stroke-dasharray: 4 3; stroke-width: 1; }
.home #spec .rl { font-size: 11.5px; fill: var(--ink-2); }
.home #spec .mk { fill: var(--slate-dot, #8796a2); fill-opacity: .55; stroke: #fff; stroke-width: .75; cursor: pointer; }
.home #spec .mk.sm { fill: #fff; fill-opacity: 1; stroke: var(--slate-dot, #8796a2); }
.home #spec .mk:hover { fill: var(--ink); fill-opacity: 1; }
.home #spec svg.hasprov .mk { fill-opacity: .18; }
.home #spec .mk.inpr, .home #spec svg.hasprov .mk.inpr { fill: var(--hl); fill-opacity: .85; }
.home #spec svg.hasprov .mk.on, .home #spec svg .mk.inpr.on { fill: var(--brand); fill-opacity: 1; }
.home #spec .mk.on { fill: var(--brand); fill-opacity: 1; stroke: #fff; stroke-width: 2; }
.home .ppanel { border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 12px; }
.home .ppanel .pn { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: break-word; hyphens: manual; }
.home .ppanel .pl { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
.home .ppanel .prw { display: flex; flex-direction: column; border-top: 1px solid var(--line-2); padding-top: 6px; font-size: 14px; color: var(--ink-2); }
.home .ppanel .prw .num { font-size: 20px; font-weight: 700; color: var(--ink); }
.home .ppanel .prw .psub { font-size: 12.5px; color: var(--ink-3); margin-top: 2px; }
.home .ppanel .prw .psub .num { font-size: 13px; font-weight: 600; color: var(--ink-2); }
.home .ppanel .prw .psub .lp { font-size: 12px; }
.home .ppanel .pb { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin: 4px 0; }
.home .ppanel .link { border: 0; background: none; padding: 0; font: inherit; text-decoration: underline; cursor: pointer; color: var(--ink-2); text-align: left; transition: color .12s; }
.home .ppanel .link:hover { color: var(--irpp-red); }
.home .flag { font-size: 11px; color: var(--ink-3); border: 1px solid var(--line); border-radius: 3px; padding: 0 3px; }
.home .btn.primary { flex: none; width: auto; min-height: 0; margin-top: 0; display: inline-flex; align-items: center; text-decoration: none; height: 34px; padding: 0 14px; font-weight: 600; border: 1px solid var(--ink); border-radius: 6px; background: var(--ink); color: #fff; transition: background-color .12s, border-color .12s; }
.home .btn.primary:hover { background: #000; border-color: #000; color: #fff; }
.home .doors .btn { flex: none; width: auto; min-height: 0; margin-top: 0; display: inline-flex; align-items: center; text-decoration: none; height: 34px; padding: 0 14px; font-weight: 600; border: 1px solid var(--ink); border-radius: 6px; color: var(--ink); }
.home .trust { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 20px; color: var(--ink-3); }
.home .trust a { color: var(--ink-3); }
.home .trust { line-height: 1.8; }
@media (max-width: 1100px) { .home .fgrid, .home .intro2 { grid-template-columns: 1fr; } .home .ppanel { position: static; } .home .k1 { position: static; width: auto; box-shadow: none; } }
.home .lrh .sw { display: inline-flex; align-items: center; gap: 6px; }
/* Tooltips (components/tip.js) */
.tipi { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; border: 1px solid var(--ink-3); background: #fff; color: var(--ink-2); font: italic 600 11px/1 Georgia, serif; cursor: help; padding: 0; vertical-align: middle; text-transform: none; letter-spacing: 0; }
.tipi:hover, .tipi:focus-visible { background: var(--ink); color: #fff; border-color: var(--ink); }
.tipbox { position: absolute; z-index: 50; display: none; max-width: 315px; background: rgba(17, 24, 39, 0.94); color: #fff; font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 5px; box-shadow: 0 4px 14px rgba(0,0,0,.15); pointer-events: none; }
.tipbox .tl-tip-hdr { margin-top: 4px; padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.18); font-size: 11px; color: rgba(255,255,255,0.75); }
.tipbox .tl-tip-list { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; font-size: 11.5px; }
.tipbox .tl-tip-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.tipbox .tl-tip-list li span { color: rgba(255,255,255,0.9); }
.tip-u { text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; cursor: help; }
.tip-u:hover, .tip-u:focus-visible { text-decoration-color: var(--ink); color: var(--ink); outline: none; }

/* Landing tiles (D75): findings with the part of the tool that made them */
.home .tiles { display: flex; flex-direction: column; gap: 14px; border-top: 1px solid var(--line); padding-top: 24px; }
.home .tgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.home .tile { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; transition: border-color .15s ease, box-shadow .15s ease; }
.home .tile:hover { border-color: var(--ink-3); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); }
.home .tile .door { display: inline-flex; flex-direction: column; gap: 4px; }
.home .tile .door .dp { font-size: 11.5px; color: var(--ink-3); padding-left: 2px; }
.home .tile .btn.primary { background: var(--ink); color: #fff; border: 1px solid var(--ink); font-weight: 600; transition: background-color .12s, border-color .12s; }
.home .tile .btn.primary:hover { background: #000; border-color: #000; color: #fff; }
.home .tile .th { font-weight: 700; font-size: 16px; color: var(--ink); }
.home .tile .tf { font-size: 15px; line-height: 1.45; color: var(--ink); }
.home .tile .tw { font-size: 13.5px; line-height: 1.45; color: var(--ink-2); flex: 1; }
.home .tile .td { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.home .tmade { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; border-top: 1px solid var(--line); padding: 14px 2px 0; font-size: 14px; }
.home .tmade .th { margin-right: 6px; }
.home .tmade a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 2px; transition: color .12s; }
.home .tmade a:hover { color: var(--irpp-red); }

/* Explore, D78: the place leads (wider left), the map narrower with search and level in its bar, timeline under it */
.explore3.x78 {
  grid-template-columns: 320px minmax(0, 1fr) 260px;
  grid-template-areas: "controls controls controls" "side center right";
  gap: 12px 22px;
  padding: 10px 24px 12px;
}
@media (min-width: 1280px) {
  .explore3.x78 {
    grid-template-columns: 410px minmax(0, 1fr) 300px;
    gap: 12px 26px;
    padding: 12px 36px 14px;
  }
}
.x78 .a-center { grid-area: center; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.x78 .a-map { flex: 1; }
.x78 .a-time { flex: none; }
.x78 .side { overflow: auto; }
.map .bar .msearch { flex: 1; min-width: 0; max-width: 300px; position: relative; }
.map .bar .msearch input { height: 32px; border-width: 1px; font-size: 14px; }
.map .bar .mzoom { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.map .bar .mzoom.is-dim { opacity: 0.55; }
.map .bar .mzoom button:disabled { opacity: 0.55; cursor: not-allowed; }
.map .bar .mlevel { margin-left: auto; }
.map .bar { gap: 10px; }
.xside .hlcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; }
.xside .hl-head { display: flex; flex-direction: column; gap: 2px; }
.xside .hl-title-row { display: flex; align-items: baseline; gap: 8px; }
.xside .hl-title-row .place-name { font-size: 22px; font-weight: 700; margin: 0; line-height: 1.2; }
.xside .hl-sub { font-size: 13px; color: var(--ink-2); }
.xside .hl-scope { font-size: 12px; color: var(--ink-2); display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 2px; }
.xside .hl-scope .ldot { color: var(--ink-3); }
.xside .hl-scope .lseg { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--brand); color: var(--brand); font-weight: 600; padding: 2px 7px; border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.06); }
.xside .hl-scope .lx { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 0 2px; font-size: 14px; font-weight: 700; line-height: 1; }
.xside .hl-scope .lx:hover { color: var(--irpp-red); }
.xside .hl-rungs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  padding: 6px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line-2);
}
.xside .r-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: 6px 6px;
  border: 1.5px solid transparent;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  text-align: left;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  user-select: none;
}
.xside .r-col:hover {
  background: var(--ground);
  border-color: var(--line);
}
.xside .r-col:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 1px;
}
.xside .r-col.selected {
  background: #fff;
  border-color: var(--brand);
  box-shadow: inset 0 3px 0 var(--brand), 0 2px 6px rgba(0, 0, 0, 0.08);
}
.xside .r-col.selected .r-head {
  color: var(--brand);
}
.xside .r-col.selected .r-lbl {
  color: var(--brand);
}
.xside .r-head { display: flex; align-items: center; justify-content: space-between; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-2); }
.xside .r-val { font-size: 19px; font-weight: 700; line-height: 1.15; color: var(--ink); margin: 1px 0; display: flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.xside .r-val .r-bound { font-size: 11px; font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.xside .r-desc { font-size: 11.5px; color: var(--ink-2); line-height: 1.25; }
.xside .r-peak { font-size: 11px; color: var(--ink-3); line-height: 1.2; margin-top: 3px; }
.xside .r-peak .muted { color: var(--ink-3); font-weight: 400; }
.xside .r-pk { border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.xside .r-pk:hover { color: var(--ink); }
.xside .hl-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.xside .hl-foot .btn-s { text-decoration: none; color: var(--ink); }
.x78 .side { height: 100%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.x78 .xside { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.xside .hlcard { flex: none; }
.xside .drives { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; padding: 10px 14px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-height: 0; overflow: hidden; }
.xside .drives .dh { flex: none; display: flex; align-items: center; gap: 8px; }
.xside .drives .dh .lbl { margin-right: auto; font-size: 13px; font-weight: 600; color: var(--ink); text-transform: none; letter-spacing: 0; }
.xside .drives .xind { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.xside .drives .xind .ih { flex: none; }
.xside .drives .clist {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
}
.xside .drives button.link { flex: none; margin-top: 4px; }
.xside .drives .meas-more { flex: none; margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line-2); font-size: 11.5px; }
.xside .crow.static { cursor: default; }
.xside .drives .crow:hover { background: #fff; }
.xside .drives .crow.on { background: #fff; border-radius: 4px; box-shadow: inset 3.5px 0 0 var(--brand), 0 1px 4px rgba(0, 0, 0, 0.08); padding-left: 6px; }
.xside .drives .crow.on .cn { font-weight: 700; color: var(--brand); }
.xside .drives .crow.static:hover { background: none; }
.xside .foot { flex: none; margin-top: auto; padding-top: 4px; }
.xside .foot a { color: var(--ink-3); }
@media (max-width: 1279px) {
  .x78 .cbar { flex-wrap: wrap; row-gap: 6px; }
  .x78 .cbar .cf.grow { flex: 1 1 100%; }
  .x78 .map .bar { flex-wrap: wrap; }
  .x78 .map .bar .msearch { flex: 1 1 100%; max-width: none; }
}

/* Place list on one line (D79): the name cut with "…", the province always visible */
table.t.oneline { table-layout: fixed; width: 100%; }
table.t.oneline th:nth-child(1), table.t.oneline td:nth-child(1) { width: 34px; }
table.t.oneline th:nth-child(3), table.t.oneline td:nth-child(3) { width: 80px; }
table.t.oneline td { white-space: nowrap; }
table.t.oneline .pn1 { display: flex; align-items: baseline; gap: 5px; min-width: 0; }
table.t.oneline .pn1 .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
table.t.oneline .pn1 .ab { flex: none; color: var(--ink-3); }
table.t.oneline .pn1 .flag { flex: none; }

/* Explore D80: provinces as their own table above the division list; taglines; a selected province dims the rest */
.x78 .a-right { gap: 14px; }
.x78 .provs { flex: none; display: flex; flex-direction: column; gap: 4px; }
.x78 .provs .ph { display: flex; justify-content: space-between; align-items: baseline; }
.x78 .provs .prt { display: flex; flex-direction: column; }
.x78 .provs .prr { display: grid; grid-template-columns: 30px minmax(0, 1fr) 52px; gap: 6px; align-items: center; border: 0; background: none; padding: 2px 4px; font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; border-radius: 3px; }
.x78 .provs .prr:hover { background: var(--ground); }
.x78 .provs .prr.on { background: var(--brand-light); font-weight: 700; color: var(--brand); box-shadow: inset 3.5px 0 0 var(--brand); padding-left: 6px; border-radius: 4px; }
.x78 .provs .prr.mine { background: var(--ground); }
.x78 .provs .pb { height: 7px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.x78 .provs .pb i { display: block; height: 100%; background: var(--ink-3); }
.x78 .provs .prr.on .pb i, .x78 .provs .prr.mine .pb i { background: var(--brand); }
.x78 .provs .pv { text-align: right; }
.x78 .tag, .xside .drives .tag { font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.map path.cd.dim { opacity: .22; }
table.t tr.inpr td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* D81: list titles collapse their lists; taglines more prominent, in two parts */
.x78 .ttl { display: flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: inherit; flex: none; }
.x78 .ttl .car { color: var(--ink-3); font-size: 11px; }
.x78 .provs.closed .tag, .x78 .provs.closed .prt { display: none; }
.x78 .right-list.closed { display: none; }
.xside .drives .tag { font-size: 13px; color: var(--ink-2); line-height: 1.4; padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.xside .drives .tag .here { font-weight: 400; color: var(--ink); }
.xside .drives .tag .across { display: block; margin-top: 2px; color: var(--ink-2); }
.xside .drives .tag .across b { font-weight: 600; color: var(--ink); }

/* D82: the right column says what it shows; provinces as a selector */
.x78 .rscope { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; padding: 6px 10px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.x78 .rscope .lbl { margin-right: 2px; }
.x78 .rscope .rseg { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid var(--brand); color: var(--brand); font-weight: 600; padding: 1px 7px; border-radius: 4px; }
.x78 .rscope .ldot { color: var(--ink-3); }
.x78 .rscope .lx { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 0 2px; font-size: 14px; font-weight: 700; line-height: 1; }
.x78 .rscope .lx:hover { color: var(--irpp-red); }
.x78 .prsel { display: flex; align-items: baseline; gap: 6px; width: 100%; border: 1px solid var(--line); background: #fff; border-radius: 6px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 12.5px; text-align: left; }
.x78 .prsel .lbl { white-space: nowrap; }
.x78 .prsel b { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.x78 .prsel:hover { border-color: var(--ink-3); }
.x78 .prsel .car { margin-left: auto; color: var(--ink-3); }
.x78 .provs .prr.all { grid-template-columns: 1fr; font-weight: 600; }

/* ── Compare redesign (cmp3: shared figures, Decision #91) ─────────────────────────────────────────────────────── */
main.cmp3 { height: calc(100vh - 53px); padding: 12px 24px 14px; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; }
.cmp3 .top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.cmp3 .top h1 { font-size: 22px; margin: 0; }
.cmp3 .ents { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cmp3 .chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 15px; background: #fff; font-size: 13.5px; font-weight: 600; }
.cmp3 .chip-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.cmp3 .chip-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.cmp3 .chip .d { font-weight: 400; color: var(--ink-3); font-size: 12px; }
.cmp3 .chip .x { border: 0; background: none; color: var(--ink-3); cursor: pointer; font-size: 15px; padding: 0 2px; line-height: 1; }
.cmp3 .chip .x:hover { color: var(--ink); }
.cmp3 .addp { width: 220px; }
.cmp3 .addp input { height: 30px; font-size: 14px; }
.cmp3 .cases { margin-left: auto; font-size: 12px; color: var(--ink-3); display: flex; gap: 10px; align-items: center; }
.cmp3 .cases a { color: var(--ink-2); }
.cmp3 .cases a.on { color: var(--ink); font-weight: 700; text-decoration: none; }
.cmp3 .warn { font-size: 13px; color: var(--ink-2); background: var(--override); padding: 2px 8px; border-radius: 4px; }
.cmp3 .body { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 20px; min-height: 0; }
.cmp3 .left { display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow-y: auto; padding-right: 2px; }
.cmp3 .fh { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.cmp3 .fh .t { font-size: 13px; font-weight: 600; color: var(--ink); }
.cmp3 .fh .n { font-size: 12px; color: var(--ink-3); }
.cmp3 .fh .st { margin-left: auto; }
.cmp3 .sh-e { display: inline-flex; align-items: center; gap: 5px; vertical-align: -1px; }
.cmp3 .g { display: inline-block; width: 10px; height: 10px; flex: none; }
.cmp3 .g0 { background: var(--brand); border-radius: 50%; }
.cmp3 .g1 { background: var(--irpp-gold); border-radius: 50%; }
.cmp3 .g2 { background: var(--irpp-teal); }
.cmp3 .g3 { background: #5a9ec0; transform: rotate(45deg) scale(.85); }
.cmp3 .ptab { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px 9px; background: #fff; }
.cmp3 .ptab table { width: 100%; border-collapse: collapse; font-size: 13px; table-layout: fixed; }
.cmp3 .ptab col.lc { width: 165px; }
.cmp3 .clamp2 { overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }
.cmp3 .ptab th { text-align: right; font-weight: 600; padding: 4px 6px 5px; border-bottom: 1px solid var(--line); vertical-align: bottom; line-height: 1.25; }
.cmp3 .ptab th:first-child, .cmp3 .ptab td:first-child { text-align: left; padding-left: 0; }
.cmp3 .ptab th .hn { display: block; text-align: right; }
.cmp3 .ptab th .th-name { display: inline; font-size: 13px; line-height: 1.25; word-break: normal; overflow-wrap: break-word; }
.cmp3 .ptab th .th-name .g { display: inline-block; margin-right: 5px; vertical-align: 0px; }
.cmp3 .ptab th .d { display: block; font-weight: 400; font-size: 11px; color: var(--ink-3); margin-top: 1px; }
.cmp3 .ptab td { text-align: right; padding: 3.5px 6px; border-bottom: 1px solid var(--line-2); white-space: nowrap; }
.cmp3 .ptab td:first-child { white-space: normal; }
.cmp3 .ptab tr:last-child td { border-bottom: 0; }
.cmp3 .ptab tr.rung, .cmp3 .ptab tr.sup.is-clickable { cursor: pointer; }
.cmp3 .ptab tr.sup:not(.is-clickable) { cursor: default; }
.cmp3 .ptab tr.rung:hover td, .cmp3 .ptab tr.sup.is-clickable:hover td { background: var(--brand-light); }
.cmp3 .ptab tr.rung.on td, .cmp3 .ptab tr.sup.on td { background: var(--brand-light); }
.cmp3 .ptab tr.rung.on td:first-child, .cmp3 .ptab tr.sup.on td:first-child { box-shadow: inset 3px 0 0 var(--brand); padding-left: 8px; }
.cmp3 .ptab td b { font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; }
.cmp3 .ptab td .c { color: var(--ink-3); font-size: 11.5px; margin-left: 5px; font-variant-numeric: tabular-nums; }
.cmp3 .ptab td.tind { white-space: normal; padding: 3.5px 6px 4px; vertical-align: top; }
.cmp3 .ptab .tind-wrap { display: block; text-align: right; }
.cmp3 .ptab .tind-pct { display: block; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1.2; }
.cmp3 .ptab .tind-name { display: block; font-size: 11px; color: var(--ink-2); line-height: 1.2; margin-top: 1px; word-break: break-word; }
.cmp3 .ptab .rlab { display: inline-flex; align-items: baseline; gap: 4px; flex-wrap: wrap; }
.cmp3 .ptab .rlab b { font-size: 13px; font-weight: 600; }
.cmp3 .ptab .ml { font-size: 12.5px; color: var(--ink-2); }
.cmp3 .st { font-size: 11.5px; color: var(--ink-3); font-weight: 400; }
.cmp3 .fig { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px 12px; background: #fff; }
.cmp3 .fig svg { display: block; width: 100%; overflow: visible; }
.cmp3 .fig .tick { font-size: 10.5px; fill: var(--ink-3); }
.cmp3 .fig .grid { stroke: var(--line-2); }
.cmp3 .fig .axis { stroke: var(--line); }
.cmp3 .fig .now { stroke: var(--ink-3); stroke-dasharray: 3 3; }
.cmp3 .fig .nowl { font-size: 10.5px; fill: var(--ink-2); font-weight: 600; }
.cmp3 .fig .ln { fill: none; stroke-width: 2; }
.cmp3 .fig .lab { font-size: 11px; fill: var(--ink-2); }
.cmp3 .fig .hit { fill: transparent; cursor: pointer; }
.cmp3 .fig .hit:hover { fill: var(--line-2); fill-opacity: .6; }
.cmp3 .fig .dl { cursor: pointer; text-decoration: underline dotted; }
.cmp3 .dstrip .bg { fill: #cbd5e1; fill-opacity: .3; }
.cmp3 .dstrip .mem { fill-opacity: .85; }
.cmp3 .dstrip .mem.sm, .cmp3 .dstrip .bg.sm { fill: #fff; fill-opacity: 1; stroke-width: .8; }
.cmp3 .dstrip .own { stroke-width: 3; stroke-linecap: round; }
.cmp3 .dstrip .own-halo { stroke: #fff; stroke-width: 5.5; stroke-linecap: round; }
.cmp3 .dstrip .rowl { font-size: 12px; fill: var(--ink); font-weight: 600; }
.cmp3 .dstrip .rowv { font-size: 11px; fill: var(--ink-2); font-variant-numeric: tabular-nums; }
.cmp3 .dstrip circle { cursor: default; }
.cmp3 .imx { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; padding: 12px 14px; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.cmp3 .imx .seg button.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.cmp3 .imx .ih { display: flex; align-items: baseline; gap: 8px; }
.cmp3 .imx .ih .t { font-size: 13px; font-weight: 600; margin-right: auto; }
.cmp3 .imx .sub { font-size: 12px; color: var(--ink-3); }
.cmp3 .imx .sorts { font-size: 12px; color: var(--ink-3); display: flex; gap: 6px; align-items: center; }
.cmp3 .imx .sorts button { border: 0; background: none; padding: 0; font: inherit; color: var(--ink-2); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.cmp3 .imx .sorts button.on { color: var(--ink); font-weight: 700; text-decoration: none; }
.cmp3 .imx .rows { overflow-y: auto; min-height: 0; flex: 1; }
.cmp3 .imx .sum-card { background: #fff; border: 1px solid var(--line-2); border-radius: 7px; padding: 13px 15px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 1px 2px rgba(0,0,0,0.03); }
.cmp3 .imx .sum-card-h { display: flex; align-items: baseline; justify-content: space-between; border-bottom: 1px solid var(--line-2); padding-bottom: 8px; }
.cmp3 .imx .sum-card-t { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.cmp3 .imx .sum-card-sub { font-size: 11.5px; color: var(--ink-3); }
.cmp3 .imx .sum-bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.cmp3 .imx .sum-bullet { font-size: 13px; line-height: 1.48; color: var(--ink-2); position: relative; padding-left: 15px; }
.cmp3 .imx .sum-bullet::before { content: '•'; position: absolute; left: 1px; top: 0; color: var(--ink-3); font-size: 15px; }
.cmp3 .imx .sum-bullet b { color: var(--ink); font-weight: 600; }
.cmp3 .imx .sum-bullet .num { font-variant-numeric: tabular-nums; }
.cmp3 .imx .sum-bullet .sh-e { display: inline-flex; align-items: baseline; gap: 4px; }
.cmp3 .imx .r { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 4px; border-bottom: 1px solid var(--line); cursor: pointer; border-radius: 3px; }
.cmp3 .imx .r:hover { background: #fff; }
.cmp3 .imx .r.on { background: #fff; box-shadow: inset 3px 0 0 var(--brand); }
.cmp3 .imx .r .nm { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmp3 .imx .r .tr { position: relative; height: 14px; }
.cmp3 .imx .r .tr::before { content: ''; position: absolute; left: 0; right: 0; top: 6px; height: 2px; background: var(--line); }
.cmp3 .imx .r .tr .g { position: absolute; top: 2px; margin-left: -5px; }
.cmp3 .imx .r .vs { font-size: 12px; color: var(--ink-2); white-space: nowrap; text-align: right; min-width: 120px; }
.cmp3 .imx .r .vs b { color: var(--ink); }
.cmp3 .imx .scale { display: grid; grid-template-columns: 170px minmax(0, 1fr) auto; gap: 10px; font-size: 10.5px; color: var(--ink-3); padding: 0 4px; }
.cmp3 .imx .scale .sx { display: flex; justify-content: space-between; }
.cmp3 .imx .scale > span:last-child { min-width: 120px; }
.cmp3 .ptab .scope { margin: 0 0 2px; min-height: 18px; }
.cmp3 .scope { font-size: 12px; color: var(--ink-2); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.cmp3 .scope .lseg { background: var(--ground); padding: 1px 6px; border-radius: 3px; display: inline-flex; gap: 2px; align-items: center; }
.cmp3 .scope .lx { border: 0; background: none; color: var(--ink-3); cursor: pointer; padding: 0 2px; }

/* ── Trace redesign (trm: fixed map of blocks, Decisions #92, #93) ────────────────────────────────────────────── */
main.trm { height: calc(100vh - 53px); display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(520px, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 20px; padding: 10px 24px 12px; }
.trm .tm-top { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.trm .tm-top .cbar { width: 100%; }
.trm .tm-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.trm .tm-col { flex: 1; overflow-y: auto; min-height: 0; padding: 2px 6px 40px 0; scroll-behavior: smooth; }
.tm-res { flex: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 12px 16px; margin: 0 6px 12px 0; }
.tm-res.tm-focus { box-shadow: inset 0 0 0 1.5px var(--brand); }
.tm-res .tm-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.tm-res .tm-rplace { display: flex; flex-direction: column; gap: 2px; }
.tm-res .tm-search { width: 250px; max-width: 100%; position: relative; }
.tm-res .tm-search input { height: 30px; border-width: 1px; font-size: 13px; padding: 0 10px; }
.tm-res .tm-sum { font-size: 13.5px; color: var(--ink-2); margin: 0; }
.tm-res .tm-rl { margin: 4px 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.tm-res .tm-rl.tm-rl-on { color: var(--ink); }
.tm-res .tm-foot { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line-2); display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.tm-res .tm-calc { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--ink); background: var(--ground); padding: 4px 10px; border-radius: 4px; }
.tm-res .tm-hint { font-size: 12px; color: var(--ink-3); }
.tm-pickn { display: inline-block; cursor: pointer; background: var(--ground); border: 1px solid var(--line); border-radius: 5px; padding: 1px 7px; color: var(--ink); text-decoration: none; transition: background-color .12s, border-color .12s, color .12s; }
.tm-pickn:hover { background: var(--line-2); border-color: var(--ink-3); }
.tm-pickn.tm-sel { background: var(--brand); border-color: var(--brand); color: #fff; }
.tm-blk { border-left: 3px solid var(--line); padding: 6px 12px 7px 14px; margin: 0 0 8px; border-radius: 0 6px 6px 0; transition: opacity .15s, border-color .15s, background-color .15s; }
.tm-blk .tm-bh { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 1px; }
.tm-blk .tm-bt { font-size: 12px; font-weight: 400; color: var(--ink-3); }
.tm-blk.tm-on .tm-bt { color: var(--ink-2); }
.tm-blk .tm-sum { font-size: 15px; line-height: 1.46; margin: 0; color: var(--ink); }
.tm-blk .tm-body { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 6px 0 0; display: flex; flex-direction: column; gap: 6px; }
.tm-blk .tm-body p { margin: 0; }
.tm-blk .tm-lab { color: var(--ink); font-weight: 600; }
.tm-blk .tm-calc { font-variant-numeric: tabular-nums; color: var(--ink); background: var(--ground); padding: 4px 8px; border-radius: 4px; align-self: flex-start; }
.tm-blk.tm-on { border-left-color: var(--brand); }
.tm-blk.tm-off { opacity: .38; }
.tm-blk.tm-off[data-has-body="1"] { cursor: pointer; }
.tm-blk.tm-off .tm-body { display: none; }
.tm-blk.tm-off.tm-peek { opacity: .65; }
.tm-blk.tm-off.tm-peek .tm-body { display: flex; }
.tm-blk.tm-off .tm-tog::after { content: 'show'; }
.tm-blk.tm-off.tm-peek .tm-tog::after { content: 'hide'; }
.tm-blk .tm-tog { font-size: 11px; color: var(--ink-3); text-decoration: underline; flex-shrink: 0; }
.tm-blk.tm-on .tm-tog { display: none; }
.tm-blk.tm-focus { background: var(--brand-light); box-shadow: inset 0 0 0 1px var(--brand-tint); }
.tm-num-k { font-weight: 700; color: var(--ink); cursor: pointer; text-decoration: underline dotted var(--ink-3); text-underline-offset: 3px; }
.tm-blk.tm-off .tm-num-k { cursor: default; text-decoration: none; }
.tm-num-k.tm-hl { background: #fff2b3; }
.tm-dyn { color: var(--brand); }
.tm-part { margin-left: 26px; }
.tm-fork { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; margin: 2px 0 8px; }
.tm-fork .tm-blk { margin: 0; }
.tm-pnl { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; padding: 14px 16px; align-self: start; max-height: 100%; overflow-y: auto; font-size: 13.5px; color: var(--ink-2); }
.tm-pnl .tm-ptop { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 2px; }
.tm-pnl .tm-plbl { font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.tm-pnl .tm-pend { font-size: 11.5px; color: var(--ink-3); }
.tm-pnl h3 { margin: 2px 0 6px; font-size: 15px; color: var(--ink); }
.tm-pnl p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.tm-pnl .tm-pform { font-size: 12.5px; font-variant-numeric: tabular-nums; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 6px 10px; margin: 0 0 10px; line-height: 1.45; }
.tm-pnl .tm-pform .op { color: var(--ink-3); padding: 0 3px; }
.tm-ptbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; font-variant-numeric: tabular-nums; background: #fff; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; }
.tm-ptbl th { font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: right; vertical-align: bottom; padding: 6px 8px; border-bottom: 1px solid var(--ink-3); line-height: 1.25; background: #fff; }
.tm-ptbl td { text-align: right; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--line-2); color: var(--ink); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; }
.tm-ptbl th:first-child, .tm-ptbl td:first-child { text-align: left; white-space: normal; }
.tm-ptbl td .sub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); margin-top: 1px; }
.tm-ptbl tr.tot td { border-bottom: 1px solid var(--ink-3); font-weight: 600; }
.tm-ptbl tr.subtot td { border-bottom: 1px solid var(--line); background: var(--brand-light); font-weight: 600; }
.tm-ptbl tr.in-slice td:first-child { border-left: 3px solid var(--brand); padding-left: 5px; }
.tm-ptbl .hl { background: var(--brand-light); }
.tm-ptbl th.hl { color: var(--ink); }
.tm-ptbl tr.more-row td { text-align: center; padding: 6px 8px; border-bottom: 0; }
.tm-more-btn { border: 0; background: none; color: var(--brand); font-size: 12px; cursor: pointer; text-decoration: underline; padding: 2px 6px; }
.tm-plist { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 4px 10px; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tm-plist .prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 10px; padding: 6px 2px; border-bottom: 1px solid var(--line-2); color: var(--ink); }
.tm-plist .prow.tot { border-bottom: 1px solid var(--ink-3); font-weight: 600; }
.tm-plist .prow.subtot { border-bottom: 1px solid var(--line); background: var(--brand-light); font-weight: 600; padding: 6px 6px; margin: 0 -4px; }
.tm-plist .prow.in-slice { border-left: 3px solid var(--brand); padding-left: 6px; }
.tm-plist .prow.more-row { display: block; text-align: center; border-bottom: 0; padding: 6px 2px; }
.tm-bar { grid-column: 1 / -1; display: block; height: 5px; background: var(--line-2); border-radius: 2px; overflow: hidden; }
.tm-bar i { display: block; height: 100%; background: var(--brand); }
.tm-pcard { background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 8px 10px; margin-bottom: 8px; font-size: 12.5px; line-height: 1.45; color: var(--ink); }
.tm-pcard:last-child { margin-bottom: 0; }
.tm-pcard .ct { font-weight: 600; margin-bottom: 3px; color: var(--ink); display: flex; justify-content: space-between; gap: 8px; }
.tm-pcard ul { margin: 4px 0 0; padding-left: 16px; color: var(--ink-2); }
.tm-pcard li { margin: 2px 0; }
.tm-pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tm-pgrid .tm-pcard { margin-bottom: 0; }
.tm-pslice { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; background: var(--brand-light); border: 1px solid var(--brand-tint); border-radius: 5px; padding: 6px 10px; margin-bottom: 8px; font-size: 12px; color: var(--ink-2); }
.tm-pslice label { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--ink); }
.tm-pslice select { font-size: 12px; max-width: 240px; padding: 2px 5px; border: 1px solid var(--line); border-radius: 4px; background: #fff; color: var(--ink); }
.tm-pslice .sep { color: var(--ink-3); }
.tm-ptbl tr.drill { cursor: pointer; }
.tm-ptbl tr.drill:hover td { background: #f5f7fa; }
.tm-ptbl .go-link { color: var(--brand); text-decoration: underline dotted; text-underline-offset: 2px; font-weight: 500; }
.tm-next-btn { color: var(--brand); text-decoration: none; font-weight: 600; background: #fff; border: 1px solid var(--line); border-radius: 5px; padding: 2px 9px; font: inherit; font-size: 12px; cursor: pointer; transition: background-color .12s, border-color .12s; }
.tm-next-btn:hover { background: var(--brand-light); border-color: var(--brand); }
.tm-pfoot { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 12px; color: var(--ink-3); display: flex; justify-content: flex-end; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-pfoot a { color: var(--brand); text-decoration: none; font-weight: 600; font-size: 12.5px; }
.tm-pfoot a:hover { text-decoration: underline; }

/* ── Lab redesign (labm: scenario workbench + comparison strip & tables) ─────────────────────────────────────── */
main.labm { height: calc(100vh - 53px); min-height: 640px; display: grid; grid-template-columns: 390px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); gap: 10px 18px; padding: 10px 24px 12px; }
.labm .lm-top { grid-column: 1 / -1; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); }
.labm .lm-top .cbar { width: 100%; }
.lm-left { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lm-status { flex: none; background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 7px; padding: 9px 12px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 6px; }
.lm-status.is-custom { background: #fff8e6; border-color: #d9a300; }
.lm-status-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lm-status-title { font-size: 12.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.lm-badge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--line-2); color: var(--ink-2); }
.lm-status.is-custom .lm-badge { background: #d9a300; color: #fff; }
.lm-status-acts { display: flex; align-items: center; gap: 6px; }
.lm-btn-xs { border: 1px solid var(--line); background: #fff; border-radius: 4px; padding: 2px 8px; font-size: 11.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; }
.lm-btn-xs:hover:not([disabled]) { border-color: var(--ink); color: var(--ink); }
.lm-btn-xs[disabled] { opacity: .45; cursor: not-allowed; }
.lm-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.lm-chip { display: inline-flex; align-items: center; gap: 4px; background: #fff; border: 1px solid #d9a300; border-radius: 4px; padding: 1px 6px; font-size: 11.5px; color: var(--ink); }
.lm-chip button { border: 0; background: none; padding: 0 1px; cursor: pointer; color: var(--ink-3); font-size: 13px; line-height: 1; }
.lm-chip button:hover { color: var(--ink); }
.lm-bench { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; display: flex; flex-direction: column; gap: 8px; }
details.lm-sec { border: 1px solid var(--grey-line, #e5e5e5); border-radius: 7px; background: #fff; }
details.lm-sec > summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; cursor: pointer; font-size: 13.5px; font-weight: 700; color: var(--ink); background: var(--grey-ground, #f8f8f8); border-radius: 6px; }
details.lm-sec[open] > summary { border-bottom: 1px solid var(--grey-line, #e5e5e5); border-radius: 6px 6px 0 0; }
details.lm-sec > summary::-webkit-details-marker { display: none; }
details.lm-sec > summary .sub { font-size: 11.5px; font-weight: 400; color: var(--ink-3); }
.lm-sec-b { padding: 10px 12px; display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.lm-sublbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); margin-bottom: 3px; display: flex; justify-content: space-between; align-items: baseline; }
.lm-presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-pre { display: flex; flex-direction: column; gap: 1px; text-align: left; padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; font: inherit; transition: background-color .12s, border-color .12s; }
.lm-pre:hover { background: var(--ground); border-color: var(--ink-3); }
.lm-pre.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.lm-pre .pt { font-size: 12px; font-weight: 600; line-height: 1.25; }
.lm-pre .ps { font-size: 11px; color: var(--ink-3); line-height: 1.2; }
.lm-pre.on .ps { color: #d0d5dd; }
.lm-dial { display: flex; flex-direction: column; gap: 4px; background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 5px; padding: 7px 9px; }
.lm-dial-hd { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--ink); }
.lm-dial input[type="range"] { width: 100%; margin: 2px 0; accent-color: var(--brand); }
.lm-dial-ft { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); }
.lm-mlist { display: flex; flex-direction: column; gap: 6px; }
.lm-mcard { border: 1px solid var(--line-2); border-radius: 5px; padding: 7px 9px; background: #fff; display: flex; flex-direction: column; gap: 5px; }
.lm-mcard.edited { border-color: #d9a300; background: #fffdf5; }
.lm-mtop { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lm-mname { font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.3; }
.lm-meff { font-size: 12px; font-variant-numeric: tabular-nums; color: var(--ink-2); white-space: nowrap; }
.lm-mctrl { display: flex; align-items: center; justify-content: space-between; gap: 6px; flex-wrap: wrap; }
.lm-mseg { display: inline-flex; }
.lm-mseg button { height: 24px; padding: 0 7px; font-size: 11.5px; border: 1px solid var(--line); background: #fff; color: var(--ink-2); cursor: pointer; margin-left: -1px; }
.lm-mseg button:first-child { border-radius: 4px 0 0 4px; margin-left: 0; }
.lm-mseg button:last-child { border-radius: 0 4px 4px 0; }
.lm-mseg button.on { background: var(--ink); color: #fff; border-color: var(--ink); font-weight: 600; }
.lm-minp { width: 58px; height: 24px; font-size: 11.5px; text-align: right; border: 1px solid var(--line); border-radius: 4px; padding: 0 5px; font-variant-numeric: tabular-nums; }
.lm-mrel { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-2); cursor: pointer; }
.lm-calc-bar { flex: none; margin-bottom: 8px; }
.lm-calc-btn { width: 100%; border: 0; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background-color .15s, box-shadow .15s; }
.lm-calc-btn:hover:not(:disabled) { background: var(--brand-hover); }
.lm-calc-btn.is-dirty { background: var(--brand); box-shadow: 0 0 0 2px var(--brand-tint); }
.lm-calc-btn.is-dirty:hover { background: var(--brand-hover); }
.lm-calc-btn.is-clean { background: var(--ink); color: #fff; }
.lm-calc-btn.is-clean:hover { background: #111827; }
.lm-calc-btn:disabled { opacity: .65; cursor: wait; }
.lm-calc-sub { font-size: 11.5px; font-weight: 600; opacity: .92; background: rgba(0,0,0,.2); padding: 2px 7px; border-radius: 4px; }
.lm-base-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-base-grid .full { grid-column: 1 / -1; }
.lm-base-sel { width: 100%; height: 26px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; background: #fff; color: var(--ink); font-weight: 600; }
.lm-top-pt { display: flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 0 8px; height: 32px; min-width: 130px; }
.lm-cm-list { display: flex; flex-direction: column; gap: 6px; }
.lm-cm-card { border: 1px solid var(--line); border-radius: 6px; padding: 7px 9px; background: #fff; display: flex; flex-direction: column; gap: 4px; }
.lm-cm-card-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.lm-cm-card-title { font-size: 12.5px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 6px; }
.lm-cm-badge { background: var(--grey-line, #e5e5e5); color: var(--ink); font-weight: 700; font-size: 11.5px; padding: 1px 6px; border-radius: 4px; }
.lm-cm-card-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; font-size: 11px; color: var(--ink-3); }
.lm-cm-meta-tag { background: var(--ground); border: 1px solid var(--line-2); border-radius: 3px; padding: 1px 5px; }
.lm-cm-del { border: 0; background: none; color: var(--ink-3); font-size: 15px; line-height: 1; cursor: pointer; padding: 0 2px; }
.lm-cm-del:hover { color: #dc2626; }
.lm-cm-form { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 6px; padding: 9px 11px; display: flex; flex-direction: column; gap: 8px; font-size: 12px; }
.lm-cm-form-hd { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; align-items: center; }
.lm-cm-form-row { display: flex; flex-direction: column; gap: 3px; }
.lm-cm-form-row label { font-size: 11.5px; font-weight: 600; color: var(--ink-2); display: flex; justify-content: space-between; align-items: baseline; }
.lm-cm-form-row select, .lm-cm-form-row input[type="text"] { height: 26px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; font-size: 12px; background: #fff; }
.lm-cm-rate-box { display: flex; align-items: center; gap: 8px; }
.lm-cm-rate-box input[type="range"] { flex: 1; accent-color: var(--brand); }
.lm-cm-rate-box input[type="number"] { width: 56px; height: 24px; text-align: right; border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lm-cm-form-acts { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: 2px; }
.lm-ppbox { background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 5px; padding: 8px 9px; display: flex; flex-direction: column; gap: 6px; }
.lm-pprow { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; }
.lm-pprow select { height: 26px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0 6px; max-width: 190px; }
.lm-cgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.lm-cbtn { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 7px 9px; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; font: inherit; }
.lm-cbtn:hover:not(.off) { background: var(--ground); }
.lm-cbtn.on { border-color: var(--brand); background: var(--grey-ground, #f8f8f8); box-shadow: inset 0 -2px 0 var(--brand); }
.lm-cbtn.off { border-style: dashed; color: var(--ink-3); cursor: not-allowed; opacity: .6; }
.lm-cbtn .ct { font-size: 12px; font-weight: 700; color: var(--ink); display: flex; justify-content: space-between; width: 100%; }
.lm-cbtn .cs { font-size: 11px; color: var(--ink-2); line-height: 1.3; }
.lm-right { display: flex; flex-direction: column; min-height: 0; gap: 10px; overflow: hidden; }
.lm-res { flex: none; background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; padding: 12px 16px; }
.lm-rhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid var(--grey-line, #e5e5e5); }
.lm-rplace { display: flex; flex-direction: column; gap: 2px; }
.lm-rsum { font-size: 14px; color: var(--ink-2); margin: 0; }
.lm-rtools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lm-search { width: 240px; position: relative; }
.lm-search input { height: 30px; border-width: 1px; font-size: 13px; padding: 0 10px; }
.lm-tracelink { font-size: 12.5px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; padding: 4px 8px; border: 1px solid var(--line); border-radius: 5px; background: #fff; }
.lm-tracelink:hover:not(.is-disabled) { border-color: var(--brand); background: var(--brand-light); }
.lm-tracelink.is-disabled { color: var(--ink-3); background: var(--ground); border-style: dashed; cursor: not-allowed; opacity: .75; }
.lm-cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.15fr); gap: 12px; align-items: stretch; }
.lm-ccard { border: 1px solid var(--grey-line, #e5e5e5); border-radius: 6px; padding: 9px 12px; background: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
.lm-ccard.held { background: #fff; border-color: var(--brand); box-shadow: inset 0 0 0 1px var(--brand); }
.lm-ccard.scen { background: #fff; border-color: var(--ink); }
.lm-ccard.delta { background: #fff; }
.lm-ccard.delta.up { background: #fff6ed; border-color: #e0a060; }
.lm-ccard.delta.down { background: #eef8f3; border-color: #7ab896; }
.lm-ck { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-3); display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.lm-hold-lbl { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; text-transform: none; letter-spacing: 0; color: var(--ink-2); cursor: pointer; user-select: none; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }
.lm-hold-lbl:hover { border-color: var(--ink-3); color: var(--ink); }
.lm-ccard.held .lm-hold-lbl { background: var(--brand); border-color: var(--brand); color: #fff; }
.lm-hold-lbl input { margin: 0; accent-color: var(--brand); cursor: pointer; }
.lm-cv { font-size: 22px; font-weight: 700; line-height: 1.2; color: var(--ink); font-variant-numeric: tabular-nums; }
.lm-ccard.delta.up .lm-cv { color: #9a3412; }
.lm-ccard.delta.down .lm-cv { color: #166534; }
.lm-cs { font-size: 12.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.35; }
.lm-ctrade { font-size: 11.5px; color: var(--ink-2); font-variant-numeric: tabular-nums; line-height: 1.3; padding-top: 3px; border-top: 1px dashed var(--line-2); }
.lm-ctrade b { color: var(--ink); font-weight: 600; }
.lm-cbar { height: 6px; background: var(--line-2); border-radius: 3px; overflow: hidden; position: relative; margin-top: 3px; }
.lm-cbar i { display: block; height: 100%; background: var(--brand); border-radius: 3px; }
.lm-panels { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: 14px; }
.lm-pane { border: 1px solid var(--grey-line, #e5e5e5); border-radius: 8px; background: #fff; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.lm-phd { padding: 8px 12px; background: var(--grey-ground, #f8f8f8); border-bottom: 1px solid var(--grey-line, #e5e5e5); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.lm-pttl { font-size: 13px; font-weight: 700; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.lm-psub { padding: 6px 12px; border-bottom: 1px solid var(--grey-line, #e5e5e5); display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); background: var(--grey-ground, #f8f8f8); }
.lm-psub select { height: 26px; font-size: 12px; border: 1px solid var(--line); border-radius: 4px; padding: 0 6px; background: #fff; color: var(--ink); font-weight: 600; }
.lm-scroll { flex: 1; min-height: 0; overflow-y: auto; }
table.lm-tbl { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 12.5px; font-variant-numeric: tabular-nums; }
table.lm-tbl thead th { position: sticky; top: 0; z-index: 1; background: #fff; font-size: 11px; font-weight: 600; color: var(--ink-3); text-align: right; padding: 6px 8px; border-bottom: 1px solid var(--ink-3); cursor: pointer; user-select: none; white-space: nowrap; }
table.lm-tbl thead th:first-child { text-align: left; }
table.lm-tbl thead th.on { color: var(--ink); font-weight: 700; }
table.lm-tbl tbody td { padding: 6px 8px; border-bottom: 1px solid var(--line-2); text-align: right; vertical-align: middle; color: var(--ink); overflow: hidden; text-overflow: ellipsis; }
table.lm-tbl tbody td:first-child { text-align: left; }
table.lm-tbl tbody tr.pick { cursor: pointer; }
table.lm-tbl tbody tr.pick:hover td { background: var(--ground); }
table.lm-tbl tbody tr.on td { background: var(--brand-light); font-weight: 600; }
table.lm-tbl .sub { display: block; font-size: 11px; font-weight: 400; color: var(--ink-3); }
.lm-dbadge { display: inline-block; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; font-weight: 600; background: var(--ground); color: var(--ink-3); }
.lm-dbadge.up { background: #fff1e0; color: #9a3412; }
.lm-dbadge.down { background: #e8f7ee; color: #166534; }
.lm-dualbar { display: block; height: 5px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 3px; position: relative; }
.lm-dualbar .b-base { position: absolute; left: 0; top: 0; bottom: 0; background: #9ca3af; opacity: .55; }
.lm-dualbar .b-scen { position: absolute; left: 0; top: 0; bottom: 0; background: var(--brand); }
.lm-psub .key { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; color: var(--ink-2); margin-left: auto; }
.lm-psub .key i { width: 11px; height: 7px; display: inline-block; margin-left: 5px; border-radius: 1px; }
.lm-sbar { display: flex; height: 6px; background: var(--line-2); border-radius: 2px; overflow: hidden; margin-top: 3px; }
.lm-sbar i { display: block; height: 100%; }
.lm-psub .kd, .lm-sbar .kd { background: var(--brand); }
.lm-psub .ks, .lm-sbar .ks { background: var(--supplier); }
.lm-psub .ke, .lm-sbar .ke { background: var(--irpp-teal); }

/* ── Soft-launch Batch A (Decisions #104, #105; WO-13, WO-24, WO-38) ─────────────────────────────────────────── */

/* 1B: 3-segment supplier bars (Direct · Own-chain suppliers · Other exports' suppliers) & unified click dimming */
.xside .kd, .xside .ke, .lm-psub .ke, .lm-sbar .ke { background: var(--irpp-navy); }
.xside .ks { background: #3b9a9c; }
.xside .ko { background: var(--irpp-gold); transition: opacity .15s ease; }
.xside .ko.dim { opacity: 0.25; }
.xside .crow.dim { opacity: 0.42; transition: opacity .15s ease; }
.xside .crow.dim:hover { opacity: 0.85; }
.xside .cbridge { padding: 5px 6px 3px; margin: 2px 0; border-top: 1px dashed var(--line); font-size: 11.5px; color: var(--ink-2); line-height: 1.35; }
.xside .clist-hdr { display: flex; justify-content: space-between; align-items: baseline; padding: 2px 6px 3px 2px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--ink-3); }
.xside .xind .ih { flex-wrap: wrap; gap: 4px 8px; margin-bottom: 3px; }
.xside .key { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; width: 100%; padding: 4px 8px; background: var(--ground); border: 1px solid var(--line-2); border-radius: 5px; font-size: 11px; color: var(--ink-2); }
.xside .key .k-item { display: inline-flex; align-items: center; gap: 4px; cursor: help; text-decoration: underline dotted var(--ink-3); text-underline-offset: 2px; }
.xside .key .k-item:hover { color: var(--ink); text-decoration-color: var(--ink); }
.xside .key i { width: 10px; height: 8px; margin: 0; border-radius: 1.5px; flex: none; }

/* 2A, 2B: Lighter default-open Controls bar & subtle dynamic "Filtered view" signal */
.a-controls .cbar-row { position: static; height: auto; min-height: 44px; align-items: flex-end; justify-content: space-between; gap: 10px; padding: 6px 10px; background: var(--grey-ground, #f8f8f8); border: 1px solid var(--grey-line, #e5e5e5); border-radius: 7px; }
.a-controls .cbar-row.closed { padding: 0; background: none; border: 0; min-height: 30px; justify-content: flex-end; }
.a-controls .cbar { flex: 1; min-width: 0; height: auto; gap: 8px; align-items: flex-end; }
.a-controls .cf .lbl { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-3); }
.a-controls .cf.grow { flex: 1 1 135px; max-width: 215px; }
.a-controls .cf select.ctl,
.a-controls .cf .seg button,
.a-controls .cbar details.pop summary { height: 28px; font-size: 12.5px; }
.a-controls .cbar details.pop .panel-b { top: 31px; }
.a-controls .cbar-toggle { position: static; flex: none; height: 28px; padding: 0 10px; font-size: 12px; font-weight: 500; background: #fff; color: var(--ink-2); border-color: var(--line); }
.filt-sig { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; color: var(--brand); background: var(--brand-light); border: 1px solid var(--brand-tint); border-radius: 4px; padding: 1px 6px; white-space: nowrap; }
.filt-sig .lx { border: 0; background: none; color: var(--brand); cursor: pointer; padding: 0 2px; font-size: 13px; font-weight: 700; line-height: 1; }
.filt-sig .lx:hover { color: var(--irpp-red); }
.x78 .rscope[hidden] { display: none; }

/* 3A: Binary toggle above CDs/Provinces (Show shares | Show counts) + compact sortable column header */
.plist-bar { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.plist-bar .lbl { font-size: 11px; white-space: nowrap; }
.plist-bar .plist-mode { margin-left: auto; flex: none; }
.plist-bar .plist-mode button { height: 26px; padding: 0 7px; font-size: 11px; line-height: 1; white-space: nowrap; }
.x78 .prsel.is-dim { opacity: 0.5; cursor: not-allowed; border-style: dashed; }
table.t.oneline th:nth-child(3), table.t.oneline td:nth-child(3) { width: 78px; }

/* 4A, 4C, 4E: Home centered layout, compact cards/figure sizes, & scatter highlight colours */
main.home { max-width: 1040px; margin: 0 auto; gap: 32px; padding: 22px 24px 48px; }
.home .hero-inner { display: flex; flex-direction: column; gap: 16px; width: 100%; }
.home .intro { display: flex; flex-direction: column; gap: 6px; width: 100%; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); }
.home .title-row { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.home .t1 { font-size: 24px; letter-spacing: -0.01em; line-height: 1.15; margin: 0; }
.home .t1-sub { font-size: 18px; font-weight: 400; color: var(--ink-2); line-height: 1.25; }
.home .desc { font-size: 14px; line-height: 1.5; color: var(--ink-2); margin: 0; }
.home .lede-more { margin-left: 4px; color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }
.home .lede-more:hover { color: var(--irpp-red); }
.home .lrh { margin-bottom: 5px; }
.home .cards { gap: 14px; width: 100%; }
.home .card { padding: 10px 14px; gap: 3px; }
.home .card .cn { font-size: 20px; }
.home .card .lp { font-size: 13.5px; }
.home .card .cl { font-size: 13.5px; line-height: 1.3; }
.home .card .cm { font-size: 12px; }
.home .card .csub { font-size: 12px; padding-top: 4px; }
.home .figblock { padding: 0; border-top: 0; gap: 10px; width: 100%; }
.home .frow { gap: 12px; justify-content: space-between; }
.home .fsearch { width: 340px; }
.home .fgrid { grid-template-columns: minmax(0, 1fr) 316px; gap: 24px; align-items: stretch; width: 100%; }
.home #spec { display: flex; flex-direction: column; justify-content: space-between; }
.home .fcap { margin-top: 4px; }
.home .ppanel { padding: 12px 16px; gap: 5px; justify-content: space-between; position: static; }
.home .ppanel .phdr { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.home .ppanel .pn { font-size: 18px; }
.home .ppanel .prw { padding-top: 5px; font-size: 13px; }
.home .ppanel .prw .num { font-size: 17px; }
.home .ppanel .pb { margin: 2px 0 0; }
.home .tiles { padding-top: 26px; width: 100%; }
.home #spec .mk.pr-focus, .home #spec svg.hasprov .mk.pr-focus { fill: var(--hl); fill-opacity: 1; stroke: var(--ink); stroke-width: 2; }
.home #spec .mk.on, .home #spec svg.hasprov .mk.on, .home #spec svg .mk.inpr.on { fill: var(--irpp-red); fill-opacity: 1; stroke: #fff; stroke-width: 2; }

/* 4B, 4D: Preliminary pill ("Preliminary · Do not cite or circulate") & dimmed held-back page doorways ("Coming soon") */
.prelim-pill { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 12px; background: #fff4d6; border: 1px solid #e6b83a; color: #7a4b00; font-size: 11.5px; font-weight: 700; letter-spacing: 0.01em; line-height: 1.2; white-space: nowrap; }
.home .title-row .prelim-pill { margin-left: auto; align-self: center; }
.map .map-stage { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.map .map-stage svg { flex: 1; min-height: 0; width: 100%; height: 100%; }
.map .map-prelim { position: absolute; top: 8px; right: 8px; z-index: 3; pointer-events: none; box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.map .legend .lx { margin-left: 2px; }
.map .legend .l-scale { display: inline-flex; align-items: flex-start; gap: 2px; vertical-align: middle; }
.map .legend .l-step { display: inline-flex; flex-direction: column; align-items: center; gap: 1px; min-width: 24px; }
.map .legend .l-step i { width: 100%; height: 9px; margin: 0; border-radius: 1px; display: block; }
.map .legend .l-step em { font-style: normal; font-size: 9.5px; line-height: 1; color: var(--ink-3); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hdr .nav-stub { padding: 7px 10px 5px; color: var(--ink-3); cursor: default; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; opacity: 0.72; font-size: 13.5px; line-height: 1.05; white-space: nowrap; }
.hdr .nav-stub .soon { font-size: 8.5px; padding: 0 4px; letter-spacing: 0.03em; line-height: 1.25; }
.soon { display: inline-block; font-style: normal; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 1px 5px; border-radius: 3px; background: var(--line-2); color: var(--ink-3); vertical-align: middle; line-height: 1.3; }
.home .tile.tile-soon { opacity: 0.7; background: #fafafa; border-style: dashed; }
.home .tile.tile-soon .th { display: flex; align-items: center; gap: 8px; }
.home .tile .btn.disabled { background: var(--line-2); border-color: var(--line); color: var(--ink-3); cursor: default; pointer-events: none; }
.xside .hl-foot .btn-s.is-disabled { background: var(--ground); border-style: dashed; color: var(--ink-3); cursor: not-allowed; opacity: 0.78; gap: 5px; }

/* WO-24: 32" monitor height cap, 13" laptop windowed fit (600px–780px), zoom scroll unlock (< 600px), and < 960px mobile layout */
@media (min-height: 940px) {
  .explore2, .explore3, .compare2, .trace, .tariffs, .lab, main.cmp3, main.trm, main.labm {
    max-height: 860px;
  }
}
@media (max-height: 780px) and (min-height: 601px) and (min-width: 1181px) {
  .explore3.x78 {
    height: calc(100dvh - 53px);
    min-height: 0;
    padding: 6px 24px 8px;
    gap: 8px 20px;
  }
  .a-controls .cbar-row { min-height: 38px; padding: 4px 10px; }
  .x78 .a-center { gap: 6px; }
  #timeline { padding-top: 5px; }
  .tl-head-row { margin-bottom: 2px; }
  .xside .hlcard { padding: 8px 12px; gap: 4px; }
  .xside .hl-title-row .place-name { font-size: 20px; }
  .xside .hl-rungs { padding: 4px 0; gap: 6px; }
  .xside .r-col { padding: 4px 6px; }
  .xside .r-val { font-size: 17px; }
  .xside .drives { padding: 8px 12px; gap: 4px; }
  .x78 .a-right { gap: 8px; }
  .x78 .prsel { padding: 4px 10px; font-size: 12px; }
  .x78 .prsel b { font-size: 12px; }
  .plist-bar { margin-bottom: 4px; }
  .plist table.t td, .plist table.t th { padding: 4px 4px; }
}
@media (max-height: 600px), (max-width: 1180px) {
  .explore2, .explore3, .compare2, .trace, .tariffs, .lab, main.cmp3, main.trm, main.labm {
    height: auto;
    min-height: 0;
    max-height: none;
  }
  .x78 .side, .x78 .xside {
    height: auto;
    overflow: visible;
  }
  .xside .drives .clist {
    max-height: 360px;
  }
  .x78 .right-list .scroll {
    max-height: 420px;
  }
}
@media (max-width: 960px) {
  .hdr { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 10px 16px; }
  .hdr nav { flex-wrap: wrap; gap: 2px 6px; }
  .hdr nav a, .hdr .nav-stub { padding: 6px 8px; }
  .hdr .right { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 8px 12px; padding-top: 4px; border-top: 1px solid var(--line-2); }
  main.home { padding: 18px 16px 36px; gap: 24px; }
  .home .cards, .home .tgrid { grid-template-columns: 1fr; }
  .methods { grid-template-columns: 1fr; gap: 20px; padding: 16px; }
  .toc { position: static; }
  .explore3.x78 {
    display: flex;
    flex-direction: column;
    padding: 12px 16px 28px;
    gap: 14px;
  }
  .explore3.x78::before {
    content: "Explore is designed for a wider screen — panels stack vertically on mobile.";
    display: block;
    font-size: 12px;
    color: var(--ink-2);
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 6px 10px;
  }
  .a-controls .cbar { flex-wrap: wrap; }
}

/* Scenario comparison signals on Explore (Place list rank movement, Industries/Tariffs bar ticks & deltas, Timeline ticks & header delta) */
table.t.oneline.has-scen th:nth-child(1),
table.t.oneline.has-scen td:nth-child(1) { width: 52px; }
table.t .rk-cell { display: flex; align-items: baseline; gap: 3px; white-space: nowrap; }
table.t .rk-d { font-size: 10px; font-weight: 700; line-height: 1; letter-spacing: -0.02em; }
table.t .rk-d.up { color: #b45309; }
table.t .rk-d.down { color: #0f766e; }

.xside .crow .cb-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.xside .crow .cb { flex: 1; display: flex; height: 7px; position: relative; min-width: 0; }
.xside .crow .cb.has-scen { background: rgba(0, 0, 0, 0.04); border-radius: 1px; }
.xside .crow .cb-tick { position: absolute; top: -1.5px; bottom: -1.5px; width: 1.5px; background: var(--ink); opacity: 0.7; pointer-events: none; text-decoration: none; z-index: 2; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.85); }
.xside .crow .cdelta { flex: none; width: 38px; text-align: right; font-size: 10.5px; font-weight: 600; line-height: 1; white-space: nowrap; color: var(--ink-3); }
.xside .crow .cdelta.up { color: #9a3412; }
.xside .crow .cdelta.down { color: #0f766e; }
.xside .crow .cdelta.flat { color: var(--ink-3); opacity: 0.55; font-weight: 400; }

.tl-c .tl-bw { position: relative; display: block; width: 100%; }
.tl-c .tl-tick { position: absolute; left: 0; right: 0; height: 0; border-top: 1.5px dashed rgba(26, 26, 26, 0.65); pointer-events: none; text-decoration: none; z-index: 2; }
.tl-c.on .tl-tick { border-top-color: #deac28; border-top-style: solid; border-top-width: 2px; }
.tl-head-row .tl-delta { font-size: 11px; font-weight: 600; padding: 0 5px; border-radius: 3px; background: var(--ground); color: var(--ink-2); margin-left: 2px; }
.tl-head-row .tl-delta.up { background: #fff3e6; color: #9a3412; }
.tl-head-row .tl-delta.down { background: #e8f6f5; color: #0f766e; }