/* ZIXAN Living Workforce — the public employer catalogue.

   Ported from the approved Claude Design file "ZIXAN Living Workforce —
   taxonomy revision" (2026-09-06). White / light cool-gray surfaces, cobalt
   actions, border-led hierarchy. The design specifies the Onest webfont; the
   site's CSP has no font origin and the platform ships no external fonts, so
   the system sans stack stands in for it (a documented difference).

   One DOM, four layouts: 1200+ is the three-column stage the design shows at
   1440; 1024–1199 folds the direction list into a chip strip; 768–1023 is one
   ordered column; below 768 the rail becomes a row list, the panel a bottom
   sheet and the request tray a fixed bar. Motion is a 250 ms cross-dissolve
   plus the stage cues, all cut under prefers-reduced-motion.

   2026-09-07. This page's palette used to be this page's own: twenty-odd
   --wf-* colours declared here, most of them the same values tokens.css now
   declares for the whole product. Two copies of one language is how four
   interfaces drifted apart in the first place, so the --wf-* names stay — the
   whole sheet reads them, and they say what a colour is FOR here — but each
   one is now an alias of the shared ramp. What the names mean is unchanged;
   where they come from is not. Nothing about the rendered page moves. */

:root {
  /* The metrics stay on :root, because they are what the media queries below
     re-declare and because they do not care what time of day it is. The
     colours are a different matter and live one element down; see the note
     over .wf-body. */
  --wf-gutter: 36px;
  --wf-tile-w: 168px;
  --wf-tile-h: 224px;
  --wf-tile-img: 134px;
  --wf-stage-h: 520px;
  color-scheme: light;
}

/* --- where the palette lives, and why it is not on :root -------------------
   The catalogue is committed to LIGHT. It is the one page whose design was
   signed off pixel by pixel, and a dark operating system must not repaint it.

   tokens.css flips its ramp under `prefers-color-scheme: dark` through
   `:root:not([data-theme="light"])`, which out-specifies a plain `:root` in
   this file whichever sheet loads last. This page cannot answer by putting
   `data-theme="light"` on <html> either: that attribute means "the reader
   chose", and nobody chose — writing it here would be a surface making a
   decision on a reader's behalf, which is the one thing the theme contract
   forbids.

   So the palette is declared one element DOWN, on the body. Custom properties
   inherit, and a declaration on <body> simply beats whatever <html> computed
   — no specificity contest at all, so nothing here has to out-weigh a
   selector in a file it does not own. Everything inside the body inherits it,
   including the shared surface switch in the header, which chrome.css paints
   from --surface / --border / --text and would otherwise arrive dark on a
   light page.

   The literal hexes below are not new colours: they are tokens.css's own
   light values, pinned. The aliases under them are re-declared rather than
   inherited because var() is substituted where a property is DECLARED — the
   ones on :root already resolved against <html>'s ramp. */
.wf-body {
  /* Said twice on purpose: on the root it decides the canvas and the
     scrollbars, here it decides the native controls inside the page. */
  color-scheme: light;

  --n-0:   #ffffff;
  --n-25:  #eef2f9;
  --n-50:  #f2f6fe;
  --n-100: #e2e9f6;
  --n-200: #cfdaf0;
  --n-400: #8593ab;
  --n-600: #5a6b85;
  --n-900: #0e1b33;
  --frame: #fbfcff;

  --brand:          #1a5cf0;
  --brand-hover:    #1246c8;
  --brand-ink:      #1246c8;
  --brand-soft:     #eef4ff;
  --brand-soft-2:   #dbe6fa;
  --brand-contrast: #ffffff;
  --danger:         #b3261e;
  --warn:           #9a5b00;
  --warn-soft:      #fff7e8;
  --warn-line:      #e8c98a;
  --success:        #0b7a54;
  --success-soft:   #eafaf3;
  --on-danger:      #ffffff;
  --focus:          #1a5cf0;

  /* What the shared chrome reads. Sizes, radii and the tap floor are
     theme-independent, so those still come down from tokens.css untouched. */
  --bg:            var(--n-25);
  --surface:       var(--n-0);
  --surface-2:     var(--n-50);
  --text:          var(--n-900);
  --muted:         var(--n-600);
  --border:        var(--n-200);
  --border-strong: #9aabcf;
  --brand-strong:  var(--brand-ink);

  /* Only the things that genuinely float. The page draws two of these
     itself — the search results and the dialog — and they were the same two
     values written out by hand before. */
  --elev-sticky: 0 1px 2px rgba(16, 44, 110, .06);
  --elev-2: 0 20px 50px -18px rgba(16, 44, 110, .35);
  --elev-3: 0 30px 80px -20px rgba(14, 27, 51, .5);

  /* --- the catalogue's own names, now aliases -----------------------------
     Where a line still carries a hex, the shared ramp has no equivalent for
     it: this design uses three ink steps and five line steps where the
     product's ramp declares two and three. Inventing tokens for them is not
     this file's decision to make, so they stay literal and stay named. */
  --wf-page:         var(--n-25);
  --wf-frame:        var(--frame);
  --wf-surface:      var(--n-0);
  --wf-ink:          var(--n-900);
  --wf-ink-2:        #2c3a55;   /* no token: between --n-900 and --n-600 */
  --wf-ink-3:        #3c4a63;   /* no token: the secondary ink of the design */
  --wf-muted:        var(--n-600);
  /* The approved design's #8593ab measures 3.11:1 on white — fine for an icon,
     below the floor for the small print it is actually used on (the direction
     note, the families line, the composer hint, the dialog note). Darkened to
     the nearest value that clears AA on the surface it sits on, which keeps a
     visible step below --wf-muted rather than collapsing into it. */
  --wf-subtle:       #66748f;
  --wf-line:         var(--n-100);
  --wf-line-2:       #dfe7f5;   /* no token: one step off --n-100 */
  --wf-line-3:       var(--n-200);
  --wf-line-4:       #eef2fa;   /* no token: the flattest fill in the design */
  --wf-row-line:     #f0f4fb;   /* no token: the hairline between result rows */
  --wf-cobalt:       var(--brand);
  --wf-cobalt-dark:  var(--brand-ink);  /* --brand-hover is the same value */
  --wf-cobalt-soft:  var(--brand-soft);
  --wf-cobalt-soft-2: var(--n-50);
  --wf-cobalt-soft-3: var(--brand-soft-2);
  --wf-amber:        var(--warn);
  --wf-amber-bg:     var(--warn-soft);
  --wf-amber-line:   var(--warn-line);
  --wf-amber-line-2: #f0debc;   /* no token: the softer amber rule */
  /* The one colour that MOVED, and deliberately. The design's green was
     #0e8a5f, which is 3.95:1 on its own #eafaf3 background — under the 4.5:1
     floor, and a hair off the product's --success besides. A status colour
     that is nearly the shared one is precisely the drift this token layer
     exists to end, so it takes the shared one and gains contrast (4.84:1).
     The difference is not visible; the audit result is. */
  --wf-green:        var(--success);
  --wf-green-bg:     var(--success-soft);
  /* The stacks resolve to the same faces on every platform this ships to —
     SF, Segoe UI, Roboto — so this is one type stack rather than two. The
     fallback is real, not decoration: this template links no other sheet by
     itself, so the page must still have a font if the shared layer is absent. */
  --wf-font: var(--font-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif);
  --wf-mono: var(--font-mono, ui-monospace, Menlo, Consolas, monospace);
}

/* Direction tints, keyed by data-dir so no inline styles are needed. Eight
   photographic backdrops with no counterpart in the shared ramp — they are
   the identity of a direction, not a step of the neutral scale, so they stay
   literal here. */
