:root {
  --bg: #f5f3ee; --paper: #fffdf9; --ink: #1b1a17; --muted: #79746b;
  --line: #e6e1d6; --track: #ece7dc; --emerald: #0f7a55;
  --amber: #b8860b; --red: #b4452f; --gray: #9a958b;
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 15px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; }
h1, h2, h3 { font-family: Georgia, "Times New Roman", serif; font-weight: 600; }
a { color: var(--emerald); }
.top { background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--line); }
.top .inner {
  max-width: 1180px; margin: 0 auto; padding: 19px 28px;
  display: flex; align-items: center; gap: 12px;
}
.top .logo { flex: none; display: block; }
.top .brand { font-family: Georgia, "Times New Roman", serif; font-size: 23px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.top .masthead-tag {
  padding: 3px 0 3px 13px; border-left: 1px solid var(--line);
  color: var(--muted); font-size: 14px;
}
.top .meta {
  margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  color: var(--muted); font-size: 12px;
}
.top .meta .meta-top { display: flex; align-items: center; gap: 6px; }
.top .meta .meta-path { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--gray); }
/* Info popover: the per-directory scan history next to the range + store path. */
.meta-info-wrap { position: relative; display: inline-flex; }
.meta-info-btn { border: 0; background: transparent; color: var(--gray); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.meta-info-btn:hover { color: var(--ink); }
.meta-info-pop {
  display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; text-align: left;
  min-width: 240px; max-width: 440px; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.12);
}
.meta-info-pop.on { display: block; }
.meta-info-pop .mi-head { font-size: 11px; color: var(--muted); margin-bottom: 8px; }
.meta-info-pop .mi-title { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; }
.meta-info-pop .mi-row { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; font-size: 12px; }
.meta-info-pop .mi-path { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; color: var(--ink); word-break: break-all; }
.meta-info-pop .mi-when { color: var(--gray); white-space: nowrap; }
.meta-info-pop .mi-empty { font-size: 12px; color: var(--muted); }
.tabnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.tabnav .inner { max-width: 1180px; margin: 0 auto; padding: 0 28px; display: flex; gap: 2px; }
.tab { border: 0; background: transparent; padding: 14px 18px; font-family: Georgia, serif; font-size: 15px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab:hover { color: var(--ink); }
.tab.on { color: var(--ink); border-bottom-color: var(--emerald); }
.view { display: none; }
.view.on { display: block; }
main { max-width: 1180px; margin: 0 auto; padding: 28px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.tile { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.tile .label { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.tile .value { font-family: ui-monospace, Menlo, monospace; font-size: 26px; margin-top: 6px; display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; }
/* Two-stat value (churn: AI vs human): each rate is a prominent number with a
 * small uppercase caption beneath, the two split by a thin divider. The numbers
 * read as the value; the captions read as labels — no wrapping, no subscript. */
/* Two-stat value (churn: AI vs human). Each stat is a 3-line column — rate /
 * caption / delta — so a wide delta stacks under its own number and can never
 * run past the divider into the other stat. The duo fills the tile width and
 * splits it evenly, so both columns stay bounded regardless of delta length. */
.tile .value.value-duo { margin-top: 8px; display: block; }
.tile .value.value-duo .num { display: block; }
.ch-duo { display: flex; align-items: stretch; gap: 14px; }
.ch-stat { display: flex; flex-direction: column; gap: 2px; flex: 1 1 0; min-width: 0; }
.ch-stat .ch-rate { font-family: ui-monospace, Menlo, monospace; font-size: 24px; line-height: 1.05; color: var(--ink); }
.ch-stat .ch-cap { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }
/* Delta on its own line: normal case (so "pp" stays lower), small, keeping the
 * good/bad colour from kpiDelta. */
.ch-stat .delta { font-size: 10px; letter-spacing: 0; text-transform: none; margin-top: 1px; }
.ch-div { width: 1px; background: var(--line); align-self: stretch; flex: none; }
.tile .value .delta { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; font-weight: 600; white-space: nowrap; }
.delta.good { color: var(--emerald); }
.delta.bad { color: var(--red); }
.delta.flat { color: var(--muted); }
.tile .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kpi-caption { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; color: var(--muted); font-size: 12px; margin: 0 0 12px; }
.win-cap { white-space: nowrap; }
.tile.clickable { cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.tile.clickable:hover { border-color: var(--emerald); }
.tile.clickable .label::after { content: " ›"; color: var(--muted); }
.tile.on { border-color: var(--emerald); box-shadow: inset 0 -3px 0 var(--emerald); }
.metric-head { display: flex; align-items: center; gap: 14px; margin: 22px 0 6px; }
.metric-head h2 { margin: 0; font-size: 20px; }
.metric-big { margin-left: auto; font-family: ui-monospace, Menlo, monospace; font-size: 30px; }
.metric-sub { font-family: ui-sans-serif, system-ui, sans-serif; font-size: 12px; color: var(--muted); }
.sr-controls { margin-bottom: 8px; }
.sr-ctrl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.sr-lbl { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sr-checks { display: flex; flex-wrap: wrap; gap: 14px; }
.sr-check { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; cursor: pointer; }
.sr-check input { accent-color: var(--emerald); }
.sr-cnt { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sr-by { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; background: var(--paper); color: var(--ink); }
.sr-by-ctrl { display: inline-flex; align-items: center; gap: 8px; }
/* Metric filter clauses: a fixed field label + live value <select> + ✕, grouped
   as one pill, inline between Bucket and Break-down. */
.mfl-clause { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 5px; background: var(--track); border: 1px solid var(--line); border-radius: 8px; padding: 3px 6px 3px 10px; }
.mfl-clause .sr-by { padding: 3px 6px; }
.mfl-k { font-size: 12px; color: var(--muted); }
/* selected value chip (OR within a field) */
.mfl-v { display: inline-flex; align-items: center; gap: 3px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; padding: 1px 2px 1px 8px; font-size: 12px; }
.mfl-vx { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 3px; border-radius: 999px; }
.mfl-vx:hover { color: var(--red); }
/* compact "+ value" adder inside a clause */
.mfl-addv { padding: 2px 4px; font-size: 12px; }
.sr-legend { margin-top: 10px; }
.sr-legend .leg { display: inline-flex; align-items: center; vertical-align: middle; gap: 6px; margin: 4px 14px 4px 0; font-size: 12px; }
.sr-legend .leg[data-key] { cursor: pointer; user-select: none; }
/* overall aggregate shown in the legend when there's no breakdown */
.leg-overall { font-size: 12px; font-weight: 600; color: var(--ink); vertical-align: middle; }
.sr-legend .leg.off { opacity: 0.4; text-decoration: line-through; }
.sr-legend .swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; }
.sr-legend .show-all-link { display: inline-flex; align-items: center; vertical-align: middle; font-size: 12px; color: var(--emerald); cursor: pointer; text-decoration: underline; margin-left: 8px; }
.sr-legend .leg-toggle-all { display: inline-flex; align-items: center; vertical-align: middle; font-size: 12px; color: var(--muted); cursor: pointer; text-decoration: underline; margin-left: 8px; }
/* Churn self/cross breakdown: a compact decomposition of the churn on the chart
 * above (who tore the code out), so it reads as a footnote, not a rival chart. */
.ch-breakdown { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.ch-breakdown:empty { display: none; }
.ch-bd-row { font-size: 12px; display: flex; flex-wrap: wrap; gap: 4px 10px; }
.ch-bd-lbl { color: var(--muted); }
.ch-bd-val { color: var(--ink); }
/* Churn hotspots: wide path column, then the bar, then a right-aligned rate — a
 * narrow fixed column so every "%" lines up vertically (the churned/added ratio
 * moved to the row's hover title). Mono path so structure lines up. */
.chart-title-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
#ch-hotspots .bar-row { grid-template-columns: minmax(0, 1fr) 120px 44px; align-items: center; }
#ch-hotspots .bar-row .name { font-family: ui-monospace, Menlo, monospace; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#ch-hotspots .bar-row .n { white-space: nowrap; }
/* Repo prefix (always shown) muted so the path still reads as the subject. */
#ch-hotspots .ch-hot-repo { color: var(--muted); }
/* Path links to the file/dir on GitHub: inherit ink colour (not link-blue), a
 * subtle affordance on hover so the list stays calm at rest. */
#ch-hotspots a.ch-hot-link { color: var(--ink); text-decoration: none; }
#ch-hotspots a.ch-hot-link:hover { text-decoration: underline; }
#ch-hotspots a.ch-hot-link:hover .ch-hot-repo { color: var(--muted); }
.chart-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 2px 0 10px; }
.ca-controls { margin: 0 0 4px; }
.panel-head h2 .metric-sub { margin-left: 8px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-top: 22px; }
/* Gap between the headline tile row and whatever a metric's detail opens with.
   Sections that open on a .panel already had it (the rule above); ones that open
   on a controls row — success-rate, cost-artifact, defect-rate — butted straight
   up against the tiles. Applying it to the section's first child rather than to
   each controls class keeps every metric starting on the same line, and matches
   the panel rhythm rather than inventing a second spacing value. */
#metric-detail > :first-child { margin-top: 24px; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 18px; }
/* Ops error-rate head: Title → Filter → Break-down, left-aligned and wrapping, so
   the break-down group drops to the next line as a whole once filters accumulate. */
.panel-head.ops-erhead { justify-content: flex-start; flex-wrap: wrap; gap: 10px 14px; }
.ops-flt { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { border: 0; background: var(--paper); padding: 5px 12px; cursor: pointer; font-size: 13px; color: var(--muted); }
.seg button.on { background: var(--ink); color: #f3efe6; }
/* Primary segmented control (the section-scoping Artifact toggle): emerald active
   fill + slightly larger, so it reads as more important than the neutral Bucket. */
.seg.seg-primary button { padding: 8px 18px; font-size: 14px; }
.seg.seg-primary button.on { background: var(--emerald); color: #f3efe6; }
.dist-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 22px; }
.card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 16px 18px; }
.card h3 { margin: 0 0 12px; font-size: 14px; }
.bar-row { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: 10px; margin: 7px 0; font-size: 13px; }
.bar-row .name { color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-track { background: var(--track); border-radius: 4px; height: 10px; overflow: hidden; }
.bar-fill { display: block; background: var(--emerald); height: 100%; }
.bar-row .n { text-align: right; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
/* Errors-by-category rows carry "count + share", so widen the value column and keep
   it on one line: count is the hero (ink), the percentage a muted secondary. */
.errcat .bar-row { grid-template-columns: 130px 1fr 72px; }
.errcat .n { white-space: nowrap; }
.errcat .n .cnt { color: var(--ink); }
.errcat .n .pct { margin-left: 6px; }
/* A category row expands an inline list of its actual failed tool calls. */
.errcat .bar-row.errcat-row { cursor: pointer; }
.errcat .bar-row.errcat-row:hover .name { color: var(--emerald); }
.errcat .bar-row.errcat-row:hover .bar-fill { opacity: .85; }
.errcat .bar-row.errcat-row.open .name { color: var(--emerald); font-weight: 600; }
.errcat-occ { margin: 0 0 12px; padding-left: 8px; border-left: 2px solid var(--line); }
.occ-loading, .occ-empty { color: var(--muted); font-size: 12px; font-style: italic; padding: 6px 4px; }
.occ-more { color: var(--muted); font-size: 12px; padding: 6px 6px 2px; }
.occ-head { font-size: 12px; color: var(--muted); margin: 4px 0 6px; }
.occ-head .occ-sessions { color: var(--emerald); cursor: pointer; }
/* The drill-down fetches up to 50 occurrences; bound the list so a big category
   scrolls WITHIN the panel instead of pushing the rest of the page down. */
.occ-list { max-height: 300px; overflow-y: auto; }
.occ-row {
  display: grid; grid-template-columns: 92px minmax(0,1.1fr) minmax(0,1.4fr) 150px 78px;
  gap: 10px; align-items: baseline; padding: 5px 6px; font-size: 12px;
  border-radius: 6px; cursor: pointer;
}
.occ-row:hover { background: var(--track); }
.occ-row > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.occ-tool { font-family: ui-monospace, Menlo, monospace; color: var(--ink); }
.occ-cmd { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.occ-msg { color: var(--red); }
.occ-sess { color: var(--ink); }
.occ-date { color: var(--muted); font-family: ui-monospace, Menlo, monospace; text-align: right; }
/* Floating cross-session error-walk pager (steps through occurrences of a category). */
#errwalk {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 1000;
  display: flex; align-items: center; gap: 10px; background: var(--ink); color: #f3efe6;
  border-radius: 10px; padding: 8px 12px; box-shadow: 0 6px 24px rgba(0,0,0,.28); font-size: 13px;
}
#errwalk .ew-cat { font-weight: 600; }
#errwalk .ew-pos { font-family: ui-monospace, Menlo, monospace; min-width: 56px; text-align: center; }
#errwalk .ew-cur { color: #b8b2a4; max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#errwalk .ew-btn { border: 0; background: rgba(255,255,255,.12); color: #f3efe6; cursor: pointer; border-radius: 6px; padding: 2px 9px; font-size: 15px; line-height: 1; }
#errwalk .ew-btn:hover { background: rgba(255,255,255,.24); }
#errwalk .ew-x { margin-left: 4px; font-size: 12px; }
.empty { color: var(--muted); font-size: 13px; font-style: italic; }
.btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 7px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.btn:hover { border-color: var(--emerald); color: var(--emerald); }
.btn.danger:hover { border-color: var(--red); color: var(--red); }
/* Feature manager: a fixed-height scroll window with aligned columns. Every row
   shares the same grid so Sessions/Cost/actions line up regardless of depth —
   only the title cell is indented (inline padding-left) to show the hierarchy. */
.feat-list { max-height: 460px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; }
/* Fixed (not auto) last column so the header and row grids — separate grid
   containers — resolve identical column edges and the labels sit over the data. */
.feat-head, .feat-row { display: grid; grid-template-columns: minmax(0,1fr) 120px 104px 72px 84px 240px; align-items: center; gap: 12px; padding: 8px 12px; }
.feat-head { position: sticky; top: 0; z-index: 2; background: var(--paper); border-bottom: 1px solid var(--line); }
.feat-head span { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; }
.feat-row { border-bottom: 1px solid var(--line); font-size: 13.5px; }
.feat-row:last-child { border-bottom: none; }
.feat-name { display: flex; align-items: center; gap: 6px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.feat-name .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-twig { color: var(--muted); }
.feat-repos, .feat-last { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feat-last { font-family: ui-monospace, Menlo, monospace; }
/* Local feature name filter — sits above the list. */
.feat-search { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--paper); color: var(--ink); margin-bottom: 10px; }
.feat-search:focus { outline: none; border-color: var(--emerald); }
.fh-num, .feat-num { text-align: right; }
/* Sortable PR table headers. */
.pr-th { cursor: pointer; user-select: none; white-space: nowrap; }
.pr-th:hover { color: var(--ink); }
.feat-num { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); white-space: nowrap; }
.feat-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.ship-btn { border-color: var(--emerald); color: var(--emerald); background: transparent; white-space: nowrap; }
.ship-btn:hover { background: var(--emerald); color: #fff; }
.ship-btn.shipped { border-color: var(--line); color: var(--muted); }
.ship-btn.shipped:hover { border-color: var(--muted); background: transparent; color: var(--ink); }
/* Secondary actions live behind a per-row hamburger. The menu is position:fixed
   (positioned in JS) so the scroll container's overflow doesn't clip it. */
.feat-menu-wrap { position: relative; display: inline-flex; }
.feat-menu-btn { border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 7px; padding: 4px 9px; font-size: 14px; line-height: 1; cursor: pointer; }
.feat-menu-btn:hover { border-color: var(--emerald); color: var(--emerald); }
.feat-menu { position: fixed; display: none; width: 190px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 20px rgba(20,18,15,.14); padding: 5px; z-index: 50; }
.feat-menu.on { display: block; }
.feat-menu .menu-item { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--ink); border-radius: 6px; padding: 7px 9px; font-size: 13px; cursor: pointer; }
.feat-menu .menu-item:hover { background: #fbf8f1; color: var(--emerald); }
.feat-menu .menu-item.danger { color: var(--red); }
.feat-menu .menu-item.danger:hover { background: #f4ddd6; color: var(--red); }
.feat-menu .menu-nest { padding: 4px 9px 6px; }
.feat-menu .menu-nest label { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 4px; }
.feat-menu .menu-nest select { width: 100%; border: 1px solid var(--line); border-radius: 6px; padding: 4px 6px; font-size: 12px; background: var(--paper); color: var(--ink); }
.feat-menu .menu-sep { height: 1px; background: var(--line); margin: 5px 4px; }
/* New-feature form: collapsed behind an "Add feature" button at the bottom. */
.feat-add { margin-top: 14px; }
.feat-new { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.feat-new[hidden] { display: none; }
.feat-new input { flex: 1; min-width: 220px; border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--paper); color: var(--ink); }
.feat-new select { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; font-size: 13px; background: var(--paper); color: var(--ink); }
/* Sessions filter toolbar: a compact, wrapping control bar. Reuses the seg, btn,
   and tag tokens. Primary filters inline; the rest collapse behind More filters. */
.filters { margin-bottom: 14px; }
.filters select, .filters input:not([type=checkbox]) {
  border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px; font-size: 13px; background: var(--paper); color: var(--ink);
}
.filters select:hover, .filters input:not([type=checkbox]):hover { border-color: #d4cdbd; }
.flt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.flt-row + .flt-row { margin-top: 8px; }
.flt-row-facets { gap: 8px; }
.flt-more { gap: 8px; }
.flt-more[hidden] { display: none; }
.flt-grp { display: inline-flex; align-items: center; gap: 8px; }
.flt-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.flt-search { flex: 1 1 220px; min-width: 180px; }

/* Time segmented control (reuses .seg) + custom range. */
.flt-seg button { font-size: 12px; padding: 5px 11px; }
.flt-dates { display: inline-flex; align-items: center; gap: 6px; }
.flt-dates[hidden] { display: none; }
.flt-dash { color: var(--muted); }

/* Outcome multi-select popover. */
.flt-pop { position: relative; display: inline-flex; }
.flt-pop-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 6px 10px; font-size: 13px; cursor: pointer; }
.flt-pop-btn:hover { border-color: #d4cdbd; }
.flt-pop-btn.on { border-color: var(--emerald); color: var(--emerald); }
.flt-pop-car { color: var(--muted); font-size: 10px; }
.flt-pop-cnt:empty { display: none; }
.flt-pop-cnt { background: var(--emerald); color: #f3efe6; border-radius: 999px; min-width: 16px; text-align: center; padding: 0 5px; font-size: 11px; font-weight: 600; }
.flt-menu { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; min-width: 210px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; box-shadow: 0 8px 20px rgba(20,18,15,.14); padding: 5px; display: none; max-height: 320px; overflow-y: auto; }
.flt-menu.on { display: block; }
.flt-menu-item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.flt-menu-item:hover { background: #fbf8f1; }
.flt-menu-item input { flex: none; }
.flt-menu-tx { flex: 1; }
.flt-menu-n { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.flt-menu-empty { padding: 8px; color: var(--muted); font-size: 12px; font-style: italic; }

/* Active-filter chips (each ✕ clears that one filter). */
.flt-active { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
.flt-active:empty { margin-top: 0; }
.flt-active-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-right: 2px; }
.flt-chip { display: inline-flex; align-items: center; gap: 5px; background: var(--track); border: 1px solid var(--line); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; }
.flt-chip-k { color: var(--muted); }
.flt-chip-v { color: var(--ink); font-weight: 500; }
.flt-chip-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 4px; border-radius: 999px; }
.flt-chip-x:hover { color: var(--red); }
.flt-clear-all { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; text-decoration: underline; margin-left: 4px; }
.flt-clear-all:hover { color: var(--emerald); }
.ac { position: relative; flex: 1; min-width: 200px; display: inline-flex; }
.ac > input { flex: 1; width: 100%; }
.ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; margin-top: 2px; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; max-height: 300px; overflow-y: auto; box-shadow: 0 8px 20px rgba(20,18,15,.12); display: none; }
.ac-menu.on { display: block; }
.ac-item { display: flex; align-items: center; gap: 9px; padding: 7px 11px; font-size: 13px; cursor: pointer; border-bottom: 1px solid var(--line); }
.ac-item:last-child { border-bottom: none; }
.ac-item.sel, .ac-item:hover { background: #fbf8f1; }
.ac-kind { flex: none; font-size: 9.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.ac-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ac-dir { color: var(--muted); font-size: 11px; }
.ex-ctrl { display: inline-flex; align-items: center; gap: 8px; }
.ex-ctrl select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; background: var(--paper); color: var(--ink); }
.ex-ctrl .by { color: var(--muted); font-size: 13px; }
.card-note { color: var(--muted); font-size: 11px; font-style: italic; margin-top: 10px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr.srow:hover { background: #fbf8f1; cursor: pointer; }
.pr-title { color: var(--muted); font-size: 12px; margin-top: 2px; }
/* A value that is ABSENT rather than empty — an untitled ticket, an unmeasured
   cost. Italic + lighter so it reads as prose about the data (a note) instead of
   as the data itself; a user scanning the cost column must not mistake "not
   measured" for a figure. Not a warning colour: an unfetched ticket is normal. */
.unset { color: var(--muted); font-style: italic; opacity: .85; }
/* Jira issue-type pill in the ticket tree (Epic / Story / Subtask). Smaller and
   lighter than a status badge: it explains the row's DEPTH, which the indent
   already shows, so it must not compete with the status it sits beside. */
.tkt-type { font-size: 10px; font-weight: 500; text-transform: uppercase; letter-spacing: .04em; opacity: .8; }
/* Fixed layout so the widths in the colgroup are honoured: the ticket cell is one
   long line, and under `auto` it claims the whole table — wrapping every numeric to
   two lines and pushing the action column outside the card. Rows are middle-aligned
   (the global `td` rule is top) because each cell is now a single line, and badges
   floating at the top of a taller row read as misaligned. */
.tkt-table { table-layout: fixed; }
.tkt-table td { vertical-align: middle; white-space: nowrap; }
.tkt-table td .btn { white-space: nowrap; }
.tkt-table td:last-child { text-align: right; }
/* The ticket cell: fold toggle · key · title · type, all on ONE line. The title
   is the only element allowed to shrink and ellipsize — the key identifies the row
   and the pill is already minimal, so neither may be the thing that gets cut. */
.tkt-cell { display: flex; align-items: center; gap: 6px; min-width: 0; }
.tkt-key { flex-shrink: 0; font-weight: 600; }
.tkt-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Fold toggle. A bare glyph, not a button-looking button: there is one per row and
   a tree of 93 outlined controls reads as clutter. The spacer keeps a leaf's key
   aligned with its siblings' — same width, no glyph. */
.tkt-fold { flex-shrink: 0; width: 16px; padding: 0; border: none; background: none; cursor: pointer;
  color: var(--muted); font-size: 10px; line-height: 1; text-align: left; }
.tkt-fold:hover { color: var(--ink); }
.tkt-fold-sp { flex-shrink: 0; width: 16px; }
/* "+7" on a collapsed row — what the fold is hiding. Muted and small: it is a
   count of absent rows, not a property of this ticket. */
.tkt-hidden { flex-shrink: 0; color: var(--muted); font-size: 11px; }
.badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; white-space: nowrap; flex-shrink: 0; }
.b-success { background: #e2f0e8; color: var(--emerald); }
.b-partial { background: #f6ecd2; color: var(--amber); }
.b-failure { background: #f4ddd6; color: var(--red); }
.b-unknown, .b-null { background: #ece9e1; color: var(--gray); }
.tag { display: inline-block; background: var(--track); color: var(--muted); border-radius: 4px; padding: 1px 6px; font-size: 11px; margin: 1px 3px 1px 0; }
.tag.click { cursor: pointer; }
.tag.click:hover { background: #dfe9e0; color: var(--emerald); }
.ai-note { color: var(--emerald); font-weight: 600; }
.pr-ai-tag { display: inline-block; margin-left: 8px; padding: 0 7px; border-radius: 999px; background: #dfe9e0; color: var(--muted); font-size: 10px; font-weight: 600; vertical-align: middle; }
.num { font-family: ui-monospace, Menlo, monospace; }
/* Outcome rate vs. cost table (Session Outcome Rate detail, option B). */
.sr-tbl th.num, .sr-tbl td.num { text-align: right; }
.sr-tbl td { vertical-align: middle; }
.sr-tbl .swatch { width: 11px; height: 11px; border-radius: 2px; display: inline-block; margin-right: 7px; vertical-align: middle; }
.sr-tbl tr.off td { opacity: .42; }
/* Sessions table: keep every row to a single line. */
tr.srow td { vertical-align: middle; }
.nowrap { white-space: nowrap; }
.s-title { display: inline-block; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-rest { display: none; }
.tag-rest.on { display: inline; }
.tag-more { border: 0; background: var(--track); color: var(--muted); border-radius: 4px; padding: 1px 6px; font-size: 11px; cursor: pointer; margin-left: 2px; }
.tag-more:hover { background: #dfe9e0; color: var(--emerald); }
svg text { font-family: ui-monospace, Menlo, monospace; font-size: 10px; fill: var(--muted); }
.overlay { position: fixed; inset: 0; background: rgba(20,18,15,.4); opacity: 0; pointer-events: none; transition: opacity .15s; }
.overlay.on { opacity: 1; pointer-events: auto; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(900px, 96vw); background: var(--bg); border-left: 1px solid var(--line); transform: translateX(100%); transition: transform .18s ease; overflow-y: auto; z-index: 10; }
.drawer.on { transform: translateX(0); }
.drawer-inner { padding: 0 24px 60px; }
/* Sticky header: title + close, tab subnav, and the transcript nav pin together. */
.drawer-head { position: sticky; top: 0; z-index: 7; background: var(--bg); padding: 16px 0 12px; }
.drawer-head-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.drawer h2 { margin: 0; font-size: 19px; flex: 1; min-width: 0; }
.x { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 4px 10px; cursor: pointer; color: var(--muted); }
.x:hover { border-color: var(--emerald); color: var(--emerald); }
.kv { display: grid; grid-template-columns: 130px 1fr; gap: 4px 12px; font-size: 13px; margin: 14px 0; }
.kv .k { color: var(--muted); }
.turn { border: 1px solid var(--line); border-radius: 8px; padding: 10px 13px; margin: 10px 0; scroll-margin-top: calc(var(--head-h, 120px) + 10px); }
/* User vs assistant get distinct fills + a left accent so the conversation reads at a glance. */
.turn.user { background: #eaf3ec; border-color: #cde2d3; border-left: 3px solid var(--emerald); }
.turn.asst { background: var(--paper); border-left: 3px solid var(--track); }
/* Coalesced run of tool-only assistant turns — a muted action strip, not a message. */
.turn.toolrun { background: transparent; border-style: dashed; }
.turn.toolrun .role { color: var(--muted); }
.turn.toolrun .tools { margin-top: 0; }
.turn .role { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 5px; }
.turn.user .role { color: var(--emerald); }
.turn .text { white-space: pre-wrap; font-size: 13px; }
/* Markdown-rendered assistant text (.text.md). Block HTML is generated, so the
   container drops pre-wrap; <pre> code blocks keep their own whitespace. */
.text.md { white-space: normal; }
.text.md p { margin: 0 0 8px; }
.text.md > p:last-child, .text.md .msg-full > p:last-child, .text.md .msg-prev > p:last-child { margin-bottom: 0; }
.text.md ul, .text.md ol { margin: 4px 0 8px; padding-left: 20px; }
.text.md li { margin: 2px 0; }
.text.md .md-h { font-weight: 700; margin: 10px 0 4px; }
.text.md .md-h1 { font-size: 15px; }
.text.md .md-h2 { font-size: 14px; }
.text.md .md-h3, .text.md .md-h4, .text.md .md-h5, .text.md .md-h6 { font-size: 13px; }
.text.md blockquote { margin: 6px 0; padding: 2px 0 2px 10px; border-left: 3px solid var(--line); color: var(--muted); }
.text.md code { font-family: ui-monospace, Menlo, monospace; font-size: 12px; background: var(--track); border-radius: 4px; padding: 1px 4px; word-break: break-word; }
.text.md pre.md-code { margin: 6px 0; padding: 8px 10px; background: var(--track); border-radius: 6px; overflow-x: auto; }
.text.md pre.md-code code { background: none; padding: 0; font-size: 11.5px; line-height: 1.45; word-break: normal; }
.text.md a { color: var(--emerald); text-decoration: underline; }
.text.md strong { font-weight: 700; }
.text.md em { font-style: italic; }
/* Long message text: preview + Show more/less toggle (used in the transcript's
   .text.msg blocks and the Files view's bare .msg prompt headers). */
.msg .msg-full { display: none; }
.msg.on .msg-prev { display: none; }
.msg.on .msg-full { display: inline; }
.msg-more { display: inline-block; margin-top: 4px; border: 0; background: transparent; color: var(--emerald); font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 0; }
.msg-more:hover { text-decoration: underline; }
.turn .tools { margin-top: 8px; }
/* Tool block: one compact row per tool call (name · command · output toggle) */
.tool-block { border: 1px solid var(--line); border-radius: 8px; margin: 4px 0; }
.tool-block.err { border-color: #e6c3b8; }
.tool-block.agent .tool-block-row { cursor: pointer; }
.tool-block.agent .tool-block-row:hover { background: #e7eef6; }
.tool-block-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 10px; }
.tool-block-name { flex: none; min-width: 40px; font-family: ui-monospace, Menlo, monospace; font-size: 11px; font-weight: 600; color: var(--ink); }
.tool-badge.err { flex: none; font-size: 10px; font-weight: 500; color: var(--red); background: #f4ddd6; border-radius: 4px; padding: 1px 5px; }
.tool-chip-go { flex: none; opacity: .8; font-size: 11px; color: var(--emerald); white-space: nowrap; }
/* Command/input — inline, grows to fill the row */
.tool-block-cmd { flex: 1 1 auto; min-width: 0; }
.tool-cmd-pre { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
.tool-cmd-full { display: none; margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
.tool-block-cmd.on .tool-cmd-pre { display: none; }
.tool-block-cmd.on .tool-cmd-full { display: block; }
.tool-cmd-toggle { border: 0; background: transparent; color: var(--muted); font-size: 10px; cursor: pointer; padding: 2px 0 0; display: block; }
.tool-cmd-toggle:hover { color: var(--emerald); }
.tool-cmd-arrow { display: inline-block; font-size: 9px; transition: transform .15s; }
/* Output toggle — right-aligned on the row; body collapsed by default */
.tool-out-toggle { flex: none; border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; white-space: nowrap; }
.tool-out-toggle:hover { color: var(--emerald); }
.tool-out-toggle::before { content: "\25B8"; font-size: 9px; margin-right: 4px; display: inline-block; transition: transform .15s; }
.tool-out-toggle.on::before { transform: rotate(90deg); }
.tool-block-body { display: none; border-top: 1px solid var(--line); padding: 6px 10px; }
.tool-block-body.on { display: block; }
.tool-output-pre { margin: 0; font-family: ui-monospace, Menlo, monospace; font-size: 11px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; background: var(--track); border-radius: 5px; padding: 6px 8px; max-height: 300px; overflow-y: auto; }
.tool-block-body .fc-diff { margin: 0; }
.tool-file-diff + .tool-file-diff { margin-top: 8px; }
.tool-file-diff-path { margin-bottom: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 600; color: var(--muted); word-break: break-all; }
/* Tool overflow (>TOOLCAP) */
.tool-rest { display: none; }
.tool-rest.on { display: block; }
.tool-more { border: 0; background: transparent; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; cursor: pointer; padding: 4px 6px; }
.tool-more:hover { color: var(--emerald); }
/* Inline error detail panel — the stepper's jump target; shows WHAT failed. */
.tx-error { border: 1px solid #e6c3b8; background: #fbeae4; border-radius: 7px; padding: 8px 10px; margin: 8px 0 2px; scroll-margin-top: calc(var(--head-h, 120px) + 10px); }
.tx-error-h { font-size: 12px; font-weight: 600; color: var(--red); }
.tx-error-cmd { margin-top: 5px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: #6b3f33; background: rgba(180,69,47,.06); border-radius: 5px; padding: 6px 8px; max-height: 150px; overflow: auto; }
.tx-error-b { margin-top: 6px; font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.45; white-space: pre-wrap; color: #6b3f33; max-height: 220px; overflow: auto; }
.tx-error-b.muted { color: var(--muted); font-style: italic; }

/* Subagent linkage: a banner standing in for a spawning call in the main thread,
   clickable to open that subagent's scope (and the back link's flash target). */
.tx-spawn { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid #cdddeb; background: #eef4fa; border-radius: 8px; padding: 9px 12px; margin: 10px 0;
  font-family: inherit; font-size: 13px; color: #2f5d87; scroll-margin-top: calc(var(--head-h, 120px) + 10px); }
.tx-spawn:hover { border-color: #3b6ea5; background: #e4eef7; }
.tx-spawn.flash { animation: flashpulse 1.2s ease; }
.tx-spawn-ico { flex: none; }
.tx-spawn-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.tx-spawn-go { flex: none; font-size: 12px; opacity: .85; }
/* Header atop a subagent scope: type + description, with a link back to the call. */
.tx-sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 2px 0 12px; padding: 9px 12px;
  background: #eef4fa; border: 1px solid #cdddeb; border-radius: 8px; font-size: 13px; color: #2f5d87; }
.tx-sub-head b { color: #234c70; }
.tx-sub-desc { color: var(--muted); }
.tx-sub-back { margin-left: auto; border: 1px solid #cdddeb; background: var(--paper); color: #2f5d87; border-radius: 7px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.tx-sub-back:hover { border-color: #3b6ea5; }

.sect-h { font-family: Georgia, serif; font-size: 14px; margin: 18px 0 6px; }

/* Key decisions: one consequential choice per line, rationale folded in. */
.decisions { margin: 0; padding-left: 18px; }
.decisions li { margin: 3px 0; line-height: 1.45; }

/* Drawer tabs: Summary | Transcript */
.drawer-tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 12px 0 0; }
.dtab { border: 0; background: transparent; padding: 8px 16px; font-family: Georgia, serif; font-size: 14px; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.dtab:hover { color: var(--ink); }
.dtab.on { color: var(--ink); border-bottom-color: var(--emerald); }
.dtab-right { margin-left: auto; } /* Share tab pinned to the right of the tab bar */
.dpane { display: none; }
.dpane.on { display: block; }

/* Files-changed tab: per-file cards; a file's edits are headed by the prompt that drove them */
.fc-hint { color: var(--muted); font-size: 12px; margin: 4px 0 10px; }
.fc-jump { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--emerald); border-radius: 6px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.fc-jump:hover { background: var(--emerald); color: #fbfaf6; border-color: var(--emerald); }
/* Agent's local narration above an edit */
.fc-narr { color: var(--muted); font-size: 12px; font-style: italic; line-height: 1.45; margin: 2px 0 6px; }
/* A file's edits, headed by the prompt that drove them */
.fc-pseg { margin: 2px 0; }
.fc-pseg + .fc-pseg { border-top: 1px solid var(--line); padding-top: 16px; margin-top: 18px; }
.fc-pseg-h { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
/* The prompt that drove these edits, as a tinted band with an emerald rail. */
.fc-pseg-msg { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); background: var(--track); border-left: 3px solid var(--emerald); border-radius: 0 6px 6px 0; padding: 6px 10px; }
.fc-pseg-empty { color: var(--muted); font-style: italic; }
.fc-file { border: 1px solid var(--line); border-radius: 8px; margin: 10px 0; background: var(--paper); overflow: hidden; scroll-margin-top: calc(var(--head-h, 120px) + 10px); }
.fc-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: var(--track); padding: 8px 12px; cursor: pointer; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; }
.fc-caret { color: var(--muted); }
.fc-file.collapsed .fc-caret { display: inline-block; transform: rotate(-90deg); }
.fc-path { flex: 1; min-width: 0; display: flex; align-items: baseline; overflow: hidden; }
.fc-dir { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fc-base { flex: none; color: var(--ink); font-weight: 600; white-space: nowrap; }
.fc-stat { flex: none; color: var(--muted); font-size: 11.5px; }
.fc-add { color: var(--emerald); }
.fc-del { color: var(--red); }
.fc-body { padding: 6px 12px 12px; }
.fc-file.collapsed .fc-body { display: none; }
.fc-edit { margin-top: 12px; }
.fc-edit:first-child { margin-top: 4px; }
.fc-edit-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 5px; }
.fc-op { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.fc-why { flex: none; border: 1px solid var(--line); background: var(--paper); color: var(--emerald); border-radius: 6px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.fc-why:hover { background: var(--emerald); color: #fbfaf6; border-color: var(--emerald); }
.fc-diff { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; line-height: 1.5; border: 1px solid var(--line); border-radius: 6px; overflow-x: auto; }
.dl { display: flex; white-space: pre; padding: 0 4px; }
.dl .dg { flex: none; width: 1.4em; text-align: center; color: var(--muted); user-select: none; }
.dl .dt { flex: 1; }
.dl.add { background: #e4f1ea; }
.dl.add .dt { color: #1b5e3f; }
.dl.del { background: #f6e0d9; }
.dl.del .dt { color: #8a3b28; }
.dl.ctx { color: #5c574d; }
.dl.sep { color: var(--muted); justify-content: center; background: var(--track); }
.fc-noop { color: var(--muted); font-size: 11.5px; font-style: italic; padding: 2px 0; }
.dl-rest { display: none; }
.dl-rest.on { display: block; }
.fc-rows-more { display: block; width: 100%; border: 0; border-top: 1px solid var(--line); background: var(--track); color: var(--muted); font-size: 11px; cursor: pointer; padding: 4px; }
.fc-rows-more:hover { color: var(--emerald); }

/* Truncated chip lists (files / features): overflow hidden behind a toggle */
.chip-rest { display: none; }
.chip-rest.on { display: inline; }
.chip-more { border: 0; background: transparent; color: var(--muted); font-size: 11px; cursor: pointer; padding: 1px 4px; margin-left: 2px; }
.chip-more:hover { color: var(--emerald); }

/* Summary "See transcript" link — a hard-to-miss handoff into the other tab. */
.see-tx-wrap { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.see-tx { border: 1px solid var(--emerald); background: var(--paper); color: var(--emerald); border-radius: 8px; padding: 8px 16px; font-family: Georgia, serif; font-size: 14px; cursor: pointer; }
.see-tx:hover { background: var(--emerald); color: #fbfaf6; }

/* Transcript navigator: sticky bar with a Turn stepper (scroll-synced + outline
   dropdown), an Error stepper, and a live "you are here" line. */
/* Scope bar (Main thread + one tab per subagent) + transcript nav both live in
   the sticky .drawer-head and show only on the Transcript tab. */
.tx-scopes { display: none; gap: 6px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); flex-wrap: wrap; align-items: center; }
.tx-scopes.on { display: flex; }
/* Collapsed: keep the list to one line by hiding the overflow pills behind the toggle. */
.tx-scopes.collapsed { flex-wrap: nowrap; }
.tx-scopes.collapsed .tx-scope-extra { display: none; }
.tx-scope-btn { max-width: 280px; border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 999px; padding: 3px 12px; font-size: 12.5px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-scope-btn:hover { color: var(--ink); border-color: var(--gray); }
.tx-scope-btn.on { color: var(--ink); border-color: var(--emerald); background: #eaf3ec; }
.tx-scope-err { margin-left: 6px; color: var(--red); font-size: 11px; }
.tx-scope-more { flex: none; border: 1px dashed var(--line); background: transparent; color: var(--muted); border-radius: 999px; padding: 3px 12px; font-size: 12px; cursor: pointer; white-space: nowrap; }
.tx-scope-more:hover { color: var(--ink); border-color: var(--gray); }
/* Only the active scope's turns render. */
.tx-scope-pane { display: none; }
.tx-scope-pane.on { display: block; }
.tx-nav { display: none; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.tx-nav.on { display: block; }
.tx-nav-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 9px; }
.tx-grp { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; }
.tx-grp.none { color: var(--muted); font-style: italic; }
.tx-grp-lbl { color: var(--muted); text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.tx-grp .btn { padding: 2px 9px; }
/* Block filter (focus the transcript on one PR / feature / use-case). */
.tx-filter-wrap { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tx-filter-wrap:empty { display: none; }
.tx-fdim { font: inherit; font-size: 12px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.tx-fdim-lbl { font-weight: 600; font-size: 12px; }
.tx-fchips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.tx-fchip { border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 999px; padding: 2px 10px; font-size: 12px; cursor: pointer; }
.tx-fchip:hover { color: var(--ink); border-color: var(--gray); }
.tx-fchip.on { color: var(--ink); border-color: var(--emerald); background: #eaf3ec; }
.turn.tx-hidden, .tx-spawn.tx-hidden { display: none; }
.tx-gap { text-align: center; color: var(--muted); font-size: 12px; padding: 7px 0; letter-spacing: .04em; }
/* Turn-share count inside each View-by pill (e.g. "research (3/30)"). */
.tx-fchip-n { color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; }
.tx-fchip.on .tx-fchip-n { color: var(--ink); }
/* Mini sparkline of where the value's blocks fall across the session. */
.tx-fbar { vertical-align: middle; margin-left: 6px; border-radius: 2px; }
.tx-fbar rect.lit { fill: var(--emerald); }
.tx-fbar rect.trk { fill: var(--track); }
.tx-pos { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
.tx-pos b { color: var(--ink); font-weight: 600; }
.tx-errs .tx-pos b { color: var(--red); }
.tx-now { margin-top: 9px; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tx-ol-wrap { position: relative; }
.tx-ol-btn { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 7px; padding: 2px 9px; font-size: 13px; cursor: pointer; }
.tx-ol-btn:hover, .tx-ol-btn.on { border-color: var(--emerald); color: var(--emerald); }
.tx-outline { position: absolute; top: 100%; left: 0; z-index: 20; margin-top: 4px; width: min(460px, 84vw); max-height: 46vh; overflow-y: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 20px rgba(20,18,15,.14); display: none; }
.tx-outline.on { display: block; }
/* Filter box pinned to the top of a long outline; the list scrolls beneath it. */
.tx-ol-search { position: sticky; top: 0; z-index: 1; padding: 8px; background: var(--paper); border-bottom: 1px solid var(--line); }
.tx-ol-search-input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; padding: 5px 9px; font-size: 12.5px; color: var(--ink); background: var(--paper); }
.tx-ol-search-input:focus { outline: none; border-color: var(--emerald); }
.tx-ol-list .tx-ol-hide { display: none; }
.tx-ol-item { display: flex; align-items: baseline; gap: 9px; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--line); background: transparent; padding: 7px 11px; font-size: 12.5px; color: var(--ink); cursor: pointer; }
.tx-ol-item:last-child { border-bottom: 0; }
.tx-ol-item:hover { background: #fbf8f1; }
.tx-ol-item.cur { background: #eaf3ec; }
.tx-ol-item.cur .tx-ol-n { color: var(--emerald); }
.tx-ol-n { flex: none; min-width: 18px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.tx-ol-tx { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.turn .tnum { margin-left: 6px; color: var(--emerald); font-family: ui-monospace, Menlo, monospace; }
/* Jump highlight: an outline pulse that doesn't fight the turn/error backgrounds. */
@keyframes flashpulse { 0% { box-shadow: 0 0 0 2px var(--emerald); } 100% { box-shadow: 0 0 0 2px transparent; } }
/* Error reveal: a glowing box that HOLDS, then fades */
@keyframes flashpulseR {
  0%, 55% { box-shadow: 0 0 0 3px var(--red), 0 0 16px 3px rgba(180, 69, 47, .45); }
  100%    { box-shadow: 0 0 0 3px transparent, 0 0 16px 3px transparent; }
}
.turn.flash { animation: flashpulse 1.2s ease; }
.tx-error.flash { animation: flashpulseR 1.6s ease-out; }
/* Transcript search — central, grows to fill the row between Turn (left) and Errors (right). */
.tx-search { flex: 1 1 auto; min-width: 180px; }
.tx-search-input { flex: 1 1 auto; min-width: 0; padding: 3px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 12px; background: var(--paper); color: var(--ink); }
.tx-search-input:focus { border-color: var(--emerald); outline: none; }
.tx-search-input::placeholder { color: var(--muted); }
/* Result stepper appears only once a term is entered. */
.tx-search-results { display: none; align-items: center; gap: 7px; flex: none; }
.tx-search.on .tx-search-results { display: inline-flex; }
.tx-hl { background: #fde68a !important; border-radius: 2px; padding: 0 1px; scroll-margin-top: calc(var(--head-h, 120px) + 10px); }
.tx-hl.active { background: #f97316 !important; color: #fff !important; outline: 2px solid #f97316; }
/* ---- Session link-add UI ---- */
.link-add-btn { border: 1px solid var(--line); background: var(--paper); color: var(--emerald); border-radius: 4px; width: 20px; height: 20px; font-size: 14px; line-height: 1; cursor: pointer; vertical-align: middle; margin-left: 6px; padding: 0; }
.link-add-btn:hover { background: #dfe9e0; }
.link-add-area { display: none; margin: 6px 0; }
.link-add-area.on { display: block; }
.link-ac { position: relative; }
.link-ac-input { width: 100%; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 12px; background: var(--paper); color: var(--ink); }
.link-ac-input:focus { border-color: var(--emerald); outline: none; }
.link-ac-input::placeholder { color: var(--muted); }
.link-ac-menu { position: absolute; top: 100%; left: 0; right: 0; z-index: 100; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; margin-top: 2px; max-height: 180px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.link-ac-menu:empty { display: none; }
.link-ac-item { padding: 5px 10px; font-size: 12px; cursor: pointer; }
.link-ac-item:hover { background: #dfe9e0; color: var(--emerald); }
.link-ac-create { font-style: italic; color: var(--emerald); }
.link-remove-btn { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 0 0 4px; vertical-align: middle; }
.link-remove-btn:hover { color: var(--red); }
.link-ac-error { color: var(--red); font-size: 11px; margin-top: 4px; }
.link-ac-spinner { color: var(--muted); font-size: 11px; margin-top: 4px; font-style: italic; }

/* Interactive feature-cost treemap (featTreemap.ts): drill-down + breadcrumb +
   threshold slider + cursor tooltip. DOM divs (not SVG) so the polish is cheap. */
.tm { display: flex; flex-direction: column; gap: 10px; }
.tm-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-height: 20px; }
.tm-crumb { font-size: 13px; color: var(--muted); }
.tm-crumb a { color: var(--emerald); cursor: pointer; }
.tm-crumb a:hover { text-decoration: underline; }
.tm-crumb .sep { margin: 0 6px; opacity: .5; }
.tm-thr { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; white-space: nowrap; }
.tm-thr input[type=range] { width: 120px; accent-color: var(--emerald); }
.tm-thrval { width: 52px; display: inline-block; }
.tm-chart { position: relative; width: 100%; height: 480px; border: 1px solid var(--line);
  border-radius: 8px; overflow: hidden; background: var(--paper); }
.tm-cell { position: absolute; overflow: hidden; cursor: default; border: 1px solid rgba(255,255,255,.55); }
.tm-cell.haskids { cursor: pointer; }
.tm-cell:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
.tm-cell .l { position: absolute; top: 4px; left: 6px; right: 6px;
  font: 600 12px/1.15 ui-monospace, "SF Mono", Menlo, monospace; color: rgba(255,255,255,.97);
  text-shadow: 0 1px 2px rgba(0,0,0,.32); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; pointer-events: none; }
.tm-cell .v { position: absolute; top: 19px; left: 6px; font: 700 12px/1.1 ui-monospace, Menlo, monospace;
  color: rgba(255,255,255,.95); text-shadow: 0 1px 2px rgba(0,0,0,.3); pointer-events: none; }
.tm-cell.direct { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.16) 0 6px, transparent 6px 12px); }
.tm-cell.haskids::after { content: ""; position: absolute; right: 5px; bottom: 4px; width: 0; height: 0;
  border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 7px solid rgba(255,255,255,.8); }
.tm-cell.tiny .l, .tm-cell.tiny .v { display: none; }
.tm-tip { position: fixed; z-index: 50; pointer-events: none; display: none; max-width: 280px;
  background: var(--ink); color: #fff; padding: 8px 10px; border-radius: 6px; font-size: 12px;
  line-height: 1.35; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
.tm-tip b { font-weight: 600; }
.tm-tip .pct { color: #9fe3c4; }
/* Highlights digest — the Dashboard's default view: computed insights about your
   recent AI work, set as editorial sentences with the real numbers as emerald
   accents, each drilling into the surface behind it. */
.hl { max-width: 720px; margin: 4px 0 0; }
/* The head carries the window + scope label on the left and the scope control on
   the right, so "whose numbers are these" is answerable from the head alone (the
   sentences below take their subject from the same scope — see hlScope()). */
/* baseline, not center: the toggle is text sitting on the masthead line, so its
   letters must share that line rather than be optically centred against it. */
.hl-head {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
  margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ink);
}
.hl-head-t { flex: 1; }
/* Scope control (Me · Team · Org) — a TEXT toggle, not a segmented pill. It follows
   .hrow-to (the "See the data →" buttons repeated down this column): no fill, no
   border, muted at rest, emerald only on hover. Nothing else in the Highlights
   reading column carries a resting fill, and .hl-head is an editorial masthead
   (small-caps over an ink hairline) that a filled control would fight. The active
   choice is marked by ink + weight, which is enough at this density.
   Inherits the head's uppercase/letter-spacing so it reads as part of the masthead
   line — except the team-name variants below, which must keep real casing. */
.hl-scope { display: inline-flex; align-items: baseline; gap: 6px; flex: none; }
.hl-sc-b {
  border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 11px; letter-spacing: .08em; color: var(--gray);
}
.hl-sc-b:hover { color: var(--emerald); }
.hl-sc-b.on { color: var(--ink); font-weight: 600; }
.hl-sc-sep { color: var(--line); }
/* A team NAME is a proper noun ("iOS Platform"), so it opts out of the head's
   uppercasing — which would render it "IOS PLATFORM". Set from markup (hl-sc-name),
   not a structural selector: every choice is a <button>, so :only-of-type and
   friends can't tell a name from the fixed words Me/Team/Org. */
.hl-sc-name { text-transform: none; letter-spacing: .04em; }
/* The admin's active team choice: the NAME is the picker. A real <select> laid
   transparently over the text, so the visible width is the name's width — a
   bordered select sizes to its widest option, which would leave "Dev" adrift in
   space reserved for "Infrastructure Platform". This also inherits .hl-sc-b, so
   the resting/active treatment is the toggle's, not the OS's: no native chrome on
   an editorial masthead. (An earlier version put .fb-sel on it, which does
   nothing — that rule is `.filter-bar .fb-sel`, and this lives in .hl-head.) */
.hl-sc-pick { position: relative; display: inline-flex; align-items: baseline; gap: 3px; }
.hl-sc-pick select {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
  border: 0; padding: 0; margin: 0; font: inherit;
}
/* Sits below the .on weight so the caret reads as an affordance, not part of the
   name. em-sized, so it tracks the label if the head's scale ever changes. */
.hl-sc-caret { font-size: .9em; font-weight: 400; color: var(--gray); line-height: 1; }
.hl-sc-pick:hover { color: var(--emerald); }
.hl-sc-pick:hover .hl-sc-caret { color: var(--emerald); }
/* Keyboard focus lands on the invisible select, so the ring has to be drawn on the
   parent — otherwise tabbing to it shows nothing at all. */
.hl-sc-pick:focus-within { color: var(--emerald); }
.hl-sc-pick:focus-within .hl-sc-caret { color: var(--emerald); }
.hl-sc-pick select:focus-visible { outline: none; }
.hl-sc-pick:focus-within { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 3px; }
/* A third-party user scope, reachable only from the Dashboard's user select — it
   has no choice of its own, so name who it is beside the toggle. */
.hl-sc-who { color: var(--emerald); letter-spacing: .06em; }
/* The row is a plain container (text is selectable); only "See the data" clicks. */
.hrow {
  border-bottom: 1px solid var(--line); padding: 16px 0;
  display: flex; align-items: baseline; gap: 22px; color: var(--ink);
}
.hrow-q { flex: 1; font-family: Georgia, "Times New Roman", serif; font-size: 17px; line-height: 1.5; }
.hrow-q b { font-weight: 600; font-style: normal; color: var(--ink); }
.hrow-to {
  flex: none; border: 0; background: none; padding: 0; font-family: inherit; cursor: pointer;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--gray); white-space: nowrap;
}
.hrow-to i { font-style: normal; display: inline-block; transition: transform .12s; }
.hrow-to:hover { color: var(--emerald); }
.hrow-to:hover i { transform: translateX(3px); }
/* Facet/artifact mention inside a highlight sentence — a small muted uppercase
   label ("PR", "FILE", "REPO") carries the tagging; the value is left as plain
   text (no fill/underline, which sat heavy or read link-like on long wrapping
   titles). The per-type tooltip (title=) carries the meaning. */
.hl-tag-k {
  margin-right: 5px; vertical-align: .5px; color: var(--muted);
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em;
}
.home-ask { max-width: 720px; margin-top: 18px; padding: 14px 16px; background: var(--track); border-radius: 10px; font-size: 13px; color: var(--ink); }
.home-ask code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--paper); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }
.home-ask .muted { color: var(--muted); }
/* On the Dashboard tab the deep-dive prompt spans the content width; on Highlights
   it stays inside the 720px reading column (same pattern as .notice above). */
#dash-ask .home-ask { max-width: none; }
.home-back { display: inline-block; margin-top: 10px; cursor: pointer; }

/* Store-state nudge (fresh / un-enriched store) — see notice.ts. Emerald-accented
   like the grounding banner, but always-on rather than toggled. */
.notice { max-width: 720px; margin: 0 0 16px; padding: 12px 16px; background: var(--paper); border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: 8px; }
/* On the full-width tabs (Dashboard / Sessions / Artifacts) the notice spans the
   content width; on Highlights it stays a 720px reading column. */
#dash-notice .notice, #sessions-notice .notice, #art-notice .notice { max-width: none; }
.notice .notice-h { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.notice .notice-b { font-size: 13px; color: var(--muted); line-height: 1.55; }
.notice code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--track); color: var(--ink); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }

/* Grounding banner shown above a destination view when arriving from a question */
/* Per-view slot the grounding message renders into (above the chart/table). Empty
   = no space; when active it carries the .ask-banner below. scroll-margin keeps the
   slot clear of the top when scrolled into view. */
.ask-slot { scroll-margin-top: 14px; }
.ask-slot.on { margin: 14px 0 18px; }
.ask-banner { display: none; }
.ask-banner.on { display: block; margin: 0; border: 1px solid var(--line); border-left: 3px solid var(--emerald); border-radius: 8px; background: var(--paper); overflow: hidden; }
.ask-bc { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: var(--track); font-size: 13px; }
.ask-q { flex: 1; color: var(--ink); }
.ask-q b { font-weight: 600; }
.ask-back { flex: none; cursor: pointer; color: var(--emerald); font-size: 12px; }
.ask-orient { display: flex; align-items: flex-start; gap: 8px; padding: 11px 14px; font-size: 13px; line-height: 1.5; }
.ask-ans { font-weight: 600; color: var(--ink); }
.ask-about { color: var(--muted); flex: 1; }
.ask-x { flex: none; border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; line-height: 1; padding: 2px 4px; }
.ask-x:hover { color: var(--ink); }

/* Signed-in user chip + sign-out, in the header. `.meta` already took the
   auto-margin, so this just sits to its right with a divider. */
.top .user { display: flex; align-items: center; gap: 10px; padding-left: 14px; margin-left: 14px; border-left: 1px solid var(--line); font-size: 13px; }
.top .user:empty { display: none; }
.user-name { color: var(--ink); font-weight: 600; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.user-role { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--emerald); border: 1px solid var(--emerald); border-radius: 999px; padding: 1px 7px; }
.user-logout { border: 1px solid var(--line); background: var(--paper); color: var(--muted); cursor: pointer; border-radius: 8px; padding: 4px 12px; font-size: 12px; }
.user-logout:hover { color: var(--ink); border-color: var(--gray); }

/* Auth gate — full-screen login/signup, shown only when .on is set. */
.auth-gate { display: none; }
.auth-gate.on { display: flex; position: fixed; inset: 0; z-index: 100; align-items: center; justify-content: center; background: var(--bg); padding: 24px; }
.auth-card { width: 100%; max-width: 380px; background: var(--paper); border: 1px solid var(--line); border-radius: 14px; padding: 34px 32px; box-shadow: 0 10px 40px rgba(0,0,0,.08); }
.auth-brand { font-family: Georgia, "Times New Roman", serif; font-size: 26px; font-weight: 600; letter-spacing: -.01em; color: var(--emerald); text-align: center; }
.auth-title { text-align: center; color: var(--muted); font-size: 15px; margin: 4px 0 24px; }
.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.auth-in { border: 1px solid var(--line); border-radius: 8px; padding: 9px 11px; font-size: 14px; background: var(--bg); color: var(--ink); }
.auth-in:focus { outline: none; border-color: var(--emerald); }
.auth-err { color: var(--red); font-size: 13px; min-height: 16px; }
.auth-btn { border: 0; background: var(--emerald); color: #f3efe6; cursor: pointer; border-radius: 8px; padding: 11px; font-size: 15px; font-weight: 600; }
.auth-btn:disabled { opacity: .6; cursor: default; }
.auth-switch { text-align: center; margin-top: 20px; font-size: 13px; color: var(--muted); }
.auth-switch a { color: var(--emerald); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }

/* AL-95 locked sessions: title-only rows and the request-access affordance. */
.srow-locked { cursor: default; color: var(--muted); }
.s-locked { color: var(--muted); font-style: italic; }
.s-req { text-align: right; }
.req-btn { border: 1px solid var(--line); background: var(--paper); color: var(--emerald); cursor: pointer; border-radius: 8px; padding: 4px 12px; font-size: 12px; }
.req-btn:hover:not(:disabled) { border-color: var(--emerald); }
.req-btn:disabled { color: var(--muted); cursor: default; }
.locked-pane { padding: 40px 24px; text-align: center; }
.locked-msg { color: var(--muted); margin-bottom: 18px; }

/* Owner sharing panel in the drawer summary (AL-95). */
.share-box { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--line); }
.share-head { font-weight: 600; margin-bottom: 10px; }
.share-sub { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin: 12px 0 6px; }
.share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; }
.share-email { font-size: 13px; }
.share-acts { display: flex; gap: 6px; }
.share-acts button { border: 1px solid var(--line); background: var(--paper); cursor: pointer; border-radius: 6px; padding: 3px 10px; font-size: 12px; }
.share-grant { color: var(--emerald); }
.share-deny, .share-revoke { color: var(--muted); }
.share-acts button:hover { border-color: var(--gray); }
.share-none { font-size: 13px; color: var(--muted); }
.share-add { display: flex; gap: 8px; margin-top: 14px; }
.share-in { flex: 1; border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; background: var(--bg); color: var(--ink); }
.share-in:focus { outline: none; border-color: var(--emerald); }
.share-btn { border: 0; background: var(--emerald); color: #f3efe6; cursor: pointer; border-radius: 8px; padding: 7px 14px; font-size: 13px; }
.share-err { color: var(--red); font-size: 12px; min-height: 15px; margin-top: 6px; }

/* Settings tab (E3). Settings sits at the right end of the tab bar. */
.tab-right { margin-left: auto; }
.set-grid { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.set-lbl { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--muted); }
.set-in { border: 1px solid var(--line); border-radius: 8px; padding: 8px 11px; font-size: 14px; background: var(--bg); color: var(--ink); }
.set-in:focus { outline: none; border-color: var(--emerald); }
.set-static { display: flex; gap: 10px; align-items: baseline; font-size: 13px; }
.set-k { color: var(--muted); min-width: 48px; }
.set-v { color: var(--ink); }
.set-actions { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.set-btn { border: 0; background: var(--emerald); color: #f3efe6; cursor: pointer; border-radius: 8px; padding: 8px 16px; font-size: 14px; }
.set-msg { font-size: 13px; }
.set-msg.ok { color: var(--emerald); }
.set-msg.err { color: var(--red); }

/* Admin teams pane (E3b). */
.team-create { display: flex; gap: 8px; align-items: center; margin-bottom: 16px; }
.team-list { display: flex; flex-direction: column; }
.team-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); }
.team-name { border: 0; background: transparent; cursor: pointer; font-size: 15px; color: var(--ink); font-family: Georgia, serif; padding: 0; }
.team-name:hover { color: var(--emerald); }
.team-meta { color: var(--muted); font-size: 12px; }
.team-acts { margin-left: auto; display: flex; gap: 6px; }
.team-acts button { border: 1px solid var(--line); background: var(--paper); cursor: pointer; border-radius: 6px; padding: 3px 10px; font-size: 12px; color: var(--muted); }
.team-acts button:hover { border-color: var(--gray); color: var(--ink); }
.team-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; padding: 8px 0 16px 16px; }
.td-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 8px; }
.td-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 13px; }
.td-row button { border: 1px solid var(--line); background: var(--paper); cursor: pointer; border-radius: 6px; padding: 2px 9px; font-size: 12px; color: var(--muted); }
/* The member row now holds three things (name · role · Remove). The name takes
   the slack so the role select and Remove stay together at the right edge and
   line up down the column — `justify-content: space-between` alone would push the
   select to the middle of each row, at a different x per name length. */
.td-who { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Sized and coloured off .td-row button (its sibling in the row), not the larger
   .td-user-sel in the add-row below: these two sit side by side and must read as
   one pair of row actions. --paper (not --bg) for the same reason. */
.td-role {
  flex: none; border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px;
  font-size: 12px; background: var(--paper); color: var(--muted);
}
.td-role:hover { border-color: var(--gray); color: var(--ink); }
.td-role:disabled { opacity: .5; cursor: default; }
/* An admin's row: stated, not offered (admin is org-wide, not team-scoped). Reads
   as the label it is — same size/colour as the select's resting state, no border,
   so it doesn't look like a control that failed to work. */
.td-role-fixed { flex: none; font-size: 12px; color: var(--muted); font-style: italic; }
.td-repo { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; }
.td-none { font-size: 13px; color: var(--muted); }
.td-add { display: flex; gap: 6px; margin-top: 10px; }
.td-add .set-in, .td-user-sel { flex: 1; }
.td-user-sel { border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; font-size: 13px; background: var(--bg); color: var(--ink); }
.td-add button { border: 0; background: var(--emerald); color: #f3efe6; cursor: pointer; border-radius: 8px; padding: 6px 12px; font-size: 13px; }

/* Session-visibility radio group (roles milestone). A disclosure control, so all
   three levels and their consequences stay legible at once — see
   visibilityControl(). Follows the .flt-menu-item row idiom (flex, 8px gap,
   hover tint) with the label/description stacked, and marks the live level with
   the emerald accent so the current disclosure state reads at a glance. */
.td-vis { display: flex; flex-direction: column; gap: 2px; }
.td-vis-item {
  display: flex; align-items: flex-start; gap: 8px; padding: 7px 8px;
  border: 1px solid transparent; border-radius: 8px; cursor: pointer;
}
.td-vis-item:hover { background: #fbf8f1; }
.td-vis-item:has(.td-vis-r:checked) { background: var(--paper); border-color: var(--line); }
.td-vis-r { flex: none; margin: 2px 0 0; accent-color: var(--emerald); }
.td-vis-tx { display: flex; flex-direction: column; gap: 1px; }
.td-vis-l { font-size: 13px; color: var(--ink); }
.td-vis-item:has(.td-vis-r:checked) .td-vis-l { color: var(--emerald); font-weight: 500; }
.td-vis-d { font-size: 12px; color: var(--muted); }

/* Admin global settings pane (E3c). */
.set-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

/* Collapsible panel (ingest token — a secret, so folded by default). The head is
   a <button> for keyboard/AT reach, so reset the browser chrome and inherit the
   panel-head layout; the caret reuses the .fc-caret rotate idiom. A collapsed
   panel drops its head margin so the fold reads as a single compact bar. */
.gs-fold-head {
  width: 100%; border: 0; background: none; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left; gap: 8px; justify-content: flex-start;
}
.gs-fold-head h2 { flex: none; }
.gs-fold.collapsed .panel-head { margin-bottom: 0; }
.gs-fold.collapsed .fc-caret { display: inline-block; transform: rotate(-90deg); }
.gs-fold-head:hover h2 { color: var(--emerald); }
.gs-fold-hint { margin-left: auto; color: var(--muted); font-size: 12px; font-style: italic; }
.gs-token { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 13px; background: var(--track); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; word-break: break-all; color: var(--ink); }

/* Jira connector panel (AL-127). The status block leads, because both tiers fail
   silently and independently — the dot answers "is this working" before any field
   is read. Colours are the existing semantic set (emerald live, amber stale/
   waiting, gray off); no new hues. */
.jc-status { display: flex; flex-direction: column; gap: 2px; margin-bottom: 18px; }
.jc-row { display: flex; align-items: flex-start; gap: 9px; padding: 8px 10px; border-radius: 8px; background: var(--paper); }
.jc-dot { flex: none; width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; background: var(--gray); }
.jc-live .jc-dot { background: var(--emerald); }
.jc-stale .jc-dot, .jc-waiting .jc-dot { background: var(--amber); }
.jc-k { flex: none; width: 84px; font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 1px; }
.jc-tx { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.jc-t { font-size: 13px; color: var(--ink); line-height: 1.45; }
.jc-off .jc-t, .jc-waiting .jc-t { color: var(--muted); }
.jc-stale .jc-t { color: var(--red); }
/* What the tier buys — the consequence line, deliberately quieter than the state. */
.jc-b { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.jc-hint { margin: 10px 0 0; max-width: 560px; line-height: 1.5; }
.jc-hint a { color: var(--emerald); }
/* Remove-stored-token: a destructive action inside a form label, so it reads as
   the small secondary control it is (the .td-row button idiom), not a Save peer. */
.jc-clear { align-self: flex-start; margin-top: 6px; border: 1px solid var(--line); background: var(--paper); cursor: pointer; border-radius: 6px; padding: 2px 9px; font-size: 12px; color: var(--muted); }
.jc-clear:hover { border-color: var(--red); color: var(--red); }
.jc-hook { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.jc-hook .set-note { max-width: 560px; }
/* The URL contains the secret, so it gets the same treated-as-a-secret framing as
   .gs-token (which it reuses) and wraps rather than truncating — a half-copied
   webhook URL fails in Jira with no clue why. */
.jc-url { margin-bottom: 4px; }
.jc-warn { color: var(--red); }
/* Secondary action beside Save (regenerate = destructive-ish, not the primary). */
.jc-btn2 { border: 1px solid var(--line); background: var(--paper); cursor: pointer; border-radius: 8px; padding: 7px 13px; font-size: 13px; color: var(--muted); }
.jc-btn2:hover { border-color: var(--red); color: var(--red); }
.jc-steps { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
/* Reuses .gs-fold-head's button reset; the h2 drops to the panel's sub-heading
   size since this fold sits INSIDE a panel rather than being one. */
.jc-steps-head h2 { font-size: 15px; }
.jc-steps.collapsed .fc-caret { display: inline-block; transform: rotate(-90deg); }
.jc-steps-body { padding-top: 10px; }
.jc-ol { margin: 0 0 12px; padding-left: 22px; max-width: 620px; color: var(--ink); font-size: 13px; line-height: 1.65; }
.jc-ol li { margin-bottom: 7px; }
.jc-ol code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--track); padding: 1px 6px; border-radius: 5px; border: 1px solid var(--line); }

/* Site footer — Tuneloop awareness funnel (attribution + GitHub + feedback). */
.site-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px; padding: 30px 28px 38px; margin-top: 36px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.site-footer a { color: var(--emerald); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer .dot { color: var(--line); }

/* Dashboard-wide team/repo scope filter bar (AL-100). Team = single-select lens;
   Repo = multi-select OR-set shown as removable chips + an "All repos / + add
   repo" dropdown (reuses the .mfl-v/.mfl-vx chip idiom). Controls reuse the app's
   select tokens (.sr-by shape, --paper surface) so the bar reads as native. */
.filter-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 10px; font-size: 13px; }
.filter-bar .fb-lbl { color: var(--muted); font-weight: 600; }
.filter-bar .fb-sel { border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; font-size: 13px; background: var(--paper); color: var(--ink); }
.filter-bar .fb-repos { display: inline-flex; flex-wrap: wrap; gap: 5px; align-items: center; }

/* Sessions-list owner cell: owner name + a distinct team pill, so "who" and
   "which team" read as separate things (not one run-on string). */
.s-owner-name { color: var(--ink); }
.s-team-tag { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--track); border: 1px solid var(--line); color: var(--muted); font-size: 11px; vertical-align: middle; }

/* Access-request inbox: header badge + popover. Reuses the meta-info-pop idiom
   (paper surface, same shadow) + the .share-* row rhythm so it reads as native. */
.inbox { position: relative; display: inline-flex; }
.inbox-wrap { position: relative; display: inline-flex; }
.inbox-btn { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 8px; padding: 4px 10px; font-size: 12px; cursor: pointer; }
.inbox-btn:hover { border-color: var(--emerald); }
.inbox-count { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--emerald); color: #f3efe6; font-size: 11px; font-weight: 600; }
.inbox-pop { display: none; position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; text-align: left; min-width: 300px; max-width: 420px; max-height: 70vh; overflow-y: auto; padding: 8px; background: var(--paper); border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 6px 20px rgba(0,0,0,.12); }
.inbox-pop.on { display: block; }
.inbox-head { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 2px 4px 8px; }
.inbox-row { padding: 8px 6px; border-top: 1px solid var(--line); }
.inbox-row:first-of-type { border-top: 0; }
.inbox-ask { font-size: 13px; color: var(--ink); margin-bottom: 6px; }
.inbox-who { font-weight: 600; }
.inbox-sess { font-style: italic; color: var(--muted); }
.inbox-acts { display: flex; gap: 6px; }
.inbox-acts button { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 3px 10px; font-size: 12px; cursor: pointer; }
.inbox-grant { border-color: var(--emerald) !important; color: var(--emerald) !important; }
.inbox-grant:hover { background: var(--emerald) !important; color: #f3efe6 !important; }
.inbox-deny:hover { border-color: var(--red); color: var(--red); }
.inbox-view { margin-left: auto; }
.inbox-empty { padding: 10px; color: var(--muted); font-size: 13px; }
.inbox-err { color: var(--red); font-size: 12px; padding: 4px 6px 0; }
/* Benchmarks tab — suites list, benchmark detail, task + run drill-ins. */
/* Inline back arrow on the page's own title row — zero standalone rows. */
.bench-back { flex: none; color: var(--emerald); font-size: 19px; line-height: 1; text-decoration: none; padding: 2px 6px; margin-left: -6px; border-radius: 6px; }
.bench-back:hover { background: var(--track); }
.bench-suite-desc { color: var(--muted); font-size: 13px; margin: -6px 0 14px; }
.bench-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.bench-card { border: 1px solid var(--line); border-radius: 10px; background: var(--paper); padding: 14px 16px; cursor: pointer; transition: border-color .12s; }
.bench-card:hover { border-color: var(--emerald); }
.bench-card-top { display: flex; align-items: center; gap: 10px; }
.bench-card-name { font-weight: 600; flex: 1; }
.bench-card-repo { color: var(--muted); font-size: 12px; margin-top: 3px; }
.bench-card-tasks { font-size: 13px; margin-top: 8px; }
.bench-diffs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.bench-diff-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: var(--track); color: var(--ink); }
.bench-best { margin-top: 10px; font-size: 13px; color: var(--ink); }
.bench-best-none { color: var(--muted); }
.bench-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.bench-task-h { margin: 0; font-size: 17px; flex: 1; }
.bench-name-input { flex: 1; font-size: 17px; font-weight: 600; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; color: var(--ink); font-family: inherit; }
.bench-name-input:hover:not(:disabled), .bench-name-input:focus { border-color: var(--line); background: var(--paper); outline: none; }
.bench-desc-input { width: 100%; box-sizing: border-box; font-size: 13px; color: var(--muted); border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; font-family: inherit; resize: vertical; }
.bench-desc-input:hover:not(:disabled), .bench-desc-input:focus { border-color: var(--line); background: var(--paper); outline: none; color: var(--ink); }
.bench-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 10px 0 4px; font-size: 13px; }
.bench-meta .kv b { font-weight: 600; color: var(--muted); margin-right: 4px; }
.bench-funnel { margin: 14px 0 4px; max-width: 560px; }
.bench-funnel-row { display: flex; align-items: center; gap: 10px; margin: 5px 0; font-size: 13px; }
.bench-funnel-lbl { flex: 0 0 110px; color: var(--muted); }
.bench-funnel-row .bar-track { flex: 1; height: 10px; }
.bench-funnel-n { flex: 0 0 56px; text-align: right; font-variant-numeric: tabular-nums; }
.bench-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.bench-tbl th { text-align: left; font-weight: 600; color: var(--muted); padding: 7px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bench-tbl td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.bench-tbl td.num, .bench-tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.bench-row { cursor: pointer; }
.bench-row:hover td { background: var(--track); }
.bench-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.bench-task-title { max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-rate { display: flex; align-items: center; gap: 8px; min-width: 130px; }
.bench-rate-num { flex: 0 0 38px; font-variant-numeric: tabular-nums; }
.bench-rate .bar-track { flex: 1; height: 8px; }
.bench-diff-easy { background: #e3efe7; color: #1c6b47; }
.bench-diff-medium { background: #efe9d8; color: #7a5d0e; }
.bench-diff-hard { background: #f3e2d9; color: #93441f; }
.bench-diff-xl { background: #f0dede; color: #8f2f2f; }
.bench-ctl-row { display: flex; gap: 20px; margin-top: 12px; font-size: 13px; }
.bench-ctl-row label { display: flex; align-items: center; gap: 7px; color: var(--muted); }
.bench-ctl-row select { font: inherit; padding: 3px 6px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.bench-prompt-meta { font-size: 12.5px; color: var(--muted); margin: -4px 0 10px; }
.bench-prompt-input { width: 100%; box-sizing: border-box; font: inherit; font-size: 13.5px; line-height: 1.55; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--paper); color: var(--ink); resize: vertical; }
.bench-prompt-input:focus { outline: none; border-color: var(--emerald); }
.bench-tests { display: flex; flex-direction: column; gap: 3px; }
.bench-test { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-tiles { margin-top: 14px; }
.bench-tx-row td { background: var(--track); }
.bench-tx { margin: 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.bench-form-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; }
.bench-form-row label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--muted); }
.bench-input { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); min-width: 130px; }
.bench-input:focus { outline: none; border-color: var(--emerald); }
.bench-pipe { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.bench-spin { width: 13px; height: 13px; border: 2px solid var(--line); border-top-color: var(--emerald); border-radius: 50%; animation: benchspin .8s linear infinite; flex: none; }
@keyframes benchspin { to { transform: rotate(360deg); } }
.bench-danger { color: #b4452f; }
.bench-danger[data-armed] { background: #b4452f; color: #fff; border-color: #b4452f; }
.bench-recon { display: inline-flex; align-items: center; gap: 6px; margin-left: 12px; font-size: 12px; color: var(--muted); }
.bench-unset { color: var(--muted); font-style: italic; cursor: help; }
.bench-cli { background: var(--track); border: 1px solid var(--line); border-radius: 8px; padding: 10px 14px; font-size: 12.5px; overflow-x: auto; margin: 10px 0 6px; }
.bench-more { font-size: 12.5px; color: var(--emerald); cursor: pointer; text-decoration: none; margin-top: 2px; }
.bench-more:hover { text-decoration: underline; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.bench-diff { background: var(--track); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; font-size: 12px; line-height: 1.5; overflow-x: auto; margin: 8px 0 0; white-space: pre; }
.bench-diff-add { color: #1c6b47; background: rgba(15, 122, 85, .08); display: inline-block; width: 100%; }
.bench-diff-del { color: #93441f; background: rgba(180, 69, 47, .08); display: inline-block; width: 100%; }
.bench-diff-hunk { color: var(--muted); }
.bench-seg { margin-left: auto; margin-right: 12px; }
.bench-suite-chip { margin-top: 10px; font-size: 11.5px; color: var(--muted); border-top: 1px dashed var(--line); padding-top: 8px; }
.bench-input-sm { padding: 3px 7px; font-size: 12.5px; min-width: 140px; }
.bench-funnel-title { font-size: 12.5px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.bench-funnel-count { display: inline-block; min-width: 52px; text-align: right; }
.bench-funnel-drop { display: inline-block; width: 44px; text-align: left; margin-left: 8px; color: #b4452f; font-size: 11px; }
/* Single-line rows: stage descriptions live behind the ⓘ hover, not inline. */
.bench-funnel { max-width: 760px; }
.bench-funnel-lbl { flex: 0 0 170px; display: flex; align-items: center; gap: 6px; color: var(--ink); font-size: 12.5px; }
.bench-funnel-row { align-items: center; margin: 6px 0; }
.bench-funnel-n { flex: 0 0 108px; display: flex; align-items: baseline; justify-content: flex-end; }
.bench-info { color: var(--gray); font-size: 12px; line-height: 1; cursor: help; }
.bench-info:hover { color: var(--emerald); }

/* Benchmarks: pipeline stepper, progress, meta grid, GitHub-style diff. */
.bench-stepper { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.bench-step { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 4px 12px 4px 6px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: var(--paper); }
.bench-step i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; background: var(--track); color: var(--muted); }
.bench-step.done { color: var(--ink); }
.bench-step.done i { background: #e3efe7; color: #1c6b47; }
.bench-step.current { border-color: var(--emerald); color: var(--emerald); font-weight: 600; }
.bench-step.current i { background: var(--emerald); color: #fff; }
.bench-step-arrow { color: var(--emerald); font-size: 12px; }
.bench-step-hint { font-size: 13px; color: var(--muted); margin: 0 0 16px 2px; }
.bench-step-hint b { color: var(--ink); }

.bench-prog { display: inline-flex; align-items: center; gap: 8px; flex: 1 1 160px; max-width: 320px; }
.bench-prog .bar-track { flex: 1; height: 8px; }
.bench-prog-n { font-size: 12px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bench-stop { flex: none; }
.bench-stop:hover { border-color: var(--red); color: var(--red); }

.bench-grid { display: grid; grid-template-columns: repeat(3, minmax(180px, 1fr)); gap: 14px 22px; margin-top: 12px; }
.bench-grid .bench-field label { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.bench-grid .bench-field .bench-input, .bench-grid .bench-field select { width: 100%; box-sizing: border-box; }
.bench-field-help { font-size: 11.5px; color: var(--muted); margin-top: 4px; line-height: 1.45; }
@media (max-width: 900px) { .bench-grid { grid-template-columns: 1fr; } }

.ghd-file { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; margin: 10px 0; }
.ghd-head { background: var(--track); border-bottom: 1px solid var(--line); padding: 7px 12px; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.ghd-body { margin: 0; padding: 0; font-size: 12px; line-height: 1.5; overflow-x: auto; background: var(--paper); }
.ghd-body span { display: block; padding: 0 12px; white-space: pre; }
.ghd-add { background: #e6ffec; color: #1a3620; }
.ghd-del { background: #ffebe9; color: #4a1512; }
.ghd-hunk { background: #ddf4ff; color: #365a75; padding-top: 2px; padding-bottom: 2px; }
.ghd-ctx { color: var(--ink); }

/* Benchmarks polish: green field labels, quieter values, full-width stage strip,
   bulk-select column, tighter diff type. */
.bench-grid .bench-field label { color: var(--emerald); }
.bench-grid .bench-field .mono { font-size: 12px; }
.bench-grid .bench-field .bench-input { font-size: 12px; }
.bench-stage { margin: 14px 0 4px; }
.bench-stage .bench-pipe { margin-bottom: 10px; }
.bench-stage .bench-stepper { margin-top: 2px; }
.bench-step i.busy { background: transparent; }
.bench-step i.busy .bench-spin { width: 12px; height: 12px; }
.bench-selcol { width: 26px; }
.bench-selcol input { cursor: pointer; }
.ghd-head { font-size: 11.5px; }
.ghd-body { font-size: 11px; }

/* The stage strip gets its own quiet card so pipeline state reads as one unit. */
.bench-stage { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px 12px; margin: 14px 0 6px; }
.bench-stage .notice { max-width: none; background: transparent; border: 0; border-left: 3px solid var(--emerald); border-radius: 0; padding: 2px 12px; margin-bottom: 12px; }
.bench-stage .bench-step { background: var(--paper); }
.bench-stage .bench-step-hint { margin-bottom: 2px; }
.bench-sofar { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--amber); margin-top: 3px; }
.bench-sofar .bench-spin { width: 10px; height: 10px; }

/* Collapsible configuration grid on the benchmark page. */
.bench-cfg { margin-top: 12px; }
.bench-cfg-head { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; border: 0; background: transparent; padding: 4px 0; cursor: pointer; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--emerald); }
.bench-cfg-head:hover { color: var(--ink); }
.bench-cfg-chev { font-size: 10px; width: 10px; }
.bench-cfg-sum { text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--muted); margin-left: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bench-cfg .bench-grid { margin-top: 8px; }

/* ── AI Defect Rate detail (DEMO MOCK) ─────────────────────────────────────
   The section reuses the shared panel / seg / sr-check chrome; only the pieces
   with no existing equivalent live here: the horizontal breakdown bars, the
   defect-type chips, and the drill-in table. Red rather than emerald throughout
   — this is the one headline metric where a bigger number is a worse one. */
.dr-controls { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.dr-swatch-maturing {
  width: 11px; height: 11px; border-radius: 2px; display: inline-block; vertical-align: middle;
  background: repeating-linear-gradient(45deg, var(--red) 0 2px, #f4ddd6 2px 5px);
}
/* Breakdown: label / bar / value, on a fixed grid so the bars share a baseline
   regardless of how long the value names are. */
.dr-bars { display: flex; flex-direction: column; gap: 7px; margin: 4px 0 10px; }
.dr-bar-row { display: grid; grid-template-columns: 150px 1fr 118px; align-items: center; gap: 12px; }
.dr-bar-lbl { font-size: 13px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dr-bar-lbl .swatch { width: 9px; height: 9px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.dr-bar-track { position: relative; height: 18px; background: var(--track); border-radius: 3px; }
.dr-bar-fill { height: 100%; background: var(--red); border-radius: 3px; }
/* The window's overall rate, so each row reads as better/worse than the whole. */
.dr-bar-ref { position: absolute; top: -2px; bottom: -2px; width: 0; border-left: 1.5px dashed var(--muted); }
.dr-bar-val { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; text-align: right; }
.dr-bar-n { color: var(--muted); font-size: 11px; }
/* Drill-in table. Capped height with its own scroll so a 90d window of defects
   can't push the mock note off the bottom of the page. */
.dr-tbl-wrap { max-height: 460px; overflow-y: auto; }
.dr-table td { vertical-align: top; padding-top: 7px; padding-bottom: 7px; }
.dr-table .dr-right, .dr-table th.dr-right { text-align: right; font-family: ui-monospace, Menlo, monospace; }
.dr-art-num { font-family: ui-monospace, Menlo, monospace; color: var(--muted); }
.dr-art-repo { color: var(--muted); font-size: 11.5px; margin-top: 2px; }
.dr-chip { display: inline-block; border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.dr-chip-revert { background: #f4ddd6; color: var(--red); }
.dr-chip-hotfix { background: #f6ecd2; color: var(--amber); }
.dr-chip-bug_ticket { background: #ece9e1; color: var(--gray); }
.dr-chip-reopened { background: #e4e6f0; color: #4a5578; }
/* Empty state for the breakdown panel. The panel stays put and prompts rather
   than vanishing — a section that isn't rendered can't be discovered. */
.dr-bd-prompt { color: var(--muted); font-size: 13.5px; padding: 18px 2px; }