. */
.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; }
/* ============================================================
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); }
@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 .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); }