/* * WISPHero's visual identity as CSS custom properties, consumed via * Tailwind's arbitrary-value syntax (e.g. bg-[var(--ph-surface)]) since * the app loads Tailwind from its plain CDN build with no config file - * that rules out a real tailwind.config.js darkMode setup, but CSS * variables work with zero config at all. * * Palette is a console/instrument-panel direction on purpose - a WISP * tech's tool for glancing at tower health between truck rolls, not a * generic SaaS dashboard - deep blue-black surfaces (not literal * Tailwind slate), one deliberate signal-indigo accent replacing the * generic blue-600 everywhere, and monospace (Atkinson Hyperlegible Mono, see * base.html) reserved for every metric/IP/timestamp so numbers read * like an instrument's own readout. * * Status-card fills (--ph-status-*, used by grid.js's qualityCardClass) * are deliberately muted rather than Tailwind's stock -600 swatches - * think backlit gauge lighting, not caution tape. Same reasoning as the * accent: one intentional set of hex values instead of default utility * colors. Kept theme-independent (no [data-theme="light"] override) on * purpose, same as the rest of this block - a saturated fill reads the * same regardless of theme, and white card text needs one contrast * target, not two. */ :root { /* READABILITY (2026-10-06): most of this app's readers have poor eyesight, so every text colour below is held to a contrast target on the surfaces it is actually used on (checked by tests_e2e/readability_audit.spec.js, which measures the real rendered page): text / secondary / muted clear 7:1 (WCAG AAA), faint clears 4.5:1 on the cards and rows it appears on, accent-text and the status-*-text colours clear 7:1 on the card surface, form-field edges 3:1. Dark = a dark blue-GRAY, not near-black (halation: bright text on pure black glares and blurs for astigmatic eyes), with the surfaces stepping up in lightness so cards read as cards. The accent has two jobs and so two tokens: --ph-accent is a FILL (white text on it), --ph-accent-text is accent-coloured TEXT/icons on a surface. */ --ph-bg: #121923; --ph-surface: #1a2431; --ph-surface-alt: #223041; --ph-surface-strong: #2f3f54; --ph-border: #46576e; --ph-border-input: #71839c; --ph-text: #f5f8fa; --ph-text-secondary: #dbe3ea; --ph-text-muted: #b9c5d1; --ph-text-faint: #abb8c7; --ph-text-faintest: #a1aebd; --ph-accent: #3647d0; --ph-accent-hover: #4556e0; --ph-accent-text: #b0bbff; --ph-accent-text-hover: #c6cdff; --ph-accent-soft: #232d5e; --ph-status-good: #236447; --ph-status-warning: #755600; --ph-status-bad: #943d10; --ph-status-critical: #93263f; --ph-status-pending: #3b4657; /* The same five states as TEXT on a card surface (the fills above are for white text ON them). */ --ph-status-good-text: #4ade9a; --ph-status-warning-text: #fbbf24; --ph-status-bad-text: #ffa066; --ph-status-critical-text: #ff8da1; --ph-status-pending-text: #b9c5d1; /* Text colours for a warning / a success / an error / an info line (the light theme needs much darker ones - the 400-level swatches are 1.7-2.7:1 on white). */ --ph-warn: #fbbf24; --ph-ok: #4ade9a; --ph-bad: #ff8da1; --ph-info: #7dd3fc; /* Hover colour for a palette-coloured control that goes red on hover (a delete X, "Retry now"). Dark theme: the stock rose-300 the markup asks for. */ --ph-bad-hover: #fda4af; /* Ping Tool strips (static/ping_tool.js reads these from the canvas): light latency bands behind the line (0-200 / 201-500 / 501+ ms), the line, the solid no-reply block and the mid grid line. */ --ph-pt-band-good: rgba(74, 222, 154, 0.12); --ph-pt-band-warn: rgba(251, 191, 36, 0.16); --ph-pt-band-bad: rgba(255, 141, 161, 0.18); --ph-pt-line: #c6cdff; --ph-pt-loss: #e11d48; --ph-pt-grid: rgba(255, 255, 255, 0.10); /* Aliases for names the markup already uses: a hover fill one step up from the control's own, and "the" body text colour. */ --ph-surface-hover: var(--ph-surface-strong); --ph-text-primary: var(--ph-text); --ph-font-sans: 'Atkinson Hyperlegible Next', ui-sans-serif, system-ui, 'Segoe UI', Roboto, sans-serif; --ph-font-mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Consolas, monospace; } [data-theme="light"] { --ph-bg: #f4f6f9; --ph-surface: #ffffff; --ph-surface-alt: #edf0f4; --ph-surface-strong: #dbe0e7; --ph-border: #b3bcc7; --ph-border-input: #7f8b99; --ph-text: #0f1419; --ph-text-secondary: #27303a; --ph-text-muted: #475260; --ph-text-faint: #4d5967; --ph-text-faintest: #5c6877; --ph-accent: #3340c8; --ph-accent-hover: #2a36b0; --ph-accent-text: #2f3cbd; --ph-accent-text-hover: #252fa0; --ph-accent-soft: #e8ebff; --ph-status-good-text: #065f46; --ph-status-warning-text: #92400e; --ph-status-bad-text: #9a3412; --ph-status-critical-text: #9f1239; --ph-status-pending-text: #475260; --ph-warn: #92400e; --ph-ok: #065f46; --ph-bad: #9f1239; --ph-info: #075985; --ph-bad-hover: #881337; --ph-pt-band-good: rgba(6, 95, 70, 0.10); --ph-pt-band-warn: rgba(180, 83, 9, 0.13); --ph-pt-band-bad: rgba(159, 18, 57, 0.11); --ph-pt-line: #252fa0; --ph-pt-loss: #be123c; --ph-pt-grid: rgba(15, 20, 25, 0.10); } body { font-family: var(--ph-font-sans); } /* base.html's : a browser without dvh (Chrome < 108, Safari < 15.4 - a smart-TV browser, which this app targets) drops that class's whole declaration, leaving body at height:auto and `overflow-hidden`, so a tall page was clipped and could not scroll. This line is the vh fallback: a browser with dvh reads both and keeps the second. (The escaped class is Tailwind's own, so this only touches the page shell.) */ body.h-\[100dvh\] { height: 100vh; height: 100dvh; } /* READABILITY: the page's own text size is the browser's (16px unless the person changed it) - never forced smaller - with generous line spacing, and bright-on-dark text that is not hairline thin. */ html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { line-height: 1.5; font-size: 1rem; } /* A placeholder is a hint the person has to be able to read: Tailwind's own default (gray-400) is 2.4:1 on a white field. Still lighter than typed text so it does not look filled in. */ :root input::placeholder, :root textarea::placeholder, ::placeholder { color: var(--ph-text-faint); opacity: 1; } /* Keyboard focus is always visible, and never thinner than 2px, on every theme (WCAG 2.4.7 / 2.4.11). :where() keeps this at zero specificity so a control that draws its own ring (focus:ring-*) still wins. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--ph-accent-text); outline-offset: 2px; } /* ...except that ~30 text fields carry Tailwind's `focus:outline-none` (outline: 2px solid transparent, specificity 0,2,0) and kept only a 1px border-colour change as their focus cue - the sign-in form and the header search among them. Put the ring back on those; a field that draws its own ring (focus:ring-*) keeps just that. */ :is(input, select, textarea).focus\:outline-none:focus-visible:not([class*="focus:ring"]) { outline: 2px solid var(--ph-accent-text); outline-offset: 2px; } /* Native form controls (checkbox, radio, range) take the accent so they stand out from the page. */ :root { accent-color: var(--ph-accent); } /* Tailwind's palette-coloured text is chosen for a DARK page (the -400 / -300 levels). On the light theme those are 1.7-2.7:1 on white, so the same words get the darker token instead. The audit (tests_e2e/readability_audit.spec.js) measures the real result. Two kinds of element are NOT on the light page and must keep light text, which the rules below take care of: a thing that paints its own dark fill by CLASS (an error toast, a Synced badge: its fill goes light in the light theme, below) and a thing on a status card / list row (a .text-white subtree: the fill is theme-independent, so the tokens are re-pointed to light values there). Do NOT write `html :is(..., .hover\:text-x:hover)`: :is() takes the specificity of its most specific argument, so one :hover class in the list lifted every other class in it above Tailwind's own hover rule and killed the hover feedback. */ html :is(.text-rose-400, .text-rose-500, .text-red-400, .text-red-500) { color: var(--ph-bad); } html[data-theme="light"] :is(.text-rose-300, .text-rose-200, [class*="text-rose-300/"]) { color: var(--ph-bad); } html[data-theme="light"] :is(.text-emerald-300, .text-emerald-400, .text-emerald-500, .text-green-500, .text-green-400) { color: var(--ph-ok); } html[data-theme="light"] :is(.text-amber-300, .text-amber-400, .text-amber-500, .text-amber-200, .text-amber-100, [class*="text-amber-100/"]) { color: var(--ph-warn); } html[data-theme="light"] :is(.text-sky-400, .text-sky-300) { color: var(--ph-info); } /* A red hover: the stock -100..-400 shades are pale on the light page, so the darkest red the theme has. */ html[data-theme="light"] :is(.hover\:text-rose-100, .hover\:text-rose-200, .hover\:text-rose-300, .hover\:text-rose-400):hover { color: var(--ph-bad-hover); } /* Status cards and list rows paint a saturated fill in BOTH themes (white text, .text-white), so inside one the "text on the page" tokens above must stay the light values: the call-centre-note icon (amber), a card's Clear button (rose hover) were dark-on-dark in the light theme (1.0-1.2:1, invisible). The flip card's back face is the one light surface inside such a card: it puts the dark values back (below). */ html[data-theme="light"] .text-white { --ph-bad: #fecdd3; --ph-warn: #fde68a; --ph-ok: #a7f3d0; --ph-info: #bae6fd; --ph-bad-hover: #fecdd3; } .ph-flip-back { --ph-bad: #9f1239; --ph-warn: #92400e; --ph-ok: #065f46; --ph-info: #075985; --ph-bad-hover: #881337; } /* Error toasts and banners (`bg-rose-950 text-rose-200`), the Synced / Modified badges (`bg-sky-950 text-sky-400`, `bg-amber-950 text-amber-400`), the amber / rose warning banners (`bg-amber-950/40`, `bg-rose-950/30`) and the Reboot / Remove / Retry buttons (`bg-rose-900/40`, `bg-amber-800/60`) are dark tints written for the dark page. On the light page a dark tint is either a near-black box under the dark text tokens above (1.8-2.1:1) or, when translucent, a muddy tan under it (~3:1), so each becomes the matching LIGHT tint and the dark tokens sit on it (6.4-6.7:1, measured by the "transient states" tests in readability_audit.spec.js). Borders stay as written: a dark red edge on a pale rose box reads well. */ html[data-theme="light"] :is([class*="bg-rose-950"], [class*="bg-rose-900"]) { background-color: #ffe4e6; } html[data-theme="light"] :is([class*="bg-amber-950"], [class*="bg-amber-800"]) { background-color: #fef3c7; } html[data-theme="light"] [class*="bg-sky-950"] { background-color: #e0f2fe; } html[data-theme="light"] :is([class*="hover:bg-rose-900"], [class*="hover:bg-rose-950"]):hover { background-color: #fecdd3; } html[data-theme="light"] [class*="hover:bg-amber-800"]:hover { background-color: #fde68a; } /* The flip card's back face is a fixed light grey in both themes; the -600 shades the markup uses on it are 2.8-4.1:1 there. */ .ph-flip-back .text-emerald-600 { color: #047857; } .ph-flip-back .text-amber-600 { color: #92400e; } .ph-flip-back .text-rose-600 { color: #be123c; } /* Coloured buttons and badges with WHITE text: Tailwind's -500/-600 fills give white text only 2.5-4.8:1 (emerald-600 3.8, amber-600 3.2, rose-500 3.7). Anything that carries both a palette fill and text-white is moved to the -800 shade (7+:1) and its hover to -900. Dots, bars and switches (no text-white) keep the bright fill. */ html :is([class*="bg-rose-500"], [class*="bg-rose-600"], [class*="bg-red-500"], [class*="bg-red-600"])[class*="text-white"] { background-color: #9f1239; } html :is([class*="bg-rose-500"], [class*="bg-rose-600"], [class*="bg-red-500"], [class*="bg-red-600"])[class*="text-white"]:hover { background-color: #881337; } html :is([class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"], [class*="bg-green-600"])[class*="text-white"] { background-color: #065f46; } html :is([class*="bg-emerald-500"], [class*="bg-emerald-600"], [class*="bg-emerald-700"], [class*="bg-green-600"])[class*="text-white"]:hover { background-color: #064e3b; } html :is([class*="bg-amber-500"], [class*="bg-amber-600"], [class*="bg-yellow-600"], [class*="bg-orange-600"])[class*="text-white"] { background-color: #92400e; } html :is([class*="bg-amber-500"], [class*="bg-amber-600"], [class*="bg-yellow-600"], [class*="bg-orange-600"])[class*="text-white"]:hover { background-color: #78350f; } html :is([class*="bg-sky-500"], [class*="bg-sky-600"])[class*="text-white"] { background-color: #075985; } html :is([class*="bg-sky-500"], [class*="bg-sky-600"])[class*="text-white"]:hover { background-color: #0c4a6e; } html :is([class*="bg-purple-600"], [class*="bg-violet-700"])[class*="text-white"] { background-color: #6b21a8; } /* Every metric/IP/timestamp already used font-mono as a Tailwind utility class before this file existed - this just makes that instinct a real, deliberate typeface instead of the browser's generic monospace fallback. */ .font-mono, code, pre { font-family: var(--ph-font-mono) !important; } /* A barely-there grid over the whole window, felt more than seen - quiet atmosphere nodding to a radar/scope display without competing with real data. Opacity is intentionally tiny; this is not a decoration to notice. `position: absolute`, NOT `fixed` (it used to be fixed): a fixed element is its own compositor layer (it must not scroll with the page), and then every piece of content painted after it that overlaps it - the whole page, every Status card's text - is pushed into layers ABOVE it whose background is transparent, and text in such a layer is drawn with greyscale instead of sub-pixel (ClearType) smoothing: the "blurry, like a TV setting" Status cards. Measured in Chromium: white-on-colour card text had no colour fringe (greyscale) with the fixed grid and ~55 % fringed edge pixels (sub-pixel smoothing) without it. base.html's is h-[100dvh] overflow-hidden (the document never scrolls, each page scrolls inside itself), so an absolutely positioned box over the initial containing block covers exactly what the fixed one did. */ body::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: -1; background-image: linear-gradient(var(--ph-border) 1px, transparent 1px), linear-gradient(90deg, var(--ph-border) 1px, transparent 1px); background-size: 48px 48px; opacity: 0.05; } /* Sharp text on a high-DPI screen (Windows at 150 % / 175 % scaling, a browser zoomed to 150 %): from a device scale of 1.5 Chromium composites every scrolling box ("prefer compositing to LCD text"), and a composited scroller only draws sub-pixel text when its own background is opaque.
is each page's scroll box and has no background of its own, so everything inside it - every Status card - was drawn with greyscale smoothing there (measured at 1.5x: no colour fringe on the card text; with this rule ~50 %, the same as at 1x). The page colour behind it is the same one, so nothing looks different (the 5 % grid above sits behind the box and is hidden there - it is a few levels of grey, invisible on most screens). A Tailwind bg-* class on a
still wins (0,1,0 > 0,0,1). */ @media (min-resolution: 1.5dppx) { main { background-color: var(--ph-bg); } } /* A native range slider draws its unfilled track from the browser's own light/dark scheme; left alone it is bright white on this dark theme. */ input[type="range"] { color-scheme: dark; } [data-theme="light"] input[type="range"] { color-scheme: light; } /* Card flashing (Settings > Status Card Style > Card Flashing) - an opacity pulse, not a color/size change, so it stays legible mid-pulse and doesn't fight the status color itself. animation-duration is set per element via inline style (grid.js's cardFlashDuration()), driven by each tier's admin-chosen rate - this class only supplies the keyframes and defaults. */ @keyframes ph-card-flash { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } } .ph-card-flash { animation-name: ph-card-flash; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @media (prefers-reduced-motion: reduce) { .ph-card-flash { animation: none; } } /* The Status CARD's flash (grid.js cardFlashClass, card_prefs.js previewCardFlashClass): the fill itself pulses between the state colour and the SAME colour mixed toward black - never toward white, never a fade. The old whole-card opacity pulse blended the card into the page and dropped the white text to ~2.7:1 on a Bad card in the light theme (measured); a darker fill only ever RAISES the contrast of white text, so every frame of the pulse is at least as readable as the card at rest. Same meaning and rates as before (the duration is set per card from the admin's rate: good never, warning slow, bad medium, critical fast). The animation exists only on a card that is flashing - a card at rest has no animation, no layer. --ph-card-fill is the card's own fill (set inline with it). */ @keyframes ph-card-flash-bg { 50% { background-color: color-mix(in srgb, var(--ph-card-fill, #000) 60%, #000); } } @supports not (background-color: color-mix(in srgb, red 50%, blue)) { @keyframes ph-card-flash-bg { 50% { box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .4); } } } .ph-card-flash-bg { animation-name: ph-card-flash-bg; animation-duration: 1.2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @media (prefers-reduced-motion: reduce) { .ph-card-flash-bg { animation: none; } } /* Flip-to-diagnostics Status cards (double-tap/double-click a solo card - see _host_grid.html's own comment on its card markup and grid.js's toggleFlip/_setFlipRotation for the full mechanic). A single rotating face: .ph-flip-inner is the ONLY element that transforms, and grid.js swaps which face is MOUNTED (x-if) at this transition's own halfway point, so the front and back are never both visible/mismatched at once. `transition`, not a second `animation` - deliberately doesn't collide with .ph-card-flash's own `animation` above (see that class's own comment on why `animation-name` doesn't merge across two classes on the same element; a `transition` has no such gotcha, it isn't a named keyframe animation). Needs `perspective` on the OUTER card div for this rotateY to read as a true 3D flip rather than a flat horizontal squash. THE 3D EXISTS ONLY WHILE A CARD IS FLIPPING OR FLIPPED (.ph-flip-3d, put on the card by grid.js's flip3dIds - from the moment a flip starts until its flip-back transition has finished). A card at rest is plain, flat HTML: no perspective, no preserve-3d, `transform: none`. This is not a style preference: Chromium makes every element that has a 3D transform (even rotateY(0deg)) or sits in a preserve-3d scene its OWN compositor layer (measured with the CDP LayerTree domain: Trivial3DTransform on the inner face, Transform3DSceneLeaf on the card's whole content, Overlap on the card itself - three layers per card, on every card, all day), and text in a layer with a transparent background is drawn with greyscale instead of sub-pixel (ClearType) smoothing and, at a fractional display scale such as Windows' 125 % / 150 %, can be rasterised soft - "the status cards look blurry, like a TV setting". Never put perspective / transform-style: preserve-3d / will-change / a transform on a resting card. */ .ph-flip-inner { transition: transform 480ms cubic-bezier(0.4, 0, 0.2, 1); } .ph-flip-3d { perspective: 1000px; } .ph-flip-3d .ph-flip-inner { transform-style: preserve-3d; } .ph-flip-inner-flipped { transform: rotateY(180deg); } /* The back face mounts pre-rotated 180deg (grid.js only mounts it once the PARENT .ph-flip-inner is already mid-turn, past 90deg/edge-on) - once the parent finishes its own 180deg turn, 180 + 180 = 360deg, i.e. right-side-up, not mirrored. A fixed whitish-gray, not the front's own saturated quality color - real feedback that the back reads clearer as a calm, neutral surface with its own real red/yellow/green meters drawn on top (grid.js's PH_FLIP_TIER_ COLORS) than as another solid block of the same color the front already is. Deliberately theme-independent (a literal color, not a --ph-* token) - same reasoning as the front's own qualityCardStyle(): a wall display reads this consistently regardless of light/dark mode. */ .ph-flip-back { transform: rotateY(180deg); background-color: #eef1f4; color: #1e293b; } /* The "+N more" / "Show fewer" button under a card's Recent outage line: a finger gets a 44px hit area that takes no layout room (the line must not grow for it). */ @media (pointer: coarse) { .ph-flip-more { display: inline-flex; align-items: center; min-height: 44px; margin-block: -13px; } } @media (prefers-reduced-motion: reduce) { .ph-flip-inner { transition: none; } } /* A flipped card's back face (graphs, diagnostics) is far taller than its front, and the grid stretches every card in a row to the row's height - so the flipped card's row mates used to grow with it, big empty cards beside the one being looked at. grid.js's _syncFlipRowMates marks the cards in a flipped card's row; they keep the height they have on their own (the flipped card alone is tall, and the space under its row mates is left empty on purpose). The same goes for a grouped site's card (its host rows, and a "Show N more" it was opened with, make it taller than a single host's card): the single cards beside it are held, only the grouped card changes size. Rows with neither are untouched: their cards still stretch to one height, so every footer lines up. */ #ph-solo-grid > .ph-flip-mate { align-self: start; height: var(--ph-mate-h, auto); } /* --ph-mate-h (set by grid.js's _syncFlipRowMates) is the height the row HAD before the flip - the same for every mate, so the cards beside the flipped one stay level with each other (a card with a line fewer, such as a down host with no uptime, would otherwise sit shorter than its neighbours) and their footers still line up. A definite height, not a min-height, so each card's footer can still be pushed to its bottom edge. */ /* EVERY card is its own height (owner, 2026-10-16: a DNS host's extra "Ping: answers" line made its whole row taller and left a blank gap under the name of every card beside it - "each card should stay its own size"). The grid no longer stretches a row's cards to the tallest one, and the row-mate hold above is switched off (a card only ever keeps the height its own content needs, so there is nothing to hold). The cards of a row therefore have ragged bottoms when their content differs - on purpose. */ #ph-solo-grid { align-items: start; } #ph-solo-grid > *, #ph-solo-grid > .ph-flip-mate { height: auto; align-self: start; } /* Header bell's one-time "ring" - plays once right after notifications go from off to on (see base.html's phAlertBell()), a decaying swing like a real bell settling, not a symmetric wobble. transform-box: fill-box makes the percentage transform-origin pivot around the icon's own bounding box (its top edge, where a real bell would be mounted) rather than the SVG viewport's origin. */ @keyframes ph-bell-ring { 0% { transform: rotate(0deg); } 10% { transform: rotate(16deg); } 20% { transform: rotate(-14deg); } 30% { transform: rotate(11deg); } 40% { transform: rotate(-8deg); } 50% { transform: rotate(6deg); } 60% { transform: rotate(-4deg); } 70% { transform: rotate(2deg); } 85% { transform: rotate(-1deg); } 100% { transform: rotate(0deg); } } .ph-bell-ring { transform-box: fill-box; transform-origin: 50% 0%; animation: ph-bell-ring 0.8s ease-in-out 1; } @media (prefers-reduced-motion: reduce) { .ph-bell-ring { animation: none; } } /* A second, stronger attention-getter for small header icons - real feedback that ph-card-flash's own opacity dip alone (designed to stay subtle/legible across many status cards at once, see its own comment above) wasn't noticeable enough for a single small 18px icon meant to flag something needing action (the header's Notes/ call-center bell). A gentle scale pulse, layered on top of ph-card-flash's own opacity dip - same 1.2s timing as ph-card-flash's default duration so the grow and the fade land in sync instead of drifting against each other. This class's own `animation` shorthand lists BOTH keyframes (ph-card-flash AND ph-icon-pulse) directly, rather than relying on applying two separate classes together - `animation-name` (like any other CSS property) doesn't merge across classes of equal specificity, the later-defined rule simply wins outright, so `class="ph-card-flash ph-icon-pulse"` together would silently drop the flash and run the pulse alone (confirmed live via getComputedStyle().animationName before landing on this fix - it reported only "ph-icon-pulse", not both). Apply ONLY this one class (not ph-card-flash alongside it) wherever both effects are wanted. */ @keyframes ph-icon-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } } .ph-icon-pulse { animation: ph-card-flash 1.2s ease-in-out infinite, ph-icon-pulse 1.2s ease-in-out infinite; transform-origin: center; } @media (prefers-reduced-motion: reduce) { .ph-icon-pulse { animation: none; } } /* Status grid's empty-filtered-view "still checking" cue (real gap found live: a bare static message for a deliberately narrowed filter - e.g. "Issues only" with nothing currently wrong - read as broken/ frozen, not as the good news it actually was reporting). A calm dot with two staggered expanding/fading rings - deliberately gentle, NOT the sharper ph-outage-ring pop above used for a real grid-outage marker - this is ambient reassurance ("the system is still actively checking"), never implying anything about real data one way or the other, same indeterminate-animation reasoning ph-gauge-sweep's own comment already states for its own "still working" spinner. Color comes from the element's own `color` (currentColor) - grid.js's own template sets it to the real "good" quality color inline, matching PH_QUALITY_COLORS rather than a generic Tailwind shade. */ @keyframes ph-empty-pulse-ring { 0% { transform: scale(0.6); opacity: 0.35; } 100% { transform: scale(1.6); opacity: 0; } } .ph-empty-pulse::before, .ph-empty-pulse::after { content: ''; position: absolute; inset: 0; border-radius: 9999px; background: currentColor; opacity: 0.22; animation: ph-empty-pulse-ring 2.2s ease-out infinite; } .ph-empty-pulse::after { animation-delay: 1.1s; } @media (prefers-reduced-motion: reduce) { .ph-empty-pulse::before, .ph-empty-pulse::after { animation: none; display: none; } } /* The Status grid's empty view ("Focused on issues only - no issues right now.", "No hosts match.", the TV's version): centred - across and down the room the page has left - with the pulse and the message sized by the window, so it reads from a phone to a wall display and in a cascaded window alike. Everything is a clamp() of the viewport (rem for the text, so the browser's text size scales it too); the block fills what is left of the window below the header (100dvh less 15rem - the header, the controls and the page padding; vh before dvh), so "centred down" means the middle of the screen, never so tall it makes the page scroll; no per-size rules. The pulse's rings grow to 1.6x, so the gap leaves them room. */ .ph-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(1rem, .6rem + 1.6vw, 2rem); text-align: center; min-height: clamp(14rem, calc(100vh - 15rem), 48rem); min-height: clamp(14rem, calc(100dvh - 15rem), 48rem); padding: clamp(1.5rem, 4vw, 3rem) clamp(1rem, 4vw, 2rem); } /* The phone's 24h strip (~220px) sits above the grid, so when it is shown (the page's own copy, not hidden by x-show) the block leaves room for it as well - without that, every phone scrolled just to see the message. */ main:has([data-testid="quick-strip"]:not([style*="display: none"])) .ph-empty:not(.ph-empty-tv) { min-height: clamp(12rem, calc(100vh - 30rem), 48rem); min-height: clamp(12rem, calc(100dvh - 30rem), 48rem); } .ph-empty-pulse { width: clamp(4.5rem, 3rem + 6vw, 8rem); aspect-ratio: 1; flex: none; margin-bottom: .5rem; } .ph-empty-dot { width: 28%; height: 28%; } .ph-empty-msg { max-width: min(38rem, 100%); font-size: clamp(1.1875rem, 1rem + 1vw, 1.875rem); line-height: 1.35; font-weight: 600; color: var(--ph-text-secondary); text-wrap: balance; } /* A host's notes show as the same short "Note" tag on the Status card, styled EXACTLY like the DNS tag (grid.js cardBadges: `bg-black/25 text-white`, a plain quiet wash that blends into the card). Owner, 2026-10-16: no colour difference between the card note and the call-center note - the hover preview and the menu already say which one it is. */ .ph-note-on { background: #4338ca; color: #fff; border-radius: .375rem; box-shadow: 0 0 0 1px rgba(255, 255, 255, .85); } .ph-note-on:hover, .ph-card-ico.ph-note-on:hover, .ph-card-more.ph-note-on:hover, .ph-tap-inline.ph-note-on:hover { background: #4f46e5; color: #fff; } /* (the two-class forms beat Tailwind's hover:bg-white/15) */ .ph-tap-inline.ph-note-on { padding: 2px; } /* The Status card's LOSS / LATENCY / JITTER labels: the sans face (Atkinson Hyperlegible Next), same 14px - its capitals are narrower than the mono's fixed width, so the row with "Show jitter" on fits a ~295px card on one line (measured: 290 -> 262px with typical numbers). The numbers stay mono (tabular). */ .ph-stat-lbl { font-family: var(--ph-font-sans); } /* ---- The Status card's front face: one fixed row template (2026-10-15) -------------------------------------------------------------------------------------------- The owner's screenshot: a Bad card whose "LATENCY 201ms [arrow] JITTER 41.0ms" row wrapped, grew the card and pushed every row mate's rows out of line. Now: * the name takes the slack (flex: 1) and everything under it is a row of one fixed line, so in a grid row the name starts at the same top and every row under it (address, group, status, LOSS / LATENCY / JITTER, the actions) sits at the same offset from the card's bottom - whatever the card's name or badges are; * each metric is a fixed SLOT (label + number + a reserved 16px for the trend arrow, tabular numerals, never wrapping); when the row cannot fit the worst numbers (100% / 1234ms / 41.0ms) in the card's width the LABELS get shorter, then the label goes above the number - never a wrap, never smaller type (container queries on the card); * the card is a size container (container-type) - that is what lets the row ask how wide ITS card is, even in a scaled / Cards-per-row grid. A container gets layout containment (no compositor layer); tests_e2e/card_crispness.spec.js still holds a resting card to zero layers. */ .ph-solo-card { container: phcard / inline-size; } .ph-card-name { flex: 1 1 auto; min-width: 0; } .ph-solo-card .ph-face:not([data-box="spacious"]) { row-gap: 2px; } /* (the lines already have 1.3 line-height: 2px between them, not 4) */ .ph-addr-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 .5rem; min-width: 0; height: 1.1375rem; } /* 18.2px = one 14px line at 1.3 */ .ph-addr-row > .ph-addr { flex: 0 1 auto; min-width: 5ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ph-badges { display: flex; flex: 0 1 auto; align-items: center; gap: .25rem; min-width: 0; overflow: hidden; padding: 1px; margin: -1px; } /* (1px so the Note chip's white edge is not cut) */ .ph-badges .ph-chip { line-height: 1; white-space: nowrap; flex: none; } /* a chip is 17px: never taller than the address line */ .ph-chip:is(a) { text-decoration: none; } .ph-chip:is(a):hover, .ph-chip:is(a):focus-visible { text-decoration: underline; } .ph-stats { display: flex; flex-wrap: nowrap; justify-content: space-between; align-items: baseline; column-gap: .5rem; padding-top: 0; border-top: 1px solid rgba(255, 255, 255, .3); white-space: nowrap; font-variant-numeric: tabular-nums; } .ph-stat { display: inline-flex; flex: none; align-items: baseline; min-width: 0; } .ph-stat > .ph-stat-lbl { margin-right: .3em; } .ph-stat-val { display: inline-flex; align-items: baseline; } .ph-stat-num { display: inline-block; text-align: right; font-weight: 700; } .ph-stat[data-metric="loss"] .ph-stat-num { min-width: 4ch; } /* 100% */ .ph-stat[data-metric="latency"] .ph-stat-num { min-width: 6ch; } /* 1235ms */ .ph-stat[data-metric="jitter"] .ph-stat-num { min-width: 6ch; } /* 41.0ms */ .ph-trend-slot { display: inline-flex; flex: none; width: 16px; align-items: center; justify-content: flex-end; } /* the arrow's room is ALWAYS taken, arrow or not */ .ph-lbl-short { display: none; } /* Too narrow for the worst numbers on one line with the full labels (measured, tests_e2e/status_card_polish.spec.js sweeps 250-520px cards): with jitter on, the short labels (LAT / JIT) from 392px down; from 322px down (jitter on) or 262px down (jitter off) the label sits above the number instead. */ @container phcard (max-width: 391px) { .ph-stats[data-jitter="1"] .ph-lbl-full { display: none; } .ph-stats[data-jitter="1"] .ph-lbl-short { display: inline; } } @container phcard (max-width: 321px) { .ph-stats[data-jitter="1"] .ph-stat { flex-direction: column; align-items: flex-start; } .ph-stats[data-jitter="1"] .ph-stat > .ph-stat-lbl { margin-right: 0; font-size: .8125rem; line-height: 1.2; } .ph-stats[data-jitter="1"] .ph-lbl-full { display: inline; } .ph-stats[data-jitter="1"] .ph-lbl-short { display: none; } } @container phcard (max-width: 261px) { .ph-stats[data-jitter="0"] .ph-stat { flex-direction: column; align-items: flex-start; } .ph-stats[data-jitter="0"] .ph-stat > .ph-stat-lbl { margin-right: 0; font-size: .8125rem; line-height: 1.2; } } /* The card's "..." button (2026-10-15, owner: "too bulky - move it to the top right"): the card has NO button row. The one control is this "..." at the top right of the name row; Pause / Resume, Notes and every other action are rows of the menu it opens (grid.js cardActions). 28px with a mouse, 44px on a finger - the negative margins pull the button into the card's padding so it never makes the name row taller than the name itself. The dots sit BARE on the card's own fill (owner: the pill behind them looked off; the full 28 / 44px box is still the tap area): a darker wash only while the mouse is over it, while it is pressed, or while its menu is open - never left behind by a finger (hover is gated to devices that really hover). Shown on every card that has something in the menu (hasCardControls). */ .ph-card-head { display: flex; flex: 1 1 auto; align-items: flex-start; gap: .375rem; min-width: 0; min-height: 1.3em; } .ph-card-head > .ph-card-name { flex: 1 1 0; min-height: 0; } .ph-grid-root .ph-card-more.ph-card-more-solo { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 28px; height: 28px; margin: -4px -4px -4px 0; padding: 0; border-radius: .375rem; background: transparent; color: #fff; cursor: pointer; -webkit-tap-highlight-color: transparent; } .ph-grid-root .ph-card-more.ph-card-more-solo:active, .ph-grid-root .ph-card-more.ph-card-more-solo[aria-expanded="true"] { background: rgba(0, 0, 0, .24); } @media (hover: hover) { .ph-grid-root .ph-card-more.ph-card-more-solo:hover { background: rgba(0, 0, 0, .24); } } .ph-grid-root .ph-card-more.ph-card-more-solo:focus-visible { outline: 2px solid #fff; outline-offset: 1px; } @media (pointer: coarse) { .ph-grid-root .ph-card-more.ph-card-more-solo { width: 44px; height: 44px; margin: -12px -8px -12px 0; } } /* The More menu: a popover beside the "..." button on a mouse, the bottom sheet on a finger (one set of rows, grid.js cardActions.mode). The sheet slides up (a CSS animation, so it replays each time the panel is shown); a popover just appears. */ @keyframes ph-sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } } .ph-sheet-in { animation: ph-sheet-in .2s ease-out; } @media (prefers-reduced-motion: reduce) { .ph-sheet-in { animation: none; } } /* The grid root is `space-y-4`, which gives EVERY child (a position: fixed one too) margin-top: 1rem. The menu's full-window overlay (and the confirm dialog, the note preview) therefore started 16px down: an undimmed 16px strip above the phone sheet's scrim, and the mouse popover opening 16px below its "..." button. A fixed layer has no business in the vertical rhythm. */ .ph-grid-root > .fixed { margin-top: 0 !important; } .ph-actions-pop { position: absolute; width: min(19rem, calc(100vw - 16px)); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; border-radius: .5rem; background: var(--ph-surface); border: 1px solid var(--ph-border); box-shadow: 0 10px 30px rgba(0, 0, 0, .45); padding: .25rem; } .ph-act-row { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 40px; padding: .375rem .625rem; border-radius: .375rem; text-align: left; font-size: .9375rem; color: var(--ph-text); cursor: pointer; } .ph-act-row:hover, .ph-act-row:focus-visible { background: var(--ph-surface-hover); } .ph-act-row:focus-visible { outline: 2px solid var(--ph-accent-text); outline-offset: -2px; } .ph-act-row > svg { width: 1.25rem; height: 1.25rem; flex: none; color: var(--ph-text-muted); } @media (pointer: coarse) { .ph-act-row { min-height: 48px; } } /* A filled chip that is not a Tailwind palette colour: the DFS (radar) hit - white on a dark teal, 5.5:1. */ .ph-chip-dfs { background: #0f766e; color: #fff; } /* "Cards per row" (the Displays menu on an ordinary desktop window, templates/_header.html): segmented choices - a filled accent (white text) for the one in use, outlined for the rest; 32px tall with a mouse, a 44px finger target on touch; 13px text. */ .ph-cols-btn { min-height: 32px; min-width: 36px; padding-inline: .625rem; border-radius: .375rem; border: 1px solid var(--ph-border-input); color: var(--ph-text-secondary); font-size: .8125rem; font-weight: 600; cursor: pointer; } .ph-cols-btn:hover:not(:disabled) { color: var(--ph-text); } .ph-cols-btn:disabled { color: var(--ph-text-faint); border-color: var(--ph-border); cursor: not-allowed; } .ph-cols-btn.ph-cols-on:disabled { color: #fff; opacity: .7; } .ph-cols-btn.ph-cols-on, .ph-cols-btn.ph-cols-on:hover:not(:disabled) { background: var(--ph-accent); border-color: transparent; color: #fff; } @media (pointer: coarse) { .ph-cols-btn { min-height: 44px; min-width: 44px; } } /* The outages and high-latency dialogs' card (templates/_header.html): never taller than the window (vh first, dvh where the browser has it); the sheet clears a phone's home indicator. */ .ph-list-panel { max-height: min(88vh, 48rem); max-height: min(88dvh, 48rem); padding-bottom: env(safe-area-inset-bottom, 0px); } /* A device's name is a link, and the link covers its whole row: a finger needs no 44px box on the name itself, a keyboard gets a ring around the row. */ .ph-row-link::after { content: ''; position: absolute; inset: 0; border-radius: .75rem; } .ph-row-link:focus-visible { outline: none; } .ph-row-link:focus-visible::after { outline: 2px solid var(--ph-accent-text); outline-offset: -2px; } /* A TV across the room: the same, much larger. */ .ph-empty-tv { min-height: clamp(20rem, calc(100vh - 8rem), 80rem); min-height: clamp(20rem, calc(100dvh - 8rem), 80rem); } .ph-empty-tv .ph-empty-pulse { width: clamp(7rem, 12vw, 16rem); } .ph-empty-tv .ph-empty-msg { max-width: min(60rem, 100%); font-size: clamp(2rem, 1.2rem + 2.2vw, 4rem); } /* Bandwidth-test "running" gauge (Customer Diagnostic + Devices > Routers modal's own Run Bandwidth Test buttons) - a needle continuously sweeping the full arc, not settling on any one position. The real MikroTik REST bandwidth-test call is a single blocking request that only returns a result once the whole test finishes (see services_mikrotik.py's own docstring) - there's no live incremental throughput to actually plot mid-test, so this is deliberately an INDETERMINATE "still working" animation, not a fabricated live reading. transform-origin is set inline per SVG (needs the gauge's own pivot coordinates, not a fixed CSS value). */ @keyframes ph-gauge-sweep { 0%, 100% { transform: rotate(-62deg); } 50% { transform: rotate(62deg); } } .ph-gauge-needle { animation: ph-gauge-sweep 1.6s ease-in-out infinite; } @media (prefers-reduced-motion: reduce) { .ph-gauge-needle { animation: none; transform: rotate(0deg); } } /* Icon-rail hover label (admin.html/alerts.html's left sidebar) - one shared class instead of repeating this same long declaration on every one of the rail's ~11 icon buttons. Plain CSS, not a Tailwind group-hover utility, since the transform needs its own translateY component (vertical centering) composed with the hover-triggered scale, which utility classes can't express as one property. Pairs with each button's own `group` marker class (Tailwind's, just used here as a plain selector target) and :focus-visible so keyboard users get the same label a mouse hover would. */ .ph-rail-tooltip { /* fixed, not absolute: the rail scrolls when the window is short, and a scrolling box clips anything that sticks out of it sideways (overflow-y: auto also makes overflow-x clip - there is no way to keep one visible). A fixed label is never clipped by it; static/rail.js sets --ph-tip-y (the item's own vertical centre) when the item is hovered or focused. */ position: fixed; left: 3.5rem; top: var(--ph-tip-y, 0px); margin-left: 0.25rem; padding: 0.375rem 0.625rem; border-radius: 0.375rem; background: var(--ph-surface-strong); border: 1px solid var(--ph-border-input); color: var(--ph-text); font-size: 0.875rem; font-weight: 500; white-space: nowrap; opacity: 0; pointer-events: none; transform: translateY(-50%) scale(0.95); transition: opacity 120ms ease, transform 120ms ease; transition-delay: 0ms; z-index: 60; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35); } .group:hover .ph-rail-tooltip, .group:focus-visible .ph-rail-tooltip { opacity: 1; transform: translateY(-50%) scale(1); transition-delay: 300ms; } @media (prefers-reduced-motion: reduce) { .ph-rail-tooltip { transition: opacity 120ms ease; transform: translateY(-50%); } } /* Hides the native up/down spin buttons on a - for a field like Latitude/Longitude where clicking +/-1 one step at a time is never a real workflow (real feedback: the arrows "seemed wrong" there). Firefox honors -moz-appearance: textfield on the input itself; Chrome/Safari need the ::-webkit-*-spin-button pseudo-elements hidden instead - textfield alone does nothing in WebKit. */ .ph-no-spinner { -moz-appearance: textfield; } .ph-no-spinner::-webkit-outer-spin-button, .ph-no-spinner::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* * Mobile edit sheet (map.js's _presentEditor(), templates/_map.html) - * every button/input inside here is raw HTML the map's own right-click * editors already build for a DESKTOP Leaflet popup (small, mouse- * sized: ~24-26px tall buttons, 11-12px text - fine with a cursor, * genuinely too small for a fingertip). Scoped to just this one * container rather than resizing every inline style at its source - * those same strings are still used for the real desktop popup too, * where the original compact sizing is correct and shouldn't change. * !important is deliberate here, not a shortcut - every element inside * has its own inline style (which normally beats a stylesheet rule * outright), and this rule's entire job is overriding exactly that. */ .ph-edit-sheet-content button { min-height: 40px !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px !important; } .ph-edit-sheet-content input, .ph-edit-sheet-content select { min-height: 40px !important; font-size: 16px !important; } .ph-edit-sheet-content [data-ph-ap-option], .ph-edit-sheet-content [data-ph-site-option] { min-height: 40px !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 15px !important; display: flex !important; align-items: center !important; } /* Real report: zooming out fast shows visible blank gaps ("small box * then the whole map") wherever a tile hasn't finished loading yet - * live-compared against a plain google.com/maps tab on the same * network and confirmed it shows the exact same gaps on a fast zoom * (see map.js's own _TILE_KEEP_BUFFER comment) - the fetch itself * isn't something this app can speed up. This IS something it can fix: * Leaflet's own default background for an unloaded tile is a flat * #ddd, which reads as a hole in the map against every basemap this * app actually uses (Google roadmap, OSM, OpenTopoMap - all light, * green/tan/blue-toned). A muted, land-toned fallback here means a * loading gap looks like "the same map, still sharpening up" instead * of "something's broken" - not theme-aware on purpose (this approximates * the BASEMAP's own light tone, unrelated to the app's own dark UI * chrome around it - a dark fallback here would look like a hole too, * just a differently-colored one). Mapbox's dark-v10 style (the one * genuinely dark basemap this app supports) is the one case this * undershoots slightly - a deliberate tradeoff since it's the least-used * provider of the four and its own CDN tiles load quickly regardless. * * !important is deliberate again here (see this file's own comment * above on .ph-edit-sheet-content for the general reasoning) - * leaflet.css's own `.leaflet-container { background: #ddd; }` loads * AFTER this stylesheet in admin.html (base.html's theme.css link vs. * admin.html's own block), so a plain same-specificity rule * here loses the cascade tie and never actually applies. * * isolation: isolate is the real fix for a separate bug - every * Leaflet map's own internal panes/controls carry z-index values up * to 1000 (leaflet.css), and .leaflet-container's plain * `position: relative` (no z-index) does NOT contain those - a * stacking context only forms when z-index is also set, so with it * left at `auto` those high z-indexes compare directly against * unrelated page chrome in the root stacking context, like the * admin mobile nav sheet's own z-50 (admin.html) - real report: on * Customer Diagnostic's radar map, opening that sheet on mobile * showed the map tiles rendering ON TOP of it. isolation: isolate * forces a new stacking context here without needing an explicit * z-index number, containing every one of Leaflet's internal * z-indexes inside the map itself - fixes it for every Leaflet map * on the site (this one, the main Map tab, DFS Center), not just * the one that surfaced it. */ .leaflet-container { background: #d9dfd1 !important; isolation: isolate; } /* A lightning strike that has just been reported flashes where it landed (static/map.js _flashNewStrikes): a flare, a dip, a second flare, then it fades - the flicker of a real stroke. Lives on its own layer, so it shows even when the strike is inside a cluster. */ .ph-strike-flash { pointer-events: none; } .ph-strike-flash span { display: block; width: 88px; height: 88px; border-radius: 9999px; background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 10%, rgba(253,224,71,1) 24%, rgba(253,224,71,.55) 46%, rgba(253,224,71,.18) 64%, rgba(253,224,71,0) 78%); box-shadow: 0 0 22px 8px rgba(253,224,71,.55); animation: ph-strike-flare 1.4s ease-out forwards; } @keyframes ph-strike-flare { 0% { transform: scale(.15); opacity: 0; } 8% { transform: scale(.7); opacity: 1; } 16% { transform: scale(.45); opacity: .55; } 24% { transform: scale(.95); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } /* A grid outage that has just appeared while the layer is being watched (static/map.js _syncGridOutages): two rings spread out from it and the marker bounces. Animated on the pseudo-elements and the inner - never on the marker's own box, which Leaflet positions. */ .ph-grid-outage-marker.ph-outage-pop::before, .ph-grid-outage-marker.ph-outage-pop::after { content: ''; position: absolute; left: 50%; top: 50%; width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px; border-radius: 9999px; border: 3px solid #f97316; pointer-events: none; animation: ph-outage-ring 1.3s ease-out 2; } .ph-grid-outage-marker.ph-outage-pop::after { border-color: #fdba74; animation-delay: .3s; } .ph-grid-outage-marker.ph-outage-pop svg { animation: ph-outage-bounce .5s ease-out 3; } @keyframes ph-outage-ring { 0% { transform: scale(1); opacity: .95; } 100% { transform: scale(5); opacity: 0; } } @keyframes ph-outage-bounce { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.7); } } /* The loading bar along the bottom edge of a "loading..." chip (the Map's grid outages): a segment sweeps across for as long as the chip shows. It is never a percentage - nothing reports how far along the request is. The chip must be positioned (it is absolute). */ /* Not shown at all unless it is still needed after a moment: a quick answer should not flash the message up and away. */ .ph-show-after-delay { animation: ph-show-after-delay .01s linear .4s backwards; } @keyframes ph-show-after-delay { from { opacity: 0; } to { opacity: 1; } } .ph-loading-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; overflow: hidden; background: color-mix(in srgb, var(--ph-accent) 22%, transparent); } .ph-loading-bar::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: var(--ph-accent); border-radius: 9999px; animation: ph-loading-sweep 1.3s ease-in-out infinite; } @keyframes ph-loading-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .ph-loading-bar::after { animation: none; width: 100%; opacity: .55; } .ph-strike-flash span { animation-duration: .01s; } .ph-grid-outage-marker.ph-outage-pop::before, .ph-grid-outage-marker.ph-outage-pop::after, .ph-grid-outage-marker.ph-outage-pop svg { animation-duration: .01s; } } /* ---- The phone menu: a flat line + a bottom sheet (static/phone_sheet.js; templates/admin.html and alerts.html, below lg) ---- The handle is a 200x44 touch target around a 72x6 line, kept ABOVE the phone's own home / app-switch gesture strip (env(safe-area-inset-bottom) + 8px), and touch-action:none so the browser never starts a scroll or pull-to-refresh from a touch that began on it. The layer is always in the page (not x-show) so the sheet can follow a finger while it is still "closed": CSS shows it for [data-open] (settled open) or [data-dragging] (a finger is moving it); the script moves the panel with an inline transform during a drag, and the transitions below take over the moment it is let go. */ .ph-sheet-handle { /* z-index 15: above the page's own content, but BELOW the header's dropdown menus (z-[48], see the z-index scale at the top of templates/_header.html) - at 40 the handle painted over the bottom of an open menu on a phone (the filter menu's last entry, "Pair a TV", could not be tapped) - and far below the sheets and dialogs (z-50). */ position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); transform: translateX(-50%); z-index: 15; width: 200px; height: 44px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .ph-sheet-handle:active { cursor: grabbing; } /* The line is the accent colour with a white edge: it has to read on the dark page AND on the light status cards that scroll underneath it, which a plain grey line (the same grey as a card) does not. */ .ph-sheet-grip-line { display: block; width: 72px; height: 6px; border-radius: 6px; background: var(--ph-accent); opacity: .95; box-shadow: 0 0 0 2px rgba(255, 255, 255, .92), 0 2px 10px rgba(0, 0, 0, .4); transition: width .15s, opacity .15s; } .ph-sheet-handle:hover .ph-sheet-grip-line, .ph-sheet-handle:focus-visible .ph-sheet-grip-line { width: 84px; opacity: 1; } .ph-sheet-handle:focus-visible { outline: none; } .ph-sheet-handle:focus-visible .ph-sheet-grip-line { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ph-accent); } .ph-sheet { position: fixed; inset: 0; z-index: 50; visibility: hidden; pointer-events: none; transition: visibility 0s linear .25s; } .ph-sheet[data-open], .ph-sheet[data-dragging] { visibility: visible; transition: none; } .ph-sheet[data-open] { pointer-events: auto; } /* A drag that started on the (closed) handle must not put a full-screen layer under the finger: that would steal the tap's pointerup. */ .ph-sheet[data-dragging]:not([data-open]) { pointer-events: none; } .ph-sheet-scrim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; transition: opacity .2s ease; } .ph-sheet[data-open] .ph-sheet-scrim { opacity: 1; } .ph-sheet[data-dragging] .ph-sheet-scrim { transition: none; } .ph-sheet-panel { transform: translateY(102%); transition: transform .25s cubic-bezier(.2, .8, .2, 1); overscroll-behavior: contain; touch-action: pan-y; } .ph-sheet[data-open] .ph-sheet-panel { transform: none; } .ph-sheet[data-dragging] .ph-sheet-panel { transition: none; } /* The menu sheet is as tall as its content up to a cap, and the cap is the markup's `max-h-[70dvh]`. With the readability type scale the twelve sections (two columns on a phone: six 44px rows) + the header + Sign Out need ~475px, which a 667px phone's 70% (467px) no longer holds - the list scrolled by a few pixels - and a 568px phone's (398px) by far more. Up to 88% of the screen on any screen that is not a landscape phone (that one keeps its own 92-94% cap, `max-height: 500px` variant), so all twelve sections AND Sign Out show at once on every portrait phone down to 320x568, with no entry smaller than 44px. A taller screen is unaffected: the sheet still ends where its content does. (Two classes, so this beats the one-class Tailwind utility whatever order the CDN injects its stylesheet in; the vh line is the fallback for a browser without dvh.) */ @media (min-height: 501px) { .ph-sheet > .ph-sheet-panel { max-height: 88vh; max-height: 88dvh; } } /* A desktop window narrower than 1024px (cascaded, tiled or snapped windows) used to lose the side menu and get only the phone's thin handle at the bottom. A device with a real pointer (a mouse or trackpad: hover + fine) keeps the side rail from 700px up - its icons are labelled by hover tooltips, which only such a device has. A touch screen keeps the 1024px rule (a tablet cannot hover, so the rail's icons would be unlabelled there - the original reason for the width rule). The classes: .ph-rail the side menu, .ph-rail-shell the row it sits in, .ph-rail-hide the phone's handle + sheet, .ph-rail-main the page's scroll area (it had room reserved at the bottom for the handle). admin.html and alerts.html share them; phone_sheet.js closes an open sheet when this query starts to match. */ /* The side menu has 13 entries (a navigation rail is meant for 3-7; Material Design says to expand it or use a drawer beyond that), which needs about 550px. A laptop browser window is often shorter than that, and the last entries (Settings) were cut off. Two things: (1) it scrolls - the scrollbar hidden, a soft shadow at the top / bottom edge saying there is more that way (plain CSS "scroll shadows": the cover layers are `local`, so they hide the shadow at the very ends); (2) with a mouse it gets more compact on a short window, so most windows need no scrolling at all. Touch screens keep their finger-sized buttons and just scroll. */ nav.ph-rail { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; background-color: var(--ph-surface); background-image: linear-gradient(var(--ph-surface) 30%, transparent), linear-gradient(transparent, var(--ph-surface) 70%), radial-gradient(farthest-side at 50% 0, rgba(0, 0, 0, .3), transparent), radial-gradient(farthest-side at 50% 100%, rgba(0, 0, 0, .3), transparent); background-repeat: no-repeat; background-position: center top, center bottom, center top, center bottom; background-size: 100% 36px, 100% 36px, 100% 12px, 100% 12px; background-attachment: local, local, scroll, scroll; } nav.ph-rail::-webkit-scrollbar { display: none; } @media (max-height: 760px) and (pointer: fine) { nav.ph-rail { gap: 2px; padding-block: .5rem; } nav.ph-rail > :is(a, button) { width: 2.25rem; height: 2.25rem; } } @media (max-height: 520px) and (pointer: fine) { nav.ph-rail { gap: 0; padding-block: .25rem; } nav.ph-rail > :is(a, button) { width: 2rem; height: 2rem; } } /* A touch screen wide enough for the rail (an iPad held sideways): the rail's 40px icons become 44px (the rail itself is 56px wide). */ @media (pointer: coarse) { nav.ph-rail > :is(a, button) { width: 2.75rem; height: 2.75rem; } } @media (min-width: 700px) and (max-width: 1023.98px) and (hover: hover) and (pointer: fine) { nav.ph-rail { display: flex; } div.ph-rail-shell { flex-direction: row; } div.ph-rail-hide { display: none; } main.ph-rail-main { padding-bottom: 1.5rem; } } /* The phone's handle (.ph-sheet-handle: 44px tall, 8px above the screen's bottom edge, in the middle) is drawn over the bottom ~52px of every page's scroll box. The box's padding-bottom lets the LAST content scroll clear of it, but a control that something else scrolls to - a keyboard Tab, an in-page link, scrollIntoView, a test's click - stopped at the box's bottom edge, right under the handle (a full-width button's centre was covered: tests_e2e/ responsive_tools.spec.js, DFS Center's TDWR button at 844x390). scroll-padding keeps such a control above the handle. */ @media (max-width: 1023.98px) { main.ph-rail-main { scroll-padding-bottom: 4.5rem; } } /* A page's scroll box (
) is always as wide as the page area, so its scrollbar sits at the window's right edge; a narrow page caps its CONTENT instead (admin.html's Sites / Hosts / Users / Agents tabs, alerts.html, /customer-diagnostic, both /public pages, the agent's local status page). A capped
(max-w-7xl / -5xl / -4xl / -3xl) put the scrollbar at the edge of a centred column, mid-window on a wide screen - "the Hosts page has its own scroll" (reported again 2026-10-08). The children come out exactly as they were inside the capped
: the old cap minus main's own 1rem padding each side, centred - 7xl 80rem -> 78rem (the default), 5xl 64rem -> 62rem, 4xl 56rem -> 54rem, 3xl 48rem -> 46rem. Every page using these has p-4 on its
; a page with other side padding needs its own numbers. width: 100% matters - in a flex column an auto-margin child would otherwise shrink to its content. A fixed / absolute child (an overlay put straight into
one day) is left alone. tests_e2e/admin_tab_scroll_edge.spec.js measures every page that uses this. */ main.ph-main-capped > :not(.fixed, .absolute) { width: 100%; max-width: 78rem; margin-inline: auto; } main.ph-main-capped.ph-main-cap-5xl > :not(.fixed, .absolute) { max-width: 62rem; } main.ph-main-capped.ph-main-cap-4xl > :not(.fixed, .absolute) { max-width: 54rem; } main.ph-main-capped.ph-main-cap-3xl > :not(.fixed, .absolute) { max-width: 46rem; } /* An Admin tab's modals (Host / Site / User form, Bulk Import, the Hosts confirm) sit inside the tab's space-y-4 stack, and space-y gave each full-screen overlay a 16px margin-top: the dimmed backdrop stopped 16px short of the top of the window (the header showed through, undimmed), every dialog sat 8px low, and a tall one touched the bottom edge of a phone. A fixed overlay never wants that margin. (main + two classes: beats the space-y utility, which is three selectors' worth.) */ main .ph-admin > .fixed.inset-0 { margin-top: 0; } .ph-sheet-grip { background: transparent; border: 0; touch-action: none; } @media (prefers-reduced-motion: reduce) { .ph-sheet, .ph-sheet-panel, .ph-sheet-scrim { transition-duration: .01s; } .ph-sheet-grip-line { transition: none; } } /* ---- Admin > Settings: "Find a setting" (static/settings_ui.js: phSettingsFind) ---- While a search is typed, every card and section is either .ph-find-hit or .ph-find-miss. !important is the point: a card on another Settings tab is display:none from Alpine's x-show (an inline style), and a hit has to show through it; the tab itself is never touched, so clearing the search puts the page back exactly as it was. A hit whose section is collapsed gets opened by the script (and closed again afterwards). */ .ph-settings-finding .ph-settings-cards > .ph-find-hit { display: grid !important; } .ph-settings-finding .ph-settings-cards .ph-find-miss { display: none !important; } .ph-settings-finding [data-settings-tabs] { opacity: .55; } /* ---- Admin > Settings: the tile grid (templates/admin.html: div.ph-settings-cards, templates/_settings_ui.html: settings_tile; docs/SETTINGS_LAYOUT.md) ---- Owner, 2026-11-10: "the grids are not aligned and look very unprofessional - make all the grids line up, use the full screen on a laptop, still work on a phone". ONE layout for every Settings tab: - A 12-track grid. An ordinary tile spans --ph-span tracks: 12 on a phone (one column), 6 from 768px (two), 4 from 1500px (three), 3 from 2300px (four). A tab of four tiles stays 2x2 at three-column widths, and a tab of 2 / 3 / 5 / 6 / 9 tiles does not go to four columns (static/settings_ui.js counts the tiles showing: data-tiles). A row that is not full (the last row of a tab) shares the whole width between its tiles: settings_ui.js marks them data-ph-fill="" - so a tab never ends in a blank hole beside its last tile. - Every tile is TWO grid rows, its head (title + one line) and its body, shared with the tiles beside it (subgrid): the titles, the one-line descriptions and the rule under them run level across a row, and the first sections of neighbouring tiles start on the same line. - A row is ONE height - tops and bottoms line up - and the Save bar that ends a tile sits on the tile's bottom edge, so side-by-side Save bars are level. The one exception (owner, 2026-10-20: "the data collapses but the long box is still there"): while some tile on the tab has a section open, a tile whose sections are ALL closed is only as tall as its own list - closing a section always visibly shrinks its tile. - size='full' on settings_tile (.ph-tile--full) spans the whole width: tables and long forms (Mail server, Backup & Restore, UISP coverage, Users, Public page). Selectors are two or three classes on purpose: they beat Tailwind's one-class utilities whatever order the stylesheets load in. Nothing here is positioned or contained (no container queries: `container-type` would trap the fixed-position "?" help panels and dialogs inside a tile). */ .ph-settings { --ph-set-gap: 1.25rem; --ph-set-pad: 1.25rem; } .ph-settings .ph-settings-cards { --ph-span: 12; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ph-set-gap); align-items: stretch; padding-bottom: 1rem; } @media (min-width: 768px) { .ph-settings .ph-settings-cards { --ph-span: 6; } } @media (min-width: 1500px) { .ph-settings .ph-settings-cards { --ph-span: 4; } .ph-settings .ph-settings-cards[data-tiles="4"] { --ph-span: 6; } } @media (min-width: 2300px) { .ph-settings .ph-settings-cards { --ph-span: 3; } .ph-settings .ph-settings-cards[data-tiles="2"] { --ph-span: 6; } .ph-settings .ph-settings-cards:is([data-tiles="3"], [data-tiles="5"], [data-tiles="6"], [data-tiles="9"]) { --ph-span: 4; } } .ph-settings .ph-settings-cards > * { margin: 0; min-width: 0; grid-column: span var(--ph-span); grid-row: span 2; } .ph-settings .ph-settings-cards > .ph-tile--full, .ph-settings .ph-settings-cards > [data-ph-fill="12"] { grid-column: 1 / -1; } .ph-settings .ph-settings-cards > [data-ph-fill="6"] { grid-column: span 6; } .ph-settings .ph-settings-cards > [data-ph-fill="4"] { grid-column: span 4; } /* The tile: a quiet surface, its head ruled off from its body. The head row is shared across the grid row (subgrid), so the rule is one line. */ .ph-settings .ph-tile { position: relative; display: grid; grid-template-rows: subgrid; row-gap: 0; align-content: start; padding: var(--ph-set-pad); background: var(--ph-surface); border: 1px solid var(--ph-border); border-radius: .75rem; } @supports not (grid-template-rows: subgrid) { .ph-settings .ph-tile { grid-template-rows: auto 1fr; } } .ph-settings .ph-tile-head { padding-bottom: .875rem; border-bottom: 1px solid var(--ph-border); } .ph-settings .ph-tile-title { margin: 0; font-size: 1rem; line-height: 1.375rem; font-weight: 700; letter-spacing: -.005em; color: var(--ph-text); text-wrap: balance; } .ph-settings .ph-tile-sub { margin: .25rem 0 0; max-width: 72ch; font-size: .875rem; line-height: 1.3rem; color: var(--ph-text-muted); text-wrap: pretty; } .ph-settings .ph-tile-body { display: flex; flex-direction: column; gap: .875rem; min-width: 0; padding-top: .875rem; } /* The head's rule already separates the first section: no second rule right under it. */ .ph-settings .ph-tile-body > .ph-sub:first-child { border-top: 0; padding-top: 0; } /* A section's title: sentence case, the size of body text, a step under the tile title. Every header row is at least 2rem, so a row with a "?" and one without are the same height (44px on a touch screen: the coarse-pointer rule further down). */ .ph-settings .ph-sub-title { font-size: .875rem; line-height: 1.3rem; font-weight: 650; color: var(--ph-text-secondary); } @media (min-width: 1024px) { .ph-settings .ph-sub-head { min-height: 2rem; } } /* The Save bar that ends a tile sits on its bottom edge: the tile's last block grows into the row's spare height and its own last Save bar is pushed down (margin-top: auto). Three shapes reach a bar: a one-form tile (its form root: a flex-col or space-y block with the bar as last child), the last section's body, and a wrapper div at the end of that body. */ .ph-settings .ph-tile-body > :last-child { flex: 1 1 auto; } .ph-settings .ph-tile-body > .ph-sub:last-child, .ph-settings .ph-tile-body > .ph-sub:last-child > [id^="ph-sub-"], .ph-settings .ph-tile-body > :last-child:is(.flex-col, [class*="space-y-"]):has(> [data-form-actions]:last-child), .ph-settings .ph-tile-body > .ph-sub:last-child > [id^="ph-sub-"] > div:last-child:has(> [data-form-actions]:last-child) { display: flex; flex-direction: column; flex: 1 1 auto; } .ph-settings .ph-tile-body > :last-child > [data-form-actions]:last-child, .ph-settings .ph-tile-body > .ph-sub:last-child > [id^="ph-sub-"] > [data-form-actions]:last-child, .ph-settings .ph-tile-body > .ph-sub:last-child > [id^="ph-sub-"] > div:last-child > [data-form-actions]:last-child { margin-top: auto; } /* The exception above: something on this tab is open, and this tile's sections are all closed - it hugs its own list. (A hidden tile on another tab does not count: x-show leaves style="display: none;" on it.) */ .ph-settings .ph-settings-cards:has(> :not([style*="display: none"]) .ph-sub-head > button[aria-expanded="true"]) > .ph-tile:has([data-settings-section]):not(:has(.ph-sub-head > button[aria-expanded="true"])) { align-self: start; grid-template-rows: auto auto; } /* Two-up fields inside a tile (Tailwind's grid grid-cols-2): from 640px each "label / box / hint" cell is a 3-row subgrid, so in one row the labels, the boxes and the hints of side-by-side fields share their lines - a label that wraps to two lines no longer pushes its box below its neighbour's. A cell with more than three parts keeps its own flow. Anything else in such a grid (a switch row) spans the three rows, centred on them. */ @media (min-width: 640px) { .ph-settings .ph-tile .grid:is(.grid-cols-2, .sm\:grid-cols-2):not(.ph-keep-grid) > div:has(> label:first-child + *):not(:has(> :nth-child(4))) { display: grid; grid-template-rows: subgrid; grid-row: span 3; row-gap: .25rem; align-content: start; } .ph-settings .ph-tile .grid:is(.grid-cols-2, .sm\:grid-cols-2):not(.ph-keep-grid) > div:has(> label:first-child + *):not(:has(> :nth-child(4))) > label:first-child { align-self: end; margin-bottom: 0; } .ph-settings .ph-tile .grid:is(.grid-cols-2, .sm\:grid-cols-2):not(.ph-keep-grid) > div:has(> label:first-child + *):not(:has(> :nth-child(4))) > :nth-child(2) { align-self: start; } .ph-settings .ph-tile .grid:is(.grid-cols-2, .sm\:grid-cols-2):not(.ph-keep-grid):has(> div > label:first-child + *) > :not(div:has(> label:first-child + *)):not(.col-span-2) { grid-row: span 3; align-self: center; } /* A field cell with more than three parts keeps its own flow but still takes the same three rows, starting at the top, so the cell beside it (a subgrid) keeps its label on the first line instead of being pushed under this one's whole height. */ .ph-settings .ph-tile .grid:is(.grid-cols-2, .sm\:grid-cols-2):not(.ph-keep-grid) > div:has(> label:first-child + *):has(> :nth-child(4)) { grid-row: span 3; align-self: start; } } /* A tablet (768-1023px) shows two tiles side by side, about 370px each, but Tailwind's sm: breakpoint still sees a 768px+ screen: a four-up field grid (sm:grid-cols-4, the customer category defaults) would squeeze four boxes into one narrow tile. Two up there, as on a laptop. */ @media (min-width: 768px) and (max-width: 1023.98px) { .ph-settings .ph-tile .grid.sm\:grid-cols-4:not(.ph-keep-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* A heading inside a section (Tailwind "text-xs font-bold uppercase tracking-wider": RF Defrag Matrix, Network Quality Alerts, All providers ...): sentence case like the section titles above it, one weight lighter and in the muted colour, so it reads as a step down, not as a shout. */ .ph-settings .ph-tile-body .text-xs.font-bold.uppercase.tracking-wider { text-transform: none; letter-spacing: normal; font-weight: 650; color: var(--ph-text-muted); } /* The Public page tab holds ONE tile (a form shown step by step); Users & permissions one tile, no wider than the Users tab it used to be (1280px): a name / email / role table stretched across a 2560px screen is hard to read along a row. */ .ph-settings .ph-settings-cards > [data-settings-tile="users"] { max-width: 80rem; } /* Mail server (templates/_settings_mail_server.html): FIRST on the System tab - a setting people find stressful gets room. A row is the label on the left and the field on the right from lg (like UISP's own Mail Server page), stacked on a phone. */ .ph-settings .ph-settings-cards > [data-settings-tile="mail-server"] { order: -2; } /* Backup & Restore (templates/_settings_backups.html): its UISP-style table needs the room - right under the Mail server. */ .ph-settings .ph-settings-cards > [data-settings-tile="backup-restore"] { order: -1; } /* UISP coverage (templates/_settings_uisp_coverage.html): counts and a list of devices - first on the Integrations tab, right above CRM & UISP Sync. */ .ph-settings .ph-settings-cards > [data-settings-tile="uisp-coverage"] { order: -1; } .ph-settings [data-mail-form] { max-width: 62rem; } .ph-settings .ph-mail-row { display: flex; flex-direction: column; gap: .5rem; } .ph-settings .ph-mail-label { display: flex; align-items: center; gap: .375rem; min-width: 0; } @media (min-width: 1024px) { .ph-settings .ph-mail-row { display: grid; grid-template-columns: 16rem minmax(0, 36rem); column-gap: 2.5rem; align-items: start; } .ph-settings .ph-mail-label { min-height: 2.5rem; } /* the label sits level with the field's first line */ } /* "Advanced": a native disclosure inside a section, closed until opened (settings_advanced). The marker is our own chevron. */ .ph-settings .ph-adv > summary { list-style: none; } .ph-settings .ph-adv > summary::-webkit-details-marker { display: none; } .ph-settings .ph-adv > summary svg { transition: transform .15s; } .ph-settings .ph-adv[open] > summary svg { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .ph-settings .ph-adv > summary svg { transition: none; } } /* ---- Admin > Settings on a phone or tablet (templates/admin.html: div.ph-settings, div.ph-settings-cards) ---- Descendant selectors on purpose: two classes beat Tailwind's one-class utilities whatever order the CDN injects its stylesheet in, so none of this needs !important. Everything sits inside a max-width query - lg (1024px) and up is untouched - or a touch screen: an iPad held sideways is 1024px+ wide (the desktop layout) but is still a thumb, and iOS still zooms into a field under 16px, so `(pointer: coarse)` gets the same control sizes at any width. */ @media (max-width: 1023.98px), (pointer: coarse) { /* 44px is the smallest target a thumb hits reliably; under 16px iOS Safari zooms the whole page in when a field is focused. */ .ph-settings :is(input:not([type="checkbox"], [type="radio"], [type="color"], [type="file"], [type="range"]), select, textarea) { min-height: 44px; font-size: 16px; } /* A toggle row: the whole row is the tap target, not just the 36x20 switch. */ .ph-settings label:has(> button[role="switch"]) { min-height: 44px; } /* Each card's own Save button, and its status message (which used to be cut to "Error: sav..." by truncate + max-w-[70%]). */ .ph-settings .justify-end.border-t > button { min-height: 44px; padding-inline: 1.25rem; } .ph-settings .justify-end.border-t > span.truncate { max-width: none; white-space: normal; text-align: right; flex: 1 1 auto; } } @media (max-width: 639.98px) { /* A forced 2-column grid leaves ~150px per field at 375px, which clips text/select fields (SMTP host, SSL domain, Kubra GUIDs, OID pairs). Grids holding one of those go to a single column; number-only grids stay 2-up, where a short number fits fine. */ .ph-settings .grid.grid-cols-2:has(input:not([type="checkbox"], [type="radio"], [type="number"], [type="color"], [type="range"]), select) { grid-template-columns: minmax(0, 1fr); } .ph-settings .grid.grid-cols-2:has(input:not([type="checkbox"], [type="radio"], [type="number"], [type="color"], [type="range"]), select) > .col-span-2 { grid-column: 1 / -1; } /* Three coloured tiles in a 2-column grid strand one tile on its own row (the Status Card Style preview grid opts out: it is a picture of the phone grid, so it keeps its own columns). */ .ph-settings .grid.grid-cols-2.sm\:grid-cols-3:not(.ph-keep-grid) { grid-template-columns: minmax(0, 1fr); } /* Two number fields side by side: a label that wraps to two lines pushes its input below its neighbour's. Bottom-aligning the cells puts both inputs on one line whatever the labels do. */ .ph-settings .grid.grid-cols-2:has(> div > label.block + input[type="number"]) { align-items: end; } /* Tiles run edge to edge: main's 16px padding plus the tile's own 16px left ~309px of a 375px screen for the fields. */ .ph-settings .ph-settings-cards > * { margin-inline: -1rem; border-radius: 0; border-inline-width: 0; } } /* === resp-misc (responsive day run): global base rules + auth / first-run pages === */ /* Native controls follow the theme: scrollbars,