/* ---- fonts ---- */
@font-face {
  font-family: 'Literata';
  src: url('fonts/Literata-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/Inter-SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

/* ---- brandbook tokens (Brand Book & Style Guide v1.0) ---- */
:root {
  color-scheme: dark;
  /* brand greens */
  --neon: #00ebaa;          /* primary interactive accent */
  --brand-emerald: #10b981; /* hover, success */
  --lime: #b6ff52;          /* accent-of-accent, critical numbers (reserved) */
  --aqua: #14e5c8;          /* code strings */
  /* backgrounds & surfaces */
  --bg: #050907;
  --bg-1: #0a0f0c;
  --bg-2: #0f1814;
  --surface: #0d1411;
  --surface-2: #131c18;
  --surface-elev: #18241f;
  --brand-deep: #064e3b;
  --line: #064e3b;
  /* text — 2/3/dim brightened over the brandbook values for contrast */
  --text: #e5f4ed;
  --text-2: #b7c9c0;
  --text-3: #95aba1;
  --text-dim: #6d7f76;
  /* status */
  --amber: #ffb547;
  --orange: #ff8a3d;        /* incoming links — distinct from route amber */
  --rose: #ff6b7a;
  --sky: #5aa9ff;
  --violet: #b78cff;        /* title states and arg flow edges — nothing else */
  /* type & shape */
  --font-serif: 'Literata', Georgia, serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --radius: 6px;
  --radius-lg: 10px;
  --page-width: clamp(1040px, 78vw, 1760px);   /* the body's width, padding included */
  --glow: 0 0 18px rgba(0, 235, 170, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
::selection { background: var(--brand-deep); }

/* type scale: rem-based so large displays scale everything at once */
@media (min-width: 1800px) { html { font-size: 17px; } }
@media (min-width: 2560px) { html { font-size: 18px; } }

body {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.6;
  letter-spacing: 0.02em;
  background: var(--bg);
  color: var(--text);
  padding: 32px 24px;
  max-width: var(--page-width);
  margin: 0 auto;
}

h1 {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: 1.75rem;
  letter-spacing: -0.02em;
  margin-bottom: 24px;
}
h1::after { content: '.'; color: var(--neon); }
h2 {
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 28px 0 12px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
  color: var(--text-2);
  text-transform: lowercase;
  letter-spacing: 0.08em;
}
h2::before { content: '// '; color: var(--neon); }
h2.first { margin-top: 0; }
/* inline updated/source note next to a section headline */
h2 .meta {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 8px;
}

nav { display: flex; gap: 16px; margin-bottom: 28px; flex-wrap: wrap; }
nav a { color: var(--text-3); text-decoration: none; }
nav a:hover { color: var(--text); }
nav a.active { color: var(--neon); }
nav a.active::before { content: '['; }
nav a.active::after { content: ']'; }
.nav-brand { margin-left: auto; color: var(--neon); font-weight: 600; text-decoration: none; }
nav a.nav-brand:hover { color: var(--neon); }
.nav-brand .nav-version { color: var(--text-2); font-weight: 400; font-size: 0.85em; margin-left: 6px; }

.tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.tabs a {
  color: var(--text-2);
  text-decoration: none;
  padding: 4px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.tabs a:hover { color: var(--neon); border-color: var(--brand-emerald); }
.tabs a.active { color: var(--bg); background: var(--neon); border-color: var(--neon); font-weight: 700; }
.subtabs { margin-top: -8px; }
/* the way back from a detail page to its list, first in the tab lane, never active */
.tabs a.tab-back { color: var(--text-3); border-color: transparent; padding-left: 0; }
.tabs a.tab-back:hover { color: var(--neon); border-color: transparent; }

/* metric cells (brandbook UI kit) */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 960px) {
  .tiles { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
}
.tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 18px 20px;
  text-decoration: none;
  color: var(--text);
}
.tile:hover { background: var(--surface-elev); border-color: var(--brand-emerald); }
.tile.dragging { opacity: 0.5; }
.tile-label {
  color: var(--text-3);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.tile-label::before { content: '● '; color: var(--neon); font-size: 0.5rem; vertical-align: 2px; }
.tile-value {
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.4rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}
.tile-detail { color: var(--text-3); font-size: 0.8125rem; overflow-wrap: anywhere; }
.tile-trend { width: 100%; height: 28px; margin-top: 2px; }
.trend-frustration { fill: var(--rose); }
.trend-positive { fill: var(--brand-emerald); }
.tile-filter { display: flex; gap: 10px; font-size: 0.75rem; }
.tile-filter-link { color: var(--text-3); text-decoration: none; }
.tile-filter-link:hover { color: var(--text); }
.tile-filter-active { color: var(--brand-emerald); }
.tile-value-split { display: flex; align-items: baseline; gap: 8px; }
.tile-value-split a { text-decoration: none; }
.tile-value-split a:hover { text-decoration: underline; }
/* a tile with a filter row is a div, so its value carries the link */
.tile-value-link { color: var(--text); text-decoration: none; }
.tile-value-link:hover { color: var(--neon); }
/* label left, a compact control (the usage plan) in the top-right corner */
.tile-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tile-plan select { font-size: 0.6875rem; padding: 2px 6px; }
.tile-detail .tile-plan { display: inline; }
/* the session report's cost tile: one unit at a time, chosen by the chips in its head */
.tile-units { display: inline-flex; gap: 6px; }
.tile-units button.badge { border: none; cursor: pointer; font-family: var(--font-mono); }
.tile-units button.badge:hover { box-shadow: none; color: var(--neon); }
.tile-units button.badge-ok:hover { color: var(--bg); }
.tile-units button.badge:disabled { cursor: default; opacity: 0.6; }
.tile-cost[data-cost-unit="plan"] .u-usd,
.tile-cost[data-cost-unit="usd"] .u-plan { display: none; }
.tile-value-sep { color: var(--text-dim); }
.split-frustration { color: var(--rose); }
.split-positive { color: var(--brand-emerald); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.card .label {
  flex: 1 1 auto;
  min-width: min(240px, 100%);
  font-size: 0.875rem;
  overflow-wrap: anywhere;
}
.card .meta {
  font-size: 0.8125rem;
  color: var(--text-3);
  white-space: normal;
  overflow-wrap: anywhere;
}
.card a { color: var(--text); }
.card a:hover { color: var(--neon); }
/* nowrap: a wrapping column takes its widest child's content width as the
   line width, so a wide table would spill out of the card instead of scrolling */
.card-column { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.card-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* generic key card: head row (key left, badges and docs pinned top-right), value
   row for lists and blocks, foot row (scalar control bottom-left, Toggle and
   Remove bottom-right) */
.card-config { gap: 8px; }
.card-config .card-head { flex-wrap: nowrap; align-items: flex-start; }
.card-config .card-head .label-key { flex: 1 1 0; min-width: 0; }
.card-config .card-tags { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.card-config .card-value { min-width: 0; }
.card-config .card-value > .list-editor, .card-config .card-value > .value-view { flex-basis: auto; width: 100%; }
.card-config .card-foot { justify-content: flex-end; }
.card-config .card-control { margin-right: auto; display: flex; align-items: center; }
.card-filter { flex-wrap: wrap; justify-content: flex-start; }
/* rows in sectioned filter cards always span the card — children wrap at the
   real card edge, never at the row's intrinsic width */
.card-filter > .card-row { width: 100%; }
/* action cards: buttons sit together on the left instead of space-between */
.card-actions { justify-content: flex-start; }
.card-filter label { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.filter-divider { width: 100%; border: none; border-top: 1px solid var(--line); margin: 4px 0; }
.repos-table { width: 100%; table-layout: fixed; }
.repos-table td { overflow-wrap: break-word; }
.repos-table th { overflow-wrap: normal; white-space: nowrap; }
.repos-table th:nth-child(1) { width: 22%; }
.repos-table th:nth-child(2) { width: 40%; }
.repos-table th:nth-child(3) { width: 15%; }
.repos-table th:nth-child(4) { width: 11%; }
.repos-table th:nth-child(5) { width: 12%; }
.inline-form label { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.inline-form input[type="checkbox"] { margin: 0; }
.inline-check { display: inline-flex; align-items: center; gap: 6px; }
/* add-repo lane: picker children join the form's flex row; the chosen-path
   line wraps below at full form width */
#repo-path { display: contents; }
#repo-add-form { flex: 1 1 auto; flex-wrap: wrap; margin-bottom: 0; }
#repo-add-form input[name="path"] { flex: 1 1 260px; }
.repo-chosen { flex-basis: 100%; }
#context-target { display: inline-flex; align-items: center; gap: 8px; }
.card-error { border-color: var(--rose); }
.card-disabled { opacity: 0.55; }
.meta.explanation {
  white-space: normal;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.875rem;
  letter-spacing: 0;
  color: var(--text-2);
}
.finding { margin-top: 10px; }
.finding .label { margin-left: 6px; }
.card .finding blockquote, .card .finding-card blockquote {
  margin: 4px 0 0 12px;
  border-left: 2px solid var(--brand-deep);
  padding-left: 8px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.finding blockquote.frustration { border-left-color: var(--rose); }
.finding blockquote.positive { border-left-color: var(--brand-emerald); }
.evidence-sessions { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.snippet { margin: 4px 0; }
.snippet summary { color: var(--text-2); cursor: pointer; }
.snippet pre { background: var(--surface); border: 1px solid var(--line); border-radius: 4px; margin: 4px 0 0; overflow-wrap: anywhere; padding: 6px 10px; white-space: pre-wrap; }
.card-proposal .finding { margin-top: 4px; }
.card-proposal > summary {
  display: flex;
  align-items: baseline;
  gap: 8px;
  cursor: pointer;
  list-style: none;
}
.card-proposal > summary::-webkit-details-marker { display: none; }
.card-proposal > summary { cursor: default; }
.card-proposal > summary .proposal-caret { cursor: pointer; padding: 0 4px; }
.card-proposal > summary .proposal-caret::before { content: '▸'; color: var(--text-3); }
.card-proposal[open] > summary .proposal-caret::before { content: '▾'; color: var(--neon); }
.card-proposal > summary .proposal-sha { color: var(--text-3); font-size: 0.75rem; }
.card-proposal .pick-one { color: var(--text-3); border-color: var(--line); padding: 1px 10px; font-size: 0.75rem; }
.card-proposal .pick-one:hover { color: var(--text); }
.card-proposal > summary .proposal-title { font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem; line-height: var(--proposal-line); color: var(--text); }
.pick-actions { display: flex; gap: 4px; margin-left: auto; align-self: center; }
.pick-actions button { padding: 1px 10px; }
.pick-form { display: contents; }
.proposal-body { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.session-card > summary, .entry-card > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  cursor: pointer;
}
.session-card > summary .label { flex: 1 1 auto; min-width: 240px; }
.session-card > summary .badge { max-width: 30ch; overflow: hidden; text-overflow: ellipsis; }
.session-card > summary::before, .entry-card > summary::before { content: '▸'; color: var(--text-3); }
.session-card[open] > summary::before, .entry-card[open] > summary::before { content: '▾'; color: var(--neon); }
input[type="checkbox"] { accent-color: var(--neon); }
.data-gaps { margin-top: 6px; color: var(--amber); }
.theme-list { margin-left: 20px; }
.origin { font-size: 0.75rem; color: var(--text-3); }
.description {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 0.9375rem;
  letter-spacing: 0;
  color: var(--text-2);
  white-space: normal;
}
.badge-version { margin-left: auto; }
/* skill card: label left across both rows, fixed-width status slots top right,
   remove bottom right — slot widths never depend on content, so cards don't shift */
.card-skill {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "label status" "label remove";
  grid-template-rows: auto 1fr;
  align-items: start;
  gap: 6px 24px;
}
.card-skill > .label { grid-area: label; min-width: 0; }
.skill-status {
  grid-area: status;
  display: grid;
  grid-template-columns: 6rem 7.75rem 10rem 6rem;
  align-items: center;
  column-gap: 6px;
}
/* The leading badge column (unset, smoke, state) is sized for what the page holds and right-aligned, so a missing badge leaves no gap. */
.skill-status.with-unset { grid-template-columns: 11.75rem 7.75rem 10rem 6rem; }
.skill-status.with-smoke { grid-template-columns: 13rem 7.75rem 10rem 6rem; }
.skill-status.with-unset.with-smoke { grid-template-columns: 18.75rem 7.75rem 10rem 6rem; }
.skill-status .slot { display: flex; align-items: center; min-width: 0; white-space: nowrap; }
.skill-status .slot-badges { justify-content: flex-end; gap: 8px; }
.skill-status .slot-version { justify-content: flex-end; gap: 6px; }
.card-skill .icon-button { padding: 0; display: inline-flex; color: var(--text-2); box-shadow: none; }
.card-skill .icon-button:disabled { color: var(--text-3); }
.card-skill .skill-deploy:not(:disabled) { color: var(--neon); }
.card-skill .skill-update:not(:disabled) { color: var(--amber); }
.card-skill .skill-blocked:not(:disabled) { color: var(--rose); }
.card-skill .skill-deploy:not(:disabled):hover { color: var(--text); }
.card-skill .skill-remove { grid-area: remove; justify-self: end; align-self: end; }
.card-skill .skill-remove:hover { color: var(--rose); }
@media (max-width: 1100px) {
  .card-skill { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label label" "status remove"; grid-template-rows: auto auto; }
  .card-skill .skill-remove { align-self: center; }
}
@media (max-width: 700px) {
  .skill-status { display: flex; flex-wrap: wrap; gap: 6px 8px; }
}
.skill-args { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.arg-chip {
  font-family: var(--font-sans);
  font-size: 0.6875rem;
  padding: 1px 7px;
  border-radius: 10px;
  background: var(--surface-elev);
  color: var(--text-3);
}
.skill-args-list { margin: 8px 0 0 20px; font-family: var(--font-sans); font-size: 0.9375rem; color: var(--text-2); }
.routines-layout { display: flex; flex-direction: column; gap: 16px; }
/* the list page nests its tables in one details.section per group, the routine page keeps one bare table */
.routines-layout table { width: 100%; max-width: 100%; table-layout: fixed; margin-bottom: 24px; }
.routines-layout table td { overflow-wrap: break-word; }
.routines-layout table th:nth-child(1) { width: 4%; }
.routines-layout table th:nth-child(2) { width: 10%; }
.routines-layout table th:nth-child(3) { width: 18%; }
.routines-layout table th:nth-child(4) { width: 10%; }
.routines-layout table th:nth-child(5) { width: 13%; }
.routines-layout table th:nth-child(6) { width: 34%; }
.routines-layout table th:nth-child(7) { width: 11%; }
/* Center the select radio in its column. */
.routines-layout table td:first-child { text-align: center; }
/* State/exit badges never wrap or clip inside a fixed-layout cell. */
.routines-layout table .badge { white-space: nowrap; }
.routines-layout table td:nth-child(2) { white-space: normal; }
.routine-group > table { margin-bottom: 0; }
#routine-configure { width: 100%; }
.run-cell { white-space: nowrap; }
/* Run-history week bands: clickable header rows folding the week's rows. */
.run-band td { cursor: pointer; user-select: none; color: var(--text-3); font-size: 0.8125rem; }
.run-band td::before { content: "▾ "; }
.run-band.collapsed td::before { content: "▸ "; }
.configure-form { width: 100%; }
.configure-form .card-row { margin-top: 10px; }
.configure-row { width: 100%; justify-content: flex-start; gap: 16px; }
.configure-row .configure-key { flex: 0 0 260px; }
.configure-row.env-path input { font-family: var(--font-mono); }
/* the section's side margin already insets the form; full width on top of it overflows */
.skill-env .configure-form { width: auto; }
/* interface rows carry several lines: the text takes the wide column, the override input the narrow one */
.skill-env .configure-row .configure-key { flex: 1 1 0; min-width: 0; overflow-wrap: anywhere; }
.skill-env .configure-row input[type="text"] { flex: 0 1 34%; }
/* capability rows sit beneath their provider */
.skill-env .env-capabilities { margin-left: 24px; }
/* command values take one command per line, in the same narrow column as the inputs */
.skill-env .configure-row textarea { flex: 0 1 34%; font-family: var(--font-mono); }
/* a value card's foot: the field takes the left half, the fallback note the rest */
.skill-env .card-config .card-foot { align-items: flex-start; }
.skill-env .card-config .card-control { flex: 0 1 50%; min-width: min(320px, 100%); }
.skill-env .card-config .card-control input, .skill-env .card-config .card-control textarea { flex: 1 1 auto; min-width: 0; font-family: var(--font-mono); }
.skill-env .card-config .card-foot > .meta { flex: 1 1 0; min-width: 0; text-align: right; }
/* the env setting holds the variable rows and their save as one widget; inner cards keep their own borders */
.skill-env .env-setting { padding: 12px; }
.skill-env .env-setting > .card:last-of-type { margin-bottom: 0; }
.skill-env .env-setting > .card-row { margin-top: 10px; }
/* the Environment tab shows the widget itself: no link back to it */
.on-environment-tab .env-tab-link { display: none; }
/* contracts, gate verdicts and program overrides stay folded below the save, behind a divider */
.skill-env .filter-divider { margin: 14px 0 6px; }
.skill-env details.advanced { margin-top: 4px; }
.skill-env details.advanced > summary { cursor: pointer; color: var(--text-2); }
.skill-env details.advanced[open] > summary { margin-bottom: 8px; }
.configure-row input[type="text"], .configure-row input[type="password"], .configure-row select, .configure-row textarea { flex: 1 1 auto; min-width: 0; }
/* Docker detail rows exist only while the container setting is on */
.configure-form:not(:has(.container-toggle option[value="1"]:checked)) .container-only { display: none; }
/* mounts: the picker is the input; the chosen-repo table sits under it at the same width and grows downward */
.mount-field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.mount-field .mount-pick { display: block; }
.mount-field .mount-pick > summary { overflow: hidden; text-overflow: ellipsis; }
/* the option list overlays upward: opening never resizes the row */
.mount-field .mount-pick > .reach-options { top: auto; bottom: calc(100% + 4px); right: 0; min-width: 0; max-height: 50vh; overflow-y: auto; }
.mount-field .mount-pick label { display: block; overflow: hidden; text-overflow: ellipsis; }
.mount-table { width: 100%; table-layout: fixed; border-collapse: collapse; }
.mount-table[hidden], .mount-table tr[hidden] { display: none; }
.mount-table .mount-access-col { width: 180px; }
.mount-table th, .mount-table td { border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left; }
.mount-table th { color: var(--text-3); font-weight: 600; }
.mount-table .mount-repo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mount-table select { width: 100%; }
#routine-ops form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#routine-ops form[data-op="reschedule"] label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 0.8125rem; color: var(--text-3); white-space: nowrap;
}
#routine-ops form[data-op="reschedule"] input[type="number"] { width: 10ch; padding-right: 4px; }
#routine-ops form[data-op="run"],
#routine-ops form[data-op="duplicate"] { display: flex; align-items: center; gap: 12px; }
/* the extra-prompt and suffix inputs share one compact width so the Run and
   Duplicate rows line up; placeholders may ellipse */
#routine-ops form[data-op="run"] input,
#routine-ops form[data-op="duplicate"] input { width: 20ch; text-overflow: ellipsis; }
#profile-tokens input { flex: 1 1 200px; }
/* Profile cards: heading, then the edited file's path, then the description */
/* Profile: the section heading sits above its card; inside, the edited file's path leads */
.profile-card { gap: 14px; padding: 20px 24px; }
.profile-path { margin: 0; }
.profile-settings { display: flex; flex-direction: column; gap: 16px; padding: 4px 0; }
.profile-settings .card-row { gap: 16px; min-height: 34px; }
.profile-settings .inline-check { gap: 10px; }
.profile-settings .card-row:last-child { margin-top: 8px; }
/* Installation: one block per component — its row, then the collapsed effects
   under it, so the next component's row never runs into an open list */
.install-row { display: flex; flex-direction: column; gap: 6px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.install-row:last-of-type { border-bottom: none; }
.install-name { gap: 10px; white-space: nowrap; }
.install-summary { color: var(--text-2); }
.install-health { margin-left: 28px; }
.install-detail { margin-left: 28px; }
.install-detail > summary { cursor: pointer; font-size: 0.8125rem; }
.install-effects { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; margin-top: 8px; }
.install-effect { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.install-effect ul { margin: 0; padding-left: 18px; font-size: 0.8125rem; color: var(--text-2); }
/* The Force sync preview's labels size to their text instead of stretching across the column, its lists indent inside the card. */
.force-preview .section-label { align-self: flex-start; }
.force-preview ul { margin: 0; padding-left: 18px; }
.install-effect li { margin-bottom: 4px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .install-effects { grid-template-columns: 1fr; } }
.reach-picker.skills-pick[hidden] { display: none; }
.reach-picker.skills-pick > summary { max-width: 60ch; overflow: hidden; text-overflow: ellipsis; }
/* the skill list is long: three columns, scrolling past half the viewport */
.reach-picker.skills-pick > .reach-options { max-height: 50vh; overflow-y: auto; display: grid; grid-template-columns: repeat(3, max-content); gap: 4px 20px; }
.reach-picker.skills-pick label.skill-unavailable { color: var(--text-dim); text-decoration: line-through; cursor: not-allowed; }
.install-preview ul { margin: 0; padding-left: 18px; }
.detail-head { display: flex; align-items: baseline; gap: 12px; }
.detail-meta { opacity: 0.6; margin-bottom: 16px; }
.badge-topic { opacity: 0.7; }
.hidden { display: none; }
button.topic-toggle { border: none; cursor: pointer; }
.reload-form { margin-bottom: 16px; }
.checklist-table { margin-bottom: 24px; }
/* runtime runs: consecutive equal anchors fold into one pill with a count; the last pill is where the run stands */
.anchor-track { display: inline-flex; flex-wrap: wrap; align-items: center; row-gap: 4px; }
.anchor-step {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-elev);
  color: var(--text-2);
  font-size: 0.75rem;
  white-space: nowrap;
}
.anchor-step + .anchor-step { position: relative; margin-left: 16px; }
.anchor-step + .anchor-step::before { content: '›'; position: absolute; left: -11px; color: var(--text-dim); }
.anchor-step:last-child { border-color: var(--brand-emerald); color: var(--text); }
.anchor-count { color: var(--neon); font-weight: 700; }
.table-scroll { overflow-x: auto; }
.table-scroll-y { max-height: 70vh; overflow-y: auto; }
.table-scroll-y thead th { position: sticky; top: 0; z-index: 1; background: var(--surface); }
.table-top-toggle { position: absolute; opacity: 0; pointer-events: none; }
.table-top-toggle:not(:checked) ~ .table-scroll .table-top tbody tr:nth-child(n+4),
.table-top-toggle:not(:checked) ~ .list-top > :nth-child(n+4) { display: none; }
/* run reports: rows older than the recent window carry row-old and hide until show all */
.table-top-toggle:not(:checked) ~ .table-scroll .table-recent tbody tr.row-old { display: none; }
.table-top-label { align-self: flex-start; cursor: pointer; color: var(--text-3); font-size: 0.8125rem; }
.table-top-label:hover { color: var(--neon); }
.table-top-toggle:focus-visible ~ .table-top-label { color: var(--neon); text-decoration: underline; }
.table-top-less { display: none; }
.table-top-toggle:checked ~ .table-top-label .table-top-more { display: none; }
.table-top-toggle:checked ~ .table-top-label .table-top-less { display: inline; }
/* Unpicked is the priority column: amber header, amber bold non-zero counts
   (links inherit it); zeros dim. GoLand-style ↗ ahead green, ↙ behind blue. */
.wt-unpicked-head { color: var(--amber); }
.wt-unpicked-hot, .checklist-table .wt-unpicked-hot a { color: var(--amber); font-weight: 700; }
.wt-ahead, .checklist-table .wt-ahead a { color: var(--brand-emerald); }
.wt-behind, .checklist-table .wt-behind a { color: var(--sky); }
.wt-zero, .checklist-table .wt-zero a { color: var(--text-dim); }
.checkout-line { margin: 4px 0 12px; }
/* The safe badge stays beside its checkbox, never wrapping underneath. */
.checklist-table td:first-child { white-space: nowrap; }
/* long repo names wrap at nameWrap's <wbr> token boundaries; break-word is the
   fallback. MUST stay below the .checklist-table nowrap rule above — equal
   specificity, source order decides, and the repos table carries both classes. */
.repos-table td:first-child { white-space: normal; overflow-wrap: break-word; }

/* section identifier: bordered label naming a control-panel row —
   square corners + outline so it never reads as a filter chip */
.section-label {
  /* real width, not flex-basis: Safari computes a wrapping row's intrinsic
     width from the label's content size, so a basis-only width makes the
     row too narrow and wraps its last item */
  flex: 0 0 auto;
  width: 90px;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-2);
  white-space: nowrap;
}
/* control-panel checkboxes sit at the right edge of their row */
.card-row .push-right { margin-left: auto; }

.badge {
  font-size: 0.6875rem;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.badge-ok { background: var(--brand-emerald); color: var(--bg); }
.badge-error { background: var(--rose); color: var(--bg); }
.badge-action { background: var(--amber); color: var(--bg); }
.badge-dim { background: var(--surface-elev); color: var(--text-2); }
.badge-warn { background: rgba(230, 195, 132, 0.18); color: var(--amber); border: 1px solid var(--amber); }
/* a chip that is a link reads as a chip, never as underlined text */
a.badge { text-decoration: none; }

.diff-view { padding: 8px 12px; }
.diff-add { color: var(--brand-emerald); }
.diff-del { color: var(--rose); }
.diff-skip { color: var(--text-2); }
.diff-hunk { color: var(--aqua); }

.toggle {
  position: relative;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute;
  inset: 0;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.2s;
}
.toggle .slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: var(--text-2);
  border-radius: 50%;
  transition: transform 0.2s, background 0.2s;
}
.toggle input:checked + .slider { background: var(--brand-deep); border-color: var(--brand-emerald); }
.toggle input:checked + .slider::before { transform: translateX(20px); background: var(--neon); }

.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.inline-form .grow { flex: 1; }
input[type="text"], input[type="search"], input[type="number"], input[type="password"], input[type="date"], select, textarea {
  background: var(--bg-1);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-family: var(--font-mono);
}
input[type="text"]:focus, input[type="search"]:focus, input[type="number"]:focus, input[type="password"]:focus, input[type="date"]:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--neon);
  box-shadow: 0 0 0 3px rgba(0, 235, 170, 0.12);
}
input[type="date"] { color-scheme: dark; }
textarea { width: 100%; resize: vertical; }
button {
  background: var(--neon);
  color: var(--bg);
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius);
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: var(--font-mono);
  transition: box-shadow 0.15s;
}
button:hover { box-shadow: var(--glow); }
button:disabled { opacity: 0.35; cursor: not-allowed; }
button:disabled:hover { box-shadow: none; }
/* ghost buttons (brandbook btn_ghost) */
button.small {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  padding: 3px 10px;
  font-size: 0.8125rem;
}
button.small::before { content: '[ '; color: var(--text-3); }
button.small::after { content: ' ]'; color: var(--text-3); }
button.small:hover { color: var(--neon); border-color: var(--brand-emerald); box-shadow: none; }
button.small:hover::before, button.small:hover::after { color: var(--brand-emerald); }

details.section { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); margin-bottom: 8px; }
details.section > summary { cursor: pointer; padding: 10px 16px; color: var(--text-2); }
details.section > summary:hover { color: var(--neon); }
details.section > summary::marker { color: var(--text-dim); }
details.section[open] > summary { border-bottom: 1px solid var(--line); color: var(--text); }
details.section > :not(summary) { margin: 12px 16px; }
/* Sessions context list: one collapsible day per local day, one grid row per session */
.context-day-body { display: flex; flex-direction: column; gap: 4px; }
.context-day-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; cursor: pointer; list-style: none; }
.context-day-head::-webkit-details-marker { display: none; }
.context-day-head::before { content: '▸'; color: var(--text-dim); }
details.context-day[open] > .context-day-head::before { content: '▾'; }
/* soft divider between days: inset from the card edges, dimmer than a card line */
.context-day + .context-day { position: relative; padding-top: 18px; }
.context-day + .context-day::before {
  content: '';
  position: absolute;
  top: 0;
  left: 12%;
  right: 12%;
  border-top: 1px solid var(--line);
  opacity: 0.5;
}
.session-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 12px;
  padding: 6px 12px;
  background: var(--surface-2);
  border-radius: var(--radius);
  font-size: 0.875rem;
}
.session-row-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.session-row-meta { color: var(--text-3); font-size: 0.8125rem; white-space: nowrap; }
.session-row-links { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; white-space: nowrap; }
.session-row-links a { color: var(--text-3); }
.session-row-links a:hover { color: var(--neon); }
@media (max-width: 700px) {
  .session-row { grid-template-columns: minmax(0, 1fr) auto; }
  .session-row-title { grid-column: 1 / -1; }
}
.section-controls { display: flex; gap: 8px; margin-bottom: 12px; }
.section-controls-inline { margin-left: 8px; }
.unit-switch { display: flex; align-items: center; gap: 8px; margin-left: 16px; cursor: pointer; }
/* one unit at a time: the report container's data-unit hides the other unit's cells and figures */
#context-report[data-unit="tokens"] .u-chars,
#context-report[data-unit="chars"] .u-tokens { display: none; }

/* session report: one collapsible family per id prefix; a chip's short
   title keeps its natural case beside the uppercase id */
details.id-family { margin-bottom: 6px; }
details.id-family > summary { padding: 6px 12px; }
.id-chip { display: inline-block; margin: 2px 0; }
.chip-title { text-transform: none; letter-spacing: 0; }
.report-tiles { margin-bottom: 12px; }
.report-meta { margin-bottom: 20px; }
.report-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.report-group-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.report-group-head .meta { overflow-wrap: anywhere; }
details.section > .theme-list { padding-left: 20px; }
.id-family-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 6px; align-items: start; }
.id-family-grid details.id-family { margin-bottom: 0; }
.files-search { width: 100%; max-width: 480px; margin-bottom: 12px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); padding: 6px 10px; font: inherit; }
.files-search:focus { border-color: var(--brand-emerald); outline: none; }
.files-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.files-table th, .files-table td { border-bottom: 1px solid var(--line); padding: 4px 10px; text-align: left; }
.files-table th { color: var(--text-3); font-weight: 600; }
.files-table td:first-child { overflow-wrap: anywhere; }
.files-table th:not(:first-child), .files-table td:not(:first-child) { width: 1%; white-space: nowrap; }
details.section > table { width: calc(100% - 32px); }
details.section > table td { vertical-align: top; }
/* session report: a section row is one line; its detail row opens on click */
tr.row-toggle { cursor: pointer; }
tr.row-toggle:hover td { background: var(--surface); }
tr.row-toggle td:first-child::before { content: '▸ '; color: var(--text-3); }
tr.row-toggle.row-open td:first-child::before { content: '▾ '; }
tr.row-toggle.row-plain { cursor: default; }
tr.row-toggle.row-plain td:first-child::before { content: ''; }
tr.row-detail td { padding: 4px 10px 12px 24px; white-space: normal; width: auto; }
tr.row-detail[hidden] { display: none; }
.row-text { white-space: pre-wrap; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-2); max-height: 320px; overflow: auto; margin: 6px 0; }
.agent-lines { color: var(--text-2); font-size: 0.8125rem; margin: 0 0 6px; padding-left: 16px; }
#agent-table tr.agent-dim td { opacity: 0.45; }

/* session report sections: a header whose figures sit in fixed columns, so the
   stack of section headers reads as one overview table; looser spacing */
details.report-section { margin-bottom: 18px; }
details.report-section > summary.section-head {
  display: grid;
  /* the badge column is fixed: an auto column sized per header would shift every other column */
  grid-template-columns: minmax(240px, 1fr) 56px 150px 110px 200px;
  align-items: center;
  column-gap: 16px;
  padding: 14px 20px;
  list-style: none;
}
details.report-section > summary.section-head::-webkit-details-marker { display: none; }
details.report-section > summary.section-head .sh-title::before { content: '▸ '; color: var(--text-dim); }
details.report-section[open] > summary.section-head .sh-title::before { content: '▾ '; }
.sh-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.sh-count { text-align: right; }
details.report-section > summary.section-head .sh-count .count-note { margin-left: 0; }
.sh-num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sh-pending { color: var(--text-3); }
.sh-tags { display: flex; gap: 6px; justify-self: end; }
/* touched files: a fixed name width puts every group's count pill in one column */
.touched-group-name { display: inline-block; min-width: 10ch; }
/* report badges read at table size and never wrap, in the headers and in the hook column alike */
details.report-section .st-tag { font-size: 11px; padding: 2px 6px; white-space: nowrap; }
details.report-section > :not(summary) { margin: 16px 20px; }
.table-scroll tr.row-detail td, .table-scroll tr.feature-detail td { white-space: normal; }
.warn-mark { color: var(--amber); margin-left: 4px; cursor: help; }
.feature-toggle { background: none; border: none; padding: 0; color: var(--text); font: inherit; font-family: var(--font-mono); cursor: pointer; }
.feature-toggle::before { content: '▸ '; color: var(--text-3); }
tr.row-open .feature-toggle::before { content: '▾ '; }
.feature-toggle:hover { color: var(--neon); }
tr.feature-detail td { padding: 8px 12px 16px 28px; }
tr.feature-detail[hidden] { display: none; }
.feature-events { margin: 0; padding-left: 16px; color: var(--text-2); }
#feature-table { margin-bottom: 24px; }
#feature-table .st-tag + .st-tag { margin-left: 6px; }
details.report-section > .section-tools { display: flex; justify-content: flex-start; gap: 8px; margin-bottom: 4px; }
details.report-section .files-table th, details.report-section .files-table td,
#agent-table th, #agent-table td { padding: 8px 12px; }
tr.row-detail td { padding: 8px 12px 16px 28px; }
#agent-card { margin-bottom: 24px; padding: 18px 20px; }
#agent-card .card-row { margin-bottom: 12px; }
.agent-chips { margin: 0 0 16px; }
.pending-note { margin: 12px 0 0; }
.section-label.section-label-fit { width: auto; }
@media (max-width: 860px) {
  details.report-section > summary.section-head { display: flex; flex-wrap: wrap; gap: 6px 16px; }
  details.report-section > summary.section-head .sh-title { flex: 1 0 100%; }
  .sh-num, .sh-count { text-align: left; }
  .sh-tags { justify-self: start; }
}

/* session report: paths relative to the session, prefix on click */
.path { cursor: pointer; overflow-wrap: anywhere; }
.path-prefix { display: none; color: var(--text-3); }
.path.path-full .path-prefix { display: inline; }

/* session report: sortable agent table and type chips */
th[data-sort] { cursor: pointer; user-select: none; }
th[data-sort]:hover { color: var(--neon); }
th[data-sort][data-dir="asc"]::after { content: ' ▲'; }
th[data-sort][data-dir="desc"]::after { content: ' ▼'; }
.agent-kind { color: var(--text-3); font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.05em; margin-right: 6px; }
#agent-table td:first-child, #agent-table th:first-child { width: 1%; white-space: nowrap; }
#agent-table td:nth-child(2), #agent-table th:nth-child(2) { width: auto; white-space: normal; }
#agent-table .meta { overflow-wrap: normal; white-space: nowrap; }
#agent-table td:nth-child(2) .meta { white-space: normal; }
.agent-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 12px; }
.pending-note { color: var(--text-2); font-size: 0.8125rem; margin: 8px 0 0; }

/* session report: skill pill beside the version pill */
.skill-pill { font-family: var(--font-mono); font-size: 0.8125rem; padding: 0 8px; border-radius: 10px; border: 1px solid var(--brand-deep); color: var(--neon); }

details.section > summary .badge {
  margin-left: 6px;
  text-decoration: none;
}

/* nested bars + always-visible count pill on section summaries */
details.section .section-sub { margin: 10px 12px; background: var(--surface-2); }
details.section > summary .count-note { margin-left: 6px; text-decoration: none; }
.count-note {
  display: inline-block;
  min-width: 2.2em;
  text-align: center;
  font-size: 0.6875rem;
  font-weight: 700;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--text-3);
}

.list-editor { display: flex; flex-direction: column; gap: 4px; flex-basis: 100%; }
.list-item { display: flex; align-items: center; gap: 8px; background: var(--surface-2); border-radius: var(--radius); padding: 4px 8px; }

/* a disclosure that folds an add form under a list: its summary and open form
   row take the list item's padding and background (D8) */
.list-add > summary { cursor: pointer; padding: 4px 8px; color: var(--text-3); }
.list-add > summary:hover { color: var(--neon); }
.list-add .inline-form { margin: 4px 0 0; padding: 4px 8px; background: var(--surface-2); border-radius: var(--radius); }

/* nested groups inside a section (hook events, permission heads): a tighter
   summary than the top-level sections, and no margin stacking */
/* permission heads: title left, the count and state badges right, like the hooks cards */
details.perm-head > summary { display: flex; align-items: center; gap: 8px; list-style: none; }
details.perm-head > summary::-webkit-details-marker { display: none; }
details.perm-head > summary::before { content: '▸'; color: var(--text-dim); }
details.perm-head[open] > summary::before { content: '▾'; color: var(--neon); }
details.perm-head > summary .summary-tags { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; }
details.perm-head > summary .summary-tags .badge { margin-left: 0; }
.perm-list-head { display: flex; align-items: center; gap: 8px; }
.perm-list-head .badge { margin-left: auto; }
.card-actions .push-right { margin-left: auto; }
details.hook-event, details.perm-head { margin: 0 0 6px; }
details.hook-event > summary, details.perm-head > summary { padding: 6px 12px; }
details.hook-event > :not(summary), details.perm-head > :not(summary) { margin: 8px 12px; }

/* a hook card's command and script sources fold under one disclosure; the
   command wraps inside the card instead of widening it */
.hook-command > summary { cursor: pointer; }
.hook-command > pre.file-view { margin-top: 4px; white-space: pre-wrap; overflow-wrap: anywhere; }
.card-disabled .label { color: var(--text-3); }
.value-view, pre.file-view {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow-x: auto;
  font-size: 0.8125rem;
  white-space: pre-wrap;
}
.value-view {
  background: var(--surface-2);
  color: var(--aqua);
  padding: 8px 12px;
}
/* repo-fragment value reveal (D1b): a structured value renders as a wrapping,
   scrollable block on its own line — never an overflowing inline string. */
.repo-view { flex-basis: 100%; margin-top: 4px; }
.repo-scalar { font-size: 0.8125rem; color: var(--text-3); overflow-wrap: anywhere; }
/* a long list-item value wraps within its space; the remove button holds its
   size and never collapses onto two lines. */
.list-item .label { min-width: 0; }
.list-item > button { flex-shrink: 0; }
/* terminal window (brandbook signature component) */
pre.file-view {
  position: relative;
  background: var(--bg-1);
  color: var(--text-2);
  border-radius: var(--radius-lg);
  padding: 0 14px 14px;
  line-height: 1.6;
}
pre.file-view::before {
  content: '';
  display: block;
  height: 30px;
  margin: 0 -14px 12px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(circle at 20px 15px, var(--rose) 4.5px, transparent 5.5px),
    radial-gradient(circle at 38px 15px, var(--amber) 4.5px, transparent 5.5px),
    radial-gradient(circle at 56px 15px, var(--neon) 4.5px, transparent 5.5px);
}
/* no data-close: the content is always present, so the rose dot is drawn dim and inert */
pre.file-view:not([data-close])::before {
  background-image:
    radial-gradient(circle at 20px 15px, var(--text-dim) 4.5px, transparent 5.5px),
    radial-gradient(circle at 38px 15px, var(--amber) 4.5px, transparent 5.5px),
    radial-gradient(circle at 56px 15px, var(--neon) 4.5px, transparent 5.5px);
}
pre.file-view.minimized { height: 31px; padding-bottom: 0; overflow: hidden; }
pre.file-view.maximized {
  position: fixed;
  inset: 24px;
  z-index: 1000;
  margin: 0;
  overflow: auto;
  box-shadow: var(--glow);
}
/* window-card: the terminal chrome on a card widget (configure). Only the
   rose close dot — no minimize/maximize. */
.window-card { position: relative; overflow: hidden; }
.window-card::before {
  content: '';
  display: block;
  width: calc(100% + 32px);
  height: 30px;
  margin: -12px -16px 4px;
  border-bottom: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: var(--bg-2);
  background-image:
    radial-gradient(circle at 20px 15px, var(--rose) 4.5px, transparent 5.5px);
}
.term-dot {
  position: absolute;
  top: 7px;
  width: 16px;
  height: 16px;
  padding: 0;
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.term-dot:hover { box-shadow: none; }

.empty { color: var(--text-3); font-style: italic; padding: 12px; }
.error-banner { background: var(--rose); color: var(--bg); padding: 8px 16px;
                border-radius: var(--radius); margin-bottom: 12px; display: none; }

.md-body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: 1.0625rem;
  line-height: 1.55;
  letter-spacing: 0;
}
.md-body p, .md-body ul, .md-body ol, .md-body table, .md-body pre { margin: 10px 0; }
.md-body li { margin-left: 20px; }
.md-body code {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  background: var(--surface-2);
  color: var(--aqua);
  padding: 1px 5px;
  border-radius: 4px;
}
.md-body pre { background: var(--bg-1); border: 1px solid var(--line); padding: 12px; border-radius: var(--radius); overflow-x: auto; }
.md-body pre code { background: none; color: var(--text-2); padding: 0; }
.md-body table { border-collapse: collapse; font-size: 0.9375rem; }
.md-body th, .md-body td { border: 1px solid var(--line); padding: 4px 10px; }
.md-body blockquote { border-left: 3px solid var(--brand-deep); padding-left: 12px; color: var(--text-2); }
.md-body a { color: var(--neon); }

/* ---- skill-doc: readable SKILL.md rendering ---- */
.md-body.skill-doc { max-width: 88ch; }
.skill-doc > h1:first-child { display: none; }
.skill-doc h2 { margin: 32px 0 12px; }
.skill-doc h3 { font-size: 1.05rem; font-weight: 600; margin: 22px 0 8px; }
.skill-entry {
  background: var(--surface);
  border-left: 3px solid var(--brand-deep);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 18px 0 8px;
}
.skill-entry-head {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.skill-entry-id {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--aqua);
}
.skill-entry-chip {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.6;
  padding: 0 7px;
  border-radius: 10px;
  border: 1px solid var(--text-3);
  color: var(--text-3);
}
.chip-step { border-color: var(--brand-deep); color: var(--brand-deep); }
.chip-gate { border-color: var(--rose); color: var(--rose); }
.chip-review { border-color: var(--amber); color: var(--amber); }
.chip-payload { border-color: var(--neon); color: var(--neon); }
.chip-hook { border-color: var(--aqua); color: var(--aqua); }
.chip-manual { border-color: var(--brand-emerald); color: var(--brand-emerald); }
.skill-entry-step { border-left-color: var(--brand-deep); }
.skill-entry-gate { border-left-color: var(--rose); }
.skill-entry-review { border-left-color: var(--amber); }
.skill-entry-payload { border-left-color: var(--neon); }
.skill-entry-hook { border-left-color: var(--aqua); }
.skill-entry-lint { border-left-color: var(--text-3); }
.skill-entry-manual { border-left-color: var(--brand-emerald); }
.skill-entry p.skill-entry-title { margin: 0 0 6px; }
.skill-entry > ul, .skill-entry > table, .skill-entry > pre { margin: 8px 0 4px; }
.skill-entry a[href^="#skill-"], .skill-doc a[href^="#skill-"] {
  color: var(--aqua);
  text-decoration: none;
  border-bottom: 1px dotted var(--aqua);
}
.skill-invocation { margin: 14px 0 6px; }
.skill-invocation pre {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  line-height: 1.7;
  background: none;
  border: none;
  margin: 4px 0 6px;
  padding: 0 0 0 12px;
  color: var(--text-3);
  overflow-x: auto;
}
.skill-tools { margin: 6px 0 14px; }
.tool-group {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 8px;
  align-items: baseline;
  margin: 7px 0;
}
.tool-group-key {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--text-3);
}
.tool-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tool-chip {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  background: var(--surface-2);
  border-radius: 4px;
  padding: 1px 7px;
  color: var(--text-2);
}
.skill-toc {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 16px;
  margin: 16px 0;
}
.skill-toc ol {
  columns: 3 220px;
  column-gap: 28px;
  margin: 0;
  padding-left: 20px;
}
.skill-toc li { font-size: 0.875rem; margin: 2px 0; color: var(--text-3); }
.skill-toc a { color: var(--text-2); text-decoration: none; }
.skill-toc a:hover { color: var(--neon); }

/* ---- permission chips: applyable rules inside rendered docs ---- */
.perm-chip { display: inline-flex; align-items: center; gap: 0.3em; }
.perm-apply {
  border: 1px solid var(--brand-emerald);
  color: var(--brand-emerald);
  background: transparent;
  border-radius: 10px;
  font-size: 0.72em;
  padding: 0 0.5em;
  line-height: 1.5;
  cursor: pointer;
}
.perm-apply:hover { background: var(--brand-emerald); color: var(--bg); }
.perm-apply-parked { border-color: var(--amber); color: var(--amber); }
.perm-apply-parked:hover { background: var(--amber); color: var(--bg); }

/* ---- reach picker: dropdown with checkboxes (detail pages + filter bar) ---- */
.reach-picker { position: relative; display: inline-block; }
.reach-picker > summary {
  list-style: none;
  cursor: pointer;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 0.875rem;
  white-space: nowrap;
}
.reach-picker > summary::-webkit-details-marker { display: none; }
.reach-picker > summary::after { content: " ▾"; color: var(--text-dim); }
.reach-picker[open] > summary { color: var(--neon); border-color: var(--neon); }
.reach-picker > .reach-options {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 20;
  min-width: max-content;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 10px 14px;
  background: var(--surface-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}
.reach-options label { display: flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-2); font-size: 0.875rem; }

/* ---- skill Tests tab — entry score heatmap ---- */
.score-matrix .score-rule { max-width: 420px; overflow-wrap: anywhere; }
.score-cell { text-align: center; font-weight: 700; width: 2.4em; }
.score-pos { color: var(--brand-emerald); background: rgba(16, 185, 129, 0.16); }
.score-neg { color: var(--rose); background: rgba(255, 107, 122, 0.18); }
.score-zero { color: var(--amber); background: rgba(255, 181, 71, 0.16); }
.score-absent { color: var(--text-dim); opacity: 0.5; }
tr.score-group td { background: var(--surface-elev); border-top: 1px solid var(--line); }
.score-topic { font-weight: 700; letter-spacing: 0.04em; }
.score-bar { display: inline-flex; width: 120px; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface); vertical-align: middle; margin: 0 8px; }
.score-bar .seg-pos { background: var(--brand-emerald); }
.score-bar .seg-zero { background: var(--amber); }
.score-bar .seg-neg { background: var(--rose); }

