/* Furniture Finder: the shared look (Phase 18A). Every page loads this before its own <style>.
   The rules behind these values are in DESIGN.md. Pages add layout; colours, type, spacing and the
   shared parts (buttons, chips, fields, panels, menus, toasts) come from here. */

:root {
  /* Colour: the room */
  --bg: #ffffff;            /* white page (Souq Pop, 2026-11-09) */
  --card: #ffffff;          /* panels, cards, fields */
  --ink: #161616;           /* text, and the chunky outlines */
  --muted: #5e5e5e;         /* secondary text (6.2:1 on white) */
  --line: #e8e2d4;          /* quiet dividers between rows (outlines use --edge) */
  --accent: #ff5a36;        /* coral: the one action colour, as a fill or outline (3.1:1 on white) */
  --accent-ink: #161616;    /* text on --accent: dark (6.0:1); white on coral is too faint */
  --accent-text: #c23312;   /* the accent as text: links, selected labels (5.6:1 on white) */
  --sun: #ffc738;           /* sunflower: the top bar and highlights (ink on it 11:1) */
  --edge: #161616;          /* the chunky outline on cards, buttons, chips and fields */
  --edge-w: 2px;

  /* Colour: meaning */
  --danger: #b3261e;        /* errors, sale prices, destructive actions */
  --ok: #2e7d32;            /* in stock, cheaper */
  --warn: #8a5a00;          /* needs attention */
  --warn-bg: #fff4dc;
  --mto: #6a4c93;           /* made to order */
  --sale: var(--danger);
  --err: var(--danger);

  /* Colour: fixed, same in light and dark */
  --white: #ffffff;         /* product photos sit on white; text on store badges */
  --black: #161616;         /* dark floating bars and toasts */
  --gray: #4a4843;          /* neutral badge */
  --paper: #ffffff;         /* the mood board is always paper, it exports as a picture */
  --paper-ink: #161616;
  --paper-muted: #6b6860;
  --paper-line: #e4e0d8;
  --guide: #e0245e;         /* snap guides on the board */
  --scrim: rgba(0, 0, 0, .35);
  /* Product photos (19): on a warm tile, with the photo's white background blended into it, so a grid of products
     from 33 stores reads as one room. Dark mode keeps white tiles (the blend only works on a light tile). */
  --photo-tile: #fff4de;
  --photo-blend: multiply;
  --card-face: transparent;          /* product cards have no box of their own in light mode */
  --card-edge: transparent;
  --card-inset: 2px;                 /* text lines up with the photo tile */
  --card-photo-radius: var(--radius);

  /* Type: one family. Latin uses the system face; Arabic letters use Thmanyah Sans (i18n.js). */
  --font: "FF Text", system-ui, -apple-system, "Segoe UI", sans-serif;      /* Tajawal: Arabic and Latin */
  --font-head: "FF Head", "FF Text", system-ui, sans-serif;                 /* Changa: headings and the wordmark */
  --fs-xs: 12px;            /* counts, fine print */
  --fs-sm: 14px;            /* labels, chips, secondary text */
  --fs-md: 16px;            /* body */
  --fs-lg: 18px;            /* card and panel titles */
  --fs-xl: 24px;            /* page titles */
  --fs-2xl: 30px;           /* empty-state headline */
  --lh: 1.45;

  /* Space: a 4 px grid */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;

  /* Shape */
  --r-sm: 10px;             /* small fields, tiles */
  --r-md: 14px;             /* menu rows, inputs */
  --radius: 18px;           /* cards, panels, menus */
  --r-lg: 22px;             /* dialogs */
  --r-pill: 999px;          /* buttons, chips, search */

  /* Depth: borders do most of the work; shadows only for things that float */
  --shadow-sm: 0 1px 4px rgba(0, 0, 0, .15);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, .08);
  --shadow-lg: 4px 4px 0 var(--edge);          /* menus: a hard sticker shadow */
  --shadow-pop: 3px 3px 0 var(--edge);         /* the primary button */
  --shadow-xl: 6px 6px 0 var(--edge);          /* dialogs */

  /* Motion (18F): short, ease-out for things entering, nothing moves on its own */
  --t-press: 120ms;         /* button press */
  --t-fast: 150ms;          /* menus, fades */
  --t-base: 200ms;          /* dialogs, toasts */
  --t-drawer: 280ms;        /* drawers and the phone sheet */
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --ease-drawer: cubic-bezier(.32, .72, 0, 1);

  color-scheme: only light;           /* light only, whatever the device is set to (the owner's choice) */

  /* Two journeys (DESIGN.md › System): semantic names. The older names above stay as the values; new parts use these,
     so a future appearance (or the increased-contrast one below) changes one place. */
  --surface: var(--bg);                    /* the page */
  --surface-raised: var(--card);           /* cards, panels, fields */
  --surface-sunken: #f5f1e8;               /* wells: tab tracks, segmented controls, empty previews (muted 5.8:1) */
  --text: var(--ink);
  --text-secondary: var(--muted);
  --separator: var(--line);                /* decorative dividers between groups */
  --field-line: var(--edge);               /* outlines that mark a control's edge */
  --accent-soft: #ffe9e2;                  /* selected rows and the current step (accent text on it 4.8:1) */
  --ok-soft: #e8f2e8; --ok-ink: #1f5e23; --warn-soft: var(--warn-bg); --danger-soft: #fbeceb;   /* ok-ink on ok-soft 6.8:1 */
  --focus-ring: 0 0 0 2px var(--surface-raised), 0 0 0 4px var(--accent);
  /* Controls: one height per size, so rows of buttons, fields and segments line up */
  --control-h: 40px;                       /* default: buttons, fields, segmented controls */
  --control-h-sm: 32px;                    /* dense rows (at least 24 px, WCAG 2.5.8) */
  --icon: 18px; --icon-sm: 16px;
  --fs-display: 34px;                      /* one per page: the project or room title */
  --measure: 68ch;                         /* readable line length for paragraphs */
  --page-max: 1200px;
  /* Translucent functional layer: only the top bar of the project and room workspace, never content */
  --glass-bg: rgba(255, 255, 255, .82);
  --glass-blur: saturate(1.4) blur(20px);
}

