/* how: the How page. #paths ("Two ways to share a result") and the three gene rows (#genes).
   Layout and data marks only: core components (.sheet .readout .rd-cell .meter .opt .tag .key .act) and kit marks (.dg-*, .lc-*)
   keep their own look. Everything sits on the warm-grey page in white sheets; the data marks follow the films (filled
   warm greys and orange with a fine ink outline, labels in Figtree caps). */

/* ---------- #paths ---------- */
.hw-paths { margin: 0; }
.hw-fig { margin: 8px 0 32px; }
.hw-fig .dg { margin: 0 auto; }
.hw-fig .hw-dg { fill: var(--ink); }
.hw-fig .hw-up rect { stroke: var(--white); stroke-width: 1px; }   /* the copies stacked behind the upload packet stay distinct */
.hw-out { --n: 2; }
/* The outcome cells are buttons that open the matching viewer in "What each party sees". */
.hw-cell { padding: 8px 0 0; border-right: 0; border-bottom: 0; border-left: 0; background: none; text-align: left; cursor: pointer; }
.hw-cell .rd-k .arr { margin-left: auto; }
.hw-cell:hover .rd-v { color: var(--tone); }
.hw-cell:hover .arr { transform: translateY(2px); }
.hw-cell .meter.hw-ink { --meter-on: var(--ink); }
.hw-paths .key { margin-top: 24px; }
/* Before the build plays (motion allowed only) the drawing and the cell values wait out of sight. */
.hw-paths.pre .hw-fig, .hw-paths.pre .hw-cell .rd-v, .hw-paths.pre .hw-cell .meter, .hw-paths.pre .hw-cell .rd-note { visibility: hidden; }

/* ---------- Genes: one white sheet per gene ---------- */
/* Fixed columns so the three stacked sheets line up: allele 72px ("521C" is the widest), matrix column = row heads + four 32px cells. */
.hw-genes { display: grid; gap: 16px; --dip-h: 66px; --dip-c: 32px; }
.hw-gene { container: hwg / inline-size; position: relative; }
.gr { display: grid; gap: 24px; }
.gr-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 20px; min-width: 0; }
.gr-id { min-width: 0; }
.gr-head .h3 { margin: 0 0 4px; }
.gr-head .small { margin: 0 0 6px; }
.gr-syn { align-self: start; }
.gr-glyph { flex: none; display: grid; place-items: center; width: 72px; height: 72px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.gr-body { min-width: 0; }
.gr-model { min-width: 0; min-height: 104px; }
.gr-low { display: grid; gap: 24px; margin-top: 24px; align-items: start; }
.gr-left, .gr-right { min-width: 0; }
/* Variant buttons: allele, mechanism with its ids, CPIC function tag. */
.gr-v.opt { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 6px 14px; align-items: center; }
.gr-v .num-m { grid-row: span 2; }
.gr-v .tag { justify-self: start; }
.gr-vt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gr-vm { font-weight: 500; font-size: 15px; line-height: 1.3; }
.gr-vt .data { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.gr-left .gr-nt { margin-top: 14px; }
.gr-right .gr-smp { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.gr-smp i { width: 12px; height: 12px; border: 2px solid var(--ink); flex: none; }
.gr-note { margin-top: 20px; }
/* Diplotype matrix: upper triangle, phenotype colour per cell (the --ph-* scale, set by how.js), the sample outlined. Row heads
   share one width, so cells start at the same x in every sheet. Each filled cell takes the films' fine ink outline; the cell
   text is a label (Figtree caps), the allele heads are data (mono). */
.dip { display: grid; grid-template-columns: var(--dip-h) repeat(var(--n), var(--dip-c)); grid-template-rows: auto; grid-auto-rows: var(--dip-c); gap: 2px; justify-content: start; }
.dip-h { align-self: end; padding-bottom: 4px; font-family: var(--mono); font-size: 10.5px; line-height: 1.2; letter-spacing: .04em; text-align: center; color: var(--muted); white-space: nowrap; }
.dip-h.r { align-self: center; padding: 0 8px 0 0; text-align: right; }
.dip-c { display: grid; place-items: center; background: var(--c); box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5);
  font-family: var(--font); font-weight: 600; font-size: 10px; line-height: 1; letter-spacing: .08em; text-transform: uppercase;
  outline: 2px solid transparent; outline-offset: 0; transition: outline-color var(--t2) var(--ease), opacity var(--t2) var(--ease); }
.dip-c.ind { box-shadow: inset 0 0 0 1.5px var(--line-2); }
.dip-c.smp { outline-color: var(--ink); }
.dip.hov .dip-c { opacity: .3; }
.dip.hov .dip-c.on { opacity: 1; outline-color: var(--ink); }
.hw-gene.pre .gr-model, .hw-gene.pre .dip-c { visibility: hidden; }
@container hwg (min-width: 460px) {
  .gr-v.opt { grid-template-columns: 72px minmax(0, 1fr) auto; }
  .gr-v .num-m { grid-row: auto; }
}
@container hwg (min-width: 600px) {
  .gr-low { grid-template-columns: minmax(0, 1fr) calc(var(--dip-h) + 4 * (var(--dip-c) + 2px)); gap: 40px; }
}
@container hwg (min-width: 860px) {
  .gr { grid-template-columns: 240px minmax(0, 1fr); gap: 32px; }
  .gr-head { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
  .gr-syn { position: absolute; top: 32px; right: 32px; }
}
/* Phones: the chip takes its own line at the top right, above the glyph and the name. */
@container hwg (max-width: 520px) {
  .gr-head { grid-template-columns: auto minmax(0, 1fr); }
  .gr-syn { grid-column: 1 / -1; grid-row: 1; justify-self: end; }
}
@container hwg (max-width: 420px) {
  .dip { --dip-c: 28px; }
  .gr-glyph { width: 64px; height: 64px; }
}
.hw-gkey .key { margin-top: 20px; }
.hw-gkey .key i { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .5); }   /* the swatches carry the cells' fine outline */

/* ---------- Responsive ---------- */
@media (max-width: 760px) {
  .hw-fig { margin: 4px 0 24px; }
  .hw-out { --n: 1; }
}