/* problem: home section 01. Three cards (glyph, title, one line) and the karyogram of the synthetic genome.
   Type, sheet, key and chip are core components; this file lays them out and draws the figure marks only, in the films'
   grammar: warm-grey data with fine ink outlines, ink labels, one orange key element. */

/* ---------- Cards: the hero's grammar, a 1.5px top rule over each ---------- */
.pb-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.pb-cards > li { min-width: 0; border-top: 1.5px solid currentColor; padding-top: 20px; }
.pb-g { display: block; margin: 0 0 24px; color: var(--tone); line-height: 0; }
.pb-g svg { display: block; overflow: visible; }
/* Glyph atoms (problem.js): warm-grey spheres, lighter toward the top left, each with a thin ink outline */
.pb-g .pb-at { stroke: var(--ink); stroke-opacity: .74; stroke-width: 1px; vector-effect: non-scaling-stroke; }
.pb-g .a1 { fill: var(--g1); }
.pb-g .a2 { fill: var(--g2); }
.pb-g .a3 { fill: var(--g3); }
.pb-cards .small { margin: 0; }

/* ---------- Karyogram: one column per chromosome, one bar per 10 Mb, drawn 1:1 by problem.js ---------- */
.pb-fig { margin-left: 0; margin-right: 0; margin-bottom: 0; }
.pb-plot { min-width: 0; }
#karyo { display: block; width: 100%; height: auto; overflow: visible; }
/* Axis numbers: small Figtree, muted, tabular */
#karyo text { font-family: var(--font); font-size: 11px; font-weight: 400; fill: var(--muted); font-variant-numeric: tabular-nums; }
#karyo .pb-cells { shape-rendering: crispEdges; }
/* Data cells: the films' panel cells, a fill and a fine ink outline (inset half a pixel by problem.js) */
#karyo .pb-c.o, #karyo .pb-c.e, #karyo .pb-hot { stroke: var(--ink); stroke-opacity: .5; stroke-width: 1px; }
#karyo .pb-c.o { fill: var(--blue-500); }
#karyo .pb-c.e { fill: var(--blue-100); }
#karyo .pb-c.h { fill: none; stroke: var(--line-2); stroke-width: 1.5px; }   /* a bin with no records */
#karyo .pb-hot { fill: var(--signal); stroke-opacity: .6; }
/* The films' label: ink hairline leader, a dot on the subject, small Figtree caps */
#karyo .pb-pins { shape-rendering: geometricPrecision; }
#karyo .pb-stem { fill: none; stroke: var(--ink); stroke-opacity: .55; stroke-width: 1.1px; }
#karyo .pb-sq { fill: var(--ink); fill-opacity: .88; }
#karyo .pb-pl { font-family: var(--font); font-size: 11px; font-weight: 500; letter-spacing: .1em; fill: var(--ink); fill-opacity: .88; }
/* (The legend's plain swatches take the same 1px ink outline from core .key, so they match the cells.) */
/* Before the build plays (problem.js adds .wait only when motion is allowed) */
.pb-fig.wait #karyo .pb-col > *, .pb-fig.wait #karyo .pb-pin > * { opacity: 0; }

/* ---------- Phones: one card per row, the 28px glyph left of its title ---------- */
@media (max-width: 760px) {
  .pb-cards { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pb-cards > li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 16px; align-items: start; padding-top: 16px; }
  .pb-g { grid-row: span 2; margin: 0; }
  .pb-g svg { width: 28px; height: 28px; }
  .pb-g .pb-at { stroke-width: .75px; }
}