/* DefiniLine stylesheet
   ---------------------------------------------------------------------------
   Conventions that keep the site accessible:
   - All directional spacing uses CSS logical properties, so the Hebrew (RTL)
     and English (LTR) layouts come from the same rules.
   - Colour comes only from custom properties, redefined per theme. Every
     foreground/background pair used for text meets 4.5:1 (3:1 for large text
     and UI component boundaries) in light, dark and high-contrast themes.
   - Nothing is sized in viewport units for text, so browser zoom and the
     text-size setting both work; layout reflows down to 320px with no
     horizontal scrolling.
   - Interactive targets are at least 24x24 CSS px (WCAG 2.2 SC 2.5.8); most
     are 44px tall.
   --------------------------------------------------------------------------- */

/* ---------- tokens: the site's own look, black and copper (the default) ----
   The page is black, so copper is the only colour on it and has to carry
   links, buttons, the logo mark and the focus ring at once. It is lightened
   from the logo's mid-tone until body-size link text clears 4.5:1 on black,
   and a filled copper button takes near-black text rather than white, so the
   button is one bright shape instead of two fighting each other.

   This is the site's look, not a night mode: nothing here follows the
   operating system's prefers-color-scheme. Anyone who wants a light page
   chooses it in the accessibility panel, which pins data-theme="light".
   --------------------------------------------------------------------------- */
:root {
  /* Say the page is dark, so the browser's own chrome - scrollbars, select
     menus, date pickers, spin buttons - comes back dark with it instead of
     punching white holes in a black page. */
  color-scheme: dark;

  --bg: #000000;
  --bg-alt: #0b0a09;
  --surface: #121110;
  --surface-alt: #1b1917;
  /* Warm off-white, not #ffffff: pure white on pure black glares and smears
     the letter edges, and a copper-leaning white sits with the brand. */
  --text: #f4eee7;
  --text-muted: #b6ada3;
  /* --border is decoration: card edges and footer rules, kept quiet so the
     page still reads as black. Every boundary that identifies a control -
     inputs, the dropzone, status pills - uses --border-strong instead, which
     is the token that has to clear 3:1 (WCAG 2.2, 1.4.11). */
  --border: #3a3531;
  --border-strong: #70685f;
  /* Copper, from the logo. 8.7:1 on the page, 7.8:1 on a card. */
  --primary: #e2954f;
  --primary-strong: #f2b67e;
  --primary-contrast: #1a0d02;
  --accent-soft: #1b1108;
  --danger: #ff9d92;
  --danger-soft: #2a100d;
  --success: #6fdc9e;
  --success-soft: #07200f;
  /* Yellow-gold, not amber: the brand is copper, and "needs manual review"
     has to read as a flag rather than as brand chrome. */
  --warning: #ead582;
  --warning-soft: #251e06;
  --info-soft: #0e1318;
  --focus: #f2b67e;
  --focus-outer: #000000;
  /* A drop shadow is invisible against black, so depth comes from the
     surface being lighter than the page. The shadow is left in only to stop
     a panel from merging into whatever it covers. */
  --shadow: 0 1px 2px rgba(0, 0, 0, .9), 0 8px 24px rgba(0, 0, 0, .7);
  /* The wash behind the accessibility panel and the lightbox. */
  --scrim: rgba(0, 0, 0, .78);

  --font-body: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans Hebrew", sans-serif;
  --font-mono: "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --radius: 10px;
  --radius-sm: 6px;
  --shell: 72rem;
  --shell-narrow: 46rem;
  --space: 1rem;
  --line: 1.65;
  --transition: 160ms ease;
}

/* data-theme="dark" is what :root already is, so it needs no block of its
   own. The option stays in the panel so the choice can be pinned rather
   than inherited, and so it keeps working if the default ever moves. */

/* ---------- light, for anyone who asks for it in the panel ---------- */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f2f5f9;
  --surface: #ffffff;
  --surface-alt: #f7f9fc;
  --text: #16202c;
  --text-muted: #46566a;
  --border: #c7d2de;
  /* Darkened from #8d9db0, which was 2.77:1 on white and so missed the 3:1
     this file and the accessibility statement both promise for the edge of a
     control. 3.4:1 now, and 3.2:1 on the off-white surface. */
  --border-strong: #7f8c9e;
  /* The same copper, darkened instead of lightened: 5.7:1 on white. */
  --primary: #9a4f12;
  --primary-strong: #7e3f0c;
  --primary-contrast: #ffffff;
  --accent-soft: #faf0e7;
  --danger: #b3261e;
  --danger-soft: #fdecea;
  --success: #1a6b3c;
  --success-soft: #e7f4ec;
  --warning: #6b6000;
  --warning-soft: #fbf6cf;
  --info-soft: #eef3f8;
  --focus: #9a4f12;
  --focus-outer: #ffffff;
  --shadow: 0 1px 2px rgba(16, 32, 48, .08), 0 8px 24px rgba(16, 32, 48, .06);
  --scrim: rgba(8, 16, 24, .55);
}

/* ---------- high contrast (black on white text, yellow links) ---------- */
:root[data-theme="contrast"] {
  color-scheme: dark;
  --bg: #000000;
  --bg-alt: #000000;
  --surface: #000000;
  --surface-alt: #0d0d0d;
  --text: #ffffff;
  --text-muted: #ffffff;
  --border: #ffffff;
  --border-strong: #ffffff;
  --primary: #ffe95c;
  --primary-strong: #fff7b0;
  --primary-contrast: #000000;
  --accent-soft: #000000;
  --danger: #ff9e94;
  --danger-soft: #000000;
  --success: #87f0ae;
  --success-soft: #000000;
  --warning: #ffd479;
  --warning-soft: #000000;
  --info-soft: #000000;
  --focus: #ffe95c;
  --focus-outer: #000000;
  --shadow: none;
  --scrim: rgba(0, 0, 0, .9);
}

