/* ==========================================================================
   Clarifolio components — the neo-brutalist component library shared by
   Landing, App and Admin. Loaded by _ClarifolioHead after tokens.css and
   base.css. Every rule reads tokens only (no raw colors, borders, radii or
   shadows); dark mode and accent changes therefore need no rules here.

   Where Bootstrap ships a component of the same name (btn, card, table,
   form-control, nav-pills, toast, alert), this file sets that component's
   own --bs-* variables to tokens instead of fighting its selectors, and
   also declares the base rule so the component renders identically on
   Landing, which has no Bootstrap.

   Components (see the dev gallery at /_dev/components):
     Button     .btn + .btn-primary | .btn-secondary | .btn-ghost | .btn-danger
                (+ .btn-ink for a solid-ink CTA, .btn-sm/.btn-lg, .btn-block)
     Card       .card (+ .card-body/.card-header/.card-footer, .card-flat, .card-ink, .card-accent, .card-interactive)
     StatCard   .stat-grid > .stat-tile (.stat-tile-head/-value/-sub)
     Chart      .composition-bar, .bar-chart > .bar-col > .bar-track > .bar (or .stack-bar), .legend, .metric-value
     Badge      .pill + .pill-positive|negative|warning|income|neutral|accent|ink
     Highlight  <highlight>word</highlight> -> .highlight (+ .highlight-accent)
     NavPill    .nav-pill (+ .active), .nav-pill-group; Bootstrap .nav-pills mapped
     Input      .form-control, .form-select, .form-check-input, .input-group-text, .form-label
     Table      .table-card > .table (+ .table-empty, .cell-primary, .cell-secondary, .num)
     Modal      .dialog-overlay > .dialog-card (.dialog-header/-title/-close/-body/-footer)
     Toast      .toast-stack > .toast (.toast-positive|negative)  [_Toasts partial]
     Alert      .alert-success|danger|warning|info (inline, non-dismissible by default)
     EmptyState .empty-state (.empty-state-icon/-title/-text)    [_EmptyState partial]
   Density: add .density-compact to <body> (Admin) for tighter spacing and
   smaller shadows across every component.
   ========================================================================== */

/* ---- Shared "press" interaction ------------------------------------------
   Interactive elements sit on a hard offset shadow and travel toward it when
   hovered/pressed: half way on hover, all the way (shadow gone) on press. */
.btn,
.card-interactive,
.nav-pill {
    transition:
        transform var(--press-duration) var(--press-ease),
        box-shadow var(--press-duration) var(--press-ease),
        background-color var(--press-duration) var(--press-ease),
        color var(--press-duration) var(--press-ease);
}

@media (prefers-reduced-motion: reduce) {
    /* Keep the state change (shadow shrinks), drop the travel. */
    .btn:hover, .btn:active, .btn.active,
    .card-interactive:hover, .card-interactive:active,
    .nav-pill:hover, .nav-pill:active {
        transform: none !important;
    }
}

/* =========================================================================
   Button
   ========================================================================= */
.btn {
    --bs-btn-padding-x: 1.15rem;
    --bs-btn-padding-y: .55rem;
    --bs-btn-font-family: var(--font-body);
    --bs-btn-font-size: .92rem;
    --bs-btn-font-weight: 700;
    --bs-btn-line-height: 1.25;
    --bs-btn-border-width: var(--border-width-subtle);
    --bs-btn-border-radius: var(--radius-pill);
    --bs-btn-box-shadow: none;
    --bs-btn-focus-box-shadow: none;
    --bs-btn-disabled-opacity: .5;
    --btn-shadow: var(--shadow-small);
    --btn-press: var(--shadow-sm);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5em;
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    color: var(--bs-btn-color);
    background-color: var(--bs-btn-bg);
    border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
    border-radius: var(--bs-btn-border-radius);
    box-shadow: var(--btn-shadow);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    -webkit-appearance: none;
    appearance: none;
}

.btn:hover {
    color: var(--bs-btn-hover-color);
    background-color: var(--bs-btn-hover-bg);
    border-color: var(--bs-btn-hover-border-color);
    transform: translate(calc(var(--btn-press) / 2), calc(var(--btn-press) / 2));
    box-shadow: calc(var(--btn-press) / 2) calc(var(--btn-press) / 2) 0 0 var(--shadow-color);
    text-decoration: none;
}

.btn:active,
.btn.active,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
    color: var(--bs-btn-active-color);
    background-color: var(--bs-btn-active-bg);
    border-color: var(--bs-btn-active-border-color);
    transform: translate(var(--btn-press), var(--btn-press));
    box-shadow: var(--shadow-pressed);
}

.btn:focus-visible {
    outline: var(--border-width) solid var(--focus-color);
    outline-offset: 3px;
    box-shadow: var(--btn-shadow);
}

.btn:disabled,
.btn.disabled {
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none;
    box-shadow: none;
}

