/* compare: 02 · Clopidogrel example. Clopidogrel by CYP2C19 genotype, standard dose vs CPIC guidance.
   Scoped to .cmp. Layout and data marks only; type, sheet, key, tags, readout, meter and motion come from core.
   v5: the films' grammar for the marks: hairline tracks in ink, the dose and the active drug travel as beads (a warm-grey
   or ink sphere with a fine ink outline), allele cells with a fine outline, the recommendation in the Newsreader voice. */

.cmp .cmp-ref { font-family: var(--font); font-weight: 500; font-size: .58em; line-height: 0; vertical-align: super; margin-left: 1px; font-variant-numeric: tabular-nums; }
.cmp .cmp-ref a { color: var(--tone); text-decoration: none; padding: 0 2px; }
.cmp .cmp-ref a:hover { text-decoration: underline; }

/* ---------- Card ---------- */
.cmp .cmp-rx { container-type: inline-size; }
.cmp .cmp-rx .sheet-head .h3 { margin: 0; }

/* Two halves: standard dosing | genotype-guided */
.cmp .cmp-halves { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.cmp .cmp-half { min-width: 0; }
.cmp .cmp-std { padding-right: clamp(14px, 2.2vw, 30px); border-right: 1px solid var(--line); }
.cmp .cmp-pgx { padding-left: clamp(14px, 2.2vw, 30px); }
.cmp .cmp-ht { min-height: 52px; margin-bottom: var(--s3); }
.cmp .cmp-ht .h4 { margin: 0 0 var(--s1); }
.cmp .cmp-ht .small { margin: 0; }
.cmp .cmp-pgx .h4 { color: var(--tone); }
.cmp .cmp-rows { display: flex; flex-direction: column; }

/* One row: drug → patient (genotype) → active drug */
.cmp .cmp-row { position: relative; display: grid; grid-template-columns: 28px minmax(18px, 1fr) auto minmax(18px, 1fr) 104px; align-items: center; gap: 10px; width: 100%;
  padding: 14px 10px; border: 0; border-top: 1px solid var(--line); border-radius: 0; background: none; color: var(--ink); text-align: left; cursor: pointer; transition: background var(--t2) var(--ease); }
.cmp .cmp-row::before { content: ""; position: absolute; left: 0; top: -1px; bottom: 0; width: 3px; background: var(--tone); transform: scaleY(0); transform-origin: top; transition: transform var(--t3) var(--ease); }
.cmp .cmp-row:hover { background: var(--soft); }
.cmp .cmp-row[aria-pressed="true"] { background: var(--sel); }
.cmp .cmp-row[aria-pressed="true"]::before { transform: none; }
.cmp .cmp-row:focus-visible { outline-offset: -2px; }
.cmp .cmp-drug svg, .cmp .cmp-pp { display: block; }
.cmp .cmp-cap { color: var(--ink); }
.cmp .cmp-tab, .cmp .cmp-pp { color: var(--ink); }
.cmp .cmp-who { display: flex; align-items: center; gap: var(--s2); }
.cmp .cmp-pp { flex: none; }
.cmp .cmp-gt { display: flex; flex-direction: column; gap: 5px; min-width: 52px; }
.cmp .cmp-gt .data { line-height: 1; }
.cmp .cmp-al { display: flex; gap: 2px; }
/* Allele cells: the films' data cells, a fill and a fine ink outline */
.cmp .cmp-al i { width: 8px; height: 8px; background: var(--fn-norm); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 50%, transparent); }
.cmp .cmp-al i.no { background: var(--fn-no); }
.cmp .cmp-smp { color: var(--tone); }

/* Arrow track: an ink hairline with a fine head, like the films' leaders. A bead travels along it during the build
   (WAAPI in compare.js): the dose a warm-grey sphere (the capsule's grey half), the active drug an ink one. */
