/* _content/Schnatter.Web/Components/Chat/SubAgentTraceRenderer.razor.rz.scp.css */
/* S12 T1246 / SC-011 — scoped CSS for SubAgentTraceRenderer.
   Tokens-only contract (Constitution V): zero literal hex colour,
   zero literal rgb/rgba, zero literal pixel values. The CI grep gate
   in T1250 / T1255 checks this file for those three patterns.
   S20 editorial skin: recessed paper field with hairline ink rules,
   mono tool captions. */

.subagent-trace[b-a623my2cqz] {
    margin: var(--space-2) 0;
    padding: var(--space-2);
    background: var(--paper-deep);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
}

.subagent-trace details > summary[b-a623my2cqz] {
    cursor: pointer;
    font-weight: 600;
}

.subagent-trace__icon[b-a623my2cqz] {
    color: var(--brand-indigo);
    margin-inline-end: var(--space-1);
}

.subagent-trace__notice[b-a623my2cqz] {
    color: var(--color-signal-text);
    margin-inline-start: var(--space-1);
}

.subagent-trace__list[b-a623my2cqz] {
    list-style: none;
    padding: var(--space-2) 0 0 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.subagent-trace__entry[b-a623my2cqz] {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto;
    gap: var(--space-2);
    align-items: center;
}

.subagent-trace__seq[b-a623my2cqz] {
    color: var(--text-muted);
}

.subagent-trace__kind[b-a623my2cqz] {
    color: var(--brand-indigo);
    font-weight: 600;
}

.subagent-trace__tool[b-a623my2cqz] {
    font-family: var(--font-mono);
    color: var(--color-info);
}

.subagent-trace__summary[b-a623my2cqz] {
    color: var(--text-primary);
}

.subagent-trace__tokens[b-a623my2cqz] {
    color: var(--text-muted);
    font-size: 0.875rem;
}

.subagent-trace__final[b-a623my2cqz] {
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: thin solid var(--rule-hairline);
}
/* _content/Schnatter.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/* Scoped layout grid for the application shell (S20 editorial conversion).
   Constitution V: only var(--…) tokens; no color/spacing/radius literals.
   Non-token values (z-index, vh, viewport-relative, font-size steps) are
   allowed. The brand block visuals (.brand-mark / .brand-logo /
   .brand-wordmark) are theme.css §2 globals — not duplicated here. */

.app-header[b-jo5jwggomt] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-strong);
}

.app-header__inner[b-jo5jwggomt] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    padding-block: var(--space-3);
}

.app-nav[b-jo5jwggomt] {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    flex-wrap: wrap;
}

/* 2026-09-15 — overflow guard, AUTHENTICATED header only.
   A non-wrapping space-between row is the construction that produced
   the S20 overlap bug: when brand and nav together exceed the
   container, neither gives way and the nav slides over the wordmark.
   The anonymous header (five short links) never reaches that point and
   is deliberately left byte-identical — these three rules are scoped to
   the header that carries the second band, which is the authenticated
   one by construction. Above the restack breakpoint they are the net
   that keeps the nine-item row from ever colliding with the brand. */
.app-header:has(.app-header__product) .app-header__inner[b-jo5jwggomt] {
    flex-wrap: wrap;
}

.app-header:has(.app-header__product) .app-nav[b-jo5jwggomt] {
    /* Shrink-only (never grow): with flex-grow the nav would claim the
       free space and push the brand row to wrap even when it fits. */
    flex: 0 1 auto;
    justify-content: flex-end;
    min-width: 0;
}

/* FR-006 keeps the K&K mark from being scaled down, so the box it sits
   in must be allowed to shrink instead of overflowing the header. */
.app-header:has(.app-header__product) .brand-mark[b-jo5jwggomt] {
    min-width: 0;
}

/* --- Authenticated header: two bands (2026-09-15) ---------------------------
   Band 1 (.app-header__inner > .app-nav) carries the user's own surfaces,
   operator territory and the session cluster. Band 2
   (.app-header__product) carries the public product pages. See the
   MainLayout.razor comment for the information architecture; this file
   only supplies the visual separation that makes it readable.
   Constitution V: tokens only. */

/* Items are grouped so a wrapping nav breaks BETWEEN groups rather than
   splitting "Kontingent" off from "Abmelden" (or orphaning a single
   product link). Each group is itself a flex row. */
.nav-group[b-jo5jwggomt] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-4);
}

/* The session cluster stays whole and stays last at every width. */
.nav-group--session[b-jo5jwggomt] {
    gap: var(--space-4);
}

/* Band 2 — recessed strip under the brand row. The lower contrast is
   load-bearing, not decoration: it is one of the four cues that keep
   "Inferenz-API" (public page about the offering) from being mistaken
   for "API-Zugang" (the user's own keys and usage) in band 1. */
.app-header__product[b-jo5jwggomt] {
    background: var(--paper-deep);
    border-top: 1px solid var(--rule-hairline);
}

.product-nav[b-jo5jwggomt] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    column-gap: var(--space-4);
    row-gap: var(--space-1);
    padding-block: var(--space-2);
}

/* House caption idiom (same treatment as the footer's column headings,
   which group exactly these three pages under the same word). */
.product-nav__label[b-jo5jwggomt] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Deliberately NOT .public-nav a: lighter weight and a muted ink step
   mark these as secondary against band 1's bold, full-contrast links. */
.product-nav__link[b-jo5jwggomt] {
    color: var(--text-secondary);
    font-weight: 500;
    font-size: 0.85rem;
    letter-spacing: 0.3px;
    transition: color var(--motion-micro) var(--ease-standard);
}

.product-nav__link:hover[b-jo5jwggomt],
.product-nav__link:focus-visible[b-jo5jwggomt] {
    color: var(--brand-indigo);
    outline: none;
}

.app-main[b-jo5jwggomt] {
    padding-block: var(--space-12);
    min-height: calc(100vh - 6rem);
}

/* S06 — chat full-width variant. The only Constitution-V deviation in
   S06: chat pages opt out of the .container constraint (now
   --layout-max-width) via the LayoutVariant cascading-value. Since T2
   the variant is no longer unbounded: it centres on the
   --layout-max-width-wide token so a Full-HD monitor is fully used
   while ultrawide screens don't stretch chat lines indefinitely.
   Tokens only. */
.app-main--full-width[b-jo5jwggomt] {
    max-width: var(--layout-max-width-wide);
    margin-inline: auto;
    padding-inline: var(--space-6);
    padding-block: var(--space-6);
}

/* Chat workspace modifier — bounded-height flex child of the
   body:has(.app-main--chat) flex column (theme.css). The page never
   scrolls; the conversation scrolls inside .chat-message-list. Trimmed
   top/bottom padding reclaims the wasted vertical room above/below the
   chat (requirement: less wasted vertical space). Only the chat route
   carries this modifier, so admin FullWidth pages are untouched. */
.app-main--full-width.app-main--chat[b-jo5jwggomt] {
    flex: 1 1 auto;
    min-height: 0;
    /* min-width:0 lets this flex item shrink below its content min-content on
       the inline axis — without it the grid workspace inside imposes a
       ~1060px floor and the page overflows horizontally at narrow widths. */
    min-width: 0;
    overflow: hidden;
    padding-block: var(--space-4);
}

/* ≤640px: the restacked global header is tall; trim the chat main's own
   top/bottom padding to give the composer more room to stay on-screen. */
@media (max-width: 640px) {
    .app-main--full-width.app-main--chat[b-jo5jwggomt] {
        padding-inline: var(--space-3);
        padding-block: var(--space-2);
    }
}

/* --- Footer: deep-indigo emphasis band (S20 FR-006/FR-018; R8) --------------
   The .band global (theme.css) supplies ground + on-band ink; scoped rules
   carry spacing and the muted on-band text steps. */

.app-footer[b-jo5jwggomt] {
    padding: var(--space-12) var(--space-6) var(--space-6);
    color: var(--light-80);
    font-size: 0.875rem;
    text-align: center;
}

.app-footer__cookies[b-jo5jwggomt],
.app-footer__copyright[b-jo5jwggomt] {
    margin: 0;
    line-height: 1.7;
}

.app-footer__copyright[b-jo5jwggomt] {
    margin-top: var(--space-2);
}

/* Protective light plate for the K&K mark on the indigo band (FR-006:
   the mark is never recolored — it sits on a --paper-card field with
   ≥ 1× mark height of protected space; logo height 28px ≤ --space-6). */

.app-footer__brand[b-jo5jwggomt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-8);
}

.app-footer__brand-plate[b-jo5jwggomt] {
    display: inline-flex;
    background: var(--paper-card);
    padding: var(--space-6);
    border-radius: var(--radius-box);
}

.app-footer__brand-logo[b-jo5jwggomt] {
    display: block;
    height: 28px;
    width: auto;
}

.app-footer__attribution[b-jo5jwggomt] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--light-80);
}

/* --- S02 public nav + three-column footer grid -------------------------------
   Tokens only — Constitution V. Nav structure and links unchanged (FR-013);
   hover moved from the retired lila wash to the carrying indigo. */

.public-nav[b-jo5jwggomt] {
    gap: var(--space-5);
}

.public-nav a[b-jo5jwggomt] {
    color: var(--text-secondary);
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: color var(--motion-micro) var(--ease-standard);
}

.public-nav a:hover[b-jo5jwggomt],
.public-nav a:focus-visible[b-jo5jwggomt] {
    color: var(--brand-indigo);
    outline: none;
}

.public-footer-grid[b-jo5jwggomt] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    margin-bottom: var(--space-8);
    text-align: left;
}

.public-footer-column[b-jo5jwggomt] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.public-footer-column a[b-jo5jwggomt] {
    color: var(--light-80);
    font-size: 0.875rem;
    transition: color var(--motion-micro) var(--ease-standard);
}

.public-footer-column a:hover[b-jo5jwggomt],
.public-footer-column a:focus-visible[b-jo5jwggomt] {
    color: var(--text-on-band);
    outline: none;
}

.public-footer-column__heading[b-jo5jwggomt] {
    color: var(--text-on-band);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0 0 var(--space-2);
}

@media (max-width: 1024px) {
/* --- Narrow-viewport header (S20 responsive fix) ------------------------------
   ≤ 640px: the single space-between row overflows (455px scrollWidth at a
   320px viewport; brand block and nav superimpose). Restack editorially:
   brand row on top, a hairline ink rule, then the nav as a wrapping row
   with tighter type. Pure CSS — no hamburger, markup untouched (FR-013).
   The authenticated variant (~5 items + QuotaIndicator + Abmelden pill)
   simply wraps onto additional rows via row-gap. Desktop unchanged. */

@media (max-width: 640px) {
    .app-header__inner[b-jo5jwggomt] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .brand-mark[b-jo5jwggomt] {
        justify-content: center;
        min-width: 0;
    }

    .app-nav[b-jo5jwggomt] {
        justify-content: center;
        column-gap: var(--space-4);
        row-gap: var(--space-2);
        border-top: 1px solid var(--rule-hairline);
        padding-top: var(--space-3);
        min-width: 0;
    }

    .public-nav a[b-jo5jwggomt] {
        font-size: 0.85rem;
        /* grow the line box for comfortable thumb targets */
        padding-block: var(--space-2);
        white-space: nowrap;
    }

    /* 2026-09-15 — the restacked band 1 now holds up to three groups.
       Centre each one and tighten the intra-group gaps so the three
       personal links still fit a single 320px row. */
    .nav-group[b-jo5jwggomt] {
        justify-content: center;
        column-gap: var(--space-3);
        row-gap: var(--space-1);
    }

    /* Kontingent + Abmelden take their own full-width row so the logout
       control is never crowded against a navigation link at thumb size. */
    .nav-group--session[b-jo5jwggomt] {
        flex-basis: 100%;
        justify-content: center;
        column-gap: var(--space-3);
    }

    /* Band 2 stays ONE short row down to 320px: the caption keeps its
       disambiguating job, the gaps and type step down instead. */
    .product-nav[b-jo5jwggomt] {
        justify-content: center;
        column-gap: var(--space-2);
        row-gap: var(--space-1);
        padding-block: var(--space-1);
    }

    .product-nav__label[b-jo5jwggomt] {
        letter-spacing: 0.14em;
    }

    .product-nav__link[b-jo5jwggomt] {
        font-size: 0.78rem;
        white-space: nowrap;
    }
}

/* ≤ 420px: hide the K&K word-image rather than ever shrinking it below its
   protected size (FR-006 — never distort/scale down); the euraki wordmark
   keeps the brand row legible at 320px. The <img> stays in the DOM. */
@media (max-width: 420px) {
    .brand-logo[b-jo5jwggomt] {
        display: none;
    }
}

.public-footer-grid[b-jo5jwggomt] {
        grid-template-columns: 1fr;
        gap: var(--space-6);
        text-align: center;
    }

    .public-footer-column[b-jo5jwggomt] {
        align-items: center;
    }
}

/* ≤ 1200px: restack the AUTHENTICATED header (2026-09-15).
   The anonymous header is five short links and still fits one row here,
   so it stays byte-identical. The authenticated one no longer does:
   three groups plus the two quota chips need more width than the brand
   block leaves, and right-aligned internal wrapping — while no longer
   overlapping, thanks to the wrap guard above — reads as a ragged
   stack. Restacking editorially (brand row, hairline, centred nav) is
   the same treatment the ≤640px rules already apply, just triggered
   earlier for the heavier header.

   The authenticated header is identified STRUCTURALLY: it is the only
   one that carries the second band. No render-time flag, no extra class
   and no duplicated auth check — the same :has() idiom theme.css
   already uses for the chat route.

   1200px, not 1024px: with the quota read-out in its wide two-chip form
   (it switches at 1024px, QuotaIndicator.razor.css) the authenticated
   row needs roughly 1100px before the brand block, so the one-row
   layout only becomes honest above that. */
@media (max-width: 1200px) {
    .app-header:has(.app-header__product) .app-header__inner[b-jo5jwggomt] {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-3);
    }

    .app-header:has(.app-header__product) .brand-mark[b-jo5jwggomt] {
        justify-content: center;
    }

    .app-header:has(.app-header__product) .app-nav[b-jo5jwggomt] {
        justify-content: center;
        column-gap: var(--space-4);
        row-gap: var(--space-2);
        border-top: 1px solid var(--rule-hairline);
        padding-top: var(--space-3);
    }
}

/* ≤ 640px: the header stops sticking (2026-09-15).
   Restacked, the authenticated header is brand row + up to three wrapped
   band-1 rows + the band-2 product strip. Pinned to the top that would
   permanently occupy roughly a third of a 320×568 viewport — the links
   would be "present" and the page unreadable. Below the restack
   breakpoint the header therefore scrolls away with the page; it is back
   in reach after one flick, and every link is still one tap from there.
   The chat route is unaffected either way: its body is a non-scrolling
   100dvh flex column (theme.css), where a sticky and a static header
   occupy identical flow space. Desktop keeps the sticky header. */
@media (max-width: 640px) {
    .app-header[b-jo5jwggomt] {
        position: static;
    }
}
/* _content/Schnatter.Web/Components/Pages/Account.razor.rz.scp.css */
/* T7 Konto-Redesign 2026-06-11, S20 editorial conversion 2026-06-12 —
   scoped CSS for the restructured /account page: sticky in-page side
   rail (Muster: Admin/Layout/AdminSideNav.razor.css) + fünf
   Sektions-Karten als Print-Box-Platten (Profil / Sicherheit /
   Tarif & Verbrauch / Daten & Dateien / Gefahrenzone) mit
   beschriebenen Aktions-Zeilen statt loser Pill-Liste.

   Tokens only — Constitution V. SC-003 grep-gate: no hex literals,
   no rgb / rgba / hsl. Collapses to a single column under the 64em
   tablet breakpoint (theme-tokens.md), where the rail falls back to
   a horizontal chip strip — same behaviour as the admin console
   shell. */

/* --- Page shell ------------------------------------------------------------
   .auth-page (theme.css) caps auth-shaped pages at 640px — too narrow
   for a rail + content grid. The scoped attribute selector wins, so we
   widen ONLY this page and keep every other auth page untouched. */

.account-page[b-ot26ezpk8n] {
    max-width: 68rem;
}

.account-page__header[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.account-shell[b-ot26ezpk8n] {
    display: grid;
    grid-template-columns: minmax(10rem, 13rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
}

.account-shell__content[b-ot26ezpk8n] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* --- Side rail (in-page anchors) -------------------------------------------
   Mirrors the AdminSideNav aesthetic: vertical, sticky, quiet links
   with a left accent reveal on hover. No --current modifier — the
   links are same-page anchors, the page renders Static SSR and a
   scroll-spy would need JS for no real gain. */

.account-rail[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: sticky;
    top: var(--space-10);
}

.account-rail__link[b-ot26ezpk8n] {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border-inline-start: 0.125rem solid transparent;
}

.account-rail__link:hover[b-ot26ezpk8n],
.account-rail__link:focus-visible[b-ot26ezpk8n] {
    color: var(--text-primary);
    background: var(--paper-deep);
    border-inline-start-color: var(--brand-indigo);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    outline: none;
}

.account-rail__link--danger[b-ot26ezpk8n] {
    color: var(--text-muted);
}

.account-rail__link--danger:hover[b-ot26ezpk8n],
.account-rail__link--danger:focus-visible[b-ot26ezpk8n] {
    color: var(--color-signal-text);
    border-inline-start-color: var(--color-error);
}

/* Abmelden — deliberately separated from the section anchors by a
   hairline so it reads as the rail's terminal action, not a section. */
.account-rail__logout[b-ot26ezpk8n] {
    margin-top: var(--space-4);
    padding-top: var(--space-4);
    border-top: thin solid var(--rule-hairline);
}

/* --- Section cards (print-box plates — paper-card on 1px ink frame) ---------- */

.account-card[b-ot26ezpk8n] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6) var(--space-7);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    /* Anchor targets land below the sticky chrome instead of kissing
       the viewport edge. */
    scroll-margin-top: var(--space-10);
}

.account-card__header[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.account-card__heading[b-ot26ezpk8n] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
    color: var(--text-primary);
}

.account-card__sub[b-ot26ezpk8n] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Gefahrenzone — orange signal frame + warning tint (FR-011 signal channel)
   so the destructive region is unmistakable even when scanning. */
.account-card--danger[b-ot26ezpk8n] {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

/* House remedy (P17): the tint stays the ground, the signal colour lives
   in the frame, the label becomes ink. The signal colour on this tint
   only cleared AA as large text (3.40:1, a 0.40 margin); ink over the
   same tint measures ~15.8:1 and the card still carries its signal twice
   via border-color + background. */
.account-card--danger .account-card__heading[b-ot26ezpk8n] {
    color: var(--ink);
}

/* The danger card swaps the paper-card ground for the warning tint, and
   --text-muted was only ever verified against the three PAPER grounds
   (P16) — over this tint it measures 4.49:1 (axe wcag2aa, both hint
   paragraphs in #gefahrenzone), a hair under AA. Step to
   --text-secondary (6.83:1) inside the tinted card only; every other
   card keeps the quieter muted caption. */
.account-card--danger .account-card__sub[b-ot26ezpk8n],
.account-card--danger .account-action__hint[b-ot26ezpk8n] {
    color: var(--text-secondary);
}

/* --- Profil facts (label/value grid) ---------------------------------------- */

.account-facts[b-ot26ezpk8n] {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.account-facts__row[b-ot26ezpk8n] {
    display: grid;
    grid-template-columns: minmax(8rem, 11rem) minmax(0, 1fr);
    gap: var(--space-1) var(--space-4);
    align-items: baseline;
}

/* Mono data labels — editorial caption treatment. */
.account-facts__row dt[b-ot26ezpk8n] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-facts__row dd[b-ot26ezpk8n] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    line-height: 1.55;
    min-width: 0;
}

/* Trailing inline pill (Bearbeiten) hugs the row end so the value
   stays left-aligned. */
.account-facts__row dd > .brand-pill[b-ot26ezpk8n] {
    margin-inline-start: auto;
}

.account-facts__edit[b-ot26ezpk8n] {
    display: block;
}

.account-facts__edit-actions[b-ot26ezpk8n] {
    margin-top: var(--space-3);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* --- Action rows (Sicherheit / Daten & Dateien / Gefahrenzone) --------------
   Each affordance is one described row: label + hint left, exactly one
   pill right. Hairline separators carry the rhythm instead of card-in-
   card chrome. */

.account-actions[b-ot26ezpk8n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.account-action[b-ot26ezpk8n] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding-block: var(--space-3);
}

.account-action + .account-action[b-ot26ezpk8n] {
    border-top: thin solid var(--rule-hairline);
}

.account-action__text[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    min-width: 0;
}

.account-action__label[b-ot26ezpk8n] {
    color: var(--text-primary);
    font-weight: 700;
    line-height: 1.4;
}

.account-action__hint[b-ot26ezpk8n] {
    color: var(--text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.account-action > .brand-pill[b-ot26ezpk8n] {
    margin-inline-start: auto;
    flex-shrink: 0;
    white-space: nowrap;
}

/* --- Tarif & Verbrauch ------------------------------------------------------- */

.account-card__tier-row[b-ot26ezpk8n] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
}

.account-card__plan-display[b-ot26ezpk8n] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.account-card__plan-display strong[b-ot26ezpk8n] {
    color: var(--text-primary);
    font-weight: 700;
}

/* S12 T1242 — FR-025 / US1 sub-agent availability badge (styles
   carried over from the pre-T7 layout, unchanged semantics). The
   success tint reuses the positive-semantic palette; the unavailable
   variant reads as a calm, non-error informational badge (a missing
   capability is a product state, not a failure). */

.account-card__subagent-row[b-ot26ezpk8n] {
    margin: 0;
}

.account-subagent-badge[b-ot26ezpk8n] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--color-success-bg);
    border: thin solid var(--color-success-border);
    color: var(--ink);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

.account-subagent-unavailable[b-ot26ezpk8n] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--paper-deep);
    border: thin solid var(--rule-hairline);
    color: var(--text-muted);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1.4;
}

/* Quota meters — the pinned token text stays authoritative; the bar
   underneath is aria-hidden decoration: editorial indigo fill on a
   recessed paper track with ink hairline. */

.account-quota[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.account-quota__item[b-ot26ezpk8n] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.account-quota__item p[b-ot26ezpk8n] {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--space-2);
    line-height: 1.5;
}

.account-quota__item strong[b-ot26ezpk8n] {
    color: var(--text-secondary);
    font-weight: 700;
}

.account-quota__track[b-ot26ezpk8n] {
    height: 0.375rem;
    border-radius: var(--radius-box);
    background: var(--paper-deep);
    border: thin solid var(--rule-hairline);
    overflow: hidden;
}

.account-quota__fill[b-ot26ezpk8n] {
    height: 100%;
    border-radius: var(--radius-box);
    background: var(--brand-indigo);
    transition: width var(--motion-snap) var(--ease-standard);
}

/* ---------- Tablet breakpoint: single column, horizontal rail ---------- */

@media (max-width: 64em) {
    .account-shell[b-ot26ezpk8n] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
    }

    .account-rail[b-ot26ezpk8n] {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--space-2) var(--space-4);
        padding-bottom: var(--space-2);
        border-bottom: thin solid var(--rule-hairline);
    }

    .account-rail__link[b-ot26ezpk8n] {
        border-inline-start: none;
    }

    .account-rail__link:hover[b-ot26ezpk8n],
    .account-rail__link:focus-visible[b-ot26ezpk8n] {
        border-start-start-radius: var(--radius-box);
        border-end-start-radius: var(--radius-box);
    }

    .account-rail__logout[b-ot26ezpk8n] {
        margin-top: 0;
        margin-inline-start: auto;
        padding-top: 0;
        border-top: none;
    }
}

/* ---------- Phone breakpoint: stack facts + action rows ---------- */

@media (max-width: 40em) {
    .account-card[b-ot26ezpk8n] {
        padding: var(--space-5) var(--space-4);
    }

    .account-facts__row[b-ot26ezpk8n] {
        grid-template-columns: minmax(0, 1fr);
    }

    .account-action[b-ot26ezpk8n] {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .account-action > .brand-pill[b-ot26ezpk8n] {
        margin-inline-start: 0;
    }
}
/* _content/Schnatter.Web/Components/Pages/Account/ApiAccess.razor.rz.scp.css */
/* S23 T034 — scoped styles for /account/api.
   Tokens only (Constitution V / S20 design system): --brand-*, --paper*,
   --ink*, --night*, --space-*, --font-*. No colour or spacing literals.

   Composition idea: the page is a technical document on cream paper.
   Headline balance set in the condensed display face, every machine-
   readable value in mono, framed print-boxes for the two status panels,
   and a single hairline-ruled table for the credentials. The one dark
   element on the whole route lives in the reveal dialog — see
   ApiKeyCreateModal.razor.css — because the secret is the single most
   consequential thing this feature ever shows. */

.api-access[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-10);
    padding-block: var(--space-10) var(--space-16);
}