/* Every variant states all its own states, so Bootstrap's own .btn rules
   (which read these same variables) and ours agree in either cascade order. */
.btn-primary {
    --bs-btn-color: var(--accent-ink);
    --bs-btn-bg: var(--accent);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--accent-ink);
    --bs-btn-hover-bg: var(--accent);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-active-color: var(--accent-ink);
    --bs-btn-active-bg: var(--accent);
    --bs-btn-active-border-color: var(--border-color);
    --bs-btn-disabled-color: var(--accent-ink);
    --bs-btn-disabled-bg: var(--accent);
    --bs-btn-disabled-border-color: var(--border-color);
}

/* Solid-ink call to action (Landing hero/nav). Inverts in dark mode. */
.btn-ink {
    --bs-btn-color: var(--highlight-fg);
    --bs-btn-bg: var(--highlight-bg);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--highlight-fg);
    --bs-btn-hover-bg: var(--highlight-bg);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-active-color: var(--highlight-fg);
    --bs-btn-active-bg: var(--highlight-bg);
    --bs-btn-active-border-color: var(--border-color);
    /* In dark mode an ink button is paper-colored; --cta-shadow-color switches its shadow to
       the accent there so it doesn't merge into an off-white shadow of the same color. */
    --btn-shadow: var(--shadow-sm) var(--shadow-sm) 0 0 var(--cta-shadow-color);
}
.btn-ink:hover { box-shadow: calc(var(--btn-press) / 2) calc(var(--btn-press) / 2) 0 0 var(--cta-shadow-color); }

.btn-secondary {
    --bs-btn-color: var(--fg);
    --bs-btn-bg: var(--surface);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--fg);
    --bs-btn-hover-bg: var(--surface);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-active-color: var(--fg);
    --bs-btn-active-bg: var(--surface);
    --bs-btn-active-border-color: var(--border-color);
    --bs-btn-disabled-color: var(--fg-muted);
    --bs-btn-disabled-bg: var(--surface);
    --bs-btn-disabled-border-color: var(--border-color);
}

.btn-ghost,
.btn-link {
    --bs-btn-color: var(--fg);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--fg);
    --bs-btn-hover-bg: var(--fg-soft);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--fg);
    --bs-btn-active-bg: var(--fg-soft);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: var(--fg-muted);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: transparent;
    --btn-shadow: none;
    text-decoration: none;
}
.btn-ghost:hover, .btn-ghost:active, .btn-link:hover, .btn-link:active { transform: none; box-shadow: none; }
.btn-link { text-decoration: underline; text-underline-offset: 3px; }

.btn-danger {
    --bs-btn-color: var(--negative-ink);
    --bs-btn-bg: var(--negative);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-hover-color: var(--negative-ink);
    --bs-btn-hover-bg: var(--negative);
    --bs-btn-hover-border-color: var(--border-color);
    --bs-btn-active-color: var(--negative-ink);
    --bs-btn-active-bg: var(--negative);
    --bs-btn-active-border-color: var(--border-color);
    --bs-btn-disabled-color: var(--negative-ink);
    --bs-btn-disabled-bg: var(--negative);
    --bs-btn-disabled-border-color: var(--border-color);
}

.btn-sm {
    --bs-btn-padding-x: .8rem;
    --bs-btn-padding-y: .32rem;
    --bs-btn-font-size: .8rem;
    --btn-press: var(--shadow-xs);
    --btn-shadow: var(--shadow-xs) var(--shadow-xs) 0 0 var(--shadow-color);
}

.btn-lg {
    --bs-btn-padding-x: 1.6rem;
    --bs-btn-padding-y: .85rem;
    --bs-btn-font-size: 1.05rem;
    --btn-shadow: var(--shadow);
    --btn-press: var(--shadow-x);
}

/* Ghost/link buttons never carry a shadow, whatever size modifier comes after them. */
.btn-ghost.btn-sm, .btn-ghost.btn-lg, .btn-link.btn-sm, .btn-link.btn-lg { --btn-shadow: none; }

.btn-block { display: flex; width: 100%; }

/* Bootstrap's close button is a background-image "x" that can't follow
   tokens; redraw it with currentColor. */
.btn-close {
    --bs-btn-close-bg: none;
    --bs-btn-close-opacity: 1;
    --bs-btn-close-hover-opacity: 1;
    --bs-btn-close-focus-shadow: none;
    position: relative;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: transparent;
    color: currentColor;
    cursor: pointer;
}
.btn-close::before, .btn-close::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 55%;
    height: var(--border-width-subtle);
    background: currentColor;
}
.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { background: var(--fg-soft); }

/* =========================================================================
   Card
   ========================================================================= */
.card {
    --bs-card-bg: var(--surface);
    --bs-card-color: var(--fg);
    --bs-card-border-width: var(--border-width);
    --bs-card-border-color: var(--border-color);
    --bs-card-border-radius: var(--radius);
    --bs-card-inner-border-radius: calc(var(--radius) - var(--border-width));
    --bs-card-cap-bg: var(--surface);
    --bs-card-cap-color: var(--fg);
    --bs-card-spacer-x: var(--card-pad, var(--space-5));
    --bs-card-spacer-y: var(--card-pad, var(--space-5));
    --bs-card-cap-padding-x: var(--card-pad, var(--space-5));
    --bs-card-cap-padding-y: var(--space-3);
    --bs-card-box-shadow: var(--shadow);

    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    color: var(--bs-card-color);
    background-color: var(--bs-card-bg);
    border: var(--bs-card-border-width) solid var(--bs-card-border-color);
    border-radius: var(--bs-card-border-radius);
    box-shadow: var(--card-shadow, var(--shadow));
}

.card-body { padding: var(--bs-card-spacer-y) var(--bs-card-spacer-x); }
.card-header {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    background: var(--bs-card-cap-bg);
    border-bottom: var(--border-subtle);
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    letter-spacing: var(--tracking-display);
}
.card-footer {
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
    background: var(--bs-card-cap-bg);
    border-top: var(--divider);
}

.card-flat { --card-shadow: none; }
/* Nested cards (e.g. the mobile row list inside a table card) stay calm: no shadow per row. */
.card .card { --card-shadow: none; --bs-card-border-width: var(--border-width-subtle); }
.card-ink { --bs-card-bg: var(--highlight-bg); --bs-card-color: var(--highlight-fg); background: var(--highlight-bg); color: var(--highlight-fg); }
.card-ink h1, .card-ink h2, .card-ink h3, .card-ink p { color: var(--highlight-fg); }
.card-accent { --bs-card-bg: var(--accent); --bs-card-color: var(--accent-ink); background: var(--accent); color: var(--accent-ink); }
.card-accent h1, .card-accent h2, .card-accent h3, .card-accent p { color: var(--accent-ink); }
.card-interactive { cursor: pointer; text-decoration: none; color: inherit; }
.card-interactive:hover {
    transform: translate(calc(var(--shadow-x) / 2), calc(var(--shadow-y) / 2));
    box-shadow: calc(var(--shadow-x) / 2) calc(var(--shadow-y) / 2) 0 0 var(--shadow-color);
    color: inherit;
}
.card-interactive:active { transform: translate(var(--shadow-x), var(--shadow-y)); box-shadow: var(--shadow-pressed); }

/* Bootstrap utility shadows on cards follow the hard-shadow language too. */
.shadow-sm { box-shadow: var(--shadow-small) !important; }
.shadow, .shadow-lg { box-shadow: var(--shadow) !important; }
.shadow-none { box-shadow: none !important; }

/* =========================================================================
   StatCard
   ========================================================================= */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--stat-gap, var(--space-5));
}
.stat-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.stat-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.stat-grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1100px) { .stat-grid-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) { .stat-grid-3, .stat-grid-4, .stat-grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .stat-grid, .stat-grid-3, .stat-grid-4, .stat-grid-5 { grid-template-columns: 1fr; } }

.stat-tile {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
    padding: var(--stat-pad, var(--space-5));
    background: var(--surface);
    color: var(--fg);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow, var(--shadow));
}

.stat-tile-head {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.stat-tile-head.income { color: var(--income); }
.stat-tile-head.positive { color: var(--positive); }
.stat-tile-head.negative { color: var(--negative); }

.stat-tile-value {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: .4rem;
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums slashed-zero;
    font-size: var(--stat-value-size, 1.6rem);
    font-weight: 700;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--fg);
}
.stat-tile-value .unit, .stat-tile-value small { font-size: .55em; font-weight: 600; color: var(--fg-muted); }
.stat-tile-value.positive { color: var(--positive); }
.stat-tile-value.negative { color: var(--negative); }
.stat-tile-value.income { color: var(--income); }

.stat-tile-sub { font-size: .8rem; color: var(--fg-muted); }

/* Hero tile: the inverted ink block (one per screen at most). */
.stat-tile-hero { background: var(--highlight-bg); color: var(--highlight-fg); }
.stat-tile-hero .stat-tile-head,
.stat-tile-hero .stat-tile-sub,
.stat-tile-hero .stat-tile-value { color: var(--highlight-fg); }

/* =========================================================================
   Badge (.pill)
   ========================================================================= */
.pill {
    display: inline-flex;
    align-items: center;
    gap: .35em;
    padding: .18em .7em;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .02em;
    white-space: nowrap;
    color: var(--fg);
    background: var(--surface);
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
}
a.pill { text-decoration: none; }
a.pill:hover { text-decoration: underline; }
.pill-positive { color: var(--positive); background: var(--positive-soft); border-color: var(--positive); }
.pill-negative { color: var(--negative); background: var(--negative-soft); border-color: var(--negative); }
.pill-warning { color: var(--warning); background: var(--warning-soft); border-color: var(--warning); }
.pill-income { color: var(--income); background: var(--income-soft); border-color: var(--income); }
.pill-neutral { color: var(--fg-muted); background: var(--fg-soft); border-color: var(--fg-muted); }
.pill-accent { color: var(--accent-ink); background: var(--accent); border-color: var(--border-color); }
.pill-ink { color: var(--highlight-fg); background: var(--highlight-bg); border-color: var(--highlight-bg); }

/* Bootstrap .badge, wherever it still appears, reads the same tokens. */
.badge {
    --bs-badge-font-weight: 700;
    --bs-badge-border-radius: var(--radius-pill);
    --bs-badge-color: var(--fg);
    border: var(--border-subtle);
}

/* =========================================================================
   Chart — pure HTML/CSS charts (App dashboard/portfolio, Admin dashboard).
   Pure HTML/CSS charts. Data-driven sizes arrive as inline custom properties
   (style="--pct: 41%"); every color comes from a token via a .series-* class.
   ========================================================================= */
.composition-bar {
    display: flex;
    height: 18px;
    overflow: hidden;
    border: var(--border-subtle);
    border-radius: var(--radius-pill);
    background: var(--bg);
}
.composition-bar > span { display: block; width: var(--pct); height: 100%; }
.composition-bar > span + span { border-left: var(--border-subtle); }

.series-equity { background: var(--fg); }
.series-bond { background: var(--positive); }
.series-tbill { background: var(--accent); }
.series-fund { background: var(--income); }
.series-income { background: var(--income); }
.series-income-soft { background: var(--income-soft); }
.series-invested { background: var(--fg); }
.series-savings { background: var(--fg-muted); }

/* A bar of several stacked parts, bottom up (App net worth, Admin email). The bar's height is
   --pct of the track; each part's is --h of the bar. */
.stack-bar { display: flex; flex-direction: column-reverse; width: 100%; height: var(--pct); min-height: 2px; overflow: hidden; border: var(--border-width-subtle) solid var(--border-color); border-bottom: 0; border-radius: calc(var(--radius-sm) / 2) calc(var(--radius-sm) / 2) 0 0; }
.stack-bar > span { display: block; width: 100%; height: var(--h); flex: 0 0 auto; }
.stack-bar > span + span { border-bottom: var(--border-width-subtle) solid var(--border-color); }

.legend { display: flex; flex-direction: column; gap: var(--space-1); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.legend-inline { flex-direction: row; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.legend-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) 0; font-size: .88rem; }
.legend-label { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--fg-muted); }
.legend-swatch { display: inline-block; flex-shrink: 0; width: 12px; height: 12px; border: var(--border-width-subtle) solid var(--border-color); border-radius: calc(var(--radius-sm) / 3); }
.legend-value { font-weight: 700; }

.bar-chart { display: flex; align-items: flex-end; gap: var(--space-2); height: var(--chart-height, 140px); }
.bar-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: var(--space-1); height: 100%; }
.bar-track { flex: 1; display: flex; align-items: flex-end; border-bottom: var(--border-subtle); }
.bar {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 3px;
    height: var(--pct);
    overflow: hidden;
    border: var(--border-width-subtle) solid var(--border-color);
    border-bottom: 0;
    border-radius: calc(var(--radius-sm) / 2) calc(var(--radius-sm) / 2) 0 0;
}
.bar > span { display: block; width: 100%; }
.bar > span:first-child { height: var(--split, 100%); }
.bar > span:last-child:not(:first-child) { flex: 1; border-top: var(--border-width-subtle) solid var(--border-color); }
.bar-label { text-align: center; font: 600 .68rem/1.2 var(--font-mono); color: var(--fg-muted); white-space: nowrap; overflow: hidden; }
.chart-caption { margin: var(--space-2) 0 0; font-size: .78rem; color: var(--fg-muted); }

/* Key figures stacked beside a chart (Year in review) */
.metric-stack { display: flex; flex-direction: column; gap: var(--space-5); }
.metric-value { display: block; font: 700 1.55rem/1.15 var(--font-mono); letter-spacing: -0.03em; color: var(--fg); }
.metric-value-sm { font-size: 1.25rem; }
.metric-value .unit { font-size: .55em; font-weight: 600; color: var(--fg-muted); }
.density-compact .metric-value { font-size: 1.35rem; }
.series-active { background: var(--fg); }

/* =========================================================================
   Highlight
   ========================================================================= */
