/* ═══════════════════════════════════════════════════════════════════════════════════════════════
   ORPHEUS — THE BOOTSTRAP BRIDGE
   Every page in this app is written in Bootstrap's SEMANTIC vocabulary — btn-primary, card,
   alert-warning, table, form-control, badge — and not one of them hard-codes a colour. That is
   the whole reason this file exists: re-point Bootstrap's variables at the Orpheus tokens and
   all twenty-two pages change at once, with no edit to any .razor file.

   Bootstrap 5.3 is mostly variable-driven, so most of this is a remap. It is NOT entirely
   variable-driven, though, and the exceptions are the interesting part: focus rings, checked
   checkboxes, .text-bg-* badge text and a few link states were compiled to literal hex by Sass
   and cannot be reached through a variable. Those get explicit rules below, each one labelled
   with what it is compensating for — otherwise the next person to touch this wonders why half
   the file is remap and half is override.

   Loaded AFTER bootstrap.min.css and BEFORE orpheus.css. Nothing Orpheus-specific belongs here:
   this file's only job is "Bootstrap, but in our colours".
   ═══════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── The RGB triplets Bootstrap needs ──────────────────────────────────────────────────────────
   Bootstrap composes translucent colours as rgba(var(--bs-x-rgb), .5), so a hex token is not
   enough on its own; it needs the channels separately. Kept here rather than in tokens.css
   because it is an interop detail of this library, not a design decision. If a palette colour
   changes in tokens.css, change its triplet here in the same commit. */

[data-bs-theme='dark'],
:root {
    --o-gold-rgb: 232, 180, 74;
    --o-accent-rgb: 63, 224, 208;
    --o-success-rgb: 52, 229, 160;
    --o-danger-rgb: 255, 77, 94;
    --o-warning-rgb: 255, 138, 61;
    --o-ink-rgb: 237, 233, 242;
    --o-bg-rgb: 10, 9, 16;
}

[data-bs-theme='light'] {
    --o-gold-rgb: 217, 160, 58;
    --o-accent-rgb: 14, 158, 146;
    --o-success-rgb: 15, 157, 99;
    --o-danger-rgb: 217, 45, 62;
    --o-warning-rgb: 194, 90, 11;
    --o-ink-rgb: 30, 26, 20;
    --o-bg-rgb: 247, 244, 238;
}

/* ── Global remap ──────────────────────────────────────────────────────────────────────────────
   Applied to both themes at once: every value here is already a token, and the token is what
   differs. That is the payoff of naming tokens by role. */

