/* researchos: Platform D1 (M8 experiment design) and D2 (M9 research OS).
   Layout and the module's own marks only: type, sheets, tags, buttons, options, readouts, verdict and the diagram come from core and kit.
   v5, the films' figure grammar: sample and file squares are warm-grey atoms with a fine ink outline (--ro-ol), ink for the strong
   marks, orange for the one key element; each figure's take line is a Newsreader italic caption. */

.ro { --ro-ol: rgba(17, 17, 17, .5); --ro-ol2: rgba(17, 17, 17, .28); }
.ro code { font-family: var(--mono); font-size: .9em; letter-spacing: 0; }
/* Footnote numbers as on the other Platform sub-pages (verifiedai, platformend). */
.ro sup { font-size: .68em; line-height: 0; }
.ro sup a { color: var(--tone); text-decoration: none; padding: 0 1px; }
.ro sup a:hover { text-decoration: underline; }
.ro-al { font-family: var(--mono); letter-spacing: 0; }

/* Block titles: an h4 and at most one short line above the sheet. */
.ro-bt { margin: 0 0 16px; }
.ro-bt + .ro-bs { margin: -10px 0 16px; }

/* Before a figure's first build its marks wait hidden (the class is only ever set by JS, and removed under reduced motion). */
.ro-pd.ro-wait .ro-pd-locus, .ro-pd.ro-wait .ro-pd-ev, .ro-pd.ro-wait .ro-tr,
.ro-bn.ro-wait .ro-bw, .ro-ds.ro-wait .ro-dw { visibility: hidden; }

/* ---------- M8 · predictions ---------- */
.ro-pd, .ro-bn, .ro-ds { margin: 0; }
.ro-pd-locus { position: relative; min-height: 104px; }
.ro-pd-locus svg { display: block; }
.ro-pd-ev { margin-top: 20px; }
.ro-pd .opt { align-items: flex-start; gap: 12px; }
.ro-pd .opt > .ro-al { min-width: 2.6em; }
.ro-pd .opt > span { display: flex; flex-direction: column; gap: 2px; }
.ro-dl { margin: 0; }
.ro-dl > div { padding: 10px 0; border-top: 1px solid var(--line); }
.ro-dl > div:first-child { border-top: 0; padding-top: 0; }
.ro-dl dd { margin: 4px 0 0; font-size: 15px; line-height: 1.45; }
.ro-meas { border-top: 1px dashed var(--dash); padding-top: 12px; }
.ro-meas > .k { margin: 0 0 8px; }
.ro-md { margin: 0; }
.ro-md > div { padding: 4px 0; }
.ro-md dd { margin: 2px 0 0; font-family: var(--mono); font-size: 12.5px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere; }

/* The record: three stations on a line. Registered is filled ink; Measured and the tier stay hollow until a measurement exists
   (the example switch fills them in the tier-1 tone, ink in v5, and turns the dashed line solid). */
.ro-trw { container-type: inline-size; margin-top: 28px; }
.ro-tr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 20px; }
.ro-st { position: relative; min-width: 0; padding-top: 24px; }
.ro-st > p { margin: 0; }
.ro-st > .k { margin-bottom: 6px; }
.ro-sq { position: absolute; top: 0; left: 0; width: 12px; height: 12px; background: var(--white); box-shadow: inset 0 0 0 1px var(--ro-ol); transition: background var(--t3) var(--ease), box-shadow var(--t3) var(--ease); }
.ro-st[data-s="1"] .ro-sq { background: var(--ink); box-shadow: none; }
.ro-ln { position: absolute; top: 5.5px; left: 20px; right: -12px; height: 1px; background: repeating-linear-gradient(90deg, var(--dash) 0 4px, transparent 4px 8px); }
.ro-tr.ex .ro-ln { background: var(--blue-900); }
.ro-tr.ex .ro-st[data-s="2"] .ro-sq, .ro-tr.ex .ro-st[data-s="3"] .ro-sq { background: var(--blue-900); box-shadow: none; }
.ro-tr-v { font-size: 15px; line-height: 1.4; min-height: 21px; }
.ro-tr-v.data { font-size: 14px; }
.ro-st > .ro-tr-n { font-size: 13px; line-height: 1.45; color: var(--muted); margin-top: 2px; }
/* Narrow figure (and phones): the record runs down the left edge. */
@container (max-width: 559px) {
  .ro-tr { grid-template-columns: 1fr; }
  .ro-st { padding: 0 0 18px 26px; }
  .ro-st:last-child { padding-bottom: 0; }
  .ro-sq { top: 1px; }
  .ro-ln { top: 17px; bottom: 1px; left: 5.5px; right: auto; width: 1px; height: auto; background: repeating-linear-gradient(180deg, var(--dash) 0 4px, transparent 4px 8px); }
}

