:root {
    /* 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;
}

/* MuniSpecimen + MuniCodeFold — demo-first styleguide contract cards.
   These extend the existing component-contract card language: live specimen,
   collapsed implementation fold, Source footer, and status badge. */
.muni-specimen-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--muni-space-4);
}

.muni-specimen-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.muni-specimen-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.muni-specimen {
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
}

.muni-specimen--wide {
    grid-column: 1 / -1;
}

.muni-specimen__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--muni-space-4);
    padding: var(--muni-space-4);
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.muni-specimen__head-copy {
    min-width: 0;
}

.muni-specimen__name {
    display: inline-block;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 0;
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.8px;
    line-height: 1.25;
    text-transform: uppercase;
}

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

.muni-specimen__summary code {
    font-family: var(--muni-mono);
    font-size: 0.76em;
    font-style: normal;
}

.muni-specimen__demo {
    min-height: 112px;
    padding: var(--muni-space-5);
    background: var(--mud-palette-background);
}

.muni-specimen__demo--edge {
    padding: 0;
}

.muni-specimen__placeholder {
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
}

.muni-specimen-dialog-preview {
    overflow: hidden;
    border: 1px solid var(--mud-palette-divider);
    background: var(--mud-palette-background);
}

.muni-code-fold {
    border-top: 1px dashed var(--mud-palette-divider);
    background: var(--mud-palette-background-gray);
}

.muni-code-fold__summary {
    display: flex;
    align-items: center;
    gap: var(--muni-space-2);
    padding: 9px 14px;
    cursor: pointer;
    user-select: none;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    list-style: none;
    text-transform: uppercase;
}

.muni-code-fold__summary::-webkit-details-marker {
    display: none;
}

.muni-code-fold__summary:hover {
    color: var(--mud-palette-text-primary);
}

.muni-code-fold__chev {
    display: inline-block;
    color: var(--mud-palette-warning);
    transition: transform var(--muni-fast) var(--muni-ease);
}

.muni-code-fold[open] .muni-code-fold__chev {
    transform: rotate(90deg);
}

.muni-code-fold__lang {
    opacity: 0.7;
}

.muni-code-fold__spacer {
    flex: 1 1 auto;
}

.muni-code-fold__code {
    margin: 0;
    padding: 14px 16px;
    overflow-x: auto;
    border-left: 3px solid var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-text-primary) 88%, var(--mud-palette-background) 12%);
    color: var(--mud-palette-background);
    font-family: var(--muni-mono);
    font-size: 0.72rem;
    line-height: 1.62;
    white-space: pre;
}

.muni-code-fold__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--muni-space-3);
    padding: 7px 14px;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.64rem;
    letter-spacing: 0.4px;
}

.muni-code-fold__footer code {
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
}

.muni-code-fold__copy {
    appearance: none;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: transparent;
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    padding: 3px 8px;
    text-transform: uppercase;
}

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

.muni-code-fold__empty {
    padding: var(--muni-space-3) 14px;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-serif);
    font-size: 0.86rem;
    font-style: italic;
}

.muni-status-badge {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 2px;
    font-family: var(--muni-mono);
    font-size: 0.56rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    line-height: 1;
    padding: 3px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.muni-status-badge--ok {
    color: var(--mud-palette-primary);
}

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

.muni-status-badge--ink {
    color: var(--mud-palette-text-primary);
}

/* Rev 04 specimen system - authoritative styleguide fidelity block. */
.sg-section {
    margin: 0 0 52px;
}

.sg-section__head {
    display: flex;
    align-items: baseline;
    gap: 16px;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--mud-palette-text-primary);
    margin-bottom: 22px;
}

.sg-section__no {
    color: var(--mud-palette-text-secondary);
    font: 700 11px/1 var(--muni-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.sg-section__title {
    font: 600 26px/1 var(--muni-serif);
    letter-spacing: 0;
}

.muni-specimen-grid {
    display: grid;
    grid-template-columns: none;
    gap: 18px;
}

.muni-specimen-grid.cols-2,
.muni-specimen-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
}

.muni-specimen-grid.cols-3,
.muni-specimen-grid--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.muni-specimen-grid--form-composition {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
}

.muni-specimen-grid--identity,
.muni-specimen-grid--table-surfaces {
    grid-template-columns: minmax(0, 1fr);
}

.muni-specimen-grid--record-primitives {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.muni-specimen-grid--wizard-review {
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
}

.muni-specimen-grid--toolbar-shell {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
}

.muni-specimen-grid--shipped-surfaces {
    grid-template-columns: repeat(2, minmax(340px, 1fr));
}

.muni-specimen-grid--moderator-blotter {
    grid-template-columns: repeat(2, minmax(360px, 1fr));
}

.muni-specimen-grid--toolbar-shell .muni-specimen--wide,
.muni-specimen-grid--wizard-review .muni-specimen--wide,
.muni-specimen-grid--shipped-surfaces .muni-specimen--wide,
.muni-specimen-grid--moderator-blotter .muni-specimen--wide {
    grid-column: 1 / -1;
}

.styleguide-record-layout {
    display: grid;
    gap: 18px;
}

.styleguide-record-row {
    display: grid;
    gap: 18px;
}

.styleguide-record-row--triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.styleguide-record-row--empty-rental {
    grid-template-columns: minmax(340px, 1fr) minmax(0, 1.4fr);
}

.muni-specimen {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    overflow: hidden;
}

.muni-specimen__head {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 14px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider);
    background: var(--muni-paper-soft);
}

.muni-specimen__name {
    flex: 0 0 auto;
    display: inline;
    color: var(--mud-palette-text-primary);
    background: transparent;
    border: 0;
    font: 700 10px/1.3 var(--muni-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.muni-specimen__note,
.muni-specimen__summary {
    flex: 1 1 auto;
    margin: 0;
    text-align: right;
    color: var(--mud-palette-text-secondary);
    font: italic 12px/1.35 var(--muni-serif);
}

.muni-specimen__demo {
    min-height: 0;
    padding: 20px;
    background: var(--mud-palette-background);
}

.muni-specimen__demo.--edge,
.muni-specimen__demo--edge {
    padding: 20px;
    background: var(--muni-paper-edge);
}

.muni-status-badge {
    flex: 0 0 auto;
    border: 1px solid currentColor;
    border-radius: 2px;
    font: 700 9px/1 var(--muni-mono);
    letter-spacing: 1.4px;
    padding: 2px 7px;
    text-transform: uppercase;
    white-space: nowrap;
}

.muni-status-badge.--shipped,
.muni-status-badge--ok {
    color: var(--mud-palette-primary);
}

.muni-status-badge.--new,
.muni-status-badge--todo {
    color: var(--mud-palette-warning);
}

.muni-fold,
.muni-code-fold {
    border-top: 1px dashed var(--mud-palette-divider);
    background: var(--muni-paper-soft);
}

.muni-fold > summary,
.muni-code-fold__summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    color: var(--mud-palette-text-secondary);
    font: 700 10px/1 var(--muni-mono);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    user-select: none;
}

.muni-fold > summary::-webkit-details-marker,
.muni-code-fold__summary::-webkit-details-marker {
    display: none;
}

.muni-fold__chev,
.muni-code-fold__chev {
    display: inline-block;
    color: var(--mud-palette-warning);
    transition: transform .15s;
}

.muni-fold[open] .muni-fold__chev,
.muni-code-fold[open] .muni-code-fold__chev {
    transform: rotate(90deg);
}

.muni-fold__lang,
.muni-code-fold__lang {
    margin-left: auto;
    opacity: .65;
}

.muni-fold pre,
.muni-code-fold__code {
    margin: 0;
    padding: 14px 16px;
    background: #1a1a14;
    color: #e8e3d0;
    border-left: 3px solid var(--mud-palette-warning);
    font: 11.5px/1.62 var(--muni-mono);
    overflow-x: auto;
    white-space: pre;
}

.muni-fold__source,
.muni-code-fold__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--muni-space-3);
    padding: 7px 14px;
    color: var(--mud-palette-text-secondary);
    font: 10px var(--muni-mono);
    letter-spacing: .4px;
}

.muni-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--muni-space-3);
    width: 100%;
}

.muni-toolbar__search {
    display: inline-flex;
    align-items: center;
    gap: var(--muni-space-2);
    min-width: min(100%, 280px);
    flex: 1 1 280px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    padding: 7px 10px;
}

.muni-toolbar__search-icon {
    color: var(--mud-palette-warning);
    font-family: var(--muni-mono);
    font-weight: 800;
}

.muni-toolbar__search input {
    min-width: 0;
    width: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font: 600 0.88rem var(--muni-sans);
}

.muni-toolbar__filters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-2);
}

.muni-toolbar__filter,
.muni-pager__button {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.3px;
    padding: 6px 10px;
    text-transform: uppercase;
}

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

.muni-toolbar__actions {
    display: inline-flex;
    justify-content: flex-end;
    margin-left: auto;
}

.muni-pager {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--muni-space-3);
    padding: var(--muni-space-3) 0 0;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

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

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

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

.muni-pager__size select {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    color: var(--mud-palette-text-primary);
    font: inherit;
    padding: 4px 7px;
}

.styleguide-refresh {
    display: grid;
    gap: var(--muni-space-6);
}

.styleguide-refresh__masthead {
    display: grid;
    gap: var(--muni-space-3);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    padding: var(--muni-space-6);
}

.styleguide-refresh__rev {
    color: var(--mud-palette-warning);
    font-family: var(--muni-mono);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.styleguide-refresh__title {
    margin: 0;
    font-family: var(--muni-serif);
    font-size: clamp(2.15rem, 4vw, 4rem);
    line-height: 1;
}

.styleguide-refresh__lede {
    max-width: 880px;
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-serif);
    font-size: 1.08rem;
    font-style: italic;
    line-height: 1.55;
}

.styleguide-refresh__nav {
    position: sticky;
    top: var(--muni-space-3);
    z-index: 3;
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-2);
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: color-mix(in srgb, var(--mud-palette-background) 92%, transparent);
    padding: var(--muni-space-3);
    backdrop-filter: blur(8px);
}

.styleguide-refresh__nav a {
    color: var(--mud-palette-text-primary);
    font-family: var(--muni-mono);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.1px;
    text-decoration: none;
    text-transform: uppercase;
}

