/* ═══════════════════════════════════════════════════════════════
   Haiplane Hub — Design System
   ═══════════════════════════════════════════════════════════════ */

:root {
    /* ─── Core palette ─── */
    --bg: #0c0e14;
    --bg-elevated: #111318;
    --surface: #171a24;
    --surface-hover: #1e2130;
    --surface-active: #252838;
    --border: #252838;
    --border-subtle: #1e2130;
    --border-focus: #6c5ce7;

    --text: #e4e7f0;
    --text-secondary: #a0a5b8;
    --text-muted: #6b7084;
    --text-inverse: #0c0e14;

    /* ─── Accent ─── */
    --accent: #6c5ce7;
    --accent-light: #a29bfe;
    --accent-dim: rgba(108, 92, 231, 0.12);
    --accent-glow: rgba(108, 92, 231, 0.25);

    /* ─── Semantic colors ─── */
    --green: #00b894;
    --green-dim: rgba(0, 184, 148, 0.10);
    --red: #e74c3c;
    --red-dim: rgba(231, 76, 60, 0.10);
    --orange: #f39c12;
    --orange-dim: rgba(243, 156, 18, 0.10);
    --blue: #0984e3;
    --blue-dim: rgba(9, 132, 227, 0.10);
    --yellow: #fdcb6e;
    --yellow-dim: rgba(253, 203, 110, 0.10);
    --purple: #7c3aed;

    /* ─── Spacing scale (4px base) ─── */
    --sp-1: 4px;
    --sp-2: 8px;
    --sp-3: 12px;
    --sp-4: 16px;
    --sp-5: 20px;
    --sp-6: 24px;
    --sp-8: 32px;
    --sp-10: 40px;
    --sp-12: 48px;

    /* ─── Layout ─── */
    --sidebar-w: 232px;
    --radius: 8px;
    --radius-sm: 6px;
    --radius-lg: 12px;
    --radius-pill: 100px;

    /* ─── Typography ─── */
    --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* ─── Shadows ─── */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 2px 8px rgba(0,0,0,0.3);
    --shadow-lg: 0 4px 16px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 16px rgba(108, 92, 231, 0.15);

    /* ─── Transitions ─── */
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    --duration: 0.15s;
    --duration-md: 0.25s;
}


/* ═══════════════════════════════════════════════════════════════
   Reset & Base
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html { font-size: 14px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body {
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
}

a { color: var(--accent-light); text-decoration: none; transition: color var(--duration) var(--ease); }
a:hover { color: #c4bfff; text-decoration: none; }

code, pre { font-family: var(--font-mono); }
code { font-size: 0.9em; background: var(--bg); padding: 2px 6px; border-radius: var(--radius-sm); }

::selection { background: var(--accent-dim); color: var(--text); }

/* ─── Scrollbar ─── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }


/* ═══════════════════════════════════════════════════════════════
   Utility classes — used in templates instead of inline styles
   ═══════════════════════════════════════════════════════════════ */

/* Text */
.u-pre-wrap { white-space: pre-wrap; }
.u-text-body { font-size: 13px; line-height: 1.6; }
.u-text-meta { font-size: 12px; color: var(--text-secondary); margin-top: var(--sp-3); line-height: 1.5; }
.u-text-muted { color: var(--text-muted); }
.u-nowrap { white-space: nowrap; }

/* Layout helpers */
.u-row { display: flex; gap: var(--sp-2); align-items: center; flex-wrap: wrap; }
.u-row-end { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.u-row-tight { display: flex; gap: var(--sp-2); align-items: center; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mb-0 { margin-bottom: 0; }
.u-mb-2 { margin-bottom: var(--sp-2); }
.u-mb-4 { margin-bottom: var(--sp-4); }
.u-mb-6 { margin-bottom: var(--sp-6); }
.u-form-contents { display: contents; }

/* Form sizing modifiers */
.input--sm { width: 80px; }
.input--md { width: 200px; }
.select--auto { width: auto; }
.textarea--sm { min-height: 60px; }
.textarea--md { min-height: 80px; }
.form-group--grow-2 { flex: 2; }
.filter-group--end { align-self: flex-end; }


/* Vast status */
.vast-badge .status-online { color: var(--green); font-weight: 600; }
.vast-badge .status-offline { color: var(--text-muted); }

/* Inline code variants */
.code-sm { font-size: 11px; padding: 1px 4px; }

/* Generic Q&A item (fallback for unknown update kinds) */
.qa-generic {
    background: var(--surface);
    border-left: 3px solid var(--border);
}


/* ═══════════════════════════════════════════════════════════════
   Layout
   ═══════════════════════════════════════════════════════════════ */

.layout {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    min-height: 100vh;
}

/* ─── Sidebar ─── */
.sidebar {
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding: var(--sp-6) 0;
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar .logo {
    padding: 0 var(--sp-6) var(--sp-8);
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
}

.sidebar .logo-main {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.3px;
}

.sidebar .logo-sub {
    font-size: 17px;
    font-weight: 400;
    color: var(--accent-light);
    letter-spacing: -0.3px;
}

.sidebar nav { flex: 1; display: flex; flex-direction: column; gap: var(--sp-1); padding: 0 var(--sp-2); }

.sidebar nav a {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    border-radius: var(--radius);
    transition: all var(--duration) var(--ease);
}

.sidebar nav a:hover {
    background: var(--surface-hover);
    color: var(--text);
}

.sidebar nav a.active {
    color: var(--accent-light);
    background: var(--accent-dim);
}

.sidebar .nav-icon {
    width: 20px;
    text-align: center;
    font-size: 14px;
    opacity: 0.7;
}

.sidebar nav a.active .nav-icon { opacity: 1; }

.sidebar .nav-badge {
    margin-left: auto;
    background: var(--accent);
    color: #fff;
    font-size: 10px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.6;
}

.sidebar-footer {
    padding: var(--sp-4) var(--sp-6) var(--sp-4);
    border-top: 1px solid var(--border);
    margin-top: auto;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.8;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.sidebar-user {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 11px;
}

.sidebar-user-name {
    color: var(--text-secondary);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-user-name::before {
    content: "● ";
    color: var(--green, #4ade80);
    margin-right: 2px;
}

.sidebar-user-form { margin: 0; padding: 0; line-height: 1; }
.sidebar-user-logout {
    background: transparent;
    border: none;
    color: var(--text-muted);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 0 4px;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.sidebar-user-logout:hover {
    color: var(--text);
    background: var(--surface-hover);
}

/* ═══════════════════════════════════════════════════════════════
   Login screen (multi-user MVP)
   =================================================================== */
.login-body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        linear-gradient(135deg, rgba(9, 132, 227, 0.16), transparent 34%),
        linear-gradient(315deg, rgba(0, 184, 148, 0.11), transparent 32%),
        var(--bg);
    padding: clamp(18px, 4vw, 40px);
}

.login-focus-page {
    width: min(460px, 100%);
}

.login-focus-wrap {
    width: 100%;
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
}

.login-card {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-8) var(--sp-6);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.34);
}
.login-card--focus {
    box-shadow: none;
}

.login-logo {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: var(--sp-6);
    justify-content: center;
}
.login-logo-main {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
}
.login-logo-sub {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent-light);
    background: var(--accent-dim);
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 600;
}

.login-title {
    margin: 0 0 var(--sp-2);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.login-hint {
    margin: 0 0 var(--sp-5);
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    line-height: 1.5;
}
.login-hint code {
    background: var(--bg);
    color: var(--accent-light);
    font-size: 11px;
    padding: 1px 5px;
    border-radius: var(--radius-sm);
}

.login-error {
    background: rgba(220, 38, 38, 0.1);
    border: 1px solid rgba(220, 38, 38, 0.3);
    color: #f87171;
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius-sm);
    font-size: 12px;
    margin-bottom: var(--sp-4);
    text-align: center;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.login-form--legacy {
    margin-top: var(--sp-3);
}
.login-form label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    font-weight: 600;
}
.login-form input[type="text"],
.login-form input[type="password"] {
    min-height: 42px;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    box-sizing: border-box;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.login-form input[type="text"]:focus,
.login-form input[type="password"]:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-glow);
}
.login-form button {
    min-height: 42px;
    margin-top: var(--sp-3);
    background: var(--accent);
    color: #fff;
    border: none;
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    transition: background var(--duration) var(--ease), transform var(--duration) var(--ease);
}
.login-form button:hover { background: var(--accent-light); }
.login-form button:active { transform: translateY(1px); }

.login-legacy {
    margin-top: var(--sp-4);
    font-size: 13px;
    color: var(--text-secondary);
}
.login-legacy summary {
    cursor: pointer;
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .login-body {
        padding: var(--sp-4);
    }
}

@media (max-width: 560px) {
    .login-card {
        padding: var(--sp-5);
    }
    .login-focus-wrap {
        padding: 0;
        border: none;
        background: transparent;
    }
}

/* ─── Main content ─── */
.main {
    padding: var(--sp-6) var(--sp-8);
    overflow-y: auto;
}


/* ═══════════════════════════════════════════════════════════════
   Typography
   ═══════════════════════════════════════════════════════════════ */

.page-header {
    margin-bottom: var(--sp-8);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-4);
    row-gap: var(--sp-2);
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1.3;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    flex-wrap: wrap;
    min-width: 0;
}

.page-title .badge {
    /* Inside large headings, scale badge slightly so it sits with text baseline */
    font-size: 12px;
    padding: 3px 10px;
}

.page-subtitle {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: var(--sp-1);
    /* When page-header is a flex row, the subtitle should still appear on its
       own line under the title rather than getting squeezed next to it. */
    flex-basis: 100%;
}


/* ─── Section titles ─── */
.section {
    margin-bottom: var(--sp-6);
}

.section-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-4);
}

