/* ==========================================================================
   The shell
   ==========================================================================

   One visual language for the whole tool, in tokens. Every brand colour comes
   from a variable, so a second firm gets its own without a build and without a
   hex typed into a screen.

   Every rule here is scoped under #shell. The old screens are still in the
   page with their own stylesheet, and they share class names with this one:
   .sbody there means a step pane that is closed unless you open it. Nothing
   here restyles them, and nothing there reaches in.
   ========================================================================== */

:root{
  --brand-deep:#232F38;
  --brand-mid:#B13B2F;
  --brand-tone:#B13B2F;
  --brand-bright:#E46154;
  /* text that sits on the bright colour. Navy on turquoise, never white. */
  --brand-accent-text:#232F38;

  --paper:#f3f5f8;
  --sheet:#ffffff;
  --edge:#e2e7ec;
  --edge-soft:#eef2f6;
  --ink:#16202f;
  --ink-soft:#4a5666;
  --ink-faint:#78859a;

  --t-known:var(--brand-deep);
  --t-inferred:#FCECEA;
  --t-inferred-ink:#B13B2F;
  --t-assumed:#fbe7d3;
  --t-assumed-ink:#8a4a14;
  --t-open:#8a93a3;

  --ok:#0d7a52;
  --caution:#8a4a14;
  --stop:#a4262c;

  --r:12px;
  --r-sm:8px;
  --lift:0 1px 2px rgba(16,32,64,.05);
  --lift-up:0 10px 34px color-mix(in srgb, var(--navy) 16%, transparent);
  --mono:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* The type. A pack that names a face has applyFonts() write it over these,
     and a pack that names none keeps the stack the tool ships with. */
  --font-ui:"Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display:var(--font-ui);
}

body.shellon{overflow:hidden}
body.shellon #oldapp{position:absolute; left:-10000px; top:0; width:1400px;
  opacity:0; pointer-events:none}

#shell{position:fixed; inset:0; display:flex; flex-direction:column;
  background:var(--paper); color:var(--ink); z-index:50;
  font:15px/1.5 var(--font-ui)}
#shell.hide{display:none}
#shell *{box-sizing:border-box}
#shell h1, #shell h2, #shell h3{margin:0; font-weight:650; letter-spacing:-.01em}
#shell button{font:inherit}
#shell .mono{font-family:var(--mono)}
#shell .sub{color:var(--ink-faint)}
#shell details summary{cursor:pointer; font-size:13.5px; color:var(--ink-soft)}

/* ---- the top bar -------------------------------------------------------- */

#shell .topbar{flex:0 0 auto; display:flex; align-items:center; gap:14px;
  padding:9px 16px; background:var(--brand-deep); color:#fff}
#shell .topaccent{flex:0 0 auto; height:3px;
  background:linear-gradient(90deg, var(--brand-bright), var(--brand-tone), var(--brand-deep))}
#shell .topleft{display:flex; align-items:center; gap:12px; min-width:0}
#shell .wordmark{display:flex; align-items:center; gap:8px; background:none; border:0;
  color:#fff; font-size:19px; font-weight:700; letter-spacing:-.02em; cursor:pointer;
  padding:6px 4px; border-radius:var(--r-sm)}
#shell .wordmark:hover{background:rgba(255,255,255,.08)}
#shell .wordmark img{height:22px; width:auto}
/* the Marked logo: the cairn and the name in Helvetica Neue Bold (screenshot 78) */
.mkcairn{height:24px; width:auto; display:block}
.mkcairn.ondark{filter:brightness(0) invert(1)}
.mkname{font-family:"Helvetica Neue", Helvetica, Arial, sans-serif; font-weight:700; letter-spacing:-.02em}
#shell .wordmark #topName{display:flex; align-items:center; gap:7px}
#shell .wordmark .mkname{font-size:22px; line-height:1}
#shell .acctswitch{position:relative; min-width:0}
#shell .acctswitch.hide{display:none}
#shell .acctbtn{display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.16); color:#fff; border-radius:var(--r-sm);
  padding:7px 12px; cursor:pointer; max-width:420px; min-height:38px}
#shell .acctbtn:hover{background:rgba(255,255,255,.18)}
#shell .acctbtn b{font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#shell .acctbtn .sub{color:rgba(255,255,255,.72); font-size:12.5px; white-space:nowrap}
#shell .caret{width:0; height:0; border:4px solid transparent; border-top-color:currentColor;
  display:inline-block; margin-top:3px; opacity:.8}
#shell .acctmenu{position:absolute; top:calc(100% + 6px); left:0; min-width:320px;
  background:var(--sheet); color:var(--ink); border:1px solid var(--edge);
  border-radius:var(--r); box-shadow:var(--lift-up); padding:6px; z-index:60}
#shell .acctmenu.hide{display:none}
#shell .acctmenu button{display:flex; width:100%; text-align:left; gap:8px;
  align-items:baseline; background:none; border:0; padding:9px 10px;
  border-radius:var(--r-sm); cursor:pointer; color:var(--ink); font-size:14px}
#shell .acctmenu button:hover{background:var(--edge-soft)}
#shell .acctmenu hr{border:0; border-top:1px solid var(--edge); margin:6px 4px}
#shell .acctmenu button span{flex:1; min-width:0}
#shell .acctmenu button i{font:500 12px var(--mono); color:var(--ink-faint); font-style:normal}
#shell .acctmenu button.red{color:var(--stop)}
#shell .amlab{font:600 10.5px/1 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); padding:8px 10px 6px}
#shell .amform{padding:8px 10px 10px}
#shell .amform b{display:block; font-size:14px; margin-bottom:6px}
#shell .amform label{display:block; font:600 10.5px/1 var(--mono); letter-spacing:.07em;
  text-transform:uppercase; color:var(--ink-faint); margin:8px 0 4px}
#shell .amform input{width:100%; padding:8px 10px; border:1px solid var(--edge);
  border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink)}
#shell .amform .sub{font-size:12px; color:var(--ink-faint); line-height:1.5; margin:8px 0 0}
#shell .amform .acts{display:flex; gap:8px; margin-top:10px}
#shell .amform .acts button{width:auto}
#shell .primary.red{background:var(--stop); border-color:var(--stop); color:#fff}

#shell .cmdbar{flex:1; display:flex; align-items:center; gap:10px; min-width:120px;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.18);
  color:rgba(255,255,255,.86); border-radius:10px; padding:9px 14px; cursor:text;
  text-align:left; min-height:40px}
#shell .cmdbar:hover{background:rgba(255,255,255,.16)}
#shell .cmdbar span{flex:1; white-space:nowrap; overflow:hidden;
  text-overflow:ellipsis; font-size:14px}
#shell .cmdbar kbd{font:12px var(--mono); background:rgba(255,255,255,.14);
  border-radius:5px; padding:2px 6px; color:rgba(255,255,255,.8)}

#shell .topright{display:flex; align-items:center; gap:8px}
#shell .tbtn{background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
  color:#fff; border-radius:var(--r-sm); padding:8px 14px; cursor:pointer;
  font-size:14px; font-weight:600; min-height:38px; display:inline-flex;
  align-items:center; gap:7px; white-space:nowrap}
#shell .tbtn:hover{background:rgba(255,255,255,.2)}
#shell .tbtn:disabled{opacity:.45; cursor:not-allowed}
#shell .tbtn.accent{background:var(--brand-bright); color:var(--on-bright);
  border-color:transparent; font-weight:700}
#shell .tbtn.accent:hover:not(:disabled){filter:brightness(1.06)}
#shell .tbtn.icon{padding:8px 10px; min-width:38px; justify-content:center}
#shell .savestate{color:rgba(255,255,255,.76); font-size:12.5px; margin:0;
  display:inline-flex; align-items:center; gap:6px}
#shell .savestate i{width:7px; height:7px; border-radius:50%;
  background:var(--brand-bright); display:inline-block}

/* ---- screens ------------------------------------------------------------ */

#shellBody{flex:1 1 auto; min-height:0; position:relative}
#shell .screen{position:absolute; inset:0; overflow:auto}
#shell .screen.hide{display:none}
#shell .homewrap{max-width:1360px; margin:0 auto; padding:22px 20px 60px;
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:22px; align-items:start}

/* ---- accounts home ------------------------------------------------------ */

#shell .hero{background:var(--brand-deep); color:#fff; border-radius:var(--r); padding:26px 28px}
#shell .hero h1{font-size:30px; margin-bottom:16px}
#shell .heroform{display:flex; gap:10px; flex-wrap:wrap}
#shell .heroform label{flex:1; min-width:280px; display:flex; align-items:center; gap:10px;
  background:#fff; border-radius:10px; padding:10px 14px; color:var(--ink-faint); font-size:13px}
#shell .heroform input{flex:1; border:0; outline:0; font-size:17px; color:var(--ink); min-width:80px}
#shell .herogo{background:var(--brand-bright); color:var(--on-bright); border:0;
  border-radius:10px; padding:12px 22px; font-size:16px; font-weight:700; cursor:pointer}
#shell .herogo:hover{filter:brightness(1.06)}
#shell .heronote{color:rgba(255,255,255,.76); font-size:13.5px; margin-top:14px; line-height:1.55}
#shell .picks{margin-top:14px; display:flex; flex-direction:column; gap:6px}
#shell .pick{display:flex; align-items:center; gap:12px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.14); border-radius:var(--r-sm); padding:11px 14px;
  color:#fff; cursor:pointer; text-align:left}
#shell .pick:hover{background:rgba(255,255,255,.2)}
#shell .pick .tag{font:11px var(--mono); background:var(--brand-bright);
  color:var(--on-bright); border-radius:4px; padding:2px 6px}
#shell .pick .sub{color:rgba(255,255,255,.72); font-size:13px}

#shell .homehead{display:flex; align-items:center; gap:14px; margin:26px 0 12px; flex-wrap:wrap}
#shell .homehead h2{font-size:22px; color:var(--brand-deep)}
#shell .filters{display:flex; gap:6px; margin-left:auto; flex-wrap:wrap}
#shell .filt{background:var(--sheet); border:1px solid var(--edge); border-radius:999px;
  padding:7px 15px; cursor:pointer; font-size:13.5px; color:var(--ink-soft); min-height:36px}
#shell .filt:hover{border-color:var(--brand-tone)}
#shell .filt i{font:600 11px var(--mono); font-style:normal; opacity:.75; margin-left:5px}
#shell .filt.on{background:var(--brand-deep); color:#fff; border-color:transparent; font-weight:600}

#shell .cards{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:14px}
#shell .acard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 16px 14px; cursor:pointer; text-align:left; position:relative}
#shell .acard:hover{border-color:var(--brand-tone); box-shadow:var(--lift)}
#shell .acard h3{font-size:17px; color:var(--brand-deep); padding-right:58px}
#shell .acard .kind{color:var(--ink-faint); font-size:13px; margin-top:2px}
#shell .acard .prog{position:absolute; top:15px; right:16px; font:13px var(--mono); color:var(--ink-soft)}
#shell .acard .foot{display:flex; justify-content:space-between; gap:10px; margin-top:12px;
  font-size:13px; color:var(--ink-soft); align-items:baseline}
#shell .acard .settle{color:var(--caution); font-weight:600}
#shell .acard .settle.none{color:var(--ok)}

#shell .meter{display:flex; height:8px; border-radius:5px; overflow:hidden;
  margin-top:12px; background:var(--edge-soft)}
#shell .meter i{display:block; height:100%}
#shell .meter .known{background:var(--brand-deep)}
#shell .meter .inferred{background:var(--bar-inferred, #D4938D)}
#shell .meter .assumed{background:var(--bar-assumed, #f3b277)}
#shell .meter .open{background:repeating-linear-gradient(45deg,#cfd6df 0 4px,#e7ecf1 4px 8px)}

#shell .side h3{font:12px var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:10px}
#shell .scard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:15px 16px; margin-bottom:12px}
#shell .scard.warm{background:#fff8f1; border-color:#f0dcc6}
#shell .scard h4{margin:0 0 8px; font-size:14px; color:var(--brand-deep)}
#shell .scard .row{display:flex; gap:12px; font-size:13.5px; padding:5px 0; align-items:baseline}
#shell .scard .when{font:12px var(--mono); color:var(--brand-mid); min-width:52px}
#shell .scard p{margin:0; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
#shell .scard b{color:var(--ink)}
#shell .acts{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}

/* ---- the workspace ------------------------------------------------------ */

#shell .work{display:grid; grid-template-columns:264px minmax(0,1fr) 340px; height:100%}
#shell .rail{border-right:1px solid var(--edge); background:var(--sheet);
  overflow:auto; display:flex; flex-direction:column}
#shell .railtop{padding:16px 16px 6px}
#shell .eyebrow{font:11px var(--mono); letter-spacing:.11em; text-transform:uppercase;
  color:var(--ink-faint)}
#shell .phase{padding:14px 16px 2px; font:11px var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint)}
#shell .rstep{display:flex; gap:11px; align-items:flex-start; width:100%; text-align:left;
  background:none; border:0; padding:9px 14px; cursor:pointer;
  border-left:3px solid transparent}
#shell .rstep:hover{background:var(--edge-soft)}
#shell .rstep.on{background:var(--brand-tint, #eafafa); border-left-color:var(--brand-bright)}
#shell .rstep .dot{flex:0 0 22px; height:22px; border-radius:50%;
  border:2px solid var(--edge); display:flex; align-items:center; justify-content:center;
  margin-top:1px; font:11px var(--mono); color:var(--ink-faint); background:var(--sheet)}
#shell .rstep.done .dot{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
#shell .rstep.running .dot{background:var(--brand-bright); border-color:var(--brand-bright);
  color:var(--brand-accent-text)}
#shell .rstep.stopped .dot{border-color:var(--stop); color:var(--stop)}
#shell .rstep.blocked .dot{border-style:dashed}
#shell .rstep b{display:block; font-size:14.5px; font-weight:650; color:var(--ink)}
#shell .rstep .say{display:block; font-size:12.5px; color:var(--ink-faint);
  margin-top:1px; line-height:1.4}
#shell .railfoot{margin-top:auto; padding:14px}
#shell .srcbtn{width:100%; display:flex; align-items:center; gap:10px; background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r); padding:12px 14px; cursor:pointer;
  text-align:left; min-height:56px}
#shell .srcbtn:hover{border-color:var(--brand-tone)}
#shell .srcbtn b{display:block; font-size:14px}
#shell .srcbtn .sub{display:block; font-size:12.5px; line-height:1.4}
#shell .srcbtn .n{margin-left:auto; font:13px var(--mono); background:var(--edge-soft);
  border-radius:999px; padding:3px 10px; color:var(--ink-soft)}

#shell .doc{overflow:auto; position:relative}
#shell .docwrap{max-width:820px; margin:0 auto; padding:26px 26px 40px}
#shell .govern{font-size:31px; line-height:1.22; color:var(--brand-deep);
  margin:8px 0 20px; letter-spacing:-.02em}
#shell .govern.thin{font-size:22px; color:var(--ink-soft); font-weight:600}

#shell .confid{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:15px 17px; margin-bottom:18px}
#shell .confid .head{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
#shell .confid .head b{font-size:14.5px}
#shell .confid .delta{color:var(--ok); font-size:13.5px; font-weight:600}
#shell .confid .legend{display:flex; gap:16px; flex-wrap:wrap; margin-top:10px;
  font-size:13px; color:var(--ink-soft)}
#shell .confid .legend b{font-variant-numeric:tabular-nums}

#shell .sect{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px; scroll-margin-top:12px}
#shell .sect.running{border-color:var(--brand-bright); box-shadow:0 0 0 1px var(--brand-bright)}
#shell .sect.stopped{border-color:var(--stop)}
#shell .shead{display:flex; align-items:center; gap:11px; margin-bottom:12px}
#shell .snum{font:13px var(--mono); background:var(--brand-deep); color:#fff;
  border-radius:6px; width:26px; height:26px; flex:0 0 26px; display:inline-flex;
  align-items:center; justify-content:center}
#shell .sect.waiting .snum, #shell .sect.blocked .snum{background:var(--edge); color:var(--ink-faint)}
#shell .shead h3{font-size:19px; color:var(--brand-deep); flex:1}
#shell .shead .state{font-size:13px; color:var(--ink-faint); white-space:nowrap}
#shell .shead .state.good{color:var(--ok)}
#shell .shead .state.run{color:var(--brand-mid); font-weight:600}
#shell .smenu{background:none; border:1px solid var(--edge); border-radius:var(--r-sm);
  width:32px; height:32px; cursor:pointer; color:var(--ink-faint); font-size:15px; flex:0 0 32px}
#shell .smenu:hover{background:var(--edge-soft)}
#shell .sbody{display:block; font-size:15px; line-height:1.6}
#shell .sbody table{width:100%; border-collapse:collapse; font-size:13.5px; margin:10px 0}
#shell .sbody th{text-align:left; background:var(--edge-soft); padding:7px 9px;
  font-size:12px; color:var(--ink-soft)}
#shell .sbody td{padding:7px 9px; border-top:1px solid var(--edge); vertical-align:top}
#shell .sempty{color:var(--ink-faint); font-size:14px; display:flex; gap:12px;
  align-items:center; justify-content:space-between; flex-wrap:wrap}

#shell .pline{display:flex; gap:12px; align-items:flex-start; padding:11px 13px;
  border-radius:var(--r-sm); background:#fbfcfd; border:1px solid transparent;
  margin-bottom:7px; cursor:pointer; text-align:left; width:100%}
#shell .pline:hover{background:#f4f7fa}
#shell .pline.on{border-color:var(--brand-tone); background:#fff; box-shadow:0 0 0 1px var(--brand-tone)}
#shell .pline .txt{flex:1; font-size:14.5px; line-height:1.5}
#shell .pline .src{color:var(--ink-faint); font-size:12.5px; white-space:nowrap}

#shell .chip{font:11px var(--mono); letter-spacing:.05em; border-radius:5px;
  padding:3px 8px; white-space:nowrap; text-transform:uppercase; flex:0 0 auto}
#shell .chip.known{background:var(--t-known); color:#fff}
#shell .chip.inferred{background:var(--t-inferred); color:var(--t-inferred-ink)}
#shell .chip.assumed{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .chip.open{background:#fff; color:var(--ink-soft); border:1px dashed var(--t-open)}

#shell .nextbar{position:sticky; bottom:0; margin:14px -26px -40px; padding:10px 26px 20px;
  background:linear-gradient(180deg, rgba(243,245,248,0) 0%, var(--paper) 30%)}
#shell .nextin{background:var(--brand-deep); color:#fff; border-radius:var(--r);
  padding:15px 18px; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
#shell .nextin .eyebrow{color:rgba(255,255,255,.62)}
#shell .nextin b{display:block; font-size:16px; margin-top:2px; font-family:inherit;
  letter-spacing:normal; text-transform:none; color:#fff}
#shell .nextin .grow{flex:1; min-width:180px}
#shell .carry{display:flex; align-items:center; gap:8px; font-size:13px;
  color:rgba(255,255,255,.9); max-width:240px; line-height:1.35}
#shell .carry input{width:auto; accent-color:var(--brand-bright)}
#shell .runbtn{background:var(--brand-bright); color:var(--on-bright); border:0;
  border-radius:var(--r-sm); padding:13px 22px; font-size:16px; font-weight:700;
  cursor:pointer; min-height:46px; white-space:nowrap}
#shell .runbtn:disabled{opacity:.45; cursor:not-allowed}
#shell .runbtn:hover:not(:disabled){filter:brightness(1.06)}

/* ---- the evidence panel ------------------------------------------------- */

#shell .ev{border-left:1px solid var(--edge); background:var(--sheet);
  overflow:auto; display:flex; flex-direction:column}
#shell .evtabs{display:flex; gap:2px; padding:12px 12px 0; border-bottom:1px solid var(--edge)}
#shell .evtab{background:none; border:0; border-bottom:2px solid transparent;
  padding:9px 12px; cursor:pointer; font-size:14px; color:var(--ink-soft); font-weight:600}
