/* Ported from matchstick-demo-v2.html (interface v2), with additions at the
   end for the server-rendered links, forms and menu used by the ASP.NET version. */
/* =====================================================================
   Matchstick — interface v2
   One accent (teal). Navy and plum survive only as the side rail and the
   avatar, so you always know which side of the wall you are on without
   the weight of a filled bar. Two radii, an 8pt rhythm, six type sizes,
   no all-caps micro-labels, no table chrome.
   ===================================================================== */
:root{
  --bg:#f2f2f7; --surface:#ffffff; --surface-2:#f5f5f7; --surface-3:#ebebf0;
  --separator:rgba(60,60,67,.16); --separator-2:rgba(60,60,67,.28);
  --label:#1c1c1e; --label-2:rgba(60,60,67,.62); --label-3:rgba(60,60,67,.34);

  --accent:#1b6e6e; --accent-soft:rgba(27,110,110,.10); --accent-line:rgba(27,110,110,.3);
  --green:#1a7f4b;  --green-soft:rgba(26,127,75,.12);
  --amber:#a3690a;  --amber-soft:rgba(163,105,10,.13);
  --red:#c0392f;    --red-soft:rgba(192,57,47,.12);
  --navy:#15304b;   --plum:#5a3e8f;

  --r-card:14px; --r-control:9px; --r-inner:11px;
  --s1:8px; --s2:16px; --s3:24px; --s4:32px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",system-ui,
         Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  --shadow-panel:-1px 0 0 var(--separator),-24px 0 60px rgba(0,0,0,.14);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
    --separator:rgba(84,84,88,.55); --separator-2:rgba(84,84,88,.85);
    --label:#fff; --label-2:rgba(235,235,245,.62); --label-3:rgba(235,235,245,.32);
    --accent:#3fb0a8; --accent-soft:rgba(63,176,168,.16); --accent-line:rgba(63,176,168,.4);
    --green:#32d574; --green-soft:rgba(50,213,116,.16);
    --amber:#ffb340; --amber-soft:rgba(255,179,64,.16);
    --red:#ff6961;   --red-soft:rgba(255,105,97,.16);
    --plum:#a98fe0;
    --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.5);
    --shadow-panel:-1px 0 0 var(--separator),-24px 0 60px rgba(0,0,0,.6);
  }
}
:root[data-theme="dark"]{
  --bg:#000; --surface:#1c1c1e; --surface-2:#2c2c2e; --surface-3:#3a3a3c;
  --separator:rgba(84,84,88,.55); --separator-2:rgba(84,84,88,.85);
  --label:#fff; --label-2:rgba(235,235,245,.62); --label-3:rgba(235,235,245,.32);
  --accent:#3fb0a8; --accent-soft:rgba(63,176,168,.16); --accent-line:rgba(63,176,168,.4);
  --green:#32d574; --green-soft:rgba(50,213,116,.16);
  --amber:#ffb340; --amber-soft:rgba(255,179,64,.16);
  --red:#ff6961;   --red-soft:rgba(255,105,97,.16);
  --plum:#a98fe0;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--bg);color:var(--label);
  font:15px/1.47 var(--font);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
.mono{font-family:var(--mono);font-size:12.5px}

/* ---------- header ------------------------------------------------- */
.rail{height:3px;background:var(--navy)}
body.expert .rail{background:var(--plum)}
.bar{display:block;padding:0}
.bar[hidden]{display:none}
.hdr{max-width:1040px;margin:0 auto;padding:26px 24px 0;
  display:flex;align-items:flex-start;gap:16px}
.hdr .eyebrow{font-size:12px;font-weight:600;color:var(--label-2);margin-bottom:3px}
.hdr h1{font-size:28px;font-weight:700;letter-spacing:-.4px;line-height:1.12;margin:0}
.hdr .sub{font-size:14px;color:var(--label-2);margin-top:4px}
.hdr .spacer{margin-left:auto}
.hdr-actions{display:flex;align-items:center;gap:4px;padding-top:6px;flex-wrap:wrap;
  justify-content:flex-end}
.avatar-sm{width:30px;height:30px;border-radius:50%;background:var(--navy);color:#fff;
  display:grid;place-items:center;font-size:12px;font-weight:600;margin-left:8px;flex:none}
body.expert .avatar-sm{background:var(--plum)}

/* ---------- buttons: one filled per screen -------------------------- */
button{font:inherit}
.btn{font-size:14px;font-weight:500;border:0;background:none;color:var(--accent);
  cursor:pointer;padding:7px 10px;border-radius:var(--r-control)}
.btn:hover{background:var(--accent-soft)}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.fill{background:var(--accent);color:#fff;padding:8px 15px;font-weight:600;
  margin-left:6px}
.btn.fill:hover{filter:brightness(1.08)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:none;filter:none}
.btn.quiet{color:var(--label-2)}
.btn.warn{color:var(--red)}

/* legacy in-card action buttons, restyled */
button.act{background:var(--accent);color:#fff;border:0;border-radius:10px;
  padding:10px 17px;font-weight:600;font-size:15px;cursor:pointer}
button.act:hover{filter:brightness(1.08)}
button.act.danger{background:var(--red)}
button.act.ghost{background:none;color:var(--accent);font-weight:500}
button.act.ghost:hover{background:var(--accent-soft);filter:none}
button.act:disabled{opacity:.4;cursor:not-allowed;filter:none}
button.act:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:18px}

