/* Rafeeq (رفيق) app styles. Colours come ONLY from tokens in themes.css (generated from design/palettes/*.json).
   Type, spacing, radius and component rules follow the Rafeeq brand kit (v1/v2 BRAND.md). Logical properties throughout (RTL-safe). */

@font-face {
  font-family: "Inter Rafeeq"; src: url("/fonts/Inter-Latin-var.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Readex Rafeeq"; src: url("/fonts/ReadexPro-Arabic-var.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+200C-200F, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FEFF;
}

:root {
  --font-sans: "Inter Rafeeq", "Readex Rafeeq", system-ui, -apple-system, "Segoe UI", Roboto, "SF Arabic", "Noto Sans Arabic", sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --fs-xs: .8125rem; --fs-sm: .875rem; --fs-md: 1rem; --fs-lg: 1.125rem; --fs-xl: 1.375rem; --fs-2xl: 1.75rem; --fs-3xl: 2.125rem;
  --fs-input: max(16px, 1rem);
  --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700;
  --lh-tight: 1.2; --lh-heading: 1.3; --lh-body: 1.5; --lh-ui: 1.25; --ls-heading: -.015em;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --gutter: 16px; --tap: 44px;
  --r-xs: 6px; --r-sm: 10px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(26,34,51,.06), 0 1px 1px rgba(26,34,51,.04);
  --shadow-2: 0 4px 14px rgba(26,34,51,.07), 0 1px 3px rgba(26,34,51,.05);
  --ring: 0 0 0 3px color-mix(in srgb, var(--c-focus) 35%, transparent);
  --dur-1: 120ms; --dur-2: 200ms; --ease: cubic-bezier(.2, 0, 0, 1);
  -webkit-text-size-adjust: 100%;
}
[dir="rtl"] {
  --font-sans: "Readex Rafeeq", "Inter Rafeeq", "SF Arabic", "Geeza Pro", "Noto Sans Arabic", system-ui, sans-serif;
  --fw-regular: 360; --fw-medium: 460; --fw-semibold: 560; --fw-bold: 660;
  --lh-tight: 1.35; --lh-heading: 1.45; --lh-body: 1.7; --lh-ui: 1.4; --ls-heading: 0;
}
@media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; } }

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--c-bg); color: var(--c-ink); }
body {
  font-family: var(--font-sans); font-size: var(--fs-md); font-weight: var(--fw-regular); line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
}
a { color: var(--c-brand); }
h1 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--ls-heading); margin: var(--sp-2) 0 var(--sp-4); }
/* #263: a screen title the router focuses for screen readers (tabindex=-1) is not a control, so it draws no focus ring */
h1[tabindex="-1"]:focus { outline: none; }
h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-heading); margin: 0 0 var(--sp-2); }
h3 { font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-ui); margin: 0; }
p { margin: 0; }
small { display: block; color: var(--c-muted); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.muted { color: var(--c-muted); line-height: var(--lh-body); }
.lead { margin: calc(-1 * var(--sp-2)) 0 var(--sp-4); }
.hidden { display: none !important; }
.grow { flex: 1; min-width: 0; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
bdi { unicode-bidi: isolate; }
.stack > * + * { margin-block-start: var(--sp-3); }

/* icons (Lucide, ISC): 2px stroke, currentColor */
.i { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 16px; height: 16px; }
.i-fill { fill: currentColor; stroke: none; }
[dir="rtl"] .i-dir { transform: scaleX(-1); } /* only directional icons mirror */

/* brand mark: two buddies + a bubble */
.mark { width: 34px; height: 28px; flex: none; }
.mark .ma { fill: var(--c-mark-a); }
.mark .mb { fill: var(--c-mark-b); fill-opacity: .92; }
.mark .bub { fill: none; stroke: var(--c-mark-a); stroke-width: 2.4; }

/* #139 shared collapse/expand, built once: a panel is .collapse > .collapse-in, shut with [hidden] (grid rows 1fr <-> 0fr,
   then visibility: hidden, so a shut panel is out of the accessibility tree and not focusable); a .chev-turn chevron turns
   while its control is aria-expanded="true". Motion tokens only, so reduced motion is instant; a state rendered shut on load
   has nothing to transition from. The inner padding keeps card shadows and focus rings from being clipped. */
.collapse { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--dur-2) var(--ease), visibility 0s; }
.collapse[hidden] { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows var(--dur-2) var(--ease), visibility 0s var(--dur-2); }
.collapse > .collapse-in { min-height: 0; overflow: hidden; margin-inline: -6px; padding-inline: 6px; }
.chev-turn { transition: transform var(--dur-2) var(--ease); }
[aria-expanded="true"] .chev-turn { transform: rotate(180deg); }

/* ---------- top bar (plain) ---------- */
.top { display: flex; align-items: center; gap: var(--sp-3); padding: calc(env(safe-area-inset-top) + var(--sp-3)) var(--gutter) var(--sp-2); max-width: 640px; margin: 0 auto; }
/* PR #348 (spec-sticky-topbar.md): the top bar stays put so the logo hold (Report a problem) is always reachable */
.top { position: sticky; top: 0; z-index: 10; background: var(--c-bg); transition: box-shadow var(--dur-1) var(--ease); }
.is-scrolled .top { box-shadow: 0 1px 0 var(--c-border); } /* hairline, only once scrolled; box-shadow so no 1px layout shift */
@media (prefers-reduced-motion: reduce) { .top { transition: none; } }
html { scroll-padding-top: calc(env(safe-area-inset-top) + var(--tap) + var(--sp-3) + var(--sp-2) + var(--sp-2)); } /* 64 px bar + 8 px air = 72 px */
.top .rp-mark { min-block-size: var(--tap); } /* hold target 28 -> 44 px tall; the row is already 44, so no layout change */
.brandmark { display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0; color: var(--c-ink); }
.brandmark b { font-size: var(--fs-lg); font-weight: var(--fw-bold); letter-spacing: var(--ls-heading); }
.lang {
  min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); background: var(--c-surface); color: var(--c-ink);
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer;
}
.lang[lang="ar"] { font-family: "Readex Rafeeq", "SF Arabic", sans-serif; }
main { padding: var(--sp-2) var(--gutter) calc(var(--sp-8) + env(safe-area-inset-bottom)); max-width: 640px; margin: 0 auto; }
/* #121: Profile is a 44px round avatar link at the end of the header (no tab bar); scoped to .top, as a 48px card .avatar exists below */
.top .avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--c-border-strong); background: var(--c-brand-soft); color: var(--c-brand-strong); text-decoration: none; }
.top .avatar .i { width: 22px; height: 22px; }
.top .avatar:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
/* #234: header icon button (the Settings gear), tinted on its own page only */
.hd-icon { color: var(--c-ink-2); }
.hd-icon .i { width: 24px; height: 24px; }
.hd-icon[aria-current="page"] { background: var(--c-surface-2); color: var(--c-brand-strong); }
.title-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-4); }
.title-row h1 { margin: 0; }
.title-row .btn { flex: none; }

/* ---------- cards / sections ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-lg); padding: var(--sp-4); box-shadow: var(--shadow-1); margin-bottom: var(--sp-3); }
.section-label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-muted); margin: var(--sp-6) var(--sp-1) var(--sp-2); padding: 0; line-height: var(--lh-ui); }
.form-groups > .section-label:first-child, .form-groups > fieldset:first-child > .section-label { margin-top: var(--sp-2); }
.form-groups > .card { margin-bottom: 0; }
.form-groups > .btn.primary { width: 100%; margin-top: var(--sp-5); }
.form-groups > .error, .form-groups > .ok { margin-top: var(--sp-4); }

/* ---------- forms (label ABOVE input, always) ---------- */
.form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } /* #321: not flex. WebKit makes a fieldset with a legend too tall when it is a flex item (bugs 245402, 311249); minmax(0, 1fr) keeps the column no wider than the card, as the flex column was */
label { display: flex; flex-direction: column; gap: var(--sp-2); font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-ink); line-height: var(--lh-ui); }
.hint { font-weight: var(--fw-regular); }
[aria-invalid="true"] { border-color: var(--c-danger) !important; }
input, select, textarea {
  font: inherit; font-weight: var(--fw-regular); font-size: var(--fs-input); color: var(--c-ink); width: 100%;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); padding: 11px var(--sp-4); background: var(--c-surface);
  outline: none; -webkit-appearance: none; appearance: none; line-height: var(--lh-ui);
}
input::placeholder, textarea::placeholder { color: var(--c-muted); opacity: 1; }
select { background-image: linear-gradient(45deg, transparent 50%, var(--c-muted) 50%), linear-gradient(135deg, var(--c-muted) 50%, transparent 50%);
  background-position: calc(100% - 20px) 55%, calc(100% - 14px) 55%; background-size: 6px 6px; background-repeat: no-repeat; padding-inline-end: var(--sp-10); }
[dir="rtl"] select { background-position: 14px 55%, 20px 55%; }
/* One fixed height for single-line controls (QA P2-1): WebKit + Arabic made inputs taller than selects */
input:not([type=checkbox]):not([type=radio]), select { height: 48px; padding-block: 0; line-height: normal; }
input[type=date] { display: block; min-width: 0; }
input:focus, select:focus, textarea:focus { border-color: var(--c-focus); box-shadow: var(--ring); }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { font-weight: var(--fw-semibold); font-size: var(--fs-sm); margin-bottom: var(--sp-2); padding: 0; line-height: var(--lh-ui); }
.row { display: flex; gap: var(--sp-3); align-items: flex-end; }
.row > label { justify-content: flex-end; }
.row > * { flex: 1; min-width: 0; }
.row > .narrow { flex: 0 0 38%; }

/* segmented control */
.seg { display: flex; background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--sp-1); gap: var(--sp-1); }
.seg label { flex: 1; font-weight: var(--fw-medium); display: flex; min-width: 0; }
.seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; }
.seg span { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--tap); text-align: center; padding: 6px 2px; border-radius: var(--r-sm); font-size: var(--fs-sm); color: var(--c-ink-2); cursor: pointer; line-height: 1.2; transition: background var(--dur-1) var(--ease); }
.seg span b { font-weight: inherit; }
.seg input:checked + span { background: var(--c-surface); color: var(--c-brand-strong); font-weight: var(--fw-semibold); box-shadow: var(--shadow-1); }
.seg input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 1px; }
.seg-icons span { flex-wrap: wrap; }