:root,
[data-bs-theme='dark'],
[data-bs-theme='light'] {
    --bs-font-sans-serif: var(--o-font-ui);
    --bs-body-font-family: var(--o-font-ui);
    --bs-body-font-size: var(--o-text-md);
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.6;

    --bs-body-bg: var(--o-bg);
    --bs-body-bg-rgb: var(--o-bg-rgb);
    --bs-body-color: var(--o-ink);
    --bs-body-color-rgb: var(--o-ink-rgb);
    --bs-emphasis-color: var(--o-ink);
    --bs-secondary-color: var(--o-ink-2);
    --bs-secondary-bg: var(--o-surface-2);
    --bs-tertiary-color: var(--o-ink-3);
    --bs-tertiary-bg: var(--o-surface);
    --bs-heading-color: var(--o-ink);

    --bs-border-color: var(--o-line);
    --bs-border-color-translucent: var(--o-line-soft);
    --bs-border-radius-sm: var(--o-r-sm);
    --bs-border-radius: var(--o-r);
    --bs-border-radius-lg: var(--o-r-lg);
    --bs-border-radius-xl: var(--o-r-lg);
    --bs-border-radius-pill: var(--o-r-pill);

    /* Links are GOLD. This is the single change that does most of the work on the legal pages,
       the help text and every inline action in the app. */
    --bs-link-color: var(--o-gold-ink);
    --bs-link-color-rgb: var(--o-gold-rgb);
    --bs-link-hover-color: var(--o-gold-soft);
    --bs-link-hover-color-rgb: var(--o-gold-rgb);

    --bs-primary: var(--o-gold);
    --bs-primary-rgb: var(--o-gold-rgb);
    --bs-primary-text-emphasis: var(--o-gold-ink);
    --bs-primary-bg-subtle: var(--o-gold-wash);
    --bs-primary-border-subtle: var(--o-line-strong);

    --bs-secondary: var(--o-ink-3);
    --bs-secondary-rgb: 131, 127, 148;
    --bs-secondary-text-emphasis: var(--o-ink-2);
    --bs-secondary-bg-subtle: var(--o-surface);
    --bs-secondary-border-subtle: var(--o-line-soft);

    --bs-success: var(--o-success);
    --bs-success-rgb: var(--o-success-rgb);
    --bs-success-text-emphasis: var(--o-success-ink);
    --bs-success-bg-subtle: rgba(var(--o-success-rgb), .10);
    --bs-success-border-subtle: rgba(var(--o-success-rgb), .32);

    --bs-danger: var(--o-danger);
    --bs-danger-rgb: var(--o-danger-rgb);
    --bs-danger-text-emphasis: var(--o-danger-ink);
    --bs-danger-bg-subtle: rgba(var(--o-danger-rgb), .10);
    --bs-danger-border-subtle: rgba(var(--o-danger-rgb), .34);

    --bs-warning: var(--o-warning);
    --bs-warning-rgb: var(--o-warning-rgb);
    --bs-warning-text-emphasis: var(--o-warning-ink);
    --bs-warning-bg-subtle: rgba(var(--o-warning-rgb), .11);
    --bs-warning-border-subtle: rgba(var(--o-warning-rgb), .34);

    --bs-info: var(--o-accent);
    --bs-info-rgb: var(--o-accent-rgb);
    --bs-info-text-emphasis: var(--o-accent-ink);
    --bs-info-bg-subtle: rgba(var(--o-accent-rgb), .10);
    --bs-info-border-subtle: rgba(var(--o-accent-rgb), .32);

    --bs-code-color: var(--o-accent-ink);
    --bs-highlight-bg: var(--o-gold-wash-2);
    --bs-highlight-color: var(--o-ink);

    --bs-focus-ring-color: rgba(var(--o-gold-rgb), .38);
    --bs-focus-ring-width: 3px;
}

/* ── Focus: one ring, everywhere ───────────────────────────────────────────────────────────────
   Bootstrap compiles a blue focus shadow into .form-control:focus, .form-select:focus,
   .form-check-input:focus and .btn:focus-visible as a LITERAL — $input-focus-box-shadow resolves
   to rgba(13,110,253,.25) at build time and no variable reaches it. Without these four rules the
   app is gold everywhere until you press Tab, and then it is 2013 Bootstrap blue.

   :focus-visible rather than :focus, so a mouse click on a button does not paint a ring, but
   keyboard navigation always does. Inputs keep :focus as well — a text field SHOULD show where
   typing will go regardless of how it was reached. */

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
textarea:focus {
    border-color: var(--o-gold);
    box-shadow: 0 0 0 3px rgba(var(--o-gold-rgb), .22);
    outline: none;
}

.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--o-gold);
    outline-offset: 2px;
    box-shadow: none;
}

/* <FocusOnNavigate Selector="h1"> in Routes.razor moves focus to the page heading after every
   navigation, so a screen reader starts reading at the top of the new page rather than wherever
   the last link was. To be focusable the heading gets tabindex="-1" — which means the rule above
   matches it, and every page load drew a gold box around its own title. The template's app.css had
   `h1:focus { outline: none }` for exactly this reason; it came back with the stylesheet it was
   deleted with.

   Removing the ring costs nothing here: an <h1> is not an interactive control, nobody can Tab to
   it, and the focus exists only to move the reading position. */
h1:focus,
h1:focus-visible {
    outline: none;
}

/* .form-check-input's checked state is another compiled literal: background-color #0d6efd plus
   an embedded blue SVG tick. Both have to be replaced, and the tick has to be re-drawn in the
   colour that sits on gold — a white tick on gold is nearly invisible. */
.form-check-input {
    background-color: var(--o-surface-2);
    border-color: var(--o-line-strong);
}

.form-check-input:checked {
    background-color: var(--o-gold);
    border-color: var(--o-gold);
}

.form-check-input:checked[type='checkbox'] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2317120A' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.5' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked[type='radio'] {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%2317120A'/%3e%3c/svg%3e");
}