.styleguide-refresh__section {
    display: grid;
    gap: 18px;
    margin: 0 0 52px;
    scroll-margin-top: 96px;
}

.styleguide-refresh__section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 2px solid var(--mud-palette-text-primary);
    padding-bottom: 10px;
    margin-bottom: 4px;
}

.styleguide-refresh__section-head > div {
    display: flex;
    align-items: baseline;
    gap: 16px;
}

.styleguide-refresh__section-kicker {
    color: var(--mud-palette-text-secondary);
    font: 700 11px/1 var(--muni-mono);
    letter-spacing: 2px;
    text-transform: uppercase;
}

.styleguide-refresh__section-title {
    margin: 0;
    font: 600 26px/1 var(--muni-serif);
    letter-spacing: 0;
}

.styleguide-token-grid,
.styleguide-atom-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--muni-space-4);
}

.styleguide-token-card,
.styleguide-atom-card {
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
    background: var(--mud-palette-background);
    padding: var(--muni-space-4);
}

.styleguide-token-card h3,
.styleguide-atom-card h3 {
    margin: 0 0 var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.styleguide-token-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: var(--muni-space-3);
    align-items: center;
    padding: var(--muni-space-2) 0;
    border-top: 1px dashed var(--mud-palette-divider);
    font-family: var(--muni-mono);
    font-size: 0.68rem;
}

.styleguide-token-swatch {
    width: 100%;
    min-height: 28px;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 2px;
}

.styleguide-token-swatch--primary { background: var(--mud-palette-primary); }
.styleguide-token-swatch--secondary { background: var(--mud-palette-secondary); }
.styleguide-token-swatch--warning { background: var(--mud-palette-warning); }
.styleguide-token-swatch--surface { background: var(--mud-palette-surface); }
.styleguide-token-swatch--background { background: var(--mud-palette-background); }
.styleguide-token-swatch--gray { background: var(--mud-palette-background-gray); }

.styleguide-font-sample--serif { font-family: var(--muni-serif); }
.styleguide-font-sample--sans { font-family: var(--muni-sans); }
.styleguide-font-sample--mono { font-family: var(--muni-mono); }
.styleguide-font-sample--signature { font-family: var(--muni-signature); font-size: 1.35rem; }

.styleguide-spacing-row {
    display: flex;
    align-items: center;
    gap: var(--muni-space-3);
    padding: var(--muni-space-2) 0;
    border-top: 1px dashed var(--mud-palette-divider);
}

.styleguide-spacing-bar {
    height: 10px;
    background: var(--mud-palette-primary);
}

.styleguide-atom-stack {
    display: grid;
    gap: var(--muni-space-3);
}

.styleguide-paper-noise {
    min-height: 104px;
    border: 1px dashed var(--mud-palette-divider);
    background-color: var(--mud-palette-background);
    background-image: var(--muni-paper-noise);
}

.styleguide-stack {
    display: grid;
    gap: var(--muni-space-4);
}

.styleguide-serif {
    margin: 0;
    color: var(--mud-palette-text-secondary);
    font-family: var(--muni-serif);
    font-size: 0.95rem;
    line-height: 1.55;
}

.styleguide-form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--muni-space-4);
}

.styleguide-seal-grid {
    display: grid;
    grid-template-columns: repeat(3, min-content);
    align-items: center;
    gap: var(--muni-space-3);
}

.styleguide-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--muni-space-3);
}

.styleguide-stat-strip .muni-stat:nth-child(2) {
    border-color: var(--mud-palette-warning);
    background: color-mix(in srgb, var(--mud-palette-warning) 12%, var(--mud-palette-background) 88%);
}

.styleguide-rental-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 14px;
    align-items: stretch;
}

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

.styleguide-rental-grid .muni-rental-card__row {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: var(--muni-space-3);
    align-items: start;
}

.styleguide-rental-grid .muni-rental-card__addr-line {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.styleguide-rental-grid .muni-rental-card__addr-meta {
    display: block;
}

.styleguide-rental-grid .muni-rental-card__paid-thru {
    grid-column: 2 / 4;
    grid-row: 2;
    align-items: flex-start;
    border-top: 1px dashed var(--mud-palette-divider);
    margin-top: var(--muni-space-1);
    padding-top: var(--muni-space-2);
}

.styleguide-rental-grid .muni-rental-card__right {
    grid-column: 3;
    grid-row: 1;
    align-items: flex-end;
}

.styleguide-directory-card-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(280px, 1fr));
    gap: var(--muni-space-4);
    align-items: stretch;
}

.styleguide-portrait-center {
    display: grid;
    justify-items: center;
}

.styleguide-dialog-launch {
    display: grid;
    gap: var(--muni-space-4);
    justify-items: start;
}

.styleguide-blotter-stack {
    display: grid;
    gap: var(--muni-space-4);
}

.styleguide-blotter-inline,
.styleguide-blotter-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--muni-space-2);
    align-items: center;
}

.styleguide-blotter-meta-row {
    align-items: stretch;
}

.styleguide-blotter-state-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--muni-space-4);
}

@media (max-width: 900px) {
    .muni-specimen-grid,
    .muni-specimen-grid--cols-2,
    .muni-specimen-grid--cols-3,
    .muni-specimen-grid--form-composition,
    .muni-specimen-grid--identity,
    .muni-specimen-grid--table-surfaces,
    .muni-specimen-grid--record-primitives,
    .muni-specimen-grid--wizard-review,
    .muni-specimen-grid--toolbar-shell,
    .muni-specimen-grid--shipped-surfaces,
    .muni-specimen-grid--moderator-blotter,
    .styleguide-record-row,
    .styleguide-directory-card-grid,
    .styleguide-token-grid,
    .styleguide-atom-grid,
    .styleguide-form-grid,
    .styleguide-stat-strip,
    .styleguide-rental-grid {
        grid-template-columns: 1fr;
    }

    .styleguide-refresh__section-head {
        align-items: flex-start;
        flex-direction: column;
    }}

@media print {
    .muni-code-fold,
    .muni-code-fold__body {
        display: block !important;
    }

    .muni-code-fold:not([open]) .muni-code-fold__body {
        display: block !important;
    }}

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

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

.muni-table--clickable .mud-table-body .mud-table-row {
    cursor: pointer;
}

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

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

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

/* Security Blotter component family. Records/navy palette, moderator-only
   confidential treatment, and neutral record-keeping vocabulary. */
