/* ═══════════════════════════════════════════════════════════════════════════
   CRS Theme — restyle layer on top of Tabler.
   Loaded AFTER tabler.min.css in layout/document.twig.
   Any new visual rule belongs here, not in page templates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────── */
@font-face {
    font-family: 'Inter';
    src: url('/fonts/InterVariable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* ── Design tokens (CRS-specific, consumed by overrides below) ──────────── */
:root {
    /* Surfaces */
    --crs-bg-page:          #0d1117;
    --crs-bg-card:          #161b22;
    --crs-bg-inset:         #0d1117;   /* equals page — inputs blend in, GitHub style */
    --crs-bg-hover:         #21262d;
    --crs-border:           #30363d;
    --crs-border-strong:    #444c56;

    /* Text */
    --crs-fg-primary:       #f0f6fc;
    --crs-fg-muted:         #8b949e;
    --crs-fg-hint:          #6e7681;
    --crs-fg-disabled:      #484f58;

    /* Brand + link (two distinct accent colors) */
    --crs-brand:            #238636;
    --crs-brand-hover:      #2ea043;
    --crs-link:             #58a6ff;
    --crs-link-hover:       #79c0ff;

    /* Semantic pairs */
    --crs-ok-bg:            #0d2818;
    --crs-ok-fg:            #3fb950;
    --crs-warn-bg:          #3d2e14;
    --crs-warn-fg:          #e3b341;
    --crs-danger-bg:        #301a1f;
    --crs-danger-fg:        #f85149;
    --crs-info-bg:          #0c2d6b;
    --crs-info-fg:          #79c0ff;
    --crs-mine-bg:          #1f2a4c;
    --crs-mine-fg:          #a5b4fc;

    /* Spacing and radii */
    --crs-radius-sm: 4px;
    --crs-radius-md: 6px;
    --crs-radius-lg: 8px;
    --crs-radius-xl: 10px;

    /* Shell */
    --crs-sidebar-w:        260px;
    --crs-sidebar-w-rail:   56px;
    --crs-topbar-h:         48px;

    /* Type */
    --crs-font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    --crs-font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Tabler variable overrides ──────────────────────────────────────────── */
:root, [data-bs-theme=dark] {
    --tblr-body-bg:            var(--crs-bg-page);
    --tblr-body-color:         var(--crs-fg-primary);
    --tblr-body-font-family:   var(--crs-font-sans);
    --tblr-body-font-size:     14px;
    --tblr-body-line-height:   1.5;

    --tblr-card-bg:            var(--crs-bg-card);
    --tblr-card-cap-bg:        var(--crs-bg-card);
    --tblr-card-border-color:  var(--crs-border);
    --tblr-card-border-radius: var(--crs-radius-lg);
    --tblr-card-box-shadow:    none;

    --tblr-border-color:       var(--crs-border);
    --tblr-border-color-translucent: var(--crs-border);

    --tblr-secondary-color:    var(--crs-fg-muted);
    --tblr-muted:              var(--crs-fg-muted);

    /* Brand primary: green (GitHub merge style) */
    --tblr-primary:            var(--crs-brand);
    --tblr-primary-rgb:        35, 134, 54;
    --tblr-primary-fg:         #ffffff;

    /* Links: blue, distinct from primary */
    --tblr-link-color:         var(--crs-link);
    --tblr-link-hover-color:   var(--crs-link-hover);

    --tblr-border-radius:      var(--crs-radius-md);
    --tblr-border-radius-sm:   var(--crs-radius-sm);
    --tblr-border-radius-lg:   var(--crs-radius-lg);

    --tblr-box-shadow:         none;
    --tblr-box-shadow-sm:      none;
    --tblr-box-shadow-lg:      none;

    /* Tabler color families → semantic tokens.
       Each family maps to exactly one slot. */

    /* success: green, teal, lime */
    --tblr-green:      var(--crs-ok-bg);   --tblr-green-lt:  var(--crs-ok-bg);   --tblr-green-fg:  var(--crs-ok-fg);
    --tblr-teal:       var(--crs-ok-bg);   --tblr-teal-lt:   var(--crs-ok-bg);   --tblr-teal-fg:   var(--crs-ok-fg);
    --tblr-lime:       var(--crs-ok-bg);   --tblr-lime-lt:   var(--crs-ok-bg);   --tblr-lime-fg:   var(--crs-ok-fg);

    /* warning: yellow, orange */
    --tblr-yellow:     var(--crs-warn-bg); --tblr-yellow-lt: var(--crs-warn-bg); --tblr-yellow-fg: var(--crs-warn-fg);
    --tblr-orange:     var(--crs-warn-bg); --tblr-orange-lt: var(--crs-warn-bg); --tblr-orange-fg: var(--crs-warn-fg);

    /* danger: red, pink */
    --tblr-red:        var(--crs-danger-bg); --tblr-red-lt:  var(--crs-danger-bg); --tblr-red-fg:  var(--crs-danger-fg);
    --tblr-pink:       var(--crs-danger-bg); --tblr-pink-lt: var(--crs-danger-bg); --tblr-pink-fg: var(--crs-danger-fg);

    /* info: blue, cyan, info */
    --tblr-blue:       var(--crs-info-bg); --tblr-blue-lt:  var(--crs-info-bg); --tblr-blue-fg:  var(--crs-info-fg);
    --tblr-cyan:       var(--crs-info-bg); --tblr-cyan-lt:  var(--crs-info-bg); --tblr-cyan-fg:  var(--crs-info-fg);
    --tblr-info:       var(--crs-info-bg); --tblr-info-lt:  var(--crs-info-bg); --tblr-info-fg:  var(--crs-info-fg);

    /* mine: purple, indigo */
    --tblr-purple:     var(--crs-mine-bg); --tblr-purple-lt: var(--crs-mine-bg); --tblr-purple-fg: var(--crs-mine-fg);
    --tblr-indigo:     var(--crs-mine-bg); --tblr-indigo-lt: var(--crs-mine-bg); --tblr-indigo-fg: var(--crs-mine-fg);
}

/* ── Base ───────────────────────────────────────────────────────────────── */
html, body {
    background: var(--crs-bg-page);
    color:       var(--crs-fg-primary);
    font-family: var(--crs-font-sans);
    font-size:   14px;
    line-height: 1.5;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--crs-font-sans);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.01em;
}
h1 { font-size: 22px; }
h2 { font-size: 20px; }
h3 { font-size: 16px; }
h4 { font-size: 13px; }

a { color: var(--crs-link); text-decoration: none; }
a:hover { color: var(--crs-link-hover); text-decoration: none; }

/* Utility */
.font-mono { font-family: var(--crs-font-mono); }
.label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--crs-fg-hint);
    font-weight: 500;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
    background: var(--crs-bg-card);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-lg);
    box-shadow: none;
}
.card-header {
    background: transparent;
    border-bottom: 1px solid var(--crs-border);
    padding: 12px 16px;
    min-height: auto;
}
.card-header .card-title { font-size: 14px; font-weight: 600; }
.card-body { padding: 16px; }
.card .card { background: var(--crs-bg-inset); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
.table { color: var(--crs-fg-primary); border-color: var(--crs-border); }
.table > :not(caption) > * > * { border-bottom-color: var(--crs-border); }
.table thead th {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--crs-fg-hint);
    font-weight: 500;
    border-bottom: 1px solid var(--crs-border);
    background: transparent;
}
.table-sm > :not(caption) > * > * { padding: 0.5rem 0.875rem; }
.table-hover > tbody > tr:hover > * {
    background: var(--crs-bg-hover);
    color: var(--crs-fg-primary);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
.form-control:not(.form-control-sm), .form-select:not(.form-select-sm) {
    background: var(--crs-bg-inset);
    color: var(--crs-fg-primary);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    min-height: 38px;
    font-size: 14px;
}
.form-control-sm, .form-select-sm {
    background: var(--crs-bg-inset);
    color: var(--crs-fg-primary);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-sm);
    font-size: 12px;
}
.form-control:focus, .form-select:focus {
    background: var(--crs-bg-inset);
    border-color: var(--crs-link);
    box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.15);
    color: var(--crs-fg-primary);
}
.form-control::placeholder { color: var(--crs-fg-hint); }

