/* shared/phone-ui.css — the phone's design language (run 078b, build-plan §3.1). PHONE ONLY: every rule below starts with
   html.ph-screen (shared/phone.js sets it when the SCREEN is under 768 px — ADR 0017), so a desk or a tablet computes
   nothing from this file (DS1, proved by factory/checks/phone-css-scope.js; DS6/DS7 by factory/checks/desk-baseline.js).
   The one exception is the helper that hides .ph-only everywhere else (html:not(.ph-screen) .ph-only).

   What it holds, in this order: the tokens (Chatwoot's measured values — factory/specs/078b-phone-redesign/chatwoot-theme
   .json), the type, the face-in-a-44-px-box rule, a 1:1 port of the approved prototype's components (all/base.css and
   all/extra.css — same values, no new ones), the pieces the pictures do not draw but the product needs (toast, states,
   switch), the global sheet chrome every .ui-drawer takes on the phone, the Instagram alert #uiConfirm becomes, and the
   motion. Loaded LAST in <head>, after the page's own <style>, so at equal specificity the shared language wins.

   Names. Components are q-<prototype name> (q-sheet, q-row, q-grp …): the ph- prefix is already a set of STATE classes with
   other meanings (body.ph-sheet hides the bar, .ph-chip is the board's run-077 chip …) and a ported .ph-sheet would have
   styled <body class="ph-sheet"> (critic G9). Inner parts and modifiers keep the prototype's names but only ever live
   under a q- component (.q-lead .l1, .q-btn.pri), so they cannot reach the desk's classes of the same name. Tokens are
   --ph-*: --line, --ink and --bg already mean other things in ui.css, admin and team.

   Family. html[data-ph-c="A"] is Chatwoot's classic look (the data pages), "B" the Instagram look (board, hub, lead, chat).
   Each page states it once in its <head> (the phone-ui.js tag); the board switches to A while its calendar shows.
   Theme. Light is html[data-theme="light"]; our dark is «no attribute» — hence :not([data-theme="light"]).

   Declared where the port is not literally 1:1 (each is the real page's equivalent of the prototype's 390×844 frame):
   · .app/.screen are the prototype's phone frame — the real page IS the frame, so they are not ported;
   · the prototype's .scrim/.sheet/.alert are position:absolute inside that frame — here position:fixed in the viewport;
   · ::after touch areas (.ib, .x) are replaced by the 44 px box of .q-hit (the tests measure boxes, not pseudo-elements);
   · the collisions the prototype has by accident are built from the intended rule (build-plan §14 R3): the bubble .q-m.in
     is not the field .q-in, the team list's .q-cr .r is not the dashboard row .q-r, and the chat header's back keeps
     F-chat's offset (no −10 px);
   · the concept-only parts the owner did not pick (the C bar, the B dashboard hero/metric rows, the C funnel/sumline/swipe,
     the A calendar's B variant) are not ported. */

/* ================================================================= tokens (§3.1) ================================================================= */
html.ph-screen{
  --ph-t1:#1C2024;--ph-t2:#60646C;--ph-t3:#8B8D98;--ph-line:#E8E8EC;--ph-hair:#EFEFF1;
  --ph-bg:#FFFFFF;--ph-card:#FFFFFF;--ph-sheet:#FFFFFF;--ph-page:#FFFFFF;
  --ph-soft:#F0F0F3;--ph-soft2:#F9F9FB;--ph-field:#F0F0F3;--ph-in:#F0F0F3;
  /* polish-p2: the brand blue as TEXT or a glyph — light #1462bf (≥ 4.5:1 on white, the panels and the 12–16 % blue tints), dark the brand blue as before */
  /* polish-p2: --ph-blue11, the phone's own text step (31 text uses, colour only), was #086DE0 = 4.38:1 on --ph-blue3 and 4.46:1 on --ph-soft — light reads the same text blue; dark keeps #7EB6FF */
  --ph-blue:#2781F6;--ph-blue-text:#1462bf;--ph-blue11:var(--ph-blue-text);--ph-blue-fill:#086DE0;   /* #552: the fill behind white text, 4.9:1 (--ph-blue, Chatwoot's #2781F6, is 3.8:1); light and dark alike */
  --ph-blue3:#E9F3FF;--ph-blue4:#DAECFF;
  --ph-ruby:#CA244D;--ph-ruby3:#FEEAED;--ph-ruby9:#E54666;
  --ph-teal:#008573;--ph-teal3:#E0F8F3;--ph-teal9:#12A594;
  --ph-amber:#AB6400;--ph-amber3:#FFF7C2;--ph-amber9:#FFC53D;
  --ph-iris:#5753C6;--ph-iris3:#F0F1FE;--ph-orange:#F76B15;--ph-orange3:#FFEFD6;
  --ph-won:#12A594;--ph-lost:#E54666;--ph-wa:#1DA851;
  --ph-ink:#1C2024;--ph-out:#E9F3FF;--ph-note:#FFF7C2;
  --ph-scrim:rgba(17,17,19,.38);--ph-grab:#D9D9E0;
  --ph-seg-on:#FFFFFF;--ph-seg-b:rgba(28,32,36,.07);--ph-wa-bg:#E5F7EC;--ph-notif-unread:#E9F3FF;--ph-online:#30A46C;
  --ph-sq-blue:#2781F6;--ph-sq-teal:#12A594;--ph-sq-ruby:#E54666;--ph-sq-amber:#F5A524;--ph-sq-iris:#5B5BD6;--ph-sq-slate:#8B8D98;
  --ph-sq-orange:#F76B15;--ph-sq-ink:#1C2024;
  --ph-glass:rgba(255,255,255,.45);--ph-glass-blur:blur(8px) saturate(180%);   /* rules #22/#23: .93/26 read solid on a real iPhone; Kareem: «يخف اكتر بس بسيط» */
  --ph-glass-bar:rgba(255,255,255,.7);--ph-lens:rgba(28,32,36,.07);
  --ph-glass-shadow:0 10px 30px rgba(28,32,36,.14),0 0 0 .5px rgba(28,32,36,.08);--ph-toast-shadow:0 10px 30px rgba(28,32,36,.14);
  --ph-hd-ib:rgba(139,141,152,.1);
  --ph-font:Inter,-apple-system,system-ui,sans-serif;
  --ph-ease-enter:cubic-bezier(.2,.8,.2,1);--ph-ease-up:cubic-bezier(.2,.9,.2,1);--ph-ease-pop2:cubic-bezier(.2,.9,.3,1.2);
  --ph-ease-pop:cubic-bezier(.34,1.8,.64,1);--ph-ease-lens:cubic-bezier(.34,1.45,.64,1);
  /* §3.2: a scroll list runs under the glass and still lets its last row reach above it */
  /* rule #23: the bar sits lower (Kareem: «ينزل لتحت شوية … يديني وسع ف شاشه المسجات») — 10 px in Safari, clear of the home line when installed */
  --ph-bar-bottom:max(10px,calc(env(safe-area-inset-bottom) - 12px));   /* installed icon: 22 px as before (Kareem: «تحت اوي لما فتحته من هناا») */
  --ph-bar-clear:calc(var(--ph-bar-bottom) + 70px);
}
html.ph-screen[data-ph-c="B"]{--ph-page:#F0F0F3}
html.ph-screen:not([data-theme="light"]){
  --ph-t1:#EDEEF0;--ph-t2:#B0B4BA;--ph-t3:#696E77;--ph-line:#272A2D;--ph-hair:#212225;
  --ph-bg:#111113;--ph-card:#18191B;--ph-sheet:#18191B;--ph-page:#111113;
  --ph-soft:#212225;--ph-soft2:#18191B;--ph-field:#212225;--ph-in:#212225;
  --ph-blue-text:var(--ph-blue);--ph-blue11:#7EB6FF;--ph-blue3:#0F2748;--ph-blue4:#0A3163;--ph-ruby:#FF949D;--ph-ruby3:#3A141E;
  --ph-teal:#0BD8B6;--ph-teal3:#0D2D2A;--ph-amber:#FFCA16;--ph-amber3:#302008;--ph-iris:#9EB1FF;--ph-iris3:#202248;--ph-orange3:#331E0B;
  --ph-ink:#EDEEF0;--ph-out:#0F2748;--ph-note:#302008;--ph-scrim:rgba(0,0,0,.6);--ph-grab:#3A3D42;
  --ph-seg-on:#2B2D31;--ph-seg-b:#212225;--ph-wa-bg:#0F2A1B;--ph-notif-unread:#0E1C30;
  --ph-glass:rgba(33,34,37,.45);--ph-glass-bar:rgba(33,34,37,.72);--ph-lens:rgba(255,255,255,.1);
  --ph-glass-shadow:0 10px 30px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.08);--ph-toast-shadow:0 10px 30px rgba(0,0,0,.5);
}
html.ph-screen[data-ph-page="bg"]{--ph-page:var(--ph-bg)}   /* reset: family B on the plain background (§3.1) */
/* the bar is not there: the keyboard is up, a sheet covers it, or this page is not inside the hub (§3.2) */
/* opened from the Home-Screen icon: iOS does NOT inset the page (no viewport-fit=cover → env() is 0 and the page still runs
   under the home line), so the bar is lifted by hand clear of it (Kareem 2026-09-26: «البار لسه نازل اوي ارفعه حبه كمان») */
@media (display-mode: standalone){html.ph-screen{--ph-bar-bottom:max(24px,calc(env(safe-area-inset-bottom) - 10px))}}
html.ph-screen.ph-kbd,html.ph-screen.ph-nobar{--ph-bar-clear:0px}
/* the team bubble is up (hub/chat/chat-bubble.js marks the hub and each of its frames' pages html.q-bubble-on — E078bG2-01): a
   page's end must scroll clear of it. The bubble sits 12 px over the 62 px capsule; the app's rule is 64 pt of room above that
   (its 56 + 8), so the clearance is the capsule's own bottom (the safe area is inside --ph-bar-bottom) + 62 + 12 + 64. Every
   scroll container pads with --ph-bar-clear, and the toasts sit on it, so one token carries all of them. Not while the bar is away. */
