/* Tokens and contrast: docs/design/UI_DESIGN_BRIEF_2026-09-26.md section 5. ui.tests checks the pairs. */
:root {
  color-scheme: light dark;
  --bg: #f7f7f5;
  --surface: #ffffff;
  --ink: #1b1d21;
  --muted: #565c66;
  --line: #7d838c;
  --hair: #dcdfe3;
  --accent: #1d5bb8;
  --sel: #e8f0fc;
  --error: #a3261b;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --surface: #1a1d21;
    --ink: #e6e8eb;
    --muted: #a3a9b3;
    --line: #6b727c;
    --hair: #30353c;
    --accent: #86b4ff;
    --sel: #1d2a3d;
    --error: #ff8f80;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.35 var(--sans);
}

h1 { font-size: 22px; font-weight: 600; margin: 0 0 8px; }
h2 { font-size: 18px; font-weight: 600; margin: 32px 0 12px; }
p { font-size: 16px; line-height: 1.5; max-width: 70ch; margin: 0 0 16px; }

a { color: var(--accent); text-underline-offset: 2px; }
::selection { background: var(--sel); color: var(--ink); }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
:target { outline: 2px solid var(--accent); outline-offset: 2px; background: var(--sel); }

code, .id { font-family: var(--mono); font-size: 13px; overflow-wrap: anywhere; }

.skip { position: absolute; left: 8px; top: -64px; padding: 8px 12px; background: var(--surface); }
.skip:focus { top: 8px; }

.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 24px;
  padding: 8px 24px;
  background: var(--surface);
  border-bottom: 1px solid var(--hair);
}
.bar .name { color: var(--ink); font-weight: 600; text-decoration: none; }
.bar nav { display: flex; gap: 16px; }
.bar nav a { display: inline-flex; align-items: center; min-height: 32px; }
.bar nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
.account { display: flex; align-items: center; gap: 12px; margin-left: auto; color: var(--muted); }
.account form { margin: 0; }

main { max-width: 1280px; margin: 0 auto; padding: 24px; }
.basis { max-width: 1280px; margin: 0 auto; padding: 16px 24px 32px; color: var(--muted); font-size: 12px; }

button {
  min-height: 32px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}
button.primary { border-color: var(--accent); background: var(--accent); color: var(--bg); font-weight: 600; }

input {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 16px var(--sans);
}

.signin { max-width: 22rem; margin: 10vh auto 0; }
.signin form { display: grid; gap: 8px; }
.signin label { margin-top: 8px; font-weight: 600; }
.signin button { min-height: 44px; margin-top: 16px; }
.error { color: var(--error); font-size: 14px; }

.muted { color: var(--muted); }

/* {% metric %}: the value or the reason on line 1, n and version on line 2. */
.metric { display: inline-flex; flex-direction: column; font-variant-numeric: tabular-nums; }
.metric-meta { color: var(--muted); font-size: 12px; }
.metric-unavailable, .metric-unavailable a, .metric-none { color: var(--muted); }

dl.record { display: grid; grid-template-columns: minmax(10rem, max-content) 1fr; gap: 8px 24px; margin: 0; }
dl.record dt { color: var(--muted); }
dl.record dd { margin: 0; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }

/* A wide table scrolls in its own box, so the page never scrolls sideways. */
.table-box { overflow-x: auto; background: var(--surface); border: 1px solid var(--hair); border-radius: 4px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 12px; border-bottom: 1px solid var(--hair); text-align: left; vertical-align: top; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
thead th { position: sticky; top: 0; background: var(--surface); font-weight: 600; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }

/* htmx adds no style of its own (includeIndicatorStyles is false), so the indicator rules live here. */
.htmx-indicator { opacity: 0; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .htmx-indicator { transition: opacity 150ms ease-out; }
}

@media (max-width: 40rem) {
  .bar { padding: 8px 16px; }
  .bar nav a { min-height: 44px; }
  main { padding: 16px; }
  .basis { padding: 16px; }
  dl.record { grid-template-columns: 1fr; gap: 2px; }
  dl.record dd { margin-bottom: 8px; }
}

/* Ask (brief 4.5): composer, starters, history, and the answer with its evidence rail. */
.ask-composer { display: grid; gap: 8px; max-width: 48rem; margin: 16px 0; }
.ask-composer label { font-weight: 600; }
.ask-composer textarea {
  width: 100%;
  min-height: 88px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 16px/1.5 var(--sans);
  resize: vertical;
}
.ask-composer .error { margin: 0; }
.ask-send { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.ask-send button { min-height: 40px; padding: 8px 20px; }
.ask-send p { margin: 0; color: var(--muted); font-size: 14px; font-variant-numeric: tabular-nums; }
.ask-composer button:disabled, .ask-starters button:disabled, .ask-composer textarea:disabled { cursor: not-allowed; opacity: .6; }
.ask-starters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.ask-starters button { min-height: 40px; text-align: left; }
.ask-history td.wrap { min-width: 16rem; max-width: 40rem; white-space: normal; }

.ask-turn { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
.ask-head h1 { max-width: 40ch; overflow-wrap: anywhere; }
.ask-stage { margin: 8px 0 4px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.ask-interp p, .ask-answer p { max-width: 70ch; }
.ask-claims { max-width: 70ch; margin: 0 0 16px; padding-left: 24px; }
.ask-claims li { margin-bottom: 8px; font-size: 16px; line-height: 1.5; }
a.cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0 4px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  font-variant-numeric: tabular-nums;
  vertical-align: 2px;
}
/* The interpretation is model text, so it sits in its own dashed box, apart from the evidence. */
.ask-generated { margin-top: 24px; padding: 4px 16px; border: 1px dashed var(--line); border-radius: 4px; }
.ask-generated h2 { margin-top: 12px; font-size: 16px; }
.ask-rail h2 { margin-top: 24px; font-size: 16px; }
.ask-cards { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.ask-card { padding: 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 4px; scroll-margin-top: 16px; }
.ask-card p { margin: 0 0 4px; font-size: 14px; line-height: 1.4; }
.ask-card-type { font-weight: 600; font-variant-numeric: tabular-nums; }
.ask-card-metrics { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0; }
.ask-card-metrics dt { color: var(--muted); font-size: 12px; }
.ask-card-metrics dd { margin: 0; }
.ask-excerpt { overflow-wrap: anywhere; }
.ask-excerpt .meta { display: block; font-size: 12px; }
.ask-links { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.ask-links a { display: inline-flex; align-items: center; min-height: 24px; }
.ask-method { margin-top: 24px; }
.ask-method > summary { font-weight: 600; }
li[id^="claim-"] { scroll-margin-top: 16px; }

/* From 1024 px the evidence rail sits at the right and stays in view; below, it follows the answer. */
@media (min-width: 64rem) {
  .ask-turn:has(> .ask-rail) { grid-template-columns: minmax(0, 62fr) minmax(0, 38fr); grid-template-rows: repeat(5, auto) 1fr; }
  .ask-turn > * { grid-column: 1; }
  .ask-turn > .ask-rail { position: sticky; top: 8px; grid-column: 2; grid-row: 1 / -1; max-height: calc(100vh - 16px); overflow-y: auto; }
  .ask-rail h2 { margin-top: 0; }
}

@media (max-width: 40rem) {
  .ask-send button, .ask-starters button { min-height: 44px; }
  .ask-starters button { width: 100%; }
}

/* Reel detail and the atom and match provenance pages (brief section 4.2). */
h3 { font-size: 16px; font-weight: 600; margin: 24px 0 8px; }
p.meta, span.meta { color: var(--muted); font-size: 13px; line-height: 1.35; }
p.meta { margin: 0 0 8px; }
p.meta time { white-space: nowrap; }
.back { font-size: 14px; margin: 0 0 8px; }
.reel-head { margin-bottom: 24px; }
.anchors { display: flex; flex-wrap: wrap; gap: 0 16px; }
.anchors a { display: inline-flex; align-items: center; min-height: 32px; }
.caption h2, .frames h2 { color: var(--muted); font-size: 14px; margin: 0 0 4px; }
/* Opening frames at 9:16; more frames than fit scroll inside the strip, not the page. The padding
   keeps the :target outline inside the scroll box. */
.filmstrip { display: flex; gap: 8px; overflow-x: auto; margin: -4px -4px 12px; padding: 4px; }
.filmstrip figure { flex: none; margin: 0; }
.filmstrip img { display: block; object-fit: cover; border-radius: 4px; background: var(--hair); }
.filmstrip figcaption { margin-top: 2px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.caption p { white-space: pre-line; }
section[id], details[id], tr[id], figure[id] { scroll-margin-top: 16px; }
/* The section links only move the page; the jump target of an item stays outlined. */
section:target, details:target { outline: 0; background: none; }

.perf { display: grid; gap: 24px; align-items: start; }
dl.metrics { display: grid; grid-template-columns: max-content 1fr; gap: 12px 24px; margin: 0; }
dl.metrics dt { color: var(--muted); }
dl.metrics dd { margin: 0; }
.trajectory { margin: 0; }
.trajectory h3 { margin: 0 0 2px; }
.trajectory figcaption { color: var(--muted); font-size: 13px; max-width: 70ch; margin-top: 8px; }
/* The chart keeps its text size and scrolls in its own box on a phone. */
.chart-box { overflow-x: auto; }
.chart-box svg { display: block; width: 100%; min-width: 560px; height: auto; }
.axis { stroke: var(--line); stroke-width: 1; }
.tick, .peer-label { fill: var(--muted); font: 12px var(--sans); font-variant-numeric: tabular-nums; }
.series { fill: none; stroke: var(--accent); stroke-width: 2; }
.dot { fill: var(--accent); stroke: var(--bg); stroke-width: 2; }
.peer { fill: none; stroke: var(--muted); stroke-width: 1.5; stroke-dasharray: 6 4; }
.peer-dot { fill: var(--bg); stroke: var(--muted); stroke-width: 1.5; }

details > summary { cursor: pointer; padding: 6px 0; }
details.snapshots { margin-top: 16px; }
details.sources { margin-top: 32px; }
details.sources > summary h2 { display: inline; margin: 0; }
details.raw pre { overflow-x: auto; max-height: 32rem; margin: 8px 0 0; padding: 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 4px; font: 13px/1.4 var(--mono); }

table.stack { background: var(--surface); border: 1px solid var(--hair); }
table.stack td { white-space: normal; }
table.atoms td:nth-child(2) { min-width: 14rem; }
tr.hit td { background: var(--sel); }
.tag { font-size: 12px; font-weight: 600; }
.notice { font-size: 14px; }
.matches { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.matches li { display: grid; gap: 2px; }

@media (min-width: 64rem) {
  .perf { grid-template-columns: minmax(18rem, 1fr) 2fr; }
}

/* A phone shows each table row as a block of label and value pairs. */
@media (max-width: 40rem) {
  table.stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  table.stack, table.stack tbody, table.stack tr, table.stack td { display: block; }
  table.stack tr { padding: 8px 12px; border-bottom: 1px solid var(--hair); }
  table.stack td { position: relative; padding: 2px 0 2px 8rem; border: 0; text-align: left; }
  table.stack td::before { content: attr(data-label); position: absolute; left: 0; width: 7.5rem; color: var(--muted); }
  dl.metrics { grid-template-columns: 1fr; gap: 2px; }
  dl.metrics dd { margin-bottom: 10px; }
}

/* Creative Explorer: context row, facet rail and results (brief 4.4). */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.cohort { font-weight: 600; margin: 0 0 4px; }
.meta { color: var(--muted); font-size: 13px; margin: 0 0 4px; }
.explore form { margin-top: 16px; }

.context { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; padding-bottom: 12px; border-bottom: 1px solid var(--hair); }
.context fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.context > .field, .context > button { align-self: flex-end; }
.context legend { padding: 0; margin-bottom: 4px; font-weight: 600; }
.buckets { display: flex; flex-wrap: wrap; gap: 4px; }
.buckets label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); white-space: nowrap; cursor: pointer; }
.buckets label:has(:checked) { border-color: var(--accent); background: var(--sel); }
.dates { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.dates label, .field { display: inline-flex; align-items: center; gap: 8px; }
.field { font-weight: 600; }
.explore input[type="radio"], .explore input[type="checkbox"] { display: inline-block; width: auto; min-height: 0; margin: 0; accent-color: var(--accent); }
.explore input[type="date"], .explore input[type="text"], .explore select { display: inline-block; width: auto; min-height: 32px; padding: 4px 8px; font-weight: 400; }
.explore input:disabled { color: var(--muted); }
select { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font: 16px var(--sans); }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; max-width: none; margin: 12px 0 0; font-size: 14px; }
.chip { display: inline-flex; align-items: center; gap: 2px; padding-left: 8px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); }
.chip a { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; min-height: 28px; font-size: 16px; text-decoration: none; }

.explore-body { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 24px; align-items: start; margin-top: 16px; }
.rail { position: sticky; top: 8px; max-height: calc(100vh - 16px); overflow-y: auto; padding: 4px 12px 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 4px; }
.rail summary { cursor: pointer; }
.rail > summary { padding: 8px 0; font-weight: 600; }
.group { border-top: 1px solid var(--hair); }
.group > summary { padding: 8px 0; font-weight: 600; }
.facet { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 2px 8px; padding: 3px 0; }
.facet label { overflow-wrap: anywhere; cursor: pointer; }
.facet meter { grid-column: 2 / 4; }
.n { color: var(--muted); font-variant-numeric: tabular-nums; }
.facet-zero label { color: var(--muted); }
.facet-fold > summary { padding: 4px 0; color: var(--muted); font-size: 13px; }
.facet-none { display: flex; justify-content: space-between; max-width: none; margin: 4px 0 8px; color: var(--muted); font-size: 13px; }
.rail > .meta { margin-top: 12px; }

/* Share bars: the accent on a hairline track. Width and value come from the meter itself. */
meter { display: block; width: 100%; height: 4px; border: 0; border-radius: 2px; background: var(--hair); -webkit-appearance: none; appearance: none; }
meter::-webkit-meter-bar { height: 4px; border: 0; border-radius: 2px; background: var(--hair); }
meter::-webkit-meter-optimum-value { border-radius: 2px; background: var(--accent); }
meter::-moz-meter-bar { border-radius: 2px; background: var(--accent); }
.share { display: inline-grid; grid-template-columns: 120px auto; align-items: center; gap: 8px; font-variant-numeric: tabular-nums; }

.results { min-width: 0; }
nav.views { display: flex; gap: 16px; margin-bottom: 4px; border-bottom: 1px solid var(--hair); }
nav.views a { display: inline-flex; align-items: center; min-height: 32px; border-bottom: 2px solid transparent; text-decoration: none; }
nav.views a[aria-current="page"] { border-bottom-color: var(--accent); color: var(--ink); font-weight: 600; }
.status { min-height: 18px; margin: 0 0 4px; color: var(--muted); font-size: 13px; }
/* Hidden, not only transparent, so screen readers hear "Updating…" only during a request. */
.status .htmx-indicator { visibility: hidden; }
.htmx-request .status .htmx-indicator { visibility: visible; }
.removals { margin: 0 0 16px; padding-left: 20px; font-size: 16px; line-height: 1.5; }
.results > .field { margin-bottom: 12px; }

caption { padding: 8px 12px; caption-side: top; color: var(--muted); font-size: 13px; text-align: left; }
.reels td { vertical-align: middle; }
.reel-cell { display: flex; align-items: center; gap: 12px; }
.line { max-width: 26ch; margin: 0; overflow: hidden; font-size: 14px; text-overflow: ellipsis; }
.labels { width: 30%; min-width: 200px; white-space: normal; }
.labels .muted { white-space: nowrap; }
.label { display: inline-block; margin: 0 4px 4px 0; padding: 1px 6px; border: 1px solid var(--hair); border-radius: 4px; color: var(--muted); font-size: 12px; }
.label-matched { border-color: var(--accent); background: var(--sel); color: var(--ink); }
a.more { display: inline-flex; align-items: center; min-height: 32px; }

/* Loading: the rail and the results dim together while htmx swaps them (brief C9). */
form.htmx-request .rail, form.htmx-request .results { opacity: 0.5; }

@media (prefers-reduced-motion: no-preference) {
  .rail, .results { transition: opacity 150ms ease-out; }
}

@media (max-width: 64rem) {
  .explore-body { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; max-height: none; }
}

@media (max-width: 40rem) {
  .context { flex-wrap: nowrap; overflow-x: auto; }
  .context > * { flex: none; }
  .buckets { flex-wrap: nowrap; }
  .buckets label, nav.views a, .chip a, .facet, a.more,
  .explore input[type="date"], .explore input[type="text"], .explore select { min-height: 44px; }
}

/* Feed (brief section 4.1): tabs, filter bar, chips, the ranked table, and phone cards. */
.tabs { display: flex; gap: 4px; margin: 16px 0 12px; overflow-x: auto; border-bottom: 1px solid var(--hair); }
.tabs a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border-bottom: 2px solid transparent;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.tabs a:hover { color: var(--accent); }
.tabs a[aria-current="page"] { border-bottom-color: var(--accent); font-weight: 600; }

.filters, .filter-fields { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
.filters { margin-bottom: 12px; }
.field { display: grid; gap: 4px; }
.field label { color: var(--muted); font-size: 13px; }
.field .error { margin: 0; max-width: 20rem; font-size: 13px; }
select, .filters input {
  display: block;
  width: auto;
  min-height: 36px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
  color: var(--ink);
  font: 14px var(--sans);
}
.filter-fields button { align-self: flex-end; min-height: 36px; }
.filter-box > summary { display: flex; align-items: center; min-height: 36px; cursor: pointer; font-weight: 600; }
/* Wide screens show the controls with no toggle, where the browser can style the details content. */
@supports selector(::details-content) {
  @media (min-width: 40.0625rem) {
    .filter-box > summary { display: none; }
    .filter-box::details-content { content-visibility: visible; }
  }
}

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; }
.chips li {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-height: 28px;
  padding: 0 2px 0 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--surface);
}
.chips a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; text-decoration: none; }
.chips li.clear { padding: 0; border: 0; background: none; }
.chips li.clear a { text-decoration: underline; }

.status { min-height: 20px; margin: 0 0 4px; color: var(--muted); font-size: 13px; }
.statement { font-size: 14px; }
.empty, .load-error { padding: 16px; border: 1px solid var(--hair); border-radius: 4px; background: var(--surface); }
.empty p:last-child, .load-error > :last-child { margin-bottom: 0; }
.actions { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; }
.actions a { display: inline-flex; align-items: center; min-height: 24px; }
.footnote { margin-top: 16px; font-size: 13px; }

.feed-table caption { padding: 12px; caption-side: top; line-height: 1.5; text-align: left; }
.feed-table .exclusion { display: block; color: var(--muted); }
.feed-table td { vertical-align: middle; }
.feed-table th.ranked, .feed-table td.ranked .metric > span:first-child { font-weight: 600; }
.feed-table td.reel { min-width: 18rem; white-space: normal; }
.feed-table td[data-label] { min-width: 9rem; }
.feed-table .metric-unavailable { white-space: normal; }
.reel-cell { display: flex; align-items: center; gap: 12px; }
.thumb {
  display: flex;
  flex: none;
  align-items: flex-end;
  justify-content: center;
  width: 36px;
  height: 64px;
  padding-bottom: 4px;
  border-radius: 4px;
  background: var(--hair);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
img.thumb { padding: 0; object-fit: cover; }
.reel-text { display: grid; gap: 2px; min-width: 0; }
.reel-meta { color: var(--muted); font-size: 13px; }
.reel-text .caption { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
span.caption { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow-wrap: anywhere; }
.signal { font-size: 13px; }
.spark, .views .metric-meta { display: block; margin: 4px 0 0 auto; }
.spark polyline { fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linejoin: round; stroke-linecap: round; }
.spark circle { fill: var(--ink); }
.feed-table td.links a + a, .feed-table td.links a + span { margin-left: 12px; }
.feed-table tr.more td { padding: 12px; text-align: center; }
.feed-table tr.more a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 4px;
  text-decoration: none;
}

/* While a filter change loads, the old rows stay and dim (brief component C9). */
#view.htmx-request .feed-table, #view.htmx-request .empty { opacity: .5; }
@media (prefers-reduced-motion: no-preference) {
  .feed-table, .empty { transition: opacity 150ms ease-out; }
}

/* A wide screen fits the table, so the sticky header can follow the page. */
@media (min-width: 64rem) {
  .feed-table { overflow: visible; }
}

/* Phone: each row becomes a card. The explicit ARIA roles keep the table semantics. */
@media (max-width: 40rem) {
  .tabs a, .filter-box > summary, .filter-fields button { min-height: 44px; }
  select, .filters input { min-height: 44px; font-size: 16px; }
  .filter-box { flex-basis: 100%; }
  .filter-fields { flex-direction: column; align-items: stretch; padding-top: 8px; }
  .filter-fields button { align-self: stretch; }
  .filter-fields select, .filter-fields input { width: 100%; }
  .feed-table { overflow: visible; border: 0; background: none; }
  .feed-table table, .feed-table caption, .feed-table tbody { display: block; }
  .feed-table caption { padding: 0 0 12px; }
  .feed-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .feed-table tbody tr {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-bottom: 8px;
    padding: 12px;
    border: 1px solid var(--hair);
    border-radius: 4px;
    background: var(--surface);
  }
  .feed-table td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  .feed-table td.reel { grid-column: 2 / 4; min-width: 0; }
  .feed-table td:nth-child(3), .feed-table td:nth-child(5) { grid-column: 2; }
  .feed-table td:nth-child(4), .feed-table td:nth-child(6) { grid-column: 3; }
  .feed-table td[data-label] { min-width: 0; }
  .feed-table td[data-label]::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; }
  .feed-table td.links { display: grid; grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .feed-table td.links > a, .feed-table td.links > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 4px;
    text-decoration: none;
  }
  .feed-table tr.more { display: block; padding: 0; border: 0; background: none; }
  .feed-table tr.more a { min-height: 44px; }
  .spark { margin: 4px 0 0; }
}

/* Products (brief 4.3): status banner, filter bar, chips, tiles and the proposal comparison. */
.banner { margin: 0 0 16px; padding: 8px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 4px; }
.banner p { max-width: none; margin: 0; font-size: 14px; }
.banner p + p { margin-top: 4px; }
.filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 16px; margin: 0 0 8px; }
.filters .field { display: grid; flex: 1 1 9rem; gap: 4px; }
.filters label { color: var(--muted); font-size: 13px; }
.filters input, .filters select { width: 100%; min-height: 36px; padding: 4px 8px; font-size: 14px; }
.filters select { border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--ink); font-family: inherit; }
.filters .check { grid-auto-flow: column; align-items: center; min-height: 36px; }
.filters .check input { order: -1; width: 16px; height: 16px; min-height: 0; }
.filters .error { margin: 0; font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0 0 8px; padding: 0; list-style: none; }
.chips a { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px; }
.status { min-height: 18px; margin: 0; color: var(--muted); font-size: 13px; }
.rank-statement { margin: 0 0 8px; font-size: 14px; }
#view.htmx-request table { opacity: 0.5; }
td > .metric-meta, th > .metric-meta { display: block; font-weight: 400; }
.note { margin-top: 16px; font-size: 13px; }
.crumbs { margin-bottom: 8px; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.tile { padding: 12px; background: var(--surface); border: 1px solid var(--hair); border-radius: 4px; }
.tile dt { color: var(--muted); font-size: 13px; }
.tile dd { margin: 4px 0 0; }
.tile-value { font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile .metric-meta { display: block; }
.anchors { margin: 16px 0; }
.clamp { display: -webkit-box; max-width: 40ch; overflow: hidden; white-space: normal; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; }
.wrap { min-width: 20ch; white-space: normal; }
details { margin: 12px 0; }
summary { padding: 8px 0; cursor: pointer; }
tr.fired { background: var(--sel); }
details .table-box + .table-box { margin-top: 12px; }

@media (max-width: 40rem) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters input, .filters select { min-height: 44px; }
}