/* =============================================================================
   SATQUERY — DOCUMENT / ARCHIVE PAGES
   Benchmark Lab · Research Ledger · References · The Lab · Atlas
   ============================================================================= */

/* ── document head ───────────────────────────────────────────────────────── */
.dochead {
  padding: clamp(44px, 7.5vw, 104px) var(--gut) clamp(26px, 4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.dochead__h {
  font-size: clamp(36px, 6.2vw, 86px);
  margin: 14px 0 20px;
  font-variation-settings: 'opsz' 144, 'WONK' 1;
}
.dochead__l { max-width: 66ch; margin: 0; }

.dochead__stats {
  display: flex; flex-wrap: wrap; gap: 1px;
  background: var(--rule); border: 1px solid var(--rule);
  margin-top: clamp(24px, 3.6vw, 42px);
}
.dochead__stats .st { flex: 1 1 130px; background: var(--surface-1); padding: 13px 16px; }
.dochead__stats .st b {
  display: block; font-family: var(--f-mono); font-size: clamp(18px, 2vw, 24px);
  font-weight: 400; color: var(--ink-900); line-height: 1.1; font-variant-numeric: tabular-nums;
}
.dochead__stats .st span { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-400); }
.dochead__stats .st.is-signal b { color: var(--ochre); }
.dochead__stats .st.is-amber b { color: var(--ochre); }
.dochead__stats .st.is-verd b { color: var(--verd); }
.dochead__stats .st.is-oxide b { color: var(--oxide); }

/* ── flow strip (research) ───────────────────────────────────────────────── */
.flowstrip { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 30px; }
.flowstrip .fs__i {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-500); border: 1px solid var(--rule-2); padding: 5px 9px;
}
.flowstrip .fs__i.is-dec { color: var(--ochre); border-color: var(--ochre-rule); }
.flowstrip .fs__a { color: var(--ink-400); font-size: 10px; }

/* ── filters ─────────────────────────────────────────────────────────────── */
.expfilter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 24px; }
.fbtn {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase;
  color: var(--ink-500); background: none; border: 1px solid var(--rule-2);
  padding: 6px 11px; cursor: pointer; transition: all 0.25s var(--e-out);
}
.fbtn:hover { color: var(--ink-900); border-color: var(--rule-3); }
.fbtn.is-on { color: var(--surface-2); background: var(--ink-900); border-color: var(--ink-900); }

/* ── benchmark timeline ──────────────────────────────────────────────────── */
/* Seven steps. The old rule asked for grid-auto-columns: 1fr but floored every
   cell at min-width: 158px, so the strip demanded 7x158 + 6x1px gap + 2px
   border = 1114px of intrinsic width. Below a ~1218px viewport the container is
   narrower than that, so the seventh cell (.is-now — the current verification
   step) was pushed outside the box behind an overflow-x: auto scrollbar with no
   affordance. The 158px floor is the defect, so it is gone: the columns are now
   minmax(0, 1fr) and shrink, and the strip reflows rather than scrolls. */
