/* Row-wise data inspector styles — scoped under .far-inspector so they never
 * bleed into report prose. Uses the FAR palette (--far-*, always present) and
 * the prose template's surface tokens WITH fallbacks, so the same bundle looks
 * right both inside a report and on a standalone --raw explorer page.
 *
 * Two render states:
 *   - bare (no JS)  : the server `<details>` list — readable, expands inline.
 *   - .fi-enhanced  : JS adds .fi-toolbar, a sticky grid .fi-thead, wraps the
 *                     rows in .fi-main/.fi-list, and (for split) a .fi-pane;
 *                     for drawer/modal it appends .fi-scrim + .fi-drawer to body.
 * Column alignment between .fi-thead and each .fi-summary comes from a shared
 * grid-template-columns set by JS in --fi-cols. */

.far-inspector {
  --fi-panel: var(--panel, #fbfbf9);
  --fi-border: var(--border, #d8d8d2);
  --fi-muted: var(--muted, #6a6a66);
  --fi-code-bg: var(--code-bg, #f0f0ec);
  --fi-mono: var(--mono, ui-monospace, "SF Mono", Menlo, Consolas, monospace);
  --fi-rpad: 0.4rem 0.6rem;
  --fi-accent: var(--far-research-gray);
  margin: 1.5rem 0;
  font-size: 0.92rem;
}
.far-inspector[data-density="comfortable"] { --fi-rpad: 0.6rem 0.7rem; }
.far-inspector[data-density="compact"] { --fi-rpad: 0.22rem 0.5rem; font-size: 0.86rem; }

@media (prefers-color-scheme: dark) {
  .far-inspector {
    --fi-panel: var(--panel, #1b1d21);
    --fi-border: var(--border, #34373d);
    --fi-muted: var(--muted, #9a9ca2);
    --fi-code-bg: var(--code-bg, #25282d);
  }
}

.far-inspector .fi-title { font-weight: 600; margin-bottom: 0.5rem; }

/* ---- toolbar (added by JS) ---- */
.far-inspector .fi-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.7rem;
  padding: 0.5rem 0.7rem;
  background: var(--fi-panel);
  border: 1px solid var(--fi-border);
  border-bottom: none;
  border-radius: 8px 8px 0 0;
}
.far-inspector .fi-search {
  flex: 1 1 12rem;
  min-width: 8rem;
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--fi-border);
  border-radius: 6px;
  background: transparent;
  color: inherit;
  font: inherit;
}
.far-inspector .fi-count {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--fi-muted);
  font-variant-numeric: tabular-nums;
}
.far-inspector .fi-tool {
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  border: 1px solid var(--fi-border);
  background: transparent;
  color: inherit;
  border-radius: 6px;
  padding: 0.25rem 0.55rem;
}
.far-inspector .fi-tool:hover { background: var(--fi-code-bg); }
.far-inspector .fi-seg { display: inline-flex; border: 1px solid var(--fi-border); border-radius: 6px; overflow: hidden; }
.far-inspector .fi-seg button { border: none; background: transparent; color: var(--fi-muted); font: inherit; font-size: 0.8rem; padding: 0.2rem 0.5rem; cursor: pointer; }
.far-inspector .fi-seg button.fi-on { background: var(--fi-code-bg); color: inherit; }
.far-inspector .fi-menu { position: relative; }
.far-inspector .fi-menu-pop {
  position: absolute; top: 100%; left: 0; z-index: 5; margin-top: 4px;
  background: var(--fi-panel); border: 1px solid var(--fi-border); border-radius: 6px;
  padding: 0.4rem 0.6rem; min-width: 9rem; box-shadow: 0 4px 14px rgba(0,0,0,.12);
}
.far-inspector .fi-menu-pop label { display: flex; gap: 0.4rem; align-items: center; font-size: 0.82rem; padding: 0.12rem 0; white-space: nowrap; }
.far-inspector .fi-pager { display: inline-flex; align-items: center; gap: 0.35rem; }
.far-inspector .fi-pager button { cursor: pointer; border: 1px solid var(--fi-border); background: transparent; color: inherit; border-radius: 6px; width: 1.7rem; height: 1.7rem; line-height: 1; }
.far-inspector .fi-pageinfo { font-size: 0.8rem; color: var(--fi-muted); font-variant-numeric: tabular-nums; }

/* ---- main / list / split scaffolding (built by JS) ---- */
.far-inspector.fi-enhanced .fi-main { border: 1px solid var(--fi-border); border-radius: 0 0 8px 8px; overflow: hidden; }
.far-inspector.fi-enhanced .fi-list { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.far-inspector.fi-enhanced .fi-rows { overflow: auto; }
/* Expand-to-full-width: width + margin-left are set inline by JS (clientWidth-
 * based, scrollbar-safe). This only lifts the widened block above the report's
 * floating ToC rail (z-index 40) so the left edge isn't clipped by it. */
.far-inspector.fi-wide { position: relative; z-index: 45; }
.far-inspector .fi-tool.fi-on { background: var(--fi-code-bg); border-color: var(--fi-accent); }
.far-inspector.fi-enhanced[data-surface="split"] .fi-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto var(--fi-split, 440px);
  min-height: var(--fi-min, 360px);
}
/* overflow-x: clip (not hidden/auto) — rows wider than the list track must not
   paint over the pane, but the list must stay a non-scroll-container so the
   sticky thead keeps working. Size columns to fit; clip is the safety net. */
.far-inspector.fi-enhanced[data-surface="split"] .fi-list { max-height: var(--fi-max, 74vh); overflow-x: clip; }
.far-inspector.fi-enhanced[data-surface="split"] .fi-rows { flex: 1 1 auto; }
.far-inspector .fi-divider { background: var(--fi-border); cursor: col-resize; width: 5px; }
.far-inspector .fi-divider:hover { background: var(--fi-accent); }
.far-inspector .fi-pane { display: flex; flex-direction: column; min-width: 0; overflow: hidden; max-height: var(--fi-max, 74vh); }
.far-inspector .fi-pane-head, .far-inspector .fi-drawer-head {
  display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem;
  border-bottom: 1px solid var(--fi-border); background: var(--fi-panel);
}
.far-inspector .fi-pane-title, .far-inspector .fi-drawer-title { flex: 1; font-weight: 600; font-size: 0.9rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.far-inspector .fi-iconbtn { cursor: pointer; border: 1px solid var(--fi-border); background: transparent; color: inherit; border-radius: 6px; min-width: 1.7rem; height: 1.7rem; line-height: 1; padding: 0 0.35rem; font: inherit; }
.far-inspector .fi-iconbtn:hover { background: var(--fi-code-bg); }
.far-inspector .fi-pane-body, .far-inspector .fi-drawer-body { overflow: auto; padding: 0.7rem 0.9rem; }
.far-inspector .fi-empty { color: var(--fi-muted); font-size: 0.85rem; padding: 1.2rem; text-align: center; margin: auto; }

/* ---- sticky grid header (built by JS) ---- */
.far-inspector .fi-thead {
  display: grid;
  grid-template-columns: var(--fi-cols);
  position: sticky; top: 0; z-index: 2;
  background: var(--fi-panel);
  border-bottom: 1px solid var(--fi-border);
}
.far-inspector .fi-th { position: relative; padding: var(--fi-rpad); min-width: 0; }
.far-inspector .fi-th-label {
  display: inline-flex; align-items: center; gap: 0.25rem; cursor: pointer;
  font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fi-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.far-inspector .fi-th-sort { opacity: 0.55; font-size: 0.65rem; }
.far-inspector .fi-th-filter { margin-top: 0.25rem; }
.far-inspector .fi-th-filter select, .far-inspector .fi-th-filter input {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 0.78rem;
  padding: 0.15rem 0.25rem; border: 1px solid var(--fi-border); border-radius: 5px;
  background: transparent; color: inherit;
}
.far-inspector .fi-th-resize { position: absolute; top: 0; right: -3px; width: 7px; height: 100%; cursor: col-resize; z-index: 3; }
.far-inspector .fi-th-resize:hover { background: color-mix(in srgb, var(--fi-accent) 40%, transparent); }

/* ---- group headings ---- */
.far-inspector .fi-group-head {
  margin-top: 0.9rem; padding: 0.3rem 0.2rem 0.2rem;
  font-weight: 600; font-size: 0.85rem; color: var(--fi-muted);
  border-bottom: 2px solid var(--fi-border);
}
.far-inspector .fi-group-head:first-child { margin-top: 0; }
.far-inspector.fi-enhanced .fi-group-head { margin: 0; padding: 0.35rem 0.6rem; background: var(--fi-code-bg); position: sticky; top: 0; }

/* ---- rows: bare (no-JS) fallback keeps the flex summary + caret ---- */
.far-inspector .fi-rows { border: 1px solid var(--fi-border); border-radius: 0 0 8px 8px; }
.far-inspector.fi-enhanced .fi-rows { border: none; border-radius: 0; }
.far-inspector .fi-row { border-top: 1px solid var(--fi-border); }
.far-inspector .fi-rows > .fi-row:first-child { border-top: none; }
.far-inspector .fi-summary {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.7rem;
  padding: 0.5rem 0.7rem; cursor: pointer; list-style: none;
}
.far-inspector .fi-summary::-webkit-details-marker { display: none; }
.far-inspector .fi-summary::before { content: "▸"; color: var(--fi-muted); font-size: 0.7rem; transition: transform 0.12s; }
.far-inspector .fi-row[open] > .fi-summary::before { transform: rotate(90deg); }
.far-inspector .fi-row[open] > .fi-summary { background: var(--fi-code-bg); }
.far-inspector .fi-cell { display: inline-flex; align-items: baseline; gap: 0.3rem; }

/* ---- rows: enhanced table look (grid summary aligned to the header) ---- */
.far-inspector.fi-enhanced .fi-summary {
  display: grid; grid-template-columns: var(--fi-cols); gap: 0;
  align-items: baseline; padding: 0; flex-wrap: nowrap;
}
.far-inspector.fi-enhanced .fi-summary::before { display: none; }
.far-inspector.fi-enhanced .fi-cell {
  display: block; padding: var(--fi-rpad); min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.far-inspector.fi-enhanced .fi-row:nth-of-type(even) > .fi-summary { background: color-mix(in srgb, var(--fi-muted) 5%, transparent); }
.far-inspector.fi-enhanced .fi-row > .fi-summary:hover { background: color-mix(in srgb, var(--fi-accent) 9%, transparent); }
.far-inspector.fi-enhanced .fi-row.fi-active > .fi-summary {
  background: color-mix(in srgb, var(--fi-accent) 15%, transparent);
  box-shadow: inset 3px 0 0 var(--fi-accent);
}
.far-inspector.fi-enhanced .fi-row.fi-pinned > .fi-summary { box-shadow: inset 3px 0 0 var(--far-orange); }
/* In drawer/split/modal the body is routed into the surface, not shown inline. */
.far-inspector.fi-enhanced:not([data-surface="inline"]) .fi-body { display: none; }
.far-inspector.fi-enhanced[data-surface="inline"] .fi-summary { cursor: pointer; }

/* ---- detail body (shared by inline / drawer / split / modal) ---- */
.far-inspector .fi-body {
  padding: 0.3rem 0.9rem 0.8rem 1.4rem;
  background: var(--fi-code-bg);
  border-top: 1px dashed var(--fi-border);
}
.far-inspector .fi-drawer-body .fi-body, .far-inspector .fi-pane-body .fi-body,
.far-inspector .fi-modal-body .fi-body { background: transparent; border: none; padding: 0; }
/* The routed body is a CLONE placed inside the surface; re-show it. The broad
   hide rule above (`...:not([data-surface="inline"]) .fi-body`) also matches the
   split pane's clone — the pane lives INSIDE the enhanced root, unlike the
   drawer/modal which are portaled to <body> and so escape it. Match its
   specificity (0,4,0) and rely on source order to win. */
.far-inspector.fi-enhanced .fi-pane-body .fi-body,
.far-inspector .fi-drawer-body .fi-body,
.far-inspector .fi-modal-body .fi-body { display: block; }
.far-inspector .fi-field { margin: 0.5rem 0; }
.far-inspector .fi-flabel {
  display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fi-muted); margin-bottom: 0.15rem;
}
.far-inspector .fi-dblock { margin: 0.9rem 0; }
.far-inspector .fi-dblock:first-child { margin-top: 0.2rem; }

/* ---- field value kinds ---- */
.far-inspector .fi-badge {
  display: inline-block; padding: 0.05rem 0.45rem; border-radius: 999px;
  font-size: 0.78rem; font-weight: 600; white-space: nowrap;
  color: var(--fi-badge);
  background: color-mix(in srgb, var(--fi-badge) 15%, transparent);
  border: 1px solid color-mix(in srgb, var(--fi-badge) 40%, transparent);
}
.far-inspector .fi-badge + .fi-badge { margin-left: 0.25rem; }
.far-inspector .fi-bool { font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.far-inspector .fi-bool-yes { color: var(--far-dark-green); }
.far-inspector .fi-bool-no { color: var(--fi-muted); }
.far-inspector .fi-num { font-variant-numeric: tabular-nums; }
/* signed number cells (Column(signed=True)) — direction-is-the-point deltas */
.far-inspector .fi-num.fi-pos { color: var(--far-dark-green); }
.far-inspector .fi-num.fi-neg { color: #c05621; }
.far-inspector .fi-muted { color: var(--fi-muted); }
.far-inspector .fi-na { color: var(--fi-muted); }
.far-inspector .fi-long {
  white-space: pre-wrap; word-break: break-word; font-family: var(--fi-mono);
  font-size: 0.82rem; line-height: 1.5; background: var(--fi-panel);
  border: 1px solid var(--fi-border); border-radius: 6px; padding: 0.5rem 0.65rem;
}

/* ---- chat transcript ---- */
.far-inspector .fi-chat { display: flex; flex-direction: column; gap: 0.5rem; }
.far-inspector .fi-msg { display: flex; flex-direction: column; gap: 0.15rem; max-width: 90%; }
.far-inspector .fi-msg-assistant, .far-inspector .fi-msg-model { align-self: flex-end; align-items: flex-end; }
.far-inspector .fi-role { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--fi-muted); }
.far-inspector .fi-bubble {
  padding: 0.45rem 0.65rem; border-radius: 10px; line-height: 1.45; white-space: pre-wrap; word-break: break-word;
  border: 1px solid color-mix(in srgb, var(--fi-role) 45%, transparent);
  background: color-mix(in srgb, var(--fi-role) 12%, transparent);
}
.far-inspector .fi-msg-system .fi-bubble { font-style: italic; }

/* ---- collapsible chat (chat block opts.collapse) ---- */
.far-inspector .fi-msgc { max-width: 100%; align-self: stretch; }
.far-inspector .fi-msgc > summary {
  display: flex; align-items: baseline; gap: 0.55rem; min-width: 0;
  cursor: pointer; list-style: none; padding: 0.4rem 0.6rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--fi-role) 45%, transparent);
  background: color-mix(in srgb, var(--fi-role) 10%, transparent);
}
.far-inspector .fi-msgc > summary::-webkit-details-marker { display: none; }
.far-inspector .fi-msgc[open] > summary { border-radius: 10px 10px 0 0; }
.far-inspector .fi-msgc .fi-msgc-preview {
  flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 0.82rem;
}
.far-inspector .fi-msgc .fi-msgc-meta {
  flex: none; font-size: 0.7rem; color: var(--fi-muted); font-variant-numeric: tabular-nums;
}
.far-inspector .fi-msgc > .fi-bubble {
  border-radius: 0 0 10px 10px; border-top: none; max-height: 30rem; overflow: auto;
  overflow-wrap: anywhere; font-style: normal; font-family: var(--fi-mono); font-size: 0.78rem;
}
.far-inspector .fi-msgc.fi-msgc-marked > summary,
.far-inspector .fi-msgc.fi-msgc-marked > .fi-bubble {
  border-color: color-mix(in srgb, var(--far-orange) 70%, transparent);
}
.far-inspector .fi-msgc.fi-msgc-marked > summary { box-shadow: inset 3px 0 0 var(--far-orange); }

/* ---- card sub-table (subtable block opts.cards) ---- */
.far-inspector .fi-cards .fi-card {
  border: 1px solid var(--fi-border); border-radius: 8px; background: var(--fi-panel);
  margin-bottom: 0.45rem;
}
.far-inspector .fi-card > summary {
  display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; min-width: 0;
  cursor: pointer; list-style: none; padding: 0.45rem 0.65rem;
}
.far-inspector .fi-card > summary::-webkit-details-marker { display: none; }
.far-inspector .fi-card-title, .far-inspector .fi-card-title .fi-short { font-weight: 600; font-size: 0.84rem; }
.far-inspector .fi-card-meta { margin-left: auto; font-size: 0.7rem; color: var(--fi-muted); font-variant-numeric: tabular-nums; }
.far-inspector .fi-card-sec { padding: 0 0.65rem 0.5rem; }
.far-inspector .fi-card-seclabel {
  display: block; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--fi-muted); margin: 0.2rem 0 0.25rem;
}
.far-inspector .fi-card .fi-long {
  max-height: 24rem; overflow: auto; font-family: var(--fi-mono); font-size: 0.78rem;
  background: color-mix(in srgb, var(--fi-muted) 7%, transparent); border-radius: 6px;
  padding: 0.45rem 0.6rem; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0;
}

/* ---- judge block ---- */
.far-inspector .fi-judge { border: 1px solid var(--fi-border); border-radius: 8px; background: var(--fi-panel); padding: 0.6rem 0.7rem; }
.far-inspector .fi-judge-head { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.far-inspector .fi-meter { flex: 1 1 7rem; min-width: 6rem; height: 0.55rem; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--fi-muted) 22%, transparent); }
.far-inspector .fi-meter > span { display: block; height: 100%; border-radius: 999px; }
.far-inspector .fi-meter-val { font-weight: 600; font-variant-numeric: tabular-nums; }
.far-inspector .fi-judge-reason { margin-top: 0.5rem; }
.far-inspector .fi-judge-reason > summary { cursor: pointer; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fi-muted); }
.far-inspector .fi-judge-reason p { margin: 0.4rem 0 0; line-height: 1.5; }

/* ---- tokenstrip / heatmap ---- */
.far-inspector .fi-tokrow { display: flex; flex-wrap: wrap; gap: 3px; }
.far-inspector .fi-tok {
  font: inherit; font-size: 0.8rem; cursor: pointer; border-radius: 4px;
  padding: 0.1rem 0.35rem; line-height: 1.3; color: inherit;
  border: 1px solid color-mix(in srgb, var(--fi-tok) 35%, transparent);
  background: color-mix(in srgb, var(--fi-tok) var(--fi-tok-i, 0%), transparent);
}
.far-inspector .fi-tok-mark { font-weight: 700; }
.far-inspector .fi-tok[aria-pressed="true"], .far-inspector .fi-tok.fi-on { outline: 2px solid var(--far-orange); outline-offset: 1px; }
.far-inspector .fi-tok-detail {
  margin-top: 0.5rem; border: 1px solid var(--fi-border); border-radius: 6px;
  background: var(--fi-panel); padding: 0.5rem 0.65rem; min-height: 2.6rem;
  font-family: var(--fi-mono); font-size: 0.82rem; line-height: 1.5;
}
.far-inspector .fi-tok-pos { display: block; color: var(--fi-muted); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 0.25rem; }

/* ---- stats / mini-charts ---- */
.far-inspector .fi-stats {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1rem;
  border: 1px solid var(--fi-border); border-radius: 8px; background: var(--fi-panel); padding: 0.6rem 0.8rem;
}
.far-inspector .fi-stat { display: flex; flex-direction: column; min-width: 4.5rem; }
.far-inspector .fi-stat-v { font-size: 1.05rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.far-inspector .fi-stat-l { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fi-muted); }
.far-inspector .fi-spark, .far-inspector .fi-bars, .far-inspector .fi-heat { vertical-align: middle; overflow: visible; max-width: 100%; }

/* ---- raw JSON / key-value ---- */
.far-inspector .fi-json > summary { cursor: pointer; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fi-muted); }
.far-inspector .fi-json pre { white-space: pre-wrap; word-break: break-word; font-family: var(--fi-mono); font-size: 0.78rem; background: var(--fi-panel); border: 1px solid var(--fi-border); border-radius: 6px; padding: 0.5rem 0.65rem; margin: 0.4rem 0; }
.far-inspector .fi-copy { font: inherit; font-size: 0.78rem; cursor: pointer; border: 1px solid var(--fi-border); background: transparent; color: inherit; border-radius: 6px; padding: 0.15rem 0.5rem; }
.far-inspector .fi-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.2rem 0.7rem; margin: 0; }
.far-inspector .fi-kv dt { color: var(--fi-muted); font-size: 0.78rem; }
.far-inspector .fi-kv dd { margin: 0; }

/* ---- compare (two panes side by side) ---- */
.far-inspector .fi-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
.far-inspector .fi-compare-col { min-width: 0; }
.far-inspector .fi-compare-col > .fi-compare-head { font-weight: 600; font-size: 0.85rem; margin-bottom: 0.4rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--fi-border); }
.far-inspector .fi-diff { background: color-mix(in srgb, var(--far-orange) 16%, transparent); border-radius: 4px; }
@media (max-width: 640px) { .far-inspector .fi-compare { grid-template-columns: 1fr; } }

