/* SupportED Readiness Map — brand system locked from 06_Clients/supported/.../brand.css + logo */
:root{
  --navy:#093992; --navy-lift:#0b41a8; --deep:#051d4b; --ink:#0a2255;
  --gold:#E4A92A; --gold-soft:#f0c862;
  --paper:#f7f5ee; --paper-line:#e6e0d1; --white:#fff;
  --grey:#5d6b8a; --grey-soft:#8d99b3; --line:#dfe4ee;
  --ok:#1f9d55; --warn:#d9822b; --stop:#c0392b;
  --sans:'Manrope',system-ui,-apple-system,Segoe UI,sans-serif;
  --serif:'Merriweather',Georgia,serif;
  --max:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--sans);background:var(--paper);color:var(--ink);-webkit-font-smoothing:antialiased;line-height:1.55}
.wrap{max-width:var(--max);margin:0 auto;padding:0 28px}
a{color:var(--navy)}

/* ---------- masthead ---------- */
.mast{background:radial-gradient(120% 130% at 50% 0%,#0d47b4 0%,var(--navy) 45%,#061f52 100%);color:#fff;padding:54px 0 46px;position:relative;overflow:hidden}
.mast::after{content:"";position:absolute;inset:0;background:radial-gradient(90% 60% at 50% 120%,rgba(228,169,42,.18),transparent 70%);pointer-events:none}
.mast .wrap{position:relative;z-index:1}
.eyebrow{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-soft);font-weight:700}
h1{font-family:var(--serif);font-size:clamp(30px,4.4vw,46px);line-height:1.12;margin:12px 0 14px;font-weight:700}
.sub{color:#c8d6f5;max-width:62ch;font-size:16px}
.gates{display:flex;gap:10px;flex-wrap:wrap;margin-top:26px}
.gate{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:10px;padding:11px 15px;min-width:168px}
.gate b{display:block;font-size:19px;color:var(--gold-soft);font-weight:800;letter-spacing:-.01em}
.gate span{font-size:11.5px;color:#b9c9ee;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.gate i{display:block;font-style:normal;font-size:12.5px;color:#e6edff;margin-top:3px}
.navlinks{margin-top:24px;font-size:13px;color:#a8bce8}
.navlinks a{color:#fff;border-bottom:1px solid rgba(255,255,255,.35);text-decoration:none;padding-bottom:1px}

section{padding:46px 0}
h2{font-family:var(--serif);font-size:25px;margin-bottom:6px;font-weight:700}
.lede{color:var(--grey);margin-bottom:26px;max-width:72ch;font-size:15px}

/* ---------- stage spine ---------- */
.spine{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin-bottom:30px;border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.sp{padding:16px 15px;border-right:1px solid var(--line);position:relative}
.sp:last-child{border-right:0}
.sp .n{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--grey-soft);font-weight:700}
.sp .t{font-weight:800;font-size:14.5px;margin:5px 0 3px;letter-spacing:-.01em}
.sp .d{font-size:11.5px;color:var(--grey)}
.sp .bar{height:4px;border-radius:3px;margin-top:11px;background:var(--line)}
.sp.done .bar{background:var(--ok)} .sp.now .bar{background:var(--gold)}
.sp.next .bar{background:var(--navy)} .sp.later .bar{background:#cdd5e6}
.sp.now{background:#fffdf5}

/* ---------- phase cards ---------- */
.phase{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:16px;overflow:hidden}
.phead{display:flex;gap:16px;align-items:flex-start;padding:20px 22px;cursor:pointer;user-select:none}
.phead:hover{background:#fafbfe}
.pnum{flex:0 0 auto;width:40px;height:40px;border-radius:9px;background:var(--navy);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.02em}
.phase.done .pnum{background:var(--ok)} .phase.now .pnum{background:var(--gold);color:var(--deep)}
.ptitle{flex:1}
.ptitle h3{font-size:17.5px;font-weight:800;letter-spacing:-.015em}
.ptitle p{font-size:13.5px;color:var(--grey);margin-top:3px}
.pmeta{flex:0 0 auto;text-align:right;font-size:11.5px;color:var(--grey)}
.pill{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px;margin-bottom:5px}
.pill.done{background:#e3f5ea;color:#13703b} .pill.now{background:#fdf0d2;color:#8a5d00}
.pill.next{background:#e6ecfb;color:var(--navy)} .pill.later{background:#eef0f5;color:var(--grey)}
.chev{flex:0 0 auto;color:var(--grey-soft);font-size:18px;transition:transform .18s}
.phase.open .chev{transform:rotate(180deg)}
.pbody{display:none;padding:0 22px 22px 78px;border-top:1px solid var(--line);margin-top:-1px;padding-top:18px}
.phase.open .pbody{display:block}
.goal{font-family:var(--serif);font-size:15.5px;color:var(--ink);background:#f7f9fd;border-left:3px solid var(--navy);padding:11px 15px;border-radius:0 7px 7px 0;margin-bottom:16px}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.cols h4{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--grey-soft);font-weight:800;margin-bottom:8px}
.cols ul,ul.cols{list-style:none;padding-left:0} .cols li{font-size:13.5px;padding:4px 0 4px 20px;position:relative;color:#26365c}
.cols li::before{content:"";position:absolute;left:4px;top:11px;width:5px;height:5px;border-radius:50%;background:var(--navy-lift)}
.cols li.sh::before{background:var(--ok)} .cols li.sh{color:var(--grey)}
.exit{margin-top:16px;font-size:13px;background:#fffdf5;border:1px solid #f0e3bd;border-radius:8px;padding:11px 14px}
.exit b{color:#8a5d00;text-transform:uppercase;font-size:10.5px;letter-spacing:.11em}

/* ---------- sprint timeline ---------- */
.tl{background:#fff;border:1px solid var(--line);border-radius:12px;padding:6px 0;overflow-x:auto}
.tlrow{display:grid;grid-template-columns:104px 1fr;gap:0;align-items:stretch;border-bottom:1px solid #eef1f7;min-width:720px}
.tlrow:last-child{border-bottom:0}
.tlrow.gate{background:#fffdf5}
.tlk{padding:12px 16px;border-right:1px solid var(--line)}
.tlk b{display:block;font-size:13px;font-weight:800} .tlk span{font-size:11px;color:var(--grey)}
.tlv{padding:12px 16px;font-size:13.5px;color:#26365c}
.tlv .tag{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:#e6ecfb;color:var(--navy);margin-right:7px}
.tlv .tag.mig{background:#efe7fa;color:#5b3fa6} .tlv .tag.rel{background:var(--gold);color:var(--deep)}
.tlv .tag.wall{background:#fbe4e1;color:var(--stop)} .tlv .tag.buf{background:#eef0f5;color:var(--grey)}

/* ---------- blocks ---------- */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:20px 22px}
.card h3{font-size:15px;font-weight:800;margin-bottom:10px;letter-spacing:-.01em}
.card.warn{border-color:#f0d9b8;background:#fffdf7}
.card.stop{border-color:#f0c9c3;background:#fffaf9}
.dec{border-bottom:1px solid #eef1f7;padding:10px 0;font-size:13.5px}
.dec:last-child{border-bottom:0}
.dec b{display:block;font-size:13.5px} .dec span{color:var(--grey);font-size:12.5px}
.k{display:inline-block;font-family:ui-monospace,SFMono-Regular,monospace;font-size:11px;background:#eef1f7;padding:1px 6px;border-radius:4px;color:var(--navy);font-weight:700;margin-right:6px}
.math{font-size:14px;line-height:1.85}
.math b{color:var(--navy)}
footer{background:var(--deep);color:#96a9d4;padding:30px 0;font-size:12.5px;margin-top:20px}
footer b{color:#fff}

/* ---------- public page ---------- */
.nnl{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.nnl .card{padding:24px}
.nnl h3{font-family:var(--serif);font-size:19px;margin-bottom:4px}
.nnl .cap{font-size:11px;letter-spacing:.13em;text-transform:uppercase;font-weight:800;margin-bottom:12px}
.nnl .now .cap{color:var(--ok)} .nnl .next .cap{color:var(--warn)} .nnl .later .cap{color:var(--grey-soft)}
.nnl ul{list-style:none;margin-top:12px}
.nnl li{font-size:14px;padding:9px 0 9px 24px;position:relative;border-top:1px solid #f0f3f8}
.nnl li:first-child{border-top:0}
.nnl li::before{content:"✓";position:absolute;left:0;top:9px;font-weight:800;color:var(--ok);font-size:13px}
.nnl .next li::before{content:"→";color:var(--warn)} .nnl .later li::before{content:"○";color:var(--grey-soft)}
.nnl li b{display:block;font-weight:700} .nnl li span{color:var(--grey);font-size:12.5px}

@media(max-width:860px){
  .spine{grid-template-columns:1fr 1fr}
  .cols,.grid2,.nnl{grid-template-columns:1fr}
  .pbody{padding-left:22px}
  .sp{border-bottom:1px solid var(--line)}
}

/* ============ VISUAL LAYER — house ops-manual language ============ */
/* Structural DNA borrowed from 06_Clients/joburn_internal/02_lowticketprocess_2026_06_16/site
   (mono micro-labels, legend strip, diamond gates, dashed fail-loops, right-rail meta).
   Palette stays SupportED navy/gold. */
.mono{font-family:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace}
.msec{background:#F4F1EA;border-top:1px solid var(--paper-line);border-bottom:1px solid var(--paper-line)}
.legend{display:flex;gap:18px;flex-wrap:wrap;align-items:center;font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--grey);margin-bottom:22px;font-weight:700}
.legend .lg{display:flex;align-items:center;gap:6px}
.legend .sw{width:11px;height:11px;border-radius:3px;border:1px solid rgba(0,0,0,.18)}
.legend .lbl{color:var(--grey-soft);letter-spacing:.14em;margin-right:4px}

/* ---- swimlane ---- */
.swwrap{overflow-x:auto;border:1px solid var(--paper-line);border-radius:12px;background:#FAFAF7}
.sw-grid{min-width:980px}
.sw-head{display:grid;grid-template-columns:168px repeat(10,1fr);border-bottom:1px solid var(--paper-line);background:#fff}
.sw-head div{padding:9px 6px;font-size:10px;text-align:center;color:var(--grey);border-left:1px solid #edeae1;font-weight:700;letter-spacing:.05em}
.sw-head div:first-child{border-left:0;text-align:left;padding-left:14px}
.sw-head .mo{display:block;font-size:9px;color:var(--grey-soft);font-weight:600;letter-spacing:.04em}
.sw-row{display:grid;grid-template-columns:168px repeat(10,1fr);border-bottom:1px solid #edeae1;min-height:44px;align-items:center;position:relative}
.sw-row:last-child{border-bottom:0}
.sw-lane{padding:8px 12px 8px 14px;font-size:11.5px;font-weight:800;letter-spacing:.02em;color:var(--ink);border-right:1px solid var(--paper-line)}
.sw-lane span{display:block;font-size:9.5px;font-weight:600;color:var(--grey-soft);letter-spacing:.06em;text-transform:uppercase;margin-top:1px}
.sw-cell{border-left:1px solid #f1eee6;grid-row:1}
.bar{grid-row:1;align-self:center;margin:0 3px;height:23px;z-index:2;border-radius:5px;display:flex;align-items:center;padding:0 9px;font-size:10px;font-weight:800;color:#fff;letter-spacing:.03em;white-space:nowrap;overflow:hidden;box-shadow:0 1px 2px rgba(0,0,0,.09)}
.bar.mig{background:#6B4FA8} .bar.asm{background:var(--navy)} .bar.adm{background:#2E7CC4}
.bar.par{background:#128C7E} .bar.cred{background:#B8860B} .bar.grw{background:#1f9d55}
.bar.fnd{background:#6b675c} .bar.ghost{background:repeating-linear-gradient(45deg,#cdd5e6,#cdd5e6 5px,#dde3ee 5px,#dde3ee 10px);color:var(--grey)}
.sw-mile{display:grid;grid-template-columns:168px repeat(10,1fr);border-top:1px dashed #cfc8b8;background:#fffdf5}
.sw-mile .sw-lane{border-right:1px solid var(--paper-line);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-soft);padding-top:12px}
.mile{border-left:1px solid #f1eee6;padding:9px 4px;text-align:center;font-size:9.5px;line-height:1.3}
.mile b{display:block;font-size:11px;color:var(--deep);font-weight:800}
.mile.hit{background:#fdf3d8}
.mile .pin{display:inline-block;width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-top:9px solid var(--gold);margin-bottom:3px}
.mile.wall .pin{border-top-color:var(--stop)}

/* ---- flow chart ---- */
.flowwrap{overflow-x:auto;border:1px solid var(--paper-line);border-radius:12px;background:#FAFAF7;padding:8px 0}
.flowwrap svg{display:block;min-width:940px}
.fx-node{font-family:'JetBrains Mono',ui-monospace,monospace}
.fx-t{font-size:10.5px;font-weight:700;letter-spacing:.04em}
.fx-s{font-size:8.6px;letter-spacing:.02em}
.fx-lbl{font-size:8.4px;fill:var(--grey);letter-spacing:.03em}
.fx-gate{font-size:9.5px;font-weight:700;letter-spacing:.05em}
.fx-stage{font-size:9px;letter-spacing:.17em;fill:#a09a8c;font-weight:700}
.fx-meta{font-size:8.2px;fill:#8a8478;letter-spacing:.03em}

/* ---- backlog table ---- */
.bltable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-size:13px}
.bltable th{text-align:left;padding:10px 14px;font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--grey-soft);background:#f7f9fd;border-bottom:1px solid var(--line);font-weight:800}
.bltable td{padding:10px 14px;border-bottom:1px solid #f0f3f8;vertical-align:top}
.bltable tr:last-child td{border-bottom:0}
.bltable td.id{font-family:ui-monospace,monospace;font-weight:700;color:var(--navy);white-space:nowrap;font-size:12px}
.prio{display:inline-block;font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;padding:2px 7px;border-radius:4px}
.prio.urgent{background:#fbe4e1;color:var(--stop)} .prio.high{background:#fdf0d2;color:#8a5d00}
.prio.medium{background:#e6ecfb;color:var(--navy)} .prio.none{background:#eef0f5;color:var(--grey)}
.lanetag{display:inline-block;font-size:9.5px;font-weight:700;padding:2px 7px;border-radius:4px;color:#fff;letter-spacing:.03em}
.lanetag.mig{background:#6B4FA8} .lanetag.asm{background:var(--navy)} .lanetag.adm{background:#2E7CC4}
.lanetag.par{background:#128C7E} .lanetag.cred{background:#B8860B} .lanetag.grw{background:#1f9d55}
.lanetag.gap{background:var(--stop)}

/* ---- chatbot ---- */
.bot{border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 14px rgba(9,57,146,.06)}
.bot-h{background:var(--deep);color:#fff;padding:15px 20px;display:flex;align-items:center;gap:11px}
.bot-h .dot{width:8px;height:8px;border-radius:50%;background:#37d67a;box-shadow:0 0 0 3px rgba(55,214,122,.22)}
.bot-h b{font-size:14.5px;letter-spacing:-.01em}
.bot-h span{font-size:11.5px;color:#9fb2dd;margin-left:auto}
.bot-log{height:400px;overflow-y:auto;padding:18px 20px;background:#fbfcfe}
.msg{margin-bottom:14px;display:flex;gap:10px;align-items:flex-start}
.msg .av{flex:0 0 auto;width:27px;height:27px;border-radius:7px;display:grid;place-items:center;font-size:10.5px;font-weight:800;color:#fff;background:var(--navy)}
.msg.me .av{background:var(--gold);color:var(--deep)}
.msg .bub{background:#fff;border:1px solid var(--line);border-radius:9px;padding:10px 13px;font-size:13.5px;max-width:78%;white-space:pre-wrap;line-height:1.6}
.msg.me{flex-direction:row-reverse} .msg.me .bub{background:#fffdf5;border-color:#f0e3bd}
.msg .bub b{color:var(--navy)} .msg .bub code{font-family:ui-monospace,monospace;font-size:12px;background:#eef1f7;padding:1px 5px;border-radius:3px}
.bot-in{display:flex;gap:9px;padding:13px 16px;border-top:1px solid var(--line);background:#fff}
.bot-in input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 13px;font-size:13.5px;font-family:var(--sans);outline:none}
.bot-in input:focus{border-color:var(--navy)}
.bot-in button{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 19px;font-weight:800;font-size:13px;cursor:pointer;font-family:var(--sans)}
.bot-in button:disabled{opacity:.45;cursor:not-allowed}
.bot-f{padding:11px 20px;background:#f7f9fd;border-top:1px solid var(--line);font-size:11.5px;color:var(--grey)}
.typing span{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--grey-soft);margin-right:3px;animation:bl 1.3s infinite}
.typing span:nth-child(2){animation-delay:.18s} .typing span:nth-child(3){animation-delay:.36s}
@keyframes bl{0%,60%,100%{opacity:.25}30%{opacity:1}}
@media(max-width:860px){.msg .bub{max-width:88%}}

.verdict{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px}
.verdict.ok{background:#e3f5ea;color:#13703b}
.verdict.warn{background:#fdf0d2;color:#8a5d00}
.verdict.stop{background:#fbe4e1;color:#c0392b}

/* ============ MOBILE ============ */
/* The diagrams are information-dense by design and cannot usefully reflow to 334px,
   so on small screens they scroll inside a bordered frame WITH an explicit affordance,
   and the "At a glance" section carries the same content in prose. */
.scrollnote{display:none}
@media(max-width:860px){
  .wrap{padding:0 18px}
  .scrollnote{display:flex;align-items:center;gap:7px;font-size:11.5px;color:var(--grey);
    margin:0 0 9px;font-weight:700;letter-spacing:.03em}
  .scrollnote .ar{display:inline-block;animation:nudge 1.7s ease-in-out infinite}
  @keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(5px)}}
  .swwrap,.flowwrap{position:relative;-webkit-overflow-scrolling:touch;
    background-image:linear-gradient(to right,rgba(250,250,247,0),rgba(250,250,247,0)),
      linear-gradient(to left,rgba(9,57,146,.10),rgba(9,57,146,0));
    background-position:left center,right center;background-size:24px 100%,24px 100%;
    background-repeat:no-repeat;background-attachment:local,scroll}
  .mast{padding:38px 0 34px}
  .gate{min-width:calc(50% - 5px);flex:1 1 calc(50% - 5px)}
  .gate b{font-size:17px}
  /* legibility floor — nothing informative below 11px on a phone */
  .sw-head div,.mile,.legend,.cols li,.dec span,.bot-f{font-size:11.5px}
  .sw-head .mo,.sw-lane span{font-size:11px}
  .bar{font-size:11px;height:26px}
  .sw-row{min-height:50px}
  .mile b{font-size:12.5px}
  .rev .cap,.eyebrow{font-size:11px}
  .bltable{font-size:12.5px}
  .bltable th{font-size:10px}
  /* tap targets */
  /* WCAG 2.5.5 — every interactive target at least 44px tall on touch */
  .bot-in input,.bot-in button{min-height:46px}
  .bltable td.id a{display:inline-block;padding:12px 0;min-height:44px;line-height:20px}
  .phead{padding:18px 16px;min-height:56px}
  .navlinks a{display:inline-block;padding:12px 0;min-height:44px;line-height:20px}
  .revtoggle{min-height:44px;padding:11px 16px}
  .scrollnote a{display:inline-block;padding:12px 4px;min-height:44px;line-height:20px}
  .rev audio{height:46px}
  footer a{display:inline-block;padding:12px 2px;min-height:44px;line-height:20px}
  .bot-log{height:340px}
}
@media(max-width:520px){
  .gate{min-width:100%;flex:1 1 100%}
  h1{font-size:28px}
  .spine{grid-template-columns:1fr}
  .sp{border-right:0}
}

/* ---- weekly exec review ---- */
.rev{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center;background:var(--deep);
  color:#fff;border-radius:14px;padding:22px 24px;position:relative;overflow:hidden}
.rev::after{content:"";position:absolute;inset:0;background:radial-gradient(70% 120% at 100% 0%,rgba(228,169,42,.16),transparent 65%);pointer-events:none}
.rev > *{position:relative;z-index:1}
.rev .cap{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--gold-soft);font-weight:800}
.rev h3{font-family:var(--serif);font-size:20px;margin:5px 0 4px;font-weight:700}
.rev p{font-size:13.5px;color:#b9c9ee;max-width:60ch}
.rev audio{width:100%;margin-top:13px;height:40px}
.rev .badge{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:9px;
  padding:13px 16px;text-align:center;min-width:112px}
.rev .badge b{display:block;font-size:26px;color:var(--gold-soft);font-weight:800;line-height:1.1}
.rev .badge span{font-size:10px;letter-spacing:.11em;text-transform:uppercase;color:#a8bce8;font-weight:700}
.rev a{color:#fff}
.revscript{margin-top:12px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:0 20px;
  max-height:0;overflow:hidden;transition:max-height .3s,padding .3s}
.revscript.open{max-height:1600px;padding:20px}
.revscript p{font-size:14.5px;line-height:1.75;color:#26365c;margin-bottom:12px;max-width:74ch}
.revtoggle{margin-top:11px;background:none;border:1px solid var(--line);border-radius:7px;padding:7px 14px;
  font-size:12.5px;font-weight:700;color:var(--navy);cursor:pointer;font-family:var(--sans)}
@media(max-width:860px){.rev{grid-template-columns:1fr}.rev .badge{justify-self:start}}

/* ============ MOBILE-SIMPLE ALTERNATES ============
   The diagrams are desktop artefacts. On a phone they are replaced outright by native HTML
   that says the same thing and needs no sideways scrolling. The SVG stays available behind
   a disclosure for anyone who wants it. */
.msimple{display:none}
.mfull{display:block}
details.mdiagram{border:0;background:none;margin:0}
details.mdiagram > summary{display:none}
@media(max-width:860px){
  .msimple{display:block}
  .mfull{display:none}
  .scrollnote{display:none}
  details.mdiagram{margin-top:14px;border:1px solid var(--line);border-radius:10px;background:#fff}
  details.mdiagram summary{padding:13px 16px;font-size:13px;font-weight:800;color:var(--navy);
    cursor:pointer;min-height:46px;display:flex;align-items:center;list-style:none}
  details.mdiagram summary::-webkit-details-marker{display:none}
  details.mdiagram summary::after{content:"▸";margin-left:auto;color:var(--grey-soft)}
  details.mdiagram[open] summary::after{content:"▾"}
  details.mdiagram[open] .mfull{display:block;padding:0 10px 12px}
  details.mdiagram .swwrap,details.mdiagram .flowwrap{border:0}
}
/* stacked sprint cards */
.msprint{border:1px solid var(--line);border-radius:12px;background:#fff;overflow:hidden}
.msp{padding:14px 16px;border-bottom:1px solid #f0f3f8}
.msp:last-child{border-bottom:0}
.msp.gate{background:#fffdf5}
.msp.wall{background:#fffaf9}
.msp .hd{display:flex;align-items:baseline;gap:9px;margin-bottom:5px}
.msp .hd b{font-size:14px;font-weight:800}
.msp .hd span{font-size:11.5px;color:var(--grey);font-weight:600}
.msp .hd .g{margin-left:auto;font-size:10px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:4px;background:var(--gold);color:var(--deep)}
.msp.wall .hd .g{background:var(--stop);color:#fff}
.msp p{font-size:13.5px;color:#26365c;line-height:1.6}
.mlane{display:inline-block;font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;color:#fff;margin:6px 5px 0 0}
.mlane.mig{background:#6B4FA8} .mlane.asm{background:var(--navy)} .mlane.adm{background:#2E7CC4}
.mlane.par{background:#128C7E} .mlane.cred{background:#B8860B} .mlane.grw{background:#1f9d55}
.mlane.fnd{background:#6b675c} .mlane.hold{background:#cdd5e6;color:var(--grey)}
/* stacked flow steps */
.mstep{border-left:2px solid var(--line);margin-left:11px;padding:0 0 4px 20px;position:relative}
.mstep .dot{position:absolute;left:-8px;top:3px;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--navy)}
.mstep.g .dot{border-color:var(--gold);background:var(--gold)}
.mstep.stop .dot{border-color:var(--stop)}
.mstep h4{font-size:13.5px;font-weight:800;margin-bottom:2px}
.mstep p{font-size:13px;color:var(--grey);margin-bottom:14px;line-height:1.6}
.mstep .fail{display:block;font-size:12.5px;color:#a8402f;margin-top:3px}

/* ---- voice note ---- */
.mic{background:#fff;border:1px solid var(--line);border-radius:8px;width:46px;min-height:46px;
  display:grid;place-items:center;cursor:pointer;font-size:17px;flex:0 0 auto;padding:0;line-height:1}
.mic:hover{border-color:var(--navy)}
.mic.rec{background:var(--stop);border-color:var(--stop);color:#fff;animation:pulse 1.25s infinite}
.mic[disabled]{opacity:.4;cursor:not-allowed}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(192,57,43,.45)}55%{box-shadow:0 0 0 7px rgba(192,57,43,0)}}
.rectime{font-size:12px;font-weight:800;color:var(--stop);align-self:center;min-width:38px;
  font-family:ui-monospace,monospace;display:none}
.rectime.on{display:block}