#shell .evtab.on{color:var(--brand-deep); border-bottom-color:var(--brand-deep)}
#shell .evtab .n{font:11px var(--mono); background:var(--t-assumed);
  color:var(--t-assumed-ink); border-radius:999px; padding:1px 7px; margin-left:5px}
#shell .evbody{padding:16px; overflow:auto; flex:1}
#shell .evbody h4{margin:0 0 6px; font-size:12px; color:var(--ink-faint);
  font-weight:600; letter-spacing:.04em; text-transform:uppercase}
#shell .evline{font-size:16px; line-height:1.45; color:var(--ink); margin:0 0 12px}
#shell .evmark{display:flex; align-items:center; gap:9px; margin-bottom:14px; flex-wrap:wrap}
#shell .evmark .sub{font-size:13px; color:var(--ink-soft)}
#shell .evsrc{display:flex; gap:11px; border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:11px 13px; margin-bottom:8px; align-items:flex-start}
#shell .evsrc .l{font:12px var(--mono); color:var(--brand-mid); flex:0 0 18px}
#shell .evsrc b{display:block; font-size:14px; line-height:1.4}
#shell .evsrc .sub{display:block; font-size:12.5px; margin-top:2px}
#shell .evacts{display:flex; gap:8px; margin:16px 0 20px; flex-wrap:wrap}
#shell .evacts button{flex:1; min-width:96px; min-height:44px; border-radius:var(--r-sm);
  border:1px solid var(--edge); background:var(--sheet); cursor:pointer;
  font-size:14px; font-weight:600; color:var(--ink)}
#shell .evacts .primary{background:var(--brand-deep); color:#fff; border-color:transparent}
#shell .evused{display:flex; gap:6px; flex-wrap:wrap}
#shell .usedchip{font-size:12.5px; background:var(--edge-soft); border-radius:999px;
  padding:4px 11px; color:var(--ink-soft)}
#shell .evnone{color:var(--ink-faint); font-size:14px; line-height:1.6}
#shell .queue{display:flex; flex-direction:column; gap:8px}
#shell .qrow{border:1px solid var(--edge); border-radius:var(--r-sm); padding:11px 13px;
  cursor:pointer; background:var(--sheet); text-align:left; width:100%; display:block}
#shell .qrow:hover{border-color:var(--brand-tone)}
#shell .qrow .txt{font-size:14px; line-height:1.45; margin-top:6px; display:block}
#shell .qrow .meta{font-size:12px; color:var(--ink-faint); display:block}

/* ---- drawers, overlays, the command bar --------------------------------- */

#shell .drawerback{position:fixed; inset:0; background:color-mix(in srgb, var(--navy) 34%, transparent); z-index:120;
  display:flex; opacity:0; transition:opacity .16s ease}
#shell .drawerback.in{opacity:1}
#shell .drawerback.hide{display:none}
#shell .drawerback.right{justify-content:flex-end}
#shell .drawer{width:min(660px,92vw); background:var(--paper); height:100%;
  overflow:auto; box-shadow:var(--lift-up); transform:translateX(-14px);
  transition:transform .18s ease}
/* The sources drawer scrolls its list and keeps the footer in view, because
   what has to be re-run is the reason somebody opened it. */
#shell #sourcesDrawer{overflow:hidden; background:var(--sheet)}
#shell .drawer.right{width:min(420px,92vw); transform:translateX(14px)}
#shell .drawerback.in .drawer{transform:none}
#shell .drawer h2{font-size:22px}

#shell .overlay{position:fixed; inset:0; background:var(--paper); z-index:200; overflow:auto}
#shell .overlay.hide{display:none}
#shell .cmdback{position:fixed; inset:0; background:color-mix(in srgb, var(--navy) 40%, transparent); z-index:300;
  display:flex; align-items:flex-start; justify-content:center;
  padding:12vh 20px 20px; opacity:0; transition:opacity .14s ease}
#shell .cmdback.in{opacity:1}
#shell .cmdback.hide{display:none}
#shell .cmdbox{width:min(720px,100%); background:var(--sheet);
  border-radius:var(--r); box-shadow:var(--lift-up); overflow:hidden}

@media (max-width: 1240px){
  #shell .work{grid-template-columns:230px minmax(0,1fr)}
  #shell .ev{position:fixed; right:0; top:0; bottom:0; width:min(400px,92vw);
    z-index:130; box-shadow:var(--lift-up); transform:translateX(100%);
    transition:transform .2s ease}
  #shell .ev.open{transform:none}
  #shell .homewrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width: 900px){
  #shell .work{grid-template-columns:minmax(0,1fr)}
  #shell .rail{position:fixed; left:0; top:0; bottom:0; width:270px; z-index:130;
    transform:translateX(-100%); transition:transform .2s ease}
  #shell .rail.open{transform:none}
}
@media (prefers-reduced-motion: reduce){
  #shell .drawerback, #shell .drawer, #shell .cmdback, #shell .ev, #shell .rail{transition:none}
}

/* The old stylesheet owns .carry and .txt for its own screens. These two win
   inside the shell without touching what they mean out there. */
#shell .pline .txt{color:var(--ink); background:none; font-family:inherit}
/* The rail's settle list is buttons, and a button rule painted their words
   white on white, so every item read as an empty card (27 September). */
#shell .qrow{color:var(--ink); background:var(--sheet); text-align:left}
#shell .qrow .txt{color:var(--ink); background:none; font-family:inherit}
#shell .nextin .carry{background:none; border:0; padding:0; color:rgba(255,255,255,.9);
  font-size:13px; display:flex; align-items:center}
#shell .nextin .carry b{color:#fff}

/* .dot is the old screens' spinner. The rail's own dot wins inside the shell. */
#shell .rstep .dot{animation:none; background:var(--sheet); border:2px solid var(--edge);
  width:22px; height:22px; margin-right:0}
#shell .rstep.done .dot{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
#shell .rstep.running .dot{background:var(--brand-bright); border-color:var(--brand-bright)}

/* The meter on the presenting screen sits on the deep colour, so navy on navy
   would draw the biggest share as nothing at all. */
#shell .meter.onnavy{background:rgba(255,255,255,.16)}
#shell .meter.onnavy .known{background:#fff}
#shell .meter.onnavy .inferred{background:var(--brand-bright)}
#shell .meter.onnavy .assumed{background:#f3b277}
#shell .meter.onnavy .open{background:repeating-linear-gradient(45deg,
  rgba(255,255,255,.35) 0 4px, rgba(255,255,255,.12) 4px 8px)}

/* ---- what the engine's own renderer puts inside a section ---------------
   The step panes were built for a narrower column and a different scale, so
   the document gives their markup the spacing the rest of the page has. */
#shell .sbody p{margin:0 0 10px}
#shell .sbody h2, #shell .sbody h3, #shell .sbody h4{font-size:15px; color:var(--brand-deep);
  margin:16px 0 8px}
#shell .sbody ul, #shell .sbody ol{margin:0 0 12px; padding-left:20px}
#shell .sbody li{margin-bottom:5px}
#shell .sbody .pill, #shell .sbody .pill2{font:11px var(--mono); border-radius:5px;
  padding:2px 7px; background:var(--edge-soft); color:var(--ink-soft)}
#shell .sbody .card{border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:12px 14px; margin:10px 0; background:#fbfcfd}
#shell .sbody .card > *:not(h2){margin-left:0; margin-right:0}
#shell .sbody .card h2{background:none; color:var(--brand-deep); padding:0; font-size:15px}
#shell .sbody details{margin:10px 0; border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:9px 12px; background:#fbfcfd}
/* a mark letter on its coloured badge is white: the canvases drew it in the
   ink grey, 1.2 to 1 on the brick (review G, 27 September). The plan's own
   quiet badges below keep their grey on grey. */
#shell .mk{color:#fff}
#shell .sbody .mk{font:11px var(--mono); border-radius:4px; padding:1px 5px;
  background:var(--edge-soft); color:var(--ink-soft)}
#shell .sect > .sbody > details > summary{font-weight:600; color:var(--brand-mid)}

/* the empty and blocked states a section shows before it has run */
#shell .sect.waiting, #shell .sect.blocked{background:#fbfcfd}
#shell .sect.waiting .shead h3, #shell .sect.blocked .shead h3{color:var(--ink-soft)}

/* ---- the drawn views inside a section ----------------------------------
   The wheel, the canvases and the grids come from the analysis screen, which
   has its own stylesheet. They keep it. This only gives them the width of the
   document and takes the tab chrome off. */
#shell .views{margin-top:6px}
#shell .views .card{border:1px solid var(--edge); border-radius:var(--r-sm);
  margin:12px 0; background:#fff; overflow:hidden}
#shell .views .card h2{background:var(--edge-soft); color:var(--brand-deep);
  font-size:14px; padding:9px 14px; margin:0}
#shell .views .card > *:not(h2){margin-left:14px; margin-right:14px}
#shell .views svg{max-width:100%; height:auto}
#shell .views .exportbar, #shell .views .restabs{display:none}
#shell .sect.view .snum{background:var(--brand-tone)}
#shell .rstep.view .dot{font-size:9px}

/* ---- the start screen ---------------------------------------------------- */

#shell .startwrap{max-width:1360px; margin:0 auto; padding:26px 22px 60px;
  display:grid; grid-template-columns:minmax(0,1fr) 380px; gap:26px; align-items:start}
#shell .starthead{font-size:31px; line-height:1.2; color:var(--brand-deep);
  letter-spacing:-.02em; margin-bottom:6px}
#shell .startsub{color:var(--ink-soft); font-size:15px; margin:0 0 20px}

#shell .drop{border:2px dashed #a9d9dd; border-radius:var(--r); padding:16px 18px;
  background:#fbfeff}
#shell .drop.over{border-color:var(--brand-tone); background:#f2fbfc}
#shell .drophead{display:flex; gap:14px; align-items:flex-start}
#shell .drophead b{font-size:16px; display:block}
#shell .drophead .sub{display:block; font-size:12.5px; margin-top:2px}
#shell .drophead .filt{margin-left:auto; white-space:nowrap}
#shell .frows{margin-top:12px; display:flex; flex-direction:column; gap:8px}
#shell .frow{display:flex; align-items:center; gap:12px; background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:10px 12px}
#shell .frow.bad .fread{color:var(--stop)}
#shell .fkind{font:11px var(--mono); background:var(--edge-soft); color:var(--ink-soft);
  border-radius:4px; padding:3px 7px; flex:0 0 auto}
#shell .frow.bad .fkind{background:#fdeceb; color:var(--stop)}
#shell .fname{flex:1; min-width:0}
#shell .fname b{display:block; font-size:14.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#shell .fread{display:block; font-size:12.5px; color:var(--ink-faint)}
#shell .ffeeds{font-size:13px; color:var(--brand-mid); white-space:nowrap}
#shell .fx{background:none; border:0; color:var(--ink-faint); font-size:17px;
  cursor:pointer; padding:2px 6px; min-width:30px}
#shell .fx:hover{color:var(--stop)}

#shell .askrow{display:flex; gap:12px; margin:18px 0 10px; flex-wrap:wrap}
#shell .askbox{flex:1; min-width:280px; display:flex; align-items:center; gap:10px;
  background:var(--sheet); border:2px solid var(--brand-deep); border-radius:10px;
  padding:10px 14px}
#shell .asktag{font:11px var(--mono); background:var(--brand-bright);
  color:var(--on-bright); border-radius:4px; padding:3px 7px}
#shell .askbox input{flex:1; border:0; outline:0; font-size:16.5px; color:var(--ink); min-width:60px}
#shell .startchips{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:18px}

#shell .runcard{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px}
#shell .runhead{display:flex; justify-content:space-between; gap:12px;
  align-items:baseline; flex-wrap:wrap}
#shell .runhead b{font-size:16px}
#shell .runchips{display:flex; gap:8px; flex-wrap:wrap; margin:12px 0 4px}
#shell .rchip{font-size:13px; background:var(--edge-soft); color:var(--ink);
  border-radius:999px; padding:6px 13px; white-space:nowrap}
#shell .rchip.free{background:#e6f6ee; color:var(--ok); font-weight:600}
#shell .rchip.later{background:none; color:var(--ink-faint); text-decoration:line-through}
#shell .startcarry{display:flex; align-items:center; gap:8px; font-size:13.5px;
  color:var(--ink-soft)}
#shell .startcarry input{width:auto}

#shell .crow{display:flex; gap:11px; align-items:center; padding:11px 0;
  border-top:1px solid var(--edge-soft); width:100%; text-align:left;
  background:none; border-left:0; border-right:0; border-bottom:0}
#shell .scard .crow:first-of-type{border-top:0}
#shell .crow b{display:block; font-size:14px}
#shell .crow .sub{display:block; font-size:12.5px; line-height:1.4}
#shell .crow span:nth-child(2){flex:1; min-width:0}
#shell .ckind{font:10px var(--mono); background:var(--brand-deep); color:#fff;
  border-radius:4px; padding:3px 6px; flex:0 0 auto}
#shell .ctick{color:var(--ok); font-size:16px}
#shell .clink{background:none; border:0; color:var(--brand-mid); font-size:13.5px;
  font-weight:600; cursor:pointer; text-decoration:underline; padding:4px}
#shell .addrow{cursor:pointer; border-radius:var(--r-sm)}
#shell .addrow:hover{background:var(--edge-soft)}
#shell .startfoot{font-size:12.5px; line-height:1.55; color:var(--ink-faint); margin:0}

@media (max-width: 1100px){
  #shell .startwrap{grid-template-columns:minmax(0,1fr)}
}

/* ---- the Work and Analysis switch, and the analysis page ---------------- */
/* The segmented switch. It was written for the navy top bar, so its text was
   white, and every one of the eight places it is used on a white card had to
   remember to say so again. One of them did not, and two of its three buttons
   were white on white. The light one is the default now, and the bar says it
   is dark. */
#shell .seg2{display:inline-flex; background:var(--edge-soft); border-radius:9px; padding:3px}
#shell .seg2.hide{display:none}
#shell .seg2 button{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  padding:7px 16px; border-radius:7px; font-size:14px; font-weight:600; min-height:32px}
#shell .seg2 button.on{background:var(--brand-deep); color:#fff}
#shell .topbar .seg2{background:rgba(255,255,255,.12)}
#shell .topbar .seg2 button{color:rgba(255,255,255,.8)}
#shell .topbar .seg2 button.on{background:var(--brand-bright); color:var(--on-bright)}
#shell .rstep.ana{align-items:center}
#shell .rstep.ana .anan{margin-left:auto; font:11px var(--mono); background:var(--edge-soft);
  color:var(--ink-soft); border-radius:999px; padding:2px 8px}
#shell .anawrap{max-width:1180px; margin:0 auto; padding:26px 26px 60px}

#shell .tiles{display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr));
  gap:12px; margin:18px 0 20px}
#shell .atile{background:var(--sheet); border:1px solid var(--edge); border-top:3px solid var(--edge);
  border-radius:var(--r); padding:13px 15px; text-align:left; display:block; cursor:default}
#shell button.atile{cursor:pointer}
#shell button.atile:hover{box-shadow:var(--lift)}
#shell .atile.deep{border-top-color:var(--brand-deep)}
#shell .atile.good{border-top-color:var(--ok)}
#shell .atile.mid{border-top-color:var(--brand-mid)}
#shell .atile.tone{border-top-color:var(--brand-tone)}
#shell .atile.warn{border-top-color:var(--stop)}
#shell .tlabel{display:block; font-size:13px; color:var(--ink-soft)}
#shell .tbig{display:block; font:700 26px var(--mono); color:var(--brand-deep); margin:4px 0 2px;
  letter-spacing:-.02em}
#shell .atile.good .tbig{color:var(--ok)}
#shell .atile.warn .tbig{color:var(--stop)}
#shell .atile.tone .tbig{color:var(--brand-tone)}
#shell .tsub{display:block; font-size:12.5px; color:var(--ink-faint); line-height:1.4}

#shell .anacols{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:16px;
  align-items:start}
#shell .anawhy, #shell .anaacts{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px}
#shell .whyhead{display:flex; justify-content:space-between; gap:12px; align-items:baseline;
  margin-bottom:12px}
#shell .whyhead b{font-size:16px}
#shell .awhy{background:#fbfcfd; border-radius:var(--r-sm); padding:12px 14px; margin-bottom:9px}
#shell .whytop{display:flex; gap:12px; align-items:baseline; justify-content:space-between}
#shell .whytop b{font-size:15px; line-height:1.4}
#shell .strength{font-size:12.5px; font-weight:600; white-space:nowrap; color:var(--ok)}
#shell .strength.thin{color:var(--caution)}
#shell .whychips{display:flex; gap:6px; flex-wrap:wrap; margin-top:8px}
#shell .premortem{background:#fff8f1; border-radius:var(--r-sm); padding:12px 14px;
  display:flex; gap:12px; font-size:13.5px; line-height:1.5}
#shell .premortem b{color:var(--caution); white-space:nowrap}
@media (max-width: 1100px){ #shell .anacols{grid-template-columns:minmax(0,1fr)} }

/* six across where there is room, and a smaller number when the value is long */
@media (min-width: 1240px){ #shell .tiles{grid-template-columns:repeat(6, minmax(0,1fr))} }
#shell .tbig{font-size:22px; word-break:break-word}
/* the actions pane keeps its content and loses its own card chrome */
#shell .anaacts .card{border:0; margin:0}
#shell .anaacts .card h2{display:none}
#shell .anaacts .card > *{margin-left:0; margin-right:0}

/* ---- the offering map, board 41 ----------------------------------------- */
#shell .maptop{display:flex; align-items:center; gap:16px; padding:18px 26px 0;
  max-width:1420px; margin:0 auto}
#shell .maptop .ghost{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:13.5px; padding:6px 2px}
#shell .maptop .ghost:hover{color:var(--brand-deep)}
#shell .mapttl{display:flex; flex-direction:column; gap:2px; flex:1}
#shell .mapttl b{font-size:19px; letter-spacing:-.01em}
#shell .mapttl .sub{font-size:12.5px; color:var(--ink-soft)}
#shell .mapviews{background:var(--edge-soft); padding:3px}
#shell .mapviews button{color:var(--ink-soft); font-size:13px; padding:6px 12px; border-radius:7px}
#shell .mapviews button.on{background:var(--brand-deep); color:#fff}
#shell .mapbody{display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:22px;
  max-width:1420px; margin:0 auto; padding:16px 26px 0; align-items:start}
#shell .mappic .cnote{font-size:13px; color:var(--ink-soft); margin-bottom:10px}
#shell .mapgate{display:flex; gap:10px; align-items:baseline; margin-top:10px; font-size:13px;
  background:#fff5f4; border-radius:var(--r-sm); padding:10px 13px}
#shell .mapgate b{color:#c0392b; white-space:nowrap}
#shell .mapfoot{margin-top:10px; font-size:12.5px; color:var(--ink-soft)}
#shell .mapkey{display:flex; flex-direction:column; gap:14px}
#shell .mapdet{background:var(--edge-soft); border-radius:var(--r-sm); padding:14px 16px; font-size:13.5px}
#shell .mapdet.thin{color:var(--ink-soft); font-size:13px}
#shell .mapdet b{font-size:16px; display:block; margin:2px 0 8px}
#shell .mapdet .drow{display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px;
  padding:5px 0; border-top:1px solid var(--edge); line-height:1.45}
#shell .mapdet .drow > span:first-child{color:var(--ink-soft)}
#shell .mapdet .drow.out > span:last-child{color:#c0392b}
#shell .mapkey .keybox{margin-bottom:4px}
#shell .mapkey .keyrow{display:flex; gap:10px; width:100%; text-align:left; background:none;
  border:0; border-radius:var(--r-sm); padding:8px 9px; cursor:pointer; font:inherit;
  font-size:13.5px; line-height:1.45; align-items:flex-start}
#shell .mapkey .keyrow, #shell .mapkey .keyrow b{color:var(--ink)}
#shell .mapkey .keyrow .sub{color:var(--ink-soft)}
#shell .mapkey .keyrow:hover{background:var(--edge-soft)}
#shell .mapkey .keyrow.on{background:var(--edge-soft); box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .mapkey .keydot{width:22px; height:22px; border-radius:50%; color:#fff; font-size:12px;
  font-weight:800; display:inline-flex; align-items:center; justify-content:center; flex:0 0 22px}