.section-title {
    font-size: 15px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

/* When the toggle icon (▶) sits at the start of a collapsible section title,
   give it its own slot so it stays aligned with the text baseline */
.section-title .toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    color: var(--text-muted);
    font-size: 10px;
    transition: transform var(--duration-md) var(--ease);
}

.collapsible-toggle.open .toggle-icon { transform: rotate(90deg); }

.section-count {
    font-size: 11px;
    padding: 1px 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    background: var(--accent-dim);
    color: var(--accent-light);
    line-height: 1.6;
}

.section-count-warn {
    background: var(--orange-dim);
    color: var(--orange);
}


/* ═══════════════════════════════════════════════════════════════
   Status & System badges
   ═══════════════════════════════════════════════════════════════ */

.vast-badge {
    margin-bottom: var(--sp-6);
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--surface);
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    color: var(--text-secondary);
}


/* ═══════════════════════════════════════════════════════════════
   Inbox
   ═══════════════════════════════════════════════════════════════ */

.section-inbox {
    margin-bottom: var(--sp-8);
}

.inbox-clear {
    padding: var(--sp-6) var(--sp-5);
    background: var(--green-dim);
    border: 1px solid rgba(0, 184, 148, 0.15);
    border-radius: var(--radius);
    color: var(--green);
    font-size: 13px;
    text-align: center;
}

.inbox-filter-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface-hover);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
}

.inbox-filter-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.inbox-filter-link {
    font-size: 12px;
    color: var(--text-secondary);
    text-decoration: none;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
}

.inbox-filter-link.is-active {
    background: var(--accent-dim);
    color: var(--accent);
    font-weight: 600;
}

.inbox-filter-form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2);
}

.inbox-filter-input {
    min-width: 10rem;
    padding: 4px 8px;
    font-size: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
}

.inbox-filter-active {
    font-size: 11px;
    color: var(--text-muted);
}

.inbox-group {
    margin-bottom: var(--sp-5);
}

.inbox-group-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: var(--sp-3);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

/* Inbox — collapsible Proposals (dashboard home) */
.inbox-drafts--collapsible {
    display: block;
}

.inbox-drafts--collapsible > summary {
    list-style: none;
}

.inbox-drafts--collapsible > summary::-webkit-details-marker {
    display: none;
}

.inbox-group-title--collapsible {
    cursor: pointer;
    user-select: none;
    margin-bottom: var(--sp-3);
    transition: color var(--duration) var(--ease);
}

.inbox-group-title--collapsible:hover {
    color: var(--text-secondary);
}

.inbox-drafts--collapsible .inbox-toggle-icon {
    display: inline-block;
    font-size: 9px;
    line-height: 1;
    transition: transform var(--duration-md) var(--ease);
    color: var(--text-muted);
    transform: rotate(0deg);
}

.inbox-drafts--collapsible[open] .inbox-toggle-icon {
    transform: rotate(90deg);
}

.inbox-count {
    font-size: 10px;
    padding: 1px 7px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.6;
}

.inbox-drafts .inbox-count { background: var(--orange-dim); color: var(--orange); }
.inbox-questions .inbox-count { background: var(--yellow-dim); color: var(--yellow); }
.inbox-decisions .inbox-count { background: var(--red-dim); color: var(--red); }
.inbox-pending-reports .inbox-count { background: var(--orange-dim); color: var(--orange); }
.inbox-stale .inbox-count { background: var(--red-dim); color: var(--red); }

.inbox-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-2);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                opacity var(--duration-md) var(--ease);
}

.inbox-drafts .inbox-item { border-left: 3px solid var(--orange); }
.inbox-questions .inbox-item { border-left: 3px solid var(--yellow); }
.inbox-decisions .inbox-item { border-left: 3px solid var(--red); }

.inbox-item:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.inbox-item-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}

.inbox-item-link {
    font-size: 13px;
    font-weight: 600;
}

.inbox-item-meta {
    font-size: 11px;
    color: var(--text-muted);
}

.inbox-item-desc {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-2);
    line-height: 1.5;
}

.inbox-item-actions {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    flex-wrap: wrap;
}

.inbox-question-text {
    font-size: 12px;
    color: var(--yellow);
    background: var(--yellow-dim);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    margin: var(--sp-2) 0;
    line-height: 1.5;
}

.inbox-answer-form {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    align-items: center;
}

.inbox-answer-input {
    flex: 1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    transition: border-color var(--duration) var(--ease);
}

.inbox-answer-input:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.inbox-item-done {
    padding: var(--sp-3) var(--sp-4);
    background: var(--green-dim);
    border: 1px solid rgba(0, 184, 148, 0.15);
    border-radius: var(--radius);
    margin-bottom: var(--sp-2);
    font-size: 12px;
    color: var(--text-secondary);
    opacity: 0.8;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}


/* ═══════════════════════════════════════════════════════════════
   Epic cards
   ═══════════════════════════════════════════════════════════════ */

.epic-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--purple);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-bottom: var(--sp-3);
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.epic-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
}

.epic-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    flex-wrap: wrap;
}

.epic-title {
    font-size: 14px;
    font-weight: 600;
}

.progress-sm {
    height: 14px;
    margin-bottom: var(--sp-3);
}

.progress-sm .progress-label {
    font-size: 9px;
}

.epic-children {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
}

.epic-child-link {
    font-size: 12px;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) 0;
    transition: color var(--duration) var(--ease);
    min-width: 0;
}

.epic-child-link:hover { color: var(--text); }

.epic-child-link .epic-child-title {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.epic-more {
    font-size: 11px;
    color: var(--text-muted);
    padding: var(--sp-1) 0;
}

.epic-empty {
    font-size: 12px;
    color: var(--text-muted);
    padding: var(--sp-1) 0;
}


/* ═══════════════════════════════════════════════════════════════
   Filter bar
   ═══════════════════════════════════════════════════════════════ */

.filter-bar {
    display: flex;
    gap: var(--sp-3);
    align-items: flex-end;
    flex-wrap: wrap;
    margin-bottom: var(--sp-6);
    padding: var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    flex: 1 1 140px;
    min-width: 140px;
}

.filter-group label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.filter-control,
.filter-group select,
.filter-group input[type="number"],
.filter-group input[type="text"] {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-3);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    transition: border-color var(--duration) var(--ease);
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
}

.filter-group select:focus,
.filter-group input:focus,
.filter-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 2px var(--accent-dim);
}

.filter-group--end {
    flex: 0 0 auto;
    min-width: auto;
}

.filter-reset-btn {
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    white-space: nowrap;
}

/* The applied state mode, made visible and removable (#626). It arrives from a
   project card's link and used to have no representation at all: nothing on
   screen said the list was narrowed, and the only way out was Reset, which
   dropped the project too. Accent-dim on accent-light is the same emphasis pair
   the sidebar's active item uses, so an applied filter reads as "on" rather
   than as a new kind of object. */
.state-chip-row { margin-bottom: var(--sp-3); }

.state-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: var(--sp-1) var(--sp-3);
    background: var(--accent-dim);
    border: 1px solid var(--border-focus);
    border-radius: var(--radius-lg);
    color: var(--accent-light);
    font-size: 12px;
    font-weight: 600;
}

.state-chip-clear {
    color: var(--accent-light);
    text-decoration: none;
    font-size: 14px;
    line-height: 1;
    /* 24px of hit area for a glyph that draws about eight: the target is the
       one control on this row and it must not need aiming on a phone. */
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
}

.state-chip-clear:hover { background: var(--surface-active); color: var(--text); }


/* ═══════════════════════════════════════════════════════════════
   Kanban board
   ═══════════════════════════════════════════════════════════════ */

.kanban {
    display: flex;
    align-items: stretch;
    gap: var(--sp-3);
    margin-bottom: var(--sp-8);
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: var(--sp-3);
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.kanban::-webkit-scrollbar { height: 8px; }
.kanban::-webkit-scrollbar-track { background: transparent; }
.kanban::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}
.kanban::-webkit-scrollbar-thumb:hover { background: var(--border-subtle); }

.kanban-col-wrap {
    flex: 0 0 280px;
    width: 280px;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
    transition: flex var(--duration-md) var(--ease),
                width var(--duration-md) var(--ease);
}

/* Collapsed state — wrap shrinks to a thin vertical strip */
.kanban-col-wrap:has(.kanban-col-toggle:checked) {
    flex: 0 0 36px;
    width: 36px;
}

.kanban-col-toggle { display: none; }

/* Hide the expanded column when toggle is checked */
.kanban-col-wrap:has(.kanban-col-toggle:checked) .kanban-column {
    display: none;
}

/* Show the collapsed strip only when toggle is checked */
.kanban-collapsed { display: none; }
.kanban-col-wrap:has(.kanban-col-toggle:checked) .kanban-collapsed {
    display: flex;
}

.kanban-collapsed {
    writing-mode: vertical-lr;
    text-orientation: mixed;
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-4) var(--sp-2);
    cursor: pointer;
    align-items: center;
    justify-content: flex-start;
    gap: var(--sp-3);
    flex: 1 1 auto;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease);
    user-select: none;
    position: relative;
    overflow: hidden;
}

.kanban-collapsed::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--text-muted);
    opacity: 0.6;
}

.kanban-collapsed:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
}

.kanban-collapsed .col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text);
}

.kanban-collapsed .col-count {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.5;
    writing-mode: horizontal-tb;
}

