/* Ascend Use-Case Decision Board — shared styles (Ascend Design System) · EVL-131 */
:root{
  --bg:#FFFFFF; --band:#F2F2F2;
  --fg:#111111; --fg-subtle:#5E5E5E; --fg-faint:#989898;
  --accent:#2D7DD2; --accent-10:#EAF2FB; --accent-80:#1A4E86;
  --gold:#B78428; --gold-10:#FFF5E3; --gold-80:#7A5616;
  --green:#1F7A4B; --green-10:#E8F4EE; --green-80:#145C37;
  --red:#A4262C; --red-10:#FBEBEC; --red-80:#7A1B20;
  --hair:rgba(17,17,17,0.10); --hair-2:rgba(17,17,17,0.18);
  --shadow-1:0 4px 10px rgba(0,0,0,0.05);
  --r-card:12px; --r-btn:8px; --r-pill:999px;
  --sans:"Figtree",system-ui,sans-serif;
  --ui:"Inter",system-ui,sans-serif;
  --serif:"Literata",Georgia,serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}
*{box-sizing:border-box;}
html,body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--ui);
  font-size:13.5px;line-height:1.45;-webkit-font-smoothing:antialiased;}
.wrap{max-width:1200px;margin:0 auto;padding:20px 36px 48px;}
h1,h2,h3{font-family:var(--sans);font-weight:600;margin:0;letter-spacing:-0.01em;}
h1{font-size:26px;line-height:1.12;}
h2{font-size:15px;font-weight:600;margin:0 0 4px;}
h3{font-size:13px;font-weight:600;}
.num{font-variant-numeric:tabular-nums;}
.mono{font-family:var(--mono);}
.eyebrow{font-family:var(--ui);font-size:11px;font-weight:600;letter-spacing:0.10em;
  text-transform:uppercase;color:var(--fg-faint);}
.sub{color:var(--fg-subtle);font-size:13px;max-width:70ch;margin:0;}
.lede{font-size:14.5px;color:var(--fg);max-width:80ch;margin-top:10px;}
.fine{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--fg-subtle);line-height:1.45;}
a{color:var(--accent);text-decoration:none;}

/* nav */
.topnav{display:flex;align-items:center;justify-content:space-between;gap:24px;
  border-bottom:1px solid var(--hair);padding:14px 0;position:sticky;top:0;background:var(--bg);z-index:5;}
.topnav .left{display:flex;align-items:center;gap:22px;}
.logo{height:24px;width:auto;display:block;}
.navlinks{display:flex;gap:4px;}
.navlinks a{font-size:12.5px;font-weight:600;color:var(--fg-subtle);padding:5px 11px;border-radius:var(--r-pill);}
.navlinks a:hover{background:var(--band);color:var(--fg);}
.navlinks a.active{background:var(--accent-10);color:var(--accent-80);}
.topnav .right{display:flex;align-items:center;gap:12px;}
.tag{font-size:10.5px;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--fg-subtle);border:1px solid var(--hair);border-radius:var(--r-pill);padding:3px 10px;white-space:nowrap;}

.pagehead{padding:24px 0 4px;}
section{margin-top:26px;}
.split{display:grid;grid-template-columns:1fr;gap:20px;}
@media(min-width:980px){ .split{grid-template-columns:1fr 1fr;} .split.wide-left{grid-template-columns:1.15fr 0.85fr;} }
.sec-head{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;}
.sec-head .n{font-family:var(--mono);font-size:12px;color:var(--accent);font-weight:500;}

/* board */
.board-frame{display:grid;grid-template-columns:26px 1fr;gap:8px;}
.yaxis{writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;
  font-size:10.5px;font-weight:600;letter-spacing:0.10em;text-transform:uppercase;color:var(--fg-subtle);padding-top:32px;}
.grid{display:grid;grid-template-columns:122px repeat(3,1fr);grid-auto-rows:minmax(92px,auto);gap:6px;}
.ghead{display:flex;flex-direction:column;justify-content:flex-end;padding:6px 8px;}
.ghead .t{font-size:12px;font-weight:700;font-family:var(--sans);}
.ghead .d{font-size:10.5px;color:var(--fg-subtle);line-height:1.3;margin-top:2px;}
.corner{font-size:10px;color:var(--fg-faint);display:flex;align-items:flex-end;line-height:1.25;padding:6px 4px;}
.rhead{display:flex;flex-direction:column;justify-content:center;padding:8px;background:var(--band);border-radius:var(--r-btn);}
.rhead .t{font-size:12px;font-weight:700;font-family:var(--sans);}
.rhead .d{font-size:10px;color:var(--fg-subtle);line-height:1.3;margin-top:3px;}
.cell{border:1px solid var(--hair);border-radius:var(--r-btn);padding:9px 10px;
  display:flex;flex-direction:column;gap:5px;background:var(--bg);min-width:0;}
