` (page-designer's `header` / `footer` zones, introduced 3.160.0) offset their own `top` / `bottom` by these values so they pin BELOW the chrome header / ABOVE the chrome bottom-cluster rather than overlapping. Single source of truth for chrome dimensions; revisit when chrome padding / min-height changes. Values match `header`'s `padding: 0.3125rem 1.375rem; min-height: 3rem` (≈ 3.625rem vertical extent) and `.skylace-foot`'s `padding: 0.75rem 2rem` + one line of body text (≈ 2.75rem). Pages with a teleprinter ribbon inside the bottom-cluster (Squad detail) are taller; the variable is the conservative baseline for the common case. */ --page-topnav-height: 3.625rem; --page-bottom-cluster-height: 2.75rem; /* Radii — polished, not playful. */ --r-0: 0; --r-1: 2px; --r-2: 4px; --r-3: 6px; --panel-radius: var(--r-1); /* Root font-size dial — drives the rem scale for every UI surface. 132% (2.162.0+) gives the whole UI a more legible base — every rem-based size inherits the bump. Respects the user's browser font-size for accessibility. Pre-2.162.0 this was 110%; bumped 20% on operator feedback that body text was reading too small against the new walnut+brass chrome density. Dial convention (codified 2.213.0 audit pass): every property that should scale with the dial uses `rem`. That covers font- size, padding, margin, gap, top/right/bottom/left positioning, and width/height on chrome elements that read alongside text (cap-badges, theme-switch knob, user-menu avatar, small icons). `px` is reserved for properties that genuinely shouldn't scale: border widths ≤2px (hairlines), box-shadow geometry, focus-ring widths, container max/min-widths (those participate in viewport breakpoints, not the dial), grid-template min-widths, and SVG attribute widths on decorative pattern fills. Inline-styled chrome in admin-*-views.ts follows the same rule. This ship — every dial value cut by 10% so the whole UI reads denser without per-element retuning. Desktop 132% → 119%; the three mobile breakpoints follow proportionally (108→97, 92→83, 80→72, 75→68). */ font-size: 119%; /* Native form controls + scrollbars render in the dark palette by default. Chrome on a light system theme otherwise renders the focus ring + selection highlight against a black input bg. */ color-scheme: dark; } /* ─── LIGHT THEME · Cabinet Office by daylight ─────────────────── */ :root[data-theme="light"] { --ground-0: #e3d8bd; --ground-1: #ebe2cc; --ground-2: #fbf6e8; --ground-3: #f4eed5; --ground-4: #e8dfc1; --brass: #8b6e1f; --brass-hi: #a48538; --brass-lo: #5e4912; --brass-rim: rgba(139, 110, 31, 0.32); --brass-dim: rgba(139, 110, 31, 0.18); /* Brilliant gold — light theme companion. #ffd700 stays readable on the cream ground; a slightly darker amber would bleed into the brass tones, losing the "this is special" pop. */ --gold-bright: #e8a800; --royal: #3a6786; --royal-dim: rgba(58, 103, 134, 0.22); --cabinet: #234d36; --cabinet-hi: #356f4f; --oxblood: #6a1a26; --oxblood-hi: #8b2536; --vellum: #fbf6e8; --manila: #b88b3a; --paper-ink: #1a1610; --text-1: #1a1610; --text-2: rgba(26, 22, 16, 0.78); --text-3: rgba(26, 22, 16, 0.62); --text-4: rgba(26, 22, 16, 0.42); --hair: rgba(26, 22, 16, 0.12); --hair-2: rgba(26, 22, 16, 0.20); --display: var(--paper-ink); --bg-0: var(--ground-0); --bg-1: var(--ground-2); --bg-2: var(--ground-3); --bg-3: var(--ground-4); --bg-4: var(--ground-3); --line-1: var(--hair); --line-2: var(--hair-2); --line-3: rgba(26, 22, 16, 0.30); --accent: var(--brass); --accent-2: var(--brass-lo); --accent-glow: rgba(139, 110, 31, 0.22); --accent-fg: #1a1208; --panel-group-bg: rgba(139, 110, 31, 0.05); --st-active: var(--cabinet); --st-active-bg: rgba(35, 77, 54, 0.10); --st-running: var(--brass); --st-running-bg: rgba(139, 110, 31, 0.10); --st-deploying: var(--brass); --st-deploying-bg: rgba(139, 110, 31, 0.10); --st-blocked: var(--oxblood); --st-blocked-bg: rgba(106, 26, 38, 0.10); --st-idle: var(--text-3); --st-idle-bg: rgba(26, 22, 16, 0.04); --st-paused: var(--royal); --st-paused-bg: var(--royal-dim); /* See dark-theme block above — deeper oxblood here for legibility against the cream daylight backgrounds. */ --fail: var(--oxblood); color-scheme: light; } /* Alert text colours need saturated mid-shades on light theme — the dark-theme pastels (#86efac etc.) are pastel-on-pastel-tint and unreadable against a light banner bg. */ :root[data-theme="light"] .alert.ok { color: #15803d; } :root[data-theme="light"] .alert.ok-banner { color: #15803d; } :root[data-theme="light"] .alert.info { color: #1d4ed8; } :root[data-theme="light"] .alert.warn { color: #a16207; } :root[data-theme="light"] .alert.bad { color: #b91c1c; } /* Decorative backdrops: dot-grid + binary-bg need black speckles on light, white on dark. */ :root[data-theme="light"] .dot-grid { background-image: radial-gradient(circle at 1px 1px, rgba(26,22,16,0.08) 1px, transparent 1px); } :root[data-theme="light"] .binary-bg { background-image: repeating-linear-gradient(0deg, transparent 0 19px, rgba(26,22,16,0.04) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(26,22,16,0.04) 19px 20px); } /* ─── Browser autofill override ──────────────────────────────────── Chrome paints autofill bg/text with !important on internal pseudo-states. A long inset box-shadow forces our bg; the -webkit-text-fill-color forces our text colour past the override; the 5000s transition outruns Chrome's animation. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, select:-webkit-autofill { -webkit-text-fill-color: var(--text-1); -webkit-box-shadow: 0 0 0 1000px var(--ground-4) inset; caret-color: var(--text-1); transition: background-color 5000s ease-in-out 0s; } /* ─── Reset + body root ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; color: var(--text-1); font-family: var(--font-body); font-size: 0.875rem; line-height: 1.5; -webkit-font-smoothing: antialiased; font-feature-settings: "ss01", "cv11"; /* 2.191.0 — clip any horizontal overflow at the document root. Without this, body's `display: flex` cross-axis stretch makes header + footer extend to whatever the widest descendant ends up being (a long Cinzel title block, a fixed-width vellum sheet, a wide table) — so on a 320–414 px phone where one of those exceeds the viewport, the chrome rows visibly extend past the right edge, looking like they "don't span the page properly." Clipping at root caps every descendant to the viewport's cross axis; the wide element stays in the DOM but can't push the page wider. `overflow-x: clip` (Chrome 90+ / Safari 16+ / Firefox 81+) doesn't create a new block-formatting context, so it doesn't break `position: sticky` the way `overflow-x: hidden` can. */ overflow-x: clip; } /* Page ground carries the walnut-grain motif as a layered gradient — no raster, < 1 KB on the wire. The 0.3s transition makes the day/night toggle feel like the room itself dimming. */ body { min-height: 100vh; /* 2.182.1 — flex-column body + flex:1 main pin the shared `.skylace-foot` to the viewport bottom on short pages (e.g. an empty dashboard) while letting `

