/* ---------- typography helpers ---------- */
.h1 { font-size: var(--fs-h1); font-weight: 600; color: var(--c-brand); letter-spacing: -0.01em; line-height: 1.2; margin: 0; }
.h2 { font-size: var(--fs-h2); font-weight: 600; color: var(--c-text); margin: 0; }
.label { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-3); }
.meta { font-size: var(--fs-meta); color: var(--c-text-3); }
.muted { color: var(--c-text-2); }

/* ---------- layout ---------- */
.page { max-width: var(--max-w-page); margin: 0 auto; padding: 0 var(--sp-5); }
.column-narrow { max-width: var(--max-w-case); margin: 0 auto; }

.app-shell { min-height: 100vh; display: flex; flex-direction: column; background: var(--c-bg); }
.app-main { flex: 1; padding: var(--sp-5) 0 var(--sp-8); }

.three-pane { display: grid; gap: var(--sp-5); grid-template-columns: 220px minmax(0, 1fr) 280px; align-items: start; }
.three-pane > * { min-width: 0; }
@media (max-width: 1100px) {
  .three-pane { grid-template-columns: 1fr; }
  .three-pane .rail { display: none; }
}

/* ---------- header ---------- */
.app-header { background: var(--c-surface); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 20; }
.app-header-inner { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); }
.brand { font-weight: 700; color: var(--c-brand); letter-spacing: -0.01em; font-size: var(--fs-h2); }
.brand-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-dot); background: var(--c-brand); margin-right: var(--sp-2); vertical-align: middle; }
.header-search { flex: 1; max-width: 420px; }
.header-search .input { height: 32px; }
.header-spacer { flex: 0 0 var(--sp-2); }
.header-actions { display: flex; align-items: center; gap: var(--sp-2); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; gap: var(--sp-2); height: 32px; padding: 0 12px; border-radius: var(--r-2); font-size: var(--fs-meta); font-weight: 600; line-height: 1; cursor: pointer; background: var(--c-surface); color: var(--c-text); border: 1px solid var(--c-border); transition: background 0.08s, border-color 0.08s; }
.btn:hover { background: var(--c-surface-2); border-color: var(--c-border-2); }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }
.btn-primary { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.btn-primary:hover { background: var(--c-accent-2); color: #fff; border-color: var(--c-accent-2); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); border-color: transparent; }
.btn-danger { color: var(--c-status-fail); border-color: var(--c-status-fail-tint); background: var(--c-status-fail-tint); }
.btn-danger:hover { background: var(--c-status-fail); color: #fff; border-color: var(--c-status-fail); }
.btn-sm { height: 28px; padding: 0 10px; font-size: var(--fs-micro); }
.kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: var(--r-2); background: var(--c-surface-2); color: var(--c-text-2); border: 1px solid var(--c-border); }

/* ---------- forms ---------- */
.field { display: block; margin-bottom: var(--sp-4); }
.field-label { display: block; font-size: var(--fs-meta); font-weight: 600; color: var(--c-text); margin-bottom: var(--sp-1); }
.field-hint { display: block; font-size: var(--fs-micro); color: var(--c-text-3); margin-top: var(--sp-1); }
.input, .select { width: 100%; height: 32px; font: inherit; padding: 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); }
.textarea { width: 100%; font: inherit; padding: 8px 10px; border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface); color: var(--c-text); min-height: 96px; resize: vertical; line-height: 1.5; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--c-accent); box-shadow: var(--ring); outline: none; }