.hdr-actions{position:relative}
.menu{position:absolute;top:100%;right:0;margin-top:6px;background:var(--surface);
  border-radius:var(--r-inner);box-shadow:0 2px 6px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.16);
  padding:5px;min-width:208px;z-index:30;text-align:left}
.menu button{display:block;width:100%;text-align:left;border:0;background:none;
  font:inherit;font-size:14px;color:var(--label);padding:9px 12px;border-radius:7px;
  cursor:pointer}
.menu button:hover{background:var(--surface-2)}

/* ---------- layout -------------------------------------------------- */
.wrap{max-width:1040px;margin:0 auto;padding:18px 24px 80px}
.card{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);
  margin-bottom:22px;overflow:hidden;padding:20px 22px}
.card.flush{padding:0}
h2{font-size:17px;font-weight:650;letter-spacing:-.2px;margin:0 0 3px;color:var(--label)}
h3{font-size:13px;font-weight:600;color:var(--label-2);margin:22px 0 6px;
  text-transform:none;letter-spacing:0}
p{margin:0 0 12px}
.lede{color:var(--label-2);font-size:14px}
.reqd{color:var(--red);font-size:13.5px;font-weight:600;margin:8px 0 0}
.empty{color:var(--label-2);font-size:14px;padding:18px 2px}
.crumb{font-size:13.5px;color:var(--label-2);margin:0 0 16px}
.crumb button{background:none;border:0;padding:0 2px 0 0;font:inherit;font-size:13.5px;
  color:var(--accent);cursor:pointer}
.crumb button:hover{text-decoration:underline}

/* ---------- the hero statistic -------------------------------------- */
.hero{display:flex;align-items:baseline;gap:14px;margin:18px 0 4px}
.hero .n{font-size:46px;font-weight:700;letter-spacing:-1.4px;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--amber)}
.hero .n.ok{color:var(--accent)}
.hero .t{font-size:15px;color:var(--label-2);max-width:650px}
.hero .t b{color:var(--label);font-weight:600}
.meter{display:flex;height:9px;border-radius:5px;overflow:hidden;margin:18px 0 12px;
  background:var(--surface-2)}
.meter i{display:block;transition:width .4s ease}
.key{display:flex;flex-wrap:wrap;gap:7px 22px;font-size:13.5px;color:var(--label-2)}
.key span{display:flex;align-items:center;gap:7px}
.key b{color:var(--label);font-weight:600;font-variant-numeric:tabular-nums}
.key .dot{width:8px;height:8px;border-radius:50%;flex:none}

/* ---------- segmented control + sort -------------------------------- */
.toolbar{display:flex;align-items:center;gap:14px;padding:2px 2px 14px;flex-wrap:wrap}
.toolbar .spacer{margin-left:auto}
.seg{display:inline-flex;background:var(--surface-2);border-radius:var(--r-control);
  padding:2px}
.seg button{font-size:13.5px;font-weight:500;border:0;background:none;color:var(--label-2);
  padding:6px 14px;border-radius:7px;cursor:pointer;white-space:nowrap}
.seg button:hover{color:var(--label)}
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--label);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.09)}
.sortwrap{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--label-2)}
.sortwrap select{font:inherit;font-size:13.5px;font-weight:500;color:var(--accent);
  background:none;border:0;padding:5px 4px;border-radius:7px;cursor:pointer}
.sortwrap select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- the list ------------------------------------------------ */
.row{display:flex;align-items:center;gap:14px;padding:13px 22px;cursor:pointer;
  border-top:1px solid var(--separator);background:none;border-left:0;border-right:0;
  border-bottom:0;width:100%;text-align:left;font:inherit;color:var(--label)}
.row:first-child{border-top:0}
.row:hover{background:var(--surface-2)}
.row[aria-selected="true"]{background:var(--accent-soft)}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.row .ref{font-size:15px;font-weight:600;letter-spacing:-.1px;min-width:80px;flex:none;
  font-variant-numeric:tabular-nums}
.row .mid{min-width:0;flex:1}
.row .l1{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .l2{font-size:13.5px;color:var(--label-2);margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.row .chev{color:var(--label-3);font-size:17px;flex:none;margin-left:2px}

/* ---------- status, as three colours plus grey ---------------------- */
.pill{display:inline-block;font-size:12.5px;font-weight:600;padding:3px 10px;
  border-radius:20px;white-space:nowrap;letter-spacing:0;text-transform:none}
.s-MISSING,.s-RETURNED,.s-CONFLICT,.s-SIGNATURE_STALE,.s-ITEM_FELL_BACK,
.s-RULE_UNSIGNED{background:var(--red-soft);color:var(--red)}
.s-INSUFFICIENT{background:var(--amber-soft);color:var(--amber)}
.s-SUBMISSION_READY,.s-RELEASED,.s-SIGNED{background:var(--green-soft);color:var(--green)}
.s-READY_TO_SUBMIT,.s-PENDING_EXPERT,.s-INFO_REQUESTED,.s-EMPTY,.s-DRAFT,
.s-AWAITING_SIGNATURE,.s-SIGNED_READY_TO_RELEASE,.s-UNSIGNED{
  background:var(--surface-2);color:var(--label-2)}

/* ---------- slide-over ---------------------------------------------- */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.22);opacity:0;pointer-events:none;
  transition:opacity .25s ease;z-index:40}
body.panelopen .scrim{opacity:1;pointer-events:auto}
.panel{position:fixed;top:0;right:0;width:min(478px,100%);height:100%;
  background:var(--surface);box-shadow:var(--shadow-panel);z-index:50;
  transform:translateX(100%);transition:transform .28s cubic-bezier(.32,.72,0,1);
  display:flex;flex-direction:column}
body.panelopen .panel{transform:none}
@media (prefers-reduced-motion:reduce){
  .panel{transition:none} .scrim{transition:none} .meter i{transition:none}}