.muni-blotter-confidential {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 18px;
    border: 1px solid var(--muni-blotter-stamp);
    border-radius: 2px;
    background: var(--muni-blotter-stamp-soft);
    color: var(--muni-blotter-stamp);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.muni-blotter-confidential--compact { padding: 7px 14px; }
.muni-blotter-confidential__lead { display: inline-flex; align-items: center; gap: 6px; }
.muni-blotter-confidential__dot {
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: var(--muni-blotter-stamp);
}
.muni-blotter-confidential__rule {
    width: 1px;
    align-self: stretch;
    background: color-mix(in srgb, var(--muni-blotter-stamp) 44%, transparent);
}
.muni-blotter-confidential__right {
    margin-left: auto;
    color: var(--muni-blotter-ink-mute);
}
.muni-blotter-severity {
    gap: 6px;
    color: var(--muni-blotter-ink-soft);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.muni-blotter-severity__mark {
    width: 9px;
    height: 9px;
    border: 1px solid currentColor;
    background: currentColor;
}
.muni-blotter-severity--low { color: var(--muni-blotter-ink-mute); }
.muni-blotter-severity--medium { color: var(--muni-blotter-accent); }
.muni-blotter-severity--high { color: #b4531f; }
.muni-blotter-severity--critical {
    padding: 4px 8px;
    border: 1px solid var(--muni-blotter-stamp);
    background: var(--muni-blotter-stamp);
    color: var(--muni-blotter-paper);
}
.muni-blotter-status {
    gap: 7px;
    padding: 5px 10px;
    border: 1px solid var(--muni-blotter-rule-soft);
    border-radius: 2px;
    background: var(--muni-blotter-paper-edge);
    color: var(--muni-blotter-ink-soft);
    font-size: 10px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.muni-blotter-status__dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: var(--muni-blotter-ink-mute);
}
.muni-blotter-status--monitoring {
    border-color: color-mix(in srgb, var(--muni-blotter-accent) 42%, var(--muni-blotter-rule-soft));
    background: color-mix(in srgb, var(--muni-blotter-accent) 14%, var(--muni-blotter-paper));
    color: var(--muni-blotter-accent);
}
.muni-blotter-status--monitoring .muni-blotter-status__dot { background: var(--muni-blotter-accent); }
.muni-blotter-status--follow-up-needed {
    border-color: var(--muni-blotter-stamp);
    background: var(--muni-blotter-stamp-soft);
    color: var(--muni-blotter-stamp);
}
.muni-blotter-status--follow-up-needed .muni-blotter-status__dot { background: var(--muni-blotter-stamp); }
.muni-blotter-status--resolved {
    border-color: var(--muni-blotter-primary);
    background: var(--muni-blotter-primary-soft);
    color: var(--muni-blotter-primary);
}
.muni-blotter-status--resolved .muni-blotter-status__dot { background: var(--muni-blotter-primary); }
.muni-blotter-status--archived { opacity: 0.64; }
.muni-blotter-integration {
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 1px solid var(--muni-blotter-primary);
    border-radius: 2px;
    color: var(--muni-blotter-primary);
    font-size: 10px;
}
.muni-blotter-integration--estate {
    border-color: var(--muni-blotter-accent);
    color: var(--muni-blotter-accent);
}
.muni-blotter-meta__label,
.muni-form-field__head,
.muni-blotter-panel__title,
.muni-blotter-panel__right,
.muni-blotter-list__head,
.muni-blotter-list__columns,
.muni-blotter-list__dates,
.muni-blotter-empty__foot,
.muni-blotter-locked__foot {
    font-family: var(--muni-mono);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.muni-blotter-meta__label {
    color: var(--muni-blotter-ink-mute);
    font-size: 8.5px;
    font-weight: 700;
}
.muni-blotter-meta__value {
    margin-top: 3px;
    color: var(--muni-blotter-ink);
    font-family: var(--muni-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.muni-blotter-meta__value--serif {
    font-family: var(--muni-serif);
    font-size: 14px;
}
.muni-blotter-meta__value--accent { color: var(--muni-blotter-stamp); }

.muni-blotter-tab {
    display: grid;
    gap: 18px;
    color: var(--muni-blotter-ink);
}
.muni-blotter-tab__summary {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
}
.muni-blotter-tab__summary > section {
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
    padding: 12px 16px;
}
.muni-blotter-tab__count-card {
    display: flex;
    gap: 26px;
}
.muni-blotter-tab__count-card div {
    min-width: 0;
    display: grid;
    gap: 3px;
}
.muni-blotter-tab__count-card span,
.muni-blotter-tab__summary h4 {
    margin: 0 0 8px;
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}
.muni-blotter-tab__count-card strong {
    color: var(--muni-blotter-ink);
    font-family: var(--muni-serif);
    font-size: 32px;
    line-height: 1;
}
.muni-blotter-tab__count-card em {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-style: normal;
}
.muni-blotter-tab__bar {
    display: grid;
    grid-template-columns: 58px 1fr 18px;
    gap: 8px;
    align-items: center;
    margin-top: 7px;
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}
.muni-blotter-tab__bar i {
    height: 8px;
    border: 1px solid var(--muni-blotter-rule-soft);
    background: linear-gradient(90deg, var(--muni-blotter-primary) var(--muni-blotter-bar), var(--muni-blotter-paper-soft) var(--muni-blotter-bar));
}
.muni-blotter-tab__bar b { text-align: right; }
.muni-blotter-tab__categories {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.muni-blotter-tab__category {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid var(--muni-blotter-rule-soft);
    background: var(--muni-blotter-paper-soft);
    color: var(--muni-blotter-ink);
    cursor: pointer;
}
.muni-blotter-tab__category:hover,
.muni-blotter-tab__category--active {
    border-color: var(--muni-blotter-primary);
    background: var(--muni-blotter-primary-soft);
}
.muni-blotter-tab__categories b {
    font-family: var(--muni-mono);
    font-size: 10px;
}
.muni-blotter-table__record,
.muni-blotter-table__summary,
.muni-blotter-table__dates {
    min-width: 0;
    display: grid;
    gap: 4px;
}
.muni-blotter-table__record strong {
    font-family: var(--muni-mono);
    font-size: 11px;
}
.muni-blotter-table__summary strong {
    font-family: var(--muni-serif);
    font-size: 13.5px;
    line-height: 1.35;
}
.muni-blotter-table__summary > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.muni-blotter-table__summary em,
.muni-blotter-table__summary b {
    padding: 1px 6px;
    border: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-style: normal;
}
.muni-blotter-table__dates {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 10px;
}
.muni-blotter-list {
    overflow: hidden;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
}
.muni-blotter-list__head,
.muni-blotter-list__columns,
.muni-blotter-list__row {
    display: grid;
    grid-template-columns: 96px 150px minmax(0, 1fr) 128px 108px;
    gap: 14px;
    align-items: center;
}
.muni-blotter-list__head {
    grid-template-columns: 1fr auto;
    padding: 11px 18px;
    border-bottom: 1px solid var(--muni-blotter-rule);
    background: var(--muni-blotter-paper-soft);
    color: var(--muni-blotter-ink-mute);
    font-size: 10px;
}
.muni-blotter-list__head > div {
    display: flex;
    align-items: baseline;
    gap: 10px;
}
.muni-blotter-list__head strong {
    color: var(--muni-blotter-ink);
    font-family: var(--muni-serif);
    font-size: 15px;
    letter-spacing: 0;
    text-transform: none;
}
.muni-blotter-list__filter {
    padding: 3px 8px;
    border: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-soft);
}
.muni-blotter-list__columns {
    padding: 8px 18px;
    border-bottom: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-mute);
    font-size: 8.5px;
    font-weight: 700;
}
.muni-blotter-list__row {
    width: 100%;
    padding: 13px 18px;
    color: inherit;
    text-align: left;
    border: 0;
    border-bottom: 1px dashed var(--muni-blotter-rule-soft);
    background: transparent;
    cursor: pointer;
}
.muni-blotter-list__row:hover,
.muni-blotter-list__row--active {
    background: var(--muni-blotter-primary-soft);
}
.muni-blotter-list__row--attention {
    background: color-mix(in srgb, var(--muni-blotter-stamp-soft) 72%, transparent);
}
.muni-blotter-list__row--muted { opacity: 0.82; }
.muni-blotter-list__id {
    display: block;
    margin-bottom: 5px;
    font-family: var(--muni-mono);
    font-size: 12px;
}
.muni-blotter-list__summary {
    min-width: 0;
    display: grid;
    gap: 6px;
}
.muni-blotter-list__summary > strong {
    font-family: var(--muni-serif);
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1.4;
}
.muni-blotter-list__summary > span {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}
.muni-blotter-list__summary em {
    padding: 1px 6px;
    border: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-style: normal;
}
.muni-blotter-list__summary b {
    color: var(--muni-blotter-stamp);
    font-family: var(--muni-mono);
    font-size: 9px;
}
.muni-blotter-list__dates {
    display: grid;
    gap: 2px;
    color: var(--muni-blotter-ink-mute);
    font-size: 10px;
    letter-spacing: 0.5px;
    text-transform: none;
}
.muni-blotter-list__dates span:last-child { color: var(--muni-blotter-ink-soft); }
.muni-blotter-list__group {
    padding: 8px 18px;
    border-top: 1px solid var(--muni-blotter-rule-soft);
    border-bottom: 1px solid var(--muni-blotter-rule-soft);
    background: var(--muni-blotter-paper-soft);
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.muni-blotter-panel {
    overflow: hidden;
    margin-bottom: 14px;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
}
.muni-blotter-panel--soft { background: var(--muni-blotter-paper-soft); }
.muni-blotter-panel__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--muni-blotter-rule-soft);
    background: var(--muni-blotter-paper-soft);
}
.muni-blotter-panel__title,
.muni-blotter-panel__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--muni-blotter-ink);
    font-size: 10px;
    font-weight: 700;
}
.muni-blotter-panel__number,
.muni-blotter-panel__count {
    color: var(--muni-blotter-ink-mute);
}
.muni-blotter-panel__body { padding: 14px; }
.muni-blotter-detail {
    display: grid;
    gap: 14px;
    color: var(--muni-blotter-ink);
}
.muni-blotter-detail__chips {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.muni-blotter-detail__due {
    margin-left: auto;
    color: var(--muni-blotter-stamp);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
}
.muni-blotter-detail__meta {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--muni-blotter-rule);
    background: var(--muni-blotter-paper-soft);
}
.muni-blotter-detail__narrative {
    margin: 0;
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-serif);
    font-size: 14px;
    line-height: 1.65;
}
.muni-blotter-detail__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 12px;
}
.muni-blotter-detail__tags span,
.muni-blotter-linked__role,
.muni-blotter-evidence__kind {
    padding: 2px 7px;
    border: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9.5px;
}
.muni-blotter-action__options,
.muni-blotter-linked,
.muni-blotter-evidence,
.muni-blotter-comments {
    display: grid;
    gap: 8px;
}
.muni-blotter-action__options {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.muni-blotter-action__chip {
    padding: 5px 10px;
    border: 1px solid var(--muni-blotter-rule-soft);
    border-radius: 2px;
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.muni-blotter-action__chip--selected {
    border-color: var(--muni-blotter-primary);
    background: var(--muni-blotter-primary);
    color: var(--muni-blotter-paper);
}
.muni-blotter-action__note,
.muni-blotter-estate__note {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px dashed var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 10px;
    line-height: 1.6;
}
.muni-blotter-linked__row,
.muni-blotter-evidence__row,
.muni-blotter-discord {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--muni-blotter-rule-soft);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
}
.muni-blotter-linked__avatar,
.muni-blotter-comments__avatar,
.muni-blotter-discord__icon,
.muni-blotter-form__citizen > span {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--muni-blotter-primary);
    color: var(--muni-blotter-paper);
    font-family: var(--muni-serif);
    font-size: 12px;
    font-weight: 700;
}
.muni-blotter-linked__identity,
.muni-blotter-evidence__body,
.muni-blotter-discord__body {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}
.muni-blotter-linked__name,
.muni-blotter-evidence__label,
.muni-blotter-discord__title {
    color: var(--muni-blotter-ink);
    font-family: var(--muni-serif);
    font-size: 13.5px;
    font-weight: 600;
}
.muni-blotter-linked__roll,
.muni-blotter-evidence__url,
.muni-blotter-discord__sync {
    overflow: hidden;
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9px;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.muni-blotter-discord__error {
    color: var(--muni-blotter-stamp);
    font-family: var(--muni-mono);
    font-size: 9px;
    line-height: 1.5;
}
.muni-blotter-linked__role--primary {
    border-color: var(--muni-blotter-stamp);
    color: var(--muni-blotter-stamp);
}
.muni-blotter-linked__add,
.muni-blotter-evidence__drop {
    display: flex;
    gap: 8px;
    padding: 8px 10px;
    border: 1px dashed var(--muni-blotter-rule);
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-sans);
    font-size: 12.5px;
}
.muni-blotter-linked__search {
    flex: 1;
}
.muni-blotter-linked__select {
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 10px;
}
.muni-blotter-evidence__open,
.muni-blotter-estate__links {
    color: var(--muni-blotter-primary);
    font-family: var(--muni-mono);
    font-size: 10px;
    text-decoration: underline;
}
.muni-blotter-estate__flags,
.muni-blotter-estate__meta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
.muni-blotter-estate__flag {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-sans);
    font-size: 12.5px;
}
.muni-blotter-estate__flag span {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--muni-blotter-rule);
    color: var(--muni-blotter-paper);
    font-family: var(--muni-mono);
    font-size: 10px;
}
.muni-blotter-estate__flag--on {
    color: var(--muni-blotter-ink);
    font-weight: 700;
}
.muni-blotter-estate__flag--on span {
    border-color: var(--muni-blotter-stamp);
    background: var(--muni-blotter-stamp);
}
.muni-blotter-estate__meta {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid var(--muni-blotter-rule-soft);
    background: var(--muni-blotter-paper-soft);
}
.muni-blotter-discord__icon {
    border-radius: 2px;
    font-family: var(--muni-mono);
}
.muni-blotter-discord__status {
    padding: 4px 8px;
    border: 1px solid var(--muni-blotter-primary);
    color: var(--muni-blotter-primary);
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
}
.muni-blotter-audit__row {
    display: grid;
    grid-template-columns: 128px 1fr 92px;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px dashed var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-sans);
    font-size: 12px;
}
.muni-blotter-audit__row span:first-child,
.muni-blotter-audit__row span:last-child {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9.5px;
}
.muni-blotter-audit__row span:last-child { text-align: right; }
.muni-blotter-comments__item {
    display: flex;
    gap: 10px;
}
.muni-blotter-comments__item header {
    display: flex;
    align-items: baseline;
    gap: 8px;
}
.muni-blotter-comments__item header strong {
    font-family: var(--muni-sans);
    font-size: 12px;
}
.muni-blotter-comments__item header span,
.muni-blotter-comments__item header time {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 8.5px;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.muni-blotter-comments__item p {
    margin: 3px 0 0;
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-serif);
    font-size: 13px;
    line-height: 1.55;
}
.muni-blotter-comments__add {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: 1px solid var(--muni-blotter-rule);
    background: var(--muni-blotter-paper);
}
.muni-blotter-comments__add span {
    flex: 1;
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-sans);
    font-size: 12.5px;
}

