/* ========================================================================== AXING WEP — app-specific styles -------------------------------------------------------------------------- Layered on top of bootstrap.css → icons.css → axing.custom.css. The templates use Bootstrap components (.card, .alert, .list-group, .badge) and utilities (.fs-6, .text-secondary, .d-flex, .gap-*, .mb-*) for all layout, sizing and spacing. This file only carries rules that have no utility / component equivalent. ========================================================================== */ /* --- Horizontal-overflow clip ------------------------------------------- */ /* `overflow-x: clip` on silently swallows the few pixels of right- side overflow that the full-bleed divider's `calc(50% - 50vw)` produces on Windows whenever a vertical scrollbar appears (50vw counts the scrollbar gutter, 50% doesn't). Without this, the page would gain a horizontal scrollbar the moment the vertical one shows up. We deliberately do NOT set `scrollbar-gutter: stable` here — that would permanently reserve the scrollbar gutter even on short pages with no scrollbar, leaving an empty strip on the right where the header, divider and status bar visually stop short. The cost: when the page grows long enough to need a scrollbar, the layout briefly jumps left by the gutter width. That's the standard browser behaviour and feels less wrong than a permanently truncated header. `clip` (not `hidden`) because `hidden` would turn into a scroll container and break `position: sticky` on the status bar. */ body { overflow-x: clip; } /* --- Container hard-cap at 960 px --------------------------------------- */ /* Bootstrap's .container-lg keeps ramping up at xl (1140 px) and xxl (1320 px) breakpoints. We don't want that — at 4K reading distance in the workshop, lines get too long. Pin it to 960 px from xl up. The selector matches Bootstrap's specificity (0,1,0) and this stylesheet loads after bootstrap.css, so cascade order is the tie-breaker. */ @media (min-width: 1200px) { .container-lg { max-width: 960px; } } /* --- Disabled-button visibility in dark theme --------------------------- */ /* axing.custom.css applies a rest-state `opacity: 0.95` to filled and outline buttons in dark theme (its "dim default → bright on hover" pattern). That rule has the same specificity (0,2,0) as Bootstrap's `.btn:disabled { opacity: var(--bs-btn-disabled-opacity) }` and sits later in the cascade, so a disabled button keeps the 0.95 opacity instead of dropping to 0.65 — visually almost indistinguishable from the enabled state. Re-assert Bootstrap's disabled-opacity here with one extra qualifier to bump specificity to (0,2,1), so :disabled wins cleanly. Light theme isn't affected (axing has no rest-state opacity there). */ [data-bs-theme="dark"] .btn:disabled, [data-bs-theme="dark"] .btn.disabled, [data-bs-theme="dark"] fieldset:disabled .btn { opacity: var(--bs-btn-disabled-opacity); } /* --- App header & sticky status bar ------------------------------------- */ /* Sticky strategy: only the product status bar sticks; the top header scrolls away with the page. That keeps a single sticky layer (no more header-vs-status-bar pixel-snapping seams) and gives the inspector more vertical reading area once they're past the product picker. The header keeps `padding-top: env(safe-area-inset-top)` so on notched iPhones the logo/buttons don't sit behind the notch — on desktop the env() resolves to 0 and the rule is a no-op. */ body > header { padding-top: env(safe-area-inset-top); } .ps-status-bar { position: sticky; top: 0; z-index: 1019; } /* --- [hidden] reliability ------------------------------------------------ */ /* Bootstrap reboot has `[hidden] { display: none !important; }`, but its utility classes (.d-flex, .d-block, .d-grid …) come LATER in the same stylesheet with the same specificity (0,1,0) and the same !important — so an element with both `hidden` attribute and a .d-* utility loses the cascade to the utility, stays visible. Re-declaring [hidden] here in app.css (loaded after bootstrap.css) makes it last → it wins. Without this, e.g. `