/* ==========================================================================
Draco Staff Development — v8 Components
Reusable UI kit. Depends on tokens.css + base.css.
========================================================================== */
/* ------------------------------- Wordmark ------------------------------- */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; }
.brand__logo { width: 44px; height: 44px; flex: none; object-fit: contain; }
.brand__text { display: flex; flex-direction: column; line-height: 1; white-space: nowrap; }
.brand__name {
font-family: var(--font-brand);
font-weight: var(--fw-extra);
font-size: 1.32rem;
letter-spacing: var(--tracking-brand);
}
.brand__tag {
font-size: 0.72rem;
font-weight: var(--fw-semibold);
letter-spacing: 0.03em;
margin-top: 4px;
text-transform: none;
opacity: 0.92;
}
.brand--light .brand__name { color: #fff; }
.brand--light .brand__tag { color: var(--brand-tag-user, var(--accent)); }
.brand--dark .brand__name { color: var(--brand-navy); }
.brand--dark .brand__tag { color: var(--brand-tag-user, var(--link)); } /* AA on light surfaces (7.2:1) */
/* Theme-aware "dark" variant: swap logo + text when the surface flips dark */
.brand--dark .brand__logo--ondark { display: none; }
:root[data-theme="dark"] .brand--dark .brand__logo--onlight { display: none; }
:root[data-theme="dark"] .brand--dark .brand__logo--ondark { display: block; }
:root[data-theme="dark"] .brand--dark .brand__name { color: var(--text); }
:root[data-theme="dark"] .brand--dark .brand__tag { color: var(--brand-tag-user, var(--accent)); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .brand--dark .brand__logo--onlight { display: none; }
:root:not([data-theme="light"]) .brand--dark .brand__logo--ondark { display: block; }
:root:not([data-theme="light"]) .brand--dark .brand__name { color: var(--text); }
:root:not([data-theme="light"]) .brand--dark .brand__tag { color: var(--brand-tag-user, var(--accent)); }
}
.brand--sm .brand__logo { width: 36px; height: 36px; }
.brand--sm .brand__name { font-size: 1.1rem; }
.brand--sm .brand__tag { font-size: 0.66rem; }
.brand--lg .brand__logo { width: 60px; height: 60px; }
.brand--lg .brand__name { font-size: 1.8rem; }
.brand--lg .brand__tag { font-size: 0.9rem; }
a.brand:hover { opacity: 0.94; }
/* ------------------------------- Buttons -------------------------------- */
/* Every button: a two-color gradient background, a subtle border + drop
shadow, a smooth hover color change (a second gradient fades in via ::before),
a high-contrast label/icon, and NO position or size change on interaction.
Anchors styled as buttons never underline. */
.btn {
--btn-from: #2a4c74;
--btn-to: #183253;
--btn-from-h: #315986;
--btn-to-h: #1f3d63;
--btn-fg: #ffffff;
--btn-bd: rgba(8, 18, 33, 0.32);
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0.7rem 1.25rem;
min-height: 44px; /* touch target */
font-size: var(--fs-base);
font-weight: var(--fw-semibold);
line-height: 1;
letter-spacing: 0.005em;
color: var(--btn-fg);
background-image: linear-gradient(180deg, var(--btn-from), var(--btn-to));
border: 1px solid var(--btn-bd);
/* BUTTONS HAVE A RADIUS FLOOR of 6px, independent of the shape style's --radius-md.
Gothic sets 2px and Corporate 4px, and at those values a button you are meant to press reads as
a hard-cornered block (owner, 2026-07-21). The floor softens the BUTTON without softening the
panels and tables around it — the sharp panel edge is the point of both styles, so it stays.
max() rather than per-style overrides so any style added later inherits the floor instead of
re-introducing the problem; --btn-radius remains as a deliberate escape hatch. Styles already
above the floor (default 10px, soft 16px) are untouched. */
border-radius: var(--btn-radius, max(var(--radius-md), 6px));
box-shadow: var(--shadow-sm), inset 0 1px 0 rgba(255, 255, 255, 0.16);
text-decoration: none;
white-space: nowrap;
user-select: none;
transition: box-shadow var(--transition), border-color var(--transition), color var(--transition);
}
.btn::before { /* hover gradient — fades in for a smooth color change */
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
background-image: linear-gradient(180deg, var(--btn-from-h), var(--btn-to-h));
opacity: 0;
transition: opacity var(--transition);
z-index: -1;
}
.btn:hover::before { opacity: 1; }
.btn:hover { color: var(--btn-fg); box-shadow: var(--shadow-md), inset 0 1px 0 rgba(255, 255, 255, 0.18); }
.btn:active { box-shadow: var(--shadow-xs); }
.btn:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-sm); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn:disabled::before, .btn[aria-disabled="true"]::before { display: none; }
.btn:hover { text-decoration: none; }
/* PRIMARY FOLLOWS THE PALETTE, and until 8.220.1 it did not.
themes.css carried `.btn--primary { --btn-from: var(--brand-navy-700); … }` — the rule that is
supposed to re-tint the primary button for each of the 23 palettes. It never applied: themes.css
loads BEFORE components.css and the two selectors have identical specificity, so this rule won
every time and every palette rendered the same hardcoded navy. Choosing Mono, Noir, Forest or
Plum restyled the whole chrome and left the buttons blue — which is exactly why they read as
not belonging to the page.
The literals below were #2a4c74 / #183253, within a couple of points of the default palette's
--brand-navy-700 / -800, so the DEFAULT look is unchanged; every other palette is fixed.
tools/check-btn-adjacency.py already modelled primary as palette-driven, so its numbers were
describing a page the browser never painted. That model is now true.
Hover LIGHTENS via color-mix rather than naming a ramp step: --brand-navy is DARKER than -700 in
every palette, so the obvious `--btn-from-h: var(--brand-navy)` would darken on hover. */
.btn--primary {
--btn-from: var(--brand-navy-700);
--btn-to: var(--brand-navy-800);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 86%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 86%, #ffffff);
--btn-fg: #fff;
--btn-bd: rgba(8,18,33,.34);
}
/* DARK MODE: primary = the palette's RAW navy, NOT the old blanket white-lift (8.344.0).
The lift existed for the near-black **noir** palette, where navy IS the page colour — but as a
BLANKET dark rule it pushed primary UP into the lifted neutral ramp (--btn-ghost / --btn-quiet) on the
bluer palettes (slate, midnight, graphite, mono, paper, corporate…), collapsing the app-wide
"Cancel | Save" footer to ΔE00 ≈ 2 in dark. Raw navy stays dark and saturated, so it clears
ΔE00 ≥ 10 against the neutrals on EVERY palette (worst 10.6 @ paper), verified by
tools/check-btn-adjacency.py. A light hairline keeps it defined on dark surfaces; the hover lifts a
little toward white for feedback. Noir re-lifts below — it is the ONLY palette that needs it, and the
bluer palettes must NOT get it or they reconverge with the neutrals (that was the whole bug). */
:root[data-theme="dark"] .btn--primary {
--btn-from: var(--brand-navy-700);
--btn-to: var(--brand-navy-800);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 84%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 84%, #ffffff);
--btn-bd: rgba(255,255,255,.18);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .btn--primary {
--btn-from: var(--brand-navy-700);
--btn-to: var(--brand-navy-800);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 84%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 84%, #ffffff);
--btn-bd: rgba(255,255,255,.18);
} }
/* NOIR ONLY: raw navy is the near-black page colour here, so lift primary to a visible dark GREY (white
text stays well over AA). Grey sits far enough from the blue-grey neutrals to keep ΔE00 ≥ 10 (measured
ghost 15.7, quiet 11.9). Higher specificity than the rule above, so it wins for noir; every other
palette keeps raw navy. */
:root[data-palette="noir"][data-theme="dark"] .btn--primary {
--btn-from: color-mix(in srgb, var(--brand-navy-700) 78%, #ffffff);
--btn-to: color-mix(in srgb, var(--brand-navy-800) 78%, #ffffff);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 66%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 66%, #ffffff);
}
@media (prefers-color-scheme: dark) { :root[data-palette="noir"]:not([data-theme="light"]) .btn--primary {
--btn-from: color-mix(in srgb, var(--brand-navy-700) 78%, #ffffff);
--btn-to: color-mix(in srgb, var(--brand-navy-800) 78%, #ffffff);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 66%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 66%, #ffffff);
} }
/* Accent = a deeper blue so WHITE text stays high-contrast (all stops ≥4.5:1) */
/* PALETTE-AWARE, AND THE PERCENTAGE IS NOT A TASTE CHOICE (8.220.12). Accent keeps WHITE text, so
the mix has to be dark enough for white to clear AA on the WORST palette, not the default one.
Measured across all 23 palettes x both modes: 78% navy leaves `sky/light` at 4.36:1 (fails);
**84% leaves the worst palette at 5.01:1**. Anything lighter is unreadable somewhere.
tools/check-btn-adjacency.py now asserts this every run (ACCENT CONTRAST block) so a future
"let's brighten the accent" cannot ship a button nobody can read. */
.btn--accent {
--btn-from: color-mix(in srgb, var(--brand-navy-700) 84%, #ffffff);
--btn-to: color-mix(in srgb, var(--brand-navy-800) 84%, #ffffff);
--btn-from-h: color-mix(in srgb, var(--brand-navy-700) 76%, #ffffff);
--btn-to-h: color-mix(in srgb, var(--brand-navy-800) 76%, #ffffff);
--btn-fg:#fff; --btn-bd: rgba(8,18,33,.34);
}
/* .btn--gold deleted 2026-07-19: §2 forbids gold button backgrounds outright, while §7 listed
--gold as an available variant — the standard contradicted itself. Zero PHP and zero JS
referenced it, so there was nothing to migrate. Reinstating it means changing §2 first. */
.btn--danger { --btn-from:#cf342c; --btn-to:#a81a12; --btn-from-h:#da3f34; --btn-to-h:#b52019; --btn-fg:#fff; --btn-bd: rgba(90,15,10,.34); }
/* Neutral secondary — a light SLATE gradient (never white), dark text. */
/* PALETTE-AWARE (8.220.11). These were fixed blue-slate literals, so on a monochrome or noir
palette a "neutral" button carried a visible blue cast in an otherwise grey UI — the same
doesn't-belong defect 8.220.1 fixed for --primary, just quieter.
The mix percentages are taken from the old literals: #e8edf4 is almost exactly 9% of the default
navy over white, #d6def0 about 17%.
THE DEFAULT PALETTE DOES SHIFT SLIGHTLY, about 5 points greyer (#e8edf4 -> #e3e7ea) — measured,
not assumed. The mix base is `var(--surface)`, and the default palette's surface is #f6f8f8, not
pure white. That is deliberate: a neutral button should sit on the surface it is actually drawn
on, so it follows a palette that tints its surfaces. Mixing over a hardcoded #ffffff would
reproduce the old bytes exactly and reintroduce the bug on every palette that is not white.
Only LIGHT mode changes here — the dark overrides below are already neutral slates that work on
any palette, and tools/check-btn-adjacency.py measures those against 23 palettes. */
.btn--ghost {
--btn-from: color-mix(in srgb, var(--brand-navy) 9%, var(--surface));
--btn-to: color-mix(in srgb, var(--brand-navy) 17%, var(--surface));
--btn-from-h: color-mix(in srgb, var(--brand-navy) 13%, var(--surface));
--btn-to-h: color-mix(in srgb, var(--brand-navy) 22%, var(--surface));
--btn-fg: var(--text);
--btn-bd: var(--border-strong);
}
.btn--ghost:hover { color: var(--text); }
/* Low-emphasis, but still a real gradient button (no transparent backgrounds). */
/* Same treatment as --ghost above; 6%/12% reproduces #eef1f7 / #e1e7f1 on the default palette. */
.btn--quiet {
--btn-from: color-mix(in srgb, var(--brand-navy) 6%, var(--surface));
--btn-to: color-mix(in srgb, var(--brand-navy) 12%, var(--surface));
--btn-from-h: color-mix(in srgb, var(--brand-navy) 9%, var(--surface));
--btn-to-h: color-mix(in srgb, var(--brand-navy) 16%, var(--surface));
--btn-fg: var(--text-2); --btn-bd: var(--border);
}
.btn--quiet:hover { color: var(--text); }
/* Secondary-destructive — a muted brick-RED gradient, white text (NOT pink/rose,
which is a forbidden button hue). Reads serious but less loud than --danger. */
.btn--danger-ghost {
--btn-from: #b0352c; --btn-to: #8c1d16;
--btn-from-h: #bd3e34; --btn-to-h: #9a241c;
--btn-fg: #ffffff;
--btn-bd: rgba(90, 15, 10, 0.36);
}
/* Dark mode: the neutral / soft variants get MID-slate / deep-rose gradients.
------------------------------------------------------------------------
The neutrals used to be DARK slate here (#2a394f / #232f45). That put them
within ΔE00 ≈ 5 of --primary on the bluer palettes (slate, midnight,
graphite), because --primary is itself a dark palette navy in dark mode —
so the app-wide `Cancel · Save` modal footer read as one undifferentiated
block, exactly what §7 forbids. Fixed 2026-07-19 by lifting the ramp:
ghost L*≈45 ΔE00 ≥ 15.0 vs --primary (worst: sky/dark)
quiet L*≈41 ΔE00 ≥ 11.4 vs --primary (worst: slate/dark)
The lift is deliberately the SMALLEST that clears the ≥10 bar with margin —
these are still mid-slate chips, not near-white buttons, so --primary keeps
the chromatic emphasis while the neutrals keep the desaturated one. Three
things move together and must stay in lockstep:
1. --btn-fg becomes #ffffff. It used to inherit var(--text)/var(--text-2);
on a lifted fill --text-2 (#aebacb) would drop to ~2.7:1 and fail AA.
White measures 5.33:1 (ghost) / 6.26:1 (quiet).
2. --btn-bd becomes an explicit LIGHT slate. A lifted neutral sits only
~2.1–2.4:1 above the darkest surface it lands on (ocean/--surface-3),
which alone is under the 3:1 UI bar; the border carries the edge at
≥4.7:1 against every dark surface, so the button never reads as a
floating label. Do not drop it. (Before the lift the fill was 1.11:1
against that same surface — i.e. the edge was already border-carried,
just invisibly so.)
3. :hover keeps white text — the base `.btn--ghost:hover{color:var(--text)}`
rule would otherwise repaint it #e6edf6 on an even lighter hover fill.
Re-verify with `python3 tools/check-btn-adjacency.py` after ANY change here. */
:root[data-theme="dark"] .btn--ghost:not(.btn--on-dark) { --btn-from:#6a7385; --btn-to:#5a6376; --btn-from-h:#757e91; --btn-to-h:#656e81; --btn-fg:#ffffff; --btn-bd:#939eb0; }
/* THE DARK `--quiet` FILL WAS LIFTED (8.220.1) from #5f6878/#505968 to #6b7486/#5c6577.
tools/check-btn-adjacency.py measured quiet|primary at dE00 7.0 on paper/dark — below the 10.0
"two different colours" bar — for the OASYS footer's `Create OASYS Account | Submit to CDPH`
pair. The page's variant choice is deliberate and documented there (minting a real CDPH account
takes the quiet rung), so the token moved rather than the page. Lifted only as far as the text
allows: this lands dE00 11.0 with white at 5.22:1, where the next step up (#737c8e) buys 13.8 but
drops the label to 4.65:1 and the one after that fails AA outright. */
/* ACCENT KEEPS A FIXED DARK-MODE FILL, and the checker is why. Making it palette-aware in dark too
put it on top of the lifted dark neutrals: on slate/dark it measured dE00 4.9 against --ghost and
5.4 against --quiet, i.e. one block of colour where two shipped footers need two distinct buttons.
The dark neutrals above are themselves fixed slates rather than palette-aware, so a fixed accent
here is consistent with that decision — not an exception to it. LIGHT mode still follows the
palette, which is where the "blue button in a grey UI" complaint actually came from. */
:root[data-theme="dark"] .btn--accent { --btn-from:#3a70ac; --btn-to:#27568f; --btn-from-h:#4278b4; --btn-to-h:#2c5d97; }
:root[data-theme="dark"] .btn--quiet { --btn-from:#6b7486; --btn-to:#5c6577; --btn-from-h:#767f91; --btn-to-h:#67707f; --btn-fg:#ffffff; --btn-bd:#8b96a8; }
:root[data-theme="dark"] .btn--ghost:not(.btn--on-dark):hover,
:root[data-theme="dark"] .btn--quiet:hover { color: #ffffff; }
:root[data-theme="dark"] .btn--danger-ghost { --btn-from:#8f2019; --btn-to:#6d1610; --btn-from-h:#9e2820; --btn-to-h:#7a1a13; --btn-fg:#ffffff; --btn-bd:rgba(120,20,15,0.5); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .btn--ghost:not(.btn--on-dark) { --btn-from:#6a7385; --btn-to:#5a6376; --btn-from-h:#757e91; --btn-to-h:#656e81; --btn-fg:#ffffff; --btn-bd:#939eb0; }
:root:not([data-theme="light"]) .btn--accent { --btn-from:#3a70ac; --btn-to:#27568f; --btn-from-h:#4278b4; --btn-to-h:#2c5d97; }
:root:not([data-theme="light"]) .btn--quiet { --btn-from:#6b7486; --btn-to:#5c6577; --btn-from-h:#767f91; --btn-to-h:#67707f; --btn-fg:#ffffff; --btn-bd:#8b96a8; }
:root:not([data-theme="light"]) .btn--ghost:not(.btn--on-dark):hover,
:root:not([data-theme="light"]) .btn--quiet:hover { color: #ffffff; }
:root:not([data-theme="light"]) .btn--danger-ghost { --btn-from:#8f2019; --btn-to:#6d1610; --btn-from-h:#9e2820; --btn-to-h:#7a1a13; --btn-fg:#ffffff; --btn-bd:rgba(120,20,15,0.5); }
}
.btn--block { width: 100%; }
.btn--lg { padding: 0.9rem 1.6rem; min-height: 52px; font-size: var(--fs-lg); }
.btn--sm { padding: 0.5rem 0.85rem; min-height: 38px; font-size: var(--fs-sm); }
/* On dark backgrounds (e.g. hero CTA band) */
.btn--on-dark { --btn-bd: rgba(255,255,255,0.36); }
.btn--ghost.btn--on-dark {
--btn-from: rgba(255,255,255,0.16); --btn-to: rgba(255,255,255,0.07);
--btn-from-h: rgba(255,255,255,0.28); --btn-to-h: rgba(255,255,255,0.15);
--btn-fg: #fff; --btn-bd: rgba(255,255,255,0.42);
}
.btn--ghost.btn--on-dark:hover { color: #fff; }
/* A button's icon ALWAYS matches its text colour (design standard) and never
inherits a container's .icon colour/size rule — `inherit !important` wins over
any `.some-container .icon { color: … }` that would otherwise leak in. The
third-party sign-in buttons are `.social-btn`, not `.btn`, so their multi-colour
logos are unaffected. */
.btn .icon { width: 1.15em !important; height: 1.15em !important; flex: none; color: inherit !important; }
/* Icon-only button (topbar/header actions) — same gradient/border/shadow
language as .btn, in a compact round chip. Pair with data-tip for a tooltip. */
.icon-btn {
--ib-from: var(--surface);
--ib-to: var(--surface-2);
--ib-from-h: var(--surface-2);
--ib-to-h: var(--surface-3);
--ib-bd: var(--border);
--ib-fg: var(--text-2);
--ib-fg-h: var(--text);
position: relative;
isolation: isolate;
display: inline-flex; align-items: center; justify-content: center;
width: 42px; height: 42px; border-radius: var(--radius-full);
color: var(--ib-fg);
background-image: linear-gradient(180deg, var(--ib-from), var(--ib-to));
border: 1px solid var(--ib-bd);
box-shadow: var(--shadow-xs);
transition: box-shadow var(--transition), border-color var(--transition), color var(--transition);
flex: none;
}
.icon-btn::before {
content: ""; position: absolute; inset: 0; border-radius: inherit;
background-image: linear-gradient(180deg, var(--ib-from-h), var(--ib-to-h));
opacity: 0; transition: opacity var(--transition); z-index: -1;
}
.icon-btn:hover::before { opacity: 1; }
.icon-btn:hover { color: var(--ib-fg-h); box-shadow: var(--shadow-sm); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.icon-btn .icon { width: 22px; height: 22px; }
.icon-btn--on-dark {
--ib-from: rgba(255,255,255,0.15); --ib-to: rgba(255,255,255,0.06);
--ib-from-h: rgba(255,255,255,0.26); --ib-to-h: rgba(255,255,255,0.13);
--ib-bd: rgba(255,255,255,0.20); --ib-fg: rgba(255,255,255,0.92); --ib-fg-h: #fff;
}
/* Desktop / mouse users get more compact buttons. Touch devices (iPhone/iPad)
keep the larger 44px+ tap targets from the base rules above — the distinction
is a precise pointer, not screen width, so an iPad in a desktop-width layout
still gets finger-friendly controls. */
@media (pointer: fine) {
.btn { min-height: 36px; padding: 0.44rem 0.95rem; font-size: var(--fs-sm); }
.btn--lg { min-height: 42px; padding: 0.6rem 1.25rem; font-size: var(--fs-base); }
.btn--sm { min-height: 30px; padding: 0.3rem 0.7rem; font-size: var(--fs-sm); }
.btn .icon { width: 1.05em; height: 1.05em; }
.icon-btn { width: 36px; height: 36px; }
.icon-btn .icon { width: 19px; height: 19px; }
}
/* Theme toggle: show ONE icon (sun in light, moon in dark). Lives here so it
applies on every page, not just the landing/public pages. */
.theme-icon-dark { display: none; }
:root[data-theme="dark"] .theme-icon-light { display: none; }
:root[data-theme="dark"] .theme-icon-dark { display: block; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .theme-icon-light { display: none; }
:root:not([data-theme="light"]) .theme-icon-dark { display: block; }
}
/* Notification dot */
.icon-btn .dot {
position: absolute; top: 6px; right: 6px;
width: 9px; height: 9px; border-radius: 50%;
background: var(--brand-gold); border: 2px solid var(--brand-navy-900);
z-index: 1;
}
/* Tooltip for icon-only controls (data-tip="Label"). Accessible name still
comes from aria-label; this is the visual popup. */
[data-tip] { position: relative; }
[data-tip]::after {
content: attr(data-tip);
position: absolute; top: calc(100% + 8px); left: 50%;
transform: translateX(-50%) translateY(-3px);
padding: 5px 9px; border-radius: var(--radius-sm);
background: var(--n-900); color: #fff;
font-size: var(--fs-xs); font-weight: var(--fw-medium); letter-spacing: 0.01em;
white-space: nowrap; box-shadow: var(--shadow-md);
opacity: 0; visibility: hidden; pointer-events: none;
/* display:none while hidden — `visibility:hidden`/`opacity:0` still occupy layout, so a nowrap
tooltip on a control near the right edge (e.g. the stats "Customize" gear) pushed the page
scrollWidth a few px past the viewport → a phantom horizontal scrollbar (which then forced a
vertical one). display:none takes it out of the scroll region entirely. */
display: none;
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
z-index: var(--z-dropdown);
}
[data-tip]:hover::after, [data-tip]:focus-visible::after {
display: block; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
[data-tip].tip-left::after { left: auto; right: 0; transform: translateX(0) translateY(-3px); }
[data-tip].tip-left:hover::after, [data-tip].tip-left:focus-visible::after { transform: translateX(0) translateY(0); }
:root[data-theme="dark"] [data-tip]::after { background: #000; border: 1px solid var(--border); }
/* Don't show the tooltip while its menu is open (avoids overlapping the panel) */
.menu.open [data-tip]::after { display: none !important; opacity: 0 !important; visibility: hidden !important; }
/* Touch devices: suppress hover tooltips (they linger after tap) */
@media (hover: none) { [data-tip]::after { display: none; } }
/* -------------------------------- Cards --------------------------------- */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
}
.card--pad { padding: var(--space-6); }
.card--hover { transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); }
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--border-strong); }
.card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); }
/* ------------------------------- Forms ---------------------------------- */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-5); }
.label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--text-2); }
.label .req { color: var(--danger); }
.input, .select, .textarea {
width: 100%;
padding: 0.72rem 0.9rem;
min-height: 46px;
font-size: var(--fs-base);
color: var(--text);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--radius-md);
/* Subtle resting drop shadow so the white field well lifts off its (slightly
darker) form container — the global form-field standard (DESIGN-STANDARDS §7). */
box-shadow: var(--shadow-xs);
transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
appearance: none;
}
.textarea { min-height: 130px; resize: vertical; line-height: var(--lh-base); }
/* Single-line fields share ONE height with every toolbar control (--control-h,
38px). The base rule above set min-height:46px, so a plain form field towered
over the search/select in a report toolbar (both --control-h) sitting beside
it. Vertical padding is zeroed here because the base 0.72rem padding clips the
value at 38px; the min-height + line-height centres single-line text with no
clipping.
Deliberately min-height (NOT a fixed height): every intentionally-compact
control shrinks itself by lowering THIS SAME property — .select--sm resets it
to 0 (30px pager), .input--sm to 32px (inline table edit), .cnar-recpager to
34px. A fixed `height` here would leak past all of those (they never reset
height) and silently re-inflate them to 38px. Sharing min-height keeps the
single-height standard for full-size fields while letting the compact
variants win by cascade, exactly as before. .textarea keeps its own
min-height:130px + base padding (multi-line, never pinned to a control). */
.input, .select { min-height: var(--control-h); padding-top: 0; padding-bottom: 0; }
/* Native date/time controls render ~2px taller than a plain text line at the SAME box model
(their inner value box carries platform padding + a taller intrinsic line), so a date field
towered over the text/select fields beside it in a form (measured: 44.8px date vs 42.8px text
in the Add-Employee modal). Pin the value box to the shared line-height and strip the platform
padding so every single-line field in a form is the same height. Applies in every context the
base .input min-height does — toolbar (38px), modal (40px+pad) and plain form alike. */
.input[type="date"], .input[type="time"], .input[type="datetime-local"],
.input[type="month"], .input[type="week"] { line-height: var(--lh-base); }
.input::-webkit-datetime-edit { padding: 0; }
.input::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
outline: none; border-color: var(--brand-sky); box-shadow: var(--shadow-focus); background: var(--surface);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--surface-3); color: var(--text-3); cursor: not-allowed; box-shadow: none; }
.field--error .input, .field--error .select, .field--error .textarea { border-color: var(--danger); }
.field__hint { font-size: var(--fs-xs); color: var(--text-3); }
.field__error { font-size: var(--fs-xs); color: var(--danger); font-weight: var(--fw-medium); }
.select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235b6b82' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.75rem center;
padding-right: 2.5rem;
}
/* Lighter caret on dark surfaces (matches --text-3 dark) — with a no-JS mirror. */
:root[data-theme="dark"] .select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238494ab' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238494ab' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}
}
/* Input with a leading icon */
.input-group { position: relative; }
.input-group .input-icon {
position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%);
width: 20px; height: 20px; color: var(--text-3); pointer-events: none;
}
.input-group .input { padding-left: 2.7rem; }
.input-group .input-affix {
position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
color: var(--text-3);
}
/* Checkbox / switch row */
.check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; font-size: var(--fs-sm); color: var(--text-2); }
.check input { width: 18px; height: 18px; accent-color: var(--brand-navy); }
/* Toggle switch (settings / remember me) */
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track {
position: absolute; inset: 0; background: var(--n-500); border-radius: var(--radius-full);
transition: background var(--transition);
}
.switch .track::before {
content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px;
background: #fff; border-radius: 50%; box-shadow: var(--shadow-sm);
transition: transform var(--transition);
}
.switch input:checked + .track { background: var(--brand-navy); }
.switch input:checked + .track::before { transform: translateX(20px); }
.switch input:focus-visible + .track { box-shadow: var(--shadow-focus); }
/* Password reveal */
.pw-toggle { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%);
width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
color: var(--text-3); border-radius: var(--radius-full); }
.pw-toggle:hover { color: var(--text); background: var(--surface-3); }
/* Stat card (KPI tile) — shared by the dashboard and the Staff Directory. */
.stat {
background: var(--surface); border: 1px solid var(--border); border-top: 3px solid var(--accent);
border-radius: var(--radius-lg);
padding: var(--space-5); box-shadow: var(--shadow-sm); display: flex; gap: var(--space-4); align-items: center;
}
.stat__icon { width: 48px; height: 48px; border-radius: var(--radius-md); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.stat__icon .icon { width: 24px; height: 24px; }
/* Brand-family chips (navy/sky/amber) all wear the controllable --icon-accent — which is BRIGHTER than
the raw accent on dark, so a dark accent (e.g. a deep red) stays a legible glyph instead of vanishing
into the chip. Green/red stay semantic. The theme studio sets --icon-accent independently of the band
and link colours. (amber/yellow backgrounds are forbidden — DESIGN-STANDARDS §2, so it is NOT amber.) */
.stat__icon--navy,
.stat__icon--sky,
.stat__icon--amber { background: color-mix(in srgb, var(--icon-accent) 15%, transparent); color: var(--icon-accent); }
.stat__icon--green { background: var(--success-bg); color: var(--success); }
.stat__icon--red { background: var(--danger-bg); color: var(--danger); }
.stat__n { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: 1; color: var(--text); font-variant-numeric: tabular-nums; }
.stat__l { font-size: var(--fs-sm); color: var(--text-3); margin-top: 4px; }
/* Clickable KPI card → drills into the matching detail view. */
a.stat { text-decoration: none; color: inherit; }
.stat--link { cursor: pointer; transition: box-shadow var(--transition), border-color var(--transition), transform var(--transition); }
.stat--link:hover { border-color: var(--border-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.stat--link:focus-visible { outline: none; box-shadow: var(--shadow-focus), var(--shadow-sm); }
.stat__go { margin-left: auto; flex: none; color: var(--text-3); opacity: 0; transform: translateX(-4px); transition: opacity var(--transition), transform var(--transition); }
.stat__go .icon { width: 18px; height: 18px; display: block; }
.stat--link:hover .stat__go, .stat--link:focus-visible .stat__go { opacity: 1; transform: none; }
/* Password strength meter (shared by the change-password page + Add-User modal). */
.pw-meter { display: flex; align-items: center; gap: var(--space-2); margin-top: 8px; }
.pw-meter__bar { flex: 1; height: 6px; border-radius: var(--radius-full); background: var(--surface-3); overflow: hidden; }
.pw-meter__bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: #d61f16;
transition: width var(--transition), background var(--transition); }
.pw-meter__label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); min-width: 5.5em; text-align: right; }
/* ------------------------------- Badges --------------------------------- */
.badge {
display: inline-flex; align-items: center; gap: 0.35em;
padding: 0.2rem 0.6rem; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
border-radius: var(--radius-full); line-height: 1.4;
background: var(--surface-3); color: var(--text-2);
}
/* Vivid, saturated status fills + dark bold text (light mode) — never a pale tint
as the sole status carrier. "warning" is a neutral slate (amber is a forbidden fill). */
.badge--success { background: #a9edc0; color: #0d5231; font-weight: var(--fw-bold); }
.badge--warning { background: #dbe2ec; color: #33435c; font-weight: var(--fw-bold); }
.badge--danger { background: #ffc9c7; color: #8a120c; font-weight: var(--fw-bold); }
.badge--info { background: #cfe0fd; color: #16357a; font-weight: var(--fw-bold); }
:root[data-theme="dark"] .badge--success { background: #123a26; color: #86efac; }
:root[data-theme="dark"] .badge--warning { background: #263243; color: #b9c4d6; }
:root[data-theme="dark"] .badge--danger { background: #4a1512; color: #ff5c5c; }
:root[data-theme="dark"] .badge--info { background: #16305c; color: #b7cdfb; }
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) .badge--success { background: #123a26; color: #86efac; }
:root:not([data-theme="light"]) .badge--warning { background: #263243; color: #b9c4d6; }
:root:not([data-theme="light"]) .badge--danger { background: #4a1512; color: #ff5c5c; }
:root:not([data-theme="light"]) .badge--info { background: #16305c; color: #b7cdfb; }
}
/* ------------------------------- Alerts --------------------------------- */
.alert {
display: flex; gap: var(--space-3); align-items: flex-start;
padding: var(--space-4); border-radius: var(--radius-md);
border: 1px solid var(--border); background: var(--surface-2);
font-size: var(--fs-sm); color: var(--text);
}
.alert .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert + .alert { margin-top: var(--space-3); }
/* Status text via tokens — adapts to light/dark automatically (no hardcoded hex) */
.alert--success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.alert--warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.alert--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.alert--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info); }
.alert strong { color: inherit; }
/* ------------------------------- Avatar --------------------------------- */
.avatar {
display: inline-flex; align-items: center; justify-content: center;
width: 38px; height: 38px; border-radius: 50%;
background: linear-gradient(135deg, var(--brand-blue), var(--brand-navy));
color: #fff; font-weight: var(--fw-semibold); font-size: var(--fs-sm);
overflow: hidden; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--lg { width: 56px; height: 56px; font-size: var(--fs-lg); }
/* ------------------------- Dropdown menu (popover) ---------------------- */
.menu { position: relative; }
.menu__panel {
position: absolute; right: 0; top: calc(100% + 10px);
min-width: 244px;
max-width: calc(100vw - var(--space-4) * 2);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-2);
opacity: 0; visibility: hidden; transform: translateY(-6px);
transition: opacity var(--transition-fast), transform var(--transition-fast), visibility var(--transition-fast);
z-index: var(--z-dropdown);
}
.menu.open .menu__panel { opacity: 1; visibility: visible; transform: translateY(0); }
/* A CLOSED panel is still position:absolute and still has height, so inside a .dsd-tablewrap it
inflated the scrollable area — the Check-Offs panel carried ~190px of empty vertical scroll that
pushed real rows out of view. visibility:hidden hides it but does not remove its box. Zero height
does, and because opacity still transitions the fade-in survives. */
.menu:not(.open) .menu__panel { height: 0; overflow: hidden; padding-top: 0; padding-bottom: 0; }
.menu__header { padding: var(--space-3) var(--space-3) var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.menu__item {
display: flex; align-items: center; gap: var(--space-3);
padding: 0.6rem 0.7rem; border-radius: var(--radius-md);
color: var(--text); font-size: var(--fs-sm); font-weight: var(--fw-medium);
width: 100%; text-align: left; transition: background var(--transition-fast), color var(--transition-fast);
}
.menu__item:hover { background: var(--surface-3); color: var(--text); }
.menu__item .icon { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.menu__item--danger { color: var(--danger); }
.menu__item--danger:hover { background: var(--danger-bg); }
.menu__item--danger .icon { color: var(--danger); }
.menu__sep { height: 1px; background: var(--border); margin: var(--space-2) 0; }
/* -------------------------------- Tables -------------------------------- */
/* Standard data table: zebra striping + a consistent pagination footer.
Structure:
…
*/
.table-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.table-wrap { overflow-x: auto; }
.dsd-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
/* THEMED header row — a BOLD accent gradient across the whole row (on thead, so it is ONE gradient,
not one per cell) with white labels, so every table on the platform is unmistakably themed in any
palette and in dark mode (owner: the colour change must reach "everything", not as a faint tint). */
.dsd-table thead { background: var(--sect-band); }
.dsd-table thead th {
text-align: left; white-space: nowrap;
font-size: var(--fs-xs); font-weight: var(--fw-bold);
letter-spacing: var(--tracking-wide); text-transform: uppercase;
color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.25);
padding: var(--space-3) var(--space-4);
background: transparent;
border-bottom: none;
}
.dsd-table tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
color: var(--text); vertical-align: middle;
}
.dsd-table tbody tr:nth-child(even) { background: var(--surface-2); } /* zebra */
.dsd-table tbody tr:hover { background: var(--surface-3); }
.dsd-table tbody tr:last-child td { border-bottom: 0; }
.dsd-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.dsd-table .muted { color: var(--text-3); }
.dsd-tablewrap { overflow-x: auto; }
/* A kebab inside a table is clipped by TWO ancestors: this wrapper (overflow-x:auto computes overflow-y
to auto as well) and .panel, which uses overflow:hidden for its rounded corners. Rather than switch
either to visible while a menu is open — which discarded horizontal scroll position and burst wide
tables out of the page on a phone — app.js lifts the open panel to position:fixed and pins it to the
button. Nothing about the table's own overflow changes. See dsdMenuEscape in assets/js/app.js. */
.menu__panel.is-escaped { position: fixed; z-index: 1200; }
/* Clickable rows (open a details modal) */
.dsd-table .row-click { cursor: pointer; }
.dsd-table .row-click:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--brand-blue); }
.u-cell { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.u-cell .avatar { width: 34px; height: 34px; font-size: var(--fs-xs); flex: none; }
.u-cell__nm { font-weight: var(--fw-semibold); display: inline-flex; align-items: center; gap: var(--space-2); }
.dsd-table__chev { text-align: right; color: var(--text-3); width: 1%; white-space: nowrap; }
.dsd-table__chev .icon { width: 18px; height: 18px; }
/* -------------------------------- Modal --------------------------------- */
.modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.modal[hidden] { display: none; }
.modal__backdrop { position: absolute; inset: 0; background: var(--overlay); backdrop-filter: blur(2px); }
.modal__dialog {
position: relative; z-index: 1; width: 100%; max-width: 560px;
max-height: calc(100dvh - 2 * var(--space-4)); overflow-y: auto;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
animation: modal-in 160ms ease;
}
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(0.99); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .modal__dialog { animation: none; } }
/* Form modals sit on the tinted form surface so their white input wells pop (global
form standard). The `form` vs `div` distinction on .modal__body separates data-entry
dialogs from read-only detail dialogs automatically: read-only modals (notification,
event/renewal/AFL/stat views) use a
and stay on --surface.
The second selector catches wizards whose