: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; }
.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; }
.chart-title { font-size: 13px; font-weight: 600; color: var(--ink); margin: 2px 0 10px; }
.ca-controls { margin: 12px 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; }
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.panel-head h2 { margin: 0; font-size: 18px; }
.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(--emerald); 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 table headers (PR table, feature list, sessions table). */
.pr-th, .feat-th, .sess-th { cursor: pointer; user-select: none; white-space: nowrap; }
.pr-th:hover, .feat-head span.feat-th:hover, .sess-th:hover { color: var(--ink); }
/* Header rows of the three artifact/session tables carry the product green
   (.feat-head span above does the same for the features grid). */
#pr-table-wrap th, #sessions th { color: var(--emerald); }
/* Sessions pager — below the table, matching the .btn idiom. */
.pager { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 10px 2px; }
.pager .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; }
.pg-info { font-size: 12px; color: var(--muted); font-family: ui-monospace, Menlo, monospace; }
.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; }
.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 + Insights tables: 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); }
.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; }
.hl-head { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin: 0; padding-bottom: 9px; border-bottom: 1px solid var(--ink); }
/* 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); }

/* 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); }

/* Recommendations tab — a block per item (not a table): the signal, the recommended
   action (↳), a compact stats line, and a "View →" affordance on the right. The whole
   block is clickable → detail drawer (full fix + occurrences, openInsight); a drag-select
   is guarded in JS so the recommendation/title text stays selectable. */