/* ---------- the operating system asked for more contrast ----------
   prefers-contrast is not prefers-color-scheme. One is a request for a
   different look, which this site declines because black IS its look; the
   other is somebody telling their machine they cannot read low-contrast
   text, and that is a need rather than a preference.

   So it is honoured, but by strengthening the black and copper rather than
   by swapping in the high-contrast theme. Somebody who turned the setting on
   asked to be able to read the page, not to be moved to yellow-on-black; the
   panel is still there for anyone who wants that. Scoped to a page with no
   data-theme, so an explicit choice in the panel always wins. */
@media (prefers-contrast: more) {
  :root:not([data-theme]) {
    --bg-alt: #000000;
    --surface: #0a0a0a;
    --surface-alt: #121212;
    --text: #ffffff;
    --text-muted: #e6e1db;
    /* The card edge stops being decoration and becomes a line you can see. */
    --border: #6c655d;
    --border-strong: #a99f94;
    --primary: #f6b878;
    --primary-strong: #ffd6ad;
    --primary-contrast: #000000;
    --accent-soft: #140c05;
    --danger: #ffb3aa;
    --danger-soft: #1a0806;
    --success: #8ef0b8;
    --success-soft: #04140a;
    --warning: #f5e49a;
    --warning-soft: #171203;
    --info-soft: #070b0e;
    --focus: #ffd6ad;
  }
  /* Underlined, so a link is not a colour difference alone. */
  :root:not([data-theme]) a { text-decoration: underline; }
  :root:not([data-theme]) .card,
  :root:not([data-theme]) .plan-card,
  :root:not([data-theme]) .alert,
  :root:not([data-theme]) .stat { border-width: 2px; }
}

:root[data-theme="contrast"] a { text-decoration: underline; }
:root[data-theme="contrast"] .card,
:root[data-theme="contrast"] .plan-card,
:root[data-theme="contrast"] .alert,
:root[data-theme="contrast"] .stat { border-width: 2px; }

/* Windows / browser forced-contrast mode: let the system colours win. */
@media (forced-colors: active) {
  .button, .card, .plan-card, .stat, .alert, .dropzone { border: 1px solid CanvasText; }
  .progress-fill { background: Highlight; forced-color-adjust: none; }
  :focus-visible { outline: 3px solid Highlight; }
}

/* ---------- user text-size preference (panel) ---------- */
:root[data-text-scale="115"] { font-size: 115%; }
:root[data-text-scale="130"] { font-size: 130%; }
:root[data-text-scale="150"] { font-size: 150%; }
:root[data-text-scale="175"] { font-size: 175%; }

:root[data-underlinelinks] a { text-decoration: underline; text-underline-offset: .18em; }
:root[data-readablefont] { --font-body: Verdana, Tahoma, "Noto Sans Hebrew", "Segoe UI", sans-serif; }
:root[data-readablefont] body { letter-spacing: .02em; }
:root[data-spacing] body {
  --line: 2;
  letter-spacing: .09em;
  word-spacing: .18em;
}
:root[data-spacing] p, :root[data-spacing] li { margin-block: 1.4em; }
:root[data-focusring] :focus-visible {
  outline: 4px solid var(--focus) !important;
  outline-offset: 3px !important;
  box-shadow: 0 0 0 8px color-mix(in srgb, var(--focus) 28%, transparent) !important;
}
:root[data-bigcursor], :root[data-bigcursor] * {
  /* 48px arrow drawn inline so no extra request is needed */
  cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M6 2l30 22H22l-6 18z" fill="%23000" stroke="%23fff" stroke-width="2.5"/></svg>') 4 2, auto;
}
:root[data-reducemotion] *,
:root[data-reducemotion] *::before,
:root[data-reducemotion] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: var(--line);
  text-align: start;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 { line-height: 1.25; margin-block: 0 .5em; font-weight: 700; text-wrap: balance; }
h1 { font-size: clamp(1.75rem, 1.4rem + 1.8vw, 2.6rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.35rem, 1.2rem + 1vw, 1.9rem); margin-block-start: 2.2em; }
h3 { font-size: 1.18rem; margin-block-start: 1.8em; }
h4 { font-size: 1.02rem; margin-block-start: 1.4em; }
p, li { max-width: 72ch; }
p { margin-block: 0 1em; }

a { color: var(--primary); text-decoration-thickness: from-font; text-underline-offset: .15em; }
a:hover { color: var(--primary-strong); text-decoration: underline; }

code, pre, .phase-id { font-family: var(--font-mono); font-size: .92em; }
code {
  background: var(--surface-alt);
  padding: .1em .35em;
  border-radius: var(--radius-sm);
  /* Reference ids and literals are Latin runs. Inside Hebrew text the
     punctuation at their edges would otherwise reorder against them, so each
     one is isolated the way <bdi> isolates a filename. */
  unicode-bidi: isolate;
}

abbr[title] { text-decoration: underline dotted; cursor: help; }

hr { border: 0; border-block-start: 1px solid var(--border); margin-block: 2.5rem; }