/* chips (selected = soft tint + brand border + check icon, never colour alone) */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip input { position: absolute; opacity: 0; width: 1px; }
.chip span, .chip-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: var(--tap); padding: 0 var(--sp-4); border-radius: var(--r-pill);
  border: 1px solid var(--c-border-strong); font-size: var(--fs-sm); font-weight: var(--fw-medium); background: var(--c-surface); color: var(--c-ink-2);
  cursor: pointer; font-family: inherit; white-space: nowrap; line-height: 1.2;
}
.chip span { font-weight: var(--fw-medium); }
.chk { display: none; }
.chip input:checked + span, .chip-btn.on { background: var(--c-brand-soft); border-color: var(--c-brand); color: var(--c-brand-strong); }
.chip input:checked + span .chk, .chip-btn.on .chk { display: block; }
.chip input:focus-visible + span { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* toggles */
.toggle { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--sp-3); cursor: pointer; min-height: var(--tap); }
.t-text { flex: 1; min-width: 0; }
.toggle b { display: block; font-weight: var(--fw-medium); font-size: var(--fs-md); line-height: var(--lh-ui); }
.toggle small { font-weight: var(--fw-regular); margin-top: 2px; }
.toggle input { position: absolute; opacity: 0; width: 1px; }
.toggle i { flex: 0 0 50px; height: 30px; border-radius: var(--r-pill); background: var(--c-border-strong); position: relative; transition: background var(--dur-2) var(--ease); }
.toggle i::after { content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform var(--dur-2) var(--ease); }
.toggle input:checked + i { background: var(--c-brand); }
.toggle input:checked + i::after { transform: translateX(20px); }
[dir="rtl"] .toggle input:checked + i::after { transform: translateX(-20px); }
.toggle input:focus-visible + i { box-shadow: var(--ring); }
.opt-in { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); border: 1px dashed var(--c-border-strong); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: 48px;
  font: inherit; font-weight: var(--fw-semibold); font-size: var(--fs-md); line-height: var(--lh-ui);
  border: 1px solid transparent; border-radius: var(--r-md); padding: 0 var(--sp-5); text-decoration: none; cursor: pointer;
  color: var(--c-brand-strong); background: var(--c-surface); transition: background var(--dur-1) var(--ease);
}
.btn.primary { background: var(--c-brand); color: var(--c-on-brand); }
.btn.primary:active { background: var(--c-brand-strong); }
/* #279 Disabled button (components.md, app-wide): a primary that can't be used yet; busy keeps full colour (below) */
.btn.primary:is(:disabled, [aria-disabled="true"]):not([aria-busy="true"]) { background: var(--c-surface-2); color: var(--c-muted); border: 1px solid var(--c-border-strong); opacity: 1; cursor: not-allowed; }
.btn[aria-busy="true"]:disabled { opacity: 1; } /* #67: busy keeps full colour (docs/design/components.md) */
.btn.secondary { background: var(--c-surface); color: var(--c-brand-strong); border-color: var(--c-border-strong); }
.btn.ghost { background: transparent; border-color: var(--c-border-strong); color: var(--c-brand-strong); }
.btn.red { color: var(--c-danger); }
.btn.small { min-height: var(--tap); padding: 0 var(--sp-4); font-size: var(--fs-sm); }
.btn.block, .fab { width: 100%; }
.btn.wa { background: var(--c-wa); color: var(--c-on-wa); flex: 1; white-space: nowrap; padding-inline: var(--sp-3); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.actions { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.actions .btn.secondary { flex: none; white-space: nowrap; }
@media (max-width: 380px) { .actions { flex-direction: column; } .actions .btn { width: 100%; } }
.fab { margin-top: var(--sp-2); }
.link {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: var(--sp-3) var(--sp-1); min-height: var(--tap);
  color: var(--c-brand); background: none; border: 0; font-family: inherit; cursor: pointer; width: 100%;
}
[dir="rtl"] .link { text-underline-offset: .45em; }
.link.red { color: var(--c-danger); }
.danger-link { margin: 0 0 var(--sp-4); }
.quiet-link { color: var(--c-ink-2); margin-top: var(--sp-2); }
.back-link { display: inline-flex; align-items: center; gap: var(--sp-1); min-height: var(--tap); color: var(--c-brand-strong); font-weight: var(--fw-semibold); font-size: var(--fs-sm); text-decoration: none; margin-inline-start: calc(-1 * var(--sp-1)); padding-inline: var(--sp-1); }

/* ---------- notes / feedback (always with an icon, never colour alone) ---------- */
.note { display: flex; gap: var(--sp-2); align-items: flex-start; padding: var(--sp-3); border-radius: var(--r-md); font-size: var(--fs-sm); line-height: var(--lh-body); margin: 0 0 var(--sp-3); text-decoration: none; }
.note > .i { margin-top: 1px; }
.note > span { flex: 1; min-width: 0; }
.note-info { background: var(--c-info-soft); color: var(--c-info-ink); }
.note-warn { background: var(--c-warning-soft); color: var(--c-warning); }
.note-quiet { background: var(--c-surface-2); color: var(--c-ink-2); }
.note-caution { background: var(--c-caution-soft); color: var(--c-ink); } /* #273: "are you sure?" on a choice with a cost; never errors, limits or privacy */
.note.action { font-weight: var(--fw-semibold); align-items: center; min-height: var(--tap); }
.error { color: var(--c-danger); background: var(--c-danger-soft); padding: 10px var(--sp-3); border-radius: var(--r-sm); margin: 0; font-size: var(--fs-sm); display: flex; gap: var(--sp-2); }
.error::before { content: ""; flex: none; width: 16px; height: 16px; margin-top: 2px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat; }
.ok { color: var(--c-success); background: var(--c-success-soft); padding: 10px var(--sp-3); border-radius: var(--r-sm); margin: 0; font-weight: var(--fw-semibold); font-size: var(--fs-sm); display: flex; gap: var(--sp-2); align-items: center; }
.flash { margin: 0 0 var(--sp-3); }
/* #127: the build number, quietly at the foot of Settings (#234) */
.app-version { margin: var(--sp-4) 0 0; text-align: center; color: var(--c-muted); font-size: var(--fs-xs); line-height: var(--lh-ui); }
.keybox { gap: var(--sp-3); }
.key-head { display: flex; align-items: center; gap: var(--sp-2); color: var(--c-brand-strong); }
.key-head h2, .key-head h3 { margin: 0; color: var(--c-ink); }
.list-row { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--c-ink); min-height: 64px; }
.list-row > .i:first-child { color: var(--c-brand); }
.list-row b { display: block; font-weight: var(--fw-semibold); }
.chev { color: var(--c-muted); }
/* #234 Settings: groups of hairline rows, no headers, boxes or shadows (docs/design/components.md "Settings rows") */
.set-group { list-style: none; padding: 0; margin: var(--sp-6) 0 0; }
h1 + .set-group { margin-block-start: var(--sp-2); }
.set-group > li + li { border-block-start: 1px solid var(--c-border); }
.set-row { display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-block-size: 56px; padding-block: var(--sp-2); padding-inline: 0; background: none; border: 0; border-radius: 0; color: var(--c-ink); font: inherit; font-size: var(--fs-md); text-align: start; text-decoration: none; cursor: pointer; }
.set-row:focus-visible { outline: none; box-shadow: var(--ring); }
.set-row > .i:first-child { width: 24px; height: 24px; flex: none; color: var(--c-brand); }
.set-row b { display: block; font-weight: var(--fw-semibold); }
.set-row small { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); }
.set-act > .i:first-child { color: var(--c-ink-2); }
.set-del, .set-del > .i:first-child { color: var(--c-danger); }
.set-group + .app-version { margin-block-start: var(--sp-6); }
/* #313 Licences: the quiet footer link above the version, then the page (hairlines between entries, no cards) */
.set-group + .lic-foot { margin-block-start: var(--sp-5); }
.lic-foot { margin: 0; }
.lic-foot .link { margin: 0; }
.lic-foot + .app-version { margin-block-start: 0; }
.lic-intro { margin: 0 0 var(--sp-2); color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-body); }
.lic-list { list-style: none; margin: 0; padding: 0; }
.lic-list > li { padding-block: var(--sp-4); }
.lic-list > li + li { border-block-start: 1px solid var(--c-border); }
.lic-name { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-ui); color: var(--c-ink); }
.lic-licence { margin: 2px 0 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-ink-2); }
.lic-credit { margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--c-muted); overflow-wrap: anywhere; }
.lic-credit + .lic-credit { margin-top: var(--sp-1); }
[dir="rtl"] .lic-credit[dir="ltr"] { text-align: right; }
.lic-file { display: inline-flex; align-items: center; min-block-size: var(--tap); margin-block: calc(-1 * var(--sp-2)) calc(-1 * var(--sp-3)); color: var(--c-brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
[dir="rtl"] .lic-file { text-underline-offset: .45em; }
.lic-text-h { margin: var(--sp-5) 0 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-ui); color: var(--c-ink); }
.lic-list + .lic-text-sec .lic-text-h { margin-top: var(--sp-6); }
.lic-text-h + .lic-sum { margin-top: 0; }
.lic-sum[open] .lic-show, .lic-sum:not([open]) .lic-hide { display: none; }
.lic-text { margin-top: var(--sp-2); font-size: var(--fs-xs); line-height: var(--lh-body); color: var(--c-ink-2); overflow-wrap: anywhere; }
.lic-text p { margin: 0 0 var(--sp-2); }
.lic-text p.lh { font-weight: var(--fw-semibold); color: var(--c-ink); margin-top: var(--sp-3); }
/* #217 Suggest an idea: one box that grows with the text, the disclosure row (+ the "{n} left" counter), then Send */
#sg-text { display: block; width: 100%; min-block-size: 168px; max-block-size: 40vh; field-sizing: content; resize: none; overflow-wrap: anywhere; }
.sg-meta { display: flex; gap: var(--sp-3); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: var(--lh-ui); }
.sg-left { margin-inline-start: auto; flex: none; font-weight: var(--fw-semibold); color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.sg-msg:not(:empty) { margin-block-start: var(--sp-4); }
form[data-form="suggest"] > .btn.primary { margin-block-start: var(--sp-5); }

/* ---------- welcome / key (pre-login) ---------- */
.welcome { min-height: 100vh; }
.narrow-main { max-width: 480px; padding-bottom: calc(var(--sp-10) + env(safe-area-inset-bottom)); }
.hero { padding: var(--sp-4) var(--sp-1) var(--sp-5); }
.hero h1 { font-size: var(--fs-3xl); margin: var(--sp-2) 0 var(--sp-2); }
.hero > p { color: var(--c-ink-2); font-size: var(--fs-lg); }
.trust { list-style: none; padding: 0; margin: var(--sp-5) 0 0; display: grid; gap: var(--sp-3); }
.trust li { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); }
.trust .i { color: var(--c-brand); }
.welcome form { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } /* #321: not flex, as .form */
/* #67 invite link: chip (01), invite-only card + member label (05), link that didn't work (04) */
.inv-chip { display: inline-flex; align-items: center; gap: var(--sp-2); margin: 0; padding: 4px var(--sp-3); border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success); font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: var(--lh-ui); white-space: nowrap; }
.inv-chip .i { width: 16px; height: 16px; }
.member-link { align-self: center; min-height: 44px; display: inline-flex; align-items: center; white-space: nowrap; color: var(--c-brand-strong); text-decoration: underline; }
.only-card h2 { display: flex; align-items: center; gap: var(--sp-2); margin: 0 0 var(--sp-1); font-size: var(--fs-md); font-weight: var(--fw-semibold); white-space: nowrap; }
.only-card h2 .i { color: var(--c-brand); }
.only-card p { margin: 0; color: var(--c-ink-2); }
.section-label.already { color: var(--c-ink-2); margin-block: var(--sp-4) var(--sp-2); white-space: nowrap; }
.bad-card { display: flex; flex-direction: column; align-items: center; text-align: center; }
.bad-art { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--c-danger-soft); color: var(--c-danger); }
.bad-art .i { width: 28px; height: 28px; }
.bad-card h1 { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--lh-ui); white-space: nowrap; }
.bad-card h1:focus:not(:focus-visible) { outline: none; }
.bad-card p { margin: 0; color: var(--c-ink-2); }
.bad-foot { display: flex; justify-content: center; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 0; color: var(--c-muted); font-size: var(--fs-sm); }
.bad-foot .i { width: 16px; height: 16px; }
/* #68: the expired send (spec 08): the #67 card with calm amber art; the invitee notice and consent lines before Join */
.exp-art { background: var(--c-warning-soft); color: var(--c-warning); }
/* #68 the Settings invite section (settings-variant mock, spec §2.1 option B: a hairline under the pair, no card) */
.invite { display: flex; flex-direction: column; gap: var(--sp-3); margin-block: var(--sp-2) var(--sp-5); }
h1 + .invite { margin-block-start: var(--sp-2); }
.inv-b { padding-block-end: var(--sp-5); border-block-end: 1px solid var(--c-border); }
.invite + .set-group { margin-block-start: 0; }
.inv-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.inv-head h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); white-space: nowrap; }
.inv-stats { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.inv-stats b { color: var(--c-ink); font-weight: var(--fw-bold); }
.inv-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.inv-retry { margin: 0; } /* 1.0.1: "Didn't open? Tap again" under the pair (the fallback only) */
.inv-btn { min-height: var(--tap); padding: 0 var(--sp-3); font-size: var(--fs-sm); white-space: nowrap; min-width: 0; }
.inv-btn .i { width: 18px; height: 18px; flex: none; }
.inv-wa .i-fill { fill: var(--c-wa); stroke: none; }
.inv-btn[aria-busy="true"] { opacity: 1; cursor: progress; }
.inv-btn:disabled { opacity: 1; }
.btn.copied { color: var(--c-success); border-color: var(--c-success); background: var(--c-success-soft); }
.invite .error { margin: 0; }
.invite .error[hidden] { display: none; }
/* #68 PR 3 Signals empty-state invite (spec §2.2, frame 06): no box, no art */
.inv-empty { display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-3); padding-block: var(--sp-2) var(--sp-4); text-align: start; }
.inv-none { margin: 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.inv-empty h3 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.inv-empty .error { margin: 0; }
.inv-empty .error[hidden] { display: none; }
.inv-notice, .inv-consent { margin: 0; color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-body, 1.5); }
.key-actions { display: flex; gap: var(--sp-2); }
.key-actions .btn { flex: 1; }
.key { -webkit-user-select: all; user-select: all; font: 700 1.25rem var(--font-mono); text-align: center; letter-spacing: .06em; padding: var(--sp-4); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink); border: 2px dashed var(--c-border-strong); word-break: break-all; }

