/* Shared Munibase Civic OS primitives. Loaded after MudBlazor and before app-specific overrides. */

:root {
    --muni-space-1: 4px;
    --muni-space-2: 8px;
    --muni-space-3: 12px;
    --muni-space-4: 16px;
    --muni-space-5: 24px;
    --muni-space-6: 32px;
    --muni-space-7: 48px;
    --muni-space-8: 64px;
    --muni-page-max: 1360px;
    --muni-serif: "Libre Caslon Text", Georgia, "Times New Roman", serif;
    --muni-sans: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --muni-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
    --muni-signature: "lindsey-signature", "Caveat", cursive;
    /* Wave 18 — display register used only by civic-broadsheet
       page titles (§B knob 2, public cluster). Body type stays Caslon
       everywhere; Instrument Serif never replaces it. */
    --muni-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --muni-ease: cubic-bezier(0.2, 0, 0.1, 1);
    --muni-paper-noise: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.035 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

body {
    font-family: var(--muni-sans);
    background-color: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    color: var(--mud-palette-text-primary);
}

.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--muni-serif);
    letter-spacing: 0;
    text-wrap: balance;
}

.mud-typography-caption,
.mud-typography-overline,
.muni-mono {
    font-family: var(--muni-mono);
    font-variant-numeric: tabular-nums;
}

.mud-button-root,
.mud-input,
.mud-input-control,
.mud-input-label,
.mud-select,
.mud-table,
.mud-table-cell {
    font-family: var(--muni-sans);
}

.mud-button-root,
.mud-chip,
.mud-paper,
.mud-card,
.mud-dialog {
    border-radius: 2px !important;
}

.mud-button-root {
    box-shadow: none !important;
    letter-spacing: 1.4px;
}

.mud-input-outlined .mud-input-outlined-border {
    border-radius: 2px;
}

/* Scope global focus ring to actual interactive elements. Programmatic
   focus on non-interactive elements (page headings, MuniPage masthead
   on initial load / route change) was leaking the brass outline onto
   the H1 — kill that without losing keyboard nav affordances on real
   controls. Per-component .muni-*:focus-visible rules below keep
   their tighter overrides.

   `tabindex="-1"` is excluded because FocusOnNavigate (Routes.razor)
   sets it on the H1 every navigation so screen readers land on the
   page heading. That focus is *programmatic*, not user-driven, and
   should not surface visually as a focus ring. Other tabindex values
   ("0" for skip-targets in the keyboard tab order, "1+" for explicit
   ordering) still get the ring. */
:where(a, button, input, select, textarea, summary, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--mud-palette-secondary);
    outline-offset: 3px;
}

/* Suppress the browser-default focus ring on programmatic skip-targets.
   FocusOnNavigate (Routes.razor) sets `tabindex="-1"` on the page H1
   each route so screen readers land on the heading; the focus is for
   assistive tech only and shouldn't surface visually. Without this,
   the user-agent stylesheet paints a default blue/navy ring even
   though the civic rule above correctly skips this element. */
[tabindex="-1"]:focus,
[tabindex="-1"]:focus-visible {
    outline: none;
}

.muni-seal {
    display: block;
    flex: 0 0 auto;
}

.muni-seal__outer,
.muni-seal__hairline,
.muni-seal__medallion-rule,
.muni-seal__ticks line {
    fill: none;
    stroke: var(--mud-palette-text-primary);
}

.muni-seal__outer {
    stroke-width: 1.2;
}

.muni-seal__hairline,
.muni-seal__medallion-rule {
    stroke-width: 0.6;
}

.muni-seal__ticks line {
    stroke-width: 0.8;
}

.muni-seal__medallion {
    fill: var(--mud-palette-primary);
}

.muni-seal text {
    font-family: var(--muni-serif);
    font-size: 22px;
    font-weight: 600;
    fill: var(--mud-palette-primary-text);
}

.muni-seal__community-dot {
    fill: var(--mud-palette-secondary);
}

.signature {
    display: inline-block;
    font-family: var(--muni-signature);
    line-height: 0.9;
    white-space: nowrap;
}

.signature-clerk,
.signature-registrar {
    font-family: "lindsey-signature", "Caveat", cursive;
}

.signature-treasurer {
    font-family: "Homemade Apple", "Caveat", cursive;
}

.signature-mayor {
    font-family: "Kalam", "Caveat", cursive;
}

.signature-sheriff {
    font-family: "Caveat", cursive;
}

.muni-stamp {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
    color: var(--mud-palette-secondary);
    font-family: var(--muni-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1.1;
    text-transform: uppercase;
    transform: rotate(var(--muni-stamp-rotation, -2.4deg));
}

/* NOTE: Two-class specificity (.muni-stamp.muni-stamp--*) is intentional.
   A second .muni-stamp base rule lives further down (line ~5353, from the
   Citizen Dossier stamp family) that sets color: var(--mud-palette-text-primary)
   and overrides single-class variant rules via cascade order. Bumping these
   variants to two-class specificity (0,2,0 vs the second base's 0,1,0) lets
   them win regardless of source order. */

.muni-stamp.muni-stamp--primary {
    color: var(--mud-palette-primary);
}

.muni-stamp.muni-stamp--secondary {
    color: var(--mud-palette-secondary);
}

.muni-stamp.muni-stamp--success {
    color: var(--muni-stamp-success);
}

.muni-stamp.muni-stamp--info {
    color: var(--mud-palette-info);
}

.muni-stamp.muni-stamp--warning {
    color: var(--muni-stamp-warning);
}

.muni-stamp.muni-stamp--error {
    color: var(--mud-palette-error);
}

/* Muted — terminal/closed/retired states. Ink-mute, no semantic urgency.
   Lifecycle endpoints like Retired vehicles, Closed groups, Archived records. */
.muni-stamp.muni-stamp--muted {
    color: var(--mud-palette-text-secondary);
}

.muni-page,
.muni-admin-page {
    max-width: var(--muni-page-max);
}

.muni-page__masthead,
.muni-admin-page .muni-page__masthead {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--muni-space-4);
    align-items: end;
    padding-bottom: var(--muni-space-5);
    border-bottom: 1px solid var(--mud-palette-text-primary);
}

.muni-page__masthead-left {
    min-width: 0;
}

.muni-page__masthead-right {
    display: grid;
    justify-items: end;
    align-content: end;
    gap: var(--muni-space-2);
}

.muni-page__eyebrow {
    color: var(--mud-palette-primary);
}

.muni-page__title-row {
    min-width: 0;
}

.muni-page__title {
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-page__subtitle {
    max-width: 78ch;
    color: var(--mud-palette-text-secondary);
}

.muni-page__last-edit {
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--muni-space-2);
}

.muni-page__action-row {
    padding-top: var(--muni-space-4);
    border-top: 1px solid var(--mud-palette-divider);
}

.muni-page__body {
    padding-top: var(--muni-space-5);
    display: grid;
    gap: var(--muni-space-7);
}

/* MuniSection — ledger-legend pattern. Per Page Composition § 02 / § 07. */
.muni-section {
    display: grid;
    gap: 0;
    margin: 0;
}

.muni-section--bordered {
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
}

.muni-section--audit.muni-section--bordered {
    border-color: var(--mud-palette-error);
}

.muni-section--danger.muni-section--bordered {
    border-color: var(--mud-palette-error);
}

.muni-section__legend {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: 4px;
    /* Cushion below the legend rule so the next element doesn't sit
       flush against the §-letter title. Bordered sections override
       this since their rule already has body padding doing the work. */
    margin-bottom: var(--muni-space-3);
}

.muni-section--bordered > .muni-section__legend {
    margin-bottom: 0;
}

.muni-section--bordered > .muni-section__legend {
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding: 8px 14px;
}

.muni-section--audit.muni-section--bordered > .muni-section__legend {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
    border-bottom-color: var(--mud-palette-error);
}

.muni-section__legend-left {
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.muni-section--audit > .muni-section__legend .muni-section__legend-left {
    color: var(--mud-palette-error);
}

.muni-section__tag {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    flex: 0 0 auto;
}

.muni-section--audit > .muni-section__legend .muni-section__tag {
    color: var(--mud-palette-text-secondary);
}

.muni-section__title {
    margin: 0;
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.muni-section__required {
    margin-left: 6px;
    color: var(--mud-palette-error);
    font-family: var(--muni-mono);
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1;
}

.muni-section__legend-right {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-section__legend-right--actions {
    display: inline-flex;
    gap: var(--muni-space-1);
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--muni-sans);
    font-size: 0.78rem;
}

.muni-section__legend-right--audit,
.muni-section__legend-right--danger {
    color: var(--mud-palette-error);
}

.muni-section__body {
    min-width: 0;
    display: grid;
    gap: 0;
}

.muni-section--bordered > .muni-section__body {
    padding: 4px 14px 8px;
}

/* legacy admin section unchanged — keep its old header/rule chrome */
.muni-admin-section {
    display: grid;
    gap: var(--muni-space-3);
}

.muni-admin-section__header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--muni-space-4);
    align-items: end;
}

.muni-admin-section__eyebrow {
    color: var(--mud-palette-text-secondary);
}

.muni-admin-section__title {
    margin: 0;
}

.muni-admin-section__rule {
    border-top: 1px solid var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-divider-light);
    height: 4px;
}

.muni-admin-section__body {
    min-width: 0;
}

/* MuniRow — stacked anatomy per Form Patterns § 06.
       [mono-caps label · optional number · optional req *]
       [value / control on a 1.5px ink underline, full width]
       [italic serif help, full width]
   The civic input override (lower in this file) re-skins MudBlazor's
   outlined input to underline-only inside the .muni-row__control slot. */

.muni-row {
    display: grid;
    gap: 6px;
    padding: 14px 0;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.muni-row:last-child {
    border-bottom: none;
}

.muni-row__label-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--muni-mono);
    font-size: 0.59rem; /* ≈ 9.5px at 16px root, per Form Patterns § 02 */
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1;
}

.muni-row__number {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
    flex: 0 0 auto;
}

.muni-row__label-text {
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
    min-width: 0;
}

.muni-row__required {
    color: var(--mud-palette-error);
    font-weight: 700;
    font-size: 0.69rem; /* ≈ 11px per spec — slightly larger than the label */
    line-height: 1;
}

.muni-row__control {
    min-width: 0;
}

.muni-row__help {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    max-width: 78ch;
}

.muni-row__preview {
    border: 1px dashed var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
    padding: var(--muni-space-3);
    text-align: center;
}

/* ─── MuniRow Horizontal mode (Wave 8 §D·1 fact-row pattern) ────────────────
   2-column layout: 140px mono-caps label left, 1fr serif value right, dashed
   hairline between siblings. Read-only display rows; not for form controls.
   Metrics match the Wave 8 packet mock: label 10px / value 13px / 1.4px
   letter-spacing on the label / 14px gap / 8px vertical padding. */

.muni-row--horizontal {
    grid-template-columns: 140px 1fr;
    gap: 14px;
    align-items: baseline;
    padding: 8px 0;
}

.muni-row--horizontal .muni-row__label-line {
    font-size: 0.625rem;
    letter-spacing: 1.4px;
    line-height: 1.35;
}

.muni-row--horizontal .muni-row__control {
    font-family: var(--muni-serif);
    font-size: 0.8125rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.55;
}

.muni-row--horizontal .muni-row__help {
    grid-column: 2;
    margin-top: 2px;
}

/* ─── Civic text inputs (Form Patterns § 06) ────────────────────────────────
   "Underline style, no round boxes. Civic stationery feel."

   The canonical input is plain text sitting on a 1.5px ink baseline rule.
   No box, no rounded corners, no fill, no shadow. Mud's outlined variant
   ships a rectangular fieldset border by default — we override the fieldset
   to be borderless on top+sides, retain only the bottom edge as the civic
   underline. Focus thickens to 2px ink. Error swaps to stamp-red. Disabled
   goes dashed + mute. Read-only stays dashed but still selectable.

   Scoped to controls inside MuniRow / MuniFieldGroup / MuniSection bodies. */

.muni-row__control .mud-input.mud-input-outlined,
.muni-fieldgroup__body .mud-input.mud-input-outlined,
.muni-section__body .mud-input.mud-input-outlined {
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.muni-row__control .mud-input-outlined-border,
.muni-fieldgroup__body .mud-input-outlined-border,
.muni-section__body .mud-input-outlined-border {
    border-radius: 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1.5px solid var(--mud-palette-text-primary) !important;
    background: transparent !important;
    transition: border-color 120ms var(--muni-ease), border-bottom-width 120ms var(--muni-ease);
}

.muni-row__control .mud-input.mud-input-outlined .mud-input-slot,
.muni-fieldgroup__body .mud-input.mud-input-outlined .mud-input-slot,
.muni-section__body .mud-input.mud-input-outlined .mud-input-slot {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Focus: thicken bottom rule to 2px + ensure ink color */
.muni-row__control .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.muni-fieldgroup__body .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.muni-section__body .mud-input.mud-input-outlined.mud-input-focused .mud-input-outlined-border {
    border-bottom-color: var(--mud-palette-text-primary) !important;
    border-bottom-width: 2px !important;
}

/* Error: stamp-red bottom */
.muni-row__control .mud-input.mud-input-error .mud-input-outlined-border,
.muni-fieldgroup__body .mud-input.mud-input-error .mud-input-outlined-border,
.muni-section__body .mud-input.mud-input-error .mud-input-outlined-border {
    border-bottom-color: var(--mud-palette-error) !important;
}

/* Disabled: dashed mute bottom, mute ink, no focus state */
.muni-row__control .mud-input.mud-disabled .mud-input-outlined-border,
.muni-fieldgroup__body .mud-input.mud-disabled .mud-input-outlined-border,
.muni-section__body .mud-input.mud-disabled .mud-input-outlined-border {
    border-bottom: 1px dashed var(--mud-palette-divider) !important;
}

.muni-row__control .mud-input.mud-disabled .mud-input-slot,
.muni-fieldgroup__body .mud-input.mud-disabled .mud-input-slot,
.muni-section__body .mud-input.mud-disabled .mud-input-slot {
    color: var(--mud-palette-text-disabled) !important;
}

/* Read-only: dashed bottom but full-color ink (selectable for copy).
   Toggle with `Class="muni-input--readonly"` on the MudTextField. */
.muni-input--readonly .mud-input-outlined-border {
    border-bottom-style: dashed !important;
}

/* Numeric / currency / ID inputs → mono. MudNumericField gets it auto.
   Apply `.muni-input--mono` to a MudTextField for currency symbols, IDs,
   codes — anywhere a mono face is canonical regardless of field type.
   Selectors cover both single-line <input> and multi-line <textarea>
   (MudTextField with Lines>1 swaps the inner element). */
.muni-row__control .mud-input-numeric input,
.muni-fieldgroup__body .mud-input-numeric input,
.muni-section__body .mud-input-numeric input,
.muni-input--mono .mud-input-slot,
.muni-input--mono input,
.muni-input--mono textarea {
    /* !important is required to beat MudBlazor's higher-specificity selector
       `.mud-input-control > textarea.mud-input-root { font-family: "Public Sans"… }`
       in MudBlazor.min.css. Our `.muni-input--mono textarea` is 0,1,1 specificity
       which loses to MudBlazor's 0,2,1; rather than escalate the whole selector
       chain (fragile against MudBlazor version bumps), we lean on !important.
       Same rationale for the textarea — single-line <input> would also need
       this for consistency if MudBlazor ever adds a competing rule there. */
    font-family: var(--muni-mono) !important;
    font-variant-numeric: tabular-nums;
}

/* Civic textarea skin per the design handoff (components-page.jsx §06):
       "Serif, because prose. This is the voice of the clerk, not a code comment."
   Multi-line textareas across the codebase carry user-written prose
   (DM templates, narrative notes, after-action reports, reputation
   message bodies). They are NOT code, and they are NOT mono. The design
   reads them as filed documents in the clerk's hand — Caslon serif body
   at 14px / 1.5 line-height, with the underline-only border treatment
   that defines the broader civic input vocabulary. The rounded-box
   outline MudBlazor renders by default gets stripped here.

   Apply `.muni-input--template` to any MudTextField with Lines>1 where
   the content is prose. Do NOT pair with `.muni-input--mono` — the
   serif face is the whole point.

   The "and elsewhere" sweep (per Nika 2026-05-17) — this class is the
   civic default for multi-line text input. Future textareas should opt
   in. */
.muni-input--template .mud-input-outlined-border {
    border-color: transparent !important;
    border-bottom: 1.5px solid var(--muni-ink) !important;
    border-radius: 0 !important;
}
.muni-input--template .mud-input-slot,
.muni-input--template textarea {
    font-family: var(--muni-serif) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.5 !important;
    color: var(--muni-ink) !important;
    background-color: transparent;
    padding: 6px 0;
}
.muni-input--template textarea {
    resize: vertical !important;
}
.muni-input--template:focus-within .mud-input-outlined-border {
    border-bottom-color: var(--muni-brass) !important;
    border-bottom-width: 2px !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   Wave 12.5 · Civic input + button vocabulary (§04 + §06)
   ═══════════════════════════════════════════════════════════════════════
   Opt-in wrapper classes re-skinning MudTextField and MudButton to match
   .tmp-wave12-handoff/project/components-page.jsx §04 + §06.

   USAGE:
     <MudTextField Class="muni-input--civic" Variant="Variant.Outlined" ... />
     <MudTextField Class="muni-input--civic muni-input--mono" ... />     for ident fields
     <MudButton Class="muni-btn--civic muni-btn--civic-primary" ... />
     <MudButton Class="muni-btn--civic muni-btn--civic-ghost"   ... />
     <MudButton Class="muni-btn--civic muni-btn--civic-danger"  ... />

   Per-property !important per Wave 12.4 cascade lesson — every property
   MudBlazor contests needs its own !important, they don't ride along.
   See reference_mudblazor_css_override_use_important_not_specificity.md.
*/

/* ─── §06 single-line inputs — underline-only, serif Caslon 15px ─── */
/* Outlined variant (Variant="Variant.Outlined"): flatten the fieldset, apply 1.5px ink underline */
.muni-input--civic .mud-input-outlined-border {
    border-color: transparent !important;
    border-bottom: 1.5px solid var(--muni-ink) !important;
    border-radius: 0 !important;
}
/* Text variant (MudBlazor default): replace MudBlazor's animated underline with the civic 1.5px ink rule */
.muni-input--civic .mud-input-underline:before,
.muni-input--civic .mud-input-underline:after {
    display: none !important;
}
.muni-input--civic .mud-input-underline {
    border-bottom: 1.5px solid var(--muni-ink) !important;
}
/* Typography + color — variant-agnostic (targets the inner input/slot regardless of wrapper variant) */
.muni-input--civic .mud-input-slot,
.muni-input--civic input {
    font-family: var(--muni-serif) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    color: var(--muni-ink) !important;
    background-color: transparent;
    padding: 6px 0;
}
/* Focus — brass underline at 2px (both variants) */
.muni-input--civic:focus-within .mud-input-outlined-border,
.muni-input--civic:focus-within .mud-input-underline {
    border-bottom-color: var(--muni-brass) !important;
    border-bottom-width: 2px !important;
}
/* Error — stamp red underline (both variants) */
.muni-input--civic.mud-input-error .mud-input-outlined-border,
.muni-input--civic .mud-input-error .mud-input-outlined-border,
.muni-input--civic.mud-input-error .mud-input-underline,
.muni-input--civic .mud-input-error .mud-input-underline {
    border-bottom-color: var(--muni-stamp) !important;
}
.muni-input--civic .mud-input-disabled {
    opacity: 0.5;
}

/* ─── §06 raw HTML inputs/textareas with the civic class ────
   The block above targets MudBlazor wrappers (`.muni-input--civic .mud-input-*`)
   via descendant selectors. Raw `<input class="muni-input--civic">` and
   `<textarea class="muni-input--civic">` -- used in QModal forms (Quest
   editor Settings / Rewards / Failures) which skip MudBlazor primitives
   for tighter visual control -- need parallel self-applying rules.
   Same underline-only vocabulary, no !important needed (no MudBlazor
   specificity contest on raw elements). */
input.muni-input--civic,
textarea.muni-input--civic {
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1.5px solid var(--muni-ink);
    border-radius: 0;
    font-family: var(--muni-serif);
    color: var(--muni-ink);
    padding: 6px 0;
    outline: none;
    box-sizing: border-box;
}

input.muni-input--civic {
    font-size: 15px;
    line-height: 1.4;
    height: auto;
}

textarea.muni-input--civic {
    font-size: 14px;
    line-height: 1.5;
    resize: vertical;
    min-height: 84px;
}

/* Focus — brass underline at 2px, matches the MudBlazor variant rule */
input.muni-input--civic:focus,
input.muni-input--civic:focus-visible,
textarea.muni-input--civic:focus,
textarea.muni-input--civic:focus-visible {
    border-bottom-color: var(--muni-brass);
    border-bottom-width: 2px;
    padding-bottom: 5px; /* compensate for the 0.5px border growth so the field doesn't jump */
}

input.muni-input--civic::placeholder,
textarea.muni-input--civic::placeholder {
    font-family: var(--muni-serif);
    font-style: italic;
    color: var(--muni-ink-mute);
    opacity: 0.7;
}

input.muni-input--civic:disabled,
textarea.muni-input--civic:disabled {
    opacity: 0.5;
    border-bottom-style: dashed;
}

/* Mono opt-in for ident fields */
input.muni-input--civic.muni-input--mono,
textarea.muni-input--civic.muni-input--mono {
    font-family: var(--muni-mono);
    font-size: 13px;
    letter-spacing: 0.3px;
}

/* Raw <select class="muni-input--civic"> -- the BOXED civic control
   (gSel in the handoff), distinct from the underline text inputs above.
   Used by the MuniTable toolbar filters (All states / All kinds / All
   outcomes). Matches .qfield__select: paper fill, 1px rule, radius 2,
   sans 13, 7/9 padding, plus a self-drawn caret so no native chrome
   shows through. */
select.muni-input--civic {
    background-color: var(--muni-paper);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    color: var(--muni-ink);
    font-family: var(--muni-sans);
    font-size: 13px;
    padding: 7px 30px 7px 9px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%237a6f55' stroke-width='1.4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

select.muni-input--civic:focus,
select.muni-input--civic:focus-visible {
    border-color: var(--muni-brass);
}

select.muni-input--civic:disabled {
    opacity: 0.5;
    cursor: default;
}

/* ─── §04 buttons — three kinds: Primary filled / Ghost outlined / Danger outlined ───
   Works on both <MudButton Class="muni-btn--civic ..."> and plain
   <button class="muni-btn--civic ..."> elements. Verbatim per
   Form Patterns.html §0 lines 375-393 (`.btn` / `.btn-primary` / `.btn-ghost`
   / `.btn-danger`). */
.muni-btn--civic {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    border-radius: 2px !important;
    padding: 9px 16px !important;
    font-family: var(--muni-sans) !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    min-height: 0 !important;
    box-shadow: none !important;
    transition: all 0.1s;
    border: 1px solid;
}
.muni-btn--civic-primary {
    background-color: var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary-text) !important;
    border-color: var(--mud-palette-primary) !important;
}
.muni-btn--civic-primary:hover:not(:disabled):not(.mud-disabled) {
    background-color: var(--muni-ink) !important;
    border-color: var(--muni-ink) !important;
}
.muni-btn--civic-ghost {
    background-color: transparent !important;
    color: var(--muni-ink) !important;
    border-color: color-mix(in srgb, var(--muni-ink) 22%, transparent) !important;
}
.muni-btn--civic-ghost:hover:not(:disabled):not(.mud-disabled) {
    border-color: var(--muni-ink) !important;
    background-color: var(--muni-paper-soft) !important;
}
/* Danger — outlined stamp red. Never filled per spec §04 line 214. */
.muni-btn--civic-danger {
    background-color: transparent !important;
    color: var(--muni-stamp) !important;
    border-color: var(--muni-stamp) !important;
}
.muni-btn--civic-danger:hover:not(:disabled):not(.mud-disabled) {
    background-color: color-mix(in srgb, var(--muni-stamp) 6%, transparent) !important;
}
.muni-btn--civic:disabled,
.muni-btn--civic.mud-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* ─── §04-extrapolated icon buttons — square footprint, civic chrome ───
   For <MudIconButton Class="muni-icon-btn--civic">. Inherits icon color;
   pair with `--danger` for destructive icon actions. */
.muni-icon-btn--civic {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0 !important;
    background-color: transparent !important;
    color: inherit !important;
    border: 1px solid color-mix(in srgb, var(--muni-ink) 22%, transparent) !important;
    border-radius: 2px !important;
    cursor: pointer;
    box-shadow: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transition: all 0.1s;
}
.muni-icon-btn--civic:hover:not(:disabled):not(.mud-disabled) {
    border-color: var(--muni-ink) !important;
    background-color: var(--muni-paper-soft) !important;
}
.muni-icon-btn--civic-danger {
    color: var(--muni-stamp) !important;
    border-color: var(--muni-stamp) !important;
}
.muni-icon-btn--civic-danger:hover:not(:disabled):not(.mud-disabled) {
    background-color: color-mix(in srgb, var(--muni-stamp) 6%, transparent) !important;
}
.muni-icon-btn--civic:disabled,
.muni-icon-btn--civic.mud-disabled {
    opacity: 0.4 !important;
    cursor: not-allowed !important;
}

/* Hide MudNumericField's spinner buttons — civic forms use direct entry,
   not increment buttons. The number itself reads as data, not a stepper. */
.muni-row__control .mud-input-numeric .mud-input-numeric-actions,
.muni-fieldgroup__body .mud-input-numeric .mud-input-numeric-actions,
.muni-section__body .mud-input-numeric .mud-input-numeric-actions {
    display: none !important;
}

/* Adornment (L$ prefix etc): inline mono, no box. Per Form Patterns § 06
   "Prefix affix for currency." */
.muni-row__control .mud-input.mud-input-outlined .mud-input-adornment,
.muni-fieldgroup__body .mud-input.mud-input-outlined .mud-input-adornment,
.muni-section__body .mud-input.mud-input-outlined .mud-input-adornment {
    background: transparent !important;
    border: none !important;
    padding-left: 0 !important;
}

.muni-row__control .mud-input.mud-input-outlined .mud-input-adornment-text,
.muni-fieldgroup__body .mud-input.mud-input-outlined .mud-input-adornment-text,
.muni-section__body .mud-input.mud-input-outlined .mud-input-adornment-text {
    font-family: var(--muni-mono);
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}

@media (max-width: 760px) {
    .muni-row {
        grid-template-columns: 1fr;
        gap: var(--muni-space-2);
    }
    .muni-row__control {
        justify-self: stretch;
        min-width: 0;
    }
}

/* MuniFieldGroup — bordered legend-headered group (Form Patterns § 08). */
.muni-fieldgroup {
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    margin: 0;
}

.muni-fieldgroup--audit {
    border-color: var(--mud-palette-error);
}

.muni-fieldgroup--danger {
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, var(--mud-palette-surface));
}

.muni-fieldgroup__legend {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
    background: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding: 8px 14px;
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.muni-fieldgroup--audit > .muni-fieldgroup__legend {
    background: color-mix(in srgb, var(--mud-palette-error) 14%, var(--mud-palette-surface));
    border-bottom-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.muni-fieldgroup__legend-left {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.muni-fieldgroup__tag {
    color: var(--mud-palette-text-secondary);
    font-weight: 400;
}

.muni-fieldgroup--audit > .muni-fieldgroup__legend .muni-fieldgroup__tag {
    color: var(--mud-palette-text-secondary);
}

.muni-fieldgroup__title {
    color: inherit;
}

.muni-fieldgroup__legend-right {
    color: var(--mud-palette-text-secondary);
    letter-spacing: 1.2px;
    font-size: 0.6rem;
}

.muni-fieldgroup__legend-right--audit {
    color: var(--mud-palette-error);
}

.muni-fieldgroup__body {
    padding: 4px 14px 8px;
}

/* MuniInlineField — view ↔ edit state machine (Form Patterns § 13). */
.muni-inline-field {
    display: grid;
    gap: var(--muni-space-1);
    padding: 8px 0;
}

.muni-inline-field__head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-height: 1.2rem;
}

.muni-inline-field__label {
    font-family: var(--muni-mono);
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-inline-field__saved-flash {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    padding: 1px 6px;
}

.muni-inline-field__view {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--muni-space-2);
}

.muni-inline-field__value {
    font-family: var(--muni-serif);
    font-size: 1rem;
    color: var(--mud-palette-text-primary);
    min-width: 0;
}

.muni-inline-field__edit-trigger {
    appearance: none;
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    width: 28px;
    height: 28px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-mono);
    transition: background 120ms var(--muni-ease), border-color 120ms var(--muni-ease), color 120ms var(--muni-ease);
}

.muni-inline-field__edit-trigger:hover,
.muni-inline-field__edit-trigger:focus-visible {
    background: var(--mud-palette-background-gray);
    border-color: var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-primary);
}

.muni-inline-field__edit {
    display: grid;
    gap: var(--muni-space-2);
}

.muni-inline-field__editor {
    min-width: 0;
}

.muni-inline-field__actions {
    display: flex;
    gap: var(--muni-space-2);
    align-items: center;
}

.muni-inline-field__help {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    max-width: 60ch;
}

/* MuniCheckRow — checkbox row with per-option helper (Form Patterns § 03.1). */
.muni-check-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--muni-space-2);
    align-items: start;
    padding: 6px 0;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.muni-check-row:last-child {
    border-bottom: none;
}

.muni-check-row__box.mud-checkbox {
    margin: 0;
    padding-top: 2px;
}

.muni-check-row__copy {
    min-width: 0;
    padding-top: 4px;
}

.muni-check-row__label {
    font-family: var(--muni-sans);
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    line-height: 1.3;
}

.muni-check-row__required {
    color: var(--mud-palette-error);
    font-weight: 700;
    margin-left: 4px;
}

.muni-check-row__help {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    line-height: 1.5;
    max-width: 60ch;
}

.muni-empty-state {
    display: grid;
    justify-items: center;
    gap: var(--muni-space-2);
    padding: var(--muni-space-7) var(--muni-space-5);
    border: 1px dashed var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
    text-align: center;
}

.muni-empty-state__title {
    margin: 0;
}

.muni-empty-state__message {
    max-width: 54ch;
    color: var(--mud-palette-text-secondary);
}

.muni-stat {
    min-height: 112px;
    padding: var(--muni-space-4);
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
}

.muni-stat__header {
    display: flex;
    gap: var(--muni-space-2);
    align-items: center;
}

.muni-stat__label {
    color: var(--mud-palette-text-secondary);
}

.muni-stat__value {
    margin-top: var(--muni-space-4);
    font-family: var(--muni-mono);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.muni-stat__label {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-stat__caption {
    display: block;
    margin-top: var(--muni-space-2);
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.munibase-table.mud-table,
.muni-table.mud-table {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
}

.munibase-table .mud-table-head,
.muni-table .mud-table-head {
    background: var(--mud-palette-background-gray);
}

.munibase-table th,
.muni-table th {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.munibase-table td,
.muni-table td {
    border-bottom: 1px solid var(--mud-palette-table-lines);
}

/* Civic table toolbar (search + state filter + count) */
.muni-table-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    flex-wrap: wrap;
}

.muni-table-toolbar__search {
    flex: 1 1 240px;
    min-width: 180px;
}

.muni-table-toolbar__filter {
    flex: 0 0 auto;
    min-width: 150px;
}

.muni-table-toolbar__count {
    flex: 0 0 auto;
    margin-left: auto;
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
}

.muni-table-toolbar__empty {
    padding: 18px 14px;
    font-family: "Libre Caslon Text", Georgia, serif;
    font-style: italic;
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
}

/* Civic pager skin */
.muni-table .mud-table-pager {
    border-top: 1px solid var(--mud-palette-table-lines);
    background: var(--mud-palette-background-gray);
}

.muni-table .mud-table-pager .mud-typography,
.muni-table .mud-table-pager .mud-select {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 0.4px;
}

/* ── MuniTable<T> (Phase 60.1 Plan 12) ──────────────────────────────
   The .muni-table base above is shared with the raw-MudTable callers
   (QuestsAdminList). MuniTable layers these on top: a dark-header
   variant, per-cell alignment, an actions column, and the toolbar
   count/search affordances the component renders. */

/* Dark header variant: ink fill + light mono-caps labels. */
.muni-table--dark .mud-table-head {
    background: var(--mud-palette-dark);
}

.muni-table--dark th,
.muni-table--dark .mud-table-head th,
.muni-table--dark .mud-table-head .mud-table-sort-label,
.muni-table--dark .mud-table-head .mud-button-root {
    color: var(--mud-palette-dark-text);
}

.muni-table--dark .mud-table-head .mud-table-sort-label:hover {
    color: var(--mud-palette-dark-text);
    opacity: 0.85;
}

/* Per-cell alignment. */
.muni-table__cell--left {
    text-align: left;
}

.muni-table__cell--right {
    text-align: right;
}

.muni-table__cell--center {
    text-align: center;
}

/* Rightmost actions column. Header label is usually blank; the cell
   holds the directive civic buttons, right-aligned, gap'd. */
.muni-table__actions-head {
    text-align: right;
    white-space: nowrap;
}

.muni-table__actions {
    white-space: nowrap;
}

.muni-table__actions-row {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
}

.muni-table__actions-row .muni-btn--civic {
    font-size: 11px;
    padding: 5px 10px;
}

/* Toolbar: count tally (lead), flexible spacer, optional right slot,
   and the search field with an inline clear button. */
.muni-table-toolbar__count--lead {
    margin-left: 0;
}

.muni-table-toolbar__spacer {
    flex: 1 1 auto;
}

.muni-table-toolbar__right {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.muni-table-toolbar__searchwrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
}

.muni-table-toolbar__searchwrap .muni-table-toolbar__search {
    /* Boxed search per muni-table.jsx (NOT the underline .muni-input--civic):
       paper fill, 1px rule, radius 2, sans 12.5, magnifier inset left, clear
       inset right. */
    flex: 0 0 auto;
    width: 220px;
    min-width: 160px;
    background: var(--muni-paper);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    color: var(--muni-ink);
    font-family: var(--muni-sans);
    font-size: 12.5px;
    padding: 6px 26px 6px 26px;
    outline: none;
    box-sizing: border-box;
}

.muni-table-toolbar__searchwrap .muni-table-toolbar__search:focus,
.muni-table-toolbar__searchwrap .muni-table-toolbar__search:focus-visible {
    border-color: var(--muni-brass);
}

.muni-table-toolbar__searchwrap .muni-table-toolbar__search::placeholder {
    color: var(--muni-ink-mute);
}

.muni-table-toolbar__search-icon {
    position: absolute;
    left: 9px;
    font-family: var(--muni-mono);
    font-size: 13px;
    line-height: 1;
    color: var(--muni-ink-mute);
    pointer-events: none;
}

.muni-table-toolbar__clear {
    position: absolute;
    right: 6px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.95rem;
    line-height: 1;
    padding: 2px;
}

/* ── Compact rhythm to match muni-table.jsx literals ────────────────
   MudTable's default toolbar (min-height 64px) + cell box (~16px all
   round) read airy against the prototype. The jsx uses toolbar 10/14,
   header 9/16, rows 12/16 (8/16 dense). Pin them on .muni-table only so
   raw .munibase-table callers are untouched. */
.muni-table .mud-table-toolbar {
    min-height: 0;
    padding: 10px 14px;
}

.muni-table .mud-table-cell {
    padding: 12px 16px;
    /* MudBlazor defaults .mud-table-cell to line-height 1.43 + a 1.5rem (24px)
       fixed rule -- that, not the padding, was inflating rows past the jsx's
       tight rhythm. Pin it tight so 12/16 padding renders the prototype height. */
    line-height: 1.3;
}

.muni-table .mud-table-head .mud-table-cell {
    padding: 9px 16px;
    /* Single-line mono-caps labels (matches the jsx headLabel). Without this the
       narrow "Used by" column wrapped "USED / BY" to two lines, bloating the head. */
    white-space: nowrap;
}

.muni-table.mud-table-dense .mud-table-cell,
.muni-table .mud-table-dense .mud-table-cell {
    padding: 8px 16px;
}

/* ── Civic pager (replaces MudTablePager) ───────────────────────────
   Direct port of muni-table.jsx's pager: a "PER PAGE" label + boxed
   select + range readout on the left, bordered Prev / page / Next on
   the right. Lives inside MudTable's footer slot, so it inherits the
   table's hairline border; we add the top rule + soft fill to match. */
.muni-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    width: 100%;
    padding: 10px 16px;
    border-top: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.muni-pager__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.muni-pager__label {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

.muni-pager__select {
    background: var(--muni-paper);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    color: var(--muni-ink);
    font-family: var(--muni-mono);
    font-size: 11px;
    padding: 4px 6px;
    outline: none;
    cursor: pointer;
    box-sizing: border-box;
}

.muni-pager__range {
    font-family: var(--muni-mono);
    font-size: 10.5px;
    letter-spacing: 0.6px;
    color: var(--muni-ink-mute);
}

.muni-pager__nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.muni-pager__page {
    font-family: var(--muni-mono);
    font-size: 10.5px;
    letter-spacing: 0.6px;
    color: var(--muni-ink-soft);
    padding: 0 4px;
}

.muni-pager__btn {
    background: transparent;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    color: var(--muni-ink-soft);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: 5px 10px;
    cursor: pointer;
}

.muni-pager__btn:disabled {
    opacity: 0.4;
    cursor: default;
}

.muni-panel,
.muni-filter-panel,
.muni-record-card {
    border: 1px solid var(--mud-palette-divider) !important;
    background: var(--mud-palette-surface) !important;
    background-image: var(--muni-paper-noise) !important;
    box-shadow: none !important;
}

@media (max-width: 760px) {
    .muni-page__masthead,
    .muni-admin-page .muni-page__masthead,
    .muni-section__header {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .muni-page__actions {
        justify-content: flex-start;
    }
}

/* ─── Briarmont Classifieds masthead + listing grid (screen-rentals.jsx) ─── */

.muni-classifieds-masthead {
    border: 2px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background-gray);
    padding: 18px 24px;
    margin-bottom: var(--muni-space-5);
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--muni-space-5);
}

/* Wave 18 fixup 2026-05-25 -- when AvailableRentals delegates branding   */
/* to the MuniBroadsheet frame above, the masthead carries only KPIs +    */
/* pills. Drop the empty brand column so the KPI band occupies the left   */
/* side meaningfully instead of leaving a wide unfilled gap.              */
.muni-classifieds-masthead--filter-only {
    grid-template-columns: minmax(0, 1fr) auto;
}
.muni-classifieds-masthead--filter-only .muni-classifieds-masthead__kpis {
    border-left: 0;
    padding-left: 0;
    justify-content: flex-start;
}

.muni-classifieds-masthead__brand {
    min-width: 0;
}

.muni-classifieds-masthead__overline {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.muni-classifieds-masthead__title {
    font-family: var(--muni-serif);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-classifieds-masthead__tagline {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0;
}

.muni-classifieds-masthead__kpis {
    display: flex;
    gap: var(--muni-space-6);
    border-left: 1px solid var(--mud-palette-divider);
    padding-left: var(--muni-space-5);
    justify-content: center;
    flex-wrap: wrap;
}

.muni-classifieds-kpi {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.muni-classifieds-kpi__label {
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-classifieds-kpi__value {
    font-family: var(--muni-serif);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.muni-classifieds-masthead__pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.muni-classifieds-pill {
    appearance: none;
    border: 1px solid var(--mud-palette-divider);
    background: transparent;
    padding: 6px 10px;
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    transition: background 120ms var(--muni-ease), color 120ms var(--muni-ease), border-color 120ms var(--muni-ease);
}

.muni-classifieds-pill:hover,
.muni-classifieds-pill:focus-visible {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
}

.muni-classifieds-pill--active {
    background: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background) !important;
}

@media (max-width: 960px) {
    .muni-classifieds-masthead {
        grid-template-columns: 1fr;
        gap: var(--muni-space-4);
    }
    .muni-classifieds-masthead__kpis {
        border-left: none;
        border-top: 1px solid var(--mud-palette-divider);
        padding-left: 0;
        padding-top: var(--muni-space-3);
        justify-content: flex-start;
    }
}

/* Civic record-card grid — 3-col with 1px ink outer border + dashed inner separators */
.muni-classifieds-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-surface);
    margin-top: var(--muni-space-4);
}

.muni-classifieds-cell {
    position: relative;
    padding: 18px;
    min-height: 240px;
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
}

.muni-classifieds-cell--right {
    border-right: 1px dashed var(--mud-palette-divider);
}

.muni-classifieds-cell--bottom {
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.muni-classifieds-cell--vacant {
    background: var(--mud-palette-background-gray);
}

.muni-classifieds-cell__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--muni-space-2);
}

.muni-classifieds-cell__heading {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.muni-classifieds-cell__lot {
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-classifieds-cell__title {
    font-family: var(--muni-serif);
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.3px;
    color: var(--mud-palette-text-primary);
}

.muni-classifieds-cell__region {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-classifieds-cell__plot {
    height: 88px;
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface)),
        color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-surface)) 5px,
        var(--mud-palette-background-gray) 5px,
        var(--mud-palette-background-gray) 10px
    );
}

.muni-classifieds-cell__plot-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.muni-classifieds-cell__plot-placeholder {
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-classifieds-cell__body {
    font-family: var(--muni-serif);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    flex: 1 1 auto;
}

.muni-classifieds-cell__body b {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.muni-classifieds-cell__body i {
    color: var(--mud-palette-text-primary);
    font-style: italic;
}

.muni-classifieds-cell__footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: var(--muni-space-2);
    border-top: 1px solid var(--mud-palette-divider);
    margin-top: auto;
}

.muni-classifieds-cell__price {
    display: grid;
    gap: 2px;
}

.muni-classifieds-cell__price-label {
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-classifieds-cell__price-value {
    font-family: var(--muni-mono);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-primary);
    font-variant-numeric: tabular-nums;
}

.muni-classifieds-cell__inquire {
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: 1px;
    transition: color 120ms var(--muni-ease), border-color 120ms var(--muni-ease);
}

.muni-classifieds-cell__inquire:hover,
.muni-classifieds-cell__inquire:focus-visible {
    color: var(--mud-palette-primary);
    border-bottom-color: var(--mud-palette-primary);
}

/* Stamp overlay on cells — civic rotated double-border treatment */
.muni-classifieds-cell__stamp {
    position: absolute;
    top: 50px;
    right: -4px;
    transform: rotate(4deg);
    border: 1px solid currentColor;
    box-shadow: inset 0 0 0 1px currentColor;
    padding: 3px 9px;
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    line-height: 1;
    text-transform: uppercase;
    background: var(--mud-palette-surface);
}

.muni-classifieds-cell__stamp--for-let {
    color: var(--mud-palette-secondary);
    transform: rotate(4deg);
}

.muni-classifieds-cell__stamp--arrears {
    color: var(--mud-palette-error);
    transform: rotate(8deg);
}

.muni-classifieds-cell__stamp--reserved {
    color: var(--mud-palette-primary);
    transform: rotate(-3deg);
}

.muni-classifieds-cell__stamp--locked {
    color: var(--mud-palette-text-secondary);
    transform: rotate(-2deg);
}

/* Status pill in card head */
.muni-status-pill {
    display: inline-flex;
    padding: 2px 8px;
    border: 1px solid currentColor;
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    line-height: 1.4;
    flex: 0 0 auto;
}

.muni-status-pill--available {
    color: var(--mud-palette-primary);
}

.muni-status-pill--occupied {
    color: var(--mud-palette-text-secondary);
}

.muni-status-pill--reserved {
    color: var(--mud-palette-secondary);
}

.muni-status-pill--reserved-self {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 10%, var(--mud-palette-surface));
}

.muni-status-pill--locked {
    color: var(--mud-palette-error);
}

@media (max-width: 960px) {
    .muni-classifieds-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .muni-classifieds-cell--right:nth-child(2n) {
        border-right: none;
    }
}

@media (max-width: 640px) {
    .muni-classifieds-grid {
        grid-template-columns: 1fr;
    }
    .muni-classifieds-cell--right {
        border-right: none;
        border-bottom: 1px dashed var(--mud-palette-divider);
    }
}

/* ─── TypeKit font preview grid ──────────────────────────────────────────── */

.muni-typekit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--muni-space-3);
}

.muni-typekit-card {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-surface);
    background-image: var(--muni-paper-noise);
    padding: var(--muni-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
}

.muni-typekit-card__head {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.muni-typekit-card__name {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.muni-typekit-card__family {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-typekit-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.muni-typekit-chip {
    display: inline-flex;
    border: 1px solid var(--mud-palette-divider);
    padding: 1px 6px;
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.3;
}

.muni-typekit-chip--style {
    color: var(--mud-palette-secondary);
    border-color: var(--mud-palette-secondary);
}

.muni-typekit-card__pangram {
    border-top: 1px solid var(--mud-palette-divider);
    padding-top: var(--muni-space-2);
    color: var(--mud-palette-text-primary);
    line-height: 1.4;
    margin-top: auto;
}

/* ============================================================
   Citizen Dossier (Rev 3) -- per-section editing additions
   ============================================================ */

.muni-section--editing > .muni-section__body {
    border: 1.5px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 4%, var(--mud-palette-background));
    padding: var(--muni-space-4) var(--muni-space-4) var(--muni-space-3);
    margin-top: var(--muni-space-2);
}

.muni-section__legend-right--editable .muni-section__edit-affordance {
    background: transparent;
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    padding: 2px 8px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    line-height: 1.4;
}

.muni-section__legend-right--editable .muni-section__edit-affordance:hover,
.muni-section__legend-right--editable .muni-section__edit-affordance:focus-visible {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    outline: none;
}

.muni-section__legend-right--editing .muni-section__editing-badge {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background));
    color: var(--mud-palette-error);
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.muni-section__legend-right--readonly {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.muni-section__edit-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
    padding-bottom: var(--muni-space-3);
    margin-bottom: var(--muni-space-3);
    border-bottom: 1px dashed var(--mud-palette-divider);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-section__edit-context { flex: 1 1 auto; }
.muni-section__edit-meta { flex: 0 0 auto; }

.muni-section__edit-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--muni-space-3);
    padding-top: var(--muni-space-3);
    margin-top: var(--muni-space-3);
    border-top: 1px dashed var(--mud-palette-divider);
}

.muni-section__edit-last-saved {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-section__edit-actions {
    display: flex;
    gap: var(--muni-space-2);
    margin-left: auto;
}

.muni-section__edit-cancel,
.muni-section__edit-save {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 12px;
    cursor: pointer;
    line-height: 1.4;
}

.muni-section__edit-cancel {
    background: transparent;
    border: 1px solid var(--mud-palette-text-secondary);
    color: var(--mud-palette-text-secondary);
}

.muni-section__edit-cancel:hover,
.muni-section__edit-cancel:focus-visible {
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    outline: none;
}

.muni-section__edit-save {
    background: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.muni-section__edit-save:hover,
.muni-section__edit-save:focus-visible {
    background: color-mix(in srgb, var(--mud-palette-primary) 80%, var(--mud-palette-text-primary));
    outline: none;
}

.muni-section__deep-link {
    display: inline-block;
    margin-top: var(--muni-space-3);
    padding-top: var(--muni-space-2);
    border-top: 1px dashed var(--mud-palette-divider);
    width: 100%;
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    text-decoration: none;
}

.muni-section__deep-link:hover,
.muni-section__deep-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* ============================================================
   MuniRentalCard -- ephemeral D card on the dossier Overview
   ============================================================ */

.muni-rental-card {
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    padding: var(--muni-space-3) var(--muni-space-4);
    margin-bottom: var(--muni-space-3);
}

.muni-rental-card:last-child { margin-bottom: 0; }

.muni-rental-card__row {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--muni-space-4);
    align-items: center;
}

.muni-rental-card__lot {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    padding: 4px 8px;
    background: color-mix(in srgb, var(--mud-palette-primary) 6%, var(--mud-palette-background));
    min-width: 56px;
    text-align: center;
}

.muni-rental-card__addr {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.muni-rental-card__addr-line {
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    line-height: 1.25;
}

.muni-rental-card__addr-meta {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    display: flex;
    gap: 4px;
}

.muni-rental-card__paid-thru {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}

.muni-rental-card__paid-thru-label {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-rental-card__paid-thru-value {
    font-family: var(--muni-mono);
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-rental-card__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.muni-rental-card__admin-actions {
    display: flex;
    gap: 2px;
}

.muni-rental-card__icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.muni-rental-card__icon-btn:hover,
.muni-rental-card__icon-btn:focus-visible {
    border-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    outline: none;
}

.muni-rental-card__icon-btn .mud-icon-root {
    width: 16px;
    height: 16px;
    font-size: 16px;
    color: inherit;
}

.muni-rental-card__status {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 2px 8px;
    border: 1px solid currentColor;
    white-space: nowrap;
}

.muni-rental-card__status--current {
    color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 7%, var(--mud-palette-background));
}

.muni-rental-card__status--grace {
    color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 8%, var(--mud-palette-background));
}

.muni-rental-card__status--overdue {
    color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background));
}

.muni-rental-card__meter {
    margin-top: var(--muni-space-3);
    padding-top: var(--muni-space-2);
    border-top: 1px dashed var(--mud-palette-divider);
}

.muni-rental-card__meter-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 4px;
}

.muni-rental-card__meter-tag {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-rental-card__meter-value {
    font-family: var(--muni-mono);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-rental-card__meter-track {
    height: 6px;
    background: color-mix(in srgb, var(--mud-palette-divider) 60%, transparent);
    border: 1px solid var(--mud-palette-divider);
    overflow: hidden;
}

.muni-rental-card__meter-fill {
    height: 100%;
    transition: width 240ms var(--muni-ease);
}

.muni-rental-card__meter--ok .muni-rental-card__meter-fill {
    background: var(--mud-palette-primary);
}

.muni-rental-card__meter--warn .muni-rental-card__meter-fill {
    background: var(--mud-palette-warning);
}

.muni-rental-card__meter--over .muni-rental-card__meter-fill {
    background: var(--mud-palette-error);
}

/* ============================================================
   MuniPaperclippedPortrait -- public character page header
   ============================================================ */

.muni-paperclip-portrait {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
    padding: 0;
    padding-top: 17px;
}

.muni-paperclip-portrait__frame {
    position: relative;
    width: var(--muni-portrait-size, 300px);
    height: var(--muni-portrait-size, 300px);
    aspect-ratio: 1 / 1;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    box-shadow: 4px 6px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    transform-origin: center;
    overflow: visible;
}

.muni-paperclip-portrait__image,
.muni-paperclip-portrait__placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.muni-paperclip-portrait__placeholder {
    background: color-mix(in srgb, var(--mud-palette-divider) 40%, var(--mud-palette-background));
    display: flex;
    align-items: center;
    justify-content: center;
}

.muni-paperclip-portrait__initials {
    font-family: var(--muni-serif);
    font-size: 4rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    letter-spacing: -1px;
}

.muni-paperclip-portrait__clip {
    position: absolute;
    /* Per-surface tunable offset. Default -42px works on 200px portraits
       (review step, dossier masthead, register Identity step). Larger
       portraits (320px public character page) need a different value to
       feel "real" because the clip's pixel size doesn't scale with
       --muni-portrait-size. Override on the wrapper class around the
       MuniPaperclippedPortrait consumer:

         .muni-public-dossier__portrait-slot { --muni-portrait-clip-offset: -50px; }
         .muni-citizen-page__masthead-portrait { --muni-portrait-clip-offset: -42px; }
         .muni-review-dossier__rail-portrait { --muni-portrait-clip-offset: -42px; }
         .register-portrait-civic { --muni-portrait-clip-offset: -42px; }

       Math: SVG viewBox 0 0 48 96, clip drawing spans y=2..90 (~93% of
       vbox), rendered into a 28x56 SVG box. At top=-42, the clip's
       bottom curve renders at frame_top + 10.5px (~10px overlap onto
       photo) and the top extends ~41px above. More-negative = more
       above the frame, less overlap. Less-negative = more overlap. */
    top: var(--muni-portrait-clip-offset, -42px);
    left: 50%;
    transform: translateX(-50%);
    width: 28px;
    height: 56px;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 65%, var(--mud-palette-text-secondary));
    filter: drop-shadow(1px 2px 0 color-mix(in srgb, var(--mud-palette-text-primary) 25%, transparent));
    pointer-events: none;
}

.muni-paperclip-portrait__caption {
    margin-top: var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* HANDOFF · 04 §A·3 follow-up — when MuniPaperclippedPortrait gets an
   OnClick handler the frame becomes a button. Clicks reveal a hover
   overlay (camera glyph + "Update" caption) over the photo so the
   affordance is discoverable without permanently dressing every
   portrait with edit chrome. The button strips its native styling so
   the visual identity stays the framed-photo + paperclip silhouette. */
.muni-paperclip-portrait__frame--button {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding: 0;
    font: inherit;
    color: inherit;
    background: var(--mud-palette-background);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.muni-paperclip-portrait__frame--button:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 4px;
}

.muni-paperclip-portrait__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 65%, transparent);
    color: var(--mud-palette-background);
    opacity: 0;
    transition: opacity 0.16s ease;
    pointer-events: none;
}

.muni-paperclip-portrait__overlay-label {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
}

.muni-paperclip-portrait__frame--button:hover .muni-paperclip-portrait__overlay,
.muni-paperclip-portrait__frame--button:focus-visible .muni-paperclip-portrait__overlay {
    opacity: 1;
}

/* Lift the button slightly on hover to confirm it's pressable. */
.muni-paperclip-portrait__frame--button:hover {
    box-shadow: 5px 8px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-paperclip-portrait__frame--button:active {
    box-shadow: 2px 3px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

/* Dialog preview — square 1:1 image with civic frame, used by
   CitizenPortraitUploadDialog to show the current/staged portrait. */
.muni-portrait-upload-preview {
    aspect-ratio: 1 / 1;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    border: 1px solid var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-divider) 40%, var(--mud-palette-background));
    overflow: hidden;
    box-shadow: 3px 4px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
}

.muni-portrait-upload-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.muni-portrait-upload-preview__placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--muni-space-2);
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ============================================================
   HANDOFF · 04 §B — MuniSubTabs (Pattern A · Section-letter typewriter rule)

   Sub-tabs INSIDE a top-level dossier tab. Reuses the §-letter convention
   from the Vital Ledger and the top-tab bar so the dossier has one
   indexing language at every level. Visually almost weightless: a 1.5px
   ink rule with a 3px ink underscore inset 6px from each edge of the
   active tab. No card chrome on the body — the parent tab's paper IS
   the body surface.
   ============================================================ */

.muni-subtabs {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.muni-subtabs__bar {
    display: flex;
    flex-wrap: wrap;
    border-bottom: 1.5px solid var(--mud-palette-text-primary);
    margin-bottom: 0;
}

.muni-subtabs__tab {
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    padding: 10px 14px 8px;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    position: relative;
    transition: color 0.12s ease;
}

.muni-subtabs__tab:hover {
    color: color-mix(in srgb, var(--mud-palette-text-primary) 80%, var(--mud-palette-text-secondary));
}

.muni-subtabs__tab:hover::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -1px;
    height: 1px;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 50%, transparent);
}

.muni-subtabs__tab:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: -3px;
}

.muni-subtabs__tab--active {
    color: var(--mud-palette-text-primary);
}

.muni-subtabs__tab--active::after,
.muni-subtabs__tab--active:hover::after {
    content: "";
    position: absolute;
    left: 6px;
    right: 6px;
    bottom: -3px;
    height: 3px;
    background: var(--mud-palette-text-primary);
}

.muni-subtabs__letter {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.4px;
    /* HANDOFF · 04 §B — spec keeps the letter prefix muted on every tab,
       active or not. The active vs inactive distinction lives on the
       label color (text-primary vs text-secondary on the parent .tab),
       not on the §-letter — the prefix is a navigational marker, not a
       state indicator. Earlier draft tweaked this on .--active and
       Nika rightly flagged the drift on UAT 2026-05-09. */
    color: var(--mud-palette-text-secondary);
}

.muni-subtabs__label {
    /* Inherits parent font-family/size/casing — see .muni-subtabs__tab. */
}

.muni-subtabs__count {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--mud-palette-text-secondary);
    background: color-mix(in srgb, var(--mud-palette-divider) 35%, var(--mud-palette-background));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    /* HANDOFF · 04 §B spec: padding 0 4px / margin-left 4px / border-radius 1px.
       No line-height override, no align-self — the parent .tab uses
       align-items: baseline so the chip rides the label's baseline. */
    padding: 0 4px;
    margin-left: 4px;
    border-radius: 1px;
}

.muni-subtabs__body {
    padding: 18px 6px 4px;
}

.muni-subtab-panel {
    /* No card chrome — body inherits the parent tab's paper surface.
       The bar's 1.5px ink rule is the only divider needed. */
    display: block;
}