.cell .uc{font-family:var(--sans);font-size:12px;font-weight:600;line-height:1.2;}
.cell .who{font-size:10.5px;color:var(--fg-subtle);line-height:1.35;}
.cell .note{font-size:10px;color:var(--fg-faint);line-height:1.3;}
.badge{align-self:flex-start;font-size:9.5px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;border-radius:var(--r-pill);padding:2px 8px;}
.cell.lead{border-color:var(--accent);border-width:1.5px;background:var(--accent-10);box-shadow:var(--shadow-1);}
.cell.lead .badge{background:var(--accent);color:#fff;}
.cell.cow{background:var(--green-10);border-color:rgba(31,122,75,0.30);}
.cell.cow .badge{background:#fff;color:var(--green-80);border:1px solid rgba(31,122,75,0.35);}
.cell.watch{background:var(--gold-10);border-color:rgba(183,132,40,0.35);}
.cell.watch .badge{background:#fff;color:var(--gold-80);border:1px solid rgba(183,132,40,0.45);}
.cell.park{background:var(--band);}
.cell.park .badge{background:#fff;color:var(--fg-subtle);border:1px solid var(--hair-2);}
.cell.empty{background:repeating-linear-gradient(135deg,#fafafa,#fafafa 7px,#f3f3f3 7px,#f3f3f3 14px);border-style:dashed;}
.cell.empty .x{font-size:11px;color:var(--fg-faint);font-weight:600;}
.cell.empty .note{color:var(--fg-faint);}
.lock{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;color:var(--gold-80);}
.lock svg{width:11px;height:11px;}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:12px;font-size:11px;color:var(--fg-subtle);}
.key{display:inline-flex;align-items:center;gap:6px;}
.sw{width:11px;height:11px;border-radius:3px;border:1px solid var(--hair-2);}
.reads{flex:1 1 320px;min-width:280px;color:var(--fg);}

.card{border:1px solid var(--hair);border-radius:var(--r-card);padding:20px;}
.block+.block{margin-top:16px;}
.tiers{display:grid;gap:5px;margin-top:7px;}
.tier{display:grid;grid-template-columns:48px 1fr;gap:10px;align-items:start;font-size:12px;}
.tier b{font-family:var(--sans);font-size:11px;font-weight:700;}
.tier .hi{color:var(--accent-80);} .tier .mi{color:var(--gold-80);} .tier .lo{color:var(--fg-subtle);}
.tier span{color:var(--fg-subtle);line-height:1.38;}
.litmus{margin-top:12px;padding:10px 12px;background:var(--band);border-radius:var(--r-btn);
  font-family:var(--serif);font-style:italic;font-size:12.5px;color:var(--fg);line-height:1.4;}

.bcg{display:grid;grid-template-columns:42px 1fr 1fr;grid-template-rows:auto 1fr 1fr;gap:6px;}
.bcg .axlabel{font-size:9.5px;font-weight:600;letter-spacing:0.05em;text-transform:uppercase;color:var(--fg-faint);display:flex;align-items:center;justify-content:center;text-align:center;}
.bcg .axlabel.v{writing-mode:vertical-rl;transform:rotate(180deg);}
.quad{border:1px solid var(--hair);border-radius:var(--r-btn);padding:9px 10px;min-height:74px;}
.quad .qh{font-family:var(--sans);font-size:10.5px;font-weight:700;letter-spacing:0.03em;text-transform:uppercase;}
.quad .qd{font-size:10.5px;color:var(--fg-subtle);line-height:1.34;margin-top:4px;}
.quad.star{background:var(--accent-10);border-color:var(--accent);} .quad.star .qh{color:var(--accent-80);}
.quad.cowq{background:var(--green-10);} .quad.cowq .qh{color:var(--green-80);}
.quad.qmark{background:var(--gold-10);} .quad.qmark .qh{color:var(--gold-80);}
.quad.dog{background:var(--band);} .quad.dog .qh{color:var(--fg-subtle);}

/* bars + liquidity tiers */
.bars{display:grid;gap:7px;margin-top:8px;}
.grouplbl{font-size:10px;font-weight:600;letter-spacing:0.07em;text-transform:uppercase;color:var(--fg-faint);margin:4px 0 1px;}
.bar{display:grid;grid-template-columns:108px 1fr 84px;align-items:center;gap:10px;font-size:12px;}
.bar .lbl{color:var(--fg);}
.bar .track{height:13px;background:var(--band);border-radius:var(--r-pill);overflow:hidden;}
.bar .fill{display:block;height:100%;min-width:3px;border-radius:var(--r-pill);}
.bar .v{text-align:right;color:var(--fg-subtle);font-size:11.5px;}
.supply .fill{background:var(--accent);}
.liq-low .fill{background:var(--fg-faint);}
.liq-mid .fill{background:var(--gold);}
.liq-high .fill{background:transparent;border:1.4px dashed var(--accent);}
.bar .lbl .tt{font-size:8.5px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-radius:var(--r-pill);padding:1px 6px;margin-left:6px;}
.tt.lo{background:var(--band);color:var(--fg-subtle);}
.tt.mi{background:var(--gold-10);color:var(--gold-80);}
.tt.hi{background:var(--accent-10);color:var(--accent-80);}

/* guardrails */
.gline{display:grid;grid-template-columns:16px 1fr;gap:9px;align-items:start;font-size:12px;margin-top:9px;}
.gline svg{width:14px;height:14px;color:var(--fg-subtle);margin-top:1px;}
.gline span{color:var(--fg-subtle);line-height:1.4;}
.gline b{color:var(--fg);font-weight:600;}

.mockstrip{margin-top:18px;background:var(--gold-10);border:1px solid rgba(183,132,40,0.30);border-radius:var(--r-btn);
  padding:7px 12px;font-size:11px;color:var(--gold-80);display:flex;align-items:center;gap:8px;}
.mockstrip svg{width:13px;height:13px;}

/* DS-native decision card */
.decision{border:1px solid var(--hair);border-top:3px solid var(--accent);border-radius:var(--r-card);padding:18px 20px;}
.decision .dhead{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.pill{font-size:10px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;border-radius:var(--r-pill);padding:3px 10px;background:var(--accent);color:#fff;}
.pill.green{background:var(--green-10);color:var(--green-80);border:1px solid rgba(31,122,75,0.35);}
.drow{display:grid;grid-template-columns:96px 1fr;gap:12px;padding:7px 0;border-top:1px solid var(--hair);font-size:13px;}
.drow:first-of-type{border-top:none;}
.drow .k{font-family:var(--ui);font-size:11px;font-weight:700;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-faint);padding-top:1px;}
.drow .vv{color:var(--fg);line-height:1.45;}
.drow .vv b{font-weight:700;}

/* roadmap band */
.roadmap{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:6px;}
@media(max-width:760px){ .roadmap{grid-template-columns:1fr;} }
.gate{border:1px solid var(--hair);border-radius:var(--r-btn);padding:12px;display:flex;flex-direction:column;gap:7px;position:relative;}
.gate .gd{font-family:var(--mono);font-size:11px;color:var(--accent);font-weight:500;}
.gate .gt{font-family:var(--sans);font-weight:700;font-size:13px;}
.gate .gw{font-size:11.5px;color:var(--fg-subtle);line-height:1.4;}
.gate .gcell{font-size:10.5px;font-weight:600;border-radius:var(--r-pill);padding:2px 8px;align-self:flex-start;}
.gate.beta .gcell,.gate.gamma .gcell{background:var(--gold-10);color:var(--gold-80);}
.gate.silver .gcell{background:var(--band);color:var(--fg-subtle);}
.gate.gold{border-color:var(--accent);border-width:1.5px;background:var(--accent-10);}
.gate.gold .gcell{background:var(--accent);color:#fff;}
.gate .wk{font-size:9.5px;color:var(--fg-faint);font-style:italic;}
.keyinsight{margin-top:14px;border:1px solid var(--hair);border-top:3px solid var(--accent);
  border-radius:var(--r-card);padding:14px 16px;font-size:13.5px;line-height:1.5;}
.keyinsight .kihead{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.keyinsight .kihead svg{width:15px;height:15px;color:var(--accent);}
.keyinsight b{font-weight:700;}

/* partnership rail */
.prail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:12px;
  overflow-x:auto;padding-bottom:8px;margin-top:6px;scroll-snap-type:x mandatory;}
.pcard{border:1px solid var(--hair);border-radius:var(--r-btn);padding:13px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;min-width:0;}
.pcard .pn{font-family:var(--sans);font-weight:700;font-size:13px;}
.pcard .pk{font-size:10px;color:var(--fg-faint);text-transform:uppercase;letter-spacing:0.05em;font-weight:600;}
.pcard .punlock{font-size:11.5px;color:var(--fg);line-height:1.4;}
.pcard .punlock b{font-weight:600;}
.pstatus{font-size:10.5px;font-weight:600;border-radius:var(--r-pill);padding:2px 9px;align-self:flex-start;}
.pstatus.closing{background:var(--green-10);color:var(--green-80);}
.pstatus.flight{background:var(--gold-10);color:var(--gold-80);}
.pstatus.blocked{background:var(--red-10);color:var(--red-80);}
.pstatus.tailwind{background:var(--accent-10);color:var(--accent-80);}
.railhint{font-size:10.5px;color:var(--fg-faint);margin-top:4px;}

/* resilience */
.resil{display:grid;gap:9px;margin-top:8px;}
.rif{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;border:1px solid var(--hair);border-radius:var(--r-btn);padding:10px 12px;}
.rif .cond{font-size:12px;color:var(--fg);} .rif .cond b{font-weight:600;}
.rif .arrow{display:none;}
.rif .then{font-size:12px;color:var(--fg-subtle);line-height:1.4;border-left:1px solid var(--hair);padding-left:12px;}
.rif .then b{color:var(--fg);font-weight:600;}

/* mini-board scatter */
.miniwrap{margin-top:6px;}
.mini{display:grid;grid-template-columns:96px repeat(3,1fr);gap:5px;}
.mini .mh{font-size:10px;font-weight:700;color:var(--fg-subtle);text-align:center;padding:4px;font-family:var(--sans);}
.mini .mrh{font-size:10px;font-weight:700;color:var(--fg-subtle);display:flex;align-items:center;padding:4px 6px;background:var(--band);border-radius:6px;font-family:var(--sans);}
.mcell{border:1px solid var(--hair);border-radius:6px;min-height:54px;padding:6px;display:flex;flex-wrap:wrap;gap:4px;align-content:flex-start;}
.mcell.dim{background:repeating-linear-gradient(135deg,#fafafa,#fafafa 6px,#f4f4f4 6px,#f4f4f4 12px);}
.chip{font-size:10px;font-weight:600;border-radius:var(--r-pill);padding:2px 7px;background:var(--accent-10);color:var(--accent-80);height:fit-content;}
.chip.g{background:var(--gold-10);color:var(--gold-80);}
.chip.n{background:var(--band);color:var(--fg-subtle);}

/* disclosure */
.disclosure{border:1px solid var(--hair);border-radius:var(--r-btn);margin-top:14px;}
.disclosure>summary{cursor:pointer;padding:11px 14px;font-family:var(--sans);font-weight:600;font-size:12.5px;
  list-style:none;display:flex;align-items:center;gap:8px;color:var(--fg);}
.disclosure>summary::-webkit-details-marker{display:none;}
.disclosure>summary::before{content:"+";font-family:var(--mono);color:var(--accent);font-weight:700;}
.disclosure[open]>summary::before{content:"\2013";}
.disclosure .dbody{padding:0 14px 14px;}
table.matrix{width:100%;border-collapse:collapse;font-size:11.5px;}
table.matrix th,table.matrix td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--hair);vertical-align:top;line-height:1.35;}
table.matrix th{font-family:var(--ui);font-weight:700;font-size:10px;letter-spacing:0.04em;text-transform:uppercase;color:var(--fg-faint);}
table.matrix td.num{font-variant-numeric:tabular-nums;}

abbr[data-tip]{position:relative;text-decoration:underline dotted;text-decoration-thickness:1px;text-underline-offset:2px;cursor:help;}
abbr[data-tip]:hover::after{
  content:attr(data-tip);position:absolute;left:0;bottom:calc(100% + 7px);z-index:30;
  width:max-content;max-width:250px;
  background:var(--fg);color:#fff;
  font-family:var(--ui);font-style:normal;font-weight:400;font-size:11.5px;line-height:1.45;letter-spacing:0;text-transform:none;text-align:left;
  padding:8px 11px;border-radius:var(--r-btn);box-shadow:var(--shadow-1);white-space:normal;pointer-events:none;}
abbr[data-tip]:hover::before{
  content:"";position:absolute;left:9px;bottom:calc(100% + 2px);z-index:30;
  border:5px solid transparent;border-top-color:var(--fg);pointer-events:none;}
.foot{margin-top:28px;border-top:1px solid var(--hair);padding-top:14px;display:flex;flex-direction:column;gap:11px;}
.foot .frow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;}
.foot .dleft{display:flex;gap:9px;align-items:flex-start;max-width:88ch;}
.foot .dleft svg{width:14px;height:14px;color:var(--fg-faint);margin-top:1px;flex:none;}
.foot .meta{font-size:11px;color:var(--fg-faint);}
.author{display:flex;align-items:center;gap:11px;}
.avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;border:1.5px solid var(--accent);display:block;}
.author .an{font-family:var(--sans);font-weight:600;font-size:13px;color:var(--fg);}
.author .at{font-size:11px;color:var(--fg-subtle);margin-top:1px;}

@media print{
  @page{size:A4 landscape;margin:11mm;}
  .wrap{padding:0;max-width:none;}
  .topnav{position:static;}
  body{font-size:11.5px;} h1{font-size:21px;}
  section{margin-top:16px;break-inside:avoid;}
  .cell.lead,.card,.quad,.gate.gold{box-shadow:none;}
  .prail{overflow:visible;grid-auto-flow:row;grid-template-columns:repeat(3,1fr);}
  .disclosure[open] .dbody{display:block;}
}