/* ---------- appearance ---------- */
.themes { display: grid; gap: var(--sp-3); }
.theme-card { flex-direction: row; align-items: center; gap: var(--sp-4); background: var(--c-surface); border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); padding: var(--sp-3); cursor: pointer; min-height: 96px; font-weight: var(--fw-regular); box-shadow: var(--shadow-1); }
.theme-card input { position: absolute; opacity: 0; width: 1px; }
.theme-card.on, .theme-card:has(input:checked) { border-color: var(--c-brand); box-shadow: 0 0 0 2px var(--c-brand); }
.theme-card:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--c-brand), var(--ring); }
.tc-text { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--sp-2); }
.tc-text b { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.tc-text small { flex-basis: 100%; }
.badge-soft { font-style: normal; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-brand-strong); background: var(--c-brand-soft); border-radius: var(--r-pill); padding: 1px var(--sp-2); }
.tc-check { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; flex: none; border: 1px solid var(--c-border-strong); color: transparent; }
.theme-card.on .tc-check, .theme-card:has(input:checked) .tc-check { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.tc-check .i { width: 16px; height: 16px; stroke-width: 3; }
/* Mini preview, rendered with that theme's own tokens (data-theme on the element) */
.preview { width: 92px; height: 72px; flex: none; border-radius: var(--r-md); background: var(--c-bg); border: 1px solid var(--c-border); padding: 6px; display: flex; flex-direction: column; gap: 5px; overflow: hidden; }
.preview i { display: block; font-style: normal; }
.pv-bar { display: flex; align-items: center; gap: 4px; }
.pv-mark { width: 18px; height: 14px; }
.pv-line { height: 5px; width: 30px; border-radius: 3px; background: var(--c-ink); opacity: .8; }
.pv-card { display: flex; gap: 4px; align-items: center; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 6px; padding: 4px; }
.pv-av { width: 12px; height: 12px; border-radius: 50%; background: var(--c-sand-soft); border: 1.5px solid var(--c-sand); flex: none; }
.pv-lines { flex: 1; display: grid; gap: 3px; }
.pv-lines i { height: 3px; border-radius: 2px; background: var(--c-muted); }
.pv-lines i + i { width: 60%; }
.pv-row { display: flex; gap: 4px; }
.pv-btn { flex: 1; height: 12px; border-radius: 4px; background: var(--c-brand); }
.pv-chip { width: 22px; height: 12px; border-radius: 6px; background: var(--c-sand); }

/* ---------- trips ---------- */
.trip { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; color: var(--c-ink); }
.trip b { font-weight: var(--fw-semibold); }
.trip-date, .datebox { width: 52px; flex: none; border-radius: var(--r-md); background: var(--c-brand); color: var(--c-on-brand); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 0; line-height: 1.1; }
.trip-date b, .datebox b { font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: 1.1; }
.trip-date small, .datebox small { color: inherit; font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.mini { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.mini > span { display: inline-flex; align-items: center; gap: 4px; background: var(--c-surface-2); color: var(--c-ink-2); border-radius: var(--r-pill); padding: 2px var(--sp-2); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.empty { text-align: center; padding: var(--sp-8) var(--sp-5); color: var(--c-ink-2); }
.empty .art { width: 64px; height: 64px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--c-brand-soft); color: var(--c-brand-strong); display: grid; place-items: center; }
.empty .art .i { width: 28px; height: 28px; }
.empty p { line-height: var(--lh-body); margin: 0 0 var(--sp-4); }
.empty.small { padding: var(--sp-5) var(--sp-4); background: var(--c-surface); border: 1px dashed var(--c-border-strong); border-radius: var(--r-lg); margin-bottom: var(--sp-3); }
.empty.small p { margin: 0; }

/* ---------- matches ---------- */
.group { margin-bottom: var(--sp-5); }
.group-head { display: flex; align-items: center; gap: var(--sp-3); margin: var(--sp-2) 0 var(--sp-3); }
.group-head h2 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-heading); }
.group-head h2 span { display: block; }
.group-head h2 small { font-weight: var(--fw-regular); }
.match .who { display: flex; gap: var(--sp-3); align-items: center; }
.avatar { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; flex: none; font-weight: var(--fw-bold); font-size: var(--fs-lg); background: var(--c-sand-soft); color: var(--c-ink); border: 2px solid var(--c-sand); }
.avatar.b { background: var(--c-brand-soft); border-color: var(--c-brand); color: var(--c-brand-strong); }
/* #268 Steven's photo inside the round .avatar on About */
.ab-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ab-photo:has(img) { background: var(--c-sand); } /* no light ring at the photo's edge: it meets the border colour */
.meta { font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-ui); margin-top: 2px; }
.best { flex: none; align-self: flex-start; font-size: var(--fs-xs); font-weight: var(--fw-semibold); padding: 4px var(--sp-2); border-radius: var(--r-pill); background: var(--c-sand); color: var(--c-on-sand); line-height: 1.2; }
.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); margin-top: var(--sp-3); }
.fact { background: var(--c-surface-2); border-radius: var(--r-sm); padding: var(--sp-2) var(--sp-1); text-align: center; min-width: 0; }
.fact b { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-ui); color: var(--c-ink); overflow-wrap: anywhere; }
.fact small { font-size: var(--fs-xs); }
.trip-line { display: flex; gap: var(--sp-2); align-items: flex-start; margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); }
.trip-line .i { margin-top: 1px; color: var(--c-muted); }
.quote { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.why-h { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-muted); margin: var(--sp-4) 0 var(--sp-2); line-height: var(--lh-ui); }
.reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.reason { display: inline-flex; align-items: center; gap: 4px; min-height: 28px; font-size: var(--fs-xs); font-weight: var(--fw-medium); padding: 2px var(--sp-2); border-radius: var(--r-pill); background: var(--c-success-soft); color: var(--c-success); white-space: nowrap; max-width: 100%; }
.reason > span { overflow: hidden; text-overflow: ellipsis; }
.reason.meh { background: var(--c-surface-2); color: var(--c-ink-2); }
.reasons:not(.open) .reason.extra { display: none; }
.reason.more { background: transparent; border: 1px dashed var(--c-border-strong); color: var(--c-brand-strong); font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold); cursor: pointer; min-height: var(--tap); padding: 0 var(--sp-3); }
.reasons.open .reason.more bdi, .reasons.open .more-l, .reasons:not(.open) .less-l { display: none; }
.ride { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-ink-2); font-size: var(--fs-sm); line-height: var(--lh-ui); }
.ride b { display: block; color: var(--c-ink); font-weight: var(--fw-semibold); }
.match .warn { margin: var(--sp-3) 0 0; }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.steps li { display: flex; gap: var(--sp-2); align-items: center; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); }
.steps .n { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); background: var(--c-brand-soft); color: var(--c-brand-strong); flex: none; }
.steps-d { margin-top: var(--sp-3); }
.steps-d summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); cursor: pointer; list-style: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-brand-strong); }
.steps-d summary::-webkit-details-marker { display: none; }
.steps-d[open] .sum-chev { transform: rotate(180deg); }
.steps-d .steps { margin-bottom: var(--sp-1); }
.install-hint { display: flex; gap: var(--sp-3); align-items: flex-start; background: var(--c-info-soft); border-color: transparent; color: var(--c-info-ink); }
.install-hint b { display: block; font-weight: var(--fw-semibold); }
.install-hint p { font-size: var(--fs-sm); margin: var(--sp-1) 0 var(--sp-3); line-height: var(--lh-body); }

/* ---------- costs ---------- */
.result { text-align: center; }
.result > small { color: var(--c-muted); }
.result-empty { margin: var(--sp-1) 0; color: var(--c-ink-2); }
.result .big { font-size: 2.5rem; font-weight: var(--fw-bold); margin: 2px 0 var(--sp-2); letter-spacing: -.02em; color: var(--c-brand-strong); line-height: 1.15; }
.split-lines { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink-2); }
.split-lines span { display: inline-flex; align-items: center; gap: 6px; }
.save { list-style: none; padding: var(--sp-3) 0 0; margin: var(--sp-3) 0 0; border-top: 1px solid var(--c-border); display: grid; gap: 6px; text-align: start; font-size: var(--fs-sm); color: var(--c-ink-2); }
.save li { display: flex; gap: var(--sp-2); align-items: center; }
.save .save-total { color: var(--c-success); }
.save .save-total small { display: inline; color: var(--c-muted); }

.loading { display: flex; justify-content: center; gap: var(--sp-2); padding: 60px 0; }
.loading i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); animation: b 1s infinite ease-in-out; }
.loading i:nth-child(2) { animation-delay: .15s; } .loading i:nth-child(3) { animation-delay: .3s; }
@keyframes b { 50% { transform: translateY(-8px); opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .loading i { animation: none; } }
/* two-line segment (trip appetite: "1 day" / "4 dives") */
.seg.tall span { flex-direction: column; gap: 2px; min-height: 56px; }
.seg.tall span b { font-weight: inherit; }
.seg.tall span small { font-size: var(--fs-xs); color: var(--c-muted); font-weight: var(--fw-regular); }
.seg.tall input:checked + span small { color: var(--c-ink-2); }
fieldset > legend.section-label { margin-top: var(--sp-5); }
.form-groups > fieldset:first-child > legend.section-label { margin-top: var(--sp-2); }
.seg-icons span { flex-direction: column; gap: 4px; min-height: 60px; }
/* LTR values (phone, key, invite code) inside RTL forms line up with the other fields (brand RTL rule 4) */
[dir="rtl"] input[dir="ltr"] { text-align: right; }

/* Gender seg: let "Rather not say" take the width it needs instead of wrapping (equal widths would force 2 lines at 375–390px). */
.seg:has(input[value="unspecified"]) label { flex: 1 1 auto; }
.seg:has(input[value="unspecified"]) span { white-space: nowrap; padding-inline: 8px; }

/* ---------- #28 Max depth picker, bottom sheet, other-cert badges (docs/design/issue-28/SPEC.md) ---------- */
.i-xs { width: 14px; height: 14px; }
.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field-label { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--c-ink); line-height: var(--lh-ui); }
.field-hint { display: block; font-size: var(--fs-sm); color: var(--c-muted); font-weight: var(--fw-regular); }
legend .field-hint { margin-top: 2px; }
.picker {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 48px; padding: var(--sp-2) var(--sp-4);
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink);
  font: inherit; text-align: start; cursor: pointer;
}
.picker.filled { min-height: 64px; }
.picker:focus-visible { outline: none; border-color: var(--c-focus); box-shadow: var(--ring); }
.picker[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: inset 0 0 0 1px var(--c-danger); }
.pk-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-level { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); line-height: var(--lh-ui); }
.pk-ph { font-size: var(--fs-input); color: var(--c-muted); }
.pk-chev { flex: none; width: 20px; height: 20px; color: var(--c-muted); }
.depth { display: inline-flex; align-items: center; gap: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); font-weight: var(--fw-regular); line-height: var(--lh-ui); }
.depth .i { color: var(--c-muted); }
.field > .error { margin-top: calc(-1 * var(--sp-1)); }