.kanban-column {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-3) var(--sp-3) var(--sp-4);
    min-height: 200px;
    max-height: 72vh;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
}

/* Color accent strip on top of each column */
.kanban-column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--text-muted);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.kanban-column.col-draft::before    { background: var(--orange); }
.kanban-column.col-open::before     { background: var(--accent-light); }
.kanban-column.col-running::before  { background: var(--blue); }
.kanban-column.col-review::before   { background: var(--accent); }
.kanban-column.col-decision::before { background: var(--red); }
.kanban-column.col-needs_info::before { background: var(--yellow); }
.kanban-column.col-done::before     { background: var(--green); }

.kanban-collapsed.col-draft::before    { background: var(--orange); }
.kanban-collapsed.col-open::before     { background: var(--accent-light); }
.kanban-collapsed.col-running::before  { background: var(--blue); }
.kanban-collapsed.col-review::before   { background: var(--accent); }
.kanban-collapsed.col-decision::before { background: var(--red); }
.kanban-collapsed.col-needs_info::before { background: var(--yellow); }

.kanban-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-1) var(--sp-3);
    border-bottom: 1px solid var(--border);
    flex: 0 0 auto;
}

.kanban-header .col-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text);
}

/* Cards container — scrolls within column, leaves header fixed */
.kanban-column > .kanban-card,
.kanban-column > .empty,
.kanban-column > .kanban-more {
    flex: 0 0 auto;
}

.kanban-column {
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.kanban-column::-webkit-scrollbar { width: 6px; }
.kanban-column::-webkit-scrollbar-track { background: transparent; }
.kanban-column::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 3px;
}

.kanban-collapse-btn {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 12px;
    padding: 2px 4px;
    line-height: 1;
    border-radius: var(--radius-sm);
    transition: color var(--duration) var(--ease),
                background var(--duration) var(--ease);
}

.kanban-collapse-btn:hover {
    color: var(--text);
    background: var(--surface-hover);
}

.kanban-header .col-count {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-weight: 700;
    line-height: 1.5;
}

.col-draft .col-count { background: var(--orange-dim); color: var(--orange); }
.col-open .col-count { background: var(--accent-dim); color: var(--accent-light); }
.col-running .col-count { background: var(--blue-dim); color: var(--blue); }
.col-review .col-count { background: var(--accent-dim); color: var(--accent-light); }
.col-decision .col-count { background: var(--red-dim); color: var(--red); }
.col-needs_info .col-count { background: var(--yellow-dim); color: var(--yellow); }
.col-done .col-count { background: var(--green-dim); color: var(--green); }

.kanban-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    margin-bottom: var(--sp-2);
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                transform var(--duration) var(--ease),
                opacity var(--duration-md) var(--ease);
}

.kanban-card:hover {
    border-color: var(--accent);
    box-shadow: var(--shadow-sm);
    transform: translateY(-1px);
}

.kanban-card .card-link {
    font-size: 12px;
    font-weight: 600;
    display: block;
    margin-bottom: var(--sp-1);
    line-height: 1.4;
    /* Long titles — break only at word boundaries, never mid-word */
    overflow-wrap: anywhere;
    word-break: normal;
}

.kanban-card .card-id {
    color: var(--text-muted);
    font-weight: 400;
    font-family: var(--font-mono);
    font-size: 11px;
    margin-right: var(--sp-1);
}

.kanban-card .card-meta {
    font-size: 10px;
    color: var(--text-muted);
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
    align-items: center;
    margin-top: var(--sp-1);
}

.kanban-card .card-progress-mini {
    font-size: 10px;
    color: var(--green);
    font-weight: 700;
    font-family: var(--font-mono);
}

.kanban-card .card-actions {
    margin-top: var(--sp-2);
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}

/* Inside narrow kanban cards, action buttons may not fit at full size — make
   them stretch and shrink before being clipped */
.kanban-card .card-actions .btn {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: var(--sp-2);
    padding-right: var(--sp-2);
}

.kanban-more {
    display: block;
    text-align: center;
    font-size: 11px;
    padding: var(--sp-2);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    transition: background var(--duration) var(--ease);
}

.kanban-more:hover { background: var(--surface-hover); }


/* ═══════════════════════════════════════════════════════════════
   Cards / Grid
   ═══════════════════════════════════════════════════════════════ */

/* ─── Dashboard two-column layout ─── */
.dash-two-col {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--sp-4);
    margin-bottom: var(--sp-6);
}

.dash-primary {
    min-width: 0;
}

.dash-aside {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.dash-aside .card {
    /* Don't stretch cards to equal heights — let them size to content so the
       column doesn't show big empty zones */
    flex: 0 0 auto;
}

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--sp-4);
    margin-bottom: var(--sp-8);
}

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
}

.card-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: var(--sp-4);
}

.form-row {
    display: flex;
    gap: var(--sp-3);
    margin-bottom: var(--sp-3);
    align-items: flex-start;
}

.form-row .form-group {
    flex: 1;
    margin-bottom: 0;
}


/* ─── Lists inside cards ─── */
.item-list { list-style: none; }
.item-list li {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.item-list li:last-child { border-bottom: none; }

.item-list .meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 2px;
}


/* ═══════════════════════════════════════════════════════════════
   Status badges
   ═══════════════════════════════════════════════════════════════ */

.badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1.5;
    white-space: nowrap;
}

/* Compact badge variant (inside cards / inside other badges). MUST stay below
   .badge: equal specificity means the later rule wins, and for as long as this
   sat 1200 lines above it, all 18 uses rendered at 11px while the file said
   9px (#624). */
.badge--xs {
    font-size: 9px;
    padding: 1px 5px;
    letter-spacing: 0.2px;
}

.badge-draft { background: var(--orange-dim); color: var(--orange); }
.badge-open { background: var(--accent-dim); color: var(--accent-light); }
.badge-pending { background: var(--orange-dim); color: var(--orange); }
.badge-running { background: var(--blue-dim); color: var(--blue); }
.badge-needs_info { background: var(--yellow-dim); color: var(--yellow); }
.badge-completed { background: var(--green-dim); color: var(--green); }
.badge-failed { background: var(--red-dim); color: var(--red); }
.badge-approved { background: var(--green-dim); color: var(--green); }
/* Solo-mode verdict (#434): the implementer approved their own work. */
.badge-self-approved { background: var(--orange-dim); color: var(--orange); }
.badge-rejected { background: var(--red-dim); color: var(--red); }
.badge-auto { background: var(--accent-dim); color: var(--accent-light); }
.badge-openrouter { background: var(--blue-dim); color: var(--blue); }
.badge-vast { background: var(--green-dim); color: var(--green); }
.badge-human { background: var(--accent-dim); color: var(--accent-light); }
.badge-agent { background: var(--orange-dim); color: var(--orange); }
.badge-review { background: var(--accent-dim); color: var(--accent-light); }
.badge-fix_requested { background: var(--orange-dim); color: var(--orange); }
.badge-ci_check { background: var(--blue-dim); color: var(--blue); }
.badge-needs_decision { background: var(--red-dim); color: var(--red); }
.badge-pending_report { background: var(--orange-dim); color: var(--orange); }
.badge-stale { background: var(--red-dim); color: var(--red); }
.badge-arbitration { background: var(--red-dim); color: var(--red); }
.badge-alert { background: var(--red-dim); color: var(--red); }
.badge-question { background: var(--yellow-dim); color: var(--yellow); }
.badge-answer { background: var(--green-dim); color: var(--green); }

/* ─── Risk class badges (#581) ─── */
/* R3+ must jump out of a list of thirty cards; "not computed" is visually
   distinct from every class — R0 included — so absence never reads as safe. */
