/* ============================================================
GIN Physiology subject and topic styles.
This file is a SUPPLEMENT to the global Micro-Kit, not a
replacement for it. Pages compose mk- classes; the two rules
below exist only because the kit alone gets them wrong, and
they are the same two the GIN Pharmacology supplement carries
(see pharmacology.css). Nothing here is per-page.
============================================================ */
/* 1 — mk-hue-* only define the pill tokens, so a hued card has no
visible hue. Spend the token on a left border. */
.gin-phys .mk-factor[class*="mk-hue-"],
.gin-phys .mk-card[class*="mk-hue-"] {
border-left: 4px solid var(--mk-pill-bd, #cbd5e1);
}
/* 2 — The kit sets a titled-list's leading strong to 14.5px, BELOW the
15px body text, which reads as a broken title. A title must
always outrank the text under it. */
.gin-phys .mk-symptoms > li > strong:first-of-type,
.gin-phys .mk-titled-list > li > strong:first-of-type,
.gin-phys .mk-titled-list > li > .cav-term:first-of-type {
font-size: 15.75px;
font-weight: 800;
color: #111111;
}
/* 3 — The kit sets .mk-lead to 15px, identical to .mk-body, so a section
lead does not read as a lead. Same fix .gin-pharm carries. */
.gin-phys .mk-lead {
font-size: 16.5px;
line-height: 1.55;
color: #111111;
}
/* ================================================================
4 — NO DEAD CELL AT THE END OF A CARD GRID.
A 3-column grid holding 5 cards renders 3 + 2 and leaves a hole in
the bottom-right corner; a 2-column grid holding 3 leaves one at the
right. Chris flagged both as "awkward white space".
Fix: run the grid on a finer track count (6 for --3, 4 for --2) with
each card spanning 2, so a short last row can be widened to fill.
· a LONE trailing card spans the whole row
· TWO trailing cards in a 3-col grid take half the row each
Cards are never merged and the gap is preserved — only a short
trailing row is elongated, which is the settled house rule.
Scoped to .gin-phys so no other module's grids shift.
================================================================ */
.gin-phys .mk-grid--3 {
grid-template-columns: repeat(6, minmax(0, 1fr));
}
.gin-phys .mk-grid--3 > * { grid-column: span 2; }
/* 3-col: last row holds ONE card → it spans the full row */
.gin-phys .mk-grid--3 > :last-child:nth-child(3n + 1) { grid-column: span 6; }
/* 3-col: last row holds TWO cards → half the row each */
.gin-phys .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1),
.gin-phys .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1) ~ * { grid-column: span 3; }
.gin-phys .mk-grid--2 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
.gin-phys .mk-grid--2 > * { grid-column: span 2; }
/* 2-col: a lone trailing card spans the full row */
.gin-phys .mk-grid--2 > :last-child:nth-child(2n + 1) { grid-column: span 4; }
/* Below the kit's own breakpoint everything is a single column anyway, so
release the spans rather than fighting them. */
@media (max-width: 640px) {
.gin-phys .mk-grid--3,
.gin-phys .mk-grid--2 { grid-template-columns: minmax(0, 1fr); }
.gin-phys .mk-grid--3 > *,
.gin-phys .mk-grid--2 > *,
.gin-phys .mk-grid--3 > :last-child:nth-child(3n + 1),
.gin-phys .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1),
.gin-phys .mk-grid--3 > :nth-last-child(2):nth-child(3n + 1) ~ *,
.gin-phys .mk-grid--2 > :last-child:nth-child(2n + 1) { grid-column: auto; }
}
/* ============================================================
5 — SOURCED PHOTOS RENDER AT FIGURE WIDTH, NOT AS A 168px THUMB
path-figure.css (RAR Pathology, but scoped to BOTH .rar-topic-content
and .gin-topic-content) pins `.atl-figure__btn .atl-figure__img` to
height:168px with no width constraint, which letterboxes a photo
inside its button. It loads AFTER this file in index.html, so at equal
specificity it wins — three classes each.
So this carries a fourth class (.atl-figure) purely for specificity,
which is exactly the fix GIN Pharmacology already uses for the same
collision. Keep them in step: if one changes, change both.
The ⤢ Zoom lightbox still opens the image at native resolution, so
nothing is lost by sizing the inline copy to its column — which is what
a histology slide beside a card grid needs.
============================================================ */
.gin-phys .atl-figure .atl-figure__btn .atl-figure__img {
width: 100%;
height: auto;
}
/* ============================================================
6 — FULL-WIDTH AUTHORED FIGURES (.phys-fig--wide)
The kit's .mk-fig--band caps every figure at 940px. An authored SVG
scales to its container, so on a wide desktop card (~1396px) that cap
throws away a third of the width AND shrinks every baked-in label —
Chris's rule from the GIN Anatomy review: "wider is bigger, for free",
and never leave an authored diagram in --band.
The Anatomy fix (.anat-fig--wide) is scoped to .gin-anat, so it cannot
reach Physiology pages; this is the same rule for .gin-phys. Use it
INSTEAD OF .mk-fig--band on an authored diagram, and keep .mk-fig--dense
alongside it: --dense is standalone (its 640px phone floor does not
depend on --band), so a figure is full width on a desktop and still
floors-and-scrolls on a phone rather than shrinking.
The SVG inside is untouched — only the wrapper changes, so a figure
inserted verbatim stays verbatim. Two classes plus the scope clear the
kit's `.mk-fig { margin: 0 }`, declared later.
============================================================ */
.gin-phys .mk-fig.phys-fig--wide {
width: 100%;
max-width: none;
margin: 14px 0 16px;
}
/* ================================================================
7. SIMULATOR "What this is built to prove" boxes — a DROPDOWN.
Chris, 2026-09-23: "lets make the red a drop down". Every GIN
Physiology simulator (SlowWaveSim, HormoneMatcher, EsophagealManometry,
SalivaFlowRate, PotentiationDemo, EnterohepaticLoop, SegPerAnimator)
closes on the same red .locked box; each now renders it as
…
…