/* Tee's dashboard. Design intent: an instrument panel, not an admin template — dark, dense,
   quiet by default, with colour reserved for things that need a human. Numbers are monospace so
   they can be compared down a column; labels are small caps so they never compete with data. */

:root {
    --bg: #070912;
    --bg-2: #0b0e1a;
    --panel: rgba(20, 25, 42, 0.72);
    --panel-solid: #131828;
    --line: rgba(148, 163, 200, 0.14);
    --line-strong: rgba(148, 163, 200, 0.26);
    --ink: #e8ecf8;
    --ink-dim: #9aa5c4;
    --ink-faint: #6b7699;
    --cyan: #22d3ee;
    --violet: #8b5cf6;
    --green: #34d399;
    --amber: #f59e0b;
    --rose: #fb7185;
    --radius: 14px;
    --radius-sm: 9px;
    /* Activity box (R10): one uniform row height so "exactly 4 rows visible" is deterministic under
       font/zoom changes — the scroll region is this variable × 4, not a baked-in pixel total. */
    --activity-row-h: 56px;
    --mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
    --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    height: 100%;
    margin: 0;
}

body {
    background:
        radial-gradient(1100px 620px at 78% -8%, rgba(139, 92, 246, 0.16), transparent 60%),
        radial-gradient(900px 520px at 8% 4%, rgba(34, 211, 238, 0.12), transparent 62%),
        var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 14px;
    line-height: 1.5;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* A whisper of noise stops large dark areas from banding on cheap panels. */
.grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    opacity: 0.035;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-faint); }
.small { font-size: 12px; }
.hidden { display: none !important; }

/* ----------------------------------------------------------------------------- top bar */
.topbar {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 14px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(11, 14, 26, 0.92), rgba(11, 14, 26, 0.62));
    backdrop-filter: blur(14px);
    flex: 0 0 auto;
}

.identity { display: flex; align-items: center; gap: 13px; min-width: 0; }

.sigil {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 18px;
    color: #05070f;
    background: linear-gradient(140deg, var(--cyan), var(--violet));
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 8px 26px rgba(34, 211, 238, 0.22);
    position: relative;
}

/* Slow breathing halo: alive, but not a distraction in peripheral vision. */
.sigil::after {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 16px;
    background: radial-gradient(circle, rgba(34, 211, 238, 0.32), transparent 70%);
    animation: breathe 5.5s ease-in-out infinite;
    z-index: -1;
}

@keyframes breathe {
    0%, 100% { opacity: 0.35; transform: scale(0.94); }
    50% { opacity: 0.75; transform: scale(1.06); }
}

.who h1 { margin: 0; font-size: 17px; letter-spacing: -0.01em; }
.who .sub { margin: 0; font-size: 11.5px; color: var(--ink-faint); }
/* R-109: Tee's deployed version, next to the name. Faint on purpose — a fact, not a headline. */
.who .version-badge { font-size: 10.5px; font-weight: 500; color: var(--ink-faint);
    border: 1px solid var(--line); border-radius: 8px; padding: 1px 7px;
    vertical-align: 2px; margin-left: 6px; letter-spacing: 0; }

.vitals { display: flex; gap: 26px; margin-left: auto; flex-wrap: wrap; }

.vital { display: flex; flex-direction: column; gap: 2px; }

.vital .k {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
}

.vital .v { font-size: 13px; font-weight: 600; }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.refreshed { font-size: 11px; color: var(--ink-faint); font-family: var(--mono); }

button.ghost {
    background: rgba(148, 163, 200, 0.07);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 8px;
    padding: 6px 11px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
}

button.ghost:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: rgba(148, 163, 200, 0.13);
}

button.ghost:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.snapshot-alert {
    padding: 9px 22px;
    background: rgba(251, 113, 133, 0.14);
    border-bottom: 1px solid rgba(251, 113, 133, 0.4);
    color: var(--rose);
    font-size: 12px;
    flex: 0 0 auto;
}

/* -------------------------------------------------------------------------- approvals */
.approvals {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 11px 22px;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(90deg, rgba(245, 158, 11, 0.11), rgba(245, 158, 11, 0.02) 62%);
    flex: 0 0 auto;
}

.approvals[data-empty="true"] { background: rgba(148, 163, 200, 0.03); }

.appr-head { display: flex; align-items: center; gap: 9px; flex: 0 0 auto; }

.appr-title {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--amber);
    font-weight: 700;
}

.approvals[data-empty="true"] .appr-title { color: var(--ink-faint); }

.badge {
    min-width: 21px;
    height: 21px;
    padding: 0 6px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    font-family: var(--mono);
    font-size: 12px;
    font-weight: 700;
    color: #1a1206;
    background: var(--amber);
}

.approvals[data-empty="true"] .badge { background: rgba(148, 163, 200, 0.2); color: var(--ink-dim); }

/* One line only (Ron, 2026-08-11): the bar must not grow into the page as the queue grows. Items
   scroll horizontally and the arrows page through them. */
.appr-body {
    display: flex;
    gap: 9px;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    overflow-x: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;
}

.appr-body::-webkit-scrollbar { display: none; }
.appr-item { flex: 0 0 auto; }

