/* ============================================================
   HotelOS DS — BASE ELEMENT layer
   ------------------------------------------------------------
   Layer 1 of 3 (base -> tokens -> components). Loads FIRST, before os_ds.

   WHAT THIS IS: the browser-reset layer. Box model, body/heading defaults,
   link and button normalisation, scrollbars, <summary> marker, reduced motion.

   WHY THE CHILD DS OWNS IT (and os-ds does not): os-ds ships NO bare-element
   base, because it was extracted from DiveOS — a Tailwind app, where Tailwind
   Preflight already provides one. HotelOS apps are not Tailwind, so there is
   no Preflight and the child DS must supply the equivalent. The rules below
   are deliberately Preflight-shaped (`box-sizing: border-box` on *, margin
   zeroing on body/headings/p). This is a legitimate DS layer, not leftovers.

   Pushing it up into os-ds would be wrong: DiveOS would get a second reset
   layered on top of Preflight.

   LOAD ORDER IS LOAD-BEARING. This file MUST stay before os_ds. `.hos-ds h1`
   and the gem's `.os-page-band h1` are both specificity (0,1,1), so loading
   this after os_ds makes it win and silently changes every page-band heading's
   line-height (1.25 -> 1.1) and tracking (-0.025em -> -0.01em).

   The `.hos-ds` scope hook is the body class (layouts/arena.html.erb:47).
   Kept as-is on purpose: renaming it is a separate, mechanical change.
   See tasks/hotelos-ds-plan.md.
   ============================================================ */

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

/* ---------- Document + typography defaults ---------- */
html.hos-ds, .hos-ds { -webkit-text-size-adjust: 100%; }
body.hos-ds {
  margin: 0; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--fw-regular);
  line-height: var(--lh-normal); color: var(--ink); background: var(--canvas);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
/* :where() pins this to (0,0,1) — the element alone — so it can NEVER outrank a
   component class. Before this it was (0,1,1) and beat every single-class gem
   component that lands on a heading: .os-page-hero__title rendered 600 instead
   of its own 700, and .os-form-section__title / .os-page-head__title /
   .os-confirm__title / .os-eyebrow / .hos-dhead__name / .hos-manifest__title
   were all silently losing font-family, weight, colour or tracking. Nothing
   surfaced it — hallmark passed, tests passed, it rendered "fine", just wrong.
   This is a FALLBACK layer for bare headings; components must win.
   Bonus: it also retires the load-order hazard documented above — the gem's
   .os-page-band h1 (0,1,1) now wins on merit, not on file order. */
:where(.hos-ds) h1, :where(.hos-ds) h2, :where(.hos-ds) h3,
:where(.hos-ds) h4, :where(.hos-ds) h5, :where(.hos-ds) h6 {
  margin: 0; font-family: var(--font-display); font-weight: var(--fw-semibold); color: var(--ink);
  line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
}
/* `:where()` for the SAME reason as the headings above, and it was the one line
   in this block that missed it. At (0,1,1) this reset outranked every gem
   component rule that gives a <p> a margin — silently. Two shipped effects
   measured on 2026-07-28: `.os-form-section__subtitle` (gem, `margin: 6px 0 0`,
   (0,1,0)) rendered at 0px, so "Matched to EK652" butted the section head on
   every arrival step; and the portal's own `.hos-gp-formlead` lost its
   title→subtitle gap. Zero-specificity still beats the UA sheet's 1em, so the
   reset itself is unchanged for a bare <p>. */
:where(.hos-ds) p { margin: 0; }
.hos-ds a { color: var(--accent); text-decoration: none; }
.hos-ds a:hover { text-decoration: none; }
.hos-ds button { font-family: inherit; }
.hos-ds code, .hos-ds kbd, .hos-ds samp, .hos-ds pre { font-family: var(--font-mono); font-size: 0.92em; }
.hos-ds ::selection { background: var(--accent-soft); color: var(--accent-strong); }

/* ---------- Scrollbars ---------- */
.hos-ds * { scrollbar-width: thin; scrollbar-color: var(--hairline-strong) transparent; }
.hos-ds *::-webkit-scrollbar { width: 10px; height: 10px; }
.hos-ds *::-webkit-scrollbar-thumb { background: var(--hairline-strong); border-radius: var(--radius-pill); border: 3px solid transparent; background-clip: content-box; }
.hos-ds *::-webkit-scrollbar-track { background: transparent; }

/* ---------- <details> disclosure ----------
   Kill the native marker so a <summary> reads as a clean button, not a <select>. */
summary { list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::marker { content: ""; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hos-ds *, .hos-ds *::before, .hos-ds *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* The global hide utility (!241 browser QA). os-ds was extracted from DiveOS,
   a Tailwind app where the `.hidden` utility comes with the framework; the
   ported wizard/drawer markup toggles that class, but no HotelOS layer ever
   defined it globally — every "hidden" wizard step rendered stacked. */
.hidden { display: none !important; }

/* Visually-hidden (screen-reader-only) — same Tailwind-provenance family as
   .hidden above; the ported markup expects it. */
.hos-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }