/* ===================================================================
   TDS RESET & LAYOUT PRIMITIVES
   =================================================================== */

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

body {
  margin: 0;
  padding: 0;
  background-color: var(--tds-canvas);
  color: var(--tds-ink-primary);
  font-family: var(--font-stack);
  letter-spacing: -0.3px;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.tds-tap, .tds-touch {
  transition: transform 0.14s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease, background-color 0.15s ease;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.tds-tap:active, .tds-touch:active {
  transform: scale(0.965);
  opacity: 0.85;
}

.tds-fluid-shell {
  width: 100%;
  max-width: var(--shell-max-width);
  margin: 0 auto;
  padding: clamp(16px, 3vw, 32px);
  padding-bottom: calc(var(--tds-dock-clear) + 16px);
  flex: 1;
}

@media (min-width: 768px) {
  .tds-fluid-shell {
    padding-bottom: clamp(24px, 3vw, 40px);
  }
}

.tds-fluid-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.8px;
  line-height: 1.2;
}

.tds-headline {
  font-size: clamp(22px, 3.5vw, 30px);
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.6px;
  color: var(--tds-ink-primary);
}

.tds-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(12px, 2vw, 20px);
}

/* Accessibility: honor reduced-motion preferences — the serenity must not
   depend on animation. Shimmer settles to a calm static surface. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .tds-skeleton { animation: none; background: var(--tds-shimmer-base); }
}

/* Unified keyboard focus: every interactive element gets the token ring.
   Inputs keep their border-color focus style; this covers buttons/links. */
:where(button, [role="button"], a, summary):focus-visible {
  outline: 3px solid var(--tds-blue-glow);
  outline-offset: 2px;
  border-radius: 8px;
}

/* The `hidden` ATTRIBUTE wins, always. The browser's own `[hidden]` rule is
   an unlayered UA default, so any author class that sets `display` beats it:
   a `.tds-btn` (display: inline-flex) or a `.tds-card` stayed on screen with
   `hidden` set, and `el.hidden = true` did nothing. Found three times — the
   dirty indicator got its own patched line in components.css, a FleetLens
   page shipped `.charge-root [hidden] { display: none !important }` of its
   own, and the settings map's « Back to the saved view » button showed up
   with nothing to go back to. One rule, in the reset, where it belongs. */
[hidden] { display: none !important; }

/* A TOUCH DEVICE NEVER ZOOMS TO READ A FIELD (0.1.59).

   Mobile Safari zooms the whole page when a text control it is about to
   focus computes under 16px. Nothing is broken: the browser has decided the
   field is too small to read and has magnified the document to make it
   legible. What the reader sees is a layout that jumps and then sits wider
   than the screen, and they must pinch back out BY HAND, on every field, on
   every visit. Reported on a consumer's mobile search field; measured here
   at 375px, where every `.tds-input` computed 15px.

   The other fix — `maximum-scale=1` / `user-scalable=no` in the viewport
   meta — is forbidden: it buys one person's convenience by taking pinch-zoom
   away from everyone whose eyes need it. 16px is a FLOOR, not a size: a
   control is free to be bigger (`.tds-giant-input`, `.tds-otp-box`), never
   smaller.

   `any-pointer` rather than `pointer`: an iPad driven from a trackpad
   reports a FINE primary pointer while its touchscreen — and Safari's zoom
   heuristic — are both still there.

   This is the floor for controls the design system does not style. It sits
   at one element of specificity, so every `.tds-*` class outranks it and no
   component loses its own typography; the classes that DO own a control
   carry the floor themselves, in components.css. */
@media (any-pointer: coarse) {
  input, textarea, select { font-size: 16px; }
}