.appr-arrow {
    flex: 0 0 auto;
    background: rgba(148, 163, 200, 0.08);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 7px;
    width: 26px;
    height: 24px;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.appr-arrow:hover:not(:disabled) { color: var(--ink); border-color: var(--line-strong); }
.appr-arrow:disabled { opacity: 0.3; cursor: default; }

.appr-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 10px;
    border: 1px solid rgba(245, 158, 11, 0.34);
    border-radius: 999px;
    background: rgba(245, 158, 11, 0.09);
    font-size: 12px;
}

.appr-item .id { font-family: var(--mono); font-weight: 700; color: var(--amber); }
.appr-item .what { color: var(--ink-dim); }
.appr-item .kind {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

/* ----------------------------------------------------------------------------- layout */
.layout {
    flex: 1 1 auto;
    min-height: 0;
    display: grid;
    grid-template-columns: 310px minmax(0, 1fr) 340px;
    gap: 14px;
    padding: 14px 16px 16px;
}

.col {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 0;
    overflow: hidden;
}

.card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: var(--panel);
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
    position: relative;
}

/* Hairline of light along the top edge — reads as glass rather than a flat box. */
.card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 14px;
    right: 14px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent);
}

.card.grow { flex: 1 1 auto; }

.card-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 14px 9px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
}

.card-head h2 {
    margin: 0;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ink-dim);
    font-weight: 700;
}

.card-head .hint { font-size: 10.5px; color: var(--ink-faint); }

.card-body { padding: 12px 14px; overflow: auto; min-height: 0; }
.card-body.tight { padding: 8px; }

.card-body::-webkit-scrollbar { width: 9px; }
.card-body::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 200, 0.22);
    border-radius: 9px;
    border: 3px solid transparent;
    background-clip: content-box;
}

/* ------------------------------------------------------------------------ team rows */
.agent {
    display: grid;
    grid-template-columns: 8px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background 0.15s ease, border-color 0.15s ease;
    /* R12: anchor the hover step panel to the row. */
    position: relative;
}

.agent:hover { background: rgba(148, 163, 200, 0.06); border-color: var(--line); }

.dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-faint);
    box-shadow: 0 0 0 3px rgba(148, 163, 200, 0.1);
}

.dot.running { background: var(--green); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); }
.dot.idle { background: var(--cyan); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.16); }
.dot.paused { background: var(--amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.16); }
.dot.error { background: var(--rose); box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.2); }

.agent .name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 7px; }

.role {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 4px;
    padding: 1px 5px;
}