img, svg { max-width: 100%; height: auto; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Keyboard focus must never be hidden behind the header (WCAG 2.2 SC 2.4.11). */
:target, [id] { scroll-margin-block-start: 6rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: .5rem;
  inset-block-start: -4rem;
  z-index: 60;
  background: var(--surface);
  color: var(--primary);
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: .7rem 1.1rem;
  font-weight: 600;
  transition: inset-block-start var(--transition);
}
.skip-link:focus { inset-block-start: .5rem; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  /* Both insets, not the matching one: a phone turned on its side puts the
     notch on whichever edge it likes, and the reading direction flips which
     edge is which. The larger gutter on both sides is simply always right. */
  padding-inline: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
}
.shell.narrow, .narrow { max-width: var(--shell-narrow); }
.center { text-align: center; }
.muted { color: var(--text-muted); }

/* ---------- header ---------- */
.site-header {
  background: var(--surface);
  border-block-end: 1px solid var(--border);
  position: sticky;
  inset-block-start: 0;
  z-index: 40;
}
.header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
  padding-block: .6rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  color: var(--text);
  text-decoration: none;
  font-size: 1.05rem;
}
.brand:hover { color: var(--primary-strong); }
.brand-mark { color: var(--primary); display: inline-flex; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-tagline { font-size: .78rem; color: var(--text-muted); }

.main-nav { flex: 1 1 22rem; }
.main-nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .15rem .35rem;
  margin: 0;
  padding: 0;
}
.main-nav a {
  display: block;
  padding: .55rem .7rem;
  min-height: 44px;
  display: flex;
  align-items: center;
  border-radius: var(--radius-sm);
  color: var(--text);
  text-decoration: none;
  font-size: .97rem;
}
.main-nav a:hover { background: var(--surface-alt); color: var(--primary-strong); text-decoration: underline; }
.main-nav a[aria-current="page"] {
  color: var(--primary-strong);
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--primary);
}

.header-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.lang-switch {
  padding: .5rem .7rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .9rem;
}
.lang-switch:hover { background: var(--surface-alt); }

/* The floating accessibility button: on every page, at every width, and
   draggable. The stylesheet only says where it starts - a11y.js writes left
   and top once it has been moved, and clears them again on reset. */
.a11y-float {
  /* Shared with a11y.js, which writes --float-x and --float-y. */
  --float-size: 52px;
  --float-gap: 12px;
  position: fixed;
  /* Above the page and the sticky header (40), below the panel (55) and the
     wash behind it (50), so opening the panel puts it out of reach rather
     than leaving a live button floating over a modal. */
  z-index: 45;
  inset-block-end: max(1rem, env(safe-area-inset-bottom));
  inset-inline-end: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  inset-inline-start: auto;
  inset-block-start: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--float-size);
  height: var(--float-size);
  padding: 0;
  font: inherit;
  background: var(--accent-soft);
  color: var(--primary-strong);
  border: 2px solid var(--primary);
  border-radius: 50%;
  box-shadow: var(--shadow);
  cursor: grab;
  /* Without this, dragging it on a touch screen scrolls the page instead. */
  touch-action: none;
}
/* Once it has been dragged, its position is a fraction of the room it has to
   move in, and calc() turns that into pixels at layout time.

   Deliberately not pixels written by script. Pixels only describe the window
   they were measured in: a button parked in the corner of a desktop window,
   read back on a phone, is a point off the screen. Script could recompute
   them - but only if something tells it to, and a browser switching into its
   device preview fires no resize event, while a backgrounded tab runs no
   ResizeObserver at all. calc() needs nothing to fire. */
.a11y-float.is-placed {
  inset-inline-end: auto;
  inset-block-end: auto;
  inset-inline-start: calc(var(--float-gap) + var(--float-x) * (100% - var(--float-size) - var(--float-gap) * 2));
  inset-block-start: calc(var(--float-gap) + var(--float-y) * (100% - var(--float-size) - var(--float-gap) * 2));
}
.a11y-float:hover { background: var(--primary); color: var(--primary-contrast); }
.a11y-float.is-dragging { cursor: grabbing; }
.a11y-float svg { flex: none; }

/* ---------- the phone menu ---------- */
/* Wide screens: this wrapper is not a box at all, so the header lays out
   exactly as it did before it existed - brand, navigation, tools, one line. */
.site-menu { display: contents; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  padding: 0;
  font: inherit;
  color: var(--text);
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.nav-toggle:hover { color: var(--primary-strong); border-color: var(--primary); }
/* One button, two names: display:none takes the wrong one out of the
   accessible name as well as off the screen, so it announces what pressing
   it will now do rather than what it did last time. */
.nav-toggle-cross,
.nav-toggle[aria-expanded="true"] .nav-toggle-bars,
.nav-toggle[aria-expanded="true"] .nav-toggle-open-label,
.nav-toggle[aria-expanded="false"] .nav-toggle-close-label { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle-cross { display: inline; }

/* ---------- breadcrumb ---------- */
.breadcrumb { padding-block: .9rem 0; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; font-size: .9rem; }
.breadcrumb li + li::before { content: "/"; color: var(--text-muted); margin-inline-end: .4rem; }
.breadcrumb [aria-current="page"] { color: var(--text-muted); }

/* ---------- layout blocks ---------- */
main { display: block; }
main:focus { outline: none; }
.page { padding-block: 1.5rem 4rem; }
.page-head { margin-block-end: 2rem; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--primary-strong);
  margin-block-end: .4rem;
}
.lede { font-size: 1.12rem; color: var(--text-muted); max-width: 68ch; }
.meta-line { font-size: .9rem; color: var(--text-muted); }

.band { padding-block: 3rem; }
.band-alt { background: var(--bg-alt); }
.band-cta { background: var(--accent-soft); }

.hero { padding-block: 3rem 2rem; background: linear-gradient(180deg, var(--accent-soft), var(--bg)); }
.hero-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 60rem) { .hero-grid { grid-template-columns: 1.1fr .9fr; } }
.hero-note { font-size: .9rem; color: var(--text-muted); }
.hero-svg { margin: 0; }

.plan-svg { width: 100%; height: auto; }
.plan-svg .plan-cloud circle { fill: var(--primary); opacity: .55; }
.plan-svg .plan-walls rect,
.plan-svg .plan-walls path { fill: none; stroke: var(--text); stroke-width: 4; }
.plan-svg .plan-openings path { stroke: var(--bg); stroke-width: 5; }
.plan-svg .plan-arrow path { fill: none; stroke: var(--primary); stroke-width: 2.5; }
.plan-svg .plan-dims path { fill: none; stroke: var(--text-muted); stroke-width: 1.4; }
.plan-svg .plan-labels circle { fill: var(--primary); }
/* The illustration is a sequence - point cloud, arrow, plan - so it has to run
   with the reading direction, not against it. Mirroring is safe here and only
   here: the drawing is schematic and carries no text, and it is not the real
   floor plan, which is served as an artifact image and must never be flipped. */
[dir="rtl"] .plan-svg { transform: scaleX(-1); }

.cta-row { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }

/* ---------- buttons ---------- */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;
  padding: .65rem 1.3rem;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.button-primary { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.button-primary:hover { background: var(--primary-strong); border-color: var(--primary-strong); color: var(--primary-contrast); }
.button-secondary { background: var(--surface); color: var(--primary-strong); border-color: var(--primary); }
.button-secondary:hover { background: var(--accent-soft); color: var(--primary-strong); }
.button-danger { background: var(--surface); color: var(--danger); border-color: var(--danger); }
.button-danger:hover { background: var(--danger); color: var(--surface); }
.button[disabled] { opacity: .55; cursor: not-allowed; }

/* The Google sign-in button. Neutral rather than brand copper: it is a
   third party's button, and dressing it as ours would misrepresent where
   pressing it goes. The surface, text and border tokens carry it into dark
   mode and high contrast without a second rule set. */
.button-google {
  background: var(--surface);
  color: var(--text);
  border-color: var(--border);
  font-weight: 500;
  width: 100%;
}
.button-google:hover { background: var(--surface-alt); color: var(--text); }
/* A logo is a shape, not a direction, so it is never mirrored in Hebrew -
   only the gap between it and the label follows the reading order, which
   the flex `gap` on .button already does. */
.google-mark { flex: none; }

/* ---------- two-factor sign-in ---------- */
/* The QR keeps its own white background whatever the theme: a dark-mode
   inversion of a QR code is one some scanners refuse to read. */
.qr-holder {
  display: inline-block;
  padding: .75rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.qr { display: block; width: 100%; max-width: 220px; height: auto; }

/* The secret and the recovery codes are Latin runs that must not be
   reordered inside a Hebrew page, and are read character by character. */
.secret,
.recovery-codes code {
  font-family: var(--font-mono, ui-monospace, "SFMono-Regular", Consolas, monospace);
  font-size: 1.05rem;
  letter-spacing: .08em;
  unicode-bidi: isolate;
}
.recovery-codes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: .5rem .75rem;
  margin-block: 1rem;
  padding: 1rem;
  list-style: none;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* "or", with a rule either side of it. */
.auth-alt { margin-block: 1.75rem 0; }
.auth-alt-rule {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 0 1rem;
  color: var(--text-muted);
  font-size: .9rem;
}
.auth-alt-rule::before,
.auth-alt-rule::after {
  content: "";
  flex: 1;
  border-block-start: 1px solid var(--border);
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.icon-button:hover { background: var(--surface-alt); }

/* ---------- cards, lists, tables ---------- */
.card-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  box-shadow: var(--shadow);
}
.card h3 { margin-block-start: 0; }
.card p:last-child { margin-block-end: 0; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.steps > li { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.step-number {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  background: var(--primary); color: var(--primary-contrast);
  font-weight: 700;
  margin-block-end: .6rem;
}
.steps h3 { margin-block-start: 0; }

.checklist { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.checklist li {
  position: relative;
  padding-inline-start: 1.9rem;
  margin-block-end: .7rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .45em;
  width: 1.1rem; height: 1.1rem;
  background: var(--success);
  clip-path: polygon(14% 48%, 0 62%, 40% 100%, 100% 22%, 86% 8%, 38% 70%);
}
.checklist.warn li::before { background: var(--warning); clip-path: polygon(50% 0, 100% 100%, 0 100%); }

.legal-list { padding-inline-start: 1.3rem; }
.legal-list li { margin-block-end: .7rem; }

.def-list { margin: 0; }
.def-list dt { font-weight: 700; margin-block-start: 1.2rem; }
.def-list dd { margin: .3rem 0 0; padding-inline-start: 0; color: var(--text-muted); max-width: 72ch; }
.def-list.compact dt { margin-block-start: .8rem; }
.def-list.compact dd { color: var(--text); }

.tag {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--accent-soft);
  color: var(--primary-strong);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: .1rem .5rem;
  vertical-align: .15em;
}

.table-wrap { overflow-x: auto; margin-block: 1rem 1.5rem; border: 1px solid var(--border); border-radius: var(--radius); }
.table-wrap:focus-visible { outline: 3px solid var(--focus); }
.data-table { width: 100%; border-collapse: collapse; font-size: .97rem; }
.data-table caption {
  text-align: start;
  padding: .9rem 1rem;
  font-weight: 700;
  border-block-end: 1px solid var(--border);
  background: var(--surface-alt);
}
.data-table th, .data-table td {
  text-align: start;
  padding: .7rem 1rem;
  border-block-end: 1px solid var(--border);
  vertical-align: top;
}
.data-table thead th { background: var(--surface-alt); font-size: .9rem; }
.data-table tbody tr:last-child th, .data-table tbody tr:last-child td { border-block-end: 0; }
.data-table tbody th { font-weight: 600; }
.phase-id {
  display: inline-block;
  background: var(--accent-soft);
  color: var(--primary-strong);
  border-radius: var(--radius-sm);
  padding: 0 .35rem;
  margin-inline-end: .35rem;
  font-size: .8rem;
}

.note, .alert {
  border: 1px solid var(--border-strong);
  border-inline-start: 5px solid var(--primary);
  border-radius: var(--radius-sm);
  background: var(--info-soft);
  padding: 1rem 1.1rem;
  margin-block: 1.2rem;
}
.note p:last-child, .alert p:last-child, .alert ul:last-child { margin-block-end: 0; }
.alert h2, .alert h3 { margin-block-start: 0; font-size: 1.05rem; }
.alert-error { background: var(--danger-soft); border-inline-start-color: var(--danger); }
.alert-warning { background: var(--warning-soft); border-inline-start-color: var(--warning); }
.alert-success { background: var(--success-soft); border-inline-start-color: var(--success); }
.alert-info { background: var(--info-soft); border-inline-start-color: var(--primary); }
.placeholder {
  background: var(--warning-soft);
  border-block-end: 2px dotted var(--warning);
  color: var(--text);
  padding: 0 .2rem;
}

.toc {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin-block-end: 2rem;
  max-width: var(--shell-narrow);
}
.toc-title { font-size: .95rem; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.toc ol { margin: 0; padding-inline-start: 1.3rem; }
.toc li { margin-block-end: .3rem; }

.two-col { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 58rem) { .two-col { grid-template-columns: 1.3fr .7fr; } }

/* ---------- pricing ---------- */
.plan-grid { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); align-items: start; }
.plan-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  height: 100%;
}
.plan-card-featured { border: 2px solid var(--primary); }
.plan-badge {
  display: inline-block;
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: 999px;
  padding: .15rem .7rem;
  font-size: .78rem;
  font-weight: 700;
  margin: 0 0 .6rem;
}
.plan-card h3 { margin-block-start: 0; }
.plan-price { margin-block: .2rem .8rem; }
.plan-amount { font-size: 1.9rem; font-weight: 700; display: block; }
.plan-unit { color: var(--text-muted); font-size: .9rem; }
.plan-best { font-size: .95rem; color: var(--text-muted); }
.plan-includes-title { font-size: .9rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-muted); }
.plan-includes { margin: 0 0 1.2rem; padding-inline-start: 1.2rem; }
.plan-includes li { margin-block-end: .4rem; font-size: .97rem; }
.plan-cta { margin-block: auto 0; padding-block-start: .5rem; }
.plan-cta .button { width: 100%; }

.faq { max-width: var(--shell-narrow); }
.faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); margin-block-end: .6rem; background: var(--surface); }
.faq-item summary {
  cursor: pointer;
  padding: .9rem 1rem;
  min-height: 44px;
  font-weight: 600;
  display: flex;
  align-items: center;
}
.faq-item summary:hover { background: var(--surface-alt); }
.faq-body { padding: 0 1rem 1rem; }
.faq-body p { margin-block-end: 0; }