.highlight,
highlight {
    display: inline;
    padding: 0 .14em;
    margin: 0 -.02em;
    background: var(--highlight-bg);
    color: var(--highlight-fg);
    border-radius: calc(var(--radius-sm) / 2);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
.highlight-accent { background: var(--accent); color: var(--accent-ink); }
/* A highlight's background spans the font's whole content box, so a heading that wraps a
   highlight onto a second line needs line-height >= ~1.12 or it paints over the line above. */
:is(h1, h2, h3, .display):has(.highlight) { line-height: 1.22; }

/* =========================================================================
   NavPill
   ========================================================================= */
.nav-pill-group { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

.nav-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .5rem .95rem;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.2;
    color: var(--fg);
    background: transparent;
    border: var(--border-width-subtle) solid transparent;
    border-radius: var(--radius-pill);
    text-decoration: none;
    cursor: pointer;
}
.nav-pill:hover { border-color: var(--border-color); color: var(--fg); text-decoration: none; }
.nav-pill.active,
.nav-pill[aria-current="page"] {
    color: var(--accent-ink);
    background: var(--accent);
    border-color: var(--border-color);
    box-shadow: var(--shadow-small);
}
.nav-pill.active:hover { transform: translate(calc(var(--shadow-sm) / 2), calc(var(--shadow-sm) / 2)); box-shadow: calc(var(--shadow-sm) / 2) calc(var(--shadow-sm) / 2) 0 0 var(--shadow-color); }
.nav-pill svg, .nav-pill i { flex-shrink: 0; }

/* Bootstrap .nav-pills (tabs on settings pages) -> same look. */
.nav-pills {
    --bs-nav-pills-border-radius: var(--radius-pill);
    --bs-nav-pills-link-active-color: var(--accent-ink);
    --bs-nav-pills-link-active-bg: var(--accent);
    --bs-nav-link-color: var(--fg);
    --bs-nav-link-hover-color: var(--fg);
    gap: var(--space-1);
}
.nav-pills .nav-link {
    border: var(--border-width-subtle) solid transparent;
    font-weight: 600;
    color: var(--fg);
}
.nav-pills .nav-link:hover { border-color: var(--border-color); }
.nav-pills .nav-link.active { border-color: var(--border-color); box-shadow: var(--shadow-small); }

/* Underline tabs (Bootstrap .nav-tabs) */
.nav-tabs { --bs-nav-tabs-border-width: 0; border-bottom: var(--border-subtle); gap: var(--space-5); }
.nav-tabs .nav-link {
    margin-bottom: calc(-1 * var(--border-width-subtle));
    padding: .5rem 0;
    color: var(--fg-muted);
    background: transparent;
    border: 0;
    border-bottom: var(--border-width) solid transparent;
    border-radius: 0;
    font-weight: 600;
}
.nav-tabs .nav-link:hover { color: var(--fg); border-bottom-color: var(--fg-muted); }
.nav-tabs .nav-link.active { color: var(--fg); background: transparent; border-bottom-color: var(--fg); }

/* =========================================================================
   Input / Select
   ========================================================================= */
.form-label { font-size: .82rem; font-weight: 700; color: var(--fg); margin-bottom: .35rem; }

.form-control,
.form-select {
    display: block;
    width: 100%;
    padding: .6rem .85rem;
    font: inherit;
    font-size: .95rem;
    line-height: 1.4;
    color: var(--fg);
    background-color: var(--surface);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    box-shadow: none;
    transition: box-shadow var(--press-duration) var(--press-ease);
}
.form-control::placeholder { color: var(--fg-muted); opacity: 1; }
.form-control:focus,
.form-select:focus {
    color: var(--fg);
    background-color: var(--surface);
    border-color: var(--border-color);
    outline: none;
    box-shadow: var(--shadow-small);
}
.form-control:disabled, .form-control[readonly], .form-select:disabled {
    background-color: var(--bg);
    color: var(--fg-muted);
    opacity: 1;
}
.form-control-sm, .form-select-sm { padding: .35rem .65rem; font-size: .85rem; }
.form-control-lg, .form-select-lg { padding: .8rem 1rem; font-size: 1.05rem; }

/* Native select arrow, drawn from currentColor so it follows the theme. */
.form-select {
    --bs-form-select-bg-img: none;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 2.2rem;
    background-image:
        linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 1.05rem) 55%, calc(100% - .75rem) 55%;
    background-size: .3rem .3rem, .3rem .3rem;
    background-repeat: no-repeat;
}

.is-invalid.form-control, .is-invalid.form-select, .input-validation-error { border-color: var(--negative) !important; }
.invalid-feedback, .field-validation-error, .validation-summary-errors { color: var(--negative); font-size: .82rem; font-weight: 600; }

.input-group-text {
    color: var(--fg);
    background-color: var(--bg);
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    font-weight: 600;
}
.input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; }