input::selection, textarea::selection {
    background: var(--crs-fg-primary);
    color: var(--crs-bg-inset);
}
input::-moz-selection, textarea::-moz-selection {
    background: var(--crs-fg-primary);
    color: var(--crs-bg-inset);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn {
    font-weight: 500;
    border-radius: var(--crs-radius-md);
    font-size: 13px;
    padding: 6px 12px;
    box-shadow: none;
    transition: background-color 120ms cubic-bezier(0.2, 0, 0.1, 1),
                border-color 120ms cubic-bezier(0.2, 0, 0.1, 1),
                color 120ms cubic-bezier(0.2, 0, 0.1, 1);
}
.btn-sm { padding: 4px 10px; font-size: 12px; }
.btn-primary {
    background: var(--crs-brand);
    color: #ffffff;
    border-color: var(--crs-brand);
}
.btn-primary:hover {
    background: var(--crs-brand-hover);
    color: #ffffff;
    border-color: var(--crs-brand-hover);
}
.btn-secondary {
    background: transparent;
    color: var(--crs-fg-primary);
    border: 1px solid var(--crs-border-strong);
}
.btn-secondary:hover {
    background: var(--crs-bg-hover);
    color: var(--crs-fg-primary);
    border-color: var(--crs-border-strong);
}
.btn-ghost {
    background: transparent;
    color: var(--crs-fg-muted);
    border: 1px solid transparent;
}
.btn-ghost:hover {
    background: var(--crs-bg-hover);
    color: var(--crs-fg-primary);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge {
    font-weight: 500;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: var(--crs-radius-md);
    background: var(--crs-bg-inset);
    color: var(--crs-fg-primary);
}
/* Color variants — !important beats Tabler's own !important on .bg-* */
.badge.bg-secondary, .badge.bg-secondary-lt,
.badge.bg-dark, .badge.bg-dark-lt,
.badge.bg-gray, .badge.bg-gray-lt {
    background: var(--crs-bg-inset) !important;
    color: var(--crs-fg-muted) !important;
}
.badge.bg-primary, .badge.bg-primary-lt,
.badge.bg-indigo, .badge.bg-indigo-lt,
.badge.bg-purple, .badge.bg-purple-lt {
    background: var(--crs-mine-bg) !important;
    color: var(--crs-mine-fg) !important;
}
.badge.bg-info, .badge.bg-info-lt,
.badge.bg-blue, .badge.bg-blue-lt,
.badge.bg-cyan, .badge.bg-cyan-lt {
    background: var(--crs-info-bg) !important;
    color: var(--crs-info-fg) !important;
}
.badge.bg-success, .badge.bg-success-lt,
.badge.bg-green, .badge.bg-green-lt,
.badge.bg-teal, .badge.bg-teal-lt,
.badge.bg-lime, .badge.bg-lime-lt {
    background: var(--crs-ok-bg) !important;
    color: var(--crs-ok-fg) !important;
}
.badge.bg-warning, .badge.bg-warning-lt,
.badge.bg-orange, .badge.bg-orange-lt,
.badge.bg-yellow, .badge.bg-yellow-lt {
    background: var(--crs-warn-bg) !important;
    color: var(--crs-warn-fg) !important;
}
.badge.bg-danger, .badge.bg-danger-lt,
.badge.bg-red, .badge.bg-red-lt,
.badge.bg-pink, .badge.bg-pink-lt {
    background: var(--crs-danger-bg) !important;
    color: var(--crs-danger-fg) !important;
}
/* text-*-fg utility classes — when used alone (no bg-*), make them readable */
.text-orange, .text-yellow, .text-warning,
.text-orange-fg, .text-yellow-fg, .text-warning-fg { color: var(--crs-warn-fg) !important; }

.text-red, .text-pink, .text-danger,
.text-red-fg, .text-pink-fg, .text-danger-fg { color: var(--crs-danger-fg) !important; }

.text-green, .text-teal, .text-lime, .text-success,
.text-green-fg, .text-teal-fg, .text-lime-fg, .text-success-fg { color: var(--crs-ok-fg) !important; }

.text-blue, .text-cyan, .text-info,
.text-blue-fg, .text-cyan-fg, .text-info-fg { color: var(--crs-info-fg) !important; }

.text-purple, .text-indigo,
.text-purple-fg, .text-indigo-fg { color: var(--crs-mine-fg) !important; }

.text-primary, .text-primary-fg { color: var(--crs-fg-primary) !important; }
.text-muted, .text-secondary { color: var(--crs-fg-muted) !important; }
.badge-dot {
    background: transparent !important;
    color: var(--crs-fg-muted) !important;
    padding-left: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.badge-dot::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.badge-count {
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    padding: 0 5px;
    font-size: 10.5px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ── Modals ─────────────────────────────────────────────────────────────── */
.modal-content {
    background: var(--crs-bg-card);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-xl);
}
.modal-header { border-bottom-color: var(--crs-border); padding: 12px 16px; }
.modal-footer { border-top-color: var(--crs-border); padding: 12px 16px; }

/* ═══════════════════════════════════════════════════════════════════════════
   Shell — sidebar + topbar
   ═══════════════════════════════════════════════════════════════════════════ */
.crs-shell {
    display: flex;
    align-items: stretch;
    min-height: 100vh;
}
.crs-sidebar {
    width: var(--crs-sidebar-w);
    flex: 0 0 var(--crs-sidebar-w);
    background: var(--crs-bg-page);
    border-right: 1px solid var(--crs-border);
    padding: 14px 12px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 0;
    align-self: flex-start;
    height: 100vh;
    overflow-y: auto;
    z-index: 20;
}
.crs-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 12px;
    border-bottom: 1px solid var(--crs-border);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--crs-fg-primary);
}
.crs-sidebar-section { display: flex; flex-direction: column; gap: 2px; }
.crs-sidebar-section > .label { padding: 0 8px 4px; }

.crs-sidebar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 10px;
    border-radius: var(--crs-radius-md);
    font-size: 13px;
    color: var(--crs-fg-muted);
    text-decoration: none;
    transition: background-color 120ms, color 120ms;
}
.crs-sidebar-item:hover { background: var(--crs-bg-hover); color: var(--crs-fg-primary); }
.crs-sidebar-item.is-active {
    background: var(--crs-bg-hover);
    color: var(--crs-fg-primary);
    box-shadow: inset 2px 0 0 var(--crs-brand);
}
.crs-sidebar-item .crs-item-badge {
    font-size: 10.5px;
    background: var(--crs-warn-bg);
    color: var(--crs-warn-fg);
    padding: 1px 6px;
    border-radius: 999px;
    border: 1px solid var(--crs-border);
}
.crs-sidebar-item .crs-item-badge.is-danger {
    background: var(--crs-danger-bg);
    color: var(--crs-danger-fg);
}