/* ---------- forms ---------- */
.field-group {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block-end: 1.5rem;
  background: var(--surface);
}
fieldset.field-group { min-width: 0; }
.field-group > legend, .field-legend {
  font-weight: 700;
  font-size: 1.05rem;
  padding-inline: .4rem;
  margin: 0 0 .6rem;
}
.field { display: flex; flex-direction: column; gap: .35rem; margin-block-end: 1rem; max-width: 34rem; }
.field label { font-weight: 600; }
.field-check { flex-direction: row; align-items: flex-start; gap: .6rem; max-width: 46rem; }
.field-check label { font-weight: 400; }
/* Lines up under the label rather than under the box: 1.4rem of checkbox and
   the .6rem gap that .field-check sets between them. */
.field-check-help { margin-block: -.6rem 1rem; padding-inline-start: 2rem; max-width: 34rem; }

/* Every text-entry type the templates use. password and search were missing
   here, so they fell through to the browser's own box: on a white page that
   passed unnoticed, on a black one it is a grey slab beside a black field,
   and it was also 21px tall, under the 24px target floor (WCAG 2.2, 2.5.8). */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], select, textarea {
  font: inherit;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: .6rem .7rem;
  min-height: 44px;
  width: 100%;
}
textarea { min-height: 9rem; resize: vertical; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); border-width: 2px; }

input[type="checkbox"], input[type="radio"] {
  width: 1.4rem; height: 1.4rem;
  min-width: 24px; min-height: 24px;
  accent-color: var(--primary);
  margin: .15rem 0 0;
  flex: none;
}

