/* Studio command screen and the five-area shell (DESIGN.md 2026-10-17, sections 3.1-3.3, 3.8 and 5; WP3). DEC-341 palette only:
   #0A0A0A #FFFFFF #FDB016 #1EB789 #6163AD #F0505A and alphas of the same values. No kashida, no justification, no font bytes.
   Motion (D8, WP7): the working ring (and the working logo's wave) are the only loops; the heartbeat, the change flash and FLIP run through OwnerCommand.play (WAAPI). */

/* ---- tokens (section 5.1) ---- */
:root{
 --s-1:4px;--s-2:8px;--s-3:12px;--s-4:16px;--s-5:24px;--s-6:32px;--s-7:48px;--s-8:64px;
 --r-1:8px;--r-2:14px;--r-3:22px;--r-pill:999px;
 --surface-1:rgba(255,255,255,.04);--surface-2:rgba(255,255,255,.065);--surface-3:rgba(255,255,255,.09);
 --line-gold:rgba(253,176,22,.24);
 --glow-gold:0 0 0 1px rgba(253,176,22,.24);
 --glow-coral:0 0 0 1px rgba(240,80,90,.40);
 --shadow-pop:0 16px 48px rgba(10,10,10,.85);
 --t-xs:14px;--t-sm:15px;--t-md:17px;--t-lg:19px;--t-xl:23px;--t-2xl:28px;--t-display:40px;
 --lh-tight:1.4;--lh-ui:1.65;--lh-read:1.9;--measure:66ch;
 --ease:cubic-bezier(.2,.7,.2,1);--d-fast:150ms;--d-med:200ms;--d-slow:400ms;
 --row-min:56px;--card-pad:16px;--card-gap:12px;
 --rail:80px;--status-h:52px;--content-max:1440px;
}
/* 2026-10-22 calm C (CALM.md §5.1): more room inside a card on a wide screen */
@media (min-width:900px){:root{--card-pad:24px;--card-gap:16px}
}

/* ---- shell (section 3.1): the eyebrow and the footer go (the template is untouched), the hint is for screen readers only ---- */
.topbar .eyebrow,.workspace>footer{display:none}
.page-hint{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar-inner{min-height:var(--status-h);padding:6px var(--gutter);align-items:center;flex-wrap:nowrap;gap:var(--s-4)}
.topbar-inner>div:first-child{display:flex;align-items:center;gap:var(--s-4);min-width:0;flex:1 1 auto}
.topbar h1{font-size:var(--t-lg);white-space:nowrap;line-height:1.3}
.topbar .actions{flex:none;display:flex;align-items:center;gap:var(--s-3)}
body[data-area=command] .topbar-inner,body[data-area=command] .workspace>main{max-width:var(--content-max)}
.segnav{display:flex;gap:2px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding:2px}
.segnav::-webkit-scrollbar{display:none}
.segnav button{flex:none;min-height:34px;padding:4px 13px;border-radius:var(--r-pill);color:var(--ink-2);font-size:var(--t-sm);white-space:nowrap}
.segnav button:hover{color:var(--ink);background:var(--surface-1)}
.segnav button[aria-current=page]{color:var(--ink);background:var(--surface-2);box-shadow:inset 0 0 0 1px var(--line-gold)}

/* the five-item rail */
.rail{padding:14px 8px;gap:4px}
.rail nav{gap:6px}
.rail nav button{min-height:64px;font-size:var(--t-xs)}
.rail nav button[aria-current=page]{background:var(--gold-8)}
.rail nav button[aria-current=page]::before{inset-inline-start:-8px}
/* the rail foot at 80 px (fix round): the session chip and «تسجيل الخروج» wrap as tidy two-line blocks, not an oval pill */
.rail-foot .session-chip{border-radius:var(--r-1);padding:4px 6px;line-height:1.3;text-align:center;justify-content:center}
.rail-foot button{line-height:1.3}
.rail-badge{position:absolute;top:5px;inset-inline-end:9px;min-width:20px;height:20px;padding:0 5px;border-radius:var(--r-pill);background:var(--gold);color:var(--bg);font-size:var(--t-xs);font-weight:600;line-height:20px;text-align:center;font-family:OwnerLatin,system-ui,sans-serif}

/* ---- the status component (section 5.3): the glyph is drawn here from data-st, never a font character; the words sit next to it ---- */
.st{display:inline-block;position:relative;padding-inline-start:1.2em;min-width:0;max-width:100%}
.st::before{content:"";position:absolute;inset-inline-start:0;top:.44em;top:calc(.5lh - .31em);width:.62em;height:.62em;box-sizing:border-box}
.gl{flex:none;display:inline-block;width:.62em;height:.62em;box-sizing:border-box;vertical-align:middle}
.st[data-st=none]{padding-inline-start:0}
.st[data-st=you]::before,.gl[data-st=you]{background:var(--gold);border-radius:1.5px;transform:rotate(45deg) scale(.84)}
.st[data-st=run]::before,.gl[data-st=run]{background:var(--green);border-radius:50%}
.st[data-st=stop]::before,.gl[data-st=stop]{background:var(--coral);width:.74em;height:.66em;clip-path:polygon(50% 0,100% 100%,0 100%)}
.st[data-st=done]::before,.gl[data-st=done]{width:.36em;height:.68em;border:solid var(--green);border-width:0 .15em .15em 0;transform:translateY(-12%) rotate(45deg)}
.st[data-st=wait]::before,.gl[data-st=wait]{border:.12em solid var(--ink-2);border-radius:50%}
.st[data-st=old]::before,.gl[data-st=old]{border:.12em solid var(--ink-2);border-radius:50%;background:linear-gradient(var(--ink-2),var(--ink-2)) 50% 18%/.12em 38% no-repeat}
.st[data-st=unknown]::before,.gl[data-st=unknown]{border:.12em dashed var(--ink-3);border-radius:50%}
.st[data-st=unknown]{color:var(--ink-3)}
.st[data-st=retry]::before,.gl[data-st=retry]{border:.12em solid var(--ink-2);border-block-start-color:transparent;border-radius:50%}
.st[data-st=star]::before,.gl[data-st=star]{background:var(--gold);width:.8em;height:.8em;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.st[data-st=none]::before{display:none}

/* ---- القيادة (sections 3.2, 5.2): a 12-column grid. 2026-10-22 calm C (CALM.md §5.1): no vignette and no dot grid, a plain ground ---- */
body[data-area=command] .workspace{background:none}
body[data-area=command] .workspace>main>.page{padding-top:20px;gap:var(--s-4)}
body.app[data-area=command] .workspace>main{padding-bottom:var(--s-5)}
.cmd{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 20px;align-items:stretch}
.cmd-slot{min-width:0;display:grid}
.cmd-slot[data-cmd=core]{grid-column:1/span 5;grid-row:2}
.cmd-slot[data-cmd=queue]{grid-column:6/span 7;grid-row:2}
.cmd-slot[data-cmd=fresh]{grid-column:1/-1;grid-row:1}
.cmd-slot[data-cmd=pipe]{grid-column:1/-1}
.cmd-slot[data-cmd=vitals]{grid-column:1/span 5}
.cmd-slot[data-cmd=ticker]{grid-column:6/span 7}
@media(min-width:1400px){.cmd{gap:20px 24px}}

/* panels: one fill, no border (CALM.md §5.3: --card-pad, --card-gap; no HUD corner ticks since calm C); a panel that needs him gets a 1 px line */
.panel{position:relative;display:flex;flex-direction:column;gap:var(--card-gap);min-width:0;padding:var(--card-pad);border-radius:var(--r-2);background:var(--surface-1)}
.cmd .panel[data-attn]{box-shadow:var(--glow-gold)}
.cmd .panel[data-attn=alert]{box-shadow:var(--glow-coral)}
.panel-head{display:flex;align-items:center;gap:var(--s-2) var(--s-3);min-height:34px;flex-wrap:wrap}
.panel-head .pipe-note{margin-inline-start:auto}
.panel-head h2{font-size:var(--t-xl);font-weight:600;line-height:var(--lh-tight)}
.panel-meta{color:var(--ink-2);font-size:var(--t-sm)}
.panel-time{margin-inline-start:auto;color:var(--ink-3);font-size:var(--t-xs)}
.panel-foot{margin-top:auto;display:flex;justify-content:flex-end}
.panel-foot .link-btn{min-height:32px}
.link-btn{display:inline-flex;align-items:center;gap:6px;min-height:40px;color:var(--ink-2);font-size:var(--t-sm);align-self:flex-start}
.link-btn:hover{color:var(--gold)}
.q-empty{color:var(--ink-2);padding:var(--s-3) 0}
.btn-gold{background:var(--gold);border-color:var(--gold);color:var(--bg);font-weight:600;min-height:48px;font-size:var(--t-md);padding-inline:var(--s-5)}
.btn-gold:hover{filter:brightness(1.06);border-color:var(--gold)}
.btn-row{min-height:38px;padding:5px 14px;font-size:var(--t-sm);border-radius:10px}
.tag{flex:none;display:inline-flex;align-items:center;padding:0 8px;border-radius:var(--r-pill);border:1px solid var(--line-gold);color:var(--gold);font-size:var(--t-xs);line-height:1.65;white-space:nowrap}
.tag-new{background:var(--gold-8);border-color:var(--gold)}

/* #cmd-core: the emblem, the greeting and «الحين» with the one gold button */
.panel--core{gap:var(--s-4)}
.core-id{display:flex;align-items:center;gap:var(--s-4);min-width:0}
.emb-btn{flex:none;width:120px;height:120px;border-radius:50%;display:grid;place-items:center}
.core-who{display:grid;gap:2px;min-width:0;justify-items:start}
.core-who .link-btn{min-height:32px}
.core-name{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-sm);color:var(--ink-2)}
.core-name strong{color:var(--ink);font-weight:600;font-size:var(--t-md)}
.core-greet{font-size:var(--t-2xl);line-height:1.25}
.core-now{display:grid;gap:var(--s-3);padding:14px var(--s-4) var(--s-4);margin-top:auto;border-radius:var(--r-2);background:var(--gold-8)}
.core-eyebrow{font-size:var(--t-sm);font-weight:600;color:var(--gold);letter-spacing:.02em}
.now-line{font-size:var(--t-xl);font-weight:600;line-height:1.4;text-wrap:balance}
.now-meta{margin-top:-6px;font-size:var(--t-sm);color:var(--ink-2)}
.core-now .btn-gold{justify-self:start;min-width:220px}

/* the emblem (section 5.4, WP7): the presence ring around the site logo. Only the working ring turns, once a minute, and only the working
   bars wave; both loops sit under [data-state=working] and stop under reduced motion. The state is always also in words. */
.emb{width:100%;height:100%;overflow:visible}
.emb-g0{stop-color:var(--gold);stop-opacity:.30}.emb-g1{stop-color:var(--gold);stop-opacity:.04}.emb-g2{stop-color:var(--gold);stop-opacity:0}
.emb-r1 circle:first-child,.emb-beat,.emb-tick{fill:none}
.emb-r1,.emb-beat{transform-box:view-box;transform-origin:100px 100px}
.emb-r1 circle:first-child{stroke:var(--ink);stroke-opacity:.22;stroke-width:1.2;stroke-dasharray:2 7}
.emb-tick{stroke:var(--ink-3);stroke-width:1.4}
.emb-beacon{fill:var(--ink-3)}
.emb-beat{stroke:var(--gold);stroke-width:2;opacity:0}
.emb-btn:hover .lg-b{stroke-width:1.75}
.emb[data-state=waiting] .emb-beacon{fill:var(--gold)}
.emb[data-state=waiting] .emb-r1 circle:first-child{stroke:var(--gold);stroke-opacity:.5}
.emb[data-state=alert] .emb-beacon{fill:var(--coral)}
.emb[data-state=alert] .emb-r1 circle:first-child{stroke:var(--coral);stroke-opacity:.6}
.emb[data-state=working] .emb-beacon{fill:var(--green)}
.emb[data-state=working] .emb-r1 circle:first-child{stroke:var(--green);stroke-opacity:.5}
.emb[data-state=working] .emb-r1{animation:emb-turn 60s linear infinite}
@keyframes emb-turn{to{transform:rotate(360deg)}}

/* the logo (WP7): a field of vertical bars of short and long lengths, generated from the site logo (deploy/owner-console/make_logo_bars.py).
   Colour by state: idle = ink, waiting = gold, alert = coral, working = green with a slow wave across the columns. Classes only. */
.lg{display:block;overflow:visible}
.lg-b{fill:none;stroke:var(--ink-2);stroke-opacity:.8;stroke-width:1.45;stroke-linecap:round}
.lg--mark .lg-b{stroke-width:1.9}
.lg[data-state=waiting] .lg-b{stroke:var(--gold);stroke-opacity:1}
.lg[data-state=alert] .lg-b{stroke:var(--coral);stroke-opacity:1}
.lg[data-state=working] .lg-b{stroke:var(--green);stroke-opacity:1;animation:lg-wave 8s ease-in-out infinite}
.lg[data-state=working] .w1{animation-delay:-.67s}.lg[data-state=working] .w2{animation-delay:-1.33s}.lg[data-state=working] .w3{animation-delay:-2s}
.lg[data-state=working] .w4{animation-delay:-2.67s}.lg[data-state=working] .w5{animation-delay:-3.33s}.lg[data-state=working] .w6{animation-delay:-4s}
.lg[data-state=working] .w7{animation-delay:-4.67s}.lg[data-state=working] .w8{animation-delay:-5.33s}.lg[data-state=working] .w9{animation-delay:-6s}
.lg[data-state=working] .w10{animation-delay:-6.67s}.lg[data-state=working] .w11{animation-delay:-7.33s}
@keyframes lg-wave{0%,100%{stroke-opacity:.5}50%{stroke-opacity:.9}}

/* the site logo in the status bar, with its state in words (DEC-341), and the search button */
.site-logo-wrap{display:inline-flex;align-items:center;gap:var(--s-2);min-width:0}
.site-logo{flex:none;width:52px;height:44px;display:grid;place-items:center;border-radius:var(--r-1)}
.site-logo .lg{width:100%;height:auto}
.site-logo:hover{background:var(--surface-1)}
.site-logo-t{min-width:0;font-size:var(--t-xs);color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pal-open{display:inline-flex;align-items:center;gap:6px;min-height:36px}
.pal-open svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.upd-badge{display:inline-block;margin-inline-start:6px;padding:0 7px;border-radius:var(--r-pill);background:var(--gold-8);border:1px solid var(--line-gold);color:var(--gold);font-size:var(--t-xs);line-height:1.5;font-weight:500}

/* ---- the palette (WP7, section 3.8): opens in 150 ms; an ARIA combobox over a listbox of <button>s ---- */
dialog.palette[open]{animation:pal-in var(--d-fast) var(--ease)}
@keyframes pal-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
dialog.palette .sheet-inner{gap:var(--s-3)}
#palette-input{width:100%;min-height:48px;padding:10px 14px;border-radius:var(--r-2);border:1px solid var(--line-2);background:var(--surface-1);color:var(--ink);font:inherit;font-size:var(--t-md)}
#palette-input:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.palette-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;max-height:min(56dvh,460px);overflow-y:auto;overscroll-behavior:contain}
.pal-sec{padding:10px 12px 4px;font-size:var(--t-xs);font-weight:600;color:var(--gold);letter-spacing:.02em}
.pal-empty{padding:14px 12px;color:var(--ink-2);font-size:var(--t-sm)}
.pal-opt{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);width:100%;min-height:46px;padding:8px 12px;border-radius:var(--r-1);text-align:start;color:var(--ink)}
.pal-opt:hover,.pal-opt[aria-selected=true]{background:var(--surface-2)}
.pal-opt[aria-selected=true]{box-shadow:inset 0 0 0 1px var(--line-gold)}
.pal-t{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-sm)}
.pal-k{flex:none;max-width:45%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-xs);color:var(--ink-3)}


