/* Page layer over industry.css — design v4 (design/DXTR-App-v4.dc.html):
   light/dark themes, chart palette, frameless sheets, section headers. */

/* ── tokens ─────────────────────────────────────────────────────────────
   Chart palette on :root (not body) and re-declared in dark, so the -soft
   mixes resolve from the dark colours too (the prototype leaked light). */
:root{--chart-1:#0092c4;--chart-2:#4aa800;--chart-3:#e07c00;--chart-4:#d6109a;--chart-5:#7a3cf0;
  --chart-1-soft:color-mix(in srgb,var(--chart-1) 30%,transparent);
  --chart-3-soft:color-mix(in srgb,var(--chart-3) 40%,transparent);
  --chart-track:var(--color-neutral-200)}
[data-theme="dark"]{color-scheme:dark;--chart-1:#00e5ff;--chart-2:#b4ff39;--chart-3:#ffb020;--chart-4:#ff3dbf;--chart-5:#b388ff;--chart-track:#2a2e33;
  --chart-1-soft:color-mix(in srgb,var(--chart-1) 30%,transparent);
  --chart-3-soft:color-mix(in srgb,var(--chart-3) 40%,transparent);
  --color-bg:#141618;--color-surface:#1b1e21;--color-text:#eceef0;--color-divider:color-mix(in srgb,#eceef0 18%,transparent);
  --color-neutral-100:#1a1c1f;--color-neutral-200:#24272a;--color-neutral-300:#303438;--color-neutral-400:#4a4f54;--color-neutral-500:#6e7378;--color-neutral-600:#93989d;--color-neutral-700:#b4b8bc;--color-neutral-800:#d0d3d6;--color-neutral-900:#e6e8ea;
  --color-accent-100:#1b2733;--color-accent-200:#22354a;--color-accent-300:#2f4a66;--color-accent-400:#416180;--color-accent-500:#5f87ad;--color-accent-600:#7ea3c7;--color-accent-700:#9fc0de;--color-accent-800:#c2d9ef;--color-accent-900:#dfeefb;
  --color-accent-2-100:#1b2733;--color-accent-2-200:#22354a;--color-accent-2-300:#2f4a66;--color-accent-2-400:#416180;--color-accent-2-500:#5f87ad;--color-accent-2-600:#7ea3c7;--color-accent-2-700:#9fc0de;--color-accent-2-800:#c2d9ef;--color-accent-2-900:#dfeefb;
  --shadow-sm:0 0 0 1px color-mix(in srgb,#eceef0 10%,transparent);--shadow-md:0 0 0 1px color-mix(in srgb,#eceef0 12%,transparent),0 8px 24px rgba(0,0,0,.5);--shadow-lg:0 0 0 1px color-mix(in srgb,#eceef0 14%,transparent),0 20px 48px rgba(0,0,0,.6)}
[data-theme="dark"] .btn-primary{color:#fff}

body{margin:0;background:var(--color-bg);color:var(--color-text);
  font-family:var(--font-body);font-size:15px;line-height:22px;text-wrap:pretty}
a{color:var(--color-accent-700)} a:hover{color:var(--color-accent-900)}

/* ── shell ─────────────────────────────────────────────────────────── */
.nav-wrap{max-width:1320px;margin:0 auto;padding:20px 28px 0;display:flex;flex-wrap:wrap;
  align-items:center;gap:12px 28px;border:0;background:transparent}
.nav-wrap .nav-brand{margin-right:auto;color:var(--color-text);text-decoration:none;
  font-family:var(--font-heading);font-weight:600;font-size:28px;line-height:28px;letter-spacing:.08em}
.nav-main{display:flex;flex-wrap:wrap;align-items:center;gap:8px 22px;font-size:16px;line-height:22px}
.nav-sub{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;font-size:13px;line-height:18px;
  padding-left:22px;border-left:1px solid var(--color-divider)}
.nav-wrap .nav-link{color:var(--color-neutral-700);text-decoration:none;white-space:nowrap;font-size:inherit}
.nav-wrap .nav-link:hover{color:var(--color-text)}
.nav-wrap .nav-link.active{color:var(--color-text);font-weight:600;text-decoration:underline;
  text-underline-offset:7px;text-decoration-thickness:2px;text-decoration-color:var(--color-accent)}
.nav-tools{display:flex;align-items:center;gap:8px;margin-left:auto}
.nav-tools .nav-link{font-size:13px}
.theme-btn svg{display:block}
.theme-btn .ico-sun{display:none}
[data-theme="dark"] .theme-btn .ico-sun{display:block}
[data-theme="dark"] .theme-btn .ico-moon{display:none}
.datestrip{max-width:1320px;margin:0 auto;padding:10px 28px 14px;display:flex;flex-wrap:wrap;
  gap:4px 18px;font-size:13px;line-height:18px;color:var(--color-neutral-700);font-variant-numeric:tabular-nums}
.datestrip span{white-space:nowrap}
.datestrip .today{color:var(--color-text)}
.datestrip-rule{max-width:1320px;margin:0 auto;padding:0 28px}
.datestrip-rule>div{height:1px;background:var(--color-divider)}
.wrap{max-width:1320px;margin:0 auto;padding:28px 28px 56px}

/* ── sections ──────────────────────────────────────────────────────── */
.sec{margin-top:40px}
.sh{display:flex;justify-content:space-between;gap:6px 16px;flex-wrap:wrap;align-items:baseline;
  padding-bottom:10px;border-bottom:1px solid var(--color-divider)}
.sh.bare{padding-bottom:0;border-bottom:0}
.sh h2,.shs h2{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:26px;letter-spacing:0;margin:0}
.sh-r{font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:0}
/* stacked header: title + subtitle on the left, a button on the right, then a rule */
.shs{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;
  border-bottom:1px solid var(--color-divider);margin-bottom:8px}
.shs>div{display:grid;gap:2px;margin:0 0 10px;flex:1 1 240px;min-width:0}
.shs>.btn,.shs>form,.shs>.filters{margin-bottom:8px}
.two{display:flex;flex-wrap:wrap;gap:36px 40px;margin-top:40px;align-items:start}
.two>section,.two>.stack{flex:1 1 440px;min-width:0}
.stack{display:grid;gap:36px;align-content:start}
.subnav{position:sticky;top:0;z-index:5;background:var(--color-bg);display:flex;flex-wrap:wrap;
  gap:6px 18px;padding:10px 0;margin-bottom:20px;font-size:13px;border-bottom:1px solid var(--color-divider)}
.subnav a{color:var(--color-neutral-700);text-decoration:none;white-space:nowrap}
.subnav a:hover{color:var(--color-text)}

/* ── KPI tiles (no borders, neutral label) ─────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:20px 32px;padding:0 0 28px;border-bottom:1px solid var(--color-divider)}
.kpi{min-width:0}
.kpi-l{display:block;font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:0 0 6px}
.kpi-v{font-family:var(--font-heading);font-weight:600;font-size:30px;line-height:34px;
  font-variant-numeric:tabular-nums;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi-v.lg{font-size:34px;line-height:36px;letter-spacing:.01em;white-space:normal}
.kpi-s{font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:6px 0 0}

/* ── Today hero ────────────────────────────────────────────────────── */
.hero-row{display:flex;flex-wrap:wrap;gap:28px 40px;align-items:stretch}
.hero-left{flex:5 1 300px;min-width:0;display:flex;flex-direction:column}
.hero-cap{font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:0}
.hero-nw{font-family:var(--font-heading);font-weight:400;font-size:clamp(52px,7vw,88px);line-height:.95;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:8px 0 0;overflow-wrap:anywhere}
.hero-line{font-size:15px;line-height:22px;color:var(--color-neutral-800);margin:12px 0 0}
.mrows{margin-top:auto;padding-top:28px}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) 112px;gap:16px;align-items:center;
  padding:14px 0;border-top:1px solid var(--color-divider)}
.mrow:last-child{border-bottom:1px solid var(--color-divider)}
.mrow-v{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-family:var(--font-heading);
  font-weight:600;font-size:26px;line-height:28px;margin:0;font-variant-numeric:tabular-nums}
.mrow-v span{font-family:var(--font-body);font-weight:400;font-size:14px;line-height:18px;
  color:var(--color-neutral-700);white-space:nowrap}
.mrow-s{font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:2px 0 0}
.mbar{width:100%;height:10px;display:block}
.mbar.thin{height:8px}

/* ── figure cards ──────────────────────────────────────────────────── */
.fig{margin:0;padding:20px 22px 16px;display:flex;flex-direction:column;min-width:0;background:var(--color-bg)}
.fig.wide{flex:7 1 440px} .fig.narrow{flex:5 1 300px}
.fig h2{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:26px;margin:0}
.fig svg.chart{width:100%;height:auto;margin-top:16px;font-family:var(--font-body)}
.legend{display:flex;gap:8px 20px;flex-wrap:wrap;margin-top:12px;font-size:13px;line-height:18px;
  color:var(--color-neutral-800)}
.legend>span{display:flex;gap:8px;align-items:center}
.axis{fill:var(--color-neutral-600);font-size:12px}

/* ── ranked decisions ──────────────────────────────────────────────── */
.rank-h,.rank-r{display:grid;grid-template-columns:32px minmax(0,1fr) 150px;gap:8px 14px}
.rank-h{align-items:baseline;padding:18px 0 6px;border-bottom:1px solid var(--color-divider);
  font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;
  color:var(--color-neutral-700)}
.rank-r{align-items:start;padding:14px 0;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
.rank-no{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:22px;
  color:var(--color-accent-700);font-variant-numeric:tabular-nums}
.rank-r h3{font-family:var(--font-heading);font-weight:600;font-size:19px;line-height:22px;margin:0}
.rank-why{font-size:14px;line-height:20px;color:var(--color-neutral-700);margin:4px 0 0;max-width:70ch}
.rank-act{display:flex;gap:2px 8px;margin:6px 0 0 -4px;flex-wrap:wrap;align-items:center}
.rank-val{padding-top:7px}
.rank-val strong{display:block;font-weight:600;font-size:13px;line-height:18px;margin-top:4px;
  font-variant-numeric:tabular-nums}
.rank-val small{display:block;font-size:12px;line-height:16px;color:var(--color-neutral-700)}

/* scenario strip (Today) and boxes (Briefing, Plan) */
.scen-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--color-divider);border:1px solid var(--color-divider);margin-top:16px}
.scen-strip>div{background:var(--color-bg);padding:10px 12px;border-top:2px solid transparent}
.scen-strip>div.active{border-top-color:var(--color-accent)}
.scen-strip .nm{font-size:11px;line-height:14px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--color-neutral-700);margin:0}
.scen-strip .active .nm{color:var(--color-accent-700)}
.scen-strip .tot{font-family:var(--font-heading);font-weight:600;font-size:22px;line-height:24px;margin:4px 0 0}
.scenbox{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  background:var(--color-divider);border:1px solid var(--color-divider);margin-top:16px}
.scen-cell{background:var(--color-bg);padding:12px 14px}
.scen-cell.active{background:var(--color-accent-900);color:var(--color-bg)}
.scen-cell p{margin:0}