/* Increase contrast (system setting): darker secondary text and dividers, solid borders on every surface. */
@media (prefers-contrast: more) {
  :root { --muted: #3d3d3d; --line: #767676; --separator: #767676; --surface-sunken: #ece6d8; }
}


/* Script titles on mood boards (21C): Caveat for Latin letters, Aref Ruqaa for Arabic (both OFL, static/fonts/script).
   Downloaded only when a script title is shown. */
@font-face { font-family: "FF Script"; font-weight: 400; font-display: swap; src: url(/fonts/script/Caveat-Regular.ttf) format("truetype");
  unicode-range: U+0000-05FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "FF Script"; font-weight: 700; font-display: swap; src: url(/fonts/script/Caveat-Bold.ttf) format("truetype");
  unicode-range: U+0000-05FF, U+2000-206F, U+20A0-20CF; }
@font-face { font-family: "FF Script"; font-weight: 400; font-display: swap; src: url(/fonts/script/ArefRuqaa-Regular.ttf) format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "FF Script"; font-weight: 700; font-display: swap; src: url(/fonts/script/ArefRuqaa-Bold.ttf) format("truetype");
  unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
.script { font-family: "FF Script", "FF Arabic", system-ui, sans-serif; }

/* Souq Pop type (2026-11-09): Tajawal for text, Changa for headings. Both cover Arabic and Latin; both OFL
   (static/fonts/pop, from google/fonts). */
@font-face { font-family: "FF Text"; font-weight: 400; font-display: swap; src: url(/fonts/pop/Tajawal-Regular.ttf) format("truetype"); }
@font-face { font-family: "FF Text"; font-weight: 500; font-display: swap; src: url(/fonts/pop/Tajawal-Medium.ttf) format("truetype"); }
@font-face { font-family: "FF Text"; font-weight: 600 700; font-display: swap; src: url(/fonts/pop/Tajawal-Bold.ttf) format("truetype"); }
@font-face { font-family: "FF Text"; font-weight: 750 900; font-display: swap; src: url(/fonts/pop/Tajawal-ExtraBold.ttf) format("truetype"); }
@font-face { font-family: "FF Head"; font-weight: 200 800; font-display: swap; src: url(/fonts/pop/Changa-VF.ttf) format("truetype"); }
/* Hard sticker shadows fall towards the reading end: mirrored in Arabic. */
html[dir="rtl"] { --shadow-lg: -4px 4px 0 var(--edge); --shadow-pop: -3px 3px 0 var(--edge); --shadow-xl: -6px 6px 0 var(--edge); }
h1, h2, h3, .page-title, .section-title, .empty h2, .empty h3, dialog.sheet h2, .choice h3 { font-family: var(--font-head); }

/* Base */
*, *::before, *::after { box-sizing: border-box; }
/* Phones (18D, from the Mobile Native rules): no grey flash on tap (buttons give their own feedback below), no font
   inflation in landscape, and room for the notch in landscape (viewport-fit=cover on every page). */
html { -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; }
body { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
/* With a mouse, the page doesn't rubber-band; on touch screens pull-to-refresh keeps working. */
@media (pointer: fine) { html { overscroll-behavior: none; } }
/* Controls: no double-tap zoom delay, and a long press doesn't select the label. Text links stay selectable. */
button, .btn, .chip, [role="button"], [role="tab"], [role="menuitem"], [role="menuitemcheckbox"], label:has(> input[type="checkbox"]) {
  touch-action: manipulation; -webkit-user-select: none; user-select: none; }
a { touch-action: manipulation; }
/* Touch screens: fields at 16 px or more, or the phone zooms in when one is tapped. Zoom itself stays allowed. */
@media (pointer: coarse) { input, select, textarea { font-size: max(16px, 1em) !important; } }
/* Press feedback (18F): buttons give a little when pressed, on touch and with a mouse. Menu rows and tabs don't. */
@media (prefers-reduced-motion: no-preference) {
  :where(button, .btn, .chip):not([role="menuitem"], [role="menuitemcheckbox"], [role="tab"], :disabled) {
    transition: transform var(--t-press) var(--ease-out); }
  :where(button, .btn, .chip):not([role="menuitem"], [role="menuitemcheckbox"], [role="tab"], :disabled):active { transform: scale(.97); }
}
/* Reduced motion: nothing moves or loops; fades and colour changes stay (they don't move anything). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; scroll-behavior: auto !important;
    transition-property: opacity, color, background-color, border-color !important; }
}
/* Menus and dialogs that scroll don't scroll the page behind them. */
[role="menu"], [role="dialog"], .menu, .dialog { overscroll-behavior: contain; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--bg); color: var(--ink); font: var(--fs-md)/var(--lh) var(--font); }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--accent-text); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.muted { color: var(--muted); }
.spacer { flex: 1; }
.num { font-variant-numeric: tabular-nums; }
/* Read by screen readers, not shown (18E). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* "Skip to results": hidden until reached with the keyboard. */
.skip { position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--accent); color: var(--accent-ink); font-weight: 600; text-decoration: none; }
.skip:focus-visible { top: 12px; }