/* ============================================================
   HANDOFF · 60.1 §03 Surface 03 — Reputation console.
   Two bespoke tab vocabularies the canonical screen-reputation.jsx
   pins down: a boxed top-tab strip for the 7 admin surfaces, and a
   plain mono-caps sub-tab strip for the Community Level / Standing
   facet pairs (Ladder + Source Rules / Tiers + Source Rules).

   Distinct from MuniSubTabs (§-letter Pattern A) so the §-letter
   typewriter vocab stays the Dossier-tab convention; Reputation is
   its own tighter grid + boxed-frame look.

   Visibility-toggle helper .muni-tabpanel--hidden keeps all panels
   mounted (matches the KeepPanelsAlive=true contract on MudTabs)
   so any inline <MuniDialog> / <MuniBulkPasteDialog> siblings from
   MuniConfigEditor never dispose mid-render -- the Phase 59.1
   ReputationHub ObjectDisposedException crash mode.
   ============================================================ */

.muni-rep-tabs {
    display: flex;
    border: 1px solid var(--muni-hair);
    background: var(--muni-paper-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 18px;
}

.muni-rep-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    white-space: nowrap;
    transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
}

.muni-rep-tab:not(:last-child) {
    border-right: 1px solid var(--muni-hair);
}

.muni-rep-tab:hover {
    color: var(--muni-ink);
}

.muni-rep-tab:focus-visible {
    outline: 2px solid var(--muni-ink);
    outline-offset: -2px;
}

.muni-rep-tab--active {
    background: var(--muni-paper);
    border-bottom: 2px solid var(--muni-stamp-ink);
    color: var(--muni-ink);
}

.muni-rep-tab__glyph {
    font-size: 12px;
    color: var(--muni-ink-mute);
    line-height: 1;
}

.muni-rep-tab--active .muni-rep-tab__glyph {
    color: var(--muni-stamp-ink);
}

.muni-rep-subtabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid var(--muni-hair);
    margin-bottom: 18px;
}

.muni-rep-subtab {
    padding: 9px 16px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--muni-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    transition: color 90ms ease, border-color 90ms ease;
}

.muni-rep-subtab:hover {
    color: var(--muni-ink);
}

.muni-rep-subtab:focus-visible {
    outline: 2px solid var(--muni-ink);
    outline-offset: -2px;
}

.muni-rep-subtab--active {
    border-bottom: 2px solid var(--muni-stamp-ink);
    color: var(--muni-ink);
}

/* Shared visibility-toggle helper used by Reputation tab panels and any
   other surface that wants KeepPanelsAlive semantics without MudTabs.
   When applied to a panel container, that panel stays mounted (all child
   state + render trees survive) but is removed from layout flow. */
.muni-tabpanel--hidden {
    display: none;
}

/* Top-tab panel container. The active panel inherits the page paper
   surface (no card chrome). The `--flat` modifier is stamped when the
   panel does NOT host a sub-tab strip, so it picks up the uniform top
   breathing room the sub-tab strip would otherwise provide on the
   sub-tabbed panels (Community Level / Standing get a 1px ink-hair
   bottom rule + 18px gap from .muni-rep-subtabs; flat panels reproduce
   that by adding a soft separator + matching top padding).

   UAT v4: with the breadcrumb hoisted out of MuniConfigEditor and into
   the Compose host, the `--flat` panels no longer need their own top
   border (the .muni-rep-crumbs row above them provides the separation).
   The modifier still stamps a small top-padding so the panel content
   doesn't slam up against the breadcrumb baseline. */
.muni-rep-toppanel {
    background: transparent;
}

.muni-rep-toppanel--flat {
    padding-top: 4px;
}

/* Hoisted breadcrumb row -- single source of truth between the top-tab
   strip and the sub-tab strip / panel content. Mono caps, ink-mute,
   wide letter-spacing. Renders for every active tab regardless of
   whether sub-tabs are present, so the breadcrumb baseline never moves
   between top-tab changes. */
.muni-rep-crumbs {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    padding: 4px 0 12px;
    margin: 0;
}

/* Compose.razor's Templates utility bar (replaces the previous opaque
   MudPaper). Plain flex bar on the page surface; no card chrome. */
.muni-rep-utility-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    background: transparent;
    padding: 0;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.muni-rep-utility-bar__note {
    font-family: var(--muni-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--muni-ink-soft);
    line-height: 1.5;
    flex: 1 1 auto;
    min-width: 0;
}

/* Within the Reputation surface, force MudBlazor chrome elements to
   inherit the page paper background instead of painting their own
   opaque surface. Project convention: !important on the contested
   property, not selector specificity (see
   reference_mudblazor_css_override_use_important_not_specificity).
   Scoped to .muni-rep-surface so /operations/citizens/{id} and other
   MudPaper / MudExpansionPanels consumers stay untouched.

   Selector list intentionally exhaustive — MudExpansionPanels renders
   six nested wrappers (panels → panel → header → text + icon, plus
   collapse-container → collapse-wrapper → expand-panel-content) and
   most of them paint their own --mud-palette-background fill that
   reads as a 1-2% opaque overlay against the civic paper. */
.muni-rep-surface .mud-paper,
.muni-rep-surface .mud-expansion-panels,
.muni-rep-surface .mud-expand-panel,
.muni-rep-surface .mud-expand-panel-header,
.muni-rep-surface .mud-expand-panel-text,
.muni-rep-surface .mud-expand-panel-icon,
.muni-rep-surface .mud-expand-panel-content,
.muni-rep-surface .mud-collapse-container,
.muni-rep-surface .mud-collapse-wrapper,
.muni-rep-surface .mud-collapse-wrapper-inner,
.muni-rep-surface .mud-elevation-0,
.muni-rep-surface .mud-elevation-1,
.muni-rep-surface .mud-elevation-2 {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

/* MudExpansionPanel header text: pick up the civic serif family so
   "Available tokens" reads as a section heading, not a chip label. */
.muni-rep-surface .mud-expand-panel-header .mud-typography {
    font-family: var(--muni-serif) !important;
    font-size: 15px !important;
    color: var(--muni-ink) !important;
}

/* MudExpansionPanel: drop the 1px ink rule on the bottom of the
   header into a hair rule consistent with the surface vocabulary. */
.muni-rep-surface .mud-expand-panel-header {
    border-bottom: 1px solid var(--muni-hair) !important;
}

/* The whole expansion-panels wrapper sometimes paints a top border
   from .mud-paper-outlined. Kill that border too so the disclosure
   reads as an inline section on the paper, not a card. */
.muni-rep-surface .mud-expansion-panels.mud-paper-outlined,
.muni-rep-surface .mud-expand-panel.mud-paper-outlined {
    border: none !important;
}

/* ============================================================
   HANDOFF · 04 §C — Public Character Directory.
   Filing-cabinet aesthetic. The page is the open drawer the dossier
   folders live in: brass label up top (per §C·0 — chosen over the
   folder-tab variant so the registry doesn't read as one giant
   folder), masthead-style head + civic toolbar, then a 4-up grid of
   bordered cards. Each card has a stamp-red roll-№ flag, an optional
   verified pill, a 1:1 portrait with bottom nickname/since-month
   strip, and a body section with serif h4 / mono subtitle / italic
   blurb / dashed-rule footer.
   ============================================================ */

.muni-directory {
    width: 100%;
    max-width: var(--muni-page-max);
    margin: 0 auto;
    padding: var(--muni-space-6) var(--muni-space-4) var(--muni-space-7);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

/* Brass-framed drawer label per §C·0 spec. Centered above the paper,
   bleeds 1.5px down so it reads as attached to the drawer-front. */
.muni-directory__drawer-label {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--muni-space-3);
    margin-bottom: -1.5px;
    padding: 8px 26px;
    border: 2px solid var(--mud-palette-warning);
    background: linear-gradient(180deg,
        color-mix(in srgb, var(--mud-palette-warning) 28%, var(--mud-palette-background)),
        color-mix(in srgb, var(--mud-palette-warning) 50%, var(--mud-palette-background)));
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    position: relative;
    z-index: 2;
}

.muni-directory__drawer-label::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid var(--mud-palette-warning);
    opacity: 0.5;
    pointer-events: none;
}

.muni-directory__drawer-label-bracket {
    opacity: 0.55;
}

.muni-directory__drawer-label-text b {
    font-weight: 700;
}

/* The paper the cards sit on. Same ink hairline border + drop shadow
   as the dossier folder so the registry visually rhymes with what
   it links into. */
.muni-directory__paper {
    background: var(--mud-palette-background);
    border: 1.5px solid var(--mud-palette-text-primary);
    box-shadow: 3px 5px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    padding: var(--muni-space-7) var(--muni-space-6) var(--muni-space-7);
    background-image: var(--muni-paper-noise);
}

/* Masthead-style head — crumbs / serif h3 / italic lede on the left,
   "{N} ON FILE" + page info on the right. Ink rule below. */
.muni-directory__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: var(--muni-space-3);
    margin-bottom: var(--muni-space-5);
    position: relative;
}

.muni-directory__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    opacity: 0.7;
}

.muni-directory__crumbs {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: var(--muni-space-2);
}

.muni-directory__title {
    font-family: var(--muni-serif);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.6px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-directory__lede {
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: var(--muni-space-2) 0 0;
    max-width: 56ch;
}

.muni-directory__head-right {
    text-align: right;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-directory__head-right b {
    display: block;
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.3px;
    text-transform: none;
    margin-bottom: 2px;
}

.muni-directory__head-pageinfo {
    display: block;
}

/* Civic-form toolbar. Mono-caps inline label, serif-ish value, light
   ink box-frame around each field. Reuses the same dotted/dashed-rule
   visual language as the dossier ledger. */
.muni-directory__toolbar {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) auto;
    gap: var(--muni-space-3);
    align-items: stretch;
    margin-bottom: var(--muni-space-6);
}

.muni-directory__field {
    display: flex;
    align-items: baseline;
    gap: var(--muni-space-2);
    border: 1px solid var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background));
    padding: 8px 12px;
    min-width: 0;
}

.muni-directory__field label {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.muni-directory__field input,
.muni-directory__field select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
    outline: none;
}

.muni-directory__field input::placeholder {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.muni-directory__field--search input::before {
    /* glyph rendered via JS-free pseudo on the field rather than the input */
}

.muni-directory__field--search::before {
    content: "\2315";
    font-family: var(--muni-mono);
    color: var(--mud-palette-text-secondary);
    margin-right: 4px;
}

.muni-directory__field--select::after {
    content: "\25BE";
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-left: 4px;
    align-self: center;
}

.muni-directory__pageinfo {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 4px 8px;
}

.muni-directory__pageinfo b {
    font-family: var(--muni-serif);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.3px;
    margin-bottom: 1px;
    text-transform: none;
}

/* Card grid. 4 columns >=1280, 3 @ 1024, 2 @ 768, 1 below.
   Per spec: gap 24px column / 22px row; spec values mirrored. */
.muni-directory__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--muni-space-5) 22px;
}

@media (max-width: 1280px) {
    .muni-directory__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1024px) {
    .muni-directory__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .muni-directory__grid { grid-template-columns: 1fr; }
}

.muni-directory__card {
    background: var(--mud-palette-background);
    border: 1.5px solid var(--mud-palette-text-primary);
    box-shadow: 2px 3px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    position: relative;
    transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.muni-directory__card:hover {
    transform: translateY(-1px);
    box-shadow: 3px 4px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-directory__card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* Roll-№ flag — top-left, stamp-red, downward-triangle clip. */
.muni-directory__roll-tab {
    position: absolute;
    top: 0;
    left: 14px;
    background: var(--mud-palette-error);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 3px 8px 4px;
    z-index: 3;
}

.muni-directory__roll-tab::after {
    content: "";
    position: absolute;
    bottom: -6px;
    left: 0;
    right: 0;
    border-top: 6px solid var(--mud-palette-error);
    clip-path: polygon(0 0, 50% 100%, 100% 0);
}

/* Verified pill — top-right, rotated -8°, single-line. Per §C·4
   spec the wrap was a glitch; pill is the cleaner stamp metaphor. */
.muni-directory__verified {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 3;
    border: 1.5px solid var(--mud-palette-success);
    color: var(--mud-palette-success);
    background: color-mix(in srgb, var(--mud-palette-success) 12%, var(--mud-palette-background));
    transform: rotate(-8deg);
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 3px 8px;
    line-height: 1;
}

/* Portrait — 1:1 aspect (HANDOFF · 04 §C·1 + Nika locked: portraits
   uploaded as 1:1, must maintain). Bottom strip overlays the photo. */
.muni-directory__portrait {
    aspect-ratio: 1 / 1;
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-divider) 60%, var(--mud-palette-background)),
        color-mix(in srgb, var(--mud-palette-text-primary) 35%, var(--mud-palette-background)));
    border-bottom: 1.5px solid var(--mud-palette-text-primary);
    position: relative;
    overflow: hidden;
}

.muni-directory__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.muni-directory__silhouette {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    fill: color-mix(in srgb, var(--mud-palette-text-primary) 40%, transparent);
    opacity: 0.7;
}

.muni-directory__meta-strip {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 88%, transparent);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 10px;
    display: flex;
    justify-content: space-between;
    gap: var(--muni-space-2);
}

.muni-directory__meta-strip span:empty {
    /* Spec §C·3: empty alias case — strip stays rendered as visual
       anchor even when the left-hand label is blank. */
    min-height: 1em;
}

.muni-directory__body {
    padding: var(--muni-space-3) var(--muni-space-3) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1 1 auto;
}

.muni-directory__display-name {
    font-family: var(--muni-serif);
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
}

.muni-directory__sub {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: -2px 0 0;
}

.muni-directory__blurb {
    font-family: var(--muni-serif);
    font-size: 0.84rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0;
}

.muni-directory__card-footer {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    margin-top: 6px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 30%, transparent);
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
}

.muni-directory__open {
    color: var(--mud-palette-primary);
    font-weight: 700;
}

/* Skeleton loading state — same dimensions, paper-soft fill, dashed
   shimmer animation. Renders one skeleton per slot in the page. */
.muni-directory__card--skeleton {
    pointer-events: none;
    cursor: default;
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background));
}

.muni-directory__card--skeleton:hover {
    transform: none;
    box-shadow: 2px 3px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 16%, transparent);
}

.muni-directory__skeleton-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent),
        transparent);
    background-size: 200% 100%;
    animation: muni-directory-shimmer 1.6s linear infinite;
}

.muni-directory__skeleton-line {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, transparent);
    border-radius: 1px;
    height: 12px;
}

.muni-directory__skeleton-line--title { width: 70%; height: 18px; }
.muni-directory__skeleton-line--sub { width: 55%; height: 10px; }
.muni-directory__skeleton-line--blurb { width: 92%; height: 10px; }

@keyframes muni-directory-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Empty / no-results / error states. Plain serif italic blocks
   centered on the paper. No card chrome — the page tells the user
   plainly that the registry is empty. */
.muni-directory__empty,
.muni-directory__no-results,
.muni-directory__error {
    text-align: center;
    padding: var(--muni-space-7) var(--muni-space-4);
    font-family: var(--muni-serif);
    font-size: 1.05rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.muni-directory__error em {
    color: var(--mud-palette-error);
}

.muni-directory__clear-filters {
    display: inline-block;
    margin-top: var(--muni-space-3);
    padding: 6px 14px;
    background: transparent;
    border: 1px solid var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.12s ease;
}

.muni-directory__clear-filters:hover,
.muni-directory__clear-filters:focus-visible {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    outline: none;
}

/* Pager — square mono buttons, stamp-style active state. */
.muni-directory__pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--muni-space-7);
    padding-top: var(--muni-space-4);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    flex-wrap: wrap;
}

.muni-directory__pager-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.muni-directory__pager-btn:hover:not(:disabled),
.muni-directory__pager-btn:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));
    outline: none;
}

.muni-directory__pager-btn--active {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-directory__pager-btn--active:hover {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-directory__pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.muni-directory__pager-btn--prev,
.muni-directory__pager-btn--next {
    font-size: 1.1rem;
    font-weight: 600;
}

.muni-directory__pager-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 32px;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
}

/* ============================================================
   Style Guide page (/styleguide). Internal developer reference;
   civic chrome inherited from MuniPage / MuniSection. The classes
   below only style the demo blocks (swatches, type rows, code).
   ============================================================ */

.muni-styleguide__lede {
    font-family: var(--muni-serif);
    font-size: 1.05rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    max-width: 64ch;
    margin: 0 0 var(--muni-space-5);
}

.muni-styleguide__h4 {
    font-family: var(--muni-serif);
    font-size: 1.05rem;
    font-weight: 600;
    letter-spacing: -0.2px;
    margin: var(--muni-space-5) 0 var(--muni-space-3);
    color: var(--mud-palette-text-primary);
}

.muni-styleguide__note {
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--muni-space-3);
    max-width: 70ch;
}

.muni-styleguide__note code,
.muni-styleguide__refs code {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    background: color-mix(in srgb, var(--mud-palette-divider) 28%, var(--mud-palette-background));
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    padding: 1px 5px;
    border-radius: 1px;
    color: var(--mud-palette-text-primary);
}

/* Color swatches */
.muni-styleguide__swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: var(--muni-space-3);
    margin: 0 0 var(--muni-space-5);
}

.muni-styleguide__swatch {
    display: flex;
    align-items: stretch;
    gap: var(--muni-space-3);
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    padding: 0;
    overflow: hidden;
}

.muni-styleguide__swatch-chip {
    width: 56px;
    flex-shrink: 0;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-styleguide__swatch-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8px 12px;
    min-width: 0;
}

.muni-styleguide__swatch-meta code {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-primary);
    word-break: break-all;
}

.muni-styleguide__swatch-meta span {
    font-family: var(--muni-serif);
    font-size: 0.78rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* Type rows */
.muni-styleguide__type {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
    margin: 0 0 var(--muni-space-5);
    border-top: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-styleguide__type-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--muni-space-4);
    align-items: baseline;
    padding: var(--muni-space-3) 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-styleguide__type-meta {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Spacing scale */
.muni-styleguide__spacing {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    margin: 0 0 var(--muni-space-5);
}

.muni-styleguide__spacing-row {
    display: grid;
    grid-template-columns: 160px 1fr 60px;
    gap: var(--muni-space-3);
    align-items: center;
}

.muni-styleguide__spacing-row code {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
}

.muni-styleguide__spacing-bar {
    height: 8px;
    background: var(--mud-palette-text-primary);
    max-width: 100%;
}

.muni-styleguide__spacing-row span {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    text-align: right;
}

/* Atom rows */
.muni-styleguide__atoms {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
    margin: 0 0 var(--muni-space-4);
}

.muni-styleguide__atom-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--muni-space-4);
    align-items: center;
    padding: var(--muni-space-2) 0;
    border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-styleguide__atom-row code {
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* CSS Grid blockifies all direct children — a <span class="muni-stamp">
   would otherwise stretch to fill the 1fr column AND rotate, drawing a
   long diagonal sash. Pin inline first-children (stamps, pills) to
   shrink-to-content; the rule rows use <div style="width:100%"> as
   their first child so they're unaffected. */
.muni-styleguide__atom-row > span:first-child {
    justify-self: start;
    width: max-content;
}

/* ============================================================
   Wave 7a — Citizen Dashboard. Civic chrome around state branches
   (loading / access-restricted / welcome / registered). The
   character-card grid retains its app.css styling; only the
   surrounding chrome changes here.
   ============================================================ */

.muni-citizen-dashboard__state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--muni-space-3);
    padding: var(--muni-space-7) var(--muni-space-4);
}

.muni-citizen-dashboard__state-text {
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: 0;
}

/* Welcome / new-citizen application panel. Replaces the prior MudCard
   landing block with civic typography — eyebrow + serif headline +
   §-letter checklist + civic-stamped CTA. */
.muni-citizen-dashboard__welcome {
    border: 1.5px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    box-shadow: 4px 6px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
    padding: var(--muni-space-6) var(--muni-space-6) var(--muni-space-5);
    max-width: 760px;
    margin: 0 auto;
}

.muni-citizen-dashboard__welcome-eyebrow {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: var(--muni-space-3);
}

.muni-citizen-dashboard__welcome-title {
    font-family: var(--muni-serif);
    font-size: 2.4rem;
    font-weight: 600;
    letter-spacing: -0.6px;
    margin: 0 0 var(--muni-space-3);
    color: var(--mud-palette-text-primary);
}

.muni-citizen-dashboard__welcome-lede {
    font-family: var(--muni-serif);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: 0 0 var(--muni-space-4);
    max-width: 60ch;
}

.muni-citizen-dashboard__welcome-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--muni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-dashboard__welcome-list li {
    display: flex;
    align-items: baseline;
    gap: var(--muni-space-3);
    padding-bottom: var(--muni-space-2);
    border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-citizen-dashboard__welcome-list li:last-child {
    border-bottom: none;
}

.muni-citizen-dashboard__welcome-list li strong {
    flex: 0 0 auto;
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-dashboard__welcome-cta {
    /* Inherits .muni-dialog__btn--primary */
    align-self: flex-end;
    margin-left: auto;
    display: block;
    width: max-content;
    margin-top: var(--muni-space-4);
}

/* Quick Access action button — full-width clickable inside MuniSection §B. */
.muni-citizen-dashboard__quick-action {
    appearance: none;
    -webkit-appearance: none;
    width: 100%;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: var(--muni-space-3);
    align-items: center;
    background: var(--mud-palette-background);
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    padding: var(--muni-space-3) var(--muni-space-4);
    cursor: pointer;
    text-align: left;
    transition: background 0.12s ease, border-color 0.12s ease;
}

.muni-citizen-dashboard__quick-action:hover,
.muni-citizen-dashboard__quick-action:focus-visible {
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background));
    border-color: var(--mud-palette-text-primary);
    outline: none;
}

.muni-citizen-dashboard__quick-action-glyph {
    font-family: var(--muni-serif);
    font-size: 1.4rem;
    color: var(--mud-palette-success);
    line-height: 1;
}

.muni-citizen-dashboard__quick-action-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.muni-citizen-dashboard__quick-action-body strong {
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-dashboard__quick-action-body em {
    font-family: var(--muni-serif);
    font-size: 0.85rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-dashboard__quick-action-arrow {
    font-family: var(--muni-mono);
    font-size: 1.4rem;
    color: var(--mud-palette-text-secondary);
}

/* Wave 12.1 IA refactor — flashy admin tile above the §A/§B grid that
   opens the new `/dashboard/settings` (was `/settings/community/basic`).
   Higher visual weight than the standard MuniSection tiles below so admins
   spot it; gated to CommunityAdmin at the embed site so it doesn't render
   for non-admins. */
.muni-citizen-dashboard__admin-settings-card {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--muni-space-4);
    padding: var(--muni-space-4) var(--muni-space-5);
    margin-bottom: var(--muni-space-3);
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    box-shadow: 2px 2px 0 var(--mud-palette-text-primary);
    text-decoration: none;
    color: var(--mud-palette-text-primary);
    transition: background 0.12s ease, transform 0.12s ease;
}
.muni-citizen-dashboard__admin-settings-card:hover,
.muni-citizen-dashboard__admin-settings-card:focus-visible {
    background: var(--muni-paper-soft);
    transform: translate(-1px, -1px);
    box-shadow: 3px 3px 0 var(--mud-palette-text-primary);
    outline: none;
}

.muni-citizen-dashboard__admin-settings-card-body {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-1);
    min-width: 0;
}

.muni-citizen-dashboard__admin-settings-card-eyebrow {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-dashboard__admin-settings-card-title {
    font-family: var(--muni-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-dashboard__admin-settings-card-lede {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    max-width: 56ch;
}

.muni-citizen-dashboard__admin-settings-card-stamp {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muni-brass);
    border: 1.5px solid var(--muni-brass);
    padding: var(--muni-space-2) var(--muni-space-3);
    transform: rotate(-2deg);
    flex-shrink: 0;
    background: color-mix(in srgb, var(--muni-brass) 8%, transparent);
}

/* ============================================================
   MuniCitizenCard — shared filing-cabinet card for citizen / character
   surfaces (Public CharacterDirectory, Citizen Dashboard My Characters,
   future Wave 9 admin listing). Reuses .muni-directory__card et al.
   from §C; only adds the two new visual primitives below (initials
   placeholder when no portrait, primary-character star marker).
   ============================================================ */

.muni-citizen-card__initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-serif);
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--mud-palette-background);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 55%, var(--mud-palette-background)),
        color-mix(in srgb, var(--mud-palette-text-primary) 75%, var(--mud-palette-background)));
}

.muni-citizen-card__primary-mark {
    display: inline-block;
    margin-left: 6px;
    color: var(--mud-palette-warning);
    font-size: 0.9em;
    line-height: 1;
    vertical-align: 2px;
    cursor: help;
}

/* Staff-side status pill (e.g. "Inactive") on the citizen card. Parallels
   .muni-group-card__status-badge (Wave 8 finale). Positioned below the
   Verified pill so a card with both renders as a small stack rather than
   colliding. Rotated +2deg to break the grid like the verified pill does. */
.muni-citizen-card__status-badge {
    position: absolute;
    top: 36px;
    right: 10px;
    z-index: 3;
    font-family: var(--muni-mono);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1.5px solid currentColor;
    background: color-mix(in srgb, var(--mud-palette-background) 92%, transparent);
    transform: rotate(2deg);
    line-height: 1.1;
}

.muni-citizen-card__status-badge--success { color: var(--mud-palette-success); }
.muni-citizen-card__status-badge--warning { color: var(--mud-palette-warning); }
.muni-citizen-card__status-badge--error   { color: var(--mud-palette-error); }
.muni-citizen-card__status-badge--secondary { color: var(--mud-palette-text-secondary); }
.muni-citizen-card__status-badge--info    { color: var(--mud-palette-info); }
.muni-citizen-card__status-badge--primary { color: var(--mud-palette-primary); }

/* ─── MuniGroupCard (Wave 8 §F·2) ───────────────────────────────────────────
   Sibling to MuniCitizenCard; lifts the same .muni-directory__card outer
   skeleton + portrait + body. The portrait area has three fallback layers
   (image -> Material icon on tinted paper -> monogram) and the body trades
   the citizen "Open dossier" footer for "View group". */

.muni-group-card__portrait img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--mud-palette-background);
}

.muni-group-card__icon-frame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-background));
}

.muni-group-card__icon-frame .mud-icon-root {
    font-size: 3.5rem !important;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 55%, var(--mud-palette-background));
}

.muni-group-card__monogram {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-serif);
    font-size: 4rem;
    font-weight: 600;
    letter-spacing: -1px;
    color: var(--mud-palette-background);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--mud-palette-text-primary) 55%, var(--mud-palette-background)),
        color-mix(in srgb, var(--mud-palette-text-primary) 75%, var(--mud-palette-background)));
}

.muni-group-card__name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.muni-group-card__blurb {
    font-style: italic;
}

/* Top-right status pill (staff cards only — Active / Hidden). Same rotated
   stamp idiom as MuniCitizenCard's verified pill, semantic palette per
   StatusBadgeColor. Positioned absolute inside .muni-directory__card. */
.muni-group-card__status-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-family: var(--muni-mono);
    font-size: 0.59rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1.5px solid currentColor;
    background: color-mix(in srgb, var(--mud-palette-background) 92%, transparent);
    transform: rotate(2deg);
    line-height: 1.1;
}

.muni-group-card__status-badge--success {
    color: var(--mud-palette-success);
}

.muni-group-card__status-badge--warning {
    color: var(--mud-palette-warning);
}

.muni-group-card__status-badge--error {
    color: var(--mud-palette-error);
}

.muni-group-card__status-badge--secondary {
    color: var(--mud-palette-text-secondary);
}

.muni-group-card__status-badge--info {
    color: var(--mud-palette-info);
}

.muni-group-card__status-badge--primary {
    color: var(--mud-palette-primary);
}

/* ─── Type tab strip (Wave 8 §F·4) ──────────────────────────────────────────
   Drawer-tab row sitting just above the toolbar. Brass-edged tabs, ~32px
   tall, active tab carries a 2px ink underline. Flagged for extraction into
   a shared component on second-consumer. */

.muni-directory__type-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin: 0 0 var(--muni-space-3);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-directory__type-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 8px 14px;
    margin: 0;
    font-family: var(--muni-mono);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    line-height: 1;
}

.muni-directory__type-tab:hover,
.muni-directory__type-tab:focus-visible {
    color: var(--mud-palette-text-primary);
}

.muni-directory__type-tab--active {
    color: var(--mud-palette-text-primary);
    border-bottom-color: var(--mud-palette-text-primary);
}

/* Wrapper documentation cards */
.muni-styleguide__wrapper {
    border: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    background: var(--mud-palette-background);
    padding: var(--muni-space-4);
    margin: 0 0 var(--muni-space-3);
}

.muni-styleguide__wrapper-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
    margin-bottom: var(--muni-space-2);
    padding-bottom: var(--muni-space-2);
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

