/* explorelab: "Variant detail" inside Explore (figbox: ids, gene drawing, scores, probe shifts | six variant options).
   Components and type come from core and kit; this file lays them out and draws the probe cells in the films' grammar
   (warm-grey data with a fine ink outline, ink for the variant, the pale orange tint for what it lost). */

/* ---------- Head ---------- */
.xl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px 24px; }
.xl-who { min-width: 0; }
.xl-name { margin: 8px 0 4px; }
.xl-mech { margin: 0; }
.xl-nav { flex: none; gap: 8px; }
.xl-nav .n { min-width: 56px; text-align: center; }
.xl-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-height: 26px; margin: 16px 0 24px; }
.xl-tags .xl-rec { margin-left: auto; }

/* ---------- Blocks inside the figure ---------- */
.xl-blk { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.xl-bh { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; }
.xl-bh .key { margin: 0; }
.xl-locus { min-height: 104px; }
.xl-sc { --n: 2; margin-top: 24px; }

/* ---------- Probe tracks: reference and variant, one square per 0.04 ---------- */
.xl-probes { --xl-ol: rgba(17, 17, 17, .4); border-bottom: 1px solid var(--line); }   /* --xl-ol: the films' fine ink outline */
.xl-pr { display: grid; grid-template-columns: minmax(0, 170px) minmax(0, 1fr) 84px; gap: 8px 16px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); }
.xl-pn { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 4px; align-items: baseline; }
.xl-rk { grid-row: span 2; font-family: var(--mono); font-size: 10.5px; color: var(--muted); }
.xl-pn b { font-weight: 500; font-size: 14px; line-height: 1.25; }
.xl-pn code { grid-column: 2; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; color: var(--muted); overflow-wrap: anywhere; }
.xl-trs { display: grid; gap: 4px; }
/* "Ref" / "Var" are labels: small Figtree caps like the films' labels. */
.xl-tr { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px; align-items: center; font-family: var(--font); font-weight: 500; font-size: 10.5px; line-height: 1.2; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.xl-tc { display: grid; grid-template-columns: repeat(25, minmax(0, 1fr)); gap: 2px; height: 10px; }
/* Empty cells are the flat track; data cells take the outline. The outline fades with the fill (same delay), so the cells
   still sweep in one by one. */
.xl-tc i { background: var(--line); box-shadow: inset 0 0 0 1px transparent; transition: background .42s var(--ease), box-shadow .42s var(--ease); }
.xl-tc.r i.f { background: var(--blue-500); box-shadow: inset 0 0 0 1px var(--xl-ol); }
.xl-tc.v i.f { background: var(--blue-900); box-shadow: inset 0 0 0 1px var(--xl-ol); }
.xl-tc.v i.l { background: var(--signal-tint); box-shadow: inset 0 0 0 1px var(--xl-ol); }
.xl-pkey i { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .4); }   /* the key's squares look like the cells */
.xl-pv { text-align: right; font-family: var(--mono); font-size: 11px; color: var(--muted); white-space: nowrap; }
.xl-pv b { display: block; margin-top: 2px; font-weight: 400; font-size: 15px; color: var(--ink); }
.xl-pv b.up { color: var(--tone); }
.xl-read { margin: 16px 0 0; }
.xl-read b { font-weight: 500; }

/* ---------- Control column: six variants (sticky beside the tall figure on desktop) ---------- */
.xl-ctl-in { display: flex; flex-direction: column; gap: 20px; }
.xl-opts .opt { justify-content: space-between; min-height: 48px; }
.xl-cn { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.xl-cn b { font-weight: 500; }
.xl-ind { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.xl-fl { 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); }
.xl-fl.on { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.xl-vg { display: inline-flex; color: var(--tone); }
.xl-vg.miss { color: var(--ink); }
.xl-vg:empty { display: none; }

/* The figure's one-line caption under the box, in the films' caption voice (Newsreader italic). */
#xl-foot { font-family: var(--display); font-style: italic; font-weight: 400; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.4; letter-spacing: -0.005em; color: var(--dark); max-width: 40em; margin-top: 20px; }

/* The figure sizes its own readouts: ids two per row beside the controls, four when the figure is wide;
   in a very narrow figure the scores go two per row and the stepper moves under the name. */
.xl-fig { container-type: inline-size; }
.xl-ids { --n: 2; }
@container (min-width: 620px) { .xl-ids, .xl-sc { --n: 4; } }
@container (max-width: 420px) {
  .xl-sc { --n: 2; }
  .xl-head { flex-direction: column; gap: 12px; }
  .xl-pr { grid-template-columns: minmax(0, 1fr) 80px; gap: 8px 12px; }
  .xl-pn { grid-column: 1 / -1; }
}

@media (min-width: 1001px) and (min-height: 720px) {
  /* 76px lands just below the page's sticky top bar */
  .xl-ctl-in { position: sticky; top: 76px; }
}
@media (max-width: 1000px) {
  /* stacked: the options go above the figure, so a choice changes what sits right below it */
  .xl-box > .xl-ctl { order: -1; border-top: 0; border-bottom: 1px solid var(--line); }
  .xl-ctl .xl-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .xl-tc { gap: 1px; }
}
@media (max-width: 560px) {
  .xl-ctl .xl-opts { grid-template-columns: 1fr 1fr; }
  .xl-tags .xl-rec { margin-left: 0; }
}