/* #cmd-queue: «دورك» and «عند غيرك» as two tabs; solid chips only for «دورك» (section 5.2) */
.qtabs{display:flex;gap:4px;padding:3px;border-radius:var(--r-pill);background:var(--surface-2)}
.qtab{display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:4px 16px;border-radius:var(--r-pill);font-size:var(--t-md);font-weight:600;color:var(--ink-2)}
.qtab:hover{color:var(--ink)}
.qtab[aria-selected=true]{background:var(--bg);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-gold)}
.qn{display:inline-grid;place-items:center;min-width:22px;height:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--surface-3);color:var(--ink);font-size:var(--t-xs);font-weight:600}
.qtab[data-qtab=you] .qn{background:var(--gold);color:var(--bg)}
.qpanel{min-width:0}
.q-note{font-size:var(--t-xs);color:var(--ink-3)}
.row-star{font-size:var(--t-xs);color:var(--ink-2)}
.rows-q{display:grid}
.rows-q>.row{grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;padding:10px 0;border-bottom:1px solid var(--line)}
.rows-q>.row:last-child{border-bottom:0}
.row-main{display:grid;gap:3px;min-width:0}
.row-main>.st{font-size:var(--t-md);line-height:1.5}
.row-meta{color:var(--ink-3);font-size:var(--t-xs);padding-inline-start:1.2em}
.row-sub{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;margin-top:6px;padding:6px 12px;border-radius:var(--r-1);background:var(--surface-1);font-size:var(--t-sm)}
.row-sub .btn-row{min-height:32px;padding:2px 12px}
.row--muted .row-main>.st{color:var(--ink-3)}