.panel .ptop{padding:20px 24px 16px;border-bottom:1px solid var(--separator);flex:none}
.panel .ptop .close{float:right;margin:-4px -8px 0 0}
.panel .ptop h2{font-size:22px;font-weight:700;letter-spacing:-.4px;margin:8px 0 3px}
.panel .ptop .sub{font-size:14px;color:var(--label-2)}
.panel .pbody{padding:2px 24px 24px;overflow:auto;flex:1}
.panel .pfoot{padding:14px 24px 20px;border-top:1px solid var(--separator);flex:none;
  display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.panel .pfoot .act{flex:1;min-width:150px}
.panel .actions{margin-top:0}

/* ---------- grouped inset lists (facts) ----------------------------- */
.kv{display:block;background:var(--surface-2);border-radius:var(--r-inner);
  margin:10px 0 4px;overflow:hidden;font-size:14px}
.kv dt{color:var(--label-2);padding:11px 15px 0;float:left;width:132px;clear:both}
.kv dd{margin:0;padding:11px 15px 11px 147px;border-top:1px solid var(--separator);
  overflow:hidden}
.kv dd:first-of-type,.kv dt:first-of-type + dd{border-top:0}
.kv dt:first-of-type{padding-top:11px}
/*  In the narrow panel a label column squeezes long values into a ribbon.
    Stack them instead: label above, value below, separators between pairs. */
.panel .kv dt{float:none;width:auto;padding:11px 15px 0;
  border-top:1px solid var(--separator)}
.panel .kv dd{padding:1px 15px 11px;border-top:0}
.panel .kv dt:first-of-type{border-top:0}

/* ---------- clause checklist ---------------------------------------- */
.clauses{list-style:none;margin:6px 0 0;padding:0;font-size:14px}
.clauses li{display:flex;gap:11px;align-items:flex-start;padding:10px 2px;
  border-top:1px solid var(--separator)}
.clauses li:first-child{border-top:0}
.mark{flex:0 0 19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:700;margin-top:1px}
.mark.y{background:var(--green-soft);color:var(--green)}
.mark.n{background:var(--red-soft);color:var(--red)}
.clauses .why{color:var(--label-2);font-size:13px;margin-top:1px}

/* ---------- notes --------------------------------------------------- */
.note{border-radius:var(--r-inner);background:var(--surface-2);padding:13px 15px;
  margin:14px 0;font-size:13.5px;color:var(--label-2);border-left:0}
.note > b:first-child{display:block;margin-bottom:3px;color:var(--label);font-weight:600}
.note.hot{background:var(--amber-soft);color:var(--label)}
.note.hot > b:first-child{color:var(--label)}
.note.stop{background:var(--red-soft);color:var(--label)}
.note.stop > b:first-child{color:var(--red)}

/* ---------- login --------------------------------------------------- */
.login{min-height:76vh;display:grid;place-items:center;padding:30px 20px}
.loginbox{width:100%;max-width:470px}
.loginbox .head{text-align:center;margin-bottom:26px}
.loginbox .head .mark{display:inline-block;width:auto;height:auto;border-radius:0;
  background:none;font-size:12px;font-weight:600;color:var(--accent);margin-bottom:6px}
.loginbox .head h1{margin:0 0 6px;font-size:30px;font-weight:700;letter-spacing:-.6px}
.accounts{background:var(--surface);border-radius:var(--r-card);box-shadow:var(--shadow);
  overflow:hidden}
.acct{display:flex;gap:14px;align-items:center;width:100%;text-align:left;background:none;
  border:0;border-top:1px solid var(--separator);padding:14px 18px;font:inherit;
  color:var(--label);cursor:pointer}
.acct:first-child{border-top:0}
.acct:hover{background:var(--surface-2)}
.acct:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.avatar{flex:0 0 38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-weight:600;font-size:13.5px;color:#fff;background:var(--navy)}
.acct.ex .avatar{background:var(--plum)}
.acct .nm{font-weight:600}
.acct .rl{font-size:13.5px;color:var(--label-2)}
.acct .tag{margin-left:auto;font-size:13px;color:var(--label-3);text-transform:none;
  letter-spacing:0}

/* ---------- module / discipline menu -------------------------------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(242px,1fr));gap:12px}
.mod{text-align:left;background:var(--surface);border:0;border-radius:var(--r-card);
  box-shadow:var(--shadow);padding:16px 17px;font:inherit;color:var(--label);
  display:flex;flex-direction:column;gap:5px;min-height:136px;cursor:pointer}
.mod.on:hover{background:var(--surface-2)}
.mod.on:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mod.off{opacity:.55;cursor:not-allowed;box-shadow:none;background:var(--surface-2)}
.mod .nm{font-weight:600;font-size:16px;letter-spacing:-.2px}
.mod .st{font-size:13px;color:var(--label-2);line-height:1.42}
.mod .foot{margin-top:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-top:8px}
.badge{font-size:12px;font-weight:600;padding:2px 9px;border-radius:20px;
  text-transform:none;letter-spacing:0}
.badge.live{background:var(--green-soft);color:var(--green)}
.badge.soon{background:var(--surface-2);color:var(--label-2)}
.badge.date{background:var(--amber-soft);color:var(--amber)}

/* ---------- form ---------------------------------------------------- */
form.fg{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:13px}
label{display:block;font-size:12.5px;color:var(--label-2);margin-bottom:4px}
input,select,textarea{width:100%;padding:9px 11px;border:1px solid var(--separator);
  border-radius:var(--r-control);font:inherit;font-size:14.5px;background:var(--surface);
  color:var(--label)}
textarea{min-height:76px;resize:vertical}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--accent);outline-offset:-1px;border-color:transparent}

/* ---------- ledger -------------------------------------------------- */
.rows{max-height:none;overflow:visible}
.ev{display:grid;grid-template-columns:72px 158px 1fr;gap:14px;padding:10px 0;
  font-size:13.5px;border-top:1px solid var(--separator)}
.ev:first-child{border-top:0}
.ev .t{color:var(--label-3);font-family:var(--mono);font-size:12px;padding-top:1px}
.ev .k{font-weight:600}
.ev.key1 .k{color:var(--navy)} .ev.key2 .k,.ev.sign .k{color:var(--plum)}
.ev.sent .k{color:var(--green)} .ev.stop .k{color:var(--red)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .ev.key1 .k{color:#8fb4d8}}
:root[data-theme="dark"] .ev.key1 .k{color:#8fb4d8}

/* ---------- the wall probes ----------------------------------------- */
.probe{border-radius:var(--r-inner);background:var(--surface-2);margin-bottom:12px;
  overflow:hidden}
.probe header{padding:11px 15px;font-weight:600;font-size:14px;display:flex;
  justify-content:space-between;gap:12px;align-items:center}
.probe.allowed header{color:var(--green)}
.probe.refused header{color:var(--red)}
.probe .tag{font-size:12px;font-weight:600;text-transform:none;letter-spacing:0}
.probe pre{margin:0;padding:11px 15px;border-top:1px solid var(--separator);
  font-size:12.5px;white-space:pre-wrap;word-break:break-word;font-family:var(--mono);
  color:var(--label-2)}
pre.code{background:var(--surface-2);border:0;border-radius:var(--r-inner);
  padding:14px 16px;overflow-x:auto;font-size:12.5px;line-height:1.5;
  font-family:var(--mono);margin:0 0 12px;color:var(--label)}

/* ---------- the document -------------------------------------------- */
.doc{border-radius:var(--r-inner);background:var(--surface-2);overflow:hidden;margin:4px 0}
.doc .cover{padding:18px 20px;border-bottom:1px solid var(--separator)}
.doc .cover .t{font-size:19px;font-weight:650;letter-spacing:-.3px;margin-bottom:3px}
.doc .cover .p{font-size:13.5px;color:var(--label-2)}
.doc .body{padding:4px 20px 14px}
.doc .seal{padding:16px 20px;border-top:2px solid var(--accent);background:var(--surface)}
.doc .seal .who{font-size:12.5px;color:var(--label-2)}
.doc .seal .nm{font-weight:650;font-size:16px;margin-top:2px}
.doc .seal .p{font-size:13.5px;color:var(--label-2);margin-top:2px}
.doc .seal .dec{font-size:13.5px;font-style:italic;margin:8px 0 9px}
.hash{font-family:var(--mono);font-size:11.5px;color:var(--label-3);word-break:break-all;
  margin-top:6px}
.hash b{color:var(--label-2);font-weight:600;font-family:var(--font);font-size:12px}
.packrow{display:flex;gap:14px;align-items:center;width:100%;text-align:left;font:inherit;
  color:var(--label);background:none;border:0;border-top:1px solid var(--separator);
  padding:14px 4px;cursor:pointer}
.packrow:first-of-type{border-top:0}
.packrow:hover{background:var(--surface-2)}
.packrow .ttl{font-weight:600}
.packrow .sub{font-size:13.5px;color:var(--label-2)}
.packrow .sp{margin-left:auto}
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;
  margin:14px 0}
.step{border-radius:var(--r-inner);background:var(--surface-2);padding:11px 13px;
  font-size:13px;border-top:3px solid transparent}
.step.done{border-top-color:var(--green)}
.step.now{border-top-color:var(--accent)}
.step .who{font-size:12px;color:var(--label-2)}
.step .what{font-weight:600;margin:2px 0}
.step .when{color:var(--label-2);font-size:12.5px}

/* ---------- misc ---------------------------------------------------- */
.scroll{max-height:none;overflow:visible;border:0;border-radius:0}
table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;font-weight:600;font-size:12.5px;color:var(--label-2);
  padding:8px 10px;background:none;border-bottom:1px solid var(--separator-2)}
td{padding:10px;border-bottom:1px solid var(--separator);vertical-align:top}
tbody tr:last-child td{border-bottom:0}
.tag{font-size:12.5px;text-transform:none;letter-spacing:0}
.chips{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:12px}
.chip{border:0;background:var(--surface-2);color:var(--label-2);border-radius:20px;
  padding:5px 13px;font:inherit;font-size:13px;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--accent);color:#fff}
.switch{font-size:14px;margin:0 0 12px}
@media (prefers-reduced-motion:no-preference){
  .flash{animation:fl 1.1s ease-out}
  @keyframes fl{from{background:var(--accent-soft)}to{background:transparent}}
}
@media (max-width:760px){
  .hdr{flex-wrap:wrap;padding:20px 16px 0} .hdr-actions{padding-top:12px}
  .wrap{padding:16px 16px 70px}
  .hdr h1{font-size:25px}
  .card{padding:17px 16px}
  .row{padding:12px 16px;gap:10px;flex-wrap:wrap}
  .row .ref{min-width:0;flex:0 0 auto}
  .row .mid{flex:1 0 100%;order:3}
  .row .chev{display:none}
  .hero{flex-wrap:wrap;gap:8px} .hero .n{font-size:40px}
  .toolbar{gap:10px} .seg{overflow-x:auto;max-width:100%}
  .panel{width:100%}
  .ev{grid-template-columns:62px 1fr;gap:4px 12px}
  .ev div:nth-child(3){grid-column:1 / -1}
  .kv dt{float:none;width:auto;padding:11px 15px 2px}
  .kv dd{padding:0 15px 11px;border-top:0}
}

/* ---------- additions for the ASP.NET version ---------------------- */
form.inline{display:contents}
a.btn{display:inline-block;text-decoration:none}
a.btn.fill{color:#fff}
.hdr-actions form.inline button.btn{font:inherit;font-size:14px}

/* "More" menu: a <details> element, so it works without script */
details.more{position:relative}
details.more > summary{list-style:none;display:inline-block}
details.more > summary::-webkit-details-marker{display:none}
details.more .menu a{display:block;text-decoration:none;font-size:14px;color:var(--label);
  padding:9px 12px;border-radius:7px}
details.more .menu a:hover{background:var(--surface-2)}

/* segmented control and list rows as links */
.seg a{font-size:13.5px;font-weight:500;color:var(--label-2);padding:6px 14px;border-radius:7px;
  white-space:nowrap;text-decoration:none}
.seg a:hover{color:var(--label)}
.seg a[aria-current="true"]{background:var(--surface);color:var(--label);font-weight:600;
  box-shadow:0 1px 2px rgba(0,0,0,.09)}
a.row{text-decoration:none}
a.packrow{text-decoration:none}
.sortwrap form{display:contents}

/* the slide-over is server-rendered: the scrim is a link back to the list */
a.scrim{display:block}
.panel form.decide{display:contents}

/* building image and selector in the console header */
.hdr-main{display:flex;gap:16px;align-items:stretch;min-width:0}
/* one fixed size for every building; the photo fills it (cropped, never stretched) */
.hdr-img{width:150px;height:112px;flex:none;
  border-radius:var(--r-inner);box-shadow:var(--shadow);
  background:var(--surface-2) center/cover no-repeat}
.bsel{display:flex;align-items:center;gap:8px;margin-top:10px}
.bsel label{margin:0;font-size:13.5px}
.bsel select{width:auto;font-size:14px;padding:6px 10px}
@media (max-width:760px){ .hdr-img{width:104px;height:78px} }

/* the readiness bands are the filter: click the bar or the key to switch bands on or off */
.meter{height:12px}
.meter a{display:block;transition:opacity .15s}
.meter.has-sel a:not(.on){opacity:.28}
.meter a:hover{filter:brightness(1.12)}
.meter a:focus-visible{outline:2px solid var(--label);outline-offset:1px}
.key a{display:flex;align-items:center;gap:7px;padding:3px 10px;border-radius:20px;color:var(--label-2);
  text-decoration:none;box-shadow:inset 0 0 0 1px transparent}
.key a:hover{background:var(--surface-2)}
.key a.on{background:var(--accent-soft);box-shadow:inset 0 0 0 1px var(--accent-line);color:var(--label)}
/* a small circled x after the last filter, on the same line */
.key a.clear{width:22px;height:22px;padding:0;justify-content:center;border-radius:50%;color:var(--label-2);
  font-size:15px;line-height:1;background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--separator-2)}
.key a.clear:hover{color:var(--label);background:var(--surface-3)}
.key{gap:7px 8px}
.showing{font-size:13.5px;color:var(--label-2)}

/* "Why the greyed ones matter": the note keeps its place and looks as it always did, but is
   invisible until you hover (or tab to) a greyed-out option */
.modwrap{display:flex}
.modwrap > form{display:contents}
.modwrap > .mod, .modwrap form > .mod{flex:1}
.modwrap.off{cursor:help}
.why-note{opacity:0;transition:opacity .15s ease}
body:has(.modwrap.off:hover) .why-note,
body:has(.modwrap.off:focus-within) .why-note{opacity:1}
@media (prefers-reduced-motion:reduce){ .why-note{transition:none} }

/* a circled ? in place of an explanatory sentence; hover or focus shows it */
.helpq-wrap{position:relative;display:flex;justify-content:flex-end;margin:-4px 0 8px}
.helpq{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;
  color:var(--label-2);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--separator-2);cursor:help;user-select:none}