/* Checkboxes, radios and switches */
.form-check-input {
    --bs-form-check-bg: var(--surface);
    width: 1.15em;
    height: 1.15em;
    flex-shrink: 0;
    vertical-align: -.2em;
    background-color: var(--surface);
    border: var(--border-subtle);
    border-radius: calc(var(--radius-sm) / 2);
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.form-check-input:checked {
    background-color: var(--accent);
    border-color: var(--border-color);
}
.form-check-input:focus { box-shadow: var(--shadow-small); border-color: var(--border-color); }
.form-check-input[type="checkbox"]:checked {
    --bs-form-check-bg-image: none;
    background-image: linear-gradient(var(--accent-ink), var(--accent-ink));
    background-size: 45% 45%;
    background-position: center;
    background-repeat: no-repeat;
}
.form-check-input[type="radio"] { border-radius: var(--radius-pill); }
.form-check-input[type="radio"]:checked {
    --bs-form-check-bg-image: none;
    background-image: radial-gradient(circle, var(--accent-ink) 32%, transparent 36%);
}
.form-switch .form-check-input {
    --bs-form-switch-bg: none;
    width: 2.4em;
    border-radius: var(--radius-pill);
    background-image: radial-gradient(circle, var(--fg) 34%, transparent 38%);
    background-position: left center;
    background-size: auto 100%;
    background-repeat: no-repeat;
}
.form-switch .form-check-input:checked {
    background-image: radial-gradient(circle, var(--accent-ink) 34%, transparent 38%);
    background-position: right center;
}
.form-check-label { color: var(--fg); }

/* =========================================================================
   Table
   ========================================================================= */
.table-card,
.table-responsive {
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--card-shadow, var(--shadow));
    overflow: hidden;
}
.table-responsive { overflow-x: auto; }
/* Below this width a table scrolls horizontally instead of crushing its columns. */
.table-responsive > .table { min-width: 620px; }
/* A table inside a card uses the card's frame, not a second border/shadow. */
.card .table-responsive, .card .table-card { border: 0; border-radius: 0; box-shadow: none; }
.card:has(> .table-responsive, > .card-body > .table-responsive:only-child) { overflow: hidden; }

.table {
    --bs-table-bg: var(--surface);
    --bs-table-color: var(--fg);
    --bs-table-border-color: var(--divider-color);
    --bs-table-striped-bg: var(--fg-soft);
    --bs-table-striped-color: var(--fg);
    --bs-table-hover-bg: var(--fg-soft);
    --bs-table-hover-color: var(--fg);
    --bs-table-active-bg: var(--fg-soft);
    width: 100%;
    margin: 0;
    color: var(--fg);
    border-collapse: collapse;
}
.table > :not(caption) > * > * {
    background-color: var(--bs-table-bg);
    color: var(--bs-table-color);
    box-shadow: none;
}
.table th {
    padding: var(--table-cell-y, .75rem) var(--table-cell-x, 1.1rem);
    text-align: left;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--fg-muted);
    background-color: var(--bg);
    border-bottom: var(--border-subtle);
}
.table td {
    padding: var(--table-cell-y, .85rem) var(--table-cell-x, 1.1rem);
    vertical-align: middle;
    font-size: .9rem;
    border-bottom: var(--divider);
}
.table th.text-end, .table td.text-end { text-align: right; }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover > * { --bs-table-bg: var(--fg-soft); }
.table td.num, .table th.num { text-align: right; }
.table-empty { padding: var(--space-7) var(--space-5) !important; text-align: center; color: var(--fg-muted); }

.cell-primary { font-weight: 700; color: var(--fg); }
.cell-secondary { font-size: .8rem; color: var(--fg-muted); }

/* =========================================================================
   Modal (dialog)
   Hand-drawn rather than Bootstrap's .modal (no JS-injected backdrop; see
   App's _FeedbackModal). Toggle .show on the overlay.
   ========================================================================= */
.dialog-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1090;
    align-items: center;
    justify-content: center;
    padding: var(--space-5);
    background: var(--overlay);
}
.dialog-overlay.show { display: flex; }

.dialog-card {
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--surface);
    color: var(--fg);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-x) var(--shadow-y) 0 0 var(--shadow-color);
}

.dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
    border-bottom: var(--border-subtle);
}
.dialog-title { margin: 0; font-size: 1.35rem; }
.dialog-close {
    display: inline-flex;
    flex-shrink: 0;
    padding: 6px;
    color: var(--fg);
    background: transparent;
    border: var(--border-width-subtle) solid transparent;
    border-radius: var(--radius-pill);
    cursor: pointer;
}
.dialog-close:hover { border-color: var(--border-color); }
.dialog-body { padding: var(--space-5); font-size: .93rem; color: var(--fg); }
.dialog-body p { margin-bottom: .9rem; }
.dialog-body ol { padding-left: 1.1rem; }
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5) var(--space-5);
}

