/* platform: the Platform overview and Modules sub-pages (#pf) and the home teaser (#next).
   Layout only: type, sheets, tags, keys, readouts, buttons, action links and the .dg drawing come from core and kit unchanged.
   Status colours follow the status tags: In development = ink square, Planned = hollow square. A built item carries no
   status mark, so it is the films' neutral matter: a warm-grey square with a fine ink outline (--pf-built, --pf-ol), never
   orange. Orange marks one key element only: the selected panel site (a variant) and, on its tab, the proof artefact. */
.pf, .pfh { --pf-ol: rgba(17, 17, 17, .5); --pf-built: var(--g3); }

/* ---------- The chain (home and overview): the V3.dg drawing, with the overview's step buttons behind it ---------- */
.pf-cf { position: relative; max-width: calc(var(--dg-w, 840) * 1.15px); overflow-anchor: none; }
.pf-cf > .dg { position: relative; z-index: 1; pointer-events: none; }
.pf-pre > * { visibility: hidden; }   /* until the build starts (never under reduced motion) */
.pf-hits { position: absolute; inset: 0; z-index: 0; }
.pf-hit { position: absolute; }
/* Step buttons and the compact grid's cells share one look: a tint on hover, the selection tint and an ink rule when pressed. */
.pf-hit, .pf-gc { margin: 0; padding: 0; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: inherit; font: inherit; cursor: pointer; transition: background var(--t1), border-color var(--t1); }
.pf-hit:hover, .pf-gc:hover { background: var(--soft); }
.pf-hit[aria-pressed="true"], .pf-gc[aria-pressed="true"] { background: var(--sel); border-bottom-color: var(--ink); }
.pf-hit:focus-visible, .pf-gc:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pf-cf.v .pf-hit { border-bottom: 0; }   /* rows: the tint alone marks the step */

/* Home teaser */
.pfh-fig { margin: 0 0 48px; }
.pfh-rd { margin-top: 40px; }
.pfh-src { margin-top: 16px; }
.pfh-go { margin: 0; }

