/* os-ds — flattened CSS bundle for Propshaft/importmap consumers. GENERATED by bin/build_css_bundle.rb — do not edit by hand. Regenerate with `rake os_ds:bundle` (or run the script directly). */ /* ===== os_ds/tokens.css ===== */ /* * tokens.css — DiveOS design token ENTRY (v4 — repo spec: sky-700 + Inter) * * Two-layer token architecture (split 2026-07-11, os-ds extraction step 1): * - tokens/primitives.css — product-INVARIANT raw scales (ramps, spacing, * type, radius, shadow, z, motion, layout). Shared byte-for-byte across * DiveOS / HotelOS; never referenced by components directly. * - tokens/semantic.css — the THEME surface: role mappings (neutrals, * accent, status, input, notifications, interaction states) + fonts. * The ~10% a product re-brands; components consume ONLY these. * A consuming product re-themes by overriding tokens/semantic.css alone. * * v4 migration (2026-06-06): aligned to the diveOS-design-system repo * (gitlab.nsfrg.my:novas/diveOS-design-system), the locked design source of * truth — body font Inter, accent sky-700 #0369A1, cool-gray neutrals, * ramp-based status tints, dark mode removed (light-only). * * Loaded via application.css before all other stylesheets. The token @imports * below are inlined by postcss-import at build time into one :root cascade; * order is cosmetic since every var() resolves at use-time. */ /* Self-hosted webfonts (woff2 face declarations) — replaces the former remote Google Fonts imports. A consuming app tightened its CSP to `font_src :self` with no external stylesheet host, which blocked the remote font import and dropped the type. Fonts now ship in the gem (app/assets/fonts, on the engine asset path) and resolve via Propshaft's url() rewriting. Declared here at the top of the token entry so the face rules land near the top of the flattened bundle, ahead of any rule that uses the families. Material Symbols was dropped (dead — no consumer). */ /* THE @import STATEMENTS MUST STAY FIRST. CSS ignores any `@import` that appears after another statement, and `@font-face` counts. From v0.16.1 — when the fonts were self-hosted and these face rules were added ABOVE the imports — both token imports became invalid, so a consumer that loads THIS FILE (rather than the flattened bundle) silently lost the entire token layer: every primitive and every semantic role. It stayed invisible for thirteen releases because the two consumers load os-ds differently. arena-ops loads the flattened `os_ds.css`, where the builder has already inlined these imports, so it is unaffected. DiveOS imports the SOURCE files through postcss-import, which honoured the spec, dropped both, and left `--accent`, `--ink`, `--surface` and every scale undefined. Its Tailwind theme hardcodes fallbacks (`var(--accent, #0369A1)`) so utilities kept working — but os-ds components carry no fallback, so `.dv-btn--primary` computed a TRANSPARENT background there. Found by rendering the real app, not by reading CSS: the class-level diff between versions reported zero regressions, because tokens are not classes. */ /* * tokens/primitives.css — PRODUCT-INVARIANT design primitives. * * The raw scales every product shares byte-for-byte: colour ramps, the * spacing / type / radius / shadow scales, z-index stack, motion timings, * and structural layout defaults. These are the SOURCE the semantic layer * (tokens/semantic.css) maps into roles — components NEVER reference a * primitive directly, only its semantic alias. * * When the design system is extracted into the shared os-ds gem, this file * ships once and is identical across DiveOS / HotelOS. A product re-themes by * overriding tokens/semantic.css, not this file (it may ADD a brand ramp here * — e.g. a --teal-* scale — then point --accent at it in its semantic layer). * * Loaded via tokens.css (the entry) before tokens/semantic.css. Ordering is * cosmetic: all vars land in one :root cascade and var() resolves at use-time. */ :root { /* ─── Foundation ramps (semantic source + showcase swatches) ─────── */ --gray-50: #F9FAFB; --gray-100: #F3F4F6; --gray-200: #E5E7EB; --gray-300: #D1D5DB; --gray-400: #9CA3AF; --gray-500: #6B7280; --gray-600: #4B5563; --gray-700: #374151; --gray-800: #1F2937; --gray-900: #111827; --gray-950: #030712; --sky-50: #F0F9FF; --sky-100: #E0F2FE; --sky-200: #BAE6FD; --sky-300: #7DD3FC; --sky-400: #38BDF8; --sky-500: #0EA5E9; --sky-600: #0284C7; --sky-700: #0369A1; --sky-800: #075985; --sky-900: #0C4A6E; --sky-950: #082F49; --amber-50: #FFFBEB; --amber-100: #FEF3C7; --amber-200: #FDE68A; --amber-300: #FCD34D; --amber-400: #FBBF24; --amber-500: #F59E0B; --amber-600: #D97706; --amber-700: #B45309; --amber-800: #92400E; --amber-900: #78350F; --amber-950: #451A03; --green-50: #F0FDF4; --green-100: #DCFCE7; --green-200: #BBF7D0; --green-300: #86EFAC; --green-400: #4ADE80; --green-500: #22C55E; --green-600: #16A34A; --green-700: #15803D; --green-800: #166534; --green-900: #14532D; --green-950: #052E16; --red-50: #FEF2F2; --red-100: #FEE2E2; --red-200: #FECACA; --red-300: #FCA5A5; --red-400: #F87171; --red-500: #EF4444; --red-600: #DC2626; --red-700: #B91C1C; --red-800: #991B1B; --red-900: #7F1D1D; --red-950: #450A0A; --slate-50: #F8FAFC; --slate-100: #F1F5F9; --slate-200: #E2E8F0; --slate-300: #CBD5E1; --slate-400: #94A3B8; --slate-500: #64748B; --slate-600: #475569; --slate-700: #334155; --slate-800: #1E293B; --slate-900: #0F172A; --slate-950: #020617; --rose-50: #FFF1F2; --rose-100: #FFE4E6; --rose-200: #FECDD3; --rose-300: #FDA4AF; --rose-400: #FB7185; --rose-500: #F43F5E; --rose-600: #E11D48; --rose-700: #BE123C; --rose-800: #9F1239; --rose-900: #881337; --rose-950: #4C0519; --stone-50: #FAFAF9; --stone-100: #F5F5F4; --stone-200: #E7E5E4; --stone-300: #D6D3D1; --stone-400: #A8A29E; --stone-500: #78716C; --stone-600: #57534E; --stone-700: #44403C; --stone-800: #292524; --stone-900: #1C1917; --stone-950: #0C0A09; /* ─── Spacing scale — 8-point system (4px sub-grid) ────────────────── One unit = 4px. Use these for all component padding / gap / margin so primitives stay on the grid. Half-step (--space-0-5 = 2px) is reserved for hairline-level nudges only (icon optical alignment), not layout. */ --space-0-5: 2px; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ─── Type scale — even steps on the system (no odd/half sizes) ─────── Component font-size MUST use these tokens, never a raw px. The old 11/12.5/13/13.5/15px values snap to the nearest step. Bigger one-off display/hero sizes (>28) stay raw — they're not primitives. */ --text-2xs: 10px; /* micro labels, table th eyebrows */ --text-xs: 12px; /* eyebrows, sub-lines, meta, chips (← 11/11.5/12.5) */ --text-sm: 14px; /* body / primary cell / card heading (← 13/13.5/15) */ --text-md: 16px; /* prominent body, small headings (← 15.5/17) */ --text-lg: 18px; /* card/section headings (← 19) */ --text-xl: 20px; /* large headings (← 21/22) */ --text-2xl: 24px; /* (← 23/25/26) */ --text-3xl: 28px; /* page titles (← 27/30/31/32) */ /* ─── Line-height scale — paired 1:1 with the type scale ────────────── Practical UI, Ch.5 (Typography): line-height is ABSOLUTE and lands on the 4pt vertical grid (so text aligns to the layout rhythm), the RATIO DECREASES as font-size grows (headings tighter than body), and body text stays ≥1.5 for readability. Each --leading-* is the leading for the same-suffix --text-*; a text role sets font-size AND its paired line-height, never a raw ratio. Book anchors: H3 24/32, H4 20/28, Small 16/24, Tiny 14/20. */ --leading-2xs: 14px; /* 10px · 1.40 — micro labels (single-line) */ --leading-xs: 18px; /* 12px · 1.50 — meta / small print */ --leading-sm: 22px; /* 14px · 1.57 — default body (≥1.5) */ --leading-md: 24px; /* 16px · 1.50 — body / small heading (book Small) */ --leading-lg: 28px; /* 18px · 1.56 — roomy body / card heading */ --leading-xl: 28px; /* 20px · 1.40 — heading (book H4 20/28) */ --leading-2xl: 32px; /* 24px · 1.33 — heading (book H3 24/32) */ --leading-3xl: 36px; /* 28px · 1.29 — page title (book H2/H3 pattern) */ --leading-relaxed: 1.6; /* long-form prose paragraphs (unitless, opt-in) */ /* ─── Border radius scale — small / medium / large intent ──────────── Practical UI uses 3 radii (small/medium/large). Ours is finer for a dense UI, but maps to the same intent. --radius is the default; --radius-md is a back-compat alias of it (they were a duplicate 8px). */ --radius-sm: 6px; /* small — chips, inputs, tight controls */ --radius: 8px; /* medium (default) — buttons, cards */ --radius-md: var(--radius); /* alias of the default (dedup: was 8px twice) */ --radius-lg: 10px; /* large — panels, popovers */ --radius-xl: 14px; /* x-large — hero / sheet surfaces */ --radius-2xl: 18px; /* xx-large — the FAB (.os-fab) only, so far. Added for a 56px floating button: at that size --radius-xl reads as a plain square and --radius-pill as a circle, and neither is the intended "softened square". Reach for this only on a large standalone control, never on a card or panel. */ --radius-pill: 9999px; /* ─── Control size scale — the height of an INTERACTIVE control ────── Every control in the system (button, input, select, filter pill, segmented option) is one of seven heights. Before this scale they were seven independent LITERALS, re-typed per component: .os-btn 36px, --sm 32px, --field 46px, --touch 48px, and forms.css / dv_select.css spelling those same four numbers again from memory. Nothing tied them together, so "the field height" was a number you had to know rather than a token you could read — and the numbers had already begun to drift (dv_select's small variant is 34px, not the 32px --sm it means). WHY a scale AND a resolved trio (below), rather than one token per component: a control's height is a property of the SURFACE it sits on, not of the control. A desk admin table wants 36px; a handheld used one-handed on a boat, in sun, wants 48px. The alternative — adding a `--field` twin to each component — is N patches that drift apart, which is exactly how we got here. Density is set ONCE on a layout wrapper (see tokens/density.css) and every control inside re-sizes. --control-h-md (40px) is NEW: the missing rung between --sm (32) and --field (46). It exists as a density STEP, not as a per-component modifier, so it cannot become the next one-off. Paired --control-pad-x-* / --control-fs-* keep a control's horizontal padding and label size proportional to its height; a 48px control with 14px side padding reads as a slab. */ --control-h-xs: 22px; /* inline action beside a badge (.os-btn--xs) */ --control-h-sm: 32px; /* dense desktop row (.os-btn--sm) */ --control-h-base: 36px; /* THE default — desktop admin (.os-btn) */ --control-h-md: 40px; /* comfortable desktop / small tablet (new) */ --control-h-lg: 42px; /* prominent CTA (.os-btn--lg) */ --control-h-field: 46px; /* canonical form-control height (.os-field) */ --control-h-touch: 48px; /* 48pt minimum touch target (Fitts's Law) */ --control-pad-x-xs: var(--space-2); /* 8px */ --control-pad-x-sm: var(--space-3); /* 12px */ --control-pad-x-base: 14px; /* px-3.5 — off-grid, see NOTE */ --control-pad-x-md: 14px; --control-pad-x-lg: var(--space-4); /* 16px */ --control-pad-x-field: 14px; --control-pad-x-touch: var(--space-5); /* 20px */ /* NOTE: 14px is not on the 4px spacing grid. It is the shipped .os-btn padding (Tailwind px-3.5) and re-grid-ing it would resize every button in both products — a token contract cannot also be a visual redesign. Left as a literal so the off-grid value is visible, not laundered. */ --control-fs-xs: var(--text-2xs); --control-fs-sm: var(--text-xs); --control-fs-base: var(--text-sm); --control-fs-md: var(--text-sm); --control-fs-lg: var(--text-sm); --control-fs-field: var(--text-sm); --control-fs-touch: var(--text-sm); /* The RESOLVED trio every interactive component reads. Defaults to the base step; a density scope (tokens/density.css) re-points these three on a wrapper and the whole subtree follows. A component that must NOT follow density re-declares them on itself — which is precisely how the existing size modifiers stay pinned (see buttons.css). */ --control-h: var(--control-h-base); --control-pad-x: var(--control-pad-x-base); --control-fs: var(--control-fs-base); /* ─── Elevation — TWO tiers (Practical UI Ch.3: ~2 elevations is enough) ── `raised` = anything lifted off the page (cards, menus, popovers, dropdowns). `overlay` = surfaces floating above the page (drawers, modals, toasts). These two are the only concrete shadow values; the legacy --shadow-* names below all derive from them (back-compat), so a component can keep its old token and still get the collapsed 2-tier system. The card "ring" is a structural hairline border, composited on top of `raised` — not a 3rd elevation. (Visual-reviewed before/after 2026-07-11.) */ --elevation-raised: 0 1px 2px rgba(17, 24, 39, 0.06), 0 2px 6px -1px rgba(17, 24, 39, 0.05); --elevation-overlay: 0 16px 40px -12px rgba(17, 24, 39, 0.20), 0 6px 16px -8px rgba(17, 24, 39, 0.10); /* Legacy shadow names → the 2 tiers (was 5 distinct values). --shadow-sm is the exception: it's a control WHISPER (segmented options, toggle knobs, small pills), NOT a real elevation, so it keeps its subtle 1-layer value — folding it into --elevation-raised made those inline controls read too heavy. --shadow-md is the actual raised tier. */ --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.05); --shadow-md: var(--elevation-raised); --shadow-card: 0 1px 2px rgba(17, 24, 39, 0.05), 0 0 0 1px var(--hairline); /* raised + hairline ring */ --shadow-hover: var(--elevation-raised), 0 0 0 1px var(--hairline); /* card hover = raised + ring */ --shadow-panel: var(--elevation-overlay); /* ─── Z-index stack ──────────────────────────────────────────────── */ --z-toast: 60; --z-modal: 50; --z-panel: 40; --z-dropdown: 30; --z-tooltip: 20; /* ─── Motion ─────────────────────────────────────────────────────── */ --ease-out-quart: cubic-bezier(0.32, 0.72, 0, 1); --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --t-fast: 120ms; --t-med: 180ms; --t-slow: 240ms; /* ─── Layout primitives ─────────────────────────────────────────── */ --sidebar-w: 240px; --panel-w: 520px; /* ─── Width scale — floating-surface widths (popovers, dialogs, panels) ── A fixed-width scale so a menu / popover / dialog / side-panel snaps to a named step instead of a raw px. Follows the de-facto container-width convention (Tailwind max-width, Chakra `sizes`) — 4rem steps; Carbon & Polaris drive layout from grid + spacing and ship no floating-surface width primitive, so this is the closest applicable reference. Component widths (os-pop 320, os-popover 380, side-panel ~560) snap to these. */ --width-xs: 320px; /* dropdowns / pickers (os-pop) */ --width-sm: 384px; /* small dialogs / popovers (os-popover; 380 → 384) */ --width-md: 448px; /* medium dialogs */ --width-lg: 512px; /* large dialogs / confirm */ --width-xl: 576px; /* side panels / sheets (~560 → 576) */ /* Page width tiers — the content column ceiling per archetype. The shell (.diveos-content) defaults to --page-wide; forms/wizards opt into --narrow via content_for(:page_width). Below the ceiling the fluid --gutter breathes; past it, margin-inline:auto converts surplus to symmetric side space. THREE tiers since v1.11.0. It was two, on the reasoning that "reading pages stay wide and cap PROSE with --measure" — which holds for an article and fails for a DOCUMENT. A registration card, a folio, a checkout review, a statement: these are not prose, so --measure never engages, and they are not lists either, so --wide gives them a 1280px field of mostly-empty row. Their content is field/value pairs, a signature block, a party table — structures that want to sit together, not stretch. --narrow is the other failure: a two-column field grid plus a signature pad does not survive 768px, so consumers were pinning their own local ~900-1000px values, which is how six different literals ended up in one app. PICK BY WHAT THE PAGE IS, not by how wide it looks right: --page-wide you are scanning MANY records (board, list, dashboard) --page-reading you are reading or signing ONE record (document, review, receipt) --page-narrow you are answering questions in order (form, wizard, single column) */ --page-wide: 1280px; /* default: lists, kanban, calendar, dashboard, detail, settings */ --page-reading: 960px; /* documents: registration cards, folios, statements, reviews */ --page-narrow: 768px; /* forms, wizards, focused reading */ /* Measure (max line length) SCALES DOWN as text grows — Practical UI Ch.4/5: optimal line length shrinks at larger sizes (~90ch small body → ~45ch display). Apply via .dv-measure (default) / --lg / --display; never on tables or cards. */ --measure: 68ch; /* default: 14–16px body — the reading cap */ --measure-lg: 56ch; /* 18–20px lead paragraphs / large body */ --measure-display: 45ch; /* 24px+ display / hero copy that wraps */ --gutter: clamp(16px, 4cqi, 64px); /* fluid side gutter (measured on the content pane) */ --content-max: var(--page-narrow); /* legacy alias the wizard CSS consumes (was undefined) */ } /* * tokens/semantic.css — the THEME surface (per-product override point). * * Maps the raw primitives (tokens/primitives.css) into named ROLES that * components consume: neutrals (canvas/surface/ink/…), the accent family, * status palette, input tokens, notification semantics, and interaction * states. This is the ~10% a product re-brands: swap the accent, the fonts, * or the status mapping here and every .dv-* component re-themes with no * component edits. * * In the shared os-ds gem this file ships as the DEFAULT (DiveOS: sky-700 / * Inter). A consuming app (HotelOS) overrides it with its own tokens/semantic.css * loaded after the gem's — same role names, different primitive targets. * * NOTE the dive-domain status names (briefing / inwater) live here: they are a * semantic/domain choice, so HotelOS replaces this block with its own statuses * rather than inheriting them. */ :root { /* ─── Typography — role fonts (a product may rebrand these) ──────────── Single typeface for UI: Inter for BOTH display/headings and body (General Sans was dropped — headings + body are now one family). Geist Mono for tabular numerals, IDs, timestamps, financial figures. --font-display is kept as a distinct token (same value as --font-sans) so heading call-sites keep their semantic name and can diverge later without a sweep. */ --font-display: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-sans: 'Inter', ui-sans-serif, system-ui, sans-serif; --font-mono: 'Geist Mono', ui-monospace, monospace; /* ─── Semantic neutrals (v4 — cool gray ramp aliases) ──────────────── */ --canvas: var(--gray-50); /* page bg */ --surface: #FFFFFF; /* cards, modals */ --surface-alt: var(--gray-100); /* header zone, sidebar, subtle distinction */ --hairline: var(--gray-200); /* default border */ --hairline-2: #F0F1F4; /* inner row separator */ --hairline-strong: var(--gray-300); /* active/focused border */ --ink: var(--gray-900); /* body + headings */ --muted: var(--gray-500); /* less prominent text */ --muted-2: #6A707A; /* captions, meta — darkened from gray-400 to clear 4.5:1 (Practical UI Ch.3 contrast; was 2.5:1) */ /* ─── Accent (v4 — sky-700, swappable per tenant) ───────────────────── --accent-rgb holds the accent's raw channels so the alpha-derived tokens (soft/softer/border here + input-border-focus/focus-ring/focus-ring-color below) compose from ONE source. A re-theming consumer overrides --accent AND --accent-rgb (two lines) and every derived surface — including focus rings — follows; before this, the six alphas were hardcoded to sky's channels, so swapping --accent alone left a half-sky UI. */ --accent: var(--sky-700); --accent-strong: var(--sky-800); --accent-rgb: 3, 105, 161; /* sky-700 channels; override when re-theming */ --accent-soft: rgba(var(--accent-rgb), 0.08); --accent-softer: rgba(var(--accent-rgb), 0.04); --accent-border: rgba(var(--accent-rgb), 0.26); --on-accent: #FFFFFF; /* text/glyphs on an accent fill (buttons, markers, pills) */ /* ─── v1/v2 compat aliases — back-compat for existing callsites ───── */ --bg: var(--canvas); --text-primary: var(--ink); --text-secondary: var(--gray-700); --text-muted: var(--muted); --border: var(--hairline); --border-strong: var(--hairline-strong); --accent-tint: var(--accent-soft); --accent-light: var(--sky-100); /* lit accent tint for current-step */ /* ─── Sequential data-viz ramp (NOT status colors) ───────────────── Monochromatic sky ramp for functional 5-step sequential data visualisations (e.g. pricing-zone bands). Purple/violet is banned; use these for any light→intense sequential encoding. Text on any step: --viz-ink (sky-800 stays readable on sky-50..400). */ --viz-1: var(--sky-50); --viz-2: var(--sky-100); --viz-3: var(--sky-200); --viz-4: var(--sky-300); --viz-5: var(--sky-400); --viz-ink: var(--sky-800); --sidebar-bg: var(--gray-100); --hover-warm: var(--gray-100); /* legacy name; now neutral gray hover */ /* ─── Status palette — single source (v4 ramp-based soft tints) ───── Both legacy names (--status-*-fg / --status-*-bg) and v2 short names (--, ---bg, ---border) resolve to the SAME ramp values so no chip can drift between aliases. 5 repo statuses + 2 app-derived (returning=slate, completed=gray). */ --status-pending-fg: var(--stone-600); --status-pending-bg: var(--stone-100); --status-pending-border:var(--stone-300); --pending: var(--status-pending-fg); --pending-bg: var(--status-pending-bg); --pending-border: var(--status-pending-border); --status-confirmed-fg: var(--green-700); --status-confirmed-bg: var(--green-50); --status-confirmed-border: var(--green-200); --confirmed: var(--status-confirmed-fg); --confirmed-bg: var(--status-confirmed-bg); --confirmed-border: var(--status-confirmed-border); --status-briefing-fg: var(--amber-800); --status-briefing-bg: var(--amber-50); --status-briefing-border: var(--amber-300); --briefing: var(--status-briefing-fg); --briefing-bg: var(--status-briefing-bg); --briefing-border: var(--status-briefing-border); --status-in-water-fg: var(--sky-800); --status-in-water-bg: var(--sky-50); --status-in-water-border: var(--sky-200); --inwater: var(--status-in-water-fg); --inwater-bg: var(--status-in-water-bg); --inwater-border: var(--status-in-water-border); --status-returning-fg: var(--slate-600); --status-returning-bg: var(--slate-100); --status-returning-border: var(--slate-300); --status-completed-fg: var(--gray-500); --status-completed-bg: var(--gray-100); --status-completed-border: var(--gray-300); --status-cancelled-fg: var(--rose-800); --status-cancelled-bg: var(--rose-50); --status-cancelled-border: var(--rose-200); --cancelled: var(--status-cancelled-fg); --cancelled-bg: var(--status-cancelled-bg); --cancelled-border: var(--status-cancelled-border); /* ─── Bar / rail tints (peripheral indicators — lighter ramp steps) ── */ --bar-confirmed: var(--green-300); --bar-briefing: var(--amber-300); --bar-inwater: var(--sky-300); --bar-pending: var(--stone-300); --bar-cancelled: var(--rose-300); --bar-returning: var(--slate-300); /* ─── Input tokens (v4 repo model) ─────────────────────────────────── */ --input-bg: var(--gray-50); --input-border: var(--gray-300); --input-border-hover: var(--gray-400); --input-border-focus: rgba(var(--accent-rgb), 0.60); --input-placeholder: rgba(107, 114, 128, 0.80); /* darkened from 0.50 to clear ~3:1 supplementary-text bar (label always present) */ --focus-ring: rgba(var(--accent-rgb), 0.10); --error: #C13028; /* ─── Notification semantics (toasts / inline alerts) ─────────────── Generic success/danger/warning/info layer, distinct from the booking-status palette. Resolves to existing colour ramps. */ --success: var(--green-700); --success-bg: var(--green-50); --success-border: var(--green-200); --danger: var(--rose-800); --danger-bg: var(--rose-50); --danger-border: var(--rose-200); --warning: var(--amber-700); --warning-bg: var(--amber-50); --warning-border: var(--amber-200); --info: var(--accent); --info-bg: var(--sky-50); --info-border: var(--sky-200); /* ─── Interaction states ───────────────────────────────────────────── Canonical state vocabulary every interactive primitive uses: hover → neutral darken overlay (or accent-strong on filled) active → stronger overlay / translateY(1px) press focus → --shadow-focus keyboard ring (focus-visible only) selected → accent-soft fill + accent text disabled → --disabled-opacity, no pointer events See /admin/design_system "Interaction states" for the recipe. */ --state-hover: rgba(17, 24, 39, 0.04); --state-active: rgba(17, 24, 39, 0.08); --state-selected: var(--accent-soft); --focus-ring-color: rgba(var(--accent-rgb), 0.35); --shadow-focus: 0 0 0 3px var(--focus-ring-color); --disabled-opacity: 0.5; --transition-base: var(--t-med) var(--ease-standard); } /* Control-density SCOPE classes (.os-density--*). Imported last of the three so its scope rules land after the :root control defaults they override. */ /* * tokens/density.css — the CONTROL DENSITY SCOPE. * * One class, set ONCE on a layout wrapper, re-points the resolved control * trio (--control-h / --control-pad-x / --control-fs, defined in * tokens/primitives.css) for everything inside it. Every interactive * component in the gem reads that trio, so a handheld or kiosk surface * conforms to the design system by declaring its density rather than by * minting local classes. * *
* *
* * WHY A CLASS, not a data attribute (`[data-density="touch"]`) * ---------------------------------------------------------------------- * Both work; the class wins on four counts specific to THIS gem. * 1. Composition. A wrapper very often already carries `class:` in the ERB * helper and pattern partials; adding a token to that string needs no * new helper argument and no rewrite of the tag call to pass a data hash, * at the ~40 call sites that render a layout shell. * 2. The prefix contract. `.os-*` IS the gem's public surface (README → * Versioning) and the no-legacy-prefix gate polices it. A data attribute * would be a second, unpoliced public namespace with its own rules. * 3. Tooling. hallmark, the alias gate and the component index all read * CLASSES. A density expressed as an attribute is invisible to every * one of them, including the lookalike detector that would otherwise * catch a consumer hand-rolling a 48px button instead of scoping it. * 4. Specificity honesty. Attribute and class selectors have identical * specificity, so the attribute buys nothing there — but it DOES read * as configuration rather than styling, which invites consumers to set * it from server state. Density is a layout decision, not data. * * The counter-argument (an attribute self-documents its allowed values) is * answered by this file: the four steps are enumerated here, in one place. * * SCOPES NEST. The trio is inherited, so an inner scope overrides an outer * one — a `--touch` page may hold a `--compact` toolbar. That falls out of * the cascade; no extra rules. * * WHAT DENSITY DOES NOT TOUCH — the back-compat contract. * Every explicit size modifier (.os-btn--sm/--lg/--field/--touch/--icon/--xs, * .os-field--sm, .os-select--sm …) re-declares the trio ON ITSELF. A * declaration on the element always beats one inherited from an ancestor, so * a modifier renders at its documented size inside ANY density scope. This is * both the compatibility guarantee for pinned consumers and the right * semantics: "make this button small" is an instruction about that button. * Density only sizes controls that did not ask for a specific size. * * Loaded via tokens.css after primitives + semantic. Scope rules cannot live * in primitives.css: that file is a single :root block by contract. */ /* ── The four density steps ────────────────────────────────────────────── Named for the SURFACE they describe, not the pixel value, so a consumer picks by intent. Each step re-points all three tokens together — height without matching padding and label size produces a stretched control. */ /* Dense desktop — data-heavy admin tables, toolbars, filter rows. 32px. */ .os-density--compact { --control-h: var(--control-h-sm); --control-pad-x: var(--control-pad-x-sm); --control-fs: var(--control-fs-sm); } /* The system default — desktop admin. 36px. Exists as an explicit scope so a region can opt BACK OUT of an enclosing --touch/--field scope. */ .os-density--base { --control-h: var(--control-h-base); --control-pad-x: var(--control-pad-x-base); --control-fs: var(--control-fs-base); } /* Comfortable — small tablet, or a desktop form that wants air without going full field height. 40px: the rung that did not exist before v1.6.0, and the reason `--sm`-to-`--field` was a 14px cliff consumers papered over locally. */ .os-density--comfortable { --control-h: var(--control-h-md); --control-pad-x: var(--control-pad-x-md); --control-fs: var(--control-fs-md); } /* Form surfaces — controls align on the canonical 46px field baseline, so a button sitting inline with a select or datepicker matches it without the per-call-site `.os-btn--field` twin. */ .os-density--field { --control-h: var(--control-h-field); --control-pad-x: var(--control-pad-x-field); --control-fs: var(--control-fs-field); } /* Handheld / kiosk — 48pt minimum target. The originating case: a dive handheld used one-handed on a moving boat in direct sun, where a 32px filter button is below a safe target size and the consumer had to keep local classes because the gem offered no field-size variant of it. */ .os-density--touch { --control-h: var(--control-h-touch); --control-pad-x: var(--control-pad-x-touch); --control-fs: var(--control-fs-touch); } @font-face { font-family:'Inter'; font-style:normal; font-weight:100 900; font-display:swap; src:url("/assets/inter-var-9b45d99b.woff2") format('woff2'); } @font-face { font-family:'Geist Mono'; font-style:normal; font-weight:400; font-display:swap; src:url("/assets/GeistMono-Regular-8d81938c.woff2") format('woff2'); } @font-face { font-family:'Geist Mono'; font-style:normal; font-weight:500; font-display:swap; src:url("/assets/GeistMono-Medium-0fcc9bdd.woff2") format('woff2'); } @font-face { font-family:'Geist Mono'; font-style:normal; font-weight:600; font-display:swap; src:url("/assets/GeistMono-SemiBold-b24349fd.woff2") format('woff2'); } /* ===== os_ds/patterns.css ===== */ /* * Bullet Train's base CSS applies a global `a:hover { text-decoration- * line: underline; color: secondary-600; }` to every anchor. That * overrides custom hover treatments because text-decoration-line is * different from text-decoration (the latter doesn't reset the former). * Reset hover behavior for the custom link classes used in patterns + * shell. They handle their own hover state via background-color + * color changes — no underline, no link recoloring. */ /* Reset BT's global a:hover (text-decoration-line: underline + color secondary-600) for our custom link components. Also reset base a color (BT sets a { color: var(--secondary-500) }) so descendant text inherits --text-primary instead of the link blue. Both rules need to be on the parent anchor — the children inherit from there. */ .os-sidebar__link, .os-sidebar__owner, :is(.open-row__link, .os-open-row__link), :is(.ledger-row__link, .os-ledger-row__link), :is(.filter-pill, .os-filter-pill), :is(.segmented__option, .os-segmented__option), :is(.tabs__tab, .os-tabs__tab), :is(.settings-sub-nav__link, .os-settings-sub-nav__link), :is(.trip-row__link, .os-trip-row__link), :is(.setting-item--linked, .os-setting-item--linked), :is(.header-zone__action-button, .os-header-zone__action-button), :is(.org-outlet-row, .os-org-outlet-row), :is(.lead-card-clickable__link, .os-lead-card-clickable__link), :is(.run-reopen-row, .os-run-reopen-row) { color: inherit; } .os-sidebar__link:hover, .os-sidebar__owner:hover, :is(.open-row__link, .os-open-row__link):hover, :is(.ledger-row__link, .os-ledger-row__link):hover, :is(.filter-pill, .os-filter-pill):hover, :is(.segmented__option, .os-segmented__option):hover, :is(.tabs__tab, .os-tabs__tab):hover, :is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover, :is(.trip-row__link, .os-trip-row__link):hover, :is(.setting-item--linked, .os-setting-item--linked):hover, :is(.header-zone__action-button, .os-header-zone__action-button):hover, :is(.org-outlet-row, .os-org-outlet-row):hover, :is(.lead-card-clickable__link, .os-lead-card-clickable__link):hover, :is(.run-reopen-row, .os-run-reopen-row):hover { text-decoration-line: none; color: inherit; } /* Hover background colors set explicitly elsewhere; preserve the defined hover states for backgrounds. */ .os-sidebar__link:hover { color: var(--text-primary); } .os-sidebar__item--active .os-sidebar__link:hover { color: var(--accent-strong); } :is(.filter-pill, .os-filter-pill):hover { color: var(--text-secondary); } :is(.filter-pill--active, .os-filter-pill--active):hover { color: var(--accent-strong); } :is(.segmented__option, .os-segmented__option):hover { color: var(--text-primary); } :is(.tabs__tab, .os-tabs__tab):hover { color: var(--text-primary); } :is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover { color: var(--text-primary); } :is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active) :is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover { color: var(--accent-strong); } /* * patterns.css — DiveOS shared pattern styles * * One file per concern would be tidier but Propshaft imports flat. The * patterns live here in the same order as UI-ARCHITECTURE.md §4 so a * reader scrolling the spec finds the CSS for each pattern in sequence. * * Resolves all colors through tokens.css semantic aliases (light-only * since v4 — dark mode removed per the diveOS-design-system repo spec). * * Inter is the body font (loaded by tokens.css). Geist Mono is used for * any tabular-nums context (time anchors, KPI values, capacity ratios). * Apply via inline class `font-mono` or local rule. */ /* ─── Text roles ──────────────────────────────────────────────────────── Named typographic roles. Use these instead of hand-speccing size/weight/transform/tracking/color inline (the `text-[10px] uppercase tracking-[0.08em] text-muted` soup that recurs in ~47 files). Each maps to a --text-* token, so nothing is off-scale. They carry NO layout (no margins / display) so they compose on any element — for a standalone eyebrow WITH block spacing use .section-label; for a card's header use .dv-card__title. Role names, not size names (body-14 etc.): a name shouldn't lie when the scale shifts. Each role names its px in the comment for reference. */ /* Headings — structural h1–h5 classes that apply a heading level's appearance to ANY element, decoupled from the semantic tag (à la Primer .h1–.h6 / Carbon heading tokens / Polaris headingXl–Sm). Decoupling is deliberate: pick the tag for document structure, the class for size — bare

–

stay on Tailwind's preflight reset so a level never forces a size. Semantic role aliases share each style (.dv-title === .dv-h4), so both vocabularies work with one definition. Display font, 600, tight tracking. */ .os-h1, .os-display { font-family: var(--font-display); font-size: var(--text-3xl); font-weight: 600; line-height: var(--leading-3xl); letter-spacing: -0.025em; color: var(--ink); } /* 28/36 — page hero */ .os-h2, .os-title-lg { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: 600; line-height: var(--leading-2xl); letter-spacing: -0.02em; color: var(--ink); } /* 24/32 — major section */ .os-h3 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; line-height: var(--leading-xl); letter-spacing: -0.015em; color: var(--ink); } /* 20/28 — subsection */ .os-h4, .os-title { font-family: var(--font-display); font-size: var(--text-lg); font-weight: 600; line-height: var(--leading-lg); letter-spacing: -0.01em; color: var(--ink); } /* 18/28 — card / panel heading */ .os-h5, .os-title-sm { font-family: var(--font-display); font-size: var(--text-md); font-weight: 600; line-height: var(--leading-md); letter-spacing: -0.01em; color: var(--ink); } /* 16/24 — small heading */ /* Subtitle — supporting subhead under a title. */ .os-subtitle { font-size: var(--text-md); line-height: var(--leading-md); color: var(--muted); } /* 16/24 — muted lead-in */ /* Body. */ .os-body-lg { font-size: var(--text-md); line-height: var(--leading-md); color: var(--ink); } /* 16/24 — roomy body */ .os-body { font-size: var(--text-sm); line-height: var(--leading-sm); color: var(--ink); } /* 14/22 — default body */ .os-small { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--ink); } /* 12/18 — small print */ .os-eyebrow { /* micro uppercase label — "STATUS", "BOAT" */ font-size: var(--text-2xs); /* 10px */ font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); } .os-meta { /* secondary / supporting line */ font-size: var(--text-xs); /* 12px */ color: var(--muted); } /* Mono variant — a dense monospace meta line (cabin/pax/ref codes). Geist Mono via --font-mono, one step smaller. Self-contained (carries the muted colour so it reads the same standalone or alongside .os-meta). From arena .ao-meta. */ .os-meta--mono { font-family: var(--font-mono); font-size: var(--text-2xs); /* 10px */ color: var(--muted-2); } /* Mono numerals — tabular figures for money / IDs / counts (Geist Mono via --font-mono). Standalone; the gem previously had .os-mono only SCOPED inside header-band/popover. From arena .ao-mono. */ .os-mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } .os-figure { /* numeric — money / rate / id / count */ font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); } /* Tone modifiers — additive; defined AFTER the base color rule so the semantic tone wins the cascade over the base color:var(--ink). Signals a status zone on a figure (e.g. pricing floor / recommended / ceiling). Token-only. */ .os-figure--confirmed { color: var(--confirmed); } .os-figure--cancelled { color: var(--cancelled); } .os-figure--pending { color: var(--pending); } .os-figure--accent { color: var(--accent); } .os-figure--muted { color: var(--muted); } /* notional / de-emphasised figure */ .os-caption { /* quietest micro caption */ font-size: var(--text-2xs); /* 10px */ color: var(--muted-2); } /* ─── Standalone primitives promoted from arena-ops (HotelOS) 2026-07-25 ────── The gem previously had these names only SCOPED (a toolbar divider, a setting-item dot, a sum-prog row). These are the general-purpose standalone versions. Token-only. */ /* Divider — a hairline separator. --thin stretches to fill a flex row (a section rule between a label and the row edge); was arena .ao-rule. */ .os-divider { border: 0; margin: 0; height: 1px; background: var(--hairline); } .os-divider--thin { flex: 1; height: 1px; align-self: center; background: var(--hairline); } /* Dot — a small status dot; colour via currentColor so a parent/inline colour drives it. --lit adds a soft ring. Was arena .ao-dot. */ .os-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: currentColor; flex: none; } .os-dot--lit { box-shadow: 0 0 0 3px var(--accent-soft); } /* Row — a general list row: flex, vertically CENTRED (the scoped sum-prog row was baseline-aligned), hover highlight. Was arena .ao-row. */ .os-row { display: flex; align-items: center; gap: var(--space-3); transition: background var(--t-fast) var(--ease-standard); } .os-row:hover { background: var(--canvas); } /* ─── Section label ─────────────────────────────────────────────────── */ :is(.section-label, .os-section-label) { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); margin: 24px 0 8px; line-height: 1.4; } /* ─── Layout primitives: Stack + Inline ───────────────────────────────── Name the layout instead of hand-rolling `flex flex-col gap-3` / `flex items-center gap-2`. Stack = vertical flow, Inline = horizontal flow, both with a token gap off the --space scale. (Polaris BlockStack/InlineStack, Primer Stack, Braid Stack/Inline.) Default gap = the common case; the size modifiers step the scale and apply to both. Inline centers + wraps by default; alignment/justify modifiers cover the rest. */ .os-stack { display: flex; flex-direction: column; gap: var(--space-3); } /* 12 */ .os-inline { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: var(--space-2); } /* 8 */ /* Gap steps (both Stack + Inline). */ .os-stack--xs, .os-inline--xs { gap: var(--space-1); } /* 4 */ .os-stack--sm, .os-inline--sm { gap: var(--space-2); } /* 8 */ .os-stack--md, .os-inline--md { gap: var(--space-3); } /* 12 */ .os-stack--lg, .os-inline--lg { gap: var(--space-4); } /* 16 */ .os-stack--xl, .os-inline--xl { gap: var(--space-6); } /* 24 */ /* Cross-axis + main-axis modifiers. */ .os-stack--center { align-items: center; } .os-inline--top { align-items: flex-start; } .os-inline--baseline { align-items: baseline; } .os-inline--between { justify-content: space-between; } .os-inline--end { justify-content: flex-end; } .os-inline--nowrap { flex-wrap: nowrap; } /* ─── KPI strip ─────────────────────────────────────────────────────── */ :is(.kpi-strip, .os-kpi-strip) { display: flex; align-items: baseline; flex-wrap: wrap; gap: 28px 36px; margin: 0 0 28px; padding: 16px 0 0; border-top: 1px solid var(--border); } :is(.kpi-strip__stat, .os-kpi-strip__stat) { display: flex; align-items: baseline; gap: 8px; } :is(.kpi-strip__value, .os-kpi-strip__value) { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-3xl); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1; margin: 0; } :is(.kpi-strip__label, .os-kpi-strip__label) { font-size: var(--text-xs); letter-spacing: 0.02em; color: var(--text-muted); margin: 0; } /* ─── StatBand — bordered metrics card (content-pane sibling of kpi_strip) 2–5 cells, big tabular number over an uppercase label, inner hairlines. Sits on the gray canvas (NOT in the header band). Cell count via --cols. Spec: Design/agent-view-dive-sites-stat-card/handover/stat-band/. ──────── */ :is(.stat-band, .os-stat-band) { display: grid; grid-template-columns: repeat(var(--cols, 4), 1fr); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; margin-bottom: 20px; } :is(.stat-band__cell, .os-stat-band__cell) { padding: 18px 20px; border-left: 1px solid var(--hairline-2); } :is(.stat-band__cell, .os-stat-band__cell):first-child { border-left: 0; } :is(.stat-band__label, .os-stat-band__label) { font-family: var(--font-sans); font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } :is(.stat-band__value, .os-stat-band__value) { margin-top: 9px; font-family: var(--font-mono); font-size: var(--text-xl); font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; line-height: 1; color: var(--ink); } :is(.stat-band__unit, .os-stat-band__unit) { font-size: 0.6em; font-weight: 500; color: var(--muted); } :is(.stat-band__value--display, .os-stat-band__value--display) { font-family: var(--font-display); font-variant-numeric: normal; } :is(.stat-band__value--positive, .os-stat-band__value--positive) { color: var(--status-confirmed-fg); } :is(.stat-band__value--attention, .os-stat-band__value--attention) { color: var(--status-briefing-fg); } :is(.stat-band__value--negative, .os-stat-band__value--negative) { color: var(--status-cancelled-fg); } :is(.stat-band__value--empty, .os-stat-band__value--empty) { color: var(--muted-2); font-weight: 500; } /* Vertical variant — single column, cells stacked with top hairlines. For a narrow rail (e.g. dive-site facts) where vertical space is ample. */ :is(.stat-band--vertical, .os-stat-band--vertical) { grid-template-columns: 1fr; } :is(.stat-band--vertical, .os-stat-band--vertical) :is(.stat-band__cell, .os-stat-band__cell) { border-left: 0; border-top: 1px solid var(--hairline-2); } :is(.stat-band--vertical, .os-stat-band--vertical) :is(.stat-band__cell, .os-stat-band__cell):first-child { border-top: 0; } @media (max-width: 640px) { :is(.stat-band, .os-stat-band) { grid-template-columns: repeat(2, 1fr); } :is(.stat-band__cell, .os-stat-band__cell):nth-child(odd) { border-left: 0; } :is(.stat-band__cell, .os-stat-band__cell):nth-child(n + 3) { border-top: 1px solid var(--hairline-2); } } /* ─── Stat card — clickable KPI/filter tile ───────────────────────────── A bordered tile (swatch + label, big tabular value, sub-line) that toggles a filter when clicked. Replaces hand-rolled utility-soup tiles (gear category KPIs) that drifted off the type scale and underlined on hover because BT's global a:hover beat the `no-underline` utility. As an it resets its own hover underline. Sizes are tokens, not raw px. */ .os-stat-card { display: block; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); text-decoration: none; transition: border-color 150ms ease-out, background 150ms ease-out; } .os-stat-card:hover { border-color: var(--hairline-strong); text-decoration: none; } .os-stat-card--active { border-color: var(--accent); background: var(--accent-softer); } .os-stat-card--active:hover { border-color: var(--accent); } .os-stat-card__head { display: flex; align-items: center; gap: var(--space-2); } .os-stat-card__swatch { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .os-stat-card__label { font-family: var(--font-display); font-size: var(--text-sm); font-weight: 500; color: var(--ink); } .os-stat-card__value { font-family: var(--font-mono); font-size: var(--text-lg); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); line-height: 1; margin-top: 6px; } .os-stat-card__sub { font-size: var(--text-2xs); font-weight: 500; color: var(--muted); margin-top: 6px; } .os-stat-card__sub--due { color: var(--briefing); } /* ─── Header zone ───────────────────────────────────────────────────── */ :is(.header-zone, .os-header-zone) { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 24px; } :is(.header-zone__title, .os-header-zone__title) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-3xl); line-height: 1.1; letter-spacing: -0.025em; color: var(--text-primary); margin: 0; } :is(.header-zone__meta, .os-header-zone__meta) { font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 400; letter-spacing: 0.02em; color: var(--text-muted); margin: 8px 0 0; } :is(.header-zone__actions, .os-header-zone__actions) { display: flex; gap: 8px; flex-shrink: 0; } :is(.header-zone__action-button, .os-header-zone__action-button) { display: inline-flex; align-items: center; padding: 8px 14px; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: background 150ms ease-out; } :is(.header-zone__action-button, .os-header-zone__action-button):hover { background: var(--surface-alt); } :is(.header-zone__action-button, .os-header-zone__action-button):disabled { opacity: 0.5; cursor: not-allowed; } :is(.header-zone__action-button--primary, .os-header-zone__action-button--primary) { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } :is(.header-zone__action-button--primary, .os-header-zone__action-button--primary):hover { background: var(--accent-strong); border-color: var(--accent-strong); } /* Destructive action — used for bottom-LEFT footer actions in side panels (Set inactive, Retire item). Ghost background + danger/red text; on hover it gains a soft red tint and red border so the destructive intent reads clearly without competing with the filled primary on the right. */ :is(.header-zone__action-button--danger, .os-header-zone__action-button--danger) { background: transparent; color: var(--cancelled); border-color: transparent; } :is(.header-zone__action-button--danger, .os-header-zone__action-button--danger):hover { background: var(--cancelled-bg); color: var(--cancelled); border-color: var(--cancelled-border); } /* ─── Dives surface specifics ──────────────────────────────────────── */ :is(.dives-view-bar, .os-dives-view-bar) { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin: 8px 0 16px; } :is(.dives-list, .os-dives-list) { list-style: none; padding: 0; margin: 0 0 24px; } :is(.dives-empty, .os-dives-empty) { padding: 64px 16px; text-align: center; color: var(--text-muted); } :is(.dives-empty--wide, .os-dives-empty--wide) { padding: 96px 16px 64px; } :is(.dives-empty__line, .os-dives-empty__line) { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-lg); letter-spacing: -0.01em; color: var(--text-secondary); margin: 0 0 8px; } :is(.dives-empty__hint, .os-dives-empty__hint) { font-size: var(--text-sm); color: var(--text-muted); margin: 0; max-width: 360px; margin-left: auto; margin-right: auto; } /* ─── Drawer body lists (Divers / Stops tabs) ──────────────────────── */ :is(.drawer-list, .os-drawer-list) { list-style: none; padding: 0; margin: 0 0 8px; } :is(.drawer-empty, .os-drawer-empty) { color: var(--text-muted); font-style: italic; font-size: var(--text-sm); margin: 8px 0 16px; } :is(.drawer-notes, .os-drawer-notes) { font-size: var(--text-sm); color: var(--text-primary); line-height: 1.5; margin: 0 0 16px; } :is(.drawer-notes--incident, .os-drawer-notes--incident) { color: var(--red-700); } /* ─── Settings shell layout (T12) ──────────────────────────────────── */ :is(.settings-layout, .os-settings-layout) { display: grid; grid-template-columns: 200px 1fr; gap: 32px; margin-top: 8px; } @media (max-width: 1023px) { :is(.settings-layout, .os-settings-layout) { grid-template-columns: 1fr; gap: 16px; } } /* ─── Settings hub (v3): nav + detail split INSIDE the .diveos-main pane ── Container query, not viewport: the split lives in the pane (viewport − the 240px sidebar), so at a ~1024px window the pane is ~784px and the 200px nav left the detail card only ~409px — the description wrapped one word per line and the status chips clipped. Stack on a narrow PANE so the cards get full width; the nav becomes a horizontal wrapping bar on top. */ :is(.settings-grid, .os-settings-grid) { display: grid; grid-template-columns: 200px 1fr; gap: 32px; margin-top: 8px; } :is(.settings-subnav, .os-settings-subnav) { border-right: 1px solid var(--hairline); padding-right: 16px; } :is(.settings-subnav__items, .os-settings-subnav__items) { display: flex; flex-direction: column; gap: 2px; } /* Card fix FIRST (pane ≤880): the row's status chips drop BELOW the title/meta instead of competing for row width, so the description reads on a full measure line rather than one word per line. This alone de-cramps the card while the nav stays a 2-column rail — no need to stack the nav (which would leave a short section as one lonely card over a tall void). */ @container (max-width: 880px) { :is(.setting-item, .os-setting-item) { grid-template-columns: auto 1fr; row-gap: 8px; } :is(.setting-item__trail, .os-setting-item__trail) { grid-column: 2; flex-wrap: wrap; justify-content: flex-start; } } /* Legacy settings feature-cards (integrations, developer tools, PMS): the row is `icon | body(flex-1) | trailing action/status`. On a narrow pane the body collapses to one word per line and the trailing element crowds/overlaps it. Wrap the row so the trailing action drops to its own full-width line under the body, which keeps a readable measure. */ @container (max-width: 700px) { .os-feature-row { flex-wrap: wrap; row-gap: 12px; } .os-feature-row > .os-feature-row__end { flex-basis: 100%; justify-content: flex-start; max-width: none; text-align: left; } } /* Only stack the nav to a top bar once the pane is too narrow for the 200px rail + a usable detail column (phones / very narrow panes). */ @container (max-width: 640px) { :is(.settings-grid, .os-settings-grid) { grid-template-columns: 1fr; gap: 16px; } :is(.settings-subnav, .os-settings-subnav) { border-right: 0; border-bottom: 1px solid var(--hairline); padding-right: 0; padding-bottom: 10px; } :is(.settings-subnav__group, .os-settings-subnav__group) { margin-bottom: 10px; } :is(.settings-subnav__items, .os-settings-subnav__items) { flex-direction: row; flex-wrap: wrap; gap: 4px; } } :is(.settings-sub-nav, .os-settings-sub-nav) { border-right: 1px solid var(--border); padding-right: 16px; } @media (max-width: 1023px) { :is(.settings-sub-nav, .os-settings-sub-nav) { border-right: none; padding-right: 0; border-bottom: 1px solid var(--border); padding-bottom: 8px; } :is(.settings-sub-nav__items, .os-settings-sub-nav__items) { display: flex; flex-wrap: wrap; gap: 4px; } } :is(.settings-sub-nav__items, .os-settings-sub-nav__items) { list-style: none; padding: 0; margin: 0; } :is(.settings-sub-nav__item, .os-settings-sub-nav__item) { position: relative; } :is(.settings-sub-nav__link, .os-settings-sub-nav__link) { display: block; padding: 8px 12px; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); border-radius: var(--radius-sm); text-decoration: none; transition: background 150ms ease-out, color 150ms ease-out; } :is(.settings-sub-nav__link, .os-settings-sub-nav__link):hover { background: var(--surface-alt); color: var(--text-primary); } :is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active) :is(.settings-sub-nav__link, .os-settings-sub-nav__link) { background: var(--accent-tint); color: var(--accent-strong); } :is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active)::before { content: ""; position: absolute; left: 0; top: 4px; bottom: 4px; width: 2px; background: var(--accent); border-radius: 0 1px 1px 0; } @media (max-width: 1023px) { :is(.settings-sub-nav__item--active, .os-settings-sub-nav__item--active)::before { display: none; } } :is(.settings-content, .os-settings-content) { min-width: 0; } /* ─── Settings nav item (redesigned, icon + label) ────────────────────── The grouped Settings sub-nav (Shop / Operations / People / Account) — an icon + label row that is the active section's accent-soft chip and warms on hover. Promotes the per-item utility soup (the hand-rolled active/hover string with an arbitrary hover:bg-[var(--hover-warm)]) into a token-driven component, mirroring how .dv-filter-bar scopes the filter row. The group heading uses .dv-eyebrow (named micro-label). */ .os-settings-nav__item { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 500; color: var(--ink); text-decoration: none; transition: background 150ms ease, color 150ms ease; } .os-settings-nav__item:hover, .os-settings-nav__item:focus-visible { background: var(--hover-warm); text-decoration: none; color: var(--ink); } .os-settings-nav__item svg { color: var(--muted); flex-shrink: 0; } .os-settings-nav__item.is-active { background: var(--accent-soft); color: var(--accent); font-weight: 600; } .os-settings-nav__item.is-active:hover { background: var(--accent-soft); color: var(--accent); } .os-settings-nav__item.is-active svg { color: var(--accent); } :is(.settings-link-list, .os-settings-link-list) { list-style: none; padding: 0; margin: 0; } /* Status summary grid — each section partial renders this above the link list to show at-a-glance configuration state. Two columns; --ok rows show in green-700, --todo rows in amber-700, both via tokens.css. */ :is(.settings-status, .os-settings-status) { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 24px; margin: 16px 0 24px; padding: 0; } @media (max-width: 1023px) { :is(.settings-status, .os-settings-status) { grid-template-columns: 1fr; } } :is(.settings-status__row, .os-settings-status__row) { display: flex; justify-content: space-between; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--border); margin: 0; } :is(.settings-status__label, .os-settings-status__label) { font-size: var(--text-sm); color: var(--text-muted); margin: 0; } :is(.settings-status__value, .os-settings-status__value) { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin: 0; font-variant-numeric: tabular-nums; } :is(.settings-status__row--ok, .os-settings-status__row--ok) :is(.settings-status__value, .os-settings-status__value) { color: var(--green-700); } :is(.settings-status__row--todo, .os-settings-status__row--todo) :is(.settings-status__value, .os-settings-status__value) { color: var(--amber-700); } :is(.settings-status__swatch, .os-settings-status__swatch) { display: inline-block; width: 12px; height: 12px; border-radius: var(--radius-pill); border: 1px solid var(--border); } :is(.settings-status__hint, .os-settings-status__hint) { font-family: var(--font-sans); font-weight: 400; font-size: var(--text-xs); color: var(--text-muted); margin-left: 6px; } /* ─── Modern settings list (card rows) ─────────────────────────────── v4 modernization. Replaces the .settings-status stat-strip + tight ledger-row with richer card rows: leading icon, title + description, trailing status pill + chevron. One row per editable thing; status is folded onto the row (no separate stat-strip), counts neutral, only true needs-attention / healthy state takes color. */ :is(.setting-list, .os-setting-list) { list-style: none; margin: 16px 0 0; padding: 0; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); overflow: hidden; } :is(.setting-list__item, .os-setting-list__item) { margin: 0; } :is(.setting-item, .os-setting-item) { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; transition: background 150ms ease; } :is(.setting-list__item, .os-setting-list__item):last-child :is(.setting-item, .os-setting-item) { border-bottom: 0; } :is(.setting-item--linked, .os-setting-item--linked) { cursor: pointer; } :is(.setting-item--linked, .os-setting-item--linked):hover { background: var(--hover-warm); } :is(.setting-item__icon, .os-setting-item__icon) { width: 36px; height: 36px; border-radius: 9px; background: var(--surface-alt); border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; } :is(.setting-item__body, .os-setting-item__body) { min-width: 0; display: flex; flex-direction: column; gap: 2px; } :is(.setting-item__title, .os-setting-item__title) { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); letter-spacing: -0.01em; } :is(.setting-item__meta, .os-setting-item__meta) { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.4; } :is(.setting-item__trail, .os-setting-item__trail) { display: inline-flex; align-items: center; gap: 9px; } :is(.setting-item__pill, .os-setting-item__pill) { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600; line-height: 1; padding: 4px 9px; border-radius: var(--radius-pill); white-space: nowrap; font-variant-numeric: tabular-nums; border: 1px solid transparent; } :is(.setting-item__pill--count, .os-setting-item__pill--count) { background: var(--surface-alt); color: var(--text-muted); border-color: var(--border); } :is(.setting-item__pill--warn, .os-setting-item__pill--warn) { background: var(--status-briefing-bg); color: var(--amber-700); border-color: var(--status-briefing-border, var(--border)); } :is(.setting-item__pill--ok, .os-setting-item__pill--ok) { background: var(--status-confirmed-bg); color: var(--green-700); border-color: var(--status-confirmed-border, var(--border)); } :is(.setting-item__pill, .os-setting-item__pill) :is(.dot, .os-dot) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } :is(.setting-item__chevron, .os-setting-item__chevron) { color: var(--text-muted); display: inline-flex; align-items: center; } :is(.setting-item--linked, .os-setting-item--linked):focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } @media (prefers-reduced-motion: reduce) { :is(.setting-item, .os-setting-item) { transition: none; } } /* ─── Filter bar ────────────────────────────────────────────────────── */ :is(.filter-bar, .os-filter-strip) { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-bottom: 16px; } :is(.filter-bar, .os-filter-strip)::-webkit-scrollbar { display: none; } /* v4: aligned to the repo .chip spec — 28px pill, hairline border on surface; active = accent-soft bg + accent-border + accent text. */ :is(.filter-pill, .os-filter-pill) { display: inline-flex; align-items: center; /* A filter pill is deliberately ONE STEP SHORTER than the primary control beside it — it is a scoping affordance, not an action, and a strip of full-height pills reads as a row of buttons. 8px is that shipped offset (36 base minus 28), so at base density this computes to exactly the 28px literal it replaces. The 28px floor stops --compact shrinking a pill to an unhittable 24. THIS IS THE COMPONENT THE AUDIT WAS ABOUT: a filter control frozen at a desktop size, with no field or touch variant, on a surface used one-handed on a boat. It reaches 40px under .os-density--touch — over the safe target size — with no local class and no new per-component modifier. */ height: max(28px, calc(var(--control-h) - 8px)); padding: 0 12px; font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-pill); text-decoration: none; transition: background 150ms ease-out; } :is(.filter-pill, .os-filter-pill):hover { background: var(--canvas); } :is(.filter-pill--active, .os-filter-pill--active) { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); } /* ─── Operations bar (.dv-opbar) ───────────────────────────────────────── Consolidated status + actions strip at the foot of a form-detail page (sharing / public-access / documents). Uses the shared cool blue-gray summary surface (#F2F5F9 / #D5DEEA — same as .ds-sum) so it reads as a DISTINCT operations panel, not another white form-field info_card. Status + meta on the left, action buttons + a QR tile on the right. Standard for status/CTA sections across forms. */ .os-opbar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; background: #F2F5F9; /* shared cool blue-gray summary surface */ border: 1px solid #D5DEEA; border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); } .os-opbar__main { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; } .os-opbar__label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-2xs); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--slate-500); } .os-opbar__label svg { color: var(--muted-2); } .os-opbar__facts { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .os-opbar__meta { font-size: var(--text-sm); color: var(--muted); display: inline-flex; align-items: center; gap: 5px; } .os-opbar__meta svg { color: var(--confirmed); } .os-opbar__dot { color: var(--hairline-strong); } .os-opbar__files { display: flex; gap: 16px; font-size: var(--text-sm); } .os-opbar__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .os-opbar__actions form { margin: 0; } /* QR on demand via a
popover (C variant — the inline thumbnail was the A variant). "Show QR" is a secondary button; the QR floats below it. */ .os-opbar__qrtoggle { position: relative; } .os-opbar__qrtoggle > summary { list-style: none; cursor: pointer; } .os-opbar__qrtoggle > summary::-webkit-details-marker { display: none; } .os-opbar__qrtoggle > summary::marker { content: ""; } .os-opbar__qrpop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); padding: 14px; text-align: center; width: max-content; } .os-opbar__qr { width: 132px; height: 132px; display: grid; place-items: center; } .os-opbar__qr svg { width: 100%; height: 100%; display: block; } .os-opbar__qrcap { display: block; font-size: var(--text-xs); color: var(--muted-2); margin-top: 8px; } /* ─── Status pill ───────────────────────────────────────────────────── */ /* The gem owns the FULL component: base, size/shape modifiers, the seven colour variants, the child elements, and the interactive (button) states. Every variant is a pure pass-through to the --status--{bg,fg,border} tokens in tokens/semantic.css, so the palette is defined once, here. A consuming app supplies only two things: the human LABEL, and the mapping from its own domain status to a variant key (e.g. a status-palette helper deciding that an unpaid invoice is `--pending`). It must NOT redefine any `.status-pill*` rule locally — a local copy silently overrides the gem and the two systems drift apart. */ :is(.status-pill, .os-status-pill) { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; font-size: var(--text-xs); font-weight: 600; line-height: 1; border: 1px solid transparent; border-radius: var(--radius-pill); white-space: nowrap; } /* Leading Lucide glyph inside the pill. This rule MUST live here: the gem's own `status_icon_svg` (helpers/os_ds/status_palette_helper.rb) emits `class="status-icon"`, so a gem-rendered icon would be unstyled if the rule sat in a consuming app. Sized in fixed px rather than a token — it tracks the pill's 12px optical glyph size, not the type scale. */ :is(.status-icon, .os-status-icon) { width: 12px; height: 12px; flex-shrink: 0; } /* Size modifier (mirrors .dv-badge--sm) */ :is(.status-pill--sm, .os-status-pill--sm) { font-size: var(--text-2xs); padding: 2px 8px; } /* Shape modifier: square uppercase tag (mirrors .dv-badge--square) */ :is(.status-pill--square, .os-status-pill--square) { border-radius: 5px; text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-2xs); padding: 3px 8px; } :is(.status-pill__label, .os-status-pill__label) { line-height: 1; } :is(.status-pill__dot, .os-status-pill__dot) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Legacy alias: `.status-pill-dot` (single dash) is the pre-BEM spelling of `.status-pill__dot` and is still used by host-app views. Kept so those callers keep rendering; prefer `.status-pill__dot` in new markup. */ :is(.status-pill-dot, .os-status-pill-dot) { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* Colour variants — pure token pass-throughs. Palette pivot 2026-05-23: Confirmed=green (was blue), In Water=sky (was emerald). The theme is light-only, so there is no dark branch here or in the tokens. */ :is(.status-pill--pending, .os-status-pill--pending) { background: var(--status-pending-bg); border-color: var(--status-pending-border); color: var(--status-pending-fg); } :is(.status-pill--confirmed, .os-status-pill--confirmed) { background: var(--status-confirmed-bg); border-color: var(--status-confirmed-border); color: var(--status-confirmed-fg); } :is(.status-pill--briefing, .os-status-pill--briefing) { background: var(--status-briefing-bg); border-color: var(--status-briefing-border); color: var(--status-briefing-fg); } :is(.status-pill--in_water, .os-status-pill--in_water) { background: var(--status-in-water-bg); border-color: var(--status-in-water-border); color: var(--status-in-water-fg); } :is(.status-pill--returning, .os-status-pill--returning) { background: var(--status-returning-bg); border-color: var(--status-returning-border); color: var(--status-returning-fg); } :is(.status-pill--completed, .os-status-pill--completed) { background: var(--status-completed-bg); border-color: var(--status-completed-border); color: var(--status-completed-fg); } :is(.status-pill--cancelled, .os-status-pill--cancelled) { background: var(--status-cancelled-bg); border-color: var(--status-cancelled-border); color: var(--status-cancelled-fg); } /* NON-STATUS variants. Everything above names a dive/stay STATE; these two name an EMPHASIS, for pills that are not statuses at all — a count, a label, a flag. Added because a consuming product had built its own tag family whose only genuinely missing colours were these two, while its `--alert` and `--warn` turned out to be exact duplicates of `--cancelled` and `--briefing`. Naming them here keeps a product from re-deriving a parallel pill set just to get "accent" and "muted". */ :is(.status-pill--accent, .os-status-pill--accent) { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-strong); } :is(.status-pill--muted, .os-status-pill--muted) { background: var(--surface-alt); border-color: var(--hairline); color: var(--muted); } /* Editable status pill — the badge-dropdown trigger is a button.status-pill. It gets interaction affordances the static pill never does: a subtle hover and a token-driven focus-visible ring. The static .status-pill stays inert. */ button:is(.status-pill, .os-status-pill) { cursor: pointer; /* No resting shadow — the chevron + hover brightness carry the control affordance. (A shadow here reads as unwanted elevation on a flat chip.) */ transition: filter 120ms ease; } button:is(.status-pill, .os-status-pill):hover { filter: brightness(0.97); } button:is(.status-pill, .os-status-pill):focus-visible { outline: none; box-shadow: var(--shadow-focus); } /* ─── Open row ──────────────────────────────────────────────────────── */ :is(.open-row, .os-open-row) { list-style: none; border-bottom: 1px solid var(--border); } :is(.open-row__link, .os-open-row__link), :is(.open-row, .os-open-row) > *:not(:has(:is(.open-row__link, .os-open-row__link))) { display: grid; grid-template-columns: 96px 1fr auto; gap: 24px; align-items: center; padding: 16px; text-decoration: none; color: inherit; min-height: 96px; } :is(.open-row__link, .os-open-row__link) { transition: background 150ms ease-out; } :is(.open-row__link, .os-open-row__link):hover { background: var(--surface-alt); } :is(.open-row__time-block, .os-open-row__time-block) { display: flex; flex-direction: column; align-items: flex-start; } :is(.open-row__time, .os-open-row__time) { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-3xl); font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1; } :is(.open-row__time-meta, .os-open-row__time-meta) { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 6px; } :is(.open-row__body, .os-open-row__body) { min-width: 0; } :is(.open-row__primary, .os-open-row__primary) { display: flex; align-items: center; gap: 12px; margin: 0 0 4px; } :is(.open-row__title, .os-open-row__title) { font-family: var(--font-display); font-weight: 500; font-size: var(--text-md); color: var(--text-primary); } :is(.open-row__meta, .os-open-row__meta) { font-size: var(--text-sm); color: var(--text-muted); margin: 0; line-height: 1.4; } :is(.open-row__right, .os-open-row__right) { text-align: right; } :is(.open-row__right-value, .os-open-row__right-value) { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-2xl); font-variant-numeric: tabular-nums; color: var(--text-primary); line-height: 1; } :is(.open-row__right-label, .os-open-row__right-label) { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-2xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin-top: 4px; } /* ─── Ledger row ────────────────────────────────────────────────────── */ :is(.ledger-row, .os-ledger-row) { list-style: none; border-bottom: 1px solid var(--border); } :is(.ledger-row__link, .os-ledger-row__link), :is(.ledger-row, .os-ledger-row) > *:not(:has(:is(.ledger-row__link, .os-ledger-row__link))) { display: flex; align-items: baseline; gap: 16px; padding: 12px 16px; min-height: 48px; text-decoration: none; color: inherit; } :is(.ledger-row__link, .os-ledger-row__link) { transition: background 150ms ease-out; } :is(.ledger-row__link, .os-ledger-row__link):hover { background: var(--surface-alt); } :is(.ledger-row__time, .os-ledger-row__time) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--text-sm); color: var(--text-muted); flex-shrink: 0; width: 60px; } :is(.ledger-row__title, .os-ledger-row__title) { font-size: var(--text-sm); color: var(--text-primary); flex: 1; } :is(.ledger-row__meta, .os-ledger-row__meta) { font-size: var(--text-sm); color: var(--text-muted); } :is(.ledger-row__value, .os-ledger-row__value) { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 500; font-size: var(--text-sm); color: var(--text-primary); flex-shrink: 0; } /* ─── Side panel (drawer) ───────────────────────────────────────────── */ :is(.side-panel, .os-side-panel) { display: flex; flex-direction: column; height: 100%; background: var(--surface); } :is(.side-panel__header, .os-side-panel__header) { padding: 22px 24px 16px; border-bottom: 1px solid var(--border); } :is(.side-panel__eyebrow, .os-side-panel__eyebrow) { font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; } :is(.side-panel__close, .os-side-panel__close) { float: right; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--radius-sm); color: var(--text-muted); transition: background 150ms ease-out, color 150ms ease-out; } :is(.side-panel__close, .os-side-panel__close):hover { background: var(--surface-alt); color: var(--text-primary); } /* --split — OPT-IN header layout for drawers that pair a wrapped title/subtitle block with the close on one row. The DEFAULT header stays block-flow (the close floats, title/subtitle stack as direct children) — do NOT flex the header by default: consumers that place title/subtitle as direct children would have them laid out horizontally. Under --split the header becomes a flex row and the close right-aligns via auto inline-start margin instead of the float (float is a no-op inside a flex container). align-items:flex-start keeps the close pinned to the top while the title block sets the row height. */ :is(.side-panel__header--split, .os-side-panel__header--split) { display: flex; align-items: flex-start; gap: 12px; } :is(.side-panel__header--split, .os-side-panel__header--split) :is(.side-panel__close, .os-side-panel__close) { float: none; margin-inline-start: auto; } :is(.side-panel__close-icon, .os-side-panel__close-icon) { width: 18px; height: 18px; stroke-width: 1.75; } :is(.side-panel__title, .os-side-panel__title) { font-family: var(--font-display); font-weight: 600; font-size: var(--text-xl); color: var(--text-primary); margin: 0 0 8px; letter-spacing: -0.01em; } /* Title + status on one row, meta drops below (booking drawer, #113). */ :is(.side-panel__title-row, .os-side-panel__title-row) { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; } :is(.side-panel__title--inline, .os-side-panel__title--inline) { margin: 0; } :is(.side-panel__subtitle, .os-side-panel__subtitle) { display: flex; align-items: center; gap: 12px; margin: 0; } :is(.side-panel__meta, .os-side-panel__meta) { display: inline-flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-muted); } :is(.side-panel__tab-zone, .os-side-panel__tab-zone) { display: flex; flex-direction: column; flex: 1; min-height: 0; } /* Tab bar shares the panel's 24px gutter (header/body) instead of sitting flush-left. Applies to every drawer that uses the side_panel chrome. */ :is(.side-panel__tab-zone, .os-side-panel__tab-zone) > :is(.tabs, .os-tabs) { padding-left: 24px; padding-right: 24px; } :is(.side-panel__body, .os-side-panel__body) { flex: 1; overflow-y: auto; padding: 20px 24px; /* Positioning context so absolutely-positioned descendants (e.g. the `.dv-segment__input.sr-only` DIN/INT radios) are contained by the scroll body, not the `position: fixed` `.side-drawer` wrapper. Without this, focusing a visually-hidden control scroll-into-views the fixed wrapper and yanks the whole panel off-screen ("drawer scroll broke"). */ position: relative; } :is(.side-panel__action-bar, .os-side-panel__action-bar) { display: flex; align-items: center; gap: 8px; padding: 12px 24px; border-top: 1px solid var(--border); background: var(--surface); } :is(.side-panel__action-bar-left, .os-side-panel__action-bar-left) { flex: 1; } :is(.side-panel__action-bar-right, .os-side-panel__action-bar-right) { display: flex; gap: 8px; /* Always pin to the right edge. With a left/destructive action present the flex:1 left pushes us right (left|……|right); with no left action the margin-left:auto still drives us to the right edge so a lone primary CTA is bottom-right by default (not flex-start/left). */ margin-left: auto; } /* Single-CTA footers (e.g. the booking quick-view "View full booking") pin their one action to the right edge. Now redundant since the default right-aligns via margin-left:auto — kept for any explicit callers. */ :is(.side-panel__action-bar--end, .os-side-panel__action-bar--end) { justify-content: flex-end; } /* Width modifier — opt-in wider (560px) read-only summary drawer. Add `.side-panel--wide` to the `.side-panel` section when a surface needs the roomier variant. */ :is(.side-panel--wide, .os-side-panel--wide) { max-width: 560px; } /* ─── Field grid ────────────────────────────────────────────────────── */ :is(.field-grid, .os-field-grid) { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } /* Cancel the stacked-field rhythm inside any field grid — the columns are adjacent siblings, so the `.os-field + .os-field` top-margin in forms.css would push every non-first cell down and break horizontal alignment across columns. The grid `gap` owns spacing. Shared by `.field-grid` and `.field-split` so the twin patterns can't drift apart. */ :is(.field-grid, .os-field-grid, .field-split, .os-field-split) .os-field + .os-field { margin-top: 0; } :is(.field-grid__field--span-2, .os-field-grid__field--span-2) { grid-column: 1 / -1; } :is(.field-grid__label, .os-field-grid__label) { display: block; font-family: var(--font-sans); font-weight: 500; font-size: var(--text-xs); color: var(--text-muted); margin-bottom: 4px; } :is(.field-grid__value, .os-field-grid__value) { font-size: var(--text-sm); color: var(--text-primary); } /* ─── Segmented control ─────────────────────────────────────────────── */ :is(.segmented, .os-segmented) { display: inline-flex; background: var(--surface-alt); border-radius: var(--radius-md); padding: 4px; gap: 4px; } :is(.segmented__option, .os-segmented__option) { display: inline-flex; align-items: center; gap: 6px; /* Button chrome reset. This component was authored for `` (hence the `text-decoration: none` below) and never reset the UA's button styles — so rendered as a `