[data-dir="construction_infrastructure"] { --tint: #eee9df; }
[data-dir="manufacturing_industrial_maintenance"] { --tint: #e6ebf3; }
[data-dir="transport_warehousing"] { --tint: #e4edf6; }
[data-dir="hospitality_food_service"] { --tint: #efe9e2; }
[data-dir="agriculture_food_processing"] { --tint: #eaf0e4; }
[data-dir="healthcare_care"] { --tint: #e3eef5; }
[data-dir="facilities_support_services"] { --tint: #e9edec; }
[data-dir="energy_utilities"] { --tint: #edf0e0; }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
.wf-body {
  /* The catalogue is committed to light — it is the one page whose design was
     signed off, and a dark operating system must not repaint it. tokens.css
     flips the shared aliases under `:root[data-theme="dark"]`, which
     out-specifies a plain `:root`; declaring them HERE wins for everything
     inside <body>, which is the whole page including the shared surface
     switch. Values are the light ramp, quoted from tokens.css. */
  --surface: #ffffff;
  --surface-2: #f2f6fe;
  --text: #0e1b33;
  --muted: #5a6b85;
  --border: #cfdaf0;
  --border-strong: #9aabcf;
  --brand: #1a5cf0;
  --brand-ink: #1246c8;
  --brand-strong: #1246c8;
  --brand-soft: #eef4ff;
  --radius: 10px;
  --radius-sm: 8px;
  --focus: #1a5cf0;

  margin: 0;
  background: var(--wf-page);
  color: var(--wf-ink);
  font: 400 16px/1.55 var(--wf-font);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--wf-cobalt); }
a:hover { color: var(--wf-cobalt-dark); }
button, input, select { font-family: inherit; }
/* `summary` joined the list when the shared surface switch moved into this
   header: it is the one focusable control here that is neither a button nor a
   link, and a header where one control rings differently reads as broken. */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--wf-cobalt);
  outline-offset: 2px;
}
b { font-weight: 700; }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.01em; }
img { display: block; }
[hidden] { display: none !important; }

.wf-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.wf-skip {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 8px 12px; border-radius: 8px; background: var(--wf-cobalt); color: var(--brand-contrast); font-weight: 700;
}
.wf-skip:focus { top: 8px; color: var(--brand-contrast); }
.wf-short { display: none; }

/* --- keyframes (from the design, names kept) ------------------------------ */
@keyframes wfPop { from { transform: translateY(6px); } to { transform: none; } }
@keyframes wfFade { from { opacity: 0; } }
@keyframes wfCarInR { from { opacity: .25; transform: translateX(300px) scale(.52); filter: blur(1.4px); } 60% { filter: blur(0); } }
@keyframes wfCarInL { from { opacity: .25; transform: translateX(-300px) scale(.52); filter: blur(1.4px); } 60% { filter: blur(0); } }
@keyframes wfCarOutR { to { opacity: 0; transform: translateX(300px) scale(.5); filter: blur(1.6px); } }
@keyframes wfCarOutL { to { opacity: 0; transform: translateX(-300px) scale(.5); filter: blur(1.6px); } }
@keyframes wfNudgeR { from { opacity: 0; transform: translateX(52px); } }
@keyframes wfNudgeL { from { opacity: 0; transform: translateX(-52px); } }
@keyframes wfBeam { 0% { opacity: 0; transform: translateX(-50%) scaleY(.55); } 35% { opacity: .5; } 100% { opacity: 0; transform: translateX(-50%) scaleY(1.05); } }
@keyframes wfRing { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(.95); box-shadow: 0 0 40px 6px rgba(74,139,255,.5), inset 0 -8px 18px rgba(74,139,255,.35); } 100% { transform: translateX(-50%) scale(1); } }
@keyframes wfSheet { from { transform: translateY(40px); } }

/* --- top bar ---------------------------------------------------------------- */
/* The header rule is a shade lighter than --wf-line, which is what keeps the
   64px bar from reading as a boxed panel. No token carries it. */
/* The header establishes a stacking context above the page, which is the whole
   reason it needs a position at all. Without one, a menu opened from here is
   just an absolutely-positioned box at z-index 40 competing with `.wf-search`
   below it, which is also 40 — equal values, so DOM order decides, and the
   search row is later. The result was the search field's border drawn straight
   through the open "Каталог" panel. Raising the panel in the shared chrome
   would have fixed this page and floated every language menu over the console's
   modal scrim, which is also 40; the header is the thing that was actually
   missing. 50 sits above the search row and the mobile sheet backdrop, and
   below `.wf-overlay` at 60, because a modal covers the header. */
.wf-top {
  position: relative;
  z-index: 50;
  background: var(--wf-surface);
  border-bottom: 1px solid #e6ecf7;
}
.wf-top-inner {
  max-width: var(--maxw, 1520px); margin: 0 auto; padding: 0 var(--wf-gutter); height: 64px;
  display: flex; align-items: center; gap: 28px;
}
/* The mark itself is partials/brand.html now — gradient, radius and
   letterforms travel with the markup so every public surface shows one
   brand. This class stays as the header's layout hook. */
.wf-brand { color: var(--wf-ink); }
.wf-nav { display: flex; gap: 2px; font-size: 14px; font-weight: 600; }
.wf-nav a { padding: 8px 12px; border-radius: 8px; color: var(--wf-ink-3); text-decoration: none; }
.wf-nav a:hover { background: var(--wf-line-4); color: var(--wf-ink); }
.wf-nav a[aria-current="page"] { color: var(--wf-cobalt); background: var(--wf-cobalt-soft); }
.wf-top-actions { margin-left: auto; display: flex; gap: 8px; align-items: center; flex: none; }
/* The four hand-rolled buttons that stood here are partials/langquick.html
   now — the same control the candidate header uses, drawn by chrome.css.
   This page was the fourth hand-kept copy of a selector the design system
   already owned. Only the trailing gap is this sheet's business. */
.langquick { margin-right: 6px; }

/* --- buttons ---------------------------------------------------------------- */
.wf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: 40px; padding: 0 16px; border-radius: 9px; border: 1px solid var(--wf-line-3);
  background: var(--wf-surface); color: var(--wf-ink); font-weight: 700; font-size: 13.5px;
  text-decoration: none; cursor: pointer; white-space: nowrap; text-transform: uppercase; letter-spacing: .02em;
}
.wf-btn-ghost { text-transform: none; letter-spacing: 0; }
.wf-btn-primary { background: var(--wf-cobalt); border-color: var(--wf-cobalt); color: var(--brand-contrast); }
.wf-btn-primary:hover { background: var(--wf-cobalt-dark); border-color: var(--wf-cobalt-dark); color: var(--brand-contrast); }
.wf-btn-outline { border: 1.5px solid var(--wf-cobalt); color: var(--wf-cobalt); text-transform: none; letter-spacing: 0; font-size: 12.5px; }
.wf-btn-outline:hover { background: var(--wf-cobalt-soft); color: var(--wf-cobalt-dark); }
.wf-btn-block { width: 100%; }
.wf-btn[aria-disabled="true"], .wf-btn:disabled { opacity: .55; cursor: not-allowed; }
.wf-linkbtn { border: 0; background: none; color: var(--wf-muted); font-weight: 700; font-size: 13px; cursor: pointer; padding: 6px; }
.wf-label { font-size: 11.5px; font-weight: 700; color: var(--wf-muted); letter-spacing: .04em; text-transform: uppercase; }
.wf-h-overline { font-size: 12px; font-weight: 700; color: var(--wf-muted); letter-spacing: .05em; text-transform: uppercase; margin: 0 0 8px; }

/* --- page frame ------------------------------------------------------------- */
.wf-page { max-width: var(--maxw, 1520px); margin: 0 auto; background: var(--wf-frame); position: relative; min-height: 70vh; }

/* --- universal input -------------------------------------------------------- */
/* --- the title, and the claims under it ----------------------------------------
   The page shipped with a <title> and no <h1>. The strip below is four
   statements the code can back; the shape language is this page's own (12px
   radius, hairline, no shadow), not the 4px the exploration drew, because the
   rest of the catalogue is already soft-cornered. */
.wf-head { padding: 18px var(--wf-gutter) 0; }
.wf-h1 { margin: 0; font-size: 26px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; color: var(--wf-ink); }
.wf-trust-title, .wf-box-title { margin: 0 0 8px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--wf-subtle); }
.wf-search { padding: 18px var(--wf-gutter) 0; position: relative; z-index: 40; }
.wf-search-label { display: block; font-size: 12px; font-weight: 700; color: var(--wf-muted); margin-bottom: 6px; text-transform: uppercase; letter-spacing: .02em; }
.wf-search-box { position: relative; }
.wf-input {
  width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--wf-line-3); border-radius: 12px;
  font-size: 15.5px; background: var(--wf-surface); color: var(--wf-ink);
}
/* Placeholder sits one step lighter than --wf-subtle on purpose: it must
   read as an absent value, not as content. No token carries it. The focus
   halo is the focus colour at 15%, kept as rgba rather than color-mix so the
   ring still draws in the older Android WebViews this page is opened in. */