/* #cmd-pipe: nine nodes on one line, then a lane per step that has episodes (section 3.2) */
.conduit{position:relative;display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin:0;padding:0;list-style:none}
.conduit::before{content:"";position:absolute;inset-inline:calc(100% / 18);top:17px;height:1px;background:linear-gradient(to left,var(--line-gold),var(--line-2) 60%,var(--line))}
.node-li{min-width:0}
.node{position:relative;width:100%;display:grid;justify-items:center;gap:2px;padding:6px 2px 6px;border-radius:var(--r-1);color:var(--ink-3)}
.node:hover{background:var(--surface-2)}
.node-i{position:relative;z-index:1;display:block;width:12px;height:12px;margin-bottom:6px;border-radius:50%;border:1.5px solid var(--line-2);background:var(--bg);font-size:0;line-height:0;overflow:hidden}
.node[data-has="1"] .node-i{border-color:var(--ink-2)}
.node[data-you] .node-i{border-color:var(--gold);background:var(--gold);box-shadow:0 0 0 4px var(--gold-8)}
.node-n{font-size:var(--t-display);font-weight:600;line-height:1;color:var(--ink-3)}
.node[data-has="0"] .node-n{font-size:var(--t-xl);line-height:var(--t-display)}
.node[data-has="1"] .node-n{color:var(--ink)}
.node[data-you] .node-n{color:var(--gold)}
.node-l{display:inline-flex;align-items:center;gap:6px;font-size:var(--t-sm);color:var(--ink-2);white-space:nowrap}
.node[data-muted] .node-l{color:var(--ink-3)}
.pipe-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-3)}
.pipe-lane{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-2);align-content:start;min-width:0;padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-1)}
.pipe-lane-h{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.pipe-lane-n{color:var(--ink)}
.pipe-chips{display:grid;grid-template-columns:minmax(0,1fr);gap:6px;margin:0;padding:0;list-style:none}
.pipe-chips>li{min-width:0}
.ep-chip{width:100%;display:flex;align-items:center;gap:8px;min-height:36px;padding:5px 10px;border-radius:10px;border-inline-start:2px solid transparent;background:var(--surface-2);color:var(--ink);font-size:var(--t-sm);text-align:start}
.ep-chip:hover{background:var(--surface-3)}
.ep-chip[data-you]{border-inline-start-color:var(--gold)}
.ep-t{flex:1 1 auto;min-width:0;white-space:normal;overflow-wrap:anywhere;line-height:1.45}
.ep-age{flex:none;font-size:var(--t-xs);color:var(--ink-3)}
.ep-age .st{color:var(--ink-3)}
.pipe-lane-today{font-size:var(--t-xs);font-weight:400;color:var(--ink-2)}
.ep-chip--idea{flex-wrap:wrap;row-gap:2px}
.ep-star{flex-basis:100%;padding-inline-start:1.3em;font-size:var(--t-xs);color:var(--ink-2)}
.pipe-more{min-height:32px;font-size:var(--t-sm)}
.pipe-note{font-size:var(--t-xs);color:var(--ink-3)}
.panel--pipe .panel-time{order:2}

/* #cmd-vitals: four tiles, each a button into its segment; the audience bars are SVG geometry */
.vitals{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);flex:1}
.vital{display:flex;flex-direction:column;gap:4px;min-width:0;padding:12px var(--s-4);border-radius:var(--r-1);background:var(--surface-1);color:var(--ink);text-align:start}
.vital:hover{background:var(--surface-2)}
.vital-l{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.vital-l time{font-size:var(--t-xs);font-weight:400;color:var(--ink-3)}
.vital-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.vital-n{font-size:min(var(--t-display),3.1vw);font-weight:600;line-height:1}
.vital-n .unk{font-size:var(--t-lg)}
.vital-c{font-size:var(--t-xs);color:var(--ink-2)}
.vital-s{display:grid;gap:3px;font-size:var(--t-sm);margin-top:auto}
.vital-note{font-size:var(--t-xs);color:var(--ink-2)}
.aud-bars{display:block;width:100%;height:34px}
.aud-cap{margin-top:2px}
.bar{fill:var(--gold);fill-opacity:.75}
.bar-unk{fill:var(--ink-3);fill-opacity:.6}

/* #cmd-ticker: one line per row */
.tick{display:grid;margin:0;padding:0;list-style:none}
.tick-li{border-bottom:1px solid var(--line)}
.tick-li:last-child{border-bottom:0}
.tick-row{width:100%;display:grid;grid-template-columns:116px minmax(0,1fr) auto;align-items:center;gap:var(--s-3);min-height:40px;padding:6px 8px;border-radius:var(--r-1);color:var(--ink);text-align:start}
.tick-row:hover{background:var(--surface-2)}
.tick-go{color:var(--ink-3);font-size:var(--t-md);line-height:1}
.tick-n{flex:none;color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap}
.tick-row:hover .tick-go{color:var(--gold)}
.tick-t{color:var(--ink-3);font-size:var(--t-xs);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tick-main{display:flex;align-items:center;gap:8px;min-width:0}
.tick-main>.st{display:block;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:var(--t-sm)}

/* ---- drawers (section 3.8): docked at the inline-end side from 900 px so the rail stays visible, a bottom sheet below ---- */
dialog.drawer .sheet-inner{gap:var(--s-5)}
dialog.drawer.is-open[open]{animation:drawer-in var(--d-med) var(--ease)}
@keyframes drawer-in{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@media(min-width:900px){
 dialog.drawer{margin:0;margin-inline-start:auto;inset-block:0;width:min(560px,44vw);max-width:none;height:100dvh;max-height:100dvh;border:0;border-inline-start:1px solid var(--line-gold);border-radius:0;box-shadow:var(--shadow-pop);overflow-y:auto} dialog.palette{margin:10dvh auto auto;max-height:80dvh}
}
#drawer-body{display:grid;gap:var(--s-4)}
.dr-sec{display:grid;gap:var(--s-3)}
.dr-sec+.dr-sec{padding-top:var(--s-4);border-top:1px solid var(--line)}
.dr-h{display:flex;align-items:center;gap:8px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.dr-meta{color:var(--ink-2);font-size:var(--t-sm)}
.dr-emb{display:flex;align-items:center;gap:var(--s-4)}
.dr-emb .emb{width:72px;height:72px}
.dr-big{font-size:var(--t-2xl);font-weight:600;line-height:1.2}
.dr-big span{font-size:var(--t-sm);font-weight:400;color:var(--ink-2)}
.dr-list{display:grid;gap:6px}
.dr-lines{display:grid;gap:10px;max-width:var(--measure);font-size:var(--t-sm);line-height:var(--lh-ui);color:var(--ink-2)}
.aud-bars--wide{height:64px;max-width:300px;margin-top:var(--s-2)}
.rows-shoot .row-main{grid-template-columns:auto minmax(0,1fr);column-gap:10px}
.rows-shoot .row-meta{grid-column:2;padding-inline-start:0}
.shoot-n{color:var(--gold);font-size:var(--t-lg)}
.shoot-t{font-weight:500}

/* ---- the old pages inside the new shell keep their look; الفريق opens with وش يتحرك / وش واقف ---- */
.team-flow{margin-bottom:var(--s-2)}

/* ---- الحلقات and the episode workspace (WP4, sections 3.4 and 5.2): rows grouped by step with a 9-dot mini track; the workspace is
   the header (h1, the step track, the gold next action), the step sections (only the current one open) and a sticky side column ---- */
.ep-list{display:grid;gap:var(--s-4)}
.ep-stack{display:grid;gap:34px;min-width:0}
.ep-seg-note{max-width:var(--measure)}
.ep-manual{margin-top:calc(-1 * var(--s-3))}
.ep-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.ep-list-h{display:flex;align-items:center;gap:10px;font-size:var(--t-xl);font-weight:600}
.ep-step-only{display:flex;align-items:center;gap:var(--s-3);flex-wrap:wrap;color:var(--ink-2);font-size:var(--t-sm)}
.ep-filters button[aria-pressed=true]{background:var(--bg);color:var(--ink);border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--line-gold)}   /* fix round: the القيادة tab look, not a solid chip (section 5.2) */
.ep-group{display:grid;gap:var(--s-2);padding:var(--s-4) var(--s-5);border-radius:var(--r-2);background:var(--surface-1)}
.ep-group-h{display:flex;align-items:center;gap:8px;font-size:var(--t-md);font-weight:600;color:var(--ink-2)}
.ep-rows{display:grid;margin:0;padding:0;list-style:none}
.ep-li{border-bottom:1px solid var(--line)}
.ep-li:last-child{border-bottom:0}
.ep-row{width:100%;display:grid;grid-template-columns:minmax(0,1.3fr) 112px minmax(0,1.4fr) 170px 14px;align-items:center;gap:6px var(--s-4);min-height:56px;padding:10px 8px;border-radius:var(--r-1);color:var(--ink);text-align:start}
.ep-row:hover{background:var(--surface-2)}
.ep-row{border-inline-start:2px solid transparent}
.ep-row[data-you]{border-inline-start-color:var(--gold)}
.ep-row-t{display:grid;gap:2px;min-width:0}
.ep-row-t strong{font-weight:600;line-height:1.45;overflow-wrap:anywhere}
.ep-row-t small,.ep-row-time{color:var(--ink-3);font-size:var(--t-xs)}
.ep-row-next{display:flex;flex-wrap:wrap;gap:4px var(--s-3);font-size:var(--t-sm);min-width:0}
.ep-row-next .st+.st{color:var(--ink-2)}
.ep-row-go{color:var(--ink-3)}
.ep-row>.ep-row-go{grid-column:-2}   /* fix round: fixed tracks, so the dots and the next line align row to row */
.ep-row:hover .ep-row-go{color:var(--gold)}
.ep-row--parked{grid-template-columns:minmax(0,1.3fr) minmax(0,1.4fr) auto 14px;color:var(--ink-2)}
.mini{display:inline-flex;gap:3px;align-items:center}
.mini i{display:block;width:7px;height:7px;border-radius:50%;border:1px solid var(--line-2)}
.mini i[data-k=done]{background:var(--green);border-color:var(--green)}
.mini i[data-k=now]{width:9px;height:9px;background:var(--gold);border-color:var(--gold)}
.ep-row:not([data-you]) .mini i[data-k=now]{background:var(--ink-2);border-color:var(--ink-2)}

.ws{display:grid;gap:var(--s-5)}
.ws-head{display:grid;gap:var(--s-3)}
.ws-back{display:flex;justify-content:space-between;gap:var(--s-3);flex-wrap:wrap}
.ws-back .link-btn{min-height:34px}
.ws-title{font-size:var(--t-2xl);font-weight:600;line-height:1.3;max-width:40ch;text-wrap:balance}
.ws-meta{color:var(--ink-2);font-size:var(--t-sm)}
.ws-track{display:flex;flex-wrap:wrap;gap:4px 18px;margin:2px 0 0;padding:0;list-style:none;font-size:var(--t-sm);color:var(--ink-2)}
.ws-track li[data-k=todo]{color:var(--ink-3)}
.ws-track li[data-k=now]{color:var(--ink);font-weight:600}
.ws-track li[data-k=skip]{color:var(--ink-3)}
/* the phone's «4 من 9 · السكربت» opens the full track (section 3.4); on the desktop the track is always shown */
.ws-track-fold{display:none}
.ws-track-sum{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:var(--t-sm)}
.ws-track-sum::-webkit-details-marker{display:none}
.ws-track-sum::after{content:"";flex:none;width:7px;height:7px;border-inline-end:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg)}
.ws-track-fold[open] .ws-track-sum::after{transform:rotate(-45deg)}
.ws-next{display:grid;gap:var(--s-2);justify-items:start;margin-top:var(--s-2);padding:var(--s-4) var(--s-5);border-radius:var(--r-2);background:var(--gold-8);box-shadow:var(--glow-gold)}
.ws-next--quiet{background:var(--surface-1);box-shadow:none}
.ws-next-h{font-size:var(--t-sm);font-weight:600;color:var(--gold)}
.ws-next--quiet .ws-next-h{color:var(--ink-2)}
.ws-next-line{font-size:var(--t-xl);font-weight:600;line-height:1.4;text-wrap:balance}
.ws-next-sub{max-width:var(--measure);color:var(--ink-2);font-size:var(--t-sm);line-height:var(--lh-ui)}
.ws-next-meta{display:flex;flex-wrap:wrap;gap:4px var(--s-4);font-size:var(--t-sm);color:var(--ink-2)}
.ws-since{color:var(--ink-3)}
.ws-next .btn-gold,.ws-next .btn{margin-top:var(--s-1)}
.ws-body{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--s-5) 20px;align-items:start}
.ws-main{grid-column:5/-1;grid-row:1;display:grid;gap:var(--s-3);min-width:0}
.ws-side{grid-column:1/span 4;grid-row:1;display:grid;gap:var(--s-3);min-width:0;position:sticky;top:calc(var(--topbar-h,52px) + 12px);max-height:calc(100dvh - var(--topbar-h,52px) - 24px);overflow-y:auto;overscroll-behavior:contain;padding:var(--s-4);border-radius:var(--r-2);background:var(--surface-1)}
.ws-sec{border-radius:var(--r-2);background:var(--surface-1)}
/* a section brought into view (the strip's writers row, «روح للمحتوى») lands below the sticky top bar, not under it (fix A-1) */
.ws-sec{scroll-margin-top:calc(var(--topbar-h,72px) + 12px)}
.ws-sec>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) 10px;align-items:center;gap:4px var(--s-4);min-height:52px;padding:10px var(--s-5);border-radius:var(--r-2)}
.ws-sec>summary::-webkit-details-marker{display:none}
.ws-sec>summary::after{content:"";width:7px;height:7px;border-inline-end:1.5px solid var(--ink-3);border-bottom:1.5px solid var(--ink-3);transform:rotate(45deg)}
.ws-sec[open]>summary::after{transform:rotate(-45deg)}
.ws-sec>summary:hover{background:var(--surface-2)}
.ws-sec-h{font-size:var(--t-lg);font-weight:600}
.ws-sec-sum{min-width:0;color:var(--ink-2);font-size:var(--t-sm)}
.ws-sec[data-state=next] .ws-sec-h{color:var(--ink-2);font-weight:500}
.ws-sec[data-state=next] .ws-sec-sum{color:var(--ink-3)}
.ws-sec[data-state=now]{box-shadow:inset 0 0 0 1px var(--line-gold)}
.ws-sec-body{display:grid;gap:var(--s-4);min-width:0;padding:0 var(--s-5) var(--s-5)}
.ws-sec-body .block{gap:10px}
.ws-sec-body .block-head{padding-bottom:6px}
.ws-state{display:flex;gap:8px;flex-wrap:wrap}
.ws-sec-body small.ln{display:block;margin-top:4px}
.ws .ah-drafts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:var(--s-3)}
/* fix round: the reviewer's pick first and full width, the other two side by side; three drafts with no pick sit as three columns */
.ws .ah-drafts:has(>.is-pick):has(>:nth-child(3)){grid-template-columns:repeat(2,minmax(0,1fr))}
.ws .ah-drafts:has(>:nth-child(3)) > .is-pick{grid-column:1/-1}
.ws .ah-drafts:not(:has(>.is-pick)):has(>:nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.ws .ah-draft{align-content:start;padding:var(--s-3);border:0;border-radius:var(--r-1);background:var(--surface-1)}
.ws .ah-draft.is-pick{box-shadow:inset 0 0 0 1px var(--line-gold)}
.ws .ah-draft-text{max-height:52vh;font-size:var(--t-sm)}
.ah-draft header .st[data-st=star]{font-size:var(--t-xs);color:var(--gold)}
.stage-fold{padding:0 var(--s-5);border-radius:var(--r-2);background:var(--surface-1)}
.stage-fold[open]{padding-bottom:var(--s-4)}
.ws-side-h{font-size:var(--t-md);font-weight:600}
.ws-about{display:grid;gap:var(--s-2)}
.ws-kv{display:grid;gap:6px;margin:0;font-size:var(--t-sm)}
.ws-kv>div{display:grid;grid-template-columns:7.5em minmax(0,1fr);gap:var(--s-2)}
.ws-kv dt{color:var(--ink-3)}
.ws-kv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.ws-side .ws-fold{border-top:1px solid var(--line)}
.ws-side .block{gap:10px}
.ws-side .block-head h2{font-size:var(--t-md)}
.ws-side .sfx-scope select{max-width:100%}
.ws-side .tech{font-size:var(--t-xs)}
/* fix round (section 5.2): one gold button on the workspace, the gold card's; the writes inside the sections are plain buttons */
/* fix round (section 5.2): one disclosure style; the plain <details> of the embedded blocks look like details.fold, and their block
   heads match the القيادة panel heads (no square, no rule) */
:is(.ws,.ep-stack) details:not(.ws-sec):not(.fold):not(.tech):not(.ws-track-fold)>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;min-height:44px;color:var(--ink-2);font-size:var(--t-sm)}
:is(.ws,.ep-stack) details:not(.ws-sec):not(.fold):not(.tech):not(.ws-track-fold)>summary::-webkit-details-marker{display:none}
:is(.ws,.ep-stack) details:not(.ws-sec):not(.fold):not(.tech):not(.ws-track-fold)>summary::before{content:"";flex:none;width:7px;height:7px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
:is(.ws,.ep-stack) details:not(.ws-sec):not(.fold):not(.tech):not(.ws-track-fold)[open]>summary::before{transform:rotate(-45deg)}
:is(.ws,.ep-stack,#analytics-block) .block-head{border-bottom:0}
:is(.ws,.ep-stack,#analytics-block) .block-head h2::before{display:none}
/* the effect alternatives: «اسمع» and «استخدمه» keep one end column */
.ah-report .row>span>small.sfx-alt{display:flex;flex-wrap:wrap;align-items:center;column-gap:0;white-space:pre-wrap}   /* company.css blocks every row small; pre-wrap keeps the spaces between the flex runs */
.ah-report .row>span>small.sfx-alt>.sfx-use{margin-inline-start:.5rem}
.ah-report .row>span>small.sfx-alt>a{margin-inline-start:auto}
.ah-report .row>span>small.sfx-alt>.sfx-use:not(a~.sfx-use){margin-inline-start:auto}

/* النتائج (section 2.2, D18): one series, one hue; the numbers sit next to each bar, so the list is also the table */
.res-big{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.res-big .res-n{font-size:var(--t-display);font-weight:600;line-height:1}
.res-ch,.res-when{color:var(--ink-2);font-size:var(--t-sm)}
.res-h{font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin-top:var(--s-2)}
.res-rows{display:grid;margin:0;padding:0;list-style:none}
.res-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(120px,.8fr) minmax(0,1.2fr);align-items:center;gap:6px var(--s-4);padding:10px 0;border-bottom:1px solid var(--line)}
.res-row:last-child{border-bottom:0}
.res-meta{display:grid;gap:2px;min-width:0;font-size:var(--t-sm)}
.res-meta time{color:var(--ink-3);font-size:var(--t-xs)}
.res-cap{overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.res-pair{white-space:nowrap}
.res-bar{display:block;width:100%;height:14px}
.res-track{fill:var(--ink);fill-opacity:.06}
.res-v{display:grid;gap:2px;font-size:var(--t-sm)}
.res-v small{color:var(--ink-3);font-size:var(--t-xs)}

/* ---- الأفكار (WP5, section 3.5): the day line with its evidence, idea cards (★ first and full width), one gold approve on the ★ card
   and gold outlines on the others, «صارت حلقة ←», recent days as rows, the manual fold; الجدول and بنك الإشارات reuse the ep-stack ---- */
.ideas-host,.ideas-page{display:grid;gap:var(--s-4);min-width:0}
.ideas-h{font-size:var(--t-xl);font-weight:600;line-height:var(--lh-tight)}
.ideas-ev{display:grid;gap:4px;min-width:0}
.ideas-ev-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;color:var(--ink-2);font-size:var(--t-sm)}
.ideas-ev-line .ideas-day{color:var(--ink);font-size:var(--t-lg);font-weight:600}
.ideas-sep{color:var(--ink-3);padding-inline:6px}
.ideas-ev-more p,.ideas-runs{margin:4px 0 0}
.ideas-runs{padding:0;list-style:none;display:grid;gap:2px}
.ideas-intro,.ideas-today{color:var(--ink-2);font-size:var(--t-sm)}
.ideas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px;align-items:start}
.idea{display:grid;gap:10px;align-content:start;min-width:0;padding:var(--s-4) var(--s-5);border-radius:var(--r-2);background:var(--surface-1)}
.idea--rec{grid-column:1/-1;background:var(--gold-8);box-shadow:var(--glow-gold)}
.idea[data-approved=true]{background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line)}
.idea-head{display:flex;align-items:flex-start;gap:var(--s-3);min-width:0}
.idea-n{flex:none;display:grid;place-items:center;width:28px;height:28px;margin-top:2px;border-radius:50%;border:1px solid var(--line-gold);color:var(--gold);font-size:var(--t-sm);font-weight:600;font-variant-numeric:tabular-nums}
.idea-t{min-width:0;font-size:var(--t-lg);font-weight:600;line-height:1.45;overflow-wrap:anywhere;text-wrap:pretty}
.idea--rec .idea-t{font-size:var(--t-xl)}
.idea-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--s-4);color:var(--ink-2);font-size:var(--t-xs)}
.idea-meta .st[data-st=star]{color:var(--gold);font-weight:600}
.idea-host{color:var(--ink-2)}
a.idea-host:hover,.idea-ev a:hover{color:var(--gold)}
/* fix round: no clamp; «وش يشد» is the line he decides on, so all of it shows (the measure keeps it readable) */
.idea-pay{max-width:var(--measure);line-height:var(--lh-ui);overflow-wrap:anywhere;text-wrap:pretty}
.idea-pay strong{font-weight:600;color:var(--ink-2)}
.idea-ev{color:var(--ink-2);font-size:var(--t-sm);line-height:var(--lh-ui);overflow-wrap:anywhere}
.idea-nums{display:block;padding-inline-start:1.2em;color:var(--ink-2)}
.idea-nums .nowrap{white-space:nowrap}   /* fix round: a number never parts from its noun */
.idea-dot{color:var(--ink-3)}
.idea-src{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:0 4px}
.idea-src-l{color:var(--ink-3)}
.idea-nums a{margin-inline-start:var(--s-2)}
.idea-ev a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-gold);text-underline-offset:3px;white-space:nowrap}
.idea-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:2px}
.idea-acts .btn{min-height:40px}
/* fix round: the outline approve reads as the primary of its row (gold ink, a gold ring), still not a filled gold button */
.idea-acts .btn[aria-pressed=true]{border-color:var(--green);color:var(--ink)}
.idea-when{color:var(--ink-3);font-size:var(--t-xs)}
.idea-more .cand-grid{margin:0}
.idea-sub{color:var(--ink-2);font-size:var(--t-sm);font-weight:600}
.idea-hist{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--t-sm);color:var(--ink-2)}
.idea-hnote{display:block;color:var(--ink)}
.ideas-sub{font-size:var(--t-md);font-weight:600}
.ideas-recent{display:grid;gap:var(--s-2)}
.ideas-recent .rows-q{display:grid;gap:4px;margin:0;padding:0;list-style:none}
.ideas-row{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 14px;align-items:center;gap:var(--s-3);min-height:48px;padding:8px var(--s-4);border-radius:var(--r-1);background:var(--surface-1);color:var(--ink);text-align:start}
.ideas-row:hover{background:var(--surface-2)}
.ideas-row:hover .ep-row-go{color:var(--gold)}
.ideas-note{color:var(--ink-3);font-size:var(--t-xs)}
.ideas-abst{max-width:var(--measure)}
.ideas-manual{margin-top:var(--s-2)}
.ideas-day-acts{margin-top:var(--s-2)}
.ideas-earlier .job{margin-top:var(--s-3)}
.ideas-folds{display:grid;border-top:1px solid var(--line)}
.ideas-folds>details.fold{margin:0;padding:2px 0;border-bottom:1px solid var(--line)}
.ideas-page>details.ideas-earlier{margin:0}
.cal-became{margin:0 0 6px;padding-inline-start:18px}
.cal-became .btn{min-height:36px;padding:4px 12px;font-size:var(--t-sm)}
.cal-months,.bank-clusters{display:grid;border-top:1px solid var(--line)}
/* the calendar and bank summaries hold text, dates and a chip: one flowing line (not flex items), the chevron inline at the start */
.ideas-plan,.ideas-bank{display:grid;gap:34px;min-width:0}
:is(.ideas-plan,.ideas-bank) .block-head{border-bottom:0}
:is(.ideas-plan,.ideas-bank) .block-head h2::before{display:none}
:is(.ideas-plan,.ideas-bank) details:not(.tech)>summary{cursor:pointer;list-style:none;display:block;min-height:44px;padding-block:10px;color:var(--ink-2);font-size:var(--t-sm);line-height:1.7}
:is(.ideas-plan,.ideas-bank) details:not(.tech)>summary::-webkit-details-marker{display:none}
:is(.ideas-plan,.ideas-bank) details:not(.tech)>summary::before{content:"";display:inline-block;vertical-align:middle;width:7px;height:7px;margin-inline-end:10px;margin-block-start:-3px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
:is(.ideas-plan,.ideas-bank) details:not(.tech)[open]>summary::before{transform:rotate(-45deg)}
:is(.ideas-plan,.ideas-bank) details:not(.tech)>summary:hover{color:var(--ink)}
:is(.ideas-plan,.ideas-bank) details>summary .chip{margin-inline-start:6px;vertical-align:middle}
.cal-months>details,.bank-clusters>details{margin:0;border-bottom:1px solid var(--line)}
:is(.ideas-plan,.ideas-bank) :is(.cal-months,.bank-clusters)>details>summary{min-height:48px;font-size:var(--t-md);color:var(--ink)}
.ideas-plan .cal-months>details[open]>summary{color:var(--gold)}
.cal-months [data-lazy-body],.bank-clusters [data-lazy-body]{padding-bottom:var(--s-3)}

/* ---- الشركة (WP6, sections 3.6 and 5.2): the company blocks read as panels (one fill, no border, no square, no rule); one colour signal
   per panel (a faint ring for coral and gold tones); الصيانة's one line and its 9 checks; resource cards; the board folded with empty
   columns hidden at every width; the log and the board use the status component ---- */
body[data-area=company] .workspace>main>.page{gap:var(--s-5)}
body[data-area=company] .page.flush{gap:var(--s-5)}
body[data-area=company] .block{padding:var(--s-5);border-radius:var(--r-2);background:var(--surface-1);gap:var(--s-3)}
body[data-area=company] .block[data-tone=coral]{box-shadow:inset 0 0 0 1px var(--coral-40)}
body[data-area=company] .block[data-tone=gold]{box-shadow:inset 0 0 0 1px var(--line-gold)}
body[data-area=company] .team-flow .block{box-shadow:none}   /* «وش واقف» is coral by name, not by state: no ring when nothing is stuck */
body[data-area=company] .block-head{border-bottom:0;padding-bottom:0;align-items:center}
body[data-area=company] .block-head h2{font-size:var(--t-lg);font-weight:600}
body[data-area=company] .block-head h2::before{display:none}
body[data-area=company] .block:has(#ledger-list){padding:0;background:none}
body[data-area=company] .ah-member-hero{border-radius:var(--r-2)}
.team-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);align-items:start}
.team-tools input{max-width:420px}
details.co-board,details.co-fold{padding:var(--s-1) var(--s-5) var(--s-2);border-radius:var(--r-2);background:var(--surface-1)}
details.co-board>summary,details.co-fold>summary{font-size:var(--t-md);color:var(--ink);font-weight:600;min-height:52px}
.co-board-n{font-weight:400;color:var(--ink-2);font-size:var(--t-sm)}
:is(.co-board,.co-fold) .block{padding:var(--s-3) 0 0;background:none;box-shadow:none}
.k-column[data-empty=true],.k-column[data-hidden=true]{display:none}
#kanban-host{display:grid;gap:var(--s-3)}
.k-status .st,.k-card-top .st{font-size:var(--t-xs);color:var(--ink-2)}
.co-tech{display:grid;gap:var(--s-5)}
.co-say{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:var(--s-2) var(--s-4)}
.co-say-h{font-size:var(--t-lg);font-weight:600;flex:none}
.co-say-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;color:var(--ink);font-size:var(--t-md);line-height:var(--lh-ui)}
.co-sep{color:var(--ink-3)}
.co-ops .panel-head h2{font-size:var(--t-lg)}
.co-ops-st{margin-inline-start:auto;font-size:var(--t-sm)}
.co-lead{color:var(--ink-2);font-size:var(--t-sm);max-width:var(--measure)}
.co-checks{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--s-6)}
.co-check{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);padding:10px 0;border-bottom:1px solid var(--line);font-size:var(--t-sm);min-width:0}
.co-check-n{color:var(--ink);min-width:0}
.co-check .st{color:var(--ink-2);white-space:nowrap}
.co-folds{display:grid;gap:var(--s-3)}
.co-counts{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;font-size:var(--t-md)}
.co-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:var(--s-3)}
.co-card{display:grid;gap:6px;align-content:start;padding:var(--s-4);border-radius:var(--r-1);background:var(--surface-1);box-shadow:inset 0 0 0 1px var(--line);min-width:0}
.co-card-head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-2)}
.co-card-head strong{font-size:var(--t-md);font-weight:600;min-width:0;overflow-wrap:anywhere}
.co-card>small{color:var(--ink-2);font-size:var(--t-xs);line-height:1.7}
.co-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px var(--s-4);margin-top:var(--s-2)}
.co-fields>div{min-width:0}
.co-fields dt{color:var(--ink-3);font-size:var(--t-xs)}
.co-fields>.co-wide{grid-column:1/-1}
.co-fields dd{margin:0;font-size:var(--t-sm);overflow-wrap:break-word}
.co-fields dd small{display:block;color:var(--ink-2);font-size:var(--t-xs);line-height:1.6}
.co-checked{font-size:var(--t-xs);color:var(--ink-2)}
.co-unk-line{margin:0;color:var(--ink-3);font-size:var(--t-xs)}
.co-flow-off{margin:0}
.co-big{font-size:var(--t-xl);font-weight:600;line-height:var(--lh-tight)}
.co-sub{font-size:var(--t-md);font-weight:600;color:var(--ink-2);margin-top:var(--s-2)}
.co-footer{color:var(--ink-3)}
.cov-state.st{border:0;background:none;border-radius:0;padding:0;padding-inline-start:1.2em;color:var(--ink-2);display:inline-block}
.cov-state.st[data-st=stop]{color:var(--coral)}
#resources-host{display:grid;gap:var(--s-5)}
#reference-co:empty{display:none}
/* السجل and the board filters (restyle): the pressed source or lane reads like the segments (a gold ring), not a white pill */
body[data-area=company] :is(.chips,.lanes) button{border-color:var(--line);background:transparent}
body[data-area=company] :is(.chips,.lanes) button[aria-pressed=true]{background:var(--surface-2);color:var(--ink);border-color:var(--line-gold);font-weight:600}
body[data-area=company] .ledger-tools{gap:var(--s-3)}
body[data-area=company] .ledger-tools select{max-width:320px}
body[data-area=company] .ledger-day{font-size:var(--t-sm);color:var(--ink);font-weight:600}

