/* SeatLink v3 base: element defaults, typography, focus, browser surfaces (selection, caret, scrollbar). 3.02.001 */
@layer base {
  *, *::before, *::after { box-sizing: border-box; }

  html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
    scrollbar-color: var(--control-border) transparent;
    scrollbar-width: thin;
  }

  body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--text-md);
    line-height: var(--leading-body);
    min-height: 100vh;
  }

  h1, h2, h3, h4, .h1, .h2, .h3, .h4 { margin: 0; line-height: var(--leading-tight); text-wrap: balance; font-weight: 750; letter-spacing: -0.01em; }
  h1, .h1 { font-size: var(--text-3xl); }
  h2, .h2 { font-size: var(--text-2xl); }
  h2 { margin-top: var(--s-7); margin-bottom: var(--s-3); }
  h3, .h3 { font-size: var(--text-xl); }
  h3 { margin-top: var(--s-5); margin-bottom: var(--s-2); }
  h4, .h4 { font-size: var(--text-lg); }
  h4 { margin-top: var(--s-4); margin-bottom: var(--s-2); }
  p { margin: 0 0 var(--s-3); max-width: 70ch; text-wrap: pretty; }
  ul, ol { margin: 0 0 var(--s-3); padding-left: 1.25rem; }
  small, .text-sm { font-size: var(--text-sm); }
  .text-muted { color: var(--ink-2); }
  .text-hint { color: var(--ink-3); }

  a { color: var(--link); text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
  a:hover { text-decoration-thickness: 0.14em; }

  hr { border: 0; border-top: 1px solid var(--hairline); margin: var(--s-5) 0; }

  /* numerals line up in tables, plates and counters */
  .num, table, .plate, .meter__value { font-variant-numeric: tabular-nums; }

  code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; }
  code { background: var(--neutral-bg); padding: 0.1em 0.35em; border-radius: var(--r-1); }

  /* keyboard focus is always visible and never colour-only (ring is 3px ink / white) */
  :focus-visible { outline: var(--focus-width) solid var(--focus-color); outline-offset: 2px; }
  :focus:not(:focus-visible) { outline: none; }

  /* the parts the browser draws */
  ::selection { background: var(--signal); color: var(--ink); }
  input, textarea, select { caret-color: var(--ink); accent-color: var(--ink); }
  ::placeholder { color: var(--ink-3); opacity: 1; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-thumb { background: var(--control-border); border-radius: var(--r-1); border: 2px solid transparent; background-clip: content-box; }
  ::-webkit-scrollbar-track { background: transparent; }

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

  .skip-link {
    position: absolute; left: var(--s-3); top: -4rem; z-index: var(--z-toast);
    background: var(--ink); color: var(--surface); padding: var(--s-2) var(--s-4); border-radius: var(--r-1);
  }
  .skip-link:focus { top: var(--s-3); }

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

@layer utilities {
  .stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
  .stack-sm { --stack-gap: var(--s-2); }
  .stack-lg { --stack-gap: var(--s-6); }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--cluster-gap, var(--s-3)); }
  .cluster-end { justify-content: flex-end; }
  .cluster-between { justify-content: space-between; }
  .grow { flex: 1 1 auto; min-width: 0; }
  .container { width: min(100% - 2 * var(--s-4), 72rem); margin-inline: auto; }
  /* MUST stay the last rule of the last layer: hidden then beats every display set above or in an earlier layer (.stack, .cluster, ...) at equal specificity */
  [hidden] { display: none; }
}