/* Omxio standard components. Each kind of element has ONE fixed style here, built only from
   theme-tokens.css. Other stylesheets must not restyle these classes (scripts/check-theme.mjs).
   Catalogue and rules: docs/THEME-RULES.md. Flexible one-off UI may opt out with a
   theme-exempt comment that states the reason.
   Every look below reads the component tokens (--field-*, --btn-*, --sec-*) from theme-tokens.css,
   so one change there restyles every field, button and section at once. */

/* the hidden attribute always wins, even over components that set display (.btn, grids) */
[hidden]{display:none!important}

/* ---------- Buttons ----------
   .btn            primary (dark, filled): the main action of a screen or card
   .btn.ghost      secondary (outlined surface): any other action
   .btn.danger     destructive (red text on a soft red surface): unlink, delete, sign out
   .btn.brand      brand action (turquoise): start a call, open Omxio
   .btn.sm         small action chip with a specific job (copy, retry, filter); same look, smaller
   .btn.block      full width
   .btn.tile       a choice tile in a grid (icon / mark on top, name, one hint line), e.g. the mail provider grid;
                   pressed = picked (aria-pressed=true)
   .btn.fab        floating round «+» button (brand), fixed at the bottom end: the ONE «new» action of a screen
   .icon-btn / .gbtn  round icon button (back, close, more)
   .icon-btn.sm    small round icon button next to the read-aloud buttons (e.g. «رد خاص»)
   .icon-btn.float big round icon button that floats over every screen (the «الأدوات» button, tools-fan.js); .on = its menu is out
   .icon-btn.float.tab the same, tucked on a screen edge as a slim arrow tab
   .icon-btn.bar   slim flat icon button in a one-row toolbar (the chat screen pane header, msg 7eacd150); label in aria-label + title;
                   .on / aria-pressed=true = active (control on, full screen) */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-width:0;height:var(--btn-h);padding:0 var(--btn-pad-x);border:1px solid transparent;border-radius:var(--btn-radius);background:var(--btn-bg);color:var(--btn-text);font:inherit;font-size:var(--btn-fs);font-weight:var(--fw-bold);line-height:1.2;white-space:nowrap;text-align:center;cursor:pointer;transition:background .15s,opacity .15s,transform .1s}
.btn:active{transform:scale(.98)}
.btn:disabled,.btn[aria-disabled=true]{opacity:.4;pointer-events:none}
.btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.btn svg{width:18px;height:18px;flex:none}
.btn.ghost{background:var(--btn2-bg);color:var(--btn2-text);border-color:var(--btn2-border)}
.btn.ghost:active{background:var(--btn2-bg-active)}
.btn.danger{background:var(--danger-soft);color:var(--danger);border-color:transparent}
.btn.danger.solid{background:var(--danger);color:var(--on-brand)}
.btn.brand{background:var(--brand);color:var(--on-brand)}
.btn.sm{height:var(--btn-h-sm);padding:0 var(--btn-pad-x-sm);font-size:var(--btn-fs-sm)}
.btn.block{display:flex;width:100%}
.btn.tile{height:auto;min-height:84px;flex-direction:column;gap:var(--space-1);padding:var(--space-3) var(--space-2);border-radius:var(--radius-lg);white-space:normal;text-align:center;line-height:1.3}
.btn.tile small{font-size:var(--fs-xs);font-weight:var(--fw-medium);color:var(--text3)}
.btn.tile[aria-pressed=true]{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-ink)}
:root[data-theme=dark] .btn.tile[aria-pressed=true]{color:var(--brand)}
.btn.fab{position:fixed;inset-inline-end:var(--space-5);bottom:calc(var(--fab-bottom) + var(--sb,0px));z-index:15;width:var(--fab-size);height:var(--fab-size);padding:0;border-radius:var(--radius-pill);background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-fab);transition:transform .2s cubic-bezier(.2,.8,.2,1),box-shadow .2s}
.btn.fab svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;transition:transform .25s}
.btn.fab[aria-expanded=true] svg{transform:rotate(45deg)}
.icon-btn,.gbtn{width:var(--icon-btn);height:var(--icon-btn);border-radius:var(--radius-pill);display:grid;place-items:center;background:var(--elevated);border:.5px solid var(--stroke3);box-shadow:var(--shadow-pill);color:var(--text)}
.icon-btn:active,.gbtn:active{background:var(--elevated-h)}
.icon-btn svg,.gbtn svg{width:18px;height:18px}
.icon-btn.sm{width:var(--icon-btn-sm);height:var(--icon-btn-sm);padding:0;flex:none;color:var(--text2)}
.icon-btn.sm svg{width:14px;height:14px}
.icon-btn.done{color:var(--success)} /* brief «copied» feedback */
.icon-btn.bar{width:var(--icon-btn-bar);height:var(--icon-btn-bar);flex:none;padding:0;background:var(--icon-btn-bar-bg);border-color:var(--icon-btn-bar-border);box-shadow:none;color:var(--icon-btn-bar-ink);cursor:pointer}
.icon-btn.bar svg{width:var(--icon-btn-bar-ic);height:var(--icon-btn-bar-ic)}
.icon-btn.bar.on,.icon-btn.bar[aria-pressed=true]{background:var(--icon-btn-bar-on-bg);color:var(--icon-btn-bar-on-ink)}
.icon-btn.bar[hidden]{display:none}
.icon-btn.float{width:var(--icon-btn-float);height:var(--icon-btn-float);background:var(--icon-btn-float-bg);color:var(--icon-btn-float-ink);border-color:var(--icon-btn-float-border);box-shadow:var(--icon-btn-float-shadow);-webkit-backdrop-filter:var(--icon-btn-float-blur);backdrop-filter:var(--icon-btn-float-blur);transition:background-color .18s ease,color .18s ease,transform .12s ease}
.icon-btn.float svg{width:var(--icon-btn-float-ic);height:var(--icon-btn-float-ic)}
.icon-btn.float.on{background:var(--icon-btn-float-on-bg);color:var(--icon-btn-float-on-ink)}
.icon-btn.float.tab{width:var(--icon-btn-float-tab-w);height:var(--icon-btn-float-tab-h)} /* the toolbox tucked on a screen edge: a slim arrow tab (msg f4cf487e) */
.icon-btn.float.tab svg{width:var(--icon-btn-float-tab-ic);height:var(--icon-btn-float-tab-ic)}

/* ---------- Button rows ----------
   .btn-row  equal-width, equal-height buttons with one gap; follows the page direction (RTL-safe).
             Put the main action first in the markup: it lands on the start side (right in Arabic). */
.btn-row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:var(--space-2);align-items:stretch;width:100%}
.btn-row>.btn{width:100%;padding-inline:var(--space-3);overflow:hidden;text-overflow:ellipsis}
.btn-row.stack{grid-auto-flow:row}

/* ---------- Fields ----------
   .field        label + control + hint, stacked
   .input        text input / select / textarea (same height and border everywhere)
   .input.lg     large single value (phone number, code)
   One look for every text field in the app. Legacy markup is mapped onto it here (input.fi, .ws-in,
   and bare inputs inside sheets, cards, login and input rows) so no screen can drift; new markup uses .input. */