html.sheet-open { overflow: hidden; overscroll-behavior: none; }
.sheet-scrim { position: fixed; inset: 0; z-index: 50; background: rgba(20, 16, 14, .48); }
[data-mode="dark"] .sheet-scrim { background: rgba(0, 0, 0, .62); }
.sheet-scrim { transition: opacity var(--dur-2) var(--ease); }
.sheet {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 51; max-height: 92vh; overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-surface); color: var(--c-ink); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-3, var(--shadow-2));
  padding: var(--sp-2) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom));
  animation: sheet-up var(--dur-2) var(--ease);
}
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
/* #140: the handle is a 44px-tall drag zone (overlapping the header's top, which drags too) around the 36×4 pill */
.grab { display: block; block-size: 44px; margin: calc(-1 * var(--sp-2)) calc(-1 * var(--gutter)) -24px; cursor: grab; }
.grab::before { content: ''; display: block; inline-size: 36px; block-size: 4px; margin: var(--sp-2) auto 0; border-radius: var(--r-pill); background: var(--c-border-strong); }
.grab, .sheet-head { touch-action: none; }
/* #140: following the finger (no transition), springing back, and every close sliding down on the motion tokens */
.sheet-wrap.dragging .sheet { animation: none; cursor: grabbing; }
.sheet-wrap.dragging .sheet-scrim { transition: none; }
.sheet.settle { animation: none; transition: transform var(--dur-2) var(--ease); }
.sheet-wrap.closing .sheet { animation: none; transform: translateY(100%); transition: transform var(--dur-2) var(--ease); }
.sheet-wrap.closing .sheet-scrim { opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.sheet-head h2 { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin: 0; }
.icon-btn { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-ink); cursor: pointer; }
.icon-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.sheet-hint { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }
.lvl-g { display: flex; flex-direction: column; gap: var(--sp-1); }
.lvl-g + .lvl-g { margin-top: var(--sp-4); }
.lvl-gh { padding: 0 var(--sp-3) var(--sp-2); }
.lvl-gh h3 { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); margin: 0; }
.lvl-gh p { font-size: var(--fs-xs); color: var(--c-muted); margin: 2px 0 0; }
.level { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) var(--sp-3); border-radius: var(--r-md);
  border: 1px solid transparent; cursor: pointer; }
.level:focus-visible { outline: none; box-shadow: var(--ring); }
.level .radio { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-border-strong); display: grid; place-items: center; }
.lv-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-name { font-size: var(--fs-md); font-weight: var(--fw-medium); color: var(--c-ink); }
.lv-chk { flex: none; display: none; color: var(--c-brand-strong); }
.level[aria-checked="true"] { background: var(--c-brand-soft); border-color: var(--c-brand); }
.level[aria-checked="true"] .radio { border-color: var(--c-brand); }
.level[aria-checked="true"] .radio::after { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--c-brand); }
.level[aria-checked="true"] .lv-name { font-weight: var(--fw-semibold); color: var(--c-brand-strong); }
.level[aria-checked="true"] .lv-chk { display: block; }

.meta-depth { margin-top: 2px; }
.cert-badges { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; gap: 4px; min-height: 24px; padding: 2px var(--sp-2); border-radius: var(--r-pill);
  font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-ink-2); background: var(--c-surface-2); border: 1px solid var(--c-border); line-height: 1.2; }
.badge .i { width: 12px; height: 12px; color: var(--c-muted); }
.cert-badges:not(.open) .badge.extra { display: none; }
.badge.more { position: relative; background: transparent; border: 1px dashed var(--c-border-strong); font: inherit; font-size: var(--fs-xs);
  font-weight: var(--fw-semibold); color: var(--c-ink-2); cursor: pointer; }
.badge.more::before { content: ""; position: absolute; inset: -10px -6px; } /* 44 px tap area around the small badge */
.badge.more:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }
.cert-badges.open .badge.more bdi, .cert-badges:not(.open) .badge.more .less-l { display: none; }

/* ---------- #30 staging banner (injected by the server on staging only; never on production) ---------- */
.stg-banner { /* #137: normal flow, scrolls away with the page (never covers the header) */
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
  min-height: calc(48px + env(safe-area-inset-top));
  padding-block: env(safe-area-inset-top) 4px; padding-inline: var(--gutter) calc(var(--gutter) - var(--sp-2));
  color: var(--c-warning-soft); font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: 1.2;
  /* 4 px 45° hazard stripe on the bottom edge */
  background: repeating-linear-gradient(45deg, var(--c-warning) 0 6px, var(--c-warning-soft) 6px 12px) left bottom / 100% 4px no-repeat, var(--c-warning);
}
.stg-banner .i { stroke-width: 2.4; }
.stg-label { display: inline-flex; align-items: center; gap: 6px; min-width: 0; letter-spacing: .06em; } /* #137: may wrap at 320 px (AR) instead of widening the page */
.prod-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--sp-2); white-space: nowrap;
  color: inherit; letter-spacing: 0; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px;
}
@media (hover: hover) { .prod-link:hover { text-decoration-thickness: 2.5px; } }
.prod-link:active { opacity: .8; }
.prod-link:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; border-radius: var(--r-sm); }
html[lang="ar"] .stg-banner .l-en, html:not([lang="ar"]) .stg-banner .l-ar { display: none; }
html[lang="ar"] .stg-label { letter-spacing: 0; }
html.is-staging .top { padding-top: var(--sp-3); } /* the banner already covers the notch */
html.is-staging { scroll-padding-top: calc(var(--tap) + var(--sp-3) + var(--sp-2) + var(--sp-2)); } /* staging's bar has no inset padding (above), so neither does its scroll-padding */

/* #30 test-diver list (staging welcome) */
.demo h2 { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.demo h2 .i { color: var(--c-warning); }
.demo-sub { font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); margin: 0 0 var(--sp-2); }
.demo .error { margin: 0 0 var(--sp-2); }
.divers { display: flex; flex-direction: column; }
.diver {
  display: flex; align-items: center; gap: var(--sp-3); width: 100%; min-height: 64px; padding: var(--sp-3) 0;
  background: none; border: 0; border-block-start: 1px solid var(--c-border); border-radius: 0;
  font: inherit; color: var(--c-ink); text-align: start; cursor: pointer;
}
.diver:first-child { border-block-start: 0; }
.diver:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
.diver[aria-disabled="true"] { opacity: .5; cursor: default; }
.d-name { display: block; font-size: var(--fs-md); font-weight: var(--fw-semibold); line-height: var(--lh-ui); }
.d-meta { display: block; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); margin-top: 2px; }
.diver .mini { margin-top: var(--sp-2); }
.d-busy { display: inline-flex; align-items: center; gap: 6px; flex: none; color: var(--c-brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.spin { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }
.skel { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-3) 0; min-height: 64px; border-block-start: 1px solid var(--c-border); }
.skel:first-child { border-block-start: 0; }
.skel i { display: block; height: 12px; border-radius: var(--r-pill); background: var(--c-surface-2); }
.skel .sk-name { width: 38%; height: 14px; } .skel .sk-meta { width: 72%; } .skel .sk-tag { width: 30%; height: 18px; }
.card-empty { border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); padding: var(--sp-5) var(--sp-4); text-align: center; color: var(--c-ink-2); }
.card-empty b { display: block; color: var(--c-ink); }
.card-empty p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.demo-err { text-align: center; padding: var(--sp-4) 0 var(--sp-3); }
.demo-err .art { width: 48px; height: 48px; border-radius: 50%; background: var(--c-danger-soft); color: var(--c-danger); display: grid; place-items: center; margin: 0 auto var(--sp-3); }
.demo-err b { display: block; }
.demo-err p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); }
.demo [data-act="demo-retry"] { display: flex; margin: 0 auto var(--sp-1); }
.demo-wrap > .section-label { margin-top: var(--sp-5); }

/* #30 Environment row (admin only; #234: the last row of Settings' admin group) */
.env-row { padding-block: var(--sp-3); }
.env-top { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); }
.set-row .env-top b { display: inline; }
.env-pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); border-radius: var(--r-pill); border: 1px solid var(--c-border); background: var(--c-surface-2); color: var(--c-ink-2); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 1.4; }
.env-pill.stg { background: var(--c-warning); border-color: var(--c-warning); color: var(--c-warning-soft); }
.env-act { display: flex; align-items: center; gap: 6px; margin-top: 2px; color: var(--c-brand-strong); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.env-row small { margin-top: 2px; }

/* ---------- #14 Stats (admin only; docs/design/issue-14/SPEC.md v5). Tokens + logical properties only. ---------- */
.stats-h { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.stats-h h1 { margin-bottom: var(--sp-1); }
.stats-refresh { border: 1px solid var(--c-border-strong); color: var(--c-brand-strong); }
.updated { font-size: var(--fs-sm); color: var(--c-muted); margin: 0 0 var(--sp-4); }
.scard-h { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.scard-h > .i { width: 20px; height: 20px; color: var(--c-brand); }
.scard-h h2 { flex: 1; min-width: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); margin: 0; }
.scard-h .span { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted); }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.members-tiles { grid-template-columns: repeat(3, 1fr); }
.tile { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; background: var(--c-surface-2); border-radius: var(--r-md); padding: var(--sp-3); }
.members-tiles .tile { padding-inline: var(--sp-2); }
.tile-t { font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-2); white-space: nowrap; overflow: hidden; }
.tile-v { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-ink); font-variant-numeric: tabular-nums; line-height: 1.2; }
.tile-v small { display: inline; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.tile-s { font-size: var(--fs-xs); font-weight: var(--fw-medium); color: var(--c-muted); white-space: nowrap; overflow: hidden; }
.t-p95 { grid-column: 1 / -1; }
.t-p95 .tile-v { align-self: flex-end; } /* end-aligned: right in EN, left in AR */
.nd-v { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-muted); }
.delta { display: inline-flex; align-items: center; gap: 3px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.delta .i { width: 13px; height: 13px; }
.members-cap { margin: var(--sp-3) 0 0; font-size: var(--fs-sm); color: var(--c-muted); }
/* Health header: compact .seg with 44 px hit areas */
.seg-win { flex: none; padding: 3px; gap: 2px; border-radius: var(--r-pill); }
.seg-win label { position: relative; flex: none; min-width: 44px; }
.seg-win label::after { content: ""; position: absolute; inset: -6px 0; }
.seg-win span { min-height: 32px; padding: 0 12px; font-size: var(--fs-xs); font-weight: var(--fw-regular); border-radius: var(--r-pill); border: 1px solid transparent; }
.seg-win input:checked + span { border-color: var(--c-border-strong); }
.health-sub { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2); margin: 0 0 var(--sp-3); font-size: var(--fs-sm); color: var(--c-muted); }
.pill-status { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--sp-2); border-radius: var(--r-pill); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.pill-status i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 25%, transparent); }
.pill-status.up { color: var(--c-success); background: var(--c-success-soft); }
.pill-status.down { color: var(--c-danger); background: var(--c-danger-soft); }
/* #68 PR 2 Stats Invitations card (spec §2.6, frame 09) */
.inv-tiles .t-sends { grid-column: 1 / -1; }
.inv-tiles .tile-s { white-space: normal; }
.inv-part { white-space: nowrap; }
.inv-lines { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-ink-2); }
.inv-lines b { color: var(--c-ink); font-weight: var(--fw-bold); }
.inv-sends-h { margin: var(--sp-4) 0 var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.inv-sends, .inv-joins { list-style: none; margin: 0; padding: 0; }
.inv-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); overflow-wrap: anywhere; } /* #68 PR 3 */
.inv-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.inv-row:first-child { border-top: 0; }
.inv-row .grow { flex: 1; min-width: 0; display: grid; gap: 2px; }
.inv-row-meta { font-size: var(--fs-sm); color: var(--c-ink); }
.inv-row small { font-size: var(--fs-xs); color: var(--c-ink-2); }
.inv-cancel { flex: none; min-width: 61px; }
.pill.inv-st { flex: none; font-size: var(--fs-xs); color: var(--c-ink-2); background: var(--c-surface-2); }
.pill.inv-st:focus { outline-offset: 2px; }
.version { display: flex; align-items: center; gap: var(--sp-1); margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--c-muted); }
.version .i { width: 14px; height: 14px; }
.version bdi { font-family: var(--font-mono); }
.scard .note-warn { margin: 0; }
/* #235 Tracking section (spec docs/design/issue-235/spec.md §2-§3): a section row, groups under hairlines, funnel blocks */
.st-sec { margin-top: var(--sp-4); }
.st-sec-h { margin: 0; font-size: var(--fs-lg); }
.st-sec-t { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); inline-size: 100%; min-block-size: 52px; padding: 0 var(--sp-1);
  border: 0; border-top: 1px solid var(--c-border); background: none; color: var(--c-ink); font: inherit; font-weight: var(--fw-bold); text-align: start; cursor: pointer; }