/* ---------- Overview · the chain sheet and its readout ---------- */
.pf-chainbox { margin: 0; overflow-anchor: none; }
.pf-read { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 20px 48px; margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.pf-r1 .k { margin: 0 0 8px; }
.pf-r1 .h3 { margin: 0 0 4px; }
.pf-r1 .small { margin: 0; }
.pf-rd { margin: 14px 0 0; }
.pf-r2 { display: grid; gap: 12px; align-content: start; margin: 0; }
.pf-r2 > div { padding-top: 10px; border-top: 1px solid var(--line); }
.pf-r2 > div:first-child { padding-top: 0; border-top: 0; }
.pf-r2 dt { margin: 0 0 6px; }
.pf-r2 dd { margin: 0; font-size: 15px; line-height: 1.5; }
.pf-r2 dd + dd { margin-top: 6px; }
.pf-r2 dd > .tag:first-child { margin-right: 6px; }
.pf-r2 .acts { gap: 6px 20px; }

/* ---------- Overview · panel sites: one row per gene (label · track · check) ----------
   Track: an ink base line, PharmCAT's positions as hairline ticks under it, our sites as 12px squares on stems
   (sites closer than 16px stack upwards in lanes: --lane per site, --lanes per row, set by platform.js). */
.pf-sfig { margin: 0; overflow-anchor: none; }
.pf-srd { margin: 0 0 28px; }
.pf-srows { position: relative; border-top: 1px solid var(--line); }
.pf-tip { --c: var(--ink); position: absolute; z-index: 20; display: inline-flex; align-items: center; gap: 6px; padding: 3px 7px; background: var(--white); border: 1px solid var(--ink); white-space: nowrap; pointer-events: none; }
.pf-tip.live { --c: var(--pf-built); }
.pf-tip::before { content: ""; width: 7px; height: 7px; flex: none; background: var(--c); box-shadow: inset 0 0 0 1px var(--pf-ol); }
.pf-sr { display: grid; grid-template-columns: 172px minmax(0, 1fr) 56px; gap: 0 20px; align-items: end; margin: 0 -8px; padding: 8px 8px 4px; border-bottom: 1px solid var(--line); transition: background var(--t1); }
.pf-sr.on { background: var(--soft); }
.pf-sl { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding-bottom: 6px; }
.pf-sl .data { font-weight: 500; }
.pf-sl .k { white-space: nowrap; }
.pf-st { position: relative; height: calc(52px + var(--lanes, 0) * 16px); }
.pf-bl { position: absolute; left: 0; right: 0; bottom: 10px; height: 1px; background: var(--ink); transform-origin: 0 50%; }
.pf-tks { position: absolute; left: 0; bottom: 2px; width: 100%; height: 8px; overflow: visible; }
.pf-tks path { fill: none; stroke: var(--dash); stroke-width: 1px; vector-effect: non-scaling-stroke; shape-rendering: crispEdges; }
.pf-sq { --c: var(--ink); position: absolute; bottom: 11px; width: 24px; height: calc(24px + var(--lane, 0) * 16px); margin: 0; padding: 0; border: 0; border-radius: 0; background: none; transform: translateX(-50%); cursor: pointer; }
.pf-sq.live { --c: var(--pf-built); }
/* A site: its square (status colour, fine ink outline) on a fine ink leader down to its true position. */
.pf-sq::before { content: ""; position: absolute; top: 0; left: 6px; width: 12px; height: 12px; background: var(--c); box-shadow: inset 0 0 0 1px var(--pf-ol); transition: background-color var(--t2) var(--ease); }
.pf-sq::after { content: ""; position: absolute; top: 12px; bottom: 0; left: 11.5px; width: 1px; background: var(--pf-ol); }
/* The selected site is the figure's one orange element: the variant named in the line under the rows. */
.pf-sq[aria-pressed="true"] { --c: var(--signal); }
.pf-sq[aria-pressed="true"]::before { outline: 1px solid var(--ink); outline-offset: 2px; }
.pf-sq:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.pf-sv { display: flex; align-items: center; justify-content: flex-end; gap: 6px; padding-bottom: 6px; color: var(--muted); }
.pf-sv.ok { color: var(--tone); }
.pf-sd { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-height: 48px; margin: 16px 0 0; }
.pf-sd .data b { font-weight: 500; }
.pf-sok { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--muted); }
.pf-sok svg { color: var(--tone); }
.pf-skey i.pf-ktick { width: 1.5px; height: 10px; margin-right: 8px; background: var(--dash); }
/* The key's "In the proof" swatch (set in the page as --mk:var(--blue-900), now ink) takes the built grey of the squares. */
.pf-skey i[style*="blue-900"] { background: var(--pf-built); box-shadow: inset 0 0 0 1px var(--pf-ol); }

/* ---------- Overview · what a new proof costs ----------
   One row per run: label · track · value. The track's hairlines divide it into --n equal round steps; the bar (--f) is
   scaled from the left, so a tab switch is one transform transition. The axis under the rows uses the same columns. */
.pf-bfig { margin: 0; overflow-anchor: none; }
.pf-btabs { margin: 0 0 20px; }
.pf-btk { min-height: 46px; margin: 0 0 12px; max-width: 52em; font-size: 15px; line-height: 1.5; }
.pf-bplot { --lw: 190px; --vw: 104px; --gap: 16px; border-top: 1px solid var(--line); }
.pf-brows { display: grid; }
.pf-brow { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); gap: 0 var(--gap); align-items: center; width: 100%; margin: 0; padding: 9px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--t1); }
.pf-brow:hover { background: var(--soft); }
.pf-brow[aria-pressed="true"] { background: var(--sel); }
.pf-brow:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pf-blab { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding-left: 10px; }
.pf-blab .data { font-weight: 500; white-space: nowrap; }
.pf-blab .k { white-space: nowrap; }
.pf-btr { position: relative; height: 30px; background: linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / calc(100% / var(--n, 5)) 100% repeat-x; box-shadow: inset -1px 0 var(--line); }
/* Bars are the films' warm-grey data with a fine ink edge; the run shown in the readout is ink; on the Proof size tab the
   bars are orange (orange = the proof artefact). */