.muni-form-field {
    min-width: 0;
}
.muni-form-field--span-all { grid-column: 1 / -1; }
.muni-form-field__head {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 5px;
    color: var(--muni-blotter-ink-mute);
    font-size: 9px;
    font-weight: 700;
}
.muni-form-field__required {
    color: var(--muni-blotter-stamp);
}
.muni-form-field__hint {
    margin-left: auto;
    font-weight: 500;
}
.muni-blotter-input,
.muni-blotter-select {
    width: 100%;
    min-height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 11px;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
    color: var(--muni-blotter-ink);
    font-family: var(--muni-sans);
    font-size: 13px;
    line-height: 1.5;
}
.muni-blotter-input--area {
    align-items: flex-start;
    white-space: pre-wrap;
}
.muni-blotter-input--mono,
.muni-blotter-select span:last-child {
    font-family: var(--muni-mono);
}
.muni-blotter-input--placeholder { color: var(--muni-blotter-ink-mute); }
.muni-segmented {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
}
.muni-segmented__item {
    flex: 1;
    padding: 7px 4px;
    border-right: 1px solid var(--muni-blotter-rule-soft);
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-align: center;
    text-transform: uppercase;
}
.muni-segmented__item:last-child { border-right: 0; }
.muni-segmented__item--active {
    background: var(--muni-blotter-primary);
    color: var(--muni-blotter-paper);
}
.muni-blotter-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.muni-blotter-toggle__label {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}
.muni-blotter-toggle__track {
    position: relative;
    width: 34px;
    height: 18px;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 10px;
    background: var(--muni-blotter-paper-edge);
}
.muni-blotter-toggle__track span {
    position: absolute;
    top: 1px;
    left: 1px;
    width: 14px;
    height: 14px;
    border-radius: 999px;
    background: var(--muni-blotter-paper);
}
.muni-blotter-toggle--on .muni-blotter-toggle__label { color: var(--muni-blotter-primary); }
.muni-blotter-toggle--on .muni-blotter-toggle__track {
    border-color: var(--muni-blotter-primary);
    background: var(--muni-blotter-primary);
}
.muni-blotter-toggle--on .muni-blotter-toggle__track span { left: 17px; }
.muni-blotter-form {
    display: grid;
    gap: 16px;
}
.muni-blotter-form__mode {
    display: flex;
    overflow: hidden;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
}
.muni-blotter-form__mode-item {
    flex: 1;
    padding: 9px 12px;
    border-right: 1px solid var(--muni-blotter-rule);
    color: var(--muni-blotter-ink-soft);
}
.muni-blotter-form__mode-item:last-child { border-right: 0; }
.muni-blotter-form__mode-item--active {
    background: var(--muni-blotter-primary);
    color: var(--muni-blotter-paper);
}
.muni-blotter-form__mode-item strong {
    display: block;
    font-family: var(--muni-mono);
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}
.muni-blotter-form__mode-item em {
    display: block;
    margin-top: 2px;
    font-family: var(--muni-sans);
    font-size: 10.5px;
    font-style: normal;
}
.muni-blotter-form__grid,
.muni-blotter-form__optional {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.muni-blotter-form__optional {
    padding-top: 16px;
    border-top: 1px solid var(--muni-blotter-rule);
}
.muni-blotter-form__optional-label {
    grid-column: 1 / -1;
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}
.muni-blotter-form__citizen {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 11px;
    border: 1px solid var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper-soft);
}
.muni-blotter-form__citizen div {
    flex: 1;
    min-width: 0;
    display: grid;
    gap: 2px;
}
.muni-blotter-form__citizen strong {
    font-family: var(--muni-serif);
    font-size: 13.5px;
}
.muni-blotter-form__citizen em,
.muni-blotter-form__citizen b {
    color: var(--muni-blotter-ink-mute);
    font-family: var(--muni-mono);
    font-size: 9px;
    font-style: normal;
}
.muni-blotter-form__citizen b {
    color: var(--muni-blotter-primary);
    text-transform: uppercase;
}
.muni-blotter-empty,
.muni-blotter-locked,
.muni-blotter-error__panel {
    position: relative;
    overflow: hidden;
    padding: 52px 40px;
    border: 1px dashed var(--muni-blotter-rule);
    border-radius: 2px;
    background: var(--muni-blotter-paper);
    color: var(--muni-blotter-ink);
    text-align: center;
}
.muni-blotter-empty__glyph,
.muni-blotter-locked__glyph,
.muni-blotter-error__glyph {
    width: 58px;
    height: 58px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 18px;
    border: 1.5px solid var(--muni-blotter-stamp);
    border-radius: 999px;
    color: var(--muni-blotter-stamp);
    font-family: var(--muni-mono);
    font-size: 12px;
    font-weight: 700;
}
.muni-blotter-empty h3,
.muni-blotter-locked h3,
.muni-blotter-error h3 {
    margin: 0;
    color: var(--muni-blotter-ink);
    font-family: var(--muni-serif);
    font-size: 22px;
    font-weight: 600;
}
.muni-blotter-empty p,
.muni-blotter-locked p,
.muni-blotter-error p {
    max-width: 460px;
    margin: 8px auto 0;
    color: var(--muni-blotter-ink-soft);
    font-family: var(--muni-sans);
    font-size: 13.5px;
    line-height: 1.6;
}
.muni-blotter-empty__actions,
.muni-blotter-error__actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.muni-blotter-empty__foot,
.muni-blotter-locked__foot,
.muni-blotter-error__tag,
.muni-blotter-loading__foot {
    margin-top: 20px;
    color: var(--muni-blotter-ink-mute);
    font-size: 9.5px;
}
.muni-blotter-locked::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: repeating-linear-gradient(45deg, var(--muni-blotter-stamp) 0, var(--muni-blotter-stamp) 2px, transparent 2px, transparent 12px);
}
.muni-blotter-locked > * {
    position: relative;
}
.muni-blotter-locked__roles {
    width: max-content;
    max-width: 100%;
    display: inline-flex;
    gap: 20px;
    margin-top: 20px;
    padding: 10px 18px;
    border: 1px solid var(--muni-blotter-rule-soft);
    background: var(--muni-blotter-paper-soft);
}
.muni-blotter-loading {
    display: grid;
    gap: 18px;
}
.muni-blotter-loading__summary {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    gap: 16px;
}
.muni-blotter-loading__summary span,
.muni-blotter-loading__list span {
    min-height: 76px;
    border: 1px solid var(--muni-blotter-rule-soft);
    background: linear-gradient(90deg, var(--muni-blotter-paper) 0, var(--muni-blotter-paper-edge) 50%, var(--muni-blotter-paper) 100%);
}
.muni-blotter-loading__list {
    display: grid;
    gap: 1px;
    border: 1px solid var(--muni-blotter-rule);
    background: var(--muni-blotter-rule-soft);
}
.muni-blotter-error {
    display: grid;
    gap: 18px;
}
.muni-blotter-error__panel {
    border-style: solid;
    border-color: var(--muni-blotter-stamp);
}

@media (max-width: 960px) {
    .muni-blotter-tab__summary,
    .muni-blotter-loading__summary {
        grid-template-columns: 1fr;
    }

    .muni-blotter-list__head,
    .muni-blotter-list__columns,
    .muni-blotter-list__row {
        grid-template-columns: 90px 1fr;
    }

    .muni-blotter-list__columns span:nth-child(n+3),
    .muni-blotter-list__row > span:nth-child(n+3) {
        grid-column: 1 / -1;
    }

    .muni-blotter-detail__meta,
    .muni-blotter-form__grid,
    .muni-blotter-form__optional,
    .muni-blotter-estate__meta,
    .muni-blotter-estate__flags {
        grid-template-columns: 1fr;
    }}

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

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

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

/* MuniConfigEditor dialog footer running status (opt-in, ShowFooterStatus).
   Mono caps "check Ready" / "triangle N to fix", token-only. Phase 63.5. */
.muni-config-editor__footer-status {
    display: inline-flex;
    align-items: center;
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.muni-config-editor__footer-status--ready {
    color: var(--mud-palette-primary);
}

.muni-config-editor__footer-status--invalid {
    color: var(--mud-palette-error);
}

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

/* Public §E academic block: standing + semester + kind-count badge shelf,
   sourced entirely from AcademicProfilePublicDto. No GPA ever renders here. */
.muni-public-academic {
    display: grid;
    gap: var(--muni-space-3);
}

.muni-public-academic__line {
    display: flex;
    align-items: center;
    gap: var(--muni-space-3);
    flex-wrap: wrap;
}

.muni-public-academic__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--muni-space-2);
    border: 1px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    border-radius: 2px;
    padding: 5px 11px;
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
}

.muni-public-academic__chip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

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