.muni-styleguide__wrapper-name {
    font-family: var(--muni-mono);
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: none;
    padding: 0;
}

.muni-styleguide__badge {
    font-family: var(--muni-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 8px;
    border: 1px solid currentColor;
    flex-shrink: 0;
}

.muni-styleguide__badge--ok {
    color: var(--mud-palette-success);
}

.muni-styleguide__badge--todo {
    color: var(--mud-palette-warning);
}

.muni-styleguide__wrapper-summary {
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--muni-space-3);
}

.muni-styleguide__wrapper-source {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.5px;
    padding-top: var(--muni-space-2);
    border-top: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

.muni-styleguide__code {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    line-height: 1.55;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 92%, var(--mud-palette-background));
    color: var(--mud-palette-background);
    padding: var(--muni-space-3) var(--muni-space-4);
    margin: 0 0 var(--muni-space-3);
    overflow-x: auto;
    white-space: pre;
    border-left: 3px solid var(--mud-palette-warning);
}

.muni-styleguide__code code {
    font: inherit;
    color: inherit;
    background: transparent;
    padding: 0;
}

/* Reference list */
.muni-styleguide__refs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
}

.muni-styleguide__refs li {
    padding-left: var(--muni-space-3);
    border-left: 2px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    line-height: 1.5;
}

.muni-styleguide__refs li strong {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

/* ============================================================
   MuniDialog — civic dialog wrapper around MudDialog.

   Provides a typewriter-style title bar (mono caps eyebrow + serif
   title + optional subtitle), paper-noise body, and standardized
   action footer. Variants (Audit / Danger) swap the title-bar ink
   to stamp-red and add the audit tag for logged operations.
   ============================================================ */

.muni-dialog .mud-dialog {
    background: var(--mud-palette-background) !important;
    background-image: var(--muni-paper-noise) !important;
    border: 1.5px solid var(--mud-palette-text-primary) !important;
    border-radius: 0 !important;
    box-shadow: 6px 8px 0 0 color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent),
                0 0 0 1px color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent) !important;
    overflow: hidden;
}

.muni-dialog .mud-dialog-title {
    padding: 0 !important;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    background: transparent;
}

.muni-dialog__title-bar {
    padding: var(--muni-space-4) var(--muni-space-5) var(--muni-space-3);
    position: relative;
}

.muni-dialog__title-bar::after {
    content: "";
    position: absolute;
    left: var(--muni-space-5);
    right: var(--muni-space-5);
    bottom: -3px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    opacity: 0.7;
}

.muni-dialog__eyebrow {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: var(--muni-space-2);
}

.muni-dialog__title-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
}

.muni-dialog__title {
    font-family: var(--muni-serif);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.4px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-dialog--audit .muni-dialog__title,
.muni-dialog--danger .muni-dialog__title {
    color: var(--mud-palette-error);
}

.muni-dialog__audit-tag {
    flex-shrink: 0;
    font-family: var(--muni-mono);
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-error);
}

.muni-dialog__subtitle {
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: var(--muni-space-2) 0 0;
    max-width: 60ch;
}

.muni-dialog .mud-dialog-content {
    padding: 0 !important;
    background: transparent;
}

.muni-dialog__body {
    padding: var(--muni-space-5) var(--muni-space-5) var(--muni-space-4);
    font-family: var(--muni-sans);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.muni-dialog .mud-dialog-actions {
    padding: 0 !important;
    background: transparent;
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-dialog__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: var(--muni-space-4) var(--muni-space-5);
    background: transparent;
}

/* Action buttons. Mono caps + hard ink shadow + hover lift, matching the
   masthead stamp-btn pattern from the dossier. Use Spacer / margin-auto
   for left-right grouping inside the Actions slot. */
.muni-dialog__btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: 1px 2px 0 0 var(--mud-palette-text-primary);
    transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
}

.muni-dialog__btn:hover:not(:disabled),
.muni-dialog__btn:focus-visible:not(:disabled) {
    transform: translate(-1px, -1px);
    box-shadow: 2px 3px 0 0 var(--mud-palette-text-primary);
    outline: none;
}

.muni-dialog__btn:active:not(:disabled) {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 0 var(--mud-palette-text-primary);
}

.muni-dialog__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.muni-dialog__btn--primary {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-dialog__btn--ghost {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
}

.muni-dialog__btn--ghost:hover:not(:disabled),
.muni-dialog__btn--ghost:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-divider) 35%, var(--mud-palette-background));
    box-shadow: none;
    transform: none;
}

.muni-dialog__btn--danger {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
    box-shadow: 1px 2px 0 0 var(--mud-palette-error);
}

.muni-dialog__btn--danger:hover:not(:disabled),
.muni-dialog__btn--danger:focus-visible:not(:disabled) {
    box-shadow: 2px 3px 0 0 var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background));
}

/* Spacer helper for action footer left/right grouping. */
.muni-dialog__actions-spacer {
    flex: 1 1 auto;
}

/* ============================================================
   MuniLedger — page chrome + civic table skin for tabular admin /
   listing pages. Designed to host either a plain HTML <table> or a
   <MudTable> (with .muni-ledger-table class) inside its body slot.
   Toolbar field classes mirror the directory's pattern; pager classes
   mirror the directory's pager.
   ============================================================ */

.muni-ledger {
    width: 100%;
    max-width: var(--muni-page-max);
    margin: 0 auto;
    padding: var(--muni-space-5) var(--muni-space-4) var(--muni-space-7);
    display: flex;
    flex-direction: column;
}

.muni-ledger__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: var(--muni-space-3);
    margin-bottom: var(--muni-space-4);
    position: relative;
}

.muni-ledger__head::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    opacity: 0.7;
}

.muni-ledger__crumbs {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: var(--muni-space-2);
}

.muni-ledger__title {
    font-family: var(--muni-serif);
    font-size: 2rem;
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-ledger__lede {
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    margin: var(--muni-space-2) 0 0;
    max-width: 60ch;
}

.muni-ledger__head-right {
    text-align: right;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-ledger__head-right b {
    display: block;
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    letter-spacing: -0.3px;
    text-transform: none;
    margin-bottom: 2px;
}

/* Toolbar — civic-form fields. Caller wraps each input in
   .muni-ledger__field. See .muni-directory__field for the spec. */
.muni-ledger__toolbar {
    display: flex;
    gap: var(--muni-space-3);
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: var(--muni-space-4);
}

.muni-ledger__field {
    display: flex;
    align-items: baseline;
    gap: var(--muni-space-2);
    border: 1px solid var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background));
    padding: 8px 12px;
    min-width: 0;
    flex: 1 1 200px;
}

.muni-ledger__field--auto {
    flex: 0 0 auto;
}

.muni-ledger__field label {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    flex: 0 0 auto;
}

.muni-ledger__field input,
.muni-ledger__field select {
    appearance: none;
    -webkit-appearance: none;
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    padding: 0;
    margin: 0;
    outline: none;
}

.muni-ledger__field input::placeholder {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.muni-ledger__body {
    /* No padding — the table/grid the caller renders is the surface. */
}

/* Civic table skin. Apply to a plain HTML <table> via class, or to a
   MudTable via Class="muni-ledger-table". Hairline borders, mono caps
   header, dashed-rule rows. */
.muni-ledger-table,
.muni-ledger-table table {
    width: 100%;
    border-collapse: collapse;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    font-family: var(--muni-sans);
    font-size: 0.92rem;
    color: var(--mud-palette-text-primary);
}

.muni-ledger-table thead,
.muni-ledger-table .mud-table-head {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 92%, var(--mud-palette-background));
}

.muni-ledger-table thead th,
.muni-ledger-table .mud-table-head th {
    color: var(--mud-palette-background);
    font-family: var(--muni-mono) !important;
    font-size: 0.62rem !important;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1.5px solid var(--mud-palette-text-primary);
}

.muni-ledger-table tbody tr,
.muni-ledger-table .mud-table-row {
    border-bottom: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 24%, transparent);
}

.muni-ledger-table tbody tr:last-child,
.muni-ledger-table .mud-table-row:last-child {
    border-bottom: none;
}

.muni-ledger-table tbody tr:hover {
    background: color-mix(in srgb, var(--mud-palette-divider) 16%, var(--mud-palette-background));
}

.muni-ledger-table td,
.muni-ledger-table .mud-table-cell {
    padding: 10px 12px;
    vertical-align: top;
}

.muni-ledger-table td.muni-ledger-table__num,
.muni-ledger-table td.numeric {
    font-family: var(--muni-mono);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.muni-ledger-table td.muni-ledger-table__id {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    color: var(--mud-palette-text-secondary);
}

/* Row-action anchors — mono-caps text affordances replacing the old MUI
   stack of MudIconButtons. Civic admin tables use a small inline cluster
   on the right edge of each row. Destructive Delete is stamp-red; others
   inherit ink-soft. Dashed underline on hover signals interactivity without
   the heavy box of a button. */
.muni-ledger-table__actions {
    display: inline-flex;
    gap: var(--muni-space-3);
    align-items: center;
    white-space: nowrap;
}

.muni-ledger-table__actions a,
.muni-ledger-table__actions button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
}

.muni-ledger-table__actions a:hover,
.muni-ledger-table__actions button:hover {
    color: var(--mud-palette-text-primary);
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}

.muni-ledger-table__actions .muni-ledger-table__action--danger {
    color: var(--muni-stamp-ink);
}

.muni-ledger-table__actions .muni-ledger-table__action--danger:hover {
    color: var(--muni-stamp-ink);
}

/* Pending-assignment caption for null plate cells in admin ledgers.
   Mono-caps ink-mute italic — the absence of a plate frame is itself the
   affordance (Wave 10 §B·1·d). */
.muni-ledger-table__pending {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Empty / loading / no-results — reuse directory's centered italic
   convention so the visual language stays consistent. */
.muni-ledger__empty,
.muni-ledger__no-results,
.muni-ledger__loading {
    text-align: center;
    padding: var(--muni-space-7) var(--muni-space-4);
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    border: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

/* Pager — same shape as the directory pager, scoped to ledger. */
.muni-ledger__pager {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-top: var(--muni-space-5);
    padding-top: var(--muni-space-3);
    border-top: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
    flex-wrap: wrap;
}

.muni-ledger__pager-btn {
    appearance: none;
    -webkit-appearance: none;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.muni-ledger__pager-btn:hover:not(:disabled) {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));
}

.muni-ledger__pager-btn--active {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-ledger__pager-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ============================================================
   MuniDossier -- folder frame, tabs, identity strip, two-column body
   ============================================================ */

.muni-dossier {
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0 var(--muni-space-4) var(--muni-space-7);
    max-width: var(--muni-page-max);
}

.muni-dossier__tabs {
    display: flex;
    gap: 4px;
    padding: 0 var(--muni-space-5);
    margin-bottom: -1px;
    z-index: 2;
}

.muni-dossier__tab {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 16px 10px;
    background: color-mix(in srgb, var(--mud-palette-background) 70%, var(--mud-palette-divider));
    border: 1px solid var(--mud-palette-text-primary);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    border-radius: 10px 10px 0 0;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    font-family: var(--muni-sans);
    font-size: 0.85rem;
    line-height: 1.1;
    transform: translateY(2px);
    transition: transform 120ms var(--muni-ease), background 120ms var(--muni-ease);
}

.muni-dossier__tab:hover {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    transform: translateY(0);
}

.muni-dossier__tab--active {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--mud-palette-background);
    transform: translateY(1px);
    z-index: 3;
}

.muni-dossier__tab-num {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--mud-palette-text-secondary);
}

.muni-dossier__tab--active .muni-dossier__tab-num {
    color: var(--mud-palette-primary);
}

.muni-dossier__tab-label {
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    letter-spacing: -0.2px;
}

.muni-dossier__folder {
    position: relative;
    background: var(--mud-palette-background);
    border: 1.5px solid var(--mud-palette-text-primary);
    box-shadow: 3px 5px 0 0 var(--mud-palette-text-primary);
    padding: var(--muni-space-6) var(--muni-space-6) var(--muni-space-7);
    background-image: var(--muni-paper-noise);
}

.muni-dossier__masthead {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: var(--muni-space-4);
    margin-bottom: var(--muni-space-5);
    position: relative;
}

.muni-dossier__masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    opacity: 0.7;
}

.muni-dossier__eyebrow {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-dossier__title {
    font-family: var(--muni-serif);
    font-size: 2.6rem;
    font-weight: 600;
    letter-spacing: -1px;
    line-height: 1.05;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-dossier__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-3);
    margin-top: var(--muni-space-2);
}

.muni-dossier__pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-dossier__pill-key {
    color: var(--mud-palette-text-secondary);
}

.muni-dossier__pill-value {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.muni-dossier__body {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
    gap: var(--muni-space-6);
    align-items: start;
}

.muni-dossier__col--left {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-5);
    min-width: 0;
}

.muni-dossier__col--ledger {
    position: relative;
    background: color-mix(in srgb, var(--mud-palette-divider) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    padding: var(--muni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-4);
    min-width: 0;
}

.muni-dossier__ledger-badge {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    padding: 2px 10px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

@media (max-width: 1080px) {
    .muni-dossier__body {
        grid-template-columns: 1fr;
    }
    .muni-dossier__col--ledger {
        margin-top: var(--muni-space-5);
    }
}

@media (max-width: 720px) {
    .muni-dossier__tabs {
        flex-wrap: wrap;
        padding: 0 var(--muni-space-3);
    }
    .muni-dossier__title {
        font-size: 2rem;
    }
    .muni-rental-card__row {
        grid-template-columns: auto 1fr;
        row-gap: var(--muni-space-2);
    }
    .muni-rental-card__paid-thru,
    .muni-rental-card__right {
        grid-column: 2;
        align-items: flex-start;
    }
}

/* ============================================================
   Public Character page (Rev 3) -- "Form 12-C · Character Affidavit"
   ============================================================ */

.muni-public-dossier {
    background: color-mix(in srgb, var(--mud-palette-divider) 32%, var(--mud-palette-background));
    background-image: var(--muni-paper-noise);
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-sans);
    padding: var(--muni-space-7) var(--muni-space-7) var(--muni-space-8);
    min-height: 100%;
}

.muni-public-dossier__inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
}

.muni-public-dossier__tab {
    display: inline-block;
    margin-left: 40px;
    margin-bottom: -1px;
    padding: 10px 36px 12px;
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    position: relative;
    z-index: 2;
}

.muni-public-dossier__folder {
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: 0 4px 4px 4px;
    padding: var(--muni-space-5) var(--muni-space-5);
    box-shadow: 2px 4px 0 0 var(--mud-palette-text-primary);
    position: relative;
}

.muni-public-dossier__paper {
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    border: 1px solid var(--mud-palette-divider);
    padding: var(--muni-space-6) var(--muni-space-7);
    position: relative;
}

.muni-public-dossier__corner-stamp {
    position: absolute;
    top: -8px;
    right: 32px;
    transform: rotate(2deg);
    background: var(--mud-palette-error);
    color: var(--mud-palette-error-text, #FFF);
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 6px 14px;
    box-shadow: 1px 2px 0 color-mix(in srgb, var(--mud-palette-text-primary) 20%, transparent);
    white-space: nowrap;
}

.muni-public-dossier__header {
    display: flex;
    align-items: flex-start;
    gap: var(--muni-space-6);
}

.muni-public-dossier__header-left {
    flex: 1;
    min-width: 0;
    padding-top: 6px;
}

.muni-public-dossier__eyebrow {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-public-dossier__title {
    font-family: var(--muni-serif);
    font-size: 3.2rem;
    font-weight: 600;
    letter-spacing: -1.4px;
    line-height: 1;
    margin: 8px 0 0;
    color: var(--mud-palette-text-primary);
}

.muni-public-dossier__byline {
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-style: italic;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 70%, var(--mud-palette-text-secondary));
    margin: 6px 0 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--mud-palette-text-primary);
}

.muni-public-dossier__byline-pronouns {
    font-family: var(--muni-mono);
    font-style: normal;
    font-size: 0.7rem;
    color: var(--mud-palette-text-secondary);
    margin-left: 6px;
}

.muni-public-dossier__vitals {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    border: 1px solid var(--mud-palette-divider);
    margin-top: var(--muni-space-4);
    background: color-mix(in srgb, var(--mud-palette-divider) 20%, var(--mud-palette-background));
}

.muni-public-dossier__vital {
    padding: 10px 14px;
    border-right: 1px dashed var(--mud-palette-divider);
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.muni-public-dossier__vital:nth-child(3n) { border-right: none; }
.muni-public-dossier__vital:nth-last-child(-n+3) { border-bottom: none; }

.muni-public-dossier__vital-label {
    font-family: var(--muni-mono);
    font-size: 0.58rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.muni-public-dossier__vital-value {
    font-family: var(--muni-mono);
    font-size: 0.82rem;
    margin-top: 4px;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
}

.muni-public-dossier__portrait-slot {
    flex-shrink: 0;
    /* Wave 7d·5 fix-up: room for the extended paperclip. 320px portrait, 5px
       eyeballed gives the clip clearance without breaking the calling card
       layout above. */
    margin-top: 5px;
}

.muni-public-dossier__section {
    margin-top: var(--muni-space-6);
}

.muni-public-dossier__section-prose {
    font-family: var(--muni-serif);
    font-size: 1rem;
    line-height: 1.65;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 80%, var(--mud-palette-text-secondary));
    margin: var(--muni-space-3) 0 0;
    text-wrap: pretty;
    white-space: pre-wrap;
}

.muni-public-dossier__backstory {
    margin-top: var(--muni-space-3);
    font-family: var(--muni-serif);
    font-size: 0.92rem;
    line-height: 1.75;
    color: var(--mud-palette-text-primary);
    text-wrap: pretty;
    column-count: 2;
    column-gap: var(--muni-space-6);
    column-rule: 1px dashed color-mix(in srgb, var(--mud-palette-divider) 70%, transparent);
}

.muni-public-dossier__backstory p {
    margin: 0 0 14px;
}

.muni-public-dossier__backstory p:first-child::first-letter {
    font-family: var(--muni-serif);
    font-size: 3.5rem;
    font-weight: 700;
    line-height: 0.9;
    float: left;
    margin-right: 8px;
    margin-top: 4px;
    color: var(--mud-palette-primary);
}

.muni-public-dossier__rep-grid {
    margin-top: var(--muni-space-3);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--muni-space-3);
}

.muni-public-dossier__rep-tile {
    border: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background));
    padding: 12px 14px;
}

.muni-public-dossier__rep-tag {
    font-family: var(--muni-mono);
    font-size: 0.58rem;
    letter-spacing: 1.6px;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    text-transform: uppercase;
}

.muni-public-dossier__rep-value {
    font-family: var(--muni-serif);
    font-size: 1.7rem;
    font-weight: 600;
    margin-top: 2px;
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.05;
}

.muni-public-dossier__rep-value-suffix {
    font-size: 0.85rem;
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
    margin-left: 4px;
}

.muni-public-dossier__rep-meter {
    height: 6px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-divider);
    margin-top: 8px;
    position: relative;
    overflow: hidden;
}

.muni-public-dossier__rep-meter-fill {
    position: absolute;
    inset: 0;
    background: var(--mud-palette-primary);
    transform-origin: left;
}

.muni-public-dossier__rep-note {
    font-size: 0.72rem;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 75%, var(--mud-palette-text-secondary));
    margin-top: 8px;
    line-height: 1.4;
    font-family: var(--muni-sans);
}

.muni-public-dossier__group-list {
    margin-top: var(--muni-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
}

.muni-public-dossier__group-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--muni-space-3);
    padding: 8px 12px;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
    align-items: center;
}

.muni-public-dossier__group-name {
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.muni-public-dossier__group-counters {
    display: flex;
    gap: var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-public-dossier__group-counter b {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-family: var(--muni-mono);
}

/* Phase 61 PROF-01: completed-quest history block (rendered inside §C below the
   GAC group-list). Manila-folder serif palette to match the surrounding rep
   tiles -- dashed top border signals continuation of the same section. */
.muni-public-dossier__quest-history {
    margin-top: var(--muni-space-3);
    border-top: 1px dashed var(--mud-palette-divider);
    padding-top: var(--muni-space-3);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-1);
}

.muni-public-dossier__quest-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--muni-space-3);
    align-items: baseline;
    padding: 4px 0;
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.muni-public-dossier__quest-title {
    font-weight: 500;
}

.muni-public-dossier__quest-when {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Phase 61 PROF-01: §D Flags & Outcomes rows. Single-line serif entries with
   an optional muted reason suffix; the empty-state copy reuses
   muni-public-dossier__rep-note. */
.muni-public-dossier__flag-row {
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
    padding: 4px 0;
}

.muni-public-dossier__flag-label {
    font-weight: 500;
}

.muni-public-dossier__flag-reason {
    color: var(--mud-palette-text-secondary);
    font-size: 0.9rem;
}

.muni-public-dossier__footer {
    margin-top: var(--muni-space-7);
    padding-top: var(--muni-space-4);
    border-top: 1px solid var(--mud-palette-text-primary);
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--muni-space-4);
}

.muni-public-dossier__filed-line {
    border-top: 1px solid var(--mud-palette-text-primary);
    margin-top: 4px;
    padding-top: 4px;
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
}

.muni-public-dossier__back-link {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    text-decoration: none;
    border-bottom: 1px dotted var(--mud-palette-text-secondary);
    padding-bottom: 1px;
    align-self: flex-start;
}

.muni-public-dossier__back-link:hover,
.muni-public-dossier__back-link:focus-visible {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    outline: none;
}

@media (max-width: 1080px) {
    .muni-public-dossier__header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--muni-space-5);
    }
    .muni-public-dossier__portrait-slot {
        align-self: center;
    }
    .muni-public-dossier__backstory {
        column-count: 1;
    }
}

@media (max-width: 720px) {
    .muni-public-dossier {
        padding: var(--muni-space-5) var(--muni-space-3) var(--muni-space-7);
    }
    .muni-public-dossier__paper {
        padding: var(--muni-space-5) var(--muni-space-4);
    }
    .muni-public-dossier__title {
        font-size: 2.4rem;
    }
    .muni-public-dossier__vitals {
        grid-template-columns: repeat(2, 1fr);
    }
    .muni-public-dossier__vital:nth-child(3n) { border-right: 1px dashed var(--mud-palette-divider); }
    .muni-public-dossier__vital:nth-child(2n) { border-right: none; }
    .muni-public-dossier__corner-stamp {
        right: 16px;
    }
}

/* ============================================================
   Citizen Detail page (Rev 3) -- folder framing wrapper
   ============================================================ */

.muni-citizen-page {
    background: color-mix(in srgb, var(--mud-palette-divider) 22%, var(--mud-palette-background));
    background-image: var(--muni-paper-noise);
    color: var(--mud-palette-text-primary);
    /* Wave 21 §A polish round 4 — bumped top padding from space-5 (24px)
       to space-7 (48px) so the file tab (now ~39px tall and offset
       -38px above the masthead) has the same breathing room above it
       as on the public dossier. */
    padding: var(--muni-space-7) var(--muni-space-4) var(--muni-space-7);
    min-height: 100%;
}

.muni-citizen-page__inner {
    max-width: var(--muni-page-max);
    margin: 0 auto;
}

/* Tab strip per Citizen Dossier.html § 7d "Tabs above a table" —
   labels-only tabs with a single bottom rule separating tabbar from
   tab content, and a thicker emphasized green underline for the
   active tab. No card chrome per tab; tabs dissolve into the page
   surface. Per Nika 2026-05-09: "Section 7d 'Tabs above a table'
   could be a good adaptation here ... we just had the tab feel
   part of this page, with a single bottom border to separate
   tabbar from tab body, and an emphasized green border to denote
   selected." */
.muni-citizen-page__tabs {
    position: relative;
    z-index: 2;
    /* HANDOFF · 04 §A·4 + Nika 2026-05-09 follow-ups — was 0/16, then
       24/32; the 24px above looked disconnected from the masthead.
       Now 0/32: tabs sit directly under the masthead's bottom rule
       (the rule itself provides the visual separator) and the bar
       still has room to breathe before the section body. */
    margin-top: 0;
    margin-bottom: var(--muni-space-6);
    /* HANDOFF · 04 §A·4 — softer hairline under the entire bar so the
       active 3px ink underscore reads as a deliberate cut-through rather
       than a re-statement of the bar's bottom edge. Was 1px text-primary
       (same color as the active underline → muddy). */
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}

.muni-citizen-page__tabs .mud-tabs-toolbar {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    min-height: 0 !important;
}

.muni-citizen-page__tabs .mud-tabs-toolbar-inner {
    background: transparent !important;
    padding: 0 !important;
}

.muni-citizen-page__tabs .mud-tab {
    background: transparent;
    background-image: none;
    border: none;
    border-radius: 0;
    margin: 0;
    padding: 10px 18px;
    min-width: auto;
    min-height: 0;
    text-transform: uppercase;
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    /* HANDOFF · 04 §A·4 — bold mono caps treatment. Spec wants weight 700
       universally; we keep an inactive→active weight ramp by leaving the
       inactive at 600 so the active state pops without making the whole
       bar look heavy. Letter-spacing bumped 1.4 → 1.8 per spec. */
    font-weight: 600;
    letter-spacing: 1.8px;
    color: var(--mud-palette-text-secondary);
    opacity: 1;
    position: relative;
    transition: color 0.12s;
}

.muni-citizen-page__tabs .mud-tab:hover,
.muni-citizen-page__tabs .mud-tab:focus-visible {
    color: var(--mud-palette-text-primary);
    background: transparent !important;
}

.muni-citizen-page__tabs .mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    background: transparent !important;
    background-image: none !important;
}

/* HANDOFF · 04 §A·4 — active-tab underline. Spec calls for a 3px ink
   bar under the active tab (full-width, sitting on top of the bar's
   softer hairline border-bottom). Earlier draft used a custom ::after
   on `.mud-tab.mud-tab-active` but MudBlazor's slider rule ran later
   in the cascade and the ::after overlay didn't win on the active
   state. Cleaner path: stop killing MudBlazor's built-in slider
   (`.mud-tab-slider`) and restyle IT instead — it's purpose-built for
   this, animates between tabs, and computes its inline transform
   from the active tab's bounds so we don't have to. */
.muni-citizen-page__tabs .mud-tab-slider {
    background: var(--mud-palette-text-primary) !important;
    height: 3px !important;
    bottom: -1px;
    z-index: 1;
}

/* MudBlazor 7+ wraps the tab label in .mud-tab-content — the icon +
   text. Suppress the tab's hover ripple background that fights the
   transparent treatment. */
.muni-citizen-page__tabs .mud-tab .mud-ripple {
    display: none;
}

/* Neutralize MudBlazor's internal tab-bar scaffolding visual presence
   without removing it from layout — the .mud-tab pills render INSIDE
   .mud-tabs-tabbar, so display:none on the parent kills the tabs.
   Strip the bar's own background / border / min-height instead so it
   collapses to 0px around the tab pills it contains. The inner scroll
   wrapper, slider rail, and arrow chrome can safely display:none. */
.muni-citizen-page__tabs .mud-tabs-tabbar {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    min-height: 0 !important;
    height: auto !important;
}

.muni-citizen-page__tabs .mud-tabs-tabbar-arrows,
.muni-citizen-page__tabs .mud-tabs-tabbar-arrow-icon-button {
    display: none !important;
}

.muni-citizen-page__tabs-panels {
    /* Suppress MudTabs's default panel padding/border; the folder body
       below is the actual content surface. */
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

.muni-citizen-page__folder {
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    border: 1.5px solid var(--mud-palette-text-primary);
    box-shadow: 3px 5px 0 0 var(--mud-palette-text-primary);
    padding: var(--muni-space-5) var(--muni-space-5) var(--muni-space-6);
    position: relative;
    z-index: 1;
}

.muni-citizen-page__folder--loading {
    padding: var(--muni-space-7) var(--muni-space-5);
}

.muni-citizen-page__masthead {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--muni-space-5);
    align-items: flex-start;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: var(--muni-space-4);
    /* Was 24px, but with the tabs' own margin-top dropped to 0 the
       full 24px stacked here looked disconnected (Nika UAT 2026-05-09).
       Tighten so the hairline-rule + tabs read as one composed nav
       region, not two with a void between them. */
    margin-bottom: var(--muni-space-2);
    position: relative;
}

.muni-citizen-page__masthead::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    border-bottom: 0.5px solid var(--mud-palette-divider);
    opacity: 0.7;
}

/* Masthead portrait block — paperclipped 1:1 + bible-style two-row
   metadata strip below (image-spec line + filed-date line) per
   Citizen Dossier.html § 02 reference. */
.muni-citizen-page__masthead-portrait {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--muni-space-2);
    width: 200px;
}

