. */
.mk-titled-list > li > strong:first-of-type,
.mk-symptoms > li > strong:first-of-type { font-size: 14.5px; }
.mk-titled-list > li { margin-bottom: 6px; line-height: 1.5; }
.mk-titled-list > li > strong:first-of-type .cav-term,
.mk-titled-list > li > .cav-term:first-of-type,
.mk-symptoms > li > strong:first-of-type .cav-term,
.mk-symptoms > li > .cav-term:first-of-type {
color: var(--mk-ink); font-weight: 800;
border-bottom-color: rgba(17, 17, 17, 0.5);
}
/* an inline hover term that reads as a BLACK label (not a blue link) — for
disease-name / title-like terms in running text (e.g. "meningitis",
"Guillain-Barré syndrome"). Keeps the dotted hover underline. */
.cav-term.cav-term--ink { color: var(--mk-ink); border-bottom-color: rgba(17, 17, 17, 0.5); }
/* ---------- pill-led rows (virulence factors, à la CAV-pharm drug pills):
a black title in a fun colored pill, description trailing. Set a hue on the li. */
.mk-pill-list { list-style: none; margin: 8px 0 0; padding: 0; }
.mk-pill-list > li { color: var(--mk-ink); font-size: 15px; line-height: 1.75; margin-bottom: 10px; }
.mk-pill-list > li > .cav-term.mk-pill:first-child,
.mk-pill-list > li > .mk-pill:first-child { margin-right: 4px; }
/* ---------- generic content card ---------- */
.mk-card {
margin: 4px 0 0; padding: 16px 18px; border-radius: 16px;
border: 1px solid rgba(10, 132, 255, 0.16);
background: linear-gradient(180deg, rgba(238, 245, 255, 0.55), rgba(255, 255, 255, 0.96));
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
overflow: visible; /* never clip a hover bubble */
}
/* ---------- side-by-side card grid ---------- */
.mk-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
.mk-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mk-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* short, thin vertical divider centered in the gap of a 2-col grid — reads as
"these two are separate" without a full-height rule. Hidden once the grid stacks. */
.mk-grid--vdivide { position: relative; }
.mk-grid--vdivide::before {
content: ""; position: absolute; top: 50%; left: 50%;
transform: translate(-50%, -50%);
width: 1px; height: 64px; background: rgba(15, 23, 42, 0.16);
pointer-events: none;
}
@media (max-width: 460px) { .mk-grid--vdivide::before { display: none; } }
/* ---------- factor / comparison card ---------- */
.mk-factor {
display: flex; flex-direction: column; padding: 14px 16px; border-radius: 14px;
border: 1px solid var(--mk-line); background: var(--mk-card-bg);
box-shadow: var(--mk-card-shadow); overflow: visible; min-width: 0;
}
.mk-factor--hero {
margin-top: 14px; border-color: rgba(10, 132, 255, 0.28);
background: linear-gradient(180deg, rgba(238, 245, 255, 0.6), #fff);
}
.mk-factor__name {
margin: 0; color: var(--mk-ink); font-weight: 800; line-height: 1.3;
display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 17px;
}
.mk-factor__name--lg { font-size: 19px; }
.mk-factor__abbr {
display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: 0.03em;
color: #1f2a3d; background: rgba(15, 23, 42, 0.07); border: 1px solid rgba(15, 23, 42, 0.14);
border-radius: 6px; padding: 1px 6px; vertical-align: 2px;
}
.mk-factor__flag {
display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 0.04em;
text-transform: uppercase; color: #fff; background: var(--mk-blue);
border-radius: 6px; padding: 2px 8px; vertical-align: 2px;
}
.mk-factor__role { margin: 8px 0 9px; font-size: 13px; font-weight: 700; color: var(--mk-sub); }
.mk-factor__body { margin: 0 0 10px; font-size: 14.5px; line-height: 1.6; color: var(--mk-ink); }
.mk-factor__effects-label { margin: 14px 0 8px; font-size: 14px; font-weight: 700; color: var(--mk-ink); }
/* ---------- TITLE = black + bold in a fun colored pill, hover-underline kept ---------- */
.mk-factor__name .cav-term,
.mk-pill {
display: inline-block; padding: 3px 11px; border-radius: 9px;
background: var(--mk-pill-bg, rgba(15, 23, 42, 0.05));
border: 1px solid var(--mk-pill-bd, rgba(15, 23, 42, 0.16));
color: var(--mk-ink); font-weight: 800;
text-decoration: underline dotted rgba(17, 17, 17, 0.45); text-underline-offset: 3px;
}
.mk-factor__name .cav-term:hover,
.mk-factor__name .cav-term:focus-visible { text-decoration-color: rgba(17, 17, 17, 0.85); filter: brightness(0.97); }
/* per-factor hues — set on .mk-factor (or any ancestor of the pill) */
.mk-hue-teal { --mk-pill-bg: #d7f5ef; --mk-pill-bd: #5fc9b6; }
.mk-hue-violet { --mk-pill-bg: #ece3ff; --mk-pill-bd: #a78bfa; }
.mk-hue-amber { --mk-pill-bg: #fdeecb; --mk-pill-bd: #e6b24d; }
.mk-hue-blue { --mk-pill-bg: #d9ecff; --mk-pill-bd: #6aaef0; }
.mk-hue-rose { --mk-pill-bg: #ffe0ea; --mk-pill-bd: #f18cae; }
.mk-hue-green { --mk-pill-bg: #ddf4d9; --mk-pill-bd: #7bc86a; }
.mk-hue-orange { --mk-pill-bg: #ffe6d1; --mk-pill-bd: #f2a565; }
.mk-hue-indigo { --mk-pill-bg: #e0e3ff; --mk-pill-bd: #8a92ee; }
.mk-hue-red { --mk-pill-bg: #ffe0e0; --mk-pill-bd: #ef8a8a; }
/* ---------- boxed group (e.g. "Adhesins" / "The other toxins") ---------- */
.mk-group {
margin: 16px 0 0; padding: 14px 16px 16px; border-radius: 16px;
border: 1px solid rgba(10, 132, 255, 0.16); background: rgba(238, 245, 255, 0.4);
}
/* title sizing/color lives in the TYPE HIERARCHY block above (doubled-class
selectors, so a can't collapse to body size). */
.mk-group__note { display: inline; }
/* ---------- mechanism / effect dropdowns (native ) ---------- */
.mk-drop { margin-top: auto; border-radius: 10px; }
.mk-factor--hero > .mk-drop { margin-top: 4px; }
.mk-drop > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 999px; border: 1px solid rgba(10, 132, 255, 0.28);
background: rgba(10, 132, 255, 0.06); color: var(--mk-blue-ink); font-size: 13px; font-weight: 700;
transition: background .15s, border-color .15s;
}
.mk-drop > summary::-webkit-details-marker { display: none; }
.mk-drop > summary::after { content: "▸"; font-size: 11px; transition: transform .15s; }
.mk-drop[open] > summary::after { transform: rotate(90deg); }
.mk-drop > summary:hover { background: rgba(10, 132, 255, 0.12); border-color: rgba(10, 132, 255, 0.45); }
.mk-drop__body {
margin-top: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(15, 23, 42, 0.03);
border: 1px solid rgba(15, 23, 42, 0.08); font-size: 14px; line-height: 1.55; color: var(--mk-ink);
}
/* effect dropdowns: bigger, rectangular, black label */
.mk-drop--effect { width: 100%; }
.mk-drop--effect > summary {
width: 100%; justify-content: space-between; padding: 12px 16px; border-radius: 11px; font-size: 15.5px;
font-weight: 800; color: var(--mk-ink);
}
.mk-drop--effect > summary::after { margin-left: 8px; }
.mk-drop--effect > summary .cav-term { color: var(--mk-ink); border-bottom-color: rgba(17, 17, 17, 0.5); }
.mk-drop--effect .mk-drop__body { font-size: 14.5px; }
/* A STACK of dropdowns (a term glossary / accordion, one collapsed row per term)
needs a gap between rows. `.mk-drop` carries `margin-top:auto` so that a single
drop pins to the bottom of its flex `.mk-factor` card — but in normal block flow
`auto` computes to 0, so sibling drops rendered flush, borders doubling at every
junction. Space a drop that FOLLOWS another drop. Adjacent-sibling only, so the
one-drop-per-card layout every existing page uses is untouched. */
.mk-drop + .mk-drop { margin-top: 10px; }
/* ============================================================
FIGURES — three layouts, pick by aspect ratio (see MICRO_KIT.md)
============================================================ */
/* (a) inline — one image / a couple, to the RIGHT of the text */
.mk-fig-row { display: flex; gap: 22px; align-items: flex-start; margin-top: 6px; }
/* vertically center the text against the figure — for a short text block beside a
tall diagram, so the copy sits balanced rather than pinned to the top. */
.mk-fig-row--vcenter { align-items: center; }
.mk-fig-row__text { flex: 1 1 auto; min-width: 0; }
.mk-fig-row__text .mk-subhead:first-child { margin-top: 0; }
/* when a figure LEADS a section, put the section-label + h3 inside mk-fig-row__text
so the figure aligns to the title (no whitespace gap above the image). Zero the
leading element's top margin so text + figure share a top edge. */
.mk-fig-row__text > .section-label:first-child,
.mk-fig-row__text > h3:first-child { margin-top: 0; }
.mk-fig-row > .mk-fig { flex: 0 0 clamp(220px, 40%, 340px); margin-top: 0; }
/* compact inline figure — for a SMALL/photo figure beside a SHORT text block. A
full-size figure that towers over short text strands a big whitespace gap below
the text (the section content that follows clears the tall figure). Use this when
the adjacent copy is short and more full-width content follows. */
.mk-fig-row > .mk-fig--sm { flex: 0 0 clamp(170px, 28%, 230px); }
/* wide inline figure — the OPPOSITE trap. A WIDE (≈2:1 or wider) multi-panel schematic
shrunk into the default 340px column reads as a tiny thumbnail and leaves the row's
right side looking empty. This takes about half the row so the figure has real
presence and fills the whitespace, while the text column still holds a paragraph. */
.mk-fig-row > .mk-fig--wide { flex: 0 0 clamp(320px, 52%, 680px); }
/* A middle step between the default 340px figure and --wide. Added 2026-09-13:
an annotated plate at --wide is often much TALLER than the copy beside it,
and that surplus height renders as dead white space next to the text. --mid
brings the picture down without dropping its baked-in labels below about
11px, which the default 340px would. Pick per figure by matching the
figure's rendered height to its copy, not by habit. */
.mk-fig-row > .mk-fig--mid { flex: 0 0 clamp(280px, 42%, 490px); }
@media (max-width: 820px) { .mk-fig-row { flex-direction: column; } .mk-fig-row > .mk-fig { width: 100%; } }
/* (b) slider — animation + images / several peers; swipeable, drag bar (mount via CardSlider) */
.mk-figwrap { margin-top: 18px; }
.mk-figwrap .cardslider__track > * { flex: 0 0 min(90%, 760px); }
.mk-figslide__title, .mk-fig__title {
font-size: 15px; font-weight: 800; color: var(--mk-ink); text-align: center; margin-bottom: 8px;
}
.mk-figslide__hint, .mk-fig__hint { font-weight: 600; color: var(--mk-sub); font-size: 13px; }
/* (c) stack-match — one tall figure + shorter ones; stack the short pair, match the tall */
.mk-figstack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr); gap: 12px; align-items: start; margin-top: 16px; }
.mk-figstack__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 720px) { .mk-figstack { grid-template-columns: 1fr; } }
/* (d) even pair — TWO equal peer figures (e.g. two CXRs). Equal columns AND a shared
crop so both previews are the SAME size regardless of source aspect ratio. Full
detail stays in the ⤢ Zoom lightbox. Use this over figstack when the two images
are equal peers, not a tall+short set. */
.mk-figpair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; margin-top: 16px; }
.mk-figpair > .mk-fig .atl-figure__img { aspect-ratio: 16 / 10; object-fit: cover; }
@media (max-width: 620px) { .mk-figpair { grid-template-columns: 1fr; } }
/* (e) band — a WIDE schematic that leads a stack of full-width blocks. It sits
full-width UNDER the section intro and ABOVE the blocks, so no block gets
squeezed into a narrow column beside it (the narrowing is what wastes vertical
space). Centered + max-width capped so a wide image spans the card without
ballooning its canvas. */
.mk-fig--band { width: 100%; max-width: 940px; margin: 12px auto 16px; }
/* (f) in-card — a figure that lives INSIDE a .mk-card / .mk-group so the block keeps
its FULL width and the image is part of the box rather than squeezing it. Compose:
.mk-group > .mk-fig-row > (.mk-fig-row__text + figure.mk-fig.mk-fig--incard).
Narrower than a section-level inline figure and vertically centered on the copy. */
.mk-card > .mk-fig-row, .mk-group > .mk-fig-row { margin-top: 8px; }
.mk-fig-row > .mk-fig--incard { flex: 0 0 clamp(170px, 30%, 250px); align-self: center; }
/* shared figure image sizing */
.mk-fig { margin: 0; min-width: 0; }
/* `.mk-fig { margin: 0 }` above is declared AFTER `.mk-fig--band` and has the
same specificity, so it was silently killing the band's `margin: ... auto`
side margins. Every band figure therefore sat flush left inside its section
with the full max-width shortfall dumped as dead space on the right
(940px figure in a ~1170px card = 230px of nothing). Re-assert it here at
two-class specificity so the centring the band rule already asked for
actually happens. Fixed 2026-09-13. */
.mk-fig.mk-fig--band { margin: 12px auto 16px; }
.mk-fig .atl-figure__img, .mk-figstack .atl-figure__img, .mk-figwrap .atl-figure__img {
width: 100%; height: auto; max-width: 100%; border-radius: 12px; display: block;
}
.mk-fig figcaption { margin-top: 8px; font-size: 12.5px; color: var(--mk-sub); text-align: center; line-height: 1.45; }
/* ---------- lab-ID two-column (text left · figure right) ---------- */
.mk-labrow { display: flex; gap: 18px; align-items: flex-start; margin-top: 4px; }
.mk-labrow > .mk-card { flex: 1 1 auto; margin: 0; }
.mk-labrow > .mk-fig { flex: 0 0 300px; max-width: 320px; }
@media (max-width: 760px) {
.mk-labrow { flex-direction: column; }
.mk-labrow > .mk-fig { flex-basis: auto; max-width: 100%; }
.mk-grid--2, .mk-grid--3, .mk-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 460px) { .mk-grid--2, .mk-grid--3, .mk-grid--4 { grid-template-columns: minmax(0, 1fr); } }
/* ============================================================
Tooltip safety. When micro-kit.js mounts, it portals cav-term
tooltips to (position:fixed) so they can NEVER be clipped
or covered — and this class hides the CSS ::after to avoid doubles.
Without JS the native ::after still works as a fallback.
============================================================ */
.mk-tips-on .cav-term::after { display: none !important; }
.mk-tip {
position: fixed; z-index: 2147483000; max-width: min(300px, 82vw);
padding: 10px 12px; border-radius: 12px; background: #fff; color: var(--mk-ink);
font-size: 12.5px; font-weight: 600; line-height: 1.45; text-align: left;
box-shadow: 0 14px 32px rgba(15, 23, 42, 0.18); border: 1px solid rgba(15, 23, 42, 0.08);
opacity: 0; transform: translateY(4px); transition: opacity .14s ease, transform .14s ease;
pointer-events: none;
}
.mk-tip.is-on { opacity: 1; transform: translateY(0); }
/* ================================================================
Comparison / reference table (.mk-cmp) — PROMOTED to the kit
2026-09-12 from GIN Pharmacology's .gin-cmp, per that file's own
instruction ("if a second GIN page needs it, promote it to the
shared kit rather than copying it"). GIN Physiology page 02 is that
second page.
Generic on purpose: the framed scroll wrapper, the header weight,
and two OPTIONAL cell tints for up/down-regulation columns, which
are a recurring physiology table shape. Column identity tints that
mean something only on one page stay in that module's supplement
(.gin-pharm .gin-cmp keeps its GU-rose / DU-blue columns).
Always wrap the table: .mk-cmp-wrap scrolls on narrow screens so a
wide table can never overflow its card.
================================================================ */
.mk-cmp-wrap {
overflow-x: auto;
margin: 10px 0 4px;
border: 1px solid rgba(15, 23, 42, 0.10);
border-radius: 16px;
box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.mk-cmp {
width: 100%;
border-collapse: collapse;
font-size: 15px;
line-height: 1.5;
color: var(--mk-ink, #111111);
}
.mk-cmp th,
.mk-cmp td {
padding: 11px 16px;
text-align: left;
vertical-align: top;
color: var(--mk-ink, #111111);
border-bottom: 1px solid rgba(15, 23, 42, 0.08);
}
.mk-cmp thead th {
font-size: 15.75px;
font-weight: 800;
background: rgba(15, 23, 42, 0.035);
border-bottom: 2px solid rgba(15, 23, 42, 0.18);
}
/* row headers (the left identity column) stay on one line and outrank the row */
.mk-cmp tbody th {
font-size: 15.75px;
font-weight: 800;
white-space: nowrap;
}
.mk-cmp tbody tr:last-child th,
.mk-cmp tbody tr:last-child td { border-bottom: 0; }
/* optional: an up-regulation column and a down-regulation column */
.mk-cmp .mk-cmp__pos { background: rgba(123, 200, 106, 0.10); }
.mk-cmp .mk-cmp__neg { background: rgba(239, 138, 138, 0.10); }
.mk-cmp thead th.mk-cmp__pos { box-shadow: inset 0 -2px 0 rgba(123, 200, 106, 0.55); }
.mk-cmp thead th.mk-cmp__neg { box-shadow: inset 0 -2px 0 rgba(239, 138, 138, 0.55); }
/* a row the section's payoff copy is built on */
.mk-cmp tr.mk-cmp__key th,
.mk-cmp tr.mk-cmp__key td { background: rgba(230, 178, 77, 0.13); font-weight: 700; }
.mk-cmp tr.mk-cmp__key th { font-weight: 800; }
/* ================================================================
.mk-fig--dense — OPT-IN companion to .mk-fig--band, added
2026-09-12. An inline SVG scales with its container, so a figure
carrying many 11-15px on-figure labels becomes illegible on a phone:
a 900-unit-wide figure at 299px renders its 12px text at ~4px.
This floors the figure at a legible width and lets it scroll
sideways inside its own frame instead — the same move .mk-cmp-wrap
makes for a wide table.
Opt-in BY DESIGN: plain .mk-fig--band is unchanged, so no existing
figure on any module is affected. Add --dense only to a figure whose
labels stop being readable when it shrinks.
================================================================ */
@media (max-width: 700px) {
.mk-fig--dense {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.mk-fig--dense > svg {
min-width: 640px;
}
}