/* ── Header ──────────────────────────────────────────────────────────── */

.api-access__header[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    max-width: 46rem;
}

.api-access__title[b-z61lpsavzx] {
    margin: 0;
    font-size: var(--text-h1);
}

.api-access__lede[b-z61lpsavzx] {
    margin: 0;
    color: var(--text-secondary);
    font-size: var(--text-h3);
    line-height: 1.45;
}

/* ── Status row: balance + the volume rule ───────────────────────────── */

.api-access__status[b-z61lpsavzx] {
    display: grid;
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-5);
    align-items: start;
}

.api-access__balance[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
}

.api-access__panel-heading[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.api-access__panel-muted[b-z61lpsavzx] {
    margin: 0;
    color: var(--text-muted);
}

/* Ink on the warning tint (S20 P17): error-coloured body text measures
   3.12:1 over this ground and fails AA. The error signal is the rule. */
.api-access__panel-error[b-z61lpsavzx] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: var(--space-1) solid var(--color-error);
    background: var(--color-warning-bg);
    color: var(--ink);
    font-weight: 600;
}

/* The panel body owns its own rhythm: the figure and its caption sit
   tight as one unit, everything below breathes. */
.api-access__balance-body[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.api-access__balance-body > .api-access__balance-label[b-z61lpsavzx] {
    margin-top: calc(-1 * var(--space-2));
}

/* The headline figure. Condensed, oversized, tabular — the one number
   a returning customer opens this page for. */
.api-access__balance-figure[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-display);
    font-weight: 800;
    font-style: italic;
    line-height: 0.95;
    letter-spacing: 0.01em;
    color: var(--brand-indigo);
    font-variant-numeric: tabular-nums;
}

.api-access__balance-label[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* The "nothing booked" / "all spent" states take the same optical weight
   as the figure they replace, so the panel never looks broken. */
.api-access__balance-empty[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 700;
    font-style: italic;
    line-height: 1.1;
    color: var(--text-primary);
}

.api-access__balance-consumed[b-z61lpsavzx] {
    margin: 0;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

.api-access__balance-scope[b-z61lpsavzx],
.api-access__balance-contact[b-z61lpsavzx] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.api-access__balance-contact[b-z61lpsavzx] {
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule-faint);
}

.api-access__balance-fresh[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    line-height: 1.5;
    color: var(--text-muted);
}

/* FR-026 — the two cliff signals. Ruled bands rather than pills: each
   carries a full sentence and sits directly under the figure it
   qualifies, so the eye reaches it on the way down from the balance
   instead of having to hunt for it.

   Text is INK on the warning tint, never orange-on-orange — the S20
   P17 remediation measured signal-coloured body text at 3.12:1 over
   this ground. The signal lives in the left rule, which is a frame and
   therefore not held to text contrast. */
.api-access__signal[b-z61lpsavzx] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    background: var(--color-warning-bg);
    border-left: var(--space-1) solid var(--color-warning-border);
    color: var(--ink);
    line-height: 1.55;
}

/* Same ground, heavier rule: the difference between "act soon" and
   "everything is refused right now" is carried by the copy, and the
   rule only has to tell them apart at a glance. */
.api-access__signal--stop[b-z61lpsavzx] {
    border-left-color: var(--color-error);
    border-left-width: var(--space-2);
    font-weight: 600;
}

/* The rule panel is the page's one piece of emphasis colour: a yellow
   caution band, the same family the impersonation banner uses, because
   "your key works but every call is refused" is exactly the sort of
   thing people otherwise discover at 2am. */
.api-access__rule[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--elevated-border);
    border-left-width: var(--space-2);
    background: var(--elevated-bg);
    color: var(--elevated-ink);
}

.api-access__rule .api-access__panel-heading[b-z61lpsavzx] {
    color: var(--elevated-ink);
}

.api-access__rule-body[b-z61lpsavzx] {
    margin: 0;
    line-height: 1.55;
}

/* ── Credentials ─────────────────────────────────────────────────────── */

.api-access__keys[b-z61lpsavzx],
.api-access__packages[b-z61lpsavzx],
.api-access__spec[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.api-access__packages-forfeit[b-z61lpsavzx] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: var(--space-1) solid var(--rule-strong);
    background: var(--paper-deep);
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.55;
}

.api-access__keys-head[b-z61lpsavzx] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px solid var(--rule-strong);
}

.api-access__section-heading[b-z61lpsavzx] {
    margin: 0;
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.02em;
}

.api-access__keys-empty[b-z61lpsavzx] {
    margin: 0;
    padding: var(--space-6);
    border: 1px dashed var(--rule-hairline);
    background: var(--paper-card);
    color: var(--text-secondary);
}

.api-access__table[b-z61lpsavzx] {
    width: 100%;
    border-collapse: collapse;
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
}

.api-access__caption[b-z61lpsavzx] {
    caption-side: bottom;
    padding-top: var(--space-3);
    color: var(--text-muted);
    font-size: var(--text-caption);
    text-align: left;
}

.api-access__table thead th[b-z61lpsavzx] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--rule-strong);
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: left;
}

.api-access__row:nth-child(even)[b-z61lpsavzx] {
    background: var(--table-row-alt-bg);
}

.api-access__cell[b-z61lpsavzx] {
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--rule-faint);
    vertical-align: middle;
}

.api-access__cell--alias[b-z61lpsavzx] {
    font-family: var(--font-mono);
    font-weight: 700;
    max-width: 18rem;
    overflow-wrap: anywhere;
}

.api-access__cell--num[b-z61lpsavzx] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.api-access__cell--actions[b-z61lpsavzx] {
    text-align: right;
    white-space: nowrap;
}

.api-access__state[b-z61lpsavzx] {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    border: 1px solid currentcolor;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.api-access__state--active[b-z61lpsavzx] {
    color: var(--brand-indigo);
    background: var(--color-info-bg);
}

.api-access__state--revoked[b-z61lpsavzx] {
    color: var(--text-muted);
    background: var(--paper-deep);
}

/* ── Endpoints + curated variants ────────────────────────────────────── */

.api-access__spec-grid[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    border: 1px solid var(--rule-hairline);
    background: var(--paper-card);
}

.api-access__spec-row[b-z61lpsavzx] {
    display: grid;
    grid-template-columns: minmax(10rem, 1fr) minmax(0, 3fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
}

.api-access__spec-row + .api-access__spec-row[b-z61lpsavzx] {
    border-top: 1px solid var(--rule-faint);
}

.api-access__spec-row dt[b-z61lpsavzx] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.api-access__spec-row dd[b-z61lpsavzx] {
    margin: 0;
    overflow-wrap: anywhere;
}

.api-access__spec-row code[b-z61lpsavzx],
.api-access__model code[b-z61lpsavzx] {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--brand-indigo);
}

.api-access__models[b-z61lpsavzx] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.api-access__model[b-z61lpsavzx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--rule-hairline);
    border-top: var(--space-1) solid var(--brand-indigo);
    background: var(--paper-card);
}

.api-access__model span[b-z61lpsavzx] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.api-access__spec-note[b-z61lpsavzx] {
    margin: 0;
    color: var(--text-secondary);
}

.api-access__link[b-z61lpsavzx] {
    color: var(--brand-indigo);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.api-access__link:focus-visible[b-z61lpsavzx] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.visually-hidden[b-z61lpsavzx] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ── Narrow ──────────────────────────────────────────────────────────── */

@media (max-width: 64em) {
    .api-access__status[b-z61lpsavzx] {
        grid-template-columns: minmax(0, 1fr);
    }
}

@media (max-width: 48em) {
    .api-access[b-z61lpsavzx] {
        gap: var(--space-8);
    }

    .api-access__balance[b-z61lpsavzx],
    .api-access__rule[b-z61lpsavzx] {
        padding: var(--space-4);
    }

    .api-access__keys-head[b-z61lpsavzx] {
        flex-direction: column;
        align-items: stretch;
    }

    /* A spec row is a label over its value here — holding the two-column
       grid would squeeze a base URL into a four-character gutter. */
    .api-access__spec-row[b-z61lpsavzx] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }

    /* The table degrades to stacked records rather than scrolling
       sideways: five short fields read fine as a list, and a horizontal
       scroller on a credential list is how people revoke the wrong key. */
    .api-access__table[b-z61lpsavzx],
    .api-access__table tbody[b-z61lpsavzx],
    .api-access__row[b-z61lpsavzx],
    .api-access__cell[b-z61lpsavzx] {
        display: block;
        width: 100%;
    }

    /* A block-level table drops its caption out of the table box model;
       without this it renders as a one-word-wide column beside the rows. */
    .api-access__caption[b-z61lpsavzx] {
        display: block;
        width: 100%;
        padding-top: var(--space-2);
    }

    .api-access__table thead[b-z61lpsavzx] {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .api-access__row[b-z61lpsavzx] {
        border-top: 1px solid var(--rule-strong);
        padding: var(--space-2) 0;
    }

    .api-access__cell[b-z61lpsavzx] {
        border-top: none;
        padding: var(--space-1) var(--space-4);
    }

    /* With the header row gone the alias and the status pill still read
       for themselves — dates and money figures do not. Three euro
       amounts stacked in a package record are indistinguishable without
       their labels, so each one gets its heading back inline. */
    .api-access__cell[data-testid][b-z61lpsavzx]::before {
        font-family: var(--font-mono);
        font-size: var(--text-caption);
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--text-secondary);
    }

    .api-access__cell[data-testid="api-key-consumed"][b-z61lpsavzx]::before {
        content: "Verbrauch: ";
    }

    .api-access__cell[data-testid="api-package-booked"][b-z61lpsavzx]::before {
        content: "Gebucht: ";
    }

    .api-access__cell[data-testid="api-package-amount"][b-z61lpsavzx]::before {
        content: "Umfang: ";
    }

    .api-access__cell[data-testid="api-package-remaining"][b-z61lpsavzx]::before {
        content: "Verbleibend: ";
    }

    .api-access__cell[data-testid="api-package-expiry"][b-z61lpsavzx]::before {
        content: "Gültig bis: ";
    }

    .api-access__cell--actions[b-z61lpsavzx] {
        text-align: left;
        padding-top: var(--space-3);
    }
}
/* _content/Schnatter.Web/Components/Pages/Account/ApiKeyCreateModal.razor.rz.scp.css */
/* S23 T034 — scoped styles for the mint dialog + one-time secret reveal.
   Tokens only (Constitution V / S20). Same dialog family as
   VolumeBookingModal / InviteCreateModal.

   One deliberate exception to the cream-paper ground: the secret sits on
   the --night-card slab, the design system's "dark emphasis" element
   (otherwise reserved for fenced code). It is the loudest thing on the
   whole route on purpose — this is the only moment the value exists, and
   a customer must not be able to skim past it. */

.api-key-create-backdrop[b-8rjmx4qfg8] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.api-key-create-dialog[b-8rjmx4qfg8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(40rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.api-key-create__heading[b-8rjmx4qfg8] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

/* ── Form phase ──────────────────────────────────────────────────────── */

.api-key-create__field[b-8rjmx4qfg8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.api-key-create__field label[b-8rjmx4qfg8] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.api-key-create__field input[b-8rjmx4qfg8] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.api-key-create__field input:focus-visible[b-8rjmx4qfg8] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.api-key-create__hint[b-8rjmx4qfg8] {
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* Ink on the warning tint (S20 P17) — same contract as
   .api-access__panel-error: signal-coloured body text measures 3.41:1
   over this ground and fails AA. The error signal is the left rule. */
.api-key-create__error[b-8rjmx4qfg8] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: var(--space-1) solid var(--color-error);
    background: var(--color-warning-bg);
    color: var(--ink);
    font-weight: 600;
}

.api-key-create__busy[b-8rjmx4qfg8] {
    margin: 0;
    color: var(--text-secondary);
}

/* ── Reveal phase ────────────────────────────────────────────────────── */

.api-key-create__warning[b-8rjmx4qfg8] {
    margin: 0;
    padding: var(--space-4);
    border: 1px solid var(--elevated-border);
    border-left-width: var(--space-2);
    background: var(--elevated-bg);
    color: var(--elevated-ink);
    line-height: 1.5;
}

.api-key-create__secret-slab[b-8rjmx4qfg8] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "label label"
        "value copy";
    align-items: center;
    gap: var(--space-2) var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--code-border);
    background: var(--code-bg);
}

.api-key-create__secret-label[b-8rjmx4qfg8] {
    grid-area: label;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--light-80);
}

.api-key-create__secret-value[b-8rjmx4qfg8] {
    grid-area: value;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--light-25);
    border-radius: var(--radius-box);
    background: var(--night);
    color: var(--code-text);
    font-family: var(--font-mono);
    font-size: 1rem;
    letter-spacing: 0.02em;
}

.api-key-create__secret-value:focus-visible[b-8rjmx4qfg8] {
    outline: none;
    border-color: var(--brand-tuerkis);
}

.api-key-create__copy[b-8rjmx4qfg8] {
    grid-area: copy;
    padding: var(--space-2) var(--space-5);
    border: 1px solid var(--brand-tuerkis);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--brand-tuerkis);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background var(--motion-micro) var(--ease-out-soft),
                color var(--motion-micro) var(--ease-out-soft);
}

.api-key-create__copy:hover[b-8rjmx4qfg8] {
    background: var(--brand-tuerkis);
    color: var(--night);
}

.api-key-create__copy:focus-visible[b-8rjmx4qfg8] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Reserves its line so confirming a copy never shifts the dialog under
   the cursor — the one interaction here that must not move. */
.api-key-create__copy-state[b-8rjmx4qfg8] {
    margin: 0;
    min-height: 1.25rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* The raw success token is a bright turquoise built for dark bands; on
   cream paper it fails contrast, so the confirmation is the same hue
   pulled toward ink (S20 remediation pattern). */
.api-key-create__copy-state--ok[b-8rjmx4qfg8] {
    color: color-mix(in srgb, var(--color-success) 40%, var(--ink));
}

.api-key-create__copy-state--failed[b-8rjmx4qfg8] {
    color: var(--color-signal-text);
}

.api-key-create__powerless[b-8rjmx4qfg8] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.5;
}

.api-key-create__ack[b-8rjmx4qfg8] {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--rule-hairline);
    background: var(--paper-deep);
    cursor: pointer;
    font-weight: 600;
}

.api-key-create__ack input[b-8rjmx4qfg8] {
    margin-top: 0.2em;
    accent-color: var(--brand-indigo);
    width: 1.125rem;
    height: 1.125rem;
}

.api-key-create__ack:focus-within[b-8rjmx4qfg8] {
    box-shadow: var(--shadow-focus-ring);
}

/* ── Actions ─────────────────────────────────────────────────────────── */

.api-key-create__actions[b-8rjmx4qfg8] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.brand-pill[disabled][b-8rjmx4qfg8] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 48em) {
    .api-key-create-dialog[b-8rjmx4qfg8] {
        padding: var(--space-4);
    }

    .api-key-create__secret-slab[b-8rjmx4qfg8] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "label"
            "value"
            "copy";
    }

    .api-key-create__actions[b-8rjmx4qfg8] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Account/ApiKeyRevokeModal.razor.rz.scp.css */
/* S23 T034 — scoped styles for the revoke confirmation.
   Tokens only (Constitution V / S20); same dialog family as
   ApiKeyCreateModal. */

.api-key-revoke-backdrop[b-apima28bme] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.api-key-revoke-dialog[b-apima28bme] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(34rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    /* The destructive frame reads as destructive before a word is read. */
    border: 1px solid var(--rule-strong);
    border-top: var(--space-2) solid var(--color-error);
    border-radius: var(--radius-box);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.api-key-revoke__heading[b-apima28bme] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.api-key-revoke__target[b-apima28bme] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    background: var(--paper-deep);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.api-key-revoke__body[b-apima28bme] {
    margin: 0;
    line-height: 1.55;
}

/* The reassurance is not fine print: fear of losing the balance is the
   main reason a leaked key stays alive longer than it should. */
.api-key-revoke__reassure[b-apima28bme] {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: var(--space-1) solid var(--color-info-border);
    background: var(--color-info-bg);
    color: var(--text-primary);
    line-height: 1.5;
}

/* Ink on the warning tint (S20 P17) — same contract as
   .api-access__panel-error: signal-coloured body text measures 3.41:1
   over this ground and fails AA. The error signal is the left rule. */
.api-key-revoke__error[b-apima28bme] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: var(--space-1) solid var(--color-error);
    background: var(--color-warning-bg);
    color: var(--ink);
    font-weight: 600;
}

.api-key-revoke__busy[b-apima28bme] {
    margin: 0;
    color: var(--text-secondary);
}

.api-key-revoke__actions[b-apima28bme] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.brand-pill[disabled][b-apima28bme] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 48em) {
    .api-key-revoke-dialog[b-apima28bme] {
        padding: var(--space-4);
    }

    .api-key-revoke__actions[b-apima28bme] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/AccountFiles.razor.rz.scp.css */
/* S19 T054, S20 editorial conversion 2026-06-12 — /account/files
   file-library page. Constitution V — design tokens only (--brand-* /
   grounds / --space-* / --radius-*); plain-table convention is the
   recorded deviation (plan §Complexity Tracking, S18 precedent).
   Chat-grouped plain tables stay plain: ink-hairline rules, mono data
   labels, editorial quota bar + filter. */

.account-files[b-0h7nbkethv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-3);
    max-width: 72rem;
    margin: 0 auto;
}

.account-files__header h1[b-0h7nbkethv] {
    margin: 0;
}

.account-files__loading[b-0h7nbkethv] {
    color: var(--text-secondary);
}

.account-files__notice[b-0h7nbkethv] {
    padding: var(--space-3);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
}

.account-files__notice h2[b-0h7nbkethv] {
    margin-top: 0;
}

.account-files__toolbar[b-0h7nbkethv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    max-width: 24rem;
}

.account-files__filter-label[b-0h7nbkethv] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-files__quota[b-0h7nbkethv] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
}

.account-files__quota-track[b-0h7nbkethv] {
    height: var(--space-1);
    border-radius: var(--radius-box);
    background: var(--paper-deep);
    border: thin solid var(--rule-hairline);
    overflow: hidden;
}

.account-files__quota-fill[b-0h7nbkethv] {
    height: 100%;
    border-radius: var(--radius-box);
    background: var(--brand-indigo);
    transition: width var(--motion-snap) var(--ease-standard);
}

.account-files__quota-text[b-0h7nbkethv] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.04em;
}

.account-files__empty[b-0h7nbkethv] {
    padding: var(--space-3);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    color: var(--text-secondary);
}

.account-files__group[b-0h7nbkethv] {
    padding: var(--space-3);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
}

.account-files__group-title[b-0h7nbkethv] {
    margin: 0 0 var(--space-2) 0;
    font-size: 1.1rem;
}

.account-files__group-title a[b-0h7nbkethv] {
    color: var(--text-primary);
    text-decoration: none;
    border-bottom: 1px solid var(--rule-hairline);
}

.account-files__group-title a:hover[b-0h7nbkethv],
.account-files__group-title a:focus-visible[b-0h7nbkethv] {
    border-bottom-color: var(--brand-indigo);
    color: var(--brand-indigo);
}

.account-files__table[b-0h7nbkethv] {
    width: 100%;
    border-collapse: collapse;
}

.account-files__caption[b-0h7nbkethv] {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

.account-files__table th[b-0h7nbkethv],
.account-files__cell[b-0h7nbkethv] {
    padding: var(--space-1) var(--space-2);
    text-align: left;
    border-bottom: 1px solid var(--rule-hairline);
}

/* Mono data labels on the column heads — editorial caption row. */
.account-files__table th[b-0h7nbkethv] {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.account-files__cell--name[b-0h7nbkethv] {
    font-weight: 500;
    max-width: 28ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-files__cell--actions[b-0h7nbkethv] {
    display: flex;
    gap: var(--space-1);
    flex-wrap: wrap;
    align-items: center;
}
/* _content/Schnatter.Web/Components/Pages/Admin/AuditLog.razor.rz.scp.css */
/* Scoped CSS for /admin/audit-log (S09 US1, S20 editorial conversion
   2026-06-12). Tokens only — Constitution V: no hex literals, no
   rgb/rgba/hsl. Plain-table convention is the recorded deviation
   (plan §Complexity): ink-hairline row rules, mono uppercase column
   captions, mono payloads/IDs/dates. Section plates come from the
   global .print-box primitive on the markup. */

/* Vertical page padding lives in AdminConsoleLayout's .admin-shell
   since the Nav-Refactor 2026-06-11; the page itself previously had
   NO admin-subnav — it gains the persistent rail via the layout. */
.audit-log-page[b-lxoh6spxug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.audit-log-page__header[b-lxoh6spxug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Editorial display head — condensed extrabold italic, indigo. */
.audit-log-page__header h1[b-lxoh6spxug] {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 0.96;
    color: var(--brand-indigo);
}

.audit-results[b-lxoh6spxug] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-x: auto;
}

.audit-loading[b-lxoh6spxug] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.empty-state[b-lxoh6spxug] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state p[b-lxoh6spxug] {
    margin: 0;
}

/* ---------- Table ---------- */

.audit-table[b-lxoh6spxug] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.audit-table__caption[b-lxoh6spxug] {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--space-3);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Mono data labels on the column heads — editorial caption row. */
.audit-table thead th[b-lxoh6spxug] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-indigo);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-hairline);
    white-space: nowrap;
}

.audit-row + .audit-row .audit-cell[b-lxoh6spxug] {
    border-top: thin solid var(--rule-hairline);
}

.audit-row:hover[b-lxoh6spxug] {
    background: var(--paper-deep);
}

/* Sentinel rows carry a lila edge stripe — decoration-only brand
   accent (cross-hue to the indigo captions). */
.audit-row--sentinel[b-lxoh6spxug] {
    box-shadow: inset 0.1875rem 0 0 0 var(--brand-lila);
}

.audit-cell[b-lxoh6spxug] {
    padding: var(--space-2) var(--space-3);
    vertical-align: top;
    line-height: 1.5;
}

.audit-cell--mono[b-lxoh6spxug],
.audit-cell--timestamp[b-lxoh6spxug] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.audit-cell__system[b-lxoh6spxug] {
    font-style: italic;
    color: var(--text-secondary);
}

.audit-cell--payload[b-lxoh6spxug] {
    max-width: 32rem;
}

/* ---------- Payload <details> ---------- */

.audit-payload[b-lxoh6spxug] {
    display: inline-block;
    margin: 0;
}

.audit-payload__summary[b-lxoh6spxug] {
    cursor: pointer;
    color: var(--brand-indigo);
    font-weight: 600;
    list-style: none;
}

.audit-payload__summary[b-lxoh6spxug]::-webkit-details-marker {
    display: none;
}

/* Recessed paper field for the expanded JSON payload — mono ink on
   paper-deep, ink hairline frame (light editorial, not a code slab). */
.audit-payload__pre[b-lxoh6spxug] {
    margin: var(--space-2) 0 0;
    padding: var(--space-3);
    background: var(--paper-deep);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 24rem;
    overflow: auto;
    color: var(--text-primary);
}

/* ---------- Pagination footer ---------- */

.audit-pager[b-lxoh6spxug] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: thin solid var(--rule-hairline);
}

.audit-pager__status[b-lxoh6spxug] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-align: center;
}

.audit-pager__btn[b-lxoh6spxug] {
    text-decoration: none;
}

.audit-pager__btn--disabled[b-lxoh6spxug] {
    opacity: 0.4;
    pointer-events: none;
}

/* ---------- Filter form (US2 / T933+) ---------- */

.audit-filter[b-lxoh6spxug] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mono uppercase section caption (indigo accent). */
.audit-filter__heading[b-lxoh6spxug] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}

.audit-filter__grid[b-lxoh6spxug] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.audit-filter__field[b-lxoh6spxug] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.audit-filter__field--range[b-lxoh6spxug] {
    /* Two datetime inputs share a column; labels stack above each. */
    gap: var(--space-2);
}

.audit-filter__field label[b-lxoh6spxug] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Editorial form fields — paper-card plates on a 1px ink frame. */
.audit-filter__field input[b-lxoh6spxug],
.audit-filter__field select[b-lxoh6spxug] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
}

.audit-filter__field select[multiple][b-lxoh6spxug] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.audit-filter__field input:focus-visible[b-lxoh6spxug],
.audit-filter__field select:focus-visible[b-lxoh6spxug] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.audit-filter__error[b-lxoh6spxug] {
    margin: 0;
    color: var(--color-signal-text);
    font-size: 0.8125rem;
    font-weight: 600;
}