/* The logo (static/brand/, made by scripts/brand/make_logo.py): the dot of the i is a coral tile */
.logo { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-head); font-weight: 800; font-size: 21px; white-space: nowrap; color: inherit; text-decoration: none; }
.logo-img { display: block; height: 42px; width: auto; }      /* the name with the "صمّم لي" tag, in both languages */

/* Buttons: pill shaped; one primary per area */
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--r-pill);
  border: var(--edge-w) solid var(--edge); background: var(--card); color: var(--ink); font-size: 15px; font-weight: 700;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--surface-sunken); } }
.btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--edge); box-shadow: var(--shadow-pop); }
@media (hover: hover) and (pointer: fine) { .btn.primary:hover { background: var(--accent); filter: brightness(1.05); } }
.btn.on { background: var(--sun); }
.btn.danger { color: var(--danger); }
.btn.small { padding: 5px 12px; font-size: var(--fs-sm); }
.btn:disabled { opacity: .5; cursor: default; }

/* Chips: filters and quick choices */
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--r-pill);
  border: var(--edge-w) solid var(--edge); background: var(--card); color: var(--ink); font-size: var(--fs-sm); font-weight: 500; }
.chip.on { border-color: var(--edge); background: var(--accent); color: var(--accent-ink); font-weight: 700; }

