/* ============================================================
   muni-components.css — the shared Muni component contract.

   Generated from munibase-civic.css by tools/extract-muni-components.js.
   Consumed by Munibase itself AND by external surfaces that must render
   Munibase-derived records with component ubiquity (briarmont-sl.com).

   Served at: /_content/Munibase.UI/css/muni-components.css

   Rules for editing:
   - Component families listed in the extractor's FAMILIES array live
     here; keep new selectors for those families in this file.
   - Tokens are --muni-* only. The block below provides static fallbacks
     for the MudBlazor palette variables referenced by tokens, so the
     sheet renders identically on hosts without MudBlazor.
   ============================================================ */

/* MudBlazor palette fallbacks for non-Blazor hosts. Values are the Bureau
   light ToneSet -- the shipped community default (CivicMunibaseTheme.Default).
   Munibase itself overrides these at runtime via MudThemeProvider. */
:root {
    --mud-palette-background: #ECEBE3;      /* Paper */
    --mud-palette-surface: #ECEBE3;         /* Paper */
    --mud-palette-text-primary: #14140D;    /* Ink */
    --mud-palette-text-secondary: #6B6853;  /* InkMute */
    --mud-palette-text-disabled: rgba(107, 104, 83, 0.5);
    --mud-palette-primary: #2A3D1F;         /* Primary */
    --mud-palette-primary-text: #ECEBE3;    /* PrimaryContrastText */
    --mud-palette-secondary: #8C6420;       /* Accent */
    --mud-palette-divider: #B5B09A;         /* Rule */
    --mud-palette-error: #702618;           /* Stamp */
    --mud-palette-warning: #8C6420;         /* Accent */
    --mud-palette-success: #2A3D1F;         /* Primary */
    --mud-palette-info: #2A3D1F;            /* Primary */
}

: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;
    --muni-ease: cubic-bezier(0.2, 0, 0.1, 1);
    --muni-paper-edge: color-mix(in srgb, var(--mud-palette-text-primary) 10%, var(--mud-palette-background));
    --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>");
    --muni-blotter-primary: #1b3a57;
    --muni-blotter-primary-soft: #e4ebf1;
    --muni-blotter-accent: #8a6b21;
    --muni-blotter-stamp: #7a1f2b;
    --muni-blotter-stamp-soft: #fbf3f2;
    --muni-blotter-ink: #131a21;
    --muni-blotter-ink-soft: #334049;
    --muni-blotter-ink-mute: #5b6770;
    --muni-blotter-paper: #f7f9fa;
    --muni-blotter-paper-soft: #eef1f3;
    --muni-blotter-paper-edge: #e2e7eb;
    --muni-blotter-rule: #131a21;
    --muni-blotter-rule-soft: #cdd4d9;
}

.styleguide-directory-card-grid .muni-directory__card {
    min-width: 0;
}

.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);
}

/* ─── §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;
}

.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-table__actions-row .muni-btn--civic {
    font-size: 11px;
    padding: 5px 10px;
}



@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;
    }
}

.muni-blotter-severity,
.muni-blotter-status,
.muni-blotter-category,
.muni-blotter-integration {
    display: inline-flex;
    align-items: center;
    width: max-content;
    font-family: var(--muni-mono);
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.muni-blotter-category {
    gap: 7px;
    color: var(--muni-blotter-ink-soft);
    font-size: 10px;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.muni-blotter-category__glyph {
    min-width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--muni-blotter-rule-soft);
    border-radius: 2px;
    color: var(--muni-blotter-primary);
}

.muni-blotter-category--conduct .muni-blotter-category__glyph { color: var(--muni-blotter-stamp); }

.muni-blotter-category--platform .muni-blotter-category__glyph { color: var(--muni-blotter-primary); }

.muni-blotter-category--estate .muni-blotter-category__glyph,
.muni-blotter-category--action .muni-blotter-category__glyph { color: var(--muni-blotter-accent); }

/* ============================================================
   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; }

/* 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);
}

/* ============================================================
   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);
}

/* MuniConfigEditor rich empty-state card cell (opt-in, EmptyStateTemplate).
   The consumer supplies the card; this just removes table-cell chrome so the
   card can be a centered dashed panel spanning the full ledger width. */
.muni-ledger-table__empty-row--card > td {
    padding: 0;
    border: none;
    background: transparent;
}