#shell .mapkey .keydot.out{background:#fff; border:2px solid}
#shell .mapscores{max-width:1420px; margin:0 auto; padding:22px 26px 60px}
#shell .mapscores .cnote{font-size:13px; color:var(--ink-soft); margin-bottom:10px}
@media (max-width: 1160px){ #shell .mapbody{grid-template-columns:minmax(0,1fr)} }

/* ---- the two edge states, board 10 -------------------------------------- */
#shell .cutbar{border:1px solid var(--stop); border-radius:var(--r-sm); background:#fff6f5;
  padding:12px 14px; margin-bottom:12px; display:flex; flex-direction:column; gap:6px;
  font-size:13.5px; line-height:1.5}
#shell .cutbar b{color:var(--stop)}
#shell .cutbar.kept{border-color:var(--edge); background:var(--edge-soft)}
#shell .cutbar.kept b{color:var(--ink-soft)}
#shell .cutbar .acts{display:flex; gap:8px; margin-top:4px}
#shell .stalebar{border:1px solid var(--caution); border-radius:var(--r-sm); background:#fff8f1;
  padding:14px 16px; margin:0 0 18px; display:flex; flex-direction:column; gap:7px;
  font-size:13.5px; line-height:1.5}
#shell .stalebar b{color:var(--caution); font-size:15px}
#shell .stalerows{display:flex; flex-wrap:wrap; gap:8px; margin-top:2px}
#shell .stalerows .srow{display:inline-flex; align-items:center; gap:7px; background:var(--sheet);
  border:1px solid var(--edge); border-radius:999px; padding:4px 12px 4px 4px; font-size:13px}
#shell .stalerows .when{width:20px; height:20px; border-radius:50%; background:var(--brand-deep);
  color:#fff; font:700 11px var(--mono); display:inline-flex; align-items:center; justify-content:center}
#shell .stalebar .acts{display:flex; align-items:center; gap:10px; margin-top:4px}

/* ---- outputs, board 08 -------------------------------------------------- */
#shell .outwrap{display:grid; grid-template-columns:300px minmax(0,1fr) 320px; gap:22px;
  max-width:1520px; margin:0 auto; padding:26px 26px 60px; align-items:start}
#shell .ocard{display:block; width:100%; text-align:left; background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:8px;
  cursor:pointer; font:inherit; color:var(--ink)}
#shell .ocard:hover{border-color:var(--brand-tone)}
#shell .ocard.on{border-color:var(--brand-deep); box-shadow:inset 0 0 0 1px var(--brand-deep)}
#shell .ocard[disabled]{opacity:.55; cursor:default}
#shell .ocard .prog{font:700 10.5px var(--mono); color:var(--ink-faint); letter-spacing:.06em}
#shell .ocard h3{font-size:14.5px; font-weight:700; margin:2px 0; line-height:1.3}
#shell .ocard .kind{font-size:12.5px; color:var(--ink-soft); line-height:1.4}
#shell .outbuilt{margin-top:18px; border-top:1px solid var(--edge); padding-top:12px}
#shell .outbuilt .row{display:flex; justify-content:space-between; gap:10px; font-size:13px;
  padding:4px 0}
#shell .outbuilt .sub{font-size:12px; color:var(--ink-faint); display:block; margin-top:6px}
#shell .outprev{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px 20px; min-height:320px}
#shell .outhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:14px}
#shell .outviews{background:var(--edge-soft); padding:3px}
#shell .outviews button{color:var(--ink-soft); font-size:12.5px; padding:5px 11px; border-radius:6px}
#shell .outviews button.on{background:var(--brand-deep); color:#fff}
#shell .outsay{font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:60ch}
#shell .outline{margin:0; padding-left:26px; font-size:13.5px; line-height:1.8}
#shell .outline .sub{color:var(--ink-faint); font-size:12.5px; margin-left:8px}
#shell .strip{display:grid; grid-template-columns:repeat(auto-fill, minmax(168px, 1fr)); gap:12px}
#shell .thumb{border:1px solid var(--edge); border-radius:var(--r-sm); padding:10px 12px;
  min-height:104px; display:flex; flex-direction:column; gap:6px; background:var(--sheet)}
#shell .thumb .tn{font:700 10.5px var(--mono); color:var(--ink-faint)}
#shell .thumb b{font-size:12.5px; line-height:1.35}
#shell .thumb .bars{display:flex; flex-direction:column; gap:3px; margin-top:auto}
#shell .thumb .bars i{height:3px; background:var(--edge); border-radius:2px; display:block}
#shell .thumb .bars i:nth-child(odd){width:80%}
#shell .skipped{margin-top:18px; border-top:1px solid var(--edge); padding-top:14px}
#shell .ghostcard{border:1px dashed var(--edge); border-radius:var(--r-sm); padding:9px 12px;
  margin-bottom:7px; font-size:13px; display:flex; gap:9px; align-items:center}
#shell .ghostcard .tn{font:700 11px var(--mono); color:var(--ink-faint)}
#shell .ghostcard .sub{margin-left:auto; color:var(--ink-faint); font-size:12.5px}
#shell .outside .orow{display:flex; justify-content:space-between; gap:10px; font-size:13px;
  padding:5px 0; border-top:1px solid var(--edge)}
#shell .outside .orow > span:first-child{color:var(--ink-soft)}
#shell .outside .mono{font:12px var(--mono); color:var(--ink-soft); word-break:break-all}
#shell .outside .primary{width:100%; margin-top:14px}
@media (max-width: 1240px){ #shell .outwrap{grid-template-columns:minmax(0,1fr)} }
#shell .outside .thinstep{display:flex; gap:8px; align-items:baseline; font-size:13px; margin:4px 0}
#shell .outside .lev{font:700 10.5px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  color:var(--caution); min-width:30px}
#shell .outside .lev.no{color:var(--stop)}

/* ---- brand and theme, board 22 ------------------------------------------ */
#shell .brandwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px;
  align-items:start}
#shell .bcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px; margin-bottom:16px}
#shell .bcard h4{margin:0 0 12px; font-size:15px}
#shell .bhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
#shell .bhead h4{margin:0}
#shell .bcard label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px}
#shell .bcard label input[type=text], #shell .bcard label input:not([type]){width:100%}
#shell .bcard input:not([type=color]){width:100%; padding:8px 10px; border:1px solid var(--edge);
  border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink); margin-top:4px}
#shell .brow{display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:12px}
#shell .bstop{flex:1; min-width:110px; text-transform:capitalize}
#shell .bstop input[type=color]{width:100%; height:34px; border:1px solid var(--edge);
  border-radius:7px; background:none; padding:2px; margin-top:4px}
#shell .bstop .mono{font:11.5px var(--mono); color:var(--ink-faint)}
#shell .gradbar{height:26px; border-radius:7px; border:1px solid var(--edge)}
#shell .trow{display:grid; grid-template-columns:20px 104px 78px minmax(0,1fr) 34px auto;
  gap:9px; align-items:center; font-size:12.5px; padding:5px 0; border-top:1px solid var(--edge-soft)}
#shell .trow b{font-size:12.5px}
#shell .trow .mono{font:11.5px var(--mono); color:var(--ink-soft)}
#shell .trow .sub{font-size:11.5px; color:var(--ink-faint)}
#shell .trow input[type=color]{width:30px; height:24px; border:1px solid var(--edge);
  border-radius:5px; background:none; padding:1px}
#shell .swatch{width:18px; height:18px; border-radius:5px; border:1px solid rgba(0,0,0,.12)}
#shell .bmark{flex:1; min-width:120px; height:74px; border-radius:var(--r-sm); display:flex;
  flex-direction:column; align-items:center; justify-content:center; gap:6px; font-size:12px}
#shell .bmark.dark{background:var(--brand-deep); color:rgba(255,255,255,.7)}
#shell .bmark.light{background:var(--sheet); border:1px solid var(--edge); color:var(--ink-faint)}
#shell .bmark img{max-height:30px; max-width:80%}
#shell .bcard .sub.warn{color:var(--caution)}
#shell .preview{border:1px solid var(--edge); border-radius:var(--r-sm); overflow:hidden;
  background:var(--sheet)}
#shell .pvbar{background:var(--brand-deep); color:var(--on-deep); display:flex; gap:10px;
  align-items:center; padding:10px 12px; font-size:13px}
#shell .pvacct{background:rgba(255,255,255,.14); border-radius:7px; padding:3px 9px; font-size:12px}
#shell .pvcta{margin-left:auto; background:var(--brand-bright); color:var(--on-bright);
  border-radius:7px; padding:4px 11px; font-weight:700; font-size:12px}
#shell .pvbody{padding:12px}
#shell .preview .pline{display:flex; gap:9px; align-items:center; padding:7px 4px; font-size:13px;
  border-bottom:1px solid var(--edge-soft)}
#shell .preview .tier{font:700 10px var(--mono); letter-spacing:.05em; padding:3px 7px;
  border-radius:5px; min-width:64px; text-align:center}
#shell .preview .tier.known{background:var(--t-known); color:#fff}
#shell .preview .tier.inferred{background:var(--t-inferred); color:var(--t-inferred-ink)}
#shell .preview .tier.assumed{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .preview .tier.open{border:1px dashed var(--edge); color:var(--ink-faint)}
#shell .pvdeck{height:110px; display:flex; flex-direction:column; justify-content:flex-end;
  gap:4px; padding:14px; color:#fff}
#shell .pvtitle{font-size:16px; font-weight:700}
#shell .pvtag{font-size:11.5px; opacity:.85}
#shell .pvslide{padding:14px; display:flex; flex-direction:column; gap:8px; font-size:13px}
#shell .pvrule{height:3px; width:60px; background:var(--brand-bright); border-radius:2px}
#shell .pvpresent{background:var(--brand-deep); color:var(--on-deep); padding:22px;
  display:flex; flex-direction:column; gap:8px; min-height:140px}
#shell .pvnum{font:700 12px var(--mono); color:var(--brand-bright)}
#shell .pvpresent b{font-size:22px}
#shell .pvtabs{background:var(--edge-soft); padding:3px}
#shell .pvtabs button{color:var(--ink-soft); font-size:12.5px; padding:5px 11px; border-radius:6px}
#shell .pvtabs button.on{background:var(--brand-deep); color:#fff}
#shell .bcard .crow{display:grid; grid-template-columns:20px minmax(0,1fr) auto auto; gap:9px;
  align-items:center; font-size:13px; padding:6px 0; border-top:1px solid var(--edge-soft)}
#shell .crow .cmark{width:18px; height:18px; border-radius:50%; font:700 11px var(--mono);
  display:inline-flex; align-items:center; justify-content:center}
#shell .crow.pass .cmark{background:#e6f4ee; color:var(--ok)}
#shell .crow.fail .cmark{background:#fdeceb; color:var(--stop)}
#shell .crow .mono{font:11.5px var(--mono); color:var(--ink-soft)}
#shell .brandacts{display:flex; gap:12px; align-items:center; margin-top:4px}
#shell .brandacts .sub{font-size:12.5px; color:var(--ink-faint)}
@media (max-width: 1100px){ #shell .brandwrap{grid-template-columns:minmax(0,1fr)} }

/* the build, the pack and the ontology, in the bar */
#shell .vtag{background:none; border:0; cursor:pointer; font:11.5px var(--mono);
  color:rgba(255,255,255,.55); padding:6px 8px; border-radius:7px; white-space:nowrap}
#shell .vtag:hover{background:rgba(255,255,255,.1); color:rgba(255,255,255,.9)}
#shell .vtag.dirty{color:var(--brand-bright)}
#shell .vtag.dirty::after{content:" ·  edited"}
@media (max-width: 1280px){ #shell .vtag{display:none} }

/* ---- the guide, board 44 ------------------------------------------------ */
#shell .gwrap{max-width:1420px; margin:0 auto; padding:24px 26px 60px}
#shell .ghead{display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom:18px}
#shell .cstrip2{display:grid; grid-template-columns:repeat(auto-fit, minmax(96px,1fr)); gap:10px;
  background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r); padding:14px 16px}
#shell .cstrip2 > div{display:flex; flex-direction:column; gap:2px}
#shell .cstrip2 b{font:700 22px var(--mono); color:var(--brand-deep)}
#shell .cstrip2 span{font-size:11.5px; color:var(--ink-soft); line-height:1.3}
#shell .cstripnote{font-size:12px; color:var(--ink-faint); margin:8px 2px 18px; line-height:1.5}
#shell .gcols{display:grid; grid-template-columns:270px minmax(0,1fr) 300px; gap:20px;
  align-items:start}
#shell .gloop{background:none; border:0; padding:0}
#shell .gloop .rstep{width:100%; display:flex; gap:10px; align-items:flex-start; text-align:left;
  background:none; border:0; border-radius:var(--r-sm); padding:9px 10px; cursor:pointer;
  font:inherit; font-size:13.5px; color:var(--ink)}
#shell .gloop .rstep:hover{background:var(--edge-soft)}
#shell .gloop .rstep.on{background:var(--sheet); box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .gloop .rstep .snum{width:22px; height:22px; border-radius:50%; flex:0 0 22px;
  background:var(--edge); color:var(--ink-faint); font:700 11px var(--mono);
  display:inline-flex; align-items:center; justify-content:center}
#shell .gloop .rstep.done .snum{background:var(--brand-deep); color:#fff}
#shell .gloop .rstep.running .snum{background:var(--brand-bright); color:var(--on-bright)}
#shell .gloop .rstep.stopped .snum{background:var(--stop); color:#fff}
#shell .gloop .rstep b{display:block; font-size:13.5px}
#shell .gloop .rstep .sub{font-size:12px; color:var(--ink-faint)}
#shell .gcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:22px 24px}
#shell .gtop{display:flex; gap:14px; align-items:baseline; font-size:11.5px;
  color:var(--ink-faint); font-family:var(--mono)}
#shell .gphase{text-transform:uppercase; letter-spacing:.08em; color:var(--brand-tone)}
#shell .gtime{margin-left:auto}
#shell .gcard h2{font-size:24px; margin:8px 0 6px; letter-spacing:-.01em}
#shell .glead{font-size:14.5px; line-height:1.6; color:var(--ink-soft); margin:0 0 18px}
#shell .gflow{display:grid; grid-template-columns:minmax(0,1fr) 30px minmax(0,1fr); gap:12px;
  align-items:center; background:var(--edge-soft); border-radius:var(--r-sm); padding:14px 16px}
#shell .garrow{text-align:center; color:var(--ink-faint); font-size:18px}
#shell .gbit{background:var(--sheet); border:1px solid var(--edge); border-radius:6px;
  padding:6px 9px; margin-bottom:6px; font-size:12.5px; line-height:1.4}
#shell .gbit.out{border-color:var(--brand-tone)}
#shell .gpair{margin-top:16px}
#shell .gpair p{margin:4px 0 0; font-size:13.5px; line-height:1.6}
#shell .gacts{display:flex; gap:8px; align-items:center; margin-top:20px;
  border-top:1px solid var(--edge); padding-top:14px}
#shell .gside{display:flex; flex-direction:column; gap:14px}
#shell .gside-card{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px}
#shell .gside-card h3{font:12px var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 0 12px}
#shell .gtier{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 10px;
  padding:8px 0; border-top:1px solid var(--edge-soft)}
#shell .gtier .tname{font-weight:700; font-size:13.5px}
#shell .gtier .tletters{font-size:11.5px; color:var(--ink-faint)}
#shell .gtier .sub{grid-column:1/3; font-size:12.5px; color:var(--ink-soft); line-height:1.45}
#shell .gtier.known .tname{color:var(--t-known)}
#shell .gtier.inferred .tname{color:var(--t-inferred-ink)}
#shell .gtier.assumed .tname{color:var(--t-assumed-ink)}
#shell .gside-card.dark{background:var(--brand-deep); color:var(--on-deep); border-color:transparent}
#shell .gside-card.dark h3{color:rgba(255,255,255,.6)}
#shell .growrow{display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:9px;
  align-items:center; font-size:12.5px; padding:4px 0; color:rgba(255,255,255,.55)}
#shell .growrow.done, #shell .growrow.running{color:#fff}
#shell .growrow .n{font:700 10.5px var(--mono); opacity:.7}
#shell .growrow .st{font:10.5px var(--mono); color:var(--brand-bright)}
#shell .gnext{margin:12px 0 0; font-size:12.5px; line-height:1.5; color:rgba(255,255,255,.8);
  border-top:1px solid rgba(255,255,255,.15); padding-top:10px}
@media (max-width: 1240px){ #shell .gcols{grid-template-columns:minmax(0,1fr)} }

/* ---- the document store, board 43 --------------------------------------- */
#shell .storewrap{max-width:1420px}
#shell .stlead{font-size:13.5px; line-height:1.6; color:var(--ink-soft); max-width:70ch; margin:0}
#shell .stcols{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:22px;
  margin-top:18px; align-items:start}
#shell .stways h2{font-size:15px}
#shell .stcands .cap{font-size:13px}
#shell .stcands .sub{font-size:12.5px; color:var(--ink-faint); margin:4px 0 12px}
@media (max-width: 1160px){ #shell .stcols{grid-template-columns:minmax(0,1fr)} }
/* the page says what this is, so the panel it lifts does not say it twice */
#shell #storeWays #docsPanel > h2, #shell #storeWays #docsPanel > p.cnote{display:none}
#shell .tryfirst{background:var(--brand-bright); color:var(--on-bright);
  font:700 10.5px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  padding:3px 7px; border-radius:5px; white-space:nowrap}

/* ---- the board as a debate, board 05 ------------------------------------ */
#shell .dbwrap{max-width:1500px; margin:0 auto; padding:20px 26px 60px}
#shell .dbhead{display:flex; gap:16px; align-items:center; margin-bottom:18px}
#shell .dbhead .ghost{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:13.5px; padding:6px 2px}
#shell .dbttl{display:flex; flex-direction:column; gap:2px; flex:1}
#shell .dbttl b{font-size:19px}
#shell .dbttl .sub{font-size:12.5px; color:var(--ink-soft)}
#shell .dbrounds{background:var(--edge-soft); padding:3px}
#shell .dbrounds button{color:var(--ink-soft); font-size:13px; padding:6px 12px; border-radius:7px}
#shell .dbrounds button.on{background:var(--brand-deep); color:#fff}
#shell .dbcols{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:16px}
#shell .dbcol{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px}
#shell .dbcol.wide{grid-column:1/-1}
#shell .dbcol h3{font-size:16px; margin:0 0 10px}
#shell .dbwho{display:flex; gap:10px; align-items:center; margin-bottom:10px}
#shell .dbinit{width:34px; height:34px; border-radius:50%; background:var(--brand-deep);
  color:var(--on-deep); font:700 12px var(--mono); display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 34px}
#shell .dbwho b{display:block; font-size:14.5px}
#shell .dbwho .sub{font-size:12px; color:var(--brand-accent-text)}
#shell .dbcares{font-size:12.5px; color:var(--ink-faint); line-height:1.5; margin:0 0 12px;
  padding-bottom:10px; border-bottom:1px solid var(--edge-soft)}
#shell .dbsaid p{font-size:13.5px; line-height:1.6; margin:0 0 10px}
#shell .dbnone{font-size:13px; color:var(--ink-faint)}
#shell .dbdec{display:grid; gap:16px}
#shell .dbmoves{margin-top:22px; background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px}
#shell .dbmhead{display:flex; gap:12px; align-items:baseline; margin-bottom:12px}
#shell .dbmhead b{font-size:15px}
#shell .dbmhead .sub{font-size:12.5px; color:var(--ink-soft)}
#shell .dbbar{display:block; height:5px; border-radius:3px; background:var(--edge-soft);
  margin-bottom:5px; overflow:hidden}