.field{display:flex;flex-direction:column;gap:var(--space-1)}
.field>label,.field-l{font-size:var(--fs-sm);color:var(--text2);font-weight:var(--fw-medium)}
.field>small,.field-hint{font-size:var(--fs-xs);color:var(--text3)}
.input,input.fi,select.fi,textarea.fi,.ws-in,
:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input:not([type=checkbox],[type=radio],[type=range],[type=file],[type=color],[type=hidden],[type=submit],[type=button],[type=image]),select,textarea){width:100%;min-width:0;box-sizing:border-box;height:var(--field-h);padding:0 var(--field-pad-x);border:1px solid var(--field-border);border-radius:var(--field-radius);background:var(--field-bg);color:var(--field-text);font:inherit;font-size:var(--field-fs);outline:0;transition:border-color .15s,box-shadow .15s}
.input:focus,input.fi:focus,select.fi:focus,textarea.fi:focus,.ws-in:focus,
:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input,select,textarea):focus{border-color:var(--field-border-focus);box-shadow:var(--focus-ring)}
.input::placeholder,.fi::placeholder,.ws-in::placeholder,:where(.sheet,.card,.login,.row2,.pcv-bar) :where(input,textarea)::placeholder{color:var(--field-placeholder)}
textarea.input,textarea.fi,textarea.ws-in,:where(.sheet,.card,.login,.row2,.pcv-bar) :where(textarea){height:auto;min-height:calc(var(--field-h) * 2);padding:var(--field-pad-y) var(--field-pad-x);line-height:1.5;resize:vertical}
select.input,select.fi{appearance:none;-webkit-appearance:none}
/* .input.rich: a rich-text editor (contenteditable), same look as a textarea, grows with the text (mail compose) */
.input.rich{height:auto;min-height:calc(var(--field-h) * 4);max-height:60vh;overflow-y:auto;padding:var(--field-pad-y) var(--field-pad-x);line-height:1.6;outline:0;overflow-wrap:anywhere;cursor:text}
.input.rich:empty::before{content:attr(data-ph);color:var(--field-placeholder)}
.input.rich blockquote{margin:var(--space-1) 0;padding-inline-start:var(--space-3);border-inline-start:2px solid var(--stroke);color:var(--text2)}
.input.rich a{color:var(--accent)}
/* search field: .field-search > svg + input.input.search (the magnifier sits inside the field, at the start) */
.field-search{position:relative;display:block}
.field-search>svg{position:absolute;inset-inline-start:var(--field-pad-x);top:50%;width:18px;height:18px;transform:translateY(-50%);fill:none;stroke:var(--field-placeholder);stroke-width:2;stroke-linecap:round;pointer-events:none}
.input.search{padding-inline-start:calc(var(--field-pad-x) * 2 + 18px)}
.input.search::-webkit-search-decoration{-webkit-appearance:none}
.input.lg{height:var(--field-h-lg);font-size:var(--field-fs-lg);letter-spacing:.02em}
.input.code{text-align:center;letter-spacing:.3em;font-variant-numeric:tabular-nums}
.input.code:placeholder-shown{letter-spacing:normal}
.sw{width:51px;height:31px;border-radius:var(--radius-pill);background:var(--switch-off);position:relative;flex:none;transition:background .2s}
.sw span{position:absolute;top:2px;inset-inline-start:2px;width:27px;height:27px;border-radius:50%;background:var(--knob);box-shadow:var(--shadow-knob);transition:transform .2s}
.sw.on{background:var(--switch-on)}.sw.on span{transform:translateX(-20px)}[dir=ltr] .sw.on span{transform:translateX(20px)}
.sw:disabled{opacity:.55;cursor:not-allowed} /* a locked switch (e.g. Mirsal «يرسل لحاله», always off) */

/* ---------- Sections ----------
   .sec-card  a card that groups related content on a screen
   .sec-h     card header: title at the start, value/badge at the end */
.sec-card{display:flex;flex-direction:column;gap:var(--sec-gap);padding:var(--sec-pad);background:var(--sec-bg);border:.5px solid var(--sec-border);border-radius:var(--sec-radius);box-shadow:var(--shadow-card)}
.sec-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);min-height:24px}
.sec-h>b{font-size:var(--fs-lg);font-weight:var(--fw-bold)}
.sec-card small{color:var(--text3);font-size:var(--fs-xs);line-height:1.6}

/* ---------- Settings screens and list rows ----------
   .settings > .st-h (header with .icon-btn back) > .st-body
   .st-sec    section label above a group
   .st-grp    grouped list (rounded surface)
   .st-row    list row: optional icon <i>, text .acc-tx (b + small), trailing value/badge, chevron i.cv
   .st-row.danger  destructive row; .st-row.dis disabled
   .st-note   small note under a group */
.settings{position:fixed;inset:0;z-index:55;background:var(--chrome);display:flex;flex-direction:column;animation:fi .15s;padding-top:var(--st,env(safe-area-inset-top))}
.st-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:10px 14px}.st-h b{font-size:var(--fs-xl);font-weight:var(--fw-bold)}
.st-h>span:last-child:empty{width:var(--icon-btn)}
.st-body{flex:1;overflow:auto;padding:6px var(--space-4) calc(var(--space-6) + var(--sb,0px));max-width:560px;width:100%;margin:0 auto}
.st-sec{font-size:var(--fs-xs);color:var(--text3);padding:18px 14px 6px}
.st-grp{background:var(--sec-bg);border-radius:var(--sec-radius);border:.5px solid var(--sec-border);overflow:hidden}
.st-grp+.st-grp{margin-top:10px}
.st-row{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--row-h);padding:10px 14px;text-align:start;color:var(--text);border-bottom:.5px solid var(--stroke3);font-size:var(--fs-lg)}
.st-row:last-child{border-bottom:0}.st-row:active{background:var(--hover)}.st-row b{font-weight:var(--fw-medium)}.st-row small{color:var(--text3);font-size:var(--fs-xs)}
.st-row>i{width:30px;height:30px;border-radius:var(--radius-sm);background:var(--hover);display:grid;place-items:center;flex:none}.st-row>i svg{width:18px;height:18px}
.st-row>i.cv{background:none;width:18px}.st-row>i.cv svg{width:16px;color:var(--text3)}
.st-row>i.brand{background:var(--brand-soft);color:var(--brand)}
.st-row .conn-ic{width:28px;height:28px;border-radius:var(--radius-sm);background:var(--elevated);display:grid;place-items:center;font-weight:700;flex:none}
.st-row.danger{color:var(--danger);justify-content:center}.st-row.danger>i{background:var(--danger-soft);color:var(--danger)}.st-row.danger .acc-tx{flex:none}
.st-row.dis{opacity:.5}
.st-note{font-size:var(--fs-xs);color:var(--text3);padding:8px 14px;line-height:1.6}
.st-theme{display:flex;gap:6px;padding:10px 14px}
.st-theme button{flex:1;height:var(--control-h-sm);border-radius:var(--r-item);background:var(--hover);font-size:var(--fs);color:var(--text2);display:flex;align-items:center;justify-content:center;gap:6px}
.st-theme button.on{background:var(--text);color:var(--chrome);font-weight:var(--fw-bold)}
.st-theme button svg{flex:none}

/* ---------- Badges ----------
   .badge (.cnt is the legacy name): small pill for counts and states
   tones: .ok .warn .bad .brand */
.badge,.cnt{display:inline-flex;align-items:center;gap:var(--space-1);background:var(--hover);border-radius:var(--radius-pill);padding:2px 10px;font-size:var(--fs-sm);color:var(--text2);white-space:nowrap}
.badge.ok{background:var(--success-soft);color:var(--success)}
.badge.warn{background:var(--warning-soft);color:var(--warning)}
.badge.bad{background:var(--danger-soft);color:var(--danger)}
.badge.brand{background:var(--brand-soft);color:var(--brand)}
.badge svg{width:13px;height:13px;flex:none}.badge.xs{font-size:var(--fs-xxs);padding:1px 8px}

/* ---------- Omxio face (public/omxio-face.js -> omxioFace()) ---------- */
.o-face{display:inline-grid;place-items:center;width:var(--face-size);height:var(--face-size);flex:none;border-radius:50%;line-height:0}
.o-face svg{width:100%;height:100%;display:block;overflow:visible}

/* ---------- Omxio guide message: the face + a speech bubble (tones: .good .bad) ---------- */
.guide-msg{display:flex;gap:10px;align-items:flex-start}
.guide-msg>.o-face{--face-size:34px;margin-top:2px}
.guide-msg>p{margin:0;flex:1;min-width:0;padding:10px 14px;border-radius:var(--radius-lg);border-start-start-radius:var(--radius-xs);background:var(--elevated);border:.5px solid var(--stroke3);line-height:1.7;color:var(--text)}
.guide-msg.good>p{background:var(--brand-soft);border-color:transparent}
.guide-msg.bad>p{background:var(--danger-soft);border-color:transparent;color:var(--danger-ink)}