.muni-citizen-page__masthead-portrait .muni-paperclip-portrait {
    --muni-portrait-size: 200px;
    align-self: center;
}

/* Wave 7d·5 fix-up 2026-05-10: per-surface vertical room for the extended
   paperclip. The clip now extends ~41px above the frame (.muni-paperclip-
   portrait__clip top: -42px), so each consumer needs a margin-top on the
   wrapper to keep the clip from crashing into whatever's above it. Values
   eyeballed by Nika per surface — different portrait sizes + different
   surrounding context need different breathing room. */
.muni-citizen-page__masthead-portrait {
    margin-top: -5px;
}

.muni-citizen-page__masthead-portrait-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: var(--muni-mono);
    font-size: 0.58rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-disabled);
    padding: 0 2px;
}

.muni-citizen-page__masthead-portrait-meta-left {
    text-align: left;
}

.muni-citizen-page__masthead-portrait-meta-right {
    text-align: right;
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-page__masthead-left {
    min-width: 0;
}

/* Force a vertical stack on the right column. The earlier rule lost
   to MudBlazor's flex defaults somewhere in the cascade — !important
   here is intentional and contained to the masthead. */
.muni-citizen-page__masthead .muni-citizen-page__masthead-right {
    flex: 0 0 auto;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--muni-space-2);
    align-items: stretch;
    min-width: 168px;
    max-width: 220px;
}

/* Stamp-style buttons — civic-paper button aesthetic. Mono caps, ink
   border, hard 1px-stamp shadow with a hover-lift micro-interaction.
   Higher-specificity selectors so MudBlazor's outlined-button styles
   stop winning the cascade. */
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn.mud-button-root,
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    font-family: var(--muni-mono) !important;
    font-size: 0.66rem !important;
    font-weight: 700 !important;
    letter-spacing: 1.4px !important;
    text-transform: uppercase !important;
    border: 1.5px solid var(--mud-palette-text-primary) !important;
    border-radius: 0 !important;
    background: var(--mud-palette-background) !important;
    color: var(--mud-palette-text-primary) !important;
    padding: 8px 12px !important;
    min-height: 0 !important;
    width: 100%;
    box-shadow: 1px 2px 0 0 var(--mud-palette-text-primary);
    transition: transform 0.08s, box-shadow 0.08s, background 0.12s;
    text-decoration: none;
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn.mud-button-root:hover,
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn.mud-button-root:focus-visible {
    background: color-mix(in srgb, var(--mud-palette-divider) 18%, var(--mud-palette-background)) !important;
    transform: translate(-1px, -1px);
    box-shadow: 2px 3px 0 0 var(--mud-palette-text-primary);
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn.mud-button-root:active {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 0 var(--mud-palette-text-primary);
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--danger.mud-button-root {
    border-color: var(--mud-palette-error) !important;
    color: var(--mud-palette-error) !important;
    box-shadow: 1px 2px 0 0 var(--mud-palette-error);
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--danger.mud-button-root:hover,
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--danger.mud-button-root:focus-visible {
    box-shadow: 2px 3px 0 0 var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background)) !important;
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--accent.mud-button-root {
    background: var(--mud-palette-text-primary) !important;
    color: var(--mud-palette-background) !important;
}

.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--accent.mud-button-root:hover,
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--accent.mud-button-root:focus-visible {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 88%, var(--mud-palette-background)) !important;
}

.muni-citizen-page__eyebrow {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}

.muni-citizen-page__title {
    font-family: var(--muni-serif);
    font-size: 2.2rem;
    font-weight: 600;
    letter-spacing: -0.7px;
    line-height: 1.05;
    margin: 0;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-page__title-edit {
    margin-left: 6px;
    vertical-align: 0.12em;
}

.muni-citizen-page__pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-3);
    margin-top: var(--muni-space-3);
}

.muni-citizen-page__pill {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-citizen-page__pill-key {
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-page__pill-value {
    color: var(--mud-palette-text-primary);
    font-weight: 700;
}

.muni-citizen-page__pill--inactive .muni-citizen-page__pill-value {
    color: var(--mud-palette-error);
}

.muni-citizen-page__back {
    text-transform: none;
}

.muni-citizen-overview > .muni-section {
    margin-bottom: var(--muni-space-3);
}

/* ----------------------------------------------------------------
   Citizen Dossier (Rev 3) — Overview two-column body + vital ledger
   inset. Citizen-page-scoped variant of .muni-dossier__body so the
   existing folder shell + MudTabs strip stays intact while the
   Overview tab itself adopts the editorial-left / ledger-right
   anatomy from the design bible.
   ---------------------------------------------------------------- */

.muni-citizen-overview__body {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: var(--muni-space-6);
    align-items: start;
}

.muni-citizen-overview__col--left {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-4);
    min-width: 0;
}

.muni-citizen-overview__col--ledger {
    position: relative;
    background: color-mix(in srgb, var(--mud-palette-divider) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    padding: var(--muni-space-5) var(--muni-space-5) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-4);
    min-width: 0;
}

.muni-citizen-overview__ledger-badge {
    position: absolute;
    top: -10px;
    left: 16px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    padding: 2px 10px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-overview__col--ledger > .muni-section {
    margin-bottom: 0;
}

/* Commit S — .muni-citizen-overview__inline-card family retired.
   J.2 introduced the neutralizer to dissolve the embedded
   CitizenDiscordLinkCard's MudCard chrome inside § A Verification.
   Q replaced the embedded-card render path entirely with inline
   ledger-row markup; the neutralizer no longer has a consumer.
   The dossier surface no longer references CitizenDiscordLinkCard. */

/* Add bottom-margin breathing room under each § legend in dossier
   context so the body doesn't crowd the rule. */
.muni-citizen-overview .muni-section > .muni-section__legend {
    margin-bottom: var(--muni-space-2);
}

/* Backstory rest-state container — fixed-height with vertical scroll
   per Nika 2026-05-08: "I almost wonder in this context if we should
   have a div-specific vertical scrollbar to keep long-form backstory
   content to a fixed height". Edit-state uses full body height so the
   textarea can grow.

   Higher-specificity selectors so MudText / MudPaper inner styles
   can't grow the container past the cap. !important on max-height +
   overflow because the wrapper inherits MudStack default flex-grow. */
.muni-citizen-overview .muni-citizen-overview__backstory-prose,
.muni-citizen-overview__backstory-prose {
    display: block;
    max-height: 520px !important;
    overflow-y: auto !important;
    padding-right: var(--muni-space-3);
    border-right: 1px dashed transparent;
    transition: border-color 0.15s;
    flex: 0 0 auto;
}

.muni-citizen-overview .muni-citizen-overview__backstory-prose:hover {
    border-right-color: var(--mud-palette-divider);
}

.muni-citizen-overview__backstory-prose .mud-typography {
    margin: 0;
}

/* Ledger row — civic-form line item: <num/> <label> <help/>  ::  <value>
   Typography per Citizen Dossier.html § ledger-row-mock:
     • label  = serif, weight 600 (printed by the form printer)
     • number = mono, small, muted (printed line numbers)
     • help   = sans, muted (instructional gloss; use sparingly)
     • value  = mono (typewriter fill — the clerk's hand) */
.muni-ledger-row {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.3fr);
    column-gap: var(--muni-space-3);
    padding: 7px 0;
    border-bottom: 1px dashed var(--mud-palette-divider);
    align-items: baseline;
}

.muni-ledger-row:last-child {
    border-bottom: none;
}

.muni-ledger-row__lbl {
    font-family: var(--muni-serif);
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    row-gap: 2px;
    min-width: 0;
}

.muni-ledger-row__num {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    color: var(--mud-palette-text-disabled);
    margin-right: 4px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-ledger-row__help {
    font-family: var(--muni-sans);
    font-size: 0.66rem;
    color: var(--mud-palette-text-disabled);
    text-transform: none;
    letter-spacing: 0;
    flex-basis: 100%;
    font-weight: 400;
    margin-top: 1px;
}

.muni-ledger-row__val {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    text-align: right;
    word-break: break-word;
    letter-spacing: 0.2px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
}

.muni-ledger-row__val a {
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}

.muni-ledger-row__val--mute {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    font-family: var(--muni-sans);
}

/* Edit-state inline input — civic underline aesthetic. Mono fill
   matches the rest-state value typography exactly so the user
   reads "this is the same field, now editable" instead of "this
   is a form widget". Used inside ledger-row__val when the
   surrounding MuniSection is in Editing=true state. */
.muni-ledger-row__input,
.muni-ledger-row__input.mud-input-slot,
.muni-ledger-row .muni-ledger-row__input {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    border-radius: 0;
    padding: 2px 0;
    width: 100%;
    text-align: right;
    letter-spacing: 0.2px;
    outline: none;
    transition: border-color 0.12s, border-width 0.12s;
    box-sizing: border-box;
    line-height: 1.3;
    min-width: 0;
}

.muni-ledger-row__input:focus,
.muni-ledger-row__input:focus-visible {
    border-bottom-color: var(--mud-palette-primary);
}

.muni-ledger-row__input::placeholder {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    text-transform: none;
}

/* Multi-input row — Full name (First / Middle / Last / Suffix),
   Gender · Race, Contact (email / phone), Address (line + city / state / zip).
   Inputs share the value cell width via flex distribution. */
.muni-ledger-row__input-group {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    width: 100%;
    justify-content: flex-end;
}

.muni-ledger-row__input-group .muni-ledger-row__input {
    flex: 1 1 0;
    min-width: 60px;
}

.muni-ledger-row__input-group .muni-ledger-row__input--narrow {
    flex: 0 0 60px;
}

.muni-ledger-row__input-group .muni-ledger-row__input--full {
    flex: 1 1 100%;
}

.muni-ledger-row__val--editing {
    align-items: stretch;
}

/* Inline action button — civic-paper aesthetic for ledger-row
   actions (e.g. § B Discord "Revoke link"). Smaller / quieter than
   the masthead stamp buttons. Mono caps with ink (or accent) border. */
.muni-ledger-row__action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--mud-palette-text-primary);
    color: var(--mud-palette-text-primary);
    padding: 3px 9px;
    cursor: pointer;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.muni-ledger-row__action:hover,
.muni-ledger-row__action:focus-visible {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    outline: none;
}

.muni-ledger-row__action[disabled],
.muni-ledger-row__action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.muni-ledger-row__action--danger {
    border-color: var(--mud-palette-error);
    color: var(--mud-palette-error);
}

.muni-ledger-row__action--danger:hover,
.muni-ledger-row__action--danger:focus-visible {
    background: var(--mud-palette-error);
    color: var(--mud-palette-background);
    border-color: var(--mud-palette-error);
}

/* § B Discord Pending state — primary-tinted panel per bible § 03
   "Surfaces & containers" PRIMARY-TINTED variant: "For approvals,
   'ready to issue', successful runs." Per Nika 2026-05-09: "for the
   state where the user is pending verification and has a code issued,
   we need this section to be more contrasted and visually obvious for
   them. Can we do an accented tinted panel here?"

   Frames the entire pending workflow (Pending for / Token / Issued /
   Expires / instructional note / Verify code / Manage actions) so it
   reads as a contained call-to-action zone, not just more ledger
   rows. Green tint + dark green border. Inner ledger rows keep
   their typography but use a stronger row divider since the tint
   reduces the default dashed-divider's visibility. */
.muni-citizen-overview__pending-panel {
    background: color-mix(in srgb, var(--mud-palette-primary) 14%, var(--mud-palette-background));
    border: 1px solid color-mix(in srgb, var(--mud-palette-primary) 45%, var(--mud-palette-text-primary));
    padding: var(--muni-space-3) var(--muni-space-4) var(--muni-space-2);
    margin: var(--muni-space-3) 0 var(--muni-space-2);
    display: flex;
    flex-direction: column;
}

.muni-citizen-overview__pending-panel .muni-ledger-row {
    border-bottom-color: color-mix(in srgb, var(--mud-palette-primary) 28%, var(--mud-palette-divider));
}

/* When the instructional help block lives inside the tinted panel,
   suppress its lefthand rule (the panel border already frames it)
   and tighten margins since the panel has its own padding. */
.muni-citizen-overview__pending-panel .muni-citizen-overview__discord-help {
    border-left: none;
    padding: var(--muni-space-2) 0;
    margin: 0;
    color: color-mix(in srgb, var(--mud-palette-primary) 60%, var(--mud-palette-text-primary));
}

/* § B Discord instructional note — civic-paper prose set in serif
   italic with a thin lefthand rule. Replaces the MudCard / MudAlert
   chrome that used to wrap these flows in the unlinked / non-pending
   states. (Nested override above strips the rule when wrapped in
   the pending tinted panel.) */
.muni-citizen-overview__discord-help {
    font-family: var(--muni-serif);
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    font-style: italic;
    border-left: 2px solid var(--mud-palette-divider);
    padding: var(--muni-space-2) var(--muni-space-3);
    margin: var(--muni-space-2) 0;
}

.muni-citizen-overview__discord-help strong {
    font-style: normal;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-citizen-overview__discord-help p + p {
    margin-top: var(--muni-space-2);
}

/* ============================================================
   Civic-paper modal overlay — used for off-page actions like
   Titler settings (masthead button → modal). Backdrop dims the
   page; the modal itself is a paper-styled card with the
   familiar ink border + hard stamp shadow.
   ============================================================ */

.muni-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 13, 0.45);
    backdrop-filter: blur(2px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--muni-space-5);
    z-index: 1100;
}

.muni-modal {
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    border: 1.5px solid var(--mud-palette-text-primary);
    box-shadow: 4px 6px 0 0 var(--mud-palette-text-primary);
    max-width: 540px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    padding: var(--muni-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-4);
}

.muni-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--muni-space-3);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: var(--muni-space-3);
}

.muni-modal__heading {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.muni-modal__eyebrow {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-modal__title {
    font-family: var(--muni-serif);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.1;
    margin: 0;
}

.muni-modal__close {
    background: transparent;
    border: 1px solid var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
    padding: 4px 10px;
    line-height: 1.2;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}

.muni-modal__close:hover,
.muni-modal__close:focus-visible {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    border-color: var(--mud-palette-text-primary);
    outline: none;
}

.muni-modal__body {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
}

.muni-modal__actions {
    margin-top: var(--muni-space-2);
    padding-top: var(--muni-space-3);
    border-top: 1px solid var(--mud-palette-divider);
    display: flex;
    justify-content: flex-end;
    gap: var(--muni-space-2);
}

.muni-ledger-row__chip-row {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: flex-end;
}

/* ============================================================
   PILLS — per Citizen Dossier.html § Badges, pills & stamps.
   Filled, soft-tinted, square-cornered rectangles. Mono caps,
   in-table state. Used liberally inside the vital ledger.
   ============================================================ */
.muni-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    line-height: 1.3;
    white-space: nowrap;
    border: 1px solid transparent;
    border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-divider) 22%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
}

/* Pill · OK — soft green for funded / linked / verified states. */
.muni-pill--ok {
    background: color-mix(in srgb, var(--mud-palette-success) 18%, var(--mud-palette-background));
    color: color-mix(in srgb, var(--mud-palette-success) 65%, var(--mud-palette-text-primary));
    border-color: color-mix(in srgb, var(--mud-palette-success) 28%, transparent);
}

/* Pill · WARN — peach/ochre for in-progress, pending, partial. */
.muni-pill--warn {
    background: color-mix(in srgb, var(--mud-palette-warning) 18%, var(--mud-palette-background));
    color: color-mix(in srgb, var(--mud-palette-warning) 70%, var(--mud-palette-text-primary));
    border-color: color-mix(in srgb, var(--mud-palette-warning) 28%, transparent);
}

/* Pill · DANGER — soft red for revoked, inactive, terminal-negative. */
.muni-pill--danger {
    background: color-mix(in srgb, var(--mud-palette-error) 16%, var(--mud-palette-background));
    color: color-mix(in srgb, var(--mud-palette-error) 70%, var(--mud-palette-text-primary));
    border-color: color-mix(in srgb, var(--mud-palette-error) 28%, transparent);
}

/* Pill · NEUTRAL — informational, no connotation (archived, default). */
.muni-pill--neutral {
    background: color-mix(in srgb, var(--mud-palette-divider) 25%, var(--mud-palette-background));
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-divider);
}

/* ============================================================
   STAMPS — per Citizen Dossier.html § Badges, pills & stamps.
   Bordered (no fill), rotated ~5°, mono uppercase, larger than
   pills. Doc-level assertions only — used sparingly.
   ============================================================ */
.muni-stamp {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    line-height: 1.2;
    white-space: nowrap;
    background: transparent;
    border: 1.5px solid currentColor;
    transform: rotate(-4deg);
    transform-origin: center;
    color: var(--mud-palette-text-primary);
}

.muni-stamp--positive {
    color: var(--mud-palette-success);
}

.muni-stamp--negative {
    color: var(--mud-palette-error);
}

.muni-stamp--cautionary {
    color: var(--mud-palette-warning);
}

/* Stamp anchored top-right of a paper surface — used for the
   masthead "CONFIDENTIAL · CITIZEN FILE" doc-level seal. */
.muni-stamp--anchor-top-right {
    align-self: flex-end;
    margin-bottom: var(--muni-space-2);
}

/* HANDOFF · 04 §A·2 — CONFIDENTIAL stamp rotation + bleed.
   The stamp metaphor only reads as "applied to paper" when it sits
   off-axis from the column it's near, with a softer inner double-rule
   (the way a real rubber stamp lands a fainter inner border). The
   masthead variant pulls the stamp out of flex flow so it bleeds
   ~10px past the right edge of the action-stack column AND lifts up
   into the masthead's headroom above the column so the buttons stay
   fully clickable (the spec's "slightly overlapping" reads as the
   rotated bottom-left corner kissing the column top, not landing on
   top of "Back to roll").

   Positioning context is .muni-citizen-page__masthead-right (already
   set elsewhere); we add position:relative below for safety. */
.muni-citizen-page__masthead .muni-stamp--anchor-top-right {
    position: absolute;
    top: -22px;
    right: -10px;
    align-self: auto;
    margin: 0;
    transform: rotate(-3deg);
    transform-origin: bottom right;
    z-index: 4;
}

.muni-citizen-page__masthead .muni-stamp--anchor-top-right::before {
    content: "";
    position: absolute;
    inset: 3px;
    border: 1px solid currentColor;
    opacity: 0.55;
    pointer-events: none;
}

/* Make the masthead-right column the positioning context so the stamp's
   right:-10px is measured from its column edge (not the whole masthead). */
.muni-citizen-page__masthead-right {
    position: relative;
}

/* HANDOFF · 04 §A·3 — top sash visible while the dossier is in edit-
   mode. Lives inside the folder paper, above the masthead, spanning the
   full content width. Stamp-red border + softly-tinted fill recall the
   audit-zone aesthetic without going so loud it competes with the
   document content beneath. The "Editing" tag mimics a stamp; the body
   copy explains the per-section save flow; the DONE button is the one-
   click exit. */
.muni-citizen-page__edit-sash {
    display: flex;
    align-items: center;
    gap: var(--muni-space-3);
    margin-bottom: var(--muni-space-4);
    padding: var(--muni-space-2) var(--muni-space-4);
    border: 1.5px solid var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 8%, var(--mud-palette-background));
    color: var(--mud-palette-text-primary);
}

.muni-citizen-page__edit-sash-tag {
    flex: 0 0 auto;
    border: 1.5px solid var(--mud-palette-error);
    color: var(--mud-palette-error);
    background: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    padding: 4px 10px;
    transform: rotate(-2deg);
    position: relative;
}

.muni-citizen-page__edit-sash-tag::before {
    content: "";
    position: absolute;
    inset: 2px;
    border: 1px solid currentColor;
    opacity: 0.55;
    pointer-events: none;
}

.muni-citizen-page__edit-sash-body {
    flex: 1 1 auto;
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

.muni-citizen-page__edit-sash-done {
    flex: 0 0 auto;
    border: 1.5px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 7px 16px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
}

.muni-citizen-page__edit-sash-done:hover,
.muni-citizen-page__edit-sash-done:focus-visible {
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    transform: translateY(-1px);
}

.muni-citizen-page__edit-sash-done:active {
    transform: translateY(0);
}

/* When the masthead "Edit dossier" button is in active (edit-mode) state,
   override the accent style with stamp-red so the user has a strong
   second visual cue beyond the icon + label swap. Mirrors the sash. */
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--active.mud-button-root,
.muni-citizen-page__masthead .muni-citizen-page__stamp-btn--active {
    background: var(--mud-palette-error) !important;
    color: var(--mud-palette-background) !important;
    border-color: var(--mud-palette-error) !important;
    box-shadow: 1px 2px 0 0 var(--mud-palette-error) !important;
}

/* Section C reputation tiles — read-only computed (Standing, Level,
   Group Activity). Spec § anatomy treats these as numeric tiles on
   tinted paper. */
.muni-rep-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--muni-space-3);
}

.muni-rep-tile {
    border: 1px solid var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-divider) 16%, var(--mud-palette-background));
    padding: var(--muni-space-3) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.muni-rep-tile__label {
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-rep-tile__value {
    font-family: var(--muni-serif);
    font-size: 1.55rem;
    font-weight: 600;
    line-height: 1.05;
    color: var(--mud-palette-text-primary);
}

.muni-rep-tile__sub {
    font-family: var(--muni-sans);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
}

.muni-rep-tile__sub--mute {
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

/* Reputation hybrid layout — bar for Community Level (XP-into-level
   fits a horizontal bar cleanly), tiles for Standing + Group Activity
   (axes that don't bar-graph well). Per Nika 2026-05-08 hybrid pick.

   Stacked vertical layout (was a 3-col grid that collapsed at narrow
   editorial-column widths and dropped the bar entirely): heading row
   on top, full-width bar below, readout right-aligned underneath. */
.muni-rep-bar-block {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    padding: var(--muni-space-3) var(--muni-space-4);
    border: 1px solid var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-divider) 14%, var(--mud-palette-background));
    margin-bottom: var(--muni-space-3);
}

.muni-rep-bar-block__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
}

.muni-rep-bar-block__heading {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.muni-rep-bar-block__label {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    line-height: 1.2;
}

.muni-rep-bar-block__title {
    font-family: var(--muni-serif);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.muni-rep-bar-block__readout {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    color: var(--mud-palette-text-primary);
    white-space: nowrap;
    flex: 0 0 auto;
}

.muni-rep-bar {
    position: relative;
    height: 14px;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    overflow: hidden;
    width: 100%;
}

.muni-rep-bar__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background-color: var(--mud-palette-text-primary);
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 4px,
        color-mix(in srgb, var(--mud-palette-background) 14%, transparent) 4px,
        color-mix(in srgb, var(--mud-palette-background) 14%, transparent) 8px
    );
    transition: width 0.25s ease-out;
    min-width: 1px;
}

/* Tab body padding — the citizen-page folder already provides outer
   padding; MudTabs adds another layer plus the per-panel .p-3 utility
   currently in use stacks more on top, leaving the dossier content
   floating away from the tab strip. Strip the panel wrapper's padding
   so the tab body sits flush under the tab strip. (Per-tab content
   still controls its own internal spacing via MudStack.) */
.muni-citizen-page__folder .mud-tabs-toolbar + .mud-tabs-panels,
.muni-citizen-page__folder > .mud-tabs > .mud-tabs-panels {
    /* HANDOFF · 04 §A·4 + Nika 2026-05-09 — was padding: 0 to keep the
       tab body flush under the tab strip, but with the active-tab 3px
       slider re-enabled the tabs needed visible breathing room before
       the first section's serif heading. Add only padding-top; left /
       right / bottom stay flush so per-tab content keeps owning its
       internal spacing. */
    padding: var(--muni-space-5) 0 0 0;
}

@media (max-width: 1080px) {
    .muni-citizen-overview__body {
        grid-template-columns: 1fr;
    }
    .muni-citizen-overview__col--ledger {
        margin-top: var(--muni-space-5);
    }
}

@media (max-width: 720px) {
    .muni-citizen-page {
        padding: var(--muni-space-3) var(--muni-space-3) var(--muni-space-6);
    }
    .muni-citizen-page__folder {
        padding: var(--muni-space-4) var(--muni-space-3);
    }
    .muni-citizen-page__masthead {
        flex-direction: column;
    }
    .muni-citizen-page__title {
        font-size: 1.7rem;
    }
}

/* ============================================================
   Wave 7d · Citizen Registration civic chrome
   ------------------------------------------------------------
   Classes consumed by MuniWizardRail, MuniReviewSection,
   MuniReviewRow, MuniProfilePickPreview (Wave 7d·2), and the
   step bodies of Register.razor (Wave 7d·3 onward). Authored to
   the byte-faithful spec values from HANDOFF · 07 §A-§F.
   ============================================================ */

:root {
    /* Manila and accent tokens used by .muni-group-card; no Mud palette
       equivalent (these are specific civic-paperwork hues). Keep aligned
       with spec :root in Citizen Registration.html lines 9-21. */
    --muni-manila: #D7C9A0;
    --muni-manila-shadow: #7A6940;
    --muni-accent: #8C6420;
    /* Paper-soft is a ~6% ink-on-paper inset; adapts to light/dark Mud
       themes without hardcoding the spec hex (#DEDCD0). */
    --muni-paper-soft: color-mix(in srgb, var(--mud-palette-text-primary) 6%, var(--mud-palette-background));
    /* Stamp red — alias of mud error to match the rest of the civic CSS. */
    --muni-stamp-ink: var(--mud-palette-error);
    /* Plate tokens — yellow embossed-style civic plate used by MuniPlate (Wave 10 §F·1).
       Three flat hex values; no Mud palette equivalent (jurisdiction-specific paperwork hue). */
    --muni-plate-fill: #e8c84a;
    --muni-plate-rivet: #c9a528;
    --muni-plate-juris: #5a4818;

    /* VIN tokens — gray ID-block used by MuniVin. Quiet sibling to the
       loud yellow plate; meant to sit alongside without competing. */
    --muni-vin-fill: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));

    /* Stamp-specific legibility tokens. The civic theme intentionally sets
       Success = Primary = #2A3D1F (deep forest ink) for the single-ink-tone
       aesthetic on chips/buttons/alerts, but that's too dark for small-stamp
       legibility on cream paper — readers parse it as black. These brighter
       variants live ONLY in the .muni-stamp variant rules so the theme's
       chip/button ink tone is unaffected. */
    --muni-stamp-success: #4a7c3f;
    --muni-stamp-warning: #b8851f;
}

/* ───────── .muni-notice · civic notice block (Step 01 intro,
   Step 04 IC warnings, Review filing notice, Success Discord note) */
.muni-notice {
    background: var(--mud-palette-background);
    border: 1.5px solid var(--mud-palette-text-primary);
    padding: 10px 14px;
    position: relative;
}

.muni-notice__eyebrow {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-stamp-ink);
    margin-bottom: 4px;
}

.muni-notice__title {
    font-family: var(--muni-serif);
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

.muni-notice__body {
    font-family: var(--muni-serif);
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary);
    margin: 6px 0 0;
}

.muni-notice__body p:first-child {
    margin-top: 0;
}

.muni-notice__body p:last-child {
    margin-bottom: 0;
}

/* Caution variant (Step 04, Step 05): square ink border + paper-soft fill
   + corner-pinned NOTICE stamp. Same density as the warning it replaces. */
.muni-notice--caution {
    background: var(--muni-paper-soft);
    border: 1.5px solid var(--mud-palette-text-primary);
}

.muni-notice--caution::before {
    content: "NOTICE";
    position: absolute;
    right: -1px;
    top: -1px;
    background: var(--muni-stamp-ink);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.4px;
    padding: 2px 6px;
    line-height: 1;
}

/* ───────── .muni-codeblock · civic-skinned terminal-style code
   Used for the Discord-linking character-name highlight in the review
   step's filing notice and on the success state. Replaces dashed-border
   MudPaper code-blocks. */
.muni-codeblock {
    font-family: var(--muni-mono);
    font-size: 11.5px;
    line-height: 1.6;
    background: #1a1a14;
    color: #e8e3d0;
    padding: 12px 14px;
    margin: 0;
    overflow-x: auto;
    white-space: pre;
    border-left: 3px solid var(--muni-accent);
}

/* ───────── .muni-wizard-rail · stamped step trail (HANDOFF · 07 §A·1)
   Replaces the legacy MudPaper + MudGrid step-chip grid. Each step is
   a panel with a state-driven background + corner stamp. Click on a
   FILED step jumps the wizard back; future/active are no-ops. */
.muni-wizard-rail {
    display: grid;
    grid-template-columns: repeat(var(--muni-wizard-step-count, 6), 1fr);
    width: 100%;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    position: relative;
}