/* ---- welcome page ---- */
.welcome-progress { color: var(--text-2); margin-bottom: 16px; }
.welcome-progress-count { color: var(--neon); font-weight: 700; }
.check-row { display: flex; align-items: baseline; gap: 12px; }
.check-name { min-width: 220px; }
.check-detail { color: var(--text-3); font-size: 0.8125rem; flex: 1; word-break: break-word; }
.fix { margin-top: 8px; background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
       padding: 8px 12px; font-size: 0.8125rem; color: var(--text-2); }
.fix .fix-label { color: var(--amber); }
button.verify-button { background: transparent; color: var(--neon); border: 1px solid var(--brand-emerald);
                       border-radius: var(--radius); padding: 2px 10px; font: inherit; font-size: 0.75rem; cursor: pointer; }
button.verify-button:hover { background: var(--surface-elev); }
.verify-result { margin-top: 8px; }
#verify-indicator { color: var(--amber); font-size: 0.75rem; }
.welcome-section { margin-bottom: 8px; }
.welcome-section p { margin-bottom: 10px; max-width: 900px; }
.welcome-try { color: var(--text-3); }
.welcome-code { background: var(--bg-1); border: 1px solid var(--line); border-radius: var(--radius);
                padding: 10px 14px; font-size: 0.8125rem; overflow-x: auto; margin-bottom: 10px; }