/* ---------- Meter (progress / health bar) tones: .ok .warn .bad ---------- */
.meter{height:8px;border-radius:var(--radius-pill);background:var(--stroke);overflow:hidden}
.meter>i{display:block;height:100%;border-radius:inherit;background:var(--brand)}
.meter>i.ok{background:var(--success-bar)}.meter>i.warn{background:var(--warning-bar)}.meter>i.bad{background:var(--danger-bar)}
/* .meter > i[data-pct]: the width comes from the data (set via the CSSOM after paint), grows in; .meter.lux sits on the deep «ليلي فاخر» card */
.meter>i[data-pct]{inline-size:0;transition:inline-size .5s ease}
.meter.lux{background:var(--lux-track)}.meter.lux>i.ok{background:var(--lux-ink)}
@media (prefers-reduced-motion:reduce){.meter>i[data-pct]{transition:none}}
.tone-ok{color:var(--success)}.tone-warn{color:var(--warning)}.tone-bad{color:var(--danger)}
.st-note.center{text-align:center}
.st-grp.gap-lg{margin-top:28px}
/* answered (locked) cards: their submit button reads as done, not pressable */
.card.locked .btn{background:color-mix(in srgb,var(--text) 22%,var(--elevated));border-color:transparent;color:var(--text2);box-shadow:none;cursor:default}

/* ---------- Info tip ----------
   .info-btn   small round «!» next to a setting title (public/info-tip.js)
   .info-pop   the popover it opens: what the setting does, its role, an example */
.info-btn{display:inline-grid;place-items:center;width:18px;height:18px;margin-inline-start:6px;padding:0;border:1px solid var(--stroke);border-radius:var(--radius-pill);background:var(--elevated);color:var(--brand-strong);font:inherit;font-size:var(--fs-xxs);font-weight:var(--fw-bold);line-height:1;vertical-align:middle;cursor:pointer}
.info-btn:active{background:var(--brand-soft)}
.info-btn:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.info-pop{position:fixed;z-index:9999;padding:var(--space-3) var(--space-4);border:.5px solid var(--stroke);border-radius:var(--radius-md);background:var(--elevated);color:var(--text);box-shadow:var(--shadow-pop);font-size:var(--fs-sm);line-height:1.6}
.info-pop-t{display:block;margin-bottom:var(--space-1);font-size:var(--fs);color:var(--brand-ink)}
:root[data-theme=dark] .info-pop-t{color:var(--brand)}
.info-pop p{margin:var(--space-1) 0 0}
.info-pop-k{font-weight:var(--fw-bold);color:var(--text2)}
.info-pop-ex{padding:var(--space-2);border-radius:var(--radius-sm);background:var(--brand-tint)}
.btn.sm[aria-pressed=true]{background:var(--brand-soft);color:var(--brand-ink);border-color:var(--brand)}
:root[data-theme=dark] .btn.sm[aria-pressed=true]{color:var(--brand)} /* --brand-ink is too dark on the dark --brand-soft */

/* passkey verify forms: phrase field hidden until 3 failed face captures */
.pk-off{display:none!important}
.pk-hint{display:block;opacity:.75;margin-top:4px}

/* ---------- Supervisor menu above the send button («قائمة المشرفين فوق زر الإرسال», public/composer.js) ----------
   .sup-menu      upward menu over the composer: one row per supervisor, the active one nearest the button;
                  .at-right / .at-left pin it to the send button's physical side (owner msg 164ad0c2)
   .sup-mi        row: face (.sup-mi-av) + name (.sup-mi-nm) only; .sup-mi.on = the active supervisor (preselected) */
.sup-menu{position:absolute;bottom:100%;inset-inline-end:var(--space-3);z-index:20;display:flex;flex-direction:column-reverse;gap:2px;min-width:var(--sup-menu-w);max-width:calc(100vw - var(--space-6));max-height:50vh;overflow:auto;padding:var(--space-1);background:var(--sec-bg);border:.5px solid var(--sec-border);border-radius:var(--sec-radius);box-shadow:var(--shadow-pop);animation:fi .15s}
.sup-menu.at-right{right:var(--space-3);left:auto}
.sup-menu.at-left{left:var(--space-3);right:auto}
.sup-mi{display:flex;align-items:center;gap:var(--space-3);width:100%;min-height:var(--row-h);padding:var(--space-2) var(--space-3);border:0;border-radius:var(--radius-md);background:none;color:var(--text);font:inherit;font-size:var(--fs-lg);text-align:start;cursor:pointer;touch-action:manipulation}
.sup-mi:active{background:var(--hover)}
.sup-mi:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.sup-mi.on{background:var(--brand-soft)}
.sup-mi.on .sup-mi-nm{font-weight:var(--fw-bold)}
.sup-mi-av{display:grid;place-items:center;width:var(--sup-av);height:var(--sup-av);flex:none;border-radius:50%;overflow:hidden;line-height:0}
.sup-mi-av svg{width:100%;height:100%;display:block}
.sup-mi-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;unicode-bidi:plaintext}
.c-send[aria-haspopup]{touch-action:manipulation}

/* ---------- Stacked faces («وجوه المشرفين في الفقاعات وحالة العمل», public/sup-faces.js) ----------
   .face-stack    tappable group of whoever works now, the most important face on top; tap → «مين يشتغل الحين»
   .face-f        one face in a ring (.lg = the bigger face in the sheet); .face-more = «+N»; .face-ini = initials fallback
   .face-dot      live green dot (still under «تقليل الحركة») */
.face-stack{position:relative;display:inline-flex;align-items:center;flex:none;padding:0;margin:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-radius:var(--radius-pill);-webkit-tap-highlight-color:transparent}
.face-stack:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.face-f{position:relative;display:grid;place-items:center;width:var(--fstack-f);height:var(--fstack-f);flex:none;border-radius:50%;background:var(--fstack-bg);box-shadow:0 0 0 var(--fstack-ring) var(--fstack-ring-c);line-height:0;overflow:hidden}
.face-f svg{width:88%;height:88%;display:block}
.face-f + .face-f{margin-inline-start:var(--fstack-overlap)}
.face-f:nth-child(1){z-index:4}.face-f:nth-child(2){z-index:3}.face-f:nth-child(3){z-index:2}.face-f:nth-child(4){z-index:1}
.face-f + .face-more{margin-inline-start:calc(var(--fstack-overlap) / 3)}
.face-f.lg{width:var(--fstack-f-lg);height:var(--fstack-f-lg)}
.face-more{font-size:var(--fs-xxs);font-weight:var(--fw-bold);line-height:1;color:var(--text2);background:var(--fstack-more-bg)}
.face-ini{font-size:var(--fs-xs);font-weight:var(--fw-bold);line-height:1;color:var(--text)}
.face-dot{position:absolute;bottom:-1px;inset-inline-start:calc(var(--fstack-f) - var(--fstack-dot));z-index:5;width:var(--fstack-dot);height:var(--fstack-dot);border-radius:50%;background:var(--fstack-live);border:1.5px solid var(--fstack-ring-c);animation:dotPulse 1.4s ease-out infinite}
@media (prefers-reduced-motion:reduce){.face-dot{animation:none}}

/* ---------- Wallpaper picker («خلفية الدردشة», public/chat-wallpaper.js) ----------
   .wp-grid       picker tiles (square): 3 per row on a phone, 6 per row from 520px
   .wp-tile       one choice: a live thumbnail .wp-host + its name; .wp-tile.on = the chosen one (aria-pressed)
   .wp-prev       live preview frame of a small chat over the chosen wallpaper
   .wp-cap        small caption above a group of tiles
   .range         slider (dim, pattern strength, photo blur)
   .st-row.col    settings row stacked: title line above a control (slider) */