/* ---- phone (section 3.3): one column, 16 px gutter, the gold button above the fold, steps as a scroll-snap row ---- */
/* ---- WP6b «التكامل 1» (DESIGN.md section 8 WP6b): the momentum strip under «الحين», the audience goal, the register button, the team roles.
   Palette tokens only; every state is a status component (glyph drawn above plus words), never colour alone (DEC-341). ---- */
.cmd-slot[data-cmd=mo]{grid-column:1/-1}
.cmd-slot:empty{display:none}
.panel--mo{gap:var(--s-2);padding:var(--s-3) var(--s-4)}
.panel--mo .panel-head{min-height:30px;gap:var(--s-2) var(--s-4)}
.mo-title{font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.mo-status{font-size:var(--t-sm)}
.mo-act{margin-inline-start:auto}
.mo-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-2) var(--s-5);margin:0;padding:0;list-style:none}
.mo-cell{font-size:var(--t-sm);line-height:1.6;color:var(--ink-2);min-width:0}
.mo-cell.mo-stock{color:var(--ink)}
.mo-target{color:var(--ink-3);font-size:var(--t-xs)}
.mo-q{display:grid;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-1)}
.mo-q-t{font-size:var(--t-sm)}
.mo-q-acts{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.mask{color:var(--ink-2);letter-spacing:.12em}
.hide-btn{margin-inline-start:auto;min-height:32px}
.ep-li:has(.ep-reg){display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 var(--s-3)}
.ep-reg{justify-self:end}
.ep-goal .goal{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s-4) var(--s-6);align-items:start}
.goal-main{display:grid;gap:var(--s-2);min-width:0}
.goal-big{display:flex;align-items:baseline;gap:var(--s-3);flex-wrap:wrap;font-size:var(--t-display);font-weight:600;line-height:1.1}
.goal-cap{font-size:var(--t-sm);font-weight:400;color:var(--ink-2)}
.goal-bar{display:block;width:100%;height:10px;border:0;border-radius:var(--r-pill);background:var(--surface-3);appearance:none;-webkit-appearance:none;overflow:hidden}
.goal-bar::-webkit-progress-bar{background:var(--surface-3)}
.goal-bar::-webkit-progress-value{background:var(--gold)}
.goal-bar::-moz-progress-bar{background:var(--gold)}
.goal-line{font-size:var(--t-sm);color:var(--ink-2)}
.goal-sub{font-size:var(--t-xs);color:var(--ink-3)}
.goal-lines{display:grid;gap:6px;margin:0;padding:0;list-style:none;font-size:var(--t-sm)}
.team-roles .block-head .meta{margin-inline-start:auto}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:var(--s-4)}
.role{display:grid;gap:var(--s-3);align-content:start;min-width:0;padding:var(--s-4);border-radius:var(--r-2);background:var(--surface-1)}
.role[data-ran="1"]{box-shadow:inset 0 0 0 1px var(--line)}
.role-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--s-3)}
.role-head h3{font-size:var(--t-lg);font-weight:600;line-height:1.4}
.role-tags{display:flex;flex-wrap:wrap;gap:2px var(--s-3);font-size:var(--t-sm)}
.role-kv{display:grid;gap:var(--s-2);margin:0}
.role-kv>div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:var(--s-3);align-items:baseline}
.role-kv dt{color:var(--ink-3);font-size:var(--t-xs)}
.role-kv dd{margin:0;min-width:0;font-size:var(--t-sm);line-height:1.6;overflow-wrap:anywhere}
.role-gates,.role-warn,.role-who{display:flex;flex-wrap:wrap;gap:4px var(--s-3);margin:0;font-size:var(--t-sm)}
.role-who span{color:var(--ink-3)}
.role-member{color:var(--ink-2);text-decoration:underline;text-underline-offset:3px}
.role-member:hover{color:var(--ink)}
.role-gates-list{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-4);margin:var(--s-3) 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--t-sm)}
/* WP6c «التكامل 2» (DESIGN.md 10.15): the G4 card, the scorecard and hooks, the numbers form, التجارب, and الصوت's bank, countdown and credits.
   Tokens only; every state is words plus the glyph the .st component draws. */