/* Bootstrap .modal mapped onto the same look, should one ever be used. */
.modal {
    --bs-modal-bg: var(--surface);
    --bs-modal-color: var(--fg);
    --bs-modal-border-width: var(--border-width);
    --bs-modal-border-color: var(--border-color);
    --bs-modal-border-radius: var(--radius);
    --bs-modal-box-shadow: var(--shadow);
    --bs-modal-header-border-color: var(--border-color);
    --bs-modal-footer-border-color: var(--divider-color);
}
.modal-content { box-shadow: var(--shadow); }
.modal-backdrop { --bs-backdrop-bg: var(--overlay); --bs-backdrop-opacity: 1; background: var(--overlay); }

/* =========================================================================
   Toast  (Views/Shared/_Toasts.cshtml + js/components.js)
   ========================================================================= */
.toast-stack {
    position: fixed;
    right: var(--space-5);
    bottom: var(--space-5);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    width: min(380px, calc(100vw - 2 * var(--space-4)));
    pointer-events: none;
}
@media (max-width: 600px) {
    .toast-stack { right: var(--space-4); left: var(--space-4); bottom: auto; top: calc(var(--space-4) + var(--topbar-height, 0px)); width: auto; }
}

.toast {
    --bs-toast-bg: var(--surface);
    --bs-toast-color: var(--fg);
    --bs-toast-border-width: var(--border-width);
    --bs-toast-border-color: var(--border-color);
    --bs-toast-border-radius: var(--radius);
    --bs-toast-box-shadow: var(--shadow);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    width: 100%;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
    color: var(--fg);
    background: var(--surface);
    border: var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font-size: .9rem;
    pointer-events: auto;
    animation: toast-in 180ms var(--press-ease);
}
.toast.hide, .toast.is-leaving { opacity: 0; transform: translateY(6px); transition: opacity 160ms, transform 160ms; }
.toast-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: var(--radius-pill);
    border: var(--border-subtle);
    background: var(--surface);
}
.toast-positive .toast-icon { background: var(--positive); color: var(--positive-ink); border-color: var(--border-color); }
.toast-negative .toast-icon { background: var(--negative); color: var(--negative-ink); border-color: var(--border-color); }
.toast-content { flex: 1; min-width: 0; padding-top: .2rem; }
.toast-title { font-weight: 800; margin: 0; }
.toast-text { margin: 0; color: var(--fg-muted); }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   Alert (inline)
   ========================================================================= */
.alert {
    --bs-alert-border-radius: var(--radius);
    --bs-alert-border: var(--border-subtle);
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    position: relative;
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    color: var(--fg);
    background: var(--surface);
    border: var(--border-subtle);
    border-left-width: calc(var(--border-width) * 2);
    border-radius: var(--radius);
    font-size: .92rem;
}
.alert-success { background: var(--positive-soft); border-color: var(--positive); color: var(--fg); }
.alert-danger { background: var(--negative-soft); border-color: var(--negative); color: var(--fg); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning); color: var(--fg); }
.alert-info, .alert-secondary, .alert-light, .alert-primary { background: var(--fg-soft); border-color: var(--border-color); color: var(--fg); }
.alert .alert-icon { flex-shrink: 0; font-size: 1.1rem; line-height: 1.3; }
.alert-success .alert-icon { color: var(--positive); }
.alert-danger .alert-icon { color: var(--negative); }
.alert-warning .alert-icon { color: var(--warning); }
.alert .btn-close { margin-left: auto; }
.alert-heading, .alert strong { font-weight: 800; }

/* =========================================================================
   StatusIcon — the big round icon at the top of a confirmation/status card
   ========================================================================= */
.status-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 4.5rem;
    height: 4.5rem;
    margin-bottom: var(--space-4);
    font-size: 1.8rem;
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-small);
    background: var(--surface);
    color: var(--fg);
}
.status-icon svg { width: 2rem; height: 2rem; }
.status-icon-positive { background: var(--positive); color: var(--positive-ink); }
.status-icon-negative { background: var(--negative); color: var(--negative-ink); }
.status-icon-warning { background: var(--accent); color: var(--accent-ink); }
.status-icon-ink { background: var(--highlight-bg); color: var(--highlight-fg); }

/* =========================================================================
   EmptyState  (Views/Shared/_EmptyState.cshtml)
   ========================================================================= */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
    padding: var(--space-7) var(--space-5);
    background: var(--surface);
    border: var(--border-width-subtle) dashed var(--border-color);
    border-radius: var(--radius);
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.25rem;
    height: 3.25rem;
    margin-bottom: var(--space-1);
    color: var(--accent-ink);
    background: var(--accent);
    border: var(--border);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-small);
}
.empty-state-icon svg { width: 1.4rem; height: 1.4rem; }
.empty-state-title { margin: 0; font-size: 1.25rem; }
.empty-state-text { margin: 0; max-width: 42ch; color: var(--fg-muted); font-size: .93rem; }
.empty-state .btn { margin-top: var(--space-2); }

/* =========================================================================
   Logo (_LogoMark / _LogoLockup)
   ========================================================================= */
