/* explore: the Explore page. Score band (six EVEE columns on the warm-grey Explore field, no text on it), its labels, key
   and readout on the paper below, findings, lab measurements, planned experiments. Components and type come from core;
   this file lays them out and draws the figure marks in the films' grammar: cells like the films' paper sheets (pale
   squares, a fine ink outline round every one), warm greys, orange only where the data says no function. */

/* ---------- Score band: columns stand on the band's lower edge, aligned with the content column ---------- */
.xp { --cell: 10px; --cg: 2px; --rows: 25; --cw: 4; --slot: minmax(0, 96px); --gap: minmax(24px, 1fr);
  --trk: calc(var(--rows) * (var(--cell) + var(--cg)) - var(--cg)); --colw: calc(var(--cw) * (var(--cell) + var(--cg)) - var(--cg));
  --xp-ol: rgba(17, 17, 17, .3); }   /* the films' fine ink outline (ink at 30 %) round every cell */
.xp-band { margin: 0; height: clamp(300px, 44vh, 400px); background: var(--c-explore); --focus: var(--ink); }
.xp-wrap, .xp-area { height: 100%; }
.xp-area { position: relative; }
.xp-grid, .xp-cols { display: grid; }
.xp-cols { position: absolute; left: 0; right: 0; bottom: 0; align-items: end; }
.xp-col { position: relative; display: flex; justify-content: center; align-items: flex-end; height: var(--trk); min-width: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.xp-col:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
/* Track: 25 rows × 4 cells (one square = 4%). Pale cells on the band: the gaps are the band colour drawn over the track and
   the fill, and under them a 1px ink line at each cell's edges, so every cell (empty or filled) carries its own outline. */
.xp-trk { position: relative; display: block; width: var(--colw); height: var(--trk); background: var(--g1); transition: background var(--t2) var(--ease); }
.xp-trk::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, transparent 0 var(--cell), var(--c-explore) var(--cell) calc(var(--cell) + var(--cg))),
    repeating-linear-gradient(180deg, transparent 0 var(--cell), var(--c-explore) var(--cell) calc(var(--cell) + var(--cg))),
    repeating-linear-gradient(90deg, var(--xp-ol) 0 1px, transparent 1px calc(var(--cell) - 1px), var(--xp-ol) calc(var(--cell) - 1px) var(--cell), transparent var(--cell) calc(var(--cell) + var(--cg))),
    repeating-linear-gradient(180deg, var(--xp-ol) 0 1px, transparent 1px calc(var(--cell) - 1px), var(--xp-ol) calc(var(--cell) - 1px) var(--cell), transparent var(--cell) calc(var(--cell) + var(--cg))); }
.xp-col:hover .xp-trk { background: var(--paper); }
.xp-fill { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--n, 0) * (var(--cell) + var(--cg)) - var(--cg)); background: var(--c); }
/* Selected column: an ink frame, open at the band's edge. */
.xp-col[aria-pressed="true"] .xp-trk::before { content: ""; position: absolute; left: -6px; right: -6px; top: -6px; bottom: 0; border: 1.5px solid var(--ink); border-bottom: 0; }

/* Threshold: a 1.5px ink rule across the plot with an ink triangle at its left end; the 28px strip is the slider's hit area. */
.xp-th { position: absolute; left: -14px; right: 0; bottom: calc(var(--th, .5) * var(--trk) - 14px); height: 28px; z-index: 2; cursor: ns-resize; touch-action: none; user-select: none; -webkit-user-select: none; }
.xp-rule { position: absolute; left: 14px; right: 0; top: 13.25px; height: 1.5px; background: var(--ink); }
.xp-hd { position: absolute; left: 5px; top: 9px; width: 8px; height: 10px; background: var(--ink); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.xp-th:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; }
.xp-pre .xp-fill, .xp-pre .xp-th > * { visibility: hidden; }