.audit-filter__actions[b-lxoh6spxug] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.audit-filter__apply[b-lxoh6spxug] {
    /* Pin the primary CTA visually distinct via the established btn-pill. */
    font-weight: 700;
}

.audit-filter__reset[b-lxoh6spxug] {
    text-decoration: none;
}

/* ---------- CSV export (US3 / T943) ---------- */

.audit-filter__export[b-lxoh6spxug] {
    /* Visually grouped with the other pill controls; same token set. */
    text-decoration: none;
    font-weight: 700;
}

.audit-filter__csv-hint[b-lxoh6spxug] {
    /* Static label per orchestrator's choice (a) — see plan.md
       Complexity Tracking / US3 Truncation UX. Always rendered;
       documents the 10 000-row cap up-front so the admin sets
       narrower filters before triggering a truncated download. */
    flex-basis: 100%;
    color: var(--text-secondary);
    font-size: 0.8125rem;
    line-height: 1.5;
}

/* Tablet breakpoint per theme-tokens.md (1024 / 16 = 64em). */
@media (max-width: 64em) {
    .audit-results[b-lxoh6spxug] {
        padding: var(--space-4);
    }

    .audit-filter[b-lxoh6spxug] {
        padding: var(--space-4);
    }

    .audit-filter__grid[b-lxoh6spxug] {
        grid-template-columns: 1fr;
    }

    .audit-pager[b-lxoh6spxug] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Dashboard.razor.rz.scp.css */
/* Scoped CSS for /admin Dashboard (S10 T1033, S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V: no hex
   literals, no rgb/rgba/hsl. Light editorial console: print-box
   section plates (global primitive carries the paper-card ground +
   1px ink frame), metric tiles as framed paper cards with mono
   caption labels. */

/* Vertical page padding lives in AdminConsoleLayout's .admin-shell
   since the Nav-Refactor 2026-06-11. */
.admin-dashboard[b-14k41nja3f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-dashboard__header[b-14k41nja3f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Editorial display head — condensed extrabold italic, indigo. */
.admin-dashboard__header h1[b-14k41nja3f] {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 0.96;
    color: var(--brand-indigo);
}

/* ---------- Tile grid ---------- */

.admin-tiles[b-14k41nja3f] {
    padding: var(--space-5) var(--space-6);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4);
}

.tile[b-14k41nja3f] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-5);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    min-width: 0;
}

/* Mono data labels — editorial caption treatment. */
.tile__label[b-14k41nja3f] {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.tile__value[b-14k41nja3f] {
    color: var(--text-primary);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.admin-tiles__footer[b-14k41nja3f] {
    grid-column: 1 / -1;
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 600;
    text-align: right;
}

/* ---------- Recent activity section ---------- */

.admin-recent[b-14k41nja3f] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mono uppercase section caption (indigo accent — replaces the
   retired lila heading hue). */
.admin-recent h2[b-14k41nja3f] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}

/* ---------- Tablet breakpoint per theme-tokens.md ---------- */

@media (max-width: 64em) {
    .admin-tiles[b-14k41nja3f],
    .admin-recent[b-14k41nja3f] {
        padding: var(--space-4);
    }

    .admin-tiles[b-14k41nja3f] {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 40em) {
    .admin-tiles[b-14k41nja3f] {
        grid-template-columns: 1fr;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Layout/AdminConsoleLayout.razor.rz.scp.css */
/* Scoped CSS for the shared admin console shell (Nav-Refactor
   2026-06-11). Tokens only — Constitution V + SC-004 grep gate: no
   hex literals, no rgb/rgba, no px literals outside var(--...)
   references. Side rail left, console content right; collapses to
   a single column under the 64em tablet breakpoint, where
   AdminSideNav falls back to its horizontal strip. */

.admin-shell[b-or9ssp19ij] {
    display: grid;
    grid-template-columns: minmax(9rem, 12rem) minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    padding-block: var(--space-10) var(--space-12);
}

.admin-shell__content[b-or9ssp19ij] {
    min-width: 0;
}

@media (max-width: 64em) {
    .admin-shell[b-or9ssp19ij] {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-6);
        padding-block: var(--space-8) var(--space-10);
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Layout/AdminSideNav.razor.rz.scp.css */
/* Scoped CSS for the shared admin console navigation (Nav-Refactor
   2026-06-11, S20 editorial conversion 2026-06-12). Tokens only —
   Constitution V: no hex literals, no rgb/rgba/hsl. Vertical rail on
   wide viewports; falls back to a horizontal strip under the 64em
   tablet breakpoint (theme-tokens.md). Quiet ink links with an
   indigo left-accent reveal — same language as the /account rail. */

.admin-subnav[b-wenp7tq379] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    position: sticky;
    top: var(--space-10);
}

.admin-subnav__link[b-wenp7tq379] {
    color: var(--text-secondary);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border-inline-start: 0.125rem solid transparent;
}

.admin-subnav__link:hover[b-wenp7tq379],
.admin-subnav__link:focus-visible[b-wenp7tq379] {
    color: var(--text-primary);
    background: var(--paper-deep);
    outline: none;
}

.admin-subnav__link--current[b-wenp7tq379] {
    color: var(--brand-indigo);
    background: var(--paper-card);
    border-inline-start-color: var(--brand-indigo);
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ---------- Tablet breakpoint: horizontal strip ---------- */

@media (max-width: 64em) {
    .admin-subnav[b-wenp7tq379] {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-4);
        padding-bottom: var(--space-2);
        border-bottom: thin solid var(--rule-hairline);
    }

    .admin-subnav__link[b-wenp7tq379] {
        border-inline-start: none;
    }

    .admin-subnav__link--current[b-wenp7tq379] {
        background: transparent;
        border-radius: var(--radius-box);
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Layout/ImpersonationBanner.razor.rz.scp.css */
/* Scoped CSS for ImpersonationBanner (S10 T1093; S20 T036 — gelb
   caution-tape `.elevated-banner` skin per
   specs/020-ci-theme/contracts/design-tokens.md §2). Tokens only —
   Constitution V: no hex/rgb/hsl literals; every color is a var(--…)
   reference. R9: the elevated state rides the --elevated-* channel —
   gelb is GROUND ONLY, ink carries text + border (FR-016); visually
   distinct from .entwurf-banner / orange warning surfaces (FR-011). */

.elevated-banner[b-81vy8t7cxt] {
    position: sticky;
    top: 0;
    z-index: var(--z-modal, 100);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-sm) var(--space-md);
    background: var(--elevated-bg);
    color: var(--elevated-ink);
    border-top: 2px solid var(--elevated-border);
    border-bottom: 2px solid var(--elevated-border);
    box-shadow: var(--shadow-tape);
    flex-wrap: wrap;
}

/* Mono uppercase caution-tape label (contract §2 .elevated-banner). */
.impersonation-banner__label[b-81vy8t7cxt] {
    flex: 1 1 auto;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1.6;
    color: var(--elevated-ink);
}

/* End-button on the gelb tape: ink-outlined stamp treatment — NOT the
   orange danger/warning channel, so the elevated state stays a distinct
   signal (FR-011). Hover inverts to ink ground with paper text. */
.elevated-banner .btn-pill[b-81vy8t7cxt],
.elevated-banner .btn-pill--danger[b-81vy8t7cxt] {
    background: transparent;
    border: 1.5px solid var(--elevated-ink);
    color: var(--elevated-ink);
}

.elevated-banner .btn-pill:hover[b-81vy8t7cxt],
.elevated-banner .btn-pill--danger:hover[b-81vy8t7cxt] {
    background: var(--elevated-ink);
    border-color: var(--elevated-ink);
    color: var(--paper-card);
}

.elevated-banner .btn-pill[disabled][b-81vy8t7cxt] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 48em) {
    .elevated-banner[b-81vy8t7cxt] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Models/ModelAddModal.razor.rz.scp.css */
/* Scoped CSS for the S18 model add modal (T051; S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V. SC-003
   grep-gate: no hex literals, no rgb/rgba/hsl. Mirrors
   ModelEditModal.razor.css so the two catalog modals stay visually
   identical: print-box dialog plate, mono caption labels, signal-
   channel badges (FR-011). */

.model-add-modal-backdrop[b-o1cjuynosx] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.model-add-modal-dialog[b-o1cjuynosx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(40rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-strong);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.model-add-modal__heading[b-o1cjuynosx] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.model-add-modal__field[b-o1cjuynosx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.model-add-modal__field-row[b-o1cjuynosx] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.model-add-modal__field-row .model-add-modal__field[b-o1cjuynosx] {
    flex: 1 1 12rem;
}

.model-add-modal__field label[b-o1cjuynosx] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.model-add-modal__field input[b-o1cjuynosx],
.model-add-modal__field textarea[b-o1cjuynosx] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.model-add-modal__field input:focus-visible[b-o1cjuynosx],
.model-add-modal__field textarea:focus-visible[b-o1cjuynosx] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.model-add-modal__field textarea[b-o1cjuynosx] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    resize: vertical;
}

.model-add-modal__hint[b-o1cjuynosx] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* T6 / FR-021 — provider-info check affordance + inline result
   (mirrors ModelEditModal.razor.css). */
.model-add-modal__provider-check[b-o1cjuynosx] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
}

.model-add-modal__provider-info[b-o1cjuynosx] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--paper-deep);
}

/* Badge base — mirrors .model-edit-modal__badge (stamp-like chip;
   pill radius is chips-only per FR-004). */
.model-add-modal__badge[b-o1cjuynosx] {
    display: inline-block;
    align-self: flex-start;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule-hairline);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

/* Validity badge channels (theme-tokens § Signal colors). */
.model-add-modal__badge--provider-known[b-o1cjuynosx] {
    color: var(--ink);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.model-add-modal__badge--provider-unknown[b-o1cjuynosx] {
    color: var(--ink);
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.model-add-modal__badge--provider-unavailable[b-o1cjuynosx] {
    color: var(--color-signal-text);
    border-color: var(--color-error);
}

.model-add-modal__provider-details[b-o1cjuynosx] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: 0.8125rem;
}

.model-add-modal__provider-details dt[b-o1cjuynosx] {
    font-weight: 700;
    color: var(--text-secondary);
}

.model-add-modal__provider-details dd[b-o1cjuynosx] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

.model-add-modal__validation[b-o1cjuynosx] {
    margin: 0;
    color: var(--color-signal-text);
    font-weight: 600;
}

.model-add-modal__busy[b-o1cjuynosx] {
    margin: 0;
    color: var(--text-secondary);
}

.model-add-modal__actions[b-o1cjuynosx] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Admin sibling parity (TierSwitcherModal / Billing modals). */
.btn-pill[disabled][b-o1cjuynosx] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-o1cjuynosx] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .model-add-modal-dialog[b-o1cjuynosx] {
        padding: var(--space-4);
    }

    .model-add-modal__actions[b-o1cjuynosx] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Models/ModelEditModal.razor.rz.scp.css */
/* Scoped CSS for the S18 model edit modal (T037; S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V. SC-003
   grep-gate: no hex literals, no rgb/rgba/hsl. Mirrors the S10 admin
   modal visual language (TierSwitcherModal print-box plate) so admin
   surfaces stay coherent; signal-channel badges per FR-011. */

.model-edit-modal-backdrop[b-19ryfecx5y] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.model-edit-modal-dialog[b-19ryfecx5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(40rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-strong);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.model-edit-modal__heading[b-19ryfecx5y] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.model-edit-modal__slug[b-19ryfecx5y] {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.model-edit-modal__slug-hint[b-19ryfecx5y] {
    margin-inline-start: var(--space-2);
    font-family: var(--font-sans);
    font-size: 0.8125rem;
    color: var(--text-muted);
}

/* FR-001 badge (T062) — mirrors the ModelList badge language (stamp-
   like chip; pill radius is chips-only per FR-004). */
.model-edit-modal__badge[b-19ryfecx5y] {
    display: inline-block;
    padding: 0 var(--space-2);
    margin-inline-start: var(--space-2);
    border-radius: var(--radius-pill);
    border: 1px solid var(--rule-hairline);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

.model-edit-modal__badge--default[b-19ryfecx5y] {
    color: var(--text-secondary);
}

/* Success channel — mirrors .model-badge--customized in the list
   (theme-tokens § Signal colors: ink text on the tinted wash). */
.model-edit-modal__badge--customized[b-19ryfecx5y] {
    color: var(--ink);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

/* US3 reset affordance (T062). */
.model-edit-modal__reset[b-19ryfecx5y] {
    align-self: flex-start;
    margin-block-start: var(--space-2);
}

/* T6 / FR-021 — provider-info check affordance + inline result. */
.model-edit-modal__provider-check[b-19ryfecx5y] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
}

.model-edit-modal__provider-info[b-19ryfecx5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-block-start: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--paper-deep);
}

.model-edit-modal__provider-info .model-edit-modal__badge[b-19ryfecx5y] {
    align-self: flex-start;
    margin-inline-start: 0;
}

/* Validity badge channels (theme-tokens § Signal colors). */
.model-edit-modal__badge--provider-known[b-19ryfecx5y] {
    color: var(--ink);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
}

.model-edit-modal__badge--provider-unknown[b-19ryfecx5y] {
    color: var(--ink);
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}

.model-edit-modal__badge--provider-unavailable[b-19ryfecx5y] {
    color: var(--color-signal-text);
    border-color: var(--color-error);
}

.model-edit-modal__provider-details[b-19ryfecx5y] {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--space-1) var(--space-3);
    margin: 0;
    font-size: 0.8125rem;
}

.model-edit-modal__provider-details dt[b-19ryfecx5y] {
    font-weight: 700;
    color: var(--text-secondary);
}

.model-edit-modal__provider-details dd[b-19ryfecx5y] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    overflow-wrap: anywhere;
}

/* FR-012 conflict callout — warning print-box (theme-tokens § Signal
   colors): orange signal frame on the tinted wash, ink text for
   legibility on light ground (FR-016). */
.model-edit-modal__conflict[b-19ryfecx5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--color-warning-border);
    background: var(--color-warning-bg);
    color: var(--ink);
}

.model-edit-modal__conflict p[b-19ryfecx5y] {
    margin: 0;
}

.model-edit-modal__field[b-19ryfecx5y] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.model-edit-modal__field-row[b-19ryfecx5y] {
    display: flex;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.model-edit-modal__field-row .model-edit-modal__field[b-19ryfecx5y] {
    flex: 1 1 12rem;
}

.model-edit-modal__field label[b-19ryfecx5y] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.model-edit-modal__field input[b-19ryfecx5y],
.model-edit-modal__field textarea[b-19ryfecx5y] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.model-edit-modal__field input:focus-visible[b-19ryfecx5y],
.model-edit-modal__field textarea:focus-visible[b-19ryfecx5y] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.model-edit-modal__field textarea[b-19ryfecx5y] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    resize: vertical;
}

.model-edit-modal__hint[b-19ryfecx5y] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.model-edit-modal__validation[b-19ryfecx5y] {
    margin: 0;
    color: var(--color-signal-text);
    font-weight: 600;
}

.model-edit-modal__busy[b-19ryfecx5y] {
    margin: 0;
    color: var(--text-secondary);
}

.model-edit-modal__error[b-19ryfecx5y] {
    margin: 0;
    color: var(--color-signal-text);
    font-weight: 600;
}

.model-edit-modal__actions[b-19ryfecx5y] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Admin sibling parity (TierSwitcherModal / Billing modals). */
.btn-pill[disabled][b-19ryfecx5y] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-19ryfecx5y] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .model-edit-modal-dialog[b-19ryfecx5y] {
        padding: var(--space-4);
    }

    .model-edit-modal__actions[b-19ryfecx5y] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Models/ModelList.razor.rz.scp.css */
/* Scoped CSS for /admin/models (S18 T025, S20 editorial conversion
   2026-06-12). Tokens only — Constitution V: no hex literals, no
   rgb/rgba/hsl. Mirrors the S10 UserList.razor.css visual language
   so the admin surfaces stay coherent: plain table with ink-hairline
   row rules + mono uppercase column captions; the results plate is
   the global .print-box primitive on the markup. */

/* Vertical page padding lives in AdminConsoleLayout's .admin-shell
   since the Nav-Refactor 2026-06-11. */
.admin-model-list[b-5yah2q9o9l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-model-list__header[b-5yah2q9o9l] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Editorial display head — condensed extrabold italic, indigo. */
.admin-model-list__header h1[b-5yah2q9o9l] {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 0.96;
    color: var(--brand-indigo);
}

/* The header is a column flexbox (align-items defaults to stretch),
   which would pull the CTA to full width — keep the pill hugging its
   label instead, with a little breathing room under the h1. */
.model-add-open[b-5yah2q9o9l] {
    align-self: flex-start;
    margin-block-start: var(--space-2);
}

/* ---------- Results card ---------- */

.model-results[b-5yah2q9o9l] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-x: auto;
}

.model-loading[b-5yah2q9o9l] {
    margin: 0;
    color: var(--text-secondary);
}

.empty-state[b-5yah2q9o9l] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    color: var(--text-secondary);
}

.empty-state p[b-5yah2q9o9l] {
    margin: 0;
}

/* ---------- Catalog table ---------- */

.model-table[b-5yah2q9o9l] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.model-table__caption[b-5yah2q9o9l] {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--space-3);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Mono data labels on the column heads — editorial caption row. */
.model-table thead th[b-5yah2q9o9l] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-indigo);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-hairline);
    white-space: nowrap;
}

.model-row + .model-row .model-cell[b-5yah2q9o9l] {
    border-top: thin solid var(--rule-hairline);
}

.model-row:hover[b-5yah2q9o9l] {
    background: var(--paper-deep);
}

.model-cell[b-5yah2q9o9l] {
    padding: var(--space-2) var(--space-3);
    vertical-align: top;
    line-height: 1.5;
}

.model-cell--mono[b-5yah2q9o9l] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

/* ---------- Badges (FR-001) — pill radius is chips-only, allowed ---- */

.model-badge[b-5yah2q9o9l] {
    display: inline-block;
    padding: 0 var(--space-2);
    margin-inline-start: var(--space-2);
    border-radius: var(--radius-pill);
    border: thin solid var(--rule-hairline);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1.6;
    white-space: nowrap;
}

/* Quiet neutral — "built-in prompt governs", nothing notable. */
.model-badge--default[b-5yah2q9o9l] {
    color: var(--text-secondary);
    margin-inline-start: 0;
}

/* Positive cue — an admin override is active (success channel).
   Label is ink (P17/FR-016): the success colour on its own tint measured
   1.50:1. The tint + border still carry the channel, and the badge's
   German word carries the meaning. */
.model-badge--customized[b-5yah2q9o9l] {
    color: var(--ink);
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    margin-inline-start: 0;
}

/* Warning channel — soft-retired model (orange signal, FR-011).
   Ink label for the same reason as --customized (2.57:1 before). */
.model-badge--disabled[b-5yah2q9o9l] {
    color: var(--ink);
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    margin-inline-start: 0;
}

/* Designated default model — informational indigo channel. */
.model-badge--standard[b-5yah2q9o9l] {
    color: var(--color-info);
    background: var(--color-info-bg);
    border-color: var(--color-info-border);
}

.model-status[b-5yah2q9o9l] {
    color: var(--text-secondary);
}

/* ---------- Per-row actions (US1, T038 / US2, T053) ---------- */

/* All three row affordances share the compact pill sizing so the
   table rows stay one line tall (Edit-only rows previously sat next
   to full-height Disable/Enable pills). The reduced padding-inline
   keeps Edit + Disable/Enable side by side within the Aktionen
   column now that the global .btn-pill base ships its full
   --space-5 inline padding. */
.model-edit-open[b-5yah2q9o9l],
.model-disable[b-5yah2q9o9l],
.model-enable[b-5yah2q9o9l] {
    font-size: 0.8125rem;
    padding-block: var(--space-1);
    padding-inline: var(--space-3);
    white-space: nowrap;
}

.model-disable[b-5yah2q9o9l],
.model-enable[b-5yah2q9o9l] {
    margin-inline-start: var(--space-2);
}

/* The Aktionen cell (last column) must never wrap its two pills onto
   a second line — nowrap lets the auto table layout grant the column
   whatever width the widest label pair (Bearbeiten + Deaktivieren)
   actually needs. */
.model-table td:last-child[b-5yah2q9o9l] {
    white-space: nowrap;
}

/* Disabled-while-mutating + keyboard focus (admin sibling parity:
   TierSwitcherModal [disabled] rule, UserList focus-visible ring). */
.btn-pill[disabled][b-5yah2q9o9l] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-5yah2q9o9l] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* Tablet breakpoint per theme-tokens.md (1024 / 16 = 64em). */
@media (max-width: 64em) {
    .model-results[b-5yah2q9o9l] {
        padding: var(--space-4);
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Registration/InviteCreateModal.razor.rz.scp.css */
/* Scoped CSS for the S21 invite create modal (T042). Tokens only —
   Constitution V. Mirrors ModelAddModal.razor.css so the admin modals
   stay visually coherent: print-box dialog plate, mono caption labels. */

.invite-create-modal-backdrop[b-kfzba6wbq6] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.invite-create-modal-dialog[b-kfzba6wbq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(36rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-strong);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.invite-create-modal__heading[b-kfzba6wbq6] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.invite-create-modal__field[b-kfzba6wbq6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.invite-create-modal__field label[b-kfzba6wbq6] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.invite-create-modal__field input[b-kfzba6wbq6] {
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.invite-create-modal__field input:focus-visible[b-kfzba6wbq6] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.invite-create-modal__link[b-kfzba6wbq6] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

.invite-create-modal__hint[b-kfzba6wbq6] {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.invite-create-modal__result-hint[b-kfzba6wbq6] {
    margin: 0;
    color: var(--text-secondary);
}

.invite-create-modal__validation[b-kfzba6wbq6] {
    margin: 0;
    color: var(--color-signal-text);
    font-weight: 600;
}

.invite-create-modal__busy[b-kfzba6wbq6] {
    margin: 0;
    color: var(--text-secondary);
}

.invite-create-modal__actions[b-kfzba6wbq6] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.btn-pill[disabled][b-kfzba6wbq6] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-kfzba6wbq6] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .invite-create-modal-dialog[b-kfzba6wbq6] {
        padding: var(--space-4);
    }

    .invite-create-modal__actions[b-kfzba6wbq6] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Registration/RegistrationAdmin.razor.rz.scp.css */
.admin-registration__header[b-5m4kygsjka] {
    margin-bottom: 1.5rem;
}

.registration-gate-card[b-5m4kygsjka] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
}

.registration-gate-card__status[b-5m4kygsjka] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.registration-gate-card__label[b-5m4kygsjka] {
    font-weight: 600;
    color: var(--ink);
}

/*
    Gate status badge. S21 shipped this against an invented token
    namespace (--brand-accent / --elevated-soft / --ink-muted) that
    theme.css never declared, so the var() fallbacks — a green, an
    ochre and a grey — were what actually painted. They are now mapped
    onto the real S20 signal channels.

    Treatment follows the P17 rule (FR-016, "ink text on signal tints")
    and mirrors the admin badge language in ModelEditModal: the tint
    carries the channel as a ground, the signal colour is carried by
    the 1px frame, and the LABEL is ink so it stays legible. A
    like-for-like swap (signal colour as text on its own tint) is the
    exact failure P17 measured at 3.12:1 — worse still here, where
    --color-success is the bright tuerkis. The two states are also
    distinguished by their German text ("Geöffnet" / "Geschlossen"),
    so the badge never relies on colour alone.

    Pill radius is legitimate for chips (FR-004 — content boxes stay
    square); it now names the existing --radius-pill token.
*/
.registration-gate-card__badge[b-5m4kygsjka] {
    display: inline-flex;
    align-items: center;
    padding: 0.15rem 0.6rem;
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-pill);
    font-size: 0.85rem;
    font-weight: 600;
}

/* Success channel — public registration is available. */
.registration-gate-card__badge--open[b-5m4kygsjka] {
    background: var(--color-success-bg);
    border-color: var(--color-success-border);
    color: var(--ink);
}

/*
    Warning channel — registration is deliberately switched off. This is
    the same "intentionally inactive" role as .model-badge--disabled.
    NOT the --elevated-* family: those tokens are reserved for the S10
    impersonation caution-tape, which is a different state entirely.
*/
.registration-gate-card__badge--closed[b-5m4kygsjka] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--ink);
}

.registration-gate-card__hint[b-5m4kygsjka] {
    margin: 0;
    color: var(--text-muted);
}

.registration-gate-toggle[b-5m4kygsjka] {
    align-self: flex-start;
}

/*
    S21 browser-review fix (#3) — keep the invitations table inside its
    card on narrow viewports. Previously the "Aktionen"/Widerrufen column
    spilled past the card's right edge off-screen (no inner scroll). Now
    the table holds its column widths and the container scrolls
    horizontally instead of overflowing the page.
*/
.invite-results[b-5m4kygsjka] {
    overflow-x: auto;
}

.invite-table[b-5m4kygsjka] {
    width: 100%;
    min-width: 38rem;
    border-collapse: collapse;
}

/*
    Empty / error placeholder inside the .print-box plate. Matches the
    shared admin convention (AuditLog/UserList/ModelList): padded body so
    the text is not flush against the card's border, centered and muted.
    Previously undefined here, so "Keine Einladungen vorhanden." rendered
    with 0 horizontal padding (flush left).
*/
.empty-state[b-5m4kygsjka] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
}

