/* Portal F — thread labels + authorization lanes, layered on portal-e.css */
html[data-theme="dark"]{--tL:0.8;--tC:0.085}
html[data-theme="light"]{--tL:0.5;--tC:0.1}
/* thread chip — the label every authorization carries; hue per thread, never per lane */
.thchip{display:inline-flex;align-items:center;gap:6px;max-width:260px;height:24px;padding:0 10px 0 8px;border-radius:999px;border:1px solid oklch(var(--tL) var(--tC) var(--th) / .4);background:oklch(var(--tL) var(--tC) var(--th) / .12);color:oklch(var(--tL) var(--tC) var(--th));font:600 12px var(--mono);letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;transition:.15s var(--ease)}
.thchip i{flex:0 0 auto;width:6px;height:6px;border-radius:2px;background:currentColor}
.thchip:hover{background:oklch(var(--tL) var(--tC) var(--th) / .22)}
.thchip.on{background:oklch(var(--tL) var(--tC) var(--th) / .26);box-shadow:inset 0 0 0 1px currentColor}
.thchip.static{cursor:default}
.thchip--none{color:var(--mut);border-color:var(--line2);border-style:dashed;background:transparent}
.thchip--none:hover{background:var(--panel)}
.thchip--none.on{color:var(--ink);border-style:solid;background:var(--raised);box-shadow:none}
.thmini{display:inline-grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:7px;font:700 13px var(--mono);color:oklch(var(--tL) var(--tC) var(--th));background:oklch(var(--tL) var(--tC) var(--th) / .14);border:1px solid oklch(var(--tL) var(--tC) var(--th) / .4)}
/* lane tag — the words; neutral on purpose so the thread colour stays the only colour */
.laneF{display:inline-flex;align-items:center;font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.pillE--dash{border-style:dashed}
.modeseg button{white-space:nowrap}
.modeseg button b{margin-left:5px;color:var(--acc);font-weight:600;font-size:12px}
.tv-main .rv-top{flex-wrap:wrap;row-gap:10px}
.tv-main .rv-top .rv-prog{flex:1 1 40px}
/* overview: lanes strip + thread rows */
.lanes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin-top:30px;border:1px solid var(--line);border-radius:var(--r);background:var(--panel);overflow:hidden}
.lane-cell{display:flex;flex-direction:column;gap:4px;padding:16px 20px;border:0;border-right:1px solid var(--line);text-align:left;background:transparent;cursor:pointer;color:inherit;font-family:var(--sans);transition:.15s var(--ease)}
.lane-cell:last-child{border-right:0}
.lane-cell:hover{background:var(--raised)}
.lane-cell:disabled{cursor:default}
.lane-cell:disabled:hover{background:transparent}
.lane-cell b{font:400 26px/1 var(--serif);color:var(--ink)}
.lane-cell:disabled b{color:var(--faint)}
.lane-cell .lab{font-size:14px;font-weight:600;letter-spacing:-.01em;margin-top:2px}
.lane-cell .verb{font-size:12.5px;color:var(--mut)}
.throws{margin-top:30px;display:flex;flex-direction:column}
.throw{display:flex;align-items:center;gap:16px;padding:15px 4px;border-top:1px solid var(--line)}
.throw:last-child{border-bottom:1px solid var(--line)}
.throw-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.throw-t{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.throw-t b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.throw-d{font-size:13.5px;color:var(--mut);text-wrap:pretty}
.throw-lanes{display:flex;gap:14px;flex-wrap:wrap;font:500 12px var(--mono);color:var(--mut);margin-top:2px}
.throw-lanes b{color:var(--ink2);font-weight:600}
.throw-meta{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.thead-slug{font:500 12px var(--mono);color:var(--faint)}
/* threads view: rail + main */
.tv{display:grid;grid-template-columns:256px minmax(0,1fr);gap:28px;align-items:start}
.tv-main{min-width:0}
.trail{position:sticky;top:78px;display:flex;flex-direction:column;gap:2px;max-height:calc(100dvh - 100px);overflow:auto;padding-bottom:8px}
.trail .grp{font:600 10.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
.trow{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;color:var(--mut);font:500 14px var(--sans);text-align:left;padding:8px 10px;border-radius:7px;cursor:pointer}
.trow:hover{color:var(--ink);background:var(--panel)}
.trow.on{background:var(--raised);color:var(--ink)}
.trow i{flex:0 0 auto;width:7px;height:7px;border-radius:2px;background:oklch(var(--tL) var(--tC) var(--th))}
.trow .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .n{font:600 12px var(--mono);color:var(--warn)}
.trow .n.z{color:var(--faint);font-weight:500}
.trow .n .ico{display:inline-block;vertical-align:-2px}
.trow.closed{color:var(--faint)}
.trow.closed i{opacity:.4}
.trow.all .t{font-weight:600}
.thead{display:flex;flex-direction:column;gap:10px;padding:18px 22px;border:1px solid var(--line);border-radius:12px;background:var(--panel);margin-bottom:6px}
.thead-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.thead-name{font-size:20px;font-weight:600;letter-spacing:-.015em}
.thead-sum{margin:0;font-size:14.5px;color:var(--ink2);max-width:70ch;text-wrap:pretty}
.thead-meta{display:flex;gap:14px;flex-wrap:wrap;font:400 12.5px var(--mono);color:var(--mut)}
.thead-meta b{color:var(--ink2);font-weight:600}
/* dividers inside a thread: one per lane */
.lane-head{display:flex;align-items:baseline;gap:12px;padding:24px 0 10px;border-bottom:1px solid var(--line)}
.lane-head h3{margin:0;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.lane-head .verb{font-size:13px;color:var(--mut)}
.lane-head .n{font:500 12px var(--mono);color:var(--faint);margin-left:auto;white-space:nowrap}
.lane-head .lg-bulk{margin-left:0}
/* all-threads list: one section per thread */
.tsec{margin-top:26px}
.tsec:first-of-type{margin-top:0}
.tsec-head{display:flex;align-items:center;gap:12px;padding:0 0 10px;border-bottom:1px solid var(--line)}
.tsec-sum{flex:1;min-width:0;font-size:13.5px;color:var(--mut);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tsec-head .n{font:500 12px var(--mono);color:var(--faint);white-space:nowrap}
.li-tags .laneF{margin-right:2px}
/* inline full item: decide in place when it doesn't need the card */
.li-body{display:flex;flex-direction:column;gap:14px;margin-top:4px;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.li-body .diff-panes{grid-template-columns:1fr}
.li-body .draft-prev{max-height:260px}
.li-why{margin:0;font-size:14px;line-height:1.55;color:var(--ink2);text-wrap:pretty}
.li-more{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:0;color:var(--mut);font:500 12px var(--mono);cursor:pointer}
.li-more:hover{color:var(--acc)}
.li-row.is-open{display:grid;grid-template-columns:7px 44px minmax(0,1fr);column-gap:13px;row-gap:12px;padding-bottom:20px}
.li-row.is-open .li-dot{grid-column:1;grid-row:1}
.li-row.is-open .li-ref{grid-column:2;grid-row:1}
.li-row.is-open .li-main{grid-column:3;grid-row:1}
.li-row.is-open .li-actions{grid-column:3;grid-row:2;justify-content:flex-end}
/* audit body — each finding is a two-row card: what + decision on top, where + fix underneath; never five side-by-side columns */
.aud{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:hidden}
.aud-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;grid-template-areas:"sev f a" "sev x x";column-gap:14px;row-gap:8px;padding:12px 14px;border-bottom:1px solid var(--line);align-items:start;font-size:14px}
.aud-row.hd{display:flex;gap:14px;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);padding:9px 14px;background:var(--panel)}
.aud-row.hd span:last-child{margin-left:auto}
.aud-row .sevF{grid-area:sev}
.aud-row .aud-f{grid-area:f}
.aud-row .aud-a{grid-area:a;justify-self:end}
.aud-row .aud-x{grid-area:x;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.aud-x .aud-p{flex:0 0 auto;margin:0}
.aud-x .fixlab{flex:0 0 auto;font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--add-ink)}
.aud-x .fixtx{flex:1 1 240px;min-width:0}
.aud-row.fyi .aud-f b{color:var(--mut)}
.aud-row.fyi .fixlab{color:var(--faint)}
.aud-row.off .aud-f,.aud-row.off .aud-x{opacity:.45;text-decoration:line-through;text-decoration-color:var(--faint)}
.sevF{font:700 10.5px var(--mono);letter-spacing:.08em;text-transform:uppercase;padding:2px 6px;border-radius:4px;border:1px solid;justify-self:start;margin-top:2px}
.sevF--high{color:var(--del-ink);border-color:color-mix(in oklch,var(--del-ink) 45%,transparent)}
.sevF--med{color:var(--warn);border-color:color-mix(in oklch,var(--warn) 45%,transparent)}
.sevF--low{color:var(--mut);border-color:var(--line2)}
.aud-f{display:flex;flex-direction:column;gap:3px;min-width:0}
.aud-f b{font-weight:600;color:var(--ink);letter-spacing:-.01em;line-height:1.4}
.aud-f span{font-size:13px;color:var(--mut);line-height:1.5}
.aud-p{font-size:12px;color:var(--mut)}
.aud-x{color:var(--ink2);line-height:1.5}
.chk{display:inline-flex;align-items:center;gap:7px;font:500 12px var(--mono);color:var(--mut);cursor:pointer;user-select:none;margin-top:1px}
.chk input{accent-color:var(--ok);width:16px;height:16px;margin:0;cursor:pointer}
.chk input:disabled{cursor:default}
.fyi-lab{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin-top:3px;display:inline-block}
.aud-foot{display:flex;align-items:center;gap:14px;padding:10px 14px;background:var(--panel);font-size:13px;color:var(--mut)}
.aud-foot a{margin-left:auto;font-size:13.5px;white-space:nowrap}
/* report body */
.rep{display:flex;flex-direction:column;gap:16px}
.rep-period{font:500 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.rep-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border:1px solid var(--line);border-radius:8px;background:var(--bg);overflow:hidden}
.rep-cell{padding:14px 16px;border-right:1px solid var(--line);display:flex;flex-direction:column;gap:3px;min-width:0}
.rep-cell:last-child{border-right:0}
.rep-cell b{font:400 24px/1 var(--serif);color:var(--ink)}
.rep-cell span{font-size:12.5px;color:var(--mut)}
.rep-cell em{font:500 12px var(--mono);font-style:normal;color:var(--add-ink)}
.rep-cell em.flat{color:var(--mut)}
.rep-cell em.down{color:var(--del-ink)}
.rep-hi{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.rep-hi li{display:flex;gap:10px;font-size:14.5px;color:var(--ink2);align-items:baseline;line-height:1.55}
.rep-hi li i{flex:0 0 auto;width:5px;height:5px;border-radius:2px;background:var(--acc);transform:translateY(-2px)}
.rep-link{align-self:flex-start;font-size:13.5px}
/* records */
.rec-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1;align-items:center}
.rec-what .tl{display:flex;gap:8px;align-items:center;margin-top:4px;overflow:visible;white-space:normal;font:inherit}
/* identity menu (no job titles — the name and the sign-in email are the record) */
.idwrap{position:relative}
.idwrap .idchip{border:0;background:transparent;cursor:pointer;padding:3px 6px 3px 3px;border-radius:8px;color:inherit;font-family:var(--sans)}
.idwrap .idchip:hover{background:var(--panel)}
.idchip .caret{display:inline-flex;color:var(--faint)}
.idmenu{position:absolute;top:calc(100% + 6px);right:0;min-width:230px;padding:6px;border-radius:10px;background:var(--panel);border:1px solid var(--line2);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:2px;z-index:40}
.idm-email{font-size:12px;color:var(--faint);padding:6px 9px 8px;border-bottom:1px solid var(--line);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.idmenu button{border:0;background:transparent;color:var(--ink2);font:500 14px var(--sans);text-align:left;padding:7px 9px;border-radius:7px;cursor:pointer}
.idmenu button:hover{background:var(--raised);color:var(--ink)}
/* sign-in · invitation · set password */
.authF{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:40px 20px 120px}
.auth-card{width:100%;max-width:440px;background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:30px 34px 28px;display:flex;flex-direction:column;gap:14px}
.auth-brand{display:flex;align-items:baseline;gap:10px;margin-bottom:6px}
.auth-brand .vx{font-size:15px;font-weight:600;letter-spacing:-.01em}
.auth-brand .tag{font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.auth-h{margin:0;font:400 30px/1.15 var(--serif);letter-spacing:.005em}
.auth-sub{margin:0;font-size:15px;color:var(--mut);line-height:1.55;text-wrap:pretty}
.auth-sub b{color:var(--ink2);font-weight:600}
.auth-form{display:flex;flex-direction:column;gap:14px;margin-top:4px}
.field{display:flex;flex-direction:column;gap:6px}
.flab{font:600 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mut)}
.inputF{width:100%;height:44px;box-sizing:border-box;background:var(--bg);border:1px solid var(--line2);border-radius:8px;color:var(--ink);font:400 15px var(--sans);padding:0 13px;outline:none}
.inputF.mono{font-family:var(--mono);letter-spacing:.06em}
.inputF:focus{border-color:color-mix(in oklch,var(--acc) 55%,transparent)}
.inputF::placeholder{color:var(--faint);letter-spacing:0}
.pwwrap{position:relative;display:block}
.pwwrap .inputF{padding-right:64px}
.pwshow{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--mut);font:500 12.5px var(--sans);padding:6px 8px;border-radius:6px;cursor:pointer}
.pwshow:hover{color:var(--ink);background:var(--raised)}
.auth-keep{font:400 14px var(--sans);color:var(--mut);letter-spacing:0;text-transform:none;margin:0}
.auth-cta{align-self:stretch;height:44px}
.auth-cta:disabled{opacity:.5;cursor:not-allowed}
.auth-err{display:flex;flex-direction:column;gap:3px;padding:11px 13px;border-radius:8px;border:1px solid color-mix(in oklch,var(--no) 35%,transparent);background:var(--no-bg);font-size:14px;color:var(--ink2);line-height:1.5}
.auth-err b{color:var(--no);font-weight:600}
.auth-note{padding:12px 14px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font-size:14.5px;color:var(--ink2);line-height:1.55;display:flex;flex-direction:column;gap:8px}
.auth-note b{color:var(--ink)}
.auth-links{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.linkb{border:0;background:none;padding:0;color:var(--acc);font:500 13.5px var(--sans);cursor:pointer;text-align:left}
.linkb:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.linkb:disabled{color:var(--faint);cursor:default;text-decoration:none}
.auth-foot{margin:4px 0 0;font-size:13px;color:var(--faint);line-height:1.55;text-wrap:pretty}
.pwrule{display:flex;gap:9px;align-items:baseline;font-size:13px;color:var(--mut)}
.pwrule i{flex:0 0 auto;width:7px;height:7px;border-radius:2px;border:1px solid var(--line2);transform:translateY(-1px)}
.pwrule i.ok{background:var(--ok);border-color:transparent}
.auth-demo{width:100%;max-width:440px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px 12px;border:1px dashed var(--line2);border-radius:10px}
.auth-demo .lab{font:600 10.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--faint);width:100%;margin-bottom:2px}
.auth-demo button{border:1px solid var(--line);background:transparent;color:var(--mut);font:500 13px var(--sans);padding:5px 9px;border-radius:7px;cursor:pointer}
.auth-demo button:hover{color:var(--ink);border-color:var(--line2)}
@media (max-width:900px){.tv{grid-template-columns:1fr}.trail{position:static;max-height:none;flex-direction:row;flex-wrap:wrap}.trail .grp{width:100%}.trow{width:auto}.lanes,.rep-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.aud-row{grid-template-columns:56px minmax(0,1fr);grid-template-areas:"sev f" "sev a" "sev x"}.aud-row .aud-a{justify-self:start}}

/* ---- legibility layer: overrides for portal-e.css. Keep the mono/uppercase tech voice, raise the floor — nothing below 11px, body 15px, secondary inks pass 4.5:1. ---- */
html[data-theme="dark"]{--mut:oklch(0.73 0.012 250);--faint:oklch(0.62 0.012 250)}
html[data-theme="light"]{--mut:oklch(0.45 0.015 252);--faint:oklch(0.54 0.012 252)}
body{font:400 15px/1.6 var(--sans)}
.viewwrap{max-width:1120px}
.tbE{height:62px}
.tbE-brand b{font-size:16px}
.tbE-brand span{font-size:10.5px;letter-spacing:.14em}
.tabsE button{font-size:14px;padding:8px 14px}
.tabsE button b{font-size:13px}
.idchip .av{width:30px;height:30px;font-size:11px}
.idchip .who b{font-size:13.5px}
.byv{font-size:12.5px}
.demoE .lab{font-size:10px;letter-spacing:.1em}
.demoE button{font-size:12.5px}
.kick{font-size:11px;letter-spacing:.14em}
h1.vt{font-size:36px}
.sub{font-size:15px;max-width:64ch}
.res-cell b{font-size:28px}
.res-cell span,.res-cell .out-line{font-size:12.5px}
.chap-count{font-size:12px}
.chap-go{font-size:13.5px;padding:7px 14px}
.cta{font-size:15px;padding:13px 24px}
.cta-est{font-size:13px}
.policy{font-size:13.5px;line-height:1.55}
.call-strip{font-size:14px}
.call-strip button{font-size:13.5px}
.pillE{font-size:10.5px;letter-spacing:.06em;padding:4px 9px;gap:7px}
.rv-crumb,.rv-count{font-size:12px}
.modeseg button{font-size:13px;padding:6px 12px}
.cE-ref,.cE-url{font-size:12px}
.cE-sub{font-size:11.5px}
.cE-title{font-size:22px}
.cE-why{font-size:15px;line-height:1.6}
.cE-goal{font-size:14px}
.cE-goal b{font-size:10.5px;letter-spacing:.1em}
.cE-kw{font-size:13px}
.fieldlab{font-size:11px;letter-spacing:.12em}
.noteE{font-size:14.5px}
.deployE{font-size:12.5px}
.btnE{font-size:14px;height:40px}
.btnE--sm{height:32px;font-size:13px;padding:0 13px}
.rv-hint{font-size:11.5px}
.stampE .note{font-size:14px}
.stampE .by{font-size:12px}
.diff-pane h5{font-size:10.5px;letter-spacing:.1em}
.diff-pane p{font-size:14.5px;line-height:1.65}
.redline{font-size:15px;line-height:1.75}
.draft-meta{font-size:11.5px}
.draft-prev h2{font-size:20px}
.draft-prev h3{font-size:15.5px}
.draft-prev p,.draft-prev ul{font-size:14.5px;line-height:1.65}
.mock-head{font-size:11.5px}
.mock-head .sim{font-size:10.5px}
.mock-block{font-size:13px}
.mock-block .tag{font-size:10px}
.seg button{font-size:12px;padding:5px 10px}
.ix-lab{font-size:11px;letter-spacing:.12em}
.ix-row{font-size:13.5px}
.ix-row .n{font-size:11.5px}
.searchE{font-size:14px;padding:9px 14px}
.lg-head h3{font-size:16px}
.lg-head .n{font-size:12px}
.lg-bulk{font-size:10.5px;padding:6px 11px}
.li-ref{font-size:11.5px;min-width:56px}
.li-title{font-size:15px}
.li-prev{font-size:13.5px;line-height:1.6}
.li-prev b{font-size:10.5px;letter-spacing:.08em}
.li-prev .redline{font-size:13.5px;line-height:1.6}
.li-stamp{font-size:11.5px}
.li-row.is-open{grid-template-columns:7px 56px minmax(0,1fr)}
.rec-row{grid-template-columns:84px 64px minmax(0,1.4fr) minmax(0,1fr) 110px;font-size:14px}
.rec-row.hd{font-size:10.5px;letter-spacing:.1em}
.rec-date{font-size:12px}
.rec-ref{font-size:11.5px}
.rec-what b{font-size:14.5px}
.rec-what span{font-size:12px}
.out-line{font-size:13px}
.exportE{font-size:12px;padding:7px 13px}
.receipt h2{font-size:28px}
.receipt .rsub{font-size:14.5px}
.r-cell b{font-size:26px}
.r-cell span{font-size:12px}
.r-next li{font-size:14.5px}
.empty-e{font-size:15px}
.empty-e .serif{font-size:24px}

/* production additions: save-failure toast, offline screen reuses .authF */
.toastF{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:10px;max-width:min(560px,calc(100vw - 32px));padding:11px 14px;border-radius:10px;border:1px solid color-mix(in oklch,var(--no) 40%,transparent);background:var(--panel);box-shadow:var(--shadow);font-size:13.5px;color:var(--ink2)}
.toastF b{color:var(--no);font-weight:600}
.toastF .linkb{margin-left:4px}

/* ---- small screens. Written after the legibility layer on purpose: the unconditional F rules above
   (.rec-row, .btnE--sm, .tbE) have to lose to these, and portal-e.css's own 900px rules already do. ---- */
@media (max-width:900px){
  /* the records table becomes one block per row: date · ref · action on the first line, the change and its outcome under it.
     (The unconditional 5-column .rec-row rule above was silently defeating portal-e.css's tablet rule.) */
  .rec-row{grid-template-columns:auto auto minmax(0,1fr);grid-template-areas:"date ref act" "what what what" "out out out";gap:8px 14px;padding:14px 0}
  .rec-row.hd{display:none}
  .rec-date{grid-area:date;align-self:center}
  .rec-ref{grid-area:ref;align-self:center}
  .rec-what{grid-area:what}
  .rec-out{grid-area:out}
  .rec-act{grid-area:act;justify-content:flex-end}
  /* the thread rail already wraps into a row here; on touch its rows need to read as controls */
  .trail{gap:8px}
  .trail .grp{padding:10px 2px 0}
  .trow{min-height:40px;padding:6px 14px 6px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel)}
  .trow.on{border-color:var(--line2)}
  .rv-nav .btnE{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  .byv{display:none}
  .idchip .who b{white-space:nowrap}
  /* tap targets: 40px floor on every control, 36px on the dense filter chips and segments; fields at 16px so iOS does not zoom */
  .idwrap .idchip{min-height:40px;padding:3px 4px 3px 3px}
  .idmenu button{min-height:44px}
  .themeb{width:40px;height:40px;flex:0 0 auto}
  .chap-go{min-height:40px}
  .modeseg button{min-height:40px;padding:6px 14px}
  .lg-bulk{min-height:36px;font-size:11.5px}
  .li-more{min-height:40px;font-size:13px}
  .btnE--sm{height:auto;min-height:40px;padding:0 14px;font-size:14px}
  .seg button{min-height:36px;padding:6px 12px}
  .chk{min-height:40px}
  .chk input{width:20px;height:20px}
  .thchip{height:36px}
  .exportE{min-height:40px}
  .linkb{min-height:40px;display:inline-flex;align-items:center}
  .pwshow{min-height:40px;padding:6px 10px}
  .auth-keep{min-height:40px}
  .inputF,.noteE,.searchE{font-size:16px}   /* iOS zooms the page when a focused field is set under 16px */
  .tabsE button{min-height:40px}
}
@media (max-width:640px){
  .viewwrap{padding:22px 16px calc(96px + env(safe-area-inset-bottom))}
  /* top bar: brand + identity stay on top and scroll with the page; the three views move to a fixed bottom bar */
  .tbE{position:static;height:auto;min-height:56px;padding:8px 16px;gap:12px;background:var(--bg);backdrop-filter:none}
  .tbE-brand{flex:1 1 auto;min-width:0}
  .tbE-brand b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .tabsE{position:fixed;left:0;right:0;bottom:0;z-index:30;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:color-mix(in oklch,var(--bg) 92%,transparent);backdrop-filter:blur(14px);border-top:1px solid var(--line)}
  .tabsE button{min-height:48px;padding:6px 8px;border-radius:9px;display:flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
  .tabsE button b{margin-left:0}
  .tbE-right{gap:8px}
  .idwrap .idchip{max-width:56vw}
  .idchip .who{min-width:0}
  .idchip .who b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  /* overview */
  h1.vt{font-size:28px}
  .res-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line)}
  .res-cell{border-right:0;background:var(--panel);padding:14px 16px}
  .res-cell:last-child:nth-child(odd){grid-column:1/-1}
  .res-cell.linky a{display:inline-flex;align-items:center;min-height:40px}
  .lane-cell{padding:14px}
  .lane-cell b{font-size:24px}
  .throw{gap:12px}
  .call-strip{flex-wrap:wrap}
  .call-strip button{margin-left:0;flex:1 1 100%;text-align:left;min-height:40px;padding:0}
  .cta-row{flex-direction:column;align-items:stretch;gap:10px}
  .cta{min-height:48px}
  /* threads: the lane switcher scrolls sideways instead of pushing the page wider */
  .tv-main .rv-top{gap:10px}
  .tv-main .rv-top .modeseg:first-child{flex:1 1 100%;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .tv-main .rv-top .modeseg:first-child::-webkit-scrollbar{display:none}
  .thead{padding:16px}
  .thead-name{font-size:18px}
  .lane-head{flex-wrap:wrap;row-gap:6px}
  .lm-tools{flex-wrap:wrap}
  .lm-tools .searchE{flex:1 1 100%;min-height:44px}
  .tsec-head{flex-wrap:wrap;row-gap:8px}
  .tsec-sum{flex:1 1 100%;white-space:normal}
  /* list rows: title gets the width, actions move under it */
  .li-row{display:grid;grid-template-columns:7px 56px minmax(0,1fr);column-gap:12px;row-gap:10px;padding:14px 0 16px}
  .li-row .li-dot{grid-column:1;grid-row:1}
  .li-row .li-ref{grid-column:2;grid-row:1}
  .li-row .li-main{grid-column:3;grid-row:1}
  .li-row .li-actions{grid-column:2/-1;grid-row:2;justify-content:flex-start;flex-wrap:wrap;gap:8px}
  .li-tags{flex-wrap:wrap;row-gap:6px}
  .li-title{font-size:16px;line-height:1.3}
  .note-inline{flex-wrap:wrap}
  .note-inline .noteE{flex:1 1 100%}
  /* the guided card: the decision buttons stack, approve first and full width */
  .cE-head{padding:16px 16px 0}
  .cE-body{padding:16px}
  .cE-foot{padding:14px 16px 16px}
  .cE-title{font-size:20px}
  .cE-row1 .cE-sub{margin-left:0;flex:1 1 100%}
  .cE-url{display:inline-flex;align-items:center;min-height:32px}
  .cE-actions{flex-wrap:wrap;gap:10px}
  .cE-actions .deployE{flex:1 1 100%;order:-2}
  .cE-actions .btnE{flex:1 1 calc(50% - 5px);height:auto;min-height:46px;padding:10px 12px;white-space:normal;line-height:1.2}
  .cE-actions .btnE--ok{flex-basis:100%;order:-1}
  .rv-nav{flex-wrap:wrap;gap:10px}
  .rv-nav .btnE--sm{flex:1 1 40%;min-height:44px}
  .rv-hint{display:none}
  .stampE .note{white-space:normal;max-width:none}
  .seg{margin-left:0}
  .aud-row{padding:12px}
  .aud-row.hd{display:none}
  .aud-foot{flex-wrap:wrap;gap:8px 14px}
  .aud-foot a{margin-left:0;flex:1 1 100%}
  .mock-head{flex-wrap:wrap}
  /* records */
  .rec-tools{flex-wrap:wrap}
  /* receipt */
  .receipt{padding:22px 18px}
  .receipt h2{font-size:24px}
  .r-cell{padding:12px 10px}
  .r-actions{flex-wrap:wrap;gap:10px}
  .r-actions .cta{flex:1 1 100%;min-height:48px}
  /* sign-in · invitation · set password */
  .authF{justify-content:flex-start;padding:24px 16px 48px}
  .auth-card{padding:24px 20px 22px}
  .auth-h{font-size:26px}
  .auth-links{flex-direction:column;align-items:flex-start;gap:4px}
  /* fixed strips clear the bottom bar */
  .toastF{bottom:calc(72px + env(safe-area-inset-bottom));flex-wrap:wrap}
  .demoE{left:12px;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));flex-wrap:wrap;justify-content:center}
  .demoE button{min-height:36px}
}