.wf-input::placeholder { color: #9aa7bd; }
.wf-input:focus { border-color: var(--wf-cobalt); outline: none; box-shadow: 0 0 0 3px rgba(26,92,240,.15); }
#wf-q { padding-right: 170px; }
#wf-q::-webkit-search-cancel-button { -webkit-appearance: none; }
.wf-interpret { position: absolute; right: 8px; top: 8px; height: 36px; padding: 0 14px; border-radius: 8px; font-size: 12.5px; }
.wf-results {
  position: absolute; left: 0; right: 0; top: 56px; background: var(--wf-surface); border: 1px solid var(--wf-line-2);
  border-radius: 12px; box-shadow: var(--elev-2); overflow: hidden;
}
.wf-result {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0;
  border-bottom: 1px solid var(--wf-row-line); background: var(--wf-surface); padding: 10px 14px; cursor: pointer; color: var(--wf-ink);
}
.wf-result:hover, .wf-result[aria-selected="true"] { background: var(--wf-cobalt-soft-2); }
.wf-result-kind { font-size: 11px; font-weight: 700; letter-spacing: .05em; color: var(--wf-subtle); width: 84px; flex: none; text-transform: uppercase; }
.wf-result-name { font-weight: 700; font-size: 14px; }
.wf-result-note { font-size: 12px; color: var(--wf-muted); }
.wf-result-chip { margin-left: auto; font-size: 11px; font-weight: 700; color: var(--wf-cobalt); background: var(--wf-cobalt-soft); border-radius: 6px; padding: 3px 8px; flex: none; }
.wf-result-unlisted { background: var(--wf-frame); border-bottom: 0; padding: 11px 14px; }
.wf-result-unlisted .wf-result-kind { color: var(--wf-amber); }
.wf-result-unlisted .wf-result-name { font-size: 13.5px; }
.wf-result-unlisted .wf-result-note { font-size: 11.5px; color: var(--wf-subtle); }
.wf-noscript { margin: 10px 0 0; font-size: 13px; color: var(--wf-muted); }

/* --- composer --------------------------------------------------------------- */
.wf-composer { margin-top: 10px; border: 1.5px solid var(--wf-cobalt); border-radius: 12px; background: var(--wf-surface); padding: 14px 16px; animation: wfPop .25s ease-out; }
.wf-composer-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wf-composer-title { font-weight: 800; font-size: 14px; }
.wf-composer-sum { font-size: 12.5px; color: var(--wf-muted); }
.wf-composer-lines { display: grid; gap: 6px; margin-top: 10px; }
.wf-cline { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wf-line); border-radius: 10px; padding: 7px 10px; flex-wrap: wrap; }
.wf-cline-state { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.wf-cline-state.is-ok { background: var(--wf-green-bg); color: var(--wf-green); }
.wf-cline-state.is-amb { background: var(--wf-amber-bg); color: var(--wf-amber); }
.wf-cline-state.is-un { background: var(--wf-line-4); color: var(--wf-muted); font-size: 11px; }
.wf-cline-label { font-weight: 700; font-size: 13.5px; }
.wf-cline-mean { font-size: 12px; color: var(--wf-amber); font-weight: 600; }
.wf-cline-opt { height: 28px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--wf-line-3); background: var(--wf-surface); font-size: 12px; font-weight: 700; cursor: pointer; color: var(--wf-ink); }
.wf-cline-opt:hover { border-color: var(--wf-cobalt); color: var(--wf-cobalt-dark); }
.wf-cline-qty { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wf-mini-step { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--wf-line-3); background: var(--wf-surface); font-size: 14px; cursor: pointer; color: var(--wf-cobalt); }
.wf-cline-n { min-width: 34px; text-align: center; font-weight: 800; font-size: 13.5px; }
.wf-remove { border: 0; background: none; color: var(--wf-subtle); font-size: 11.5px; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 6px 4px; }
.wf-composer-foot { display: flex; gap: 8px; margin-top: 12px; align-items: center; flex-wrap: wrap; }
.wf-composer-foot .wf-btn { height: 44px; border-radius: 10px; }
.wf-composer-hint { font-size: 12px; color: var(--wf-subtle); }

/* chips */
.wf-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--wf-ink-3); background: var(--wf-line-4); border-radius: 5px; padding: 2px 7px; line-height: 1.4; }
.wf-chip-blue { color: var(--wf-cobalt); background: var(--wf-cobalt-soft); }
.wf-chip-reg { color: var(--wf-amber); background: var(--wf-amber-bg); border: 1px solid var(--wf-amber-line); }
.wf-chip-reg i, .wf-chip-reg-mini i { width: 5px; height: 5px; border-radius: 50%; background: var(--wf-amber); display: inline-block; }
.wf-chip-unlisted { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 6px; border-radius: 5px; background: var(--wf-amber-bg); border: 1px solid var(--wf-amber-line); color: var(--wf-amber); text-transform: uppercase; }
.wf-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px; }

/* --- three columns ------------------------------------------------------------ */
.wf-columns { padding: 18px var(--wf-gutter) 0; display: grid; grid-template-columns: 240px minmax(0, 1fr) 360px; gap: 22px; align-items: start; }

.wf-dir-list { display: grid; gap: 6px; }
.wf-dir {
  display: flex; align-items: center; gap: 10px; padding: 10px 13px; border-radius: 11px;
  background: var(--wf-surface); color: var(--wf-ink-2); border: 1px solid var(--wf-line); cursor: pointer;
  font-weight: 700; font-size: 13px; text-align: left; width: 100%; text-decoration: none;
}
.wf-dir:hover { border-color: var(--wf-line-3); color: var(--wf-ink); }
.wf-dir-text { flex: 1; min-width: 0; line-height: 1.3; }
.wf-dir-count { font-size: 11px; font-weight: 600; color: var(--wf-subtle); text-align: right; line-height: 1.3; flex: none; }
/* The lift on the active direction is a cobalt lighter than any the ramp
   declares, falling to --brand; the pair is the gradient, not a token. */