.empty-state p[b-5m4kygsjka] {
    margin: 0;
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/Billing/BillingConfirmationModal.razor.rz.scp.css */
/* Scoped CSS for BillingConfirmationModal (S11 T1134; S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V. SC-003
   grep-gate: no hex literals, no rgb/rgba/hsl. Mirrors the
   TierSwitcherModal print-box plate so the modal blends with the
   surrounding admin cascade. */

.billing-confirmation-modal-backdrop[b-1wtcl27yil] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.billing-confirmation-modal-dialog[b-1wtcl27yil] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}

.billing-confirmation-modal__heading[b-1wtcl27yil] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.billing-confirmation-modal__body[b-1wtcl27yil] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.billing-confirmation-modal__field[b-1wtcl27yil] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.billing-confirmation-modal__field label[b-1wtcl27yil] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.billing-confirmation-modal__field select[b-1wtcl27yil],
.billing-confirmation-modal__field input[b-1wtcl27yil],
.billing-confirmation-modal__field textarea[b-1wtcl27yil] {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    padding: var(--space-2) var(--space-3);
    font-size: 0.9375rem;
    font-family: inherit;
}

.billing-confirmation-modal__field select:focus-visible[b-1wtcl27yil],
.billing-confirmation-modal__field input:focus-visible[b-1wtcl27yil],
.billing-confirmation-modal__field textarea:focus-visible[b-1wtcl27yil] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.billing-confirmation-modal__field textarea[b-1wtcl27yil] {
    resize: vertical;
    min-height: 4rem;
}

.billing-confirmation-modal__busy[b-1wtcl27yil] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.billing-confirmation-modal__error[b-1wtcl27yil] {
    margin: 0;
    color: var(--color-signal-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.billing-confirmation-modal__actions[b-1wtcl27yil] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-1wtcl27yil] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-1wtcl27yil] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .billing-confirmation-modal-dialog[b-1wtcl27yil] {
        padding: var(--space-4);
    }

    .billing-confirmation-modal__actions[b-1wtcl27yil] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/Billing/BillingHistoryModal.razor.rz.scp.css */
/* Scoped CSS for BillingHistoryModal (S11 T1147; S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V. SC-003
   grep-gate: no hex literals, no rgb/rgba/hsl. Print-box dialog plate;
   the history table stays a plain table (recorded Constitution-V
   deviation) with ink-hairline row rules, mono uppercase headers and
   mono amounts/dates. */

.billing-history-modal-backdrop[b-zsj8amk6i4] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.billing-history-modal-dialog[b-zsj8amk6i4] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 64rem;
    width: 100%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.billing-history-modal__heading[b-zsj8amk6i4] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.billing-history-modal__busy[b-zsj8amk6i4],
.billing-history-modal__empty[b-zsj8amk6i4] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.billing-history-modal__table-wrapper[b-zsj8amk6i4] {
    overflow-y: auto;
    overflow-x: auto;
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    max-height: 60vh;
}

.billing-history-modal__table[b-zsj8amk6i4] {
    width: 100%;
    border-collapse: collapse;
    color: var(--text-primary);
    font-size: 0.875rem;
}

/* Mono uppercase column headers — editorial caption treatment. */
.billing-history-modal__table thead th[b-zsj8amk6i4] {
    background: var(--paper-card);
    color: var(--ink);
    text-align: left;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule-strong);
    position: sticky;
    top: 0;
    z-index: 1;
}

.billing-history-modal__cell[b-zsj8amk6i4] {
    padding: var(--space-2) var(--space-3);
    border-bottom: thin solid var(--rule-hairline);
    vertical-align: top;
}

/* Amounts / dates / references — mono data treatment. */
.billing-history-modal__cell--mono[b-zsj8amk6i4] {
    font-family: var(--font-mono);
}

.billing-history-modal__pager[b-zsj8amk6i4] {
    display: flex;
    gap: var(--space-3);
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.billing-history-modal__pager-status[b-zsj8amk6i4] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.05em;
}

.billing-history-modal__actions[b-zsj8amk6i4] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-zsj8amk6i4] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-zsj8amk6i4] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .billing-history-modal-dialog[b-zsj8amk6i4] {
        padding: var(--space-4);
    }

    .billing-history-modal__pager[b-zsj8amk6i4],
    .billing-history-modal__actions[b-zsj8amk6i4] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/Billing/BillingSection.razor.rz.scp.css */
/* Scoped CSS for BillingSection (S11 T1126; S20 editorial conversion
   2026-06-12). Tokens only — Constitution V. SC-003 grep-gate: no hex
   literals, no rgb/rgba/hsl. The section is a .print-box plate
   (retired translucent chrome removed); mono data labels + mono
   amounts/dates per the editorial data-grid convention so the card
   blends with the surrounding UserDetail cascade. */

.billing-section[b-fflt291m79] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding: var(--space-5) var(--space-6);
}

.billing-section h2[b-fflt291m79] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.billing-section__dl[b-fflt291m79] {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
}

/* Mono uppercase data labels — editorial caption treatment. */
.billing-section__dl dt[b-fflt291m79] {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Mono values (plan / date / invoice reference are data). */
.billing-section__dl dd[b-fflt291m79] {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
    word-break: break-word;
}

.billing-section__empty[b-fflt291m79] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.billing-section__actions[b-fflt291m79] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

@media (max-width: 48em) {
    .billing-section__dl[b-fflt291m79] {
        grid-template-columns: 1fr;
        row-gap: var(--space-1);
    }

    .billing-section__dl dd[b-fflt291m79] {
        margin-bottom: var(--space-2);
    }

    .billing-section__actions[b-fflt291m79] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/GdprDeleteModal.razor.rz.scp.css */
/* Scoped CSS for GdprDeleteModal (S10 T1082; S20 editorial conversion
   2026-06-12). Tokens only — Constitution V. SC-003 grep-gate: no hex
   literals, no rgb/rgba/hsl. Print-box dialog plate with the group-H
   fold-in (R9): the irreversible-delete context carries a gelb
   caution-tape edge via the --elevated-* tokens (gelb is ground-only,
   never text — FR-016) and the destructive outline rides the orange
   signal channel (FR-009/FR-011); the retired accent hue is gone. */

.gdpr-delete-modal-backdrop[b-nqmkoe6sp3] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.gdpr-delete-modal-dialog[b-nqmkoe6sp3] {
    background: var(--paper-card);
    border: 1px solid var(--elevated-border);
    /* gelb caution-tape edge — elevated destructive context (R9) */
    border-top: 0.375rem solid var(--elevated-bg);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}

.gdpr-delete-modal__heading[b-nqmkoe6sp3] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.gdpr-delete-modal__warning[b-nqmkoe6sp3] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.gdpr-delete-modal__label[b-nqmkoe6sp3] {
    margin: 0;
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gdpr-delete-modal__input[b-nqmkoe6sp3] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9375rem;
    font-family: inherit;
}

/* Destructive confirm input — orange signal outline (FR-009, R9). */
.gdpr-delete-modal__input:focus[b-nqmkoe6sp3],
.gdpr-delete-modal__input:focus-visible[b-nqmkoe6sp3] {
    outline: 0.125rem solid var(--color-error);
    outline-offset: 0.125rem;
    border-color: var(--color-error);
}

.gdpr-delete-modal__error[b-nqmkoe6sp3] {
    margin: 0;
    color: var(--color-signal-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.gdpr-delete-modal__busy[b-nqmkoe6sp3] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gdpr-delete-modal__actions[b-nqmkoe6sp3] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Irreversible action — orange signal treatment, filled on hover
   (brand-pill --danger contract). */
.gdpr-delete-modal__danger[b-nqmkoe6sp3] {
    border-color: var(--color-error);
    color: var(--color-signal-text);
}

/* Ink on the filled signal, matching .brand-pill--danger:hover in
   theme.css. The light paper label this rule used to carry measured
   3.80:1 on the error fill; ink measures 5.06:1 (P15). */
.gdpr-delete-modal__danger:hover:not([disabled])[b-nqmkoe6sp3] {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--ink);
}

.btn-pill[disabled][b-nqmkoe6sp3] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-nqmkoe6sp3] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .gdpr-delete-modal-dialog[b-nqmkoe6sp3] {
        padding: var(--space-4);
    }

    .gdpr-delete-modal__actions[b-nqmkoe6sp3] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/GdprExportModal.razor.rz.scp.css */
/* Scoped CSS for GdprExportModal (S10 T1081; S20 editorial conversion
   2026-06-12). Tokens only — Constitution V. SC-003 grep-gate: no hex
   literals, no rgb/rgba/hsl. Mirrors the QuotaResetModal print-box
   plate for visual consistency. */

.gdpr-export-modal-backdrop[b-vw5io6q5kk] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.gdpr-export-modal-dialog[b-vw5io6q5kk] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}

.gdpr-export-modal__heading[b-vw5io6q5kk] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.gdpr-export-modal__body[b-vw5io6q5kk] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.gdpr-export-modal__busy[b-vw5io6q5kk] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.gdpr-export-modal__actions[b-vw5io6q5kk] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-vw5io6q5kk] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-vw5io6q5kk] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .gdpr-export-modal-dialog[b-vw5io6q5kk] {
        padding: var(--space-4);
    }

    .gdpr-export-modal__actions[b-vw5io6q5kk] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/ImpersonationStartModal.razor.rz.scp.css */
/* Scoped CSS for ImpersonationStartModal (S10 T1094; S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V. SC-003
   grep-gate: no hex literals, no rgb/rgba/hsl. Mirrors the
   TierSwitcherModal + QuotaResetModal print-box plate for visual
   consistency; errors ride the orange signal channel (FR-011). */

.impersonation-start-modal-backdrop[b-xv6lxo5dz6] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.impersonation-start-modal-dialog[b-xv6lxo5dz6] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    box-shadow: var(--shadow-md);
}

.impersonation-start-modal__heading[b-xv6lxo5dz6] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.impersonation-start-modal__body[b-xv6lxo5dz6] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.impersonation-start-modal__label[b-xv6lxo5dz6] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.impersonation-start-modal__input[b-xv6lxo5dz6] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font-size: 0.9375rem;
    width: 100%;
}

.impersonation-start-modal__input:focus[b-xv6lxo5dz6],
.impersonation-start-modal__input:focus-visible[b-xv6lxo5dz6] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.impersonation-start-modal__error[b-xv6lxo5dz6] {
    margin: 0;
    color: var(--color-signal-text);
    font-size: 0.875rem;
    font-weight: 600;
}

.impersonation-start-modal__busy[b-xv6lxo5dz6] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.impersonation-start-modal__actions[b-xv6lxo5dz6] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-xv6lxo5dz6] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-xv6lxo5dz6] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .impersonation-start-modal-dialog[b-xv6lxo5dz6] {
        padding: var(--space-4);
    }

    .impersonation-start-modal__actions[b-xv6lxo5dz6] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/QuotaResetModal.razor.rz.scp.css */
/* Scoped CSS for QuotaResetModal (S10 T1071; S20 editorial conversion
   2026-06-12). Tokens only — Constitution V. SC-003 grep-gate: no hex
   literals, no rgb/rgba/hsl. Mirrors the TierSwitcherModal print-box
   plate for visual consistency. */

.quota-reset-modal-backdrop[b-3chgybm1as] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.quota-reset-modal-dialog[b-3chgybm1as] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}

.quota-reset-modal__heading[b-3chgybm1as] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.quota-reset-modal__body[b-3chgybm1as] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.quota-reset-modal__busy[b-3chgybm1as] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.quota-reset-modal__actions[b-3chgybm1as] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-3chgybm1as] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-3chgybm1as] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .quota-reset-modal-dialog[b-3chgybm1as] {
        padding: var(--space-4);
    }

    .quota-reset-modal__actions[b-3chgybm1as] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/RecentActivityWidget.razor.rz.scp.css */
/* Scoped CSS for the Recent-Activity widget (S10 T1031, S20
   editorial conversion 2026-06-12). Tokens only — Constitution V.
   Reused by both /admin (Dashboard) and /admin/users/{id}
   (UserDetail). Mirrors the audit-log table look: plain table with
   ink-hairline row rules + mono uppercase column captions, so
   admins find the visual language familiar across the surfaces. */

.recent-activity[b-8udnummaz3] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    overflow-x: auto;
}

.recent-activity__loading[b-8udnummaz3],
.recent-activity__empty[b-8udnummaz3] {
    margin: 0;
    color: var(--text-secondary);
    padding: var(--space-4);
    text-align: center;
}

.recent-activity__table[b-8udnummaz3] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

/* Mono data labels on the column heads — editorial caption row. */
.recent-activity__table thead th[b-8udnummaz3] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-indigo);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-hairline);
    white-space: nowrap;
}

.recent-activity__row + .recent-activity__row .recent-activity__cell[b-8udnummaz3] {
    border-top: thin solid var(--rule-hairline);
}

.recent-activity__row:hover[b-8udnummaz3] {
    background: var(--paper-deep);
}

.recent-activity__cell[b-8udnummaz3] {
    padding: var(--space-2) var(--space-3);
    vertical-align: top;
    line-height: 1.5;
}

.recent-activity__cell--timestamp[b-8udnummaz3],
.recent-activity__cell--action[b-8udnummaz3] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.recent-activity__system[b-8udnummaz3] {
    font-style: italic;
    color: var(--text-secondary);
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/TierSwitcherModal.razor.rz.scp.css */
/* Scoped CSS for TierSwitcherModal (S10 T1057; S20 editorial conversion
   2026-06-12). Tokens only — Constitution V. SC-003 grep-gate: no hex
   literals, no rgb/rgba/hsl. Print-box dialog plate on the ink scrim
   (contracts/design-tokens.md §2). */

.tier-switcher-modal-backdrop[b-wa2r1197v8] {
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    z-index: var(--z-modal);
}

.tier-switcher-modal-dialog[b-wa2r1197v8] {
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    padding: var(--space-6);
    max-width: 32rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    box-shadow: var(--shadow-md);
}

.tier-switcher-modal__heading[b-wa2r1197v8] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.125rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.tier-switcher-modal__body[b-wa2r1197v8] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
    line-height: 1.5;
}

.tier-switcher-modal__busy[b-wa2r1197v8] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}

.tier-switcher-modal__actions[b-wa2r1197v8] {
    display: flex;
    gap: var(--space-3);
    justify-content: flex-end;
    flex-wrap: wrap;
}

.btn-pill[disabled][b-wa2r1197v8] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-wa2r1197v8] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .tier-switcher-modal-dialog[b-wa2r1197v8] {
        padding: var(--space-4);
    }

    .tier-switcher-modal__actions[b-wa2r1197v8] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/UserDetail.razor.rz.scp.css */
/* Scoped CSS for /admin/users/{id} (S10 T1056, S20 editorial
   conversion 2026-06-12). Tokens only — Constitution V: no hex
   literals, no rgb/rgba/hsl. Mirrors the UserList.razor.css visual
   language so admins find a consistent experience across the two
   surfaces. Section plates via the global .print-box primitive;
   destructive actions in the orange signal treatment (FR-009);
   the impersonation card carries the gelb elevated accent
   (group-H fold-in per dispatch rule 2, R9). */

/* Vertical page padding lives in AdminConsoleLayout's .admin-shell
   since the Nav-Refactor 2026-06-11. */
.admin-user-detail[b-o7caj6w8ui] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-user-detail__header[b-o7caj6w8ui] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Editorial display head — condensed extrabold italic, indigo. */
.admin-user-detail__header h1[b-o7caj6w8ui] {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 0.96;
    color: var(--brand-indigo);
    word-break: break-word;
}

.admin-user-detail__header .display-name[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.back-link[b-o7caj6w8ui] {
    color: var(--brand-indigo);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 600;
}

.back-link:hover[b-o7caj6w8ui],
.back-link:focus-visible[b-o7caj6w8ui] {
    text-decoration: underline;
}

.admin-user-detail__loading[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-secondary);
}

/* -------------------- 404 surface -------------------- */

.admin-user-detail__404[b-o7caj6w8ui] {
    padding: var(--space-6) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    align-items: flex-start;
}

.admin-user-detail__404 h2[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-primary);
    font-size: 1.25rem;
}

.admin-user-detail__404 p[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-secondary);
}

/* -------------------- Shared section card -------------------- */

.profile-card[b-o7caj6w8ui],
.tier-card[b-o7caj6w8ui],
.quota-card[b-o7caj6w8ui],
.weekly-card[b-o7caj6w8ui],
.gdpr-card[b-o7caj6w8ui],
.impersonation-card[b-o7caj6w8ui],
.activity-card[b-o7caj6w8ui] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mono uppercase section captions (indigo accent — replaces the
   retired lila heading hue). */
.profile-card h2[b-o7caj6w8ui],
.tier-card h2[b-o7caj6w8ui],
.quota-card h2[b-o7caj6w8ui],
.weekly-card h2[b-o7caj6w8ui],
.gdpr-card h2[b-o7caj6w8ui],
.impersonation-card h2[b-o7caj6w8ui],
.activity-card h2[b-o7caj6w8ui] {
    margin: 0;
    color: var(--brand-indigo);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* -------------------- Profile -------------------- */

.profile-card__dl[b-o7caj6w8ui] {
    display: grid;
    grid-template-columns: minmax(10rem, max-content) 1fr;
    column-gap: var(--space-4);
    row-gap: var(--space-2);
    margin: 0;
}

.profile-card__dl dt[b-o7caj6w8ui] {
    color: var(--text-secondary);
    font-weight: 600;
    font-size: 0.875rem;
}

.profile-card__dl dd[b-o7caj6w8ui] {
    color: var(--text-primary);
    margin: 0;
    font-size: 0.9375rem;
    word-break: break-word;
}

.profile-card__dl dd code[b-o7caj6w8ui] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
}

/* -------------------- Tier -------------------- */

.tier-card__current[b-o7caj6w8ui],
.tier-card__limits[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.tier-card__limits[b-o7caj6w8ui] {
    color: var(--text-secondary);
}

.tier-switcher[b-o7caj6w8ui] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.tier-switcher label[b-o7caj6w8ui] {
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 600;
}

/* Editorial form field — paper-card plate on a 1px ink frame. */
.tier-switcher select[b-o7caj6w8ui] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
}

.tier-switcher select:focus-visible[b-o7caj6w8ui] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* -------------------- Quota snapshot -------------------- */

.quota-card__snapshot[b-o7caj6w8ui] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    gap: var(--space-3);
}

.quota-card__snapshot li[b-o7caj6w8ui] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Mono data labels — editorial caption treatment. */
.quota-card__label[b-o7caj6w8ui] {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.quota-card__value[b-o7caj6w8ui] {
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: 1rem;
}

.quota-actions[b-o7caj6w8ui] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* -------------------- Weekly history -------------------- */

.quota-history[b-o7caj6w8ui] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.quota-history li[b-o7caj6w8ui] {
    display: flex;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-bottom: thin solid var(--rule-hairline);
    color: var(--text-primary);
    font-size: 0.9375rem;
}

.quota-history__date[b-o7caj6w8ui] {
    color: var(--text-secondary);
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.quota-history__used[b-o7caj6w8ui] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

/* -------------------- GDPR + Impersonation cards -------------------- */

.gdpr-card__hint[b-o7caj6w8ui],
.impersonation-card__hint[b-o7caj6w8ui] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9375rem;
}

.gdpr-card__actions[b-o7caj6w8ui] {
    display: flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* Elevated-capability accent (group-H fold-in, R9): the card that
   launches an impersonation carries the gelb caution-tape edge.
   Gelb is ground-only — never a text color on light grounds
   (FR-016); the label/text stay --elevated-ink. */
.impersonation-card[b-o7caj6w8ui] {
    border-color: var(--elevated-border);
    border-top: 0.375rem solid var(--elevated-bg);
}

.impersonation-card h2[b-o7caj6w8ui] {
    color: var(--elevated-ink);
}

.btn-pill[disabled][b-o7caj6w8ui] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

/* Destructive actions — orange signal treatment (FR-009/FR-011):
   outline button in the darkened signal orange, filled on hover. */
.btn-pill--danger[b-o7caj6w8ui] {
    background: transparent;
    border-color: var(--color-error);
    color: var(--color-signal-text);
}

/* Ink on the filled signal, matching .brand-pill--danger:hover in
   theme.css. The light paper label this rule used to carry measured
   3.80:1 on the error fill; ink measures 5.06:1 (P15). */
.btn-pill--danger:hover[b-o7caj6w8ui] {
    background: var(--color-error);
    border-color: var(--color-error);
    color: var(--ink);
}

/* -------------------- Tablet breakpoint -------------------- */

@media (max-width: 64em) {
    .profile-card[b-o7caj6w8ui],
    .tier-card[b-o7caj6w8ui],
    .quota-card[b-o7caj6w8ui],
    .weekly-card[b-o7caj6w8ui],
    .gdpr-card[b-o7caj6w8ui],
    .impersonation-card[b-o7caj6w8ui],
    .activity-card[b-o7caj6w8ui] {
        padding: var(--space-4);
    }

    .profile-card__dl[b-o7caj6w8ui] {
        grid-template-columns: 1fr;
    }

    .tier-switcher[b-o7caj6w8ui] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/Users/UserList.razor.rz.scp.css */
/* Scoped CSS for /admin/users (S10 T1044, S20 editorial conversion
   2026-06-12). Tokens only — Constitution V: no hex literals, no
   rgb/rgba/hsl. Mirrors the S09 AuditLog.razor.css look so admins
   find the visual language familiar across the two admin surfaces:
   plain table with ink-hairline row rules + mono uppercase column
   captions; section plates via the global .print-box primitive. */

/* Vertical page padding lives in AdminConsoleLayout's .admin-shell
   since the Nav-Refactor 2026-06-11. */
.admin-user-list[b-k5xxk0in54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.admin-user-list__header[b-k5xxk0in54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Editorial display head — condensed extrabold italic, indigo. */
.admin-user-list__header h1[b-k5xxk0in54] {
    font-family: var(--font-display);
    font-size: var(--text-h1);
    font-style: italic;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.025em;
    margin: 0;
    line-height: 0.96;
    color: var(--brand-indigo);
}

/* ---------- Filter form ---------- */

.user-filter[b-k5xxk0in54] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Mono uppercase section caption (indigo accent). */
.user-filter__heading[b-k5xxk0in54] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}

.user-filter__grid[b-k5xxk0in54] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.user-filter__field[b-k5xxk0in54] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.user-filter__field--checkbox[b-k5xxk0in54] {
    justify-content: flex-end;
}

.user-filter__field--checkbox label[b-k5xxk0in54] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.user-filter__field label[b-k5xxk0in54] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Editorial form fields — paper-card plates on a 1px ink frame. */
.user-filter__field input[type="text"][b-k5xxk0in54],
.user-filter__field select[b-k5xxk0in54] {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font-family: inherit;
    font-size: 0.9375rem;
}

.user-filter__field select[multiple][b-k5xxk0in54] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}

.user-filter__field input:focus-visible[b-k5xxk0in54],
.user-filter__field select:focus-visible[b-k5xxk0in54] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.user-filter__actions[b-k5xxk0in54] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.user-filter__apply[b-k5xxk0in54] {
    font-weight: 700;
}

.user-filter__reset[b-k5xxk0in54] {
    text-decoration: none;
}

/* ---------- Results / table ---------- */

.user-results[b-k5xxk0in54] {
    padding: var(--space-5) var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    overflow-x: auto;
}

.user-loading[b-k5xxk0in54] {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
}

.empty-state[b-k5xxk0in54] {
    padding: var(--space-6) var(--space-4);
    text-align: center;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-3);
}

.empty-state p[b-k5xxk0in54] {
    margin: 0;
}

.user-table[b-k5xxk0in54] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
    color: var(--text-primary);
}

.user-table__caption[b-k5xxk0in54] {
    caption-side: top;
    text-align: left;
    padding-bottom: var(--space-3);
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

/* Mono data labels on the column heads — editorial caption row. */
.user-table thead th[b-k5xxk0in54] {
    text-align: left;
    padding: var(--space-2) var(--space-3);
    color: var(--brand-indigo);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--rule-hairline);
    white-space: nowrap;
}

.user-row + .user-row .user-cell[b-k5xxk0in54] {
    border-top: thin solid var(--rule-hairline);
}

.user-row:hover[b-k5xxk0in54] {
    background: var(--paper-deep);
}

.user-cell[b-k5xxk0in54] {
    padding: var(--space-2) var(--space-3);
    vertical-align: top;
    line-height: 1.5;
}

.user-cell--email a[b-k5xxk0in54] {
    color: var(--brand-indigo);
    text-decoration: none;
    font-weight: 600;
}

.user-cell--email a:hover[b-k5xxk0in54],
.user-cell--email a:focus-visible[b-k5xxk0in54] {
    text-decoration: underline;
}

.user-cell--date[b-k5xxk0in54],
.user-cell--mono[b-k5xxk0in54] {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    white-space: nowrap;
}

.user-cell--center[b-k5xxk0in54] {
    text-align: center;
}

/* ---------- Pager footer ---------- */

.user-pager[b-k5xxk0in54] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: thin solid var(--rule-hairline);
}

