/* ========================================================================== Tokens — change these, everything follows (charts included) ========================================================================== */ :root { --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; /* Type scale (1.25) */ --step--2: 0.72rem; --step--1: 0.8rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; /* Spacing unit */ --sp: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 2.5rem; --sp-6: 3rem; --sp-8: 4rem; /* Palette — black and white placeholder skin (spec S7). Revisit at theming; D13 (Our World in Data) still governs the real look. */ --ink: #111111; --ink-2: #4a4a47; --ink-3: #6c6c68; --rule: #e0e0dd; --bg: #ffffff; --bg-2: #f6f6f4; --accent: #111111; --accent-soft: #e8e8e5; /* Header — dark bar */ --header-bg: #111111; --header-ink: #ffffff; --header-ink-2: #b8b8b6; --header-field: #2e2e2c; --header-chip: #4a4a47; /* Chart series — charts.js reads these */ /* check_site:hue-exempt-start */ --c1: #1f5f8b; --c2: #d1793a; --c3: #3f8f6f; --c4: #8a5fa8; --c5: #b8474d; --c6: #6b7c8c; /* "Assay ran, nothing bound." Not a series colour -- a censored mark is a result about absence, and it reads as one only if it looks unlike the measured points around it. */ --null-fill: #f6dcde; --null-ink: #b8474d; /* check_site:hue-exempt-end */ /* Layout */ --header-h: 60px; --sidebar-w: 248px; --measure: 72ch; --radius: 6px; } /* ========================================================================== Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 var(--sp-2); font-weight: 650; letter-spacing: -0.01em; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-2); margin-top: var(--sp-6); } h3 { font-size: var(--step-1); margin-top: var(--sp-4); } p, ul, ol { margin: 0 0 var(--sp-2); } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } code { font-family: var(--font-mono); font-size: 0.9em; background: var(--bg-2); padding: 0.1em 0.35em; border-radius: 3px; } hr { border: 0; border-top: 1px solid var(--rule); margin: var(--sp-6) 0; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--bg); padding: var(--sp) var(--sp-2); border: 1px solid var(--rule); } .skip-link:focus { left: var(--sp-2); top: var(--sp); } /* ========================================================================== Header (every page except the splash) ========================================================================== */ .site-header { position: sticky; top: 0; z-index: 50; height: var(--header-h); display: flex; align-items: center; gap: var(--sp-3); padding: 0 var(--sp-3); background: var(--header-bg); border-bottom: 1px solid var(--rule); } .site-header__nav { display: flex; align-items: center; gap: var(--sp-4); margin-left: auto; } .site-header__nav a { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-0); color: var(--header-ink-2); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; line-height: 1; } .site-header__nav a:hover { color: var(--header-ink); } .site-header__nav a[aria-current="true"] { color: var(--header-ink); border-bottom-color: var(--header-ink); } .site-header :focus-visible { outline-color: var(--header-ink); } .sidebar-toggle { display: none; align-items: center; gap: 6px; background: var(--header-field); border: 0; border-radius: 5px; padding: 6px 10px; cursor: pointer; font-family: var(--font-serif); font-size: var(--step--1); color: var(--header-ink); } .site-search { position: relative; display: flex; align-items: center; gap: 8px; background: var(--header-field); border-radius: 5px; padding: 0 8px 0 10px; height: 32px; } .site-search__icon { color: var(--header-ink-2); font-size: var(--step--1); } .site-search input { flex: 1; min-width: 15rem; height: 100%; background: none; border: 0; outline-offset: -2px; font-family: var(--font-serif); font-size: var(--step--1); color: var(--header-ink); } .site-search input::placeholder { color: var(--header-ink-2); opacity: 1; } .site-search input::-webkit-search-cancel-button { filter: invert(1); } .site-search__kbd { background: var(--header-chip); color: var(--header-ink); font-family: var(--font-sans); font-size: 0.7rem; font-weight: 600; padding: 3px 6px; border-radius: 3px; line-height: 1; } .site-search__results { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 100%; max-height: 60vh; overflow-y: auto; margin: 0; padding: 4px; list-style: none; background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } .site-search__results li { margin: 0; } .site-search__results a { display: block; padding: 6px var(--sp); border-radius: var(--radius); color: var(--ink); text-decoration: none; font-size: var(--step--1); white-space: nowrap; } .site-search__results a:hover { background: var(--bg-2); } .site-search__empty { padding: 6px var(--sp); color: var(--ink-3); font-size: var(--step--1); } /* ========================================================================== Section layout — header + sidebar + content ========================================================================== */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); align-items: start; } .site-sidebar { position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); overflow-y: auto; padding: var(--sp-4) var(--sp-3); border-right: 1px solid var(--rule); background: var(--bg-2); } .site-sidebar ul { list-style: none; margin: 0; padding: 0; } .site-sidebar li { margin: 0; } .nav-toggle { display: flex; align-items: baseline; gap: 8px; width: 100%; background: none; border: 0; cursor: pointer; text-align: left; padding: 5px 0; color: var(--ink); font-family: inherit; } .nav-sign { width: 0.75em; flex: none; color: var(--ink-3); font-weight: 400; } .nav-toggle--l1 { font-family: var(--font-serif); font-weight: 700; font-size: var(--step-1); } .nav-toggle--l2 { font-size: var(--step--1); font-weight: 550; color: var(--ink-2); padding-left: 14px; } .nav-toggle--l2:hover { color: var(--ink); } .nav-drugs { margin-bottom: var(--sp-2); } .nav-pages a { display: flex; align-items: baseline; gap: 8px; padding: 4px var(--sp) 4px 42px; color: var(--ink-2); text-decoration: none; font-size: var(--step--1); } .nav-pages a::before { content: ""; width: 5px; height: 5px; flex: none; border-radius: 50%; background: transparent; } .nav-pages a:hover { color: var(--ink); background: var(--accent-soft); } .nav-pages a[aria-current="page"] { color: var(--ink); font-weight: 650; background: var(--accent-soft); } .nav-pages a[aria-current="page"]::before { background: var(--ink); } .site-sidebar__title { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 650; margin: 0 0 var(--sp-2); } .content { padding: var(--sp-5) var(--sp-4) var(--sp-8); min-width: 0; max-width: 1400px; } /* Prose stays at a readable measure; tables and figures use the full column, because a 6-column table squeezed to 72ch is what produced the wall of whitespace in the first pass. */ .content > p, .content > h1, .content > h2, .content > .page-intro, .content > .disclaimer, .slot > p:not(.crumb), .slot > h2 { max-width: var(--measure); } /* --- Two-column article layout (Wikipedia pattern) ----------------------- Main column carries the narrative and the tables; the aside carries the infobox, which is reference material a reader dips into rather than reads in sequence. The aside sticks so the identifiers stay available while scrolling a long page. */ .article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); gap: var(--sp-6); align-items: start; } .article__main { min-width: 0; } .article__aside { position: sticky; top: calc(var(--header-h) + var(--sp-3)); min-width: 0; } /* Below this the two columns would both be too narrow to be useful, so the infobox moves above the article body -- the same thing Wikipedia does. */ @media (max-width: 1080px) { .article { grid-template-columns: minmax(0, 1fr); } .article__aside { position: static; order: -1; max-width: 34rem; } } /* Spec B3 — . Sits under in the aside, above the existing .crumb line; a hairline echoes .crumb's own top-rule language rather than boxing the list like .facts does. Sticky behaviour is inherited from .article__aside -- this rule adds no positioning of its own. Kept visible under @media print (below) because the generated list doubles as the page's print TOC. */ .contents { margin: var(--sp-3) 0 0; padding-top: var(--sp-2); border-top: 1px solid var(--rule); font-size: var(--step--1); } .contents ol { margin: 0; padding-left: 1.2rem; } .contents li { margin: 0.2rem 0; } .contents a { color: var(--ink-2); } .contents a:hover { color: var(--ink); } @media print { .contents { display: block; } } .eyebrow { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); font-weight: 650; margin-bottom: var(--sp); } /* Spec B1 ("drug is the page") -- the eyebrow/H1 pair above is retired on every atlas page in favour of H1 = drug name, this subtitle line, then the tab strip below. (figure.js) sets this class itself once it has content, so an empty/failed fetch stays a contentless custom element with zero footprint rather than a styled blank box. */ .page-subtitle { display: block; font-size: var(--step-0); color: var(--ink-3); margin-top: calc(-1 * var(--sp-2)); margin-bottom: var(--sp-3); } /* Tab strip linking a drug's three pages, reusing .jtabs/.jtabs__tab (defined below, shared with the US/Canada panes) rather than a second tab pattern -- .page-tabs only adds this block's own spacing. */ .page-tabs.jtabs { margin-top: 0; margin-bottom: var(--sp-4); } .lede { font-size: var(--step-1); color: var(--ink-2); line-height: 1.5; } .under-construction { color: var(--ink-3); font-style: italic; } /* ========================================================================== Splash — no header, no sidebar ========================================================================== */ .splash { min-height: 100vh; display: grid; place-items: center; padding: var(--sp-6) var(--sp-3); text-align: center; } .splash__inner { max-width: 46rem; } .splash h1 { font-size: var(--step-5); letter-spacing: -0.03em; } .splash p { font-size: var(--step-1); color: var(--ink-2); margin-bottom: var(--sp-6); } .splash__links { display: flex; gap: var(--sp-2); justify-content: center; flex-wrap: wrap; } .splash__link { display: block; text-align: left; text-decoration: none; color: inherit; border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-3); min-width: 15rem; flex: 1 1 15rem; max-width: 20rem; transition: border-color 0.15s, transform 0.15s; } .splash__link:hover { border-color: var(--accent); transform: translateY(-2px); } .splash__link strong { display: block; font-size: var(--step-1); margin-bottom: 4px; } .splash__link span { font-size: var(--step--1); color: var(--ink-3); } /* ========================================================================== Charts + tables ========================================================================== */ .chart-block { margin: var(--sp-6) 0; } .chart-block__title { font-size: var(--step-1); font-weight: 650; margin: 0 0 4px; } .chart-block__note { font-size: var(--step--1); color: var(--ink-3); margin: 0 0 var(--sp-2); } .chart-block__frame { border: 1px solid var(--rule); border-radius: var(--radius); padding: var(--sp-2); background: var(--bg); position: relative; height: 380px; } .chart-block__source { font-size: var(--step--1); color: var(--ink-3); margin-top: var(--sp); } table { border-collapse: collapse; width: 100%; font-size: var(--step--1); margin: var(--sp-3) 0; } th, td { text-align: left; padding: var(--sp) var(--sp-2); border-bottom: 1px solid var(--rule); } th { font-weight: 650; color: var(--ink-2); } .callout { border-left: 3px solid var(--accent); background: var(--accent-soft); padding: var(--sp-2) var(--sp-3); border-radius: 0 var(--radius) var(--radius) 0; margin: var(--sp-3) 0; } .callout p:last-child { margin-bottom: 0; } /* ========================================================================== Mobile ========================================================================== */ @media (max-width: 860px) { .layout { grid-template-columns: minmax(0, 1fr); } .sidebar-toggle { display: inline-flex; } .site-sidebar { position: fixed; top: var(--header-h); left: 0; right: 0; width: auto; height: auto; max-height: 70vh; overflow-y: auto; z-index: 45; display: none; border-right: 0; border-bottom: 1px solid var(--rule); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12); } body.sidebar-open .site-sidebar { display: block; } .content { padding: var(--sp-4) var(--sp-3) var(--sp-8); } h1 { font-size: var(--step-3); } .splash h1 { font-size: var(--step-4); } .site-header { gap: var(--sp); padding: 0 var(--sp-2); } .site-header__nav { gap: var(--sp-2); } /* `` (the custom-element host) is the actual flex child of `.site-header`, not `.site-search` (the class on the
inside it). Flex items default to `min-width: auto`, which resolves to the item's min-content size when nothing overrides it — so without this rule the host refused to shrink below ~177px (icon + its unshrunk input's preferred width + padding), causing a 22px page-level overflow on any header whose breadcrumb text left less than that much room (reproduced on brexpiprazole's Pharmacodynamics page: innerWidth/scrollWidth both 397 against a 375 viewport, quetiapine's shorter breadcrumb hid it). `.site-search`'s own min-width: 0 below only shrinks the div; it never reached the host, which is what `.site-header`'s flexbox measures. */ site-search { min-width: 0; } .site-search { flex: 1 1 auto; min-width: 0; } .site-search input { min-width: 0; } .site-search__kbd { display: none; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } /* ========================================================================== Figures — . All colour comes from the tokens above, so a retheme moves the charts with the page. Never hardcode a colour here. ========================================================================== */ .figure { margin: var(--sp-3) 0 var(--sp-2); padding: 0; border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); } .figure__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; padding: var(--sp-3) var(--sp-3) var(--sp-2); border-bottom: 1px solid var(--rule); } .figure__title { margin: 0; font-size: var(--step-1); font-weight: 600; line-height: 1.25; } .figure__subtitle { margin: calc(var(--sp) / 2) 0 0; font-size: var(--step--1); color: var(--ink-3); max-width: 60ch; } .figure__tabs { display: flex; flex-shrink: 0; border: 1px solid var(--rule); border-radius: 3px; overflow: hidden; } .figure__tab { appearance: none; border: 0; background: var(--bg); color: var(--ink-2); font: inherit; font-size: var(--step--1); padding: calc(var(--sp) * 0.75) var(--sp-2); cursor: pointer; } .figure__tab + .figure__tab { border-left: 1px solid var(--rule); } .figure__tab:hover { background: var(--bg-2); } .figure__tab.is-active { background: var(--accent-soft); color: var(--ink); font-weight: 600; } .figure__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .figure__controls { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 0.5rem; } .figure__control { display: flex; align-items: center; gap: 0.35rem; font-family: var(--font-sans); font-size: 0.8125rem; color: var(--ink-2); cursor: pointer; } .figure__frame { height: 380px; width: 100%; padding: var(--sp-2) var(--sp) 0; } .figure__fallback, .slot__empty { color: var(--ink-3); font-size: var(--step--1); padding: var(--sp-2); } .figure__tablewrap { max-height: 460px; overflow: auto; } .figure__table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .figure__table th, .figure__table td { text-align: left; padding: calc(var(--sp) * 0.75) var(--sp-2); border-bottom: 1px solid var(--rule); white-space: nowrap; } .figure__table thead th { position: sticky; top: 0; background: var(--bg-2); font-weight: 600; z-index: 1; } .figure__table td.is-num, .figure__table th.is-num { text-align: right; font-variant-numeric: tabular-nums; } /* Prose cells -- a verbatim source sentence, an assay description -- wrap and are bounded, rather than inheriting the nowrap that keeps short values tidy. */ .figure__table td.is-prose { white-space: normal; min-width: 22ch; max-width: 56ch; } .figure__table tbody tr:hover { background: var(--bg-2); } .figure__units { font-weight: 400; color: var(--ink-3); } .figure__rowsource { color: var(--ink-3); } .figure__source { padding: var(--sp-2) var(--sp-3); font-size: var(--step--1); color: var(--ink-3); border-top: 1px solid var(--rule); } .figure__sourcelabel { font-weight: 600; } .figure__source a { color: inherit; } .figure__notes { display: block; margin-top: calc(var(--sp) / 2); } .figure--error { padding: var(--sp-3); color: var(--ink-3); } /* Page slots -------------------------------------------------------------- */ /* scroll-margin-top on the anchor TARGET, not the link -- .site-header is `position: sticky; top: 0` at --header-h tall, and nothing before this accounted for it: a native fragment jump (or scrollIntoView) landed a .slot flush with the viewport top, so the header covered the target's own

. Applied to .slot itself (not a narrower selector) because every in-page anchor on the site already targets a .slot id -- both 's generated list (task 10) and the fact list's "Metabolism ›" / "Formulations ›" jump links point at the same ids, so one rule on the shared class fixes every anchor uniformly rather than fixing task 10's own links and leaving the older jump links broken. */ .slot { margin: var(--sp-5) 0; scroll-margin-top: calc(var(--header-h) + var(--sp-2)); } .slot h2 { margin-bottom: var(--sp); } .slot__empty { border-left: 2px solid var(--rule); padding-left: var(--sp-2); font-style: italic; } /* Spec B4 — "Market and regulatory" (task 11): Brand names, Formulations and Pack sizes collapsed into one .slot, three

sub-blocks. Each sub-block is itself a same-page anchor target (the fact list's "Formulations ›" / "Brand names ›" jump links, spec B2, point at these same ids -- unchanged by the merge, so they need the same header-clearing treatment .slot's own scroll-margin-top gets above, scoped narrower since no other h3 on the site is an anchor target). */ .market__h3 { scroll-margin-top: calc(var(--header-h) + var(--sp-2)); } .market__caveat { font-size: var(--step--1); color: var(--ink-3); margin: var(--sp-2) 0 0; } /* A finding, not scaffolding -- cariprazine/lurasidone's pack-size sub-block states a real regulatory fact (no marketed pack sizes recorded), so it drops .slot__empty's italic (reserved for "not yet built") but keeps the same rule-and-indent framing as a quiet, secondary line. */ .market__finding { border-left: 2px solid var(--rule); padding: var(--sp-2); color: var(--ink-3); font-size: var(--step--1); } .page-intro { color: var(--ink-2); max-width: var(--measure); } .disclaimer { margin-top: var(--sp-8); padding-top: var(--sp-2); border-top: 1px solid var(--rule); font-size: var(--step--1); color: var(--ink-3); max-width: var(--measure); } /* Identity card — rendered as a Wikipedia-style infobox in the aside ------ Vertical, compact, and self-contained. The structure sits on top; the identifiers read as a reference table underneath. */ .identity { border: 1px solid var(--rule); border-radius: 3px; background: var(--bg-2); overflow: hidden; } .identity__structure { color: var(--ink); background: var(--bg); padding: var(--sp-2); border-bottom: 1px solid var(--rule); } .identity__structure svg { width: 100%; height: auto; display: block; aspect-ratio: 1 / 1; } .identity__structure svg.is-spinnable { cursor: grab; /* Vertical panning stays with the page, so a drag on a phone still scrolls. */ touch-action: pan-y; user-select: none; } .identity__structure svg.is-spinnable:active { cursor: grabbing; } .identity__license { margin: var(--sp) 0 0; font-size: var(--step--2); line-height: 1.4; color: var(--ink-3); text-align: center; } .identity__caveat { font-style: italic; } .identity__facts { padding: 0; } .identity__list { margin: 0; } .identity__row { display: grid; grid-template-columns: 40% 1fr; gap: var(--sp); padding: calc(var(--sp) * 0.6) var(--sp-2); border-bottom: 1px solid var(--rule); align-items: baseline; } .identity__row:last-child { border-bottom: 0; } .identity__row dt { color: var(--ink-3); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.04em; line-height: 1.3; } .identity__row dd { margin: 0; font-size: var(--step--1); line-height: 1.35; } .identity__mono { font-family: var(--font-mono); font-size: var(--step--2); overflow-wrap: anywhere; } .identity__atcpath { display: block; margin-top: calc(var(--sp) / 4); font-size: var(--step--2); color: var(--ink-3); line-height: 1.3; } .identity__note { margin: 0; padding: var(--sp-2); font-size: var(--step--2); line-height: 1.45; color: var(--ink-3); border-top: 1px solid var(--rule); } .identity__source { border-top: 0; padding: var(--sp) var(--sp-2) var(--sp-2); font-size: var(--step--2); } /* Chemistry ---------------------------------------------------------------- */ .chem { display: grid; gap: var(--sp-2); margin-top: var(--sp-2); } .chem__block { padding: var(--sp-3); border: 1px solid var(--rule); border-radius: 3px; } .chem__block h3 { margin: 0 0 var(--sp) 0; font-size: var(--step-0); display: flex; align-items: center; gap: var(--sp); } /* Calculated values must not read like registry facts. */ .chem__block--computed { border-style: dashed; } .chem__tag { font-size: var(--step--1); font-weight: 400; color: var(--ink-3); border: 1px solid var(--rule); border-radius: 2px; padding: 0 calc(var(--sp) * 0.6); text-transform: lowercase; } .chem__count { font-size: var(--step--1); font-weight: 400; color: var(--ink-3); } .chem__names summary { cursor: pointer; list-style-position: outside; } .chem__names summary h3 { display: inline-flex; } .chem__names[open] summary { margin-bottom: var(--sp-2); } /* Metabolite map ----------------------------------------------------------- */ .metab { display: grid; grid-template-columns: minmax(160px, 1fr) auto 2fr; gap: var(--sp-3); align-items: start; padding: var(--sp-3); border: 1px solid var(--rule); border-radius: 3px; margin-top: var(--sp-2); } .metab__label { display: block; font-size: var(--step--1); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; } .metab__enzymes { list-style: none; margin: var(--sp-2) 0 0; padding: 0; font-size: var(--step--1); } .metab__enzymes li { margin-bottom: calc(var(--sp) / 2); } .metab__rel { color: var(--ink-3); } .metab__arrow { color: var(--ink-3); font-size: var(--step-2); line-height: 1.2; } .metab__list { list-style: none; margin: 0; padding: 0; } .metab__item { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-2); padding: calc(var(--sp) * 0.75) 0; border-bottom: 1px solid var(--rule); } .metab__item:last-child { border-bottom: 0; } .metab__name { font-size: var(--step--1); } .metab__flag { flex-shrink: 0; font-size: var(--step--1); color: var(--ink-3); border: 1px solid var(--rule); border-radius: 2px; padding: 0 calc(var(--sp) * 0.6); } .metab__item--active .metab__name { font-weight: 600; } .metab__item--active .metab__flag { color: var(--ink); border-color: var(--ink-2); } .metab__item--not-stated .metab__flag { font-style: italic; } @media (max-width: 720px) { .metab { grid-template-columns: 1fr; } .metab__arrow { display: none; } } /* Breadcrumb pointers between pages ---------------------------------------- */ .crumb { margin: var(--sp-2) 0 0; font-size: var(--step--1); color: var(--ink-3); } .crumb a { color: var(--ink-2); } /* ========================================================================== Fact list () — spec B2. Head furniture, not a section: sits full-width between Warnings and Indications with no

of its own (see make_skeletons.py's insertion comment), so it never appears in a contents list. Same hairline-row / uppercase-label language as .identity__row, but full-measure and two columns wide enough for prose values rather than the aside's narrow 40/60 split. ========================================================================== */ .facts { display: grid; margin: var(--sp-4) 0; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--bg); } .facts__row { display: grid; grid-template-columns: 200px 1fr; gap: var(--sp-2); padding: var(--sp) var(--sp-3); border-bottom: 1px solid var(--rule); align-items: baseline; font-size: var(--step--1); } .facts__row:last-child { border-bottom: 0; } .facts__row dt { color: var(--ink-3); font-size: var(--step--2); text-transform: uppercase; letter-spacing: 0.04em; } .facts__row dd { margin: 0; line-height: 1.4; } .facts__jump { margin-left: var(--sp); font-size: var(--step--2); color: var(--ink-3); white-space: nowrap; } @media (max-width: 720px) { .facts__row { grid-template-columns: 1fr; gap: calc(var(--sp) / 4); } } /* ========================================================================== Warnings box () — card language ported from the archived standalone Overview: light card, header band with subtitle and chip, hairline separators. Tokens only. ========================================================================== */ .warnings__tabs { display: flex; gap: var(--sp-2); margin-bottom: var(--sp); } .warnings__tab { font: inherit; font-size: var(--step--1); color: var(--ink-3); background: none; border: 1px solid var(--rule); border-radius: 2px; padding: 0.15rem 0.6rem; cursor: pointer; } .warnings__tab.is-active { color: var(--ink); border-color: var(--ink-2); font-weight: 600; } .warnings__card { border: 1px solid var(--rule); border-radius: 3px; background: var(--bg); } .warnings__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; padding: 1.25rem 1.5rem 0.9rem; border-bottom: 1px solid var(--rule); } .warnings__head h3 { margin: 0; font-size: 1rem; font-weight: 600; line-height: 1.25; } .warnings__sub { margin: 0.25rem 0 0; font-size: var(--step--1); color: var(--ink-3); max-width: var(--measure); } .warnings__chip { flex: none; font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-2); border: 1px solid var(--rule); border-radius: 2px; padding: 0.1rem 0.4rem; white-space: nowrap; } .warnings__body { padding: 1rem 1.5rem; } .warnings__title { margin: 0 0 0.6rem; font-weight: 650; line-height: 1.35; max-width: var(--measure); } .warnings__text { max-width: var(--measure); line-height: 1.6; } .warnings__text p { margin: 0 0 0.75rem; } .warnings__text p:last-child { margin-bottom: 0; } .warnings__prov { font-size: var(--step--2); color: var(--ink-3); margin: 0.9rem 0 0; max-width: var(--measure); } .warnings__more { border-top: 1px solid var(--rule); padding: 0.9rem 1.5rem; } .warnings__more summary { cursor: pointer; font-size: var(--step--1); color: var(--ink-2); font-weight: 600; } .warnings__morewording { border-top: 1px solid var(--rule); margin-top: 0.9rem; padding-top: 0.9rem; } .warnings__morewording .warnings__prov { margin: 0 0 0.5rem; } .warnings__links { margin: 0.4rem 0 0; padding-left: 1.1rem; font-size: var(--step--1); line-height: 1.7; } .warnings__source { border-top: 1px solid var(--rule); margin: 0; padding: 0.7rem 1.5rem 0.9rem; } /* US pane redesign (Task 11): collapsed heading, click expands the modal wording. summary carries the label's own "WARNING: ..." text verbatim, so it is left-aligned prose rather than a short chip label. */ .warnings__disclosure { padding: 0; } .warnings__disclosure summary { cursor: pointer; padding: 1rem 1.5rem; font-weight: 650; line-height: 1.35; color: var(--ink); list-style: none; } .warnings__disclosure summary::-webkit-details-marker { display: none; } .warnings__disclosure summary::before { content: "▸ "; color: var(--ink-3); } .warnings__disclosure[open] summary::before { content: "▾ "; } .warnings__disclosure .warnings__body { padding: 0 1.5rem 1rem; } .warnings__card > .warnings__sub { padding: 0 1.5rem; margin: 0.6rem 0 0; } .warnings__updated { font-size: var(--step--2); color: var(--ink-3); padding: 0 1.5rem; margin: 0.4rem 0 0; } /* ========================================================================== Shared tab shell (.jtabs) and fine-print tooltip (.fineprint) — figure.js's renderTabbed()/finePrint() primitives (Task 10). .jtabs echoes .warnings__tab's look so every US/Canada split on the site reads as one pattern. Tokens only. Reused as-is (Task 8, spec B1) for the per-drug page-tab strip (.page-tabs) — those tabs are links, not