.ins-intro { margin-bottom: 4px; }              /* reuses .hl-head for the bordered orienting header */
.ins-list { display: flex; flex-direction: column; }
.ins-row { padding: 16px 8px; border-bottom: 1px solid var(--line); display: flex; align-items: baseline; gap: 22px; cursor: pointer; }
.ins-row:last-child { border-bottom: 0; }
/* Hover (whole row is the target) + selected (its detail drawer is open): background only. */
.ins-row:hover, .ins-row.on { background: #fbf8f1; }
/* Row hover lights up the View affordance so the whole row reads as clickable. */
.ins-row:hover .ins-row-view { color: var(--emerald); }
.ins-row:hover .ins-row-view i { transform: translateX(3px); }
.ins-row-main { flex: 1; min-width: 0; }
.ins-row-title-wrap { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
/* Serif title matching the Highlights headlines exactly — 17px, normal weight. */
.ins-row-title { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--ink); font-size: 17px; }
.ins-row-repo { flex: 0 0 auto; }
/* The recommended action, beneath the signal — the payload of this tab, so it reads as real
   content (--muted). Hanging ↳ so wrapped lines align under the text. */
.ins-row-rec-line { margin-top: 5px; max-width: 820px; color: var(--muted); font-size: 14px; line-height: 1.45; padding-left: 20px; text-indent: -20px; }
.ins-rec-arrow { color: var(--emerald); margin-right: 8px; }
/* Compact stats footer — occ · sessions · last seen. Faint, monospace to match the app's numerics. */
.ins-row-meta { margin-top: 8px; color: var(--gray); font-size: 12px; font-family: ui-monospace, "SF Mono", Menlo, monospace; }
/* "View →" — the row's explicit affordance (reuses the Highlights tab's .hrow-to link style). */
.ins-row-view { flex: none; }

/* ---- insight detail (rendered into the shared right drawer) ---- */
.ins-detail-head .drawer-head-top h2 { display: flex; align-items: center; gap: 9px; }
.ins-detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--muted); font-size: 12px; margin-top: 8px; }
.ins-detail-body { padding-top: 4px; }
.ins-desc { font-size: 14px; margin: 8px 0 14px; }
.ins-section-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 18px 0 8px; }
.ins-btn { border: 1px solid var(--line); background: var(--paper); border-radius: 6px; padding: 3px 10px; font-size: 12px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.ins-btn:hover { border-color: var(--emerald); color: var(--emerald); }
.ins-fix { border: 1px solid var(--line); background: var(--track); border-radius: 8px; padding: 12px 14px; margin-top: 0; }
.ins-fix-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.ins-fix-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.ins-fix-hint { font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.ins-fix-hint::before { content: "↳ "; color: var(--emerald); }
.ins-fix-prose { font-size: 13px; }
.ins-desc pre.md-code, .ins-fix pre.md-code { margin: 6px 0; padding: 8px 10px; background: var(--track); border-radius: 6px; overflow-x: auto; }
.ins-fix pre.md-code { margin: 0; background: var(--paper); max-height: 420px; overflow-y: auto; }
.ins-desc pre.md-code code, .ins-fix pre.md-code code { background: none; padding: 0; font-size: 11.5px; line-height: 1.45; word-break: normal; }

/* Occurrences: one clickable row per stored event → its transcript turn. */
.ins-occ-list { display: flex; flex-direction: column; gap: 8px; }
/* Cap the evidence list so the Fix section below stays on screen; the occurrence rows
   scroll within this box while the "Evidence (N)" label stays fixed above it. */
.ins-occ-scroll { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; padding-right: 4px; }
.ins-occ { text-align: left; width: 100%; border: 1px solid var(--line); background: var(--paper); border-radius: 8px;
  padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; transition: border-color .12s, background .12s; }
.ins-occ:hover { border-color: var(--emerald); background: var(--track); }
.ins-occ-note { font-size: 13px; line-height: 1.4; }
.ins-occ-src { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.ins-occ-arrow { color: var(--emerald); flex: 0 0 auto; }
.ins-occ-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ins-occ-turn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 11px; background: var(--track); border-radius: 4px; padding: 0 5px; }
.ins-occ:hover .ins-occ-turn { background: var(--paper); }
.ins-detail-actions { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--line); }
.ins-detail-actions .ins-dismiss:hover { border-color: var(--red); color: var(--red); }

/* "← Insights" back link in the transcript drawer header (opened from an occurrence). */
.drawer-back { flex: none; border: 1px solid var(--line); background: var(--paper); border-radius: 8px;
  padding: 4px 10px; cursor: pointer; color: var(--muted); font-size: 12px; margin-right: 4px; }
.drawer-back:hover { border-color: var(--emerald); color: var(--emerald); }

/* ---- Skill Health tab (all classes sk-prefixed; see skills.ts) ------------- */
.sk-empty { color: var(--muted); font-size: 14px; padding: 24px 0; max-width: 620px; line-height: 1.5; }

/* Stat tiles — used only on the per-skill detail page (roster has no tiles). */
.sk-tile { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; }
.sk-tile-v { font-size: 26px; font-family: ui-monospace, Menlo, monospace; color: var(--ink); line-height: 1; }
.sk-tile-l { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-top: 8px; }
.sk-tile-s { font-size: 11px; color: var(--gray); margin-top: 2px; }

/* Filter toolbar reuses the Sessions .filters / .flt-* / .seg tokens verbatim; the
   status <select> just needs the shared filter-select styling (matched by .filters select). */

/* Overview strip — inventory totals under the heading, each a one-click status filter.
   Divider between stats (not boxed), so it reads as a summary line, not another toolbar. */
.sk-overview { display: flex; flex-wrap: wrap; gap: 0; margin: 2px 0 16px; }
.sk-stat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; cursor: pointer;
  border: 0; background: transparent; font: inherit; text-align: left;
  padding: 4px 20px; border-left: 1px solid var(--line); }