` grow naturally with content on long pages. Login surfaces already used this shape locally; promoting it here means every signed-in dashboard surface inherits the same behaviour. */ display: flex; flex-direction: column; background: radial-gradient(ellipse 120% 100% at 30% -10%, rgba(201,165,87,0.06), transparent 60%), radial-gradient(ellipse 100% 80% at 80% 120%, rgba(86,129,170,0.05), transparent 65%), linear-gradient(180deg, var(--ground-2) 0%, var(--ground-1) 100%); background-attachment: fixed; transition: background .3s ease, color .3s ease; } body > main { flex: 1 1 auto; } :root[data-theme="light"] body { background: radial-gradient(ellipse 110% 90% at 30% 0%, rgba(255,255,255,0.6), transparent 65%), radial-gradient(ellipse 100% 80% at 80% 100%, rgba(139,110,31,0.06), transparent 60%), repeating-linear-gradient(91deg, rgba(0,0,0,0.012) 0 1px, transparent 1px 6px), linear-gradient(180deg, var(--ground-1) 0%, var(--ground-0) 100%); } a { color: var(--brass-hi); text-decoration: none; } a:hover { color: var(--brass); text-decoration: underline; } :root[data-theme="light"] a { color: var(--brass); } :root[data-theme="light"] a:hover { color: var(--brass-lo); } code { font-family: var(--font-mono); font-size: 0.92em; background: var(--bg-2); border: 1px solid var(--line-1); padding: 0.0625rem 0.375rem; border-radius: var(--r-1); color: var(--text-1); } pre { background: var(--bg-2); border: 1px solid var(--line-1); color: var(--text-1); padding: 0.625rem 0.75rem; border-radius: var(--r-2); font-family: var(--font-mono); font-size: 0.7813rem; overflow-x: auto; } pre code { background: transparent; border: 0; padding: 0; color: inherit; } /* ─── Decorative motif utilities ───────────────────────────────── */ /* Apply to any surface that wants the walnut-grain warm bias under it (cover panels, masthead). The body already carries this; use the utility only when you need it on a contained element. */ .walnut-grain { background-image: radial-gradient(ellipse 120% 100% at 30% -10%, rgba(201,165,87,0.06), transparent 60%), radial-gradient(ellipse 100% 80% at 80% 120%, rgba(86,129,170,0.05), transparent 65%), linear-gradient(180deg, var(--ground-2) 0%, var(--ground-1) 100%); } :root[data-theme="light"] .walnut-grain { background-image: radial-gradient(ellipse 110% 90% at 30% 0%, rgba(255,255,255,0.6), transparent 65%), radial-gradient(ellipse 100% 80% at 80% 100%, rgba(139,110,31,0.06), transparent 60%), linear-gradient(180deg, var(--ground-2) 0%, var(--ground-3) 100%); } /* Tooled-leather desk surface — for briefing tables / muster-roll backdrops / operational maps. Cabinet-green base + diagonal crosshatch + radial gloss. */ .leather-inlay { background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,0.04), transparent 70%), repeating-linear-gradient(45deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.04) 0 1px, transparent 1px 4px), linear-gradient(135deg, #2a4e3a 0%, #1c3528 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.04), inset 0 0 24px rgba(0,0,0,0.5); border-radius: var(--r-2); } :root[data-theme="light"] .leather-inlay { background-image: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(255,255,255,0.10), transparent 70%), repeating-linear-gradient(45deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px), repeating-linear-gradient(-45deg, rgba(0,0,0,0.05) 0 1px, transparent 1px 4px), linear-gradient(135deg, #506a55 0%, #3a5340 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 0 24px rgba(0,0,0,0.2); } /* Vellum dossier sheet — for high-stakes forms (Login, Commission, Mission objective). Off-white gradient + drop shadow + inset sheen, reads as paper on a desk. The slight tilt is per-instance via `style="transform: rotate(-0.4deg)"`; the class only handles the surface material. */ .vellum { background: linear-gradient(180deg, #ebe2cc 0%, #ddd0b3 100%); color: var(--paper-ink); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 -1px 0 rgba(0,0,0,0.10) inset, 0 8px 24px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.3); border-radius: var(--r-1); } :root[data-theme="light"] .vellum { background: linear-gradient(180deg, #f0e6c8 0%, #e3d6ac 100%); box-shadow: 0 1px 0 rgba(255,255,255,0.7) inset, 0 -1px 0 rgba(0,0,0,0.08) inset, 0 6px 18px rgba(0,0,0,0.10), 0 2px 4px rgba(0,0,0,0.06); } /* OS-map contour underlay — for hero panels (Mission cover, Squad dossier header). Repeats; opacity differs per theme. The svg data-URI ships inline; no extra request. */ .contour-map { position: absolute; inset: 0; background-image: url("data:image/svg+xml;utf8,"); background-repeat: repeat; opacity: 0.5; pointer-events: none; z-index: 0; } :root[data-theme="light"] .contour-map { opacity: 0.18; filter: sepia(0.6); } /* ─── Decorative speckle backdrops (legacy aliases) ──────────── */ .dot-grid { position: absolute; inset: 0; background-image: radial-gradient(circle at 1px 1px, rgba(216,212,203,0.06) 1px, transparent 1px); background-size: 22px 22px; pointer-events: none; z-index: 0; } .binary-bg { position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 19px, rgba(216,212,203,0.020) 19px 20px), repeating-linear-gradient(90deg, transparent 0 19px, rgba(216,212,203,0.020) 19px 20px); pointer-events: none; z-index: 0; } /* ─── Skylace wordmark — Cinzel + brass crest ────────────────── The old "chrome + tint" gradient mark retired in 2.155.0; the wordmark now reads as a Cinzel serif inscription. The icosahedron brass crest sits inline before the text; both are wrapped in a single `.skylace-mark` anchor that's the home-link affordance. */ .skylace-mark { display: inline-flex; align-items: center; /* 3.29 — gap floored at the ≤1024-tier rendered px so the crest-to-wordmark spacing doesn't collapse under the narrower root dial tiers (≤720 / ≤480 / ≤360). Letter-spacing is em-relative so it tracks the floored font-size automatically. */ gap: max(9.7px, 0.625rem); font-family: var(--font-display); font-weight: 600; /* 3.29 — operator-flagged "the Skylace logo at 15.52px is perfect; at 12.45px it looks shit". 15.52px is the ≤1024- tier rendered size (1rem * 97% dial); narrower tiers used to drop the wordmark to 12.45 / 10.8 / 10.2 px via the root dial + the ≤720 explicit `font-size: 0.9375rem` override. `max(15.52px, 1rem)` pins the wordmark at the ≤1024 rendered size as the floor at every narrower viewport, while the default (>1024) tier still renders at 16px (max wins the larger value). Same floor pattern applies to every other header chrome rule below (crest, theme-switch, help-button, user-avatar) so the masthead no longer scales below the "perfect" reading the operator named. */ font-size: max(15.52px, 1rem); letter-spacing: 0.26em; line-height: 1; color: var(--display); text-transform: uppercase; text-decoration: none; white-space: nowrap; transition: color .3s ease; } .skylace-mark:hover { text-decoration: none; color: var(--brass-hi); } :root[data-theme="light"] .skylace-mark:hover { color: var(--brass); } /* The icosahedron brass crest. Used inline in the masthead + anywhere else the Skylace identity appears. Two sizes by class. Sizes in rem so the global font-size dial scales them with the wordmark. */ .skylace-crest { display: inline-block; /* 3.29 — floor at the ≤1024-tier rendered size (29.1px = 1.875rem * 97% dial). See `.skylace-mark` for the rationale. */ width: max(29.1px, 1.875rem); height: max(29.1px, 1.875rem); flex-shrink: 0; vertical-align: middle; } .skylace-crest.lg { width: 4rem; height: 4rem; } /* Legacy `.skylace-mark .layer` was the chrome+tint two-layer. Hide it gracefully if any view still emits it; the wordmark already renders correctly without the layered fallback. */ .skylace-mark .layer { display: none; } /* ─── Shared utility classes ─────────────────────────────────── */ .kbd, .mono { font-family: var(--font-mono); } .uppercase-label { font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); } /* Eyebrow — the design's signature small-caps mono label that leads every section ("OPERATIONAL · LAST 24H"). Wider tracking + dimmer colour than .uppercase-label. */ .eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.625rem/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--text-3); } .eyebrow.brass { color: var(--brass-hi); } :root[data-theme="light"] .eyebrow.brass { color: var(--brass); } .eyebrow::before { content: ""; width: 0.875rem; height: 1px; background: var(--brass-rim); } /* Object-name link variant — used wherever a parent / sibling entity name appears as plain text in chrome (eyebrows, dossier trade-row values, dossier-sheet rows). Inherits the surface's colour + tracking so the visual remains the same at rest; an underline appears on hover/focus so the affordance is discoverable. 3.26.0 generalised from the 2.228.2 `.eyebrow-link` (then eyebrow-only) once the principle was applied across detail-page parent-object names. */ .entity-link { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .15s; } .entity-link:hover, .entity-link:focus-visible { border-bottom-color: currentColor; } /* Display-tier headings — Cinzel chrome. Used for page hero titles, dossier covers, regimental name plates. */ h1.display, h2.display { font-family: var(--font-display); font-weight: 600; letter-spacing: 0.12em; line-height: 1.04; margin: 0; color: var(--display); text-transform: uppercase; } h1.display { font-size: 2.25rem; } h2.display { font-size: 1.625rem; } .muted { color: var(--text-3); } .num { font-variant-numeric: tabular-nums; text-align: right; } /* Serif prose — debrief notes, communiqué body. */ .prose-serif, .serif-italic { font-family: var(--font-serif); font-style: italic; font-size: 1.1em; color: var(--text-2); } /* ─── Panels (raised surfaces / cards) ──────────────────────── Walnut on dark, paper on light. The bevel + brass hairline + lit- from-above sheen is built from box-shadow layers; the brass-rim border is the visible edge. */ .panel { position: relative; background: linear-gradient(180deg, var(--ground-2) 0%, var(--ground-1) 100%); border: 1px solid var(--brass-rim); border-radius: var(--panel-radius); padding: 1.125rem; margin-bottom: 1.125rem; box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px rgba(0,0,0,0.20), 0 1px 0 rgba(255,255,255,0.02); transition: background .3s ease, border-color .3s ease, box-shadow .3s ease; } :root[data-theme="light"] .panel { background: linear-gradient(180deg, var(--ground-2) 0%, var(--ground-3) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.04), 0 6px 14px rgba(0,0,0,0.04); } /* Affirmative / Restricted / Royal panel accents — change the brass rim to cabinet / oxblood / royal for tonally-tagged panels (Comms · ON AIR, Restricted · EYES ONLY etc.). */ .panel.accent-cabinet { border-color: rgba(74,128,96,0.32); } .panel.accent-oxblood { border-color: rgba(165,42,61,0.32); } .panel.accent-royal { border-color: rgba(86,129,170,0.32); } :root[data-theme="light"] .panel.accent-cabinet { border-color: rgba(35,77,54,0.32); } :root[data-theme="light"] .panel.accent-oxblood { border-color: rgba(106,26,38,0.32); } :root[data-theme="light"] .panel.accent-royal { border-color: rgba(58,103,134,0.32); } /* `.is-probing` — transient dim-and-collect state. Applied to any panel / pane while a server-render-driven widget is reattempting a failing upstream read inside the grace-period budget; the element dims, blocks interaction, and shows a `.probing-indicator` pulse so the operator sees motion rather than a contradictory error banner. Removed (via class toggle or innerHTML swap) once the poll resolves to live data, or transitioned to a visible alert if the probe budget elapses. 3.294.0 introduced the hook scoped to `.panel.is-probing`; 3.302.0 dropped the `.panel.` prefix so the second adopter (operator-chat's transcript pane, which dims independently of its outer panel so the composer stays interactive) can reuse the same rule without a parallel CSS hook. */ .is-probing { opacity: 0.55; pointer-events: none; transition: opacity 0.18s ease; } .is-probing .probing-indicator { display: inline-flex; align-items: center; gap: 0.5rem; font: 500 0.6875rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); margin: 0.375rem 0; } .is-probing .probing-indicator::before { content: ""; display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; animation: skylace-pulse-dot 1.6s ease-in-out infinite; } :root[data-theme="light"] .is-probing .probing-indicator::before { animation: none; box-shadow: none; } /* Elevated panel chrome — applied to Squad Info on elevated Squads (Command Squad in HQ Mission today; future Company- altitude Squads inherit). Layers a fuller brass border with a subtle inner glow + gilt-leaf corner ornaments to mark the panel as Company-altitude infrastructure. The base `.panel` styling carries through (gradient, padding, radius); this override thickens the rim, deepens the brass tone, adds a warm shadow, and stamps a `★` rosette in each corner via `::before` / `::after` pseudo-elements on a wrapper. */ .panel--elevated { border: 1.5px solid var(--brass); box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), inset 0 -1px 0 rgba(0,0,0,0.35), inset 0 0 0 1px var(--brass-dim), 0 0 0 1px var(--brass-rim), 0 0 12px var(--brass-rim); background: /* gilt corner rosettes — top-left + top-right + bottom-left + bottom-right */ radial-gradient(circle at 0.5rem 0.5rem, var(--brass-hi) 1px, transparent 2.5px), radial-gradient(circle at calc(100% - 0.5rem) 0.5rem, var(--brass-hi) 1px, transparent 2.5px), radial-gradient(circle at 0.5rem calc(100% - 0.5rem), var(--brass-hi) 1px, transparent 2.5px), radial-gradient(circle at calc(100% - 0.5rem) calc(100% - 0.5rem), var(--brass-hi) 1px, transparent 2.5px), linear-gradient(180deg, var(--ground-2) 0%, var(--ground-1) 100%); background-repeat: no-repeat; } :root[data-theme="light"] .panel--elevated { border-color: var(--brass-lo); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), inset 0 -1px 0 rgba(0,0,0,0.04), inset 0 0 0 1px var(--brass-dim), 0 0 0 1px var(--brass-rim), 0 2px 8px rgba(139,110,31,0.18); background: radial-gradient(circle at 0.5rem 0.5rem, var(--brass) 1px, transparent 2.5px), radial-gradient(circle at calc(100% - 0.5rem) 0.5rem, var(--brass) 1px, transparent 2.5px), radial-gradient(circle at 0.5rem calc(100% - 0.5rem), var(--brass) 1px, transparent 2.5px), radial-gradient(circle at calc(100% - 0.5rem) calc(100% - 0.5rem), var(--brass) 1px, transparent 2.5px), linear-gradient(180deg, var(--ground-2) 0%, var(--ground-3) 100%); background-repeat: no-repeat; } .panel-2 { background: var(--bg-2); border: 1px solid var(--line-1); border-radius: var(--panel-radius); } .panel h2 { margin: 0 0 0.875rem; font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--display); } /* Panel header row (.panel-header): title left, actions pinned top-right. Used by every panel that exposes a `+ X` button. `flex-wrap: wrap` on the row lets the `.actions` cluster drop onto a second line at narrow viewports; without it, the H2's `min-width: auto` default (= content min-width) plus `.actions { flex-shrink: 0 }` combine to push the button cluster off the right edge of the panel on mobile. `min-width: 0` on the heading lets the title flex-shrink to fit alongside actions for as long as both can share a row, then wraps below when the row gives up. */ .panel-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.875rem; } .panel-header h1, .panel-header h2 { margin: 0; min-width: 0; flex: 1 1 auto; } .panel-header .actions { display: inline-flex; flex-wrap: wrap; gap: 0.5rem; flex-shrink: 0; } /* Panel-group: visually clusters a head panel and its sub-panels into one block. Left brass stripe pins the cluster; nested `.panel` children lose their own border + background. This ship — horizontal padding migrated off the group and onto each child panel. The group itself now has zero horizontal padding, so each child fills the full width from the brass left-stripe to the right brass border; children carry the 1.125rem inset themselves so content keeps the same visual breathing room. Two visible effects: 1. In light theme the per-panel cream background (which leaks through the intended `.panel-group > .panel { background: transparent }` rule because `:root[data-theme="light"] .panel`'s 0,2,1 specificity beats the override's 0,2,0) now extends edge-to-edge instead of floating with a gap. 2. The hairline separators between sibling panels now run brass-to-brass rather than stopping short of the group's side borders. */ .panel-group { border: 1px solid var(--hair-2); border-left: 3px solid var(--brass); background: var(--panel-group-bg); border-radius: var(--panel-radius); padding: 0.25rem 0; margin-bottom: 1.125rem; } .panel-group > .panel { background: transparent; border: none; border-radius: 0; padding: 0.875rem 1.125rem; margin: 0; border-bottom: 1px solid var(--hair); box-shadow: none; } .panel-group > .panel:last-child { border-bottom: none; } .panel-group > .panel h3 { margin: 0 0 0.75rem; font-size: 0.875rem; font-weight: 600; color: var(--display); letter-spacing: 0.04em; text-transform: uppercase; } /* ─── Buttons — engraved brass ──────────────────────────────── The button family reads as machined brass on walnut: gradient fill + inset highlight/shadow + textShadow. Four kinds: - .primary — engraved brass, the default action. - .ghost — transparent + brass rim, for Cancel. - .danger — oxblood gradient, destructive. - (default) — quiet, transparent + hair border. Sizes via .sm / .lg modifiers. */ button, .button-link { --btn-bg: transparent; --btn-fg: var(--text-1); --btn-bd: var(--hair); display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.125rem; padding: 0 0.875rem; border-radius: var(--r-1); border: 1px solid var(--btn-bd); background: var(--btn-bg); color: var(--btn-fg); font: 600 0.75rem/1 var(--font-body); letter-spacing: 0.10em; text-transform: uppercase; cursor: pointer; transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.06s, filter 0.15s; white-space: nowrap; user-select: none; text-decoration: none; } button:hover, .button-link:hover { border-color: var(--brass-rim); color: var(--display); text-decoration: none; } button:active, .button-link:active { transform: translateY(0.5px); } button:focus-visible, .button-link:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } button:disabled, .button-link[aria-disabled="true"] { opacity: 0.40; cursor: not-allowed; } /* Engraved-brass primary. */ button.primary, .button-link.primary { --btn-fg: #1a1208; --btn-bd: var(--brass); background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 55%, var(--brass-lo) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.25); } button.primary:hover, .button-link.primary:hover { filter: brightness(1.08); color: #1a1208; } button.primary:active, .button-link.primary:active { filter: brightness(0.92); transform: translateY(1px); } /* Light-mode brass tokens are darker (#a48538 → #8b6e1f → #5e4912) than dark-mode brass (#e3c887 → #c9a557 → #8b7236), and the engraved-medallion primary depends on a bright gradient under dark text for the engraved-into-metal effect. 3.40.2 first tried inverting to cream text on dark brass; contrast crashed at the gradient top (cream on #a48538 ≈ 3:1) and the base hover rule's filter: brightness(1.08) lifted the top further, masking the problem on hover only. Reusing the dark-mode brass gradient for the medallion in light mode too (the brass is the same metal regardless of page background) keeps the dark-text-on-bright- brass contrast the engraving was tuned for. */ :root[data-theme="light"] button.primary, :root[data-theme="light"] .button-link.primary { --btn-bd: #c9a557; background: linear-gradient(180deg, #e3c887 0%, #c9a557 55%, #8b7236 100%); } /* Ghost — outlined Cancel. */ button.ghost, .button-link.ghost { --btn-bg: transparent; --btn-bd: var(--brass-rim); color: var(--text-1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.03); } button.ghost:hover, .button-link.ghost:hover { border-color: var(--brass); color: var(--display); background: transparent; } /* Danger — oxblood. */ button.danger, .button-link.danger { --btn-fg: var(--vellum); --btn-bd: var(--oxblood); background: linear-gradient(180deg, var(--oxblood-hi) 0%, var(--oxblood) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.45); text-shadow: 0 1px 0 rgba(0,0,0,0.4); } button.danger:hover, .button-link.danger:hover { filter: brightness(1.10); color: var(--vellum); } button.sm, .button-link.sm { height: 1.75rem; padding: 0 0.625rem; font-size: 0.6875rem; } button.lg, .button-link.lg { height: 2.75rem; padding: 0 1.375rem; font-size: 0.8125rem; } /* ─── Inputs — dossier entry fields ────────────────────────── Recessed well bg, hair border, no visible outline. Focus state raises the brass rim. */ input[type=text], input[type=email], input[type=password], input[type=url], input[type=number], input[type=search], select, textarea { display: block; width: 100%; height: 2.25rem; padding: 0 0.75rem; background: var(--ground-4); border: 1px solid var(--hair); border-radius: var(--r-1); color: var(--text-1); font: 400 0.875rem/1.4 var(--font-body); outline: none; transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; box-shadow: inset 0 1px 1px rgba(0,0,0,0.30); } :root[data-theme="light"] input[type=text], :root[data-theme="light"] input[type=email], :root[data-theme="light"] input[type=password], :root[data-theme="light"] input[type=url], :root[data-theme="light"] input[type=number], :root[data-theme="light"] input[type=search], :root[data-theme="light"] select, :root[data-theme="light"] textarea { box-shadow: inset 0 1px 1px rgba(0,0,0,0.06); } input::placeholder, textarea::placeholder { color: var(--text-4); font-style: italic; font-size: 1.1em; } input:hover, select:hover, textarea:hover { border-color: var(--brass-rim); } input:focus, select:focus, textarea:focus { border-color: var(--brass); box-shadow: inset 0 1px 1px rgba(0,0,0,0.30), 0 0 0 3px var(--brass-dim); background: var(--ground-3); } :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus { box-shadow: inset 0 1px 1px rgba(0,0,0,0.06), 0 0 0 3px var(--brass-dim); background: var(--ground-2); } textarea { height: auto; padding: 0.625rem 0.75rem; resize: vertical; min-height: 5rem; } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 0.625rem center; padding-right: 1.875rem; } select option { background: var(--ground-2); color: var(--text-1); } label { display: block; font-size: 0.8125rem; color: var(--text-2); } .field-label { display: block; font: 500 0.625rem/1 var(--font-mono); letter-spacing: 0.20em; text-transform: uppercase; color: var(--text-3); margin-bottom: 0.375rem; } /* Italic-serif text sizes bumped in 2.171.0: the previous 0.75rem tier read too small against the 2.162.0 font-size-dial bump (132%), so .field-hint / .hint / .form-help / etc. all stepped up one notch. See WEBSITE_STYLE_GUIDE §"Typography — italic-serif tier" for the full table. */ .field-hint, .hint { font-family: var(--font-serif); font-style: italic; font-size: 0.9625rem; color: var(--text-3); margin-top: 0.375rem; } /* 2.178.0 — field-error rebalanced for prominence. The pre-2.178 styling (0.7188rem, plain colour, no glyph) read as a quiet footnote against the help-text below it; operators missed it. Now: weighty body-size text, a warning glyph, a tinted background panel with a left-rail in oxblood, and the corresponding input picks up a red border via `.has-error input` further down. */ .field-error, .field-err { display: flex; align-items: flex-start; gap: 0.5rem; margin-top: 0.5rem; padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 600; line-height: 1.35; color: var(--oxblood-hi); background: var(--st-blocked-bg, rgba(165,42,61,0.10)); border: 1px solid rgba(165,42,61,0.32); border-left: 3px solid var(--oxblood-hi); border-radius: var(--r-1, 6px); } .field-error-glyph { flex: 0 0 auto; font-size: 1rem; line-height: 1; margin-top: 1px; } .field-error-text { flex: 1 1 auto; } :root[data-theme="light"] .field-error, :root[data-theme="light"] .field-err { color: var(--oxblood); background: rgba(165,42,61,0.06); border-color: rgba(165,42,61,0.40); border-left-color: var(--oxblood); } /* Mark the input inside a label that paired with a field-error (`has-error` is stamped by the admin-form-fields renderers). */ .has-error input, .has-error textarea, .has-error select { border-color: var(--oxblood-hi); box-shadow: 0 0 0 1px var(--oxblood-hi) inset; } :root[data-theme="light"] .has-error input, :root[data-theme="light"] .has-error textarea, :root[data-theme="light"] .has-error select { border-color: var(--oxblood); box-shadow: 0 0 0 1px var(--oxblood) inset; } .form-help { font-family: var(--font-serif); font-style: italic; font-size: 1.0625rem; color: var(--text-3); margin: 0.25rem 0 0; } /* 2.178.0 — `Couldn't save` banner upgrade. Same colour vocab as `.alert.bad` but with the warning glyph, bolder copy, and a tad more padding so it stops being mistaken for an info line. */ .form-error-banner { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.875rem 1rem; margin: 0 0 1.125rem; font-size: 0.9375rem; line-height: 1.4; } .form-error-banner-glyph { flex: 0 0 auto; font-size: 1.25rem; line-height: 1; margin-top: 0.125rem; } .form-error-banner-body { flex: 1 1 auto; } .form-error-banner-body strong { font-weight: 700; letter-spacing: 0.01em; } /* ─── 3.X — Top-of-form error banner + toast container ─────── Massive top-of-page banner rendered ABOVE the form's H2 on a validation-fail re-render. Replaces the pre-3.X pattern where Edit forms passed a single inline `editError` rendered next to the field that caused it — operators routinely missed that styling (witness: the 3.235.0 reserved-callsign reject the operator only spotted by squinting at small text). The toast is the peripheral-vision nudge that pairs with it; both fire together on every validation-fail re-render. */ .form-feedback-banner { display: flex; align-items: flex-start; gap: 0.875rem; padding: 1.25rem 1.375rem; margin: 0 0 1.5rem; font-size: 1.0625rem; line-height: 1.45; border-radius: var(--r-2, 8px); border: 2px solid; border-left-width: 6px; } /* Night-mode text colour matches the sibling .alert.bad convention (further down this file) — bright red tint over the dark walnut ground. The pre-fix `--oxblood-hi` (#a52a3d, dark red) on `--ground-0` (#080a10, near-black) cleared ~3.5:1 contrast, below WCAG AA for normal text. The accent (border + glyph) stays oxblood-hi so the brand colour is preserved on the chrome; only the readable body text shifts to the bright tint. */ .form-feedback-banner--error { color: #fca5a5; background: rgba(165, 42, 61, 0.12); border-color: var(--oxblood-hi); } .form-feedback-banner--error .form-feedback-banner-glyph { color: var(--oxblood-hi); } :root[data-theme="light"] .form-feedback-banner--error { color: var(--oxblood); background: rgba(165, 42, 61, 0.08); border-color: var(--oxblood); } :root[data-theme="light"] .form-feedback-banner--error .form-feedback-banner-glyph { color: var(--oxblood); } .form-feedback-banner-glyph { flex: 0 0 auto; font-size: 1.75rem; line-height: 1; margin-top: 0.125rem; } .form-feedback-banner-body { flex: 1 1 auto; min-width: 0; } .form-feedback-banner-title { display: block; font-weight: 700; font-size: 1.1875rem; letter-spacing: 0.01em; margin-bottom: 0.25rem; } .form-feedback-banner-msg { margin: 0.25rem 0 0; font-weight: 500; } .form-feedback-banner-fields { margin: 0.5rem 0 0; padding-left: 1.25rem; font-size: 0.95rem; font-weight: 500; } .form-feedback-banner-fields li { margin-top: 0.25rem; } /* Toast container — fixed top-center of the viewport. Stacks newer toasts on top (column-reverse on a top-anchored stack puts the most-recent append at the topmost visual position), so the operator sees the most-recent action first. `pointer-events: none` on the container lets clicks through the empty space below the stack while each toast itself re-enables them for the dismiss button. */ .skylace-toast-container { position: fixed; top: 1.25rem; left: 50%; transform: translateX(-50%); z-index: 9999; display: flex; flex-direction: column-reverse; gap: 0.625rem; width: min(28rem, calc(100vw - 2rem)); pointer-events: none; } .skylace-toast { position: relative; display: flex; align-items: flex-start; gap: 0.625rem; padding: 0.875rem 2.5rem 0.875rem 1rem; border-radius: var(--r-2, 8px); font-size: 0.9625rem; line-height: 1.4; font-weight: 500; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.32), 0 2px 6px rgba(0, 0, 0, 0.2); border: 1px solid; border-left-width: 4px; pointer-events: auto; animation: skylace-toast-in 0.18s ease-out; } .skylace-toast--dismissing { animation: skylace-toast-out 0.22s ease-in forwards; } .skylace-toast--success { color: #e6f4e0; background: #2f5d2f; border-color: #5a8c5a; } :root[data-theme="light"] .skylace-toast--success { color: #1d3e1d; background: #e9f5e3; border-color: #3a7c3a; } .skylace-toast--failure { color: #fff1f2; background: var(--oxblood-hi); border-color: #e2536a; } :root[data-theme="light"] .skylace-toast--failure { color: #fff; background: var(--oxblood); border-color: var(--oxblood-hi); } .skylace-toast-title { font-weight: 700; letter-spacing: 0.01em; margin-right: 0.25rem; } .skylace-toast-message { flex: 1 1 auto; min-width: 0; } .skylace-toast-close { position: absolute; top: 0.375rem; right: 0.5rem; background: transparent; border: 0; color: inherit; font-size: 1.25rem; line-height: 1; padding: 0.25rem 0.375rem; cursor: pointer; opacity: 0.75; } .skylace-toast-close:hover { opacity: 1; } @keyframes skylace-toast-in { from { transform: translateY(-8px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes skylace-toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(16px); opacity: 0; } } /* ─── Form actions row ──────────────────────────────────────── */ .form-actions { display: flex; gap: 0.625rem; justify-content: flex-end; border-top: 1px solid var(--hair); padding-top: 0.875rem; margin-top: 1.125rem; } /* ─── Status pills (canonical) ──────────────────────────────── The design's "standing pills" (Active duty / Standing by / On comms / Detained / Withdrawn / Deploying) plus the legacy is-* aliases used by existing views. */ .pill { display: inline-flex; align-items: center; gap: 0.375rem; font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; padding: 0.1875rem 0.625rem; border-radius: var(--r-1); border: 1px solid currentColor; white-space: nowrap; font-weight: 500; } .pill .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; box-shadow: 0 0 6px currentColor; } .pill.is-active { color: var(--st-active); background: var(--st-active-bg); } .pill.is-running { color: var(--st-running); background: var(--st-running-bg); } .pill.is-deploying{ color: var(--st-deploying); background: var(--st-deploying-bg); } .pill.is-blocked { color: var(--st-blocked); background: var(--st-blocked-bg); } .pill.is-idle { color: var(--st-idle); background: var(--st-idle-bg); } .pill.is-paused { color: var(--st-paused); background: var(--st-paused-bg); } /* Legacy admin pill aliases — bridged to status colours. */ .pill.ok { color: var(--st-active); background: var(--st-active-bg); border-color: var(--st-active); } .pill.warn { color: var(--st-deploying); background: var(--st-deploying-bg); border-color: var(--st-deploying); } .pill.bad { color: var(--st-blocked); background: var(--st-blocked-bg); border-color: var(--st-blocked); } .pill.role-super-admin { color: var(--brass-hi); background: rgba(227,200,135,0.10); border-color: var(--brass); } .pill.role-company-admin { color: var(--royal); background: var(--royal-dim); border-color: var(--royal); } .pill.role-user { color: var(--text-2); background: var(--bg-3); border-color: var(--hair-2); } :root[data-theme="light"] .pill.role-super-admin { color: var(--brass-lo); background: rgba(139,110,31,0.10); border-color: var(--brass); } /* Pulse on dots for the "live" states. Dark theme only; the design reserves animation for the lit-room feel. */ @keyframes skylace-pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; } 50% { box-shadow: 0 0 0 3px transparent; opacity: 0.6; } } .pill.is-active .dot, .pill.is-running .dot, .pill.is-deploying .dot { animation: skylace-pulse-dot 1.6s ease-in-out infinite; } :root[data-theme="light"] .pill .dot { animation: none; box-shadow: none; } /* ─── Standing pill — the design's explicit "operative readiness" token. Used on operative cards (Squad detail's muster roll) and the Joe dossier cover. */ .standing-pill { display: inline-flex; align-items: center; gap: 0.375rem; font: 500 0.625rem/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; padding: 0.3125rem 0.5625rem 0.3125rem 0.5rem; border-radius: var(--r-1); border: 1px solid currentColor; white-space: nowrap; } .standing-pill .dot { width: 0.375rem; height: 0.375rem; border-radius: 50%; background: currentColor; } .standing-pill.active { color: var(--cabinet-hi); background: rgba(74,128,96,0.14); } .standing-pill.oncomms { color: var(--brass-hi); background: rgba(201,165,87,0.10); } .standing-pill.standby { color: var(--text-2); background: rgba(216,212,203,0.06); } .standing-pill.detained { color: var(--oxblood-hi); background: rgba(165,42,61,0.14); } .standing-pill.withdrawn{ color: var(--text-4); background: rgba(0,0,0,0.18); } .standing-pill.deploying{ color: var(--royal); background: rgba(86,129,170,0.18); } :root[data-theme="light"] .standing-pill.active { color: var(--cabinet); background: rgba(35,77,54,0.10); } :root[data-theme="light"] .standing-pill.oncomms { color: var(--brass); background: rgba(139,110,31,0.10); } :root[data-theme="light"] .standing-pill.detained { color: var(--oxblood); background: rgba(106,26,38,0.10); } :root[data-theme="light"] .standing-pill.withdrawn{ color: var(--text-4); background: rgba(0,0,0,0.05); } :root[data-theme="light"] .standing-pill.deploying{ color: var(--royal); background: rgba(58,103,134,0.12); } .standing-pill.active .dot, .standing-pill.oncomms .dot { box-shadow: 0 0 6px currentColor; animation: skylace-pulse-dot 1.8s steps(1, end) infinite; } :root[data-theme="light"] .standing-pill .dot { animation: none; box-shadow: none; } /* ─── Nameplate — engraved brass label ──────────────────────── For callsign engraving on operative cards, dossier covers, badge inscriptions. Three sizes. */ .nameplate { display: inline-block; background: linear-gradient(180deg, var(--brass-hi) 0%, var(--brass) 50%, var(--brass-lo) 100%); color: #1a1208; font-family: var(--font-display); font-weight: 600; font-size: 0.6875rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.375rem 0.75rem; border-radius: var(--r-1); box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.45), 0 1px 0 rgba(0,0,0,0.4); text-shadow: 0 1px 0 rgba(255,255,255,0.25); white-space: nowrap; line-height: 1; } .nameplate.sm { font-size: 0.59375rem; letter-spacing: 0.14em; padding: 0.25rem 0.5rem; } .nameplate.lg { font-size: 0.8125rem; letter-spacing: 0.22em; padding: 0.5rem 0.875rem; } /* Day-mode pins the gradient to the dark-palette brass tones — the day-theme `--brass*` tokens are calibrated as accent colours against the cream paper bg, so they darken to deep olive-brown. The nameplate is the brass surface itself, not an accent on it, so dark text on day-theme brass renders nearly invisible. Polished brass should look polished in either room lighting. Re-stating `color` here is load-bearing for `` (muster-roll callsign chip): the day-mode link rule `:root[data-theme="light"] a { color: var(--brass); }` further up has specificity (0,0,2,1), which beats `.nameplate`'s bare (0,0,1,0) and was repainting the engraving in brass mid-tone. Pinning color inside this scoped block raises specificity to (0,0,3,0) so the dark engraving wins on anchors too. */ :root[data-theme="light"] .nameplate { background: linear-gradient(180deg, #e3c887 0%, #c9a557 50%, #8b7236 100%); color: #1a1208; } /* ─── Stamp — red-ink diagonal stamp ────────────────────────── Decorative tag for RESTRICTED / EYES ONLY / TOP SECRET / ACKNOWLEDGED. Apply `style="transform: rotate(-8deg)"` for the skewed-stamped look (varies per instance). */ .stamp { display: inline-block; font: 700 0.75rem/1 var(--font-display); letter-spacing: 0.22em; text-transform: uppercase; color: var(--oxblood-hi); padding: 0.375rem 0.75rem; border: 2px solid var(--oxblood-hi); box-shadow: inset 0 0 0 1px var(--oxblood-hi); filter: contrast(1.1); opacity: 0.92; transform: rotate(-8deg); white-space: nowrap; } .stamp.cabinet { color: var(--cabinet-hi); border-color: var(--cabinet-hi); box-shadow: inset 0 0 0 1px var(--cabinet-hi); } .stamp.brass { color: var(--brass-hi); border-color: var(--brass-hi); box-shadow: inset 0 0 0 1px var(--brass-hi); } :root[data-theme="light"] .stamp { color: var(--oxblood); border-color: var(--oxblood); box-shadow: inset 0 0 0 1px var(--oxblood); opacity: 0.85; } :root[data-theme="light"] .stamp.cabinet { color: var(--cabinet); border-color: var(--cabinet); box-shadow: inset 0 0 0 1px var(--cabinet); } :root[data-theme="light"] .stamp.brass { color: var(--brass); border-color: var(--brass); box-shadow: inset 0 0 0 1px var(--brass); } /* ─── Cap-badge — brass roundel ─────────────────────────────── Used for directive insignia on operative cards + Squad dossier covers. Outer brass ring + inner dark well + glyph slot. The inner content slot (an SVG glyph or text) sits in `.cap-badge-inner`. */ .cap-badge { display: inline-flex; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: radial-gradient(circle at 30% 30%, var(--brass-hi) 0%, var(--brass) 35%, var(--brass-lo) 100%); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.15), inset 0 -2px 4px rgba(0,0,0,0.45), inset 0 2px 2px rgba(255,255,255,0.25), 0 1px 2px rgba(0,0,0,0.6); align-items: center; justify-content: center; flex-shrink: 0; } .cap-badge.lg { width: 4.25rem; height: 4.25rem; } .cap-badge.sm { width: 2.25rem; height: 2.25rem; } .cap-badge-inner { width: calc(100% - 0.5rem); height: calc(100% - 0.5rem); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #2a2114 0%, #0c0906 100%); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.6), inset 0 1px 1px rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: center; color: var(--brass-hi); font-family: var(--font-display); font-size: 0.875rem; letter-spacing: 0.04em; } /* User-dossier cap-badge variant (3.X.0+). The operator-uploaded avatar `` had no sizing rules — natural resolution + top-left default origin meant tall portraits hung out the bottom of the badge. Constrain to fill the inner dark-well + cover-crop + clip to the circle so the avatar always reads as a centered round portrait. The initials roundel fallback inherits flex-centering from .cap-badge-inner; this rule just bumps the type up so initials fill the larger .cap-badge.lg slot the User cover uses. */ .user-cover-badge-inner { overflow: hidden; } .user-cover-badge-inner > img { width: 100%; height: 100%; object-fit: cover; object-position: center; border-radius: 50%; display: block; } .user-cover-initials { font-family: var(--font-display); font-size: 1.375rem; letter-spacing: 0.04em; color: var(--brass-hi); } /* ─── Insignia staged-choice editor (2.230.0) ────────────────── Every entity (Company / Mission / Squad / Joe) /edit surface uses a staged-choice pattern: the current insignia renders inline in the entity's info panel via `.insignia-edit` (stage + Change button + hidden `insignia` form field), and the Change button opens a modal `

…

` — the wrapper establishes the scroll container, while the inner table keeps its native `display: table` so the column algorithm works normally. Operator-confirmed via the debug-page probe (3.62.x stages 6→7) that `.jobs`'s `display: block; overflow-x: auto` alone doesn't reliably scroll on Brave Android — the block-level table can't function as a scroll container the way a plain `