/* Layout: a full-width 90-day build band runs across the top (it folds to one line, and hides once the
   build is done); below it the road-to-$40K pod and the business pod sit side by side. Everything stacks
   on phones. An owner's-manual guide sits below the dashboard.
   Two looks share one layout and one set of instruments, switched by data-look on <html>:
   CLEAN (default): Fulcrum's field-manual brand. Orange and ink on paper, Oswald figures, Montserrat text.
     Follows the viewer's light or dark setting.
   RETRO: a 1980s instrument cluster. One dark binnacle, seven-segment readouts, telltale lamps. Always dark. */
:root {
  /* clean · light */
  --void: #f7f3ec;      /* page ground: paper */
  --bezel: #f7f3ec;
  --bezel-2: #f7f3ec;
  --lens: #ffffff;      /* panels */
  --tile: #ffffff;      /* cards inside panels */
  --rule: #e7e0d5;
  --rule-2: #d6ccbe;
  --vfd: #ea6126;       /* Fulcrum orange: your number */
  --vfd-t: #ad4318;     /* orange for small text */
  --vfd-dim: #f5c3a4;   /* your Day-0 level */
  --ghost: #efe9df;     /* empty track */
  --glow: transparent;
  --ref: #1c1917;       /* ink: targets and today */
  --ref-dim: rgba(28,25,23,.3);
  --ok: #2f8a57; --ok-t: #23683f; --ok-ghost: rgba(47,138,87,.25);
  --warn: #d4951c; --warn-t: #8a5a00;
  --stop: #d2402f; --stop-t: #a62c1f;
  --info: #3f72b0; --info-t: #2d5788;
  --ink: #1c1917;
  --ink-2: #57503f;
  --muted: #6b6357;
  --faint: #a89c8e;
  --on-fill: #ffffff;
  --btn-bg: #ad4318; --btn-fg: #ffffff;   /* the one filled action button */
  --lift: 0 1px 2px rgba(28,25,23,.05), 0 10px 28px -18px rgba(28,25,23,.28);
  --f-fig: "Oswald", "Arial Narrow", sans-serif;
  --f-label: "Montserrat", system-ui, sans-serif;
  --f-body: "Montserrat", system-ui, sans-serif;
  --f-dot: "Montserrat", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --void: #161311; --bezel: #161311; --bezel-2: #161311; --lens: #201c19; --tile: #201c19; --rule: #332d28; --rule-2: #463e37;
    --vfd: #f0773f; --vfd-t: #f59a6c; --vfd-dim: #6b3820; --ghost: #2b2521; --ref: #f2ece3; --ref-dim: rgba(242,236,227,.3);
    --ok: #4cb87a; --ok-t: #74d39c; --ok-ghost: rgba(76,184,122,.3); --warn: #e3a93a; --warn-t: #f0c467;
    --stop: #ec6a5a; --stop-t: #f6907f; --info: #6d9bd8; --info-t: #94b8e8;
    --ink: #f3ede4; --ink-2: #d2c9bc; --muted: #a59b8e; --faint: #6c6259; --on-fill: #161311; --btn-bg: #f0773f; --btn-fg: #161311; --lift: 0 1px 0 rgba(255,255,255,.03);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --void: #161311; --bezel: #161311; --bezel-2: #161311; --lens: #201c19; --tile: #201c19; --rule: #332d28; --rule-2: #463e37;
  --vfd: #f0773f; --vfd-t: #f59a6c; --vfd-dim: #6b3820; --ghost: #2b2521; --ref: #f2ece3; --ref-dim: rgba(242,236,227,.3);
  --ok: #4cb87a; --ok-t: #74d39c; --ok-ghost: rgba(76,184,122,.3); --warn: #e3a93a; --warn-t: #f0c467;
  --stop: #ec6a5a; --stop-t: #f6907f; --info: #6d9bd8; --info-t: #94b8e8;
  --ink: #f3ede4; --ink-2: #d2c9bc; --muted: #a59b8e; --faint: #6c6259; --on-fill: #161311; --btn-bg: #f0773f; --btn-fg: #161311; --lift: 0 1px 0 rgba(255,255,255,.03);
  color-scheme: dark;
}
/* retro: always dark. Comes last so it outranks both dark blocks above. */
:root[data-look="retro"] {
  --void: #040506;      /* page ground */
  --bezel: #0b0d0f;     /* cluster face */
  --bezel-2: #13161a;
  --lens: #060708;      /* display windows */
  --tile: #0a0c0e;
  --rule: #1c2024;
  --vfd: #ff6a2b;       /* Fulcrum orange, lit: your number */
  --vfd-dim: rgba(255,106,43,.38);   /* your Day-0 level */
  --ghost: rgba(255,106,43,.075);    /* unlit segment */
  --glow: rgba(255,106,43,.5);
  --ref: #5cd6ff;       /* blue: targets and benchmarks */
  --ref-dim: rgba(92,214,255,.4);
  --ok: #45e07f;        /* green: built, done, on target */
  --ok-ghost: rgba(69,224,127,.2);
  --warn: #ffc02e;
  --stop: #ff4a3d;
  --info: #6b95ff;
  --ink: #e6dfd8;
  --ink-2: #bfb8b1;
  --muted: #8d857f;
  --faint: #4a4643;
  --rule-2: #2c3238;
  --vfd-t: #ff6a2b; --ok-t: #45e07f; --warn-t: #ffc02e; --stop-t: #ff4a3d; --info-t: #6b95ff;
  --on-fill: #040506;
  --btn-bg: #ff6a2b; --btn-fg: #040506;
  --lift: none;
  --f-fig: "Michroma", "Eurostile", "Arial Narrow", sans-serif;
  --f-label: "Michroma", "Eurostile", "Microgramma", "Arial Narrow", sans-serif;
  --f-body: "Saira Semi Condensed", "Arial Narrow", system-ui, sans-serif;
  --f-dot: "DotGothic16", "VT323", ui-monospace, monospace;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { background: var(--void); }
body { margin: 0; background: var(--void); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
.wrap { max-width: 1340px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); padding-block: 18px 64px; display: grid; gap: 18px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- prototype controls (not part of the client view) ---------- */
.proto { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; font-family: var(--f-label); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.proto-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ctl { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--bezel); }
.ctl button, .tog { font: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink-2); background: transparent; border: 0; border-radius: 999px; padding: 8px 13px; cursor: pointer; }
.ctl button:hover, .tog:hover { color: var(--ink); }
.ctl button[aria-pressed="true"] { background: var(--vfd); color: var(--void); }
.tog { border: 1px solid var(--rule); background: var(--bezel); display: inline-flex; align-items: center; gap: 8px; }
.tog[aria-pressed="true"] { border-color: var(--ref-dim); color: var(--ref); }
button:focus-visible, summary:focus-visible { outline: 2px solid var(--ref); outline-offset: 2px; }

/* ---------- the cluster ---------- */
.cluster { position: relative; display: grid; gap: 14px; padding: 16px; border-radius: 26px; border: 1px solid var(--rule);
  background: radial-gradient(120% 70% at 50% -10%, var(--bezel-2), var(--bezel) 62%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), inset 0 -30px 60px rgba(0,0,0,.5), 0 40px 90px -40px #000; }
.cluster::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(172deg, rgba(255,255,255,.04), transparent 26%); }

.head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding: 0 6px; }
.head-l, .head-r { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.brand { font-family: var(--f-label); font-size: 11px; letter-spacing: .38em; color: var(--vfd); text-shadow: 0 0 10px var(--glow); }
.client { font-family: var(--f-label); font-size: 11px; letter-spacing: .14em; color: var(--ink); }
.sample { font-family: var(--f-label); font-size: 8px; letter-spacing: .16em; color: var(--muted); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 6px; }
.stamp { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }

.btn { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; cursor: pointer; font-family: var(--f-label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-2); background: var(--tile); border: 1px solid var(--rule); border-radius: 999px; white-space: nowrap; }
.btn:hover { color: var(--ink); border-color: #2c3238; }
.btn svg { width: 9px; height: 9px; }
.chev { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* message center */
.msg { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 14px; text-align: left; cursor: pointer;
  color: var(--ink); font: inherit; border: 1px solid var(--rule); border-radius: 12px;
  background-color: var(--lens); background-image: radial-gradient(rgba(255,255,255,.035) .8px, transparent .9px); background-size: 3px 3px; }
.msg:hover { border-color: #2a3036; }
.msg-tag { flex: none; }
.msg-text { flex: 1; min-width: 0; font-family: var(--f-dot); font-size: 16px; line-height: 1.3; letter-spacing: .05em; text-transform: uppercase; color: var(--vfd); text-shadow: 0 0 8px var(--glow); }
.msg-n { flex: none; font-family: var(--f-label); font-size: 9px; letter-spacing: .12em; color: var(--muted); }

/* lamps (telltales) */
.lamp { --lc: var(--faint); display: inline-flex; align-items: center; gap: 7px; font-family: var(--f-label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--lc); white-space: nowrap; }
.lamp::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 0 2px rgba(0,0,0,.7), 0 0 10px var(--lc); }
.lamp.ok { --lc: var(--ok); } .lamp.warn { --lc: var(--warn); } .lamp.stop { --lc: var(--stop); } .lamp.info { --lc: var(--info); } .lamp.go { --lc: var(--vfd); }
.lamp.move { --lc: var(--warn); } .lamp.fyi { --lc: var(--info); } .lamp.hiring { --lc: var(--ok); }
.lamp.off { color: var(--muted); }
.lamp.off::before { box-shadow: 0 0 0 2px rgba(0,0,0,.7); }

/* pods */
.pods { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) {
  .pods { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: stretch; }
  #podBiz .tiles { flex: 1; grid-auto-rows: 1fr; }
}
.pod { container-type: inline-size; position: relative; min-width: 0; display: flex; flex-direction: column; gap: 16px; padding: 16px;
  border: 1px solid var(--rule); border-radius: 18px; background: var(--lens); box-shadow: inset 0 0 50px rgba(0,0,0,.65); }
.pod-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 11px; border-bottom: 1px solid var(--rule); }
.pod-title { margin: 0; font-family: var(--f-label); font-weight: 400; font-size: 10.5px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }
.lbl { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.sub { font-family: var(--f-label); font-size: 9.5px; letter-spacing: .06em; color: var(--muted); padding-bottom: 2px; white-space: nowrap; }
.chip { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .12em; color: var(--vfd); border: 1px solid rgba(255,106,43,.35); border-radius: 999px; padding: 4px 9px; white-space: nowrap; }

/* seven-segment readouts */
.ro { --h: 28px; display: inline-flex; align-items: flex-end; gap: 3px; }
.d7 { display: inline-flex; filter: drop-shadow(0 0 5px var(--gl, var(--glow))); }
.d7 svg { display: block; height: var(--h); width: auto; }
.d7 .on { fill: var(--c, var(--vfd)); }
.d7 .off { fill: var(--gc, var(--ghost)); }
.ro .u { font-family: var(--f-label); font-size: calc(var(--h) * .2 + 4px); letter-spacing: .06em; color: var(--c, var(--vfd)); padding-bottom: calc(var(--h) * .05); }
.ro .u.pre { align-self: flex-start; padding: 2px 0 0; }
.ro.na { --c: var(--faint); --gl: transparent; }

/* segmented bars */
.sbar { position: relative; display: flex; gap: 2px; height: 14px; }
.sbar .s { flex: 1; min-width: 0; border-radius: 1px; transform: skewX(-14deg); background: var(--ghost); }
.sbar .s.b { background: var(--vfd-dim); }
.sbar .s.n { background: var(--vfd); box-shadow: 0 0 6px var(--glow); }
.sbar .s.c { background: transparent; box-shadow: inset 0 0 0 1.5px var(--vfd); }
.mark { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--ref); box-shadow: 0 0 8px var(--ref); }
.band-mark { position: absolute; bottom: -6px; height: 2px; background: var(--ref); box-shadow: 0 0 6px var(--ref); }
.scale { position: relative; height: 12px; font-family: var(--f-label); font-size: 7.5px; letter-spacing: .1em; color: var(--muted); }
.scale span { position: absolute; top: 0; white-space: nowrap; }
.scale .r { color: var(--ref); }

/* ---- 90-day build band ---- */
.band-head-l { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.band-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.b-stats { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 34px; }
.stat { display: grid; gap: 5px; }
.stat .row { display: flex; align-items: flex-end; gap: 7px; }
.stat .ro { --h: 34px; }

.track { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 12px; padding-top: 26px; align-items: start; }
.tcell { position: relative; display: grid; gap: 7px; min-width: 0; }
.tsegs { display: flex; gap: 3px; height: 18px; }
.tsegs i { flex: 1; min-width: 0; border-radius: 1.5px; transform: skewX(-14deg); background: var(--ghost); }
.tsegs i.n { background: var(--vfd); box-shadow: 0 0 7px var(--glow); }
.tsegs i.cur { background: var(--vfd); box-shadow: 0 0 7px var(--glow); animation: blink 1.6s ease-in-out infinite; }
.tlab { font-family: var(--f-label); font-size: 7.5px; letter-spacing: .12em; color: var(--muted); }
.here { position: absolute; top: -8px; height: 34px; width: 2px; margin-left: -1px; background: var(--ref); box-shadow: 0 0 8px var(--ref); }
.here span { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); padding-bottom: 4px; font-family: var(--f-label); font-size: 8px; letter-spacing: .1em; color: var(--ref); white-space: nowrap; }
.here.l span { left: -1px; transform: none; }
.here.r span { left: auto; right: -1px; transform: none; }
.flag { display: inline-flex; align-items: center; gap: 7px; height: 18px; font-family: var(--f-label); font-size: 8px; letter-spacing: .12em; color: var(--muted); white-space: nowrap; }
.flag svg { height: 18px; width: auto; flex: none; }
.flag.done { color: var(--ok); filter: drop-shadow(0 0 5px rgba(69,224,127,.5)); }
.fl-p { stroke: currentColor; stroke-width: 1.4; }
.fl-o { fill: none; stroke: currentColor; stroke-width: 1; }
.fl-c { fill: currentColor; }

.board { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@container (min-width: 620px) { .board { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 1000px) {
  .board, .track:not(.mini) { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, .95fr); }
  .track:not(.mini) .tlab { display: none; }
}
.mcol { min-width: 0; border: 1px solid var(--rule); border-radius: 12px; background: var(--tile); }
.mcol.cur { border-color: rgba(255,106,43,.5); box-shadow: inset 0 0 30px rgba(255,106,43,.05); }
.mcol.built { border-color: rgba(69,224,127,.28); }
.mcol > summary { list-style: none; cursor: pointer; display: grid; gap: 5px; padding: 12px; border-radius: 12px; }
.mcol > summary::-webkit-details-marker { display: none; }
.mc-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mc-r { display: inline-flex; align-items: center; gap: 10px; }
.mc-r svg { width: 10px; height: 10px; color: var(--muted); transition: transform .2s; }
.mcol[open] .mc-r svg { transform: rotate(180deg); }
.mc-name { font-family: var(--f-label); font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink); }
.mc-days { font-family: var(--f-label); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mcol.cur .mc-days { color: var(--vfd); }
.mc-promise { font-size: 13.5px; line-height: 1.35; color: var(--ink-2); }
.mlist { list-style: none; margin: 0; padding: 0 12px 8px; display: grid; }
.msub { padding: 10px 0 5px; border-top: 1px solid var(--rule); font-family: var(--f-label); font-size: 7.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 3px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; line-height: 1.3; }
.mrow .mn { color: var(--ink-2); }
.mrow.active .mn, .mrow.late .mn { color: var(--ink); font-weight: 600; }
.mrow.up .mn { color: var(--muted); }
.mrow .md { font-family: var(--f-label); font-size: 7.5px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }
.mrow.active .md { color: var(--vfd); } .mrow.late .md { color: var(--warn); } .mrow.done .md { color: var(--ok); }
.mrow .why { grid-column: 2 / -1; font-size: 12.5px; line-height: 1.35; color: var(--muted); }

.ic { display: block; width: 14px; height: 14px; flex: none; }
.ic-k { fill: none; stroke: var(--void); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic-r { fill: none; stroke-width: 1.4; }
.ic.done .ic-f { fill: var(--ok); } .ic.done { filter: drop-shadow(0 0 4px rgba(69,224,127,.45)); }
.ic.active .ic-r, .ic.part .ic-r { stroke: var(--vfd); } .ic.active .ic-f, .ic.part .ic-f { fill: var(--vfd); }
.ic.active { animation: blink 1.6s ease-in-out infinite; }
.ic.late .ic-f { fill: var(--warn); } .ic.late { filter: drop-shadow(0 0 4px rgba(255,192,46,.45)); }
.ic.up .ic-r { stroke: var(--faint); }

.fin { min-width: 0; display: grid; gap: 12px; align-content: start; padding: 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--tile); }
.fin.done { border-color: rgba(69,224,127,.45); box-shadow: inset 0 0 30px rgba(69,224,127,.06); }
.sign { padding: 13px 8px; border-radius: 8px; text-align: center; font-family: var(--f-label); font-size: 14px; letter-spacing: .2em; white-space: nowrap;
  color: var(--ok-ghost); border: 1px dashed var(--ok-ghost); background: rgba(69,224,127,.02); }
.fin.done .sign { color: var(--ok); border: 1px solid rgba(69,224,127,.55); background: rgba(69,224,127,.07); text-shadow: 0 0 10px rgba(69,224,127,.6); }
.outs { list-style: none; margin: 0; padding: 0; display: grid; }
.outs li { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 9px; align-items: center; padding: 7px 0; border-top: 1px solid var(--rule); font-size: 14px; color: var(--ink-2); }
.outs li.up { color: var(--muted); }
.outs .v { font-family: var(--f-label); font-size: 8px; letter-spacing: .08em; color: var(--muted); }
.fin-foot { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--muted); }

/* folded to one line */
.band.mini { padding-block: 12px; }
.mini-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.mini-row .grow { flex: 1 1 200px; min-width: 0; }
.mini-stats { display: flex; align-items: flex-end; gap: 6px; }
.mini-stats .ro { --h: 20px; }
.mini-stats .lbl { padding-bottom: 3px; }
.mini-stats .gap { width: 10px; }
.mini-txt { margin: 0; font-size: 14px; color: var(--ink-2); }
.track.mini { padding-top: 0; gap: 4px; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; }
.track.mini .tsegs { height: 9px; gap: 2px; }
.track.mini .here { top: -4px; height: 17px; }
.track.mini .tlab, .track.mini .here span { display: none; }
.track.mini .flag, .track.mini .flag svg { height: 12px; }

/* ---- road to $40K ---- */
.road-body { display: grid; gap: 18px; }
@container (min-width: 640px) { .road-body { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.road-main { display: grid; gap: 14px; min-width: 0; }
.road-side { container-type: inline-size; display: grid; gap: 18px; align-content: start; min-width: 0; }
.gauge { container-type: inline-size; position: relative; width: 100%; max-width: 420px; margin-inline: auto; }
.gauge > svg { display: block; width: 100%; height: auto; }
.gseg { transition: fill .16s ease; transition-delay: calc(var(--i) * 11ms); }
.gseg.go { fill: var(--ghost); } .gseg.gb { fill: var(--vfd-dim); } .gseg.gn { fill: var(--vfd); }
.g-glow { filter: drop-shadow(0 0 5px var(--glow)); }
.ign-up .gseg.go, .ign-up .gseg.gb { fill: var(--vfd); }
.ign-down .gseg { transition-delay: calc((49 - var(--i)) * 11ms); }
.g-num { font-family: var(--f-label); font-size: 11px; fill: var(--muted); }
.g-num.ref, .g-tl { fill: var(--ref); }
.g-tl { font-family: var(--f-label); font-size: 6.5px; letter-spacing: .12em; }
.g-tick { stroke: var(--faint); stroke-width: 1.2; }
.g-target { stroke: var(--ref); stroke-width: 2.4; filter: drop-shadow(0 0 4px var(--ref)); }
.g-ceil { fill: none; stroke: var(--muted); stroke-width: 1.4; stroke-dasharray: 2 3; }
.g-ceil-t { font-family: var(--f-label); font-size: 6.5px; letter-spacing: .2em; fill: var(--muted); }
.g-center { position: absolute; left: 50%; top: 39%; transform: translateX(-50%); width: 56%; display: grid; justify-items: center; gap: 5px; text-align: center; font-size: clamp(30px, 11.5cqw, 50px); }
.g-center .ro { --h: 1em; }
.g-center .lbl { font-size: clamp(7px, 1.9cqw, 8.5px); }
.g-togo { font-family: var(--f-label); font-size: clamp(7.5px, 2.1cqw, 9.5px); letter-spacing: .12em; color: var(--ref); white-space: nowrap; }
.hist { width: 100%; max-width: 420px; margin-inline: auto; }
.hist svg { display: block; width: 100%; height: auto; }
.hn { fill: var(--vfd); } .hb { fill: var(--vfd-dim); } .ho { fill: var(--ghost); }
.h-target { stroke: var(--ref); stroke-width: 1; stroke-dasharray: 3 2; }
.h-t { font-family: var(--f-label); font-size: 6.5px; letter-spacing: .1em; fill: var(--ref); }
.h-d0 { stroke: var(--ink-2); stroke-width: .8; stroke-dasharray: 2 2; }
.h-d0t { font-family: var(--f-label); font-size: 6.5px; letter-spacing: .1em; fill: var(--ink-2); }
.h-ml { font-family: var(--f-label); font-size: 6.5px; fill: var(--muted); }
.h-ml.now { fill: var(--vfd); }
.levers { display: grid; gap: 18px; }
@container (min-width: 440px) { .levers { grid-template-columns: 1fr 1fr; gap: 22px; } }
.inst { display: grid; gap: 9px; align-content: start; min-width: 0; }
.inst-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 8px; }
.inst-top .ro { --h: 26px; }
.note { margin: 0; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.note strong { color: var(--ink-2); font-weight: 600; }
.slots { display: flex; gap: 7px; }
.slot { min-width: 0; display: grid; gap: 6px; }
.slot .lbl { font-size: 7.5px; letter-spacing: .1em; white-space: nowrap; }
.hire { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; align-items: center; padding-top: 14px; border-top: 1px solid var(--rule); }
.shift { width: 16px; height: 16px; border-radius: 50%; background: #16191c; box-shadow: 0 0 0 2px rgba(0,0,0,.8), inset 0 1px 2px rgba(255,255,255,.08); }
.shift.on { background: var(--ok); box-shadow: 0 0 0 2px rgba(0,0,0,.8), 0 0 14px var(--ok), 0 0 28px rgba(69,224,127,.4); animation: blink 1.1s ease-in-out infinite; }
.hire-h { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 10px; }
.hire-h .t { font-family: var(--f-label); font-size: 9.5px; letter-spacing: .18em; color: var(--ink); }
.hire-h .s { font-family: var(--f-label); font-size: 9px; letter-spacing: .16em; color: var(--muted); }
.hire-h .s.on { color: var(--ok); text-shadow: 0 0 8px rgba(69,224,127,.5); }
.conds { grid-column: 2; display: grid; gap: 5px; }
.cond { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); }
.cond .lamp { font-family: var(--f-body); font-size: 13px; letter-spacing: 0; text-transform: none; white-space: normal; }
.cond.met .lamp { color: var(--ink-2); }
.cond .v { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .1em; color: var(--muted); white-space: nowrap; }

/* ---- business ---- */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@container (min-width: 600px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* five tiles: the last one fills its row instead of sitting alone */
.tiles > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; }
@container (min-width: 600px) {
  .tiles > .tile:last-child:nth-child(odd) { grid-column: auto; }
  .tiles > .tile:nth-child(5):last-child { grid-column: span 2; }
}
.tile { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 11px 12px 12px; border: 1px solid var(--rule); border-radius: 12px; background: var(--tile); }
.tile-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 8px; }
.tile-top .lbl { color: var(--ink-2); }
.tag { font-family: var(--f-label); font-size: 7px; letter-spacing: .14em; color: var(--muted); }
.tile .ro { --h: 30px; }
.tile-foot { display: grid; gap: 5px; margin-top: auto; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.delta { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .08em; }
.delta.good { color: var(--ok); } .delta.bad { color: var(--stop); }
.wk { display: block; width: 100%; height: 22px; }
.wk .w { fill: var(--vfd); } .wk .wo { fill: var(--ghost); }

/* guide callouts */
.show-guide [data-g] { position: relative; outline: 1px dashed var(--ref-dim); outline-offset: 4px; border-radius: 8px; }
.show-guide [data-g]::before { content: attr(data-g); position: absolute; z-index: 4; top: -11px; left: -11px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--ref); color: var(--void); font: 8.5px/20px var(--f-label); text-align: center; box-shadow: 0 0 0 3px var(--lens); }

@keyframes blink { 50% { opacity: .38; } }

/* ---------- owner's manual ---------- */
.manual { display: grid; gap: 30px; padding-top: 18px; }
.man-head { display: grid; gap: 10px; max-width: 70ch; }
.man-head h2, .man-sec h3 { margin: 0; font-family: var(--f-label); font-weight: 400; text-transform: uppercase; letter-spacing: .14em; color: var(--ink); text-wrap: balance; }
.man-head h2 { font-size: clamp(16px, 2.4vw, 21px); line-height: 1.5; }
.man-head p { margin: 0; font-size: 16px; color: var(--ink-2); }
.key { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-2); }
.key span { display: inline-flex; align-items: center; gap: 8px; }
.key i { width: 16px; height: 9px; border-radius: 1px; transform: skewX(-14deg); display: inline-block; }
.guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px 28px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.guide li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-content: start; }
.num { width: 22px; height: 22px; border-radius: 50%; background: var(--ref); color: var(--void); font: 8.5px/22px var(--f-label); text-align: center; }
.guide h4 { margin: 0 0 2px; font-family: var(--f-label); font-weight: 400; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.guide .q { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: var(--vfd); }
.guide p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ink-2); }
.guide li.pod-group { display: block; }
.pod-group { grid-column: 1 / -1; font-family: var(--f-label); font-size: 9px; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); padding-top: 6px; border-top: 1px solid var(--rule); }
.man-cols { display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.man-sec { display: grid; gap: 14px; align-content: start; }
.man-sec h3 { font-size: 12px; }
.man-sec ul, .man-sec ol { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 68ch; }
.man-sec li strong { color: var(--ink); font-weight: 600; }

@media (max-width: 520px) {
  .msg-text { font-size: 14px; }
  .b-stats { gap: 12px 22px; }
  .stat .ro { --h: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .tsegs i.cur, .ic.active, .shift.on { animation: none; }
  .gseg, .mc-r svg, .cg-arc { transition: none; }
}

/* ---------- shared by both looks ---------- */
.brand { display: inline-flex; align-items: center; }
.wordmark { display: none; height: 15px; width: auto; fill: currentColor; }
.look { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--rule); border-radius: 999px; background: var(--tile); }
.look button { font-family: var(--f-label); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); background: transparent; border: 0; border-radius: 999px; padding: 6px 11px; cursor: pointer; }
.look button:hover { color: var(--ink); }
.look button[aria-pressed="true"] { background: var(--vfd); color: var(--void); }
.key .k-n { background: var(--vfd); box-shadow: 0 0 6px var(--glow); }
.key .k-b { background: var(--vfd-dim); }
.key .k-r { background: var(--ref); box-shadow: 0 0 6px var(--ref); }
.key .k-ok { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
.key .k-c { box-shadow: inset 0 0 0 1.5px var(--vfd); }
[data-look="retro"] .c-only, [data-look="clean"] .r-only { display: none; }
/* retro sets these in capitals; the script writes them in sentence case for the clean look */
[data-look="retro"] :is(.tlab, .here span, .flag, .md, .hire-h .t, .hire-h .s, .cond .v, .scale, .g-togo, .ro .u, .delta) { text-transform: uppercase; }

/* ---------- today: your next step + this morning ---------- */
.today { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .today { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: start; } }
.nx-main { display: grid; gap: 10px; padding: 14px; border: 1px solid var(--rule); border-radius: 12px; background: var(--tile); }
.nx-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
.nx-text { margin: 0; font-family: var(--f-dot); font-size: 17px; line-height: 1.35; letter-spacing: .04em; text-transform: uppercase; color: var(--vfd); text-shadow: 0 0 8px var(--glow); }
.nx-why { margin: 0; font-size: 13.5px; line-height: 1.4; color: var(--ink-2); }
.act { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 0; border-radius: 999px; cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--f-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; background: var(--btn-bg); color: var(--btn-fg); box-shadow: 0 0 14px var(--glow); justify-self: start; }
.act svg { width: 10px; height: 10px; flex: none; }
.act.sm { min-height: 34px; padding: 6px 12px; font-size: 8px; background: transparent; color: var(--vfd-t); border: 1px solid var(--rule-2); box-shadow: none; }
.act:focus-visible { outline: 2px solid var(--ref); outline-offset: 2px; }
.ans { display: grid; gap: 8px; }
.ans textarea, .ans input { width: 100%; padding: 10px 12px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--lens); color: var(--ink); font: 15px/1.4 var(--f-body); }
.ans textarea { min-height: 78px; resize: vertical; }
.ans textarea:focus-visible, .ans input:focus-visible { outline: 2px solid var(--ref); outline-offset: 1px; }
.ans .row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.ans .fine { font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.ans.compact { display: flex; flex: 1 1 100%; gap: 8px; align-items: center; }
.ans.compact input { flex: 1; min-width: 0; padding: 7px 10px; }
.sent { margin: 0; font-size: 14px; color: var(--ok-t); }
.nx-more { list-style: none; margin: 0; padding: 0; display: grid; }
.nx-more li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; padding: 10px 0; border-top: 1px solid var(--rule); }
.nx-more .t { flex: 1 1 200px; min-width: 0; font-size: 14px; line-height: 1.35; color: var(--ink-2); }
.nx-more .d { display: block; font-size: 12.5px; color: var(--muted); }
.nx-empty { margin: 0; font-size: 14px; color: var(--ink-2); }
.mo-sum { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink); max-width: 62ch; }
.mo-by { font-size: 12.5px; color: var(--muted); }
.mo-heads { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mo-heads li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.mo-counts { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 12px 10px; padding-top: 12px; border-top: 1px solid var(--rule); }
.mo-c { display: grid; gap: 5px; align-content: space-between; }   /* numbers line up even when a label wraps */
.mo-c .ro { --h: 20px; }

/* ---------- views: dashboard / reports ---------- */
.views { display: flex; gap: 2px; border-bottom: 1px solid var(--rule); }
.views [role="tab"] { padding: 10px 14px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: none; cursor: pointer; color: var(--muted);
  font-family: var(--f-label); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; }
.views [role="tab"]:hover { color: var(--ink); }
.views [role="tab"][aria-selected="true"] { color: var(--vfd); border-bottom-color: var(--vfd); }
.views [role="tab"]:focus-visible { outline: 2px solid var(--ref); outline-offset: -2px; }
.view { display: grid; gap: inherit; min-width: 0; }
/* this week's constraint */
.cs-body { display: grid; gap: 14px; }
@container (min-width: 760px) { .cs-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; gap: 28px; } }
.cs-main { display: grid; gap: 10px; justify-items: start; }
.cs-head { margin: 0; font-family: var(--f-dot); font-size: 19px; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: var(--vfd); text-shadow: 0 0 8px var(--glow); }
.cs-detail { margin: 0; display: grid; gap: 12px; }
.cs-detail div { display: grid; gap: 4px; }
.cs-detail dd { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--ink-2); }
/* reports */
.reports { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) { .reports { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
.rp-list { list-style: none; margin: 0; padding: 0; display: grid; }
.rp-list li { display: grid; gap: 6px; padding: 12px 0; border-top: 1px solid var(--rule); }
.rp-list li:first-child { padding-top: 0; border-top: 0; }
.rp-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.rp-date { font-family: var(--f-label); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.rp-by { font-size: 12.5px; color: var(--muted); }
.rp-text { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); max-width: 65ch; }
.rp-counts { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.mo-foot { display: flex; justify-content: flex-start; }

/* ======================= CLEAN LOOK ======================= */
/* figures */
.cn { display: inline-flex; align-items: baseline; font-family: var(--f-fig); font-weight: 500; font-size: 30px; line-height: 1; letter-spacing: .005em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.cn .cp { align-self: flex-start; font-size: .58em; margin: .08em .04em 0 0; }
.cn .ck { font-size: .62em; margin-left: .03em; }
.cn .cu { font-family: var(--f-label); font-weight: 600; font-size: 13px; letter-spacing: .01em; color: var(--muted); margin-left: .3em; }
.cn.na { color: var(--faint); }
/* continuous bars */
.cbar, .tbar { position: relative; height: 10px; border-radius: 5px; background: var(--ghost); overflow: hidden; }
.cbar i, .tbar i { position: absolute; top: 0; bottom: 0; }
.cbar .b { background: var(--vfd-dim); }
.cbar .n, .tbar i { background: var(--vfd); }
.tbar i { left: 0; border-radius: inherit; }
.cbar .c, [data-look="clean"] .key .k-c { background: repeating-linear-gradient(-45deg, var(--vfd) 0 2px, color-mix(in srgb, var(--vfd) 22%, transparent) 2px 5px); }
/* gauge + 12-month chart */
.cg-track, .cg-arc { fill: none; stroke-width: 20; }
.cg-track { stroke: var(--ghost); }
.cg-now { stroke: var(--vfd); }
.cg-base { stroke: var(--vfd-dim); }
.cg-arc { stroke-dasharray: 50 50; stroke-dashoffset: var(--to); transition: stroke-dashoffset .9s cubic-bezier(.2, .7, .2, 1); }
.c-pre .cg-arc { stroke-dashoffset: 50; transition: none; }
.cg-tick { stroke: var(--rule-2); stroke-width: 1.2; }
.cg-ceil { fill: none; stroke: var(--rule-2); stroke-width: 3; stroke-linecap: round; }
.cg-ceil-t { font: 600 8px var(--f-label); letter-spacing: .1em; fill: var(--muted); }
.cg-num { font: 600 12px var(--f-label); fill: var(--muted); }
.cg-num.ref { fill: var(--ink); font-weight: 700; }
.cg-target { stroke: var(--ref); stroke-width: 3; stroke-linecap: round; }
.cg-tl { font: 600 8px var(--f-label); letter-spacing: .1em; fill: var(--ink); }
.ch-n { fill: var(--vfd); } .ch-b { fill: var(--vfd-dim); }
.ch-base { stroke: var(--rule-2); stroke-width: 1; }
.ch-t { stroke: var(--ref-dim); stroke-width: 1; stroke-dasharray: 3 3; }
.ch-tl, .ch-d0t { font: 600 7px var(--f-label); fill: var(--ink-2); }
.ch-d0 { stroke: var(--ink-2); stroke-width: .8; stroke-dasharray: 2 2; }
.ch-ml { font: 600 7px var(--f-label); fill: var(--muted); }
.ch-ml.now { fill: var(--vfd-t); }

[data-look="clean"] .wordmark { display: block; }
[data-look="clean"] .brand-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-look="clean"] .proto { font: 500 12px/1.3 var(--f-label); letter-spacing: .01em; text-transform: none; }
[data-look="clean"] :is(.ctl, .tog, .look) { background: var(--lens); border-color: var(--rule-2); }
[data-look="clean"] :is(.ctl button, .tog, .look button) { font: 600 12px/1 var(--f-label); letter-spacing: .01em; text-transform: none; color: var(--ink-2); padding: 8px 12px; }
[data-look="clean"] .look button { padding: 7px 12px; }
[data-look="clean"] :is(.ctl, .look) button[aria-pressed="true"] { background: var(--ink); color: var(--void); }
[data-look="clean"] .tog[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); }

/* frame */
[data-look="clean"] .cluster { gap: 16px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
[data-look="clean"] .cluster::after { display: none; }
[data-look="clean"] .head { padding: 0 2px; }
[data-look="clean"] .brand { color: var(--vfd); text-shadow: none; }
[data-look="clean"] .client { font: 600 15px/1.2 var(--f-label); letter-spacing: 0; color: var(--ink); }
[data-look="clean"] .sample { font: 600 10.5px/1 var(--f-label); letter-spacing: .05em; color: var(--muted); border-color: var(--rule-2); border-radius: 999px; padding: 5px 9px; }
[data-look="clean"] .stamp { font: 500 12px/1.3 var(--f-label); letter-spacing: 0; text-transform: none; color: var(--muted); }
[data-look="clean"] .btn { font: 600 12px/1 var(--f-label); letter-spacing: .01em; text-transform: none; color: var(--ink-2); background: var(--lens); border-color: var(--rule-2); padding: 8px 12px; }
[data-look="clean"] .btn:hover { color: var(--ink); border-color: var(--ink-2); }
[data-look="clean"] .pod { gap: 18px; padding: 18px; border-color: var(--rule); border-radius: 14px; background: var(--lens); box-shadow: var(--lift); }
[data-look="clean"] .pod-head { padding-bottom: 12px; border-bottom-color: var(--rule); }
[data-look="clean"] .pod-title { font: 600 21px/1.1 var(--f-fig); letter-spacing: .02em; text-transform: uppercase; color: var(--ink); }
[data-look="clean"] .lbl { font: 600 11px/1.25 var(--f-label); letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
[data-look="clean"] .sub { font: 500 13px/1.2 var(--f-label); letter-spacing: 0; color: var(--muted); padding-bottom: 2px; }
[data-look="clean"] .chip { font: 600 12px/1 var(--f-label); letter-spacing: 0; color: var(--vfd-t); border: 0; background: color-mix(in srgb, var(--vfd) 12%, transparent); padding: 6px 10px; }
[data-look="clean"] .note { font-size: 13px; line-height: 1.45; }

/* message center */
[data-look="clean"] .msg { min-height: 54px; padding: 12px 16px; border-color: var(--rule); border-radius: 12px; background: var(--lens); background-image: none; box-shadow: var(--lift); }
[data-look="clean"] .msg:hover { border-color: var(--rule-2); }
[data-look="clean"] .msg-text { font: 500 15px/1.4 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); text-shadow: none; }
[data-look="clean"] .msg-n { font: 600 12px/1 var(--f-label); letter-spacing: 0; color: var(--muted); }

/* status pills */
[data-look="clean"] .lamp { --lt: var(--muted); gap: 6px; padding: 4px 9px 4px 8px; border-radius: 999px; font: 600 11.5px/1.2 var(--f-label); letter-spacing: .01em; text-transform: none; color: var(--lt); background: color-mix(in srgb, var(--lc) 13%, transparent); }
[data-look="clean"] .lamp::before { width: 7px; height: 7px; box-shadow: none; }
[data-look="clean"] :is(.lamp.ok, .lamp.hiring) { --lt: var(--ok-t); }
[data-look="clean"] :is(.lamp.warn, .lamp.move) { --lt: var(--warn-t); }
[data-look="clean"] .lamp.stop { --lt: var(--stop-t); }
[data-look="clean"] :is(.lamp.info, .lamp.fyi) { --lt: var(--info-t); }
[data-look="clean"] .lamp.go { --lt: var(--vfd-t); }
[data-look="clean"] .lamp.off { --lc: var(--faint); --lt: var(--muted); background: var(--ghost); }
[data-look="clean"] .lamp.off::before { box-shadow: none; }

/* 90-day build */
[data-look="clean"] .b-stats { gap: 14px 44px; }
[data-look="clean"] .stat { gap: 7px; }
[data-look="clean"] .stat .row { align-items: baseline; gap: 6px; }
[data-look="clean"] .stat .cn { font-size: 42px; }
[data-look="clean"] .track { gap: 6px; padding-top: 30px; }
[data-look="clean"] .tlab { font: 600 11px/1.2 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-look="clean"] .here { top: -9px; height: 28px; background: var(--ref); box-shadow: none; border-radius: 1px; }
[data-look="clean"] .here span { font: 600 11.5px/1 var(--f-label); letter-spacing: 0; color: var(--ink); padding-bottom: 6px; }
[data-look="clean"] .flag { height: 10px; font: 600 11.5px/1 var(--f-label); letter-spacing: .01em; color: var(--muted); }
[data-look="clean"] .flag svg { height: 15px; }
[data-look="clean"] .flag.done { color: var(--ok-t); filter: none; }
[data-look="clean"] .board { gap: 12px; align-items: start; }
[data-look="clean"] .mcol { border-color: var(--rule); border-radius: 12px; background: var(--tile); }
[data-look="clean"] .mcol.cur { border-color: var(--vfd); box-shadow: 0 0 0 1px var(--vfd); }
[data-look="clean"] .mcol.built { border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); }
[data-look="clean"] .mcol > summary { gap: 6px; padding: 14px; }
[data-look="clean"] .mc-name { font: 600 17px/1.1 var(--f-fig); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
[data-look="clean"] .mc-days { font: 600 11px/1.2 var(--f-label); letter-spacing: .05em; color: var(--muted); }
[data-look="clean"] .mcol.cur .mc-days { color: var(--vfd-t); }
[data-look="clean"] .mc-promise { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
[data-look="clean"] .mlist { padding: 0 14px 8px; }
[data-look="clean"] .msub { padding: 12px 0 6px; border-top-color: var(--rule); font: 600 10.5px/1.25 var(--f-label); letter-spacing: .06em; color: var(--muted); }
[data-look="clean"] .mrow { padding: 8px 0; border-top-color: var(--rule); }
[data-look="clean"] .mrow .md { font: 600 11.5px/1 var(--f-label); letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }
[data-look="clean"] .mrow.active .md { color: var(--vfd-t); }
[data-look="clean"] .mrow.late .md { color: var(--warn-t); }
[data-look="clean"] .mrow.done .md { color: var(--ok-t); }
[data-look="clean"] .mrow .why { font-size: 13px; }
[data-look="clean"] .ic { filter: none; animation: none; }
[data-look="clean"] .ic-k { stroke: var(--on-fill); }
[data-look="clean"] .ic.up .ic-r { stroke: var(--rule-2); }
[data-look="clean"] .fin { gap: 12px; padding: 14px; border-color: var(--rule); border-radius: 12px; background: var(--tile); }
[data-look="clean"] .fin.done { border-color: color-mix(in srgb, var(--ok) 50%, var(--rule)); box-shadow: none; }
[data-look="clean"] .sign { padding: 13px 8px; border: 1.5px dashed var(--rule-2); border-radius: 10px; background: transparent; font: 600 18px/1 var(--f-fig); letter-spacing: .08em; color: var(--faint); }
[data-look="clean"] .fin.done .sign { border: 1.5px solid var(--ok); background: color-mix(in srgb, var(--ok) 10%, transparent); color: var(--ok-t); text-shadow: none; }
[data-look="clean"] .outs li { border-top-color: var(--rule); color: var(--ink-2); }
[data-look="clean"] .outs li.up { color: var(--muted); }
[data-look="clean"] .outs .v { font: 600 12px/1 var(--f-label); letter-spacing: 0; color: var(--muted); }
[data-look="clean"] .fin-foot { font-size: 13px; }
[data-look="clean"] .band.mini { padding-block: 14px; }
[data-look="clean"] .mini-stats { align-items: baseline; }
[data-look="clean"] .mini-stats .cn { font-size: 22px; }
[data-look="clean"] .mini-stats .lbl { padding-bottom: 0; }
[data-look="clean"] .track.mini { padding-top: 0; gap: 4px; }
[data-look="clean"] .track.mini .tbar { height: 6px; }
[data-look="clean"] .track.mini .here { top: -4px; height: 14px; }
[data-look="clean"] .track.mini .flag { height: 6px; }
[data-look="clean"] .track.mini .flag svg { height: 12px; }

/* road to $40K */
[data-look="clean"] .g-center { top: 38%; width: 40%; gap: 6px; font-size: clamp(30px, 11cqw, 48px); }
[data-look="clean"] .g-center .cn { font-size: 1em; }
[data-look="clean"] .g-center .lbl { font-size: clamp(9px, 2.4cqw, 11px); line-height: 1.35; text-wrap: balance; }
[data-look="clean"] .g-togo { font: 600 clamp(11px, 2.9cqw, 13px)/1.2 var(--f-label); letter-spacing: 0; color: var(--ink-2); }
[data-look="clean"] .inst-top { align-items: baseline; }
[data-look="clean"] .inst-top .cn { font-size: 30px; }
[data-look="clean"] .mark { top: -4px; bottom: -4px; width: 2px; background: var(--ref); box-shadow: none; border-radius: 1px; }
[data-look="clean"] .band-mark { bottom: -6px; height: 3px; border-radius: 2px; background: var(--ref); box-shadow: none; }
[data-look="clean"] .scale { height: 14px; font: 600 11px/1 var(--f-label); letter-spacing: 0; color: var(--muted); }
[data-look="clean"] .scale .r { color: var(--ink); }
[data-look="clean"] .slots { gap: 8px; }
[data-look="clean"] .slot .lbl { font-size: 10.5px; letter-spacing: .04em; }
[data-look="clean"] .hire { padding-top: 16px; border-top-color: var(--rule); }
[data-look="clean"] .shift { width: 14px; height: 14px; background: var(--ghost); box-shadow: inset 0 0 0 1.5px var(--rule-2); }
[data-look="clean"] .shift.on { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 20%, transparent); animation: none; }
[data-look="clean"] .hire-h .t { font: 600 16px/1.1 var(--f-fig); letter-spacing: .03em; text-transform: uppercase; color: var(--ink); }
[data-look="clean"] .hire-h .s { font: 600 12px/1 var(--f-label); letter-spacing: 0; color: var(--muted); }
[data-look="clean"] .hire-h .s.on { color: var(--ok-t); text-shadow: none; }
[data-look="clean"] .cond .lamp { padding: 0; background: none; font: 500 13.5px/1.35 var(--f-body); color: var(--muted); }
[data-look="clean"] .cond.met .lamp { color: var(--ink); }
[data-look="clean"] .cond .v { font: 600 12px/1 var(--f-label); letter-spacing: 0; color: var(--muted); font-variant-numeric: tabular-nums; }

/* business */
[data-look="clean"] .tiles { gap: 12px; }
[data-look="clean"] .tile { gap: 10px; padding: 14px; border-color: var(--rule); border-radius: 12px; background: var(--tile); }
[data-look="clean"] .tile-top { flex-direction: column; align-items: flex-start; gap: 4px; }
[data-look="clean"] .tile-top .lbl { color: var(--ink-2); }
[data-look="clean"] .tag { font: 600 10px/1 var(--f-label); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
[data-look="clean"] .tile .cn { font-size: 36px; }
[data-look="clean"] .tile-foot { gap: 6px; font-size: 13px; }
[data-look="clean"] .tile-foot .lamp { justify-self: start; }
[data-look="clean"] .delta { font: 600 12px/1.25 var(--f-label); letter-spacing: 0; }
[data-look="clean"] .delta.good { color: var(--ok-t); }
[data-look="clean"] .delta.bad { color: var(--stop-t); }

/* guide + manual */
[data-look="clean"] .show-guide [data-g]::before { font: 700 10px/20px var(--f-label); box-shadow: 0 0 0 3px var(--void); }
[data-look="clean"] .man-head .lbl { color: var(--vfd-t); }
[data-look="clean"] .man-head h2 { font: 600 clamp(22px, 3vw, 30px)/1.15 var(--f-fig); letter-spacing: .015em; }
[data-look="clean"] .man-head p { line-height: 1.55; }
[data-look="clean"] .key i { transform: none; border-radius: 3px; height: 10px; }
[data-look="clean"] :is(.key .k-r, .key .k-ok, .key .k-c) { box-shadow: none; }
[data-look="clean"] .num { font: 700 10px/22px var(--f-label); }
[data-look="clean"] .guide h4 { font: 600 16px/1.2 var(--f-fig); letter-spacing: .03em; }
[data-look="clean"] .guide .q { font-size: 15px; color: var(--vfd-t); }
[data-look="clean"] .pod-group { padding-top: 10px; border-top-color: var(--rule-2); font: 600 11px/1.3 var(--f-label); letter-spacing: .08em; }
[data-look="clean"] .man-sec h3 { font: 600 18px/1.2 var(--f-fig); letter-spacing: .03em; }

/* clean: today */
[data-look="clean"] .nx-main { padding: 16px; border-color: color-mix(in srgb, var(--vfd) 40%, var(--rule)); background: color-mix(in srgb, var(--vfd) 5%, var(--tile)); }
[data-look="clean"] .nx-text { font: 600 19px/1.35 var(--f-body); letter-spacing: 0; text-transform: none; color: var(--ink); text-shadow: none; }
[data-look="clean"] .nx-why { font-size: 14px; }
[data-look="clean"] .act { font: 600 14px/1 var(--f-label); letter-spacing: .01em; text-transform: none; box-shadow: none; }
[data-look="clean"] .act.sm { font-size: 12.5px; }
[data-look="clean"] .mo-sum { font-size: 15.5px; }
[data-look="clean"] .mo-c .cn { font-size: 26px; }
[data-look="clean"] .views [role="tab"] { padding: 12px 14px; font: 600 14px/1 var(--f-label); letter-spacing: 0; text-transform: none; }
[data-look="clean"] .views [role="tab"][aria-selected="true"] { color: var(--ink); }
[data-look="clean"] .cs-head { font: 600 24px/1.2 var(--f-fig); letter-spacing: .01em; text-transform: none; color: var(--ink); text-shadow: none; }
[data-look="clean"] .rp-date { font: 600 14px/1.2 var(--f-label); letter-spacing: 0; text-transform: none; }