.field-error { color: var(--danger); font-weight: 600; }
.field-help { font-size: .92rem; color: var(--text-muted); }
.field-help ul { margin: .3rem 0 0; padding-inline-start: 1.2rem; }
.field-help-title { font-size: .95rem; margin: 0; color: var(--text); }
.required-mark { color: var(--danger); font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block: 1.5rem; }
/* .button's display would otherwise beat the hidden attribute (the upload's Cancel showed before any upload). */
.button[hidden] { display: none; }
.progress-step { margin-block: .25rem .5rem; }
.honeypot { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

.radio-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .3rem .7rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .8rem 1rem;
  margin-block-end: .7rem;
}
.radio-card:has(input:checked) { border-color: var(--primary); border-width: 2px; background: var(--accent-soft); }
.radio-card label { grid-column: 2; display: flex; flex-wrap: wrap; gap: .2rem .7rem; align-items: baseline; cursor: pointer; }
.radio-title { font-weight: 700; }
.radio-price { color: var(--text-muted); font-size: .92rem; }
.radio-desc { grid-column: 2; margin: 0; font-size: .94rem; color: var(--text-muted); }

.dropzone {
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: var(--surface-alt);
  text-align: center;
}
.dropzone.is-dragover { border-color: var(--primary); background: var(--accent-soft); }
.dropzone-hint { color: var(--text-muted); margin-inline: auto; }
.file-field { display: flex; justify-content: center; gap: .75rem; flex-wrap: wrap; margin-block: 1rem; }
/* The real input stays in the accessibility tree and keyboard order; the
   label above is its visible control. */
.file-field input[type="file"] {
  font: inherit;
  max-width: 100%;
}
.file-selected { font-weight: 600; margin-block-end: 0; }

.contact-form { max-width: 38rem; }

/* ---------- progress / status ---------- */
.progress {
  position: relative;
  height: 1.1rem;
  background: var(--surface-alt);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  overflow: hidden;
  max-width: 34rem;
}
.progress-fill {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--primary);
  transition: width var(--transition);
}
.progress-text { font-weight: 700; margin-block: .4rem 1rem; }
.progress-block { margin-block: 2rem; }

.status-block { margin-block-end: 2.5rem; }
.status-line { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; font-size: 1.05rem; }
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .25rem .8rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: .95rem;
  border: 2px solid var(--border-strong);
  background: var(--surface-alt);
}
.status-pill::before { content: "\25CF"; }
.status-pill-queued { border-color: var(--border-strong); color: var(--text); }
.status-pill-running { border-color: var(--primary); color: var(--primary-strong); background: var(--accent-soft); }
.status-pill-done { border-color: var(--success); color: var(--success); background: var(--success-soft); }
.status-pill-done::before { content: "\2713"; }
.status-pill-failed { border-color: var(--danger); color: var(--danger); background: var(--danger-soft); }
.status-pill-failed::before { content: "\2715"; }
.status-pill-needs_review { border-color: var(--warning); color: var(--warning); background: var(--warning-soft); }
.status-pill-needs_review::before { content: "\26A0"; }
.status-pill-deleted { color: var(--text-muted); }
.status-pill-deleted::before { content: "\2014"; }

.job-meta { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; color: var(--text-muted); font-size: .95rem; }

.phase-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .3rem; max-width: 34rem; }
.phase { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; }
.phase-state { flex: none; width: 1.4rem; text-align: center; font-weight: 700; }
.phase-done .phase-state { color: var(--success); }
.phase-current { font-weight: 700; }
.phase-current .phase-state { color: var(--primary); }
.phase-pending { color: var(--text-muted); }

.stat-grid { list-style: none; margin: 1.5rem 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
}
.stat-value { display: block; font-size: 1.7rem; font-weight: 700; line-height: 1.2; }
.stat-unit { font-size: .9rem; font-weight: 400; color: var(--text-muted); }
.stat-label { display: block; font-size: .9rem; color: var(--text-muted); margin-block-start: .2rem; }

.download-list { list-style: none; margin: 0 0 1rem; padding: 0; max-width: 34rem; }
.download-list li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem 0;
  border-block-end: 1px solid var(--border);
}
.download-list a { min-height: 24px; display: inline-flex; align-items: center; }
.download-size { color: var(--text-muted); font-size: .9rem; }

.log-details { margin-block: 2rem; }
.log-details summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.log {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  max-height: 22rem;
  overflow: auto;
  font-size: .85rem;
  direction: ltr;
  text-align: start;
}
.log:focus-visible { outline: 3px solid var(--focus); }

.danger-block {
  border: 1px solid var(--danger);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block-start: 3rem;
  background: var(--surface);
}
.danger-block h2 { margin-block-start: 0; font-size: 1.1rem; }

.side-note {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.25rem;
  margin-block-start: 2rem;
}
.side-note h2 { margin-block-start: 0; font-size: 1.05rem; }
.side-note p:last-child { margin-block-end: 0; }

/* ---------- accessibility panel ---------- */
.a11y-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 50;
}
.a11y-panel {
  position: fixed;
  z-index: 55;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(26rem, 100%);
  background: var(--surface);
  border-inline-start: 1px solid var(--border);
  box-shadow: var(--shadow);
  overflow-y: auto;
}
.a11y-panel[hidden], .a11y-backdrop[hidden] { display: none; }
.a11y-panel-inner { padding: 1.25rem 1.25rem 2.5rem; }
.a11y-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.a11y-panel-head h2 { margin: 0; font-size: 1.2rem; }
.a11y-panel-intro { font-size: .9rem; color: var(--text-muted); }
.a11y-group {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .9rem 1rem;
  margin-block-end: 1rem;
  min-width: 0;
}
.a11y-group legend { font-weight: 700; padding-inline: .35rem; }
.a11y-option { display: flex; align-items: flex-start; gap: .6rem; padding-block: .35rem; }
.a11y-option label { cursor: pointer; }
.a11y-stepper { display: flex; align-items: center; gap: .75rem; }
.stepper-button {
  min-width: 44px; min-height: 44px;
  font: inherit;
  font-weight: 700;
  background: var(--surface);
  color: var(--primary-strong);
  border: 2px solid var(--primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.stepper-button:hover { background: var(--accent-soft); }
.a11y-stepper output { font-weight: 700; min-width: 4rem; text-align: center; }
.a11y-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-block-start: 1.5rem; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--surface-alt);
  border-block-start: 1px solid var(--border);
  margin-block-start: 4rem;
  padding-block: 2.5rem 1.5rem;
}
.footer-grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.footer-head { font-size: 1rem; margin: 0 0 .6rem; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-block-end: .4rem; }
.site-footer a { min-height: 24px; display: inline-flex; align-items: center; }
.footer-note { font-size: .9rem; color: var(--text-muted); }
.footer-bottom {
  margin-block-start: 2rem;
  padding-block-start: 1.2rem;
  border-block-start: 1px solid var(--border);
  font-size: .9rem;
}
.footer-bottom p { margin-block-end: .4rem; }

/* ---------- print ---------- */
@media print {
  .site-header, .site-footer, .a11y-panel, .a11y-backdrop, .skip-link, .cta-row, .toc { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: .85em; }
  .table-wrap { overflow: visible; }
}

/* On a narrow screen a sticky header would eat most of the viewport, so it
   scrolls away there; focus is then never hidden behind it either. */
@media (max-width: 47.99rem) {
  .site-header { position: static; }
  .header-inner { padding-block: .5rem; }
  .main-nav a { padding: .45rem .55rem; font-size: .95rem; }
  :target, [id] { scroll-margin-block-start: 1rem; }
}

/* ---------- the menu folds away before the header has to wrap ----------
   Not the phone breakpoint: the brand, six links and two buttons need about
   60rem of header before they sit on one line, and a tablet held upright or
   a small laptop window is under that. Below it, with scripting, all of it
   folds into one button and the header stops at about 60px tall. Without
   scripting nothing here applies and the wrapping list stays - long, but
   complete, and nothing is hidden behind a button that cannot be pressed.
   nav.js carries the same width, and the two have to be changed together. */
@media (max-width: 59.99rem) {
  .has-js .site-header { position: sticky; }
  .has-js .nav-toggle { display: inline-flex; }
  .has-js .site-menu {
    display: none;
    /* Its own line under the brand, once it is open. */
    flex-basis: 100%;
  }
  .has-js .site-menu.is-open {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: .2rem;
    padding-block: .4rem .7rem;
  }
  .has-js .site-menu.is-open .main-nav { flex: none; }
  .has-js .site-menu.is-open .main-nav ul { flex-direction: column; }
  .has-js .site-menu.is-open .header-tools {
    margin-inline-start: 0;
    flex-wrap: wrap;
    padding-block-start: .5rem;
    border-block-start: 1px solid var(--border);
  }
}

/* ---------- payment ---------- */
.payment-block {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: 1.25rem;
  margin-block-start: 2.5rem;
}
.payment-block h2 { margin-block-start: 0; font-size: 1.1rem; }
.payment-block .status-line { margin-block-end: .8rem; }
.pay-form { margin-block: 1rem 0; }
.payment-block .faq-item { margin-block-start: 1rem; }

/* ---------- staff area ----------
   Shares the same tokens, components and focus rules as the public site, so
   accessibility work does not have to be done twice. */
.admin-bar {
  background: var(--surface);
  border-block-end: 2px solid var(--primary);
  padding-block: .6rem;
}
.admin-bar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; }
.admin-brand { font-weight: 700; text-decoration: none; color: var(--text); }
.admin-brand span {
  background: var(--primary); color: var(--primary-contrast);
  border-radius: var(--radius-sm); padding: .05rem .4rem; font-size: .75rem;
  text-transform: uppercase; letter-spacing: .06em; margin-inline-start: .35rem;
}
.admin-nav { flex: 1 1 20rem; }
.admin-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem; margin: 0; padding: 0; }
.admin-nav a {
  display: flex; align-items: center; min-height: 44px; padding: .4rem .7rem;
  border-radius: var(--radius-sm); color: var(--text); text-decoration: none;
}
.admin-nav a:hover { background: var(--surface-alt); }
.admin-nav a[aria-current="page"] { font-weight: 700; box-shadow: inset 0 -3px 0 var(--primary); }
.admin-signout { margin: 0; margin-inline-start: auto; }
.admin-main { padding-block: 1.5rem 3rem; }
.admin-login { max-width: 26rem; margin-inline: auto; padding-block-start: 3rem; }
.admin-filter { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: end; }
.admin-filter .field { margin-block-end: 0; max-width: 18rem; }
.admin-filter .form-actions { margin-block: 0; }
.admin-actions .admin-action {
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 1rem; margin-block-end: 1rem; background: var(--surface);
  display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: center;
}
.admin-actions .admin-action .field { margin-block-end: 0; }
.admin-actions .admin-action .field-help { flex: 1 1 16rem; margin: 0; }
.admin-footer { padding-block: 1.5rem 2.5rem; color: var(--text-muted); font-size: .9rem; }
code.break { word-break: break-all; }


/* ---------- paid features, on every signed-in page (base.html) ---------- */
.feature-bar { border-block-end: 1px solid var(--border); background: var(--bg-alt); }
/* The note of a grayed feature is placed against the whole row, not its icon, so it never runs off a phone's
   screen whichever icon (and in Hebrew, whichever side) it belongs to. */