.btl {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 1px; background: var(--rule); border: 1px solid var(--rule);
}
.btl__i { background: var(--surface-1); padding: 16px 15px 18px; min-width: 0; position: relative; }
@media (max-width: 1180px) {
  /* two steps per row; an odd final step spans the row so the last line is not
     left half-empty against the hairline background */
  .btl { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btl__i:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 720px) {
  .btl { grid-template-columns: minmax(0, 1fr); }
}
.btl__i .d { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; color: var(--ink-400); text-transform: uppercase; }
.btl__i h4 { font-family: var(--f-display); font-variation-settings: 'opsz' 48; font-size: 17px; font-weight: 400; margin: 8px 0 8px; }
.btl__i p { font-size: 12px; color: var(--ink-500); margin: 0; line-height: 1.5; }
.btl__i .mk { position: absolute; left: 15px; top: -1px; width: 22px; height: 2px; background: var(--ochre-rule); }
.btl__i.is-now .mk { background: var(--ochre); }
.btl__i.is-now { background: var(--surface-2); }

/* ── experiment cards ────────────────────────────────────────────────────── */
.exps { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.exp { background: var(--surface-1); display: flex; flex-direction: column; }
.exp__hd {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; border-bottom: 1px solid var(--rule);
}
.exp__hd .ds { font-family: var(--f-display); font-variation-settings: 'opsz' 72; font-size: 21px; margin: 0; }
.exp__hd .tk { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); }
.exp__hd .chip { margin-left: auto; }
.exp__body { display: grid; grid-template-columns: 1fr 1fr; }
.exp__col { padding: 15px 16px; border-right: 1px solid var(--rule); min-width: 0; }
.exp__col:last-child { border-right: 0; }
.exp__sub { display: block; margin: 0 0 9px; }

.leak { list-style: none; margin: 0 0 4px; padding: 0; }
.leak li { display: flex; gap: 9px; font-family: var(--f-mono); font-size: 9.8px; padding: 3.5px 0; color: var(--ink-500); line-height: 1.4; }
.leak li i { font-style: normal; width: 9px; flex: none; }
.leak li.ok i { color: var(--verd); }
.leak li.part i { color: var(--ochre); }
.leak li.no i { color: var(--oxide); }
.leak li.no { color: var(--ink-400); }

.mb { display: grid; grid-template-columns: 74px minmax(0, 1fr) 44px; gap: 10px; align-items: center; margin-bottom: 7px; }
.mb .l { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-400); }
.mb .t { height: 5px; background: var(--ink-300); position: relative; }
.mb .t i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--ochre); transition: width 1s var(--e-out); }
.mb .t i.amber { background: var(--ochre); }
.mb .v { font-family: var(--f-mono); font-size: 10.5px; color: var(--ink-700); text-align: right; font-variant-numeric: tabular-nums; }
.mb .v.na { color: var(--ink-400); }

.lk { display: flex; align-items: center; gap: 9px; font-family: var(--f-mono); font-size: 9.8px; padding: 3.5px 0; color: var(--ink-500); }
.lk i { font-style: normal; color: var(--ink-400); }
.lk:hover { color: var(--ochre); }
.exp__note { font-size: 12px; color: var(--ink-500); line-height: 1.55; margin: 12px 0 0; }

/* ── plots ───────────────────────────────────────────────────────────────── */
.plots { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.plotcard { background: var(--surface-1); padding: 16px 18px 20px; }
.plotcard h4 { font-family: var(--f-display); font-variation-settings: 'opsz' 56; font-size: 19px; font-weight: 400; margin: 0 0 4px; }
.plotcard .cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-400); display: block; margin-bottom: 14px; }
.plotcard svg { width: 100%; height: auto; overflow: visible; }
.ax { stroke: var(--rule-2); stroke-width: 1; }
.axl { fill: var(--ink-400); font-family: var(--f-mono); font-size: 7.4px; letter-spacing: 0.08em; }
.s1 { fill: none; stroke: var(--ochre); stroke-width: 1.5; }
.s2 { fill: none; stroke: var(--rule-3); stroke-width: 1.2; stroke-dasharray: 3 3; }
.ptm { fill: var(--ochre); }
.ptm2 { fill: var(--rule-3); }
.barg { fill: rgba(165, 102, 46, 0.50); }
.barg2 { fill: rgba(23, 25, 24, 0.14); }
.legend { display: flex; gap: 16px; margin-top: 12px; }
.legend span { display: flex; align-items: center; gap: 7px; font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-500); }
.legend i { width: 14px; height: 1.5px; background: var(--ochre); display: block; }
.legend i.dim { background: var(--rule-3); }

