clanker-saddle/src/pages/app.css

/* ClankerSaddle application stylesheet. Served precompressed from
   /_statum/resource/app.css; spacing follows an 8px grid. */

:root {
    --grid-1: 0.5rem;
    --grid-2: 1rem;
    --grid-3: 1.5rem;
    --grid-4: 2rem;
    --ink: #1f2328;
    --ink-muted: #59636e;
    --line: #d1d9e0;
    --line-soft: #e4eaef;
    --surface: #ffffff;
    --surface-sunken: #f6f8fa;
    --accent: #0969da;
    --success: #1a7f37;
    --warning: #9a6700;
    --danger: #cf222e;
    --review: #bf8700;
    --plan: #8250df;
    /* The goal accent (plan 12 identity): goals never read as tasks
       at a glance — their chrome carries this instead of the task
       blue. */
    --goal: #8250df;
    --goal-surface: #faf7ff;
    --radius: 8px;
}

* { box-sizing: border-box; }

body {
    font-family: system-ui, -apple-system, sans-serif;
    color: var(--ink);
    background: var(--surface-sunken);
    margin: 0 auto;
    max-width: 64rem;
    padding: 0 var(--grid-2);
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--grid-2);
    border-bottom: 1px solid var(--line);
    padding: var(--grid-2) 0;
}

header h1 { font-size: 1.25rem; margin: 0; display: flex; align-items: center; gap: 0.5rem; }
header h1 .brand-emblem { height: 8rem; width: auto; margin-block: -0.2rem; }
header nav { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--grid-1); }

main { padding: var(--grid-2) 0 var(--grid-4); }

footer {
    border-top: 1px solid var(--line);
    color: var(--ink-muted);
    font-size: 0.85rem;
    padding: var(--grid-2) 0;
}

h2 { margin: var(--grid-1) 0 var(--grid-2); }
h3 { margin: var(--grid-3) 0 var(--grid-1); }

a { color: var(--accent); }

/* ---- Forms ---- */

input, button, select, textarea { font: inherit; color: inherit; }

input[type="text"], input[type="password"], input[type="email"], input[type="date"],
input[type="number"], input[type="url"], select, textarea {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    max-width: 100%;
}

textarea {
    width: 100%;
    min-height: 6rem;
    resize: vertical;
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 0.9rem;
    line-height: 1.45;
}

button {
    padding: 0.45rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface-sunken);
    cursor: pointer;
}

button:hover { background: var(--line-soft); }

button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
button.approve { background: var(--success); border-color: var(--success); color: #fff; }
button.reject { background: var(--danger); border-color: var(--danger); color: #fff; }

.form-row {
    display: flex;
    flex-direction: column;
    gap: var(--grid-1);
    margin: var(--grid-1) 0;
    max-width: 34rem;
}

.form-row label { font-weight: 600; font-size: 0.9rem; }
.form-row input, .form-row select, .form-row textarea { width: 100%; }

form.inline { display: inline-flex; align-items: center; gap: var(--grid-1); margin: var(--grid-1) 0; flex-wrap: wrap; }
form.inline textarea { min-height: 3rem; }

/* ---- Cards & tables ---- */

.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--grid-2);
    margin: var(--grid-2) 0;
}

.card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: var(--grid-2);
}

.card h3 { margin: 0 0 var(--grid-1); }

/* The task page's status block — the left cell of the 50/50
   status/description grid (plan 11 task D), directly below the
   progress feed. */
.status-head {
    border-left: 4px solid #0969da;
}

/* Status + description side by side, 50/50 (plan 11 task D); stacks
   status-then-description on small screens (source order carries the
   collapse — no order flips needed). */
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--grid-2);
    align-items: start;
    margin: var(--grid-2) 0;
}

/* Dashboard: the draft subtasks of a parked parent (plan 11 task D). */
.waiting-drafts { margin: var(--grid-1) 0; padding-left: var(--grid-2); }
.waiting-drafts li { margin: var(--grid-1) 0; }