.agent .why {
    font-size: 11px;
    color: var(--ink-faint);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.agent .why .task-key { font-family: var(--mono); color: var(--ink-dim); }
/* The phase is the one word worth colouring: it says whether anyone needs to act. */
.agent .why .phase { color: var(--ink-dim); }
.agent .why .phase.working,
.agent .why .phase.coding,
.agent .why .phase.designing { color: var(--green); }
/* Amber = the task is sitting on a human review or approval — the state someone must act on.
   Both phase vocabularies are covered: the gate names TASK_PHASES now emits (design-review /
   merge-review / design-approval / merge-approval) and the legacy in-* words. */
.agent .why .phase.in-review,
.agent .why .phase.in-design-review,
.agent .why .phase.design-review,
.agent .why .phase.merge-review,
.agent .why .phase.design-approval,
.agent .why .phase.merge-approval { color: var(--amber); }
.agent .why .phase.blocked { color: var(--rose); }
.agent .why .live-dot {
    display: inline-block;
    width: 5px;
    height: 5px;
    margin-left: 5px;
    border-radius: 50%;
    background: var(--green);
    animation: pulse-live 1.6s ease-in-out infinite;
}
@keyframes pulse-live { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
.agent .spend { text-align: right; font-family: var(--mono); font-size: 12px; }
.agent .spend .of { color: var(--ink-faint); font-size: 10px; }

/* R12: the lifecycle-step panel. Hidden until the row is hovered, then floats above it — every step
   the task's kind has, with its state and how long it took / has taken. */
.step-tip {
    position: absolute;
    left: 10px;
    top: calc(100% - 4px);
    z-index: 200;
    min-width: 200px;
    padding: 9px 11px;
    background: var(--panel-solid, #131828);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-3px);
    transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
    pointer-events: none;
}
.step-tip.open { opacity: 1; visibility: visible; transform: translateY(0); }
.step-tip .st-head {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--ink-dim);
    margin-bottom: 6px;
}
.step-tip .st-list { list-style: none; margin: 0; padding: 0; }
.step-tip .st {
    display: grid;
    grid-template-columns: 14px 1fr auto;
    gap: 8px;
    align-items: baseline;
    font-size: 11px;
    line-height: 1.7;
}
.step-tip .st-mark { text-align: center; color: var(--ink-faint); }
.step-tip .st-label { color: var(--ink-faint); }
.step-tip .st-elapsed { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
/* done = settled (dim tick); in-progress = the live step (green, emphasised); not-started = faint. */
.step-tip .st.done .st-mark { color: var(--green); }
.step-tip .st.done .st-label { color: var(--ink-dim); }
.step-tip .st.in-progress .st-mark { color: var(--amber); }
.step-tip .st.in-progress .st-label { color: var(--ink); font-weight: 600; }
.step-tip .st.in-progress .st-elapsed { color: var(--amber); }
.step-tip .st.not-started { opacity: 0.5; }

/* Declining needs room to say why — a one-line box invites "no" and nothing actionable. */
textarea.modal-input {
    width: 100%;
    display: block;
    resize: vertical;
    min-height: 84px;
    height: 100%;
    font: inherit;
    font-size: 12.5px;
    line-height: 1.45;
    padding: 8px 10px;
    background: rgba(148, 163, 200, 0.07);
    border: 1px solid var(--line);
    border-radius: 9px;
    color: var(--ink);
}

textarea.modal-input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
/* Comment on its own row, controls beneath it: the two were competing for width in one flex row and
   the box ended up a cramped sliver beside the buttons. */
/* Comment fills the bottom-left; controls stack down the right. Side by side in one row made the
   box a sliver, and stacking everything vertically pushed the buttons off the useful area. */
/* Empty status line takes no room, so the comment box starts at the left edge of the footer. */
.modal-note:empty { display: none; margin: 0; padding: 0; }

/* NOTE: .modal-actions layout lives in ONE rule (the flex row further down, beside .modal-foot) —
   a duplicate grid definition here never applied (later equal-specificity rule wins) and only
   misled readers about which mechanism produces the layout (review 404e777). */

.modal-buttons {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 132px;
}

.modal-buttons .btn { width: 100%; }
.modal-assign { flex-direction: column; align-items: flex-start; gap: 4px; }
.modal-assign .modal-select { width: 100%; }
.modal-spacer { display: none; }

/* The owner choice sits with the buttons: approving and saying who owns it is one decision. */
.modal-assign {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 11px;
    color: var(--ink-faint);
    white-space: nowrap;
}

.modal-select {
    background: rgba(148, 163, 200, 0.08);
    border: 1px solid var(--line);
    color: var(--ink);
    border-radius: 8px;
    padding: 6px 9px;
    font: inherit;
    font-size: 12px;
    cursor: pointer;
}

.modal-select:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.modal-select:disabled { opacity: 0.45; cursor: default; }
.modal-select option { background: var(--panel-solid); color: var(--ink); }

/* Screenshot evidence on an approval. Thumbnails so several states fit above the decision buttons;
   click opens the full image. Scrolls on its own so a change with six screenshots cannot push the
   Approve/Decline buttons off the bottom — that layout regression cost three attempts in August. */
.modal-shots {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    max-height: 190px;
    margin: 8px 0 4px;
}
.modal-shots:empty { display: none; }
.modal-shots .shot { margin: 0; flex: 0 0 auto; }
.modal-shots .shot img {
    height: 140px;
    width: auto;
    border: 1px solid #333;
    border-radius: 4px;
    cursor: zoom-in;
    background: #fff;
}
.modal-shots figcaption {
    font-size: 11px;
    opacity: 0.7;
    margin-top: 3px;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.modal-shots .shot-missing {
    font-size: 11px;
    color: #c66;
    max-width: 240px;
    padding: 6px;
    border: 1px dashed #c66;
    border-radius: 4px;
}

/* BRI-35: non-image attachments (html, zip, pdf) as download-link rows. Images reuse the .shot
   styles above; these sit in the same #modal-attachments flex row, so they wrap alongside thumbnails. */
.attach-file {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    align-self: flex-start;
    max-width: 320px;
    padding: 8px 12px;
    border: 1px solid #333;
    border-radius: 4px;
    background: #1a1a1a;
    text-decoration: none;
    color: inherit;
}
.attach-file:hover { border-color: #666; background: #222; }
.attach-badge {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 3px;
    background: #2d3748;
    color: #cbd5e1;
    flex: 0 0 auto;
}
.attach-name {
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.attach-dl { font-size: 11px; opacity: 0.6; flex: 0 0 auto; margin-left: auto; }

.modal-links { display: flex; gap: 14px; flex-wrap: wrap; padding: 0 18px 10px; }

.modal-links a {
    font-size: 12px;
    color: var(--cyan);
    text-decoration: none;
    border-bottom: 1px solid rgba(34, 211, 238, 0.35);
}

.modal-links a:hover { border-bottom-color: var(--cyan); }

.appr-item .stale-flag {
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    background: rgba(251, 113, 133, 0.16);
    border: 1px solid rgba(251, 113, 133, 0.4);
    color: var(--rose);
    font-family: var(--mono);
    font-size: 9.5px;
}

/* ------------------------------------------------------------------ type filter */
.type-filter { position: relative; }

.type-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 30;
    min-width: 194px;
    padding: 6px;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius-sm);
    background: var(--panel-solid);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
    max-height: 340px;
    overflow-y: auto;
}

.type-row {
    display: grid;
    grid-template-columns: 14px 8px 1fr auto;
    gap: 8px;
    align-items: center;
    padding: 5px 7px;
    border-radius: 7px;
    font-size: 12px;
    cursor: pointer;
}

.type-row:hover { background: rgba(148, 163, 200, 0.08); }
.type-row input { margin: 0; cursor: pointer; accent-color: var(--cyan); }
.type-dot { width: 8px; height: 8px; border-radius: 50%; }
.type-name { text-transform: capitalize; }
.type-count { color: var(--ink-faint); font-size: 10.5px; }

.type-actions {
    display: flex;
    gap: 6px;
    padding: 6px 5px 2px;
    margin-top: 4px;
    border-top: 1px solid var(--line);
}

.type-actions button {
    flex: 1 1 auto;
    background: rgba(148, 163, 200, 0.08);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 7px;
    padding: 4px 0;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.type-actions button:hover { color: var(--ink); border-color: var(--line-strong); }

/* -------------------------------------------------------------- recently learned */
.recent-note {
    display: grid;
    grid-template-columns: 6px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recent-note:hover { background: rgba(148, 163, 200, 0.06); border-color: var(--line); }
.recent-note .rn-type { width: 6px; height: 6px; border-radius: 50%; }
.recent-note .rn-main { min-width: 0; }

.recent-note .rn-name {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-note .rn-desc {
    font-size: 10.5px;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-note .rn-when {
    font-family: var(--mono);
    font-size: 10.5px;
    color: var(--ink-faint);
}

/* The page is pushed to, not polled: this says the link is alive without adding a moving part. */
.live-pip {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--green);
    margin-right: 6px;
    vertical-align: middle;
    animation: pulse-live 2.4s ease-in-out infinite;
}

.live-pip.stale { background: var(--amber); animation: none; }

/* --------------------------------------------------------------------- board & lists */
.group-label {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ink-faint);
    padding: 9px 8px 5px;
    display: flex;
    justify-content: space-between;
}

.row {
    display: flex;
    gap: 9px;
    align-items: baseline;
    padding: 7px 10px;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.row:hover { background: rgba(148, 163, 200, 0.05); }
.row .id { font-family: var(--mono); font-weight: 700; color: var(--cyan); flex: 0 0 auto; }
.row .txt { color: var(--ink-dim); min-width: 0; }
.row .who {
    margin-left: auto;
    font-size: 10px;
    color: var(--ink-faint);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 1px 7px;
    flex: 0 0 auto;
}

.empty-line { padding: 10px; color: var(--ink-faint); font-size: 12px; }

/* Long WORKPLAN lines are clamped rather than allowed to push the card into a wall of text. */
.row .txt {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Uniform, single-line rows so exactly 4 fit in the fixed-height scroll region (R10). A clickable
   row is an <a>; a non-identifier row is a <div> with the same class — both size identically. */
.feed-row {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: var(--activity-row-h);
    padding: 9px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.feed-row:hover { background: rgba(148, 163, 200, 0.05); border-color: var(--line); }

.feed-title {
    font-size: 12.5px;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The row leads with the primary id (R- for a feature, "Bug BRI-n" for a bug, BRI-n for a plain
   task); the BRI id trailing a feature is smaller and muted so Ron reads the R- id he knows first
   (BRI-101), mirroring the Assigned box's muted secondary id. */
.feed-id-sub {
    font-size: 10.5px;
    color: var(--ink-faint);
    margin-left: 4px;
}

.feed-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 4px;
    font-size: 10.5px;
    color: var(--ink-faint);
    min-width: 0;
}

.feed-meta .who { margin-left: auto; }

/* BRI-116: the timing label ("14h") keeps its natural width; the issue text takes the rest and is
   held to ONE line (ellipsis, not wrap). A wrapped .feed-what used to grow the row past its fixed
   height, and the centre-clipped row then hid the .feed-title above it — leaving a "title-less" row
   of raw issue text with no "Bug BRI-x / R-x + state" prefix. Holding it to one line makes that
   structurally impossible for any event class, whatever the title length. */
.feed-meta > span:first-child { flex: 0 0 auto; }
.feed-what {
    flex: 0 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BRI-106: Activity and Assigned share the right column EQUALLY (Ron). flex-basis:0 on BOTH makes
   them split the available height 50/50 regardless of content; each body scrolls internally, so the
   split (not a fixed row count) is what bounds them — the inner-scroll behaviour Ron asked to keep.
   Before this, Activity was pinned to four rows (flex:0 0 auto) and Assigned (.grow) ate the rest. */
#card-activity { flex: 1 1 0; min-height: 120px; }
#card-assigned { flex: 1 1 0; min-height: 120px; }

.activity-controls,
.board-controls {
    display: flex;
    align-items: center;
    /* One line, always (Ron, 2026-08-18): wrapping stole a row from the box it filters. The
       segments hold their size; the select gives up width first. */
    flex-wrap: nowrap;
    gap: 6px;
    padding: 7px 8px;
    border-bottom: 1px solid var(--line);
    flex: 0 0 auto;
    overflow: hidden;
}
.board-controls .seg { flex: 0 0 auto; }
.board-controls .seg-btn { padding: 3px 7px; font-size: 10.5px; }
.board-controls .act-select { flex: 1 1 auto; min-width: 84px; padding: 3px 6px; font-size: 10.5px; }

.act-select {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink-dim);
    font: inherit;
    font-size: 11px;
    padding: 4px 6px;
    cursor: pointer;
}

.act-select option { background: var(--panel-solid); color: var(--ink); }

/* Newest/Oldest is meaningful only for Pending; greyed and inert in Done view. */
.seg.is-disabled { opacity: 0.4; pointer-events: none; }

/* BRI-106: the body fills whatever the equal-height split gives the card and scrolls inside it (the
   card is now flex:1 1 0, no longer a fixed four-row box). This single #activity-body is the scroll
   container for all three tabs — Events, TL closed today, Pending releases. */
#activity-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

/* BRI-106: Pending-releases rows (the third Activity tab). One row per server: name, live state,
   pending-merge count, and an action (Force / Pending previous deploy / tree release-path badge). */
.rel-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 6px;
    border-bottom: 1px solid var(--line);
    font-size: 11.5px;
}
.rel-target { flex: 0 0 auto; color: var(--ink); font-weight: 600; }
.rel-state { flex: 1 1 auto; color: var(--ink-dim); }
.rel-count { flex: 0 0 auto; color: var(--ink-faint); font-size: 10.5px; }
.rel-action { flex: 0 0 auto; }
/* State colouring — failed/unknown must read as NOT-green (honesty rule). */
.rel-guardrail .rel-state,
.rel-waiting .rel-state { color: var(--amber, #d8a657); }
.rel-deploying .rel-state,
.rel-testing .rel-state,
.rel-post_deploy .rel-state { color: #93c5fd; }
.rel-done .rel-state { color: var(--green, #7bbf6a); }
.rel-failed .rel-state { color: var(--red, #e06c75); font-weight: 600; }
.rel-unknown .rel-state { color: var(--ink-faint); font-style: italic; }
.rel-force {
    background: transparent;
    border: 1px solid var(--line);
    border-radius: 7px;
    color: var(--ink-dim);
    font: inherit;
    font-size: 10.5px;
    padding: 2px 8px;
    cursor: pointer;
}
.rel-force:hover { color: var(--ink); border-color: var(--amber, #d8a657); }
.rel-force:disabled { opacity: 0.5; cursor: default; }
.rel-blocked { color: var(--ink-faint); font-size: 10px; font-style: italic; }
.rel-tree { color: var(--ink-faint); font-size: 10px; }

/* ------------------------------------------------------------------------- the stage */
.stage {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background:
        radial-gradient(80% 60% at 50% 42%, rgba(24, 30, 54, 0.55), rgba(7, 9, 18, 0.9)),
        var(--bg-2);
    display: flex;
    flex-direction: column;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

.stage-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px 14px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    z-index: 3;
    flex: 0 0 auto;
    flex-wrap: wrap;
}

.stage-tabs { display: flex; align-items: baseline; gap: 10px; min-width: 0; flex: 1 1 220px; }

.stage-title {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.11em;
    color: var(--ink-dim);
    font-weight: 700;
}

/* One line, truncated: the meta is reference detail and must never push the toolbar around. */
.stage-meta {
    font-size: 11px;
    color: var(--ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.stage-tools { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.stage-tools button.ghost { white-space: nowrap; padding: 5px 9px; }
.brain-search { width: 150px; }

.seg { display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }

#btn-zoom-out, #btn-zoom-in {
    font-size: 14px;
    line-height: 1;
    padding: 4px 10px;
    font-weight: 700;
}

.seg-btn {
    background: transparent;
    border: 0;
    color: var(--ink-faint);
    font: inherit;
    font-size: 11px;
    padding: 5px 11px;
    cursor: pointer;
}

.seg-btn.is-on { background: rgba(34, 211, 238, 0.16); color: var(--cyan); font-weight: 600; }

.stage-view { position: relative; flex: 1 1 auto; min-height: 0; }
.stage-canvas { position: absolute; inset: 0; }

.stage-panel {
    position: absolute;
    inset: 0;
    z-index: 4;
    background: linear-gradient(180deg, rgba(11, 14, 26, 0.97), rgba(11, 14, 26, 0.99));
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.note-head { padding: 16px 20px 10px; border-bottom: 1px solid var(--line); }
.note-head h3 { margin: 0 0 7px; font-size: 15px; }
.chips { display: flex; gap: 7px; flex-wrap: wrap; }

.chip {
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-dim);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.chip.stale { border-color: rgba(245, 158, 11, 0.4); color: var(--amber); }

.note-body {
    margin: 0;
    padding: 16px 20px 22px;
    overflow: auto;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--ink-dim);
    white-space: pre-wrap;
    word-break: break-word;
}

.legend {
    position: absolute;
    left: 14px;
    bottom: 12px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    z-index: 3;
    pointer-events: none;
}

.leg { display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: var(--ink-faint); }
.leg i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }

.stage-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 40px;
    color: var(--ink-faint);
    font-size: 13px;
    z-index: 2;
}

/* --------------------------------------------------------------------------- channels */
.chan-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }

.chan {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.chan .hash { color: var(--ink-faint); font-family: var(--mono); }
.chan .tag {
    margin-left: auto;
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--green);
}

.chan .tag.home { color: var(--cyan); }

/* -------------------------------------------------------------------------- feedback */
.skeleton {
    height: 62px;
    border-radius: var(--radius-sm);
    background: linear-gradient(90deg, rgba(148, 163, 200, 0.05), rgba(148, 163, 200, 0.12),
        rgba(148, 163, 200, 0.05));
    background-size: 200% 100%;
    animation: shimmer 1.5s linear infinite;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.degraded {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 11px;
    border: 1px solid rgba(251, 113, 133, 0.32);
    background: rgba(251, 113, 133, 0.08);
    border-radius: var(--radius-sm);
    font-size: 12px;
    color: #ffc9d1;
}

.tooltip {
    position: fixed;
    z-index: 200;
    pointer-events: none;
    max-width: 300px;
    padding: 9px 11px;
    border-radius: 10px;
    border: 1px solid var(--line-strong);
    background: rgba(10, 13, 24, 0.97);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.55);
    font-size: 12px;
    line-height: 1.45;
}

.tooltip .tt-title { font-weight: 700; margin-bottom: 3px; }
.tooltip .tt-type {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ink-faint);
}

.tooltip .tt-desc { color: var(--ink-dim); margin-top: 5px; }

@media (max-width: 1400px) {
    .layout { grid-template-columns: 280px minmax(0, 1fr) 300px; }
    .vitals { gap: 18px; }
}

@media (max-width: 1150px) {
    body { overflow: auto; }
    .layout { grid-template-columns: 1fr; }
    .col { overflow: visible; }
    .stage { min-height: 62vh; }
}

/* ------------------------------------------------------------------------------ modal */
.modal-back {
    position: fixed;
    inset: 0;
    z-index: 300;
    display: grid;
    place-items: center;
    padding: 40px;
    background: rgba(4, 6, 12, 0.72);
    backdrop-filter: blur(6px);
}

.modal {
    width: min(860px, 100%);
    max-height: 82vh;
    /* .modal-back is a grid with place-items:center, so this box is shrink-to-fit: without clipping
       here its children just overflowed it and nothing scrolled. */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
    background: var(--panel-solid);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.6);
    overflow: hidden;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 13px;
    border-bottom: 1px solid var(--line);
}

.modal-head h3 { margin: 4px 0 0; font-size: 16px; }
.modal-head-actions { display: flex; align-items: center; gap: 8px; }
.modal-head-actions .btn.deny { padding: 5px 10px; font-size: 12px; }

/* BRI-34: header actions group so 'View Commits' sits beside Close in the top space,
   both pushed to the right by the head's space-between. */
.modal-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

/* Reads as a header action next to Close, but is an anchor: the branch-vs-main diff opens in a
   new tab. Mirrors button.ghost's chrome without stealing its element. */
.modal-head-link {
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 8px;
    padding: 6px 11px;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.modal-head-link:hover {
    color: var(--ink);
    border-color: var(--line-strong);
    background: rgba(148, 163, 200, 0.13);
}
.modal-head-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.modal-kind {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--amber);
    font-weight: 700;
}

.modal-body {
    margin: 0;
    padding: 16px 18px;
    /* flex + min-height:0 is what makes overflow work here. A flex child will not shrink below its
       content without it, so a long message from Tee was clipped rather than scrolled — and his
       approval requests are long by design, since Ron requires them itemised. */
    flex: 1 1 auto;
    /* Both: min-height:0 lets it shrink inside the flex column, and an explicit cap guarantees a
       scrollbar even when the modal is shrink-to-fit and the flex chain has no bounded height to
       divide. Relying on the chain alone left Tee's long approvals clipped with no scrollbar. */
    min-height: 0;
    max-height: 52vh;
    overflow-y: auto;
    font-family: var(--mono);
    font-size: 12px;
    line-height: 1.65;
    color: var(--ink-dim);
    white-space: pre-wrap;
    word-break: break-word;
}

.modal-foot {
    /* Column, not row: the status note used to sit BESIDE the controls and squeeze the comment box
       into a sliver. The note belongs above, and the actions get the full width. */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--line);
    background: rgba(148, 163, 200, 0.04);
}

.modal-note { font-size: 11.5px; color: var(--ink-faint); flex: 1 1 auto; }
.modal-actions { display: flex; align-items: center; gap: 9px; }

.modal-input {
    background: rgba(8, 11, 20, 0.8);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    padding: 6px 10px;
    width: 210px;
}

.btn {
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 7px 15px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
}

.btn.approve { background: var(--green); color: #04140d; }
.btn.approve:hover { filter: brightness(1.08); }
.btn.deny { background: rgba(251, 113, 133, 0.14); border-color: rgba(251, 113, 133, 0.4); color: #ffc9d1; }
.btn.deny:hover { background: rgba(251, 113, 133, 0.22); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }

.appr-item { cursor: pointer; }
.appr-item:hover { background: rgba(245, 158, 11, 0.18); }
.agent { cursor: pointer; }

/* ------------------------------------------------------------------------- sign-in state */
.mode {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    color: var(--ink-faint);
}

.mode[data-write="true"] {
    color: var(--green);
    border-color: rgba(52, 211, 153, 0.4);
    background: rgba(52, 211, 153, 0.1);
}

.modal.auth { width: min(560px, 100%); }
.auth-body { padding: 16px 18px 18px; }
.auth-row { display: flex; align-items: center; gap: 9px; margin: 14px 0 10px; }
/* BRI-99: the two sign-in steps are <form>s now; display:contents hoists their input+button into
   the .auth-row flex line, so the row lays out exactly as it did before the forms were added. */
.auth-row form { display: contents; }
.auth-row .modal-input { width: 110px; text-align: center; letter-spacing: 0.22em; font-size: 15px; }

/* ------------------------------------------------------------------------ brain controls */
.brain-search {
    background: rgba(8, 11, 20, 0.7);
    border: 1px solid var(--line);
    border-radius: 8px;
    color: var(--ink);
    font: inherit;
    font-size: 12px;
    padding: 5px 10px;
    width: 190px;
}

.brain-search:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; }
button.ghost[data-off="true"] { color: var(--amber); border-color: rgba(245, 158, 11, 0.4); }

.note-head-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.note-head-row h3 { margin: 0; }
.note-head-actions { display: flex; align-items: center; gap: 9px; }

.note-close {
    background: rgba(148, 163, 200, 0.08);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 8px;
    width: 30px;
    height: 30px;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: all 0.15s ease;
}

.note-close:hover { color: var(--ink); border-color: var(--line-strong); background: rgba(148, 163, 200, 0.16); }

/* --------------------------------------------------------------------------- talk to Tee */
.btn.talk {
    display: block;
    text-align: center;
    text-decoration: none;
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.18), rgba(139, 92, 246, 0.18));
    border: 1px solid rgba(34, 211, 238, 0.38);
    color: var(--ink);
    padding: 10px 14px;
    transition: all 0.15s ease;
}

.btn.talk:hover {
    border-color: var(--cyan);
    background: linear-gradient(135deg, rgba(34, 211, 238, 0.28), rgba(139, 92, 246, 0.26));
}

.btn.talk[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
#talk-note { margin: 11px 0 0; }
.chan-list { margin-top: 0; }

.chan-add { display: flex; gap: 8px; margin-top: 11px; }
.chan-add .modal-input { flex: 1 1 auto; width: auto; }
.chan .drop {
    background: none;
    border: 0;
    color: var(--ink-faint);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0 2px;
}

.chan .drop:hover { color: var(--rose); }
.chan a { color: var(--ink); text-decoration: none; }
.chan a:hover { color: var(--cyan); }
#chan-note { margin-top: 8px; }

/* -------------------------------------------------------------------------- note backlinks */
.note-links { margin-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.linkline { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.linklabel {
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-faint);
    margin-right: 2px;
}

.linkchip {
    background: rgba(34, 211, 238, 0.08);
    border: 1px solid rgba(34, 211, 238, 0.24);
    color: var(--ink-dim);
    border-radius: 999px;
    padding: 2px 9px;
    font: inherit;
    font-size: 11px;
    cursor: pointer;
}

.linkchip:hover { color: var(--ink); border-color: var(--cyan); }

/* R17 step 4: Approvals Queue — three labeled groups in the bar, and the routing controls row.
   flex: 0 0 auto is load-bearing: the groups are now the scroller's flex children, and a shrinkable
   group squashes below its content and paints its chips over the next group (Ron's overlap,
   2026-08-17) — the bar scrolls horizontally instead of shrinking, same rule the chips had. */
.appr-group { display: inline-flex; align-items: center; gap: 6px; margin-right: 14px; flex: 0 0 auto; }
.appr-group .appr-item { white-space: nowrap; }
.appr-group-label {
    font-size: 10px; text-transform: uppercase; letter-spacing: .06em; opacity: .55;
    white-space: nowrap;
}
/* A narrow right-side column, mirroring .modal-buttons — the comment box keeps the footer's
   width instead of the controls dominating the whole bottom box (Ron, 2026-08-20). */
.modal-route {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
    min-width: 172px;
    margin: 0;
}
/* Label and dropdown share the line — the label left, a NARROW select right (Ron, 2026-08-20). */
.modal-route label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-size: 12px;
}
.modal-route label > span { white-space: nowrap; }
.modal-route .modal-select { width: 118px; }
.modal-route .btn { width: 100%; }

/* Built-in doc links render as buttons, not prose (Ron, 2026-08-17). */
.modal-links { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 18px 0; }
.modal-links a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 5px 12px; border: 1px solid rgba(96, 165, 250, 0.45); border-radius: 8px;
    color: #93c5fd; text-decoration: none; font-size: 12px; font-weight: 600;
}
.modal-links a:hover { background: rgba(96, 165, 250, 0.14); }
/* A document the issue does not record: stated, not silently absent (Ron, 2026-08-17). */
.doc-missing {
    display: inline-flex; align-items: center; padding: 5px 12px;
    border: 1px dashed rgba(148, 163, 200, 0.35); border-radius: 8px;
    color: var(--ink-faint); font-size: 12px;
}
.shot-missing {
    padding: 10px 12px; border: 1px dashed rgba(251, 113, 133, 0.45); border-radius: 8px;
    color: var(--rose); font-size: 11px; word-break: break-all;
}
/* The board id stays visible next to the roadmap name: chips are NAMED by the roadmap item (Ron),
   but a chip that shows only "R11+R12" makes BRI-13 look deleted when you scan for the board id. */
.appr-item .board-id {
    font-family: var(--mono); font-size: 9.5px; opacity: .5; letter-spacing: .02em;
}
/* Routing to a HUMAN takes the work off the team's board — the button says so before the click. */
#btn-route.warn { background: rgba(245, 158, 11, 0.22); border-color: rgba(245, 158, 11, 0.55); }
/* Waiting states earn attention: an engineer blocked behind a review is idle capacity. */
.phase[class*="waiting-for-ron"] { color: var(--amber); }
.phase[class*="waiting-for-tee"] { color: #93c5fd; }
.phase.designing, .phase.coding { color: #4ade80; }
.phase.blocked { color: var(--rose); }

/* Left column, sized by what each box is FOR (Ron, 2026-08-18): the team is a fixed roster —
   every agent visible, never scrolled; recently-learned shows its five newest; the board takes
   whatever is left and scrolls, because it is the only box that grows without bound. */
.col-left #card-team,
.col-left #card-recent { flex: 0 0 auto; }
.col-left #card-team .card-body,
.col-left #card-recent .card-body { overflow: visible; }
.col-left #card-board { flex: 1 1 auto; min-height: 120px; }
.col-left #card-board .card-body { overflow: auto; }

/* Activity is a FEED: ten events kept, the rest by scroll (Ron, 2026-08-18). BRI-106: the box now
   shares the column height equally with Assigned, so the body flex-fills instead of being capped to
   four rows — the old max-height would have overridden that (id vs id+class specificity). */
#card-activity .card-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.feed-what { opacity: .55; }

/* Left column shares height by purpose: the roster is whole and unscrolled; recently-learned and
   the board each keep at least three rows visible and scroll beyond that, the board taking the
   larger share because it is the box that grows. */
.col-left #card-recent { flex: 1 1 auto; min-height: 168px; }
.col-left #card-recent .card-body { overflow-y: auto; }
.col-left #card-board { flex: 2 1 auto; min-height: 148px; }
/* Every board row states its own phase now that the phase sections are gone. */
#board-body .row .prio { opacity: .6; font-size: 10px; margin-left: 6px; }
/* A held task: the gate name stays, the pause mark says it is not moving. */
.agent .held { color: var(--amber); font-size: 10px; }
.phase[class*="approval"] { color: var(--amber); }
.phase[class*="review"] { color: #93c5fd; }

/* ---------------------------------------------------------- R-41: Assigned box + head button */
.head-btn {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 11.5px;
    text-decoration: none;
    white-space: nowrap;
    /* full button chrome on the anchor itself — the .ghost rules bind to button.ghost only */
    background: rgba(148, 163, 200, 0.07);
    border: 1px solid var(--line);
    color: var(--ink-dim);
    border-radius: 8px;
    transition: all 0.15s ease;
}
.head-btn:hover { color: var(--ink); border-color: var(--line-strong);
    background: rgba(148, 163, 200, 0.13); }
.card-head { gap: 10px; }
.assigned-row {
    display: grid;
    grid-template-columns: 34px 52px 1fr auto;
    gap: 9px;
    align-items: center;
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    font-size: 13px;
}
.assigned-row:hover { background: rgba(148, 163, 200, 0.06); border-color: var(--line); }
/* R-59: routed-to-Tee roadmap rows awaiting materialization — visible but not yet openable. */
.assigned-row.pending-mat { opacity: 0.65; cursor: default; }
.assigned-row.pending-mat .a-status { font-style: italic; }
.assigned-row .prio {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-radius: 6px;
    padding: 2px 0;
    background: rgba(148, 163, 200, 0.12);
    color: var(--ink-dim);
}
.assigned-row .prio.P0 { background: rgba(251, 113, 133, 0.18); color: var(--rose); }
.assigned-row .prio.P1 { background: rgba(245, 158, 11, 0.16); color: var(--amber); }
.assigned-row .prio.P2 { background: rgba(34, 211, 238, 0.12); color: var(--cyan); }
.assigned-row .a-id { color: var(--ink-dim); font-size: 12px; }
.assigned-row .a-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink);
}
.assigned-row .a-status { font-size: 11px; color: var(--ink-faint); }

/* --------------------------- Assigned box tabs (item 14, Ron 2026-08-23) */
.a-tabs { display: flex; gap: 2px; padding: 0 10px; border-bottom: 1px solid var(--line, #2a2e35); }
.a-tab {
    font-size: 11px; padding: 4px 10px; cursor: pointer; color: var(--ink-faint, #8b93a1);
    border-bottom: 2px solid transparent; user-select: none;
}
.a-tab.active { color: var(--ink, #e7ebf0); border-bottom-color: var(--accent, #60a5fa); }
.a-tab.hidden { display: none; }

/* Item 28 (Ron, 2026-08-24): the task title inside the hover step panel. */
.step-tip .st-title { font-size: 11px; color: var(--ink-dim); margin: 2px 0 6px; }

/* R-87: hand an assigned task back to Tee, from the queue row itself. */
.a-reassign {
    margin-left: 8px;
    padding: 2px 8px;
    font-size: 11px;
    border: 1px solid #4b5878;
    border-radius: 4px;
    background: transparent;
    color: #9fb2d8;
    cursor: pointer;
    flex-shrink: 0;
}
.a-reassign:hover { background: #2a3350; color: #e6ecff; }
.a-reassign:disabled { opacity: 0.4; cursor: default; }

/* R-89: suggested engineering lessons in the approval box. */
#modal-memories { margin: 10px 0; padding: 8px 10px; border: 1px solid #3a4468; border-radius: 6px; }
#modal-memories .mem-title { font-size: 11px; color: var(--ink-faint); margin-bottom: 6px; }
#modal-memories .mem-row { display: flex; gap: 8px; align-items: center; margin: 4px 0; }
#modal-memories .mem-text { flex: 1; font-size: 12px; padding: 4px 6px; background: #12121f;
    color: #e0e6f4; border: 1px solid #3a4468; border-radius: 4px; }
#modal-memories input[type="checkbox"]:not(:checked) + .mem-text {
    opacity: 0.45; text-decoration: line-through; }