.wp-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);padding:0 14px var(--space-3)}
@media (min-width:520px){.wp-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}
.wp-tile{display:flex;flex-direction:column;align-items:stretch;gap:var(--space-1);min-width:0;padding:0;border:0;background:none;color:var(--text2);font:inherit;font-size:var(--fs-xs);line-height:1.3;text-align:center;cursor:pointer;touch-action:manipulation}
.wp-tile>.wp-host{position:relative;display:grid;place-items:center;aspect-ratio:var(--wp-tile-ratio);border-radius:var(--radius-md);overflow:hidden;isolation:isolate;border:1px solid var(--stroke);background:var(--chrome);color:var(--text3);transition:box-shadow .15s,border-color .15s}
.wp-tile>.wp-host svg{width:22px;height:22px;position:relative;z-index:1}
.wp-tile.on{color:var(--text);font-weight:var(--fw-bold)}
.wp-tile.on>.wp-host{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand)}
.wp-tile:focus-visible{outline:0}.wp-tile:focus-visible>.wp-host{box-shadow:var(--focus-ring)}
.wp-tile:disabled{opacity:.5;cursor:progress}
.wp-tile>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wp-cap{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);padding:var(--space-3) 14px var(--space-2);font-size:var(--fs-xs);color:var(--text3)}
.wp-prev{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;height:var(--wp-prev-h);margin:var(--space-3) 14px 0;padding:var(--space-3);border-radius:var(--radius-lg);overflow:hidden;isolation:isolate;border:.5px solid var(--stroke3);background:var(--chrome)}
.range{display:block;width:100%;height:var(--range-h);margin:0;accent-color:var(--brand);cursor:pointer;touch-action:pan-y}
.range:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-pill)}
.wp-tile>.wp-host{--wp-pat-size:120px}
.wp-tile>.wp-host>.wp-l{animation:none}
.wp-tile>.wp-host>.wp-l.fx{filter:blur(10px)}
.wp-prev>.wp-l{z-index:0}
.wp-prev .mwrap,.wp-prev .day{position:relative;z-index:1}
.wp-prev .m{max-width:80%;font-size:var(--fs);line-height:var(--lh)}
.wp-prev .day{align-self:center;font-size:var(--fs-xxs)}
.st-row.col{flex-direction:column;align-items:stretch;gap:var(--space-1)}
.st-row.col>.acc-tx{display:flex;flex-direction:row;flex:none;align-items:center;justify-content:space-between;gap:var(--space-2)}
/* ---------- «المنسوخات جنب اللصق»: the app's edit bar (public/side.js) in the iPhone edit-menu look ----------
   .selbar            floating bar: text labels, thin dividers, a tail pointing at the text (.below = tail on top)
   .selbar .k         accent item («المنسوخات», «اسأل Omxio»); .on = its popover is open; .sb-n = how many copies
   .selbar .sb-ch     ›/‹ pages to the extra actions
   .clip-pop          «آخر المنسوخات» popover: rows (.clip-it > .clip-go + .clip-x), .hl newest, .busy while pasting,
                      .sw while swiped (--clip-dx), .clip-empty, .clip-foot. Tokens: --selbar-* / --clip-* in theme-tokens.css */