/* The switch knob is a white SVG circle, compiled in. It stays white when OFF (it reads as a
   knob against the dark track) and turns near-black when ON, where the track is gold. */
.form-switch .form-check-input {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28237,233,242,0.85%29'/%3e%3c/svg%3e");
}

.form-switch .form-check-input:checked {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2317120A'/%3e%3c/svg%3e");
}

/* ── Form fields ───────────────────────────────────────────────────────────────────────────────
   Bootstrap's dark-mode input is body-bg coloured, which makes a field invisible against the
   page. An Orpheus field is a well: inset, one shade darker than what surrounds it. */

.form-control,
.form-select,
.input-group-text {
    background-color: var(--o-inset);
    border-color: var(--o-line-soft);
    color: var(--o-ink);
    border-radius: var(--o-r-sm);
    transition: border-color var(--o-t-fast) var(--o-ease),
                box-shadow var(--o-t-fast) var(--o-ease),
                background-color var(--o-t-fast) var(--o-ease);
}

.form-control:hover:not(:focus):not(:disabled),
.form-select:hover:not(:focus):not(:disabled) {
    border-color: var(--o-line-strong);
}

.form-control::placeholder {
    color: var(--o-ink-3);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--o-surface);
    color: var(--o-ink-3);
}

.input-group-text {
    color: var(--o-ink-2);
    border-color: var(--o-line-soft);
}

/* The file picker's button is drawn by the browser, not by Bootstrap, and inherits nothing — on
   Your music it sat as a pale slab labelled "Choose File" in the middle of an obsidian card. It is
   the only control on that page, so it gets the gold wash rather than being merely neutralised. */
.form-control[type='file']::file-selector-button {
    padding: .48rem .9rem;
    margin: -.375rem .9rem -.375rem -.75rem;
    border: 0;
    border-right: 1px solid var(--o-line);
    background: var(--o-gold-wash-2);
    color: var(--o-gold-ink);
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--o-t-fast) var(--o-ease);
}

.form-control[type='file']::file-selector-button:hover {
    background: var(--o-gold);
    color: var(--o-on-gold);
}

/* The select arrow is a compiled dark-grey SVG; on an obsidian field it disappears. */
.form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23E8B44A' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

[data-bs-theme='light'] .form-select {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238A6512' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-label {
    font-size: var(--o-text-sm);
    font-weight: 500;
    color: var(--o-ink-2);
    margin-bottom: var(--o-s-1);
}

.form-text {
    color: var(--o-ink-3);
    font-size: var(--o-text-sm);
}

/* Blazor's own validation classes, previously outlined in raw red and green. */
.valid.modified:not([type=checkbox]) {
    outline: none;
    border-color: rgba(var(--o-success-rgb), .55);
}

.invalid {
    outline: none;
    border-color: var(--o-danger);
}

.validation-message {
    color: var(--o-danger-ink);
    font-size: var(--o-text-sm);
}

/* ── Buttons ───────────────────────────────────────────────────────────────────────────────────
   Bootstrap 5.3 buttons ARE variable-driven (--bs-btn-*), so these are clean remaps rather than
   overrides. The primary is a gold PLATE: a real gradient with a lit top edge and near-black
   text, which is what makes it read as metal rather than as a yellow rectangle. It is the same
   in both themes — brass looks like brass on marble too. */

.btn {
    --bs-btn-font-family: var(--o-font-ui);
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: var(--o-r-sm);
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .48rem;
    letter-spacing: .005em;
    transition: transform var(--o-t-fast) var(--o-ease-out),
                box-shadow var(--o-t-base) var(--o-ease),
                background-color var(--o-t-fast) var(--o-ease),
                border-color var(--o-t-fast) var(--o-ease),
                color var(--o-t-fast) var(--o-ease);
}

.btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: .7rem;
    --bs-btn-font-size: var(--o-text-lg);
    --bs-btn-border-radius: var(--o-r);
}

.btn-sm {
    --bs-btn-padding-x: .75rem;
    --bs-btn-padding-y: .3rem;
    --bs-btn-font-size: var(--o-text-sm);
}