/* ---------- card / row ---------- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); box-shadow: var(--shadow-1); padding: var(--sp-4); }
.card-tight { padding: var(--sp-3); }

.rows { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); overflow: hidden; }
.row { display: grid; align-items: center; gap: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--c-border); border-left: 3px solid transparent; min-width: 0; }
.row > * { min-width: 0; }
.row:first-child { border-top: none; }
.row:hover { background: var(--c-surface-2); }
.row-active { grid-template-columns: minmax(0, 1fr) minmax(0, 200px) max-content max-content; }
.row-completed { grid-template-columns: 110px 140px minmax(0, 1fr) max-content; }

.row[data-status="run"] { border-left-color: var(--c-status-run); }
.row[data-status="stale"] { border-left-color: var(--c-status-stale); }
.row[data-status="fail"] { border-left-color: var(--c-status-fail); }
.row[data-status="done"] { border-left-color: var(--c-status-done); }
.row[data-status="write"] { border-left-color: var(--c-status-write); }

.row-title { display: block; font-weight: 600; color: var(--c-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-title:hover { color: var(--c-accent); }
.row-sub { display: flex; align-items: center; gap: var(--sp-2); margin-top: 2px; overflow: hidden; flex-wrap: nowrap; }
.row-sub > * { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex-shrink: 0; }
.row-sub > .row-sub-grow { flex-shrink: 1; min-width: 40px; }
.row-status { display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.row-elapsed { text-align: right; white-space: nowrap; }
.row-persona { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.row-persona .persona { min-width: 0; }
.row-persona .persona span:not(.persona-dot) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.case-card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--sp-4); border-left: 3px solid var(--c-border); box-shadow: var(--shadow-1); }
.case-card[data-status="run"] { border-left-color: var(--c-status-run); }
.case-card[data-status="stale"] { border-left-color: var(--c-status-stale); }
.case-card[data-status="fail"] { border-left-color: var(--c-status-fail); }
.case-card[data-status="done"] { border-left-color: var(--c-status-done); }
.case-card[data-status="write"] { border-left-color: var(--c-status-write); }
.case-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

/* ---------- pills / chips / dots ---------- */
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 600; line-height: 1.5; background: var(--c-surface); color: var(--c-text-2); border: 1px solid var(--c-border); white-space: nowrap; }
.pill[data-status="run"] { color: #047857; border-color: var(--c-status-run); background: var(--c-status-run-tint); }
.pill[data-status="stale"] { color: #92400E; border-color: var(--c-status-stale); background: var(--c-status-stale-tint); }
.pill[data-status="fail"] { color: #991B1B; border-color: var(--c-status-fail); background: var(--c-status-fail-tint); }
.pill[data-status="done"] { color: #334155; border-color: var(--c-status-done); background: var(--c-status-done-tint); }
.pill[data-status="write"] { color: #6B21A8; border-color: var(--c-status-write); background: var(--c-status-write-tint); }

.chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; border-radius: var(--r-full); font-size: 11px; font-weight: 500; color: var(--c-text-2); background: var(--c-surface-2); border: 1px solid transparent; line-height: 1.5; }
.chip[data-active="1"] { background: var(--c-accent-tint); color: var(--c-accent-2); border-color: var(--c-accent); }
.chip-button { cursor: pointer; }
.chip-button:hover { background: var(--c-surface-3); }

.dot { display: inline-block; width: 7px; height: 7px; border-radius: var(--r-dot); background: var(--c-text-3); flex-shrink: 0; }
.dot[data-status="run"] { background: var(--c-status-run); box-shadow: 0 0 0 3px var(--c-status-run-tint); }
.dot[data-status="stale"] { background: var(--c-status-stale); box-shadow: 0 0 0 3px var(--c-status-stale-tint); }
.dot[data-status="fail"] { background: var(--c-status-fail); box-shadow: 0 0 0 3px var(--c-status-fail-tint); }
.dot[data-status="done"] { background: var(--c-status-done); }

/* ---------- persona ---------- */
.persona { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-meta); }
.persona-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--r-dot); background: var(--c-persona-default); flex-shrink: 0; }
.persona[data-key="chair"] .persona-dot { background: var(--c-persona-chair); }
.persona[data-key="shipper"] .persona-dot { background: var(--c-persona-shipper); }
.persona[data-key="product-counsel"] .persona-dot,
.persona[data-key="product_counsel"] .persona-dot { background: var(--c-persona-product-counsel); }
.persona[data-key="word-architect"] .persona-dot,
.persona[data-key="word_architect"] .persona-dot { background: var(--c-persona-word-architect); }
.persona[data-key="evals-judge"] .persona-dot,
.persona[data-key="evals_judge"] .persona-dot { background: var(--c-persona-evals-judge); }
.persona[data-key="langfuse-nerd"] .persona-dot,
.persona[data-key="langfuse_nerd"] .persona-dot { background: var(--c-persona-langfuse-nerd); }

/* ---------- rails ---------- */
.rail { display: flex; flex-direction: column; gap: var(--sp-2); }
.rail-section { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--sp-3); }
.rail-heading { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-3); margin: 0 0 var(--sp-2); }
.rail-list { display: flex; flex-direction: column; gap: 2px; }
.rail-link { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; border-radius: var(--r-1); font-size: var(--fs-meta); color: var(--c-text-2); cursor: pointer; border: 1px solid transparent; background: transparent; }
.rail-link:hover { background: var(--c-surface-2); color: var(--c-text); }
.rail-link[aria-current="true"] { background: var(--c-accent-tint); color: var(--c-accent-2); border-color: var(--c-accent); font-weight: 600; }
.rail-count { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-3); }
.rail-link[aria-current="true"] .rail-count { color: var(--c-accent-2); }