/* ---- nested sub-table (legacy / subtable detail block) ---- */
.far-inspector .fi-subtable { margin-top: 0.7rem; }
.far-inspector .fi-sublabel { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fi-muted); margin-bottom: 0.3rem; }
.far-inspector .fi-subtable table { width: 100%; border-collapse: collapse; font-size: 0.82rem; }
.far-inspector .fi-subtable th, .far-inspector .fi-subtable td { text-align: left; vertical-align: top; padding: 0.3rem 0.5rem; border-bottom: 1px solid var(--fi-border); }
.far-inspector .fi-subtable th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--fi-muted); }
.far-inspector .fi-subtable .fi-long { font-size: 0.8rem; padding: 0.35rem 0.5rem; margin: 0; }

/* ---- drawer + modal (appended to <body>, fixed) ---- */
.fi-scrim { position: fixed; inset: 0; background: rgba(7, 16, 36, 0.32); opacity: 0; pointer-events: none; transition: opacity 0.16s; z-index: 1000; }
.fi-scrim.fi-on { opacity: 1; pointer-events: auto; }
.fi-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 94vw);
  background: var(--panel, #fbfbf9); border-left: 1px solid var(--border, #d8d8d2);
  transform: translateX(101%); transition: transform 0.2s ease; z-index: 1001;
  display: flex; flex-direction: column;
}
.fi-drawer.fi-modal { top: 50%; right: 50%; bottom: auto; transform: translate(50%, -46%) scale(0.98); width: min(720px, 94vw); max-height: 86vh; border: 1px solid var(--border, #d8d8d2); border-radius: 10px; opacity: 0; }
.fi-drawer.fi-on { transform: none; }
.fi-drawer.fi-modal.fi-on { transform: translate(50%, -50%); opacity: 1; }
@media (prefers-color-scheme: dark) { .fi-drawer { background: var(--panel, #1b1d21); border-color: var(--border, #34373d); } }

/* ==========================================================================
 * Casefile surface — intentionally independent from the table/drawer system.
 * Every token and selector is rooted here so the published additive bundle
 * cannot alter inline or explorer inspectors already on the web.
 * ========================================================================== */

.fi-casefile {
  --ground: #F6F5F2;
  --panel: #FFFFFF;
  --ink: #22262A;
  --muted: #6B7178;
  --line: #E2E0DB;
  --accent: #31567A;
  --accent-soft: #EAF0F5;
  --lie: #A63D40;
  --lie-soft: #F7ECEC;
  --honest: #33705B;
  --honest-soft: #EAF2EE;
  --amber: #B8860B;
  --mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --serif: Charter, Georgia, "Times New Roman", serif;
  --ui: system-ui, -apple-system, "Segoe UI", sans-serif;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: calc(100dvh - var(--fi-case-topbar, 0px));
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--ui);
  font-size: 14px;
}
.far-rawbar ~ .fi-casefile { --fi-case-topbar: 40px; }
.fi-casefile, .fi-casefile * { box-sizing: border-box; }

.fi-casefile .fi-case-noscript {
  margin: 16px 20px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--muted);
}

.fi-casefile .fi-case-primer {
  flex: none;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
.fi-casefile .fi-case-primer > summary {
  cursor: pointer;
  padding: 12px 20px;
  font-size: 13px;
  font-weight: 650;
  color: var(--accent);
  list-style: none;
}
.fi-casefile .fi-case-primer > summary::before { content: "▸ "; font-size: 11px; }
.fi-casefile .fi-case-primer[open] > summary::before { content: "▾ "; }
.fi-casefile .fi-case-primer > summary::-webkit-details-marker { display: none; }
.fi-casefile .fi-case-primer-body {
  padding: 0 20px 16px;
  max-height: 42vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 4px 28px;
}
.fi-casefile .fi-case-primer-body h2 {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 10px 0 4px;
}
.fi-casefile .fi-case-primer-body p {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.55;
  max-width: 62ch;
}
.fi-casefile .fi-case-primer-body code {
  font-family: var(--mono);
  font-size: 11.5px;
  background: var(--ground);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
}
.fi-casefile .fi-case-primer-body .lie-word { color: var(--lie); font-weight: 600; }
.fi-casefile .fi-case-primer-body .honest-word { color: var(--honest); font-weight: 600; }
.fi-casefile .fi-case-primer-body a { color: var(--accent); text-underline-offset: 2px; }
.fi-casefile .fi-case-primer-body dl { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; }
.fi-casefile .fi-case-primer-body dt {
  float: left;
  clear: left;
  margin-right: 6px;
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 600;
}
.fi-casefile .fi-case-primer-body dd { margin: 0 0 5px; color: var(--muted); }

.fi-casefile .fi-case-app { display: flex; flex: 1; min-height: 0; }
.fi-casefile .fi-case-rail {
  width: 320px;
  flex: none;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--panel);
}
.fi-casefile .fi-case-head { padding: 16px 18px 12px; border-bottom: 1px solid var(--line); }
.fi-casefile .fi-case-head h1 {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -0.01em;
}
.fi-casefile .fi-case-head .sub { font-size: 11.5px; color: var(--muted); line-height: 1.5; }
.fi-casefile .fi-case-head .sub code { font-family: var(--mono); font-size: 10.5px; }
.fi-casefile .fi-case-filters { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 9px; }
.fi-casefile .fi-case-filter {
  padding: 3px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--panel);
  color: var(--muted);
  font-family: var(--ui);
  font-size: 10.5px;
  cursor: pointer;
}
.fi-casefile .fi-case-filter:hover { background: var(--ground); color: var(--ink); }
.fi-casefile .fi-case-filter.active {
  border-color: #B8CADA;
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 600;
}
.fi-casefile .fi-case-list { overflow-y: auto; flex: 1; padding: 6px; min-height: 0; }
.fi-casefile .fi-case-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 10px;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: inherit;
  cursor: pointer;
  font-family: var(--ui);
}
.fi-casefile .fi-case-row:hover { background: var(--ground); }
.fi-casefile .fi-case-row.active { background: var(--accent-soft); }
.fi-casefile .fi-case-pid {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
}
.fi-casefile .fi-case-row.active .fi-case-pid { color: var(--accent); }
.fi-casefile .fi-case-badge {
  justify-self: end;
  align-self: center;
  display: inline-block;
  padding: 1px 7px;
  border: 1px solid color-mix(in srgb, var(--fi-case-badge) 40%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--fi-case-badge) 14%, transparent);
  color: var(--fi-case-badge);
  font-size: 9.5px;
  font-weight: 600;
  white-space: nowrap;
}
.fi-casefile .fi-case-bars {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.fi-casefile .fi-case-bar-line {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  color: var(--muted);
  font-family: var(--mono);
}
.fi-casefile .fi-case-bar-lbl { width: 40px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fi-casefile .fi-case-bar-track {
  display: block;
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 2px;
  overflow: hidden;
}
.fi-casefile .fi-case-bar-fill { display: block; height: 100%; border-radius: 2px; }
.fi-casefile .fi-case-bar-val {
  width: 42px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.fi-casefile .fi-case-foot {
  padding: 10px 18px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  color: var(--muted);
}
.fi-casefile .fi-case-foot kbd {
  font-family: var(--mono);
  font-size: 10px;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 4px;
  background: var(--ground);
}
.fi-casefile .fi-case-row:focus-visible,
.fi-casefile .fi-case-filter:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fi-casefile .fi-case-detail { flex: 1; min-width: 0; overflow-y: auto; }
.fi-casefile .fi-case-detail-inner { max-width: 860px; margin: 0 auto; padding: 24px 32px 80px; }
.fi-casefile .fi-case-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 18px;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  margin-bottom: 20px;
}
.fi-casefile .fi-case-meta-title { font-family: var(--mono); font-size: 16px; font-weight: 700; }
.fi-casefile .fi-case-meta .fi-case-badge { justify-self: auto; }
.fi-casefile .fi-case-chip {
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fi-casefile .fi-case-chip b { color: var(--ink); font-weight: 600; }
.fi-casefile .fi-case-chip b.fi-case-hon-v { color: var(--honest); }
.fi-casefile .fi-case-chip b.fi-case-lie-v { color: var(--lie); }
.fi-casefile .fi-case-ctx {
  flex-basis: 100%;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  word-break: break-all;
}
.fi-casefile .fi-case-section { margin: 0; }
.fi-casefile .fi-case-sec-label {
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 22px 0 10px;
}
.fi-casefile .fi-case-probe {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 16px 14px;
}
.fi-casefile .fi-case-probe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 18px;
}
.fi-casefile .fi-case-pm { display: flex; flex-direction: column; gap: 2px; }
.fi-casefile .fi-case-pm-k { font-size: 10.5px; color: var(--muted); }
.fi-casefile .fi-case-pm-v {
  font-family: var(--mono);
  font-size: 15px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fi-casefile .fi-case-pm-v.fi-case-lie-v { color: var(--lie); }
.fi-casefile .fi-case-pm-v.fi-case-hon-v { color: var(--honest); }
.fi-casefile .fi-case-pill-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.fi-casefile .fi-case-sign {
  font-size: 9.5px;
  font-weight: 650;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 1px 7px;
}
.fi-casefile .fi-case-sign.fi-case-pass {
  color: var(--honest);
  background: var(--honest-soft);
  border: 1px solid #BDD8CB;
}
.fi-casefile .fi-case-text {
  padding: 10px 14px;
  border: 1px solid #CDDBE7;
  border-radius: 8px;
  background: var(--accent-soft);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.fi-casefile .fi-case-kv {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 5px 14px;
  margin: 0;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}
.fi-casefile .fi-case-kv dt { color: var(--muted); font-size: 11px; }
.fi-casefile .fi-case-kv dd { margin: 0; font-family: var(--mono); font-size: 12px; }

.fi-casefile .fi-case-turn { margin: 0 0 12px; }
.fi-casefile .fi-case-who {
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  margin-bottom: 3px;
}
.fi-casefile .fi-case-bubble {
  padding: 10px 14px;
  border-radius: 8px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.fi-casefile .fi-case-turn-system .fi-case-who { color: var(--accent); }
.fi-casefile .fi-case-turn-system .fi-case-bubble {
  background: var(--accent-soft);
  border: 1px solid #CDDBE7;
  font-family: var(--ui);
  font-size: 13px;
}
.fi-casefile .fi-case-turn-user { margin-left: 8%; }
.fi-casefile .fi-case-turn-user .fi-case-who { color: var(--muted); text-align: right; }
.fi-casefile .fi-case-turn-user .fi-case-bubble { background: var(--panel); border: 1px solid var(--line); }
.fi-casefile .fi-case-turn-assistant { margin-right: 8%; }
.fi-casefile .fi-case-turn-assistant .fi-case-who { color: var(--ink); }
.fi-casefile .fi-case-turn-assistant .fi-case-bubble { background: #EFEDE8; }

.fi-casefile .fi-case-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.fi-casefile .fi-case-comp {
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  overflow: hidden;
}
.fi-casefile .fi-case-comp-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.fi-casefile .fi-case-comp-bad .fi-case-comp-head { background: var(--lie-soft); color: var(--lie); }
.fi-casefile .fi-case-comp-good .fi-case-comp-head { background: var(--honest-soft); color: var(--honest); }
.fi-casefile .fi-case-comp-neutral .fi-case-comp-head { background: var(--accent-soft); color: var(--accent); }
.fi-casefile .fi-case-verdict {
  font-family: var(--mono);
  font-size: 10px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid currentColor;
}
.fi-casefile .fi-case-comp-body {
  padding: 12px 14px;
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: break-word;
}
.fi-casefile .fi-case-comp-foot {
  padding: 8px 14px 10px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.fi-casefile .fi-case-json > summary { cursor: pointer; font-size: 11px; color: var(--accent); }
.fi-casefile .fi-case-json pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: 11px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px;
}
.fi-casefile .fi-case-empty { padding: 18px; color: var(--muted); font-size: 12px; }

@media (max-width: 760px) {
  .fi-casefile .fi-case-rail { width: 240px; }
  .fi-casefile .fi-case-fork { grid-template-columns: 1fr; }
  .fi-casefile .fi-case-detail-inner { padding: 20px 18px 64px; }
}