.wf-dir.is-active { background: linear-gradient(180deg, #3b7dff, var(--wf-cobalt)); color: var(--brand-contrast); border-color: var(--wf-cobalt); }
.wf-dir.is-active .wf-dir-count { color: rgba(255,255,255,.85); }
.wf-dirs-note { margin: 8px 2px 0; font-size: 11.5px; color: var(--wf-subtle); line-height: 1.5; }

/* stage. The lit floor is built from gradients and alpha — a beam, a glow, a
   contact shadow. None of it is a flat colour, so none of it can be a token;
   what it lands on (--wf-surface, --wf-frame) is. */
.wf-stage-col { min-width: 0; }
.wf-stage { position: relative; height: var(--wf-stage-h); overflow: hidden; border-radius: 14px; }
.wf-stage-bg { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(240,245,253,.7) 70%, rgba(228,238,252,.85) 100%); }
.wf-crowd-fig { position: absolute; bottom: 44px; height: 212px; width: auto; object-fit: contain; object-position: center bottom; opacity: .3; filter: blur(.5px); }
.wf-crowd-1 { left: 6px; bottom: 34px; height: 252px; opacity: .42; filter: none; }
.wf-crowd-2 { left: 15%; }
.wf-crowd-3 { left: 60%; }
.wf-crowd-4 { left: auto; right: 6px; bottom: 32px; height: 250px; opacity: .42; filter: none; }
.wf-crowd.is-nudge-r .wf-crowd-fig { animation: wfNudgeR .55s cubic-bezier(.25,.8,.3,1) both; }
.wf-crowd.is-nudge-l .wf-crowd-fig { animation: wfNudgeL .55s cubic-bezier(.25,.8,.3,1) both; }
.wf-crowd-2 { animation-delay: .12s !important; }
.wf-crowd-3 { animation-delay: .19s !important; }
.wf-crowd-4 { animation-delay: .26s !important; }
.wf-stage-veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 34%); }
.wf-glow { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); width: 470px; height: 100px; border-radius: 50%; background: radial-gradient(ellipse at 50% 45%, rgba(52,112,240,.26) 0%, rgba(74,139,255,.09) 55%, transparent 75%); }
.wf-ring {
  position: absolute; left: 50%; bottom: 24px; transform: translateX(-50%); width: 380px; height: 76px; border-radius: 50%;
  background: linear-gradient(180deg, var(--wf-surface) 0%, #dfe9fb 78%); border: 1px solid rgba(96,150,255,.45);
  box-shadow: 0 12px 28px -12px rgba(26,92,240,.35), inset 0 -8px 18px rgba(74,139,255,.2);
}
.wf-ring.is-pulse { animation: wfRing .45s ease both; }
.wf-contact-shadow { position: absolute; left: 50%; bottom: 36px; transform: translateX(-50%); width: 230px; height: 26px; border-radius: 50%; background: rgba(22,50,120,.22); filter: blur(7px); }
.wf-beam { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); width: 250px; height: 460px; border-radius: 50%; background: linear-gradient(180deg, rgba(74,139,255,0) 0%, rgba(74,139,255,.4) 45%, rgba(74,139,255,.12) 100%); filter: blur(18px); opacity: 0; }
.wf-beam.is-on { animation: wfBeam .6s ease both; }
.wf-hero, .wf-hero-exit { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); width: 376px; height: 490px; display: flex; align-items: flex-end; justify-content: center; pointer-events: none; }
.wf-hero img, .wf-hero-exit img { width: 100%; height: 100%; object-fit: contain; object-position: center bottom; transform-origin: 50% 100%; }
.wf-hero-exit { opacity: 0; }
.wf-hero-exit.is-out-r img { animation: wfCarOutR .6s cubic-bezier(.5,.1,.7,1) both; }
.wf-hero-exit.is-out-l img { animation: wfCarOutL .6s cubic-bezier(.5,.1,.7,1) both; }
.wf-hero-exit.is-out-r, .wf-hero-exit.is-out-l { opacity: 1; }
.wf-hero.is-in-r img { animation: wfCarInR .65s cubic-bezier(.22,.85,.3,1.04) both; }
.wf-hero.is-in-l img { animation: wfCarInL .65s cubic-bezier(.22,.85,.3,1.04) both; }
.wf-stage-chip { position: absolute; right: 14px; top: 12px; font-size: 11px; font-weight: 700; color: var(--wf-ink-3); background: rgba(255,255,255,.85); border: 1px solid var(--wf-line); border-radius: 999px; padding: 4px 10px; }
.wf-stage-caption { position: absolute; left: 0; right: 0; bottom: 8px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--wf-ink-3); }
.wf-banner-text { display: none; }
.wf-stage-line { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; gap: 10px; flex-wrap: wrap; }
.wf-stage-total { font-size: 15px; font-weight: 800; }
.wf-stage-sub { font-size: 12px; color: var(--wf-muted); }
.wf-stage-fams { font-size: 11.5px; color: var(--wf-subtle); }

/* panel */
.wf-panel { background: var(--wf-surface); border: 1px solid var(--wf-line); border-radius: 14px; display: flex; flex-direction: column; overflow: hidden; min-height: var(--wf-stage-h); position: relative; }
.wf-panel-inner { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.wf-sheet-close, .wf-sheet-grip { display: none; }
.wf-panel-body { padding: 18px 22px 0; }
.wf-panel-empty { padding: 20px 22px; }
.wf-panel-head { display: flex; gap: 12px; align-items: center; }
.wf-thumb { width: 48px; height: 48px; border-radius: 10px; flex: none; overflow: hidden; background: var(--tint, var(--wf-line-4)); position: relative; display: block; }
.wf-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center 18%; }
.wf-thumb svg { width: 100%; height: 100%; fill: var(--wf-ink); opacity: .12; }
.wf-panel-title { min-width: 0; flex: 1; }
.wf-panel-name { font-size: 19px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.wf-panel-sub { font-size: 13px; color: var(--wf-muted); margin-top: 4px; }
.wf-panel-fam-label { margin-top: 14px; font-size: 12px; }
.wf-panel-fams { font-size: 13.5px; color: var(--wf-ink-3); line-height: 1.7; margin-top: 4px; }
.wf-panel-prompt { margin: 16px 0 0; font-size: 13.5px; color: var(--wf-muted); line-height: 1.55; }
.wf-variants { margin-top: 12px; }
.wf-variants .wf-label { font-size: 11px; }
.wf-variant-list { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; max-height: 86px; overflow: auto; }
.wf-variant { height: 30px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--wf-line-3); background: var(--wf-surface); color: var(--wf-ink-3); font-weight: 600; font-size: 11.5px; cursor: pointer; }
.wf-variant:hover { border-color: var(--wf-cobalt); }
.wf-variant[aria-pressed="true"] { border: 1.5px solid var(--wf-cobalt); background: var(--wf-cobalt-soft); color: var(--wf-cobalt-dark); font-weight: 700; }
.wf-variant[aria-pressed="true"]::after { content: " ✓"; }
.wf-covers { margin: 12px 0 0; font-size: 13px; color: var(--wf-ink-3); line-height: 1.5; }
.wf-pool { margin-top: 10px; padding: 9px 12px; border-radius: 9px; background: var(--wf-cobalt-soft-2); font-size: 12.5px; font-weight: 700; color: var(--wf-ink); }
.wf-info { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--wf-cobalt-soft-3); color: var(--wf-cobalt-dark); font-size: 10.5px; cursor: help; margin-left: 4px; font-style: normal; }
.wf-pool-note { display: block; font-weight: 500; color: var(--wf-muted); font-size: 11px; margin-top: 2px; }
.wf-facts { margin-top: 10px; display: grid; gap: 5px; font-size: 12px; color: var(--wf-muted); line-height: 1.45; }
.wf-facts b { color: var(--wf-ink); }
.wf-facts-low { margin: 10px 0 0; font-size: 12px; color: var(--wf-subtle); }
.wf-reg-note { margin: 10px 0 0; font-size: 11.5px; color: var(--wf-amber); line-height: 1.5; background: var(--wf-amber-bg); border: 1px solid var(--wf-amber-line-2); border-radius: 8px; padding: 8px 10px; }
.wf-unlisted-label { font-size: 12px; font-weight: 700; color: var(--wf-amber); letter-spacing: .04em; text-transform: uppercase; }
.wf-unlisted-title { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; margin-top: 4px; overflow-wrap: anywhere; }
.wf-unlisted-note { margin: 14px 0 0; font-size: 13.5px; color: var(--wf-muted); line-height: 1.55; }
.wf-panel-foot { padding: 14px 22px 18px; margin-top: auto; border-top: 1px solid var(--wf-line-4); }
.wf-qty { display: flex; align-items: center; gap: 8px; }
.wf-qty-label { flex: 1; }
.wf-qty-variant { display: block; font-weight: 600; color: var(--wf-cobalt-dark); font-size: 11px; text-transform: none; letter-spacing: 0; }
.wf-qty-variant:empty { display: none; }
.wf-step { width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--wf-line-3); background: var(--wf-surface); font-size: 17px; cursor: pointer; color: var(--wf-cobalt); }
.wf-step:hover { border-color: var(--wf-cobalt); }
.wf-qty-input { width: 60px; height: 40px; text-align: center; border: 1px solid var(--wf-line-3); border-radius: 9px; font-size: 16px; font-weight: 800; background: var(--wf-surface); color: var(--wf-ink); -moz-appearance: textfield; }
.wf-qty-input::-webkit-inner-spin-button, .wf-qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.wf-add { margin-top: 10px; height: 46px; border-radius: 10px; font-weight: 800; }
.wf-view { margin-top: 7px; height: 42px; border-radius: 10px; }
.wf-talk { margin-top: 7px; text-align: center; font-size: 12.5px; font-weight: 600; }

