/* plugtell.com — site styles. Colour, type, space, radius and motion come from /tokens.css,
   generated from 06-design-system/tokens.json. Dark is the brand canvas; there is no light mode here. */

/* Self-hosted Barlow (SIL OFL 1.1, fonts/OFL.txt), Latin subset. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/Barlow-Regular.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/Barlow-Medium.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/Barlow-SemiBold.woff2") format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/Barlow-Bold.woff2") format("woff2"); }
/* Metric-matched fallback so the layout does not jump while Barlow loads (values from build metrics). */
@font-face {
  font-family: "Barlow Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 96.8%;
  ascent-override: 103.3%;
  descent-override: 20.7%;
  line-gap-override: 0.0%;
}

/* Overrides the generated token (unlayered on purpose so it beats tokens.css). */
:root { --font-family: "Barlow", "Barlow Fallback", -apple-system, "Helvetica Neue", Arial, sans-serif; }

@view-transition { navigation: auto; }

@layer reset, base, layout, components, motion;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul, figure, form { margin: 0; }
  ul { padding: 0; list-style: none; }
  img, svg { display: block; max-width: 100%; }
  input, button { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: 0; padding: 0; }
  [hidden] { display: none !important; }
}

@layer base {
  html {
    background: var(--background);
    color: var(--text-primary);
    font: var(--font-body);
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    scroll-behavior: smooth;
  }
  body { min-height: 100dvh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
  main { flex: 1; }
  a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
  a:hover { text-decoration-thickness: 1.5px; }
  p { text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  :focus-visible { outline: var(--border-focus) solid var(--line); outline-offset: 3px; border-radius: var(--radius-xs); }
  ::selection { background: var(--text-primary); color: var(--background); }
}

@layer layout {
  .wrap {
    inline-size: 100%;
    max-inline-size: var(--layout-content-max-width);
    margin-inline: auto;
    padding-inline: max(var(--layout-screen-margin), env(safe-area-inset-left)) max(var(--layout-screen-margin), env(safe-area-inset-right));
  }
  main.wrap { container: main / inline-size; }

  .site-header { padding-block: var(--space-lg); }
  .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); }
  .lockup { display: inline-flex; border-radius: var(--radius-xs); }
  .lockup img { inline-size: 130px; block-size: auto; }
  @media (min-width: 600px) { .lockup img { inline-size: 156px; } }

  .hero { display: grid; gap: var(--space-lg); align-items: center; padding-block: var(--space-xs) var(--space-xxl); }
  /* Phones: a small mark so the headline and the field sit inside the first screen. */
  /* Phones: headline, field and button own the first screen; the animated mark follows the form. */
  .hero-mark { justify-self: center; inline-size: min(78vw, 300px); margin-block-start: var(--space-md); }
  @container main (min-width: 600px) { .hero-mark { order: -1; justify-self: start; inline-size: 240px; margin: 0 0 0 -10px; } }
  @container main (min-width: 900px) {
    .hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-xxl); padding-block: var(--space-xxl) 96px; }
    .hero-mark { order: 0; inline-size: min(100%, 500px); justify-self: end; margin-inline-start: 0; }
  }


  .site-footer { border-block-start: var(--border-hairline) solid var(--separator); padding-block: var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom)); font: var(--font-footnote); color: var(--text-secondary); }
  .site-footer .wrap { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md); justify-content: space-between; }

  /* Secondary pages: privacy, thanks, 404, unsubscribe */
  .simple { max-inline-size: var(--layout-readable-width); padding-block: var(--space-xl) var(--space-xxxl); display: grid; gap: var(--space-md); align-content: start; }
}