.sk-stat:first-child { padding-left: 0; border-left: 0; }
.sk-stat-v { font-family: ui-monospace, Menlo, monospace; font-size: 22px; color: var(--muted); line-height: 1.1; }
.sk-stat-l { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.sk-stat:hover .sk-stat-v { color: var(--ink); }
.sk-stat.on .sk-stat-v { color: var(--emerald); }
.sk-stat.on .sk-stat-l { color: var(--ink); }

/* Roster lives inside the .sk-panel, so rows are hairline-separated (not standalone
   cards) — matches the list treatment on Sessions/Recommendations/Artifacts. */
.sk-roster { display: flex; flex-direction: column; margin-top: 4px; border-top: 1px solid var(--line); }
.sk-row { border-bottom: 1px solid var(--line); }
.sk-row-head { display: flex; align-items: center; gap: 14px; padding: 13px 4px; cursor: pointer; }
.sk-row-head:hover { background: #fbf8f1; }
.sk-dot { flex: none; width: 9px; height: 9px; border-radius: 999px; }
.sk-name { flex: none; font-weight: 600; font-size: 14px; color: var(--ink); font-family: ui-monospace, Menlo, monospace; }
.sk-flags { flex: 1 1 auto; display: flex; align-items: center; gap: 6px; }
.sk-flag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; border: 1px solid; border-radius: 999px; padding: 1px 8px; white-space: nowrap; }
.sk-flag-lg { font-size: 11px; padding: 2px 10px; }
.sk-verdict { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; min-width: 96px; }
.sk-spark { flex: none; display: inline-flex; align-items: flex-end; }
.sk-spark-svg { display: block; }
.sk-metric { flex: none; display: flex; flex-direction: column; align-items: flex-end; min-width: 58px; }
.sk-mv { font-family: ui-monospace, Menlo, monospace; font-size: 14px; color: var(--ink); }
.sk-ml { font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sk-caret { flex: none; color: var(--muted); width: 14px; text-align: center; font-size: 18px; }

/* ---- Per-skill detail page ---- */
.sk-page-head { margin: 4px 0 14px; }
.sk-back { border: 1px solid var(--line); background: var(--paper); color: var(--muted); border-radius: 8px;
  padding: 5px 12px; font-family: Georgia, serif; font-size: 13px; cursor: pointer; }
.sk-back:hover { border-color: var(--emerald); color: var(--emerald); }
.sk-page-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.sk-dot-lg { width: 12px; height: 12px; }
.sk-page-name { margin: 0; font-size: 24px; font-family: ui-monospace, Menlo, monospace; color: var(--ink); word-break: break-all; }
.sk-verdict-lg { min-width: 0; font-size: 12px; }
.sk-page-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin: 18px 0 8px; }
/* Each detail section is its own bordered paper card (shares the .panel idiom used on
   other tabs), so the page reads as discrete, labelled sections rather than one scroll. */
.sk-card { background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; margin-top: 16px; }
.sk-card:first-of-type { margin-top: 22px; }
.sk-sect-h { font-family: Georgia, serif; font-size: 16px; color: var(--ink); margin-bottom: 10px; }
.sk-info { display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 999px; border: 1px solid var(--muted); color: var(--muted); font-family: ui-sans-serif, system-ui, sans-serif; font-size: 10px; font-weight: 600; cursor: default; vertical-align: middle; }
.sk-sect-note { color: var(--muted); font-size: 12px; line-height: 1.5; margin-top: 8px; }
.sk-sect-note-block { max-width: 820px; }
.sk-sect-note-block b { color: var(--ink); font-weight: 600; }

/* Usage-trend bar chart. Sits inside a .sk-card, so it draws no border/background of
   its own (the card provides both) — just the plotting area. */
.sk-trend { position: relative; max-width: 900px; }
.sk-trend-ax { font-family: ui-monospace, Menlo, monospace; font-size: 11px; fill: var(--muted); }
.sk-trend-hit { cursor: default; }
/* Bars sit above the hit zones in the SVG; let pointer events fall through to the
   full-height hit zone so hovering anywhere in a bucket column shows its tooltip. */
.sk-trend-bar { pointer-events: none; transition: opacity .1s; }
.sk-trend-hit:hover + .sk-trend-bar { opacity: .78; }
/* Floating tooltip (positioned in JS at the cursor). */
.sk-trend-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--ink); color: #f3efe6;
  font-size: 12px; line-height: 1.4; padding: 6px 9px; border-radius: 6px; box-shadow: 0 4px 14px rgba(0,0,0,.25); white-space: nowrap; }
.sk-trend-tip b { font-weight: 600; }

/* Invocations list — clickable rows that deep-link into the session transcript. */
.sk-invocations { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 900px; }
.sk-inv { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 9px 12px; font: inherit; }
.sk-inv:hover { border-color: var(--emerald); background: #faf8f2; }
.sk-inv-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); font-size: 13.5px; }
.sk-inv-tags { flex: none; display: flex; gap: 5px; }
.sk-inv-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; border-radius: 999px; padding: 1px 7px; }
.sk-inv-err { color: var(--red); border: 1px solid var(--red); }
.sk-inv-sub { color: var(--muted); border: 1px solid var(--line); }
.sk-inv-repo { flex: none; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-inv-date { flex: none; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--gray); }
.sk-inv-go { flex: none; font-size: 11px; color: var(--emerald); white-space: nowrap; }

