/* ═══════════════ e'thix — the house style (2026-10-02) ═══════════════
   The front door's language (welcome.css, signin.css) carried into the product, so /welcome → /signin → the app read as one
   place. Loaded after every product sheet (refine.css included) and before foundation.css. It restyles; it never hides a
   control, changes a word or moves a node: removing this file gives back the previous look.

   Art direction — "the desk under the lamp":
   - One night (#0E1116), one bone paper (#ECE7DE), one champagne gold (#C9AE7E), a cold steel (#A8B7CC) for the machine.
     The tokens themselves live in ethix.css / core.css (both themes); this file adds what the components do with them.
   - The FRAME is night in both themes: the conversations column, the settings menu, the mastheads and footers of the
     pages. The PAGE you work on is bone paper in the light theme and night in the dark one.
   - Surfaces, not rules (the owner, 2026-10-02: no decorative lines): a gap, a deeper night or a breath of tint says where
     one thing ends — never a hairline down a column, under a bar or between rows. A soft edge stays only on what you can
     touch (a card, a field, a pill), and a shadow only where something floats (menus, sheets).
     Radii by hierarchy: paper 6-8px · panels 18-22px · pills 999px.
   - Three voices of type: Ethix Display (Alexandria) when the product speaks at size (view titles, home statements);
     Ethix Naskh when the law speaks (quotes, article text); Plex Arabic / Montserrat for everything read and operated.
   - The seal, not the app icon: where a tile with an icon stood, a gold-ruled circle (a seal) carries the mark.
   - Motion stays where it says something (the agent at work, a step arriving); refine.css already stopped the loops. */

:root{
  --disp:'Ethix Display','IBM Plex Sans Arabic',system-ui,sans-serif;
  --naskh:'Ethix Naskh','Noto Naskh Arabic','IBM Plex Sans Arabic',serif;
  --night:#0E1116;--night-1:#12161D;--night-2:#171C24;--night-3:#1E242E;
  --bone:#ECE7DE;--steel:#A8B7CC;
  --hairline:rgba(29,35,44,.11);
  --gold-rule:color-mix(in srgb,var(--gold) 55%,transparent);
  --out:cubic-bezier(.16,1,.3,1);
  --lamp:radial-gradient(56% 44% at 50% -6%,rgba(201,174,126,.17),rgba(201,174,126,0) 72%);
  --g-cta:linear-gradient(180deg,#E7D3AC 0%,#C9AE7E 52%,#B0915F 100%);
}
html[lang="en"]{--disp:'Montserrat','IBM Plex Sans Arabic',system-ui,sans-serif}
html[data-theme="dark"]{--hairline:rgba(236,231,222,.08);--lamp:radial-gradient(56% 44% at 50% -6%,rgba(201,174,126,.11),rgba(201,174,126,0) 72%)}

/* ── the night token set: the frame (both themes) ── */
.side,.set-nav,.page-hero,.page-foot,.pv-head,.bt-head{
  --paper:#0E1116;--paper-deep:#0A0C10;--paper-hi:#171C24;--bg:#0E1116;--surface:#171C24;--surface-2:#12161D;--sunken:#0B0E12;
  --ink:#ECE7DE;--ink-soft:#BDB7AD;--muted:#959DA8;--gold:#C9AE7E;--gold-deep:#E2CCA2;--gold-hi:#E2CCA2;--gold-text:#D9C08F;
  --line:rgba(236,231,222,.1);--hairline:rgba(236,231,222,.08);--glass:rgba(18,22,29,.74);--glass-strong:rgba(20,24,31,.95);
  --danger:#EE9A8E;--danger-soft:rgba(238,154,142,.13);--ok:#8CC79B;
  --shadow-1:0 1px 2px rgba(0,0,0,.35),0 4px 14px -6px rgba(0,0,0,.4);--hair:inset 0 1px 0 rgba(255,255,255,.05);
  --emboss:none;color-scheme:dark;color:var(--ink);
}

/* ═══════════ 1. The kit ═══════════ */
::selection{background:color-mix(in srgb,var(--gold) 38%,transparent);color:var(--ink)}
:focus-visible{outline-color:var(--gold-deep)}

/* buttons: actions are pills; the primary is the front door's gold */
.b{border-radius:999px}
.b-sm{border-radius:999px}
.b-lg{border-radius:999px}
.b-primary{background:var(--g-cta);color:#14171C;
  box-shadow:0 10px 22px -12px rgba(154,126,81,.9),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.08)}
html[data-accent="rose"] .b-primary,html[data-accent="steel"] .b-primary,html[data-accent="sage"] .b-primary{
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent-a) 75%,var(--accent-b)),var(--accent-b) 55%,var(--accent-c));color:var(--on-accent)}
@media (hover:hover){.b-primary:not(:disabled):hover{filter:brightness(1.05) saturate(1.05)}}
.b-dark{background:var(--night);color:var(--bone);box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
html[data-theme="dark"] .b-dark{background:var(--bone);color:var(--night)}
.b-ghost{background:transparent;border:1px solid var(--line);box-shadow:none;color:var(--ink)}
@media (hover:hover){.b-ghost:not(:disabled):hover{border-color:var(--gold-rule);background:color-mix(in srgb,var(--gold) 7%,transparent)}}
.b-soft{background:color-mix(in srgb,var(--ink) 6%,transparent)}
@media (hover:hover){.b-soft:not(:disabled):hover{background:color-mix(in srgb,var(--ink) 10%,transparent)}}

/* chips: a hairline pill; on = ink (night on bone, bone on night) */
.chip{border-color:var(--line);background:transparent;box-shadow:none}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink);box-shadow:none}
@media (hover:hover){.chip:not(.on):hover{border-color:var(--gold-rule);color:var(--ink)}}

/* segmented controls: a hairline track, a paper thumb */
.seg{background:transparent;border:1px solid var(--line);box-shadow:none;border-radius:999px;padding:3px}
.seg-thumb{border-radius:999px;background:var(--surface);box-shadow:0 1px 2px rgba(14,17,22,.12),0 0 0 1px var(--line)}
html[data-theme="dark"] .seg-thumb{background:var(--night-3);box-shadow:0 0 0 1px var(--line)}
.seg button{border-radius:999px}