/* ---------- attention strip ---------- */
.attention-strip { background: var(--c-status-stale-tint); border: 1px solid var(--c-status-stale); border-radius: var(--r-2); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.attention-strip[data-tone="fail"] { background: var(--c-status-fail-tint); border-color: var(--c-status-fail); }
.attention-strip-label { font-weight: 600; color: var(--c-text); }

/* ---------- toolbar ---------- */
.toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.toolbar-spacer { flex: 1; }
.toolbar-group { display: inline-flex; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); overflow: hidden; }
.toolbar-group .btn { border: none; border-radius: 0; height: 30px; }
.toolbar-group .btn[aria-pressed="true"] { background: var(--c-accent-tint); color: var(--c-accent-2); }

/* ---------- composer ---------- */
.composer { position: sticky; bottom: 0; background: var(--c-bg); padding: var(--sp-3) 0; margin-top: var(--sp-4); }
.composer-form { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--sp-2); display: flex; flex-direction: column; gap: var(--sp-2); transition: border-color 0.08s, box-shadow 0.08s; }
.composer-form:focus-within { border-color: var(--c-accent); box-shadow: var(--ring); }
.composer-input { width: 100%; border: none; background: transparent; padding: 6px 8px; min-height: 64px; max-height: 240px; resize: none; font: inherit; color: var(--c-text); line-height: 1.5; }
.composer-input:focus { outline: none; box-shadow: none; }
.composer-actions { display: flex; justify-content: flex-end; align-items: center; gap: var(--sp-2); }
.composer-hint { color: var(--c-text-3); font-size: var(--fs-micro); margin-right: auto; padding-left: var(--sp-2); }

/* ---------- toasts ---------- */
.toast-stack { position: fixed; bottom: var(--sp-4); right: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-2); z-index: 50; max-width: 360px; }
.toast { background: var(--c-surface); border: 1px solid var(--c-border); border-left: 3px solid var(--c-text-2); border-radius: var(--r-2); padding: var(--sp-3); box-shadow: var(--shadow-2); font-size: var(--fs-meta); display: flex; gap: var(--sp-2); align-items: flex-start; }
.toast[data-tone="stale"] { border-left-color: var(--c-status-stale); }
.toast[data-tone="fail"] { border-left-color: var(--c-status-fail); }
.toast[data-tone="write"] { border-left-color: var(--c-status-write); }
.toast-title { font-weight: 600; color: var(--c-text); }
.toast-body { color: var(--c-text-2); margin-top: 2px; }
.toast-close { background: transparent; border: none; color: var(--c-text-3); cursor: pointer; padding: 0; font-size: 16px; line-height: 1; }

/* ---------- pagination ---------- */
.pagination { display: flex; align-items: center; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-3); }
.pagination .btn[aria-disabled="true"] { pointer-events: none; opacity: 0.5; }