.g4{display:grid;gap:var(--s-3);margin-block-start:var(--s-4);padding:var(--s-4);border-radius:var(--r-2);background:var(--surface-1)}
.g4 h3,.g4 h4{font-size:var(--t-md);font-weight:600;line-height:1.5}
.g4-not{color:var(--ink-2)}
.g4-reason{font-size:var(--t-sm)}
.g4-lines{margin:0;padding:0;list-style:none;display:grid;gap:4px;font-size:var(--t-sm);color:var(--ink-2)}
.g4-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-3)}
.g4-pl{display:grid;gap:var(--s-2);align-content:start;min-width:0;padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-2)}
.g4-pl-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px var(--s-3)}
.g4-cap-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3);font-size:var(--t-sm);color:var(--ink-2)}
.g4-cap{margin:0;padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-1);font-size:var(--t-sm);line-height:var(--lh-read);white-space:pre-wrap;overflow-wrap:anywhere;user-select:text}
.g4-line{margin:0;font-size:var(--t-sm);line-height:var(--lh-ui)}
.g4-refuse ul,.g4-chk ul,.g4-after ul{margin:0;padding-inline-start:var(--s-4);display:grid;gap:4px;font-size:var(--t-sm)}
.g4-why{color:var(--ink-3)}
.g4-posted{display:grid;gap:var(--s-2)}
.post-links{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.post-links .row{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px var(--s-3);font-size:var(--t-sm)}
.post-pl{font-weight:600}
.post-when,.post-v{color:var(--ink-3);font-size:var(--t-xs)}
.sc{display:grid;gap:var(--s-2);font-size:var(--t-sm)}
.sc-head{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-3);margin:0}
.sc-total{font-size:var(--t-xl);font-weight:600}
.sc-bar{display:block;width:120px;max-width:100%;height:8px;border:0;border-radius:var(--r-pill);background:var(--surface-3);appearance:none;-webkit-appearance:none;overflow:hidden}
.sc-bar::-webkit-progress-bar{background:var(--surface-3)}
.sc-bar::-webkit-progress-value{background:var(--gold)}
.sc-bar::-moz-progress-bar{background:var(--gold)}
.sc-items,.sc-gates{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.sc-items li,.sc-gates li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s-3)}
.sc-label{font-weight:600}
.sc-why{color:var(--ink-2);flex-basis:100%}
.sc-gates-h,.hk-h,.sc-room-h{margin:0;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
.sc-room{display:grid;gap:4px;margin-block-end:var(--s-3)}
.sc-room p{margin:0}
.sc-fold>summary{min-height:44px}
.hk{display:grid;gap:var(--s-2);margin-block:var(--s-3)}
.hk-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.hk-list li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-1);background:var(--surface-2)}
.hk-n{font-size:var(--t-xs);color:var(--ink-3)}
.hk-t{flex:1 1 220px;line-height:var(--lh-ui)}
.pl-hooks{margin-block:var(--s-3)}
.mf{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--s-3) var(--s-4);align-items:end}
.mf .mf-platform,.mf .mf-more,.mf .studio-error,.mf .actions{grid-column:1/-1}
.mf-platform{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5)}
.mf-platform legend{padding:0;margin-block-end:var(--s-2);font-size:var(--t-sm);color:var(--ink-2)}
.mf-platform label{display:inline-flex;align-items:center;gap:var(--s-2);min-height:44px}
.mf-state{margin:0 0 var(--s-2);padding:0;list-style:none;display:grid;gap:4px;font-size:var(--t-sm)}
.mf [aria-invalid=true]{outline:2px solid var(--coral,#f0505a);outline-offset:1px}
.lb-weekly,.lb-rules,.lb-props,.lb-exp,.lb-lab,.lb-up,.sb-classes,.cr-rows,.cr-list{margin:0;padding:0;list-style:none;display:grid;gap:8px}
.lb-weekly li,.lb-rules li,.sb-classes li{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--s-3);font-size:var(--t-sm)}
.lb-name,.lb-rule-t,.sb-name{font-weight:600}
.lb-val,.lb-base,.lb-pts,.lb-by,.lb-var,.cr-v{color:var(--ink-3);font-size:var(--t-xs)}
.lb-sub{margin:var(--s-4) 0 var(--s-2);font-size:var(--t-md);font-weight:600}
.lb-prop{display:grid;gap:var(--s-2);padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-2)}
.lb-prop-t{margin:0;line-height:var(--lh-ui)}
.lb-var{display:block}
.sb-ep{display:grid;gap:4px;margin-block-end:var(--s-3)}
.sb-ep h3{font-size:var(--t-md);font-weight:600}
.sb-ep p{margin:0}
.cr-rows>li{display:grid;gap:4px;padding:var(--s-3);border-radius:var(--r-1);background:var(--surface-1)}
.cr-rows p{margin:0}
.cr-title{font-weight:600}