.user-pager__status[b-k5xxk0in54] {
    color: var(--text-secondary);
    font-size: 0.9375rem;
    text-align: center;
}

.user-pager__btn[b-k5xxk0in54] {
    text-decoration: none;
}

.user-pager__btn--disabled[b-k5xxk0in54] {
    opacity: 0.4;
    pointer-events: none;
}

/* Tablet breakpoint per theme-tokens.md (1024 / 16 = 64em). */
@media (max-width: 64em) {
    .user-results[b-k5xxk0in54] {
        padding: var(--space-4);
    }

    .user-filter[b-k5xxk0in54] {
        padding: var(--space-4);
    }

    .user-filter__grid[b-k5xxk0in54] {
        grid-template-columns: 1fr;
    }

    .user-pager[b-k5xxk0in54] {
        flex-direction: column;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/VolumeBooking.razor.rz.scp.css */
/* S23 T043/T077 — scoped CSS for /admin/volumen. Tokens only
   (Constitution V, S20 --brand-*/--paper*/--ink namespace). Mirrors the
   S18/S21 admin plates so the console stays one surface. */

.volume-admin[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

.volume-admin__header[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.volume-admin__lede[b-26fuki737k] {
    max-width: 52ch;
    margin: 0;
    color: var(--text-secondary);
}

/* ── Account lookup ─────────────────────────────────────────────── */

.volume-search[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
}

.volume-search__heading[b-26fuki737k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.volume-search__row[b-26fuki737k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.volume-search__label[b-26fuki737k] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.volume-search__input[b-26fuki737k] {
    flex: 1 1 20rem;
    min-width: 12rem;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.volume-search__input:focus-visible[b-26fuki737k] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.volume-search__hint[b-26fuki737k],
.volume-search__empty[b-26fuki737k] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

.volume-search__results[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.volume-search__result[b-26fuki737k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-faint);
    border-radius: var(--radius-box);
    background: var(--paper-deep);
}

.volume-search__result-email[b-26fuki737k] {
    flex: 1 1 16rem;
    font-family: var(--font-mono);
    font-size: 0.875rem;
}

.volume-search__result-tier[b-26fuki737k] {
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* ── Account panel ──────────────────────────────────────────────── */

.volume-account[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.volume-account__header[b-26fuki737k] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-3);
}

.volume-account__heading[b-26fuki737k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ── Balance / spend / write-off ────────────────────────────────── */

.volume-stats[b-26fuki737k] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
    gap: var(--space-4);
}

.volume-stat[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
}

.volume-stat__label[b-26fuki737k] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.volume-stat__value[b-26fuki737k] {
    font-family: var(--font-display);
    font-size: 2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.01em;
}

.volume-stat--primary .volume-stat__value[b-26fuki737k] {
    color: var(--brand-indigo);
}

/* The write-off is Euraki's loss, not a receivable: a caution-tape
   edge marks it as "look at this", the muted value keeps it from
   competing with the balance an admin actually acts on. */
.volume-stat--writeoff[b-26fuki737k] {
    border-left: var(--space-1) solid var(--color-warning);
}

.volume-stat--writeoff .volume-stat__value[b-26fuki737k] {
    color: var(--text-secondary);
}

.volume-stat__hint[b-26fuki737k] {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.8125rem;
}

/* ── Package table (recorded Constitution-V plain-table deviation) ── */

.volume-packages[b-26fuki737k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-5);
    overflow-x: auto;
}

.volume-packages__heading[b-26fuki737k] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: 0.02em;
}

.volume-table[b-26fuki737k] {
    width: 100%;
    min-width: 46rem;
    border-collapse: collapse;
}

.volume-table__caption[b-26fuki737k] {
    margin-bottom: var(--space-3);
    color: var(--text-muted);
    font-size: 0.8125rem;
    text-align: left;
}

.volume-table th[b-26fuki737k] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--table-border);
    color: var(--table-header-text);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.06em;
    text-align: left;
    text-transform: uppercase;
}

.volume-cell[b-26fuki737k] {
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--rule-faint);
    font-variant-numeric: tabular-nums;
}

.volume-cell--strong[b-26fuki737k] {
    font-weight: 700;
}

.volume-cell--ref[b-26fuki737k] {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--text-secondary);
}

.volume-status[b-26fuki737k] {
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.volume-status--active[b-26fuki737k] {
    background: var(--color-success-bg);
    color: var(--brand-indigo);
}

.volume-status--exhausted[b-26fuki737k] {
    background: var(--paper-deep);
    color: var(--text-secondary);
}

.volume-status--expired[b-26fuki737k] {
    background: var(--color-warning-bg);
    color: var(--ink);
}

/* Shared admin empty/error plate (S21 precedent). */
.empty-state[b-26fuki737k] {
    padding: var(--space-6) var(--space-4);
    color: var(--text-secondary);
    text-align: center;
}

.empty-state p[b-26fuki737k] {
    margin: 0;
}

@media (max-width: 48em) {
    .volume-stat__value[b-26fuki737k] {
        font-size: 1.5rem;
    }

    .volume-account__header[b-26fuki737k] {
        align-items: stretch;
        flex-direction: column;
    }
}
/* _content/Schnatter.Web/Components/Pages/Admin/VolumeBookingModal.razor.rz.scp.css */
/* S23 T043 — scoped CSS for the Nutzungsvolumen booking dialog.
   Tokens only (Constitution V); mirrors InviteCreateModal so the admin
   modals stay one family. */

.volume-booking-modal-backdrop[b-wlx1z3cng0] {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: var(--bg-overlay);
    z-index: var(--z-modal);
}

.volume-booking-modal-dialog[b-wlx1z3cng0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    width: min(34rem, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-8));
    overflow-y: auto;
    padding: var(--space-6);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    background: var(--paper-card);
    color: var(--text-primary);
    box-shadow: var(--shadow-md);
}

.volume-booking-modal__heading[b-wlx1z3cng0] {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 800;
    font-style: italic;
    letter-spacing: 0.03em;
}

.volume-booking-modal__target[b-wlx1z3cng0] {
    margin: 0;
    color: var(--text-secondary);
}

.volume-booking-modal__field[b-wlx1z3cng0] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.volume-booking-modal__field label[b-wlx1z3cng0] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.volume-booking-modal__field input[b-wlx1z3cng0] {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    background: var(--bg-input);
    color: var(--text-primary);
    font: inherit;
}

.volume-booking-modal__field input:focus-visible[b-wlx1z3cng0] {
    border-color: var(--brand-indigo);
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

.volume-booking-modal__hint[b-wlx1z3cng0] {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* Ink on the warning tint (S20 P17) — same contract as
   .api-access__panel-error: signal-coloured body text measures 3.41:1
   over this ground and fails AA. The error signal is the left rule. */
.volume-booking-modal__validation[b-wlx1z3cng0] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-left: var(--space-1) solid var(--color-error);
    background: var(--color-warning-bg);
    color: var(--ink);
    font-weight: 600;
}

.volume-booking-modal__busy[b-wlx1z3cng0] {
    margin: 0;
    color: var(--text-secondary);
}

.volume-booking-modal__actions[b-wlx1z3cng0] {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: var(--space-3);
}

.btn-pill[disabled][b-wlx1z3cng0] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-pill:focus-visible[b-wlx1z3cng0] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

@media (max-width: 64em) {
    .volume-booking-modal-dialog[b-wlx1z3cng0] {
        padding: var(--space-4);
    }

    .volume-booking-modal__actions[b-wlx1z3cng0] {
        flex-direction: column-reverse;
        align-items: stretch;
    }
}
/* _content/Schnatter.Web/Components/Pages/Chat/Chat.razor.rz.scp.css */
/* S06 — landing page (no conversations yet). Tokens only. */

.chat-landing[b-xo592qaqud] {
    /* Fill the bounded chat main (theme.css height chain) and centre the
       empty-state card; the page itself never scrolls. */
    height: 100%;
    min-height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-6);
}

.chat-landing__card[b-xo592qaqud] {
    max-width: 36rem;
    padding: var(--space-8);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
}

.chat-landing__title[b-xo592qaqud] {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 800;
    font-style: italic;
    margin: 0;
    color: var(--text-primary);
}

.chat-landing__lead[b-xo592qaqud] {
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
    max-width: 32rem;
}

.chat-landing__cta[b-xo592qaqud] {
    margin-top: var(--space-3);
}

.chat-landing__loading[b-xo592qaqud] {
    color: var(--text-secondary);
    text-align: center;
}
/* _content/Schnatter.Web/Components/Pages/Chat/ChatDetail.razor.rz.scp.css */
/* S06 — chat-detail page: sidebar + panel. Tokens only. */

.chat-shell[b-8rua9z3nl6] {
    display: grid;
    /* minmax(0, 1fr) on the chat column (NOT a bare 1fr) so the track is
       allowed to shrink below its content's min-content width — otherwise
       wide bubbles/code/tables establish a ~1060px min-content floor and the
       whole workspace refuses to shrink, overflowing the page horizontally. */
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: var(--space-5);
    /* Bounded height (no longer min-height) so the page never grows: the
       shell fills its bounded-height main (theme.css height chain) and the
       conversation scrolls INSIDE .chat-message-list. min-height:0 lets the
       grid children shrink below content height so the internal scroll
       region can actually clip + scroll. min-width:0 does the same on the
       inline axis so the shell can shrink to any viewport width. */
    height: 100%;
    min-height: 0;
    min-width: 0;
}

/* S19 T069 (US4) — third column while the markdown side panel is
   open; closing the panel drops the modifier and restores full
   width.

   T2 — FullHD tuning: the panel column is fluid. It never drops
   below 20rem (readable markdown floor), tracks 30vw on mid-size
   viewports, and tops out at 36rem so on a 1920px monitor the chat
   column keeps ~940px of comfortable reading width next to a
   ~576px preview. minmax(0, 1fr) on the chat column lets wide code
   blocks/tables shrink instead of blowing the grid open. */
.chat-shell--with-panel[b-8rua9z3nl6] {
    grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr) minmax(20rem, min(30vw, 36rem));
}

/* The sidebar grid item. Previously this file tried to size the sidebar
   via a `.chat-sidebar` selector that matched NOTHING — the real element
   is <nav class="conv-sidebar"> owned by ConversationSidebar. The clean
   seam is this ChatDetail-owned <details class="chat-shell__aside"> wrapper
   which now occupies grid cell 1, so ChatDetail can size + collapse it.
   On desktop it is a full-height flex column whose body lets the nav scroll
   internally instead of overflowing the clipped shell. */
.chat-shell__aside[b-8rua9z3nl6] {
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.chat-shell__aside-body[b-8rua9z3nl6] {
    /* Bounded so the nav inside it (.conv-sidebar, overflow-y:auto) can
       actually clip+scroll rather than push the column taller. */
    min-height: 0;
}

/* The collapsed-state summary bar (mobile only — hidden ≥641px below).
   A flex summary suppresses the native disclosure triangle, so the marker
   is removed explicitly and a custom chevron is drawn after the label. */
.chat-shell__aside-summary[b-8rua9z3nl6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
    /* Lock to a single ~44px row: the container never wraps its two items,
       and the label (not the button) absorbs any squeeze via ellipsis, so the
       "+ Neuer Chat" button stays one line at 320px and the bar stays ~44px. */
    flex-wrap: nowrap;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    background: var(--paper-card);
    cursor: pointer;
    list-style: none;
}

.chat-shell__aside-summary[b-8rua9z3nl6]::-webkit-details-marker {
    display: none;
}

.chat-shell__aside-summary__label[b-8rua9z3nl6] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: 700;
    color: var(--text-primary);
    /* Shrinkable so a squeeze clips the label, never the button. */
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    white-space: nowrap;
}

.chat-shell__aside-summary__new[b-8rua9z3nl6] {
    /* Fixed-size, never wraps internally, never shrinks: one tappable line. */
    flex: 0 0 auto;
    white-space: nowrap;
    padding: var(--space-1) var(--space-3);
}

.chat-shell__aside-summary__label[b-8rua9z3nl6]::after {
    /* Rotating chevron affordance — points right when collapsed, down when
       the browser sets [open] on toggle (we never render `open` ourselves). */
    content: "›";
    color: var(--text-secondary);
    transition: transform var(--motion-micro) var(--ease-standard);
}

.chat-shell__aside[open] .chat-shell__aside-summary__label[b-8rua9z3nl6]::after {
    transform: rotate(90deg);
}

.chat-panel[b-8rua9z3nl6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    min-height: 0;
    /* Inline-axis shrink so the panel (grid item) can go below its content
       min-content; wide children clip/scroll inside their own boxes
       (.chat-message-list, pre, table) instead of widening the column. */
    min-width: 0;
    /* HARD vertical clamp. Without this the panel's fixed children (head +
       banners + composer) could sum taller than the minmax(0,1fr) grid row
       and spill PAST the clipped shell — landing the composer + disclaimer
       below the fold on phones. With overflow:hidden the panel is bounded
       to its row and the message list (flex:1 1 auto; min-height:0) becomes
       the SOLE shrink sink, so the composer stays structurally pinned to
       the bottom edge at every viewport height. */
    overflow: hidden;
}

/* Every non-list child of the panel is a fixed-size band so the message
   list absorbs all the shrink. The composer is the last flex item, so flex
   order alone pins it to the bottom (no sticky/fixed needed). */
.chat-panel__head[b-8rua9z3nl6],
.chat-panel__banner[b-8rua9z3nl6],
.chat-panel__tool-results[b-8rua9z3nl6],
.chat-panel__tool-bubbles[b-8rua9z3nl6] {
    flex: 0 0 auto;
}

.chat-panel__loading[b-8rua9z3nl6],
.chat-panel__notfound[b-8rua9z3nl6] {
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-8);
}

.chat-panel__head[b-8rua9z3nl6] {
    padding: var(--space-4) var(--space-5);
    /* Let the head clip its own content (title ellipsis + scrollable picker
       strip ≤640px) instead of widening past the column. */
    min-width: 0;
}

.chat-panel__title-row[b-8rua9z3nl6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.chat-panel__title[b-8rua9z3nl6] {
    margin: 0;
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--text-primary);
    /* A long unbroken title is a flex item (in .chat-panel__title-row); without
       these it keeps its min-content width and pushes the head wider. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.chat-panel__archived[b-8rua9z3nl6] {
    margin-block: var(--space-3) 0;
    color: var(--color-signal-text);
    font-size: 0.9rem;
}

.chat-panel__banner[b-8rua9z3nl6] {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-box);
    border: 1px solid var(--rule-hairline);
    font-size: 0.9rem;
}

/* P17/FR-016 — ink body text on the warning tint. Signal-coloured text
   here measured 3.41:1 at 0.9rem, under the 4.5:1 bar; the tint ground
   plus the --color-warning-border frame keep the banners unmistakable. */
.chat-panel__banner--block[b-8rua9z3nl6] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--ink);
    font-weight: 700;
}

.chat-panel__banner--error[b-8rua9z3nl6] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--ink);
}

.chat-panel__banner--retention[b-8rua9z3nl6] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
    color: var(--ink);
}

.chat-panel__banner small[b-8rua9z3nl6] {
    margin-inline-start: var(--space-2);
    opacity: 0.8;
}

.chat-menu-pop[b-8rua9z3nl6] {
    position: fixed;
    inset-block-start: var(--space-8);
    inset-inline-end: var(--space-6);
    z-index: 20;
    width: min(22rem, calc(100vw - var(--space-6) * 2));
}

.chat-rename-form[b-8rua9z3nl6] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    border-radius: var(--radius-box);
}

.chat-rename-form__row[b-8rua9z3nl6] {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
}

/* S07 — inline tool-call status bubble row above the input. */
.chat-panel__tool-bubbles[b-8rua9z3nl6] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-2) 0;
}

/* Stack ONLY at the collapse breakpoint (≤640px), NOT ≤1024px. The single-
   column stack puts the sidebar ABOVE the panel, costing vertical budget — so
   it must coincide with the <details> collapse (≤640px) where the sidebar is
   just a ~44px summary bar. In the 641–1024px band the DEFAULT two-column grid
   applies instead, so the sidebar sits BESIDE the panel (a side column, zero
   vertical cost) and the panel's own bounded overflow:hidden column keeps the
   flex-pinned composer on-screen.

   minmax(0, 1fr) on BOTH the single column and the panel row — a bare 1fr
   resolves its minimum to min-content, which (even single-column) re-imposes
   the ~1060px floor and overflows the page horizontally. */
@media (max-width: 640px) {
    .chat-shell[b-8rua9z3nl6] {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto minmax(0, 1fr);
    }
}

/* Desktop reveal (≥641px): the sidebar must look like an ordinary
   always-open column. The summary disappears and the body is force-shown
   regardless of the closed <details> state (we never set `open`).

   Browsers hide closed <details> content two different ways, and the card
   must also FILL the full column height (the old <nav> was a stretched grid
   item — a content-height card would be a visible regression), so both the
   reveal AND a full-height flex chain are applied for each model:
     • Legacy model — UA `display:none` on non-summary children. The body is
       the direct flex child of <details>, so `display:flex; flex:1 1 auto`
       both reveals it (author beats UA) and stretches it to the cell height.
     • Modern Chromium (≈128+) — content lives in the ::details-content
       wrapper, hidden via `content-visibility`. We reveal that wrapper and
       make IT the height-distributing flex item; the body then fills it.
       Browsers without ::details-content drop that rule harmlessly.
   The .conv-sidebar nav (ConversationSidebar.razor.css) is flex:1 1 auto +
   min-height:0, so it fills the body and scrolls long lists internally. For
   normal (short) lists nothing scrolls — byte-identical to today's desktop. */
@media (min-width: 641px) {
    .chat-shell__aside-summary[b-8rua9z3nl6] {
        display: none;
    }

    .chat-shell__aside[b-8rua9z3nl6]::details-content {
        content-visibility: visible;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .chat-shell__aside-body[b-8rua9z3nl6] {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
}

/* ≤640px: a tall restacked global header (MainLayout) eats the viewport, so
   reclaim vertical room inside the chat panel and shrink the sidebar's share
   — this keeps the composer + AI disclaimer on-screen at 320px while the page
   itself never scrolls (the message list still scrolls internally). */
@media (max-width: 640px) {
    .chat-shell[b-8rua9z3nl6] {
        gap: var(--space-3);
    }

    /* Collapsed by default: the `auto` grid row shrinks to just the ~44px
       summary bar, handing the rest of the viewport to the chat panel so the
       composer + disclaimer stay on-screen. When the user opens it, the body
       is capped + scrolls internally so a long list never eats the panel. */
    .chat-shell__aside-body[b-8rua9z3nl6] {
        max-height: 45vh;
        overflow-y: auto;
    }
}

/* Head compaction across the WHOLE narrow range (0–960px), not just ≤640px.
   The 641–~900px two-column band suffers the tall wrapped-nav header (trimmed
   in theme.css) AND an uncompacted panel head — so the same one-line title +
   single-row AliasPicker (AliasPicker.razor.css) + reduced head padding apply
   up to 960px to keep head + composer within the bounded panel and the
   disclaimer on-screen. At ≥961px the FULL head returns (1.4rem title, wrapping
   picker) so the 1024/1366 desktop look is unchanged; 1024×720 already fits. */
@media (max-width: 960px) {
    /* Mild footprint trim (Lever C) — tighter inter-band gap helps 641–767. */
    .chat-panel[b-8rua9z3nl6] {
        gap: var(--space-3);
    }

    .chat-panel__head[b-8rua9z3nl6] {
        padding: var(--space-3) var(--space-4);
    }

    .chat-panel__title[b-8rua9z3nl6] {
        font-size: 1.2rem;
        /* One compact line: clip overlong titles to an ellipsis instead of
           wrapping into 3–4 lines and inflating the head's vertical budget. */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}
/* _content/Schnatter.Web/Components/Pages/Features.razor.rz.scp.css */
/* Scoped CSS for /features. Tokens only — Constitution V.
   S20 editorial: display headline with riso accent, print-box cards
   (global .feature-card) carrying § section-labels. */

.features-header[b-0aruxnrfwm] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    padding-block: var(--space-12) var(--space-10);
    max-width: 880px;
}

.features-header__title[b-0aruxnrfwm] {
    font-size: var(--text-h1);
    margin: 0;
}

.features-header__lede[b-0aruxnrfwm] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 640px;
    line-height: 1.6;
}

.features-grid[b-0aruxnrfwm] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    padding-block: 0 var(--space-16);
}

.features-grid__card h3[b-0aruxnrfwm] {
    font-size: 1.625rem;
    font-weight: 700;
    margin: var(--space-1) 0 var(--space-3);
    color: var(--text-primary);
}

.features-grid__card p[b-0aruxnrfwm] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

.features-grid__card code[b-0aruxnrfwm] {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0 var(--space-1);
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    border-radius: var(--radius-stamp);
    color: var(--inline-code-text);
}

@media (max-width: 1024px) {
    .features-grid[b-0aruxnrfwm] {
        grid-template-columns: 1fr;
    }
}
/* _content/Schnatter.Web/Components/Pages/Home.razor.rz.scp.css */
/* Scoped CSS for the Home landing page. Tokens only — Constitution V.
   S20 editorial: manual §09 hero on a deep-indigo .band panel; feature
   teasers as print-box cards with § section-labels. */

/* --- Hero (deep-indigo emphasis band, manual §09) ------------------------ */

.home-hero[b-4c28j6b9zq] {
    width: min(100% - 2 * var(--space-5), var(--layout-max-width));
    margin: var(--space-6) auto var(--space-12);
    border: 1px solid var(--rule-strong);
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: var(--space-10);
    align-items: end;
    padding: var(--space-12) var(--space-8) var(--space-10);
}

.home-hero__main[b-4c28j6b9zq] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.home-hero__kicker[b-4c28j6b9zq] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-tuerkis);
    border: 1px solid var(--brand-tuerkis);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-6);
}

.home-hero__title[b-4c28j6b9zq] {
    font-size: var(--text-display);
    margin: 0 0 var(--space-5);
}

/* Highlighted display word: türkis text, orange riso ghost (cross-hue
   pairing per FR-005; ghost color comes from .riso-shift--orange). */
.home-hero__title .riso-shift[b-4c28j6b9zq] {
    color: var(--brand-tuerkis);
}

.home-hero__tagline[b-4c28j6b9zq] {
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--light-80);
    max-width: 540px;
    margin: 0 0 var(--space-6);
}

.home-hero__actions[b-4c28j6b9zq] {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* CTA treatments on the indigo band (global .brand-pill is paper-ground). */
.home-hero .brand-pill--primary[b-4c28j6b9zq] {
    background: var(--brand-tuerkis);
    border-color: var(--brand-tuerkis);
    color: var(--brand-indigo);
}

.home-hero .brand-pill--primary:hover[b-4c28j6b9zq] {
    background: var(--paper-card);
    border-color: var(--paper-card);
    color: var(--brand-indigo);
}

.home-hero .brand-pill:not(.brand-pill--primary)[b-4c28j6b9zq] {
    background: transparent;
    border-color: var(--light-25);
    color: var(--text-on-band);
}

.home-hero .brand-pill:not(.brand-pill--primary):hover[b-4c28j6b9zq] {
    border-color: var(--paper-card);
    color: var(--paper-card);
}

/* --- Mono facts (max 4, manual §09) -------------------------------------- */

.home-hero__facts[b-4c28j6b9zq] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-family: var(--font-mono);
}

.home-hero__fact[b-4c28j6b9zq] {
    display: flex;
    align-items: baseline;
    gap: var(--space-4);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--light-25);
}

.home-hero__fact-value[b-4c28j6b9zq] {
    font-family: var(--font-sans);
    font-weight: 800;
    font-style: italic;
    font-size: 2rem;
    line-height: 1.1;
    color: var(--brand-tuerkis);
    min-width: 5.5rem;
}

.home-hero__fact-label[b-4c28j6b9zq] {
    font-size: var(--text-caption);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--light-80);
}

/* --- Features section ----------------------------------------------------- */