.st-chev { flex: none; width: 24px; height: 24px; color: var(--c-ink-2); }
.st-sec-t[aria-expanded="true"] .st-chev-shut, .st-sec-t[aria-expanded="false"] .st-chev-open { display: none; }
.st-group { padding: var(--sp-3) var(--sp-1) var(--sp-4); border-top: 1px solid var(--c-border); }
.st-group:first-child { border-top: 0; }
.st-group-h { margin: 0 0 var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); line-height: var(--lh-ui); }
.st-group > .card { margin-block-end: var(--sp-3); }
.fn-block { margin-block-start: var(--sp-3); }
.st-group-h + .fn-block { margin-block-start: 0; }
.fn-head { display: flex; align-items: baseline; flex-wrap: wrap; margin: 0 0 var(--sp-2); }
.fn-name { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.fn-win { font-size: var(--fs-xs); color: var(--c-muted); }
.fn-overall { margin-inline-start: auto; display: inline-flex; align-items: baseline; gap: var(--sp-1); }
.fn-p { font-size: var(--fs-xl); font-weight: var(--fw-bold); color: var(--c-brand-strong); font-variant-numeric: tabular-nums; }
.fn-overall small, .fn-n, .fn-side { font-size: var(--fs-xs); color: var(--c-muted); }
.fn-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.fn-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); font-size: var(--fs-sm); }
.fn-n { white-space: nowrap; font-variant-numeric: tabular-nums; }
.fn-n b, .fn-side b { font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--c-ink); }
.fn-bar { display: block; height: 6px; margin-top: 2px; border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.fn-bar i { display: block; height: 100%; width: 0; background: var(--c-brand); border-radius: var(--r-pill); }
.fn-side { margin: var(--sp-2) 0 0; }
.fn-block .card-empty { margin: 0; }
/* #235 Tracking (spec §2, §6): blocks sit on the page, Not enough data yet keeps its circle-dashed mark but no dashed box */
.st-block + .st-block, .st-block + .fn-block, .fn-block + .st-block { margin-block-start: var(--sp-3); }
.st-group .card-empty { border: 0; border-radius: 0; padding: var(--sp-1) 0; }
.scard .bar, .st-block .bar { display: block; height: 10px; margin-top: var(--sp-1); border-radius: var(--r-pill); background: var(--c-surface-2); overflow: hidden; }
.scard .bar i, .st-block .bar i { display: block; height: 100%; width: 0; background: var(--c-brand); border-radius: var(--r-pill); }
/* Weekends */
.wk-row { display: flex; align-items: center; gap: var(--sp-3); min-height: 56px; padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); }
.scard-h + .wk-row, .fn-head + .wk-row { border-top: 0; padding-top: 0; }
.wk-row b { display: block; font-weight: var(--fw-semibold); }
.wk-row small { color: var(--c-muted); font-size: var(--fs-sm); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-1) var(--sp-3); border-radius: var(--r-pill); font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.pill .i { width: 14px; height: 14px; }
.pill.yes { color: var(--c-success); background: var(--c-success-soft); }
.pill.no { color: var(--c-ink-2); background: var(--c-surface-2); }
/* #235 Tracking (spec §2): a weekend's status is plain text, no pill box or icon */
.wk-st { flex: none; font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.wk-st.yes { color: var(--c-success); }
.wk-st.no { color: var(--c-muted); font-weight: var(--fw-medium); }
/* Matching */
.m-row { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-top: 1px solid var(--c-border); }
.scard-h + .m-row, .fn-head + .m-row { border-top: 0; padding-top: 0; }
.m-row .big { display: block; font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: 1.2; }
.m-row small { color: var(--c-ink-2); font-size: var(--fs-sm); }
.spark-w { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.spark-w small { color: var(--c-muted); font-size: var(--fs-xs); }
.spark rect { fill: var(--c-border-strong); }
.spark rect.cur { fill: var(--c-brand); }
/* Preferences */
.pref + .pref { margin-top: var(--sp-4); }
.pref > b { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); margin-bottom: var(--sp-1); }
.pref-bar { display: flex; gap: 2px; height: 12px; border-radius: var(--r-pill); overflow: hidden; background: var(--c-surface-2); }
.pref-bar i { display: block; min-width: 2px; }
.seg-1 { background: var(--c-brand); } .seg-2 { background: var(--c-accent); } .seg-3 { background: var(--c-border-strong); }
.legend { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
.legend > span { display: inline-flex; align-items: center; gap: 4px; }
.legend i { display: inline-block; width: 10px; height: 10px; }
.sw-circle { border-radius: 50%; } .sw-square { border-radius: 2px; } .sw-diamond { transform: rotate(45deg) scale(.85); border-radius: 1px; }
.pref small { display: block; margin-top: var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); }
/* Empty / error / loading */
.card-empty { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4); border: 1px dashed var(--c-border-strong); border-radius: var(--r-md); color: var(--c-ink-2); }
.card-empty .i { color: var(--c-muted); }
.card-empty b { display: block; color: var(--c-ink); font-weight: var(--fw-semibold); }
.card-empty small { font-size: var(--fs-sm); }
.err-card { text-align: center; padding: var(--sp-6) var(--sp-4); }
.err-card .art { width: 56px; height: 56px; margin: 0 auto var(--sp-3); border-radius: 50%; background: var(--c-danger-soft); color: var(--c-danger); display: grid; place-items: center; }
.err-card h2 { font-size: var(--fs-lg); margin: 0 0 var(--sp-1); }
.err-card p { color: var(--c-ink-2); margin: 0 0 var(--sp-4); }
.err-card .btn { min-height: 48px; }
.skel { display: block; background: var(--c-surface-2); border-radius: var(--r-md); }
.skel-line { width: 60%; height: 14px; border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.skel-h { width: 40%; height: 16px; border-radius: var(--r-sm); margin-bottom: var(--sp-3); }
.skel-tile { height: 64px; } .skel-tile.wide { grid-column: 1 / -1; height: 60px; } .skel-tile.tall { height: 78px; }
.skel-block { height: 120px; }
@media (prefers-reduced-motion: no-preference) {
  .skel { background: linear-gradient(90deg, var(--c-surface-2) 40%, var(--c-bg) 50%, var(--c-surface-2) 60%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; }
  @keyframes skel { to { background-position: -150% 0; } }
}
/* #138 Signals loading skeleton: Stats' .skel + shimmer, sizing only (the #30 list's .skel padding/border reset) */
.sig-skel .skel { min-height: 0; padding: 0; border: 0; }
.sig-skel .skel-group { border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); padding: 0 var(--sp-3); margin-bottom: var(--sp-4); } /* the #116 .tg-group box */
.sig-skel .skel-title { width: 45%; height: 30px; }
.sig-skel .skel-btn { flex: none; width: 128px; height: 44px; border-radius: var(--r-pill); }
.sig-skel .skel-tg { padding: var(--sp-3) 0 var(--sp-1); }
.sig-skel .skel-tg .skel-h { width: 70%; height: 20px; margin-bottom: var(--sp-2); }
.sig-skel .skel-tg .skel-line { width: 50%; }
.sig-skel .card { padding: var(--sp-3); margin-bottom: var(--sp-2); }
.sig-skel .skel-row { display: flex; gap: var(--sp-3); align-items: flex-start; }
.sig-skel .skel-col { flex: 1; min-width: 0; padding-top: var(--sp-1); }
.sig-skel .skel-col .skel-h { width: 50%; }
.sig-skel .skel-col .skel-line { width: 85%; }
.sig-skel .skel-date { flex: none; width: 56px; height: 56px; margin-bottom: var(--sp-3); }
.sig-skel .skel-chip { width: 88px; height: 28px; border-radius: var(--r-pill); }

/* #20 WhatsApp-style phone field (SPEC docs/design/issue-20 §4): +code box + number, the pair always LTR */
.tel-row { display: flex; gap: var(--sp-2); align-items: stretch; }
.cc-box { flex: none; width: 88px; box-sizing: border-box; display: flex; align-items: center; gap: 2px; height: 48px; padding-inline: var(--sp-3); border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-ink); font-size: var(--fs-input); font-variant-numeric: tabular-nums; }
.cc-box .plus { color: var(--c-ink-2); font-weight: var(--fw-medium); }
.cc-box input.cc { border: 0; padding: 0; height: 46px; min-width: 0; width: 100%; background: transparent; box-shadow: none; font: inherit; color: inherit; outline: none; }
.cc-box:focus-within { border-color: var(--c-focus); box-shadow: var(--ring); }
.tel-row input.phone { flex: 1; min-width: 0; height: 48px; box-sizing: border-box; text-align: left; font-variant-numeric: tabular-nums; }
input.phone[aria-invalid="true"] { border-color: var(--c-danger); box-shadow: inset 0 0 0 1px var(--c-danger); }
input.phone[aria-invalid="true"]:focus { box-shadow: inset 0 0 0 1px var(--c-danger), var(--ring); }
.cc-name { margin: calc(-1 * var(--sp-1)) 0 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: var(--lh-ui); text-align: left; }
.cc-name:empty { display: none; }
.phone-field > .error { margin: 0; }
.phone-ok { display: flex; align-items: flex-start; gap: var(--sp-2); margin: 0; font-size: var(--fs-sm); line-height: var(--lh-ui); color: var(--c-success); font-weight: var(--fw-medium); }
.phone-ok[hidden], .phone-reenter[hidden], .phone-field:has(.error) .phone-ok, .phone-field:has(.error) .field-hint { display: none; }
.phone-ok .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.phone-ok bdi { color: var(--c-ink); font-weight: var(--fw-semibold); white-space: nowrap; }
.phone-field .field-hint { margin: 0; }
.m-row .why { display: block; color: var(--c-muted); font-size: var(--fs-xs); }

/* ---------- #21 Signals cards (Direction A): 👌 once per card, Diving and Getting there rows ---------- */
.note-success { background: var(--c-success-soft); color: var(--c-success); font-weight: var(--fw-medium); }
.your-trip { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-2) 0 2px; font-size: var(--fs-sm); color: var(--c-ink-2); }
.your-trip b { color: var(--c-ink); font-weight: var(--fw-semibold); }
.fit-legend { display: flex; align-items: center; gap: 4px; margin: 0 0 var(--sp-3); font-size: var(--fs-xs); color: var(--c-muted); }
.fit-legend .i, .fit-mark .i { color: var(--c-success); }
.sig-new-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-md); margin: var(--sp-2) 0 var(--sp-3); }
.sig-new-h .count { min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-brand); font-size: var(--fs-xs); line-height: 22px; text-align: center; }
.card.sig { display: flex; flex-direction: column; gap: var(--sp-2); transition: background-color var(--dur-2) var(--ease); }
.card.sig.incoming { border: 2px solid var(--c-brand); }
.sig-head { display: flex; align-items: center; gap: var(--sp-3); }
.sig-head .datebox { width: 56px; min-height: 56px; }
.sig-head h3 { margin: 0; font-size: var(--fs-lg); line-height: var(--lh-heading); }
.sig-when { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); }
.sig-from { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.sig-from .i { width: 14px; height: 14px; }
/* #109 in-place 👌 (Steven, 21 Oct): press, pop, tint; existing --dur tokens only, so reduced motion is an instant swap */
/* M2 (launch fix, 1.0.0): the labelled action row at the card's end (spec-signals-button.md Option A, spec-buddy-up-mark.md) */
.sig-act { display: flex; align-items: center; min-height: var(--tap); }
.sig-ok { gap: var(--sp-2); padding-block: var(--sp-1); white-space: normal; text-align: start; max-width: 100%; } /* + .btn .small: 44 px, --fs-sm */
.sig-ok .g { flex: none; font-size: 20px; line-height: 1; transition: transform var(--dur-1) var(--ease); }
.sig-ok:active > .g { transform: scale(.88); }
.sig-ok .i { flex: none; width: 20px; height: 20px; }
.sig-ok .bu-m { flex: none; display: block; inline-size: 27px; block-size: 20px; background: currentColor;
  -webkit-mask: url(/img/buddy-up/buddy-up-mono.svg) center / contain no-repeat;
          mask: url(/img/buddy-up/buddy-up-mono.svg) center / contain no-repeat; } /* never mirrored */
.sig-pending { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--tap); margin: 0;
  font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); line-height: var(--lh-ui); } /* 2 lines fit the 44 px row */
