/* ===== SCREA · IPN component system — complements signal-os.css ===== */
/* status of content (board-ready / working / internal) */
.pill{display:inline-flex;align-items:center;gap:7px;font:600 11px/1 var(--fb);border-radius:999px;padding:6px 11px;border:1px solid var(--line-strong)}
.pill i{width:7px;height:7px;border-radius:50%;background:currentColor}
.pill.ready{color:var(--ok);background:var(--ok-tint);border-color:transparent}
.pill.working{color:var(--warn);background:var(--warn-tint);border-color:transparent}
.pill.internal{color:var(--sig-pink);background:var(--alert-tint);border-color:transparent}
.pill.review{color:var(--muted);background:var(--surface-2);border-color:transparent}

/* glass client-portal card */
.glass{background:color-mix(in srgb,var(--surface) 78%,transparent);border:1px solid var(--line);border-radius:var(--rlg);padding:22px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.glass .gh{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:14px}
.glass .gh h3{font-size:16px;font-weight:700}

/* KPI strip (8 metrics) */
.kpis8{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{border:1px solid var(--line);border-radius:var(--rlg);background:var(--surface);padding:16px 18px;position:relative;overflow:hidden}
.kpi:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,var(--accent))}
.kpi b{font-family:var(--fh);font-weight:700;font-size:23px;letter-spacing:-.03em;display:block}
.kpi span{font-size:11.5px;color:var(--muted);margin-top:6px;display:block;line-height:1.3}
@media(max-width:780px){.kpis8{grid-template-columns:repeat(2,1fr)}}
@media(max-width:420px){.kpis8{grid-template-columns:1fr 1fr}}

/* market board — push / hold with sell-through */
.mboard{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.mcol .ch{display:flex;align-items:center;gap:9px;font:600 12px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;margin-bottom:11px}
.mcol.push .ch{color:var(--sig-pink)}.mcol.hold .ch{color:var(--muted)}
.mcards{display:grid;gap:10px}
.mcard{border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface);padding:14px 16px}
.mcard .mt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.mcard .mn{font-family:var(--fh);font-weight:700;font-size:16px}
.mcard .md{font-family:var(--fm);font-size:12px;color:var(--accent);font-weight:600}
.mcard .st{display:flex;align-items:center;gap:9px;margin-top:9px}
.mcard .stbar{flex:1;height:7px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.mcard .stbar i{display:block;height:100%;border-radius:5px;background:var(--sc,var(--accent))}
.mcard .stv{font-family:var(--fm);font-size:12px;font-weight:600;min-width:46px;text-align:right}
.mcard .mnote{font-size:12px;color:var(--muted);margin-top:9px}
.mcard.push{border-left:3px solid var(--sig-pink)}
@media(max-width:760px){.mboard{grid-template-columns:1fr}}

/* signal health strip */
.sigh{border:1px solid var(--line);border-radius:var(--rlg);overflow:hidden;background:var(--surface)}
.sigrow{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line)}
.sigrow:last-child{border-bottom:0}
.sigrow .sk{font-family:var(--fm);font-size:12.5px;font-weight:600;min-width:210px}
.sigrow .sv{font-size:13px;color:var(--muted);flex:1}
@media(max-width:620px){.sigrow{flex-wrap:wrap;gap:6px}.sigrow .sk{min-width:0}}

/* budget direction */
.budgetdir{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.bcell{border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface);padding:16px}
.bcell b{font-family:var(--fh);font-weight:700;font-size:22px;letter-spacing:-.03em;display:block}
.bcell span{font-size:11.5px;color:var(--muted);margin-top:5px;display:block}
.bcell.env{grid-column:1/-1;background:var(--accent-tint);border-color:transparent}
.bcell.env b{font-size:15px;color:var(--accent)}
@media(max-width:620px){.budgetdir{grid-template-columns:1fr}}

