/* ============================================================================
   TerraMap — base
   Reset, document defaults, typography, layout primitives, accessibility.
   Tokens come from docs/design-tokens.css, linked before this file. Nothing
   here re-declares a token value.
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* `clip`, not `hidden`. overflow-x:hidden on <body> forces overflow-y to
     `auto`, which turns body into its own scroll container and stops the
     document scrolling entirely — window.scrollY pinned at 0. `clip` on <html>
     contains stray horizontal overflow without creating a scroll container,
     so sticky positioning keeps working too. */
  overflow-x: clip;
  /* The sticky navbar would otherwise cover an anchored section heading. */
  scroll-padding-block-start: calc(var(--tm-navbar-height) + var(--tm-space-4));
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--tm-bg);
  color: var(--tm-text);
  font-family: var(--tm-font-sans);
  font-size: var(--tm-text-body);
  line-height: var(--tm-leading-normal);
  font-feature-settings: var(--tm-font-features);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }

img, svg, video, canvas { display: block; max-inline-size: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea {
  font: inherit;
  color: inherit;
  font-feature-settings: inherit;
}

button { background: none; border: 0; padding: 0; cursor: pointer; }

:target { scroll-margin-block-start: calc(var(--tm-navbar-height) + var(--tm-space-5)); }

/* Any section that can be linked to, whether or not :target currently matches.
   Arriving at /#platform from another page, and clicking Platform while
   already on the homepage, are different code paths in the browser; only one
   of them reliably has :target applied at scroll time, and without this the
   fixed navbar covers the heading in the other. */
.tm-section[id] {
  scroll-margin-block-start: calc(var(--tm-navbar-height) + var(--tm-space-5));
}

/* ── Focus ────────────────────────────────────────────────────────────────
   Visible on keyboard only. A permanent ring on mouse click is noise; no ring
   at all is an accessibility failure. */
:focus { outline: none; }

:focus-visible {
  outline: var(--tm-focus-width) solid var(--tm-primary);
  outline-offset: var(--tm-focus-offset);
  border-radius: var(--tm-radius-xs);
}

::selection {
  background: var(--tm-primary-subtle);
  color: var(--tm-text);
}

/* ── Typography ─────────────────────────────────────────────────────────── */

.tm-eyebrow {
  font-size: var(--tm-text-caption);
  font-weight: var(--tm-weight-medium);
  letter-spacing: var(--tm-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--tm-text-muted);
  margin-block-end: var(--tm-space-3);
}

.tm-hero-title {
  font-size: var(--tm-text-hero);
  line-height: var(--tm-leading-hero);
  letter-spacing: var(--tm-tracking-hero);
  font-weight: var(--tm-weight-semibold);
  font-feature-settings: var(--tm-font-features-display);
  text-wrap: balance;
}

/* Both hero lines are the SAME size, weight and colour. Emphasising the cost
   sentence would turn the page into a discount ad — see design-system §1. */
.tm-hero-title span { display: block; }

h1, .tm-h1 {
  font-size: var(--tm-text-h1);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-h1);
  font-weight: var(--tm-weight-semibold);
  font-feature-settings: var(--tm-font-features-display);
  text-wrap: balance;
}

h2, .tm-h2 {
  font-size: var(--tm-text-h2);
  line-height: var(--tm-leading-tight);
  letter-spacing: var(--tm-tracking-h2);
  font-weight: var(--tm-weight-semibold);
  font-feature-settings: var(--tm-font-features-display);
  text-wrap: balance;
}

h3, .tm-h3 {
  font-size: var(--tm-text-h3);
  line-height: var(--tm-leading-snug);
  letter-spacing: var(--tm-tracking-h3);
  font-weight: var(--tm-weight-semibold);
}

.tm-lead {
  font-size: var(--tm-text-body-lg);
  line-height: var(--tm-leading-relaxed);
  color: var(--tm-text-muted);
  max-inline-size: var(--tm-measure-narrow);
}

.tm-body   { font-size: var(--tm-text-body); max-inline-size: var(--tm-measure); }
.tm-small  { font-size: var(--tm-text-sm); }
.tm-muted  { color: var(--tm-text-muted); }
.tm-subtle { color: var(--tm-text-subtle); }

code, kbd, samp, pre {
  font-family: var(--tm-font-mono);
  font-variant-ligatures: none;   /* API keys and URLs stay literal */
}

/* ── Layout ─────────────────────────────────────────────────────────────── */

.tm-container {
  inline-size: 100%;
  max-inline-size: var(--tm-container);
  margin-inline: auto;
  padding-inline: var(--tm-gutter);
}

.tm-container--wide { max-inline-size: var(--tm-container-wide); }
.tm-container--prose { max-inline-size: var(--tm-container-prose); }

.tm-section { padding-block: var(--tm-section-y); }
.tm-section--tight { padding-block: var(--tm-section-y-tight); }
.tm-section--rule { border-block-start: 1px solid var(--tm-divider); }

.tm-section-head { max-inline-size: 56ch; margin-block-end: var(--tm-space-7); }
.tm-section-head > .tm-lead { margin-block-start: var(--tm-space-4); }

/* ── Accessibility helpers ──────────────────────────────────────────────── */

.tm-skip-link {
  position: absolute;
  inset-block-start: var(--tm-space-2);
  inset-inline-start: var(--tm-space-2);
  z-index: var(--tm-z-toast);
  padding: var(--tm-space-3) var(--tm-space-4);
  background: var(--tm-surface);
  color: var(--tm-text);
  border: 1px solid var(--tm-border-strong);
  border-radius: var(--tm-radius-md);
  box-shadow: var(--tm-shadow-md);
  font-size: var(--tm-text-sm);
  font-weight: var(--tm-weight-medium);
  transform: translateY(-200%);
}

.tm-skip-link:focus { transform: translateY(0); }

/* `hidden` must actually hide.
   The UA stylesheet's [hidden] { display: none } loses to ANY author rule that
   sets display — a .tm-place-card { display: grid } left the card on screen as
   an empty panel even while el.hidden was true. Author-origin and !important
   so a component can never re-open that hole. */
[hidden] { display: none !important; }

.tm-visually-hidden {
  position: absolute;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Purely presentational rules and dividers must not reach the a11y tree. */
[aria-hidden="true"] { pointer-events: none; }
.tm-rule { border: 0; border-block-start: 1px solid var(--tm-divider); margin: 0; }