#shell .dbbar i{display:block; height:100%; background:var(--ink-faint)}
#shell .dbbar.now i{background:var(--brand-deep)}
#shell .dbbar.cutbar i{background:var(--stop)}
#shell .dbmoves .mono{font:11.5px var(--mono); color:var(--ink-soft)}
#shell .dbarrow{text-align:center; color:var(--ink-faint)}
#shell .dbmoves tr.cut{background:#fff6f5}
#shell .dbmoves tr.cut b{text-decoration:line-through; color:var(--stop)}
@media (prefers-reduced-motion: reduce){ #shell .dbbar i{transition:none !important} }

/* ---- the command bar, board 11 ------------------------------------------ */
#shell .cmdtop{display:flex; align-items:center; gap:10px; border-bottom:1px solid var(--edge);
  padding:0 18px}
#shell .cmdtop input{flex:1; border:0; padding:18px 2px; font:inherit; font-size:17px;
  outline:0; color:var(--ink); background:none}
#shell .cmdmode{font:11px var(--mono); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-faint); white-space:nowrap}
#shell .cmdlist{max-height:56vh; overflow:auto; padding:8px}
#shell .cmdrow{display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-sm); padding:10px 12px; cursor:pointer; font:inherit; color:var(--ink)}
#shell .cmdrow:hover, #shell .cmdrow.on{background:var(--edge-soft)}
#shell .cmdrow b{display:block; font-size:14.5px}
#shell .cmdrow .sub{display:block; font-size:12.5px; color:var(--ink-soft); margin-top:2px}
#shell .cmdrow.small{font-size:13.5px; padding:7px 12px}
#shell .cmdrow.go{background:var(--brand-deep); color:#fff; margin-top:8px}
#shell .cmdrow.go .sub{color:rgba(255,255,255,.75)}
#shell .cmdrow.go:hover, #shell .cmdrow.go.on{background:var(--brand-mid)}
#shell .cmdfree{display:inline-flex; align-items:center; gap:7px; font-size:12.5px;
  color:var(--ok); background:#e9f6f0; border-radius:999px; padding:4px 12px; margin:4px 0 10px}
#shell .cmdfree::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--ok)}
#shell .cmdans{padding:0 12px 6px}
#shell .cmdans h3{font-size:19px; margin:0 0 4px; line-height:1.35}
#shell .cmdans .sub{font-size:13px; color:var(--ink-soft); margin:0 0 12px; line-height:1.5}
#shell .cmdline{display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  border-top:1px solid var(--edge-soft); font-size:13.5px}
#shell .cmdline b{display:block; margin-bottom:3px}
#shell .cmdline .bit{display:inline-block; margin-right:14px; font-size:12.5px; color:var(--ink-soft)}
#shell .cmdline .bit i{font-style:normal; color:var(--ink-faint)}
#shell .cmdnote{font-size:13px; color:var(--ink-soft); line-height:1.55; padding:8px 12px}
#shell .cmdcant{background:var(--brand-tint); border-radius:8px; margin:8px 10px; color:var(--ink)}
#shell .cmdcant.flash{animation:cmdflash .5s ease 2}
@keyframes cmdflash{50%{box-shadow:0 0 0 2px var(--brand-accent-text)}}
#shell .cmdwhere{font:11.5px var(--mono); color:var(--ink-faint); padding:0; margin:10px 0 0}
#shell .cmdalso{margin-top:12px; border-top:1px solid var(--edge); padding-top:8px}
#shell .cmdalso .cap{padding:0 12px 4px}
#shell .cmdplan{padding:10px 12px}
#shell .cmdpause{display:flex; gap:8px; align-items:center; font-size:12.5px;
  color:var(--ink-soft); padding:8px 12px}
#shell .cmdpause input{width:auto}

/* ---- the tour, board 12D ------------------------------------------------ */
.tourdim{position:fixed; inset:0; background:color-mix(in srgb, var(--navy) 42%, transparent); z-index:8000;
  pointer-events:none}
.tourring{position:relative; z-index:8001; box-shadow:0 0 0 3px var(--brand-bright),
  0 0 0 9px color-mix(in srgb, var(--turq) 25%, transparent); border-radius:10px}
.tourpop{position:fixed; z-index:8002; width:340px; background:#fff; border-radius:12px;
  box-shadow:0 18px 50px color-mix(in srgb, var(--navy) 30%, transparent); padding:16px 18px; font:14px/1.55 var(--font-ui)}
.tourpop .tnum{font:11px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); margin-bottom:6px}
.tourpop b{display:block; font-size:16px; margin-bottom:6px; color:var(--ink)}
.tourpop p{margin:0 0 14px; font-size:13.5px; color:var(--ink-soft)}
.tourpop .tacts{display:flex; gap:8px; align-items:center}
@media (prefers-reduced-motion: reduce){ .tourring{transition:none} }
#shell .helpflow{display:grid; grid-template-columns:minmax(0,1fr) 22px minmax(0,1fr); gap:8px;
  align-items:center; background:var(--brand-deep); color:var(--on-deep); border-radius:var(--r-sm);
  padding:12px; margin-top:10px}
#shell .helpflow .cap{color:rgba(255,255,255,.55); margin-bottom:5px}
#shell .helpflow span{display:block; font-size:12px; line-height:1.4; margin-bottom:4px}
#shell .helpflow .ar{text-align:center; color:rgba(255,255,255,.5)}
#shell .keyrow2{display:flex; gap:10px; align-items:baseline; font-size:13px; padding:4px 0}
#shell .keyrow2 kbd{font:11px var(--mono); background:var(--edge-soft); border:1px solid var(--edge);
  border-radius:5px; padding:2px 7px; min-width:34px; text-align:center}

/* ---- first use, and the examples, board 12A and 12B --------------------- */
#shell .firstuse{margin-top:18px; border-top:1px solid var(--edge); padding-top:16px}
/* The first-use block sits inside the hero, on the deep colour, so it takes
   the colour made for that: navy on navy was unreadable (10.3 review, P1 5). */
#shell .firstuse{border-top-color:color-mix(in srgb, var(--on-deep) 22%, transparent)}
#shell .firstuse .promise{font-size:16px; font-weight:600; margin:0 0 6px; color:var(--on-deep)}
#shell .firstuse .marksay{font-size:13.5px; line-height:1.6; color:color-mix(in srgb, var(--on-deep) 82%, transparent);
  margin:0 0 14px; max-width:68ch}
#shell .firstacts{display:flex; gap:8px; flex-wrap:wrap}
#shell .exwrap{padding:18px 20px 20px}
#shell .exhead{display:flex; align-items:center; justify-content:space-between; margin-bottom:14px}
#shell .exhead b{font-size:17px}
#shell .excard{display:block; width:100%; text-align:left; background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r-sm); padding:12px 14px; margin-bottom:8px;
  cursor:pointer; font:inherit; color:var(--ink)}
#shell .excard:hover{border-color:var(--brand-tone)}
#shell .excard b{display:block; font-size:15px; margin:4px 0 3px}
#shell .excard .sub{display:block; font-size:12.5px; color:var(--ink-soft); line-height:1.5}
#shell .exkind{font:700 10px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  background:var(--edge-soft); color:var(--ink-faint); border-radius:4px; padding:2px 6px}
#shell .exkind.real{background:#fdeceb; color:var(--stop)}
#shell .excard.real{border-color:#f3d6d4}
#shell .exsay{font-size:12.5px; color:var(--ink-faint); line-height:1.55; margin:10px 0 0}

/* ---- the deep views, boards 15, 16 and 17 ------------------------------- */
#shell .dpwrap{max-width:1560px; margin:0 auto; padding:20px 26px 60px}
#shell .dphead{display:flex; gap:16px; align-items:center; margin-bottom:18px}
#shell .dphead .ghost{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:13.5px; padding:6px 2px}
#shell .dpttl{display:flex; flex-direction:column; gap:2px; flex:1}
#shell .dpttl b{font-size:19px}
#shell .dpttl .sub{font-size:12.5px; color:var(--ink-soft)}
#shell .dpviews{background:var(--edge-soft); padding:3px}
#shell .dpviews button{color:var(--ink-soft); font-size:13px; padding:6px 12px; border-radius:7px}
#shell .dpviews button.on{background:var(--brand-deep); color:#fff}
#shell .dpviews button[disabled]{opacity:.4; cursor:default}
#shell .dpcols3{display:grid; grid-template-columns:260px minmax(0,1fr) 300px; gap:20px;
  align-items:start}
#shell .dpcols2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:20px;
  align-items:start}
#shell .dpside.wide{grid-column:auto}
#shell .dpmain, #shell .dpside{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px}
#shell .dpperson{display:flex; gap:10px; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-sm); padding:8px 9px; cursor:pointer; font:inherit; font-size:13.5px;
  align-items:flex-start; color:var(--ink)}
#shell .dpperson:hover{background:var(--edge-soft)}
#shell .dpperson.on{background:var(--edge-soft); box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .dpinit{width:30px; height:30px; border-radius:50%; background:var(--brand-deep);
  color:var(--on-deep); font:700 11px var(--mono); display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 30px}
#shell .dpperson b{display:block}
#shell .dpperson .sub{display:block; font-size:12px; color:var(--ink-soft)}
#shell .dpcards{display:grid; grid-template-columns:repeat(auto-fit, minmax(220px,1fr)); gap:12px;
  margin-top:14px}
#shell .dpcard{border:1px solid var(--edge); border-radius:var(--r-sm); padding:12px 14px}
#shell .dprow{display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.5;
  padding:5px 0; border-top:1px solid var(--edge-soft)}
#shell .dpnone{font-size:13px; color:var(--ink-faint); line-height:1.5; padding:6px 0}
#shell .dplegend{display:flex; flex-wrap:wrap; gap:14px; margin-top:12px; font-size:12px;
  color:var(--ink-soft)}
#shell .dplegend i{display:inline-block; width:12px; height:12px; border-radius:50%;
  margin-right:6px; vertical-align:-2px}
#shell .dplegend i.solid{background:var(--brand-deep)}
#shell .dplegend i.hollow{background:#fff; border:2px solid var(--caution)}
#shell .dplegend i.dashed{background:#fff; border:2px dashed var(--ink-faint)}
#shell .dplegend i.arc{background:var(--brand-bright)}
#shell .dpmeet{display:flex; gap:10px; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-sm); padding:9px 10px; cursor:pointer; font:inherit; font-size:13.5px;
  align-items:center; color:var(--ink)}
#shell .dpmeet:hover{background:var(--edge-soft)}
#shell .dpmeet.on{background:var(--edge-soft); box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .dpwhen{font:11.5px var(--mono); color:var(--ink-soft); min-width:86px}
#shell .dpmeet b{display:block}
#shell .dpmeet .sub{display:block; font-size:12px; color:var(--ink-faint)}
#shell .dpkind{margin-left:auto; font:700 10px var(--mono); letter-spacing:.06em;
  border-radius:4px; padding:2px 6px; background:var(--edge-soft); color:var(--ink-soft)}
#shell .dpkind.in{background:var(--brand-deep); color:#fff}
#shell .dpkind.call{background:var(--t-inferred); color:var(--t-inferred-ink)}
#shell .dpkind.open{background:#fff; border:1px dashed var(--edge); color:var(--ink-faint)}
#shell .dpitem{display:flex; gap:9px; align-items:flex-start; font-size:13px; line-height:1.5;
  padding:6px 0; border-top:1px solid var(--edge-soft); cursor:pointer}
#shell .dpitem .sub{display:block; font-size:11.5px; color:var(--ink-faint)}
#shell .dpitem input{width:auto; margin-top:3px}

/* ---- correcting a line, board 13 ---------------------------------------- */
#shell .fixbox, .fixbox{width:min(620px,94vw)}
.fixwas{background:var(--edge-soft, #eef2f6); border-radius:8px; padding:10px 12px;
  font-size:13.5px; line-height:1.5; margin-bottom:10px; display:flex; gap:9px; align-items:flex-start}
.fixtiers, .fixchips{display:flex; gap:7px; flex-wrap:wrap}
.fixtier, .fixchip{background:#fff; border:1px solid var(--edge, #e2e7ec); border-radius:999px;
  padding:6px 13px; font:inherit; font-size:13px; cursor:pointer; color:var(--ink, #16202f)}
.fixtier.on{background:var(--brand-deep, #232F38); color:#fff; border-color:transparent}
.fixchip.on{background:var(--t-assumed, #fbe7d3); border-color:var(--t-assumed-ink, #8a4a14);
  color:var(--t-assumed-ink, #8a4a14)}
.fixsay{margin:8px 0 0}
.roombox{width:min(760px,94vw)}
.roomhead{display:flex; justify-content:space-between; gap:14px; align-items:flex-start;
  margin-bottom:12px}
.roomcounts{font-size:13px; color:var(--ink-soft, #4a5666); white-space:nowrap}
.roomrows{max-height:44vh; overflow:auto}
.roomrow{display:flex; gap:10px; padding:8px 0; border-top:1px solid var(--edge-soft, #eef2f6);
  font-size:13px; line-height:1.5}
.roomrow .when{font:700 11px var(--mono, monospace); color:var(--ink-faint, #78859a); min-width:18px}
.roomrow.contradicts{background:#fff8f1}
.roomrow.added{background:#f6fbf8}
.roomrow s{color:var(--ink-faint, #78859a)}

/* ---- the world, board 14 ------------------------------------------------ */
#shell .plwrap{max-width:1420px; margin:0 auto; padding:20px 26px 60px}
#shell .plhead{display:flex; gap:16px; align-items:center; margin-bottom:16px}
#shell .plhead .ghost{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:13.5px; padding:6px 2px}
#shell .plttl{display:flex; flex-direction:column; gap:2px; flex:1}
#shell .plttl b{font-size:19px}
#shell .plwarn{background:#fff6f5; border:1px solid #f3d6d4; border-radius:var(--r-sm);
  padding:11px 14px; font-size:13.5px; line-height:1.5; margin-bottom:14px}
#shell .plwarn b{color:var(--stop)}
#shell .plcols{display:grid; grid-template-columns:minmax(0,1.3fr) minmax(0,1fr); gap:20px;
  align-items:start}
#shell .plcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:14px 16px; margin-bottom:12px}
#shell .plcard.recalled{border-color:#f3d6d4}
#shell .plwhere{display:flex; gap:10px; align-items:baseline; font-size:12.5px;
  color:var(--ink-soft); margin-bottom:8px}
#shell .plfetch{margin-left:auto; font:700 10px var(--mono); letter-spacing:.05em;
  text-transform:uppercase; border-radius:4px; padding:2px 7px}
#shell .plfetch.ok{background:#e6f4ee; color:var(--ok)}
#shell .plfetch.no{background:#fdeceb; color:var(--stop)}
#shell .plcard p{font-size:13.5px; line-height:1.6; margin:0 0 8px}
#shell .plside{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px}
#shell .placcrow{padding:8px 0; border-top:1px solid var(--edge-soft); font-size:13px}
#shell .placcrow b{display:block; line-height:1.45}
#shell .plrate{margin-top:14px; border-top:1px solid var(--edge); padding-top:12px}
#shell .plrate b{font:700 20px var(--mono); color:var(--brand-deep); display:block}

/* The old screens reveal their blocks on arrival: .rv starts at zero opacity
   and a "played" class on an ancestor runs the animation. The shell lifts
   those blocks into pages that never had that class, so everything inside them
   was drawn and then hidden. Here they are simply already arrived. */
#shell .rv{opacity:1 !important; animation:none !important; transform:none !important}
#shell .pseg{stroke-dasharray:var(--seg) 9999 !important; animation:none !important}
#shell .dbcol.waiting{opacity:.55}
#shell .dbstate{float:right; font:700 10px var(--mono); letter-spacing:.06em;
  text-transform:uppercase; border-radius:4px; padding:2px 7px; background:var(--edge-soft);
  color:var(--ink-faint)}
#shell .dbstate.done{background:#e6f4ee; color:var(--ok)}
#shell .dbstate.writing{background:var(--brand-bright); color:var(--on-bright)}
#shell .dbfoot{margin-top:12px; font:12px var(--mono); color:var(--ink-faint)}
#shell .dbverdict{background:var(--brand-deep); color:var(--on-deep); border-radius:var(--r);
  padding:18px 20px; grid-column:1/-1}
#shell .dbverdict .cap{color:rgba(255,255,255,.6)}
#shell .dbverdict p{font-size:16px; line-height:1.55; margin:6px 0 14px}
#shell .dbcounts{display:flex; gap:22px; border-top:1px solid rgba(255,255,255,.18); padding-top:12px}
#shell .dbcounts span{display:flex; flex-direction:column; font-size:12px;
  color:rgba(255,255,255,.7)}
#shell .dbcounts b{font:700 22px var(--mono); color:var(--brand-bright)}
#shell .dbdissent{border-top:1px solid var(--edge-soft); padding:10px 0}
#shell .dbdissent b{font-size:14px}
#shell .dbdissent .sub{margin-left:8px; font-size:12px; color:var(--ink-faint)}
#shell .dbdissent p{margin:4px 0 0; font-size:13.5px; line-height:1.55}
#shell .dbacts{display:flex; gap:10px; grid-column:1/-1; margin-top:4px}

/* board 40 as it now reads: the badge, the evidence pairs, the grouped actions */
#shell .needsyou{background:var(--t-assumed); color:var(--t-assumed-ink); font:700 9.5px var(--mono);
  letter-spacing:.05em; text-transform:uppercase; border-radius:4px; padding:2px 6px;
  margin-left:7px; white-space:nowrap; display:inline-block}
#shell .atile{position:relative}
#shell .atile .needsyou{position:absolute; top:12px; right:12px; margin:0}
#shell .whyhead .sub{font-size:12px; color:var(--ink-faint)}
#shell .evbit{display:inline-flex; align-items:center; gap:6px; font-size:12px;
  color:var(--ink-soft); background:var(--sheet); border:1px solid var(--edge);
  border-radius:5px; padding:3px 8px 3px 3px}
#shell .evbit i{font:700 10px var(--mono); font-style:normal; border-radius:3px; padding:2px 5px;
  background:var(--edge-soft); color:var(--ink-soft)}
#shell .evbit i.known{background:var(--t-known); color:#fff}
#shell .evbit i.inferred{background:var(--t-inferred); color:var(--t-inferred-ink)}
#shell .evbit i.assumed{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .anagrp{margin-bottom:14px}
#shell .anagrp .cap{text-transform:uppercase; letter-spacing:.07em; font-size:10.5px;
  color:var(--ink-faint); margin-bottom:7px}
#shell .anaact{background:var(--edge-soft); border-radius:var(--r-sm); padding:10px 12px;
  margin-bottom:7px}
#shell .anaact b{display:block; font-size:13.5px; line-height:1.45}
#shell .anaact .sub{display:block; font-size:12px; color:var(--ink-soft); margin-top:3px}
#shell .premortem b{white-space:nowrap; background:var(--t-assumed); color:var(--t-assumed-ink);
  font:700 9.5px var(--mono); letter-spacing:.05em; text-transform:uppercase;
  border-radius:4px; padding:3px 7px; height:fit-content}

/* ---- the settings pages, boards 19, 20, 24 ------------------------------ */
#shell .hlcols{display:grid; grid-template-columns:320px minmax(0,1fr); gap:20px; align-items:start}
#shell .prcols{display:grid; grid-template-columns:260px minmax(0,1fr); gap:20px; align-items:start}
#shell .nfcols{display:grid; grid-template-columns:280px minmax(0,1fr) 260px; gap:20px; align-items:start}
#shell .hlside, #shell .prside, #shell .nfside, #shell .nfready{background:var(--sheet);
  border:1px solid var(--edge); border-radius:var(--r); padding:14px 16px}
#shell .hlmain, #shell .prmain, #shell .nfmain{min-width:0}
#shell .hlrow, #shell .prrow, #shell .nfstep{display:flex; gap:10px; width:100%; text-align:left;
  background:none; border:0; border-radius:var(--r-sm); padding:8px 9px; cursor:pointer;
  font:inherit; font-size:13.5px; align-items:flex-start; color:var(--ink)}
#shell .hlrow:hover, #shell .prrow:hover, #shell .nfstep:hover{background:var(--edge-soft)}
#shell .hlrow.on, #shell .prrow.on, #shell .nfstep.on{background:var(--edge-soft);
  box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .hlrow b, #shell .nfstep b{display:block}
#shell .hlrow .sub, #shell .nfstep .sub{display:block; font-size:12px; color:var(--ink-faint)}
#shell .hln, #shell .nfn{width:24px; height:24px; border-radius:50%; background:var(--edge);
  color:var(--ink-soft); font:700 11px var(--mono); display:inline-flex; align-items:center;
  justify-content:center; flex:0 0 24px}
#shell .hlrow.over .hln{background:var(--caution); color:#fff}
#shell .hlcard, #shell .nfcard{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:18px 20px}
#shell .hlcard h3, #shell .nfcard h3{font-size:18px; margin:4px 0 6px}
#shell .hlacc{margin:12px 0; border-top:1px solid var(--edge)}
#shell .hlaccrow{padding:7px 0; border-bottom:1px solid var(--edge-soft); font-size:13px;
  line-height:1.5}
