/* components.css — The components of §5.5, carried whole from the prototype.
   
   Two of these have already cost time and are called out where they are defined:
     · `.overlay[hidden]` is `display:none!important` — the overlay's own display:flex
       otherwise beats the hidden attribute and floats an empty box over every screen (v5).
     · a dense row is a CSS grid and its name cell a <button> with `all: unset` — a bare
       button inherits the browser's chrome, which made the name box grey and clipped. */

.bar{display:flex;align-items:center;gap:12px 20px;flex-wrap:wrap;padding:14px 0;border-bottom:1px solid var(--line);margin-bottom:24px}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px}
.tag{font-size:11px;font-weight:500;padding:1px 9px;border-radius:999px;background:var(--warn-tint);color:var(--warn)}
nav{display:flex;gap:4px;margin-inline-start:auto;flex-wrap:wrap}
.navb{font-size:14px;padding:6px 14px;border-radius:8px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer}
.navb[aria-current="page"]{background:var(--surface);border-color:var(--line);color:var(--ink);font-weight:500}
.fresh{font-size:12px;color:var(--faint);display:flex;align-items:center;gap:6px}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ok)}
.pagehead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.slots{font-size:13px;color:var(--muted);background:var(--sunk);border-radius:8px;padding:4px 10px;font-variant-numeric:tabular-nums}
.slots.over{background:var(--warn-tint);color:var(--warn)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.fcard{text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:8px;cursor:pointer;color:var(--ink)}
.fcard:hover{border-color:var(--line-strong)}
.fc-top,.fc-foot{display:flex;justify-content:space-between;align-items:center;gap:8px}
.fc-name{font-weight:700;font-size:15px}
.meter{display:block;height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;min-width:120px}
.meter span{display:block;height:100%;background:var(--accent)}
.meter.over span{background:var(--warn)}
.pill{font-size:12px;font-weight:500;border-radius:999px;padding:1px 10px;white-space:nowrap}
.pill.live{background:var(--ok-tint);color:var(--ok)}
.pill.draft{background:var(--warn-tint);color:var(--warn)}
.badge{font-size:12px;color:var(--muted);background:var(--sunk);border-radius:6px;padding:1px 8px}
.chipnote{font-size:12px;font-weight:500;border-radius:6px;padding:2px 8px;width:fit-content}
.chipnote.warn{background:var(--warn-tint);color:var(--warn)}
.chipnote.bad{background:var(--danger-tint);color:var(--danger)}
/* Phase 12 — `capHTML`'s own quiet note (line 1541): the prototype wrote it as an inline
   style; a colour belongs in the stylesheet as a token, never in a template (§5.2). */
.chipnote.quiet{background:var(--sunk);color:var(--muted)}
.titleedit{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.nameinput{font-size:22px;font-weight:700;border:1px solid transparent;background:transparent;color:var(--ink);border-radius:8px;padding:2px 8px;margin-inline-start:-8px;width:min(420px,70vw)}
.nameinput:hover{border-color:var(--line)}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);margin:4px 0 20px}
.tab{font-size:14px;padding:8px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--muted);cursor:pointer;margin-bottom:-1px}
.tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--accent);font-weight:500}
.modebar{display:flex;justify-content:flex-end;margin-bottom:14px}
.seg{display:inline-flex;flex-wrap:wrap;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:var(--surface);width:fit-content}
.seg.wrap{margin-bottom:14px}
.seg button,.seg a{font-size:13px;padding:6px 14px;border:0;background:transparent;color:var(--muted);cursor:pointer;text-decoration:none;display:inline-flex;align-items:center}
.seg button[aria-pressed="true"],.seg a[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg button:disabled{opacity:.4;cursor:not-allowed}
/* v8 phase 13: a segment whose values are places to go rather than things to do — §4.4's وضعیت
   and نما controls change nothing, so each value is a real link (ADR 0021 condition 3). */
.seg a:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
/* An arrow with nowhere to go: the same shape, visibly out of reach, and not a link that lies. */
.btn.dis{opacity:.4;cursor:not-allowed}
.block{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:grid;gap:10px;margin-bottom:12px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{font-size:14px;display:inline-flex;align-items:center;gap:8px;padding:5px 12px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.chip .n,.btn .n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;margin-inline-start:6px}
.chip[aria-pressed="true"]{background:var(--accent-tint);border-color:var(--accent);color:var(--accent)}
.chip[aria-pressed="true"] .n{color:var(--accent)}
.groups{display:grid;gap:10px;justify-items:start}
.group{width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px;display:grid;gap:10px}
.group-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.or{width:100%;display:flex;align-items:center;gap:10px;font-size:13px;color:var(--faint)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}
.row{display:grid;grid-template-columns:minmax(130px,1.1fr) minmax(110px,.9fr) minmax(0,1.6fr) auto auto;gap:8px;align-items:center}
.impactbar{position:sticky;bottom:12px;margin-top:18px;background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;padding:12px 16px;display:flex;align-items:center;gap:12px 26px;flex-wrap:wrap}
.ib{display:grid;gap:2px}
.ib .big{font-size:24px}
.ibm{min-width:150px}
.diff{display:flex;gap:12px;font-size:13px;font-variant-numeric:tabular-nums;font-weight:500}
.diff .in{color:var(--ok)}
.diff .out{color:var(--danger)}
.settings-side{display:grid;gap:10px;background:var(--sunk);border-radius:12px;padding:14px}
.form{display:grid;gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.field{display:grid;gap:4px}
.srclist{display:grid;gap:8px}
.srccard{text-align:start;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:grid;gap:2px;cursor:pointer;color:var(--ink)}
.srccard[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-tint)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px;display:grid;gap:12px}
.panel .form{border:0;padding:0}
.panelhead{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.tbl{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{font-weight:500;color:var(--muted);text-align:start;padding:6px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:8px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
tr.pick{cursor:pointer}
tr.pick:hover td{background:var(--sunk)}
tr.sel td{background:var(--accent-tint)}
.hrow{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid var(--line)}
.hrow:last-child{border-bottom:0}
.hmain{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hv{font-weight:700}
.overlay{position:fixed;inset:0;background:var(--shade);display:flex;align-items:center;justify-content:center;padding:20px;z-index:20}
.overlay[hidden],.toast[hidden]{display:none!important}
.dialog{background:var(--surface);color:var(--ink);border-radius:14px;width:100%;max-width:540px;max-height:86vh;overflow:auto;padding:20px 22px;display:grid;gap:16px}
.dialog.wide{max-width:880px}
.dhead{display:flex;justify-content:space-between;align-items:center;gap:10px}
.plist{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px;margin-top:6px}
.pitem{display:flex;justify-content:space-between;align-items:center;gap:8px;text-align:start;padding:8px 10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer}
.pitem:hover{border-color:var(--accent)}
.pitem:disabled{opacity:.55;cursor:not-allowed;border-color:var(--line)}
.check{display:grid;gap:6px;align-content:start}
.verdict{font-weight:500}
.yes{color:var(--ok);font-weight:700}
.no{color:var(--danger);font-weight:700}
.crow{display:grid;grid-template-columns:20px 1fr auto;gap:8px;align-items:center;font-size:13px;padding:6px 8px;border-radius:8px;background:var(--sunk)}
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{border-radius:10px;padding:12px;display:grid;gap:2px;font-size:13px;align-content:start}
.tile.in{background:var(--ok-tint);color:var(--ok)}
.tile.out{background:var(--danger-tint);color:var(--danger)}
.tile.note{background:var(--warn-tint);color:var(--warn)}
.tile ul{margin:6px 0 0;padding:0;padding-inline-start:16px;color:var(--ink);font-size:12px;display:grid;gap:2px}
.ack{display:flex;align-items:center;gap:8px;font-size:14px;background:var(--warn-tint);color:var(--warn);border-radius:8px;padding:8px 10px;cursor:pointer}
pre{margin:0;font-family:var(--mono);font-size:12px;line-height:1.6;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;max-height:60vh;color:var(--ink)}
.toast{position:fixed;bottom:22px;background:var(--ink);color:var(--ground);font-size:14px;padding:8px 16px;border-radius:10px;z-index:30}
.formrow{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.formrow input[type=text]{width:auto;flex:1;min-width:160px}
.fchip{display:inline-flex;align-items:center;gap:4px;background:var(--accent-tint);color:var(--accent);border-radius:999px;padding:3px 6px 3px 12px;font-size:14px}
.fchip button{border:0;background:transparent;color:inherit;cursor:pointer;font-size:15px;line-height:1;padding:0 4px}
.check2{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.srcchecks{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:6px}
.srcchecks label{display:flex;gap:8px;align-items:center;font-size:14px;background:var(--sunk);border-radius:8px;padding:6px 10px;cursor:pointer}
.statrow{display:flex;gap:22px;flex-wrap:wrap}
.stat{display:grid;gap:0}
.bars{display:grid;gap:8px}
.barline{display:grid;grid-template-columns:minmax(0,1fr) 44px;gap:8px;align-items:end;font-size:13px}
.hbar{display:block;height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;margin-top:4px}
.hbar span{display:block;height:100%;background:var(--accent)}
.testres{font-size:13px;border-radius:8px;padding:8px 10px;background:var(--sunk);color:var(--muted)}
.testres.ok{background:var(--ok-tint);color:var(--ok)}
.progress{display:inline-block;height:6px;border-radius:999px;background:var(--sunk);overflow:hidden;width:80px}
.progress span{display:block;height:100%;background:var(--warn)}
.defgrid{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 14px;font-size:14px;margin:0}
.defgrid dt{color:var(--muted)}
.defgrid dd{margin:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* v4: folder list, folder page tabs, Telegram preview */
.fcard{cursor:default}
.fcard.drag,.frow.drag{opacity:.45}
.fcard.over,.frow.over{border-color:var(--accent);box-shadow:inset 0 0 0 2px var(--accent)}
.fcard.paused{background:var(--sunk)}
.fcard.own{background:transparent;border-style:dashed;color:var(--muted)}
.fopen{all:unset;display:grid;gap:8px;cursor:pointer;text-align:start}
.fopen:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:6px}
.fctl{display:flex;align-items:center;justify-content:space-between;gap:6px;border-top:1px solid var(--line);padding-top:8px}
.handle{cursor:grab;color:var(--faint);font-size:14px;user-select:none;display:flex;align-items:center;gap:6px}
.rank{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums}
.fc-id{display:flex;align-items:center;gap:8px;min-width:0}
.fc-icon{font-size:18px;line-height:1}
.fc-tg{font-size:12px;color:var(--faint)}
.pill.off{background:var(--sunk);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}
.badges{display:flex;flex-wrap:wrap;gap:4px}
.orderline{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--faint);margin:22px 0 10px}
.orderline::after{content:"";flex:1;height:1px;background:var(--line)}
.slotwrap{display:grid;gap:4px;justify-items:start}
.slotbar{display:flex;height:8px;border-radius:999px;overflow:hidden;background:var(--sunk);width:200px}
/* §4.4 — «a control, not an ornament»: the bar is a link to where a slot is freed. */
a.slotbar{cursor:pointer}
a.slotbar:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.slotbar .s{background:var(--accent)}
.slotbar .o{background:var(--line-strong)}
.slotkey{display:flex;gap:12px;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.menu{position:relative}
.menu summary{list-style:none}
.menu summary::-webkit-details-marker{display:none}
/* ds-allow: D1 — a drop shadow, not a colour. §5.2 has no shadow token and inventing one here
   would be re-deriving the prototype rather than carrying it. */
.menu-pop{position:absolute;inset-inline-end:0;top:calc(100% + 6px);background:var(--surface);border:1px solid var(--line-strong);border-radius:10px;padding:6px;display:grid;min-width:200px;z-index:10;box-shadow:0 10px 30px rgba(0,0,0,.14)}
.menu-pop button{all:unset;padding:8px 10px;border-radius:6px;cursor:pointer;font-size:14px;color:var(--ink)}
.menu-pop button:hover,.menu-pop button:focus-visible{background:var(--sunk)}
.menu-pop .danger{color:var(--danger)}
.switch{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:14px}
.switch input{appearance:none;-webkit-appearance:none;width:38px;height:22px;border-radius:999px;background:var(--line-strong);position:relative;flex:none;margin:2px 0 0;cursor:pointer;transition:background .15s}
.switch input::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:16px;height:16px;border-radius:50%;background:var(--surface);transition:inset-inline-start .15s}
.switch input:checked{background:var(--accent)}
.switch input:checked::after{inset-inline-start:19px}
.switch .txt{display:grid;gap:2px}
.emojis{display:flex;flex-wrap:wrap;gap:6px}
.emo{width:38px;height:38px;border-radius:9px;border:1px solid var(--line);background:var(--surface);font-size:18px;cursor:pointer;line-height:1;padding:0}
.emo[aria-pressed="true"]{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-tint)}
.swatches{display:flex;flex-wrap:wrap;gap:10px}
.sw{width:28px;height:28px;border-radius:50%;border:3px solid var(--surface);box-shadow:0 0 0 1px var(--line-strong);cursor:pointer;padding:0}
.sw[aria-pressed="true"]{box-shadow:0 0 0 2px var(--ink)}
.sw.none{background:repeating-linear-gradient(45deg,var(--sunk) 0 4px,var(--line-strong) 4px 6px)}
/* Telegram's seven folder colour tags (§3.6), by Telegram's own index — the tokens are Telegram's, the same in both themes. */
.sw.tgc-0{background:var(--tgc-0)}.sw.tgc-1{background:var(--tgc-1)}.sw.tgc-2{background:var(--tgc-2)}.sw.tgc-3{background:var(--tgc-3)}.sw.tgc-4{background:var(--tgc-4)}.sw.tgc-5{background:var(--tgc-5)}.sw.tgc-6{background:var(--tgc-6)}
.instant{font-size:11px;color:var(--ok);background:var(--ok-tint);border-radius:6px;padding:0 6px;margin-inline-start:6px;font-weight:500}
.warnbox{background:var(--warn-tint);color:var(--warn);border-radius:10px;padding:10px 12px;font-size:13px;display:grid;gap:8px}
.warnbox .btn{font-size:13px;padding:4px 10px}
.okbox{background:var(--ok-tint);color:var(--ok);border-radius:10px;padding:10px 12px;font-size:13px}
.ladder{display:grid;gap:4px;margin:0;padding:0;list-style:none;font-size:13px}
.ladder li{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:8px;align-items:center;padding:6px 8px;border-radius:8px}
.ladder li.me{background:var(--accent-tint);color:var(--accent);font-weight:500}
.ladder .n{color:var(--faint);font-variant-numeric:tabular-nums;font-size:12px}
.tg{border:1px solid var(--line-strong);border-radius:16px;overflow:hidden;background:var(--tg-bg);color:var(--tg-ink);font-size:13px;line-height:1.5}
.tg-tabs{display:flex;gap:2px;overflow-x:auto;background:var(--tg-head);padding:0 6px;scrollbar-width:none}
.tg-tab{white-space:nowrap;padding:9px 8px 7px;border-bottom:2px solid transparent;color:var(--tg-sub);font-size:12px;display:flex;gap:4px;align-items:center}
.tg-tab.on{color:var(--tg-accent);border-bottom-color:var(--tg-accent);font-weight:500}
.tg-tab.own{opacity:.55}
.tg-dotc{width:7px;height:7px;border-radius:50%;flex:none}
.tg-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--tg-line)}
/* ds-allow: D1 — the white initial on a Telegram avatar. §5.2 keeps the avatar colours
   Telegram's own, darkened until this white passes AA: «fidelity to Telegram stops where
   legibility starts». The white is the measured half of that pair, not decoration. */
.tg-av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:#FFFFFF;font-weight:700;font-size:14px}
.tg-name{font-weight:500}
.tg-sub{color:var(--tg-sub);font-size:12px}
.tg-meta{display:grid;justify-items:end;gap:2px;color:var(--tg-sub);font-size:11px;font-variant-numeric:tabular-nums}
.tg-note{padding:8px 12px;color:var(--tg-sub);font-size:12px}
.vrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--line)}
.vrow:last-child{border-bottom:0}
.kinds{display:flex;gap:4px;flex-wrap:wrap}
.kind{font-size:11px;border-radius:6px;padding:0 7px;background:var(--sunk);color:var(--muted)}
.look{display:inline-flex;align-items:center;gap:6px}
.chg{display:grid;gap:4px}
.picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:14px;min-height:340px}
.pk-list{display:grid;align-content:start;gap:1px;max-height:54vh;overflow:auto;padding-inline-end:4px}
.pk-cat{font-size:12px;font-weight:500;color:var(--faint);padding:10px 10px 3px;letter-spacing:.02em}
.pk-item{all:unset;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;cursor:pointer;font-size:14px;color:var(--ink)}
.pk-item:hover{background:var(--sunk)}
.pk-item:focus-visible{outline:2px solid var(--accent)}
.pk-item.on{background:var(--accent-tint);color:var(--accent);font-weight:500}
.pk-item[aria-disabled="true"]{opacity:.5}
.pk-item .n{font-size:12px;color:var(--faint);font-variant-numeric:tabular-nums;white-space:nowrap}
.pk-detail{background:var(--sunk);border-radius:12px;padding:14px 16px;display:grid;gap:10px;align-content:start}
.pk-title{font-weight:700;font-size:16px}
.srow{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto;gap:8px;align-items:center;padding:6px 0;border-top:1px dashed var(--line)}
.sent{display:flex;flex-wrap:wrap;align-items:center;gap:4px 6px;font-size:15px;line-height:2}
.sent .subj{font-weight:500}
select.chipsel{width:auto;font-size:14px;padding-block:1px;padding-inline:10px 26px;border-radius:999px;background-color:var(--accent-tint);border-color:transparent;color:var(--accent);font-weight:500;cursor:pointer}
input.chipnum{width:74px;font-size:14px;padding:1px 8px;border-radius:999px;background:var(--accent-tint);border-color:transparent;color:var(--accent);font-weight:500;text-align:center}
.chipmulti{display:inline-flex;flex-wrap:wrap;gap:4px}
.summary{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;gap:8px;margin-bottom:12px}
.purpose textarea{min-height:54px}
.checkbox{display:grid;gap:6px;border-top:1px solid var(--line);padding-top:10px}
.checkbox .crow{grid-template-columns:20px minmax(0,1fr) 0}
.aibar{background:var(--sunk);border-radius:12px;padding:10px 14px;display:grid;gap:2px;margin:0 0 12px;justify-items:start}
.aibar p{font-size:14px;line-height:1.9;max-width:82ch}
.gsearch{max-width:320px}
.gcat{margin-bottom:14px}
.bands{display:grid;gap:6px}
.bandrow{display:grid;grid-template-columns:100px auto 80px 70px minmax(0,1fr);gap:8px;align-items:center;font-size:14px}
.bname{font-weight:500}
/* ---- v6 ---- */
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin:0 0 12px}
.toolbar input[type=search]{width:min(280px,45vw);flex:0 0 auto}
.titleedit .nameinput{width:min(420px,52vw)}
.seg.small button{padding:5px 10px;font-size:12px}
.atable{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.arow{display:grid;grid-template-columns:minmax(0,1.6fr) .7fr .9fr .9fr 1fr auto auto;gap:14px;align-items:center;background:var(--surface);padding:12px 16px}
.arow>span{min-width:0}
.arow .num{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.arow.head{background:var(--sunk);font-size:12px;color:var(--muted)}
.arow .nm{font-weight:700;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.arow .hnd{color:var(--muted);font-size:12px;font-weight:400}
.flist{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:10px}
.frow{display:grid;grid-template-columns:auto minmax(0,2.7fr) .45fr .95fr .7fr .8fr auto;gap:12px;align-items:center;background:var(--surface);padding:10px 14px}
.frow.head{background:var(--sunk);font-size:12px;color:var(--muted)}
.frow .fnform{min-width:0;display:flex;margin:0}
.frow .fn{all:unset;display:flex;gap:8px;align-items:baseline;min-width:0;width:100%;cursor:pointer;text-align:start}
.frow .fn:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
.frow .fn:hover b{text-decoration:underline;text-underline-offset:3px}
.frow .fn .ic{font-size:15px;line-height:1}
.frow .fn b{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.frow .fn .tg{color:var(--muted);font-size:12px;white-space:nowrap;flex:0 1 auto;overflow:hidden;text-overflow:ellipsis}
.frow .cnt{font-size:19px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
.frow .mv{display:flex;gap:4px}
.frow .mv button{min-width:30px;padding:3px 6px;font-size:14px;line-height:1.2}
.frow .hd{cursor:grab;color:var(--muted)}
.frow.dim{opacity:.55}
.nowbox{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-bottom:14px}
.statcell{background:var(--surface);padding:13px 15px;display:grid;gap:3px;align-content:start}
.statcell .k{font-size:12px;color:var(--muted);font-weight:500;line-height:1.5}
.statcell .v{font-size:25px;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2;display:flex;align-items:center;gap:7px}
.statcell .v.sm{font-size:16px;font-weight:700}
.statcell .meter{margin-top:4px}
.secthead{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;flex-wrap:wrap;margin:24px 0 12px;padding-top:18px;border-top:1px solid var(--line)}
.secthead h2{margin:0}
.steps{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.stepc{font-size:12px;padding:5px 10px;border-radius:999px;background:var(--sunk);color:var(--muted);border:1px solid var(--line)}
.stepc.on{background:var(--accent);color:var(--accent-ink);border-color:transparent}
.stepc.done{color:var(--ink)}
.mapgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.maprow{display:grid;grid-template-columns:auto 1.1fr 1.2fr 1.3fr 1fr;gap:10px;align-items:center;background:var(--surface);padding:8px 12px}
.maprow.head{background:var(--sunk);font-size:12px;color:var(--muted)}
.maprow code{font-size:12px;background:var(--sunk);padding:2px 6px;border-radius:6px}
/* A name a machine gave, inside a right-to-left line: it reads left to right and stays in the
   panel's own type scale rather than shouting. See parts/boxes.html::ident. */
.ident{unicode-bidi:isolate;font-variant-numeric:tabular-nums}
.sgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.srow2{display:grid;gap:10px;align-items:center;background:var(--surface);padding:9px 12px}
.srow2.head{background:var(--sunk);font-size:12px;color:var(--muted)}
/* §1.8's three row shapes. The prototype writes each one's columns inline
   (`style="grid-template-columns:…"`, lines 2201/2217/2222), which a template here may not — so
   they are named here instead and the markup is otherwise the prototype's. `.pick` is a ticked
   row with one note, `.tgt` a target with §1.8's three figures beside its box, and `.landed` a
   report line. */
.srow2.pick{grid-template-columns:auto 1fr auto}
.srow2.tgt{grid-template-columns:auto 1fr auto auto auto}
.srow2.landed{grid-template-columns:1fr auto}
/* ds-allow: D1 — the prototype's own two health dots. Carried whole per
   ARCHITECTURE.md → Frontend source; they are backgrounds of a 7px dot beside a word (§5.8:
   status is never colour alone), so no text sits on them. */
.dot.warn{background:#E5A64E}
.dot.bad{background:#E17076}
.evlist{display:grid;gap:9px;margin:0;padding:0;list-style:none}
.evlist li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:baseline;font-size:13px;line-height:1.7;padding-bottom:9px;border-bottom:1px solid var(--line)}
.evlist li:last-child{padding-bottom:0;border-bottom:0}
.evlist .when{color:var(--faint);white-space:nowrap;font-size:12px}
/* ---- v7: detectors, collection queue ---- */
.toolbar input[type=text]{width:min(320px,45vw);flex:0 0 auto}
.toolbar select{width:auto;flex:0 0 auto;max-width:46vw}
td.cnum,span.cnum{font-variant-numeric:tabular-nums;font-weight:600}
tr.dim td{opacity:.55}
.spark{display:inline-flex;align-items:flex-end;gap:2px;height:20px;width:58px}
.spark span{flex:1;background:var(--accent);border-radius:1px;opacity:.75;min-height:2px}
.qrow{display:grid;grid-template-columns:minmax(0,1fr) 90px 48px auto auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.qrow:first-child{border-top:0}
.qrow.on{background:var(--sunk);margin:0 -14px;padding:10px 14px;border-radius:8px}
.qrow .progress{width:100%}
.depthw{display:inline-flex;align-items:center;gap:8px;flex-basis:100%;margin-top:6px;font-size:12px;color:var(--warn);background:var(--sunk);padding:5px 9px;border-radius:7px}
.stepc.dim{opacity:.4}
.tbl .btn{white-space:nowrap}

/* Ported from a <button> to a real <a href> wherever the action is a navigation — ADR 0021
   condition 3 keeps every action a real form or link, and the prototype's nav was a row of
   buttons that moved a JavaScript variable. An anchor arrives underlined and baseline-aligned
   where a button did not, so these classes are given back what the browser gave the button. */
a.navb,a.btn,a.mini,a.tab,a.icon{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
a.link,a.pitem,a.fopen{text-decoration:none}

/* §4.14 — the one-time password, the one time it is shown, and the controls a colleague's row
 * carries. Two rules, both of them shapes phase 03 had no screen for.
 *
 * The password is NOT set in the mono face, although a password read aloud across a desk is
 * exactly what a mono face is for: §5.3 gives JetBrains Mono to the developer-facing module
 * declaration and to nothing else, and `tests/test_typography.py` holds the panel to it. The
 * legibility the face would have bought is bought instead by the alphabet — no I, no O, no
 * digits — and by size, weight and letter-spacing. It is `dir="ltr"` in the markup, because a
 * Latin string inside an RTL page otherwise reorders around its dashes.
 */
.otp{margin:0;font-size:24px;font-weight:700;letter-spacing:.14em;background:var(--sunk);border:1px solid var(--line);border-radius:10px;padding:16px;text-align:center;color:var(--ink);overflow-wrap:anywhere}
.rowacts{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
/* §4.14's own five columns. The default `.arow` track list is written for the six-and-seven
 * column lists of §4.2 and §4.6; this list has five, and two of them hold controls rather than
 * text — the role, which is the select that changes it, and the row's own actions. Giving the
 * role column a floor is what stops «مدیر» being clipped to «مدیـ» on the desk. Below 700px
 * layout.css overrides every one of these tracks with the card view, as it does for any list. */
.atable.people .arow{grid-template-columns:minmax(0,1.25fr) minmax(158px,.8fr) minmax(0,1fr) .5fr auto}