.helpq:hover,.helpq:focus-visible{color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent-line);outline:none}
.help-pop{display:none;position:absolute;right:0;top:calc(100% + 4px);z-index:20;width:min(380px,100%);
  background:var(--surface);border-radius:var(--r-inner);padding:12px 14px;font-size:13.5px;line-height:1.45;
  color:var(--label-2);box-shadow:0 2px 6px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.18);border-left:3px solid var(--accent)}
.helpq:hover + .help-pop,.helpq:focus + .help-pop{display:block}

/* a ? in the top right corner of a card; the card must not clip its popup */
.card.has-help{position:relative;overflow:visible}
.helpq-wrap.corner{position:absolute;top:14px;right:16px;margin:0;z-index:5}
.help-pop b{display:block;color:var(--label);margin-bottom:3px}
.helpq-wrap.corner .help-pop{width:380px;max-width:calc(100vw - 48px)}

/* ---------- golden thread: evidence coverage ---------- */
.thread-row{display:flex;align-items:center;gap:16px;padding:12px 0;border-top:1px solid var(--separator)}
.thread-row:first-of-type{border-top:0}
.thread-name{width:200px;flex:none;line-height:1.3}
.thread-name span{display:block;font-size:12.5px;color:var(--label-2)}
.thread-line{display:flex;flex:1;gap:5px;position:relative;min-width:0}
.thread-line::before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:#c9a227;opacity:.55;z-index:0}
.thread-seg{position:relative;z-index:1;flex:1;min-width:0;height:34px;border-radius:9px;display:grid;place-items:center;
  font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;cursor:default;outline:none}