@layer components {
  .skip {
    position: absolute; inset-inline-start: var(--space-md); inset-block-start: -100px;
    padding: var(--space-xs) var(--space-sm); background: var(--accent); color: var(--on-accent);
    border-radius: var(--radius-md); font: var(--font-headline); z-index: var(--z-toast);
  }
  .skip:focus { inset-block-start: var(--space-md); }

  .dot { inline-size: var(--size-status-dot); block-size: var(--size-status-dot); border-radius: 50%; background: var(--text-secondary); flex: none; }
  .dot-good { background: var(--good-fill); }
  .dot-warn { background: var(--warn-fill); }
  .dot-bad  { background: var(--bad-fill); }

  .header-cta { font: var(--font-headline); text-decoration: none; display: inline-flex; align-items: center; min-block-size: var(--size-min-touch-target); padding-inline: var(--space-md); border-radius: var(--radius-md); background: var(--accent-soft); color: var(--text-primary); }
  .header-cta:hover { background: var(--surface-raised); }

  .eyebrow { display: inline-flex; align-items: center; gap: var(--space-xs); font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); white-space: nowrap; }

  .hero .eyebrow { margin-block-end: var(--space-md); }
  .hero h1 {
    font: var(--font-display); letter-spacing: var(--tracking-display);
    font-size: clamp(40px, 3.6vw + 26px, 56px); line-height: 1.04;
    max-inline-size: 16ch; margin-block-end: var(--space-lg);
  }
  .lede { font: var(--font-body); font-size: clamp(17px, 0.4vw + 15px, 20px); line-height: 1.4; color: var(--text-secondary); max-inline-size: 52ch; margin-block-end: var(--space-xl); }

  /* Sign-up form */
  .join { position: relative; display: grid; gap: var(--space-xs); max-inline-size: 560px; }
  .join label { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
  .field-row { display: grid; gap: var(--space-xs); }
  @container main (min-width: 600px) { .field-row { grid-template-columns: minmax(0, 1fr) auto; } }

  .input {
    block-size: var(--size-input-height); min-inline-size: 0; padding-inline: var(--space-md);
    background: var(--surface); border: 0; border-radius: var(--radius-md);
    box-shadow: inset 0 calc(-1 * var(--border-hairline)) 0 var(--separator);
    color: var(--text-primary); font: var(--font-body);
    transition: box-shadow var(--motion-fast) var(--easing-standard);
  }
  .input::placeholder { color: var(--text-secondary); opacity: 1; }
  .input:focus-visible { outline: none; box-shadow: inset 0 calc(-1 * var(--border-focus)) 0 var(--line); }
  .join:has(.input[aria-invalid="true"]) .input { box-shadow: inset 0 calc(-1 * var(--border-focus)) 0 var(--bad-fill); }

  .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs);
    block-size: var(--size-button-height); min-inline-size: var(--size-min-touch-target); padding-inline: var(--space-lg);
    border-radius: var(--radius-md); font: var(--font-headline); white-space: nowrap;
    transition: opacity var(--motion-fast) var(--easing-standard);
  }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: color-mix(in oklab, var(--accent) 90%, var(--background)); }
  .btn-secondary { background: var(--accent-soft); color: var(--text-primary); }
  .btn-secondary:hover { background: var(--surface-raised); }
  .btn:active { opacity: var(--opacity-pressed); }
  .btn:disabled { opacity: var(--opacity-disabled); cursor: default; }
  .btn-spinner { display: none; inline-size: 18px; block-size: 18px; border: 2px solid currentColor; border-inline-end-color: transparent; border-radius: 50%; }
  .btn[aria-busy="true"] .btn-spinner { display: block; }
  .plain { display: inline-flex; align-items: center; min-block-size: var(--size-min-touch-target); font: var(--font-footnote); color: var(--text-secondary); text-decoration: underline; text-underline-offset: 0.18em; justify-self: start; }
  .plain:hover { color: var(--text-primary); }

  .help { font: var(--font-footnote); color: var(--text-secondary); }
  .field-error { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-footnote); color: var(--bad-text); }
  .consent { font: var(--font-caption); color: var(--text-secondary); margin-block-start: var(--space-xs); max-inline-size: 48ch; }
  .hp { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; opacity: 0; }
  .turnstile { margin-block-start: var(--space-xs); }

  .joined { display: grid; gap: var(--space-xxs); max-inline-size: 560px; padding: var(--layout-panel-padding); background: var(--surface); border-radius: var(--radius-md); }
  .joined:focus { outline: none; }
  .joined h2 { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-headline); }
  .joined p { font: var(--font-callout); color: var(--text-secondary); }
  .joined .plain { margin-block-start: var(--space-xxs); }
  .count { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-footnote); color: var(--text-primary); }
  .count::before { content: ""; inline-size: var(--size-status-dot); block-size: var(--size-status-dot); border-radius: 50%; background: var(--good-fill); }
  .count-number { font-variant-numeric: tabular-nums; }
  .share { display: grid; gap: var(--space-xs); margin-block-start: var(--space-sm); padding-block-start: var(--space-sm); border-block-start: var(--border-hairline) solid var(--separator); }
  .share-lead { font: var(--font-callout); color: var(--text-primary); }
  .share-row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
  .share-row .btn { block-size: var(--size-button-height-sm); padding-inline: var(--space-md); font: var(--font-footnote); font-weight: 600; }
  .share-link { font: var(--font-caption); color: var(--text-secondary); overflow-wrap: anywhere; }
  .share-link code { font-family: inherit; }



  /* Prose pages */
  .prose h1 { font: var(--font-large-title); letter-spacing: var(--tracking-large-title); }
  .prose h2 { font: var(--font-title2); margin-block-start: var(--space-sm); }
  .prose p, .prose li { color: var(--text-secondary); }
  .prose p strong { color: var(--text-primary); font-weight: 600; }
  .prose ul { list-style: disc; padding-inline-start: 1.2em; display: grid; gap: var(--space-xxs); }
  .prose .meta { font: var(--font-footnote); }
  .prose a { color: var(--text-primary); }
  .inline-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: var(--space-xs); }
}

