/*
 * The operator console — /admin/*.
 *
 * One dark band across every page, a row of stat tiles under it, and white hairline panels
 * beneath that. The console reads state first and offers edits second: the mockup's firm card
 * puts the subscription's condition, the client meter and the feature ledger above the form that
 * changes any of them, because an operator on the phone is answering "why does this firm see
 * that" far more often than they are typing a new plan.
 *
 * Declared in `spec.components` and linked after components.css, so a rule here beats the same
 * selector there without !important and without raising specificity.
 */
@layer spec.components {
    /* ——————————————————————————————————————————————————————
       The console band

       PageHeader's brand tone is a light head with a rule. The console tone is the same markup
       painted dark, so admin pages inherit every later change to the head's structure — the
       toolbar row, the meta, the actions — instead of forking it.
       —————————————————————————————————————————————————————— */
    .page-header--console {
        background: var(--color-accent-900);
        border-bottom: 0;
        padding: 16px var(--gutter);
        color: var(--spec-on-dark);
    }

    .page-header--console .page-header__eyebrow {
        color: var(--color-accent-300);
        letter-spacing: var(--tracking-brand);
    }

    .page-header--console .page-header__title,
    .page-header--console .page-header__title--console {
        font-size: 27px;
        color: var(--spec-on-dark);
        letter-spacing: var(--tracking-tight);
    }

    /* Mono, because everything on this line is an identifier an operator reads aloud on the
       phone: an ΑΦΜ, a plan code, a date. */
    .page-header--console .page-header__subtitle {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-accent-200);
        margin-top: 5px;
    }

    .page-header--console .page-header__meta {
        color: var(--color-accent-200);
    }

    .page-header--console .page-header__toolbar {
        margin-top: 12px;
    }

    /* The band's own controls sit on the dark ground rather than punching a white hole in it. */
    .page-header--console .mud-input-control .mud-input-slot,
    .page-header--console input.admin-search {
        color: var(--spec-on-dark);
    }

    .page-header--console input.admin-search {
        width: 280px;
        max-width: 100%;
        min-height: 32px;
        padding: 6px 10px;
        font-family: var(--font-body);
        font-size: 12.5px;
        background: var(--color-accent-800);
        border: 1px solid var(--color-accent-700);
    }

    .page-header--console input.admin-search::placeholder {
        color: var(--color-accent-300);
    }

    .page-header--console input.admin-search:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring-on-dark);
        outline-offset: 1px;
    }

    /* The segmented group inside the band keeps its shape but takes the dark palette. */
    .page-header--console .segmented {
        border-color: var(--color-accent-700);
    }

    .page-header--console .segmented__cell {
        color: var(--color-accent-200);
        border-color: var(--color-accent-700);
    }

    .page-header--console .segmented__cell[aria-pressed="true"] {
        background: var(--color-accent);
        color: var(--spec-on-accent);
    }

    /*
     * MudBlazor's palette is built for a light ground, so every control dropped into the band
     * arrives dark-on-dark: a floating label nobody can read, and a "text" button in the accent
     * that disappears into it. Repainted here rather than by handing each page a variant, so a
     * control added to a band later is legible by default.
     */
    /*
     * The `#main-content` prefix is not decoration: components.css restyles MudBlazor's fields
     * from behind that id, and an id beats any number of classes whatever the layer order says.
     */
    #main-content .page-header--console .mud-input-label.mud-input-label-inputcontrol,
    #main-content .page-header--console .mud-input-label {
        color: var(--color-accent-200);
    }

    #main-content .page-header--console .mud-input .mud-input-slot,
    #main-content .page-header--console .mud-input-adornment .mud-icon-root {
        color: var(--spec-on-dark);
    }

    #main-content .page-header--console .mud-input.mud-input-outlined {
        background: var(--color-accent-800);
    }

    #main-content .page-header--console .mud-input.mud-input-outlined .mud-input-outlined-border {
        border-color: var(--color-accent-700);
    }

    /* The primary action is the one solid fill on the band, and it has to hold its own against
       accent-900 rather than dissolve into it. */
    .page-header--console .mud-button-filled {
        background: var(--color-accent);
        border: 1px solid var(--color-accent-400);
        color: var(--spec-on-accent);
    }

    .page-header--console .mud-button-filled:hover {
        background: var(--color-accent-500);
    }

    .page-header--console .mud-button-text,
    .page-header--console .mud-button-outlined {
        color: var(--color-accent-200);
    }

    .page-header--console .mud-button-outlined {
        border-color: var(--color-accent-600);
    }

    /* Tags beside the title: the subscription's state and where it is written from. */
    .page-header--console .admin-band-tags {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .admin-band-tag {
        padding: 5px 10px;
        font-size: var(--text-sm);
        white-space: nowrap;
    }

    .admin-band-tag--ok {
        background: var(--ok);
        color: #fff;
    }

    .admin-band-tag--warn {
        background: var(--warn);
        color: #fff;
    }

    .admin-band-tag--stop {
        background: var(--stop);
        color: #fff;
    }

    .admin-band-tag--outline {
        border: 1px solid var(--color-accent-600);
        color: var(--color-accent-200);
        font-family: var(--font-mono);
    }

    /* ——————————————————————————————————————————————————————
       Stat tiles

       Kicker, figure, note — and a 3px top mark carrying the role, which is the only colour on an
       otherwise white tile. The figure is mono so a column of them stays aligned as it changes.
       —————————————————————————————————————————————————————— */
    .admin-stats {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
        gap: 9px;
    }

    .admin-stat {
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        border-top: 3px solid var(--admin-stat-mark, var(--color-accent));
        padding: 11px 13px;
        min-width: 0;
    }

    .admin-stat--ok {
        --admin-stat-mark: var(--ok);
        --admin-stat-ink: var(--ok);
    }

    .admin-stat--warn {
        --admin-stat-mark: var(--warn);
        --admin-stat-ink: var(--warn);
    }

    .admin-stat--stop {
        --admin-stat-mark: var(--stop);
        --admin-stat-ink: var(--stop);
    }

    .admin-stat__label {
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .admin-stat__value {
        font: var(--weight-semibold) 26px / 1.15 var(--font-mono);
        font-variant-numeric: tabular-nums;
        color: var(--admin-stat-ink, var(--spec-ink));
        margin-top: 6px;
        overflow-wrap: anywhere;
    }

    .admin-stat__note {
        font-size: 11px;
        line-height: var(--leading-snug);
        color: var(--color-neutral-700);
        margin-top: 3px;
    }

    /* ——————————————————————————————————————————————————————
       Panels — the console's white card
       —————————————————————————————————————————————————————— */
    .admin-panel {
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        min-width: 0;
    }

    .admin-panel__head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
        padding: 11px 14px;
        border-bottom: 1px solid var(--color-divider);
    }

    .admin-panel__title {
        font: var(--weight-semibold) 10px / 1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .admin-panel__meta {
        font-size: 11px;
        color: var(--color-neutral-700);
    }

    .admin-panel__meta--mono {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
    }

    .admin-panel__body {
        padding: 12px 14px;
    }

    .admin-panel__actions {
        display: flex;
        gap: 8px;
        align-items: center;
        flex-wrap: wrap;
        padding: 11px 14px;
    }

    .admin-panel__group {
        padding: 7px 14px;
        background: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-divider);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: var(--tracking-caps);
        text-transform: uppercase;
        color: var(--color-neutral-800);
    }

    /* The firm card's two columns: diagnostics wide on the left, the firm's own facts narrow on
       the right. Collapses to one column before the right column would start hyphenating. */
    .admin-cols {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        gap: 16px;
        align-items: start;
    }

    @media (max-width: 1180px) {
        .admin-cols {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .admin-col {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
    }

    /* ——————————————————————————————————————————————————————
       Tags — mono, 10px, uppercase, in the role's colour on its tint
       —————————————————————————————————————————————————————— */
    .admin-tag {
        display: inline-block;
        font: var(--weight-regular) 10px / 1 var(--font-mono);
        text-transform: uppercase;
        letter-spacing: 0.05em;
        padding: 3px 6px;
        white-space: nowrap;
        color: var(--admin-tag-ink, var(--color-neutral-700));
        background: var(--admin-tag-tint, var(--color-neutral-200));
        border: 1px solid var(--admin-tag-line, var(--color-divider));
    }

    .admin-tag--ok {
        --admin-tag-ink: var(--ok);
        --admin-tag-tint: var(--ok-t);
        --admin-tag-line: var(--ok-b);
    }

    .admin-tag--warn {
        --admin-tag-ink: var(--warn);
        --admin-tag-tint: var(--warn-t);
        --admin-tag-line: var(--warn-b);
    }

    .admin-tag--stop {
        --admin-tag-ink: var(--stop);
        --admin-tag-tint: var(--stop-t);
        --admin-tag-line: var(--stop-b);
    }

    .admin-tag--accent {
        --admin-tag-ink: var(--color-accent-800);
        --admin-tag-tint: var(--color-accent-100);
        --admin-tag-line: var(--color-accent-300);
    }

    /* ——————————————————————————————————————————————————————
       Tables

       MudTable with the console's dark header. The scroll-inside behaviour comes from .spec-fill
       in components.css; only the colour is set here.
       —————————————————————————————————————————————————————— */
    #main-content .admin-table.mud-table {
        border: 1px solid var(--color-neutral-400);
        background: var(--spec-surface);
    }

    #main-content .admin-table .mud-table-head .mud-table-cell {
        height: 30px;
        padding: 0 12px;
        background: var(--color-accent-900);
        color: #fff;
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.09em;
        text-transform: uppercase;
        border-bottom: 0;
    }

    #main-content .admin-table .mud-table-body .mud-table-cell {
        padding: 6px 12px;
        font-size: 12.5px;
        border-bottom: 1px solid var(--color-divider);
    }

    #main-content .admin-table .mud-table-row:hover .mud-table-cell {
        background: var(--wash-accent-10);
    }

    .admin-table__name {
        font-weight: var(--weight-semibold);
        color: var(--color-accent-800);
    }

    .admin-table__mono {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
        color: var(--color-neutral-700);
    }

    /* The plans-in-use table: a hand-rolled table rather than a MudTable, because it never
       scrolls, never sorts and never selects — it is six rows of arithmetic. */
    .admin-plan-usage {
        width: 100%;
        border-collapse: collapse;
    }

    .admin-plan-usage th {
        padding: 7px 14px;
        background: var(--color-neutral-100);
        border-bottom: 1px solid var(--color-divider);
        font: var(--weight-semibold) var(--text-2xs) / 1 var(--font-heading);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
        text-align: left;
    }

    .admin-plan-usage td {
        padding: 7px 14px;
        border-bottom: 1px solid var(--color-divider);
        font-size: 12.5px;
        vertical-align: top;
    }

    .admin-plan-usage__num {
        text-align: right;
        width: 84px;
        font-family: var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    /* Fixed meta columns, so the firm's name takes the slack rather than the creation date
       drifting to the far edge of a wide board. */
    #main-content .admin-table--firms th:not(:first-child),
    #main-content .admin-table--firms td:not(:first-child) {
        width: 170px;
    }

    .admin-footnote {
        margin-top: 12px;
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        color: var(--color-neutral-700);
    }

    /* The client meter: figures over a 3px bar that stops at the cap, so "over the limit" reads
       as a full bar in the stop colour rather than as a bar that ran off the end. */
    .admin-meter {
        min-width: 92px;
    }

    .admin-meter__figures {
        font-family: var(--font-mono);
        font-size: var(--text-sm);
        font-variant-numeric: tabular-nums;
    }

    .admin-meter__track {
        height: 3px;
        background: var(--color-neutral-200);
        margin-top: 3px;
    }

    .admin-meter__fill {
        display: block;
        height: 3px;
        background: var(--admin-meter-ink, var(--color-accent));
    }

    .admin-meter--warn {
        --admin-meter-ink: var(--warn);
    }

    .admin-meter--stop {
        --admin-meter-ink: var(--stop);
    }

    /* ——————————————————————————————————————————————————————
       The feature ledger on a firm's card

       Glyph · label over its key · why it looks like that · the tag. The row's ground carries the
       reason: a grant is accent, a revoke is stop, an unbuilt key is neutral. That is what lets
       an operator scan the column of grounds instead of reading eleven notes.
       —————————————————————————————————————————————————————— */
    .admin-feature {
        display: grid;
        grid-template-columns: 16px minmax(0, 1fr) 200px 116px;
        gap: 10px;
        align-items: center;
        padding: 7px 14px;
        border-bottom: 1px solid var(--color-divider);
        background: var(--admin-feature-bg, var(--spec-surface));
    }

    @media (max-width: 860px) {
        .admin-feature {
            grid-template-columns: 16px minmax(0, 1fr);
        }
    }

    .admin-feature--grant {
        --admin-feature-bg: var(--color-accent-100);
        --admin-feature-note: var(--color-accent-800);
    }

    .admin-feature--revoke {
        --admin-feature-bg: var(--stop-t);
        --admin-feature-note: var(--stop);
    }

    .admin-feature--off {
        --admin-feature-bg: var(--color-neutral-100);
        --admin-feature-ink: var(--color-neutral-700);
        --admin-feature-note: var(--color-neutral-700);
    }

    .admin-feature__glyph {
        font: var(--weight-regular) 12px var(--font-mono);
        color: var(--admin-feature-ink, var(--spec-ink));
        text-align: center;
    }

    .admin-feature__label {
        font-size: 12.5px;
        color: var(--admin-feature-ink, var(--spec-ink));
    }

    .admin-feature--grant .admin-feature__label,
    .admin-feature--revoke .admin-feature__label {
        font-weight: var(--weight-semibold);
    }

    .admin-feature__key {
        font: var(--weight-regular) 10px var(--font-mono);
        color: var(--color-neutral-700);
        margin-top: 1px;
    }

    .admin-feature__note {
        font-size: 11px;
        line-height: 1.4;
        color: var(--admin-feature-note, var(--color-neutral-700));
    }

    .admin-feature__tag {
        justify-self: end;
    }

    @media (max-width: 860px) {
        .admin-feature__note,
        .admin-feature__tag {
            grid-column: 2;
            justify-self: start;
        }
    }

    /* ——————————————————————————————————————————————————————
       Override rows — the same three kinds, as a list with the kind on the left bar
       —————————————————————————————————————————————————————— */
    .admin-override {
        display: grid;
        grid-template-columns: 170px 100px minmax(0, 1fr) 128px auto;
        gap: 11px;
        align-items: center;
        padding: 9px 14px;
        border-bottom: 1px solid var(--color-divider);
        border-left: 3px solid var(--admin-override-ink, var(--color-accent));
        background: var(--admin-override-bg, var(--color-accent-100));
    }

    @media (max-width: 1080px) {
        .admin-override {
            grid-template-columns: minmax(0, 1fr) auto;
        }
    }

    .admin-override--revoke {
        --admin-override-ink: var(--stop);
        --admin-override-bg: var(--stop-t);
    }

    .admin-override--expired {
        --admin-override-ink: var(--color-neutral-500);
        --admin-override-bg: var(--color-neutral-100);
    }

    .admin-override__key {
        font: var(--weight-semibold) 11px var(--font-mono);
        color: var(--admin-override-ink, var(--color-accent-800));
        overflow-wrap: anywhere;
    }

    .admin-override__why {
        font-size: var(--text-sm);
        line-height: 1.45;
        color: var(--color-neutral-800);
    }

    .admin-override__when {
        font-size: var(--text-sm);
        color: var(--admin-override-ink, var(--color-accent-800));
    }

    /* ——————————————————————————————————————————————————————
       Plan catalogue — a list of plans beside one editor
       —————————————————————————————————————————————————————— */
    .admin-plans {
        display: grid;
        grid-template-columns: 262px minmax(0, 1fr);
        gap: 16px;
        align-items: start;

        /* The mockup's width. Left unbounded, the editor's note and entry columns drift to the
           far edge of a 1600px board and stop reading as part of the row they describe. */
        max-width: 1180px;
    }

    @media (max-width: 980px) {
        .admin-plans {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .admin-plan-item {
        display: block;
        width: 100%;
        text-align: left;
        padding: 9px 13px;
        border: 0;
        border-bottom: 1px solid var(--color-divider);
        border-left: 3px solid transparent;
        background: var(--spec-surface);
        cursor: pointer;
        font-family: inherit;
    }

    .admin-plan-item.is-current {
        background: var(--color-accent-100);
        border-left-color: var(--color-accent);
    }

    /* Name over meta, not beside it: the two are a heading and its sub-line, and a plan called
       "BS Close + FINAN Βασικό" would otherwise run into its own firm count. */
    .admin-plan-item__name {
        display: block;
        font-size: 12.5px;
        color: var(--spec-ink);
    }

    .admin-plan-item.is-current .admin-plan-item__name {
        font-weight: var(--weight-semibold);
    }

    .admin-plan-item__meta {
        display: block;
        font: var(--weight-regular) var(--text-xs) var(--font-mono);
        color: var(--color-neutral-700);
        margin-top: 2px;
    }

    .admin-plan-item:hover {
        background: var(--wash-accent-10);
    }

    .admin-plan-item:focus-visible {
        outline: var(--spec-focus-width) solid var(--spec-focus-ring);
        outline-offset: -2px;
    }

    /* The editor's feature rows: a SpecCheck, the key underneath, the maturity note, and the
       ΕΙΣΟΔΟΣ mark on the one key that decides whether the module exists at all. */
    .admin-pick {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 190px 78px;
        gap: 11px;
        align-items: center;
        padding: 5px 17px;
        border-bottom: 1px solid var(--color-divider);
        background: var(--admin-pick-bg, var(--spec-surface));
    }

    @media (max-width: 860px) {
        .admin-pick {
            grid-template-columns: minmax(0, 1fr);
        }
    }

    .admin-pick.is-on {
        --admin-pick-bg: var(--color-accent-100);
    }

    .admin-pick.is-off {
        --admin-pick-bg: var(--color-neutral-100);
    }

    .admin-pick__key {
        font: var(--weight-regular) 10px var(--font-mono);
        color: var(--color-neutral-700);
    }

    .admin-pick__note {
        font-size: 11px;
        color: var(--color-neutral-700);
    }

    .admin-pick.is-on .admin-pick__note {
        color: var(--color-accent-700);
    }

    .admin-pick__footnote {
        padding: 10px 17px 0;
    }

    /* The verdict under the picker: always present, valid or not. A note that appears only on
       failure reads as an error; one that is always there reads as the rule. */
    .admin-panel__verdict {
        margin: 14px 17px;
    }

    .admin-pick__entry {
        font: var(--weight-semibold) 8.5px / 1 var(--font-mono);
        letter-spacing: 0.08em;
        color: var(--color-accent-800);
        justify-self: end;
    }

    @media (max-width: 860px) {
        .admin-pick__entry {
            justify-self: start;
        }
    }

    /* Who owns the subscription row. Two cards side by side, the live one marked — a statement of
       fact rather than a control, because only the billing system can make a row external. */
    .admin-source {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
    }

    .admin-source__card {
        flex: 1 1 220px;
        padding: 9px 11px;
        background: var(--spec-surface);
        border: 1px solid var(--color-divider);
        border-left: 3px solid var(--color-neutral-400);
    }

    .admin-source__card.is-current {
        background: var(--color-accent-100);
        border-color: var(--color-accent-400);
        border-left-color: var(--color-accent);
    }

    .admin-source__name {
        font: var(--weight-semibold) 12.5px var(--font-body);
    }

    .admin-source__note {
        font-size: 11px;
        line-height: 1.45;
        color: var(--color-neutral-800);
        margin-top: 3px;
    }

    /* The generated initial password reads as a credential, not as prose. */
    #main-content .admin-password input {
        font-family: var(--font-mono);
        letter-spacing: 0.02em;
    }

    /* ——————————————————————————————————————————————————————
       The minted API key — shown once, and never again
       —————————————————————————————————————————————————————— */
    /* The minted panel stacks rather than sitting on one line: it carries a head, the secret and
       a sentence, and the spec-note's default row would put all three side by side. */
    .admin-minted {
        display: block;
    }

    .admin-minted__head {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-minted__foot {
        margin-top: 10px;
    }

    /* Two explanatory panels side by side under the key table. */
    .admin-notes {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 12px;
    }

    .admin-secret {
        display: flex;
        gap: 9px;
        align-items: center;
        flex-wrap: wrap;
        margin-top: 10px;
    }

    .admin-secret__value {
        flex: 1 1 320px;
        min-width: 0;
        padding: 9px 11px;
        background: var(--spec-surface);
        border: 1px solid var(--warn-b);
        font: var(--weight-regular) 13px var(--font-mono);
        letter-spacing: 0.02em;
        overflow-wrap: anywhere;
    }

    .admin-example {
        margin-top: 14px;
        min-width: 0;
    }

    .admin-example__label {
        display: block;
        font: var(--weight-semibold) 10px / 1 var(--font-heading);
        letter-spacing: 0.12em;
        text-transform: uppercase;
        color: var(--color-neutral-700);
    }

    .admin-example__body {
        margin: 8px 0 0;
        padding: 9px 11px;
        background: var(--spec-surface);
        border: 1px solid var(--warn-b);
        font: var(--weight-regular) 12px / 1.45 var(--font-mono);
        overflow-x: auto;
        overflow-wrap: anywhere;
        white-space: pre-wrap;
    }

    .admin-example__actions {
        display: flex;
        gap: 9px;
        flex-wrap: wrap;
        margin-top: 8px;
    }

    /* ——————————————————————————————————————————————————————
       Small shared pieces
       —————————————————————————————————————————————————————— */
    .admin-figure {
        font: var(--weight-semibold) 26px / 1 var(--font-mono);
        font-variant-numeric: tabular-nums;
    }

    .admin-rows {
        display: grid;
        gap: 0;
    }

    .admin-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px;
        align-items: center;
        padding: 8px 14px;
        border-bottom: 1px solid var(--color-divider);
    }

    .admin-row:last-child {
        border-bottom: 0;
    }

    .admin-user-state {
        display: flex;
        align-items: center;
        gap: 8px;
        justify-self: end;
    }

    /* §3.8: colour, not opacity, says a row is switched off. */
    .admin-state--ok {
        font-size: 11px;
        color: var(--ok);
    }

    .admin-state--muted {
        font-size: 11px;
        color: var(--color-neutral-700);
    }

    .admin-row__mono {
        font: var(--weight-regular) var(--text-xs) var(--font-mono);
        color: var(--color-neutral-700);
        margin-top: 1px;
    }

    .admin-health-event-title {
        overflow-wrap: anywhere;
        max-width: 28rem;
    }

    /* A reason that must stay in the DOM beside the control it disables — §0. */
    .admin-reason {
        font-size: var(--text-sm);
        line-height: var(--leading-snug);
        color: var(--color-neutral-800);
        max-width: 46rem;
    }

    .admin-key-list {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
    }

    /* One resolved feature: the Greek label a person reads, over the key they quote on the phone. */
    .admin-effective {
        display: block;
        padding: 4px 8px;
        background: var(--ok-t);
        border: 1px solid var(--ok-b);
    }

    .admin-effective__label {
        display: block;
        font-size: 12px;
        color: var(--color-neutral-900);
    }

    .admin-effective__key {
        display: block;
        font: var(--weight-regular) 10px var(--font-mono);
        color: var(--color-neutral-700);
        margin-top: 1px;
    }

    .admin-stack {
        display: flex;
        flex-direction: column;
        gap: 14px;
        min-width: 0;
    }

    .admin-fields {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 10px 14px;
    }
}