.muni-public-academic__semester {
    font-family: var(--muni-mono);
    font-size: 0.66rem;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.muni-public-academic__shelf {
    display: flex;
    gap: var(--muni-space-2);
    flex-wrap: wrap;
    padding-top: var(--muni-space-3);
    border-top: 1px dashed var(--mud-palette-divider);
}

.muni-public-academic__badge {
    display: inline-flex;
    align-items: center;
    gap: var(--muni-space-2);
    border: 1px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    border-radius: 2px;
    padding: 6px 12px;
}

.muni-public-academic__badge-star {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1.5px solid var(--mud-palette-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-serif);
    font-size: 0.68rem;
    color: var(--mud-palette-primary);
}

.muni-public-academic__badge-label {
    font-family: var(--muni-serif);
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary);
}

.muni-public-academic__badge-count {
    font-family: var(--muni-mono);
    font-size: 0.625rem;
    font-weight: 700;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    border-radius: 2px;
    padding: 1px 6px;
}

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

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

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

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

/* 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;
    }}: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;
    /* 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;
    /* 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-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: color-mix(in srgb, var(--mud-palette-text-primary) 88%, var(--mud-palette-background) 12%);
    color: var(--mud-palette-background);
    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-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__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;
}:root {
    /* Ink tones — text-primary at three opacity levels for legend / body / mute */
    --muni-ink: var(--mud-palette-text-primary);
    /* Paper tones — page background + existing paper-soft inset */
    --muni-paper: 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);
}

/* ───────── MuniDrawer · right-docked, full-height editing surface.
   dialog = one question; drawer = a list of editors. Token-only skin. */
.muni-drawer__scrim {
    position: fixed;
    inset: 0;
    z-index: 1300;
    display: flex;
    justify-content: flex-end;
    background: color-mix(in srgb, var(--muni-ink) 16%, transparent);
}
.muni-drawer {
    --muni-drawer-top-offset: 4rem;
    position: relative;
    height: calc(100% - var(--muni-drawer-top-offset));
    margin-top: var(--muni-drawer-top-offset);
    max-width: 94vw;
    background: var(--muni-paper);
    border-left: 1px solid var(--muni-ink);
    box-shadow: -30px 0 80px -30px color-mix(in srgb, var(--muni-ink) 55%, transparent);
    display: flex;
    flex-direction: column;
}
.muni-drawer__resize {
    position: absolute;
    left: -3px;
    top: 0;
    bottom: 0;
    width: 8px;
    cursor: col-resize;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    touch-action: none;
    user-select: none;
}
/* While dragging the resize handle, suppress text selection across the whole drawer so the drag
   never paints a selection (pointer capture keeps the drag alive off the grip; this keeps it clean). */
.muni-drawer--dragging, .muni-drawer--dragging * {
    user-select: none;
    cursor: col-resize;
}
.muni-drawer__resize-grip {
    width: 2px;
    height: 34px;
    border-radius: 2px;
    background: var(--muni-hair);
}
.muni-drawer__header {
    flex-shrink: 0;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--muni-ink);
}
.muni-drawer__heading { min-width: 0; }
.muni-drawer__eyebrow {
    font-family: var(--muni-mono);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-drawer__title {
    font-family: var(--muni-serif, "Libre Caslon Text", Georgia, serif);
    font-size: 21px;
    font-weight: 600;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    color: var(--muni-ink);
}
.muni-drawer__header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.muni-drawer__close {
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    color: var(--muni-ink-soft);
    font-family: var(--muni-mono);
    font-size: 12px;
    padding: 5px 9px;
}
.muni-drawer__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.muni-drawer__footer {
    flex-shrink: 0;
    border-top: 1px solid var(--muni-ink);
    background: var(--muni-paper-soft);
}
.muni-drawer__confirm {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    gap: 12px;
}
.muni-drawer__confirm-text {
    font-family: var(--muni-serif, "Libre Caslon Text", Georgia, serif);
    font-style: italic;
    font-size: 13px;
    color: var(--muni-stamp);
}
.muni-drawer__confirm-actions { display: flex; gap: 8px; }

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

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

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

/* --- MuniCrumb + legacy region breadcrumb hooks (§C·1). --------------- */
.muni-crumb {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--muni-space-3);
    font-family: var(--muni-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    flex-wrap: wrap;
}
.muni-crumb--inline {
    margin: 0 0 var(--muni-space-4);
}
.muni-crumb--rule {
    padding-bottom: 10px;
    margin-bottom: 18px;
    border-bottom: 1px dashed var(--muni-hair);
}
.muni-crumb--bar {
    align-items: center;
    padding: 9px 26px;
    background: var(--muni-paper-soft);
    border-bottom: 1px solid var(--muni-hair);
}
.muni-crumb__trail {
    display: flex;
    align-items: baseline;
    gap: var(--muni-space-2);
    flex-wrap: wrap;
    min-width: 0;
}
.muni-crumb__link,
.muni-crumb__current--link {
    color: var(--muni-ink-mute);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
}
.muni-crumb__link:hover,
.muni-crumb__current--link:hover {
    color: var(--muni-ink);
}
.muni-crumb__current {
    color: var(--muni-ink);
    font-weight: 700;
}
.muni-crumb__sep {
    opacity: 0.5;
}
.muni-crumb__meta {
    color: var(--muni-ink-mute);
    white-space: nowrap;
}
.muni-crumb.muni-rep-crumbs {
    padding: 4px 0 12px;
    margin: 0;
}

/* Legacy class retained for pages not yet moved to MuniCrumb. */
.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;
}

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

/* ═════════════════════════════════════════════════════════════════
   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;
}:root {
    /* hairline rule (solid) + dashed divider + active-toggle fill — design
       names rule / ruleSoft / paperEdge mapped onto the civic palette. */
    --muni-ap-rule: var(--muni-hair);
}

/* ───────── Specimen tile — the shared kind marker (card · row · identity) */
.muni-specimen-tile {
    flex-shrink: 0;
    align-self: stretch;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 12px 12px 11px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    overflow: hidden;
}
.muni-specimen-tile__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-family: var(--muni-mono);
    font-size: 8px;
    letter-spacing: 1.5px;
    opacity: 0.82;
}
.muni-specimen-tile__glyph {
    font-family: var(--muni-serif);
    font-size: 30px;
    line-height: 1;
    opacity: 0.92;
    text-align: center;
    padding: 6px 0;
}
.muni-specimen-tile__cat {
    font-family: var(--muni-serif);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.15;
}
.muni-specimen-tile__id {
    font-family: var(--muni-mono);
    font-size: 8px;
    letter-spacing: 1px;
    opacity: 0.78;
    margin-top: 3px;
}

/* ───────── Density toggle (Cards / Ledger) + pending/rejected tabs */
.muni-approvals__toggle {
    display: inline-flex;
    border: 1px solid var(--muni-ap-rule);
}
.muni-approvals__toggle--ink { border-color: var(--muni-ink); }
.muni-approvals__toggle-btn {
    appearance: none;
    border: none;
    background: transparent;
    color: var(--muni-ink-mute);
    height: 42px;
    padding: 0 14px;
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.muni-approvals__toggle-btn--active {
    background: var(--muni-ap-paper-edge);
    color: var(--muni-ink);
}
.muni-approvals__toggle--ink .muni-approvals__toggle-btn { letter-spacing: 1.5px; }
.muni-approvals__toggle--ink .muni-approvals__toggle-btn--active {
    background: var(--muni-ink);
    color: var(--muni-paper);
}

/* ───────── Cards density — grid of unified ApprovalCards */
.muni-approvals__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(420px, 1fr));
    gap: 16px;
}
@media (max-width: 520px) {
    .muni-approvals__grid { grid-template-columns: 1fr; }}

.muni-approval-card {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    min-height: 158px;
    cursor: pointer;
    text-align: left;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    transition: box-shadow 120ms var(--muni-ease), transform 120ms var(--muni-ease);
}
.muni-approval-card:hover {
    box-shadow: 0 4px 0 var(--muni-ap-rule);
    transform: translateY(-1px);
}
.muni-approval-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
.muni-approval-card .muni-specimen-tile { width: 132px; }
.muni-approval-card__body {
    flex: 1;
    min-width: 0;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
}
.muni-approval-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.muni-approval-card__tag {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    font-weight: 700;
}
.muni-approval-card__subject {
    font-family: var(--muni-serif);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.12;
    margin: 6px 0 0;
    text-wrap: balance;
}
.muni-approval-card__subsub {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    margin-top: 3px;
    letter-spacing: 0.3px;
}
.muni-approval-card__facts {
    display: flex;
    gap: 18px;
    margin: 11px 0 0;
    flex-wrap: wrap;
}
.muni-approval-fact__k {
    font-size: 8.5px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    font-weight: 700;
}
.muni-approval-fact__v {
    font-size: 12px;
    color: var(--muni-ink);
    margin-top: 2px;
}
.muni-approval-fact__v--mono { font-family: var(--muni-mono); }
.muni-approval-card__spacer { flex: 1; }
.muni-approval-card__divider {
    border-top: 1px dashed var(--muni-ap-rule-soft);
    margin: 11px 0 9px;
}
.muni-approval-card__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.muni-approval-card__req {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    color: var(--muni-ink-mute);
    letter-spacing: 0.2px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.muni-approval-card__actions {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}
.muni-approval-card__processed {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    letter-spacing: 0.4px;
    color: var(--muni-ink-mute);
}

/* mini action buttons (Approve / Deny) shared by card + ledger row */
.muni-mini-btn {
    border-radius: 2px;
    padding: 6px 11px;
    font-family: var(--muni-sans);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    border: 1px solid transparent;
    white-space: nowrap;
}
.muni-mini-btn:disabled { opacity: 0.5; cursor: default; }
.muni-mini-btn--primary {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
}
.muni-mini-btn--danger {
    background: transparent;
    color: var(--muni-stamp);
    border-color: var(--muni-stamp);
}
.muni-approval__examine {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink);
    font-weight: 700;
    padding: 6px 2px;
}