.sk-repos { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; max-width: 720px; }
.sk-repo { display: grid; grid-template-columns: 160px 1fr auto; align-items: center; gap: 12px; }
.sk-repo-name { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-repo-null .sk-repo-name { color: var(--gray); font-style: italic; }
.sk-repo-track { height: 10px; background: var(--track); border-radius: 999px; overflow: hidden; }
.sk-repo-bar { height: 100%; border-radius: 999px; min-width: 2px; }
.sk-repo-n { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); white-space: nowrap; text-align: right; }

/* Version drift (the hero) — location chooser + "around the last edit" callout + timeline. */
.sk-drift-loc-row { display: inline-flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
/* Match the shared filter-select styling (this select lives outside .filters, so it
   wouldn't inherit it otherwise) — bordered, rounded, paper-filled, not a raw native box. */
.sk-drift-loc-row select { border: 1px solid var(--line); border-radius: 8px; padding: 5px 9px;
  font-size: 12.5px; background: var(--paper); color: var(--ink); }
.sk-drift-loc-row select:hover { border-color: #d4cdbd; }
/* "Around the last edit" callout — sits inside the Version drift card, so it uses a
   subtle track tint (not another bordered box) to read as a nested sub-section. */
.sk-drift-delta { border-radius: 10px; padding: 14px 16px; margin-top: 10px; max-width: 720px; background: var(--track); }
.sk-drift-delta-h { font-size: 13px; color: var(--ink); font-weight: 600; margin-bottom: 12px; }
.sk-drift-cmp { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-bottom: 4px; margin-top: 14px; }
.sk-drift-metric-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sk-drift-metric-v { font-family: ui-monospace, Menlo, monospace; font-size: 18px; color: var(--ink); margin-top: 4px; }
.sk-drift-arrow { color: var(--gray); }
.sk-drift-metric-v .sk-drift-worse { color: var(--red); }
.sk-drift-metric-v .sk-drift-better { color: var(--emerald); }
.sk-drift-arrow.sk-drift-worse { color: var(--red); }
.sk-drift-arrow.sk-drift-better { color: var(--emerald); }

/* "What changed" — description before/after + inline body diff (reusing the Sessions
   file-changes diff view: .fc-diff / .dl for full-width highlight + horizontal scroll). */
.sk-diff-add { color: var(--emerald); font-weight: 600; }
.sk-diff-del { color: var(--red); font-weight: 600; }
.sk-diff-sum { font-size: 12px; color: var(--muted); font-weight: 400; }
.sk-chg-block { margin: 12px 0; }
.sk-chg-block + .sk-chg-block { margin-top: 14px; }
.sk-chg-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin-bottom: 6px; display: flex; align-items: baseline; gap: 8px; }
.sk-chg-lbl .sk-diff-sum { text-transform: none; letter-spacing: 0; }
/* Drift body diff reuses the Sessions .fc-diff/.dl markup, but a SKILL.md is prose — we WRAP
   long lines instead of horizontal scroll, so the add/del highlight covers the whole line. */
.sk-chg-block .fc-diff { max-height: 360px; overflow-y: auto; overflow-x: hidden; background: var(--paper); }
.sk-chg-block .fc-diff .dl { white-space: pre-wrap; overflow-wrap: anywhere; }
.sk-chg-block .fc-diff .dl .dt { min-width: 0; }

.sk-vers { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; max-width: 720px; }
.sk-ver { display: grid; grid-template-columns: 68px 1fr 70px; align-items: center; gap: 12px;
  border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; }
.sk-ver-cur { border-color: var(--emerald); background: #faf8f2; }
.sk-ver-tag { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.sk-ver-cur .sk-ver-tag { color: var(--emerald); }
.sk-ver-main { min-width: 0; }
.sk-ver-span { font-family: ui-monospace, Menlo, monospace; font-size: 11.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sk-ver-chg { font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sk-chg-desc { color: var(--amber); }
.sk-ver-stats { font-size: 12px; color: var(--muted); margin-top: 3px; }
.sk-ver-hash { font-size: 11px; color: var(--gray); text-align: right; }

/* Activation outcomes — "pulls its weight" headline, then a stacked bar + evidence.
   No filled box: a status-coloured dot leads a bold verdict + plain description line. */
.sk-weight { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; max-width: 760px; }
.sk-weight-v { font-size: 14px; font-weight: 600; color: var(--ink); position: relative; padding-left: 16px; }
.sk-weight-v::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 9px; height: 9px; border-radius: 999px; background: var(--muted); }
.sk-weight-d { font-size: 13px; color: var(--muted); }
.sk-w-ok .sk-weight-v::before { background: var(--emerald); }
.sk-w-warn .sk-weight-v::before { background: var(--amber); }
.sk-w-bad .sk-weight-v::before { background: var(--red); }
.sk-oc-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--track); margin-top: 14px; max-width: 720px; }
.sk-oc-seg { display: block; height: 100%; }
.sk-oc-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
.sk-oc-leg { font-size: 12px; color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.sk-oc-dot { width: 9px; height: 9px; border-radius: 999px; display: inline-block; }
.sk-oc-legn { color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 11px; }
.sk-oc-corr { margin-top: 12px; font-size: 12.5px; color: var(--red); }
.sk-oc-examples { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; max-width: 820px; }
/* One evidence row per judged firing: a coloured outcome tag + the full sentence,
   wrapping cleanly. No filled box — the tag colour alone carries the outcome. Rows whose
   verdict carries a location render as buttons that open the transcript at that call. */
.sk-oc-ex { display: flex; gap: 14px; align-items: flex-start; font: inherit; font-size: 13.5px;
  line-height: 1.55; border: 0; background: transparent; padding: 0; text-align: left; width: 100%; }
.sk-oc-ex-tag { flex: none; width: 72px; font-size: 10px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; padding-top: 2px; }
.sk-oc-ex-txt { color: var(--muted); }
.sk-oc-ex-go { flex: none; font-size: 11px; color: var(--emerald); white-space: nowrap; padding-top: 2px;
  visibility: hidden; }
button.sk-oc-ex { cursor: pointer; }
button.sk-oc-ex:hover .sk-oc-ex-txt { color: var(--ink); }
button.sk-oc-ex:hover .sk-oc-ex-go { visibility: visible; }
/* Collapsed overflow evidence (beyond the top 3) + its reveal toggle. */
.sk-oc-rest { display: none; flex-direction: column; gap: 8px; }
.sk-oc-rest.on { display: flex; }
.sk-oc-more { align-self: flex-start; border: 0; background: transparent; color: var(--emerald); font-size: 12.5px; cursor: pointer; padding: 2px 0; }
.sk-oc-more:hover { text-decoration: underline; }

/* Co-occurrence list — other skills sharing sessions. */
#sk-cooc { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; max-width: 720px; }
.sk-cooc { display: grid; grid-template-columns: 180px 1fr auto auto auto; align-items: center; gap: 12px; width: 100%;
  text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--paper); border-radius: 8px; padding: 8px 12px; font: inherit; }
.sk-cooc:hover { border-color: var(--emerald); background: #faf8f2; }
.sk-cooc-name { font-size: 12.5px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sk-cooc-track { height: 8px; background: var(--track); border-radius: 999px; overflow: hidden; }
.sk-cooc-bar { display: block; height: 100%; background: var(--emerald); border-radius: 999px; min-width: 2px; }
.sk-cooc-meta { font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--muted); white-space: nowrap; }
.sk-cooc-first { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--amber); border: 1px solid var(--amber); border-radius: 999px; padding: 1px 7px; }
.sk-cooc-go { font-size: 11px; color: var(--emerald); white-space: nowrap; }

.sk-desc { font-size: 14px; line-height: 1.6; color: var(--ink); margin: 4px 0 6px; max-width: 820px; }
.sk-desc-none { color: var(--gray); font-style: italic; font-size: 13px; }
.sk-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.sk-fact-l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.sk-fact-v { font-size: 14px; color: var(--ink); margin-top: 3px; }
.sk-tag { display: inline-block; font-size: 9px; background: var(--track); color: var(--muted); border-radius: 4px;
  padding: 1px 5px; letter-spacing: .04em; vertical-align: middle; }
/* One-line takeaway under the tiles. A thin status-coloured rule (colour set inline),
   no filled box — the sentence carries the weight, not a highlight. */
.sk-advice { font-size: 13.5px; line-height: 1.5; color: var(--ink);
  border-left: 3px solid var(--line); padding: 2px 0 2px 14px; margin: 16px 0 4px; max-width: 820px; }
.sk-actions { margin-top: 18px; }
.sk-view-sessions { font-size: 14px; color: var(--emerald); cursor: pointer; text-decoration: none; }
.sk-view-sessions:hover { text-decoration: underline; }

/* Bulk-tag popover (filter bar) + user-field editors (drawer summary). */
.tag-menu { min-width: 250px; }
.tag-row { display: flex; align-items: center; gap: 6px; padding: 4px; }
.tag-row[hidden] { display: none; } /* the flex rule would otherwise defeat `hidden` */
.tag-row select, .tag-row input { flex: 1; min-width: 0; border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 5px 8px; font-size: 13px; }
.tag-msg { padding: 2px 6px; font-size: 12px; color: var(--muted); min-height: 16px; }
.tag-del { border: 0; background: none; color: #a04b3c; font-size: 12px; cursor: pointer; padding: 2px 4px; text-align: left; }
.tag-del:hover { text-decoration: underline; }
.tag-edit, .tag-edit-new { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 2px 6px; font-size: 12px; max-width: 220px; }
.tag-addf { margin: -8px 0 14px; }
.tag-addf-btn { border: 1px solid var(--line); background: var(--paper); color: var(--emerald); border-radius: 4px; font-size: 12px; cursor: pointer; padding: 2px 8px; }
.tag-addf-btn:hover { background: #dfe9e0; }
.tag-addf input { border: 1px solid var(--line); background: var(--paper); color: var(--ink); border-radius: 6px; padding: 3px 8px; font-size: 12px; width: 130px; margin-right: 6px; }

/* ---- Tools tab (MCP / built-in tool health) --------------------------------
   Layout and typography come from the shared health tokens (.sk-*, see
   client/health-ui.ts); only the chrome that is unique to this tab lives here. */

/* The roster switch — see kindSeg(). It borrows .seg-primary wholesale from the
   Artifacts tab's section scoper because it does the same job, and a filled pill
   shares no shape with the top nav's underlined tabs: the underline can keep
   meaning "which page" while this means "which half of this page". Counts stay in
   the stat strip below, since the label and its first stat name the same thing. */
.th-kinds { margin-bottom: 20px; }

/* An error stat in the summary strip reads in its own colour once non-zero, so a
   problem is visible before you read the label. */
.th-stat-hero .sk-stat-v { color: var(--red); }
.th-stat-hero.on .sk-stat-v { color: var(--red); }

/* Built-in rows have no status dot (nothing to install or remove); the slot is
   held so every row's name column starts at the same x. */
.th-dot-none { background: transparent; }

/* "shell" / "repo script" chips — what KIND of row this is, distinct from a flag. */
.th-kind-chip {
  flex: none; font-size: 10.5px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: var(--track); border-radius: 999px; padding: 2px 8px;
}

/* An error figure that earned the high-error pill. */
.th-metric-bad .sk-mv, span.th-metric-bad { color: var(--red); }

.th-overall-card { margin-bottom: 18px; }

/* The tool scope control — see toolChips(). Sits above the stats it scopes, so the
   filled chip and the numbers it produced are read in one glance. It is also the
   only per-tool read-out on the page: the table that repeated it was redundant once
   the chips carried calls and errors, so it was removed. */
.th-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 16px 0 4px; }
.th-chip {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: 4px 11px; cursor: pointer;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted);
}
.th-chip:hover { color: var(--ink); border-color: var(--muted); }
.th-chip.on { background: var(--emerald); border-color: var(--emerald); color: #f3efe6; }
.th-chip-all { font-family: inherit; }
.th-chip-n { font-size: 11px; opacity: .7; }
/* The word "err" carries the meaning, so the colour is reinforcement rather than
   the only signal — which is what lets it stay legible on the emerald active fill. */
.th-chip-e { font-size: 11px; font-weight: 600; color: var(--red); }
.th-chip.on .th-chip-e { color: #ffe9e4; }
/* Carries the caveat the removed table's section heading used to hold. */
.th-chips-info { margin-left: 2px; }

/* Says the page is narrowed, next to the numbers that are narrowed. */
.th-scoped {
  margin: 14px 0 -4px; padding: 8px 12px; border-left: 3px solid var(--emerald);
  background: var(--paper); font-size: 13px; color: var(--ink);
}

/* The command / tool name on a call row in the invocations list. */
.th-inv-what {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted);
}

/* The semantics note under the built-in roster: why the rows don't sum. */
.th-roster-note {
  margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line);
  font-size: 12.5px; line-height: 1.55; color: var(--muted); max-width: 780px;
}
.th-roster-note code { font-size: 11.5px; background: var(--track); border-radius: 4px; padding: 1px 5px; }

/* The rolled-up shell long tail — a count, not an entity, so it reads quieter
   than a real row and its caret is a "+" rather than a chevron. */
.th-rollup-name { color: var(--muted) !important; font-weight: 500 !important; font-style: italic; }
.th-rollup .sk-caret { color: var(--muted); }
.th-rollup-back { padding: 10px 4px; font-size: 12.5px; }
.th-rollup-back a { cursor: pointer; }

/* A failure that came from a command running several binaries. */
.th-compound { color: var(--muted); border-color: var(--line); margin-left: 6px; }
.occ-cmd .th-compound { font-size: 10px; margin: 0 6px 0 0; vertical-align: baseline; }

/* The LLM "Suggested fix" card on a tool's page. */
.th-fix-diag { font-size: 13.5px; line-height: 1.6; color: var(--ink); margin: 4px 0 12px; max-width: 760px; }
.th-fix-snip { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper); }
.th-fix-snip-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 10px; border-bottom: 1px solid var(--line); background: var(--track);
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted);
}
.th-fix-pre {
  margin: 0; padding: 12px; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  line-height: 1.55; white-space: pre-wrap; word-break: break-word; color: var(--ink);
}

