/* * diveos_shell.css — layout shell + sidebar + side drawer styles * * Loaded by application.css after tokens + patterns. Lives separately from * patterns.css because the shell is a singular structural component, not * a reusable pattern. * * Per docs/archive/UI-MIGRATION-PLAN.md T6 + UI-ARCHITECTURE.md §1 sidebar IA spec. */ /* ─── Body + shell ─────────────────────────────────────────────────── */ .hos-shell-body { margin: 0; background: var(--bg); color: var(--text-primary); font-family: var(--font-sans); /* Inter OpenType features per the repo spec (cv11 single-storey a, ss01/ss03 alternates). Harmless on General Sans / Geist Mono. */ font-feature-settings: "cv11", "ss01", "ss03"; min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .hos-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; /* Shell nav clearance for the os-ds page header (v0.19.0 de-vendor contract). The gem's mobile rules inset .os-page-head / .os-page-band / pinned .os-page-tools by these, defaulting to 0 so a shell with no fixed toggle gets no phantom gutter. Our .hos-shell-hamburger IS fixed (top/left 12px, 44px box), so below 1023px the header would otherwise run under it: 64px = 12 (offset) + 44 (box) + 8 (horizontal breathing room) 72px = 12 (offset) + 44 (box) + 16 (a breadcrumb line clearing it) */ --dv-nav-gutter: 64px; --dv-nav-gutter-top: 72px; } /* ─── Mobile hamburger ─────────────────────────────────────────────── */ .hos-shell-hamburger { position: fixed; top: 12px; left: 12px; z-index: 30; display: none; align-items: center; justify-content: center; /* 44px minimum touch target per DESIGN.md a11y section. */ width: 44px; height: 44px; background: var(--surface); color: var(--text-primary); border: 1px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; } .hos-shell-hamburger:hover { background: var(--surface-alt); } /* ─── Sidebar ──────────────────────────────────────────────────────── */ .hos-shell-sidebar { display: flex; flex-direction: column; /* v4: gray-100 sidebar per the repo spec (was white --surface). */ background: var(--sidebar-bg); border-right: 1px solid var(--border); height: 100vh; position: sticky; top: 0; padding: 24px 16px 16px; } .hos-sidebar__brand { display: flex; align-items: center; gap: 8px; padding: 6px 8px 16px; } /* Primary CTA — clean .os-btn--lg component (not utility soup). Layout-only here: full width + the gap before the nav. */ .hos-sidebar__cta { display: flex; width: 100%; justify-content: center; margin-bottom: 32px; } /* Brand mark links to Today (logo-links-home). Quiet hover — tint the product mark, no background block in the brand zone. */ .hos-sidebar__brand-link { color: inherit; } .hos-sidebar__brand-link:hover .hos-sidebar__product { color: var(--accent-strong); } .hos-sidebar__product { font-family: var(--font-display); font-weight: 600; font-size: var(--text-sm); color: var(--text-primary); margin: 0; letter-spacing: -0.02em; } .hos-sidebar__tenant { font-family: var(--font-mono); font-weight: 500; font-size: var(--text-2xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin: 0; } .hos-sidebar__nav { flex: 1; overflow-y: auto; min-height: 0; } /* Section labels inside the sidebar get tighter top margins than the global .section-label utility (which is tuned for in-content use). */ .hos-sidebar__nav .section-label { margin: 18px 10px 6px; font-size: var(--text-2xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-2); } .hos-sidebar__nav .section-label:first-child { margin-top: 0; } .hos-sidebar__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1px; } .hos-sidebar__item { position: relative; } .os-sidebar__link { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; font-size: var(--text-sm); font-weight: 500; color: var(--ink); border-radius: var(--radius-sm); text-decoration: none; transition: background 120ms ease, color 120ms ease; } .os-sidebar__link:hover { background: rgba(0, 0, 0, 0.04); color: var(--text-primary); } .os-sidebar__item--active .os-sidebar__link { background: var(--accent-soft); color: var(--accent); font-weight: 600; } /* tasks/161 T14 — in-module section navigation, under the page title it qualifies. A labelled row of sibling destinations, deliberately NOT styled as buttons: these are places, and a button row beside the page's real actions would read as more verbs. Quiet by default, accent + weight for the current one. */ .hos-page-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-2); } .hos-page-nav__link { font-size: var(--text-sm); color: var(--muted); text-decoration: none; padding-bottom: 2px; border-bottom: 2px solid transparent; } .hos-page-nav__link:hover { color: var(--ink); } .hos-page-nav__link[aria-current="page"] { color: var(--accent); font-weight: 600; border-bottom-color: var(--accent); } /* #285 — below 1024px the hamburger toggle appears and the rail becomes an off-canvas drawer (see the `.hos-shell-hamburger` rules at the same breakpoint further down this file); the drawer carries these same five destinations, so the always-visible row is redundant here and its wrapping labels overflowed the head band on narrow phones. Hide it at the SAME breakpoint the hamburger takes over — the drawer is the mobile nav now. This reverses the R8A/tasks-162/165 "row IS the nav below 1024px" decision in favour of the hamburger. `display:none` (not visibility) so it also leaves the a11y tree. */ @media (max-width: 1023px) { .hos-page-nav { display: none; } } /* tasks/162 + tasks/165 — the mirror of the rule above, and the two are one decision: this row and the transport rail carry the SAME five destinations, so wherever the rail is on screen the row repeats it verbatim (five identical labels twice on one page). Suppress it there. (Below 1024px the row is now suppressed too — see the #285 rule above; the off-canvas drawer is the mobile nav.) TWO rails now carry those five destinations, so two modifiers gate the suppression: * `--transport` — the quarantined transport role, whose whole rail is the module. * `--has-module-nav` — a NON-transport ops role (dispatcher/gm/admin), whose app rail got the "Fleet & crew" group grafted in (tasks/165). Before 165 these roles had a single "Transport" item and the row was their only route, so this selector could not match them; now it does, and their row is suppressed >=1024px and survives < it, same as the transport role's. `display:none` (not visibility/opacity) so it leaves the a11y tree too — a screen reader should not hear the same five landmarks twice either. PROVEN BY `test/computed_style/transport_nav_overlap_test.rb`, which resizes a real browser and reads getComputedStyle at both widths, for BOTH the transport role and an admin. */ @media (min-width: 1024px) { .hos-sidebar--transport ~ .hos-shell-main .hos-page-nav, .hos-sidebar--has-module-nav ~ .hos-shell-main .hos-page-nav { display: none; } } /* tasks/161 T16 (design 6) — 44px touch targets, SCOPED to the transport rail. R8A came back "mixed widths": transport staff work at a desk AND at the jetty, and below 1024px this rail is a thumb-driven off-canvas drawer (see the hamburger rules further down this file). 7px padding gives a ~32px target, which is under every platform's minimum for a wet finger on a moving boat. Deliberately NOT applied to `.os-sidebar__link` globally: that class is gem-owned and shared with DiveOS, so raising it there re-spaces another product's rail to suit one role's device. The modifier is set in _ds_sidebar.html.erb for transport users only. */ .hos-sidebar--transport .os-sidebar__link { min-height: 44px; padding-top: var(--space-2); padding-bottom: var(--space-2); } .hos-sidebar--transport .hos-sidebar__items { gap: var(--space-1); } /* Active state is the accent-soft fill + accent text (our treatment); no left-edge bar. ::before neutralized — kept out so it can't mis-position. */ .os-sidebar__item--active::before { content: none; } .hos-sidebar__label { line-height: 1.2; } .hos-sidebar__badge { display: inline-block; padding: 1px 6px; font-size: var(--text-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-muted); background: transparent; border: 1px solid var(--border); border-radius: var(--radius-pill); line-height: 1.4; } /* ─── Owner footer ─────────────────────────────────────────────────── */ .hos-sidebar__owner-trigger { position: relative; } .os-sidebar__owner { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 16px; border: 0; border-top: 1px solid var(--border); background: transparent; color: var(--text-primary); text-align: left; text-decoration: none; cursor: pointer; transition: background 150ms ease-out; } .os-sidebar__owner:hover { background: var(--surface-alt); } .hos-sidebar__avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--accent-soft); color: var(--accent-strong); border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; flex-shrink: 0; } .hos-sidebar__owner-text { display: block; min-width: 0; flex: 1; } .hos-sidebar__owner-name { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hos-sidebar__owner-role { display: block; font-size: var(--text-xs); color: var(--text-muted); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Upward-opening account menu (footer sits at bottom of sidebar) */ .hos-sidebar__owner-menu { position: absolute; bottom: 100%; left: 8px; right: 8px; min-width: 200px; margin-bottom: 6px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-panel); z-index: 20; } .hos-sidebar__owner-card { padding: 10px 12px 9px; } .hos-sidebar__owner-card .hos-sidebar__owner-name { font-weight: 600; } .hos-sidebar__owner-email { margin: 2px 0 0; font-family: var(--font-mono); font-size: var(--text-2xs); color: var(--muted); word-break: break-all; } .hos-sidebar__badge--filled { background: var(--surface-alt); text-transform: none; letter-spacing: 0; margin-top: 7px; display: inline-flex; } .hos-sidebar__owner-chevron { flex: none; color: var(--muted); } .hos-shell .hos-sidebar__owner-menu-icon { flex: none; color: var(--muted); } .hos-sidebar__owner-menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); font-size: var(--text-sm); text-align: left; text-decoration: none; cursor: pointer; transition: background 150ms ease-out; } .hos-sidebar__owner-menu-item:hover { background: var(--bg); } .hos-sidebar__owner-menu-item--divided { margin-top: 4px; border-top: 1px solid var(--border); } /* ─── Main pane ────────────────────────────────────────────────────── */ .hos-shell-main { background: var(--bg); outline: none; min-height: 100vh; /* Query container for the os-ds full-bleed bands: .os-page-band/head/tools size their breakout in 100cqw measured HERE (cqw excludes the scrollbar, unlike vw → no horizontal overflow). Required by the --bleed-* tokens on .hos-shell-content below. */ container-type: inline-size; /* Grid items default to min-width:auto, so a wide unwrappable child (mono trip title + action buttons) inflates the shell column past the viewport and forces horizontal scroll on phones. 0 lets the pane shrink-to-fit. */ min-width: 0; } .hos-shell-content { max-width: var(--page-max); margin-inline: auto; /* centre the content column within the main pane */ /* --shell-pad-top is the single source of truth for the pane's top padding. Full-bleed headers (.os-page-head / .os-page-tools / .page-header / .hero-show__band) pull up by EXACTLY this via calc() so the band sits flush at the pane top on every breakpoint — no hardcoded -40px to drift out of sync (it previously left a 16px gap on mobile where the pad is 56px). */ --shell-pad-top: 40px; padding: var(--shell-pad-top) 48px 64px; /* Full-bleed band helpers consumed by the os-ds gem's .os-page-band / .os-page-head / .os-page-tools: the band background spans the whole pane (100cqw on .hos-shell-main), its inner content re-pads to this 1280px column's 48px gutter so it lines up with the body. Calibrated to arena's column (page-max 1280 → half 640, gutter 48). Verified full-bleed at wide + narrow. */ --gutter: 48px; --page-max: var(--page-wide); --bleed-w: 100cqw; --bleed-mx: calc(50% - 50cqw); --bleed-pad: max(var(--gutter), calc(50cqw - var(--page-max) / 2 + var(--gutter))); } /* ── Page-width tiers (content_for :page_width) ──────────────────────────── `--page-max` is the ONE knob: `max-width` above reads it, and so does `--bleed-pad`, which is what re-insets a full-bleed header band's contents to the column. Change only the max-width and every band on the page keeps padding to 1280 while the body sits at 960 — two left edges, which is the defect this indirection exists to make impossible. --reading (960px): ONE record you read or sign — registration card, checkout review, folio, statement, room move. Not prose, so `--measure` never engages and 1280px leaves a mostly-empty row; not a single-column form either, so 768px cannot hold a two-column field grid beside a signature block. */ .hos-shell-content--reading { --page-max: var(--page-reading); } .hos-shell-content--narrow { --page-max: var(--page-narrow); } /* Full-bleed pages (content_for :full_bleed) — e.g. the POS booking wizard: the page owns the whole content pane as a fixed-height app-shell region (its own header/stepper, an internally-scrolling body, and a footer pinned to the viewport bottom) instead of the default padded, page-scrolling column. */ .hos-shell-main--bleed { display: flex; flex-direction: column; height: 100vh; overflow: hidden; } /* THE PANE IS THE SCROLLER — measured in DiveOS, 2026-07-28. Both DiveOS reference surfaces agree, and they say the opposite of what this shell did first: trip > run the page scrolls as one document. NOTHING is held — the title scrolls away with the content. Zero sticky elements at any scroll depth. bookings/new the wizard's scroller is `.wz-body`, and the STEPPER IS INSIDE IT. The only held element on the whole page is `.wz-foot`, sticky at the bottom. Its

is sr-only — no title band. So the rule is: **top chrome scrolls, only the footer holds.** This pane used to be a fixed-height flex column with an inner scroller, which pinned the header band AND the stepper — two bars of permanent chrome the reference has none of. Making the pane itself the scroller lets everything above scroll away naturally, and the footer's own `position: sticky; bottom: 0` then holds it against this container rather than against a nested one. AND THE SCROLLER MUST ALSO BE A CONTAINING BLOCK — measured 2026-08-08. `position` is not decoration here, it is the second half of the contract above. An `overflow` ancestor only clips an absolutely positioned descendant when it is ALSO that descendant's containing block; a static one does not. Every `.os-option-card` / `.os-choicecard` hides its radio with `position: absolute` (os-ds option-card.css), and with no positioned ancestor those boxes resolve against the initial containing block. They render in the right place, but they escape both `overflow` rules above and contribute their depth to the DOCUMENT's scrollable overflow: /front_office/new, viewport 1440x900, before this line documentElement.scrollHeight 979 (step 1) / 1289 (step 2) document.body.scrollHeight 900 deepest escaped box top: 1288px The document then scrolls, and because `.hos-shell` is exactly 100vh the sidebar's `position: sticky` has zero travel — the ENTIRE app shell slides off the top and leaves blank canvas. Symptom reported as "the whole screen moves up". NOT `contain`, and NOT `transform` / `filter` / `will-change` / `isolation` / `perspective` / `content-visibility`. Each of those also fixes the overflow, and each also makes this pane the containing block for `position: fixed` descendants — which captures `.hos-odrawer` (fixed, inset 0, z 60, rendered inside this pane). Probed: a fixed child's left edge moves 0px -> 240px (the sidebar width) under `contain: layout`. `position: relative` with `z-index: auto` creates no stacking context, so the sticky footer, the sticky quote rail and the fixed drawer are all unaffected. The system test asserts `z-index: auto` and `transform: none` here to keep it that way. */ .hos-shell-content--bleed { flex: 1; min-height: 0; max-width: none; margin: 0; padding: 0; display: flex; flex-direction: column; overflow-y: auto; position: relative; } /* ─── Mobile drawer scrim ──────────────────────────────────────────── */ /* Desktop never shows it; below 1024px it sits between the page and the open drawer so a tap outside dismisses instead of dead-ending. */ .hos-shell-scrim { display: none; } /* ─── Responsive: mobile (< 1024px) ────────────────────────────────── */ @media (max-width: 1023px) { .hos-shell { grid-template-columns: 1fr; } .hos-shell-hamburger { display: inline-flex; } .hos-shell-sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform 250ms cubic-bezier(0, 0, 0.2, 1); z-index: 50; height: 100vh; } .hos-shell--menu-open .hos-shell-sidebar { transform: translateX(0); } .hos-shell--menu-open .hos-shell-scrim { display: block; position: fixed; inset: 0; z-index: 40; background: rgba(15, 23, 32, 0.45); } /* Narrow the inset via the PUBLISHED token, then consume it — the literal 16px here left --gutter saying 48 while the pane actually padded 16, so every full-bleed band that re-insets off --gutter (head, hero, footer) landed on a column the body no longer occupied. */ .hos-shell-content { --shell-pad-top: 56px; --gutter: 16px; padding: var(--shell-pad-top) var(--gutter) 32px; } .side-drawer { width: 100vw; max-width: 100vw; } } /* ─── Responsive: phones (< 640px) ─────────────────────────────────── */ /* The info strip's N-up grid has a min-content width (~345px for the trip strip) that propagates up and forces horizontal page scroll on phones. Stack the cells; side dividers become bottom dividers. */ @media (max-width: 639px) { .info-strip { grid-template-columns: 1fr; } .info-strip__cell { border-right: 0; } .info-strip__cell:not(:last-child) { border-bottom: 1px solid var(--border); } } /* ── Sidebar collapse (rail ⇄ 68px icon strip) ─────────────────────────── Relocated here from components/package_builder.css: this is general shell/ sidebar behaviour (the brand chevron toggle + collapsed rail), not package- builder-specific. Lives with the shell so the package-builder CSS can ship as its own PR without the sidebar depending on it. */ /* ─── 3. Sidebar collapse (extends the real .hos-shell-sidebar) ───────── */ /* The shell grid resolves the rail width from --sidebar-w. Collapse swaps that var on the shell so the grid column tracks the 68px rail. The width transition lives on the sidebar; the grid column follows because it reads the same var. */ .hos-shell-sidebar { /* add the animated width so collapse glides (the shell sets the column) */ transition: width var(--t-slow) var(--ease-out-quart); overflow: hidden; } /* Animate the GRID TRACK so the rail glides. The column drives the sidebar width, so the transition must live on grid-template-columns — a transition on the sidebar's own width is clipped instantly by the resized track. */ .hos-shell { transition: grid-template-columns var(--t-slow) var(--ease-out-quart); } /* Desktop only: below 1024px the rail is an off-canvas drawer and the shell is a single column — an unscoped 68px track here left a phantom column and overflowed. */ @media (min-width: 1024px) { .hos-shell.is-rail-collapsed { grid-template-columns: 68px 1fr; } } /* collapse toggle — ghost button styled like a quiet nav affordance. Lives in the brand header; the markup adds it next to the brand block. */ .hos-sidebar__collapse { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; flex-shrink: 0; margin-left: auto; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--muted-2); cursor: pointer; transition: background var(--t-fast) ease, color var(--t-fast) ease; } .hos-sidebar__collapse:hover { background: var(--surface-alt); color: var(--ink); } /* ── collapsed state ──────────────────────────────────────────────── */ /* Desktop only, same guard as the grid track above: below 1024px the sidebar is an OFF-CANVAS DRAWER, and an unguarded icon-rail here shrank that drawer to 68px — a nav you cannot read (tasks/161 P2a; the boarding board is the first page to set this state, so nothing else was exposed to it). */ @media (min-width: 1024px) { .hos-shell.is-rail-collapsed .hos-shell-sidebar { width: 68px; padding: 24px 0 16px; } /* brand: hide the text block, center the logo, drop the toggle below it */ .hos-shell.is-rail-collapsed .hos-sidebar__brand { padding: 0 0 8px; display: flex; flex-direction: column; align-items: center; gap: 8px; } .hos-shell.is-rail-collapsed .hos-sidebar__brand-link { justify-content: center; } .hos-shell.is-rail-collapsed .hos-sidebar__brand-link > div { display: none; } .hos-shell.is-rail-collapsed .hos-sidebar__collapse { margin-left: 0; } /* CTA → icon-only 40px accent square */ .hos-shell.is-rail-collapsed .hos-sidebar__cta { width: 40px; height: 40px; margin: 0 auto 24px; padding: 0; } .hos-shell.is-rail-collapsed .hos-sidebar__cta i, .hos-shell.is-rail-collapsed .hos-sidebar__cta svg { margin: 0; } /* nav: section labels → a hairline divider; items → icon-only */ .hos-shell.is-rail-collapsed .hos-sidebar__nav { padding: 0 10px; } .hos-shell.is-rail-collapsed .hos-sidebar__nav .section-label { height: 1px; margin: 14px 8px 8px; padding: 0; background: var(--hairline); overflow: hidden; text-indent: -9999px; } .hos-shell.is-rail-collapsed .os-sidebar__link { justify-content: center; padding: 9px 0; } .hos-shell.is-rail-collapsed .hos-sidebar__label, .hos-shell.is-rail-collapsed .hos-sidebar__badge { display: none; } /* active item: just the accent icon on accent-soft (no left bar in collapsed) */ .hos-shell.is-rail-collapsed .os-sidebar__item--active .os-sidebar__link { background: var(--accent-soft); } /* owner footer → avatar only */ .hos-shell.is-rail-collapsed .os-sidebar__owner { justify-content: center; padding: 8px 0; } .hos-shell.is-rail-collapsed .hos-sidebar__owner-text, .hos-shell.is-rail-collapsed .hos-sidebar__owner-actions { display: none; } } /* respect reduced-motion for the width glide */ @media (prefers-reduced-motion: reduce) { .hos-shell-sidebar { transition: none; } } /* `turbo-frame { display: block }` DELETED 2026-07-20 — doing exactly what this block's own comment instructed: "delete this block when arena-ops moves off the v0.20.1 pin onto a gem version that carries it." We are on v0.22.1, which carries it. Deleting it was not just tidiness. Our copy had no `[hidden]` guard and loads AFTER os_ds, so it shadowed the gem's rule and was the thing actually making `