/* ── reproducibility ─────────────────────────────────────────────────────── */
.repro { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.repro > div { background: var(--surface-1); padding: 15px 16px; }
.repro h5 { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 10px; }

/* ── research ledger ─────────────────────────────────────────────────────── */
.ledger { border-top: 1px solid var(--rule-2); }
.lentry { border-bottom: 1px solid var(--rule); }
.lentry__hd {
  display: grid; grid-template-columns: 84px minmax(0, 1fr) auto;
  gap: 16px; align-items: baseline;
  padding: 17px 0; cursor: pointer; background: none; border: 0; width: 100%; text-align: left;
  transition: background 0.3s var(--e-out), padding-left 0.3s var(--e-out);
}
.lentry__hd:hover { background: rgba(23, 25, 24, 0.022); padding-left: 8px; }
.lentry__id { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.1em; color: var(--ink-400); }
.lentry.is-open .lentry__id { color: var(--ochre); }
.lentry__q {
  font-family: var(--f-display); font-variation-settings: 'opsz' 60, 'SOFT' 10; font-style: italic;
  font-size: clamp(17px, 2vw, 22px); margin: 0; color: var(--ink-700); text-wrap: balance;
}
.lentry.is-open .lentry__q, .lentry__hd:hover .lentry__q { color: var(--ink-900); }
.lentry__bd {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 1px; background: var(--rule);
  max-height: 0; overflow: hidden;
  transition: max-height 0.75s var(--e-out);
}
.lentry.is-open .lentry__bd { max-height: 900px; }
.lcell { background: var(--surface-1); padding: 15px 15px 18px; }
.lcell h5 { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 8px; }
.lcell p { margin: 0; font-size: 12.6px; line-height: 1.6; color: var(--ink-700); }
.lcell--decision p { font-family: var(--f-display); font-variation-settings: 'opsz' 44; font-size: 17px; color: var(--ink-900); }
.lcell--decision.is-adopted p { color: var(--verd); }
.lcell--decision.is-rejected p { color: var(--oxide); }
.lcell--decision.is-inconclusive p { color: var(--ochre); }
.lcell .art { font-family: var(--f-mono); font-size: 10px; color: var(--ink-500); word-break: break-all; }

.openq { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.oqi { background: var(--surface-1); padding: 16px 18px; }
.oqi .q { font-family: var(--f-display); font-variation-settings: 'opsz' 48; font-style: italic; font-size: 17px; color: var(--ink-900); margin: 0 0 8px; }
.oqi p { font-size: 12.5px; color: var(--ink-500); margin: 0; line-height: 1.55; }

/* ── references ──────────────────────────────────────────────────────────── */
.reflegend { display: flex; flex-wrap: wrap; gap: 34px; margin-top: 32px; }
.reflegend__i { display: flex; gap: 12px; align-items: flex-start; max-width: 42ch; }
.reflegend__i b { display: block; font-size: 13px; color: var(--ink-900); font-weight: 500; margin-bottom: 3px; }
.reflegend__i span { font-size: 12.5px; color: var(--ink-500); line-height: 1.5; }

.refs { border-top: 1px solid var(--rule-2); }
.ref { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-bottom: 1px solid var(--rule); }
.ref__ext { padding: 16px 18px 18px; border-right: 1px solid var(--rule); }
.ref__own { padding: 16px 18px 18px; background: rgba(165, 102, 46, 0.035); }
.ref h3 { font-family: var(--f-display); font-variation-settings: 'opsz' 60; font-size: 20px; font-weight: 400; margin: 0; display: flex; align-items: baseline; gap: 8px; }
.ref .origin { font-family: var(--f-mono); font-size: 9.5px; color: var(--ink-400); display: block; margin: 6px 0 12px; letter-spacing: 0.05em; }
.ref .fld { margin-bottom: 12px; }
.ref .fld:last-child { margin-bottom: 0; }
.ref .fld h6 {
  font-family: var(--f-mono); font-size: 8.6px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-400); margin: 0 0 5px; font-weight: 500;
}
.ref .fld p { margin: 0; font-size: 12.8px; line-height: 1.58; color: var(--ink-700); }
.refmark {
  display: inline-flex; width: 17px; height: 17px; align-items: center; justify-content: center;
  border: 1px solid var(--rule-2); font-size: 9px; color: var(--ink-500); flex: none;
}
.refmark--own { color: var(--ochre); border-color: var(--ochre-rule); background: rgba(165, 102, 46, 0.09); }

/* ── journey ─────────────────────────────────────────────────────────────── */
.jrail {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
  background: var(--rule); border: 1px solid var(--rule);
  scrollbar-width: thin;
}
.jrail__track { display: flex; gap: 1px; }
.jcard {
  flex: 0 0 clamp(272px, 30vw, 372px); scroll-snap-align: start;
  background: var(--surface-1); padding: 20px 20px 24px;
  min-height: 356px; display: flex; flex-direction: column; position: relative;
  transition: background 0.4s var(--e-out);
}
.jcard.is-on { background: var(--surface-2); }
.jcard.is-on::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--ochre); }
.jcard__top { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.jcard__n { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ochre); }
.jcard__d { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.1em; color: var(--ink-400); margin-left: auto; }
.jcard h3 { font-family: var(--f-display); font-variation-settings: 'opsz' 96; font-size: clamp(24px, 2.6vw, 32px); font-weight: 400; margin: 0 0 16px; }
.jcard__sec { margin-bottom: 14px; }
.jcard__sec h5 { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 6px; }
.jcard__sec p { font-size: 12.8px; line-height: 1.58; color: var(--ink-700); margin: 0; }
.jcard__ft { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rule); }
.jrail__nav { display: flex; align-items: center; gap: 14px; margin-top: 14px; }