.thread-seg:focus-visible{box-shadow:0 0 0 2px var(--label)}
/* solid underneath the tint, so the golden line runs behind the segments rather than through them */
.t-ok{background:linear-gradient(var(--green-soft),var(--green-soft)) var(--surface);color:var(--green);box-shadow:inset 0 0 0 1px var(--green)}
.t-warn{background:linear-gradient(var(--amber-soft),var(--amber-soft)) var(--surface);color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.t-bad{background:linear-gradient(var(--red-soft),var(--red-soft)) var(--surface);color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.t-none{background:var(--surface-2);color:var(--label-3);box-shadow:inset 0 0 0 1px var(--separator-2)}
.thread-tip{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%);z-index:30;width:250px;
  background:var(--surface);color:var(--label-2);border-radius:var(--r-inner);padding:10px 12px;font-size:12.5px;font-weight:400;
  line-height:1.4;text-align:left;box-shadow:0 2px 6px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.18)}
.thread-tip b{display:block;color:var(--label);margin-bottom:2px;font-weight:600}
.thread-seg:hover .thread-tip,.thread-seg:focus .thread-tip{display:block}
.thread-legend{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:6px;font-size:13px;color:var(--label-2);border-top:1px solid var(--separator);padding-top:12px}
.thread-legend span{display:flex;align-items:center;gap:7px}
.thread-dot{width:12px;height:12px;border-radius:4px;display:inline-block}
.thread-cats{list-style:none;margin:6px 0 0;padding:0;columns:2;column-gap:32px;font-size:14px}
.thread-cats li{display:flex;gap:12px;align-items:flex-start;padding:8px 0;break-inside:avoid}
.thread-cats .why{color:var(--label-2);font-size:13px}
.thread-num{flex:none;width:26px;height:26px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;font-size:12.5px;font-weight:700}
.mark.p{background:var(--amber-soft);color:var(--amber)}
.char-status{font-size:11.5px;font-weight:600;padding:1px 8px;border-radius:20px;margin-left:6px;box-shadow:none}
@media (max-width:760px){
  .thread-row{flex-direction:column;align-items:stretch;gap:8px}
  .thread-name{width:auto}
  .thread-seg{height:30px;font-size:11px}
  .thread-cats{columns:1}
}