.muni-wizard-rail__step {
    padding: 12px 10px 14px;
    border-right: 1px solid var(--mud-palette-lines-default);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 84px;
    background: transparent;
    border-top: none;
    border-bottom: none;
    border-left: none;
    cursor: default;
    text-align: left;
    font-family: var(--muni-sans);
    color: inherit;
}

.muni-wizard-rail__step:last-child {
    border-right: none;
}

.muni-wizard-rail__no {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    color: var(--mud-palette-text-secondary);
}

.muni-wizard-rail__name {
    font-family: var(--muni-serif);
    font-size: 13.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
    line-height: 1.15;
}

/* DONE — paper-soft fill, mute name color, rotated FILED stamp.
   Cursor flips to pointer because back-jump is enabled here. */
.muni-wizard-rail__step--done {
    background: var(--muni-paper-soft);
    cursor: pointer;
}

.muni-wizard-rail__step--done .muni-wizard-rail__name {
    color: var(--mud-palette-text-secondary);
}

.muni-wizard-rail__step--done::after {
    content: "FILED";
    position: absolute;
    right: 6px;
    bottom: 6px;
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    padding: 1px 4px;
    transform: rotate(-3deg);
    opacity: 0.85;
    line-height: 1;
}

.muni-wizard-rail__step--done:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-background));
}

/* ACTIVE — bright paper, top ink bar, inset bottom rule, ink number color. */
.muni-wizard-rail__step--active {
    background: var(--mud-palette-background);
    box-shadow: inset 0 -3px 0 var(--mud-palette-text-primary);
}

.muni-wizard-rail__step--active .muni-wizard-rail__no {
    color: var(--mud-palette-text-primary);
}

.muni-wizard-rail__step--active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--mud-palette-text-primary);
}

/* FUTURE — name color goes mute, no other treatment. */
.muni-wizard-rail__step--future .muni-wizard-rail__name {
    color: var(--mud-palette-text-disabled);
}

/* Mobile collapse — single line "STEP N / TOTAL · TITLE". CSS-only;
   no Razor branching. Hide all panels except the active one and let
   the active panel render full-width. */
@media (max-width: 600px) {
    .muni-wizard-rail {
        grid-template-columns: 1fr;
    }
    .muni-wizard-rail__step {
        display: none;
        border-right: none;
    }
    .muni-wizard-rail__step--active {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;
        min-height: 56px;
    }
    .muni-wizard-rail__step--active::after {
        display: none;
    }
}

/* ───────── .muni-wizard-step-head · civic step header (HANDOFF · 07 §A·2)
   Lives directly under the wizard rail. Shows step counter + title,
   optional italic-serif description, and the autosave indicator (right). */
.muni-wizard-step-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: 6px;
    margin-bottom: var(--muni-space-3);
    gap: var(--muni-space-3);
}

.muni-wizard-step-head__kicker {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-wizard-step-head__title {
    font-family: var(--muni-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--mud-palette-text-primary);
    margin: 2px 0 0;
}

.muni-wizard-step-head__desc {
    font-family: var(--muni-serif);
    font-size: 13px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin: 4px 0 0;
}

.muni-wizard-step-head__autosave {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

/* ───────── .muni-review-section · review-step ledger block (§C·1)
   One per wizard step on the review surface. Header band shows the
   §-letter + step name + Edit ✎ button. Body is caller-supplied
   (typically MuniReviewRow ChildContent). */
.muni-review-section {
    border: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
}

.muni-review-section__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    background: var(--muni-paper-soft);
}

.muni-review-section__num {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.muni-review-section__edit {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    background: none;
    border: 1px solid var(--mud-palette-text-primary);
    padding: 3px 8px;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    text-transform: uppercase;
    line-height: 1.2;
}

.muni-review-section__edit:hover {
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-review-section__body {
    padding: 10px 12px;
}

/* ───────── .muni-review-row · ledger row inside MuniReviewSection
   Default 120px label / fluid value. Modifiers for full-width rows
   (CONTACT, ADDRESS) and italic blockquote (BACKSTORY). */
.muni-review-row {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 6px 14px;
    align-items: baseline;
    font-size: 11.5px;
}

.muni-review-row + .muni-review-row {
    margin-top: 6px;
}

.muni-review-row__label {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-review-row__value {
    font-family: var(--muni-serif);
    color: var(--mud-palette-text-primary);
}

.muni-review-row__value--mono {
    font-family: var(--muni-mono);
}

/* Full-width row (CONTACT / ADDRESS in Step 04 review block). */
.muni-review-row--full {
    grid-template-columns: 1fr;
}

.muni-review-row--full .muni-review-row__label {
    margin-bottom: 2px;
}

/* Top dashed-rule separator for the CONTACT row that splits physical
   and contact-address blocks in §C·1's World Details mock. */
.muni-review-row--rule-top {
    border-top: 1px dashed var(--mud-palette-lines-default);
    padding-top: 6px;
    margin-top: 6px;
}

/* Italic blockquote variant for BACKSTORY in Step 03 review. */
.muni-review-row--blockquote .muni-review-row__value {
    border-left: 2px solid var(--mud-palette-lines-default);
    padding-left: 10px;
    font-family: var(--muni-serif);
    font-size: 12px;
    font-style: italic;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* ───────── .muni-profile-pick · SL profile-pick preview block (§C·2)
   Reused on review (state=preview) and success (state=filed). Header
   carries the eyebrow + serif title + Copy button. Body is dashed-
   accent-rule-bracketed mono prose with whitespace preserved. */
.muni-profile-pick {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    background-image: var(--muni-paper-noise);
}

.muni-profile-pick__head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-text-primary);
    background: var(--muni-paper-soft);
    gap: var(--muni-space-3);
}

.muni-profile-pick__head-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.muni-profile-pick__kicker {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-profile-pick__title {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-profile-pick__copy {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    border: none;
    padding: 6px 12px;
    cursor: pointer;
    line-height: 1.2;
    white-space: nowrap;
}

.muni-profile-pick__copy:hover {
    background: var(--mud-palette-primary);
}

.muni-profile-pick__body {
    padding: 12px 14px;
    border-top: 1px dashed var(--muni-accent);
    border-bottom: 1px dashed var(--muni-accent);
    margin: 0 14px;
    font-family: var(--muni-mono);
    font-size: 11.5px;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    white-space: pre-wrap;
}

.muni-profile-pick__caption {
    padding: 8px 14px 10px;
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Preview state — small NOT YET FILED stamp-red caption under the body. */
.muni-profile-pick--preview .muni-profile-pick__caption {
    color: var(--muni-stamp-ink);
}

/* Filed state — caption hidden; component caller renders an external
   MuniStamp variant=filed alongside the head if desired. */
.muni-profile-pick--filed .muni-profile-pick__caption {
    display: none;
}

.muni-profile-pick__footer {
    padding: 0 14px 12px;
    display: flex;
    gap: var(--muni-space-2);
    align-items: center;
}

.muni-profile-pick__open {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--mud-palette-primary);
    padding-bottom: 1px;
}

.muni-profile-pick__open[aria-disabled="true"],
.muni-profile-pick__open[disabled] {
    color: var(--mud-palette-text-disabled);
    border-bottom-color: var(--mud-palette-text-disabled);
    pointer-events: none;
}

/* ───────── .muni-group-card · manila folder card (§B·5)
   Replaces glossy MudCard billboards on the Starting-Path step.
   Named generically so Wave 8's /directory/groups can lift it. */
.muni-group-card {
    position: relative;
    background: var(--muni-manila);
    border: 1.5px solid var(--muni-manila-shadow);
    padding-top: 24px;
    cursor: pointer;
    transition: border-color 120ms var(--muni-ease);
    text-align: left;
    font-family: var(--muni-sans);
    color: var(--mud-palette-text-primary);
    width: 100%;
    display: block;
}

.muni-group-card:hover {
    border-color: var(--mud-palette-text-primary);
}

.muni-group-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.muni-group-card__tab {
    position: absolute;
    left: 14px;
    top: -1px;
    background: var(--muni-manila);
    border: 1.5px solid var(--muni-manila-shadow);
    border-bottom: none;
    padding: 4px 14px;
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    line-height: 1.2;
}

.muni-group-card__media {
    margin: 4px 12px 8px;
    height: 325px;
    border: 1px solid var(--muni-manila-shadow);
    background-color: var(--muni-paper-soft);
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-serif);
    font-size: 32px;
    color: rgba(255, 255, 255, 0.55);
}

.muni-group-card__body {
    padding: 0 12px 12px;
}

.muni-group-card__desc {
    font-family: var(--muni-serif);
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 8px;
}

/* Inline notice slot used by the "no entry role" warning at the foot
   of an unselected card. Same visual as .muni-notice--caution but
   tighter padding for the in-card embed. */
.muni-group-card__notice {
    margin-top: var(--muni-space-2);
}

/* 2-up grid for the manila folder cards on the Starter step. Mobile
   collapses to single column. */
.muni-group-card-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--muni-space-3);
}

@media (max-width: 600px) {
    .muni-group-card-grid {
        grid-template-columns: 1fr;
    }
}

/* SELECTED state — ink fill on the folder tab, ink card border, the
   SELECTED stamp pinned top-right. No other change. */
.muni-group-card--selected {
    border-color: var(--mud-palette-text-primary);
}

.muni-group-card--selected .muni-group-card__tab {
    background: var(--mud-palette-text-primary);
    border-color: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
}

.muni-group-card__selected-stamp {
    position: absolute;
    right: 6px;
    top: 32px;
    border: 1.5px solid var(--muni-stamp-ink);
    color: var(--muni-stamp-ink);
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: 2px 5px;
    background: var(--mud-palette-background);
    transform: rotate(-3deg);
    line-height: 1;
}

/* ───────── .muni-acknowledgement-list / -row · numbered ledger
   checkbox rows (HANDOFF · 07 §B·1, Citizen Registration step 01)

   Each acknowledgement is a 3-column row: mono number gutter ·
   serif body · 14×14 ink-bordered checkbox right. First row has
   a 1px solid ink top rule; subsequent rows are 1px dashed mute
   for visual rhythm. Checkbox is a <button> (keyboard-navigable
   without role= or tabindex= overrides) toggling __check--checked
   for an ink-fill state with a paper-color check glyph inside.

   Step-local for now (single consumer in Register.razor); extract
   to a wrapper component if a second numbered-ledger surface ships. */
.muni-acknowledgement-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.muni-acknowledgement-row {
    display: grid;
    grid-template-columns: 56px 1fr 24px;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 0;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.muni-acknowledgement-row:first-child {
    border-top: 1px solid var(--mud-palette-text-primary);
}

.muni-acknowledgement-row__num {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-top: 2px;
}

.muni-acknowledgement-row__text {
    font-family: var(--muni-serif);
    font-size: 13px;
    line-height: 1.55;
    color: var(--mud-palette-text-primary);
}

.muni-acknowledgement-row__text a {
    color: var(--mud-palette-primary);
    text-decoration: underline;
}

.muni-acknowledgement-row__text strong {
    font-weight: 600;
}

.muni-acknowledgement-row__check {
    width: 14px;
    height: 14px;
    background: var(--mud-palette-background);
    border: 1.5px solid var(--mud-palette-text-primary);
    cursor: pointer;
    padding: 0;
    margin-top: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 120ms var(--muni-ease);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 10px;
    line-height: 1;
}

.muni-acknowledgement-row__check:hover {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));
}

.muni-acknowledgement-row__check--checked {
    background: var(--mud-palette-text-primary);
}

/* Civic empty state shared across step bodies — italic-serif
   paragraph in mute ink, used when a configurable list (e.g.
   community Expectations) ships zero items. */
.muni-step-empty {
    font-family: var(--muni-serif);
    font-size: 13px;
    font-style: italic;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    margin: 0;
    padding: 12px 0;
}

/* Wave 7d·4·2: center the MuniPaperclippedPortrait in its
   md=6 column on the Identity step. Step-local; no need for
   anything more elaborate. */
.register-portrait-civic {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: var(--muni-space-2);
    /* Wave 7d·5 fix-up: room for the extended paperclip on the Identity
       step's right column. 200px portrait + extra clearance because the
       portrait sits adjacent to the upload affordance column. */
    margin-top: 16px;
}

/* ───────── .muni-statement · affidavit-framed textarea block
   (HANDOFF · 07 §B·3, Citizen Registration step 03)

   Each Story-step field renders as: kicker (Statement N) + serif
   title + italic-serif lede + textarea + bottom-right civic counter.
   The field wrapper is dual-classed `.muni-statement__field
   .muni-section__body` so the existing civic input override block
   re-skins the textarea to underline-only without duplicating rules.
   Counter goes red at 95% via `--at-limit` modifier. */
.muni-statement {
    padding: var(--muni-space-3) 0;
}

.muni-statement + .muni-statement {
    border-top: 1px dashed var(--mud-palette-lines-default);
    margin-top: var(--muni-space-3);
}

.muni-statement__kicker {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.muni-statement__title {
    font-family: var(--muni-serif);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--mud-palette-text-primary);
}

.muni-statement__lede {
    font-family: var(--muni-serif);
    font-size: 12.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 4px 0 var(--muni-space-2);
}

.muni-statement__field {
    position: relative;
}

.muni-statement__counter {
    position: absolute;
    right: 4px;
    bottom: 6px;
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 0.6px;
    color: var(--mud-palette-text-secondary);
    pointer-events: none;
    z-index: 1;
}

.muni-statement__counter--at-limit {
    color: var(--mud-palette-error);
}

/* ───────── .muni-generated-* · auto-generated read-only field
   ledger rows (HANDOFF · 07 §B·4, Citizen Registration step 04)

   Email + phone display as labeled ledger entries with a 1px ink
   bottom rule, not as greyed MudTextFields. The fields are computed
   server-side from the citizen's name and shouldn't accept direct
   input — the ledger presentation makes the read-only state clear
   without the visual noise of a disabled form control. */
.muni-generated-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--muni-space-3);
}

.muni-generated-field {
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding: 4px 2px 6px;
}

.muni-generated-field__label {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-generated-field__value {
    font-family: var(--muni-mono);
    font-size: 11.5px;
    color: var(--mud-palette-text-primary);
    margin-top: 2px;
}

.muni-generated-field__value--empty {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
}

.muni-generated-caption {
    font-family: var(--muni-serif);
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin: var(--muni-space-3) 0 var(--muni-space-2);
}

/* ───────── .muni-review-dossier · review-step two-column layout
   (HANDOFF · 07 §C·1, Citizen Registration step 06)

   Left rail: paperclipped portrait + name plate (DRAFT · NOT YET FILED
   kicker + serif character name + italic display name) + at-a-glance
   roll-up (mono caps label/value pairs). Right column: header + 4
   MuniReviewSection blocks + MuniProfilePickPreview + Filing Notice
   error slot + action row.

   Mobile collapses to single column under 760px. */
.muni-review-dossier {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: var(--muni-space-5);
    padding: var(--muni-space-5);
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
}

.muni-review-dossier__rail {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
}

.muni-review-dossier__rail-portrait {
    display: flex;
    justify-content: center;
    /* Wave 7d·5 fix-up: room for the extended paperclip on the review
       dossier's left rail. 200px portrait, 12px eyeballed for clearance
       inside the bordered review dossier card. */
    margin-top: 12px;
}

.muni-review-dossier__name-plate {
    border-top: 1px solid var(--mud-palette-text-primary);
    padding-top: var(--muni-space-3);
    text-align: center;
}

.muni-review-dossier__name-plate-kicker {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-stamp-ink);
}

.muni-review-dossier__name-plate-name {
    font-family: var(--muni-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.1;
    color: var(--mud-palette-text-primary);
    margin-top: 4px;
}

.muni-review-dossier__name-plate-display {
    font-family: var(--muni-serif);
    font-size: 12px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

.muni-review-dossier__at-a-glance {
    border-top: 1px solid var(--mud-palette-text-primary);
    padding-top: var(--muni-space-3);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.muni-review-dossier__glance-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-2);
}

.muni-review-dossier__glance-label {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-review-dossier__glance-value {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--mud-palette-text-primary);
}

.muni-review-dossier__glance-value--accent {
    color: var(--mud-palette-primary);
}

.muni-review-dossier__glance-value--mute {
    color: var(--mud-palette-text-secondary);
    font-style: italic;
}

.muni-review-dossier__roll-up {
    border-top: 1px solid var(--mud-palette-text-primary);
    padding-top: var(--muni-space-3);
}

.muni-review-dossier__roll-up-label {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}

.muni-review-dossier__roll-up-body {
    font-family: var(--muni-serif);
    font-size: 11.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    line-height: 1.4;
}

.muni-review-dossier__column {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
    min-width: 0;
}

.muni-review-dossier__column-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: var(--muni-space-3);
    border-bottom: 1px solid var(--mud-palette-text-primary);
    padding-bottom: 8px;
}

.muni-review-dossier__column-kicker {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-review-dossier__column-title {
    font-family: var(--muni-serif);
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.3px;
    color: var(--mud-palette-text-primary);
    margin: 2px 0 0;
}

.muni-review-dossier__column-meta {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

@media (max-width: 760px) {
    .muni-review-dossier {
        grid-template-columns: 1fr;
        padding: var(--muni-space-3);
    }
    .muni-review-dossier__rail {
        order: -1;
    }
}

/* Wave 7d·5 fix-up: civic-skin Blazor's default <ValidationSummary />
   output when wrapped in .muni-validation-summary (which itself rides
   inside a .muni-notice--caution block on the review surface). Default
   output is `<ul class="validation-errors"><li class="validation-
   message">...</li></ul>` rendered as bare bullets — re-style as a
   tight ledger of stamp-red error rows so a stale cross-step
   validation reads as a real filing blocker. */
.muni-validation-summary .validation-errors {
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
}

.muni-validation-summary .validation-errors .validation-message,
.muni-validation-summary .validation-errors > li {
    font-family: var(--muni-serif);
    font-size: 12.5px;
    color: var(--mud-palette-text-primary);
    line-height: 1.5;
    padding: 4px 0 4px 18px;
    position: relative;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.muni-validation-summary .validation-errors > li:first-child {
    border-top: none;
    padding-top: 0;
}

.muni-validation-summary .validation-errors > li::before {
    content: "!";
    position: absolute;
    left: 0;
    top: 4px;
    color: var(--muni-stamp-ink);
    font-family: var(--muni-mono);
    font-size: 11px;
    font-weight: 700;
}

.muni-validation-summary .validation-errors > li:first-child::before {
    top: 0;
}

/* ───────── .muni-register-filed · success-state filing receipt
   (HANDOFF · 07 §D·1). Replaces the green MudIcon TaskAlt + h6 +
   body2 + MudAlert.Success stack with a civic filing receipt: a
   rotated FILED stamp + serif character-name headline + mono
   timestamp + italic-serif body. The stamp inside .muni-register-
   filed__stamp-wrap is sized up via descendant selector since
   MuniStamp's default 0.64rem feels under-claimed for the page-
   anchoring moment. */
.muni-register-filed {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-5);
}

.muni-register-filed__receipt {
    text-align: center;
    padding: var(--muni-space-3) 0 var(--muni-space-2);
}

.muni-register-filed__stamp-wrap {
    margin-bottom: var(--muni-space-4);
}

.muni-register-filed__stamp-wrap .muni-stamp {
    font-size: 0.82rem;
    padding: 10px 22px;
    letter-spacing: 3.5px;
    border-width: 2px;
    box-shadow: inset 0 0 0 1px currentColor;
}

.muni-register-filed__title {
    font-family: var(--muni-serif);
    font-size: 28px;
    font-weight: 600;
    letter-spacing: -0.4px;
    color: var(--mud-palette-text-primary);
    margin: 0;
    line-height: 1.15;
}

.muni-register-filed__timestamp {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-top: var(--muni-space-2);
}

.muni-register-filed__body {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: var(--muni-space-2) auto 0;
    max-width: 56ch;
}

.muni-register-filed__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--muni-space-3);
    border-top: 1px solid var(--mud-palette-text-primary);
    padding-top: var(--muni-space-3);
}

.muni-register-filed__actions a {
    text-decoration: none;
}

/* ───────── .muni-cert-line · italic-serif certification kicker that
   sits above the Sign & File button on the review-step action row. */
.muni-cert-line {
    font-family: var(--muni-serif);
    font-size: 11.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    margin-right: var(--muni-space-2);
}

/* ───────── .muni-submit-primary · the only filled button on the review
   page. Dropped if not the review step (other steps use the existing
   Mud filled button). Stamp-shaped: ink fill + paper text + mono caps
   1.8px letter-spacing + hairline glyph. */
.muni-submit-primary {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    background: var(--mud-palette-text-primary);
    color: var(--mud-palette-background);
    border: none;
    padding: 8px 18px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
}

.muni-submit-primary:hover:not(:disabled) {
    background: var(--mud-palette-primary);
}

.muni-submit-primary:disabled {
    background: var(--mud-palette-text-disabled);
    cursor: not-allowed;
}

@media (max-width: 600px) {
    .muni-generated-grid {
        grid-template-columns: 1fr;
    }
}

/* ───────── .muni-consent-* · Wave 7c consent-toggle rows
   (/citizen/consent-settings)

   Each row pairs a status name (serif body) with a right-aligned
   MudSwitch + optional cycle-length expansion below (revealed only
   when the toggle is on AND the status is cycling). Same dashed-
   ledger separator pattern as .muni-acknowledgement-list / .muni-
   review-row — solid 1px ink top on the first row, dashed mute
   between siblings.

   The MudSelect for cycle length sits inside the row's expansion
   slot, which lives inside the parent MuniSection's body, so the
   civic input override block re-skins it to underline-only
   automatically without any extra opt-in. */
.muni-consent-list {
    display: flex;
    flex-direction: column;
}

.muni-consent-row {
    padding: 12px 0;
    border-top: 1px dashed var(--mud-palette-lines-default);
}

.muni-consent-row:first-child {
    border-top: 1px solid var(--mud-palette-text-primary);
}

.muni-consent-row__main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--muni-space-3);
}

.muni-consent-row__name {
    font-family: var(--muni-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-consent-row__expansion {
    margin-top: var(--muni-space-3);
    padding-left: var(--muni-space-3);
    border-left: 2px solid var(--mud-palette-lines-default);
}

.muni-consent-row__hint {
    font-family: var(--muni-serif);
    font-size: 12.5px;
    font-style: italic;
    color: var(--mud-palette-text-secondary);
    line-height: 1.5;
    margin: 0 0 var(--muni-space-2);
}

.muni-consent-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--muni-space-4);
    padding-top: var(--muni-space-3);
    border-top: 1px solid var(--mud-palette-text-primary);
}

/* ───────── Vehicle Detail — Wave 10 §B·2 hero + owner panel + doc cards.
   Two-column grid (1.2fr plate-hero · 1fr owner panel) for the Overview
   sub-tab; the plate is the bold civic motif and the owner is the quiet
   counterpart. Diagonal-striped paper background on the hero mimics
   filing-cabinet-with-rivets paperwork; status stamp positioned top-right. */

.muni-vehicle-overview {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0;
    border: 1px solid var(--mud-palette-text-primary);
    margin-bottom: var(--muni-space-5);
}

.muni-vehicle-hero {
    padding: 28px 22px;
    background:
        repeating-linear-gradient(
            135deg,
            var(--muni-paper-soft) 0px,
            var(--muni-paper-soft) 6px,
            var(--muni-manila) 6px,
            var(--muni-manila) 12px
        );
    position: relative;
    border-left: 1px solid var(--mud-palette-text-primary);
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.muni-vehicle-hero__overlay-stamp {
    position: absolute;
    top: 14px;
    right: 14px;
}

.muni-vehicle-hero__placeholder {
    font-family: var(--muni-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    border: 1.5px dashed var(--mud-palette-text-primary);
    padding: 22px 32px;
    background: transparent;
}

/* In-world minted plate texture — rendered when the community has configured
   VehicleLicensePlateDocumentTypeId AND the citizen has minted a doc of that
   type AND the SL picture-service has the texture. Replaces the CSS-rendered
   MuniPlate in the hero when present. Bordered like a paper-mounted photograph
   with mild rotation so it reads as a physical artifact, not a screenshot. */
.muni-vehicle-hero__texture {
    max-width: min(320px, 80%);
    max-height: 200px;
    height: auto;
    object-fit: contain;
    border: 2px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    padding: 4px;
    transform: rotate(-1.5deg);
    box-shadow: 2px 3px 0 0 var(--mud-palette-text-primary);
    display: block;
}

.muni-vehicle-owner {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.muni-vehicle-owner__name {
    font-family: var(--muni-serif);
    font-size: 18px;
    font-weight: 600;
    margin-top: var(--muni-space-2);
}

.muni-vehicle-owner__name a {
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    border-bottom: 1px dashed var(--mud-palette-divider);
}

.muni-vehicle-owner__name a:hover {
    border-bottom-style: solid;
}

.muni-vehicle-owner__alias,
.muni-vehicle-owner__reg {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

/* Vehicle Documents tab — civic document card grid. Single-consumer for
   now (this page); flag for promotion to a wrapper if Wave 11 Identifications
   needs the same shape (likely candidate). */

.muni-document-card__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--muni-space-4);
}

.muni-document-card {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    padding: var(--muni-space-3) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
}

.muni-document-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--muni-space-3);
}

.muni-document-card__head-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.muni-document-card__title {
    font-family: var(--muni-serif);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
}

.muni-document-card__template {
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.muni-document-card__doc-number {
    font-family: var(--muni-mono);
    font-size: 11px;
    letter-spacing: 1.2px;
    color: var(--mud-palette-text-secondary);
}

.muni-document-card__preview {
    border: 1px solid var(--mud-palette-text-primary);
    padding: var(--muni-space-2);
    background: var(--muni-paper-soft);
    text-align: center;
}

.muni-document-card__preview img {
    max-width: 100%;
    height: auto;
    max-height: 220px;
    display: block;
    margin: 0 auto;
}

.muni-document-card__dates {
    display: grid;
    gap: 4px;
}

.muni-document-card__date-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-document-card__date-label {
    color: var(--mud-palette-text-secondary);
}

.muni-document-card__footer {
    display: flex;
    gap: var(--muni-space-3);
    margin-top: auto;
    padding-top: var(--muni-space-2);
    border-top: 1px dashed var(--mud-palette-divider);
    align-items: center;
}

.muni-document-card__details-link {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
    text-decoration: none;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
}

.muni-document-card__details-link:hover {
    text-decoration: underline;
    text-decoration-style: dashed;
    text-underline-offset: 3px;
}

/* Responsive — collapse overview to a single column under md. */
@media (max-width: 768px) {
    .muni-vehicle-overview {
        grid-template-columns: 1fr;
    }
    .muni-vehicle-hero {
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-text-primary);
    }
}

/* ───────── .muni-visually-hidden · a11y utility for screen-reader-only text.
   Standard 1px clip-rect pattern. First consumer: MuniPlate's "License plate"
   prefix on the number element so the listing cell reads coherently. */
.muni-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ───────── .muni-plate · yellow embossed-style civic plate (Wave 10 §F·1).
   Renders a jurisdiction strap + plate number inside a yellow frame with
   pseudo-element rivets. Two sizes: Small (table cell / context strip) and
   Large (VehicleDetail hero). Pending state (null Number) renders the dashed
   empty frame with "PENDING ASSIGNMENT" caption. */
.muni-plate {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--muni-mono);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--muni-plate-fill);
    border: 2px solid var(--mud-palette-text-primary);
    box-shadow:
        inset 0 0 0 2px var(--muni-plate-fill),
        inset 0 0 0 3px var(--muni-plate-rivet);
    padding: var(--muni-space-1) var(--muni-space-3);
    position: relative;
    line-height: 1;
}

.muni-plate__juris {
    font-size: 0.55em;
    letter-spacing: 0.22em;
    color: var(--muni-plate-juris);
    margin-bottom: 2px;
}

.muni-plate__number {
    letter-spacing: 0.12em;
}

/* Decorative rivets — pseudo-element circles flanking the plate. */
.muni-plate::before,
.muni-plate::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 0.35em;
    height: 0.35em;
    border-radius: 50%;
    background: var(--mud-palette-text-primary);
}

.muni-plate::before { left: 0.32em; }
.muni-plate::after  { right: 0.32em; }

/* Size variants — two-step ladder, no medium. */
.muni-plate--small {
    font-size: 13px;
    padding: 4px 10px;
}

.muni-plate--large {
    font-size: 34px;
    padding: 14px 24px;
}

/* Pending-assignment empty state (null/whitespace Number). Dashed frame,
   no fill, no rivets — visually distinct from a minted plate so the user
   doesn't mistake it for a legitimate plate. */
.muni-plate--pending {
    background: transparent;
    box-shadow: none;
    color: var(--mud-palette-text-secondary);
    border-style: dashed;
}

