/* Wezdenko house design system — structure only: the type scale, the radius vocabulary, the
   fonts, component shapes, states and focus rules, plus the element defaults that make a page wear
   house shapes without opting in. ℹ️ There is no spacing ramp yet — PLAN §1 notes that none of the
   four surfaces has one, so there is nothing to lift; it is authored, not extracted.
   ⭐ Contains no colour literal, on purpose. Every colour is named through a variable that
   `palette.css` defines, and that property is the whole reason a second product can take this file
   and keep its own palette (PLAN §1, 2026-09-12). ⛔ Do not write a hex, an `rgb()` or an `rgba()`
   into this file: one colour value re-fuses the split and makes the system unconsumable again —
   which is exactly why `theme.css` could never be handed to the spotcraft.app landing page.
   ℹ️ Split out of `theme.css` 2026-09-12; the rules are verbatim, and three colour literals that
   sat inside them became `--line-strong`, `--line-bad` and `--shadow-tint` in `palette.css`.
   ⚠️ LOAD ORDER, stated for any consumer rather than for one. This file names colour variables it
   does not define, so **a palette must load before it**; anything layering a surface's own layout
   loads after it. Each consumer spells that differently, which is why the rule is written as a
   shape and not as a list of filenames:
     backoffice/shop  `palette.css` → this file → `band.css` → `shop.css`
     spotcraft/landing `theme.css`  → this file
   ⛔ The earlier wording named `shop.css` outright. That was written when the shop was the only
   consumer, and it instructed the second one to load a file that does not exist there — corrected
   2026-09-12 when the landing page adopted this. ⚠️ A consumer whose palette omits a variable this
   file names renders that property unset, and ⛔ no pin can catch it: a pin compares bytes of THIS
   file, and the omission is in the other one. */
:root {
  --radius: 12px; --radius-sm: 8px;
  --shadow: 0 6px 18px var(--shadow-tint);
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
* { box-sizing: border-box; }
html { font-family: var(--font); color: var(--ink); background: var(--paper); line-height: 1.5; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); }
a { color: var(--link); }
a:hover { color: var(--sky-top); }
code { font-family: var(--mono); font-size: .92em; }
h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.01em; margin: 0; }
h2 { font-size: 1rem; font-weight: 700; margin: 0; }
h3 { font-size: 1rem; font-weight: 700; margin: 0; }
.muted { color: var(--ink-soft); }
.soft { color: var(--ink-soft); font-size: .87rem; }
[hidden] { display: none !important; }

/* ---- controls ---- */
button, .button, input, select, textarea { font: inherit; line-height: 1.3; }
button, .button { display: inline-block; font-weight: 600; font-size: .93rem; padding: .5rem .9rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; white-space: nowrap; text-decoration: none; }
button:hover, .button:hover { border-color: var(--line-strong); }
button.primary, .button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
button.primary:hover, .button.primary:hover { filter: brightness(1.06); }
button.danger { color: var(--bad); border-color: var(--line-bad); }
button.danger:hover { border-color: var(--bad); }
button.sm { padding: .25rem .65rem; font-size: .85rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
input, select, textarea { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); color: var(--ink); min-width: 0; }
input::placeholder, textarea::placeholder { color: var(--ink-faint); }
input[type=file] { border: none; padding-left: 0; background: transparent; }
input[type=checkbox] { accent-color: var(--sky-bottom); }
input:focus-visible, select:focus-visible, textarea:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--sky-bottom); outline-offset: 1px; }