/* ---------- traffic light: liquid glass circles, no housing ---------- */
.tl{display:inline-flex;gap:18px;margin:18px 0 6px;padding:2px}
.tl-lamp{position:relative;width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:#fff;cursor:default;outline:none;
  /* a tinted glass body, a bright highlight at the top left, and a thin light rim */
  background:
    radial-gradient(120% 90% at 28% 12%,rgba(255,255,255,.72) 0,rgba(255,255,255,.18) 38%,rgba(255,255,255,0) 58%),
    linear-gradient(160deg,color-mix(in srgb,var(--c) 78%,#fff),var(--c) 70%);
  box-shadow:
    inset 0 1.5px 1px rgba(255,255,255,.95),
    inset 0 -3px 7px color-mix(in srgb,var(--c) 70%,#000 0%),
    inset 0 0 0 1px rgba(255,255,255,.35),
    0 0 0 .5px rgba(0,0,0,.14),
    0 10px 22px -4px color-mix(in srgb,var(--c) 55%,transparent);
  backdrop-filter:saturate(1.4) blur(2px);-webkit-backdrop-filter:saturate(1.4) blur(2px)}
.tl-lamp.red{--c:#ff5f57}
.tl-lamp.amber{--c:#febc2e}
.tl-lamp.green{--c:#28c840}
/* 15% less bright and a touch more pastel */
.tl-lamp{filter:brightness(.85) saturate(.88)}
.tl-lamp.zero{opacity:.42;filter:brightness(.85) saturate(.55)}
.tl-n{font-size:26px;font-weight:700;letter-spacing:-.6px;font-variant-numeric:tabular-nums;text-shadow:0 1px 3px rgba(0,0,0,.30)}
.tl-lamp.has-pop{cursor:help}
.tl-lamp:focus-visible{box-shadow:0 0 0 3px var(--accent)}
.tl-pop{display:none;position:absolute;left:0;top:calc(100% + 12px);z-index:30;width:340px;max-width:calc(100vw - 48px);
  background:var(--surface);color:var(--label-2);border-radius:var(--r-inner);padding:12px 14px;font-size:13.5px;line-height:1.45;
  font-weight:400;letter-spacing:0;text-align:left;text-shadow:none;box-shadow:0 2px 6px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.2);
  border-left:3px solid var(--red)}
.tl-pop b{display:block;color:var(--label);margin-bottom:3px;font-weight:600}
.tl-lamp:hover .tl-pop,.tl-lamp:focus .tl-pop{display:block}

/* a hover explanation for a disabled button: the wrapper takes the hover, since a disabled button gets none */
.tipwrap{position:relative;display:inline-block}
.tipwrap form{display:inline}
.tipwrap.has-tip{cursor:help}
.tip-pop{display:none;position:absolute;left:0;bottom:calc(100% + 10px);z-index:30;width:340px;max-width:calc(100vw - 48px);
  background:var(--surface);color:var(--label-2);border-radius:var(--r-inner);padding:12px 14px;font-size:13.5px;line-height:1.45;
  box-shadow:0 2px 6px rgba(0,0,0,.08),0 14px 40px rgba(0,0,0,.2);border-left:3px solid var(--amber)}
.tip-pop.stop{border-left-color:var(--red)}
.tipwrap:hover .tip-pop,.tipwrap:focus .tip-pop,.tipwrap:focus-within .tip-pop{display:block}
/* a ? sitting at the end of a row of buttons */
.helpq-wrap.inline-help{display:inline-flex;margin:0 0 0 4px;align-self:center}
.helpq-wrap.inline-help .help-pop{top:auto;bottom:calc(100% + 8px);right:auto;left:0}
.helpq-wrap.inline-help .help-pop{width:320px;max-width:calc(100vw - 48px)}