@layer motion {
  @keyframes spin  { to { transform: rotate(1turn); } }
  @keyframes pin   { 0%, 100% { opacity: 0.3; } 18%, 36% { opacity: 1; } }
  @keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
  @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

  .btn[aria-busy="true"] .btn-spinner { animation: spin 800ms linear infinite; }

  @media (prefers-reduced-motion: reduce) {
    .eyebrow .dot-good { animation: none; }
    html { scroll-behavior: auto; }
  }
}

/* ── Hero stage and "What it does" (3 Nov 2026 pass, after Mobbin: Attio and FLORA feature cards, Linear indices) ── */
@layer layout {
  .facts { padding-block: 80px 96px; border-block-start: var(--border-hairline) solid var(--separator); }
  .facts-head { display: grid; gap: var(--space-sm); margin-block-end: var(--space-xl); max-inline-size: 640px; }
  .fact-list { display: grid; gap: var(--space-md); }
  @container main (min-width: 760px) { .fact-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

@layer components {
  /* Stage: soft light from above, a fading dot grid, hairline rings. Flat colours from the tokens. */
  .stage { position: relative; aspect-ratio: 1; display: grid; place-items: center; isolation: isolate; }
  .stage::before {
    content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%;
    background-image: radial-gradient(color-mix(in oklab, var(--line) 22%, transparent) 1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, transparent 68%);
    opacity: .55;
  }
  .stage::after {
    content: ""; position: absolute; inset: 12%; z-index: -1; border-radius: 50%;
    background: radial-gradient(circle, color-mix(in oklab, var(--line) 7%, transparent), transparent 70%);
  }
  .mark { inline-size: 100%; block-size: auto; color: var(--line); overflow: visible; }
  .mark .rings circle { fill: none; stroke: var(--line); stroke-width: 1px; vector-effect: non-scaling-stroke; }
  .mark .rings circle:nth-child(1) { opacity: .16; }
  .mark .rings circle:nth-child(2) { opacity: .10; }
  .mark .rings circle:nth-child(3) { opacity: .06; }
  .mark .ping { fill: none; stroke: var(--good-fill); stroke-width: 1.5px; vector-effect: non-scaling-stroke; opacity: 0; transform-box: fill-box; transform-origin: center; }
  .mark .pin { fill: currentColor; opacity: .3; }
  .mark .pin-live { fill: var(--good-fill); transform-box: fill-box; transform-origin: center; }

  .stage-chip {
    position: absolute; inset-block-end: 9%; inset-inline-start: 50%; translate: -50% 0;
    display: grid; place-items: center; min-block-size: 32px; padding-inline: 14px;
    background: var(--surface); border: var(--border-hairline) solid var(--separator); border-radius: var(--radius-pill);
    font: var(--font-footnote); white-space: nowrap;
  }
  .stage-chip > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-xs); }
  .chip-scan { color: var(--text-secondary); }
  .chip-done { color: var(--good-text); opacity: 0; }
  @container main (max-width: 599px) { .stage-chip { font-size: 12px; min-block-size: 26px; padding-inline: 10px; inset-block-end: 4%; } }

  /* What it does: three cards, a small picture on top, an index, a question, one line */
  .facts-title { font: var(--font-large-title); letter-spacing: var(--tracking-large-title); font-size: clamp(28px, 1.6vw + 22px, 40px); line-height: 1.1; }
  .facts .section-label { margin: 0; }
  .fact { display: grid; gap: var(--space-xs); align-content: start; padding: var(--space-xs) var(--space-xs) var(--space-lg); background: var(--surface); border: var(--border-hairline) solid var(--separator); border-radius: var(--radius-lg); }
  .fact > :not(.fact-visual) { padding-inline: var(--space-md); }
  .fact-visual { display: grid; place-items: center; min-block-size: 164px; margin-block-end: var(--space-sm); background: var(--background); border-radius: var(--radius-sm); border: var(--border-hairline) solid var(--separator); padding: var(--space-md); overflow: hidden; }
  .fact-n { font: 500 13px/17px ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-secondary); letter-spacing: .5px; }
  .fact h3 { font: var(--font-title2); font-size: 22px; line-height: 27px; }
  .fact p:not(.fact-n) { font: var(--font-body); color: var(--text-secondary); max-inline-size: 34ch; }
  .fact-visual p { padding: 0; }

  .mini-verdicts { display: grid; gap: 10px; }
  .mini-verdicts li { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-headline); color: var(--text-secondary); }
  .mini-verdicts li:not(.on) .dot { opacity: .5; }
  .mini-verdicts li .dot { filter: grayscale(1); }
  .mini-verdicts li.on { color: var(--good-text); opacity: 1; font-size: 20px; }
  .mini-verdicts li.on .dot { filter: none; }

  .mini-translate { display: grid; justify-items: center; gap: var(--space-xs); text-align: center; }
  .mini-code { font: 600 22px/1 ui-monospace, "SF Mono", Menlo, monospace; color: var(--text-secondary); letter-spacing: 1px; padding: 6px 10px; border: var(--border-hairline) dashed var(--separator); border-radius: var(--radius-sm); }
  .mini-translate svg { inline-size: 20px; block-size: 20px; rotate: 90deg; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .mini-plain { font: var(--font-headline); color: var(--text-primary); max-inline-size: 22ch; }

  .mini-next { display: grid; gap: var(--space-xs); inline-size: min(100%, 240px); }
  .mini-step { display: flex; align-items: center; gap: var(--space-xs); font: var(--font-callout); color: var(--text-primary); }
  .mini-check { display: grid; place-items: center; inline-size: 20px; block-size: 20px; border-radius: 50%; border: var(--border-line) solid var(--text-secondary); flex: none; }
  .mini-check svg { inline-size: 12px; block-size: 12px; fill: none; stroke: var(--text-primary); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
  .mini-btn { margin-block-start: var(--space-xxs); display: grid; place-items: center; block-size: 36px; border-radius: var(--radius-md); background: var(--accent); color: var(--on-accent); font: var(--font-footnote); font-weight: 600; }

  .fact-strip { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); margin-block-start: var(--space-lg); font: var(--font-footnote); color: var(--text-secondary); }
  .fact-strip li { display: inline-flex; align-items: center; gap: var(--space-xs); }
  .fact-strip li::before { content: ""; inline-size: 4px; block-size: 4px; border-radius: 50%; background: var(--text-secondary); }
}

