@import url("tokens.css");

/* Self-hosted variable fonts */
@font-face {
    font-family: 'Inter Tight';
    src: url('fonts/inter-tight-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Inter Tight';
    src: url('fonts/inter-tight-italic-variable.woff2') format('woff2-variations');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'JetBrains Mono';
    src: url('fonts/jetbrains-mono-italic-variable.woff2') format('woff2-variations');
    font-weight: 100 800;
    font-style: italic;
    font-display: swap;
}

:root {
    --primary:        var(--accent);
    --primary-hover:  var(--accent-2);
    --danger:         var(--c-blocked);
    --warning:        var(--c-review);
    --success:        var(--c-done);
    --info:           var(--c-active);
    --purple:         oklch(0.50 0.16 290);
    --dark:           var(--fg-1);
    --text:           var(--fg-1);
    --text-muted:     var(--fg-3);
    --bg:             var(--bg-canvas);
    --card:           var(--bg-surface);
    --surface:        var(--bg-surface);
    --border:         var(--border-1);
    --header-h:       48px;
    --muted:          var(--fg-3);
    --bg-alt:         var(--bg-surface-2);
    --bg-base:        var(--bg-surface);
    --hover:          var(--bg-row-hover);
    --bg-card:        var(--bg-surface);
    --bg-row:         var(--bg-row-hover);
}

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

input:focus, select:focus, textarea:focus, button:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 1px;
}

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

header {
    /* layout: handled by .topbar; keep only z-index for layering */
    position: sticky;
    top: 0;
    z-index: 100;
}
header h1 { font-size: 1.25rem; font-weight: 600; cursor: pointer; }
.header-right { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.user-info { font-size: 0.875rem; margin-right: 0.5rem; }
.user-info .role {
    font-size: 0.7rem;
    margin-left: 0.3rem;
}
.user-info .role:not(:empty) {
    background: rgba(255,255,255,0.2);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.container { padding: 1rem; width: 100%; box-sizing: border-box; }

.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 2rem;
    background: var(--card);
    border-radius: 8px;
    box-shadow: var(--sh-2);
}
.login-container h2 { margin-bottom: 1.5rem; text-align: center; }
.login-container .form-row { margin-bottom: 1rem; }
.login-container label { display: block; margin-bottom: 0.25rem; font-weight: 500; }
.login-container input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 1rem;
}
.login-container .btn { width: 100%; padding: 0.75rem; font-size: 1rem; }
.login-error { color: var(--danger); margin-bottom: 1rem; text-align: center; }

.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 2px solid var(--border);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
    padding: 0.5rem 1rem;
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-muted);
    border-radius: 4px 4px 0 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab:hover { background: var(--bg-surface-2); }
.tab.active { 
    color: var(--primary); 
    font-weight: 600;
    border-bottom: 2px solid var(--primary);
    margin-bottom: -2px;
}
.tab-content { display: none; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.5} }
.agent-badge {
    background: #dc3545;
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    cursor: pointer;
    animation: pulse 2s infinite;
}
.tab-content.active { display: block; }

.stats-bar {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.stat-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    min-width: 80px;
}
.stat-card .label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.stat-card .value { font-size: 1.25rem; font-weight: 600; }

.filters {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}
.filter-group { display: flex; flex-direction: column; gap: 0.2rem; }
.filter-group label { font-size: 0.7rem; color: var(--text-muted); text-transform: uppercase; }
.filter-group select, .filter-group input {
    padding: 0.4rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.8rem;
    min-width: 100px;
}