/* ── shared bits ───────────────────────────────────────────────────── */
.row-line{border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
.h-item{font-family:var(--font-heading);font-weight:600;font-size:19px;line-height:22px;margin:0}
.h-chart{font-family:var(--font-heading);font-weight:600;font-size:19px;line-height:24px;margin:0 0 10px}
.muted{color:var(--color-neutral-700)}
.muted-s{font-size:13px;line-height:18px;color:var(--color-neutral-700)}
.note{font-size:13px;line-height:18px;color:var(--color-neutral-700);margin:12px 0 0}
.note-xs{font-size:12px;line-height:16px;color:var(--color-neutral-600);margin:8px 0 0}
.plain-note{font-size:14px;line-height:20px;color:var(--color-neutral-700);margin:12px 0 0;max-width:80ch}
.num{font-variant-numeric:tabular-nums}
.r{text-align:right}
.nowrap{white-space:nowrap}
.tr-total td{font-weight:600;border-top:2px solid var(--color-divider)}
.goal-sel{width:auto;min-height:28px;padding:2px 6px;font-size:13px;display:inline-block}
.notice{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:60;
  background:var(--color-bg);box-shadow:var(--shadow-md);padding:10px 16px;
  max-width:min(680px,calc(100% - 32px));display:flex;gap:10px;align-items:center;
  font-size:14px;color:var(--color-accent-800)}
.footer{font-size:12px;line-height:16px;color:var(--color-neutral-600);margin:28px 0 0;text-align:center}
.filters{display:flex;gap:8px;flex-wrap:wrap}
details.grp>summary{list-style:none;cursor:pointer}
details.grp>summary::-webkit-details-marker{display:none}
.dlg-stats{border-top:1px solid var(--color-divider);padding-top:12px;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:12px 16px}
.dlg-k{display:block;font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  font-weight:600;color:var(--color-accent-700)}
.dlg-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:12px 16px}
.fullrow{grid-column:1 / -1}
@media print{.nav-wrap,.notice,.btn,.datestrip{display:none}}

/* Native <dialog>: the DS's .dialog{display:flex} and .blueprint{position:relative}
   override the UA rules, so closed dialogs rendered inline and open ones
   didn't sit in the top layer. Restore both; give the modal an opaque ground. */
dialog.dialog:not([open]){display:none}
dialog.dialog[open]{position:fixed;inset:0;margin:auto;height:fit-content;
  max-height:calc(100dvh - 32px);overflow:auto;background:var(--color-bg);color:var(--color-text)}
dialog.dialog::backdrop{background:color-mix(in srgb,var(--color-neutral-900) 50%,transparent)}

/* live price refresh: brief highlight on regions that changed */
@keyframes liveflash{from{background:color-mix(in srgb,var(--chart-1) 14%,transparent)}to{background:transparent}}
.live-flash{animation:liveflash 1.2s ease-out}