.muni-plate--pending::before,
.muni-plate--pending::after {
    display: none;
}

/* ───────── .muni-vin · gray-fill civic ID-block atom. Sibling of MuniPlate.
   Same composition (label strap + identifier below + bordered frame) but
   quiet ink-mute fill, no rivets. Intended for VIN displays and other
   tagged identifiers that should sit alongside a MuniPlate without
   competing visually. */
.muni-vin {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    font-family: var(--muni-mono);
    font-weight: 700;
    color: var(--mud-palette-text-primary);
    background: var(--muni-vin-fill);
    border: 1.5px solid var(--mud-palette-text-primary);
    padding: var(--muni-space-1) var(--muni-space-3);
    line-height: 1;
}

.muni-vin__label {
    font-size: 0.55em;
    letter-spacing: 0.22em;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 2px;
    text-transform: uppercase;
}

.muni-vin__number {
    letter-spacing: 0.12em;
}

/* Size variants — small for context strips / row cells, large for hero or
   stand-alone identifier displays. */
.muni-vin--small {
    font-size: 13px;
    padding: 4px 10px;
}

.muni-vin--large {
    font-size: 24px;
    padding: 10px 18px;
}

/* Missing-identifier empty state (null/whitespace Number). Dashed frame,
   no fill — mirrors .muni-plate--pending so the missing-state visual
   language stays consistent across the atom family. */
.muni-vin--missing {
    background: transparent;
    color: var(--mud-palette-text-secondary);
    border-style: dashed;
}

/* ───────── .muni-ident-card · civic credential card (Wave 11.0).
   Two-panel horizontal split: theme-primary colored chip on the left
   (~30%) carries jurisdiction + credential name + ID number; cream
   right panel (~70%) carries the serif name mirror, top-right status
   stamp, and ISSUED / EXPIRES date pair. Per the design call:
   --mud-palette-primary for all cards regardless of type (no per-type
   color customization; keeps the DTO surface minimal). */
.muni-ident-card {
    display: grid;
    grid-template-columns: minmax(150px, 30%) 1fr;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--mud-palette-background);
    overflow: hidden;
}

/* Left chip — colored panel with jurisdiction eyebrow + bottom-anchored
   credential name + ID number. */
.muni-ident-card__chip {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: var(--muni-space-3) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 120px;
    border-right: 1px solid var(--mud-palette-text-primary);
}

.muni-ident-card__chip-juris {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mud-palette-primary-text) 75%, transparent);
}

.muni-ident-card__chip-foot {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.muni-ident-card__chip-name {
    font-family: var(--muni-serif);
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-primary-text);
    margin: 0;
    line-height: 1.2;
}

.muni-ident-card__chip-number {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: color-mix(in srgb, var(--mud-palette-primary-text) 80%, transparent);
}

/* Image-backed chip variant — when ChipImageUrl is supplied (e.g. a minted
   SL-CDN artifact preview) the chip's solid theme fill is replaced by the
   actual artwork. The `background-image` URL is set inline via style attr
   on the caller side; sizing + positioning + a top/bottom dark scrim live
   here so chip text (jurisdiction eyebrow + credential name + ID number)
   stays legible over arbitrary imagery.

   Scrim shape: darker at the top + bottom (where the chip text sits), more
   transparent through the middle (where the artwork's central content
   usually lives — portrait, hologram, etc.). Tweak the gradient stops if
   real artwork shows the text washing out. */
.muni-ident-card__chip--image {
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    isolation: isolate;
}

.muni-ident-card__chip--image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.55) 0%,
        rgba(0, 0, 0, 0.15) 28%,
        rgba(0, 0, 0, 0.15) 64%,
        rgba(0, 0, 0, 0.72) 100%
    );
    pointer-events: none;
    z-index: 0;
}

/* Promote the chip's own children above the scrim so text reads on top. */
.muni-ident-card__chip--image .muni-ident-card__chip-juris,
.muni-ident-card__chip--image .muni-ident-card__chip-foot {
    position: relative;
    z-index: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

/* Right body — cream panel with serif name, status stamp top-right,
   issued/expires date grid below. */
.muni-ident-card__body {
    background: var(--muni-paper-soft);
    padding: var(--muni-space-3) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-3);
}

.muni-ident-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--muni-space-3);
}

.muni-ident-card__name {
    font-family: var(--muni-serif);
    font-size: 1.15rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.muni-ident-card__status {
    flex-shrink: 0;
}

/* Heading link — when HeadingHref is supplied the h4 wraps its content in
   an anchor. Inherit the heading's serif weight + color, no underline by
   default; hover surfaces a hairline underline. Civic-link convention
   (matches .muni-approvals__tile-title a treatment). */
.muni-ident-card__name a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.muni-ident-card__name a:hover {
    border-bottom-color: currentColor;
}

/* Owner line — small mono-caps line above the date pair, populated only on
   the admin IdentificationsIndex where cards span multiple citizens. On the
   citizen-dossier sub-tab the surrounding context implies the owner so
   Owner is left null and this rule doesn't render. */
.muni-ident-card__owner {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.muni-ident-card__dates {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--muni-space-3);
    margin: 0;
}

.muni-ident-card__dates > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.muni-ident-card__dates dt {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin: 0;
}

.muni-ident-card__dates dd {
    font-family: var(--muni-mono);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
    margin: 0;
}

/* Footer slot — replaces .muni-ident-card__dates when the caller supplies
   a Footer render fragment (e.g. Approve/Deny buttons on the approvals
   queue). Flex row with wrap so action buttons sit on a single line until
   the column is too narrow. */
.muni-ident-card__footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-2);
    margin: 0;
}

/* Responsive — under 540px collapse to single column; chip drops its
   bottom border and the body sits directly beneath. */
@media (max-width: 540px) {
    .muni-ident-card {
        grid-template-columns: 1fr;
    }
    .muni-ident-card__chip {
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-text-primary);
        min-height: auto;
    }
}

/* Stack header — "ON FILE" centered between hairline rules, count
   meta right-aligned. Used by both IdentificationsIndex (Wave 11.1)
   and the citizen-dossier Credentials sub-tab (Wave 11.5). */
.muni-ident-stack {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-4);
}

.muni-ident-stack__head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--muni-space-4);
    padding-bottom: var(--muni-space-3);
    border-bottom: 1px solid var(--mud-palette-divider);
}

.muni-ident-stack__title {
    display: flex;
    align-items: center;
    gap: var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mud-palette-text-primary);
}

.muni-ident-stack__title::before,
.muni-ident-stack__title::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--mud-palette-text-primary);
    max-width: 60px;
}

.muni-ident-stack__count {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* Click-target wrapper around each MuniIdentCard in a .muni-ident-stack.
   Used in admin/dossier listings where the whole card is the navigation
   surface (no per-card Footer slot). Promoted from page-local CSS to
   shared per the second-consumer rule (Wave 11.1 IdentificationsIndex
   admin list + Wave 11.5 CitizenDetail dossier tab). */
.muni-ident-stack__card-link {
    cursor: pointer;
    display: block;
}
.muni-ident-stack__card-link:focus-visible {
    outline: 2px dashed var(--mud-palette-text-primary);
    outline-offset: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════
   Wave 12 · Token aliases for the new wrapper families
   ═══════════════════════════════════════════════════════════════════════
   The new wrapper CSS shipped this wave uses Design's prototype token
   names (`--muni-brass`, `--muni-green`, etc.) that don't all exist as
   stand-alone tokens in this stylesheet. Aliasing here keeps Design's
   spec verbatim while routing through the Mud palette + existing civic
   tokens, so light/dark theme switching continues to work.
*/
:root {
    /* Ink tones — text-primary at three opacity levels for legend / body / mute */
    --muni-ink: var(--mud-palette-text-primary);
    --muni-ink-soft: color-mix(in srgb, var(--mud-palette-text-primary) 78%, transparent);
    --muni-ink-mute: var(--mud-palette-text-secondary);

    /* Paper tones — page background + existing paper-soft inset */
    --muni-paper: var(--mud-palette-background);
    --muni-paper-hatch: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));

    /* Hairline rule — used in dashed dividers between dense rows */
    --muni-hair: color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);

    /* Semantic accent ink — bordered + tinted-fill pairs for notice banner variants */
    --muni-green: var(--muni-stamp-success);
    --muni-green-soft: color-mix(in srgb, var(--muni-stamp-success) 8%, var(--mud-palette-background));
    --muni-stamp: var(--muni-stamp-ink);
    --muni-stamp-soft: color-mix(in srgb, var(--muni-stamp-ink) 6%, var(--mud-palette-background));
    --muni-brass: var(--muni-accent);
    --muni-brass-soft: color-mix(in srgb, var(--muni-accent) 10%, var(--mud-palette-background));
}

/* ───────── MuniSaveBar · footer action row with dirty/clean state strip
   (Wave 12 §F·1) */
.muni-savebar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--muni-space-3);
    padding: var(--muni-space-3) var(--muni-space-4);
    background: var(--muni-paper-soft);
    border-top: 1.5px solid var(--muni-ink);
}

.muni-savebar--dirty {
    background: var(--muni-brass-soft);
    border-top: 2px solid var(--muni-brass);
}

.muni-savebar__status {
    font-family: var(--muni-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-savebar--dirty .muni-savebar__status { color: var(--muni-brass); }
.muni-savebar--saving .muni-savebar__status { color: var(--muni-ink-soft); }

.muni-savebar__actions {
    display: flex;
    gap: var(--muni-space-2);
}

.muni-savebar__btn {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    padding: var(--muni-space-2) var(--muni-space-3);
    border: 1.5px solid var(--muni-ink);
    background: transparent;
    color: var(--muni-ink);
    cursor: pointer;
    white-space: nowrap;
}
.muni-savebar__btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    color: var(--muni-ink-mute);
    border-color: var(--muni-ink-mute);
}
.muni-savebar__btn--primary {
    background: var(--muni-ink);
    color: var(--muni-paper);
}
.muni-savebar--dirty .muni-savebar__btn--primary {
    box-shadow: inset 0 0 0 2px var(--muni-brass);
}
.muni-savebar__spinner {
    margin-right: var(--muni-space-2);
    vertical-align: middle;
}

/* ───────── MuniNoticeBanner · civic-paper inline notice
   (Wave 12 §F·2 — replaces MudAlert + Wave 8's `.muni-notice` family) */
.muni-notice-banner {
    border: 1.5px solid var(--muni-ink);
    background: var(--muni-paper);
    padding: var(--muni-space-3) var(--muni-space-4);
    display: flex;
    align-items: flex-start;
    gap: var(--muni-space-3);
    margin: var(--muni-space-2) 0;
}
.muni-notice-banner--compact {
    padding: var(--muni-space-2) var(--muni-space-3);
}

.muni-notice-banner--success {
    border-color: var(--muni-green);
    background: var(--muni-green-soft);
}
.muni-notice-banner--caution {
    border-color: var(--muni-stamp);
    background: var(--muni-stamp-soft);
}
.muni-notice-banner--audit {
    border-color: var(--muni-brass);
    background: var(--muni-brass-soft);
}

.muni-notice-banner__body { flex: 1; min-width: 0; }

.muni-notice-banner__eyebrow {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-bottom: 2px;
}
.muni-notice-banner--success .muni-notice-banner__eyebrow { color: var(--muni-green); }
.muni-notice-banner--caution .muni-notice-banner__eyebrow { color: var(--muni-stamp); }
.muni-notice-banner--audit .muni-notice-banner__eyebrow { color: var(--muni-brass); }

.muni-notice-banner__message {
    font-family: var(--muni-serif);
    font-style: italic;
    color: var(--muni-ink);
    font-size: 13.5px;
    line-height: 1.5;
}

.muni-notice-banner__dismiss {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px 6px;
    flex-shrink: 0;
}
.muni-notice-banner__dismiss:hover { color: var(--muni-ink); }

/* ───────── MuniSecretField · masked input + reveal + copy + rotate
   (Wave 12 §F·3) */
.muni-secret {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--muni-space-2);
    align-items: center;
}
.muni-secret--no-rotate {
    grid-template-columns: 1fr auto auto;
}

.muni-secret__value {
    font-family: var(--muni-mono);
    font-size: 13px;
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    padding: var(--muni-space-2) var(--muni-space-3);
    color: var(--muni-ink);
    letter-spacing: 1.5px;
    width: 100%;
    min-width: 0;
}
.muni-secret__value--revealed { letter-spacing: 0.5px; }
.muni-secret__value::placeholder {
    color: var(--muni-ink-mute);
    font-style: italic;
    letter-spacing: normal;
}
.muni-secret__value:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.muni-secret__btn {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 5px 9px;
    border: 1.5px solid var(--muni-ink);
    background: transparent;
    color: var(--muni-ink-soft);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.muni-secret__btn:hover { color: var(--muni-ink); }
.muni-secret__btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.muni-secret__btn--copied {
    color: var(--muni-green);
    border-color: var(--muni-green);
}

.muni-secret__rotated {
    grid-column: 1 / -1;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    color: var(--muni-ink-mute);
    letter-spacing: 0.6px;
    font-style: italic;
    margin-top: var(--muni-space-1);
}
.muni-secret__rotated a {
    color: var(--muni-brass);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
}

.muni-secret__helper {
    grid-column: 1 / -1;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--muni-ink-mute);
    margin-top: var(--muni-space-1);
}

/* ───────── MuniRecordNav · vertical nav (route OR anchor mode)
   (Wave 12 §F·4) */
.muni-record-nav-host {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: var(--muni-space-5);
    align-items: start;
}

.muni-record-nav {
    /* Plain anchored nav — no card border, no fill. The active-item left
       border does the navigation-affordance work; a bordered/filled rail
       reads as a sibling of the section cards rather than their nav.
       (Wave 13 feedback ③.) position:sticky + StickyTop keep it following
       the viewport. */
    position: sticky;
    align-self: start;
    padding: var(--muni-space-3) 0;
}

.muni-record-nav__group-label {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    padding: var(--muni-space-3) var(--muni-space-4) var(--muni-space-1);
    border-bottom: 1px dashed var(--muni-hair);
    margin-bottom: var(--muni-space-1);
}

.muni-record-nav__item {
    display: block;
    padding: var(--muni-space-2) var(--muni-space-4);
    font-family: var(--muni-serif);
    font-size: 13.5px;
    color: var(--muni-ink-soft);
    text-decoration: none;
    border-left: 3px solid transparent;
}
.muni-record-nav__item:hover { color: var(--muni-ink); }
.muni-record-nav__item--active {
    color: var(--muni-ink);
    background: color-mix(in srgb, var(--muni-ink) 7%, transparent);
    border-left-color: var(--muni-ink);
    font-weight: 600;
}

.muni-record-nav-host__body {
    min-width: 0;
}

/* Inter-section rhythm — tight document spacing (~24px), not floating
   panels. The sections read as one record. (Wave 13 feedback ①.)
   scroll-margin-top clears the anchor-jump landing below any sticky
   offset. */
.muni-record-nav-host__body > section {
    margin: 0 0 var(--muni-space-5);
    scroll-margin-top: var(--muni-space-6);
}
.muni-record-nav-host__body > section:last-child {
    margin-bottom: 0;
}

@media (max-width: 880px) {
    .muni-record-nav-host { grid-template-columns: 1fr; }
    .muni-record-nav {
        position: sticky;
        top: 0;
        overflow-x: auto;
        white-space: nowrap;
        display: flex;
        gap: var(--muni-space-2);
        padding: var(--muni-space-2);
        border-right: 0;
        border-bottom: 1px solid var(--muni-ink);
    }
    .muni-record-nav__group-label {
        border-bottom: 0;
        padding: 0 var(--muni-space-2);
        align-self: center;
    }
    .muni-record-nav__item {
        border-left: 0;
        border-bottom: 3px solid transparent;
        padding: var(--muni-space-2);
    }
    .muni-record-nav__item--active {
        border-left-color: transparent;
        border-bottom-color: var(--muni-ink);
    }
}

/* ───────── .muni-image-slot · single-consumer CSS family for the
   CommunityProfile hero image uploader (Wave 12 §F·5). Page-local until
   a 2nd consumer ships (CommunityRental media / CommunityPromotions
   banner — Waves 13+); promote to MuniImageSlot wrapper then. */
.muni-image-slot {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--muni-space-3);
    align-items: flex-start;
    padding: var(--muni-space-2) 0;
}

.muni-image-slot__frame {
    aspect-ratio: 16 / 9;
    border: 1.5px dashed var(--muni-ink-mute);
    background: repeating-linear-gradient(45deg,
        var(--muni-paper-soft),
        var(--muni-paper-soft) 8px,
        var(--muni-paper-hatch) 8px,
        var(--muni-paper-hatch) 16px);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.muni-image-slot--filled .muni-image-slot__frame {
    border-style: solid;
    border-color: var(--muni-ink);
    background: var(--muni-paper);
}
.muni-image-slot__frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.muni-image-slot__placeholder {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--muni-ink-mute);
    text-transform: uppercase;
    text-align: center;
    padding: var(--muni-space-2);
}

.muni-image-slot__shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--muni-paper) 60%, transparent) 50%,
        transparent);
    animation: muni-image-slot-shimmer 1.4s linear infinite;
    pointer-events: none;
}
@keyframes muni-image-slot-shimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.muni-image-slot__actions {
    display: flex;
    flex-direction: column;
    gap: var(--muni-space-2);
    align-items: flex-start;
}
.muni-image-slot__btn {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: var(--muni-space-2) var(--muni-space-3);
    border: 1.5px solid var(--muni-ink);
    background: transparent;
    color: var(--muni-ink);
    cursor: pointer;
    text-align: left;
}
.muni-image-slot__btn--danger {
    color: var(--muni-stamp);
    border-color: var(--muni-stamp);
}
.muni-image-slot__hint {
    font-family: var(--muni-mono);
    font-size: 9px;
    color: var(--muni-ink-mute);
    letter-spacing: 0.6px;
    margin: var(--muni-space-1) 0 0;
}

/* ───────── MuniEmptyState · Loading variant additions (Wave 12)
   The Default variant CSS lives elsewhere in this file; this adds the
   Loading-variant centered-spinner block layout. */
.muni-empty-state--loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--muni-space-2);
    padding: var(--muni-space-6) var(--muni-space-4);
    text-align: center;
}
.muni-empty-state--loading .muni-empty-state__message {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--muni-ink-mute);
    margin: 0;
}

/* ───────── BrailleSpinner · civic indeterminate progress
   (Wave 12.0 fixup — lifted from Munibase.Web's app.css so the component
   can live in Munibase.UI/Components/Shared and be referenced cross-
   project. Single Unicode braille glyph cycling through 10 frames via
   keyframes. Color flows from the inline `color:` style. Per Nika's
   2026-05-16 directive, this is the default spinner everywhere in the
   civic UI — MudProgressCircular only when a bar spinner specifically
   fits a table-based context.) */
.braille-spinner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 2.75rem;
    line-height: 1;
}

.braille-spinner::after {
    content: "\280B";
}

@media (prefers-reduced-motion: no-preference) {
    .braille-spinner::after {
        animation: braille-spinner-frames 0.8s linear infinite;
    }
}

@keyframes braille-spinner-frames {
    10% { content: "\2819"; }
    20% { content: "\2839"; }
    30% { content: "\2838"; }
    40% { content: "\283C"; }
    50% { content: "\2834"; }
    60% { content: "\2826"; }
    70% { content: "\2827"; }
    80% { content: "\2807"; }
    90% { content: "\280F"; }
}

/* ───────── .muni-stamp--brass · custom-brass tone for stamps that need
   ────────── the civic brass accent rather than a MudBlazor Color tone.
   Used by the Wave 12.3 StreamSettings per-parcel relay picker to flag
   relays that have a saved custom-default override. Composes via the
   Class= parameter: <MuniStamp Color=Default Class="muni-stamp--brass">. */
.muni-stamp.muni-stamp--brass {
    color: var(--muni-brass);
    border-color: var(--muni-brass);
    background: color-mix(in srgb, var(--muni-brass) 8%, transparent);
}

/* ───────── .muni-shimmer-row · civic loading-skeleton placeholder
   ────────── for use inside MuniSection bodies while data fetches
   ────────── in the background (fire-and-forget pattern, Wave 12 §B·1·g).
   Pencil-sketch dimensions of a typical MuniRow label + control, with the
   same horizontal sweep animation as .muni-image-slot__shimmer. Three
   stacked rows visually communicate "list is loading" without committing
   to a specific row count. */
.muni-shimmer-row {
    position: relative;
    overflow: hidden;
    background: color-mix(in srgb, var(--muni-ink) 4%, transparent);
    border-radius: 2px;
    height: 28px;
    margin: var(--muni-space-2) 0;
}
.muni-shimmer-row + .muni-shimmer-row {
    margin-top: var(--muni-space-1);
}
.muni-shimmer-row::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg,
        transparent,
        color-mix(in srgb, var(--muni-paper) 70%, transparent) 50%,
        transparent);
    animation: muni-image-slot-shimmer 1.4s linear infinite;
    pointer-events: none;
}

/* Screen-reader-only utility class — referenced by BrailleSpinner's
   aria-live announcement (the visible glyph carries no semantic text). */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   Wave 13 · MuniPlat — civic survey plat (§D)
   ═══════════════════════════════════════════════════════════════════════
   One bordered card: header (Full only) + plat body (SVG grid + brass seal,
   HTML-overlay crosshair pins) + footer (Full only). Inset variant drops
   everything except the grid + 6x6 square marks. No new tokens. */

.muni-plat {
    font-family: var(--muni-sans);
}
.muni-plat--full {
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper-soft);
    padding: 18px;
}

/* Header — region name (serif) + extent ident (mono) */
.muni-plat__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    padding-bottom: 10px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--muni-ink);
}
.muni-plat__title {
    font-family: var(--muni-serif);
    font-size: 16px;
    font-weight: 600;
    color: var(--muni-ink);
}
.muni-plat__title-tag {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 400;
    color: var(--muni-ink-mute);
}
.muni-plat__ident {
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

/* Body — square plotting field */
.muni-plat__body {
    position: relative;
    aspect-ratio: 1 / 1;
}
.muni-plat--full .muni-plat__body {
    max-width: 420px;
    margin: 0 auto;
    border: 1.5px solid var(--muni-ink);
}
.muni-plat--inset {
    display: inline-block;
}
.muni-plat--inset .muni-plat__body {
    width: 120px;
    height: 120px;
    border: 1.5px solid var(--muni-ink);
}

/* Region texture layer (Wave 13.1 — Full mode only) — sits BELOW the grid
   SVG + pins. Duotone-mapped to the paper palette + low opacity so the plat
   reads as a cadastral survey, never a live-map embed. DOM order places it
   first in the body, so it stacks under everything that follows. */
.muni-plat__texture {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: sepia(1) saturate(0.55) hue-rotate(-20deg);
    opacity: 0.3;
    pointer-events: none;
}

/* SVG layer — hairline grid + brass seal */
.muni-plat__grid-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.muni-plat__grid-line {
    stroke: var(--muni-ink);
    opacity: 0.06;
}
.muni-plat__grid-line--major {
    opacity: 0.14;
}
.muni-plat__seal-ring {
    fill: none;
    stroke: var(--muni-brass);
}
.muni-plat__seal-text {
    fill: var(--muni-brass);
    font-family: var(--muni-mono);
    font-size: 4.6px;
    letter-spacing: 0.2px;
    opacity: 0.7;
}

/* Corner coordinate axis labels (Full only) */
.muni-plat__axis {
    position: absolute;
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1px;
    color: var(--muni-ink-mute);
}
.muni-plat__axis--tl { top: 4px; left: 6px; }
.muni-plat__axis--tr { top: 4px; right: 6px; }
.muni-plat__axis--bl { bottom: 4px; left: 6px; }
.muni-plat__axis--br { bottom: 4px; right: 6px; }

/* Pins — HTML overlay; crosshair via ::before/::after, label as child */
.muni-plat__pin {
    position: absolute;
    width: 14px;
    height: 14px;
    transform: translate(-50%, -50%);
    background: transparent;
    border: 0;
    padding: 0;
    cursor: default;
}
.muni-plat__pin--clickable { cursor: pointer; }
.muni-plat__pin::before,
.muni-plat__pin::after {
    content: "";
    position: absolute;
    background: var(--muni-ink);
    left: 50%;
    top: 50%;
}
.muni-plat__pin::before { width: 14px; height: 1.5px; transform: translate(-50%, -50%); }
.muni-plat__pin::after { width: 1.5px; height: 14px; transform: translate(-50%, -50%); }
.muni-plat__pin--dim { opacity: 0.45; }
.muni-plat__pin--dim::before,
.muni-plat__pin--dim::after { background: var(--muni-ink-mute); }

/* Inset mark — 6x6 square, no crosshair (crosshairs read as noise at 120px) */
.muni-plat__pin--mark::before {
    width: 6px;
    height: 6px;
    background: var(--muni-ink);
    transform: translate(-50%, -50%);
}
.muni-plat__pin--mark::after { display: none; }

/* Pin label — mono, paper-filled, hairline-bordered, below the crosshair */
.muni-plat__pin-label {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    white-space: nowrap;
    color: var(--muni-ink);
    background: var(--muni-paper);
    border: 1px solid var(--muni-ink);
    padding: 1px 5px;
}
.muni-plat__pin--dim .muni-plat__pin-label {
    color: var(--muni-ink-mute);
    border-color: var(--muni-ink-mute);
}

/* Footer + unparseable footnote (Full only) */
.muni-plat__foot {
    display: flex;
    justify-content: space-between;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--muni-ink);
    font-family: var(--muni-mono);
    font-size: 9.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-plat__footnote {
    margin: 8px 0 0;
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-stamp);
}


/* ════════════════════════════════════════════════════════════════════
   Wave 13 — Regions cluster: breadcrumbs, expandable ledger rows,
   landmark-filter chips, equipment-record, record-detail header.
   ════════════════════════════════════════════════════════════════════ */

/* --- Breadcrumbs (§C·1) — mono-caps row under the MuniPage title. ----- */
.muni-crumbs {
    display: flex;
    align-items: center;
    gap: var(--muni-space-2);
    font-family: var(--muni-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin: 0 0 var(--muni-space-4);
}
.muni-crumbs a,
.muni-crumbs__text {
    color: var(--muni-ink-mute);
    text-decoration: none;
    border-bottom: 1px dotted var(--muni-ink-mute);
}
.muni-crumbs a:hover {
    color: var(--muni-ink);
    border-bottom-color: var(--muni-ink);
}
.muni-crumbs__here {
    color: var(--muni-ink);
    font-weight: 700;
}
.muni-crumbs__sep {
    opacity: 0.5;
}

/* --- Expandable region ledger rows (§B·1·a) --------------------------- */
.muni-ledger-table__name {
    font-family: var(--muni-serif);
    font-weight: 600;
    font-size: 0.95rem;
    display: block;
}
.muni-ledger-table__name--sub {
    font-style: italic;
    font-size: 0.88rem;
    font-weight: 400;
}
.muni-ledger-table__caret {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    margin-left: var(--muni-space-2);
}
.muni-ledger-table__row--clickable {
    cursor: pointer;
}
.muni-ledger-table__row--expanded {
    background: color-mix(in srgb, var(--mud-palette-text-primary) 4%, transparent);
}
.muni-ledger-table__row--expanded > td {
    border-bottom: 1px solid var(--muni-ink);
}
.muni-ledger-table__subrow-host > td {
    padding: 0 !important;
    background: color-mix(in srgb, var(--mud-palette-text-primary) 3%, transparent);
}
.muni-ledger-table__sub {
    padding: var(--muni-space-2) var(--muni-space-4) var(--muni-space-3) 48px;
}
.muni-ledger-table__sub-head {
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    padding: var(--muni-space-2) 0;
}
.muni-ledger-table__sub-empty {
    font-family: var(--muni-serif);
    color: var(--muni-ink-mute);
    margin: 0 0 var(--muni-space-2);
}
.muni-ledger-table--sub {
    border: 0;
}
.muni-ledger-table--sub tbody tr:last-child {
    border-bottom: none;
}
.muni-ledger-table__region-link {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 0.4px;
    color: var(--muni-ink-mute);
    text-decoration: none;
    border-bottom: 1px dotted var(--muni-ink-mute);
    width: fit-content;
    margin-top: 2px;
}
.muni-ledger-table__region-link:hover {
    color: var(--muni-ink);
}

/* --- Landmark register filter chips (§B·1·c) -------------------------- */
.muni-landmarks__filters {
    flex-wrap: wrap;
    margin: 0;
}
.muni-landmarks__filter-chip {
    appearance: none;
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 4px 9px;
    border: 1.5px solid var(--muni-hair);
    background: transparent;
    color: var(--muni-ink-mute);
}
.muni-landmarks__filter-chip:hover {
    border-color: var(--muni-ink);
    color: var(--muni-ink);
}
.muni-landmarks__filter-chip--active {
    border-color: var(--muni-ink);
    background: var(--muni-ink);
    color: var(--muni-paper);
}

/* --- Section helpers reused by the Regions pages ---------------------- */
.muni-section__intro {
    font-family: var(--muni-serif);
    font-style: italic;
    color: var(--muni-ink-soft);
    margin: 0 0 var(--muni-space-4);
}
.muni-section__actions-row {
    display: flex;
    gap: var(--muni-space-2);
    margin-top: var(--muni-space-4);
}

/* --- Record-detail header (§B·2 / §B·3) ------------------------------- */
.muni-record-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--muni-space-6);
    align-items: start;
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    padding: var(--muni-space-5);
    margin-bottom: var(--muni-space-5);
}
.muni-record-head__eyebrow {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin: 0 0 var(--muni-space-1);
}
.muni-record-head__title {
    font-family: var(--muni-serif);
    font-size: 1.9rem;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin: 0 0 var(--muni-space-2);
    color: var(--muni-ink);
}
.muni-record-head__ident {
    font-family: var(--muni-mono);
    font-size: 0.75rem;
    color: var(--muni-ink-mute);
    letter-spacing: 0.6px;
    margin: 0 0 var(--muni-space-3);
}
.muni-record-head__lede {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 0.95rem;
    color: var(--muni-ink-soft);
    margin: 0 0 var(--muni-space-3);
}
/* Single inline mono row — LANDMARKS · 9   DISPENSERS · 2   SORT · 0.
   The figures are data, not posters; a stacked label-over-number block
   over-weighted them. (Wave 13 feedback ①.) */