.feature-list {
  position: relative;
  list-style: none;
  margin-block: 0;
  padding-block: .4rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.feature, .feature > summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .4rem .7rem;
  border-radius: var(--radius-sm);
  font-size: .9rem;
}
.feature-on {
  border: 1px solid var(--border-strong);
  color: var(--text);
  text-decoration: none;
}
.feature-on:hover, .feature-on[aria-current="page"] { background: var(--surface-alt); color: var(--primary-strong); }
.feature-on[aria-current="page"] { border-color: var(--primary); }
/* Grayed out: a dashed border and the muted colour, so it reads as unavailable without relying on colour alone. */
.feature-off { padding: 0; }
.feature-off > summary {
  border: 1px dashed var(--border);
  color: var(--text-muted);
  cursor: help;
  list-style: none;
}
.feature-off > summary::-webkit-details-marker { display: none; }
.feature-off .feature-icon { opacity: .55; }
.feature-off[open] > summary { background: var(--surface-alt); }
.feature-note {
  position: absolute;
  z-index: 20;
  /* Inside the row's gutter (.shell's padding) on both sides. */
  inset-inline-start: max(1rem, env(safe-area-inset-left), env(safe-area-inset-right));
  top: calc(100% - .2rem);
  max-width: min(24rem, calc(100% - 2 * max(1rem, env(safe-area-inset-left), env(safe-area-inset-right))));
  padding: .7rem .8rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  box-shadow: var(--shadow);
  font-size: .9rem;
}
.feature-note p { margin: 0 0 .4rem; }
.addon-list { list-style: none; padding: 0; display: grid; gap: .8rem; }
.addon-list li { display: flex; flex-wrap: wrap; gap: .3rem .8rem; align-items: center; }
.feature-jobs { list-style: none; padding: 0; display: grid; gap: .8rem; }
.feature-jobs li { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: baseline; }
@media (forced-colors: active) {
  .feature-off > summary { color: GrayText; border-color: GrayText; }
}

/* ---------- account area ---------- */
.account-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 44px;
  padding: .5rem .7rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: .9rem;
  color: var(--text);
}
.account-link:hover { background: var(--surface-alt); color: var(--primary-strong); }
.account-signout { margin-block-start: 2.5rem; }

.history-grid {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
}
.history-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
  box-shadow: var(--shadow);
}
.history-card article { display: flex; flex-direction: column; height: 100%; padding: 0 1.1rem 1.1rem; }
.history-card h3 { margin-block: .9rem .4rem; font-size: 1.05rem; word-break: break-word; }
.history-thumb {
  display: block;
  position: relative;
  margin-inline: -1.1rem;
  background: var(--surface-alt);
  border-block-end: 1px solid var(--border);
  text-decoration: none;
}
.history-thumb img { display: block; width: 100%; height: 13.5rem; object-fit: contain; padding: .5rem; }
.history-thumb-hint {
  position: absolute;
  inset-block-end: .5rem;
  inset-inline-end: .5rem;
  background: var(--primary);
  color: var(--primary-contrast);
  border-radius: var(--radius-sm);
  padding: .15rem .5rem;
  font-size: .78rem;
  font-weight: 600;
}
.history-thumb-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  margin-block: 0;
  color: var(--text-muted);
  font-size: .9rem;
}
.history-meta {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem .8rem;
  align-items: center;
  margin-block: 0 .4rem;
  font-size: .9rem;
  color: var(--text-muted);
}
.history-figures { font-weight: 600; margin-block: .2rem .6rem; }
.history-actions { margin-block: auto 0; padding-block-start: .8rem; }

/* ---------- lightbox ---------- */
.lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: var(--scrim);
  z-index: 60;
}
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 65;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.lightbox[hidden], .lightbox-backdrop[hidden] { display: none; }
.lightbox-inner {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  max-width: min(64rem, 100%);
  max-height: 100%;
  overflow: auto;
  padding: 1rem;
}
.lightbox-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lightbox-caption { margin: 0; font-weight: 600; }
/* The plan renders are dark ink on a transparent ground, so they keep a white
   plate on a black page: inverting a drawing is not the same drawing, and the
   dimensions on it have to stay readable. The same goes for .plan-figure img. */
.lightbox img {
  display: block;
  max-width: 100%;
  max-height: 70vh;
  margin-block: .8rem;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.lightbox-hint { margin: 0; font-size: .9rem; color: var(--text-muted); }
body.has-lightbox { overflow: hidden; }

.plan-limit {
  font-size: .9rem;
  color: var(--text-muted);
  border-block-start: 1px solid var(--border);
  padding-block-start: .6rem;
}
.plan-figure { margin: 1.5rem 0; }
.plan-figure img {
  display: block;
  width: 100%;
  height: auto;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.plan-figure figcaption {
  margin-block-start: .5rem;
  font-size: .92rem;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: space-between;
}

.field-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: var(--accent-soft);
  color: var(--primary-strong);
  border: 1px solid var(--primary);
  border-radius: 999px;
  padding: 0 .45rem;
  margin-inline-start: .35rem;
  vertical-align: .1em;
}

/* --- regional notice -----------------------------------------------------
   Built on .alert .alert-info, whose colours are already contrast-checked in
   all three themes; only spacing is added here. */
.region-notice { margin-block: 2rem; }
.region-notice h2 { font-size: 1.1rem; margin-block-start: 0; }
.region-notice .def-list { margin-block-end: .8rem; }
.region-notice p:last-child { margin-block-end: 0; }
.region-signal {
  border-inline-start: 3px solid var(--primary);
  padding-inline-start: .8rem;
}