/* ---------- On the paper under the band: labels aligned to the columns, gene brackets, key, readout ---------- */
.xp-under { padding-top: 12px; }
.xp-labels { align-items: start; }
.xp-lab { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; }
.xp-al { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; line-height: 1.3; letter-spacing: .04em; color: var(--muted); white-space: nowrap; transition: color var(--t2) var(--ease); }
.xp-lab.sel .xp-al { color: var(--ink); }
.xp-lab .data { white-space: nowrap; }
.xp-fl { flex: none; width: 7px; height: 7px; box-shadow: inset 0 0 0 1px var(--shadow); transition: background var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
/* Flagged = ink, like the threshold that flags it; orange stays the no-function data colour. */
.xp-fl.on { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
/* Gene brackets: an ink hairline with end ticks, the films' leader weight. */
.xp-genes { margin-top: 14px; }
.xp-gene { position: relative; margin: 0 12px; padding-top: 8px; border-top: 1px solid var(--ink); text-align: center; }
.xp-gene::before, .xp-gene::after { content: ""; position: absolute; top: -7px; width: 1px; height: 6px; background: var(--ink); }
.xp-gene::before { left: 0; }
.xp-gene::after { right: 0; }
.xp-key { margin-top: 28px; }
.xp-key i.xp-kf { width: 7px; height: 7px; vertical-align: 0; --mk: var(--ink); }
/* The key's squares are drawn like the band's cells: data colours and one empty cell, each with the fine outline. */
.xp-key > span > i:not(.line):not(.xp-kf) { box-shadow: inset 0 0 0 1px var(--xp-ol); }
.xp-key > span:last-child > i { background: var(--g1); }
.xp-out { --n: 2; margin-top: 24px; }

/* ---------- Page head, findings ---------- */
.xp-head { margin-top: var(--block); }

/* ---------- Lab measurements: CYP2C9 activity against abundance (canvas squares, HTML labels and pins over it) ---------- */
/* The steps column moves under the plot whenever the box is narrow (also at 1001–1240px, where the six tabs take the width). */
.xp-lm { container-type: inline-size; }
@container (max-width: 760px) {
  .xp-lm-box { grid-template-columns: minmax(0, 1fr); }
  .xp-lm-box > .ctl { border-left: 0; border-top: 1px solid var(--line); }
}
.xp-lm-plot { position: relative; min-height: 280px; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.xp-lm-plot canvas { display: block; }
.xp-lm-ax, .xp-lm-pins { position: absolute; inset: 0; pointer-events: none; }
/* Tick values are data (mono); the two axis titles are the films' labels (small Figtree caps). */
.xp-lm-t, .xp-lm-v { position: absolute; font-family: var(--mono); font-size: 10.5px; line-height: 14px; letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.xp-lm-t.x { transform: translateX(-50%); }
.xp-lm-t.y { transform: translate(-100%, -50%); padding-right: 8px; }
.xp-lm-t.ttl { font-family: var(--font); font-weight: 500; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--dark); }
.xp-lm-t.end { text-align: right; }
.xp-lm-v { color: var(--ink); background: var(--white); padding: 0 3px; transform: translateX(-50%); }
.xp-lm-v.lo { transform: translateX(4px); }
/* Ticks and titles come in with the build like the films' captions (a slow fade); the EVEE labels belong to the last step only. */
.xp-lm-ax > * { opacity: 0; transition: opacity .4s var(--ease); }
.xp-lm-plot.on .xp-lm-ax > :not(.ev) { opacity: 1; transition-delay: 260ms; }
.xp-lm-plot.on.done.s3 .xp-lm-ax > .ev { opacity: 1; transition-delay: 450ms; }
.xp-lm-pin { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto;
  visibility: hidden; opacity: 0; transition: opacity .35s var(--ease), visibility 0s linear .35s; }
.xp-lm-plot.done .xp-lm-pin { visibility: visible; opacity: 1; transition: opacity .4s var(--ease); }
.xp-lm-pin i { position: absolute; left: 10px; top: 10px; width: 8px; height: 8px; background: var(--ink); outline: 1.5px solid var(--white); }
.xp-lm-pin span { position: absolute; left: 21px; bottom: 19px; padding: 0 3px; background: var(--white); font-family: var(--mono); font-size: 11px; line-height: 14px; color: var(--ink); }
.xp-lm-pin.l span { left: auto; right: 21px; }
.xp-lm-pin:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px; }
.xp-lm-hl { position: absolute; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border: 1.5px solid var(--ink); pointer-events: none; }
.xp-lm-tip { position: absolute; z-index: 3; margin: 0; padding: 6px 8px; max-width: none; background: var(--white); border: 1px solid var(--ink); font-family: var(--mono); font-size: 11px; line-height: 1.45; color: var(--ink); white-space: nowrap; pointer-events: none; }
.xp-lm-tip b { font-weight: 400; }
.xp-lm-tip span { display: block; color: var(--muted); }
.xp-lm-key { margin-top: 12px; }
.xp-lm-step .k { margin: 0 0 8px; }
.xp-lm-step .h4 { margin: 0 0 6px; }
.xp-lm-step .small { margin: 0; min-height: calc(4 * 1.45em); }   /* room for four lines, so the readout does not jump between steps */
.xp-lm-nav { margin-top: auto; }

/* ---------- Planned experiments: one sheet, one row each ---------- */
.xp-rows { list-style: none; margin: 0; padding: 0; }
.xp-rows li { display: grid; grid-template-columns: 40px 180px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 16px 24px; border-top: 1px solid var(--line); }
.xp-rows li:first-child { border-top: 0; }
.xp-id { font-family: var(--mono); font-size: 13px; line-height: 1.4; color: var(--tone); }
.xp-id svg { display: block; }
.xp-rows b { font-weight: 500; }
.xp-rows li > span:nth-child(3) { font-size: 15px; line-height: 1.45; color: var(--muted); }
.xp-acts { margin-top: 24px; }

@media (max-width: 760px) {
  .xp { --cell: 8px; --rows: 20; --cw: 3; --slot: minmax(0, 1fr); --gap: 14px; }
  .xp-band { height: 240px; }
  .xp-th { left: -12px; }
  .xp-rule { left: 12px; }
  .xp-hd { left: 3px; }
  .xp-col[aria-pressed="true"] .xp-trk::before { left: -5px; right: -5px; top: -5px; }
  .xp-al { gap: 4px; }
  .xp-lab .data { font-size: 12px; }
  .xp-out { --n: 1; }
  .xp-gene { margin: 0 4px; }
  .xp-stats { grid-template-columns: 1fr; }
  .xp-rows li { grid-template-columns: 28px minmax(0, 1fr) auto; padding: 14px 16px; }
  .xp-rows li > span:nth-child(3) { grid-column: 2 / -1; }
  .xp-rows li .xp-st, .xp-rows li > .tag { grid-column: 3; grid-row: 1; }
}