@layer motion {
  /* One 6 s scan cycle: pins sweep left to right, the centre pin lights, a ring pings out, the verdict shows, then it rests. */
  @keyframes sweep   { 0% { opacity: .3; } 4% { opacity: 1; } 12%, 100% { opacity: .3; } }
  @keyframes lit     { 0%, 30% { transform: scale(1); } 36% { transform: scale(1.45); } 44%, 100% { transform: scale(1); } }
  @keyframes ping    { 0%, 32% { opacity: 0; transform: scale(.7); } 34% { opacity: .9; } 62%, 100% { opacity: 0; transform: scale(1.6); } }
  @keyframes scanTxt { 0%, 30% { opacity: 1; } 34%, 92% { opacity: 0; } 100% { opacity: 1; } }
  @keyframes doneTxt { 0%, 32% { opacity: 0; translate: 0 4px; } 38%, 88% { opacity: 1; translate: 0 0; } 94%, 100% { opacity: 0; } }

  .mark .pin { animation: sweep 6s var(--easing-standard) infinite; animation-delay: calc(var(--i, 0) * 120ms); }
  .mark .pins .pin:nth-child(1) { --i: 0; } .mark .pins .pin:nth-child(2) { --i: 1; } .mark .pins .pin:nth-child(3) { --i: 2; }
  .mark .pins .pin:nth-child(4) { --i: 3; } .mark .pins .pin:nth-child(5) { --i: 4; } .mark .pins .pin:nth-child(6) { --i: 5; }
  .mark .pins .pin:nth-child(7) { --i: 6; } .mark .pins .pin:nth-child(8) { --i: 7; } .mark .pins .pin:nth-child(9) { --i: 8; }
  .mark .pin-live { animation: lit 6s var(--easing-standard) infinite; }
  .mark .ping { animation: ping 6s var(--easing-decelerate) infinite; }
  .chip-scan { animation: scanTxt 6s linear infinite; }
  .chip-done { animation: doneTxt 6s var(--easing-standard) infinite; }

  @media (prefers-reduced-motion: reduce) {
    .mark .pin, .mark .pin-live, .mark .ping, .chip-scan, .chip-done { animation: none; }
    .mark .pin { opacity: 1; }
    .chip-scan { opacity: 0; }
    .chip-done { opacity: 1; }
  }
}
@layer components {
  .section-label { font: var(--font-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-secondary); }
  .fact .fact-visual p { font: var(--font-callout); color: var(--text-primary); max-inline-size: none; }
  .fact .fact-visual .mini-btn { color: var(--on-accent); font: var(--font-footnote); font-weight: 600; }
}