/* decision-needed card */
.decneed{border:1px solid var(--line-strong);border-left:4px solid var(--accent);border-radius:var(--rlg);background:var(--surface);padding:22px}
.decneed h3{font-size:18px;font-weight:700}
.decneed ul{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px}
.decneed li{position:relative;padding-left:22px;font-size:13.5px;color:var(--ink)}
.decneed li:before{content:"";position:absolute;left:0;top:5px;width:13px;height:13px;border-radius:4px;border:1.5px solid var(--line-strong)}
@media(max-width:620px){.decneed ul{grid-template-columns:1fr}}

/* working documents */
.docs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.doc{display:flex;align-items:center;justify-content:space-between;gap:12px;text-decoration:none;border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface);padding:16px 18px;transition:border-color .15s}
.doc:hover{border-color:var(--accent)}
.doc{flex-wrap:wrap}
.doc>span:first-child{min-width:0;flex:1}
.doc .dt{display:block;font-family:var(--fh);font-weight:700;font-size:14px;color:var(--ink)}
.doc .dd{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.doc .da{font-family:var(--fm);font-size:11px;font-weight:600;color:var(--accent);white-space:nowrap}
@media(max-width:760px){.docs{grid-template-columns:1fr}}

/* source-status footer */
.srcstat{border-top:1px solid var(--line);margin-top:14px;padding:18px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.srcstat .s{font-size:12px}
.srcstat .s .sn{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);display:flex;align-items:center;gap:6px}
.srcstat .s .sn i{width:7px;height:7px;border-radius:50%;background:var(--ok)}
.srcstat .s.warn .sn i{background:var(--warn)}
.srcstat .s .sv{color:var(--muted);margin-top:4px}
@media(max-width:760px){.srcstat{grid-template-columns:1fr 1fr}}

/* board brief — verdict block */
.verdict{position:relative;overflow:hidden;background:var(--navy-deep);color:#fff;border-radius:var(--rxl);padding:34px 32px}
.verdict:before{content:"";position:absolute;inset:0;background:var(--hero-grad);pointer-events:none}
.verdict>*{position:relative}
.verdict .vl{font-family:var(--fm);font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--sig-aqua)}
.verdict h2{font-size:clamp(23px,3.2vw,34px);font-weight:700;line-height:1.12;margin:14px 0 0;max-width:24ch;color:#fff}
.verdict p{font-size:15px;color:rgba(255,255,255,.82);margin:14px 0 0;max-width:60ch}

/* working / fixing matrix */
.wf{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.wfcol{border:1px solid var(--line);border-radius:var(--rlg);background:var(--surface);padding:20px}
.wfcol .wh{display:flex;align-items:center;gap:9px;font-family:var(--fh);font-weight:700;font-size:15px;margin-bottom:12px}
.wfcol.win .wh{color:var(--ok)}.wfcol.fix .wh{color:var(--warn)}
.wfcol ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.wfcol li{position:relative;padding-left:20px;font-size:13.5px;color:var(--muted)}
.wfcol.win li:before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.wfcol.fix li:before{content:"!";position:absolute;left:2px;color:var(--warn);font-weight:700}
@media(max-width:680px){.wf{grid-template-columns:1fr}}

/* shared: section sublabel + appendix drawer */
.subnote{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--soft);margin-top:8px}
details.drawer{border:1px solid var(--line);border-radius:var(--rlg);background:var(--surface);overflow:hidden;margin-top:12px}
details.drawer summary{cursor:pointer;list-style:none;padding:15px 18px;font-weight:700;font-size:14px;display:flex;align-items:center;gap:9px}
details.drawer summary::-webkit-details-marker{display:none}
details.drawer summary:before{content:"+";font-family:var(--fm);color:var(--accent);font-size:16px}
details.drawer[open] summary:before{content:"–"}
details.drawer .dc{padding:0 18px 18px}

/* ===== v2 — Toronto benchmark model components ===== */
/* completed-market benchmark panel */
.bench{position:relative;border:1px solid var(--line);border-left:4px solid var(--sig-aqua);border-radius:var(--rlg);background:var(--surface);padding:22px;box-shadow:var(--shadow)}
.bench .bh{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.bench .bt{font-family:var(--fh);font-weight:700;font-size:17px}
.bench .bsub{font-family:var(--fm);font-size:12px;color:var(--accent);font-weight:600}
.benchg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.benchg .bc{border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface-2);padding:13px 15px}
.benchg .bc b{font-family:var(--fh);font-weight:700;font-size:20px;letter-spacing:-.02em;display:block}
.benchg .bc.hl b{color:var(--sig-aqua)}
.benchg .bc span{font-size:11px;color:var(--muted);margin-top:5px;display:block;line-height:1.3}
@media(max-width:680px){.benchg{grid-template-columns:1fr 1fr}}

/* 3-tier rollout board */
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.tcol{border:1px solid var(--line);border-radius:var(--rlg);background:var(--surface);padding:16px}
.tcol .th{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--fm);letter-spacing:.1em;text-transform:uppercase;margin-bottom:12px}
.tcol.t1 .th{color:var(--sig-pink)}.tcol.t2 .th{color:var(--sig-yellow)}.tcol.t3 .th{color:var(--muted)}
.tcol .tcards{display:grid;gap:10px}
.tcity{border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface-2);padding:13px 15px}
.tcol.t1 .tcity{border-left:3px solid var(--sig-pink)}
.tcity .tt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.tcity .tn{font-family:var(--fh);font-weight:700;font-size:15px}
.tcity .tdate{font-family:var(--fm);font-size:11.5px;color:var(--accent);font-weight:600}
.tcity .tnote{font-size:12px;color:var(--muted);margin-top:7px;line-height:1.4}
@media(max-width:820px){.tiers{grid-template-columns:1fr}}