/* ───────── Ledger density — dense table */
.muni-approval-ledger {
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
}
.muni-approval-ledger table {
    width: 100%;
    border-collapse: collapse;
}
.muni-approval-ledger thead tr { background: var(--muni-paper-soft); }
.muni-approval-ledger th {
    text-align: left;
    padding: 10px 14px;
    font-size: 9px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--muni-ink-mute);
    border-bottom: 1px solid var(--muni-ap-rule);
    font-family: var(--muni-sans);
}
.muni-approval-ledger th:last-child { text-align: right; }
.muni-approval-row { cursor: pointer; }
.muni-approval-row:hover { background: var(--muni-paper-soft); }
.muni-approval-row td {
    padding: 11px 14px;
    border-bottom: 1px dashed var(--muni-ap-rule-soft);
    vertical-align: middle;
}
.muni-approval-row:last-child td { border-bottom: none; }
.muni-approval-row__kind { display: flex; align-items: center; gap: 10px; }
.muni-approval-row__chip {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-serif);
    font-size: 15px;
    border-radius: 2px;
}
.muni-approval-row__tag {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    font-weight: 700;
}
.muni-approval-row__subject {
    font-family: var(--muni-serif);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
}
.muni-approval-row__subsub {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    color: var(--muni-ink-mute);
    margin-top: 1px;
}
.muni-approval-row__req { font-size: 12px; }
.muni-approval-row__rcv {
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--muni-ink-mute);
    white-space: nowrap;
}
.muni-approval-row__actions {
    text-align: right;
    white-space: nowrap;
}
.muni-approval-row__actions > div {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

/* small status / reward pill */
.muni-approval__pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 2px;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    border: 1px solid;
}
.muni-approval__pill--warn {
    color: var(--muni-brass);
    border-color: var(--muni-brass);
    background: var(--muni-brass-soft);
}
.muni-approval__pill--danger {
    color: var(--muni-stamp);
    border-color: var(--muni-stamp);
    background: var(--muni-stamp-soft);
}
.muni-approval__pill--ok {
    color: var(--muni-green);
    border-color: var(--muni-green);
    background: var(--muni-green-soft);
}

/* footer colophon under the queue body */
.muni-approvals__colophon {
    margin-top: 36px;
    padding-top: 14px;
    border-top: 1px solid var(--muni-ap-rule);
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

/* ═══════════ Drill-down (/operations/approvals/{id}) ═══════════ */
.muni-approval-detail { max-width: 1080px; }

.muni-approval-detail__breadcrumb {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--muni-ap-rule-soft);
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    letter-spacing: 1.2px;
    text-transform: uppercase;
}
.muni-approval-detail__back {
    background: none;
    border: none;
    color: var(--muni-ink-mute);
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    cursor: pointer;
    padding: 0;
}
.muni-approval-detail__back:hover { color: var(--muni-ink); text-decoration: underline; }

.muni-approval-detail__head {
    padding: 24px 0 18px;
    border-bottom: 1px solid var(--muni-ap-rule);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    flex-wrap: wrap;
}
.muni-approval-detail__eyebrow {
    font-size: 10px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-bottom: 6px;
    font-weight: 700;
}
.muni-approval-detail__title {
    font-family: var(--muni-serif);
    font-size: 32px;
    font-weight: 600;
    letter-spacing: -0.7px;
    line-height: 1.04;
    margin: 0;
    text-wrap: balance;
}
.muni-approval-detail__sub {
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--muni-ink-mute);
    margin-top: 6px;
}
.muni-approval-detail__head-actions { display: flex; gap: 8px; flex-shrink: 0; flex-wrap: wrap; }

/* identity header card */
.muni-approval-identity {
    display: flex;
    align-items: stretch;
    border: 1px solid var(--muni-ink);
    margin-top: 18px;
}
.muni-approval-identity .muni-specimen-tile { width: 180px; }
.muni-approval-identity__body {
    flex: 1;
    padding: 16px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.muni-approval-identity__summary { display: flex; gap: 36px; flex-wrap: wrap; }
.muni-approval-identity__k {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--muni-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}
.muni-approval-identity__v {
    font-family: var(--muni-serif);
    font-size: 15px;
    margin-top: 3px;
}
.muni-approval-identity__v--lead { font-size: 18px; font-weight: 600; }

/* section rule (§A-§E) */
.muni-approval-sec {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin: 34px 0 16px;
    border-bottom: 1px solid var(--muni-ink);
    padding-bottom: 8px;
}
.muni-approval-sec__letter {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    font-weight: 700;
    letter-spacing: 1px;
}
.muni-approval-sec__label {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
}
.muni-approval-sec__right {
    margin-left: auto;
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}
.muni-approval-sec__helper {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--muni-ink-mute);
    margin: -4px 0 16px;
}

/* §B particulars */
.muni-approval-particulars {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 36px;
}
@media (max-width: 680px) { .muni-approval-particulars { grid-template-columns: 1fr; }}
.muni-approval-particular {
    display: flex;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px dashed var(--muni-ap-rule-soft);
}
.muni-approval-particular__no {
    font-family: var(--muni-mono);
    font-size: 9px;
    color: var(--muni-ink-mute);
    font-weight: 700;
    padding-top: 3px;
}
.muni-approval-particular__label {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    font-weight: 700;
}
.muni-approval-particular__value { font-family: var(--muni-serif); font-size: 15px; margin-top: 2px; }
.muni-approval-particular__value--mono { font-family: var(--muni-mono); font-size: 13px; }
.muni-approval-particular__link { color: var(--muni-ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; transition: color .12s ease; }
.muni-approval-particular__link:hover { color: var(--mud-palette-primary); }

/* §C audit */
.muni-approval-audit {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
@media (max-width: 680px) { .muni-approval-audit { grid-template-columns: 1fr 1fr; }}
.muni-approval-audit__cell { border-top: 2px solid var(--muni-ink); padding-top: 8px; }
.muni-approval-audit__k {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--muni-ink-mute);
    font-weight: 700;
    text-transform: uppercase;
}
.muni-approval-audit__v { font-family: var(--muni-mono); font-size: 12px; margin-top: 4px; }

/* §D payload expander */
.muni-approval-payload__toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--muni-paper-soft);
    border: 1px solid var(--muni-ap-rule);
    padding: 12px 16px;
    cursor: pointer;
    font-family: var(--muni-serif);
    font-size: 14px;
    color: var(--muni-ink);
}
.muni-approval-payload__caret { font-family: var(--muni-mono); font-size: 14px; }
.muni-approval-payload__code {
    margin: 12px 0 0;
    background: var(--muni-ink);
    color: var(--muni-paper);
    padding: 18px;
    overflow: auto;
    font-family: var(--muni-mono);
    font-size: 12px;
    line-height: 1.6;
    border-radius: 2px;
    white-space: pre;
}
.muni-approval-payload__table { margin-top: 12px; border: 1px solid var(--muni-ap-rule); }
.muni-approval-payload__row {
    display: grid;
    grid-template-columns: 280px 1fr;
    border-bottom: 1px solid var(--muni-ap-rule-soft);
}
.muni-approval-payload__row:last-child { border-bottom: none; }
.muni-approval-payload__key {
    font-family: var(--muni-mono);
    font-size: 11px;
    padding: 8px 14px;
    color: var(--mud-palette-primary);
    border-right: 1px solid var(--muni-ap-rule-soft);
    background: var(--muni-paper-soft);
    word-break: break-all;
}
.muni-approval-payload__val {
    font-family: var(--muni-mono);
    font-size: 11px;
    padding: 8px 14px;
    color: var(--muni-ink);
    word-break: break-word;
}

/* §E admin box */
.muni-approval-admin {
    border: 1px solid var(--muni-stamp);
    background: var(--muni-stamp-soft);
    padding: 18px;
}
.muni-approval-admin__note {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 13px;
    color: var(--muni-ink-soft);
    margin-bottom: 12px;
}
.muni-approval-admin__actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* download row (§A for id / vehicle) */
.muni-approval-download {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
}
.muni-approval-download__btn {
    background: transparent;
    border: 1px solid var(--muni-ap-rule);
    border-radius: 2px;
    padding: 8px 14px;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink);
    font-weight: 700;
    cursor: pointer;
}

/* ───────── §A specimens (stream calendar + quest schematic) ───────── */
.muni-specimen-frame {
    border: 2px solid var(--muni-ink);
    background: var(--muni-paper);
    max-width: 720px;
}
.muni-specimen-frame__bar {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 14px 18px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}
.muni-specimen-frame__bar-label {
    font-family: var(--muni-mono);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 10px;
}
.muni-specimen-frame__dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--muni-brass); display: inline-block;
}
.muni-specimen-stream__body { display: flex; gap: 18px; padding: 18px; flex-wrap: wrap; }
.muni-specimen-stream__col { flex: 1; display: flex; flex-direction: column; gap: 14px; min-width: 200px; }
.muni-specimen-stream__window { border-left: 3px solid var(--muni-brass); padding-left: 12px; }
.muni-specimen-stream__window-k,
.muni-specimen-stream__field-k {
    font-family: var(--muni-mono);
    font-size: 9px;
    letter-spacing: 1.5px;
    color: var(--muni-ink-mute);
    font-weight: 700;
}
.muni-specimen-stream__window-v {
    font-family: var(--muni-serif);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.3px;
    margin-top: 2px;
}
.muni-specimen-stream__window-sub { font-family: var(--muni-mono); font-size: 10px; color: var(--muni-ink-mute); margin-top: 3px; }
.muni-specimen-stream__field-v { font-family: var(--muni-serif); font-size: 15px; margin-top: 2px; word-break: break-word; }
.muni-specimen-stream__field-v--mono { font-family: var(--muni-mono); font-size: 11px; }

/* compact month calendar */
.muni-cal-mini { width: 232px; flex-shrink: 0; border: 1px solid var(--muni-ink); background: var(--muni-paper); }
.muni-cal-mini__head {
    padding: 8px 12px;
    border-bottom: 1px solid var(--muni-ap-rule);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.muni-cal-mini__month { font-family: var(--muni-serif); font-size: 14px; font-weight: 600; }
.muni-cal-mini__year { font-family: var(--muni-mono); font-size: 10px; color: var(--muni-ink-mute); letter-spacing: 1px; }
.muni-cal-mini__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; padding: 10px; }
.muni-cal-mini__wd { text-align: center; font-family: var(--muni-mono); font-size: 8.5px; color: var(--muni-ink-mute); font-weight: 700; padding-bottom: 4px; }
.muni-cal-mini__day {
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--muni-ink);
    border: 1px solid transparent;
    border-radius: 2px;
}
.muni-cal-mini__day--on {
    color: var(--mud-palette-primary-text);
    background: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    font-weight: 700;
}