/* --- rail --------------------------------------------------------------------- */
.wf-rail-wrap { padding: 16px var(--wf-gutter) 26px; position: relative; }
.wf-rail { display: flex; gap: 12px; align-items: flex-end; overflow-x: auto; padding: 4px 2px 6px; scrollbar-width: none; scroll-snap-type: x proximity; }
.wf-rail::-webkit-scrollbar { display: none; }
.wf-fam { flex: none; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--wf-subtle); height: var(--wf-tile-h); display: flex; align-items: center; }
/* The card and its add control. The wrapper is the rail's flex item now, so
   it carries the sizing the card used to; the card fills it. Positioned,
   because the button is placed against its corner — `revealTile` reads the
   wrapper's offsetLeft for exactly this reason. */
.wf-tile-wrap { position: relative; flex: none; width: var(--wf-tile-w); height: var(--wf-tile-h); scroll-snap-align: start; }
/* A white disc at 40px read as a hole punched in the photograph — the card is
   a portrait and the control was the brightest thing on it. Same anatomy,
   quieter: 36px, the soft cobalt wash instead of near-white, and the glyph a
   step smaller so the ring carries the shape rather than the "+". It resolves
   to solid #1a5cf0 with a white glyph the moment it is pointed at or focused,
   which is where the emphasis belongs. */
.wf-tile-add {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  width: 36px; height: 36px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--wf-cobalt); background: var(--wf-cobalt-soft); color: var(--wf-cobalt);
  font-size: 18px; font-weight: 700; line-height: 1; display: grid; place-items: center;
  /* Always visible. The exploration revealed this on hover only, which is no
     control at all for a keyboard or a touch screen. */
  transition: background-color .15s ease, color .15s ease;
}
.wf-tile-add:hover, .wf-tile-add:focus-visible { background: var(--wf-cobalt); color: var(--brand-contrast); }
.wf-tile-add:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.wf-tile-add.is-added { background: var(--wf-green); border-color: var(--wf-green); color: var(--brand-contrast); }
.wf-tile-add.is-added span::before { content: "✓"; }
.wf-tile-add.is-added span { font-size: 0; }
/* Shown where the row is wide enough to carry it; the link's accessible name
   carries it everywhere. See the note in _tile.html. */
.wf-avail-label { display: none; }

.wf-tile {
  flex: none; width: 100%; height: 100%; border: 1px solid var(--wf-line-2); border-radius: 8px;
  background: var(--wf-surface); cursor: pointer; padding: 0; text-align: left; overflow: hidden; scroll-snap-align: start;
  position: relative; text-decoration: none; color: var(--wf-ink); display: block;
}
.wf-tile:hover { border-color: var(--wf-subtle); color: var(--wf-ink); }
.wf-tile:hover .wf-tile-img img { filter: brightness(1.04); }
.wf-tile.is-selected { border-color: var(--wf-cobalt); box-shadow: inset 0 0 0 2px var(--wf-cobalt); }
.wf-tile-img { display: block; width: 100%; height: var(--wf-tile-img); background-color: var(--tint, var(--wf-line-4)); background-image: radial-gradient(ellipse at 50% 115%, rgba(14,27,51,.08), transparent 60%); position: relative; }
.wf-tile-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 16%; }
.wf-tile-img svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: var(--wf-ink); opacity: .12; }
/* The drawn glyph is a picture, not the ghosted placeholder above it: full
   strength, standing on the tint's ground shadow rather than filling the
   box. Higher specificity than the rule it overrides, deliberately. */
.wf-tile-img svg.wf-glyph { inset: auto; left: 50%; bottom: 0; transform: translateX(-50%); width: auto; height: 88%; opacity: 1; fill: none; }
.wf-thumb svg.wf-glyph { width: 100%; height: 100%; opacity: 1; fill: none; }

/* The sprite itself never renders; it is a library the <use> elements read. */
.wf-glyphs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The glyph palette. Nine names, fixed, because a drawing that reaches for a
   tenth colour stops matching the hundred and fourteen beside it. Only
   --g-body follows the brand; the rest are the illustration's own inks. */