.costs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cost { background: var(--surface-1); padding: 17px 18px; }
.cost b { display: block; font-family: var(--f-mono); font-size: 26px; font-weight: 400; color: var(--ink-900); line-height: 1; margin-bottom: 8px; }
.cost h5 { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 8px; }
.cost p { font-size: 12.5px; color: var(--ink-500); margin: 0; line-height: 1.55; }

/* ── architecture journey (one question, six stations) ──────────────────── */
.journey { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule-2); }
.journey__step {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: clamp(20px, 3vw, 48px);
  padding: clamp(28px, 4vw, 56px) 0;
  border-bottom: 1px solid var(--rule);
}
.journey__rail {
  display: flex; flex-direction: column; gap: 12px;
  border-right: 1px solid var(--rule);
  padding-right: 20px;
}
.journey__n {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--ochre);
}
.journey__body { max-width: 64ch; }
.journey__name {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 96, 'WONK' 1;
  font-size: clamp(28px, 3.2vw, 42px);
  font-weight: 400;
  margin: 0 0 18px;
  letter-spacing: -0.015em;
  color: var(--ink-900);
}
.journey__what {
  font-family: var(--f-display);
  font-variation-settings: 'opsz' 40, 'SOFT' 30;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.55;
  color: var(--ink-700);
  margin: 0 0 22px;
  max-width: 56ch;
}
.journey__comp {
  font-size: 13px;
  color: var(--ink-500);
  line-height: 1.65;
  margin: 0;
  padding: 14px 18px;
  border-left: 2px solid var(--ochre);
  background: rgba(165, 102, 46, 0.05);
  max-width: 60ch;
}
.journey__comp .label { display: inline-block; margin-right: 10px; color: var(--ochre); }
.journey__comp em { font-family: var(--f-display); font-style: italic; color: var(--ink-700); font-size: 13.5px; }

@media (max-width: 720px) {
  .journey__step { grid-template-columns: 56px 1fr; gap: 18px; }
  .journey__rail { padding-right: 12px; }
}