.home-features[b-4c28j6b9zq] {
    padding-block: var(--space-12);
}

.home-features__header[b-4c28j6b9zq] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-10);
    max-width: 720px;
}

.home-features__title[b-4c28j6b9zq] {
    font-size: var(--text-h1);
    margin: 0;
}

.home-features__grid[b-4c28j6b9zq] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.home-features__card[b-4c28j6b9zq] {
    position: relative;
    min-height: 14rem;
}

.home-features__card h3[b-4c28j6b9zq] {
    font-size: 1.5rem;
    font-weight: 700;
    margin: var(--space-1) 0 var(--space-2);
    color: var(--text-primary);
}

.home-features__card p[b-4c28j6b9zq] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.6;
}

.home-features__arrow[b-4c28j6b9zq] {
    position: absolute;
    right: var(--space-5);
    bottom: var(--space-5);
    font-size: 1.5rem;
    color: var(--brand-indigo);
    opacity: 0.55;
    transition: transform var(--motion-snap) var(--ease-standard),
                opacity var(--motion-snap) var(--ease-standard);
}

.home-features__card:hover .home-features__arrow[b-4c28j6b9zq] {
    transform: translateX(var(--space-2));
    opacity: 1;
}

/* The fourth card breaks to a second row on the 3-col grid — span it full
   width on desktop so the rhythm stays clean. */
.home-features__grid > .home-features__card:nth-child(4)[b-4c28j6b9zq] {
    grid-column: span 3;
}

/* --- Pricing teaser ------------------------------------------------------- */

.home-cta[b-4c28j6b9zq] {
    text-align: center;
    padding-block: var(--space-12) var(--space-16);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-6);
}

.home-cta__lede[b-4c28j6b9zq] {
    font-size: 1.25rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 640px;
    line-height: 1.6;
}

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1024px) {
    .home-hero[b-4c28j6b9zq] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding: var(--space-10) var(--space-6) var(--space-8);
    }

    .home-features__grid[b-4c28j6b9zq] {
        grid-template-columns: 1fr;
    }

    .home-features__grid > .home-features__card:nth-child(4)[b-4c28j6b9zq] {
        grid-column: auto;
    }
}

@media (max-width: 640px) {
    .home-hero[b-4c28j6b9zq] {
        padding: var(--space-8) var(--space-5);
    }

    .home-hero__tagline[b-4c28j6b9zq],
    .home-cta__lede[b-4c28j6b9zq] {
        font-size: 1.0625rem;
    }
}
/* _content/Schnatter.Web/Components/Pages/Inferenz.razor.rz.scp.css */
/* Scoped CSS for the public /inferenz page (S23 T056).
   Tokens only — Constitution V. Every colour, space, radius, shadow, font and
   duration below resolves to a custom property declared in theme.css; no new
   token was introduced for this page.

   S20 editorial language: deep-indigo emphasis bands for the two moments that
   carry the message (hero + curation promise), warm paper print-boxes for the
   substance in between, one dark code slab for the developer orientation. */

/* --- Hero (deep-indigo band; Home precedent) ------------------------------ */

.inferenz-hero[b-rqg7mlz2t8] {
    width: min(100% - 2 * var(--space-5), var(--layout-max-width));
    margin: var(--space-6) auto var(--space-12);
    border: 1px solid var(--rule-strong);
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: var(--space-10);
    align-items: end;
    padding: var(--space-12) var(--space-8) var(--space-10);
}

.inferenz-hero__main[b-rqg7mlz2t8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 0;
}

.inferenz-hero__kicker[b-rqg7mlz2t8] {
    display: inline-block;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--brand-tuerkis);
    border: 1px solid var(--brand-tuerkis);
    padding: var(--space-2) var(--space-3);
    margin-bottom: var(--space-6);
}

.inferenz-hero__title[b-rqg7mlz2t8] {
    font-size: var(--text-display);
    margin: 0 0 var(--space-5);
}

/* Highlighted display word: türkis text, orange riso ghost — the cross-hue
   pairing the theme requires (FR-005), identical to the Home hero. */
.inferenz-hero__title .riso-shift[b-rqg7mlz2t8] {
    color: var(--brand-tuerkis);
}

.inferenz-hero__lede[b-rqg7mlz2t8] {
    font-size: 1.1875rem;
    line-height: 1.5;
    color: var(--light-80);
    max-width: 44rem;
    margin: 0 0 var(--space-6);
}

.inferenz-hero__actions[b-rqg7mlz2t8] {
    display: inline-flex;
    gap: var(--space-3);
    flex-wrap: wrap;
}

/* CTA treatments on the indigo band (global .brand-pill is paper-ground). */
.inferenz-hero .brand-pill--primary[b-rqg7mlz2t8] {
    background: var(--brand-tuerkis);
    border-color: var(--brand-tuerkis);
    color: var(--brand-indigo);
}

.inferenz-hero .brand-pill--primary:hover[b-rqg7mlz2t8] {
    background: var(--paper-card);
    border-color: var(--paper-card);
    color: var(--brand-indigo);
}

.inferenz-hero .brand-pill:not(.brand-pill--primary)[b-rqg7mlz2t8] {
    background: transparent;
    border-color: var(--light-25);
    color: var(--text-on-band);
}

.inferenz-hero .brand-pill:not(.brand-pill--primary):hover[b-rqg7mlz2t8] {
    border-color: var(--paper-card);
    color: var(--paper-card);
}

/* --- Hero spec sheet (mono key/value rows) -------------------------------- */

.inferenz-hero__spec[b-rqg7mlz2t8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    font-family: var(--font-mono);
    min-width: 0;
}

.inferenz-hero__spec-row[b-rqg7mlz2t8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding-bottom: var(--space-3);
    border-bottom: 1px dashed var(--light-25);
}

.inferenz-hero__spec-key[b-rqg7mlz2t8] {
    font-size: var(--text-caption);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--light-80);
}

.inferenz-hero__spec-value[b-rqg7mlz2t8] {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--brand-tuerkis);
    /* Long URLs must survive a 320px viewport without pushing the band wide. */
    overflow-wrap: anywhere;
}

/* --- Shared section head --------------------------------------------------- */

.inferenz-section-head[b-rqg7mlz2t8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    align-items: flex-start;
    margin-bottom: var(--space-10);
    max-width: 46rem;
}

.inferenz-section-head__title[b-rqg7mlz2t8] {
    font-size: var(--text-h1);
    margin: 0;
}

.inferenz-section-head__lede[b-rqg7mlz2t8] {
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--text-secondary);
}

/* --- Variants -------------------------------------------------------------- */

.inferenz-variants[b-rqg7mlz2t8] {
    padding-block: 0 var(--space-12);
}

.inferenz-variants__grid[b-rqg7mlz2t8] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
    /* Deliberately NOT align-items:start. The three cards carry unequal
       amounts of copy; letting them size to content gave the trio a ragged
       bottom edge, which reads as sloppy rather than as three peers. Grid's
       default stretch lines the baselines of the frames up. */
}

.inferenz-variant[b-rqg7mlz2t8] {
    /* The card opens with a thick coloured rule so the three variants read as
       three distinct things instead of one card repeated. Hue only — the
       frame, ground and type stay the shared print-box treatment. */
    border-top-width: var(--space-1);
    border-top-style: solid;
    gap: var(--space-3);
    padding: var(--space-6) var(--space-6) var(--space-8);
}

/* The :hover twins are not redundant. The shared .feature-card:hover rule sets
   the `border-color` SHORTHAND, which also repaints the top edge — so hovering
   a card used to flatten its identifying hue to indigo. Re-asserting the top
   colour keeps the three cards distinguishable in every state. */
.inferenz-variant--allrounder[b-rqg7mlz2t8],
.inferenz-variant--allrounder:hover[b-rqg7mlz2t8] {
    border-top-color: var(--brand-tuerkis-dunkel);
}

.inferenz-variant--coding[b-rqg7mlz2t8],
.inferenz-variant--coding:hover[b-rqg7mlz2t8] {
    border-top-color: var(--brand-blau);
}

.inferenz-variant--reasoning[b-rqg7mlz2t8],
.inferenz-variant--reasoning:hover[b-rqg7mlz2t8] {
    border-top-color: var(--brand-lila);
}

.inferenz-variant__name[b-rqg7mlz2t8] {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    font-weight: 800;
    font-style: italic;
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
    color: var(--brand-indigo);
    margin: var(--space-2) 0 0;
}

.inferenz-variant__id[b-rqg7mlz2t8] {
    display: inline-block;
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    padding: var(--space-1) var(--space-2);
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    border-radius: var(--radius-stamp);
    color: var(--inline-code-text);
    overflow-wrap: anywhere;
}

.inferenz-variant__position[b-rqg7mlz2t8] {
    margin: var(--space-1) 0 0;
}

.inferenz-variant__stamp[b-rqg7mlz2t8] {
    color: var(--brand-indigo);
}

.inferenz-variant__description[b-rqg7mlz2t8] {
    margin: var(--space-1) 0 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

/* --- Curation promise (the page's visual peak) ----------------------------- */

.inferenz-promise[b-rqg7mlz2t8] {
    width: min(100% - 2 * var(--space-5), var(--layout-max-width));
    margin: 0 auto var(--space-12);
    border: 1px solid var(--rule-strong);
}

.inferenz-promise__inner[b-rqg7mlz2t8] {
    padding: var(--space-12) var(--space-8);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-5);
}

/* Section label sits on the band: recolor the three parts for the dark
   ground (the global rule paints indigo-on-paper). */
.inferenz-promise__label .section-label__num[b-rqg7mlz2t8] {
    color: var(--brand-tuerkis);
}

.inferenz-promise__label .section-label__text[b-rqg7mlz2t8] {
    color: var(--text-on-band);
}

.inferenz-promise__label .section-label__rule[b-rqg7mlz2t8] {
    border-top-color: var(--light-25);
}

.inferenz-promise__title[b-rqg7mlz2t8] {
    font-size: var(--text-h1);
    margin: 0;
    max-width: 24ch;
}

.inferenz-promise__body[b-rqg7mlz2t8] {
    margin: 0;
    max-width: 60ch;
    font-size: 1.1875rem;
    line-height: 1.6;
    color: var(--light-80);
}

.inferenz-promise__body code[b-rqg7mlz2t8] {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0 var(--space-1);
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    border-radius: var(--radius-stamp);
    color: var(--inline-code-text);
}

/* --- Swap diagram (static; shows which part moves) ------------------------- */

.inferenz-swap[b-rqg7mlz2t8] {
    list-style: none;
    margin: var(--space-4) 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: var(--space-4);
    width: 100%;
}

.inferenz-swap__node[b-rqg7mlz2t8] {
    position: relative;
    flex: 1 1 12rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--light-25);
    border-radius: var(--radius-box);
}

/* The two stable nodes are quiet outlines; the moving node is the only filled
   plate on the band — the eye lands on the part we swap. */
.inferenz-swap__node--moving[b-rqg7mlz2t8] {
    border-color: var(--brand-orange);
    border-style: dashed;
}

.inferenz-swap__label[b-rqg7mlz2t8] {
    font-weight: 700;
    font-size: 1.0625rem;
    color: var(--text-on-band);
    overflow-wrap: anywhere;
}

.inferenz-swap__label--mono[b-rqg7mlz2t8] {
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    color: var(--brand-tuerkis);
}

.inferenz-swap__note[b-rqg7mlz2t8] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--light-80);
}

.inferenz-swap__sticker[b-rqg7mlz2t8] {
    position: absolute;
    top: calc(-1 * var(--space-3));
    right: var(--space-4);
    font-size: var(--text-caption);
}

.inferenz-swap__link[b-rqg7mlz2t8] {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: var(--brand-tuerkis);
}

/* --- Integration (asymmetric: prose column + dark slab) -------------------- */

.inferenz-integration[b-rqg7mlz2t8] {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: start;
    padding-block: 0 var(--space-12);
}

.inferenz-integration__prose[b-rqg7mlz2t8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inferenz-integration__prose p[b-rqg7mlz2t8] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

.inferenz-integration__prose p.inferenz-integration__hint[b-rqg7mlz2t8] {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--rule-hairline);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.06em;
    line-height: 1.7;
    text-transform: uppercase;
    color: var(--text-muted);
}

.inferenz-slab[b-rqg7mlz2t8] {
    margin: 0;
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-box);
    overflow: hidden;
}

.inferenz-slab__caption[b-rqg7mlz2t8] {
    padding: var(--space-3) var(--space-5);
    border-bottom: 1px solid var(--light-25);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-tuerkis);
}

.inferenz-slab__pre[b-rqg7mlz2t8] {
    margin: 0;
    padding: var(--space-5);
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.875rem;
    line-height: 1.7;
    color: var(--code-text);
    tab-size: 2;
}

/* The slab is keyboard-focusable (tabindex="0") because it scrolls sideways
   on narrow viewports — so it needs a focus ring a keyboard user can see. */
.inferenz-slab__pre:focus-visible[b-rqg7mlz2t8] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* --- Access / Nutzungsvolumen --------------------------------------------- */

.inferenz-access[b-rqg7mlz2t8] {
    padding-block: 0 var(--space-12);
}

.inferenz-terms[b-rqg7mlz2t8] {
    margin: 0;
    padding: var(--space-2) var(--space-6) var(--space-5);
}

.inferenz-terms__row[b-rqg7mlz2t8] {
    display: grid;
    grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule-faint);
}

.inferenz-terms__row:last-child[b-rqg7mlz2t8] {
    border-bottom: none;
}

.inferenz-terms dt[b-rqg7mlz2t8] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-indigo);
    padding-top: var(--space-1);
}

.inferenz-terms dd[b-rqg7mlz2t8] {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

.inferenz-self-service[b-rqg7mlz2t8] {
    margin: var(--space-6) 0 0;
    max-width: 60ch;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

.inferenz-self-service__link[b-rqg7mlz2t8] {
    color: var(--brand-indigo);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.inferenz-self-service__link:hover[b-rqg7mlz2t8] {
    color: var(--ink);
}

.inferenz-self-service__link:focus-visible[b-rqg7mlz2t8] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* --- Contact -------------------------------------------------------------- */

.inferenz-contact[b-rqg7mlz2t8] {
    padding-block: 0 var(--space-16);
}

.inferenz-contact__box[b-rqg7mlz2t8] {
    /* Two columns: the ask on the left, what makes the ask answerable on the
       right. As one column the box left two thirds of its width empty. */
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-10);
    align-items: start;
    padding: var(--space-10) var(--space-8);
    /* A single flat accent edge instead of another full band — the page has
       already spent its two dark moments. */
    border-left: var(--space-2) solid var(--brand-orange);
}

.inferenz-contact__main[b-rqg7mlz2t8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);
    min-width: 0;
}

.inferenz-contact__aside[b-rqg7mlz2t8] {
    min-width: 0;
    padding-left: var(--space-6);
    border-left: 1px solid var(--rule-hairline);
}

.inferenz-contact__aside-heading[b-rqg7mlz2t8] {
    margin: 0 0 var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--brand-indigo);
}

.inferenz-contact__checklist[b-rqg7mlz2t8] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.inferenz-contact__checklist li[b-rqg7mlz2t8] {
    position: relative;
    padding-left: var(--space-5);
    color: var(--text-secondary);
    line-height: 1.6;
    font-size: 1rem;
}

/* Mono en-dash markers instead of list bullets — the page's marker language
   everywhere else is mono, not typographic bullets. */
.inferenz-contact__checklist li[b-rqg7mlz2t8]::before {
    content: "—";
    position: absolute;
    left: 0;
    font-family: var(--font-mono);
    color: var(--brand-orange);
}

.inferenz-contact__title[b-rqg7mlz2t8] {
    font-size: var(--text-h2);
    margin: 0;
    max-width: 24ch;
}

.inferenz-contact__body[b-rqg7mlz2t8] {
    margin: 0;
    max-width: 60ch;
    color: var(--text-secondary);
    line-height: 1.7;
    font-size: 1.0625rem;
}

.inferenz-contact__cta[b-rqg7mlz2t8] {
    font-family: var(--font-mono);
    text-transform: none;
    letter-spacing: 0.04em;
    overflow-wrap: anywhere;
}

/* --- Responsive ------------------------------------------------------------ */

@media (max-width: 1024px) {
    .inferenz-hero[b-rqg7mlz2t8] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
        padding: var(--space-10) var(--space-6) var(--space-8);
    }

    .inferenz-variants__grid[b-rqg7mlz2t8] {
        grid-template-columns: 1fr;
    }

    .inferenz-integration[b-rqg7mlz2t8] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    /* Stacked, the aside's left rule would sit against nothing — it becomes a
       top rule so it still reads as a separate note. */
    .inferenz-contact__box[b-rqg7mlz2t8] {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .inferenz-contact__aside[b-rqg7mlz2t8] {
        padding-left: 0;
        padding-top: var(--space-6);
        border-left: none;
        border-top: 1px solid var(--rule-hairline);
    }

    .inferenz-promise__inner[b-rqg7mlz2t8] {
        padding: var(--space-10) var(--space-6);
    }

    /* Stack the diagram: the arrows rotate a quarter turn so the flow still
       reads top-to-bottom. */
    .inferenz-swap[b-rqg7mlz2t8] {
        flex-direction: column;
        align-items: stretch;
        /* space-3 left the "unsere Aufgabe" sticker — which hangs above its
           node — touching the arrow above it. space-5 gives it room. */
        gap: var(--space-5);
    }

    /* Once the flex axis turns vertical, `flex: 1 1 12rem` reads as a 12rem
       HEIGHT basis, so every node inflated into a near-empty 192px box. In
       the stack the nodes should simply be as tall as their content. */
    .inferenz-swap__node[b-rqg7mlz2t8] {
        flex: 0 0 auto;
    }

    .inferenz-swap__link[b-rqg7mlz2t8] {
        justify-content: center;
        transform: rotate(90deg);
    }
}

@media (max-width: 640px) {
    .inferenz-hero[b-rqg7mlz2t8] {
        padding: var(--space-8) var(--space-5);
        margin-block: var(--space-4) var(--space-8);
    }

    .inferenz-hero__lede[b-rqg7mlz2t8],
    .inferenz-section-head__lede[b-rqg7mlz2t8],
    .inferenz-promise__body[b-rqg7mlz2t8],
    .inferenz-variant__description[b-rqg7mlz2t8],
    .inferenz-integration__prose p:not(.inferenz-integration__hint)[b-rqg7mlz2t8],
    .inferenz-terms dd[b-rqg7mlz2t8],
    .inferenz-self-service[b-rqg7mlz2t8],
    .inferenz-contact__body[b-rqg7mlz2t8] {
        font-size: 1rem;
    }

    .inferenz-promise__inner[b-rqg7mlz2t8] {
        padding: var(--space-8) var(--space-5);
    }

    .inferenz-variant[b-rqg7mlz2t8] {
        padding: var(--space-5) var(--space-5) var(--space-6);
    }

    /* Single-column term list — a 12rem label column does not fit at 320px. */
    .inferenz-terms[b-rqg7mlz2t8] {
        padding-inline: var(--space-5);
    }

    .inferenz-terms__row[b-rqg7mlz2t8] {
        grid-template-columns: 1fr;
        gap: var(--space-2);
    }

    .inferenz-contact__box[b-rqg7mlz2t8] {
        padding-inline: var(--space-5);
        padding-block: var(--space-8);
        border-left-width: var(--space-1);
    }

    /* At 320px the address had only ~163px of usable width and the pill's
       generous horizontal padding pushed it over, so the safety-valve
       `overflow-wrap: anywhere` kicked in and split it as "kontakt@eura /
       ki.de". Trimming the padding and the type buys enough room for the
       address to stay on one line; `anywhere` stays as a last resort below
       320px rather than as the normal case. */
    .inferenz-contact__cta[b-rqg7mlz2t8] {
        padding-inline: var(--space-3);
        font-size: 0.8125rem;
        /* The tracking alone was the last ~3px that forced the wrap. */
        letter-spacing: normal;
    }

    .inferenz-slab__pre[b-rqg7mlz2t8] {
        padding: var(--space-4);
        font-size: 0.8125rem;
    }
}
/* _content/Schnatter.Web/Components/Pages/Login.razor.rz.scp.css */
/* Scoped CSS for /login. Tokens only — Constitution V (S20 editorial).

   The editorial form language is owned by the theme.css globals:
   .auth-page / .auth-card (paper-card plate, ink frame, indigo display
   heading), .form-control-group / .form-control (focus ring via
   --shadow-focus-ring, validation via --color-error) and .brand-pill
   (square, verb-first uppercase, no lift/glow). This file keeps only
   page-specific layout deltas. */

.auth-card .brand-pill[b-4l6hmdev5g] {
    align-self: flex-start;
}
/* _content/Schnatter.Web/Components/Pages/Pricing.razor.rz.scp.css */
/* Scoped CSS for /pricing. Tokens only — Constitution V.
   S20 editorial: display headline with riso accent; tier cards are
   print-boxes (global .tier-card) with dashed internal rules, mono
   caption labels and a rotated sticker badge (global .tier-card__badge). */

.pricing-header[b-tinoo8bp8v] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    text-align: center;
    padding-block: var(--space-12) var(--space-10);
    max-width: 880px;
}

.pricing-header__title[b-tinoo8bp8v] {
    font-size: var(--text-h1);
    margin: 0;
}

.pricing-header__lede[b-tinoo8bp8v] {
    font-size: 1.125rem;
    color: var(--text-secondary);
    margin: 0;
    max-width: 640px;
    line-height: 1.6;
}

.pricing-grid[b-tinoo8bp8v] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--space-5);
    align-items: stretch;
    padding-block: 0 var(--space-16);
}

.pricing-empty[b-tinoo8bp8v] {
    padding-block: var(--space-10) var(--space-16);
    text-align: center;
    color: var(--text-secondary);
}

.pricing-empty a[b-tinoo8bp8v] {
    color: var(--brand-indigo);
    text-decoration: underline;
}

/* --- Tier card internals ------------------------------------------------ */
/* The `.tier-card` base + recommended modifier + badge live in theme.css.
   These selectors only add layout for the internal slots. */

.tier-card__head[b-tinoo8bp8v] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-bottom: var(--space-4);
    border-bottom: 1px dashed var(--rule-hairline);
}

.tier-card__name[b-tinoo8bp8v] {
    font-size: 1.5rem;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

.tier-card__price[b-tinoo8bp8v] {
    font-size: 1.75rem;
    font-weight: 800;
    font-style: italic;
    margin: 0;
    color: var(--brand-indigo);
    line-height: 1.1;
}

.tier-card__limit[b-tinoo8bp8v] {
    margin: 0;
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    line-height: 1.5;
}

.tier-card__features[b-tinoo8bp8v] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex-grow: 1;
}

.tier-card__features li[b-tinoo8bp8v] {
    position: relative;
    padding-left: var(--space-5);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--rule-faint);
    color: var(--text-primary);
    font-size: 0.95rem;
    line-height: 1.5;
}

.tier-card__features li:last-child[b-tinoo8bp8v] {
    border-bottom: none;
}

.tier-card__features li[b-tinoo8bp8v]::before {
    content: "→";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--brand-indigo);
    font-weight: 800;
}

.tier-card__cta[b-tinoo8bp8v] {
    align-self: flex-start;
    margin-top: var(--space-3);
}

/* Recommended tier: primary (filled indigo) CTA treatment. */
.tier-card--recommended .tier-card__cta[b-tinoo8bp8v] {
    background: var(--brand-indigo);
    border-color: var(--brand-indigo);
    color: var(--text-on-band);
}

.tier-card--recommended .tier-card__cta:hover[b-tinoo8bp8v] {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--text-on-band);
}

/* --- Responsive --------------------------------------------------------- */

@media (max-width: 1279px) {
    .pricing-grid[b-tinoo8bp8v] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .pricing-grid[b-tinoo8bp8v] {
        grid-template-columns: 1fr;
    }
}
/* _content/Schnatter.Web/Components/Pages/Register.razor.rz.scp.css */
/* Scoped CSS for /register. Tokens only — Constitution V (S20 editorial).

   The editorial form language is owned by the theme.css globals:
   .auth-page / .auth-card, .form-control-group / .form-control (focus
   ring via --shadow-focus-ring, validation via --color-error) and
   .brand-pill. This file keeps only page-specific pieces. */

.auth-card .brand-pill[b-fzef05y6c9] {
    align-self: flex-start;
}

/* Password-policy hint under the input — muted mono caption. */
.form-hint[b-fzef05y6c9] {
    color: var(--text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.02em;
}
/* _content/Schnatter.Web/Components/Pages/Status.razor.rz.scp.css */
/*
   S22 — scoped styles for the public /status page. Token-only (Principle V):
   every colour references a --status-* (or existing layout) token; spacing,
   radius and rules use the theme tokens. The five state tokens + "Keine
   Daten" each render a visually-distinct swatch/segment (SC-008).
*/

.status-page[b-f297bz9e2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding-block: var(--space-6);
}

.status-page__title[b-f297bz9e2k] {
    margin-block: var(--space-2) 0;
}

/* --- Overall banner --------------------------------------------------- */
.status-banner[b-f297bz9e2k] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
}