table { border-collapse: collapse; width: 100%; background: var(--surface); }
th, td { border: 1px solid var(--line); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
th { background: var(--surface-sunken); }

details {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

summary { cursor: pointer; font-weight: 600; }

/* ---- Badges ---- */

.badge {
    border-radius: 1em;
    display: inline-block;
    font-size: 0.75rem;
    padding: 0.15rem 0.65rem;
    vertical-align: middle;
}

/* The saddle's SSH public key display */
.ssh-key {
    background: #111827;
    /* Goal 2 QoL: the key text inherits --ink (#1f2328, near-black) —
       unreadable on the #111827 panel. A light tone keeps the dark
       aesthetic while clearing WCAG-ish contrast (the page already
       uses #d1d5db for muted text on dark surfaces). */
    color: #d1d5db;
    border: 1px solid #374151;
    border-radius: 4px;
    font-size: 0.75rem;
    margin: 0.5em 0;
    max-height: 7em;
    overflow: auto;
    padding: 0.5em 0.75em;
    white-space: pre-wrap;
    word-break: break-all;
}

/* Health badges on the saddles page */
.badge-health-healthy {
    background: #14532d;
    color: #bbf7d0;
}
.badge-health-stale {
    background: #713f12;
    color: #fde68a;
}
.badge-health-fenced {
    background: #7c2d12;
    color: #fed7aa;
}
.badge-health-offline {
    background: #7f1d1d;
    color: #fecaca;
}
.badge-health-unknown {
    background: #374151;
    color: #d1d5db;
}

/* The × inside a capability chip (badge) */
.chip-remove {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font-size: 0.85rem;
    line-height: 1;
    margin-left: 0.25rem;
    padding: 0;
}

.badge-draft { background: var(--line-soft); color: var(--ink-muted); }
.badge-queued { background: #88843333; color: #4d4d33; }
.badge-assigned { background: #ddf4ff; color: #0969da; }
.badge-working { background: #fff8c5; color: var(--warning); }
.badge-blocked { background: #fff8c5; color: var(--warning); }
.badge-review_requested { background: #fff1e0; color: #9a4700; }
.badge-done { background: #dafbe1; color: var(--success); }
.badge-failed { background: #ffebe9; color: var(--danger); }
.badge-idle { background: #dafbe1; color: var(--success); }
.badge-busy { background: #fff8c5; color: var(--warning); }
.badge-offline { background: var(--line-soft); color: var(--ink-muted); }
.badge-co-developed { background: #ddf4ff; color: #0969da; }
.badge-reference { background: var(--line-soft); color: var(--ink-muted); }
.badge-command { background: var(--line-soft); color: var(--ink-muted); }
.badge-comment { background: #f0f0f0; color: #6e7781; }
.badge-block { background: #fff8c5; color: var(--warning); }
.badge-user-comment { background: #ddf4ff; color: #0969da; }
.badge-progress { background: #dafbe1; color: var(--success); }
.badge-review { background: #fff1e0; color: #9a4700; }
.badge-plan { background: #f3e8ff; color: var(--plan); }
.badge-question { background: #ddf4ff; color: #0969da; }
.badge-rfc { background: #f3e8ff; color: var(--plan); }

/* Plan 12 goals: lifecycle badges (task-like palette), mode badges
   and the narrative/strip chrome. */
.badge-planning { background: #ddf4ff; color: #0969da; }
.badge-plan_review { background: #f3e8ff; color: var(--plan); }
.badge-active { background: #dafbe1; color: var(--success); }
.badge-paused { background: var(--line-soft); color: var(--ink-muted); }
.badge-completion_review { background: #fff1e0; color: #9a4700; }
.badge-complete { background: #dafbe1; color: var(--success); }
.badge-cancelled { background: var(--line-soft); color: var(--ink-muted); }
.badge-mode-implement { background: var(--line-soft); color: var(--ink-muted); }
.badge-mode-investigate { background: #ddf4ff; color: #0969da; }
.badge-mode-review { background: #fff1e0; color: #9a4700; }
.badge-mode-test { background: #dafbe1; color: var(--success); }
.badge-mode-orchestrate { background: #f3e8ff; color: var(--plan); }
.badge-goal-plan-submitted { background: #f3e8ff; color: var(--plan); }
.badge-goal-plan-approved { background: #dafbe1; color: var(--success); }
.badge-goal-plan-rejected { background: #ffebe9; color: var(--danger); }
.badge-goal-completion-submitted { background: #fff1e0; color: #9a4700; }
.badge-goal-goal-approved { background: #dafbe1; color: var(--success); }
.badge-goal-completion-rejected { background: #ffebe9; color: var(--danger); }
.badge-goal-goal-failed { background: #ffebe9; color: var(--danger); }
.badge-goal-started { background: #ddf4ff; color: #0969da; }
.badge-goal-paused { background: var(--line-soft); color: var(--ink-muted); }
.badge-goal-resumed { background: #ddf4ff; color: #0969da; }
.badge-goal-cancelled { background: var(--line-soft); color: var(--ink-muted); }
.badge-goal-task-created { background: #ddf4ff; color: #0969da; }
.badge-goal-task-enqueued { background: #88843333; color: #4d4d33; }
.badge-goal-task-deleted { background: var(--line-soft); color: var(--ink-muted); }
.badge-goal-task-done { background: #dafbe1; color: var(--success); }
.badge-goal-task-failed { background: #ffebe9; color: var(--danger); }
.badge-goal-block-raised { background: #fff8c5; color: var(--warning); }
.badge-goal-comment { background: #f0f0f0; color: #6e7781; }
.badge-goal-created { background: var(--line-soft); color: var(--ink-muted); }
.badge-block-plan { background: #f3e8ff; color: var(--plan); }
.badge-block-completion { background: #fff1e0; color: #9a4700; }

.goal-strip { display: flex; gap: var(--grid-1); flex-wrap: wrap; align-items: center; }
.badge-kind-task { background: #ddf4ff; color: #0969da; }
.badge-kind-goal { background: #f3e8ff; color: var(--goal); }

/* ---- Goal identity (a goal never reads as a task at a glance) ---- */

/* The goal page's status card: the goal accent replaces the task
   blue of .status-head. */
.goal-head { border-left: 4px solid var(--goal); }

/* Dashboard pile cards for goal items: goal accent + tinted
   surface, next to the plain white task cards. */
.card.goal-card {
    background: var(--goal-surface);
    border-left: 4px solid var(--goal);
}

/* The 🎯 marker rides the nav entry, the goals pages and the goal
   pile cards. */
.goal-icon {
    font-style: normal;
    margin-right: 0.15rem;
}

nav .nav-goal { font-weight: 600; }

/* The supervision narrative's markdown bodies flow inside the flex
   event row. */
.goal-event-text { flex: 1 1 16rem; min-width: 0; }
.goal-event-text > :first-child { margin-top: 0; }
.goal-event-text > :last-child { margin-bottom: 0; }

/* The current-activity card on the goal page. */
.goal-activity code { word-break: break-all; }


.goal-filter {
    background: var(--line-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-muted);
    cursor: pointer;
    font-size: 0.8rem;
    padding: 0.15rem 0.7rem;
}
.goal-filter.active {
    background: #ddf4ff;
    border-color: #0969da;
    color: #0969da;
}
.goal-event {
    border-left: 2px solid var(--line-soft);
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.35rem 0;
    padding-left: 0.6rem;
}

/* Plan 14 B6: comment events read as FOOTNOTES in the narrative —
   the whole row (badge included) mutes and shrinks against the
   full-weight state events around it, so the feed reads as
   events-with-occasional-footnotes rather than a doubled list. */
.goal-event.footnote {
    border-left-color: transparent;
    font-size: 0.85rem;
    margin: 0.15rem 0;
    opacity: 0.75;
    padding-left: 0.6rem;
}

/* Plan 14 B5: the goal's Rules section rows and the task rows'
   required-capability badges. */
.rule-card {
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

.rule-card > h4 { margin: 0 0 var(--grid-1); }

.badge-capability { background: #ddf4ff; color: #0969da; }
.plan-revision { margin: 0.5rem 0; }

/* Dashboard timeline event kinds (plan 10 phase 3) */
.badge-created { background: var(--line-soft); color: var(--ink-muted); }
.badge-started { background: #ddf4ff; color: #0969da; }
.badge-suspended { background: #fff8c5; color: var(--warning); }
.badge-completed { background: #dafbe1; color: var(--success); }
.badge-failed { background: #ffebe9; color: var(--danger); }
.badge-block-raised { background: #fff8c5; color: var(--warning); }
.badge-block-answered { background: #dafbe1; color: var(--success); }
.badge-progress { background: #dafbe1; color: var(--success); }
.badge-dispatch { background: #ddf4ff; color: #0969da; }
.badge-query { background: #ddf4ff; color: #0969da; }
.badge-shell-reset { background: var(--line-soft); color: var(--ink-muted); }

/* Agent celebrations (`saddle yeehaw`) — the earned 🤠 badge (task
   status-card corner, queue rows, dashboard task references and the
   timeline's own yeehaw kind) plus the task page's festive card. */
.badge-yeehaw { background: #f8e8b8; color: #7d5b00; }

.yeehaw-card {
    background: #fffaf0;
    border: 1px solid #d29922;
    border-left: 4px solid #d29922;
    box-shadow: 0 1px 4px #d2992222;
    margin: var(--grid-2) 0;
}

.yeehaw-card h3 { color: #7d5b00; margin: 0 0 var(--grid-1); }

.yeehaw-list { list-style: none; margin: 0; padding: 0; }

.yeehaw-list li {
    border-bottom: 1px dashed #eacf9a;
    margin: 0;
    padding: var(--grid-1) 0;
}

.yeehaw-list li:last-child { border-bottom: none; }

.yeehaw-message { font-weight: 600; margin-right: var(--grid-1); }

/* The status card's corner badge floats right of its heading. */
.status-corner { float: right; font-size: 0.9rem; }

.muted { color: var(--ink-muted); }
.error { color: var(--danger); }

/* Plan 13 B4: comments read as footnotes — muted and smaller — in the
   goal narrative's comment events, the dashboard timeline's comment
   rows and every comment card. The body is the content; the chrome
   around it stays quiet. */
.footnote { color: var(--ink-muted); font-size: 0.85rem; }

/* ---- Markdown content (stm-markdown) ---- */

.md h1 { font-size: 1.35rem; margin: var(--grid-2) 0 var(--grid-1); }
.md h2 { font-size: 1.2rem; margin: var(--grid-2) 0 var(--grid-1); }
.md h3 { font-size: 1.05rem; margin: var(--grid-2) 0 var(--grid-1); }
.md p, .md ul, .md ol { margin: var(--grid-1) 0; }
.md code {
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 0.85em;
    background: var(--surface-sunken);
    border: 1px solid var(--line-soft);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}
.md pre {
    background: var(--surface-sunken);
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    padding: var(--grid-1) var(--grid-2);
    overflow-x: auto;
}
.md pre code { border: none; padding: 0; background: none; }
.md blockquote {
    border-left: 3px solid var(--line);
    color: var(--ink-muted);
    margin: var(--grid-1) 0;
    padding: 0 var(--grid-2);
}
.md hr { border: none; border-top: 1px solid var(--line); margin: var(--grid-2) 0; }

/* ---- Comments ---- */

/* Footnote treatment (plan 13 B4): the card itself goes muted and
   smaller — the body leads, the quote trails beneath it. */
.comment {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 3px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink-muted);
    font-size: 0.88rem;
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

.comment.agent { border-left-color: var(--accent); }

/* Plan 15 C2: harness/system-authored rows (park/resume bookkeeping,
   abort/requeue/retry notices, session restorations) render as a
   distinct SYSTEM event — labelled, muted, no agent accent or icon;
   never an agent comment row. */
.comment.system {
    background: var(--surface-sunken);
    border-left: 3px dashed var(--line);
    font-size: 0.82rem;
}
.comment.system .system-label {
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink-muted);
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    margin-right: 0.35rem;
    padding: 0.05rem 0.5rem;
    text-transform: uppercase;
}
.comment blockquote {
    border-left: 3px solid var(--line);
    color: var(--ink-muted);
    margin: var(--grid-1) 0;
    padding: 0 var(--grid-2);
    white-space: pre-wrap;
}

/* ---- Blocks (questions, RFCs, reviews) ---- */

.block-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    margin: var(--grid-2) 0;
    padding: var(--grid-2);
}

.block-card.rfc { border-left-color: var(--plan); }
.block-card.review { border-left-color: var(--review); }
.block-card.answered { border-left-color: var(--line); opacity: 0.85; }

.block-card .options { display: flex; flex-direction: column; gap: var(--grid-1); margin: var(--grid-1) 0; }
.block-card .options label { display: flex; gap: var(--grid-1); align-items: baseline; font-weight: normal; }
.block-card textarea { min-height: 4rem; }

/* Clickable option cards: the whole label selects its radio, and a
   checked card highlights (evergreen :has). */
.options .option-card {
    align-items: center;
    display: block;
    margin-bottom: 8px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    cursor: pointer;
    padding: var(--grid-1) var(--grid-2);
}

.options .option-card:hover { border-color: var(--accent); }

.options .option-card:has(input:checked) {
    background: #ddf4ff;
    border-color: #0969da;
}

/* ---- Design-task plan review ---- */

.plan-review .actions { display: flex; gap: var(--grid-1); flex-wrap: wrap; margin: var(--grid-1) 0; }
.plan-review .rfc-body {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    margin: var(--grid-1) 0;
    padding: var(--grid-2);
}

.plan-comments { list-style: none; margin: var(--grid-1) 0; padding: 0; }

.plan-comments li {
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius);
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

.plan-comments blockquote { margin: 0 0 var(--grid-1); }

.plan-popover {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    padding: var(--grid-2);
    position: absolute;
    width: 22rem;
    z-index: 40;
}

.plan-popover .actions { display: flex; gap: var(--grid-1); margin-top: var(--grid-1); }

/* ---- Review banner ---- */

.review-banner {
    background: #fff8eb;
    border: 1px solid var(--review);
    border-radius: var(--radius);
    margin: var(--grid-2) 0;
    padding: var(--grid-2);
}

.review-banner h3 { color: #9a4700; margin: 0 0 var(--grid-1); }
.review-banner .actions { display: flex; gap: var(--grid-1); flex-wrap: wrap; margin-top: var(--grid-1); }

/* ---- Progress ---- */

/* Plan 15 C4: the goal page's card rhythm restored (the goalui
   restyle regression) — every section is a card and the cards
   breathe between themselves. */
.goal-page .card { margin-bottom: var(--grid-2); }
.goal-page .card:last-child { margin-bottom: 0; }

/* Timeless-comment footnote styling (plan 15 C4): the body leads,
   the author/time line reads as a muted footnote under it. */
.comment .comment-meta { margin: var(--grid-1) 0 0; }

.progress-latest {
    background: #dafbe1;
    border: 1px solid var(--success);
    border-radius: var(--radius);
    font-weight: 600;
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

.progress-history li { margin: var(--grid-1) 0; }

/* ---- Terminal ---- */

.terminal {
    background: #0d1117;
    border-radius: var(--radius);
    color: #c9d1d9;
    font-family: ui-monospace, "Cascadia Mono", monospace;
    font-size: 0.85rem;
    max-height: 40rem;
    overflow-y: auto;
    padding: var(--grid-2);
}

.term-entry {
    background: #161b22;
    border: 1px solid #30363d;
    border-radius: 6px;
    margin: var(--grid-1) 0;
    padding: var(--grid-1) var(--grid-2);
}

.term-entry .term-head {
    display: flex;
    align-items: baseline;
    gap: var(--grid-1);
    flex-wrap: wrap;
    color: #8b949e;
    font-size: 0.8rem;
}

.term-entry .term-command {
    color: #79c0ff;
    font-weight: 600;
    white-space: pre-wrap;
    word-break: break-word;
}

.term-entry pre {
    border-radius: 6px;
    margin: var(--grid-1) 0 0;
    padding: var(--grid-1) var(--grid-2);
    white-space: pre-wrap;
    word-break: break-word;
}

.term-entry .term-output {
    background: #0d1117;
    color: #c9d1d9;
    cursor: pointer;
}

.term-entry .term-output.collapsed { max-height: 7.5rem; overflow: hidden; position: relative; }
.term-entry .term-output.collapsed::after {
    content: "… click to expand";
    background: linear-gradient(transparent, #161b22 70%);
    color: #8b949e;
    display: block;
    padding: var(--grid-2) var(--grid-2) var(--grid-1);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

.term-entry .term-input {
    background: #161b22;
    border-left: 3px solid #30363d;
    color: #8b949e;
}

.term-entry .term-input.collapsed { max-height: 7.5rem; overflow: hidden; }

.term-entry.type-query { border-color: #a371f7; }
.term-entry.type-query .term-command { color: #bc8cff; }

.term-entry.type-comment .term-output, .term-entry.type-comment .term-command { color: #8b949e; font-style: italic; }
.term-entry.type-block { border-color: #d29922; }
.term-entry.type-block .term-output { color: #e3b341; }
.term-entry.type-user-comment { border-color: #58a6ff; }
.term-entry.type-user-comment .term-output, .term-entry.type-user-comment .term-command { color: #79c0ff; }
.term-entry.type-progress { border-color: #2ea043; }
.term-entry.type-progress .term-output, .term-entry.type-progress .term-command { color: #56d364; }
.term-entry.type-review { border-color: #e3b341; }
.term-entry.type-review .term-output, .term-entry.type-review .term-command { color: #e3b341; }
.term-entry.type-plan { border-color: #a371f7; }
.term-entry.type-plan .term-output, .term-entry.type-plan .term-command { color: #bc8cff; }
.term-entry.type-shell-reset { border-color: #30363d; opacity: 0.85; }
.term-entry.type-shell-reset .term-head { color: #8b949e; }
.term-entry.type-failed { border-color: var(--danger); }
.term-entry.type-failed .term-output, .term-entry.type-failed .term-command { color: #ff7b72; }

/* ---- Text-selection comment popover ---- */

.quote-popover {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px #0002;
    padding: var(--grid-2);
    position: absolute;
    width: min(26rem, calc(100vw - 3rem));
    z-index: 40;
}

.quote-popover blockquote {
    border-left: 3px solid var(--accent);
    color: var(--ink-muted);
    font-family: ui-monospace, monospace;
    font-size: 0.8rem;
    margin: 0 0 var(--grid-1);
    max-height: 6rem;
    overflow-y: auto;
    padding: 0 var(--grid-1);
    white-space: pre-wrap;
}

.quote-button {
    background: var(--accent);
    border: none;
    border-radius: 6px;
    color: #fff;
    font-size: 0.8rem;
    padding: 0.3rem 0.7rem;
    position: absolute;
    z-index: 41;
}

/* ---- Toasts ---- */

.toast-stack {
    bottom: var(--grid-2);
    display: flex;
    flex-direction: column;
    gap: var(--grid-1);
    max-width: min(24rem, calc(100vw - 3rem));
    position: fixed;
    right: var(--grid-2);
    z-index: 100;
}

.toast {
    animation: toast-in 0.25s ease-out;
    background: var(--surface);
    border-left: 4px solid var(--accent);
    border-radius: 6px;
    box-shadow: 0 4px 16px #0003;
    font-size: 0.9rem;
    padding: var(--grid-1) var(--grid-2);
}

.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }

.toast.leaving { animation: toast-out 0.25s ease-in forwards; }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(1rem); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(1rem); }
}

[hidden] { display: none !important; }

/* Comment dialog */

dialog#quote-comment-dialog {
    border: 1px solid var(--border);
    border-radius: 8px;
    box-shadow: 0 8px 32px #0006;
    max-width: 40rem;
    padding: var(--grid-3);
    width: 90%;
}

dialog#quote-comment-dialog::backdrop {
    background: #0008;
}

dialog#quote-comment-dialog blockquote {
    background: var(--bg-secondary);
    border-left: 3px solid var(--accent);
    font-family: "SF Mono", "Fira Code", Menlo, monospace;
    font-size: 0.85rem;
    margin: 0 0 var(--grid-2);
    max-height: 10rem;
    overflow-y: auto;
    padding: var(--grid-2);
    white-space: pre-wrap;
}

.term-comment-quote {
    color: #4ade80;
    font-style: italic;
}

@media (max-width: 40rem) {
    header { flex-direction: column; gap: var(--grid-1); }
    .cards { grid-template-columns: 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    th, td { padding: 0.4rem 0.5rem; font-size: 0.9rem; }
}

/* Admin role badge (users + profile pages): the plan-family violet the
 * app already reserves for privileged markings. */
.badge-admin {
    background: #f3e8ff;
    color: var(--plan);
}

/* Plan 17: the event log page (task_log.html) — the unified ledger's
   human view. Turn cards group a run's turn-family events; tool
   results collapse behind head+tail summaries with byte counts. */
.log-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: var(--grid-1, 0.5rem);
    align-items: center;
    margin-bottom: var(--grid-1, 0.5rem);
}
.log-toolbar input[type="search"] {
    flex: 1;
    min-width: 12rem;
}
.log-filter.active {
    border-color: var(--ink, currentColor);
    font-weight: 600;
}
.log-more {
    display: block;
    margin: 0 auto var(--grid-1, 0.5rem);
}
.log-feed {
    display: flex;
    flex-direction: column;
    gap: var(--grid-1, 0.5rem);
    max-height: 72vh;
    overflow-y: auto;
    border: 1px solid var(--line-soft, #eee);
    border-radius: 6px;
    padding: var(--grid-1, 0.5rem);
}
.turn-card {
    border: 1px solid var(--line-soft, #eee);
    border-left: 3px solid var(--line, #ccc);
    border-radius: 6px;
    padding: 0.4rem 0.6rem;
}
.turn-head {
    margin: 0 0 0.3rem;
    font-size: 0.85rem;
}
.event-row .event-head {
    margin: 0.2rem 0;
}
.event-pre {
    margin: 0.2rem 0;
    padding: 0.3rem 0.5rem;
    background: var(--line-soft, #f6f8fa);
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.85rem;
    white-space: pre-wrap;
    word-break: break-word;
}
.event-pre.event-stderr {
    color: var(--danger, #cf222e);
}
.event-pre.event-command {
    background: #ddf4ff;
    font-weight: 600;
}
.event-result-body {
    margin-top: 0.3rem;
}
.event-kind-turn_text { background: var(--line-soft, #f0f0f0); color: #6e7781; }
.event-kind-tool_call { background: #ddf4ff; color: #0969da; }
.event-kind-tool_result { background: var(--line-soft, #f0f0f0); color: #6e7781; }
.event-kind-progress { background: #dafbe1; color: var(--success, #1a7f37); }
.event-kind-comment { background: #f0f0f0; color: #6e7781; }
.event-kind-answer { background: #ddf4ff; color: #0969da; }
.event-kind-verdict { background: #fff1e0; color: #9a4700; }
.event-kind-state_change { background: #fff8c5; color: var(--warning, #9a6700); }
.event-kind-lifecycle { background: #f3e8ff; color: var(--plan, #8250df); }
.event-kind-usage { background: var(--line-soft, #f0f0f0); color: #6e7781; }
.event-kind-force_wake { background: #fff8c5; color: var(--warning, #9a6700); }
.event-kind-cancel { background: #ffebe9; color: var(--danger, #cf222e); }