/* quest trigger / task schematic */
.muni-specimen-quest { max-width: 720px; }
.muni-specimen-quest__map { display: flex; align-items: stretch; border: 2px solid var(--muni-ink); background: var(--muni-paper); flex-wrap: wrap; }
.muni-specimen-quest__sigil {
    width: 140px;
    flex-shrink: 0;
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
}
.muni-specimen-quest__sigil-tag { font-family: var(--muni-mono); font-size: 9px; letter-spacing: 2px; opacity: 0.85; }
.muni-specimen-quest__sigil-mark { font-family: var(--muni-mono); font-size: 30px; font-weight: 700; letter-spacing: 2px; }
.muni-specimen-quest__sigil-label { font-family: var(--muni-serif); font-size: 13px; font-weight: 600; line-height: 1.15; }
.muni-specimen-quest__flow { flex: 1; padding: 18px; display: flex; align-items: center; gap: 14px; min-width: 260px; }
.muni-specimen-quest__source { flex-shrink: 0; text-align: center; }
.muni-specimen-quest__source-k { font-family: var(--muni-mono); font-size: 9px; color: var(--muni-ink-mute); letter-spacing: 1px; margin-bottom: 4px; }
.muni-specimen-quest__source-node {
    width: 46px; height: 46px; margin: 0 auto;
    border: 1.5px solid var(--muni-ink);
    border-radius: 2px;
    display: flex; align-items: center; justify-content: center;
    font-family: var(--muni-serif); font-size: 20px;
}
.muni-specimen-quest__source-sub { font-family: var(--muni-mono); font-size: 8.5px; color: var(--muni-ink-mute); margin-top: 4px; }
.muni-specimen-quest__conn {
    flex: 1; height: 0;
    border-top: 2px dotted var(--mud-palette-primary);
    position: relative;
    min-width: 40px;
}
.muni-specimen-quest__conn::after { content: "▸"; position: absolute; right: -2px; top: -9px; color: var(--mud-palette-primary); }
.muni-specimen-quest__conn-label {
    position: absolute; left: 50%; top: -22px; transform: translateX(-50%);
    font-family: var(--muni-mono); font-size: 8.5px; letter-spacing: 1px; text-transform: uppercase; color: var(--muni-ink-mute);
}
.muni-specimen-quest__node { flex: 1; border: 1px solid var(--muni-ink); background: var(--muni-paper-soft); padding: 12px; min-width: 160px; }
.muni-specimen-quest__node-k { font-family: var(--muni-mono); font-size: 9px; letter-spacing: 1.5px; color: var(--muni-ink-mute); font-weight: 700; }
.muni-specimen-quest__node-title { font-family: var(--muni-serif); font-size: 15px; font-weight: 600; line-height: 1.15; margin-top: 3px; }
.muni-specimen-quest__node-sub { font-family: var(--muni-mono); font-size: 9.5px; color: var(--muni-ink-mute); margin-top: 6px; }
.muni-specimen-quest__voice { margin-top: 10px; font-family: var(--muni-serif); font-style: italic; font-size: 13px; color: var(--muni-ink-soft); }

/* generic / striped placeholder specimen */
.muni-specimen-stripe {
    border: 1px solid var(--muni-ap-rule);
    background: repeating-linear-gradient(45deg, var(--muni-paper-soft), var(--muni-paper-soft) 9px, var(--muni-paper) 9px, var(--muni-paper) 18px);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    max-width: 720px;
}

/* ═══════════ Deny modal (reason chips) — hosted in MuniDialog ═══════════ */
.muni-deny__section-label {
    font-size: 10px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    font-weight: 700;
    margin-bottom: 10px;
}
.muni-deny__section-label--spaced { margin: 18px 0 8px; }
.muni-deny__opt {
    font-family: var(--muni-mono);
    letter-spacing: 0.5px;
    text-transform: none;
    font-weight: 400;
}
.muni-deny__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.muni-deny__chip {
    padding: 7px 12px;
    cursor: pointer;
    background: transparent;
    color: var(--muni-ink);
    border: 1px solid var(--muni-ap-rule);
    border-radius: 2px;
    font-family: var(--muni-sans);
    font-size: 12px;
    font-weight: 500;
}
.muni-deny__chip--on {
    background: var(--muni-stamp);
    color: var(--muni-paper);
    border-color: var(--muni-stamp);
}
.muni-deny__textarea {
    width: 100%;
    resize: vertical;
    background: var(--muni-paper);
    color: var(--muni-ink);
    border: 1px solid var(--muni-ap-rule);
    border-radius: 2px;
    padding: 10px 12px;
    font-family: var(--muni-serif);
    font-size: 14px;
    line-height: 1.5;
    outline: none;
    min-height: 4rem;
}
.muni-deny__textarea:focus-visible { outline: 2px solid var(--muni-stamp); outline-offset: 1px; }
.muni-deny__foot {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    color: var(--muni-ink-mute);
    margin-top: 8px;
    letter-spacing: 0.3px;
}

/* ═══════════ Action toast (optimistic approve / deny + Undo) ═══════════ */
.muni-action-toast {
    position: fixed;
    bottom: 26px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1401;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--muni-ink);
    color: var(--muni-paper);
    padding: 12px 14px 12px 18px;
    border: 1px solid var(--muni-ink);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.4);
    font-family: var(--muni-sans);
    animation: muni-approval-rise 160ms var(--muni-ease);
    max-width: calc(100vw - 32px);
}
.muni-action-toast__dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.muni-action-toast__dot--ok { background: var(--muni-green); }
.muni-action-toast__dot--deny { background: var(--muni-stamp); }
.muni-action-toast__text { min-width: 0; overflow: hidden; }
.muni-action-toast__verb { font-family: var(--muni-serif); font-size: 14px; }
.muni-action-toast__subject { font-family: var(--muni-serif); font-size: 14px; font-weight: 600; }
.muni-action-toast__reason { font-family: var(--muni-mono); font-size: 10px; color: rgba(255, 255, 255, 0.6); margin-left: 8px; }
.muni-action-toast__undo {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--muni-paper);
    padding: 6px 12px;
    border-radius: 2px;
    cursor: pointer;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    flex-shrink: 0;
}
@keyframes muni-approval-rise {
    from { opacity: 0; transform: translate(-50%, 12px); }
    to { opacity: 1; transform: translate(-50%, 0); }
}


/* ============================================================
   Academic faculty surfaces (designation / roster / grades /
   student roster). Token-only: every color routes through an
   existing civic token or the Mud primary palette. No hex.
   ------------------------------------------------------------
   Tone-to-token contract:
     Active / granted   -> --mud-palette-primary on a primary-soft tint
     Graduated          -> solid --mud-palette-primary, paper text, star
     Probation / warn   -> --muni-accent on --muni-brass-soft
     Dismissed / error  -> --muni-stamp on --muni-stamp-soft
   ============================================================ */

.muni-fac-pill {
    display: inline-flex;
    align-items: center;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-soft);
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 2px 8px;
}

.muni-fac-pill--role {
    color: var(--muni-ink);
}

.muni-fac-group-read {
    display: flex;
    align-items: center;
    gap: 11px;
    flex-wrap: wrap;
}

.muni-fac-group-read__name {
    font-family: var(--muni-serif);
    font-size: 15.5px;
    font-weight: 600;
    color: var(--muni-ink);
}

.muni-fac-rolechips {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.muni-fac-rolechip {
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    border-radius: 2px;
    padding: 2px 8px;
}

.muni-fac-scope {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.muni-fac-scope--divider {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px dashed var(--muni-hair);
}

.muni-fac-scope__line {
    font-family: var(--muni-serif);
    font-size: 12.5px;
    color: var(--muni-ink-soft);
    line-height: 1.5;
}

.muni-fac-scope__meta {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.muni-fac-claim {
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--mud-palette-primary);
    border: 1px solid var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
    border-radius: 2px;
    padding: 1px 7px;
}

.muni-fac-actions-right {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
}

.muni-fac-inert {
    margin-top: 16px;
    opacity: 0.5;
    pointer-events: none;
}

.muni-fac-rolepick {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.muni-fac-rolepick__chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    color: var(--muni-ink-soft);
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 5px 11px;
    font-family: var(--muni-sans);
    font-size: 12.5px;
    font-weight: 600;
}

.muni-fac-rolepick__chip--on {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
}

.muni-fac-rolepick__chip:disabled {
    cursor: not-allowed;
    opacity: 0.55;
}

.muni-fac-rolepick__box {
    width: 13px;
    height: 13px;
    border: 1px solid var(--muni-hair);
    border-radius: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-mono);
    font-size: 9px;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.muni-fac-roster-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 12px;
}

.muni-fac-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 5px 10px;
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-soft);
}

.muni-fac-toggle--on {
    background: var(--muni-paper-soft);
}

.muni-fac-toggle__box {
    width: 11px;
    height: 11px;
    border: 1px solid var(--muni-hair);
    border-radius: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--muni-mono);
    font-size: 8px;
    line-height: 1;
    color: var(--mud-palette-primary);
}

.muni-fac-name {
    font-family: var(--muni-serif);
    font-size: 14.5px;
    font-weight: 600;
    color: var(--muni-ink);
}

.muni-fac-name--revoked {
    color: var(--muni-ink-mute);
    text-decoration: line-through;
    text-decoration-color: var(--muni-hair);
}

.muni-fac-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.muni-fac-status--active { color: var(--mud-palette-primary); }
.muni-fac-status--revoked { color: var(--muni-ink-mute); }

.muni-fac-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--mud-palette-primary);
}

.muni-fac-dot--hollow {
    background: transparent;
    border: 1.5px solid var(--muni-ink-mute);
}

.muni-fac-empty-card {
    border: 1px dashed var(--muni-hair);
    border-radius: 2px;
    padding: 22px 18px;
    text-align: center;
    font-family: var(--muni-serif);
    font-style: italic;
    color: var(--muni-ink-mute);
    background: var(--muni-paper-soft);
}

.muni-fac-addform {
    margin-top: 20px;
    border: 1px solid var(--muni-hair);
    background: var(--muni-paper-soft);
    border-radius: 2px;
}

.muni-fac-addform__head {
    padding: 10px 16px;
    border-bottom: 1px solid var(--muni-hair);
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--muni-ink);
}

.muni-fac-addform__body { padding: 16px; }

.muni-fac-addform__fields {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: flex-start;
}