/* ---- routines: per-session lines in the Session cell (short ids) ---- */
.session-cell .session-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.session-line .session-title { flex: 0 1 auto; white-space: nowrap; }
.session-line .meta { flex: 0 0 auto; white-space: nowrap; }

/* ---- routines: steer icon (table's top-left square) + panel ---- */
.row-tools { white-space: nowrap; }
.icon-button { cursor: pointer; background: none; border: none; color: var(--text-3);
               font: inherit; padding: 0 4px 0 0; line-height: 1; }
.icon-button:hover { color: var(--neon); }
.icon-button:disabled { opacity: 0.35; cursor: default; }
.steer-th form { margin: 0; }
/* width:0 + min-width:100% stops long steer prompts from widening the page;
   the list scrolls instead of growing without bound. */
.steer-panel-body { width: 0; min-width: 100%; }
.steer-form { display: flex; gap: 8px; margin: 8px 0; }
.steer-form input[name="prompt"] { flex: 1 1 auto; }
.steer-list { max-height: 200px; overflow-y: auto; }
.steer-list .steer-line { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; min-width: 0; }
.steer-line .meta { flex: 0 0 auto; white-space: nowrap; }
.steer-line .steer-prompt-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }

/* ---- routines: the ops card's selected-routine badge holds a full name ---- */
#ops-selected { width: auto; min-width: 90px; padding: 0 10px; }