/* ---- surfaces ---- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow); }
.pill { display: inline-block; font-size: .72rem; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; border: 1px solid currentColor; border-radius: 999px; padding: .05rem .6rem; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.pill.ok { color: var(--ok); } .pill.warn { color: var(--warn); } .pill.bad { color: var(--bad); } .pill.muted { color: var(--ink-soft); }
.banner { padding: .8rem 1.1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); font-weight: 600; background: var(--card); }
.banner.ok { border-color: var(--ok); color: var(--ok); }
.banner.warn { border-color: var(--warn); color: var(--warn); }

/* ---- tables ---- */
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-size: .76rem; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-soft); font-weight: 600; padding: .5rem .65rem; border-bottom: 1px solid var(--line); }
td { padding: .55rem .65rem; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
tbody tr:last-child td { border-bottom: none; }
td > code { white-space: nowrap; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- the band ----
   The strip across the top of a page: brand, nav, and whoever is signed in. ℹ️ Its geometry moved
   here from `backoffice/shop/public/band.css` on 2026-09-12, the move that file's header had been
   holding open since the split; what stayed behind there is its colour and nothing else.
   ⛔ NOT A COLOUR TOKEN IN SIGHT, and that is a stronger statement than this file's usual rule.
   The band's ink is named `--band-ink*` / `--band-line*`, and the two palettes do NOT agree on that
   set: `backoffice/shop/public/palette.css` defines six, `spotcraft/landing/theme.css` three. A
   rule here naming `--band-line` would therefore compute to nothing on one consumer while every pin
   stayed green — the exact hazard both `check-doc-claims.mjs` files warn about. ➡️ So the borders
   below carry width and style only; `currentColor` and `transparent` stand in until a palette-aware
   file paints them, and painting them is the consumer's job.
   ⭐ `border-bottom: 2px solid transparent` on every nav link is the underline mechanism, not a
   decoration: the 2px is reserved on all of them so that colouring the current one shifts nothing.
   ⚠️ A consumer with no `.top` element simply gets nothing — the landing page is that case today. */
.top { display: flex; align-items: center; gap: 1.6rem; padding: 0 2.5rem; min-height: 56px; }
.top .brand { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; white-space: nowrap; }
.top nav { display: flex; gap: 1.6rem; align-self: stretch; border-left: 1px solid; padding-left: 1.6rem; }
.top nav a { text-decoration: none; display: flex; align-items: center; border-bottom: 2px solid transparent; padding-top: 2px; }
.top nav a[aria-current] { font-weight: 600; }
.top .who { margin-left: auto; display: flex; align-items: center; gap: .8rem; font-size: .85rem; }
.top .who form { display: inline; margin: 0; }
@media (max-width: 760px) { .top { padding: 0 1rem; gap: 1rem; flex-wrap: wrap; } .top nav { border-left: none; padding-left: 0; } }

/* ---- the hero ----
   The band that opens a front: brand, one display headline, one lede. ⭐ `.hero h1` is the one step
   above the h1 scale, and it is reachable ONLY inside `.hero` — a page with no `.hero` element gets
   nothing here, and every other `h1` stays at 1.45rem. ℹ️ Values lifted verbatim from
   `spotcraft/landing/index.html`'s inline block on 2026-09-25, the one front that had been looked at;
   extracted, not authored. Two departures, both named: `.brand` takes the `.top .brand` letterform,
   and its margin comes from the spacing set (1.6, not the landing's 1.75). ⚠️ The padding (4.5rem /
   5rem) is outside the spacing set on purpose: it is the front's own rhythm, lifted as found.
   ⛔ NOT A COLOUR TOKEN IN SIGHT, for the same reason as `.top` above: the palettes do not agree on
   the band inks, so the consumer paints background and colour. ⚠️ A FOCUSABLE INSIDE `.hero` NEEDS
   ITS RING REPAINTED BY THE CONSUMER: the house focus ring is `--sky-bottom`, the band's own colour,
   invisible on navy. Set `outline-color` only (width and offset stay the system's) on
   `.hero :focus-visible`; `conformance.mjs` measures every ring at 3:1 against the background behind
   it since 2026-09-25, so an unpainted ring in a band fails the check rather than shipping unseen.
   ⚠️ `.sub` is scoped `.hero .sub` and never bare: spotcraft's capture app uses a bare `.sub` class.
   ℹ️ Centred as lifted; a left-aligned front overrides `text-align` and the auto margins in its own
   layer, which is layout. */
.hero { padding: 4.5rem 1.5rem 5rem; text-align: center; }
.hero .brand { font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; margin: 0 0 1.6rem; }
.hero svg { display: block; margin: 0 auto 1.6rem; }
.hero h1 { font-size: clamp(1.7rem, 4.5vw, 2.6rem); font-weight: 700; line-height: 1.25; letter-spacing: -.01em; max-width: 34ch; margin: 0 auto 1rem; }
.hero .sub { font-size: clamp(1rem, 2.2vw, 1.15rem); max-width: 56ch; margin: 0 auto; }