.g-skin { fill: #d9a97f; }
.g-body { fill: var(--wf-cobalt); }
.g-hat { fill: #e8eef9; }
.g-hi { fill: #f2a33c; }
.g-metal { fill: #8fa1c4; }
.g-dark { fill: #0e1b33; }
.g-light { fill: #ffffff; }
.g-warm { fill: #c8794a; }
.g-green { fill: #3f9d63; }
.wf-tile-check { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; background: var(--wf-cobalt); color: var(--brand-contrast); display: none; place-items: center; font-size: 11px; font-weight: 800; }
.wf-tile.is-selected .wf-tile-check { display: grid; }
.wf-tile-text { display: block; padding: 10px 12px 8px; }
.wf-tile.is-selected .wf-tile-text { background: var(--wf-cobalt-soft); }
.wf-tile-name { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 14px; line-height: 18px; font-weight: 600; height: 36px; overflow: hidden; }
.wf-tile-count { display: block; font-size: 12px; line-height: 16px; color: var(--wf-muted); font-variant-numeric: tabular-nums; margin-top: 4px; }
.wf-tile-chips { display: flex; gap: 5px; height: 14px; margin-top: 4px; align-items: center; font-size: 11px; font-weight: 700; }
.wf-chip-reg-mini { display: inline-flex; align-items: center; gap: 3px; color: var(--wf-amber); }
.wf-chip-reg-mini i { width: 4px; height: 4px; }
.wf-chip-also-mini { color: var(--wf-muted); }
.wf-rail-fade { position: absolute; top: 4px; bottom: 6px; width: 22px; pointer-events: none; }
.wf-rail-fade-l { left: var(--wf-gutter); background: linear-gradient(90deg, var(--wf-frame), transparent); }
.wf-rail-fade-r { right: var(--wf-gutter); background: linear-gradient(270deg, var(--wf-frame), transparent); }

/* --- request tray ----------------------------------------------------------- */
.wf-tray {
  position: sticky; bottom: 0; z-index: 20; background: rgba(255,255,255,.97);
  border-top: 1px solid var(--wf-line); padding: 10px var(--wf-gutter); display: flex; align-items: center; gap: 14px;
}
.wf-tray-text { min-width: 0; flex: 1; }
.wf-tray-summary { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-open-review { height: 46px; padding: 0 22px; border-radius: 10px; font-weight: 800; flex: none; }

/* --- dialogs ---------------------------------------------------------------- */
/* The scrim, the tray and the stage veils are the ink and the card surface at
   partial alpha -- a translucency no token can express, so they stay literal. */
.wf-overlay { position: fixed; inset: 0; z-index: 60; background: rgba(14,27,51,.4); display: grid; place-items: start center; padding: 40px 12px; overflow: auto; }
.wf-sent { place-items: center; }
.wf-dialog { width: 720px; max-width: 100%; background: var(--wf-surface); border-radius: 14px; box-shadow: var(--elev-3); padding: 24px 28px; animation: wfPop .25s ease-out; margin: 0; }
.wf-dialog-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.wf-dialog-head h2 { font-size: 21px; }
.wf-dialog-sub { margin: 3px 0 0; font-size: 12.5px; color: var(--wf-muted); }
.wf-review-rows { display: grid; gap: 8px; margin-top: 14px; }
.wf-rrow { border: 1px solid var(--wf-line); border-radius: 11px; padding: 11px 14px; }
.wf-rrow-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wf-rrow-label { font-weight: 800; font-size: 14.5px; }
.wf-rrow-qty { margin-left: auto; display: inline-flex; align-items: center; gap: 2px; flex: none; }
.wf-rrow-qty .wf-mini-step { width: 34px; height: 34px; border-radius: 8px; font-size: 15px; }
.wf-rrow-n { min-width: 38px; text-align: center; font-weight: 800; font-size: 14px; }
.wf-rrow-assess { margin-top: 6px; font-size: 12px; color: var(--wf-ink-3); }
.wf-review-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.wf-field { font-size: 12px; font-weight: 700; color: var(--wf-muted); }
.wf-field select { display: block; width: 100%; margin-top: 5px; height: 42px; padding: 0 10px; border: 1px solid var(--wf-line-3); border-radius: 9px; font-size: 13.5px; font-weight: 500; background: var(--wf-surface); color: var(--wf-ink); }
.wf-totals { margin-top: 14px; border-top: 1px solid var(--wf-line-4); padding-top: 12px; font-size: 13px; color: var(--wf-ink-3); }
.wf-totals span { color: var(--wf-subtle); }
.wf-send-row { margin-top: 12px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.wf-send-row .wf-input { flex: 1; min-width: 200px; height: 46px; padding: 0 13px; border-radius: 10px; font-size: 14px; }
.wf-send { height: 48px; padding: 0 24px; border-radius: 10px; font-weight: 800; font-size: 14px; flex: none; }
/* Was #b42318 -- a red one shade off the product's, for no reason anybody
   could name. One status law: a failure is the same red on all four surfaces. */
.wf-error { margin: 8px 0 0; font-size: 12.5px; color: var(--danger); font-weight: 600; }
.wf-dialog-note { margin: 7px 0 0; font-size: 11.5px; color: var(--wf-subtle); }
.wf-sent-dialog { width: 480px; padding: 28px 30px; text-align: center; }
.wf-sent-mark { display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wf-green-bg); color: var(--wf-green); font-size: 22px; font-weight: 800; }
.wf-sent-dialog h2, .wf-sent-dialog h1 { margin: 12px 0 0; font-size: 22px; }
.wf-sent-dialog p { margin: 8px 0 0; font-size: 13.5px; color: var(--wf-muted); line-height: 1.6; }
.wf-sent-summary { font-weight: 700; color: var(--wf-ink) !important; }
.wf-sent-ref { font-size: 12.5px !important; }
.wf-sent-ref b { color: var(--wf-ink); font-family: var(--wf-mono); letter-spacing: .04em; }
.wf-restart, .wf-received-card .wf-btn { margin-top: 14px; height: 44px; border-radius: 9px; }
.wf-received { padding: 40px 12px; display: grid; place-items: center; }
.wf-received-card { animation: none; }
.wf-received-lines { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; text-align: left; }
.wf-received-lines li { display: flex; align-items: center; gap: 10px; border: 1px solid var(--wf-line); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; }
.wf-received-lines li b { margin-left: auto; }

/* --- footer ----------------------------------------------------------------- */
.wf-footer { padding: 18px var(--wf-gutter) 56px; font-size: 12px; color: var(--wf-subtle); display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; }

/* --- 1024–1199: chip strip + 55/45 -------------------------------------------- */
@media (max-width: 1199px) {
  :root { --wf-gutter: 24px; --wf-tile-w: 152px; --wf-tile-h: 203px; --wf-tile-img: 121px; --wf-stage-h: 460px; }
  .wf-nav a { padding: 8px 9px; }
  .wf-columns { grid-template-columns: minmax(0, 55fr) minmax(300px, 45fr); grid-template-areas: "dirs dirs" "stage panel"; }
  .wf-dirs { grid-area: dirs; }
  .wf-stage-col { grid-area: stage; }
  .wf-panel { grid-area: panel; }
  .wf-h-overline { display: none; }
  .wf-dir-list { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .wf-dir-list::-webkit-scrollbar { display: none; }
  .wf-dir { flex: none; width: auto; height: 40px; padding: 0 12px; border-radius: 999px; font-size: 12px; align-items: center; }
  .wf-dir-count::before { content: "· "; }
  .wf-dirs-note { display: none; }
  .wf-hero, .wf-hero-exit { width: 330px; height: 430px; }
  .wf-ring { width: 330px; }
  /* The smaller tile keeps the same head zone; the text block tightens so the
     chip row never leaves the card. */
  .wf-tile-text { padding: 8px 10px 6px; }
  .wf-tile-name { font-size: 13px; line-height: 16px; height: 32px; }
  .wf-tile-count { margin-top: 2px; }
  .wf-tile-chips { margin-top: 2px; }
  .wf-crowd-fig { height: 180px; }
  .wf-crowd-1, .wf-crowd-4 { height: 210px; }
}

/* --- 768–1023: one ordered column ---------------------------------------------- */
@media (max-width: 1023px) {
  :root { --wf-tile-w: 144px; --wf-tile-h: 192px; --wf-tile-img: 115px; --wf-stage-h: 260px; }
  .wf-top-inner { gap: 14px; }
  .wf-nav { display: none; }
  .wf-long { display: none; }
  .wf-short { display: inline; }
  .wf-page { display: flex; flex-direction: column; }
  .wf-head { order: 0; }
  .wf-search { order: 1; }
  .wf-columns { display: contents; }
  .wf-dirs { order: 2; padding: 14px var(--wf-gutter) 0; }
  .wf-stage-col { order: 3; padding: 12px var(--wf-gutter) 0; }
  .wf-rail-wrap { order: 4; }
  .wf-panel { order: 5; margin: 0 var(--wf-gutter) 14px; min-height: 0; }
  .wf-tray { order: 6; }
  .wf-footer { order: 7; }
  .wf-stage { height: var(--wf-stage-h); }
  .wf-hero, .wf-hero-exit { width: 200px; height: 250px; bottom: 14px; }
  .wf-ring { width: 220px; height: 44px; bottom: 16px; }
  .wf-glow { width: 300px; height: 60px; }
  .wf-contact-shadow { width: 150px; bottom: 24px; }
  .wf-beam { width: 160px; height: 240px; }
  .wf-crowd-fig { height: 120px; bottom: 30px; }
  .wf-crowd-1, .wf-crowd-4 { height: 140px; }
  .wf-stage-caption { font-size: 12px; }
  .wf-fam { height: var(--wf-tile-h); }
  .wf-tile-text { padding: 7px 10px 5px; }
  .wf-panel-foot { padding: 12px 18px 16px; }
  .wf-panel-body, .wf-panel-empty { padding-left: 18px; padding-right: 18px; }
}

/* --- < 768: mobile ------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --wf-gutter: 16px; }
  .wf-top-inner { height: auto; min-height: 56px; padding: 8px var(--wf-gutter); gap: 10px; flex-wrap: wrap; row-gap: 8px; }
  .wf-brand-mark { width: 30px; height: 30px; font-size: 14px; border-radius: 8px; }
  /* The wordmark used to be hidden here: the bar insisted on one row and
     "ZIXAN" truncated to "ZIXA". The header takes two rows now, so the brand
     is whole on a phone for the first time. */
  .wf-brand { min-width: 0; }
  .wf-top-actions .wf-btn-ghost { display: none; }
  /* The bar asked for about 394px of content in a 328px box at 360px wide:
     brand, the surface switch, four language buttons and an uppercase
     REGISTRATION button, all with flex: none. The fix then was to drop
     controls until the row fitted; the fix now is to stop insisting on one
     row. Everything still reaches the 44px floor, and nothing is dropped. */
  /* The actions box stops being a box here. Left as a flex item it is wide
     enough (switch + REGISTER) to push the brand onto a line of its own, and
     the language row then wraps inside it — three stacked rows before any
     content. ``display: contents`` hands its children to the header's own
     wrap, so the brand, the switch and REGISTER share line one and only the
     language form takes line two. */
  .wf-top-actions { display: contents; }
  .wf-top-actions .wf-btn { height: 44px; padding: 0 12px; font-size: 13px; }
  .wf-top-inner .surfaceswitch { margin-left: auto; }
  /* The row used to hide every unpressed language button from the third
     onward. On this page's order — ru, uz, en, bg — that removed EN and BG
     unless one of them was already the active language: Bulgarian, the
     language this page exists in because Bulgarian employers are the
     audience, was unreachable on a phone. The bar takes a second line
     instead. Four buttons across ~300px is ~72px each, comfortably past the
     44px floor the old 38px buttons missed. */
  /* Second row, full width: two quick codes and the menu, each past the tap
     floor. chrome.css already raises the heights here; this decides where the
     control sits. */
  .langquick { order: 10; flex: 1 0 100%; margin-right: 0; justify-content: stretch; }
  /* The heights are restated rather than inherited from chrome.css: that
     sheet's phone boundary is 719 and this page's is 767, so between 720 and
     767 the row is full width here while the shared sheet still thinks it is
     on a desktop. Stating the floor locally closes the band instead of
     dragging one of the two vocabularies onto the other. */
  .langquick-btn, .langquick .langsel-toggle { flex: 1; height: 44px; min-width: 44px; }
  .wf-head { padding: 12px var(--wf-gutter) 0; }
  .wf-h1 { font-size: 20px; }
  .wf-search { padding-top: 12px; }
  .wf-search-label { display: none; }
  .wf-input, #wf-q { height: 48px; padding: 0 12px; border-radius: 11px; font-size: 16px; }
  .wf-interpret { position: static; margin-top: 6px; width: 100%; height: 40px; }
  .wf-results { top: 52px; }
  .wf-result-kind { width: 64px; }
  .wf-dirs { padding-top: 10px; }
  .wf-stage-col { padding: 10px var(--wf-gutter) 0; }
  .wf-stage { height: 120px; border-radius: 12px; background: var(--tint, var(--wf-line-4)); }
  .wf-stage-bg, .wf-crowd, .wf-glow, .wf-ring, .wf-contact-shadow, .wf-beam, .wf-hero-exit, .wf-stage-chip, .wf-stage-caption { display: none; }
  .wf-hero { position: absolute; inset: 0; width: auto; height: auto; transform: none; bottom: auto; left: auto; }
  /* The character sits in the RIGHT half of the banner and the words own the
     left. Before this the picture was centred and the veil faded out at 70%,
     so at 360px the direction name landed on the character's face. */
  .wf-hero img { object-fit: cover; object-position: 78% 9%; opacity: .96; animation: none !important; }
  .wf-stage-veil { display: block; background: linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 42%, rgba(255,255,255,.55) 62%, rgba(255,255,255,0) 82%); z-index: 1; }
  .wf-banner-text { display: flex; position: absolute; left: 12px; top: 10px; bottom: 10px; flex-direction: column; justify-content: center; max-width: 56%; z-index: 2; }
  .wf-banner-name { font-size: 15.5px; font-weight: 800; line-height: 1.2; margin-top: 2px; }
  .wf-banner-total { font-size: 11.5px; color: var(--wf-ink-3); margin-top: 2px; }
  .wf-stage-line { display: none; }
  /* rail → list of 56px rows */
  .wf-rail-wrap { padding: 12px var(--wf-gutter) 8px; }
  .wf-rail { flex-direction: column; align-items: stretch; gap: 12px; overflow: visible; padding: 0; }
  .wf-fam { writing-mode: horizontal-tb; transform: none; height: auto; font-size: 11.5px; margin: 2px 0 -6px; }
  /* The row is wide enough for the label the 168px card cannot carry. */
  .wf-avail-label { display: inline; }
  .wf-tile-wrap { width: 100%; height: auto; }
  .wf-tile-add { width: 44px; height: 44px; top: 50%; right: 8px; transform: translateY(-50%); border-radius: 11px; font-size: 22px; }
  .wf-tile { width: 100%; height: auto; min-height: 56px; display: flex; align-items: center; gap: 11px; border-radius: 11px; padding: 6px 62px 6px 10px; }
  .wf-tile.is-selected { box-shadow: inset 0 0 0 2px var(--wf-cobalt); }
  .wf-tile.is-selected .wf-tile-text { background: transparent; }
  .wf-tile-img { width: 44px; height: 44px; border-radius: 9px; flex: none; background-image: none; }
  .wf-tile-img img { object-position: center 18%; }
  .wf-tile-check { display: none !important; }
  .wf-tile-text { min-width: 0; flex: 1; padding: 0; display: flex; flex-direction: column; }
  .wf-tile-name { display: block; height: auto; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .wf-tile-count { font-size: 11.5px; margin-top: 1px; line-height: 1.3; }
  .wf-tile-chips { height: auto; margin: 0; position: absolute; right: 62px; top: 50%; transform: translateY(-50%); }
  /* This used to be a 6px amber dot at font-size 0: "regulated" is a legal
     fact about a profession and colour was its only carrier on the device most
     readers use. It keeps its word. */
  .wf-chip-reg-mini { font-size: 11px; }
  .wf-chip-also-mini { display: none; }
  .wf-rail-fade { display: none; }
  /* panel → bottom sheet */
  .wf-panel { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; margin: 0; border-radius: 18px 18px 0 0; border: 0; box-shadow: 0 -16px 40px -18px rgba(14,27,51,.4); max-height: 78vh; overflow: auto; padding: 14px 0 0; animation: wfSheet .28s ease-out; transform: none; }
  .wf-panel:not(.is-open) { display: none; }
  .wf-panel.is-open::before { content: ""; position: fixed; inset: 0; z-index: -1; }
  .wf-sheet-grip { display: block; width: 38px; height: 4px; border-radius: 2px; background: var(--wf-line-2); margin: -4px auto 10px; }
  .wf-sheet-close { display: grid; place-items: center; position: absolute; right: 16px; top: 14px; width: 40px; height: 40px; border-radius: 9px; border: 1px solid var(--wf-line-3); background: var(--wf-surface); cursor: pointer; font-size: 15px; color: var(--wf-ink-3); z-index: 2; }
  .wf-panel-body, .wf-panel-empty { padding: 0 16px; }
  .wf-panel-head { padding-right: 48px; }
  .wf-thumb { width: 44px; height: 44px; border-radius: 9px; }
  .wf-panel-name { font-size: 17px; }
  .wf-panel-foot { padding: 12px 16px 18px; border-top: 0; }
  /* The sheet is 78vh and it is about the profession being chosen. The draft
     is already on screen here — the tray sits under the sheet and says the
     same thing — so only the three steps stay, next to the button that
     starts them. */
  /* The sheet scrolls, so its parts must take their natural height. Left at
     `flex: 1` against a max-height the inner box is squeezed below its own
     content, the footer paints outside it, and whatever follows starts at the
     squeezed box's edge — which put the three steps on top of the buttons. */
  .wf-panel-inner { flex: 0 0 auto; }
  .wf-panel-aside { padding: 12px 16px 16px; margin-top: 8px; }
  .wf-request-box { display: none; }
  .wf-qty { flex-wrap: wrap; }
  .wf-qty-label { flex: 1 0 100%; margin-bottom: 4px; }
  .wf-step { width: 44px; height: 44px; }
  .wf-qty-input { width: 64px; height: 44px; }
  .wf-add { margin-top: 10px; height: 44px; font-size: 12.5px; }
  .wf-sheet-backdrop { position: fixed; inset: 0; z-index: 45; background: rgba(14,27,51,.35); }
  .wf-tray { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px var(--wf-gutter) 14px; z-index: 40; }
  .wf-tray-summary { font-size: 13.5px; }
  .wf-open-review { height: 44px; padding: 0 14px; font-size: 11.5px; }
  .wf-page.has-tray { padding-bottom: 76px; }
  .wf-composer { padding: 12px; }
  .wf-review-grid { grid-template-columns: 1fr; }
  .wf-dialog { padding: 18px 16px; border-radius: 14px; }
  .wf-overlay { padding: 16px 8px; }
  .wf-footer { padding-bottom: 96px; }
}

/* --- < 360: reflow --------------------------------------------------------------- */
@media (max-width: 359px) {
  .wf-stage-col { display: none; }
  .zx-brand-name { font-size: 13.5px; }
}

/* --- reduced motion --------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .wf-hero-exit { display: none !important; }
}


/* ==========================================================================
   Presentation wave.
   ========================================================================== */

/* The three example requests under the universal input. They are the page's
   own vocabulary, so they sit in the same visual family as the results the
   parser returns rather than looking like marketing. */
.wf-try {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px;
}
.wf-try-label {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--wf-subtle);
}
.wf-try-chip {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
  padding: 7px 12px; min-height: 34px; border-radius: 999px;
  border: 1px solid var(--wf-line-2); background: var(--wf-paper);
  color: var(--wf-ink-2);
}
.wf-try-chip:hover { border-color: var(--wf-cobalt); color: var(--wf-cobalt-dark); }
.wf-try-chip:focus-visible { outline: 2px solid var(--wf-cobalt); outline-offset: 2px; }
@media (max-width: 767px) {
  /* One row that scrolls beats three rows that push the stage off the screen. */
  .wf-try { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .wf-try::-webkit-scrollbar { display: none; }
  .wf-try-chip { white-space: nowrap; flex: none; min-height: 38px; }
}

/* The right column read as a paragraph of specification. The count is the
   fact an employer came for, so it becomes the one large number, and the
   families become chips rather than a run-on sentence. */
.wf-panel-empty .wf-panel-sub { font-size: 14px; margin-top: 8px; }
.wf-panel-count {
  display: block; font-size: 40px; font-weight: 800; line-height: 1;
  letter-spacing: -0.03em; color: var(--wf-cobalt-dark); margin-top: 14px;
}
.wf-panel-count-label {
  display: block; font-size: 13px; color: var(--wf-muted); margin-top: 6px;
}
.wf-fam-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wf-fam-chip {
  font-size: 12.5px; font-weight: 600; color: var(--wf-ink-3);
  background: var(--wf-line-4); border-radius: 999px; padding: 4px 10px;
}

/* --- >= 1024: the rail becomes a grid -------------------------------------------
   A direction holds up to 25 professions. As a horizontal scroller that is
   about four cards visible and the rest behind a gesture with no scrollbar,
   on the widest screens the product has — an employer comparing trades could
   not see the trades. The same cards, wrapped.

   Placed after every max-width block on purpose: it has to win over the
   1199 block for the 1024–1199 band, where the cards shrink but still wrap.
   Below 1024 nothing here applies and the scroller is untouched, which is
   also where the phone's row list lives.

   The columns are a fixed --wf-tile-w rather than 1fr: a card that stretches
   keeps its 134px image box and crops the portrait further, and the head
   zone those portraits were cropped for is not something a layout change may
   quietly renegotiate. */
@media (min-width: 1024px) {
  .wf-rail {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--wf-tile-w));
    justify-content: start;
    align-items: start;
    gap: 18px 12px;
    overflow: visible;
    scroll-snap-type: none;
  }
  /* The family name was a vertical rule between groups of cards. A grid has
     rows, so it becomes what it always meant: a heading over the group. */
  .wf-fam {
    grid-column: 1 / -1;
    writing-mode: horizontal-tb;
    transform: none;
    height: auto;
    margin: 6px 0 -6px;
    display: block;
  }
  .wf-fam:first-child { margin-top: 0; }
  /* Nothing overflows now, so the edge fades would sit on solid content. */
  .wf-rail-fade { display: none; }
}

/* --- Ask ZIXAN -----------------------------------------------------------------
   Inline under the examples, never floating: the exploration's bottom-right
   pill lands exactly where the request tray sits on a phone, and two fixed
   controls in one corner is how an employer loses the button they were
   reaching for.

   Cobalt, deliberately. Violet on this page means a machine is answering and
   nothing answers this yet — a person does. The panel is already the shape an
   assistant needs, so when an employer-safe model exists this becomes its
   surface and the accent moves with the fact, not before it. */
.wf-ask-row { margin-top: 10px; }
.wf-ask-open { gap: 8px; }
.wf-ask-open svg { flex: none; }
.wf-ask-dialog { max-width: 560px; }
.wf-ask-field { display: block; margin-top: 14px; }
.wf-ask-field textarea {
  display: block; width: 100%; margin-top: 6px; padding: 10px 12px; resize: vertical;
  min-height: 96px; border: 1px solid var(--wf-line-3); border-radius: 10px;
  background: var(--wf-surface); color: var(--wf-ink); font: inherit; font-size: 14px; line-height: 1.5;
}
.wf-ask-field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--wf-cobalt); }
@media (max-width: 767px) {
  .wf-ask-row { margin-top: 8px; }
  .wf-ask-open { width: 100%; height: 44px; }
  /* The panel is a sheet here, like the profession panel beside it. */
  .wf-ask-dialog { max-width: none; }
  .wf-ask-field textarea { font-size: 16px; }
}

/* --- destination: a <select> with a search box in front of it -------------------
   Not a replacement control. The native <select> is still the field that gets
   submitted and still holds every country, so the dialog works with scripts
   off; this only puts a text input above it and hides the native one while
   the enhanced path is live. */
.wf-country { position: relative; }
/* Beats `.wf-field select` (0,1,1), which this would otherwise lose to —
   the native control stayed visible under the search box. */
.wf-field select.wf-country-native { display: none; }
.wf-country-input { width: 100%; }
.wf-country-list {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 60;
  max-height: 240px; overflow-y: auto; padding: 4px;
  background: var(--wf-surface); border: 1px solid var(--wf-line-3);
  border-radius: 10px; box-shadow: var(--elev-2);
}
.wf-country-opt {
  display: block; width: 100%; text-align: left; border: 0; background: none;
  padding: 9px 10px; border-radius: 7px; font: inherit; font-size: 13.5px;
  color: var(--wf-ink); cursor: pointer;
}
.wf-country-opt:hover, .wf-country-opt:focus-visible { background: var(--wf-cobalt-soft); color: var(--wf-cobalt-dark); }
@media (max-width: 767px) {
  /* The 16px floor keeps iOS from zooming the dialog when the box is focused. */
  .wf-country-input { font-size: 16px; }
  .wf-country-opt { padding: 12px 10px; font-size: 15px; }
}