/* ═══════════════════════════════════════════════════════════════════════════
   Base — reset, element defaults, prose, and the two cross-cutting helpers
   (.tr-on-dark and the JS-presence gate).
   Ported from the design system's tokens/base.css.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer reset {
  *,*::before,*::after { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; }
  body { margin: 0; }
  figure { margin: 0; }
  img,svg,video { display: block; max-width: 100%; }
  button { font: inherit; color: inherit; }
  :root { color-scheme: light; }
}

@layer base {
  body {
    background: var(--surface-page);
    color: var(--text-body);
    font-family: var(--type-body-family);
    font-size: var(--type-body-size);
    font-weight: var(--type-body-weight);
    line-height: var(--type-body-lh);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }

  /* NOTE: this rule beats colour inherited from a parent, which is why any
     heading on a dark surface must use .tr-on-dark (below) rather than relying
     on inheritance. This is the single most common mistake in this system. */
  h1,h2,h3,h4,h5,h6 {
    margin: 0;
    color: var(--text-strong);
    font-family: var(--font-sans);
    font-weight: var(--fw-bold);
    line-height: var(--lh-heading);
    letter-spacing: var(--ls-heading);
    text-wrap: balance;
  }
  h1 { font-size: var(--text-4xl); }
  h2 { font-size: var(--text-3xl); }
  h3 { font-size: var(--text-2xl); }
  h4 { font-size: var(--text-xl); }
  h5 { font-size: var(--text-lg); }
  h6 { font-size: var(--text-md); }

  p { margin: 0 0 1em; text-wrap: pretty; }
  p:last-child { margin-bottom: 0; }

  /* Link colours are declared here on purpose: authored pages may not have
     links yet, and an undefined <a> renders browser-default blue — the one
     blue that is not in this system. */
  a { color: var(--text-link); text-decoration: none; transition: var(--transition-color); }
  a:hover { color: var(--text-link-hover); }

  a:focus-visible,
  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  summary:focus-visible,
  [tabindex]:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-sm); }

  ul,ol { margin: 0 0 1em; padding-inline-start: 1.35em; }
  li { margin-bottom: .4em; }
  li::marker { color: var(--cobalt-400); }

  blockquote {
    margin: var(--space-7) 0;
    padding-inline-start: var(--space-6);
    border-inline-start: var(--border-w-rule) solid var(--sun-500);
    color: var(--text-strong);
    font-size: var(--text-lg);
    line-height: var(--lh-normal);
  }

  hr { margin: var(--space-8) 0; border: 0; border-top: var(--border-w-hair) solid var(--border-hairline); }

  code,kbd,samp { font-family: var(--font-mono); font-size: .92em; }
  small { font-size: var(--text-xs); }
  strong,b { font-weight: var(--fw-semibold); color: var(--text-strong); }

  table { border-collapse: collapse; width: 100%; }
  th { text-align: start; font-weight: var(--fw-semibold); color: var(--text-strong); }
  th,td { padding: var(--space-3) var(--space-4); border-bottom: var(--border-w-hair) solid var(--border-hairline); }

  ::selection { background: var(--cobalt-200); color: var(--cobalt-900); }
  ::placeholder { color: var(--text-faint); opacity: 1; }

  /* ── Dark-surface override ───────────────────────────────────────────────
     One rule instead of repeating `color: var(--text-inverse)` on every
     heading over a scrim, the footer or a horizon fill. .tr-on-dark h1 is
     (0,1,1) and beats the bare h1 (0,0,1) above. Apply to the wrapper. */
  .tr-on-dark,
  .tr-on-dark :is(h1,h2,h3,h4,h5,h6),
  .tr-on-dark .tr-card__title { color: var(--text-inverse); }
  .tr-on-dark :is(p,li,dd) { color: var(--text-inverse-muted); }
  .tr-on-dark a { color: var(--text-inverse); }
  .tr-on-dark a:hover { color: var(--sun-300); }
  .tr-on-dark .tr-eyebrow { color: var(--sea-300); }
  .tr-on-dark :focus-visible { box-shadow: var(--ring-focus-inverse); }

  /* ── JS presence gate ────────────────────────────────────────────────────
     base.html adds .tr-js during head parse. Scoping x-cloak to it is what
     makes every Alpine widget degrade instead of disappearing: with JS off
     the class is absent, x-cloak is inert, and drawers/submenus render as
     plain nested lists. */
  .tr-js [x-cloak] { display: none !important; }
  /* The .tr-js-only / .tr-no-js-only display gates live in the utilities
     layer, not here: component rules such as .tr-icon-btn sit in the later
     `chrome` layer and would otherwise win on layer order alone, regardless
     of specificity, leaving JS-only controls visible without JS. */


  /* Skip link — first focusable element in the document. */
  .tr-skip {
    position: absolute; inset-inline-start: var(--space-4); inset-block-start: -100%;
    z-index: var(--z-toast);
    padding: var(--space-3) var(--space-5);
    background: var(--cobalt-700); color: var(--text-inverse);
    font-size: var(--text-sm); font-weight: var(--fw-semibold);
    border-radius: 0 0 var(--radius-md) var(--radius-md);
  }
  .tr-skip:focus { inset-block-start: 0; color: var(--text-inverse); }

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

  /* The eyebrow — Unbounded, small, wide, uppercase. Marks every section. */
  .tr-eyebrow {
    font-family: var(--type-eyebrow-family);
    font-size: var(--type-eyebrow-size);
    font-weight: var(--type-eyebrow-weight);
    letter-spacing: var(--type-eyebrow-ls);
    text-transform: var(--type-eyebrow-transform);
    color: var(--text-muted);
  }

  /* Data — temperatures, prices, counts. Always the mono face. */
  .tr-data {
    font-family: var(--type-data-family);
    font-size: var(--type-data-size);
    font-weight: var(--type-data-weight);
    font-variant-numeric: tabular-nums;
  }
}