.selbar{position:fixed;z-index:130;max-width:var(--selbar-max-w);border-radius:var(--selbar-radius);background:var(--selbar-bg);backdrop-filter:blur(var(--selbar-blur));-webkit-backdrop-filter:blur(var(--selbar-blur));box-shadow:var(--selbar-shadow);color:var(--selbar-ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;animation:sb-in .14s ease-out}
.selbar::after{content:"";position:absolute;bottom:calc(var(--selbar-tail) * -1);left:var(--sb-tail,50%);width:calc(var(--selbar-tail) * 2);height:calc(var(--selbar-tail) * 2);margin-left:calc(var(--selbar-tail) * -1);transform:rotate(45deg);background:var(--selbar-bg);z-index:-1;border-radius:2px}
.selbar.below::after{bottom:auto;top:calc(var(--selbar-tail) * -1)}
.selbar .sb-row{display:flex;align-items:stretch;height:var(--selbar-h);border-radius:inherit;overflow-x:auto;scrollbar-width:none;background:var(--selbar-bg)}
.selbar .sb-row::-webkit-scrollbar{display:none}
.selbar button{display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:none;height:var(--selbar-h);min-width:44px;margin:0;padding:0 var(--selbar-pad-x);border:0;border-inline-start:.5px solid var(--selbar-sep);border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--selbar-fs);line-height:1;white-space:nowrap;cursor:pointer;touch-action:manipulation}
.selbar button:first-child{border-inline-start:0}
.selbar button:active,.selbar button:hover{background:var(--selbar-press)}
.selbar button:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.selbar button.k{color:var(--selbar-key);font-weight:var(--fw-bold)}
.selbar button.on{background:var(--selbar-on)}
.selbar .sb-ch{min-width:38px;padding:0 var(--space-2);color:var(--selbar-chev)}
.selbar .sb-ch svg{width:17px;height:17px}
.selbar .sb-n{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 5px;border-radius:var(--radius-pill);background:var(--selbar-badge-bg);color:var(--selbar-badge-ink);font-size:var(--selbar-badge-fs);font-style:normal;font-weight:700;line-height:1}
@keyframes sb-in{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
.clip-pop{position:fixed;z-index:131;display:flex;flex-direction:column;width:min(var(--clip-w),calc(100vw - 24px));max-height:min(var(--clip-max-h),var(--clip-room,70vh));border-radius:var(--clip-radius);background:var(--clip-bg);backdrop-filter:blur(var(--selbar-blur));-webkit-backdrop-filter:blur(var(--selbar-blur));box-shadow:var(--clip-shadow);color:var(--selbar-ink);overflow:hidden;animation:sb-in .16s ease-out;-webkit-user-select:none;user-select:none}
.clip-pop .clip-h{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);flex:none;padding:10px 14px 6px;color:var(--clip-meta);font-size:var(--fs-sm);font-weight:var(--fw-bold)}
.clip-pop .clip-a{margin:0;padding:2px 0;border:0;background:none;color:var(--clip-key);font:inherit;font-weight:var(--fw-bold);cursor:pointer}
.clip-pop .clip-list{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.clip-pop .clip-it{position:relative;display:flex;align-items:stretch;border-top:.5px solid var(--clip-sep);transform:translateX(var(--clip-dx,0));transition:transform .18s ease;touch-action:pan-y}
.clip-pop .clip-it.sw{transition:none;background:var(--clip-swipe-bg)}
.clip-pop .clip-it.hl{background:var(--clip-hl)}
.clip-pop .clip-go{display:flex;align-items:center;gap:10px;flex:1;min-width:0;margin:0;padding:11px 14px;padding-inline-end:4px;border:0;border-radius:0;background:none;color:inherit;font:inherit;font-size:var(--clip-fs);text-align:start;cursor:pointer}
.clip-pop .clip-go:hover,.clip-pop .clip-go:active{background:var(--selbar-press)}
.clip-pop .clip-go:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.clip-pop .clip-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.clip-pop .clip-t.mono{font-family:var(--clip-mono);font-size:var(--clip-mono-fs);direction:ltr;text-align:left;unicode-bidi:plaintext}
.clip-pop .clip-m{flex:none;color:var(--clip-meta);font-size:var(--clip-meta-fs);white-space:nowrap}
.clip-pop .clip-it.busy{opacity:.6}
.clip-pop .clip-x{flex:none;width:40px;margin:0;padding:0;border:0;border-radius:0;background:none;color:var(--clip-x);font-size:18px;line-height:1;cursor:pointer}
.clip-pop .clip-x:hover{color:var(--danger)}
.clip-pop .clip-x:focus-visible{outline:0;box-shadow:inset var(--focus-ring)}
.clip-pop .clip-empty{display:flex;flex-direction:column;gap:4px;padding:14px 14px 16px;border-top:.5px solid var(--clip-sep);font-size:var(--fs);line-height:1.5}
.clip-pop .clip-empty span{color:var(--clip-meta);font-size:var(--fs-sm)}
.clip-pop .clip-foot{flex:none;padding:8px 14px 11px;border-top:.5px solid var(--clip-sep);color:var(--clip-meta);font-size:var(--clip-meta-fs);line-height:1.5}
@media (prefers-reduced-motion:reduce){.selbar,.clip-pop{animation:none}.clip-pop .clip-it{transition:none}}
/* sync pill (local-cache.js): synced / syncing / offline */
.sync-pill{display:inline-flex;align-items:center;gap:5px;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:600;white-space:nowrap;line-height:1.6}
.sync-pill i{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.sync-pill.s-synced{background:var(--success-soft);color:var(--success)}
.sync-pill.s-syncing{background:var(--brand-soft);color:var(--brand-strong)}
.sync-pill.s-syncing i{animation:syncp 1s ease-in-out infinite}
.sync-pill.s-offline{background:var(--elevated-h);color:var(--text2)}
@keyframes syncp{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.sync-pill.s-syncing i{animation:none}}

/* «الرد السريع» quick replies under a fast answer — Omxio tokens only */
.qr-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.qr-row .qr-b { border-radius: 999px; }

/* «عرض عمل البوت الحديث» (public/activity.js; owner msg 69b15881) — every look reads the --act-* tokens.
   .act-hd   live head: kind icon, shimmering current step, ticking timer, chevron (tap = all steps)
   .act-tl   step timeline on a thin rail (.act-st.done / .act-st.run, .act-more = «+N قبلها»)
   .act-sum  collapsed «اشتغل ٢د ١٤ث · ٦ خطوات» line above the finished reply (tap = the steps) */
.typing.act-run{align-items:flex-start}
.typing.act-run > .act-col{flex:0 1 auto;align-items:flex-start;min-width:0;max-width:var(--act-max)}
.act-live{display:flex;flex-direction:column;min-width:0;max-width:100%}
.act-hd{display:flex;align-items:center;gap:var(--act-gap);max-width:100%;min-height:var(--act-ic-box);margin:0;padding:0;border:0;background:none;color:var(--act-ink2);font:inherit;font-size:var(--act-fs);text-align:start;cursor:pointer}
.act-hd:disabled{cursor:default;opacity:1}
.act-hd:focus-visible,.act-sum:focus-visible{outline:0;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
.act-ic{display:inline-flex;align-items:center;justify-content:center;flex:none;width:var(--act-ic-box);height:var(--act-ic-box);border-radius:var(--act-ic-radius);background:var(--act-ic-bg);color:var(--act-ic-ink)}
.act-ic svg{width:var(--act-ic-s);height:var(--act-ic-s)}
.act-hd .act-ic{animation:actPulse 1.6s ease-in-out infinite}
.act-hd .act-ic.k-wait{color:var(--act-wait)}.act-hd .act-ic.k-error{color:var(--act-err)}
.act-lbl{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext;background:linear-gradient(90deg,var(--act-shim-a) 0%,var(--act-shim-b) 50%,var(--act-shim-a) 100%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:actShim var(--act-shim-dur) linear infinite}
[dir=rtl] .act-lbl,.act-lbl:dir(rtl){animation-direction:reverse}
.act-time{flex:none;padding:0 var(--act-time-pad-x);border-radius:var(--radius-pill);background:var(--act-time-bg);color:var(--act-time-ink);font-size:var(--act-time-fs);line-height:1.7;font-variant-numeric:tabular-nums;direction:ltr}
.act-chv{display:inline-flex;flex:none;color:var(--act-ink3);transition:transform .2s ease}
.act-chv svg{width:var(--act-st-ic);height:var(--act-st-ic)}
[aria-expanded=true] > .act-chv{transform:rotate(180deg)}
.act-tl{position:relative;display:flex;flex-direction:column;gap:var(--act-gap);margin:var(--act-gap) 0 0;padding:0;list-style:none;font-size:var(--act-fs-sm)}
.act-tl::before{content:"";position:absolute;inset-block:var(--act-gap);inset-inline-start:calc(var(--act-ic-box) / 2 - var(--act-rail-w) / 2);width:var(--act-rail-w);background:var(--act-rail);border-radius:var(--radius-pill)}
.act-st,.act-more{position:relative;display:flex;align-items:center;gap:var(--act-st-gap);min-width:0;color:var(--act-ink3)}
.act-st .act-ic{position:relative;width:var(--act-ic-box);height:var(--act-st-ic);border-radius:0;background:var(--act-st-bg);color:var(--act-ink3)}
.act-st .act-ic svg{width:var(--act-st-ic-s);height:var(--act-st-ic-s)}
.act-st.done .act-ic{color:var(--act-done)}
.act-st.done .act-ic.k-error{color:var(--act-err)}
.act-st.run{color:var(--act-ink)}
.act-st.run .act-ic{color:var(--act-run);animation:actPulse 1.6s ease-in-out infinite}
.act-more{padding-inline-start:calc(var(--act-ic-box) + var(--act-st-gap));cursor:pointer;font-size:var(--act-time-fs)}
.act-st-t{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext}
.act-st-d{flex:none;color:var(--act-ink3);font-size:var(--act-time-fs);font-variant-numeric:tabular-nums}
.act-box{display:flex;flex-direction:column;align-items:flex-start;max-width:min(var(--act-max),100%);margin:2px 0 4px;animation:actIn .25s ease}
.act-sum{display:inline-flex;align-items:center;gap:var(--act-gap);max-width:100%;height:var(--act-sum-h);margin:0;padding:0 var(--act-sum-pad-x);padding-inline-start:3px;border:0;border-radius:var(--act-sum-radius);background:var(--act-sum-bg);color:var(--act-sum-ink);font:inherit;font-size:var(--act-fs-sm);cursor:pointer}
.act-sum:hover{background:var(--act-sum-bg-h)}
.act-sum .act-ic{background:none;color:var(--act-done)}
.act-sum-t{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.act-box .act-tl{align-self:stretch}
/* «مؤقت على كل رسالة» (owner voice msg 32354128): every reply shows its time; .act-ph = one row of phase chips
   (.act-pc: تفكير / شغل / كتابة / إرسال + seconds) under the «استغرق …» line. Looks only from --act-pc-* tokens. */
span.act-sum{cursor:default}
span.act-sum:hover{background:var(--act-sum-bg)}
.act-ph{display:flex;flex-wrap:wrap;gap:var(--act-ph-gap);max-width:100%;margin-top:var(--act-ph-gap)}
.act-pc{display:inline-flex;align-items:center;gap:var(--act-pc-gap);height:var(--act-pc-h);padding:0 var(--act-pc-pad-x);padding-inline-start:2px;border-radius:var(--act-pc-radius);background:var(--act-pc-bg);color:var(--act-pc-ink);font-size:var(--act-pc-fs);white-space:nowrap}
.act-pc .act-ic{width:var(--act-pc-h);height:var(--act-pc-h);background:none;color:var(--act-pc-ink)}
.act-pc .act-ic svg{width:var(--act-pc-ic);height:var(--act-pc-ic)}
.act-pc-d{font-weight:600;color:var(--act-pc-d-ink);font-variant-numeric:tabular-nums}
@keyframes actShim{from{background-position:100% 0}to{background-position:-100% 0}}
@keyframes actPulse{50%{opacity:.55}}
@keyframes actIn{from{opacity:0;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.act-lbl{animation:none;background:none;color:var(--act-ink2)}.act-hd .act-ic,.act-st.run .act-ic,.act-box{animation:none}.act-chv{transition:none}}
/* Channel connect pane (owner msg e407075c): a channel box (WhatsApp, mail, any app) shows this instead of its list
   while the channel is not connected — phone pairing code, QR code, or sign-in (OAuth). public/connect-pane.js */
.conn-pane{display:flex;flex-direction:column;flex:none;gap:var(--sec-gap);width:100%;max-width:460px;margin:auto;padding:var(--space-5) var(--space-4)}
.conn-hd{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding-bottom:var(--space-2);text-align:center}
.conn-hd>b{font-size:var(--fs-xl);font-weight:var(--fw-bold);color:var(--text)}
.conn-hd>small{font-size:var(--fs-sm);line-height:1.6;color:var(--text2)}
.conn-ic{display:grid;place-items:center;width:56px;height:56px;border-radius:var(--radius-pill);background:var(--sec-bg);border:.5px solid var(--sec-border);color:var(--text2)}
.conn-ic svg{width:28px;height:28px}
.conn-m .sec-h>b{display:inline-flex;align-items:center;gap:var(--space-2)}
.conn-mi{display:inline-grid;place-items:center;width:22px;height:22px;color:var(--brand)}
.conn-mi svg{width:20px;height:20px}
.conn-res:empty{display:none}
.conn-res{display:flex;flex-direction:column;gap:var(--space-2)}
.conn-code{padding:var(--space-3);border-radius:var(--field-radius);background:var(--field-bg);border:1px solid var(--field-border);font-size:26px;font-weight:var(--fw-bold);letter-spacing:.14em;text-align:center;font-variant-numeric:tabular-nums;color:var(--text)}
.conn-qr{display:grid;place-items:center}
.conn-qr img{width:min(232px,100%);aspect-ratio:1;border-radius:var(--radius-md);border:1px solid var(--field-border)}
.conn-steps{display:flex;flex-direction:column;gap:var(--space-1);margin:0;padding-inline-start:var(--space-5);font-size:var(--fs-sm);line-height:1.6;color:var(--text2)}
.conn-acc{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2)}
.conn-acc>span{display:flex;flex-direction:column;min-width:0}
.conn-acc>span>small{line-height:1.5}
.conn-foot .btn{margin-top:var(--space-1)}
/* «لوحة المهام المتوازية» (public/par-tasks.js; owner voice 4c8360a3): under the live activity card (kept as is), every other running
   task in the same anatomy: .act-hd head (icon + name + step + timer + chevron) and .act-tl steps when opened.
   .ptk.n1/.n2/.n3 = columns side by side (max 3); .ptk.tiles (> 3) = square tiles with a native <progress> bar and a step strip;
   an opened tile spans the row. .ptk-c.stall / .wait / .fail get a flag; .done fades to a tick. Looks only from --ptk-* / --act-* tokens. */
.typing.has-ptk > .act-col{flex:1 1 0%;min-width:0;width:100%;max-width:min(var(--ptk-max),100%);align-items:stretch}
.typing.has-ptk .act-live{max-width:min(var(--act-max),100%)}
.ptk{display:flex;flex-direction:column;gap:var(--ptk-gap);align-self:stretch;min-width:0;margin-top:var(--ptk-gap)}
.ptk-sum{display:flex;align-items:center;gap:var(--act-gap);min-width:0;color:var(--act-ink2);font-size:var(--act-fs-sm)}
.ptk-sum .act-ic{background:none;color:var(--act-run)}
.ptk-more{margin:0;margin-inline-start:auto;padding:0;border:0;background:none;color:var(--act-ink3);font:inherit;font-size:var(--act-time-fs);text-decoration:underline;cursor:pointer}
.ptk-grid{display:grid;align-items:start;gap:var(--ptk-gap);grid-template-columns:repeat(var(--ptk-cols,1),minmax(0,1fr))}
.ptk.n2{--ptk-cols:2}.ptk.n3{--ptk-cols:3}
.ptk.tiles .ptk-grid{grid-template-columns:repeat(auto-fill,minmax(var(--ptk-tile),1fr))}
.ptk-c{display:flex;flex-direction:column;gap:var(--act-gap);min-width:0;padding:var(--ptk-c-pad);border:1px solid var(--ptk-c-bd);border-radius:var(--ptk-c-radius);background:var(--ptk-c-bg);animation:actIn .25s ease}
.ptk.tiles .ptk-c{aspect-ratio:1;justify-content:space-between}
.ptk.tiles .ptk-c.open{grid-column:1/-1;aspect-ratio:auto;justify-content:flex-start}
.ptk-hd{align-items:flex-start;width:100%;min-height:0}
.ptk-tx{display:flex;flex-direction:column;flex:1;min-width:0;gap:1px}
.ptk-nm{overflow:hidden;color:var(--ptk-nm-ink);font-size:var(--act-fs-sm);font-weight:600;white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext}
.ptk-step{overflow:hidden;color:var(--ptk-step-ink);font-size:var(--act-time-fs);white-space:nowrap;text-overflow:ellipsis;unicode-bidi:plaintext}
.ptk.tiles .ptk-hd{flex-wrap:wrap}
.ptk.tiles .ptk-hd .act-time{margin-inline-start:auto}
.ptk.tiles .ptk-tx{order:5;flex-basis:100%}
.ptk.tiles .ptk-c:not(.open) .act-chv{display:none}
.ptk-nm{display:-webkit-box;white-space:normal;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.ptk-meta{display:flex;flex-direction:column;gap:var(--ptk-dot-gap);min-width:0}
.ptk-bar{-webkit-appearance:none;appearance:none;display:block;width:100%;height:var(--ptk-bar-h);border:0;border-radius:var(--radius-pill);background:var(--ptk-bar-bg);color:var(--ptk-bar-fill);overflow:hidden}
.ptk-bar::-webkit-progress-bar{background:var(--ptk-bar-bg);border-radius:var(--radius-pill)}
.ptk-bar::-webkit-progress-value{background:var(--ptk-bar-fill);border-radius:var(--radius-pill);transition:width .4s ease}
.ptk-bar::-moz-progress-bar{background:var(--ptk-bar-fill);border-radius:var(--radius-pill)}
.ptk-bar:indeterminate{background:linear-gradient(90deg,var(--ptk-bar-bg) 0%,var(--ptk-bar-fill) 50%,var(--ptk-bar-bg) 100%);background-size:200% 100%;animation:actShim var(--act-shim-dur) linear infinite}
.ptk-bar:indeterminate::-webkit-progress-bar{background:transparent}
.ptk-bar:indeterminate::-moz-progress-bar{background:transparent}
.ptk-strip{display:flex;flex-wrap:wrap;gap:var(--ptk-dot-gap)}
.ptk-dot{width:var(--ptk-dot);height:var(--ptk-dot);border-radius:var(--radius-pill);background:var(--act-rail)}
.ptk-dot.done{background:var(--act-done)}
.ptk-dot.run{background:var(--ptk-hb-idle)}
/* «نبض حقيقي» (caa8f618): the running dot glows only while its worker's heartbeats are fresh (hb-live); red when they stopped (hb-lost) */
.ptk-dot.run.hb-live{background:var(--ptk-hb-live);box-shadow:0 0 0 var(--ptk-hb-ring) var(--ptk-hb-glow);animation:ptkGlow var(--ptk-hb-dur) ease-in-out infinite}
.ptk-dot.run.hb-lost{background:var(--ptk-lost);box-shadow:0 0 0 var(--ptk-hb-ring) var(--ptk-lost-bg)}
.ptk-hb{flex:none;align-self:center}
.ptk-c.stall.lost{border-color:var(--ptk-lost-bd)}
.ptk-c.stall.lost .ptk-flag.stall{background:var(--ptk-lost-bg);color:var(--ptk-lost)}
.ptk-c.stall.lost .act-hd .act-ic{color:var(--ptk-lost)}
.ptk-wake{max-width:100%;margin:0;border:0;white-space:normal;text-align:start;font:inherit;font-size:var(--act-time-fs);font-weight:600;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.ptk-wake:focus-visible{outline:2px solid var(--ptk-lost);outline-offset:1px}
@keyframes ptkGlow{50%{opacity:.6;box-shadow:0 0 0 0 var(--ptk-hb-glow)}}
.ptk-flag{align-self:flex-start;padding:0 var(--act-time-pad-x);border-radius:var(--radius-pill);font-size:var(--act-time-fs);font-weight:600;line-height:1.7;white-space:nowrap}
.ptk-flag.stall{background:var(--ptk-stall-bg);color:var(--ptk-stall)}
.ptk-flag.wait{background:var(--ptk-wait-bg);color:var(--ptk-wait)}
.ptk-flag.fail{background:var(--ptk-fail-bg);color:var(--ptk-fail)}
.ptk-c.stall{border-color:var(--ptk-stall-bd)}
.ptk-c.stall .act-hd .act-ic,.ptk-c.wait .act-hd .act-ic,.ptk-c.done .act-hd .act-ic,.ptk-c.fail .act-hd .act-ic{animation:none}
.ptk-c.stall .act-hd .act-ic{color:var(--ptk-stall)}
.ptk-c.done .act-hd .act-ic{background:none;color:var(--act-done)}
.ptk-c.fail .act-hd .act-ic{background:none;color:var(--act-err)}
.ptk-c.done,.ptk-c.fail{opacity:var(--ptk-done-fade);animation:ptkFade var(--ptk-done-dur) ease}
.ptk.tiles .ptk-c.done,.ptk.tiles .ptk-c.fail{aspect-ratio:auto;justify-content:flex-start}
.ptk-fin{background:none}
.ptk-tl{margin:0}
.act-st.next{opacity:.6}
.ptk-who{padding-inline-start:calc(var(--act-ic-box) + var(--act-st-gap));color:var(--act-ink3);font-size:var(--act-time-fs);list-style:none}

/* omnis-staff-task-cards + omnis-staff-cards-compact: chip/bar staff; full content on drill-down */
.ptk.staff-board .ptk-sum{flex-wrap:wrap}
.ptk-sum-sub{color:var(--act-ink3);font-size:var(--act-time-fs)}
.ptk-seg{display:flex;gap:4px;padding:3px;margin:0;border-radius:999px;background:var(--hover);align-self:flex-start}
.ptk-seg button{flex:0 0 auto;width:36px;height:28px;padding:0;border:0;border-radius:999px;background:transparent;color:var(--text2);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.ptk-seg button svg{width:15px;height:15px;display:block}
/* t680u contrast P0: active = light pill + dark ink (btn tokens); never white-on-white */
.ptk-seg button.on{background:var(--btn-bg);color:var(--btn-text);box-shadow:var(--shadow-pill)}
.ptk-seg button:focus-visible{outline:0;box-shadow:var(--focus-ring)}
.ptk-staff-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px;width:100%;max-width:100%;box-sizing:border-box}
@media (min-width:720px){.ptk-staff-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
.ptk-staff,.ptk-staff-row{display:flex;align-items:center;gap:6px;width:100%;min-height:30px;text-align:start;border:1px solid var(--ptk-c-bd);border-radius:999px;padding:3px 8px;background:var(--ptk-c-bg);color:var(--act-ink);font:inherit;cursor:pointer}
.ptk-staff:hover,.ptk-staff-row:hover{background:var(--hover)}
.ptk-staff.ask,.ptk-staff-row.ask{border-color:var(--ptk-wait-bd,var(--ptk-wait))}
.ptk-staff.stall,.ptk-staff-row.stall{border-color:var(--ptk-stall-bd)}
.ptk-staff.idle,.ptk-staff-row.idle{opacity:.72}
.ptk-av{width:22px;height:22px;flex:none;border-radius:50%;display:grid;place-items:center;overflow:hidden;background:var(--hover);font-weight:700;font-size:11px;color:var(--act-ink2)}
.ptk-staff-tx{flex:1;min-width:0;display:flex;flex-direction:row;align-items:center;gap:6px}
.ptk-staff-tx b{font-size:var(--act-time-fs);font-weight:600;color:var(--ptk-nm-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ptk-staff-tx small{font-size:10px;color:var(--ptk-step-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42%;flex:none}
.ptk-staff-n{font-style:normal;font-variant-numeric:tabular-nums;font-size:10px;font-weight:600;color:var(--act-ink2);min-width:1.1em;text-align:center}
.ptk-staff .cv,.ptk-staff-row .cv{font-size:12px;opacity:.55;flex:none}
.ptk-staff .ptk-flag,.ptk-staff-row .ptk-flag{align-self:center;font-size:9px;line-height:1.5;padding:0 5px}
.ptk-staff-list{display:flex;flex-direction:column;gap:3px}
.ptk-staff-list .ptk-av{width:20px;height:20px;font-size:10px}
.ptk-staff-list .ptk-staff-row{min-height:28px;padding:2px 8px;border-radius:999px}
.ptk-tools{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 4px}
.ptk-deploy{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 10px;border-radius:999px;background:var(--hover);color:var(--text2);font-size:var(--act-time-fs);font-variant-numeric:tabular-nums;max-width:100%}
.ptk-deploy span{direction:ltr;unicode-bidi:isolate;font-weight:600;color:var(--act-ink)}
.ptk-deploy b{font-weight:600;color:var(--act-ink2)}
.ptk-dep-bar{display:block;width:36px;height:4px;border-radius:999px;background:linear-gradient(90deg,var(--btn-bg) var(--ptk-dep,0%),var(--line) var(--ptk-dep,0%));flex:0 0 auto}
.ptk-dep-bar.indet{background:linear-gradient(90deg,transparent,var(--btn-bg),transparent);background-size:200% 100%;animation:ptk-dep-slide 1.2s linear infinite}
@keyframes ptk-dep-slide{0%{background-position:100% 0}100%{background-position:-100% 0}}

.ptk-drill{display:flex;align-items:center;gap:8px;padding:2px 0 4px;border-bottom:1px solid var(--ptk-c-bd);margin-bottom:2px}
.ptk-drill .ptk-av{width:32px;height:32px}
.ptk-drill-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ptk-drill-tx b{font-size:var(--act-fs-sm);font-weight:600;color:var(--ptk-nm-ink)}
.ptk-drill-tx small{font-size:var(--act-time-fs);color:var(--act-ink3)}
.ptk-back{flex:none}
.ptk-tid{display:block;font-size:10px;color:var(--act-ink3);font-family:ui-monospace,monospace;direction:ltr;unicode-bidi:plaintext}
@keyframes ptkFade{from{opacity:1}}
@media (max-width:560px){.ptk.n3{--ptk-cols:1}.ptk.n2 .ptk-step{display:none}}
@media (prefers-reduced-motion:reduce){.ptk-c,.ptk-dot.run,.ptk-dot.run.hb-live,.ptk-bar:indeterminate{animation:none}.ptk-bar::-webkit-progress-value{transition:none}}

/* t531: wsh-sys single row — Omxio | Templates | Addons never wrap */
.wsh-row{display:flex;align-items:center;gap:6px;flex-wrap:nowrap;min-width:0}
.seg.wsh-sys{display:flex;flex-wrap:nowrap;flex:1 1 auto;min-width:0;max-width:100%;align-self:stretch}
.seg.wsh-sys button{white-space:nowrap;flex:1 1 0;min-width:0;padding:5px 8px;overflow:hidden;text-overflow:ellipsis}

/* t1126u omnis-progress-staff-live: Working green on FIXED_STAFF cards (restored from v529) */
.ptk-staff.working,.ptk-staff-row.working{border-color:var(--act-run,var(--ok,#22c55e));box-shadow:0 0 0 1px color-mix(in srgb,var(--act-run,var(--ok,#22c55e)) 28%,transparent)}
.ptk-staff.working .ptk-flag.run,.ptk-staff-row.working .ptk-flag.run{color:var(--act-run,var(--ok,#22c55e))}

/* t1133u omnis-staff-cards-mobile-align: RTL narrow — no left overflow/clip of staff chips */
.typing.has-ptk{min-width:0;max-width:100%;width:100%;box-sizing:border-box;margin-inline:0;margin-block-start:8px}
.ptk.staff-board,.ptk.staff-drill{width:100%;max-width:100%;min-width:0;box-sizing:border-box;align-self:stretch}
.ptk.staff-board .ptk-staff,.ptk.staff-board .ptk-staff-row{min-width:0;max-width:100%;box-sizing:border-box}
.ptk.staff-board .ptk-staff-tx{min-width:0}
.ptk-staff-grid > .ptk-staff{overflow:hidden}
@media (max-width:560px){
  .typing.has-ptk > .act-col{flex:1 1 0%;min-width:0;max-width:100%;align-items:stretch}
  .ptk-staff-grid{gap:6px}
}

/* t557u — قوالب: فلاتر سطر واحد + أيقونات عرض فقط */
.sheet.edit.um.tpl-wide{width:min(1100px,96vw)!important;max-width:min(1100px,96vw)!important;max-height:min(94dvh,980px)}
.sheet.edit.um.tpl-wide .um-b{overflow:auto;max-height:min(86dvh,900px);padding-bottom:calc(12px + var(--sb,0px))}
.tpl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px}
.tpl-toolbar .seg.tpl-ver,
.tpl-toolbar .seg.tpl-mode{display:inline-flex;flex:0 0 auto;flex-wrap:nowrap;width:auto;max-width:none;align-self:center;gap:2px}
.tpl-toolbar .tpl-ver button{
  flex:0 0 auto!important;width:auto!important;min-width:max-content!important;
  height:32px;padding:0 14px!important;font-size:var(--fs-sm);
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  line-height:1;word-break:keep-all
}
.tpl-toolbar .tpl-mode button{
  flex:0 0 auto!important;width:40px!important;min-width:40px!important;height:32px;
  padding:0!important;gap:0!important;font-size:0!important;line-height:0;
  color:var(--text2);white-space:nowrap!important
}
.tpl-toolbar .tpl-mode button.on{color:var(--text)}
.tpl-toolbar .tpl-mode button svg{width:18px;height:18px;display:block;margin:0 auto;flex:none}
.tpl-toolbar .tpl-mode button > span{display:none!important}
.tpl-toolbar .tpl-mode button svg{display:block!important;visibility:visible!important;opacity:1!important;width:18px!important;height:18px!important;flex:none;margin:0 auto;overflow:visible;color:inherit}.tpl-toolbar .tpl-mode button svg *{display:block!important;visibility:visible!important;opacity:1!important;width:unset!important;height:unset!important;max-width:none!important;max-height:none!important}.tpl-toolbar .tpl-mode button{color:var(--text2)!important}.tpl-toolbar .tpl-mode button.on{color:var(--text)!important;background:var(--elevated)!important}
.tpl-count{margin-inline-start:auto;color:var(--text3);font-size:var(--fs-xs);white-space:nowrap}
.tpl-actions{margin-bottom:4px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tpl-card{padding:0;overflow:hidden;gap:0;min-width:0;border-radius:16px}
.tpl-card-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.tpl-card .sec-h{flex-wrap:wrap;gap:6px;align-items:center}
.tpl-card .sec-h b{flex:1 1 12rem;min-width:0;font-size:var(--fs);line-height:1.35;white-space:normal}
.tpl-card-body > small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text3)}
.tpl-sum{margin:0;font-size:var(--fs-xs);color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-acts{margin-top:6px;flex-wrap:wrap}
.tpl-prev{position:relative;aspect-ratio:16/9;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 18%,var(--elevated)),var(--chrome));border-block-end:.5px solid var(--stroke3);overflow:hidden}
.tpl-prev-empty,.tpl-prev-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text2);z-index:0}
.tpl-prev-mark{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:24px}
.tpl-prev-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:1;pointer-events:none}
.tpl-row{align-items:center}
.tpl-row-acts{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.tpl-empty{padding:16px 4px}
@media (max-width:780px){
  .sheet.edit.um.tpl-wide{width:100%!important;max-width:100%!important;margin-inline:0;border-radius:16px 16px 0 0}
  .tpl-grid{grid-template-columns:1fr}
  .tpl-toolbar .tpl-count{width:100%;margin-inline-start:0}
}

/* t557u — قوالب: فلاتر سطر واحد + أيقونات عرض فقط */
.sheet.edit.um.tpl-wide{width:min(1100px,96vw)!important;max-width:min(1100px,96vw)!important;max-height:min(94dvh,980px)}
.sheet.edit.um.tpl-wide .um-b{overflow:auto;max-height:min(86dvh,900px);padding-bottom:calc(12px + var(--sb,0px))}
.tpl-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0 14px}
.tpl-toolbar .seg.tpl-ver,
.tpl-toolbar .seg.tpl-mode{display:inline-flex!important;flex:0 0 auto!important;flex-wrap:nowrap!important;width:auto!important;max-width:none!important;align-self:center;gap:2px}
.tpl-toolbar .tpl-ver button{
  flex:0 0 auto!important;flex-grow:0!important;flex-shrink:0!important;
  width:auto!important;min-width:max-content!important;max-width:none!important;
  height:32px;padding:0 14px!important;font-size:var(--fs-sm);
  white-space:nowrap!important;overflow:visible!important;text-overflow:clip!important;
  line-height:32px;word-break:keep-all;hyphens:none
}
.tpl-toolbar .tpl-ver .tpl-ver-lab{display:inline-block;white-space:nowrap!important;word-break:keep-all}
.tpl-toolbar .tpl-mode button{
  flex:0 0 auto!important;flex-grow:0!important;flex-shrink:0!important;
  width:40px!important;min-width:40px!important;max-width:40px!important;height:32px;
  padding:0!important;gap:0!important;font-size:0!important;line-height:0;
  color:var(--text2);white-space:nowrap!important;overflow:hidden!important
}
.tpl-toolbar .tpl-mode button.on{color:var(--text)}
.tpl-toolbar .tpl-mode button svg{width:18px;height:18px;display:block;margin:0 auto;flex:none;pointer-events:none}
.tpl-toolbar .tpl-mode button > span{display:none!important}
.tpl-count{margin-inline-start:auto;color:var(--text3);font-size:var(--fs-xs);white-space:nowrap}
.tpl-actions{margin-bottom:4px}
.tpl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.tpl-card{padding:0;overflow:hidden;gap:0;min-width:0;border-radius:16px}
.tpl-card-body{display:flex;flex-direction:column;gap:8px;padding:14px 16px 16px}
.tpl-card .sec-h{flex-wrap:wrap;gap:6px;align-items:center}
.tpl-card .sec-h b{flex:1 1 12rem;min-width:0;font-size:var(--fs);line-height:1.35;white-space:normal}
.tpl-card-body > small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text3)}
.tpl-sum{margin:0;font-size:var(--fs-xs);color:var(--text2);line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tpl-acts{margin-top:6px;flex-wrap:wrap}
.tpl-prev{position:relative;aspect-ratio:16/9;background:linear-gradient(145deg,color-mix(in srgb,var(--brand) 18%,var(--elevated)),var(--chrome));border-block-end:.5px solid var(--stroke3);overflow:hidden}
.tpl-prev-empty,.tpl-prev-fallback{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:var(--text2);z-index:0}
.tpl-prev-mark{width:56px;height:56px;border-radius:16px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:24px}
.tpl-prev-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#fff;z-index:1;pointer-events:none}
.tpl-row{align-items:center}
.tpl-row-acts{display:flex;flex-wrap:wrap;gap:6px;flex:none}
.tpl-empty{padding:16px 4px}
@media (max-width:780px){
  .sheet.edit.um.tpl-wide{width:100%!important;max-width:100%!important;margin-inline:0;border-radius:16px 16px 0 0}
  .tpl-grid{grid-template-columns:1fr}
  .tpl-toolbar .tpl-count{width:100%;margin-inline-start:0}
}

/* t638u — Omxio/Odoo template cards parity */
.sheet.edit.um.tpl-wide{width:min(1100px,96vw)!important;max-width:min(1100px,96vw)!important}
.tpl-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));align-items:stretch}
.tpl-prev{min-height:140px;max-height:240px}
.tpl-prev-mark{width:56px;height:56px;font-size:24px;flex:none}
@media (min-width:680px){.tpl-grid:has(>.tpl-card:nth-child(2)){grid-template-columns:repeat(2,minmax(0,1fr))}}