.crs-sidebar-user {
    margin-top: auto;
    padding: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: 1px solid var(--crs-border);
    font-size: 12px;
    color: var(--crs-fg-muted);
}

/* Main area */
.crs-main {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}
.crs-topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    height: var(--crs-topbar-h);
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 18px;
    background: color-mix(in srgb, var(--crs-bg-page) 92%, transparent);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--crs-border);
}
.crs-topbar .crs-breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--crs-fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.crs-topbar .crs-breadcrumbs .active { color: var(--crs-fg-primary); font-weight: 600; }
.crs-topbar .crs-breadcrumbs .sep { color: var(--crs-fg-disabled); }
.crs-topbar .crs-spacer { flex: 1; }
.crs-topbar .crs-search {
    width: 280px;
    height: 30px;
    font-size: 12.5px;
    color: var(--crs-fg-muted);
    background: var(--crs-bg-card);
    border: 1px solid var(--crs-border);
    border-radius: var(--crs-radius-md);
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: text;
}
.crs-topbar .crs-search .kbd {
    margin-left: auto;
    font-size: 10.5px;
    color: var(--crs-fg-hint);
    border: 1px solid var(--crs-border);
    border-radius: 3px;
    padding: 0 5px;
}

.crs-actions:empty { display: none; }
.crs-page-body { padding: 18px; flex: 1; }
.crs-page-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crs-fg-primary);
    margin: 0;
}
.crs-hamburger { display: none; }