html.ph-screen.q-bubble-on:not(.ph-kbd):not(.ph-nobar){--ph-bar-clear:calc(var(--ph-bar-bottom) + 138px)}

/* ================================================================= type and base ================================================================= */
/* the one rule outside the phone scope (DS1): a node only the phone may show is hidden everywhere else. On the phone it
   takes whatever display its own rules give it (the board's calendar keeps html.ph-screen .ph-only{display:inline}). */
html:not(.ph-screen) .ph-only{display:none}
html.ph-screen body{font-family:var(--ph-font);-webkit-font-smoothing:antialiased;font-feature-settings:"cv11" 1;font-size:14px;line-height:1.35}
html.ph-screen[data-ph-body] body{background:var(--ph-page);color:var(--ph-t1)}   /* S2: a page that is ONLY a phone page (Chats, My day) paints its own body — one rule, not a copy per page */
/* the prototype's reset (* margin/padding 0, border-box; a bare button) — only inside our own components, at zero weight */
html.ph-screen :where([class^="q-"],[class*=" q-"]),html.ph-screen :where([class^="q-"],[class*=" q-"]) *{box-sizing:border-box;margin:0;padding:0}
html.ph-screen :where(button[class^="q-"],button[class*=" q-"],[class^="q-"] button,[class*=" q-"] button){font:inherit;color:inherit;background:none;border:0;cursor:pointer}
html.ph-screen svg.q-i{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
html.ph-screen .sm svg.q-i,html.ph-screen svg.q-i.sm{width:16px;height:16px}
html.ph-screen svg.q-i.lg{width:22px;height:22px}
html.ph-screen svg.q-i use{pointer-events:none}
html.ph-screen .q-muted{color:var(--ph-t2)}
html.ph-screen .q-num,html.ph-screen .q-fr .fn,html.ph-screen .q-day .dc,html.ph-screen .q-ag .tm b,html.ph-screen .q-lead .l1 .val,html.ph-screen .q-lead .l1 time{font-variant-numeric:tabular-nums}
html.ph-screen .q-kpi .v.q-num{font-variant-numeric:normal}

/* ---- a face inside a 44 px box (§3.1): the layout keeps the prototype's face, the finger gets 44 × 44 -------------------
   <button class="q-hit f32"><span class="q-face q-ib">…</span></button>. The box is transparent and pulled in by
   (44 − face)/2 on each side; .fw = a face of its own width (a chip): only the height is pulled in. */
html.ph-screen .q-hit{--q-face:32px;position:relative;display:inline-grid;place-items:center;flex:none;min-width:44px;min-height:44px;
  margin:calc((var(--q-face) - 44px) / 2);background:transparent;border:0;padding:0;color:inherit;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ph-screen .q-hit.f28{--q-face:28px}html.ph-screen .q-hit.f30{--q-face:30px}html.ph-screen .q-hit.f34{--q-face:34px}
html.ph-screen .q-hit.f36{--q-face:36px}html.ph-screen .q-hit.f38{--q-face:38px}html.ph-screen .q-hit.f40{--q-face:40px}
html.ph-screen .q-hit.fw{margin-inline:0;min-width:44px}   /* S2: a chip of its own width is still 44 wide for a finger («All» measured 43 — suite-45 #075-panel-touch) */
html.ph-screen .q-face{flex:none}
/* the keyboard's ring sits on the face, not on the transparent 44 px box around it */
html.ph-screen .q-hit:focus{outline:none}
html.ph-screen .q-hit:focus-visible>.q-face{outline:2px solid var(--ph-blue);outline-offset:2px}
/* a sideways scroller of faces (chips, tabs): the scroller carries the (44 − face)/2 padding, so the boxes are not clipped */
html.ph-screen .q-scroller{--q-face:32px;padding-block:calc((44px - var(--q-face)) / 2);margin-block:calc((var(--q-face) - 44px) / 2)}

/* ================================================================= base.css, ported ================================================================= */
html.ph-screen .q-dot{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
html.ph-screen .q-av{--h:210;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:13px;font-weight:600;letter-spacing:.2px;
  background:hsl(var(--h) 85% 94%);color:hsl(var(--h) 55% 34%)}
html.ph-screen:not([data-theme="light"]) .q-av{background:hsl(var(--h) 40% 20%);color:hsl(var(--h) 80% 78%)}
html.ph-screen .q-av.xs{width:20px;height:20px;font-size:9px}
html.ph-screen .q-ib{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;color:var(--ph-t1);position:relative}
html.ph-screen .q-tag{display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;border-radius:6px;font-size:11.5px;font-weight:500;white-space:nowrap}
html.ph-screen .q-tag.due{background:var(--ph-ruby3);color:var(--ph-ruby)}html.ph-screen .q-tag.soon{background:var(--ph-amber3);color:var(--ph-amber)}
html.ph-screen .q-tag.new{background:var(--ph-blue3);color:var(--ph-blue11)}html.ph-screen .q-tag.ok{background:var(--ph-teal3);color:var(--ph-teal)}
html.ph-screen .q-tag.none{background:var(--ph-soft);color:var(--ph-t2)}html.ph-screen .q-tag.src{background:var(--ph-soft);color:var(--ph-t2)}

/* headers */
html.ph-screen .q-hd{padding:14px 16px 0;flex:none}
html.ph-screen .q-hd-row{display:flex;align-items:center;gap:8px;min-height:40px}
html.ph-screen .q-hd-row h1{font-size:16px;font-weight:600;flex:1;display:flex;align-items:center;gap:6px;min-width:0}
html.ph-screen .q-hd-act{display:flex;gap:6px}
html.ph-screen[data-ph-c="A"] .q-hd .q-ib{background:var(--ph-hd-ib)}
html.ph-screen[data-ph-c="A"] .q-hd .q-ib.pri{background:var(--ph-blue-fill);color:#fff}
html.ph-screen[data-ph-c="B"] .q-hd{padding:10px 16px 0}
html.ph-screen[data-ph-c="B"] .q-hd-row h1{font-size:30px;font-weight:700;letter-spacing:-.6px}
/* S2 (seen at 320 × 844): «Sales board» wrapped onto two lines beside ⋯ + bell. The title keeps the drawn 30 px down to ~340 px of
   screen and only then steps down (to 22 px at the least), and never wraps — the page is its frame's width, so vw is the screen's */
html.ph-screen[data-ph-c="B"] .q-hd-row h1{font-size:clamp(22px,calc((100vw - 156px) / 5.9),30px);white-space:nowrap}
html.ph-screen .q-hd-row h1{overflow:hidden;text-overflow:ellipsis}
html.ph-screen[data-ph-c="B"] .q-hd .q-ib{width:36px;height:36px;border-radius:18px;background:var(--ph-soft)}
html.ph-screen[data-ph-c="B"] .q-hd .q-ib.pri{background:var(--ph-ink);color:var(--ph-bg)}
/* the bell (decision rule #20, L1b — bell/bell.png): the same 36 px round face at the END of every main page's header, raised in
   light (#14: #FFF + a 1 px ring), --soft in dark; the red count as the board's (ruby9, 18 px, 10.5/700, a 2 px ring in the page
   colour). PH.bell() draws it; the words or date beside it sit on its centre line. */
html.ph-screen[data-ph-c] .q-hit>.q-ib.q-bell{width:36px;height:36px;border-radius:18px;background:var(--ph-soft);box-shadow:none;color:var(--ph-t1);position:relative}
html.ph-screen[data-ph-c][data-theme="light"] .q-hit>.q-ib.q-bell{background:#FFFFFF;box-shadow:0 0 0 1px #E8E8EC}
html.ph-screen .q-bell-n{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--ph-ruby9);color:#fff;
  font-size:10.5px;font-weight:700;display:grid;place-items:center;border:2px solid var(--ph-page);box-sizing:border-box}
html.ph-screen .q-bell-n[hidden]{display:none}
html.ph-screen .q-hd-act:has(>[data-q-bell]){align-items:center}
html.ph-screen .q-hit[data-q-bell]{font-size:14px;font-weight:400;line-height:1.35}   /* the page's body text, not the heading it may sit in (the dashboard's h1) */
html.ph-screen .q-sub{font-size:12.5px;color:var(--ph-t2);margin-top:2px}
html.ph-screen .q-search{margin-top:10px;height:38px;border-radius:12px;background:var(--ph-soft);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--ph-t3);font-size:15px}

/* stage chips / tabs */
html.ph-screen .q-stages{display:flex;gap:6px;overflow:hidden;margin:12px -16px 0;padding:0 16px;white-space:nowrap}
html.ph-screen .q-stages .chip{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 11px;border-radius:16px;font-size:13px;font-weight:500;flex:none;color:var(--ph-t1)}
html.ph-screen .q-stages .chip .c{font-size:12px;color:var(--ph-t2);font-weight:500}
html.ph-screen[data-ph-c="A"] .q-stages{gap:18px;border-bottom:1px solid var(--ph-line);margin-top:8px}
html.ph-screen[data-ph-c="A"] .q-stages .chip{padding:0;height:40px;border-radius:0;color:var(--ph-t2);position:relative}
html.ph-screen[data-ph-c="A"] .q-stages .chip .c{min-width:20px;height:18px;padding:0 5px;border-radius:9px;background:var(--ph-soft);display:grid;place-items:center;font-size:11px}
html.ph-screen[data-ph-c="A"] .q-stages .chip.on{color:var(--ph-blue11)}
html.ph-screen[data-ph-c="A"] .q-stages .chip.on .c{background:var(--ph-blue3);color:var(--ph-blue11)}
html.ph-screen[data-ph-c="A"] .q-stages .chip.on::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--ph-blue)}
html.ph-screen[data-ph-c="A"] .q-stages .chip .q-dot{display:none}
html.ph-screen[data-ph-c="B"] .q-stages .chip{background:var(--ph-soft)}
html.ph-screen[data-ph-c="B"] .q-stages .chip.on{background:var(--ph-ink);color:var(--ph-bg)}
html.ph-screen[data-ph-c="B"] .q-stages .chip.on .c{color:var(--ph-bg);opacity:.7}
/* rule #14: in light the page and the soft fill are the same #F0F0F3 — search and unselected chips are raised white */
html.ph-screen[data-theme="light"][data-ph-c="B"] .q-search,
html.ph-screen[data-theme="light"][data-ph-c="B"] .q-stages .chip:not(.on){background:#FFFFFF;box-shadow:0 0 0 1px #E8E8EC}

/* board rows (B: an inset grouped list on the grey page) */
html.ph-screen .q-list{flex:1;overflow:hidden}
html.ph-screen .q-lead{display:flex;gap:12px;padding:9px 16px;position:relative;align-items:flex-start;background:var(--ph-card)}
html.ph-screen .q-lead+.q-lead::before{content:"";position:absolute;top:0;left:64px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-lead .lb{flex:1;min-width:0}
html.ph-screen .q-lead .l1{display:flex;align-items:baseline;gap:8px}
html.ph-screen .q-lead .l1 .nm{font-size:14.5px;font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.ph-screen .q-lead .l1 .val{font-size:13px;font-weight:600;flex:none;white-space:nowrap}   /* fixes-1009 SR4 — kept for QA's V20-2; .q-lead is a prototype row no page draws (see below) */
/* fixes-1009 SR4 (#High Prospect «?» on the phone dashboard), re-aimed in batch E: the rule above sits on .q-lead, a prototype row no page
   draws, so it holds nothing. The amount and its «?» chip are now ONE unbreakable unit where they are made — PH.amountHtml wraps them in
   .q-amtq — so every list that prints an amount with no currency (High Prospect, Won, Delays, See all, the drill, agent rows) keeps the
   chip on the number's line; «+N ?» (.cur-unknown-n) was already nowrap (ui.css) */
html.ph-screen .q-amtq{white-space:nowrap}
html.ph-screen .q-lead .l1 time{font-size:12px;color:var(--ph-t3)}
html.ph-screen .q-lead .l2{font-size:13px;color:var(--ph-t2);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.ph-screen .q-lead .l3{display:flex;align-items:center;gap:6px;margin-top:5px}
html.ph-screen .q-lead .l3 .own{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ph-t2)}
html.ph-screen .q-chev{display:none;align-self:center;color:var(--ph-t3)}
html.ph-screen[data-ph-c="B"] .q-list{margin:6px 12px 0;flex:none;background:transparent}
html.ph-screen[data-ph-c="B"] .q-lead.g-first{border-radius:16px 16px 0 0}html.ph-screen[data-ph-c="B"] .q-lead.g-last{border-radius:0 0 16px 16px}
html.ph-screen[data-ph-c="B"] .q-list .q-grp-h{padding:16px 4px 8px}
html.ph-screen[data-ph-c="B"] .q-lead{padding:11px 12px}
html.ph-screen[data-ph-c="B"] .q-lead+.q-lead::before{left:60px}
html.ph-screen[data-ph-c="B"] .q-lead .q-chev{display:grid}
html.ph-screen[data-ph-c="B"] .q-grp-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 16px 0;font-size:13px;color:var(--ph-t2)}
html.ph-screen[data-ph-c="B"] .q-grp-h b{color:var(--ph-t1);font-size:15px;font-weight:600}
/* a row swiped left shows WhatsApp and Call (decision-rules.md rule 10 — drawn in concept C, base.css .swipe): 72 px each,
   11.5/600 labels; the row slides with them (the renderer sets the transform while the finger moves) */
html.ph-screen .q-swipe{position:relative;overflow:hidden}
html.ph-screen .q-swipe .acts{position:absolute;right:0;top:0;bottom:0;display:flex}
html.ph-screen .q-swipe .acts>*{width:72px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;color:#fff;font-size:11.5px;font-weight:600}
html.ph-screen .q-swipe .acts .a-wa{background:var(--ph-wa)}html.ph-screen .q-swipe .acts .a-call{background:var(--ph-blue-fill)}
html.ph-screen .q-swipe.open .q-lead{transform:translateX(-144px);box-shadow:4px 0 12px rgba(0,0,0,.06)}
html.ph-screen .q-swipe-hint{font-size:11.5px;color:var(--ph-t3);padding:6px 16px 0}

/* dashboard (A: Chatwoot's cards) */
html.ph-screen .q-seg{display:flex;background:var(--ph-soft);border-radius:10px;padding:3px;gap:2px;margin-top:12px}
html.ph-screen .q-seg>*{flex:1;text-align:center;height:30px;line-height:30px;border-radius:8px;font-size:13px;font-weight:500;color:var(--ph-t2)}
html.ph-screen .q-seg>.on{background:var(--ph-card);color:var(--ph-t1);box-shadow:0 1px 2px rgba(0,0,0,.08),0 0 0 .5px rgba(0,0,0,.04)}
html.ph-screen:not([data-theme="light"]) .q-seg>.on{background:var(--ph-seg-on)}
html.ph-screen[data-ph-c="B"] .q-seg{background:var(--ph-seg-b)}
html.ph-screen .q-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px 16px 0}
html.ph-screen .q-kpi{border:1px solid var(--ph-line);border-radius:12px;padding:10px 12px;background:var(--ph-card);text-align:left;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start}
html.ph-screen .q-kpi .k{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ph-t2)}
html.ph-screen .q-kpi .v{font-size:20px;font-weight:600;margin-top:4px;letter-spacing:-.3px}
html.ph-screen .q-kpi .s{font-size:11.5px;color:var(--ph-t3);margin-top:1px}
html.ph-screen .q-kpi .v.red{color:var(--ph-ruby)}html.ph-screen .q-kpi .v.g{color:var(--ph-teal)}
html.ph-screen .q-kpi .ic{width:18px;height:18px;border-radius:5px;display:grid;place-items:center}
html.ph-screen .q-kpi .ic svg.q-i{width:12px;height:12px;stroke-width:2.2}
html.ph-screen .q-sec{padding:16px 16px 0}
html.ph-screen .q-sec-h{display:flex;align-items:center;gap:8px;margin-bottom:6px}
html.ph-screen .q-sec-h h2{font-size:14px;font-weight:600}
html.ph-screen .q-sec-h .cnt{height:18px;padding:0 6px;border-radius:9px;font-size:11px;font-weight:600;display:grid;place-items:center}
html.ph-screen .q-sec-h .all{margin-left:auto;font-size:13px;color:var(--ph-blue11);font-weight:500;display:flex;align-items:center;gap:2px}
html.ph-screen .q-rows{border:1px solid var(--ph-line);border-radius:12px;background:var(--ph-card);overflow:hidden}
html.ph-screen .q-r{display:flex;align-items:center;gap:10px;padding:9px 12px;min-height:46px;position:relative}
html.ph-screen .q-r+.q-r::before{content:"";position:absolute;top:0;left:12px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-r .t{flex:1;min-width:0}
html.ph-screen .q-r .t b{display:block;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-r .t span{font-size:12px;color:var(--ph-t2)}
html.ph-screen .q-r .late{font-size:12.5px;font-weight:600;color:var(--ph-ruby)}
html.ph-screen .q-bar-p{height:6px;border-radius:3px;background:var(--ph-soft);width:70px;overflow:hidden}
html.ph-screen .q-bar-p i{display:block;height:100%;border-radius:3px;background:var(--ph-blue)}
html.ph-screen[data-ph-c="B"] .q-rows{border:0;border-radius:16px}
html.ph-screen[data-ph-c="B"] .q-sec{padding:14px 12px 0}
html.ph-screen[data-ph-c="B"] .q-sec-h{padding:0 4px}
html.ph-screen .q-fr{display:grid;grid-template-columns:118px minmax(0,1fr) 40px;align-items:center;gap:10px;height:28px;font-size:13px}   /* extra.css:252 */
html.ph-screen .q-fr .fb{height:10px;border-radius:5px;background:var(--ph-soft);overflow:hidden}
html.ph-screen .q-fr .fb i{display:block;height:100%;border-radius:5px}
html.ph-screen .q-fr .fn{text-align:right;font-weight:600}
html.ph-screen .q-fr .fl{display:flex;align-items:center;gap:6px;color:var(--ph-t2);white-space:nowrap}

/* calendar (A) */
html.ph-screen .q-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:10px 10px 0;gap:2px}
html.ph-screen .q-day{display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 0 8px;border-radius:12px;position:relative}
html.ph-screen .q-day .wd{font-size:11px;color:var(--ph-t2);font-weight:500}
html.ph-screen .q-day .dn{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:15px;font-weight:600}
html.ph-screen .q-day .dc{font-size:10.5px;color:var(--ph-t2);font-weight:500;height:14px}
html.ph-screen .q-day .dots{display:flex;gap:2px;height:5px}
html.ph-screen .q-day .dots i{width:5px;height:5px;border-radius:50%;background:var(--ph-blue)}
html.ph-screen .q-day.today .dn{color:var(--ph-blue-text)}
html.ph-screen .q-day.sel .dn{background:var(--ph-blue-fill);color:#fff}
html.ph-screen .q-day.past .dn{color:var(--ph-t3)}
html.ph-screen .q-day.past.sel .dn{color:#fff}   /* S2: promoted from board — a chosen PAST day is white on the blue circle */
html.ph-screen .q-day .dc.late{color:var(--ph-ruby)}
html.ph-screen .q-dayhead{display:flex;align-items:baseline;gap:8px;padding:14px 16px 6px}
html.ph-screen .q-dayhead h2{font-size:15px;font-weight:600}
html.ph-screen .q-dayhead span{font-size:12.5px;color:var(--ph-t2)}
html.ph-screen .q-dayhead .late{margin-left:auto;color:var(--ph-ruby);font-weight:500}
html.ph-screen .q-ag{display:flex;gap:12px;padding:0 16px;position:relative}
html.ph-screen .q-ag .tm{width:44px;flex:none;text-align:right;padding-top:10px}
html.ph-screen .q-ag .tm b{display:block;font-size:13px;font-weight:600}
html.ph-screen .q-ag .tm span{font-size:11px;color:var(--ph-t3)}
html.ph-screen .q-ag .it{flex:1;min-width:0;padding:9px 0 9px 12px;border-left:2px solid var(--c,#2781F6);margin:3px 0;display:flex;gap:10px;align-items:center}
html.ph-screen .q-ag .it .t{flex:1;min-width:0}
html.ph-screen .q-ag .it b{display:block;font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-ag .it .t>span{display:block;font-size:12.5px;color:var(--ph-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-ag.late .tm b{color:var(--ph-ruby)}
html.ph-screen[data-ph-c="A"] .q-ag .it{background:var(--ph-soft2);border-radius:0 10px 10px 0;padding-right:10px}
html.ph-screen .q-nowline{display:flex;align-items:center;gap:6px;padding:2px 16px 2px 60px;font-size:11px;color:var(--ph-ruby9);font-weight:600}
html.ph-screen .q-nowline::after{content:"";flex:1;height:1.5px;background:var(--ph-ruby9);border-radius:1px}

/* a conversation (B): team chat and the lead's Conversation tab */
html.ph-screen .q-cv-hd{display:flex;align-items:center;gap:10px;padding:10px 12px 10px 6px;border-bottom:1px solid var(--ph-line);flex:none}
html.ph-screen .q-cv-hd .back{width:36px;height:40px;display:grid;place-items:center;color:var(--ph-t1);margin-left:0}
html.ph-screen .q-cv-hd .who{flex:1;min-width:0}
html.ph-screen .q-cv-hd .who b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-cv-hd .who span{font-size:12px;color:var(--ph-t2);display:flex;align-items:center;gap:5px}
html.ph-screen .q-resolve{height:32px;padding:0 12px;display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;border:0;background:var(--ph-teal3);color:var(--ph-teal);border-radius:16px}
html.ph-screen .q-resolve svg.q-i{width:16px;height:16px;color:var(--ph-teal)}
html.ph-screen .q-cv-tabs{display:flex;gap:6px;border:0;padding:8px 12px 4px;flex:none;font-size:13px;color:var(--ph-t2);font-weight:500}
html.ph-screen .q-cv-tabs>*{height:28px;padding:0 10px;border-radius:14px;background:var(--ph-soft);display:flex;align-items:center;position:relative}
html.ph-screen .q-cv-tabs>.on{background:var(--ph-ink);color:var(--ph-bg)}
html.ph-screen .q-msgs{flex:1;overflow:hidden;padding:10px 12px 0;display:flex;flex-direction:column;gap:6px;background:var(--ph-bg)}
html.ph-screen .q-dsep{align-self:center;font-size:11.5px;color:var(--ph-t3);margin:4px 0}
html.ph-screen .q-m{max-width:78%;padding:8px 11px;border-radius:14px;font-size:14px;line-height:1.4}
html.ph-screen .q-m .mt{display:flex;gap:4px;justify-content:flex-end;align-items:center;font-size:10.5px;color:var(--ph-t3);margin-top:2px}
html.ph-screen .q-m.in{align-self:flex-start;background:var(--ph-in);border-bottom-left-radius:4px}
html.ph-screen .q-m.out{align-self:flex-end;background:var(--ph-out);border-bottom-right-radius:4px}
html.ph-screen .q-m.note{align-self:flex-end;background:var(--ph-note);border-bottom-right-radius:4px}
html.ph-screen .q-m.note .nl{font-size:11px;font-weight:600;color:var(--ph-amber);display:flex;align-items:center;gap:4px;margin-bottom:2px}
html.ph-screen .q-act{align-self:center;font-size:11.5px;color:var(--ph-t2);padding:2px 0;display:flex;align-items:center;gap:5px}
html.ph-screen .q-comp{flex:none;padding:8px 10px 6px;display:flex;align-items:flex-end;gap:8px;border:0;background:transparent;position:relative}
html.ph-screen .q-comp .plus{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;background:var(--ph-soft);color:var(--ph-t1);flex:none}
html.ph-screen .q-comp .pill{flex:1;min-height:38px;border-radius:19px;border:1px solid var(--ph-line);display:flex;align-items:center;padding:0 6px 0 14px;gap:2px;background:var(--ph-card);box-shadow:0 2px 10px rgba(0,0,0,.06)}
html.ph-screen .q-comp .pill .ph{flex:1;color:var(--ph-t3);font-size:16px}
html.ph-screen .q-comp .pill .q-ib{width:30px;height:30px;color:var(--ph-t2)}
html.ph-screen .q-comp .send{width:36px;height:36px;border-radius:18px;display:grid;place-items:center;background:var(--ph-blue-fill);color:#fff;flex:none}
html.ph-screen .q-comp .send svg.q-i{stroke-width:2.4}
html.ph-screen .q-replymode{display:flex;gap:4px;padding:6px 12px 0;background:transparent;flex:none}
html.ph-screen .q-replymode>*{height:24px;padding:0 9px;border-radius:12px;font-size:12px;font-weight:500;display:flex;align-items:center;gap:4px;color:var(--ph-t2)}
html.ph-screen .q-replymode>.on{background:var(--ph-blue3);color:var(--ph-blue11)}

/* ================================================================= extra.css, ported ================================================================= */
html.ph-screen .q-scrim{position:fixed;inset:0;background:var(--ph-scrim);z-index:20;display:none}
html.ph-screen .q-scrim.on{display:block}
/* the sheet (B) */
html.ph-screen .q-sheet{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--ph-sheet);border-radius:22px 22px 0 0;display:none;flex-direction:column;
  box-shadow:0 -8px 30px rgba(0,0,0,.12);max-height:94%;overflow:hidden}
html.ph-screen .q-sheet.on{display:flex;animation:up .38s var(--ph-ease-up)}
html.ph-screen .q-sheet.tall{height:94%}
html.ph-screen .q-sheet.page{height:100%;max-height:100%;border-radius:0}
html.ph-screen .q-grab{width:38px;height:5px;border-radius:3px;background:var(--ph-grab);margin:8px auto 2px;flex:none}
html.ph-screen .q-sh-h{display:flex;align-items:center;gap:10px;padding:8px 16px 10px;flex:none}
html.ph-screen .q-sh-h h2{flex:1;font-size:17px;font-weight:600;letter-spacing:-.2px;min-width:0}
html.ph-screen .q-sh-h .q-sub{display:block;font-size:12.5px;color:var(--ph-t2);font-weight:400;margin-top:1px}
html.ph-screen .q-x{width:30px;height:30px;border-radius:15px;background:var(--ph-soft);display:grid;place-items:center;color:var(--ph-t2);flex:none;position:relative}
html.ph-screen .q-x svg.q-i{width:16px;height:16px;stroke-width:2.2}
html.ph-screen .q-sh-b{flex:1;overflow:hidden;padding-bottom:12px}
html.ph-screen .q-sh-f{flex:none;display:flex;gap:10px;padding:10px 16px 30px;border-top:1px solid var(--ph-hair);background:var(--ph-sheet)}
html.ph-screen[data-ph-c="B"] .q-sheet .q-sh-b{background:var(--ph-page)}
html.ph-screen[data-ph-c="B"] .q-sheet .q-sh-h{background:var(--ph-sheet)}
/* PH.sheet: the grab and the header take a swipe down (D79), so they do not scroll the page; focus parked on the sheet
   itself (never a caret on open) draws no ring */
html.ph-screen .q-sheet .q-grab,html.ph-screen .q-sheet>.q-sh-h{touch-action:none}
html.ph-screen .q-sheet:focus{outline:none}
/* groups and rows */
html.ph-screen .q-gh{display:flex;align-items:baseline;gap:8px;padding:16px 16px 7px;font-size:13px;color:var(--ph-t2);font-weight:500}
html.ph-screen .q-gh b{color:var(--ph-t1);font-size:15px;font-weight:600}
html.ph-screen .q-gh .r{margin-left:auto;display:flex;align-items:center;color:var(--ph-blue11);font-weight:500;gap:2px}
html.ph-screen .q-grp{margin:0 12px;background:var(--ph-card);border-radius:16px;overflow:hidden}
html.ph-screen[data-ph-c="A"] .q-grp{border:1px solid var(--ph-line);border-radius:12px;margin:0 16px}
html.ph-screen .q-row{display:flex;align-items:center;gap:12px;min-height:50px;padding:8px 14px;position:relative}
html.ph-screen .q-row+.q-row::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-row.ic+.q-row::before,html.ph-screen .q-row.ic+.q-row.ic::before{left:54px}
html.ph-screen .q-row .rl{flex:1;min-width:0;font-size:15px}
html.ph-screen .q-row .rl small{display:block;font-size:12.5px;color:var(--ph-t2);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-row .rv{font-size:15px;color:var(--ph-t2);display:flex;align-items:center;gap:6px;white-space:nowrap}
/* S2 (seen at 320): a long value («WhatsApp · Dento Hub») ran over its label — the label keeps its width, the value gives way */
html.ph-screen .q-row:has(.rv .q-trunc) .rl:not(:has(small)){flex:1 0 auto}
html.ph-screen .q-row .rv{min-width:0}
html.ph-screen .q-row .rv .q-trunc{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
html.ph-screen .q-row .rv b{color:var(--ph-t1);font-weight:500}
html.ph-screen .q-row .q-chev{display:grid;color:var(--ph-t3)}
html.ph-screen .q-sq{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;flex:none;color:#fff}
html.ph-screen .q-sq svg.q-i{width:17px;height:17px;stroke-width:2}
html.ph-screen .q-sq.blue{background:var(--ph-sq-blue)}html.ph-screen .q-sq.teal{background:var(--ph-sq-teal)}html.ph-screen .q-sq.ruby{background:var(--ph-sq-ruby)}
html.ph-screen .q-sq.amber{background:var(--ph-sq-amber)}html.ph-screen .q-sq.iris{background:var(--ph-sq-iris)}html.ph-screen .q-sq.slate{background:var(--ph-sq-slate)}
html.ph-screen .q-sq.orange{background:var(--ph-sq-orange)}html.ph-screen .q-sq.ink{background:var(--ph-sq-ink)}
/* eye review (more-dark): the ink tile (#1C2024) vanished on the dark sheet with its glyph — in dark it takes the next step up of the
   same grey family, white glyph (the prototype draws ink in both themes; declared) */
html.ph-screen:not([data-theme="light"]) .q-sq.ink{background:#43484E;color:#fff}
html.ph-screen .q-sq.soft{background:var(--ph-soft);color:var(--ph-t1)}
html.ph-screen .q-gfoot{padding:7px 28px 0;font-size:12.5px;color:var(--ph-t2);line-height:1.45}
html.ph-screen .q-lock{color:var(--ph-t3)}
/* buttons */
html.ph-screen .q-btn{height:48px;border-radius:14px;font-size:16px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 18px;flex:1;white-space:nowrap}
html.ph-screen .q-btn.pri{background:var(--ph-blue-fill);color:#fff}html.ph-screen .q-btn.soft{background:var(--ph-soft);color:var(--ph-t1)}
html.ph-screen .q-btn.won{background:var(--ph-won);color:#fff}html.ph-screen .q-btn.lost{background:var(--ph-lost);color:#fff}html.ph-screen .q-btn.high{background:var(--ph-orange);color:#fff}
html.ph-screen .q-btn.ink{background:var(--ph-ink);color:var(--ph-bg)}
html.ph-screen .q-btn.sm{height:36px;border-radius:10px;font-size:14px;flex:none;padding:0 14px}
html.ph-screen .q-btn.ghost{background:transparent;color:var(--ph-blue11)}
html.ph-screen .q-btn.dim{opacity:.45}
html.ph-screen .q-btn svg.q-i{width:18px;height:18px}
html.ph-screen .q-btn.done{background:var(--ph-teal3);color:var(--ph-teal)}
html.ph-screen .q-btn.cxl{background:transparent;color:var(--ph-ruby);flex:none;padding:0 8px}
html.ph-screen[data-ph-c="A"] .q-btn{border-radius:10px;height:44px;font-size:15px}
/* fields (the text is 16 px: under 16 an iPhone zooms the page — R0.5) */
html.ph-screen .q-flds{padding:4px 14px 14px;display:flex;flex-direction:column;gap:12px}
html.ph-screen .q-fld label{display:block;font-size:13px;color:var(--ph-t2);margin-bottom:6px;font-weight:500}
html.ph-screen .q-fld label i{color:var(--ph-ruby);font-style:normal}
html.ph-screen .q-in{height:46px;border-radius:12px;background:var(--ph-field);display:flex;align-items:center;gap:8px;padding:0 12px;font-size:16px;color:var(--ph-t1)}
html.ph-screen .q-in .ph{color:var(--ph-t3)}
html.ph-screen .q-in svg.q-i{color:var(--ph-t3);width:18px;height:18px}
html.ph-screen .q-in .suf{margin-left:auto;color:var(--ph-t3)}
html.ph-screen .q-in.ta{height:auto;min-height:78px;align-items:flex-start;padding-top:12px}
html.ph-screen .q-in.err{box-shadow:inset 0 0 0 1.5px var(--ph-ruby9)}
/* a real field inside a face (D-ZOOM): 16 px text, the face keeps its size; the board search's 38 px face gets a 44 px field */
html.ph-screen .q-search input{flex:1;min-width:0;height:44px;margin:-3px 0;border:0;background:transparent;color:var(--ph-t1);font:inherit;font-size:16px;outline:none;padding:0}
html.ph-screen .q-search input::placeholder{color:var(--ph-t3)}
html.ph-screen .q-in :is(input,textarea,select){flex:1;min-width:0;border:0;background:transparent;color:inherit;font:inherit;font-size:16px;outline:none;padding:0;margin:0}
html.ph-screen .q-ferr{font-size:12.5px;color:var(--ph-ruby);margin-top:5px}
html.ph-screen .q-two{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px}
html.ph-screen .q-two2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html.ph-screen[data-ph-c="A"] .q-in{background:var(--ph-card);border:1px solid var(--ph-line);border-radius:10px}
/* chips */
html.ph-screen .q-chips{display:flex;gap:6px;flex-wrap:wrap}
html.ph-screen .q-chips.scroll{flex-wrap:nowrap;overflow:hidden;margin:0 -14px;padding:0 14px}
html.ph-screen .q-chp{height:34px;padding:0 13px;border-radius:17px;background:var(--ph-soft);display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:500;white-space:nowrap;flex:none;color:var(--ph-t1)}
html.ph-screen .q-chp.on{background:var(--ph-ink);color:var(--ph-bg)}
html.ph-screen .q-chp.blue{background:var(--ph-blue3);color:var(--ph-blue11)}
html.ph-screen .q-chp .c{color:var(--ph-t2);font-size:12.5px}
html.ph-screen .q-chp.on .c{color:var(--ph-bg);opacity:.7}
html.ph-screen .q-chp .q-av.xs{margin-left:-6px}
/* the lead sheet */
html.ph-screen .q-lh{padding:4px 16px 12px;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--ph-sheet)}
html.ph-screen .q-lh .q-av.big{width:64px;height:64px;font-size:22px}
html.ph-screen .q-lh h1{font-size:21px;font-weight:700;letter-spacing:-.4px;margin-top:8px}
html.ph-screen .q-lh .meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-size:13px;color:var(--ph-t2)}
html.ph-screen .q-spill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 9px;border-radius:12px;font-size:12.5px;font-weight:600}
html.ph-screen .q-acts4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;width:100%;margin-top:14px}
html.ph-screen .q-acts4 button{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;font-weight:500;color:var(--ph-t1)}
html.ph-screen .q-acts4 .ci{width:100%;height:44px;border-radius:12px;background:var(--ph-soft);display:grid;place-items:center}
html.ph-screen .q-acts4 .ci.wa{background:var(--ph-wa-bg);color:var(--ph-wa)}html.ph-screen .q-acts4 .ci.call{background:var(--ph-blue3);color:var(--ph-blue11)}
html.ph-screen .q-ltabs{display:flex;gap:6px;padding:10px 16px;background:var(--ph-sheet);border-bottom:1px solid var(--ph-hair)}
html.ph-screen .q-ltabs>*{height:32px;padding:0 13px;border-radius:16px;font-size:14px;font-weight:500;display:flex;align-items:center;gap:6px;background:var(--ph-soft);color:var(--ph-t1)}
/* S2 (seen at 320): «Ad source» wrapped onto two lines — a tab keeps its words on one line and the row scrolls sideways inside itself */
html.ph-screen .q-ltabs{overflow-x:auto;scrollbar-width:none}
html.ph-screen .q-ltabs::-webkit-scrollbar{display:none}
html.ph-screen .q-ltabs>*{white-space:nowrap;flex-shrink:0}
html.ph-screen .q-ltabs>.on{background:var(--ph-ink);color:var(--ph-bg)}
html.ph-screen .q-nsbox{padding:12px 14px}
html.ph-screen .q-nsline{display:flex;align-items:center;gap:10px}
html.ph-screen .q-nsline .when{font-size:16px;font-weight:600}
html.ph-screen .q-nsline .when.late{color:var(--ph-ruby)}
html.ph-screen .q-nsnote{font-size:14px;color:var(--ph-t2);margin-top:4px}
html.ph-screen .q-nsacts{display:flex;gap:clamp(4px,calc((100vw - 310px) / 10),8px);margin-top:12px}   /* S2 (seen at 360): «Cancel» ran off the card's edge — under 390 the gap and the buttons' sides narrow (390 unchanged: 8 / 18) */
html.ph-screen .q-nsacts .q-btn{height:38px;font-size:14px;border-radius:10px}
html.ph-screen .q-nsacts .q-btn:not(.cxl){padding-inline:clamp(8px,calc((100vw - 300px) / 5),18px)}
html.ph-screen .q-kv{display:grid;grid-template-columns:120px minmax(0,1fr);gap:10px;padding:11px 14px;font-size:14.5px;position:relative}
html.ph-screen .q-kv+.q-kv::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-kv span{color:var(--ph-t2)}
html.ph-screen .q-kv b{font-weight:500;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-tl{padding:6px 14px 10px}
html.ph-screen .q-tli{display:flex;gap:12px;padding:8px 0;position:relative}
html.ph-screen .q-tli .tic{width:28px;height:28px;border-radius:14px;display:grid;place-items:center;flex:none;background:var(--ph-soft);color:var(--ph-t2);position:relative;z-index:1}
html.ph-screen .q-tli .tic svg.q-i{width:15px;height:15px}
html.ph-screen .q-tli::before{content:"";position:absolute;left:13.5px;top:32px;bottom:-8px;width:1px;background:var(--ph-line)}
html.ph-screen .q-tli:last-child::before{display:none}
html.ph-screen .q-tli .tt{flex:1;min-width:0;font-size:14px}
html.ph-screen .q-tli .tt small{display:block;font-size:12px;color:var(--ph-t2);margin-top:2px}
html.ph-screen .q-tli .note{margin-top:6px;padding:9px 11px;border-radius:12px;background:var(--ph-in);font-size:14px}
html.ph-screen .q-cmt{flex:none;display:flex;align-items:center;gap:8px;padding:8px 12px 30px;background:var(--ph-sheet);border-top:1px solid var(--ph-hair)}
html.ph-screen .q-cmt .pill{flex:1;height:40px;border-radius:20px;background:var(--ph-field);display:flex;align-items:center;padding:0 14px;color:var(--ph-t3);font-size:16px}
html.ph-screen .q-cmt .send{width:38px;height:38px;border-radius:19px;background:var(--ph-blue-fill);color:#fff;display:grid;place-items:center}
html.ph-screen .q-adcard{margin:0 12px;background:var(--ph-card);border-radius:16px;overflow:hidden}
html.ph-screen .q-adimg{height:150px;background:linear-gradient(135deg,#DAECFF,#E0F8F3);display:grid;place-items:center;color:#086DE0;font-weight:600;font-size:15px}
html.ph-screen:not([data-theme="light"]) .q-adimg{background:linear-gradient(135deg,#0F2748,#0D2D2A);color:#7EB6FF}
/* the ad's picture (PH.adMedia — Kareem 2026-09-30: drawn over the words / a dark empty block): a cover (16:9, ≤ 200 px), clipped by
   the card, ABOVE the words; no picture, a broken one or a video with no cover is a neutral placeholder (was lead-phone.css only) */
html.ph-screen .q-adimg{position:relative;overflow:hidden}
html.ph-screen .q-adimg.has-img{width:100%;height:auto;aspect-ratio:16/9;max-height:200px;background:var(--ph-soft)}   /* PM 2026-09-30: 16:9, at most 200 px — the headline starts on the first screen */
html.ph-screen .q-adimg.has-img>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
html.ph-screen .q-adimg.q-adnone,html.ph-screen:not([data-theme="light"]) .q-adimg.q-adnone{width:100%;height:132px;max-height:200px;background:var(--ph-card);border-bottom:1px solid var(--ph-line);color:var(--ph-t2)}
html.ph-screen .q-adph{display:flex;flex-direction:column;align-items:center;gap:8px;padding:0 20px;text-align:center}
html.ph-screen .q-adph svg.q-i{width:28px;height:28px;stroke-width:1.8;color:var(--ph-t2)}
html.ph-screen .q-adph .q-adplay-sm{background:var(--ph-soft)}
html.ph-screen .q-adph .q-adplay-sm::after{border-left-color:var(--ph-t2)}
html.ph-screen .q-adph small{font-size:13px;font-weight:500;line-height:1.35;color:var(--ph-t2)}
html.ph-screen .q-adplay{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;background:rgba(0,0,0,.55);pointer-events:none}
html.ph-screen .q-adplay::after{content:'';position:absolute;left:17px;top:14px;border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
html.ph-screen .q-adph .q-adplay-sm{position:relative;left:auto;top:auto;margin:0;flex:none}
/* a mark with no link is an icon, not a button (PM 2026-09-30): no circle, the default cursor */
html.ph-screen .q-adplay.q-plain{background:none;box-shadow:none}
html.ph-screen .q-adplay.q-plain::after{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
html.ph-screen .q-adph .q-adplay-sm.q-plain::after{filter:none}
html.ph-screen a.q-adlink{color:inherit;text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
html.ph-screen a.q-adcover{position:absolute;inset:0;display:block}
html.ph-screen a.q-adlink:focus-visible{outline:2px solid var(--ph-blue);outline-offset:-2px}
html.ph-screen .q-adcount{position:absolute;bottom:10px;left:10px;background:rgba(0,0,0,.6);color:#fff;font-size:11px;padding:3px 9px;border-radius:20px;font-weight:500}
html.ph-screen .q-adb{padding:12px 14px;position:relative;background:var(--ph-card)}
html.ph-screen .q-adb h3{color:var(--ph-t1)}
html.ph-screen .q-adb .src{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ph-t2)}
html.ph-screen .q-adb h3{font-size:16px;font-weight:600;margin-top:4px}
html.ph-screen .q-adb p{font-size:14px;color:var(--ph-t2);margin-top:4px}
/* stage list, booking items, the popups' head */
html.ph-screen .q-stg .q-dot{width:12px;height:12px}
html.ph-screen .q-stg .hint{font-size:12px;color:var(--ph-t2)}
html.ph-screen .q-stg .ck{color:var(--ph-blue-text);display:grid}
html.ph-screen .q-bk{display:flex;align-items:center;gap:10px;padding:10px 14px;position:relative}
html.ph-screen .q-bk+.q-bk::before{content:"";position:absolute;top:0;left:14px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-bk .t{flex:1;min-width:0;font-size:14.5px}
html.ph-screen .q-bk .t small{display:block;font-size:12px;color:var(--ph-t2)}
html.ph-screen .q-bk .p{font-weight:600;font-size:15px}
html.ph-screen .q-tot{display:flex;justify-content:space-between;padding:11px 14px;font-size:14.5px;border-top:1px solid var(--ph-hair)}
html.ph-screen .q-tot b{font-weight:700}
html.ph-screen .q-rem{margin:10px 14px 14px;padding:12px 14px;border-radius:12px;background:var(--ph-teal3);color:var(--ph-teal);display:flex;justify-content:space-between;font-weight:600}
html.ph-screen .q-rem.q-over{background:var(--ph-ruby3);color:var(--ph-ruby)}   /* S2: a negative remaining (paid above the deal) in ruby */
html.ph-screen .q-lhead{display:flex;align-items:center;gap:12px;padding:6px 16px 12px}
html.ph-screen .q-lhead .bdg{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
html.ph-screen .q-lhead .bdg svg.q-i{width:22px;height:22px}
html.ph-screen .q-lhead h2{font-size:18px;font-weight:700;letter-spacing:-.3px}
html.ph-screen .q-lhead p{font-size:13px;color:var(--ph-t2);margin-top:2px}
html.ph-screen .q-radio{width:22px;height:22px;border-radius:11px;border:2px solid var(--ph-line);flex:none}
html.ph-screen .q-radio.on{border:7px solid var(--ph-lost)}
/* the alert (Instagram's) — the markup form; #uiConfirm takes the same look further down */
html.ph-screen .q-alert{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:292px;border-radius:18px;background:var(--ph-sheet);z-index:40;display:none;overflow:hidden;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
html.ph-screen .q-alert.on{display:block;animation:pop2 .28s var(--ph-ease-pop2)}
html.ph-screen .q-alert .ab{padding:22px 20px 18px}
html.ph-screen .q-alert h3{font-size:17px;font-weight:600}
html.ph-screen .q-alert p{font-size:14px;color:var(--ph-t2);margin-top:6px;line-height:1.45}
html.ph-screen .q-alert button{display:block;width:100%;height:50px;border-top:1px solid var(--ph-hair);font-size:16px}
html.ph-screen .q-alert button.red{color:var(--ph-ruby);font-weight:600}
html.ph-screen .q-alert button.b{font-weight:600}
/* filters, import, stage colours, steppers */
html.ph-screen .q-fsec{padding:14px 14px 0}
html.ph-screen .q-fsec h4{font-size:14px;font-weight:600;margin-bottom:9px;display:flex;justify-content:space-between}
html.ph-screen .q-fsec h4 span{font-weight:400;color:var(--ph-t2);font-size:13px}
html.ph-screen .q-drop{margin:4px 14px 14px;border:1.5px dashed var(--ph-line);border-radius:16px;padding:26px 16px;text-align:center}
html.ph-screen .q-drop .q-sq{margin:0 auto 10px;width:44px;height:44px;border-radius:12px}
html.ph-screen .q-drop b{display:block;font-size:15px}
html.ph-screen .q-drop span{font-size:13px;color:var(--ph-t2)}
html.ph-screen .q-steps{padding:4px 14px 14px;font-size:14px}
html.ph-screen .q-steps li{margin:0 0 6px 18px;color:var(--ph-t2)}
html.ph-screen .q-sw{display:flex;gap:10px;flex-wrap:wrap;padding:4px 14px 14px}
html.ph-screen .q-sw i{width:34px;height:34px;border-radius:17px;display:block}
html.ph-screen .q-sw i.on{box-shadow:0 0 0 2px var(--ph-card),0 0 0 4px var(--ph-t1)}
html.ph-screen .q-stp{display:flex;align-items:center;gap:10px}
html.ph-screen .q-stp button{width:32px;height:32px;border-radius:16px;background:var(--ph-soft);display:grid;place-items:center}
html.ph-screen .q-stp b{min-width:44px;text-align:center;font-weight:600}
/* the More sheet, notifications, team chat */
html.ph-screen .q-me{display:flex;align-items:center;gap:12px;padding:6px 16px 14px;background:var(--ph-sheet)}
html.ph-screen .q-me .q-av{width:48px;height:48px;font-size:17px}
html.ph-screen .q-me .t{flex:1}
html.ph-screen .q-me .t b{display:block;font-size:17px;font-weight:600}
html.ph-screen .q-me .t span{font-size:13px;color:var(--ph-t2)}
html.ph-screen .q-online{width:10px;height:10px;border-radius:5px;background:var(--ph-online);display:inline-block;border:2px solid var(--ph-card)}
html.ph-screen .q-avw{position:relative;display:inline-block}
html.ph-screen .q-avw .q-online{position:absolute;right:-1px;bottom:-1px}
html.ph-screen .q-nt{display:flex;gap:12px;padding:12px 14px;position:relative}
html.ph-screen .q-nt+.q-nt::before{content:"";position:absolute;top:0;left:56px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-nt .t{flex:1;font-size:14px;line-height:1.4}
html.ph-screen .q-nt .t small{display:block;color:var(--ph-t2);font-size:12px;margin-top:3px}
html.ph-screen .q-nt.unread,html.ph-screen .q-nt.new{background:var(--ph-notif-unread)}
html.ph-screen .q-cr{display:flex;align-items:center;gap:12px;padding:10px 16px;position:relative}
html.ph-screen .q-cr .t{flex:1;min-width:0}
html.ph-screen .q-cr .t b{display:block;font-size:15px;font-weight:600}
html.ph-screen .q-cr .t span{display:block;font-size:13.5px;color:var(--ph-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-cr .t span.u{color:var(--ph-t1);font-weight:500}
html.ph-screen .q-cr .r{display:flex;flex-direction:column;align-items:flex-end;gap:6px;font-size:12px;color:var(--ph-t3)}
html.ph-screen .q-cr .n{min-width:20px;height:20px;border-radius:10px;background:var(--ph-blue-fill);color:#fff;font-size:11.5px;font-weight:600;display:grid;place-items:center;padding:0 6px}
html.ph-screen .q-cr .q-av{width:48px;height:48px;font-size:16px}
/* sign in and reset */
html.ph-screen .q-auth{flex:1;display:flex;flex-direction:column;padding:70px 24px 30px}
html.ph-screen .q-logo{width:56px;height:56px;border-radius:16px;background:var(--ph-blue);color:#fff;display:grid;place-items:center;font-weight:800;font-size:20px;letter-spacing:-.5px}
html.ph-screen .q-auth h1{font-size:28px;font-weight:700;letter-spacing:-.6px;margin-top:22px}
html.ph-screen .q-auth p.s{font-size:15px;color:var(--ph-t2);margin-top:6px}
html.ph-screen .q-auth .q-flds{padding:26px 0 0;gap:14px}
html.ph-screen .q-auth .q-btn{flex:none;margin-top:20px}
html.ph-screen .q-auth .foot{margin-top:auto;text-align:center;font-size:12.5px;color:var(--ph-t3)}
html.ph-screen .q-rule{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ph-t2);margin-top:8px}
html.ph-screen .q-rule.ok{color:var(--ph-teal)}
/* A: the data pages */
html.ph-screen .q-atitle{padding:14px 16px 0;display:flex;align-items:center;gap:8px}
html.ph-screen .q-atitle h1{font-size:16px;font-weight:600;flex:1}
html.ph-screen .q-back{width:36px;height:36px;display:grid;place-items:center;margin-left:-10px;color:var(--ph-t1)}
html.ph-screen .q-tbl{border:1px solid var(--ph-line);border-radius:12px;margin:0 16px;overflow:hidden;background:var(--ph-card)}
html.ph-screen .q-ch{padding:10px 12px;position:relative}
html.ph-screen .q-ch+.q-ch::before{content:"";position:absolute;top:0;left:12px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-ch .h{display:flex;align-items:center;gap:8px;font-size:14px}
html.ph-screen .q-ch .h b{font-weight:600;flex:1}
html.ph-screen .q-ch .h span{font-size:12.5px;color:var(--ph-t2)}
html.ph-screen .q-stack{display:flex;height:8px;border-radius:4px;overflow:hidden;margin-top:8px;background:var(--ph-soft)}
html.ph-screen .q-stack i{display:block;height:100%}
html.ph-screen .q-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:11.5px;color:var(--ph-t2);padding:8px 16px 0}
html.ph-screen .q-legend span{display:flex;align-items:center;gap:4px}
html.ph-screen .q-cc{display:flex;align-items:center;gap:10px;padding:11px 12px;position:relative}
html.ph-screen .q-cc+.q-cc::before{content:"";position:absolute;top:0;left:12px;right:0;height:1px;background:var(--ph-hair)}
html.ph-screen .q-cc .t{flex:1;min-width:0}
html.ph-screen .q-cc .t b{display:block;font-size:14.5px;font-weight:600}
html.ph-screen .q-cc .t span{display:block;font-size:12.5px;color:var(--ph-t2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.ph-screen .q-cc .pr{text-align:right;font-size:14.5px;font-weight:600}
html.ph-screen .q-cc .pr small{display:block;font-size:11.5px;color:var(--ph-t2);font-weight:400}
html.ph-screen .q-cc .pr s{color:var(--ph-t3);font-weight:400;font-size:12px;margin-right:4px}
html.ph-screen .q-sech{display:flex;align-items:center;gap:8px;padding:14px 16px 8px;font-size:13px;color:var(--ph-t2);font-weight:500}
html.ph-screen .q-sech .ltr{width:22px;height:22px;border-radius:6px;background:var(--ph-blue3);color:var(--ph-blue11);display:grid;place-items:center;font-size:11px;font-weight:700}
html.ph-screen .q-sech b{color:var(--ph-t1);font-size:14px}
html.ph-screen .q-bro{display:inline-flex;align-items:center;gap:4px;font-size:12px;color:var(--ph-t2);margin-top:4px}
html.ph-screen .q-role{height:22px;padding:0 8px;border-radius:11px;font-size:11.5px;font-weight:600;display:inline-flex;align-items:center}
html.ph-screen .q-role.agent{background:var(--ph-soft);color:var(--ph-t2)}html.ph-screen .q-role.admin{background:var(--ph-blue3);color:var(--ph-blue11)}
html.ph-screen .q-role.super{background:var(--ph-ruby3);color:var(--ph-ruby)}
html.ph-screen .q-prose{padding:6px 20px 30px;font-size:15px;line-height:1.6;color:var(--ph-t1)}
html.ph-screen .q-prose h2{font-size:17px;font-weight:600;margin:20px 0 6px}
html.ph-screen .q-prose p{color:var(--ph-t2)}
html.ph-screen .q-prose li{color:var(--ph-t2);margin:4px 0 0 18px}
html.ph-screen .q-crumb{display:flex;align-items:center;gap:4px;padding:6px 16px 0;font-size:13px;color:var(--ph-t2)}
html.ph-screen .q-crumb b{color:var(--ph-t1);font-weight:500}
html.ph-screen .q-pgn{display:flex;justify-content:center;padding:12px 0 4px;font-size:13px;color:var(--ph-t2)}
html.ph-screen .q-pgn .more{color:var(--ph-blue11);margin-left:4px;font-weight:700}   /* all.html:786 — «Load more» as a <b> in blue-11 */

/* ================================================================= built from the language (§3.1 — nothing like them is drawn) ======================= */
/* the toast: one position for the hub's and a frame's (G46) — 16 px above the capsule, or above the home line when no bar */
html.ph-screen .q-toast{position:fixed;left:16px;right:16px;bottom:max(calc(var(--ph-bar-clear) + 8px),calc(16px + env(safe-area-inset-bottom)));z-index:90;
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--ph-sheet);color:var(--ph-t1);font-size:14px;font-weight:500;line-height:1.35;
  box-shadow:var(--ph-toast-shadow);animation:up .38s var(--ph-ease-up)}
html.ph-screen .q-toast.err{color:var(--ph-ruby)}
/* #137 (P22): a toast never swallows a tap on what is under it — only its own control (a link or a button in it) takes one */
html.ph-screen .q-toast,html.ph-screen .ui-toasts,html.ph-screen .ui-toast,html.ph-screen [id="5q-fresh-bar"]{pointer-events:none}
html.ph-screen :is(.q-toast,.ui-toast,[id="5q-fresh-bar"]) :is(a,button,[role="button"]){pointer-events:auto}
/* the states (all.html p-states): offline, empty, couldn't load, loading */
html.ph-screen .q-offline{margin:12px 12px 0;padding:10px 12px;border-radius:12px;background:var(--ph-amber3);color:var(--ph-amber);font-size:13.5px;display:flex;gap:8px;align-items:center;font-weight:500}
html.ph-screen .q-empty{padding:26px 18px;text-align:center}
html.ph-screen .q-empty>.q-sq{margin:0 auto 10px;width:44px;height:44px;border-radius:14px;font-size:14px;line-height:1.35}   /* S2: promoted from board (the square is a span too) */
html.ph-screen .q-empty>b{display:block;font-size:15px;font-weight:700}
html.ph-screen .q-empty>span{font-size:13.5px;color:var(--ph-t2)}
html.ph-screen .q-error{padding:18px;display:flex;gap:12px;align-items:center}
html.ph-screen .q-error>.q-sq{width:36px;height:36px}
html.ph-screen .q-error>.t{flex:1;font-size:14px}
html.ph-screen .q-error>.t b{font-weight:600}
html.ph-screen .q-error>.t div{color:var(--ph-t2);font-size:13px}
html.ph-screen .q-skel{display:block;height:12px;width:55%;border-radius:6px;background:var(--ph-soft)}
html.ph-screen .q-skel.sm{height:10px;width:80%;border-radius:5px;margin-top:7px}
html.ph-screen .q-av.skel{background:var(--ph-soft)}
/* the switch (all.html:666 — 44 × 26 r13, knob 20); «on» is predicted in the product's blue */
html.ph-screen .q-switch{width:44px;height:26px;border-radius:13px;background:var(--ph-soft);position:relative;flex:none;transition:background-color .2s}
html.ph-screen .q-switch i{position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:10px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .2s var(--ph-ease-up)}
html.ph-screen .q-switch[aria-checked="true"]{background:var(--ph-blue)}
html.ph-screen .q-switch[aria-checked="true"] i{transform:translateX(18px)}

/* ================================================================= every .ui-drawer is a sheet on the phone (§3.1) ======================= */
/* One sheet language for catalog, admin, team, the board's small drawers and the reports drill: the B/A sheet chrome
   (bottom, 22 px corners, the grab, the shadow, as tall as it needs up to 94 %), rising with «up». Replaces ui.css:619-622
   for the phone only; the lead's wide drawer keeps its own rule (board/index.html, L3). */
html.ph-screen .ui-overlay{background:var(--ph-scrim)}
html.ph-screen .ui-drawer:not(.lv-wide){inset:auto 0 0 0;width:100%;max-width:100%;height:auto;max-height:94%;border:0;border-radius:22px 22px 0 0;
  background:var(--ph-sheet);color:var(--ph-t1);box-shadow:0 -8px 30px rgba(0,0,0,.12);overflow:hidden}
html.ph-screen .ui-drawer.tall:not(.lv-wide){height:94%}
html.ph-screen .ui-drawer:not(.lv-wide).show{animation:up .38s var(--ph-ease-up)}
html.ph-screen .ui-drawer:not(.lv-wide)::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--ph-grab);margin:8px auto 2px;flex:none}
html.ph-screen .ui-drawer:not(.lv-wide)>.dh{padding:8px 16px 10px;border:0;align-items:center;gap:10px;background:var(--ph-sheet)}
html.ph-screen .ui-drawer:not(.lv-wide)>.dh h3{flex:1;font-size:17px;font-weight:600;letter-spacing:-.2px;min-width:0;color:var(--ph-t1)}
html.ph-screen .ui-drawer:not(.lv-wide)>.dh .sub{display:block;font-size:12.5px;color:var(--ph-t2);font-weight:400;margin-top:1px}
html.ph-screen .ui-drawer:not(.lv-wide) .ui-x{width:30px;height:30px;border-radius:22px;background:var(--ph-soft);color:var(--ph-t2);display:grid;place-items:center;flex:none;
  box-sizing:content-box;border:7px solid transparent;background-clip:padding-box;margin:-7px}   /* a 30 px face in a 44 px box: the 22 px
  outer radius leaves the painted face (the padding box, 7 px in) its 15 px — the prototype's round .x */
html.ph-screen[data-ph-c="B"] .ui-drawer:not(.lv-wide)>.db{background:var(--ph-page)}
html.ph-screen .ui-drawer:not(.lv-wide)>.df{padding:10px 16px calc(30px + env(safe-area-inset-bottom));border-top:1px solid var(--ph-hair);gap:10px;background:var(--ph-sheet)}

/* ================================================================= #uiConfirm is Instagram's alert (§3.1) ======================= */
/* 292 wide, 18 px corners, the title and the sentence centred, the buttons stacked 50 px high with a hairline, «pop2».
   Centred by its own transform like the prototype's .alert, so «pop2» is the prototype's keyframe unchanged.
   The DOM stays [No, Yes] (ui.js:231) and focus stays on No; the stack is CSS only (column-reverse puts Yes on top). */
html.ph-screen #uiConfirmOv{background:var(--ph-scrim);padding:0}
html.ph-screen #uiConfirm{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:292px;max-width:calc(100vw - 32px);border:0;border-radius:18px;background:var(--ph-sheet);color:var(--ph-t1);text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.25)}
html.ph-screen #uiConfirm.show{animation:pop2 .28s var(--ph-ease-pop2)}
html.ph-screen #uiConfirm>.dh{display:block;padding:22px 20px 0;border:0;font-size:17px;font-weight:600;line-height:1.35}
html.ph-screen #uiConfirm>.db{padding:6px 20px 18px}
html.ph-screen #uiConfirm>.db>div:not(.q-ab){font-size:14px !important;color:var(--ph-t2) !important;line-height:1.45 !important}   /* the body's inline style (ui.js:234) */
/* run 078b L3: ui.js phoneAlert() writes the title and the sentence as ONE block (.q-ab = the prototype's .ab: 22/20/18); the
   dialog's own header keeps the title for its label and the suites, and is not drawn twice */
html.ph-screen #uiConfirm.q-alert-on>.dh{display:none}
html.ph-screen #uiConfirm.q-alert-on>.db{padding:0}
html.ph-screen #uiConfirm .q-ab{padding:22px 20px 18px}
html.ph-screen #uiConfirm .q-ab h3{font-size:17px;font-weight:600;line-height:1.35;color:var(--ph-t1);margin:0}
html.ph-screen #uiConfirm .q-ab p{font-size:14px;color:var(--ph-t2);margin:6px 0 0;line-height:1.45}
html.ph-screen #uiConfirm .q-ab-f{margin-top:6px;font-size:14px;color:var(--ph-t2);line-height:1.45;text-align:left}
html.ph-screen #uiConfirm .ui-dialog-err{padding:0 20px 14px}
html.ph-screen #uiConfirmOv{z-index:85}   /* above every sheet (the lead's editors sit at 62–64) */
html.ph-screen #uiConfirm>.df{display:flex;flex-direction:column-reverse;padding:0;border:0;gap:0}
html.ph-screen #uiConfirm>.df .ui-btn{display:block;width:100%;height:50px;min-height:50px;margin:0;padding:0;border:0;border-top:1px solid var(--ph-hair);border-radius:0;gap:normal;white-space:normal;
  background:transparent;color:var(--ph-t1);font-size:16px;font-weight:400;flex:none}
html.ph-screen #uiConfirm>.df .ui-btn.primary{font-weight:600}
html.ph-screen #uiConfirm>.df .ui-btn.q-bold{font-weight:600}   /* a danger alert: «Keep editing» is the bold one (all/shots/al-*.png) */
html.ph-screen #uiConfirm>.df .ui-btn.danger{color:var(--ph-ruby);font-weight:600}

/* ================================================================= toasts of ours on the phone (G22, G46) ======================= */
html.ph-screen .ui-toasts{inset:auto 16px max(calc(var(--ph-bar-clear) + 8px),calc(16px + env(safe-area-inset-bottom))) 16px;max-width:none;z-index:90}
html.ph-screen .ui-toast{border:0;border-radius:14px;background:var(--ph-sheet);color:var(--ph-t1);padding:12px 14px;font-size:14px;font-weight:500;line-height:1.35;
  box-shadow:var(--ph-toast-shadow);animation:up .38s var(--ph-ease-up)}
/* the «new version» line of shared/fresh.js is styled inline (fresh.js:69-71); on the phone it is the same toast, above the bar */
html.ph-screen [id="5q-fresh-bar"]{bottom:max(calc(var(--ph-bar-clear) + 8px),calc(16px + env(safe-area-inset-bottom))) !important;left:16px !important;right:16px !important;
  transform:none !important;max-width:none !important;background:var(--ph-sheet) !important;color:var(--ph-t1) !important;border-radius:14px !important;
  padding:12px 14px !important;font:500 14px/1.35 var(--ph-font) !important;box-shadow:var(--ph-toast-shadow) !important;z-index:90 !important}

/* ================================================================= motion (§3.1, R0.12) ======================= */
html.ph-screen .q-enter{animation:enter .32s var(--ph-ease-enter)}
html.ph-screen .q-pop{animation:pop .42s var(--ph-ease-pop)}
html.ph-screen .q-lens{transition:transform .45s var(--ph-ease-lens),width .45s var(--ph-ease-lens)}
/* the prototype's own keyframe names (enter, up, pop2, pop), so a computed animation reads the same on both sides
   (R0.12, the fidelity checker compares animationName); no page of ours uses these names (checked 2026-09-25).
   «enter» is spelled 0%/100% (the same keyframe as from/to): its values equal ui.css's desk-toast keyframe uiToastIn by
   coincidence, and arch-health counts that step as a copied rule — the two cannot be one (the hub, privacy and reset have
   no ui.css, and the desk toast must keep its own name). Declared in factory/specs/078b-phone-redesign/S0a-decisions.md. */
@keyframes enter{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:none}}
@keyframes up{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@keyframes pop2{from{transform:translate(-50%,-50%) scale(.92);opacity:0}to{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes pop{0%{transform:scale(.78)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){
  html.ph-screen .q-enter,html.ph-screen .q-pop,html.ph-screen .q-sheet.on,html.ph-screen .q-alert.on,html.ph-screen .q-toast,html.ph-screen .ui-toast,
  html.ph-screen .ui-drawer:not(.lv-wide).show,html.ph-screen #uiConfirm.show{animation:none}
  html.ph-screen .q-lens,html.ph-screen .q-switch,html.ph-screen .q-switch i{transition:none}
}

/* design-eye review 5 (2026-10-07): a touch screen has no hover, so the «?» chip's title explained nothing on the phone. One short
   line under the money cards says what «?» means (PH.unknownLegend), only while a «?» is on the page; the mark is the same chip
   as everywhere else. */
html.ph-screen .q-unklegend{display:flex;align-items:center;gap:6px;padding:8px 16px 0;font-size:11.5px;line-height:1.35;color:var(--ph-t2)}
html.ph-screen .q-unklegend .cur-unknown{cursor:default;flex:none}
html.ph-screen .q-rows+.q-unklegend{padding:6px 0 0}
/* batch 1007 eye check (the phone Dashboard drawer, a Won deal with no currency): a row's text lines make every span inside them a
   block (.q-cc .t span, above), so the «?» chip after an item's price stretched into a bar across the row. The money marks stay
   inline wherever they sit in a row's lines. */
html.ph-screen .q-cc .t span.cur-unknown{display:inline-flex;overflow:visible;font-size:10.5px;color:var(--warn-text)}
html.ph-screen .q-cc .t span.cur-unknown-n,html.ph-screen .q-cc .t span.mp-a{display:inline;overflow:visible}