/* Grouped calls list on a tool's page. Capped so a busy tool can't push the rest
   of the page (details, install info) off the bottom of a long scroll. */
.th-calls { max-height: 420px; overflow-y: auto; margin-top: 6px; border-top: 1px solid var(--line); }
.th-grp { border-bottom: 1px solid var(--line); }
.th-grp-head {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: none; border: 0; padding: 9px 6px; cursor: pointer; font: inherit; font-size: 13px;
}
.th-grp-head:hover { background: var(--track); }
.th-grp-caret { flex: none; width: 10px; color: var(--muted); transition: transform .12s ease; }
.th-grp-head.open .th-grp-caret { transform: rotate(90deg); color: var(--emerald); }
.th-grp-head.open .th-grp-title { color: var(--emerald); }
.th-grp-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.th-grp-n { flex: none; color: var(--muted); font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
.th-grp-errs {
  flex: none; color: var(--red); font-size: 11px; border: 1px solid var(--red);
  border-radius: 999px; padding: 1px 8px; white-space: nowrap;
}
/* The expanded calls sit indented under their session, like the error accordion.
   Capped and scrollable in its own right: one busy session can hold hundreds of
   calls (246 for `echo` on a real store, ~7k px unbounded), which would fill the
   outer list entirely and bury every other session. `overscroll-behavior` keeps
   the inner scroll from chaining out to the page once it bottoms out. */
.th-grp-items {
  padding: 2px 0 8px 22px; border-left: 2px solid var(--line); margin-left: 10px;
  max-height: 240px; overflow-y: auto; overscroll-behavior: contain;
}
.th-grp-more { padding-left: 4px; }