#shell .hldraft{margin-top:16px; border-top:1px solid var(--edge); padding-top:14px}
#shell .hldiff{font:12px/1.6 var(--mono); background:var(--edge-soft); border-radius:var(--r-sm);
  padding:12px 14px; max-height:40vh; overflow:auto}
#shell .hldiff .dl.out{color:var(--stop)}
#shell .hldiff .dl.in{color:var(--ok)}
#shell .prdot{width:7px; height:7px; border-radius:50%; background:var(--caution); flex:0 0 7px;
  margin-top:6px}
#shell .prdot.off{background:transparent}
#shell .prhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:12px}
#shell .prhead b{font:14px var(--mono)}
#shell .prtabs{background:var(--edge-soft); padding:3px}
#shell .prtabs button{color:var(--ink-soft); font-size:12.5px; padding:5px 11px; border-radius:6px}
#shell .prtabs button.on{background:var(--brand-deep); color:#fff}
#shell .prtext, #shell .prfilled{width:100%; font:12.5px/1.65 var(--mono); border:1px solid var(--edge);
  border-radius:var(--r-sm); padding:12px 14px; background:var(--sheet); color:var(--ink);
  white-space:pre-wrap; max-height:50vh; overflow:auto}
#shell .prvars{margin-top:14px}
#shell .prvar{display:inline-block; font:11.5px var(--mono); background:var(--edge-soft);
  border-radius:5px; padding:3px 8px; margin:0 6px 6px 0; color:var(--ink-soft)}
#shell .prvar.bad{background:#fdeceb; color:var(--stop)}
#shell .nfbig{font:700 26px var(--mono); color:var(--brand-deep); margin:2px 0 10px}
#shell .nfbig span{font:400 12px var(--font-ui); color:var(--ink-soft)}
#shell .nfrow{display:flex; gap:8px; font-size:12.5px; padding:4px 0; line-height:1.45}
#shell .nfrow.ok{color:var(--ink)}
#shell .nfrow.no{color:var(--ink-faint)}
#shell .nfrow.ok > span:first-child{color:var(--ok)}
#shell .nflist{margin:12px 0; border-top:1px solid var(--edge); padding-top:10px}
#shell .nfdraft{background:var(--edge-soft); border-radius:var(--r-sm); padding:12px 14px;
  margin:12px 0; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
#shell .nfsummary{margin-top:14px; border-top:1px solid var(--edge); padding-top:12px}

/* ---- the pattern, board 21 ---------------------------------------------- */
#shell .ptwrap{max-width:1200px; margin:0 auto; padding:20px 26px 60px}
#shell .pthead{display:flex; gap:16px; align-items:center; margin-bottom:18px}
#shell .pthead .ghost{background:none; border:0; color:var(--ink-soft); cursor:pointer;
  font:inherit; font-size:13.5px; padding:6px 2px}
#shell .ptttl{display:flex; flex-direction:column; gap:2px; flex:1}
#shell .ptttl b{font-size:19px}
#shell .ptcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:20px 22px}
#shell .ptnot{background:#fff8f1; border-radius:var(--r-sm); padding:12px 14px; margin-top:14px;
  display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.55}
#shell .ptnot b{color:var(--caution)}
#shell .ptother{margin-top:20px}
#shell .ptrow{display:flex; gap:12px; width:100%; text-align:left; align-items:center;
  background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:10px 12px; margin-bottom:7px; cursor:pointer; font:inherit; font-size:13px; color:var(--ink)}
#shell .ptrow.on{box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .ptn{font:700 11px var(--mono); color:var(--ink-faint); min-width:56px}
#shell .scard.go{display:block; width:100%; text-align:left; cursor:pointer; font:inherit;
  color:var(--ink)}
#shell .scard.go:hover{border-color:var(--brand-tone)}

/* ---- a step, full size: boards 46, 47 and 48 ---------------------------- */
#shell .svbar{display:flex; align-items:center; gap:16px; background:var(--brand-deep);
  color:var(--on-deep); padding:12px 22px}
#shell .svmark{font-weight:700; font-size:17px; letter-spacing:-.01em}
#shell .svmark{display:inline-flex; align-items:center; gap:6px}
#shell .svmark .mkcairn{height:20px}
#shell .svmark .mkname{font-size:19px; line-height:1}
#shell .svwho{font-size:13.5px; color:rgba(255,255,255,.8); flex:1}
#shell .svwho b{color:#fff}
#shell .svfacts{font:11.5px var(--mono); color:rgba(255,255,255,.6); white-space:nowrap}
#shell .svbody{max-width:1440px; margin:0 auto; padding:22px 26px 60px}
#shell .svcols{display:grid; grid-template-columns:minmax(0,1.55fr) minmax(0,1fr); gap:20px;
  align-items:start}
#shell .svmain, #shell .svside{display:flex; flex-direction:column; gap:14px; min-width:0}
#shell .svcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px}
#shell .svhead{display:flex; justify-content:space-between; align-items:baseline; gap:14px;
  margin-bottom:10px}
#shell .svhead h3{font-size:16px; margin:0}
#shell .svhead .sub{font-size:12px; color:var(--ink-faint); text-align:right}
#shell .svreg{background:var(--brand-deep); color:var(--on-deep); border-radius:var(--r);
  padding:12px 16px; font-size:13px; line-height:1.5; display:flex; gap:12px; align-items:center;
  flex-wrap:wrap}
#shell .svregtag{font:700 10px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  background:rgba(255,255,255,.16); border-radius:4px; padding:3px 7px}
#shell .svrow{display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  border-top:1px solid var(--edge-soft); font-size:13.5px; line-height:1.5}
#shell .svrow b{display:block}
#shell .svrow .sub{display:block; font-size:12px; color:var(--ink-faint)}
#shell .svq{display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:10px;
  padding:8px 0; border-top:1px solid var(--edge-soft); font-size:13.5px; align-items:baseline}
#shell .svqn{font:700 12px var(--mono); color:var(--brand-tone)}
#shell .svq .sub{font-size:11.5px; color:var(--ink-faint); white-space:nowrap}
#shell .svmeter{height:10px; margin:2px 0 12px}
#shell .svkey{padding:7px 0; border-top:1px solid var(--edge-soft); font-size:13px}
#shell .svkey b{font:700 12px var(--mono)}
#shell .svkey .sub{display:block; font-size:12px; color:var(--ink-soft); line-height:1.45}
#shell .svsrc{display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-top:1px solid var(--edge-soft); font:12px var(--mono); color:var(--ink-soft)}
#shell .svsrc .ok{color:var(--ok)}
#shell .svsrc .no{color:var(--caution)}
#shell .svdark{background:var(--brand-deep); color:var(--on-deep); border-radius:var(--r);
  padding:20px 22px; margin-bottom:16px}
#shell .svdark .cap{color:var(--brand-bright)}
#shell .svdark h2{font-size:23px; line-height:1.35; margin:6px 0 8px}
#shell .svdark p{margin:0; font-size:13px; color:rgba(255,255,255,.8)}
#shell .svsections{display:grid; grid-template-columns:repeat(auto-fit, minmax(260px,1fr)); gap:12px;
  align-content:start}
#shell .svsec{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:13px 15px}
#shell .svsec.none{border-color:var(--caution)}
#shell .svsec.thin{border-color:var(--t-assumed-ink)}
#shell .svsec p{margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--ink-soft)}
#shell .svstate{font:700 11px var(--mono); color:var(--ok)}
#shell .svstate.thin{color:var(--caution)}
#shell .svstate.none{color:var(--stop)}
#shell .svbig{font:700 30px var(--mono); color:var(--brand-deep); margin:2px 0 12px}
#shell .svbig span{font:400 12px var(--font-ui); color:var(--ink-soft)}
#shell .svlevel{display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-top:1px solid var(--edge-soft); font-size:13px}
#shell .svlevel .lv, #shell .svtest .lv{font:700 11px var(--mono); color:var(--ok)}
#shell .svlevel .lv.thin, #shell .svtest .lv.fail{color:var(--caution)}
#shell .svlevel .lv.no{color:var(--stop)}
#shell .svwho2{display:flex; justify-content:space-between; gap:10px; padding:6px 0;
  border-top:1px solid var(--edge-soft); font-size:13px}
#shell .svsentence h2{font-size:23px; line-height:1.4; margin:6px 0 0; letter-spacing:-.01em}
#shell .svmirror .svgap{color:var(--stop)}
#shell .svmirror .svours{color:var(--brand-accent-text)}
#shell .svtest{display:flex; gap:10px; align-items:flex-start; padding:9px 0;
  border-top:1px solid var(--edge-soft); font-size:13px; line-height:1.5}
#shell .svtest b{display:block}
#shell .svtest .sub{display:block; font-size:12px; color:var(--ink-soft)}
#shell .svtest.fail{background:#fff8f1; border-radius:var(--r-sm); padding:9px 10px}
@media (max-width: 1160px){ #shell .svcols{grid-template-columns:minmax(0,1fr)} }
#shell .topbar.hide{display:none}
#shell .topaccent.hide{display:none}

/* ---- the three step moments, board 52 ----------------------------------- */
#shell .landed{background:var(--edge-soft); border-radius:var(--r-sm); padding:14px 16px;
  margin-bottom:12px}
#shell .lhead{display:flex; gap:12px; align-items:baseline; margin-bottom:10px}
#shell .lhead b{font-size:15px}
#shell .lhead .sub{font-size:12px; color:var(--ok)}
#shell .lx{margin-left:auto; background:none; border:0; cursor:pointer; color:var(--ink-faint);
  font-size:17px; line-height:1; padding:0 4px}
#shell .lbody{background:var(--sheet); border-radius:var(--r-sm); padding:12px 14px}
#shell .lrow{display:grid; grid-template-columns:118px minmax(0,1fr); gap:10px; padding:5px 0;
  border-top:1px solid var(--edge-soft); font-size:13px; line-height:1.5}
#shell .lrow > span:first-child{color:var(--ink-soft)}
#shell .landed .acts{margin-top:10px}
#shell .norepair{border:1px solid var(--caution); border-radius:var(--r-sm); background:var(--sheet);
  padding:14px 16px; margin-bottom:12px}
#shell .nrhead{display:flex; justify-content:space-between; gap:12px; align-items:baseline}
#shell .nrhead b{font-size:15px}
#shell .nrtag{font-weight:700; font-size:13px; color:var(--caution)}
#shell .norepair p{font-size:13.5px; line-height:1.55; margin:8px 0 10px}
#shell .nrbox{background:#fff8f1; border-radius:var(--r-sm); padding:11px 13px; margin-bottom:12px}
#shell .nrbox b{display:block; font-size:13.5px; margin-bottom:3px}
#shell .nrbox span{font-size:13px; color:var(--ink-soft); line-height:1.5}
#shell .norepair .sub{font-size:12.5px; color:var(--ink-faint); margin:8px 0 0}
.whobox{width:min(560px,94vw)}
.whopick{display:flex; justify-content:space-between; gap:12px; width:100%; text-align:left;
  background:#fff; border:1px solid var(--edge, #e2e7ec); border-radius:8px; padding:11px 13px;
  margin-bottom:7px; cursor:pointer; font:inherit; font-size:13.5px; color:var(--ink, #16202f)}
.whopick:hover{border-color:var(--brand-tone, #B13B2F)}
.whopick b{display:block}
.whopick .sub{display:block; font-size:12px; color:var(--ink-soft, #4a5666)}
.whoseats{background:var(--edge-soft, #eef2f6); border-radius:8px; padding:11px 13px; margin-top:8px}
.whoseats b{display:block; font-size:13px; margin-bottom:3px}

/* ---- across the accounts, board 45 -------------------------------------- */
#shell .acbody{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
  max-width:1560px; margin:0 auto; padding:22px 26px 60px; align-items:start}
#shell .accol{display:flex; flex-direction:column; gap:16px; min-width:0}
#shell .accard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px}
#shell .accard.warm{background:#fff8f1; border-color:#f0dcc6}
#shell .actable td{vertical-align:top}
#shell .actable .warn{color:var(--caution)}
#shell .acsq{display:inline-flex; gap:4px}
#shell .acsq i{width:14px; height:14px; border-radius:3px; display:block; background:var(--edge)}
#shell .acsq i.on{background:var(--brand-deep)}
#shell .acsq i.short{background:var(--caution)}
#shell .aclegend{display:flex; gap:16px; margin-top:10px; font-size:12px; color:var(--ink-soft)}
#shell .aclegend i{width:11px; height:11px; border-radius:3px; display:inline-block;
  margin-right:5px; vertical-align:-1px; background:var(--edge)}
#shell .aclegend i.on{background:var(--brand-deep)}
#shell .aclegend i.short{background:var(--caution)}
#shell .acrow{display:flex; justify-content:space-between; gap:12px; padding:6px 0;
  border-top:1px solid var(--edge-soft); font-size:13px; line-height:1.45}
#shell .acrow b.warn{color:var(--caution); white-space:nowrap}
#shell .acbar{display:grid; grid-template-columns:minmax(0,1fr) 120px 42px; gap:10px;
  align-items:center; padding:5px 0; font-size:13px}
#shell .acbarline{display:flex; height:9px; border-radius:5px; overflow:hidden;
  background:var(--edge-soft)}
#shell .acbarline i.now{background:var(--brand-deep)}
#shell .acbarline i.build{background:var(--brand-tone)}
#shell .acbar .mono{font:11.5px var(--mono); color:var(--ink-soft); text-align:right}
#shell .acbig{font:700 26px var(--mono); color:var(--brand-deep); margin:4px 0 4px}
#shell .acopen{background:none; border:0; color:var(--brand-accent-text); font:inherit;
  font-size:12px; cursor:pointer; padding:0 0 0 8px}
@media (max-width: 1300px){ #shell .acbody{grid-template-columns:repeat(2, minmax(0,1fr))} }

/* ---- the account reviews, D2 --------------------------------------------- */
#shell .fvtabs{display:flex; align-items:center; gap:6px; flex-wrap:wrap; max-width:1560px;
  margin:0 auto; padding:16px 26px 0}
#shell .fvtab{background:var(--sheet); border:1px solid var(--edge); border-radius:999px;
  padding:6px 14px; font:inherit; font-size:13px; color:var(--ink-soft); cursor:pointer}
#shell .fvtab:hover{border-color:var(--brand-tone)}
#shell .fvtab.on{background:var(--brand-deep); border-color:var(--brand-deep); color:var(--on-deep)}
#shell .fvsep{font:10.5px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); margin:0 4px 0 14px}
#shell .fvbody{display:flex; flex-direction:column; gap:16px; max-width:1560px; margin:0 auto;
  padding:18px 26px 60px}
#shell .fvbody .svhead .tbtn{background:var(--brand-deep); color:var(--on-deep); border:0}
#shell .fvtable td{vertical-align:top}
#shell .fvtable tr.fvnm td:first-child b{color:var(--ink-soft)}
#shell .fvtable tr.fvfirm td{background:var(--sheet); border-top:1px solid var(--edge)}
#shell .fvsecs{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
#shell .fvlist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
#shell .fvlist li{display:flex; gap:10px; align-items:flex-start; font-size:13.5px; line-height:1.45}
#shell .fvlist li .mk{flex:none; margin-top:1px}
#shell .fvnone{margin:0}
#shell .fvst{font-size:12.5px; white-space:nowrap; color:var(--ink-soft)}
#shell .fvst.ok{color:var(--brand-deep); font-weight:700}
#shell .fvst.short{color:var(--caution); font-weight:700}
@media (max-width: 1000px){ #shell .fvsecs{grid-template-columns:minmax(0,1fr)} }
@media (max-width: 900px){ #shell .acbody{grid-template-columns:minmax(0,1fr)} }

/* board 40's tiles as the updated artboard draws them: no coloured edge, one
   value colour, the badge beside the label, and a sub that stays two lines */
#shell .atile{border-top-color:var(--edge) !important; padding:14px 16px}
#shell .atile .ttop{display:flex; gap:7px; align-items:center; min-height:18px}
#shell .atile .needsyou{position:static; margin:0}
#shell .atile .tbig{color:var(--brand-deep) !important; font-size:23px; margin:6px 0 4px}
#shell .atile .tsub{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.4}
#shell .anacols{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}

/* The analysis has a rail and a document and no evidence panel, so it gets
   two columns rather than the workspace's three. It was inheriting the third,
   which left a column of empty width down the right of the page and squeezed
   everything else into two thirds of the screen. */
#shell #scAnalysis .work{grid-template-columns:264px minmax(0,1fr)}
#shell #scAnalysis .anawrap{max-width:none}
/* the artboard writes the badge in its own words, not in capitals */
#shell .atile .needsyou{text-transform:none; font-size:10.5px; letter-spacing:0}
#shell #anaDoc .govern{font-size:28px; line-height:1.25}

/* ---- how we know it, in full: boards 49 and 50 -------------------------- */
#shell .evbody{max-width:1560px; margin:0 auto; padding:22px 26px 60px}
#shell .evcols3{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px;
  align-items:start}
#shell .evcols2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
  align-items:start}
#shell .evcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:16px 18px; min-width:0}
#shell .evcheck{border-left:3px solid var(--stop); background:#fff6f5; border-radius:0 8px 8px 0;
  padding:10px 12px; margin-bottom:9px}
#shell .evcheck.stopped{border-left-color:var(--caution); background:#fff8f1}
#shell .evcheck b{display:block; font-size:13px; color:var(--stop); line-height:1.4}
#shell .evcheck.stopped b{color:var(--caution)}
#shell .evcheck p{margin:5px 0 0; font-size:13px; line-height:1.5}
#shell .evcheck .sub{color:var(--ink-soft)}
#shell .evlink{background:none; border:0; padding:4px 0 0; cursor:pointer; font:inherit;
  font-size:12.5px; color:var(--brand-accent-text); text-decoration:underline}
#shell .evsub{margin:16px 0 8px; padding-top:12px; border-top:1px solid var(--edge)}
#shell .evsub b{display:block; font-size:14px}
#shell .evsub .sub{font-size:12.5px; color:var(--ink-soft)}
#shell .evrec{background:var(--edge-soft); border-radius:var(--r-sm); padding:10px 12px;
  margin-bottom:8px; font-size:13px}
#shell .evrechead{display:flex; justify-content:space-between; gap:10px}
#shell .evrechead .bad{color:var(--caution); font-weight:600}
#shell .evside{display:grid; grid-template-columns:62px minmax(0,1fr); gap:8px; padding:3px 0;
  line-height:1.45}
#shell .evside > span:first-child{color:var(--ink-faint)}
#shell .evask{margin:6px 0 0; font-size:12.5px; color:var(--brand-accent-text); font-weight:600}
#shell .evviews{background:var(--edge-soft); padding:3px; margin-bottom:10px}
#shell .evviews button{color:var(--ink-soft); font-size:12.5px; padding:5px 11px; border-radius:6px}
#shell .evviews button.on{background:var(--brand-deep); color:#fff}
#shell .evq{padding:9px 0; border-top:1px solid var(--edge-soft); font-size:13.5px; line-height:1.5}
#shell .evq .sub{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px}
#shell .evgrp{margin-bottom:12px}
#shell .evmoved{display:flex; gap:7px; align-items:center; padding:7px 0;
  border-top:1px solid var(--edge-soft); font-size:13px; line-height:1.45}