/* ============================================================
   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;
}

/* 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);
}

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

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

/* ============================================================
   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;
}

:root {
    --muni-manila-shadow: #7A6940;
    --muni-accent: #8C6420;
    --muni-plate-rivet: #c9a528;
    --muni-plate-juris: #5a4818;
    --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-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-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;
}

:root {
    --muni-ink-soft: color-mix(in srgb, var(--mud-palette-text-primary) 78%, transparent);
    --muni-ink-mute: var(--mud-palette-text-secondary);
    --muni-paper-hatch: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));
    --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));
}

/* ───────── 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); }

/* ───────── 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;
}

/* ───────── .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);
}

/* --- 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);
}

/* ─────────────────────────────────────────────────────────────
   .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;
}

:root {
    --muni-ap-rule-soft: color-mix(in srgb, var(--mud-palette-text-primary) 10%, transparent);
    --muni-ap-paper-edge: color-mix(in srgb, var(--mud-palette-text-primary) 12%, var(--mud-palette-background));
}

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

/* ============================================================
   Group profile / biopic family — muni-group-detail, muni-group-crest,
   muni-group-roster, muni-group-roles, muni-group-role, muni-group-link,
   muni-group-business, muni-group-application(s).
   Relocated from the GroupProfile.razor inline <style> block so external
   consumers (briarmont-sl.com civic biopics) share the exact styling.
   Hand-relocated: the extractor's migrate mode preserves this section.
   ============================================================ */

    .muni-group-detail {
        display: flex;
        flex-direction: column;
        gap: var(--muni-space-4);
    }

    .muni-group-crest {
        display: grid;
        grid-template-columns: 200px 1fr;
        gap: var(--muni-space-4);
        border: 1px solid var(--mud-palette-text-primary);
        background: var(--mud-palette-surface);
        padding: var(--muni-space-4);
        align-items: center;
    }

    .muni-group-crest__icon {
        width: 200px;
        height: 200px;
        border: 1px solid var(--mud-palette-text-primary);
        background: var(--mud-palette-background);
        display: grid;
        place-items: center;
        overflow: hidden;
    }

    .muni-group-crest__icon img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
    }

    .muni-group-crest__icon-fallback {
        font-family: var(--muni-serif);
        font-size: 3rem;
        font-weight: 600;
        color: var(--mud-palette-text-secondary);
        letter-spacing: -2px;
    }

    .muni-group-crest__body {
        display: flex;
        flex-direction: column;
        gap: var(--muni-space-2);
        min-width: 0;
    }

    .muni-group-crest__chips {
        display: flex;
        flex-wrap: wrap;
        gap: var(--muni-space-2);
        align-items: baseline;
    }

    .muni-group-crest__desc {
        font-family: var(--muni-serif);
        font-style: italic;
        font-size: 0.95rem;
        line-height: 1.55;
        color: var(--mud-palette-text-secondary);
        margin: 0;
        max-width: 60ch;
    }

    .muni-group-roster__primary {
        font-family: var(--muni-serif);
        font-size: 1.1rem;
        color: var(--mud-palette-warning);
        line-height: 1;
    }

    .muni-group-roster__citizen-link {
        color: var(--mud-palette-text-primary);
        text-decoration: none;
        border-bottom: 1px dotted var(--mud-palette-divider);
    }

    .muni-group-roster__citizen-link:hover,
    .muni-group-roster__citizen-link:focus-visible {
        border-bottom-style: solid;
        border-bottom-color: var(--mud-palette-text-primary);
    }

    .muni-group-roles {
        display: flex;
        flex-direction: column;
    }

    .muni-group-role {
        padding: var(--muni-space-3) 0;
        border-bottom: 1px dashed var(--mud-palette-divider);
    }

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

    .muni-group-role__name {
        font-family: var(--muni-serif);
        font-size: 1rem;
        font-weight: 500;
        color: var(--mud-palette-text-primary);
    }

    .muni-group-role__desc {
        font-family: var(--muni-serif);
        font-style: italic;
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        line-height: 1.55;
        margin-top: 4px;
    }

    .muni-group-applications {
        display: flex;
        flex-direction: column;
    }

    .muni-group-application {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--muni-space-3);
        padding: var(--muni-space-3) 0;
        border-bottom: 1px dashed var(--mud-palette-divider);
        text-decoration: none;
        color: inherit;
    }

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

    .muni-group-application:hover .muni-group-application__name,
    .muni-group-application:focus-visible .muni-group-application__name {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 3px;
    }

    .muni-group-application__main {
        flex: 1 1 auto;
        min-width: 0;
    }

    .muni-group-application__name {
        font-family: var(--muni-serif);
        font-size: 1rem;
        font-weight: 500;
        color: var(--mud-palette-text-primary);
    }

    .muni-group-application__desc {
        font-family: var(--muni-serif);
        font-style: italic;
        font-size: 0.88rem;
        color: var(--mud-palette-text-secondary);
        line-height: 1.55;
        margin-top: 4px;
    }

    .muni-group-application__open {
        flex: 0 0 auto;
        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);
    }

    .muni-group-business__tagline {
        font-family: var(--muni-serif);
        font-style: italic;
        font-size: 0.95rem;
        color: var(--mud-palette-text-secondary);
        margin: 0 0 var(--muni-space-3);
        line-height: 1.55;
    }

    .muni-group-link {
        color: var(--mud-palette-text-primary);
        text-decoration: none;
        border-bottom: 1px solid var(--mud-palette-divider);
    }

    .muni-group-link:hover {
        border-bottom-color: var(--mud-palette-text-primary);
    }

    @media (max-width: 600px) {
        .muni-group-crest {
            grid-template-columns: 1fr;
        }

        .muni-group-crest__icon {
            justify-self: start;
        }
    }