/* ---- skill tests: combined hero + Result table + golden bar + history ---- */
.eval-hero { margin: 12px 0; position: relative; }
/* Hero tiles never wrap and never overflow — exactly two tile rows that
   compress to the viewport (the page must fit the screen, no horizontal
   scrolling); values stay one line, labels wrap inside the tile. */
.eval-hero .eval-tile-row { flex-wrap: nowrap; }
.eval-hero .eval-tile { flex: 1 1 0; min-width: 0; padding: 6px 8px; }
.eval-hero .eval-tile-value { white-space: nowrap; }
.eval-hero .eval-tile-big { padding: 8px 10px; }
.eval-hero .eval-tile-big .eval-tile-value { font-size: clamp(0.95rem, 1.3vw, 1.4rem); }
.eval-interpretation { margin: 12px 0; }
.eval-hero-headline { font-size: 1.1rem; font-weight: 700; }
.eval-hero-armline { margin-top: 2px; }
.result-scroll { margin: 8px 0; }
tr.arm-invalid td { opacity: 0.6; }
.tok-approx { color: var(--text-3); font-style: italic; }
.eval-tile-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.eval-tile { border: 1px solid var(--line); border-radius: 6px; padding: 8px 12px; min-width: 92px; background: var(--surface); }
.eval-tile-big { padding: 12px 16px; }
.eval-tile-big .eval-tile-value { font-size: 1.9rem; color: var(--neon); }
.eval-tile-value { display: block; font-weight: 700; font-size: 1.1rem; }
.eval-tile-label { display: block; color: var(--text-3); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.eval-tile-big.tile-pass .eval-tile-value { color: var(--neon); }
.eval-tile-big.tile-fail .eval-tile-value { color: var(--rose); }
.history-featured td { color: var(--neon); }
.table-scroll table th, .table-scroll table td { white-space: nowrap; }

/* ---- skill tests: config widget, minutes bar, minute prices, interpretation bullets, golden card, artifacts ---- */
.eval-config { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 20px; }
.eval-chip { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; background: var(--surface); color: var(--text-2); font-size: 0.8rem; white-space: nowrap; }
.eval-chip-env { text-transform: uppercase; font-weight: 700; color: var(--neon); border-color: var(--neon); }
.minutes-bar { position: relative; display: flex; height: 14px; border-radius: 4px; overflow: visible; background: var(--surface-elev); margin: 12px 0 4px; }
.minutes-bar .seg { height: 100%; }
.minutes-bar .seg:first-child { border-radius: 4px 0 0 4px; }
.seg-escaped { background: var(--rose); }
.seg-fp { background: var(--amber); }
.seg-found { background: var(--brand-emerald); }
.minutes-bar .tick { position: absolute; top: -4px; width: 2px; height: 22px; margin-left: -1px; background: var(--text); }
.minutes-bar .tick-null { background: var(--text-3); }
.minutes-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.minutes-legend .swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.severity-breakdown { margin: 12px 0; }
.severity-breakdown td { white-space: nowrap; }
.breakdown-notes { margin: 8px 0 4px; padding-left: 18px; }
.severity-breakdown tr.triage-line td { border-bottom: 2px solid var(--amber); }
.severity-breakdown tr.breakdown-total td { font-weight: 700; border-top: 2px solid var(--line); }
.cell-found { color: var(--brand-emerald); }
.cell-missed { color: var(--amber); }
.cell-fp { color: var(--rose); }
.eval-bullets { margin: 4px 0 6px; padding-left: 18px; }
.eval-bullets li { margin: 2px 0; }
.card-golden { margin: 12px 0; border-color: var(--amber); border-left-width: 5px; }
.card-golden > .label { color: var(--amber); }
.artifact-table td:first-child { white-space: nowrap; }

/* ---- Graph view (st-*) — interactive model view ---- */
.st-warnings ul { margin: 6px 0 0 18px; padding: 0; color: var(--text-2); font-size: 12px; }
.st-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.st-btn { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 3px 10px; font: 12px var(--font-sans); cursor: pointer; }
.st-btn:hover { color: var(--text); border-color: var(--brand-emerald); }
.st-zoom { font: 12px var(--font-mono); color: var(--text-3); min-width: 42px; text-align: center; }
.st-sep { width: 1px; height: 18px; background: var(--line); }
.st-filter { background: var(--surface); color: var(--text); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 4px 8px; font: 12px var(--font-sans); min-width: 180px; }
.st-toggle { font: 12px var(--font-sans); color: var(--text-3); display: inline-flex; align-items: center; gap: 4px; }
.st-tier { margin-left: auto; font: 12px var(--font-mono); color: var(--text-dim); }
.st-viewport { position: relative; overflow: hidden; height: 78vh; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--bg-1); cursor: grab; }
.st-viewport.st-grabbing { cursor: grabbing; }
.st-viewport { -webkit-user-select: none; user-select: none; }
.st-canvas { position: absolute; transform-origin: 0 0; min-width: 100%; }
.st-edges { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.st-edge { fill: none; stroke-width: 1.5; }
.st-edge-flow { stroke: var(--brand-emerald); }
.st-edge-label { fill: var(--text-3); font: 10px var(--font-mono); }
.st-grid { display: grid; grid-template-columns: repeat(3, max-content); column-gap: 44px; justify-content: center;
  align-items: start; padding: 16px; width: max-content; min-width: 100%; box-sizing: border-box; }
.st-spine { grid-column: 2; grid-row: 2; display: flex; flex-direction: column; gap: 44px; }
.st-rail { grid-column: 3; grid-row: 2; display: flex; flex-direction: column; gap: 14px; }
.st-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); max-width: 680px; }
.st-card > summary { list-style: none; cursor: pointer; padding: 8px 16px; display: flex; align-items: center;
  gap: 6px; flex-wrap: wrap; }