.btn-primary {
    --bs-btn-color: var(--o-on-gold);
    --bs-btn-bg: var(--o-gold);
    --bs-btn-border-color: var(--o-gold);
    --bs-btn-hover-color: var(--o-on-gold);
    --bs-btn-hover-bg: var(--o-gold-soft);
    --bs-btn-hover-border-color: var(--o-gold-soft);
    --bs-btn-active-color: var(--o-on-gold);
    --bs-btn-active-bg: var(--o-gold-deep);
    --bs-btn-active-border-color: var(--o-gold-deep);
    --bs-btn-disabled-color: rgba(23, 18, 10, .5);
    --bs-btn-disabled-bg: var(--o-gold-deep);
    --bs-btn-disabled-border-color: var(--o-gold-deep);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .28), rgba(255, 255, 255, 0) 55%);
    font-weight: 600;
    box-shadow: var(--o-glow-inset), var(--o-shadow-sm);
}

.btn-primary:hover:not(:disabled) {
    box-shadow: var(--o-glow-inset), var(--o-glow-gold);
    transform: translateY(-1px);
}

.btn-primary:active:not(:disabled) {
    transform: translateY(0);
}

.btn-outline-primary {
    --bs-btn-color: var(--o-gold-ink);
    --bs-btn-border-color: var(--o-line-strong);
    --bs-btn-hover-color: var(--o-on-gold);
    --bs-btn-hover-bg: var(--o-gold);
    --bs-btn-hover-border-color: var(--o-gold);
    --bs-btn-active-color: var(--o-on-gold);
    --bs-btn-active-bg: var(--o-gold-deep);
    --bs-btn-active-border-color: var(--o-gold-deep);
    --bs-btn-disabled-color: var(--o-ink-3);
    --bs-btn-disabled-border-color: var(--o-line-soft);
}

.btn-outline-secondary {
    --bs-btn-color: var(--o-ink-2);
    --bs-btn-border-color: var(--o-line-soft);
    --bs-btn-hover-color: var(--o-ink);
    --bs-btn-hover-bg: var(--o-surface-2);
    --bs-btn-hover-border-color: var(--o-line-strong);
    --bs-btn-active-color: var(--o-ink);
    --bs-btn-active-bg: var(--o-surface-2);
    --bs-btn-active-border-color: var(--o-line-strong);
    --bs-btn-disabled-color: var(--o-ink-3);
    --bs-btn-disabled-border-color: var(--o-line-soft);
}

.btn-secondary {
    --bs-btn-color: var(--o-ink);
    --bs-btn-bg: var(--o-surface-2);
    --bs-btn-border-color: var(--o-line-soft);
    --bs-btn-hover-color: var(--o-ink);
    --bs-btn-hover-bg: var(--o-surface-solid);
    --bs-btn-hover-border-color: var(--o-line-strong);
    --bs-btn-active-color: var(--o-ink);
    --bs-btn-active-bg: var(--o-surface-solid);
    --bs-btn-active-border-color: var(--o-line-strong);
    --bs-btn-disabled-color: var(--o-ink-3);
    --bs-btn-disabled-bg: var(--o-surface);
    --bs-btn-disabled-border-color: var(--o-line-soft);
}

.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--o-danger);
    --bs-btn-border-color: var(--o-danger);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--o-danger) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--o-danger) 82%, #000);
    --bs-btn-active-bg: color-mix(in srgb, var(--o-danger) 70%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--o-danger) 70%, #000);
}

.btn-outline-danger {
    --bs-btn-color: var(--o-danger-ink);
    --bs-btn-border-color: rgba(var(--o-danger-rgb), .45);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--o-danger);
    --bs-btn-hover-border-color: var(--o-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--o-danger);
    --bs-btn-active-border-color: var(--o-danger);
}