.sig-pending .i { flex: none; width: 20px; height: 20px; color: var(--c-ink-2); }
.sig-act bdi { display: inline-block; } /* a short name stays on one line; a long one still wraps */
.sig-pending:focus { outline: none; }
.sig-pending:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; border-radius: var(--r-xs); }
.sig-pending.sig-pop .i { animation: sig-pop var(--dur-2) var(--ease); } /* the pop moves to the hourglass */
.sig-mutual.sig-pop .bu { animation: sig-pop var(--dur-2) var(--ease) var(--dur-2) both; } /* after the note's pop-in */
.sig-mutual.sig-pop { animation: sig-pop-in var(--dur-2) var(--ease); }
@keyframes sig-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes sig-pop-in { from { transform: scale(.92); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.card.sig.sig-hl { background-color: var(--c-brand-soft); }
.sig-new-h .count.sig-zero { visibility: hidden; } /* answered: cleared without the heading changing size */
@media (prefers-reduced-motion: reduce) { .sig-pop { animation: none; } }
@media (prefers-reduced-motion: reduce) { .sig-mutual.sig-pop .bu { animation: none; } } /* the same specificity as the pop rule, so it wins */
html:has(article.sig), html:has(article.sig) body { overflow-anchor: none; } /* a card growing into mutual never makes the browser shift the scroll */
/* end #109 */
.sig-where { display: flex; align-items: center; gap: 6px; margin: var(--sp-1) 0 0; font-size: var(--fs-md); }
.sig-where > .i { color: var(--c-brand-strong); }
.sig-near { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--c-ink-2); font-weight: var(--fw-medium); }
.sig-label { margin: var(--sp-1) 0 0; font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--c-muted); text-transform: uppercase; letter-spacing: .04em; }
[dir="rtl"] .sig-label { text-transform: none; letter-spacing: 0; }
.sig-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.sig-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 3px 10px; border-radius: var(--r-pill); background: var(--c-surface-2); color: var(--c-ink); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-semibold); max-width: 100%; }
.sig-chip > .i { flex: none; }
.sig-chip small { color: var(--c-ink-2); font-weight: var(--fw-medium); font-size: inherit; }
.sig-chip.cert { background: var(--c-brand-soft); color: var(--c-brand-strong); }
.sig-chip.fit { border-color: var(--c-success); }
.sig-chip.unset { background: none; border: 1px dashed var(--c-border-strong); color: var(--c-ink-2); }
.fit-mark { display: inline-flex; }
.sig-home { display: flex; gap: var(--sp-2); align-items: flex-start; margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.sig-home small { display: block; color: var(--c-ink-2); }
.card.sig .note { margin: 0; }
.sig-wa-off small, .sig-expired small { display: block; color: var(--c-ink-2); font-weight: var(--fw-regular); }
.sig-wa-off b { display: block; }
.card.sig .actions { margin-top: var(--sp-1); }
.emirates .chips { margin-top: var(--sp-1); }
.emirates .chip span { min-height: 44px; }
.sig-chip small { display: inline; }
.sig-label + .sig-chips { margin-top: -2px; }
/* #116 Signals trip sections (Steven, 21 Oct; mocks in docs/design/issue-116): a 1px theme border round each plan's heading
   and its cards; the heading is the disclosure button. Logical properties only, so RTL just mirrors. */
.tg-group { border: 1px solid var(--c-border-strong); border-radius: var(--r-lg); padding: 0 var(--sp-3); margin-bottom: var(--sp-4); }
.tg-h { margin: 0; font-size: inherit; }
.tg-toggle { display: flex; align-items: center; gap: var(--sp-3); width: calc(100% + 2 * var(--sp-3)); margin: 0 calc(-1 * var(--sp-3)); min-height: var(--tap);
  padding: var(--sp-3); border: 0; border-radius: var(--r-lg); background: none; color: var(--c-ink); font: inherit; text-align: start; cursor: pointer; }
.tg-toggle:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.tg-text { flex: 1; min-width: 0; display: block; }
.tg-route { display: block; font-size: var(--fs-xl); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.tg-arrow { color: var(--c-brand-strong); padding-inline: 2px; }
.tg-when { display: block; margin-block-start: 2px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); line-height: var(--lh-ui); }
.tg-count { color: var(--c-ink); font-weight: var(--fw-semibold); }
.tg-chev { flex: none; width: 24px; height: 24px; color: var(--c-ink-2); }
.tg-body > .collapse-in::after { content: ""; display: block; block-size: var(--sp-1); } /* the gap under the cards, clipped when shut (padding would keep a shut panel 4px high) */
.tg-group .card.sig { padding: var(--sp-3); margin-bottom: var(--sp-2); }
.tg-group .fit-legend { margin-bottom: var(--sp-2); }
.sig-new-tag { display: inline-block; margin-block-end: 2px; padding: 0 var(--sp-2); border-radius: var(--r-pill); background: var(--c-brand); color: var(--c-on-brand); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: 20px; }
/* Chief of Staff: the cert chip and the 👌 tint are both --c-brand-soft; keep the chip's edge visible while tinted */
.card.sig.sig-hl .sig-chip.cert { border-color: var(--c-brand-strong); }
/* #121: the trip header row: the #116 toggle, then a separate 44px pencil to Edit trip (not inside the toggle) */
.tg-row { display: flex; align-items: center; }
.tg-row .tg-h { flex: 1; min-width: 0; }
.tg-row .tg-toggle { width: calc(100% + var(--sp-3)); margin-inline: calc(-1 * var(--sp-3)) 0; }
.tg-edit { color: var(--c-ink-2); margin-inline-end: calc(-1 * var(--sp-2)); }
.tg-edit:focus-visible { box-shadow: none; outline: 2px solid var(--c-focus); outline-offset: -2px; }
/* heading wrap at 320px: "{emirate} →" one unit; the destination drops below whole; line 2 breaks only after " · " */
.tg-from { white-space: nowrap; }
.tg-dest { display: inline-block; }
.tg-dates, .tg-nw { white-space: nowrap; }
/* end #116 */
/* #124 trip times (spec docs/design/issue-125 §1.4): the slot grid. Headers are aria-hidden; each chip is one cell,
   + when off, ✓ when on (not colour alone). Logical layout, so RTL mirrors with dir (days on the right). */
.sg { display: grid; grid-template-columns: minmax(3.5rem, auto) 1fr 1fr; gap: var(--sp-2); align-items: center; margin-top: var(--sp-1); }
.sg-col { text-align: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); }
.sg-day { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); white-space: nowrap; }
.sg-chip { display: flex; min-width: var(--tap); }
.sg-chip span { flex: 1; justify-content: center; padding: 0; min-width: var(--tap); }
.sg-off { color: var(--c-muted); }
.sg-chip input:checked + span .sg-off { display: none; }
fieldset[aria-invalid="true"] .chip span { border-color: var(--c-danger); }
.sig-time { flex-wrap: wrap; font-size: var(--fs-sm); }
.sig-time b { font-weight: var(--fw-semibold); }
.sig-both { flex-basis: 100%; padding-inline-start: 22px; color: var(--c-success); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.sig-time-both .sig-both { flex-basis: auto; padding-inline-start: 0; }
/* #165 the times-differ line: neutral (.sig-near), on its own line under their slot line, or beside the icon with none */
.sig-time .sig-differ { flex-basis: 100%; padding-inline-start: 22px; }
.sig-time-both .sig-differ { flex-basis: auto; padding-inline-start: 0; }
/* #165 signal-first sections (spec §1.1): a plain label per section, 16px between sections, no dividers */
.ms + .ms { margin-block-start: var(--sp-4); }
.ms-h { margin: 0 var(--sp-1) var(--sp-2); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); line-height: var(--lh-ui); }
/* #165 "Show N more" (spec §1.2): a quiet, full-width text row; no border, fill or radius; one-way (hidden once used) */
.ms-more { display: flex; align-items: center; justify-content: center; gap: var(--sp-1); inline-size: 100%; min-block-size: var(--tap); padding: 0 var(--sp-3); margin-block-end: var(--sp-2);
  border: 0; border-radius: 0; background: none; color: var(--c-brand-strong); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.ms-more[hidden] { display: none; }
.ms-more .ms-chev { width: 18px; height: 18px; }
/* #125 weekend sections (spec §1.2): Skip / Undo are quiet 44px text buttons, siblings in the #121 header row; a skipped
   weekend has a dashed border; compact (manual) headers carry "I'm in". */
.tg-row:has(.wk-act, .wk-in) { gap: var(--sp-2); }
.wk-act { flex: none; min-height: var(--tap); min-width: var(--tap); padding: 0 var(--sp-2); border: 0; border-radius: var(--r-pill); background: none;
  color: var(--c-brand-strong); font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.wk-act:focus-visible { outline: 2px solid var(--c-focus); outline-offset: -2px; }
.wk-act[aria-disabled="true"], .wk-in[aria-disabled="true"] { opacity: .6; cursor: progress; }
.wk-in { flex: none; }
.wk-h { padding-block: var(--sp-3); }
.wk-route { display: block; font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--lh-heading); }
.wk-when { display: block; margin-block-start: 2px; font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--c-ink-2); line-height: var(--lh-ui); }
.wk-state { color: var(--c-ink); font-weight: var(--fw-semibold); }
.wk-skipped { border-color: var(--c-border-strong); border-style: dashed; }
.wk-skipped .wk-route { color: var(--c-ink-2); }
@media (max-width: 339px) { /* Product (§7.5): below 340px Skip gets its own row under the heading, at the start */
  .tg-row:has(.wk-skip) { flex-wrap: wrap; }
  .tg-row:has(.wk-skip) .tg-h { flex-basis: calc(100% - var(--tap) - var(--sp-2)); }
  .tg-row .wk-skip { order: 3; margin-block-end: var(--sp-2); }
}
.wk-defaults small, .wk-asks small { display: block; }
/* end #124 + #125 */

/* #126 onboarding (spec docs/design/issue-126 §9): one continuous bar filling from inline-start; screens slide inside
   the stage. Direction = [dir] (EN +1, AR -1) × data-dir (fwd +1, back -1). Reduced motion: slideTo swaps instantly. */
