/* ============================================================ 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, 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; } /* viewport-fit=cover layouts (arena/auth/agent/agent_auth/board/guest_v2): cover is what makes env(safe-area-inset-*) non-zero, so the fixed bottom bars' env() padding finally works — but it also lets the page run under a landscape notch. Inset the page by the side insets (0 on desktop, in portrait, and on notch-less screens). The HotelOS Mobile shells (field) inset .hom-shell themselves and do NOT carry this class. */ body.hos-safe-x { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } /* ...and FIXED chrome ignores the body's padding, so every edge-anchored fixed element on those layouts adds the side inset itself (audited at 844x390 with a simulated 47px notch). Each value is the element's own inset + env(): identical wherever env() is 0. Full-viewport wrappers (drawers, sheets) pad themselves so the panel inside clears the notch; scrims stay full-bleed. */ body.hos-safe-x .hos-shell-hamburger { left: calc(var(--space-3) + env(safe-area-inset-left, 0px)); } @media (max-width: 1023px) { body.hos-safe-x .hos-shell-sidebar { width: calc(var(--sidebar-w) + env(safe-area-inset-left, 0px)); padding-left: calc(var(--space-4) + env(safe-area-inset-left, 0px)); } } body.hos-safe-x .hos-odrawer-panel { padding-right: env(safe-area-inset-right, 0px); } body.hos-safe-x :is(.os-drawer, .os-sheet, .os-filter-sheet) { padding-left: env(safe-area-inset-left, 0px); padding-right: env(safe-area-inset-right, 0px); } body.hos-safe-x :is(.hos-flasherr, .hos-flashnote), body.hos-safe-x :is(.toast-stack, .os-toast-stack):is(.tr, .os-tr) { right: calc(var(--space-4) + env(safe-area-inset-right, 0px)); } @media (max-width: 860px) { /* the phone tab bar + wizard foot are fixed only at this breakpoint */ body.hos-safe-x .hos-gp-tabbar { padding-left: calc(10px + env(safe-area-inset-left, 0px)); padding-right: calc(10px + env(safe-area-inset-right, 0px)); } body.hos-safe-x .ec .ec-wfoot { padding-left: calc(var(--gutter) + env(safe-area-inset-left, 0px)); padding-right: calc(var(--gutter) + env(safe-area-inset-right, 0px)); } } /* :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

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

. */ :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; } /* ----------

disclosure ---------- Kill the native marker so a reads as a clean button, not a