/* Fields */
.input { padding: 9px 12px; border: var(--edge-w) solid var(--edge); border-radius: var(--r-md); background: var(--card);
  color: var(--ink); min-width: 0; }
.input:focus-visible { outline-offset: 1px; }

/* Panels and section labels: sentence case, never all caps */
.panel { background: var(--card); border: var(--edge-w) solid var(--edge); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
.label { font-size: var(--fs-sm); font-weight: 650; color: var(--muted); margin: 0 0 var(--s2); }

/* Floating menus and dialogs */
.menu { background: var(--card); border: var(--edge-w) solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 6px; }
.dialog { background: var(--card); color: var(--ink); border: var(--edge-w) solid var(--edge); border-radius: var(--r-lg); padding: 20px; box-shadow: var(--shadow-xl); }

/* A product photo on its tile (19): <div class="photo-tile"><img …></div> */
.photo-tile { background: var(--photo-tile); border-radius: var(--radius); overflow: hidden; display: grid; place-items: center; }
.photo-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: var(--photo-blend); }


/* ======================================================================== Two journeys: shared parts
   Every page of both journeys builds from these (DESIGN.md › System). One primary action per area. */

/* Fields mark their edge at 3:1; buttons keep their quiet border (their label and fill carry them). */
.input, select.input, textarea.input { border-color: var(--field-line); min-height: var(--control-h); }
.btn { min-height: var(--control-h); justify-content: center; }
.btn.small { min-height: var(--control-h-sm); }
.btn .ic, .chip .ic { width: var(--icon-sm); height: var(--icon-sm); }
.btn.quiet { border-color: transparent; background: transparent; }
@media (hover: hover) and (pointer: fine) { .btn.quiet:hover { background: var(--surface-sunken); border-color: transparent; } }

/* The page: a readable column with a title row. */
.page { max-width: var(--page-max); margin: 0 auto; padding: var(--s5) var(--s4) 64px; display: flex; flex-direction: column; gap: var(--s5); }
.page-head { display: flex; align-items: flex-start; gap: var(--s4); flex-wrap: wrap; }
.page-head > div:first-child { flex: 1 1 280px; min-width: 0; }
.page-title { margin: 0; font-size: var(--fs-display); line-height: 1.15; font-weight: 700; letter-spacing: -.01em; overflow-wrap: anywhere; }
.page-sub { margin: var(--s1) 0 0; color: var(--text-secondary); font-size: var(--fs-md); }
.section-title { margin: 0 0 var(--s3); font-size: var(--fs-lg); font-weight: 650; }
.lede { margin: 0; color: var(--text-secondary); max-width: var(--measure); }

/* Cards: a surface with a border, no shadow (shadows are for what floats). A whole-card link gets one focus ring. */
.card { background: var(--surface-raised); border: var(--edge-w) solid var(--edge); border-radius: var(--radius); padding: var(--s4); min-width: 0; }
.card-link { color: inherit; text-decoration: none; display: block; }
.card-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }
@media (hover: hover) and (pointer: fine) { .card-link:hover { box-shadow: var(--shadow-pop); } }
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: var(--s4); }

/* Media: stable aspect ratios so cards never jump while pictures load. */
.media { aspect-ratio: 4 / 3; background: var(--photo-tile); border-radius: var(--r-sm); overflow: hidden; display: grid; place-items: center; }
.media img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: var(--photo-blend); }
.media.collage { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 2px; background: var(--surface-sunken); }
.media.collage > * { width: 100%; height: 100%; background: var(--photo-tile); display: grid; place-items: center; overflow: hidden; }
.media .ph { color: var(--text-secondary); font-size: var(--fs-sm); text-align: center; padding: var(--s3); }

/* Badges: words first, colour second (never colour alone). */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-pill); font-size: var(--fs-xs);
  font-weight: 650; background: var(--surface-sunken); color: var(--text); white-space: nowrap; }
.badge.ok { background: var(--ok-soft); color: var(--ok-ink); }
.badge.warn { background: var(--warn-soft); color: var(--warn); }
.badge.danger { background: var(--danger-soft); color: var(--danger); }
.badge.accent { background: var(--accent-soft); color: var(--accent-text); }

/* Segmented control: a choice between two to five closely related values. Built on radio inputs or aria-pressed
   buttons, so keyboard and screen readers get the standard behaviour. */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: var(--r-pill); background: var(--surface-sunken); min-height: var(--control-h); }
.seg > button, .seg > a, .seg > label { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 64px;
  padding: 0 14px; border: 0; border-radius: var(--r-pill); background: none; color: var(--text-secondary); font-size: 14px; font-weight: 600;
  text-decoration: none; cursor: pointer; }
.seg.small { min-height: var(--control-h-sm); } .seg.small > * { min-width: 0; padding: 0 10px; font-size: var(--fs-sm); }
.seg > [aria-pressed="true"], .seg > [aria-current], .seg > label:has(input:checked) { background: var(--sun); color: var(--text);
  box-shadow: inset 0 0 0 var(--edge-w) var(--edge); }
.seg > label input { position: absolute; opacity: 0; pointer-events: none; }
.seg > label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Room tabs: links between the room's three views (each has its own address, so Back and new tabs work). */
.tabs { display: flex; gap: var(--s1); border-bottom: 1px solid var(--separator); overflow-x: auto; scrollbar-width: none; }
.tabs a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 var(--s3); color: var(--text-secondary);
  font-weight: 600; font-size: 15px; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a[aria-current="page"] { color: var(--text); border-bottom: 3px solid var(--accent); }
@media (hover: hover) and (pointer: fine) { .tabs a:hover { color: var(--text); } }
.tabs .badge { font-weight: 600; }

/* Steps: the journey's progress. A list in order; each step says its state in words (sr and visible). */
.steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s2); counter-reset: step; }
.steps-list li { counter-increment: step; }
.steps-list a, .steps-list .step { display: flex; gap: var(--s2); align-items: flex-start; padding: var(--s3); border-radius: var(--r-md);
  border: 1px solid var(--separator); background: var(--surface-raised); color: var(--text); text-decoration: none; height: 100%; }
.steps-list .dot { flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-xs);
  font-weight: 700; border: 1.5px solid var(--field-line); color: var(--text-secondary); background: var(--surface-raised); }
.steps-list .dot::before { content: counter(step); }
.steps-list [data-state="done"] .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.steps-list [data-state="done"] .dot::before { content: "✓"; }
.steps-list [data-state="stale"] .dot { border-color: var(--warn); color: var(--warn); }
.steps-list [data-state="stale"] .dot::before { content: "!"; }
.steps-list [data-state="populated"] .dot, .steps-list [data-state="visited"] .dot { border-color: var(--accent-text); color: var(--accent-text); }
.steps-list [aria-current="step"] { border-color: var(--edge); background: var(--accent-soft); }
.steps-list b { display: block; font-size: 14px; font-weight: 650; }
.steps-list small { display: block; color: var(--text-secondary); font-size: var(--fs-xs); }

/* Meter: a budget or a count against its whole. The number is always written next to it. */
.meter { height: 6px; border-radius: 3px; background: var(--surface-sunken); overflow: hidden; }
.meter > i { display: block; height: 100%; background: var(--accent); }
.meter.over > i { background: var(--danger); }

/* Notices: status in the page, next to what it is about (not alerts). */
.notice { display: flex; gap: var(--s3); align-items: flex-start; padding: var(--s3) var(--s4); border-radius: var(--r-md);
  background: var(--surface-sunken); color: var(--text); }
.notice.warn { background: var(--warn-soft); } .notice.ok { background: var(--ok-soft); }
.notice > div { flex: 1; min-width: 0; } .notice p { margin: 2px 0 0; color: var(--text-secondary); font-size: var(--fs-sm); }
.notice .btn { flex: none; }
@media (max-width: 560px) { .notice { flex-wrap: wrap; } }

/* Empty states say what goes here and offer the action that fills it. */
.empty { text-align: center; padding: var(--s6) var(--s4); display: flex; flex-direction: column; align-items: center; gap: var(--s3); }
.empty h2, .empty h3 { margin: 0; font-size: var(--fs-lg); }
.empty p { margin: 0; color: var(--text-secondary); max-width: 46ch; }