.badge-risk-r0 { background: var(--green-dim); color: var(--green); }
.badge-risk-r1 { background: var(--green-dim); color: var(--green); }
.badge-risk-r2 { background: var(--orange-dim); color: var(--orange); }
.badge-risk-r3 { background: #ea580c; color: #fff; }
.badge-risk-r4 { background: #dc2626; color: #fff; }
.badge-risk-r5 { background: #7f1d1d; color: #fff; }
.badge-risk-unset { background: transparent; color: var(--text-muted); border: 1px dashed var(--text-muted); }

/* ─── Task type badges ─── */
.badge-type-epic { background: var(--purple); color: #fff; }
.badge-type-feature { background: #2563eb; color: #fff; }
.badge-type-task { background: var(--accent-dim); color: var(--text-secondary); }
.badge-type-subtask { background: rgba(108, 92, 231, 0.06); color: var(--text-muted); font-size: 10px; }

/* ─── Priority badges ─── */
.badge-priority-critical { background: #dc2626; color: #fff; }
.badge-priority-high { background: #ea580c; color: #fff; }
.badge-priority-medium { background: rgba(108, 92, 231, 0.06); color: var(--text-muted); }
.badge-priority-low { background: transparent; color: var(--text-muted); font-size: 10px; }


/* ═══════════════════════════════════════════════════════════════
   Data table
   ═══════════════════════════════════════════════════════════════ */

.data-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: var(--sp-5);
}

.data-table th {
    text-align: left;
    padding: var(--sp-3) var(--sp-4);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    border-bottom: 2px solid var(--border);
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 1;
}

.data-table td {
    padding: var(--sp-3) var(--sp-4);
    font-size: 13px;
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: middle;
}

.data-table tbody tr {
    transition: background var(--duration) var(--ease);
}

.data-table tbody tr:hover td { background: var(--surface-hover); }

.data-table tbody tr:last-child td { border-bottom: none; }

.task-table-badge {
    height: 24px;
    padding: 0 var(--sp-2);
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    font-size: 10.5px;
    line-height: 1;
    letter-spacing: 0.35px;
    white-space: nowrap;
}

.task-table-badge--type {
    width: 76px;
}

.task-table-badge--status {
    width: 124px;
}

.task-table-badge--priority {
    width: 82px;
}

.task-table-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-1);
}

.task-table-action {
    width: 96px;
    height: 36px;
    padding: 0 var(--sp-3);
    line-height: 1;
    box-sizing: border-box;
}


/* ═══════════════════════════════════════════════════════════════
   Progress bar
   ═══════════════════════════════════════════════════════════════ */

.progress-bar-container {
    position: relative;
    height: 20px;
    background: var(--accent-dim);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--accent), var(--accent-light));
    border-radius: var(--radius-sm);
    transition: width 0.5s var(--ease);
    min-width: 2px;
}

.progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}


/* ═══════════════════════════════════════════════════════════════
   Forms
   ═══════════════════════════════════════════════════════════════ */

.form-group {
    margin-bottom: var(--sp-4);
}

.form-group label {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: var(--text-muted);
}

.form-group textarea { min-height: 100px; resize: vertical; }

.form-inline {
    display: flex;
    gap: var(--sp-2);
    align-items: flex-end;
}

.form-inline .form-group { margin-bottom: 0; flex: 1; }


/* ═══════════════════════════════════════════════════════════════
   Buttons
   ═══════════════════════════════════════════════════════════════ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-2);
    padding: var(--sp-2) var(--sp-5);
    border-radius: var(--radius);
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all var(--duration) var(--ease);
    white-space: nowrap;
    line-height: 1.5;
}

.btn:focus-visible {
    outline: 2px solid var(--accent-light);
    outline-offset: 2px;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #7d6ef0; color: #fff; }

.btn-success { background: var(--green); color: #fff; }
.btn-success:hover { background: #00d2a4; color: #fff; }

.btn-danger { background: var(--red); color: #fff; }
.btn-danger:hover { background: #f05e50; color: #fff; }

.btn-warning { background: var(--orange); color: #fff; }
.btn-warning:hover { background: #fbb034; color: #fff; }

.btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border: 1px solid var(--border);
}
.btn-ghost:hover { background: var(--surface-hover); color: var(--text); }

.btn-sm { padding: var(--sp-1) var(--sp-3); font-size: 12px; }
.btn-xs { padding: 3px var(--sp-3); font-size: 11px; border-radius: var(--radius-sm); }


/* ═══════════════════════════════════════════════════════════════
   Q&A thread
   ═══════════════════════════════════════════════════════════════ */

.qa-thread { margin: var(--sp-3) 0; }

.qa-item {
    padding: var(--sp-3) var(--sp-4);
    border-radius: var(--radius);
    margin-bottom: var(--sp-3);
    font-size: 13px;
    line-height: 1.6;
}

.qa-question {
    background: var(--yellow-dim);
    border-left: 3px solid var(--yellow);
}

.qa-answer {
    background: var(--green-dim);
    border-left: 3px solid var(--green);
}

.qa-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--sp-1);
}

.qa-question .qa-label { color: var(--yellow); }
.qa-answer .qa-label { color: var(--green); }

.qa-review {
    background: var(--accent-dim);
    border-left: 3px solid var(--accent-light);
}
.qa-review .qa-label { color: var(--accent-light); }

.qa-arbitration {
    background: var(--red-dim);
    border-left: 3px solid var(--red);
}
.qa-arbitration .qa-label { color: var(--red); }

.qa-alert {
    background: var(--orange-dim);
    border-left: 3px solid var(--orange);
}
.qa-alert .qa-label { color: var(--orange); }


/* ═══════════════════════════════════════════════════════════════
   Log output
   ═══════════════════════════════════════════════════════════════ */

.log-output {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.6;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-all;
    max-height: 400px;
    overflow-y: auto;
    color: var(--text-secondary);
    tab-size: 4;
}

.log-output-full { max-height: none; }


/* ═══════════════════════════════════════════════════════════════
   Activity timeline
   ═══════════════════════════════════════════════════════════════ */

.activity-timeline { list-style: none; }

.activity-timeline li {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 12px;
    display: flex;
    align-items: baseline;
    gap: var(--sp-3);
}

.activity-timeline li:last-child { border-bottom: none; }

.activity-timeline .activity-time {
    color: var(--text-muted);
    font-size: 11px;
    font-family: var(--font-mono);
    white-space: nowrap;
    flex: 0 0 auto;
}

.activity-timeline .activity-kind {
    flex: 0 0 auto;
}

.activity-timeline .activity-kind .badge {
    font-size: 10px;
    padding: 1px 6px;
}

.activity-timeline .activity-summary {
    flex: 1;
    color: var(--text-secondary);
}

/* Compact variant — used inside the right sidebar (.dash-aside)
   where horizontal space is narrow. Stacks meta + summary vertically. */
.activity-timeline--compact li {
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-1);
    padding: var(--sp-2) 0;
    font-size: 11px;
}

.activity-timeline--compact .activity-meta-row {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

.activity-timeline--compact .activity-time {
    font-size: 10px;
}

.activity-timeline--compact .activity-summary {
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-secondary);
    overflow-wrap: anywhere;
}


/* ═══════════════════════════════════════════════════════════════
   Breadcrumb
   ═══════════════════════════════════════════════════════════════ */

.breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    font-size: 12px;
    margin-bottom: var(--sp-2);
    flex-wrap: wrap;
    color: var(--text-muted);
}

.breadcrumb a { color: var(--accent-light); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--text-muted); font-size: 10px; }
.breadcrumb-current { color: var(--text); font-weight: 600; }


/* ═══════════════════════════════════════════════════════════════
   Empty state
   ═══════════════════════════════════════════════════════════════ */

.empty {
    text-align: center;
    padding: var(--sp-10);
    color: var(--text-muted);
    font-size: 13px;
}

.empty-icon {
    font-size: 28px;
    margin-bottom: var(--sp-3);
    opacity: 0.4;
}

.empty-text {
    font-size: 13px;
    color: var(--text-muted);
}

.empty-hint {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: var(--sp-1);
    opacity: 0.7;
}

.empty-sm {
    padding: var(--sp-3) var(--sp-4);
}

.empty-xs {
    padding: var(--sp-2) var(--sp-3);
    font-size: 11px;
}


/* ═══════════════════════════════════════════════════════════════
   Task detail — info grid
   ═══════════════════════════════════════════════════════════════ */

.task-detail-page {
    max-width: 1440px;
}

.task-detail-breadcrumb {
    margin-bottom: var(--sp-4);
}

.task-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--sp-5);
    align-items: end;
    background: linear-gradient(135deg, var(--surface), var(--bg-elevated));
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-6);
    margin-bottom: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

.task-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.task-kicker a {
    color: var(--accent-light);
}

.task-hero-title {
    font-size: clamp(24px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: -0.8px;
    color: var(--text);
    margin-bottom: var(--sp-4);
    max-width: 980px;
}

.task-hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}

.task-detail-badge {
    height: 26px;
    padding: 0 10px;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.task-hero-status {
    min-width: 210px;
    text-align: right;
    color: var(--text-muted);
}

.task-hero-status-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    margin-bottom: 4px;
}

.task-hero-status-value {
    font-size: 12px;
    color: var(--text-secondary);
}

.task-progress-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    margin-bottom: var(--sp-5);
}

.task-progress-head {
    display: flex;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.task-progress-head strong {
    color: var(--text-secondary);
}

.task-detail-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: var(--sp-5);
    align-items: start;
}

.task-detail-main {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    min-width: 0;
}

.task-detail-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    position: sticky;
    top: var(--sp-5);
}

.task-content-card,
.task-sidebar-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    box-shadow: var(--shadow-sm);
}

.task-description-card {
    border-color: rgba(108, 92, 231, 0.24);
}

.task-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}

.task-card-header h2,
.task-sidebar-title {
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
}

.task-description-text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--text);
}

.task-rationale {
    margin-top: var(--sp-4);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.task-rationale > span {
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
    margin-bottom: var(--sp-2);
}

.task-checklist {
    padding-left: var(--sp-5);
    color: var(--text-secondary);
    line-height: 1.6;
}

.task-checklist li + li {
    margin-top: var(--sp-2);
}

.task-children-table {
    margin-bottom: 0;
}

.task-sidebar-title {
    margin-bottom: var(--sp-4);
}

.task-actions-card {
    border-color: rgba(0, 184, 148, 0.24);
}

.task-action-state {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: var(--sp-4);
}

.task-action-state--warning {
    color: var(--yellow);
}

.task-action-state--danger {
    color: var(--red);
}

.task-action-stack {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.task-action-stack + .task-action-stack {
    margin-top: var(--sp-3);
}

.task-action-stack--separated {
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border-subtle);
}

.task-action-label {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--text-muted);
}

.task-action-control {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    font-family: var(--font);
    font-size: 13px;
    height: 56px;
    min-height: 56px;
    line-height: 56px;
    padding: 0 var(--sp-3);
    box-sizing: border-box;
}

