/* Bias-study data browser — the released forced-choice corpus, read live from GitHub.
   Sibling of barometer/barometer.css and the-judge/judge.css: dark plates, the tick ruler.
   The one figure on the page is the answer sheet: 32 marks on a four-step scale, a midline
   through every row. Above the line is agree, below is disagree; distance is conviction.
   Nothing here carries a number the fetched records did not. */

.bb-page {
  --bb-plate: linear-gradient(180deg, #17171c 0%, #111116 100%);
  --bb-plate-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 2px 14px rgba(0, 0, 0, 0.45);
  --bb-tick: #5a5a6a;
  --bb-tick-strong: #8e8ea0;
  --bb-amber: var(--signal-amber);
  --bb-sd: #7fa9e0;   /* strongly disagree: bright steel */
  --bb-d:  #4c688c;   /* disagree: dim steel */
  --bb-a:  #a2483d;   /* agree: dim red */
  --bb-sa: #ff4a3a;   /* strongly agree: bright red */
  --bb-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;
  --bb-cell: 14px;    /* one item column */
  --bb-gap: 3px;      /* between items */
  --bb-pair: 8px;     /* between mirrored pairs */
}
.bb-page .bb-num { font-family: var(--bb-mono); font-variant-numeric: tabular-nums; }

/* ── readout plate: the corpus, counted ── */
.bb-readout {
  position: relative; margin: 1.8rem 0 1.4rem; padding: 1.15rem 1.4rem 1.1rem;
  background: var(--bb-plate); border: 1px solid #3a3a44; border-left: 3px solid #CC0000;
  border-radius: 4px; box-shadow: var(--bb-plate-shadow), 0 0 22px rgba(204, 0, 0, 0.06);
}
.bb-readout::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; opacity: .8;
  background: repeating-linear-gradient(90deg, var(--bb-tick) 0 1px, transparent 1px 8px) left top / 100% 4px no-repeat;
}
.bb-counts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 0; padding: 0; list-style: none; }
.bb-counts li { display: flex; flex-direction: column; gap: .15rem; }
.bb-counts b { font: 700 1.35rem/1.1 var(--bb-mono); color: #fff; font-variant-numeric: tabular-nums; }
.bb-counts span { font-size: .78rem; color: #8a8a96; line-height: 1.35; }
.bb-counts li.bb-sub b { font-size: 1rem; color: #c8c8d0; }
.bb-source { font: .76rem/1.6 var(--bb-mono); color: #8a8a96; margin: .9rem 0 0; }
.bb-source a { color: #c8c8d0; }
.bb-source a:hover { color: #ff2222; }
.bb-source code { color: #c8c8d0; background: none; padding: 0; font-size: inherit; }
.bb-check { font: .74rem/1.5 var(--bb-mono); color: #8a8a96; margin: .35rem 0 0; }
.bb-check.ok { color: #9db98b; }
.bb-check.bad { color: var(--bb-amber); }

/* ── the earlier corpus, linked where it cannot be missed ── */
.bb-may {
  display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: baseline;
  margin: 0 0 1.6rem; padding: .8rem 1.1rem;
  background: #131317; border: 1px solid #2a2a33; border-left: 3px solid #55556a; border-radius: 3px;
}
.bb-may b { font: 700 .62rem/1 var(--bb-mono); letter-spacing: .16em; text-transform: uppercase; color: #8e8ea0; }
.bb-may p { margin: 0; flex: 1 1 22rem; font-size: .92rem; color: #c8c8d0; line-height: 1.55; }
.bb-may a { color: #ff4d4d; font-weight: 600; }

/* ── errors and loading ── */
.bb-err {
  display: none; margin: 0 0 1rem; padding: .8rem 1rem; border: 1px solid #6a2020;
  border-left: 3px solid #CC0000; background: #1a0e0e; border-radius: 3px;
  font-size: .9rem; color: #e8e8f0; line-height: 1.55;
}
.bb-err.show { display: block; }
.bb-err a { color: #ff4d4d; }
.bb-progress { display: none; align-items: center; gap: .8rem; margin: .6rem 0 0; font: .74rem var(--bb-mono); color: #8a8a96; }
.bb-progress.show { display: flex; }
.bb-progress i { flex: 1 1 8rem; height: 4px; background: #24242c; border-radius: 2px; overflow: hidden; position: relative; }
.bb-progress i b { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: #CC0000; transition: width .2s linear; }

/* ── view switch + controls ── */
.bb-views { display: flex; gap: 0; margin: 0 0 1rem; border-bottom: 1px solid #3a3a44; }
.bb-views button {
  appearance: none; background: none; border: none; border-bottom: 2px solid transparent;
  margin-bottom: -1px; padding: .55rem 1rem .6rem; cursor: pointer;
  font: 700 .95rem Inter, system-ui, sans-serif; letter-spacing: -.01em; color: #8a8a96;
}
.bb-views button:hover { color: #e8e8f0; }
.bb-views button[aria-selected="true"] { color: #e8e8f0; border-bottom-color: #CC0000; }
.bb-views button:focus-visible { outline: 2px solid #CC0000; outline-offset: -2px; }

.bb-controls { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: flex-end; margin: 0 0 1rem; }
.bb-controls label { display: flex; flex-direction: column; gap: .3rem; font: .68rem var(--bb-mono); letter-spacing: .06em; color: #8a8a96; min-width: 0; max-width: 100%; }
.bb-controls label[hidden] { display: none; }
.bb-controls select {
  background: #0c0c0f; color: #e8e8f0; border: 1px solid #3a3a44; border-radius: 3px;
  padding: .42rem .5rem; font: .8rem var(--bb-mono); min-width: 0; width: 100%; max-width: 100%;
}
.bb-controls .bb-itemsel { flex: 1 1 100%; }
.bb-controls select:hover { border-color: #55556a; }
.bb-controls select:focus-visible { outline: none; border-color: #881111; box-shadow: 0 0 0 2px rgba(204, 0, 0, .12); }
.bb-controls .bb-model { flex: 1 1 18rem; }
.bb-arms { display: flex; flex-wrap: wrap; gap: .35rem .5rem; }
.bb-arms label { flex-direction: row; align-items: center; gap: .3rem; cursor: pointer; padding: .3rem .5rem; border: 1px solid #3a3a44; border-radius: 3px; color: #c8c8d0; }
.bb-arms label[hidden] { display: none; }
.bb-arms label:hover { border-color: #55556a; }
.bb-arms label.on { border-color: #881111; background: rgba(204, 0, 0, .08); color: #e8e8f0; }
.bb-arms input { margin: 0; accent-color: #CC0000; }
.bb-arms .bb-more { color: #8a8a96; }
.bb-armsbtn { align-self: flex-start; margin-top: .3rem; appearance: none; background: none; border: 1px solid #3a3a44; border-radius: 3px; color: #c8c8d0; font: .64rem var(--bb-mono); padding: .15rem .45rem; cursor: pointer; }
.bb-armsbtn:hover { border-color: #55556a; color: #fff; }
.bb-empty { margin: 0; padding: 1rem .9rem; font-size: .9rem; color: #8a8a96; line-height: 1.55; }

/* ── the sheet: one row per run, 32 marks on a four-step scale ── */
.bb-sheetwrap { overflow-x: auto; border: 1px solid #3a3a44; border-radius: 4px; background: var(--bb-plate); box-shadow: var(--bb-plate-shadow); }
.bb-sheet { min-width: max-content; padding: .2rem 0 .6rem; }
.bb-row, .bb-head { display: grid; grid-template-columns: 11rem max-content 8.5rem 3rem; align-items: center; column-gap: .9rem; }
.bb-head { position: sticky; top: 0; z-index: 3; background: #17171c; border-bottom: 1px solid var(--bb-tick-strong); padding: .5rem 0 .3rem; }
.bb-head > span:first-child, .bb-row > .bb-lab { position: sticky; left: 0; z-index: 2; background: #141418; padding: 0 .6rem 0 .8rem; align-self: stretch; display: flex; align-items: center; }
.bb-head > span:first-child { font: .66rem var(--bb-mono); color: #6f6f7c; letter-spacing: .06em; }
.bb-hcells { display: flex; gap: var(--bb-gap); align-items: flex-end; }
.bb-hcells b {
  display: block; width: var(--bb-cell); text-align: center; font: 500 .58rem/1.2 var(--bb-mono);
  color: #8e8ea0; cursor: default; padding-bottom: 2px; border-bottom: 1px solid var(--bb-tick);
}
.bb-hcells b.crit { color: #b8b8c4; }
.bb-hcells b.pair-end { margin-right: calc(var(--bb-pair) - var(--bb-gap)); }
.bb-hcells b:hover, .bb-hcells b.lit { color: #fff; border-bottom-color: #fff; }
.bb-hstat { display: flex; gap: .55rem; font: .58rem var(--bb-mono); color: #6f6f7c; letter-spacing: .04em; }
.bb-hstat span { width: 2.2rem; text-align: right; }

.bb-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; padding: .85rem .8rem .35rem; border-top: 1px solid #24242c; }
.bb-group:first-of-type { border-top: none; }
.bb-group b { font: 800 .92rem Inter, system-ui, sans-serif; color: #e8e8f0; letter-spacing: -.01em; }
.bb-group b i { font-style: normal; font: 700 .72rem var(--bb-mono); color: var(--accent-text, #ff4545); margin-right: .5rem; }
.bb-group span { font: .7rem var(--bb-mono); color: #8a8a96; }
.bb-group button { appearance: none; background: none; border: 1px solid #3a3a44; border-radius: 3px; color: #c8c8d0; font: .64rem var(--bb-mono); padding: .15rem .45rem; cursor: pointer; }
.bb-group button:hover { border-color: #55556a; color: #fff; }
.bb-group button[aria-expanded="true"] { border-color: #881111; color: #fff; }
.bb-prompt { display: none; grid-column: 1 / -1; margin: .2rem .8rem .5rem; padding: .6rem .8rem; background: #0c0c0f; border: 1px solid #2a2a33; border-radius: 3px; font-size: .84rem; line-height: 1.55; color: #c8c8d0; max-width: 72ch; }
.bb-prompt.show { display: block; }
.bb-prompt em { color: #8a8a96; font-style: normal; font-family: var(--bb-mono); font-size: .68rem; display: block; margin-bottom: .2rem; }

.bb-row { min-height: 30px; }
.bb-row:hover .bb-lab { background: #1c1c22; }
.bb-row.ref .bb-lab { box-shadow: inset 3px 0 0 #CC0000; }
.bb-row.open .bb-lab { background: #1c1c22; }
.bb-lab { gap: .5rem; font: .7rem var(--bb-mono); color: #b8b8c4; white-space: nowrap; }
.bb-lab button { appearance: none; background: none; border: none; padding: 0; margin: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.bb-lab button:hover { color: #fff; }
.bb-lab button:focus-visible { outline: 2px solid #CC0000; outline-offset: 1px; }
.bb-lab .bb-ref { font-size: .58rem; letter-spacing: .1em; text-transform: uppercase; color: #6f6f7c; border: 1px solid #3a3a44; border-radius: 2px; padding: .1rem .3rem; }
.bb-lab .bb-ref:hover { color: #fff; border-color: #55556a; }
.bb-row.ref .bb-lab .bb-ref { color: #fff; background: #CC0000; border-color: #CC0000; }
.bb-lab .bb-order { color: #6f6f7c; }
.bb-lab .bb-state { color: var(--bb-amber); }

.bb-cells { position: relative; display: flex; gap: var(--bb-gap); height: 24px; }
.bb-cells::before { content: ''; position: absolute; left: 0; right: 0; top: 12px; height: 1px; background: var(--bb-tick-strong); opacity: .7; }
.bb-cells i {
  position: relative; display: block; width: var(--bb-cell); height: 24px; flex: none;
  background:
    linear-gradient(var(--bb-tick), var(--bb-tick)) 50% 3px / 4px 1px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) 50% 8px / 4px 1px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) 50% 15px / 4px 1px no-repeat,
    linear-gradient(var(--bb-tick), var(--bb-tick)) 50% 20px / 4px 1px no-repeat;
}
.bb-cells i.pair-end { margin-right: calc(var(--bb-pair) - var(--bb-gap)); }
.bb-cells i::after { content: ''; position: absolute; left: 3px; width: 8px; height: 4px; border-radius: 1px; display: none; }
.bb-cells i.p3::after { display: block; top: 1px; background: var(--bb-sa); }
.bb-cells i.p2::after { display: block; top: 6px; background: var(--bb-a); }
.bb-cells i.p1::after { display: block; top: 13px; background: var(--bb-d); }
.bb-cells i.p0::after { display: block; top: 18px; background: var(--bb-sd); }
.bb-cells i.miss::after { display: block; top: 10px; left: 5px; width: 4px; height: 4px; border-radius: 50%; background: none; border: 1px solid #55556a; }
.bb-cells i.flip::after { box-shadow: 0 0 0 1px #fff, 0 0 5px rgba(255, 255, 255, .5); }
.bb-cells i.endp::after { box-shadow: 0 0 0 1px var(--bb-amber); }
.bb-cells i.lit { background-color: rgba(255, 255, 255, .06); }
.bb-cells i:hover { background-color: rgba(255, 255, 255, .09); }
.bb-cells.dead { align-items: center; padding-left: .3rem; font: .66rem var(--bb-mono); color: #8a8a96; letter-spacing: .04em; }
.bb-cells.dead::before { background: repeating-linear-gradient(90deg, #3a3a44 0 6px, transparent 6px 12px); opacity: 1; }
.bb-cells.dead span { position: relative; background: #141418; padding: 0 .4rem; }
.bb-cells.dead.refused span { color: var(--bb-amber); }

.bb-stat { display: flex; gap: .55rem; font: .72rem var(--bb-mono); color: #c8c8d0; font-variant-numeric: tabular-nums; }
.bb-stat span { width: 2.2rem; text-align: right; }
.bb-stat .flips { color: #fff; }
.bb-stat .endps { color: var(--bb-amber); }
.bb-stat .zero { color: #55556a; }
.bb-src { font: .62rem var(--bb-mono); color: #8a8a96; letter-spacing: .06em; text-decoration: none; padding-right: .8rem; }
.bb-src:hover { color: #ff2222; }

.bb-caption { min-height: 2.6rem; margin: .7rem 0 .6rem; padding: .55rem .8rem; font-size: .86rem; line-height: 1.5; color: #c8c8d0; background: #131317; border: 1px solid #2a2a33; border-radius: 3px; }
.bb-caption b { color: #e8e8f0; font-family: var(--bb-mono); font-weight: 600; font-size: .78rem; }
.bb-caption .ans { font-family: var(--bb-mono); font-size: .76rem; }
.bb-caption .ans.side0 { color: var(--bb-sd); }
.bb-caption .ans.side1 { color: var(--bb-sa); }
.bb-caption em { color: #8a8a96; font-style: normal; }

/* ── row detail: the record itself ── */
.bb-detail { grid-column: 1 / -1; margin: .3rem .8rem .8rem; padding: .9rem 1rem 1rem; background: #0c0c0f; border: 1px solid #2a2a33; border-left: 3px solid #CC0000; border-radius: 3px; max-width: calc(100vw - 4rem); }
.bb-meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .35rem 1rem; margin: 0 0 .7rem; padding: 0; list-style: none; font: .72rem/1.5 var(--bb-mono); color: #8a8a96; }
.bb-meta b { color: #e8e8f0; font-weight: 500; }
.bb-detail details { margin: .5rem 0 0; }
.bb-detail summary { cursor: pointer; font: .72rem var(--bb-mono); color: #c8c8d0; letter-spacing: .04em; }
.bb-detail summary:hover { color: #fff; }
.bb-detail pre { margin: .4rem 0 0; padding: .7rem .8rem; background: #111115; border: 1px solid #2a2a33; border-radius: 3px; font: .76rem/1.55 var(--bb-mono); color: #c8c8d0; white-space: pre-wrap; word-break: break-word; max-height: 24rem; overflow: auto; }
.bb-detail .bb-open-src { display: inline-block; margin-top: .7rem; font: .74rem var(--bb-mono); color: #ff4d4d; }

/* ── legend ── */
.bb-legend { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; margin: .8rem 0 0; padding: 0; list-style: none; font: .7rem var(--bb-mono); color: #8a8a96; }
.bb-legend li { display: flex; align-items: center; gap: .45rem; }
.bb-legend i { display: inline-block; width: 8px; height: 4px; border-radius: 1px; }
.bb-legend i.k3 { background: var(--bb-sa); }
.bb-legend i.k2 { background: var(--bb-a); }
.bb-legend i.k1 { background: var(--bb-d); }
.bb-legend i.k0 { background: var(--bb-sd); }
.bb-legend i.kf { background: #55556a; box-shadow: 0 0 0 1px #fff; }
.bb-legend i.ke { background: #55556a; box-shadow: 0 0 0 1px var(--bb-amber); }
.bb-legend i.km { width: 4px; height: 4px; border-radius: 50%; border: 1px solid #55556a; }

/* ── item view: one proposition, every model ── */
.bb-item { margin: 0 0 1rem; padding: .9rem 1.1rem; background: var(--bb-plate); border: 1px solid #3a3a44; border-radius: 4px; box-shadow: var(--bb-plate-shadow); }
.bb-item p { margin: 0; font-size: .98rem; line-height: 1.55; color: #e8e8f0; }
.bb-item p + p { margin-top: .5rem; color: #b8b8c4; font-size: .92rem; }
.bb-item b { font: 600 .68rem var(--bb-mono); letter-spacing: .06em; color: var(--accent-text, #ff4545); margin-right: .5rem; }
.bb-item p + p b { color: #8e8ea0; }
.bb-item small { display: block; margin-top: .55rem; font: .68rem var(--bb-mono); color: #6f6f7c; }
.bb-iwrap { overflow-x: auto; border: 1px solid #3a3a44; border-radius: 4px; background: var(--bb-plate); box-shadow: var(--bb-plate-shadow); }
.bb-itable { min-width: max-content; padding: 0 0 .5rem; }
.bb-irow, .bb-ihead { display: grid; grid-template-columns: 15rem repeat(var(--bb-ncond, 4), 5.8rem); column-gap: .6rem; align-items: center; }
.bb-ihead { position: sticky; top: 0; z-index: 3; background: #17171c; border-bottom: 1px solid var(--bb-tick-strong); padding: .5rem 0 .35rem; }
.bb-ihead > span, .bb-irow > .bb-ilab { position: sticky; left: 0; z-index: 2; background: #141418; padding: 0 .6rem 0 .8rem; align-self: stretch; display: flex; align-items: center; }
.bb-ihead > span { font: .66rem var(--bb-mono); color: #6f6f7c; letter-spacing: .06em; }
.bb-ihead > b { font: 700 .72rem var(--bb-mono); color: #e8e8f0; }
.bb-ihead > b small { display: block; font: .58rem var(--bb-mono); color: #6f6f7c; font-weight: 400; margin-top: .1rem; }
.bb-irow { min-height: 42px; border-top: 1px solid #1c1c22; }
.bb-irow.pooled { background: #131317; border-top: none; min-height: 46px; }
.bb-irow:hover .bb-ilab { background: #1c1c22; }
.bb-ilab { font: .68rem var(--bb-mono); color: #b8b8c4; white-space: nowrap; }
.bb-ilab button { appearance: none; background: none; border: none; padding: 0; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.bb-ilab button:hover { color: #fff; }
.bb-ilab button:focus-visible { outline: 2px solid #CC0000; outline-offset: 1px; }
.bb-ilab small { display: block; color: #6f6f7c; font-size: .58rem; margin-top: .1rem; }
.bb-hist { position: relative; display: grid; grid-template-rows: repeat(4, 5px); row-gap: 2px; padding: 3px 0; width: 4rem; }
.bb-hist::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bb-tick-strong); opacity: .7; }
.bb-hist i { display: block; height: 5px; width: 0; border-radius: 1px; }
.bb-hist i.k3 { background: var(--bb-sa); }
.bb-hist i.k2 { background: var(--bb-a); }
.bb-hist i.k1 { background: var(--bb-d); }
.bb-hist i.k0 { background: var(--bb-sd); }
.bb-hist.mirror { opacity: .55; }
.bb-hist.empty::after { content: attr(data-note); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: .58rem var(--bb-mono); color: #6f6f7c; background: #141418; padding: 0 .3rem; }
.bb-hist.empty.refused::after { color: var(--bb-amber); }
.bb-hpair { display: flex; flex-direction: column; gap: 2px; }
.bb-hn { position: absolute; left: calc(100% + .3rem); top: 50%; transform: translateY(-50%); font: .56rem var(--bb-mono); color: #55556a; }

/* ── outro: the page text under the instrument ── */
.bb-outro { margin-top: 2.4rem; max-width: 76ch; }
.bb-outro h2 { font: 800 1.35rem/1.2 Inter, system-ui, sans-serif; letter-spacing: -.02em; color: #e8e8f0; margin: 2rem 0 .7rem; padding: 0 0 .8rem; border: none; position: relative; }
.bb-outro h2::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 161px; height: 11px;
  background:
    repeating-linear-gradient(90deg, var(--bb-tick-strong) 0 1px, transparent 1px 40px) left bottom / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--bb-tick) 0 1px, transparent 1px 8px) left bottom / 100% 5px no-repeat,
    linear-gradient(#CC0000, #CC0000) left bottom / 40px 2px no-repeat;
}
.bb-outro p, .bb-outro li { line-height: 1.65; }
.bb-outro code { font-family: var(--bb-mono); font-size: .86em; }

@media (max-width: 768px) {
  .bb-page { --bb-cell: 13px; }
  .bb-counts { gap: .5rem 1.2rem; }
  .bb-counts b { font-size: 1.15rem; }
  .bb-readout { padding: 1rem 1rem .9rem; }
  .bb-row, .bb-head { grid-template-columns: 7.4rem max-content 8rem 2.6rem; column-gap: .6rem; }
  .bb-lab { font-size: .64rem; padding-left: .5rem !important; }
  .bb-lab .bb-order { display: none; }
  .bb-detail { margin: .3rem .5rem .8rem; padding: .7rem .7rem .8rem; max-width: calc(100vw - 3.2rem); }
  .bb-irow, .bb-ihead { grid-template-columns: 9rem repeat(var(--bb-ncond, 4), 5.8rem); }
  .bb-ilab { font-size: .62rem; }
}
@media (prefers-reduced-motion: reduce) {
  .bb-progress i b { transition: none; }
}