/* Rows: a list of things with actions on the trailing side. */
.rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rows > li { display: flex; gap: var(--s3); align-items: center; padding: var(--s3) 0; border-bottom: 1px solid var(--separator); min-width: 0; }
.rows > li:last-child { border-bottom: 0; }
.rows .grow { flex: 1; min-width: 0; }
.rows .thumb { width: 56px; height: 56px; flex: none; }
.rows .title { font-weight: 600; overflow-wrap: anywhere; }
.rows .meta { color: var(--text-secondary); font-size: var(--fs-sm); }
@media (max-width: 560px) { .rows > li { flex-wrap: wrap; } .rows .actions { flex-basis: 100%; justify-content: flex-end; } }
.actions { display: flex; gap: var(--s2); align-items: center; flex-wrap: wrap; }

/* Choice cards: the two journeys on first use, and other one-of-two decisions. Real radio-like buttons. */
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s4); }
.choice { text-align: start; display: flex; flex-direction: column; gap: var(--s2); padding: var(--s5); border-radius: var(--radius);
  border: var(--edge-w) solid var(--edge); background: var(--surface-raised); color: var(--text); cursor: pointer; font: inherit; }
.choice:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.choice[aria-pressed="true"] { background: var(--accent-soft); box-shadow: var(--shadow-pop); }
@media (hover: hover) and (pointer: fine) { .choice:hover { box-shadow: var(--shadow-pop); } }
.choice h3 { margin: 0; font-size: var(--fs-lg); }
.choice p { margin: 0; color: var(--text-secondary); font-size: 14px; }
.choice ol { margin: var(--s1) 0 0; padding-inline-start: 1.2em; color: var(--text-secondary); font-size: var(--fs-sm); }
.choice .ic { width: 28px; height: 28px; color: var(--accent-text); }

/* The workspace bar: the one translucent surface (navigation over scrolling content). Text on it stays at full
   contrast because the fallback below is opaque whenever blur is missing, transparency is reduced or contrast is
   raised. Never used for content, forms, product cards, BOQs or drawings. */
.glassbar { position: sticky; top: 0; z-index: 30; background: var(--surface); border-bottom: 1px solid var(--separator); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glassbar { background: var(--glass-bg); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more), (forced-colors: active) {
  .glassbar { background: var(--surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Dialog (native <dialog>): one short task, an obvious way out. */
dialog.sheet { border: var(--edge-w) solid var(--edge); padding: 0; border-radius: var(--r-lg); background: var(--surface-raised); color: var(--text);
  box-shadow: var(--shadow-xl); width: min(480px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); }
dialog.sheet::backdrop { background: var(--scrim); }
dialog.sheet form, dialog.sheet .sheet-body { padding: var(--s5); display: flex; flex-direction: column; gap: var(--s3); }
dialog.sheet h2 { margin: 0; font-size: var(--fs-lg); }
dialog.sheet label { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-sm); font-weight: 600; }
dialog.sheet .row-end { display: flex; justify-content: flex-end; gap: var(--s2); margin-top: var(--s2); flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  dialog.sheet[open] { animation: ff-rise var(--t-base) var(--ease-out); }
}
@keyframes ff-rise { from { opacity: 0; transform: translateY(6px) scale(.98); } }

/* Live region for short confirmations ("Saved to Living room"). Read by screen readers; shown as a toast. */
.toast-live { position: fixed; inset-inline: 0; bottom: 20px; display: flex; justify-content: center; pointer-events: none; z-index: 95; }
.toast-live > div { pointer-events: auto; display: flex; gap: var(--s3); align-items: center; padding: 10px 16px; border-radius: var(--r-pill);
  background: var(--black); color: var(--white); font-size: 14px; box-shadow: var(--shadow-lg); max-width: calc(100vw - 32px); }
.toast-live a, .toast-live button { color: var(--white); font-weight: 650; background: none; border: 0; text-decoration: underline; cursor: pointer; }

/* Windows high contrast / forced colours: keep every edge and the current step visible. */
@media (forced-colors: active) {
  .card, .seg, .choice, .steps-list a, .badge, .notice, .tabs a[aria-current="page"] { border: 1px solid CanvasText; }
  .seg > [aria-pressed="true"], .steps-list [aria-current="step"] { outline: 2px solid Highlight; }
}