.task-action-control:focus {
    outline: none;
    border-color: var(--border-focus);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.task-action-textarea {
    min-height: 96px;
    height: auto;
    padding: var(--sp-3);
    line-height: 1.5;
    resize: vertical;
}

.task-action-btn {
    width: 100%;
    height: 56px;
    min-height: 56px;
    padding: 0 var(--sp-4);
    box-sizing: border-box;
    line-height: 1;
}

.task-action-checkbox {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    color: var(--text-secondary);
    font-size: 12px;
}

.task-action-note {
    background: var(--bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-3);
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.55;
    max-height: 180px;
    overflow: auto;
    margin-bottom: var(--sp-3);
}

.task-action-note--warning {
    background: rgba(251, 176, 52, 0.12);
    border-color: var(--orange);
    color: var(--text);
}

.btn-secondary { background: var(--bg); color: var(--text); border: 1px solid var(--border-subtle); }
.btn-secondary:hover { background: var(--border-subtle); }

.dor-gate-warning {
    background: rgba(251, 176, 52, 0.12);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    padding: var(--sp-3);
    font-size: 12px;
    line-height: 1.5;
}

.dor-gate-warning p { margin: var(--sp-2) 0; }

.dor-gate-list { margin: var(--sp-2) 0; padding-left: var(--sp-4); }
.dor-gate-list li { margin-bottom: var(--sp-2); }

.task-meta-list {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 0;
    font-size: 12px;
}

.task-meta-list dt,
.task-meta-list dd {
    padding: var(--sp-3) 0;
    border-bottom: 1px solid var(--border-subtle);
}

.task-meta-list dt {
    color: var(--text-muted);
    font-weight: 700;
}

.task-meta-list dd {
    color: var(--text-secondary);
    min-width: 0;
    overflow-wrap: anywhere;
}

.task-meta-list dt:last-of-type,
.task-meta-list dd:last-of-type {
    border-bottom: none;
}

.task-meta-muted {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
}

.task-danger-card {
    border-color: rgba(214, 48, 49, 0.3);
}

.task-danger-copy {
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: var(--sp-4);
}

.task-sidebar-nav {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.task-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.task-timeline {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.task-timeline::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 6px;
    bottom: 6px;
    width: 1px;
    background: var(--border-subtle);
}

.task-timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: var(--sp-3);
}

.task-timeline-marker {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent);
    border: 3px solid var(--surface);
    box-shadow: 0 0 0 1px var(--border-subtle);
    margin-top: 6px;
    z-index: 1;
}

.task-timeline-body {
    background: var(--bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
}

.task-timeline-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    align-items: center;
    color: var(--text-muted);
    font-size: 11px;
    margin-bottom: var(--sp-2);
}

.task-timeline-content {
    color: var(--text-secondary);
    font-size: 13px;
    line-height: 1.55;
}

.detail-grid {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 0;
    font-size: 13px;
}

.detail-grid dt {
    padding: var(--sp-3) var(--sp-4);
    color: var(--text-muted);
    font-weight: 500;
    border-bottom: 1px solid var(--border-subtle);
}

.detail-grid dd {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--border-subtle);
}

.detail-grid dt:last-of-type,
.detail-grid dd:last-of-type { border-bottom: none; }

/* Action panels */
.action-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--sp-5);
    margin-top: var(--sp-4);
}

.action-panel-warning {
    border-color: var(--yellow);
    border-left: 3px solid var(--yellow);
}

.action-panel-danger {
    border-color: var(--red);
    border-left: 3px solid var(--red);
}

.action-panel-title {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: var(--sp-4);
    display: flex;
    align-items: center;
    gap: var(--sp-2);
}

.action-panel-warning .action-panel-title { color: var(--yellow); }
.action-panel-danger .action-panel-title { color: var(--red); }

/* Navigation bar at bottom */
.nav-bar {
    margin-top: var(--sp-6);
    display: flex;
    gap: var(--sp-3);
    flex-wrap: wrap;
    align-items: center;
}


/* ═══════════════════════════════════════════════════════════════
   Collapsible section (create form)
   ═══════════════════════════════════════════════════════════════ */

.collapsible-toggle {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    cursor: pointer;
    user-select: none;
}

.collapsible-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height 0.3s var(--ease), opacity 0.2s var(--ease), margin 0.3s var(--ease);
    margin-top: 0;
}

.collapsible-body.open {
    max-height: 2000px;
    opacity: 1;
    margin-top: var(--sp-4);
}


/* ═══════════════════════════════════════════════════════════════
   Dashboard topbar — compact stats strip with single-line layout
   ═══════════════════════════════════════════════════════════════ */

.topbar {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-3) var(--sp-4);
    margin-bottom: var(--sp-5);
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    flex-wrap: wrap;
}

.topbar-brand {
    display: inline-flex;
    align-items: baseline;
    gap: var(--sp-2);
    flex: 0 0 auto;
}

.topbar-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.2px;
}

.topbar-sub {
    font-size: 11px;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.topbar-stats {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    flex: 1 1 auto;
    flex-wrap: wrap;
    justify-content: center;
}

.topbar-stat {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--border);
    text-decoration: none;
    transition: background var(--duration) var(--ease),
                border-color var(--duration) var(--ease),
                transform var(--duration) var(--ease);
}

.topbar-stat:hover {
    background: var(--surface-hover);
    border-color: var(--accent);
    transform: translateY(-1px);
}

.topbar-stat-label { /* --text-secondary: 7.08:1; --text-muted было 3.53:1 (#622) */
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.topbar-stat-value {
    font-size: 13px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    min-width: 14px;
    text-align: center;
}

/* Per-status accent — only when value > 0 */
.topbar-stat--inbox:not(.is-zero)    { border-color: var(--orange); }
.topbar-stat--inbox:not(.is-zero) .topbar-stat-value    { color: var(--orange); }

.topbar-stat--draft:not(.is-zero)    { border-color: var(--orange); }
.topbar-stat--draft:not(.is-zero) .topbar-stat-value    { color: var(--orange); }

.topbar-stat--open:not(.is-zero)     { border-color: var(--accent-light); }
.topbar-stat--open:not(.is-zero) .topbar-stat-value     { color: var(--accent-light); }

.topbar-stat--running:not(.is-zero)  { border-color: var(--blue); }
.topbar-stat--running:not(.is-zero) .topbar-stat-value  { color: var(--blue); }

.topbar-stat--review:not(.is-zero)   { border-color: var(--accent); }
.topbar-stat--review:not(.is-zero) .topbar-stat-value   { color: var(--accent-light); }

.topbar-stat--decision:not(.is-zero) { border-color: var(--red); }
.topbar-stat--decision:not(.is-zero) .topbar-stat-value { color: var(--red); }

.topbar-stat.is-zero {
    opacity: 0.55;
}

.topbar-vast {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    padding: 4px 10px;
    border-radius: var(--radius);
    background: var(--surface);
    border: 1px solid var(--green);
    flex: 0 0 auto;
}

.topbar-vast.is-offline {
    border-color: var(--border);
    opacity: 0.7;
}

.topbar-vast-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    box-shadow: 0 0 6px var(--green);
}

.topbar-vast.is-offline .topbar-vast-dot {
    background: var(--text-muted);
    box-shadow: none;
}

.topbar-vast-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

.topbar-vast-state {
    font-size: 12px;
    font-weight: 600;
    color: var(--green);
}

.topbar-vast.is-offline .topbar-vast-state {
    color: var(--text-muted);
}

@media (max-width: 900px) {
    .topbar { gap: var(--sp-3); padding: var(--sp-3); }
    .topbar-stats { justify-content: flex-start; }
}


/* ═══════════════════════════════════════════════════════════════
   New Task card — Kanban-style structured form
   ═══════════════════════════════════════════════════════════════ */

.new-task-card {
    background: var(--bg-elevated);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    padding: var(--sp-5) var(--sp-5) var(--sp-4);
    position: relative;
    overflow: hidden;
}

.new-task-card form {
    max-width: 960px;
    margin: 0 auto;
}

/* Unified input styles for the New Task form — dark fields, equal height */
.new-task-card input[type="text"],
.new-task-card input[type="number"],
.new-task-card select,
.new-task-card textarea {
    width: 100%;
    background: var(--bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 0 var(--sp-3);
    height: 34px;
    font-family: var(--font);
    font-size: 12px;
    line-height: 1.4;
    transition: border-color var(--duration) var(--ease),
                box-shadow var(--duration) var(--ease),
                background var(--duration) var(--ease);
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
}

.new-task-card textarea {
    height: auto;
    min-height: 64px;
    padding: var(--sp-2) var(--sp-3);
    resize: vertical;
}

.new-task-card select {
    /* Custom caret to keep height consistent across browsers */
    background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
                      linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
    background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    padding-right: 28px;
    cursor: pointer;
}

.new-task-card input:focus,
.new-task-card select:focus,
.new-task-card textarea:focus {
    outline: none;
    border-color: var(--accent);
    background: var(--surface);
    box-shadow: 0 0 0 3px var(--accent-dim);
}

.new-task-card input::placeholder,
.new-task-card textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.6;
}

.new-task-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent) 0%, var(--accent-light) 100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.nt-row {
    display: flex;
    gap: var(--sp-4);
    align-items: flex-start;
    margin-bottom: var(--sp-4);
    flex-wrap: wrap;
}

.nt-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1 1 200px;
    min-width: 0;
}

.nt-field--grow-2 { flex: 2 1 320px; }
.nt-field--full   { flex: 1 1 100%; }
.nt-field--narrow { flex: 0 1 200px; }

.nt-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted);
}

/* Pill tab groups (replaces selects for type / priority) */
.pill-tabs {
    display: inline-flex;
    flex-wrap: wrap;
    gap: var(--sp-1);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 3px;
}

.pill-tabs input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill-tab {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-1);
    padding: 5px 10px;
    border-radius: calc(var(--radius) - 2px);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--duration) var(--ease),
                color var(--duration) var(--ease);
    user-select: none;
}

