:root {
  --ink: #14202b; --muted: #5a6b7a; --paper: #e8ecef; --panel: #f6f8f9; --line: #cfd7dd;
  --teal: #0b6e8a; --teal-ink: #08536a; --amber: #b45f06; --green: #2d7a4b; --red: #b3261e;
  --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #e6edf2; --muted: #93a4b3; --paper: #0f1a22; --panel: #16232d; --line: #2a3b48; --teal: #4cb5d3; --teal-ink: #7fd0e6; --amber: #e0a050; --green: #5cc383; --red: #f0837b; }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--sans); }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; margin: 0; }
h1 { font-size: 28px; letter-spacing: -.01em; }
h2 { font-size: 20px; } h3 { font-size: 16px; margin: 22px 0 8px; }
a { color: var(--teal-ink); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.shell { display: grid; grid-template-columns: 380px 1fr; min-height: 100vh; }
.side { padding: 28px 24px; border-right: 1px solid var(--line); background: var(--panel); position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.main { padding: 28px 36px 60px; min-width: 0; }
@media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .side { position: static; height: auto; border-right: 0; border-bottom: 1px solid var(--line); } .main { padding: 20px 16px 48px; } }

.lede { color: var(--muted); margin: 6px 0 22px; max-width: 34ch; }
label { display: block; font-weight: 600; font-size: 13px; margin: 14px 0 5px; }
.hint { font-weight: 400; color: var(--muted); }
input[type=text], input[type=password], input[type=number] { width: 100%; padding: 9px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }
details { margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; }
summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
label.check { display: flex; gap: 8px; align-items: center; font-weight: 400; margin-top: 12px; }
button, .btn { display: inline-block; font: inherit; font-weight: 600; padding: 10px 16px; border-radius: 6px; border: 1px solid var(--teal); background: var(--teal); color: #fff; cursor: pointer; text-decoration: none; }
@media (prefers-color-scheme: dark) { button, .btn { color: #06202a; } }
#run { width: 100%; margin-top: 18px; }
button:disabled { opacity: .55; cursor: progress; }
.btn { background: transparent; color: var(--teal-ink); }
.error { color: var(--red); min-height: 1.2em; margin: 8px 0 0; font-size: 13px; }

/* pipeline rail: the memorable element, a wire that lights up node by node */
.rail { list-style: none; margin: 22px 0 0; padding: 0 0 0 4px; position: relative; }
.rail::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: var(--line); }
.rail li { position: relative; padding: 5px 0 5px 32px; font-size: 14px; }
.rail li .node { position: absolute; left: 3px; top: 8px; width: 18px; height: 18px; border-radius: 50%; background: var(--panel); border: 2px solid var(--line); }
.rail li[data-status=running] .node { border-color: var(--teal); background: var(--teal); box-shadow: 0 0 0 4px color-mix(in srgb, var(--teal) 25%, transparent); }
.rail li[data-status=done] .node { border-color: var(--green); background: var(--green); }
.rail li[data-status=error] .node { border-color: var(--red); background: var(--red); }
.rail li[data-status=skipped] .node { border-style: dashed; }
.rail li[data-status=pending] { color: var(--muted); }
.rail .msg { display: block; font-size: 12.5px; color: var(--muted); }
.rail li[data-status=error] .msg { color: var(--red); }
@media (prefers-reduced-motion: no-preference) { .rail li[data-status=running] .node { animation: pulse 1.2s ease-in-out infinite; } @keyframes pulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--teal) 8%, transparent); } } }

.log { margin-top: 14px; max-height: 120px; overflow-y: auto; font: 12px/1.45 var(--mono); color: var(--muted); }
.history h2 { font-size: 15px; margin: 26px 0 8px; }
.history ul { list-style: none; margin: 0; padding: 0; }
.history li button { all: unset; display: block; width: 100%; padding: 6px 8px; border-radius: 5px; cursor: pointer; font-size: 13px; }
.history li button:hover, .history li button:focus-visible { background: var(--paper); }
.history .sub { color: var(--muted); font-size: 12px; }

.empty { max-width: 46ch; margin-top: 12vh; color: var(--muted); }
.empty h2 { color: var(--ink); margin-bottom: 8px; }
.bar { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.meta { color: var(--muted); margin: 4px 0 0; font-size: 13px; }
.tabs { display: flex; gap: 2px; flex-wrap: wrap; margin: 22px 0 16px; border-bottom: 1px solid var(--line); }
.tabs button { background: none; border: 0; border-bottom: 3px solid transparent; color: var(--muted); border-radius: 0; padding: 9px 14px; }
.tabs button[aria-selected=true] { color: var(--ink); border-bottom-color: var(--teal); }
.stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin: 4px 0 6px; }
.stats div { min-width: 90px; } .stats b { display: block; font: 600 22px var(--serif); } .stats span { font-size: 12.5px; color: var(--muted); }
.wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
th, td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-weight: 600; color: var(--muted); white-space: nowrap; background: var(--paper); }
tr:last-child td { border-bottom: 0; }
td.mono, .mono { font-family: var(--mono); font-size: 12.5px; word-break: break-all; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); }
.conf { font-family: var(--mono); font-size: 12.5px; } .conf.hi { color: var(--green); } .conf.mid { color: var(--amber); } .conf.lo { color: var(--red); }
.filters { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.filters select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }
.note { color: var(--muted); font-size: 13px; margin: 6px 0 10px; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 6px; padding: 12px; overflow: auto; max-height: 520px; font: 12.5px/1.5 var(--mono); white-space: pre-wrap; word-break: break-word; }
td details { border: 0; padding: 0; margin: 0; } td summary { font-weight: 400; color: var(--teal-ink); font-size: 12.5px; }