.muni-record-head__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-4);
    margin: var(--muni-space-3) 0;
    font-family: var(--muni-mono);
    font-size: 0.72rem;
}
.muni-record-head__meta .k {
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-record-head__meta .v {
    color: var(--muni-ink);
}
.muni-record-head__inset {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--muni-space-1);
}
.muni-record-head__inset-label {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

/* --- Equipment record (§B·3) ------------------------------------------ */
.muni-equip__ident-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--muni-space-6);
}
@media (max-width: 720px) {
    .muni-equip__ident-grid {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .muni-record-head {
        grid-template-columns: 1fr;
    }
}
.muni-equip__fact {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: var(--muni-space-3);
    padding: 7px 0;
    border-bottom: 1px dashed var(--muni-hair);
    align-items: baseline;
}
.muni-equip__fact:last-child {
    border-bottom: none;
}
.muni-equip__fact-label {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-soft);
}
.muni-equip__fact-value {
    font-family: var(--muni-serif);
    color: var(--muni-ink);
}
.muni-equip__fact-value--mono {
    font-family: var(--muni-mono);
    font-size: 0.78rem;
    word-break: break-all;
}
.muni-equip__fact-sub {
    display: block;
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    color: var(--muni-ink-mute);
    margin-top: 2px;
}
.muni-equip__actions {
    display: flex;
    gap: var(--muni-space-2);
    flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────
   .muni-seg · segmented filter pill cluster
   The canonical civic treatment for toolbar status/scope filters,
   replacing the <select> fallback used in Wave 15. Spec: Wave 16
   handoff §A·1·c (the single sanctioned CSS addition). Shipped
   ahead of Wave 16 as a Wave 17 prerequisite (Wave 17 toolbars
   consume it). No Blazor component — compose in markup directly.
   ───────────────────────────────────────────────────────────── */
.muni-seg {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper-soft);
    font-family: var(--muni-mono);
}
.muni-seg__p {
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    padding: 7px 11px;
    color: var(--muni-ink);
    background: transparent;
    cursor: pointer;
    border-right: 1px solid var(--muni-ink);
    position: relative;
    user-select: none;
}
.muni-seg__p:last-child {
    border-right: 0;
}
.muni-seg__p:hover {
    background: rgba(35, 31, 21, .04);
}
.muni-seg__p[aria-pressed="true"] {
    background: var(--muni-ink);
    color: var(--muni-paper);
}
.muni-seg__p[aria-pressed="true"]::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    border-bottom: 2px solid var(--muni-ink);
}
.muni-seg__p[disabled] {
    opacity: .4;
    cursor: not-allowed;
}
.muni-seg__ct {
    font-size: 8.5px;
    font-weight: 600;
    margin-left: 5px;
    opacity: .65;
}

/* Tight density · for section-head inline use */
.muni-seg--tight .muni-seg__p {
    padding: 5px 9px;
    font-size: 8.5px;
}

/* ═════════════════════════════════════════════════════════════════
   THE CONSOLE PATTERN — Wave 16 §A·1·a
   A bureau-artifact composition for live operator surfaces: a status
   crown with an oversized ON AIR / OFF AIR stamp, a four-cell live-
   state band, a hairline-divided transport rail of operator keys, and
   a split body of queue + tape log. Two consumers: RadioConsole and
   DjOperations — they must render pixel-identical, so the lattice
   lives here (genuine shared 2-consumer composition), not in scoped
   CSS. NO MuniConsole component — composed in markup per-page.

   DEVIATION FROM SPEC: §A·1·a note 7 claims these classes "live in
   munibase-civic.css already from a Wave 11 experiment" — verified
   FALSE; they did not exist. This block creates the lattice for the
   first time, translated from the Wave 16.html <style> mock using
   real civic token vars (reality supersedes design).
   ───────────────────────────────────────────────────────────────── */
.console {
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    overflow: hidden;
}

/* ── Status crown ── */
.console .crown {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--muni-space-5);
    padding: 18px 22px;
    border-bottom: 1px solid var(--muni-ink);
    align-items: center;
    background: var(--muni-paper-soft);
}
.console .crown .crown-left .muni-eyebrow,
.console .crown .crown-left .console-eyebrow {
    margin-bottom: 4px;
}
.console .crown .crown-left h3 {
    margin: 0;
    font-family: var(--muni-serif);
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.3px;
    color: var(--muni-ink);
}
.console .crown .crown-left .live-line {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-style: italic;
    color: var(--muni-ink-soft);
    margin: 4px 0 0;
}
.console .crown .crown-left .live-line .now {
    color: var(--muni-ink);
    font-style: normal;
    font-family: var(--muni-mono);
    font-size: 12px;
    letter-spacing: .5px;
}

/* ── The oversized ON AIR / OFF AIR stamp ── */
.console .crown .big-stamp {
    font-family: var(--muni-mono);
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 4px;
    padding: 10px 16px;
    border: 2px solid var(--muni-stamp);
    color: var(--muni-stamp);
    background: var(--muni-stamp-soft);
    transform: rotate(-2deg);
    line-height: 1;
    white-space: nowrap;
}
.console .crown .big-stamp.off {
    border-color: var(--muni-ink-mute);
    color: var(--muni-ink-mute);
    background: var(--muni-paper-soft);
}
.console .crown .big-stamp.on::before {
    content: "\25CF";
    color: var(--muni-stamp);
    margin-right: 8px;
    animation: muni-console-pulse 1.4s infinite;
}
@keyframes muni-console-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

/* ── Four-cell live-state band ── */
.console .live-band {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--muni-ink);
}
.console .live-band .cell {
    padding: 10px 16px;
    border-right: 1px solid var(--muni-ink);
}
.console .live-band .cell:last-child {
    border-right: 0;
}
.console .live-band .cell .k {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.console .live-band .cell .v {
    font-family: var(--muni-mono);
    font-size: 14px;
    color: var(--muni-ink);
    margin-top: 2px;
    font-weight: 600;
    letter-spacing: .3px;
}
.console .live-band .cell .v.serif {
    font-family: var(--muni-serif);
    font-style: italic;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0;
}
.console .live-band .cell .meter {
    height: 6px;
    border: 1px solid var(--muni-ink);
    margin-top: 6px;
    background: var(--muni-paper-soft);
    position: relative;
    overflow: hidden;
}
.console .live-band .cell .meter .bar {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    background: repeating-linear-gradient(90deg,
        var(--muni-ink) 0 3px, transparent 3px 5px);
}

/* ── Transport rail · 3-5 operator keys, hairline-divided ── */
.console .transport {
    display: flex;
    gap: 0;
    padding: 0;
    border-bottom: 1px solid var(--muni-ink);
}
.console .transport .key {
    flex: 1;
    padding: 14px 8px;
    border-right: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    text-align: center;
    font: inherit;
    color: inherit;
}
.console .transport .key:last-child {
    border-right: 0;
}
.console .transport .key:hover {
    background: var(--muni-paper-soft);
}
.console .transport .key .keystroke {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--muni-ink-mute);
    border: 1px solid var(--muni-ink-mute);
    padding: 1px 5px;
    border-radius: 1px;
    background: var(--muni-paper-soft);
}
.console .transport .key .label {
    font-family: var(--muni-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-ink);
    margin-top: 2px;
}
.console .transport .key.primary {
    background: var(--muni-ink);
    color: var(--muni-paper);
}
.console .transport .key.primary .label {
    color: var(--muni-paper);
}
.console .transport .key.primary .keystroke {
    color: var(--muni-paper);
    border-color: var(--muni-paper);
    background: transparent;
}
.console .transport .key.warn {
    background: var(--muni-stamp-soft);
}
.console .transport .key.warn .label {
    color: var(--muni-stamp);
}
.console .transport .key.disabled {
    opacity: .4;
    cursor: not-allowed;
}

/* ── Split body · queue (left, wider) + tape log (right) ── */
.console .body {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 0;
}
.console .body .queue {
    border-right: 1px solid var(--muni-ink);
}
.console .body .col-head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--muni-ink);
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    background: var(--muni-paper-soft);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.console .body .col-head .live-dot {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--muni-stamp);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
}
.console .body .col-head .live-dot::before {
    content: "\25CF";
    animation: muni-console-pulse 1.4s infinite;
}
.console .body .qrow {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    gap: 12px;
    padding: 9px 16px;
    border-bottom: 1px dashed var(--muni-hair);
    align-items: center;
}
.console .body .qrow:last-child {
    border-bottom: 0;
}
.console .body .qrow.clickable {
    cursor: pointer;
}
.console .body .qrow.clickable:hover {
    background: var(--muni-paper-soft);
}
.console .body .qrow .pos {
    font-family: var(--muni-mono);
    font-size: 9px;
    color: var(--muni-ink-mute);
    font-weight: 700;
    letter-spacing: 1.2px;
}
.console .body .qrow.now {
    background: var(--muni-stamp-soft);
}
.console .body .qrow.now .pos {
    color: var(--muni-stamp);
}
.console .body .qrow .subj {
    font-family: var(--muni-serif);
    font-size: 13.5px;
    font-weight: 600;
    color: var(--muni-ink);
}
.console .body .qrow .sub {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    margin-top: 1px;
}
.console .body .qrow .time {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
}
.console .body .qrow .qrow-action {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    padding: 4px 8px;
    border: 1px solid var(--muni-ink);
    background: transparent;
    color: var(--muni-ink);
    cursor: pointer;
}
.console .body .qrow .qrow-action:hover {
    background: var(--muni-ink);
    color: var(--muni-paper);
}
.console .body .log {
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--muni-ink-soft);
    line-height: 1.5;
}
.console .body .log .ent {
    padding: 7px 16px;
    border-bottom: 1px dashed var(--muni-hair);
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 10px;
}
.console .body .log .ent:last-child {
    border-bottom: 0;
}
.console .body .log .ent .t {
    color: var(--muni-ink-mute);
}
.console .body .log .ent.flag,
.console .body .log .ent.flag .t {
    color: var(--muni-stamp);
}

/* ── Console-empty bodies (no live data) ── */
.console .body .console-empty {
    padding: 22px 16px;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--muni-ink-mute);
    text-align: center;
}

/* A console may stack a second body (DjOperations track library). */
.console .body--secondary {
    border-top: 1px solid var(--muni-ink);
}

/* ════════════════════════════════════════════════════════════════
   WAVE 18 GAP-FILL COMPONENTS · per spec §G
   Six new component families. No tokens change; no existing class
   modified — strict append. The two MuniSection variant modifiers
   (.muni-section--civic-correspondence / .muni-section--civic-broadsheet)
   ADJUST existing legend rules; the bare .muni-section--civic-document
   class is an explicit alias of the Wave 12 default.
   ════════════════════════════════════════════════════════════════ */

/* ── §G·1 · MuniSwitch · the civic toggle ───────────────────── */
.muni-switch {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--muni-space-4);
    cursor: pointer;
    user-select: none;
    padding: 6px 0;
    position: relative;
}
.muni-switch__native {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}
.muni-switch__textcol {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.muni-switch__label {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--mud-palette-text-primary);
}
.muni-switch__help {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}
.muni-switch__track {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 22px;
    border: 1px solid var(--mud-palette-text-primary);
    background: var(--muni-paper-soft);
    transition: background-color 180ms var(--muni-ease);
}
.muni-switch__knob {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 18px;
    height: 18px;
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-text-primary);
    /* SQUARE knob per spec — no border-radius. */
    transition: transform 180ms var(--muni-ease), background-color 180ms var(--muni-ease);
}
.muni-switch--on .muni-switch__track {
    background: var(--mud-palette-primary);
}
.muni-switch--on .muni-switch__knob {
    transform: translateX(22px);
}
.muni-switch--disabled {
    cursor: not-allowed;
}
.muni-switch--disabled .muni-switch__label,
.muni-switch--disabled .muni-switch__help {
    color: var(--mud-palette-text-secondary);
    opacity: 0.6;
}
.muni-switch--disabled .muni-switch__track {
    border-color: var(--mud-palette-text-secondary);
    background: var(--muni-paper-soft);
    opacity: 0.6;
}
.muni-switch:focus-within .muni-switch__track {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* ── §G·2 · MuniRule · documented <hr> wrapper ──────────────── */
.muni-rule {
    border: 0;
    margin: var(--muni-space-3) 0;
    height: 0;
}
.muni-rule--solid {
    border-top: 1px solid var(--mud-palette-text-primary);
}
.muni-rule--hair {
    border-top: 1px dashed color-mix(in srgb, var(--mud-palette-text-primary) 18%, transparent);
}

/* ── §G·3 · MuniLink · documented <a> wrapper ───────────────── */
.muni-link {
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    transition: color 120ms var(--muni-ease);
}
.muni-link--navigate {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: var(--mud-palette-text-primary);
}
.muni-link--navigate:hover,
.muni-link--navigate:focus-visible {
    color: var(--mud-palette-primary);
    text-decoration-color: var(--mud-palette-primary);
}
.muni-link--action {
    text-decoration: none;
    font-weight: 500;
}
.muni-link--action:hover,
.muni-link--action:focus-visible {
    color: var(--mud-palette-primary);
}
.muni-link--external {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-decoration-color: var(--mud-palette-text-primary);
}
.muni-link--external:hover,
.muni-link--external:focus-visible {
    color: var(--mud-palette-primary);
    text-decoration-color: var(--mud-palette-primary);
}
.muni-link__external-glyph {
    font-family: var(--muni-mono);
    font-size: 0.85em;
    margin-left: 2px;
    color: var(--mud-palette-text-secondary);
}

/* ── §G·4 · MuniSection.Eyebrow · the new slot ──────────────── */
.muni-section__eyebrow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding-bottom: 6px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--mud-palette-text-primary);
}
.muni-section__eyebrow .stamp-chip {
    flex: 0 0 auto;
}

/* Stamp-chip atom — referenced by the eyebrow slot and reusable
   anywhere a small bordered mono pill is needed without the rotation
   of a full MuniStamp. */
.stamp-chip {
    display: inline-block;
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    padding: 3px 7px;
    border: 1.5px solid;
    line-height: 1;
}
.stamp-chip.green {
    color: var(--muni-stamp-success);
    border-color: var(--muni-stamp-success);
    background: color-mix(in srgb, var(--muni-stamp-success) 6%, transparent);
}
.stamp-chip.red {
    color: var(--mud-palette-error);
    border-color: var(--mud-palette-error);
    background: color-mix(in srgb, var(--mud-palette-error) 6%, transparent);
}
.stamp-chip.brass {
    color: var(--muni-stamp-warning);
    border-color: var(--muni-stamp-warning);
    background: color-mix(in srgb, var(--muni-stamp-warning) 7%, transparent);
}
.stamp-chip.ink {
    color: var(--mud-palette-text-secondary);
    border-color: var(--mud-palette-text-secondary);
}

/* ── §G·5 · MuniCorrespondence · self-service frame ─────────── */
.muni-correspondence {
    padding: var(--muni-space-5) var(--muni-space-6) var(--muni-space-6);
    background: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
    /* Wave 18 §B knob 1 — citizen voice runs at ~30% paper noise.
       Soften the global body noise on this frame so it sits one
       register quieter than the staff document voice. */
    background-blend-mode: multiply;
    /* Wave 18 fixup 2026-05-25: bottom hairline rule + margin to give
       the frame clear visual termination. Without it the header bleeds
       into the first section below and reads as understyled per Nika
       UAT on /citizen/dashboard + /account/profile. */
    border-bottom: 1px solid var(--mud-palette-text-primary);
    margin-bottom: var(--muni-space-5);
}
.muni-correspondence__salute {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 14px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
}
.muni-correspondence__title {
    font-family: var(--muni-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.08;
    margin: 0 0 10px 0;
    color: var(--mud-palette-text-primary);
}
.muni-correspondence__lede {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-style: normal;
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
    max-width: 520px;
    margin: 0;
}
.muni-correspondence__meta {
    margin-top: 14px;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
}

/* ── §G·6 · MuniBroadsheet · public frame ───────────────────── */
.muni-broadsheet {
    padding: var(--muni-space-6) var(--muni-space-6) var(--muni-space-5);
    background: var(--mud-palette-background);
    text-align: center;
    border-bottom: 3px double var(--mud-palette-text-primary);
    /* §B knob 1 — public voice runs at 0% paper noise. Override
       the inherited body noise here so the broadsheet reads clean. */
    background-image: none;
}
.muni-broadsheet__nameplate {
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 8px;
}
.muni-broadsheet__seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1.5px solid var(--mud-palette-text-primary);
    border-radius: 50%;
    margin-bottom: 6px;
    font-family: var(--muni-display);
    font-size: 18px;
    line-height: 1;
    color: var(--mud-palette-text-primary);
}
.muni-broadsheet__title {
    font-family: var(--muni-display);
    font-size: 54px;
    font-weight: 400;
    letter-spacing: -0.8px;
    line-height: 1;
    margin: 0;
    color: var(--mud-palette-text-primary);
}
.muni-broadsheet__sub {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 16px;
    line-height: 1.4;
    color: var(--mud-palette-text-secondary);
    margin: 8px auto 0;
    max-width: 640px;
}
.muni-broadsheet__dash {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}
.muni-broadsheet__dash-sep {
    color: var(--mud-palette-text-secondary);
    opacity: 0.5;
}

/* ── §G·7 · MuniSection variant modifiers ───────────────────── */
/* civic-document is an alias of the Wave 12 default — no extra
   rules needed beyond the marker class itself. Listed here only
   so future maintainers can grep for the three variants together. */
.muni-section--civic-document {
    /* alias of .muni-section--default */
}

/* civic-correspondence — citizen voice. Serif italic header, no §N,
   no eyebrow, soft chip-only right slot. Per §B knobs 3/4/5/7. */
.muni-section--civic-correspondence > .muni-section__legend {
    border-bottom: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 22%, transparent);
}
.muni-section--civic-correspondence > .muni-section__legend .muni-section__title {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}
.muni-section--civic-correspondence > .muni-section__legend .muni-section__legend-left {
    font-family: var(--muni-serif);
    letter-spacing: 0;
    text-transform: none;
}
.muni-section--civic-correspondence > .muni-section__legend .muni-section__legend-right {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--mud-palette-text-secondary);
}

/* civic-broadsheet — public voice. Centered serif header on a
   hairline ABOVE the title. Per §B knobs 2/3/4/5/7. */
.muni-section--civic-broadsheet > .muni-section__legend {
    flex-direction: column;
    align-items: center;
    text-align: center;
    border-top: 1px solid var(--mud-palette-text-primary);
    border-bottom: none;
    padding-top: 10px;
    padding-bottom: 0;
    margin-bottom: var(--muni-space-4);
}
.muni-section--civic-broadsheet > .muni-section__legend .muni-section__legend-left {
    font-family: var(--muni-serif);
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}
.muni-section--civic-broadsheet > .muni-section__legend .muni-section__title {
    font-family: var(--muni-serif);
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}
.muni-section--civic-broadsheet > .muni-section__legend .muni-section__legend-right {
    display: none;
}

/* =====================================================================
   .muni-folder — Wave 18 §D·2 · dossier folder header (CitizenDetail)
   Lifted byte-for-byte from the Citizen Tail handoff §D·2 mock CSS, with
   tokens swapped to the munibase-civic variables. This is the single
   display-register exception on civic-document: the citizen name renders
   in Instrument Serif because the file-folder visual metaphor asks for
   it. Do NOT extend this exception to other staff pages.
   ===================================================================== */
.muni-folder {
    position: relative;
    /* Wave 21 §A polish round 4 — match .muni-public-dossier__folder
       verbatim so the staff masthead reads the same hue as the public
       folder card. Removed background-image:paper-noise (public folder
       doesn't have it — the noise was tinting the tan more red-brown);
       border width matches public's 1px; added the small box-shadow
       public uses to lift the manila card off the paper sheet. */
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    border-radius: 0 4px 4px 4px;
    box-shadow: 2px 4px 0 0 var(--mud-palette-text-primary);
    padding: 24px 26px 18px;
    margin-bottom: 18px;
}
/* Wave 18 fixup 2026-05-25: layout wrapper -- main content on the left, */
/* portrait as a full-height flex sibling on the right. Replaces the     */
/* prior float-right portrait which only spanned the upper row.          */
.muni-folder__layout {
    display: flex;
    gap: 18px;
    align-items: stretch;
}
.muni-folder__main {
    flex: 1 1 auto;
    min-width: 0;
}
/* Note: previously had a `.muni-folder::before` paper-tab decoration    */
/* here, but it overlapped the visible `__tab` element with its border   */
/* and rendered as a pair of rogue thin lines above the eyebrow per      */
/* Nika UAT 2026-05-25. Removed -- `__tab` carries the visible folder    */
/* tab; no decorative pseudo needed.                                     */
.muni-folder__tab {
    /* Wave 21 §A polish round 4 — padding bumped to match
       .muni-public-dossier__tab's 10/36/12 so the tab has the same
       substance as on the public dossier. Top offset adjusted to keep
       a 1px overlap into the folder body (matches public's
       margin-bottom: -1px effect). Border width matched to 1px. */
    position: absolute;
    top: -38px;
    left: 48px;
    padding: 10px 36px 12px;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 1.4px;
    color: var(--mud-palette-text-primary);
    background: color-mix(in srgb, var(--mud-palette-warning) 22%, var(--mud-palette-background));
    border: 1px solid var(--mud-palette-text-primary);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
}
/* Portrait: flex sibling of __main, fixed 1:1 square. Width drives the */
/* height via aspect-ratio. align-self:flex-start so the flex parent's */
/* align-items:stretch doesn't override aspect-ratio and re-elongate. */
/* Per Nika UAT round 2: 2:3 stretched looked wrong; 1:1 reads as a  */
/* proper passport / file-photo square. */
.muni-folder__portrait {
    flex: 0 0 auto;
    width: 200px;
    aspect-ratio: 1 / 1;
    align-self: flex-start;
    border: 1px solid var(--muni-ink);
    background: repeating-linear-gradient(45deg,
        color-mix(in srgb, var(--muni-ink) 5%, transparent),
        color-mix(in srgb, var(--muni-ink) 5%, transparent) 4px,
        transparent 4px,
        transparent 8px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-mono);
    font-size: 8.5px;
    color: var(--muni-ink-mute);
    letter-spacing: 1px;
    text-align: center;
    line-height: 1.3;
    overflow: hidden;
}
.muni-folder__portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.muni-folder__portrait-placeholder {
    padding: 4px;
    text-transform: uppercase;
}
.muni-folder__eyebrow {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-bottom: 6px;
    display: block;
}
.muni-folder__head {
    font-family: var(--muni-display);
    font-size: 36px;
    font-weight: 400;
    letter-spacing: -0.4px;
    line-height: 1.05;
    margin: 0;
    color: var(--muni-ink);
}
.muni-folder__head-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 8px;
    vertical-align: middle;
}
.muni-folder__sub {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 13.5px;
    color: var(--muni-ink-soft);
    margin: 6px 0 0;
    max-width: 600px;
}
.muni-folder__kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 14px;
    border-top: 1px solid var(--muni-ink);
    padding-top: 10px;
    clear: both;
}
.muni-folder__kpi {
    padding-right: 14px;
    border-right: 1px dashed var(--muni-hair);
}
.muni-folder__kpi:last-child {
    border-right: 0;
    padding-right: 0;
}
.muni-folder__kpi-k {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.3px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    display: block;
}
.muni-folder__kpi-v {
    font-family: var(--muni-serif);
    font-size: 17px;
    font-weight: 600;
    margin-top: 2px;
    color: var(--muni-ink);
    display: block;
}
.muni-folder__kpi-v.muni-folder__kpi-v--mono {
    font-family: var(--muni-mono);
    font-size: 13px;
}
.muni-folder__actions {
    margin-top: 14px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    clear: both;
}
.muni-folder__edit-sash {
    margin-bottom: 12px;
    padding: 8px 14px;
    border: 1px dashed var(--muni-ink);
    background: color-mix(in srgb, var(--muni-ink) 4%, transparent);
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--muni-serif);
    font-size: 13px;
    color: var(--muni-ink);
}
.muni-folder__edit-sash-tag {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-folder__edit-sash-done {
    margin-left: auto;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--muni-ink);
    color: var(--muni-ink);
    padding: 4px 10px;
    cursor: pointer;
}
.muni-folder__edit-sash-done:hover {
    background: var(--muni-ink);
    color: var(--muni-paper);
}

/* MuniRecordNav rail variant for CitizenDetail file shell. The base
   rail primitive does its own layout (host grid); this just gives the
   dossier a top-margin nudge so the rail sits flush with the first
   section block under the folder header. */
.muni-citizen-page__file-shell {
    margin-top: 0;
}
.muni-citizen-page__file-shell .muni-record-nav__group-label,
.muni-citizen-page__file-shell .muni-record-nav {
    font-family: var(--muni-serif);
}

/* =====================================================================
   Quest Office tab strip + section head (Phase 60.1 Plan 13 chrome).
   Bordered glyph tab strip for /operations/quests [Quests . Gates .
   Audit Log], mirroring gate-handoff/gate-page.jsx (lines ~104-120).
   Distinct .muni-quest-* family so it stays decoupled from the
   Reputation/Dossier .muni-rep-tab convention (which is reserved for
   that surface per the reputation-tab vocabulary note).
   ===================================================================== */
.muni-quest-tabs {
    display: flex;
    border: 1px solid var(--muni-hair);
    background: var(--muni-paper-soft);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 18px;
}

.muni-quest-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 8px;
    cursor: pointer;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    white-space: nowrap;
    transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
}

.muni-quest-tab:not(:last-child) {
    border-right: 1px solid var(--muni-hair);
}

.muni-quest-tab:hover {
    color: var(--muni-ink);
}

.muni-quest-tab:focus-visible {
    outline: 2px solid var(--muni-ink);
    outline-offset: -2px;
}

.muni-quest-tab--active {
    background: var(--muni-paper);
    border-bottom: 2px solid var(--mud-palette-primary);
    color: var(--muni-ink);
}

.muni-quest-tab__glyph {
    font-size: 12px;
    color: var(--muni-ink-mute);
    line-height: 1;
}

.muni-quest-tab--active .muni-quest-tab__glyph {
    color: var(--mud-palette-primary);
}

/* sectionHead: serif title + italic description on the left, a
   right-aligned primary action on the right, over a hairline rule.
   Mirrors gate-page.jsx sectionHead() (lines ~12-22). */
.muni-quest-sechead {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    border-bottom: 1px solid var(--muni-ink);
    padding-bottom: 8px;
    margin-bottom: 14px;
}

.muni-quest-sechead__text {
    min-width: 0;
}

.muni-quest-sechead__title {
    font-family: var(--muni-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--muni-ink);
    line-height: 1.2;
}

.muni-quest-sechead__desc {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--muni-ink-soft);
    margin-top: 3px;
    max-width: 620px;
    line-height: 1.45;
}

.muni-quest-sechead__action {
    flex-shrink: 0;
    white-space: nowrap;
}