.pf-bbar { position: absolute; left: 0; top: 8px; width: 100%; height: 14px; background: var(--pf-built); box-shadow: inset 0 1px 0 var(--pf-ol), inset 0 -1px 0 var(--pf-ol); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; transition: transform calc(var(--t3) * 1.25) var(--ease), background-color var(--t2) var(--ease); }
.pf-bfig[data-m="size"] .pf-bbar { background: var(--signal); }
.pf-brow[aria-pressed="true"] .pf-bbar { background: var(--ink); box-shadow: none; }
.pf-bkey i { box-shadow: inset 0 0 0 1px var(--pf-ol); }
.pf-bv { padding-right: 10px; font: 13px/1.3 var(--mono); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.pf-bax { display: grid; grid-template-columns: var(--lw) minmax(0, 1fr) var(--vw); gap: 0 var(--gap); }
.pf-bax > div { grid-column: 2; position: relative; height: 30px; }
.pf-baxl { position: absolute; inset: 0; }
.pf-baxl span { position: absolute; top: 9px; transform: translateX(-50%); font: 11px/1.3 var(--mono); letter-spacing: .02em; color: var(--muted); white-space: nowrap; }
.pf-baxl span:first-child { transform: none; }
.pf-baxl span:last-child { transform: translateX(-100%); }
.pf-baxl em { font-style: normal; }
.pf-bro { margin: 28px 0 0; }
.pf-bkey { margin-top: 24px; }

/* ---------- Overview · two labels per claim ----------
   From 1280px every example is a button in its cell. Below that each cell shows its count; the selected cell's examples
   (#pf-mxd) and the "why" sit under the table. Up to 760px the table becomes a grid with each tier on its own line. */
.pf-mxbox { overflow-anchor: none; }
.pf-mxbox > .sheet-head { padding: 20px 24px 16px; margin: 0; }
.pf-mx-scroll { padding: 8px 24px 0; }
.pf-mx { width: 100%; border-collapse: collapse; table-layout: fixed; }
.pf-mx th, .pf-mx td { text-align: left; vertical-align: top; padding: 12px 10px; font-weight: 400; }
.pf-mx thead th { border-bottom: 1px solid var(--ink); transition: background var(--t2); }
.pf-thd { display: block; margin-top: 8px; font-size: 13px; line-height: 1.35; color: var(--muted); }
.pf-mx .pf-corner { width: 25%; vertical-align: bottom; }
.pf-mx tbody th { border-bottom: 1px solid var(--line); transition: background var(--t2); }
.pf-mx tbody th .tag { white-space: normal; }
.pf-mx td { border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background var(--t2); }
.pf-mx tbody tr:last-child th, .pf-mx tbody tr:last-child td { border-bottom: 0; }
.pf-dash { font-family: var(--mono); color: var(--line-2); }
.pf-mx th.hl, .pf-mx td.on { background: var(--soft); }
.pf-ex { width: 100%; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0 0 6px; }
.pf-ex:last-of-type { margin-bottom: 0; }
.pf-ext { display: block; }
.pf-ex .tag { max-width: 100%; white-space: normal; }
.pf-gc { display: none; align-items: center; width: 100%; min-height: 44px; padding: 0 8px; }
.pf-thk, .pf-narrow { display: none; }
.pf-mxd { margin: 16px 24px 0; }
.pf-mxd .pf-ex { margin: 0; }
.pf-why { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 16px 40px; min-height: 184px; margin: 16px 24px 0; padding: 20px 0 24px; border-top: 1px solid var(--ink); }
.pf-why-h .k { margin: 0 0 8px; }
.pf-why-h .h4 { margin: 0 0 12px; }
.pf-why-h .tags { margin: 0; }
.pf-why-c { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-content: start; }
.pf-why-c .k { margin: 0 0 6px; }
.pf-why-c p:not(.k):not(.fnote) { margin: 0; font-size: 15px; line-height: 1.5; }
.pf-why-f { grid-column: 1 / -1; padding-top: 12px; border-top: 1px solid var(--line); }
.pf-cites { grid-column: 1 / -1; margin: 0; }

/* ---------- Modules · status board ----------
   One column per module: its plan items as squares, bottom-up built · In development · Planned; the id and name under it;
   a rule with the layer under each layer's columns. Below 761px each module is a row with its squares at the end. */
.pf-legend { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 0 0 32px; padding: 0; }
.pf-legend div { display: flex; align-items: center; gap: 8px; }
.pf-legend dt, .pf-legend dd { margin: 0; }
.pf-legend dd { font-size: 14px; color: var(--muted); }
.pf-board { margin: 0 0 48px; overflow-anchor: none; }
.pf-brd { margin: 0 0 32px; }
.pf-bd { display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: 0 6px; container: pfbd / inline-size; }
.pf-bc { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; margin: 0; padding: 12px 6px 14px; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background var(--t1), border-color var(--t1); }
.pf-bc:hover, .pf-bc.on { background: var(--sel); }
.pf-bc.on { border-bottom-color: var(--ink); }
.pf-bc:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.pf-bs { display: flex; flex-direction: column-reverse; justify-content: flex-start; gap: 3px; height: calc(var(--rows, 7) * 17px - 3px); }
.pf-bs i { display: block; flex: none; width: 14px; height: 14px; background: var(--ink); }   /* In development */
.pf-bs i.live { background: var(--pf-built); box-shadow: inset 0 0 0 1px var(--pf-ol); }   /* built: no status mark */
.pf-bs i.planned { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.pf-bid { color: var(--tone); }
.pf-bn { font-size: 13px; line-height: 1.3; color: var(--muted); hyphens: manual; }   /* whole words; M3 uses its short chart name */
/* Too narrow for names: the ids alone (names stay in the selection line and the labels). */
@container pfbd (max-width: 700px) { .pf-bn { display: none; } }
.pf-bc:hover .pf-bn, .pf-bc.on .pf-bn { color: var(--ink); }
.pf-bnf { display: none; }   /* the full name where the short chart name stands in (rows on phones) */
.pf-blay { margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--ink); white-space: nowrap; }
.pf-bs i.hl { outline: 1.5px solid var(--ink); outline-offset: 1px; }
/* The selected column's items, one per square */
.pf-bsel { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 52px; margin: 16px 0 0; font-size: 15px; color: var(--muted); }
.pf-bsel b { flex-basis: 100%; font-weight: 500; color: var(--ink); }
.pf-bit { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; color: var(--ink); }
.pf-bit i { flex: none; width: 8px; height: 8px; background: var(--ink); }
.pf-bit i.live { background: var(--pf-built); box-shadow: inset 0 0 0 1px var(--pf-ol); }
.pf-bit i.planned { background: none; box-shadow: inset 0 0 0 1.5px var(--muted); }
.pf-bit.hl { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }

/* ---------- Modules · ten .mod-head rows, one plan open at a time ---------- */
.pf-list { border-bottom: 1px solid var(--rule); }
.pf-mod { padding-bottom: 32px; }
.pf-mh { cursor: pointer; }
.pf-mb { display: inline-flex; align-items: center; gap: 14px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-align: left; cursor: pointer; transition: color var(--t1); }
.pf-mh:hover .pf-mb { color: var(--tone); }
.pf-pm { width: 12px; height: 12px; flex: none; background: linear-gradient(currentColor, currentColor) center / 12px 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 12px no-repeat; }
.pf-mod.open .pf-pm { background: linear-gradient(currentColor, currentColor) center / 12px 3px no-repeat; }
.pf-det { margin-top: 24px; }
.pf-dl { margin: 0 0 24px; max-width: 54em; }
.pf-dcols { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 28px 48px; }
.pf-bul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.pf-bul li { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 6px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.pf-bul li > .tag { justify-self: start; align-self: start; margin-top: 1px; }
.pf-bul li > p:first-child { grid-column: 1 / -1; }   /* a built item has no status tag */
.pf-bul:has(> li > .tag) li > p:first-child { grid-column: 2; }   /* in a plan with tagged items its text stays in their column */
.pf-bul p { margin: 0; font-size: 15px; line-height: 1.5; }
.pf-bul b { font-weight: 500; }
.pf-bul + .fnote, .pf-bul + .note { margin-top: 16px; }
.pf-da > .k { margin: 0 0 8px; }
.pf-dep { margin: 0 0 24px; font-size: 15px; }
.pf-try { margin: 0 0 20px; }
.pf-try .fnote { margin-top: 10px; }

/* ---------- Wider screens: a fixed readout height so hovering the chain does not move the page ---------- */
@media (min-width: 1001px) {
  .pf-read { min-height: 280px; }
}

/* ---------- Below 1280px (where the six tabs leave the table too narrow for names): counts in the cells,
   the selected cell's examples and its "why" under the table ---------- */
@media (min-width: 1280px) {
  .pf-mxd { display: none; }
}
@media (max-width: 1279px) {
  .pf-mx-scroll { padding: 4px 20px 0; }
  .pf-mx .pf-corner { width: 34%; }   /* counts need little room; the tier tags keep one line */
  .pf-mx.g td { padding: 4px; vertical-align: middle; }
  .pf-mx.g td .pf-ex { display: none; }
  .pf-mx.g .pf-gc { display: flex; }
  .pf-mx.g td.pf-empty { padding: 4px 12px; }
  .pf-mx-hint .pf-wide { display: none; }
  .pf-mx-hint .pf-narrow { display: inline; }
  .pf-mxd { margin: 20px 20px 0; }
  .pf-why { grid-template-columns: minmax(0, 1fr); margin: 20px 20px 0; min-height: 0; }
}
@media (max-width: 1100px) {
  .pf-dcols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1000px) {
  .pf-read { grid-template-columns: minmax(0, 1fr); }
  .pf-sr { grid-template-columns: 140px minmax(0, 1fr) 48px; gap: 0 14px; }
}
@media (max-width: 760px) {
  .pf-mxbox > .sheet-head { padding: 16px 16px 12px; }
  .pf-mx-scroll { padding: 8px 16px 0; }
  /* the grid: status words over the columns, each tier's tag on its own line above its cells */
  .pf-mx, .pf-mx thead, .pf-mx tbody { display: block; }
  .pf-mx tr { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
  .pf-mx .pf-corner { display: none; }
  .pf-mx thead th { padding: 0 0 8px 12px; }
  .pf-mx thead th > .tag, .pf-mx thead .pf-thd, .pf-mx tbody .pf-thd { display: none; }
  .pf-mx .pf-thk { display: block; }
  .pf-mx tbody th { grid-column: 1 / -1; padding: 16px 0 8px; border-bottom: 0; }
  .pf-mx tbody th.hl { background: none; }
  .pf-mx tbody th + td { border-left: 0; }
  .pf-mx.g td { display: flex; align-items: center; min-height: 52px; }
  .pf-mxd, .pf-why { margin: 16px 16px 0; }
  .pf-why-c { grid-template-columns: minmax(0, 1fr); }
  .pf-legend { gap: 8px 18px; margin-bottom: 24px; }
  .pf-mod { padding-bottom: 24px; }
  .pf-det { margin-top: 20px; }
  /* panel sites: label and check on one line, the track under them */
  .pf-sr { grid-template-columns: minmax(0, 1fr) auto; gap: 0 12px; padding-top: 10px; }
  .pf-sl { flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-bottom: 0; }
  .pf-sv { padding-bottom: 0; }
  .pf-st { grid-column: 1 / -1; grid-row: 2; }
  .pf-sd { align-items: flex-start; }
  /* board: one row per module, squares at the end */
  .pf-bd { grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
  .pf-bc { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 0 12px; padding: 10px 8px; border-bottom: 1px solid var(--line); }
  .pf-bc.on { border-bottom-color: var(--ink); }
  .pf-bid { order: 1; }
  .pf-bd .pf-bc .pf-bn { order: 2; display: block; font-size: 14px; }
  .pf-bnc { display: none; }
  .pf-bnf { display: inline; }
  .pf-bs { order: 3; flex-direction: row; height: auto; gap: 3px; }
  .pf-bs i { width: 12px; height: 12px; }
  .pf-blay { display: none; }
}
@media (max-width: 560px) {
  .pf-bul li { grid-template-columns: minmax(0, 1fr); }
  .pf-bul:has(> li > .tag) li > p:first-child { grid-column: 1 / -1; }
  /* measured runs: label and value on one line, the track full width under them */
  .pf-brow { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "l v" "t t"; gap: 6px 12px; padding: 10px 8px; }
  .pf-blab { grid-area: l; flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding-left: 0; }
  .pf-bv { grid-area: v; padding-right: 0; }
  .pf-btr { grid-area: t; }
  .pf-bax { grid-template-columns: minmax(0, 1fr); padding: 0 8px; }
  .pf-bax > div { grid-column: 1; }
  .pf-baxl em { display: none; }   /* no room for the unit beside the last-but-one tick; the values carry it */
  .pf-btk { min-height: 68px; }
}
.pf-wb { margin-top: 20px; }