.pill-tab:hover { color: var(--text); background: var(--surface-hover); }

.pill-tabs input[type="radio"]:checked + .pill-tab {
    color: var(--text);
    background: var(--bg-elevated);
    box-shadow: var(--shadow-sm);
}

/* Per-type accent on selected pill */
.pill-tabs input[type="radio"][value="task"]:checked + .pill-tab     { color: var(--text); }
.pill-tabs input[type="radio"][value="epic"]:checked + .pill-tab     { color: var(--accent-light); background: var(--accent-dim); }
.pill-tabs input[type="radio"][value="feature"]:checked + .pill-tab  { color: var(--blue);         background: var(--blue-dim); }
.pill-tabs input[type="radio"][value="subtask"]:checked + .pill-tab  { color: var(--text-muted);   background: var(--surface); }

.pill-tabs input[type="radio"][value="critical"]:checked + .pill-tab { color: #fff;            background: var(--red); }
.pill-tabs input[type="radio"][value="high"]:checked + .pill-tab     { color: var(--orange);   background: var(--orange-dim); }
.pill-tabs input[type="radio"][value="medium"]:checked + .pill-tab   { color: var(--yellow);   background: var(--yellow-dim); }
.pill-tabs input[type="radio"][value="low"]:checked + .pill-tab      { color: var(--text-muted); background: var(--surface); }

/* Color dot for priority */
.pill-tab .pill-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.8;
}

/* Refine accordion — secondary section for AI Analyst fields */
.nt-refine {
    margin-top: var(--sp-4);
    border-top: 1px dashed var(--border);
    padding-top: var(--sp-4);
}

.nt-refine-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    padding: 0;
    transition: color var(--duration) var(--ease);
}

.nt-refine-toggle:hover { color: var(--accent-light); }

.nt-refine-toggle .toggle-icon {
    display: inline-flex;
    width: 14px;
    transition: transform var(--duration-md) var(--ease);
}

.nt-refine-toggle.open .toggle-icon { transform: rotate(90deg); }

.nt-refine-body {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height var(--duration-md) var(--ease),
                opacity var(--duration) var(--ease),
                margin-top var(--duration-md) var(--ease);
}

.nt-refine-body.open {
    max-height: 1500px;
    opacity: 1;
    margin-top: var(--sp-4);
}

.nt-refine-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: var(--sp-3);
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border-left: 2px solid var(--accent);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Footer with hint + action buttons */
.nt-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-4);
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.nt-footer-hint {
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.4;
    flex: 1 1 240px;
}

.nt-footer-actions {
    display: inline-flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .nt-footer { flex-direction: column; align-items: stretch; }
    .nt-footer-actions { justify-content: flex-end; }
}


/* ═══════════════════════════════════════════════════════════════
   HTMX transitions & loading
   ═══════════════════════════════════════════════════════════════ */

.htmx-indicator {
    display: none;
    color: var(--accent-light);
    font-size: 12px;
}

.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

.htmx-swapping {
    opacity: 0.4;
    transition: opacity 0.15s var(--ease);
}

.htmx-settling {
    opacity: 1;
    transition: opacity 0.25s var(--ease);
}

.htmx-added {
    animation: fadeSlideIn 0.3s var(--ease) both;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.htmx-request .btn {
    pointer-events: none;
    opacity: 0.6;
}

/* Global loading bar */
.htmx-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--accent-light);
    z-index: 9999;
    animation: progressBar 1.5s var(--ease) infinite;
    display: none;
}

.htmx-request ~ .htmx-progress,
body.htmx-request .htmx-progress {
    display: block;
}

@keyframes progressBar {
    0% { transform: scaleX(0); transform-origin: left; }
    50% { transform: scaleX(0.7); transform-origin: left; }
    100% { transform: scaleX(1); transform-origin: left; }
}

/* Spinner for buttons */
.btn .spinner {
    display: none;
    width: 12px;
    height: 12px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.5s linear infinite;
}

.htmx-request .btn .spinner { display: inline-block; }

@keyframes spin {
    to { transform: rotate(360deg); }
}


/* ═══════════════════════════════════════════════════════════════
   Responsive — Mobile-first overrides
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 1400px) {
    .kanban { gap: var(--sp-2); }
}

@media (max-width: 1100px) {
    .dash-two-col { grid-template-columns: 1fr; }
    .dash-aside {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        gap: var(--sp-4);
    }
    .task-detail-layout { grid-template-columns: 1fr; }
    .task-detail-sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--sp-4);
    }
    .form-row { flex-wrap: wrap; }
    .main { padding: var(--sp-6); }
}

@media (max-width: 768px) {
    .layout { grid-template-columns: 1fr; }

    .sidebar {
        position: fixed;
        /* #620: top MUST be reset here. The base rule sets top: 0 for the
           sticky desktop sidebar, and a fixed box with both top and bottom at 0
           is stretched between them — `height: auto` below then changes nothing.
           Measured before the fix: .sidebar 812px tall on an 812px viewport, so
           a phone showed the menu and no content at all. */
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        height: auto;
        border-right: none;
        border-top: 1px solid var(--border);
        z-index: 100;
        padding: 0;
        flex-direction: row;
        background: var(--surface);
    }

    .sidebar .logo { display: none; }
    .sidebar-footer { display: none; }
    .sidebar nav {
        flex-direction: row;
        padding: 0;
        width: 100%;
        gap: 0;
    }
    .sidebar nav a {
        flex: 1;
        justify-content: center;
        padding: var(--sp-3);
        font-size: 11px;
        border-radius: 0;
        min-height: 48px;
        flex-direction: column;
        gap: 2px;
    }
    .sidebar nav a.active { background: var(--accent-dim); }
    .sidebar .nav-icon { font-size: 16px; }

    .main {
        padding: var(--sp-4);
        padding-bottom: 80px;
    }

    .page-title { font-size: 20px; }
    .task-hero {
        grid-template-columns: 1fr;
        padding: var(--sp-4);
    }
    .task-hero-status { text-align: left; }
    .task-hero-title { font-size: 24px; }
    .task-content-card,
    .task-sidebar-card { padding: var(--sp-4); }
    .task-detail-sidebar { display: flex; }
    .task-meta-list { grid-template-columns: 88px minmax(0, 1fr); }

    .kanban {
        /* On phone, allow horizontal swipe through fixed-size columns
           rather than collapsing into one giant vertical list */
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
    }
    .kanban-col-wrap {
        flex: 0 0 85vw;
        width: 85vw;
        scroll-snap-align: start;
    }
    .kanban-col-wrap:has(.kanban-col-toggle:checked) {
        flex: 0 0 36px;
        width: 36px;
    }
    .kanban-column { max-height: none; }

    .filter-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-group { width: 100%; }
    .filter-group select,
    .filter-group input { width: 100%; }

    .form-row { flex-direction: column; }
    .dash-two-col { grid-template-columns: 1fr; }
    .cards { grid-template-columns: 1fr; }

    .data-table { font-size: 12px; }
    .data-table th, .data-table td { padding: var(--sp-2) var(--sp-3); }

    .inbox-answer-form { flex-direction: column; align-items: stretch; }
    .inbox-answer-form .btn { width: 100%; text-align: center; }

    .detail-grid { grid-template-columns: 110px 1fr; }

    .nav-bar { flex-direction: column; align-items: stretch; }
    .nav-bar .btn { width: 100%; }

    .activity-timeline li {
        flex-direction: column;
        gap: var(--sp-1);
    }
    .activity-timeline .activity-time { min-width: auto; }
}

/* ---- Admin section ----
   #624: this whole block used to reference --clr-* tokens that were never
   declared. A var() with no fallback that resolves to nothing makes the WHOLE
   declaration invalid, so these borders, backgrounds and label colours were not
   "slightly off" — they were absent, and the admin pages rendered unstyled.
   Replacements are chosen per block: --clr-bg-accent sat on :hover and on an
   empty value, so it is --surface-hover rather than the accent, and --clr-muted
   coloured small labels, so it is --text-secondary (7.08:1) rather than
   --text-muted (3.53:1, too little for 11px). */
.nav-divider { border: none; border-top: 1px solid var(--border); margin: var(--sp-3) var(--sp-4); }
.admin-layout { display: flex; flex-direction: column; gap: var(--sp-4); }
.admin-nav { display: flex; gap: var(--sp-2); flex-wrap: wrap; border-bottom: 1px solid var(--border); padding-bottom: var(--sp-2); }
.admin-nav a { padding: var(--sp-2) var(--sp-3); border-radius: var(--radius); font-size: 13px; color: var(--text-secondary); text-decoration: none; }
.admin-nav a:hover { background: var(--surface-hover); color: var(--text); }
.admin-nav a.active { background: var(--accent); color: #fff; }
.admin-content { }
.admin-stats { display: flex; gap: var(--sp-3); flex-wrap: wrap; margin-bottom: var(--sp-4); }
.stat-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-3) var(--sp-4); min-width: 120px; }
.stat-value { font-size: 1.5rem; font-weight: 700; color: var(--text); }
.stat-label { font-size: 12px; color: var(--text-secondary); }
/* The warning and notice panels were light-theme surfaces (#fef3cd at 0.90
   relative luminance, #d1ecf1 at 0.80) inside a dark interface — nearly white
   panels that read as a rendering failure rather than as attention. The system
   already carries the pairs for this: a saturated colour for the edge and text,
   its 10%-alpha twin for the fill. */
