/* The APOE zoom for "DIY genomics" (apoe-zoom.js).
   Built on the site's tokens: square corners, mono labels in tight boxes,
   one sequential ramp from the page colour to --ink-blue, --ink-orange for
   the genes the post talks about. */

.genome-ramp {
  --ramp: linear-gradient(in oklab to right,
    color-mix(in oklab, var(--ink-blue) 12%, var(--bg)),
    var(--ink-blue) 75%,
    color-mix(in oklab, var(--ink-blue) 70%, var(--fg)));
}

/* Labels, legends and the codon rows share one small mono style. */
.zm-nav,
.zm-foot,
.zm-svg text,
.zm-letters,
.zm-table {
  font-family: var(--mono);
  font-size: 0.8125rem;
  line-height: 1.5;
}

/* The zoom: four views of one figure, chosen with the row of buttons. */
.prose .apoe-zoom {
  margin: 1.75rem 0;
}
.zm-nav {
  display: none;
  flex-wrap: wrap;
  width: fit-content;
  background: var(--box-head);
  font-weight: 700;
}
.zm-js .zm-nav {
  display: flex;
}
.zm-nav button {
  margin: 0;
  padding: 0 0.5em;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
/* On phones the row wraps, so each button gets a 24px-tall target. */
@media (max-width: 52rem) {
  .zm-nav button {
    min-height: 24px;
  }
}
.zm-nav button[aria-pressed="true"] {
  background: var(--selected);
}
.zm-nav button:hover {
  background: var(--accent);
  color: var(--accent-fg);
}
.zm-nav .sep {
  padding: 0 0.15em;
  color: var(--muted);
  font-weight: 400;
}
.zm-stage {
  display: grid;
  gap: 1.75rem;
  margin-top: 0.75rem;
}
.zm-view {
  min-width: 0;
  padding: 1rem 1.25rem 1.1rem;
  background: var(--box);
}
.zm-js .zm-view:not(.on) {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .zm-js .zm-view.on {
    animation: zm-in 180ms ease;
  }
}
@keyframes zm-in {
  from { opacity: 0; }
}
.zm-foot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.35rem 1.5rem;
  margin-top: 0.75rem;
  color: var(--muted);
}
.zm-legend i {
  display: inline-block;
  width: 5rem;
  height: 0.7rem;
  margin: 0 0.6ch;
  vertical-align: -0.05em;
  background: var(--ramp);
}
.zm-key {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
}
.zm-key > span {
  display: inline-flex;
  align-items: center;
  gap: 0.6ch;
}
.zm-key i {
  display: inline-block;
  width: 1.25rem;
  background: var(--ink-blue);
}
.zm-key .cds { height: 0.9rem; }
.zm-key .utr { height: 0.45rem; }
.zm-key .intron { height: 1.5px; background: var(--muted); }
.prose .zm-hint {
  margin: 0;
  color: var(--fg);
}
.apoe-zoom:not(.zm-js) .zm-view:not(:last-child) {
  display: none;
}
.zm-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.zm-svg text {
  fill: var(--muted);
  font-size: 11px;
}
.zm-svg .strong {
  fill: var(--fg);
  font-weight: 700;
}
.zm-svg .hit {
  cursor: zoom-in;
}
.zm-svg .hit:hover .ring,
.zm-svg .hit:focus-visible .ring {
  stroke: var(--accent);
}
.zm-svg .hit:focus {
  outline: none;
}
.zm-svg .hit:hover .gene,
.zm-svg .hit:focus-visible .gene {
  stroke: var(--accent);
}
.zm-svg .hit:hover text,
.zm-svg .hit:focus-visible text {
  fill: var(--accent);
}
.zm-svg .hit:hover .chip,
.zm-svg .hit:focus-visible .chip {
  fill: var(--accent);
}
.zm-svg .hit:hover .chip-text,
.zm-svg .hit:focus-visible .chip-text {
  fill: var(--accent-fg);
}
/* The codon rows are 50 characters wide; on a narrow screen the type
   shrinks to fit them rather than scrolling. */
.zm-view {
  container-type: inline-size;
}
.zm-letters {
  display: grid;
  gap: 1.25rem;
  font-size: min(0.8125rem, 100cqw / 30.5);
}
.zm-codons {
  min-width: 0;
  overflow-x: auto;
}
.zm-row {
  white-space: pre;
}
.zm-row .who {
  display: inline-block;
  width: 20ch;
  color: var(--muted);
}
.zm-row.title .who {
  color: var(--fg);
  font-weight: 700;
}
.zm-row.dim {
  color: var(--muted);
}
.zm-row .focus {
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background: var(--hl);
  font-weight: 700;
}
.zm-row .diff {
  background: var(--ink-orange);
  color: var(--ink-orange-fg);
}
.zm-row .aa {
  margin-left: 2ch;
}
.apoe-zoom .zm-table {
  margin: 1.25rem 0 0;
  border-collapse: collapse;
}
.zm-table th,
.zm-table td {
  padding: 0.1rem 2ch 0.1rem 0;
  text-align: left;
  background: none;
  border: 0;
}
.zm-table th {
  color: var(--muted);
  font-weight: 400;
}
.zm-table tr.mine td {
  font-weight: 700;
}
.zm-table tr.mine td:first-child span {
  padding: 0 0.1em;
  margin: 0 -0.1em;
  background: var(--hl);
}

/* Eight steps of the same ramp as the map, for SVG fills. */
.zm-svg .r0 { fill: color-mix(in oklab, var(--ink-blue) 12%, var(--bg)); }
.zm-svg .r1 { fill: color-mix(in oklab, var(--ink-blue) 29%, var(--bg)); }
.zm-svg .r2 { fill: color-mix(in oklab, var(--ink-blue) 46%, var(--bg)); }
.zm-svg .r3 { fill: color-mix(in oklab, var(--ink-blue) 62%, var(--bg)); }
.zm-svg .r4 { fill: color-mix(in oklab, var(--ink-blue) 79%, var(--bg)); }
.zm-svg .r5 { fill: color-mix(in oklab, var(--ink-blue) 96%, var(--bg)); }
.zm-svg .r6 { fill: color-mix(in oklab, var(--ink-blue) 87%, var(--fg)); }
.zm-svg .r7 { fill: color-mix(in oklab, var(--ink-blue) 70%, var(--fg)); }
.zm-svg .frame { fill: none; stroke: var(--rule); stroke-width: 1; }
.zm-svg .ring { fill: none; stroke: var(--ink-orange); stroke-width: 2; }
.zm-svg .axis { stroke: var(--rule); stroke-width: 1; fill: none; }
.zm-svg .intron { stroke: var(--muted); stroke-width: 1.5; fill: none; }
.zm-svg .exon { fill: var(--ink-blue); }
.zm-svg .gene { stroke: var(--ink-orange); stroke-width: 3; fill: none; }
.zm-svg .gene.slim { stroke-width: 2; }
.zm-svg .gene-fill { fill: var(--ink-orange); }
.zm-svg .quiet { stroke: var(--fg); stroke-width: 2; fill: none; }
.zm-svg .gap { stroke: var(--box); stroke-width: 4.5; }
.zm-svg .gap.wide { stroke-width: 8; }
.zm-svg .chip { fill: var(--ink-orange); }
.zm-svg .chip-text { fill: var(--ink-orange-fg); font-weight: 700; }
.zm-svg .halo { fill: transparent; }
.zm-svg .dim { stroke: var(--muted); stroke-width: 1; }
.zm-svg .knock { fill: var(--box); }