/* ── Mobile: sidebar collapses to overlay ──────────────────────────────── */
@media (max-width: 991.98px) {
    .crs-shell { display: block; }
    .crs-sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--crs-sidebar-w);
        flex: none;
        transform: translateX(-100%);
        transition: transform 160ms cubic-bezier(0.2, 0, 0.1, 1);
        z-index: 50;
        box-shadow: 2px 0 24px rgba(0, 0, 0, 0.5);
    }
    .crs-shell.is-sidebar-open .crs-sidebar { transform: translateX(0); }
    .crs-hamburger {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: var(--crs-radius-md);
        color: var(--crs-fg-muted);
        background: transparent;
        border: 1px solid var(--crs-border);
        cursor: pointer;
    }
    .crs-backdrop {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        display: none;
    }
    .crs-shell.is-sidebar-open .crs-backdrop { display: block; }
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
    .crs-sidebar, .crs-topbar, .crs-backdrop { display: none !important; }
    .crs-shell { display: block; }
}

/* ── Phase-3 forward-compat (defined now, used later): ─────────────────── */
.crs-toasts {
    position: fixed;
    bottom: 18px;
    right: 18px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 60;
    pointer-events: none;
}
.crs-toasts .toast-item {
    pointer-events: auto;
    background: var(--crs-bg-card);
    border: 1px solid var(--crs-border-strong);
    border-radius: var(--crs-radius-lg);
    padding: 10px 14px;
    font-size: 12.5px;
    color: var(--crs-fg-primary);
    min-width: 240px;
    max-width: 360px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
.skeleton {
    background: linear-gradient(90deg, var(--crs-bg-inset) 25%, var(--crs-bg-hover) 50%, var(--crs-bg-inset) 75%);
    background-size: 200% 100%;
    animation: crs-skeleton 1.2s infinite;
    border-radius: var(--crs-radius-sm);
}
@keyframes crs-skeleton {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 2 — fields, section labels, empty-state
   ═══════════════════════════════════════════════════════════════════════════ */

.crs-field { margin-bottom: 14px; }
.crs-field > .label { display: block; margin-bottom: 4px; }
.crs-field-error {
    margin-top: 4px;
    font-size: 12px;
    color: var(--crs-danger-fg);
}

/* Section divider used inside forms via the input-group macro */
.crs-section-label {
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--crs-fg-hint);
    font-weight: 500;
    padding-bottom: 4px;
    margin: 14px 0 8px;
    border-bottom: 1px solid var(--crs-border);
}
.crs-section-label:first-child { margin-top: 0; }

/* Empty-state block */
.crs-empty-state {
    text-align: center;
    padding: 32px 16px;
    color: var(--crs-fg-muted);
}
.crs-empty-state-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    color: var(--crs-fg-disabled);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.crs-empty-state-icon svg { width: 100%; height: 100%; }
.crs-empty-state-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--crs-fg-primary);
    margin-bottom: 4px;
}
.crs-empty-state-sub { font-size: 12.5px; color: var(--crs-fg-muted); }
.crs-empty-state .btn { margin-top: 14px; }