.btn-success {
    --bs-btn-color: var(--o-on-gold);
    --bs-btn-bg: var(--o-success);
    --bs-btn-border-color: var(--o-success);
    --bs-btn-hover-color: var(--o-on-gold);
    --bs-btn-hover-bg: color-mix(in srgb, var(--o-success) 85%, #fff);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--o-success) 85%, #fff);
}

.btn-link {
    --bs-btn-color: var(--o-gold-ink);
    --bs-btn-hover-color: var(--o-gold-soft);
    --bs-btn-font-weight: 500;
    text-underline-offset: .22em;
    text-decoration-thickness: 1px;
}

/* ── Cards ─────────────────────────────────────────────────────────────────────────────────────
   Glass, not paper: a translucent surface over whatever the backdrop is doing, with a hairline
   that is gold-tinted rather than grey. */

.card {
    --bs-card-bg: var(--o-surface);
    --bs-card-border-color: var(--o-line);
    --bs-card-border-radius: var(--o-r);
    --bs-card-inner-border-radius: var(--o-r-sm);
    --bs-card-cap-bg: var(--o-surface-2);
    --bs-card-color: var(--o-ink);
    --bs-card-spacer-x: var(--o-s-5);
    --bs-card-spacer-y: var(--o-s-5);
    backdrop-filter: blur(var(--o-glass-blur));
    box-shadow: var(--o-shadow);
}

.card-title {
    color: var(--o-ink);
}

.card-header,
.card-footer {
    border-color: var(--o-line);
}

/* ── Alerts ────────────────────────────────────────────────────────────────────────────────────
   Bootstrap's alert is a soft wash and a 1px box. Orpheus's keeps the wash but moves the colour
   to a 3px bar down the leading edge, so a page with three alerts reads as a column of signals
   rather than three coloured slabs. */

.alert {
    --bs-alert-border-radius: var(--o-r-sm);
    border: 1px solid var(--o-line-soft);
    border-left: 3px solid var(--bs-alert-border-color);
    padding: var(--o-s-3) var(--o-s-4);
    font-size: var(--o-text-md);
    box-shadow: var(--o-shadow-sm);
}

.alert-link {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.alert-success { --bs-alert-color: var(--o-success-ink); --bs-alert-bg: rgba(var(--o-success-rgb), .09); --bs-alert-border-color: var(--o-success); }
.alert-danger  { --bs-alert-color: var(--o-danger-ink);  --bs-alert-bg: rgba(var(--o-danger-rgb), .09);  --bs-alert-border-color: var(--o-danger); }
.alert-warning { --bs-alert-color: var(--o-warning-ink); --bs-alert-bg: rgba(var(--o-warning-rgb), .09); --bs-alert-border-color: var(--o-warning); }
.alert-info    { --bs-alert-color: var(--o-accent-ink);  --bs-alert-bg: rgba(var(--o-accent-rgb), .09);  --bs-alert-border-color: var(--o-accent); }
.alert-primary { --bs-alert-color: var(--o-gold-ink);    --bs-alert-bg: var(--o-gold-wash);              --bs-alert-border-color: var(--o-gold); }

.alert-secondary {
    --bs-alert-color: var(--o-ink-2);
    --bs-alert-bg: var(--o-surface);
    --bs-alert-border-color: var(--o-line-strong);
}

/* ── Badges ────────────────────────────────────────────────────────────────────────────────────
   .text-bg-* compiles its text colour to a literal #fff or #000 chosen against Bootstrap's own
   palette, so every one of them needs restating against ours. Badges use the telemetry face:
   they are almost always a count or a state, and they sit beside a heading. */

.badge {
    font-family: var(--o-font-data);
    font-weight: 600;
    font-size: var(--o-text-2xs);
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: .32em .62em;
    border-radius: var(--o-r-xs);
    border: 1px solid transparent;
    vertical-align: .12em;
}

.text-bg-primary   { color: var(--o-on-gold) !important;    background-color: var(--o-gold) !important; }
.text-bg-secondary { color: var(--o-ink-2) !important;      background-color: var(--o-surface-2) !important; border-color: var(--o-line-soft); }
.text-bg-success   { color: var(--o-success-ink) !important; background-color: rgba(var(--o-success-rgb), .14) !important; border-color: rgba(var(--o-success-rgb), .4); }
.text-bg-danger    { color: var(--o-danger-ink) !important;  background-color: rgba(var(--o-danger-rgb), .14) !important;  border-color: rgba(var(--o-danger-rgb), .42); }
.text-bg-warning   { color: var(--o-warning-ink) !important; background-color: rgba(var(--o-warning-rgb), .14) !important; border-color: rgba(var(--o-warning-rgb), .42); }
.text-bg-info      { color: var(--o-accent-ink) !important;  background-color: rgba(var(--o-accent-rgb), .14) !important;  border-color: rgba(var(--o-accent-rgb), .4); }

/* .text-bg-light compiles to black-on-#f8f9fa. Run history tags a hand-started run with it, so
   without this there are three white chips with black text sitting in an obsidian table. It is
   used as a quiet neutral, which is what .text-bg-secondary already is here. .text-bg-dark is not
   used today and is given the same treatment so that reaching for it later cannot reintroduce the
   same fault in the other direction. */
.text-bg-light,
.text-bg-dark {
    color: var(--o-ink-2) !important;
    background-color: var(--o-surface-2) !important;
    border-color: var(--o-line-soft);
}

/* ── Tables ────────────────────────────────────────────────────────────────────────────────────
   Run history and the cookie table are the only heavy tables in the app; both are read for their
   numbers, so figures are tabular (columns of digits line up) and the header is an inscription
   rather than a heading. */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--o-ink);
    --bs-table-border-color: var(--o-line-soft);
    --bs-table-striped-bg: var(--o-surface);
    --bs-table-striped-color: var(--o-ink);
    --bs-table-hover-bg: var(--o-gold-wash);
    --bs-table-hover-color: var(--o-ink);
    font-size: var(--o-text-sm);
}

