@import '_content/Kanine.Presentation.Pages/Kanine.Presentation.Pages.cn96h3lsfe.bundle.scp.css';
@import '_content/Kanine.Presentation/Kanine.Presentation.7dgcs5r6r2.bundle.scp.css';

/* _content/Kanine.Web/Components/Feedback/DiffView.razor.rz.scp.css */
/* Readable unified-diff view (owner-directed 2026-07-14) — per-file, per-line +/- rows. */
.kl-diffview[b-s0s4tlxrms] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
    font-size: 0.78rem;
    line-height: 1.5;
}

.kl-diffview-empty[b-s0s4tlxrms] {
    color: var(--k-text-muted);
    font-size: 0.85rem;
}

.kl-diffview-file[b-s0s4tlxrms] {
    border: 1px solid var(--k-border, #d8dee6);
    border-radius: 8px;
    overflow: hidden;
    background: var(--k-surface, #fff);
}

.kl-diffview-filehead[b-s0s4tlxrms] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.4rem 0.7rem;
    background: var(--k-surface-2, #f2f5f8);
    border-block-end: 1px solid var(--k-border, #d8dee6);
    cursor: pointer;
    font-family: system-ui, sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    list-style: none;
}

.kl-diffview-filehead[b-s0s4tlxrms]::-webkit-details-marker { display: none; }

.kl-diffview-path[b-s0s4tlxrms] {
    color: var(--k-text, #1a2430);
    word-break: break-all;
}

.kl-diffview-counts[b-s0s4tlxrms] {
    display: inline-flex;
    gap: 0.5rem;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
}

.kl-diffview-added[b-s0s4tlxrms] { color: #1a7f37; }
.kl-diffview-del[b-s0s4tlxrms] { color: #cf222e; }

.kl-diffview-body[b-s0s4tlxrms] {
    overflow-x: auto;
}

.kl-diffview-line[b-s0s4tlxrms] {
    display: flex;
    align-items: flex-start;
    white-space: pre;
}

.kl-diffview-gutter[b-s0s4tlxrms] {
    flex: 0 0 1.4rem;
    text-align: center;
    user-select: none;
    color: var(--k-text-muted);
    opacity: 0.7;
}

.kl-diffview-text[b-s0s4tlxrms] {
    flex: 1 1 auto;
    padding-inline-end: 0.5rem;
    font: inherit;
    white-space: pre;
    color: var(--k-text, #1a2430);
}

.kl-diffview-line--add[b-s0s4tlxrms] { background: rgba(46, 160, 67, 0.14); }
.kl-diffview-line--add .kl-diffview-gutter[b-s0s4tlxrms] { color: #1a7f37; opacity: 1; }
.kl-diffview-line--del[b-s0s4tlxrms] { background: rgba(207, 34, 46, 0.13); }
.kl-diffview-line--del .kl-diffview-gutter[b-s0s4tlxrms] { color: #cf222e; opacity: 1; }
.kl-diffview-line--hunk[b-s0s4tlxrms] {
    background: var(--k-surface-2, #eef3f8);
    color: var(--k-accent, #2f6fb0);
}
.kl-diffview-line--hunk .kl-diffview-text[b-s0s4tlxrms] { color: var(--k-accent, #2f6fb0); font-style: italic; }

@media (prefers-color-scheme: dark) {
    .kl-diffview-line--add[b-s0s4tlxrms] { background: rgba(46, 160, 67, 0.20); }
    .kl-diffview-line--del[b-s0s4tlxrms] { background: rgba(248, 81, 73, 0.18); }
    .kl-diffview-added[b-s0s4tlxrms] { color: #3fb950; }
    .kl-diffview-del[b-s0s4tlxrms] { color: #f85149; }
}
/* _content/Kanine.Web/Components/Feedback/FeedbackCardDetail.razor.rz.scp.css */
/* The owner merge-decision console — FeedbackCardDetail's OWN scoped sheet. (The page's .razor.css cannot
   style this child component's markup: CSS isolation only stamps the scope attribute on the owning
   component's elements.) Dark overrides use BARE html.dark (the dead-rule trap: :global(html.dark) ships
   verbatim and the browser drops it). Tokens: --k-* design-system variables throughout. */

.kl-fb-detail-head h2[b-lc3t7ob1ea] {
    margin: 0 0 0.15rem;
    font-size: 1.05rem;
}

.kl-fb-detail-sub[b-lc3t7ob1ea] {
    margin: 0;
    color: var(--k-text-muted);
    font-size: 0.82rem;
}

.kl-fb-detail-headactions[b-lc3t7ob1ea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.kl-fb-copy-note[b-lc3t7ob1ea] {
    font-size: 0.78rem;
    color: var(--k-text-muted);
}

.kl-fb-tabs[b-lc3t7ob1ea] {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0;
    border-bottom: 1px solid var(--k-border);
    padding-bottom: 0.4rem;
}

.kl-fb-tab[b-lc3t7ob1ea] {
    background: none;
    border: 1px solid transparent;
    border-radius: 6px;
    padding: 0.3rem 0.65rem;
    font: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    color: var(--k-text-muted);
}

.kl-fb-tab:hover[b-lc3t7ob1ea] {
    color: var(--k-text);
    background: var(--k-surface-2);
}

.kl-fb-tab--active[b-lc3t7ob1ea] {
    color: var(--k-text);
    font-weight: 600;
    border-color: var(--k-border);
    background: var(--k-surface-2);
}

/* ---- Decision tab — the merge brief ------------------------------------------------------------- */
.kl-fb-brief-head[b-lc3t7ob1ea] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 0.6rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface-2);
    font-size: 0.85rem;
}

.kl-fb-brief-age[b-lc3t7ob1ea] {
    margin-inline-start: auto;
    color: var(--k-text-muted);
    font-size: 0.78rem;
}

.kl-fb-brief-h[b-lc3t7ob1ea] {
    margin: 1rem 0 0.35rem;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-fb-detail-comment[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    padding: 0.5rem 0.65rem;
    border-inline-start: 3px solid var(--k-accent);
    background: var(--k-surface-2);
    border-radius: 0 6px 6px 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-fb-steps[b-lc3t7ob1ea] {
    margin: 0.35rem 0 0;
    padding-inline-start: 1.2rem;
    font-size: 0.88rem;
}

.kl-fb-detail-dl[b-lc3t7ob1ea] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    font-size: 0.9rem;
    margin: 0.35rem 0;
}

.kl-fb-detail-dl dt[b-lc3t7ob1ea] {
    color: var(--k-text-muted);
}

.kl-fb-detail-dl dd[b-lc3t7ob1ea] {
    margin: 0;
    word-break: break-word;
}

.kl-fb-logdigest[b-lc3t7ob1ea] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface-2);
}

.kl-fb-logdigest ul[b-lc3t7ob1ea] {
    margin: 0;
    padding-inline-start: 1.1rem;
    font-size: 0.85rem;
}

.kl-fb-diagnosis[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-fb-detail-note[b-lc3t7ob1ea] {
    color: var(--k-text-muted);
    font-size: 0.85rem;
}

.kl-fb-fix-files[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    padding-inline-start: 1.1rem;
    font-size: 0.85rem;
}

.kl-fb-fix-sha[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    font-size: 0.88rem;
}

.kl-fb-difffold summary[b-lc3t7ob1ea] {
    cursor: pointer;
    font-size: 0.85rem;
    color: var(--k-accent);
}

/* ---- Proof — the centerpiece --------------------------------------------------------------------- */
.kl-fb-proof[b-lc3t7ob1ea] {
    border-radius: 8px;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--k-border);
}

.kl-fb-proof--proven[b-lc3t7ob1ea] {
    border-color: color-mix(in srgb, var(--k-success) 55%, var(--k-border));
    background: color-mix(in srgb, var(--k-success) 8%, var(--k-surface));
}

.kl-fb-proof--proven .kl-fb-proof-verdict[b-lc3t7ob1ea] {
    color: var(--k-success);
}

.kl-fb-proof--unproven[b-lc3t7ob1ea] {
    border: 1px solid color-mix(in srgb, var(--k-caution) 55%, var(--k-border));
    background: color-mix(in srgb, var(--k-caution) 10%, var(--k-surface));
}

.kl-fb-proof--unproven .kl-fb-proof-verdict[b-lc3t7ob1ea] {
    color: var(--k-caution);
}

.kl-fb-proof-verdict[b-lc3t7ob1ea] {
    margin: 0 0 0.35rem;
    font-weight: 700;
    font-size: 0.9rem;
    letter-spacing: 0.02em;
}

.kl-fb-proof-cmd[b-lc3t7ob1ea] {
    display: block;
    font-size: 0.75rem;
    margin-bottom: 0.4rem;
    word-break: break-all;
}

.kl-fb-proof-run[b-lc3t7ob1ea] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.4rem;
    margin: 0.25rem 0;
    font-size: 0.85rem;
}

.kl-fb-proof-red[b-lc3t7ob1ea] {
    background: color-mix(in srgb, var(--k-critical) 15%, var(--k-surface));
    color: var(--k-critical);
    border: 1px solid color-mix(in srgb, var(--k-critical) 40%, transparent);
}

.kl-fb-proof-green[b-lc3t7ob1ea] {
    background: color-mix(in srgb, var(--k-success) 15%, var(--k-surface));
    color: var(--k-success);
    border: 1px solid color-mix(in srgb, var(--k-success) 40%, transparent);
}

.kl-fb-proof-excerpt[b-lc3t7ob1ea],
.kl-fb-proof-raw[b-lc3t7ob1ea] {
    flex-basis: 100%;
    max-height: 180px;
    overflow: auto;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 0.4rem;
    font-size: 0.72rem;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0.2rem 0 0;
}

.kl-fb-proof-suite[b-lc3t7ob1ea] {
    margin: 0.35rem 0 0;
    font-size: 0.82rem;
    color: var(--k-text-muted);
}

/* ---- Logs tab ------------------------------------------------------------------------------------ */
.kl-fb-log-tokens[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    padding-inline-start: 1.1rem;
    font-size: 0.82rem;
}

.kl-fb-crumbs[b-lc3t7ob1ea] {
    margin: 0.25rem 0;
    padding-inline-start: 1.25rem;
    font-size: 0.82rem;
}

.kl-fb-crumb[b-lc3t7ob1ea] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem;
    padding: 0.12rem 0;
    border-bottom: 1px dotted var(--k-border);
}

.kl-fb-crumb-t[b-lc3t7ob1ea] {
    min-width: 4.5rem;
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
    font-size: 0.75rem;
}

.kl-fb-crumb-kind[b-lc3t7ob1ea] {
    font-weight: 600;
}

.kl-fb-kvtable[b-lc3t7ob1ea] {
    border-collapse: collapse;
    font-size: 0.82rem;
}

.kl-fb-kvtable th[b-lc3t7ob1ea] {
    text-align: start;
    color: var(--k-text-muted);
    font-weight: 500;
    padding: 0.15rem 0.75rem 0.15rem 0;
}

.kl-fb-kvtable td[b-lc3t7ob1ea] {
    font-variant-numeric: tabular-nums;
}

/* ---- Shared escaped panes + actions -------------------------------------------------------------- */
.kl-fb-dom[b-lc3t7ob1ea],
.kl-fb-bundle[b-lc3t7ob1ea],
.kl-fb-diff[b-lc3t7ob1ea] {
    max-height: 320px;
    overflow: auto;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-fb-detail-shot[b-lc3t7ob1ea] {
    max-width: 100%;
    border: 1px solid var(--k-border);
    border-radius: 6px;
}

/* The Decision-tab inline capture is a PREVIEW — capped so it doesn't dominate the brief; the Report tab
   carries the full-size view. */
.kl-fb-decision-shot[b-lc3t7ob1ea] {
    max-height: 22rem;
    object-fit: contain;
    object-position: left top;
    display: block;
}

.kl-fb-thumb--blocked[b-lc3t7ob1ea] {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px dashed var(--k-border);
    border-radius: 4px;
}

.kl-fb-detail-actions[b-lc3t7ob1ea] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--k-border);
}

.kl-fb-reject[b-lc3t7ob1ea],
.kl-fb-verify[b-lc3t7ob1ea],
.kl-fb-park[b-lc3t7ob1ea] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

.kl-fb-detail-replay iframe[b-lc3t7ob1ea] {
    width: 100%;
    min-height: 320px;
    border: 1px solid var(--k-border);
    border-radius: 6px;
}

.kl-fb-card-purge[b-lc3t7ob1ea] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
    margin-top: 0.5rem;
}

/* ---- dark (BARE html.dark) ----------------------------------------------------------------------- */
html.dark .kl-fb-brief-head[b-lc3t7ob1ea],
html.dark .kl-fb-logdigest[b-lc3t7ob1ea],
html.dark .kl-fb-detail-comment[b-lc3t7ob1ea],
html.dark .kl-fb-tab--active[b-lc3t7ob1ea],
html.dark .kl-fb-dom[b-lc3t7ob1ea],
html.dark .kl-fb-bundle[b-lc3t7ob1ea],
html.dark .kl-fb-diff[b-lc3t7ob1ea],
html.dark .kl-fb-proof-excerpt[b-lc3t7ob1ea],
html.dark .kl-fb-proof-raw[b-lc3t7ob1ea],
html.dark .kl-fb-thumb--blocked[b-lc3t7ob1ea] {
    background: #16222c;
    border-color: #2c3a45;
}

html.dark .kl-fb-proof--proven[b-lc3t7ob1ea] {
    background: color-mix(in srgb, var(--k-success) 14%, #101a22);
    border-color: color-mix(in srgb, var(--k-success) 45%, #2c3a45);
}

html.dark .kl-fb-proof--unproven[b-lc3t7ob1ea] {
    background: color-mix(in srgb, var(--k-caution) 14%, #101a22);
    border-color: color-mix(in srgb, var(--k-caution) 45%, #2c3a45);
}

/* Phase G R5 — the reporter-rejection banner leading the Decision brief. */
.kl-fb-unresolved-banner strong[b-lc3t7ob1ea] {
    letter-spacing: 0.02em;
}

.kl-fb-unresolved-note[b-lc3t7ob1ea] {
    margin: 0.35rem 0 0;
    font-style: italic;
}

.kl-fb-unresolved-at[b-lc3t7ob1ea] {
    font-size: 0.8rem;
    opacity: 0.8;
}

/* Phase G WP-G2 — the agency-visible public-note editor (the one note-egress field). */
.kl-fb-publicnote[b-lc3t7ob1ea] {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--k-border);
}

.kl-fb-publicnote-hint[b-lc3t7ob1ea] {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--k-text-muted);
}

.kl-fb-publicnote-editor[b-lc3t7ob1ea] {
    width: 100%;
    margin-bottom: 0.4rem;
    resize: vertical;
}

/* Full-screen two-column Decision brief (owner-directed 2026-07-08): evidence reads down the left; the
   decision rail (actions + agency note) sits sticky on the right so acting never scrolls away from the
   evidence. Collapses to one column on narrow viewports. */
.kl-fb-decision-grid[b-lc3t7ob1ea] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 1.5rem;
    align-items: start;
}

.kl-fb-decision-main[b-lc3t7ob1ea] {
    min-width: 0;
}

.kl-fb-decision-rail[b-lc3t7ob1ea] {
    position: sticky;
    top: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--k-border);
    border-radius: 10px;
    background: var(--k-surface, transparent);
}

.kl-fb-decision-rail .kl-fb-detail-actions[b-lc3t7ob1ea],
.kl-fb-decision-rail .kl-fb-publicnote[b-lc3t7ob1ea] {
    margin: 0;
    padding: 0;
    border-top: none;
}

.kl-fb-decision-rail .kl-fb-publicnote[b-lc3t7ob1ea] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--k-border);
}

@media (max-width: 980px) {
    .kl-fb-decision-grid[b-lc3t7ob1ea] {
        grid-template-columns: 1fr;
    }

    .kl-fb-decision-rail[b-lc3t7ob1ea] {
        position: static;
    }
}

/* Ask-Claude with the prompt-injection review checkbox (owner ruling 2026-07-09). */
.kl-fb-askclaude[b-lc3t7ob1ea] {
    padding-top: 0.75rem;
    border-top: 1px solid var(--k-border);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kl-fb-askclaude-approve[b-lc3t7ob1ea] {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    font-size: 0.85rem;
    line-height: 1.35;
    cursor: pointer;
}

.kl-fb-askclaude-hint[b-lc3t7ob1ea] {
    color: var(--k-text-muted);
}

/* Injection caution shown only when the operator opts to include reporter prose (fenced-as-untrusted downstream). */
.kl-fb-askclaude-warn[b-lc3t7ob1ea] {
    margin: 0.4rem 0 0;
    padding: 0.4rem 0.55rem;
    border-left: 3px solid #bf8700;
    border-radius: 4px;
    background: color-mix(in srgb, #bf8700 9%, transparent);
    font-size: 0.82rem;
    line-height: 1.35;
}

/* Reporter reply round-trip — the "Reporter replies" section + the awaiting/ask affordances. */
.kl-fb-replies[b-lc3t7ob1ea] {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}

.kl-fb-reply[b-lc3t7ob1ea] {
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--k-border, #d8dee6);
    border-inline-start: 3px solid var(--k-accent, #3b6ea5);
    border-radius: 0 8px 8px 0;
    background: var(--k-surface-2, #f7f9fc);
}

.kl-fb-reply-when[b-lc3t7ob1ea] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
}

.kl-fb-reply-body[b-lc3t7ob1ea] {
    margin: 0.3rem 0 0;
    white-space: pre-wrap;
}

.kl-fb-reply-atts[b-lc3t7ob1ea] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.kl-fb-reply-thumb[b-lc3t7ob1ea] {
    inline-size: 4rem;
    block-size: 4rem;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--k-border, #cfd6df);
}

.kl-fb-reply-att[b-lc3t7ob1ea] {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.55rem;
    border: 1px solid var(--k-border, #cfd6df);
    border-radius: 6px;
    background: var(--k-surface, #fff);
    font-size: 0.8rem;
}

.kl-fb-publicnote-actions[b-lc3t7ob1ea] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.5rem;
}

.kl-fb-awaiting-reply[b-lc3t7ob1ea] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
    font-style: italic;
}

/* Rescind — the withdrawn banner (muted amber). */
.kl-fb-rescinded-banner[b-lc3t7ob1ea] {
    background: #f7ecd0;
    color: #7a4f00;
    border: 1px solid #e3b341;
}

/* Star — the toggle button's starred state. */
.kl-fb-star-btn.is-starred[b-lc3t7ob1ea] {
    color: #8a6d1f;
    border-color: #e3b341;
    background: #fbf1d3;
}

/* Kanban rework (2026-07-10) — Accept picker, Claude question panel, and the Claude tab. */
.kl-fb-accept[b-lc3t7ob1ea] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}

.kl-fb-accept-target[b-lc3t7ob1ea] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.kl-fb-merging-note[b-lc3t7ob1ea] {
    background: #e4eefb;
    color: #26538c;
}

.kl-fb-claude-question[b-lc3t7ob1ea] {
    margin-top: 0.9rem;
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--k-border, #d8dee6);
    border-inline-start: 3px solid #7a4fd0;
    border-radius: 0 8px 8px 0;
    background: var(--k-surface-2, #f7f9fc);
}

.kl-fb-claude-question-text[b-lc3t7ob1ea] {
    margin: 0.25rem 0 0.5rem;
    white-space: pre-wrap;
}

.kl-fb-claude-answer[b-lc3t7ob1ea] {
    inline-size: 100%;
    box-sizing: border-box;
    resize: vertical;
    font: inherit;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--k-border, #cfd6df);
    border-radius: 6px;
    margin-bottom: 0.4rem;
}

.kl-fb-claude-answered[b-lc3t7ob1ea] {
    font-size: 0.85rem;
    color: var(--k-text-muted);
}

.kl-fb-claude-tab .kl-fb-claude-feed[b-lc3t7ob1ea] {
    max-block-size: 20rem;
    overflow-y: auto;
    background: #101418;
    color: #d6e2ee;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    font-family: ui-monospace, monospace;
    font-size: 0.78rem;
}

.kl-fb-claude-feed-line[b-lc3t7ob1ea] {
    margin: 0 0 0.15rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-fb-claude-round[b-lc3t7ob1ea] {
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--k-border, #d8dee6);
    border-radius: 8px;
    margin-bottom: 0.5rem;
    background: var(--k-surface-2, #f7f9fc);
}

.kl-fb-claude-round-head[b-lc3t7ob1ea] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.kl-fb-claude-round-when[b-lc3t7ob1ea] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
}

.kl-fb-claude-summary[b-lc3t7ob1ea] {
    margin: 0.4rem 0 0;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.8rem;
    background: var(--k-surface, #fff);
    border-radius: 6px;
    padding: 0.5rem 0.6rem;
    max-block-size: 14rem;
    overflow-y: auto;
}

.kl-fb-claude-outcome[b-lc3t7ob1ea] {
    background: #ece4fb;
    color: #4d2f8c;
}

/* Reporter-reply alert (owner-directed 2026-07-12) — top-of-ticket, unmissable across tabs. */
.kl-fb-reply-alert[b-lc3t7ob1ea] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.25rem;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    border: 1px solid #b9d5f0;
    border-inline-start: 3px solid #2f6fb0;
    background: #eaf2fb;
    color: #204971;
    font-size: 0.9rem;
}

.kl-fb-reply-alert-icon[b-lc3t7ob1ea] { font-size: 1.1rem; }

@media (prefers-color-scheme: dark) {
    .kl-fb-reply-alert[b-lc3t7ob1ea] { background: #16283a; color: #cfe3f7; border-color: #2f5a7a; }
}

/* Stalled round (dead-claim fix, 2026-07-12) — a claimed task whose lease expired; the runner didn't finish. */
.kl-fb-claude-state--stalled[b-lc3t7ob1ea] {
    border: 1px solid #e0b483;
    border-inline-start: 3px solid #d98a2b;
    border-radius: 8px;
    padding: 0.6rem 0.8rem;
    background: #fdf3e6;
}

@media (prefers-color-scheme: dark) {
    .kl-fb-claude-state--stalled[b-lc3t7ob1ea] { background: #3a2a14; border-color: #6b4a20; }
}
/* _content/Kanine.Web/Components/Feedback/FixRunnerCockpit.razor.rz.scp.css */
/* The fix-runner cockpit — calm, instrument-like local tooling (mono feed, quiet pills), visually distinct
   from customer data. Bare html.dark for dark overrides (the :global(html.dark) dead-rule trap). */

.kl-frc[b-0u2skv207z] {
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface-2);
    margin-bottom: 0.75rem;
}

.kl-frc-head[b-0u2skv207z] {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    width: 100%;
    padding: 0.5rem 0.9rem;
    background: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    text-align: start;
    color: inherit;
}

.kl-frc-caret[b-0u2skv207z] {
    font-size: 0.7rem;
    color: var(--k-text-muted);
}

.kl-frc-title[b-0u2skv207z] {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.kl-frc-subtag[b-0u2skv207z] {
    font-size: 0.7rem;
    color: var(--k-text-muted);
    letter-spacing: 0.03em;
    border: 1px solid var(--k-border);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
}

/* The state pill — one quiet color per loop state, pushed to the trailing edge. */
.kl-frc-pill[b-0u2skv207z] {
    margin-inline-start: auto;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    border: 1px solid var(--k-border);
    color: var(--k-text-muted);
    background: var(--k-surface);
}

.kl-frc-pill--idle[b-0u2skv207z] {
    color: var(--k-info);
    border-color: color-mix(in srgb, var(--k-info) 45%, var(--k-border));
    background: color-mix(in srgb, var(--k-info) 8%, var(--k-surface));
}

.kl-frc-pill--working[b-0u2skv207z] {
    color: var(--k-success);
    border-color: color-mix(in srgb, var(--k-success) 45%, var(--k-border));
    background: color-mix(in srgb, var(--k-success) 8%, var(--k-surface));
}

.kl-frc-pill--stopping[b-0u2skv207z] {
    color: var(--k-caution);
    border-color: color-mix(in srgb, var(--k-caution) 45%, var(--k-border));
    background: color-mix(in srgb, var(--k-caution) 8%, var(--k-surface));
}

.kl-frc-body[b-0u2skv207z] {
    padding: 0 0.9rem 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.kl-frc-note[b-0u2skv207z] {
    margin: 0;
}

.kl-frc-statusline[b-0u2skv207z] {
    display: flex;
    gap: 0.9rem;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.78rem;
    color: var(--k-text-muted);
    min-height: 1rem;
}

.kl-frc-stoppending[b-0u2skv207z] {
    color: var(--k-caution);
    font-weight: 600;
}

.kl-frc-actions[b-0u2skv207z] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}

.kl-frc-confirm-wrap[b-0u2skv207z] {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
}

.kl-frc-confirm-copy[b-0u2skv207z] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
}

.kl-frc-confirm-yes[b-0u2skv207z] {
    background: var(--k-critical);
    border-color: var(--k-critical);
    color: #fff;
}

.kl-frc-kill[b-0u2skv207z] {
    color: var(--k-critical);
}

.kl-frc-accountrow[b-0u2skv207z] {
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}

.kl-frc-account-label[b-0u2skv207z] {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
    font-size: 0.8rem;
}

.kl-frc-hint[b-0u2skv207z] {
    font-size: 0.72rem;
    color: var(--k-text-muted);
    font-style: italic;
}

/* The headspace feed — a scrollable mono panel, the goal-chain terminal's visual vocabulary:
   asst = normal, tool = accent, info = muted, result = emphasis, raw = dim mono noise. */
.kl-frc-feed[b-0u2skv207z] {
    max-height: 260px;
    overflow-y: auto;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.72rem;
    line-height: 1.45;
}

.kl-frc-feed-empty[b-0u2skv207z] {
    color: var(--k-text-muted);
    font-style: italic;
}

.kl-frc-line[b-0u2skv207z] {
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-frc-line--tool[b-0u2skv207z] {
    color: var(--k-accent);
}

.kl-frc-line--info[b-0u2skv207z] {
    color: var(--k-text-muted);
}

.kl-frc-line--result[b-0u2skv207z] {
    color: var(--k-success);
    font-weight: 600;
}

.kl-frc-line--raw[b-0u2skv207z] {
    color: var(--k-text-muted);
    opacity: 0.8;
}

html.dark .kl-frc[b-0u2skv207z] {
    background: #16222c;
    border-color: #2c3a45;
}

html.dark .kl-frc-feed[b-0u2skv207z] {
    background: #0c141b;
    border-color: #2c3a45;
}

html.dark .kl-frc-pill[b-0u2skv207z] {
    background: #101a22;
    border-color: #2c3a45;
}
/* _content/Kanine.Web/Components/Layout/AuthLayout.razor.rz.scp.css */
/*
  UI-GUAR-011 (R11) — scoped layout for the CHROMELESS pre-auth shell (AuthLayout). The component foundation
  (cards / inputs / buttons / chips / color-schemes) is inherited GLOBALLY via the <main>'s `kl-shell-main`
  class (kanine-design-system.css). These rules supply ONLY the chromeless page layout the prototype's
  login.html <body> uses ("min-h-screen flex flex-col justify-center items-center"): a full-viewport column
  that vertically centers the login card, with NO rail-beside-content offset. Logical properties throughout so
  it mirrors cleanly under dir="rtl" when the i18n engine lands (PLAT-008 / Phase-6).
*/

.kl-auth[b-8h5fozbdh7] {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    max-inline-size: 100%;
}

.kl-auth-main[b-8h5fozbdh7] {
    flex: 1 1 auto;
    box-sizing: border-box;
    inline-size: 100%;
    max-inline-size: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* Fluid gutters (mirror MainLayout's scale, but no rail to clear): tight on phones, generous on desktops.
       border-box + max-inline-size:100% keep within the §6.2 zero-horizontal-overflow budget at every width. */
    padding-block: clamp(1.5rem, 4vw, 3rem);
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* The framework error overlay rendered by THIS layout. The base styling (incl. display:none-by-default) is
   otherwise only in MainLayout.razor.css, which is Blazor-SCOPED to MainLayout and so does not reach AuthLayout's
   own #blazor-error-ui — without this the banner would paint visible on the login screen. Mirrors MainLayout's
   block; the framework's blazor.web.js still reveals it via an inline display:block when a circuit error occurs. */
#blazor-error-ui[b-8h5fozbdh7] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-8h5fozbdh7] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Kanine.Web/Components/Layout/MainLayout.razor.rz.scp.css */
/*
  P5 client-parity (web-first) — the application-shell scoped CSS for MainLayout's own elements: the shell container
  (.kl-shell), the page content region (.kl-shell-main) and the framework error overlay. The shell CHROME itself (the
  left rail + top bar + mobile bottom nav) is ShellNav's, styled globally in kanine-design-system.css §7 — including
  the desktop "rail beside content" offset that pads .kl-shell. Logical properties only (padding-inline / inset) so
  the shell mirrors cleanly under dir="rtl" when the i18n engine lands (PLAT-008 / Phase-6).
*/

.kl-shell[b-8fngpw6lxe] {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  box-sizing: border-box;
  max-inline-size: 100%;
}

.kl-shell-main[b-8fngpw6lxe] {
  flex: 1 1 auto;
  box-sizing: border-box;
  inline-size: 100%;
  max-inline-size: 100%;
  /* Fluid gutters: the content's side (and top/bottom) padding SCALES with the viewport — tight on phones, generous
     on laptops/desktops — so pages read consistently across screen sizes instead of hugging the rail. clamp(min,
     preferred, max): ~1rem at 320px, growing through the mid widths, capped at 4rem (sides) / 2rem (block) on large
     screens. border-box + max-inline-size:100% keep it within the §6.2 zero-horizontal-overflow budget at every width. */
  padding-block: clamp(1rem, 2vw, 2rem);
  padding-inline: clamp(1rem, 4vw, 4rem);
}

/* Mobile + landscape tablet (<=1280px): the bottom nav is a FIXED, bottom-docked bar (kanine-design-system.css §7 —
   out of flow), so the content region must clear it itself or a tall page's last rows hide behind the bar. Keep the
   fluid block gutter and ADD the bar height (+ the iOS safe-area inset the bar absorbs). Lives HERE because this
   scoped sheet owns .kl-shell-main's padding (its padding-block shorthand above would out-order an external
   override).
   THIS QUERY MUST TRACK the drawer/bottom-nav breakpoint in kanine-design-system.css §7 (raised 1024 -> 1280 by the
   owner ruling 2026-07-24 so a ~1280 landscape tablet reclaims the rail's 240px). If the two drift, the content is
   either padded to clear a bar that is not there, or hidden behind a bar that is. */
@media (max-width: 1280px) {
  .kl-shell-main[b-8fngpw6lxe] {
    padding-block-end: calc(clamp(1rem, 2vw, 2rem) + var(--k-bottomnav-h, 56px) + env(safe-area-inset-bottom, 0px));
  }
}

/* …UNLESS the user has explicitly PINNED the rail in the 1025-1280 band (owner ruling 2026-07-24): the rail is the
   navigation again, so kanine-design-system.css stands the bottom bar down — and this clearance must stand down
   with it or the page reserves 56px for a bar that is not there. A bare `html[…]` ancestor selector is correct in a
   scoped sheet (the scope attribute lands on .kl-shell-main, the last compound); `:global(…)` would be the dead-rule
   trap. Phones (<=1024) can never reach the pinned state, so their clearance above is untouched. */
@media (min-width: 1025px) and (max-width: 1280px) {
  html[data-shellrail="pinned"] .kl-shell-main[b-8fngpw6lxe] {
    padding-block-end: clamp(1rem, 2vw, 2rem);
  }
}

/* The framework error overlay (rendered by this layout below the shell). Preserved from the template. */
#blazor-error-ui[b-8fngpw6lxe] {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-8fngpw6lxe] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/Kanine.Web/Components/MetricTileGrid.razor.rz.scp.css */
/* =============================================================================
   MetricTileGrid — the ONE metric-tile card skin (UI-GUAR-011, restrained-premium)
   -----------------------------------------------------------------------------
   Consolidates the two drifted copies (kl-rel-tile-* on the single-K9 dashboard,
   kl-agency-tile-* on the unit-wide rollup) into one scoped stylesheet, taken
   from the reliability tile (the more refined of the two) plus the agency tile's
   baseline-alignment rule (margin-block-start:auto on the value), which kept the
   headline figures on a common baseline across a grid row regardless of
   name-wrap or chip presence. Consumes the foundation vocabulary (kl-chip,
   --k-* channels); no off-token colour, no gradient — light/dark/outdoor ride
   the flipping channels.
   ========================================================================== */

.kl-mtile-grid[b-1mviakn0k5] {
    display: grid;
    gap: var(--k-space-4);
    grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
    /* No margin-block-end — the .kl-page flex gap already separates the grid from the next
       section; an extra margin doubled the gap here only, breaking the section rhythm. */
}

.kl-mtile[b-1mviakn0k5] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6) var(--k-space-6) var(--k-space-4);
    /* a quiet teal rail anchors the tile as an evidentiary metric (on-brand accent, not decoration). */
    border-inline-start: 3px solid color-mix(in srgb, var(--k-teal-500) 55%, var(--k-border));
    transition: box-shadow var(--k-dur-2) var(--k-ease), transform var(--k-dur-2) var(--k-ease);
}
.kl-mtile:hover[b-1mviakn0k5] {
    box-shadow: var(--k-elev-2);
    transform: translateY(-1px);
}

.kl-mtile-head[b-1mviakn0k5] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-3);
    /* A long MetricId chip (RPT-006-CERTIFICATION) must drop below the name rather than overhang
       the tile's right edge (design-skeptic blocker, all 3 modes) — wrap the head and let the name
       yield space (min-width:0). */
    flex-wrap: wrap;
}
.kl-mtile-name[b-1mviakn0k5] {
    font-family: var(--k-font-display);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    min-width: 0;
    color: var(--k-text);
}
/* The metric id sits in a quiet mono chip (catalog id, not a GUID). It may SHRINK and wrap its own
   text, so a long id never breaches the minmax(14rem) tile track. */
.kl-mtile-id[b-1mviakn0k5] {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    font-family: var(--k-font-mono);
    font-size: 11px;
    letter-spacing: .02em;
    padding: 1px 8px;
}

/* The headline figure — large, display-weight, tabular so columns of figures align. Pushed to the
   tile foot (margin-block-start:auto) so figures share a baseline across a grid row. */
.kl-mtile-value[b-1mviakn0k5] {
    font-family: var(--k-font-display);
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    margin: 0;
    margin-block-start: auto;
    color: var(--k-text);
    font-variant-numeric: tabular-nums;
}
/* An undefined ("N/A") figure is muted + lighter so it never reads as a real measured value (PLAT-012). */
.kl-mtile-value[data-defined="false"][b-1mviakn0k5] {
    color: var(--k-text-muted);
    font-weight: 700;
    font-size: clamp(20px, 2.2vw, 26px);
}

.kl-mtile-frac[b-1mviakn0k5] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--k-space-1) var(--k-space-3);
    color: var(--k-text-muted);
    font-size: 13px;
}
.kl-mtile-numdenom[b-1mviakn0k5] {
    font-family: var(--k-font-mono);
    font-size: 13px;
    color: var(--k-text);
    font-variant-numeric: tabular-nums;
}
.kl-mtile-n[b-1mviakn0k5] {
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
}

/* the incomplete-rows caution chip rides the foundation kl-chip--caution; just seat it at the tile foot. */
.kl-mtile-incomplete[b-1mviakn0k5] {
    align-self: flex-start;
}
/* _content/Kanine.Web/Components/Pages/ActivityDetail.razor.rz.scp.css */
/* =============================================================================
   ActivityDetail (/activities/{id}) — UI-GUAR-019 read-only activity detail.
   -----------------------------------------------------------------------------
   Single-column, token-only (--k-*) elevated cards mirroring MedicalDetail. No
   fixed px widths / x-overflow clips, so it stays 320px-clean (the RESPONSIVE
   tooth). The identity hero + every section header lead with a large .ki icon
   (the HEADER tooth); the icon flips per-mode via --k-accent.
   ========================================================================== */

.kl-actd-header[b-nzjttsv2k8] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-2);
    padding: var(--k-space-6);
}

.kl-actd-identity[b-nzjttsv2k8] {
    display: flex;
    align-items: center;
    gap: var(--k-space-4);
    min-inline-size: 0;
}

.kl-actd-disc[b-nzjttsv2k8] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 48px;
    block-size: 48px;
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
    color: var(--k-accent);
    font-size: 22px;
    flex-shrink: 0;
}

.kl-actd-identity-text[b-nzjttsv2k8] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--k-space-1);
    min-inline-size: 0;
}

.kl-actd-kind[b-nzjttsv2k8] {
    align-self: flex-start;
}

.kl-actd-title[b-nzjttsv2k8] {
    font-family: var(--k-font-display);
    font-size: 24px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: var(--k-text);
    word-break: break-word;
}

.kl-actd-sub[b-nzjttsv2k8] {
    margin: 0;
    font-size: 14px;
    color: var(--k-text-muted);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-actd-actions[b-nzjttsv2k8] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    flex-shrink: 0;
}

.kl-actd-card[b-nzjttsv2k8] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6);
    margin-block-start: var(--k-space-4);
}

.kl-actd-section-title[b-nzjttsv2k8] {
    display: flex;
    align-items: center;
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--k-space-4);
    color: var(--k-text);
}

.kl-actd-facts[b-nzjttsv2k8] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--k-space-4) var(--k-space-6);
    margin: 0;
}

.kl-actd-fact[b-nzjttsv2k8] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    min-inline-size: 0;
}

.kl-actd-fact-label[b-nzjttsv2k8] {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-actd-fact-value[b-nzjttsv2k8] {
    font-size: 16px;
    font-weight: 600;
    color: var(--k-text);
    word-break: break-word;
}

.kl-actd-flags[b-nzjttsv2k8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    margin-block-start: var(--k-space-4);
}

.kl-actd-notes[b-nzjttsv2k8] {
    margin: 0;
    font-size: 15px;
    line-height: 1.55;
    color: var(--k-text);
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-actd-finds[b-nzjttsv2k8] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

.kl-actd-find[b-nzjttsv2k8] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    padding-block-end: var(--k-space-3);
    border-block-end: 1px solid var(--k-border);
}

.kl-actd-find:last-child[b-nzjttsv2k8] {
    padding-block-end: 0;
    border-block-end: 0;
}

.kl-actd-find-type[b-nzjttsv2k8] {
    font-weight: 700;
    color: var(--k-text);
}

.kl-actd-find-desc[b-nzjttsv2k8] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-text);
    word-break: break-word;
}

.kl-actd-state[b-nzjttsv2k8] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-3);
    text-align: center;
    padding: var(--k-space-12) var(--k-space-6);
    color: var(--k-text-muted);
}

/* The zero-finds pill — the owner's quiet dashed idiom (fdd42545): one line, never an "(0)" card frame. */
.kl-actd-finds-none[b-nzjttsv2k8] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    margin: 0;
    padding: var(--k-space-2) var(--k-space-4);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-full);
    color: var(--k-text-muted);
    font-size: 13px;
    background: var(--k-surface);
}

.kl-actd-finds-none .ki[b-nzjttsv2k8] {
    font-size: 15px;
    opacity: .6;
}

/* The evidence drill-in row (D.17): a full-width quiet link — name + optional count pill + trailing chevron;
   accent identity on hover (the related-record card idiom, 616a6752). */
.kl-actd-evidence-link[b-nzjttsv2k8] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
    color: var(--k-text);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease),
                background-color var(--k-dur-1) var(--k-ease);
}

.kl-actd-evidence-link:hover[b-nzjttsv2k8] {
    color: var(--k-accent);
    border-color: color-mix(in srgb, var(--k-accent) 40%, var(--k-border));
    background: color-mix(in srgb, var(--k-accent) 6%, var(--k-surface));
}

.kl-actd-evidence-link .ki[b-nzjttsv2k8] {
    margin-inline-start: auto;
    font-size: 14px;
    color: var(--k-text-muted);
    transition: transform var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-actd-evidence-link:hover .ki[b-nzjttsv2k8] {
    color: var(--k-accent);
    transform: translateX(2px);
}

.kl-actd-evidence-link .kl-count[b-nzjttsv2k8] {
    margin-inline-start: var(--k-space-1);
}

/* Dark + outdoor: keep visible card elevation (a flat card on a dark canvas reads
   as missing). The foundation already flips --k-surface/--k-border per mode. */
html.dark .kl-actd-header[b-nzjttsv2k8],
html.dark .kl-actd-card[b-nzjttsv2k8] {
    box-shadow: var(--k-elev-2);
    border-color: var(--k-border);
}

/* Narrow screens: stack the header actions under the identity (no horizontal overflow). */
@media (max-width: 40rem) {
    .kl-actd-header[b-nzjttsv2k8] {
        flex-direction: column;
    }

    .kl-actd-actions[b-nzjttsv2k8] {
        align-self: stretch;
    }
}
/* _content/Kanine.Web/Components/Pages/ActivityEvidence.razor.rz.scp.css */
/* =============================================================================
   ActivityEvidence (activity-evidence.html) — R11 restrained-premium scoped refinement.
   -----------------------------------------------------------------------------
   Consumes the foundation vocabulary (kl-page, kl-btn, kl-chip, k-mono, the
   kl-visually-hidden utility) and adds ONLY the evidence-surface layout this read
   screen needs: the dialog card, the action bar, the file-list rows, the per-item
   actions, the verification band, and the reason-capture delete dialog. Tokens only
   (--k-*); no off-token colour and no generic gradient (those red the central R11
   teeth). The body canvas + chips + buttons already flip per mode from the
   foundation; this file just sets borders/elevation that stay legible in dark + outdoor.
   ========================================================================== */

/* The dialog SURFACE: an elevated card faithful to the prototype's evidence-modal. */
.kl-ev-modal[b-ct07w65hto] {
    display: flex;
    flex-direction: column;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
    overflow: hidden;
}

/* Header band — the navy fixed surface the prototype uses (foundation ink token). The ink is the FIXED light
   --k-paper (no per-mode remap needed on a fixed navy band): the old `--k-on-inverse` was a PHANTOM token whose
   `--k-surface` fallback is itself near-navy in dark — the whole header was unreadable dark-on-dark (shot-confirmed). */
.kl-ev-header[b-ct07w65hto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    background: var(--k-ink-900);
    color: var(--k-paper);
    padding: var(--k-space-6) var(--k-space-6);
}

/* The quiet "Back to activity" header link (the route had zero outbound links) — dimmed paper ink on the navy band. */
.kl-ev-header-back[b-ct07w65hto] {
    flex-shrink: 0;
    align-self: center;
    color: color-mix(in srgb, var(--k-paper) 78%, transparent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-sm);
    transition: color var(--k-dur-1) var(--k-ease), background-color var(--k-dur-1) var(--k-ease);
}

.kl-ev-header-back:hover[b-ct07w65hto] {
    color: var(--k-paper);
    background: color-mix(in srgb, var(--k-paper) 12%, transparent);
    text-decoration: underline;
}

.kl-ev-heading[b-ct07w65hto] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    min-inline-size: 0;
}

.kl-ev-header-icon[b-ct07w65hto] {
    color: var(--k-accent);
    font-size: 26px;
}

.kl-ev-title[b-ct07w65hto] {
    font-family: var(--k-font-display);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0;
    color: inherit;
}

.kl-ev-subtitle[b-ct07w65hto] {
    margin: 0;
    font-size: 13px;
    opacity: .72;
    color: inherit;
}

/* The COVERED close (X). Quiet by default; the foundation focus ring still applies. */
.kl-ev-close[b-ct07w65hto] {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--k-touch);
    block-size: var(--k-touch);
    border: 0;
    border-radius: var(--k-radius-full);
    background: transparent;
    color: inherit;
    opacity: .8;
    cursor: pointer;
    transition: background var(--k-dur-1) ease, opacity var(--k-dur-1) ease;
}

.kl-ev-close:hover[b-ct07w65hto] {
    opacity: 1;
    background: color-mix(in srgb, currentColor 16%, transparent);
}

/* Body. */
.kl-ev-body[b-ct07w65hto] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
    padding: var(--k-space-6);
}

.kl-ev-actionbar[b-ct07w65hto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    flex-wrap: wrap;
}

.kl-ev-count-wrap[b-ct07w65hto] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-ev-section-title[b-ct07w65hto] {
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    color: var(--k-text);
}

/* "Add new" is a real file-picker LABEL now — position it so the invisible <InputFile> fills the button (the
   FilesManager idiom); the label class keeps the primary button chrome via the foundation element-gated family. */
.kl-ev-add[b-ct07w65hto] {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    cursor: pointer;
}

.kl-ev-add .ki[b-ct07w65hto] {
    font-size: 20px;
}

/* (The invisible <InputFile> overlay uses the GLOBAL .kl-involve-file-input foundation class — a scoped rule cannot
   reach a child component's rendered input.) */

/* An unreadable/over-cap pick surfaces honestly (never a fake green) — the -error suffix rides the foundation
   critical banner family (incl. its dark remap). */
.kl-ev-upload-error[b-ct07w65hto] {
    margin: 0;
}

/* The evidence file list. */
.kl-ev-list[b-ct07w65hto] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

.kl-ev-item[b-ct07w65hto] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-4);
    transition: border-color var(--k-dur-1) ease;
}

.kl-ev-item:hover[b-ct07w65hto] {
    border-color: var(--k-accent);
}

.kl-ev-item-main[b-ct07w65hto] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    min-inline-size: 0;
}

.kl-ev-item-icon[b-ct07w65hto] {
    flex-shrink: 0;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border-radius: var(--k-radius-sm);
    inline-size: 44px;
    block-size: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kl-ev-item-meta[b-ct07w65hto] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    min-inline-size: 0;
}

.kl-ev-item-name[b-ct07w65hto] {
    font-size: 15px;
    font-weight: 600;
    color: var(--k-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-ev-item-facts[b-ct07w65hto] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    flex-wrap: wrap;
    font-size: 12px;
    color: var(--k-text-muted);
}

.kl-ev-item-size[b-ct07w65hto] {
    display: inline-flex;
    align-items: center;
    gap: 2px;
}

.kl-ev-fact-icon[b-ct07w65hto] {
    font-size: 14px;
}

.kl-ev-dot[b-ct07w65hto] {
    opacity: .5;
}

.kl-ev-item-hash[b-ct07w65hto] {
    font-size: 11px;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border-radius: var(--k-radius-sm);
    padding: 1px var(--k-space-2);
    max-inline-size: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-ev-pending[b-ct07w65hto] {
    /* small caution chip when the bytes are still pending a deferred upload */
    font-size: 11px;
}

.kl-ev-item-actions[b-ct07w65hto] {
    display: flex;
    align-items: center;
    gap: var(--k-space-1);
    flex-shrink: 0;
}

.kl-ev-item-btn[b-ct07w65hto] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--k-touch);
    block-size: var(--k-touch);
    border: 0;
    border-radius: var(--k-radius-md);
    background: transparent;
    color: var(--k-text-muted);
    cursor: pointer;
    transition: background var(--k-dur-1) ease, color var(--k-dur-1) ease;
}

.kl-ev-item-btn:hover:not(:disabled)[b-ct07w65hto] {
    background: var(--k-surface-2);
    color: var(--k-text);
}

.kl-ev-item-danger:hover:not(:disabled)[b-ct07w65hto] {
    color: var(--k-critical);
    background: color-mix(in srgb, var(--k-critical) 10%, transparent);
}

.kl-ev-item-btn:disabled[b-ct07w65hto] {
    opacity: .45;
    cursor: not-allowed;
}

/* Verification band — a quiet accented info card (prototype parity). */
.kl-ev-verify[b-ct07w65hto] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    background: color-mix(in srgb, var(--k-accent) 6%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-accent) 28%, var(--k-border));
    border-radius: var(--k-radius-md);
    padding: var(--k-space-4);
}

.kl-ev-verify-icon[b-ct07w65hto] {
    color: var(--k-accent);
    flex-shrink: 0;
}

.kl-ev-verify-title[b-ct07w65hto] {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 2px;
    color: var(--k-text);
}

.kl-ev-verify-body[b-ct07w65hto] {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* Footer. */
.kl-ev-footer[b-ct07w65hto] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k-space-3);
    border-block-start: 1px solid var(--k-border);
    padding: var(--k-space-6) var(--k-space-6);
}

/* The reason-capture delete dialog (opened by a row's Delete; absent until then). */
.kl-ev-delete-dialog[b-ct07w65hto] {
    margin-block-start: var(--k-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid color-mix(in srgb, var(--k-critical) 30%, var(--k-border));
    border-inline-start: 4px solid var(--k-critical);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-2);
    padding: var(--k-space-6);
}

.kl-ev-delete-title[b-ct07w65hto] {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--k-text);
}

.kl-ev-delete-body[b-ct07w65hto] {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

.kl-ev-delete-reason[b-ct07w65hto] {
    inline-size: 100%;
    resize: vertical;
}

.kl-ev-delete-actions[b-ct07w65hto] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k-space-3);
}

/* Empty / dismissed states (centered, present-not-abandoned). */
.kl-ev-empty[b-ct07w65hto],
.kl-ev-dismissed[b-ct07w65hto] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-3);
    text-align: center;
    padding: var(--k-space-12) var(--k-space-6);
    color: var(--k-text-muted);
}

.kl-ev-state-icon[b-ct07w65hto] {
    font-size: 32px;
    opacity: .55;
    margin: 0;
}

.kl-ev-empty-msg[b-ct07w65hto] {
    margin: 0;
    font-size: 15px;
}

/* Dark + outdoor: keep visible card elevation/borders (a flat card on a dark canvas
   reads as missing). The foundation already flips --k-surface/--k-border. */
html.dark .kl-ev-modal[b-ct07w65hto] {
    box-shadow: var(--k-elev-3);
    border-color: var(--k-border);
}

html.dark .kl-ev-verify[b-ct07w65hto] {
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 44%, var(--k-border));
}

html.dark .kl-ev-delete-dialog[b-ct07w65hto] {
    box-shadow: var(--k-elev-2);
}

/* Narrow screens: stack each item's actions under its meta. */
@media (max-width: 40rem) {
    .kl-ev-item[b-ct07w65hto] {
        flex-direction: column;
        align-items: stretch;
    }

    .kl-ev-item-actions[b-ct07w65hto] {
        justify-content: flex-end;
        border-block-start: 1px solid var(--k-border);
        padding-block-start: var(--k-space-3);
    }
}
/* _content/Kanine.Web/Components/Pages/ActivityFindsEntry.razor.rz.scp.css */
/* =============================================================================
   activity-finds-entry (/records/{id}/activity) — R11 page-scoped refinement.
   -----------------------------------------------------------------------------
   The foundation (kanine-design-system.css §5/§8) already supplies the cards
   (suffix -card / -card-title), the form kit (kf-field / kf-label / kf-select /
   kf-input / kf-textarea / kf-checkbox, incl. per-mode color-scheme on the native
   date/time widgets), the kl-btn primary/secondary/ghost system at the 48px touch
   target, the page measure (kl-page--wide), the section head, the failure banner
   (kl-failure), and the top-layer dialog (kl-dialog). This file adds ONLY the
   page-specific composition the prototype calls for: the responsive card grid
   (narrative is the wide lead card), the in-subset card-title glyph, the
   two-up field rows, the performance-metrics check column, the DATA-017
   find-field groups, the finds card head + composed empty state + find rows,
   and the footer action bar holding the SINGLE teal primary. Every value
   is an on-brand --k-* token (mode-adaptive: flips with light / dark / outdoor) —
   NO gradient, NO off-token colour, no body-bg change → the R11 token/canvas gate
   holds. Nothing here touches a tested data-anchor / data-testid; presentation
   only. Scoped-component CSS (Blazor adds [b-*]); selectors are also qualified to
   the page root (.kl-afe) for belt-and-braces specificity over the shared rules.
   ========================================================================== */

/* ---- Lede under the page title — a calm one-line orienting caption ---------- */
.kl-afe .kl-afe-lede[b-4kd2c0vdzb] {
    flex-basis: 100%;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* ---- Card grid — the prototype's 12-col composition, responsive ------------
   Narrative leads as the wide card; Times & Performance + Environmental sit
   beside it on wide viewports; Finds & evidence spans the full row. Collapses to
   a single column under the grid min so nothing crushes on a phone. */
.kl-afe .kl-afe-grid[b-4kd2c0vdzb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-4);
    align-items: start;
}

/* Narrative leads as a wide card spanning both rows. align-self:stretch overrides
   the grid's align-items:start so the card FILLS its 2-row height (else it sizes to
   its short content and the col-1 row-2 track paints as bare canvas beside the
   Environmental card — the R11 "awkward empty gap" finding); display:flex lets the
   inner .kf-field--grow / .kl-afe-narrative textarea flex up to fill that height. */
.kl-afe .kl-afe-card--narrative[b-4kd2c0vdzb] {
    grid-row: span 2;
    align-self: stretch;
    display: flex;
    flex-direction: column;
}
.kl-afe .kl-afe-card--finds[b-4kd2c0vdzb] { grid-column: 1 / -1; }

/* The grid cards carry a --modifier (--narrative / --env / --finds), so the WHOLE
   class attribute no longer ends in "-card" and the foundation
   .kl-shell-main [class$="-card"] chrome rule MISSES them (the documented multi-class
   suffix gap — kanine-design-system.css §5a / line ~963). Only the single-class
   Times & Performance card matched, so Environmental floated bare on the page bg (the
   R11 "no card chrome / inconsistent with the card above" finding). Apply the
   surface/border/radius/elevation/padding EXPLICITLY via the .kl-afe-card CLASS (which
   matches every card regardless of its modifier) so narrative / env / finds all read as
   proper cards. Mirrors the foundation -card tokens; trailing margin zeroed so the grid
   gap owns the rhythm. */
.kl-afe .kl-afe-card[b-4kd2c0vdzb] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6);
    margin-block-end: 0;
}

@media (max-width: 760px) {
    .kl-afe .kl-afe-grid[b-4kd2c0vdzb] { grid-template-columns: minmax(0, 1fr); }
    .kl-afe .kl-afe-card--narrative[b-4kd2c0vdzb] { grid-row: auto; }
}

/* ---- Card title glyph — a quiet teal foreground accent (in-subset icon) ----- */
.kl-afe .kl-afe-card-title[b-4kd2c0vdzb] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-afe .kl-afe-card-icon[b-4kd2c0vdzb] {
    font-size: 20px;
    color: var(--k-accent);
}

/* The finds card leads with a title + trailing actions on one row. */
.kl-afe .kl-afe-card-head[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-4);
}

.kl-afe .kl-afe-card-head .kl-afe-card-title[b-4kd2c0vdzb] { margin: 0; }

.kl-afe .kl-afe-card-head-actions[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
}

/* ---- Two-up field rows (base/activity type, start/end time) ----------------- */
.kl-afe .kl-afe-row2[b-4kd2c0vdzb] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-4);
}

@media (max-width: 460px) {
    .kl-afe .kl-afe-row2[b-4kd2c0vdzb] { grid-template-columns: minmax(0, 1fr); }
}

/* The narrative card stretches its textarea to fill the tall (row-span-2) card. */
.kl-afe .kf-field--grow[b-4kd2c0vdzb] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.kl-afe .kl-afe-narrative[b-4kd2c0vdzb] {
    min-block-size: 12rem;
    flex: 1 1 auto;
}

/* ---- Muted captions under fields (hint text) ------------------------------- */
.kl-afe .kl-afe-hint[b-4kd2c0vdzb] {
    margin: var(--k-space-1) 0 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--k-text-muted);
}

/* ---- DATA-017 conditional find-field groups ---------------------------------
   Mirrors the build surface's .kl-rb-find-group treatment: a quiet token-bordered
   card replacing the UA-default 2px groove fieldset chrome. */
.kl-afe .kl-rb-find-group[b-4kd2c0vdzb] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-4);
    margin: 0;
    min-inline-size: 0;
}

.kl-afe .kl-rb-find-group > legend[b-4kd2c0vdzb] { padding-inline: 0; }

/* ---- Performance-metrics check column -------------------------------------- */
.kl-afe .kf-afe-perf-metrics[b-4kd2c0vdzb] {
    border: 0;
    margin: 0;
    padding: 0;
}

.kl-afe .kf-afe-perf-metrics .kf-label[b-4kd2c0vdzb] {
    display: block;
    margin-block-end: var(--k-space-2);
}

.kl-afe .kf-afe-check[b-4kd2c0vdzb] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    padding: var(--k-space-2) var(--k-space-2);
    border-radius: var(--k-radius-sm);
    font-size: 15px;
    color: var(--k-text);
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-afe .kf-afe-check:hover[b-4kd2c0vdzb] {
    background: var(--k-surface-2);
}

/* The native brand-accented checkbox keeps its real tick (kf-checkbox handles
   the accent-color + size); just guarantee it does not shrink in the flex row. */
.kl-afe .kf-afe-check .kf-checkbox[b-4kd2c0vdzb] {
    flex: 0 0 auto;
}

/* ---- Composed empty state --------------------------------------------------- */
/* The empty state is a composed, titled card — never an emoji on a void. A
   calm token-tinted tile + a clear title + a muted note. */
.kl-afe .kl-afe-empty[b-4kd2c0vdzb] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-1);
    padding: var(--k-space-8) var(--k-space-4);
    text-align: center;
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
}

.kl-afe .kl-afe-empty-icon[b-4kd2c0vdzb] {
    font-size: 32px;
    color: var(--k-accent);
    opacity: .85;
}

.kl-afe .kl-afe-empty-title[b-4kd2c0vdzb] {
    margin: var(--k-space-1) 0 0;
    font-family: var(--k-font-display);
    font-size: 15px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-afe .kl-afe-empty-note[b-4kd2c0vdzb] {
    margin: 0;
    max-inline-size: 40ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* ---- REC-020 finds sub-section (mirrors the record-build add-find / find-list) */
.kl-afe .kl-afe-finds-block[b-4kd2c0vdzb] {
    margin-block-start: var(--k-space-6);
    padding-block-start: var(--k-space-4);
    border-block-start: 1px solid var(--k-border);
}

.kl-afe .kl-afe-finds-head[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-3);
}

.kl-afe .kl-afe-finds-head > .kf-label[b-4kd2c0vdzb] { margin: 0; }

/* The add-find form — a token-tinted inset panel grouping the type combobox,
   description, and its actions (mirrors the record-build .kl-rb-add-find). */
.kl-afe .kl-afe-add-find[b-4kd2c0vdzb] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-4);
    padding: var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
}

.kl-afe .kl-afe-add-find-actions[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
}

.kl-afe .kl-afe-find-list[b-4kd2c0vdzb] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-afe .kl-afe-find[b-4kd2c0vdzb] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
    font-size: 14px;
    color: var(--k-text);
}

.kl-afe .kl-afe-find-glyph[b-4kd2c0vdzb] {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--k-accent);
}

.kl-afe .kl-afe-find-type[b-4kd2c0vdzb] {
    font-weight: 700;
    color: var(--k-text);
}

.kl-afe .kl-afe-find-desc[b-4kd2c0vdzb] {
    flex: 1 1 auto;
    min-inline-size: 0;
    color: var(--k-text-muted);
}

.kl-afe .kl-afe-find-remove[b-4kd2c0vdzb] {
    flex: 0 0 auto;
    margin-inline-start: auto;
}

/* ---- Failure banner — icon-led, the foundation kl-failure supplies the skin -- */
.kl-afe .kl-afe-failure[b-4kd2c0vdzb] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-afe .kl-afe-failure-icon[b-4kd2c0vdzb] {
    flex: 0 0 auto;
    font-size: 20px;
    color: var(--k-critical);
}

/* ---- Footer action bar — ONE teal primary; tonal secondary; saved status ---- */
.kl-afe .kl-afe-actionbar[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-2);
    padding-block-start: var(--k-space-4);
    border-block-start: 1px solid var(--k-border);
}

.kl-afe .kl-afe-actionbar-buttons[b-4kd2c0vdzb] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    margin-inline-start: auto;
}

/* The saved-progress confirmation reads as a quiet success status (not chrome). */
.kl-afe .kl-afe-saved[b-4kd2c0vdzb] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: color-mix(in srgb, var(--k-success) 70%, var(--k-text));
}

.kl-afe .kl-afe-saved-icon[b-4kd2c0vdzb] { font-size: 18px; }

/* The Confirm primary carries a leading glyph; keep the icon/label aligned. */
.kl-afe .kf-btn-confirm-activity .ki[b-4kd2c0vdzb] {
    font-size: 18px;
}

/* =============================================================================
   Dark + dark-outdoor remaps — load-bearing legibility. The empty-state dashed
   border + evidence row borders can wash out on the dark surface; push them a
   touch harder so the composition keeps its edges (mirrors the foundation §5/§8
   pattern: a slightly stronger border on dark). No colour change beyond border
   contrast — the token canvas is unchanged.
   ========================================================================== */
html.dark .kl-afe .kl-afe-empty[b-4kd2c0vdzb] {
    border-color: color-mix(in srgb, var(--k-border) 78%, var(--k-text));
}

html.dark .kl-afe .kl-afe-find[b-4kd2c0vdzb],
html.dark .kl-afe .kl-afe-add-find[b-4kd2c0vdzb] {
    border-color: color-mix(in srgb, var(--k-border) 78%, var(--k-text));
}

html.dark .kl-afe .kl-afe-saved[b-4kd2c0vdzb] {
    color: color-mix(in srgb, var(--k-success) 55%, var(--k-text));
}

/* Dark-outdoor (html.dark[data-outdoor="true"]) — sunlight-legibility variant:
   firm the section dividers + empty-state edge a step further. */
html.dark[data-outdoor="true"] .kl-afe .kl-afe-actionbar[b-4kd2c0vdzb],
html.dark[data-outdoor="true"] .kl-afe .kl-afe-finds-block[b-4kd2c0vdzb] {
    border-block-start-color: color-mix(in srgb, var(--k-border) 70%, var(--k-text));
}

html.dark[data-outdoor="true"] .kl-afe .kl-afe-empty[b-4kd2c0vdzb] {
    border-color: color-mix(in srgb, var(--k-border) 65%, var(--k-text));
}
/* _content/Kanine.Web/Components/Pages/AdminOverview.razor.rz.scp.css */
/* =============================================================================
   AdminOverview — R11 page-scoped refinement (UI-GUAR-011, restrained-premium)
   -----------------------------------------------------------------------------
   The agency/admin LANDING (admin-overview.html): a bento launchpad of deep-link
   tiles into the built admin/operational subsystems. Consumes the foundation
   vocabulary (kl-page, kl-section-head, kl-chip, kl-btn, k-mono); adds ONLY the
   bento surfaces those do not cover. Every surface rides the flipping --k-*
   channels so light/dark/outdoor hold with no off-token colour or gradient.
   ========================================================================== */

.kl-admin-subtitle[b-sngje8zdy4] {
    margin: 0;
    color: var(--k-text-muted);
    font-size: 15px;
}

/* ---- Bento grid ----------------------------------------------------------- */
.kl-admin-bento[b-sngje8zdy4] {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: var(--k-space-4);
    margin-block-start: var(--k-space-4);
    grid-auto-rows: min-content;
}
@media (min-width: 48rem) {
    .kl-admin-bento[b-sngje8zdy4] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
    .kl-admin-bento[b-sngje8zdy4] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---- Tile shell ----------------------------------------------------------- */
.kl-admin-tile[b-sngje8zdy4] {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-4);
    min-block-size: 7.5rem;
}
.kl-admin-tile--2[b-sngje8zdy4] { grid-column: span 1; }
@media (min-width: 48rem) {
    .kl-admin-tile--2[b-sngje8zdy4] { grid-column: span 2; }
    .kl-admin-tile--full[b-sngje8zdy4] { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
    .kl-admin-tile--full[b-sngje8zdy4] { grid-column: 1 / -1; }
}
.kl-admin-tile--caution[b-sngje8zdy4] { border-inline-start: 3px solid var(--k-caution); }

.kl-admin-tile-head[b-sngje8zdy4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-2);
    margin-block-end: var(--k-space-2);
}
.kl-admin-tile-title[b-sngje8zdy4] {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--k-text);
}
.kl-admin-tile-title--muted[b-sngje8zdy4] { color: var(--k-text-muted); font-weight: 600; }
.kl-admin-tile-req[b-sngje8zdy4] { font-size: 11px; }
.kl-admin-tile-req--corner[b-sngje8zdy4] { align-self: flex-end; }
.kl-admin-tile-sub[b-sngje8zdy4] { margin: 0; color: var(--k-text-muted); font-size: 12px; }
.kl-admin-tile-sub--defer[b-sngje8zdy4] { opacity: .75; }

/* ---- Stat numbers --------------------------------------------------------- */
.kl-admin-stat[b-sngje8zdy4] {
    margin: 0;
    font-size: 34px;
    font-weight: 800;
    line-height: 1.05;
    color: var(--k-text);
}
.kl-admin-stat--sm[b-sngje8zdy4] { font-size: 26px; }
.kl-admin-stat--muted[b-sngje8zdy4] { color: var(--k-text-muted); }
.kl-admin-stat-unit[b-sngje8zdy4] { font-size: 16px; font-weight: 600; color: var(--k-text-muted); margin-inline-start: 2px; }

/* ---- Installed-pack chip row (PLAT-002 tile) ------------------------------ */
/* The chips themselves are the foundation .kl-chip; this adds only the wrapping row, which the
   foundation does not cover. A long pack label wraps instead of widening the bento cell. */
.kl-admin-packs[b-sngje8zdy4] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-1);
    margin: 0;
    margin-block-end: var(--k-space-2);
}

/* ---- Seats meter ---------------------------------------------------------- */
.kl-admin-seats[b-sngje8zdy4] { display: flex; flex-direction: column; gap: var(--k-space-2); }
.kl-admin-seats-row[b-sngje8zdy4] { display: flex; justify-content: space-between; color: var(--k-text-muted); font-size: 14px; }
.kl-admin-meter[b-sngje8zdy4] {
    inline-size: 100%;
    block-size: .5rem;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: 999px;
    overflow: hidden;
}
.kl-admin-meter-fill[b-sngje8zdy4] { display: block; block-size: 100%; background: var(--k-accent); border-radius: 999px; }
.kl-admin-seats-pending[b-sngje8zdy4] { margin: 0; color: var(--k-caution); font-size: 13px; }

/* ---- Health cells --------------------------------------------------------- */
.kl-admin-health[b-sngje8zdy4] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--k-space-3); }
.kl-admin-health-cell[b-sngje8zdy4] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-2);
}
.kl-admin-health-label[b-sngje8zdy4] { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--k-text-muted); }
.kl-admin-health-value[b-sngje8zdy4] { font-size: 16px; font-weight: 700; color: var(--k-text); }
.kl-admin-health-value--ok[b-sngje8zdy4] { color: var(--k-success); }
/* Warning/Error sync states — previously EMITTED by SyncHealthCssClass but never styled, so "Attention"
   rendered as plain text (status color absent AND emphasis absent). Canonical dark text remaps below. */
.kl-admin-health-value--warn[b-sngje8zdy4] { color: var(--k-caution); }
.kl-admin-health-value--err[b-sngje8zdy4] { color: var(--k-critical); }
.kl-admin-health-icon[b-sngje8zdy4] { margin-inline-end: var(--k-space-1); font-size: 14px; }
/* Canonical dark status palette (design-system §5f) — the fixed status hues do not flip on their own. */
html.dark .kl-admin-health-value--ok[b-sngje8zdy4] { color: #9ce6c1; }
html.dark .kl-admin-health-value--warn[b-sngje8zdy4] { color: #f4c884; }
html.dark .kl-admin-health-value--err[b-sngje8zdy4] { color: #f6ab9d; }

/* ---- Roles activity + launch link ----------------------------------------- */
.kl-admin-roles-activity[b-sngje8zdy4] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    color: var(--k-text);
    font-size: 14px;
    padding-block: var(--k-space-2);
    border-block-end: 1px solid var(--k-border);
}
.kl-admin-ago[b-sngje8zdy4] { margin-inline-start: auto; color: var(--k-text-muted); font-size: 12px; }
.kl-dot[b-sngje8zdy4] { inline-size: .5rem; block-size: .5rem; border-radius: 999px; flex-shrink: 0; background: var(--k-text-muted); }
.kl-dot--caution[b-sngje8zdy4] { background: var(--k-caution); }
.kl-admin-launch[b-sngje8zdy4] {
    margin-block-start: var(--k-space-3);
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    align-self: flex-start;
    color: var(--k-accent);
    font-size: 14px;
    text-decoration: none;
    font-weight: 600;
}
.kl-admin-launch:hover[b-sngje8zdy4] { text-decoration: underline; }
.kl-admin-launch-denied[b-sngje8zdy4] { margin-block-start: var(--k-space-3); margin-block-end: 0; color: var(--k-text-muted); font-size: 13px; }

/* ---- Config feed ---------------------------------------------------------- */
.kl-admin-config[b-sngje8zdy4] { display: flex; align-items: flex-start; gap: var(--k-space-2); font-size: 14px; color: var(--k-text-muted); }
.kl-admin-config-tag[b-sngje8zdy4] {
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    padding: 1px 4px;
    color: var(--k-text);
    flex-shrink: 0;
    font-size: 12px;
}

/* ---- Audit cells ---------------------------------------------------------- */
.kl-admin-audit[b-sngje8zdy4] { display: flex; gap: var(--k-space-3); }
.kl-admin-audit-cell[b-sngje8zdy4] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-3);
}

/* ---- Tenant display defaults (the live DATA-010 fact) ---------------------- */
.kl-admin-defaults[b-sngje8zdy4] { margin: 0; color: var(--k-text); font-size: 15px; font-weight: 600; }
.kl-admin-packs[b-sngje8zdy4] { display: flex; gap: var(--k-space-1); }

/* A stat-shaped tile that IS a deep-link (Tenant Settings) — the link affordance of the
   reports tile without its centered layout. */
.kl-admin-tile--nav[b-sngje8zdy4] { cursor: pointer; transition: border-color .12s ease; }
.kl-admin-tile--nav:hover[b-sngje8zdy4] { border-color: var(--k-accent); }
.kl-admin-tile--nav:focus-visible[b-sngje8zdy4] { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* Tile-head glyphs — the glanceable-launchpad law (doctrine A.1): every tile title leads
   with a small accent glyph so the eye lands before it reads. */
.kl-admin-tile-icon[b-sngje8zdy4] { color: var(--k-accent); margin-inline-end: var(--k-space-2); font-size: 14px; }

/* ---- Reports-surface link tile -------------------------------------------- */
.kl-admin-tile--link[b-sngje8zdy4] {
    align-items: center;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    transition: border-color .12s ease;
}
.kl-admin-tile--link:hover[b-sngje8zdy4] { border-color: var(--k-accent); }
.kl-admin-tile--link:focus-visible[b-sngje8zdy4] { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.kl-admin-tile-linkicon[b-sngje8zdy4] { font-size: 26px; color: var(--k-accent); }

/* ---- Drafts & backlog halves (deep-links) --------------------------------- */
.kl-admin-backlog[b-sngje8zdy4] { display: flex; gap: var(--k-space-3); }
.kl-admin-backlog-half[b-sngje8zdy4] {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-3);
    text-decoration: none;
    color: var(--k-text);
    transition: border-color .12s ease;
}
.kl-admin-backlog-half:hover[b-sngje8zdy4] { border-color: var(--k-accent); }
.kl-admin-backlog-half:focus-visible[b-sngje8zdy4] { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* ---- Agency-activity sparkline -------------------------------------------- */
.kl-admin-viewall[b-sngje8zdy4] { font-size: 13px; }
.kl-admin-spark[b-sngje8zdy4] {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    inline-size: 100%;
    block-size: 5rem;
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-2);
    margin-block: var(--k-space-2);
}
.kl-admin-spark-bar[b-sngje8zdy4] { flex: 1 1 0; background: var(--k-text-muted); border-radius: 2px 2px 0 0; opacity: .45; }
.kl-admin-spark-bar--accent[b-sngje8zdy4] { background: var(--k-accent); opacity: 1; }
/* Empty-law (B.6): the empty sparkline is one quiet line, never a full-height bordered void.
   ("-none", never "-empty" — the foundation suffix family would center-balloon it.) */
.kl-admin-spark-none[b-sngje8zdy4] { margin: var(--k-space-2) 0; color: var(--k-text-muted); font-size: 13px; }
.kl-admin-lastsync[b-sngje8zdy4] { margin: 0; color: var(--k-text-muted); font-size: 13px; }

/* Owner ask (running list 2026-07-02): the running build's git commit — quiet mono footer,
   the clone of /account's .kl-account-build. */
.kl-admin-build[b-sngje8zdy4] { margin: var(--k-space-2) 0 0; font-size: 12px; color: var(--k-text-muted); text-align: right; }

/* =============================================================================
   UI-GUAR-018 / R2-07 — the "Sample data" mock-flag chip on the bento tiles.
   -----------------------------------------------------------------------------
   Per the collect-by-default ladder, a tile whose value is not yet wired to a live
   read renders this restrained, legible chip alongside an in-source TODO:WIRE marker
   so no number poses as live telemetry. Light text on a desaturated surface-mix fill;
   holds in light/dark/outdoor on the flipping --k-* channels (no off-token colour).
   ========================================================================== */
.kl-mock-chip[b-sngje8zdy4] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-inline-start: auto;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--k-text-muted);
    background: color-mix(in srgb, var(--k-text-muted) 14%, var(--k-surface));
    border: 1px solid var(--k-border);
    white-space: nowrap;
}
/* The corner variant pins to the tile's top-inline-end (the 1x1 stat tiles place the
   req-code chip there already; the mock chip sits just inside it). */
.kl-mock-chip--corner[b-sngje8zdy4] {
    position: absolute;
    inset-block-start: var(--k-space-3);
    inset-inline-end: var(--k-space-3);
    margin: 0;
    transform: translateY(1.6rem);
}
/* _content/Kanine.Web/Components/Pages/CjisAddendum.razor.rz.scp.css */
/* Phase G WP-G5 — the CJIS addendum execution ceremony. */

.kl-addendum-lede[b-tnn6tpejc1] {
    max-width: 68ch;
    color: var(--k-text-muted);
}

.kl-addendum-doc[b-tnn6tpejc1] {
    max-height: 22rem;
    overflow-y: auto;
    padding: 1rem 1.25rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface, transparent);
}

.kl-addendum-doc pre[b-tnn6tpejc1] {
    margin: 0;
    white-space: pre-wrap;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
}

.kl-addendum-meta[b-tnn6tpejc1] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
}

.kl-addendum-attest[b-tnn6tpejc1] {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.75rem 0 1rem;
    max-width: 68ch;
    cursor: pointer;
}

.kl-addendum-state-chip--agency_signed[b-tnn6tpejc1] {
    background: color-mix(in srgb, #bf8700 18%, transparent);
    color: #9a6700;
}

.kl-addendum-state-chip--executed[b-tnn6tpejc1] {
    background: color-mix(in srgb, #1a7f37 16%, transparent);
    color: #1a7f37;
}

html.dark .kl-addendum-state-chip--agency_signed[b-tnn6tpejc1] {
    color: #d4a72c;
}

html.dark .kl-addendum-state-chip--executed[b-tnn6tpejc1] {
    color: #3fb950;
}

.kl-addendum-pending[b-tnn6tpejc1] {
    border-left: 3px solid #bf8700;
}

.kl-addendum-executed[b-tnn6tpejc1] {
    border-left: 3px solid #1a7f37;
}
/* _content/Kanine.Web/Components/Pages/CustomFields.razor.rz.scp.css */
/* =============================================================================
   CustomFields (custom-fields.html) — page-scoped R11 refinement (UI-GUAR-011).
   The PLAT-031 tenant-defined custom-field DEFINITION admin console. The shared
   design system (kanine-design-system.css) gives the page shell (kl-page), the
   form atoms (kf-field / kf-label / kf-input / kf-select), the buttons (kl-btn)
   and the icon primitive; this stylesheet adds ONLY the page-specific structure
   the system does NOT provide and which, until now, rendered UNSTYLED on the live
   host (there was no co-located CSS at all): the titled header + capacity chip,
   the two-pane (field-list rail + definition workspace) split, the selectable
   field-list rows with a mono key + type chip + governance pill, the readonly
   x_-prefix key input, the grouped definition form, the governance disclosure,
   and the composed empty states.

   Every colour resolves through --k-* tokens so the three modes (light / dark /
   outdoor) flip correctly and the R11 token/canvas gate holds — no raw hex, no
   gradient, no off-token fill. The spacing scale is --k-space-1/2/3/4/6/8/12/16
   (there is NO --k-space-5 / -7 / -9 …); every value below is a real step.
   NOTE (corrected 2026-07-02): scoped CSS CAN reach the dark ancestor — write a
   BARE `html.dark .my-class` rule (it is `:global(html.dark)` that ships verbatim
   and dies; Lookups.razor.css:340 is the proven in-repo pattern). The fixed
   status hues (--k-critical/--k-success/--k-caution) do NOT flip on their own,
   so the tinted badges below carry the canonical dark text remaps (§5f).
   ========================================================================== */

/* (Page width + centering + the column gap come from the foundation's .kl-page /
   .kl-page--wide — not re-declared here.) */

/* ---- Titled header: the page anchor (title + the real defined-field count) beside
   the capacity chip + the primary New Field action. ------------------------------ */
/* The root .kl-page is a flex column with its own gap, so the header owns NO bottom
   margin (that would double the rhythm against the gap). */
.kl-section-head[b-6k34tc87jy] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-4);
}
.kl-section-head h1[b-6k34tc87jy] {
    margin: 0 0 var(--k-space-1);
}
.kl-section-head .kl-muted[b-6k34tc87jy] {
    margin: 0;
    color: var(--k-text-muted);
}
.kl-head-actions[b-6k34tc87jy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    /* Keep the actions from being squeezed when the title wraps. */
    flex: 0 0 auto;
}

/* Capacity chip: a quiet, mode-aware status pill of the per-entity 50-cap usage —
   a tinted bordered chip (not bare text) so the headroom reads at a glance, and it
   shifts to the caution channel once the cap is reached. */
.kl-capacity[b-6k34tc87jy] {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--k-touch);
    padding-block: 0;
    padding-inline: var(--k-space-4);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-full);
    white-space: nowrap;
}
.kl-capacity--full[b-6k34tc87jy] {
    color: var(--k-caution);
    background: color-mix(in srgb, var(--k-caution) 14%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 36%, var(--k-surface));
}
/* Canonical dark status text (design-system §5f) — the fixed caution hue does not flip on its own. */
html.dark .kl-capacity--full[b-6k34tc87jy] { color: #f4c884; }

/* ---- Two-pane split: a fixed-width field-list rail beside the fluid definition
   workspace (collapses to a stack on narrow viewports). --------------------------- */
.kl-split[b-6k34tc87jy] {
    display: flex;
    align-items: stretch;
    gap: var(--k-space-6);
}
@media (max-width: 900px) {
    .kl-split[b-6k34tc87jy] {
        flex-direction: column;
    }
}

/* ---- Left rail: the target-entity selector + the scrollable field list. -------- */
.kl-list-pane[b-6k34tc87jy] {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
@media (max-width: 900px) {
    .kl-list-pane[b-6k34tc87jy] {
        flex-basis: auto;
    }
}
/* The entity-selector field inside the rail owns no extra bottom margin (the rail
   gap already spaces it from the list). */
.kl-list-pane .kf-field[b-6k34tc87jy] {
    margin-block-end: 0;
}

/* The field list itself: a calm, scannable column of selectable rows. A reserved
   min height keeps the rail a stable surface whether it holds three rows or one
   (CLS guard — the list never collapses to nothing while the first query settles). */
.kl-list[b-6k34tc87jy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    min-block-size: 18rem;
    overflow-y: auto;
}

/* A field-list row — the whole row is the select affordance. Generous touch target,
   a clear resting / hover / selected hierarchy. */
.kl-list-item[b-6k34tc87jy] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch);
    padding: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease),
                border-color var(--k-dur-1) var(--k-ease);
}
.kl-list-item:hover[b-6k34tc87jy] {
    background: var(--k-surface-2);
    border-color: var(--k-outline);
}
.kl-list-item:focus-visible[b-6k34tc87jy] {
    outline: 3px solid var(--k-focus);
    outline-offset: 2px;
}
/* The selected row carries the navy/teal identity: a left accent bar + a tinted fill
   (mirroring the signed-off OrgUnits tree + Lookups rail). --k-accent flips per mode. */
.kl-list-item--selected[b-6k34tc87jy] {
    position: relative;
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
}
.kl-list-item--selected[b-6k34tc87jy]::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: var(--k-radius-full);
    background: var(--k-accent);
}

/* The namespaced key — the row's primary identifier, a quiet mono token. It takes the
   row's flexible width so the type chip + governance pill sit at the trailing edge. */
.kl-list-item-key[b-6k34tc87jy] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 13px;
    color: var(--k-text);
}
.kl-list-item--selected .kl-list-item-key[b-6k34tc87jy] {
    color: var(--k-accent);
    font-weight: 600;
}
/* The field-type chip: a small neutral capsule (Text / Number / Lookup …). */
.kl-list-item-type[b-6k34tc87jy] {
    flex: 0 0 auto;
    padding-block: 2px;
    padding-inline: var(--k-space-2);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    white-space: nowrap;
}

/* ---- Governance badges: PII (critical) / Analyzable (success) — tinted, bordered
   pills (not bare coloured text) so the data-governance state reads at a glance; every
   channel resolves through its status token so the chip flips across the three modes. */
.kl-badge[b-6k34tc87jy] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding-block: 2px;
    padding-inline: var(--k-space-2);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.4;
    border: 1px solid transparent;
    border-radius: var(--k-radius-full);
    white-space: nowrap;
}
.kl-badge--pii[b-6k34tc87jy] {
    color: var(--k-critical);
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 34%, var(--k-surface));
}
.kl-badge--analyzable[b-6k34tc87jy] {
    color: var(--k-success);
    background: color-mix(in srgb, var(--k-success) 14%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 34%, var(--k-surface));
}
/* Canonical dark status text remaps (design-system §5f — the UI-GUAR-027 bug class the Lookups pills fixed):
   the surface mixes above re-point via var(--k-surface), but the fixed status TEXT hues need the dark palette. */
html.dark .kl-badge--pii[b-6k34tc87jy] { color: #f6ab9d; }
html.dark .kl-badge--analyzable[b-6k34tc87jy] { color: #9ce6c1; }

/* ---- Empty list state: a quiet, centred line inside the reserved rail height (not a
   void). Token-driven so it flips cleanly. ---------------------------------------- */
.kl-list .kl-muted[b-6k34tc87jy] {
    margin: auto 0;
    padding: var(--k-space-6) var(--k-space-3);
    text-align: center;
    color: var(--k-text-muted);
}

/* ---- Right pane: the definition workspace. A quiet accent top edge gives the
   workspace presence as the page anchor without shouting (the Lookups/OrgUnits
   precedent). --------------------------------------------------------------------- */
.kl-detail-pane[b-6k34tc87jy] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-block-start: 2px solid color-mix(in srgb, var(--k-accent) 38%, var(--k-border));
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}

/* The workspace heading (Field Definition). */
.kl-section-title[b-6k34tc87jy] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--k-text);
}

/* ---- The definition form: a single calm column. The structural envelope fields
   (entity / key / label / type) read top-down; the grouped sections follow. -------- */
.kl-form-grid[b-6k34tc87jy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
}
/* Neutralise the foundation's bottom margin on the fields inside (the form gap owns
   the rhythm) so the column spacing stays even. */
.kl-form-grid .kf-field[b-6k34tc87jy] {
    margin-block-end: 0;
}

/* The readonly x_-prefix key input: a joined prefix capsule + the suffix input, so the
   immutable namespace reads as part of one control. */
.kl-key-input[b-6k34tc87jy] {
    display: flex;
    align-items: stretch;
}
.kl-key-prefix[b-6k34tc87jy] {
    display: inline-flex;
    align-items: center;
    padding-inline: var(--k-space-3);
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 15px;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px solid var(--k-outline);
    border-inline-end: 0;
    border-start-start-radius: var(--k-radius-sm);
    border-end-start-radius: var(--k-radius-sm);
}
/* Square off the input's leading corners so it butts cleanly against the prefix. */
.kl-key-input .kf-input[b-6k34tc87jy] {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

/* ---- Grouped sections (Data Governance / Behavioral Logic): NOT nested cards —
   they read as quiet hairline-separated groups WITHIN the one definition surface
   (the prototype idiom). Override the foundation's [class$="-section"] card. ------- */
.kl-form-section[b-6k34tc87jy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    margin-block: 0;
    padding: var(--k-space-6) 0 0;
    background: transparent;
    border: 0;
    border-block-start: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
    border-radius: 0;
    box-shadow: none;
}
.kl-form-section-title[b-6k34tc87jy] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: .01em;
    color: var(--k-text);
}
.kl-form-section .kf-field[b-6k34tc87jy] {
    margin-block-end: 0;
}

/* Switch rows (PII / Required): the foundation lays kf-field out as a column; a switch
   row must be HORIZONTAL — the checkbox leads, the label sits beside it, the whole row
   is the affordance. */
.kf-field--switch[b-6k34tc87jy] {
    flex-direction: row;
    align-items: center;
    gap: var(--k-space-3);
    cursor: pointer;
}
.kf-field--switch input[type="checkbox"][b-6k34tc87jy] {
    inline-size: 18px;
    min-inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--k-teal-700, var(--k-accent));
    cursor: pointer;
}
.kf-field--switch .kf-label[b-6k34tc87jy] {
    color: var(--k-text);
    cursor: pointer;
}

/* Field help text under a control (kf-help is not a foundation -note suffix). */
.kf-help[b-6k34tc87jy] {
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* ---- Governance disclosure: a quiet accent toggle + a tinted note panel. -------- */
.kl-disclosure[b-6k34tc87jy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}
.kl-disclosure-toggle[b-6k34tc87jy] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    align-self: flex-start;
    min-block-size: 36px;
    color: var(--k-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}
.kl-disclosure-toggle:focus-visible[b-6k34tc87jy] {
    outline: 3px solid var(--k-focus);
    outline-offset: 2px;
    border-radius: var(--k-radius-sm);
}
.kl-disclosure-panel[b-6k34tc87jy] {
    margin: 0;
    padding: var(--k-space-3) var(--k-space-4);
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.55;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
}

/* ---- Form actions: trailing-aligned, a hairline rule above. -------------------- */
.kl-form-actions[b-6k34tc87jy] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-2);
    padding-block-start: var(--k-space-6);
    border-block-start: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
}

/* Inline save error under the form. */
.kl-error[b-6k34tc87jy] {
    margin: 0;
    color: var(--k-critical);
    font-size: 0.9rem;
}
html.dark .kl-error[b-6k34tc87jy] { color: #f6ab9d; }

/* ---- Detail-pane empty state: a composed, centred placeholder (an inline glyph in a
   tinted disc + a heading + one line of guidance) matching the OrgUnits caliber — the
   right pane never reads as a bare void. The glyph is an inline SVG (no icon-font
   dependency, so no FOUT/CLS risk), token-stroked so it flips across the modes. ----- */
.kl-detail-empty[b-6k34tc87jy] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--k-space-3);
    min-block-size: 18rem;
    padding: var(--k-space-8) var(--k-space-6);
}
.kl-detail-empty-disc[b-6k34tc87jy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: var(--k-space-1);
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    color: var(--k-accent);
}
.kl-detail-empty-title[b-6k34tc87jy] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--k-text);
}
.kl-detail-empty-msg[b-6k34tc87jy] {
    margin: 0;
    max-inline-size: 44ch;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.55;
}
/* _content/Kanine.Web/Components/Pages/EditEvent.razor.rz.scp.css */
/* R11 — Edit event (scheduling). Scoped polish for the hydrate-only Location status line.
   The Location is a hydrate-only soft-ref (no picker, no name lookup at this seam), so it renders as a CALM
   read-only status — visually distinct from the editable fields (a dashed muted line, never a raw GUID, never a
   barren empty box, never an editable-looking form input). Tokens flip per brand mode (light/dark/outdoor). */
.kl-ee-location-note[b-46ybih957n] {
    margin: 0;
    min-height: 2.6rem;
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-2) var(--k-space-3);
    color: var(--k-text-muted);
    font-style: italic;
    background: var(--k-surface-2);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-md);
}

/* Start / End date+time pairs sit side by side inside their field (the old Date-column/Time-column split made one
   instant zig-zag across two grid columns). */
.kl-ee-when-row[b-46ybih957n] {
    display: flex;
    gap: var(--k-space-2);
}

.kl-ee-when-row .kf-input[b-46ybih957n] {
    flex: 1 1 8rem;
    min-inline-size: 0;
}

/* The read-only recurrence status — the same calm hydrate-only treatment as the Location line (the interactive
   switch was write-less; a control that looks live but drops input is worse than absence). */
.kl-ee-recurring[b-46ybih957n] {
    margin-block-start: var(--k-space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2) var(--k-space-3);
}

.kl-ee-recurring-label[b-46ybih957n] {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
}

.kl-ee-recurring-status[b-46ybih957n] {
    margin: 0;
    padding: var(--k-space-1) var(--k-space-3);
    color: var(--k-text-muted);
    font-size: 13px;
    font-style: italic;
    background: var(--k-surface-2);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-full);
}

/* Add-personnel row: the picker takes the room, Add sits beside it. */
.kl-ee-add-row[b-46ybih957n] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-2);
}

.kl-ee-add-picker[b-46ybih957n] {
    flex: 1 1 16rem;
    min-inline-size: 0;
}

/* Attendee rows: quiet bordered rows (the ul reset rides the foundation -list family), an initials avatar disc,
   and the identity pair; Remove rides the foundation -delete danger family. */
.kl-ee-attendee[b-46ybih957n] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding: var(--k-space-2) var(--k-space-3);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface);
}

.kl-ee-attendee + .kl-ee-attendee[b-46ybih957n] {
    margin-block-start: var(--k-space-2);
}

.kl-ee-attendee-identity[b-46ybih957n] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    min-inline-size: 0;
}

.kl-ee-attendee-avatar[b-46ybih957n] {
    flex: 0 0 auto;
    inline-size: 32px;
    block-size: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-full);
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
    color: var(--k-accent);
    font-size: 12px;
    font-weight: 700;
}

.kl-ee-attendee-handler[b-46ybih957n] {
    font-weight: 600;
    color: var(--k-text);
}

.kl-ee-attendee-dog[b-46ybih957n] {
    color: var(--k-text-muted);
    font-size: 13px;
}

/* The zone the date and time boxes on this form are typed in. Quiet: it qualifies the fields below it. */
.kl-ee-zone-note[b-46ybih957n] {
    margin: 0 0 var(--k-space-2) 0;
    font-size: 12px;
    color: var(--k-text-muted);
}
/* _content/Kanine.Web/Components/Pages/EntityManage.razor.rz.scp.css */
/* =============================================================================
   EntityManage (manage.html) — page-scoped styling for the PLAT-030 GENERIC,
   pack-agnostic entity management surface. The shared design system
   (kanine-design-system.css) gives the page shell (kl-page), the form atoms
   (kf-field / kf-label / kf-input), the buttons (kl-btn), the dialog primitive
   (kl-dialog) and the section head; this stylesheet adds ONLY the structure the
   system does NOT provide: the registered-entity catalog cards, the two-pane
   (list rail + detail) split (mirroring the signed-off CustomFields/OrgUnits),
   the selectable list rows, the Records/Registry tabs, the registry table, the
   governance badges, and the "Restricted" placeholder for a redacted field.

   Every colour resolves through --k-* tokens so the three modes (light / dark /
   outdoor) flip correctly (R11 token/canvas gate). NOTE: bare `html.dark .x` IS
   reachable from scoped CSS (the proven app-wide pattern; the old "cannot reach"
   claim here was false) — used below only where a fixed status colour needs the
   canonical dark remap; everything else stays token-driven.
   ========================================================================== */

.kl-section-head[b-6cquiw3uub] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-4);
}
.kl-section-head h1[b-6cquiw3uub] { margin: 0 0 var(--k-space-1); }
.kl-section-head .kl-muted[b-6cquiw3uub] { margin: 0; color: var(--k-text-muted); }
.kl-head-actions[b-6cquiw3uub] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    flex: 0 0 auto;
}
.kl-muted[b-6cquiw3uub] { color: var(--k-text-muted); }

/* ---- The registered-entity catalog (the /manage index): a responsive grid of
   linkable entity cards. Each card is a navy/teal-accented surface. ------------- */
.kl-em-catalog[b-6cquiw3uub] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: var(--k-space-4);
}
.kl-em-card[b-6cquiw3uub] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    padding: var(--k-space-4);
    text-decoration: none;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-block-start: 2px solid color-mix(in srgb, var(--k-accent) 38%, var(--k-border));
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    transition: background-color var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-em-card:hover[b-6cquiw3uub] { background: var(--k-surface-2); border-color: var(--k-outline); }
.kl-em-card:focus-visible[b-6cquiw3uub] { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.kl-em-card-name[b-6cquiw3uub] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--k-text);
}
.kl-em-card-glyph[b-6cquiw3uub] { color: var(--k-accent); font-size: 16px; }
.kl-em-card-key[b-6cquiw3uub] { font-size: 12px; color: var(--k-text-muted); }
.kl-em-card-tags[b-6cquiw3uub] { display: flex; flex-wrap: wrap; gap: var(--k-space-2); margin-block-start: var(--k-space-1); }
.kl-em-tag[b-6cquiw3uub] {
    display: inline-flex;
    align-items: center;
    padding-block: 2px;
    padding-inline: var(--k-space-2);
    font-size: 11px;
    font-weight: 600;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-full);
}
.kl-em-tag--registry[b-6cquiw3uub] {
    color: var(--k-accent);
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
}

/* ---- Tabs: Records / Registry — a quiet underline-active tab strip. ------------ */
.kl-em-tabs[b-6cquiw3uub] {
    display: flex;
    gap: var(--k-space-2);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
}
.kl-em-tab[b-6cquiw3uub] {
    appearance: none;
    min-block-size: var(--k-touch);
    padding-inline: var(--k-space-4);
    background: transparent;
    border: 0;
    border-block-end: 2px solid transparent;
    color: var(--k-text-muted);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.kl-em-tab:hover[b-6cquiw3uub] { color: var(--k-text); }
.kl-em-tab:focus-visible[b-6cquiw3uub] { outline: 3px solid var(--k-focus); outline-offset: 2px; border-radius: var(--k-radius-sm); }
.kl-em-tab--active[b-6cquiw3uub] { color: var(--k-accent); border-block-end-color: var(--k-accent); }

/* ---- Two-pane split (list rail + detail workspace) — the CustomFields idiom. --- */
.kl-split[b-6cquiw3uub] { display: flex; align-items: stretch; gap: var(--k-space-6); }
@media (max-width: 900px) { .kl-split[b-6cquiw3uub] { flex-direction: column; } }

.kl-list-pane[b-6cquiw3uub] {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
@media (max-width: 900px) { .kl-list-pane[b-6cquiw3uub] { flex-basis: auto; } }
.kl-list-pane .kf-field[b-6cquiw3uub] { margin-block-end: 0; }

.kl-list[b-6cquiw3uub] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    /* B6: no reserved 18rem floor — an empty list sizes to its note, never a void. */
    overflow-y: auto;
}
.kl-list .kl-muted[b-6cquiw3uub] {
    margin: auto 0;
    padding: var(--k-space-6) var(--k-space-3);
    text-align: center;
    color: var(--k-text-muted);
}

.kl-list-item[b-6cquiw3uub] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch);
    padding: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-list-item:hover[b-6cquiw3uub] { background: var(--k-surface-2); border-color: var(--k-outline); }
.kl-list-item:focus-visible[b-6cquiw3uub] { outline: 3px solid var(--k-focus); outline-offset: 2px; }
.kl-list-item--selected[b-6cquiw3uub] {
    position: relative;
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
}
.kl-list-item--selected[b-6cquiw3uub]::before {
    content: "";
    position: absolute;
    inset-block: 8px;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: var(--k-radius-full);
    background: var(--k-accent);
}
.kl-list-item-key[b-6cquiw3uub] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    color: var(--k-text);
}
.kl-list-item--selected .kl-list-item-key[b-6cquiw3uub] { color: var(--k-accent); font-weight: 600; }

/* ---- Governance tags: PII / Restricted (critical channel) — a tinted bordered
   pill on the page's OWN kl-em-tag base (never .kl-badge — that namespace is
   reserved for the canonical lifecycle RecordStatusBadge family). ---------------- */
.kl-em-tag--pii[b-6cquiw3uub] {
    flex: 0 0 auto;
    font-size: 10px;
    letter-spacing: .05em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
    color: var(--k-critical);
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 34%, var(--k-surface));
}

/* Canonical dark status text (the status constants do not flip; E.20). */
html.dark .kl-em-tag--pii[b-6cquiw3uub] { color: #f6ab9d; }

/* ---- Right pane: the create/edit/detail workspace. ----------------------------- */
.kl-detail-pane[b-6cquiw3uub] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-block-start: 2px solid color-mix(in srgb, var(--k-accent) 38%, var(--k-border));
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
.kl-section-title[b-6cquiw3uub] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.005em;
    color: var(--k-text);
}

.kl-form-grid[b-6cquiw3uub] { display: flex; flex-direction: column; gap: var(--k-space-4); }
.kl-form-grid .kf-field[b-6cquiw3uub] { margin-block-end: 0; }
.kf-field .kl-em-tag[b-6cquiw3uub] { margin-inline-start: var(--k-space-2); }

.kl-form-actions[b-6cquiw3uub] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-2);
    padding-block-start: var(--k-space-6);
    border-block-start: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
}
.kl-error[b-6cquiw3uub] { margin: 0; color: var(--k-critical); font-size: 0.9rem; }

/* ---- The "Restricted" placeholder for a redacted (gated) field value. ---------- */
.kf-readonly[b-6cquiw3uub],
.kl-em-restricted[b-6cquiw3uub] {
    padding: var(--k-space-3);
    color: var(--k-text-muted);
    font-size: 14px;
    font-style: italic;
    background: var(--k-surface-2);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-md);
}

/* ---- Read-only detail list (a selected row, not in edit). ----------------------- */
.kl-em-detail-list[b-6cquiw3uub] { display: flex; flex-direction: column; gap: var(--k-space-3); margin: 0; }
.kl-em-detail-row[b-6cquiw3uub] { display: flex; flex-direction: column; gap: 2px; }
.kl-em-detail-row dt[b-6cquiw3uub] { font-size: 12px; font-weight: 600; color: var(--k-text-muted); }
.kl-em-detail-row dd[b-6cquiw3uub] { margin: 0; color: var(--k-text); }
.kl-em-detail-row dd.kl-em-restricted[b-6cquiw3uub] { display: inline-block; padding: 2px var(--k-space-2); }

/* ---- Registry table (the reusable/master master-record browser). ---------------- */
.kl-em-registry[b-6cquiw3uub] { display: flex; flex-direction: column; gap: var(--k-space-4); }
.kl-em-table[b-6cquiw3uub] { inline-size: 100%; border-collapse: collapse; }
.kl-em-table th[b-6cquiw3uub], .kl-em-table td[b-6cquiw3uub] {
    padding: var(--k-space-3);
    text-align: start;
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
    color: var(--k-text);
}
.kl-em-table th[b-6cquiw3uub] { font-size: 12px; font-weight: 600; color: var(--k-text-muted); }
.kl-em-td-name[b-6cquiw3uub] { font-weight: 600; }
.kl-em-td-attrs[b-6cquiw3uub] { color: var(--k-text-muted); font-size: 13px; }
.kl-em-th-actions[b-6cquiw3uub], .kl-em-td-actions[b-6cquiw3uub] { text-align: end; white-space: nowrap; }

/* A compact ghost button for the per-row registry action. */
.kl-btn--sm[b-6cquiw3uub] { min-block-size: 32px; padding-inline: var(--k-space-3); font-size: 13px; }

/* ---- Detail-pane empty state (composed, not a void) — the CustomFields caliber. - */
.kl-detail-empty[b-6cquiw3uub] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--k-space-3);
    min-block-size: 18rem;
    padding: var(--k-space-8) var(--k-space-6);
}
.kl-detail-empty-disc[b-6cquiw3uub] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    margin-block-end: var(--k-space-1);
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    color: var(--k-accent);
}
.kl-detail-empty-title[b-6cquiw3uub] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--k-text);
}
.kl-detail-empty-msg[b-6cquiw3uub] {
    margin: 0;
    max-inline-size: 44ch;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.55;
}
/* _content/Kanine.Web/Components/Pages/Error.razor.rz.scp.css */
/* UI-GUAR-003 / R3 + R11 — scoped styling for the prototype error card (ProposedUI/pages/error.html), mapped onto the
   kl-* / kf-* design tokens (restrained-premium register). The button APPEARANCE comes from the global .kl-btn /
   .kl-btn--primary / .kl-btn--ghost rules; this scoped sheet only owns the centered card, the critical-toned icon,
   the heading/lead type, the diagnostic block, and the action row. Logical properties throughout (zero horizontal
   overflow 320px to 1920px). */

.kl-err-wrap[b-kl37zgobmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-block-size: 70vh;
    padding: var(--k-space-6);
}

.kl-err-card[b-kl37zgobmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    inline-size: 100%;
    max-inline-size: 42rem;
    box-sizing: border-box;
    padding: var(--k-space-8, 32px);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}

/* Critical-toned status mark — a soft critical container with a ring, matching the prototype error icon. */
.kl-err-icon[b-kl37zgobmu] {
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: 4rem;
    block-size: 4rem;
    margin-block-end: var(--k-space-6, 24px);
    border-radius: var(--k-radius-full);
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-critical) 30%, transparent);
}

.kl-err-icon-glyph[b-kl37zgobmu] {
    /* No font-family/weight here — the .ki icon face must win (a scoped font-family out-specified it and
       rendered the glyph codepoint as tofu). */
    color: var(--k-critical);
    font-size: 28px;
    line-height: 1;
}

.kl-err-title[b-kl37zgobmu] {
    margin: 0 0 var(--k-space-4);
    font-family: var(--k-font-display, inherit);
    font-size: clamp(24px, 4vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    color: var(--k-text);
}

.kl-err-lead[b-kl37zgobmu] {
    margin: 0 0 var(--k-space-8, 32px);
    max-inline-size: 34rem;
    font-size: 16px;
    line-height: 1.55;
    color: var(--k-text-muted);
}

/* Diagnostic block — the preserved Request ID surface. */
.kl-err-diag[b-kl37zgobmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-space-1);
    inline-size: 100%;
    box-sizing: border-box;
    margin-block-end: var(--k-space-8, 32px);
    padding: var(--k-space-4);
    background: var(--k-bg);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
}

.kl-err-diag-label[b-kl37zgobmu] {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-err-diag-code[b-kl37zgobmu] {
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 13px;
    color: var(--k-text);
    word-break: break-all;
}

/* Action row — stacks on narrow widths, side-by-side on wider. */
.kl-err-actions[b-kl37zgobmu] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    inline-size: 100%;
    justify-content: center;
}

.kl-err-action[b-kl37zgobmu] {
    min-inline-size: 12.5rem;
}

@media (min-width: 480px) {
    .kl-err-actions[b-kl37zgobmu] {
        flex-direction: row;
    }

    .kl-err-action[b-kl37zgobmu] {
        flex: 0 1 auto;
    }
}
/* _content/Kanine.Web/Components/Pages/EventCreate.razor.rz.scp.css */
/* R11 — Event create (scheduling). EventCreate deliberately shares the kl-ee-* vocabulary with EditEvent via the
   GLOBAL shims (kl-ee-card / kl-ee-crumb in the design system) — this scoped sheet adds ONLY what the shims do not
   provide: the Start/End date+time pairing row (scoped CSS never crosses components, so EditEvent's when-row rule
   cannot reach here). Tokens only; flips per brand mode. */
.kl-ce-when-row[b-ewrghuppgi] {
    display: flex;
    gap: var(--k-space-2);
}

.kl-ce-when-row .kf-input[b-ewrghuppgi] {
    flex: 1 1 8rem;
    min-inline-size: 0;
}

/* The zone the date and time boxes on this form are typed in. Quiet: it qualifies the fields below it. */
.kl-ee-zone-note[b-ewrghuppgi] {
    margin: 0 0 var(--k-space-2) 0;
    font-size: 12px;
    color: var(--k-text-muted);
}
/* _content/Kanine.Web/Components/Pages/FeedbackTriage.razor.rz.scp.css */
/* Phase-B WP6 — the /feedback triage queue + detail drawer. Scoped CSS also gives this page a b-scope,
   self-demonstrating the WP1 map (regenerate kanine-scope-map.json when this file changes composition). */

.kl-feedback-triage .kl-feedback-egress-label[b-08ip9qfmq7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--k-text-muted);
}

.kl-feedback-triage tbody tr[b-08ip9qfmq7] {
    cursor: pointer;
}

/* Phase G WP-G2 — the .ksb status-bundle import. ::deep reaches the <InputFile> component's native input
   (CSS isolation doesn't stamp the scope onto a child component's output); the wrapping <label> still opens
   the picker while the input is display:none — the board's .kfb import idiom. */
.kl-feedback-import-label[b-08ip9qfmq7] {
    cursor: pointer;
}

.kl-feedback-import-label[b-08ip9qfmq7]  .kl-feedback-import-input {
    display: none;
}

/* Phase G R1 — the read-only operator-mirror bits on the review surface. */
.kl-feedback-review .kl-feedback-mirror-chip[b-08ip9qfmq7] {
    vertical-align: middle;
}

.kl-feedback-review .kl-feedback-review-publicnote[b-08ip9qfmq7] {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--k-accent, #2f6feb);
    border-radius: 4px;
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 6%, transparent);
}

.kl-feedback-detail-panel[b-08ip9qfmq7] {
    width: min(560px, 92vw);
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.25rem;
}

/* Full-screen detail (owner-directed 2026-07-09) — defeats the 30rem .kl-dialog clamp + the 560px panel width. */
.kl-feedback-detail-full[b-08ip9qfmq7] {
    max-inline-size: none;
    width: min(900px, 96vw);
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.kl-feedback-detail-head-full[b-08ip9qfmq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.8rem 1.2rem;
    border-bottom: 1px solid var(--k-border, #e2e6ec);
    flex: 0 0 auto;
}

.kl-feedback-detail-head-main[b-08ip9qfmq7] {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    min-inline-size: 0;
}

.kl-feedback-detail-head-actions[b-08ip9qfmq7] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.kl-feedback-rescind-confirm-wrap[b-08ip9qfmq7] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.kl-feedback-detail-body[b-08ip9qfmq7] {
    padding: 1rem 1.25rem 1.4rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

.kl-feedback-review section[b-08ip9qfmq7] {
    margin-bottom: 1.1rem;
}

.kl-feedback-review-dl[b-08ip9qfmq7] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    font-size: 0.9rem;
}

.kl-feedback-review-dl dt[b-08ip9qfmq7] {
    font-weight: 600;
}

.kl-feedback-review img[b-08ip9qfmq7] {
    max-width: 100%;
    border: 1px solid var(--k-border);
    border-radius: 6px;
}

.kl-feedback-review-editor[b-08ip9qfmq7] {
    width: 100%;
}

.kl-feedback-review-note[b-08ip9qfmq7] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
}

.kl-feedback-review-actions[b-08ip9qfmq7] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

html.dark .kl-feedback-review img[b-08ip9qfmq7] {
    border-color: #2c3a45;
}

/* Empty-state title + message (the EvidenceVault kl-ev-empty-* idiom; the two <p>s previously
   rendered unstyled — TEST-EFFICACY A1 unstyled-element finding). */
.kl-approvals-empty-title[b-08ip9qfmq7] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--k-text);
}

.kl-approvals-empty-message[b-08ip9qfmq7] {
    margin: 0;
    max-width: 46ch;
    color: var(--k-text-muted);
}

/* Phase G WP-G6 — the admin step-up queue + manifest review + "shipped with data" chips. */
.kl-feedback-stepup-queue[b-08ip9qfmq7] {
    margin: 0 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--k-border);
    border-left: 4px solid var(--k-accent, #2f6feb);
    border-radius: 8px;
}

.kl-feedback-stepup-queue h2[b-08ip9qfmq7] {
    font-size: 1rem;
    margin: 0 0 0.5rem;
}

.kl-feedback-stepup-card[b-08ip9qfmq7] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid var(--k-border);
}

.kl-feedback-stepup-dialog[b-08ip9qfmq7] {
    max-inline-size: none;   /* defeat the .kl-dialog 30rem clamp */
    width: min(760px, 94vw);
    max-height: 90vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.kl-feedback-stepup-note[b-08ip9qfmq7] {
    font-size: 0.85rem;
    color: var(--k-text-muted);
}

.kl-feedback-stepup-actions[b-08ip9qfmq7] {
    display: flex;
    gap: 0.5rem;
}

.kl-feedback-shipped[b-08ip9qfmq7] {
    margin-bottom: 0.6rem;
}

.kl-feedback-shipped-chip[b-08ip9qfmq7] {
    background: color-mix(in srgb, #8250df 16%, transparent);
    color: #8250df;
    font-weight: 600;
}
/* _content/Kanine.Web/Components/Pages/Home.razor.rz.scp.css */
/* =============================================================================
   Home — Lovable refresh (BRANCH EXPERIMENT: design/home-lovable-refresh)
   -----------------------------------------------------------------------------
   The designer's two-pane dashboard layout (premium cards, ambient accents, calm
   motion) remapped onto OUR navy + signal-teal --k-* palette. Every icon rule is mapped
   back to the FontAwesome .ki glyph font (font-size + colour), NOT the export's
   placeholder squares. The tight spacing + softer radii come from the home-scoped token
   block in kanine-redesign.css (.kl-shell-main:has(.kl-home-dash)). This REPLACES the
   prior R11 Home scoped sheet on this branch; `git checkout main -- <this file>` reverts.
   ========================================================================== */

/* ---- Welcome header: gradient wordmark ---- */
.kl-shell-main > h1[b-dp2nzm2qgc] {
  font-size: clamp(28px, 3.2vw, 40px);
  font-weight: 800; line-height: 1.05; letter-spacing: -0.02em;
  background: linear-gradient(180deg, var(--k-text), color-mix(in oklab, var(--k-text) 68%, var(--k-accent)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-testid="home-welcome"][b-dp2nzm2qgc] { color: var(--k-text-muted); font-size: 15px; margin: var(--k-space-4) 0 0; }
[data-testid="home-welcome"] strong[b-dp2nzm2qgc] {
  color: var(--k-accent); font-family: var(--k-font-mono); font-size: 12px; font-weight: 600;
  letter-spacing: .04em; padding: 1px 8px; margin-left: 4px;
  border-radius: var(--k-radius-sm);
  background: color-mix(in oklab, var(--k-accent) 14%, transparent);
}

/* ---- Signed-out sign-in CTA (owner 2026-07-06: welcome + ONE primary sign-in button, nothing else) ---- */
.kl-home-signin[b-dp2nzm2qgc] { margin-block-start: var(--k-space-6); }

/* ---- Two-pane dashboard ---- */
.kl-home-dash[b-dp2nzm2qgc] {
  display: grid; grid-template-columns: minmax(0,1fr) 380px; gap: var(--k-space-9);
  margin-block-start: var(--k-space-10);
}
/* Setup checklist tile placement: the card TOPS the Readiness column (col 2, auto row 1); Operations
   explicitly spans both rows of col 1; the Readiness aside auto-flows into col 2's next row. When the
   checklist is absent (done / skipped / non-admin) the aside auto-places straight into row 1 — no gap. */
.kl-home-dash > .kl-home-setup[b-dp2nzm2qgc] { grid-column: 2; align-self: start; }
.kl-home-pane--operations[b-dp2nzm2qgc] { grid-column: 1; grid-row: 1 / span 2; }
.kl-home-pane--readiness[b-dp2nzm2qgc] { grid-column: 2; }
@media (max-width: 1100px) {
  .kl-home-dash[b-dp2nzm2qgc] { grid-template-columns: 1fr; }
  /* Single column: everything stacks in DOM order — the setup checklist (first child) leads the page. */
  .kl-home-dash > .kl-home-setup[b-dp2nzm2qgc], .kl-home-pane--readiness[b-dp2nzm2qgc] { grid-column: 1; }
  .kl-home-pane--operations[b-dp2nzm2qgc] { grid-column: 1; grid-row: auto; }
}
.kl-home-pane[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: var(--k-space-7); min-width: 0; }
.kl-home-pane-head[b-dp2nzm2qgc] {
  display: flex; align-items: center; gap: var(--k-space-4);
  padding-bottom: var(--k-space-5); border-bottom: 1px solid var(--k-border);
}
.kl-home-pane-icon[b-dp2nzm2qgc] { color: var(--k-accent); font-size: 18px; }
.kl-home-pane-title[b-dp2nzm2qgc] {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--k-text-muted);
}
.kl-home-pane--operations .kl-home-pane-title[b-dp2nzm2qgc] { color: var(--k-accent); }

/* Task4 (owner 2026-07-23): the compact "Weather unavailable" badge that replaces the full weather card in the
   genuine unavailable/error state, sharing the Readiness header row instead of a mostly-empty card below it.
   margin-inline-start:auto right-aligns it using the row's own flex layout (the same pattern .kl-home-card-title
   and .kl-count already use), never a fixed offset. */
.kl-home-pane-head-badge[b-dp2nzm2qgc] {
  margin-inline-start: auto; flex-shrink: 0;
  font-family: var(--k-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .02em;
  color: var(--k-text-muted); white-space: nowrap;
  padding: 3px 10px; border-radius: var(--k-radius-full); border: 1px dashed var(--k-outline);
}

.kl-home-widget[b-dp2nzm2qgc] { min-width: 0; }
.kl-home-actionreq[b-dp2nzm2qgc] { display: grid; grid-template-columns: 1fr; gap: var(--k-space-7); }

/* ---- Generic card ---- */
.kl-home-card[b-dp2nzm2qgc] {
  position: relative; overflow: hidden;
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg); padding: var(--k-space-7); box-shadow: var(--k-elev-1);
}
.kl-home-card-head[b-dp2nzm2qgc] { display: flex; align-items: center; gap: var(--k-space-4); margin-bottom: var(--k-space-6); }
.kl-home-card-icon[b-dp2nzm2qgc] { font-size: 16px; color: var(--k-text-muted); }
.kl-home-card-icon--critical[b-dp2nzm2qgc] { color: var(--k-critical); }
.kl-home-card-icon--caution[b-dp2nzm2qgc] { color: var(--k-caution); }
.kl-home-card-title[b-dp2nzm2qgc] { margin: 0 auto 0 0; font-family: var(--k-font-display); font-size: 15px; font-weight: 700; color: var(--k-text); }
.kl-home-card-body[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: var(--k-space-5); color: var(--k-text); }
.kl-home-empty[b-dp2nzm2qgc] { margin: 0; color: var(--k-text-muted); font-size: 14px; }
.kl-home-card-head .kl-count[b-dp2nzm2qgc] { margin-inline-start: auto; }

/* ---- Mock-flag chip (hatched, restrained — marks not-yet-wired sample data) ---- */
.kl-mock-chip[b-dp2nzm2qgc] {
  margin-inline-start: auto;
  font-family: var(--k-font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  color: var(--k-text-muted); border: 1px dashed var(--k-outline);
  background: repeating-linear-gradient(-45deg,
     color-mix(in oklab, var(--k-outline) 16%, transparent) 0 6px, transparent 6px 12px);
}

/* ---- Quick actions ---- */
/* auto-fit so the grid seats 5 tiles (Log Medical joined when the duplicate top link rail retired). */
.kl-home-quickgrid[b-dp2nzm2qgc] { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--k-space-5); }
@media (max-width: 700px) { .kl-home-quickgrid[b-dp2nzm2qgc] { grid-template-columns: repeat(2,1fr); } }
.kl-home-qa[b-dp2nzm2qgc] {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between;
  gap: var(--k-space-8); min-height: 120px; padding: var(--k-space-7);
  background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg);
  color: var(--k-text); text-decoration: none; box-shadow: var(--k-elev-1);
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.kl-home-qa[b-dp2nzm2qgc]::after {
  content: "→"; position: absolute; right: var(--k-space-7); bottom: var(--k-space-6);
  font-family: var(--k-font-mono); color: var(--k-text-muted); transition: transform .2s, color .2s;
}
.kl-home-qa:hover[b-dp2nzm2qgc] { border-color: var(--k-accent); transform: translateY(-2px); box-shadow: var(--k-elev-2); }
.kl-home-qa:hover[b-dp2nzm2qgc]::after { transform: translateX(4px); color: var(--k-accent); }
.kl-home-qa .ki[b-dp2nzm2qgc] { font-size: 26px; color: var(--k-accent); }
/* Cap the label short of the absolute → arrow's slot so a long label wraps instead of colliding with it
   (the "New Record," comma-look). */
.kl-home-qa-label[b-dp2nzm2qgc] { font-family: var(--k-font-display); font-weight: 700; font-size: 16px; max-inline-size: calc(100% - 28px); }
/* Featured action — an ACCENT card, NOT a saturated fill. A barely-tinted teal surface +
   a teal hairline + ONE contained teal icon badge: the brand pop lives in the badge, so the
   tile reads as primary without the blinding block. Every channel is token-based, so it holds
   in light + dark (no bright fill in either). */
.kl-home-qa--primary[b-dp2nzm2qgc] {
  color: var(--k-text);
  background: color-mix(in oklab, var(--k-accent) 8%, var(--k-surface));
  border-color: color-mix(in oklab, var(--k-accent) 45%, var(--k-border));
}
.kl-home-qa--primary:hover[b-dp2nzm2qgc] {
  border-color: var(--k-accent);
  background: color-mix(in oklab, var(--k-accent) 12%, var(--k-surface));
  box-shadow: var(--k-elev-2);
}
.kl-home-qa--primary .ki[b-dp2nzm2qgc] {
  color: var(--k-on-accent);
  background: var(--k-accent);
  padding: 8px;
  border-radius: var(--k-radius-md);
  box-shadow: 0 6px 16px -8px color-mix(in oklab, var(--k-accent) 65%, transparent);
}
.kl-home-qa--primary .kl-home-qa-label[b-dp2nzm2qgc] { color: var(--k-accent); }
.kl-home-qa--primary[b-dp2nzm2qgc]::after { color: var(--k-accent); }

/* ---- Needs rework ---- */
[data-widget="needs-rework"][b-dp2nzm2qgc] { border-left: 3px solid var(--k-critical); }
.kl-home-rework-row[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 4px; }
.kl-home-rework-top[b-dp2nzm2qgc] { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-5); }
.kl-home-rework-id[b-dp2nzm2qgc] { font-size: 13px; font-weight: 600; color: var(--k-text); }
.kl-home-rework-when[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 12px; color: var(--k-text-muted); }
.kl-home-rework-issue[b-dp2nzm2qgc] { margin: 0; font-weight: 600; color: var(--k-critical); }
.kl-home-rework-note[b-dp2nzm2qgc] { margin: 2px 0 0; font-size: 13px; font-style: italic; color: var(--k-text-muted); }

/* ---- System clock ---- */
.kl-home-clock[b-dp2nzm2qgc] {
  display: flex; align-items: stretch; gap: var(--k-space-7);
  background: radial-gradient(80% 120% at 100% 0%, color-mix(in oklab, var(--k-accent) 14%, transparent), transparent 60%), var(--k-surface);
}
.kl-home-clock-rail[b-dp2nzm2qgc] { width: 4px; flex-shrink: 0; border-radius: var(--k-radius-full); background: linear-gradient(180deg, var(--k-accent), var(--k-accent-bright)); }
.kl-home-clock-body[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.kl-home-clock-eyebrow[b-dp2nzm2qgc] { display: inline-flex; align-items: center; gap: var(--k-space-3); font-family: var(--k-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--k-text-muted); }
.kl-home-dot[b-dp2nzm2qgc] {
  width: 8px; height: 8px; border-radius: 50%; background: var(--k-success);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--k-success) 25%, transparent);
  animation: k-home-pulse-b-dp2nzm2qgc 2s ease-in-out infinite;
}
@keyframes k-home-pulse-b-dp2nzm2qgc {
  0%,100% { box-shadow: 0 0 0 3px color-mix(in oklab, var(--k-success) 25%, transparent); }
  50%     { box-shadow: 0 0 0 6px color-mix(in oklab, var(--k-success) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) { .kl-home-dot[b-dp2nzm2qgc] { animation: none; } }
.kl-home-clock-time[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 32px; font-weight: 600; letter-spacing: -.02em; line-height: 1.05; color: var(--k-text); }
.kl-home-clock-date[b-dp2nzm2qgc] { font-size: 13px; color: var(--k-text-muted); }
/* The zone caption: quiet, but always present — an unlabelled hour reads as the viewer's own local time. */
.kl-home-clock-zone[b-dp2nzm2qgc] { font-size: 11px; letter-spacing: .08em; color: var(--k-text-muted); }
/* The unset-zone hint's call to action (owner request 2026-07-24). Inline text inside a sentence, so WCAG 2.5.8's
   inline exception applies and it deliberately gets NO 44px box — nothing around it changes size. It only has to
   read as a link: accent colour + a permanent underline, since the surrounding text is already low-contrast and
   colour alone must never be the only cue (WCAG 1.4.1). */
.kl-home-clock-zone-link[b-dp2nzm2qgc] {
  color: var(--k-accent-bright, var(--k-accent));
  text-decoration: underline;
  text-underline-offset: 2px;
}
.kl-home-clock-zone-link:hover[b-dp2nzm2qgc] { color: var(--k-accent); }
.kl-home-clock-zone-link:focus-visible[b-dp2nzm2qgc] {
  outline: 2px solid var(--k-accent-bright, var(--k-accent));
  outline-offset: 2px;
  border-radius: var(--k-radius-sm);
}
.kl-home-clock .kl-mock-chip[b-dp2nzm2qgc] { margin-inline-start: 0; }

/* ---- Weather ---- */
.kl-home-weather[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: var(--k-space-6); }
.kl-home-weather-now[b-dp2nzm2qgc] { display: flex; align-items: center; gap: var(--k-space-5); }
.kl-home-weather-icon[b-dp2nzm2qgc] { font-size: 30px; color: var(--k-accent); }
.kl-home-weather-temp[b-dp2nzm2qgc] { font-family: var(--k-font-display); font-weight: 700; font-size: 28px; color: var(--k-text); margin-right: auto; }
.kl-home-weather-hours[b-dp2nzm2qgc] { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--k-space-4); padding: var(--k-space-5); background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-md); }
.kl-home-weather-hour[b-dp2nzm2qgc] { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.kl-home-weather-h[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 10px; letter-spacing: .08em; color: var(--k-text-muted); }
.kl-home-weather-p[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-info); }
.kl-home-weather-meta[b-dp2nzm2qgc] { display: flex; gap: var(--k-space-7); font-size: 12px; color: var(--k-text-muted); }
.kl-home-weather-meta span[b-dp2nzm2qgc] { display: inline-flex; align-items: center; gap: 6px; }
.kl-home-weather-meta .ki[b-dp2nzm2qgc] { font-size: 14px; color: var(--k-accent); }

/* ---- My K9 ---- */
.kl-home-k9[b-dp2nzm2qgc] { padding: 0; overflow: hidden; }
.kl-home-k9-banner[b-dp2nzm2qgc] {
  display: flex; align-items: center; gap: var(--k-space-5); padding: var(--k-space-7);
  border-bottom: 1px solid var(--k-border);
  background:
    radial-gradient(80% 200% at 0% 0%, color-mix(in oklab, var(--k-accent) 18%, transparent), transparent 60%),
    linear-gradient(135deg, color-mix(in oklab, var(--k-accent) 14%, var(--k-surface-2)), var(--k-surface-2));
}
.kl-home-k9-avatar[b-dp2nzm2qgc] {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: var(--k-radius-full);
  background: color-mix(in oklab, var(--k-accent) 18%, var(--k-surface));
  color: var(--k-accent); font-size: 22px;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--k-accent) 16%, transparent);
}
.kl-home-k9-id[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 2px; margin-right: auto; }
.kl-home-k9-name[b-dp2nzm2qgc] { margin: 0; font-size: 18px; font-weight: 700; }
.kl-home-k9-rows[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: var(--k-space-3); padding: var(--k-space-5) var(--k-space-7) var(--k-space-7); }
/* Next Cert / Last Med read as tidy mini-cards with clear left/right padding (were flush, dashed-separated). */
.kl-home-k9-row[b-dp2nzm2qgc] { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); padding: var(--k-space-4) var(--k-space-5); background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-sm); font-size: 13px; }
.kl-home-k9-key[b-dp2nzm2qgc] { color: var(--k-text-muted); }
/* width:100% + border-box (see .kl-btn) so View Profile ends inside the card's right padding, never clipped. */
.kl-home-k9-action[b-dp2nzm2qgc] { margin-top: var(--k-space-2); width: 100%; box-sizing: border-box; }

/* ---- Pass-on ---- */
.kl-home-passon-list[b-dp2nzm2qgc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-space-3); }
.kl-home-passon-row[b-dp2nzm2qgc] {
  background: var(--k-surface-2);
  border: 1px solid var(--k-border); border-left: 3px solid transparent; border-radius: var(--k-radius-md);
  transition: background-color .12s, border-color .12s;
}
.kl-home-passon-row:hover[b-dp2nzm2qgc] { background: var(--k-surface-3); }
.kl-home-passon-row--unread[b-dp2nzm2qgc] { border-left-color: var(--k-info); }
/* The whole row is the link (deep-links its message in the inbox, ?msg=…); the anchor carries the row padding so
   the click target == the visible row, and the hover echoes kl-home-event-row (surface shift + accent subject).
   The descendant selector out-specifies the foundation `.kl-shell-main a:not([class*="-btn"])` teal-anchor rule. */
.kl-home-passon-row .kl-home-passon-link[b-dp2nzm2qgc] { display: block; padding: var(--k-space-5); color: inherit; text-decoration: none; border-radius: inherit; }
.kl-home-passon-row:hover .kl-home-passon-subj[b-dp2nzm2qgc] { color: var(--k-accent); }
.kl-home-passon-top[b-dp2nzm2qgc] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--k-space-4); margin-bottom: 2px; }
.kl-home-passon-subj[b-dp2nzm2qgc] { font-size: 13px; font-weight: 600; color: var(--k-text); transition: color .12s; }
.kl-home-passon-when[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 11px; color: var(--k-text-muted); }
.kl-home-passon-body[b-dp2nzm2qgc] { display: block; margin: 0; font-size: 12px; line-height: 1.5; color: var(--k-text-muted); }
.kl-home-passon-all[b-dp2nzm2qgc] { display: inline-flex; align-items: center; gap: 4px; margin-top: var(--k-space-5); font-size: 12px; font-weight: 600; color: var(--k-accent); text-decoration: none; }
.kl-home-passon-all:hover[b-dp2nzm2qgc] { text-decoration: underline; }
.kl-home-passon-all[b-dp2nzm2qgc]::after { content: "→"; font-family: var(--k-font-mono); }

/* ---- Events ---- */
.kl-home-events-list[b-dp2nzm2qgc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.kl-home-event-row a[b-dp2nzm2qgc] { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-2); padding: var(--k-space-4) var(--k-space-5); border-radius: var(--k-radius-sm); font-size: 13px; color: var(--k-text); text-decoration: none; transition: background-color .12s, color .12s; }
.kl-home-event-row a:hover[b-dp2nzm2qgc] { background: var(--k-surface-2); color: var(--k-accent); }
.kl-home-event-row .k-mono[b-dp2nzm2qgc] { font-size: 12px; color: var(--k-text-muted); }

/* ---- Sync: a COMPACT little status bar (rebuilt). The full `padding` shorthand overrides the generic
   .kl-home-card padding so it stays slim; tight line-heights + a 1px body gap remove the dead vertical
   space (no more big top gap or loose row spacing); align-items:center vertically centres icon/body/chip
   in the now content-height card. margin-block-start:auto still pins it to the column bottom when the
   column has spare height; otherwise it just sits snugly under Events. ---- */
.kl-home-sync[b-dp2nzm2qgc] {
  display: flex;
  align-items: center;
  gap: var(--k-space-4);
  margin-block-start: auto;
  padding: var(--k-space-4) var(--k-space-5);
}
.kl-home-sync-icon[b-dp2nzm2qgc] { font-size: 18px; color: var(--k-success); flex-shrink: 0; }
.kl-home-sync-body[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 1px; margin-right: auto; line-height: 1.2; }
.kl-home-sync-health[b-dp2nzm2qgc] { font-size: 12px; font-weight: 700; letter-spacing: .04em; line-height: 1.2; color: var(--k-success); }
.kl-home-sync-chk[b-dp2nzm2qgc] { font-size: 10px; line-height: 1.2; color: var(--k-text-muted); }
.kl-home-sync .kl-mock-chip[b-dp2nzm2qgc] { margin-inline-start: 0; flex-shrink: 0; }

/* =============================================================================
   Supervisor oversight
   ========================================================================== */
/* Now lives INSIDE the Operations column (above Drafts) — the pane gap handles separation (no top
   margin) and the padding is trimmed for the narrower column. */
.kl-home-supervisor[b-dp2nzm2qgc] {
  margin-block-start: 0;
  background: var(--k-surface); border: 1px solid var(--k-border);
  border-radius: var(--k-radius-lg); padding: var(--k-space-7); box-shadow: var(--k-elev-1);
}
.kl-home-supervisor > .kl-section-head[b-dp2nzm2qgc] {
  display: flex; align-items: center; gap: var(--k-space-5);
  margin-bottom: var(--k-space-8); padding-bottom: var(--k-space-6); border-bottom: 1px solid var(--k-border);
}
.kl-home-supervisor .kl-section-title[b-dp2nzm2qgc] { margin: 0 auto 0 0; font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--k-text-muted); }

/* auto-fill adapts the panel count to the narrower Operations-column width (container-responsive).
   align-items:stretch is explicit (not just the grid default) so every panel sharing a row fills that
   row's track height — see .kl-home-sup-panel's height:100% for the box-sizing half of the fix. */
.kl-home-sup-grid[b-dp2nzm2qgc] { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); align-items: stretch; gap: var(--k-space-6); list-style: none; margin: 0; padding: 0; }

/* No min-height: a short panel sits at content height (owner: no dead space); the grid row equalizes track
   height to the tallest panel, and each CTA's margin-top:auto keeps it pinned to its card's bottom edge.
   box-sizing:border-box + height:100% (owner ruling 2026-07-23, equal-height oversight tiles): a descendant
   of .kl-shell-main inherits NO box-sizing reset (the sheet's only reset is the shell's own direct children —
   see kanine-design-system.css "box-sizing is LOAD-BEARING" note), so this panel defaults to content-box.
   grid's default align-items:normal/stretch alone was NOT reliably filling every same-row panel to the row's
   track height on this page (measured: shorter panels landed ~8px short of taller row-mates); height:100%
   against a border-box panel resolves against the grid area itself and fills it exactly, with no clipping
   since the content never exceeds its own natural height and the flex column simply gets more free space. */
.kl-home-sup-panel[b-dp2nzm2qgc] {
  display: flex; flex-direction: column; gap: var(--k-space-5);
  background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-lg); padding: var(--k-space-6);
  transition: border-color .12s, transform .12s, box-shadow .12s;
  box-sizing: border-box; height: 100%;
}
.kl-home-sup-panel:hover[b-dp2nzm2qgc] { border-color: var(--k-outline); transform: translateY(-1px); box-shadow: var(--k-elev-2); }
.kl-home-sup-panel--critical[b-dp2nzm2qgc] { border-color: color-mix(in oklab, var(--k-critical) 35%, var(--k-border)); background: color-mix(in oklab, var(--k-critical) 6%, var(--k-surface-2)); }
.kl-home-sup-panel--caution[b-dp2nzm2qgc] { border-color: color-mix(in oklab, var(--k-caution) 35%, var(--k-border)); background: color-mix(in oklab, var(--k-caution) 6%, var(--k-surface-2)); }
/* UI-GUAR-027 (R2-16): in the DARK family a surface must never carry a status hue. Neutralize the
   critical/caution sup-panel FILL to the sanctioned --k-surface-2 (status stays on the colored border +
   the big-number color + the icon). Light/outdoor-light keep the redesign's faint high-contrast tint. */
html.dark .kl-home-sup-panel--critical[b-dp2nzm2qgc],
html.dark .kl-home-sup-panel--caution[b-dp2nzm2qgc] { background: var(--k-surface-2); }
.kl-home-sup-panel .kl-home-card-head[b-dp2nzm2qgc] { margin-bottom: 0; }
.kl-home-sup-panel .kl-home-card-icon[b-dp2nzm2qgc] { font-size: 16px; color: var(--k-text-muted); }
.kl-home-sup-rows[b-dp2nzm2qgc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; flex: 1; }
.kl-home-sup-rows li[b-dp2nzm2qgc] { display: flex; align-items: center; justify-content: space-between; gap: var(--k-space-4); padding: var(--k-space-3) 0; border-bottom: 1px dashed var(--k-border); font-size: 12px; color: var(--k-text-muted); }
.kl-home-sup-rows li:last-child[b-dp2nzm2qgc] { border-bottom: 0; }
.kl-home-sup-rows li .k-mono[b-dp2nzm2qgc] { font-size: 11px; color: var(--k-text); }
.kl-home-sup-big[b-dp2nzm2qgc] { margin: var(--k-space-4) 0 0; flex: 1; font-family: var(--k-font-display); font-weight: 800; font-size: 56px; line-height: 1; letter-spacing: -.04em; color: var(--k-text); }
.kl-home-sup-panel--critical .kl-home-sup-big[b-dp2nzm2qgc] { color: var(--k-critical); }
.kl-home-sup-panel--caution .kl-home-sup-big[b-dp2nzm2qgc] { color: var(--k-caution); }
.kl-home-sup-sub[b-dp2nzm2qgc] { margin: 0; font-size: 12px; color: var(--k-text-muted); }
.kl-home-sup-cta[b-dp2nzm2qgc] { margin-top: auto; width: 100%; }
.kl-home-sup-cta-only[b-dp2nzm2qgc] { min-height: 0; }
.kl-home-sup-cta-only .kl-home-card-head[b-dp2nzm2qgc] { margin-bottom: var(--k-space-5); }


/* =============================================================================
   Final-draft pass additions (2026-07-02) — drill-downs, compact states, weather detail
   ========================================================================== */

/* The foundation [class$="-empty"]/-loading state kit centers with --k-space-12 padding — right for a
   page-level empty state, wrong inside a dashboard card that already pads itself (it ballooned every
   quiet "Loading…"/"No X." line into a tall centered block). Flatten to an inline muted line. */
.kl-home-card .kl-home-empty[b-dp2nzm2qgc] { padding: 0; align-items: flex-start; text-align: start; }

/* K9 mini-rows that navigate (Next Cert → that certification, Last Med → that medical record). */
a.kl-home-k9-row[b-dp2nzm2qgc] { color: inherit; text-decoration: none; transition: border-color .12s, background-color .12s; }
.kl-home-k9-row--nav:hover[b-dp2nzm2qgc] { border-color: var(--k-accent); background: color-mix(in oklab, var(--k-accent) 6%, var(--k-surface-2)); }
.kl-home-k9-row--nav:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; }

/* Compact no-default-K9 helper (replaces the foundation-stacked tall variant). */
.kl-home-k9-unset[b-dp2nzm2qgc] { display: flex; flex-direction: column; align-items: center; gap: var(--k-space-4); padding: var(--k-space-6); text-align: center; }
.kl-home-k9-unset .kl-home-empty[b-dp2nzm2qgc] { padding: 0; }
.kl-home-k9-unset-actions[b-dp2nzm2qgc] { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--k-space-3); }

/* Dismissed variant: one quiet row, content height. */
.kl-home-k9-collapsed[b-dp2nzm2qgc] { display: flex; align-items: center; gap: var(--k-space-4); padding: var(--k-space-5) var(--k-space-6); }
.kl-home-k9-collapsed .kl-home-empty[b-dp2nzm2qgc] { padding: 0; }

/* Supervisor rows that navigate to their record. The li keeps the dashed separator; the anchor fills it. */
.kl-home-sup-rownav[b-dp2nzm2qgc] { display: flex; flex: 1; align-items: center; justify-content: space-between; gap: var(--k-space-4); color: inherit; text-decoration: none; min-width: 0; }
.kl-home-sup-rownav:hover[b-dp2nzm2qgc], .kl-home-sup-rownav:hover .k-mono[b-dp2nzm2qgc] { color: var(--k-accent); }
.kl-home-sup-rownav:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: var(--k-radius-sm); }

/* Dark-family remap for the big status numerals (UI-GUAR-027 restraint: the fixed semantic hues are too
   hot on the dark canvas; use the canonical dark status tints). */
html.dark .kl-home-sup-panel--critical .kl-home-sup-big[b-dp2nzm2qgc] { color: #f6ab9d; }
html.dark .kl-home-sup-panel--caution .kl-home-sup-big[b-dp2nzm2qgc] { color: #f4c884; }

/* Weather tile → detail popup affordance. A chrome-free real <button> wrapping the live tile. */
.kl-home-weather-detail-toggle[b-dp2nzm2qgc] {
  display: block; inline-size: 100%; padding: 0; margin: 0;
  background: none; border: 0; font: inherit; color: inherit; text-align: start;
  cursor: pointer; border-radius: var(--k-radius-md);
}
.kl-home-weather-detail-toggle:hover .kl-home-weather-temp[b-dp2nzm2qgc] { color: var(--k-accent); }
.kl-home-weather-detail-toggle:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 4px; }

/* Task B (owner request 2026-07-23): compact icon-only weather refresh, tucked into the live card's top-right
   corner — the SAME corner slot the FREE-tier teaser's .kl-home-weather-sample-badge uses below, so it never
   collides with either (only one of the two states ever renders). Sibling of .kl-home-weather-detail-toggle, not
   nested inside it (a <button> cannot contain a <button>). */
.kl-home-weather-refresh[b-dp2nzm2qgc] {
  position: absolute; top: 8px; right: 10px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  inline-size: 28px; block-size: 28px; padding: 0; margin: 0;
  background: var(--k-surface); border: 1px solid var(--k-border); border-radius: var(--k-radius-full);
  color: var(--k-text-muted); cursor: pointer; transition: color .15s, border-color .15s;
}
.kl-home-weather-refresh:hover:not(:disabled)[b-dp2nzm2qgc] { color: var(--k-accent); border-color: var(--k-accent); }
.kl-home-weather-refresh:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.kl-home-weather-refresh:disabled[b-dp2nzm2qgc] { opacity: .6; cursor: default; }
.kl-home-weather-refresh-icon[b-dp2nzm2qgc] { font-size: 13px; }
.kl-home-weather-refresh-icon--spin[b-dp2nzm2qgc] { animation: kl-home-weather-refresh-spin-b-dp2nzm2qgc .8s linear infinite; }
@keyframes kl-home-weather-refresh-spin-b-dp2nzm2qgc { to { transform: rotate(360deg); } }

/* Weather detail dialog (KlOverlay supplies scrim + centering; kl-dialog supplies the surface). */
.kl-home-weather-dialog[b-dp2nzm2qgc] { max-inline-size: 26rem; inline-size: calc(100% - 2rem); padding: var(--k-space-6); display: flex; flex-direction: column; gap: var(--k-space-5); }
.kl-home-weather-dlg-head[b-dp2nzm2qgc] { display: flex; align-items: center; gap: var(--k-space-4); }
.kl-home-weather-dlg-icon[b-dp2nzm2qgc] { font-size: 34px; color: var(--k-accent); }
.kl-home-weather-dlg-id[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 2px; margin-inline-end: auto; }
.kl-home-weather-dlg-title[b-dp2nzm2qgc] { margin: 0; font-family: var(--k-font-display); font-size: 1.075rem; }
.kl-home-weather-dlg-place[b-dp2nzm2qgc] { font-size: 12px; color: var(--k-text-muted); }
.kl-home-weather-dlg-temp[b-dp2nzm2qgc] { font-size: 24px; font-weight: 600; }
.kl-home-weather-dlg-grid[b-dp2nzm2qgc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-4); margin: 0; }
.kl-home-weather-dlg-fact dt[b-dp2nzm2qgc] { font-family: var(--k-font-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--k-text-muted); }
.kl-home-weather-dlg-fact dd[b-dp2nzm2qgc] { margin: 2px 0 0; font-size: 14px; font-weight: 600; color: var(--k-text); }
.kl-home-weather-dlg-forecast[b-dp2nzm2qgc] { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--k-space-4); padding: var(--k-space-4); background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-md); }
.kl-home-weather-dlg-cell[b-dp2nzm2qgc] { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; }
.kl-home-weather-dlg-cell .ki[b-dp2nzm2qgc] { font-size: 16px; color: var(--k-accent); }
.kl-home-weather-dlg-note[b-dp2nzm2qgc] { margin: 0; font-size: 11px; color: var(--k-text-muted); }

/* ── FREE-tier weather teaser (owner-directed 2026-07-18): a blurred, explicitly-SAMPLE mock behind a lock +
   subscription CTA. The blur + badge + overlay make it unmistakable as a sample — the live tile's
   "never a fabricated reading" doctrine stands untouched. ── */
.kl-home-weather-teaser[b-dp2nzm2qgc] { position: relative; overflow: hidden; }
.kl-home-weather-blur[b-dp2nzm2qgc] { filter: blur(5px); opacity: .5; pointer-events: none; user-select: none; }
.kl-home-weather-sample-badge[b-dp2nzm2qgc] { position: absolute; top: 8px; right: 10px; z-index: 2; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--k-text-muted); border: 1px solid currentColor; border-radius: 4px; padding: 2px 6px; }
.kl-home-weather-lock[b-dp2nzm2qgc] { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--k-space-3); text-align: center; padding: var(--k-space-4); }
.kl-home-weather-lock .ki[b-dp2nzm2qgc] { font-size: 22px; color: var(--k-accent); }
.kl-home-weather-lock p[b-dp2nzm2qgc] { margin: 0; font-size: 13px; line-height: 1.45; color: var(--k-text); max-width: 34ch; }

/* ── FREE-tier step-up banner (owner-directed 2026-07-18): the standing dashboard upgrade prompt. ── */
.kl-home-upgrade[b-dp2nzm2qgc] { display: flex; align-items: center; gap: var(--k-space-4); margin: var(--k-space-4) 0; }
.kl-home-upgrade span:nth-child(2)[b-dp2nzm2qgc] { flex: 1; }
.kl-home-upgrade .kl-btn[b-dp2nzm2qgc] { flex-shrink: 0; }

/* ── "Set up your agency" checklist (owner-directed 2026-07-18, vertical rebuild 2026-07-18): the admin's
   guided-setup tile at the top of the Readiness column. A checkpoint rail — three detectable steps on a
   connected marker spine, teal-filled checks as real data confirms each one, an n/3 mono readout + thin
   progress bar up top, review links + skip demoted to quiet rows. Disappears entirely when all three
   detectable steps are done (ShowSetupCard). ── */
.kl-home-setup[b-dp2nzm2qgc] {
  background:
    radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--k-accent) 10%, transparent), transparent 55%),
    var(--k-surface);
  border: 1px solid color-mix(in oklab, var(--k-accent) 35%, var(--k-border));
  border-radius: var(--k-radius-lg); padding: var(--k-space-7); box-shadow: var(--k-elev-1);
  display: flex; flex-direction: column; gap: var(--k-space-5); min-width: 0;
}
.kl-home-setup-head[b-dp2nzm2qgc] { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--k-space-4); }
.kl-home-setup-heading[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kl-home-setup-eyebrow[b-dp2nzm2qgc] {
  font-family: var(--k-font-mono); font-size: 10px; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase; color: var(--k-accent);
}
.kl-home-setup-title[b-dp2nzm2qgc] { margin: 0; font-family: var(--k-font-display); font-size: 17px; font-weight: 700; color: var(--k-text); }
.kl-home-setup-count[b-dp2nzm2qgc] { font-size: 22px; font-weight: 600; line-height: 1; color: var(--k-text); flex-shrink: 0; }
.kl-home-setup-count-of[b-dp2nzm2qgc] { font-size: 13px; color: var(--k-text-muted); }

/* Thin progress bar — fill width comes inline from SetupDoneCount. */
.kl-home-setup-track[b-dp2nzm2qgc] {
  block-size: 4px; border-radius: var(--k-radius-full); overflow: hidden;
  background: color-mix(in oklab, var(--k-accent) 14%, var(--k-surface-2));
}
.kl-home-setup-track-fill[b-dp2nzm2qgc] {
  block-size: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--k-accent), var(--k-accent-bright));
  transition: inline-size .4s ease;
}
@media (prefers-reduced-motion: reduce) { .kl-home-setup-track-fill[b-dp2nzm2qgc] { transition: none; } }

/* Checkpoint rail: 28px markers joined by a hairline spine (li::before between markers). */
.kl-home-setup-steps[b-dp2nzm2qgc] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.kl-home-setup-step[b-dp2nzm2qgc] { position: relative; display: flex; align-items: flex-start; gap: var(--k-space-5); padding-block: var(--k-space-4); }
.kl-home-setup-step:not(:last-child)[b-dp2nzm2qgc]::before {
  content: ""; position: absolute; left: 13.5px; top: calc(var(--k-space-4) + 28px); bottom: calc(-1 * var(--k-space-4) + 4px);
  inline-size: 1px; background: var(--k-border);
}
.kl-home-setup-marker[b-dp2nzm2qgc] {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  inline-size: 28px; block-size: 28px; border-radius: var(--k-radius-full);
  border: 1px solid var(--k-outline); background: var(--k-surface-2); color: var(--k-text-muted);
  transition: background-color .2s, border-color .2s, color .2s;
}
.kl-home-setup-marker .ki[b-dp2nzm2qgc] { font-size: 13px; }
.kl-home-setup-step-body[b-dp2nzm2qgc] { display: flex; flex-direction: column; gap: 1px; min-width: 0; padding-block-start: 3px; }
.kl-home-setup-step-link[b-dp2nzm2qgc] { font-size: 14px; font-weight: 600; color: var(--k-text); text-decoration: none; }
.kl-home-setup-step-link:hover[b-dp2nzm2qgc] { color: var(--k-accent); text-decoration: underline; }
.kl-home-setup-step-link:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: var(--k-radius-sm); }
.kl-home-setup-step-note[b-dp2nzm2qgc] { font-size: 12px; color: var(--k-text-muted); }

/* Done state: the solid circle-check glyph IS the marker (a full-bleed teal badge — no circle-in-circle),
   quiet label, teal "Done" note — the step stays a link. */
.kl-home-setup-step[data-done="true"] .kl-home-setup-marker[b-dp2nzm2qgc] {
  background: transparent; border-color: transparent; color: var(--k-accent);
}
.kl-home-setup-step[data-done="true"] .kl-home-setup-marker .ki[b-dp2nzm2qgc] { font-size: 28px; line-height: 1; }
.kl-home-setup-step[data-done="true"] .kl-home-setup-step-link[b-dp2nzm2qgc] { color: var(--k-text-muted); font-weight: 500; }
.kl-home-setup-step[data-done="true"] .kl-home-setup-step-note[b-dp2nzm2qgc] { color: var(--k-accent); font-weight: 600; }
.kl-home-setup-step[data-done="true"][b-dp2nzm2qgc]::before { background: color-mix(in oklab, var(--k-accent) 45%, var(--k-border)); }

/* ── Phone disclosure banner for the setup checklist (owner ruling 2026-07-24) ────────────────────────────────
   At 393px the full card measured 545px and pushed four of six Operations tiles below the fold while the page
   said "Pick a task to get started". At ≤640px — this repo's field breakpoint, the same one B3's overflow rule
   uses — the card collapses to one tappable row; above it NOTHING changes (the banner is display:none, and a
   display:none flex child consumes no gap, so the desktop card is byte-identical to before).

   ⚠ NAMED `-disclosure`, NOT `-banner`, ON PURPOSE (owner follow-up 2026-07-24: "could be vertically centred
   better, and it could be shorter vertically"). The shared design system carries
       .kl-shell-main [class$="-banner"], [class$="-conflict"], [class$="-failure"] {
           display:flex; align-items:flex-start; … margin-block-end:var(--k-space-4); }
   (kanine-design-system.css:762-768) — the standalone NOTICE/ALERT family. That selector matches on the class
   STRING ENDING, so the original name `kl-home-setup-banner` was swept into it and silently inherited
   `margin-block-end` (8px under Home's scoped token scale) plus `align-items:flex-start`. The margin sat BELOW the
   control inside the card, which is precisely why the row read as riding high — measured 11px above the control
   and 19px below — and why the card was 8px taller than its content needed. Renaming takes the element OUT of that
   family rather than fighting it with a compensating margin, and drops a pile of other accidental inheritance
   (padding, border, background, border-radius, font-size, line-height) this rule was overriding by luck.
   Same trap as T7 (`[class$="-field"]`); the shared sheet has 117 of these suffix selectors. */
.kl-home-setup-disclosure[b-dp2nzm2qgc] { display: none; }

@media (max-width: 640px) {
  /* Collapsed, this card holds ONE row, so it no longer needs the block padding that was sized for a multi-row
     card — the inline padding stays put so the row still lines up with the expanded card's content. Symmetric by
     construction, which is what actually centres the row; there is only one in-flow child, so the card's flex
     `gap` never applies and no height is hardcoded anywhere. */
  .kl-home-setup[b-dp2nzm2qgc] { padding-block: var(--k-space-3); padding-inline: var(--k-space-5); }

  .kl-home-setup-disclosure[b-dp2nzm2qgc] {
    display: flex; align-items: center; gap: var(--k-space-4);
    inline-size: 100%; min-block-size: var(--k-touch); /* A6 — 48px floor, never shrunk to save space */
    margin-block: 0; /* belt-and-braces: no shared suffix rule may reintroduce the stray margin */
    /* Block padding is deliberately kept: min-block-size sets the FLOOR, so a longer localised title or a
       two-digit count grows the control instead of clipping. */
    padding: var(--k-space-3) 0;
    background: none; border: 0; font: inherit; color: inherit; text-align: start; cursor: pointer;
  }
  .kl-home-setup-disclosure-icon[b-dp2nzm2qgc] { color: var(--k-accent); font-size: 16px; flex-shrink: 0; }
  .kl-home-setup-disclosure-label[b-dp2nzm2qgc] {
    flex: 1 1 auto; min-inline-size: 0;
    font-family: var(--k-font-display); font-size: 15px; font-weight: 700; color: var(--k-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* The count stays readable while collapsed — that is the whole point of the banner. */
  .kl-home-setup-disclosure-count[b-dp2nzm2qgc] { flex-shrink: 0; font-size: 16px; font-weight: 600; line-height: 1; color: var(--k-text); }
  .kl-home-setup-disclosure-chevron[b-dp2nzm2qgc] {
    flex-shrink: 0; color: var(--k-text-muted); font-size: 13px;
    transition: transform .2s ease;
  }
  .kl-home-setup-disclosure[aria-expanded="true"] .kl-home-setup-disclosure-chevron[b-dp2nzm2qgc] { transform: rotate(90deg); }
  .kl-home-setup-disclosure:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: var(--k-radius-sm); }

  /* The banner replaces the card header at phone width — the title and count would otherwise appear twice. */
  .kl-home-setup > .kl-home-setup-head[b-dp2nzm2qgc] { display: none; }

  /* Collapsed: the panel is genuinely hidden, which is the correct disclosure semantic for aria-expanded="false"
     (content promised hidden must not stay reachable by keyboard or screen reader). Expanding reveals it in place,
     directly under the banner, so nothing above it moves. */
  .kl-home-setup[data-expanded="false"] > .kl-home-setup-track[b-dp2nzm2qgc],
  .kl-home-setup[data-expanded="false"] > .kl-home-setup-steps[b-dp2nzm2qgc],
  .kl-home-setup[data-expanded="false"] > .kl-home-setup-foot[b-dp2nzm2qgc] { display: none; }
}

@media (prefers-reduced-motion: reduce) { .kl-home-setup-disclosure-chevron[b-dp2nzm2qgc] { transition: none; } }

/* ── Dev-support decision dialog (owner-directed 2026-07-18): the fast, explicit phone-home choice. ── */
.kl-home-devsupport-dialog[b-dp2nzm2qgc] { max-inline-size: 30rem; inline-size: calc(100% - 2rem); padding: var(--k-space-7); display: flex; flex-direction: column; gap: var(--k-space-4); }
.kl-home-devsupport-title[b-dp2nzm2qgc] { margin: 0; font-family: var(--k-font-display); font-size: 1.15rem; color: var(--k-text); }
.kl-home-devsupport-p[b-dp2nzm2qgc] { margin: 0; font-size: 14px; line-height: 1.55; color: var(--k-text); }
.kl-home-devsupport-warn[b-dp2nzm2qgc] {
  margin: 0; padding: var(--k-space-4) var(--k-space-5); font-size: 13px; line-height: 1.55;
  color: var(--k-text); background: color-mix(in oklab, var(--k-caution) 10%, var(--k-surface-2));
  border: 1px solid color-mix(in oklab, var(--k-caution) 40%, var(--k-border)); border-radius: var(--k-radius-md);
}
.kl-home-devsupport-note[b-dp2nzm2qgc] { margin: 0; font-size: 12px; color: var(--k-text-muted); }
.kl-home-devsupport-dialog .kl-dialog-actions[b-dp2nzm2qgc] { display: flex; justify-content: flex-end; gap: var(--k-space-3); }

/* Skip: a deliberately quiet text action — never competes with the steps. The settings-guide link shares the
   footer row (left) — the durable hub the checklist graduates into. */
.kl-home-setup-foot[b-dp2nzm2qgc] { display: flex; justify-content: space-between; align-items: baseline; gap: var(--k-space-4); }
.kl-home-setup-guide[b-dp2nzm2qgc] {
  font-size: 12px; font-weight: 600; color: var(--k-accent); text-decoration: none;
}
.kl-home-setup-guide[b-dp2nzm2qgc]::after { content: " →"; font-family: var(--k-font-mono); }
.kl-home-setup-guide:hover[b-dp2nzm2qgc] { text-decoration: underline; }
.kl-home-setup-guide:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: var(--k-radius-sm); }
.kl-home-setup-skip[b-dp2nzm2qgc] {
  background: none; border: 0; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: 12px; color: var(--k-text-muted); text-decoration: underline dotted;
}
.kl-home-setup-skip:hover[b-dp2nzm2qgc] { color: var(--k-text); }
.kl-home-setup-skip:focus-visible[b-dp2nzm2qgc] { outline: 2px solid var(--k-accent); outline-offset: 2px; border-radius: var(--k-radius-sm); }
/* _content/Kanine.Web/Components/Pages/Lookups.razor.rz.scp.css */
/* =============================================================================
   Lookups (lookups.html) — page-scoped R11 refinement (UI-GUAR-011).
   The PLAT-007 / PLAT-024 controlled-vocabulary console. Consumes the foundation
   vocabulary (kl-dialog, kf-* fields, kl-btn, the State kit) and adds ONLY the
   page-specific structure the shared system does not give: the two-pane taxonomy
   rail + workspace, the values table rendered as a calm data surface with on-brand
   status pills, and the centered merge / add overlays. All colour resolves through
   --k-* tokens so the three modes (light / dark / outdoor) flip correctly and the
   R11 token/canvas gate holds — no raw hex, no gradient, no off-token fill.
   ========================================================================== */

/* ---- Two-pane shell: a fixed-width taxonomy rail beside the fluid workspace. -- */
.kl-lookups[b-q97smm9doy] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-6);
}

/* UI-GUAR-036 (R2-25): on a phone the 16rem (256px) NON-shrinkable rail beside the workspace forced the page to
   ~580px (the live sweep measured documentElement scrollWidth 580 > 320). Stack the two panes vertically and let the
   rail span the row so there is zero horizontal page overflow at every phone width. */
@media (max-width: 640px) {
    /* align-items:stretch (overriding the desktop flex-start) so BOTH panes span the column at 100% — otherwise the
       workspace shrink-wraps its content (~722px header/table) and re-introduces page overflow. min-inline-size:0
       lets the workspace's own scroll-containers (the .kl-tablewrap'd value table) clamp instead of pushing the page. */
    .kl-lookups[b-q97smm9doy] { flex-direction: column; align-items: stretch; }
    /* box-sizing:border-box so the rail's own padding does NOT add to its 100% width (the ~10px the live sweep's
       self-diagnosis pinned on @lookups-rail extending past the viewport); min-inline-size:0 lets it shrink fully. */
    .kl-lookups-rail[b-q97smm9doy] { flex: 0 0 auto; inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }
    .kl-lookups-workspace[b-q97smm9doy] { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; box-sizing: border-box; }

    /* Owner request 2026-07-24 ("the navigation list from column 1 is still a wall of stuff I have to scroll past
       to see the cards"): the ~40-button rail is REPLACED by the one-row picker at phone width. The rail is
       display:none rather than visually-hidden on purpose — this is a swap, not a duplication, so the same
       navigation must not be announced twice to a screen reader. Every rail data-testid stays exactly where it
       was, on the same element, for the bUnit suites that click them (bUnit applies no media queries, so those
       tests are unaffected). */
    /* The rail→picker SWAP itself lives at the END of this file, AFTER the picker's base rules — a media query adds
       no specificity, so an "on" rule here would be overridden by the base `display:none` declared later. */
}

/* ---- Taxonomy rail: the vocabulary directory (All Master Data + per-type). ---- */
.kl-lookups-rail[b-q97smm9doy] {
    flex: 0 0 16rem;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    padding: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}

/* Rail captions: quiet, tracked-caps section markers that give the directory hierarchy
   (root + a vocabularies group) without competing with the selectable list items. */
.kl-lookups-rail-caption[b-q97smm9doy] {
    margin: 0 0 var(--k-space-1);
    padding-inline: var(--k-space-3);
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}
.kl-lookups-rail-group[b-q97smm9doy] {
    margin: var(--k-space-3) 0 var(--k-space-1);
    padding-inline: var(--k-space-3);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

/* Rail items read as a calm left-rail NAV LIST — readable UI-font labels with a clear
   resting / hover / selected hierarchy, NOT code-like mono. The "All Master Data" lead
   sits a touch heavier (the directory root); the per-type filters are the list body. */
.kl-lookups-rail-all[b-q97smm9doy],
.kl-lookups-rail-type[b-q97smm9doy] {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    inline-size: 100%;
    /* UI-GUAR-036 (R2-25): the taxonomy-rail buttons are ≥44 CSS-px touch targets (was 40; sweep flagged 256×40). */
    min-block-size: var(--k-touch);
    padding-block: 0;
    padding-inline: var(--k-space-3);
    text-align: start;
    font-family: var(--k-font-ui, system-ui, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: .005em;
    color: var(--k-text);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}
/* The directory root reads as the section lead. */
.kl-lookups-rail-all[b-q97smm9doy] {
    margin-block-end: var(--k-space-1);
    font-weight: 600;
}
.kl-lookups-rail-all:hover[b-q97smm9doy],
.kl-lookups-rail-type:hover[b-q97smm9doy] {
    background: var(--k-surface-2);
    color: var(--k-text);
}
/* The active rail item carries the navy/teal identity: a left accent bar + a tinted
   fill + a heavier label (mirroring the prototype's selected "Base Type" row). The
   accent bar is a pseudo-element so it never shifts the label or the row metrics.
   --k-accent flips per mode, so the selected state holds in light / dark / outdoor. */
.kl-lookups-rail-all[aria-pressed="true"][b-q97smm9doy],
.kl-lookups-rail-type[aria-pressed="true"][b-q97smm9doy] {
    color: var(--k-accent);
    font-weight: 700;
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 28%, var(--k-surface));
}
.kl-lookups-rail-all[aria-pressed="true"][b-q97smm9doy]::before,
.kl-lookups-rail-type[aria-pressed="true"][b-q97smm9doy]::before {
    content: "";
    position: absolute;
    inset-block: 7px;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: var(--k-radius-full);
    background: var(--k-accent);
}

/* ---- Workspace: header + suggest + values table. ----------------------------- */
.kl-lookups-workspace[b-q97smm9doy] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
}

.kl-lookups-header[b-q97smm9doy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    /* Untappable-header fix (found 2026-07-24): the mobile shell top bar is sticky at z-index 70, so anything that
       scroll-anchors to the very top of the viewport lands UNDERNEATH it — a real Playwright click on
       "Mark as reviewed" was refused with `<button data-testid="shell#topbar.k-back"> … intercepts pointer events`,
       i.e. these controls are genuinely untappable at some scroll positions. scroll-margin keeps the whole action
       row clear of the bar whenever anything scrolls it into view. Page-scoped by instruction; the general answer is
       a shell-level `scroll-padding-block-start` on the mobile layout, which would protect EVERY page — reported as
       a recommendation, not applied, because the shell files are under concurrent edit. */
    scroll-margin-block-start: var(--k-space-12);
}
/* The scope title is a page HEADING (the active vocabulary), so it wears the brand
   display face — not a code-like mono token. It reads as the workspace's anchor. */
.kl-lookups-scope[b-q97smm9doy] {
    margin: 0;
    margin-inline-end: auto;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.01em;
    color: var(--k-text);
}
/* Review Queue is a real toggle — show its pressed (active-triage) state on-brand. */
.kl-lookups-triage[aria-pressed="true"][b-q97smm9doy] {
    color: var(--k-accent);
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
}
.kl-lookups-triage[b-q97smm9doy],
.kl-lookups-add[b-q97smm9doy],
.kl-lookups-export[b-q97smm9doy],
.kl-lookups-columns[b-q97smm9doy] {
    min-block-size: var(--k-touch);
    padding: 0 var(--k-space-4);
    font-size: 14px;
    color: var(--k-text);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-lookups-triage:hover[b-q97smm9doy],
.kl-lookups-add:not(:disabled):hover[b-q97smm9doy] {
    background: var(--k-surface-2);
    border-color: var(--k-outline);
}
/* Add Value is the workspace's primary create — give it the teal lead when enabled. */
.kl-lookups-add:not(:disabled)[b-q97smm9doy] {
    color: var(--k-accent);
    border-color: color-mix(in srgb, var(--k-accent) 40%, var(--k-surface));
    font-weight: 600;
}
.kl-lookups-add:disabled[b-q97smm9doy],
.kl-lookups-export:disabled[b-q97smm9doy],
.kl-lookups-columns:disabled[b-q97smm9doy] {
    cursor: not-allowed;
    color: var(--k-text-muted);
    opacity: .55;
}

/* "Review your lookups" confirmation (owner ruling 2026-07-24). The BUTTON reuses .kl-lookups-export, so it
   already carries the var(--k-touch) 48px floor. Once confirmed there is nothing left to press, so the state is a
   plain status pill — not a disabled button, which would read as a broken action (A3). It is inline text, so
   WCAG 2.5.8's inline exception applies and it deliberately gets no 44px box. */
.kl-lookups-review-confirm[b-q97smm9doy] { font-weight: 600; }
.kl-lookups-reviewed[b-q97smm9doy] {
    display: inline-flex; align-items: center; gap: var(--k-space-3);
    font-size: 14px; font-weight: 600; color: var(--k-accent);
}
.kl-lookups-reviewed .ki[b-q97smm9doy] { font-size: 16px; }

/* ---- Suggest box (PLAT-022 typeahead). --------------------------------------- */
.kl-lookups-suggest[b-q97smm9doy] {
    position: relative;
    /* UI-GUAR-036 (R2-25): cap at the viewport on a phone (22rem=352px exceeded 320 and left a ~10px page overflow). */
    max-inline-size: min(22rem, 100%);
}
.kl-lookups-suggest-input[b-q97smm9doy] {
    inline-size: 100%;
    min-block-size: var(--k-touch); /* UI-GUAR-036: ≥44 touch target */
    padding: 0 var(--k-space-3);
    color: var(--k-text);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
}
.kl-lookups-suggest-input:focus-visible[b-q97smm9doy] {
    outline: 2px solid var(--k-accent);
    outline-offset: 1px;
}
.kl-lookups-suggest-list[b-q97smm9doy] {
    list-style: none;
    margin: var(--k-space-1) 0 0;
    padding: var(--k-space-1);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-elev-2);
}
.kl-lookups-suggest-item[b-q97smm9doy] {
    display: flex;
    align-items: baseline;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch); /* UI-GUAR-036: ≥44 touch target */
    padding: 0 var(--k-space-2);
    border-radius: var(--k-radius-sm);
}
.kl-lookups-suggest-item:hover[b-q97smm9doy] {
    background: var(--k-surface-2);
}
/* 2026-07-02: a suggestion is PICKABLE (it commits its type scope) — cursor + focus ring match the affordance. */
.kl-lookups-suggest-item[b-q97smm9doy] { cursor: pointer; }
.kl-lookups-suggest-item:focus-visible[b-q97smm9doy] {
    outline: 2px solid var(--k-accent);
    outline-offset: 2px;
}
.kl-lookups-suggest-code[b-q97smm9doy] {
    color: var(--k-accent);
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 12px;
}
.kl-lookups-suggest-label[b-q97smm9doy] {
    color: var(--k-text);
    font-size: 14px;
}
.kl-lookups-suggest-empty[b-q97smm9doy] {
    margin: var(--k-space-2) 0 0;
    color: var(--k-text-muted);
    font-size: 13px;
}

/* ---- Values table: a calm, scannable data surface with a quiet accent top edge so
   the workspace reads as the page anchor (presence) without shouting. ---------------- */
.kl-lookups-table[b-q97smm9doy] {
    inline-size: 100%;
    border-collapse: collapse;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-block-start: 2px solid color-mix(in srgb, var(--k-accent) 38%, var(--k-border));
    border-radius: var(--k-radius-lg);
    overflow: hidden;
    box-shadow: var(--k-elev-1);
}
/* Column headers (2026-07-02 — the values table rendered four-to-five UNLABELED columns):
   the .kl-data-table thead idiom — uppercase 11px muted, a quiet bottom rule. */
.kl-lookups-th[b-q97smm9doy] {
    padding: var(--k-space-3) var(--k-space-4);
    text-align: start;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
    border-block-end: 1px solid var(--k-border);
}
.kl-lookups-th--actions[b-q97smm9doy] { text-align: end; }
.kl-lookups-row[b-q97smm9doy] {
    border-block-start: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    transition: background-color var(--k-dur-1) var(--k-ease);
}
.kl-lookups-row:first-child[b-q97smm9doy] {
    border-block-start: 0;
}
.kl-lookups-row:hover[b-q97smm9doy] {
    background: var(--k-surface-2);
}
.kl-lookups-table td[b-q97smm9doy] {
    padding: var(--k-space-3) var(--k-space-4);
    font-size: 14px;
    color: var(--k-text);
    vertical-align: middle;
}
.kl-lookups-cell-code[b-q97smm9doy] {
    color: var(--k-accent);
    font-family: var(--k-font-mono, ui-monospace, monospace);
    inline-size: 9rem;
    /* ROOT CAUSE of the desktop horizontal scroll (owner: "I cannot see the whole row / the edit button depending
       on screen size"). MEASURED at 1400px, the five columns summed to the table's 946px as:
           status 93.3 | CODE 452 | label 191.7 | order 72.7 | actions 136.4
       — the Code column alone was 48% of the table, because one seeded value's code is a single 50-character
       token with no break opportunity (ENGAGED_IN_OR_SHOWED_INTENT_TO_AGGRESSIVELY_RESIST). A cell's min-content
       width is its longest unbreakable run, and a table can never render narrower than the sum of its columns'
       min-contents, so ONE row was setting the floor for the whole table and pushing the actions column off screen.

       The declared inline-size values were never the lever and shaving them would have achieved nothing: the table
       algorithm had ALREADY squeezed status to 93.3px against its own 8rem declaration. Only the min-content floor
       mattered.

       `overflow-wrap: anywhere` (NOT break-word) is the fix, because only `anywhere` reduces the min-content
       contribution — `break-word` wraps visually but leaves the intrinsic floor intact, so the table would not
       have shrunk at all. READABILITY IS NOT TRADED: every character still renders, the code is never truncated
       or ellipsised, it simply wraps onto a second line in the rare long case. Desktop/tablet only — the phone
       card already gets this from the shared card system. */
    overflow-wrap: anywhere;
}
.kl-lookups-cell-order[b-q97smm9doy] {
    color: var(--k-text-muted);
    inline-size: 5rem;
    font-variant-numeric: tabular-nums;
}
.kl-lookups-cell-actions[b-q97smm9doy] {
    text-align: end;
    white-space: nowrap;
}

/* ── PHONE: the values table reflows to CARDS via the SHARED `.kl-table-cards` system ─────────────────────────
   Adopted, not re-implemented (A1: shared styling lives once). The design system already ships an opt-in
   responsive-card treatment (kanine-design-system.css §"table cards") that six pages use — Certifications, Dogs,
   Expenses, MasterNames, Medical, People. Lookups was simply never converted. The opt-in lives in the MARKUP
   (`kl-table-cards` on the <table>, `data-label` / `kl-tcard-title` / `kl-tcard-actions` on the cells), so there is
   deliberately NO page-scoped card CSS here.

   WHY THIS HAD TO COME FIRST: a <table> cannot render narrower than its min-content width, and this one's floor was
   956px (fixed 8rem status + 9rem code + 5rem order + a nowrap actions column of >=48px buttons). At 393px that
   escaped .kl-tablewrap and forced documentElement.scrollWidth to 956; a real mobile browser answers that by
   EXPANDING THE LAYOUT VIEWPORT to 956, so window.innerWidth reported 956, not 393, and every `max-width: 640px`
   rule on this page was being evaluated against the wrong viewport. Capping the row count would NOT have fixed it:
   50 rows have the same min-content width as 1,248.

   A hand-rolled version of this block was written here first and silently did nothing: §5n's table-structural guard
   (kanine-design-system.css:1043-1048) re-asserts `display:table-row`/`table-cell` with `!important` on every table
   inside .kl-shell-main, so page-scoped display rules cannot beat it. The shared system carries the matching
   `!important` overrides by design. If this ever needs extending, extend the SHARED system, never re-add a copy
   here. */

/* ── Row actions PINNED to the trailing edge (owner report 2026-07-24: "on desktop and tablet I cannot see the
   whole row — like I can't see the edit button depending on size of screen"). ───────────────────────────────────
   MEASURED CAUSE: the values table's min-content width is 956px (fixed 8rem status + 9rem code + 5rem order, plus a
   `white-space:nowrap` actions column carrying up to four ≥48px buttons on a PROPOSED row). The workspace's
   .kl-tablewrap is only 634-870px at the widths that matter, so the actions column lands OUTSIDE the viewport —
   measured at 1024 / 1180 / 1400 / 1440 the Edit button's rect sat at x≈1190-1495 with document.elementFromPoint at
   its centre returning nothing at all (it reached the button ONLY at 1280). It was technically scrollable inside
   .kl-tablewrap, but nothing signalled that — the owner is right that the control is effectively unreachable.
   Sticky pins the actions cell to the scroll container's trailing edge so the row's controls are ALWAYS on screen
   whatever the horizontal scroll offset, with no page-level horizontal scrolling (the project's hard constraint) and
   without shrinking a single target (A6 — the buttons keep their var(--k-touch) floor untouched).
   ≥641px only: below that the row becomes a card and there is no horizontal axis to pin to. */
@media (min-width: 641px) {
    /* REQUIRED for the sticky cells below: Chromium ignores `position:sticky` on a <td>/<th> inside a
       `border-collapse:collapse` table. border-spacing:0 keeps the rendered geometry identical to the collapsed
       table (the row dividers are per-row border-block-start declarations, not collapsed cell borders). */
    .kl-lookups-table[b-q97smm9doy] {
        border-collapse: separate;
        border-spacing: 0;
        /* ALSO required: an ancestor with `overflow:hidden` becomes the sticky element's scroll container, so the
           table's own overflow clip silently neutralised the pin. The rounded corners it existed to clip are already
           clipped by .kl-tablewrap (shared sheet: border-radius + overflow-x:auto), so nothing is lost. */
        overflow: visible;
    }
    .kl-lookups-th--actions[b-q97smm9doy],
    .kl-lookups-cell-actions[b-q97smm9doy] {
        position: sticky;
        inset-inline-end: 0;
        z-index: 1;
        /* An opaque backdrop is REQUIRED: without it the scrolled-under label text shows through the pinned cell.
           Both states are declared so the pinned cell tracks the row's hover exactly like the rest of the row. */
        background: var(--k-surface);
    }
    .kl-lookups-row:hover .kl-lookups-cell-actions[b-q97smm9doy] {
        background: var(--k-surface-2);
    }
    /* A hairline so the pinned column reads as pinned rather than as text overlapping mid-scroll. */
    .kl-lookups-th--actions[b-q97smm9doy]::before,
    .kl-lookups-cell-actions[b-q97smm9doy]::before {
        content: "";
        position: absolute;
        inset-block: 0;
        inset-inline-start: 0;
        inline-size: 1px;
        background: var(--k-border);
    }
}

/* Status pill: a small mode-aware lifecycle badge (active / proposed / merged) — a
   tinted, bordered chip (mirroring the prototype) rather than bare coloured text, so
   the lifecycle reads at a glance. Every channel resolves through the status token so
   the chip flips cleanly across the three modes. */
.kl-lookups-cell-status[b-q97smm9doy] {
    inline-size: 8rem;
}
.kl-lookups-status-pill[b-q97smm9doy] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    padding-block: 3px;
    padding-inline: var(--k-space-2);
    border: 1px solid transparent;
    border-radius: var(--k-radius-full);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    line-height: 1.4;
    white-space: nowrap;
}
.kl-lookups-row[data-status="active"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: var(--k-success);
    background: color-mix(in srgb, var(--k-success) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 32%, var(--k-surface));
}
.kl-lookups-row[data-status="proposed"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: var(--k-caution);
    background: color-mix(in srgb, var(--k-caution) 14%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 36%, var(--k-surface));
}
.kl-lookups-row[data-status="merged"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: var(--k-text-muted);
    background: color-mix(in srgb, var(--k-text-muted) 10%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-text-muted) 28%, var(--k-surface));
}
/* UI-GUAR-027 (R2-16, ruling §H.1 #16) — DARK-MODE BADGE RESTRAINT. In the light/outdoor field the dark-on-tint
   above is high-contrast on white; in the DARK family that bright --k-success TEXT (#1E9E6A) on the desaturated
   dark surface-mix is too low-contrast (the owner's "Active badge too bright / hard to read"). Re-map to LIGHT text
   on a more-saturated (still ≤~0.35 HSL-sat) surface-mix fill — the SAME restrained pattern the foundation uses for
   `html.dark .kl-chip--success` (kanine-design-system.css ~640). A Blazor scoped sheet reaches an `html.dark` ANCESTOR
   by writing the ancestor BARE (`html.dark .scoped .scoped`): the rewriter scopes the trailing compounds with the
   page `[b-hash]` and leaves `html.dark` un-scoped, which is exactly what's wanted (proven by ReportBuilder.razor.css
   ~196 / TenantSettingsRetention.razor.css ~82). NOTE — do NOT use `:global(html.dark)` here: Blazor emits the literal
   `:global(...)` token into the served bundle UNCHANGED, and a browser cannot parse `:global()` (it is a CSS-Modules
   construct, not a web standard), so the WHOLE rule is dropped and the dark remap silently never applies (the live
   DarkSurfaceAndBadgeAuditTests canvas-readback badge tooth caught this: the pill rendered the bright pre-fix
   #1E9E6A at 4.22:1). The token-only base above was necessary but not sufficient because --k-success itself does not
   re-point per mode. The pill stays a compact leaf; only the row hooks the selector (the design-system row-tint is
   chip-leaf-scoped so the `<tr>` never paints). */
html.dark .kl-lookups-row[data-status="active"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: #9ce6c1;
    background: color-mix(in srgb, var(--k-success) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 55%, var(--k-surface));
}
html.dark .kl-lookups-row[data-status="proposed"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: #f4c884;
    background: color-mix(in srgb, var(--k-caution) 32%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 55%, var(--k-surface));
}
html.dark .kl-lookups-row[data-status="merged"] .kl-lookups-status-pill[b-q97smm9doy] {
    color: var(--k-text-muted);
    background: color-mix(in srgb, var(--k-text-muted) 22%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-text-muted) 45%, var(--k-surface));
}
/* A merged row is a terminal logical-redirect — dim it so it reads as superseded. */
.kl-lookups-row[data-status="merged"][b-q97smm9doy] {
    opacity: .6;
}

/* Row actions: quiet by default, intent colour on hover. */
.kl-lookups-approve[b-q97smm9doy],
.kl-lookups-merge[b-q97smm9doy],
.kl-lookups-reject[b-q97smm9doy],
.kl-lookups-fix[b-q97smm9doy],
.kl-lookups-edit[b-q97smm9doy] {
    min-block-size: var(--k-touch); /* UI-GUAR-036: ≥44 touch target */
    padding: 0 var(--k-space-3);
    margin-inline-start: var(--k-space-2);
    font-size: 13px;
    color: var(--k-text);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-lookups-approve:hover[b-q97smm9doy] {
    color: var(--k-success);
    border-color: color-mix(in srgb, var(--k-success) 45%, var(--k-surface));
    background: color-mix(in srgb, var(--k-success) 10%, var(--k-surface));
}
.kl-lookups-merge:hover[b-q97smm9doy],
.kl-lookups-edit:hover[b-q97smm9doy] {
    color: var(--k-accent);
    border-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-surface));
}
/* Reject + fix-conflict are corrective intents — surface the critical channel on hover. */
.kl-lookups-reject:hover[b-q97smm9doy],
.kl-lookups-fix:hover[b-q97smm9doy] {
    color: var(--k-critical);
    border-color: color-mix(in srgb, var(--k-critical) 45%, var(--k-surface));
    background: color-mix(in srgb, var(--k-critical) 8%, var(--k-surface));
}


/* ---- Merge overlay + Add dialog: centered, top-layer-feeling modals. ---------- */
/* UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim + centering. The .kl-lookups-overlay-body below keeps the card styling. */
.kl-lookups-overlay-body[b-q97smm9doy] {
    inline-size: calc(100% - 2rem);
    max-inline-size: 34rem;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-6);
    background: var(--k-surface);
    color: var(--k-text);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
}
.kl-lookups-overlay-b[b-q97smm9doy],
.kl-lookups-overlay-a[b-q97smm9doy] {
    margin: 0;
    font-size: 14px;
}
.kl-lookups-overlay-b span[data-testid$="-code"][b-q97smm9doy],
.kl-lookups-overlay-a span[data-testid$="-code"][b-q97smm9doy] {
    color: var(--k-accent);
    font-family: var(--k-font-mono, ui-monospace, monospace);
}
.kl-lookups-overlay-execute[b-q97smm9doy] {
    margin-block-start: var(--k-space-2);
}

/* The Add dialog uses the foundation .kl-dialog box styling (surface/radius/shadow). */
/* UI-GUAR-033: overlay positioning retired — <KlOverlay> now supplies the fixed scrim + centering; the panel keeps only its card/box styling. */
.kl-lookups-add-form[b-q97smm9doy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-4) var(--k-space-6) var(--k-space-6);
}
.kl-lookups-add-dismiss[b-q97smm9doy] {
    flex-direction: row;
    align-items: center;
    gap: var(--k-space-2);
}
.kl-lookups-add-dismiss input[type="checkbox"][b-q97smm9doy] {
    inline-size: 18px;
    min-inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--k-teal-700);
    cursor: pointer;
}

/* ---- Column-visibility menu (button.action[5] → menu-lookup-columns). --------- */
.kl-lookups-columns-wrap[b-q97smm9doy] {
    position: relative;
    display: inline-flex;
}
.kl-lookups-columns[aria-expanded="true"][b-q97smm9doy] {
    color: var(--k-accent);
    border-color: color-mix(in srgb, var(--k-accent) 40%, var(--k-surface));
}
.kl-lookups-columns-menu[b-q97smm9doy] {
    position: absolute;
    inset-block-start: calc(100% + var(--k-space-1));
    inset-inline-end: 0;
    z-index: 50;
    min-inline-size: 12rem;
    padding: var(--k-space-1);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-elev-3);
}
.kl-lookups-columns-item[b-q97smm9doy] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    inline-size: 100%;
    min-block-size: var(--k-touch); /* UI-GUAR-036: ≥44 touch target */
    padding: 0 var(--k-space-3);
    border-radius: var(--k-radius-sm);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}
.kl-lookups-columns-item:hover[b-q97smm9doy] {
    background: var(--k-surface-2);
}
.kl-lookups-columns-item input[type="checkbox"][b-q97smm9doy] {
    inline-size: 18px;
    min-inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--k-teal-700, var(--k-accent));
    cursor: pointer;
}

/* ---- Edit (rename) + Reject dialogs: centered modals over the curation surface. - */
/* UI-GUAR-033: overlay positioning retired — <KlOverlay> now supplies the fixed scrim + centering; the panels keep only their card/box styling (foundation .kl-dialog). */
.kl-lookups-edit-form[b-q97smm9doy],
.kl-lookups-reject-form[b-q97smm9doy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-4) var(--k-space-6) var(--k-space-6);
}
.kl-dialog-body[b-q97smm9doy] {
    margin: 0;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.5;
}
.kl-lookups-reject-reason[b-q97smm9doy] {
    min-block-size: 4.5rem;
    resize: vertical;
    font-family: inherit;
    line-height: 1.5;
}
/* The danger-led Reject confirm uses the foundation .kl-btn--danger; nothing to add. */

/* ---- Crafted calm motion: the curation dialogs rise in gently (no bounce/gimmick),
   honouring prefers-reduced-motion (the foundation also disables transitions there). */
@keyframes kl-lookups-rise-b-q97smm9doy {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.kl-motion-rise[b-q97smm9doy] {
    animation: kl-lookups-rise-b-q97smm9doy var(--k-dur-2, 180ms) var(--k-ease, ease) both;
}
@media (prefers-reduced-motion: reduce) {
    .kl-motion-rise[b-q97smm9doy] {
        animation: none;
    }
}

/* ---- Empty / placeholder state: a composed, titled card (icon + headline + context),
   NOT a sparse one-liner. The surface matches the values table so the workspace keeps
   the same calm presence whether populated or empty; every channel is token-driven so
   it flips correctly across light / dark / outdoor. ----------------------------------- */
.kl-lookups-empty[b-q97smm9doy] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-2);
    min-block-size: 16rem;
    padding: var(--k-space-12) var(--k-space-6);
    text-align: center;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
.kl-lookups-empty-icon[b-q97smm9doy] {
    margin-block-end: var(--k-space-2);
    color: color-mix(in srgb, var(--k-accent) 55%, var(--k-text-muted));
}
.kl-lookups-empty-title[b-q97smm9doy] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 17px;
    font-weight: 700;
    color: var(--k-text);
}
.kl-lookups-empty-message[b-q97smm9doy] {
    margin: 0;
    max-inline-size: 42ch;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* UI-GUAR-024 / R2-13 — the taxonomy-integrity alert. A restrained caution banner (NOT a loud
   full-saturation block): caution text on a desaturated surface-mix fill that reads in all 3 modes
   (the --k-caution + --k-surface mix re-points per mode like every other channel here — no html.dark
   selector). Sits above the workspace header so an admin sees the actionable orphan list first. */
.kl-lookups-integrity[b-q97smm9doy] {
    margin: 0 0 var(--k-space-4);
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid color-mix(in srgb, var(--k-caution) 42%, var(--k-surface));
    /* --k-radius-md (8px) — the former --k-radius never existed; its 10px fallback was the live value. */
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-caution) 12%, var(--k-surface));
    color: var(--k-text);
}
.kl-lookups-integrity-title[b-q97smm9doy] {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--k-text);
}
.kl-lookups-integrity-list[b-q97smm9doy] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.kl-lookups-integrity-item[b-q97smm9doy] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 8px;
    border: 1px solid color-mix(in srgb, var(--k-caution) 34%, var(--k-surface-2, var(--k-surface)));
    border-radius: 999px;
    background: var(--k-surface-2, var(--k-surface));
    font-size: 13px;
}
.kl-lookups-integrity-name[b-q97smm9doy] {
    font-weight: 600;
    color: var(--k-text);
}
.kl-lookups-integrity-code[b-q97smm9doy] {
    font-size: 12px;
    color: var(--k-text-muted);
}

/* ---- RECORD-TAXONOMY scope inputs (the scoped-type add) + the per-row scope chips. ---- */
.kl-lookups-add-scope[b-q97smm9doy] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    margin: 0;
    padding: var(--k-space-3);
    border: 1px solid var(--k-border);
    /* --k-radius-md — the former --k-radius-2 never existed; the 8px fallback was the live value. */
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2, var(--k-surface));
}
.kl-lookups-add-scope > .kf-label[b-q97smm9doy] {
    margin-block-end: var(--k-space-1);
}
.kl-lookups-add-scope-kind[b-q97smm9doy] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    padding-block: 2px;
    cursor: pointer;
}
.kl-lookups-add-scope-kind input[type="checkbox"][b-q97smm9doy] {
    inline-size: 16px;
    min-inline-size: 16px;
    block-size: 16px;
    margin: 0;
    accent-color: var(--k-teal-700);
    cursor: pointer;
}
.kl-lookups-add-scope-kind-code[b-q97smm9doy] {
    margin-inline-start: auto;
    font-size: 12px;
    color: var(--k-text-muted);
}
.kl-lookups-add-scope-empty[b-q97smm9doy] {
    margin: 0;
    font-size: 13px;
    color: var(--k-text-muted);
}
.kl-lookups-row-scope[b-q97smm9doy] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--k-space-1);
    margin-inline-start: var(--k-space-2);
    vertical-align: middle;
}
.kl-lookups-row-scope-chip[b-q97smm9doy] {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border: 1px solid var(--k-border);
    border-radius: 999px;
    background: var(--k-surface-2, var(--k-surface));
    font-size: 11px;
    color: var(--k-text-muted);
}

/* Dark / outdoor flip: surface/border/text/accent channels above resolve through the --k-* tokens the foundation
   re-points per mode, so they flip for free. The ONE exception is the status pill TEXT colour, which references the
   fixed semantic --k-success/--k-caution hues (these do NOT re-point per mode) and so needs the explicit
   `html.dark … .kl-lookups-status-pill` remap added above (UI-GUAR-027) to stay restrained + legible in the dark
   field. Write the `html.dark` ancestor BARE (NOT `:global(html.dark)` — Blazor emits `:global()` verbatim into the
   bundle and the browser drops the rule as un-parseable; the rewriter scopes the trailing compounds and leaves a bare
   `html.dark` un-scoped, the working pattern). */

/* Bounded render window footer (owner ruling 2026-07-24): the honest "showing N of M" line plus the explicit
   reveal. Reuses .kl-lookups-export for the button so it inherits that family's var(--k-touch) floor (A6). */
.kl-lookups-window[b-q97smm9doy] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-3);
}
.kl-lookups-window-count[b-q97smm9doy] {
    margin: 0;
    font-size: 13px;
    color: var(--k-text-muted);
}

/* ---- Phone taxonomy picker (owner request 2026-07-24) --------------------------------------------------------
   Hidden by default so DESKTOP AND TABLET ARE UNTOUCHED — the left rail remains the navigation there. It is only
   turned on inside the max-width:640px block above, where it replaces the rail one-for-one. A display:none element
   consumes no flex gap, so the desktop two-pane layout is byte-identical to before. */
.kl-lookups-railpicker[b-q97smm9doy] { display: none; }
.kl-lookups-railpicker-label[b-q97smm9doy] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}
.kl-lookups-railpicker-select[b-q97smm9doy] {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    /* A6: the picker is the page's primary navigation on a phone — it keeps the full touch floor. */
    min-block-size: var(--k-touch);
}

/* The rail → picker SWAP. Deliberately the LAST rule in this file: `@media` contributes no specificity, so this
   must come after `.kl-lookups-railpicker { display: none }` above or the base rule wins and the picker never
   appears (it did exactly that on the first attempt — the element was in the DOM but never visible).
   display:none on the rail rather than visually-hidden: this is a SWAP, not a duplication, so the same navigation
   must not be announced twice. */
@media (max-width: 640px) {
    .kl-lookups-rail[b-q97smm9doy] { display: none; }
    .kl-lookups-railpicker[b-q97smm9doy] {
        display: flex;
        flex-direction: column;
        gap: var(--k-space-2);
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        box-sizing: border-box;
    }
}

/* ── PHONE: Order shares the action row (owner request 2026-07-24: "there is some free vertical space to reclaim
   on the lookups card if you just moved the order label to the same row as the edit button and more actions
   button"). B2 (related things share a row) buying B1 (vertical space). ────────────────────────────────────────
   MEASURED BEFORE: the Order cell owned a whole card row — 80px wide inside a 325px card, i.e. ~245px of dead
   space beside it — costing 36.8px plus a 12px row-gap per card, on 50 cards.

   The shared card system (kanine-design-system.css) gives .kl-tcard-actions `flex-basis: 100%`, which is what puts
   it on its own line; the row's buttons are trailing-aligned, so the EMPTY part of that line is its leading edge —
   exactly where a small metadata field belongs. Overriding that one basis page-scoped is a DELIBERATE per-page
   delta (A1), not a second copy of shared styling: no shared declaration is duplicated here, and the card system
   keeps owning the card. Specificity is 0,4,0 (.kl-shell-main + .kl-lookups-table + the class + Blazor's scope
   attribute) against the shared rule's 0,3,0, so this wins on merit rather than on load order.

   MOBILE ONLY (owner, same message: "I would say to do it only on mobile"). Desktop and landscape tablet render a
   TABLE, not cards, and keep Order as its own column — nothing outside this media block is touched. */
@media (max-width: 640px) {
    /* Share the line instead of claiming all of it. flex-wrap inside the actions cell still lets four actions
       (Approve / Merge / Fix code / Reject on a proposed row) wrap within their own share — self-sizing, no
       reserved width, no magic number. */
    .kl-shell-main .kl-lookups-table .kl-tcard-actions[b-q97smm9doy] {
        flex: 1 1 auto;
    }
    .kl-shell-main .kl-lookups-table .kl-lookups-cell-order[b-q97smm9doy] {
        flex: 0 0 auto;
        /* Stretch + a touch-height line box centres the single line against the ≥44px controls beside it, and
           lets this cell carry the same footer rule as the actions so the divider spans the whole row rather
           than starting mid-way across it. */
        align-self: stretch;
        line-height: var(--k-touch);
        margin-block-start: var(--k-space-1);
        padding-block-start: var(--k-space-2);
        border-block-start: 1px solid color-mix(in srgb, var(--k-border) 55%, transparent);
    }
    /* The shared system renders every data cell's label as a BLOCK caption above the value; on this row that would
       stack to two lines and give back the space we just reclaimed. Inline keeps it one line and still LABELLED —
       Order is a value admins read and sort by, so it never becomes a bare number. */
    .kl-shell-main .kl-lookups-table .kl-lookups-cell-order[data-label][b-q97smm9doy]::before {
        display: inline;
        margin-inline-end: var(--k-space-2);
    }
}
/* _content/Kanine.Web/Components/Pages/MyReports.razor.rz.scp.css */
/* Phase G WP-G3 — the reporter's "My reports" view (ruling R2). Reporter-grade chrome: card list (no dense
   data table), plain-language stage chips keyed to FeedbackReporterStage keys, an attention rail for the
   confirm-fix / needs-input items, and the detail drawer with the confirmation block front and center.
   Scoped CSS gives this page its own b-scope (regenerate kanine-scope-map.json on composition change). */

.kl-myreports-lede[b-bfksqbxa30] {
    margin: 0 0 1.25rem;
    color: var(--k-text-muted);
    max-width: 60ch;
}

/* --- attention rail ---------------------------------------------------------------------------------- */

.kl-myreports-attention[b-bfksqbxa30] {
    margin-bottom: 1.5rem;
}

.kl-myreports-attention h2[b-bfksqbxa30] {
    font-size: 0.95rem;
    margin: 0 0 0.5rem;
}

.kl-myreports-attention-card[b-bfksqbxa30] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 1rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--k-accent, #2f6feb);
    border-left-width: 4px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 7%, transparent);
    cursor: pointer;
    font: inherit;
    color: var(--k-text);
}

.kl-myreports-attention-card:hover[b-bfksqbxa30] {
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 13%, transparent);
}

.kl-myreports-attention-text[b-bfksqbxa30] {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-myreports-attention-cta[b-bfksqbxa30] {
    font-weight: 600;
    color: var(--k-accent, #2f6feb);
    white-space: nowrap;
}

/* --- card list --------------------------------------------------------------------------------------- */

.kl-myreports-list[b-bfksqbxa30] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.6rem;
}

.kl-myreports-card[b-bfksqbxa30] {
    display: block;
    width: 100%;
    text-align: left;
    padding: 0.85rem 1rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface, transparent);
    cursor: pointer;
    font: inherit;
    color: var(--k-text);
    transition: border-color 120ms ease, box-shadow 120ms ease;
}

.kl-myreports-card:hover[b-bfksqbxa30] {
    border-color: var(--k-accent, #2f6feb);
    box-shadow: 0 1px 6px rgb(0 0 0 / 8%);
}

/* §A10: the card's title line. `display`/`align-items`/`gap` are the shared `.kl-cardline` primitive's now
   (kanine-design-system.css §8b-n) — what stays here is only this card's own spacing below the line.
   `justify-content: space-between` is GONE on purpose: it pushed the two items to opposite ends, which read fine
   for a chip + a timestamp and is wrong the moment a growing title is the first item — the title's own flex-grow
   is what fills the gap now, and leaving both in place would double-space the row. */
.kl-myreports-card-top[b-bfksqbxa30] {
    margin-bottom: 0.35rem;
}

.kl-myreports-when[b-bfksqbxa30] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
    white-space: nowrap;
}

/* The two-line clamp is deliberate and SURVIVES becoming the title: §8b-n does not ellipsize an off-table title
   precisely so a clamp like this keeps working. The trailing margin went with the row it used to separate. */
.kl-myreports-snippet[b-bfksqbxa30] {
    margin: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.kl-myreports-card-meta[b-bfksqbxa30] {
    display: flex;
    gap: 0.35rem;
    flex-wrap: wrap;
}

/* --- stage chips (keys from FeedbackReporterStage — never raw statuses) -------------------------------- */

.kl-myreports-stage[b-bfksqbxa30] {
    font-weight: 600;
}

.kl-myreports-stage--received[b-bfksqbxa30] {
    background: color-mix(in srgb, var(--k-text-muted) 15%, transparent);
}

.kl-myreports-stage--in-review[b-bfksqbxa30] {
    background: color-mix(in srgb, #8250df 16%, transparent);
    color: #8250df;
}

.kl-myreports-stage--needs-input[b-bfksqbxa30],
.kl-myreports-stage--confirm-fix[b-bfksqbxa30] {
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 16%, transparent);
    color: var(--k-accent, #2f6feb);
}

.kl-myreports-stage--fix-in-progress[b-bfksqbxa30] {
    background: color-mix(in srgb, #bf8700 18%, transparent);
    color: #9a6700;
}

.kl-myreports-stage--closed[b-bfksqbxa30] {
    background: color-mix(in srgb, #1a7f37 16%, transparent);
    color: #1a7f37;
}

html.dark .kl-myreports-stage--fix-in-progress[b-bfksqbxa30] {
    color: #d4a72c;
}

html.dark .kl-myreports-stage--closed[b-bfksqbxa30] {
    color: #3fb950;
}

html.dark .kl-myreports-stage--in-review[b-bfksqbxa30] {
    color: #a371f7;
}

.kl-myreports-sev-high[b-bfksqbxa30] {
    background: color-mix(in srgb, #cf222e 15%, transparent);
    color: #cf222e;
}

html.dark .kl-myreports-sev-high[b-bfksqbxa30] {
    color: #f85149;
}

.kl-myreports-note-chip[b-bfksqbxa30] {
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 14%, transparent);
    color: var(--k-accent, #2f6feb);
}

/* --- detail drawer ------------------------------------------------------------------------------------ */

.kl-myreports-detail[b-bfksqbxa30] {
    max-inline-size: none;   /* defeat the .kl-dialog 30rem clamp */
    width: min(560px, 92vw);
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.kl-myreports-detail-head[b-bfksqbxa30] {
    margin-bottom: 1rem;
}

.kl-myreports-stage-desc[b-bfksqbxa30] {
    margin: 0.4rem 0 0;
    color: var(--k-text-muted);
}

.kl-myreports-detail h3[b-bfksqbxa30] {
    font-size: 0.95rem;
    margin: 0 0 0.4rem;
}

.kl-myreports-detail section[b-bfksqbxa30] {
    margin-bottom: 1.15rem;
}

.kl-myreports-confirm-block[b-bfksqbxa30] {
    padding: 0.9rem 1rem;
    border: 1px solid var(--k-accent, #2f6feb);
    border-radius: 8px;
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 7%, transparent);
}

.kl-myreports-confirm-block p[b-bfksqbxa30] {
    margin: 0 0 0.6rem;
    color: var(--k-text-muted);
}

.kl-myreports-confirm-actions[b-bfksqbxa30] {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.kl-myreports-reject-label[b-bfksqbxa30] {
    display: block;
    font-weight: 600;
    margin-bottom: 0.3rem;
}

.kl-myreports-required[b-bfksqbxa30] {
    font-weight: 400;
    color: var(--k-text-muted);
    font-size: 0.85rem;
}

.kl-myreports-reject-note[b-bfksqbxa30] {
    width: 100%;
    margin-bottom: 0.6rem;
    resize: vertical;
}

.kl-myreports-verdict[b-bfksqbxa30] {
    margin-bottom: 1rem;
}

.kl-myreports-teamnote[b-bfksqbxa30] {
    padding: 0.75rem 1rem;
    border-left: 3px solid var(--k-accent, #2f6feb);
    border-radius: 4px;
    background: color-mix(in srgb, var(--k-accent, #2f6feb) 6%, transparent);
}

.kl-myreports-teamnote p[b-bfksqbxa30] {
    margin: 0;
    white-space: pre-wrap;
}

.kl-myreports-comment[b-bfksqbxa30] {
    white-space: pre-wrap;
}

.kl-myreports-fieldlabel[b-bfksqbxa30] {
    font-weight: 600;
    margin-right: 0.35rem;
}

.kl-myreports-steps[b-bfksqbxa30] {
    margin: 0.4rem 0 0;
    padding-left: 1.4rem;
}

.kl-myreports-thumbwrap[b-bfksqbxa30] {
    display: inline-block;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    padding: 0.35rem;
    background: none;
    cursor: zoom-in;
    text-align: center;
}

.kl-myreports-thumbwrap:hover[b-bfksqbxa30] {
    border-color: var(--k-accent, #2f6feb);
}

.kl-myreports-thumb[b-bfksqbxa30] {
    display: block;
    max-width: 220px;
    max-height: 150px;
    border-radius: 5px;
}

.kl-myreports-thumb-hint[b-bfksqbxa30] {
    display: block;
    font-size: 0.75rem;
    color: var(--k-text-muted);
    padding-top: 0.25rem;
}

.kl-myreports-timeline ul[b-bfksqbxa30] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0.4rem;
    font-size: 0.9rem;
}

/* --- full-screen screenshot --------------------------------------------------------------------------- */

.kl-myreports-shot-full[b-bfksqbxa30] {
    max-width: 96vw;
    max-height: 94vh;
    overflow: auto;
}

.kl-myreports-shot-full img[b-bfksqbxa30] {
    display: block;
    max-width: 100%;
    max-height: 94vh;
    border-radius: 6px;
}

/* Full-screen detail (owner-directed 2026-07-09) — defeats the design-system 30rem .kl-dialog clamp. */
.kl-myreports-detail-full[b-bfksqbxa30] {
    max-inline-size: none;
    inline-size: min(880px, 96vw);
    max-block-size: 92vh;
    display: flex;
    flex-direction: column;
    padding: 0;
}

.kl-myreports-detail-head-full[b-bfksqbxa30] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1.2rem;
    border-bottom: 1px solid var(--k-border, #e2e6ec);
    flex: 0 0 auto;
}

.kl-myreports-detail-head-main[b-bfksqbxa30] { min-inline-size: 0; }

.kl-myreports-detail-head-actions[b-bfksqbxa30] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.kl-myreports-rescind-confirm-wrap[b-bfksqbxa30] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
}

.kl-myreports-detail-body[b-bfksqbxa30] {
    padding: 1rem 1.2rem 1.4rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Reporter reply round-trip — the NEEDS_INFO answer composer + sent state + history. */
.kl-myreports-reply[b-bfksqbxa30],
.kl-myreports-reply-sent[b-bfksqbxa30] {
    margin: 0.75rem 0 1rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--k-border, #d8dee6);
    border-radius: 8px;
    background: var(--k-surface-2, #f7f9fc);
}

.kl-myreports-reply h3[b-bfksqbxa30],
.kl-myreports-reply-sent h3[b-bfksqbxa30] {
    margin: 0 0 0.35rem;
    font-size: 1rem;
}

.kl-myreports-reply-lede[b-bfksqbxa30] {
    margin: 0 0 0.6rem;
    color: var(--k-text-muted);
    font-size: 0.85rem;
}

.kl-myreports-reply-text[b-bfksqbxa30] {
    inline-size: 100%;
    box-sizing: border-box;
    resize: vertical;
    min-block-size: 5.5rem;
    padding: 0.55rem 0.7rem;
    border: 1px solid var(--k-border, #cfd6df);
    border-radius: 6px;
    font: inherit;
}

.kl-myreports-reply-atts[b-bfksqbxa30] {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.kl-myreports-reply-att[b-bfksqbxa30] {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    border: 1px solid var(--k-border, #cfd6df);
    border-radius: 6px;
    background: var(--k-surface, #fff);
    font-size: 0.8rem;
}

.kl-myreports-reply-thumb[b-bfksqbxa30] {
    inline-size: 2.5rem;
    block-size: 2.5rem;
    object-fit: cover;
    border-radius: 4px;
}

.kl-myreports-reply-att-remove[b-bfksqbxa30] {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
    color: var(--k-text-muted);
}

.kl-myreports-reply-actions[b-bfksqbxa30] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.7rem;
    align-items: center;
}

/* ::deep IS LOAD-BEARING — see the same note in CertificationCreate.razor.css. This
   styles the <input> rendered by <InputFile>, a CHILD COMPONENT, which never carries
   this component's scope attribute; without ::deep the compiled selector
   `.kl-myreports-reply-fileinput[b-xxxxxxxxxx]` matches nothing and the raw native
   "Choose Files / no files selected" control sits visible next to the styled "Attach
   file" label. Found by Req_UIGUAR_ScopedCssChildComponentLeakTests, which was written
   for the certificate-scan instance the owner caught on camera and immediately turned
   up this second one — nobody had reported it, because the failure is silent. */
.kl-myreports-reply-attach[b-bfksqbxa30]  .kl-myreports-reply-fileinput {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    opacity: 0;
    overflow: hidden;
}

.kl-myreports-reply-attach[b-bfksqbxa30] {
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.kl-myreports-reply-history[b-bfksqbxa30] {
    margin: 0.75rem 0;
}

.kl-myreports-reply-past[b-bfksqbxa30] {
    padding: 0.5rem 0.7rem;
    border-inline-start: 3px solid var(--k-accent, #3b6ea5);
    background: var(--k-surface-2, #f7f9fc);
    border-radius: 0 6px 6px 0;
    margin-bottom: 0.5rem;
}

.kl-myreports-reply-past p[b-bfksqbxa30] {
    margin: 0.2rem 0 0;
}
/* _content/Kanine.Web/Components/Pages/OrgUnits.razor.rz.scp.css */
/* =============================================================================
   OrgUnits (org-units.html) — page-scoped R11 refinement (UI-GUAR-011).
   The DATA-013 org-unit registry / tree editor. The shared design system gives
   the page shell (kl-page / kl-section-head), the fields (kf-*), the buttons
   (kl-btn) and the dialog box (kl-dialog); this stylesheet adds ONLY the
   page-specific structure the system does not: the titled header, a composed
   empty-state card, the two-pane (hierarchy rail + detail workspace) split, the
   ARIA tree rendered as a calm, scannable surface with a navy/teal selected
   accent, the detail form rhythm, and the centered create / move overlays.

   Every colour resolves through --k-* tokens so the three modes (light / dark /
   outdoor) flip correctly and the R11 token/canvas gate holds — no raw hex
   (except the modal scrim, matching the signed-off Lookups precedent), no
   gradient, no off-token fill. NOTE (corrected 2026-07-02): scoped CSS CAN
   reach the dark ancestor — write a BARE `html.dark .my-class` rule (it is
   `:global(html.dark)` that ships verbatim and dies; Lookups.razor.css:340 is
   the proven in-repo pattern). This file simply needs no remap because every
   channel is token-driven.
   ========================================================================== */

/* ---- Titled header: the page anchor (title + one-line context) beside the
   primary create action, mirroring the signed-off evidence-vault pagehead. ----- */
.kl-ou-pagehead[b-9kceg8e18j] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-4);
    margin-block-end: var(--k-space-6);
}
.kl-ou-pagehead-text[b-9kceg8e18j] {
    min-inline-size: 0;
}
.kl-ou-pagetitle[b-9kceg8e18j] {
    margin: 0 0 var(--k-space-1);
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--k-text);
}
.kl-ou-pagesub[b-9kceg8e18j] {
    margin: 0;
    max-inline-size: 64ch;
    color: var(--k-text-muted);
    line-height: 1.5;
}
/* Keep the create action from being squeezed when the title wraps. */
.kl-ou-page .kl-head-actions[b-9kceg8e18j] {
    flex: 0 0 auto;
}

/* ---- Composed empty state: a token card with an inline org-hierarchy glyph in a
   tinted disc, a headline and one line of guidance — optically centred, the same
   calm presence as the populated surface (NOT a sparse line on a void). ---------- */
.kl-ou-empty[b-9kceg8e18j] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--k-space-3);
    min-block-size: 18rem;
    justify-content: center;
    padding: var(--k-space-16) var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
.kl-ou-empty-disc[b-9kceg8e18j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 72px;
    block-size: 72px;
    margin-block-end: var(--k-space-1);
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    color: var(--k-accent);
}
.kl-ou-empty-svg[b-9kceg8e18j] {
    display: block;
}
.kl-ou-empty-title[b-9kceg8e18j] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--k-text);
}
.kl-ou-empty-msg[b-9kceg8e18j] {
    margin: 0;
    max-inline-size: 48ch;
    color: var(--k-text-muted);
    line-height: 1.55;
}

/* ---- Two-pane split: a fixed-width hierarchy rail beside the fluid detail
   workspace (collapses to a stack on narrow viewports). --------------------------- */
.kl-split[b-9kceg8e18j] {
    display: flex;
    align-items: stretch;
    gap: var(--k-space-6);
}
@media (max-width: 900px) {
    .kl-split[b-9kceg8e18j] {
        flex-direction: column;
    }
}

.kl-tree-pane[b-9kceg8e18j] {
    flex: 0 0 20rem;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}
@media (max-width: 900px) {
    .kl-tree-pane[b-9kceg8e18j] {
        flex-basis: auto;
    }
}

.kl-detail-pane[b-9kceg8e18j] {
    flex: 1 1 0;
    min-inline-size: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-block-start: 2px solid color-mix(in srgb, var(--k-accent) 38%, var(--k-border));
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}

/* A quiet, tracked-caps section title for each pane head. */
.kl-section-title[b-9kceg8e18j] {
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--k-text);
}

/* ---- ARIA tree: a calm, scannable list of selectable nodes. ------------------- */
.kl-tree[b-9kceg8e18j] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
}
.kl-tree-node[b-9kceg8e18j] {
    display: flex;
    flex-direction: column;
}

/* A node row — branch (expand/collapse) or leaf (select). Generous touch target,
   resting / hover / selected hierarchy. The whole row is the affordance. */
.kl-tree-row[b-9kceg8e18j] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch);
    padding-inline: var(--k-space-2);
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    cursor: pointer;
    transition: background-color var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-tree-row:hover[b-9kceg8e18j] {
    background: var(--k-surface-2);
}
.kl-tree-row:focus-visible[b-9kceg8e18j] {
    outline: 2px solid var(--k-accent);
    outline-offset: 1px;
}

/* The selected node carries the navy/teal identity: a left accent bar + a tinted
   fill (mirroring the Lookups selected-rail pattern). --k-accent flips per mode. */
.kl-tree-node--selected > .kl-tree-row[b-9kceg8e18j] {
    position: relative;
    color: var(--k-accent);
    background: color-mix(in srgb, var(--k-accent) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 28%, var(--k-surface));
}
.kl-tree-node--selected > .kl-tree-row[b-9kceg8e18j]::before {
    content: "";
    position: absolute;
    inset-block: 9px;
    inset-inline-start: 0;
    inline-size: 3px;
    border-radius: var(--k-radius-full);
    background: var(--k-accent);
}

.kl-tree-twisty[b-9kceg8e18j] {
    flex: 0 0 1.25rem;
    text-align: center;
    color: var(--k-text-muted);
    font-size: 0.85rem;
    user-select: none;
}
.kl-tree-name[b-9kceg8e18j] {
    flex: 1 1 auto;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.95rem;
    color: var(--k-text);
}
.kl-tree-node--selected > .kl-tree-row .kl-tree-name[b-9kceg8e18j] {
    font-weight: 600;
    color: var(--k-accent);
}
/* The short code badge: a quiet mono chip, set apart from the name. */
.kl-tree-badge[b-9kceg8e18j] {
    flex: 0 0 auto;
    padding-block: 2px;
    padding-inline: var(--k-space-2);
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 10px;
    letter-spacing: 0.02em;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border-radius: var(--k-radius-sm);
}
.kl-tree-node--selected > .kl-tree-row .kl-tree-badge[b-9kceg8e18j] {
    color: var(--k-accent);
    background: color-mix(in srgb, var(--k-accent) 16%, var(--k-surface));
}

/* Children indent + a hairline guide rail (the hierarchy cue). */
.kl-tree-children[b-9kceg8e18j] {
    margin-inline-start: var(--k-space-3);
    padding-inline-start: var(--k-space-3);
    border-inline-start: 1px solid color-mix(in srgb, var(--k-border) 70%, transparent);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* ---- Detail workspace: the section head, the field grid + actions. ------------ */
.kl-detail-pane .kl-section-head[b-9kceg8e18j] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
}

.kl-form-grid[b-9kceg8e18j] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-4) var(--k-space-6);
}
@media (max-width: 640px) {
    .kl-form-grid[b-9kceg8e18j] {
        grid-template-columns: minmax(0, 1fr);
    }
}
.kf-field[b-9kceg8e18j] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

/* The read-only Parent Unit value: reads as a filled, non-editable field (it is
   changed via the structural Move op, not inline) — distinct from the inputs. */
.kf-readonly[b-9kceg8e18j] {
    display: flex;
    align-items: center;
    min-block-size: var(--k-touch);
    padding-inline: var(--k-space-3);
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
}

.kl-form-actions[b-9kceg8e18j] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-2);
}

/* Inline detail status / error lines under the actions. */
.kl-detail-pane .kl-error[b-9kceg8e18j],
.kl-detail-pane .kl-muted[b-9kceg8e18j] {
    margin: 0;
    font-size: 0.85rem;
}

/* R11 composed detail-pane empty state (no unit selected) — a centered disc + inline panel glyph + heading +
   guidance, matching the page-level kl-ou-empty caliber, so the right pane never reads as a bare void (skeptic
   R11 bar #5). Fills the pane height and centers, light/dark/outdoor via tokens. */
.kl-detail-empty[b-9kceg8e18j] {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: var(--k-space-3);
    min-block-size: 16rem;
    padding: var(--k-space-8, 2rem) var(--k-space-6);
}
.kl-detail-empty-disc[b-9kceg8e18j] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 64px;
    block-size: 64px;
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    color: var(--k-accent);
}
.kl-detail-empty-title[b-9kceg8e18j] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--k-text);
}
.kl-detail-empty-msg[b-9kceg8e18j] {
    margin: 0;
    max-inline-size: 44ch;
    color: var(--k-text-muted);
    line-height: 1.55;
}

/* ---- Create / Move modal PANELS: the centered card look only. ----------------
   UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim +
   centering. These are <div role="dialog"> panels wrapped by <KlOverlay>, so the
   panel must NOT position itself — it is a plain card the overlay centers. The
   former scrim-free `position:fixed; inset:0` self-overlay (which double-painted
   the modal outside the scrim) is gone; the foundation .kl-dialog (no ::backdrop)
   supplies the base card and this scoped block keeps the local card rhythm. ------ */
.kl-dialog[b-9kceg8e18j] {
    inline-size: calc(100% - 2rem);
    max-inline-size: 32rem;
    block-size: fit-content;
    max-block-size: calc(100% - 2rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-6);
    background: var(--k-surface);
    color: var(--k-text);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
    /* Calm rise-in (no bounce); disabled under reduced-motion below. */
    animation: kl-ou-rise-b-9kceg8e18j var(--k-dur-2, 200ms) var(--k-ease, ease) both;
}
/* Neutralize the foundation's <dialog>-oriented child padding (.kl-dialog > *):
   this container already owns its padding + gap, so the per-child inline padding
   would double up. The fields/notes/actions inside lay out on the flex column. */
.kl-dialog > *[b-9kceg8e18j] {
    padding: 0;
}
.kl-dialog-title[b-9kceg8e18j] {
    margin: 0;
    font-family: var(--k-font-display, system-ui, sans-serif);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--k-text);
}
.kl-dialog-note[b-9kceg8e18j] {
    margin: 0;
    color: var(--k-text-muted);
    font-size: 0.9rem;
    line-height: 1.55;
}
.kl-dialog-actions[b-9kceg8e18j] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-2);
}

@keyframes kl-ou-rise-b-9kceg8e18j {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .kl-dialog[b-9kceg8e18j] {
        animation: none;
    }
}
/* _content/Kanine.Web/Components/Pages/OwnerFeedbackBoard.razor.rz.scp.css */
/* Phase-D WP8 — the operator feedback Kanban. Bare html.dark for dark overrides (the dead-rule trap:
   :global(html.dark) ships verbatim and the browser drops it). */

.kl-fb-board[b-w3fptvnzy6] {
    display: flex;
    gap: 0.75rem;
    align-items: stretch;   /* columns share a common height so the lanes read as one board, not ragged cards */
    overflow-x: auto;
    padding-bottom: 0.75rem;
}

.kl-fb-column[b-w3fptvnzy6] {
    /* Grow to share the full page width (the page is now full-bleed, not capped at 1120px), but keep a sane
       floor so the lanes horizontally scroll instead of crushing when the viewport is genuinely narrow, and a
       ceiling so a handful of columns don't sprawl absurdly wide on an ultra-wide monitor. */
    flex: 1 1 240px;
    min-inline-size: 232px;
    max-inline-size: 360px;
    display: flex;
    flex-direction: column;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 8px;
    padding: 0.5rem;
}

.kl-fb-column-body[b-w3fptvnzy6] {
    /* Fill the stretched column height so short lanes don't leave the column looking half-empty. */
    flex: 1 1 auto;
}

.kl-fb-column-head[b-w3fptvnzy6] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.kl-fb-column-title[b-w3fptvnzy6] {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Per-stage tints: the six lanes read left→right as a pipeline — inbox (info) → work (accent) →
   decision (caution emphasis) → landed (success family). Subtle top borders only, never loud fills. */
.kl-fb-column--new[b-w3fptvnzy6] { border-top: 3px solid color-mix(in srgb, var(--k-info) 55%, var(--k-border)); }
.kl-fb-column--triaged[b-w3fptvnzy6] { border-top: 3px solid color-mix(in srgb, var(--k-accent) 55%, var(--k-border)); }
.kl-fb-column--claude_proposed[b-w3fptvnzy6] { border-top: 3px solid var(--k-caution); }
.kl-fb-column--approved[b-w3fptvnzy6] { border-top: 3px solid color-mix(in srgb, var(--k-success) 45%, var(--k-border)); }
.kl-fb-column--merged[b-w3fptvnzy6] { border-top: 3px solid color-mix(in srgb, var(--k-success) 70%, var(--k-border)); }
.kl-fb-column--resolved[b-w3fptvnzy6] { border-top: 3px solid var(--k-success); }

/* Awaiting-your-decision emphasis: the CLAUDE_PROPOSED lane carries a quiet caution wash + its own header note. */
.kl-fb-column--decision[b-w3fptvnzy6] {
    background: color-mix(in srgb, var(--k-caution) 6%, var(--k-surface-2));
}

.kl-fb-column-note[b-w3fptvnzy6] {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--k-caution);
    white-space: nowrap;
}

.kl-fb-card[b-w3fptvnzy6] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    position: relative;
    font-size: 0.82rem;
}

/* A proposal awaiting the owner's ruling gets a subtle glow so the morning scan lands on it first. */
.kl-fb-card--proposed[b-w3fptvnzy6] {
    border-color: color-mix(in srgb, var(--k-caution) 60%, var(--k-border));
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--k-caution) 35%, transparent),
                0 2px 10px -4px color-mix(in srgb, var(--k-caution) 45%, transparent);
}

/* Age heat on the intake lanes (NEW/TRIAGED): >72h amber, >168h red — pure class-driven left borders. */
.kl-fb-card--stale[b-w3fptvnzy6] {
    border-inline-start: 3px solid var(--k-caution);
}

.kl-fb-card--overdue[b-w3fptvnzy6] {
    border-inline-start: 3px solid var(--k-critical);
}

.kl-fb-card-snippet[b-w3fptvnzy6] {
    margin: 0.15rem 0;
    color: var(--k-text-muted);
    font-size: 0.78rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.kl-fb-similar[b-w3fptvnzy6] {
    cursor: pointer;
    font: inherit;
    font-size: 0.72rem;
    border: 1px solid color-mix(in srgb, var(--k-info) 45%, var(--k-border));
    color: var(--k-info);
    background: color-mix(in srgb, var(--k-info) 8%, var(--k-surface));
}

.kl-fb-similar:hover[b-w3fptvnzy6] {
    background: color-mix(in srgb, var(--k-info) 16%, var(--k-surface));
}

/* NOTE: `.kl-fb-card-line` is used for SEVERAL lines of the card; only the first one also wears `.kl-cardline`
   (§A10's title line). The shared primitive supplies display/align-items/gap there and this rule's own values
   still serve the others, so nothing is duplicated — the shared selector is more specific and wins where it
   applies. `justify-content: space-between` is retained for the non-title lines it was written for; on the title
   line the shared rule's growing title makes it inert rather than wrong. */
.kl-fb-card-line[b-w3fptvnzy6] {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: space-between;
    margin: 0.15rem 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* The route is a single unbroken token, so it CLIPS rather than wrapping — the one place an off-table title
   behaves like a table one, and for the same reason (there is no word boundary to wrap at). */
.kl-fb-card-line.kl-cardline > .kl-tcard-title[b-w3fptvnzy6] {
    overflow: hidden;
    text-overflow: ellipsis;
}

.kl-fb-card-badges[b-w3fptvnzy6] {
    display: flex;
    gap: 0.25rem;
    flex-wrap: wrap;
}

.kl-fb-thumb[b-w3fptvnzy6] {
    width: 100%;
    border-radius: 4px;
    border: 1px solid var(--k-border);
}

.kl-fb-thumb--blocked[b-w3fptvnzy6] {
    padding: 0.5rem;
    font-size: 0.75rem;
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border: 1px dashed var(--k-border);
    border-radius: 4px;
}

.kl-fb-card-purge[b-w3fptvnzy6] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
    margin-top: 0.25rem;
}

.kl-fb-card-actions[b-w3fptvnzy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.35rem;
}

/* The delete affordance: a quiet ghost button until armed, then a red confirm so the destructive click is
   unmistakable. `--k-critical` is the shared danger token (same one -delete buttons use elsewhere). */
.kl-fb-delete-btn[b-w3fptvnzy6] {
    margin-inline-start: auto;   /* push Delete to the trailing edge, away from the Move/Ask cluster */
    color: var(--k-critical);
}

.kl-fb-delete-confirm-wrap[b-w3fptvnzy6] {
    display: inline-flex;
    gap: 0.35rem;
    margin-inline-start: auto;
    align-items: center;
}

.kl-fb-delete-yes[b-w3fptvnzy6] {
    background: var(--k-critical);
    border-color: var(--k-critical);
    color: #fff;
}

.kl-fb-move-menu[b-w3fptvnzy6] {
    position: absolute;
    z-index: 30;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    box-shadow: 0 6px 18px rgb(10 26 43 / 0.18);
    display: flex;
    flex-direction: column;
    min-width: 160px;
}

.kl-fb-move-item[b-w3fptvnzy6] {
    text-align: start;
    padding: 0.4rem 0.6rem;
    background: none;
    border: 0;
    cursor: pointer;
}

.kl-fb-move-item:hover[b-w3fptvnzy6] {
    background: var(--k-surface-2);
}

/* The digest strip — one calm row: big numbers, quiet labels, no dashboard kitsch. */
.kl-fb-digest[b-w3fptvnzy6] {
    display: flex;
    /* P5 (2026-07-24) — second contributor to the layout-viewport expansion: four nowrap items plus
       three 2rem gaps gave this strip a 384px min-content inside a 361px box. Wrapping costs one row
       on a phone and nothing at all above ~384px of room; the row gap is deliberately tighter than
       the column gap so the wrapped state stays compact (B1). */
    flex-wrap: wrap;
    gap: 0.5rem 2rem;
    align-items: baseline;
    padding: 0.6rem 0.9rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface-2);
}

.kl-fb-digest-item[b-w3fptvnzy6] {
    display: flex;
    align-items: baseline;
    gap: 0.45rem;
}

.kl-fb-digest-num[b-w3fptvnzy6] {
    font-size: 1.45rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.kl-fb-digest-label[b-w3fptvnzy6] {
    font-size: 0.75rem;
    color: var(--k-text-muted);
    letter-spacing: 0.02em;
}

.kl-fb-digest-item--decide .kl-fb-digest-num[b-w3fptvnzy6] {
    color: var(--k-caution);
    font-size: 1.7rem;
}

.kl-fb-digest-item--decide .kl-fb-digest-label[b-w3fptvnzy6] {
    color: var(--k-caution);
    font-weight: 600;
}

/* The dispatch-mode comfort strip — calm and legible, never buried. The state copy is the reassurance:
   Manual (the default) reads muted-safe; Auto earns a quiet caution tint so the owner always knows the
   system may act on its own. */
.kl-fb-dispatch[b-w3fptvnzy6] {
    display: flex;
    gap: 0.9rem;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 0.55rem 0.9rem;
    margin-bottom: 0.75rem;
    border: 1px solid var(--k-border);
    border-radius: 8px;
    background: var(--k-surface-2);
}

.kl-fb-dispatch-toggle[b-w3fptvnzy6] {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}

.kl-fb-dispatch-state[b-w3fptvnzy6] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
}

.kl-fb-dispatch-state--auto[b-w3fptvnzy6] {
    color: var(--k-caution);
    font-weight: 600;
}

.kl-fb-dispatch-help[b-w3fptvnzy6] {
    flex-basis: 100%;
    margin: 0;
    font-size: 0.73rem;
    color: var(--k-text-muted);
}

html.dark .kl-fb-dispatch[b-w3fptvnzy6] {
    background: #16222c;
    border-color: #2c3a45;
}

/* P5 (2026-07-24) — this row used to force the LAYOUT VIEWPORT open. It was a nowrap flex whose
   min-content was 615px (the 320px search floor + 3 severity chips + "Show closed" + two 1rem gaps)
   inside a 361px box, so on a 393px phone the browser widened the layout viewport to 631px — and
   every `max-width: 640px` rule on the page was then evaluated against that lie, silently never
   matching. `flex-wrap` + a shrinkable search floor is the fix; the desktop row is unchanged
   (the 20rem basis is the old 320px, and above ~615px of room nothing wraps). */
.kl-fb-toolbar[b-w3fptvnzy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    margin-bottom: 0.75rem;
}

.kl-fb-sevchips[b-w3fptvnzy6] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.kl-fb-search[b-w3fptvnzy6] {
    /* Basis = the old 320px, so the desktop row measures exactly as before; `min-inline-size: 0`
       lifts the flex-item automatic minimum so it can shrink on a phone instead of pushing the
       viewport open. NOT a touch-target change (A6): the input's block size is untouched. */
    flex: 0 1 20rem;
    min-inline-size: 0;
}

.kl-fb-parked[b-w3fptvnzy6] {
    margin-top: 1rem;
}

.kl-fb-parked-group[b-w3fptvnzy6] {
    margin-bottom: 0.5rem;
}

.kl-fb-detail-panel[b-w3fptvnzy6] {
    width: min(640px, 94vw);
    max-height: 100vh;
    overflow-y: auto;
    padding: 1.25rem;
}

.kl-fb-detail-dl[b-w3fptvnzy6] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.2rem 0.75rem;
    font-size: 0.9rem;
}

.kl-fb-tabs[b-w3fptvnzy6] {
    display: flex;
    gap: 0.4rem;
    margin: 0.6rem 0;
}

.kl-fb-dom[b-w3fptvnzy6],
.kl-fb-bundle[b-w3fptvnzy6],
.kl-fb-diff[b-w3fptvnzy6] {
    max-height: 320px;
    overflow: auto;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: 6px;
    padding: 0.5rem;
    font-size: 0.75rem;
    white-space: pre-wrap;
    word-break: break-word;
}

.kl-fb-detail-shot[b-w3fptvnzy6] {
    max-width: 100%;
    border: 1px solid var(--k-border);
    border-radius: 6px;
}

/* Hide the native "Choose file / no file chosen" control. It is rendered by the <InputFile> COMPONENT, so a
   plain scoped rule never reaches it (CSS isolation doesn't stamp the scope onto a child component's output) —
   ::deep crosses that boundary. Clicking the styled label still opens the picker (a <label> wrapping the
   input triggers it even while the input is display:none). */
.kl-fb-import-label[b-w3fptvnzy6]  .kl-fb-import-input {
    display: none;
}

/* The .kfb import control reads as a proper dashed "drop a file here" affordance rather than a bare ghost
   button — an upload glyph, a monospace extension pill, and a calm hover-lift so it invites the (rare) air-gap
   import without competing with the board's primary card work. Content is centered both ways in the box. */
.kl-fb-import-label[b-w3fptvnzy6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 9.5rem;
    min-height: 2.4rem;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--k-text-muted, #64748b);
    background: var(--k-surface-2, #f8fafc);
    border: 1px dashed var(--k-border, #cbd5e1);
    border-radius: 8px;
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease, background .15s ease, transform .1s ease;
}

.kl-fb-import-label:hover[b-w3fptvnzy6] {
    color: var(--k-accent, #0d9488);
    border-color: var(--k-accent, #0d9488);
    background: var(--k-surface, #fff);
    transform: translateY(-1px);
}

.kl-fb-import-label:focus-within[b-w3fptvnzy6] {
    outline: 2px solid var(--k-accent, #0d9488);
    outline-offset: 2px;
}

.kl-fb-import-label .ki[b-w3fptvnzy6] {
    font-size: 1rem;
    line-height: 1;
}

.kl-fb-import-ext[b-w3fptvnzy6] {
    font-family: var(--k-font-mono, ui-monospace, monospace);
    font-size: 0.8rem;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    background: var(--k-surface-3, #eef2f6);
    color: var(--k-text, #334155);
}

html.dark .kl-fb-import-label[b-w3fptvnzy6] {
    color: #94a3b8;
    background: rgba(148, 163, 184, 0.08);
    border-color: #3a4a5e;
}

html.dark .kl-fb-import-label:hover[b-w3fptvnzy6] {
    color: var(--k-accent, #2dd4bf);
    border-color: var(--k-accent, #2dd4bf);
    background: rgba(148, 163, 184, 0.04);
}

html.dark .kl-fb-import-ext[b-w3fptvnzy6] {
    background: rgba(148, 163, 184, 0.16);
    color: #cbd5e1;
}

.kl-fb-reject[b-w3fptvnzy6],
.kl-fb-verify[b-w3fptvnzy6],
.kl-fb-park[b-w3fptvnzy6] {
    display: flex;
    gap: 0.4rem;
    margin-top: 0.4rem;
}

html.dark .kl-fb-column[b-w3fptvnzy6] {
    background: #16222c;
    border-color: #2c3a45;
}

html.dark .kl-fb-column--decision[b-w3fptvnzy6] {
    background: color-mix(in srgb, var(--k-caution) 10%, #16222c);
}

html.dark .kl-fb-digest[b-w3fptvnzy6] {
    background: #16222c;
    border-color: #2c3a45;
}

html.dark .kl-fb-similar[b-w3fptvnzy6] {
    background: color-mix(in srgb, var(--k-info) 14%, #101a22);
}

html.dark .kl-fb-card[b-w3fptvnzy6],
html.dark .kl-fb-move-menu[b-w3fptvnzy6] {
    background: #101a22;
    border-color: #2c3a45;
}

html.dark .kl-fb-dom[b-w3fptvnzy6],
html.dark .kl-fb-bundle[b-w3fptvnzy6],
html.dark .kl-fb-diff[b-w3fptvnzy6],
html.dark .kl-fb-thumb--blocked[b-w3fptvnzy6] {
    background: #16222c;
    border-color: #2c3a45;
}

/* Phase G R5 — the reporter-rejection treatment: the red UNRESOLVED badge + the "what's still wrong" quote on
   HUMAN_REVIEW cards, and a red column accent so an escalated ticket cannot hide at the board's right edge. */
.kl-fb-chip--unresolved[b-w3fptvnzy6] {
    background: color-mix(in srgb, #cf222e 16%, transparent);
    color: #cf222e;
    font-weight: 700;
    letter-spacing: 0.03em;
}

html.dark .kl-fb-chip--unresolved[b-w3fptvnzy6] {
    color: #f85149;
}

/* Runner observability strip (013_runner_heartbeat.sql): a quiet row of who's online + what they're on. */
.kl-fb-runners[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.25rem 0 0.75rem;
    font-size: 0.82rem;
    color: var(--k-text-muted);
}

.kl-fb-runners-label[b-w3fptvnzy6] {
    font-weight: 600;
}

.kl-fb-runner-chip[b-w3fptvnzy6] {
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: color-mix(in srgb, var(--k-text-muted) 12%, transparent);
    white-space: nowrap;
}

.kl-fb-runner-chip--working[b-w3fptvnzy6] {
    background: color-mix(in srgb, #1a7f37 16%, transparent);
    color: #1a7f37;
    font-weight: 600;
}

html.dark .kl-fb-runner-chip--working[b-w3fptvnzy6] {
    color: #3fb950;
}

/* Reconciler needs-attention flag (012_reconcile.sql): an amber, deliberately prominent chip — an ambiguous
   card/task drift the reconciler declined to auto-move, awaiting the operator's (or the board-doctor's) call. */
.kl-fb-chip--attention[b-w3fptvnzy6] {
    background: color-mix(in srgb, #bf8700 20%, transparent);
    color: #9a6700;
    font-weight: 700;
    letter-spacing: 0.02em;
}

html.dark .kl-fb-chip--attention[b-w3fptvnzy6] {
    color: #e3b341;
}

.kl-fb-card-rejection[b-w3fptvnzy6] {
    margin-top: 0.35rem;
    padding: 0.35rem 0.5rem;
    border-left: 3px solid #cf222e;
    border-radius: 4px;
    background: color-mix(in srgb, #cf222e 7%, transparent);
    font-style: italic;
    font-size: 0.85rem;
}

.kl-fb-column--human_review .kl-fb-column-head[b-w3fptvnzy6] {
    border-bottom: 2px solid #cf222e;
}

/* Phase G — the PENDING_CONFIRMATION column reads as a calm waiting state (customer gate, no operator action). */
.kl-fb-column--pending_confirmation .kl-fb-column-title[b-w3fptvnzy6] {
    color: var(--k-text-muted);
}

/* Phase G WP-G5 — the addendum countersign queue (the one operator ceremony, R9). */
.kl-fb-countersign[b-w3fptvnzy6] {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--k-border);
    border-left: 4px solid #bf8700;
    border-radius: 8px;
}

.kl-fb-countersign h2[b-w3fptvnzy6] {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}

.kl-fb-countersign-card[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.5rem 0;
    border-top: 1px solid var(--k-border);
}

.kl-fb-countersign-meta[b-w3fptvnzy6] {
    font-size: 0.85rem;
    color: var(--k-text-muted);
}

.kl-fb-countersign-actions[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
}

/* Phase G WP-G7 — the "Shipped with data" release list. */
.kl-fb-cjis[b-w3fptvnzy6] {
    margin-top: 1.25rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--k-border);
    border-left: 4px solid #8250df;
    border-radius: 8px;
}

.kl-fb-cjis h2[b-w3fptvnzy6] {
    font-size: 1rem;
    margin: 0 0 0.6rem;
}

.kl-fb-cjis-card[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    padding: 0.45rem 0;
    border-top: 1px solid var(--k-border);
}

/* Full-screen ticket view (owner-directed 2026-07-08 — replaces the end drawer). */
.kl-fb-detail-full[b-w3fptvnzy6] {
    /* The design-system .kl-dialog clamps panels to 30rem (max-inline-size) — a full-screen ticket view must
       defeat BOTH axes explicitly or it renders as a centered card. */
    max-inline-size: none;
    inline-size: min(1600px, 97vw);
    width: min(1600px, 97vw);
    height: 95vh;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

.kl-fb-detail-full-head[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid var(--k-border);
    flex: 0 0 auto;
}

.kl-fb-detail-full-title[b-w3fptvnzy6] {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    min-width: 0;
}

.kl-fb-detail-full-meta[b-w3fptvnzy6] {
    font-size: 0.8rem;
    color: var(--k-text-muted);
    white-space: nowrap;
}

.kl-fb-detail-close[b-w3fptvnzy6] {
    white-space: nowrap;
}

.kl-fb-detail-full-body[b-w3fptvnzy6] {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1rem 1.25rem 1.5rem;
}

/* Reporter reply round-trip — the card-face "reporter replied" badge. */
.kl-fb-chip--reply[b-w3fptvnzy6] {
    background: #e4eefb;
    color: var(--k-accent, #26538c);
    font-weight: 600;
}

/* Rescind — the withdrawn-report badge (muted amber, distinct from the red UNRESOLVED). */
.kl-fb-chip--rescinded[b-w3fptvnzy6] {
    background: #f4e4c1;
    color: #8a5a00;
    font-weight: 700;
    letter-spacing: 0.02em;
}

/* Star — the per-person gold outline + the small star chip. */
.kl-fb-card--starred[b-w3fptvnzy6] {
    outline: 2px solid #e3b341;
    outline-offset: -1px;
    box-shadow: 0 0 0 1px #e3b341 inset;
}

.kl-fb-chip--starred[b-w3fptvnzy6] {
    background: #fbf1d3;
    color: #8a6d1f;
    font-weight: 700;
}

/* Drag note-prompt modal (owner-directed 2026-07-12) — a note-required drag collects its reason here. */
.kl-fb-dropnote[b-w3fptvnzy6] {
    max-inline-size: 30rem;
    padding: 1.1rem 1.25rem;
}

.kl-fb-dropnote-text[b-w3fptvnzy6] {
    inline-size: 100%;
    box-sizing: border-box;
    resize: vertical;
    font: inherit;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--k-border, #cfd6df);
    border-radius: 6px;
    margin: 0.5rem 0 0.75rem;
}

.kl-fb-dropnote-actions[b-w3fptvnzy6] {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
}

/* Re-queue escape hatch on a Discovery card's Claude tab. */
.kl-fb-claude-requeue[b-w3fptvnzy6] {
    margin-top: 0.9rem;
    padding-top: 0.75rem;
    border-top: 1px dashed var(--k-border, #d8dee6);
}

/* Move-confirm consequence text (owner-directed 2026-07-12) — benign help vs a real-consequence warning. */
.kl-fb-moveconfirm-consequence[b-w3fptvnzy6] {
    margin: 0.4rem 0 0.6rem;
    padding: 0.5rem 0.65rem;
    border-radius: 6px;
    font-size: 0.88rem;
    background: var(--k-surface-2, #f4f6f9);
    color: var(--k-text, #2a2f36);
    border-inline-start: 3px solid var(--k-border, #cfd6df);
}

.kl-fb-moveconfirm-consequence.is-consequential[b-w3fptvnzy6] {
    background: #fdf3e6;
    color: #7a4a12;
    border-inline-start-color: #d98a2b;
}

@media (prefers-color-scheme: dark) {
    .kl-fb-moveconfirm-consequence.is-consequential[b-w3fptvnzy6] { background: #3a2a14; color: #f0c98a; border-inline-start-color: #d98a2b; }
}
/* _content/Kanine.Web/Components/Pages/RecordReview.razor.rz.scp.css */
/* =============================================================================
   RecordReview (record-view.html) — HOST-CHROME scoped CSS. The read-only document
   body's styling (identity header + status medallion, summary grid, story-index,
   narrative/weather, drill-in, attachments, Involved collections) moved WITH the
   shared component into Kanine.Presentation/Lifecycle/RecordDetailBody.razor.css so
   both heads render it identically. What stays here is the web HOST's chrome only:
   the page eyebrow + the ONE compiled command bar (the shared lifecycle action bar
   composed with the host Edit / Print-Export). Tokens only (--k-*); no off-token
   colour and no generic gradient (those red the central R11 objective teeth).
   ========================================================================== */

/* The page label reads as a quiet eyebrow so the envelope header CARD becomes the
   document cover (the record is the document; this is just the section label).

   It is ALSO the reserved home of the lifecycle refusal message (owner ruling
   2026-07-27 — see the .kl-actionbar-message block below): the row is laid out as a
   flex line with a min-block-size big enough to hold a one-line banner, so the
   message paints BESIDE "RECORD REVIEW" instead of inside the command card. The
   space is reserved permanently and is simply empty until a refusal happens, which
   is what makes it impossible for the message to move anything when it appears. */
.kl-rv-eyebrow[b-z6do6blcp0] {
    font-family: var(--k-font-ui);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
    display: flex;
    align-items: center;
    /* 3rem clears a one-line kl-failure (12+12 padding + 21 line-box + 2 border = 47px). */
    min-block-size: 3rem;
    margin: 0 0 var(--k-space-2);
}

/* ── ONE COMPILED ACTION CLUSTER (owner direction 2026-06-26) ───────────────────────────────────────────────────
   The single cohesive command bar at the top of the screen: the SHARED lifecycle action bar (status badge +
   Complete/Approve/Reject/Reopen + soft-delete, inside RecordReviewSurface) composed with the host-level Edit +
   Print/Export — all on ONE elevated band so status + actions read as a command header above the read-only body.
   Composition is layout + scoped ::deep only (the shared component is NOT restructured; its data-status /
   data-action / kl-badge hooks are untouched). Tokens only (--k-*). */
.kl-rv-commandbar[b-z6do6blcp0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    /* The containing block for the out-of-flow refusal slots (owner ruling 2026-07-27): the message is anchored to
       the CARD, not to the action bar inside it, so it can be lifted clear of the card onto the header row. */
    position: relative;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-3) var(--k-space-6);
    margin-block-end: var(--k-space-4);
}

/* The shared surface contributes the visible status badge + the lifecycle buttons (+ soft-delete) — lay its
   kl-record body out INLINE so it reads as part of the command bar (it is otherwise a bare block). The single
   visible status badge (span.kl-badge[data-status]) the e2e suite asserts is the one this surface renders. */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-record {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2) var(--k-space-3);
    flex: 1 1 auto;
    min-inline-size: 0;
    margin: 0;
}

/* The lifecycle action bar inside the surface: an inline button group within the command bar — drop the
   stand-alone "-actionbar" base treatment (full-width space-between + bottom rule + block padding/margin). */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-actionbar {
    border-block-end: none;
    padding: 0;
    margin: 0;
    gap: var(--k-space-2);
    justify-content: flex-start;
}

/* The reason capture drops to its OWN full-width row inside the command bar (so a reason input is never squeezed
   beside the buttons). The failure banner used to be listed here too — it is no longer in flow at all; see below. */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-reason {
    flex-basis: 100%;
}

/* ── THE REFUSAL MESSAGE, ON THE HEADER ROW (owner ruling 2026-07-27) ───────────────────────────────────────────
   "A valid re-entered step-up credential is required to sign this action." used to render inline inside the
   lifecycle action bar, in flow. It grew the bar's intrinsic width and added a line, so the command row re-wrapped
   and Delete + "Edit record" dropped to a second row — controls moving under the cursor at the moment of refusal.
   The banner now paints on the "RECORD REVIEW" header row above this card, exactly as the ruling suggested.

   HOW THE ROW IS GUARANTEED NOT TO REFLOW — two independent halves, both required:
     1. STRUCTURE (shared): the slot is rendered UNCONDITIONALLY by LifecycleActionBar / RecordDeleteAction, so the
        bar's child list is byte-identical with and without a message. There is no @if to change the DOM.
     2. LAYOUT (here + §5g-1): the slot is absolutely positioned, so it is not a flex item of anything — it cannot
        add a line, cannot widen a shrink-to-fit item, cannot consume a gap. The guarantee is unconditional; it does
        not depend on the message being short enough for a reservation.
   The header row's min-block-size (.kl-rv-eyebrow above) is only about not OVERLAPPING the eyebrow — it is not
   what keeps the buttons still.

   The `position: static` reset is load-bearing: the shared sheet makes .kl-record the default containing block, so
   without this the message would anchor to the surface INSIDE the card and paint over the card's own top edge.
   Scoped ::deep compiles to `.kl-rv-commandbar[b-…] .kl-record` (0,3,0), which outranks the sheet's (0,2,0). */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-record {
    position: static;
}

/* The LIFECYCLE refusal — the one in the sign-and-seal film — takes the header row per the ruling. Its bottom edge
   sits just above the card, so the banner grows UPWARD into the reserved strip: a message that wraps eats header
   whitespace rather than pushing the card down. Right-aligned so it never collides with the "RECORD REVIEW" label. */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-actionbar-message {
    inset-block-end: calc(100% + var(--k-space-2));
    inset-inline: auto 0;
}

/* The soft-DELETE refusal goes directly BELOW the card rather than sharing the header strip. Two absolutely
   positioned boxes cannot stack themselves, and these two are independent states — a refused Complete and a refused
   Delete can both be showing (neither clears the other) — so parking both in one strip would let one alert cover
   the other, which is exactly the "do not weaken the message" failure. Below the card the two can never collide,
   and it puts the message immediately under the Delete control that produced it. */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-deleteaction-message {
    inset-block: calc(100% + var(--k-space-2)) auto;
    inset-inline: 0;
    inline-size: auto;
}

@media (max-width: 640px) {
    /* Phone: the card is too narrow for the lifecycle message to sit BESIDE the eyebrow, so it takes the full width
       above the card and the reservation is given back. At this width a refusal wraps to ~2 lines and therefore
       overlays the eyebrow label rather than reserving room for it — a transient alert briefly covering a static
       section label is a better trade than 4-plus rem of permanent dead space above every record on a phone. It is
       still out of flow, so the command row is exactly as immovable here as it is at desktop. */
    .kl-rv-eyebrow[b-z6do6blcp0] {
        min-block-size: 0;
        margin-block-end: var(--k-space-4);
    }

    .kl-rv-commandbar[b-z6do6blcp0]  .kl-actionbar-message {
        inset-inline: 0;
        inline-size: auto;
        max-inline-size: none;
    }

    .kl-rv-commandbar[b-z6do6blcp0]  .kl-deleteaction-message {
        max-inline-size: none;
    }
}

/* The record-type meta echo ("DEPLOYMENT") the shared surface renders is REDUNDANT here — the identity header
   already shows the human record-type label (the kl-chip "Deployment"). Hide the raw-code echo (the data-field
   hook stays in the DOM for the REL-012 parity assertions, which render the component in isolation; this is
   presentation-only on this page, not a structural change to the shared component). */
.kl-rv-commandbar[b-z6do6blcp0]  .kl-record-meta {
    display: none;
}

/* The host-level cluster (Edit / read-only note + Print) sits at the FAR end of the command bar. */
.kl-rv-commandbar-host[b-z6do6blcp0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
    margin-inline-start: auto;
}

/* Dark: keep the command bar's elevation/border legible on the dark canvas (the foundation flips the tokens). */
html.dark .kl-rv-commandbar[b-z6do6blcp0] {
    box-shadow: var(--k-elev-1);
    border-color: var(--k-border);
}

.kl-rv-edit[b-z6do6blcp0] {
    /* primary colour + sizing come from the foundation kl-btn--primary; this only keeps the glyph/text aligned */
    display: inline-flex;
    align-items: center;
}

.kl-rv-readonly-note[b-z6do6blcp0] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    margin: 0;
    font-size: 14px;
    color: var(--k-text-muted);
}

/* The Print / Export control (a kl-btn--secondary) reads as part of the host command cluster — an inline button
   beside the Edit / read-only note within the one command bar, so it carries no stand-alone block margin. */
.kl-print-export[b-z6do6blcp0] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}

/* ── NARROW-WIDTH "More actions" OVERFLOW (owner request, live review 2026-07-23) ───────────────────────────────
   Edit record / Print-Export / Build court packet collapse into ONE disclosure at <=640px (the design system's
   phone breakpoint — see kanine-design-system.css / the *.razor.css "mobile sweep" rules) so the command card
   stays a SINGLE row tall on a phone; Complete/Delete (the shared RecordReviewSurface) are never touched — they
   stay directly visible at every width. A plain <div> pair (RecordReview.razor's _moreOpen Blazor state — NOT the
   shell account menu's native <details>: a real Chromium <details>/summary uses an internal ::details-content box
   for its collapse/expand animation that a plain `display:contents` override on the panel could NOT fully
   neutralize — the flex container collapsed to a 0x0 box even though its (correctly `display:inline-flex`)
   grandchildren measured a real size, so the buttons were computed-visible but never actually laid out. A plain
   div has no such native collapse machinery, so display:contents dissolves it cleanly.) AT DESKTOP (the default,
   no media query below) the trigger is hidden and the panel DISSOLVES via display:contents regardless of
   _moreOpen, so the SAME Edit/Print-Export/packet buttons render as plain flex items of .kl-rv-commandbar-host —
   byte-identical to the pre-existing desktop layout. The trigger + dropdown chrome only actually paints <=640px,
   where the panel defaults to display:none and only shows (as an absolutely-positioned dropdown) while .is-open
   (the _moreOpen-driven class) is present. */
.kl-rv-more[b-z6do6blcp0] {
    display: contents;
}

.kl-rv-more-trigger[b-z6do6blcp0] {
    display: none;
}

.kl-rv-more-panel[b-z6do6blcp0] {
    display: contents;
}

@media (max-width: 640px) {
    .kl-rv-more[b-z6do6blcp0] {
        display: inline-block;
        position: relative;
    }

    /* ICON-ONLY at narrow widths (the RowContextMenu kebab precedent — .kl-rowmenu-kebab): a full "More actions"
       text label alongside Complete/Delete does not fit a phone-width row, which just re-creates the two-row
       problem one level down. The accessible name survives via aria-label/title (visible text is not required for
       a real <button>'s name); the visible glyph is the SAME ki-ms-more-vert kebab RowContextMenu already uses. */
    .kl-rv-more-trigger[b-z6do6blcp0] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-block-size: var(--k-touch, 44px);
        min-inline-size: var(--k-touch, 44px);
        padding: 0;
        gap: 0;
    }

    .kl-rv-more-trigger .kl-rv-more-label[b-z6do6blcp0] {
        /* visually hidden, not display:none: keeps the string in the accessibility tree/DOM text content as a
           second, redundant name source alongside aria-label, rather than deleting it outright. */
        position: absolute;
        inline-size: 1px;
        block-size: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .kl-rv-more-panel[b-z6do6blcp0] {
        display: none;
        position: absolute;
        inset-block-start: calc(100% + var(--k-space-1));
        inset-inline-end: 0;
        z-index: 50;
        flex-direction: column;
        gap: var(--k-space-2);
        min-inline-size: 12rem;
        max-inline-size: min(20rem, calc(100vw - var(--k-space-4)));
        background: var(--k-surface);
        color: var(--k-ink-900, #10233d);
        border: 1px solid var(--k-border);
        border-radius: var(--k-radius-md);
        box-shadow: 0 8px 24px rgb(0 0 0 / .18);
        padding: var(--k-space-2);
    }

    .kl-rv-more-panel.is-open[b-z6do6blcp0] {
        display: flex;
    }

    /* Inside the open panel the relocated buttons stack full-width as menu rows rather than an inline cluster. */
    .kl-rv-more-panel.is-open .kl-btn[b-z6do6blcp0] {
        inline-size: 100%;
        justify-content: flex-start;
    }
}

/* Dark: the panel's own surface/border/shadow tokens already flip with the foundation; nothing extra needed here
   beyond the same elevation the account-menu panel keeps legible on the dark canvas. */
html.dark .kl-rv-more-panel.is-open[b-z6do6blcp0] {
    box-shadow: var(--k-elev-2, 0 8px 24px rgb(0 0 0 / .4));
}
/* _content/Kanine.Web/Components/Pages/ReliabilityDashboard.razor.rz.scp.css */
/* =============================================================================
   ReliabilityDashboard — R11 page-scoped refinement (UI-GUAR-011, restrained-premium)
   -----------------------------------------------------------------------------
   The ONE reliability surface (2026-07-19 merge of AgencyDashboard into this
   page): a scope/filter bar + "More filters" off-canvas drawer, and a body that
   switches on grain — the unit-wide rollup tiles + sortable per-K9 table at "All
   units", the subject hero + that unit's tiles at single-K9. The metric-tile card
   skin itself now lives ONCE in MetricTileGrid.razor.css (it was duplicated here
   and in AgencyDashboard.razor.css); this sheet keeps only what the page frame
   needs. Consumes the foundation vocabulary (kl-page measure, kl-section-head/
   -count/-title, kf-field/-label/-select/-input, kl-btn, kl-chip variants). No
   off-token colour, no gradient, no body-bg change — light/dark/outdoor ride the
   foundation's flipping --k-* channels.
   ========================================================================== */

.kl-sr-only[b-218m7accqd] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* The committed-scope test-observability hooks stay in the DOM (tests read their data-* via
   GetAttribute) but must never occupy layout — as empty flex children of .kl-page they would
   otherwise inject phantom row-gaps into the section rhythm. display:none removes them from flow
   without affecting attribute reads. */
.kl-rel-committed[b-218m7accqd] { display: none; }

/* Eyebrow next to the page H1 (the RPT-009 provenance line; its text follows the current grain). */
.kl-rel-eyebrow[b-218m7accqd] {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
    letter-spacing: .01em;
    align-self: center;
}

/* ---- Filter bar ----------------------------------------------------------- */
.kl-rel-bar[b-218m7accqd] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}
.kl-rel-bar-row[b-218m7accqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--k-space-3);
}
.kl-rel-field[b-218m7accqd] {
    margin-block-end: 0;
    min-inline-size: 10rem;
    flex: 1 1 10rem;
}
/* The GRAIN control earns more width than a peer filter — it carries "call-name — handler" labels
   and it is the one control that changes what the page IS. */
.kl-rel-field--scope[b-218m7accqd] {
    flex: 1 1 16rem;
    min-inline-size: 14rem;
}
.kl-rel-k9[b-218m7accqd] { max-inline-size: 22rem; }
.kl-rel-field--date[b-218m7accqd] {
    flex: 0 1 9rem;
    min-inline-size: 9rem;
}
/* A secondary scope control stays visually SMALL and out of the way (owner §3) — the pill hugs its
   label instead of stretching across the leftover row width. */
.kl-rel-field--toggle[b-218m7accqd] {
    flex: 0 1 auto;
}
.kl-rel-field--toggle .kl-rel-completed[b-218m7accqd] { inline-size: fit-content; }
.kl-rel-more[b-218m7accqd] {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}
.kl-rel-badge[b-218m7accqd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: 20px;
    block-size: 20px;
    padding: 0 6px;
    border-radius: var(--k-radius-full);
    background: var(--k-teal-500);
    color: var(--k-ink-900, #08121d);
    font-size: 11px;
    font-weight: 700;
}

/* ---- Approved-only switch (the foundation role="switch" track + a real teal fill when checked) -- */
.kl-rel-completed[b-218m7accqd] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch);
    padding: 0 var(--k-space-3);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-full);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}
.kl-rel-completed:hover[b-218m7accqd] { background: var(--k-surface-3); }
/* the actual checkbox is a small accent box; teal accent-color keeps it on-brand in all modes */
.kl-rel-completed-input[b-218m7accqd] {
    inline-size: 18px;
    block-size: 18px;
    min-block-size: 0;
    margin: 0;
    accent-color: var(--k-teal-500);
    cursor: pointer;
}
.kl-rel-completed-text[b-218m7accqd] { font-weight: 600; }
/* checked → the whole pill lights teal-tinted with a teal edge, driven by the native checkbox. */
.kl-rel-completed:has(.kl-rel-completed-input:checked)[b-218m7accqd] {
    background: color-mix(in srgb, var(--k-teal-500) 18%, var(--k-surface));
    border-color: var(--k-teal-700);
}

/* Active-scope chips row + clear-all */
.kl-rel-chips[b-218m7accqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
    padding-block-start: var(--k-space-2);
    border-block-start: 1px solid var(--k-border);
}
.kl-rel-chips-label[b-218m7accqd] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}
.kl-rel-clear-all[b-218m7accqd] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--k-critical);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: var(--k-radius-sm);
}
.kl-rel-clear-all:hover[b-218m7accqd] { text-decoration: underline; }

/* The bar footer (the full-report link), pushed below the controls. */
/* `.kl-rel-bar-foot` is RETIRED (owner ruling 2026-07-25 — no single control alone on a band). It was a full-width
   strip whose sole occupant was the full-report link: 12px of pad, a hairline and a 190px control across a 1145px
   card. The link moved to the page header row (`.kl-section-head` > `.kl-head-actions`), where it is page-level
   navigation among page-level chrome rather than a filter that is not a filter. The rule is deleted with its
   markup — a dead selector left behind is the next author's false lead. */
.kl-rel-report-link[b-218m7accqd] { min-inline-size: auto; }

/* ---- Subject hero (single-K9 grain) --------------------------------------
   kl-rel-panel inherits the foundation card treatment ([class$="-panel"]); we add
   the internal rhythm: the subject-K9 identity on the left, the return-to-unit
   affordance on the right. */
.kl-rel-panel[b-218m7accqd] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--k-space-3) var(--k-space-6);
}
.kl-rel-subject[b-218m7accqd] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}
.kl-rel-subject-eyebrow[b-218m7accqd] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}
/* The scoped unit's call-name = the panel headline (R11 #1: a human name, never a GUID). */
.kl-rel-subject-name[b-218m7accqd] {
    font-family: var(--k-font-display);
    font-size: clamp(20px, 2vw, 26px);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--k-text);
}
.kl-rel-subject-handler[b-218m7accqd] {
    font-size: 14px;
    color: var(--k-text-muted);
}

/* The data-region loading state (only the data waits; the filter bar is already live). */
.kl-rel-loading[b-218m7accqd] { padding: var(--k-space-6) 0; }
.kl-rel-loading-message[b-218m7accqd] { margin: 0; font-size: 14px; color: var(--k-text-muted); }

/* ---- Sortable per-K9 table (the documented 2D-scroll exception) ------------ */
.kl-rel-table-wrap[b-218m7accqd] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    /* Card padding: 16px block / 24px inline (--k-space-4 / --k-space-6, both on the foundation
       scale — kanine-design-system.css §1), giving the wide 2D-scroll table real breathing room. */
    padding: var(--k-space-4) var(--k-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}
.kl-rel-table-scroll[b-218m7accqd] {
    overflow-x: auto;
}
.kl-rel-table[b-218m7accqd] {
    inline-size: 100%;
    border-collapse: collapse;
    /* Metric VALUES stay on one line — a percentage broken across two lines stops being one number.
       (The `min-inline-size: 64rem` that used to sit here was removed 2026-07-24: see .kl-rel-th below.) */
    white-space: nowrap;
}
.kl-rel-th[b-218m7accqd] {
    position: sticky;
    inset-block-start: 0;
    background: var(--k-surface);
    color: var(--k-text-muted);
    text-align: end;
    /* The COLUMN LABEL wraps; the metric value beneath it does not. Measured 2026-07-24: this table is the
       documented 2D-scroll exception, but it was scrolling far more than it had to. Two declarations were doing
       it — a `min-inline-size: 64rem` (1024px) hard floor on the table, and the labels inheriting the table's
       `white-space: nowrap` so "Narc success %" demanded 153px for a column whose widest value is "100.0%".
       Releasing both, per `.kl-rel-table-scroll` scrollWidth − clientWidth:

           viewport 1024 → 388px hidden → 164   (client 892)
           viewport 1280 → 306px hidden →  82   (client 974)
           viewport 1400 → 306px hidden →  82   (client 974)
           viewport  393 → 969px hidden → 745   (client 311)

       It does not reach zero and it cannot: 15 analytical columns will not fit a measure capped at 1120px. This
       table deliberately keeps its 2D scroll rather than adopting `kl-table-cards` — the whole value of the
       surface is comparing K9s down a metric column, which a stacked card destroys, and its row-level action is
       the ROW itself (`role="button"`, keyboard-operable) anchored by the sticky K9/Handler identity column, so
       no control is ever the thing that hides. The residual scroll still needs a visible affordance — that is a
       shared `.kl-tablewrap`/scroll-container declaration, reported rather than patched in per page. */
    white-space: normal;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: var(--k-space-3) var(--k-space-4);
    cursor: pointer;
    user-select: none;
    border-block-end: 1px solid var(--k-border);
}
.kl-rel-th:first-child[b-218m7accqd] {
    text-align: start;
    position: sticky;
    inset-inline-start: 0;
    z-index: 2;
}
.kl-rel-th:hover[b-218m7accqd] { color: var(--k-text); }
/* The active-sort header is a TEXT/foreground accent → ride --k-accent so it stays AA-legible per
   mode (light teal-700, dark teal-400, outdoor #066159). */
.kl-rel-th[aria-sort="ascending"][b-218m7accqd],
.kl-rel-th[aria-sort="descending"][b-218m7accqd] { color: var(--k-accent); }
.kl-rel-th--chev[b-218m7accqd] { inline-size: 2.5rem; cursor: default; }
.kl-rel-th-label[b-218m7accqd]::after {
    content: "";
    display: inline-block;
}
.kl-rel-th[aria-sort="ascending"] .kl-rel-th-label[b-218m7accqd]::after { content: " \2191"; }
.kl-rel-th[aria-sort="descending"] .kl-rel-th-label[b-218m7accqd]::after { content: " \2193"; }

.kl-rel-row[b-218m7accqd] {
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
}
.kl-rel-row:hover[b-218m7accqd] { background: var(--k-surface-2); }
.kl-rel-row:focus-visible[b-218m7accqd] {
    outline: 2px solid var(--k-teal-500);
    outline-offset: -2px;
}
.kl-rel-row--outlier[b-218m7accqd] {
    background: color-mix(in srgb, var(--k-critical) 6%, var(--k-surface));
}
.kl-rel-row--outlier:hover[b-218m7accqd] {
    background: color-mix(in srgb, var(--k-critical) 11%, var(--k-surface));
}
.kl-rel-cell[b-218m7accqd] {
    padding: var(--k-space-3) var(--k-space-4);
    text-align: end;
    font-family: var(--k-font-mono);
    font-size: 14px;
    color: var(--k-text);
    font-variant-numeric: tabular-nums;
}
.kl-rel-cell--name[b-218m7accqd] {
    position: sticky;
    inset-inline-start: 0;
    background: inherit;
    text-align: start;
    font-family: inherit;
    display: flex;
    flex-direction: column;
    gap: 1px;
}
.kl-rel-row:hover .kl-rel-cell--name[b-218m7accqd] { background: var(--k-surface-2); }
.kl-rel-k9-name[b-218m7accqd] { font-weight: 600; color: var(--k-text); }
.kl-rel-row:hover .kl-rel-k9-name[b-218m7accqd] { color: var(--k-accent); }
.kl-rel-k9-handler[b-218m7accqd] { font-size: 12px; color: var(--k-text-muted); }
/* An undefined ("N/A") cell is muted so it never reads as a real measured value (PLAT-012). */
.kl-rel-cell--na[b-218m7accqd] { color: var(--k-text-muted); }
.kl-rel-cell--chev[b-218m7accqd] {
    text-align: center;
    color: var(--k-text-muted);
    inline-size: 2.5rem;
}
.kl-rel-row:hover .kl-rel-cell--chev[b-218m7accqd] { color: var(--k-accent); }

/* ---- Empty states --------------------------------------------------------- */
.kl-rel-empty[b-218m7accqd] {
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-lg);
    background: var(--k-surface);
    padding: var(--k-space-8) var(--k-space-6);
    text-align: center;
}
.kl-rel-empty-state-message[b-218m7accqd] {
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-text);
    margin: 0;
}
.kl-rel-empty-hint[b-218m7accqd] {
    font-size: 14px;
    color: var(--k-text-muted);
    margin: 0;
}

/* ---- Denied state (fail-closed) ------------------------------------------- */
.kl-rel-denied[b-218m7accqd] {
    border: 1px solid color-mix(in srgb, var(--k-critical) 35%, var(--k-border));
    border-radius: var(--k-radius-lg);
    background: color-mix(in srgb, var(--k-critical) 8%, var(--k-surface));
    color: var(--k-text);
    font-weight: 600;
    padding: var(--k-space-4) var(--k-space-6);
}

/* ---- Inclusion-flags fieldset (drawer) ------------------------------------ */
.kl-rel-flags[b-218m7accqd] {
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-3) var(--k-space-4) var(--k-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    margin: 0;
}
.kl-rel-flags > legend[b-218m7accqd] {
    padding: 0 var(--k-space-2);
}
.kl-rel-flag[b-218m7accqd] {
    display: flex;
    align-items: center;
    gap: var(--k-space-3);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}
.kl-rel-flag input[b-218m7accqd] {
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--k-teal-500);
    cursor: pointer;
}
.kl-rel-flag-hint[b-218m7accqd] { color: var(--k-text-muted); font-size: 12px; }
/* The quiet annotations under a control: what a bound dimension narrows TO, and the K9-roster read
   failure. Muted, never a disabled shell. (.kl-rel-unbound-hint kept for the roster-error case; the
   supervisor hint it was written for is now a BOUND dimension and uses the -bound- variant.) */
.kl-rel-bound-hint[b-218m7accqd],
.kl-rel-unbound-hint[b-218m7accqd] {
    margin: var(--k-space-1) 0 0;
    color: var(--k-text-muted);
    font-size: 12px;
}

/* ---- Off-canvas filter drawer (right side; the scrim is KlOverlay's) -------- */
.kl-rel-drawer[b-218m7accqd] {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 65;
    inline-size: min(420px, 92vw);
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 0;
    background: var(--k-surface);
    color: var(--k-text);
    border-inline-start: 1px solid var(--k-border);
    box-shadow: var(--k-elev-3);
}
.kl-drawer-head[b-218m7accqd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    min-block-size: 56px;
    padding: 0 var(--k-space-6);
    background: var(--k-header-bg);
    color: var(--k-header-text);
    flex-shrink: 0;
}
.kl-drawer-title[b-218m7accqd] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-header-text);
}
.kl-drawer-close[b-218m7accqd] {
    color: var(--k-header-text);
    border-color: rgb(255 255 255 / .28);
    background: rgb(255 255 255 / .08);
}
.kl-drawer-close:hover[b-218m7accqd] { background: rgb(255 255 255 / .16); }
.kl-drawer-body[b-218m7accqd] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
}
.kl-drawer-note[b-218m7accqd] { margin: 0; font-size: 13px; color: var(--k-text-muted); }
.kl-drawer-actions[b-218m7accqd] {
    display: flex;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin-block-start: auto;
    padding-block-start: var(--k-space-4);
    border-block-start: 1px solid var(--k-border);
}
/* _content/Kanine.Web/Components/Pages/ReportAnalytics.razor.rz.scp.css */
/* =============================================================================
   ReportAnalytics.razor.css — R11 (UI-GUAR-011) restrained-premium polish for the
   CHARTED-ANALYTICS surface (report-analytics.html · RPT-029 / RPT-009 / RPT-026).
   -----------------------------------------------------------------------------
   Blazor-SCOPED to this component (no edit to the central design-system sheet —
   parallel-safe). The page leans on the shared kl-* kit where the kit already
   ships the affordance:
     • the chart-type toggle + the export-format single-select reuse the kit's
       .kl-segmented pill-group (navy-ink-on-teal active); the chart-type group is
       a role="tablist" keyed on aria-selected (a coverage contract), so this file
       ADDS the active-fill rule for aria-selected="true" the kit only ships for
       aria-pressed,
     • the preset quick-picks are .kl-btn--ghost (secondary chrome — NOT the page
       primary), the Export action is the LONE .kl-btn--primary teal primary,
     • the three dimension <select>s inherit the kit's global form-control skin
       (.kl-shell-main select), so this file only lays them out + labels them,
     • the empty-data state reuses the kit-less .kl-empty composition the SIGNED
       MasterNames/Suspects pages define (elevated card, token-tinted disc).
   This file supplies ONLY the page-local register the kit doesn't: the controls
   card chrome, the field grid + labels, the chart card head + export toolbar, the
   composed empty-data card (with an analytics glyph), and the de-ambiguated
   drill-down list (was one teal text blob).
   Every colour is a --k-* token (no raw fills, NO gradient) and spacing is ONLY the
   defined 1/2/3/4/6/8/12/16 scale (NO --k-space-5) so the R11 objective
   token/canvas/0-gradient teeth hold across light / dark / dark-outdoor, with
   load-bearing dark remaps at the foot. POLISH, not redesign: every data-testid /
   data-anchor / data-* hook + binding is untouched.
   ========================================================================== */

/* The page stacks its cards with a calm rhythm (the .kl-page flex already gaps;
   this just guarantees it when the wrapper class is page-scoped). */
.kl-an-page[b-ajg4ndr4di] {
    gap: var(--k-space-4);
}

/* ---- Shared field label (selectors, chart-type group, presets) ---------------- */
.kl-an-field-label[b-ajg4ndr4di] {
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
    margin-block-end: var(--k-space-2);
}

/* ---- Controls card: chart-type toggle + dimension selectors + presets ---------- */
.kl-an-controls[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6);
}

/* The chart-type field lays the label above its segmented group. */
.kl-an-field--inline[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
}

/* The dimension selectors sit on a responsive grid so they fill the card width
   instead of stacking as full-bleed unstyled rows. */
.kl-an-selectors[b-ajg4ndr4di] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    gap: var(--k-space-3) var(--k-space-4);
    align-items: end;
}

.kl-an-field[b-ajg4ndr4di] {
    min-inline-size: 0;
}

/* The <select>s inherit the kit's global control skin (.kl-shell-main select);
   only ensure they span their grid cell. */
.kl-an-field select[b-ajg4ndr4di] {
    inline-size: 100%;
}

/* ---- Chart-type segmented control ---------------------------------------------
   The group carries .kl-segmented (kit base: pill-group, hairline dividers, hover).
   The kit's active fill is keyed on aria-pressed; this is a role="tablist" keyed on
   aria-selected, so add the SAME teal-fill for the selected tab here. ------------ */
.kl-an-charttype.kl-segmented > .kl-an-charttype-tab[aria-selected="true"][b-ajg4ndr4di] {
    background: var(--k-teal-500);
    color: var(--k-ink-900);
    font-weight: 700;
}

/* ---- Presets: a labelled group of restrained ghost quick-picks ----------------- */
.kl-an-presets[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    border-block-start: 1px solid var(--k-border);
    padding-block-start: var(--k-space-4);
}

.kl-an-presets-row[b-ajg4ndr4di] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
}

/* The preset buttons carry .kl-btn--ghost (kit) — size them to the compact chip
   register so a row of five reads as quick-picks, not heavy actions. */
.kl-an-preset[b-ajg4ndr4di] {
    font-size: 13px;
    font-weight: 600;
    min-block-size: var(--k-touch); /* UI-GUAR-036 (R2-25): ≥44 CSS-px touch target (was 40). */
}

/* ---- Chart + aggregate-table card --------------------------------------------- */
.kl-an-chart[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6);
}

/* The card head: heading on the leading edge, the export toolbar on the trailing
   edge, wrapping to its own row on narrow widths. */
.kl-an-chart-head[b-ajg4ndr4di] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--k-space-3) var(--k-space-4);
}

.kl-an-chart-heading[b-ajg4ndr4di] {
    min-inline-size: 0;
}

.kl-an-chart-title[b-ajg4ndr4di] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--k-text);
    line-height: 1.3;
}

.kl-an-chart-subtitle[b-ajg4ndr4di] {
    margin: var(--k-space-1) 0 0;
    font-size: 13px;
    color: var(--k-text-muted);
}

/* The export toolbar: the format SELECTORS (segmented, secondary) sit beside the
   single teal PRIMARY (Export). */
.kl-an-export-bar[b-ajg4ndr4di] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
}

/* The format group is .kl-segmented (kit); the active fill is keyed on aria-pressed,
   which the kit already supplies — nothing more needed than letting it size. */
.kl-an-export-format[b-ajg4ndr4di] {
    font-size: 13px;
}

/* ---- Composed empty-data state ------------------------------------------------
   The dev seed legitimately has 0 buckets, so this render is what the R11 harness
   shoots. Reuse the .kl-empty composition the SIGNED MasterNames/Suspects pages use
   (elevated card, token-tinted disc, centred) and swap the disc glyph for a chart.
   Presence, not a naked sentence; never a grey void. ----------------------------- */
.kl-an-empty.kl-empty[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--k-space-3);
    padding: var(--k-space-12) var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
}

.kl-an-empty.kl-empty[b-ajg4ndr4di]::before {
    content: "";
    inline-size: 72px;
    block-size: 72px;
    margin-block-end: var(--k-space-1);
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    /* a calm bar-chart glyph drawn as a masked background (no extra DOM / no icon
       font dependency — stays offline-safe), tinted with the accent. */
    -webkit-mask: center / 34px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4a1 1 0 0 1 1 1v13h15a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z'/%3E%3Cpath fill='%23000' d='M8 12a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Zm4-4a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Zm4-2a1 1 0 0 1 1 1v8a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    mask: center / 34px no-repeat
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4a1 1 0 0 1 1 1v13h15a1 1 0 1 1 0 2H4a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1Z'/%3E%3Cpath fill='%23000' d='M8 12a1 1 0 0 1 1 1v2a1 1 0 1 1-2 0v-2a1 1 0 0 1 1-1Zm4-4a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0V9a1 1 0 0 1 1-1Zm4-2a1 1 0 0 1 1 1v8a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1Z'/%3E%3C/svg%3E");
    background-color: var(--k-accent);
}

.kl-an-empty .kl-empty-state-message[b-ajg4ndr4di] {
    margin: 0;
    max-inline-size: 44ch;
    color: var(--k-text);
    font-family: var(--k-font-display);
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.4;
}

.kl-an-empty-hint[b-ajg4ndr4di] {
    margin: 0;
    max-inline-size: 52ch;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.55;
}

/* ---- Inline-SVG chart (final-draft pass) ---------------------------------------
   Token-composed data marks over the loaded series. Marks carry the series color;
   axis text wears text tokens (never the series color); gridlines are recessive
   hairlines. Dark mode softens the large bar fill (never a large bright-teal fill
   on the dark surface) while the thin line/dots keep the accent. ---------------- */
.kl-an-plot[b-ajg4ndr4di] {
    display: block;
    inline-size: 100%;
    block-size: auto;
}

.kl-an-plot-region[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-an-plot-grid[b-ajg4ndr4di] {
    stroke: var(--k-border);
    stroke-width: 1;
}

.kl-an-plot-baseline[b-ajg4ndr4di] {
    stroke: color-mix(in srgb, var(--k-border) 60%, var(--k-text-muted));
}

/* The axis/value text nodes are INJECTED markup (Razor reserves <text>), so they carry no
   CSS-isolation scope attribute — reach them via ::deep from the scoped svg. */
.kl-an-plot[b-ajg4ndr4di]  .kl-an-plot-axis {
    fill: var(--k-text-muted);
    font-family: var(--k-font-ui);
    font-size: 11px;
}

.kl-an-plot[b-ajg4ndr4di]  .kl-an-plot-val {
    fill: var(--k-text);
    font-family: var(--k-font-mono);
    font-size: 11px;
    font-variant-numeric: tabular-nums;
}

.kl-an-plot-mark[b-ajg4ndr4di] {
    fill: var(--k-accent);
}

html.dark .kl-an-plot-mark[b-ajg4ndr4di] {
    fill: color-mix(in srgb, var(--k-accent) 55%, var(--k-surface));
}

.kl-an-plot-line[b-ajg4ndr4di] {
    fill: none;
    stroke: var(--k-accent);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* End-dots: 8px marks with a 2px surface ring so they stay legible crossing the line. */
.kl-an-plot-dot[b-ajg4ndr4di] {
    fill: var(--k-accent);
    stroke: var(--k-surface);
    stroke-width: 2;
}

/* Area fill = the series hue as a wash, never a saturated block. */
.kl-an-plot-areafill[b-ajg4ndr4di] {
    fill: var(--k-accent);
    opacity: .12;
}

/* Pie: slices separated by a 2px surface gap (the stroke IS the surface color). */
.kl-an-plot-pierow[b-ajg4ndr4di] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-4) var(--k-space-6);
}

.kl-an-plot--pie[b-ajg4ndr4di] {
    inline-size: min(280px, 100%);
    flex: 0 0 auto;
}

.kl-an-slice[b-ajg4ndr4di] {
    stroke: var(--k-surface);
    stroke-width: 2;
}

.kl-an-plot-legend[b-ajg4ndr4di] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    min-inline-size: 0;
    flex: 1 1 14rem;
}

.kl-an-legend-item[b-ajg4ndr4di] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    font-size: 13px;
    color: var(--k-text);
    min-block-size: 24px;
}

.kl-an-legend-swatch[b-ajg4ndr4di] {
    flex: none;
    inline-size: 12px;
    block-size: 12px;
    border-radius: var(--k-radius-sm);
    border: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
}

.kl-an-legend-label[b-ajg4ndr4di] {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-an-legend-value[b-ajg4ndr4di] {
    margin-inline-start: auto;
    font-family: var(--k-font-mono);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--k-text-muted);
}

.kl-an-plot-note[b-ajg4ndr4di] {
    margin: 0;
    font-size: 13px;
    color: var(--k-text-muted);
}

/* The 8-step single-hue ramp (accent mixed over the surface) shared by pie slices
   (fill) and legend swatches (background) — one class carries both properties, so
   swatch and slice can never drift apart. Identity is carried by the legend text +
   per-slice <title>, never by hue alone. */
.kl-an-c0[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 88%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 88%, var(--k-surface)); }
.kl-an-c1[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 72%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 72%, var(--k-surface)); }
.kl-an-c2[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 58%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 58%, var(--k-surface)); }
.kl-an-c3[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 45%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-surface)); }
.kl-an-c4[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 34%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 34%, var(--k-surface)); }
.kl-an-c5[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 25%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 25%, var(--k-surface)); }
.kl-an-c6[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 17%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 17%, var(--k-surface)); }
.kl-an-c7[b-ajg4ndr4di] { fill: color-mix(in srgb, var(--k-accent) 10%, var(--k-surface)); background-color: color-mix(in srgb, var(--k-accent) 10%, var(--k-surface)); }

/* ---- Drill-down list ----------------------------------------------------------
   Was three teal links running together as one ambiguous blob. Recompose as a
   labelled list of discrete, bordered row affordances — each a clear, separately
   tappable navigation with a trailing arrow that nudges on hover. -------------- */
.kl-an-drilldown[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    border-block-start: 1px solid var(--k-border);
    padding-block-start: var(--k-space-4);
}

.kl-an-drilldown-label[b-ajg4ndr4di] {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-an-drill-list[b-ajg4ndr4di] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-an-drill[b-ajg4ndr4di] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    min-block-size: var(--k-touch);
    padding: var(--k-space-2) var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface);
    color: var(--k-accent);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--k-dur-1) var(--k-ease),
        border-color var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-an-drill:hover[b-ajg4ndr4di] {
    background: var(--k-surface-2);
    border-color: var(--k-accent);
}

.kl-an-drill-text[b-ajg4ndr4di] {
    min-inline-size: 0;
}

.kl-an-drill-arrow[b-ajg4ndr4di] {
    flex: none;
    font-size: 16px;
    line-height: 1;
    color: var(--k-text-muted);
    transition: transform var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-an-drill:hover .kl-an-drill-arrow[b-ajg4ndr4di] {
    color: var(--k-accent);
    transform: translateX(3px);
}

/* ---- Access-denied notice (fail-closed read) ---------------------------------- */
.kl-an-denied[b-ajg4ndr4di] {
    margin: 0;
    padding: var(--k-space-4);
    border-radius: var(--k-radius-md);
    border: 1px solid color-mix(in srgb, var(--k-critical) 35%, var(--k-surface));
    border-inline-start: 3px solid var(--k-critical);
    background: color-mix(in srgb, var(--k-critical) 8%, var(--k-surface));
    color: var(--k-text);
    font-size: 14px;
    line-height: 1.55;
}

/* =============================================================================
   Dark + dark-outdoor remaps — load-bearing legibility. The card + chip edges and
   the empty-disc need a darker-surface variant (mirrors the foundation pill-contrast
   pattern: definition survives the darker / brighter variants).
   ========================================================================== */
html.dark .kl-an-controls[b-ajg4ndr4di],
html.dark .kl-an-chart[b-ajg4ndr4di],
html.dark .kl-an-empty.kl-empty[b-ajg4ndr4di] {
    border-color: var(--k-border);
    box-shadow: var(--k-elev-2);
}

html.dark .kl-an-denied[b-ajg4ndr4di] {
    background: color-mix(in srgb, var(--k-critical) 18%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 50%, var(--k-surface));
}

/* Dark-outdoor (sunlight-legibility) — push the card + control edges a touch harder
   so definition survives the brighter, higher-contrast variant. */
html.dark[data-outdoor="true"] .kl-an-controls[b-ajg4ndr4di],
html.dark[data-outdoor="true"] .kl-an-chart[b-ajg4ndr4di],
html.dark[data-outdoor="true"] .kl-an-empty.kl-empty[b-ajg4ndr4di],
html.dark[data-outdoor="true"] .kl-an-drill[b-ajg4ndr4di] {
    border-color: color-mix(in srgb, var(--k-border) 78%, var(--k-text));
}

/* ---- Honour reduced-motion: drop the drill micro-motion (a11y) ----------------- */
@media (prefers-reduced-motion: reduce) {
    .kl-an-drill[b-ajg4ndr4di],
    .kl-an-drill-arrow[b-ajg4ndr4di] {
        transition: none;
    }
}
/* _content/Kanine.Web/Components/Pages/ReportBuilder.razor.rz.scp.css */
/* UI-GUAR-003 / RPT-014 — Report builder (report-builder.html), page-major R11 (restrained-premium). Consumes the
   global foundation vocabulary (kf-input/-textarea, kl-btn + --primary/--secondary/--ghost, kl-segmented, kl-chip,
   kl-visually-hidden, the suffix card/field/denied/error families) from kanine-design-system.css; this scoped sheet
   adds ONLY the two-column config/preview shell, the column-picker rows + analyzable/PII badges, the filter + group/
   sort surfaces, the live-preview table, the export cluster, and the save dialog. Every colour is a --k-* token (via
   color-mix where a tint is needed) — no raw fills, no gradients, no off-token colour — so the R11 token/canvas teeth
   hold across light / dark / outdoor. Only defined spacing tokens are used (no --k-space-5). */

.kl-rb-intro[b-wivlxb9fzq] {
    margin: 0 0 var(--k-space-4);
    color: var(--k-text-muted);
    font-size: 15px;
    max-inline-size: 70ch;
}

/* ---- Analytics-drill active-scope chip ------------------------------------ */
.kl-rb-scopechips[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-4);
}

.kl-rb-scopechip[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-rb-scopechip-x[b-wivlxb9fzq] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 20px;
    block-size: 20px;
    min-block-size: auto;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius-full);
    background: transparent;
    color: inherit;
    cursor: pointer;
    font-size: 12px;
}

.kl-rb-scopechip-x:hover[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-text) 12%, transparent);
}

/* ---- Card-title lead glyphs (iconned headers law) ------------------------- */
.kl-rb-card-icon[b-wivlxb9fzq] {
    font-size: 16px;
    color: var(--k-accent);
    margin-inline-end: var(--k-space-1);
}

/* ---- Top / bottom action bars (mirrored) --------------------------------- */
/* A multi-class element (kl-rb-actionbar kl-rb-actionbar-top) can't lean on the foundation's whole-attribute
   [class$="-actionbar"] suffix, so the bar chrome is set explicitly here. */
.kl-rb-actionbar[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--k-space-3);
}

.kl-rb-actionbar-top[b-wivlxb9fzq] {
    padding-block-end: var(--k-space-4);
    margin-block-end: var(--k-space-4);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
}

.kl-rb-actionbar-bottom[b-wivlxb9fzq] {
    padding-block-start: var(--k-space-4);
    margin-block-start: var(--k-space-2);
    border-block-start: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    /* Comb fix (02/05) — clearance for the app-wide FIXED feedback FAB (48px disc at right/bottom 20px, another
       lane's component — never moved from here): the sticky preview column pins this bar near the viewport's
       bottom-right, exactly the FAB's home, so the bar's right-aligned buttons sat under the disc. Page-scoped
       trailing padding keeps every button clear of the 68px FAB zone at desktop AND at the single-column width. */
    padding-block-end: 72px;
}

.kl-rb-btn .ki[b-wivlxb9fzq],
.kl-rb-export-run .ki[b-wivlxb9fzq] {
    font-size: 20px;
}

/* Review fix (M4): the visible schedule-gate reason line inside the mirrored action bars — a small muted inline
   note (never tooltip-only); outdoor lifts it to full text with the other guidance lines below. */
.kl-rb-schedule-gate-note[b-wivlxb9fzq] {
    font-size: 12.5px;
    color: var(--k-text-muted);
}

/* ---- Two-column shell: configuration (left) + live preview (right) ------- */
.kl-rb-layout[b-wivlxb9fzq] {
    display: grid;
    grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
    gap: var(--k-space-6);
    align-items: start;
}

/* W1 redesign (report-builder-redesign-spec.md): the PREVIEW is the sticky column now — "the paper is the product",
   so it stays on screen for the whole ~3,600px config rail scroll. The config rail loses its sticky (it is the tall
   one); the preview card scrolls INTERNALLY inside the viewport-height cap. */
.kl-rb-config[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    min-inline-size: 0;
}

.kl-rb-preview-col[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    min-inline-size: 0;
    position: sticky;
    inset-block-start: var(--k-space-4);
    max-block-size: calc(100vh - 2rem);
}

/* The preview CARD owns the internal scroll (the column itself never overflows the viewport cap). */
.kl-rb-preview-col .kl-rb-preview-card[b-wivlxb9fzq] {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
}

/* The config cards already pick up the foundation card chrome via [class$="-card"]; trim the default block margin so
   the column's own gap governs rhythm, and keep dense inner spacing for the picker. */
.kl-rb-config .kl-rb-card[b-wivlxb9fzq],
.kl-rb-preview-col .kl-rb-card[b-wivlxb9fzq] {
    margin-block-end: 0;
}

/* ---- Column picker ------------------------------------------------------- */
.kl-rb-col-group-title[b-wivlxb9fzq] {
    margin: var(--k-space-3) 0 var(--k-space-2);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--k-text-muted);
}

.kl-rb-col-group-title:first-of-type[b-wivlxb9fzq] {
    margin-block-start: 0;
}

/* W1 density (reworked twice): the picker is a dense grid instead of one airy row per checkbox — Activities'
   ~26 columns drop from two screenfuls to one, rows keep their 40px touchable height. History: W1's
   `auto-fill, minmax(11rem, 1fr)` never fit two tracks in the 23rem rail (silently one column); the W4 polish
   pass hard-coded two tracks, which crushed badge-row labels to two letters on narrow/mobile widths. The
   auto-fit floor below + the badge-row span rule are the final shape: density where it fits, full-width
   readable labels where it doesn't. */
.kl-rb-col-list[b-wivlxb9fzq] {
    list-style: none;
    margin: 0 0 var(--k-space-2);
    padding: 0;
    display: grid;
    /* Owner fix (2026-07-14): labels must stay READABLE at every width. auto-fit with a 10rem floor keeps the
       two-up density in the desktop rail but honestly collapses to ONE column in a narrow container (the fixed
       two-track template crushed labels to two letters on phones); min(100%, …) keeps the track legal below 10rem. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
    gap: 2px;
}

/* A row that carries a badge (Dimension/Measure/PII) needs label + badge on one line — it SPANS the grid so the
   label is never sacrificed to a half-width cell. Plain rows keep flowing two-up around it; the badge row reads
   as gentle emphasis (deliberate for PII). */
.kl-rb-col-row:has(.kl-rb-badge)[b-wivlxb9fzq] {
    grid-column: 1 / -1;
}

/* The honest empty-state note spans the whole grid (it is a message, not a cell). */
.kl-rb-col-list .kl-rb-col-empty[b-wivlxb9fzq] {
    grid-column: 1 / -1;
}

/* Override the foundation's heavy bordered [class$="-row"] card so each column toggle reads as a light, tappable
   picker row (hover wash, no per-row border) — the dense list shouldn't look like a stack of cards. */
.kl-rb-col-row[b-wivlxb9fzq] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-1) var(--k-space-2);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    min-block-size: 2.5rem;
    transition: background var(--k-dur-1) var(--k-ease);
}

/* W1 — a search-hidden row: CSS-only (the checkbox STAYS in the DOM for every contracted selector).
   Comb fix (B1) — this rule MUST beat the `.kl-rb-col-row { display: flex }` base above: it once sat BEFORE that
   base rule at EQUAL specificity, so the later `display: flex` won the cascade and the step-② search hid nothing.
   It now (a) sits AFTER the base rule AND (b) carries the doubled-class selector, so it wins on specificity even
   if this sheet is ever reordered again. Regression anchor: kl-rb-col-row--filtered-after-base (a Web.Tests
   sheet-order test reads this file and asserts both the order and the doubled-class selector). */
.kl-rb-col-row.kl-rb-col-row--filtered[b-wivlxb9fzq] {
    display: none;
}

.kl-rb-col-row:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

.kl-rb-col-row input[type="checkbox"][b-wivlxb9fzq] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    min-block-size: auto;
    margin: 0;
    accent-color: var(--k-teal-500);
    cursor: pointer;
    flex: 0 0 auto;
}

.kl-rb-col-row input[type="checkbox"]:disabled[b-wivlxb9fzq] {
    cursor: not-allowed;
    opacity: .55;
}

/* W4 polish — dense-grid labels stay ONE line and ellipsize (the row's title attribute carries the full text);
   without this a long header re-wraps the 40px row back into the tall airy rows the density pass removed. */
.kl-rb-col-row > span:first-of-type[b-wivlxb9fzq] {
    flex: 1 1 auto;
    min-inline-size: 0;
    color: var(--k-text);
    font-size: 13.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A disabled (non-analyzable) row reads quieter so the picker is honest about why it can't be added. */
.kl-rb-col-row:has(input:disabled) > span:first-of-type[b-wivlxb9fzq] {
    color: var(--k-text-muted);
}

/* Honest empty-state line for the auto-enumerated custom-field group — a small inline note (NOT the foundation's big
   centered [class$="-empty"] state block, which this scoped rule overrides). */
.kl-rb-col-empty[b-wivlxb9fzq] {
    display: block;
    padding: var(--k-space-2) var(--k-space-3);
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

/* Inline guidance under the visualization cards (why every card but Table is disabled) + the honest letterhead note.
   Both are calm accent-tinted info lines, not alarms — they explain and point, never scold. */
.kl-rb-viz-hint[b-wivlxb9fzq],
.kl-rb-check-note[b-wivlxb9fzq] {
    display: block;
    margin: var(--k-space-2) 0 0;
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-md, 8px);
    background: color-mix(in srgb, var(--k-accent) 10%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.kl-rb-viz-hint-icon[b-wivlxb9fzq] {
    color: var(--k-accent);
    margin-right: 4px;
    vertical-align: -2px;
}

.kl-rb-check-note a[b-wivlxb9fzq],
.kl-rb-viz-hint .kl-linkbtn[b-wivlxb9fzq] {
    color: var(--k-accent);
    font-weight: 600;
}

/* A text button that reads as a link (used to jump focus to step ④) — no chrome, keyboard-focusable. */
.kl-linkbtn[b-wivlxb9fzq] {
    appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: var(--k-accent);
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.kl-linkbtn:hover[b-wivlxb9fzq] {
    text-decoration: none;
}

/* ---- Analyzable / PII badges (shape + text + colour, never colour alone) -- */
.kl-rb-badge[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    padding: 2px 8px;
    border-radius: var(--k-radius-full);
    border: 1px solid;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    line-height: 1.6;
    white-space: nowrap;
}

.kl-rb-badge-dim[b-wivlxb9fzq] {
    color: #0b5c3c;
    background: color-mix(in srgb, var(--k-success) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 35%, var(--k-surface));
}

.kl-rb-badge-measure[b-wivlxb9fzq] {
    color: #0b4f8a;
    background: color-mix(in srgb, var(--k-info) 10%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-info) 32%, var(--k-surface));
}

.kl-rb-badge-pii[b-wivlxb9fzq] {
    color: #7a1b12;
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 35%, var(--k-surface));
}

.kl-rb-badge-muted[b-wivlxb9fzq] {
    color: var(--k-text-muted);
    background: var(--k-surface-2);
    border-color: var(--k-border);
}

/* Dark-mode badge contrast (the fixed dark-on-tint above is near-invisible on the dark surface — re-map to light text
   on a more-saturated fill so the load-bearing analyzable/PII signal stays legible in dark + dark-outdoor). */
html.dark .kl-rb-badge-dim[b-wivlxb9fzq] {
    color: #9ce6c1;
    background: color-mix(in srgb, var(--k-success) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 55%, var(--k-surface));
}

html.dark .kl-rb-badge-measure[b-wivlxb9fzq] {
    color: #aacdff;
    background: color-mix(in srgb, var(--k-info) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-info) 55%, var(--k-surface));
}

html.dark .kl-rb-badge-pii[b-wivlxb9fzq] {
    color: #f6ab9d;
    background: color-mix(in srgb, var(--k-critical) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 55%, var(--k-surface));
}

/* ---- Filters + group/sort ------------------------------------------------ */
.kl-rb-filter-form[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-rb-filter-form > label[b-wivlxb9fzq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
    margin-block-start: var(--k-space-2);
}

.kl-rb-filter-form > label:first-of-type[b-wivlxb9fzq] {
    margin-block-start: 0;
}

/* Override the foundation's bordered [class$="-row"] card for the two inline check rows — a plain inline label. */
.kl-rb-check-row[b-wivlxb9fzq] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-1) 0;
    margin-block-start: var(--k-space-2);
    background: transparent;
    border: 0;
    border-radius: 0;
    min-block-size: auto;
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}

.kl-rb-check-row input[type="checkbox"][b-wivlxb9fzq] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    min-block-size: auto;
    margin: 0;
    accent-color: var(--k-teal-500);
    cursor: pointer;
}

/* Sort-direction segmented control. */
.kl-rb-sortdir[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
    margin-block-start: var(--k-space-1);
    inline-size: fit-content;
}

.kl-rb-sortdir-btn[b-wivlxb9fzq] {
    appearance: none;
    min-block-size: var(--k-touch);
    padding: 0 var(--k-space-4);
    background: transparent;
    color: var(--k-text);
    border: 0;
    border-inline-end: 1px solid var(--k-border);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-rb-sortdir-btn:last-child[b-wivlxb9fzq] {
    border-inline-end: 0;
}

.kl-rb-sortdir-btn:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

/* Selected = a restrained TONAL accent wash (NOT the saturated teal reserved for the sole Export primary): the
   sort direction is a low-stakes state toggle, so it speaks the same quiet selected-state language as the export-
   format segmented control and every other signed page's aria-pressed control. */
.kl-rb-sortdir-btn[aria-pressed="true"][b-wivlxb9fzq] {
    /* Final-draft bump: the 14% wash read barely-active in the shots — a stronger tint + an inset accent
       ring so the pressed direction is unmistakable in light AND dark (still tonal, not the primary teal). */
    background: color-mix(in srgb, var(--k-accent) 22%, var(--k-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-accent) 55%, var(--k-border));
    color: var(--k-text);
    font-weight: 700;
}

/* ---- Live preview -------------------------------------------------------- */
.kl-rb-preview-head[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3) var(--k-space-4);
    margin-block-end: var(--k-space-4);
}

.kl-rb-preview-head .kl-rb-card-title[b-wivlxb9fzq] {
    margin: 0;
}

/* Export cluster: format segmented control + the single filled-teal primary. */
.kl-rb-export[b-wivlxb9fzq] {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-rb-export-format[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
}

.kl-rb-format[b-wivlxb9fzq] {
    appearance: none;
    min-block-size: 2.5rem;
    padding: 0 var(--k-space-3);
    background: transparent;
    color: var(--k-text-muted);
    border: 0;
    border-inline-end: 1px solid var(--k-border);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-rb-format:last-child[b-wivlxb9fzq] {
    border-inline-end: 0;
}

.kl-rb-format:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
    color: var(--k-text);
}

/* Selected export format = the SAME restrained tonal accent wash the sort-direction control uses, so the page's two
   segmented controls speak one quiet selected-state language and only Export wears the saturated primary teal. */
.kl-rb-format[aria-pressed="true"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
    color: var(--k-text);
    font-weight: 700;
}

.kl-rb-export-run[b-wivlxb9fzq] {
    min-block-size: 2.5rem;
}

/* Preview table — the right-aligned measure column + a self-describing header. */
.kl-rb-table[b-wivlxb9fzq] {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.kl-rb-table thead th[b-wivlxb9fzq] {
    text-align: start;
    padding: var(--k-space-2) var(--k-space-3);
    background: var(--k-surface-2);
    color: var(--k-text-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    white-space: nowrap;
    border-block-end: 1px solid var(--k-border);
}

.kl-rb-table thead th:last-child[b-wivlxb9fzq] {
    text-align: end;
}

.kl-rb-table tbody td[b-wivlxb9fzq] {
    padding: var(--k-space-2) var(--k-space-3);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 55%, transparent);
    color: var(--k-text);
    vertical-align: middle;
}

.kl-rb-table tbody td:last-child[b-wivlxb9fzq] {
    text-align: end;
    font-family: var(--k-font-mono);
    font-variant-numeric: tabular-nums;
}

.kl-rb-table tbody tr:last-child td[b-wivlxb9fzq] {
    border-block-end: 0;
}

.kl-rb-table tbody tr[b-wivlxb9fzq] {
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-rb-table tbody tr:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

/* ---- Save dialog ---------------------------------------------------------- */
/* UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim + centering. This only sizes the
   card + carries its surface/elevation. */
.kl-rb-dialog[b-wivlxb9fzq] {
    inline-size: min(34rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 4rem);
    overflow-y: auto;
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
}

.kl-rb-save-form[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-6);
}

.kl-rb-dialog-title[b-wivlxb9fzq] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-rb-field[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

.kl-rb-field label[b-wivlxb9fzq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
}

.kl-rb-dialog-note[b-wivlxb9fzq] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-2);
    margin: 0;
    padding: var(--k-space-3);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.kl-rb-dialog-note .ki[b-wivlxb9fzq] {
    font-size: 18px;
    color: var(--k-teal-700);
    flex: 0 0 auto;
}

html.dark .kl-rb-dialog-note .ki[b-wivlxb9fzq] {
    color: var(--k-teal-400);
}

.kl-rb-dialog-actions[b-wivlxb9fzq] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-2);
    margin-block-start: var(--k-space-2);
}

/* ---- Resilient-load banner (RPT-014 increment 2) -------------------------- */
/* Foundation .kl-banner supplies colour/spacing; this only lays out the retry affordance on the same row. */
.kl-rb-load-error[b-wivlxb9fzq] {
    align-items: center;
    gap: var(--k-space-3);
}

.kl-rb-load-error-text[b-wivlxb9fzq] {
    flex: 1 1 12rem;
    min-inline-size: 0;
}

.kl-rb-load-retry[b-wivlxb9fzq] {
    flex: 0 0 auto;
    min-block-size: 2.25rem;
}

/* ---- Inline update-conflict message --------------------------------------- */
.kl-rb-update-error[b-wivlxb9fzq] {
    margin: calc(-1 * var(--k-space-2)) 0 var(--k-space-4);
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-caution) 12%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-caution) 40%, var(--k-surface));
    color: var(--k-text);
    font-size: 13px;
    line-height: 1.5;
}

/* ---- My-reports library ---------------------------------------------------- */
.kl-rb-library-head[b-wivlxb9fzq] {
    appearance: none;
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    inline-size: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--k-text);
    font: inherit;
    cursor: pointer;
    text-align: start;
}

.kl-rb-library-title[b-wivlxb9fzq] {
    margin: 0;
    flex: 1 1 auto;
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
}

.kl-rb-library-count[b-wivlxb9fzq] {
    flex: 0 0 auto;
    min-inline-size: 22px;
    padding: 1px 7px;
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text-muted);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.kl-rb-library-chev[b-wivlxb9fzq] {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--k-text-muted);
}

.kl-rb-library-error[b-wivlxb9fzq] {
    margin: var(--k-space-3) 0 0;
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-caution) 12%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-caution) 40%, var(--k-surface));
    color: var(--k-text);
    font-size: 13px;
    line-height: 1.5;
}

.kl-rb-library-empty[b-wivlxb9fzq] {
    margin: var(--k-space-3) 0 0;
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.kl-rb-library-list[b-wivlxb9fzq] {
    list-style: none;
    margin: var(--k-space-3) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

/* Override the foundation's heavy bordered [class$="-item"] chrome: a light, hoverable library row. */
.kl-rb-library-item[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    padding: var(--k-space-2) var(--k-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}

.kl-rb-library-item:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
    border-color: color-mix(in srgb, var(--k-border) 70%, transparent);
}

.kl-rb-library-main[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.kl-rb-library-name[b-wivlxb9fzq] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--k-text);
    overflow-wrap: anywhere;
}

.kl-rb-library-loaded[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--k-radius-full);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    background: color-mix(in srgb, var(--k-accent) 16%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-accent) 45%, var(--k-surface));
    color: var(--k-text);
}

.kl-rb-library-loaded--dirty[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-caution) 16%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 45%, var(--k-surface));
}

.kl-rb-library-meta[b-wivlxb9fzq] {
    font-size: 12px;
    color: var(--k-text-muted);
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-rb-library-version[b-wivlxb9fzq] {
    padding: 0 6px;
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    font-size: 10px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kl-rb-library-actions[b-wivlxb9fzq] {
    display: flex;
    align-items: center;
    gap: var(--k-space-1);
}

.kl-rb-library-act[b-wivlxb9fzq] {
    appearance: none;
    min-block-size: 2rem;
    padding: 0 var(--k-space-2);
    border: 0;
    border-radius: var(--k-radius-sm, var(--k-radius-md));
    background: transparent;
    color: var(--k-teal-700);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-rb-library-act:hover[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
}

.kl-rb-library-act--danger[b-wivlxb9fzq] {
    color: var(--k-critical);
}

.kl-rb-library-act--danger:hover[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
}

html.dark .kl-rb-library-act[b-wivlxb9fzq] {
    color: var(--k-teal-400);
}

html.dark .kl-rb-library-act--danger[b-wivlxb9fzq] {
    color: color-mix(in srgb, var(--k-critical) 70%, white);
}

/* ---- The numbered step rail (orientation, never gating) -------------------- */
/* W4 polish — the step header is a 2-row GRID: row 1 = number/tick · title+hint · chevron; row 2 = the LIVE
   summary on its OWN full-width line. Squeezed right of the hint (the W1 flex layout, max-inline-size 45%) the
   summary truncated to slivers ("5 …", "No…", "Deployments & activit…") in the live QA shots — its own line gives
   it the card's whole width, one line, honest ellipsis only when genuinely long. */
.kl-rb-step-head[b-wivlxb9fzq] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: var(--k-space-3);
    row-gap: 2px;
    margin-block-end: var(--k-space-3);
}

.kl-rb-step-head .kl-rb-step-num[b-wivlxb9fzq] {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.kl-rb-step-head .kl-rb-step-text[b-wivlxb9fzq] {
    grid-column: 2;
    grid-row: 1;
}

.kl-rb-step-head .kl-rb-step-chev[b-wivlxb9fzq] {
    grid-column: 3;
    grid-row: 1;
}

.kl-rb-step-num[b-wivlxb9fzq] {
    flex: 0 0 auto;
    inline-size: 28px;
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text-muted);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    transition: background var(--k-dur-2) var(--k-ease), color var(--k-dur-2) var(--k-ease),
                border-color var(--k-dur-2) var(--k-ease);
}

/* Configured = the teal tick (shape + glyph, never colour alone — the glyph swaps from the digit to a check). */
.kl-rb-step-num--done[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 20%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 55%, var(--k-border));
    color: var(--k-teal-700);
}

html.dark .kl-rb-step-num--done[b-wivlxb9fzq] {
    color: var(--k-teal-400);
}

.kl-rb-step-num .ki[b-wivlxb9fzq] {
    font-size: 17px;
}

.kl-rb-step-text[b-wivlxb9fzq] {
    min-inline-size: 0;
}

.kl-rb-step-title[b-wivlxb9fzq] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-rb-step-hint[b-wivlxb9fzq] {
    margin: 2px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--k-text-muted);
}

/* Active-filter count badge on the Filters step title. */
.kl-rb-filter-count[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border-radius: var(--k-radius-full);
    background: color-mix(in srgb, var(--k-accent) 16%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-accent) 45%, var(--k-surface));
    color: var(--k-text);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    white-space: nowrap;
}

/* The focus hand-off target (the empty-draft CTA): a visible ring, no layout jump. */
.kl-rb-step:focus-visible[b-wivlxb9fzq] {
    outline: 2px solid var(--k-accent);
    outline-offset: 2px;
}

/* ---- Preview toolbar: row-count chip + WYSIWYG caption --------------------- */
.kl-rb-rowcount[b-wivlxb9fzq] {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.kl-rb-wysiwyg[b-wivlxb9fzq] {
    margin: calc(-1 * var(--k-space-2)) 0 var(--k-space-4);
    font-size: 12.5px;
    color: var(--k-text-muted);
}

/* Comb fix (B5) — the after-export confirmation by the Export button: a calm success line (accent tint) that
   fades in; the unconfirmed (browser-blocked) variant re-tints caution. Token-only; dark/outdoor ride the tokens. */
.kl-rb-export-done[b-wivlxb9fzq] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-3);
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-accent) 10%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-accent) 30%, var(--k-surface));
    color: var(--k-text);
    font-size: 13px;
    line-height: 1.5;
    animation: kl-rb-fade-in-b-wivlxb9fzq var(--k-dur-3) var(--k-ease);
}

.kl-rb-export-done .ki[b-wivlxb9fzq] {
    flex: 0 0 auto;
    font-size: 16px;
    color: var(--k-accent);
}

.kl-rb-export-done[data-pushed="false"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-caution) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 40%, var(--k-surface));
}

.kl-rb-export-done[data-pushed="false"] .ki[b-wivlxb9fzq] {
    color: var(--k-caution);
}

@media (prefers-reduced-motion: reduce) {
    .kl-rb-export-done[b-wivlxb9fzq] {
        animation: none;
    }
}

/* ---- Composed empty-draft state -------------------------------------------- */
.kl-rb-empty-draft[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-8) var(--k-space-6);
    margin-block-end: var(--k-space-4);
    border: 1px dashed color-mix(in srgb, var(--k-border) 85%, var(--k-text-muted));
    border-radius: var(--k-radius-lg);
    background: color-mix(in srgb, var(--k-surface-2) 55%, var(--k-surface));
    text-align: center;
}

.kl-rb-empty-draft-icon[b-wivlxb9fzq] {
    font-size: 34px;
    color: var(--k-text-muted);
}

.kl-rb-empty-draft-lead[b-wivlxb9fzq] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 16px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-rb-empty-draft-sub[b-wivlxb9fzq] {
    margin: 0 0 var(--k-space-2);
    max-inline-size: 42ch;
    font-size: 13px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* ---- Series summary sub-heading + diagnostics polish ------------------------ */
.kl-rb-series-title[b-wivlxb9fzq] {
    display: flex;
    align-items: baseline;
    gap: var(--k-space-2);
    margin: var(--k-space-4) 0 var(--k-space-2);
    font-family: var(--k-font-display);
    font-size: 14px;
    font-weight: 700;
    color: var(--k-text);
}

/* Definition notices read as small dismissible-looking cards (they clear themselves when the draft heals). */
.kl-rb-defdiag[b-wivlxb9fzq] {
    list-style: none;
    margin: 0 0 var(--k-space-3);
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

.kl-rb-defdiag-item[b-wivlxb9fzq] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-2);
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-info) 8%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-info) 28%, var(--k-surface));
    color: var(--k-text);
    font-size: 12.5px;
    line-height: 1.5;
}

.kl-rb-defdiag-icon[b-wivlxb9fzq] {
    flex: 0 0 auto;
    font-size: 15px;
    color: var(--k-info);
}

/* ---- Motion: the paper preview fades in on each recompile (rows-hash keyed) -- */
.kl-rb-defpreview[b-wivlxb9fzq] {
    animation: kl-rb-fade-in-b-wivlxb9fzq var(--k-dur-3) var(--k-ease);
}

/* Comb fix (11) — the Orientation toggle is VISIBLE on the paper: the shared component's own landscape rule only
   raises max-inline-size 800→1080px, which the preview pane (usually narrower than 800px is wider than… the pane
   clamps both) rendered identically. Page-scoped: PORTRAIT reads as a narrower upright sheet (a US-Letter-ish
   612:792 width cut against the pane), LANDSCAPE stretches to the full pane width — so flipping the toggle
   visibly reshapes the sheet. CSS only; the component markup already stamps .is-landscape from the layout. */
.kl-rb-defpreview[b-wivlxb9fzq]  .kl-repdoc {
    max-inline-size: 640px;
}

.kl-rb-defpreview[b-wivlxb9fzq]  .kl-repdoc.is-landscape {
    max-inline-size: 100%;
}

@keyframes kl-rb-fade-in-b-wivlxb9fzq {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .kl-rb-defpreview[b-wivlxb9fzq] {
        animation: none;
    }

    .kl-rb-step-num[b-wivlxb9fzq],
    .kl-rb-library-item[b-wivlxb9fzq],
    .kl-rb-library-act[b-wivlxb9fzq],
    .kl-rb-col-row[b-wivlxb9fzq],
    .kl-rb-sortdir-btn[b-wivlxb9fzq],
    .kl-rb-format[b-wivlxb9fzq],
    .kl-rb-table tbody tr[b-wivlxb9fzq] {
        transition: none;
    }
}

/* ---- Delete-confirm dialog --------------------------------------------------- */
.kl-rb-confirm-shell[b-wivlxb9fzq] {
    inline-size: min(26rem, calc(100vw - 2rem));
}

.kl-rb-confirm-body[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    padding: var(--k-space-6);
}

.kl-rb-confirm-copy[b-wivlxb9fzq] {
    margin: 0;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--k-text-muted);
}

/* ---- Deliberate dark + outdoor (R11 punch-list) -------------------------- */
html.dark .kl-rb-config .kl-rb-card[b-wivlxb9fzq],
html.dark .kl-rb-preview-col .kl-rb-card[b-wivlxb9fzq],
html.dark .kl-rb-dialog[b-wivlxb9fzq],
html.dark .kl-rb-export-format[b-wivlxb9fzq],
html.dark .kl-rb-sortdir[b-wivlxb9fzq] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html[data-outdoor="true"] .kl-rb-config .kl-rb-card[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-preview-col .kl-rb-card[b-wivlxb9fzq] {
    border-width: 2px;
}

html[data-outdoor="true"] .kl-rb-col-group-title[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-step-hint[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-library-meta[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-library-empty[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-wysiwyg[b-wivlxb9fzq] {
    color: var(--k-text);
}

/* Dark: the new bordered micro-surfaces keep the same deliberate border lift the cards get. */
html.dark .kl-rb-empty-draft[b-wivlxb9fzq] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

/* ---- Narrow viewport: collapse to a single column ------------------------ */
@media (max-width: 64rem) {
    .kl-rb-layout[b-wivlxb9fzq] {
        grid-template-columns: minmax(0, 1fr);
    }

    .kl-rb-config[b-wivlxb9fzq] {
        position: static;
        inset-block-start: auto;
    }

    /* W1 — single-column flow: the preview un-sticks and the card scrolls with the page again. */
    .kl-rb-preview-col[b-wivlxb9fzq] {
        position: static;
        inset-block-start: auto;
        max-block-size: none;
    }

    .kl-rb-preview-col .kl-rb-preview-card[b-wivlxb9fzq] {
        overflow-y: visible;
    }
}

/* ---- Step 5: Presentation (Wave D) ---------------------------------------- */
.kl-rb-step[data-step="5"] > label[b-wivlxb9fzq],
.kl-rb-pres-grouplabel[b-wivlxb9fzq] {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
    margin-block-start: var(--k-space-3);
}

.kl-rb-step[data-step="5"] .kf-input[b-wivlxb9fzq] {
    inline-size: 100%;
}

/* The visualization icon cards — a quiet 3-up grid; the selected card speaks the same tonal accent-wash language
   as the sort-direction segmented control (never the saturated Export teal). */
.kl-rb-vizgrid[b-wivlxb9fzq] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--k-space-2);
    margin-block-start: var(--k-space-1);
}

.kl-rb-vizcard[b-wivlxb9fzq] {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-space-1);
    padding: var(--k-space-2);
    min-block-size: var(--k-touch);
    background: transparent;
    color: var(--k-text);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), box-shadow var(--k-dur-1) var(--k-ease);
}

.kl-rb-vizcard:hover:not(:disabled)[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

.kl-rb-vizcard[aria-pressed="true"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 22%, var(--k-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-accent) 55%, var(--k-border));
    font-weight: 700;
}

.kl-rb-vizcard:disabled[b-wivlxb9fzq] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* CSS-drawn mini glyphs (no icon-font dependency): each card sketches its mark with gradients/borders. */
.kl-rb-vizcard-icon[b-wivlxb9fzq] {
    inline-size: 26px;
    block-size: 18px;
    border-radius: 2px;
    background-color: transparent;
}

.kl-rb-vizcard-icon--rb-viz-table[b-wivlxb9fzq] {
    background:
        linear-gradient(to bottom, currentColor 0 2px, transparent 2px 5px) repeat-y,
        linear-gradient(to right, transparent 0 12px, currentColor 12px 13px, transparent 13px);
    background-size: 100% 5px, 100% 100%;
    opacity: 0.75;
}

.kl-rb-vizcard-icon--rb-viz-bands[b-wivlxb9fzq] {
    background: linear-gradient(
        to bottom,
        currentColor 0 4px, transparent 4px 7px,
        color-mix(in srgb, currentColor 40%, transparent) 7px 9px, transparent 9px 11px,
        currentColor 11px 15px, transparent 15px);
    opacity: 0.75;
}

.kl-rb-vizcard-icon--rb-viz-bar[b-wivlxb9fzq] {
    background:
        linear-gradient(to right, currentColor 0 100%, transparent 0) 0 0 / 100% 3px no-repeat,
        linear-gradient(to right, currentColor 0 100%, transparent 0) 0 6px / 60% 3px no-repeat,
        linear-gradient(to right, currentColor 0 100%, transparent 0) 0 12px / 80% 3px no-repeat;
    opacity: 0.75;
}

.kl-rb-vizcard-icon--rb-viz-column[b-wivlxb9fzq] {
    background:
        linear-gradient(to top, currentColor 0 60%, transparent 60%) 0 100% / 5px 100% no-repeat,
        linear-gradient(to top, currentColor 0 100%, transparent 0) 8px 100% / 5px 100% no-repeat,
        linear-gradient(to top, currentColor 0 35%, transparent 35%) 16px 100% / 5px 100% no-repeat;
    opacity: 0.75;
}

.kl-rb-vizcard-icon--rb-viz-line[b-wivlxb9fzq] {
    background: linear-gradient(135deg, transparent 44%, currentColor 44% 56%, transparent 56%);
    opacity: 0.75;
}

.kl-rb-vizcard-icon--rb-viz-pie[b-wivlxb9fzq] {
    inline-size: 18px;
    border-radius: 50%;
    background: conic-gradient(currentColor 0 65%, color-mix(in srgb, currentColor 35%, transparent) 65%);
    opacity: 0.75;
}

/* W1 — month-bands gets its OWN glyph (it borrowed nothing before): a small top-left calendar tick over three
   band rules, distinct from grouped-bands' plain stripes. */
.kl-rb-vizcard-icon--rb-viz-monthbands[b-wivlxb9fzq] {
    background:
        linear-gradient(to right, currentColor 0 7px, transparent 7px) 0 0 / 100% 3px no-repeat,
        linear-gradient(
            to bottom,
            transparent 0 5px,
            currentColor 5px 8px, transparent 8px 10px,
            color-mix(in srgb, currentColor 45%, transparent) 10px 13px, transparent 13px 15px,
            currentColor 15px 18px, transparent 18px);
    opacity: 0.75;
}

/* W1 — the muted second line on every viz card ("what you get" in plain language). */
.kl-rb-vizcard-sub[b-wivlxb9fzq] {
    font-size: 10.5px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--k-text-muted);
    text-align: center;
}

/* =========================================================================================
   W1 ground-up UX redesign (report-builder-redesign-spec.md) — step-nav, collapsible steps,
   column chips + tools, filter chips, dataset guidance, quick starts. Tokens only; dark +
   outdoor + reduced-motion + coarse-pointer parity at the end of this section.
   ========================================================================================= */

/* ---- Step-nav strip (rb-stepnav): five jump pills under the intro --------- */
.kl-rb-stepnav[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-4);
}

.kl-rb-stepnav-pill[b-wivlxb9fzq] {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    min-block-size: 2.25rem;
    padding: 0 var(--k-space-3);
    background: var(--k-surface);
    color: var(--k-text);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-full);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}

.kl-rb-stepnav-pill:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

/* The pill's number/tick disc speaks the SAME done-language as the step cards' discs. */
.kl-rb-stepnav-num[b-wivlxb9fzq] {
    flex: 0 0 auto;
    inline-size: 20px;
    block-size: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-full);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text-muted);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.kl-rb-stepnav-num--done[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 20%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-accent) 55%, var(--k-border));
    color: var(--k-teal-700);
}

.kl-rb-stepnav-num .ki[b-wivlxb9fzq] {
    font-size: 13px;
}

/* ---- Collapsible step cards: live summary + chevron; CSS-only body hide ---- */
/* W4 polish — the summary rides the header grid's SECOND row (see .kl-rb-step-head): full width under the
   title/hint, spanning through the chevron column, single line with an honest ellipsis. */
.kl-rb-step-summary[b-wivlxb9fzq] {
    grid-column: 2 / -1;
    grid-row: 2;
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--k-text-muted);
}

.kl-rb-step-chev[b-wivlxb9fzq] {
    appearance: none;
    flex: 0 0 auto;
    align-self: center;
    inline-size: 28px;
    block-size: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius-full);
    background: transparent;
    color: var(--k-text-muted);
    font-size: 16px;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-rb-step-chev:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

/* The collapse: hide every direct child EXCEPT the header. The controls STAY IN THE DOM (display:none only) so
   every contracted data-testid/data-anchor selector keeps resolving — the zero-contract-regression rule. */
.kl-rb-step[data-open="false"] > :not(.kl-rb-step-head)[b-wivlxb9fzq] {
    display: none;
}

.kl-rb-step[data-open="false"] .kl-rb-step-head[b-wivlxb9fzq] {
    margin-block-end: 0;
}

/* Comb fix (31) — collapsed = number + title + one-line summary + chevron ONLY: the multi-line hint belongs to the
   open body's guidance, so it hides with the collapse (CSS-only; the hint stays in the DOM like every collapsed
   control). The summary is already a single ellipsized line (.kl-rb-step-summary). */
.kl-rb-step[data-open="false"] .kl-rb-step-hint[b-wivlxb9fzq] {
    display: none;
}

/* ---- Step ①: dataset guidance line -------------------------------------- */
.kl-rb-dataset-desc[b-wivlxb9fzq] {
    margin: var(--k-space-1) 0 0;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

/* ---- Step ②: ordered-column chips (rb-col-order) -------------------------- */
.kl-rb-col-order[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-1);
    margin: 0 0 var(--k-space-3);
}

.kl-rb-col-chip[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    padding: 2px 3px;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-full);
    font-size: 12.5px;
    color: var(--k-text);
}

.kl-rb-col-chip-label[b-wivlxb9fzq] {
    padding: 0 3px;
    max-inline-size: 11rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}

.kl-rb-col-chip-btn[b-wivlxb9fzq] {
    appearance: none;
    inline-size: 24px;
    block-size: 24px;
    min-block-size: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: var(--k-radius-full);
    background: transparent;
    color: var(--k-text-muted);
    font-size: 10px;
    line-height: 1;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-rb-col-chip-btn--remove[b-wivlxb9fzq] {
    font-size: 15px;
}

.kl-rb-col-chip-btn:hover:not(:disabled)[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-text) 12%, transparent);
    color: var(--k-text);
}

.kl-rb-col-chip-btn:disabled[b-wivlxb9fzq] {
    opacity: .35;
    cursor: default;
}

/* ---- Step ②: search + bulk tools over a long column list ------------------ */
.kl-rb-col-tools[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-2);
}

.kl-rb-col-search[b-wivlxb9fzq] {
    flex: 1 1 9rem;
    min-inline-size: 0;
    min-block-size: 2.25rem;
    font-size: 13px;
}

/* Comb fix (15) — the two bulk actions are ONE wrapping unit: at rail width they drop below the search TOGETHER
   (a coherent action row), never "Select all shown" beside the search with "Clear" orphaned on its own line. */
.kl-rb-col-tool-actions[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    flex: 0 0 auto;
    margin-inline-start: auto;
}

.kl-rb-col-tool[b-wivlxb9fzq] {
    appearance: none;
    flex: 0 0 auto;
    min-block-size: 2.25rem;
    padding: 0 var(--k-space-2);
    border: 0;
    border-radius: var(--k-radius-sm, var(--k-radius-md));
    background: transparent;
    color: var(--k-teal-700);
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-rb-col-tool:hover[b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 14%, var(--k-surface));
}

/* ---- Step ③: active-filter chips ------------------------------------------ */
.kl-rb-filter-chips[b-wivlxb9fzq] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-3);
}

.kl-rb-filter-chip[b-wivlxb9fzq] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}

/* ---- Step ③: the one-row date range ---------------------------------------- */
.kl-rb-daterange-label[b-wivlxb9fzq] {
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
    margin-block-start: var(--k-space-2);
}

.kl-rb-daterow[b-wivlxb9fzq] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-2);
}

.kl-rb-datefield[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

/* The per-input captions stay (they carry the honest grain wording + the label[for] wiring) but read small. */
.kl-rb-datefield label[b-wivlxb9fzq] {
    font-size: 11px;
    font-weight: 600;
    color: var(--k-text-muted);
}

/* ---- Quick starts (empty-draft state) --------------------------------------- */
.kl-rb-quickstarts[b-wivlxb9fzq] {
    inline-size: 100%;
    margin-block-start: var(--k-space-4);
    text-align: start;
}

.kl-rb-quickstarts-lead[b-wivlxb9fzq] {
    margin: 0 0 var(--k-space-2);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--k-text-muted);
    text-align: center;
}

.kl-rb-quickstart-grid[b-wivlxb9fzq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--k-space-2);
}

.kl-rb-quickstart[b-wivlxb9fzq] {
    appearance: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-block-size: var(--k-touch);
    padding: var(--k-space-3);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    font: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}

.kl-rb-quickstart:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
    border-color: color-mix(in srgb, var(--k-accent) 45%, var(--k-border));
}

.kl-rb-quickstart-name[b-wivlxb9fzq] {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-rb-quickstart-desc[b-wivlxb9fzq] {
    font-size: 12px;
    line-height: 1.4;
    color: var(--k-text-muted);
}

/* ---- W1 focus-visible: every new interactive element gets the visible ring --- */
.kl-rb-stepnav-pill:focus-visible[b-wivlxb9fzq],
.kl-rb-step-chev:focus-visible[b-wivlxb9fzq],
.kl-rb-col-chip-btn:focus-visible[b-wivlxb9fzq],
.kl-rb-col-tool:focus-visible[b-wivlxb9fzq],
.kl-rb-quickstart:focus-visible[b-wivlxb9fzq],
.kl-rb-filter-chip .kl-rb-scopechip-x:focus-visible[b-wivlxb9fzq] {
    outline: 2px solid var(--k-accent);
    outline-offset: 2px;
}

/* ---- W1 coarse-pointer touch targets: chips'/pills' buttons grow to ≥44px ---- */
@media (pointer: coarse) {
    .kl-rb-col-chip-btn[b-wivlxb9fzq],
    .kl-rb-step-chev[b-wivlxb9fzq] {
        inline-size: var(--k-touch);
        block-size: var(--k-touch);
    }

    .kl-rb-stepnav-pill[b-wivlxb9fzq],
    .kl-rb-col-tool[b-wivlxb9fzq] {
        min-block-size: var(--k-touch);
    }
}

/* ---- W1 dark parity: the new bordered micro-surfaces get the same deliberate lift the cards get ----
   W4 parity audit (live-QA polish batch): the W2 sort select + W3 schedule dialog reuse .kl-rb-select /
   .kl-rb-dialog / .kl-rb-field / .kl-rb-dialog-note, all of which already carry the sheet's dark (and outdoor)
   variants above; the W4 second-chart controls reuse .kl-rb-check-row / .kl-rb-select / .kl-rb-viz-hint (token-
   based, theme-safe). The step-nav number discs get the same dark lift here so the pills' inner border doesn't
   sink into the dark pill fill. */
html.dark .kl-rb-stepnav-pill[b-wivlxb9fzq],
html.dark .kl-rb-col-chip[b-wivlxb9fzq],
html.dark .kl-rb-quickstart[b-wivlxb9fzq] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html.dark .kl-rb-stepnav-num[b-wivlxb9fzq],
html.dark .kl-rb-step-num[b-wivlxb9fzq] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html.dark .kl-rb-stepnav-num--done[b-wivlxb9fzq] {
    color: var(--k-teal-400);
}

html.dark .kl-rb-col-tool[b-wivlxb9fzq] {
    color: var(--k-teal-400);
}

/* ---- W1 outdoor parity: guidance lines lift from muted to full text ----------
   Review fix (L6): the shared date-range group label + the chip ◀/▶/× glyphs (muted at rest) join the lift —
   outdoor sunlight readability applies to every muted control glyph, not only the captions. */
html[data-outdoor="true"] .kl-rb-dataset-desc[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-step-summary[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-vizcard-sub[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-quickstarts-lead[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-quickstart-desc[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-datefield label[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-daterange-label[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-col-chip-btn[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-scopechip-x[b-wivlxb9fzq],
html[data-outdoor="true"] .kl-rb-schedule-gate-note[b-wivlxb9fzq] {
    color: var(--k-text);
}

/* ---- W1 reduced motion: the new transitions go still too ---------------------- */
@media (prefers-reduced-motion: reduce) {
    .kl-rb-stepnav-pill[b-wivlxb9fzq],
    .kl-rb-step-chev[b-wivlxb9fzq],
    .kl-rb-col-chip-btn[b-wivlxb9fzq],
    .kl-rb-col-tool[b-wivlxb9fzq],
    .kl-rb-quickstart[b-wivlxb9fzq] {
        transition: none;
    }
}

/* =========================================================================================
   R2 — the Privacy step (⑥): the per-report redaction choice. Tokens only; dark + outdoor +
   reduced-motion + coarse-pointer parity at the end of this section. The picker list + PII
   badges reuse .kl-rb-col-list/.kl-rb-col-row/.kl-rb-badge-pii (already theme-complete).
   ========================================================================================= */

/* The plain-language state line — the card's LEAD truth, deliberately stronger than a hint. */
.kl-rb-privacy-state[b-wivlxb9fzq] {
    margin: 0 0 var(--k-space-2);
    font-size: 14px;
    font-weight: 600;
    color: var(--k-text);
}

/* The stacked master control: three full-width choice rows (long labels need the vertical
   layout), speaking the same quiet aria-pressed tonal language as .kl-rb-sortdir-btn. */
.kl-rb-redactmode[b-wivlxb9fzq] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
    margin-block-start: var(--k-space-1);
}

.kl-rb-redactmode-btn[b-wivlxb9fzq] {
    appearance: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-block-size: var(--k-touch);
    padding: var(--k-space-2) var(--k-space-3);
    background: transparent;
    color: var(--k-text);
    border: 0;
    border-block-end: 1px solid var(--k-border);
    text-align: left;
    font: inherit;
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease), color var(--k-dur-1) var(--k-ease);
}

.kl-rb-redactmode-btn:last-child[b-wivlxb9fzq] {
    border-block-end: 0;
}

.kl-rb-redactmode-btn:hover[b-wivlxb9fzq] {
    background: var(--k-surface-2);
}

.kl-rb-redactmode-btn:focus-visible[b-wivlxb9fzq] {
    outline: 2px solid var(--k-accent);
    outline-offset: -2px;
}

/* Selected = the SAME restrained tonal wash + inset accent ring the sort-direction control speaks
   (a privacy pick is load-bearing, but the saturated teal stays reserved for the sole Export primary). */
.kl-rb-redactmode-btn[aria-pressed="true"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-accent) 22%, var(--k-surface));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-accent) 55%, var(--k-border));
}

.kl-rb-redactmode-name[b-wivlxb9fzq] {
    font-size: 14px;
    font-weight: 700;
}

.kl-rb-redactmode-sub[b-wivlxb9fzq] {
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--k-text-muted);
}

/* The picker keeps a little air under the segmented control. */
.kl-rb-privacy-col-list[b-wivlxb9fzq] {
    margin-block-start: var(--k-space-2);
}

/* The paper's privacy chip: shape + text carry the state (never colour alone); the disclosing
   states get a warmer tint so an unredacted paper is visibly declared at a glance. */
.kl-rb-privacy-chip[b-wivlxb9fzq] {
    white-space: nowrap;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    color: var(--k-text);
}

.kl-rb-privacy-chip[data-state="shown"][b-wivlxb9fzq],
.kl-rb-privacy-chip[data-state="unredacted"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-critical) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 35%, var(--k-surface));
}

/* ---- R2 dark parity: the new bordered micro-surfaces get the same deliberate lift ---- */
html.dark .kl-rb-redactmode[b-wivlxb9fzq],
html.dark .kl-rb-redactmode-btn[b-wivlxb9fzq],
html.dark .kl-rb-privacy-chip[b-wivlxb9fzq] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html.dark .kl-rb-privacy-chip[data-state="shown"][b-wivlxb9fzq],
html.dark .kl-rb-privacy-chip[data-state="unredacted"][b-wivlxb9fzq] {
    background: color-mix(in srgb, var(--k-critical) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-critical) 55%, var(--k-surface));
}

/* ---- R2 outdoor parity: the muted sub-lines lift to full text (sunlight readability) ---- */
html[data-outdoor="true"] .kl-rb-redactmode-sub[b-wivlxb9fzq] {
    color: var(--k-text);
}

/* ---- R2 reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    .kl-rb-redactmode-btn[b-wivlxb9fzq] {
        transition: none;
    }
}

/* ---- R2 coarse-pointer: the choice rows already meet var(--k-touch); nothing shrinks below it ---- */
@media (pointer: coarse) {
    .kl-rb-redactmode-btn[b-wivlxb9fzq] {
        min-block-size: var(--k-touch);
    }
}
/* _content/Kanine.Web/Components/Pages/Reports.razor.rz.scp.css */
/* UI-GUAR-003 / RPT-* — Reports landing (reports.html), page-major R11 (restrained-premium). Consumes the global
   foundation vocabulary (kf-input/-label/-select/-field, kl-btn + variants, kl-chip variants, kl-count, kl-data-table,
   kl-dialog/-dialog-actions, kl-visually-hidden) from kanine-design-system.css; this scoped sheet adds ONLY the
   triple-pane shell (catalog sidebar · workspace · docked generate bar), the catalog list, the report-preview cards,
   and the picker / step-up dialog surfaces. Every colour is a --k-* token (via color-mix where a tint is needed) — no
   raw fills, no gradients, no off-token colour — so the R11 token/canvas teeth hold across light/dark/outdoor. */

.kl-reports[b-56l51hopg1] {
    display: grid;
    grid-template-columns: 20rem minmax(0, 1fr);
    gap: var(--k-space-6);
    align-items: start;
}

/* ---- Pane 1 — catalog sidebar -------------------------------------------- */
.kl-reports-catalog[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-4);
    position: sticky;
    inset-block-start: var(--k-space-4);
    max-block-size: calc(100vh - 8rem);
    overflow: hidden;
}

.kl-reports-catalog-search[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    padding-block-end: var(--k-space-3);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
}

.kl-reports-catalog-count[b-56l51hopg1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 12px;
    color: var(--k-text-muted);
}

.kl-reports-catalog-list[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
    overflow-y: auto;
    padding-inline-end: var(--k-space-1);
}

.kl-reports-catalog-group[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-reports-catalog-group-title[b-56l51hopg1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--k-text-muted);
}

.kl-reports-catalog-items[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.kl-reports-catalog-item[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: start;
    padding: var(--k-space-2) var(--k-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    color: var(--k-text);
    cursor: pointer;
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-reports-catalog-item:hover[b-56l51hopg1] {
    background: var(--k-surface-2);
}

.kl-reports-catalog-item.is-active[b-56l51hopg1] {
    background: color-mix(in srgb, var(--k-teal-500) 14%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-teal-500) 30%, transparent);
    color: var(--k-teal-700);
    font-weight: 600;
}

.kl-reports-catalog-item-label[b-56l51hopg1] {
    line-height: 1.2;
}

.kl-reports-catalog-item-legacy[b-56l51hopg1] {
    font-family: var(--k-font-mono);
    font-size: 11px;
    color: var(--k-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-reports-catalog-empty[b-56l51hopg1] {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--k-text-muted);
    padding: var(--k-space-8) var(--k-space-4);
}

/* ---- Pane 2 — workspace -------------------------------------------------- */
.kl-reports-workspace[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
    min-inline-size: 0;
}

.kl-reports-workspace-head[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

.kl-reports-title[b-56l51hopg1] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 24px;
    color: var(--k-text);
}

/* Iconned headers law (A.1): the workspace title + card heads lead with a ki glyph. */
.kl-reports-title-icon[b-56l51hopg1] {
    font-size: 20px;
    color: var(--k-accent);
    margin-inline-end: var(--k-space-1);
}

.kl-reports-card-icon[b-56l51hopg1] {
    font-size: 14px;
    color: var(--k-accent);
    margin-inline-end: var(--k-space-1);
}

/* Span-filter pair: from + to date inputs on one row. */
.kl-reports-daterange[b-56l51hopg1] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-reports-daterange .kf-input[b-56l51hopg1] {
    min-inline-size: 0;
    flex: 1 1 0;
}

.kl-reports-daterange-sep[b-56l51hopg1] {
    color: var(--k-text-muted);
    flex: none;
}

.kl-reports-legacy-id[b-56l51hopg1] {
    font-family: var(--k-font-mono);
    font-size: 14px;
    color: var(--k-text-muted);
    vertical-align: middle;
}

.kl-reports-purpose[b-56l51hopg1] {
    margin: 0;
    color: var(--k-text-muted);
    font-size: 14px;
}

.kl-reports-filters[b-56l51hopg1] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    align-items: center;
}

.kl-reports-chip[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-reports-chip-x[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: var(--k-radius-full);
    font-size: 11px;
    color: inherit;
    cursor: pointer;
    line-height: 1;
}

.kl-reports-chip-x:hover[b-56l51hopg1] {
    background: color-mix(in srgb, var(--k-text) 12%, transparent);
}

.kl-reports-emptytoggle[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    padding: var(--k-space-1) var(--k-space-3);
    background: transparent;
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-full);
    color: var(--k-text-muted);
    font-size: 13px;
    cursor: pointer;
}

.kl-reports-emptytoggle[aria-pressed="true"][b-56l51hopg1] {
    background: var(--k-surface-2);
    color: var(--k-text);
    border-style: solid;
}

/* Formal/court gating notice. Uses the flipping --k-text foreground on a caution-tinted
   --k-surface mix so it stays legible (>=4.5:1) in light / dark / outdoor — it must NOT
   borrow the kl-btn--seal button variant (fixed white-on-ink fg that washed out on the
   light/outdoor canvas: the UI-GUAR-030 re-shoot contrast finding). */
.kl-reports-banner[b-56l51hopg1] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-2);
    padding: var(--k-space-3) var(--k-space-4);
    border-radius: var(--k-radius-md);
    font-size: 14px;
    color: var(--k-text);
    background: color-mix(in srgb, var(--k-caution) 14%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-caution) 45%, var(--k-border));
    border-left: 3px solid var(--k-caution);
}

/* ---- Workspace cards ----------------------------------------------------- */
.kl-reports-card[b-56l51hopg1] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    overflow: hidden;
}

.kl-reports-card-head[b-56l51hopg1] {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--k-space-4);
    background: transparent;
    border: 0;
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    cursor: pointer;
    color: var(--k-text);
}

.kl-reports-card-title[b-56l51hopg1] {
    font-weight: 600;
}

.kl-reports-card-body[b-56l51hopg1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-6);
    padding: var(--k-space-6);
}

.kl-reports-field-wide[b-56l51hopg1] {
    grid-column: 1 / -1;
}

.kl-reports-types[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.kl-reports-check[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}

.kl-reports-pickbtn[b-56l51hopg1] {
    inline-size: 100%;
    justify-content: center;
}

.kl-reports-pick-summary[b-56l51hopg1] {
    margin: var(--k-space-2) 0 0;
    font-size: 12px;
    color: var(--k-text-muted);
}

/* ---- Report preview ------------------------------------------------------ */
.kl-reports-preview[b-56l51hopg1] {
    padding: 0;
}

.kl-reports-preview-head[b-56l51hopg1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    text-align: center;
}

.kl-reports-preview-head-mid[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-space-1);
}

.kl-reports-preview-org[b-56l51hopg1] {
    margin: 0;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--k-text);
}

.kl-reports-preview-name[b-56l51hopg1] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 18px;
    color: var(--k-text);
}

.kl-reports-pagechip[b-56l51hopg1] {
    font-family: var(--k-font-mono);
    font-size: 12px;
}

.kl-reports-page-btn[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 2.5rem;
    block-size: 2.5rem;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-full);
    color: var(--k-text-muted);
    cursor: pointer;
    font-size: 18px;
}

.kl-reports-page-btn:hover:not(:disabled)[b-56l51hopg1] {
    background: var(--k-surface-2);
    color: var(--k-teal-700);
}

.kl-reports-page-btn:disabled[b-56l51hopg1] {
    opacity: .4;
    cursor: not-allowed;
}

.kl-reports-preview-body[b-56l51hopg1] {
    padding: var(--k-space-6);
    overflow-x: auto;
}

.kl-reports-empty-body[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--k-space-2);
    padding: var(--k-space-8) var(--k-space-6);
    text-align: center;
    color: var(--k-text-muted);
}

.kl-reports-empty-title[b-56l51hopg1] {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--k-text);
}

/* ---- Companion CTAs + aid drill-in --------------------------------------- */
.kl-reports-ctas[b-56l51hopg1] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--k-space-3);
}

.kl-reports-cta[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    padding: var(--k-space-4) var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    text-decoration: none;
    color: var(--k-text);
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-reports-cta:hover[b-56l51hopg1] {
    background: var(--k-surface-2);
}

.kl-reports-cta-title[b-56l51hopg1] {
    font-weight: 600;
    font-size: 15px;
}

.kl-reports-cta-sub[b-56l51hopg1] {
    font-size: 13px;
    color: var(--k-text-muted);
}

.kl-reports-aidlink-row[b-56l51hopg1] {
    display: flex;
}

.kl-reports-aidlink[b-56l51hopg1] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    color: var(--k-teal-700);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
}

.kl-reports-aidlink:hover[b-56l51hopg1] {
    color: var(--k-teal-500);
    text-decoration: underline;
}

/* ---- Pane 3 — docked generate bar ---------------------------------------- */
.kl-reports-generatebar[b-56l51hopg1] {
    position: sticky;
    inset-block-end: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    padding: var(--k-space-4);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-2);
    z-index: 10;
}

.kl-reports-formats[b-56l51hopg1] {
    display: inline-flex;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
}

.kl-reports-format[b-56l51hopg1] {
    padding: var(--k-space-2) var(--k-space-4);
    background: var(--k-surface);
    border: 0;
    border-inline-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    color: var(--k-text-muted);
    font-weight: 600;
    cursor: pointer;
}

.kl-reports-format:last-child[b-56l51hopg1] {
    border-inline-end: 0;
}

.kl-reports-format.is-active[b-56l51hopg1] {
    background: var(--k-header-bg);
    color: var(--k-header-text);
}

/* The bottom margin is zeroed DELIBERATELY, and it is the whole fix for a visible misalignment (owner review
   2026-07-28: "the pdf,xlsx,csv,json component and 'Internal (no redaction)' component and the Generate report
   button are not vertically aligned/centered with each other").
   .kf-field is a FORM-COLUMN primitive — it carries `margin-block-end: var(--k-space-4)` so stacked fields space
   themselves. Here it is a flex ITEM in a bar that centres its children, and `align-items: center` centres the
   MARGIN box, not the border box. A 16px bottom margin therefore lifts the select ~8px above the format buttons
   and the generate button, which is exactly the offset the film shows. Setting the margin to 0 is what makes the
   three controls share one centre line; changing align-items would not, because the margin would still be there. */
.kl-reports-redaction[b-56l51hopg1] {
    flex: 1 1 auto;
    min-inline-size: 12rem;
    max-inline-size: 18rem;
    margin-block-end: 0;
}

.kl-reports-generate[b-56l51hopg1] {
    flex: 0 0 auto;
}

/* ---- Dialogs (picker + step-up) ------------------------------------------- */
/* UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim + centering. This only sizes the
   card, lays out its head/body, and carries its surface/elevation. */
.kl-reports-dialog[b-56l51hopg1] {
    inline-size: min(44rem, calc(100vw - 2rem));
    max-block-size: calc(100vh - 4rem);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
    overflow-y: auto;
}

.kl-reports-dialog-head[b-56l51hopg1] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-reports-dialog-head h2[b-56l51hopg1] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 18px;
    color: var(--k-text);
}

.kl-reports-dialog-body[b-56l51hopg1] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    font-size: 14px;
    color: var(--k-text);
}

.kl-reports-dialog-actions[b-56l51hopg1] {
    margin-block-start: var(--k-space-2);
}

.kl-reports-pickall[b-56l51hopg1] {
    font-weight: 500;
}

.kl-reports-pick-list[b-56l51hopg1] {
    list-style: none;
    margin: 0;
    padding: 0;
    max-block-size: 18rem;
    overflow-y: auto;
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
}

.kl-reports-pick-row[b-56l51hopg1] {
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 50%, transparent);
}

.kl-reports-pick-row:last-child[b-56l51hopg1] {
    border-block-end: 0;
}

.kl-reports-pick-row .kl-reports-check[b-56l51hopg1] {
    inline-size: 100%;
    padding: var(--k-space-3);
}

.kl-reports-pick-id[b-56l51hopg1] {
    font-family: var(--k-font-mono);
    font-size: 13px;
    color: var(--k-teal-700);
}

.kl-reports-pick-meta[b-56l51hopg1] {
    font-size: 12px;
    color: var(--k-text-muted);
}

.kl-reports-pick-empty[b-56l51hopg1] {
    text-align: center;
    color: var(--k-text-muted);
    font-size: 13px;
    padding: var(--k-space-4) 0;
}

/* ---- Deliberate dark + outdoor (R11 punch-list) -------------------------- */
html.dark .kl-reports-catalog[b-56l51hopg1],
html.dark .kl-reports-card[b-56l51hopg1],
html.dark .kl-reports-generatebar[b-56l51hopg1],
html.dark .kl-reports-dialog[b-56l51hopg1] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html[data-outdoor="true"] .kl-reports-catalog[b-56l51hopg1],
html[data-outdoor="true"] .kl-reports-card[b-56l51hopg1],
html[data-outdoor="true"] .kl-reports-generatebar[b-56l51hopg1] {
    border-width: 2px;
}

html[data-outdoor="true"] .kl-reports-title[b-56l51hopg1],
html[data-outdoor="true"] .kl-reports-preview-name[b-56l51hopg1] {
    font-weight: 800;
}

/* ---- Narrow viewport: collapse to a single column ------------------------ */
@media (max-width: 64rem) {
    .kl-reports[b-56l51hopg1] {
        grid-template-columns: minmax(0, 1fr);
    }

    .kl-reports-catalog[b-56l51hopg1] {
        position: static;
        max-block-size: none;
    }

    .kl-reports-card-body[b-56l51hopg1],
    .kl-reports-ctas[b-56l51hopg1] {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- SEC-SIG-001 step-up: the inline server-verified rejection ----------- */
.kl-reports-stepup-error[b-56l51hopg1] {
    margin-block: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border: 1px solid #b3261e;
    border-radius: 0.375rem;
    color: #b3261e;
    background: color-mix(in srgb, #b3261e 8%, transparent);
    font-size: 0.875rem;
}
/* _content/Kanine.Web/Components/Pages/ScheduledReports.razor.rz.scp.css */
/* RPT-024 — Scheduled reports (scheduled-reports.html), page-major R11 (restrained-premium). Consumes the global
   cross-cutting vocabulary (kl-page, kl-section-head, kl-count, kl-head-actions, kl-banner, kl-chip, kl-btn,
   kl-field, kl-input, kl-readonly-note) from kanine-design-system.css; this scoped sheet adds ONLY the definitions
   TABLE rhythm, the per-row overflow MENU, the create SHEET, and the degraded-delivery affordance. Every colour is a
   --k-* token via color-mix (no raw fills, no gradients) so the R11 token/canvas teeth hold. */

.kl-scheduled-reports[b-4h3aevwg1p] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
}

.kl-sr-section[b-4h3aevwg1p] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

/* ---- Page head (title + last-evaluated stamp + primary action) ----------- */
.kl-sr-pagehead[b-4h3aevwg1p] {
    align-items: flex-start;
    gap: var(--k-space-4);
}

.kl-sr-pagehead-text[b-4h3aevwg1p] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

/* The primary action(s) — icon + label, ≥48px touch target (kit), flat teal fill (no gradient). */
.kl-sr-new[b-4h3aevwg1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    min-block-size: 2.75rem;
}

.kl-sr-new .ki[b-4h3aevwg1p] {
    font-size: 20px;
}

/* ---- Sub-section heads (icon + label) ------------------------------------ */
.kl-sr-subhead h2[b-4h3aevwg1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
}

.kl-sr-subhead-icon[b-4h3aevwg1p] {
    font-size: 20px;
    color: var(--k-teal-700);
}

/* ---- Owner cell ---------------------------------------------------------- */
.kl-sr-owner[b-4h3aevwg1p] {
    color: var(--k-text);
}

.kl-sr-sr-only[b-4h3aevwg1p] {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- Definitions table ----------------------------------------------------
   Base skin now comes from the canonical .kl-tablewrap > .kl-data-table pair
   (card wrapper + internal h-scroll + sticky uppercase thead); the kl-sr-*
   rules below stay as the page's ADDITIVE skin only. */
.kl-sr-row > td[b-4h3aevwg1p] {
    padding: var(--k-space-3) var(--k-space-4);
    border-block-end: 1px solid color-mix(in srgb, var(--k-border) 60%, transparent);
    vertical-align: top;
    font-size: 14px;
    color: var(--k-text);
}

.kl-sr-row[b-4h3aevwg1p] {
    transition: background var(--k-dur-1) var(--k-ease);
}

.kl-sr-row:hover[b-4h3aevwg1p] {
    background: var(--k-surface-2);
}

/* A SUSPENDED row reads as an attention state (owner lost scope) — a faint critical wash + a left rule, never
   colour alone (the Status chip carries the word). */
.kl-sr-row[data-status="SUSPENDED"] > td:first-child[b-4h3aevwg1p] {
    box-shadow: inset 3px 0 0 0 color-mix(in srgb, var(--k-critical) 55%, transparent);
}

.kl-sr-row[data-status="SUSPENDED"]:hover[b-4h3aevwg1p] {
    background: color-mix(in srgb, var(--k-critical) 7%, var(--k-surface));
}

.kl-sr-report-title[b-4h3aevwg1p] {
    font-weight: 600;
    color: var(--k-text);
}

.kl-sr-report-id[b-4h3aevwg1p],
.kl-sr-row td[data-testid="row-formats"][b-4h3aevwg1p],
.kl-sr-row td[data-testid="row-next-run"][b-4h3aevwg1p] {
    font-family: var(--k-font-mono);
    font-size: 12px;
    color: var(--k-text-muted);
    font-variant-numeric: tabular-nums;
}

/* The backing-report reference is ONE quiet line, never a three-line uuid wall: a long reference ellipsizes
   (the full value rides the title tooltip + data-report-ref), so the REPORT column can no longer force the
   table wide enough to shove the row kebab behind the wrapper's horizontal scrollbar. */
.kl-sr-report-id[b-4h3aevwg1p] {
    max-inline-size: 26ch;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Keep the row kebab reachable even when the table DOES overflow the .kl-tablewrap h-scroll (many columns on a
   narrow window): the actions cell pins to the inline end above the scrolled columns, carrying an opaque row
   background for every row state so nothing bleeds through beneath it. */
.kl-sr-row > td:last-child[b-4h3aevwg1p] {
    position: sticky;
    inset-inline-end: 0;
    z-index: 1;
    background: var(--k-surface);
}

.kl-sr-row:hover > td:last-child[b-4h3aevwg1p] {
    background: var(--k-surface-2);
}

.kl-sr-row[data-status="SUSPENDED"]:hover > td:last-child[b-4h3aevwg1p] {
    background: color-mix(in srgb, var(--k-critical) 7%, var(--k-surface));
}

/* A row whose overflow menu is OPEN floats its sticky actions cell above the sibling rows' sticky cells, so the
   dropdown never paints beneath a later row's pinned cell. */
.kl-sr-row > td:last-child:has(.kl-sr-menu-list)[b-4h3aevwg1p] {
    z-index: 60;
}

/* ---- Per-row overflow menu ----------------------------------------------- */
.kl-sr-menu[b-4h3aevwg1p] {
    position: relative;
    display: inline-block;
}

.kl-sr-overflow[b-4h3aevwg1p] {
    min-inline-size: var(--k-space-8);
    padding-inline: var(--k-space-2);
    line-height: 1;
}

.kl-sr-menu-list[b-4h3aevwg1p] {
    position: absolute;
    inset-inline-end: 0;
    inset-block-start: calc(100% + var(--k-space-1));
    z-index: 50;
    min-inline-size: 14rem;
    display: flex;
    flex-direction: column;
    padding: var(--k-space-1);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    box-shadow: var(--k-elev-2);
}

.kl-sr-menu-item[b-4h3aevwg1p] {
    text-align: start;
    padding: var(--k-space-2) var(--k-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--k-radius-sm);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}

.kl-sr-menu-item:hover:not(:disabled)[b-4h3aevwg1p] {
    background: var(--k-surface-2);
}

.kl-sr-menu-item:disabled[b-4h3aevwg1p] {
    color: var(--k-text-muted);
    cursor: not-allowed;
    opacity: .65;
}

.kl-sr-menu-item--danger[b-4h3aevwg1p] {
    color: var(--k-critical);
}

.kl-sr-menu-item--danger:hover:not(:disabled)[b-4h3aevwg1p] {
    background: color-mix(in srgb, var(--k-critical) 10%, var(--k-surface));
}

/* ---- Empty state (titled, composed — never an emoji void) ---------------- */
.kl-sr-empty[b-4h3aevwg1p] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-3);
    padding: var(--k-space-12) var(--k-space-6);
    text-align: center;
    background: var(--k-surface);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-lg);
    color: var(--k-text-muted);
}

.kl-sr-empty-icon[b-4h3aevwg1p] {
    font-size: 40px;
    color: var(--k-teal-700);
    /* the icon primitive clips to 1em; widen the box so the 40px glyph is not cropped */
    inline-size: 40px;
    block-size: 40px;
    overflow: visible;
}

.kl-sr-empty-title[b-4h3aevwg1p] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--k-text);
}

.kl-sr-empty-body[b-4h3aevwg1p] {
    margin: 0;
    max-inline-size: 38rem;
    font-size: 14px;
    line-height: 1.5;
    color: var(--k-text-muted);
}

.kl-sr-empty-cta[b-4h3aevwg1p] {
    margin-block-start: var(--k-space-2);
}

/* ---- Run-history deferred card (intentional, not broken) ----------------- */
.kl-sr-runhistory[b-4h3aevwg1p] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    padding: var(--k-space-4) var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
}

.kl-sr-runhistory-icon[b-4h3aevwg1p] {
    font-size: 22px;
    color: var(--k-teal-700);
    flex: 0 0 auto;
    margin-block-start: 2px;
}

.kl-sr-runhistory-text[b-4h3aevwg1p] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-sr-runhistory-title[b-4h3aevwg1p] {
    margin: 0;
    font-weight: 600;
    color: var(--k-text);
}

.kl-sr-runhistory .kl-readonly-note[b-4h3aevwg1p] {
    margin: 0;
}

.kl-sr-runhistory-link[b-4h3aevwg1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    align-self: flex-start;
    color: var(--k-teal-700);
    font-weight: 500;
    text-decoration: none;
}

.kl-sr-runhistory-link:hover[b-4h3aevwg1p] {
    color: var(--k-teal-500);
    text-decoration: underline;
}

.kl-sr-runhistory-link .ki[b-4h3aevwg1p] {
    font-size: 16px;
}

/* ---- Create / edit sheet ------------------------------------------------- */
/* UI-GUAR-033: the .kl-sr-sheet is no longer the overlay — <KlOverlay> now supplies the single
   full-viewport opaque navy scrim + centering + ESC/outside-click. This element is now just the
   role="dialog" PANEL wrapper: a content-sized flex box (NOT full-viewport, NOT display:contents —
   it must own a real bounding box so it can be centered + measured) that holds the .kl-sr-form card.
   RETIRED the old defects: position:fixed/inset:0 overlay placement, align-items:flex-start
   (top-pinned, not centered), and background:color-mix(--k-text 38%) (a mode-flipping scrim that
   washed out / went light in dark). */
.kl-sr-sheet[b-4h3aevwg1p] {
    display: flex;
    inline-size: min(46rem, 100%);
    max-block-size: min(90vh, 52rem);
}

.kl-sr-form[b-4h3aevwg1p] {
    inline-size: min(46rem, 100%);
    max-block-size: min(90vh, 52rem);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-3);
}

.kl-fieldset[b-4h3aevwg1p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    margin: 0;
    padding: var(--k-space-3);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
}

.kl-fieldset legend[b-4h3aevwg1p] {
    padding-inline: var(--k-space-2);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--k-text-muted);
}

.kl-radio[b-4h3aevwg1p],
.kl-check[b-4h3aevwg1p] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-2);
    font-size: 14px;
    color: var(--k-text);
}

.kl-check--disabled[b-4h3aevwg1p] {
    color: var(--k-text-muted);
    opacity: .7;
}

.kl-sr-degraded[b-4h3aevwg1p] {
    font-family: var(--k-font-mono);
    font-size: 12px;
    color: var(--k-text-muted);
}

.kl-sr-fixed[b-4h3aevwg1p] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    inline-size: 100%;
}

.kl-sr-error[b-4h3aevwg1p] {
    margin: 0;
    color: var(--k-critical);
    font-size: 13px;
}

.kl-sr-actions[b-4h3aevwg1p] {
    display: flex;
    justify-content: flex-end;
    gap: var(--k-space-2);
}

/* ---- Deliberate dark + outdoor (R11 punch-list) -------------------------- */
html.dark .kl-sr-form[b-4h3aevwg1p] {
    border-color: color-mix(in srgb, var(--k-border) 72%, var(--k-text-muted));
}

html[data-outdoor="true"] .kl-sr-form[b-4h3aevwg1p] {
    border-width: 2px;
}

html[data-outdoor="true"] .kl-sr-report-title[b-4h3aevwg1p] {
    font-weight: 800;
}
/* _content/Kanine.Web/Components/Pages/SettingsHub.razor.rz.scp.css */
/* Agency settings guide (owner-directed 2026-07-18) — the durable configuration hub the setup checklist
   graduates into. Quiet link-card rows: the page is navigation, so nothing competes with the destinations. */

.kl-hub-intro[b-rkv7r61itx] { max-width: 70ch; margin-block-end: var(--k-space-7); }

.kl-hub-group[b-rkv7r61itx] { margin-block-end: var(--k-space-7); }

.kl-hub-list[b-rkv7r61itx] { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--k-space-3); }

.kl-hub-link[b-rkv7r61itx] {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--k-space-4) var(--k-space-5);
  background: var(--k-surface-2); border: 1px solid var(--k-border); border-radius: var(--k-radius-md);
  color: inherit; text-decoration: none;
  transition: border-color .12s, background-color .12s;
}
.kl-hub-link:hover[b-rkv7r61itx] { border-color: var(--k-accent); background: color-mix(in oklab, var(--k-accent) 6%, var(--k-surface-2)); }
.kl-hub-link:focus-visible[b-rkv7r61itx] { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.kl-hub-link:hover .kl-hub-link-title[b-rkv7r61itx] { color: var(--k-accent); }

.kl-hub-link-title[b-rkv7r61itx] { font-size: 14px; font-weight: 600; color: var(--k-text); transition: color .12s; }
.kl-hub-link-why[b-rkv7r61itx] { font-size: 12.5px; line-height: 1.5; color: var(--k-text-muted); }
/* _content/Kanine.Web/Components/Pages/SignaturePad.razor.rz.scp.css */
/* REC-005 / SEC-SIG-001 — signature-pad sign-to-seal surface, page-major R11 (restrained-premium).
   Consumes the global cross-cutting vocabulary (kl-page, kl-card, kl-btn, kl-btn--seal, kl-btn--ghost, kl-chip,
   kl-section-head, kl-mono) from kanine-design-system.css; this scoped sheet adds ONLY the pad's canvas surface, the
   accepted (sealed) card rhythm, and the single CALM sign-to-seal confirm transition. Every colour is a --k-* token
   (no raw fills, no gradients) so the R11 token/canvas objective teeth hold; the global prefers-reduced-motion guard
   neutralizes the seal animation. Scoped (b-hash) selectors target this page's own elements only. */

.kl-sign[b-zlymn7f07v] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
}

.kl-sign-head[b-zlymn7f07v] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-sign-title[b-zlymn7f07v] {
    font-family: var(--k-font-display);
    font-size: 22px;
    font-weight: 800;
    margin: 0;
    color: var(--k-text);
}

.kl-sign-desc[b-zlymn7f07v] {
    margin: 0;
    color: var(--k-text-muted);
}

.kl-sign-ref[b-zlymn7f07v] {
    padding: var(--k-space-1) var(--k-space-2);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface-2);
    color: var(--k-text);
}

/* ---- Active capture surface --------------------------------------------- */
.kl-sign-pad[b-zlymn7f07v] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    padding: var(--k-space-4);
}

.kl-sign-canvas-wrap[b-zlymn7f07v] {
    position: relative;
    inline-size: 100%;
    block-size: 16rem;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    overflow: hidden;
    cursor: crosshair;
    transition: border-color 180ms ease, background 180ms ease;
}

.kl-sign-canvas-wrap.is-drawn[b-zlymn7f07v] {
    border-color: var(--k-accent);
    background: color-mix(in srgb, var(--k-teal-500) 6%, var(--k-surface));
}

.kl-sign-canvas[b-zlymn7f07v] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    display: block;
    /* The pen draws here (kanine-signature.js): no scroll/zoom gestures while signing, and the stroke INK is this
       element's computed color — the flipping text token, so strokes stay legible in light / dark / outdoor. */
    touch-action: none;
    color: var(--k-text);
}

.kl-sign-guide[b-zlymn7f07v],
.kl-sign-drawn[b-zlymn7f07v] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-2);
    pointer-events: none;
    color: var(--k-text-muted);
}

.kl-sign-guide[b-zlymn7f07v] {
    opacity: 0.55;
}

.kl-sign-drawn[b-zlymn7f07v] {
    color: var(--k-accent);
    font-size: 40px;
    /* The captured-mark fades in calmly (no bounce) — a precise "stroke registered" cue. */
    animation: kl-sign-mark-in-b-zlymn7f07v 220ms ease both;
}

.kl-sign-baseline[b-zlymn7f07v] {
    position: absolute;
    inset-block-end: 3rem;
    inset-inline: var(--k-space-8);
    border-block-end: 1px dashed var(--k-border);
    pointer-events: none;
}

/* The deterministic capture trigger (a stroke proxy; the real stroke is drawn on the canvas). */
.kl-sign-capture[b-zlymn7f07v] {
    position: absolute;
    inset-block-end: var(--k-space-2);
    inset-inline-start: 50%;
    transform: translateX(-50%);
    padding: var(--k-space-1) var(--k-space-3);
    font-size: 12px;
    color: var(--k-text-muted);
    background: var(--k-surface);
    border: 1px dashed var(--k-border);
    border-radius: var(--k-radius-full);
    cursor: pointer;
}

.kl-sign-capture:hover[b-zlymn7f07v] {
    color: var(--k-accent);
    border-color: var(--k-accent);
}

.kl-sign-actions[b-zlymn7f07v] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-4);
    padding-block-start: var(--k-space-2);
    border-block-start: 1px solid var(--k-border);
}

/* ---- Step-up surface ----------------------------------------------------- */
/* UI-GUAR-033: the step-up is a layout-TRANSPARENT marker (display:contents) — each face supplies its OWN
   .kl-modal-overlay scrim (the self-scrimming SignatureStepUpDialog for the credential face; an inline overlay for
   the 2FA face), and those scrims are position:fixed full-viewport. So this wrapper must NOT insert a box (which
   would sit in normal flow and offset/clip the fixed overlay); display:contents makes it vanish from layout while
   keeping the data-testid="sign-stepup" hook the tests assert. */
.kl-sign-stepup[b-zlymn7f07v] {
    display: contents;
}

.kl-sign-2fa[b-zlymn7f07v] {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-1);
    background: none;
    border: 0;
    padding: 0;
    font-size: 13px;
    color: var(--k-accent);
    cursor: pointer;
}

.kl-sign-2fa:hover[b-zlymn7f07v] {
    text-decoration: underline;
}

/* The honest-defer note on the 2FA face (no second factor enrolled on this build). */
.kl-sign-2fa-note[b-zlymn7f07v] {
    margin: var(--k-space-3) 0;
    color: var(--k-text-muted);
    font-size: 13px;
    line-height: 1.5;
}

.kl-sign-failure[b-zlymn7f07v] {
    padding: var(--k-space-3) var(--k-space-4);
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-critical) 10%, var(--k-surface));
    border: 1px solid color-mix(in srgb, var(--k-critical) 40%, transparent);
    color: var(--k-text);
}

.kl-sign-redo[b-zlymn7f07v] {
    align-self: flex-start;
}

/* ---- COMMITTED accepted (sealed) state ----------------------------------- */
.kl-sign-accepted[b-zlymn7f07v] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-4);
    padding: var(--k-space-6);
    border: 1px solid color-mix(in srgb, var(--k-success) 35%, var(--k-border));
}

.kl-sign-accepted-icon[b-zlymn7f07v] {
    flex-shrink: 0;
    inline-size: 3rem;
    block-size: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--k-radius-full);
    background: color-mix(in srgb, var(--k-success) 14%, transparent);
    color: var(--k-success);
}

.kl-sign-accepted-icon .ki[b-zlymn7f07v] {
    font-size: 28px;
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Record-sealed badge: the brand "officially sealed" animation glows on a navy chip. The black gif background
   drops out via screen blend, so it reads in every theme; reduced-motion users see the static seal mark instead. */
.kl-sign-accepted-icon--seal[b-zlymn7f07v] {
    inline-size: 4.5rem;
    block-size: 4.5rem;
    border-radius: var(--k-radius-lg);
    background: var(--k-ink-900);
    overflow: hidden;
}
.kl-sign-accepted-icon--seal .kl-seal-anim[b-zlymn7f07v] {
    inline-size: 4rem;
    block-size: 4rem;
    object-fit: contain;
    mix-blend-mode: screen;
}
.kl-sign-accepted-icon--seal .kl-seal-static[b-zlymn7f07v] {
    display: none;
    color: var(--k-teal-400);
}
/* LOAD-FAILURE fallback — a separate condition from the motion preference below. kanine-shell-nav.js stamps
   data-kanine-img-failed on any [data-kanine-img-fallback] <img> whose asset never arrived, so a 404 reveals the
   static seal glyph instead of leaving an empty navy box that reads as a deliberate design choice. */
.kl-sign-accepted-icon--seal .kl-seal-anim[data-kanine-img-failed][b-zlymn7f07v] { display: none; }
.kl-sign-accepted-icon--seal .kl-seal-anim[data-kanine-img-failed] ~ .kl-seal-static[b-zlymn7f07v] { display: inline-flex; }
@media (prefers-reduced-motion: reduce) {
    .kl-sign-accepted-icon--seal .kl-seal-anim[b-zlymn7f07v] { display: none; }
    .kl-sign-accepted-icon--seal .kl-seal-static[b-zlymn7f07v] { display: inline-flex; }
}

.kl-sign-accepted-body[b-zlymn7f07v] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    min-inline-size: 0;
}

.kl-sign-accepted-title[b-zlymn7f07v] {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0 0 var(--k-space-1);
    color: var(--k-text);
}

.kl-sign-accepted-line[b-zlymn7f07v] {
    margin: 0;
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    font-size: 13px;
    color: var(--k-text-muted);
    flex-wrap: wrap;
}

.kl-sign-accepted-status[b-zlymn7f07v] {
    margin: var(--k-space-2) 0 0;
    font-size: 13px;
    color: var(--k-text-muted);
}

.kl-chip-ico[b-zlymn7f07v] {
    font-size: 16px;
}

.kl-muted[b-zlymn7f07v] {
    color: var(--k-text-muted);
}

/* The whole sealed card eases in once on commit: a calm, precise seal transition (no gimmick/bounce). */
.kl-seal-in[b-zlymn7f07v] {
    animation: kl-seal-in-b-zlymn7f07v 320ms cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

@keyframes kl-seal-in-b-zlymn7f07v {
    from {
        opacity: 0;
        transform: translateY(8px) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes kl-sign-mark-in-b-zlymn7f07v {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* _content/Kanine.Web/Components/Pages/Templates.razor.rz.scp.css */
/* =============================================================================
   Templates (/templates) — page-scoped R11 refinement (UI-GUAR-011).
   -----------------------------------------------------------------------------
   Consumes the foundation primitives (kl-page, kl-section-head, kl-count,
   kl-head-actions, kl-btn--*, kf-field/kf-input/kf-textarea, kl-chip + variants,
   kl-dialog, States kit). This file adds ONLY what the two-pane Templates surface
   needs beyond the system: the responsive list/editor split, the elevated list
   card with a teal-fill SELECTED row, chip/name presentation, and the deliberate
   dark/outdoor edges. On-token colour only (var(--k-*)); no gradients, no body-bg
   change — the central R11 token/canvas teeth stay green. Blazor scopes every
   selector to this component, so the class names need not be globally unique.
   ========================================================================== */

/* ---- Two-pane workspace: list (left) + editor (right). Collapses to one column
   on a narrow viewport so neither pane is squeezed below a usable measure. ---- */
.kl-tpl-workspace[b-leafuad94h] {
    display: grid;
    grid-template-columns: minmax(16rem, 22rem) minmax(0, 1fr);
    gap: var(--k-space-6);
    align-items: start;
}

@media (max-width: 56rem) {
    .kl-tpl-workspace[b-leafuad94h] {
        grid-template-columns: 1fr;
    }
}

/* ---- PHONE: the left column collapsed to one row (owner request 2026-07-25) ------------------------------
   Hidden by default so DESKTOP AND TABLET ARE UNTOUCHED — the list card remains the navigation there. It is only
   turned on inside the max-width:640px block at the foot of this file, where it replaces the card one-for-one.
   A display:none element is not a grid item at all, so it creates no track and no gap and the wide two-pane
   layout is byte-identical to before.
   NOT lifted into the shared design system: the only genuinely shared part of this pattern is the full-width
   native select, which IS the shared .kf-select primitive both this page and Lookups already use. What is left
   is four layout declarations bound to THIS page's container and THIS page's loader — no shared declaration is
   duplicated, and no colour is declared here at all. */
.kl-tpl-listpicker[b-leafuad94h] { display: none; }

.kl-tpl-listpicker-label[b-leafuad94h] {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-tpl-listpicker-select[b-leafuad94h] {
    inline-size: 100%;
    max-inline-size: 100%;
    min-inline-size: 0;
    box-sizing: border-box;
    /* A6: the picker is the page's primary navigation on a phone — it keeps the full touch floor. */
    min-block-size: var(--k-touch);
}

/* ---- LEFT: the available-template list card. ------------------------------- */
.kl-tpl-listcard[b-leafuad94h] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-4);
    /* The list scrolls within the card on tall sets without pushing the editor down. */
    max-block-size: calc(100vh - 12rem);
    overflow-y: auto;
    /* The selected-row teal fill must not bleed past the card's rounded corners. */
    overflow-x: hidden;
}

.kl-tpl-listcard-title[b-leafuad94h] {
    font-family: var(--k-font-display);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
    margin: var(--k-space-1) var(--k-space-2) var(--k-space-3);
}

.kl-tpl-rows[b-leafuad94h] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}

.kl-tpl-row[b-leafuad94h] {
    border-radius: var(--k-radius-md);
}

/* The whole row is a tap target (≥48px via the stacked content + padding). It reads
   as a quiet list item until hovered/selected — restrained, not a button slab. */
.kl-tpl-select[b-leafuad94h] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
    inline-size: 100%;
    min-block-size: var(--k-touch);
    padding: var(--k-space-2) var(--k-space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--k-radius-md);
    text-align: start;
    cursor: pointer;
    color: var(--k-text);
    transition: background var(--k-dur-1) var(--k-ease), border-color var(--k-dur-1) var(--k-ease);
}

.kl-tpl-select:hover[b-leafuad94h] {
    background: var(--k-surface-2);
}

/* SELECTED row: a calm teal-tint fill + a teal edge (navy-ink text stays legible in
   every mode). This is the page's clearest "this is the open template" signal. */
.kl-tpl-row[data-selected="true"] > .kl-tpl-select[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-500) 16%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-teal-500) 55%, transparent);
}

.kl-tpl-row[data-selected="true"] > .kl-tpl-select:hover[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-500) 22%, var(--k-surface));
}

.kl-tpl-row-main[b-leafuad94h] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    min-inline-size: 0;
}

.kl-tpl-row-name[b-leafuad94h] {
    font-weight: 700;
    font-size: 15px;
    color: var(--k-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-tpl-row-meta[b-leafuad94h] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    min-inline-size: 0;
}

.kl-tpl-row-owner[b-leafuad94h] {
    font-size: 12px;
    color: var(--k-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kl-tpl-default[b-leafuad94h] {
    flex: 0 0 auto;
}

/* The record-type chip is a neutral category token (distinct from the status colours). */
.kl-tpl-typechip[b-leafuad94h] {
    flex: 0 0 auto;
    background: var(--k-surface-2);
    border-color: var(--k-border);
    color: var(--k-text-muted);
    text-transform: none;
}

/* ---- RIGHT: the editor card. ---------------------------------------------- */
.kl-tpl-editorcard[b-leafuad94h] {
    background: var(--k-surface);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-lg);
    box-shadow: var(--k-elev-1);
    padding: var(--k-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    min-inline-size: 0;
}

.kl-tpl-editor-head[b-leafuad94h] {
    display: flex;
    align-items: flex-end;
    gap: var(--k-space-3);
}

.kl-tpl-namefield[b-leafuad94h] {
    flex: 1 1 auto;
    margin-block-end: 0;
    min-inline-size: 0;
}

/* The overflow-menu anchor: position:relative so the foundation's position:absolute
   menu hangs off it. The card has NO overflow:hidden, so the menu is clip-clean. */
.kl-tpl-more[b-leafuad94h] {
    position: relative;
    flex: 0 0 auto;
}

.kl-tpl-more-menu[b-leafuad94h] {
    inset-block-start: calc(var(--k-touch) + var(--k-space-1));
    inset-inline-end: 0;
}

.kl-tpl-menu-item[b-leafuad94h] {
    display: flex;
    align-items: center;
    inline-size: 100%;
    min-block-size: 40px;
    padding: 0 var(--k-space-3);
    background: transparent;
    border: 0;
    border-radius: var(--k-radius-sm);
    font: inherit;
    font-size: 14px;
    color: var(--k-text);
    text-align: start;
    cursor: pointer;
}

.kl-tpl-menu-item:hover:not(:disabled)[b-leafuad94h] {
    background: var(--k-surface-2);
}

.kl-tpl-menu-item:disabled[b-leafuad94h] {
    color: var(--k-text-muted);
    cursor: not-allowed;
}

.kl-tpl-menu-delete[b-leafuad94h] {
    color: var(--k-critical);
}

.kl-tpl-menu-delete:hover[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-critical) 10%, transparent);
}

/* Provenance line under the name — human owner + type, never a raw id. */
.kl-tpl-provenance[b-leafuad94h] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    margin: 0;
    font-size: 13px;
    color: var(--k-text-muted);
}

.kl-tpl-provenance-owner[b-leafuad94h] {
    min-inline-size: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Primary actions row (Use / Save-as / Set-default). */
.kl-tpl-editor-actions[b-leafuad94h] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    padding-block-end: var(--k-space-4);
    border-block-end: 1px solid var(--k-border);
}

.kl-tpl-editor-body[b-leafuad94h] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
}

/* ---- Chip sets (terrain / distractions). ---------------------------------- */
.kl-tpl-chipset[b-leafuad94h] {
    margin: 0;
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.kl-tpl-chipset-legend[b-leafuad94h] {
    padding: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-text-muted);
    letter-spacing: .01em;
    margin-block-end: var(--k-space-2);
}

.kl-tpl-chips[b-leafuad94h] {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    margin: 0 0 var(--k-space-2);
    padding: 0;
}

/* A prefill chip is a calm neutral token (the names, never the ids). */
.kl-tpl-chip[b-leafuad94h] {
    background: var(--k-surface-2);
    border-color: var(--k-border);
    color: var(--k-text);
    text-transform: none;
    font-weight: 600;
}

/* The EMPTY chip (owner 2026-07-25: "the none set should be a badge just like the selected items show").
   It is a REAL member of .kl-tpl-chips, so it inherits the whole box the foundation .kl-chip already defines —
   same padding, same radius, same 12px/1.5 line box — and the chip row therefore owns this block's height in BOTH
   states. That is the point: the old <p> above the list was a different box with its own typography and margins, so
   picking the first value collapsed the page under the user.
   Distinct from a real selection WITHOUT a new colour: no fill, a DASHED --k-border edge and muted text read as an
   absence rather than as a terrain literally named "None". The dashed edge carries the distinction as shape, so it
   never rests on colour alone; the meaning itself rides in the text (plus the visually-hidden tail in the markup).
   Non-interactive by design — see the .razor comment — hence no cursor, no hover, and no --k-touch floor.

   NAMED "--unset", NOT "--empty", AND THAT IS LOAD-BEARING. The foundation State kit (§5h) matches
   `.kl-shell-main [class$="-empty"]` on the whole class ATTRIBUTE, so ANY element whose class list ends in
   `-empty` silently becomes a centred full-page empty-state block with `padding: var(--k-space-12) var(--k-space-6)`.
   MEASURED: that is what the old `<p class="kl-tpl-chipset-empty">` was — 48px of padding above and below a
   one-line sentence, and the actual source of the owner's "takes up a lot of vertical space". A first pass at this
   fix named the modifier `--empty` and inherited the exact same 48px trap (a 116px chip). Do not rename it back. */
.kl-tpl-chip--unset[b-leafuad94h] {
    background: transparent;
    border-style: dashed;
    border-color: var(--k-border);
    color: var(--k-text-muted);
    font-weight: 500;
    font-style: italic;
}

/* The add-chip control is a quiet secondary (it grows the draft; it isn't a primary). */
.kl-tpl-chip-add[b-leafuad94h] {
    font-size: 13px;
}

/* The pick-then-add row (2026-07-02): a real-vocabulary select beside the anchored add button. */
.kl-tpl-chip-addrow[b-leafuad94h] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    margin-block-start: var(--k-space-2);
}
.kl-tpl-chip-pick[b-leafuad94h] {
    flex: 0 1 16rem;
    min-inline-size: 10rem;
}

/* The per-chip remove ✕ (additions were irreversible before 2026-07-02) — a small inline glyph button
   that never balloons the chip (the chip stays the row-height owner). */
.kl-tpl-chip-x[b-leafuad94h] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-inline-start: var(--k-space-1);
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--k-text-muted);
    font-size: 11px;
    line-height: 1;
    cursor: pointer;
}
.kl-tpl-chip-x:hover[b-leafuad94h] { color: var(--k-critical); }
html.dark .kl-tpl-chip-x:hover[b-leafuad94h] { color: #f6ab9d; }
.kl-tpl-chip-x:focus-visible[b-leafuad94h] { outline: 2px solid var(--k-accent); outline-offset: 1px; }

.kl-tpl-notesfield[b-leafuad94h] {
    margin-block-end: 0;
}

/* ---- Footer action bar. --------------------------------------------------- */
.kl-tpl-editor-footer[b-leafuad94h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    padding-block-start: var(--k-space-4);
    margin-block-start: var(--k-space-2);
    border-block-start: 1px solid var(--k-border);
}

.kl-tpl-footer-spacer[b-leafuad94h] {
    flex: 1 1 auto;
}

/* ---- Placeholder editor pane (no draft selected). ------------------------- */
.kl-tpl-editor-placeholder[b-leafuad94h] {
    justify-content: center;
    min-block-size: 18rem;
}

/* ---- States: list-empty / loading. ---------------------------------------- */
.kl-tpl-empty[b-leafuad94h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-3);
    text-align: center;
    padding: var(--k-space-8) var(--k-space-4);
    color: var(--k-text-muted);
}

.kl-tpl-empty-icon[b-leafuad94h] {
    font-size: 28px;
    opacity: .55;
    color: var(--k-text-muted);
}

.kl-tpl-empty-message[b-leafuad94h] {
    margin: 0;
    font-weight: 600;
    color: var(--k-text);
}

.kl-tpl-empty-hint[b-leafuad94h] {
    margin: 0;
    font-size: 13px;
    color: var(--k-text-muted);
    max-inline-size: 22rem;
}

.kl-tpl-loading[b-leafuad94h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-2);
    padding: var(--k-space-12) var(--k-space-6);
    color: var(--k-text-muted);
}

.kl-tpl-loading-icon[b-leafuad94h] {
    font-size: 20px;
    opacity: .7;
    animation: kl-tpl-spin-b-leafuad94h 1.1s linear infinite;
}

@keyframes kl-tpl-spin-b-leafuad94h {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .kl-tpl-loading-icon[b-leafuad94h] { animation: none; }
}

/* ---- Delete dialog: the foundation kl-dialog card only. --------------------
   UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim +
   centering. The bespoke .kl-tpl-dialog-scrim (and the panel's position:relative,
   which only existed to anchor inside that scrim) are gone; the panel is a plain
   card the overlay centers. Only the dialog text rhythm is kept below. -------- */
.kl-tpl-dialog-title[b-leafuad94h] {
    font-family: var(--k-font-display);
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    padding-block-start: var(--k-space-6);
    color: var(--k-text);
}

.kl-tpl-dialog-body[b-leafuad94h] {
    margin: var(--k-space-2) 0 0;
    font-size: 14px;
    color: var(--k-text-muted);
}

/* ---- DARK / OUTDOOR deliberate edges. -------------------------------------
   The foundation flips the bg/surface/border tokens per mode (so the canvas/token
   gate holds). Here we only RAISE the card edge + the type chip so the panes read
   as distinct surfaces in the dark/outdoor POV — no new colour, just var() weight. */
html.dark .kl-tpl-listcard[b-leafuad94h],
html.dark .kl-tpl-editorcard[b-leafuad94h] {
    border-color: var(--k-border);
    box-shadow: var(--k-elev-2);
}

html.dark .kl-tpl-typechip[b-leafuad94h],
html.dark .kl-tpl-chip[b-leafuad94h] {
    background: var(--k-surface-3);
    border-color: var(--k-outline);
    color: var(--k-text);
}

/* The empty chip must stay QUIET in dark too: the raised-chip rule above out-specifies the flat
   .kl-tpl-chip--unset base, so without this the absence would come back as a solid, full-contrast pill
   indistinguishable from a real selection. Only the fill/edge/ink change — the box, and therefore the row
   height, is identical to a real chip in every mode. */
html.dark .kl-tpl-chip--unset[b-leafuad94h] {
    background: transparent;
    border-color: var(--k-border);
    color: var(--k-text-muted);
}

/* Dark selected row: a stronger teal tint so the open template still reads clearly. */
html.dark .kl-tpl-row[data-selected="true"] > .kl-tpl-select[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-500) 26%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-teal-400) 60%, transparent);
}

/* Outdoor (glove-grade high contrast): heavier card borders + bolder chip edge. */
html[data-outdoor="true"] .kl-tpl-listcard[b-leafuad94h],
html[data-outdoor="true"] .kl-tpl-editorcard[b-leafuad94h] {
    border-width: 2px;
}

html[data-outdoor="true"] .kl-tpl-typechip[b-leafuad94h],
html[data-outdoor="true"] .kl-tpl-chip[b-leafuad94h] {
    border-color: var(--k-outline);
    color: var(--k-text);
}

/* Outdoor keeps the glove-grade --k-outline edge (legibility in sun is non-negotiable) but keeps the DASHED
   stroke, which is what carries "absence" as shape rather than as contrast. */
html[data-outdoor="true"] .kl-tpl-chip--unset[b-leafuad94h] {
    background: transparent;
    border-style: dashed;
}

html[data-outdoor="true"] .kl-tpl-row[data-selected="true"] > .kl-tpl-select[b-leafuad94h] {
    border-width: 2px;
    border-color: var(--k-accent);
}

/* ── WHAT THIS TEMPLATE MAKES (the REQUIRED activity taxonomy + the optional subtype) ─────────────
   The base type and the activity type are one functional pair and share ONE row, the same idiom the
   training-day name/order row below uses (B2). The subtype sits on its own line: it is optional and
   scoped to the record type, so pairing it with a required field would misread as a third required
   one. Vertical cost is one row plus one field — the fieldset reuses .kl-tpl-chipset-legend's type
   scale so this block and the two chipsets below read as one column, not three treatments. */
.kl-tpl-taxonomy[b-leafuad94h] {
    margin: 0 0 var(--k-space-4);
    padding: 0;
    border: 0;
    min-inline-size: 0;
}

.kl-tpl-taxonomyrow[b-leafuad94h] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-3);
}

/* Both pickers hold long vocabulary labels ("Narcotics detection — vehicle exterior"), so they share
   the slack evenly and wrap to a stack rather than truncating. */
.kl-tpl-basefield[b-leafuad94h],
.kl-tpl-activityfield[b-leafuad94h] {
    flex: 1 1 14rem;
    min-inline-size: 0;
    margin-block-end: 0;
}

.kl-tpl-subtypefield[b-leafuad94h] {
    margin-block-end: var(--k-space-2);
}

/* The required marker rides the label, muted rather than alarm-red: nothing has gone wrong yet. */
.kl-tpl-req[b-leafuad94h] {
    color: var(--k-text-muted);
    margin-inline-start: 2px;
}

/* The refusal sentence. Quiet, not a banner — it states a precondition, it does not report a failure,
   and it is never on screen once the two pickers are answered. */
.kl-tpl-taxonomy-required[b-leafuad94h] {
    margin: 0;
    color: var(--k-text-muted);
    line-height: 1.4;
}

/* A write that was actually REFUSED — this one IS a failure, so it takes the danger colour. */
.kl-tpl-savefailed[b-leafuad94h] {
    margin: var(--k-space-2) 0 0;
    color: #b3261e;
    line-height: 1.4;
}

/* ── TRAINING DAY (legacy Kanine6 GroupCode parity) ───────────────────────────────────────────────
   The day NAME + the member's order share ONE row (B2: related things belong on a row), and the row
   degrades to a stack only when it genuinely cannot fit. Vertical space is spent deliberately (B1):
   the pair costs one row, not two, and the hint below is a single quiet line rather than a card.
   Touch targets are untouched — the inputs inherit .kf-input's height (A6). */
.kl-tpl-grouprow[b-leafuad94h] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-2);
}

/* The name takes the slack; the order box stays as narrow as a small integer needs. */
.kl-tpl-groupnamefield[b-leafuad94h] {
    flex: 1 1 16rem;
    min-inline-size: 0;
    margin-block-end: 0;
}

.kl-tpl-groupsortfield[b-leafuad94h] {
    flex: 0 0 7.5rem;
    margin-block-end: 0;
}

/* The hint line and the "Run training day" action share ONE row (B2). The hint takes the slack; the action
   keeps its full 48px target (A6) and never shrinks. Below the field breakpoint they wrap, which is accepted
   degradation — the action stays visible either way. */
.kl-tpl-grouphintrow[b-leafuad94h] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-4);
}

.kl-tpl-grouphint[b-leafuad94h] {
    margin: 0;
    flex: 1 1 18rem;
    min-inline-size: 0;
    color: var(--k-text-muted);
    line-height: 1.4;
}

/* The list-row training-day chip: visually distinct from the record-type chip beside it, but the
   same pill scale so the meta row keeps its height. */
.kl-tpl-groupchip[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-500) 14%, var(--k-surface-2));
    border-color: color-mix(in srgb, var(--k-teal-500) 34%, transparent);
    color: var(--k-text);
    max-inline-size: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* "Run training day" sits beside "Use template" as the tonal secondary — one teal primary per
   screen stays with Use template. */
.kl-tpl-usegroup[b-leafuad94h] {
    white-space: nowrap;
}

html.dark .kl-tpl-groupchip[b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-400) 20%, var(--k-surface-3));
    border-color: color-mix(in srgb, var(--k-teal-400) 48%, transparent);
}

html[data-outdoor="true"] .kl-tpl-groupchip[b-leafuad94h] {
    border-width: 2px;
    border-color: var(--k-outline);
}

/* ---- PHONE: the list card → picker SWAP (owner request 2026-07-25) ---------------------------------------
   Deliberately the LAST rule in this file: `@media` contributes no specificity, so this must come after
   `.kl-tpl-listpicker { display: none }` near the top or the base rule wins and the picker never appears.
   `display:none` on the card rather than a visually-hidden class: this is a SWAP, not a duplication, so the
   same navigation must never be announced twice.
   The card is hidden ONLY when it is marked collapsible — i.e. only when there are templates and therefore a
   picker standing in for it. With zero templates the card IS the empty state (message + New template) and must
   survive on a phone, which is exactly what a blanket `.kl-tpl-listcard { display: none }` would have destroyed.
   640px is the SAME breakpoint the Lookups rail picker uses, so the two pages collapse together. */
@media (max-width: 640px) {
    .kl-tpl-listcard[data-phone-collapsed="true"][b-leafuad94h] { display: none; }

    .kl-tpl-listpicker[b-leafuad94h] {
        display: flex;
        flex-direction: column;
        gap: var(--k-space-2);
        inline-size: 100%;
        max-inline-size: 100%;
        min-inline-size: 0;
        box-sizing: border-box;
    }
}

/* ── REC-032 SCOPE CHIP (owner ask 2026-07-31) ────────────────────────────────────────────────────
   Two states, both NAMED and both visually distinct — "Private" is not the absence of "Agency".
   Colour is never the only signal: the chip carries its own word, so the meaning survives a
   greyscale print, a colour-blind reader and the outdoor palette. Sits on the existing meta row,
   so it costs no vertical space (B1). */
.kl-tpl-scopechip[b-leafuad94h] {
    font-size: 12px;
    letter-spacing: .01em;
}

/* Shared: the same teal family the training-day chip uses, because both mean "this reaches beyond
   the row you are looking at". */
.kl-tpl-scopechip[data-scope="shared"][b-leafuad94h] {
    background: color-mix(in srgb, var(--k-teal-500) 14%, var(--k-surface-2));
    border-color: color-mix(in srgb, var(--k-teal-500) 34%, transparent);
    color: var(--k-text);
}

/* Private: deliberately quiet. A private draft is the NORMAL state of a new template, so it must
   not read as a warning — muted surface, muted text, no accent. */
.kl-tpl-scopechip[data-scope="private"][b-leafuad94h] {
    background: var(--k-surface-2);
    border-color: var(--k-border);
    color: var(--k-text-muted);
}

/* The "new training day" name box appears UNDER its picker, so it needs the gap the picker's
   sibling fields get for free. */
.kl-tpl-groupnew[b-leafuad94h] {
    margin-block-start: var(--k-space-2);
}
/* _content/Kanine.Web/Components/Pages/TenantSettings.razor.rz.scp.css */
/* Scoped layout for the Agency-settings page: a sticky in-page nav RAIL (left) + the sections column (right), the
   rail's grouping + real active state, and the page's own "one address fills the rest" affordances. These layout
   primitives are page-local (each settings-style page defines its own scoped equivalent; OrgUnits is the precedent).
   DARK-MODE-safe BY CONSTRUCTION: only flipping tokens (--k-surface-2 / --k-border / --k-text / --k-text-muted /
   --k-accent), NEVER --k-space-5 / --k-space-7 (undefined) or the phantom Material-3 names that don't flip. */

.kl-split[b-qnq2effl5m] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-6);
}
/* ⚠ The ≤900px overrides for this page live at the BOTTOM of this file, not here. See the block at the end and the
   note with it: @media adds NO specificity, so an override written above the rule it means to beat simply loses to
   source order. That is not a style preference — it is the bug that made twelve controls on this page unreachable
   on a phone. */

/* ── Page header ────────────────────────────────────────────────────────────────────────────────────────────── */
/* Title + one-line explainer on the left, the save controls on the right; they stack before they collide. */
.kl-settings-topbar[b-qnq2effl5m] {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--k-space-3) var(--k-space-6);
}
.kl-settings-title[b-qnq2effl5m] { min-inline-size: 0; }
.kl-settings-title h1[b-qnq2effl5m] { margin-block-end: var(--k-space-2); }

/* The explainer under a heading — page-level and per-section. One measure (~68ch) so a wide monitor doesn't
   stretch it into an unreadable single line; the cards themselves are free to run full width. */
.kl-settings-lede[b-qnq2effl5m] {
    margin: 0 0 var(--k-space-4);
    max-inline-size: 68ch;
    color: var(--k-text-muted);
    font-size: 14px;
    line-height: 1.55;
}
.kl-settings-title .kl-settings-lede[b-qnq2effl5m] { margin-block-end: 0; }

/* The unsaved marker sits with the save controls, not floating: it explains what the button beside it will do. */
.kl-settings-dirty[b-qnq2effl5m] { align-self: center; }

/* ── The section rail ───────────────────────────────────────────────────────────────────────────────────────── */
.kl-settings-nav[b-qnq2effl5m] {
    position: sticky;
    top: var(--k-space-4);
    flex: 0 0 15rem;
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-3) var(--k-space-2);
}
.kl-settings-nav ul[b-qnq2effl5m] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
/* Group label. Encodes who the group is ABOUT (your agency / people / the record trail) — the one structural
   device on this page, and it earns its place: eight flat labels made an admin read all eight to find one. */
.kl-settings-nav__eyebrow[b-qnq2effl5m] {
    margin: var(--k-space-4) 0 var(--k-space-1);
    padding-inline: var(--k-space-3);
    color: var(--k-text-muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.kl-settings-nav__eyebrow:first-child[b-qnq2effl5m] { margin-block-start: 0; }

.kl-settings-nav__item[b-qnq2effl5m] {
    /* UI-GUAR-036 (R2-25): the in-page settings nav links are ≥44 CSS-px touch targets (were ~36). */
    display: flex;
    align-items: center;
    min-block-size: var(--k-touch);
    padding: var(--k-space-2) var(--k-space-3);
    border-radius: var(--k-radius-sm);
    border-left: 3px solid transparent;
    color: var(--k-text-muted);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: background var(--k-dur-2) var(--k-ease), color var(--k-dur-2) var(--k-ease),
                border-color var(--k-dur-2) var(--k-ease);
}
.kl-settings-nav__item:hover[b-qnq2effl5m],
.kl-settings-nav__item:focus-visible[b-qnq2effl5m] {
    color: var(--k-text);
    background: color-mix(in srgb, var(--k-text-muted) 8%, var(--k-surface));
}
/* A REAL active state (2026-07-22): kanine-section-spy.js moves this class as sections pass reading position.
   (The 2026-07-02 note stands — the class it replaced was hardcoded on one item and never moved.) */
.kl-settings-nav__item--active[b-qnq2effl5m] {
    color: var(--k-text);
    border-left-color: var(--k-accent);
    background: color-mix(in srgb, var(--k-accent) 10%, var(--k-surface));
}
/* ── The phone section picker (≤900px) ──────────────────────────────────────────────────────────────────────────
   The collapsed form of the rail. Hidden here and TURNED ON in the ≤900px block at the bottom of this file — the
   `display` pair is the one declaration whose outcome depends on source order, so it is the one that must be
   written base-first, override-last (see the note on that block). Everything below is unconditional: it only
   describes a control that desktop never shows.

   Named with BEM `__` segments on purpose. The shared sheet carries 117 `[class$="-…"]` suffix rules (trap T7 —
   `-field` once rendered this page's address input 288px tall, and `-banner` cost the Home disclosure 8px of dead
   space); a `__picker` / `__sections` / `__picker-text` ending matches none of them. */
.kl-settings-nav__picker[b-qnq2effl5m] { display: none; }
.kl-settings-nav__picker-chevron[b-qnq2effl5m] { transition: transform var(--k-dur-2) var(--k-ease); }

@media (prefers-reduced-motion: reduce) {
    .kl-settings-nav__item[b-qnq2effl5m],
    .kl-settings-nav__picker-chevron[b-qnq2effl5m] { transition: none; }
}

/* The quiet region placeholder while the settings hydrate (a slow read is NOT a failure). */
.kl-settings-loading[b-qnq2effl5m] {
    margin: var(--k-space-4) 0 0;
    color: var(--k-text-muted);
    font-size: 14px;
}

.kl-settings-main[b-qnq2effl5m] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-6);
}

/* ── Address entry + autofill ───────────────────────────────────────────────────────────────────────────────── */
/* The address field and its lookup button read as one control: type, press, done.
   ⚠ flex-direction and margin-block-end are RE-DECLARED here on purpose (owner report 2026-07-24: "the agency
   address entry box is massive"). The shared design system carries
       .kf-field, .kl-shell-main [class$="-field"], .kl-shell-main [class$="-field-wide"] {
           display:flex; flex-direction:column; gap:var(--kf-field-gap); margin-block-end:var(--k-space-4); … }
   (kanine-design-system.css:272-276). That attribute selector matches on the class STRING ENDING, so this
   wrapper — named "kl-settings-inline-field" — is swept up by the label-over-control field family even though it
   is the one *-field in the app that is deliberately a ROW. The inherited flex-direction:column then re-read the
   `flex: 1 1 18rem` basis below on the BLOCK axis, so a single-line <input> rendered 288px (18rem) tall with the
   lookup button stacked under it. This is a SIZING defect only — the control is, and stays, a one-line <input>;
   nothing about the stored address shape changes. The shared selector is the real bug and is reported separately
   (it is under concurrent edit and must not be touched from here); the ancestor qualifier below simply out-
   specifies it (0,3,0 vs 0,2,0) so this page is correct whatever the link order. */
.kl-shell-main .kl-settings-inline-field[b-qnq2effl5m] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    align-items: center;
    /* The row is a child INSIDE .kf-field, which already owns the field rhythm — the swept-in field margin was
       stacking a second one under the control. */
    margin-block-end: 0;
}
/* Row basis: the input takes the remaining width beside the button and wraps below 18rem. Block size comes from
   .kf-input's own min-block-size (48px ≥ the 44px WCAG 2.5.8 floor) — never clamped here. */
.kl-shell-main .kl-settings-inline-field .kf-input[b-qnq2effl5m] { flex: 1 1 18rem; min-inline-size: 0; }

/* The receipt for an address lookup: every field it filled, named in plain language, with one Undo. Accent-tinted
   rather than success-green — this is work waiting to be saved, not work that has been saved. */
.kl-settings-autofill[b-qnq2effl5m] {
    margin-block-start: var(--k-space-3);
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid color-mix(in srgb, var(--k-accent) 35%, var(--k-border));
    border-left-width: 3px;
    border-radius: var(--k-radius-md);
    background: color-mix(in srgb, var(--k-accent) 6%, var(--k-surface));
}
.kl-settings-autofill__head[b-qnq2effl5m] {
    margin: 0 0 var(--k-space-2);
    color: var(--k-text);
    font-size: 14px;
    font-weight: 600;
}
.kl-settings-autofill__list[b-qnq2effl5m] {
    margin: 0;
    padding-inline-start: var(--k-space-4);
    color: var(--k-text);
    font-size: 14px;
    line-height: 1.7;
}
.kl-settings-autofill__foot[b-qnq2effl5m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-2);
    margin-block-start: var(--k-space-2);
}
.kl-settings-autofill__foot .kf-hint[b-qnq2effl5m] { margin: 0; }

/* ── Collapsed detail ───────────────────────────────────────────────────────────────────────────────────────── */
/* The hand-entry coordinate fields. Present and reachable, but folded away: the address above fills all three, so
   for most agencies this never needs opening. */
.kl-settings-advanced[b-qnq2effl5m] {
    margin-block-start: var(--k-space-4);
    border-block-start: 1px solid var(--k-border);
    padding-block-start: var(--k-space-3);
}
.kl-settings-advanced__summary[b-qnq2effl5m] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    min-block-size: var(--k-touch);
    color: var(--k-text);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
}
.kl-settings-advanced__summary:focus-visible[b-qnq2effl5m] { outline: 2px solid var(--k-accent); outline-offset: 2px; }
.kl-settings-advanced__hint[b-qnq2effl5m] {
    color: var(--k-text-muted);
    font-size: 13px;
    font-weight: 400;
}
.kl-settings-advanced[open] .kl-settings-advanced__summary[b-qnq2effl5m] { margin-block-end: var(--k-space-3); }

/* ── Pointer cards (Sign-in & security, Identity provider, License) ─────────────────────────────────────────── */
/* The links out to the page that really manages a thing. The foundation right-aligns anything whose last class
   ends in "-actions"; under body copy these read as a next step, so the compound selector wins them back to the
   start edge (0,3,0 beats the foundation's 0,2,0 — no order dependency). */
.kl-settings-main .kl-settings-pointer-actions[b-qnq2effl5m] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--k-space-3);
    margin-block-start: var(--k-space-4);
}

/* The trailing "what this page can't change" line under a pointer card. Quieter and smaller than the lead
   paragraph — an honest footnote, not the headline. */
.kl-settings-pointer-note[b-qnq2effl5m] {
    margin-block-start: var(--k-space-4);
    margin-block-end: 0;
    max-inline-size: 68ch;
    color: var(--k-text-muted);
    font-size: 13px;
}

/* ── WX-KEY-001: the agency weather-service key (self-host / air-gapped only) ───────────────────────────────── */
/* Trap T7: this row lives inside a wrapper whose class ends in "-field", and the shared form-kit rule
   `.kl-shell-main [class$="-field"]` flips any such element to a label-over-control COLUMN with a bottom margin —
   which is what once rendered the agency address input 288px tall. Re-declare both, exactly as the address row does,
   so status label and chip stay on ONE row (B2: related things share a row). */
.kl-settings-main .kl-weatherkey-row[b-qnq2effl5m] {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--k-space-3);
    margin-block-end: var(--k-space-3);
}

/* Save + Remove are the trailing edge of the KEY INPUT'S OWN ROW (owner ruling 2026-07-25 — a single control never
   owns a band on its own). `.kl-weatherkey-actions`, the strip that used to hold them under the input, is RETIRED
   with the markup that carried it; the buttons are now children of `.kl-settings-inline-field`, which already lays
   an input + its button out as one row (and gives the input `flex: 1 1 18rem`, so the buttons keep their content
   width and the input absorbs the rest). Nothing needed here beyond the field's own margin: the row IS the field's
   last line, and `.kf-field`'s gap supplies the space above it. */
.kl-settings-main .kl-weatherkey-entry[b-qnq2effl5m] {
    /* The `.kl-settings-inline-field` base centres its items; the buttons and the input are the same 48px tall, so
       this only matters if a validation message ever lands inline. Declared for intent, not to change today's box. */
    align-items: center;
}

/* ── Narrow layout (≤900px) — MUST BE LAST IN THIS FILE ─────────────────────────────────────────────────────────
   SEV-1 fix, 2026-07-24. This block used to sit at the top, immediately after `.kl-split`. `@media` contributes
   NOTHING to specificity, so `@media(max-width:900px){ .kl-settings-nav{position:static} }` written ABOVE the base
   `.kl-settings-nav{position:sticky}` lost the cascade on source order — at every width, including 393px.

   What that cost: the rail computed `position:sticky` at 708px tall in an 852px viewport, so it pinned itself over
   the whole form. A live sweep of 18 scroll offsets found `document.elementFromPoint` returning
   `a.kl-settings-nav__item` at the centre of TWELVE controls — the agency address input, unit system, temperature
   unit, the time-zone select, the weather-service key input, "Use this address", "Test the key" and four reminder
   lead checkboxes. Every one of them was in the DOM, focusable, and completely untouchable on a phone. This is the
   page the setup checklist sends an admin to in order to set the agency address and time zone.

   The fix is ORDER, deliberately not specificity: the intent was always "static below 900px", and the right way to
   express it is to declare it after the rule it overrides. Raising specificity would win the same fight while
   leaving the trap armed for the next override someone adds. Keep this block last. */
@media (max-width: 900px) {
    /* align-items:stretch (overriding the desktop flex-start) so the settings-main column spans 100% — otherwise it
       shrink-wraps its form grid (~732px) and forces page overflow (the live sweep measured documentElement 798>320). */
    .kl-split[b-qnq2effl5m] { flex-direction: column; align-items: stretch; }
    .kl-settings-nav[b-qnq2effl5m] { position: static; flex-basis: auto; align-self: stretch; }
    .kl-settings-main[b-qnq2effl5m] { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }

    /* ── The section picker ───────────────────────────────────────────────────────────────────────────────────
       In flow and 708px tall, the rail cost a phone user a whole screen before the first setting: MEASURED at
       393x852, nav y=266 h=708, first form control (the agency address) y=1183 — 1.39 screens down, on the page
       the setup checklist sends an admin to in order to type that address. Collapsed to one row it is ~74px, so
       the address arrives on the first screen. Nothing is deleted and nothing shrinks: all nine links keep their
       elements, hrefs, data-testids and their 64px hit area, one tap away.

       Deliberately IN FLOW, not an overlay. A rail that paints over this form is exactly the severity-1 that was
       fixed hours ago (position:sticky at 708px made twelve controls untouchable at every scroll offset); an
       expanded picker pushes the form down instead, and the page re-anchors after a pick. */
    .kl-settings-nav__picker[b-qnq2effl5m] {
        display: flex;
        align-items: center;
        gap: var(--k-space-3);
        inline-size: 100%;
        /* A6/WCAG 2.5.8 — --k-touch (48px) is a FLOOR, not a height: the padding keeps a long localised section
           name growing the row rather than clipping it. */
        min-block-size: var(--k-touch);
        padding: var(--k-space-2) var(--k-space-3);
        margin: 0;
        background: none;
        border: 0;
        border-radius: var(--k-radius-sm);
        font: inherit;
        text-align: start;
        cursor: pointer;
    }
    .kl-settings-nav__picker:focus-visible[b-qnq2effl5m] { outline: 2px solid var(--k-accent); outline-offset: 2px; }
    .kl-settings-nav__picker-text[b-qnq2effl5m] {
        flex: 0 0 auto;
        color: var(--k-text-muted);
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 0.08em;
        text-transform: uppercase;
    }
    /* Where you ARE — the whole reason a collapsed rail is not just a menu button. kanine-section-spy.js keeps
       this in step with the active link as sections pass reading position. */
    .kl-settings-nav__picker-current[b-qnq2effl5m] {
        flex: 1 1 auto;
        min-inline-size: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--k-text);
        font-size: 14px;
        font-weight: 600;
    }
    .kl-settings-nav__picker-chevron[b-qnq2effl5m] {
        flex: 0 0 auto;
        color: var(--k-text-muted);
        font-size: 13px;
    }
    .kl-settings-nav__picker[aria-expanded="true"] .kl-settings-nav__picker-chevron[b-qnq2effl5m] { transform: rotate(90deg); }

    /* Collapsed: genuinely hidden, which is the correct semantic for aria-expanded="false" — content promised
       hidden must not stay reachable by keyboard or screen reader. */
    .kl-settings-nav[data-expanded="false"] .kl-settings-nav__sections[b-qnq2effl5m] { display: none; }
    /* Open, the list sits under the row it belongs to rather than pretending to be a separate card. */
    .kl-settings-nav[data-expanded="true"] .kl-settings-nav__sections[b-qnq2effl5m] { margin-block-start: var(--k-space-2); }
}

/* ── Phone (≤640px) — MUST STAY AFTER the ≤900px block above, for the same source-order reason it documents ──
   The weather-key row (input + Save [+ Remove]) is a wrapping flex row, and flex decides LINE BREAKS from each
   item's flex BASIS, not from the size it could shrink to. At 390px the card leaves 310px and the base
   `.kl-settings-inline-field .kf-input` basis is 18rem (288px), so 288 + 12 + 85 overflowed the line and the Save
   button wrapped BELOW the input — re-creating, on the phone, the exact band the desk fix had just removed
   (MEASURED: the field went 480px → 484px at 390 before this rule, and → 424px after).

   Only the BASIS moves. `flex-grow: 1` (inherited from the base rule) still fills the line, so the input renders
   ~213px wide here — it is not being shrunk to a smaller control, it is being told to start smaller and grow. The
   48px min-block-size of `.kf-input` and the buttons' ≥44px targets are untouched. */
@media (max-width: 640px) {
    .kl-settings-main .kl-weatherkey-entry .kf-input[b-qnq2effl5m] { flex-basis: 7rem; }
}
/* _content/Kanine.Web/Components/Pages/TenantSettingsSections/TenantSettingsCobranding.razor.rz.scp.css */
/* RPT-028 — Tenant-settings #cobranding section styling (component-scoped). Dark-mode-safe tokens only
   (--k-text/--k-text-muted/--k-surface/--k-surface-2/--k-border/--k-accent) — never phantom Material-3 names. */

.kl-section-subtitle[b-h0isn0m93h] {
    font-family: var(--k-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--k-space-2);
    color: var(--k-text);
}

.kl-toggle-row[b-h0isn0m93h] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding: var(--k-space-2) var(--k-space-3);
    margin-block-start: var(--k-space-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface-2);
    cursor: pointer;
}

.kl-toggle-label[b-h0isn0m93h] {
    font-size: 14px;
    color: var(--k-text);
}

/* The DEFERRED agency-seal drop-zone: a visually-distinct disabled affordance (object store unprovisioned). */
.kl-dropzone[b-h0isn0m93h] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--k-space-1);
    text-align: center;
    padding: var(--k-space-4);
    border: 2px dashed var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
}

.kl-dropzone--disabled[b-h0isn0m93h] {
    opacity: 0.7;
    cursor: not-allowed;
}

.kl-dropzone-title[b-h0isn0m93h] {
    font-weight: 600;
    font-size: 14px;
    color: var(--k-text-muted);
}
/* _content/Kanine.Web/Components/Pages/TenantSettingsSections/TenantSettingsLicense.razor.rz.scp.css */
/* IAM-050 — scoped styles for the Tenant-settings "License & seats" child section. The card box itself comes from the
   foundation [class$="-card"] suffix selector (kl-license ends in "-license", NOT "-card", so the wrapping element
   carries BOTH `kl-card` and `kl-license`; `kl-card` supplies the box). Everything below is the section's own layout.
   DARK-MODE: only the flipping semantic tokens are used (--k-text/--k-text-muted/--k-surface-2/--k-border/--k-accent +
   the --k-success/caution/critical status hues mixed onto --k-surface); NO --k-ink-* / --k-on-surface* / --k-surface-variant
   (phantom/non-flipping), NO --k-space-5 (undefined). */

.kl-license-head[b-dnd5rnjnmb] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    flex-wrap: wrap;
}
.kl-license-readonly-chip[b-dnd5rnjnmb] {
    flex: 0 1 auto;
    min-width: 0;
}
.kl-license-intro[b-dnd5rnjnmb] {
    color: var(--k-text-muted);
    margin-block: var(--k-space-2) var(--k-space-4);
    max-inline-size: 64ch;
}

/* Three equal cardlets, responsive (stack below ~720px). */
.kl-license-grid[b-dnd5rnjnmb] {
    display: grid;
    gap: var(--k-space-4);
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.kl-license-cardlet[b-dnd5rnjnmb] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    background: var(--k-surface-2);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-6);
}
.kl-license-cardlet-title[b-dnd5rnjnmb] {
    display: flex;
    align-items: center;
    gap: var(--k-space-2);
    font-family: var(--k-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
    color: var(--k-text);
}

/* A quiet "Derived" marker chip on the projector-owned cards. Uses ONLY flipping tokens (the bare foundation .kl-chip
   base hard-codes a fixed light gray that does NOT flip → a bright pill on the dark canvas, an R11 design-skeptic
   BLOCKER). A muted neutral tint legible in light + dark + outdoor. */
.kl-license-derived-chip[b-dnd5rnjnmb] {
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 8px;
    color: var(--k-text-muted);
    background: color-mix(in srgb, var(--k-text-muted) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-text-muted) 30%, var(--k-surface));
}

/* The read-only license-type select reads as disabled (muted, not-allowed) but legible in all modes. */
.kl-license-select:disabled[b-dnd5rnjnmb] {
    color: var(--k-text);
    background: var(--k-surface);
    border-color: var(--k-border);
    opacity: 1;            /* don't wash the value out — it is load-bearing hydrated data */
    cursor: not-allowed;
}

/* Small read-only figures (seats / expiry). */
.kl-license-figure-sm[b-dnd5rnjnmb] {
    font-size: 16px;
    color: var(--k-text);
    margin: 0;
    font-variant-numeric: tabular-nums;
}

/* The headline seat figure (47 / 50 seats). */
.kl-license-figure[b-dnd5rnjnmb] {
    display: flex;
    align-items: baseline;
    gap: var(--k-space-2);
    margin: 0;
}
.kl-license-figure-num[b-dnd5rnjnmb] {
    font-family: var(--k-font-display);
    font-size: clamp(28px, 3vw, 36px);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--k-text);
    font-variant-numeric: tabular-nums;
}
.kl-license-figure-denom[b-dnd5rnjnmb] {
    font-size: 14px;
    color: var(--k-text-muted);
}

/* The DERIVED seat-usage meter. The track is a subtle fill; the bar colour tracks the seat status (data-attr on the
   track). Default (ok) = accent teal; soft-warning = caution; full = critical. Dark-mode keeps the SAME saturated hues
   (they are status fills, already legible on dark). */
.kl-license-meter[b-dnd5rnjnmb] {
    block-size: 8px;
    inline-size: 100%;
    border-radius: var(--k-radius-full);
    background: color-mix(in srgb, var(--k-border) 60%, var(--k-surface));
    overflow: hidden;
}
.kl-license-meter-fill[b-dnd5rnjnmb] {
    block-size: 100%;
    border-radius: inherit;
    background: var(--k-accent);
    transition: width var(--k-dur-3) var(--k-ease);
}
.kl-license-meter[data-seat-status="soft-warning"] .kl-license-meter-fill[b-dnd5rnjnmb] {
    background: var(--k-caution);
}
.kl-license-meter[data-seat-status="full"] .kl-license-meter-fill[b-dnd5rnjnmb] {
    background: var(--k-critical);
}

.kl-license-seat-chip[b-dnd5rnjnmb],
.kl-license-state-chip[b-dnd5rnjnmb] {
    align-self: flex-start;
    max-inline-size: 100%;
    /* wrap rather than overhang the cardlet on a long label / narrow column (R11 clip guard). */
    white-space: normal;
    text-align: start;
}

.kl-license-manage[b-dnd5rnjnmb] {
    align-self: flex-start;
    font-size: 13px;
    font-weight: 600;
    color: var(--k-accent);
    text-decoration: none;
}
.kl-license-manage:hover[b-dnd5rnjnmb],
.kl-license-manage:focus-visible[b-dnd5rnjnmb] {
    text-decoration: underline;
}

/* Token block sits below a hairline divider. */
.kl-license-token[b-dnd5rnjnmb] {
    margin-block-start: var(--k-space-2);
    padding-block-start: var(--k-space-3);
    border-block-start: 1px solid var(--k-border);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-1);
}
.kl-license-token p[b-dnd5rnjnmb] {
    margin: 0;
}

.kl-license-deferred[b-dnd5rnjnmb] {
    margin-block-start: var(--k-space-4);
}

/* A muted helper-text default (the foundation has no .kl-muted/.kf-hint rule — apply the flipping muted token here). */
.kl-license .kl-muted[b-dnd5rnjnmb],
.kl-license .kf-hint[b-dnd5rnjnmb] {
    color: var(--k-text-muted);
}
/* _content/Kanine.Web/Components/Pages/TenantSettingsSections/TenantSettingsReminders.razor.rz.scp.css */
/* OPS-024 — Tenant-settings #reminders section styling (component-scoped). Dark-mode-safe tokens only
   (--k-text/--k-text-muted/--k-surface/--k-surface-2/--k-border/--k-accent) — never phantom Material-3 names. */

.kl-section-subtitle[b-f7dp9j0wkf] {
    font-family: var(--k-font-display);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 var(--k-space-2);
    color: var(--k-text);
}

.kl-toggle-list[b-f7dp9j0wkf] {
    list-style: none;
    margin: var(--k-space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--k-space-2);
}

.kl-toggle-row[b-f7dp9j0wkf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--k-space-3);
    padding: var(--k-space-2) var(--k-space-3);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface-2);
}

.kl-toggle-label[b-f7dp9j0wkf] {
    display: inline-flex;
    align-items: center;
    gap: var(--k-space-3);
    font-size: 14px;
    color: var(--k-text);
    cursor: pointer;
}

.kl-toggle-badge[b-f7dp9j0wkf] {
    padding: 2px var(--k-space-2);
    border-radius: var(--k-radius-sm);
    background: var(--k-surface-3);
    color: var(--k-text-muted);
    font-size: 13px;
}
/* _content/Kanine.Web/Components/Pages/TenantSettingsSections/TenantSettingsRetention.razor.rz.scp.css */
/* SEC-DLC-001 / SEC-DLC-006 — scoped styles for the tenant-settings Retention & disposition section.
   Reuses the global kl-/kf- design-system primitives (kl-card family, kl-banner, kl-chip, kf-select, kf-input,
   kf-textarea, kl-btn, kl-dialog) and adds ONLY the component-local classes.

   THE REDESIGN (owner ask, 2026-07-30). This was a five-column table of bare dropdowns; a records manager was being
   asked to read "1 / case_closure / anonymize" across three adjacent selects. It is now one STACKED CARD per record
   kind, headed by an icon and a sentence about consequences, with the controls as labelled fields beneath. The old
   local copies of .kl-banner / .kf-hint / .kl-empty are gone: the foundation (kanine-design-system.css §5g/§5h)
   defines the whole family, and a second copy here would be a second thing to keep in step.

   DARK-MODE legible by construction: every colour is a design token that flips (--k-text / --k-text-muted /
   --k-surface* / --k-border / --k-accent / --k-success / --k-caution / --k-critical) — never the phantom Material-3
   tokens (--k-on-surface* / --k-ink-*) that do not flip, never an undefined space (--k-space-5).

   TOUCH: every control on a card is a kf-select / kf-input, which the foundation already floors at --k-touch
   (48px). The card itself is not an interactive target and declares no hover, so there is no hover state that could
   fall through to a generic rule — the .kl-btn--seal failure mode (a filled button whose hover repainted the
   background while keeping white text, vanishing at ~1.1:1) cannot recur here. The two buttons this section adds
   are --ghost and --seal, both of which declare their own hover in the foundation, in both themes. */

.kl-retention[b-xr59dyhu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-4);
    color: var(--k-text);
}

/* ── The disposition ENGINE panel (the switch, the dry run, and what the last passes did). ──────────────────────
   Class ends in "-panel" so the foundation's card family (§5a suffix match) supplies the surface, border, radius
   and elevation; only the interior rhythm is local. A left-rule in the accent (a SHAPE cue, never a status-hued
   surface fill — UI-GUAR-027) marks it as the section's control surface rather than one more schedule. */
.kl-retention-engine-panel[b-xr59dyhu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    box-shadow: inset 3px 0 0 0 var(--k-accent);
}

.kl-retention-engine-head[b-xr59dyhu1d] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    flex-wrap: wrap;
}

.kl-retention-engine-icon[b-xr59dyhu1d] {
    font-size: 1.35rem;
    line-height: 1;
    color: var(--k-accent);
    flex: 0 0 auto;
    margin-top: 2px;
}

.kl-retention-engine-headings[b-xr59dyhu1d] {
    flex: 1 1 16rem;
    min-width: 0;
}

.kl-retention-engine-title[b-xr59dyhu1d] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1rem;
    font-weight: 700;
    color: var(--k-text);
}

.kl-retention-engine-lede[b-xr59dyhu1d] {
    margin: 2px 0 0;
    font-size: 0.82rem;
    color: var(--k-text-muted);
}

.kl-retention-engine-state-line[b-xr59dyhu1d] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--k-text);
    max-width: 68ch;
}

.kl-retention-engine-actions[b-xr59dyhu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
}

/* ── The dry-run report + the run history (same list rhythm; both are read-only recitals). ── */
.kl-retention-preview[b-xr59dyhu1d],
.kl-retention-history[b-xr59dyhu1d] {
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
    color: var(--k-text);
}

.kl-retention-preview-title[b-xr59dyhu1d] {
    margin: 0 0 4px;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--k-text);
}

.kl-retention-preview-list[b-xr59dyhu1d] {
    list-style: none;
    margin: var(--k-space-2) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kl-retention-preview-list > li[b-xr59dyhu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-2);
    font-size: 0.82rem;
}

.kl-retention-preview-kind[b-xr59dyhu1d] {
    font-weight: 600;
    color: var(--k-text);
    flex: 0 0 10rem;
}

.kl-retention-preview-detail[b-xr59dyhu1d] {
    color: var(--k-text-muted);
    flex: 1 1 16rem;
}

/* ── The eight stacked schedule cards. ──────────────────────────────────────────────────────────────────────── */
.kl-retention-cards[b-xr59dyhu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

/* Class ends in "-card", so the foundation's card family styles the surface. The local rules are the interior. */
.kl-retention-kind-card[b-xr59dyhu1d] {
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
    margin-block-end: 0;   /* the list owns the rhythm; the card must not add a second gap */
}

/* A sensitive category is marked by a caution LEFT-RULE — a SHAPE cue, not a status-hued surface fill
   (UI-GUAR-027 / R2-16: no dark SURFACE may carry a status hue). The load-bearing signal is still the chip. */
.kl-retention-kind-card--sensitive[b-xr59dyhu1d] {
    box-shadow: var(--k-elev-1), inset 3px 0 0 0 color-mix(in srgb, var(--k-caution) 55%, transparent);
}

.kl-retention-kind-head[b-xr59dyhu1d] {
    display: flex;
    align-items: flex-start;
    gap: var(--k-space-3);
    flex-wrap: wrap;
}

.kl-retention-kind-icon[b-xr59dyhu1d] {
    font-size: 1.5rem;
    line-height: 1;
    color: var(--k-accent);
    flex: 0 0 auto;
    margin-top: 2px;
}

.kl-retention-kind-headings[b-xr59dyhu1d] {
    flex: 1 1 14rem;
    min-width: 0;
}

.kl-retention-kind-title[b-xr59dyhu1d] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1rem;
    font-weight: 700;
}

.kl-retention-kind-scope[b-xr59dyhu1d] {
    margin: 2px 0 0;
    font-size: 0.8rem;
    color: var(--k-text-muted);
}

.kl-retention-kind-chips[b-xr59dyhu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: flex-start;
}

/* The headline sentence — the whole reason the cards exist. Sized up and set in the display face so it reads as the
   card's statement rather than as one more line of small print. */
.kl-retention-sentence[b-xr59dyhu1d] {
    margin: 0;
    font-family: var(--k-font-display);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.45;
    color: var(--k-text);
    max-width: 56ch;
}

.kl-retention-cat[b-xr59dyhu1d] {
    font-weight: 600;
    color: var(--k-text);
}

/* ── The controls: labelled fields that wrap into a single row on a wide card and stack on a phone. ── */
.kl-retention-controls[b-xr59dyhu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3) var(--k-space-4);
    padding-top: var(--k-space-3);
    border-top: 1px solid var(--k-border);
}

.kl-retention-field[b-xr59dyhu1d] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 10rem;
    min-width: 0;
}

.kl-retention-field .kf-label[b-xr59dyhu1d] {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--k-text-muted);
}

.kl-retention-effect[b-xr59dyhu1d] {
    margin: 0;
    max-width: 72ch;
}

/* The recorded-basis marker under a sensitive purge-off select. */
.kl-retention-basis[b-xr59dyhu1d] {
    display: inline-flex;
    align-items: center;
    margin-top: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--k-caution);
}

/* ── Period input: a narrow number field + a unit suffix on one line. ── */
.kf-inline[b-xr59dyhu1d] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.kf-input--num[b-xr59dyhu1d] {
    width: 5.5rem;
}

.kf-suffix[b-xr59dyhu1d] {
    font-size: 0.78rem;
    color: var(--k-text-muted);
}

/* ── Chips: the compliant-default (ok) + sensitive (warn) markers. ── */
.kl-chip--ok[b-xr59dyhu1d] {
    color: var(--k-success);
    background: color-mix(in srgb, var(--k-success) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 35%, var(--k-surface));
}

.kl-chip--warn[b-xr59dyhu1d] {
    color: var(--k-caution);
    background: color-mix(in srgb, var(--k-caution) 12%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 35%, var(--k-surface));
}

/* Dark-mode pill contrast (R11 design-skeptic BLOCKER, mirrors the foundation remap at kanine-design-system.css:516):
   the fixed status hues above are near-invisible on the dark surface (green-on-dark-green ≈ 4.2:1, below AA). Re-map to
   LIGHT text on a more-saturated fill so the load-bearing "compliant default" / sensitive markers stay clearly legible. */
html.dark .kl-chip--ok[b-xr59dyhu1d] {
    color: #9ce6c1;
    background: color-mix(in srgb, var(--k-success) 30%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-success) 55%, var(--k-surface));
}
html.dark .kl-chip--warn[b-xr59dyhu1d] {
    color: #f4c884;
    background: color-mix(in srgb, var(--k-caution) 32%, var(--k-surface));
    border-color: color-mix(in srgb, var(--k-caution) 55%, var(--k-surface));
}

/* SEC-DLC-001 registration of the FEEDBACK data class — an informational, NON-editable schedule card (review M7).
   Feedback retention is a fixed two-clock policy enforced in code (the Phase-C sweep), inexpressible in the matrix's
   (years x trigger x action) vocabulary, so it is registered as a described schedule rather than a fake editable row.
   A left-rule (a SHAPE cue, not a status-hued surface fill) marks it as system-fixed; every colour is a design token
   that flips for dark, so no html.dark override is needed. */
.kl-retention-fixed[b-xr59dyhu1d] {
    padding: var(--k-space-3) var(--k-space-4);
    border: 1px solid var(--k-border);
    border-radius: var(--k-radius-md);
    background: var(--k-surface-2);
    color: var(--k-text);
    box-shadow: inset 3px 0 0 0 var(--k-accent);
}

.kl-retention-fixed .kf-hint[b-xr59dyhu1d] {
    margin-top: 4px;
}

.kl-retention-legend[b-xr59dyhu1d] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--k-space-3);
    padding-top: var(--k-space-3);
    border-top: 1px solid var(--k-border);
}

/* ── The seal action bar. ── */
.kl-retention-actionbar[b-xr59dyhu1d] {
    display: flex;
    align-items: center;
    gap: var(--k-space-4);
    padding-top: var(--k-space-4);
    border-top: 1px solid var(--k-border);
    flex-wrap: wrap;
}

.kl-readonly-note[b-xr59dyhu1d] {
    color: var(--k-text-muted);
    font-size: 0.82rem;
    margin: 0;
    flex: 1 1 18rem;
}

/* ── The two dialogs (legal-basis override, disposition switch) — panel + furniture. ── */
/* UI-GUAR-033: overlay/scrim retired — <KlOverlay> now supplies the fixed scrim + centering. */
.kl-dialog--danger[b-xr59dyhu1d] {
    max-width: 32rem;
    width: 100%;
    background: var(--k-surface);
    color: var(--k-text);
    border: 1px solid var(--k-border);
    border-top: 4px solid var(--k-critical);
    border-radius: var(--k-radius-md);
    padding: var(--k-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--k-space-3);
}

.kl-dialog-title[b-xr59dyhu1d] {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--k-text);
}

.kl-dialog-lede[b-xr59dyhu1d] {
    margin: 0;
    font-size: 0.88rem;
    color: var(--k-text-muted);
}

.kf-required[b-xr59dyhu1d] {
    color: var(--k-critical);
}

/* ── Phone: the controls stop competing for one line and become a readable stack. ── */
@media (max-width: 640px) {
    .kl-retention-controls[b-xr59dyhu1d] {
        flex-direction: column;
    }

    .kl-retention-field[b-xr59dyhu1d] {
        flex: 1 1 auto;
    }

    .kl-retention-preview-kind[b-xr59dyhu1d] {
        flex: 1 1 100%;
    }
}