.btn {
    padding: 0.4rem 0.75rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.8rem;
    transition: opacity 0.2s;
    text-decoration: none;
    display: inline-block;
}
.btn:hover { opacity: 0.85; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-primary { background: var(--primary); color: white; }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-secondary { background: #6c757d; color: white; }
.btn-warning { background: var(--warning); color: #333; }
.btn-purple { background: var(--purple); color: white; }
.btn-sm { padding: 0.25rem 0.5rem; font-size: 0.75rem; }
.btn-outline { background: transparent; border: 1px solid var(--border); color: var(--text); }

.table-wrapper {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    overflow-x: auto;
}
table { width: 100%; border-collapse: collapse; font-size: 0.8rem; }
th, td { padding: 0.5rem 0.4rem; text-align: left; border-bottom: 1px solid var(--border); }
th {
    background: #f8f9fa;
    font-weight: 600;
    position: sticky;
    top: 0;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
}
th:hover { background: #e9ecef; }
th .sort-icon { margin-left: 0.25rem; opacity: 0.3; font-size: 0.7rem; }
th.sorted .sort-icon { opacity: 1; }
tr:hover { background: #f8f9fa; }
tr.clickable { cursor: pointer; }

.task-cell { max-width: 400px; }

.badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}
.status-badge {
    display: inline-block;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-weight: 500;
    white-space: nowrap;
}
.badge-pending { background: #e9ecef; color: #495057; }
.badge-default { background: #e9ecef; color: #6c757d; }
.badge-backlog { background: #e9ecef; color: #495057; }
.badge-active { background: #cce5ff; color: #004085; }
.badge-blocked { background: #f8d7da; color: #721c24; }
.badge-review { background: #fff3cd; color: #856404; }
.badge-delayed { background: #e2d5f1; color: #5a3d8a; }
.badge-done, .badge-completed { background: #d4edda; color: #155724; }
.badge-canceled, .badge-cancelled { background: #e9ecef; color: #6c757d; text-decoration: line-through; }

.badge-critical { background: #dc3545; color: white; }
.badge-high { background: #fd7e14; color: white; }
.badge-medium { background: #ffc107; color: #333; }
.badge-low { background: #6c757d; color: white; }

.badge-now { background: #dc3545; color: white; }
.badge-thisweek { background: #fd7e14; color: white; }
.badge-thismonth { background: #17a2b8; color: white; }
.badge-someday { background: #6c757d; color: white; }

.deadline-badge { display:inline-block; padding:0.15rem 0.45rem; border-radius:10px; font-size:0.7rem; font-weight:600; margin-left:2px; }
.deadline-overdue { background:#7b0000; color:white; }
.deadline-today   { background:#dc3545; color:white; }
.deadline-now     { background:#dc3545; color:white; }
.deadline-week    { background:#fd7e14; color:white; }
.deadline-month   { background:#17a2b8; color:white; }
.deadline-someday { background:#adb5bd; color:#333; }

.badge-bot { background: var(--purple); color: white; }
.badge-admin { background: var(--primary); color: white; }
.badge-superadmin { background: #6f42c1; color: white; }
.badge-unverified { background: var(--warning); color: #333; }
.badge-success { background: var(--success); color: white; }

.company-codes { display: flex; gap: 0.2rem; flex-wrap: wrap; }
.company-code {
    display: inline-block;
    padding: 0.1rem 0.3rem;
    background: var(--primary);
    color: white;
    border-radius: 3px;
    font-size: 0.65rem;
    font-weight: 600;
}
.company-code.priv { background: var(--purple); }

/* Project/Subtask hierarchy styles */
tr.is-project { background: #f0f7ff; }
tr.is-project:hover { background: #e3f0ff; }
tr.is-subtask { background: #fafafa; }
tr.depth-1 td:first-child { padding-left: 1.5rem; }
tr.depth-2 td:first-child { padding-left: 2.5rem; }
tr.depth-3 td:first-child { padding-left: 3.5rem; }

.tree-toggle {
    cursor: pointer;
    display: inline-block;
    width: 16px;
    text-align: center;
    margin-right: 4px;
    font-size: 0.7rem;
    color: var(--primary);
}
.tree-toggle:hover { color: var(--text); }

.subtask-count {
    font-size: 0.65rem;
    color: var(--text-muted);
    margin-left: 0.3rem;
}
.subtask-count.has-open { color: var(--primary); font-weight: 500; }

.task-table-body-text a { color: inherit; text-decoration: none; }
.task-table-body-text a:hover { text-decoration: underline; }

.badge-project {
    background: #1F4E79;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}
.badge-version {
    background: #2E7D32;
    color: white;
    font-size: 0.7rem;
    font-weight: bold;
    padding: 0 4px;
    border-radius: 2px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
}

.subtask-count {
    font-size: 0.8rem;
    color: #666;
    margin-left: 6px;
}

/* Subtasks section in detail view */
.subtasks-section { margin-bottom: 1.5rem; }
.subtasks-section h3 { font-size: 1rem; margin-bottom: 0.75rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border); }
.subtask-item {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.5rem; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5rem;
    color: inherit; text-decoration: none;
}
.subtask-item:hover { background: #f8f9fa; cursor: pointer; }
.subtask-item .subtask-status { min-width: 60px; }
.subtask-item .subtask-title { flex: 1; }

.actions { white-space: nowrap; }
.actions .btn { margin-right: 0.2rem; }

.blocked-link { color: var(--danger); text-decoration: none; font-weight: 500; }
.blocked-link:hover { text-decoration: underline; }

.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    align-items: center;
    justify-content: center;
}
.modal-overlay.active { display: flex; }

/* Full-page edit mode — starts below header (top set by JS) */
.modal-overlay.task-page-mode {
    background: var(--bg);
    align-items: flex-start;
    overflow-y: auto;
}
.modal-overlay.task-page-mode .modal {
    width: 100%;
    max-width: none;
    padding: 0;
    max-height: none;
    border-radius: 0;
    box-shadow: none;
    margin: 0;
    overflow-y: visible;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}
/* Slim page-mode header */
.modal-overlay.task-page-mode .modal > h2 {
    padding: 0.6rem 1.5rem;
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-bottom: 1px solid var(--border);
    background: var(--card);
    flex-shrink: 0;
}
/* Form: vertical stack */
.modal-overlay.task-page-mode #task-form {
    flex: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 0 2rem;
    box-sizing: border-box;
}
@media (min-width: 1400px) {
    .modal-overlay.task-page-mode #task-form {
        padding: 0 3rem;
    }
}
/* 1. Title section: full-width document-style */
.modal-overlay.task-page-mode .task-form-title {
    padding: 1.5rem 0 1rem;
    border-bottom: 1px solid var(--border);
}
.modal-overlay.task-page-mode .task-form-title .form-row {
    margin: 0;
}
.modal-overlay.task-page-mode .task-form-title label {
    display: none;
}
.modal-overlay.task-page-mode #task-task {
    font-size: 1.4rem;
    font-weight: 600;
    border: none;
    border-radius: 0;
    padding: 0.25rem 0;
    min-height: 56px;
    background: transparent;
    resize: vertical;
    width: 100%;
    color: var(--text);
    line-height: 1.4;
}
.modal-overlay.task-page-mode #task-task:focus {
    outline: none;
    box-shadow: none;
}
/* 2. Metadata strip: horizontal flex wrap across full width */
.modal-overlay.task-page-mode .task-form-sidebar {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    background: transparent;
    align-items: flex-start;
}
.modal-overlay.task-page-mode .task-form-sidebar > .form-row {
    flex: 0 0 auto;
    min-width: 140px;
    max-width: 260px;
    margin: 0;
}
.modal-overlay.task-page-mode .task-form-sidebar > .form-row-2col {
    flex: 0 0 auto;
    min-width: 280px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 1rem;
    margin: 0;
}
.modal-overlay.task-page-mode .task-form-sidebar > .form-row-3col {
    flex: 0 0 auto;
    min-width: 400px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.5rem 1rem;
    margin: 0;
}
.modal-overlay.task-page-mode .task-form-sidebar > .form-row-inline {
    flex: 0 0 auto;
    min-width: 220px;
}
.modal-overlay.task-page-mode .task-form-sidebar > .details-config {
    flex: 1 1 100%;
    min-width: 100%;
}
/* Compact labels in metadata strip */
.modal-overlay.task-page-mode .task-form-sidebar label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-muted);
    font-weight: 600;
    margin-bottom: 0.2rem;
    display: block;
}
/* 3. Content area: full-width text fields */
.modal-overlay.task-page-mode .task-form-main {
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    flex: 1;
}
.modal-overlay.task-page-mode #task-context,
.modal-overlay.task-page-mode #task-approach { min-height: 100px; }
.modal-overlay.task-page-mode #task-prompt,
.modal-overlay.task-page-mode #task-jobdesc { min-height: 80px; }
/* Hold Until buttons */
.hold-btn-row { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.35rem; }
/* Sticky save bar */
.modal-overlay.task-page-mode .form-actions {
    padding: 0.75rem 0;
    border-top: 2px solid var(--border);
    background: var(--bg);
    position: sticky;
    bottom: 0;
    z-index: 10;
    margin: 0;
    flex-shrink: 0;
}
.modal {
    background: var(--card);
    border-radius: 8px;
    padding: 1.5rem;
    width: 95%;
    max-width: 700px;
    max-height: 90vh;
    overflow-y: auto;
}
.modal h2 { margin-bottom: 1rem; font-size: 1.25rem; }
.modal .form-row { margin-bottom: 0.75rem; }
.modal label { display: block; margin-bottom: 0.2rem; font-weight: 500; font-size: 0.85rem; }
.modal input, .modal select, .modal textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}
.modal input[type="checkbox"] { width: auto; }
.modal textarea { min-height: 100px; resize: vertical; }
#task-context, #task-approach { min-height: 110px; }
#task-prompt { min-height: 160px; }
.modal .form-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.form-row-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; }
.form-row-inline { display: flex; align-items: center; gap: 0.5rem; }
.form-row-inline label { margin-bottom: 0; }

.multi-select {
    display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0.3rem;
    border: 1px solid var(--border); border-radius: 4px;
    min-height: 38px; background: var(--bg-surface);
}
.multi-select-item {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.4rem; background: var(--primary); color: white;
    border-radius: 3px; font-size: 0.75rem;
}
.multi-select-item .remove { margin-left: 0.3rem; cursor: pointer; font-weight: bold; }
.multi-select-add {
    padding: 0.2rem 0.4rem; border: 1px dashed var(--border);
    border-radius: 3px; font-size: 0.75rem; cursor: pointer; background: transparent;
}

/* ── Slide-over detail panel ─────────────────────────────────────────── */
.detail-view {
    position: fixed; top: 0; right: 0; bottom: 0;
    width: 700px; max-width: 94vw;
    background: var(--bg);
    box-shadow: -4px 0 36px rgba(0,0,0,0.18);
    z-index: 1000;
    overflow-y: auto;
    padding: 1.5rem 1.75rem 3rem;
    visibility: hidden;
    transform: translateX(110%);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), visibility 0s linear 0.22s;
}
.detail-view.active {
    visibility: visible;
    transform: translateX(0);
    transition: transform 0.22s cubic-bezier(.4,0,.2,1), visibility 0s linear;
}
.detail-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.22);
    z-index: 999;
    visibility: hidden; opacity: 0;
    transition: opacity 0.22s ease, visibility 0s linear 0.22s;
    cursor: pointer;
}
.detail-backdrop.active {
    visibility: visible; opacity: 1;
    transition: opacity 0.22s ease, visibility 0s linear;
}
.detail-close-btn {
    position: sticky; top: 0; float: right;
    margin: -0.25rem -0.75rem 0.5rem 1rem;
    background: none; border: none;
    font-size: 1.5rem; line-height: 1;
    color: var(--text-muted); cursor: pointer;
    padding: 0.2rem 0.55rem; border-radius: 4px;
    z-index: 1;
}
.detail-close-btn:hover { background: var(--hover); color: var(--text); }
.detail-resize-handle {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 6px;
    cursor: col-resize;
    z-index: 1001;
    background: transparent;
    transition: background 0.15s;
}
.detail-resize-handle:hover,
.detail-resize-handle.dragging { background: var(--accent-soft); }
@media (max-width: 680px) {
    .detail-view {
        top: auto; left: 0; right: 0;
        width: 100%; max-width: 100%;
        height: 92vh;
        border-radius: 12px 12px 0 0;
        transform: translateY(110%);
    }
    .detail-view.active { transform: translateY(0); }
}
/* truncate long model names in agent-runs table */
.agent-runs-table .model-cell {
    max-width: 160px; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
    font-size: 0.78em; color: var(--text-muted);
}
.detail-header {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border);
    flex-wrap: wrap; gap: 1rem;
}
.detail-header h2 { font-size: 1.25rem; margin-bottom: 0.5rem; }
.detail-meta { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.detail-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem; margin-bottom: 1.5rem;
}
.detail-field label { 
    display: block; font-size: 0.7rem; color: var(--text-muted); 
    text-transform: uppercase; margin-bottom: 0.2rem;
}
.detail-field .value { font-size: 0.9rem; }
.detail-context, .detail-prompt, .detail-result {
    background: #f8f9fa; padding: 1rem; border-radius: 4px; margin-bottom: 1rem;
}
.detail-context h3, .detail-prompt h3, .detail-result h3 { 
    font-size: 0.85rem; margin-bottom: 0.5rem; color: var(--text-muted);
}
.detail-result.has-result { background: #e8f5e9; }

.notes-section { margin-top: 1.5rem; }
.notes-section h3 { 
    font-size: 1rem; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--border);
}
.note-item { padding: 0.75rem; border: 1px solid var(--border); border-radius: 4px; margin-bottom: 0.5rem; }
.note-header { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.note-content { font-size: 0.9rem; white-space: pre-wrap; }
.add-note-form { margin-top: 1rem; }
.add-note-form textarea { margin-bottom: 0.5rem; }

.note-type {
    display: inline-block; padding: 0.1rem 0.3rem; border-radius: 3px;
    font-size: 0.65rem; font-weight: 600; text-transform: uppercase; margin-right: 0.5rem;
}
.note-type-comment { background: #e9ecef; color: #495057; }
.note-type-update { background: #fff3cd; color: #856404; }
.note-type-meeting { background: #d1ecf1; color: #0c5460; }
.note-type-decision { background: #6f42c1; color: white; }
.note-type-context  { background: #17a2b8; color: white; }
.note-type-system   { background: #6c757d; color: white; font-style: italic; }

.admin-section { background: var(--card); border-radius: 8px; padding: 1.5rem; margin-bottom: 1rem; }
.admin-section h3 { margin-bottom: 1rem; font-size: 1.1rem; }
.staging-card { border: 1px solid var(--border); border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 0.75rem; }
.staging-card.pending { border-left: 4px solid var(--warning); }
.staging-card.approved { border-left: 4px solid var(--success); }
.staging-card.rejected { border-left: 4px solid var(--danger); }
.staging-payload { font-family: monospace; font-size: 0.75rem; background: #f8f9fa; padding: 0.5rem; border-radius: 4px; max-height: 160px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; margin: 0.5rem 0; display: none; }
.scorecard-row { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.scorecard-stat { background: #f8f9fa; border-radius: 4px; padding: 0.3rem 0.6rem; font-size: 0.82rem; }
.scorecard-stat .label { font-size: 0.7rem; color: var(--text-muted); display: block; }
.autonomy-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.autonomy-row:last-child { border-bottom: none; }
.autonomy-cap { font-weight: 600; min-width: 120px; font-family: monospace; font-size: 0.9rem; }

/* Bash structured prompt editor */
.bash-editor { background: #f8f9fa; border: 1px solid var(--border); border-radius: 4px; padding: 0.75rem; margin-top: 0.25rem; }
.bash-editor .form-row { margin-bottom: 0.5rem; }

/* KP/JSON editor warning banner */
.kp-warning { background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 0.4rem 0.75rem; margin-bottom: 0.5rem; font-size: 0.8rem; color: #856404; }

/* Form utilities */
.form-row-pw-wrapper { position: relative; display: flex; align-items: center; }
.input-pw { width: 100%; padding-right: 2.4rem; }
.btn-pw-toggle {
    position: absolute; right: 0.5rem; background: none; border: none;
    cursor: pointer; font-size: 1rem; padding: 0; line-height: 1;
}

/* Header buttons */
.btn-header { color: white; border-color: rgba(255,255,255,0.5); }

/* Stats bulk bar */
.bulk-bar {
    display: none; padding: 0.4rem 0.75rem; background: #f0f4ff;
    border: 1px solid #c5d3f0; border-radius: 4px; margin-bottom: 0.5rem;
    gap: 0.5rem; align-items: center;
}
.bulk-count { font-size: 0.85rem; font-weight: 600; color: var(--primary); }

/* Table utilities */
.th-check { width: 32px; text-align: center; }

/* Section headers */
.section-header {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.75rem;
}
.section-title { margin: 0; }

/* Admin section descriptions */
.admin-desc { color: var(--text-muted); margin-bottom: 0.75rem; font-size: 0.85rem; }
.admin-desc-lg { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.9rem; }
.admin-loading { color: var(--text-muted); font-size: 0.9rem; }

/* Button groups */
.btn-group { margin-bottom: 0.75rem; display: flex; gap: 0.5rem; }
.btn-group-center { margin-bottom: 0.75rem; display: flex; gap: 0.5rem; align-items: center; }
.btn-group-wrap { margin-top: 1rem; display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }

/* Form elements */
.select-sm { font-size: 0.85rem; padding: 0.25rem; }
.input-sm { font-size: 0.85rem; padding: 0.25rem 0.4rem; }
.input-blocker { width: 80px; display: inline-block; padding: 0.3rem; margin-top: 0.25rem; font-size: 0.85rem; }
.input-width-sm { width: 5rem; }
.input-narrow { width: 80px; }

/* Hint text */
.hint-text { font-size: 0.8rem; color: var(--text-muted); margin-left: 0.4rem; }
.btn-gap-left { margin-left: 0.3rem; }
.btn-gap-top { margin-top: 0.25rem; }
.btn-sm-narrow { margin-top: 0.25rem; font-size: 0.75rem; }

/* Skeleton preview */
.skel-preview-panel { margin: 0.4rem 0 0.5rem; }
.skel-preview-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.3rem; }
.skel-preview-body {
    font-family: monospace; font-size: 0.78rem;
    background: var(--bg, #f8f9fa); border: 1px solid var(--border);
    border-radius: 4px; padding: 0.6rem 0.75rem;
    max-height: 240px; overflow-y: auto;
    white-space: pre-wrap; word-break: break-word;
    color: var(--text);
}
.skel-preview-body mark.ph {
    background: var(--accent-soft); color: var(--accent-2);
    border-radius: 2px; padding: 0 2px; font-size: inherit; font-style: normal;
}
.skel-assembled-body { max-height: 480px; }
.skel-inline-textarea { width: 100%; margin-top: 0.4rem; min-height: 200px; box-sizing: border-box; }
.skel-inline-actions { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }

/* Insert-field select row */
.insert-select-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.insert-select-row select { font-family: monospace; font-size: 0.8rem; flex: 1; }

/* Code/textarea */
.textarea-code { font-family: monospace; }
.textarea-code-sm { font-family: monospace; font-size: 0.8rem; min-height: 120px; }
.textarea-code-lg { font-family: monospace; font-size: 0.8rem; min-height: 200px; }
.textarea-code-xs { font-family: monospace; font-size: 0.85rem; min-height: 120px; }
.textarea-tall { min-height: 300px; font-family: monospace; font-size: 0.8rem; }
.input-mono { font-family: monospace; }

/* Form layout */
.form-row-center { align-items: center; }
.details-config { margin: 0.5rem 0; border: 1px solid var(--border); border-radius: 4px; padding: 0.5rem; }
.details-summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; color: var(--purple); }
.details-content { margin-top: 0.5rem; }

/* Checkbox labels */
.cb-gap-left { margin-left: 1rem; }

/* Person form */
.badge-gap { margin-left: 1rem; }
.companies-list {
    display: flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; padding: 0.4rem 0; min-height: 1.5rem;
}
.companies-loading { color: var(--text-muted); font-size: 0.85rem; }
.capabilities-list { display: flex; flex-direction: column; gap: 0.25rem; padding: 0.3rem 0; }
.capabilities-add { display: flex; gap: 0.4rem; margin-top: 0.4rem; align-items: center; }
.select-cap { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; font-size: 0.85rem; }

/* Dropdown */
.dropdown-menu {
    position: fixed; background: var(--bg-surface); border: 1px solid var(--border); border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.15); max-height: 200px; overflow-y: auto; z-index: 2000;
}

/* Modal widths */
.modal-md { max-width: 520px; }
.modal-lg { max-width: 560px; }
.modal-xl { max-width: 640px; }
.modal-xxl { max-width: 740px; }
.modal-wide { max-width: 800px; }

/* Modal typography */
.modal-title-danger { color: var(--danger); margin-bottom: 1rem; }
.modal-desc { margin-bottom: 0.75rem; font-size: 0.9rem; }
.modal-label-sm { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); margin-bottom: 0.25rem; }
.modal-label { font-size: 0.75rem; font-weight: 600; color: var(--text-muted); }
.modal-wrapper { margin-bottom: 1rem; }

/* Log content */
.log-content {
    font-family: monospace; font-size: 0.8rem; white-space: pre-wrap;
    max-height: 420px; overflow-y: auto; background: #1e1e1e; color: #d4d4d4;
    padding: 1rem; border-radius: 4px; margin-bottom: 1rem;
}

/* Bash confirm */
.bash-pre {
    white-space: pre-wrap; word-break: break-all; font-size: 0.82rem;
    margin: 0; max-height: 200px; overflow-y: auto;
}
.buttons-end { display: flex; gap: 0.5rem; justify-content: flex-end; }

/* Import result */
.import-result { margin-top: 1rem; display: none; }

/* Token display */
.token-warning { color: var(--warning); font-weight: 600; margin-bottom: 0.75rem; }
.token-value {
    background: #f8f9fa; border: 1px solid var(--border); border-radius: 4px;
    padding: 0.75rem; font-family: monospace; font-size: 0.8rem; word-break: break-all; margin-bottom: 1rem;
}

/* Required asterisk */
.text-required { color: var(--danger); }
.text-optional { color: var(--text-muted); font-weight: normal; }

/* Staging badge */
.staging-badge { background: var(--warning); color: #333; padding: 0.1rem 0.5rem; border-radius: 10px; font-size: 0.75rem; font-weight: 600; margin-left: 0.5rem; }

/* Label styles */
.label-sm { font-size: 0.85rem; font-weight: 600; }
.bash-confirm-box { background: #fff3cd; border: 2px solid var(--warning); border-radius: 6px; padding: 1rem; margin-bottom: 1rem; }
.bash-confirm-hash { font-family: monospace; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.12em; color: var(--primary); margin-top: 0.25rem; }
#bash-confirm-input { font-family: monospace; font-size: 1.25rem; letter-spacing: 0.12em; width: 12ch; text-align: center; padding: 0.4rem; }

/* ── Medium screens: tablets / small laptops ──────────────────── */
@media (max-width: 1024px) {
    .task-cell { max-width: 300px; }

    /* Compact header actions */
    header .btn { padding: 0.3rem 0.55rem; font-size: 0.78rem; }

    /* Admin sections less padded */
    .admin-section { padding: 1rem; }

    /* Detail grid: max 2 columns */
    .detail-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
}

/* ── Small screens / large phones ────────────────────────────── */
@media (max-width: 640px) {
    :root { --header-h: 88px; } /* header wraps to 2 lines on small screens */

    .form-row-2col,
    .form-row-3col { grid-template-columns: 1fr; }

    .filters { flex-direction: column; align-items: stretch; }
    .filter-group { width: 100%; }

    /* Show only essential table columns */
    .task-col-id, .task-col-owner,
    .task-col-company, .task-col-updated { display: none; }
    .task-cell { max-width: 200px; }

    header h1 { font-size: 1rem; }
    header .btn { padding: 0.25rem 0.45rem; font-size: 0.72rem; }

    .modal { width: 98%; padding: 1rem; max-height: 95vh; }

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

    .stats-bar { gap: 0.4rem; }
    .stat-card { padding: 0.4rem 0.5rem; min-width: 64px; }
    .stat-card .value { font-size: 1rem; }

    .kanban-swimlane-label { width: 100px; min-width: 100px; max-width: 100px; font-size: 0.72rem; }
    .kanban-column { min-width: 90px; }
}

@media print {
    header, .filters, .btn, .no-print, .actions, .stats-bar, .tabs { display: none !important; }
    .container { padding: 0; }
    .table-wrapper { border: none; }
    table { font-size: 8pt; }
    th, td { padding: 4px 3px; border: 1px solid #ccc; }
}

.cap-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    margin: 2px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.cap-badge:hover { opacity: 0.8; }
.cap-badge.active { background: var(--primary); color: white; }
.cap-badge.inactive { background: #e9ecef; color: var(--text-muted); }

.hidden { display: none !important; }
.subtask-hidden { display: none !important; }

/* =============================================
   Kanban Swimlane Board
   ============================================= */

.kanban-board {
    width: 100%;
    overflow-x: auto;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0;
    margin-bottom: 1rem;
}

.kanban-header-row {
    display: flex;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--card);
    border-bottom: 2px solid var(--border);
}

.kanban-col-header {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 0.4rem 0.25rem;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    background: var(--kanban-col, #6c757d);
}

.kanban-swimlane {
    display: flex;
    border-bottom: 1px solid var(--border);
    min-height: 56px;
}

.kanban-swimlane:last-child {
    border-bottom: none;
}

.kanban-swimlane-label {
    width: 160px;
    min-width: 160px;
    max-width: 160px;
    background: #f8f9fa;
    font-weight: 600;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: flex;
    align-items: flex-start;
    padding: 0.4rem 0.5rem;
    border-right: 1px solid var(--border);
    color: var(--text);
    padding-top: 0.5rem;
}

.kanban-column {
    flex: 1;
    min-width: 120px;
    padding: 0.25rem;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--border);
    background: #fafafa;
}

.kanban-column:last-child {
    border-right: none;
}

.kanban-card {
    background: var(--bg-surface);
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.07);
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.25rem;
    border-left: 3px solid var(--kanban-border, #6c757d);
    cursor: pointer;
    font-size: 0.8rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    user-select: none;
}

.kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.13);
}

.kanban-card:last-child {
    margin-bottom: 0;
}

.kanban-card-title {
    display: block;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.2rem;
    line-height: 1.3;
}

.kanban-card-meta {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    flex-wrap: wrap;
    font-size: 0.7rem;
    color: var(--text-muted);
    line-height: 1.2;
}

.kanban-empty-col {
    text-align: center;
    color: var(--text-muted);
    font-size: 0.72rem;
    padding: 0.5rem 0;
    user-select: none;
    opacity: 0.45;
}

/* === Utility classes for CSP inline style removal === */
.input-base {
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.85rem;
}
.input-narrow { min-width: 200px; }
.input-short { width: 130px; }
.input-sm-select { padding: 0.35rem 0.5rem; }

.text-sm { font-size: 0.85rem; }
.text-xs { font-size: 0.75rem; }
.text-muted { color: var(--text-muted); }
.text-muted-sm { font-size: 0.85rem; color: var(--text-muted); }
.text-muted-xs { font-size: 0.8rem; color: var(--text-muted); }
.text-success { color: var(--success); }
.text-danger { color: var(--danger); }
.text-warning { color: var(--warning); }
.text-primary { color: var(--primary); }

.flex-row { display: flex; }
.flex-row-gap-sm { display: flex; gap: 0.5rem; }
.flex-row-gap-xs { display: flex; gap: 0.3rem; }
.flex-row-gap-md { display: flex; gap: 0.4rem; }
.flex-row-center { display: flex; align-items: center; }
.flex-row-center-gap-sm { display: flex; gap: 0.5rem; align-items: center; }
.flex-row-center-gap-xs { display: flex; gap: 0.3rem; align-items: center; }
.flex-row-wrap { display: flex; flex-wrap: wrap; }
.flex-row-wrap-gap-xs { display: flex; gap: 0.3rem; flex-wrap: wrap; }

.flex-between { display: flex; justify-content: space-between; }
.flex-between-center { display: flex; justify-content: space-between; align-items: center; }
.flex-between-center-wrap { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }

.mt-xs { margin-top: 0.25rem; }
.mt-sm { margin-top: 0.4rem; }
.mt-md { margin-top: 0.5rem; }
.mb-xs { margin-bottom: 0.25rem; }
.mb-sm { margin-bottom: 0.5rem; }
.ml-xs { margin-left: 0.4rem; }
.ml-sm { margin-left: 0.5rem; }

.section-gap { margin-bottom: 1.25rem; }

.badge-sm {
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}
.badge-human { background: #17a2b8; color: white; }
.badge-bot-type { background: var(--primary); color: white; }
.badge-human-inactive { background: #e9ecef; color: var(--text-muted); }
.badge-role { background: var(--success); color: white; padding: 0.1rem 0.4rem; border-radius: 10px; font-size: 0.75rem; margin-right: 2px; }

.badge-fragment-type {
    background: var(--primary);
    color: white;
    padding: 0.1rem 0.35rem;
    border-radius: 3px;
    font-size: 0.72rem;
}

.badge-inline-flex {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
}

.btn-icon-remove {
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
    font-size: 0.9rem;
    padding: 0;
    line-height: 1;
}

.table-cell-sm { font-size: 0.8rem; }
.table-cell-muted { font-size: 0.82rem; color: var(--text-muted); }
.table-cell-nowrap { white-space: nowrap; }
.table-cell-truncate {
    font-size: 0.8rem;
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.label-sm { font-size: 0.85rem; font-weight: 600; }
.label-sm-select { font-size: 0.78rem; font-weight: 600; }
.label-xs-select { font-size: 0.8rem; font-weight: 600; }

.select-sm { font-size: 0.75rem; padding: 0.18rem; }
.select-sm-select { font-size: 0.78rem; padding: 0.2rem; }
.select-xs-select { font-size: 0.8rem; padding: 0.2rem 0.35rem; }

.code-sm { font-size: 0.78rem; }

.scorecard-box {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 6px;
}

.scorecard-name {
    font-weight: 600;
    margin-bottom: 0.4rem;
}

.scorecard-detail {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 0.25rem;
}

.staging-header-id { font-weight: 600; }
.staging-header-badge { margin-left: 0.4rem; }
.staging-header-meta {
    margin-left: 0.4rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.autonomy-detail { margin-top: 0.25rem; }
.autonomy-cap-text { font-size: 0.8rem; }
.autonomy-select { font-size: 0.8rem; padding: 0.2rem; }
.autonomy-label { font-size: 0.78rem; font-weight: 600; color: var(--mode-color, inherit); }

.proxy-active-badge {
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.75rem;
}

.proxy-active { background: var(--success); color: white; }
.proxy-inactive { background: #aaa; color: white; }

.actors-loading { color: var(--text-muted); font-size: 0.8rem; }
.actors-grant-label { font-size: 0.78rem; font-weight: 600; }
.actors-grant-select { font-size: 0.78rem; padding: 0.18rem 0.3rem; }
.actors-grant-label-lg { font-size: 0.8rem; font-weight: 600; }
.actors-grant-select-lg { font-size: 0.8rem; padding: 0.2rem 0.35rem; }

.t2-section-header { margin-top: 1rem; }
.t2-section-header h4 { margin: 0; font-size: 0.85rem; color: var(--primary); }

.satellite-bot-row { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.pl-xs { padding-left: 0.25rem; }

.t2-header-flex { display: flex; gap: 0.35rem; }
.t2-header-flex-center { display: flex; gap: 0.35rem; align-items: center; }

.admin-version-label { margin-left: auto; font-size: 0.72rem; opacity: 0.7; }

.stat-value-primary { color: var(--primary); }
.stat-value-danger { color: var(--danger); }
.stat-value-warning { color: var(--warning); }
.stat-value-orange { color: #fd7e14; }

.label-row { display: flex; align-items: center; gap: 0.3rem; font-size: 0.85rem; cursor: pointer; }

.note-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; }

.note-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.25rem; }

.people-toolbar { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; margin-bottom: 0.75rem; }
.people-count { font-size: 0.85rem; color: var(--text-muted); margin-left: 0.5rem; }
.th-narrow { width: 32px; }
.pill-btn {
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    display: inline-block;
    margin: 2px;
}
.pill-btn-inactive { background: #e9ecef; color: var(--text-muted); }

.cap-pill {
    cursor: pointer;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    font-size: 0.78rem;
    display: inline-block;
    margin: 2px;
}
.cap-pill-active { background: var(--primary); color: white; }
.cap-pill-inactive { background: #e9ecef; color: var(--text-muted); }

.icon-inline { font-size: 0.7rem; margin-right: 2px; }
.status-online { color: var(--success); }
.status-offline { color: var(--text-muted); }
.status-running { color: var(--primary); }
.status-error { color: var(--danger); }
.status-waiting { color: var(--text-muted); }
.status-dash { color: var(--text-muted); }

.issue-status { font-weight: 600; }

.indicator-success { color: var(--success); font-size: 0.85rem; }
.no-results { text-align: center; color: var(--text-muted); }
.no-results-sm { color: var(--text-muted); font-size: 0.9rem; }

.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 0.75rem; }
.mt-lg { margin-top: 1rem; }
.ml-md { margin-left: 1rem; }
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 0.75rem; }
.mb-lg { margin-bottom: 1rem; }

.text-center { text-align: center; }

.badge-priority {
    background: var(--purple);
    color: white;
    font-size: 0.7rem;
}

.badge-hold {
    background: var(--warning);
    color: var(--dark);
    font-size: 0.7rem;
}

.ai-config-section {
    border-left: 3px solid var(--purple);
    padding-left: 1rem;
    margin-top: 1rem;
}

.ai-config-section h3 {
    color: var(--purple);
}

.ai-config-grid {
    margin-top: 0.5rem;
}

.agent-runs-section {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.agent-runs-section h3 {
    font-size: 1rem;
    margin-bottom: 0.5rem;
}

.agent-runs-table {
    width: 100%;
    font-size: 0.8rem;
}

.attachments-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 6px;
    border: 1px solid var(--border);
}

.attachments-section h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
}

.attachment-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}

.attachment-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    background: var(--bg-surface);
    border: 1px solid var(--border-1);
    border-radius: 4px;
}

.attachment-name {
    font-size: 0.85rem;
    flex: 1;
}

.attachment-name a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 500;
}

.attachment-meta {
    color: var(--text-muted);
    font-size: 0.75rem;
    margin-left: 0.5rem;
}

.attachment-form {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
}

.file-input {
    font-size: 0.85rem;
}

.note-form-row {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.note-form-select {
    width: auto;
    padding: 0.4rem;
}

.post-result-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.post-result-section h4 {
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}

.post-result-select {
    width: auto;
    padding: 0.4rem;
    margin-bottom: 0.5rem;
}

.pre-wrap {
    white-space: pre-wrap;
}

.pre-code {
    display: block;
    white-space: pre-wrap;
    font-family: var(--font-mono, 'JetBrains Mono', 'Courier New', monospace);
    font-size: 0.8rem;
    background: var(--bg-2, #f1f5f9);
    padding: 10px 12px;
    border-radius: 6px;
    border: 1px solid var(--border-1, #e2e8f0);
    overflow-x: auto;
    color: var(--fg-1);
}

.pre-code-sm {
    white-space: pre-wrap;
    font-size: 0.8rem;
}

.pre-code-tall {
    white-space: pre-wrap;
    font-size: 0.8rem;
    max-height: 300px;
    overflow: auto;
}

.iframe-result {
    width: 100%;
    min-height: 200px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--bg-surface);
}

.parent-breadcrumb {
    margin-bottom: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
}

.parent-breadcrumb a {
    color: var(--primary);
}

.subtasks-section {
    margin-top: 1.5rem;
    padding: 1rem;
    background: var(--bg-surface-2);
    border-radius: 6px;
    border: 1px solid var(--border);
}

.subtasks-section h3 {
    font-size: 1rem;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.subtask-progress {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin-bottom: 0.75rem;
    overflow: hidden;
}

.subtask-progress-bar {
    height: 100%;
    background: var(--success);
    width: var(--progress, 0%);
}

.subtask-id {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.subtask-title {
    flex: 1;
}

.subtask-assignee {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.add-subtask-btn {
    margin-top: 0.75rem;
}

.mr-sm { margin-right: 0.5rem; }

.text-center-pad-2rem { text-align: center; padding: 2rem; color: var(--text-muted); }
.td-center-pad-2rem-muted { text-align: center; padding: 2rem; color: var(--text-muted); }

.tree-toggle-placeholder { display: inline-block; width: 16px; margin-right: 4px; }

.td-center-32 { text-align: center; width: 32px; }

.text-muted-dash { color: var(--text-muted); }

.badge-warning-sm { background: var(--warning); color: var(--dark); font-size: 0.65rem; padding: 0.1rem 0.3rem; }

.badge-sm-xs { font-size: 0.65rem; padding: 0.1rem 0.3rem; }

.visibility-hidden { visibility: hidden; }

.badge-human { background: #17a2b8; color: white; }

/* ── VERSION GATE ─────────────────────────────────────────────────────────── */

.view-mode-toggle { display: flex; gap: 0.5rem; margin-bottom: 1rem; }

#version-gate-container { padding: 1rem 0 1rem 1rem; }

.vg-toolbar { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.vg-toolbar select { padding: 0.3rem 0.5rem; border: 1px solid var(--border); border-radius: 4px; }
.vg-meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; padding: 0.5rem 0; }
.vg-meta-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1rem 1.1rem; cursor: pointer; transition: border-color 0.15s, box-shadow 0.15s; }
.vg-meta-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.vg-meta-has-versions { border-left: 3px solid var(--accent); }
.vg-meta-no-versions { opacity: 0.65; }
.vg-meta-name { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.25rem; }
.vg-meta-company { font-size: 0.78rem; margin-bottom: 0.5rem; }
.vg-meta-stats { display: flex; gap: 0.4rem; align-items: center; flex-wrap: wrap; font-size: 0.8rem; }
.version-gate-stack .version-sealed { display: none; }
.version-gate-stack.show-sealed .version-sealed { display: block; }

.version-bucket {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 6px;
    margin-bottom: 1rem;
    overflow: hidden;
}

.version-bucket-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
}

.version-bucket.version-active   .version-bucket-header { background: #e8f4fd; border-left: 4px solid var(--primary); }
.version-bucket.version-sealed   .version-bucket-header { background: #eafaf1; border-left: 4px solid var(--success); }
.version-bucket.version-locked   .version-bucket-header { background: #fff8e1; border-left: 4px solid var(--warning); }
.version-bucket.version-abandoned .version-bucket-header { background: #f8f9fa; border-left: 4px solid #adb5bd; }

.version-code-badge {
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: 3px;
    background: var(--primary);
    color: white;
    letter-spacing: 0.04em;
}
.version-bucket.version-sealed   .version-code-badge { background: var(--success); }
.version-bucket.version-locked   .version-code-badge { background: var(--warning); color: var(--dark); }
.version-bucket.version-abandoned .version-code-badge { background: #adb5bd; color: white; }

.version-meta { font-size: 0.8rem; color: var(--text-muted); margin-left: auto; }

.vg-progress-wrap  { padding: 0.5rem 1rem; background: #f8f9fa; border-bottom: 1px solid var(--border); }
.vg-progress-bar-bg { height: 6px; background: #dee2e6; border-radius: 3px; overflow: hidden; }
.vg-progress-bar   { height: 100%; background: var(--success); border-radius: 3px; transition: width 0.3s; }
.vg-progress-label { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.25rem; }

.version-tasks { padding: 0; }

.vg-task-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #f0f0f0;
    font-size: 0.875rem;
}
.vg-task-row:last-child { border-bottom: none; }
.vg-task-row.vg-clickable { cursor: pointer; }
.vg-task-row.vg-clickable:hover { background: #f8f9fa; }

.vg-task-status   { font-size: 0.7rem; width: 70px; flex-shrink: 0; text-align: center; }
.vg-task-id       { color: var(--text-muted); font-size: 0.75rem; flex-shrink: 0; width: 40px; }
.vg-task-title    { flex: 1; }
.vg-task-assignee { font-size: 0.75rem; color: var(--text-muted); flex-shrink: 0; }

.vg-empty    { padding: 1.5rem 1rem; color: var(--text-muted); font-style: italic; font-size: 0.875rem; }
.vg-seal-row { padding: 0.75rem 1rem; text-align: right; background: #f8f9fa; border-top: 1px solid var(--border); }
.btn-xs { font-size: 0.7rem; padding: 0.1rem 0.4rem; line-height: 1.4; border-radius: 3px; }
.vt-done-btn { flex-shrink: 0; opacity: 0.6; }
.vt-done-btn:hover { opacity: 1; }

/* ============================================================
   BrIAn Redesign — new component blocks (Phase A)
   ============================================================ */

/* ---------- App shell ---------- */
.app { display: grid; grid-template-rows: 48px 1fr; min-height: 100vh; }
.topbar {
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: var(--topbar-bg);
  border-bottom: 1px solid var(--topbar-border);
  color: var(--topbar-fg);
  position: sticky; top: 0; z-index: 50;
}
.brand {
  font-family: var(--ff-mono);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--topbar-fg);
  font-size: var(--fs-14);
  display: flex; align-items: center; gap: 8px;
}
.brand-mark {
  width: 22px; height: 22px;
  background: var(--accent);
  border-radius: var(--r-2);
  display: grid; place-items: center;
  color: var(--fg-on-accent); font-weight: 700; font-size: 12px;
  font-family: var(--ff-mono);
}
.topnav { display: flex; gap: 2px; margin-left: var(--sp-4); }
.topnav .tab {
  padding: 6px 12px; border-radius: var(--r-2);
  color: color-mix(in oklch, var(--topbar-fg) 65%, transparent); background: transparent; border: 0;
  display: flex; align-items: center; gap: 6px;
  font-weight: 500; font-size: var(--fs-13);
}
.topnav .tab:hover { background: var(--bg-surface-2); color: var(--topbar-fg); }
.topnav .tab.active { background: var(--accent-soft); color: var(--accent-2); }
.topnav .tab .count {
  font-family: var(--ff-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 99px;
  background: var(--bg-surface-3); color: var(--fg-2);
}
.topnav .tab.active .count { background: var(--accent); color: var(--fg-on-accent); }

.spacer { flex: 1; }
.topbar-meta { display: flex; align-items: center; gap: var(--sp-3); color: color-mix(in oklch, var(--topbar-fg) 65%, transparent); }
.topbar-meta .who { font-family: var(--ff-mono); font-size: var(--fs-12); }
.topbar-meta .role-pill {
  font-family: var(--ff-mono); font-size: 10px;
  padding: 2px 6px; border-radius: var(--r-1);
  background: color-mix(in oklch, var(--accent) 12%, transparent);
  border: 1px solid color-mix(in oklch, var(--accent) 35%, transparent);
  color: color-mix(in oklch, var(--accent) 80%, var(--fg-1));
  text-transform: uppercase; letter-spacing: 0.04em;
}
.iconbtn {
  width: 28px; height: 28px; border-radius: var(--r-2);
  border: 1px solid var(--border-1); background: var(--bg-surface);
  display: grid; place-items: center; color: var(--fg-2);
}
.iconbtn:hover { background: var(--bg-surface-2); color: var(--fg-1); border-color: var(--border-2); }

/* ---------- Buttons (new classes only) ---------- */
.btn-ghost { border-color: transparent; background: transparent; color: var(--fg-2); }
.btn-ghost:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.btn-xs { font-size: 0.7rem; padding: 0.1rem 0.4rem; line-height: 1.4; border-radius: 3px; }
.btn.btn-warning { background: color-mix(in oklch, var(--c-review) 12%, transparent); border: 1px solid color-mix(in oklch, var(--c-review) 50%, transparent); color: var(--c-review); }
.btn.btn-warning:hover { opacity: 1; background: color-mix(in oklch, var(--c-review) 22%, transparent); border-color: var(--c-review); }
.btn.btn-success { background: color-mix(in oklch, var(--c-done) 12%, transparent); border-color: var(--c-done); color: var(--c-done); }
.btn.btn-success:hover { opacity: 1; background: color-mix(in oklch, var(--c-done) 12%, transparent); }
.kbd {
  font-family: var(--ff-mono); font-size: 10px;
  padding: 1px 5px; border-radius: 3px;
  background: var(--bg-surface-3); color: var(--fg-3);
  border: 1px solid var(--border-1); border-bottom-width: 2px;
}

/* ---------- Layout ---------- */
.main { display: grid; grid-template-columns: 220px 1fr; min-height: calc(100vh - 48px); }
.side {
  background: var(--bg-surface);
  border-right: 1px solid var(--border-1);
  padding: var(--sp-3);
  display: flex; flex-direction: column; gap: var(--sp-3);
  overflow-y: auto;
}
.side h4 {
  margin: 8px 4px 4px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 600;
}
.side .navitem {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px; border-radius: var(--r-2);
  color: var(--fg-2); cursor: pointer;
  font-size: var(--fs-13);
  border: none; background: none; width: 100%; text-align: left;
}
.side .navitem:hover { background: var(--bg-surface-2); color: var(--fg-1); }
.side .navitem.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 500; }
.side .navitem .ico { width: 16px; text-align: center; color: var(--fg-3); }
.side .navitem .badge-n { margin-left: auto; font-family: var(--ff-mono); font-size: 10px; color: var(--fg-3); }
.side .navitem.active .badge-n { color: var(--accent-2); }

.content {
  display: flex; flex-direction: column;
  min-width: 0; /* allow grid item to shrink */
}

/* ---------- Stats strip ---------- */
.stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1px;
  background: var(--border-1);
  border-bottom: 1px solid var(--border-1);
}
.stat {
  background: var(--bg-surface); padding: 10px 14px;
  display: flex; flex-direction: column; gap: 2px;
  cursor: pointer;
}
.stat:hover { background: var(--bg-surface-2); }
.stat.active { background: var(--bg-surface-2); }
.stat .label { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-3); font-weight: 600; }
.stat .value { font-family: var(--ff-mono); font-size: var(--fs-22); font-weight: 600; color: var(--fg-1); line-height: 1.1; }
.stat.warn .value { color: var(--c-review); }
.stat.danger .value { color: var(--c-blocked); }
.stat.go .value { color: var(--c-done); }
.stat.info .value { color: var(--c-active); }
.stat .sub { font-size: 11px; color: var(--fg-3); }

/* ---------- Filter bar (new classes only) ---------- */
.fchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: 99px;
  border: 1px dashed var(--border-2); color: var(--fg-2);
  background: transparent; font-size: var(--fs-12);
}
.fchip.on { background: var(--accent-soft); color: var(--accent-2); border-style: solid; border-color: transparent; }
.fchip:hover { border-color: var(--border-3); color: var(--fg-1); }
.fchip .x { color: var(--fg-3); }
.fchip .v { font-family: var(--ff-mono); }
.fchip select {
  background: transparent; border: 0; color: inherit; font: inherit;
  padding: 0; cursor: pointer;
}

/* View switcher */
.viewsw { display: inline-flex; padding: 2px; gap: 2px; background: var(--bg-surface-2); border-radius: var(--r-2); border: 1px solid var(--border-1); }
.viewsw button {
  padding: 3px 10px; border-radius: var(--r-1); border: 0;
  background: transparent; color: var(--fg-2); font-size: var(--fs-12); font-weight: 500;
  display: inline-flex; align-items: center; gap: 4px;
}
.viewsw button.on { background: var(--bg-surface); color: var(--fg-1); box-shadow: var(--sh-1); }

/* ---------- Task table ---------- */
.tablewrap { flex: 1; overflow: auto; min-height: 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-13); table-layout: fixed; }
.tbl thead th {
  position: sticky; top: 0; z-index: 5;
  background: var(--bg-surface-2); color: var(--fg-3);
  text-align: left; font-weight: 500;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  padding: 6px var(--row-pad-x);
  border-bottom: 1px solid var(--border-1);
  white-space: nowrap;
}
.tbl thead th.c-sortable { cursor: pointer; user-select: none; }
.tbl thead th.c-sortable:hover { color: var(--fg-1); background: var(--bg-surface-3); }
.tbl thead th.c-sortable .sort-icon { margin-left: 3px; opacity: 0.25; font-size: 9px; }
.tbl thead th.c-sortable.sorted { color: var(--accent); }
.tbl thead th.c-sortable.sorted .sort-icon { opacity: 1; }
.tbl tbody td {
  padding: 0 var(--row-pad-x);
  border-bottom: 1px solid var(--border-1);
  height: var(--row-h);
  vertical-align: middle;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--bg-surface);
}
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr:hover td { background: var(--bg-row-hover); }
.tbl tbody tr.sel td { background: var(--bg-row-selected); }

.tbl td.c-id { color: var(--fg-3); font-family: var(--ff-mono); font-size: var(--fs-12); width: 56px; padding: 0 8px; }
.c-mode { width: 72px; text-align: center; }
.tbl td.c-task { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl td.c-task .ttl-wrap { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.tbl td.c-task .ttl { color: var(--fg-1); }
.tbl td.c-task .meta { color: var(--fg-3); font-size: 11px; margin-left: 6px; }

/* Project group row */
.tbl tbody tr.g td {
  background: var(--bg-group);
  border-top: 1px solid var(--border-1);
  font-weight: 500;
  height: 32px;
}
.tbl tbody tr.g td.c-task { color: var(--fg-1); }
.tbl tbody tr.g .twist { display: inline-flex; width: 14px; color: var(--fg-3); transition: transform 0.15s; }
.tbl tbody tr.g.col .twist { transform: rotate(-90deg); }

.tbl .swim { display: inline-block; width: 3px; height: 18px; margin-right: 8px; border-radius: 2px; vertical-align: middle; background: transparent; }

.tbl .depth { display: inline-block; width: 16px; }
.tbl .tline {
  display: inline-block; width: 12px; height: 1px; vertical-align: middle;
  background: var(--border-2);
  margin-right: 6px;
}

/* ---------- Badges & pills (new classes only — badge-* family preserved above) ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: var(--r-1);
  font-size: 11px; font-weight: 500; line-height: 1.5;
  font-family: var(--ff-mono);
  white-space: nowrap;
}
.pill.solid { color: var(--fg-on-accent); }
.pill .dot { width: 6px; height: 6px; border-radius: 99px; }

.pill.impact-critical { background: color-mix(in oklch, var(--c-critical) 14%, transparent); color: var(--c-critical); }
.pill.impact-high     { background: color-mix(in oklch, var(--c-high) 16%, transparent); color: oklch(0.42 0.16 55); }
.pill.impact-medium   { background: color-mix(in oklch, var(--c-medium) 22%, transparent); color: oklch(0.42 0.14 85); }
.pill.impact-low      { background: color-mix(in oklch, var(--c-low) 18%, transparent); color: oklch(0.40 0.10 165); }

.pill.urg-now      { background: var(--c-now); color: var(--fg-on-accent); }
.pill.urg-week     { background: color-mix(in oklch, var(--c-week) 18%, transparent); color: oklch(0.40 0.16 50); }
.pill.urg-month    { background: color-mix(in oklch, var(--c-month) 18%, transparent); color: oklch(0.36 0.14 220); }
.pill.urg-someday  { background: var(--bg-surface-3); color: var(--fg-3); }

.pill.st-active   { background: color-mix(in oklch, var(--c-active) 18%, transparent); color: oklch(0.40 0.14 230); }
.pill.st-backlog  { background: var(--bg-surface-3); color: var(--fg-2); }
.pill.st-blocked  { background: color-mix(in oklch, var(--c-blocked) 16%, transparent); color: var(--c-blocked); }
.pill.st-review   { background: color-mix(in oklch, var(--c-review) 22%, transparent); color: oklch(0.40 0.16 75); }
.pill.st-done     { background: color-mix(in oklch, var(--c-done) 18%, transparent); color: oklch(0.38 0.13 150); }
.pill.st-delayed  { background: color-mix(in oklch, var(--c-delayed) 18%, transparent); color: oklch(0.40 0.16 45); }
.pill.st-canceled { background: var(--bg-surface-3); color: var(--fg-3); text-decoration: line-through; }

[data-theme="dark"] .pill.impact-high   { color: oklch(0.86 0.15 55); }
[data-theme="dark"] .pill.impact-medium { color: oklch(0.90 0.13 85); }
[data-theme="dark"] .pill.impact-low    { color: oklch(0.88 0.10 165); }
[data-theme="dark"] .pill.urg-week      { color: oklch(0.86 0.16 50); }
[data-theme="dark"] .pill.urg-month     { color: oklch(0.85 0.14 220); }
[data-theme="dark"] .pill.st-active     { color: oklch(0.85 0.13 230); }
[data-theme="dark"] .pill.st-review     { color: oklch(0.85 0.15 75); }
[data-theme="dark"] .pill.st-done       { color: oklch(0.82 0.13 150); }
[data-theme="dark"] .pill.st-delayed    { color: oklch(0.85 0.15 45); }

/* ── Dark mode fixes: hardcoded light backgrounds → themed surfaces ───────── */
[data-theme="dark"] th                          { background: var(--bg-surface-2); }
[data-theme="dark"] th:hover                    { background: var(--bg-surface-3); }
[data-theme="dark"] tr:hover                    { background: var(--bg-row-hover); }
[data-theme="dark"] tr.is-project               { background: var(--bg-surface-2); }
[data-theme="dark"] tr.is-project:hover         { background: var(--bg-surface-3); }
[data-theme="dark"] tr.is-subtask               { background: var(--bg-canvas); }
[data-theme="dark"] .subtask-item:hover         { background: var(--bg-surface-2); }
[data-theme="dark"] .detail-context,
[data-theme="dark"] .detail-prompt,
[data-theme="dark"] .detail-result              { background: var(--bg-surface-2); }
[data-theme="dark"] .detail-result.has-result   { background: oklch(0.22 0.025 150); }
[data-theme="dark"] .pre-code                   { background: var(--bg-surface-2); color: var(--fg-1); }
[data-theme="dark"] .staging-payload            { background: var(--bg-surface-2); }
[data-theme="dark"] .scorecard-stat             { background: var(--bg-surface-2); }
[data-theme="dark"] .bash-editor                { background: var(--bg-surface-2); }
[data-theme="dark"] .kp-warning                 { background: oklch(0.22 0.04 75); border-color: oklch(0.55 0.16 75); color: oklch(0.85 0.16 75); }
[data-theme="dark"] .bash-confirm-box           { background: oklch(0.22 0.04 75); }
[data-theme="dark"] .token-value                { background: var(--bg-surface-2); color: var(--fg-1); }
[data-theme="dark"] .kanban-swimlane-label      { background: var(--bg-surface-2); }
[data-theme="dark"] .kanban-column              { background: var(--bg-canvas); }
[data-theme="dark"] .note-type-comment          { background: var(--bg-surface-3); color: var(--fg-2); }
[data-theme="dark"] .note-type-update           { background: oklch(0.24 0.04 75); color: oklch(0.85 0.16 75); }
[data-theme="dark"] .note-type-meeting          { background: oklch(0.22 0.04 200); color: oklch(0.82 0.12 200); }

/* ── Dark mode: missing section backgrounds (FIX GROUP C) ─────────────── */
[data-theme="dark"] .agent-runs-section { background: var(--bg-surface-2); }
[data-theme="dark"] .attachments-section { background: var(--bg-surface-2); }
[data-theme="dark"] .scorecard-box { background: var(--bg-surface-2); }
[data-theme="dark"] .bulk-bar { background: var(--bg-surface-2); border-color: var(--border-2); }
[data-theme="dark"] .kanban-card { background: var(--bg-surface); border-color: var(--border-1); }
[data-theme="dark"] .attachment-item { border-color: var(--border-1); }
[data-theme="dark"] .multi-select { border-color: var(--border-2); }
[data-theme="dark"] .dropdown-menu { border: 1px solid var(--border-2); box-shadow: var(--sh-2); }

/* ── Dark mode: badge colors (FIX GROUP D) ────────────────────────────── */
[data-theme="dark"] .badge-active  { background: oklch(0.25 0.06 250); color: oklch(0.80 0.10 250); }
[data-theme="dark"] .badge-blocked { background: oklch(0.22 0.07 15);  color: oklch(0.82 0.12 15);  }
[data-theme="dark"] .badge-review  { background: oklch(0.25 0.07 75);  color: oklch(0.85 0.12 75);  }
[data-theme="dark"] .badge-done, [data-theme="dark"] .badge-completed { background: oklch(0.22 0.07 145); color: oklch(0.80 0.12 145); }
[data-theme="dark"] .badge-default, [data-theme="dark"] .badge-pending, [data-theme="dark"] .badge-backlog { background: var(--bg-surface-2); color: var(--fg-2); }
[data-theme="dark"] .badge-canceled { background: var(--bg-surface-2); color: var(--fg-3); }

/* ── Dark mode: version bucket headers (FIX GROUP E) ─────────────────── */
[data-theme="dark"] .version-bucket.version-active   .version-bucket-header { background: oklch(0.20 0.04 250); }
[data-theme="dark"] .version-bucket.version-sealed   .version-bucket-header { background: oklch(0.20 0.04 145); }
[data-theme="dark"] .version-bucket.version-locked   .version-bucket-header { background: oklch(0.22 0.05 75);  }
[data-theme="dark"] .version-bucket.version-abandoned .version-bucket-header { background: var(--bg-surface-2); }

/* ── Dark mode: version gate progress and task rows (FIX GROUP F) ─────── */
[data-theme="dark"] .vg-progress-wrap  { background: var(--bg-surface-2); }
[data-theme="dark"] .vg-seal-row       { background: var(--bg-surface-2); }
[data-theme="dark"] .vg-progress-bar-bg { background: var(--border-2); }
[data-theme="dark"] .vg-task-row       { border-bottom-color: var(--border-1); }
[data-theme="dark"] .vg-task-row.vg-clickable:hover { background: var(--bg-row-hover); }

.copill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 1px 5px; border-radius: var(--r-1);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--fg-on-accent);
}
/* Company pills — define --co-{CODE} in tokens.css to add per-company colour */
.copill.TEST { background: var(--co-test); }

.vchip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 1px 6px; border-radius: var(--r-1);
  font-family: var(--ff-mono); font-size: 10px; font-weight: 600;
  background: color-mix(in oklch, var(--accent) 14%, transparent);
  color: var(--accent-2);
  border: 1px solid color-mix(in oklch, var(--accent) 22%, transparent);
}
.vchip .v-dot { width: 5px; height: 5px; border-radius: 99px; background: var(--accent); }
.vchip.locked { color: var(--fg-3); background: var(--bg-surface-3); border-color: var(--border-2); }
.vchip.locked .v-dot { background: var(--fg-4); }
.vchip.sealed { color: var(--c-done); background: color-mix(in oklch, var(--c-done) 12%, transparent); border-color: color-mix(in oklch, var(--c-done) 28%, transparent); }
.vchip.sealed .v-dot { background: var(--c-done); }

.tagP, .tagV {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  letter-spacing: 0.06em;
  padding: 1px 5px; border-radius: 3px;
  margin-right: 4px;
}
.tagP { background: var(--accent-2); color: var(--fg-on-accent); }
.tagV { background: oklch(0.40 0.10 280); color: var(--fg-on-accent); }

.prio {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px;
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  border-radius: var(--r-1);
  color: var(--fg-on-accent);
}
.prio.p1, .prio.p2, .prio.p3 { background: var(--c-low); color: oklch(0.30 0.08 165); }
.prio.p4, .prio.p5 { background: var(--c-medium); color: oklch(0.34 0.10 85); }
.prio.p6, .prio.p7 { background: var(--c-high); color: oklch(0.34 0.14 55); }
.prio.p8, .prio.p9, .prio.p10 { background: var(--c-critical); color: var(--fg-on-accent); }

.deadline {
  font-family: var(--ff-mono); font-size: 11px;
  padding: 1px 6px; border-radius: var(--r-1);
  background: var(--c-blocked); color: var(--fg-on-accent);
}
.deadline.soft { background: var(--bg-surface-3); color: var(--fg-2); }

@supports not (color: color-mix(in oklch, red, blue)) {
    .pill.impact-critical { background: #fde9e6; color: #b1281a; }
    .pill.impact-high     { background: #fef6e7; color: #92600a; }
    .pill.impact-medium   { background: #fefce8; color: #7a5e0a; }
    .pill.impact-low      { background: #e7f7ee; color: #1a6635; }
    .pill.st-active  { background: #e7effe; color: #1a3a80; }
    .pill.st-blocked { background: #fde9e6; color: #b1281a; }
    .pill.st-review  { background: #fef6e7; color: #7a4e0a; }
    .pill.st-done    { background: #e7f7ee; color: #1a6635; }
    .pill.st-delayed { background: #fef2e7; color: #7a4e0a; }
}

/* Avatar */
.av {
  display: inline-grid; place-items: center;
  width: 18px; height: 18px; border-radius: 99px;
  font-family: var(--ff-mono); font-size: 9px; font-weight: 700;
  color: var(--fg-on-accent);
  background: var(--fg-3);
  margin-right: 4px;
}
.av.bot { border-radius: var(--r-1); }
.av.b1 { background: oklch(0.55 0.14 30); }
.av.b2 { background: oklch(0.55 0.14 70); }
.av.b3 { background: oklch(0.55 0.14 130); }
.av.b4 { background: oklch(0.55 0.14 200); }
.av.b5 { background: oklch(0.55 0.14 260); }
.av.b6 { background: oklch(0.55 0.14 320); }
.av-list { display: inline-flex; align-items: center; }
.av-list .av:not(:first-child) { margin-left: -6px; box-shadow: 0 0 0 1.5px var(--bg-surface); }

/* Mode triplet (chmod-style) */
.mode {
  font-family: var(--ff-mono); font-size: 10px;
  display: inline-flex; gap: 2px;
  padding: 1px 4px; border-radius: var(--r-1);
  background: var(--bg-surface-3); color: var(--fg-2);
}
.mode .seg { padding: 0 2px; border-radius: 2px; }
.mode .seg.r { color: var(--c-active); }
.mode .seg.w { color: var(--c-review); }
.mode .seg.x { color: var(--c-done); }
.mode .seg.m { color: var(--fg-4); }
.rwx-btn {
  width: 18px; height: 18px;
  display: grid; place-items: center;
  border: 1px solid var(--border-1); background: var(--bg-surface);
  font-family: var(--ff-mono); font-size: 11px; font-weight: 700;
  color: var(--fg-4); border-radius: 3px; cursor: pointer;
}
.rwx-btn.on { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
.rwx-btn.r.on { color: oklch(0.40 0.14 230); background: color-mix(in oklch, var(--c-active) 18%, transparent); }
.rwx-btn.w.on { color: oklch(0.40 0.16 75); background: color-mix(in oklch, var(--c-review) 22%, transparent); }
.rwx-btn.x.on { color: oklch(0.38 0.13 150); background: color-mix(in oklch, var(--c-done) 18%, transparent); }

/* ---------- Slide-over ---------- */
.slideover {
  position: fixed; top: 48px; right: 0; bottom: 0;
  width: 560px; max-width: 95vw;
  background: var(--bg-surface);
  border-left: 1px solid var(--border-1);
  box-shadow: var(--sh-3);
  z-index: 40;
  display: flex; flex-direction: column;
  transform: translateX(0);
  transition: transform 0.18s ease;
}
.slideover.hidden { transform: translateX(110%); }
.slideover .resizer {
  position: absolute; top: 0; bottom: 0; left: -3px;
  width: 6px; cursor: col-resize;
  background: transparent;
  z-index: 2;
}
.slideover .resizer::after {
  content: ""; position: absolute; left: 2px; top: 50%; transform: translateY(-50%);
  width: 2px; height: 48px; border-radius: 2px;
  background: var(--border-3);
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s;
}
.slideover .resizer:hover::after, .slideover .resizer.dragging::after {
  background: var(--accent); opacity: 1; height: 80px;
}
.so-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  gap: var(--sp-2);
}
.so-h .id { font-family: var(--ff-mono); color: var(--fg-3); font-size: var(--fs-12); }
.so-hid {
  display: flex; align-items: center; gap: var(--sp-2); flex: 1; min-width: 0;
}
.so-title {
  font-size: var(--fs-18); font-weight: 600; color: var(--fg-1);
  line-height: 1.25; margin: 0 0 var(--sp-1);
}
.so-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-1); align-items: center;
}
.so-h-controls { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.so-acts-menu { position: relative; display: inline-block; }
.so-acts-menu > summary { list-style: none; cursor: pointer; }
.so-acts-menu > summary::-webkit-details-marker { display: none; }
.so-acts-dropdown {
  position: absolute; right: 0; top: calc(100% + 4px);
  background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-2); box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 160px; z-index: 200;
  display: flex; flex-direction: column; padding: 4px 0;
}
.so-acts-dropdown .btn {
  text-align: left; border-radius: 0; justify-content: flex-start;
  padding: 8px 14px; width: 100%; font-size: var(--fs-13); border: none;
}
.so-acts-dropdown .btn:hover { background: var(--bg-surface-2); }
.so-section { display: flex; flex-direction: column; gap: var(--sp-2); }
.so-section h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-13); font-weight: 600; color: var(--fg-2); }
.so-section h4 {
  margin: 0 0 var(--sp-2); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--fg-3); font-weight: 600;
}
.so-tab-panel {}
.so-body { flex: 1; overflow-y: auto; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); }
.so-fields { display: grid; grid-template-columns: 110px 1fr; gap: 4px var(--sp-3); }
.so-fields dt { color: var(--fg-3); font-size: var(--fs-12); padding: 4px 0; }
.so-fields dd { margin: 0; padding: 4px 0; color: var(--fg-1); display: flex; align-items: center; gap: 6px; }
.so-fields dd code { white-space: nowrap; }

.so-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border-1); padding: 0 var(--sp-4); background: var(--bg-surface); }
.so-tab {
  padding: 8px 10px; border: 0; background: transparent; color: var(--fg-2);
  border-bottom: 2px solid transparent; font-weight: 500; font-size: var(--fs-13);
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
}
.so-tab .ct { font-family: var(--ff-mono); font-size: 10px; color: var(--fg-3); padding: 1px 5px; border-radius: 99px; background: var(--bg-surface-3); }
.so-tab.on { color: var(--accent-2); border-bottom-color: var(--accent); }
.so-tab.on .ct { background: var(--accent-soft); color: var(--accent-2); }

/* Overview hero */
.so-overview-hero { display: flex; flex-direction: column; gap: var(--sp-1); padding-bottom: var(--sp-2); }

/* Owner avatar circle */
.so-owner-avatar {
  width: 22px; height: 22px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: #fff; flex-shrink: 0;
}

/* Mode triplet per-group colors */
.mode-triplet { font-family: var(--ff-mono); font-size: 13px; letter-spacing: 0.02em; }
.mode-triplet .mt-owner { color: var(--accent-2, #6366f1); }
.mode-triplet .mt-group { color: var(--fg-2); }
.mode-triplet .mt-other { color: var(--fg-3); }

/* Agent run */
.run {
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border-1); border-radius: var(--r-2);
  display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-3); align-items: center;
  background: var(--bg-surface-2);
}
.run + .run { margin-top: var(--sp-2); }
.rid { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); }
.rline { display: flex; align-items: center; gap: var(--sp-2); }
.rmeta { font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3); text-align: right; }

/* Permission table */
.permtable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: var(--fs-12);
}
.permtable th, .permtable td { padding: 5px 8px; border-bottom: 1px solid var(--border-1); text-align: left; }
.permtable thead th { color: var(--fg-3); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.permtable td .rwx { display: inline-flex; gap: 1px; }

/* Status dropdown menu */
.menu {
  position: absolute; z-index: 100;
  background: var(--bg-surface);
  border: 1px solid var(--border-2);
  border-radius: var(--r-2); box-shadow: var(--sh-pop);
  padding: 4px; min-width: 160px;
}
.menu .mi {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px; border-radius: var(--r-1);
  cursor: pointer; color: var(--fg-1); font-size: var(--fs-13);
}
.menu .mi:hover { background: var(--bg-surface-2); }
.menu .mi .kbd { margin-left: auto; }
.menu .mi.sep { border-top: 1px solid var(--border-1); margin: 4px 0; padding: 0; height: 1px; pointer-events: none; }

/* ---------- Modal (m-tabs only — modal-overlay and modal families preserved above) ---------- */
.modal .m-tabs { display: flex; gap: 0; padding: 0 var(--sp-4); border-bottom: 1px solid var(--border-1); }
.modal .m-tabs button {
  padding: 8px 12px; border: 0; background: transparent; color: var(--fg-2);
  border-bottom: 2px solid transparent; font-weight: 500; font-size: var(--fs-13);
}
.modal .m-tabs button.on { color: var(--accent-2); border-bottom-color: var(--accent); }

/* Form */
.field { display: grid; gap: 4px; margin-bottom: var(--sp-3); }
.field label { font-size: var(--fs-12); color: var(--fg-2); font-weight: 500; }
.field input, .field select, .field textarea {
  background: var(--bg-surface); border: 1px solid var(--border-2);
  border-radius: var(--r-2); padding: 6px 8px;
  color: var(--fg-1); outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-3); }

/* Capability cards */
.capgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--sp-2); }
.capcard {
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  padding: var(--sp-3); background: var(--bg-surface);
  display: flex; flex-direction: column; gap: 6px;
  cursor: pointer; transition: border-color 0.1s, background 0.1s;
}
.capcard.on { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 6%, transparent); }
.capcard .cap-name { font-weight: 600; font-family: var(--ff-mono); font-size: var(--fs-13); }
.capcard .cap-row { display: flex; align-items: center; gap: 6px; font-size: var(--fs-12); color: var(--fg-3); }
.capcard .cap-row input { width: 50px; }

/* Scope matrix */
.scope {
  display: grid; grid-template-columns: 120px repeat(7, 1fr);
  border: 1px solid var(--border-1); border-radius: var(--r-2);
  overflow: hidden;
}
.scope > div { padding: 6px 8px; border-right: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); font-size: var(--fs-12); display: flex; align-items: center; }
.scope .head { background: var(--bg-surface-2); font-weight: 500; color: var(--fg-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.scope .check {
  justify-content: center; cursor: pointer; color: var(--fg-4);
}
.scope .check.on { color: var(--c-done); background: color-mix(in oklch, var(--c-done) 10%, transparent); }
.scope .check:hover { background: var(--bg-row-hover); }

/* ---------- AI dashboard ---------- */
.dash-grid { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.section-h { display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-4); }
.section-h h2 { margin: 0; font-size: var(--fs-16); font-weight: 600; }
.section-h .sub { color: var(--fg-3); font-size: var(--fs-12); }

.botgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-3); }
.botcard {
  border: 1px solid var(--border-1); border-radius: var(--r-3);
  background: var(--bg-surface); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-2);
  position: relative; overflow: hidden;
}
.botcard.online { border-color: color-mix(in oklch, var(--c-done) 50%, var(--border-1)); }
.botcard.error { border-color: color-mix(in oklch, var(--c-blocked) 50%, var(--border-1)); }
.botcard .b-h { display: flex; align-items: center; gap: var(--sp-2); }
.botcard .b-name { font-family: var(--ff-mono); font-weight: 600; }
.botcard .b-stat {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: 99px;
  font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: 600;
}
.botcard.online .b-stat { background: color-mix(in oklch, var(--c-done) 18%, transparent); color: oklch(0.40 0.13 150); }
.botcard.offline .b-stat { background: var(--bg-surface-3); color: var(--fg-3); }
.botcard.error .b-stat { background: color-mix(in oklch, var(--c-blocked) 18%, transparent); color: var(--c-blocked); }
.botcard .pulse {
  width: 6px; height: 6px; border-radius: 99px; background: var(--c-done);
  box-shadow: 0 0 0 0 var(--c-done); animation: pulse 2s infinite;
}
.botcard .caps { display: flex; flex-wrap: wrap; gap: 3px; }
.botcard .caps .cap {
  font-family: var(--ff-mono); font-size: 10px; padding: 1px 6px;
  border-radius: var(--r-1); background: var(--bg-surface-3); color: var(--fg-2);
}
.botcard .caps .cap.live { background: var(--accent-soft); color: var(--accent-2); }
.botcard .now {
  font-size: var(--fs-12); color: var(--fg-2);
  padding: 6px 8px; background: var(--bg-surface-2); border-radius: var(--r-2);
  display: flex; align-items: center; gap: 6px;
}
.botcard .stats-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-2); }
.botcard .ms { padding: 4px 0; }
.botcard .ms .ml { font-size: 10px; color: var(--fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.botcard .ms .mv { font-family: var(--ff-mono); font-size: var(--fs-14); font-weight: 600; color: var(--fg-1); }
.botcard .spark { height: 26px; width: 100%; }

/* Timeline */
.timeline { width: 100%; height: 180px; background: var(--bg-surface-2); border-radius: var(--r-2); padding: 8px; }

/* Version Gate */
.vg { padding: var(--sp-4); display: flex; gap: var(--sp-4); }
.vg-projects { width: 240px; flex-shrink: 0; }
.vg-pcard {
  padding: 10px 12px; border: 1px solid var(--border-1); border-radius: var(--r-2);
  background: var(--bg-surface); margin-bottom: var(--sp-2);
  cursor: pointer; display: flex; flex-direction: column; gap: 4px;
}
.vg-pcard:hover { border-color: var(--border-3); }
.vg-pcard.on { border-color: var(--accent); background: color-mix(in oklch, var(--accent) 4%, transparent); }
.vg-pcard .p-title { font-weight: 600; }
.vg-pcard .p-meta { font-size: 11px; color: var(--fg-3); display: flex; gap: 6px; align-items: center; }
.vg-tracks { flex: 1; }
.vg-track {
  border: 1px solid var(--border-1); border-radius: var(--r-3);
  background: var(--bg-surface); margin-bottom: var(--sp-3);
  overflow: hidden;
}
.vg-track.current { border-color: color-mix(in oklch, var(--accent) 40%, var(--border-1)); box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 10%, transparent); }
.vg-track.sealed .vg-th { background: color-mix(in oklch, var(--c-done) 6%, var(--bg-surface)); }
.vg-th {
  display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--sp-4);
  border-bottom: 1px solid var(--border-1);
}
.vg-th .vg-code { font-family: var(--ff-mono); font-weight: 700; font-size: var(--fs-16); }
.vg-th .vg-name { color: var(--fg-2); }
.vg-th .vg-prog {
  margin-left: auto; display: flex; align-items: center; gap: 8px; min-width: 220px;
}
.bar { flex: 1; height: 5px; background: var(--bg-surface-3); border-radius: 99px; overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--c-done); border-radius: 99px; }
.vg-task {
  display: grid; grid-template-columns: 16px 40px 1fr auto auto auto; gap: var(--sp-3);
  align-items: center; padding: 6px var(--sp-4);
  border-bottom: 1px solid var(--border-1);
  font-size: var(--fs-13);
  cursor: pointer;
}
.vg-task:last-child { border-bottom: 0; }
.vg-task:hover { background: var(--bg-row-hover); }
.vg-task.done .vt-title { color: var(--fg-3); text-decoration: line-through; }
.vg-task .vt-id { font-family: var(--ff-mono); font-size: var(--fs-12); color: var(--fg-3); }
.vg-task .vt-ck {
  width: 14px; height: 14px; border-radius: 4px;
  border: 1.5px solid var(--border-3);
  display: grid; place-items: center;
  color: transparent;
}
.vg-task.done .vt-ck { background: var(--c-done); border-color: var(--c-done); color: var(--fg-on-accent); }

/* People */
.peoplegrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--sp-3); padding: var(--sp-4); }
.pcard {
  background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-3); padding: var(--sp-3);
  display: flex; flex-direction: column; gap: 6px;
}
.pcard.bot { border-left: 3px solid var(--accent); }
.pcard .p-h { display: flex; align-items: center; gap: var(--sp-2); }
.pcard .p-name { font-weight: 600; }
.pcard .p-sub { color: var(--fg-3); font-size: var(--fs-12); font-family: var(--ff-mono); }
.pcard .p-tags { display: flex; flex-wrap: wrap; gap: 3px; }
.pcard .p-acts { display: flex; gap: 4px; margin-top: auto; padding-top: 4px; }
.people-filter-tabs { display: flex; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4) 0; }
.people-filter-tabs .btn.active { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }

/* Toast */
.toasts { position: fixed; bottom: 20px; right: 20px; z-index: 200; display: flex; flex-direction: column; gap: 6px; }
.toast { background: var(--bg-surface); border: 1px solid var(--border-2); border-radius: var(--r-2); padding: 8px 12px; box-shadow: var(--sh-pop); font-size: var(--fs-13); }

/* Helpers */
.flex { display: flex; }
.gap-2 { gap: var(--sp-2); }
.gap-3 { gap: var(--sp-3); }
.aic { align-items: center; }
.fcol { flex-direction: column; }
.mono { font-family: var(--ff-mono); }
.muted { color: var(--fg-3); }
.hr { height: 1px; background: var(--border-1); margin: var(--sp-3) 0; }

/* ====== Task-list template helpers (from redesign) ====== */

/* Swim lane left-border accent — project group rows */
.tbl .swim-project {
  background: var(--accent);
}

/* Owner cell in task table */
.owner-cell {
  display: inline-flex; align-items: center; gap: 4px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.owner-name {
  font-size: var(--fs-12); color: var(--fg-2);
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}

/* Priority + urgency wrapper in task table */
.prio-urg {
  display: inline-flex; align-items: center; gap: 4px;
  white-space: nowrap;
}

/* ====== Copill nav-size variant (sidenav badges — from redesign) ====== */
/* Removes the inline style="font-size:9px;padding:1px 5px" on sidebar copills */
.side .copill {
  font-size: 9px;
  padding: 1px 5px;
}

/* ====== Timeline legend (from redesign) ====== */
.tl-legend { display: flex; gap: var(--sp-4); padding: 4px 8px; font-size: 11px; color: var(--fg-3); }
.tl-legend .lg { display: inline-flex; align-items: center; gap: 4px; }
.tl-legend .lg .sw { width: 10px; height: 10px; border-radius: 2px; }

/* ====== Cards (generic card component — from redesign) ====== */
.cards { display: grid; gap: var(--sp-3); }
.card {
  background: var(--bg-surface); border: 1px solid var(--border-1);
  border-radius: var(--r-3); padding: var(--sp-4);
}
.card-h { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.card-h h3 { margin: 0; font-size: var(--fs-14); font-weight: 600; }
.card-h .sub { color: var(--fg-3); font-size: var(--fs-12); }

/* ====== People card extras (from redesign) ====== */

/* Bot pcard: capability tags should use .pill styling */
.pcard .p-tags .pill {
  font-size: 10px;
  padding: 1px 5px;
}

/* Online / offline indicator on pcard */
.pcard .p-online {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 99px;
  background: color-mix(in oklch, var(--c-done) 18%, transparent);
  color: oklch(0.40 0.13 150);
}
.pcard .p-offline {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 6px; border-radius: 99px;
  background: var(--bg-surface-3); color: var(--fg-3);
}
.pcard .p-online::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--c-done); }
.pcard .p-offline::before { content: ""; width: 6px; height: 6px; border-radius: 99px; background: var(--fg-4); }

/* Status dots for people table rows */
.p-online { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--c-done); vertical-align: middle; margin-right: 4px; }
.p-offline { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--fg-4); vertical-align: middle; margin-right: 4px; }
.p-error { display: inline-block; width: 7px; height: 7px; border-radius: 99px; background: var(--danger); vertical-align: middle; margin-right: 4px; }

/* ====== Admin sidebar layout (t1) ====== */
.admin-layout {
  display: flex; flex-direction: row;
  min-height: 400px;
}
.t1-nav {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  border-right: 1px solid var(--border-1);
  min-height: 400px;
  width: 200px; flex-shrink: 0;
}
.t1-nav-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px;
  border-radius: var(--r-2);
  font-size: var(--fs-13);
  cursor: pointer;
  background: none; border: none;
  width: 100%; text-align: left;
  color: var(--fg-2);
}
.t1-nav-item:hover { background: var(--bg-surface-2); }
.t1-nav-item.active { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }
.t1-section { flex: 1; overflow: auto; padding: var(--sp-4); }
.t1-section.hidden { display: none; }

/* Botcard pulse glow — separate keyframe name avoids conflict with opacity pulse */
@keyframes botcard-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-done) 60%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in oklch, var(--c-done) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--c-done) 0%, transparent); }
}
.botcard .pulse { animation: botcard-pulse 2s infinite; }

/* AI dashboard stats strip (inside t1-section, isolated from page stats strip) */
.ai-stats-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px; background: var(--border-1);
  border: 1px solid var(--border-1); border-radius: 6px;
  overflow: hidden; margin-bottom: 16px;
}
.ai-stats-strip .stat { cursor: default; }
.ai-stats-strip .stat:hover { background: var(--bg-surface); }

/* ====== BATCH-CSS: S3.H2 — task list priority+urgency wrapper ====== */
.prio-urg { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }

/* ====== BATCH-CSS: S6.M5 — protocol version mismatch chips (AI dashboard bot tiles) ====== */
.proto-chip {
  display: inline-flex; align-items: center;
  font-size: 9px; font-family: var(--ff-mono); padding: 1px 5px;
  border-radius: var(--r-1); font-weight: 600;
}
.proto-mismatch-minor {
  background: color-mix(in oklch, var(--c-review) 20%, transparent);
  color: var(--c-review);
}
.proto-mismatch-major {
  background: color-mix(in oklch, var(--c-blocked) 20%, transparent);
  color: var(--c-blocked);
}

/* ====== BATCH-CSS: S12.M3 — .vg-track.locked (Version Gate locked state) ====== */
.vg-track.locked {
  opacity: 0.5;
  border-color: var(--fg-4);
}
.vg-track.locked .vg-th { color: var(--fg-3); }

/* ====== BATCH-CSS: S12.L4 — view-mode-toggle visual alignment ====== */
.view-mode-toggle { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-2); overflow: hidden; }
.view-mode-toggle button { padding: 4px 10px; font-size: var(--fs-12); border: none; background: none; cursor: pointer; color: var(--fg-2); }
.view-mode-toggle button.active, .view-mode-toggle button[data-active="true"] { background: var(--accent-soft); color: var(--accent-2); font-weight: 600; }

/* ====== BATCH-CSS: S1.H3 — topnav tab count badges ====== */
.topnav .count {
  display: inline-block;
  font-size: 10px;
  line-height: 1;
  background: var(--bg-surface-3);
  color: var(--fg-3);
  border-radius: 99px;
  padding: 2px 5px;
  margin-left: 4px;
  font-weight: 500;
  vertical-align: middle;
}
.topnav .count.warn {
  background: color-mix(in oklch, var(--c-review) 25%, transparent);
  color: var(--c-review);
}

/* Tab nav icons */
.tab-ico { margin-right: 4px; font-size: 12px; opacity: 0.7; }
.tab.active .tab-ico { opacity: 1; }

/* Keyboard shortcut legend (sidebar footer) */
.kbd-legend {
  margin-top: auto;
  padding: 10px 8px 6px;
  border-top: 1px solid var(--border-1);
  font-size: 10px;
  color: var(--fg-3);
  line-height: 1.8;
}
.kbd-legend-flash {
  animation: kbdFlash 0.8s ease-out;
}
@keyframes kbdFlash {
  0%   { background: var(--bg-surface-3); border-radius: 4px; }
  100% { background: transparent; }
}

/* ─── Satellite Modal ─────────────────────────────────────────────────────── */
.sat-modal-inner { max-width: 720px; }
.sat-tab-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--border-1); padding: 0 0 0 0; margin: 0 -24px; padding-left: 16px; }
.sat-tab-btn { background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 14px; font-size: 13px; color: var(--fg-3); cursor: pointer; margin-bottom: -1px; }
.sat-tab-btn:hover { color: var(--fg-1); }
.sat-tab-btn.active { color: var(--accent-2); border-bottom-color: var(--accent-2); font-weight: 600; }
.sat-tab-body { padding-top: 16px; }
.sat-tab-panel { display: none; }
.sat-tab-panel.active { display: block; }
.sat-caps-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.sat-cap-card { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--bg-surface-2); border-radius: 6px; border: 1px solid var(--border-1); }
.sat-cap-inactive { opacity: 0.5; }
.sat-cap-meta { font-size: 11px; color: var(--fg-3); }
.scope-matrix { width: 100%; border-collapse: collapse; font-size: 12px; }
.scope-matrix th, .scope-matrix td { padding: 5px 8px; border: 1px solid var(--border-1); text-align: center; }
.scope-matrix th { background: var(--bg-surface-2); font-weight: 600; }
.scope-matrix th:first-child, .scope-matrix td:first-child { text-align: left; }
.scope-cell { vertical-align: middle; }
.scope-toggle { background: var(--bg-surface); border: 1px solid var(--border-1); border-radius: 4px; padding: 2px 8px; cursor: pointer; font-size: 12px; color: var(--fg-4); min-width: 28px; }
.scope-toggle.scope-on { background: color-mix(in oklch, var(--c-active) 15%, transparent); color: oklch(0.40 0.14 230); border-color: transparent; }
.sat-token-result { background: var(--bg-surface-2); border: 1px solid var(--border-1); border-radius: 6px; padding: 10px 14px; margin-top: 8px; word-break: break-all; }
.token-reveal { display: block; margin-top: 6px; font-family: var(--ff-mono); font-size: 12px; color: var(--fg-1); }
.sat-runs-body { padding: 4px 0; }

/* ─── Task mode strip ────────────────────────────────────────────────────── */
.task-mode-strip { display: flex; align-items: center; gap: 10px; padding: 6px 10px; background: var(--bg-surface-2); border-radius: 6px; }
.mode-display { font-family: var(--ff-mono); font-size: 13px; color: var(--fg-1); letter-spacing: 1px; }
.mode-presets { display: flex; gap: 4px; margin-left: auto; }
.mode-preset-btn { font-family: var(--ff-mono); font-size: 11px; }
.mode-preset-btn.active { background: var(--accent-soft); color: var(--accent-2); border-color: transparent; }
.routing-preview { font-size: 13px; color: var(--fg-2); }
.routing-executor { font-family: var(--ff-mono); font-size: 12px; background: var(--bg-surface-2); padding: 2px 6px; border-radius: 4px; color: var(--accent-2); }

/* ─── Capability item (person modal) ───────────────────────────────────────── */
.cap-item { display: flex; align-items: center; gap: 6px; padding: 4px 0; }
.cap-label { font-size: 12px; font-family: var(--ff-mono); flex: 1; }
.cap-mc-label { font-size: 11px; color: var(--fg-3); white-space: nowrap; }

/* ── AVATARS ─────────────────────────────────────────────────────────────── */
.avatar {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; flex-shrink: 0; overflow: hidden;
  font-weight: 600; text-transform: uppercase; line-height: 1;
  vertical-align: middle;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.avatar-sm  { width: 24px;  height: 24px;  font-size: 9px;  }
.avatar-md  { width: 32px;  height: 32px;  font-size: 12px; }
.avatar-lg  { width: 48px;  height: 48px;  font-size: 18px; }
.avatar-xl  { width: 96px;  height: 96px;  font-size: 36px; }
.avatar-initials { color: #fff; }
.avatar-row { display: inline-flex; align-items: center; gap: 6px; }

/* ── Button system (4 variants) ─────────────────────────────────────────── */
.btn-primary   { background: var(--accent);  color: #fff; border-color: var(--accent); }
.btn-primary:hover { filter: brightness(1.1); }
.btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); }
.btn-secondary:hover { background: color-mix(in oklch, var(--accent) 8%, transparent); }
.btn-danger    { background: transparent; color: var(--c-blocked, #ef4444); border: 1px solid color-mix(in oklch, var(--c-blocked, #ef4444) 50%, transparent); }
.btn-danger:hover  { background: color-mix(in oklch, var(--c-blocked, #ef4444) 10%, transparent); border-color: var(--c-blocked, #ef4444); }
.btn-ghost     { background: transparent; border-color: transparent; color: var(--fg-2); }
.btn-ghost:hover   { color: var(--fg-1); text-decoration: underline; }

/* ── Offline bot de-emphasis ────────────────────────────────────────────── */
.botcard.offline { opacity: 0.55; filter: grayscale(0.6); }
.botcard.offline .b-name { color: var(--fg-3); }
.botcard.offline .b-stat { color: var(--fg-3); }

/* ── Task table column sizing ───────────────────────────────────────────── */
/* auto layout: fixed columns shrink-to-content via nowrap; Task column gets all remaining width */
#tasks-table { table-layout: auto; width: 100%; }
#tasks-table th, #tasks-table td { white-space: nowrap; }
#tasks-table .c-task, #tasks-table .c-task * { white-space: normal; word-break: break-word; }
#tasks-table .c-task  { width: 99%; }  /* greedy — absorbs all available space */
/* Actions: width:1px + nowrap = shrink to content, never truncate */
#tasks-table th:last-child, #tasks-table td:last-child { width: 1px; padding-right: 8px; }

/* ── Filter bar — vertical alignment + My Due Now right-aligned ─────────── */
/* .filters itself contains only the <form>; the form is the real flex parent  */
.filters form { align-items: flex-end; }
/* actions div stretches to fill remaining row space so My Due Now can go right */
.filter-actions { flex: 1; }
.filter-actions .btn[data-action="filterMyDueNow"] { margin-left: auto; }

/* ── Admin sidebar groups ────────────────────────────────────────────────── */
.t1-nav-group { margin-bottom: 4px; }
.t1-nav-label { display: block; padding: 8px 10px 2px; font-size: 10px; font-weight: 700;
                text-transform: uppercase; letter-spacing: .08em; color: var(--fg-3); }
.t1-ico { margin-right: 6px; font-style: normal; }

/* ── People sidebar company pills in navitem ─────────────────────────────── */
#people-sidenav .navitem .copill { font-size: 9px; padding: 0 4px; }
.cap-mc-input { width: 44px; padding: 2px 4px; font-size: 12px; text-align: center; border: 1px solid var(--border-1); border-radius: 4px; background: var(--bg-surface); color: var(--fg-1); }

/* ── HEADER PROFILE BUTTON ──────────────────────────────────────────────── */
.header-profile-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 6px;
    color: inherit;
    font: inherit;
    line-height: 1;
    transition: background 0.15s;
}
.header-profile-btn:hover {
    background: var(--btn-ghost-hover, rgba(255,255,255,0.08));
}
.header-profile-btn .who { font-size: .85rem; }

/* ── PROFILE SLIDE-OVER ─────────────────────────────────────────────────── */
.profile-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 399;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.profile-overlay.open { opacity: 1; pointer-events: auto; }

#profile-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: 400px;
    max-width: 98vw;
    background: var(--bg-card, #1e1e2e);
    border-left: 1px solid var(--border, #333);
    z-index: 400;
    transform: translateX(100%);
    transition: transform 0.25s ease;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#profile-panel.open { transform: translateX(0); }

.profile-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #333);
    flex-shrink: 0;
}
.profile-panel-header h2 { margin: 0; font-size: 1.1rem; }
.profile-close-btn {
    background: none; border: none;
    cursor: pointer; color: inherit;
    font-size: 1.4rem; line-height: 1;
    padding: 2px 6px; border-radius: 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}
.profile-close-btn:hover { opacity: 1; }

.profile-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}
.profile-loading { text-align: center; color: var(--text-muted, #888); padding: 40px 0; }

.profile-section {
    margin-bottom: 28px;
}
.profile-section-title {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--text-muted, #888);
    margin-bottom: 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border, #333);
}

/* Avatar section */
.profile-avatar-preview {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}
.profile-avatar-preview .avatar-lg {
    width: 64px; height: 64px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.profile-avatar-actions { display: flex; flex-direction: column; gap: 6px; }

/* Color picker row */
.profile-color-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.profile-color-row label { font-size: .85rem; }
.profile-color-row input[type="color"] {
    width: 32px; height: 28px;
    padding: 2px; border-radius: 4px;
    border: 1px solid var(--border, #555);
    cursor: pointer;
    background: none;
}

/* Save/action buttons within profile */
.profile-save-row {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border, #333);
}
.profile-error { color: #f87171; font-size: .85rem; margin-top: 6px; }
.profile-success { color: #4ade80; font-size: .85rem; margin-top: 6px; }

/* Profile panel field layout — scoped so it doesn't bleed into modal form-rows */
#profile-panel .form-row {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.85rem;
}
#profile-panel label {
    display: block;
    margin-bottom: 0.3rem;
    font-size: 0.82rem;
    font-weight: 500;
    opacity: 0.8;
}
#profile-panel input:not([type="color"]):not([type="file"]),
#profile-panel select {
    width: 100%;
    box-sizing: border-box;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border, #444);
    border-radius: 5px;
    background: var(--bg-input, #2a2a3c);
    color: inherit;
    font-size: 0.87rem;
}
#profile-panel input:not([type="color"]):not([type="file"]):focus,
#profile-panel select:focus {
    outline: none;
    border-color: var(--accent, #6366f1);
    box-shadow: 0 0 0 2px rgba(99,102,241,.25);
}

/* Password change button row */
.profile-pw-btn-row {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}

/* Password strength bar */
.pw-strength-wrap { margin: -4px 0 10px; }
.pw-strength-wrap.hidden { display: none; }
.pw-strength-bar {
    height: 4px;
    background: var(--border, #444);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 4px;
}
.pw-strength-fill {
    height: 100%;
    width: 0;
    border-radius: 2px;
    transition: width .25s, background .25s;
}
.pw-strength-fill.strength-weak   { background: #f87171; }
.pw-strength-fill.strength-fair   { background: #fb923c; }
.pw-strength-fill.strength-good   { background: #facc15; }
.pw-strength-fill.strength-strong { background: #4ade80; }
.pw-strength-label { font-size: .76rem; }
.pw-strength-label.strength-weak   { color: #f87171; }
.pw-strength-label.strength-fair   { color: #fb923c; }
.pw-strength-label.strength-good   { color: #facc15; }
.pw-strength-label.strength-strong { color: #4ade80; }

/* Password match indicator */
.pw-match-label { font-size: .80rem; margin-bottom: 8px; }
.pw-match-label.hidden { display: none; }

/* ── EXECUTOR HEALTH PANEL ──────────────────────────────────────────────── */
.health-satellite-block {
    margin-bottom: 16px;
}
.health-satellite-name {
    font-weight: 600;
    font-size: .85rem;
    margin-bottom: 6px;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.health-executors {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.health-executor-row {
    display: grid;
    grid-template-columns: 20px 160px 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 5px 8px;
    border-radius: 4px;
    font-size: .8rem;
    background: var(--bg-row, rgba(255,255,255,.03));
}
.health-ready    { border-left: 3px solid #4ade80; }
.health-not-ready{ border-left: 3px solid #f87171; }
.health-status-icon { font-weight: 700; }
.health-ready .health-status-icon    { color: #4ade80; }
.health-not-ready .health-status-icon{ color: #f87171; }
.health-executor-key { font-family: monospace; }
.health-models  { color: var(--text-muted, #888); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.health-details { color: var(--text-muted, #888); font-size: .75rem; }
.health-age     { color: var(--text-muted, #888); font-size: .75rem; white-space: nowrap; }

/* JSON field widget (company modal) */
.badge-json { display:inline-block; font-size:.7rem; font-weight:600; padding:1px 5px; border-radius:3px; background:var(--accent,#0d6efd); color:#fff; vertical-align:middle; margin-left:4px; letter-spacing:.03em; }
.json-field-wrap { display:flex; flex-direction:column; gap:2px; }
.json-field { font-family:monospace; font-size:.82rem; resize:vertical; }
.json-field.json-valid   { border-color:#4ade80; }
.json-field.json-invalid { border-color:#f87171; }
.json-field-bar { display:flex; align-items:center; gap:8px; }
.json-field-status { font-size:.75rem; flex:1; }
.json-field-status.json-ok  { color:#4ade80; }
.json-field-status.json-err { color:#f87171; }
.btn-json-fmt { font-size:.72rem; padding:1px 7px; cursor:pointer; background:var(--bg-alt,#2a2a2a); border:1px solid var(--border,#444); border-radius:3px; color:var(--text-muted,#888); }
.btn-json-fmt:hover { color:var(--text,#eee); border-color:var(--accent,#0d6efd); }

/* Company modal — section dividers and checkbox alignment */
.co-section-label {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--text-muted, #888);
    border-bottom: 1px solid var(--border, #333);
    padding-bottom: .25rem;
    margin: 1rem 0 .6rem;
}
.co-section-label:first-of-type { margin-top: .25rem; }
.co-checkbox-label { font-size: .85rem; font-weight: 400; margin-bottom: 0; cursor: pointer; }

/* Key-Value editor widget */
.kv-editor { display: flex; flex-direction: column; gap: 4px; }
.kv-rows { display: flex; flex-direction: column; gap: 4px; }
.kv-row { display: grid; grid-template-columns: 1fr 14px 1fr 22px; gap: 5px; align-items: center; }
.kv-key, .kv-val { font-size: .83rem; padding: 4px 7px; background: var(--bg-alt, #2a2a2a); border: 1px solid var(--border, #444); border-radius: 3px; color: var(--text, #ddd); width: 100%; box-sizing: border-box; }
.kv-key:focus, .kv-val:focus { outline: none; border-color: var(--accent, #0d6efd); }
.kv-sep { text-align: center; color: var(--text-muted, #888); user-select: none; }
.kv-remove { background: none; border: 1px solid transparent; color: var(--text-muted, #888); cursor: pointer; font-size: 1rem; padding: 0; border-radius: 3px; line-height: 1.2; width: 22px; text-align: center; }
.kv-remove:hover { color: #f87171; border-color: #f87171; }
.kv-footer { display: flex; align-items: center; gap: 10px; margin-top: 3px; }
.btn-kv-add { font-size: .75rem; padding: 2px 8px; cursor: pointer; background: var(--bg-alt, #2a2a2a); border: 1px solid var(--border, #444); border-radius: 3px; color: var(--text-muted, #888); }
.btn-kv-add:hover { color: var(--text, #ddd); border-color: var(--accent, #0d6efd); }
.kv-raw-toggle { font-size: .72rem; color: var(--text-muted, #888); text-decoration: none; margin-left: auto; }
.kv-raw-toggle:hover { color: var(--accent, #0d6efd); }

/* ── Prompt Skeleton Editor ─────────────────────────────────────────────── */
.modal-skel-editor {
  width: 90vw; max-width: 90vw;
  height: 90vh;
  display: flex; flex-direction: column;
  overflow: hidden; padding: 20px 24px 0;
}
.modal-subtitle {
  font-family: var(--ff-mono); font-size: 11px; color: var(--fg-3);
  margin-top: -8px; margin-bottom: 14px;
}
.skel-layout {
  display: grid; grid-template-columns: 1fr 5px 360px;
  flex: 1; min-height: 0;
}
.skel-editor-col {
  padding-right: 20px; border-right: 1px solid var(--border-1);
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.skel-meta-fields { flex-shrink: 0; }
.skel-meta-fields .form-row,
.skel-meta-fields .form-row-2col { margin-bottom: 10px; }
.skel-body-row {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.skel-body-row > label {
  flex-shrink: 0; display: block;
  font-size: 11px; font-weight: 600; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px;
}
.skel-body-wrap { position: relative; flex: 1; min-height: 60px; }
.skel-body-hl, .skel-body-ta {
  position: absolute; inset: 0;
  padding: 8px 10px;
  font-family: var(--ff-mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word; overflow-wrap: break-word;
  border: 1px solid var(--border-2); border-radius: var(--r-2);
  tab-size: 4;
}
.skel-body-hl {
  background: var(--bg-canvas); color: var(--fg-1);
  overflow: hidden; pointer-events: none; z-index: 0;
}
.skel-body-hl .ph {
  color: var(--accent-2); background: var(--accent-soft); border-radius: 2px;
}
.skel-body-ta {
  background: transparent; color: transparent;
  caret-color: var(--fg-1); resize: none; z-index: 1; overflow-y: auto;
}
.skel-body-ta:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.skel-form-actions {
  flex-shrink: 0; padding: 10px 0 14px;
  border-top: 1px solid var(--border-1); margin-top: 8px;
  display: flex; gap: 8px; align-items: center;
}
.skel-right-col {
  padding-left: 20px;
  display: flex; flex-direction: column;
  overflow-y: auto; padding-bottom: 14px;
}
.skel-right-col::-webkit-scrollbar { width: 4px; }
.skel-right-col::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 4px; }
.ph-panel { flex-shrink: 0; border-bottom: 1px solid var(--border-1); padding-bottom: 12px; margin-bottom: 14px; }
.ph-panel-title { font-size: 11px; font-weight: 700; text-transform: uppercase;
                  color: var(--fg-3); letter-spacing: .06em; margin-bottom: 8px; }
.ph-group { margin-bottom: 8px; }
.ph-group-label { font-size: 10px; font-weight: 600; color: var(--fg-4);
                  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; }
.ph-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ph-chip {
  font-family: var(--ff-mono); font-size: 11px;
  background: var(--bg-surface-2); border: 1px solid var(--border-2);
  border-radius: var(--r-1); padding: 2px 6px; cursor: pointer;
  color: var(--accent-2); transition: background 0.1s;
}
.ph-chip:hover { background: var(--accent-soft); border-color: var(--accent-2); }
.skel-resolved-wrap { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.skel-resolved-header { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; flex-shrink: 0; }
.server-badge { font-size: 9px; font-weight: 700; background: oklch(0.58 0.14 150);
                color: white; padding: 1px 6px; border-radius: 99px; letter-spacing: .06em; }
.skel-resolved-body {
  flex: 1; min-height: 60px; overflow-y: auto;
  background: oklch(0.96 0.03 150 / 0.4); border: 1px solid oklch(0.88 0.06 150);
  border-radius: var(--r-2); padding: 8px 10px;
  font-family: var(--ff-mono); font-size: 12px; line-height: 1.6;
  white-space: pre-wrap; word-wrap: break-word; color: var(--fg-1);
}
.skel-resolved-body .ph { color: oklch(0.40 0.14 150); background: oklch(0.92 0.06 150 / 0.5); border-radius: 2px; }
.skel-resolved-hint { font-size: 10px; color: var(--fg-4); margin-top: 5px; flex-shrink: 0; }
.skel-resolved-warnings { font-size: 11px; color: var(--warning); margin-top: 4px; flex-shrink: 0; }

/* ---------- Task Editor ---------- */

.modal-task-editor {
  width: 90vw;
  max-width: 90vw;
  height: 90vh;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  padding: 0;
  overflow: hidden;
}

/* form#task-form sits between .modal-task-editor and .te-body — must flex-grow */
#task-form {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.te-header {
  padding: 16px 22px 12px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-shrink: 0;
}

.te-header h2 {
  font-size: 17px;
  font-weight: 600;
  margin: 0;
}

.te-subtitle {
  font-size: 12px;
  color: var(--muted);
}

.te-close {
  margin-left: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 4px;
}

.te-close:hover { background: var(--hover); color: var(--text); }

.te-body {
  display: grid;
  grid-template-columns: 1fr 5px 1fr;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.te-splitter,
.skel-splitter {
  background: var(--border);
  cursor: col-resize;
  user-select: none;
  transition: background 0.15s;
}

.te-splitter:hover,
.te-splitter.dragging,
.skel-splitter:hover,
.skel-splitter.dragging {
  background: var(--accent, #4f8ef7);
}

.te-left {
  padding: 16px 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-right: 1px solid var(--border);
}

.te-right {
  background: var(--bg-alt);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Type chip bar */
.te-type-bar {
  padding: 10px 14px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.te-type-chip {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color .15s, color .15s, background .15s;
}

.te-type-chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.te-type-chip.active {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

/* Right panels */
.te-right-panels {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
}

.te-rp-panel {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.te-rp-panel.active {
  display: flex;
}

.te-human-note {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 16px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

.te-human-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--text);
}

/* AI Dispatch strip */
.te-ai-strip {
  border-top: 1px solid var(--border);
  padding: 10px 14px;
  flex-shrink: 0;
  background: var(--bg-base);
}

.te-ai-strip-label {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 6px;
}

.te-ai-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 76px;
  gap: 6px;
}

/* Footer */
.te-footer {
  padding: 10px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.te-footer .te-shortcut {
  margin-left: auto;
  font-size: 11px;
  color: var(--muted);
}

/* Task title textarea in editor */
.te-task-title {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  min-height: 52px;
  resize: none;
}

/* Hidden input-type radios (kept for _buildTaskInput serialization) */
.te-input-type-hidden {
  position: absolute;
  width: 0; height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Responsive: stack columns on narrow viewports */
@media (max-width: 800px) {
  .te-body {
    grid-template-columns: 1fr;
  }
  .modal-task-editor {
    height: 95vh;
  }
}

/* ── Roles tab — sub-tab bar ─────────────────────────────── */
.subtab-bar {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--border-1);
    margin-bottom: var(--sp-4);
}
.subtab-btn {
    padding: 6px 14px;
    font-size: var(--fs-13);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--fg-3);
    cursor: pointer;
    transition: color 0.12s, border-color 0.12s;
}
.subtab-btn:hover  { color: var(--fg-1); }
.subtab-btn.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
    font-weight: 600;
}

/* ── Roles table ─────────────────────────────────────────── */
.roles-table .role-slug { font-weight: 600; }
.bundle-cell { text-align: center; font-size: var(--fs-14); }
.bundle-grant   { color: var(--badge-green-text); }
.bundle-deny    { color: var(--badge-red-text); }
.bundle-inherit { color: var(--fg-4); }

/* Type badges */
.type-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: var(--r-2);
    font-size: var(--fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.type-badge--human  { background: var(--badge-blue-bg);  color: var(--badge-blue-text); }
.type-badge--bot    { background: var(--badge-amber-bg); color: var(--badge-amber-text); }
.type-badge--any    { background: var(--bg-surface-3);   color: var(--fg-3); }

/* ── Segmented permission control ─────────────────────────── */
.bundle-row {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    margin-bottom: var(--sp-3);
}
.bundle-label {
    width: 60px;
    font-size: var(--fs-13);
    color: var(--fg-2);
}
.segmented-ctrl {
    display: flex;
    border: 1px solid var(--border-2);
    border-radius: var(--r-2);
    overflow: hidden;
}
.seg-btn {
    padding: 4px 12px;
    font-size: var(--fs-12);
    background: var(--bg-canvas);
    border: none;
    border-right: 1px solid var(--border-1);
    color: var(--fg-4);
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover      { background: var(--bg-surface-3); color: var(--fg-1); }
.seg-btn.active[data-val="grant"]   { background: var(--badge-green-bg); color: var(--badge-green-text); font-weight: 600; }
.seg-btn.active[data-val="deny"]    { background: var(--badge-red-bg);   color: var(--badge-red-text);   font-weight: 600; }

/* ── Import modal ── */
.modal-import { max-width: 860px; }
.textarea-import { min-height: 200px; }
.import-field-ref { margin: var(--sp-3) 0 var(--sp-2); }
.import-field-ref summary {
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--fg-3);
  user-select: none;
  padding: var(--sp-1) 0;
}
.import-field-ref summary:hover { color: var(--fg-2); }
.import-field-ref-body { margin-top: var(--sp-2); }
.import-ref-table { width: 100%; border-collapse: collapse; font-size: var(--fs-12); }
.import-ref-table th,
.import-ref-table td { padding: 4px 8px; border-bottom: 1px solid var(--border-1); text-align: left; }
.import-ref-table th { color: var(--fg-3); font-weight: 600; }
.import-ref-table td:first-child { white-space: nowrap; }
.seg-btn.active[data-val="inherit"] { background: var(--bg-surface-3);   color: var(--fg-2);             font-weight: 600; }

/* ── Import modal — AI prompt section ── */
.import-ai-prompt { margin: var(--sp-2) 0; }
.import-ai-prompt summary {
  cursor: pointer;
  font-size: var(--fs-12);
  color: var(--fg-3);
  user-select: none;
  padding: var(--sp-1) 0;
}
.import-ai-prompt summary:hover { color: var(--fg-2); }
.import-ai-prompt-body { margin-top: var(--sp-2); }
.import-ai-hint { font-size: var(--fs-12); color: var(--fg-3); margin-bottom: var(--sp-2); }
.import-ai-prompt-box {
  position: relative;
  background: var(--bg-surface-2);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  padding: var(--sp-3);
}
.import-ai-prompt-box pre {
  font-family: var(--ff-mono);
  font-size: var(--fs-11);
  color: var(--fg-2);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 var(--sp-3) 0;
  line-height: 1.55;
}
.import-copy-btn { align-self: flex-start; }

/* ── Version chip (topbar) ───────────────────────────────────────────────── */
.version-chip {
    font-size: 11px;
    font-family: var(--font-mono, monospace);
    color: var(--fg-3);
    background: none;
    border: 1px solid var(--border-1);
    border-radius: 4px;
    padding: 2px 6px;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.version-chip:hover { color: var(--fg-1); border-color: var(--border-2); }

/* ── About modal ─────────────────────────────────────────────────────────── */
#about-modal.modal-overlay {
    position: fixed; inset: 0; z-index: 9000;
    background: rgba(0,0,0,0.45);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
}
#about-modal.hidden { display: none; }
.about-box {
    position: relative;
    background: var(--bg-surface);
    border: 1px solid var(--border-2);
    border-radius: 12px;
    padding: 2.5rem 3rem;
    min-width: 320px;
    max-width: 420px;
    text-align: center;
    box-shadow: 0 8px 40px rgba(0,0,0,0.25);
}
.about-close {
    position: absolute; top: 12px; right: 14px;
    background: none; border: none; cursor: pointer;
    font-size: 1.4rem; color: var(--fg-3); line-height: 1;
    padding: 2px 6px; border-radius: 4px;
}
.about-close:hover { color: var(--fg-1); background: var(--bg-surface-2); }
.about-wordmark {
    font-size: 2.4rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--fg-1); margin-bottom: 0.25rem;
}
.about-ai { color: var(--accent); }
.about-ai-inner { font-style: italic; }
.about-tagline {
    font-size: 0.78rem; color: var(--fg-3);
    margin: 0 0 1.5rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.about-fields {
    display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1rem;
    text-align: left; margin: 0 0 1.5rem; font-size: 0.83rem;
}
.about-fields dt { color: var(--fg-3); font-weight: 500; white-space: nowrap; }
.about-fields dd { color: var(--fg-1); margin: 0; }
.about-copy { font-size: 0.72rem; color: var(--fg-4); margin: 0; }