/* ---------- permission options ---------- */
.permission-option { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-2); cursor: pointer; background: var(--c-surface); }
.permission-option input[type="radio"] { margin: 2px 0 0; align-self: start; justify-self: center; width: 16px; height: 16px; }
.permission-option strong { display: block; color: var(--c-text); }
.permission-option p { margin: 2px 0 0; color: var(--c-text-2); font-size: var(--fs-meta); }
.permission-option[data-active="true"] { border-color: var(--c-status-write); background: var(--c-status-write-tint); }

/* ---------- empty state ---------- */
.empty { background: var(--c-surface); border: 1px dashed var(--c-border-2); border-radius: var(--r-2); padding: var(--sp-6); text-align: center; color: var(--c-text-2); }
.empty h3 { font-size: var(--fs-h2); margin: 0 0 var(--sp-2); color: var(--c-text); }
.empty p { margin: 0 0 var(--sp-3); }

/* ---------- evidence + artifacts ---------- */
.evidence-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.evidence-item { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--sp-3); padding: var(--sp-2) 0; border-top: 1px solid var(--c-border); align-items: baseline; }
.evidence-item:first-child { border-top: none; }
.evidence-kind { font-size: var(--fs-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-text-3); }
.evidence-value { font-size: var(--fs-meta); color: var(--c-text); word-break: break-word; }
.evidence-value code { font-family: var(--font-mono); font-size: 12px; background: var(--c-surface-2); padding: 1px 5px; border-radius: var(--r-2); }

.artifact-tree { font-family: var(--font-mono); font-size: 12px; line-height: 1.65; }
.artifact-tree li { padding: 2px 0; }
.artifact-tree button { background: none; border: none; color: var(--c-accent); padding: 0; cursor: pointer; font: inherit; }
.artifact-tree button:hover { text-decoration: underline; }
.artifact-preview { margin-top: var(--sp-3); border: 1px solid var(--c-border); border-radius: var(--r-2); background: var(--c-surface-2); padding: var(--sp-3); }
.artifact-preview pre { font-family: var(--font-mono); font-size: 12px; line-height: 1.55; margin: 0; white-space: pre-wrap; word-break: break-word; }

/* ---------- run tail ---------- */
.run-tail { background: #0F1722; color: #D1D5DB; border-radius: var(--r-2); padding: var(--sp-3); font-family: var(--font-mono); font-size: 12px; line-height: 1.55; max-height: 480px; overflow-y: auto; }
.run-tail pre { margin: 0; white-space: pre-wrap; word-break: break-word; }
.run-tail-toolbar { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-2); align-items: center; }

/* ---------- conversation ---------- */
.thread { display: flex; flex-direction: column; gap: var(--sp-3); }
.message { display: flex; gap: var(--sp-3); align-items: flex-start; }
.message-from-user { flex-direction: row-reverse; }
.message-avatar { width: 32px; height: 32px; border-radius: var(--r-2); flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 14px; color: #fff; background: var(--c-persona-default); }
.message-body { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-2); padding: var(--sp-3); flex: 1; min-width: 0; }
.message-from-user .message-body { background: var(--c-accent-tint); border-color: var(--c-accent); }
.message-header { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); margin-bottom: var(--sp-2); }
.message-author { font-weight: 600; color: var(--c-text); font-size: var(--fs-meta); }
.message-time { font-family: var(--font-mono); font-size: 11px; color: var(--c-text-3); }
.message-content { font-size: var(--fs-body); line-height: 1.6; color: var(--c-text); }
.message-content p { margin: 0 0 var(--sp-2); }
.message-content p:last-child { margin-bottom: 0; }
.message-content code { font-family: var(--font-mono); font-size: 13px; background: var(--c-surface-2); padding: 1px 4px; border-radius: var(--r-2); }
.message-content pre { background: var(--c-surface-2); padding: var(--sp-2); border-radius: var(--r-1); overflow-x: auto; font-family: var(--font-mono); font-size: 12px; }
.message-content a { word-break: break-word; }

/* ---------- alpine cloak / search hide ---------- */
[x-cloak] { display: none !important; }
.is-hidden { display: none !important; }