.st-card > summary::-webkit-details-marker { display: none; }
.st-card > summary:active { cursor: grabbing; }
.st-card.st-dragging { position: relative; z-index: 5; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
.st-card-title { font: 600 13px var(--font-sans); color: var(--text); }
.st-counts { font: 11px var(--font-mono); color: var(--text-dim); margin-left: auto; }
.st-kind-phase { border-color: var(--brand-deep); }
.st-kind-route { border-color: var(--line); }
.st-card.st-route-active { border-color: var(--amber); }
.st-kind-context { border-color: var(--text-dim); opacity: 0.92; }
.st-kind-halt { border-color: var(--rose); }
.st-chip { font: 10px var(--font-mono); border-radius: 3px; padding: 1px 5px; white-space: nowrap; }
.st-kind-chip { background: var(--surface-elev); color: var(--text-3); text-transform: uppercase; }
.st-card.st-route-active > summary .st-kind-chip { color: var(--amber); }
.st-kind-context > summary .st-kind-chip { color: var(--text-dim); }
.st-kind-halt > summary .st-kind-chip { color: var(--rose); }
.st-pred { background: #1c2733; color: #7fb4ca; cursor: pointer; }
.st-post { background: #23301f; color: #98bb6c; }
.st-channel { background: var(--surface-elev); color: var(--amber); }
.st-compartment { border-top: 1px solid var(--line); padding: 6px 16px; }
.st-compartment-label { font: 10px var(--font-sans); color: var(--text-dim); text-transform: uppercase;
  letter-spacing: 1px; margin-bottom: 4px; }
.st-subsection { font: 11px var(--font-sans); color: var(--text-3); margin: 6px 0 2px; border-bottom: 1px dotted var(--line); }
.st-entry { display: flex; align-items: baseline; gap: 6px; padding: 2px 0; flex-wrap: wrap; cursor: pointer;
  border-radius: 3px; }
.st-entry:hover { background: var(--surface-2); }
.st-entry.st-indent { margin-left: 22px; }
.st-entry.st-stop .st-entry-title { color: var(--rose); }
.st-seq { font: 11px var(--font-mono); color: var(--text-dim); min-width: 20px; text-align: right; }
.st-entry-title { font: 12px var(--font-sans); color: var(--text-2); }
.st-fanout { color: var(--amber); font-size: 12px; }
.st-role { text-transform: uppercase; background: var(--surface-elev); color: var(--text-3); }
.st-role-step { color: #7fb4ca; }
.st-role-spawn { color: #e6c384; }
.st-role-substep { color: #957fb8; }
.st-role-verify { color: #98bb6c; }
.st-role-stop { color: #e46876; }
.st-role-rule { color: var(--aqua); }
.st-role-def { color: var(--text-3); }
.st-role-quality { color: var(--lime); }
.st-role-payload { color: var(--text-dim); }
.st-hide-formal .st-formal-chip { display: none; }
.st-clauses { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 4px; margin-left: 26px; }
.st-clauses .st-chip { white-space: normal; overflow-wrap: anywhere; }
.st-dim { opacity: 0.25; }
.st-hit { outline: 1px solid var(--brand-emerald); }
.st-flash { outline: 2px solid var(--neon); }
/* The stage spans the window: the graph box keeps the page's content width in
   the middle column, the panels sit outside it in the side columns. An open
   panel claims 360px; the box moves or narrows only as far as that needs. */
.st-stage { display: grid; column-gap: 12px; align-items: start;
  grid-template-columns: minmax(var(--st-left, 0px), 1fr) minmax(0, calc(var(--page-width) - 48px)) minmax(var(--st-right, 0px), 1fr);
  margin-inline: min(0px, calc((100% - 100vw) / 2 + 16px)); }
.st-stage:has(#st-warnings:not([hidden])) { --st-left: 360px; }
.st-stage:has(#st-panel:not([hidden])) { --st-right: 360px; }
.st-viewport { grid-column: 2; grid-row: 1; }
.st-panel { grid-column: 3; grid-row: 1; justify-self: start; width: min(400px, 100%); max-height: 78vh; overflow: auto;
  background: var(--surface-2); border: 1px solid var(--brand-deep); border-radius: var(--radius); padding: 12px; }
.st-panel-warnings { grid-column: 1; justify-self: end; }
.st-panel-warnings .st-panel-bar { justify-content: space-between; align-items: center; }
.st-panel-close { position: absolute; top: 6px; right: 8px; background: none; border: none; color: var(--text-3);
  font-size: 16px; cursor: pointer; }
.st-panel-head { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: var(--text); }
.st-panel-id { font: 10px var(--font-mono); color: var(--text-dim); margin-bottom: 8px; }
.st-panel-statement { font: 12px var(--font-sans); color: var(--text-2); margin: 0 0 8px; }
.st-panel-clause { font: 11px var(--font-mono); color: var(--text-3); margin: 2px 0; }
.st-panel-param { font: 11px var(--font-sans); color: var(--text-3); margin: 2px 0; }
.st-panel-refs { font: 11px var(--font-sans); margin-top: 8px; }
.st-panel-refs a { color: var(--neon); }

/* ---- Graph view refinement round 1 ---- */
.st-seq-stop { color: var(--rose); }
.st-hide-defs .st-slot-defs, .st-hide-rules .st-slot-rules, .st-hide-quality .st-slot-quality,
.st-hide-flow .st-slot-flow, .st-hide-payloads .st-slot-payloads { display: none; }
.st-conn-ref { stroke: var(--neon); stroke-dasharray: 4 4; }
.st-entry.st-focused { outline: 1px solid var(--rose); }
.st-entry.st-selected { background: var(--surface-2); box-shadow: inset 2px 0 0 var(--neon); }
.st-entry-card { position: relative; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); padding: 10px 12px; margin-bottom: 10px; }
.st-entry-card.st-flash { outline: 2px solid var(--neon); }
.st-panel-statement code, .st-panel-param code { color: var(--aqua); }
.st-ref-link { color: var(--neon); text-decoration: none; border-bottom: 1px dotted var(--neon); }
.st-payload { font: 11px var(--font-mono); color: var(--text-2); background: var(--bg-1);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px; max-height: 260px; overflow: auto;
  margin: 8px 0 0; white-space: pre; }
.st-refs-btn { margin-top: 8px; }

/* ---- Graph view refinement round 2 ---- */
.st-badges { display: grid; grid-template-columns: minmax(5ch, auto) auto minmax(2.6em, auto); gap: 4px; margin-left: auto; align-items: baseline; }
.st-badge-counts { text-align: right; white-space: nowrap; }
.st-badge-tags { display: inline-flex; gap: 4px; white-space: nowrap; }
.st-badge-marks { display: inline-flex; gap: 2px; }
.st-badge { font: 10px var(--font-mono); border-radius: 3px; padding: 0 3px; cursor: help; }
.st-badge-refs { color: var(--neon); }
.st-badge-schema { color: #957fb8; }
.st-badge-custom { color: var(--text-3); }
.st-badge-warn { color: var(--amber); background: rgba(230, 195, 132, 0.12); }
.st-entry.st-inactive, .st-card.st-inactive { opacity: 0.45; }
.st-entry.st-inactive .st-entry-title, .st-card.st-inactive .st-card-title { text-decoration: line-through; }
.st-conn-label { fill: var(--neon); font: 10px var(--font-mono); }
.st-iface { font: 10px var(--font-mono); color: var(--text-3); padding: 4px 10px; border-top: 1px dotted var(--line); }
.st-iface code { color: #98bb6c; }
.st-panel-bar { display: flex; justify-content: flex-end; margin-bottom: 8px; }

/* ---- Graph view refinement round 3 ---- */
.st-chip-active { outline: 1px solid var(--neon); }
.st-entry.st-producer { box-shadow: inset 2px 0 0 #98bb6c; }
.st-entry.st-consumer { box-shadow: inset 2px 0 0 var(--aqua); }
.st-subst { padding: 4px 10px; border-top: 1px dotted var(--line); }
.st-subst-link { background: none; border: 1px dashed var(--text-dim); border-radius: 3px; color: var(--text-2);
  font: 10px var(--font-mono); padding: 1px 6px; cursor: pointer; }
.st-subst-link:hover { background: var(--surface-2); }

/* ---- Graph view refinement round 4 ---- */
.st-top-band { grid-column: 2; grid-row: 1; margin-bottom: 20px; }
.st-top-band > .st-card { width: 600px; }
.st-kind-context-entries .st-chip-row { flex-direction: column; align-items: flex-start; }
.st-invocation { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.st-invocation > .st-kind-chip { align-self: flex-start; }
.st-invocation > .st-kind-chip ~ .st-kind-chip { margin-top: 12px; }
.st-tile { display: flex; align-items: center; gap: 6px; padding: 4px 8px; border: 1px solid var(--line);
  border-radius: var(--radius); background: var(--surface); color: var(--text-2); font: 12px var(--font-sans); }
.st-tile-toggle { cursor: pointer; }
.st-tile-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--text-dim); }
.st-tile.st-on { border-color: var(--neon); color: var(--text); }
.st-tile.st-on .st-tile-dot { background: var(--neon); border-color: var(--neon); }
.st-tile-detail { background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12px; padding: 0 2px; }
.st-invocation .st-tile-detail { margin-left: auto; }
.st-grant-chip { border: none; cursor: pointer; }
.st-shape { display: inline-block; width: 10px; height: 10px; background: currentColor; vertical-align: -1px; }
.st-shape-diamond { clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.st-tag { color: #050907; font: 700 9px var(--font-mono); border-radius: 2px; padding: 1px 4px; cursor: help; white-space: nowrap; }
.st-tag-gate { background: var(--aqua); }
.st-tag-hook { background: #c9d1d9; }
.st-tag-script { background: #ffd75e; }
.st-kind-args { border-color: var(--neon); }
.st-kind-args > summary .st-kind-chip { color: var(--neon); }
.st-role-arg { color: var(--neon); }
.st-role-input { color: #7fb4ca; }
.st-arg-form-chip { background: var(--surface-elev); color: var(--text-3); }

.st-iface-atom { background: #23301f; color: #98bb6c; border: none; border-radius: 3px;
  font: 10px var(--font-mono); padding: 0 4px; margin: 0 2px; cursor: pointer; }

/* ---- Graph view refinement round 5 — two-way links, route forks ---- */
.st-conn-refby { stroke: var(--orange); stroke-dasharray: 4 4; }
.st-conn-ref-label { fill: var(--neon); }
.st-conn-refby-label { fill: var(--orange); }
.st-arrow-out { fill: var(--neon); }
.st-arrow-in { fill: var(--orange); }
.st-badge-refby { color: var(--orange); }
.st-refby-btn { border-color: var(--orange); color: var(--orange); }
.st-refby-btn:hover { border-color: var(--orange); color: var(--text); }
.st-spine > .st-card { width: 600px; }
.st-spine > .st-kind-route { margin-left: 56px; width: 544px; }
.st-arrow-route { fill: var(--amber); }
.st-edge-route { stroke: var(--amber); }
.st-edge-route-unknown { stroke: var(--text-dim); stroke-dasharray: 3 4; }

/* ---- Graph view additions (st-*) — findings, diffs, rails, enforcement ---- */
.st-findings-slot { margin: 6px 0; font: 11px var(--font-mono); color: var(--text-2); }
.st-battery-error { color: var(--rose); }
.st-battery-off { color: var(--text-dim); }
.st-finding-list { margin: 4px 0 0 18px; padding: 0; font-size: 12px; }
.st-finding-list .st-finding-error, .st-panel-finding.st-finding-error, .st-badge.st-finding-error { color: var(--rose); }
.st-finding-list .st-finding-warning, .st-panel-finding.st-finding-warning, .st-badge.st-finding-warning { color: var(--amber); }
.st-card.st-has-warning > summary { box-shadow: inset 3px 0 0 var(--amber); }
.st-card.st-has-error > summary { box-shadow: inset 3px 0 0 var(--rose); }
.st-panel-finding { font-size: 12px; margin-top: 6px; }
.st-diffs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.st-diff-col { min-width: 0; }
.st-diff-card { margin: 6px 0; font: 11px var(--font-mono); color: var(--text-2); }
.st-diff-card > summary { cursor: pointer; }
.diff-file { color: var(--sky); font-weight: 600; }
.st-ref-item { background: var(--surface-elev); color: var(--text-2); text-decoration: none; }
a.st-ref-item { color: var(--sky); }
button.st-ref-item { border: none; cursor: pointer; }
.st-ref-glob { color: var(--text-dim); }
.st-chip-row { display: flex; flex-wrap: wrap; gap: 4px; }
.st-entry.st-ref-hit { outline: 1px solid var(--sky); background: rgba(90, 169, 255, 0.08); }
.st-skill-note { margin: 4px 0; font-size: 12px; color: var(--text-2); }
.st-card-note, .st-panel-note { font-size: 12px; color: var(--text-3); margin: 4px 8px; white-space: pre-wrap; }
.st-note-badge { color: var(--text-3); }
.st-shared-chip { font-size: 10px; color: var(--text-dim); }
.st-res-edge { fill: none; stroke-width: 1.5; }
.st-res-spawns { stroke: var(--neon); }
.st-res-uses-schema { stroke: var(--sky); }
.st-res-script { stroke: var(--amber); }
.st-atom-usage { margin-left: auto; font: 10px var(--font-mono); color: var(--text-dim); }
.st-kind-enforce { border-color: var(--aqua); }
.st-kind-enforce > summary .st-kind-chip, .st-role-enforce { color: var(--aqua); }
.st-enf-code { font: 10px var(--font-mono); color: var(--text-3); overflow-wrap: anywhere; }
.st-enf-line { flex-basis: 100%; margin-left: 26px; font: 11px var(--font-sans); color: var(--text-3); }
.st-enf-capture { background: #23301f; color: #98bb6c; }
.st-enf-gate { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 2px 0; }
.st-kind-title { border-color: var(--violet); }
.st-kind-title > summary .st-kind-chip, .st-title-state { color: var(--violet); }

/* ---- Graph view round 2 — scenario, tiles, markers ---- */
.st-disclosure > summary { list-style: none; cursor: pointer; }
.st-disclosure > summary::-webkit-details-marker { display: none; }
.st-disclosure > summary::before { content: '▸ '; }
.st-disclosure[open] > summary::before { content: '▾ '; }
.st-enf-sentence { font: 11px var(--font-sans); color: var(--text-2); }

/* ---- backlog board ---- */
/* The item panel floats over the top-right corner; the board's layout never changes when it opens. */
.bl-panel { position: fixed; top: 12px; right: 12px; z-index: 100; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  background: var(--surface-2); border: 1px solid var(--brand-deep); border-radius: var(--radius); padding: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, .45); }
/* Fixed layout: every epic table shares the colgroup widths, Activity takes the rest, cells wrap inside their column. */
.backlog-table { width: 100%; table-layout: fixed; }
.backlog-table td { vertical-align: top; overflow-wrap: anywhere; padding: 10px 12px; }
.backlog-table .col-id { width: 9ch; }
.backlog-table .col-title { width: 44ch; }
.backlog-table .col-route { width: 22ch; }
.bl-route { max-width: 100%; }
.backlog-table .col-status { width: 13ch; }
.backlog-table select { padding: 2px 6px; font-size: 0.8125rem; }
.backlog-table .badge { white-space: nowrap; }
.bl-chip { font: 700 0.75rem var(--font-mono); color: var(--aqua); background: var(--surface-elev); border: 1px solid var(--line);
  border-radius: 10px; padding: 2px 8px; cursor: pointer; }
button.bl-chip.bl-selected { border-color: var(--neon); color: var(--neon); }
.bl-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.bl-tags .dep-link, .bl-tags .meta { font-size: 0.75rem; }
.bl-title { font-size: 0.9375rem; }
.bl-origin { margin-top: 4px; font-size: 0.75rem; }
.bl-origin a { color: var(--aqua); text-decoration: none; font-family: var(--font-mono); }
/* The priority select wears its badge colour; the arrow is the only hint that it is a select. */
.badge-select { appearance: none; -webkit-appearance: none; border: 0; cursor: pointer; padding-right: 18px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 5px) 55%; background-size: 4px 4px; background-repeat: no-repeat; }
.badge-select option { text-transform: none; font-weight: 400; background: var(--surface); color: var(--text); }
.epic-form { gap: 8px; }
.epic-form input { flex: 0 1 260px; }
tr.row-mined > td:first-child { box-shadow: inset 3px 0 0 var(--brand-emerald); }
/* The panel bar is the card's header: item page icon, status, priority and badges left-aligned, close at the right edge. */
.bl-panel-bar { justify-content: space-between; align-items: center; gap: 10px; }
.bl-card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); padding: 12px 14px; }
.bl-head { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; flex: 1 1 auto; min-width: 0; }
.bl-head select { padding: 2px 6px; font-size: 0.8125rem; field-sizing: content; }
/* The select sizes to its uppercase bold label, not to the options' plain text, so HIGH and CRIT are never cut. */
.bl-head select.badge-select, .backlog-table select.badge-select { padding: 2px 18px 2px 8px; font-size: 0.6875rem; field-sizing: content; min-width: 6.5em; }
.bl-head .icon-button { display: inline-flex; padding: 0 4px 0 0; }
.bl-ident { display: flex; gap: 12px; align-items: baseline; }
.bl-ident .bl-chip { cursor: default; flex: none; white-space: nowrap; }
.bl-ident-title { font-weight: 600; }
.bl-rule { border: 0; border-top: 1px solid var(--line); margin: 12px 0; }
.bl-section { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 14px; }
/* Card labels size to their word: the fixed 90px of .section-label leaves ACCEPTANCE no room on the right. */
.bl-section .section-label { width: auto; min-width: 90px; padding: 2px 12px; }
.bl-card .item-desc { font-size: 0.8125rem; }
.bl-card .bl-evidence a, .item-evidence a { color: var(--aqua); text-decoration: none; }
.bl-dispatch { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.bl-dispatch select[name="routine"] { flex: 1 0 100%; }
.bl-dispatch input { flex: 1 1 auto; min-width: 0; }
.activity-line { display: flex; align-items: baseline; gap: 6px; min-width: 0; flex-wrap: wrap; margin-bottom: 4px; }
.activity-line a, .activity-line .meta, .activity-line code { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.activity-line code { white-space: nowrap; }
.dep-link, .skill-link { color: var(--aqua); text-decoration: none; }
.skill-link:hover { text-decoration: underline; }
/* ---- backlog item ---- */
.item-fields { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; align-items: baseline; width: 100%; margin-top: 10px; }
.item-fields .field-key { color: var(--text-3); font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.06em; }
#dispatch-form { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; width: 100%; }
#dispatch-form input[name="prompt"] { flex: 1 1 260px; }
.routine-missing { border-color: var(--rose); }
.routine-missing .missing-title { font-family: var(--font-serif); font-size: 1.5rem; color: var(--rose); letter-spacing: -0.02em; }
.item-desc { white-space: pre-line; width: 100%; }
.item-evidence { margin: 0; padding-left: 18px; width: 100%; }

/* fleet page */
.fl-status .table-scroll table td { white-space: normal; overflow-wrap: anywhere; }
.fl-status .table-scroll table .badge, .fl-status .table-scroll table button, .fl-status .table-scroll table .fl-time { white-space: nowrap; overflow-wrap: normal; }
.fl-fields { margin-bottom: .5rem; }
.fl-train { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: .5rem; }
.fl-train .badge { text-transform: none; }
.fl-problem > summary { cursor: pointer; }
.fl-paths div { white-space: nowrap; font-family: var(--font-mono); font-size: 0.8125rem; }
.fl-queue .fl-kind { white-space: nowrap; }
.usage-pair { font-size: clamp(1.1rem, 1.6vw, 1.5rem); }
.cell-state { white-space: nowrap; }
.usage-range { display: inline-flex; gap: 12px; align-items: center; }
.usage-range button { margin-left: 12px; }
.usage-plans { display: inline-flex; gap: 12px; align-items: center; }
.usage-plans button.badge { border: none; cursor: pointer; font-family: var(--font-mono); }
.usage-plans button.badge:hover { box-shadow: none; color: var(--neon); }
.usage-plans button.badge-ok:hover { color: var(--bg); }
.usage-chart { display: flex; gap: 8px; height: 180px; }
.usage-chart-axis { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-end; margin: 16px 0 18px; color: var(--text-3); font-size: 0.6875rem; white-space: nowrap; }
.usage-chart-days { flex: 1; min-width: 0; display: flex; gap: 2px; }
.usage-day { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.usage-day-plot { flex: 1; position: relative; margin-top: 16px; border-bottom: 1px solid var(--line); }
.usage-day-bar { position: absolute; bottom: 0; left: 15%; width: 70%; background: var(--brand-emerald); }
.usage-day-value { position: absolute; left: 0; right: 0; text-align: center; color: var(--text-2); font-size: 0.6875rem; white-space: nowrap; }
.usage-day-label { height: 18px; line-height: 18px; text-align: center; color: var(--text-3); font-size: 0.6875rem; white-space: nowrap; }
.cell-muted { color: var(--text-dim); }
.cell-more { display: inline; }
.cell-more > summary { display: inline; margin-left: 6px; cursor: pointer; color: var(--text-3); list-style: none; }
.cell-more > summary::-webkit-details-marker { display: none; }
.cell-more > summary:hover { color: var(--neon); }
.cell-more[open] > summary { display: none; }

/* ---- nav count pill ---- */
nav a .count-note { margin-left: 1px; vertical-align: 0.7em; min-width: 1.6em; padding: 0 4px; font-size: 0.5625rem; line-height: 1.5; }
nav a .count-note.badge-error { border-color: var(--rose); color: var(--rose); background: transparent; }

/* ---- proposals page: one card per change, its own surface, problem first ---- */
.card-proposal { --proposal-line: 22px; display: block; background: var(--bg); border: 1px solid var(--line); margin-bottom: 12px; padding: 12px 16px; }
.card-proposal > summary { display: flex; align-items: flex-start; gap: 10px; flex-wrap: nowrap; }
.card-proposal > summary > .proposal-caret, .card-proposal > summary > .proposal-kind { flex: 0 0 auto; height: var(--proposal-line); display: inline-flex; align-items: center; margin: 0; box-sizing: border-box; }
.card-proposal > summary > .bulk-check { flex: 0 0 auto; margin: calc((var(--proposal-line) - 13px) / 2) 0 0; width: 13px; height: 13px; }
.card-proposal > summary > .proposal-kind { width: 104px; justify-content: center; }
.card-proposal .proposal-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.card-proposal .proposal-subject { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--text-2); }
.history-entry .history-row { display: flex; align-items: flex-start; gap: 10px; }
.history-entry .proposal-sha { color: var(--text-3); font-size: 0.75rem; }
.card-proposal .proposal-side { flex: 0 0 auto; height: var(--proposal-line); display: flex; align-items: center; gap: 10px; margin-left: 16px; white-space: nowrap; }
.card-proposal .proposal-meta { color: var(--text-3); font-size: 0.75rem; }
.card-proposal .proposal-body { gap: 14px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.card-proposal .proposal-body .finding { display: flex; align-items: flex-start; gap: 16px; margin-top: 0; }
.card-proposal .proposal-body .finding > .badge { flex: 0 0 auto; min-width: 84px; text-align: center; margin-top: 2px; }
.card-proposal .finding-content { flex: 1 1 auto; min-width: 0; margin-left: 0; }
.card-proposal .change-evidence blockquote { white-space: pre-line; margin: 0 0 8px 0; }
.card-proposal .pick-row { display: flex; gap: 8px; }
.card-proposal .pick-row .reject-one { margin-left: auto; }
.card-proposal .reject-one { color: var(--text-3); border-color: var(--line); padding: 1px 10px; font-size: 0.75rem; }
.card-proposal .reject-one:hover { color: var(--rose); border-color: var(--rose); }
.change-evidence blockquote.evidence-quote { font-family: var(--font-voice, var(--font-sans)); font-style: italic; }
.change-evidence blockquote.evidence-quote .badge { font-style: normal; }
.card-proposal .change-body { white-space: pre-line; }
details.conflicts { margin-top: 8px; }
details.conflicts > summary { cursor: pointer; color: var(--text-3); }
.history-entry .proposal-title { font-family: var(--font-sans); font-weight: 500; font-size: 0.9375rem; line-height: var(--proposal-line); color: var(--text); }
.finding-card { border-top: 1px solid var(--line); padding: 10px 0; }
.finding-card[open] { padding-bottom: 16px; }
.finding-card > summary > .badge { flex: 0 0 auto; white-space: nowrap; }
.finding-card > summary { display: flex; align-items: baseline; gap: 10px; cursor: pointer; list-style: none; }
.finding-card > summary::-webkit-details-marker { display: none; }
.finding-card > summary::before { content: '▸'; color: var(--text-3); }
.finding-card[open] > summary::before { content: '▾'; color: var(--neon); }
.finding-card > summary .headline { flex: 1 1 auto; min-width: 240px; font-family: var(--font-sans); font-size: 0.9375rem; }
.finding-card > summary .quote-count { margin-left: auto; white-space: nowrap; }
.finding-card .finding-summary { margin: 12px 0 12px 28px; color: var(--text-2); font-family: var(--font-sans); line-height: 1.55; }
.card .finding-card blockquote { margin: 8px 0 8px 28px; padding: 2px 0 2px 10px; }
.finding-card .snippet { margin: 8px 0 0 28px; }
.finding-card .quote-turn { color: var(--text-3); margin-right: 8px; }
details.data-gaps { margin-top: 12px; }
details.data-gaps > summary { cursor: pointer; }
.session-card > .finding-card:first-of-type { margin-top: 12px; }
details.session-day > .session-card { margin-bottom: 12px; }
@keyframes arrival-flash { from { background-color: rgba(255, 181, 71, 0.28); box-shadow: 0 0 0 2px var(--amber); } to { background-color: transparent; box-shadow: 0 0 0 2px transparent; } }
.arrival-flash { animation: arrival-flash 1s ease-out; }
.card-proposal details.change-file { margin: 0 0 6px 0; border: 1px solid var(--line); border-radius: var(--radius); }
.card-proposal details.change-file > summary { display: flex; align-items: baseline; gap: 12px; padding: 6px 10px; color: var(--text-2); cursor: pointer; }
.card-proposal details.change-file > summary .change-path { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.card-proposal details.change-file > summary .change-status { flex: 0 0 auto; min-width: 1.5em; text-align: center; color: var(--text); }
.card-proposal details.change-file[open] > summary { border-bottom: 1px solid var(--line); }
.card-proposal details.change-file > :not(summary) { margin: 10px; }

/* ---- sessions week page: the signal line takes its own row inside the summary ---- */
.session-signal { flex: 1 1 100%; color: var(--text-3); font-size: 0.8125rem; font-weight: 400; }

/* ---- skill Tests tab: smoke card anchor chips, hit or never hit ---- */
.smoke-card .tool-chip.smoke-hit { border-color: var(--brand-emerald); }
.smoke-card .tool-chip.smoke-missed { border-color: var(--rose); color: var(--rose); }

/* ---- Graph view round 5 — env tiles, tile links, panel chips ---- */
.st-tile-env .st-tile-mark { width: 1.2em; text-align: center; font: 11px var(--font-mono); }
.st-tile.st-env-set .st-tile-mark { color: var(--neon); }
.st-tile.st-env-unset-required { border-color: var(--amber); }
.st-tile.st-env-unset-required .st-tile-mark { color: var(--amber); }
.st-tile.st-env-unset-optional { color: var(--text-dim); }
.st-tile.st-env-deferred .st-tile-mark { color: var(--sky); }
.st-tile.st-focused { border-color: var(--neon); }
.st-role-env { color: var(--amber); }
.st-conn-arg { stroke: var(--violet); stroke-dasharray: 4 3; }
.st-conn-arg-label { fill: var(--violet); }
.st-conn-env { stroke: var(--amber); stroke-dasharray: 4 3; }
.st-conn-env-label { fill: var(--amber); }
.st-panel-finding .st-subst-link { max-width: 24ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }

/* ---- Config page: Smine tab (component tiles, one settings panel), Hooks tab (group cards), Permissions tab ---- */
.tiles-3 { grid-template-columns: repeat(3, 1fr); margin-bottom: 16px; }
.tile-pick { padding: 14px 16px; gap: 4px; }
.tile-pick .tile-value { font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
.tile-unit { font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-3); letter-spacing: 0; }
.tile-pick .tile-detail { display: flex; gap: 6px; flex-wrap: wrap; }
.tile-active { border-color: var(--neon); background: var(--surface-elev); box-shadow: 0 0 0 1px var(--neon) inset; }
.tile-active .tile-label { color: var(--neon); }
.smine-panel-title { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.smine-settings { display: flex; flex-direction: column; gap: 8px; }
.smine-save { justify-content: flex-start; }
.hooks-report { margin-bottom: 12px; }

/* a setting row stacks label, help, control and foot; the control spans the row */
.setting-row { gap: 6px; }
.setting-help { margin: 0; }
.setting-control { display: flex; align-items: center; gap: 8px; width: 100%; }
.setting-control input[type="text"], .setting-control input[type="number"], .setting-control select { flex: 1 1 auto; min-width: 0; width: 100%; }
.setting-control input[type="number"] { max-width: 180px; }
.setting-control .list-editor { width: 100%; }
.setting-control .list-item .label code { font-size: 0.8125rem; overflow-wrap: anywhere; }
.setting-control .list-add .inline-form { display: flex; gap: 8px; }
.setting-control .list-add .inline-form button { flex: none; white-space: nowrap; }
.setting-foot { justify-content: flex-start; align-items: flex-start; }
.setting-default { flex: 1 1 auto; min-width: 0; }
.setting-default > summary { cursor: pointer; color: var(--text-3); font-size: 0.8125rem; }
.setting-default > summary:hover { color: var(--neon); }
.setting-default .list-editor { margin-top: 6px; opacity: 0.7; }

/* the Hooks filter: a search field beside the state chips, in the filter card the context pages use */
.hooks-filter { margin-bottom: 12px; }
.hooks-filter input[type="search"] { flex: 1 1 auto; min-width: 0; }
details.hooks-card > summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; list-style: none; }
details.hooks-card > summary::-webkit-details-marker { display: none; }
details.hooks-card > summary::before { content: '▸'; color: var(--text-dim); }
details.hooks-card[open] > summary::before { content: '▾'; color: var(--neon); }
details.hooks-card > summary .hooks-card-title { font-weight: 600; color: var(--text); }
details.hooks-card > summary .toggle { margin-left: auto; }

/* The Overview's way into the trash: a dim corner icon, not a nav tab. */
.trash-corner { position: fixed; right: 16px; bottom: 16px; display: inline-flex; color: var(--text-3); opacity: 0.6; }
.trash-corner:hover { color: var(--text); opacity: 1; }