/* Neutralize stock Bootstrap form-floating so existing page wrappers still render.
   Page templates have not been updated yet (Phase 4); the form-floating parent
   must not add its animated-label padding now that the child component renders
   its own top label. */
.form-floating {
    height: auto;
    padding-top: 0;
}
.form-floating > label { display: none; }
.form-floating > .crs-field > label { display: block; }

/* ── Legacy utilities (migrated from old document.twig inline styles) ──── */
.nw1px { white-space: nowrap; width: 1px; }
.right  { text-align: right !important; }
.center { text-align: center !important; }
.spanned { display: flex !important; justify-content: space-between !important; }
.spanned > div { display: inline-block !important; width: 50%; }
.spanned > div:last-child { text-align: right; }
.editable-cell { cursor: text; }
.editable-cell:hover { text-decoration: underline dotted var(--crs-fg-muted); }

/* ── Sticky-on-sticky: inline position:sticky inside body needs to clear the topbar ── */
.crs-page-body [style*="position:sticky"] { top: calc(var(--crs-topbar-h) + 8px) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3 — toast animations
   ═══════════════════════════════════════════════════════════════════════════ */

.crs-toasts .toast-item {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 160ms cubic-bezier(0.2, 0, 0.1, 1),
                transform 160ms cubic-bezier(0.2, 0, 0.1, 1);
}
.crs-toasts .toast-item.is-visible { opacity: 1; transform: translateX(0); }
.crs-toasts .toast-success { border-left: 3px solid var(--crs-ok-fg); }
.crs-toasts .toast-danger  { border-left: 3px solid var(--crs-danger-fg); }
.crs-toasts .toast-warning { border-left: 3px solid var(--crs-warn-fg); }
.crs-toasts .toast-info    { border-left: 3px solid var(--crs-fg-muted); }

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3 — command palette
   ═══════════════════════════════════════════════════════════════════════════ */

.crs-palette { padding: 0; }
.crs-palette-input-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--crs-border);
}
.crs-palette-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--crs-fg-primary);
    font-size: 15px;
    height: 28px;
}
.crs-palette-input::placeholder { color: var(--crs-fg-hint); }
.crs-palette-hint .kbd {
    font-size: 11px;
    color: var(--crs-fg-hint);
    border: 1px solid var(--crs-border);
    border-radius: 3px;
    padding: 0 5px;
}
.crs-palette-list {
    max-height: 50vh;
    overflow-y: auto;
    padding: 6px;
}
.crs-palette-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--crs-radius-md);
    color: var(--crs-fg-muted);
    text-decoration: none;
    font-size: 13px;
}
.crs-palette-item:hover,
.crs-palette-item.is-active {
    background: var(--crs-bg-hover);
    color: var(--crs-fg-primary);
}
.crs-palette-kind {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--crs-fg-hint);
    min-width: 54px;
}
.crs-palette-title { flex: 1; color: var(--crs-fg-primary); }
.crs-palette-sub   { color: var(--crs-fg-hint); font-size: 12px; }
.crs-palette-empty {
    padding: 24px;
    text-align: center;
    color: var(--crs-fg-hint);
    font-size: 13px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 3 — cheat sheet
   ═══════════════════════════════════════════════════════════════════════════ */

.crs-cheat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.crs-cheat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--crs-border);
    color: var(--crs-fg-muted);
}
.crs-cheat-row:last-child { border-bottom: none; }
.crs-cheat-row .kbd {
    font-size: 11px;
    color: var(--crs-fg-primary);
    background: var(--crs-bg-inset);
    border: 1px solid var(--crs-border-strong);
    border-radius: 3px;
    padding: 1px 6px;
    margin-left: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   Phase 4 — page-specific accents
   ═══════════════════════════════════════════════════════════════════════════ */

tr.js-unread { box-shadow: inset 3px 0 0 var(--crs-link); font-weight: 600; }
tr.js-unread td:first-child { padding-left: 14px; }