/* ============================================================================
   Nixxia Lore Studio — app component layer.
   Built entirely on the css-design token foundation (tokens.css/base.css):
   components own structure; the design tokens own the wash.
   Palette: dark slate-blue. Headings: Beleren (from base.css). Accent: ember.
   ========================================================================== */

/* ── Shell ─────────────────────────────────────────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 12px 24px; min-height: var(--topbar-h);
  border-bottom: 1px solid var(--border-color-subtle);
  background: var(--darker-trans);
  backdrop-filter: blur(12px);
}
.brand {
  font-family: 'Beleren', Arial, sans-serif;
  font-weight: 600; font-size: 1.4rem; letter-spacing: 0.05em;
  color: #fff; text-decoration: none;
}
.brand:hover { color: var(--font-highlight); }
.topbar nav { display: flex; gap: 18px; flex-wrap: wrap; }
.topbar nav a {
  color: var(--font-base); text-decoration: none; font-weight: 700;
  font-size: 0.92rem; opacity: 0.9; transition: color var(--transition-base), opacity var(--transition-base);
}
.topbar nav a:hover { color: var(--font-highlight); opacity: 1; }

.content { position: relative; z-index: 1; max-width: none; margin: 0 auto; padding: 28px clamp(20px, 4vw, 64px) 56px; }
/* Long-form prose stays at a readable measure even though the page is wide. */
.output-body, .candidate-content, .field-body, .chunk-text { max-width: 80ch; }

.footer {
  border-top: 1px solid var(--border-color-subtle);
  padding: 1.2rem 1.6rem; color: var(--font-base-trans);
  font-size: 0.82rem; text-align: center; text-transform: uppercase; letter-spacing: 0.06em;
}