#shell .evarrow{color:var(--ink-faint)}
#shell .evmoved > span:last-child{flex:1; min-width:0}
#shell .evmoved b{display:block; font-size:13px; line-height:1.4}
#shell .evmoved .sub{display:block; font-size:11.5px; color:var(--ink-faint); line-height:1.4}
#shell .vpcols{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin-top:12px}
#shell .vpside{background:var(--edge-soft); border-radius:var(--r-sm); padding:12px}
#shell .vpside.ours{background:#eaf7f8}
#shell .vpgrp{margin-bottom:10px}
#shell .vpgrp b{display:block; font-size:12.5px; margin-bottom:5px}
#shell .vp{background:var(--sheet); border:1px solid var(--edge); border-radius:6px;
  padding:6px 9px; margin-bottom:5px; font-size:12.5px; line-height:1.4}
#shell .vp.open{border-style:dashed; border-color:var(--stop); color:var(--stop)}
#shell .evnotanswered{margin:10px 0 0; font-size:12.5px; color:var(--stop); line-height:1.5}
#shell .bmcnine{display:grid; gap:8px; margin-top:12px;
  grid-template-columns:repeat(5, minmax(0,1fr));
  grid-template-areas:"kp ka vp cr cs" "kp kr vp ch cs" "co co rs rs rs"}
#shell .bmcell{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r-sm);
  padding:9px 10px; font-size:12px; line-height:1.4; min-height:70px}
#shell .bmcell.empty{border-style:dashed}
#shell .bmcell b{display:flex; justify-content:space-between; gap:6px; font-size:12px;
  margin-bottom:5px}
#shell .bmcell span{display:block; color:var(--ink-soft); margin-bottom:3px}

/* ---- the rest of the settings, board 51 --------------------------------- */
#shell .smtabs{background:var(--edge-soft); padding:3px; margin-bottom:16px}
#shell .smtabs button{color:var(--ink-soft); font-size:13px; padding:6px 12px; border-radius:7px}
#shell .smtabs button.on{background:var(--brand-deep); color:#fff}
#shell .smcols{display:grid; grid-template-columns:230px minmax(0,1fr); gap:18px; align-items:start}
#shell .smcols2{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px;
  align-items:start}
#shell .smcard, #shell .smside{background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r); padding:16px 18px}
#shell .smrow{display:block; width:100%; text-align:left; background:none; border:0;
  border-radius:var(--r-sm); padding:9px 10px; cursor:pointer; font:inherit; color:var(--ink)}
#shell .smrow:hover{background:var(--edge-soft)}
#shell .smrow.on{background:var(--edge-soft); box-shadow:inset 0 0 0 1.5px var(--brand-tone)}
#shell .smrow b{display:block; font-size:13.5px}
#shell .smrow .sub{display:block; font-size:12px; color:var(--brand-accent-text)}
#shell .smcard label{display:block; font-size:12.5px; color:var(--ink-soft); margin-bottom:12px}
#shell .smcard input, #shell .smcard textarea, #shell .smcard select{width:100%; margin-top:4px;
  padding:8px 10px; border:1px solid var(--edge); border-radius:7px; font:inherit;
  font-size:13.5px; color:var(--ink)}
#shell .smcard textarea{font:12.5px/1.6 var(--mono)}
#shell .smfields{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px}
#shell .smtier{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3, minmax(0,1fr));
  gap:12px; align-items:start; padding:12px 0; border-top:1px solid var(--edge-soft)}
#shell .smtier b{display:block; font-size:13.5px}
#shell .smtier .sub{display:block; font-size:12px; color:var(--ink-faint)}
#shell .smcheck{border-radius:var(--r-sm); padding:9px 12px; font-size:13px; margin:10px 0}
#shell .smcheck.ok{background:#e6f4ee; color:var(--ok)}
#shell .smcheck.bad{background:#fdeceb; color:var(--stop)}
#shell .smcheck.part{background:#fdf1e2; color:#8a4b10}
#shell .smtoggle{display:flex; gap:9px; align-items:center}
#shell .smtoggle input{width:auto; margin:0}
#shell .smchange{display:grid; grid-template-columns:78px 150px minmax(0,1fr); gap:12px;
  padding:8px 0; border-top:1px solid var(--edge-soft); font-size:13px; align-items:baseline}
#shell .smchange s{color:var(--ink-faint)}
@media (max-width: 1240px){ #shell .evcols3{grid-template-columns:minmax(0,1fr)} }

/* ---- the offering library, simple and detailed, both editable ------------- */
#shell .libtable input, #shell .libcard input, #shell .libcard select{width:100%; padding:7px 9px;
  border:1px solid var(--edge); border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink);
  background:var(--sheet); box-sizing:border-box}
#shell .rtable.libtable td{vertical-align:middle}
#shell .libtable input{margin:0}
#shell .libtable .pill2{white-space:nowrap}
#shell .libcard textarea{width:100%; padding:7px 9px; border:1px solid var(--edge); border-radius:7px;
  font:13px/1.45 var(--font-ui); color:var(--ink); resize:vertical; box-sizing:border-box; margin:0}
#shell .libcards{display:flex; flex-direction:column; gap:14px}
#shell .libcard h3{margin:0; font-size:16px}
#shell .libcard .cap{font:10.5px var(--mono); letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); margin:10px 0 6px}
#shell .libtrig{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)) 80px; gap:8px;
  margin-bottom:6px; align-items:center}
#shell .libtrig.libhead span{font-size:11.5px; color:var(--ink-faint)}
#shell .libproof{display:grid; grid-template-columns:minmax(0,2.2fr) minmax(0,1fr) minmax(0,1fr) 80px 80px;
  gap:8px; margin-bottom:6px; align-items:center}
@media (max-width: 1000px){ #shell .libtrig, #shell .libproof{grid-template-columns:minmax(0,1fr)} }

/* ---- board 10A, no key; 10B, nobody interviewed yet --------------------- */
#shell .keybar{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px 20px; margin-bottom:18px}
#shell .keybar b{display:block; font-size:17px; color:var(--brand-deep); line-height:1.35}
#shell .keybar p{margin:6px 0 12px; font-size:13.5px; line-height:1.55; color:var(--ink-soft)}
#shell .keyrow{display:flex; gap:10px; align-items:center}
#shell .keyrow input{flex:1; padding:10px 12px; border:1px solid var(--edge); border-radius:8px;
  font:inherit; font-size:14px; color:var(--ink)}
#shell .keyalt{display:flex; gap:14px; align-items:center; justify-content:space-between;
  margin-top:14px; padding-top:12px; border-top:1px solid var(--edge-soft); font-size:13px;
  color:var(--ink-soft)}
#shell .keybar .sub{margin:10px 0 0; font-size:12.5px; color:var(--ink-faint)}
#shell .railfold{margin:8px 12px; border:1px dashed var(--edge); border-radius:var(--r-sm);
  padding:12px 13px; display:flex; flex-direction:column; gap:6px; align-items:flex-start}
#shell .railfold b{font-size:12.5px; color:var(--ink-soft)}
#shell .railfold span{font-size:12px; color:var(--ink-faint); line-height:1.5}
#shell .rstep.pitch .dot{background:var(--brand-bright); color:var(--on-bright)}
#shell .pitchdoc .acts{margin-top:18px}

/* ---- the quick adds in Sources, board 09 -------------------------------- */
#shell .srcquick{display:flex; gap:8px; flex-wrap:wrap; margin-top:12px}
#shell .srcquick .filt.on{background:var(--brand-deep); color:#fff; border-color:transparent}
#shell .srcform{background:var(--edge-soft); border-radius:var(--r-sm); padding:12px 14px;
  margin-top:10px}
#shell .srcform .sub{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:0 0 9px}
#shell .srcrow{display:flex; gap:8px; margin-bottom:8px}
#shell .srcform input, #shell .srcform textarea{width:100%; padding:9px 11px;
  border:1px solid var(--edge); border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink)}
#shell .srcform textarea{font:12.5px/1.6 var(--mono)}
#shell .srcform .acts{margin-top:10px; align-items:center}

/* ---- the Sources drawer itself, board 09 -------------------------------- */
#shell .srcwrap{display:flex; flex-direction:column; height:100%}
#shell .srchead{padding:20px 22px 0; flex:0 0 auto}
#shell .srcsub{color:var(--ink-soft); font-size:14px; line-height:1.55; margin:8px 0 16px}
#shell .srcdrop{border:1.5px dashed var(--brand-tone); border-radius:var(--r-sm);
  background:var(--brand-tint); text-align:center; padding:22px 18px; cursor:pointer}
#shell .srcdrop b{color:var(--brand-deep); font-size:15px}
#shell .srcdrop .sub{color:var(--ink-soft); font-size:12.5px; line-height:1.5; margin-top:5px}
#shell .srcdrop:hover{background:var(--edge-soft)}
#shell .srcsweep{margin-top:8px}
#shell .srclist{flex:1 1 auto; overflow:auto; padding:18px 22px 22px}
#shell .srcgroup{margin-bottom:18px}
#shell .srcgh{display:flex; align-items:baseline; gap:10px; margin:0 0 8px}
#shell .srcgh h3{flex:1; font:600 11px/1 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-faint); margin:0}
#shell .srcgh span{font-size:11.5px; color:var(--ink-faint)}
#shell .srcrow2{position:relative; display:flex; align-items:flex-start; gap:11px;
  background:var(--edge-soft); border-radius:var(--r-sm); padding:11px 13px; margin-bottom:8px}
#shell .srcrow2.warm{background:#fff8f1; box-shadow:inset 3px 0 0 var(--t-assumed)}
#shell .srctype{flex:0 0 auto; font:600 10px/1 var(--mono); letter-spacing:.06em;
  padding:5px 7px; border-radius:5px; background:#fff; color:var(--ink-faint);
  border:1px solid var(--edge)}
#shell .srctype.reg, #shell .srctype.talk{background:var(--brand-deep); color:#fff;
  border-color:transparent}
#shell .srctype.room{background:var(--t-assumed); color:var(--t-assumed-ink); border-color:transparent}
#shell .srcmid{flex:1 1 auto; min-width:0}
#shell .srcmid b{display:block; font-size:14px; color:var(--ink); line-height:1.35}
#shell .srcmid .sub{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:3px}
#shell .srcsteps{flex:0 0 auto; display:flex; align-items:center; gap:5px}
#shell .stepchip{min-width:22px; height:22px; border-radius:11px; background:#fff;
  border:1px solid var(--edge); font:600 11px/20px var(--mono); color:var(--brand-deep);
  text-align:center; padding:0 5px}
#shell .srcmore{background:none; border:none; cursor:pointer; color:var(--ink-faint);
  font-size:16px; line-height:1; padding:2px 4px; border-radius:5px}
#shell .srcmore:hover{background:#fff; color:var(--ink)}
#shell .srcmenu{position:absolute; right:10px; top:38px; z-index:5; background:#fff;
  border:1px solid var(--edge); border-radius:var(--r-sm); box-shadow:var(--lift-up);
  padding:5px; min-width:250px}
#shell .srcmenu button{display:block; width:100%; text-align:left; background:none;
  border:none; padding:8px 10px; border-radius:6px; font:inherit; font-size:13px;
  color:var(--ink); cursor:pointer}
#shell .srcmenu button:hover{background:var(--edge-soft)}
#shell .srcmenu hr{border:none; border-top:1px solid var(--edge); margin:4px 0}
#shell .srcnone{color:var(--ink-faint); margin-top:18px}
#shell .srcfoot{flex:0 0 auto; display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--edge); padding:14px 22px; background:#fff}
#shell .srcfootsay{flex:1 1 auto; min-width:0}
#shell .srcfootsay b{display:block; font-size:13.5px; color:var(--ink)}
#shell .srcfootsay span{display:block; font-size:12.5px; color:var(--ink-faint); margin-top:2px}

/* ---- tables, in the new screens ---------------------------------------- */
/* `.rtable` is the old screen's table: a navy header band and a border on
   every cell. Eight of the new screens use the class, so they were all
   carrying the old look. The house style is a grey mono caps header and rows
   as bands, the way boards 21A and 45 draw them. */
#shell .rtable{border-collapse:separate; border-spacing:0 6px; width:100%; font-size:13.5px}
#shell .rtable th{background:none; color:var(--ink-faint); text-align:left;
  font:600 10.5px/1.3 var(--mono); letter-spacing:.09em; text-transform:uppercase;
  padding:0 12px 4px}
#shell .rtable td{border:0; background:var(--edge-soft); padding:11px 12px;
  vertical-align:top; color:var(--ink)}
#shell .rtable tbody tr td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
#shell .rtable tbody tr td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
#shell .rtable tbody tr.on td{background:var(--brand-tint)}

/* ---- the offering map's key, board 41 ----------------------------------- */
#shell .mapleg{display:flex; flex-wrap:wrap; gap:18px; margin:10px 0 0;
  font-size:12.5px; color:var(--ink-soft)}
#shell .mapleg span{display:inline-flex; align-items:center; gap:7px}
#shell .mapleg i{width:12px; height:12px; border-radius:50%; display:inline-block}
#shell .mapleg .lgfrom{border:1.5px dashed var(--ink-faint)}
#shell .mapleg .lgsel{background:var(--brand-tone)}
#shell .mapleg .lgout{border:1.5px solid var(--stop)}
#shell .mapleg .lgcap{background:var(--brand-accent-text); outline:1.5px dashed var(--brand-accent-text); outline-offset:2px; margin:0 3px}

/* ---- the rung ladder in the buyer's view, board 15 ---------------------- */
#shell .dplad{display:flex; flex-direction:column; gap:6px; margin:8px 0 12px}
#shell .dprung{display:flex; align-items:center; gap:10px; padding:11px 13px;
  border-radius:var(--r-sm); background:var(--edge-soft); font-size:13.5px; color:var(--ink)}
#shell .dprung span{flex:1; min-width:0}
#shell .dprung i{font:600 10px/1 var(--mono); letter-spacing:.08em; text-transform:uppercase;
  font-style:normal; color:var(--ink-faint)}
#shell .dprung.want{background:var(--brand-deep); color:#fff}
#shell .dprung.want i{color:rgba(255,255,255,.75)}
#shell .dprung.here{background:var(--brand-tint); box-shadow:inset 0 0 0 1px var(--brand-tone)}
#shell .dprung.here i{color:var(--brand-mid)}
#shell .topfirm{font-size:14px; color:rgba(255,255,255,.82); white-space:nowrap}
#shell .topfirm.hide{display:none}
#shell .dblead{margin:0 0 18px}
#shell .dblead .govern{font-size:28px; line-height:1.18; margin:6px 0 0}

/* ---- present, board 06 --------------------------------------------------- */
/* The slide is the room's version of the plan. Every figure on it is the one a
   screen already draws, so the colours are restated here rather than the
   drawings being written a second time for a dark background. */
#presentOverlay .preswrap{height:100%; display:flex; flex-direction:column;
  color:#fff; padding:4.5vh 5vw 3vh}
#presentOverlay .prestop{display:flex; gap:12px; align-items:center;
  font:12px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.62)}
#presentOverlay .prestop .sp{flex:1}
#presentOverlay .presbody{flex:1; min-height:0; display:flex; align-items:stretch; gap:4vw;
  padding:2vh 0}
/* A centred column that overflows overflows at both ends, and the top end
   cannot be scrolled back to: the headline sat above the slide and there was
   no way to reach it. `safe` centres while it fits and starts at the top when
   it does not. The plain value first, for an engine that does not know it. */
#presentOverlay .presbody .pressay{flex:1 1 auto; min-width:0; min-height:0; overflow:auto;
  display:flex; flex-direction:column;
  justify-content:flex-start;
  justify-content:safe center}
#presentOverlay .presbody .presfig{justify-content:center}
#presentOverlay .presbody.figside .pressay{flex:1 1 52%}
#presentOverlay .presbody.figside .presfig{flex:0 1 44%; min-width:0}
#presentOverlay .presbody.figwide{flex-direction:column; align-items:stretch; gap:2vh}
#presentOverlay .presbody.figwide .pressay{flex:0 0 auto; overflow:visible; justify-content:flex-start}
#presentOverlay .presbody.figwide .presfig{flex:1 1 auto; min-height:0; overflow:hidden}
#presentOverlay .presbody.figwide .presheet{flex:1 1 auto; max-height:100%}
#presentOverlay .presbody.figwide .presbul{margin-top:10px; font-size:clamp(13px,1.15vw,16px)}
#presentOverlay .presbody.figwide .presbul li{margin-bottom:4px}
#presentOverlay .preshead{font-size:clamp(26px,3.6vw,50px); line-height:1.15; margin:0 0 22px}
#presentOverlay .preshead.mid{font-size:clamp(22px,2.6vw,36px)}
#presentOverlay .preshead.tight{font-size:clamp(19px,2vw,28px); line-height:1.25; margin:0 0 16px}
#presentOverlay .presbody.figwide .preshead{font-size:clamp(22px,2.4vw,34px); margin:0 0 10px}
#presentOverlay .presmeter{max-width:620px}
#presentOverlay .presmeter p{color:rgba(255,255,255,.7); margin-top:9px; font-size:15px}
#presentOverlay .presmoves{margin-top:22px; display:flex; flex-direction:column; gap:10px}
#presentOverlay .presmove{display:flex; align-items:baseline; gap:16px;
  background:rgba(255,255,255,.07); border-radius:12px; padding:14px 18px}
#presentOverlay .presmove .n{font:700 20px var(--mono); color:var(--brand-bright)}
#presentOverlay .presmove div{flex:1; min-width:0}
#presentOverlay .presmove b{display:block; font-size:clamp(15px,1.4vw,20px); line-height:1.3}
#presentOverlay .presmove span{display:block; color:rgba(255,255,255,.72);
  font-size:clamp(13px,1.05vw,15px); margin-top:3px}
#presentOverlay .presask{display:flex; gap:14px; align-items:baseline; margin-top:18px;
  background:rgba(255,255,255,.07); border-radius:12px; padding:14px 18px;
  font-size:clamp(14px,1.15vw,17px)}
#presentOverlay .presbul{font-size:clamp(15px,1.5vw,21px); line-height:1.6; margin-top:18px}
#presentOverlay .presbul li{margin-bottom:8px; color:rgba(255,255,255,.88)}
#presentOverlay .preslines{margin-top:18px}
#presentOverlay .preslines div{display:flex; gap:14px; align-items:baseline; margin-bottom:12px}
#presentOverlay .preslines div span:last-child{font-size:clamp(15px,1.5vw,21px); line-height:1.5}
#presentOverlay .presfig{display:flex; flex-direction:column; min-height:0}
#presentOverlay .figcap{font:12px var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:rgba(255,255,255,.55); margin-bottom:10px}
#presentOverlay .presheet{background:#fff; color:var(--ink); border-radius:14px;
  padding:16px 18px; overflow:auto; min-height:0}
#presentOverlay .presheet svg{width:100%; height:auto; display:block}
#presentOverlay .presona{min-height:0; overflow:auto}
#presentOverlay .prescw{min-height:0}
#presentOverlay .prescw svg{width:100%; height:auto; max-height:56vh; display:block}
/* the clock's own text is set for paper */
#presentOverlay .cwheel .cwm, #presentOverlay .cwheel .cwy,
#presentOverlay .cwheel .cwc{fill:rgba(255,255,255,.92)}
#presentOverlay .cwheel .cwc.warn{fill:var(--t-assumed)}
#presentOverlay .cwheel circle[fill="#FFFFFF"]{fill:transparent}
#presentOverlay .presfoot{display:flex; align-items:center; gap:18px;
  color:rgba(255,255,255,.5); font-size:13px; padding-top:2vh}
#presentOverlay .presdots{display:flex; gap:7px; flex:1}
/* the export brand's logo and tagline, as the deck carries them */
/* on a light panel: a logo drawn for a light band (HTGP's is navy) vanishes on
   the deep background, and a logo is never recoloured */
#presentOverlay .preslogo{height:26px; width:auto; flex:none; background:#fff;
  padding:6px 10px; border-radius:8px; box-sizing:content-box}
#presentOverlay .prestag{height:24px; width:auto; flex:none}
#presentOverlay .prestag.words{height:auto; font-size:15px; color:var(--on-deep)}
#presentOverlay .prestable + .presmore{margin-top:8px}
#presentOverlay .presdots i{width:22px; height:3px; border-radius:2px;
  background:rgba(255,255,255,.22)}
