:root{--ink:#000;--body:#222;--muted:#4a4f57;--faint:#7a808a;--line:#E3E5EA;--wash:#F5F6F8;--sky:#05BDFF;--peri:#D0D9FE;--mauve:#C879FF;--peony:#E06C9F;--persian:#1D3DB7;--cyan:#34F8FF;
--mont:Montserrat,system-ui,sans-serif;--sans:Inter,system-ui,-apple-system,Segoe UI,sans-serif;--mono:'Roboto Mono',ui-monospace,monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--body);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--ink)}a:hover{color:var(--persian)}
img,svg{display:block}
h1,h2,h3,h4{font-family:var(--mont);color:var(--ink);margin:0;letter-spacing:-.02em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--persian);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding:0 40px}
.mono{font:500 11px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mk{font-weight:800;background:linear-gradient(transparent 62%,var(--sky) 62%,var(--sky) 92%,transparent 92%)}
.tag{display:inline-flex;align-items:center;height:26px;padding:0 9px;border-radius:6px;font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.tag.dark{background:#000;color:#fff}.tag.line{border:1.5px solid #000;color:#000}.tag.wash{background:var(--wash);color:var(--muted)}
.btn{display:inline-flex;align-items:center;gap:10px;height:50px;padding:0 22px;border-radius:12px;font:700 15px var(--mont);text-decoration:none;border:2px solid #000;cursor:pointer;transition:transform .12s,box-shadow .12s;white-space:nowrap;background:#fff;color:#000;box-shadow:0 5px 0 #000}
.btn:hover{transform:translateY(2px);box-shadow:0 3px 0 #000;color:#000}
.btn.p{background:#000;color:#fff;box-shadow:0 5px 0 var(--sky)}.btn.p:hover{color:#fff;box-shadow:0 3px 0 var(--sky)}
.btn.sm{height:40px;padding:0 16px;font-size:13px;border-radius:10px;box-shadow:0 4px 0 #000}.btn.p.sm{box-shadow:0 4px 0 var(--sky)}
.btn:active{transform:translateY(4px);box-shadow:0 1px 0 #000}
.chip{height:40px;padding:0 16px;border-radius:999px;border:1.5px solid #000;background:#fff;font:600 14px var(--sans);cursor:pointer;color:#000;white-space:nowrap}
.chip:hover{background:var(--wash)}.chip.on{background:#000;color:#fff}
.key{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;border:2px solid #000;border-radius:16px;background:#fff;box-shadow:0 6px 0 #000;cursor:pointer;transition:transform .12s,box-shadow .12s,background .12s;color:#000;text-decoration:none}
.key:hover{transform:translateY(2px);box-shadow:0 4px 0 #000;color:#000}
.key.on{transform:translateY(5px);box-shadow:0 1px 0 #000;background:var(--sky)}
.key .kl{font:700 12px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.kc{display:flex;align-items:center;justify-content:center;flex:none;border:2px solid #000;border-radius:14px;background:#fff;box-shadow:0 4px 0 #000}
.card{border:1px solid var(--line);border-radius:18px;background:#fff}
.card.b{border:2px solid #000}
.lift{transition:transform .15s,box-shadow .15s;text-decoration:none;color:#000;display:block}
.lift:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.08);color:#000}
.sec{padding:104px 0}.sec.tight{padding:72px 0}.sec.wash{background:var(--wash)}.sec.dark{background:#000;color:#fff}.sec.dark h2,.sec.dark h3{color:#fff}
.sh{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-bottom:44px;flex-wrap:wrap}
.sh h2{font-size:48px;font-weight:800;margin-top:14px;line-height:1.05}
.sh p{max-width:46ch;font-size:17px;color:var(--muted)}
.sec.dark .sh p{color:#D5D8DF}
.lede{font-size:20px;line-height:1.55;color:#222;max-width:52ch}
.grid{display:grid;gap:24px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g5{grid-template-columns:repeat(5,minmax(0,1fr))}
.stat{border-top:3px solid #000;padding-top:16px}.stat .v{font:800 44px/1 var(--mont);letter-spacing:-.03em;color:#000}.stat .l{margin-top:10px;font-size:15px;color:var(--muted);line-height:1.5}
.sec.dark .stat{border-color:var(--sky)}.sec.dark .stat .v{color:#fff}.sec.dark .stat .l{color:#D5D8DF}
.row{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:12px 14px;background:var(--wash);border-radius:10px}
.fld{height:48px;border:1.5px solid #D5D8DF;border-radius:10px;padding:0 14px;font:500 16px var(--sans);color:#000;background:#fff;width:100%}
.fld:focus{outline:2px solid #000;border-color:#000}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}
input[type=range]{accent-color:#000;width:100%;cursor:pointer}
.sec.dark input[type=range],.res input[type=range]{accent-color:var(--sky)}
.check{display:flex;gap:10px;align-items:flex-start}.check svg{flex:none;margin-top:3px}
@keyframes pop{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pop{animation:pop .45s ease both}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}.live{animation:blink 1.4s infinite}
@media (prefers-reduced-motion:reduce){.pop,.live{animation:none}html{scroll-behavior:auto}}

/* header + mega menu */
.hdr{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr .in{height:80px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nav{display:flex;align-items:center;gap:30px}
.nl{font:600 15px var(--sans);color:#000;text-decoration:none;background:none;border:0;padding:8px 0;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.nl:hover{color:var(--persian)}.nl.on{box-shadow:inset 0 -3px 0 var(--sky)}
.nl svg{transition:transform .2s}.nl[aria-expanded=true] svg{transform:rotate(180deg)}
.mega{position:absolute;left:0;right:0;top:80px;background:#fff;border-bottom:2px solid #000;box-shadow:0 30px 60px rgba(0,0,0,.12);display:none}
.mega.open{display:block;animation:pop .25s ease both}
.mega .mi{padding-top:28px;padding-bottom:36px}
.mtile{display:flex;flex-direction:column;gap:12px;padding:18px;border-radius:14px;text-decoration:none;color:#000;border:1px solid transparent}
.mtile:hover{background:var(--wash);border-color:var(--line);color:#000}
.mtile .t{font:700 17px var(--mont)}.mtile .d{font-size:14px;color:#222;line-height:1.5}.mtile .s{font-size:13px;font-weight:600;border-top:1px solid var(--line);padding-top:10px}
.logo{display:flex;align-items:flex-end;gap:12px;text-decoration:none}
.lk{position:relative;width:40px;height:40px;background:#fff;border:2px solid #000;border-radius:8px;box-shadow:0 3px 0 #000}
.lk i{position:absolute;left:6px;top:6px;width:7px;height:7px;border-radius:50%;background:var(--sky);border:1px solid #000}
.lk b{position:absolute;right:5px;bottom:3px;font:700 11px var(--mono);color:#000}
.ln{font:700 11px/1.25 var(--mono);letter-spacing:.16em;color:#000}
.ftr{background:#000;color:#fff;padding:72px 0 40px}
.ftr a{color:#fff;text-decoration:none}.ftr a:hover{color:var(--sky)}
.ftr .lk{box-shadow:0 3px 0 #fff}.ftr .ln{color:#fff}
.fcol{display:flex;flex-direction:column;gap:10px;font-size:15px}.fcol .mono{color:#8A8F98;margin-bottom:4px}
.crumb{display:flex;gap:10px;align-items:center;font-size:14px;flex-wrap:wrap}
.crumb span.sep{color:var(--faint)}

/* article */
.post{max-width:720px}
.post p{font-size:18px;line-height:1.75;margin:0 0 22px;color:#222}
.post h2{font-size:30px;margin:48px 0 16px;line-height:1.2}
.post ul,.post ol{font-size:18px;line-height:1.75;margin:0 0 22px;padding-left:24px}
.post li{margin:0 0 8px}
.post blockquote{margin:30px 0;padding:0 0 0 22px;border-left:4px solid #000;font:700 24px/1.35 var(--mont);color:#000}
.post .callout{background:var(--peri);border-left:4px solid var(--persian);padding:18px 22px;border-radius:0 12px 12px 0;margin:0 0 26px;font-size:17px;line-height:1.6}
.post .wbox{margin:36px 0 40px;width:min(1160px,calc(100vw - 80px))}
.forit{background:var(--wash);border-radius:16px;padding:26px 30px}
.forit ul{margin:10px 0 0;padding-left:20px;font-size:15px;line-height:1.65}

/* widgets */
.w{border:2px solid #000;border-radius:20px;background:#fff;padding:32px}
.w.flat{border:1px solid var(--line)}
.wh{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.res{background:#000;color:#fff;border-radius:20px;padding:36px;display:flex;flex-direction:column;gap:16px;box-shadow:0 8px 0 var(--sky)}
.res .big{font:800 64px/1 var(--mont);letter-spacing:-.03em}
.res .mid{font:700 26px/1.2 var(--mont);color:var(--sky)}
.res p{color:#D5D8DF;font-size:16px;line-height:1.6}
.res .mono{color:#8A8F98}
.res .btn{background:#fff;color:#000;border-color:#fff;box-shadow:0 5px 0 var(--sky);align-self:flex-start}
.bar{height:14px;background:var(--line);border-radius:5px;overflow:hidden}.bar i{display:block;height:100%;background:var(--sky);border-radius:5px;transition:width .4s}
.res .bar{background:#222}
.stepbtn{display:flex;align-items:center;gap:14px;min-height:64px;padding:0 20px;border-radius:14px;border:2px solid #000;background:#fff;box-shadow:0 5px 0 #000;cursor:pointer;text-align:left;width:100%;transition:all .12s}
.stepbtn.on{background:var(--sky);box-shadow:0 1px 0 #000;transform:translateY(4px)}
.stepbtn .n{font:700 13px var(--mono)}.stepbtn .t{font:700 18px var(--mont)}
.opt{min-height:54px;padding:10px 14px;border-radius:10px;text-align:left;cursor:pointer;font:500 14px var(--sans);color:#000;border:2px solid #000;background:#fff;box-shadow:0 4px 0 #000;transition:all .12s}
.opt.on{background:var(--sky);box-shadow:0 1px 0 #000;transform:translateY(3px)}
.acc button{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;background:none;border:0;border-bottom:1px solid var(--line);cursor:pointer;text-align:left;font:700 19px var(--mont);color:#000}
.acc .a{padding:0 0 22px;font-size:17px;line-height:1.6;color:#222;max-width:62ch;border-bottom:1px solid var(--line)}
.demo{border:1px solid #D5D8DF;border-radius:16px;overflow:hidden;background:#fff;box-shadow:0 30px 70px rgba(0,0,0,.10)}
.demo .chrome{height:44px;display:flex;align-items:center;gap:8px;padding:0 16px;border-bottom:1px solid var(--line);background:var(--wash)}
.demo .chrome i{width:10px;height:10px;border-radius:50%;background:#D5D8DF}
.demo .chrome .u{margin-left:10px;font:500 12px var(--mono);color:var(--muted)}
.demo .chrome .r{margin-left:auto}
.tiles{display:grid;gap:6px}
.tile{aspect-ratio:1;border-radius:4px;transition:all .5s}

@media (max-width:1000px){.g4,.g5{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}.nav{display:none}.sh h2{font-size:38px}.split{grid-template-columns:1fr!important}}
@media (max-width:640px){.wrap{padding:0 18px}.g2,.g3,.g4,.g5{grid-template-columns:1fr}.sec{padding:72px 0}.w{padding:22px}.res .big{font-size:48px}h1{font-size:44px!important}}

/* Brand layer, edition 2026.6. Loaded after the mockup CSS (site.css), before site-fixes.css.
   Source of truth: mockup/Floor16-Brand-Rules.md and the Core Brand Guidelines. */

/* ---------- tokens: seven colors, one blue; grays are functional tints only ---------- */
:root {
  --ink: #000; --body: #222; --muted: #555; --faint: #8A8F98; --line: #D5D8DF; --wash: #F4F5F8;
  --sky: #05BDFF; --peri: #D0D9FE; --mauve: #C879FF; --peony: #E06C9F; --persian: #1D3DB7;
  --grid: #E7ECFE;
  --cyan: var(--sky); /* Cyan Glow is retired; anything still asking for it gets Deep Sky */
}

/* ---------- logo: official artwork. Horizontal ≥160px wide, key icon ≥32px ---------- */
.hdr .in { height: 92px; }
.logo { align-items: center; }
.logo img { display: block; height: auto; }
/* the SVG carries ~7% clear space on each side; 208px shows the artwork at ~180px */
.logo .logo-full { width: 208px; margin-left: -15px; }
.logo .logo-key { display: none; width: 52px; margin-left: -9px; }
.ftr .logo .logo-full { width: 240px; margin-left: -17px; }

/* ---------- buttons are not keys: 40px, 10px corner, 2px outline, 4px solid base, Inter 700 ---------- */
.btn { height: 40px; padding: 0 18px; border-radius: 10px; font: 700 14px/1 var(--sans); box-shadow: 0 4px 0 #000; margin-bottom: 4px; gap: 8px; }
.btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.btn.p { box-shadow: 0 4px 0 var(--sky); }
.btn.p:hover { box-shadow: 0 2px 0 var(--sky); }
.btn.sm { height: 40px; padding: 0 16px; font-size: 14px; border-radius: 10px; }
.btn:active, .btn.p:active { transform: translateY(4px); box-shadow: none; }
.btn[style*="height:32px"] { height: 32px !important; font-size: 13px; padding: 0 12px; }

/* ---------- keys: never black; top 15.5% corner, base a twelfth of the key, label underneath ---------- */
.key { --k: 88px; display: inline-flex; flex-direction: column; align-items: center; gap: 10px; width: auto; height: auto;
  padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; color: #000; cursor: pointer; text-decoration: none; transform: none; }
.key:hover, .key.on { transform: none; box-shadow: none; background: none; }
.key .kt { display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: var(--k); height: var(--k);
  border: 2px solid #000; border-radius: calc(var(--k) * .155); background: #fff; box-shadow: 0 calc(var(--k) / 12) 0 #000;
  margin-bottom: calc(var(--k) / 12); transition: transform .12s, box-shadow .12s, background .12s; }
.key:hover .kt { transform: translateY(3px); box-shadow: 0 calc(var(--k) / 12 - 3px) 0 #000; }
.key.on .kt { background: var(--sky); }
.key:focus-visible { outline: none; }
.key:focus-visible .kt { outline: 3px solid var(--sky); outline-offset: 4px; }
.key .kl { font: 700 11px/16px var(--mono); letter-spacing: .16em; text-transform: uppercase; text-align: center; max-width: calc(var(--k) + 48px); }
.key .kn { font: 700 20px var(--mono); }
.key .kn-l { font: 800 40px var(--mont); letter-spacing: 0; }
.keyrow { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 24px 22px; }   /* equal gaps of a quarter key, at most six */
.kc { box-shadow: 0 var(--kb, 4px) 0 #000; }
.sec.dark .kc, .res .kc, .ftr .kc { box-shadow: 0 var(--kb, 4px) 0 #fff; }   /* on black the base turns white */

/* ---------- the highlight: Deep Sky bar 62% to 92%, behind bold black text, no padding ---------- */
.mk { font-weight: 800; color: #000; background: linear-gradient(transparent 62%, var(--sky) 62%, var(--sky) 92%, transparent 92%); padding: 0; }
.sec.dark .mk, .res .mk { background: none; color: var(--sky); }   /* on black: Deep Sky type instead */

/* ---------- no cards: blocks sit on a black rule instead of in a box ---------- */
.card, .card.b, .card.lift { border: 0; border-top: 2px solid #000; border-radius: 0; background: none; box-shadow: none; padding: 22px 0 0 !important; transform: none; }
.card.lift:hover { box-shadow: none; transform: none; }
.card.lift:hover h3, .card.lift:hover .t { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 6px; }
/* the call to action at the end of a scenario: a Periwinkle callout with a black rule */
.card.b.split { background: var(--peri); border-top: 0; border-left: 3px solid #000; padding: 32px 36px !important; box-shadow: none !important; }
.card[style*="box-shadow"] { box-shadow: none !important; }
.demo .card { border-top: 1px solid var(--line); padding: 12px 0 0 !important; }
.post .callout { background: var(--peri); border-left: 3px solid #000; border-radius: 0; }

/* interactive tools: an open working area under a rule, not a framed card */
.w { border: 0; border-top: 2px solid #000; border-radius: 0; padding: 28px 0 0; background: none; }
.w.flat { border-top: 1px solid var(--line); }
/* results stay a black section: square, no colored base */
.res { border-radius: 0; box-shadow: none; }
.res .mono { color: var(--faint); }

/* the demo window: a key-shaped frame, solid base, never a soft shadow */
.demo { border: 2px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; }
.demo .chrome i { background: var(--line); }

/* ---------- no tags or pills: labels are plain Roboto Mono ---------- */
.tag, .tag.dark, .tag.line, .tag.wash { height: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 11px/1.4 var(--mono); letter-spacing: .14em; }
.tag.dark { color: #000; font-weight: 700; }

/* ---------- views as words: current is bold with a 3px Deep Sky underline ---------- */
.chip { height: auto; padding: 6px 0; margin-right: 18px; border: 0; border-radius: 0; background: none; color: var(--muted); font: 500 15px var(--sans); }
.chip:hover { background: none; color: #000; }
.chip.on { background: none; color: #000; font-weight: 700; box-shadow: inset 0 -3px 0 var(--sky); }
.sec.dark .chip, .res .chip { color: var(--line); }
.sec.dark .chip.on, .res .chip.on { color: #fff; }
.stepbtn { min-height: 56px; padding: 0; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; box-shadow: none; transform: none; }
.stepbtn.on { background: none; box-shadow: none; transform: none; }
.stepbtn.on .t { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.nl:hover { color: #000; }
.mtile { border-radius: 0; }
.mtile:hover { background: none; border-color: transparent; }
.mtile:hover .t { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* ---------- charts: track form, square ends, outlined; fill 02 for the one that matters ---------- */
.bar { height: 14px; border: 1.5px solid #000; border-radius: 0; background: #fff; box-sizing: border-box; }
.bar i { border-radius: 0; background: var(--sky); }
.res .bar, .sec.dark .bar { border-color: #fff; background: #000; }
.tilebar { display: flex; gap: 4px; }
.tilebar i { flex: 1; height: 14px; border: 1.5px solid #000; background: #fff; }
.tilebar i.d { background: #000; }
.tilebar i.c { background: var(--sky); }

/* ---------- functional grays on black ---------- */
.sec.dark .sh p, .sec.dark .stat .l { color: var(--line); }
.mtile .d, .post p { color: var(--body); }
/* a calculator inside a post keeps its own type: the post's dark body text must not land on the black result panel */
.post .res p { color: #D5D8DF; font-size: 16px; line-height: 1.6; margin: 0; }

/* slider readouts: values in Roboto Mono (charts and values are mono, never Inter 900) */
.f b[data-o] { font: 700 15px var(--mono); }
select { border: 1.5px solid #000; border-radius: 6px; background: #fff; color: #000; }

/* ---------- chart: the Friday report, minutes per task (form A flat, fill 01; the longest in 02) ---------- */
.fchart { display: flex; flex-direction: column; gap: 10px; }
.fc-row { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) 64px; gap: 14px; align-items: center; }
.fc-l { font-size: 15px; }
.fc-t { height: 14px; }
.fc-t i { display: block; height: 100%; background: #000; }
.fc-t i.sky { background: var(--sky); }
.fc-v { font: 500 12px var(--mono); letter-spacing: .08em; text-transform: uppercase; text-align: right; color: #000; }
.fc-total { border-top: 2px solid #000; padding-top: 12px; margin-top: 6px; }
.fc-note { margin-top: 8px; font-size: 13px; color: var(--muted); }
.f16-bar { display: flex; gap: 2px; height: 22px; }
.f16-bar > i { display: block; }
.f16-legend { display: flex; gap: 16px; flex-wrap: wrap; font: 500 11px var(--mono); color: #000; letter-spacing: .04em; }
.f16-legend i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; }
@media (max-width: 560px) { .fc-row { grid-template-columns: 1fr 56px; } .fc-t { grid-column: 1 / -1; grid-row: 2; } }

/* ---------- service page extras ---------- */
.scorebars { display: flex; flex-direction: column; gap: 10px; margin-top: 16px; }
.scorebars .sb { display: grid; grid-template-columns: 200px 1fr 40px; gap: 14px; align-items: center; font-size: 14px; }
.scorebars .t { height: 14px; border: 1.5px solid #000; background: #fff; }
.scorebars .t i { display: block; height: 100%; background: #000; }
.scorebars .v { font: 500 12px var(--mono); text-align: right; color: #000; }
.flow4 { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.flow4 .f4 { flex: 1 1 180px; display: flex; flex-direction: column; gap: 6px; }
.flow4 .f4 p { font-size: 15px; color: var(--body); margin: 0; max-width: 28ch; }
.flow4 .f4a { padding-top: 34px; color: #000; }
ul.plain { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; font-size: 15px; }
.tablewrap { overflow-x: auto; }
.f16-table { width: 100%; border-collapse: collapse; font: 400 15px var(--sans); }
.f16-table th { background: var(--peri); color: #000; font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 10px 14px; }
.f16-table td { padding: 12px 14px; border-bottom: 1px solid var(--peri); vertical-align: top; }
@media (max-width: 760px) { .flow4 .f4a { display: none; } .scorebars .sb { grid-template-columns: 1fr 40px; } .scorebars .t { grid-column: 1 / -1; grid-row: 2; } }
.kp-panel .keyrow { margin-top: 0; }

/* ---------- About: what we build with ---------- */
.stackblk { border-top: 2px solid #000; padding-top: 22px; }
.stackblk .sbh { display: flex; gap: 16px; align-items: center; margin-bottom: 18px; }
.stackblk h3 { font-size: 24px; margin-top: 6px; }
.stackblk .apps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; }
.stackblk .apps.one { grid-template-columns: 1fr; }
.stackblk .apps > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.stackblk .apps b { font: 700 16px var(--mont); color: #000; }
.stackblk .apps span { font-size: 14px; color: var(--muted); line-height: 1.45; }
@media (max-width: 560px) { .stackblk .apps { grid-template-columns: 1fr; } }

/* ---------- scenario: the story, beat by beat on a black rule ---------- */
.story { list-style: none; margin: 0; padding: 0; border-left: 2px solid #000; }
.story > li { display: grid; grid-template-columns: 180px 1fr; gap: 32px; padding: 0 0 44px 32px; position: relative; }
.story > li::before { content: ''; position: absolute; left: -8px; top: 4px; width: 14px; height: 14px; background: #fff; border: 2px solid #000; }
.story > li.last::before { background: var(--sky); }
.story > li .mono { padding-top: 4px; color: #000; }
.story h3 { font-size: 26px; line-height: 1.2; margin: 0 0 10px; }
.story p { font-size: 17px; line-height: 1.7; color: var(--body); margin: 0; max-width: 68ch; }
.story .sn { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.story .sn b { font: 800 30px var(--mont); letter-spacing: -.02em; color: #000; }
.story .sn span { font-size: 14px; color: var(--muted); }
@media (max-width: 760px) { .story > li { grid-template-columns: 1fr; gap: 8px; padding-left: 24px; } }

/* ---------- live demo frame: a key-shaped window, solid base ---------- */
.liveframe { border: 2px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; overflow: hidden; background: #fff; }
.liveframe .lf-bar { height: 44px; display: flex; align-items: center; gap: 8px; padding: 0 16px; border-bottom: 2px solid #000; background: #fff; }
.liveframe .lf-bar i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid #000; }
.liveframe .lf-bar .u { margin-left: 10px; font: 500 12px var(--mono); color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liveframe .lf-full { margin-left: auto; font: 700 13px var(--sans); color: #000; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.liveframe .lf-full:hover { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.liveframe iframe { display: block; width: 100%; height: 780px; border: 0; background: #f3f2f1; }
/* things to try: a Periwinkle callout attached under the demo window, numbered steps in mono */
.lf-small { display: none; font-size: 13px; color: var(--muted); margin-top: 12px; }
@media (max-width: 760px) { .liveframe iframe { height: 620px; } .lf-small { display: block; } }

/* scenario facts: label and value share a baseline (mono 11px beside 15px text) */
dl.facts { align-items: baseline; }
dl.facts dt { line-height: 1.6; }

/* "For IT" on app pages: a ruled block, not a gray card */
.forit { background: none !important; border: 0; border-top: 2px solid #000; border-radius: 0 !important; padding: 22px 0 0 !important; }

/* Try it: tools grouped by service */
.trygroups { display: flex; flex-direction: column; gap: 32px; }

/* ---------- key-row header bands on cards (grid paper, white keys, one in Deep Sky) ---------- */
.kband { margin: -22px 0 4px; height: 132px; display: flex; align-items: center; justify-content: center;
  background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 24px 24px; background-position: -1px -1px; border-bottom: 1px solid var(--peri); }
.kband.big { height: 172px; }
/* Field Notes covers: full card width under the card's top rule, 3:1 */
.ncover { display: block; width: 100%; height: auto; aspect-ratio: 3 / 1; margin: -22px 0 4px; }
.ncover.post-cover { margin: 40px 0 0; border-top: 2px solid #000; }
.krow { display: flex; align-items: center; gap: 10px; }
.krow img { width: 52px; height: auto; display: block; }
.kband.big .krow img { width: 68px; }
.karr { position: relative; width: 22px; height: 2px; background: #000; flex: none; }
.karr::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 7px solid #000; border-right: 0; }
.sec.wash .kband { background-color: var(--wash); }
@media (max-width: 420px) { .krow img { width: 44px; } .karr { width: 14px; } }

/* Try it index: one grid of every tool, key on the left */
.trygrid { gap: 8px 48px; }
.tryrow { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 8px 20px; align-content: start; padding-bottom: 28px !important; }
.tryrow > .kc { grid-row: 1 / span 3; }
.tryrow > :not(.kc) { grid-column: 2; }
.tryrow .t { font: 700 20px/1.25 var(--mont); }
.tryrow .d { font-size: 15px; color: var(--muted); }
.tryrow .go { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; font-size: 15px; margin-top: 4px; }

/* Live demos on phones: a swipeable tour of close-ups instead of the desktop app (overrides.js liveFrame) */
.ltour { display: none; }
@media (max-width: 700px) {
  .liveframe.has-tour, .liveframe.has-tour ~ .lf-small, .lf-dk { display: none; }
  .ltour { display: block; margin-top: 4px; }
  .lt-track { display: flex; align-items: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 -18px; padding: 0 18px 6px; scroll-padding: 0 18px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lt-track::-webkit-scrollbar { display: none; }
  .lt-s { flex: 0 0 calc(100% - 26px); margin: 0; scroll-snap-align: start; }
  .lt-s img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
  .lt-s figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: #222; }
  .lt-s figcaption .mono { display: block; margin-bottom: 6px; }
  .lt-go { margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
  .lt-go > span { font-size: 13px; color: var(--muted); }
}

/* Fixes over the mockup CSS. */

/* Phones: the header row (logo + Book the Scan + Menu) was 440px wide at 375px.
   Below 520px the logo drops to the key icon alone (approved version, min 32px). */
@media (max-width: 520px) {
  .hdr .in { gap: 12px; }
  .hdr .logo .logo-full { display: none; }
  .hdr .logo .logo-key { display: block; }
  .hdr .in { height: 76px; }
}

/* Footer: five columns set inline in the mockup crushed to 7px each on phones. */
@media (max-width: 900px) {
  .ftr .wrap > .grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 32px 24px !important; }
  .ftr .wrap > .grid > :first-child { grid-column: 1 / -1; }
}

/* Grid items default to min-width:auto, so a wide child (a calculator row) pushed
   single-column grids past the screen on phones. */
.grid > * { min-width: 0; }
.split > * { min-width: 0; }

/* Phones: long button labels wrap instead of running off the edge. */
@media (max-width: 520px) {
  .btn { max-width: 100%; white-space: normal; height: auto; min-height: 44px; padding-top: 10px; padding-bottom: 10px; text-align: center; line-height: 1.25; }
}

/* Safety net for sub-pixel overflow. clip (not hidden) keeps the sticky header working. */
html, body { overflow-x: clip; }

/* Small phones: long single words in section headlines ("recommendation.") */
@media (max-width: 420px) {
  .sh h2 { font-size: 31px; }
}
h1, h2 { overflow-wrap: break-word; }

/* The menu sits right under the header at any header height. */
.mega { top: 100%; }

/* Phones and tablets (the Menu button): the open menu scrolls on its own and the page
   behind it stays put. Before, the menu was taller than the screen and pinned to the sticky
   header, so a swipe moved the page and the lower links could not be reached. */
@media (max-width: 1000px) {
  /* lock the page on <html> only: hidden on <body> too would make body the scroller and unpin the sticky header */
  html.menu-open { overflow: hidden; }
  .mega.open { max-height: calc(100vh - 100px); max-height: calc(100dvh - 100%); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .mega .mi { display: flex; flex-direction: column; padding-top: 12px; padding-bottom: 24px; }
  /* page links first, as a list with full-size tap targets */
  .mega .mlinks { order: -1; flex-direction: column; gap: 0 !important; margin: 0 0 16px !important; padding: 0 0 12px !important; border-top: 0 !important; border-bottom: 1px solid var(--line); }
  .mega .mlinks .nl { display: block; padding: 12px 0; font-size: 18px; }
  /* the five services as compact rows: key + name, no description or stat */
  .mega .grid.g5 { grid-template-columns: 1fr; gap: 0 !important; }
  .mega .mtile { flex-direction: row; align-items: center; gap: 14px; padding: 8px 0; }
  .mega .mtile .kc { width: 40px !important; height: 40px !important; flex: none; }
  .mega .mtile .t { font-size: 16px; margin-top: 2px !important; }
  .mega .mtile .d, .mega .mtile .s { display: none; }
}

/* About page and the home pull quote (exec build, src/data/zzz-exec.js). Prefixes ab- and hm-. */
.sec.ab-sec { padding-top: 56px; padding-bottom: 56px; }
.ab-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 48px; align-items: start; }
.ab-two > .mono { padding-top: 10px; border-top: 2px solid #000; }
.ab-letter { border-top: 2px solid #000; padding-top: 22px; }
.ab-letter p { margin: 0 0 18px; max-width: 62ch; font-size: 20px; line-height: 1.65; color: var(--body); }
.ab-letter p:first-child { color: #000; }
.ab-letter .ab-sig { margin-top: 26px; font: italic 600 17px var(--sans); color: #000; }
.ab-q { margin: 0; border: 2px solid #000; border-radius: 14px; box-shadow: 0 6px 0 #000; background: #fff; padding: 32px 36px; }
.ab-q blockquote { margin: 0; }
.ab-q blockquote p { margin: 0 0 16px; font-size: 18px; line-height: 1.65; color: var(--body); }
.ab-q blockquote p:first-child::before { content: '“'; display: block; font: 800 64px/0.6 var(--mont); color: var(--sky); margin-bottom: 14px; }
.ab-hl { color: #000; font-weight: 600; background: linear-gradient(transparent 62%, color-mix(in srgb, var(--sky) 45%, #fff) 62%); }
.ab-q figcaption, .hm-q figcaption { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.ab-q figcaption b, .hm-q figcaption b { font: 700 16px var(--mont); color: #000; }
.ab-q figcaption span, .hm-q figcaption span { font-size: 14px; color: var(--muted); }
.ab-bel { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ab-bel li { border-top: 3px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.ab-bel b { font: 700 19px/1.25 var(--mont); color: #000; }
.ab-bel p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.hm-q { margin: 0 0 44px; max-width: 900px; }
.hm-q blockquote { margin: 0; font: 700 28px/1.35 var(--mont); letter-spacing: -.01em; color: #000; }
.hm-q figcaption { border-top: 0; padding-top: 14px; }
@media (max-width: 860px) { .ab-two { grid-template-columns: minmax(0, 1fr); gap: 16px; } .ab-two > .mono { border-top: 0; padding-top: 0; } .ab-bel { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .ab-letter p { font-size: 18px; } .ab-q { padding: 22px 20px; } .ab-bel { grid-template-columns: 1fr; gap: 20px; } .hm-q blockquote { font-size: 22px; } }

/* ---------- widget: ai-workflows (homepage band on black). Prefix aw- ---------- */
.aw { --k: 64px; --kb: 5px; color: #fff; display: flex; flex-direction: column; }
.aw-solo { background: #000; padding: 44px 40px 36px; }
.aw-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 14px; }
.aw-eb { font: 500 11px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A8F98; }
.aw-ctl { display: flex; gap: 12px; }
/* control keys on black: white top, black outline, white base */
.aw-key { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; padding: 0; background: #fff; color: #000; border: 2px solid #000;
  border-radius: 9px; box-shadow: 0 4px 0 #fff; margin-bottom: 4px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.aw-key:hover { transform: translateY(2px); box-shadow: 0 2px 0 #fff; }
.aw-key:active { transform: translateY(4px); box-shadow: none; }
.aw-key:focus-visible, .aw-v:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.aw-pp[aria-pressed="true"] { background: var(--sky); }

/* views as words: the current one bold, its 3px Deep Sky underline fills over six seconds */
.aw-views { display: flex; flex-wrap: wrap; gap: 0 28px; border-bottom: 1px solid #333; }
.aw-v { position: relative; padding: 10px 0 11px; border: 0; background: none; color: #D5D8DF; font: 500 15px var(--sans); cursor: pointer; white-space: nowrap; }
.aw-v:hover { color: #fff; }
.aw-v.on { color: #fff; font-weight: 700; box-shadow: inset 0 -3px 0 #444; }
.aw-pb { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sky); transform-origin: left; animation: aw-fill 6s linear forwards; }
.aw.paused .aw-pb { animation-play-state: paused; }
@keyframes aw-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* headline and the before / after bars */
.aw-head { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px 56px; align-items: end; margin-top: 32px; }
.aw-head h3 { font: 800 36px/1.12 var(--mont); letter-spacing: -.02em; color: #fff; min-height: 2.24em; display: flex; align-items: flex-end; }
.aw-ba { display: flex; flex-direction: column; gap: 10px; }
.aw-br { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 4px 12px; align-items: center; }
.aw-bl { font: 700 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #8A8F98; }
.aw-bt { display: block; height: 14px; }
.aw-bt i { display: block; height: 100%; }
.aw-bt .b { background: #fff; }
.aw-bt .a { background: var(--sky); animation: aw-grow .6s ease both; animation-delay: 3.4s; transform-origin: left; }
@keyframes aw-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.aw-bv { grid-column: 2; font-size: 13px; color: #D5D8DF; }
.aw-bv b { font: 700 14px var(--mono); color: #fff; margin-right: 4px; }
.aw-sv { font-size: 14px; color: #D5D8DF; padding-top: 2px; }
.aw-sv b { color: #fff; }

/* the flow: one key per step, the person's step in Deep Sky */
.aw-flow { list-style: none; margin: 36px 0 0; padding: 0; min-height: 196px; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.aw-st { position: relative; display: flex; flex-direction: column; gap: 14px; padding-right: 22px; opacity: .28; animation: aw-on .35s ease forwards; animation-delay: calc(.25s + var(--j) * 3s / var(--n)); }
.aw-st:not(:last-child)::after { content: ''; position: absolute; top: calc(var(--k) / 2 - 1px); left: calc(var(--k) + 12px); right: 16px; height: 2px; background: #fff; }
.aw-st:not(:last-child)::before { content: ''; position: absolute; top: calc(var(--k) / 2 - 5px); right: 16px; width: 8px; height: 8px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg); }
.aw-k { display: block; width: var(--k); height: calc(var(--k) + var(--kb)); flex: none; }
.aw-kt { display: flex; align-items: center; justify-content: center; width: var(--k); height: var(--k); background: #fff; color: #000; border: 2px solid #000;
  border-radius: calc(var(--k) * .155); box-shadow: 0 var(--kb) 0 #fff; animation: aw-press .5s ease; animation-delay: calc(.25s + var(--j) * 3s / var(--n)); }
.aw-st.h .aw-kt { background: var(--sky); }
@keyframes aw-on { to { opacity: 1; } }
@keyframes aw-press { 0%, 100% { transform: none; box-shadow: 0 var(--kb) 0 #fff; } 45% { transform: translateY(4px); box-shadow: 0 1px 0 #fff; } }
.aw-tx { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.aw-tx b { font: 700 12px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #fff; }
.aw-tx em { font: 500 10.5px/1.4 var(--mono); font-style: normal; letter-spacing: .04em; color: #8A8F98; }
.aw-st.h .aw-tx em { color: var(--sky); }
.aw-tx span { font-size: 14px; line-height: 1.45; color: #D5D8DF; }
.aw-note { display: flex; align-items: center; gap: 10px; margin-top: 30px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: #8A8F98; }
.aw-hk { width: 14px; height: 14px; flex: none; background: var(--sky); border-radius: 3px; box-shadow: 0 2px 0 #fff; }

@media (max-width: 1000px) {
  .aw-head { grid-template-columns: minmax(0, 1fr); }
  .aw-head h3 { min-height: 0; font-size: 30px; }
}
@media (max-width: 760px) {
  .aw { --k: 46px; --kb: 4px; }
  .aw-solo { padding: 28px 18px 24px; }
  .aw-views { gap: 0 20px; }
  .aw-v { font-size: 14px; }
  .aw-head { margin-top: 24px; }
  .aw-head h3 { font-size: 26px; min-height: 3.36em; }
  .aw-flow { grid-template-columns: minmax(0, 1fr); margin-top: 28px; min-height: 444px; align-content: start; }
  .aw-st { display: grid; grid-template-columns: var(--k) minmax(0, 1fr); gap: 14px; padding: 0 0 16px; }
  .aw-st:not(:last-child)::after { top: calc(var(--k) + var(--kb) + 4px); bottom: 4px; left: calc(var(--k) / 2 - 1px); right: auto; width: 2px; height: auto; }
  .aw-st:not(:last-child)::before { display: none; }
  .aw-kt svg { width: 22px; height: 22px; }
}
.aw.still .aw-st, .aw.still .aw-kt, .aw.still .aw-bt .a { animation: none; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .aw-st, .aw-kt, .aw-bt .a, .aw-pb { animation: none; opacity: 1; }
  .aw-key { transition: none; }
}

/* ask-copilot: two columns, Today and After lockdown. Peony only for the flags, Deep Sky for the chosen question. */
.ac .ac-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ac .ac-top .mono:first-child { color: #000; }
.ac-sim { margin: 12px 0 20px; padding: 12px 16px; background: var(--peri); border-left: 3px solid #000; font-size: 14.5px; line-height: 1.55; color: #000; max-width: 92ch; }
.ac-qs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid #000; }
.ac-q { display: flex; gap: 12px; align-items: baseline; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: 500 15px/1.4 var(--sans); color: #222; }
.ac-qn { font: 500 10.5px var(--mono); color: var(--faint); letter-spacing: .06em; flex: none; }
.ac-q:hover { color: #000; }
.ac-q:hover .ac-qt { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.ac-q.on { color: #000; font-weight: 700; }
.ac-q.on .ac-qn { color: #000; }
.ac-q.on .ac-qt { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ac-q:focus-visible, .ac-box input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ac-own { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 18px 0 6px; }
.ac-own .mono { color: #000; }
.ac-box { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 260px; max-width: 620px; }
.ac-box input { flex: 1; min-width: 0; height: 42px; padding: 0 12px; border: 2px solid #000; border-radius: 8px; font: 500 15px var(--sans); color: #000; background: #fff; }
.ac-box .btn { margin-bottom: 4px; flex: none; }
.ac-asked { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; margin: 26px 0 12px; }
.ac-asked b { font: 700 20px/1.3 var(--mont); color: #000; }
.ac-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; }
.ac-col { border-top: 3px solid #000; padding-top: 12px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.ac-col.after { border-top-color: var(--sky); }
.ac-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; }
.ac-ch h3 { font: 800 24px var(--mont); }
.ac-ans { border-left: 3px solid #000; padding: 4px 0 4px 14px; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ac-ans p { font-size: 16px; line-height: 1.55; color: #000; }
.ac-ans.none p { color: var(--muted); }
.ac-note { color: var(--muted); font-size: 14px; }
.ac-ok { color: #000; box-shadow: inset 0 -3px 0 var(--sky); padding-bottom: 1px; }
.ac-flag { display: inline-block; background: var(--peony); color: #000; font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; }
.ac-sub { margin-top: 8px; color: #000; }
.ac-doc { border-top: 1px solid var(--line); padding: 10px 0 2px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ac-dt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.ac-dt b { font: 700 12.5px/1.4 var(--mono); color: #000; overflow-wrap: anywhere; }
.ac-dt .mono { color: var(--muted); font-size: 10px; }
.ac-dm { font-size: 13px; color: var(--muted); }
.ac-dk { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; font: 500 12px/1.5 var(--mono); color: #000; }
.ac-dk span { font: 500 9.5px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.ac-why, .ac-old { font-size: 13.5px; line-height: 1.5; color: var(--body); }
.ac-why b, .ac-fix b { display: block; font: 500 9.5px/1.8 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.ac-old { color: var(--muted); }
.ac-doc.gone .ac-dt b { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.ac-fix { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; line-height: 1.45; color: #000; }
.ac-fix span::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--sky); border: 1.5px solid #000; margin-right: 8px; vertical-align: 0; }
.ac-empty { margin: 26px 0 8px; font-size: 16px; color: var(--muted); }
.ac-tally { margin-top: 30px; border-top: 2px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.ac-tally > .mono { color: #000; }
.ac-tr { display: grid; grid-template-columns: 130px auto auto minmax(0, 1fr); gap: 8px 16px; align-items: center; }
.ac-tl { font: 600 14px var(--sans); color: #000; }
.ac-tr b { font: 800 26px/1 var(--mont); color: #000; white-space: nowrap; }
.ac-tx { font-size: 14px; color: var(--muted); }
.ac-tiles { display: flex; flex-wrap: wrap; gap: 4px; }
.ac-tiles i { width: 18px; height: 18px; border: 1.5px solid #000; background: #fff; box-sizing: border-box; }
.ac-tiles i.bad { background: var(--peony); }
.ac-tiles i.cur { outline: 2px solid var(--sky); outline-offset: 1px; }
.ac-end { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.ac-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 62ch; }
.ac-btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 860px) { .ac-two { grid-template-columns: 1fr; gap: 26px; } .ac-qs { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .ac-tr { grid-template-columns: 1fr auto; } .ac-tr .ac-tiles { grid-column: 1 / -1; grid-row: 2; } .ac-tx { grid-column: 1 / -1; } .ac-box { min-width: 0; flex-basis: 100%; } .ac-ch h3 { font-size: 21px; } }

/* ask-handbook: a question box, suggested questions as small keys, and an answer card with its citation.
   Deep Sky marks the chosen question, the source and the highlighted passage; Periwinkle for the asker and the boundary. */
.ah .ah-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ah .ah-top .mono:first-child { color: #000; }
.ah-sim { margin: 12px 0 24px; padding: 12px 16px; background: var(--peri); border-left: 3px solid #000; font-size: 14.5px; line-height: 1.55; color: #000; max-width: 92ch; }
.ah-vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ah-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 40px; align-items: start; }
.ah-main { min-width: 0; display: flex; flex-direction: column; gap: 18px; }

/* asking */
.ah-own { display: flex; flex-direction: column; gap: 8px; }
.ah-own .mono, .ah-sug > .mono { color: #000; }
.ah-box { display: flex; gap: 10px; align-items: flex-start; }
.ah-box input { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 2px solid #000; border-radius: 10px; box-shadow: 0 4px 0 #000; margin: 0 0 4px; font: 500 16px var(--sans); color: #000; background: #fff; }
.ah-box input::placeholder { color: var(--faint); }
.ah-box input:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ah-box .btn { flex: none; height: 46px; }
.ah-qs { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.ah-q { max-width: 100%; padding: 8px 13px; border: 1.5px solid #000; border-radius: 10px; background: #fff; box-shadow: 0 3px 0 #000; margin-bottom: 3px; font: 600 14px/1.35 var(--sans); color: #000; text-align: left; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.ah-q:hover { transform: translateY(1px); box-shadow: 0 2px 0 #000; }
.ah-q:active { transform: translateY(3px); box-shadow: none; }
.ah-q.on { background: var(--sky); }
.ah-q:focus-visible { outline: 3px solid var(--persian); outline-offset: 2px; }

/* the answer card */
.ah-out { min-width: 0; }
.ah-card { border: 2px solid #000; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 #000; margin-bottom: 6px; overflow: hidden; }
.ah-card.in { animation: ah-in .3s ease both; }
@keyframes ah-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ah-bar { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1.5px solid #000; }
.ah-bar b { font: 700 14px var(--sans); color: #000; }
.ah-bar .mono { margin-left: auto; font-size: 10.5px; }
.ah-av { width: 26px; height: 26px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #000; border-radius: 6px; box-shadow: 0 2px 0 #000; margin-bottom: 2px; background: var(--sky); font: 700 10px var(--mono); color: #000; }
.ah-body { padding: 18px 22px 22px; display: flex; flex-direction: column; gap: 16px; }
.ah-ask { align-self: flex-end; max-width: 86%; padding: 9px 14px; border-radius: 12px 12px 4px 12px; background: var(--peri); font: 500 15.5px/1.45 var(--sans); color: #000; overflow-wrap: anywhere; }
.ah-ans p { font: 500 18px/1.55 var(--sans); color: #000; max-width: 62ch; }
.ah-ans .ah-sub { margin-top: 6px; font: 400 15.5px/1.55 var(--sans); color: var(--body); }
.ah-c { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 4px; margin-left: 6px; border: 1.5px solid #000; border-radius: 4px; background: var(--sky); font: 700 10px/1 var(--mono); color: #000; letter-spacing: 0; vertical-align: 3px; }
.ah-sl .ah-c { margin: 0 8px 0 0; vertical-align: 0; }
.ah-src { border-top: 1px solid var(--line); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ah-sl { display: inline-flex; align-items: center; color: #000; }
.ah-sd { display: flex; gap: 12px; align-items: center; min-width: 0; }
.ah-sd > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ah-sd b { font: 700 16px/1.3 var(--sans); color: #000; overflow-wrap: anywhere; }
.ah-sd div span { font-size: 14px; line-height: 1.4; color: var(--muted); }
.ah-fi { flex: none; width: 34px; height: 42px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; box-sizing: border-box; border: 1.5px solid #000; border-radius: 3px 10px 3px 3px; box-shadow: 0 3px 0 #000; margin-bottom: 3px; background: #fff; font: 700 8px var(--mono); letter-spacing: .04em; color: #000; }
.ah-ex { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid #000; font: 400 15.5px/1.65 var(--sans); color: var(--body); max-width: 70ch; }
.ah-ex mark { background: linear-gradient(transparent 30%, var(--sky) 30%, var(--sky) 96%, transparent 96%); color: #000; font-weight: 600; padding: 0 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.ah-meta { font: 500 10.5px/1.6 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ah-also { display: flex; gap: 6px 12px; align-items: baseline; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.5; color: var(--body); }
.ah-also .mono { color: #000; flex: none; }
.ah-also b { color: #000; }
.ah-think { display: flex; align-items: center; gap: 12px; font: 500 15px var(--sans); color: var(--muted); }
.ah-dots { display: inline-flex; gap: 4px; }
.ah-dots i { width: 7px; height: 7px; border-radius: 50%; background: #000; animation: ah-dot 1s infinite ease-in-out; }
.ah-dots i:nth-child(2) { animation-delay: .15s; }
.ah-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes ah-dot { 0%, 80%, 100% { opacity: .25; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* refused, and not found */
.ah-gate, .ah-who { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 16px; border-radius: 10px; }
.ah-gate { background: var(--peri); border-left: 3px solid #000; border-radius: 0 10px 10px 0; }
.ah-who { border: 1.5px solid #000; }
.ah-gate .mono, .ah-who .mono { color: #000; }
.ah-gate p, .ah-who p { font-size: 14.5px; line-height: 1.5; color: var(--body); }
.ah-who b { font: 700 17px/1.3 var(--mont); color: #000; }
.ah-locks { display: flex; flex-wrap: wrap; gap: 8px; }
.ah-locks span { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1.5px solid #000; border-radius: 6px; background: #fff; font: 600 13px var(--sans); color: #000; }

/* what it searches */
.ah-side { min-width: 0; border-top: 3px solid #000; padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ah-side > .mono { color: #000; }
.ah-sp { font-size: 14px; line-height: 1.5; color: var(--muted); }
.ah-docs { list-style: none; margin: 0; padding: 0; }
.ah-docs li { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 6px 0; border-bottom: 1px solid var(--line); font: 500 14px/1.35 var(--sans); color: var(--body); }
.ah-x { flex: none; width: 34px; font: 500 9px var(--mono); letter-spacing: .08em; color: var(--faint); }
.ah-dn { min-width: 0; overflow-wrap: anywhere; }
.ah-tg { display: none; margin-left: auto; flex: none; padding: 1px 6px; border: 1.5px solid #000; font: 700 9px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.ah-docs li.src { color: #000; font-weight: 700; }
.ah-docs li.src .ah-x, .ah-docs li.also .ah-x { color: #000; }
.ah-docs li.src .ah-tg { display: inline-block; background: var(--sky); }
.ah-docs li.also .ah-tg { display: inline-block; background: var(--peri); }
.ah-off { margin-top: 6px; padding: 12px 14px; border: 1.5px dashed #000; border-radius: 10px; transition: background .2s, box-shadow .2s; }
.ah-off .mono { display: inline-flex; align-items: center; gap: 6px; color: #000; }
.ah-off p { margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--body); }
.ah-off.on { border-style: solid; background: var(--peri); box-shadow: 0 4px 0 #000; }

.ah-end { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.ah-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 64ch; }

@media (max-width: 900px) {
  .ah-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ah-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
}
@media (max-width: 560px) {
  .ah-docs { grid-template-columns: minmax(0, 1fr); }
  .ah-body { padding: 16px 14px 18px; gap: 14px; }
  .ah-bar { padding: 10px 14px; }
  .ah-bar .mono { margin-left: 0; flex-basis: 100%; }
  .ah-ask { max-width: 100%; }
  .ah-ans p { font-size: 17px; }
  .ah-q { font-size: 13.5px; padding: 7px 11px; }
  .ah-end .btn { white-space: normal; height: auto; min-height: 40px; padding-top: 8px; padding-bottom: 8px; line-height: 1.3; }
}
@media (prefers-reduced-motion: reduce) {
  .ah-card.in, .ah-dots i { animation: none; }
  .ah-q, .ah-off { transition: none; }
  .ah-q:hover, .ah-q:active { transform: none; }
}

/* ---------- widget: bookForm (Book the Scan). Prefix bkf- ---------- */
.bkf { margin-top: 20px; padding: 22px 0 0 !important; display: flex; flex-direction: column; gap: 18px; }   /* the brand card: a 2px black rule, level with the What happens list */
.bkf .f em { font-style: normal; font-weight: 400; color: var(--muted); font-size: 13px; }
.bkf-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.bkf textarea.fld { height: auto; min-height: 96px; padding-top: 12px; padding-bottom: 12px; resize: vertical; font: 500 16px/1.5 var(--sans); }
.bkf .fld[aria-invalid="true"] { border-color: #000; border-style: dashed; }
.bkf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.bkf-err { margin: 0; padding: 2px 0 2px 12px; border-left: 3px solid var(--peony); font-size: 14px; color: #000; }
.bkf .btn.p { justify-content: center; margin-top: 6px; }
.bkf .btn.p:disabled { opacity: .6; cursor: progress; }
.bkf-note { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.5; }
.bkf-note a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.bkf-done { outline: none; }
@media (max-width: 520px) { .bkf-two { grid-template-columns: 1fr; } }

/* ---------- widget: brand-intranet (brand the live intranet demo). Prefix bi- ----------
   Controls on black rules; selected preset bold with the 3px Deep Sky underline; Peony only for the
   contrast flag (black text). The preview uses the site's .liveframe window. */
.bi { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 40px; align-items: start; }
.bi-ctl { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.bi-blk { border-top: 2px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.bi-blk > .mono { color: #000; }
.bi-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.bi button:focus-visible, .bi input:focus-visible, .bi a:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

/* company */
.bi-f { display: flex; flex-direction: column; gap: 6px; font: 600 14px var(--sans); color: #000; }
.bi-f em { display: block; font-style: normal; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }
.bi-f .fld { height: 44px; }
.bi-ini .fld { width: 96px; font: 700 16px var(--mono); letter-spacing: .08em; text-transform: uppercase; }

/* colors */
.bi-pre { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; }
.bi-pre button { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer;
  font: 500 14px/1.25 var(--sans); color: var(--body); text-align: left; }
.bi-pre button:hover { color: #000; }
.bi-pre button.on { color: #000; font-weight: 700; box-shadow: inset 0 -3px 0 var(--sky); }
.bi-sws { display: inline-flex; flex: none; }
.bi-sw { display: inline-block; width: 14px; height: 14px; flex: none; border: 1.5px solid #000; box-sizing: border-box; }
.bi-sws .bi-sw + .bi-sw { border-left: 0; }
.bi-pick { display: grid; grid-template-columns: 44px minmax(0, 1fr) 100px; gap: 12px; align-items: center; }
.bi-pick input[type=color] { width: 44px; height: 44px; padding: 0; border: 2px solid #000; border-radius: 0; background: #fff; cursor: pointer; -webkit-appearance: none; appearance: none; }
.bi-pick input[type=color]::-webkit-color-swatch-wrapper { padding: 3px; }
.bi-pick input[type=color]::-webkit-color-swatch { border: 0; border-radius: 0; }
.bi-pick input[type=color]::-moz-color-swatch { border: 0; border-radius: 0; }
.bi-pl { display: block; font: 600 14px var(--sans); color: #000; }
.bi-ph { display: block; font-size: 12.5px; line-height: 1.35; color: var(--muted); }
.bi-hex { height: 40px; padding: 0 10px; font: 500 13px var(--mono); text-transform: lowercase; }
.bi-hex[aria-invalid="true"] { border-style: dashed; border-color: #000; }
.bi-con { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 10px; align-items: start; padding: 2px 0 2px 12px; border-left: 3px solid #000; font-size: 13.5px; line-height: 1.5; color: #222; }
.bi-con p { margin: 0; }
.bi-con b { color: #000; }
.bi-ok { display: flex; color: #000; margin-top: 2px; }
.bi-flag { background: var(--peony); color: #000; font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; margin-top: 2px; }
.bi-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: 600 13.5px var(--sans); color: #000; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* departments: a plain list, not chips */
.bi-deps { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.bi-deps li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 15px; color: #000; }
.bi-deps li span { min-width: 0; overflow-wrap: anywhere; }
.bi-deps .bi-none { color: var(--muted); font-size: 14px; }
.bi-rm { flex: none; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 13px var(--sans); color: var(--muted); text-decoration: underline; text-underline-offset: 3px; }
.bi-rm:hover { color: #000; text-decoration-color: var(--sky); text-decoration-thickness: 2px; }
.bi-add { display: flex; gap: 10px; align-items: flex-start; }
.bi-add .fld { height: 40px; flex: 1; min-width: 0; }
.bi-add .btn { flex: none; }
.bi-msg { margin: 0; font-size: 13.5px; color: #000; }

/* greeting and reset */
.bi-last { flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 18px; }
.bi-tog { display: flex; align-items: center; gap: 10px; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 500 14px/1.35 var(--sans); color: #000; text-align: left; }
.bi-box { width: 20px; height: 20px; flex: none; box-sizing: border-box; border: 2px solid #000; display: flex; align-items: center; justify-content: center; background: #fff; }
.bi-tog[aria-pressed="true"] .bi-box { background: var(--sky); }
.bi-box svg { width: 13px; height: 13px; }

/* the preview: the real app, drawn at desktop width and scaled into the frame */
.bi-prev { min-width: 0; position: sticky; top: 116px; }
.bi-frame .lf-bar .u { min-width: 0; }
.bi-vp { position: relative; height: clamp(520px, calc(100vh - 260px), 780px); overflow: hidden; background: #faf9f8; }
.bi-frame .bi-vp iframe { position: absolute; left: 0; top: 0; width: 100%; height: 100%; border: 0; transform-origin: 0 0; background: #faf9f8; }
.bi-follow { display: flex; justify-content: space-between; align-items: center; gap: 14px 24px; flex-wrap: wrap; margin-top: 32px; }
.bi-follow p { margin: 0; font-size: 16px; line-height: 1.5; color: #000; max-width: 50ch; }
.bi-small { display: none; margin: 14px 0 0; font-size: 13px; color: var(--muted); }

@media (max-width: 1000px) {
  .bi { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .bi-prev { position: static; }
  .bi-ctl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 32px; }
  .bi-vp { height: 600px; }
}
@media (max-width: 760px) { .bi-small { display: block; } }
@media (max-width: 640px) {
  .bi-ctl { grid-template-columns: minmax(0, 1fr); }
  .bi-vp { height: 440px; }
  .bi-frame .lf-bar i { display: none; }
  .bi-frame .lf-bar .u { margin-left: 0; }
}

/* phones: presets and captures of the intranet in each one, instead of the live app (unreadable at that size) */
.bi-phone { display: none; }
@media (max-width: 700px) {
  .bi.has-tour { display: block; }
  .bi.has-tour > .bi-ctl, .bi.has-tour > .bi-prev { display: none; }
  .bi-phone { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
  .bi-phone .bi-pre { align-self: stretch; }
  .bi-shot { margin: 0; align-self: stretch; }
  .bi-shot img { display: block; width: 100%; height: auto; border: 1px solid var(--line); background: #fff; }
  .bi-shot figcaption { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #222; }
  .bi-phone .bi-small { margin: 0; }
}

/* ---------- widget: doc-approval (controlled document route). Prefix da- ---------- */
.da { position: relative; }
.da .f01 { background: #000; }
.da .f03 { background: var(--peri); }
.da .f04 { background: #fff; border: 1.5px solid #000; }

/* who the visitor plays: views as words, the holder marked with a Deep Sky square */
.da-roles { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; margin-bottom: 20px; }
.da-roles > div { display: flex; flex-wrap: wrap; gap: 4px 0; }
.da-roles .chip { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 4px 0 8px; margin-right: 24px; line-height: 1.2; }
.da-roles .chip small { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); letter-spacing: .04em; color: var(--muted); }
.da-roles .chip.on small { color: #000; }
.da-turn { display: inline-block; width: 9px; height: 9px; background: var(--sky); border: 1.5px solid #000; flex: none; }
.da-key { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--mono); color: var(--muted); letter-spacing: .04em; margin-left: auto; }
.da-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.da-win { background: #fff; }
.da-win .chrome .tag { white-space: nowrap; }

.da-main { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); }
.da-doc { padding: 22px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.da-side { padding: 18px 22px 22px; border-left: 1px solid var(--line); min-width: 0; display: flex; flex-direction: column; gap: 10px; }

/* document header with the revision as a key */
.da-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.da-ht { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.da-num { font: 700 12px var(--mono); letter-spacing: .04em; color: #000; overflow-wrap: anywhere; }
.da-ht h4 { font: 800 24px/1.15 var(--mont); }
.da-meta { font-size: 13px; color: var(--muted); }
.da-rev { flex: none; width: 76px; display: flex; flex-direction: column; align-items: center; padding: 6px 0 7px; border: 2px solid #000; border-radius: 12px; background: #fff; box-shadow: 0 6px 0 #000; margin-bottom: 6px; transition: background .3s; }
.da-rev.ifc { background: var(--sky); }
.da-rev .mono { font-size: 9px; color: #000; }
.da-rev b { font: 800 36px/1 var(--mont); color: #000; }
.da-v { font: 700 10px var(--mono); letter-spacing: .06em; color: #000; margin-top: 2px; }
.da-status { display: flex; align-items: center; gap: 10px; font-size: 14px; color: #000; padding: 10px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.da-flag { display: inline-block; background: var(--peony); color: #000; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; white-space: nowrap; }
.da-ok, .da-ck { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; background: var(--sky); border: 1.5px solid #000; border-radius: 5px; color: #000; }

/* the route: five stages on a rule; done black, current Deep Sky, returned Peony */
.da-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.da-track li { border-top: 4px solid var(--line); padding-top: 10px; display: flex; flex-direction: column; gap: 3px; min-width: 0; transition: border-color .3s; }
.da-track li.done { border-top-color: #000; }
.da-track li.cur { border-top-color: var(--sky); }
.da-track li.ret { border-top-color: var(--peony); }
.da-sn { font: 700 10px var(--mono); color: var(--muted); letter-spacing: .1em; }
.da-track li > b { font: 700 14px/1.25 var(--mont); color: #000; }
.da-sw { font-size: 12px; line-height: 1.35; color: var(--muted); }
.da-stamp { display: flex; gap: 7px; align-items: flex-start; margin-top: 6px; font-size: 12px; line-height: 1.35; color: #000; min-height: 34px; }
.da-stamp small { font: 500 10px var(--mono); color: var(--muted); }
.da-x { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex: none; background: var(--peony); border: 1.5px solid #000; border-radius: 5px; color: #000; }
.da-wait { display: inline-flex; align-items: center; gap: 6px; font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.da-wait::before { content: ''; width: 8px; height: 8px; background: var(--sky); border: 1.5px solid #000; animation: blink 1.4s infinite; }

/* the action for the role being played */
.da-act { display: flex; flex-direction: column; gap: 12px; background: var(--wash); padding: 16px 18px; border-left: 3px solid #000; }
.da-act > p { font-size: 14px; line-height: 1.55; color: #222; }
.da-me { display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; }
.da-me .mono { color: #000; }
.da-me b { font: 700 15px var(--mont); color: #000; }
.da-me span:last-child { font-size: 13px; color: var(--muted); }
.da-cm { display: flex; flex-direction: column; gap: 6px; font: 600 13px var(--sans); color: #000; }
.da-cm small { font-weight: 400; color: var(--muted); }
.da-cm textarea { width: 100%; resize: vertical; min-height: 60px; border: 1.5px solid #000; border-radius: 8px; padding: 9px 11px; font: 400 14px/1.45 var(--sans); color: #000; background: #fff; }
.da-cm textarea:focus { outline: 3px solid var(--sky); outline-offset: 1px; }
.da-btns { display: flex; gap: 12px 14px; flex-wrap: wrap; align-items: center; }
.da-btns .btn svg { flex: none; }
.da-btns .btn[aria-disabled="true"] { color: var(--faint); border-color: var(--line); box-shadow: 0 4px 0 var(--line); cursor: not-allowed; transform: none; }
.da-link { border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 13px var(--sans); color: #000; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.da-link:hover { text-decoration-color: var(--sky); text-decoration-thickness: 3px; }
.da-msg { background: var(--peri); border-left: 3px solid #000; padding: 9px 12px; font-size: 13px; line-height: 1.5; color: #000; }
.da-toast { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; background: #fff; border: 1.5px solid #000; font-size: 13px; line-height: 1.45; color: #222; }
.da-toast svg { flex: none; margin-top: 1px; color: #000; }
.da-toast b { color: #000; margin-right: 4px; }

/* the record: views as words over a scrolling list */
.da-tabs { display: flex; flex-wrap: wrap; gap: 0; border-bottom: 1px solid var(--line); }
.da-tabs .chip { padding: 8px 0 7px; margin-right: 16px; font-size: 14px; }
.da-tabs .chip small { font: 500 10px var(--mono); color: var(--muted); margin-left: 2px; }
.da-list { max-height: 382px; overflow-y: auto; display: flex; flex-direction: column; }
.da-row { display: grid; grid-template-columns: 84px minmax(0, 1fr) auto; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 13px; line-height: 1.45; color: #222; }
.da-row:first-child { padding-top: 4px; }
.da-row b { color: #000; }
.da-t { font: 500 10px/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; }
.da-vn { font: 700 13px var(--mono); color: #000; }
.da-vs { font: 500 10px/1.5 var(--mono); color: var(--muted); text-align: right; letter-spacing: .04em; max-width: 110px; }
.da-vs.cur { color: #000; font-weight: 700; }
.da-row > span:nth-child(2):last-child { grid-column: 2 / -1; }
.da-note { font: 500 10.5px/1.5 var(--mono); color: var(--muted); padding-top: 10px; letter-spacing: .02em; }

/* register */
.da-reg { border-top: 1px solid #000; padding: 18px 22px 20px; display: flex; flex-direction: column; gap: 12px; }
.da-rh { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; }
.da-rh h4 { font: 700 16px var(--mont); }
.da-tw { overflow-x: auto; }
.da-reg table { width: 100%; border-collapse: collapse; font-size: 13px; color: #000; min-width: 640px; }
.da-reg th { background: var(--peri); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 8px 10px; white-space: nowrap; }
.da-reg td { padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.da-reg .n { text-align: right; font-family: var(--mono); font-size: 12px; }
.da-reg th.n { font-size: 10px; }
.da-mn { font-family: var(--mono); font-size: 12px; }
.da-reg tr.da-live td { font-weight: 700; }
.da-reg tr.da-live small { margin-left: 8px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; border-bottom: 3px solid var(--sky); }
.da-st { display: inline-flex; align-items: center; gap: 7px; }
.da-st i, .da-lg i { display: inline-block; width: 10px; height: 10px; flex: none; }
.da-mute { color: var(--muted); }
.da-lg { display: flex; gap: 6px 16px; flex-wrap: wrap; font: 500 10.5px var(--mono); color: #000; }
.da-lg span { display: inline-flex; align-items: center; gap: 6px; }
.da-foot { margin-top: 26px; font-size: 15px; color: #222; }

@media (max-width: 1000px) {
  .da-main { grid-template-columns: minmax(0, 1fr); }
  .da-side { border-left: 0; border-top: 1px solid var(--line); }
  .da-key { margin-left: 0; }
}
@media (max-width: 640px) {
  .da-doc, .da-side { padding-left: 14px; padding-right: 14px; }
  .da-reg { padding-left: 14px; padding-right: 14px; }
  .da-roles .chip { margin-right: 18px; }
  .da-ht h4 { font-size: 20px; }
  .da-rev { width: 64px; }
  .da-rev b { font-size: 30px; }
  .da-track { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .da-track li { border-top: 0; border-left: 4px solid var(--line); padding: 8px 0 8px 12px; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 6px; }
  .da-track li.done { border-left-color: #000; }
  .da-track li.cur { border-left-color: var(--sky); }
  .da-track li.ret { border-left-color: var(--peony); }
  .da-track li > * { grid-column: 2; }
  .da-track li .da-sn { grid-column: 1; grid-row: 1; padding-top: 3px; }
  .da-stamp { min-height: 0; }
  .da-act { padding: 14px; }
  .da-row { grid-template-columns: 70px minmax(0, 1fr); }
  .da-row .da-vs { grid-column: 2; text-align: left; max-width: none; }
  .da-win .chrome .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .da-wait::before { animation: none; }
  .da-rev, .da-track li { transition: none; }
}
.da-mn b { font-weight: 700; }

/* ---------- widget: exec-dashboard (four feeds, one view). Prefix xd- ---------- */
.xd { position: relative; }
.xd .f01 { background: #000; }
.xd .f02 { background: var(--sky); }
.xd .f03 { background: var(--peri); }
.xd .f04 { background: #fff; border: 1.5px solid #000; }
.xd .f05 { background: repeating-linear-gradient(135deg, #000 0 1.5px, #fff 1.5px 7px); border: 1.5px solid #000; }
.xd .f08 { background: repeating-linear-gradient(45deg, #000 0 1px, transparent 1px 7px), repeating-linear-gradient(135deg, #000 0 1px, #fff 1px 7px); border: 1.5px solid #000; }
.xd .f13 { background: repeating-linear-gradient(135deg, #000 0 1.5px, var(--sky) 1.5px 7px); border: 1.5px solid #000; }
.xd .f18 { background: repeating-linear-gradient(90deg, #000 0 9px, #fff 9px 14px); border: 1.5px solid #000; }
.xd .f20 { background: var(--peony); }

.xd-ba { display: flex; flex-wrap: wrap; gap: 4px 0; margin-bottom: 20px; }
.xd-win { background: #fff; }
.xd-win .chrome .tag { white-space: nowrap; }

/* header band on grid paper: title, feeds, refresh log */
.xd-top { padding: 22px 22px 16px; border-bottom: 1px solid var(--line);
  background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.xd-hd { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.xd-hd h3 { font: 800 26px/1.15 var(--mont); margin: 6px 0 4px; }
.xd-sub { font-size: 13px; color: var(--muted); }
.xd-hd .btn svg, .xd-rf svg { flex: none; }
.xd-feeds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 18px; }
.xd-fd { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px; background: #fff; border: 1.5px solid #000; }
.xd-fh { display: flex; align-items: center; gap: 8px; }
.xd-fh .mono { color: #000; font-weight: 700; }
.xd-fi { display: flex; color: #000; }
.xd-fs { font: 700 16px var(--mont); color: #000; }
.xd-fm { font: 500 11px/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; min-height: 33px; }
.xd-pr { position: relative; display: block; height: 2px; background: var(--line); overflow: hidden; margin: 6px 0 4px; }
.xd-pr i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #000; }
.xd-fd.busy .xd-pr i { width: 34%; background: var(--sky); animation: xd-load .9s linear infinite; }
@keyframes xd-load { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.xd-rf { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 0; border: 0; background: none; cursor: pointer;
  font: 700 13px var(--sans); color: #000; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.xd-rf:hover { text-decoration-color: var(--sky); text-decoration-thickness: 3px; }
.xd-fd.busy .xd-rf { color: var(--muted); text-decoration: none; cursor: default; }
.xd-fd.busy .xd-rf svg { animation: xd-spin 1s linear infinite; }
@keyframes xd-spin { to { transform: rotate(360deg); } }
.xd-log { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; min-height: 0; }
.xd-log > div { display: flex; gap: 12px; align-items: baseline; font-size: 13px; color: #000; flex-wrap: wrap; }
.xd-log > div:first-child { border-left: 3px solid var(--sky); padding-left: 10px; background: #fff; }
.xd-log > div:not(:first-child) { padding-left: 13px; color: var(--muted); }
.xd-log .mono { color: #000; font-size: 10px; }

/* views as words */
.xd-nav { display: flex; flex-wrap: wrap; gap: 0 4px; padding: 6px 22px 0; border-bottom: 1px solid var(--line); }
.xd-nav .chip { padding: 10px 0 8px; margin-right: 22px; }
.xd-body { padding: 22px; display: flex; flex-direction: column; gap: 26px; }

/* KPI tiles: a black rule, not a card */
.xd-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 20px; }
.xd-kpi { border-top: 2px solid #000; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.xd-kl { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #000; }
.xd-kr { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; }
.xd-kv { font: 800 30px/1.1 var(--mont); letter-spacing: -.02em; color: #000; white-space: nowrap; }
.xd-kv small { font: 700 15px var(--mont); color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.xd-kd { font-size: 13px; line-height: 1.45; color: #222; }
.xd-src { font: 500 10px/1.4 var(--mono); letter-spacing: .06em; color: var(--muted); margin-top: auto; padding-top: 6px; }
.xd-sp { display: flex; align-items: flex-end; gap: 2px; width: 74px; height: 30px; flex: none; }
.xd-sp i { flex: 1; min-height: 2px; }
.xd-sp i:hover { outline: 2px solid var(--sky); }

/* blocks */
.xd-g2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 26px 28px; }
.xd-blk { border-top: 1px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.xd-bh { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; }
.xd-bh h4 { font: 700 16px var(--mont); }
.xd-bh span { font: 500 10.5px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.xd-bh2 { margin-top: 8px; }
.xd-flash { animation: xd-flash 1.6s ease-out; }
@keyframes xd-flash { 0%, 30% { box-shadow: inset 0 3px 0 var(--sky); background-color: rgba(5, 189, 255, .10); } 100% { box-shadow: inset 0 3px 0 transparent; background-color: transparent; } }
.xd-fd.xd-flash { animation-name: xd-flashf; }
@keyframes xd-flashf { 0%, 30% { border-color: var(--sky); box-shadow: 0 0 0 2px var(--sky); } 100% { box-shadow: 0 0 0 2px transparent; } }

/* needs attention */
.xd-exs { display: flex; flex-direction: column; }
.xd-ex { display: grid; grid-template-columns: 96px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: #000; }
.xd-ex:first-child { padding-top: 2px; }
.xd-ex em { display: block; font: 500 10px var(--mono); letter-spacing: .06em; color: var(--muted); font-style: normal; margin-top: 3px; text-transform: uppercase; }
.xd-flag { display: inline-block; background: var(--peony); color: #000; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; white-space: nowrap; vertical-align: 1px; }
.xd-ex .xd-flag { justify-self: start; margin-top: 1px; }
.xd-go { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 0; cursor: pointer; font: 700 13px var(--sans); color: #000; white-space: nowrap; }
.xd-go svg { width: 15px; height: 15px; }
.xd-go:hover { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }

/* vertical bars: square ends, plan as an outline behind, values in mono */
.xd-vch { --yl: 46px; }
.xd-plot { position: relative; margin-left: var(--yl); border-bottom: 2px solid #000; }
.xd-tk { position: absolute; left: 0; right: 0; height: 0; border-top: 1px solid var(--grid); }
.xd-tk span { position: absolute; right: calc(100% + 8px); top: -7px; font: 500 10px var(--mono); color: var(--muted); white-space: nowrap; text-align: right; }
.xd-rl { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed #000; z-index: 2; pointer-events: none; }
.xd-rl span { position: absolute; right: 0; bottom: 3px; font: 700 10px var(--mono); letter-spacing: .04em; color: #000; background: #fff; padding: 1px 4px; }
.xd-cols { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.xd-c { position: relative; cursor: default; outline: none; }
.xd-c:hover, .xd-c:focus-visible { background: rgba(208, 217, 254, .45); }
.xd-c:focus-visible { box-shadow: inset 0 0 0 2px var(--sky); }
.xd-pl { position: absolute; left: 14%; right: 14%; bottom: 0; border: 1.5px solid #000; border-bottom: 0; background: #fff; }
.xd-stk { position: absolute; left: 18%; right: 18%; top: 0; bottom: 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.xd-stk.in { left: 28%; right: 28%; }
.xd-stk i { display: block; flex: none; }
.xd-xl { margin-left: var(--yl); display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); padding-top: 6px; }
.xd-xl span { font-size: 11px; color: #222; text-align: center; white-space: nowrap; overflow: hidden; }
.xd-lg { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 500 10.5px/1.4 var(--mono); color: #000; letter-spacing: .03em; }
.xd-lg span { display: inline-flex; align-items: center; }
.xd-lg i { display: inline-block; width: 11px; height: 11px; margin-right: 6px; flex: none; }
.xd-lg .f05, .xd-lg .f08, .xd-lg .f13, .xd-lg .f18, .xd-lg .f04 { border-width: 1px; }
.xd-lg .xd-pin { width: 3px; height: 13px; }
.xd-lg .f18, .xd-hbl .f18 { background: repeating-linear-gradient(90deg, #000 0 2px, #fff 2px 4px); }

/* horizontal bars with a target rule */
.xd-hch { display: flex; flex-direction: column; gap: 8px; }
.xd-hr { display: grid; grid-template-columns: 128px minmax(0, 1fr) 46px; gap: 12px; align-items: center; outline: none; }
.xd-hr[data-tip]:hover .xd-ht, .xd-hr:focus-visible .xd-ht { box-shadow: 0 0 0 2px var(--sky); }
.xd-hl { font-size: 14px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xd-hl small { font: 500 10px var(--mono); color: var(--muted); margin-left: 4px; }
.xd-ht { position: relative; display: block; height: 16px; background: var(--wash); }
.xd-ht i { display: block; height: 100%; }
.xd-ht b { position: absolute; top: -4px; bottom: -4px; width: 0; border-left: 2px dashed #000; }
.xd-hcap .xd-ht { background: none; height: 14px; }
.xd-hcap em { position: absolute; bottom: 0; transform: translateX(-50%); font: 700 10px var(--mono); font-style: normal; color: #000; white-space: nowrap; }
.xd-hv { font: 500 12px var(--mono); color: #000; text-align: right; }

/* stacked bar, form H: parts of a whole, 2px apart */
.xd-hb { display: flex; gap: 2px; height: 30px; }
.xd-hb i { min-width: 4px; outline: none; }
.xd-hb i:hover, .xd-hb i:focus-visible { box-shadow: 0 0 0 2px var(--sky); position: relative; z-index: 1; }
.xd-hbl { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.xd-hbl span { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: #222; }
.xd-hbl i { width: 11px; height: 11px; flex: none; border-width: 1px !important; }
.xd-hbl b { font: 700 13px var(--mono); color: #000; }

/* one tile per project */
.xd-tiles { display: grid; grid-template-columns: repeat(27, minmax(0, 1fr)); gap: 4px; }
.xd-tiles i { display: block; height: 28px; }
.xd-tiles i:hover { outline: 2px solid var(--sky); outline-offset: 1px; }

/* tables: Periwinkle header, mono caps, numbers right in mono */
.xd-tw { overflow-x: auto; }
.xd-tb { width: 100%; border-collapse: collapse; font-size: 13px; color: #000; }
.xd-tb th { background: var(--peri); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 8px 10px; white-space: nowrap; }
.xd-tb td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; line-height: 1.35; }
.xd-tb .n { text-align: right; font-family: var(--mono); font-size: 12px; white-space: nowrap; }
.xd-tb th.n.hm, .xd-tb td.n.hm { font-family: var(--mono); }
.xd-tb .n .xd-flag { margin-left: 6px; }
.xd-tb th.n { font: 700 10px var(--mono); }
.xd-dn { display: block; font: 500 10px var(--mono); color: var(--muted); letter-spacing: .02em; }
.xd-sd { position: relative; display: block; width: 120px; height: 12px; border: 1.5px solid #000; outline: none; }
.xd-sd i { position: absolute; left: 0; top: 0; bottom: 0; background: #000; }
.xd-sd b { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; background: var(--sky); border: 1px solid #000; }
.xd-sd:hover, .xd-sd:focus-visible { box-shadow: 0 0 0 2px var(--sky); }

/* tooltip: black, square, mono */
.xd-tip { position: absolute; z-index: 20; transform: translate(-50%, -100%); background: #000; color: #fff; font: 500 11px/1.35 var(--mono); letter-spacing: .02em; padding: 6px 9px; pointer-events: none; white-space: nowrap; max-width: 320px; }
.xd-tip::after { content: ''; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #000; }

/* before: the Friday spreadsheet */
.xd-before { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; padding: 22px; align-items: start; }
.xd-before .fchart { display: flex; flex-direction: column; gap: 10px; }
.xd-xls { border: 1px solid #C9CDD4; font-size: 13px; overflow-x: auto; }
.xd-xh { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: center; padding: 8px 12px; background: var(--wash); border-bottom: 1px solid #C9CDD4; }
.xd-xh b { font-size: 13px; }
.xd-xh .mono { font-size: 9.5px; }
.xd-xls table { width: 100%; border-collapse: collapse; min-width: 440px; }
.xd-xls th, .xd-xls td { border-right: 1px solid #D5D8DF; border-bottom: 1px solid #D5D8DF; padding: 7px 9px; text-align: left; white-space: nowrap; }
.xd-xls th { background: var(--wash); font-weight: 700; color: #000; }
.xd-xls td:nth-child(2) { font-family: var(--mono); font-size: 12px; text-align: right; }
.xd-xls td:nth-child(4) { color: var(--muted); font-style: italic; }
.xd-xls td.bad { background: var(--peony); color: #000; font-weight: 700; }
.xd-xt { display: flex; overflow: hidden; }
.xd-xt span { padding: 6px 10px; font-size: 11px; border-right: 1px solid #D5D8DF; background: var(--wash); white-space: nowrap; }
.xd-xt span.on { background: #fff; font-weight: 700; }
.xd-note { margin-top: 14px; font-size: 14px; line-height: 1.55; color: #222; }

@media (max-width: 1000px) {
  .xd-feeds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .xd-g2, .xd-before { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .xd-top, .xd-body, .xd-before { padding-left: 14px; padding-right: 14px; }
  .xd-nav { padding: 4px 14px 0; }
  .xd-nav .chip { margin-right: 16px; font-size: 14px; }
  .xd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 14px; }
  .xd-kr { flex-direction: column; align-items: flex-start; gap: 6px; }
  .xd-kv { font-size: 24px; }
  .xd-sp { width: 100%; height: 22px; }
  .xd-feeds { gap: 8px; }
  .xd-fd { padding: 10px; }
  .xd-fs { font-size: 14px; }
  .xd-ex { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .xd-hr { grid-template-columns: 92px minmax(0, 1fr) 40px; gap: 8px; }
  .xd-vch { --yl: 36px; }
  .xd-vch.dense .xd-xl span:nth-child(even) { visibility: hidden; }
  .xd-rl span { font-size: 9px; }
  .xd-xl span { font-size: 10px; }
  .xd-tiles { grid-template-columns: repeat(14, minmax(0, 1fr)); }
  .xd-tb .hm { display: none; }
  .xd-sd { width: 72px; }
  .xd-vch.dense .xd-xl span { overflow: visible; }
  .xd-win .chrome .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
  .xd-hd h3 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .xd-flash, .xd-fd.xd-flash, .xd-fd.busy .xd-pr i, .xd-fd.busy .xd-rf svg { animation: none; }
  .xd-fd.busy .xd-pr i { width: 100%; }
}

/* file-tags: tags as plain mono labels, a confidence track per tag (Deep Sky 0.90 and over, black 0.70 to 0.89,
   Peony under 0.70), the clean name in a Periwinkle callout, the register on the side. */
.ft .ft-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.ft .ft-top .mono:first-child { color: #000; }
.ft-lede { font-size: 16px; line-height: 1.55; color: var(--body); max-width: 70ch; margin: 12px 0 18px; }
.ft-in { display: flex; flex-direction: column; gap: 6px; }
.ft-in .mono { color: #000; }
.ft-in input { width: 100%; height: 50px; padding: 0 14px; border: 2px solid #000; border-radius: 8px; box-shadow: 0 4px 0 #000; margin-bottom: 4px; font: 500 15px var(--mono); color: #000; background: #fff; }
.ft-in input:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.ft-ex { margin-top: 14px; }
.ft-exl { display: flex; flex-wrap: wrap; gap: 2px 20px; margin-top: 6px; }
.ft-e { display: inline-flex; gap: 8px; align-items: baseline; border: 0; background: none; padding: 5px 0; cursor: pointer; font: 500 12.5px var(--mono); color: var(--muted); text-align: left; max-width: 100%; overflow-wrap: anywhere; }
.ft-e span { font-size: 10px; color: var(--faint); }
.ft-e:hover { color: #000; text-decoration: underline; text-underline-offset: 4px; }
.ft-e.on { color: #000; font-weight: 700; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }
.ft-e:focus-visible, .ft-link:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ft-empty { margin: 24px 0; font-size: 15px; color: var(--muted); }
.ft-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; margin-top: 24px; align-items: start; }
.ft-main { min-width: 0; }
.ft-parse { display: flex; flex-wrap: wrap; gap: 6px 22px; padding-bottom: 10px; font: 500 12px var(--mono); color: #000; overflow-wrap: anywhere; }
.ft-parse em { font-style: normal; font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }
.ft-tags { border-top: 2px solid #000; }
.ft-tr { display: grid; grid-template-columns: 130px minmax(0, 1.1fr) 92px 40px minmax(0, 1.6fr); gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ft-tr.ft-h { padding: 8px 0; border-bottom: 0; background: var(--peri); padding-left: 8px; padding-right: 8px; }
.ft-tr.ft-h span { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #000; }
.ft-k { font: 500 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; }
.ft-k sup { color: var(--muted); margin-left: 2px; }
.ft-v { font: 700 13px var(--mono); color: #000; overflow-wrap: anywhere; }
.ft-v em { font-style: normal; font-weight: 500; color: var(--muted); }
.ft-v.blank { color: var(--faint); font-weight: 500; }
.ft-trk { display: block; height: 12px; border: 1.5px solid #000; background: #fff; box-sizing: border-box; }
.ft-trk i { display: block; height: 100%; background: #000; transition: width .25s; }
.ft-trk i.hi, .ft-sb i.hi, .ft-lg i.hi { background: var(--sky); }
.ft-trk i.mid, .ft-sb i.mid, .ft-lg i.mid { background: #000; }
.ft-trk i.lo, .ft-sb i.lo, .ft-lg i.lo { background: var(--peony); }
.ft-c { font: 700 13px var(--mono); color: #000; text-align: right; }
.ft-s { font-size: 13px; line-height: 1.4; color: var(--muted); }
.ft-tr.low .ft-k::after { content: 'Under 0.70'; display: block; width: max-content; margin-top: 4px; background: var(--peony); color: #000; font: 700 9px/1.6 var(--mono); letter-spacing: .1em; padding: 0 5px; }
.ft-res { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ft-vd { display: flex; align-items: center; gap: 10px 18px; flex-wrap: wrap; }
.ft-flag { display: inline-block; background: var(--peony); color: #000; font: 700 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 8px; white-space: nowrap; }
.ft-ok { font: 700 11px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; white-space: nowrap; box-shadow: inset 0 -2px 0 #000; }
.ft-ok.hi { box-shadow: inset 0 -3px 0 var(--sky); }
.ft-lowc { font-size: 13px; color: var(--muted); }
.ft-lowc b { font: 700 13px var(--mono); color: #000; }
.ft-why { font-size: 14.5px; line-height: 1.55; color: var(--body); max-width: 72ch; }
.ft-nm { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 16px; align-items: baseline; padding: 14px 16px; background: var(--peri); border-left: 3px solid #000; }
.ft-nm .mono { color: #000; font-size: 10px; }
.ft-nm code { font: 700 13.5px/1.45 var(--mono); color: #000; overflow-wrap: anywhere; }
.ft-cut { font: 500 12.5px var(--mono); color: #000; overflow-wrap: anywhere; }
.ft-reg { border-top: 2px solid #000; padding-top: 10px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ft-reg > .mono { color: #000; }
.ft-rl { display: flex; flex-direction: column; }
.ft-rr { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 0 10px; padding: 8px 0 8px 10px; border-bottom: 1px solid var(--line); font-size: 13px; color: var(--body); }
.ft-rr b { font: 700 12px var(--mono); color: #000; grid-row: span 2; }
.ft-rr em { font-style: normal; color: var(--muted); grid-column: 2; }
.ft-rr small { grid-column: 1 / -1; font: 500 10px/1.5 var(--mono); color: var(--faint); margin-top: 3px; }
.ft-rr.on { box-shadow: inset 4px 0 0 var(--sky); }
.ft-rr.on span { font-weight: 700; color: #000; }
.ft-note { font-size: 13px; line-height: 1.5; color: var(--muted); }
.ft-reg .btn { align-self: flex-start; }
.ft-ten { margin-top: 30px; border-top: 2px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.ft-th b { display: block; font: 800 24px/1.25 var(--mont); color: #000; margin-top: 4px; }
.ft-th .mono { color: #000; }
.ft-sb { display: flex; gap: 2px; height: 26px; }
.ft-sb i { display: flex; align-items: center; padding-left: 8px; font: 700 11px var(--mono); font-style: normal; color: #000; min-width: 22px; }
.ft-sb i.mid { color: #fff; }
.ft-lg { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 11px var(--mono); color: #000; }
.ft-lg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; }
.ft-tw { overflow-x: auto; }
.ft-tb { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.ft-tb th { background: var(--peri); color: #000; font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 8px 10px; }
.ft-tb td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; color: #000; }
.ft-tb .n { text-align: right; font: 700 12.5px var(--mono); white-space: nowrap; }
.ft-tb th.n { font: 500 10px var(--mono); }
.ft-tb .m { font: 500 12px var(--mono); overflow-wrap: anywhere; }
.ft-link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; font: 500 12px/1.45 var(--mono); color: #000; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.ft-end { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.ft-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 62ch; }
.ft-btns { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .ft-tr.ft-h { display: none; }
  .ft-tr { grid-template-columns: minmax(0, 1fr) 70px 38px; gap: 4px 10px; }
  .ft-k { grid-column: 1 / -1; }
  .ft-v { grid-column: 1; }
  .ft-s { grid-column: 1 / -1; }
  .ft-in input { font-size: 13px; }
  .ft-th b { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { .ft-trk i { transition: none; } }

/* ---------- widget: hero-demos (three looping demos, one fixed frame). Prefix hd- ---------- */
.hd { --bh: 356px; --g1: #242424; --g2: #616161; --gl: #E1DFDD; --gr: #EDEBE9; min-width: 0; }

/* the key-shaped frame: 2px outline, 14px corners, solid 8px base, chrome with outlined dots */
.hd-fr { border: 2px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; background: #fff; overflow: hidden; margin-bottom: 8px; }
.hd-chrome { height: 38px; display: flex; align-items: center; gap: 7px; padding: 0 14px; border-bottom: 1.5px solid #000; background: var(--wash); }
.hd-chrome i { width: 10px; height: 10px; flex: none; border-radius: 50%; border: 1.5px solid #000; background: #fff; }
.hd-chrome span { flex: 1; min-width: 0; margin-left: 8px; font: 500 11.5px var(--mono); color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-chrome em { flex: none; font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.hd-bd { height: var(--bh); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; overflow: hidden; font: 400 13px/1.35 var(--sans); color: var(--g1); }

/* step rail: done Periwinkle, current Deep Sky, to come white */
.hd-rail { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.hd-rail span { height: 26px; display: flex; align-items: center; justify-content: center; gap: 4px; border: 1.5px solid #000; background: #fff; font: 700 9.5px var(--mono); letter-spacing: .07em; text-transform: uppercase; color: #000; white-space: nowrap; overflow: hidden; transition: background .25s; }
.hd-rail .done { background: var(--peri); }
.hd-rail .cur { background: var(--sky); }
.hd-rail svg { flex: none; }
.hd-sm { font-size: 12px; color: var(--g2); }

/* 1. project system (SharePoint list look) and what was made */
.hd-sp { flex: none; border: 1px solid var(--gl); }
.hd-sph { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--gl); font-size: 13px; }
.hd-sph span { font-size: 12px; color: var(--g2); }
.hd-tr { display: grid; grid-template-columns: 54px minmax(0, 1.3fr) minmax(0, 1.2fr) minmax(0, .9fr) 76px; gap: 8px; padding: 5px 10px; border-bottom: 1px solid var(--gr); font-size: 12.5px; }
.hd-tr:last-child { border-bottom: 0; }
.hd-tr span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-th { font-size: 11px; font-weight: 600; color: var(--g2); }
.hd-new { box-shadow: inset 3px 0 0 var(--sky); font-weight: 600; }
.hd-wait { color: #8A8886; }
.hd-wait span:last-child { grid-column: 2 / -1; }
.hd-made { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-made > div { border-top: 3px solid var(--line); padding-top: 6px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.hd-made > div.on { border-top-color: #000; }
.hd-ml { font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hd-made > div.on .hd-ml { color: #000; }
.hd-f { display: flex; align-items: center; gap: 6px; font-size: 12px; white-space: nowrap; }
.hd-f svg { flex: none; }
.hd-ch2 { font-size: 12px; font-weight: 600; word-break: break-all; }
.hd-avs { display: flex; padding-left: 5px; }
.hd-avs i { width: 24px; height: 24px; margin-left: -5px; border-radius: 50%; border: 1.5px solid #fff; background: #E0E0E0; color: #424242; display: flex; align-items: center; justify-content: center; font: 600 8.5px var(--sans); font-style: normal; }
.hd-ac { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; padding: 2px 0; border-bottom: 1px solid var(--gr); white-space: nowrap; }
.hd-ac b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.hd-ready { flex: none; height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 12px; border: 2px solid #000; background: var(--sky); }
.hd-ready > span:first-child { display: inline-flex; align-items: center; gap: 8px; }
.hd-ready b { font: 800 16px var(--mont); color: #000; }
.hd-ready .hd-sm { color: #000; text-align: right; }
.hd-ready.idle { border: 1.5px dashed var(--line); background: none; }
.hd-ready.idle .hd-sm { color: var(--g2); }

/* 2. invoice: Outlook, the agent, the approver, Xero */
.hd-ol { flex: 1; border: 1px solid var(--gl); }
.hd-olh { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 12px; border-bottom: 1px solid var(--gl); }
.hd-olh b { font-size: 14px; font-weight: 600; }
.hd-olh span { font-size: 12px; color: var(--g2); }
.hd-mail { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 9px 12px; border-bottom: 1px solid var(--gr); font-size: 12.5px; }
.hd-mail b { font-weight: 500; }
.hd-mail span { color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-mail em { font-style: normal; font-size: 11.5px; color: var(--g2); text-align: right; }
.hd-unread { box-shadow: inset 3px 0 0 var(--sky); background: #F3F2F1; }
.hd-unread b { font-weight: 700; }
.hd-unread span { color: var(--g1); font-weight: 600; }
.hd-unread .hd-pdf { justify-self: end; }
.hd-pdf { display: inline-flex; align-items: center; justify-content: center; height: 16px; padding: 0 4px; background: #C4314B; color: #fff; font: 700 8.5px var(--sans); border-radius: 2px; }
.hd-ap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 14px; }
.hd-inv { border: 1px solid #D0D0D0; padding: 12px; font-size: 10.5px; color: var(--g2); display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow: hidden; }
.hd-inv b { font: 800 12px var(--sans); letter-spacing: .1em; color: var(--g1); margin-bottom: 2px; }
.hd-il { margin-top: 8px; border-top: 1px solid var(--gl); }
.hd-il span { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dotted var(--gl); color: var(--g1); }
.hd-il i { font-style: normal; }
.hd-il i:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-il .t { font-weight: 700; border-bottom: 0; }
.hd-agent { border-left: 3px solid #000; padding-left: 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-agh { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.hd-agh b { font: 700 14px var(--mont); }
.hd-agh span { font: 700 9.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hd-kv { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--gr); font-size: 12.5px; }
.hd-kv span { color: var(--g2); }
.hd-kv b { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-appr { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.hd-appr .hd-sm { color: #000; font-weight: 600; }
.hd-key { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 16px; border: 2px solid #000; border-radius: 8px; background: var(--sky); box-shadow: 0 4px 0 #000; margin-bottom: 4px; font: 700 13px var(--sans); color: #000; transition: transform .15s, box-shadow .15s, background .15s; }
.hd-appr.done .hd-key { background: var(--peri); transform: translateY(3px); box-shadow: 0 1px 0 #000; }
.hd-xero { flex: 1; min-height: 0; border: 1px solid var(--gl); display: flex; flex-direction: column; }
.hd-xh { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-bottom: 1px solid var(--gl); }
.hd-xh b { font-size: 15px; font-weight: 700; }
.hd-xh span { font-size: 12px; color: var(--g2); }
.hd-xg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding: 8px 12px; font-size: 12px; }
.hd-xg em { display: block; font-style: normal; font-size: 10.5px; color: var(--g2); }
.hd-xt { padding: 0 12px; }
.hd-xr { display: grid; grid-template-columns: minmax(0, 1fr) 56px 56px 74px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--gr); font-size: 12px; }
.hd-xr span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-xr span:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.hd-xth { font-size: 10.5px; font-weight: 600; color: var(--g2); }
.hd-xtot { border-top: 1.5px solid var(--g1); border-bottom: 0; font-weight: 700; }
.hd-xtot span:first-child { font-weight: 400; color: var(--g2); }
.hd-xa { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; padding: 8px 12px; border-top: 1px solid var(--gl); background: #FAF9F8; font-size: 12px; }
.hd-xa em { margin-left: auto; font-style: normal; color: var(--g2); }

/* 3. the Friday report: sources, check, dashboard */
.hd-rp { flex: 1; display: flex; flex-direction: column; }
.hd-rph { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 6px; border-bottom: 2px solid #000; }
.hd-rph b { font: 700 15px var(--mont); }
.hd-clock { font: 700 18px var(--mono); color: #000; }
.hd-src { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.hd-src .kc { --kb: 3px !important; }
.hd-src > span b { display: block; font-size: 13px; font-weight: 700; }
.hd-src > span em { display: block; font-style: normal; font-size: 11px; color: var(--g2); }
.hd-st { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font: 600 12px var(--sans); color: var(--g2); }
.hd-st small { font-size: 11px; font-weight: 400; color: var(--g2); }
.hd-src.done .hd-st, .hd-src.cur .hd-st { color: #000; }
.hd-st svg { display: inline; margin-right: 4px; vertical-align: -1px; }
.hd-dash { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--gl); padding: 10px 12px; }
.hd-dh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; }
.hd-dh b { font: 700 15px var(--mont); }
.hd-dh span { font: 500 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.hd-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.hd-kpis span { border-top: 2px solid #000; padding-top: 6px; min-width: 0; }
.hd-kpis em { display: block; font: 500 9.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-kpis b { display: flex; align-items: center; gap: 8px; font: 800 28px/1.15 var(--mont); color: #000; letter-spacing: -.02em; }
.hd-flag { background: var(--peony); color: #000; font: 700 9px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 5px; font-style: normal; }
.hd-chart { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; align-items: end; border-bottom: 2px solid #000; }
.hd-chart span { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; }
.hd-chart i, .hd-lg i { display: block; }
.hd .bk { background: #000; }
.hd .sk { background: var(--sky); }
.hd .sc { background: repeating-linear-gradient(135deg, #000 0 1.5px, #fff 1.5px 6px); border: 1.5px solid #000; border-bottom: 0; }
.hd-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 10px var(--mono); color: #000; }
.hd-lg span { display: inline-flex; align-items: center; gap: 5px; }
.hd-lg i { width: 10px; height: 10px; }
.hd-lg .sc { border-bottom: 1.5px solid #000; border-width: 1px; }

/* the result, the views as words, the progress and the pause key */
.hd-res { margin-top: 18px; min-height: 74px; }
.hd-dot { font-style: normal; }
.hd-ttl { display: block; font: 600 15px var(--sans); color: #222; }
.hd-res p { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 2px; font-family: var(--mont); }
.hd-res p b { font: 800 30px/1.15 var(--mont); letter-spacing: -.02em; color: #000; }
.hd-res p span { font: 600 17px/1.3 var(--mont); color: var(--muted); }
.hd-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hd-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.hd-words { display: flex; flex-wrap: wrap; gap: 0 22px; min-width: 0; }
.hd-words button { border: 0; background: none; padding: 8px 0; font: 500 15px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.hd-words button:hover { color: #000; }
.hd-words .on { color: #000; font-weight: 700; box-shadow: inset 0 -3px 0 var(--sky); }
.hd-pp { flex: none; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; padding: 0; border: 2px solid #000; border-radius: 9px; background: #fff; color: #000; box-shadow: 0 4px 0 #000; margin-bottom: 4px; cursor: pointer; transition: transform .12s, box-shadow .12s; }
.hd-pp:hover { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.hd-pp[aria-pressed="true"] { background: var(--sky); }
.hd-words button:focus-visible, .hd-pp:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.hd-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 8px; }
.hd-prog span { height: 3px; background: var(--line); overflow: hidden; }
.hd-prog i { display: block; height: 100%; background: var(--sky); transform-origin: left; transition: transform .1s linear; }
.hd-prog .done i { background: var(--peri); }

@media (max-width: 760px) { .hd-res { min-height: 104px; } }
@media (max-width: 560px) {
  .hd { --bh: 392px; }
  .hd-bd { padding: 12px; gap: 9px; }
  .hd-chrome em { display: none; }
  .hd-rail { gap: 3px; }
  .hd-rail span { font-size: 8px; letter-spacing: .02em; height: 24px; }
  .hd-rail svg { display: none; }
  .hd .hm { display: none; }
  .hd-tr { grid-template-columns: 50px minmax(0, 1fr) 72px; }
  .hd-made { gap: 8px; }
  .hd-f { font-size: 11px; }
  .hd-f svg { width: 13px; }
  .hd-ac { flex-direction: column; gap: 0; font-size: 11px; }
  .hd-ac b { font-weight: 600; }
  .hd-ready b { font-size: 14px; }
  .hd-ready .hd-sm { font-size: 11px; }
  .hd-ap { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .hd-inv { padding: 8px 10px; }
  .hd-inv span:nth-of-type(2), .hd-il span:not(.t) { display: none; }
  .hd-il { margin-top: 4px; }
  .hd-agent { padding-left: 10px; }
  .hd-xg { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 8px; }
  .hd-xr { grid-template-columns: minmax(0, 1fr) 46px 70px; }
  .hd-xa em { margin-left: 0; width: 100%; }
  .hd-kpis { gap: 8px; }
  .hd-kpis b { font-size: 22px; }
  .hd-kpis em { font-size: 8.5px; }
  .hd-src { grid-template-columns: 34px minmax(0, 1fr); }
  .hd-src .hd-st { grid-column: 2; align-items: flex-start; text-align: left; flex-direction: row; flex-wrap: wrap; gap: 0 6px; }
  .hd-dot { display: none; }
  .hd-res p b { font-size: 24px; }
  .hd-res p span { font-size: 15px; }
  .hd-words { gap: 0 14px; }
  .hd-words button { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-rail span, .hd-key, .hd-pp, .hd-prog i { transition: none; }
}

/* library-overlay: the Before frame depicts plain SharePoint (neutral grays, the client's current state);
   the widget chrome and the After view follow the brand: mono tags as plain text, Peony only for flags,
   Deep Sky for the selected view, the checked filter and the best match. */
.lo { --sp-ink: #323130; --sp-mut: #605E5C; --sp-line: #EDEBE9; --sp-hov: #F3F2F1; }
.lo .lo-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.lo .lo-top .mono:first-child { color: #000; }
.lo-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 16px; }
.lo-views { display: flex; flex-wrap: wrap; }
.lo-views .chip { font-size: 15px; margin-right: 22px; color: var(--muted); }
.lo-views .chip.on { color: #000; }
.lo-vn { font: 500 10.5px var(--mono); color: var(--faint); margin-right: 6px; letter-spacing: .06em; }
.lo-lede { font-size: 16px; line-height: 1.55; color: var(--body); max-width: 70ch; margin: 10px 0 18px; }
.lo-frame { overflow: hidden; }
.lo-frame .chrome .r .mono { color: var(--muted); }
.lo-frame .chrome .u { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-frame .chrome .r { flex: none; padding-left: 12px; }
.lo .chip:focus-visible, .lo-tf:focus-visible, .lo-lr:focus-visible, .lo-link:focus-visible, .lo-fh:focus-visible, .lo-fv:focus-visible, .lo-go:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.lo-link { border: 0; background: none; padding: 0; cursor: pointer; color: #000; font: 600 13px var(--sans); text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.lo-flag { display: inline-block; background: var(--peony); color: #000; font: 700 9.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; vertical-align: 2px; }
.lo-empty { padding: 18px 6px; font-size: 14px; color: var(--muted); }

/* ---------- before: plain SharePoint ---------- */
.lo-sph { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sp-line); color: var(--sp-ink); }
.lo-sph b { font: 600 16px var(--sans); }
.lo-logo { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; background: #8A8F98; color: #fff; font: 700 12px var(--sans); border-radius: 3px; }
.lo-nav { margin-left: auto; display: flex; gap: 16px; font-size: 13px; color: var(--sp-mut); white-space: nowrap; }
.lo-nav u { text-decoration-thickness: 2px; text-underline-offset: 6px; color: var(--sp-ink); }
.lo-cmd { display: flex; justify-content: space-between; align-items: center; gap: 10px 20px; flex-wrap: wrap; padding: 8px 16px; border-bottom: 1px solid var(--sp-line); }
.lo-cmds { display: flex; gap: 18px; font-size: 13px; color: var(--sp-mut); white-space: nowrap; }
.lo-sb { display: flex; align-items: center; min-width: 0; }
.lo-cmd .lo-sb input { width: 270px; height: 32px; border: 1px solid #8A8886; border-right: 0; border-radius: 2px 0 0 2px; padding: 0 10px; font: 400 13px var(--sans); color: var(--sp-ink); background: #fff; min-width: 0; }
.lo-go { height: 32px; border: 1px solid #8A8886; background: var(--sp-hov); color: var(--sp-ink); padding: 0 12px; font-size: 13px !important; cursor: pointer; border-radius: 0 2px 2px 0; }
.lo-go:hover { background: var(--sp-line); }
.lo-two { display: grid; grid-template-columns: 220px minmax(0, 1fr); min-height: 440px; color: var(--sp-ink); }
.lo-tree { border-right: 1px solid var(--sp-line); padding: 8px 0; max-height: 520px; overflow: auto; }
.lo-tf { display: flex; align-items: center; gap: 7px; width: 100%; border: 0; background: none; padding: 5px 10px; font-size: 13px !important; color: var(--sp-ink); text-align: left; cursor: pointer; }
.lo-tf svg { flex: none; }
.lo-tf span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-tf:hover { background: var(--sp-hov); }
.lo-tf.on { background: var(--sp-line); font-weight: 600; }
.lo-main { padding: 12px 16px 16px; min-width: 0; }
.lo-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; margin-bottom: 10px; color: var(--sp-mut); }
.lo-crumb b { color: var(--sp-ink); font-weight: 600; }
.lo-two .lo-link { font: 400 15px var(--sans); color: var(--sp-mut); text-decoration: none; }
.lo-two .lo-link:hover { text-decoration: underline; }
.lo-two .lo-crumb .lo-link[data-a="qx"] { margin-left: 8px; font-size: 13px; text-decoration: underline; }
.lo-ls { font-size: 13px; }
.lo-lr { display: grid; grid-template-columns: minmax(0, 1fr) 104px 112px 72px; gap: 12px; align-items: center; width: 100%; padding: 8px 6px; border: 0; border-bottom: 1px solid var(--sp-line); background: none; text-align: left; color: var(--sp-ink); font-size: 13px !important; }
.lo-lh { color: var(--sp-mut); font-weight: 600; font-size: 12px !important; }
.lo-dir { cursor: pointer; }
.lo-dir:hover { background: var(--sp-hov); }
.lo-nm { display: flex; align-items: center; gap: 8px; min-width: 0; }
.lo-nm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-nm em { display: block; font: 500 10.5px var(--mono); font-style: normal; color: var(--sp-mut); overflow: hidden; text-overflow: ellipsis; }
.lo-dir .lo-nm span { font-weight: 600; }
.lo-ext { flex: none; width: 34px; padding: 2px 0; border: 1px solid #A19F9D; border-radius: 2px; font: 700 8.5px var(--mono); font-style: normal; text-align: center; color: var(--sp-mut); letter-spacing: .04em; }
.lo-miss { margin-top: 14px; font-size: 13px; line-height: 1.55; color: var(--sp-mut); }
.lo-miss .lo-flag { margin-right: 6px; }

/* ---------- tonight's pass ---------- */
.lo-pass { display: grid; grid-template-columns: minmax(0, 1fr) 270px; }
.lo-log { height: 470px; overflow: auto; padding: 10px 16px; border-right: 1px solid var(--line); scroll-behavior: auto; }
.lo-ln { display: grid; grid-template-columns: 62px 82px minmax(0, 1fr) 36px; gap: 10px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--wash); animation: pop .3s ease both; }
.lo-tm { font: 500 11px var(--mono); color: var(--faint); }
.lo-vb { justify-self: start; font: 700 10px/1.6 var(--mono); letter-spacing: .08em; color: #000; padding: 0 5px; margin-left: -5px; }
.lo-ln.rv .lo-vb, .lo-ln.dup .lo-vb { background: var(--peony); margin-left: 0; }
.lo-ln.ar .lo-vb { background: var(--peri); margin-left: 0; }
.lo-ln.dn .lo-vb { background: var(--sky); margin-left: 0; }
.lo-tx { font-size: 13px; line-height: 1.5; color: var(--body); min-width: 0; overflow-wrap: anywhere; }
.lo-tx b { font: 700 12px var(--mono); color: #000; }
.lo-cf { font: 500 11.5px var(--mono); color: #000; text-align: right; }
.lo-idle { padding: 24px 0; font-size: 15px; line-height: 1.6; color: var(--muted); max-width: 46ch; }
.lo-idle b { color: #000; }
.lo-ct { padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.lo-big { font: 500 15px var(--sans); color: var(--muted); }
.lo-big b { font: 800 44px/1 var(--mont); color: #000; letter-spacing: -.02em; margin-right: 4px; font-variant-numeric: tabular-nums; }
.lo-ct .bar i { transition: width .15s linear; }
.lo-cl { margin: 6px 0 0; }
.lo-cl div { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); }
.lo-cl dt { font-size: 14px; color: var(--body); }
.lo-cl dd { margin: 0; font: 700 15px var(--mono); color: #000; font-variant-numeric: tabular-nums; }
.lo-cn { font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.lo-ct .btn { align-self: flex-start; margin-top: 4px; }

/* ---------- after: the overlay ---------- */
.lo-ah { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; flex-wrap: wrap; padding: 14px 18px; border-bottom: 1px solid var(--line); }
.lo-ah b { display: block; font: 700 20px var(--mont); color: #000; margin-top: 2px; }
.lo-sb2 { gap: 8px; height: 42px; width: min(440px, 100%); padding: 0 12px; border: 2px solid #000; border-radius: 8px; background: #fff; }
.lo-sb2:focus-within { outline: 3px solid var(--sky); outline-offset: 2px; }
.lo-sb2 svg { flex: none; }
.lo-sb2 input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; font: 500 15px var(--sans); color: #000; }
.lo-aw { padding: 14px 18px 20px; }
.lo-sum { font-size: 14px; color: var(--body); margin-bottom: 12px; }
.lo-sum b { color: #000; }
.lo-grid { display: grid; grid-template-columns: 204px minmax(0, 1fr); gap: 24px; align-items: start; }
.lo-fac { display: flex; flex-direction: column; min-width: 0; }
.lo-fg { border-top: 1px solid var(--line); }
.lo-fg:first-child { border-top: 2px solid #000; }
.lo-fh { width: 100%; display: flex; justify-content: space-between; align-items: center; border: 0; background: none; padding: 9px 0; cursor: pointer; font: 500 10.5px var(--mono) !important; letter-spacing: .14em; text-transform: uppercase; color: #000; }
.lo-fh span { font: 700 14px var(--mono); letter-spacing: 0; }
.lo-fl { display: flex; flex-direction: column; align-items: stretch; padding-bottom: 8px; }
.lo-fl .lo-link { align-self: flex-start; margin: 4px 0 0 24px; font-size: 12.5px; }
.lo-fv { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; gap: 8px; align-items: center; width: 100%; border: 0; background: none; padding: 4px 0; text-align: left; cursor: pointer; color: #000; font-size: 13.5px !important; }
.lo-fv.z { color: var(--faint); }
.lo-fv:hover .lo-fx { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.lo-box { width: 16px; height: 16px; flex: none; display: flex; align-items: center; justify-content: center; border: 1.5px solid #000; border-radius: 3px; background: #fff; }
.lo-box svg { width: 11px; height: 11px; }
.lo-fv[aria-pressed="true"] .lo-box { background: var(--sky); }
.lo-fv[aria-pressed="true"] .lo-fx { font-weight: 700; }
.lo-fx { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lo-fx em { font-style: normal; color: var(--muted); font-size: 12px; }
.lo-fc { font: 500 11.5px var(--mono); color: var(--muted); text-align: right; }
.lo-dups { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); grid-template-columns: 16px minmax(0, 1fr); }
.lo-fac > .lo-link { align-self: flex-start; margin-top: 10px; }
.lo-list { min-width: 0; }
.lo-r { display: grid; grid-template-columns: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, .66fr) minmax(0, 1.1fr) minmax(0, 1.05fr) minmax(0, .8fr) 40px; gap: 10px; align-items: start; padding: 11px 8px; border-bottom: 1px solid var(--line); }
.lo-r.lo-h { background: var(--peri); padding: 8px; border-bottom: 0; }
.lo-r.lo-h .lo-c { font: 500 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #000; }
.lo-r.top { box-shadow: inset 4px 0 0 var(--sky); padding-left: 14px; }
.lo-c { min-width: 0; font: 500 12px/1.45 var(--mono); color: #000; overflow-wrap: anywhere; }
.lo-c.lo-t { font-family: var(--sans); }
.lo-ti { display: block; font: 600 14.5px/1.35 var(--sans); color: #000; }
.lo-ti .lo-flag { margin-left: 4px; }
.lo-fn { display: block; margin-top: 2px; font: 500 11px/1.45 var(--mono); color: var(--muted); overflow-wrap: anywhere; }
.lo-tr { display: block; margin-top: 3px; font: 500 10.5px/1.45 var(--mono); color: var(--faint); }
.lo-best { display: block; margin-bottom: 3px; color: #000; font-size: 10px; }
.lo-c .mk { padding: 0; }
.lo-more { margin-top: 16px; }
.lo-q { margin-top: 28px; border-top: 2px solid #000; padding-top: 14px; }
.lo-qh { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px 20px; flex-wrap: wrap; padding-bottom: 6px; }
.lo-qh .mono { color: #000; }
.lo-qh p { font-size: 13.5px; color: var(--muted); margin-top: 4px; max-width: 62ch; }
.lo-qh b { font: 800 24px var(--mont); color: #000; white-space: nowrap; }
.lo-qr { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; padding: 12px 0; border-top: 1px solid var(--line); }
.lo-qd b { display: block; font: 600 14.5px var(--sans); color: #000; }
.lo-qy { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.lo-qs { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; }
.lo-qs b { font: 600 14px var(--sans); color: #000; }
.lo-qs select { max-width: 100%; height: 36px; padding: 0 8px; font: 500 14px var(--sans); }
.lo-qa { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lo-qa .btn { margin-bottom: 4px; }
.lo-qok { grid-column: 2 / -1; display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #000; }
.lo-qok svg { flex: none; }
.lo-qr.done .lo-qd b { font-weight: 500; color: var(--muted); }

@media (max-width: 960px) {
  .lo-r.lo-h { display: none; }
  .lo-r { display: block; }
  .lo-c:not(.lo-t) { display: inline; font-size: 11.5px; }
  .lo-c:not(.lo-t)::after { content: ' · '; color: var(--faint); }
  .lo-c:last-child::after { content: ''; }
  .lo-c.lo-t { margin-bottom: 5px; }
}
@media (max-width: 760px) {
  .lo-grid { grid-template-columns: 1fr; gap: 14px; }
  .lo-pass { grid-template-columns: 1fr; }
  .lo-log { height: 340px; border-right: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .lo-ln { grid-template-columns: 62px minmax(0, 1fr) auto; row-gap: 2px; }
  .lo-tx { grid-column: 1 / -1; grid-row: 2; }
  .lo-two { grid-template-columns: 1fr; min-height: 0; }
  .lo-tree { max-height: 168px; border-right: 0; border-bottom: 1px solid var(--sp-line); }
  .lo-lr { grid-template-columns: minmax(0, 1fr) 88px; }
  .lo-lr > :nth-child(3), .lo-lr > :nth-child(4) { display: none; }
  .lo-nav, .lo-cmds, .lo-frame .chrome .r { display: none; }
  .lo-cmd .lo-sb { width: 100%; }
  .lo-cmd .lo-sb input { flex: 1; width: auto; }
  .lo-qr { grid-template-columns: 1fr; }
  .lo-qok { grid-column: 1; }
  .lo-aw, .lo-ah { padding-left: 12px; padding-right: 12px; }
  .lo-views .chip { margin-right: 16px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) { .lo-ln { animation: none; } .lo-ct .bar i { transition: none; } }

/* migration-map: where every file goes. Brand: black and white carry it, Deep Sky marks what moves,
   Periwinkle is the quiet archive, Peony flags what needs an owner. Square ends, values in mono. */
.mm .mm-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.mm .mm-top .mono:first-child { color: #000; }
.mm-lede { font-size: 17px; line-height: 1.55; color: var(--body); max-width: 64ch; margin: 12px 0 22px; }

/* controls: a key row on grid paper, views as words */
.mm-ctl { display: flex; flex-wrap: wrap; gap: 14px 40px; padding: 16px 18px 12px; border-top: 1px solid #000; border-bottom: 1px solid #000;
  background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 16px 16px; }
.mm-g { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-w { display: flex; flex-wrap: wrap; align-items: center; }
.mm-w .chip { font-size: 14px; margin-right: 16px; padding: 6px 0 5px; color: var(--muted); }
.mm-w .chip.on { color: #000; }
.mm-w .chip:focus-visible, .mm-tg:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.mm-tg { display: inline-flex; align-items: center; gap: 10px; padding: 5px 0; border: 0; background: none; cursor: pointer; font: 600 14px var(--sans); color: #000; }
.mm-box { width: 20px; height: 20px; flex: none; border: 2px solid #000; border-radius: 4px; background: #fff; box-shadow: 0 2px 0 #000; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.mm-box svg { width: 13px; height: 13px; }
.mm-tg[aria-pressed="true"] .mm-box { background: var(--sky); }

/* summary */
.mm-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin: 26px 0 6px; }
.mm-st { border-top: 3px solid #000; padding-top: 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mm-st.k { border-top-color: var(--sky); }
.mm-st b { font: 800 32px/1.1 var(--mont); letter-spacing: -.02em; color: #000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-st > span:last-child { font-size: 13px; line-height: 1.45; color: var(--muted); }

/* the map */
.mm-skw { overflow-x: auto; margin-top: 18px; -webkit-overflow-scrolling: touch; }
.mm-sk { display: block; width: 100%; min-width: 880px; height: auto; overflow: visible; }
.mm-ch { font: 500 10.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; fill: var(--muted); }
.mm-nl { font: 600 13px var(--sans); fill: #000; transition: fill .2s; }
.mm-nv { font: 500 10.5px var(--mono); fill: var(--muted); transition: fill .2s; }
.mm-sk .rib { cursor: pointer; transition: fill-opacity .2s; }
.mm-sk .rib.lv { fill: var(--sky); fill-opacity: .5; }
.mm-sk .rib.ar { fill: var(--peri); fill-opacity: .85; }
.mm-sk .rib.rv { fill: var(--peony); fill-opacity: .55; }
.mm-sk .rib:hover { fill-opacity: .9; }
.mm-sk.has-sel .rib { fill-opacity: .07; }
.mm-sk.has-sel .rib.on { fill-opacity: .9; }
.mm-sk .nd { cursor: pointer; outline: none; }
.mm-sk .nd .hit { fill: transparent; }
.mm-sk .nd .b { fill: #000; transition: fill .2s, fill-opacity .2s; }
.mm-sk .nd.ar .b { fill: var(--peri); stroke: #000; stroke-width: 1.5; }
.mm-sk .nd.rv .b { fill: var(--peony); stroke: #000; stroke-width: 1.5; }
.mm-sk .nd.sel .b { fill: var(--sky); stroke: #000; stroke-width: 1.5; }
.mm-sk .nd.sel .mm-nl { font-weight: 800; }
.mm-sk .nd:hover .mm-nl { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; }
.mm-sk .nd:focus-visible .hit { stroke: var(--sky); stroke-width: 3; }
.mm-sk.has-sel .nd:not(.lit):not(.sel) .b { fill-opacity: .2; stroke-opacity: .2; }
.mm-sk.has-sel .nd:not(.lit):not(.sel) .mm-nl, .mm-sk.has-sel .nd:not(.lit):not(.sel) .mm-nv { fill: #B8BCC4; }

.mm-leg { display: flex; justify-content: space-between; align-items: center; gap: 10px 24px; flex-wrap: wrap; margin-top: 12px; }
.mm-leg i, .mm-sq { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; border: 1.5px solid #000; box-sizing: border-box; }
.mm-leg i.lv, .mm-sq.lv { background: var(--sky); }
.mm-leg i.ar, .mm-sq.ar { background: var(--peri); }
.mm-leg i.rv, .mm-sq.rv { background: var(--peony); }
.mm-note { font-size: 13px; color: var(--muted); max-width: 60ch; }

/* detail panel */
.mm-det { margin-top: 28px; border-top: 2px solid #000; padding-top: 22px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 36px; }
.mm-dt { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.mm-dt h3 { font: 700 24px/1.2 var(--mont); letter-spacing: -.01em; }
.mm-p { font-size: 15px; line-height: 1.6; color: var(--body); }
.mm-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px 18px; margin: 4px 0 6px; }
.mm-dl div { border-top: 1px solid var(--line); padding-top: 6px; }
.mm-dl dt { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.mm-dl dd { margin: 2px 0 0; font: 500 13px var(--mono); color: #000; }
.mm-hist { margin-top: 6px; }
.mm-hb { position: relative; display: flex; align-items: flex-end; gap: 3px; height: 120px; margin-top: 10px; border-bottom: 2px solid #000; }
.mm-hb > span { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-width: 0; height: 100%; }
.mm-hb i { display: block; }
.mm-hb i.lv { background: var(--sky); }
.mm-hb i.ar { background: var(--peri); }
.mm-hb i.rv { background: var(--peony); }
.mm-cut { position: absolute; top: -4px; bottom: -6px; width: 0; border-left: 2px dashed #000; margin-left: -1.5px; }
.mm-cut em { position: absolute; top: 0; left: 6px; font: 700 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; font-style: normal; white-space: nowrap; background: #fff; padding: 0 3px; }
.mm-cut.r em { left: auto; right: 6px; }
.mm-hx { display: flex; justify-content: space-between; margin-top: 6px; font: 500 10.5px var(--mono); color: var(--muted); }
.mm-tw { overflow-x: auto; }
.mm-tb { width: 100%; border-collapse: collapse; font-size: 14px; }
.mm-tb th { background: var(--peri); color: #000; font: 500 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; text-align: left; padding: 9px 10px; white-space: nowrap; }
.mm-tb td { border-bottom: 1px solid var(--line); padding: 10px; vertical-align: top; color: #000; }
.mm-tb td b { font-weight: 600; }
.mm-tb .n { text-align: right; font: 500 12.5px var(--mono); white-space: nowrap; }
.mm-why { display: block; margin: 3px 0 0 16px; font-size: 13px; line-height: 1.45; color: var(--muted); }
.mm-clr { align-self: flex-start; margin-top: 4px; border: 0; background: none; padding: 4px 0; cursor: pointer; font: 600 14px var(--sans); color: #000; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 5px; }

@media (max-width: 1000px) { .mm-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .mm-det { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .mm-ctl { gap: 12px 24px; padding: 14px 12px 10px; }
  .mm-stats { gap: 18px 14px; }
  .mm-st b { font-size: 24px; }
  .mm-st > .mono { min-height: 31px; }
  .mm-tb { min-width: 520px; }
  .mm-lede { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { .mm-sk .rib, .mm-sk .nd .b, .mm-nl, .mm-nv, .mm-box { transition: none; } }

/* moments: the home page hero chat (src/widgets/moments.js). The bubbles come from service-detail.css (dm-). */
.mo { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mo-scroll { height: 380px; overflow: hidden; scroll-behavior: smooth; }
.mo-msgs { min-height: 100%; justify-content: flex-end; }
.mo .dm-b.mo-hit { font-weight: 700; }
.mo .dm-b em { font-style: italic; font-weight: 700; }
.mo .dm-m:not(.on) { display: none; }
.mo .dm-m.on { animation: mo-in .35s ease both; }
@keyframes mo-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.mo-typing { display: none; align-self: flex-start; gap: 4px; margin: 6px 8px 0; padding: 11px 13px; border-radius: 12px; background: #ECEEF3; }
.mo-typing.mo-c { align-self: flex-end; background: var(--peri); }
.mo-typing.on { display: inline-flex; }
.mo-typing span { width: 6px; height: 6px; border-radius: 50%; background: #000; animation: mo-dot 1s infinite ease-in-out; }
.mo-typing span:nth-child(2) { animation-delay: .15s; } .mo-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes mo-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }
.mo-foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 12px 16px; border-top: 1.5px solid #000; }
.mo-foot .mono { color: var(--muted); font-size: 10.5px; }
.mo-go { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15px; color: #000; text-decoration: none; background: linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 2.5px no-repeat; padding-bottom: 1px; }
.mo-pick { display: flex; flex-wrap: wrap; gap: 8px; }
.mo-pick button { border: 1.5px solid #000; border-radius: 8px; background: #fff; box-shadow: 0 2px 0 #000; padding: 7px 12px; font: 700 11px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #000; cursor: pointer; }
.mo-pick button[aria-pressed="true"] { background: #000; color: #fff; }
.mo-pick button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
@media (max-width: 560px) { .mo-scroll { height: 420px; } .dm-chat .dm-bar b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .mo .dm-m.on, .mo-typing span { animation: none; } .mo-scroll { scroll-behavior: auto; } }

/* the home keys panel: what each service covers, every part a link to its page (src/data/zzz-exec.js) */
.kp-parts ol { list-style: none; margin: 12px 0 0; padding: 0; border-top: 2px solid #000; }
.kp-parts li a { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-weight: 600; font-size: 15.5px; color: #000; text-decoration: none; }
.kp-parts li a .mono { width: 24px; flex: none; color: var(--muted); font-size: 11px; }
.kp-parts li a svg { margin-left: auto; flex: none; }
.kp-parts li a:hover { color: var(--persian); }

/* ---------- widget: project-setup (run-up, then a click-through of what was made). Prefix ps-, sp- (SharePoint look), tm- (Teams look) ---------- */
.ps { --g1: #242424; --g2: #616161; --g3: #8A8886; --gl: #E1DFDD; --gb: #FAF9F8; --spa: #0F6CBD; --tmp: #5B5FC7; }
.ps-win { background: #fff; }
.ps-win .chrome .u { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ps-win .chrome .tag { white-space: nowrap; }

/* the five steps on a rule: done black, current Deep Sky */
.ps-steps { list-style: none; margin: 0; padding: 16px 20px 14px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; border-bottom: 1px solid var(--line);
  background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.ps-steps li { border-top: 4px solid var(--line); padding-top: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; transition: border-color .3s; }
.ps-steps li.done { border-top-color: #000; }
.ps-steps li.cur { border-top-color: var(--sky); }
.ps-sn { font: 700 10px var(--mono); letter-spacing: .1em; color: var(--muted); }
.ps-steps b { font: 700 14px var(--mont); color: #000; }
.ps-sd { font: 500 10.5px/1.35 var(--mono); color: var(--muted); letter-spacing: .02em; }
.ps-steps li.done .ps-sd { color: #000; }

.ps-body { min-height: 420px; }
.ps-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; padding: 12px 20px 14px; border-top: 1px solid var(--line); background: var(--wash); font-size: 14px; color: #000; }
.ps-foot b { font: 800 16px var(--mont); }
.ps-foot em { font-style: normal; color: var(--muted); }
.ps-foot .btn[aria-disabled="true"] { color: var(--faint); border-color: var(--line); box-shadow: 0 4px 0 var(--line); cursor: default; transform: none; }
.ps-note { font: 500 10.5px/1.5 var(--mono); color: var(--muted); letter-spacing: .02em; margin-top: 12px; }

/* SharePoint look: neutral grays, Inter as the Segoe stand-in */
.sp { font-family: var(--sans); color: var(--g1); }
.sp-h { padding: 18px 20px 6px; }
.sp-k { display: block; font-size: 12px; color: var(--g2); }
.sp-h h4 { font: 600 20px/1.3 var(--sans); color: var(--g1); letter-spacing: 0; }
.ps-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; padding: 10px 20px 4px; }
.ps-fld { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ps-fld > span { font-size: 12px; font-weight: 600; color: var(--g1); }
.ps-fld > b { font-weight: 400; font-size: 14px; border: 1px solid var(--gl); border-radius: 4px; padding: 6px 9px; background: var(--gb); color: var(--g1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-tpl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; padding: 14px 20px 0; }
.ps-tl { grid-column: 1 / -1; font-size: 12px; font-weight: 600; }
.ps-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 10px 12px; border: 1px solid var(--gl); border-radius: 4px; background: #fff; cursor: pointer; color: var(--g1); }
.ps-opt:hover { border-color: var(--g3); }
.ps-opt.on { border-color: var(--g1); box-shadow: inset 0 0 0 1px var(--g1); }
.ps-opt i { width: 16px; height: 16px; flex: none; margin-top: 2px; border: 1.5px solid var(--g2); border-radius: 50%; }
.ps-opt.on i { border-color: var(--g1); box-shadow: inset 0 0 0 3.5px #fff; background: var(--g1); }
.ps-opt b { display: block; font-size: 14px; font-weight: 600; }
.ps-opt small { display: block; font-size: 12px; color: var(--g2); margin-top: 2px; }
.ps-opt:focus-visible, .sp-row:focus-visible, .sp-crumb button:focus-visible, .tm-tabs button:focus-visible, .tm-links button:focus-visible, .ps-lk:focus-visible, .tm-open:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.ps-hint { padding: 16px 20px 20px; font-size: 14px; color: var(--g2); }

/* run log */
.ps-run { padding: 22px 20px; display: flex; flex-direction: column; gap: 2px; }
.ps-run > div { display: grid; grid-template-columns: 96px 76px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; color: #222; }
.ps-later { opacity: .4; }
.ps-run b { font: 700 13px var(--mont); color: #000; }
.ps-tm { font: 500 11px/1.6 var(--mono); color: var(--muted); }
.ps-now .ps-tm { display: inline-flex; align-items: center; gap: 8px; color: #000; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.ps-now i { width: 10px; height: 10px; background: var(--sky); border: 1.5px solid #000; animation: blink 1.4s infinite; }

/* views as words over the click-through */
.ps-nav { display: flex; flex-wrap: wrap; gap: 0; padding: 4px 20px 0; border-bottom: 1px solid var(--line); }
.ps-nav .chip { padding: 10px 0 8px; margin-right: 22px; }
.ps-view { min-width: 0; }

/* SharePoint site */
.sp-suite { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px; border-bottom: 1px solid var(--gl); background: #fff; font-size: 14px; }
.sp-waffle { display: grid; grid-template-columns: repeat(3, 3px); gap: 2.5px; }
.sp-waffle i { width: 3px; height: 3px; background: var(--g2); }
.sp-suite b { font-weight: 600; color: var(--g1); }
.sp-search { margin-left: auto; width: 240px; max-width: 45%; height: 28px; display: flex; align-items: center; padding: 0 10px; border-radius: 4px; background: #F0F0F0; color: var(--g3); font-size: 13px; white-space: nowrap; overflow: hidden; }
.sp-site { display: flex; align-items: center; gap: 14px; padding: 16px 20px 10px; }
.sp-logo { width: 48px; height: 48px; flex: none; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #fff; font: 600 18px var(--sans); }
.sp-site h4 { font: 600 20px/1.25 var(--sans); color: var(--g1); letter-spacing: 0; }
.sp-site div > span { font-size: 12px; color: var(--g2); }
.sp-nav { display: flex; gap: 22px; padding: 0 20px; border-bottom: 1px solid var(--gl); font-size: 14px; color: var(--g1); overflow-x: auto; }
.sp-nav span { padding: 8px 0 9px; white-space: nowrap; }
.sp-nav .on { font-weight: 600; box-shadow: inset 0 -2px 0 var(--spa); }
.sp-cmd { display: flex; gap: 18px; padding: 9px 20px; border-bottom: 1px solid var(--gl); font-size: 13px; color: var(--g1); overflow-x: auto; white-space: nowrap; }
.sp-cmd span:first-child { color: var(--spa); font-weight: 600; }
.sp-crumb { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 20px 8px; font-size: 18px; }
.sp-crumb b { font-weight: 600; color: var(--g1); }
.sp-crumb button { border: 0; background: none; padding: 0; font: 400 18px var(--sans); color: var(--g2); cursor: pointer; }
.sp-crumb button:hover { color: var(--g1); text-decoration: underline; }
.sp-crumb span { color: var(--g3); }
.sp-bar { display: flex; gap: 8px; align-items: center; margin: 0 20px 6px; padding: 7px 10px; background: #F3F2F1; font-size: 13px; color: var(--g1); }
.sp-list { padding: 0 20px; }
.sp-row { display: grid; grid-template-columns: minmax(0, 1fr) 120px 170px; gap: 12px; align-items: center; width: 100%; padding: 9px 6px; border: 0; border-bottom: 1px solid #EDEBE9; background: none; text-align: left; font: 400 14px var(--sans); color: var(--g1); }
button.sp-row { cursor: pointer; }
button.sp-row:hover { background: #F5F5F5; }
.sp-row.sel, button.sp-row.sel:hover { background: #EDEBE9; }
button.sp-row:hover .sp-n > span:nth-child(2) { text-decoration: underline; }
.sp-hd { font-size: 12px; font-weight: 600; color: var(--g2); padding-top: 6px; }
.sp-n { display: flex; align-items: center; gap: 10px; min-width: 0; }
.sp-n > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-n svg { flex: none; }
.sp-m, .sp-b { font-size: 13px; color: var(--g2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-lock { display: inline-flex; color: var(--g2); }
.ps-fi { display: inline-flex; align-items: center; justify-content: center; flex: none; min-width: 18px; height: 20px; padding: 0 3px; border-radius: 2px; color: #fff; font: 700 9px var(--sans); }
.sp .ps-note { padding: 0 20px 18px; }

/* file preview: the template with the project fields filled in */
.ps-pv { margin: 14px 20px 18px; border: 1px solid var(--gl); background: #F3F2F1; }
.ps-pvh { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--gl); font-size: 13px; }
.ps-pvh span:last-child { color: var(--g2); font-size: 12px; margin-left: auto; }
.ps-page { margin: 14px auto; max-width: 520px; background: #fff; border: 1px solid var(--gl); padding: 20px 24px; }
.ps-pt { font: 600 18px var(--sans); color: var(--g1); margin-bottom: 10px; }
.ps-pm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 16px; padding: 10px 0; border-top: 1px solid var(--gl); border-bottom: 1px solid var(--gl); margin-bottom: 14px; font-size: 13px; }
.ps-pm em { display: block; font-style: normal; font-size: 11px; color: var(--g2); }
.ps-pm span { background: #E8F3FC; padding: 2px 4px; }
.ps-lines { display: flex; flex-direction: column; gap: 8px; }
.ps-lines i { display: block; height: 8px; background: #EDEBE9; }
.ps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-left: 1px solid var(--gl); border-top: 1px solid var(--gl); }
.ps-grid b, .ps-grid i { height: 24px; border-right: 1px solid var(--gl); border-bottom: 1px solid var(--gl); font: 600 12px/24px var(--sans); padding: 0 6px; background: #F3F2F1; }
.ps-grid i { background: #fff; }
.ps-pv .ps-note { padding: 0 12px 10px; margin: 0; }

/* Teams look */
.tm { display: grid; grid-template-columns: 64px minmax(0, 1fr) 210px; min-height: 470px; font-family: var(--sans); color: var(--g1); background: #F5F5F5; }
.tm-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 12px 0; background: #EBEBEB; }
.tm-rail span { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 10px; color: var(--g2); }
.tm-rail i { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--g2); }
.tm-rail .on { color: var(--tmp); font-weight: 600; }
.tm-rail .on i { border-color: var(--tmp); background: var(--tmp); }
.tm-main { min-width: 0; display: flex; flex-direction: column; background: #F5F5F5; }
.tm-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px 6px; background: #fff; }
.tm-tav { width: 32px; height: 32px; flex: none; border-radius: 6px; background: #E8E8E8; color: var(--g1); display: flex; align-items: center; justify-content: center; font: 600 12px var(--sans); }
.tm-team { display: block; font-size: 12px; color: var(--g2); }
.tm-head b { font-size: 16px; font-weight: 600; word-break: break-all; }
.tm-tabs { display: flex; gap: 18px; padding: 0 16px; background: #fff; border-bottom: 1px solid var(--gl); }
.tm-tabs button { padding: 8px 0 9px; border: 0; background: none; font: 400 14px var(--sans); color: var(--g2); cursor: pointer; }
.tm-tabs .on { color: var(--g1); font-weight: 600; box-shadow: inset 0 -3px 0 var(--tmp); }
.tm-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tm-msg { display: flex; gap: 10px; align-items: flex-start; }
.tm-msg > div { flex: 1; min-width: 0; background: #fff; border-radius: 6px; padding: 10px 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); font-size: 14px; line-height: 1.5; }
.tm-who { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--g2); margin-bottom: 4px; }
.tm-who b { font-size: 13px; color: var(--g1); }
.tm-app { font-size: 10px; border: 1px solid var(--gl); padding: 0 4px; border-radius: 3px; }
.tm-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: #E0E0E0; color: #424242; display: inline-flex; align-items: center; justify-content: center; font: 600 11px var(--sans); }
.tm-bot { border-radius: 6px; background: #fff; border: 1px solid var(--gl); color: var(--g1); }
.tm-links { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.tm-links button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border: 1px solid var(--gl); border-radius: 4px; background: #fff; font: 400 13px var(--sans); color: var(--g1); cursor: pointer; }
.tm-links button:hover { background: #F5F5F5; }
.tm-links svg { width: 16px; height: 13px; }
.tm-re { display: block; margin-top: 6px; font-size: 12px; color: var(--tmp); }
.tm-files, .tm-notes { background: #fff; border-radius: 6px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1); padding-bottom: 12px; }
.tm-files .sp-crumb { padding: 12px 14px 6px; font-size: 15px; }
.tm-files .sp-crumb button { font-size: 15px; }
.tm-files .sp-list { padding: 0 14px; }
.tm-files .sp-row { grid-template-columns: minmax(0, 1fr) 140px; }
.tm-files .sp-b { display: none; }
.tm-files .ps-note, .tm-notes .ps-note { padding: 0 14px; }
.sp-crumb .tm-open { margin-left: auto; border: 0; background: none; padding: 0; font: 600 13px var(--sans); color: var(--tmp); cursor: pointer; }
.tm-notes { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.tm-notes b { font-size: 18px; font-weight: 600; }
.tm-notes > span { font-size: 12px; color: var(--g2); }
.tm-notes ol { margin: 10px 0 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.tm-notes ol li { padding-bottom: 8px; border-bottom: 1px dashed var(--gl); }
.tm-notes .ps-note { padding: 0; }
.tm-mem { padding: 14px 14px; background: #fff; border-left: 1px solid var(--gl); display: flex; flex-direction: column; gap: 10px; font-size: 13px; }
.tm-mem > b { font-size: 13px; font-weight: 600; }
.tm-mem > div { display: flex; gap: 8px; align-items: center; }
.tm-mem small { display: block; font-size: 11px; color: var(--g2); }

/* access and record (Floor 16 summary) */
.ps-pad { padding: 18px 20px 20px; }
.ps-h { display: flex; justify-content: space-between; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; margin-bottom: 10px; }
.ps-h h4 { font: 700 16px var(--mont); }
.ps-h ~ .ps-h, .ps-h2 { margin-top: 22px; }
.ps-tw { overflow-x: auto; }
.ps-tb { width: 100%; border-collapse: collapse; font-size: 13px; color: #000; }
.ps-tb th { background: var(--peri); font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: left; padding: 8px 10px; white-space: nowrap; }
.ps-tb td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; line-height: 1.45; }
.ps-no { display: inline-block; background: var(--peony); color: #000; font: 700 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; padding: 4px 6px; white-space: nowrap; }
.ps-log { list-style: none; margin: 0; padding: 0; counter-reset: c; }
.ps-log li { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.45; color: #222; }
.ps-sys { font: 700 10.5px/1.9 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #000; }
.ps-rec .ps-fields { padding-bottom: 8px; }
.ps-lk { align-self: flex-start; border: 0; background: none; padding: 6px 0; font: 400 14px var(--sans); color: var(--spa); cursor: pointer; text-decoration: underline; }
.ps-act { display: inline-flex; align-items: center; gap: 6px; }
.ps-act i { width: 8px; height: 8px; border-radius: 50%; background: #107C10; }
.ps-rec .ps-h2 { padding: 0 20px; }
.ps-act-log { list-style: none; margin: 0; padding: 0 20px 20px; }
.ps-act-log li { display: grid; grid-template-columns: 96px 70px 100px minmax(0, 1fr); gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--gl); font-size: 14px; color: var(--g1); align-items: baseline; }
.ps-act-log b { font: 700 13px var(--mont); color: #000; }
.ps-act-log li > span:nth-child(3) { font-size: 12px; color: var(--g2); }

@media (max-width: 900px) {
  .tm { grid-template-columns: minmax(0, 1fr); }
  .tm-rail { display: none; }
  .tm-mem { border-left: 0; border-top: 1px solid var(--gl); flex-direction: row; flex-wrap: wrap; gap: 8px 16px; }
  .tm-mem > b { width: 100%; }
  .tm-mem small { display: none; }
}
@media (max-width: 640px) {
  .ps-steps { padding: 12px 12px 10px; gap: 6px; }
  .ps-steps b { font-size: 12px; }
  .ps-sd { display: none; }
  .ps-steps li.done .ps-sd, .ps-steps li.cur .ps-sd { display: block; font-size: 9px; }
  .ps-fields, .ps-tpl { grid-template-columns: minmax(0, 1fr); padding-left: 14px; padding-right: 14px; }
  .sp-h, .ps-hint { padding-left: 14px; padding-right: 14px; }
  .ps-run { padding: 16px 14px; }
  .ps-run > div { grid-template-columns: 80px minmax(0, 1fr); }
  .ps-run > div > span:last-child { grid-column: 1 / -1; }
  .ps-nav { padding: 2px 14px 0; }
  .ps-nav .chip { margin-right: 16px; font-size: 14px; }
  .sp-site, .sp-crumb { padding-left: 14px; padding-right: 14px; }
  .sp-nav, .sp-cmd { padding-left: 14px; padding-right: 14px; }
  .sp-list { padding: 0 8px; }
  .sp-row { grid-template-columns: minmax(0, 1fr) 84px; }
  .sp-b { display: none; }
  .sp .ps-note { padding: 0 14px 16px; }
  .ps-pv { margin: 12px 8px 16px; }
  .ps-page { padding: 14px; margin: 10px; }
  .ps-pad { padding: 16px 14px; }
  .ps-tb { min-width: 520px; }
  .ps-log li { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .ps-rec .ps-h2 { padding: 0 14px; }
  .ps-act-log { padding: 0 14px 16px; }
  .ps-act-log li { grid-template-columns: 82px minmax(0, 1fr); gap: 2px 10px; }
  .ps-act-log li > span:nth-child(3) { display: none; }
  .ps-act-log li > span:last-child { grid-column: 1 / -1; }
  .ps-foot { padding: 12px 14px; }
  .ps-foot .btn { white-space: normal; height: auto; min-height: 40px; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-now i { animation: none; }
  .ps-steps li { transition: none; }
}

/* prompt-makeover: Before and After as two chat windows (the story widgets' keycap frame: 2px black, 14px corner,
   0 6px 0 base). The prompt is a Periwinkle bubble on the right, the answer a light grey bubble on the left. Deep Sky
   marks what the better prompt adds (chips, numbered highlights); Peony only flags the weak answer. Prefix pm- */
.pm .pm-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.pm .pm-top .mono:first-child { color: #000; }
.pm-lede { margin: 12px 0 20px; font-size: 17px; line-height: 1.55; color: var(--body); max-width: 70ch; }
.pm-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }

/* the five jobs: small keys, the chosen one pressed and Deep Sky */
.pm-jobs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.pm-job { display: flex; gap: 10px; align-items: center; min-height: 58px; margin-bottom: 4px; padding: 10px 14px; border: 2px solid #000; border-radius: 10px; background: #fff;
  box-shadow: 0 4px 0 #000; cursor: pointer; text-align: left; font: 600 14.5px/1.3 var(--sans); color: #000; transition: transform .12s, box-shadow .12s, background .12s; }
.pm-jn { font: 500 10.5px var(--mono); letter-spacing: .06em; color: var(--muted); flex: none; }
.pm-job:hover { transform: translateY(2px); box-shadow: 0 2px 0 #000; }
.pm-job.on { background: var(--sky); transform: translateY(3px); box-shadow: 0 1px 0 #000; font-weight: 700; }
.pm-job.on .pm-jn { color: #000; }
.pm button:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.pm-job.on:focus-visible { outline-color: #000; }

/* the headline for the chosen job */
.pm-head { margin: 30px 0 20px; display: flex; flex-direction: column; gap: 8px; }
.pm-head h3 { font: 800 28px/1.2 var(--mont); letter-spacing: -.02em; color: #000; max-width: 34ch; }
.pm-ctx { font-size: 15px; line-height: 1.5; color: var(--muted); }
.pm-ctx .mono { margin-left: 6px; font-size: 10px; white-space: nowrap; }

/* Before and After */
.pm-two { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; }
.pm-col { min-width: 0; display: flex; flex-direction: column; }
.pm-ch { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; border-top: 3px solid #000; padding-top: 10px; }
.pm-after .pm-ch { border-top-color: var(--sky); }
.pm-ch h4 { font: 800 24px var(--mont); letter-spacing: -.02em; color: #000; margin: 0; }
.pm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 18px; min-height: 30px; }
.pm-chips .mono { color: #000; margin-right: 2px; }
.pm-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border: 1.5px solid #000; border-radius: 8px; background: #fff; box-shadow: 0 3px 0 #000;
  margin-bottom: 3px; font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; cursor: pointer; transition: transform .12s, box-shadow .12s, background .12s; }
.pm-chip b { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 4px; background: #000; color: #fff; font: 700 9.5px/1 var(--mono); letter-spacing: 0; }
.pm-chip:hover { background: var(--wash); }
.pm-chip[aria-pressed="true"] { background: var(--sky); transform: translateY(2px); box-shadow: 0 1px 0 #000; }
.pm-chip.off { cursor: default; border-style: dashed; border-color: var(--faint); box-shadow: none; color: var(--faint); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.pm-chip.off:hover { background: #fff; }

/* the chat window */
.pm-win { border: 2px solid #000; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 #000; overflow: hidden; }
.pm-bar { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-bottom: 1.5px solid #000; }
.pm-bar .mono { margin-left: auto; font-size: 10px; color: var(--muted); white-space: nowrap; }
.pm-av { width: 24px; height: 24px; flex: none; display: inline-flex; align-items: center; justify-content: center; border: 1.5px solid #000; border-radius: 5px; box-shadow: 0 2px 0 #000; background: var(--peri); font: 700 11px var(--mono); color: #000; }
.pm-nm { font: 700 13px var(--sans); color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.pm-msgs { display: flex; flex-direction: column; gap: 4px; padding: 14px 14px 18px; }
.pm-who { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin: 6px 4px 2px; }
.pm-who.pm-me { align-self: flex-end; margin-top: 0; }
.pm-b { border-radius: 12px; padding: 9px 13px; font: 400 15px/1.5 var(--sans); color: #000; min-width: 0; overflow-wrap: anywhere; animation: pm-in .3s ease both; }
.pm-ask { align-self: flex-end; max-width: 92%; background: var(--peri); border-top-right-radius: 0; }
.pm-ans { align-self: flex-start; max-width: 96%; background: #ECEEF3; border-top-left-radius: 0; font-size: 14.5px; animation-delay: .12s; }
.pm-ans p { margin: 0 0 8px; }
.pm-ans p:last-child, .pm-ans ul:last-child, .pm-ans ol:last-child { margin-bottom: 0; }
.pm-ans ul, .pm-ans ol { margin: 0 0 10px; padding-left: 20px; }
.pm-ans li { margin: 0 0 5px; }
.pm-ans li:last-child { margin-bottom: 0; }
.pm-ans b { font-weight: 700; }
.pm-lg { display: inline-block; margin-left: 4px; padding: 0 6px; background: #000; color: #fff; font: 700 9.5px/1.7 var(--mono); letter-spacing: .1em; text-transform: uppercase; vertical-align: 1px; }
@keyframes pm-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* what the better prompt adds: a Deep Sky bar under each part, with its number; a chip fills its part */
.pm-h { background: linear-gradient(transparent 60%, var(--sky) 60%, var(--sky) 94%, transparent 94%); -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-color .15s; }
.pm-n { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin: 0 4px 0 1px; border-radius: 4px; background: #000; color: #fff; font: 700 9.5px/1 var(--mono); vertical-align: 2px; }
.pm-after[data-spot] .pm-h { background: none; }
.pm-after[data-spot="aud"] .pm-h[data-k="aud"], .pm-after[data-spot="src"] .pm-h[data-k="src"],
.pm-after[data-spot="fmt"] .pm-h[data-k="fmt"], .pm-after[data-spot="lim"] .pm-h[data-k="lim"] { background: var(--sky); }

/* the verdict under each window */
.pm-vd { display: flex; align-items: baseline; gap: 6px 12px; flex-wrap: wrap; margin-top: 18px; font-size: 14.5px; line-height: 1.5; color: var(--body); }
.pm-flag, .pm-ok { display: inline-block; flex: none; padding: 1px 7px; color: #000; font: 700 10px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.pm-flag { background: var(--peony); }
.pm-ok { background: var(--sky); }
.pm-vd > span:last-child { flex: 1 1 220px; min-width: 0; }

/* phones only: the Before / After switch and the jump between them */
.pm-sw, .pm-see, .pm-back { display: none; }
.pm-sw { margin: 0 0 18px; border: 2px solid #000; border-radius: 10px; box-shadow: 0 4px 0 #000; overflow: hidden; }
.pm-sw button { flex: 1; height: 42px; border: 0; background: #fff; cursor: pointer; font: 700 14px var(--sans); color: #000; }
.pm-sw button + button { border-left: 2px solid #000; }
.pm-sw button[aria-pressed="true"] { background: var(--sky); }
.pm-sw button:focus-visible { outline-offset: -5px; outline-color: #000; }
.pm-see { align-self: flex-start; margin-top: 18px; }
.pm-back { align-self: flex-start; margin-top: 14px; padding: 4px 0; border: 0; background: none; cursor: pointer; font: 600 14px var(--sans); color: #000; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.pm-end { margin-top: 34px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.pm-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 70ch; }

@media (max-width: 1000px) {
  .pm-jobs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pm-head h3 { font-size: 25px; }
  .pm-chips .mono { flex-basis: 100%; margin: 0; }
}
@media (max-width: 860px) { .pm-two { gap: 22px; } .pm-b { font-size: 14.5px; } .pm-ans { font-size: 14px; } }
@media (max-width: 760px) {
  .pm-sw { display: flex; }
  .pm-see { display: inline-flex; }
  .pm-back { display: inline-block; }
  .pm-two { grid-template-columns: minmax(0, 1fr); }
  .pm-two[data-side="b"] .pm-after, .pm-two[data-side="a"] .pm-before { display: none; }
  .pm-head { margin: 24px 0 16px; }
  .pm-head h3 { font-size: 22px; }
}
@media (max-width: 560px) {
  .pm-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .pm-job:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .pm-job { min-height: 54px; padding: 8px 12px; font-size: 14px; }
  .pm-lede { font-size: 16px; }
  .pm-msgs { padding: 12px 10px 14px; }
  .pm-ask, .pm-ans { max-width: 100%; }
  .pm-ch h4 { font-size: 21px; }
  .pm-chips { gap: 6px; }
  .pm-chip { padding: 0 6px; letter-spacing: .05em; gap: 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-b { animation: none; }
  .pm-job, .pm-chip, .pm-h { transition: none; }
}

/* quote-check: the vendor's quote as a key-shaped document (2px black, 14px corner, solid black base) with the
   running total beside it. Deep Sky for the selected call and the money saved, Peony for lines the data says are
   not needed, Mauve for the one to negotiate. */
.qc [hidden] { display: none !important; }
.qc .qc-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.qc .qc-top .mono:first-child { color: #000; }
.qc-lede { font-size: 16px; line-height: 1.55; color: var(--body); max-width: 70ch; margin: 12px 0 22px; }
.qc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.qc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 32px; align-items: start; }
.qc-left { min-width: 0; }

/* ---------- the quote ---------- */
.qc-doc { border: 2px solid #000; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 #000; margin-bottom: 6px; }
.qc-dh { padding: 20px 24px 18px; border-bottom: 2px solid #000; display: flex; flex-direction: column; gap: 10px; }
.qc-vn { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; }
.qc-vn b { font: 800 15px var(--mont); color: #000; letter-spacing: -.01em; }
.qc-vn .mono { margin-left: auto; color: #000; }
.qc-logo { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; box-sizing: border-box; border: 2px solid #000; border-radius: 6px; background: var(--peri); font: 700 10px var(--mono); color: #000; }
.qc-dh h3 { font: 800 26px/1.15 var(--mont); }
.qc-meta { display: flex; flex-wrap: wrap; gap: 6px 26px; margin: 0; }
.qc-meta div { display: flex; flex-direction: column; gap: 1px; }
.qc-meta dt { font: 500 9.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qc-meta dd { margin: 0; font: 600 14px/1.4 var(--sans); color: #000; }
.qc-note { font-size: 13.5px; line-height: 1.5; color: #000; background: var(--peri); border-left: 3px solid #000; padding: 8px 12px; }

.qc-th, .qc-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 96px 240px; column-gap: 18px; padding-left: 24px; padding-right: 24px; }
.qc-th { padding-top: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.qc-th span { font: 500 10px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.qc-th span:nth-child(1) { grid-column: 2; }
.qc-th span:nth-child(2) { grid-column: 3; text-align: right; }
.qc-th span:nth-child(3) { grid-column: 4; }
.qc-row { grid-template-areas: "n hd cost dec" "n ev ev ev"; grid-template-rows: auto auto; row-gap: 10px; padding-top: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--line); transition: box-shadow .2s; }
.qc-row:last-child { border-bottom: 0; }
.qc-row.qc-off { box-shadow: inset 4px 0 0 var(--peony); }
.qc-n { grid-area: n; font: 700 12px/22px var(--mono); color: var(--faint); }
.qc-hd { grid-area: hd; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.qc-hd b { font: 700 16px/1.35 var(--mont); color: #000; }
.qc-hd span { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.qc-row.qc-cd .qc-hd b { color: var(--muted); }
.qc-cost { grid-area: cost; display: flex; flex-direction: column; align-items: flex-end; gap: 1px; text-align: right; }
.qc-cost b { font: 700 15px/22px var(--mono); color: #000; white-space: nowrap; }
.qc-cost s { font: 500 12px/1.4 var(--mono); color: var(--faint); white-space: nowrap; }
.qc-ev { grid-area: ev; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.qc-ev p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--body); }
.qc-ev p b { color: #000; font-weight: 700; }
.qc-el { font: 500 9.5px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-right: 8px; }

/* the call: three words in one key-shaped strip, the chosen one on Deep Sky */
.qc-dec { grid-area: dec; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.qc-seg { display: inline-flex; border: 2px solid #000; border-radius: 10px; overflow: hidden; background: #fff; box-shadow: 0 3px 0 #000; margin-bottom: 3px; }
.qc-b { appearance: none; -webkit-appearance: none; border: 0; border-left: 2px solid #000; border-radius: 0; background: #fff; height: 34px; min-width: 76px; padding: 0 10px; font: 600 13px var(--sans); color: #000; cursor: pointer; transition: background .12s; }
.qc-b:first-child { border-left: 0; }
.qc-b:hover { background: var(--wash); }
.qc-b.on { background: var(--sky); font-weight: 700; }
.qc-b:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--persian); }
.qc-alt { font: 500 11px/1.4 var(--mono); color: var(--muted); }

/* what the data says, after Check usage */
.qc-vd { font-size: 13.5px; line-height: 1.6; color: #000; animation: qc-in .25s ease-out; }
.qc-vd > span:first-child { margin-right: 8px; }
.qc-vd em { margin-left: 10px; vertical-align: 0; }
.qc-flag { display: inline-block; background: var(--peony); color: #000; font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; }
.qc-flag.mv { background: var(--mauve); }
.qc-ok { font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #000; white-space: nowrap; box-shadow: inset 0 -3px 0 var(--sky); }
.qc-x, .qc-m { display: inline-flex; align-items: center; gap: 5px; font: 500 11px/1.4 var(--mono); font-style: normal; white-space: nowrap; }
.qc-x { color: #000; font-weight: 700; box-shadow: inset 0 -2px 0 var(--peony); }
.qc-m { color: var(--muted); }
.qc-m svg { width: 14px; height: 14px; flex: none; }
@keyframes qc-in { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

.qc-tot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 24px; border-top: 2px solid #000; }
.qc-tot span { font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #000; }
.qc-tot b { font: 800 22px var(--mont); color: #000; }
.qc-mini { display: none; }

/* ---------- the running total ---------- */
.qc-side { border-top: 3px solid #000; padding-top: 12px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.qc-sl { color: #000; }
.qc-live { display: flex; flex-direction: column; gap: 14px; }
.qc-nums { display: flex; flex-direction: column; gap: 10px; }
.qc-nums > div { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--line); min-width: 0; }
.qc-nums .mono { color: #000; font-size: 10px; }
.qc-nums b { font: 800 34px/1.1 var(--mont); letter-spacing: -.02em; color: #000; white-space: nowrap; }
.qc-nq b { font-size: 22px; }
.qc-nums small { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.qc-bar { position: relative; display: flex; height: 18px; border: 2px solid #000; background: #fff; box-sizing: border-box; margin-top: 4px; }
.qc-bar i { display: block; height: 100%; transition: width .3s; }
.qc-bar i.p { background: #000; }
.qc-bar i.s { background: var(--sky); }
.qc-bar em { position: absolute; top: -7px; bottom: -7px; width: 5px; margin-left: -2px; background: #fff; border: 1.5px solid #000; box-sizing: border-box; }
.qc-lg { display: flex; flex-wrap: wrap; gap: 4px 14px; font: 500 11px/1.4 var(--mono); color: #000; margin-top: -4px; }
.qc-lg i { display: inline-block; width: 12px; height: 12px; margin-right: 6px; vertical-align: -2px; box-sizing: border-box; border: 1.5px solid #000; }
.qc-lg i.p { background: #000; }
.qc-lg i.s { background: var(--sky); }
.qc-lg i.m { width: 5px; background: #fff; }
.qc-count { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }
.qc-rec { background: var(--wash); border-left: 3px solid #000; padding: 12px 14px; font-size: 14px; line-height: 1.55; color: #222; }
.qc-rec b { display: block; font: 700 15px/1.4 var(--mont); color: #000; margin-bottom: 4px; }
.qc-rec.ok { background: var(--peri); }
.qc-rec a { font-weight: 600; color: #000; text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.qc-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.qc-chk[aria-pressed="true"] { background: var(--sky); }
.qc-reset { border: 0; background: none; padding: 6px 0; margin-bottom: 4px; font: 600 14px var(--sans); color: #000; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; cursor: pointer; }
.qc-reset:hover { text-decoration-color: var(--sky); text-decoration-thickness: 3px; }

.qc-end { margin-top: 32px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.qc-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 62ch; }
.qc-btns { display: flex; gap: 12px; flex-wrap: wrap; }

@media (min-width: 981px) and (min-height: 760px) { .qc-side { position: sticky; top: 116px; } }
@media (max-width: 980px) {
  .qc-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .qc-nums { flex-direction: row; gap: 18px; }
  .qc-nums > div { flex: 1; }
  .qc-mini { display: flex; position: sticky; bottom: 10px; z-index: 5; justify-content: space-between; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; margin-top: 16px; padding: 10px 14px; background: #000; color: #fff; border-radius: 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .qc-mini b { margin-left: 6px; font: 800 17px var(--mont); letter-spacing: -.01em; text-transform: none; color: var(--sky); }
  .qc-mini span:first-child b { color: #fff; }
}
@media (max-width: 720px) {
  .qc-th { display: none; }
  .qc-dh, .qc-tot { padding-left: 16px; padding-right: 16px; }
  .qc-row { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "n hd cost" "ev ev ev" "dec dec dec"; grid-template-rows: auto; column-gap: 10px; row-gap: 10px; padding-left: 16px; padding-right: 16px; }
  .qc-dec { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
  .qc-dh h3 { font-size: 22px; }
  .qc-vn .mono { margin-left: 0; flex-basis: 100%; }
}
@media (max-width: 560px) {
  .qc-nums { flex-direction: column; gap: 8px; }
  .qc-nums > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 0 12px; }
  .qc-nums small { grid-column: 1 / -1; }
  .qc-nums b, .qc-nq b { font-size: 26px; grid-column: 2; grid-row: 1; }
  .qc-dec { flex-direction: column; align-items: stretch; gap: 4px; }
  .qc-seg { display: flex; width: 100%; }
  .qc-b { flex: 1 1 0; min-width: 0; padding: 0 6px; }
}
@media (prefers-reduced-motion: reduce) { .qc-bar i, .qc-row, .qc-b { transition: none; } .qc-vd { animation: none; } }

/* Service detail pages (exec build, src/data/zzzz-detail.js): one page per range item. The hero carries a
   short Paige and Carl exchange in the same Teams-style bubbles as the stories. Prefixes dt- and dm-. */
.sec.dt-hero { padding-top: 56px; padding-bottom: 64px; }
.dt-hw { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.dt-hl { display: flex; flex-direction: column; gap: 18px; }
.dt-hl h1 { font-size: 56px; line-height: 1.05; font-weight: 800; letter-spacing: -.03em; }
.dt-btns { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; }

/* the moment: a static Teams chat */
.dm-chat { --dm-pb: #ECEEF3; border: 2px solid #000; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 #000; overflow: hidden; }
.dm-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1.5px solid #000; }
.dm-bar b { font: 700 13px var(--sans); color: #000; margin-left: 4px; white-space: nowrap; }
.dm-bar .mono { margin-left: auto; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.dm-msgs { list-style: none; margin: 0; padding: 12px 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.dm-m { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; padding-left: 8px; }
.dm-m.dm-c { align-self: flex-end; align-items: flex-end; padding-left: 0; padding-right: 8px; }
.dm-who { font-size: 10px; margin: 6px 2px 3px; }
.dm-b { position: relative; display: block; border-radius: 12px; padding: 8px 12px; font: 400 15px/1.4 var(--sans); color: #000; background: var(--dm-pb); }
.dm-c .dm-b { background: var(--peri); }
.dm-tail { position: absolute; top: 0; width: 10px; height: 12px; }
.dm-p .dm-first { border-top-left-radius: 0; }
.dm-p .dm-tail { left: -8px; color: var(--dm-pb); }
.dm-c .dm-first { border-top-right-radius: 0; }
.dm-c .dm-tail { right: -8px; color: var(--peri); transform: scaleX(-1); }

/* what we do */
.sec.dt-steps { padding-top: 24px; padding-bottom: 72px; }
.sec.dt-sec, .sec.dt-show { padding-top: 72px; padding-bottom: 72px; }
.dt-st { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.dt-st li { border-top: 3px solid #000; padding-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dt-st b { font: 700 19px/1.25 var(--mont); color: #000; }
.dt-st p { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }

/* show it */
.dt-also { margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 15px; }
.dt-also a { font-weight: 600; color: #000; text-decoration: none; background: linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 2.5px no-repeat; padding-bottom: 1px; }
.dt-doc { border: 2px solid #000; border-radius: 14px; overflow: hidden; box-shadow: 0 6px 0 #000; background: #fff; }
.dt-docbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 16px; padding: 10px 16px; border-bottom: 1.5px solid #000; }
.dt-docbar a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; color: #000; }
.dt-doc iframe { display: block; width: 100%; height: 640px; border: 0; }

/* examples: samples, case study and Field Note as full-width rows */
.dt-x { display: flex; flex-direction: column; gap: 14px; }
.dt-xi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) auto; gap: 8px 40px; align-items: center; border: 2px solid #000; border-radius: 14px; box-shadow: 0 5px 0 #000; background: #fff; padding: 20px 26px; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.dt-xi:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #000; }
.dt-xt .mono { display: block; color: var(--muted); margin-bottom: 6px; }
.dt-xt b { display: block; font: 700 19px/1.3 var(--mont); color: #000; }
.dt-xd { margin: 0; font-size: 15.5px; line-height: 1.55; color: var(--body); }
.dt-xl { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; white-space: nowrap; color: #000; }
@media (prefers-reduced-motion: reduce) { .dt-xi { transition: none; } .dt-xi:hover { transform: none; } }

/* questions */
.dt-faq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 64px; }
.dt-faq h2 { font-size: 40px; font-weight: 800; margin-top: 14px; }
.dt-q { border-top: 2px solid #000; }
.dt-q details { border-bottom: 1px solid var(--line); }
.dt-q summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; padding: 18px 0; font: 700 17px/1.35 var(--sans); color: #000; }
.dt-q summary::-webkit-details-marker { display: none; }
.dt-q summary::after { content: '+'; font: 700 22px/1 var(--sans); }
.dt-q details[open] summary::after { content: '\2212'; }
.dt-q p { margin: 0 0 18px; font-size: 16px; line-height: 1.6; color: var(--body); max-width: 60ch; }

@media (max-width: 860px) { .dt-xi { grid-template-columns: minmax(0, 1fr); align-items: start; padding: 18px 20px; } .dt-hw, .dt-faq { grid-template-columns: minmax(0, 1fr); gap: 32px; } .dt-st { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .sec.dt-sec, .sec.dt-show { padding-top: 56px; padding-bottom: 56px; } .sec.dt-hero { padding-top: 40px; padding-bottom: 44px; } .dt-hl h1 { font-size: 40px; } .dt-st { grid-template-columns: 1fr; gap: 20px; } .dt-doc iframe { height: 520px; } .dt-faq h2 { font-size: 32px; } }

/* Service pages, exec build (src/data/zzz-exec.js): the title without the "way in" card, and the range,
   what each service covers, each item linking to its best demo or sample. Prefixes svc- and rg-. */
.sec.svc-hero { padding-top: 72px; padding-bottom: 48px; }
.svc-hero .wrap { display: flex; flex-direction: column; gap: 22px; }
.svc-hero h1 { font-size: 60px; line-height: 1.04; font-weight: 800; letter-spacing: -.03em; max-width: 20ch; }
.svc-way { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 0; margin: 0; font-size: 16px; color: var(--body); }
.svc-way .mono { margin-right: 12px; color: #000; }
.svc-way b { font: 700 16px var(--mont); color: #000; }
.svc-way > :not(.mono):not(:last-child)::after { content: '·'; margin: 0 10px; color: var(--faint); font-weight: 400; }
.svc-free { font-weight: 700; color: #000; }
.sec.rg-sec { padding-top: 40px; }
.sec.ss-sec { padding-bottom: 56px; }

.rg + .rg { margin-top: 44px; }
.rg-sec .sh { margin-bottom: 36px; }
.rg-l { display: block; margin-bottom: 16px; color: #000; }
.rg-line { margin: -6px 0 20px; font: 800 28px/1.2 var(--mont); letter-spacing: -.01em; color: #000; }
.rg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.rg-i { border: 2px solid #000; border-radius: 14px; box-shadow: 0 6px 0 #000; background: #fff; padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.rg-n { color: var(--muted); }
.rg-i b { font: 700 20px/1.25 var(--mont); color: #000; }
.rg-i p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--body); }
.rg-i a { color: #000; font-weight: 600; text-decoration: none; background: linear-gradient(var(--sky), var(--sky)) 0 100% / 100% 2.5px no-repeat; padding-bottom: 1px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.rg-i a:hover { background-image: linear-gradient(#000, #000); }
.rg-go { color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
.rg-go:hover { transform: translateY(-2px); box-shadow: 0 8px 0 #000; }
.rg-more { margin-top: auto; padding-top: 6px; display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14.5px; color: #000; }
@media (prefers-reduced-motion: reduce) { .rg-go { transition: none; } .rg-go:hover { transform: none; } }

@media (max-width: 860px) { .rg-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-way .mono { flex-basis: 100%; margin: 0 0 4px; } .sec.svc-hero { padding-top: 48px; padding-bottom: 32px; } .rg-grid { grid-template-columns: 1fr; gap: 18px; } .rg-i { padding: 18px 18px 22px; } .rg-line { font-size: 22px; } }

/* ---------- widget: sheet-to-register (spreadsheet → lists → app). Prefix sr- ----------
   Floor 16 parts: black rules, keys for the steps, Deep Sky for the selected thing, Peony only as flags with
   black text, numbered pins like the case studies. The spreadsheet looks like Excel (greens and grays) and the
   lists and app look like SharePoint (neutral grays), both inside key-shaped frames. */
.sr { min-width: 0; }
.sr-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sr button:focus-visible, .sr select:focus-visible, .sr textarea:focus-visible, .sr [tabindex]:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }
.sr .key:focus-visible { outline: none; }
.sr-mut { color: var(--muted); }
.sr-flag { display: inline-block; background: var(--peony); color: #000; font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; padding: 1px 6px; white-space: nowrap; vertical-align: 1px; }
.sr-was { font: 500 11px var(--mono); color: var(--muted); border-bottom: 1px dotted var(--muted); cursor: help; white-space: nowrap; }

/* the steps */
.sr-top { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 32px; flex-wrap: wrap; }
.sr-keys { gap: 16px 28px; }
.sr-keys .kl { max-width: 118px; font-size: 10.5px; line-height: 15px; }
.sr-ctl { display: flex; gap: 12px; flex-wrap: wrap; }
.sr-ctl .btn[disabled] { opacity: .35; cursor: default; transform: none; box-shadow: 0 4px 0 #000; }
.sr-ctl .btn[aria-pressed="true"] { box-shadow: 0 4px 0 var(--sky); }
.sr-cap { margin: 28px 0 22px; padding-top: 16px; border-top: 2px solid #000; font-size: 17px; line-height: 1.5; color: #000; }
.sr-end { display: flex; justify-content: space-between; align-items: center; gap: 16px 32px; flex-wrap: wrap; margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--line); }
.sr-end p { margin: 0; font-size: 16px; line-height: 1.5; color: #000; max-width: 62ch; }

/* ---------- 01 the spreadsheet (Excel) ---------- */
.sr-xl { border: 2px solid #000; border-radius: 14px; box-shadow: 0 8px 0 #000; overflow: hidden; background: #fff; font-family: Arial, Helvetica, sans-serif; }
.sr-xt { position: relative; display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 14px; background: #217346; color: #fff; font: 400 13px "Segoe UI", var(--sans); min-width: 0; }
.sr-xi { width: 20px; height: 20px; flex: none; display: flex; align-items: center; justify-content: center; background: #fff; color: #217346; font: 700 13px Arial, sans-serif; border-radius: 3px; }
.sr-xf { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-xs { opacity: .8; }
.sr-xt .sr-pin { flex: none; margin: 0; }
.sr-xr { display: flex; gap: 18px; height: 32px; align-items: stretch; padding: 0 14px; background: #F3F3F3; border-bottom: 1px solid #D4D4D4; font: 400 12.5px "Segoe UI", var(--sans); color: #444; overflow: hidden; white-space: nowrap; }
.sr-xr span, .sr-xr b { display: flex; align-items: center; }
.sr-xr b { font-weight: 600; color: #217346; box-shadow: inset 0 -2px 0 #217346; }
.sr-xfb { display: flex; align-items: stretch; height: 28px; border-bottom: 1px solid #D4D4D4; font-size: 12px; color: #000; }
.sr-nb { width: 64px; flex: none; display: flex; align-items: center; padding: 0 8px; border-right: 1px solid #D4D4D4; }
.sr-fx { display: flex; align-items: center; padding: 0 10px; border-right: 1px solid #D4D4D4; font: italic 400 13px Georgia, serif; color: #666; }
.sr-fv { flex: 1; min-width: 0; display: flex; align-items: center; padding: 0 10px; white-space: nowrap; overflow: hidden; }
.sr-xg { overflow-x: auto; background: #fff; }
.sr-xtb { table-layout: fixed; border-collapse: separate; border-spacing: 0; width: 100%; min-width: 1170px; font: 400 12px/1.3 Arial, Helvetica, sans-serif; color: #000; }
.sr-xtb thead th { height: 22px; padding: 0; background: #F3F3F3; color: #444; font: 400 11.5px Arial, sans-serif; text-align: center; border-right: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; }
.sr-xtb thead th:nth-child(2) { border-left: 3px double #A6A6A6; }   /* column A is hidden */
.sr-xtb thead th.on, .sr-xtb .sr-rn.on { background: #DCEFE3; color: #217346; font-weight: 700; }
.sr-xtb thead th.on { box-shadow: inset 0 -2px 0 #217346; }
.sr-xtb .sr-rn { position: sticky; left: 0; z-index: 2; padding: 0 2px; background: #F3F3F3; color: #444; font: 400 11px Arial, sans-serif; text-align: center; border-right: 1px solid #D4D4D4; border-bottom: 1px solid #D4D4D4; }
.sr-xtb .sr-rn.on { box-shadow: inset -2px 0 0 #217346; }
.sr-xtb td { position: relative; height: 21px; padding: 0; border-right: 1px solid #E4E4E4; border-bottom: 1px solid #E4E4E4; vertical-align: bottom; }
.sr-xc { padding: 2px 4px; white-space: nowrap; overflow: hidden; }
.sr-xtb td.xn .sr-xc { text-align: right; }
.sr-xtb td.xw { vertical-align: top; }
.sr-xtb td.xw .sr-xc { white-space: pre-line; }
.sr-xtb td.xb { font-weight: 700; }
.sr-x1 td { height: 30px; font-size: 18px; }
.sr-xtb td.xnt .sr-xc { font-size: 11px; font-style: italic; color: #C00000; }
.sr-xtb td.xh { height: 34px; background: #1F4E78; color: #fff; font-weight: 700; vertical-align: middle; }
.sr-xtb td.xh .sr-xc { white-space: normal; padding-right: 18px; line-height: 1.2; }
.sr-fb { position: absolute; right: 3px; bottom: 3px; width: 13px; height: 13px; box-sizing: border-box; background: #fff; border: 1px solid #A6A6A6; }
.sr-fb::after { content: ''; position: absolute; left: 3px; top: 4px; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 4px solid #444; }
.sr-x4 td, .sr-x4 th { border-bottom: 2px solid #9E9E9E !important; }
.sr-xtb td.xfz { border-right: 2px solid #9E9E9E; }
.sr-xtb td.xsec { background: #D9D9D9; font-weight: 700; }
.sr-xtb tr.xy td { background: #FFF2CC; }
.sr-xtb tr.xy td:last-child { background: #fff; }
.sr-xtb td.xred { color: #FF0000; font-weight: 700; }
.sr-xtb td.xsm .sr-xc { font-size: 10px; font-style: italic; color: #808080; }
.sr-xtb td.xsel { box-shadow: inset 0 0 0 2px #107C41; z-index: 1; }
.sr-xtb td.xsel::after { content: ''; position: absolute; right: -4px; bottom: -4px; width: 6px; height: 6px; background: #107C41; border: 1px solid #fff; }
.sr-xtabs { display: flex; align-items: stretch; height: 32px; background: #F3F3F3; border-top: 1px solid #D4D4D4; font: 400 12px "Segoe UI", var(--sans); color: #444; overflow: hidden; white-space: nowrap; }
.sr-xtabs span { display: flex; align-items: center; padding: 0 16px; }
.sr-xtabs .on { background: #fff; color: #217346; font-weight: 700; box-shadow: inset 0 -3px 0 #217346; }
.sr-xtabs .sr-plus { padding: 0 12px; font-size: 16px; color: #666; }
/* pins: black circles with a white ring; the money one is a Peony flag; the selected one is Deep Sky */
.sr-pin { position: relative; z-index: 3; display: inline-block; width: 21px; height: 21px; margin: -4px 0 -3px 6px; padding: 0; border: 0; border-radius: 50%; background: #000; color: #fff;
  font: 700 10.5px/21px var(--mono); text-align: center; vertical-align: middle; box-shadow: 0 0 0 2px #fff; cursor: pointer; }
.sr-xtb td.xp .sr-xc { overflow: visible; }
.sr-xtb td.xn .sr-pin { margin: -4px 6px -3px 0; }
.sr-pin.f { background: var(--peony); color: #000; }
.sr-pin.on { background: var(--sky); color: #000; }
.sr-lg { list-style: none; margin: 30px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.sr-lg button { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 12px; width: 100%; padding: 11px 0; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left;
  font: 400 15px/1.5 var(--sans); color: var(--body); }
.sr-lg strong { color: #000; font-weight: 700; }
.sr-lg button:hover strong, .sr-lg button.on strong { text-decoration: underline; text-decoration-color: var(--sky); text-decoration-thickness: 3px; text-underline-offset: 4px; }
.sr-pn { width: 24px; height: 24px; border-radius: 50%; background: #000; color: #fff; font: 700 11px/24px var(--mono); text-align: center; }
.sr-pn.f { background: var(--peony); color: #000; }
.sr-lg button.on .sr-pn { background: var(--sky); color: #000; }

/* ---------- 02 mapped to lists ---------- */
.sr-tally { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.sr-tally div { border-top: 2px solid #000; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sr-tally b { font: 800 38px/1 var(--mont); letter-spacing: -.02em; color: #000; }
.sr-tally span { font-size: 14px; color: var(--muted); }
.sr-m2 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 40px; align-items: start; margin-top: 36px; }
.sr-mh, .sr-mr { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1.25fr); gap: 12px; align-items: center; }
.sr-mh { padding: 0 10px 8px 13px; border-bottom: 2px solid #000; }
.sr-mh .mono { color: #000; }
.sr-mh .mono:last-child { grid-column: 3; }
.sr-mr { width: 100%; padding: 9px 10px 9px 13px; border: 0; border-bottom: 1px solid var(--line); background: none; cursor: pointer; text-align: left; font: 400 14px/1.35 var(--sans); color: var(--body); }
.sr-mr:hover .sr-ms { color: #000; }
.sr-mr.on { box-shadow: inset 3px 0 0 var(--sky); }
.sr-mr.on .sr-ms, .sr-mr.on .sr-md b { font-weight: 700; color: #000; }
.sr-ms b { display: inline-block; min-width: 40px; font: 700 10.5px var(--mono); letter-spacing: .06em; color: var(--muted); }
.sr-ma { display: flex; color: var(--faint); }
.sr-mr.on .sr-ma { color: #000; }
.sr-md b { display: block; font-weight: 600; color: #000; }
.sr-md span { display: block; font-size: 12.5px; color: var(--muted); margin-top: 1px; }
.sr-rules { position: sticky; top: 112px; }
.sr-rules > .mono { display: block; color: #000; padding-bottom: 8px; border-bottom: 2px solid #000; }
.sr-rule { padding: 10px 0 10px 13px; border-bottom: 1px solid var(--line); box-shadow: inset 3px 0 0 transparent; }
.sr-rule.on { box-shadow: inset 3px 0 0 var(--sky); }
.sr-rl { display: block; margin-bottom: 3px; font: 700 10.5px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #000; }
.sr-ba { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 8px; font-size: 14px; line-height: 1.55; color: var(--muted); }
.sr-ba > span:first-child { font: 500 12px/1.7 var(--mono); color: #222; }
.sr-ba b { color: #000; font-weight: 600; }
.sr-lw { margin-top: 44px; }
.sr-lw > .mono { color: #000; }
.sr-lists { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 14px; }
.sr-li { border: 1px solid #E1DFDD; border-radius: 2px; background: #fff; color: #323130; }
.sr-lih { display: flex; align-items: center; gap: 8px; padding: 11px 12px; border-bottom: 1px solid #EDEBE9; }
.sr-lih b { font: 600 15px var(--sans); }
.sr-lih span { margin-left: auto; font: 500 11px var(--mono); color: #605E5C; }
.sr-lic, .sr-lit { list-style: none; margin: 0; padding: 0; }
.sr-lic li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px 12px; border-bottom: 1px solid #F3F2F1; font-size: 13.5px; }
.sr-lic li.hit { box-shadow: inset 3px 0 0 var(--sky); font-weight: 700; color: #000; }
.sr-ty { display: flex; justify-content: center; color: #605E5C; }
.sr-tg { font: 700 11px var(--sans); }
.sr-lic em { font: 500 10.5px var(--mono); font-style: normal; color: #605E5C; text-align: right; }
.sr-lit { display: flex; flex-wrap: wrap; gap: 2px 14px; padding: 10px 12px; font-size: 12.5px; color: #605E5C; }

/* ---------- 03 the app (SharePoint) ---------- */
.sr-rh { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.sr-lede { margin: 0; font-size: 15px; line-height: 1.55; color: var(--body); max-width: 56ch; }
.sr-me { display: flex; flex-direction: column; gap: 6px; }
.sr-me .mono { color: #000; }
.sr-sel { height: 34px; padding: 0 6px; font: 500 13px var(--sans); border: 1.5px solid #000; border-radius: 6px; background: #fff; color: #000; max-width: 100%; cursor: pointer; }
.sr-me .sr-sel { height: 40px; min-width: 210px; font-size: 15px; }
.sr-win { background: #fff; overflow: hidden; }
.sr-win .chrome .u { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sr-win .chrome .r { flex: none; padding-left: 12px; }
.sr-sp { color: #323130; }
.sr-sph { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid #EDEBE9; min-width: 0; }
.sr-sph b { font: 600 16px var(--sans); white-space: nowrap; }
.sr-logo { width: 30px; height: 30px; flex: none; display: flex; align-items: center; justify-content: center; background: #8A8F98; color: #fff; font: 700 12px var(--sans); border-radius: 3px; }
.sr-nav { margin-left: auto; display: flex; gap: 18px; font-size: 13px; color: #605E5C; white-space: nowrap; overflow: hidden; min-width: 0; }
.sr-nav .on { color: #323130; font-weight: 600; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.sr-cmd { display: flex; gap: 20px; padding: 9px 20px; border-bottom: 1px solid #EDEBE9; font-size: 13px; color: #605E5C; white-space: nowrap; overflow: hidden; }
.sr-cmd b { font-weight: 600; color: #323130; }
.sr-lt { padding: 18px 20px 0; }
.sr-lt h4 { font: 600 20px var(--sans); color: #323130; letter-spacing: 0; }
.sr-vr { display: flex; justify-content: space-between; align-items: center; gap: 4px 20px; flex-wrap: wrap; padding: 6px 20px 0; border-bottom: 1px solid #EDEBE9; }
.sr-views { display: flex; flex-wrap: wrap; }
.sr-views .chip { padding: 10px 0 9px; margin-right: 22px; font-size: 14px; color: #605E5C; }
.sr-views .chip.on { color: #000; }
.sr-vn { font: 500 11px var(--mono); color: var(--muted); margin-left: 6px; }
.sr-fl { display: flex; align-items: center; gap: 8px; padding: 4px 0 8px; font-size: 13px; color: #605E5C; }
.sr-fl .sr-sel { height: 30px; border: 1px solid #8A8886; border-radius: 2px; color: #323130; }
.sr-band { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); gap: 20px 32px; padding: 18px 20px; border-bottom: 1px solid #EDEBE9; }
.sr-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; align-content: start; }
.sr-stats div { border-top: 1px solid #323130; padding-top: 8px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sr-stats span { font-size: 12.5px; color: #605E5C; }
.sr-stats b { font: 700 24px/1.15 var(--mont); letter-spacing: -.01em; color: #000; }
.sr-stats em { font-style: normal; font-size: 12px; line-height: 1.4; color: #605E5C; }
.sr-chh { display: block; margin-bottom: 10px; font: 600 13px var(--sans); color: #323130; }
.sr-ch { display: flex; flex-direction: column; gap: 7px; }
.sr-cr { display: grid; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: 12.5px; }
.sr-cl { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-ct { position: relative; height: 12px; }
.sr-ct i { position: absolute; left: 0; top: 0; bottom: 0; }
.sr-cb { z-index: 1; border: 1.5px solid #000; box-sizing: border-box; }
.sr-cs { background: #000; }
.sr-cs.over { background: var(--sky); }
.sr-cv { font: 500 11.5px var(--mono); text-align: right; color: #000; }
.sr-key { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font: 500 10.5px var(--mono); letter-spacing: .04em; color: #000; }
.sr-key i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; vertical-align: -1px; box-sizing: border-box; }
.sr-key .o { border: 1.5px solid #000; }
.sr-key .k { background: #000; }
.sr-key .s { background: var(--sky); }
.sr-tw { overflow: auto; }
.sr-tb { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; color: #323130; }
.sr-tb thead th { background: #fff; border-bottom: 1px solid #EDEBE9; text-align: left; padding: 0; white-space: nowrap; }
.sr-tb thead th button { display: flex; align-items: center; gap: 2px; width: 100%; padding: 11px 8px 10px; border: 0; background: none; font: 600 12.5px var(--sans); color: #605E5C; cursor: pointer; text-align: left; white-space: nowrap; }
.sr-tb thead th.n button { justify-content: flex-end; }
.sr-tb thead th button:hover { background: #F3F2F1; color: #323130; }
.sr-tb thead th[aria-sort="ascending"] button, .sr-tb thead th[aria-sort="descending"] button { color: #323130; }
.sr-tb td { padding: 8px; border-bottom: 1px solid #EDEBE9; white-space: nowrap; vertical-align: middle; }
.sr-tb td.n { text-align: right; font: 500 12px var(--mono); }
.sr-tb tbody tr:not(.sr-gh):hover td { background: #F3F2F1; }
.sr-ti { padding: 0; border: 0; background: none; cursor: pointer; font: 600 13px var(--sans); color: #000; text-align: left; }
.sr-ti:hover { text-decoration: underline; }
.sr-pp { display: inline-flex; align-items: center; gap: 7px; }
.sr-av { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #E1DFDD; color: #323130; font: 600 10px/24px var(--sans); text-align: center; }
.sr-gh th { padding: 10px 8px; background: #fff; border-bottom: 1px solid #EDEBE9; text-align: left; font: 400 13px var(--sans); color: #323130; }
.sr-gh th span { float: right; font: 500 11.5px var(--mono); color: #605E5C; }
.sr-tb tfoot td { border-top: 1px solid #323130; border-bottom: 0; font-weight: 600; color: #000; }
.sr-tb tfoot td.n { font-weight: 700; }
.sr-sm { font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #605E5C; margin-right: 6px; }
.sr-tb td.sr-none, .sr-none { padding: 28px 8px; color: #605E5C; white-space: normal; font-size: 13px; margin: 0; }
.sr-tb .sr-flag { margin-left: 4px; }
/* the project page */
.sr-pg { padding: 16px 20px 24px; }
.sr-bk { padding: 4px 0; border: 0; background: none; cursor: pointer; font: 600 13px var(--sans); color: #323130; }
.sr-bk:hover { text-decoration: underline; }
.sr-pg h4 { font: 600 22px var(--sans); letter-spacing: 0; color: #323130; margin: 8px 0 18px; }
.sr-pf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; margin: 0; }
.sr-pf dt { font-size: 12px; color: #605E5C; }
.sr-pf dd { margin: 3px 0 0; font-size: 14px; color: #323130; }
.sr-uh { display: flex; align-items: baseline; gap: 12px; margin: 26px 0 12px; padding-top: 18px; border-top: 1px solid #EDEBE9; }
.sr-uh h5 { font: 600 16px var(--sans); letter-spacing: 0; color: #323130; }
.sr-uh span { font: 500 11px var(--mono); color: #605E5C; }
.sr-add textarea { display: block; box-sizing: border-box; width: 100%; min-height: 58px; padding: 8px 10px; border: 1px solid #8A8886; border-radius: 2px; font: 400 14px/1.5 var(--sans); color: #323130; resize: vertical; }
.sr-add div { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; margin-top: 8px; font-size: 12.5px; color: #605E5C; }
.sr-spb { height: 32px; padding: 0 16px; border: 1px solid #8A8886; border-radius: 2px; background: #fff; font: 600 13px var(--sans); color: #323130; cursor: pointer; }
.sr-spb:hover { background: #F3F2F1; }
.sr-ups { list-style: none; margin: 16px 0 0; padding: 0; }
.sr-ups li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid #F3F2F1; }
.sr-ud { font: 500 11px var(--mono); color: #605E5C; }
.sr-ups p { flex-basis: 100%; margin: 2px 0 0 31px; font-size: 14px; line-height: 1.5; color: #323130; white-space: pre-line; }

@media (max-width: 1000px) {
  .sr-m2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .sr-rules { position: static; }
  .sr-lists { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-lists .sr-li:first-child { grid-row: span 2; }
  .sr-band { grid-template-columns: minmax(0, 1fr); }
  .sr-pf { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .sr-lg { grid-template-columns: minmax(0, 1fr); }
  .sr-tally { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sr-tally b { font-size: 32px; }
}
@media (max-width: 640px) {
  .sr-keys { gap: 14px 18px; }
  .sr-lists { grid-template-columns: minmax(0, 1fr); }
  .sr-lists .sr-li:first-child { grid-row: auto; }
  .sr-mh, .sr-mr { grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1.15fr); gap: 8px; }
  .sr-mr { font-size: 13px; padding-left: 10px; }
  .sr-ms b { display: block; }
  .sr-sph .sr-nav, .sr-cmd span:nth-child(n+3) { display: none; }
  .sr-sph, .sr-cmd, .sr-lt, .sr-vr, .sr-band, .sr-pg { padding-left: 14px; padding-right: 14px; }
  .sr-cr { grid-template-columns: minmax(0, 110px) minmax(0, 1fr) 38px; }
  .sr-me, .sr-me .sr-sel { width: 100%; }
  .sr-ctl .btn { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .sr .pop { animation: none; } }

/* ---------- the service stories (src/data/story-engine.js, src/widgets/story-*.js). Prefix ss- ----------
   One screen: the frame has a fixed height. Wide screens: the chat beside the panels (the mess and the
   fix share one place). Phones: all three take turns in one frame.
   Brand: bubbles carry the keycap outline (black, small radius); Carl Periwinkle on the right, Paige white
   on the left; Peony flags what is wrong; a black tag for the worst of it; Deep Sky only for the current
   step, the working sweep and the one number that matters. Grid paper behind the stage. Tags are plain
   mono words, not pills. */
.ss { --ss-h: 470px; }
.ss-top { display: flex; justify-content: space-between; align-items: center; gap: 12px 16px; flex-wrap: wrap; margin-bottom: 16px; }
.ss-steps { display: flex; gap: 4px 24px; flex-wrap: wrap; }
.ss-steps button { border: 0; background: none; padding: 6px 0; cursor: pointer; font: 600 15px var(--sans); color: var(--muted); display: inline-flex; gap: 8px; align-items: baseline; }
.ss-steps button .mono { font-size: 11px; }
.ss-steps .ss-s { display: none; }
.ss-steps button[aria-current="step"] { color: #000; box-shadow: inset 0 -3px 0 var(--sky); }
.ss-replay { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.ss button:focus-visible { outline: 3px solid var(--sky); outline-offset: 2px; }

.ss-stage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); grid-template-rows: var(--ss-h); gap: 28px; padding: 28px; border-top: 2px solid #000;
  background-color: #fff; background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size: 24px 24px; }
.ss-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1.5px solid #000; background: #fff; flex: none; }
.ss-bar .mono { font-size: 10.5px; }
.ss-bar .mono + .mono { margin-left: auto; color: var(--muted); text-align: right; }
.ss-note { color: #000 !important; font-weight: 700; }

/* the chat: a fixed window; new messages push old ones up */
.ss-chat { grid-area: 1 / 1; border: 2px solid #000; border-radius: 14px; background: #fff; box-shadow: 0 6px 0 #000; overflow: hidden; display: flex; flex-direction: column; min-height: 0; }
.ss-chat .ss-bar { border-radius: 12px 12px 0 0; }
.ss-av { width: 24px; height: 24px; border: 1.5px solid #000; border-radius: 5px; box-shadow: 0 2px 0 #000; display: inline-flex; align-items: center; justify-content: center; font: 700 11px var(--mono); background: #fff; flex: none; }
.ss-av.ss-c { background: var(--peri); margin-left: -4px; }
.ss-scroll { flex: 1; min-height: 0; overflow: hidden; scroll-behavior: smooth; }
.ss-msgs { list-style: none; margin: 0; padding: 16px 14px 18px; display: flex; flex-direction: column; gap: 8px; min-height: 100%; justify-content: flex-end; box-sizing: border-box; }
.ss-m { display: flex; flex-direction: column; align-items: flex-start; max-width: 86%; animation: ss-in .35s ease both; }
.ss-m:not(.on) { display: none; }
.ss-m.ss-c { align-self: flex-end; align-items: flex-end; }
@keyframes ss-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.ss-who { font-size: 10px; margin: 6px 4px 3px; }
.ss-b { display: block; position: relative; border-radius: 12px; padding: 8px 12px; font: 400 15px/1.4 var(--sans); color: #000; background: var(--ss-pb); }
.ss-b em { font-style: italic; font-weight: 700; }
.ss-c .ss-b { background: var(--peri); }
.ss-chat { --ss-pb: #ECEEF3; }
.ss-typing { display: none; align-self: flex-start; gap: 4px; border-radius: 12px; padding: 11px 13px; margin: 0 8px; background: var(--ss-pb); }
.ss-typing.ss-c { align-self: flex-end; background: var(--peri); }
.ss-typing.on { display: inline-flex; }
.ss-typing span { width: 6px; height: 6px; border-radius: 50%; background: #000; animation: ss-dot 1s infinite ease-in-out; }
.ss-typing span:nth-child(2) { animation-delay: .15s; } .ss-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes ss-dot { 0%, 60%, 100% { opacity: .25; transform: none; } 30% { opacity: 1; transform: translateY(-2px); } }

/* the mess and the fix, in the same place */
.ss-panel { grid-area: 1 / 2; position: relative; border: 2px solid #000; background: #fff; overflow: hidden; transition: opacity .5s; min-height: 0; display: flex; flex-direction: column; }
.ss-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.ss-fixp { opacity: 0; pointer-events: none; }
.ss-done .ss-mess { opacity: 0; pointer-events: none; }
.ss-done .ss-fixp { opacity: 1; pointer-events: auto; }
.ss-mess .sr { opacity: .18; transition: opacity .3s, background .3s; }
.ss-mess .sr.on { opacity: 1; }
.ss-marked:not(.ss-done) .sf { background: color-mix(in srgb, var(--peony) 22%, #fff); box-shadow: inset 3px 0 0 var(--peony); }
.ss-marked:not(.ss-done) .sf-k { background: none; box-shadow: inset 3px 0 0 #000; font-weight: 700; }
.ss-tag { margin-left: auto; padding: 2px 7px; background: #000; color: #fff; font: 700 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.ss-sweep { position: absolute; left: 0; right: 0; top: 40px; height: 3px; background: var(--sky); opacity: 0; }
.ss-working .ss-sweep { opacity: 1; animation: ss-sweep 2.4s ease-in-out forwards; }
@keyframes ss-sweep { from { top: 40px; } to { top: calc(100% - 6px); } }
.ss-fixp .sx { opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.ss-fixp .sx.on { opacity: 1; transform: none; }
.ss-key b, .ss-hl { background: linear-gradient(transparent 62%, var(--sky) 62%, var(--sky) 92%, transparent 92%); }
.st-num.ss-key b { display: inline; align-self: flex-start; }
.st-nums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 20px; padding: 14px 18px 4px; }
.st-num { border-top: 1px solid var(--line); padding: 10px 0 12px; display: flex; flex-direction: column; gap: 4px; }
.st-num b { font: 800 32px/1.05 var(--mont); letter-spacing: -.02em; color: #000; }
.st-num span { font-size: 14px; line-height: 1.4; color: var(--body); }
.ss-list { margin: auto 18px 16px; padding-top: 12px; border-top: 2px solid #000; }
.ss-list ol { list-style: none; counter-reset: ssf; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ss-list li { counter-increment: ssf; display: grid; grid-template-columns: 26px minmax(0, 1fr); font: 600 15px/1.4 var(--sans); color: #000; }
.ss-list li::before { content: counter(ssf, decimal-leading-zero); font: 600 11px/1.9 var(--mono); color: var(--muted); }
.ss-cap { margin: 14px 0 0; font-size: 17px; line-height: 1.5; color: #222; min-height: 52px; max-width: 70ch; }

/* Assess: the shared drive */
.st-tree { list-style: none; margin: 0; padding: 8px 0; }
.st-tree li { display: flex; align-items: center; gap: 8px; padding: 3px 14px 3px calc(14px + var(--d) * 18px); font: 500 13.5px/1.35 var(--sans); color: #000; }
.st-tree svg { flex: none; }
.st-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.st-meta { margin-left: auto; padding-left: 12px; font: 500 11px var(--mono); color: var(--muted); white-space: nowrap; }

/* Structure: three ways to file it, then one structure */
.sm-filers { display: flex; flex-direction: column; padding: 4px 16px 0; }
.sm-filer { padding: 12px 0; border-bottom: 1px solid var(--line); }
.sm-filer > .mono { font-size: 10px; display: block; margin-bottom: 6px; }
.sm-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font: 600 14px/1.3 var(--sans); color: #000; }
.sm-path i { font-style: normal; color: var(--muted); }
.sm-filer ul { list-style: none; margin: 6px 0 0 22px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.sm-filer li { font: 500 12.5px/1.5 var(--mono); color: var(--body); padding: 1px 6px; }
.sm-search { margin: auto 16px 16px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border: 1.5px solid #000; padding: 9px 12px; }
.sm-q { font: 500 14px var(--sans); color: #000; }
.sm-hits { font: 700 12px var(--mono); letter-spacing: .06em; color: #000; padding: 1px 6px; white-space: nowrap; }
.sm-home { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.sm-home > .mono { display: block; font-size: 10px; margin-bottom: 8px; }
.sm-file { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.sm-file b { font: 700 15px/1.3 var(--mont); color: #000; }
.sm-tags { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.sm-tags span { font: 500 13px var(--sans); color: #000; }
.sm-tags em { font: 600 10px var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-style: normal; margin-right: 6px; }
.sm-after { margin-top: 16px; }
.sm-after .sm-hits { font: 800 16px/1.15 var(--mont); letter-spacing: 0; padding: 0 2px; }
.sm-along { margin: auto 18px 16px; padding-top: 10px; border-top: 2px solid #000; font: 600 14px/1.4 var(--sans); color: #000; }

/* Build: Tom's workbook, then the dashboard that replaces it */
.sb-xl { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; font: 400 12.5px/1.2 var(--sans); color: #000; }
.sb-fx { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); flex: none; }
.sb-ref { font: 600 11px var(--mono); border: 1px solid var(--line); padding: 2px 8px; }
.sb-fx i { font: italic 700 12px var(--sans); color: var(--muted); }
.sb-fx code { font: 500 11.5px var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.sb-gw { flex: 1; min-height: 0; overflow: hidden; }
.sb-grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.sb-grid th, .sb-grid td { border: 1px solid var(--line); padding: 0 7px; height: 27px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: left; }
.sb-grid th { width: 28px; padding: 0; background: var(--wash); color: var(--muted); font: 500 10.5px var(--mono); text-align: center; }
.sb-cols th { height: 20px; }
.sb-cols th:nth-child(2) { width: 24%; } .sb-cols th:nth-child(3) { width: 12%; } .sb-cols th:nth-child(4) { width: 14%; } .sb-cols th:nth-child(5) { width: 15%; }
.sb-n { text-align: right !important; font-variant-numeric: tabular-nums; }
.sb-h1 { font-weight: 700; font-size: 13.5px; }
.sb-hd td { font-weight: 700; background: var(--wash); }
.sb-y { background: #FFF4B8; }
.sb-err { color: #C42B1C; font-weight: 700; }
.sb-note { color: var(--muted); font-style: italic; }
.sb-sel { outline: 2px solid #000; outline-offset: -2px; }
.sb-tabs { flex: none; display: flex; border-top: 1px solid var(--line); background: var(--wash); overflow: hidden; }
.sb-tabs span { padding: 6px 12px; font-size: 11.5px; color: var(--muted); border-right: 1px solid var(--line); white-space: nowrap; }
.sb-tabs .on { background: #fff; color: #000; font-weight: 600; box-shadow: inset 0 -2px 0 #000; }
.sb-sticky { position: absolute; right: 18px; bottom: 34px; width: 128px; padding: 10px 12px 12px; background: #FFF1A6; box-shadow: 0 6px 14px rgba(0, 0, 0, .16); transform: rotate(-3deg); font: 500 13px/1.3 var(--sans); display: flex; flex-direction: column; }
.sb-sticky b { font: 800 26px/1.1 var(--mont); }
.sb-dash { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 8px; }
.sb-src { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font-size: 12px; color: var(--body); }
.sb-src i { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sky) 25%, #fff); margin-right: 7px; vertical-align: 1px; }
.sb-src em { margin-left: auto; font: 500 10px var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); font-style: normal; }
.sb-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sb-kpi { border: 1.5px solid #000; border-radius: 8px; box-shadow: 0 3px 0 #000; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-kpi > .mono { font-size: 9.5px; }
.sb-kpi b { font: 800 26px/1.05 var(--mont); letter-spacing: -.02em; color: #000; }
.sb-kpi b small { font: 700 13px var(--sans); letter-spacing: 0; color: var(--muted); }
.sb-kpi > span:not(.mono) { font-size: 11.5px; color: var(--muted); }
.sb-kpi > .sb-up { color: #000; font-weight: 600; }
.sb-spark { width: 100%; height: 20px; margin-top: auto; }
.sb-kr { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.sb-ring { width: 34px; height: 34px; flex: none; }
.sb-meter { position: relative; height: 8px; background: var(--line); border-radius: 4px; margin: 4px 0 2px; }
.sb-meter i { position: absolute; top: 0; bottom: 0; left: 0; background: var(--sky); border-radius: 4px; }
.sb-meter u { position: absolute; top: -3px; bottom: -3px; width: 2px; background: #000; }
.sb-chart { border: 1.5px solid #000; border-radius: 8px; padding: 10px 12px 8px; }
.sb-chd { display: flex; justify-content: space-between; gap: 10px; }
.sb-chd .mono { font-size: 9.5px; }
.sb-bars { position: relative; height: 104px; display: flex; align-items: flex-end; gap: 8px; margin-top: 18px; border-bottom: 1.5px solid #000; }
.sb-bars i { flex: 1; position: relative; z-index: 1; background: var(--peri); border: 1.5px solid #000; border-bottom: 0; border-radius: 3px 3px 0 0; }
.sb-bars i.now { background: var(--sky); }
.sb-bars em { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 2px; padding: 0 3px; background: #fff; white-space: nowrap; font: 600 9.5px var(--mono); font-style: normal; color: var(--muted); }
.sb-bars i.now em { color: #000; font-weight: 700; }
.sb-bars u { position: absolute; left: 0; right: 0; border-top: 1.5px dashed #000; }
.sb-wk { display: flex; gap: 8px; margin-top: 4px; }
.sb-wk span { flex: 1; text-align: center; font: 500 9.5px var(--mono); color: var(--muted); }
.sb-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; margin-top: auto; }
.sb-nums .st-num { padding: 8px 0 2px; }
.sb-nums .st-num b { font-size: 22px; }
.sb-nums .st-num span { font-size: 12.5px; }

/* AI: the answer that should never have happened, then the boundary */
.sa-q { align-self: flex-end; margin: 16px 16px 8px; border: 1.5px solid #000; border-radius: 10px; padding: 8px 12px; font: 400 15px/1.4 var(--sans); color: #000; background: #fff; }
.sa-a { margin: 0 16px; border: 1.5px solid #000; border-radius: 10px; padding: 10px 12px; background: var(--wash); }
.sa-a p { margin: 0; font: 400 15px/1.45 var(--sans); color: #000; }
.sa-table { width: 100%; border-collapse: collapse; margin-top: 8px; }
.sa-table td { padding: 4px 0; font: 500 13px var(--sans); }
.sa-table td:first-child { width: 42%; }
.sa-blur { filter: blur(4px); user-select: none; }
.sa-table i { display: block; height: 10px; background: #000; }
.sa-src { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 10px; }
.sa-src span { font: 600 11px var(--mono); color: #000; padding: 2px 6px; }
.sa-sees { margin: 14px 16px 0; }
.sa-sees > .mono { font-size: 10px; }
.sa-sees ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px 12px; }
.sa-sees li { font: 600 14px var(--sans); color: #000; }
.sa-sees li.no { color: var(--muted); text-decoration: line-through; }
.sa-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding-bottom: 14px; }
.sa-nums .st-num b { font-size: 26px; }

/* Lead: the pile with no owner, then the year on one page */
.sl-pile { list-style: none; margin: 0; padding: 6px 16px; }
.sl-pile li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.sl-pile b { display: block; font: 700 15px/1.3 var(--mont); color: #000; }
.sl-pile span { font: 500 12.5px var(--mono); color: var(--muted); }
.sl-pile em { font: 700 11px var(--mono); font-style: normal; letter-spacing: .06em; color: #000; padding: 2px 6px; white-space: nowrap; }
.sl-plan { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; padding: 18px 18px 6px; }
.sl-q { border-top: 2px solid #000; padding-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.sl-q > .mono { font-size: 10px; }
.sl-q b { font: 700 15px/1.3 var(--mont); color: #000; }
.sl-q span:last-child { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.sl-nums { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 12px; padding-bottom: 14px; }
.sl-nums .st-num b { font-size: 26px; }

/* phones and tablets: one frame, the beats take turns in it */
@media (max-width: 860px) {
  .ss { --ss-h: 500px; }
  .ss-top { flex-wrap: nowrap; margin-bottom: 12px; }
  .ss-steps { flex-wrap: nowrap; gap: 4px 14px; }
  .ss-steps button { font-size: 14px; white-space: nowrap; }
  .ss-steps button .mono, .ss-steps .ss-l, .ss-rt { display: none; }
  .ss-steps .ss-s { display: inline; }
  .ss-replay { padding-left: 10px; padding-right: 10px; flex: none; }
  .ss-stage { grid-template-columns: minmax(0, 1fr); padding: 14px; gap: 0; }
  .ss-chat, .ss-panel { grid-area: 1 / 1; transition: opacity .5s; }
  .ss-chat { box-shadow: none; }
  .ss-mess { opacity: 0; pointer-events: none; }
  .ss[data-step="1"] .ss-chat, .ss[data-step="2"] .ss-chat, .ss[data-step="3"] .ss-chat { opacity: 0; pointer-events: none; }
  .ss[data-step="1"] .ss-mess, .ss[data-step="2"] .ss-mess { opacity: 1; pointer-events: auto; }
  .st-tree li { padding-top: 2px; padding-bottom: 2px; font-size: 13px; }
  .st-meta { display: none; }
  .st-nums { padding-top: 8px; }
  .st-num { padding: 8px 0 10px; }
  .st-num b { font-size: 26px; }
  .st-num span { font-size: 13px; }
  .ss-list { margin-bottom: 12px; }
  .ss-list li { font-size: 13.5px; }
  .sb-d, .sb-e { display: none; }
  .sb-cols th:nth-child(2) { width: 46%; } .sb-cols th:nth-child(3) { width: 22%; } .sb-cols th:nth-child(4) { width: auto; }
  .sb-tabs span:nth-child(n+4) { display: none; }
  .sb-sticky { right: 12px; bottom: 40px; }
  .sb-dash { padding: 10px 12px 6px; gap: 10px; }
  .sb-src span:nth-child(3), .sb-src em { display: none; }
  .sb-kpis { grid-template-columns: 1fr 1fr; }
  .sb-kpi:nth-child(3), .sb-bars i:nth-child(-n+2), .sb-wk span:nth-child(-n+2) { display: none; }
  .sb-nums, .sa-nums, .sl-nums { grid-template-columns: 1fr 1fr; }
  .sb-nums .st-num:nth-child(2) { display: none; }
  .sa-nums .st-num:nth-child(3), .sl-nums .st-num:nth-child(3) { display: none; }
  .sl-plan { grid-template-columns: 1fr 1fr; gap: 10px 12px; padding-top: 12px; }
  .sl-pile li { padding: 8px 0; }
  .ss-cap { font-size: 16px; min-height: 100px; }
}
@media (prefers-reduced-motion: reduce) { .ss-m { animation: none; } .ss-mess .sr, .ss-panel, .ss-chat, .ss-fixp .sx { transition: none; } .ss-typing span { animation: none; } .ss-scroll { scroll-behavior: auto; } }


/* on a service page the story sits right under the headline (exec build, src/data/zzz-exec.js) */
.sec.ss-sec { padding-top: 8px; }
@media (max-width: 640px) { .sec.ss-sec { padding-top: 0; } }

/* the chat reads as a Teams chat: names in the title bar, a tail on the first bubble of each turn, a compose bar */
.ss-chat .ss-bar { gap: 8px; }
.ss-names { font: 700 13px var(--sans); color: #000; margin-left: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ss-chat .ss-bar .mono { margin-left: auto; color: var(--muted); white-space: nowrap; }
.ss-m.ss-p { padding-left: 8px; }
.ss-m.ss-c { padding-right: 8px; }
.ss-tail { position: absolute; top: 0; width: 10px; height: 12px; color: var(--ss-pb); }
.ss-p .ss-first { border-top-left-radius: 0; }
.ss-p .ss-tail { left: -8px; }
.ss-c .ss-first { border-top-right-radius: 0; }
.ss-c .ss-tail { right: -8px; color: var(--peri); transform: scaleX(-1); }
.ss-who { margin-left: 2px; margin-right: 2px; }
.ss-compose { flex: none; margin: 8px 12px 12px; border: 1.5px solid var(--line); border-bottom: 2px solid #000; border-radius: 6px; padding: 9px 12px; font: 400 14px var(--sans); color: var(--muted); background: #fff; }

/* who-can-open: seven people, eight places, Before and After. Peony only for "shouldn't", a dashed outline for
   "missing", Deep Sky for the chosen person and the After switch. Cards on desktop, a list on phones. */
.wc { position: relative; }
.wc .wc-top { display: flex; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; }
.wc .wc-top .mono:first-child { color: #000; }
.wc-hd { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-top: 16px; }
.wc-hd h3 { font: 800 32px/1.1 var(--mont); color: #000; }
.wc-in { margin-top: 8px; font-size: 15.5px; line-height: 1.55; color: var(--body); max-width: 62ch; }

/* the switch */
.wc-ba { display: inline-flex; flex: none; border: 2px solid #000; border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 4px 0 #000; margin-bottom: 4px; }
.wc-ba button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 156px; padding: 9px 18px 8px; border: 0; background: #fff; color: #000; text-align: left; cursor: pointer; }
.wc-ba button + button { border-left: 2px solid #000; }
.wc-ba b { font: 800 18px/1.2 var(--mont); }
.wc-ba span { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wc-ba button:hover { background: var(--wash); }
.wc-ba button.on { background: #000; color: #fff; }
.wc-ba button.on span { color: #fff; }
.wc-ba button[data-v="1"].on { background: var(--sky); color: #000; }
.wc-ba button[data-v="1"].on span { color: #000; }
.wc-ba button:focus-visible { outline: 3px solid var(--persian); outline-offset: -6px; }

/* the summary: two numbers, highlighted Peony before and Deep Sky after */
.wc-sum { display: flex; align-items: flex-end; gap: 14px 36px; flex-wrap: wrap; margin: 22px 0 24px; padding: 16px 0 18px; border-top: 2px solid #000; border-bottom: 1px solid var(--line); }
.wc-n { display: flex; align-items: baseline; gap: 10px; }
.wc-n b { font: 800 48px/1 var(--mont); letter-spacing: -.02em; color: #000; padding: 0 4px; background: linear-gradient(transparent 60%, var(--peony) 60%, var(--peony) 94%, transparent 94%); }
.wc-n.miss b { background: linear-gradient(transparent 60%, var(--peri) 60%, var(--peri) 94%, transparent 94%); }
.wc-n.z b { background: linear-gradient(transparent 60%, var(--sky) 60%, var(--sky) 94%, transparent 94%); }
.wc-n span { font: 600 15px/1.3 var(--sans); color: #000; max-width: 17ch; text-wrap: balance; }
.wc-st { flex: 1 1 280px; font-size: 14px; line-height: 1.5; color: var(--muted); }
.wc-st b { color: #000; }

/* people on the left, the chosen person's places on the right */
.wc-main { display: grid; grid-template-columns: 292px minmax(0, 1fr); gap: 28px; align-items: start; }
.wc-lab { display: block; color: #000; margin-bottom: 10px; }
.wc-ps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.wc-ps > li { margin: 0; min-width: 0; }
.wc-p { width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-areas: "av n" "av s"; gap: 5px 12px; align-items: center; padding: 9px 12px; border: 2px solid #000; border-radius: 12px; background: #fff; color: #000; text-align: left; cursor: pointer; transition: background-color .15s; }
.wc-p:hover { background: var(--wash); }
.wc-p.on { background: var(--sky); box-shadow: 0 4px 0 #000; }
.wc-av { grid-area: av; width: 34px; height: 34px; border-radius: 50%; border: 2px solid #000; background: var(--peri); display: flex; align-items: center; justify-content: center; font: 800 14px var(--mont); color: #000; }
.wc-p.gone .wc-av { background: #fff; border-style: dashed; }
.wc-pn { grid-area: n; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 8px; min-width: 0; }
.wc-pn b { font: 700 15px/1.3 var(--sans); }
.wc-pn small { font-size: 12.5px; line-height: 1.3; color: var(--muted); }
.wc-p.on .wc-pn small { color: #000; }
.wc-strip { grid-area: s; display: flex; gap: 3px; }
.wc-strip i, .wc-key i { width: 14px; height: 14px; flex: none; box-sizing: border-box; border: 1.5px solid #000; border-radius: 3px; background: #000; }
.wc-strip i.off, .wc-key i.off { background: #fff; border-color: #B4B9C2; }
.wc-strip i.bad, .wc-key i.bad { background: var(--peony); }
.wc-strip i.miss, .wc-key i.miss { background: #fff; border-style: dashed; }

.wc-pan { min-width: 0; }
.wc-ph { display: flex; flex-direction: column; gap: 6px; padding-bottom: 16px; }
.wc-ph h4 { font: 800 26px/1.2 var(--mont); color: #000; }
.wc-ph h4 span { display: inline-block; margin-left: 12px; font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); vertical-align: 4px; }
.wc-ph p { font-size: 15px; line-height: 1.5; color: var(--body); }
.wc-chs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.wc-ch { padding: 3px 11px; border: 1.5px solid #000; border-radius: 999px; background: #fff; font: 600 13px/1.4 var(--sans); color: #000; }
.wc-ch.bad { background: var(--peony); }
.wc-ch.miss { border-style: dashed; }
.wc-ch.ok { background: var(--sky); }
.wc-ch.zero { background: #fff; border-style: solid; border-color: var(--line); color: var(--muted); }

/* the place cards */
.wc-cs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 12px; }
.wc-c { margin: 0; min-width: 0; min-height: 160px; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "mk fl" "t t" "lv lv" "w w"; align-content: start; gap: 4px 8px; padding: 12px 12px 14px; border: 2px solid #000; border-radius: 12px; background: #fff; color: #000; box-shadow: 0 4px 0 #000; }
.wc-mk { grid-area: mk; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; background: #000; color: #fff; box-sizing: border-box; }
.wc-fl { grid-area: fl; justify-self: end; align-self: start; padding: 1px 6px; background: #000; color: #fff; font: 700 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; text-align: right; }
.wc-t { grid-area: t; margin-top: 8px; font: 700 15px/1.25 var(--mont); letter-spacing: -.01em; color: #000; overflow-wrap: anywhere; }
.wc-t small { display: block; font: 500 9.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.wc-lv { grid-area: lv; font: 600 13.5px/1.35 var(--sans); }
.wc-why { grid-area: w; font-size: 13px; line-height: 1.4; color: var(--body); }
.wc-g { grid-area: w; justify-self: start; margin-top: 2px; padding: 2px 7px; border-radius: 4px; background: var(--peri); color: #000; font: 700 10px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.wc-c.off { background: var(--wash); border-color: var(--line); box-shadow: none; color: var(--muted); }
.wc-c.off .wc-mk { background: #fff; color: var(--faint); border: 1.5px solid var(--line); }
.wc-c.off .wc-t, .wc-c.off .wc-why { color: var(--muted); }
.wc-c.bad { background: var(--peony); }
.wc-c.bad .wc-why, .wc-c.bad .wc-t small { color: #000; }
.wc-c.miss { border-style: dashed; box-shadow: none; }
.wc-c.miss .wc-mk { background: #fff; color: #000; border: 2px dashed #000; }
.wc-c.miss .wc-fl { background: var(--peri); color: #000; }
@keyframes wc-in { from { opacity: 0; transform: translateY(6px); } }
.wc-cs > li { animation: wc-in .3s ease both; animation-delay: calc(var(--i) * 30ms); }

.wc-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--body); }
.wc-key span { display: inline-flex; align-items: center; gap: 8px; }
.wc-key .wc-kt { color: var(--muted); }
.wc-end { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 14px 28px; flex-wrap: wrap; }
.wc-end p { font-size: 15px; line-height: 1.55; color: var(--body); max-width: 64ch; }
.wc-btns { display: flex; gap: 12px; flex-wrap: wrap; }
.wc-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) { .wc-cs > li { animation: none; } .wc-p { transition: none; } }
@media (max-width: 1040px) {
  .wc-main { grid-template-columns: 1fr; gap: 24px; }
  .wc-ps { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
}
@media (max-width: 760px) { .wc-cs { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wc-hd h3 { font-size: 27px; } }
@media (max-width: 560px) {
  .wc-hd { margin-top: 12px; }
  .wc-ba { display: flex; width: 100%; }
  .wc-ba button { flex: 1 1 0; min-width: 0; padding: 8px 12px; }
  .wc-sum { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; margin: 20px 0; align-items: start; }
  .wc-n { flex-direction: column; align-items: flex-start; gap: 6px; }
  .wc-n b { font-size: 40px; }
  .wc-n span { font-size: 14px; }
  .wc-st { grid-column: 1 / -1; }
  .wc-ps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .wc-p { grid-template-columns: 28px minmax(0, 1fr); grid-template-areas: "av n" "s s"; gap: 7px 8px; padding: 8px 10px; align-items: start; }
  .wc-av { width: 28px; height: 28px; font-size: 12px; }
  .wc-pn { flex-direction: column; gap: 0; }
  .wc-pn b { font-size: 14px; }
  .wc-pn small { font-size: 11.5px; }
  .wc-strip i { width: 12px; height: 12px; }
  .wc-ph h4 { font-size: 23px; }
  .wc-ph h4 span { display: block; margin: 4px 0 0; vertical-align: 0; }
  .wc-cs { grid-template-columns: 1fr; gap: 8px; }
  .wc-c { min-height: 0; grid-template-columns: 32px minmax(0, 1fr) auto; grid-template-areas: "mk t fl" "mk lv lv" "mk w w"; gap: 2px 12px; padding: 10px 12px 11px; box-shadow: 0 3px 0 #000; }
  .wc-c.off, .wc-c.miss { box-shadow: none; }
  .wc-t { margin-top: 0; align-self: center; }
  .wc-fl { align-self: center; }
  .wc-key { gap: 8px 16px; }
  .wc-key .wc-kt { flex-basis: 100%; }
}