/* The workbench — the released files read as data.
   A refinement inside the incumbent Oddseam world rather than a new one: colour
   comes from the site's own tokens (--bg --panel --line --ink --dim --glow
   --stamp), rhythm from one 4pt spacing scale, and the only ornament is a data
   mark. No illustration, no imagery, no dependency. Monospace is reserved for
   data — ids, dates, counts, measures — never as a costume for "technical".
   Hierarchy is carried by size, weight and interval; hairlines only separate. */

.workbench-page {
  /* spacing — 4pt base, semantic steps */
  --wb-1: 0.25rem;
  --wb-2: 0.5rem;
  --wb-3: 0.75rem;
  --wb-4: 1rem;
  --wb-5: 1.5rem;
  --wb-6: 2.25rem;
  /* surfaces — the site's tokens, with fallbacks so the page stands alone */
  --wb-bg: var(--bg, #090e0e);
  --wb-panel: var(--panel, #101817);
  --wb-panel-2: #0c1312;
  --wb-line: var(--line, #2a3531);
  --wb-line-soft: #1b2422;
  --wb-ink: var(--ink, #d5dbd3);
  --wb-dim: var(--dim, #a5b1a7);
  --wb-glow: var(--glow, #b5d4b6);
  --wb-stamp: var(--stamp, #943d2c);
  --wb-tint: rgba(181, 212, 182, 0.08);
  --wb-tint-2: rgba(181, 212, 182, 0.16);
  --wb-data: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --wb-sticky: 5.2rem;
  --wb-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  background: var(--wb-bg);
}

.workbench-page .findings-main { max-width: 1560px; width: calc(100% - 40px); }

/* Browser surfaces are part of the design. */
.workbench-page ::selection { background: rgba(181, 212, 182, 0.26); color: #fff; }
.workbench-page { caret-color: var(--wb-glow); accent-color: var(--wb-glow); }
.wb-scroll, .wb-rail, .wb-detail { scrollbar-width: thin; scrollbar-color: var(--wb-line) transparent; }
.wb-scroll::-webkit-scrollbar, .wb-rail::-webkit-scrollbar, .wb-detail::-webkit-scrollbar { width: 10px; height: 10px; }
.wb-scroll::-webkit-scrollbar-thumb, .wb-rail::-webkit-scrollbar-thumb, .wb-detail::-webkit-scrollbar-thumb {
  background: var(--wb-line); border-radius: 6px; border: 2px solid transparent; background-clip: content-box;
}
.wb-scroll::-webkit-scrollbar-track, .wb-rail::-webkit-scrollbar-track, .wb-detail::-webkit-scrollbar-track { background: transparent; }

.workbench-page :focus-visible { outline: 2px solid var(--wb-glow); outline-offset: 2px; border-radius: 2px; }
.workbench-page .wb-scroll :focus-visible { outline-offset: -2px; }

/* --- page head ---------------------------------------------------------- */
.wb-head { max-width: 74ch; }
.wb-head h1 { font-size: clamp(1.6rem, 2.4vw, 2.15rem); margin: 0 0 var(--wb-3); line-height: 1.1; }
.wb-head p { margin: 0; color: var(--wb-dim); font-size: 0.95rem; line-height: 1.6; }

/* Keep the corpus framing short; distributions belong in Summary. */
.wb-summary { margin: var(--wb-3) 0; font-size: 0.86rem; line-height: 1.6; color: var(--wb-glow); }
.wb-prov { margin: 0 0 var(--wb-3); font-size: 0.84rem; line-height: 1.6; color: var(--wb-dim); max-width: 80ch; }
.wb-prov > summary { cursor: pointer; padding: var(--wb-2) 0; }
.wb-prov p { margin: var(--wb-2) 0; overflow-wrap: anywhere; }
.wb-prov code { font-family: var(--wb-data); font-size: 0.94em; }

/* --- control bar: chrome, not content. Sticks so the tools stay reachable
       while the grid scrolls. ------------------------------------------- */
.wb-bar {
  position: sticky; top: var(--wb-sticky); z-index: 6;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--wb-3);
  padding: var(--wb-3) 0;
  margin-bottom: var(--wb-3);
  background: var(--wb-bg);
  border-bottom: 1px solid var(--wb-line);
}
.wb-seg { display: flex; border: 1px solid var(--wb-line); border-radius: 3px; overflow: hidden; }
.wb-seg button {
  font: inherit; font-size: 0.82rem; color: var(--wb-dim); background: var(--wb-panel-2);
  border: 0; border-left: 1px solid var(--wb-line-soft); padding: 0.5rem 0.8rem; min-height: 2.75rem; cursor: pointer;
  transition: background 120ms var(--wb-ease), color 120ms var(--wb-ease);
}
.wb-seg button:first-child { border-left: 0; }
.wb-seg button:hover { background: var(--wb-panel); color: var(--wb-ink); }
.wb-seg button[aria-pressed="true"] { background: var(--wb-tint-2); color: var(--wb-ink); font-weight: 600; }

.wb-field { position: relative; flex: 1 1 16rem; min-width: 11rem; display: flex; align-items: center; }
.wb-field svg { position: absolute; left: 0.5rem; width: 15px; height: 15px; fill: none; stroke: var(--wb-dim); stroke-width: 1.6; pointer-events: none; }
.wb-field input {
  width: 100%; font: inherit; font-size: 0.86rem; color: var(--wb-ink);
  padding: 0.5rem 2.75rem 0.5rem 1.85rem; min-height: 2.75rem;
  background: var(--wb-panel-2); border: 1px solid var(--wb-line); border-radius: 3px;
}
.wb-field input::placeholder { color: var(--wb-dim); }
.wb-field input:focus-visible { border-color: var(--wb-glow); outline-offset: 0; }
.wb-field .wb-clear {
  position: absolute; right: 0; width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: none; border: 0; color: var(--wb-dim); cursor: pointer; border-radius: 2px; font: inherit;
}
.wb-field .wb-clear:hover { color: var(--wb-ink); background: var(--wb-tint); }
.wb-field .wb-clear svg { position: static; width: 10px; height: 10px; stroke: currentColor; }
.wb-count {
  font-size: 0.8rem; color: var(--wb-dim); font-variant-numeric: tabular-nums;
  margin-left: auto; padding-left: var(--wb-3); border-left: 1px solid var(--wb-line); white-space: nowrap;
}
.wb-count b { color: var(--wb-ink); font-weight: 600; }
.wb-filter-toggle { display: none; font: inherit; font-size: 0.82rem; color: var(--wb-ink); background: var(--wb-panel-2);
  border: 1px solid var(--wb-line); border-radius: 3px; padding: 0.42rem 0.7rem; cursor: pointer; }
.wb-filter-toggle[data-active="true"] { border-color: var(--wb-glow); color: var(--wb-glow); }

/* active filters, stated in words rather than implied by a chip's fill */
.wb-active { display: flex; flex-wrap: wrap; gap: var(--wb-2); width: 100%; }
.wb-active:empty { display: none; }
.wb-active-chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--wb-ink);
  background: var(--wb-tint); border: 1px solid var(--wb-line); border-radius: 2px; padding: 0.15rem 0.35rem 0.15rem 0.5rem;
}
.wb-active-chip span { color: var(--wb-dim); }
.wb-active-chip button { font: inherit; color: var(--wb-dim); background: none; border: 0; cursor: pointer; min-width: 2rem; min-height: 2rem; }
.wb-active-chip button:hover { color: var(--wb-ink); }

/* --- workspace ---------------------------------------------------------- */
/* Two columns, two rows: the rail runs the full height on the left, and the
   reading pane sits under the grid in the same column, so the grid always has
   the whole width and never scrolls sideways to make room for the pane. */
.wb-shell { display: grid; grid-template-columns: 14rem minmax(0, 1fr); gap: var(--wb-4); align-items: start; }
.wb-rail { grid-column: 1; grid-row: 1 / span 2; }
.wb-main { grid-column: 2; grid-row: 1; min-width: 0; }
.wb-detail { grid-column: 2; grid-row: 2; }
/* Results keep their dimensions and scroll position when the reader opens. */
#wb-record-title, .wb-main, .wb-detail { scroll-margin-top: calc(var(--wb-sticky) + var(--wb-toolbar, 5rem) + 1rem); }
@media (max-width: 900px) {
  .wb-shell { grid-template-columns: minmax(0, 1fr); }
  .wb-rail { grid-column: 1; grid-row: auto; }
  .wb-main, .wb-detail { grid-column: 1; grid-row: auto; }
  .wb-rail { display: none; }
  .wb-shell.filters-open .wb-rail { display: block; position: static; max-height: 22rem; }
  .wb-filter-toggle { display: inline-block; }
  .wb-shell.has-detail .wb-main, .wb-shell.has-detail .wb-rail { display: none; }
  .wb-shell.has-detail .wb-detail { grid-row: 1; }
}

/* --- facet rail: quieter than the data it filters ----------------------- */
.wb-rail {
  position: sticky; top: calc(var(--wb-sticky) + var(--wb-toolbar, 5rem)); max-height: calc(100vh - var(--wb-sticky) - var(--wb-toolbar, 5rem) - 2rem);
  overflow: auto; font-size: 0.86rem; padding-right: var(--wb-1);
}
.wb-rail-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--wb-2);
  position: sticky; top: 0; background: var(--wb-bg); z-index: 2; padding-bottom: var(--wb-2);
  border-bottom: 1px solid var(--wb-line); margin-bottom: var(--wb-3);
}
.wb-rail-head h2 { margin: 0; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.11em; color: var(--wb-ink); }
.wb-rail-head button { font: inherit; font-size: 0.74rem; color: var(--wb-dim); background: none; border: 0; cursor: pointer; padding: 0; }
.wb-rail-head button:hover { color: var(--wb-ink); text-decoration: underline; }
.wb-rail-head button[disabled] { opacity: 0.45; cursor: default; text-decoration: none; }

.wb-facet { margin-bottom: var(--wb-4); }
.wb-facet-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--wb-2); margin-bottom: var(--wb-1); }
.wb-facet-head h3 { margin: 0; font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wb-dim); }
.wb-facet-head button { font: inherit; font-size: 0.7rem; color: var(--wb-glow); background: none; border: 0; cursor: pointer; padding: 0; }
.wb-facet-head button:hover { text-decoration: underline; }
.wb-chips { display: flex; flex-direction: column; gap: 1px; }
.wb-chip {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--wb-2); width: 100%;
  background: none; border: 0; border-radius: 2px; color: var(--wb-ink); text-align: left; cursor: pointer;
  padding: 0.26rem 0.4rem 0.26rem 0.5rem; font: inherit;
  transition: background 110ms var(--wb-ease), color 110ms var(--wb-ease);
}
.wb-chip:hover { background: var(--wb-panel); }
.wb-chip .wb-chip-label { display: flex; align-items: baseline; gap: 0.4rem; min-width: 0; }
.wb-chip .wb-chip-mark { width: 0.5rem; height: 0.5rem; border: 1px solid var(--wb-line); border-radius: 1px; flex: none; }
.wb-chip .wb-chip-n { font-family: var(--wb-data); font-variant-numeric: tabular-nums; font-size: 0.76rem; color: var(--wb-dim); }
.wb-chip[aria-pressed="true"] { background: var(--wb-tint-2); color: #fff; }
.wb-chip[aria-pressed="true"] .wb-chip-mark { background: var(--wb-glow); border-color: var(--wb-glow); }
.wb-chip[aria-pressed="true"] .wb-chip-n { color: var(--wb-ink); }
.wb-chip[data-empty="true"] { color: var(--wb-dim); }
.wb-empty-note { margin: 0; padding: 0 0.4rem; font-size: 0.78rem; color: var(--wb-dim); }

/* --- data grid ---------------------------------------------------------- */
.wb-scroll {
  overflow: auto; max-height: clamp(18rem, 52vh, 36rem);
  border: 1px solid var(--wb-line); border-radius: 3px; background: var(--wb-panel-2);
}
.wb-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.wb-table th, .wb-table td {
  text-align: left; padding: 0.42rem 0.5rem; border-bottom: 1px solid var(--wb-line-soft); vertical-align: middle;
}
.wb-table tbody tr { background: var(--wb-panel-2); }
.wb-table thead th {
  position: sticky; top: 0; z-index: 2; background: var(--wb-panel); color: var(--wb-ink);
  font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.085em;
  white-space: nowrap; border-bottom: 1px solid var(--wb-line);
}
.wb-table th button {
  display: inline-flex; align-items: center; gap: 0.3rem; font: inherit; letter-spacing: inherit;
  text-transform: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0;
}
.wb-table th button:hover { color: var(--wb-glow); }
.wb-table .wb-sort-icon { width: 9px; height: 11px; fill: currentColor; stroke: none; opacity: 0.35; }
.wb-table th[aria-sort] { color: var(--wb-glow); }
.wb-table th[aria-sort] .wb-sort-icon { opacity: 1; }
.wb-table th button:hover .wb-sort-icon { opacity: 0.7; }

.wb-table tbody tr { cursor: pointer; transition: background 110ms var(--wb-ease); }
.wb-table tbody tr:hover { background: var(--wb-panel); }
.wb-table tbody tr[aria-selected="true"] { background: var(--wb-tint-2); }
.wb-table tbody tr[aria-selected="true"] .wb-id { color: var(--wb-glow); }
.wb-table .wb-id {
  font-family: var(--wb-data); font-size: 0.76rem; white-space: nowrap;
  position: sticky; left: 0; background: inherit; border-right: 1px solid var(--wb-line-soft);
}
.wb-table thead th:first-child { left: 0; z-index: 3; }
.wb-table .wb-num { font-family: var(--wb-data); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.wb-table thead th.wb-num { text-align: right; }
.wb-table thead th.wb-num button { flex-direction: row-reverse; }
.wb-table .wb-title { min-width: 16rem; max-width: 46ch; }
.wb-table .wb-title-text {
  display: block; line-height: 1.4;
}
.wb-table .wb-agency { max-width: 14ch; font-size: 0.8rem; }
.wb-table td.wb-place {
  max-width: 12ch; color: var(--wb-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wb-zero { color: var(--wb-dim); }
/* the grid is tight by design: the last column does not need full padding */
.wb-table th:last-child, .wb-table td:last-child { padding-right: var(--wb-1); }
.wb-redacted { color: var(--wb-glow); font-weight: 600; }
.wb-colnote { display: none; margin: 0; padding: var(--wb-2) var(--wb-3); font-size: 0.78rem;
  color: var(--wb-dim); border-top: 1px solid var(--wb-line-soft); }
@media (max-width: 1100px) {
  .wb-table .wb-col-opt { display: none; }
  .wb-colnote { display: block; }
}

/* --- empty state -------------------------------------------------------- */
.wb-empty-box { border: 1px dashed var(--wb-line); border-radius: 3px; padding: var(--wb-5); text-align: center; }
.wb-empty-box p { margin: 0 0 var(--wb-3); color: var(--wb-dim); }
.wb-empty-box button {
  font: inherit; font-size: 0.84rem; color: var(--wb-ink); background: var(--wb-panel);
  border: 1px solid var(--wb-line); border-radius: 3px; padding: 0.4rem 0.8rem; cursor: pointer;
}
.wb-empty-box button:hover { background: var(--wb-tint); }
.wb-empty { color: var(--wb-dim); }

/* --- detail panel ------------------------------------------------------- */
.wb-detail {
  min-width: 0;
  border: 1px solid var(--wb-line); border-radius: 3px; background: var(--wb-panel-2);
  padding: var(--wb-4) var(--wb-5) var(--wb-5); font-size: 0.86rem;
}
.wb-detail-body {
  display: grid; grid-template-columns: minmax(14rem, 17rem) minmax(0, 1fr);
  gap: var(--wb-5); align-items: start;
}
.wb-detail-col { min-width: 0; }
.wb-detail-col:last-child { grid-column: 1 / -1; border-top: 1px solid var(--wb-line); padding-top: var(--wb-4); }
@media (max-width: 1100px) {
  .wb-detail-body { grid-template-columns: minmax(0, 1fr); }
}
.wb-detail-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--wb-3); margin-bottom: var(--wb-2); }
.wb-detail-head .wb-eyebrow { margin: 0; font-family: var(--wb-data); font-size: 0.72rem; color: var(--wb-dim); }
.wb-detail h2 { font-size: 1.12rem; line-height: 1.25; margin: 0 0 var(--wb-3); }
.wb-close {
  flex: none; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font: inherit;
  background: none; border: 1px solid var(--wb-line); border-radius: 3px; color: var(--wb-dim); cursor: pointer;
}
.wb-close:hover { color: var(--wb-ink); background: var(--wb-tint); }
.wb-close svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.wb-facts { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 0; margin: 0 0 var(--wb-4); border-top: 1px solid var(--wb-line-soft); }
.wb-facts dt {
  font-size: 0.68rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--wb-dim);
  padding: 0.34rem 0; border-bottom: 1px solid var(--wb-line-soft);
}
.wb-facts dd { margin: 0; padding: 0.34rem 0; border-bottom: 1px solid var(--wb-line-soft); overflow-wrap: anywhere; }
.wb-facts dd.wb-data { font-family: var(--wb-data); font-size: 0.8rem; }
.wb-src { margin: 0 0 var(--wb-4); font-size: 0.78rem; }
.wb-src a { color: var(--wb-glow); text-underline-offset: 2px; }
.wb-src a:hover { color: var(--wb-ink); }
.wb-rel { margin-top: var(--wb-4); }
.wb-rel h3, .wb-rel > summary { margin: 0 0 var(--wb-2); font-size: 0.9rem; font-weight: 600; color: var(--wb-ink); }
.wb-rel > summary { cursor: pointer; min-height: 2.75rem; padding: var(--wb-3) 0; border-bottom: 1px solid var(--wb-line-soft); }
.wb-rel ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.wb-rel li { display: flex; flex-direction: column; gap: var(--wb-1); padding: var(--wb-2) 0; border-bottom: 1px solid var(--wb-line-soft); }
.wb-rel li button {
  font: inherit; font-size: 0.83rem; text-align: left; background: none; border: 0; color: var(--wb-ink);
  cursor: pointer; padding: 0.22rem 0.4rem; border-radius: 2px; flex: 1 1 auto; min-width: 0;
}
.wb-rel li button:hover { background: var(--wb-tint); color: #fff; }
.wb-rel li span { font-family: var(--wb-data); font-size: 0.8rem; color: var(--wb-dim); padding: 0 0.4rem; overflow-wrap: anywhere; }
.wb-rel-head {
  margin: 0 0 var(--wb-2); font-size: 0.68rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.09em; color: var(--wb-dim);
}
.wb-desc {
  white-space: pre-wrap; line-height: 1.65; margin: 0; font-size: 0.94rem; color: var(--wb-ink); max-width: 68ch;
}

/* --- linked groups and cross-references --------------------------------- */
.wb-note { font-size: 0.8rem; color: var(--wb-dim); max-width: 82ch; margin: 0 0 var(--wb-4); line-height: 1.6; }
.wb-note b { color: var(--wb-ink); font-weight: 600; }
.wb-group-label { display: block; font-size: 0.86rem; margin: 0 0 var(--wb-2); }
.wb-group-picker { width: 100%; min-width: 0; min-height: 2.75rem; margin-bottom: var(--wb-3); padding: var(--wb-2); font: inherit; font-size: 0.86rem; color: var(--wb-ink); background: var(--wb-panel); border: 1px solid var(--wb-line); border-radius: 3px; }

/* the one data mark on the page: a proportional bar, used only where a
   distribution is the point (group sizes) */
.wb-track { display: block; height: 4px; border-radius: 2px; background: var(--wb-line-soft); overflow: hidden; }
.wb-fill { display: block; height: 100%; background: var(--wb-glow); opacity: 0.6; }

/* --- summary view ------------------------------------------------------- */
.wb-sub { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--wb-ink); margin: var(--wb-5) 0 var(--wb-2); }
.wb-sub:first-child { margin-top: 0; }
.wb-table td.wb-bar-cell { width: 22%; min-width: 3rem; }
/* the summary is a dashboard of distributions, not one long ribbon of tables */
.wb-summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 23rem), 1fr)); gap: var(--wb-4); align-items: start; }
.wb-summary-scope { grid-column: 1 / -1; }
.wb-block { min-width: 0; border: 1px solid var(--wb-line); border-radius: 3px; background: var(--wb-panel-2); padding: var(--wb-4); }
.wb-block.wide { grid-column: 1 / -1; }
.wb-block .wb-sub { margin: 0 0 var(--wb-3); }
.wb-block .wb-table { font-size: 0.83rem; table-layout: fixed; }
.wb-block .wb-table th, .wb-block .wb-table td { padding: 0.3rem 0.35rem; }
.wb-block .wb-table thead th { position: static; background: none; border-bottom: 1px solid var(--wb-line); white-space: normal; letter-spacing: 0.03em; }
.wb-block .wb-table thead th:first-child { width: 46%; }
.wb-block .wb-table td { overflow-wrap: anywhere; white-space: normal; }
.wb-block .wb-table td.wb-bar-cell { min-width: 0; width: auto; }
.wb-block.wide .wb-table thead th:first-child { width: 42%; }
.wb-block .wb-table tbody tr { cursor: default; }
.wb-block .wb-table tbody tr:hover { background: var(--wb-panel-2); }
.wb-rank { width: 100%; }
.wb-scroll > .wb-sub, .wb-scroll > .wb-note { padding: var(--wb-3); }
.wb-rel-head, .wb-sub, .wb-facet-head h3, .wb-rail-head h2, .wb-table thead th, .wb-facts dt { font-size: 0.78rem; }

@media (max-width: 900px) {
  .workbench-page .findings-main { width: calc(100% - 24px); }
  .wb-bar { position: static; gap: var(--wb-2); }
  .wb-field { flex-basis: 100%; min-width: 0; }
  .wb-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; }
  .wb-seg button { padding: var(--wb-2) var(--wb-1); font-size: 0.8rem; overflow-wrap: anywhere; }
  .wb-filter-toggle { min-height: 2.75rem; }
  .wb-count { margin: 0 0 0 auto; }
  .wb-seg { order: -2; }
  .wb-field { order: -1; }
  .wb-chip, .wb-rail-head button, .wb-facet-head button { min-height: 2.75rem; }
  .wb-active-chip button { min-width: 2.75rem; min-height: 2.75rem; }
  .wb-rail { position: static; }
  .wb-detail { padding: var(--wb-4); }
  .wb-detail-head .wb-eyebrow { overflow-wrap: anywhere; font-size: 0.8rem; }
  #wb-record-title, .wb-main, .wb-detail { scroll-margin-top: calc(var(--wb-sticky) + 1rem); }
  .wb-facts { grid-template-columns: 7.5rem minmax(0, 1fr); }
  .wb-rel li button { min-height: 2.75rem; }
}