tuneloop 0.1.0

package/dist/client/styles.css

@@ -0,0 +1,698 @@
+: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; }
+/* 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; }
+.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: flex-start; 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); padding-top: 1px; }
+.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 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); }