/* ---------- Preregistration ---------- */
.ro-pre { margin: 0; }
.ro-form { position: relative; display: grid; gap: 16px; }
.ro-f { display: block; }
.ro-f > .k { display: block; margin: 0 0 6px; }
.ro-in { display: block; width: 100%; margin: 0; border: 1px solid var(--line-2); border-radius: 0; background: var(--white); color: var(--ink); font: 400 15px/1.45 var(--font); padding: 10px 12px; resize: none; transition: border-color var(--t1), background var(--t3) var(--ease); }
.ro-in:hover, .ro-in:focus { border-color: var(--ink); }
.ro-sealed .ro-in { background: var(--paper); }
.ro-log { margin-top: 24px; }
.ro-bh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; margin: 0 0 8px; }
/* The entry's state is a label (Figtree caps), not data. */
.ro-cap { color: var(--muted); font: 500 11px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; }
/* The entry uses the hero's cell grammar: grey rule while a draft, ink once sealed, orange when the plan no longer matches. */
.ro-entry { border-top: 1.5px solid var(--line-2); transition: border-color var(--t2); }
.ro-entry.ok { border-top-color: var(--ink); }
.ro-entry.hot { border-top-color: var(--signal); }
.ro-kv { margin: 0; }
.ro-kv > div { display: grid; grid-template-columns: 136px minmax(0, 1fr); gap: 4px 16px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ro-kv dt { padding-top: 1px; }
.ro-kv dd { margin: 0; font-family: var(--mono); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.ro-kv dd.ro-plain { font-family: var(--font); font-size: 14px; }
/* Two digests side by side: the characters that differ in orange ink, the few that happen to agree muted. */
.ro-hex { color: var(--muted); }
.ro-hex .d { color: var(--signal-ink); }
.ro-diff { margin-top: 16px; }
.ro-diff > p { margin: 0 0 8px; }
.ro-diff .tags { margin: 0 0 8px; }
.ro-diff .ro-kv > div { padding: 6px 0; }
.ro-diff .ro-kv > div:last-child { border-bottom: 0; }
.ro-jd { margin-top: 20px; }
.ro-json { margin: 12px 0 0; font-family: var(--mono); font-size: 12px; line-height: 1.65; background: var(--paper); border: 1px solid var(--line); padding: 14px; max-height: 220px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; }
.ro-pre .opt { flex-direction: column; align-items: flex-start; gap: 2px; }
.ro-acts { display: flex; flex-direction: column; gap: 8px; }
/* What just happened, said once per figure in the films' caption voice. */
.ro-say { margin: 0; color: var(--ink); font-family: var(--display); font-style: italic; font-size: 17px; line-height: 1.38; letter-spacing: -0.003em; font-variant-numeric: lining-nums; }

/* ---------- SynteleaBench-PGx · GeT-RM samples ---------- */
.ro-bn-st { margin: 0 0 20px; max-width: 420px; }
/* The take line: the figure's caption in the films' voice (Newsreader italic), its number upright. */
.ro-bn-take { margin: 0 0 4px; min-height: 2.8em; max-width: 34em; font-family: var(--display); font-style: italic; font-size: 19px; line-height: 1.36; letter-spacing: -0.003em; font-variant-numeric: lining-nums; }
.ro-bn-take .ro-num { font-style: normal; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; }
/* One square per sample, absolutely placed so a step can move every square to its new group (FLIP, --ease-io). */
.ro-bw { position: relative; margin: 20px 0 0; height: 160px; transition: height var(--t3) var(--ease); outline-offset: 8px; touch-action: manipulation; }
.ro-bw > i { position: absolute; left: 0; top: 0; width: var(--cs, 12px); height: var(--cs, 12px); background: var(--g3); box-shadow: inset 0 0 0 1px var(--ro-ol); cursor: crosshair;
  transition: background-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease), opacity var(--t3) var(--ease); }
.ro-bw > i.h { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ro-bw > i.p { background: var(--c, var(--blue-500)); }
.ro-bw > i.o { background: var(--white); box-shadow: inset 0 0 0 2px var(--signal); }
.ro-bw > i.dim { opacity: .28; }
.ro-bw > i.on { outline: 1.5px solid var(--ink); outline-offset: 1.5px; z-index: 1; opacity: 1; }
.ro-bw-l > span { position: absolute; white-space: nowrap; line-height: 14px; }
.ro-bn-pick { margin: 16px 0 0; min-height: 1.4em; color: var(--ink); overflow-wrap: anywhere; }
.ro-bn-pick.dim { color: var(--muted); }
.ro-bn-key { margin-top: 12px; }
.ro-bn-in .rd-v svg { vertical-align: -2px; color: var(--ink); }
.ro-bn-steps .opt > small { margin-left: auto; }
#ro-bn-g .opt { justify-content: center; }

/* ---------- What public reads can check: one square per sample, then one column per sample with reads ---------- */
.ro-ts { margin: 0; }
.ro-ts-p { position: relative; padding: 24px; }
.ro-ts.ro-wait .ro-ts-st { visibility: hidden; }
.ro-ts-st { position: relative; margin: 20px 0 0; height: 60px; transition: height var(--t3) var(--ease); outline-offset: 8px; touch-action: manipulation; cursor: crosshair; }
/* Squares are placed by transform; every change of step is a CSS transition with a per-square delay set by researchos.js. */
.ro-ts-st > i { position: absolute; left: 0; top: 0; width: var(--cs, 7px); height: var(--cs, 7px); pointer-events: none;
  transition: transform 640ms var(--ease-io), opacity var(--t3) var(--ease), background-color var(--t3) var(--ease), box-shadow var(--t3) var(--ease); }
.ro-ts-st.ro-now, .ro-ts-st.ro-now > i { transition: none; }
/* Samples: paper grey, ink once they have public reads. Calls: gold calls are warm-grey atoms with the fine outline, unconfirmed
   hollow, untested pale; the one call checked from reads is orange. */
.ro-ts-s { background: var(--blue-100); }
.ro-ts-s.w { background: var(--ink); }
.ro-ts-c { opacity: 0; background: var(--line); }
.ro-ts-c.g { background: var(--g3); box-shadow: inset 0 0 0 1px var(--ro-ol); }
.ro-ts-c.u { background: var(--white); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.ro-ts-st:not([data-step="0"]) > .ro-ts-s:not(.w) { opacity: 0; }
.ro-ts-st:not([data-step="0"]) > .ro-ts-s.w { background: var(--ink); }
.ro-ts-st:not([data-step="0"]) > .ro-ts-c { opacity: 1; }
.ro-ts-st[data-step="2"] > .ro-ts-s.w:not(.k), .ro-ts-st[data-step="2"] > .ro-ts-c:not(.k) { opacity: .2; }
.ro-ts-st[data-step="2"] > .ro-ts-s.k, .ro-ts-st[data-step="2"] > .ro-ts-c.x { background: var(--signal); box-shadow: inset 0 0 0 1px var(--ro-ol); }
.ro-ts-st[data-step] > i.ro-ts-s.on, .ro-ts-st[data-step] > i.ro-ts-c.on { outline: 1.5px solid var(--ink); outline-offset: 1px; z-index: 1; opacity: 1; }
/* Row labels (locus names keep their case: rs12777823), the header label and the per-locus counts. */
.ro-ts-l > span { position: absolute; white-space: nowrap; }
.ro-ts-l > .g, .ro-ts-l > .n { font-family: var(--mono); font-size: 11px; letter-spacing: .02em; color: var(--muted); transition: color var(--t1); }
.ro-ts-l > .n { color: var(--ink); font-variant-numeric: tabular-nums; }
.ro-ts-l > .on, .ro-ts-l > .kk { color: var(--ink); }
.ro-ts-det { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.ro-ts-det > .k { margin: 0 0 12px; }
.ro-ts-det .rd-v svg { vertical-align: -2px; color: var(--ink); }
.ro-ts-go { margin: 16px 0 0; }
@media (min-width: 1001px) { .ro-ts-p { padding: 32px; } }

/* ---------- Datasets and their hashes ---------- */
.ro-dw { display: grid; gap: 14px; }
.ro-dr { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 4px 16px; align-items: start; }
.ro-dh { margin: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ro-dh .data { font-size: 13px; }
.ro-dh .k { overflow-wrap: anywhere; }
.ro-dq { line-height: 0; font-size: 0; padding-top: 2px; }
/* A file is an inline run of 10px squares (one per 250 KB), warm-grey atoms with the fine outline; runs alternate two greys.
   The picked file is orange; its squares turn ink as its bytes arrive. */
.ro-df { cursor: pointer; }
.ro-df i { display: inline-block; width: 10px; height: 10px; margin: 0 2px 2px 0; background: var(--g3); box-shadow: inset 0 0 0 1px var(--ro-ol); transition: background var(--t2) var(--ease); }
.ro-df.e i { background: var(--g1); }
.ro-df:hover i { background: var(--shadow); }
.ro-df.sel i { background: var(--signal); }
.ro-df i.got, .ro-df.sel i.got { background: var(--ink); }
.ro-cmp { margin-top: 24px; border-top: 1px solid var(--line); }
.ro-cmp > div:last-child { border-bottom: 0; }
.ro-hx { letter-spacing: .02em; }
.ro-hx span.m { color: var(--ink); }
.ro-hx span.x { color: var(--signal-ink); }
#ro-ds-hx span { color: var(--line-2); }
#ro-ds-hx span.m { color: var(--ink); }
#ro-ds-hx span.x { color: var(--signal-ink); }
.ro-ds-v { margin-top: 16px; }
.ro-ds .opt > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow-wrap: anywhere; }

/* ---------- MCP trust boundary (V3.dg; the module only places it) ---------- */
.ro-tb { margin: 0; }
.ro-mcp { position: relative; min-height: 200px; }
.ro-mcp .dg { margin: 0 auto; }
.ro-mcp .dg-x rect.bg { fill: var(--white); }
.ro-mcp .dg-x .dg-g { fill: var(--ink); }
.ro-tb .key { margin-top: 24px; }
.ro-mcp .ro-rt { display: none; }
.ro-mcp .ro-rt.on { display: inline; }
.ro-mcp .ro-hit { fill: none; stroke: var(--ink); stroke-width: 1.5; }
.ro-try { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line); }
.ro-try .ro-say { margin-top: 12px; min-height: 1.45em; }
.ro-tb figcaption { margin-top: 12px; }

/* ---------- "Also in" rows (one tag per row) ---------- */
.ro-more > .k { margin: 0 0 8px; }
.ro-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.ro-rows li { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr) auto; gap: 4px 20px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15px; line-height: 1.45; }
.ro-rows b { font-weight: 500; }
.ro-rows li > span:not(.tag) { color: var(--muted); }

/* Zero-height width probe (researchos.js onWidth): its size never depends on what the box holds. */
.ro-probe { position: absolute; top: 0; left: 0; right: 0; height: 0; visibility: hidden; pointer-events: none; }

/* ---------- Sources: one list per sub-page ---------- */
.ro-src { margin-top: var(--block); padding-top: 16px; border-top: 1px solid var(--rule); }

@media (max-width: 760px) {
  .ro-dr { grid-template-columns: 1fr; }
  .ro-dh { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
  .ro-rows li { grid-template-columns: minmax(0, 1fr) auto; }
  .ro-rows li > span:not(.tag) { grid-column: 1 / -1; grid-row: 2; }
  .ro-rows .tag { grid-row: 1; grid-column: 2; }
  .ro-kv > div { grid-template-columns: 1fr; }
  .ro-kv dt { padding-top: 0; }
  .ro-in { font-size: 16px; }   /* no zoom on focus in iOS */
  .ro-ts-p { padding: 16px; }
}