.status-banner__text[b-f297bz9e2k] {
    font-weight: 700;
    color: var(--text-primary);
}

/* --- Grid + per-component rows ---------------------------------------- */
.status-grid[b-f297bz9e2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-5);
}

/* The time axis. `justify-content: space-between` alone put the two labels
   flush against each other at 320 px, where they read as one broken word
   ("VOR 48 STUNDENJETZT"). A real `gap` now reserves the separation, and
   the leading label is the only item allowed to shrink — so if a viewport
   ever IS too narrow for both, "vor 48 Stunden" wraps onto a second line
   and the two labels still never touch. */
.status-axis[b-f297bz9e2k] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-4);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    border-bottom: 1px solid var(--rule-hairline);
    padding-bottom: var(--space-2);
}

.status-axis__start[b-f297bz9e2k] {
    min-width: 0;
}

.status-axis__end[b-f297bz9e2k] {
    flex: none;
    white-space: nowrap;
}

.status-row[b-f297bz9e2k] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.status-row__head[b-f297bz9e2k] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2);
}

.status-row__name[b-f297bz9e2k] {
    font-weight: 700;
    color: var(--text-primary);
}

.status-row__state[b-f297bz9e2k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.status-row__state-label[b-f297bz9e2k] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.status-row__bar[b-f297bz9e2k] {
    display: grid;
    grid-template-columns: repeat(48, 1fr);
    gap: 1px;
    /* Fix 3 — clip horizontal overflow of the (mostly hidden) tooltip spans
       so they never inflate the document width / create a horizontal page
       scrollbar. `clip` (not `hidden`) keeps overflow-y visible, so the
       shown tooltip still renders ABOVE the bar; edge-anchoring (below) keeps
       every shown tooltip within the bar's width, so nothing visible is cut. */
    overflow-x: clip;
}

.status-row__foot[b-f297bz9e2k] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--text-muted);
}

/* --- Swatches + hourly segments --------------------------------------- */
.status-swatch[b-f297bz9e2k] {
    display: inline-block;
    width: var(--space-4);
    height: var(--space-4);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-stamp);
    background: var(--status-nodata);
}

.status-segment[b-f297bz9e2k] {
    position: relative;
    display: block;
    width: 100%;
    height: var(--space-6);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-stamp);
    background: var(--status-nodata);
    cursor: default;
}

/* Keyboard focus ring — segments are focusable so the tooltip surfaces on
   :focus as well as :hover (FR-012), with no JavaScript. */
.status-segment:focus-visible[b-f297bz9e2k] {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
}

/* CSS-only tooltip: hidden until the segment is hovered OR focused. Default
   anchoring is centered over the segment (middle third of the bar). Width is
   bounded and the text wraps, so the tip never exceeds the bar (and thus is
   never cut by the bar's overflow-x: clip). */
.status-segment__tip[b-f297bz9e2k] {
    position: absolute;
    bottom: calc(100% + var(--space-1));
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    z-index: 1;
    max-width: min(14rem, 70vw);
    white-space: normal;
    text-align: center;
    padding: var(--space-1) var(--space-2);
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    color: var(--text-primary);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-stamp);
    box-shadow: var(--shadow-sticker);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Fix 2 — edge-aware anchoring so the leading/trailing tooltips grow INWARD
   and stay fully on-screen (the current-hour "Jetzt" tooltip no longer
   clips at the right viewport edge). */
.status-segment__tip--start[b-f297bz9e2k] {
    left: 0;
    right: auto;
    transform: none;
    text-align: left;
}

.status-segment__tip--end[b-f297bz9e2k] {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
}

.status-segment:hover .status-segment__tip[b-f297bz9e2k],
.status-segment:focus .status-segment__tip[b-f297bz9e2k],
.status-segment:focus-visible .status-segment__tip[b-f297bz9e2k] {
    opacity: 1;
    visibility: visible;
}

/* --- Legend ----------------------------------------------------------- */
.status-legend[b-f297bz9e2k] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-4);
}

.status-legend__item[b-f297bz9e2k] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.status-legend__label[b-f297bz9e2k] {
    font-family: var(--font-mono);
    font-size: var(--text-caption);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --- State → --status-* token map (SC-008) ----------------------------
   Severity rides TWO channels, not one. Colour alone cannot carry it: the
   brand owns a single alarm hue, and a ramp from the brightest orange the
   cream ground tolerates down to ink tops out around 2.6:1 per step — so
   no choice of values reaches 3:1 between three outage levels.

   Channel 1 is that luminance ramp, spread as far as it goes. Channel 2
   is a horizontal band texture whose weight escalates with severity:
   betriebsbereit is flat, and the ruling gets heavier the worse it is.
   Bands run across the segment, so they survive the 3 px segment width of
   a 320 px viewport where a diagonal hatch would dissolve; they also
   survive greyscale and colour-vision deficiency. Precedent: the dashed
   "Keine Daten" hairline below.

   Every value is a --status-* token (Principle V); the composite
   separation matrix lives in theme.css and in
   specs/022-status-page/contracts/status-view.md §4. */
.is-operational[b-f297bz9e2k] {
    background: var(--status-operational);
}

.is-degraded[b-f297bz9e2k] {
    background-color: var(--status-degraded);
    background-image: var(--status-band-degraded);
}

.is-partial[b-f297bz9e2k] {
    background-color: var(--status-partial);
    background-image: var(--status-band-partial);
}

.is-major[b-f297bz9e2k] {
    background-color: var(--status-major);
    background-image: var(--status-band-major);
}

.is-maintenance[b-f297bz9e2k] {
    background: var(--status-maintenance);
}

.is-nodata[b-f297bz9e2k] {
    background: var(--status-nodata);
    border-color: var(--status-nodata-border);
    /* Visibly distinct "no data" look — a dashed hairline reads as an empty /
       unmeasured hour, never confused with an operational segment (FR-019). */
    border-style: dashed;
}

/* --- Narrowest supported width ----------------------------------------
   At 320 px the page and card paddings together ate 96 px of a 320 px
   viewport, leaving the 48 hourly segments 2.5 px each and the axis
   labels under 2 px of clearance. Trading the generous desktop padding
   for content at this one breakpoint gives the bar ~48 px back — the
   segments widen by ~40 % and the axis gains real breathing room. */
@media (max-width: 430px) {
    .status-page[b-f297bz9e2k] {
        padding-inline: var(--space-3);
    }

    .status-banner[b-f297bz9e2k],
    .status-grid[b-f297bz9e2k],
    .status-legend[b-f297bz9e2k] {
        padding: var(--space-3);
    }

    .status-axis[b-f297bz9e2k] {
        gap: var(--space-3);
        letter-spacing: 0.08em;
    }
}
/* _content/Schnatter.Web/Components/QuotaIndicator.razor.rz.scp.css */
/* QuotaIndicator scoped styles (S04 T448; S20 editorial re-point).
   Token-only per Constitution V; the only allowed literals are the
   documented `1px` border (theme-tokens.md), `0%` initial fill width,
   `100%` height, and the percentage breakpoints.

   S20: the former translucent pill becomes an editorial progress chip — a --paper-card
   plate with a 1px ink rule, stamp-radius corners, mono uppercase label.
   Fill washes ride the token-folded feedback grounds (FR-011: orange is
   the signal channel; success stays türkis-dunkel). */

.quota-indicator[b-tqgn12qb7i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    align-items: stretch;
}

@media (min-width: 1024px) {
    .quota-indicator[b-tqgn12qb7i] {
        flex-direction: row;
        gap: var(--space-4);
    }
}

.quota-bar[b-tqgn12qb7i] {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-stamp);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    font-size: 0.75rem;
    min-width: 8rem;
}

.quota-bar__fill[b-tqgn12qb7i] {
    position: absolute;
    inset: 0;
    height: 100%;
    width: 0%;
    border-radius: inherit;
    transition: width var(--motion-snap) var(--ease-standard),
                background var(--motion-snap) var(--ease-standard);
    z-index: 0;
}

.quota-bar__label[b-tqgn12qb7i] {
    position: relative;
    z-index: 1;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--text-caption);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-primary);
}

.quota-bar--ok .quota-bar__fill[b-tqgn12qb7i] {
    background: var(--color-success-bg);
}

.quota-bar--warn .quota-bar__fill[b-tqgn12qb7i] {
    background: var(--color-warning-bg);
}

.quota-bar--block .quota-bar__fill[b-tqgn12qb7i] {
    background: var(--color-warning);
    opacity: 0.45;
}

@media (prefers-reduced-motion: reduce) {
    .quota-bar__fill[b-tqgn12qb7i] {
        transition: none;
    }
}

.quota-indicator[data-reduced-motion="true"] .quota-bar__fill[b-tqgn12qb7i] {
    transition: none;
}
/* _content/Schnatter.Web/Components/Shared/Chat/AliasPicker.razor.rz.scp.css */
/* S06 — alias picker. Tokens only. S20 editorial skin: paper chips
   (pill radius allowed — chips only, FR-004), indigo selection via the
   info channel; glow family retired (no box-shadow affordance). */

.alias-picker[b-0doq1mlpyq] {
    border: 0;
    padding: 0;
    margin: 0;
    display: inline-flex;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.alias-pill[b-0doq1mlpyq] {
    appearance: none;
    background: var(--paper-card);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-pill);
    color: var(--text-primary);
    padding: var(--space-2) var(--space-4);
    cursor: pointer;
    font-family: inherit;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    transition: border-color var(--motion-micro) var(--ease-standard),
                background var(--motion-micro) var(--ease-standard);
}

.alias-pill:hover[b-0doq1mlpyq],
.alias-pill:focus-visible[b-0doq1mlpyq] {
    border-color: var(--brand-indigo);
    outline: none;
}

.alias-pill__label[b-0doq1mlpyq] {
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
}

.alias-pill__sub[b-0doq1mlpyq] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

.alias-pill--active[b-0doq1mlpyq] {
    border-color: var(--brand-indigo);
    background: var(--color-info-bg);
}

.alias-pill--active .alias-pill__sub[b-0doq1mlpyq] {
    color: var(--brand-indigo);
}

.alias-pill--disabled[b-0doq1mlpyq] {
    cursor: not-allowed;
    opacity: 0.55;
}

.alias-pill--disabled:hover[b-0doq1mlpyq],
.alias-pill--disabled:focus-visible[b-0doq1mlpyq] {
    border-color: var(--rule-hairline);
}

/* ≤960px — collapse the picker to a single horizontally-scrollable strip:
   one ~32px line per model with the secondary sub-label hidden. This shrinks
   the head's vertical budget dramatically (~294px → ~80–90px combined with
   the one-line title) while keeping all three models one tap away. Extended
   from ≤640px to ≤960px so the narrow two-column band (641–~900px, where the
   wrapped-nav header is tall) keeps the panel head compact; ≥961px the full
   stacked-pill picker returns so the 1024/1366 desktop look is unchanged. */
@media (max-width: 960px) {
    .alias-picker[b-0doq1mlpyq] {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        max-width: 100%;
        min-width: 0;
    }

    .alias-pill[b-0doq1mlpyq] {
        /* Keep each pill at a tappable fixed size; they scroll, never shrink. */
        flex: 0 0 auto;
        padding: var(--space-1) var(--space-3);
    }

    .alias-pill__sub[b-0doq1mlpyq] {
        display: none;
    }
}
/* _content/Schnatter.Web/Components/Shared/Chat/AttachmentPreview.razor.rz.scp.css */
/* S08 T850 / S20 T030 — AttachmentPreview pre-send chip in the ChatInput
   area. Constitution V — tokens only. Every color references --brand-* /
   --color-* / --text-* / --paper-* / --rule-*; every spacing references
   --space-*; every radius references --radius-*. Zero hex literals,
   zero rgba() literals. */

.attachment-preview[b-qiir3wqyaw] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-stamp);
    background: var(--paper-card);
    border: 1px solid var(--rule-hairline);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    max-width: 100%;
}

.attachment-preview__thumb[b-qiir3wqyaw] {
    width: var(--space-6);
    height: var(--space-6);
    object-fit: cover;
    border-radius: var(--radius-stamp);
    flex: 0 0 auto;
}

.attachment-preview__icon[b-qiir3wqyaw] {
    font-size: 1.25rem;
    line-height: 1;
    flex: 0 0 auto;
}

.attachment-preview__meta[b-qiir3wqyaw] {
    display: inline-flex;
    flex-direction: column;
    gap: 0;
    min-width: 0;
}

.attachment-preview__filename[b-qiir3wqyaw] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18ch;
}

.attachment-preview__size[b-qiir3wqyaw],
.attachment-preview__pages[b-qiir3wqyaw] {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.attachment-preview__remove[b-qiir3wqyaw] {
    margin-left: var(--space-1);
    background: transparent;
    color: var(--text-secondary);
    border: 0;
    cursor: pointer;
    padding: 0 var(--space-1);
    border-radius: var(--radius-stamp);
    font-size: 1rem;
    line-height: 1;
    transition: color var(--motion-micro) var(--ease-standard), background var(--motion-micro) var(--ease-standard);
}

.attachment-preview__remove:hover[b-qiir3wqyaw],
.attachment-preview__remove:focus-visible[b-qiir3wqyaw] {
    color: var(--ink);
    background: var(--color-warning-bg);
}
/* _content/Schnatter.Web/Components/Shared/Chat/AttachmentThumbnail.razor.rz.scp.css */
/* S08 T851 / S20 T030 — AttachmentThumbnail in-bubble rendering (editorial
   light ground). Constitution V — tokens only. */

.attachment-thumb[b-gbfvrr4z9o] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-stamp);
    background: var(--paper-card);
    border: 1px solid var(--rule-hairline);
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    line-height: 1.3;
    transition: border-color var(--motion-micro) var(--ease-standard), background var(--motion-micro) var(--ease-standard);
    max-width: 100%;
}

.attachment-thumb:hover[b-gbfvrr4z9o],
.attachment-thumb:focus-visible[b-gbfvrr4z9o] {
    border-color: var(--brand-indigo);
    background: var(--paper-deep);
}

.attachment-thumb--image[b-gbfvrr4z9o] {
    padding: 0;
    overflow: hidden;
}

.attachment-thumb__image[b-gbfvrr4z9o] {
    display: block;
    max-width: 280px;
    max-height: 280px;
    object-fit: contain;
    border-radius: var(--radius-stamp);
}

.attachment-thumb__icon[b-gbfvrr4z9o] {
    font-size: 1.25rem;
    line-height: 1;
}

.attachment-thumb__filename[b-gbfvrr4z9o] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 24ch;
}

.attachment-thumb__badge[b-gbfvrr4z9o] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    padding: 0 var(--space-1);
    border-radius: var(--radius-stamp);
    background: var(--paper-deep);
}
/* _content/Schnatter.Web/Components/Shared/Chat/ChatInput.razor.rz.scp.css */
/* S06 — chat input area (composer). Tokens only. S20 editorial skin:
   builds on the .print-box + .form-control patterns from theme.css. */

.chat-input[b-wqcms4fx7i] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-box);
    /* Shrink with the column instead of imposing a content-width floor. */
    min-width: 0;
    /* Fixed-size band inside the .chat-panel flex column: the composer never
       shrinks/grows, so it stays pinned to the bottom while the message list
       (the only flex:1 1 auto child) absorbs all vertical shrink. This is
       what keeps the composer + disclaimer on-screen on phones. */
    flex: 0 0 auto;
}

/* Narrow-band footprint trim (Lever C, ≤960px only — the tablet two-column
   band where the wrapped-nav header is tall). Tighter padding + gap shave a
   little composer height so the disclaimer stays inside the bounded panel;
   the textarea min-height (usability) is untouched. ≥961px keeps the full
   composer so the 1024/1366 desktop look is unchanged. */
@media (max-width: 960px) {
    .chat-input[b-wqcms4fx7i] {
        gap: var(--space-2);
        padding: var(--space-3);
    }
}

.chat-input__label[b-wqcms4fx7i] {
    display: none;
}

.chat-input__textarea[b-wqcms4fx7i] {
    width: 100%;
    min-height: 4.5rem;
    max-height: 16rem;
    resize: vertical;
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-box);
    padding: var(--space-3);
    font-family: inherit;
    font-size: 1rem;
    line-height: 1.5;
    transition: border-color var(--motion-micro) var(--ease-standard),
                box-shadow var(--motion-micro) var(--ease-standard);
}

.chat-input__textarea:focus-visible[b-wqcms4fx7i] {
    border-color: var(--brand-indigo);
    box-shadow: var(--shadow-focus-ring);
    outline: none;
}

.chat-input__textarea:disabled[b-wqcms4fx7i] {
    opacity: 0.55;
    cursor: not-allowed;
}

.chat-input__row[b-wqcms4fx7i] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.chat-input__hint[b-wqcms4fx7i] {
    color: var(--text-secondary);
    font-size: 0.8rem;
    margin: 0;
}

/* Persistent AI disclaimer — muted, centered, sits just below the send row.
   Distinct from the dynamic .chat-input__hint status line. Tokens only. */
.chat-input__disclaimer[b-wqcms4fx7i] {
    margin: 0;
    text-align: center;
    color: var(--ink-60);
    font-size: 0.75rem;
    line-height: 1.4;
}

.chat-input__actions[b-wqcms4fx7i] {
    display: inline-flex;
    gap: var(--space-2);
}

.chat-input__send:disabled[b-wqcms4fx7i],
.chat-input__cancel:disabled[b-wqcms4fx7i] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* S07 — tool-status slot lives ABOVE the textarea; the slot is empty
   (display: none via the absence of children) when no tool is in flight. */
.chat-input__tool-status[b-wqcms4fx7i] {
    display: flex;
    flex-direction: row;
    gap: var(--space-2);
    align-items: center;
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--rule-hairline);
    margin-bottom: var(--space-2);
}

/* S08 — staged-attachment chip strip above the textarea. */
.chat-input__attachments[b-wqcms4fx7i] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding-bottom: var(--space-2);
    border-bottom: 1px dashed var(--rule-hairline);
    margin-bottom: var(--space-2);
}

/* S08 — file picker rendered as a brand-pill-styled <label>. The actual
   <InputFile> is positioned absolutely + opacity:0 so it intercepts the
   click on the pill. */
.chat-input__attach[b-wqcms4fx7i] {
    position: relative;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.chat-input__file-input[b-wqcms4fx7i] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
/* _content/Schnatter.Web/Components/Shared/Chat/ChatMessageBubble.razor.rz.scp.css */
/* S06 — single chat-bubble. Tokens only.
   S20 editorial skin: paper bubble plate with 1px ink rule, square
   corners (FR-004), mono metadata captions; role tint via the indigo
   info channel, failure via the orange signal channel (FR-011). */

.message-row[b-fce9zxchwp] {
    display: flex;
    width: 100%;
    /* Denser rhythm (req 7): between-message gap tightened --space-4 → --space-3. */
    margin-block-end: var(--space-3);
}

.message-row--user[b-fce9zxchwp] {
    justify-content: flex-end;
}

.message-row--assistant[b-fce9zxchwp] {
    justify-content: flex-start;
}

.message-row__truncation-marker[b-fce9zxchwp] {
    width: 100%;
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    margin-block-end: var(--space-2);
    opacity: 0.8;
}

.message-bubble[b-fce9zxchwp] {
    /* Bubbles use ~75% of the chat canvas at maximum width (up from the prior
       72ch≈60% cap). The 75% is the binding constraint on normal desktop
       canvases; the generous 100ch ceiling only caps line length on
       ultra-wide monitors so prose stays readable. */
    max-width: min(100ch, 75%);
    /* Pair with overflow-wrap:anywhere so a long unbroken token wraps inside
       the bubble rather than establishing a min-content floor that widens the
       message list (and the whole workspace) on narrow viewports. */
    min-width: 0;
    padding: var(--space-4) var(--space-5);
    line-height: 1.55;
    color: var(--text-primary);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    transition: border-color var(--motion-snap) var(--ease-standard);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.message-bubble--user[b-fce9zxchwp] {
    border-color: var(--brand-indigo);
    background: var(--color-info-bg);
}

.message-bubble--assistant[b-fce9zxchwp] {
    border-color: var(--rule-strong);
}

.message-bubble--system[b-fce9zxchwp] {
    border-style: dashed;
    border-color: var(--rule-hairline);
    color: var(--text-secondary);
}

.message-bubble__role[b-fce9zxchwp] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-indigo);
    font-weight: 700;
    margin-block-end: var(--space-2);
}

.message-bubble__body[b-fce9zxchwp] {
    /* This body hosts ONLY <MarkdownContent> (attachments, provided-files,
       failure hint and caption are siblings OUTSIDE it). The old
       `white-space: pre-wrap` was a vestige of a removed raw-text path — and
       actively harmful: Markdig emits a literal "\n" between every block, which
       pre-wrap preserved as a full ~1-line blank gap, so paragraphs and list
       items rendered double-spaced. `normal` collapses those source newlines so
       the markdown block margins govern the rhythm; the reset is applied HERE
       (not only on the inner .markdown-content) so it reliably cascades into
       both the streaming server-markdown and the finalized island via
       inheritance. Tighter leading (1.4) cascades the same way. <pre>/<code>
       keep their own white-space (UA `pre` + explicit `pre` on `pre code`). */
    white-space: normal;
    line-height: 1.4;
}

/* S08 — attachment-thumbnail strip inside a bubble (between role label
   and body text). Tokens only. */
.message-bubble__attachments[b-fce9zxchwp] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block-end: var(--space-3);
}

.message-bubble__caption[b-fce9zxchwp] {
    margin-block-start: var(--space-3);
    display: flex;
    gap: var(--space-3);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    color: var(--text-muted);
}