#presentOverlay .presdots i.on{background:var(--brand-bright); width:34px}
#presentOverlay .presnote{flex:0 0 auto; font:11px var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--t-assumed)}
/* A figure on a slide is the figure, and the slide has already said what it
   shows, so the panel's own heading and standfirst come off. */
#presentOverlay .presheet{font-size:12.5px}
#presentOverlay .presheet .svhead, #presentOverlay .presheet > .evcard > .sub{display:none}
#presentOverlay .presheet .evcard{border:0; padding:0; box-shadow:none; background:none}
#presentOverlay .presheet .vp{padding:7px 9px; font-size:12.5px}
#presentOverlay .presheet .cap{margin-bottom:4px}
#presentOverlay .presona .cnote{color:rgba(255,255,255,.72); font-size:13.5px}
#presentOverlay .presona .pquote{color:#fff}

/* ---- outputs, board 08 -------------------------------------------------- */
#shell .outbig{display:grid; grid-template-columns:minmax(0,1fr) 210px; gap:18px;
  margin:0 0 16px; align-items:start}
#shell .outpage{aspect-ratio:16/9; border-radius:var(--r); padding:22px 26px;
  background:linear-gradient(135deg, var(--g-from), var(--g-mid) 55%, var(--g-to));
  color:#fff; display:flex; flex-direction:column; overflow:hidden}
#shell .opeyebrow{font:11px var(--mono); letter-spacing:.1em; color:rgba(255,255,255,.7)}
#shell .outpage h2{font-size:clamp(17px,1.9vw,26px); line-height:1.2; margin:auto 0 0;
  color:#fff; font-weight:700}
#shell .opbody{margin-top:10px; display:flex; flex-direction:column; gap:3px}
#shell .opbody span{font-size:12px; color:rgba(255,255,255,.82); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
#shell .outnote p{font-size:12.5px; color:var(--ink-soft); line-height:1.5; margin:6px 0 8px}
#shell .linky{background:none; border:0; padding:0; font:inherit; font-size:13px;
  color:var(--brand-mid); text-decoration:underline; cursor:pointer}
#shell .thumb{cursor:pointer}
#shell .thumb.on{box-shadow:0 0 0 2px var(--brand-tone); border-color:transparent}
#shell .outname{width:100%; padding:8px 10px; border:1px solid var(--edge);
  border-radius:7px; font-size:12.5px; color:var(--ink); margin:4px 0 10px}
#shell .orow .outcap{display:inline-flex; padding:2px}
#shell .orow .outcap button{padding:4px 9px; font-size:12px}

/* ---- settings, board 07 ------------------------------------------------- */
#shell .setgrid{flex:1; min-height:0; display:grid;
  grid-template-columns:260px minmax(0,1fr) 300px}
#shell .setside{border-left:1px solid var(--edge); padding:20px 18px; overflow:auto;
  background:var(--paper)}
#shell .setside .scard{margin-bottom:14px}
#shell .setside .tintcard{background:var(--brand-tint); border-color:transparent}
#shell .setdiff{padding:8px 0; border-top:1px solid var(--edge); font-size:13px}
#shell .setdiff b{display:block; color:var(--ink)}
#shell .setdiff span{font:12px var(--mono); color:var(--ink-faint)}
#shell .setdiff s{color:var(--ink-faint)}
#shell .setdiff i{font-style:normal; color:var(--brand-mid)}
#shell .setn{margin-left:auto; font:11px var(--mono); background:var(--edge-soft);
  color:var(--ink-soft); border-radius:999px; padding:2px 8px}
#shell .setn.warn{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .setfoot{flex:0 0 auto; display:flex; align-items:center; gap:14px;
  border-top:1px solid var(--edge); background:var(--sheet); padding:12px 22px}
#shell .setfoot > div{flex:1}
#shell .setfoot b{display:block; font-size:13.5px}
#shell .setfoot .sub{font-size:12.5px; color:var(--ink-faint)}
#shell #setNav .rstep{display:flex; align-items:center; gap:8px}
@media (max-width: 1280px){ #shell .setgrid{grid-template-columns:240px minmax(0,1fr)}
  #shell .setside{display:none} }
#shell .freading{margin-top:10px; font-size:13px; color:var(--brand-mid)}
#shell .fsay{margin-top:10px; font-size:13px; color:var(--ink-soft)}
#shell .drop.over{background:var(--brand-tint); border-color:var(--brand-tone)}

/* ---- present, the ten topics -------------------------------------------- */
#presentOverlay .prestop b{font-weight:700; color:#fff; letter-spacing:.06em}
#presentOverlay .ptopic{color:var(--brand-bright)}
#presentOverlay .pstamp{color:var(--t-assumed); flex:1 1 300px; min-width:0; white-space:normal;
  line-height:1.5}   /* the whole stamp, wrapped: it was cut at 60 characters, mid-word */
#presentOverlay .presbody.haspanel{flex-direction:column; align-items:stretch; gap:2vh}
#presentOverlay .presbody.haspanel .pressay{flex:0 0 auto; overflow:visible;
  justify-content:flex-start}
#presentOverlay .prespanel{flex:1 1 auto; min-height:0; overflow:auto}
#presentOverlay .presnone{background:rgba(255,255,255,.07); border-radius:12px;
  padding:18px 20px; font-size:clamp(14px,1.2vw,18px); line-height:1.55;
  color:rgba(255,255,255,.8); max-width:900px}
#presentOverlay .presstats{display:flex; gap:38px; margin-top:22px}
#presentOverlay .presstats b{display:block; font:700 clamp(24px,2.8vw,40px)/1 var(--mono);
  color:var(--brand-bright)}
#presentOverlay .presstats span{display:block; margin-top:6px; font-size:14px;
  color:rgba(255,255,255,.7)}

#presentOverlay .presmirror{display:flex; flex-direction:column; gap:8px}
#presentOverlay .presmrow{display:grid; grid-template-columns:180px minmax(0,1fr) minmax(0,1fr);
  gap:16px; align-items:baseline; background:rgba(255,255,255,.06); border-radius:10px;
  padding:12px 16px}
#presentOverlay .presmrow .q{font:600 12px var(--mono); letter-spacing:.05em;
  color:rgba(255,255,255,.6); text-transform:uppercase}
#presentOverlay .presmrow .their{font-size:clamp(13px,1.15vw,16px); color:#fff}
#presentOverlay .presmrow .ours{font-size:clamp(13px,1.15vw,16px); color:var(--brand-bright)}
#presentOverlay .presmkey{display:grid; grid-template-columns:180px minmax(0,1fr) minmax(0,1fr);
  gap:16px; padding:2px 16px 6px; font:600 14px var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.75)}
#presentOverlay .presmkey span:first-child{grid-column:2}

#presentOverlay .prespeople{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:12px}
#presentOverlay .presperson{display:flex; gap:14px; align-items:flex-start;
  background:rgba(255,255,255,.07); border-radius:12px; padding:14px 16px}
#presentOverlay .presperson .pinit{flex:0 0 auto; width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center;
  font:700 14px var(--mono)}
#presentOverlay .presperson div{flex:1; min-width:0}
#presentOverlay .presperson b{display:block; font-size:16px}
#presentOverlay .presperson .role{display:block; color:var(--brand-bright); font-size:13px;
  margin-top:2px}
#presentOverlay .presperson .say{display:block; color:rgba(255,255,255,.72); font-size:13px;
  margin-top:5px; line-height:1.45}
#presentOverlay .presperson .pcount{flex:0 0 auto; text-align:right; font:700 15px var(--mono)}
#presentOverlay .presperson .pcount i{display:block; font:400 11px var(--font-ui);
  font-style:normal; color:rgba(255,255,255,.55); margin-top:2px}

#presentOverlay .prescross{display:flex; flex-direction:column; gap:10px}
#presentOverlay .prescrow{display:grid; grid-template-columns:200px 26px minmax(0,1fr) 220px;
  gap:14px; align-items:center; background:rgba(255,255,255,.07); border-radius:12px;
  padding:14px 18px}
#presentOverlay .prescrow .cap{display:block; font:10.5px var(--mono); letter-spacing:.08em;
  text-transform:uppercase; color:rgba(255,255,255,.5); margin-bottom:3px}
#presentOverlay .prescrow .from{color:rgba(255,255,255,.8); font-size:13.5px}
#presentOverlay .prescrow .arrow{color:var(--brand-bright); font-size:20px; text-align:center}
#presentOverlay .prescrow .to b{display:block; font-size:clamp(14px,1.3vw,18px)}
#presentOverlay .prescrow .to span{display:block; color:rgba(255,255,255,.72); font-size:13px;
  margin-top:3px; line-height:1.45}
#presentOverlay .prescrow .via span{display:block; font:11.5px var(--mono);
  color:rgba(255,255,255,.62)}
#presentOverlay .prescrow .via .inc{color:var(--t-assumed)}

#presentOverlay .preskpi{display:flex; flex-direction:column; gap:8px}
#presentOverlay .preskrow{display:grid; grid-template-columns:minmax(0,1fr) 180px 110px 170px;
  gap:14px; align-items:center; background:rgba(255,255,255,.06); border-radius:10px;
  padding:11px 16px; font-size:14px}
#presentOverlay .kbar{display:block; height:8px; border-radius:4px;
  background:rgba(255,255,255,.16); overflow:hidden}
#presentOverlay .kbar i{display:block; height:100%; background:var(--brand-bright)}
#presentOverlay .kv{font:700 15px var(--mono); color:#fff}
#presentOverlay .kt{font:11.5px var(--mono); color:rgba(255,255,255,.6); text-align:right}

#presentOverlay .presacts{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:16px; align-items:start}
#presentOverlay .presagrp .cap{font:11px var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-bright); margin-bottom:8px}
#presentOverlay .presarow{background:rgba(255,255,255,.07); border-radius:10px; padding:12px 14px;
  margin-bottom:8px}
#presentOverlay .presarow b{display:block; font-size:14.5px; line-height:1.35}
#presentOverlay .presarow span{display:block; font:11.5px var(--mono);
  color:rgba(255,255,255,.62); margin-top:5px}
#presentOverlay .presmore{margin-top:8px; font:11.5px var(--mono); letter-spacing:.05em;
  color:rgba(255,255,255,.5)}
#presentOverlay .preslead{font-size:clamp(14px,1.35vw,19px); line-height:1.5; margin:0 0 18px;
  color:rgba(255,255,255,.8); max-width:52em}
#presentOverlay .presbody.figside .preslead{max-width:none}
#presentOverlay .preshead.end{color:var(--brand-bright)}
#presentOverlay .prestable{width:100%; border-collapse:separate; border-spacing:0 6px;
  font-size:13.5px; margin-top:6px}
#presentOverlay .prestable th{text-align:left; font:600 10.5px/1.3 var(--mono); letter-spacing:.09em;
  text-transform:uppercase; color:rgba(255,255,255,.5); padding:0 12px 4px}
#presentOverlay .prestable td{background:rgba(255,255,255,.07); padding:10px 12px;
  color:rgba(255,255,255,.9); vertical-align:top}
#presentOverlay .prestable td.w{font:600 12.5px var(--mono); color:#fff; white-space:nowrap}
#presentOverlay .prestable tr td:first-child{border-radius:8px 0 0 8px}
#presentOverlay .prestable tr td:last-child{border-radius:0 8px 8px 0}
#presentOverlay .presperson .awake{display:block; color:var(--t-assumed); font-size:12.5px;
  margin-top:5px}
#presentOverlay .prescrow .to .step{color:var(--brand-bright); margin-top:4px}
#presentOverlay .preskpi .kgrp{margin-bottom:14px}
#presentOverlay .preskpi .cap{font:11px var(--mono); letter-spacing:.09em; text-transform:uppercase;
  color:var(--brand-bright); margin-bottom:7px}
#presentOverlay .preskrow.on{box-shadow:inset 0 0 0 1.5px var(--brand-bright)}
#presentOverlay .presarow.on{box-shadow:inset 0 0 0 1.5px var(--brand-bright)}
#presentOverlay .presstats.words{gap:44px; align-items:start}
#presentOverlay .presstats.words div{flex:1 1 0; min-width:0}
#presentOverlay .presstats.words b{font:600 11px/1 var(--mono); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55)}
#presentOverlay .presstats.words span{margin-top:9px; font-size:clamp(14px,1.3vw,18px);
  line-height:1.45; color:#fff}
/* the ranked list beside the map, board 06 slide 3 */
#presentOverlay .presbody.figbig.figside .pressay{flex:1 1 46%}
#presentOverlay .presbody.figbig.figside .presfig{flex:0 1 52%}
#presentOverlay .presrank{display:flex; flex-direction:column; gap:7px; margin-top:16px}
#presentOverlay .presrrow{display:flex; gap:12px; align-items:baseline;
  background:rgba(255,255,255,.06); border-radius:9px; padding:9px 13px}
#presentOverlay .presrrow .rn{flex:0 0 auto; width:22px; height:22px; border-radius:11px;
  background:rgba(255,255,255,.16); font:700 11px/22px var(--mono); text-align:center}
#presentOverlay .presrrow div{flex:1; min-width:0}
#presentOverlay .presrrow b{font-size:14px}
#presentOverlay .presrrow .rbox{font:10.5px var(--mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--brand-bright); margin-left:9px}
#presentOverlay .presrrow .rwhy{display:block; font-size:12.5px; line-height:1.4; margin-top:3px;
  color:rgba(255,255,255,.72)}
/* `.step` belongs to the old screen's step list. This one is its own. */
#presentOverlay .prescrow .to .cstep{display:block; color:var(--brand-bright); margin-top:4px;
  background:none; border:0; padding:0}
#presentOverlay .presbody.haspanel .prespanel{display:flex; flex-direction:column;
  justify-content:flex-start;
  justify-content:safe center}
#presentOverlay .presperson .pquote2{display:block; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,.12); font-size:13.5px; line-height:1.5;
  color:#fff; font-style:italic}
#presentOverlay .presperson .pquote2 i{display:block; font:10.5px var(--mono); font-style:normal;
  letter-spacing:.07em; text-transform:uppercase; color:var(--brand-bright); margin-top:5px}

/* ---- the measures, board 17 --------------------------------------------- */
#shell .mcards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:12px}
#shell .mcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:14px 16px}
#shell .mhead{margin-bottom:10px}
#shell .mhead b{display:block; font-size:14.5px; color:var(--brand-deep)}
#shell .mhead .sub{display:block; font-size:12px; color:var(--ink-faint); margin-top:2px}
#shell .mrow{padding:9px 0; border-top:1px solid var(--edge)}
#shell .mrow:first-of-type{border-top:0}
#shell .mlab{display:flex; align-items:baseline; gap:8px; font-size:13.5px; color:var(--ink)}
#shell .mpill{margin-left:auto; font:10.5px var(--mono); letter-spacing:.05em; border-radius:999px;
  padding:2px 8px; background:var(--edge-soft); color:var(--ink-faint); white-space:nowrap}
#shell .mpill.ok{background:#e4f4ec; color:var(--ok)}
#shell .mpill.warn{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .mbar{display:block; height:7px; border-radius:4px; background:var(--edge-soft);
  overflow:hidden; margin:7px 0 5px}
#shell .mbar i{display:block; height:100%; background:var(--brand-deep)}
#shell .mbar.warn i{background:var(--caution)}
#shell .mnum{display:flex; align-items:baseline; gap:10px; font:12px var(--mono)}
#shell .mnum b{color:var(--ink)}
#shell .mnum span{color:var(--ink-faint)}
#shell .mpairs{margin-top:12px; background:var(--edge-soft); border-radius:var(--r-sm);
  padding:11px 14px; font-size:13px; color:var(--ink-soft); line-height:1.5}
#shell .mpairs b{color:var(--ink)}
#shell .mtargets{margin-top:10px; background:var(--sheet); border:1px solid var(--edge);
  border-radius:var(--r-sm); padding:12px 14px}
#shell .mtrow{display:flex; align-items:center; gap:12px; padding:5px 0; font-size:13px}
#shell .mtrow span{flex:1}
#shell .mtrow input{width:120px; padding:6px 9px; border:1px solid var(--edge); border-radius:6px;
  font:12px var(--mono)}

/* ---- settings: model and research, board 07 ----------------------------- */
#shell .mdwrap{max-width:780px}
#shell .mdcard{background:var(--sheet); border:1px solid var(--edge); border-radius:var(--r);
  padding:18px 20px; margin-bottom:16px}
#shell .mdhead{display:flex; align-items:center; gap:12px; margin-bottom:4px}
#shell .mdhead b{flex:1; font-size:16px; color:var(--brand-deep)}
#shell .mdcard > .sub{font-size:12.5px; color:var(--ink-faint); margin:0 0 14px}
#shell .mdrow{display:flex; gap:18px; align-items:flex-start; padding:11px 0;
  border-top:1px solid var(--edge)}
#shell .mdrow:first-of-type{border-top:0}
#shell .mdrow > label{flex:0 0 130px; padding-top:7px; font-size:13.5px; color:var(--ink-soft)}
#shell .mdfield{flex:1; min-width:0}
#shell .mdfield input, #shell .mdfield select{width:100%; max-width:360px; padding:8px 10px;
  border:1px solid var(--edge); border-radius:7px; font:inherit; font-size:13.5px; color:var(--ink)}
#shell .mdfield input.hide{display:none}
#shell .mdfield .sub{display:block; font-size:12px; color:var(--ink-faint); line-height:1.5;
  margin-top:6px}
#shell .mdcheck{display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px;
  color:var(--ink-soft)}
#shell .mdcheck input{width:auto}
#shell .mdping{font:12px var(--mono); color:var(--ink-faint)}
#shell .mdping.ok{color:var(--ok)}
#shell .mdping.bad{color:var(--stop)}
#shell .mddisc{background:none; border:0; padding:10px 0 0; font:inherit; font-size:13px;
  color:var(--brand-mid); cursor:pointer}
#shell .mdadv{border-top:1px solid var(--edge); margin-top:6px}
#shell .mdtog{display:flex; align-items:center; gap:14px; padding:12px 0;
  border-top:1px solid var(--edge); cursor:pointer}
#shell .mdcard .mdtog:first-of-type{border-top:0}
#shell .mdtog > span{flex:1}
#shell .mdtog b{display:block; font-size:14px; color:var(--ink)}
#shell .mdtog .sub{display:block; font-size:12.5px; color:var(--ink-faint); line-height:1.5;
  margin-top:3px}
#shell .mdtog input{position:absolute; opacity:0; width:0; height:0}
#shell .mdsw{flex:0 0 auto; width:42px; height:24px; border-radius:12px; background:var(--edge);
  position:relative; transition:background .15s ease}
#shell .mdsw::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform .15s ease; box-shadow:var(--lift)}
#shell .mdtog input:checked ~ .mdsw{background:var(--brand-deep)}
#shell .mdtog input:checked ~ .mdsw::after{transform:translateX(18px)}
#shell .mdfoot{margin:14px 0 0; font-size:12.5px; color:var(--ink-faint); line-height:1.5}

/* ---- outputs: is this enough, board 08 ---------------------------------- */
#shell .outready{display:flex; flex-direction:column; gap:9px}
#shell .orrow{display:flex; gap:10px; align-items:flex-start; font-size:13px; line-height:1.5}
#shell .ormark{flex:0 0 auto; width:18px; height:18px; border-radius:50%; text-align:center;
  font:700 11px/18px var(--mono)}
#shell .ormark.ok{background:#e4f4ec; color:var(--ok)}
#shell .ormark\!{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .orrow .ormark[class~="!"]{background:var(--t-assumed); color:var(--t-assumed-ink)}
#shell .orrow .ormark[class~="?"]{background:var(--edge-soft); color:var(--ink-soft)}
#shell .thumb.ghost{border-style:dashed; background:none; opacity:.75; cursor:default}
#shell .thumb.ghost .tn{background:none; border:1px dashed var(--edge); color:var(--ink-faint)}
#shell .thumb.ghost .sub{display:block; font-size:11.5px; color:var(--caution); margin-top:5px}
#presentOverlay .preshead .hsent{display:block}
#presentOverlay .preskey{display:flex; flex-wrap:wrap; gap:16px; margin-top:10px;
  font-size:13px; color:rgba(255,255,255,.75)}