/* ── Typography helpers ────────────────────────────────────────────────── */
.content h1 { font-size: 1.9rem; margin-bottom: 0.5rem; }
.content h2 { font-size: 1.2rem; margin: 1.6rem 0 0.7rem; }
.content h3 { font-size: 1rem; margin: 1rem 0 0.5rem; }
.lede { font-size: 1.08rem; color: var(--font-base); margin-bottom: 1rem; max-width: 70ch; }
.note { color: var(--font-base-trans); font-size: 0.92rem; }
.summary { color: var(--font-base); font-style: italic; border-left: 2px solid var(--font-highlight); padding-left: 0.85rem; }
.subtype { color: var(--font-base-trans); font-size: 0.85rem; }
.native { color: var(--font-base-trans); font-weight: normal; font-size: 0.8em; }
.empty { color: var(--font-base-trans); }
.crumb { color: var(--font-base-trans); font-size: 0.85rem; margin-bottom: 0.3rem; }
.crumb a { color: var(--font-accent); text-decoration: none; }
.crumb a:hover { color: #fff; }
.grp-count { color: var(--font-base-trans); font-size: 0.8rem; font-weight: normal; }
.path, .path-line code, .mono {
  color: var(--font-base-trans); font-size: 0.78rem;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.path { margin-left: auto; }
.when { color: var(--font-base-trans); font-size: 0.8rem; }
code {
  background: rgba(255,255,255,0.05); color: var(--font-accent);
  padding: 0.05rem 0.35rem; border-radius: 6px; font-size: 0.9em;
}
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.meta { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.3rem 0 0.7rem; }
.p-avatar {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; object-fit: cover;
  vertical-align: middle; margin-right: 0.45rem;
}

/* ── Login gate ────────────────────────────────────────────────────────── */
.login-page { display: flex; justify-content: center; }
.login-panel {
  width: min(28rem, 100%);
  margin: 2rem auto 0;
  padding: 1.4rem 1.5rem 1.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(circle at 12% 0%, rgba(70,84,147,0.22), transparent 50%),
    linear-gradient(160deg, rgba(22,45,61,0.55), rgba(23,26,38,0.94));
  box-shadow: var(--shadow-md);
}
.login-form label { display: block; margin: 1rem 0 0.4rem; font-weight: 700; }
.login-form input[type="password"] { width: 100%; margin-top: 0.35rem; }
.login-form .form-actions { margin-top: 1.2rem; }

/* ── Hero (index) ──────────────────────────────────────────────────────── */
.hero { padding: 0.5rem 0; }
.placeholder-flow {
  margin: 1.6rem 0; padding: 0.9rem 1.1rem;
  background:
    radial-gradient(circle at 18% 20%, rgba(70,84,147,0.20), transparent 45%),
    linear-gradient(135deg, rgba(22,45,61,0.50), rgba(23,26,38,0.92));
  border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  color: var(--font-highlight); letter-spacing: 0.02em; font-weight: 700;
  box-shadow: var(--shadow-md);
}
.ghost-link { color: var(--font-accent); text-decoration: none; }
.ghost-link:hover { color: #fff; }

/* ── Buttons ───────────────────────────────────────────────────────────── */
.btn {
  display: inline-block; padding: 10px 18px;
  background: var(--font-base); color: var(--darkest);
  border: 1px solid transparent; border-radius: var(--radius-md);
  font-weight: 800; text-decoration: none; cursor: pointer; font-size: 0.92rem;
  box-shadow: 0 0 14px rgba(143,153,197,0.18);
  transition: transform var(--transition-fast), filter var(--transition-fast), background var(--transition-fast);
}
.btn:hover { background: #a0b0d0; color: var(--darkest); }
.btn:active:not(:disabled) { transform: scale(0.96); filter: brightness(0.9); }
.btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; box-shadow: none; }
.btn-small {
  display: inline-block; padding: 7px 14px; background: var(--font-base); color: var(--darkest);
  border: none; border-radius: var(--radius-md); font-weight: 800; text-decoration: none;
  cursor: pointer; font-size: 0.82rem; transition: filter var(--transition-fast);
}
.btn-small:hover { filter: brightness(1.08); }
.btn-ghost {
  color: var(--font-base-trans); text-decoration: none; margin-left: 0.8rem; font-weight: 700;
}
.btn-ghost:hover { color: #fff; }

/* ── Flash / toast ─────────────────────────────────────────────────────── */
.flashes { margin-bottom: 1.2rem; }
.flash {
  padding: 0.65rem 0.95rem; border-radius: var(--radius-md); margin-bottom: 0.5rem;
  border: 1px solid var(--border-color); background: var(--darker); font-weight: 600;
}
.flash-ok { border-color: rgba(58,107,84,0.55); background: rgba(58,107,84,0.18); color: #8fd0a8; }
.flash-error { border-color: rgba(166,50,50,0.5); background: var(--red-trans); color: var(--font-danger); }

/* ── Panels / cards ────────────────────────────────────────────────────── */
.panel {
  background: rgba(23,26,38,0.55); background-color: var(--darker);
  border: 1px solid var(--border-color); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md); padding: 1rem 1.15rem;
}
.panel h2 { margin-top: 0; }
.panels, .mission-cols, .region-cols { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.panels .panel { flex: 1 1 220px; }
.mission-cols .panel, .region-cols .panel { flex: 1 1 320px; }
.bars { list-style: none; padding: 0; margin: 0; }
.bars li {
  display: flex; justify-content: space-between; gap: 0.5rem; padding: 0.32rem 0;
  border-bottom: 1px solid var(--border-color-subtle); font-size: 0.92rem;
}
.bars li:last-child { border-bottom: none; }
.bars .n { color: var(--font-highlight); font-variant-numeric: tabular-nums; }

/* ── Stat cards ────────────────────────────────────────────────────────── */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px,1fr)); gap: 12px; margin: 1.4rem 0; }
.stat {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 14px; text-align: center;
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}
.stat:hover { transform: translateY(-4px); box-shadow: 0 0 20px rgba(143,153,197,0.3); }
.stat .num { display: block; font-size: 1.7rem; font-weight: 800; color: #fff; }
.stat .lbl { color: var(--font-base-trans); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.05em; }

/* ── Authority lane tags (semantic palette) ────────────────────────────── */
.auth {
  display: inline-block; font-size: 0.66rem; font-weight: 800; padding: 0.1rem 0.5rem;
  border-radius: 999px; border: 1px solid var(--border-color-subtle);
  color: var(--font-base-trans); letter-spacing: 0.05em; text-transform: uppercase;
}
.auth-canon_json, .auth-canon_markdown { color: #7fc99a; border-color: rgba(58,107,84,0.5); background: rgba(58,107,84,0.16); }
.auth-map_spatial { color: #79b6e6; border-color: rgba(30,58,95,0.6); background: rgba(30,58,95,0.28); }
.auth-writing { color: #e8c75f; border-color: rgba(242,201,76,0.4); background: rgba(242,201,76,0.12); }
.auth-draft, .auth-candidate, .auth-unknown { color: var(--font-highlight); border-color: rgba(229,92,54,0.4); background: rgba(229,92,54,0.14); }

/* ── Search ────────────────────────────────────────────────────────────── */
.searchbar { display: flex; gap: 0.5rem; margin: 1.4rem 0; }
.searchbar input[type="search"] {
  flex: 1; min-height: 44px; padding: 0.6rem 0.9rem; font-size: 0.95rem;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color);
  border-radius: 999px; color: var(--font-base);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}
.searchbar input[type="search"]::placeholder { color: var(--font-base-trans); }
.searchbar input[type="search"]:focus {
  outline: none; border-color: rgba(143,153,197,0.55); background: rgba(255,255,255,0.06);
  box-shadow: 0 0 0 3px rgba(143,153,197,0.12); color: #fff;
}
.searchbar button {
  padding: 0 1.3rem; border-radius: 999px; border: none; cursor: pointer;
  background: var(--font-base); color: var(--darkest); font-weight: 800; font-size: 0.92rem;
}
.searchbar button:hover { background: #a0b0d0; }

/* ── Result / context lists ────────────────────────────────────────────── */
.result-count { color: var(--font-base-trans); }
.hits, .ctx-list { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.hits li, .ctx-list li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0; border-bottom: 1px solid var(--border-color-subtle);
}
.hits a, .hits .ttl, .ctx-list a, .ctx-list .ttl {
  color: var(--font-base); text-decoration: none; font-weight: 700;
}
.hits a:hover, .ctx-list a:hover { color: var(--font-highlight); }
.ctx-list.excluded .ttl { color: var(--font-base-trans); }

/* ── Detail pages ──────────────────────────────────────────────────────── */
.entity-link, .packet-link, .run-link { color: var(--font-accent); text-decoration: none; }
.entity-link:hover, .packet-link:hover, .run-link:hover { color: #fff; }
.run-link { font-size: 0.78rem; font-weight: 700; margin-left: 0.5rem; }
.chunk { margin: 0.8rem 0; }
.chunk h3 { margin: 0.4rem 0; color: var(--font-highlight); }
.chunk-text, .json, .packet-body {
  white-space: pre-wrap; word-break: break-word;
  background: var(--darkest); border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md); padding: 0.85rem; font-size: 0.85rem;
  font-family: ui-monospace, Menlo, monospace; color: var(--font-base);
}
.chunk-text { font-family: inherit; }
.chunk-meta { color: var(--font-base-trans); font-size: 0.75rem; }
.packet-body { max-height: 540px; overflow: auto; }

/* ── Health ────────────────────────────────────────────────────────────── */
.overall { font-weight: 700; padding: 0.5rem 0; }
.overall.ok { color: #7fc99a; }
.overall.warn { color: var(--font-warning); }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: 0.35rem 0 0.35rem 1.5rem; position: relative; }
.checklist li::before { position: absolute; left: 0; }
.checklist li.ok::before { content: "✓"; color: #7fc99a; }
.checklist li.bad::before { content: "✗"; color: var(--font-danger); }
table.sources { width: 100%; border-collapse: collapse; margin-top: 0.5rem; }
table.sources th, table.sources td {
  text-align: left; padding: 0.45rem 0.6rem; border-bottom: 1px solid var(--border-color-subtle);
  font-size: 0.9rem;
}
table.sources thead th { color: #fff; text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.05em; }
table.sources tr.ok td:nth-child(2) { color: #7fc99a; }
table.sources tr.bad td:nth-child(2) { color: var(--font-danger); }

/* ── Forms ─────────────────────────────────────────────────────────────── */
/* Element-level default wash for every control (chat roster, composer,
   trays, banners…). Scoped form rules below override on specificity. */
input, select, textarea {
  background: var(--darker); border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md); color: var(--font-base);
  padding: 0.35rem 0.55rem; font-family: inherit;
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--font-base);
  box-shadow: 0 0 0 0.15rem rgba(143,153,197,0.22);
}
input::placeholder, textarea::placeholder { color: var(--font-base-trans); }
select option { background: var(--darker); color: var(--font-base); }
select option:disabled { color: var(--font-base-trans); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--font-highlight); }

.pform { display: flex; flex-direction: column; gap: 0.9rem; max-width: 640px; margin-top: 1rem; }
.pform label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--font-base-trans); }
.pform input[type="text"], .pform input[type="search"], .pform textarea, .pform select,
.decision-form select, .decision-form input, .status-form select, .run-form select {
  background: var(--darker); border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md); color: var(--font-base);
  padding: 0.55rem 0.7rem; font-size: 0.95rem; font-family: inherit; min-height: 44px;
}
.pform input:focus, .pform textarea:focus, .pform select:focus,
.decision-form select:focus, .status-form select:focus, .run-form select:focus {
  outline: none; border-color: #fff; box-shadow: 0 0 0 0.2rem rgba(143,153,197,0.22);
}
.pform textarea { resize: vertical; }
.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row label { flex: 1 1 200px; }
.checkbox { flex-direction: row !important; align-items: center; gap: 0.5rem !important; color: var(--font-base); }
.checkbox input { width: auto; min-height: auto; }
.form-actions { display: flex; align-items: center; margin-top: 0.5rem; }

/* ── Personalities ─────────────────────────────────────────────────────── */
.card-list { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.2rem; }
.pcard {
  flex: 1 1 260px; max-width: 360px; background: rgba(23,26,38,0.55); background-color: var(--darker);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 1rem 1.1rem;
  text-decoration: none; color: var(--font-base); box-shadow: var(--shadow-sm);
  transition: transform var(--transition-base), border-color var(--transition-base), box-shadow var(--transition-base);
}
.pcard:hover { transform: translateY(-3px); border-color: var(--border-color-strong); box-shadow: 0 0 20px rgba(143,153,197,0.22); }
.pcard.inactive { opacity: 0.55; }
.pcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.pname { font-weight: 800; color: #fff; }
.prole { color: var(--font-base-trans); font-size: 0.82rem; }
.pdesc { color: var(--font-base); font-size: 0.9rem; margin: 0.5rem 0; }
.ptags { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.tag {
  font-size: 0.7rem; font-weight: 700; padding: 0.1rem 0.55rem; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color-subtle); color: var(--font-base-trans);
}
a.tag { text-decoration: none; }
a.tag:hover { border-color: var(--font-highlight); color: var(--font-highlight); }
.tag-off { background: rgba(229,92,54,0.14); border-color: rgba(229,92,54,0.4); color: var(--font-highlight); }
.field-body { white-space: pre-wrap; }
.constraints { color: #e8c75f; }
.model, .slug { color: var(--font-base-trans); font-size: 0.82rem; }

/* ── Missions / studio ─────────────────────────────────────────────────── */
.mission-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1.2rem; }
.mcard {
  background: rgba(23,26,38,0.55); background-color: var(--darker);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg);
  padding: 0.9rem 1.1rem; text-decoration: none; color: var(--font-base);
  box-shadow: var(--shadow-sm); transition: border-color var(--transition-base), transform var(--transition-base);
}
.mcard:hover { border-color: var(--border-color-strong); transform: translateY(-2px); }
.mcard-head { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.mtitle { font-weight: 800; color: #fff; }
.mreq { color: var(--font-base-trans); font-size: 0.9rem; margin: 0.4rem 0 0.2rem; }
.mregion { color: var(--font-highlight); font-size: 0.8rem; }

/* status badges (lifecycle) */
.status, .decision-badge, .src-badge {
  font-size: 0.68rem; font-weight: 800; padding: 0.12rem 0.6rem; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em; border: 1px solid var(--border-color-subtle);
  color: var(--font-base-trans); white-space: nowrap;
}
.status-draft { background: rgba(255,255,255,0.04); }
.status-context_ready, .status-ready_to_run { color: #79b6e6; border-color: rgba(30,58,95,0.6); background: rgba(30,58,95,0.28); }
.status-running { color: #e8c75f; border-color: rgba(242,201,76,0.4); background: rgba(242,201,76,0.12); }
.status-needs_review, .status-revision_requested { color: var(--font-highlight); border-color: rgba(229,92,54,0.4); background: rgba(229,92,54,0.14); }
.status-candidate, .status-accepted { color: #7fc99a; border-color: rgba(58,107,84,0.5); background: rgba(58,107,84,0.16); }
.status-rejected, .status-archived { color: var(--font-base-trans); }

.scope-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1rem 0; }
.scope-item {
  background: rgba(255,255,255,0.04); border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md); padding: 0.5rem 0.8rem; min-width: 150px;
}
.scope-item .lbl { display: block; color: var(--font-base-trans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.scope-item .val { font-size: 0.92rem; }

.phase-note {
  background: rgba(30,58,95,0.28); border: 1px solid rgba(30,58,95,0.6); color: #9fc8e6;
  padding: 0.6rem 0.95rem; border-radius: var(--radius-md); font-size: 0.9rem;
}

/* ── Stage tracker (mission-specific lifecycle) ────────────────────────── */
.stage-tracker {
  display: flex; flex-wrap: wrap; margin: 1.2rem 0 0.8rem; padding: 0.5rem;
  background: rgba(23,26,38,0.55); background-color: var(--darker);
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.stage { display: flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; position: relative; flex: 1 1 auto; justify-content: center; }
.stage:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 50%; width: 1px; height: 60%; transform: translateY(-50%); background: var(--border-color-subtle); }
.stage-dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid var(--border-color); flex: none; }
.stage-label { font-size: 0.8rem; color: var(--font-base-trans); white-space: nowrap; }
.stage-done .stage-dot { background: var(--green); border-color: var(--green); }
.stage-done .stage-label { color: #7fc99a; }
.stage-current .stage-dot { background: var(--font-highlight); border-color: var(--font-highlight); box-shadow: 0 0 0 3px rgba(229,92,54,0.22); }
.stage-current .stage-label { color: var(--font-highlight); font-weight: 800; }

.next-action {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  background: rgba(30,58,95,0.22); border: 1px solid rgba(30,58,95,0.55);
  border-radius: var(--radius-md); padding: 0.7rem 1rem; margin-bottom: 1.2rem;
}
.na-lbl { display: block; color: #79b6e6; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; }
.na-body { color: #cfe3ef; }
.status-form { display: flex; align-items: center; gap: 0.5rem; }
.status-form label { display: flex; align-items: center; gap: 0.4rem; color: var(--font-base-trans); font-size: 0.82rem; }

.team-pick { list-style: none; padding: 0; margin: 0 0 0.8rem; }
.team-pick li { padding: 0.3rem 0; }
.team-pick .checkbox { gap: 0.5rem !important; }
.team-pick .prole { color: var(--font-base-trans); font-size: 0.8rem; margin-left: auto; }

/* ── Collaboration outputs ─────────────────────────────────────────────── */
.outputs { display: flex; flex-direction: column; gap: 1rem; }
.output-stage h3 { margin: 0.4rem 0; color: var(--font-highlight); }
.output-card {
  background: rgba(255,255,255,0.03); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.8rem 1rem; margin-bottom: 0.6rem;
}
.output-head { display: flex; align-items: center; gap: 0.6rem; font-size: 0.8rem; color: var(--font-base-trans); margin-bottom: 0.4rem; }
.output-head .who { font-weight: 800; color: #fff; }
.inline-del { margin-left: auto; }
.inline-del .x { background: none; border: none; color: var(--font-danger); font-size: 1.1rem; cursor: pointer; line-height: 1; padding: 0 0.3rem; }
.output-body { white-space: pre-wrap; line-height: 1.55; color: var(--font-base); }
/* Markdown-rendered agent text (headings, lists) — same pipeline as chat. */
.output-body.markdown-body { white-space: normal; }
.output-error { border-color: rgba(166,50,50,0.5); }
.err-body { color: var(--font-danger); font-family: ui-monospace, Menlo, monospace; font-size: 0.85rem; }
.src-badge.agent { color: #79b6e6; border-color: rgba(30,58,95,0.6); background: rgba(30,58,95,0.28); }
.src-badge.manual { color: var(--font-base-trans); background: rgba(255,255,255,0.04); }
.src-badge.err { color: var(--font-highlight); border-color: rgba(229,92,54,0.4); background: rgba(229,92,54,0.14); }
.src-badge.running { color: var(--font-warning); border-color: rgba(214,168,74,0.45); background: rgba(214,168,74,0.14); }
.output-running { border-color: rgba(214,168,74,0.4); }
.running-body { display: flex; align-items: center; gap: 0.6rem; color: var(--font-base-trans); font-style: italic; }
.spinner { width: 0.9rem; height: 0.9rem; border-radius: 50%; flex: none;
  border: 2px solid var(--border-color-strong); border-top-color: var(--font-highlight);
  animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.add-output { margin: 1rem 0 1.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.5rem 0.9rem; background: var(--darker); }
.add-output summary { cursor: pointer; color: var(--font-accent); font-weight: 800; }
.add-output .pform { margin-top: 0.8rem; }
.promote-form { margin-top: 0.7rem; }

.decision-form { background: var(--darker); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.9rem 1.1rem; max-width: 640px; }
.decision-form select, .decision-form input { width: 100%; }
.decision-note { color: #e8c75f; font-size: 0.88rem; margin-top: 0; }
.decision-log { list-style: none; padding: 0; margin: 0 0 1rem; }
.decision-log li { display: flex; align-items: center; gap: 0.7rem; padding: 0.4rem 0; border-bottom: 1px solid var(--border-color-subtle); }
.decision-badge { color: #7fc99a; border-color: rgba(58,107,84,0.5); background: rgba(58,107,84,0.16); }
.dnote { color: var(--font-base-trans); font-size: 0.88rem; }

/* ── Context packet ────────────────────────────────────────────────────── */
.auth-row { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.7rem; }
.gap-list { padding-left: 1.1rem; }
.gap-list li { padding: 0.25rem 0; color: #e8c75f; font-size: 0.9rem; }

/* ── Candidates ────────────────────────────────────────────────────────── */
.canon-warning { background: rgba(229,92,54,0.12); border: 1px solid rgba(229,92,54,0.4); color: var(--font-highlight); padding: 0.7rem 1rem; border-radius: var(--radius-md); margin: 0.8rem 0; }
.export-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin: 1rem 0; }
.candidate-content { background: var(--darker); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.2rem; line-height: 1.6; white-space: pre-wrap; color: var(--font-base); }
/* Markdown-rendered candidate prose (headings, tables, lists) — same pipeline as chat. */
.candidate-content.markdown-body { white-space: normal; max-width: none; }
.candidate-content.candidate-json {
  white-space: pre;
  overflow: auto;
  max-height: 70vh;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.85rem;
  line-height: 1.45;
}
.candidate-detail .markdown-body table { display: block; overflow-x: auto; max-width: 100%; }
.candidate-detail .markdown-body h1:first-child { margin-top: 0; }

/* ── Agent run confirmation ────────────────────────────────────────────── */
.run-summary { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 1.2rem 0; }
.rs-item { background: rgba(255,255,255,0.04); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 0.6rem 0.9rem; min-width: 180px; flex: 1 1 180px; }
.rs-item .lbl { display: block; color: var(--font-base-trans); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; }
.rs-item .val { font-size: 0.95rem; color: #fff; }
.rs-item .val.mono { color: var(--font-base-trans); }
.run-blocked { background: rgba(229,92,54,0.12); border: 1px solid rgba(229,92,54,0.4); color: var(--font-highlight); padding: 0.8rem 1rem; border-radius: var(--radius-md); margin: 1rem 0; }
.run-form { background: var(--darker); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.1rem; max-width: 640px; }
.run-form select { width: 100%; }
.run-form .form-actions { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.run-form .btn[disabled] { opacity: 0.65; cursor: progress; }
.run-status { color: var(--font-highlight); font-size: 0.9rem; }
.run-form.is-running select, .run-form.is-running .btn-ghost { opacity: 0.6; pointer-events: none; }
.prompt-peek { margin-top: 1rem; color: var(--font-base-trans); }
.prompt-peek summary { cursor: pointer; color: var(--font-accent); }

/* ── Map ───────────────────────────────────────────────────────────────── */
.geo-layout { display: flex; gap: 1.2rem; align-items: flex-start; flex-wrap: wrap; }
/* Map page breaks out of the 980px reading column to use the full page width. */
.content--wide { max-width: none; }
.nixxia-map {
  flex: 1 1 460px; height: 72vh; min-height: 480px; min-width: 320px;
  background: var(--darkest); border: 1px solid var(--border-color); border-radius: var(--radius-lg);
}
.leaflet-container { background: var(--darkest); border-radius: var(--radius-lg); font: inherit; }
.region-list { flex: 0 0 280px; height: 72vh; min-height: 480px; overflow: auto; }
.region-index { list-style: none; padding: 0; margin: 0 0 1rem; }
.region-index li { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.3rem 0; border-bottom: 1px solid var(--border-color-subtle); }
.region-index a { color: var(--font-base); text-decoration: none; font-weight: 700; }
.region-index a:hover { color: var(--font-highlight); }
.map-pop a { color: var(--darkest); font-weight: 800; text-decoration: none; }
.map-legend {
  background: var(--darkest); color: var(--font-base);
  padding: 0.5rem 0.6rem; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  font-size: 0.72rem; line-height: 1.5; opacity: 0.92; max-width: 180px;
}
.map-legend strong { display: block; margin-bottom: 0.25rem; font-size: 0.78rem; }
.map-legend .lg-row { display: flex; align-items: center; gap: 0.4rem; }
.map-legend i { width: 12px; height: 12px; border-radius: 2px; flex: 0 0 12px; border: 1px solid #0003; }
.kind-badge {
  display: inline-block; font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.04em; padding: 0.05rem 0.4rem; border-radius: 999px; vertical-align: middle;
  border: 1px solid var(--border-color); color: var(--font-base);
}
.kind-badge.kind-continent { background: #4a6b3a; color: #eef6e6; border-color: #3a5630; }
.kind-badge.kind-island { background: #2f5468; color: #e6f1f6; border-color: #244353; }
.map-scale {
  background: var(--darkest); color: var(--font-base); opacity: 0.92;
  border: 1px solid var(--border-color); border-top: none;
  border-bottom-width: 3px; border-bottom-color: var(--font-base);
  padding: 1px 4px; font-size: 0.68rem; text-align: center; min-width: 32px;
}

/* ── Timeline ──────────────────────────────────────────────────────────── */
.timeline .age {
  margin: 1.6rem 0; padding: 1rem 1.25rem;
  border: 1px solid var(--border-color-subtle); border-radius: var(--radius-lg);
  background: var(--darker-trans);
}
.timeline .age-head { border-bottom: 1px solid var(--border-color-subtle); padding-bottom: 0.6rem; margin-bottom: 0.85rem; }
.timeline .age-head h2 { margin: 0; }
.timeline .age-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline; margin: 0.25rem 0 0; }
.timeline .age-sub { color: var(--font-base); font-style: italic; }
.timeline .age-span { color: var(--font-base-trans); font-size: 0.85rem; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* events: a year gutter + a connecting rail */
.timeline ol.events { list-style: none; margin: 0; padding: 0; }
.timeline ol.events .event {
  display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.75rem;
  padding: 0.4rem 0; border-left: 2px solid var(--border-color-subtle); padding-left: 0.9rem; margin-left: 0.25rem;
}
.timeline ol.events .event .yr {
  color: var(--font-highlight); font-weight: 700; font-size: 0.85rem;
  font-variant-numeric: tabular-nums; text-align: right; padding-top: 0.1rem;
}
.timeline .event .name, .timeline .char .name { font-weight: 700; color: var(--font-base); text-decoration: none; }
.timeline .event .name:hover, .timeline .char .name:hover { color: var(--font-highlight); }
.timeline .sum { margin: 0.15rem 0 0; color: var(--font-base-trans); font-size: 0.9rem; max-width: 75ch; }

/* characters: compact cards */
.timeline .characters { margin-top: 1rem; }
.timeline .characters h3 { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--font-base-trans); text-transform: uppercase; letter-spacing: 0.04em; }
.timeline .char-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.6rem; }
.timeline .char {
  padding: 0.55rem 0.75rem; border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md); background: var(--darkest-trans);
}
.timeline .char .yr, .timeline .char .tag {
  font-size: 0.78rem; color: var(--font-base-trans); margin-left: 0.5rem;
  font-variant-numeric: tabular-nums;
}
.timeline .char .tag { color: var(--font-highlight); }

/* ── Entity reader (rendered lore, not raw JSON) ───────────────────────── */
.entity-doc .doc-head { border-bottom: 1px solid var(--border-color-subtle); padding-bottom: 0.8rem; margin-bottom: 1.2rem; }
.entity-doc .summary { margin-top: 0.7rem; max-width: 80ch; }
.doc-grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2rem; align-items: start; }
.doc-main { min-width: 0; }
.doc-section { margin: 0 0 1.5rem; }
.doc-section > h2 { font-size: 1.1rem; color: var(--font-highlight); margin: 0 0 0.5rem; padding-bottom: 0.25rem; border-bottom: 1px solid var(--border-color-subtle); }
.doc-section .prose { margin: 0; line-height: 1.65; color: var(--font-base); max-width: 80ch; white-space: pre-wrap; }

/* nested key/value rendering */
.kv { margin: 0; display: grid; gap: 0.35rem; }
.kv-row { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: 0.4rem 1rem; align-items: start; }
.kv-row > dt { color: var(--font-base-trans); font-size: 0.86rem; font-weight: 700; }
.kv-row > dd { margin: 0; color: var(--font-base); min-width: 0; line-height: 1.55; }
.kv .kv { padding-left: 0.4rem; border-left: 1px solid var(--border-color-subtle); }
.vlist { margin: 0; padding-left: 1.1rem; display: grid; gap: 0.2rem; }
.vlist li { color: var(--font-base); }
.muted { color: var(--font-base-trans); }

/* side panel */
.doc-aside { display: grid; gap: 1rem; position: sticky; top: 1rem; }
.aside-card { border: 1px solid var(--border-color-subtle); border-radius: var(--radius-lg); background: var(--darker-trans); padding: 0.85rem 1rem; }
.aside-card h3 { margin: 0 0 0.5rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--font-base-trans); }
.aside-card .kv-row { grid-template-columns: 5.5rem 1fr; }
.aside-card code { word-break: break-all; font-size: 0.82rem; }

.raw-json { margin-top: 1.5rem; border-top: 1px solid var(--border-color-subtle); padding-top: 0.8rem; }
.raw-json > summary { cursor: pointer; color: var(--font-base-trans); font-size: 0.9rem; }
.raw-json > summary:hover { color: var(--font-highlight); }
.raw-json .json { margin-top: 0.6rem; max-height: 600px; overflow: auto; }

/* ── Canonize ──────────────────────────────────────────────────────────── */
.canon-warning.canon-done { background: rgba(127,201,154,0.12); border-color: rgba(127,201,154,0.4); color: #cdeed8; }
.canonize-grid { display: grid; grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); gap: 1.6rem; align-items: start; margin-top: 1.2rem; }
.canonize-form { display: flex; flex-direction: column; gap: 0.9rem; }
.canonize-form label { display: flex; flex-direction: column; gap: 0.3rem; font-size: 0.88rem; color: var(--font-base-trans); }
.canonize-form label.block { width: 100%; }
.canonize-form input[type="text"], .canonize-form textarea, .canonize-form select {
  background: var(--darker); border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md); color: var(--font-base);
  padding: 0.55rem 0.7rem; font-size: 0.95rem; font-family: inherit; min-height: 44px;
}
.canonize-form textarea { resize: vertical; min-height: auto; }
.canonize-form input:focus, .canonize-form textarea:focus, .canonize-form select:focus {
  outline: none; border-color: #fff; box-shadow: 0 0 0 0.2rem rgba(143,153,197,0.22);
}
.path-preview { font-size: 0.85rem; color: var(--font-base-trans); margin: -0.2rem 0 0.4rem; }
.section-row, .relation-row { display: flex; gap: 0.6rem; align-items: flex-start; margin-bottom: 0.6rem; }
.section-row .section-key, .relation-row .rel-key { flex: 0 0 11rem; }
.section-row textarea, .relation-row input { flex: 1 1 auto; }
.section-row .remove-row, .relation-row .remove-row { flex: 0 0 auto; min-height: 44px; padding: 0 0.7rem; }
.prose-panel { position: sticky; top: 1rem; }
.prose-panel .candidate-content { max-height: 60vh; overflow: auto; }
.json-peek { background: var(--darker); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1rem 1.2rem; overflow: auto; max-height: 55vh; white-space: pre; font-size: 0.85rem; color: var(--font-base); }
.diff-peek { font-family: var(--mono, monospace); }
.diff-peek .dl-add { color: #7fd18a; }
.diff-peek .dl-del { color: #e0807f; }
.diff-peek .dl-hunk { color: var(--font-dim, #8a8fa3); }
.checkline { display: flex; align-items: center; gap: 0.5rem; color: var(--font-base); font-size: 0.9rem; margin: 1rem 0; }
.checkline input { width: auto; min-height: auto; }
.confirm-form .form-actions { gap: 0.8rem; flex-wrap: wrap; }

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .doc-grid { grid-template-columns: 1fr; }
  .doc-aside { position: static; }
  .canonize-grid { grid-template-columns: 1fr; }
  .prose-panel { position: static; }
}
@media (max-width: 640px) {
  .topbar { flex-direction: column; align-items: stretch; gap: 10px; }
  .content { padding: 18px 14px 36px; }
  .timeline ol.events .event { grid-template-columns: 4rem 1fr; }
  .kv-row { grid-template-columns: 1fr; gap: 0.1rem; }
}

/* ── Multi-lore chat (Phase C1) ────────────────────────────────────────── */
.meta-line { color: var(--font-base-trans); font-size: 0.8rem; }

/* Themed scrollbars: default light bars glare against the dark surfaces. */
html { scrollbar-color: rgba(143,153,197,0.35) transparent; }
.chat-transcript, .lore-tree, .pin-list, textarea {
  scrollbar-width: thin;
  scrollbar-color: rgba(143,153,197,0.35) transparent;
}
.chat-transcript::-webkit-scrollbar, .lore-tree::-webkit-scrollbar,
.pin-list::-webkit-scrollbar, textarea::-webkit-scrollbar { width: 8px; }
.chat-transcript::-webkit-scrollbar-thumb, .lore-tree::-webkit-scrollbar-thumb,
.pin-list::-webkit-scrollbar-thumb, textarea::-webkit-scrollbar-thumb {
  background: rgba(143,153,197,0.35); border-radius: 4px;
}

.chat-new { display: flex; gap: 0.6rem; margin: 0.8rem 0 1.2rem; max-width: 40rem; }
.chat-new input { flex: 1; }
.chat-list { list-style: none; padding: 0; }
.chat-list li { padding: 0.55rem 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.chat-list li a { color: var(--font-accent); text-decoration: none; font-weight: 600; }
.chat-list .meta-line { display: block; margin-top: 0.15rem; }

.chat-grid {
  display: grid; grid-template-columns: 17rem minmax(0, 1fr) 15rem;
  gap: 1rem; align-items: start; margin-top: 0.6rem;
}
@media (max-width: 1100px) { .chat-grid { grid-template-columns: 1fr; } }

/* min-width: 0 is load-bearing: the side tracks are fixed lengths, and grid
   items default to min-width auto (their content's min-content size) — without
   this, one wide control forces the panel to overflow onto the center column. */
.chat-roster, .chat-lore { min-width: 0; }
.chat-roster h2, .chat-lore h2 { font-size: 0.95rem; margin-bottom: 0.5rem; }
.roster-card {
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); padding: 0.6rem 0.7rem; margin-bottom: 0.6rem;
}
.roster-card.is-muted { opacity: 0.55; }
.roster-head { display: flex; align-items: center; gap: 0.55rem; margin-bottom: 0.45rem; }
.roster-head .meta-line { display: block; }
.roster-card label { display: block; font-size: 0.75rem; color: var(--font-base-trans); margin: 0.3rem 0; }
.roster-card select, .roster-card input { width: 100%; font-size: 0.8rem; }
.roster-actions { display: flex; gap: 0.4rem; margin-top: 0.4rem; flex-wrap: wrap; }
.roster-add { display: flex; gap: 0.4rem; margin-top: 0.4rem; min-width: 0; }
/* min-width: 0 is load-bearing: a select's automatic minimum width is its
   widest <option>, so without it long "Name (role)" options refuse to shrink
   and push the row (and the Add button) into the center column. */
.roster-add select { flex: 1 1 0; min-width: 0; }
.roster-add .btn-small { flex: 0 0 auto; }
.roster-add-toggle summary {
  cursor: pointer; color: var(--font-accent); font-weight: 700;
  font-size: 0.85rem; margin-top: 0.8rem;
}
.roster-add-toggle summary:hover { color: #fff; }

/* Sigils: avatar image or colored glyph disc (Old Tongue initial). */
.sigil {
  width: 2.1rem; height: 2.1rem; border-radius: 50%; object-fit: cover;
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
}
.sigil-glyph {
  font-family: 'Sigtaara', 'Beleren', serif; font-size: 1.05rem; line-height: 1;
  background: hsl(var(--sigil-hue, 200), 45%, 32%);
  color: hsl(var(--sigil-hue, 200), 70%, 85%);
  border: 1px solid hsl(var(--sigil-hue, 200), 50%, 45%);
}
.sigil-small { width: 1.5rem; height: 1.5rem; font-size: 0.8rem; }

/* The transcript owns its scroll (panel scrolls, not the page) — keep the
   max-height + overflow pair together. */
.chat-transcript {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); padding: 0.9rem 1rem; min-height: 24rem;
  max-height: 65vh; overflow-y: auto;
}
@media (max-width: 640px) {
  .chat-transcript { min-height: 14rem; max-height: 50vh; }
}
.msg { margin-bottom: 0.9rem; }
.msg-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.msg-body { white-space: pre-wrap; max-width: 80ch; }
/* Markdown-rendered messages: remove pre-wrap so paragraphs/lists/code work. */
.msg-body.markdown-body { white-space: normal; }

.markdown-body p { margin: 0.4rem 0; line-height: 1.55; }
.markdown-body p:first-child { margin-top: 0; }
.markdown-body p:last-child { margin-bottom: 0; }
.markdown-body h1, .markdown-body h2, .markdown-body h3,
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  margin: 0.8rem 0 0.4rem; color: var(--font-highlight); font-family: 'Beleren', Arial, sans-serif;
}
.markdown-body h1 { font-size: 1.25em; }
.markdown-body h2 { font-size: 1.15em; }
.markdown-body h3 { font-size: 1.05em; }
.markdown-body h4, .markdown-body h5, .markdown-body h6 { font-size: 1em; }
.markdown-body ul, .markdown-body ol { margin: 0.4rem 0; padding-left: 1.4rem; }
.markdown-body li { margin: 0.15rem 0; }
.markdown-body li > ul, .markdown-body li > ol { margin: 0.1rem 0; }
.markdown-body code {
  background: rgba(255,255,255,0.06); color: var(--font-accent);
  padding: 0.1rem 0.35rem; border-radius: 5px; font-size: 0.88em;
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
}
.markdown-body pre {
  background: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-md); padding: 0.6rem 0.8rem; overflow-x: auto;
  margin: 0.5rem 0;
}
.markdown-body pre code { background: none; padding: 0; border-radius: 0; }
.markdown-body blockquote {
  border-left: 2px solid var(--font-accent); margin: 0.5rem 0; padding-left: 0.8rem;
  color: var(--font-base-trans); font-style: italic;
}
.markdown-body hr { border: none; border-top: 1px solid rgba(255,255,255,0.12); margin: 0.6rem 0; }
.markdown-body table {
  border-collapse: collapse; margin: 0.5rem 0; font-size: 0.88em; width: auto; max-width: 100%;
}
.markdown-body th, .markdown-body td {
  border: 1px solid rgba(255,255,255,0.12); padding: 0.3rem 0.5rem; text-align: left;
}
.markdown-body th { background: rgba(255,255,255,0.05); color: #fff; }
.markdown-body a { color: var(--font-accent); text-decoration: underline; text-decoration-color: rgba(255,255,255,0.25); }
.markdown-body a:hover { color: #fff; }
.markdown-body img { max-width: 100%; height: auto; border-radius: var(--radius-md); }

/* System messages are centered and italic; keep that even with Markdown. */
.msg-system .markdown-body { text-align: center; font-style: italic; }
.msg-system .markdown-body p { margin: 0; }
.msg-system .markdown-body a { color: var(--font-accent); }

/* Voice accents: who is speaking should read at a glance. */
.msg-user { border-left: 2px solid var(--border-color-strong); padding-left: 0.6rem; }
.msg-persona { border-left: 2px solid var(--font-accent); padding-left: 0.6rem; }
.msg-user .msg-body { color: var(--font-base); }
.msg-persona .msg-body { color: var(--font-base); }
.msg-system { text-align: center; font-style: italic; color: var(--font-base-trans); font-size: 0.85rem; }

.chat-input { margin-top: 0.8rem; }
.chat-input textarea { width: 100%; max-height: 12rem; resize: vertical; }
.chat-input-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap;
}
.chat-input-row label {
  font-size: 0.8rem; color: var(--font-base-trans);
  display: inline-flex; align-items: center; gap: 0.35rem;
  flex: 1 1 10rem; min-width: 0;
}
.chat-input-row label select { flex: 1; min-width: 0; }

.chat-lore {
  background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md); padding: 0.7rem 0.8rem;
}

/* Turn plan strip — the visible cost gate above the send box. */
.turn-strip {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 0.45rem; padding: 0.4rem 0.5rem;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07);
  border-radius: 8px;
}
.turn-strip.is-disabled { opacity: 0.4; pointer-events: none; }
.turn-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--font-base-trans); }
.turn-chip {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.22rem 0.6rem; border-radius: 999px; cursor: pointer;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: var(--font-base); font-size: 0.8rem;
  max-width: 12rem; overflow: hidden; white-space: nowrap;
}
.turn-chip.is-queued {
  background: rgba(143,153,197,0.22); border-color: var(--font-accent); color: #fff;
}
.turn-chip.is-ineligible { opacity: 0.4; cursor: not-allowed; }
.turn-order {
  min-width: 1.05rem; text-align: center; font-weight: 800; font-size: 0.72rem;
  color: var(--font-highlight);
}
.turn-chip.is-queued .turn-order {
  background: var(--font-accent); color: var(--darkest); border-radius: 50%;
  width: 1.05rem; height: 1.05rem; line-height: 1.05rem;
}
.turn-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 8rem; }
.turn-cost { font-size: 0.68rem; color: var(--font-base-trans); flex-shrink: 0; }
.turn-auto { margin-left: auto; font-size: 0.75rem; color: var(--font-accent); text-decoration: none; }
.turn-auto:hover { color: #fff; }

/* Live-turn working indicator */
.msg-working {
  display: flex; align-items: center; gap: 0.5rem;
  color: var(--font-base-trans); font-style: italic; font-size: 0.88rem;
}
.spinner {
  width: 0.85rem; height: 0.85rem; flex-shrink: 0; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.15); border-top-color: var(--font-accent);
  animation: chat-spin 0.9s linear infinite;
}
@keyframes chat-spin { to { transform: rotate(360deg); } }

/* Lore panel: pins + content tree */
.pin-chip {
  display: flex; align-items: center; gap: 0.45rem;
  padding: 0.3rem 0.5rem; margin-bottom: 0.35rem; border-radius: 8px;
  background: rgba(143,153,197,0.10); border: 1px solid rgba(143,153,197,0.3);
  font-size: 0.82rem;
}
.pin-chip .pin-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pin-chip.is-missing { opacity: 0.55; border-style: dashed; }
.pin-list { max-height: 40vh; overflow-y: auto; }
.pin-btn {
  background: rgba(255,255,255,0.08); color: var(--font-base);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 6px;
  font-size: 0.7rem; padding: 0.08rem 0.42rem; cursor: pointer;
}
.pin-btn:hover { background: rgba(255,255,255,0.16); color: #fff; }

#tree-filter { width: 100%; margin-bottom: 0.5rem; font-size: 0.82rem; }
.lore-tree { max-height: 48vh; overflow-y: auto; font-size: 0.84rem; }
.lore-tree details { margin-bottom: 0.25rem; }
.lore-tree summary { cursor: pointer; color: var(--font-base); font-weight: 700; padding: 0.15rem 0; }
.lore-tree ul { list-style: none; padding-left: 0.75rem; margin: 0.15rem 0 0.4rem; }
.tree-node { display: flex; align-items: center; gap: 0.4rem; padding: 0.12rem 0; }
.tree-node a { color: var(--font-base); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-node a:hover { color: var(--font-accent); }
.tree-node .native { font-size: 0.72rem; }
/* Faint by default (discoverable on touch), full on hover/keyboard focus. */
.tree-actions {
  margin-left: auto; display: inline-flex; gap: 0.25rem;
  opacity: 0.35; transition: opacity var(--transition-fast);
}
.tree-node:hover .tree-actions,
.tree-node:focus-within .tree-actions { opacity: 1; }
.tree-node.is-mentioned > a { color: var(--font-highlight); }
.tree-node.is-mentioned::before { content: "◆"; color: var(--font-highlight); font-size: 0.6rem; }

.pin-tray {
  display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap;
  margin-bottom: 0.45rem; padding: 0.35rem 0.5rem;
  background: rgba(143,153,197,0.07); border: 1px dashed rgba(143,153,197,0.35);
  border-radius: 8px;
}
/* display:flex on these overrides the UA [hidden] rule — restore it. */
.pin-tray[hidden], .distill-bar[hidden] { display: none; }

/* Entity mentions inside persona replies */
a.lore-link { color: var(--font-accent); text-decoration: none; border-bottom: 1px dotted var(--font-accent); }
a.lore-link:hover { color: #fff; }

/* Chronicle: the editable "story so far" fold + the compress-due banner */
.chronicle {
  margin-bottom: 0.6rem; padding: 0.4rem 0.6rem; border-radius: 8px;
  background: rgba(143,153,197,0.08); border: 1px solid rgba(143,153,197,0.3);
  font-size: 0.86rem;
}
.chronicle summary { cursor: pointer; font-weight: 700; color: var(--font-base); }
.chronicle textarea { width: 100%; margin: 0.45rem 0 0.35rem; font-size: 0.84rem; }
.chronicle-banner {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  margin-bottom: 0.6rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  background: rgba(210,170,90,0.10); border: 1px solid rgba(210,170,90,0.45);
  font-size: 0.84rem;
}
.chronicle-banner > span { flex: 1 1 14rem; min-width: 0; }
.chronicle-banner form { display: inline-flex; align-items: center; gap: 0.4rem; margin-left: auto; }

/* Distill: pick messages, draft a candidate from the discussion */
.msg-pick {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--font-base); opacity: 0.35; font-size: 0.85rem; padding: 0 0.2rem;
  transition: opacity var(--transition-fast);
}
.msg:hover .msg-pick { opacity: 0.7; }
.msg-pick:hover, .msg-pick:focus { opacity: 1 !important; color: var(--font-accent); }
.msg.is-picked { outline: 1px solid rgba(143,153,197,0.55); border-radius: 8px; }
.msg.is-picked .msg-pick { opacity: 1; color: var(--font-accent); }
.distill-bar {
  display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
  margin-top: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px;
  background: rgba(143,153,197,0.08); border: 1px dashed rgba(143,153,197,0.4);
  font-size: 0.84rem;
}
.distill-bar input[type="text"] { flex: 1; min-width: 10rem; font-size: 0.82rem; }

/* ------------------------------------------------------------------------- */
/* The Forge — target picker, run pipeline, verify report                     */
/* ------------------------------------------------------------------------- */
.forge-runs { list-style: none; padding: 0; margin: 0 0 1.4rem; }
.forge-runs li { display: flex; align-items: center; gap: 0.6rem; padding: 0.25rem 0; }

.forge-targets details { margin-bottom: 0.5rem; }
.forge-targets summary { cursor: pointer; padding: 0.35rem 0; }
.forge-targets ul { list-style: none; padding: 0 0 0 1rem; margin: 0.3rem 0; }
.forge-target { display: flex; align-items: center; gap: 0.7rem; padding: 0.28rem 0; }
.forge-target-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.forge-target-name .native { color: var(--font-base-trans); margin-left: 0.4rem; font-style: italic; }
.fill-bar { flex: 0 0 90px; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.07); overflow: hidden; }
.fill-bar-inner { display: block; height: 100%; background: var(--accent, #7fc99a); border-radius: 4px; }

.forge-setup { display: flex; flex-direction: column; gap: 1rem; max-width: 70ch; }
.forge-setup textarea { width: 100%; }
.forge-lanes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0.9rem; }
.forge-lanes label { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; }
.forge-lanes select, .forge-lanes input { min-width: 0; }
.forge-repair { color: var(--font-base-trans); font-size: 0.9rem; }
.forge-context pre { max-height: 45vh; overflow: auto; font-size: 0.8rem;
  background: var(--darker); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.8rem 1rem; white-space: pre-wrap; }

.forge-plan-card { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 1rem 1.2rem; margin: 1rem 0; background: rgba(255,255,255,0.02); }
.forge-instruction { font-style: italic; color: var(--font-base); }
.forge-call-list { margin: 0.6rem 0 0.8rem 1.2rem; }
.forge-call-list li { padding: 0.15rem 0; }

.forge-stages { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0; }
.forge-stage { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 0.7rem 1rem; background: rgba(255,255,255,0.02); }
.forge-stage-ok { border-color: rgba(58,107,84,0.5); }
.forge-stage-failed { border-color: rgba(229,92,54,0.4); }
.forge-stage-head { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.forge-stage-notes { margin: 0.5rem 0 0; color: var(--font-base-trans); font-size: 0.92rem; }
.forge-stage pre { max-height: 40vh; overflow: auto; white-space: pre-wrap;
  font-size: 0.8rem; margin-top: 0.5rem; }

.forge-report { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem; margin: 1rem 0; }
.forge-report > div { border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 0.8rem 1rem; background: rgba(255,255,255,0.02); min-width: 0; }
.forge-report h3 { margin: 0 0 0.4rem; font-size: 0.95rem; }
.forge-report code { word-break: break-word; }

.json-edit { width: 100%; font-size: 0.82rem; line-height: 1.45;
  background: var(--darker); border: 1px solid var(--border-color);
  border-radius: var(--radius-md); padding: 0.8rem 1rem; white-space: pre; }

/* forge/stage lifecycle colors missing from the shared status palette */
.status-planned, .status-pending { color: var(--font-base-trans); background: rgba(255,255,255,0.04); }
.status-done, .status-ok { color: #7fc99a; border-color: rgba(58,107,84,0.5); background: rgba(58,107,84,0.16); }
.status-failed { color: var(--font-highlight); border-color: rgba(229,92,54,0.4); background: rgba(229,92,54,0.14); }

/* Display-form names (the `sigtaara`/`sindala` entity fields) render in the
   Old Tongue face; their *_romanized twins stay in the reading font. */
.old-tongue { font-family: 'Sigtaara', 'Beleren', serif; }

/* Language learning workspace */
.scriptorium-page { padding-top: 0; }
.scriptorium-head { display: flex; align-items: end; justify-content: space-between; gap: 1.5rem; padding: 2rem 0 1.2rem; }
.scriptorium-head h1 { margin: 0; color: #fff; font-size: 2.25rem; letter-spacing: 0; }
.scriptorium-kicker { margin: 0 0 0.25rem; color: #78c7aa; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; }
.scriptorium-common { color: var(--font-base-trans); font-family: inherit; font-size: 0.85rem; font-weight: 400; }
.scriptorium-native { margin: 0.15rem 0 0; color: #78c7aa; font-size: 1.15rem; }
.scriptorium-language-picker { display: flex; align-items: center; gap: 0.55rem; color: var(--font-base-trans); font-size: 0.8rem; }
.scriptorium-language-picker select { min-height: 38px; }
.scriptorium-tabs { display: flex; gap: 1.4rem; border-bottom: 1px solid var(--border-color); }
.scriptorium-tabs a { padding: 0.7rem 0; border-bottom: 2px solid transparent; color: var(--font-base-trans); text-decoration: none; font-weight: 750; }
.scriptorium-tabs a:hover { color: #fff; }
.scriptorium-tabs a.active { color: #fff; border-bottom-color: #78c7aa; }
.scriptorium-metrics { display: grid; grid-template-columns: repeat(4, minmax(100px, 1fr)); border-bottom: 1px solid var(--border-color-subtle); }
.scriptorium-metrics > div { padding: 1.1rem 1.3rem; border-right: 1px solid var(--border-color-subtle); }
.scriptorium-metrics > div:first-child { padding-left: 0; }
.scriptorium-metrics > div:last-child { border-right: 0; }
.scriptorium-metrics strong { display: block; color: #fff; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.scriptorium-metrics span { color: var(--font-base-trans); font-size: 0.76rem; text-transform: uppercase; }
.scriptorium-layout { display: grid; grid-template-columns: minmax(190px, 240px) minmax(0, 1fr); min-height: 590px; }
.scriptorium-modes { padding: 1.4rem 1.2rem 1.4rem 0; border-right: 1px solid var(--border-color-subtle); }
.scriptorium-modes h2 { margin: 0 0 0.85rem; color: var(--font-base-trans); font-size: 0.75rem; text-transform: uppercase; }
.scriptorium-mode { width: 100%; min-height: 60px; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem; margin-bottom: 0.35rem; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--font-base); text-align: left; cursor: pointer; }
.scriptorium-mode:hover { background: rgba(255,255,255,0.035); }
.scriptorium-mode.active { background: rgba(58,107,84,0.18); border-color: rgba(120,199,170,0.38); color: #fff; }
.scriptorium-mode span:last-child { min-width: 0; }
.scriptorium-mode strong, .scriptorium-mode small { display: block; }
.scriptorium-mode small { margin-top: 0.12rem; color: var(--font-base-trans); font-size: 0.72rem; }
.mode-icon { flex: 0 0 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-color); border-radius: 6px; color: #78c7aa; font-weight: 800; }
.scriptorium-source { margin-top: 1.6rem; color: var(--font-base-trans); font-size: 0.75rem; line-height: 1.6; }
.study-stage { display: grid; place-items: start center; padding: clamp(2rem, 5vw, 4rem); }
.study-card { width: min(100%, 720px); text-align: center; }
.study-instruction { margin: 0 0 1.3rem; color: var(--font-base-trans); font-size: 0.85rem; }
.study-prompt { min-height: 100px; display: grid; place-items: center; color: #fff; font-size: clamp(2.1rem, 5vw, 4.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.study-answer-row { display: flex; gap: 0.55rem; width: min(100%, 520px); margin: 0 auto; }
.study-answer-row input { flex: 1; min-width: 0; min-height: 46px; font-size: 1rem; text-align: center; }
#study-answer-form label { display: block; margin: 1.3rem 0 0.4rem; color: var(--font-base-trans); font-size: 0.72rem; text-transform: uppercase; }
.study-reveal { margin: 1.5rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--border-color-subtle); }
.reveal-native { margin: 0; color: #78c7aa; font-size: 1.8rem; }
.reveal-reading { margin: 0.25rem 0; color: #fff; }
.reveal-reading span { margin-left: 0.5rem; color: var(--font-base-trans); font-family: ui-monospace, monospace; }
.reveal-english { margin: 0.4rem 0 0; font-size: 1.05rem; }
.reveal-pos { margin: 0.2rem 0 0; color: var(--font-base-trans); font-size: 0.75rem; text-transform: uppercase; }
.study-grades[hidden], .study-reveal[hidden] { display: none; }
.study-grades { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.45rem; margin: 1.4rem auto 0; width: min(100%, 520px); }
.study-grades button { min-height: 55px; padding: 0.45rem; border: 1px solid var(--border-color); border-radius: 6px; background: rgba(255,255,255,0.035); color: var(--font-base); cursor: pointer; }
.study-grades button:hover { border-color: #78c7aa; color: #fff; }
.study-grades strong, .study-grades small { display: block; }
.study-grades small { margin-top: 0.15rem; color: var(--font-base-trans); font-size: 0.67rem; }
.scriptorium-search { display: grid; grid-template-columns: minmax(220px, 1fr) 190px auto; gap: 0.6rem; padding: 1.5rem 0 0.8rem; }
.scriptorium-search input, .scriptorium-search select { min-height: 44px; }
.scriptorium-result-count { color: var(--font-base-trans); font-size: 0.82rem; }
.lexicon-table-wrap { overflow-x: auto; border-top: 1px solid var(--border-color); }
.lexicon-table { width: 100%; border-collapse: collapse; }
.lexicon-table th, .lexicon-table td { padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--border-color-subtle); text-align: left; }
.lexicon-table th { color: var(--font-base-trans); font-size: 0.7rem; text-transform: uppercase; }
.lex-native { color: #78c7aa; font-size: 1.25rem; }
.lex-ipa { color: var(--font-base-trans); font-family: ui-monospace, monospace; }
.lex-pos { color: #e8c75f; font-size: 0.72rem; text-transform: uppercase; }
.grammar-workspace { max-width: 900px; padding: 2rem 0; }
.grammar-intro h2, .grammar-note h2 { margin: 0.2rem 0 0.5rem; color: #fff; }
.grammar-intro p:last-child, .grammar-note p { color: var(--font-base); max-width: 70ch; }
.grammar-facts { display: grid; grid-template-columns: repeat(4, 1fr); margin: 1.8rem 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); }
.grammar-facts div { padding: 1rem; border-right: 1px solid var(--border-color-subtle); }
.grammar-facts div:first-child { padding-left: 0; }
.grammar-facts div:last-child { border-right: 0; }
.grammar-facts dt { color: var(--font-base-trans); font-size: 0.7rem; text-transform: uppercase; }
.grammar-facts dd { margin: 0.3rem 0 0; color: #fff; font-weight: 700; }
.grammar-note { padding-top: 0.4rem; }
@media (max-width: 760px) {
  .scriptorium-head { align-items: start; }
  .scriptorium-common { display: block; margin-top: 0.2rem; }
  .scriptorium-metrics { grid-template-columns: repeat(2, 1fr); }
  .scriptorium-metrics > div:nth-child(2) { border-right: 0; }
  .scriptorium-layout { grid-template-columns: 1fr; }
  .scriptorium-modes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.35rem; padding-right: 0; border-right: 0; border-bottom: 1px solid var(--border-color-subtle); }
  .scriptorium-modes h2, .scriptorium-source { grid-column: 1 / -1; }
  .scriptorium-mode { display: block; text-align: center; min-width: 0; }
  .mode-icon { margin: 0 auto 0.35rem; }
  .study-stage { padding: 2rem 0; min-height: 480px; }
  .scriptorium-search { grid-template-columns: 1fr; }
  .grammar-facts { grid-template-columns: repeat(2, 1fr); }
  .grammar-facts div:nth-child(2) { border-right: 0; }
  .primer-table { font-size: 0.88rem; }
  .scriptorium-nudge { flex-direction: column; }
}

/* ── Quest council ─────────────────────────────────────────────────────── */
.council-round-head {
  margin: 1.4rem 0 0.6rem; color: var(--font-highlight);
  font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase;
}
.output-pending { opacity: 0.55; }
.proposal-card {
  border-color: rgba(143,153,197,0.45);
  box-shadow: 0 0 24px rgba(70,84,147,0.18);
}
.lane-banner {
  margin: 0.8rem 0 1rem; padding: 0.75rem 1rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  background: rgba(23,26,38,0.65);
}
.lane-banner.lane-mismatch {
  border-color: rgba(232,199,95,0.55);
  background: rgba(232,199,95,0.08);
}
.lane-actions { gap: 0.6rem; flex-wrap: wrap; margin-bottom: 1rem; }
.lane-actions form { display: inline; }
.lane-fieldset {
  border: 1px solid var(--border-color); border-radius: var(--radius-md);
  padding: 0.7rem 0.9rem 0.9rem; margin: 0.4rem 0 0.7rem;
}
.lane-fieldset legend {
  padding: 0 0.35rem; color: #fff; font-weight: 700; font-size: 0.9rem;
}
.lane-fieldset .form-row { margin-top: 0.35rem; }
.agent-lanes { list-style: none; padding: 0; margin: 0.6rem 0 1rem; display: flex; flex-direction: column; gap: 0.45rem; }
.agent-lane-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem;
  padding: 0.45rem 0.55rem; border: 1px solid var(--border-color-subtle);
  border-radius: var(--radius-md); background: rgba(23,26,38,0.45);
}
.agent-lane-controls { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-left: auto; }
.agent-lane-controls select {
  min-height: 36px; font-size: 0.85rem; max-width: 11rem;
  background: var(--darker); border: 1px solid var(--border-color-strong);
  border-radius: var(--radius-md); color: var(--font-base); padding: 0.25rem 0.4rem;
}
.agent-lane-controls[hidden] { display: none !important; }
.phase-note {
  color: var(--font-base-trans); font-size: 0.92rem;
  margin: 0.6rem 0 1rem; max-width: 70ch;
}
.forge-plan-card, .forge-call-list { margin: 1rem 0; }
.forge-call-list { padding-left: 1.2rem; }
.forge-call-list li { margin: 0.35rem 0; }
.forge-instruction {
  font-style: italic; color: var(--font-base);
  border-left: 2px solid var(--font-highlight); padding-left: 0.85rem;
}
.forge-context pre {
  white-space: pre-wrap; max-height: 360px; overflow: auto;
  background: var(--darker); padding: 0.8rem; border-radius: var(--radius-md);
  font-size: 0.82rem; border: 1px solid var(--border-color-subtle);
}
.meta-line { color: var(--font-base-trans); font-size: 0.85rem; }

/* Scriptorium: onboarding additions */
.primer-section { padding: 2rem 0; }
.primer-intro { max-width: 640px; margin-bottom: 1.5rem; }
.primer-intro h2 { margin: 0 0 0.6rem; color: #fff; }
.primer-intro p { margin: 0 0 0.5rem; color: var(--font-base-trans); font-size: 0.9rem; line-height: 1.6; }
.primer-glyph { font-size: 1.35rem; letter-spacing: 0.03em; }

.scriptorium-nudge { display: flex; align-items: baseline; gap: 0.35em; margin: 1.1rem 0 0; padding: 0.6rem 1rem; border-left: 3px solid #78c7aa; background: rgba(120,199,170,0.07); color: var(--font-base-trans); font-size: 0.85rem; border-radius: 0 4px 4px 0; }
.scriptorium-nudge a { color: #78c7aa; text-decoration: underline; }
.scriptorium-nudge a:hover { color: #fff; }

.study-hint-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.2rem 0 0.9rem; }
.study-hint-row[hidden] { display: none; }
.study-hint-toggle { padding: 0.25rem 0.6rem; border: 1px solid var(--border-color-subtle); border-radius: 4px; background: transparent; color: var(--font-base-trans); font-size: 0.78rem; cursor: pointer; }
.study-hint-toggle:hover { color: #fff; border-color: var(--border-color); }
.study-hint-text { color: #78c7aa; font-size: 1rem; letter-spacing: 0.02em; }

/* ── Candidate package review studio ───────────────────────────────────── */
.eyebrow { margin: 0 0 .25rem; color: var(--font-highlight); font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.candidate-index { max-width: 1500px; margin: 0 auto; }
.candidate-filters { display: grid; grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(145px, 1fr)) auto auto; gap: .7rem; align-items: end; margin: 1.3rem 0; }
.candidate-filters label, .stack-form label, .review-form label { display: flex; flex-direction: column; gap: .3rem; color: var(--font-base-trans); font-size: .78rem; font-weight: 700; }
.candidate-filters input, .candidate-filters select, .stack-form input, .stack-form select,
.stack-form textarea, .review-form textarea, .item-filter-row input {
  width: 100%; min-height: 39px; padding: .5rem .62rem; color: var(--font-base);
  background: var(--darkest); border: 1px solid var(--border-color); border-radius: var(--radius-md);
}
.stack-form textarea, .review-form textarea { resize: vertical; font: inherit; line-height: 1.45; }
.package-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 1rem; }
.package-card { display: flex; flex-direction: column; gap: .7rem; min-height: 220px; padding: 1rem 1.1rem; color: inherit; text-decoration: none; background: rgba(23,26,38,.72); border: 1px solid var(--border-color); border-radius: var(--radius-xl); box-shadow: var(--shadow-md); transition: transform var(--transition-fast), border-color var(--transition-fast); }
.package-card:hover { transform: translateY(-2px); border-color: var(--font-highlight); }
.package-progress { height: 5px; overflow: hidden; background: rgba(255,255,255,.06); border-radius: 99px; }
.package-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--font-highlight), #7fc99a); }
.package-counts { display: flex; gap: 1rem; color: var(--font-base-trans); font-size: .78rem; margin-top: auto; }
.package-counts strong { color: #fff; }
.empty-state { text-align: center; padding: 3rem 1rem; }

.candidate-package { max-width: 1800px; margin: 0 auto; }
.package-hero { display: flex; justify-content: space-between; gap: 2rem; align-items: flex-start; margin-bottom: 1rem; }
.package-hero h1 { margin-top: 0; }
.package-provenance { max-width: 85ch; color: var(--font-base-trans); font-size: .88rem; }
.package-rollup { display: grid; grid-template-columns: auto auto; gap: .2rem .65rem; align-items: center; min-width: 190px; padding: .8rem; background: var(--darker); border: 1px solid var(--border-color); border-radius: var(--radius-lg); }
.package-rollup strong { font-size: 1.5rem; color: #fff; text-align: right; }
.package-rollup > span:last-child { grid-column: 1 / -1; color: var(--font-base-trans); font-size: .72rem; text-align: right; }
.package-tabs { position: sticky; top: var(--topbar-h); z-index: 30; display: flex; gap: .25rem; align-items: center; margin: 1rem 0; padding: .35rem; overflow-x: auto; background: rgba(23,26,38,.94); border: 1px solid var(--border-color); border-radius: var(--radius-lg); backdrop-filter: blur(10px); }
.package-tabs a { flex: 0 0 auto; padding: .48rem .7rem; color: var(--font-base-trans); text-decoration: none; border-radius: var(--radius-md); font-size: .78rem; font-weight: 800; }
.package-tabs a:hover, .package-tabs a.active { color: #fff; background: rgba(143,153,197,.16); }
.package-tab-spacer { flex: 1; }
.candidate-workspace { display: grid; grid-template-columns: minmax(220px, 280px) minmax(0, 1fr) minmax(260px, 330px); gap: 1rem; align-items: start; }
.package-sidebar, .item-inspector { position: sticky; top: calc(var(--topbar-h) + 58px); max-height: calc(100vh - var(--topbar-h) - 82px); overflow: auto; }
.sidebar-head { display: flex; justify-content: space-between; align-items: center; }
.sidebar-head h2 { margin: 0; }
.item-filter-row { margin: .7rem 0; }
.package-item-list { display: flex; flex-direction: column; gap: .35rem; margin: 0; padding: 0; list-style: none; }
.package-item { display: grid; grid-template-columns: 24px minmax(0,1fr) auto; gap: .15rem .5rem; padding: .55rem; color: inherit; text-decoration: none; border: 1px solid transparent; border-radius: var(--radius-md); }
.package-item:hover, .package-item.selected { background: rgba(143,153,197,.09); border-color: var(--border-color); }
.item-order { grid-row: 1 / 3; align-self: center; color: var(--font-base-trans); font-variant-numeric: tabular-nums; font-size: .72rem; }
.item-name { min-width: 0; overflow: hidden; color: #fff; font-size: .84rem; font-weight: 800; text-overflow: ellipsis; white-space: nowrap; }
.item-meta { color: var(--font-base-trans); font-size: .67rem; }
.package-item .status { grid-column: 3; grid-row: 1 / 3; align-self: center; max-width: 92px; overflow: hidden; font-size: .58rem; text-overflow: ellipsis; }
.add-item { margin-top: .8rem; border-top: 1px solid var(--border-color-subtle); padding-top: .7rem; }
.add-item > summary, .inspector-section > summary { color: var(--font-accent); cursor: pointer; font-weight: 800; font-size: .78rem; }
.stack-form { display: flex; flex-direction: column; gap: .65rem; margin-top: .75rem; }
.package-main { min-width: 0; }
.view-heading { display: flex; justify-content: space-between; gap: 1rem; align-items: end; margin-bottom: 1rem; }
.view-heading h2 { margin: 0; font-size: 1.45rem; }
.view-heading > p { max-width: 52ch; color: var(--font-base-trans); font-size: .82rem; text-align: right; }
.proposal-block { margin: 0 0 1rem; padding: 1rem; background: rgba(23,26,38,.58); border: 1px solid var(--border-color); border-left-width: 4px; border-radius: var(--radius-lg); }
.proposal-block > header { display: flex; justify-content: space-between; gap: .8rem; }
.proposal-block h3 { margin: .2rem 0 .8rem; font-size: 1.1rem; }
.item-kicker { color: var(--font-base-trans); font-size: .65rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.proposal-block .candidate-content { max-width: none; background: transparent; border: 0; padding: 0; }
.candidate-json { max-width: 100%; max-height: 58vh; overflow: auto; margin: .5rem 0 0; padding: .8rem; color: var(--font-base); background: var(--darkest); border: 1px solid var(--border-color-subtle); border-radius: var(--radius-md); font: .75rem/1.45 ui-monospace, Menlo, monospace; white-space: pre-wrap; word-break: break-word; }
.status-border-accepted { border-left-color: #7fc99a; }
.status-border-rejected { border-left-color: var(--font-danger); opacity: .72; }
.status-border-revision_requested, .status-border-candidate { border-left-color: var(--font-highlight); }
.status-border-canonized { border-left-color: #79b6e6; }
.timeline-canvas, .relation-canvas { min-height: 150px; margin-bottom: 1rem; overflow: auto; }
.timeline-canvas svg, .relation-canvas svg { display: block; width: 100%; min-width: 680px; }
.timeline-axis { stroke: var(--border-color-strong); stroke-width: 2; }
.timeline-grid { stroke: var(--border-color-subtle); stroke-dasharray: 3 5; }
.timeline-label, .relation-node-label { fill: #fff; font: 700 12px system-ui; }
.timeline-year, .svg-muted, .relation-edge-label { fill: var(--font-base-trans); font: 11px ui-monospace, monospace; }
.timeline-bar, .timeline-dot { stroke: var(--darkest); stroke-width: 2; }
.status-fill-candidate, .status-fill-revision_requested { fill: var(--font-highlight); }
.status-fill-accepted { fill: #7fc99a; }
.status-fill-rejected { fill: var(--font-danger); opacity: .55; }
.status-fill-canonized { fill: #79b6e6; }
.relation-mode-tabs { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: .7rem; }
.relation-mode-tabs button { padding: .42rem .65rem; color: var(--font-base-trans); background: var(--darker); border: 1px solid var(--border-color); border-radius: 999px; cursor: pointer; font-weight: 800; font-size: .75rem; }
.relation-mode-tabs button.active { color: #fff; border-color: var(--font-highlight); }
.relation-mode-tabs span { color: var(--font-highlight); }
.relation-edge { stroke: var(--border-color-strong); stroke-width: 2; }
.status-stroke-accepted { stroke: #7fc99a; }.status-stroke-rejected { stroke: var(--font-danger); stroke-dasharray: 4 5; }.status-stroke-canonized { stroke: #79b6e6; }
.relation-node { fill: var(--darker); stroke: var(--font-accent); stroke-width: 2; }
.projection-list { list-style: none; padding: 0; }
.projection-row { display: flex; gap: .7rem; align-items: center; margin: .45rem 0; padding: .6rem .7rem; background: rgba(23,26,38,.48); border-left: 3px solid var(--border-color); border-radius: var(--radius-md); }
.projection-row a { color: #fff; font-weight: 800; text-decoration: none; }
.timeline-date { min-width: 100px; color: var(--font-highlight); font-family: ui-monospace, monospace; }
.relation-predicate { color: var(--font-base-trans); font-size: .75rem; }
.impact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: .8rem; }
.impact-card header { display: flex; justify-content: space-between; gap: .5rem; }
.impact-card header a { color: #fff; font-weight: 800; text-decoration: none; }
.impact-card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem .7rem; font-size: .78rem; }
.impact-card dt { color: var(--font-base-trans); }.impact-card dd { margin: 0; }
.impact-card.has-issues { border-color: rgba(232,199,95,.5); }
.impact-issues { padding-left: 1.1rem; color: var(--font-warning); font-size: .78rem; }
.impact-ok { color: #7fc99a; font-size: .76rem; }
.history-list { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.25rem; }
.history-list li { padding: .7rem; background: rgba(23,26,38,.48); border-radius: var(--radius-md); }
.history-list p { margin: .3rem 0 0; color: var(--font-base-trans); }
.inspector-meta { display: flex; gap: .45rem; align-items: center; flex-wrap: wrap; color: var(--font-base-trans); font-size: .72rem; }
.review-form { margin-top: .9rem; }
.review-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; }
.btn-accept { background: #7fc99a; }.btn-revise { background: var(--font-highlight); }.btn-danger { background: var(--font-danger); color: #fff; }
.inspector-section { margin-top: .9rem; padding-top: .75rem; border-top: 1px solid var(--border-color-subtle); }
.canonize-item { width: 100%; margin-top: 1rem; text-align: center; }
.canon-done { display: flex; flex-direction: column; gap: .45rem; margin-top: 1rem; padding: .7rem; color: #7fc99a; background: rgba(58,107,84,.15); border-radius: var(--radius-md); }
.agent-gate-facts { display: grid; grid-template-columns: auto 1fr; gap: .35rem 1rem; }.agent-gate-facts dt { color: var(--font-base-trans); }.agent-gate-facts dd { margin: 0; }
.status-in_review, .status-partially_accepted { color: var(--font-highlight); border-color: rgba(229,92,54,.4); background: rgba(229,92,54,.14); }
.status-resolved, .status-partially_canonized { color: #e8c75f; border-color: rgba(232,199,95,.45); background: rgba(232,199,95,.12); }
.status-superseded { color: var(--font-base-trans); border-color: var(--border-color); background: rgba(255,255,255,.04); }
.status-recovery_required { color: var(--font-danger); border-color: rgba(166,50,50,.55); background: var(--red-trans); }

@media (max-width: 1180px) {
  .candidate-workspace { grid-template-columns: 230px minmax(0,1fr); }
  .item-inspector { position: static; grid-column: 1 / -1; max-height: none; }
  .candidate-filters { grid-template-columns: repeat(2, minmax(180px,1fr)); }
}
@media (max-width: 760px) {
  .package-hero, .view-heading { align-items: stretch; flex-direction: column; }
  .view-heading > p { text-align: left; }
  .package-rollup { width: 100%; }
  .candidate-workspace { grid-template-columns: 1fr; }
  .package-sidebar { position: static; max-height: none; }
  .package-item-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); }
  .candidate-filters { grid-template-columns: 1fr; }
  .package-tabs { top: var(--topbar-h); }
  .package-tab-spacer { display: none; }
}