.message-bubble__hint[b-fce9zxchwp] {
    margin-block-start: var(--space-3);
    color: var(--color-signal-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.is-streaming[b-fce9zxchwp]::after {
    content: "▍";
    display: inline-block;
    margin-inline-start: var(--space-1);
    color: var(--brand-indigo);
    animation: caret-blink-b-fce9zxchwp 1s steps(2, end) infinite;
}

.is-failed[b-fce9zxchwp] {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

@keyframes caret-blink-b-fce9zxchwp {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

@media (max-width: 640px) {
    .message-bubble[b-fce9zxchwp] {
        max-width: 92%;
    }
}
/* _content/Schnatter.Web/Components/Shared/Chat/ChatMessageList.razor.rz.scp.css */
/* S06 — message-list scrolling surface. Tokens only. */

.chat-message-list[b-5bb2lrlshq] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    min-height: 0;
    /* Inline-axis shrink: without this the list keeps its content min-content
       width and widens the column instead of clipping; overflow-x:hidden then
       does its job. */
    min-width: 0;
    padding-inline: var(--space-2);
    /* Trim the internal top/bottom padding (was --space-4) — less wasted
       vertical room at the head/foot of the conversation. */
    padding-block: var(--space-2);
    scroll-behavior: smooth;
}

.chat-message-list__item[b-5bb2lrlshq] {
    width: 100%;
}

.chat-message-list__empty[b-5bb2lrlshq] {
    align-self: center;
    margin-block: auto;
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-8);
}
/* _content/Schnatter.Web/Components/Shared/Chat/ConversationContextMenu.razor.rz.scp.css */
/* S06 T710 — conversation context menu (popover). Tokens only. */

.ctx-menu[b-c9f424xih8] {
    position: absolute;
    z-index: 10;
    min-width: 14rem;
    padding: var(--space-2);
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    border-radius: var(--radius-box);
    box-shadow: var(--shadow-md);
}

.ctx-menu__item[b-c9f424xih8] {
    appearance: none;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: var(--radius-box);
    padding: var(--space-2) var(--space-3);
    text-align: start;
    font: inherit;
    cursor: pointer;
    transition: background-color var(--motion-micro) var(--ease-standard),
                border-color var(--motion-micro) var(--ease-standard);
}

.ctx-menu__item:hover[b-c9f424xih8],
.ctx-menu__item:focus-visible[b-c9f424xih8] {
    background: var(--paper-deep);
    border-color: var(--rule-hairline);
    outline: none;
}

.ctx-menu__item--danger[b-c9f424xih8] {
    color: var(--color-signal-text);
}

.ctx-menu__item--danger:hover[b-c9f424xih8],
.ctx-menu__item--danger:focus-visible[b-c9f424xih8] {
    background: var(--color-warning-bg);
    border-color: var(--color-warning-border);
}
/* _content/Schnatter.Web/Components/Shared/Chat/ConversationSidebar.razor.rz.scp.css */
/* S06 T709 — conversation sidebar list. Tokens only. */

.conv-sidebar[b-7r59y6kaw2] {
    padding: var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    /* Sizing relocated here from ChatDetail's dead `.chat-sidebar` rules.
       On desktop the nav is flex:1 inside the .chat-shell__aside-body
       column, so min-height:0 + overflow-y:auto let a long conversation
       list scroll WITHIN the bordered card instead of overflowing the
       clipped shell. Invisible for normal (short) lists, so the desktop
       look is unchanged. min-width:0 lets long titles ellipsis rather than
       widening the column. */
    flex: 1 1 auto;
    min-height: 0;
    min-width: 0;
    overflow-y: auto;
}

.conv-sidebar__head[b-7r59y6kaw2] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

/* ≤640px the sidebar lives inside a <details> whose <summary> ALREADY shows
   "Konversationen" + a "+ Neuer Chat" button. Hide this component's own head
   (heading + new-chat button) so the expanded panel doesn't render a second
   stacked header + button. Markup + data-testids stay (CSS-hidden only);
   ≥641px (desktop/tablet two-column, no summary) the head is shown as before. */
@media (max-width: 640px) {
    .conv-sidebar__head[b-7r59y6kaw2] {
        display: none;
    }
}

.conv-sidebar__list[b-7r59y6kaw2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.conv-sidebar__empty[b-7r59y6kaw2] {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

.conv-sidebar__more[b-7r59y6kaw2] {
    align-self: flex-start;
}

.conv-sidebar__archived summary[b-7r59y6kaw2] {
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 0.85rem;
    padding-block: var(--space-2);
}

.conv-sidebar__archived ul[b-7r59y6kaw2] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.conv-entry[b-7r59y6kaw2] {
    position: relative;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    border: 1px solid transparent;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-2);
    transition: background-color var(--motion-micro) var(--ease-standard),
                border-color var(--motion-micro) var(--ease-standard);
}

.conv-entry:hover[b-7r59y6kaw2],
.conv-entry:focus-within[b-7r59y6kaw2] {
    background: var(--paper-deep);
    border-color: var(--rule-hairline);
}

.conv-entry--current[b-7r59y6kaw2] {
    background: var(--color-info-bg);
    border-color: var(--brand-indigo);
}

.conv-entry--archived[b-7r59y6kaw2] {
    opacity: 0.75;
}

.conv-entry__link[b-7r59y6kaw2] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    color: var(--text-primary);
    text-decoration: none;
    min-width: 0;
}

.conv-entry__title[b-7r59y6kaw2] {
    font-weight: 600;
    font-size: 0.95rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conv-entry__hint[b-7r59y6kaw2] {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.conv-entry__menu[b-7r59y6kaw2] {
    appearance: none;
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-box);
    padding: var(--space-1) var(--space-2);
    font: inherit;
    cursor: pointer;
    transition: background-color var(--motion-micro) var(--ease-standard),
                border-color var(--motion-micro) var(--ease-standard);
}

.conv-entry__menu:hover[b-7r59y6kaw2],
.conv-entry__menu:focus-visible[b-7r59y6kaw2] {
    background: var(--paper-deep);
    border-color: var(--rule-hairline);
    outline: none;
}

.conv-entry__warn[b-7r59y6kaw2] {
    grid-column: 1 / -1;
    margin: var(--space-1) 0 0;
    font-size: 0.75rem;
    color: var(--color-signal-text);
}

/* S16 T1634 / FR-014 / FR-015 — unread-marker dot. Positioned
   absolute inside the .conv-entry grid cell so it floats over the
   top-right corner of the row without disturbing the existing
   1fr/auto layout (title + ⋯ menu). Pure token resolution: the
   colour resolves through --chat-unread-dot → --brand-indigo
   (S20 R10) so designers can re-point the alias without touching
   this file. */
.conv-entry__unread-dot[b-7r59y6kaw2] {
    position: absolute;
    top: var(--space-1);
    right: var(--space-1);
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-pill);
    background: var(--chat-unread-dot);
    pointer-events: none;
}
/* _content/Schnatter.Web/Components/Shared/Chat/FileCard.razor.rz.scp.css */
/* S19 T039 / S20 T030 — FileCard in-bubble rendering (editorial light ground).
   Constitution V — design tokens only. */

.file-card[b-l9f89syf5y] {
    display: inline-flex;
    align-items: center;
    /* Narrow chat column (e.g. open markdown side-panel): let the
       action pills wrap onto their own row instead of crushing the
       meta column to per-glyph line breaks. */
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-stamp);
    background: var(--paper-card);
    border: 1px solid var(--rule-hairline);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    max-width: 100%;
}

.file-card__icon[b-l9f89syf5y] {
    font-size: 1.25rem;
    line-height: 1;
}

.file-card__meta[b-l9f89syf5y] {
    display: inline-flex;
    flex-direction: column;
    min-width: 0;
}

.file-card__filename[b-l9f89syf5y] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 28ch;
}

.file-card__info[b-l9f89syf5y] {
    color: var(--text-secondary);
    font-size: 0.75rem;
    /* Same narrow-column guard as the filename — truncate, never
       wrap per glyph. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* S19 T064/T069 — shared affordance shape for download (anchor),
   preview (anchor, new tab) and the markdown view button. */
.file-card__action[b-l9f89syf5y] {
    margin-left: var(--space-2);
    padding: var(--space-1) var(--space-2);
    border-radius: var(--radius-stamp);
    border: 1px solid var(--rule-hairline);
    background: transparent;
    color: var(--text-primary);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--motion-micro) var(--ease-standard), background var(--motion-micro) var(--ease-standard);
}

.file-card__action:hover[b-l9f89syf5y],
.file-card__action:focus-visible[b-l9f89syf5y] {
    border-color: var(--brand-indigo);
    background: var(--paper-deep);
}

.file-card--tombstone[b-l9f89syf5y] {
    background: var(--paper-deep);
    border-style: dashed;
    color: var(--text-secondary);
}

.file-card--tombstone .file-card__filename[b-l9f89syf5y] {
    text-decoration: line-through;
}

/* S19 T056 — tombstone label („Datei gelöscht" / „Datei abgelaufen"). */
.file-card__tombstone[b-l9f89syf5y] {
    margin-left: var(--space-2);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-style: italic;
    white-space: nowrap;
}
/* _content/Schnatter.Web/Components/Shared/Chat/MarkdownContent.razor.rz.scp.css */
/* =============================================================================
   S17 T031 / S20 T028 — MarkdownContent island styles (editorial light ground).

   Token-only per Constitution V — every colour/space/radius resolves to a
   --brand-*/--code-*/--space-*/--radius-* token declared in wwwroot/css/theme.css.

   SCOPED-CSS /[b-jt5gw8v993]  NOTE
   ------------------------
   The component markup is only:  <div class="markdown-content">@_html</div>
   `@_html` is a MarkupString — raw, sanitized HTML injected at runtime by
   IChatMarkdownRenderer. Blazor's scoped-CSS rewriter stamps the `b-xxxx`
   scope attribute ONLY on elements that exist statically in the .razor
   markup[b-jt5gw8v993], i.e. just the `.markdown-content` wrapper. The rendered children
   (h1..h6, p, pre, table, blockquote, …) never receive the attribute[b-jt5gw8v993], so a
   plain scoped selector like `pre[b-jt5gw8v993] {}` would compile to `pre[b-xxxx]` and
   match NOTHING. We therefore reach every child through `::deep`:

       .markdown-content[b-jt5gw8v993]  <selector>

   which compiles to `.markdown-content[b-xxxx] <selector>` — the wrapper
   keeps its scope, the descendants are matched globally beneath it. This is
   the documented Blazor pattern for styling MarkupString / third-party DOM.
   ============================================================================= */

.markdown-content[b-jt5gw8v993] {
    /* Container query / overflow guard lives on the children; the wrapper
       just establishes a clean block flow inside the bubble body. */
    color: var(--text-primary);
    /* Density (the white-space reset + tighter 1.4 leading) is OWNED by the
       parent .message-bubble__body so it reliably cascades into both the
       streaming server-markdown and the finalized island via inheritance (a
       scoped rule on this wrapper did not win the cascade at runtime — see that
       rule's comment). We keep `white-space: normal` here as defense-in-depth:
       Markdig emits a literal "\n" between blocks that an inherited `pre-wrap`
       would preserve as full blank lines. <pre>/<code> keep their own
       white-space (UA `pre` + explicit `pre` on `pre code` below). */
    white-space: normal;
}

/* Collapse the outer margins so the rendered block sits flush inside the
   bubble padding (no double top/bottom gap). */
.markdown-content[b-jt5gw8v993]  > :first-child {
    margin-block-start: 0;
}

.markdown-content[b-jt5gw8v993]  > :last-child {
    margin-block-end: 0;
}

/* --- Headings — tight ramp so h1 never dominates a chat bubble ------------- */

.markdown-content[b-jt5gw8v993]  h1,
.markdown-content[b-jt5gw8v993]  h2,
.markdown-content[b-jt5gw8v993]  h3,
.markdown-content[b-jt5gw8v993]  h4,
.markdown-content[b-jt5gw8v993]  h5,
.markdown-content[b-jt5gw8v993]  h6 {
    font-weight: 700;
    line-height: 1.25;
    /* Denser rhythm (req 7): heading top gap tightened --space-4 → --space-3. */
    margin-block: var(--space-3) var(--space-2);
    color: var(--text-primary);
}

.markdown-content[b-jt5gw8v993]  h1 { font-size: 1.35rem; font-weight: 800; }
.markdown-content[b-jt5gw8v993]  h2 { font-size: 1.2rem; }
.markdown-content[b-jt5gw8v993]  h3 { font-size: 1.05rem; }
.markdown-content[b-jt5gw8v993]  h4 { font-size: 0.95rem; }
.markdown-content[b-jt5gw8v993]  h5 { font-size: 0.875rem; }

.markdown-content[b-jt5gw8v993]  h6 {
    font-size: 0.8rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

/* --- Paragraphs ----------------------------------------------------------- */

/* Denser rhythm (req 7): inter-block gap tightened --space-3 → --space-2 for
   paragraphs, lists, code, tables and blockquotes so message text sits
   tighter without the lines ever touching. */
/* Denser rhythm (req 7): the inter-paragraph gap is the dominant "air" in prose
   answers, so paragraphs get the tightest block gap (--space-1, 0.25rem). Other
   blocks (lists, code, tables, blockquotes) keep --space-2 below. Because
   adjacent block margins collapse to the paragraph's bottom margin (the list's
   top margin is 0), this also governs the p→ul/ol adjacency. */
.markdown-content[b-jt5gw8v993]  p {
    margin-block: 0 var(--space-1);
}

/* --- Lists (incl. nesting) ------------------------------------------------ */

.markdown-content[b-jt5gw8v993]  ul,
.markdown-content[b-jt5gw8v993]  ol {
    margin-block: 0 var(--space-2);
    padding-inline-start: var(--space-5);
}

.markdown-content[b-jt5gw8v993]  li {
    margin-block-end: var(--space-1);
}

/* Loose lists: Markdig wraps each item's text in a <p> when the source has
   blank lines between items. That inner paragraph would stack ITS block gap on
   top of the <li> margin, doubling the white space between items. Zero the
   inner paragraph margins so item spacing is governed solely by the (tight) li
   margin + leading. Tight lists (no inner <p>) are unaffected. */
.markdown-content[b-jt5gw8v993]  li > p {
    margin-block: 0;
}

/* Nested lists tighten up and lose their outer gap. */
.markdown-content[b-jt5gw8v993]  li > ul,
.markdown-content[b-jt5gw8v993]  li > ol {
    margin-block: var(--space-1) 0;
}

.markdown-content[b-jt5gw8v993]  li::marker {
    color: var(--brand-indigo);
}

/* GFM task lists — disabled checkboxes, GitHub-ish. */
.markdown-content[b-jt5gw8v993]  li:has(> input[type="checkbox"]) {
    list-style: none;
    margin-inline-start: calc(-1 * var(--space-4));
}

.markdown-content[b-jt5gw8v993]  input[type="checkbox"][disabled] {
    appearance: none;
    -webkit-appearance: none;
    width: 1em;
    height: 1em;
    margin-inline-end: var(--space-2);
    vertical-align: -0.125em;
    border: 1px solid var(--rule-hairline);
    border-radius: var(--radius-stamp);
    background: var(--bg-input);
    cursor: default;
}

.markdown-content[b-jt5gw8v993]  input[type="checkbox"][disabled]:checked {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}

.markdown-content[b-jt5gw8v993]  input[type="checkbox"][disabled]:checked::after {
    content: "";
    display: block;
    width: 0.3em;
    height: 0.6em;
    margin: 0 auto;
    transform: translateY(-0.05em) rotate(45deg);
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink);
}

/* --- Inline code — subtle tinted chip ------------------------------------- */

.markdown-content[b-jt5gw8v993]  code {
    font-family: var(--font-mono);
    font-size: 0.875em;
    color: var(--inline-code-text);
    background: var(--inline-code-bg);
    border: 1px solid var(--inline-code-border);
    border-radius: var(--radius-stamp);
    padding: 0.1em 0.35em;
    word-break: break-word;
}

/* --- Fenced code blocks --------------------------------------------------- */

.markdown-content[b-jt5gw8v993]  pre {
    position: relative;
    margin-block: 0 var(--space-2);
    padding: var(--space-4);
    background: var(--code-bg);
    border: 1px solid var(--code-border);
    border-radius: var(--radius-box);
    /* FR-009 — long lines scroll INSIDE the block; never push the column. */
    overflow-x: auto;
    overflow-y: hidden;
}

/* Reset the inline-chip treatment for code that lives inside a <pre>. */
.markdown-content[b-jt5gw8v993]  pre code {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--code-text);
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    white-space: pre;
    word-break: normal;
}

/* --- Copy-code button (button.md-copy-btn) -------------------------------- */

.markdown-content[b-jt5gw8v993]  .md-copy-btn {
    position: absolute;
    top: var(--space-2);
    right: var(--space-2);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2);
    font-family: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    color: var(--light-80);
    background: var(--code-bg);
    border: 1px solid var(--light-25);
    border-radius: var(--radius-stamp);
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--motion-micro) var(--ease-standard), color var(--motion-micro) var(--ease-standard), border-color var(--motion-micro) var(--ease-standard);
}

/* Reveal on hover/focus within the code block, or when focused directly. */
.markdown-content[b-jt5gw8v993]  pre:hover .md-copy-btn,
.markdown-content[b-jt5gw8v993]  pre:focus-within .md-copy-btn,
.markdown-content[b-jt5gw8v993]  .md-copy-btn:focus-visible {
    opacity: 1;
}

.markdown-content[b-jt5gw8v993]  .md-copy-btn:hover {
    color: var(--code-text);
    border-color: var(--light-80);
}

.markdown-content[b-jt5gw8v993]  .md-copy-btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus-ring);
    color: var(--code-text);
}

/* Transient confirmation state toggled by the copy interop. */
.markdown-content[b-jt5gw8v993]  .md-copy-btn.is-copied {
    opacity: 1;
    color: var(--code-copy-success);
    border-color: var(--code-copy-success);
}

/* --- Tables --------------------------------------------------------------- */

/* Wrap wide tables so they scroll instead of overflowing the column. The
   sanitized output is a bare <table>; we scroll on the table itself via a
   block display + max-width so no wrapper element is required. */
.markdown-content[b-jt5gw8v993]  table {
    display: block;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    margin-block: 0 var(--space-2);
    border-collapse: collapse;
    font-size: 0.9rem;
}

.markdown-content[b-jt5gw8v993]  th,
.markdown-content[b-jt5gw8v993]  td {
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--table-border);
    text-align: start;
}

.markdown-content[b-jt5gw8v993]  thead th {
    background: var(--table-header-bg);
    color: var(--table-header-text);
    font-weight: 700;
}

.markdown-content[b-jt5gw8v993]  tbody tr:nth-child(even) {
    background: var(--table-row-alt-bg);
}

/* Honour GFM column alignment (th[align]/td[align]). */
.markdown-content[b-jt5gw8v993]  th[align="center"],
.markdown-content[b-jt5gw8v993]  td[align="center"] { text-align: center; }

.markdown-content[b-jt5gw8v993]  th[align="right"],
.markdown-content[b-jt5gw8v993]  td[align="right"] { text-align: right; }

.markdown-content[b-jt5gw8v993]  th[align="left"],
.markdown-content[b-jt5gw8v993]  td[align="left"] { text-align: left; }

/* --- Blockquotes ---------------------------------------------------------- */

.markdown-content[b-jt5gw8v993]  blockquote {
    margin-block: 0 var(--space-2);
    margin-inline: 0;
    padding: var(--space-2) var(--space-4);
    border-inline-start: 2px solid var(--blockquote-accent);
    border-radius: var(--radius-box);
    background: var(--blockquote-bg);
    color: var(--text-primary);
}

.markdown-content[b-jt5gw8v993]  blockquote > :last-child {
    margin-block-end: 0;
}

/* --- Emphasis / strikethrough / links / rule ------------------------------ */

.markdown-content[b-jt5gw8v993]  strong {
    font-weight: 700;
    color: var(--text-primary);
}

.markdown-content[b-jt5gw8v993]  em {
    font-style: italic;
}

.markdown-content[b-jt5gw8v993]  del {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.markdown-content[b-jt5gw8v993]  a {
    color: var(--brand-indigo);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--motion-micro) var(--ease-standard);
}

.markdown-content[b-jt5gw8v993]  a:hover {
    color: var(--ink);
}

.markdown-content[b-jt5gw8v993]  a:focus-visible {
    outline: none;
    border-radius: var(--radius-stamp);
    box-shadow: var(--shadow-focus-ring);
    color: var(--ink);
}

.markdown-content[b-jt5gw8v993]  hr {
    height: 1px;
    margin-block: var(--space-4);
    border: 0;
    background: var(--rule-hairline);
}

/* Images inside a bubble stay within the column. */
.markdown-content[b-jt5gw8v993]  img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-stamp);
}

/* --- Mermaid diagram container (S20 R6/R7: diagrams are print artifacts,
   not terminals — paper-card panel with an ink rule, square corners) ------- */

.markdown-content[b-jt5gw8v993]  pre.mermaid {
    display: flex;
    justify-content: center;
    padding: var(--space-4);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    overflow-x: auto;
}

.markdown-content[b-jt5gw8v993]  pre.mermaid svg,
.markdown-content[b-jt5gw8v993]  svg {
    max-width: 100%;
    height: auto;
}
/* _content/Schnatter.Web/Components/Shared/Chat/MarkdownViewerPanel.razor.rz.scp.css */
/* S19 T067 / S20 T028 — markdown side panel (US4), editorial print-box plate.
   Constitution V — design tokens only. */

.markdown-viewer-panel[b-goz5k91b6x] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    background: var(--paper-card);
    border: 1px solid var(--rule-strong);
    border-radius: var(--radius-box);
    min-width: 0;
    align-self: flex-start;
    position: sticky;
    top: var(--space-5);
    max-height: calc(100vh - 10rem);
    overflow: auto;
}

.markdown-viewer-panel__head[b-goz5k91b6x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--space-3);
}

.markdown-viewer-panel__title[b-goz5k91b6x] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.markdown-viewer-panel__close[b-goz5k91b6x] {
    flex-shrink: 0;
}

.markdown-viewer-panel__body[b-goz5k91b6x] {
    min-width: 0;
    overflow-wrap: anywhere;
}

.markdown-viewer-panel__loading[b-goz5k91b6x],
.markdown-viewer-panel__unavailable[b-goz5k91b6x] {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin: 0;
}
/* _content/Schnatter.Web/Components/Shared/Chat/RetentionSelector.razor.rz.scp.css */
/* S06 T710a — retention selector. Tokens only. */

.retention-selector[b-ulfxr5nlu4] {
    border: 0;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

.retention-option[b-ulfxr5nlu4] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-box);
    cursor: pointer;
    color: var(--text-primary);
    font-size: 0.85rem;
}

.retention-option:hover[b-ulfxr5nlu4],
.retention-option:focus-within[b-ulfxr5nlu4] {
    background: var(--paper-deep);
}

.retention-option--active[b-ulfxr5nlu4] {
    background: var(--color-info-bg);
    color: var(--text-primary);
    font-weight: 700;
}

.retention-option input[b-ulfxr5nlu4] {
    accent-color: var(--brand-indigo);
}
/* _content/Schnatter.Web/Components/Shared/Chat/ToolCallStatusBubble.razor.rz.scp.css */
/* S07 T761 / T795 — ToolCallStatusBubble paper-chip component.
   Tokens only — every color references a --brand-* / --color-* /
   --text-* / rule token, every spacing references --space-*, every
   radius references --radius-*. S20 editorial skin: status reads via
   the feedback channels (FR-011) — running = info/indigo, success =
   tuerkis-dunkel, failure = orange signal. */

.tool-call-bubble[b-9ygwcure75] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    background: var(--paper-card);
    border: 1px solid var(--rule-hairline);
    color: var(--text-primary);
    font-size: 0.85rem;
    line-height: 1.3;
    transition: border-color var(--motion-micro) var(--ease-standard),
                background var(--motion-micro) var(--ease-standard);
}

.tool-call-bubble--running[b-9ygwcure75] {
    border-color: var(--color-info-border);
    background: var(--color-info-bg);
}

.tool-call-bubble--completed[b-9ygwcure75] {
    border-color: var(--color-success-border);
    background: var(--color-success-bg);
}

.tool-call-bubble--failed[b-9ygwcure75] {
    border-color: var(--color-warning-border);
    background: var(--color-warning-bg);
}

.tool-call-bubble__spinner[b-9ygwcure75] {
    width: var(--space-3);
    height: var(--space-3);
    border-radius: var(--radius-pill);
    border: 2px solid var(--rule-faint);
    border-top-color: var(--brand-indigo);
    animation: tool-call-bubble-spin-b-9ygwcure75 0.8s linear infinite;
}

.tool-call-bubble__icon[b-9ygwcure75] {
    font-weight: 700;
}

/* P17/FR-016 — the glyph is ink, not the channel colour. Painted in its
   own channel it sat on that channel's tint: the completed tick measured
   1.50:1 and the failed cross 3.41:1, both under the 4.5:1 bar. The bubble
   keeps its tint ground and signal border, so the state still reads; the
   glyph is aria-hidden and .tool-call-bubble__label carries the German
   state word, so nothing here depends on colour alone (1.4.1). */
.tool-call-bubble--completed .tool-call-bubble__icon[b-9ygwcure75],
.tool-call-bubble--failed .tool-call-bubble__icon[b-9ygwcure75] {
    color: var(--ink);
}

.tool-call-bubble__label[b-9ygwcure75] {
    font-weight: 500;
}

.tool-call-bubble__meta[b-9ygwcure75] {
    font-family: var(--font-mono);
    color: var(--text-secondary);
    font-size: 0.8rem;
}

@keyframes tool-call-bubble-spin-b-9ygwcure75 {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .tool-call-bubble__spinner[b-9ygwcure75] {
        animation: none;
    }
}
/* _content/Schnatter.Web/Components/Shared/Chat/TruncationMarker.razor.rz.scp.css */
/* S06 — truncation marker. Tokens only. */

.truncation-marker[b-ukqurgrclz] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding-block: var(--space-3);
    color: var(--text-secondary);
}

.truncation-marker__rule[b-ukqurgrclz] {
    flex: 1 1 0;
    height: 1px;
    background: var(--rule-hairline);
}

.truncation-marker__label[b-ukqurgrclz] {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--brand-indigo);
    font-weight: 700;
}
/* _content/Schnatter.Web/Components/Shared/PaperBackdrop.razor.rz.scp.css */
/* PaperBackdrop scoped CSS — intentionally empty.
   The visual rules for .paper-backdrop (fixed var(--paper) ground,
   z-index:-1) and .paper-grain (feTurbulence data-URI overlay,
   mix-blend-mode: multiply, opacity .5 — no hex/rgb literals in the
   data-URI) live in theme.css §Paper backdrop so the global
   prefers-reduced-motion kill-switch and the token system govern them.
   Tokens only — Constitution V. */
/* _content/Schnatter.Web/Components/Shared/ToastHost.razor.rz.scp.css */
/* ToastHost scoped CSS — layout adjustments only.
   The visual rules for .toast-notification (fixed bottom-center placement
   + z-index unchanged — Constitution V; S20 print-stamp skin: --paper-card
   plate, 2px ink rule, mono uppercase, --shadow-sticker) live in
   theme.css. No colour / spacing / radius / shadow literal appears
   here — Constitution V. */

.toast-host[b-tglkl71dge] {
    /* Landmark region with no intrinsic layout — toasts position themselves
       via the fixed .toast-notification rules in theme.css. */
}