#presentOverlay .preskey span{display:inline-flex; align-items:center; gap:7px}
#presentOverlay .preskey i{width:10px; height:10px; border-radius:2px; display:inline-block}
/* the swatches are the bar's own colours, which on navy are the light ones.
   The tier tokens are for paper, and "known" is the navy itself. */
#presentOverlay .preskey i.known{background:#fff}
#presentOverlay .preskey i.inferred{background:var(--brand-bright)}
#presentOverlay .preskey i.assumed{background:#f3b277}
#presentOverlay .preskey i.open{background:repeating-linear-gradient(45deg,
  rgba(255,255,255,.55) 0 3px, rgba(255,255,255,.2) 3px 6px)}

/* ---- onboarding: board 72, first open ------------------------------------ */
#shell .obwrap{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); min-height:100vh}
#shell .obhero{background:linear-gradient(160deg, var(--g-from), var(--g-mid) 55%, var(--g-to));
  color:var(--on-deep); padding:40px 44px 32px; display:flex; flex-direction:column}
#shell .obfirm{display:flex; gap:14px; align-items:center; font-size:15px}
#shell .oblogo{display:flex; align-items:center; gap:10px}
#shell .oblogo .mkcairn{height:40px}
#shell .oblogo .mkname{font-size:40px; letter-spacing:-.02em}
#shell .obrule{width:1px; height:36px; background:color-mix(in srgb, var(--on-deep) 45%, transparent); margin:0 6px}
#shell .obfor{color:color-mix(in srgb, var(--on-deep) 90%, transparent)}
#shell .obchip{display:inline-flex; align-items:center; background:rgba(255,255,255,.88); color:var(--brand-deep);
  border-radius:8px; padding:6px 12px; font-weight:700; letter-spacing:.04em}
#shell .obchip img{height:22px; width:auto; display:block}
#shell .obcairn{width:56px; height:auto; margin-bottom:6px}
#shell .obmid{margin:auto 0; max-width:560px}
#shell .obhero h1{font-size:44px; line-height:1.08; letter-spacing:-.02em; margin:0 0 18px; color:var(--on-deep)}
#shell .obhero p{font-size:17px; line-height:1.55; margin:0 0 22px; color:var(--on-deep)}
#shell .obmarks{background:color-mix(in srgb, var(--on-deep) 14%, transparent); border-radius:12px;
  padding:14px 18px; display:flex; flex-direction:column; gap:10px; font-size:15px}
#shell .obmarks .sub{color:color-mix(in srgb, var(--on-deep) 85%, transparent); font-size:13px}
#shell .obm{font-style:normal; font-size:12px; font-weight:700; border-radius:999px; padding:3px 10px;
  margin-right:10px; display:inline-block}
#shell .obm.known{background:#e6f4ee; color:var(--ok)}
#shell .obm.open{background:#fdf1e2; color:#8a4b10}
#shell .obonce{font-size:13px; margin:24px 0 0 !important; color:color-mix(in srgb, var(--on-deep) 85%, transparent) !important}
#shell .obside{padding:14vh 48px 40px; background:var(--paper, #f3f5f9); display:flex; flex-direction:column; gap:16px}
#shell .obside h2{font-size:30px; margin:0 0 6px; color:var(--brand-deep)}
#shell .obcard{display:flex; gap:18px; align-items:center; justify-content:space-between;
  background:var(--sheet); border:1px solid var(--edge); border-radius:14px; padding:20px 22px}
#shell .obcard.rec{border:2px solid var(--brand-deep)}
#shell .obcard b{font-size:18px; color:var(--brand-deep)}
#shell .obcard p{margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--ink-soft)}
#shell .obcard button{flex:none}
/* a returning user's accounts, on the front door */
#shell #obMine:empty{display:none}
#shell #obMine{display:flex; flex-direction:column; gap:10px; margin-bottom:10px}
#shell .obmine{align-items:flex-end; background:var(--brand-tint)}
#shell .obmine .grow{flex:1; min-width:0; display:flex; flex-direction:column; gap:4px}
#shell .obacct{display:flex; justify-content:space-between; gap:14px; width:100%; text-align:left;
  background:var(--sheet); border:1px solid var(--edge); border-radius:10px; padding:10px 14px;
  font:inherit; font-size:15px; font-weight:600; color:var(--brand-deep); cursor:pointer}
#shell .obacct:hover{border-color:var(--brand-deep)}
#shell .obacct .sub{font-weight:400; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
#shell .obneeds{display:flex; flex-wrap:wrap; gap:8px; margin-top:8px}
#shell .obneed{font-size:12.5px; font-weight:600; border-radius:999px; padding:4px 11px;
  background:var(--edge-soft); color:var(--ink-soft)}
#shell .obneed.warn{background:#fdf1e2; color:#8a4b10}
#shell .obneed.done{background:#e6f4ee; color:var(--ok)}
#shell .oblinks{display:flex; gap:22px; flex-wrap:wrap}
#shell .oblink, .oblink{background:none; border:0; padding:0; font:inherit; font-size:14px; cursor:pointer;
  color:var(--brand-accent-text); text-decoration:underline; text-underline-offset:3px}
.learnpop .oblink.onDeep{color:color-mix(in srgb, var(--on-deep) 85%, transparent)}
#shell .obwhere{background:var(--brand-tint); border-radius:12px; padding:14px 18px; font-size:14px; line-height:1.55}
@media (max-width: 1000px){ #shell .obwrap{grid-template-columns:minmax(0,1fr)} #shell .obside{padding:32px 20px} }

/* ---- onboarding: board 73, the setup check ------------------------------- */
#shell .obsetup{display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:24px;
  max-width:1360px; margin:0 auto; padding:40px 32px 60px; align-items:start}
#shell .obsetcard, #shell .obsetside{background:var(--sheet); border:1px solid var(--edge); border-radius:14px; padding:26px 28px}
#shell .obsetcard h2{font-size:26px; margin:6px 0 4px; color:var(--brand-deep)}
#shell .obrow{display:grid; grid-template-columns:34px minmax(0,1fr) auto; gap:14px; align-items:start;
  padding:18px 0; border-top:1px solid var(--edge-soft)}
#shell .obrow:first-of-type{margin-top:12px}
#shell .obrowmain b{font-size:16px; color:var(--brand-deep)}
#shell .obrowmain p{margin:4px 0 0; font-size:13.5px; line-height:1.55; color:var(--ink-soft); max-width:62ch}
#shell .obst{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  font-weight:700; background:var(--edge-soft); color:var(--ink-soft)}
#shell .obst.ok{background:#e6f4ee; color:var(--ok)}
#shell .obst.warn{background:#fdf1e2; color:#8a4b10}
#shell .obkey{display:flex; flex-direction:column; gap:8px; align-items:stretch; min-width:300px}
#shell .obkey input[type=password]{padding:10px 12px; border:1px solid var(--edge); border-radius:8px; font:inherit}
#shell .obkeep{font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:center}
#shell .obkeep input{width:auto; margin:0}
#shell .obside2{font-size:13px; font-weight:700; color:var(--ok)}
#shell .obacts{display:flex; gap:10px; margin:18px 0 10px; flex-wrap:wrap}
#shell .obmsg{border-radius:10px; padding:13px 15px; font-size:14px; line-height:1.55; margin-bottom:12px}
#shell .obmsg.ok{background:#e6f4ee}
#shell .obmsg.bad{background:#fdeceb}
#shell .obmsg.info{background:var(--edge-soft)}
#shell .obmsg details{margin-top:6px; font-size:12px; color:var(--ink-soft)}
@media (max-width: 1100px){ #shell .obsetup{grid-template-columns:minmax(0,1fr)} #shell .obrow{grid-template-columns:34px minmax(0,1fr)} }

/* ---- onboarding: board 74, four stops on the example ---------------------- */
.learnpop{background:var(--brand-deep); color:var(--on-deep); border:0}
.learnpop b{color:var(--on-deep); font-size:18px}
.learnpop p{color:color-mix(in srgb, var(--on-deep) 88%, transparent)}
.learnhead{display:flex; justify-content:space-between; align-items:center; margin-bottom:6px}
.learnpop .tnum{color:color-mix(in srgb, var(--on-deep) 75%, transparent)}
.learndots{display:flex; gap:5px}
.learndots i{width:7px; height:7px; border-radius:4px; background:color-mix(in srgb, var(--on-deep) 35%, transparent)}
.learndots i.on{width:26px; background:var(--brand-bright)}
.learnwait{font-size:13px; color:color-mix(in srgb, var(--on-deep) 80%, transparent)}
#shell .obside2.warn{color:#8a4b10}
.learnpop .primary{background:var(--brand-bright); color:var(--on-bright); border:0}
.learnpop .ghost{background:transparent; color:var(--on-deep); border:1px solid color-mix(in srgb, var(--on-deep) 45%, transparent)}

/* ---- onboarding: board 75, the first real customer ------------------------ */
#shell .fcwrap{max-width:720px; margin:0 auto; padding:34px 24px 60px}
#shell .fchead{display:flex; justify-content:space-between; align-items:center; font-size:14px;
  color:var(--ink-soft); margin-bottom:14px}
#shell .fccard{background:var(--sheet); border:1px solid var(--edge); border-radius:14px; padding:26px 28px}
#shell .fcsteps{display:flex; gap:22px; margin:10px 0 20px}
#shell .fcstep{display:flex; gap:8px; align-items:center; font-size:15px; color:var(--ink-faint)}
#shell .fcstep i{width:24px; height:24px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  font-size:12px; font-weight:700; background:var(--edge-soft); color:var(--ink-soft)}
#shell .fcstep.on, #shell .fcstep.done{color:var(--brand-deep); font-weight:600}
#shell .fcstep.on i, #shell .fcstep.done i{background:var(--brand-deep); color:var(--on-deep)}
#shell .fclabel{display:block; font-size:13px; color:var(--ink-soft)}
#shell .fcfind{display:flex; gap:10px; margin-top:6px}
#shell .fcfind input{flex:1; padding:12px 14px; border:1px solid var(--edge); border-radius:9px; font:inherit; font-size:15px}
#shell .fcsay{font-size:14px; margin:16px 0 8px}
#shell .fcopt{display:flex; gap:12px; align-items:center; width:100%; text-align:left; background:var(--sheet);
  border:1px solid var(--edge); border-radius:10px; padding:12px 14px; margin-bottom:8px; cursor:pointer; font:inherit}
#shell .fcopt i{width:16px; height:16px; border-radius:50%; border:2px solid var(--edge); flex:none}
#shell .fcopt.on{border:2px solid var(--brand-deep)}
#shell .fcopt.on i{border-color:var(--brand-deep); background:radial-gradient(var(--brand-deep) 45%, transparent 50%)}
#shell .fcopt b{display:block; font-size:15px}
#shell .fcnext{width:100%; margin-top:18px; padding:13px; font-size:15px}
#shell .fcnext:disabled{opacity:.45; cursor:not-allowed}
#shell .fcdrop{border:2px dashed color-mix(in srgb, var(--brand-tone) 55%, transparent); border-radius:12px;
  padding:22px 24px; background:color-mix(in srgb, var(--brand-tint) 45%, transparent); cursor:pointer; margin-bottom:14px}
#shell .fcdrop b{display:block; font-size:16px; margin-bottom:4px}
#shell .fcerr{color:#8a4b10}
#shell .fcready > div{display:grid; grid-template-columns:150px minmax(0,1fr); gap:16px; padding:14px 0;
  border-bottom:1px solid var(--edge-soft); font-size:14.5px}
#shell .fcready span{color:var(--ink-soft)}

/* ---- onboarding: board 76, the first result -------------------------------- */
#shell .frtiles{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin:16px 0}
#shell .frtiles > div{border:1px solid var(--edge); border-radius:12px; padding:14px 16px}
#shell .frtiles span{display:block; font-size:13px; color:var(--ink-soft)}
#shell .frtiles b{font-size:30px; color:var(--brand-deep)}
#shell .frq{border:1px solid var(--edge); border-radius:10px; padding:12px 14px; margin-top:8px; font-size:14.5px}
#shell .frstep{display:flex; gap:14px; border:1px solid var(--edge); border-radius:12px; padding:14px 16px; margin-bottom:10px}
#shell .frstep > i{width:28px; height:28px; border-radius:50%; background:var(--brand-deep); color:var(--on-deep);
  display:grid; place-items:center; font-style:normal; font-weight:700; flex:none}
#shell .frstep b{display:block; font-size:15px; color:var(--brand-deep)}
#shell .frstep span{font-size:13.5px; color:var(--ink-soft)}

/* ---- onboarding: board 77 ----------------------------------------------------- */
#shell .gsCard, #shell .wbCard{margin-bottom:14px}
#shell .gshead{display:flex; justify-content:space-between; align-items:center; margin-bottom:10px}
#shell .gsbar{height:6px; border-radius:3px; background:var(--edge-soft); margin-bottom:12px; overflow:hidden}
#shell .gsbar i{display:block; height:100%; background:var(--brand-deep)}
#shell .gsitem{display:flex; gap:10px; align-items:center; font-size:14px; padding:4px 0}
#shell .gsitem i{width:20px; height:20px; border-radius:50%; border:2px solid var(--edge); display:grid;
  place-items:center; font-style:normal; font-size:11px; color:#fff; flex:none}
#shell .gsitem.done{color:var(--ink-faint); text-decoration:line-through}
#shell .gsitem.done i{background:var(--ok); border-color:var(--ok)}
#shell .acwrap{display:flex; flex-direction:column; gap:6px}
#shell .exstamp{background:#fdf1e2 !important; color:#8a4b10 !important}
#shell .exremove{align-self:flex-start; font-size:13px}
#shell .failbar{background:#fdeceb; border-radius:10px; padding:14px 16px; margin:10px 0; font-size:14px; line-height:1.55}
#shell .failbar .acts{margin-top:10px; display:flex; gap:8px}
#shell .failbar details{margin-top:8px; font-size:12px; color:var(--ink-soft)}

/* the next bar never covers the last lines of the plan (P2 12) */
#shell #planDoc{padding-bottom:120px}
/* a compact bar on a smaller screen: at 1280 it took a sixth of the view
   (review G, 27 September) */
@media (max-width: 1366px){
  #shell .nextbar{padding:6px 26px 14px}
  #shell .nextin{padding:9px 14px; gap:12px}
  #shell .nextin b{font-size:14.5px}
}
#shell .nextbar .sub{display:block; font-size:12.5px; color:color-mix(in srgb, var(--on-deep) 75%, transparent); margin-top:2px}
#shell .runbtn.ghostrun{background:transparent; color:var(--on-deep); border:1px solid color-mix(in srgb, var(--on-deep) 45%, transparent);
  margin-right:8px}

/* Settings search: when nothing matches, it says so under the box */
.setfindnone{padding:8px 2px 0; font-size:12.5px}

/* The headers on a coloured band keep white text in the shell. The shell's own
   heading colour turned "What the checks caught" dark red on red and "What to
   do next" dark green on green (27 September). */
#shell .nbacard > h3, #shell .rdcard > h3, #shell .nbacard > h3 .n, #shell .rdcard > h3 .n{color:#fff}
/* A confidence chip sits apart from the words it follows. */
#shell .stripacts .conf, #shell .nba .what .conf{margin-left:8px; display:inline-block}
/* The setup check's side panel holds messages only: with none it is not an
   empty box. */
#shell .obsetside:empty{display:none}
/* The tour card's actions keep their words whole and wrap as a row. */
.learnpop .tacts{flex-wrap:wrap; row-gap:8px}
.learnpop .tacts > *{white-space:nowrap}
/* The rail's tabs on one line each. */
#shell .evtabs button{white-space:nowrap}

/* the questions a later step answered, folded under the open ones */
#shell .evdone{margin-top:16px; border-top:1px solid var(--edge-soft); padding-top:10px}
#shell .evdone summary{cursor:pointer; font-weight:600; color:var(--ink-soft); font-size:14px}
#shell .evqa{padding:9px 0; border-top:1px solid var(--edge-soft); font-size:13.5px; line-height:1.5; color:var(--ink-soft)}
#shell .evqa .sub{display:block; font-size:11.5px; color:var(--ink-faint); margin-top:3px}

/* the map's legend: a service we deliver at the account today (28 September) */
#shell .mapleg .lgtoday{display:inline-block; width:12px; height:12px; border-radius:50%;
  border:2px solid var(--ink); margin-right:6px; vertical-align:-1px}

/* Signing in, hosted only (stream B2). Over everything, the tool behind it. */
#signinGate{position:fixed; inset:0; z-index:400; display:flex; align-items:center; justify-content:center;
  padding:16px; background:linear-gradient(160deg, var(--g-from), var(--g-mid) 55%, var(--g-to));
  font:15px/1.5 var(--font-ui); color:var(--ink)}
#signinGate .sgcard{background:var(--sheet); border-radius:var(--r); box-shadow:var(--lift-up);
  width:min(460px, 100%); padding:32px 32px 28px}
#signinGate .sglogo{height:34px; display:block; margin:0 0 22px}
#signinGate h1{font:600 26px/1.2 var(--font-display); margin:0 0 10px; color:var(--brand-deep)}
#signinGate p{margin:0 0 18px; color:var(--ink-soft)}
#signinGate .sgrow{display:flex; gap:8px; flex-wrap:wrap}
#signinGate input{flex:1 1 220px; font:inherit; padding:10px 12px; border:1px solid var(--edge);
  border-radius:var(--r-sm)}
#signinGate .sgacts{display:flex; gap:8px; flex-wrap:wrap}
#signinGate button{font:inherit; padding:10px 16px; border-radius:var(--r-sm); cursor:pointer;
  border:1px solid var(--edge); background:var(--sheet); color:var(--ink)}
#signinGate button.primary{background:var(--brand-deep); border-color:var(--brand-deep); color:#fff}
#signinGate button:disabled{opacity:.6; cursor:default}
#signinGate .sgerr{color:var(--stop); margin:14px 0 0}

/* The firm's people and its log, in Settings, hosted only (stream C1b) */
.pphead{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; margin-bottom:14px}
.pphead h2{margin:0 0 4px}
.pphead button.primary, .ppinvite button.primary{background:var(--brand-deep); color:#fff; border:0;
  border-radius:8px; padding:10px 16px; font:inherit; font-weight:600; cursor:pointer}
.ppinvite{border:1px solid var(--edge, #e2e7ec); border-radius:12px; padding:16px; margin:0 0 16px; background:#fff}
.ppinvite .pprow{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px}
.ppinvite input{flex:1 1 240px; padding:9px 11px; border:1px solid var(--edge, #e2e7ec); border-radius:8px; font:inherit}
.ppinvite select, .pptable select{padding:7px 9px; border:1px solid var(--edge, #e2e7ec); border-radius:8px; font:inherit; background:#fff}
table.cfg.pptable{width:100%}
.pptable td{vertical-align:middle}
.ppwho{display:flex; align-items:center; gap:10px}
.ppwho b{overflow-wrap:anywhere}
.ppav{display:inline-flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:50%;
  background:var(--edge-soft, #eef2f6); font-size:12px; font-weight:700; flex:0 0 auto}
.ppav.dashed{background:none; border:1.5px dashed var(--ink-faint, #78859a)}
.pprole{display:inline-block; padding:3px 10px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--edge-soft, #eef2f6)}
.pprole.owner{background:var(--brand-deep); color:#fff}
.ppst.active{color:var(--ok, #0d7a52); font-weight:600}
.ppst.invited{color:var(--brand-deep); font-weight:600}
.ppst.removed{color:var(--stop, #a4262c); font-weight:600}
tr.ppgone td{opacity:.6}
.pperr{color:var(--stop, #a4262c)}
.pproles{display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; margin-top:18px}
.pproles > div{display:flex; flex-direction:column; gap:2px}
.regwrap{margin-top:26px}
.regwrap .homehead h2{margin:0 0 4px}