/* ---- WP8 (DESIGN.md section 8 WP8, 11): the phone, every area (390 by 844 and 360 by 740), and the accessibility pairs. Palette and tokens only.
   Phone rules live under 900 px, with the same width query as everything above. Targets are 44 px or larger and text is 13 px or larger
   (--t-xs is 13 px); long Arabic labels wrap instead of running off the screen; nothing scrolls sideways except the rows that own their scroll. ---- */
.chip{white-space:normal;max-width:100%;text-align:start}
.tech,.tech dt,.tech dd,details.tech>dl{overflow-wrap:anywhere}
.tech dd{min-width:0}
.ws-bar-host{display:none}
@media(max-width:899px){
 /* the status bar (fix round): title and pill on one row, the segments under them; when [data-reauth] shows it takes a full row
    and wraps, so nothing runs off the screen (section 3: no sideways scroll) */
 .topbar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;min-height:48px;padding:8px var(--gutter) 6px;gap:6px var(--s-3)}
 .topbar-inner>div:first-child{display:contents}
 .topbar h1{grid-row:1;grid-column:1;align-self:center;min-width:0;font-size:var(--t-md);overflow:hidden;text-overflow:ellipsis}
 .topbar .actions{grid-row:1;grid-column:2;min-width:0;max-width:100%;flex-wrap:wrap;justify-content:flex-end}
 /* fix round: the segments wrap instead of scrolling, so the fifth one («+ فكرة من عندك») is never off-screen */
 .segnav{grid-row:2;grid-column:1/-1;margin:0 calc(-1 * var(--s-1));flex-wrap:wrap;overflow:visible;row-gap:2px}
 .topbar-inner:has([data-reauth]:not([hidden])) .actions{grid-row:2;grid-column:1/-1;justify-content:flex-start}
 .topbar-inner:has([data-reauth]:not([hidden])) .segnav{grid-row:3}
 .topbar [data-reauth]{max-width:100%;white-space:normal}
 .cmd{grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
 .cmd-slot[data-cmd]{grid-column:1/-1;grid-row:auto}
 .core-who .link-btn{display:none}   /* calm A (CALM.md §2.3): the emblem opens «وش يعرف أبو حسن» on the phone; the text link stays on desktop */
 .panel{padding:var(--s-4);gap:var(--s-3)}
 .panel-head h2{font-size:var(--t-lg)}
 .panel--core{gap:var(--s-4)}
 .emb-btn{width:64px;height:64px}
 .core-greet{font-size:var(--t-xl)}
 .now-line{font-size:var(--t-lg)}
 .core-now .btn-gold{justify-self:stretch;min-width:0}
 .rows-q>.row{grid-template-columns:minmax(0,1fr) auto}
 .rows-q>.row .btn-row{grid-column:auto;justify-self:end;padding-inline:10px;max-width:9.5em;white-space:normal;line-height:1.3}
 #cmd-q-you .rows-q>li:nth-child(n+4){display:none}
 .qtab{padding:4px clamp(10px,3vw,12px);font-size:var(--t-sm)}
 .conduit{display:flex;gap:6px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
 .conduit::-webkit-scrollbar{display:none}
 .conduit::before,.node-i{display:none}
 .node-li{flex:0 0 auto;scroll-snap-align:start}
 .node{min-width:80px;min-height:64px;padding:6px 10px;background:var(--surface-1)}
 .node[data-sel]{background:var(--gold-8);box-shadow:inset 0 0 0 1px var(--gold)}
 .node-n{font-size:var(--t-2xl)}
 .node[data-has="0"] .node-n{font-size:var(--t-lg);line-height:var(--t-2xl)}
 .pipe-lanes{grid-template-columns:minmax(0,1fr)}
 .pipe-lane:not([data-on]){display:none}
 .vitals{grid-template-columns:repeat(2,minmax(0,1fr))}
 .vital{padding:var(--s-3)}
 .vital-n{font-size:clamp(var(--t-xl),7vw,var(--t-2xl))}
 .tick-row{grid-template-columns:minmax(0,1fr) auto;row-gap:2px;padding-inline:4px}
 .tick-t{grid-column:1;grid-row:1}
 .tick-main{grid-column:1;grid-row:2}
 .tick-go{grid-column:2;grid-row:1/3}
 .tick>li:nth-child(n+5){display:none}
 .dock .rail-badge{top:4px;inset-inline-end:calc(50% - 24px)}
 /* WP4 phone (section 3.4): compact header, the track as «4 من 9 · السكربت», drafts side by side as a swipe row, side blocks last */
 .ep-group{padding:var(--s-3)}
 .ep-row,.ep-row--parked{grid-template-columns:minmax(0,1fr) 14px;gap:6px var(--s-2)}
 .ep-row>.ep-row-go{grid-column:2;grid-row:1/span 4}
 .ep-row>*:not(.ep-row-go){grid-column:1}
 .ep-row-time:empty{display:none}
 /* the effect rows: «استخدمه» keeps the end of its line (or of the next one), «اسمع» stays with its sound */
 .ah-report .row>span>small.sfx-alt>a{margin-inline-start:0}
 .ah-report .row>span>small.sfx-alt>.sfx-use{margin-inline-start:auto}
 .ws-title{font-size:var(--t-xl)}
 .ws-track-fold{display:block}
 .ws-track-fold:not([open])+.ws-track{display:none}
 .ws-next{padding:var(--s-4)}
 .ws-next-line{font-size:var(--t-lg)}
 .ws-next .btn-gold{justify-self:stretch}
 .ws-body{grid-template-columns:minmax(0,1fr)}
 .ws-main,.ws-side{grid-column:1/-1;grid-row:auto}
 .ws-side{position:static;max-height:none;overflow:visible}
 .ws-sec>summary{grid-template-columns:minmax(0,1fr) 10px;gap:2px var(--s-3);padding:10px var(--s-4)}
 .ws-sec>summary::after{grid-column:2;grid-row:1}
 .ws-sec-sum{grid-column:1}
 .ws-sec-body{padding:0 var(--s-4) var(--s-4)}
 .stage-fold{padding:0 var(--s-4)}
 .ws .ah-drafts{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;gap:var(--s-3);padding-bottom:4px}
 .ws .ah-draft{flex:0 0 86%;scroll-snap-align:start}
 .res-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .res-meta{grid-column:1/-1}
 .res-v small{display:flex;flex-wrap:wrap;column-gap:.9em}   /* one pair per run, no «·» left at a line end */
 .res-dot{display:none}
 /* WP5 phone (section 3.5): cards stack with the ★ card first, actions wrap two by two at 44 px or more */
 .ideas{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
 .idea{padding:var(--s-4)}
 .idea--rec .idea-t{font-size:var(--t-lg)}
 .idea-acts .btn{flex:1 1 calc(50% - 8px);min-height:44px;padding-inline:8px}
 .ideas-ev-line .ideas-day{flex-basis:100%}
 .ideas-ev-line .ideas-day+.ideas-sep{display:none}
 /* WP6 phone (section 3.6): one column; the flow strip stacks, the checks in one column, the cards full width */
 body[data-area=company] .block{padding:var(--s-4)}
 details.co-board,details.co-fold{padding:var(--s-1) var(--s-4) var(--s-2)}
 .team-flow{grid-template-columns:minmax(0,1fr)}
 .co-checks{grid-template-columns:minmax(0,1fr)}
 /* calm D (CALM.md §4.8, §4.9): «الفني يقول» stays one wrapped line on the phone (was a column); a department fold's padding */
 .co-say-line{flex-wrap:wrap;align-items:baseline;gap:6px 10px}
 .co-say-line>.co-when>.co-sep{display:none}
 body details.fold.ah-dept{padding:var(--s-1) var(--s-4) var(--s-2)}
 body[data-area=company] details.tech:not(.fold)>summary{min-height:44px}
 .co-fields{grid-template-columns:minmax(0,1fr);gap:8px}
 .co-fields>div{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3)}
 .co-fields dd{text-align:end}
 .ep-li:has(.ep-reg){grid-template-columns:minmax(0,1fr)}
 .ep-reg{justify-self:stretch;margin:0 8px 10px}
 .ep-goal .goal{grid-template-columns:minmax(0,1fr)}
 .goal-big{font-size:var(--t-2xl)}
 .role-grid{grid-template-columns:minmax(0,1fr)}
 .role-kv>div{grid-template-columns:minmax(0,1fr)}
 .mo-q-acts .btn{flex:1 1 auto}
 /* WP6c phone: one column, the caption blocks and the form fields full width, the proposal buttons at 44 px */
 .g4-grid,.mf{grid-template-columns:minmax(0,1fr)}
 .g4{padding:var(--s-3)}
 .lb-prop .btn{flex:1 1 auto;min-height:44px}
 .sc-bar{width:100%}
 .pal-open span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}
 .site-logo{width:44px;height:38px}
 .topbar .actions{gap:var(--s-2)}
 /* the dock: five items on one row, 56 px buttons, the home-indicator inset below them (studio.css), labels at 13 px */
 .dock .rail-badge{font-size:var(--t-xs);min-width:22px;height:22px}
 .dock button{overflow-wrap:anywhere}
 /* the step chips (the conduit) are the phone's tablist: their own scroll container, one snap per chip, a gutter so the first and the last are never flush */
 .conduit{scroll-padding-inline:var(--s-4);-webkit-overflow-scrolling:touch}
 .node[aria-disabled=true]{cursor:default}
 /* the segments: their own scroll container too. The current one is centred by console.js, the next one peeks in from the edge */
 .segnav{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;scroll-snap-type:x proximity;scroll-padding-inline:var(--s-3);overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;row-gap:0}
 .segnav button{scroll-snap-align:center}
 /* the sticky next-action bar of the episode workspace: the one gold button, above the dock; the card above keeps the sentence and its notes */
 .ws{display:flex;flex-direction:column}   /* a sticky item sticks inside its flex container; inside the old grid it could never leave its own row */
 .ws>*{min-width:0}
 .ws-bar-host{display:block;position:sticky;bottom:calc(var(--dock) + 8px + env(safe-area-inset-bottom,0px));z-index:20;margin-top:var(--s-4);pointer-events:none}
 .ws-bar-host:empty{display:none}
 .ws-bar{pointer-events:auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-3);padding:var(--s-3);border-radius:var(--r-2);background:rgba(10,10,10,.97);box-shadow:var(--glow-gold);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
 .ws-bar--quiet{box-shadow:0 0 0 1px var(--line-2)}
 .ws-bar-line{margin:0;font-size:var(--t-sm);line-height:var(--lh-ui);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
 .ws-bar .btn{white-space:normal;max-width:11em;line-height:1.3}
 #ep-ws:has(.ws-bar) .ws-next .btn{display:none}
 body:has(.ws-bar) #toast{bottom:calc(var(--dock) + 92px + env(safe-area-inset-bottom,0px))}
 /* sheets: 92dvh bottom sheets that scroll inside themselves, one at a time (console.js modal()) */
 .sheet{max-height:92dvh;overscroll-behavior:contain}
 /* 44 px targets (WCAG 2.5.5 on the phone): every button, tab, summary, select, text field and button-like link; a checkbox or radio gets a 44 px row */
 body.app :is(button,summary,select,input:not([type=checkbox]):not([type=radio]):not([type=hidden]):not([type=range]):not([type=file]),textarea,a.btn,[role=tab],[role=option]):not(.sr-only){min-height:44px}
 body.app :is(button,a.btn,[role=tab]):not(.sr-only){min-width:44px}
 body.app label:has(>input[type=checkbox],>input[type=radio]){min-height:44px;display:inline-flex;align-items:center;gap:var(--s-2)}
 body.app :is(.panel-foot,.core-who,.ws-back) .link-btn{min-height:44px}
 /* 13 px text: the small notes of older screens (company, القيادة, الملقّن) come up to --t-xs on the phone */
 body.app :is(.ah-track small,.res-row small,.ah-track li,.k-count,.pl-card>div,.trail-list a small,.change-row small,.sc-tag,.truth .truth-pill i,.truth .truth-lines i,
  .pl-intro .pl-kicker,.pl-list-tools h3 span,.pl-tile p,.pl-badge,.pl-library .pl-subtle,.pl-tip,.pl-counts,.pl-preview-heading>span,.pl-preview-card>div,
  .pl-savebar p,.pl-history a,.pl-history button,.pl-savebar .pl-secondary,.pl-link-row input){font-size:var(--t-xs)}
 /* 2026-10-22 calm C (CALM.md §4.4-4.5): a list row is the title, then the next words with the time; the step track on one line */
 .ep-row,.ep-row--parked{grid-template-columns:minmax(0,1fr) 14px;row-gap:2px;min-height:var(--row-min);padding-block:6px}
 .ep-row>.ep-row-t{grid-column:1;grid-row:1}
 .ep-row>.ep-row-next{grid-column:1;grid-row:2;column-gap:var(--s-2)}
 .ep-row>.ep-row-time{grid-column:1;grid-row:3}
 .ep-row>.mini{display:none}
 .ep-row>.ep-row-go{grid-column:2;grid-row:1/4}
 /* «سجّلها» stays a visible button, beside its row instead of a full-width line under it */
 .ep-li:has(.ep-reg){grid-template-columns:minmax(0,1fr) auto;gap:0 var(--s-2)}
 .ep-reg{justify-self:end;align-self:center;margin:0 4px 0 0;padding-inline:12px}
 /* the five filters scroll in one row instead of wrapping into two */
 .ep-filters{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none;padding-bottom:2px}
 .ep-filters::-webkit-scrollbar{display:none}
 .ep-filters>button{flex:none}
 /* the step track on one line: every glyph, and only the current step's word (the others stay for screen readers) */
 .ws-track-fold{display:none}
 .ws-track-fold:not([open])+.ws-track{display:flex}
 .ws-track{flex-wrap:nowrap;gap:2px 10px;overflow:hidden}
 .ws-track li:not([aria-current]) .st{display:inline-block;width:1.2em;overflow:hidden;white-space:nowrap;vertical-align:bottom;color:transparent}
 .ws .ws-after{padding:var(--s-2) var(--s-4)}
 /* fix C-1 (CALM.md §4.1, P1): on the phone the first screen holds «الحين», the strip, the «دورك» tabs and the first «دورك» row.
    The status bar stays one row (the bigger type made the freshness pill wrap under the logo): the actions never wrap unless the step-up
    button shows, and a long presence word is cut by its own ellipsis. The core card: a smaller emblem, the name line keeps «آخر شغل …»
    (the presence word is in the status bar right above it), «الحين» as the card's corner label and «ليش؟» beside the gold button, tighter padding. The strip's key is an inline
    prefix of its words, so a row is as tall as its words. */
 .topbar-inner{column-gap:6px}
 .topbar .actions{gap:4px}
 .topbar-inner:not(:has([data-reauth]:not([hidden]))) .actions{flex-wrap:nowrap}
 .topbar .truth{flex:none}
 .topbar .truth-pill{padding-inline:10px}
 .cmd{gap:var(--s-3)}
 .panel--core{gap:10px;padding:var(--s-3)}
 .emb-btn{width:48px;height:48px}
 .core-id{gap:var(--s-3)}
 .core-name>.st{display:none}
 .core-now{grid-template-columns:minmax(0,1fr) auto;gap:8px var(--s-3);padding:10px var(--s-3) var(--s-3)}
 .core-now>*{grid-column:1/-1;min-width:0}
 .core-now>.core-eyebrow{grid-column:2;grid-row:1;align-self:start}   /* «الحين» is the card's corner label, beside the sentence's first line */
 .core-now>.now-line{grid-column:1;grid-row:1}
 .core-now>.btn-gold:has(+details.now-why){grid-column:1}
 .core-now>.btn-gold+details.now-why:not([open]){grid-column:2;align-self:center;margin-top:0}
 .cmd .panel--fresh{padding:6px var(--s-2)}
 ul.fresh{gap:2px}
 .fresh>li>.fresh-row{display:block;padding:6px 8px;padding-inline-start:14px}
 .fresh .fresh-k{display:inline;margin-inline-end:.4em;line-height:inherit}
 .fresh .fresh-v{display:inline}
 .fresh .fresh-v>.fresh-w{display:inline;overflow:visible}
 .fresh .fresh-v2{display:block}
 /* fix C-1 (CALM.md §4.5, §9 «fold more»): the episode with the writers room open. An open writers section drops its summary line (the room's
    own first line says the same «آخر واحد خلص …»); the sections are a little narrower in padding, and the draft's text box is 34% of the
    screen (it scrolls inside, the text stays whole and visible, DEC-441) */
 .ws-sec[data-sec=writers][open]>summary .ws-sec-sum{display:none}
 .ws-sec>summary{padding-inline:var(--s-4)}
 .ws-sec-body{gap:var(--s-3);padding:0 var(--s-4) var(--s-4)}
 .ws .ah-draft-text{max-height:34vh}
}
@media(prefers-reduced-motion:reduce){.emb-r1,.lg-b{animation:none!important}dialog.drawer.is-open[open],dialog.palette[open]{animation:none}.lg[data-state=working] .lg-b{stroke-opacity:1}}

/* ---- 2026-10-22 calm A «الوقت» (calm-20261022/design/CALM.md §1.2, §2, §4.5). #cmd-fresh «وش صار ومتى»: on the phone a list under «الحين»
   (DOM order = visual order), on wider screens one band above «الحين» and «دورك» with one cell per row. Each row is one button; data-tone only
   draws a 3 px start-edge bar, the glyph and the words carry the meaning (DEC-341). Each line holds at most two line boxes. ---- */
.panel--fresh{padding:var(--s-3) var(--s-4);gap:0}
.fresh{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr));gap:var(--s-2) var(--s-4);margin:0;padding:0;list-style:none}
.fresh>li{position:relative;min-width:0;display:grid}
.fresh>li::before{content:"";position:absolute;inset-block:8px;inset-inline-start:0;width:3px;border-radius:3px;background:var(--ink-3);pointer-events:none}
.fresh>li[data-tone=you]::before{background:var(--gold)}
.fresh>li[data-tone=done]::before,.fresh>li[data-tone=run]::before{background:var(--green)}
.fresh>li[data-tone=stop]::before{background:var(--coral)}
/* the key sits beside its lines (a short label column), so a row is as tall as its words */
.fresh-row{display:grid;grid-template-columns:3.6em minmax(0,1fr);align-content:start;gap:2px var(--s-2);width:100%;min-width:0;min-height:48px;padding:6px 8px;padding-inline-start:14px;border-radius:var(--r-1);text-align:start;color:var(--ink);line-height:1.45}
.fresh-row:hover{background:var(--surface-2)}
.fresh-k{grid-row:1/span 2;font-size:var(--t-sm);font-weight:600;color:var(--ink-2);line-height:calc(var(--t-md) * 1.45)}
/* a line is its words then its time. Line 1 can carry names and titles, so only its words clamp at two lines and the time is a nowrap
   sibling that wraps under them when needed; line 2 is one fixed dictionary phrase, never clamped, so its time stays inline (fix A-1) */