/* ── atlas ───────────────────────────────────────────────────────────────── */
.atlas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(340px, 44%); gap: clamp(22px, 3vw, 48px); align-items: start; }
.atlas__list { border-top: 1px solid var(--rule-2); }
.aitem {
  border-bottom: 1px solid var(--rule);
  padding: 17px 0;
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; align-items: baseline;
  cursor: pointer; background: none; border-left: 0; border-right: 0; border-top: 0; width: 100%; text-align: left;
  transition: padding-left 0.3s var(--e-out), background 0.35s var(--e-out);
}
.aitem:hover { padding-left: 8px; background: linear-gradient(90deg, rgba(165, 102, 46, 0.07), transparent 65%); }
.aitem.is-on { padding-left: 8px; background: linear-gradient(90deg, rgba(165, 102, 46, 0.10), transparent 70%); }
.aitem__n { font-family: var(--f-mono); font-size: 10px; letter-spacing: 0.14em; color: var(--ink-400); }
.aitem.is-on .aitem__n { color: var(--ochre); }
.aitem__q {
  font-family: var(--f-display); font-variation-settings: 'opsz' 60, 'SOFT' 8; font-style: italic;
  font-size: clamp(18px, 2.2vw, 26px); color: var(--ink-700); line-height: 1.2;
}
.aitem:hover .aitem__q, .aitem.is-on .aitem__q { color: var(--ink-900); }
.aitem__cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-400); }
.aitem.is-on .aitem__cap { color: var(--ochre); }
.aitem__det {
  grid-column: 2 / -1; margin-top: 14px;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px;
  max-height: 0; overflow: hidden; opacity: 0;
  transition: max-height 0.7s var(--e-out), opacity 0.5s var(--e-out), margin-top 0.5s var(--e-out);
}
.aitem.is-on .aitem__det { max-height: 420px; opacity: 1; }
.det h5 { font-family: var(--f-mono); font-size: 8.6px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-400); margin: 0 0 6px; }
.det p { font-size: 12.5px; line-height: 1.55; color: var(--ink-700); margin: 0; }

.atlas__plate { position: sticky; top: calc(var(--bar) + 24px); }
.atlas__read { margin-top: 15px; }
.atlas__chain { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 15px; }
.atlas__chain .cn {
  font-family: var(--f-mono); font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 8px; border: 1px solid var(--rule-2); color: var(--ink-400);
}
.atlas__chain .cn.on { border-color: var(--ochre-rule); color: var(--ochre); background: rgba(165, 102, 46, 0.09); }
.atlas__chain .ar { color: var(--ink-400); font-size: 9px; align-self: center; }
.atlas__limit { font-size: 13px; color: var(--ink-700); margin: 15px 0 16px; padding-top: 13px; border-top: 1px solid var(--rule); }
.atlas__limit .label { margin-right: 8px; }

/* ── disclaim ────────────────────────────────────────────────────────────── */
.disclaim {
  border: 1px solid var(--rule-2);
  border-left: 2px solid var(--ochre);
  background: rgba(165, 102, 46, 0.045);
  padding: 18px 22px 20px;
  max-width: 84ch;
}
.disclaim p { margin: 9px 0 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-700); }

/* ── responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .lentry__bd { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 980px) {
  .exps, .plots, .openq { grid-template-columns: 1fr; }
  .exp__body { grid-template-columns: 1fr; }
  .exp__col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .repro, .costs { grid-template-columns: 1fr; }
  .atlas { grid-template-columns: 1fr; }
  .atlas__plate { position: static; }
  .ref { grid-template-columns: 1fr; }
  .ref__ext { border-right: 0; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 720px) {
  .lentry__bd { grid-template-columns: 1fr; }
  .lentry__hd { grid-template-columns: 60px 1fr; }
  .lentry__hd .chip { grid-column: 2; justify-self: start; margin-top: 8px; }
  .aitem__det { grid-template-columns: 1fr; }
  .aitem { grid-template-columns: 32px 1fr; }
  .aitem__cap { grid-column: 2; }
}