/* service fee summary */
.fee{border:1px solid var(--line-strong);border-radius:var(--rlg);background:var(--surface);overflow:hidden}
.fee .fhead{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:20px 22px;background:var(--accent-tint);border-bottom:1px solid var(--line)}
.fee .forig{font-family:var(--fh);font-weight:700;font-size:20px;color:var(--muted);text-decoration:line-through;text-decoration-thickness:2px}
.fee .fto{color:var(--accent);font-weight:700}
.fee .frev{font-family:var(--fh);font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--accent)}
.fee .fsave{margin-left:auto;font:600 12px/1 var(--fm);color:var(--ok);background:var(--ok-tint);border-radius:999px;padding:7px 12px}
.fee .frows{display:grid;grid-template-columns:1fr 1fr}
.fee .fr{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 22px;border-top:1px solid var(--line);font-size:13px}
.fee .fr .fk{color:var(--muted)}.fee .fr .fv{font-weight:600;color:var(--ink)}
@media(min-width:621px){.fee .fr:nth-child(odd){border-right:1px solid var(--line)}}
@media(max-width:620px){.fee .frows{grid-template-columns:1fr}}

/* simple data table */
.ptwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--rlg)}
.ptable{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.ptable th,.ptable td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
.ptable thead th{font:600 10.5px/1 var(--fm);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);background:var(--surface-2)}
.ptable tbody tr:last-child td{border-bottom:0}
.ptable td:first-child{font-weight:600;color:var(--ink)}
.ptable td{color:var(--muted)}
.ptable tr.rec td{background:var(--accent-tint)}
.ptable tr.rec td:first-child{color:var(--accent)}

/* budget brackets */
.brk{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.brk .bk2{border:1px solid var(--line);border-radius:var(--rmd);background:var(--surface);padding:16px}
.brk .bk2.rec{border-color:transparent;background:var(--accent-tint)}
.brk .bk2 .bkt{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.brk .bk2 .bkn{font-family:var(--fh);font-weight:700;font-size:15px}
.brk .bk2 .bkv{font-family:var(--fh);font-weight:800;font-size:18px;color:var(--accent)}
.brk .bk2 p{font-size:12px;color:var(--muted);margin-top:8px}
@media(max-width:680px){.brk{grid-template-columns:1fr}}