/* ── Long-form article body ───────────────────────────────────────────────────
   Applied as class="tr-prose prose" — the second class is deliberate: core's
   lightbox.js has a hardcoded selector list that includes `.prose img`, so
   adding it wires up image lightboxing for free.
   ───────────────────────────────────────────────────────────────────────── */
@layer prose {
  .tr-prose {
    max-width: var(--measure-prose);
    font-size: var(--type-prose-size);
    line-height: var(--type-prose-lh);
    color: var(--text-body);
  }
  .tr-prose > h2 { margin: var(--space-9) 0 var(--space-4); font-size: var(--text-2xl); }
  .tr-prose > h3 { margin: var(--space-8) 0 var(--space-3); font-size: var(--text-xl); }
  .tr-prose > h4 { margin: var(--space-7) 0 var(--space-3); font-size: var(--text-lg); }
  .tr-prose > p,
  .tr-prose > ul,
  .tr-prose > ol { margin-bottom: var(--space-6); }

  .tr-prose a { border-bottom: var(--border-w-hair) solid var(--cobalt-200); }
  .tr-prose a:hover { border-bottom-color: var(--cobalt-500); }

  /* Editors paste images straight into the body; keep them on the grid. */
  .tr-prose :is(img,figure,iframe,video) { margin: var(--space-7) 0; border-radius: var(--radius-media); }
  .tr-prose img { height: auto; }
  .tr-prose figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-xs); line-height: var(--lh-normal); color: var(--text-muted);
  }
  .tr-prose iframe { max-width: 100%; border: 0; }

  /* Wide content must scroll inside its own box, never the page. */
  .tr-prose :is(pre,table) { overflow-x: auto; }
  .tr-prose pre {
    padding: var(--space-5); margin: var(--space-7) 0;
    background: var(--wash-900); color: var(--wash-100);
    border-radius: var(--radius-md); font-size: var(--text-sm); line-height: var(--lh-normal);
  }
  .tr-prose :not(pre) > code {
    padding: .15em .4em;
    background: var(--surface-sunken); border-radius: var(--radius-xs);
    color: var(--cobalt-800);
  }
  .tr-prose table { display: block; max-width: 100%; font-size: var(--text-sm); }

  /* Search-result highlight (.Highlight ships <mark> from the core). */
  .tr-prose mark, mark {
    padding: .05em .2em; background: var(--sun-100);
    color: var(--text-strong); border-radius: var(--radius-xs);
  }

  /* Widget bodies arrive bluemonday-sanitized: class and style are stripped,
     so they can only be styled by descendant selectors. Give them prose. */
  .tr-widget__body { font-size: var(--text-sm); line-height: var(--lh-relaxed); }
  .tr-widget__body :is(ul,ol) { padding-inline-start: 1.15em; }
  .tr-widget__body img { border-radius: var(--radius-media); }
}