.ob-bar { --ob-step: 1; block-size: 4px; border-radius: var(--r-pill); background: var(--c-border); margin-block: var(--sp-1) var(--sp-4); overflow: hidden; }
.ob-bar > i { display: block; block-size: 100%; inline-size: calc(var(--ob-step) * 100% / 3); background: var(--c-brand); border-radius: inherit; transition: inline-size var(--dur-2) var(--ease); }
.ob-stage { display: grid; overflow-x: clip; --ob-sign: 1; --ob-flow: 1; }
[dir="rtl"] .ob-stage { --ob-sign: -1; }
.ob-stage[data-dir="back"] { --ob-flow: -1; }
.ob-stage > .ob-screen { grid-area: 1 / 1; min-width: 0; }
.ob-entering { animation: ob-in var(--dur-2) var(--ease) both; }
.ob-leaving { animation: ob-out var(--dur-2) var(--ease) both; pointer-events: none; }
@keyframes ob-in { from { transform: translateX(calc(var(--ob-sign) * var(--ob-flow) * 100%)); } }
@keyframes ob-out { to { transform: translateX(calc(var(--ob-sign) * var(--ob-flow) * -100%)); } }
.ob-title { margin-block: var(--sp-1) var(--sp-4); }
.ob-title:focus { outline: none; }
.ob-step { display: block; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); margin-bottom: var(--sp-1); }
.ob-screen .back-link { background: none; border: 0; cursor: pointer; font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.ob-screen .actions { justify-content: space-between; }
.ob-screen .actions .btn { flex: 1; }

/* #154 welcome intro */
/* Spec docs/design/issue-154: one column, segments, Skip at inline-end, the art full-bleed, one line
   below it, a 48px button slot. Scene lengths are local to the component. Plain CSS, theme tokens, no images. */
.intro { --intro-s1: 3000ms; --intro-s2: 4400ms; --intro-s3: 3000ms;
  display: flex; flex-direction: column; gap: var(--sp-3); min-block-size: 100dvh; max-inline-size: 480px; margin-inline: auto;
  padding: calc(var(--sp-3) + env(safe-area-inset-top)) var(--gutter) calc(var(--sp-4) + env(safe-area-inset-bottom)); }
.intro:focus { outline: none; }
/* #187: the intro fills the screen below anything above it (the staging banner), not a full 100dvh under it, so the
   bottom-pinned button stays above the fold. Body and #app become a column only while the intro shows. */
body:has(> #app > main.intro) { display: flex; flex-direction: column; min-block-size: 100dvh; }
body:has(> #app > main.intro) > #app { flex: 1; display: flex; flex-direction: column; }
body:has(> #app > main.intro) > #app > main.intro { flex: 1; inline-size: 100%; min-block-size: 0; } /* without :has, the 100dvh above */
.intro-segs { display: flex; gap: 4px; }
.intro-segs > span { flex: 1; block-size: 4px; border-radius: var(--r-pill); background: var(--c-border); overflow: hidden; }
.intro-segs > span > i { display: block; block-size: 100%; inline-size: 0; background: var(--c-brand); }
.intro-segs > .done > i { inline-size: 100%; }
.intro-segs > .now > i { animation: intro-fill var(--intro-s1) linear forwards; }
.intro[data-scene="2"] .intro-segs > .now > i { animation-duration: var(--intro-s2); }
.intro[data-scene="3"] .intro-segs > .now > i { animation-duration: var(--intro-s3); }
@keyframes intro-fill { to { inline-size: 100%; } }
.intro-bar { display: flex; flex-direction: row-reverse; justify-content: space-between; align-items: center; }
.intro-skip { min-inline-size: 44px; min-block-size: 44px; padding: 0 var(--sp-2); border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-brand-strong); border-radius: var(--r-pill); }
.intro-skip:focus-visible, .intro-next:focus-visible { outline: none; box-shadow: var(--ring); }
.intro-stage { flex: 1; align-content: center; margin-inline: calc(-1 * var(--gutter)); cursor: pointer; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.intro-scene { display: flex; flex-direction: column; gap: var(--sp-4); position: relative; }
.intro-art { display: block; inline-size: 100%; block-size: auto; overflow: visible; }
.intro-line { margin: 0; padding-inline: var(--gutter); font-size: var(--fs-xl); font-weight: var(--fw-bold, 700); line-height: var(--lh-tight, 1.3);
  text-align: center; text-wrap: balance; min-block-size: 2.6em; color: var(--c-ink); }
.intro-nb { white-space: nowrap; }
.intro-ok { display: inline-flex; justify-content: center; inline-size: .75em; margin-inline-start: .1em; } /* flex centres an overflowing glyph (text-align start-aligns it); .1em keeps a word space before it */
/* #273 [BU], the buddy-up emoji: the r4-d PNG in a box as tall as 👇 (wider than tall), on the word's line; never mirrored */
.bu { display: inline-block; inline-size: 1.45em; block-size: 1.15em; object-fit: contain; vertical-align: -0.25em; margin-inline-start: .25em; }
.bu-nb { white-space: nowrap; }
.intro-actions { min-block-size: 48px; }
.intro-next.kb-only:not(:focus-visible) { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.intro-go { animation: intro-up var(--dur-2) var(--ease) both; }
@keyframes intro-up { from { opacity: 0; transform: translateY(8px); } }
/* the art: sea, the yada rope (sand with a braid), the two circles of the mark, the card, the 👌, the taxi, the coast */
.intro-art .sea { fill: var(--c-accent-soft); }
.intro-art .rope, .intro-art .braid { fill: none; stroke-width: 5; stroke-linecap: round; }
.intro-art .rope { stroke: var(--c-sand); }
/* #178: the braid is the sand's own ink (on-sand), so it shows on the rope in every theme and mode (>= 2:1; brand-strong vanished in Fajr dark) */
.intro-art .braid { stroke: var(--c-on-sand); stroke-opacity: .4; stroke-dasharray: 3 7; }
.intro-art .ma { fill: var(--c-mark-a); }
.intro-art .mb { fill: var(--c-mark-b); }
.intro-art .bubble { fill: none; stroke: var(--c-accent-ink); stroke-width: 1.5; opacity: 0; }
.intro-art .li { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.intro-art .car { color: var(--c-ink); }
.intro-art .sign { fill: var(--c-sand); }
.intro-art .coast { color: var(--c-accent-ink); }
.intro-art .speed { fill: none; stroke: var(--c-ink-2); stroke-width: 2; stroke-linecap: round; opacity: 0; }
.intro-art g, .intro-art text, .intro-art circle { transform-box: fill-box; transform-origin: center; }
.intro-art .taxi { transform-box: view-box; transform-origin: 56px 100px; } /* #178: turns about the point between its wheels */
/* RTL: the rope and road run right to left; the 👌 and the card are counter-flipped so they read normally */
[dir="rtl"] .intro-art { transform: scaleX(-1); }
.cf { transform-box: fill-box; transform-origin: center; }
[dir="rtl"] .cf { scale: -1 1; }
/* scene 1: the divers bob on the rope (the second 750ms behind), a bubble rises every 1800ms */
.intro-scene[data-scene="1"] .dv { animation: intro-bob 1500ms ease-in-out infinite alternate; }
.intro-scene[data-scene="1"] .dv.b { animation-delay: -750ms; }
.intro-scene[data-scene="1"] .bubble { animation: intro-bubble 1800ms ease-out infinite; }
.intro-scene[data-scene="1"] .dv.b .bubble { animation-delay: 900ms; }
@keyframes intro-bob { to { transform: translateY(-4px); } }
@keyframes intro-bubble { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: .9; } 100% { opacity: 0; transform: translateY(-26px); } }
/* #273 scene 2 (Steven, 27 Oct 2026): the buddy-up stage replaced the 👌 out-and-back. It lies on the art's top 128 of 220
   units, so its centre line (64) clears the circles; parts are pinned at the centre (.e > *: left/top 0, or RTL shifts them) */
.bu-stage { position: absolute; inset-block-start: 0; inset-inline: 0; aspect-ratio: 360 / 128; pointer-events: none; }
/* circles spec §2: the stage's own easing tokens (the global --ease is untouched): moves; appearances; fades, shrink and settle */
.bu-stage { --bu-ease-move: cubic-bezier(.65,0,.35,1); --bu-ease-out: cubic-bezier(.33,1,.68,1); --bu-ease-soft: cubic-bezier(.45,0,.55,1); }
.bu-stage .e { position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; }
.bu-stage .e > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
/* circles spec §3: each 👌 has an inner .l (y and the merge scale); the outer .e carries x and opacity */
.bu-stage .e > .l { translate: none; width: 0; height: 0; }
.bu-stage .l > * { position: absolute; left: 0; top: 0; translate: -50% -50%; }
.bu-ok { display: inline-block; font-size: 40px; line-height: 1; }
.bu-ok.m { transform: scaleX(-1); }
.bu-big { display: block; font-size: 48px; inline-size: 1.45em; block-size: 1.15em; object-fit: contain; }
/* reduced motion (circles spec R1): the end state: [BU] centred, a 28 px 👌 above each circle (at 104 / 256), physical sides,
   the left one mirrored so both face [BU]; the circles are drawn at their end places */
.bu-still3 { position: absolute; inset: 0; margin: 0; }
.bu-still3 > * { position: absolute; translate: -50% -50%; }
.bu-still3 .bu-big { left: 50%; top: 50%; }
.bu-still3 .ok-s { font-size: 28px; line-height: 1; top: calc(80 / 128 * 100%); }
.bu-still3 .ok-s.l { left: calc(104 / 360 * 100%); }
.bu-still3 .ok-s.r { left: calc(256 / 360 * 100%); }
/* scene 3: the taxi drives along the same rope to the sea, speed lines fade at the end; it then holds */
/* #178: it rides ON the rope: both wheels on the rope top, tilted with it. The stops are the rope (ropeAt, logic.js) at even
   distances, timed by --ease (cubic-bezier(.2, 0, 0, 1)) with linear steps between; test/intro-178 checks every stop. */
.intro-scene[data-scene="3"] .taxi { animation: intro-drive 2200ms linear both; }
.intro-scene[data-scene="3"] .speed { animation: intro-speed 2200ms linear both; }
@keyframes intro-drive {
  0% { transform: translate(0px, 12.4px) rotate(7.2deg); }
  7.8% { transform: translate(19.3px, 14.5px) rotate(5.7deg); }
  10.3% { transform: translate(38.7px, 16.3px) rotate(4.5deg); }
  12.4% { transform: translate(58px, 17.6px) rotate(3.4deg); }
  14.5% { transform: translate(77.3px, 18.6px) rotate(2.3deg); }
  17% { transform: translate(96.7px, 19.2px) rotate(1.3deg); }
  20% { transform: translate(116px, 19.5px) rotate(0.4deg); }
  23.7% { transform: translate(135.3px, 19.4px) rotate(-0.6deg); }
  28.5% { transform: translate(154.7px, 19.1px) rotate(-1.5deg); }
  34.9% { transform: translate(174px, 18.4px) rotate(-2.5deg); }
  43.6% { transform: translate(193.3px, 17.4px) rotate(-3.6deg); }
  57.2% { transform: translate(212.7px, 16px) rotate(-4.7deg); }
  100% { transform: translate(232px, 14.2px) rotate(-6deg); } }
@keyframes intro-speed { 0% { opacity: 0; } 20% { opacity: .7; } 85% { opacity: .5; } 100% { opacity: 0; } }
/* paused: a hold, keyboard focus on Skip/Next, or a hidden tab (WCAG 2.2.2) */
.intro.paused *, .intro.paused *::before { animation-play-state: paused !important; }
/* reduced motion: nothing moves or advances; each scene shows its end frame; segments jump */
@media (prefers-reduced-motion: reduce) {
  .intro *, .intro *::before { animation-duration: 0s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
  .intro-segs > .now > i { animation: none; inline-size: 100%; }
}

/* ---------- #220 Report a problem (docs/design/issue-220/spec.md §3) ---------- */
/* the hold: no iOS callout, text selection or double-tap zoom on the mark; the button looks exactly like the mark */
.top .brandmark { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
button.brandmark { appearance: none; background: none; border: 0; padding: 0; margin: 0; font: inherit; text-align: start; cursor: default; border-radius: var(--r-sm); -webkit-tap-highlight-color: transparent; }
button.brandmark:focus-visible { outline: none; box-shadow: var(--ring); }
.rp-mark { transition: transform var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease); }
.rp-mark.holding { transform: scale(.94); }
@media (prefers-reduced-motion: reduce) { .rp-mark.holding { transform: none; opacity: .7; } }
/* the sheet: thumbnail beside the note, the disclosure line, messages, Send */
.rp-row { display: flex; gap: var(--sp-3); margin-block-start: var(--sp-3); }
.rp-media { position: relative; flex: none; }
.rp-shot { display: flex; align-items: center; justify-content: center; inline-size: 80px; block-size: 156px; padding: 0; overflow: hidden;
  border: 1px solid var(--c-border-strong); border-radius: var(--r-md); background: var(--c-surface-2); color: var(--c-muted); cursor: zoom-in; }
.rp-shot img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: top; display: block; }
.rp-busy { cursor: default; }
.rp-shot:focus-visible { outline: none; box-shadow: var(--ring); }
.rp-x { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: 44px; block-size: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; }
.rp-x span { display: flex; align-items: center; justify-content: center; inline-size: 26px; block-size: 26px; border-radius: var(--r-pill); background: rgba(20, 16, 14, .72); color: #fff; }
.rp-x .i { inline-size: 16px; block-size: 16px; }
.rp-x:focus-visible { outline: none; }
.rp-x:focus-visible span { box-shadow: 0 0 0 2px #fff, var(--ring); }
.rp-note { flex: 1; min-inline-size: 0; block-size: 156px; resize: none; }
.rp-disc { display: flex; gap: var(--sp-2); align-items: baseline; margin-block-start: var(--sp-2); }
.rp-cap { flex: 1; margin: 0; font-size: var(--fs-xs); color: var(--c-muted); line-height: var(--lh-body); }
.rp-left { flex: none; font-size: var(--fs-xs); color: var(--c-muted); }
.rp-msg:not(:empty) { margin-block-start: var(--sp-4); }
.rp-msg .note { margin: 0; }
.rp-send { margin-block-start: var(--sp-5); }
.rp-send:disabled:not([aria-busy="true"]) { opacity: .7; }
/* the full-size view: above the sheet, near-black in both modes */
.rp-viewer { position: fixed; inset: 0; z-index: 60; background: rgba(12, 10, 9, .94); display: flex; align-items: center; justify-content: center;
  padding: calc(env(safe-area-inset-top) + var(--sp-4)) calc(env(safe-area-inset-right) + var(--sp-4)) calc(env(safe-area-inset-bottom) + var(--sp-4)) calc(env(safe-area-inset-left) + var(--sp-4)); }
.rp-viewer img { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: var(--r-md); }
.rp-vx { position: absolute; inset-block-start: calc(env(safe-area-inset-top) + var(--sp-2)); inset-inline-end: calc(env(safe-area-inset-right) + var(--sp-2)); color: #fff; }
/* "Report this" at the inline end of a warn note; showFatal's sits centred under its button */
.note:has(a.rp-link) { align-items: center; }
a.rp-link { flex: none; display: inline-flex; align-items: center; min-block-size: var(--tap); margin-block: calc(-1 * var(--sp-3)); color: inherit;
  font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; }
a.rp-link:focus-visible { outline: 2px solid currentColor; outline-offset: -6px; border-radius: var(--r-sm); }
.rp-fatal { margin-block-start: var(--sp-3); }
/* the explainer (#/report-help) */
.rh-line { margin: var(--sp-2) 0 0; font-size: var(--fs-md); color: var(--c-ink-2); }
.rh-demo { margin: var(--sp-6) 0 0; display: flex; flex-direction: column; align-items: center; }
.rh-frames { position: relative; inline-size: 176px; block-size: 343px; }
.rh-frame { inline-size: 176px; position: absolute; inset: 0; opacity: 0; transition: opacity var(--dur-2) var(--ease);
  border: 1px solid var(--c-border-strong); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-2); background: var(--c-bg); }
.rh-frame.on { opacity: 1; }
.rh-frame img { display: block; inline-size: 100%; block-size: auto; }
.rh-steps { list-style: none; margin: var(--sp-4) 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--sp-2); font-size: var(--fs-sm); color: var(--c-muted); }
.rh-steps li + li::before { content: '·'; margin-inline-end: var(--sp-2); }
.rh-steps li.on { color: var(--c-ink); font-weight: var(--fw-semibold); }
.rh-n { display: none; }
.rh-done { margin: var(--sp-6) 0 0; display: flex; justify-content: center; }
.rh-got { inline-size: auto; font-size: var(--fs-md); padding-inline: var(--sp-4); }
.rh-got:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); }
@media (prefers-reduced-motion: reduce) {
  .rh-demo { align-items: stretch; }
  .rh-frames { position: static; inline-size: auto; block-size: auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); }
  .rh-frame { position: static; opacity: 1; inline-size: auto; border-radius: 12px; }
  .rh-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-3); font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--c-ink); }
  .rh-steps li { display: flex; align-items: flex-start; gap: var(--sp-1); }
  .rh-steps li + li::before { content: none; }
  .rh-n { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 18px; block-size: 18px; border-radius: var(--r-pill);
    background: var(--c-brand-soft); color: var(--c-brand-strong); font-size: 11px; }
}