.admin-warning { background: var(--orange-dim); border: 1px solid var(--orange); color: var(--text); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.admin-notice { background: var(--blue-dim); border: 1px solid var(--blue); color: var(--text); padding: var(--sp-3); border-radius: var(--radius); margin-bottom: var(--sp-3); }
.admin-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.admin-table th, .admin-table td { padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); text-align: left; }
.admin-table th { font-weight: 600; color: var(--text-secondary); font-size: 11px; text-transform: uppercase; }
.admin-perms { font-size: 11px; color: var(--text-secondary); max-width: 300px; word-break: break-all; }
.row-revoked { opacity: 0.5; }
/* Same light-theme copy-paste, on the API key states. .badge-locked is gone
   rather than recoloured: no template has ever used it. */
.badge-active { background: var(--green-dim); border: 1px solid var(--green); color: var(--green); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 11px; }
.badge-disabled { background: var(--red-dim); border: 1px solid var(--red); color: var(--red); padding: 2px 6px; border-radius: var(--radius-sm); font-size: 11px; }
/* ---- Admin interactive UI ---- */

/* Flash / toast notifications */
.admin-flash-container {
    position: fixed;
    top: var(--sp-4);
    right: var(--sp-4);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    max-width: 420px;
}
.admin-flash {
    padding: var(--sp-3) var(--sp-5);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 500;
    box-shadow: var(--shadow-lg);
    animation: flashIn 0.3s var(--ease) both;
    cursor: pointer;
    line-height: 1.5;
}
.admin-flash-success {
    background: var(--green);
    color: #fff;
}
.admin-flash-error {
    background: var(--red);
    color: #fff;
}
@keyframes flashIn {
    from { opacity: 0; transform: translateX(40px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes flashOut {
    from { opacity: 1; transform: translateX(0); }
    to   { opacity: 0; transform: translateX(40px); }
}

/* Collapsible create forms */
.admin-form-wrap {
    margin-bottom: var(--sp-4);
}
.admin-form-wrap summary {
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent-light);
    padding: var(--sp-2) 0;
    user-select: none;
    list-style: none;
}
.admin-form-wrap summary::-webkit-details-marker { display: none; }
.admin-form-wrap summary::before { content: "+ "; }
.admin-form-wrap[open] summary::before { content: "- "; }

.admin-form {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    margin-top: var(--sp-2);
}
.admin-form label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
    display: block;
    margin-bottom: var(--sp-1);
}
.admin-form input,
.admin-form select {
    width: 100%;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: var(--sp-2) var(--sp-3);
    color: var(--text);
    font-family: var(--font);
    font-size: 12px;
    box-sizing: border-box;
    transition: border-color var(--duration) var(--ease);
}
.admin-form input:focus,
.admin-form select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-dim);
}
.admin-form-actions {
    grid-column: 1 / -1;
    display: flex;
    gap: var(--sp-2);
    justify-content: flex-end;
    padding-top: var(--sp-2);
}

/* Action buttons for table rows */
.admin-actions {
    display: flex;
    gap: var(--sp-1);
    flex-wrap: wrap;
}
.admin-btn {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 600;
    font-family: var(--font);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--duration) var(--ease);
}
.admin-btn:hover {
    background: var(--surface-hover);
    color: var(--text);
    border-color: var(--text-muted);
}
.admin-btn-primary {
    border-color: var(--accent);
    color: var(--accent-light);
}
.admin-btn-primary:hover {
    background: var(--accent-dim);
    color: var(--accent-light);
    border-color: var(--accent-light);
}
.admin-btn-danger {
    border-color: rgba(231, 76, 60, 0.4);
    color: var(--red);
}
.admin-btn-danger:hover {
    background: var(--red-dim);
    color: var(--red);
    border-color: var(--red);
}

/* Plaintext key reveal box */
.admin-key-reveal {
    background: var(--yellow-dim);
    border: 1px solid var(--yellow);
    border-radius: var(--radius);
    padding: var(--sp-3) var(--sp-4);
    margin: var(--sp-3) 0;
    font-size: 13px;
    line-height: 1.6;
}
.admin-key-reveal code {
    display: block;
    background: var(--bg);
    padding: var(--sp-2) var(--sp-3);
    border-radius: var(--radius-sm);
    margin-top: var(--sp-2);
    font-size: 12px;
    word-break: break-all;
    user-select: all;
}
.admin-key-reveal .warning {
    color: var(--orange);
    font-weight: 700;
    font-size: 12px;
}

/* Quick actions on summary page */
.admin-quick-actions {
    display: flex;
    gap: var(--sp-2);
    flex-wrap: wrap;
    margin-bottom: var(--sp-4);
}

/* Nav counter badges */
.nav-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9px;
    background: rgba(255,255,255,0.2);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
    margin-left: 3px;
}
.admin-nav a.active .nav-badge { background: rgba(255,255,255,0.3); }

/* Permission badges */
.admin-perms-badges { display: flex; flex-wrap: wrap; gap: 3px; max-width: 400px; }
.perm-badge {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}
.perm-admin { background: rgba(231,76,60,0.15); color: #c0392b; }
.perm-tasks { background: rgba(52,152,219,0.15); color: #2980b9; }
.perm-integrations { background: rgba(39,174,96,0.15); color: #27ae60; }
.perm-none { background: var(--surface-hover); color: var(--text-secondary); font-style: italic; }

/* Permission matrix */
.admin-matrix-wrap { overflow-x: auto; margin-top: var(--sp-3); }
.admin-matrix th.matrix-role {
    writing-mode: vertical-rl;
    text-orientation: mixed;
    font-size: 11px;
    padding: var(--sp-2);
    white-space: nowrap;
    max-width: 40px;
}
.admin-matrix .matrix-cell { text-align: center; width: 40px; }
.admin-matrix .matrix-check { color: var(--green, #27ae60); font-weight: 700; font-size: 14px; }

/* Filter bar */
.admin-filter-bar { margin-bottom: var(--sp-3); }
.admin-filter-form {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    flex-wrap: wrap;
}
.admin-filter-form select {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-1) var(--sp-3);
    color: var(--text);
    font-size: 12px;
    font-family: var(--font);
}

/* Pagination */
.admin-pagination {
    display: flex;
    gap: var(--sp-2);
    align-items: center;
    margin-top: var(--sp-3);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--border);
}
.admin-page-info { font-size: 12px; color: var(--text-secondary); }

/* Inline roles editor */
.admin-roles-inline {
    display: flex;
    gap: var(--sp-3);
    align-items: center;
    flex-wrap: wrap;
    padding: var(--sp-2) 0;
}
.admin-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.admin-checkbox input[type="checkbox"] { margin: 0; cursor: pointer; }

/* Warning stat card — was the loudest of the five light-theme patches: a
   #fef3cd panel (0.90 relative luminance) with #856404 text, i.e. dark-on-light
   inside a dark interface. The warning now speaks with the system's own voice:
   an orange edge, its dim twin as fill, and the value in orange because THAT is
   the number the panel exists to point at. */
.stat-card-warn {
    border-color: var(--orange);
    background: var(--orange-dim);
}
.stat-card-warn .stat-value { color: var(--orange); }
.stat-card-warn .stat-label { color: var(--text-secondary); }

/* Screen reader only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* Projects page forms (#344) */
.project-error-note { margin-bottom: 12px; }
.project-create { margin-bottom: 16px; }
.project-create > summary { display: inline-block; cursor: pointer; }
.project-form { max-width: 480px; margin-top: 12px; }
.project-inline-form { display: inline; }
.project-edit-cell { padding: 0 8px 8px; }
.project-edit-summary { cursor: pointer; font-size: 0.85em; opacity: 0.7; }

/* Utility classes that 28 places in six templates already used — while no rule
   defined them (#622). Undefined means "inherit", so every caption meant to be
   quiet rendered at body colour and size: the least important text on the page
   was louder than the most important. --text-secondary, not --text-muted: the
   latter is 3.53:1 on a card surface, below the 4.5 a caption needs. */
.muted { color: var(--text-secondary); }
.small { font-size: 12px; line-height: 1.5; }

/* Visible to a screen reader, not to the eye. The meaning of "0/4" currently
   lives in a title attribute, which touch devices never read. */
.u-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Project cards (#567): the page answers "where is the work", so the cards come
   before the routing table. Deliberately plain — the card must not grow into a
   second dashboard, which is what the task's own scope forbids. */
/* minmax(0, 1fr), not the default auto track: a grid track's minimum is
   min-content, so one nowrap child (an epic title at 383px plus its badge at
   106px) dictated the whole column — measured 524.758px inside a 343px
   container, which pushed the card 150px off a 375px screen. The text was
   always willing to clip; the track was not willing to let it (#620). */
/* #623: one column was a phone fix from #620 that never came back for the
   desktop, so on 1280px a card was 978px wide and five projects could only be
   compared by scrolling. auto-fill with a floor lets the row hold as many as
   fit and collapses to one when they do not — the phone stays fixed without
   nailing the desktop to a single column. The floor is 380px, measured rather
   than guessed: at 420px the row still held only two cards inside the 978px
   content box, while 380px fits two with room to spare and does not shorten the
   epic titles, which are cut at 52 characters by the template anyway. */
.project-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
    gap: .75rem;
    margin-bottom: 1.25rem;
}

/* The phone guarantee from #620, restated explicitly: a 380px floor would
   overflow a 375px screen, and grid tracks never shrink below their floor. */
@media (max-width: 768px) {
    .project-cards { grid-template-columns: minmax(0, 1fr); }
}

/* #623: the archive is a collapsed group now, and the summary is a real tap
   target — 19px was below every floor in WCAG 2.5.8. */
.project-archive { margin-bottom: 1.25rem; }

.project-archive-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: var(--sp-2) 0;
    font-size: .95rem;
    color: var(--text-secondary);
}

.project-archive-summary:hover { color: var(--text); }
.project-card {
    /* Was transparent while .epic-card and .card both use --surface, so the
       boundary of a group was barely visible. Radius and padding come from
       tokens instead of magic numbers, and the border no longer carries a dead
       fallback: --border exists (#622). */
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-4);
    transition: border-color .15s ease;
}
.project-card:hover { border-color: var(--accent); }
/* #623: opacity: .55 lived here and it was measurably wrong — opacity MULTIPLIES
   contrast, so --text-secondary fell from 7.08:1 to 3.13:1, under the 4.5 floor
   for small text. The card is set aside by its GROUP now; here it only loses the
   surface fill, which says "not part of the comparison" without touching how
   readable the words are. */
.project-card--archived { background: transparent; }
.project-card-numbers { margin: .35rem 0 .5rem; }
.project-card-waiting { font-weight: 600; }
.epic-group-title { margin: 1rem 0 .35rem; font-size: .95rem; }

/* Project admin block (#568): git routing lives with its project instead of in a
   second table repeating the same list. Collapsed by default — the page answers
   "what is happening" first, "where to push" on demand. */
.project-admin { margin-top: .6rem; border-top: 1px solid var(--border); padding-top: .5rem; }
/* 19px measured — under every floor WCAG 2.5.8 names. A disclosure is a control,
   and a control has to be hittable with a thumb (#623). */
.project-admin-summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    min-height: 44px;
    font-size: .85rem;
    color: var(--text-secondary);
}
.project-admin-facts { display: grid; grid-template-columns: auto 1fr; gap: .15rem .6rem; margin: .5rem 0; font-size: .85rem; }
.project-admin-facts dt { color: var(--text-secondary); }
.project-admin-facts dd { margin: 0; word-break: break-all; }
/* #887: причина расхождения клона с проектом — текстом под бейджем. */
.project-admin-note { display: block; margin-top: .15rem; color: var(--text-secondary); font-size: .8rem; word-break: normal; }
.project-admin-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .4rem; }
.project-admin-edit { margin-top: .3rem; }