.logo-lockup { display: inline-flex; align-items: center; gap: .55rem; color: var(--fg); text-decoration: none; }
.logo-mark { flex-shrink: 0; display: block; }
.logo-mark-tile { fill: var(--surface); stroke: var(--border-color); stroke-width: 12; }
.logo-mark-ring { fill: none; stroke: var(--fg); stroke-width: 20; stroke-linecap: round; }
.logo-mark-seed { fill: var(--accent); stroke: var(--border-color); stroke-width: 6; }
.logo-wordmark {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: 1.3rem;
    letter-spacing: var(--tracking-display);
    line-height: 1;
    color: var(--fg);
    white-space: nowrap;
}
.logo-tag {
    padding: .15em .55em;
    font: 700 .62rem/1.3 var(--font-mono);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--highlight-fg);
    background: var(--highlight-bg);
    border-radius: var(--radius-pill);
}

/* =========================================================================
   Error page (_ErrorPage)
   ========================================================================= */
.error-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-6);
    padding: var(--space-6) var(--space-4);
}
.error-page-brand { text-decoration: none; }
.error-page-card {
    width: 100%;
    max-width: 520px;
    padding: var(--space-7) var(--space-6);
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}
.error-page-mark { margin-bottom: var(--space-2); }
.error-page-title { margin: var(--space-2) 0 0; font-size: clamp(2rem, 6vw, 2.8rem); }
.error-page-lede { margin: 0; max-width: 38ch; color: var(--fg-muted); }
.error-page-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin-top: var(--space-3); }
.error-page-meta { width: 100%; margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--divider); display: flex; flex-direction: column; align-items: center; gap: var(--space-3); }
.error-page-ref { margin: 0; font-size: .82rem; color: var(--fg-muted); }
.error-page-report { width: 100%; text-align: left; }
.error-page-report[hidden] { display: none; }
.error-page-report-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.error-page-done { margin: 0; font-weight: 600; color: var(--positive); }
@media (prefers-reduced-motion: no-preference) {
    .error-page-mark .logo-mark-seed { animation: error-seed 3.2s ease-in-out infinite; transform-origin: 100px 100px; }
}
@keyframes error-seed { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* =========================================================================
   Page header (shared title row for App/Admin pages)
   ========================================================================= */
.page-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin-bottom: var(--space-6);
}
.page-title { margin: 0 0 var(--space-1); font-size: clamp(1.7rem, 2.6vw, 2.25rem); }
.page-subtitle { margin: 0; color: var(--fg-muted); font-size: .95rem; }
.page-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.section-title { margin: var(--space-7) 0 var(--space-4); font-size: 1.3rem; }

/* Dropdown menus (Bootstrap) */
.dropdown-menu {
    --bs-dropdown-bg: var(--surface);
    --bs-dropdown-color: var(--fg);
    --bs-dropdown-border-color: var(--border-color);
    --bs-dropdown-border-width: var(--border-width-subtle);
    --bs-dropdown-border-radius: var(--radius-sm);
    --bs-dropdown-box-shadow: var(--shadow-small);
    --bs-dropdown-link-color: var(--fg);
    --bs-dropdown-link-hover-color: var(--fg);
    --bs-dropdown-link-hover-bg: var(--fg-soft);
    --bs-dropdown-link-active-color: var(--accent-ink);
    --bs-dropdown-link-active-bg: var(--accent);
    --bs-dropdown-header-color: var(--fg-muted);
    --bs-dropdown-divider-bg: var(--divider-color);
    box-shadow: var(--shadow-small);
    padding: var(--space-1);
}
.dropdown-item { border-radius: calc(var(--radius-sm) / 1.5); font-weight: 500; }
.dropdown-toggle::after { display: none; }

/* Tooltips */
.tooltip { --bs-tooltip-bg: var(--highlight-bg); --bs-tooltip-color: var(--highlight-fg); --bs-tooltip-border-radius: var(--radius-sm); --bs-tooltip-opacity: 1; }

/* Progress bars */
.progress {
    --bs-progress-bg: var(--bg);
    --bs-progress-bar-bg: var(--fg);
    --bs-progress-border-radius: var(--radius-pill);
    border: var(--border-subtle);
}

/* =========================================================================
   Density
   ========================================================================= */
.density-compact {
    --card-pad: var(--space-4);
    --stat-pad: var(--space-4);
    --stat-gap: var(--space-4);
    --stat-value-size: 1.35rem;
    --card-shadow: var(--shadow-small);
    --table-cell-y: .55rem;
    --table-cell-x: .85rem;
}
.density-compact .page-header { margin-bottom: var(--space-5); }
.density-compact .page-title { font-size: clamp(1.45rem, 2vw, 1.8rem); }
.density-compact .section-title { margin: var(--space-6) 0 var(--space-3); font-size: 1.1rem; }