/* ---- run progress ---- */
.progress { margin-top: 20px; }
.progress-head { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; margin-bottom: 6px; }
.progress-head b { font: 600 15px var(--serif); font-variant-numeric: tabular-nums; }
.ptrack { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.pfill { height: 100%; width: 0; background: var(--teal); border-radius: 6px; transition: width .35s ease; }
.progress[data-state=done] .pfill { background: var(--green); }
@media (prefers-reduced-motion: reduce) { .pfill { transition: none; } }
#alerts { margin-top: 12px; display: grid; gap: 6px; }
.alert { font-size: 12.5px; line-height: 1.4; padding: 8px 10px; border-radius: 6px; border: 1px solid color-mix(in srgb, var(--amber) 45%, transparent); background: color-mix(in srgb, var(--amber) 12%, transparent); word-break: break-word; }
.rail li[data-status=warn] .node { border-color: var(--amber); background: var(--amber); }
.rail li[data-status=warn] .msg { color: var(--amber); }

/* ---- dashboard ---- */
.main { max-width: 1240px; }
.dash { display: grid; gap: 18px; }
.dash-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; }
.dash-head h2 { font-size: 30px; letter-spacing: -.01em; }
button.ghost { background: transparent; color: var(--teal-ink); border-color: var(--line); font-weight: 500; padding: 7px 12px; }
button.ghost:hover { border-color: var(--teal); }
.banner { padding: 10px 14px; border-radius: 6px; border: 1px solid; font-size: 14px; }
.banner ul { margin: 6px 0 0; padding-left: 18px; font-size: 13px; word-break: break-word; }
.banner.warn { border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 11%, transparent); }
.banner.info { border-color: var(--line); background: var(--panel); }
.banner.err { border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.kpis.small { margin-bottom: 14px; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi .kl { font-size: 12.5px; color: var(--muted); }
.kpi b { font: 600 30px/1.15 var(--serif); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.kpis.small .kpi b { font-size: 22px; }
.kpi em { font-style: normal; font-size: 12.5px; color: var(--muted); }
.kpi.bad b { color: var(--muted); }
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.cols.tight { gap: 24px; }
@media (max-width: 1000px) { .cols { grid-template-columns: 1fr; } .dash-head { flex-direction: column; align-items: flex-start; } }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 16px 18px 18px; min-width: 0; }
.card > header { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.card h3 { margin: 0; font-size: 17px; }
.card .sub { font-size: 12.5px; color: var(--muted); text-align: right; }
.mini { font-size: 12.5px; color: var(--muted); margin: 14px 0 6px; }
.muted { color: var(--muted); }
.bars { display: grid; gap: 8px; }
.brow { display: grid; grid-template-columns: minmax(90px, 34%) 1fr auto; align-items: center; gap: 10px; font-size: 13px; }
.blabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bval { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.track { height: 12px; background: var(--paper); border-radius: 4px; overflow: hidden; display: flex; }
.fill { height: 100%; background: var(--teal); border-radius: 4px; }
.fill.amber { background: var(--amber); } .fill.muted { background: var(--muted); } .fill.teal { background: var(--teal); }
.seg.a, .sw.a { background: var(--teal); } .seg.b, .sw.b { background: var(--amber); }
.seg { height: 100%; }
.split { display: flex; height: 16px; border-radius: 4px; overflow: hidden; background: var(--paper); margin-bottom: 8px; }
.legend { display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 12.5px; margin: 4px 0 10px; }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.donut-row { display: flex; align-items: center; gap: 20px; margin-bottom: 4px; }
.donut { width: 130px; height: 130px; flex: none; }
.donut .arc.base { stroke: var(--paper); } .donut .arc.a { stroke: var(--teal); } .donut .arc.b { stroke: var(--amber); }
.donut .dn { font: 600 20px var(--serif); fill: var(--ink); } .donut .dl { font-size: 9px; fill: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 12.5px var(--mono); padding: 2px 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); }
.wrap.plain { border: 0; background: none; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 8px; background: var(--muted); }
.dot.ok { background: var(--green); } .dot.warn { background: var(--amber); } .dot.fail { background: var(--red); }
.findings { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 10px; }
.findings li { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start; font-size: 13.5px; }
.findings .muted { font-size: 12.5px; word-break: break-word; }
.wrap.plain td { padding: 7px 8px; }

@media print {
  .side, .tabs, .bar .btn, button.ghost, .filters { display: none !important; }
  .shell { display: block; } .main { padding: 0; max-width: none; }
  html, body { background: #fff; color: #000; }
  .card, .kpi { break-inside: avoid; }
}
.actions { display: flex; gap: 8px; align-items: center; flex: none; }
.kpis { grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); }
.kpi.txt b { font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; padding-top: 6px; }
.wrap.plain td:first-child { white-space: nowrap; }
@media print { .actions { display: none !important; } }
.kpis .kpi.txt b, .kpis.small .kpi.txt b { font: 600 15px/1.3 var(--sans); overflow-wrap: anywhere; padding-top: 6px; }
.docbar { display: flex; gap: 12px; align-items: center; margin: 8px 0; }
.docpage { margin-bottom: 10px; } .pagehead { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 8px 0 4px; }
pre.tall { max-height: 640px; }
.bars.wide .brow { grid-template-columns: minmax(150px, 50%) 1fr auto; }
.blabel { cursor: default; }

/* ---- v5 VC views ---- */
.stackv { display: grid; gap: 16px; }
.stack { display: grid; gap: 6px; align-content: start; }
.tight { margin: 0; padding-left: 18px; display: grid; gap: 3px; }
.muted { color: var(--muted); } .small { font-size: 12.5px; } .bad-text { color: var(--red); font-size: 12.5px; }
.panel-body { padding: 4px 0; }
h4 { margin: 14px 0 6px; font-size: 14px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; border: 1px solid var(--line); white-space: nowrap; margin-right: 4px; }
.tag.ev { color: var(--green); border-color: color-mix(in srgb, var(--green) 55%, transparent); background: color-mix(in srgb, var(--green) 10%, transparent); }
.tag.hyp { color: var(--amber); border-color: color-mix(in srgb, var(--amber) 55%, transparent); background: color-mix(in srgb, var(--amber) 10%, transparent); }
.tag.bad { color: var(--red); border-color: color-mix(in srgb, var(--red) 55%, transparent); background: color-mix(in srgb, var(--red) 10%, transparent); }
.tag.val { color: var(--teal-ink); border-color: color-mix(in srgb, var(--teal) 50%, transparent); }
.tag.weak { color: var(--muted); }
.meter { display: inline-block; width: 56px; height: 7px; border-radius: 4px; background: var(--line); vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--teal); }
.opp { border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; margin-bottom: 12px; background: var(--paper); }
.opp > header { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; flex-wrap: wrap; }
.opp h4 { margin: 0; font-size: 15px; }
.opp .cols { margin: 8px 0; }
.pitch .cols { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1000px) { .pitch .cols { grid-template-columns: 1fr; } }
button.small { padding: 3px 10px; font-size: 12.5px; }

/* ---- phased pipeline views ---- */
.railphase { list-style: none; margin: 14px 0 2px -4px; padding: 0 0 0 32px; font: 600 11px var(--sans, system-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--teal); }
.rail li.railphase::before { display: none; }
#tabs { flex-wrap: wrap; align-items: center; }
.tabgroup { font: 600 10.5px var(--sans, system-ui); letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 0 6px 0 12px; border-left: 1px solid var(--line); margin-left: 4px; }
.tabgroup:first-child { border-left: 0; margin-left: 0; padding-left: 0; }
.psec { margin: 18px 0; } .psec h3 { margin-bottom: 6px; } .psub { margin-left: 8px; font: 400 12.5px var(--sans, system-ui); color: var(--muted); }
.idchip { font: 500 11.5px ui-monospace, Menlo, monospace; padding: 1px 6px; margin: 1px 2px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); color: inherit; cursor: default; }
.idchip.ev { cursor: pointer; color: var(--teal); border-color: color-mix(in srgb, var(--teal) 40%, var(--line)); } .idchip.ev:hover { background: color-mix(in srgb, var(--teal) 12%, var(--panel)); }
.chips { display: inline-flex; flex-wrap: wrap; align-items: center; }
code { font: 12px ui-monospace, Menlo, monospace; }
.flowstrip { display: flex; flex-wrap: wrap; gap: 6px 4px; align-items: stretch; margin: 2px 0 6px; }
.flowstep { position: relative; padding: 8px 26px 8px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel); min-width: 120px; }
.flowstep b { display: block; font: 600 20px var(--serif); } .flowstep span { font-size: 12.5px; color: var(--muted); display: block; } .flowstep code { font-size: 11px; color: var(--teal); }
.flowstep i { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); color: var(--muted); font-style: normal; }
.sbadge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; border: 1px solid var(--line); text-transform: lowercase; }
.sbadge.ok { color: var(--green); border-color: var(--green); } .sbadge.bad { color: var(--red); border-color: var(--red); } .sbadge.mid { color: var(--amber); border-color: var(--amber); }
.srcbox, .decision { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); margin: 8px 0; }
.srcbox > summary, .decision > summary { padding: 10px 14px; cursor: pointer; font-weight: 600; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.srcbody { padding: 4px 16px 14px; } .srcbody h4 { margin: 14px 0 4px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.rank { font: 600 14px var(--serif); color: var(--teal); }
.momcard { border: 1px solid var(--line); border-left-width: 4px; border-radius: 8px; padding: 10px 14px; margin: 8px 0; background: var(--panel); }
.momcard.ok { border-left-color: var(--green); } .momcard.mid { border-left-color: var(--amber); } .momcard.bad { border-left-color: var(--line); }
.momhead { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.minimum { margin: 6px 0 2px; font-size: 13.5px; }
ul.checks, ul.mini { list-style: none; margin: 4px 0; padding: 0 0 0 4px; } ul.mini li, ul.checks li { padding: 2px 0; font-size: 13px; }
.checks .tick { font-weight: 700; } .checks .met .tick { color: var(--green); } .checks .miss .tick { color: var(--red); }
.capchip { display: inline-block; margin: 2px 6px 2px 0; padding: 1px 9px; border-radius: 10px; border: 1px solid var(--line); font-size: 12.5px; } .capchip.dim { opacity: .55; }
.tracecap { border-left: 2px solid var(--line); padding: 4px 0 4px 12px; margin: 8px 0; } .tev { display: block; }

/* outputs */
.askrow input, .askrow select { padding: 6px 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; max-width: 190px; }
.card .grid label { margin: 8px 0 0; }
.card .grid select, .card .grid input { width: 100%; padding: 8px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
a.btn.ghost { background: transparent; color: var(--teal-ink); border-color: var(--line); text-decoration: none; font-weight: 500; }

.alert.info { border-color: color-mix(in srgb, var(--accent, #4a7) 40%, transparent); background: color-mix(in srgb, var(--accent, #4a7) 10%, transparent); }

/* ===== UI/UX brief theme (navy / orange / blue / purple / light grey; Raleway) ===== */
:root {
  --navy: #0a1f44; --orange: #f58220; --orange-ink: #b85a00; --blue: #2d5be3; --purple: #6b4fbb; --grey: #f2f4f8;
  --ink: #0a1f44; --muted: #55627a; --paper: #ffffff; --panel: var(--grey); --line: #d7dce6;
  --teal: var(--navy); --teal-ink: var(--navy); --amber: var(--orange-ink);
  --serif: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --sans: "Raleway", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --navy: #0a1f44; --ink: #e8edf7; --muted: #9fb0c9; --paper: #0b1730; --panel: #12254a; --line: #263a63; --teal: #7ea2ff; --teal-ink: #9db8ff; --amber: #ffa24d; --orange-ink: #ffa24d; --blue: #7ea2ff; --purple: #b3a0f0; }
  button, .btn { color: #0a1f44; }
}
button, .btn { background: var(--navy); border-color: var(--navy); }
@media (prefers-color-scheme: dark) { button, .btn { background: var(--teal); border-color: var(--teal); } }
.side { border-top: 4px solid var(--orange); }
h1 { font-size: 24px; font-weight: 700; }
.tabs button[aria-selected=true] { border-bottom-color: var(--orange); font-weight: 700; }
.fill, .pfill { background: var(--orange); }

/* workspaces W1-W7 */
.wsnav { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 4px; }
.wsbtn { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; font-weight: 600; font-size: 13px; background: var(--panel); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.wsbtn .wsid { font-weight: 700; color: var(--orange-ink); font-size: 12px; }
.wsbtn[aria-current=true] { background: var(--navy); color: #fff; border-color: var(--navy); }
.wsbtn[aria-current=true] .wsid { color: var(--orange); }
@media (prefers-color-scheme: dark) { .wsbtn[aria-current=true] { background: var(--orange); color: #0a1f44; border-color: var(--orange); } .wsbtn[aria-current=true] .wsid { color: #0a1f44; } }
.wsq { margin: 2px 0 0; font-size: 13px; color: var(--orange-ink); font-weight: 600; }
.tabs { margin-top: 10px; }
.journey { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.jstep { font-size: 12.5px; font-weight: 600; padding: 4px 10px; border-radius: 14px; background: transparent; color: var(--muted); border: 1px solid var(--line); }
.jstep.done { color: var(--ink); border-color: var(--orange); }
.jstep.next { color: var(--blue); border-color: var(--blue); }

/* field states: orange = evidenced / inferred / recommended / validated, blue = unknown / needs validation. Glyph + label, never colour alone. */
.fs { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 600; border: 1px solid; margin-left: 8px; white-space: nowrap; }
.fs i { font-style: normal; font-size: 11px; }
.fs-orange { color: var(--orange-ink); border-color: var(--orange); background: color-mix(in srgb, var(--orange) 12%, transparent); }
.fs-blue { color: var(--blue); border-color: var(--blue); background: color-mix(in srgb, var(--blue) 10%, transparent); }
.tbd { color: var(--blue); font-weight: 600; font-style: italic; }

/* first-class states */
.statebox { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--line); border-left: 4px solid var(--blue); background: var(--panel); font-size: 13.5px; }
.statebox b { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; color: var(--blue); }
.statebox .next { color: var(--muted); }
.statebox.st-blocked, .statebox.st-conflicting { border-left-color: var(--red); } .statebox.st-blocked b, .statebox.st-conflicting b { color: var(--red); }
.statebox.st-partial, .statebox.st-watchlist, .statebox.st-no-vc { border-left-color: var(--orange); } .statebox.st-partial b, .statebox.st-watchlist b, .statebox.st-no-vc b { color: var(--orange-ink); }
.alert.nonfinal { border-color: var(--orange); background: color-mix(in srgb, var(--orange) 14%, transparent); font-weight: 700; font-size: 13px; }

/* Deal Card */
.tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .tag.cat { color: var(--purple); border-color: var(--purple); }
.dcgrid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
@media (max-width: 1100px) { .dcgrid { grid-template-columns: 1fr; } }
.dcsec { border-top: 1px solid var(--line); padding: 10px 0 4px; } .dcsec:first-child { border-top: 0; }
.dcsec h4 { display: flex; flex-wrap: wrap; align-items: center; margin: 0 0 4px; font-size: 14.5px; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: 8px; border-radius: 50%; background: var(--orange); color: #0a1f44; font-size: 12px; font-weight: 700; }
.clarity { border-left: 1px solid var(--line); padding-left: 18px; } .clarity h4 { margin: 0 0 8px; } .cgroup { margin-bottom: 14px; } .cgroup h5 { margin: 0 0 4px; font-size: 13px; } .cgroup .psub { display: block; margin: 0; }
.citem { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 0; border-bottom: 1px dotted var(--line); } .citem .fs { margin-left: 0; }
.why-btn { margin-left: 6px; }

/* Why drawer */
#whyhost:empty { display: none; }
.why { position: fixed; top: 0; right: 0; bottom: 0; width: min(420px, 100vw); z-index: 50; overflow-y: auto; padding: 18px 20px; background: var(--paper); border-left: 4px solid var(--orange); box-shadow: -8px 0 28px rgba(10,31,68,.18); }
.why header { display: flex; justify-content: space-between; align-items: center; } .why h3 { margin: 0; }
.chain { margin: 16px 0; } .chain h4 { margin: 0 0 6px; } .chain ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.chain li { position: relative; padding: 6px 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); font-size: 13px; }
.chain li + li::before { content: "↓"; position: absolute; left: 12px; top: -15px; color: var(--orange-ink); font-size: 12px; }
.chain .ck { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }

/* Studio roles */
.role { display: inline-block; padding: 1px 9px; border-radius: 10px; font-size: 12px; font-weight: 700; border: 1px solid var(--line); white-space: nowrap; }
.role-primary { background: var(--navy); color: #fff; border-color: var(--navy); } .role-alternative { color: var(--blue); border-color: var(--blue); } .role-new-destination { color: var(--purple); border-color: var(--purple); }
.role-traffic-driver { color: var(--orange-ink); border-color: var(--orange); } .role-enhancement { color: var(--purple); border-color: var(--purple); } .role-rejected { color: var(--muted); text-decoration: line-through; }
.choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 14px; } @media (max-width: 1000px) { .choices { grid-template-columns: 1fr; } }
.choice { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; background: var(--paper); } .choice h5 { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; font-size: 13.5px; } .choice p { margin: 4px 0; }

/* Scenario */
.hier { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; margin: 4px 0 12px; } .hier > div { flex: 1 1 160px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); } .hier small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.hier .arrow { align-self: center; color: var(--orange-ink); font-weight: 700; }
.chipobj { display: inline-block; margin: 2px 4px 2px 0; padding: 1px 9px; border-radius: 10px; border: 1px solid var(--purple); color: var(--purple); font-size: 12.5px; font-weight: 600; }
.outcomes { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; } .outcome { padding: 3px 12px; border-radius: 14px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .outcome.on { color: #0a1f44; background: var(--orange); border-color: var(--orange); font-weight: 700; }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; } @media (max-width: 1100px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tile { border: 1px solid var(--line); border-top-width: 4px; border-radius: 8px; padding: 8px 10px; background: var(--paper); display: grid; gap: 2px; align-content: start; } .tile b { font-size: 13px; } .tile .tl { font-size: 12px; font-weight: 700; } .tile small { color: var(--muted); font-size: 11.5px; }
.t-ok { border-top-color: var(--green); } .t-mid { border-top-color: var(--orange); } .t-bad { border-top-color: var(--red); } .t-miss { border-top-color: var(--blue); } .t-na { border-top-color: var(--line); opacity: .8; }
.confirm { margin-top: 10px; padding: 10px 14px; border: 1px dashed var(--orange); border-radius: 8px; }

/* Media Plan sheet */
.planhead { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; } .planhead small, .ioparties small, .iototals small, .iosign small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.phasestrip { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; } .ph { padding: 2px 10px; border-radius: 12px; border: 1px solid var(--line); font-size: 12.5px; color: var(--muted); } .ph.on { color: var(--ink); border-color: var(--orange); font-weight: 600; }
.advblock { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; margin: 10px 0; } .advblock > summary { font-weight: 600; cursor: pointer; }
.sheetwrap { max-height: 70vh; overflow: auto; } .sheet thead th { position: sticky; top: 0; z-index: 2; background: var(--navy); color: #fff; } .sheet .sticky { position: sticky; left: 0; background: var(--panel); z-index: 1; } .sheet thead th.sticky { z-index: 3; background: var(--navy); }
.sheet tr.phase th { background: color-mix(in srgb, var(--orange) 18%, var(--panel)); color: var(--ink); position: static; text-align: left; } .sheet tr.phase.empty th { opacity: .6; } .sheet tr.phase .psub { margin-left: 10px; }
.sheet tr.child td:nth-child(2), .sheet tr.il-module-child td:nth-child(2), .sheet tr.il-extension-child td:nth-child(2) { padding-left: 22px; }
.sheet tr.pkg td, .sheet tr.tot td { background: color-mix(in srgb, var(--navy) 7%, var(--panel)); } .sheet td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* IO document */
.iopage { background: #fff; color: #14202b; border: 1px solid var(--line); border-radius: 6px; padding: 14px 18px; max-width: 980px; }
.iopage .tbd { color: #2d5be3; } .iopage small { color: #55627a; } .iopage .wrap, .iopage table { background: #fff; } .iopage th { background: #f2f4f8; color: #0a1f44; position: static; }
.iohead { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 2px solid var(--orange); font-size: 12.5px; } .iohead b { color: #b85a00; letter-spacing: .04em; }
.ioparties { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.iototals { display: flex; flex-wrap: wrap; gap: 20px; align-items: baseline; justify-content: flex-end; margin-top: 8px; } .iototals p { flex: 1 1 100%; text-align: right; }
.iosign { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px; } .iosign .disabled { display: block; padding: 14px 8px 4px; border-bottom: 1px dashed #9aa6bb; color: #7b879c; font-style: italic; font-size: 12.5px; }
.sheetcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin: 6px 0 12px; } .sheetcard { border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; background: var(--paper); } .sheetcard p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

/* footer + print */
.brandfoot { padding: 14px 36px; font-size: 11px; letter-spacing: .06em; color: var(--muted); border-top: 1px solid var(--line); }
@media print { .wsnav, .wsq, .journey, #whyhost, .brandfoot .x { display: none !important; } .sheetwrap { max-height: none; } .iopage { border: 0; } @page { size: landscape; } }
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }
a.btn, .btn { background: transparent; color: var(--navy); border-color: var(--navy); }
a.btn:hover { background: var(--navy); color: #fff; }
@media (prefers-color-scheme: dark) { a.btn, .btn { color: var(--teal-ink); border-color: var(--teal); background: transparent; } a.btn:hover { background: var(--teal); color: #0a1f44; } }
input.reason { min-width: 340px; flex: 1 1 340px; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); font: inherit; }

/* ---- S03 scan coverage ---- */
.cov { display: grid; gap: 14px; max-width: 1100px; }
.covhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; } .covhead h2 { font-size: 26px; }
.covclock { text-align: right; } .covclock b { display: block; font: 700 32px/1.1 var(--serif); font-variant-numeric: tabular-nums; } .covclock span, .covclock small { display: block; font-size: 12.5px; color: var(--muted); }
.covpct { display: flex; align-items: center; gap: 12px; } .covpct b { font: 700 18px var(--serif); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
.cbar { flex: 1; height: 12px; border-radius: 7px; background: var(--line); overflow: hidden; min-width: 60px; } .cfill { height: 100%; background: var(--orange); border-radius: 7px; transition: width .4s ease; } .cbar.bad .cfill { background: var(--red); }
.covprog .cbar { height: 8px; } .covprog small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; } .covprog .indet { font-style: italic; }
.covcounts { display: flex; flex-wrap: wrap; gap: 8px 28px; } .covcounts b { display: block; font: 600 20px var(--serif); font-variant-numeric: tabular-nums; } .covcounts span { font-size: 12.5px; color: var(--muted); }
.covtable td.tnum { font-variant-numeric: tabular-nums; white-space: nowrap; } .covtable td.note { font-size: 12.5px; color: var(--muted); margin: 0; }
.covphase th { background: color-mix(in srgb, var(--navy) 8%, var(--panel)); text-transform: uppercase; letter-spacing: .08em; font-size: 11px; color: var(--muted); }
.cst { display: inline-flex; align-items: center; gap: 5px; padding: 1px 9px; border-radius: 10px; font-size: 11.5px; font-weight: 700; border: 1px solid var(--line); color: var(--muted); } .cst i { font-style: normal; }
.cst-running { color: var(--blue); border-color: var(--blue); } .cst-done { color: var(--green); border-color: var(--green); } .cst-warn { color: var(--orange-ink); border-color: var(--orange); } .cst-error { color: var(--red); border-color: var(--red); }
.cr-running td { background: color-mix(in srgb, var(--blue) 7%, transparent); } .cr-pending { opacity: .65; }
@media (prefers-reduced-motion: no-preference) { .cst-running i { animation: blink 1.2s ease-in-out infinite; } @keyframes blink { 50% { opacity: .25; } } }
.covstack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--line); } .covstack .seg { height: 100%; background: var(--navy); border-right: 1px solid var(--paper); } .covstack .seg.cr-warn { background: var(--orange); } .covstack .seg.cr-error { background: var(--red); } .covstack .seg.cr-skipped { background: var(--muted); }
.empty.wide { max-width: 1100px; margin-top: 2vh; color: var(--ink); }

/* ===== calmer layout: fewer things on screen at once ===== */
.stepsbox { margin-top: 14px; } .stepsbox > summary { color: var(--muted); font-weight: 600; font-size: 12.5px; }
.history { margin-top: 18px; } .history h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); }
.lede { font-size: 13.5px; margin-bottom: 14px; }
.journey { align-items: center; gap: 12px; margin-top: 10px; padding: 8px 12px; background: var(--panel); border-radius: 8px; }
.jcount { font-size: 12.5px; color: var(--muted); } .jnext { background: var(--orange); border-color: var(--orange); color: #0a1f44; padding: 6px 14px; font-size: 13px; } .jdone { font-size: 13px; color: var(--green); font-weight: 600; }
.wsnav { gap: 2px; margin: 12px 0 0; border-bottom: 1px solid var(--line); }
.wsbtn { background: transparent; border: 0; border-bottom: 3px solid transparent; border-radius: 0; padding: 8px 12px; font-size: 14px; color: var(--muted); }
.wsbtn .wsid { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; border-radius: 50%; background: var(--panel); color: var(--muted); font-size: 11px; }
.wsbtn[aria-current=true], .wsbtn[aria-current=true]:hover { background: transparent; color: var(--ink); border-bottom-color: var(--orange); font-weight: 700; }
.wsbtn[aria-current=true] .wsid { background: var(--orange); color: #0a1f44; }
@media (prefers-color-scheme: dark) { .wsbtn[aria-current=true] { background: transparent; color: var(--ink); } }
.wsq { margin: 10px 0 0; font-size: 13.5px; color: var(--muted); font-weight: 400; } .wsq b { color: var(--ink); }
.tabs { margin: 8px 0 16px; border-bottom: 0; gap: 6px; align-items: center; }
.tabs button { padding: 5px 14px; border: 1px solid var(--line); border-radius: 16px; background: transparent; font-size: 13px; }
.tabs button[aria-selected=true] { background: var(--navy); color: #fff; border-color: var(--navy); }
@media (prefers-color-scheme: dark) { .tabs button[aria-selected=true] { background: var(--teal); color: #0a1f44; } }
.moremenu { position: relative; } .moremenu > summary { list-style: none; cursor: pointer; padding: 5px 14px; border: 1px dashed var(--line); border-radius: 16px; font-size: 13px; color: var(--muted); font-weight: 400; } .moremenu > summary::-webkit-details-marker { display: none; } .moremenu > summary::after { content: " ▾"; } .moremenu > summary.on { color: var(--ink); border-style: solid; border-color: var(--navy); font-weight: 600; }
.moremenu { border: 0; padding: 0; margin: 0; } .morelist { position: absolute; z-index: 5; top: 34px; left: 0; display: grid; gap: 2px; min-width: 210px; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); box-shadow: 0 8px 24px rgba(10,31,68,.14); }
.morelist button { border: 0; border-radius: 6px; text-align: left; } .morelist button:hover { background: var(--panel); }
.about { border: 0; padding: 0; margin: 0; } .about > summary { font-weight: 400; font-size: 12.5px; color: var(--muted); } .about p { margin: 6px 0 0; font-size: 13px; color: var(--muted); max-width: 80ch; }
.fold { margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; padding: 0; background: var(--paper); } .fold > summary { padding: 10px 14px; cursor: pointer; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; font-weight: 400; } .fold > summary b { font-weight: 700; } .fold[open] > summary { border-bottom: 1px solid var(--line); } .fold > :not(summary) { margin: 12px 14px 14px; }
.folds { display: grid; gap: 0; }
.dcsum { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; margin: 4px 0 12px; } .dcsum > div { padding: 8px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); } .dcsum small { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .dcsum b { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.card { padding: 18px 20px; } .stackv { gap: 14px; }
.stats { margin: 0; }
.dash .kpis { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }

/* =====================================================================================================
   Project Dashboard mock theme (reference: presales_project_dashboard_mock.html)
   Superseded by the BRAND TOKENS block at the end of this file.
   Later rules deliberately override the earlier brand layers; light only, as in the mock.
   ===================================================================================================== */
:root {
  color-scheme: light;
  --ink: #101B2D; --paper: #F6F4EE; --panel: #FCFBF7; --card: #FCFBF7; --line: #DAD6CB; --muted: #5B6572; --body: #46505E; --band: #ECE8DD;
  --teal: #1B6F80; --teal-ink: #1B6F80; --teal-bg: #DCEBEE;
  --amber: #E3A72F; --amber-ink: #9A5B00; --amber-bg: #F7E9C9;
  --green: #2F7D4F; --green-bg: #DCEFE3; --red: #A33A2E; --red-bg: #F4DCD8;
  --navy: #101B2D; --orange: #E3A72F; --orange-ink: #9A5B00; --blue: #9A5B00; --purple: #1B6F80; --grey: #ECE8DD;
  --serif: "DM Sans", Arial, system-ui, sans-serif; --sans: "IBM Plex Sans", Arial, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root { --ink: #101B2D; --paper: #F6F4EE; --panel: #FCFBF7; --line: #DAD6CB; --muted: #5B6572; --teal: #1B6F80; --teal-ink: #1B6F80; --amber: #E3A72F; --green: #2F7D4F; --red: #A33A2E; --navy: #101B2D; --orange: #E3A72F; --orange-ink: #9A5B00; --blue: #9A5B00; --purple: #1B6F80; }
  button, .btn { color: #fff; }
}
html, body { background: var(--paper); color: var(--ink); font: 15px/1.45 var(--sans); }
h1, h2, h3, h4, h5 { font-family: var(--serif); line-height: 1.15; }
h1 { font-size: 30px; font-weight: 700; letter-spacing: 0; }
a { color: var(--teal); }

/* layout: dark sidebar + main */
.app { display: grid; grid-template-columns: 260px minmax(0, 1fr); min-height: 100vh; }
.appnav { background: var(--ink); color: #F6F4EE; padding: 20px 14px; position: sticky; top: 0; height: 100vh; overflow: auto; }
.appnav .brand { font: 700 18px var(--serif); padding: 4px 10px 18px; }
.appnav .brand small { display: block; font: 400 12px var(--sans); color: #B8C4D4; margin-top: 2px; }
.nav-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: #8CA0B8; padding: 14px 10px 6px; overflow-wrap: anywhere; }
.appnav a, .navsoon { display: flex; gap: 10px; align-items: center; color: #C9D3E0; text-decoration: none; padding: 8px 10px; border-radius: 8px; font-size: 14px; cursor: pointer; }
.appnav a:hover { background: #1A2A44; }
.appnav a.active { background: var(--amber); color: var(--ink); font-weight: 600; }
.appnav .n { width: 20px; height: 20px; border-radius: 50%; background: #2E4062; color: #F6F4EE; font-size: 11px; display: grid; place-items: center; flex: none; }
.appnav a.active .n { background: var(--ink); color: var(--amber); }
.navsoon { cursor: default; opacity: .55; flex-wrap: wrap; } .navsoon em { flex-basis: 100%; margin-left: 30px; font-size: 11px; font-style: normal; color: #8CA0B8; margin-top: -4px; }
.main { padding: 28px 36px 60px; max-width: 1320px; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.top .sub, p.sub { color: var(--body); margin: 6px 0 0; max-width: 760px; font-size: 15px; text-align: left; }
.top .meta { margin: 6px 0 0; }
.brandfoot { padding: 14px 36px; margin-left: 260px; }
@media (max-width: 980px) { .app { grid-template-columns: 1fr; } .appnav { position: static; height: auto; } .main { padding: 20px 16px 48px; } .brandfoot { margin-left: 0; padding: 14px 16px; } }

/* grid, cards, labels */
.grid.g2, .grid.g3, .grid.g4 { gap: 16px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .g4 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 18px; }
.card.dark { background: var(--ink); color: #F6F4EE; border-color: var(--ink); }
.card.flush { padding: 0; overflow: auto; }
.lbl { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--teal); font-weight: 600; } .dark .lbl { color: var(--amber); }
.spread { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.mt { margin-top: 16px; } .mt2 { margin-top: 28px; } .big { font: 700 22px var(--serif); display: block; }
.sechead { font-size: 22px; margin: 28px 0 12px; }
.tiles12 .kpi { display: block; padding: 18px; cursor: pointer; border-radius: 14px; min-width: 0; }
.tiles12 .kpi .v { font: 700 34px/1.1 var(--serif); margin: 6px 0 4px; font-variant-numeric: tabular-nums; } .tiles12 .kpi .d { font-size: 13px; color: var(--body); } .tiles12 .kpi.dark .d { color: #C9D3E0; }
.kpi.link:hover { border-color: var(--teal); } .kpi.link.dark:hover { border-color: var(--amber); } .kpi.link:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.pubcard h3 { margin: 0; font-size: 18px; } .pubcard .legend { color: var(--body); margin: 6px 0 0; }
.pbar { height: 8px; background: var(--band); border-radius: 99px; overflow: hidden; } .pbar i { display: block; height: 100%; background: var(--teal); border-radius: 99px; } .pbar.amber i { background: var(--amber); }
.scanlist { margin-top: 12px; border: 0; padding: 0; } .scanlist ul { list-style: none; margin: 6px 0 0; padding: 0; } .scanlist li { padding: 6px 0; border-bottom: 1px solid var(--line); } .scanlist li:last-child { border: 0; }
button.linkbtn { all: unset; color: var(--teal); font-weight: 600; cursor: pointer; text-decoration: underline; } button.linkbtn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.scancard { margin-top: 28px; } .scancard #form { max-width: 760px; } .scancard #run { width: auto; margin-top: 18px; } .scancard .progress { max-width: 760px; }
#livehost:empty { display: none; } #livehost { margin-bottom: 18px; }

/* chips: Eligible / Watchlist / Ineligible / Draft ... (mock) */
.chip[class*="c-"] { display: inline-block; padding: 2px 10px; border-radius: 999px; font: 600 12px var(--sans); border: 0; background: var(--band); color: var(--body); }
.c-green { background: var(--green-bg) !important; color: var(--green) !important; } .c-amber { background: var(--amber-bg) !important; color: var(--amber-ink) !important; }
.c-red { background: var(--red-bg) !important; color: var(--red) !important; } .c-teal { background: var(--teal-bg) !important; color: var(--teal) !important; } .c-grey { background: var(--band) !important; color: var(--body) !important; }

/* buttons: teal primary, outline alt, amber call to action */
button, .btn { background: var(--teal); border: 0; border-radius: 10px; padding: 10px 16px; font: 600 14px var(--sans); color: #fff; }
button:hover:not(:disabled), .btn:hover { filter: brightness(1.08); }
a.btn, .btn.alt, button.btn.alt, a.btn.alt { background: transparent; color: var(--ink); border: 1px solid var(--line); }
a.btn:hover, .btn.alt:hover { background: var(--band); color: var(--ink); filter: none; }
.btn.amber, button.amber, .jnext { background: var(--amber); color: var(--ink); border: 0; }
button.ghost, a.btn.ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); font-weight: 600; padding: 7px 12px; } button.ghost:hover { border-color: var(--teal); background: transparent; }
button.small { padding: 3px 10px; }
.tabs button { background: transparent; color: var(--body); border: 1px solid var(--line); font-weight: 600; padding: 5px 14px; border-radius: 99px; }
.tabs button[aria-selected=true] { background: var(--teal); color: #fff; border-color: var(--teal); }
.tabs:empty { display: none; }
.moremenu > summary.on { border-color: var(--teal); color: var(--teal); }
.morelist button { color: var(--ink); background: transparent; border: 0; border-radius: 6px; } .morelist button:hover { background: var(--band); filter: none; }
.idchip.ev, .idchip { background: var(--panel); }

/* journey: the mock's step strip, clickable */
.journey { background: transparent; padding: 0; margin: 4px 0 18px; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; }
button.stepchip { font: 400 12px var(--sans); padding: 4px 10px; border-radius: 99px; background: var(--band); color: var(--body); border: 0; }
button.stepchip.done { background: var(--teal-bg); color: var(--teal); } button.stepchip.on { background: var(--teal); color: #fff; font-weight: 600; }
.journey .btn.amber { padding: 6px 14px; font-size: 13px; }

/* tables: ink header, banded rows */
table { font-size: 14px; } th { background: var(--ink); color: #F6F4EE; padding: 10px 12px; font-weight: 600; white-space: nowrap; }
td { padding: 10px 12px; border-bottom: 1px solid var(--line); }
:where(.wrap tbody tr:nth-child(even)) td { background: #F3F0E8; }
.wrap { border-radius: 12px; background: var(--card); } .wrap.plain { background: none; }
.card.flush .wrap { border: 0; border-radius: 14px; }
tr.clickrow { cursor: pointer; } tr.clickrow:hover td { background: var(--teal-bg); }
.wrap.plain th { background: transparent; color: var(--muted); }

/* field states and first-class states, in the mock's tones: teal = recommended/evidenced, amber = needs validation */
.fs-orange { color: var(--teal); border-color: var(--teal); background: var(--teal-bg); }
.fs-blue { color: var(--amber-ink); border-color: #E6CC8E; background: var(--amber-bg); }
.statebox { border-left-color: var(--amber); } .statebox b { color: var(--amber-ink); }
.statebox.st-blocked, .statebox.st-conflicting { border-left-color: var(--red); } .statebox.st-blocked b, .statebox.st-conflicting b { color: var(--red); }
.statebox.st-partial, .statebox.st-watchlist, .statebox.st-no-vc { border-left-color: var(--amber); }
.alert.nonfinal { background: var(--amber-bg); border-color: #E6CC8E; color: var(--amber-ink); }
.sbadge.ok { color: var(--green); border-color: var(--green); background: var(--green-bg); } .sbadge.bad { color: var(--red); border-color: var(--red); background: var(--red-bg); } .sbadge.mid { color: var(--amber-ink); border-color: #E6CC8E; background: var(--amber-bg); }
.num { background: var(--amber); color: var(--ink); }
.outcome.on { background: var(--amber); color: var(--ink); border-color: var(--amber); }
.fill, .pfill, .cfill { background: var(--teal); } .fill.amber { background: var(--amber); }
.pfill { background: var(--amber); } .progress[data-state=done] .pfill { background: var(--green); }
.sheet thead th, .sheet thead th.sticky { background: var(--ink); color: #fff; }
.sheet tr.phase th { background: var(--amber-bg); color: var(--ink); }
.iopage th { background: #ECE8DD; color: var(--ink); }
.why { border-left-color: var(--amber); }
.fold, .choice, .dcsum > div, .tile, .opp, .hier > div, .sheetcard { background: var(--paper); }
.fold { border-radius: 12px; }
.alert { background: var(--amber-bg); border-color: #E6CC8E; }
.role-primary { background: var(--ink); border-color: var(--ink); }
input[type=text], input[type=password], input[type=number], select, textarea { background: #fff; border-radius: 8px; font-family: var(--sans); }
textarea { width: 100%; padding: 9px 10px; border: 1px solid var(--line); font: inherit; }
.brandfoot { color: var(--muted); }
@media print { .appnav, #v-project, #journey, .brandfoot { display: none !important; } .app { display: block; } .main { max-width: none; padding: 0; } }

/* =====================================================================================================
   v10: clickable numbers + drawer, detail-page navigation, minimal screens
   ===================================================================================================== */
button.mnum, .mnum { background: none; border: 0; border-bottom: 1.5px dashed var(--teal); border-radius: 0; padding: 0 1px; color: var(--ink); font: 700 28px/1.1 var(--serif); cursor: pointer; }
button.mnum:hover { color: var(--teal); background: none; }
.card.kpi.dark button.mnum { color: #fff; border-bottom-color: var(--amber); }
#mdrawer:empty { display: none; }
.mdwrap { position: fixed; inset: 0; z-index: 50; }
.movl { position: absolute; inset: 0; background: rgba(16, 27, 45, .45); }
.mdrawer { position: absolute; right: 0; top: 0; bottom: 0; width: min(440px, 100%); background: var(--card); border-left: 1px solid var(--line); box-shadow: -8px 0 30px rgba(16, 27, 45, .18); display: flex; flex-direction: column; }
.mdrawer header { display: flex; justify-content: space-between; align-items: flex-start; padding: 18px 20px; border-bottom: 1px solid var(--line); }
.mdrawer header .big { font: 700 34px/1.1 var(--serif); }
.mdrawer header .lbl, .mdtitle { color: var(--muted); font-size: 12.5px; }
.mdrawer .x { background: none; border: 0; color: var(--ink); font-size: 26px; padding: 0 6px; line-height: 1; }
.mdbody { padding: 8px 20px; overflow: auto; flex: 1; }
.mdbody .li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.mdbody .li .s { color: var(--muted); font-size: 13px; }
.mdrawer footer { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.field { padding: 8px 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 2px; }
.field > b { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
ul.clean { list-style: none; margin: 8px 0; padding: 0; }
ul.clean li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.sidestack { display: flex; flex-direction: column; gap: 14px; }
.linkrow { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; margin: 14px 0; }
button.crumblink { background: none; border: 0; padding: 0; color: var(--teal); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
button.crumblink:hover { background: none; }
.backbtn { margin-bottom: 10px; }
.backbtn[hidden], #rMeta[hidden] { display: none; }
@media print { .backbtn, #mdrawer, .appnav { display: none !important; } }

/* =====================================================================================================
   BRAND TOKENS: Theorem brand guidelines. Navy and white carry the page (about half of the colour use).
   Orange is for key information and primary calls to action. Royal blue highlights information but is
   never a call to action. Blue gray is for backgrounds. Raleway for headings and body.
   ===================================================================================================== */
:root {
  --navy: #001936; --white: #FFFFFF; --orange: #FF8000; --royal: #2D5BEF; --bluegray: #ABBCD2;
  --gray: #7E8C9A; --medblue: #4762AD; --violet: #661DCB; --yellow: #FFD330; --black: #000000;
  --ink: var(--navy); --paper: var(--white); --panel: var(--white); --card: var(--white);
  --body: #2E4058; --muted: #5E6F82; --line: #D9E1EB; --band: #EEF2F7;
  --teal: var(--royal); --teal-ink: var(--royal); --teal-bg: #E3EAFC; --purple: var(--royal);
  --amber: var(--orange); --amber-ink: #8A4500; --amber-bg: #FFF2D6; --blue: #8A4500;
  --green: #1F7A4A; --green-bg: #DDF1E5; --red: #B3261E; --red-bg: #FBE1DE;
  --serif: "Raleway", Arial, system-ui, sans-serif; --sans: "Raleway", Arial, system-ui, sans-serif;
}
html, body { font-weight: 500; }
h1, h2, h3, h4, h5 { font-weight: 700; color: var(--navy); }
.app { background: var(--white); }
.appnav { background: var(--navy); }
.appnav a.active { background: var(--orange); color: var(--navy); }
.appnav a.active .n { background: var(--navy); color: var(--orange); }
/* primary call to action is orange (navy text keeps the contrast readable); royal blue is never a CTA */
button.btn:not(.alt):not(.ghost):not(.mnum), a.btn.primary, .btn.amber, button.amber, .jnext { background: var(--orange); color: var(--navy); }
button.btn:not(.alt):not(.ghost):not(.mnum):hover { filter: brightness(1.06); }
.tabs button[aria-selected=true], button.stepchip.on { background: var(--navy); color: var(--white); border-color: var(--navy); }
button.stepchip.done { background: var(--teal-bg); color: var(--royal); }
.fs-blue, .alert, .alert.nonfinal, .c-amber { border-color: var(--yellow); }
.c-amber { background: var(--amber-bg) !important; color: var(--amber-ink) !important; }
.alert.nonfinal { background: #FFF2D6; }
.sheet thead th, table thead th { background: var(--navy); }
.sheet tr.phase th { background: var(--band); }
.pbar i { background: var(--orange); }
.card.kpi.dark, .card.dark { background: var(--navy); }
.card.kpi.dark button.mnum { border-bottom-color: var(--orange); }
button.mnum { border-bottom-color: var(--royal); }
.brandfoot { color: var(--gray); }
.card.dark h1, .card.dark h2, .card.dark h3, .card.dark h4, .kpi.dark h3 { color: var(--white); }
.field .chip { align-self: flex-start; }

/* v10: definitions and details */
.tdef { margin-top: 8px; border: 0; padding: 0; } .tdef summary { font-size: 12.5px; font-weight: 600; color: var(--royal); cursor: pointer; }
.tdef p { font-size: 12.5px; line-height: 1.45; margin: 6px 0 0; color: var(--body); } .tdef .src { color: var(--muted); font-size: 12px; }
.card.kpi.dark .tdef p, .card.kpi.dark .tdef summary { color: #DDE6F3; } .card.kpi.dark .tdef .src { color: var(--bluegray); }
.mddef { margin: 0; padding: 12px 20px; border-bottom: 1px solid var(--line); background: var(--band); border-radius: 0; }
.mddef summary { font-weight: 700; cursor: pointer; } .mddef p { margin: 6px 0 0; font-size: 13.5px; }
details.li { padding: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; }
details.li > summary { list-style: none; cursor: pointer; padding: 10px 0; display: flex; flex-direction: column; gap: 2px; }
details.li > summary::-webkit-details-marker { display: none; }
details.li > summary::after { content: 'Details ▾'; font-size: 12px; font-weight: 600; color: var(--royal); }
details.li[open] > summary::after { content: 'Hide details ▴'; }
dl.dgrid { display: grid; grid-template-columns: 130px 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 13px; }
dl.dgrid dt { color: var(--muted); font-weight: 600; } dl.dgrid dd { margin: 0; overflow-wrap: anywhere; }
ul.dlist { margin: 0; padding-left: 16px; } ul.whylist { list-style: none; margin: 4px 0 0; padding: 0; } .wi { padding: 4px 0; }
.why .fold { margin-top: 12px; }
.why .chain li ul.whylist li, .why ul.whylist li.wi { border: 0; background: none; padding: 4px 0; box-shadow: none; display: block; }
.why .chain li ul.whylist li::after, .why .chain li ul.whylist li::before { content: none; display: none; }

/* ---- Creative Engine (v11) */
.creative .assetgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.creative .assetcard { border: 1px solid var(--line); border-radius: 10px; background: var(--panel); overflow: hidden; display: grid; }
.creative .assetcard.suggested { border-color: #FFD330; }
.creative .assetthumb { background: #001936; display: grid; place-items: center; min-height: 140px; max-height: 200px; overflow: hidden; }
.creative .assetthumb img, .creative .assetthumb video { max-width: 100%; max-height: 200px; display: block; }
.creative .assetthumb audio { width: 92%; }
.creative .assetmeta { padding: 10px 12px; display: grid; gap: 8px; }
.creative .assetmeta b { overflow-wrap: anywhere; }
.creative ul.tight { margin: 4px 0 0 16px; padding: 0; } .creative ul.tight li { margin: 1px 0; font-size: 13px; }
.creative tr.off { opacity: .5; }
.creative td .mono, .creative .mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.creative .previewbox { display: grid; gap: 8px; justify-items: start; }
.creative .previewbox input[type=range] { width: 280px; }
.creative details.beated { border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; background: var(--panel); }
.creative details.beated textarea, .creative details.beated input[type=text] { max-width: 100%; font: inherit; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); }
.creative details.beated select, .creative .assetmeta select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.creative .rcard { border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 10px; background: var(--panel); }
.creative .rvideo { max-width: 360px; max-height: 480px; border-radius: 8px; background: #000; }
.creative a.btn.off { opacity: .45; pointer-events: none; }
.nextbar { display: flex; gap: 10px; align-items: center; margin: 26px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); flex-wrap: wrap; } .nextbar:empty { display: none; } .nextgrow { flex: 1; }

/* ---- Creative Engine editor (v12) */
.creative .modeline { font-size: 12.5px; color: var(--body); border-left: 3px solid var(--orange, #FF8000); padding: 4px 10px; background: color-mix(in srgb, #FFD330 14%, transparent); border-radius: 4px; }
.creative .cstepper { display: flex; gap: 8px; flex-wrap: wrap; }
.creative button.cstep { background: var(--band); color: var(--body); border: 0; border-radius: 99px; padding: 8px 18px; font-weight: 600; font-size: 13.5px; }
.creative button.cstep.on { background: var(--navy, #001936); color: #fff; }
.creative .nextbar.inpage { margin-top: 8px; }
.creative .buildbar select { max-width: 560px; padding: 8px; border-radius: 6px; border: 1px solid var(--line); background: var(--panel); color: var(--ink); font: inherit; }
.creative .editor { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--panel); }
.creative .edtop { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--line); background: #F4F7FB; }
.creative .edtitle { display: flex; gap: 10px; align-items: center; } .creative .savestate { font-size: 12px; color: #2D5BEF; font-weight: 600; }
.creative .edset { display: flex; gap: 12px; } .creative .edset .field { margin: 0; }
.creative .edset select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); font: inherit; }
.creative .edtop input[type=text] { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); }
.creative .edbody { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; min-height: 620px; }
@media (max-width: 1100px) { .creative .edbody { grid-template-columns: 1fr; } }
.creative .edrail { border-right: 1px solid var(--line); padding: 12px; background: #FAFBFD; overflow: auto; max-height: 760px; }
.creative .railhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.creative .railfile { display: none; } .creative label.upl { cursor: pointer; background: #FF8000; border-color: #FF8000; color: #001936; }
.creative .railhint { font-size: 12px; color: var(--muted); margin: 4px 0 10px; }
.creative .railgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.creative button.railtile { position: relative; padding: 0; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: #001936; cursor: grab; text-align: left; display: block; }
.creative button.railtile:hover { border-color: #2D5BEF; box-shadow: 0 0 0 2px #2D5BEF33; } .creative button.railtile.suggested { border-color: #FFD330; }
.creative .railimg { width: 100%; height: 78px; object-fit: cover; display: block; } .creative .audiothumb { display: grid; place-items: center; height: 78px; color: #ABBCD2; font-size: 26px; background: #001936; }
.creative .railname { display: block; font-size: 10.5px; color: #fff; padding: 3px 6px; background: #001936; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.creative .usedbadge { position: absolute; top: 4px; right: 4px; background: #FFD330; color: #001936; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
.creative .edcenter { padding: 14px; display: grid; gap: 14px; align-content: start; background: #E9EEF5; min-width: 0; }
.creative .edstage { display: grid; justify-items: center; }
.creative .stagewrap { overflow: hidden; border-radius: 6px; box-shadow: 0 6px 24px #00193633; cursor: text; background: #000; }
.creative .previewbox { display: grid; gap: 8px; justify-items: center; } .creative .playbar { background: var(--panel); border-radius: 99px; padding: 4px 12px; margin: 0; }
.creative .playbar input[type=range] { width: 260px; }
.creative .edstriphead { display: flex; justify-content: space-between; margin-bottom: 6px; }
.creative .edtiles { display: flex; gap: 10px; overflow-x: auto; padding: 4px 2px 10px; }
.creative .edtile { flex: 0 0 128px; border: 2px solid transparent; border-radius: 8px; background: var(--panel); cursor: pointer; overflow: hidden; box-shadow: 0 1px 4px #00193622; }
.creative .edtile:hover { border-color: #ABBCD2; } .creative .edtile.on { border-color: #FF8000; } .creative .edtile.off { opacity: .45; }
.creative .edtilethumb { height: 62px; background: #001936; display: grid; place-items: center; overflow: hidden; } .creative .tileimg { width: 100%; height: 62px; object-fit: cover; }
.creative .tiletext { color: #FF8000; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.creative .edtilehead { font-size: 11.5px; font-weight: 600; padding: 4px 6px 0; height: 34px; overflow: hidden; }
.creative .edtilefoot { display: flex; gap: 6px; align-items: center; padding: 2px 6px 5px; font-size: 10.5px; color: var(--muted); } .creative .edtilefoot .eye { margin-left: auto; background: none; border: 0; padding: 0 2px; font-size: 13px; cursor: pointer; }
.creative .edprops { border-left: 1px solid var(--line); padding: 12px 14px; overflow: auto; max-height: 760px; display: grid; gap: 12px; align-content: start; }
.creative .propshead { display: flex; justify-content: space-between; align-items: baseline; }
.creative .propsec { display: grid; gap: 8px; border-top: 1px solid var(--line); padding-top: 10px; } .creative .propsec h4 { margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.creative .edprops input[type=text], .creative .edprops textarea, .creative .edprops select { width: 100%; box-sizing: border-box; padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: var(--panel); color: var(--ink); }
.creative .curmedia { display: flex; gap: 10px; align-items: center; } .creative .curimg { width: 72px; height: 54px; object-fit: cover; border-radius: 6px; background: #001936; }
.creative .pickgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .creative button.pick { padding: 0; border: 2px solid transparent; border-radius: 6px; overflow: hidden; background: #001936; } .creative button.pick.on { border-color: #FF8000; } .creative .pickimg { width: 100%; height: 44px; object-fit: cover; display: block; }
.creative .warnline { color: #B4540A; }
.creative .iobanner { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; padding: 10px 14px; border-radius: 8px; background: #FFF4E5; border: 1px solid #FF8000; font-size: 13.5px; } .creative .iobanner.soft { background: #F4F7FB; border-color: var(--line); }
.creative .propsin { display: grid; gap: 12px; align-content: start; }
.creative .edcenter { grid-template-columns: minmax(0, 1fr); } .creative .edtop input[type=text] { width: 190px; }

/* ---- v12.2: IO / plan tables. The numbered-circle .num badge was also hitting table cells (Rate, Units, Cost), and .mono broke "L01" into three lines. */
.sheet td.num, table td.num { display: table-cell; width: auto; height: auto; margin: 0; border-radius: 0; background: transparent; color: inherit; font-size: inherit; font-weight: inherit; text-align: right; white-space: nowrap; }
.sheet td.mono, .iopage td.mono { word-break: normal; white-space: nowrap; }
.ioparties b { overflow-wrap: anywhere; } .ioparties > div { min-width: 0; }

/* v13: one video per ad slot */
.modepanel { border: 1px solid var(--line, #ABBCD2); border-left: 4px solid #FF8000; border-radius: 10px; padding: 12px 14px; background: #fff; display: flex; flex-direction: column; gap: 8px; }
.modehead { display: flex; gap: 10px; align-items: baseline; justify-content: space-between; }
.modeopts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px; }
.modeopt { text-align: left; border: 1px solid #ABBCD2; background: #fff; border-radius: 8px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; font: inherit; color: inherit; }
.modeopt.on { border-color: #2D5BEF; box-shadow: 0 0 0 2px rgba(45,91,239,.18); background: #F4F7FF; }
.modeopt[disabled] { cursor: default; opacity: .8; }
.modename { font-weight: 700; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.vchips { display: flex; gap: 6px; flex-wrap: wrap; }
.vchip { border: 1px solid #ABBCD2; background: #fff; border-radius: 18px; padding: 5px 12px; cursor: pointer; display: inline-flex; gap: 8px; align-items: baseline; font: inherit; color: inherit; }
.vchip.on { background: #001936; color: #fff; border-color: #001936; } .vchip.on .note { color: #ABBCD2; }
.slotgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.slotcard { border: 1px solid #ABBCD2; border-radius: 10px; padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; background: #fff; }
.slothead { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* v13.1: in-situ preview */
.insitucard { border: 1px solid #ABBCD2; border-radius: 10px; padding: 10px 12px; background: #fff; display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.insitushots { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; }
.insitu-desktop { width: min(100%, 760px); border: 1px solid #ABBCD2; border-radius: 6px; }
.insitu-mobile { width: 230px; border: 1px solid #ABBCD2; border-radius: 14px; }

/* v14: continuous background + overlay scenes */
.bgbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border: 1px dashed #ABBCD2; border-radius: 10px; padding: 8px 12px; background: #fff; }
.bgbar select { max-width: 320px; }
.edstriphead { flex-wrap: wrap; gap: 8px; align-items: center; }

/* v17: internal delivery-platform notes on an ad slot card (narrow card: stacked, not a table) */
.platlist { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.platitem { border-top: 1px solid #ABBCD2; padding-top: 6px; font-size: 12.5px; }
.platitem:first-child { border-top: 0; padding-top: 0; }

/* v18: in-app live preview */
.fmtchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.fmtchip { border: 1px solid #ABBCD2; background: #fff; color: #001936; border-radius: 16px; padding: 5px 12px; font: 600 12px system-ui, sans-serif; cursor: pointer; }
.fmtchip.on { background: #FF8000; border-color: #FF8000; }
.fmtchip:disabled { opacity: .55; cursor: progress; }
.segbtn { display: inline-flex; gap: 4px; }
.segbtn .on { background: #001936; color: #fff; }
.pvstage { margin: 10px 0; border: 1px solid #ABBCD2; border-radius: 8px; overflow: hidden; background: #fff; }
.pvempty { padding: 36px 12px; text-align: center; border: 1px dashed #ABBCD2; border-radius: 8px; }
.pvshot { margin: 0; max-width: 300px; }
.pvshot img { width: 100%; border: 1px solid #ABBCD2; border-radius: 6px; }

/* Deal Card picker: one card at a time */
.dcpick{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch;position:sticky;top:0;z-index:5;background:var(--paper);padding:8px 0;border-bottom:1px solid var(--line)}
.dclbl{font:700 12px system-ui;color:#5b6b80;align-self:center;margin-right:4px}
.dctab{display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid #ABBCD2;background:#fff;color:#001936;border-radius:10px;padding:6px 12px;max-width:280px;cursor:pointer}
.dctab .dcn{font-weight:700;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.dctab .dcs{font-size:11px;color:#5b6b80}
.dctab.on{background:#001936;color:#fff;border-color:#001936}.dctab.on .dcs{color:#FFB366}

/* own storyboard: file cells, scene tile actions */
.railcell{display:flex;flex-direction:column;gap:4px}.railadd{font-size:11px;padding:2px 6px;align-self:stretch}
.edtilefoot .eye{margin-left:2px}
.placement{border:1px solid var(--line,#ABBCD2);border-radius:10px;padding:12px;background:#fff}
.briefgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:6px 18px;margin:8px 0}
.briefrow{display:flex;flex-direction:column;font-size:13px}.briefrow b{font-size:11px;text-transform:uppercase;color:#5b6b80}
.brief textarea{width:100%}

.creative .pickblock { border: 1px dashed #ABBCD2; border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; background: #f7f9fc; } .creative .pickchip { display: inline-flex; align-items: center; gap: 2px; border: 1px solid #ABBCD2; border-radius: 12px; padding: 1px 2px 1px 8px; background: #fff; font-size: 12px; }
.removedrow td { text-decoration: line-through; opacity: .55; } .removedrow td .note { text-decoration: none; }
.fitblock { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 6px 0 10px; } .fitblock p { margin: 4px 0; } .fitblock li span { margin-left: 8px; font-size: 11px; opacity: .7; }
.creative .tilegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; } .creative .tilepick { display: flex; flex-direction: column; gap: 4px; border: 1px solid #ABBCD2; border-radius: 8px; padding: 6px 8px; background: #fff; } .creative .tilepick.fixed { background: #eef3f9; } .creative .tilepick select { max-width: 100%; }
.creative .optlook { border: 1px dashed #ABBCD2; border-radius: 8px; padding: 4px 10px; background: #fff; } .creative .optlook > summary { cursor: pointer; font-size: 13px; color: #44566C; padding: 4px 0; }

/* Collapsible sections (public/collapse.js) */
.collbtn { background: none; border: 0; cursor: pointer; font-size: 14px; line-height: 1; padding: 0 8px 0 0; color: var(--muted); }
.collbtn:focus-visible { outline: 2px solid var(--accent, #1f6feb); outline-offset: 2px; }
.collhead { cursor: pointer; }
.cbody[hidden] { display: none; }
.card.collapsed > header { margin-bottom: 0; }
.card.collapsed { padding-bottom: 12px; }
.collbar { display: flex; gap: 8px; justify-content: flex-end; margin-bottom: 8px; }
@media print { .collbar, .collbtn { display: none; } .cbody[hidden] { display: block; } }

/* Why this scene: plain-language trace */
.whylist{margin:6px 0;display:grid;gap:4px}.whylist div{display:grid;grid-template-columns:150px 1fr;gap:8px}.whylist dt{font-weight:600;color:#33434E}.whylist dd{margin:0;overflow-wrap:anywhere}

/* v23.18: collapsible left panel */
.app { grid-template-columns: var(--navw, 260px) minmax(0, 1fr); transition: grid-template-columns .15s ease; }
.brandfoot { margin-left: var(--navw, 260px); }
.navtop { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; }
.navtop .brand { flex: 1; min-width: 0; }
.navtoggle { flex: none; background: #1A2A44; color: #F6F4EE; border: 1px solid #2E4062; border-radius: 8px; width: 32px; height: 32px; font: 700 16px var(--sans, system-ui); cursor: pointer; line-height: 1; }
.navtoggle:hover { background: #2E4062; }
.navtoggle:focus-visible { outline: 2px solid #FF8000; outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.app.navmini { --navw: 68px; }
.app.navmini .appnav { padding: 20px 8px; overflow-x: hidden; }
.app.navmini .navtop { justify-content: center; }
.app.navmini .brand, .app.navmini .nav-label { display: none; }
.app.navmini .appnav a, .app.navmini .navsoon { font-size: 0; justify-content: center; padding: 8px 0; }
.app.navmini .appnav .n { font-size: 11px; }
.app.navmini .navsoon em { display: none; }
@media (max-width: 980px) {
  .app, .app.navmini { grid-template-columns: 1fr; }
  .brandfoot, .app.navmini .brandfoot { margin-left: 0; }
  .app.navmini .appnav > *:not(.navtop) { display: none; }
  .app.navmini .brand { display: block; }
}
@media print { .navtoggle { display: none !important; } }

/* v23.18: wide tables and long lines stay inside their card (grid children could grow past the screen) */
.stackv > *, .main section, .main article, .cbody, .psec, .iopage { min-width: 0; }
.main { overflow-wrap: break-word; }
.stackv, .cbody { max-width: 100%; }
/* v23.21 advertiser videos, flight calendar */
.vlist .vrow { display: flex; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); align-items: flex-start; } .vlist .vrow img { border-radius: 6px; flex: none; background: var(--line); aspect-ratio: 16/9; object-fit: cover; }
.flightcal .fc-row, .flightcal .fc-axis { display: grid; grid-template-columns: minmax(120px, 28%) 1fr; gap: 10px; align-items: center; margin: 4px 0; } .flightcal .fc-label { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flightcal .fc-track { position: relative; display: block; height: 22px; background: color-mix(in srgb, var(--line) 50%, transparent); border-radius: 4px; } .flightcal .fc-axis .fc-track { background: none; height: 16px; } .flightcal .fc-month { position: absolute; font-size: 11px; color: var(--muted); }
.flightcal .fc-bar { position: absolute; top: 2px; bottom: 2px; background: var(--navy); color: #fff; border-radius: 4px; font-size: 11px; line-height: 18px; padding: 0 6px; overflow: hidden; white-space: nowrap; } .flightcal .fc-bar.primary { background: var(--orange); color: #1a1a1a; }
.flightcal .fc-phase { font-weight: 700; font-size: 12.5px; margin-top: 8px; color: var(--muted); }

.brand:has(img) { padding: 6px 10px 18px; margin-bottom: 4px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand img { display:block; margin:0 auto; width:110px; max-width:100%; height:auto; }

.collbar { display: none !important; }