.fresh-v,.fresh-v2{grid-column:2;min-width:0}
.fresh-v{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.3em}
.fresh-v>.fresh-w{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden;min-width:0;max-width:100%}
.fresh-v .st{display:inline}
.fresh-v time,.fresh-v2 time{color:var(--ink-2);white-space:nowrap}
.fresh-v2{color:var(--ink-2);font-size:var(--t-sm)}
.core-last{color:var(--ink-2);font-size:var(--t-sm)}
.core-last time{white-space:nowrap}
/* the writers room's round line (first in the room) and each draft's finish time on its fold line */
.ah-round-line{color:var(--ink-2);font-size:var(--t-sm);line-height:1.6}
.ah-round-line time,.ah-sum-time time{white-space:nowrap}
.ah-sum-time{color:var(--ink-3);font-size:var(--t-sm)}
/* a small heading inside a closed «تفاصيل» fold (the hunt evidence's «المصدر»; package C's P6 headings reuse it) */
.fold-h{margin:var(--s-2) 0 2px;font-size:var(--t-sm);font-weight:600;color:var(--ink-2)}
/* §1.2: a long press on a time shows its exact Riyadh time (console.js), so the press never opens the system callout or selects the text */
.ideas-seg time{white-space:nowrap}
time[data-ts]{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ---- 2026-10-22 calm C «الهدوء» (calm-20261022/design/CALM.md §4.1-4.5, §5.2-5.3). Ameer: «مريحة لعيني ... مابي تفاصيل كثيرة ... واذا وصلت
   تكون فيه تفاصيل ولكن مرتبة». One accent, fewer lines, one detail fold per card with its headings in a fixed order. ---- */
/* one accent (§5.3): gold for «you», the «الحين» card and the one filled button of a screen («الحين», the next step, the ★ idea's «اعتمدها»);
   every other primary button is a gold outline. Dialogs (outside main) keep their filled confirm. */
body.app main .btn-primary{border:1px solid var(--gold);color:var(--gold);background:var(--gold-8);font-weight:600}
body.app main .btn-primary:hover{filter:none;border-color:var(--gold);background:rgba(253,176,22,.14)}
body.app main .idea--rec .btn-primary{background:var(--gold);border-color:var(--gold);color:var(--bg)}
body.app main .idea--rec .btn-primary:hover{filter:brightness(1.05);background:var(--gold)}
/* folds (§5.3, D11): the summary reads like a line of the page; the headings inside are small and quiet, in the order وش صار، ليش، المصدر، تقني */
details.fold>summary{font-size:var(--t-md);color:var(--text-strong)}
details.fold>summary:hover{color:var(--ink)}
:is(.fold-h,.more-h){font-size:var(--t-sm);font-weight:600;color:var(--ink-2);margin-top:12px}
.more-sub{margin:8px 0 2px;font-size:var(--t-sm);font-weight:500;color:var(--ink-2)}
.more-what{display:grid;gap:4px;margin:4px 0 0;padding:0;list-style:none;color:var(--ink-2);font-size:var(--t-sm)}
.more-what time{white-space:nowrap}
details.tech.more-tech{margin-top:12px}
/* §5.3 rows: one separator, at least --row-min tall */
.rows-q>li,.ep-li{min-height:var(--row-min)}

/* §5.3: the «الحين» card alone keeps the gold-8 fill and a 1 px gold line; the panel around it does not draw a second gold frame (a stop keeps its coral line) */
.cmd .panel--core[data-attn=waiting]{box-shadow:none}
.core-now{box-shadow:inset 0 0 0 1px var(--line-gold)}
/* القيادة (§4.1): «ليش؟» under «الحين», «التفاصيل» under the pipe's النشر end and in «الرصيد والسلسلة», «نبض الشركة» folded on the phone */
.core-now details.now-why{margin-top:-4px}
.core-now details.now-why>summary{min-height:36px;font-size:var(--t-sm);color:var(--ink-2)}
.core-now details.now-why>.now-meta{margin-top:4px}
/* fix C-1 (§4.1, 1280 height): «دورك» shows three rows on every width, as the phone did; «كل اللي ينتظرك (N)» under it opens the rest */
.cmd #cmd-q-you .rows-q>li:nth-child(n+4){display:none}
/* the two «التفاصيل» of القيادة sit at the end of their panel's head line; open, they take the whole width under it */
.panel-head>details.fold{margin-inline-start:auto}
.panel-head>details.fold[open]{flex-basis:100%;margin-inline-start:0}
.panel-head>details.fold>summary{min-height:36px;font-size:var(--t-sm);color:var(--ink-2)}
details.pipe-more .pipe-note{margin-top:4px}
details.mo-more>.mo-list{margin-top:8px}
details.mo-more>.mo-act{margin-top:8px}
details.vitals-fold>summary h2{font-size:var(--t-lg);font-weight:600;line-height:var(--lh-tight)}
details.vitals-fold>.vitals-hide{display:flex;justify-content:flex-end}

/* الأفكار (§4.2): the ★ card shows «وش يشد» cut at two lines; the whole of it is under «ليش» */
/* fix C-1 (§4.2, P5): an idea's title is cut at three lines; the whole of it is the h3's title and stays in the text for screen readers */
.idea-t{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
.idea-pay--short{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.idea-more-acts{display:flex;flex-wrap:wrap;gap:var(--s-2);margin-top:12px}
.idea-more .idea-ev{margin-top:4px}

/* الحلقات (§4.4): the title at most two lines, then the next words with the time; the dot track on the desktop only */
.ep-row-t strong{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.ep-row-t small{display:none}
/* P7: on a row with its «سجّلها» button the next words («سجّلها بالاستوديو أول») say what the button says; they stay for screen readers only */
.ep-li:has(>.ep-reg) .ep-row-next>.st:first-child{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* the episode (§4.5): the steps after the current one are one muted line; «ليش؟» under the next step; the copy link in the side */
.ws-sec[data-later]{display:none}
.ws-after{margin:0;padding:var(--s-2) var(--s-5);color:var(--ink-3);font-size:var(--t-sm)}
.ws-after .st{color:var(--ink-3)}
details.ws-why{justify-self:stretch}
details.ws-why>summary{min-height:36px;font-size:var(--t-sm);color:var(--ink-2)}
.ws-copy{margin:6px 0 4px;direction:rtl}
.ws-copy .link-btn{min-height:36px}



/* 2026-10-22 calm D (calm-20261022/design/CALM.md §4.7-4.12): the rest of Studio, calm. One line with its time first, closed folds that say their
   count, nothing under 14 px, the DEC-341 palette only. */
/* الفريق: a department is a fold «{name} · {n}»; a member card is one line */
/* the department fold's padding: var(--s-5) here, var(--s-4) on the phone. fix D-1: the phone rule carries body so it outranks this later
   rule (the media width set is pinned, so no second media block) */
details.fold.ah-dept{padding:var(--s-1) var(--s-5) var(--s-2);border-radius:var(--r-2);background:var(--surface-1)}
details.fold.ah-dept>summary{font-size:var(--t-md);color:var(--ink);font-weight:600;min-height:52px}
details.fold.ah-dept>.ah-roster{padding-block:var(--s-1) var(--s-2)}
.ah-member{grid-template-columns:32px minmax(0,1fr) 14px;align-items:center;padding:10px 12px;border-radius:var(--r-1)}
.ah-member .ah-avatar{width:32px;height:32px;font-size:15px}
.ah-member-line{min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;font-size:var(--t-md)}
.ah-member-line strong{font-weight:600}
.ah-member-line .st{font-size:var(--t-sm)}
.ah-member-when{color:var(--ink-3);font-size:var(--t-sm);min-width:0;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.team-roles-fold>.team-roles>.block-head{display:none}
/* a folded section's own title repeats its summary: kept for screen readers (aria-labelledby), not shown */
:is(.ref-fold,.res-fold)>.block>.block-head>h2{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:is(.ref-fold,.res-fold)>.block>.block-head:not(:has(.meta,.chip,.st)){display:none}
/* الصيانة: «الفني يقول» one line, its other words folded; a report is one line; تشغيل أبو حسن one line */
details.co-say-more{flex-basis:100%}
details.co-say-more>summary,details.inc-more>summary,details.co-ops-more>summary,details.co-more>summary{min-height:44px;font-size:var(--t-sm);color:var(--ink-2)}
.co-say-rest{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px;margin:0;color:var(--ink-2);font-size:var(--t-sm)}
.inc-line{color:var(--ink-3);font-size:var(--t-sm)}
.co-when{white-space:nowrap;color:var(--ink-2);font-size:var(--t-sm)}
/* a calm report row keeps its state beside its title at every width (the phone stacks other rows) */
.ah-report .row:has(>span>.inc-line,>span>.inc-more){grid-template-columns:minmax(0,1fr) auto;align-items:start}
details.inc-more>small,details.inc-more>.note{display:block;color:var(--ink-2);font-size:var(--t-sm);line-height:1.7}
.co-ops-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 10px}
details.co-ops-more>.co-checks{margin-block:var(--s-2)}
/* الموارد: a card is its name, its check state and «آخر تحقق»; Apify one line */
details.co-more{margin-top:2px}
details.co-more>small{display:block;color:var(--ink-2);font-size:var(--t-sm);line-height:1.7}
.co-big .co-read{font-size:var(--t-sm);font-weight:400;color:var(--ink-2)}
.co-big .co-sep{font-size:var(--t-sm);color:var(--ink-3)}
/* السجل: a day is a fold, its heading the summary; the clocks stay */
.ledger-group>summary{list-style:none;cursor:pointer;min-height:44px}
.ledger-group>summary::-webkit-details-marker{display:none}
.ledger-group>summary::before{content:"";flex:none;width:7px;height:7px;border-inline-end:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);transition:transform .15s}
.ledger-group[open]>summary::before{transform:rotate(-45deg)}
@media(prefers-reduced-motion:reduce){.ledger-group>summary::before{transition:none}}
.co-card:has(>details.co-more){padding-bottom:var(--s-1)}
.co-card>.co-checked{margin:0}