/* #619: the three indicators are links, and the first one carries the weight. */
.project-card-epics-note { margin: .3rem 0 .1rem; }
.project-card-actions { margin: .45rem 0 .1rem; }
/* #624: .btn--xs lived here — my own second answer to a question .btn-xs had
   already answered 27 times, in rem where the system speaks in tokens. Its one
   caller now uses .btn-xs, so the rule is gone rather than reconciled. */

/* Same floor, one level down: a flex item will not shrink below min-content
   unless told to, so the ellipsis on the epic title never got a chance (#620). */
.project-card .epic-children,
.project-card .epic-child-link,
.project-card .epic-header,
.project-card .project-card-numbers { min-width: 0; }
.project-card .epic-child-title { min-width: 0; text-overflow: ellipsis; }

/* #623: 27px measured, and a finger is not a mouse pointer. Only on narrow
   screens — WCAG 2.5.8 exists for touch, and on a desktop the extra 9px per row
   would push the fifth epic off the card for nothing. The chip goes to 32px in
   the same breath: it already cleared the 24px minimum at 31px, so this is
   rounding, not a rescue. */
.project-card .topbar-stat { min-height: 32px; }

@media (max-width: 768px) {
    .project-card .epic-child-link { min-height: 36px; }
}

/* #623: invisible until focused. Placed last so nothing later in the cascade can
   quietly bury it. */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: var(--sp-2) var(--sp-4);
    background: var(--surface);
    border: 1px solid var(--accent);
    border-radius: var(--radius);
    color: var(--text);
    text-decoration: none;
}

.skip-link:focus {
    left: var(--sp-3);
    top: var(--sp-3);
}

/* The bottom bar is fixed, so the last rows of every page would sit under it. */
@media (max-width: 768px) {
    main { padding-bottom: 4.5rem; }
}

/* ─── Задачи: очередь как умолчание раздела (#630) ─────────────────────────
   Собрано из существующих токенов — новых не заводится: тест
   test_every_css_token_and_utility_class_exists фиксирует их число. */

/* Переключатель режимов. Выбранный отмечен так же, как активный пункт меню,
   чтобы «где я» читалось одним приёмом на всех экранах. */
.mode-switch { margin-bottom: var(--sp-4); flex-wrap: wrap; }
.mode-switch .topbar-stat.is-current {
    background: var(--accent-dim);
    border-color: var(--accent-glow);
}
.mode-switch .topbar-stat.is-current .topbar-stat-value,
.mode-switch .topbar-stat.is-current .topbar-stat-label { color: var(--accent-light); }

.queue-form { display: flex; flex-direction: column; gap: var(--sp-4); }
.queue-group { display: flex; flex-direction: column; gap: var(--sp-2); }
.queue-group-why { margin: 0 0 var(--sp-1); }
/* Ноль — это ответ, а не пустое место: группа остаётся и говорит словами. */
.queue-group-empty { margin: 0; color: var(--text-muted); }

/* #628 ввёл эти классы в инбоксе и не дал им правил — имена классов гейтом не
   проверяются, поэтому цель касания, задуманная в 44px, до прода не доехала.
   Сама галочка 18px, кликабельная область растянута паддингом и втянута
   обратно отрицательным margin, чтобы не разъезжалась строка. */
.inbox-pick {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px;
    margin: -11px -9px -13px -13px;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.inbox-pick:hover { background: var(--surface-active); }
.inbox-pick-box { width: 18px; height: 18px; margin: 0; accent-color: var(--accent); }
.inbox-batch-actions {
    border-top: 1px solid var(--border-subtle);
    padding-top: var(--sp-3);
    flex-wrap: wrap;
    gap: var(--sp-3);
}

@media (max-width: 768px) {
    /* Тот же пол цели касания, что уже применён к разделу проектов. */
    .queue-group .btn { min-height: 44px; }
    .mode-switch .topbar-stat { min-height: 44px; }
}

/* Панель фильтров свёрнута по умолчанию (#630): развёрнутая она занимала на
   375px около четырёх экранов до первой задачи. Раскрыта, когда фильтр
   применён — спрятанный применённый фильтр это вторая беда, не лучше первой. */
.filter-disclosure { margin-bottom: var(--sp-4); }
.filter-disclosure > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    padding: var(--sp-2) var(--sp-3);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text-secondary);
    font-size: 13px;
}
.filter-disclosure > summary::-webkit-details-marker { display: none; }
.filter-disclosure > summary::before { content: "\25B6"; font-size: 9px; color: var(--text-muted); }
.filter-disclosure[open] > summary::before { content: "\25BC"; }
.filter-disclosure > summary:hover { background: var(--surface-hover); color: var(--text); }
.filter-disclosure[open] > summary { margin-bottom: var(--sp-2); }

/* Координация сессий (#775): реестр сессий и переписка на дашборде.
   Присутствие показывается цветом бейджа И возрастом рядом — цвет без
   возраста снова стал бы уверенным индикатором над непроверенным фактом. */
.section--coordination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: var(--sp-4);
}
.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: var(--sp-3);
    min-width: 0;
}
.dash-card-header {
    display: flex;
    align-items: center;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
}
.dash-card-header h2 { font-size: 14px; color: var(--text); margin: 0; }

.session-list, .thread-list { list-style: none; margin: 0; padding: 0; }
.session-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 13px;
}
.session-row:last-child { border-bottom: none; }
.session-agent { color: var(--text); font-weight: 500; }
.session-model, .session-seen, .session-id, .thread-model, .thread-count {
    color: var(--text-muted);
    font-size: 12px;
}
.session-badge--online { background: var(--green-dim); color: var(--green); }
.session-badge--offline { background: var(--surface-hover); color: var(--text-muted); }

.thread-row {
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--border-subtle);
}
.thread-row:last-child { border-bottom: none; }
.thread-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--sp-2);
    font-size: 12px;
    color: var(--text-secondary);
}
.thread-arrow { color: var(--text-muted); }
.thread-to { color: var(--text-secondary); }
.thread-body {
    margin-top: var(--sp-1);
    font-size: 13px;
    color: var(--text);
    overflow-wrap: anywhere;
}
.task-message-item .task-timeline-marker { background: var(--accent); }

@media (max-width: 900px) {
    .section--coordination { grid-template-columns: minmax(0, 1fr); }
}

/* Diff of the submission under review (#824). Only existing tokens are used
   here — invented ones rendered as nothing at all once before (#624). */
.task-diff-file {
    border-top: 1px solid var(--border-subtle);
    padding-top: 6px;
    margin-top: 6px;
}

.task-diff-body {
    font-family: var(--font-mono);
    font-size: 12px;
    line-height: 1.5;
    overflow-x: auto;
    background: var(--bg-elevated);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    margin: 6px 0 0;
    white-space: pre;
}

.task-diff-line {
    display: block;
}

.task-diff-line--add {
    background: var(--green-dim);
    color: var(--green);
}

.task-diff-line--del {
    background: var(--red-dim);
    color: var(--red);
}

.task-diff-line--hunk {
    color: var(--text-muted);
}

/* Anchoring a finding to a line (#826). Only lines that HAVE a new-side
   address are clickable — a removed line has no address to point at. */
.task-diff-num {
    display: inline-block;
    width: 44px;
    padding-right: 10px;
    text-align: right;
    color: var(--text-muted);
    user-select: none;
}

.task-diff-line--anchorable {
    cursor: pointer;
}

.task-diff-line--anchorable:hover {
    outline: 1px solid var(--border-focus);
}