/* ── Mobile pass (3 Nov 2026): sticky glass header, thumb-first hero, touch-safe states, tighter rhythm ── */
@layer layout {
  .site-header {
    position: sticky; inset-block-start: 0; z-index: 100;
    padding-block: max(var(--space-sm), env(safe-area-inset-top)) var(--space-sm);
    background: color-mix(in oklab, var(--background) 78%, transparent);
    -webkit-backdrop-filter: saturate(160%) blur(16px); backdrop-filter: saturate(160%) blur(16px);
    border-block-end: var(--border-hairline) solid transparent;
  }
  @supports (animation-timeline: scroll()) {
    @keyframes header-line { to { border-block-end-color: var(--separator); } }
    .site-header { animation: header-line linear both; animation-timeline: scroll(); animation-range: 0 48px; }
  }
  @media (min-width: 600px) { .site-header { padding-block: var(--space-lg); } }
  #join, #main { scroll-margin-block-start: 88px; }

  .hero { padding-block: var(--space-md) var(--space-xl); }
  .facts { padding-block: clamp(48px, 9vw, 80px) clamp(56px, 10vw, 96px); }
  .facts-head { margin-block-end: clamp(var(--space-lg), 4vw, var(--space-xl)); }
}

@layer components {
  a, button, .btn, .input { touch-action: manipulation; }
  .header-cta { min-block-size: 40px; padding-inline: 14px; border-radius: var(--radius-pill); font: var(--font-callout); font-weight: 600; position: relative; }
  .header-cta::after { content: ""; position: absolute; inset: -4px 0; } /* keeps a 48px touch area */
  @media (min-width: 600px) { .header-cta { min-block-size: var(--size-min-touch-target); padding-inline: var(--space-md); font: var(--font-headline); } }

  @container main (max-width: 599px) {
    .hero .eyebrow { margin-block-end: var(--space-sm); }
    .hero h1 { margin-block-end: var(--space-md); font-size: clamp(38px, 10.5vw, 46px); }
    .lede { margin-block-end: var(--space-lg); }
    .join .btn-primary { inline-size: 100%; }
    .share-row { display: grid; grid-template-columns: 1fr 1fr; }
    .fact h3 { font-size: 20px; line-height: 25px; }
    .fact-visual { min-block-size: 148px; }
  }
  .input { font-size: max(16px, 1em); } /* never below 16px, so iOS does not zoom on focus */

  /* "Good to know" as wrapping chips */
  .fact-strip { gap: var(--space-xs); }
  .fact-strip li { min-block-size: 32px; padding-inline: 12px; border-radius: var(--radius-pill); background: var(--surface); border: var(--border-hairline) solid var(--separator); color: var(--text-primary); }
  .fact-strip li::before { background: var(--good-fill); }

  /* Touch screens: no sticky hover colours after a tap; pressed state instead */
  @media (hover: none) {
    .btn-primary:hover { background: var(--accent); }
    .btn-secondary:hover, .header-cta:hover { background: var(--accent-soft); }
    .plain:hover { color: var(--text-secondary); }
    .header-cta:active { opacity: var(--opacity-pressed); }
  }

  .site-footer .wrap { row-gap: var(--space-xs); }
  @media (max-width: 599px) { .site-footer .wrap { flex-direction: column; } }
}