/* fields */
.input,.textarea,.select{border-radius:12px;background:var(--surface);border-color:var(--line);box-shadow:none}
.input:focus,.textarea:focus,.select:focus{border-color:var(--gold-rule);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 14%,transparent)}
.check input:checked{background:var(--ink);border-color:var(--ink)}
.check input::after{border-color:var(--paper)}
.switch::before{background:var(--g-cta)}

/* the seal: a gold-ruled circle where an icon tile stood */
.sheet-ic,.ph-ic,.sp-ic,.fm-ic,.ck-ic,.lb-ic,.up-ic,.toast-ic,.kpi-ic{
  background:transparent;color:var(--gold-deep);border:1px solid var(--gold-rule);border-radius:50%;box-shadow:none}
.sheet-ic.danger{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
/* the legal tools: each tool's mark a seal too, and its card a flat panel */
.th-ic{background:transparent;border:1px solid var(--gold-rule);border-radius:50%;color:var(--gold-deep)}
.th-card{border-radius:18px;box-shadow:none}
.toast.danger .toast-ic{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.toast.info .toast-ic{background:transparent;color:var(--steel);border-color:color-mix(in srgb,var(--steel) 55%,transparent)}
.limit-banner.over .lb-ic{background:transparent;color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}

/* floating things: menus, sheets, toasts — a soft edge and a shadow say they float; no gold frame, no rules inside */
.pop{border-radius:14px;border-color:color-mix(in srgb,var(--ink) 9%,transparent);box-shadow:var(--shadow-3)}
.pop-head{font-family:var(--lt);letter-spacing:.14em;text-transform:uppercase;font-size:10.5px}
html[lang="ar"] .pop-head{font-family:var(--ar);letter-spacing:0;text-transform:none;font-size:11.5px}
.pop-sep{background:transparent;height:0;margin:5px 0}
dialog.sheet{border-radius:22px;border:1px solid color-mix(in srgb,var(--ink) 8%,transparent)}
html[data-theme="dark"] dialog.sheet{border-color:rgba(236,231,222,.08)}
.sheet-title{font-family:var(--disp);font-weight:600;font-size:19px;letter-spacing:0}
html[lang="en"] .sheet-title{font-weight:700;letter-spacing:-.01em}
.sheet-foot{border-top:0;background:color-mix(in srgb,var(--ink) 3%,transparent)}
.toast{border-color:color-mix(in srgb,var(--ink) 9%,transparent)}
html[data-theme="dark"] .toast{border-color:rgba(236,231,222,.09)}
dialog.sheet::backdrop{background:rgba(10,12,16,.5)}
@media (max-width:640px){dialog.sheet{border-radius:24px 24px 0 0}}
/* lists inside sheets: rows apart by a soft band, not by rules (shortcuts, the feature status, the legal tools) */
.sc-list{gap:2px}
.sc-list li{border-bottom:0;padding:10px 12px;border-radius:10px}
.sc-list li:nth-child(odd){background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.fs-list{gap:6px}
.fs-row,.fs-row:last-child{border-block-end:0;padding:12px 14px;border-radius:14px;background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.th-card{border-color:transparent;background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.th-pick{border-color:transparent}
.ck-row{border-color:transparent;background:color-mix(in srgb,var(--ink) 4%,transparent)}

.badge.plan-plus{background:var(--g-cta);color:#14171C}
.badge.plan-pro{background:linear-gradient(180deg,#D3DBE6,#A8B7CC);color:#14171C}
.kbd,kbd{border-radius:6px;box-shadow:none}
.avatar{box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 45%,transparent)}
.spinner{background:conic-gradient(from 0deg,transparent 0 25%,var(--gold) 70%,var(--gold-deep))}
.empty .i{color:var(--gold-deep)}

/* ═══════════ 2. The frame: the conversations column ═══════════ */
/* the column is set apart by its own deeper night, not by a rule down its edge */
.side{background:var(--sunken) url("/ethixd/img/noise-240.svg");border-inline-end:0}
html[data-theme="dark"] .side,html[data-theme="dark"] .set-nav{--sunken:#07080B;background-color:#07080B}
.side::before{height:260px;background:radial-gradient(90% 70% at 50% 0%,rgba(201,174,126,.13),rgba(201,174,126,0) 72%)}
.shell[data-mode="agent"] .side::before{background:radial-gradient(90% 70% at 50% 0%,rgba(168,183,204,.12),rgba(168,183,204,0) 72%)}
.side-head .brand .wordmark{font-size:25px;color:var(--bone)}
.new-btn{margin:4px 12px 12px;min-height:46px;border-radius:999px;padding-inline:8px 14px;font-weight:600;color:var(--bone);
  background:rgba(236,231,222,.035);border:1px solid rgba(236,231,222,.13);box-shadow:none;
  transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--spring)}
@media (hover:hover){.new-btn:hover{border-color:rgba(201,174,126,.6);background:rgba(201,174,126,.07)}}
.nb-ic{width:30px;height:30px;border-radius:50%;background:var(--g-cta);color:#14171C;box-shadow:0 6px 14px -8px rgba(201,174,126,.9)}
.shell[data-mode="agent"] .nb-ic{background:linear-gradient(180deg,#DCE3EC,#A8B7CC);color:#14171C}
.nb-kbd{background:transparent;border-color:rgba(236,231,222,.14);color:rgba(236,231,222,.55);box-shadow:none}
.side-search .input{background:rgba(236,231,222,.035);border-color:rgba(236,231,222,.1);color:var(--bone);border-radius:999px}
.side-search .input::placeholder{color:rgba(236,231,222,.45)}
.s-label{color:var(--gold-text);gap:10px}
.s-item{color:rgba(236,231,222,.72);border-radius:10px}
.s-item.on{background-color:rgba(236,231,222,.065);box-shadow:none;color:var(--bone)}
.s-item.on::before{background:var(--gold);width:2px;top:10px;bottom:10px}
.shell[data-mode="agent"] .s-item.on::before{background:var(--steel)}
.s-item.on .s-ic{color:var(--gold-deep)}
.s-count{background:rgba(236,231,222,.08);color:rgba(236,231,222,.7)}
.side-empty{color:rgba(236,231,222,.55)}
/* the account row: its own soft surface at the foot of the column, not a rule above it */
.side-user{border-top:0;border-radius:14px;padding-top:8px;background:rgba(236,231,222,.035);color:var(--bone)}
.upsell-card{background:rgba(201,174,126,.06);border:1px solid rgba(201,174,126,.3);border-radius:16px}
.upsell-card::after{display:none}

/* ═══════════ 3. The page: top bar, stage, the lamp ═══════════ */
/* the top bar sits under the same lamp as the page: no band, no rule (nothing scrolls under it; the thread scrolls in the stage) */
.topbar{background:transparent;border-bottom-color:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.mode-switch{background:transparent;border:1px solid var(--line);border-radius:999px;padding:3px}
html .mode-switch .seg-thumb{top:3px;bottom:3px;border-radius:999px;background:var(--night);box-shadow:0 8px 18px -10px rgba(14,17,22,.75),inset 0 1px 0 rgba(255,255,255,.07)}
html[data-theme="dark"] .mode-switch .seg-thumb{background:var(--bone);box-shadow:0 8px 18px -10px rgba(0,0,0,.8)}
.shell[data-mode="agent"] .mode-switch .seg-thumb{box-shadow:0 8px 18px -10px rgba(14,17,22,.75),inset 0 -2px 0 var(--steel)}
html[data-theme="dark"] .shell[data-mode="agent"] .mode-switch .seg-thumb{box-shadow:0 8px 18px -10px rgba(0,0,0,.8),inset 0 -2px 0 #7D8DA6}
.mode-switch button{border-radius:999px;min-height:36px}
.mode-switch button.on,.shell[data-mode="agent"] .mode-switch button.on{color:var(--bone)}
html[data-theme="dark"] .mode-switch button.on,html[data-theme="dark"] .shell[data-mode="agent"] .mode-switch button.on{color:var(--night)}
.mode-switch button.on .i{color:var(--gold)}
.shell[data-mode="agent"] .mode-switch button.on .i{color:var(--steel)}
html[data-theme="dark"] .mode-switch button.on .i{color:#9A7E51}
html[data-theme="dark"] .shell[data-mode="agent"] .mode-switch button.on .i{color:#56667F}
.usage-pill{background:transparent;border-color:var(--line);border-radius:999px}
.usage-pill svg,.usage-pill .i{color:var(--gold-deep)}
.tb-avatar{background:linear-gradient(var(--bg),var(--bg)) padding-box,linear-gradient(135deg,#E2CCA2,#9A7E51) border-box}
.dot-badge{background:var(--gold);box-shadow:0 0 0 2px var(--bg)}

/* the lamp over the page: one warm light from above, nothing that moves */
.shell .main{background:var(--lamp) no-repeat top center/100% 580px}
.stage.av2-on:not([data-mode="chat"]) .chat-pane{background:transparent}
.work-pane{background:var(--sunken);border-inline-start-color:var(--hairline)}
.split-handle::after{background:var(--hairline)}
.split-handle span{background:color-mix(in srgb,var(--ink) 18%,transparent)}
.split-handle:hover span,.split-handle:focus-visible span,.stage.resizing .split-handle span{background:var(--gold);box-shadow:none}

/* ═══════════ 4. Chat: the home ═══════════ */
/* One column, one width: the starters, the two modes and the call note share the starters' width; surfaces, not rules,
   say where one thing ends (the owner, 2026-10-02: no decorative lines). */
.c-hero{max-width:820px;padding-top:clamp(20px,5.5vh,60px)}
.hero-orb,.c-hero .hero-orb{inline-size:52px;block-size:52px;margin-block-end:20px}
.hero-orb .ho-core{border-radius:50%;background:transparent;color:var(--gold-deep);border:1px solid var(--gold-rule);box-shadow:none}
.hero-orb .ho-core::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:1px solid color-mix(in srgb,var(--gold) 20%,transparent)}
html[data-theme="dark"] .hero-orb .ho-core{background:transparent}
.agent .hero-orb .ho-core{color:var(--steel);border-color:color-mix(in srgb,var(--steel) 55%,transparent)}
.hero-orb .ho-core .i{inline-size:22px;block-size:22px;stroke-width:1.5}
.hero-title{font-family:var(--disp);font-weight:800;font-size:clamp(32px,3.5vw,52px);line-height:1.22;letter-spacing:0;color:var(--ink)}
html[lang="ar"] .hero-title{line-height:1.36}
html[lang="en"] .hero-title{font-weight:700;letter-spacing:-.025em;line-height:1.08}
.hero-sub{font-size:16px;line-height:1.8;color:var(--ink-soft);max-width:540px;margin-top:12px}

/* the starters: four quiet cards */
.hero-cards{counter-reset:starter;gap:10px;margin-top:32px;border:0}
.s-card{counter-increment:starter;border-radius:16px;background:var(--surface);border:1px solid color-mix(in srgb,var(--ink) 7%,transparent);box-shadow:none;
  padding:16px 16px 16px 18px;min-height:84px;transition:border-color .3s var(--ease),background-color .3s var(--ease),transform .5s var(--spring)}
html[dir="rtl"] .s-card{padding:16px 18px 16px 16px}
html[data-theme="dark"] .s-card{background:var(--night-2);border-color:rgba(236,231,222,.06)}
.s-card::after{content:counter(starter,decimal-leading-zero);position:absolute;inset-block-start:12px;inset-inline-end:14px;
  font:700 12px/1 var(--lt);letter-spacing:.1em;color:var(--gold-text);opacity:.9;direction:ltr}
@media (hover:hover){
  .s-card:hover{border-color:var(--gold-rule);transform:translateY(-1px);box-shadow:none}
  html[data-theme="dark"] .s-card:hover{background:var(--night-3)}
}
.sc-ic{width:auto;height:auto;border-radius:0;background:transparent;color:var(--gold-deep)}
.sc-ic .i{width:20px;height:20px;stroke-width:1.6}
/* the icon is flat here (no tile): hover.css fills .sc-ic::after with the accent gradient at inset:0, which on a tile-less icon drew a hard
   gold square behind it (owner's screenshot); no fill, so the icon keeps its gold on hover */
.sc-ic::after{display:none}
@media (hover:hover){.s-card.is-spot .sc-ic{color:var(--gold-deep)}}
.sc-txt b{font-size:14.5px}
.sc-go{color:var(--gold-deep)}

/* the two modes, side by side on a desktop; the call note under them, at the same width */
.hero-modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;max-width:none;margin:12px 0 0;border:0}
.hero-modes:has(> li:only-child){grid-template-columns:minmax(0,1fr)}
.hero-modes li{padding:12px 14px;border:0;border-radius:14px;font-size:13px;line-height:1.7;background:color-mix(in srgb,var(--ink) 4%,transparent)}
html[data-theme="dark"] .hero-modes li{background:rgba(236,231,222,.035)}
.hero-modes svg{margin-top:2px}
.call-soon{max-width:none;width:100%;margin-top:10px;border:0;border-radius:14px;padding:12px 14px;background:color-mix(in srgb,var(--gold) 7%,transparent)}
.call-soon .cs-ic{width:30px;height:30px;border-radius:50%;background:transparent;border:1px solid var(--gold-rule)}
/* Buddy stands on the composer's edge (buddy.js --buddy-space): the home ends above him, never under his feet */
.thread.is-empty .c-hero{padding-bottom:calc(14px + var(--buddy-space, 0px))}
/* on a phone's empty home he waits for the conversation (buddy.js), so the note needs no room for him */
@media (max-width:640px){.thread.is-empty .call-soon,html[dir="rtl"] .thread.is-empty .call-soon{padding-inline:14px}}

/* a short desktop (1280 x 720, 1366 x 768): the same home, tighter, so the starters and the modes stand above the composer */
@media (min-width:641px) and (max-height:820px){
  .c-hero{padding-top:clamp(8px,2.5vh,24px)}
  .hero-orb,.c-hero .hero-orb{inline-size:44px;block-size:44px;margin-block-end:12px}
  .hero-title{font-size:clamp(30px,3vw,42px)}
  .hero-sub{font-size:15px;line-height:1.7;margin-top:8px}
  .hero-cards{margin-top:20px;gap:8px}
  .s-card{min-height:70px;padding-block:12px}
  .hero-modes{margin-top:8px}
  .hero-modes li,.call-soon{padding-block:9px}
}
/* the long wait (the model waking after a pause, chat.js typingHTML .cold): one soft surface, the sentence in full, the real
   stopwatch at its end as a figure, the indeterminate bar along its foot; nothing says how far along it is, because nobody knows */
.typing.cold{display:flex;flex-wrap:nowrap;width:100%;max-width:640px;box-sizing:border-box;padding:14px 16px 17px;gap:12px;border-radius:16px;overflow:hidden;
  background:color-mix(in srgb,var(--gold) 7%,transparent);color:var(--ink);font-size:15px;line-height:1.8}
.typing.cold .wait-label{flex:1 1 auto;min-width:0}
.typing.cold .wait-time{align-self:center;white-space:nowrap;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:600;color:var(--gold-text);
  background:color-mix(in srgb,var(--gold) 12%,transparent);unicode-bidi:isolate}
.typing.cold::after{inset:auto 0 0;height:3px;border-radius:0}
@media (max-width:640px){.typing.cold{padding:12px 14px 15px;gap:10px;font-size:14.5px}}
/* a tablet held upright (641 to 820 px): settings is still the push menu, but its list is two columns under the group
   headings on a centred 720 px column, instead of one phone list stretched across the screen */
@media (min-width:641px) and (max-width:820px){
  .set-nav-head,.set-nav-user,.set-links{box-sizing:border-box;width:100%;max-width:720px;margin-inline:auto}
  .set-nav-user{width:calc(100% - 32px);max-width:688px}
  .set-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;align-content:start;padding-inline:16px}
  .set-links .set-group{grid-column:1 / -1;padding-inline:4px}
  .set-links .set-link{margin-bottom:8px;border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,transparent)}
  html[data-theme="dark"] .set-links .set-link{background:rgba(236,231,222,.035)}
}
/* evidence: the paragraph an answer relied on (shown only when the server names it) */
.src-para-chip{display:inline-flex;align-items:center;margin-inline-start:8px;padding:1px 9px;border-radius:999px;background:color-mix(in srgb,var(--accent-a) 16%,transparent);color:var(--ink);font-size:11.5px;line-height:1.7;font-weight:600;white-space:nowrap}
.src-para-mark{background:color-mix(in srgb,var(--accent-a) 24%,transparent);color:inherit;border-radius:3px;padding:1px 2px;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.src-para{margin-top:10px}
.src-para-quote{background:color-mix(in srgb,var(--accent-a) 24%,transparent);border-radius:3px;padding:2px 4px}
.src-para-chip{min-block-size:22px;box-sizing:border-box}
.src-para-h{margin:0 0 6px;font-size:12px;font-weight:700;color:var(--ink-soft)}
@media (max-width:640px){.src-para-chip{margin-inline-start:6px;font-size:11px}}

/* keyboard focus (Stage 5 audit): in the dark theme the composer's focus ring lost to its resting shadow (higher specificity); it shows again, and plain fields show where the cursor is, in the house gold */
html[data-theme="dark"] .composer:focus-within,html:not([data-theme]) .composer:focus-within{border-color:color-mix(in srgb,var(--gold) 70%,transparent);box-shadow:0 18px 40px -22px rgba(0,0,0,.9),0 0 0 3px color-mix(in srgb,var(--gold) 24%,transparent)}
.input:focus-visible,.textarea:focus-visible,.select:focus-visible{outline:2px solid color-mix(in srgb,var(--gold) 80%,transparent);outline-offset:2px}

/* touch targets (Stage 5 audit): on a touch screen the small controls get a 40px+ hit area; looks unchanged on a mouse */
@media (pointer:coarse){
  .page-foot nav a{display:inline-block;padding-block:11px}
  .page-top .brand,.pf-bottom .b-link{display:inline-flex;align-items:center;min-block-size:44px}
  .ib.sm{width:40px;height:40px}
  .model-chip{min-block-size:40px}
}

/* the conversation */
/* a reply that did not complete: a soft danger surface that names what happened, the retry by name at its end */
.fail-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px 12px;margin-top:4px;padding:14px 16px;border-radius:16px;min-width:0;max-width:640px;
  background:var(--danger-soft);color:var(--ink)}
.fail-ic{flex:none;display:grid;place-items:center;inline-size:30px;block-size:30px;border-radius:50%;color:var(--danger);
  border:1px solid color-mix(in srgb,var(--danger) 40%,transparent)}
.fail-ic .i{inline-size:15px;block-size:15px}
.fail-t{min-width:0}
.fail-t b{display:block;font-size:14px;font-weight:700;color:var(--danger)}
.fail-t p{margin:3px 0 0;font-size:13.5px;line-height:1.7;color:var(--ink-soft)}
.fail-card .b{align-self:center}
@media (max-width:640px){.fail-card{grid-template-columns:auto minmax(0,1fr)}.fail-card .b{grid-column:2;justify-self:start}}
.bubble{background:var(--night);color:var(--bone);border-radius:20px;border-end-end-radius:6px;box-shadow:none}
html[data-theme="dark"] .bubble{background:var(--night-3);color:var(--bone);box-shadow:inset 0 0 0 1px rgba(236,231,222,.06)}
.shell[data-mode="agent"] .bubble{background:var(--night)}
html[data-theme="dark"] .shell[data-mode="agent"] .bubble{background:var(--night-3)}
.bot-av .avatar.bot{border-radius:50%;background:var(--night);color:var(--gold-hi);box-shadow:0 0 0 1px color-mix(in srgb,var(--gold) 40%,transparent)}
/* the law under the answer: set apart by space and its own heading, not by a dashed rule */
.src-block{border-top:0;margin-top:18px;padding-top:2px}
html[data-theme="dark"] .bot-av .avatar.bot{background:var(--night-2)}
.meta b{letter-spacing:.02em}
.model-tag{background:transparent;border:1px solid var(--gold-rule);color:var(--gold-text)}
.md h3::before{background:var(--gold);height:2px}
.md blockquote{border-image:none;border-inline-start:2px solid var(--gold);background:color-mix(in srgb,var(--gold) 6%,transparent)}
.md th{background:color-mix(in srgb,var(--gold) 8%,transparent)}
.content .ans-lead{background:transparent;border:0;border-inline-start:2px solid var(--gold);border-radius:0;padding:4px 14px;font-size:16px}
.content .ans-h::before{background:var(--gold);width:2px}
.ask-card{background:var(--surface);border-color:color-mix(in srgb,var(--gold) 32%,var(--line));box-shadow:none}
.ask-ic{background:transparent;color:var(--gold-deep);border:1px solid var(--gold-rule);border-radius:50%}
.src-card{background:var(--surface)}
.served-label{background:transparent;border:1px solid var(--hairline)}

/* the composer: paper with a hairline; gold when you write */
.composer{border-radius:22px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -26px rgba(14,17,22,.45)}
html[data-theme="dark"] .composer{background:var(--night-2);box-shadow:0 18px 40px -22px rgba(0,0,0,.9)}
.composer:focus-within{border-color:var(--gold-rule);box-shadow:0 18px 40px -26px rgba(14,17,22,.45),0 0 0 4px color-mix(in srgb,var(--gold) 12%,transparent)}
.send-btn{background:var(--night);color:var(--bone);box-shadow:none}
html[data-theme="dark"] .send-btn{background:var(--night-3);color:var(--bone)}
.send-btn[data-state="send"],.shell[data-mode="agent"] .send-btn[data-state="send"]{background:var(--g-cta);color:#14171C;box-shadow:0 8px 18px -10px rgba(154,126,81,.9)}
.model-chip{border-radius:999px}
.disclaimer{color:var(--muted)}
.limit-banner{background:var(--surface);border:1px solid color-mix(in srgb,var(--gold) 35%,var(--line))}
.limit-banner.over{background:var(--surface);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}

/* ═══════════ 5. Settings: the night menu, the paper panel ═══════════ */
.set-nav{background:var(--sunken) url("/ethixd/img/noise-240.svg");border-inline-end:0}
.set-nav::before{background:radial-gradient(90% 70% at 50% 0%,rgba(201,174,126,.13),rgba(201,174,126,0) 72%)}
.set-nav-head h1{font-family:var(--disp);font-weight:800;font-size:32px;letter-spacing:0;color:var(--bone)}
html[lang="en"] .set-nav-head h1{font-weight:700;letter-spacing:-.02em}
.set-search .input{background:rgba(236,231,222,.035);border-color:rgba(236,231,222,.1);color:var(--bone);border-radius:999px}
.set-nav-user{background:rgba(236,231,222,.035);border-color:rgba(236,231,222,.09);border-radius:16px}
.set-group{color:var(--gold-text)}
.set-link{color:rgba(236,231,222,.72);border-radius:10px;min-height:42px}
.sl-ic{background:transparent;width:22px;height:22px;color:rgba(236,231,222,.5)}
.set-link.on{background-color:rgba(236,231,222,.065);box-shadow:none;color:var(--bone)}
.set-link.on::before{content:"";position:absolute;inset-inline-start:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:var(--gold)}
.set-link.on .sl-ic{background:transparent;color:var(--gold-deep)}
.set-link.danger,.set-link.danger .sl-ic{color:#EE9A8E}
.set-main-head{background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom-color:transparent}
.set-title{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:0}
html[lang="en"] .set-title{font-weight:700;letter-spacing:-.01em}
.set-panel{gap:18px;padding-top:26px}
.set-desc{font-size:15px;line-height:1.75;color:var(--ink-soft);max-width:62ch}
.set-card{border-radius:20px;box-shadow:none;border-color:var(--line);background:var(--surface)}
html[data-theme="dark"] .set-card{background:var(--night-2)}
.set-card-h{padding:18px 20px 8px}
.set-card-h h3{font-size:15.5px}
.sch-ic{background:transparent;border:1px solid var(--gold-rule);border-radius:50%;color:var(--gold-deep)}
/* a settings row is set apart by its own height and mark, not by a rule under it */
.set-row{border-bottom-color:transparent}
.set-row-ic{background:transparent;color:var(--muted)}
.danger-card{border-color:color-mix(in srgb,var(--danger) 32%,transparent)}
.danger-card .sch-ic{background:transparent;border-color:color-mix(in srgb,var(--danger) 45%,transparent);color:var(--danger)}
/* the theme cards draw the new themes: a night frame beside bone paper, and night */
.tc-light{background:linear-gradient(90deg,#0E1116 0 26%,#ECE7DE 26%)}
.tc-dark{background:linear-gradient(90deg,#0A0C10 0 26%,#0E1116 26%)}
.tc-system{background:linear-gradient(135deg,#ECE7DE 50%,#0E1116 50%)}
.tc-preview i:nth-child(1){background:transparent}
.tc-preview i:nth-child(2){background:linear-gradient(90deg,#E2CCA2,#9A7E51)}
.theme-card.on,.lang-opt.on{background:var(--surface-2);border-color:var(--ink);box-shadow:none}
.lang-opt.on .lo-flag{background:var(--ink);color:var(--paper)}
.accent-pick.on{border-color:var(--ink)}
.sk-ic,.lo-flag{background:color-mix(in srgb,var(--ink) 5%,transparent)}
.skill-card.on .sk-ic{background:var(--ink);color:var(--paper)}
.kpi{box-shadow:none}
.about-wm{font-size:52px}

/* ═══════════ 6. Pages: a night masthead over bone paper ═══════════ */
/* No rule anywhere between the bar, the masthead, the page and the footer (the owner, 2026-10-02): the bar is glass, the
   masthead melts into the page under its lamp, the footer is a deeper night. */
.page-top{background:color-mix(in srgb,var(--bg) 84%,transparent);border-bottom:0}
.page-nav a::after{background:var(--gold);height:1px}
.page-hero{background:var(--night) var(--lamp) no-repeat;padding:76px 20px 64px;border-bottom:0}
.page-hero .aurora{display:none}
.ph-ic{width:56px;height:56px;animation:none}
.ph-ic .i{width:24px;height:24px;stroke-width:1.5}
.ph-title{font-family:var(--disp);font-weight:800;font-size:clamp(34px,5.4vw,66px);line-height:1.2;color:var(--bone)}
html[lang="ar"] .ph-title{line-height:1.35}
html[lang="en"] .ph-title{font-weight:700;letter-spacing:-.03em;line-height:1.05}
html .page-hero .ph-title .grad-text{background:none;color:var(--gold-hi);-webkit-text-fill-color:currentColor}
.ph-sub{color:rgba(236,231,222,.72);font-size:17px}
.page-hero .legal-tabs .chip{border-color:rgba(236,231,222,.16);color:rgba(236,231,222,.78)}
.page-hero .legal-tabs .chip.on{background:var(--bone);color:var(--night);border-color:var(--bone)}
.page-wrap{padding-top:36px}
/* a short page still ends on its footer: the page grows, the footer stays at the bottom of the screen */
.page > .page-scroll{display:flex;flex-direction:column}
.page > .page-scroll > *{flex-shrink:0;inline-size:100%}
.page > .page-scroll > main{flex-grow:1}
.page-foot{background:linear-gradient(180deg,#0A0C10,#08090C);border-top:0}
.pf-bottom{border-top:0;margin-top:44px;padding-top:0}
.pf-brand .wordmark{color:var(--bone)}

/* the soft edge every card on these pages shares: a breath of ink on paper, a breath of bone on night — never a rule */
.legal-end,.faq-item,.sp-card,.sup-item,.pv-card,.pv-item,.bt-card,.bt-check,.gf-card{border-color:color-mix(in srgb,var(--ink) 7%,transparent)}
html[data-theme="dark"] :is(.faq-item,.sp-card,.sup-item,.pv-card,.pv-item,.bt-card,.bt-check,.gf-card){background:var(--night-2);border-color:rgba(236,231,222,.06)}

/* legal: one document on paper; its sections apart by space and their numbered seals, not by rules */
.legal-toc{background:transparent;border:0;border-radius:0;padding:4px 0;min-width:0}
.legal-toc .kicker{margin-bottom:4px}
.legal-toc button{border-radius:10px;font-size:13.5px;padding:8px 12px}
.legal-toc button.on{background:color-mix(in srgb,var(--gold) 10%,transparent);color:var(--ink)}
.legal-toc button.on::before{background:var(--gold);width:2px;top:9px;bottom:9px}
.legal-grid{grid-template-columns:250px minmax(0,1fr)}
.legal-body{gap:22px;background:var(--surface);border:0;border-radius:20px;padding:30px 48px 38px;box-shadow:0 1px 2px rgba(14,17,22,.05),0 30px 60px -44px rgba(14,17,22,.45)}
html[data-theme="dark"] .legal-body{background:var(--night-2);box-shadow:none}
/* a section is padded out into the margin, so the flash that marks it after a jump has room around the words */
.legal-sec{background:transparent;border:0;border-radius:14px;padding:14px 16px;margin-inline:-16px}
.legal-sec h2{font-family:var(--disp);font-weight:600;font-size:22px;letter-spacing:0;margin-bottom:10px}
html[lang="en"] .legal-sec h2{font-weight:700;letter-spacing:-.01em}
.sec-n{background:transparent;color:var(--gold-text);border:1px solid var(--gold-rule);border-radius:999px;padding:3px 9px;font-weight:600}
.legal-end{background:color-mix(in srgb,var(--ink) 4%,transparent);border:0}
.legal-draft{margin-top:-12px}
/* on a wide screen the document stands on the page's own axis, under its title, with its contents in the margin */
@media (min-width:1200px){.legal-grid{grid-template-columns:200px minmax(0,1fr) 200px;column-gap:36px}}

/* faq: quiet cards with room between them */
.faq-search .input{border-radius:999px;box-shadow:none;background:var(--surface);border-color:color-mix(in srgb,var(--ink) 9%,transparent)}
html[data-theme="dark"] .faq-search .input{background:var(--night-2);border-color:rgba(236,231,222,.07)}
.faq-cats{border:0;background:color-mix(in srgb,var(--ink) 5%,transparent)}
html[data-theme="dark"] .faq-cats{background:rgba(236,231,222,.045)}
.faq-cats .seg-thumb,html[data-theme="dark"] .faq-cats .seg-thumb{background:var(--ink);box-shadow:none}
.faq-cats button.on{color:var(--paper)}
.faq-list{gap:8px;border:0}
.faq-item{background:var(--surface);border-radius:16px;box-shadow:none}
.faq-item.open,html[data-theme="dark"] .faq-item.open{box-shadow:none;border-color:var(--gold-rule)}
.faq-q{padding:18px 20px;font-size:15.5px}
.faq-a > div{padding-inline:20px}
.faq-plus{background:color-mix(in srgb,var(--ink) 6%,transparent);border:0}
.faq-item.open .faq-plus{background:var(--ink);color:var(--paper)}
.faq-more{border-radius:20px;background:var(--surface);border:0}

/* support: the report card a warm surface (not a gold frame), the ways to an answer quiet cards */
.sup-card.gborder{border-color:transparent;background:color-mix(in srgb,var(--gold) 9%,var(--surface))}
html[data-theme="dark"] .sup-card.gborder{background:color-mix(in srgb,var(--gold) 7%,var(--night-2))}
.sup-card-i{color:var(--gold-deep)}
.sup-item{background:var(--surface)}
/* «بلاغاتي» and its refresh read as one heading, not two ends of a line */
.sup-mine-head{justify-content:flex-start;gap:4px}
.sp-card{border-radius:20px;background:var(--surface);box-shadow:none}
@media (hover:hover){.sp-card:hover,html[data-theme="dark"] .sp-card:hover{border-color:var(--gold-rule)}}
.sp-ic.ok{background:transparent;color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent)}
/* five ways to an answer on a wide screen: the help centre leads, tall, and the four others stand two by two beside it */
@media (min-width:901px){
  .support-cards:has(> .sp-card:nth-child(5):last-child){grid-template-columns:1.2fr 1fr 1fr}
  .support-cards:has(> .sp-card:nth-child(5):last-child) > .sp-card:first-child{grid-row:span 2;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:26px;
    background:color-mix(in srgb,var(--gold) 7%,var(--surface))}
  html[data-theme="dark"] .support-cards:has(> .sp-card:nth-child(5):last-child) > .sp-card:first-child{background:color-mix(in srgb,var(--gold) 6%,var(--night-2))}
  .support-cards:has(> .sp-card:nth-child(5):last-child) > .sp-card:first-child b{margin-top:auto;font-family:var(--disp);font-size:24px;font-weight:700}
  .support-cards:has(> .sp-card:nth-child(5):last-child) > .sp-card:first-child small{font-size:14px}
}
.support-form{border-radius:22px;box-shadow:none;border:0;background:var(--surface)}

/* pricing: until prices are announced, one sentence on the page's axis under the title */
.pricing-page .page-wrap > .compare:only-child{max-width:620px;margin:0 auto;text-align:center}
.pricing-page .page-wrap > .compare:only-child p{font-size:17px;line-height:1.95;color:var(--ink-soft);text-wrap:pretty}
.plan-card{border-radius:22px;box-shadow:none}
.plan-card::before{display:none}
.plan-card.featured{border-color:var(--gold-rule)}

/* «بياناتك», the beta page, gifts: the same paper; their head is the night masthead, as a plaque — lifted by its own
   surface and lamp, not drawn by a gold rule */
.pv-head,.bt-head{position:relative;isolation:isolate;overflow:hidden;padding:30px 30px 26px;border-radius:22px;background:var(--night) var(--lamp) no-repeat;border:0}
html[data-theme="dark"] :is(.pv-head,.bt-head){background:#141820 var(--lamp) no-repeat}
.pv-head h1,.bt-head h1{font-family:var(--disp);font-weight:800;letter-spacing:0;color:var(--bone);font-size:clamp(28px,4.4vw,44px)}
.pv-head .pv-sub,.bt-head .bt-lead{color:rgba(236,231,222,.74)}
.pv-head .pv-back{color:rgba(236,231,222,.78)}
@media (hover:hover){.pv-head .pv-back:hover{color:var(--bone);background:rgba(236,231,222,.06)}}
html[lang="en"] .pv-head h1,html[lang="en"] .bt-head h1{font-weight:700;letter-spacing:-.02em}
.pv-card,.pv-item,.bt-card,.bt-check,.gf-card{border-radius:16px}
.pv-live{border:0;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.pv-notice-sec{border-top:0;padding-top:0;margin-top:12px}
.pv-notice-sec .pv-h2{font-family:var(--disp);font-weight:600;font-size:20px}
.pv-danger-zone{border:0;border-radius:18px;padding:20px 22px;background:color-mix(in srgb,var(--danger) 8%,transparent)}
/* the erase button in a deep red in both themes: white on the night theme's pale coral read at about 2:1 */
.pv-danger{background:#B04A3E;color:#fff}
.pv-notice-list{max-width:760px}
.pv-result{border:0;background:color-mix(in srgb,var(--ok) 9%,var(--surface))}
.pv-primary,.bt-primary,.bt-plan{background:var(--g-cta);color:#14171C}
.bt-btn,.pv-btn{border-radius:999px}
/* the five things kept, balanced: three across, then two wider (a wide screen); two by two and one across (a tablet) */
@media (min-width:980px){
  .pv-grid:has(> .pv-card:nth-child(5):last-child){grid-template-columns:repeat(6,minmax(0,1fr))}
  .pv-grid:has(> .pv-card:nth-child(5):last-child) > .pv-card{grid-column:span 2}
  .pv-grid:has(> .pv-card:nth-child(5):last-child) > .pv-card:nth-child(n+4){grid-column:span 3}
}
@media (min-width:640px) and (max-width:979px){.pv-grid > .pv-card:nth-child(5):last-child{grid-column:1 / -1}}
/* a one-task page (an invitation, a gift code) stands in the middle of a large screen, not pinned to its top */
@media (min-width:641px){
  .bt-page{display:flex;flex-direction:column}
  .bt-page > *{flex-shrink:0}
  .bt-page > .bt-lang{inline-size:100%;margin-block-start:auto}
  .bt-page > .bt-wrap{margin-block-end:auto;inline-size:100%}
  .bt-page > .bt-wrap:first-child{margin-block-start:auto}
}

/* the website's legal pages: the same quiet surfaces — a seal for the mark, tints instead of frames, no dashed boxes */
.wl-head-ic{background:transparent;border:1px solid var(--gold-rule);border-radius:50%;color:var(--gold-deep)}
.wl-title{font-family:var(--disp);font-weight:700;letter-spacing:0}
.wl-banner{border:0;background:color-mix(in srgb,var(--gold) 10%,transparent)}
.wl-msg{border:0;background:color-mix(in srgb,var(--ink) 4%,transparent)}
.wl-panel,.wl-tabpanel{border-color:color-mix(in srgb,var(--ink) 7%,transparent);background:var(--surface)}
html[data-theme="dark"] :is(.wl-panel,.wl-tabpanel){background:var(--night-2);border-color:rgba(236,231,222,.06)}
.wl-item{border-color:transparent;background:color-mix(in srgb,var(--ink) 3.5%,transparent)}
.wl-tab[aria-selected="true"]{background:var(--ink);color:var(--paper)}
.wl-stepdot button[aria-current="step"]{border-color:var(--gold-rule)}

/* 404: the lamp, not the old aurora; the ways back on one line */
.nf .aurora{display:none}
.nf{background:var(--lamp) no-repeat top center/100% 560px}
.nf-inner{max-width:780px}
.nf-code > span:not(.nf-orb){background:linear-gradient(180deg,#E7D3AC,#9A7E51);-webkit-background-clip:text;background-clip:text}
.nf-orb{background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.5),transparent 40%),linear-gradient(160deg,#C9AE7E,#5E4C2F);box-shadow:0 30px 70px -30px rgba(154,126,81,.8)}
.nf h1{font-family:var(--disp);font-weight:800}

/* cookie banner */
.cookie-banner{border-radius:20px;border-color:color-mix(in srgb,var(--ink) 9%,transparent)}
html[data-theme="dark"] .cookie-banner{border-color:rgba(236,231,222,.09)}

/* ═══════════ 7. Phones ═══════════ */
@media (max-width:900px){
  /* the legal page's contents on a phone or a tablet: one swipeable row of pills above the document, not a long list */
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:18px}
  .legal-toc ol{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;overscroll-behavior-x:contain}
  .legal-toc ol::-webkit-scrollbar{display:none}
  .legal-toc li{flex:none}
  .legal-toc button{white-space:nowrap;border:1px solid var(--line);border-radius:999px;padding:7px 14px;font-size:13px}
  .legal-toc button.on{border-color:var(--ink);background:var(--ink);color:var(--paper)}
  .legal-toc button.on::before{display:none}
}
@media (max-width:820px){
  .page-hero{padding:48px 16px 40px}
  .legal-body{gap:10px;padding:16px 20px 22px;border-radius:18px}
  .legal-sec{padding:12px;margin-inline:-12px}
  .legal-sec h2{font-size:20px}
}
@media (max-width:640px){
  /* the speaker of an answer on a phone (no avatar column): a small gold mark, not a dark square */
  .row.bot .meta::before{width:7px;height:7px;border-radius:50%;background:var(--gold)}
  /* a settings row's words keep a readable width: the control goes under them before the text becomes a column of words */
  .set-row-txt{flex:1 1 180px}
  /* the chat home on a phone: a smaller statement, the starters as one list of cards, the modes one under the other */
  .c-hero{padding:18px 14px 10px}
  .hero-orb,.c-hero .hero-orb{inline-size:44px;block-size:44px;margin-block-end:14px}
  .hero-title{font-size:clamp(26px,7.4vw,32px)}
  .hero-sub{font-size:14.5px;line-height:1.75;margin-top:8px}
  .hero-cards{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:20px}
  .s-card{min-height:0;padding:13px 14px 13px 12px;border-radius:14px}
  html[dir="rtl"] .s-card{padding:13px 12px 13px 14px}
  .s-card::after{display:none}
  .hero-modes{grid-template-columns:minmax(0,1fr);gap:8px}
  .hero-modes li{padding:10px 12px;font-size:12.5px}
  /* the four legal documents: two by two, every name whole, instead of three and one left over */
  .legal-tabs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .legal-tabs .chip{justify-content:center;min-height:40px}
  /* the ways to an answer: rows (seal, words, arrow), not tall cards that are mostly empty */
  .support-cards{gap:8px}
  .sp-card{grid-template-columns:auto minmax(0,1fr);column-gap:14px;row-gap:2px;align-items:center;padding:14px 16px;padding-inline-end:44px;border-radius:16px}
  .sp-card .sp-ic{grid-row:span 2;margin:0}
  .sp-card .sp-go{top:50%;margin-top:-9px;inset-inline-end:16px}
  /* the ways back from a lost page: home across, the four others two by two */
  .nf-links{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:360px}
  .nf-links .b-primary{grid-column:1 / -1;justify-content:center}
  .nf-links .chip{justify-content:center;min-height:40px}
  /* the FAQ's categories: one swipeable row */
  .faq-cats{flex-wrap:nowrap;justify-content:flex-start;max-width:100%;overflow-x:auto;scrollbar-width:none}
  .faq-cats::-webkit-scrollbar{display:none}
  .faq-cats button{flex:none}
  .faq-q{padding:16px;font-size:15px}
  .faq-a > div{padding-inline:16px}
}

/* sidebar titles (Stage 5 visual review): an Arabic title in the English sidebar (dir=auto) kept its own right edge; every title lines up with the side the list is read from */
.s-title{text-align:match-parent}