/* #273 Where and when (docs/design/issue-273/spec.md): onboarding step 3 and Profile share the block */
.vis-h { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-6) var(--sp-1) var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink-2); line-height: var(--lh-ui); }
.ob-screen .vis-h { margin-top: 0; }
.vis-h .i, .vis-f .i { width: 16px; height: 16px; }
.ob-desc { margin: 0 var(--sp-1); font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-body); }
/* 1.0.2 Stats: the Onboarding steps table (plain, numbers aligned to the end) */
.obs-t { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.obs-t th, .obs-t td { padding: var(--sp-1) 0; text-align: end; border-top: 1px solid var(--c-border); }
.obs-t thead th { border-top: 0; color: var(--c-muted); font-weight: var(--fw-medium); }
.obs-t th:first-child { text-align: start; }
.obs-t tbody th { font-weight: var(--fw-medium); color: var(--c-ink); }
.obs-x { margin: var(--sp-2) 0 0; font-size: var(--fs-sm); color: var(--c-ink-2); line-height: var(--lh-ui); }
.obs-tb { white-space: nowrap; }
.section-label.ww-h { font-size: var(--fs-md); color: var(--c-ink); margin-block: var(--sp-5) var(--sp-2); }
.wk-q { margin-block-start: var(--sp-5); }
.rrows { display: flex; flex-direction: column; }
.rrow { flex-direction: row; align-items: center; gap: var(--sp-3); min-height: 48px; font-size: var(--fs-md); font-weight: var(--fw-regular); cursor: pointer; }
.rrow + .rrow { border-block-start: 1px solid var(--c-border); }
.rrow input { flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border: 2px solid var(--c-border-strong); border-radius: 50%; cursor: pointer; }
.rrow input:checked { border-color: var(--c-brand); background: radial-gradient(circle, var(--c-brand) 0 5px, var(--c-surface) 5.5px); }
.rrow:has(input:checked) { font-weight: var(--fw-semibold); }
.wk-avail .note { margin: var(--sp-2) 0 0; font-weight: var(--fw-regular); }
.seats { display: flex; flex-direction: column; gap: var(--sp-2); }
.vis-f { display: flex; align-items: center; gap: 4px; margin-block-start: calc(-1 * var(--sp-1)); color: var(--c-ink-2); font-weight: var(--fw-medium); }

/* #279 consent checkbox on join (docs/design/issue-279/spec.md; components.md → Checkbox): a native box in a 44px target,
   a drawn 22px box centred in it, the label centred on its first line; the row pulls 11px into the start padding */
.consent { display: flex; align-items: flex-start; margin-inline-start: -11px; }
.cb { position: relative; flex: none; inline-size: 44px; block-size: 44px; }
.cb input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cb-box { position: absolute; inset-block-start: 11px; inset-inline-start: 11px; display: grid; place-items: center; inline-size: 22px; block-size: 22px; box-sizing: border-box; border: 2px solid var(--c-border-strong); border-radius: 6px; background: var(--c-surface); pointer-events: none; }
.cb-box .i { inline-size: 16px; block-size: 16px; stroke-width: 3; color: #fff; visibility: hidden; }
.cb input:checked + .cb-box { background: var(--c-brand); border-color: var(--c-brand); }
.cb input:checked + .cb-box .i { visibility: visible; }
.cb input:focus-visible + .cb-box { box-shadow: var(--ring); }
.cb input[aria-invalid="true"] + .cb-box { border-color: var(--c-danger); }
.cb input[aria-invalid="true"]:focus + .cb-box { box-shadow: var(--ring); }
.consent label { display: block; flex: 1; min-inline-size: 0; margin: 0; padding-block-start: calc((44px - 1lh) / 2); font-size: var(--fs-sm); font-weight: var(--fw-regular); color: var(--c-ink); line-height: var(--lh-body); cursor: pointer; }
.pn-link { color: var(--c-brand-strong); font-weight: var(--fw-semibold); text-decoration: underline 1px; text-underline-offset: 3px; white-space: nowrap; }
[dir="rtl"] .pn-link { text-underline-offset: .45em; }
.consent-hint { margin: 0; font-size: var(--fs-sm); color: var(--c-muted); line-height: var(--lh-body); }
/* #279 the privacy notice: short headed sections separated by hairlines, no cards */
.pv-sec { border-block-start: 1px solid var(--c-border); padding-block: var(--sp-4); }
.pv-sec h2 { font-size: var(--fs-md); margin: 0 0 var(--sp-1); }
.pv-sec p, .pv-sec ul { margin: 0; color: var(--c-ink-2); line-height: var(--lh-body); }
.pv-sec ul { padding-inline-start: var(--sp-5); }
.pv-sec li + li { margin-block-start: var(--sp-1); }
.pv-mail { color: var(--c-brand-strong); font-weight: var(--fw-semibold); }
/* #268 About Rafeeq, docs/design/issue-268/spec.md option A "Note" */
.ab-person { display: flex; align-items: center; gap: var(--sp-3); margin-block: var(--sp-4); }
.ab-person .avatar { width: 56px; height: 56px; }
.ab-who { display: grid; min-width: 0; }
.ab-name { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
.ab-sub { font-size: var(--fs-sm); color: var(--c-ink-2); }
.ab-tipblock p { font-size: var(--fs-md); }
.ab-tipblock p + p { margin-block-start: var(--sp-2); }
.ab-tip { display: inline-flex; width: auto; justify-content: flex-start; padding-inline: 0; font-size: var(--fs-md); color: var(--c-brand-strong); }
.ab-det { display: inline-flex; align-items: center; gap: var(--sp-1); font: inherit; font-weight: var(--fw-semibold); color: var(--c-brand-strong); text-decoration: underline; text-underline-offset: 3px; background: none; border: 0; padding-block: 12px; margin-block: -12px; padding-inline: 0; cursor: pointer; }
.ab-det:focus-visible { outline: none; box-shadow: var(--ring); }
.ab-fine p { font-size: var(--fs-sm); color: var(--c-muted); margin-block-start: var(--sp-2); }
.pv-ver { border-block-start: 1px solid var(--c-border); padding-block-start: var(--sp-4); margin: 0; font-size: var(--fs-sm); color: var(--c-muted); }
.pv-stat { margin: 0; }

/* #273 T1 privacy box (components.md → Privacy box (T1)): the one privacy pattern. Block layout, not flex or grid (#321:
   WebKit and a fieldset with a legend); the floated legend keeps the heading inside the tint */
.pbox { background: var(--c-info-soft); border: 0; border-radius: var(--r-md); padding: var(--sp-4); }
.pbox > legend { float: inline-start; inline-size: 100%; display: flex; align-items: center; gap: var(--sp-3); margin: 0 0 var(--sp-2); }
.pbox > legend + * { clear: both; }
.pbox-ic { inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--c-surface); color: var(--c-info-ink); display: grid; place-items: center; flex: none; }
.pbox-ic .i { width: 16px; height: 16px; }
.pbox-h h2 { margin: 0; font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: var(--lh-ui); }
.pbox-body { margin: 0 0 var(--sp-4); font-size: var(--fs-sm); color: var(--c-ink); line-height: var(--lh-body); }
.pbox > .field + label { margin-block-start: var(--sp-4); }
.pbox input, .pbox .cc-box { border-color: var(--c-muted); }
.pbox .cc-box input.cc { border: 0; }
.pbox-link { justify-content: flex-start; width: auto; padding-inline: 0; margin-block-start: var(--sp-2); }