.table > thead th {
    font-family: var(--o-font-ui);
    font-size: var(--o-text-2xs);
    font-weight: 600;
    letter-spacing: var(--o-tracking-label);
    text-transform: uppercase;
    color: var(--o-gold-ink);
    border-bottom-color: var(--o-line-strong);
    padding-bottom: var(--o-s-2);
    white-space: nowrap;
}

.table > tbody td {
    border-color: var(--o-line-soft);
    vertical-align: middle;
}

.table td:has(> time),
.table .font-monospace,
.table .o-num {
    font-family: var(--o-font-data);
    font-variant-numeric: tabular-nums;
}

/* ── Type ──────────────────────────────────────────────────────────────────────────────────────
   Headings are the ceremonial face. h1 and h2 are inscriptional; h3 and below step back to the
   interface face, because a Cinzel h6 inside a form label reads as decoration and slows reading
   down for no gain. */

h1, .h1, h2, .h2 {
    font-family: var(--o-font-display);
    font-weight: 600;
    letter-spacing: var(--o-tracking-tight);
    line-height: 1.15;
    color: var(--o-ink);
}

h1, .h1 { font-size: var(--o-text-2xl); }
h2, .h2 { font-size: var(--o-text-xl); }

h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: var(--o-font-ui);
    font-weight: 600;
    letter-spacing: 0;
    color: var(--o-ink);
}

/* Full-strength ink, not ink-2. A lead set dimmer than the paragraph under it inverts the
   hierarchy: the smaller, brighter text below wins the eye and the sentence meant to be read
   first is the one that recedes. The size and the light weight are what make it a lead. */
.lead {
    font-size: var(--o-text-lg);
    font-weight: 300;
    line-height: 1.55;
    color: var(--o-ink);
}

code, kbd, samp, pre, .font-monospace {
    font-family: var(--o-font-data);
    font-size: .92em;
}

code {
    background: var(--o-surface-2);
    padding: .12em .38em;
    border-radius: var(--o-r-xs);
    border: 1px solid var(--o-line-soft);
}

small, .small {
    font-size: var(--o-text-sm);
}

hr {
    border-color: var(--o-line);
    opacity: 1;
}

/* ── Odds and ends Bootstrap left literal ──────────────────────────────────────────────────── */

::selection {
    background: var(--o-gold-wash-2);
    color: var(--o-ink);
}

/* Firefox needs the pair spelled out; Chromium styles the whole scrollbar from these two. */
* {
    scrollbar-color: var(--o-line-strong) transparent;
    scrollbar-width: thin;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--o-line-strong);
    border-radius: var(--o-r-pill);
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--o-gold-deep); background-clip: content-box; }

.text-secondary { color: var(--o-ink-2) !important; }
.text-muted { color: var(--o-ink-3) !important; }
.border { border-color: var(--o-line) !important; }
.border-start, .border-end, .border-top, .border-bottom { border-color: var(--o-line) !important; }
.bg-body-tertiary { background-color: var(--o-surface) !important; }

/* The Blazor template's error boundary, restyled from its yellow-and-red default. */
.blazor-error-boundary {
    background: rgba(var(--o-danger-rgb), .12) !important;
    border: 1px solid rgba(var(--o-danger-rgb), .4);
    border-radius: var(--o-r-sm);
    color: var(--o-danger-ink);
    padding: var(--o-s-4) !important;
}