/* Additions to the v12 system for the live console. v12 variables only, equal padding everywhere, touch targets 44px on phones. */
.av-c4{background:linear-gradient(140deg,#4fa079,#2f6a4f)}.av-c5{background:linear-gradient(140deg,#9b5fb5,#62367a)}.av-c6{background:linear-gradient(140deg,#cba62c,#8a6d12)}
.av-c7{background:linear-gradient(140deg,#d05a43,#8e3322)}.av-c8{background:linear-gradient(140deg,#3a6ea5,#23466c)}
.bootmsg{position:fixed;inset:0;display:grid;place-content:center;justify-items:center;gap:12px;text-align:center;background:var(--ink);color:var(--paper);padding:24px}
.bootmsg .mk{width:52px;height:52px;border-radius:14px;background:var(--brand);display:grid;place-items:center}.bootmsg .mk .nrlogo{width:24px;height:24px;color:#fff}
.bootmsg h2{font-size:20px;font-weight:700}.bootmsg p{color:var(--mute);max-width:320px}
.bootmsg .spin{width:120px;height:3px;background:linear-gradient(90deg,transparent,var(--brand),transparent);background-size:200% 100%;animation:nrsweep 1.2s linear infinite}
@keyframes nrsweep{to{background-position:-200% 0}}
.tb-status.off{color:var(--warn)}.tb-status.off .dot{background:var(--warn)}
.ph-acts{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.save-state{font-size:12px;color:var(--mute);white-space:nowrap}
.notice-row{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:var(--r-lg);background:var(--ink-2);border:1px solid var(--line-2);font-size:13px;line-height:1.7;margin-bottom:14px}
.notice-row.warn{border-color:#d98a2b55;background:var(--warn-soft)}.notice-row .ic{width:16px;height:16px;flex-shrink:0;margin-top:3px}
.req{color:var(--brand)}.danger{color:var(--bad)!important}
.hint-i{display:inline-flex;gap:6px;align-items:center;font-size:12px}.hint-i .ic{width:13px;height:13px}
/* faces */
.face-flags{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}.face-flags .ic{width:11px;height:11px}
.face-new{display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;border:1.5px dashed var(--line-3);background:transparent;min-height:210px;color:var(--soft)}
.face-new:hover{border-color:var(--brand);color:var(--paper)}.face-new .fn-ic{width:40px;height:40px;border-radius:12px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand)}
.wiz-opt{display:grid;gap:4px;width:100%;text-align:right;padding:12px;border:1px solid var(--line-2);border-radius:var(--r-lg);margin-bottom:8px;background:var(--ink-2)}
.wiz-opt:hover{border-color:var(--brand)}.wiz-opt .wz-t{display:flex;gap:8px;align-items:center;font-weight:700}.wiz-opt .light{font-size:12px;line-height:1.7}
.wiz-opt .cd,.rowlist .cd{display:inline-block;width:9px;height:9px;border-radius:50%}
/* campaign and site editors */
.ce-tabs{display:flex;flex-wrap:nowrap;overflow-x:auto;margin-bottom:16px;max-width:100%;scrollbar-width:none}.ce-tabs::-webkit-scrollbar{display:none}
.ce-tabs button{display:inline-flex;gap:6px;align-items:center;white-space:nowrap;flex-shrink:0}.ce-tabs .ic{width:14px;height:14px}
.tcount{font-size:11px;color:var(--mute)}.cdot{width:7px;height:7px;border-radius:50%;background:var(--brand);display:inline-block}
.ce-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:12px}
.srch{position:relative;flex:1 1 220px;max-width:360px}.srch .ic{position:absolute;inset-inline-start:12px;top:50%;transform:translateY(-50%);width:15px;height:15px;color:var(--mute)}.srch .inp{padding-inline-start:36px}
.ce-split{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:14px;align-items:start}
.ce-form{position:sticky;top:0;max-height:calc(100vh - 150px);overflow:auto}
.dtable-wrap{overflow:auto;max-height:64vh;border-radius:var(--r)}
.dtable{width:100%;border-collapse:collapse;font-size:13px}
.dtable th,.dtable td{padding:10px;border-bottom:1px solid var(--line);text-align:right;vertical-align:top}
.dtable th{position:sticky;top:0;background:var(--ink-1);color:var(--mute);font-weight:700;font-size:11.5px;z-index:1}
.dtable.click tbody tr{cursor:pointer}.dtable.click tbody tr:hover td{background:var(--ink-3)}.dtable tr.sel td{background:var(--brand-soft)}
.dtable td.diff{color:var(--bad);font-weight:700}
.field.bad .inp,.field.bad .sel{border-color:var(--bad)}
.ferr{font-size:11.5px;color:var(--bad);margin-top:4px;min-height:0}.ferr:empty{display:none}
.fhint{display:flex;gap:6px;align-items:flex-start;font-size:11.5px;color:var(--mute);margin-top:5px;line-height:1.6}.fhint .ic{width:12px;height:12px;flex-shrink:0;margin-top:3px}
.ce-form-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.ce-det{margin-top:12px}.ce-det summary{cursor:pointer;color:var(--soft);font-size:12.5px;display:flex;gap:6px;align-items:center}.ce-det summary .ic{width:13px;height:13px}
.ce-pre{white-space:pre-wrap;font-size:11.5px;color:var(--soft);background:var(--ink-2);padding:12px;border-radius:var(--r);max-height:50vh;overflow:auto;margin-top:8px}
.adopt{display:flex;gap:10px;align-items:center;padding:10px;border-bottom:1px solid var(--line);font-size:13px}
.pub-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;font-size:12px}
.rule.fail .rc{background:var(--bad-soft);color:var(--bad)}
/* site board and article editor */
.lib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.lib-item{display:grid;border:1px solid var(--line-2);border-radius:var(--r-lg);overflow:hidden;background:var(--ink-2);text-align:right}
.lib-item .th{aspect-ratio:4/3;background:var(--ink-3);overflow:hidden}.lib-item .th img{width:100%;height:100%;object-fit:cover}
.lib-item .cap{display:grid;gap:4px;padding:8px;font-size:11.5px}.lib-item .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.lib-item .acts{display:flex;gap:6px;align-items:center}
.slot{display:grid;gap:6px;padding:12px;border:1.5px dashed var(--line-3);border-radius:var(--r-lg);font-size:11.5px;word-break:break-all}.slot.done{border-style:solid;border-color:var(--ok);opacity:.6}
.cover-row{display:flex;gap:8px;align-items:center;justify-content:space-between;font-size:12px}
.ed-page{max-width:none;display:flex;flex-direction:column;height:100%;padding:12px}.ed-page::after{display:none}
.ed-head{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.ed-title{flex:1 1 220px;min-width:0;background:transparent;border:0;border-bottom:1px solid var(--line-2);font-size:18px;font-weight:700;padding:8px;color:var(--paper)}.ed-title:focus{outline:none;border-color:var(--brand)}
.ed-grid{flex:1;min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr) minmax(0,1fr);gap:10px}
.ed-grid.m-edit{grid-template-columns:300px minmax(0,1fr)}.ed-grid.m-edit .ed-pv{display:none}
.ed-grid.m-preview{grid-template-columns:300px minmax(0,1fr)}.ed-grid.m-preview .ed-src{display:none}
.ed-side{overflow:auto;display:grid;gap:10px;align-content:start}
.ed-src,.ed-pv{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-1);overflow:hidden}
.ed-tools{flex-wrap:wrap;border-bottom:1px solid var(--line-2)}.ed-tools .sep{width:1px;align-self:stretch;background:var(--line-2)}
.ed-src textarea{flex:1;min-height:320px;border:0;resize:none;background:transparent;color:var(--paper);font:inherit;font-size:16px;line-height:1.95;padding:16px;outline:none}
.ed-foot{padding:8px;font-size:11.5px;border-top:1px solid var(--line)}
.pv-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:8px;border-bottom:1px solid var(--line-2);font-size:11.5px}
.pv-view{flex:1;overflow:auto;padding:16px;display:flex;justify-content:center;background:#e9e7e1}
/* the preview uses the site's own fonts and paper, so it shows what readers will see */
@font-face{font-family:"SiteHead";src:url("/fonts/SiteHead.woff2") format("woff2");font-display:swap;unicode-range:U+0000-066A,U+066D-10FFFF}
@font-face{font-family:"SiteBody";src:url("/fonts/SiteBody-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"SiteBody";src:url("/fonts/SiteBody-700.woff2") format("woff2");font-weight:700;font-display:swap}
.paper{width:100%;max-width:40rem;font-family:"SiteBody",sans-serif;font-size:18px;line-height:1.85;color:#16171d;background:#fff;padding:24px;border-radius:6px;text-align:right}
.paper.tablet{max-width:30rem}.paper.phone{max-width:22rem;font-size:17px}
.paper h1,.paper h2{font-family:"SiteHead","SiteBody",serif;font-weight:400;color:#16171d}
.paper h1{font-size:2rem;line-height:1.3;margin:.5rem 0}.paper .meta{color:#6f7280;font-size:.85rem;margin:0 0 1rem}
.paper .type{display:inline-block;font-size:.75rem;line-height:1;padding:6px;border:1.5px solid #ff4200;color:#ff4200;border-radius:3px}.paper .type.solid{background:#ff4200;color:#fff}
.paper p{margin:0 0 1.1em}.paper p.lead{font-size:1.1em}.paper h2{font-size:1.45rem;margin:2rem 0 .6rem;display:flex;align-items:center;gap:.5rem}.paper h2 .mark{width:.45em;height:.45em;background:#ff4200;flex:none}
.paper a{color:#16171d;text-decoration-color:#ff4200}.paper mark{background:#272938;color:#fff;padding:2px;border-radius:2px}
.paper blockquote{margin:1.2em 0;padding:14px;border-inline-start:4px solid #ff4200;background:#f5f5f7}
.paper .callout{display:block;margin:1.2em 0;padding:14px;background:#f5f5f7;border:1px solid #e4e5ea;border-inline-start:4px solid #272938}
.paper hr.dots{border:0;width:5.5rem;margin:1.8rem auto;border-top:4px dotted #6f7280;opacity:.55}.paper ul,.paper ol{margin:0 0 1.1em;padding-inline-start:1.3em}
.paper figure{margin:1.4em 0}.paper figure img{width:100%;display:block}.paper figure.missing img{display:none}
.paper figure.missing::before{content:"صورة قيد الإضافة: " attr(data-file);display:block;padding:16px;border:1.5px dashed #6f7280;color:#6f7280;font-size:.78rem;direction:ltr;text-align:left}
.paper figcaption{font-size:.82rem;color:#6f7280;margin-top:.4em}.paper .embed-x{border:1px solid #e4e5ea;border-radius:12px;padding:14px;margin:1.4em 0;display:flex;justify-content:space-between;gap:1rem;font-size:.9rem}
.paper table{border-collapse:collapse;width:100%;font-size:.92em}.paper td,.paper th{border:1px solid #e4e5ea;padding:8px}
/* chat additions */
.mention{color:var(--brand-2);font-weight:700}
.msg.is-pinned{box-shadow:inset -3px 0 0 var(--brand)}
.reply-q{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mute);border-inline-start:3px solid var(--line-3);padding:4px;margin:2px 0 4px;cursor:pointer;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.reply-q .ic{width:12px;height:12px;flex-shrink:0}
.reply-bar{display:flex;gap:8px;align-items:center;font-size:12px;background:var(--ink-3);border-radius:var(--r);padding:8px;margin-bottom:8px}.reply-bar span{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.reply-bar .ic{width:13px;height:13px}
.atts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.att-img{max-width:min(260px,100%);max-height:220px;border-radius:var(--r-lg);cursor:zoom-in;display:block;background:var(--ink-3)}
.att-video{max-width:min(340px,100%);border-radius:var(--r-lg);background:#000;display:block}
.att-file{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--line-2);border-radius:var(--r-lg);max-width:280px;background:var(--ink-2)}.att-file span{display:grid;min-width:0}.att-file .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}.att-file .sz{font-size:11px;color:var(--mute)}
.att-gone{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--mute);padding:10px;border:1px dashed var(--line-3);border-radius:var(--r-lg)}.att-gone .ic{width:14px;height:14px}
.att-keep{font-size:10.5px;color:var(--faint);margin-top:3px}
.voice{display:flex;gap:10px;align-items:center;padding:8px;border:1px solid var(--line-2);border-radius:999px;background:var(--ink-2);min-width:220px;max-width:300px}
.voice button{width:34px;height:34px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;flex-shrink:0}.voice button .ic{width:15px;height:15px}
.vbar{flex:1;height:4px;background:var(--line-2);border-radius:2px;overflow:hidden}.vbar span{display:block;height:100%;width:0;background:var(--brand)}.vt{font-size:11px;color:var(--mute);min-width:32px}
.att-tray{display:flex;gap:8px;flex-wrap:wrap}.att-tray:empty{display:none}
.chip-att{display:flex;gap:8px;align-items:center;padding:6px;border:1px solid var(--line-2);border-radius:var(--r-lg);max-width:260px;background:var(--ink-2);font-size:11.5px;margin-bottom:8px}
.chip-att .th{width:40px;height:40px;border-radius:6px;overflow:hidden;background:var(--ink-3);display:grid;place-items:center;flex-shrink:0}.chip-att .th img,.chip-att .th video{width:100%;height:100%;object-fit:cover}
.chip-att .meta{display:grid;min-width:0;flex:1}.chip-att .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-att .sz{color:var(--mute)}
.chip-att .prog{height:3px;background:var(--line-2);border-radius:2px;overflow:hidden;margin-top:3px}.chip-att .prog span{display:block;height:100%;width:0;background:var(--brand)}
.chip-att button{width:28px;height:28px;display:grid;place-items:center;border-radius:6px}.chip-att button:hover{background:var(--ink-3)}.chip-att .ic{width:14px;height:14px}
.chip-att.warn{border-color:#d98a2b88}.chip-att.block{border-color:var(--bad);color:var(--bad)}
.att-notice{display:flex;gap:8px;align-items:flex-start;font-size:12px;padding:8px;border-radius:var(--r);background:var(--ink-3);margin-bottom:8px;line-height:1.6}.att-notice .ic{width:14px;height:14px;flex-shrink:0;margin-top:2px}
.att-notice.warn{color:var(--warn)}.att-notice.block{color:var(--bad)}
.att-hint{font-size:11px}
.rte-wrap.recording .rte,.rte-wrap.recording .rte-tools,.rte-wrap.recording .rte-foot{display:none}
.recbar{display:flex;gap:10px;align-items:center;padding:10px}.recbar .live{width:10px;height:10px;border-radius:50%;background:var(--bad);animation:nrblink 1s steps(2) infinite;flex-shrink:0}
.recbar .rclock{font-weight:700;min-width:40px}.recbar .rclock.warn{color:var(--warn)}.recbar .lv{flex:1;display:flex;gap:2px;align-items:center;height:26px;min-width:60px}.recbar .lv i{flex:1;background:var(--bad);border-radius:1px;min-height:2px;opacity:.8}
.recbar .rhint{font-size:11px;color:var(--mute)}@keyframes nrblink{50%{opacity:.2}}
.lightbox{position:fixed;inset:0;background:#000d;display:grid;place-items:center;z-index:3000;cursor:zoom-out;padding:16px}.lightbox img{max-width:100%;max-height:100%;border-radius:6px}
.react .ic{width:13px;height:13px}.msg-actions .ic{width:15px;height:15px}
/* misbar */
.misbar-gate{max-width:430px;margin:26px auto;text-align:center;display:grid;gap:10px}
.mg-ic{width:50px;height:50px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;margin:0 auto;color:var(--brand)}.mg-ic .ic{width:23px;height:23px}
.mg-t{font-size:17px;font-weight:700}.mg-s{font-size:12px;color:var(--mute);line-height:1.7}.misbar-gate .inp{text-align:center;font-weight:700}
.tip-ref{color:var(--brand);font-size:12.5px;font-weight:700;margin-top:4px}.tip-sum{font-size:13.5px;line-height:1.6;margin-bottom:12px}
.tip-tags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.tip-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.rd{font-size:13.5px;line-height:1.75;background:var(--ink-2);padding:12px;border-radius:8px}
.tx-out{font-size:14px;line-height:1.9;background:var(--ink-2);padding:12px;border-radius:8px;margin-bottom:10px}
/* exec, security, profile */
.quota{margin-bottom:10px}.q-h{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}.q-bar{height:6px;background:var(--ink-3);border-radius:3px;overflow:hidden}.q-bar span{display:block;height:100%;background:var(--brand)}
.acts-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.warn-list{display:grid;gap:10px}.wrow{display:flex;gap:12px;align-items:flex-start;font-size:13px;line-height:1.7}
.w-ic{width:34px;height:34px;border-radius:10px;background:var(--ink-3);display:grid;place-items:center;flex-shrink:0}.w-ic .ic{width:16px;height:16px}
.w-fix{color:var(--ok);font-size:12px;display:flex;gap:6px;align-items:flex-start}.w-fix .ic{width:13px;height:13px;margin-top:4px;flex-shrink:0}
.prof-h{display:flex;gap:16px;align-items:center;margin-bottom:12px}.prof-h .av{width:64px;height:64px;font-size:26px}.prof-n{font-size:20px;font-weight:700;margin-bottom:4px}
.bad{color:var(--bad)}
/* tasks */
.page-wide{max-width:none}
.tboard{align-items:flex-start}.tboard .col{width:292px;flex-shrink:0}
.tcard .kt{font-weight:700}.tcard.late{box-shadow:inset 3px 0 0 var(--bad)}.tcard .avs{display:flex}.tcard .avs .av{width:22px;height:22px;font-size:10px;margin-inline-start:-6px;border:2px solid var(--ink-2)}
.col-pick{display:none}
.who-pick{display:flex;flex-wrap:wrap;gap:8px}.who-pick .who{display:flex;gap:6px;align-items:center;padding:6px;border:1px solid var(--line-2);border-radius:999px;cursor:pointer;font-size:12.5px}.who-pick .who input{display:none}.who-pick .who.on{border-color:var(--brand);background:var(--brand-soft)}.who-pick .who .av{width:24px;height:24px;font-size:11px}
.ck-row{display:flex;gap:10px;align-items:center;padding:8px;border-bottom:1px solid var(--line);font-size:13px;cursor:pointer}.ck-row input{width:18px;height:18px;accent-color:var(--brand)}
.ck-add{display:flex;gap:8px;margin-top:8px}.ck-add .inp{flex:1}
.dash-tasks{margin-top:14px}
/* indicators */
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi-top .stat .v{font-size:26px}
.legend{display:flex;gap:12px;font-size:11.5px;color:var(--soft)}.legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-inline-end:5px}
.bars{display:flex;align-items:flex-end;gap:3px;height:150px;padding:12px;direction:ltr}.bar{flex:1;display:flex;flex-direction:column-reverse;height:100%;min-width:3px}.bar i{display:block;border-radius:2px 2px 0 0}
.bars-x{display:flex;justify-content:space-between;font-size:11px;padding:0 12px;direction:ltr}
.trk-row .tn{width:120px;flex-shrink:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.trk-row .tb{flex:1;height:6px;background:var(--ink-3);border-radius:3px;overflow:hidden}.trk-row .tb i{display:block;height:100%}
.who-cell{display:inline-flex;gap:8px;align-items:center}.who-cell .av{width:24px;height:24px;font-size:11px}
/* guest */
body.is-guest .tb-status,body.is-guest .tb-btn[title="الأمان"]{display:none}
/* ---------- phones and small tablets: one clear column, 44px targets, nothing sideways ---------- */
@media (max-width:1100px){.ed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ed-grid .ed-side{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));max-height:none}
  .ed-grid.m-edit,.ed-grid.m-preview{grid-template-columns:minmax(0,1fr)}.g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.ce-split{grid-template-columns:minmax(0,1fr)}.ce-form{position:static;max-height:none}
  .ed-page{height:auto}.ed-grid{grid-template-columns:minmax(0,1fr)}.ed-grid:not(.m-preview) .ed-pv{display:none}.ed-grid.m-preview .ed-src{display:none}
  .col-pick{display:flex;overflow-x:auto;max-width:100%;scrollbar-width:none}.col-pick::-webkit-scrollbar{display:none}.col-pick button{flex-shrink:0}
  .tboard{flex-direction:column}.tboard .col{width:100%;display:none}
  .tboard[data-mcol="0"] .col[data-i="0"],.tboard[data-mcol="1"] .col[data-i="1"],.tboard[data-mcol="2"] .col[data-i="2"],.tboard[data-mcol="3"] .col[data-i="3"],.tboard[data-mcol="4"] .col[data-i="4"],.tboard[data-mcol="5"] .col[data-i="5"]{display:flex}}
@media (max-width:560px){.btn,.btn-sm,.seg button,.tb-btn,.ch-item,.wiz-opt,.row,.chip-att button,.msg-actions button{min-height:44px}
  .tb-btn{min-width:44px}.ph{flex-direction:column;align-items:stretch;gap:12px}.ph-acts{width:100%}.ph-acts .btn{flex:1 1 auto;justify-content:center}
  .dtable{font-size:12px}.dtable th,.dtable td{padding:8px}.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g4{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.kpi-top .stat .v{font-size:22px}.trk-row .tn{width:90px}
  .voice{min-width:0;width:100%}.att-img,.att-video{max-width:100%}.att-hint{display:none}
  .ed-title{font-size:16px;flex-basis:100%}.ed-src textarea{font-size:16px}
  input,select,textarea,.inp,.sel,.rte{font-size:16px!important}}
/* phone fixes found by device QA: every tap target at least 40 to 44px, the week grid scrolls inside its panel */
.panel:has(> .schgrid){overflow-x:auto;-webkit-overflow-scrolling:touch}
@media (max-width:860px){.schgrid{min-width:660px}}
@media (max-width:560px){
  .rte-tools button,.ed-tools button{min-width:40px;height:40px}
  .uact,.daycopy{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .page .pill[onclick],.page button.pill{min-height:40px;padding:10px}
}
@media (max-width:560px){
  .covrow{flex-wrap:wrap;gap:8px}.covrow .covwho{flex:1 1 auto;min-width:0}.covrow .covtl{order:3;flex:1 1 100%;min-width:0}
  .chat-side-h .add{width:40px;height:40px}
}
@media (max-width:560px){.covhead,.covrow{flex-wrap:wrap}.covpk{flex-shrink:0;margin-inline-start:auto}.covhead>*{min-width:0}}
.ask-acts{display:flex;gap:8px;flex-wrap:wrap}.ask-acts .btn{flex:1 1 120px;justify-content:center}
/* shown by CSS alone after 8 seconds: if scripts never ran (a file viewer without JavaScript), the screen explains itself */
.boot-hint{opacity:0;max-width:340px;font-size:13px;line-height:1.8;color:var(--soft);animation:nrhint .4s ease 8s forwards}
@keyframes nrhint{to{opacity:1}}
.ed-acts{display:contents}
/* ---------- hubs and sub-bar ---------- */
@supports (height:100dvh){.shell{height:100dvh}}
.subnav{flex-shrink:0;border-bottom:1px solid var(--line);background:var(--ink-1);display:none}
.subnav.on{display:block}
.subnav .sub-in{display:flex;gap:4px;overflow-x:auto;padding:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}.subnav .sub-in::-webkit-scrollbar{display:none}
.subnav .sub{display:flex;align-items:center;gap:7px;padding:8px;border-radius:8px;color:var(--mute);font-size:13px;white-space:nowrap;flex-shrink:0;border:1px solid transparent}
.subnav .sub .ic{width:15px;height:15px}.subnav .sub:hover{color:var(--paper);background:var(--ink-3)}
.subnav .sub.on{color:var(--paper);background:var(--brand-soft);border-color:var(--brand-line)}.subnav .sub.on .ic{color:var(--brand)}
.subnav .sub .badge{position:static}
.tab.hub .badge{position:static}
@media (max-width:560px){.subnav .sub{min-height:40px}.tab.hub{min-height:40px}}
/* phones: the seven hubs fit the width as icon over label, no sideways scrolling in the main bar */
@media (max-width:560px){
  .tabs-wrap .tabs-fade{display:none}
  #tabs{gap:0;padding:2px;flex:1 1 auto;width:100%}
  #tabs .tab.hub{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:2px;height:auto;min-height:44px;padding:4px;font-size:10.5px}
  #tabs .tab.hub > span:nth-child(2){max-width:100%;overflow:hidden;text-overflow:ellipsis}
  #tabs .tab.hub .ic{width:18px;height:18px}
  #tabs .tab.hub .badge{position:absolute;top:2px;left:calc(50% - 20px);font-size:9.5px}
  #tabs .tab.hub .lockic{position:absolute;top:3px;left:calc(50% - 18px);width:11px;height:11px}
}
.tab.hub .ls{display:none}
@media (max-width:560px){.tab.hub .lf{display:none}.tab.hub .ls{display:inline}}
/* phones: the top bar keeps search, notifications and the account; security is one tap away in the team hub */
@media (max-width:560px){.topbar .tb-btn[title="الأمان"]{display:none}.topbar{gap:6px}.topbar .tb-word{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}
.role-row .sel{width:auto;min-width:110px}.act-tg{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--soft);white-space:nowrap}.act-tg input{accent-color:var(--brand);width:16px;height:16px}
@media (max-width:560px){.role-row{flex-wrap:wrap}.role-row .sel{flex:1}}
/* ---------- v15: touch never hides commands ---------- */
@media (hover:none){.msg .msg-actions{display:flex;position:static;opacity:1;box-shadow:none;background:transparent;border:0;padding:0;margin-top:6px;gap:4px;justify-content:flex-start}
  .msg .msg-actions button{width:36px;height:36px}.kcard .grip{opacity:.55}}
.msg-actions .more{color:var(--paper)}
.edited{font-size:10.5px;color:var(--faint);border:1px solid var(--line-2);border-radius:999px;padding:2px;margin-inline-start:6px}
.ustat{font-size:10.5px;color:var(--soft);background:var(--ink-3);border-radius:999px;padding:2px;margin-inline-start:6px}
.thread-link{display:inline-flex;gap:6px;align-items:center;margin-top:6px;font-size:12px;color:var(--brand-2);padding:6px;border-radius:8px}.thread-link:hover{background:var(--brand-soft)}.thread-link .ic{width:13px;height:13px}
.new-sep{display:flex;align-items:center;gap:10px;margin:10px 0;color:var(--brand);font-size:11.5px;font-weight:700}.new-sep::before,.new-sep::after{content:"";flex:1;height:1px;background:var(--brand-line)}
.msg.flash{animation:nrflash 1.6s ease}@keyframes nrflash{0%,40%{background:var(--brand-soft)}100%{background:transparent}}
.jump-latest{position:absolute;bottom:120px;left:50%;transform:translateX(-50%);display:none;align-items:center;gap:6px;padding:8px;border-radius:999px;background:var(--brand);color:#fff;font-size:12px;box-shadow:var(--sh);z-index:5}.jump-latest.on{display:inline-flex}.jump-latest .ic{width:14px;height:14px}
.ch-quick{display:flex;gap:4px;padding:8px;flex-wrap:wrap}.ch-quick button{display:flex;gap:6px;align-items:center;padding:8px;border-radius:8px;font-size:12px;color:var(--soft);background:var(--ink-2);border:1px solid var(--line-2);flex:1 1 auto;justify-content:center}.ch-quick button:hover{color:var(--paper);border-color:var(--line-3)}.ch-quick .ic{width:14px;height:14px}
.at-pop{position:absolute;bottom:100%;inset-inline-start:12px;margin-bottom:6px;background:var(--ink-1);border:1px solid var(--line-3);border-radius:var(--r-lg);box-shadow:var(--sh);padding:6px;display:grid;gap:2px;min-width:220px;z-index:20}
.at-pop button{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;text-align:right;font-size:13px}.at-pop button:hover{background:var(--ink-3)}.at-pop .av{width:24px;height:24px;font-size:11px}.at-pop .light{font-size:11px;margin-inline-start:auto}
.chat-compose{position:relative}
.sheet-quote{font-size:13px;line-height:1.7;color:var(--soft);background:var(--ink-2);border-radius:var(--r);padding:12px;margin-bottom:12px}
.sheet-reacts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.sheet-reacts button{display:grid;justify-items:center;gap:4px;padding:12px;border-radius:var(--r);border:1px solid var(--line-2);font-size:12px;color:var(--soft)}.sheet-reacts button.on{border-color:var(--brand);color:var(--paper);background:var(--brand-soft)}.sheet-reacts .ic{width:18px;height:18px}
.sheet-list{display:grid;gap:2px}.sheet-row{display:flex;gap:12px;align-items:center;padding:12px;border-radius:var(--r);font-size:14px;text-align:right;min-height:44px}.sheet-row:hover{background:var(--ink-3)}.sheet-row .ic{width:18px;height:18px;color:var(--soft)}.sheet-row.danger,.sheet-row.danger .ic{color:var(--bad)}
.th-msg{display:flex;gap:10px;padding:10px;border-radius:var(--r)}.th-msg+.th-msg{border-top:1px solid var(--line)}.th-top{display:flex;gap:8px;align-items:center;font-size:12.5px}.th-txt{font-size:13.5px;line-height:1.7}.th-count{font-size:12px;padding:8px}
.clip2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:13px;line-height:1.6}
.inp.need,textarea.need{animation:nrneed .45s;border-color:var(--bad)!important}@keyframes nrneed{20%,60%{transform:translateX(-5px)}40%,80%{transform:translateX(5px)}}
.status-pick{display:flex;gap:8px;flex-wrap:wrap}.status-pick button{padding:8px;border-radius:999px;border:1px solid var(--line-2);font-size:12.5px;color:var(--soft)}.status-pick button.on{border-color:var(--brand);color:var(--paper);background:var(--brand-soft)}
/* ---------- the site board with its tabs ---------- */
.site-embed .page{padding:0;max-width:none}.site-embed .page::after{display:none}.site-embed .ph{margin-bottom:12px}.site-embed .ph h2{font-size:18px}
/* ---------- the article editor ---------- */
.ed-head .ready-badge{min-width:52px;height:34px;border-radius:999px;font-weight:700;font-size:12.5px;padding:8px;border:1px solid var(--line-3)}.ready-badge.ok{color:var(--ok);border-color:currentColor}.ready-badge.mid{color:var(--warn);border-color:currentColor}.ready-badge.low{color:var(--bad);border-color:currentColor}
.ed-grid{grid-template-columns:300px minmax(0,1fr) minmax(0,1fr)}
.ed-rail{display:flex;flex-direction:column;min-height:0;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-1);overflow:hidden}
.ed-rail-tabs{display:flex;gap:2px;padding:6px;border-bottom:1px solid var(--line-2);overflow-x:auto;scrollbar-width:none}.ed-rail-tabs button{padding:8px;border-radius:8px;font-size:12px;color:var(--mute);white-space:nowrap;flex:1 0 auto}.ed-rail-tabs button.on{background:var(--brand-soft);color:var(--paper)}
.ed-rail-pane{padding:12px;overflow:auto;flex:1;display:grid;gap:10px;align-content:start}
.outline{display:grid;gap:2px}.outline button{display:flex;gap:8px;justify-content:space-between;align-items:center;padding:10px;border-radius:8px;text-align:right;font-size:13px}.outline button:hover{background:var(--ink-3)}
.ready-big{display:grid;gap:4px;padding:12px;border-radius:var(--r);background:var(--ink-2);text-align:center}.ready-big .num{font-size:30px;font-weight:900}.ready-big.ok .num{color:var(--ok)}.ready-big.mid .num{color:var(--warn)}.ready-big.low .num{color:var(--bad)}
.cover-box{display:flex;gap:10px;align-items:center;justify-content:space-between}.cover-box img{width:96px;height:64px;object-fit:cover;border-radius:8px}
.share-card{border:1px solid var(--line-2);border-radius:var(--r);overflow:hidden;background:#fff;color:#16171d}.sc-img{aspect-ratio:1.91/1;background-size:cover;background-position:center;background-color:#e9e7e1}.sc-b{padding:10px;display:grid;gap:4px}.sc-d{font-size:11px;color:#6f7280;text-align:left}.sc-t{font-weight:700;font-size:14px;line-height:1.5}.sc-e{font-size:12px;color:#55575f;line-height:1.6}
.ed-src{position:relative}.ed-tools{display:flex;gap:2px;padding:6px;flex-wrap:wrap;align-items:center}.ed-tools button{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:var(--soft)}.ed-tools button:hover{background:var(--ink-3);color:var(--paper)}.ed-tools .ic{width:16px;height:16px}
.ed-find{display:none;gap:6px;align-items:center;padding:8px;border-bottom:1px solid var(--line-2);flex-wrap:wrap}.ed-find.on{display:flex}.ed-find .inp{flex:1 1 140px;padding:8px}
.ed-foot{display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:8px;font-size:11.5px;color:var(--mute)}.ed-foot b{color:var(--paper)}
.tgt{width:70px;height:5px;border-radius:3px;background:var(--ink-3);overflow:hidden;display:inline-block}.tgt i{display:block;height:100%;background:var(--brand)}
.slash-menu{position:absolute;z-index:30;width:250px;max-height:320px;overflow:auto;background:var(--ink-1);border:1px solid var(--line-3);border-radius:var(--r-lg);box-shadow:var(--sh);padding:6px}
.slash-menu .sm-h{font-size:11px;padding:6px}.slash-menu button{display:flex;gap:10px;align-items:center;width:100%;padding:8px;border-radius:8px;font-size:13px;text-align:right}.slash-menu button.on,.slash-menu button:hover{background:var(--brand-soft);color:var(--paper)}.slash-menu .ic{width:16px;height:16px;color:var(--soft)}
.drop-hint{display:none;position:absolute;inset:44px 8px 40px 8px;border:2px dashed var(--brand);border-radius:var(--r-lg);background:#0009;color:#fff;place-items:center;font-size:15px;pointer-events:none;z-index:10}.ed-src.drop .drop-hint{display:grid}
.ed-page.ed-focus .ed-rail,.ed-page.ed-focus .ed-pv{display:none}.ed-page.ed-focus .ed-grid{grid-template-columns:minmax(0,760px);justify-content:center}
.diff{font-family:ui-monospace,Menlo,monospace;font-size:12px;max-height:60vh;overflow:auto;border:1px solid var(--line-2);border-radius:var(--r);direction:rtl}.dl{padding:4px;white-space:pre-wrap;border-bottom:1px solid var(--line)}.dl-add{background:#4fa07922;color:var(--ok)}.dl-del{background:#d05a4322;color:var(--bad);text-decoration:line-through}.dl-eq{color:var(--faint)}
.paper .embed-file{margin:1.4em 0}.paper .embed-file video{width:100%;border-radius:8px;background:#000}.paper .embed-file audio{width:100%}
@media (max-width:1100px){.ed-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.ed-grid .ed-rail{grid-column:1/-1;max-height:340px}}
@media (max-width:860px){.ed-grid,.ed-grid.m-edit,.ed-grid.m-preview{grid-template-columns:minmax(0,1fr)}.ed-grid:not(.m-preview) .ed-pv{display:none}.ed-grid.m-preview .ed-src{display:none}.ed-tools button{width:40px;height:40px}}
/* ================= v15 unification layer =================
   Measured across every page, drawer and editor: 20 inconsistent variants (button heights 38 to 48, icon buttons 32/34/37,
   panels with and without inner padding, cards 12 to 18 padding, radii 6/8/9/10, buttons rendering in the browser's default font).
   One scale for everything below. Equal padding on all sides. */
:root{--ctl:42px;--ctl-sm:36px;--ctl-ic:36px;--r-ctl:8px;--r-card:12px;--pad-card:16px;--pad-ctl:10px}
button,input,select,textarea{font-family:inherit}button{font-size:inherit;color:inherit}
.btn{min-height:var(--ctl);height:auto;padding:var(--pad-ctl);border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;gap:6px;line-height:1.25}
.btn.btn-sm{min-height:var(--ctl-sm);padding:8px;font-size:12.5px}
.btn .ic{width:15px;height:15px;flex-shrink:0}
.tb-btn,.ed-tools button,.chip-att button,.ch-item .add,.chat-side-h .add{width:var(--ctl-ic);height:var(--ctl-ic);min-width:var(--ctl-ic);border-radius:var(--r-ctl);display:inline-grid;place-items:center;padding:0}
.seg button{min-height:var(--ctl-sm);padding:8px;border-radius:var(--r-ctl);display:inline-flex;align-items:center;justify-content:center;gap:6px}
.inp,.sel,.field input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),.field select{min-height:var(--ctl);padding:var(--pad-ctl);border-radius:var(--r-ctl);font-size:13.5px;line-height:1.5}
textarea.inp,.field textarea{padding:12px;border-radius:var(--r-ctl);line-height:1.8}
.panel{padding:var(--pad-card);border-radius:var(--r-card)}
.panel>.panel-h{margin:calc(-1 * var(--pad-card)) calc(-1 * var(--pad-card)) 12px;padding:14px;border-radius:var(--r-card) var(--r-card) 0 0}
.panel>.panel-b{padding:0}
.panel>.dtable-wrap:first-child{margin:calc(-1 * var(--pad-card));border-radius:var(--r-card)}
.stat,.face,.kcard,.ucard,.wiz-opt,.notice-row,.sheet-quote,.ready-big,.share-card,.lib-item,.slot,.voice,.att-file,.chip-att{border-radius:var(--r-card)}
.face,.ucard{padding:var(--pad-card)}.kcard{padding:12px}.stat{padding:var(--pad-card)}
.badge{min-width:18px;height:18px;padding:2px;border-radius:9px;font-size:10.5px;line-height:14px;display:inline-grid;place-items:center}
.rowlist .row{font-size:14px;gap:10px}
.drawer .ask-acts .btn,.drawer .btn-block{min-height:var(--ctl)}
.hint{line-height:1.7}
@media (max-width:560px){:root{--ctl:44px;--ctl-sm:40px;--ctl-ic:40px}}
.chat-head-acts .tb-btn{width:var(--ctl-ic);height:var(--ctl-ic)}
.inp:not(textarea),.sel{height:var(--ctl)}
.tab .badge,.sub .badge,.ch-item .badge,#tabs .tab.hub .badge,.tcount{font-size:10.5px}
.face,.kcard,.ucard{padding:14px}
.ed-rail-pane[hidden]{display:none}
/* ================= v16 visual grammar: five tiers, one look each =================
   1 hubs (icon over label) · 2 sub-bar (underline) · 3 page tabs (smaller underline) · 4 filters (chips) · 5 commands (buttons, natural width).
   Mode toggles (write/preview, devices, ranges) are compact segmented controls. Spacing scale: 4 8 12 16 24. */
:root{--sp1:4px;--sp2:8px;--sp3:12px;--sp4:16px;--sp5:24px}
/* tier 2 */
.subnav{background:var(--ink)}
.subnav .sub-in{padding:0;margin:0 var(--sp2);gap:var(--sp1)}
.subnav .sub{border:0;border-radius:0;background:none;padding:12px;min-height:44px;border-bottom:2px solid transparent;color:var(--mute)}
.subnav .sub:hover{background:none;color:var(--paper)}
.subnav .sub.on{background:none;border-color:transparent;border-bottom-color:var(--brand);color:var(--paper)}
.subnav .sub.on .ic{color:var(--brand)}
/* tier 3 */
.tabs-u{display:flex;gap:2px;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:none;margin-bottom:var(--sp4);-webkit-overflow-scrolling:touch}
.tabs-u::-webkit-scrollbar{display:none}
.tabs-u button{display:inline-flex;align-items:center;gap:6px;padding:10px;min-height:40px;border:0;border-bottom:2px solid transparent;border-radius:0;background:none;color:var(--mute);font-size:13px;white-space:nowrap;flex-shrink:0}
.tabs-u button:hover{color:var(--paper)}
.tabs-u button.on{color:var(--paper);border-bottom-color:var(--brand)}
.tabs-u .ic{width:14px;height:14px}.tabs-u .cn{font-size:11px;color:var(--faint)}.tabs-u button.on .cn{color:var(--brand)}
.tabs-u .cd{width:8px;height:8px;border-radius:50%}
/* tier 4 */
.chips{display:flex;gap:var(--sp2);overflow-x:auto;scrollbar-width:none;padding:2px;margin-bottom:var(--sp3);-webkit-overflow-scrolling:touch}
.chips::-webkit-scrollbar{display:none}
.chips button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:8px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--soft);font-size:12.5px;white-space:nowrap;flex-shrink:0}
.chips button:hover{border-color:var(--line-3);color:var(--paper)}
.chips button .cn,.chips button .tcount{font-size:11px;color:var(--faint);min-width:14px;text-align:center}
.chips button.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--paper)}.chips button.on .cn,.chips button.on .tcount{color:var(--brand)}
.chips button.alert .cn{color:var(--bad)}
/* mode toggles: button groups only (v12 also names its coverage-bar segments .seg) */
div.seg:has(> button){display:inline-flex;gap:2px;padding:3px;border:1px solid var(--line-2);border-radius:10px;background:var(--ink-1);width:auto;max-width:100%;overflow-x:auto;scrollbar-width:none}
div.seg:has(> button) > button{min-height:30px;padding:6px;border-radius:7px;border:0;background:none;color:var(--mute);font-size:12.5px;white-space:nowrap}
div.seg:has(> button) > button.on{background:var(--ink-3);color:var(--paper)}
/* page rhythm */
.ph{margin-bottom:var(--sp4);gap:var(--sp3)}
.ce-bar{margin-bottom:var(--sp3);gap:var(--sp2)}.ce-bar .chips{margin-bottom:0}
.ph-acts .btn{flex:0 0 auto}
/* tasks: column tabs belong to the board */
.col-pick{display:none}
@media (max-width:860px){
  .col-pick{display:flex;margin-bottom:var(--sp3)}
  .tboard{padding:0}.tboard .col{border:0;background:none;padding:0;box-shadow:none}.tboard .col-head{display:none}.tboard .col-body{padding:0;gap:var(--sp2)}
}
/* phones: compact header, actions at their natural size */
@media (max-width:560px){
  .ph{flex-direction:row;flex-wrap:wrap;align-items:flex-end}.ph-l{flex:1 1 100%}.ph-acts{width:auto;margin-inline-start:auto}
  .ph .ey{display:none}.ph h2{font-size:22px}
  .ph p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12.5px;line-height:1.7}
  .ph-acts .btn{flex:0 0 auto}
}
/* v12's production filter is a filter: same chips */
.anseg{display:flex;gap:var(--sp2);overflow-x:auto;scrollbar-width:none;padding:2px;border:0;background:none}
.anseg button{display:inline-flex;align-items:center;gap:6px;height:34px;padding:8px;border-radius:999px;border:1px solid var(--line-2);background:transparent;color:var(--soft);font-size:12.5px;white-space:nowrap;flex-shrink:0}
.anseg button.on{background:var(--brand-soft);border-color:var(--brand-line);color:var(--paper)}
.anseg .ac{position:static;background:none;color:var(--faint);font-size:11px;min-width:14px;padding:0}.anseg button.on .ac{color:var(--brand);background:none}
.menu-chip > button.btn{border-radius:var(--r-ctl)}
/* phones: data tables become a list of cards (title first, the rest on one line under it) */
@media (max-width:560px){
  .dtable.click thead,.site-list thead{display:none}
  .dtable.click tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px;border-bottom:1px solid var(--line)}
  .dtable.click tbody td{display:inline-flex;align-items:center;padding:0;border:0;font-size:12px;color:var(--soft)}
  .dtable.click tbody td:first-child{flex:1 1 100%;font-size:14px;color:var(--paper);font-weight:700;line-height:1.6}
  .dtable.click tbody td:empty{display:none}
}
/* touch: one «more» button in the message corner opens every command (Slack mobile pattern); the text keeps its full width */
@media (hover:none){
  .msg{position:relative}
  .msg .msg-actions{display:flex;position:absolute;inset:4px auto auto 4px;margin:0;padding:0;background:none;border:0;box-shadow:none;gap:0}
  .msg .msg-actions button{display:none}
  .msg .msg-actions button.more{display:grid;place-items:center;width:40px;height:40px;opacity:.6}
  .msg .msg-actions button.more .ic{width:16px;height:16px}
  .msg .body{min-width:0;flex:1 1 auto}
}
@media (max-width:560px){div.seg:has(> button) > button{min-height:36px;padding:8px}.chips button,.anseg button{height:36px}}
/* ================= v17 ================= */
/* --- top bar: one row that never pushes the page sideways; status is a dot with its words in the tooltip --- */
.topbar{gap:8px;padding:8px;min-width:0}
.topbar .tb-word{min-width:0;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.topbar .spacer{flex:1 1 0;min-width:0}
.tb-status{padding:0;width:36px;height:36px;justify-content:center;background:transparent;font-size:0;flex-shrink:0}
.tb-status .dot{width:9px;height:9px}
.tb-btn,.tb-me{flex-shrink:0}
.demo-flag{flex-shrink:1;min-width:0}.demo-flag>span{display:none}.demo-flag select{max-width:150px}
@media (max-width:900px){.topbar .tb-word{font-size:0;gap:0}.topbar .tb-word .kt-t{font-size:initial}.demo-flag select{max-width:110px}}
/* --- mode switches: compact, equal padding, no air above and under the words --- */
.qc-types{padding:2px;gap:2px;border-radius:10px}
.qc-types button,div.seg:has(> button) > button{min-height:0;height:auto;padding:6px;line-height:1.35;border-radius:8px;font-size:12.5px}
div.seg:has(> button){padding:2px}
@media (max-width:560px){.qc-types button,div.seg:has(> button) > button{padding:8px}}
/* --- page header after the trim --- */
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ph{align-items:center}.ph h2{display:flex;align-items:center;gap:6px;margin-bottom:0}
.ph .ph-desc{display:none;margin-top:6px}.ph.desc-on .ph-desc{display:block;-webkit-line-clamp:unset}
.ph.ph-min{margin-bottom:12px}.ph.ph-min .ph-l{display:none}
.ph-acts{margin-inline-start:auto}
.info-btn{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;color:var(--faint);flex-shrink:0;vertical-align:middle}
.info-btn:hover,.desc-on .info-btn,.note-on .info-btn{color:var(--paper);background:var(--ink-3)}.info-btn .ic{width:15px;height:15px}
.pn-note{display:none!important}.note-on .pn-note{display:block!important}
.icon-btn{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:8px;color:var(--soft)}.icon-btn:hover{background:var(--ink-3);color:var(--paper)}.icon-btn .ic{width:16px;height:16px}
[dir=rtl] .icon-btn .ic,.icon-btn .ic{transform:none}
.link-btn{color:var(--brand-2);font-size:12px;padding:4px}
.rt{flex:1;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* --- motion: short, on navigation only --- */
@keyframes pgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page.pg-in{animation:pgIn .22s cubic-bezier(.2,.7,.2,1)}
.subnav .sub,.tabs-u button,.chips button,.btn,.tab{transition:color .15s,background-color .15s,border-color .2s}
.drawer{transition:transform .26s cubic-bezier(.2,.7,.2,1)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}
/* --- the dashboard: three boxes on top --- */
.dash-top{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-bottom:12px}
.dash-top>*{min-width:0;margin:0}
.dash-top .clockcard,.dash-top .folcard,.dash-top .latest{height:100%;padding:16px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--ink-1);display:flex;flex-direction:column;gap:10px}
.latest .lt-h{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:13px}
.lt-list{display:grid;gap:2px}
.lt{display:grid;gap:4px;text-align:right;padding:8px;border-radius:8px;border-inline-start:2px solid var(--tc)}.lt:hover{background:var(--ink-3)}
.lt-m{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--mute)}.lt-m i{width:6px;height:6px;border-radius:50%;background:var(--tc)}.lt-m .num{margin-inline-start:auto}.lt-m .av{width:18px;height:18px;font-size:9px}
.lt-t{font-size:13px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--soft)}
.lt-t b,.stc-b .src-p,.as-pub-t b{color:var(--paper);font-weight:700}
.dash .hero{margin-bottom:12px}
.mykpi{margin-bottom:12px}
.kt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.kt-t{display:grid;gap:2px;padding:12px;border-radius:10px;background:var(--ink-2)}
.kt-t .k{font-size:11.5px;color:var(--mute)}.kt-t .v{font-size:24px;font-weight:900;line-height:1.2}.kt-t .s{font-size:11px;color:var(--soft);min-height:16px}
.kt-t .v.good,.kt-t .s.up{color:var(--ok)}.kt-t .v.mid{color:var(--warn)}.kt-t .v.bad,.kt-t .s.down,.kt-t .bad{color:var(--bad)}
.kt-spark{display:flex;align-items:flex-end;gap:3px;height:56px;margin-top:12px;direction:ltr}.kt-spark i{flex:1;background:var(--brand);border-radius:2px 2px 0 0;opacity:.85}.kt-spark i.z{background:var(--line-2)}
.kt-foot{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;margin-top:8px}
@media (max-width:1100px){.dash-top{grid-template-columns:repeat(2,minmax(0,1fr))}.dash-top .latest{grid-column:1/-1}}
@media (max-width:640px){.dash-top{grid-template-columns:minmax(0,1fr)}.kt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.kt-t .v{font-size:21px}}
/* --- production timeline --- */
.anbar{flex-wrap:wrap;gap:8px}
.tl-q{flex:1 1 260px;max-width:none}.tl-q .inp{padding-inline-start:36px}
.tl{display:grid;gap:14px}.tl-res{font-size:12px}
.tl-day{display:grid;gap:8px}
.tl-dh{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:8px;padding:8px;background:var(--ink);font-size:13px;font-weight:700}
.tl-dh .tl-c{display:flex;align-items:center;gap:4px;font-size:11.5px;color:var(--mute);font-weight:400;margin-inline-start:auto}.tl-dh .tl-c i{width:6px;height:6px;border-radius:50%;margin-inline-start:6px}
.stc{display:grid;gap:8px;padding:12px;border-radius:var(--r-card);background:var(--ink-1);border:1px solid var(--line);border-inline-start:3px solid var(--tc);cursor:pointer;content-visibility:auto;contain-intrinsic-size:auto 140px}
.stc:hover{border-color:var(--line-3);border-inline-start-color:var(--tc)}
.stc-h,.stc-f{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--mute);min-width:0;flex-wrap:wrap}.stc-sp{flex:1}
.stc-tier{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--paper)}.stc-tier i{width:7px;height:7px;border-radius:50%;background:var(--tc)}
.stc-b{font-size:14.5px;line-height:1.85;color:var(--soft);overflow-wrap:anywhere}.stc-b .mj-lead{display:block;color:var(--paper);font-weight:700;margin-bottom:6px}.stc-b mark,.lt-t mark{background:var(--brand-soft);color:var(--paper);border-radius:3px;padding:0 2px}
.stc-f .av{width:24px;height:24px;font-size:11px}.stc-f .uact{width:32px;height:32px}
.stc-as{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:7px;background:var(--ink-3);color:var(--soft)}.stc-as .ic{width:14px;height:14px}
.k-alight{color:#ff7a4d}.k-drive{color:#4fa079}.k-image{color:#5089c0}.k-video{color:#9b5fb5}
.tl-more{justify-self:center}
.as-pub{position:relative;padding:12px;border-radius:10px;background:var(--ink-2);margin-bottom:14px;display:grid;gap:4px}.as-pub .icon-btn{position:absolute;top:6px;left:6px}
.as-pub-t{font-size:14px;line-height:1.8;padding-inline-end:28px}.as-pub-t .mj-lead{display:block;font-weight:700}
.as-strip{display:flex;gap:6px;flex-wrap:wrap}.as-chip{display:inline-flex;align-items:center;gap:6px;padding:6px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line-2);font-size:12px;color:var(--soft)}.as-chip .ic{width:14px;height:14px}
.as-list .row{gap:10px}.as-ic{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--ink-3)}.as-ic .ic{width:16px;height:16px}.as-t{flex:1;display:grid;min-width:0;font-size:13px}
.prod-feed{display:none}
/* --- design zip --- */
.fz-drop{display:grid;justify-items:center;gap:6px;padding:24px;border:1.5px dashed var(--line-3);border-radius:var(--r-card);cursor:pointer;text-align:center;color:var(--soft)}.fz-drop .ic{width:28px;height:28px;color:var(--brand)}.fz-drop.on,.fz-drop:hover{border-color:var(--brand);background:var(--brand-soft)}
.fz-busy{display:flex;align-items:center;gap:10px;padding:16px;color:var(--soft);font-size:13px}
.spin-s{width:16px;height:16px;border-radius:50%;border:2px solid var(--line-3);border-top-color:var(--brand);animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.fz-card{display:grid;gap:8px;margin:14px 0}
.fz-head{display:flex;gap:10px;align-items:center}.fz-head>div{display:grid;min-width:0}.fz-head .ic{width:22px;height:22px;color:var(--brand);flex-shrink:0}.fz-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fz-head .light{font-size:11.5px}
.fz-row{display:flex;gap:10px;align-items:flex-start;padding:10px;border-radius:10px;background:var(--ink-2);font-size:13px;line-height:1.6}.fz-row>div{display:grid;gap:2px;min-width:0}.fz-row .light{font-size:11.5px}.fz-row .ic{width:16px;height:16px;flex-shrink:0;margin-top:3px}
.fz-row.ok .ic{color:var(--ok)}.fz-row.warn .ic{color:var(--warn)}.fz-row.bad{background:var(--bad-soft)}.fz-row.bad .ic,.fz-row.bad b{color:var(--bad)}
.fz-ex summary{cursor:pointer;font-size:12.5px;color:var(--soft);padding:6px}.fz-list{display:grid;gap:4px;max-height:220px;overflow:auto;padding:6px}.fz-list div{display:flex;justify-content:space-between;gap:10px;font-size:11.5px}.fz-list .num{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fz-prog{display:flex;align-items:center;gap:10px;margin-top:12px}.fz-prog .q-bar{flex:1}
.fz-link{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;background:var(--ink-2)}.fz-link .num{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px}
.fz-preview{position:fixed;inset:0;z-index:3000;background:#000;display:flex;flex-direction:column}.fz-pv-bar{display:flex;gap:10px;align-items:center;padding:8px;background:var(--ink-1);color:var(--paper);font-size:13px}.fz-pv-bar .light{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fz-preview iframe{flex:1;border:0;width:100%;background:#fff}
.wiz-zip{border-color:var(--brand-line);background:var(--brand-soft)}
.trk-face{display:grid;gap:6px;margin-bottom:14px}.trk-face-r{display:flex;gap:8px}.trk-face-r .sel{flex:1;min-width:0}
@media (max-width:560px){.ph{flex-wrap:nowrap;align-items:center}.ph-l{flex:1 1 auto;min-width:0}.ph-acts{width:auto;flex:0 0 auto}.ph:has(.ph-acts > :nth-child(3)){flex-wrap:wrap}}
.icon-btn .ic{transform:scaleX(-1)}
/* narrow phones (Galaxy Fold folded 280, iPhone SE 320): grid items may shrink, headers wrap, the chat header keeps its controls */
.grid>*,.page>*{min-width:0}
@media (max-width:380px){.page{padding:12px}.ph{flex-wrap:wrap}.ph-acts{flex-wrap:wrap}
  .chat-head .chat-head-acts{gap:0}.chat-head .avs,.chat-head .av-stack,.chat-head [class*="avatars"]{display:none}.chat-head .tb-btn{width:34px;height:34px;min-width:34px}}
.ph-acts{max-width:100%;min-width:0}

/* ===== v18 · the tools hub, the site panel inside the console, and "back to where I was" (Nov 2026) ===== */
/* the gate overlays the shell until a member is through (engine/tools/gate/gate.css styles the gate itself) */
body.locked{opacity:1}   /* v12 dims any .locked element to .5; the gate puts .locked on body */
body.locked #shell,body.locked #bootMsg{visibility:hidden}
/* back-to shortcuts: one quiet row, scrolling sideways on a phone; each chip has the same padding on its four sides */
.rc-row{display:flex;align-items:center;gap:10px;margin:0 0 14px;min-width:0}
.rc-row .rc-ic{width:16px;height:16px;flex:0 0 auto;color:var(--mute)}
.rc-list{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;min-width:0;padding:2px}
.rc-list::-webkit-scrollbar{display:none}
.rc-chip{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;padding:7px;border:1px solid var(--line-2);border-radius:var(--r-ctl);background:var(--ink-1);color:var(--paper);font:inherit;font-size:12.5px;line-height:1.35;cursor:pointer;max-width:220px;transition:border-color .2s,background .2s}
.rc-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-inline-end:3px}
.rc-chip svg{width:15px;height:15px;flex:0 0 auto;color:var(--soft)}
.rc-chip:hover,.rc-chip:focus-visible{border-color:var(--brand-line);background:var(--ink-2)}
/* tool cards */
.tt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.tt-grid>*{min-width:0}
.tt-card{position:relative;display:flex;align-items:flex-start;gap:14px;padding:16px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--ink-1);color:var(--paper);font:inherit;text-align:start;cursor:pointer;transition:border-color .2s,transform .2s}
.tt-card:hover,.tt-card:focus-visible{border-color:color-mix(in srgb,var(--c) 55%,transparent);transform:translateY(-1px)}
.tt-ic{width:42px;height:42px;flex:0 0 42px;display:grid;place-items:center;border-radius:12px;background:color-mix(in srgb,var(--c) 16%,transparent);color:var(--c)}
.tt-ic svg{width:22px;height:22px}
.tt-tx{display:flex;flex-direction:column;gap:5px;min-width:0}
.tt-tx b{font-size:15px}
.tt-tx span{font-size:12.5px;line-height:1.6;color:var(--soft)}
.tt-go{position:absolute;top:16px;inset-inline-end:16px;width:15px;height:15px;color:var(--mute)}
/* a tool open inside the console */
.page.tf-page{padding-bottom:0}
.tf{display:flex;flex-direction:column;gap:10px;min-width:0}
.tf-bar{display:flex;align-items:center;gap:8px;min-width:0}
.tf-name{display:inline-flex;align-items:center;gap:8px;min-width:0;font-size:14px}
.tf-name svg{width:18px;height:18px;color:var(--c);flex:0 0 auto}
.tf-name b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tf-sp{flex:1}
.tf-frame{display:block;width:100%;min-height:360px;border:1px solid var(--line);border-radius:var(--r-card);background:#0b0a07}
.site-embed .tf-in .tf-bar{justify-content:flex-end}
@media (max-width:600px){.tt-grid{grid-template-columns:1fr}.tf-frame{border-radius:12px}}
.tf-in .tf-name{display:none}