.cmp .cmp-trk { position: relative; height: 12px; min-width: 0; }
.cmp .cmp-trk::before { content: ""; position: absolute; left: 0; right: 3px; top: 5.5px; border-top: 1px solid color-mix(in srgb, var(--ink) 34%, transparent); }
.cmp .cmp-trk::after { content: ""; position: absolute; right: 0; top: 2px; width: 6px; height: 8px; background: color-mix(in srgb, var(--ink) 44%, transparent); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.cmp .cmp-dot { position: absolute; left: 0; top: 1.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--g3); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 70%, transparent); opacity: 0; z-index: 1; }
.cmp .cmp-act .cmp-dot, .cmp .cmp-alt .cmp-in .cmp-dot { background: var(--ink); }

/* Active drug: core meter; the shortfall shows as orange hollow squares. */
.cmp .cmp-out { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; }
.cmp .cmp-out .meter { flex: none; }
.cmp .meter.cmp-lack > i:not(.on) { background: none; box-shadow: inset 0 0 0 1px var(--signal); }
.cmp .cmp-short .cmp-out .k { color: var(--signal-ink); }
/* On the grey hover and selected fills --signal-ink falls under 4.5:1; a quarter ink keeps it orange and readable (≈5.3:1) */
.cmp .cmp-short:is(:hover, [aria-pressed="true"]) .cmp-out .k { color: color-mix(in srgb, var(--signal-ink) 75%, var(--ink)); }
.cmp .cmp-pre .cmp-out .meter { clip-path: inset(0 100% 0 0); }

/* Legend */
.cmp .cmp-key { padding-top: var(--s4); border-top: 1px solid var(--line); }
.cmp .cmp-key svg { display: inline-block; margin-right: 6px; vertical-align: -3px; }
.cmp .cmp-key i + i { margin-left: -4px; }
.cmp .cmp-key i.cmp-x { background: none; box-shadow: inset 0 0 0 1.5px var(--signal); }

/* Readout for the selected genotype; the CPIC recommendation reads as a quotation, in the films' serif */
.cmp .cmp-read { margin-top: var(--s6); }
.cmp .cmp-r-al { display: flex; flex-wrap: wrap; gap: var(--s2); margin: 0 0 var(--s3); }
.cmp .cmp-rec { margin: 6px 0 0; font-family: var(--display); font-weight: 400; font-size: 20px; line-height: 1.35; letter-spacing: -0.005em; max-width: 32em; }

/* ---------- Source ---------- */
.cmp .cmp-notes { margin: var(--s5) 0 0; padding: 0; list-style: none; counter-reset: cmp-n; }
.cmp .cmp-notes li { counter-increment: cmp-n; display: grid; grid-template-columns: 26px minmax(0, 1fr); scroll-margin-top: 30vh; }
.cmp .cmp-notes li::before { content: counter(cmp-n); font-family: var(--font); font-weight: 500; font-size: 11px; line-height: 19.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.cmp .cmp-notes li:target { color: var(--ink); background: var(--sel); outline: 6px solid var(--sel); }
.cmp .cmp-notes a { overflow-wrap: anywhere; }

/* Browsers without color-mix(): the track keeps a solid warm-grey line and head (a var() inside color-mix() would
   otherwise drop the whole declaration at computed-value time). */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
  .cmp .cmp-trk::before { border-top: 1px solid var(--g3); }
  .cmp .cmp-trk::after { background: var(--shadow); }
  .cmp .cmp-dot { box-shadow: inset 0 0 0 1px var(--ink); }
}

/* ---------- Narrow cards: stack the halves, then the readout ---------- */
@container (max-width: 740px) {
  .cmp .cmp-halves { grid-template-columns: minmax(0, 1fr); }
  .cmp .cmp-std { padding: 0 0 var(--s5); border-right: 0; }
  .cmp .cmp-pgx { padding: var(--s5) 0 0; border-top: 1px solid var(--line); }
  .cmp .cmp-ht { min-height: 0; }
}
@container (max-width: 480px) {
  .cmp .cmp-read { grid-template-columns: minmax(0, 1fr); }
  .cmp .cmp-row { grid-template-columns: 28px minmax(10px, 1fr) auto minmax(10px, 1fr) 100px; gap: 6px; padding: 12px 6px; }
  .cmp .cmp-gt { min-width: 44px; }
  .cmp .cmp-rec { font-size: 19px; }
}