.muni-fac-addform__field { flex: 0 0 220px; }
.muni-fac-addform__field--grow { flex: 1 1 280px; min-width: 240px; }
.muni-fac-addform__action { flex: 0 0 auto; padding-top: 21px; }

.muni-fac-addform__label {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-bottom: 6px;
}

.muni-fac-addform__already {
    margin-top: 7px;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--muni-accent);
}

.muni-fac-addform__hint {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px dashed var(--muni-hair);
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--muni-ink-mute);
}

.muni-fac-modtools {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    border: 1px solid var(--muni-hair);
    border-left: 3px solid var(--muni-accent);
    background: var(--muni-brass-soft);
    border-radius: 2px;
}

.muni-fac-modtools__tag {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    color: var(--muni-accent);
    border: 1px solid var(--muni-accent);
    border-radius: 2px;
    padding: 2px 6px;
}

.muni-fac-modtools__btns {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex: 1;
}

.muni-fac-modtools__note {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 11px;
    color: var(--muni-ink-mute);
}

.muni-fac-modtool {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: default;
    background: var(--muni-paper);
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 5px 10px;
    font-family: var(--muni-sans);
    font-size: 11px;
    font-weight: 600;
    color: var(--muni-ink-soft);
}

.muni-fac-grades-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: 18px;
    align-items: start;
}

@media (max-width: 820px) {
    .muni-fac-grades-grid { grid-template-columns: 1fr; }}

.muni-fac-profile {
    border: 1px solid var(--muni-ink);
    background: var(--muni-paper);
    border-radius: 2px;
}

.muni-fac-profile__head {
    padding: 14px 16px;
    border-bottom: 1px solid var(--muni-hair);
    background: var(--muni-paper-soft);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.muni-fac-profile__name {
    font-family: var(--muni-serif);
    font-size: 19px;
    font-weight: 600;
    color: var(--muni-ink);
    margin-top: 2px;
}

.muni-fac-profile__body { padding: 16px; }

.muni-fac-tiles {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

.muni-fac-tile {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--muni-hair);
    background: var(--muni-paper);
    border-radius: 2px;
    padding: 12px 14px;
}

.muni-fac-tile__label {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

.muni-fac-tile__value {
    font-family: var(--muni-mono);
    font-size: 24px;
    font-weight: 700;
    color: var(--muni-ink);
    margin-top: 4px;
    line-height: 1;
}

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

.muni-fac-tile__sub {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--muni-ink-mute);
    margin-top: 4px;
}

.muni-fac-events {
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
}

.muni-fac-event {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 12px;
    border-bottom: 1px solid var(--muni-hair);
}

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

.muni-fac-event__date {
    font-family: var(--muni-mono);
    font-size: 11px;
    color: var(--muni-ink-mute);
    flex: 0 0 92px;
}

.muni-fac-event__grade {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    flex: 0 0 74px;
}

.muni-fac-event__grade-v {
    font-family: var(--muni-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--muni-ink);
}

.muni-fac-event__grade-l {
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
}

.muni-fac-event__note {
    flex: 1;
    font-family: var(--muni-serif);
    font-size: 12.5px;
    color: var(--muni-ink-soft);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.muni-fac-event__note--empty {
    font-style: italic;
    color: var(--muni-ink-mute);
}

.muni-fac-events-foot {
    margin-top: 12px;
    font-family: var(--muni-mono);
    font-size: 10px;
    color: var(--muni-ink-mute);
    letter-spacing: 0.4px;
}

.muni-fac-gradeform {
    border: 1px solid var(--muni-hair);
    background: var(--muni-paper-soft);
    border-radius: 2px;
}

.muni-fac-gradeform__head {
    padding: 13px 16px;
    border-bottom: 1px solid var(--muni-hair);
    background: var(--muni-paper);
}

.muni-fac-gradeform__title {
    font-family: var(--muni-serif);
    font-size: 15px;
    font-weight: 600;
    color: var(--muni-ink);
}

.muni-fac-gradeform__sub {
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--muni-ink-mute);
    margin-top: 3px;
}

.muni-fac-gradeform__body { padding: 16px; }

.muni-fac-fieldlabel {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-bottom: 6px;
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.muni-fac-gradefield {
    display: flex;
    align-items: center;
    gap: 12px;
}

.muni-fac-gradeinput {
    width: 130px;
    font-family: var(--muni-mono);
    font-size: 18px;
    text-align: center;
    color: var(--muni-ink);
    background: var(--muni-paper);
    border: 1px solid var(--muni-ink);
    border-radius: 2px;
    padding: 8px 10px;
}

.muni-fac-gradeinput--err {
    color: var(--muni-stamp);
    border-color: var(--muni-stamp);
}

.muni-fac-gradefield__echo {
    font-family: var(--muni-mono);
    font-size: 13px;
    color: var(--mud-palette-primary);
}

.muni-fac-grade-hint {
    margin-top: 7px;
    min-height: 16px;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12px;
    color: var(--muni-ink-mute);
}

.muni-fac-grade-hint--err { color: var(--muni-stamp); }

.muni-fac-range-tag {
    font-family: var(--muni-mono);
    font-size: 8.5px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--muni-ink-mute);
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 1px 5px;
}

.muni-fac-noteinput {
    width: 100%;
    font-family: var(--muni-sans);
    font-size: 13px;
    line-height: 1.5;
    color: var(--muni-ink);
    background: var(--muni-paper);
    border: 1px solid var(--muni-ink);
    border-radius: 2px;
    padding: 8px 10px;
    resize: vertical;
}

.muni-fac-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    border: 1px solid;
    border-radius: 2px;
    padding: 2px 8px;
}

.muni-fac-chip--active {
    color: var(--mud-palette-primary);
    border-color: var(--mud-palette-primary);
    background: color-mix(in srgb, var(--mud-palette-primary) 8%, var(--mud-palette-background));
}

.muni-fac-chip--leave {
    color: var(--muni-accent);
    border-color: var(--muni-accent);
    background: var(--muni-brass-soft);
}

.muni-fac-chip--dismissed {
    color: var(--muni-stamp);
    border-color: var(--muni-stamp);
    background: var(--muni-stamp-soft);
}

.muni-fac-chip--graduated {
    color: var(--mud-palette-primary-text);
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
}

.muni-fac-roster-filters {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.muni-fac-filterlabel {
    font-family: var(--muni-mono);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    margin-right: 2px;
}

.muni-fac-filter {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    background: transparent;
    color: var(--muni-ink-soft);
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    padding: 5px 11px;
    font-family: var(--muni-mono);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.muni-fac-filter--on-all { color: var(--mud-palette-primary-text); background: var(--muni-ink); border-color: var(--muni-ink); }
.muni-fac-filter--on-active { color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }
.muni-fac-filter--on-leave { color: var(--mud-palette-primary-text); background: var(--muni-accent); border-color: var(--muni-accent); }
.muni-fac-filter--on-dismissed { color: var(--mud-palette-primary-text); background: var(--muni-stamp); border-color: var(--muni-stamp); }
.muni-fac-filter--on-graduated { color: var(--mud-palette-primary-text); background: var(--mud-palette-primary); border-color: var(--mud-palette-primary); }

.muni-fac-filter__clear {
    margin-left: 4px;
    cursor: pointer;
    background: transparent;
    border: none;
    color: var(--muni-ink-mute);
    font-family: var(--muni-mono);
    font-size: 10px;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    text-decoration: underline;
}

.muni-fac-roster-foot {
    margin-top: 11px;
    font-family: var(--muni-serif);
    font-style: italic;
    font-size: 12.5px;
    color: var(--muni-ink-mute);
}

/* ============================================================
   Academic console nav -- two-tier grouped tabs. A group row sits
   on a 2px rule (tier 1); the open group is raised onto the rule.
   Below it, only the open group's role-visible surfaces render as
   wrapping chips (tier 2), so the full admin set never clips or
   truncates.

   Token-only: the rule and chip outlines route through --muni-hair,
   the raised group + active chip text through --muni-paper, idle
   labels through --muni-ink-mute, chip text through --muni-ink-soft,
   and the active chip + open-group count through
   --mud-palette-primary. No hex.
   ------------------------------------------------------------ */
.muni-acad-grouptier {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid var(--muni-hair);
}

.muni-acad-grouptab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: transparent;
    border: 1px solid transparent;
    border-bottom: none;
    margin-bottom: -2px;
    padding: 9px 16px;
    font-family: var(--muni-mono);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
    transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
}

.muni-acad-grouptab:hover {
    color: var(--muni-ink);
}

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

.muni-acad-grouptab--active {
    background: var(--muni-paper-soft);
    border-color: var(--muni-hair);
    border-bottom: 2px solid var(--muni-paper-soft);
    color: var(--muni-ink);
}

.muni-acad-grouptab__count {
    font-size: 9px;
    font-weight: 700;
    color: var(--muni-ink-mute);
}

.muni-acad-grouptab--active .muni-acad-grouptab__count {
    color: var(--mud-palette-primary);
}

.muni-acad-subtier {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 10px 0 0;
    margin-bottom: 18px;
}

.muni-acad-subtab {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    border: 1px solid var(--muni-hair);
    border-radius: 2px;
    background: var(--muni-paper);
    padding: 7px 13px;
    font-family: var(--muni-sans);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.2px;
    color: var(--muni-ink-soft);
    white-space: nowrap;
    transition: background 90ms ease, color 90ms ease, border-color 90ms ease;
}

.muni-acad-subtab:hover {
    border-color: var(--muni-ink-mute);
    color: var(--muni-ink);
}

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

.muni-acad-subtab--active {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-primary);
    color: var(--muni-paper);
}

.muni-acad-subtab__glyph {
    flex: 0 0 auto;
    font-family: var(--muni-mono);
    line-height: 1;
    opacity: 0.7;
}

/* Quiet right-side indicator: the open group's surface count and the
   viewer's policy level, mono uppercase to read as a console label. */
.muni-acad-subtier__policy {
    margin-left: auto;
    align-self: center;
    font-family: var(--muni-mono);
    font-size: 8.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--muni-ink-mute);
}

/* Console panel host: each role-permitted panel stays mounted so
   child state and any in-flight fetches survive a tab switch.
   The inactive ones drop out of layout via .muni-tabpanel--hidden
   (shared helper above). */
.muni-acad-panel {
    background: transparent;
    padding-top: 4px;
}