/* ------------------------------------------------------------------
   .muni-citizen-highlight - the tier-2 citizen presentation ("Citizen
   Highlight"), canonized 2026-07-05 from the briarmont-sl.com design
   bundle (reworks/2026-07-05-dispatch-team/citizen-highlight.html):
   tier 1 = directory card, tier 2 = this, tier 3 = the full dossier.
   Geometry and hierarchy per the .chl spec; colors and type
   re-expressed in Muni tokens. First consumer: the WP civic register
   (featured leadership per group); Munibase-side adoption can follow.
   ------------------------------------------------------------------ */
.muni-citizen-highlight {
    display: grid;
    grid-template-columns: 240px 1fr;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-text-primary);
    overflow: hidden;
    text-align: left;
}

.muni-citizen-highlight__photo {
    position: relative;
    min-height: 220px;
    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-right: 1px solid var(--mud-palette-text-primary);
    overflow: hidden;
}

.muni-citizen-highlight__photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.muni-citizen-highlight__initials {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    font-family: var(--muni-serif);
    font-size: 2.6rem;
    letter-spacing: 0.06em;
    color: color-mix(in srgb, var(--mud-palette-text-primary) 45%, transparent);
}

.muni-citizen-highlight__body {
    padding: var(--muni-space-5) var(--muni-space-5) var(--muni-space-4);
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.muni-citizen-highlight__kicker {
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--mud-palette-text-secondary);
    margin: 0 0 var(--muni-space-2);
}

.muni-citizen-highlight__name {
    font-family: var(--muni-serif);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    display: flex;
    align-items: center;
    gap: var(--muni-space-2);
    margin: 0;
}

.muni-citizen-highlight__sub {
    font-family: var(--muni-mono);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    letter-spacing: 0.03em;
    margin: var(--muni-space-1) 0 0;
}

.muni-citizen-highlight__bio {
    font-size: 0.92rem;
    color: var(--mud-palette-text-secondary);
    line-height: 1.6;
    margin: var(--muni-space-3) 0 0;
    max-width: 58ch;
}

.muni-citizen-highlight__chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-2);
    margin-top: var(--muni-space-4);
}

.muni-citizen-highlight__chip {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 3px 9px;
    border: 1px solid var(--mud-palette-divider);
    color: var(--mud-palette-text-secondary);
    background: var(--mud-palette-background);
}

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

.muni-citizen-highlight__foot-label {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.13em;
    color: var(--mud-palette-text-secondary);
    display: inline-flex;
    align-items: center;
    gap: var(--muni-space-2);
}

.muni-citizen-highlight--compact {
    grid-template-columns: 150px 1fr;
}

.muni-citizen-highlight--compact .muni-citizen-highlight__photo {
    min-height: 170px;
}

.muni-citizen-highlight--compact .muni-citizen-highlight__body {
    padding: var(--muni-space-4);
}

.muni-citizen-highlight--compact .muni-citizen-highlight__name {
    font-size: 1.2rem;
}

.muni-citizen-highlight--compact .muni-citizen-highlight__bio {
    font-size: 0.85rem;
    margin-top: var(--muni-space-2);
}

.muni-citizen-highlight__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--muni-space-4);
}



@media (max-width: 720px) {

    .muni-citizen-highlight,
    .muni-citizen-highlight--compact {
        grid-template-columns: 1fr;
    }


    .muni-citizen-highlight__photo {
        min-height: 200px;
        aspect-ratio: 16 / 9;
        border-right: 0;
        border-bottom: 1px solid var(--mud-palette-text-primary);
    }


    .muni-citizen-highlight__pair {
        grid-template-columns: 1fr;
    }
}