/* ── Accessibility pass (4 Nov 2026): WCAG 2.2 AA ── */
@layer base {
  /* 2.4.11 Focus not obscured: anything focused scrolls clear of the sticky header */
  html { scroll-padding-block-start: 96px; }
}

@layer components {
  /* Error line: the alert region is always in the page; the dot shows only when there is text */
  .field-error:has(.field-error-text:empty) { display: block; block-size: 0; overflow: hidden; }
  .field-error-text:not(:empty)::before { content: ""; display: inline-block; inline-size: var(--size-status-dot); block-size: var(--size-status-dot); margin-inline-end: var(--space-xs); border-radius: 50%; background: var(--bad-fill); vertical-align: 0.1em; }

}

/* Windows high contrast: keep edges on filled controls, a real focus ring on the field, status dots in colour */
@media (forced-colors: active) {
  .btn, .header-cta, .input, .stage-chip, .fact-strip li, .joined, .skip { border: 1px solid CanvasText; }
  .input:focus-visible { outline: 2px solid Highlight; outline-offset: 2px; }
  .dot, .count::before, .fact-strip li::before, .field-error-text:not(:empty)::before { forced-color-adjust: none; }
  .stage::before, .stage::after { display: none; }
  .mark { color: CanvasText; }
  .mark .rings circle { stroke: CanvasText; }
  .mini-check svg { stroke: CanvasText; }
  .lockup { forced-color-adjust: none; background: #000; padding: 4px 8px; }
}

/* Reduce transparency: solid header instead of glass */
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--background); -webkit-backdrop-filter: none; backdrop-filter: none; }
}