/* ========================================================================== CV Trial Evidence Base — stylesheet -------------------------------------------------------------------------- A clinical-atlas design system: high-contrast, colour-coded by meaning. COLOUR CARRIES INFORMATION, NEVER DECORATION. There are two colour channels, and they do not overlap in role or size: 1. DIRECTION (green / amber / red) — the outcome semantics. Reserved. Appears as the card's left rule, the direction badge, the modal result box and the forest-plot markers. Never used for anything else, because a reader scanning the grid for "which of these helped?" relies on it. 2. DOMAIN (a 7-hue palette) — the clinical topic (heart failure, lipids, antithrombotic therapy ...). Appears only in the small domain chip and as a faint tinted wash on the card surface. A wider palette is safe here because it never occupies the direction channel's role or scale. Splitting the two channels is what makes a many-coloured interface readable rather than noisy: colour adds a second encoded dimension instead of competing with the first. A third use of colour exists and is NOT an encoding: low-chroma panel tints that give adjacent regions separate identities so the eye can tell them apart while scrolling. These are always near-neutral, never carry a value, and never appear where a reader could mistake them for direction or domain. Where a colour could be misread as data, it is not used. Light/dark via [data-theme] on . Organised as: tokens → base → layout → chrome → controls → data display → educational → evidence brief → responsive → print. Contrast: every foreground/background pair below meets WCAG AA (>=4.5:1 for body text, >=3:1 for large text and UI borders). The dark-theme tokens are re-derived rather than inverted, so they hold the same ratios. ========================================================================== */ /* ------------------------------------------------------------------ tokens */ :root { color-scheme: light; --bg: #f4f7fb; --bg-tint: #e8eff8; --surface: #ffffff; --surface-2: #f1f5fa; --surface-3: #e2e9f2; /* --border is the DECORATIVE hairline: a separator, a panel outline. It is never a control edge and never carries meaning, so it has no contrast obligation and stays light. Anything a reader must see or click uses --border-strong instead. */ --border: #d3dded; /* --border-strong is deliberately dark for a light theme: it draws the edge of interactive controls (buttons, inputs, quiz options, the icon toggle) and must clear 3:1 as a non-text indicator. Measured worst case is 3.53:1, on the raas card tint — the darkest ground it is drawn against. */ --border-strong: #6a7f9a; --text: #0d1b2e; --text-muted: #41566f; --text-faint: #5f7590; /* Clinical blue primary: the colour of a chart, a stethoscope, a hospital sign. Distinct from every direction hue and from every domain hue. */ --accent: #0b5cab; --accent-hover: #084886; --accent-soft: #e3eefb; /* The three ramp stops below are painted under --on-accent at the brand mark and the primary button, so every stop — not just --accent — has to carry the foreground. The whole ramp is therefore checked, and the lightest stop is held dark enough to clear 4.5:1 against white. */ --accent-line: #1f6dbd; --accent-deep: #062f57; /* Content placed ON a filled accent control (nav pill, primary button). On a dark accent this is white; in the dark theme the accent is a light tint, so it flips to near-black. Defined as a token so the pair can be checked. */ --on-accent: #ffffff; /* Direction semantics: reserved. Never used for decoration. */ --benefit: #067647; --benefit-soft: #e1f5eb; --neutral: #8a5300; --neutral-soft: #fdf1da; --harm: #b01b12; --harm-soft: #fdeadb; --info: #0b5cab; --info-soft: #e3eefb; /* --- domain palette (light) -------------------------------------------- Seven hues, one per clinical domain. Each is a saturated `--d-*` for text and rules plus a low-chroma `--d-*-soft` for washes, so a hue reads as a tint at card scale and still passes AA as a chip label. */ --d-hf: #c2185b; --d-hf-soft: #fdeaf2; /* Two steps darker than the obvious amber: #b45309 measured 4.48:1 against its own tint, just under the 4.5:1 a chip label needs. The hue is unchanged (56deg), so the domain still reads as amber. */ --d-lipids: #a54c07; --d-lipids-soft: #fdf0e3; --d-raas: #6d28d9; --d-raas-soft: #f1ebfe; --d-acs-antiplatelet: #1d4ed8; --d-acs-antiplatelet-soft: #e8effe; --d-acs-anticoag: #0e7490; --d-acs-anticoag-soft: #e2f4f8; --d-af-anticoag: #047857; --d-af-anticoag-soft: #e3f6ef; --d-other: #475569; --d-other-soft: #eef2f7; --radius-lg: 18px; --radius: 13px; --radius-sm: 9px; --shadow-xs: 0 1px 2px rgba(13, 27, 46, 0.06), 0 1px 3px rgba(13, 27, 46, 0.04); --shadow: 0 2px 4px rgba(13, 27, 46, 0.06), 0 8px 20px rgba(13, 27, 46, 0.07); --shadow-lg: 0 8px 22px rgba(13, 27, 46, 0.10), 0 24px 56px rgba(13, 27, 46, 0.14); --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --maxw: 1280px; --header-h: 64px; } [data-theme='dark'] { color-scheme: dark; --bg: #070f1c; --bg-tint: #0b1729; --surface: #0e1d31; --surface-2: #142640; --surface-3: #1d3454; /* Decorative hairline only; see the light-theme note on --border. */ --border: #24405f; /* Raised from #3d6188, which measured 2.63:1 on --surface and 2.28:1 on the darkest domain tint — below the 3:1 a control edge needs. Worst case is now 3.55:1. */ --border-strong: #5480ad; --text: #eaf2fb; --text-muted: #a8c0d8; --text-faint: #8299b5; --accent: #6cb6f5; --accent-hover: #93cbfa; --accent-soft: #0f2b4d; /* On a dark ground the ramp inverts: all three stops must be LIGHT, because the foreground over them is near-black. Ordering them lightest-last keeps the gradient reading left-to-right as the light theme's does. */ --accent-line: #4d9ee8; --accent-deep: #93cbfa; /* The dark-theme accent is a LIGHT tint, so content on it must be dark to stay legible — the inverse of the light theme. This is the single reason this token exists rather than hard-coding #fff on every accent fill. */ --on-accent: #04121f; --benefit: #4ddb9a; --benefit-soft: #0a2c20; --neutral: #f0c464; --neutral-soft: #322407; --harm: #ff9086; --harm-soft: #3c1512; --info: #6cb6f5; --info-soft: #0f2b4d; /* Domains re-derived for a dark ground: each raised in lightness so it still clears AA on --surface, and desaturated in the soft variant so washes stay behind the text rather than glowing under it. */ --d-hf: #ff89b5; --d-hf-soft: #351024; --d-lipids: #f5b356; --d-lipids-soft: #35230a; --d-raas: #b79bff; --d-raas-soft: #241a45; --d-acs-antiplatelet: #86aefc; --d-acs-antiplatelet-soft: #132448; --d-acs-anticoag: #5ed0e8; --d-acs-anticoag-soft: #0b2c36; --d-af-anticoag: #4fd8a4; --d-af-anticoag-soft: #0a2e24; --d-other: #a8bdd4; --d-other-soft: #17263a; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 8px 20px rgba(0, 0, 0, 0.4); --shadow-lg: 0 8px 22px rgba(0, 0, 0, 0.55), 0 24px 56px rgba(0, 0, 0, 0.5); } /* --- domain hooks --------------------------------------------------------- One rule sets the pair of variables for a scope; every consumer below then refers only to --dom / --dom-soft, so adding a domain means adding one line here rather than touching each component. A default pair lives on :root so a component that reads --dom outside any domain scope (a design-composition bar, say) still resolves to the neutral hue instead of an invalid value. */ :root { --dom: var(--d-other); --dom-soft: var(--d-other-soft); } /* The single token a bar draws itself from. Defaulted here so a bar with neither a domain nor a direction scope still renders in the neutral hue rather than resolving to nothing. */ :root { --bar: var(--d-other); } [data-domain] { --dom: var(--d-other); --dom-soft: var(--d-other-soft); } [data-domain='hf'] { --dom: var(--d-hf); --dom-soft: var(--d-hf-soft); } [data-domain='lipids'] { --dom: var(--d-lipids); --dom-soft: var(--d-lipids-soft); } [data-domain='raas'] { --dom: var(--d-raas); --dom-soft: var(--d-raas-soft); } [data-domain='acs_antiplatelet'] { --dom: var(--d-acs-antiplatelet); --dom-soft: var(--d-acs-antiplatelet-soft); } [data-domain='acs_anticoag'] { --dom: var(--d-acs-anticoag); --dom-soft: var(--d-acs-anticoag-soft); } [data-domain='af_anticoag'] { --dom: var(--d-af-anticoag); --dom-soft: var(--d-af-anticoag-soft); } /* Spelled out even though the bare [data-domain] rule above already yields this pair: `other` is a real domain that authors write explicitly, and an explicit hook keeps the set of seven complete and greppable. */ [data-domain='other'] { --dom: var(--d-other); --dom-soft: var(--d-other-soft); } /* Nothing relies on colour alone: a reader with a colour-vision deficiency, or printing in greyscale, still gets the domain from the chip's text label and the direction from the badge's own word. */ @media print { [data-domain] { --dom-soft: transparent; } } /* -------------------------------------------------------------------- base */ * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; color: var(--text); font-family: var(--sans); font-size: 15px; line-height: 1.62; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* Two very low-chroma radial washes give the page depth without introducing a third colour channel: they are built from the accent and the page tint, so they read as lighting rather than as meaning. */ background: radial-gradient(1100px 460px at 12% -8%, var(--accent-soft), transparent 62%), radial-gradient(900px 420px at 92% 2%, var(--bg-tint), transparent 58%), var(--bg); background-attachment: fixed; } h1, h2, h3, h4 { letter-spacing: -0.022em; line-height: 1.22; font-weight: 720; color: var(--text); } p { margin: 0 0 12px; } p:last-child { margin-bottom: 0; } /* Links are visibly links: colour + underline, not colour alone. */ a { color: var(--accent); text-underline-offset: 2px; text-decoration-thickness: 1px; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 3px solid var(--accent-line); outline-offset: 2px; border-radius: 5px; } /* A hairline keyline at the top of every major panel, drawn from the accent. Purely structural: it separates stacked regions without spending a colour. */ .hairline { border-top: 1px solid var(--border); } .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 var(--radius-sm) 0; font-weight: 600; } .skip-link:focus { left: 0; } /* ------------------------------------------------------------------ layout */ .wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 22px; } .view { padding: 30px 0 72px; min-height: 60vh; } .loading { color: var(--text-muted); } .page-head { margin-bottom: 26px; max-width: 78ch; } .page-head h1 { font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 10px; font-weight: 780; } .page-head p { margin: 0; color: var(--text-muted); font-size: 15.5px; } h2 { font-size: 18px; margin: 0 0 14px; font-weight: 700; } h3 { font-size: 15px; margin: 0 0 8px; font-weight: 650; } .eyebrow { display: inline-block; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--accent); margin-bottom: 9px; } /* ------------------------------------------------------------------- chrome */ .site-header { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid var(--border); } /* The spectrum rule: the seven domain hues in their canonical order, rendered as a 3px band under the header. It is the interface's one piece of pure ornament, and it earns its place by previewing the legend the reader is about to meet in the card grid. */ .site-header::after { content: ''; display: block; height: 3px; background: linear-gradient( 90deg, var(--d-hf) 0 14.28%, var(--d-lipids) 14.28% 28.56%, var(--d-raas) 28.56% 42.84%, var(--d-acs-antiplatelet) 42.84% 57.12%, var(--d-acs-anticoag) 57.12% 71.4%, var(--d-af-anticoag) 71.4% 85.68%, var(--d-other) 85.68% 100% ); } .header-inner { display: flex; align-items: center; gap: 20px; min-height: var(--header-h); } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; flex-shrink: 0; } .brand-mark { color: var(--on-accent); background: linear-gradient(135deg, var(--accent-line), var(--accent) 60%, var(--accent-deep)); width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-xs), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .brand-text { display: flex; flex-direction: column; line-height: 1.2; } .brand-text strong { font-size: 15px; font-weight: 720; letter-spacing: -0.02em; } .brand-text small { color: var(--text-faint); font-size: 11.5px; font-weight: 500; } .site-nav { display: flex; gap: 3px; margin-left: auto; flex-wrap: wrap; } .site-nav a { color: var(--text-muted); text-decoration: none; font-size: 13.5px; font-weight: 620; padding: 7px 13px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; transition: background-color .13s, color .13s, border-color .13s; } .site-nav a:hover { background: var(--surface); color: var(--accent); border-color: var(--border); } .site-nav a[aria-current='page'] { background: var(--accent); color: var(--on-accent); border-color: var(--accent); box-shadow: var(--shadow-xs); } .icon-btn { background: var(--surface); border: 1px solid var(--border-strong); color: var(--text-muted); width: 36px; height: 36px; border-radius: 999px; cursor: pointer; font-size: 15px; display: grid; place-items: center; flex-shrink: 0; transition: color .13s, border-color .13s, background-color .13s; } .icon-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* ----------------------------------------------------------------- controls */ .btn { font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 16px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); transition: background-color .12s, border-color .12s, color .12s; } .btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); } .btn.primary { background: linear-gradient(135deg, var(--accent-line), var(--accent)); border-color: transparent; color: var(--on-accent); } .btn.primary:hover { background: var(--accent-hover); color: var(--on-accent); border-color: transparent; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn.sm { padding: 6px 12px; font-size: 12.5px; } .chips { display: flex; flex-wrap: wrap; gap: 7px; } .chip { font: inherit; font-size: 12.5px; font-weight: 550; padding: 6px 12px; border-radius: 999px; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-muted); transition: background-color .12s, border-color .12s, color .12s; } .chip:hover { border-color: var(--accent); color: var(--text); } .chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } .chip .count { opacity: 0.7; font-variant-numeric: tabular-nums; margin-left: 5px; } input[type='search'], input[type='text'], input[type='number'], select { font: inherit; font-size: 13.5px; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); min-width: 0; width: 100%; } input:focus, select:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-soft); } .filters { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 18px 20px; margin-bottom: 18px; box-shadow: var(--shadow-xs); } .filter-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .field { display: flex; flex-direction: column; gap: 6px; min-width: 132px; } .field > label, .field-label { font-size: 11px; font-weight: 700; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.07em; } .field.grow { flex: 1 1 250px; } .filter-summary { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--border); display: flex; gap: 14px; align-items: center; flex-wrap: wrap; font-size: 13px; color: var(--text-muted); } /* -------------------------------------------------------------- data display */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-xs); position: relative; /* A 3px accent rule along the top of every panel. Structural, not semantic: it stops a stack of white panels from reading as one undifferentiated mass. */ overflow: hidden; } .card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent-line), var(--accent) 55%, var(--accent-deep)); opacity: 0.9; } .card + .card { margin-top: 18px; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: 12.5px; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .stat-grid { display: grid; gap: 13px; margin-bottom: 22px; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-xs); position: relative; overflow: hidden; } /* Each tile is tinted by WHAT IT MEASURES, so the row is not six identical boxes: a favourable coverage figure reads green, a gap reads amber. The spectrum tone is reserved for the trial count, which is a statement about the domain mix. */ .stat::before { content: ''; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--accent); } .stat[data-tone='benefit']::before { background: var(--benefit); } .stat[data-tone='neutral']::before { background: var(--neutral); } .stat[data-tone='harm']::before { background: var(--harm); } .stat[data-tone='spectrum']::before { width: 4px; background: linear-gradient( 180deg, var(--d-hf), var(--d-lipids), var(--d-raas), var(--d-acs-antiplatelet), var(--d-acs-anticoag), var(--d-af-anticoag), var(--d-other) ); } .stat[data-tone='benefit'] { background: linear-gradient(180deg, var(--benefit-soft), var(--surface) 70%); } .stat[data-tone='neutral'] { background: linear-gradient(180deg, var(--neutral-soft), var(--surface) 70%); } .stat-label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); } .stat-value { display: block; font-size: 28px; font-weight: 780; letter-spacing: -0.035em; margin-top: 5px; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--text); } .stat-sub { display: block; font-size: 12px; color: var(--text-muted); margin-top: 4px; } /* ------------------------------------------------------------ direction/tags */ .dir { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 680; padding: 4px 10px; border-radius: 999px; white-space: nowrap; border: 1px solid transparent; } /* The dot is a second, non-colour cue: it is present for benefit / neutral / harm alike, so the badge is legible when colour is unavailable. */ .dir::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .dir-benefit { background: var(--benefit-soft); color: var(--benefit); border-color: color-mix(in srgb, var(--benefit) 30%, transparent); } .dir-neutral { background: var(--neutral-soft); color: var(--neutral); border-color: color-mix(in srgb, var(--neutral) 30%, transparent); } .dir-harm { background: var(--harm-soft); color: var(--harm); border-color: color-mix(in srgb, var(--harm) 30%, transparent); } .tag { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--surface-3); color: var(--text-muted); border: 1px solid transparent; } .tag.verified { background: var(--benefit-soft); color: var(--benefit); border-color: color-mix(in srgb, var(--benefit) 28%, transparent); } .tag.derived { background: var(--neutral-soft); color: var(--neutral); border-color: color-mix(in srgb, var(--neutral) 28%, transparent); } .tag.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; } /* The domain chip. Colour here is the encoded domain, and the chip always carries the domain's NAME, so the hue is a reinforcement rather than the only way to read it. */ .tag.domain { background: var(--dom-soft); color: var(--dom); border-color: color-mix(in srgb, var(--dom) 32%, transparent); font-weight: 680; } /* --------------------------------------------------------------- trial list */ .result-bar { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 13px; flex-wrap: wrap; } .result-count { font-size: 13.5px; color: var(--text-muted); font-weight: 600; } .trial-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(352px, 1fr)); } .trial-card { /* Domain tint on the surface, direction rule on the edge. The two channels are visible simultaneously without either one having to be inferred. */ background: linear-gradient(180deg, var(--dom-soft), var(--surface) 58%); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-xs); cursor: pointer; display: flex; flex-direction: column; gap: 9px; text-align: left; transition: border-color .14s, transform .14s, box-shadow .14s; } .trial-card:hover, .trial-card:focus-visible { border-color: var(--accent); box-shadow: var(--shadow); transform: translateY(-3px); } .trial-card[data-dir='benefit'] { border-left-color: var(--benefit); } .trial-card[data-dir='neutral'] { border-left-color: var(--neutral); } .trial-card[data-dir='harm'] { border-left-color: var(--harm); } .tc-head { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; } .tc-acronym { font-size: 16.5px; font-weight: 760; letter-spacing: -0.025em; } .tc-year { font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; font-weight: 620; background: var(--surface-3); padding: 2px 8px; border-radius: 999px; } .tc-title { font-size: 13px; color: var(--text-muted); line-height: 1.52; margin: 0; } .tc-effect { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; } .tc-effect .val { font-family: var(--mono); font-size: 15.5px; font-weight: 660; letter-spacing: -0.02em; } .tc-effect .rel { font-size: 12px; color: var(--text-muted); font-weight: 550; } .tc-foot { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: auto; padding-top: 7px; } /* The interval strip: band = the CI, tick = the point estimate. Tinted by direction so the strip and the card's edge rule agree. */ .mini-ci { height: 7px; background: var(--surface-3); border-radius: 4px; position: relative; overflow: hidden; } .mini-ci .band { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--accent-line); opacity: 0.42; } .trial-card[data-dir='benefit'] .mini-ci .band { background: var(--benefit); opacity: 0.5; } .trial-card[data-dir='neutral'] .mini-ci .band { background: var(--neutral); opacity: 0.5; } .trial-card[data-dir='harm'] .mini-ci .band { background: var(--harm); opacity: 0.5; } .mini-ci .pt { position: absolute; top: -2px; width: 3px; height: 11px; background: var(--text); border-radius: 1px; } /* -------------------------------------------------------------- forest plot */ .forest-wrap { background: linear-gradient(180deg, var(--surface-2), var(--surface) 40%); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); overflow-x: auto; } .forest { display: block; min-width: 880px; } .forest text { font-family: var(--sans); fill: var(--text); } .forest .axis-label { fill: var(--text-muted); font-size: 10.5px; font-weight: 620; } .forest .row-acronym { font-size: 12px; font-weight: 680; } .forest .row-sub { font-size: 10px; fill: var(--text-faint); } .forest .row-val { font-family: var(--mono); font-size: 10.5px; fill: var(--text-muted); font-weight: 550; } .forest .gridline { stroke: var(--border); stroke-width: 1; } .forest .refline { stroke: var(--text-faint); stroke-width: 1.5; stroke-dasharray: 5 4; } .forest .row-band { fill: transparent; cursor: pointer; } .forest .row-band:hover { fill: var(--accent-soft); } .forest .row-acronym:hover { fill: var(--accent); } .forest .ci-line { stroke-width: 1.8; } .forest .ci-cap { stroke-width: 1.8; } /* Domain colour key. Seven swatches, in the same canonical order as the header band, so the spectrum rule doubles as this legend's preview. */ .legend { display: flex; gap: 10px 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-muted); margin-top: 15px; } .legend span { display: inline-flex; align-items: center; gap: 7px; font-weight: 550; } .legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; flex-shrink: 0; } .legend i.dir-swatch { border-radius: 50%; } /* ----------------------------------------------------------------- compare */ .table-scroll { overflow-x: auto; border-radius: var(--radius-lg); border: 1px solid var(--border); } table.cmp { border-collapse: collapse; width: 100%; min-width: 640px; font-size: 13px; background: var(--surface); } table.cmp th, table.cmp td { border: 1px solid var(--border); padding: 10px 13px; text-align: left; vertical-align: top; } table.cmp thead th { background: var(--surface-2); position: sticky; top: 0; z-index: 2; font-size: 13px; font-weight: 720; /* Each comparison column is keyed to its trial's domain, so a reader can track a column across a wide table without counting cells. */ border-top: 3px solid var(--dom); } table.cmp thead th:first-child { min-width: 140px; border-top-color: var(--border); } table.cmp tbody th { background: var(--surface-2); font-weight: 640; font-size: 11.5px; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } table.cmp tbody tr:hover td { background: var(--surface-2); } th .remove { float: right; border: none; background: none; color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; } th .remove:hover { color: var(--harm); } /* ---------------------------------------------------------------- timeline */ .tl { position: relative; padding-left: 30px; } .tl::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(180deg, var(--accent-line), var(--border) 22%, var(--border)); } .tl-year { position: relative; margin-bottom: 22px; } .tl-year > h3 { font-size: 13.5px; font-weight: 740; color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 3px 13px; display: inline-block; margin-bottom: 11px; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-xs); } .tl-year::before { content: ''; position: absolute; left: -26px; top: 7px; width: 10px; height: 10px; border-radius: 50%; background: var(--accent-line); box-shadow: 0 0 0 3px var(--surface); } .tl-items { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(308px, 1fr)); } .tl-item { background: linear-gradient(180deg, var(--dom-soft), var(--surface) 62%); border: 1px solid var(--border); border-left: 4px solid var(--border-strong); border-radius: var(--radius-sm); padding: 11px 14px; cursor: pointer; text-align: left; width: 100%; font: inherit; color: inherit; text-decoration: none; transition: border-color .13s, transform .13s, box-shadow .13s; } .tl-item:hover { border-color: var(--accent); transform: translateX(3px); box-shadow: var(--shadow-xs); } .tl-item[data-dir='benefit'] { border-left-color: var(--benefit); } .tl-item[data-dir='neutral'] { border-left-color: var(--neutral); } .tl-item[data-dir='harm'] { border-left-color: var(--harm); } .tl-item .nm { font-weight: 700; font-size: 13.5px; } .tl-item .fx { font-family: var(--mono); font-size: 12px; color: var(--text-muted); } .chart-block { margin-bottom: 22px; } .bars { display: flex; flex-direction: column; gap: 9px; } .bar-row { display: grid; grid-template-columns: 186px 1fr 62px; gap: 12px; align-items: center; font-size: 12.5px; cursor: pointer; background: none; border: none; padding: 3px 0; font-family: inherit; color: inherit; text-align: left; } .bar-row:hover .bar-label { color: var(--accent); } .bar-row:hover .bar-track { box-shadow: 0 0 0 2px var(--accent-soft); } /* A bar draws itself from ONE token, --bar, which the surrounding scope decides: a domain-scoped row -> that domain's hue (the timeline's domain chart) a direction row -> the direction hue (the methods-view breakdown) neither -> the neutral domain hue, so nothing is undefined Centralising it here is why the direction breakdown needed no inline `background` in JavaScript. */ [data-dir='benefit'] { --bar: var(--benefit); } [data-dir='neutral'] { --bar: var(--neutral); } [data-dir='harm'] { --bar: var(--harm); } [data-domain] { --bar: var(--dom); } .bar-label { color: var(--text-muted); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; } .bar-label::before { content: ''; width: 9px; height: 9px; border-radius: 3px; background: var(--bar); flex-shrink: 0; } .bar-track { background: var(--surface-3); border-radius: 6px; height: 19px; overflow: hidden; transition: box-shadow .13s; } .bar-fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--bar) 55%, var(--surface)), var(--bar)); } .bar-row[aria-pressed='true'] .bar-fill { box-shadow: inset 0 0 0 2px var(--text); } .bar-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-muted); font-family: var(--mono); font-weight: 600; } /* -------------------------------------------------------------------- quiz */ .quiz-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; } .progress-track { height: 8px; background: var(--surface-3); border-radius: 5px; overflow: hidden; margin-bottom: 20px; } .progress-fill { height: 100%; border-radius: 5px; transition: width .3s ease; background: linear-gradient(90deg, var(--accent-line), var(--accent)); } .q-context { font-size: 13px; color: var(--text-muted); margin-bottom: 8px; } .q-prompt { font-size: 17.5px; font-weight: 680; margin: 0 0 17px; line-height: 1.5; letter-spacing: -0.012em; } .q-options { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; } .opt { display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%; background: var(--surface); border: 1.5px solid var(--border-strong); border-radius: var(--radius-sm); padding: 12px 15px; cursor: pointer; font: inherit; font-size: 13.5px; color: var(--text); transition: background-color .12s, border-color .12s, transform .12s; } .opt:hover:not(:disabled) { border-color: var(--accent); background: var(--accent-soft); transform: translateX(2px); } .opt:disabled { cursor: default; } .opt .key { font-weight: 740; color: var(--text-muted); font-family: var(--mono); flex-shrink: 0; width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; background: var(--surface-3); font-size: 12px; } /* Verdict is carried by an explicit glyph AND colour, so the answer is unambiguous in greyscale or with a colour-vision deficiency. */ .opt.correct { border-color: var(--benefit); background: var(--benefit-soft); } .opt.correct::after { content: '✓'; color: var(--benefit); font-weight: 800; margin-left: auto; } .opt.wrong { border-color: var(--harm); background: var(--harm-soft); } .opt.wrong::after { content: '✕'; color: var(--harm); font-weight: 800; margin-left: auto; } .opt.correct .key, .opt.wrong .key { color: #fff; } /* The verdict keys sit on a saturated benefit/harm fill, which is dark in both themes, so white is correct there and is not tokenised. */ .opt.correct .key { background: var(--benefit); } .opt.wrong .key { background: var(--harm); } .explain { background: var(--surface-2); border-left: 4px solid var(--accent); border-radius: var(--radius-sm); padding: 14px 17px; font-size: 13px; margin-bottom: 16px; } .explain .verdict { font-weight: 740; display: block; margin-bottom: 5px; } .explain .verdict.ok { color: var(--benefit); } .explain .verdict.no { color: var(--harm); } .explain cite { font-style: normal; font-family: var(--mono); font-size: 11.5px; color: var(--text-muted); display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--border); } .score-line { display: flex; gap: 26px; flex-wrap: wrap; font-size: 15px; } .score-line b { font-size: 23px; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------- modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(6, 15, 29, 0.62); backdrop-filter: blur(5px); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; overflow-y: auto; } .modal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 920px; width: 100%; margin: auto; overflow: hidden; } .modal-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; padding: 20px 22px; border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 2; /* The dialog header carries the trial's domain hue, tying the record back to the coloured card the reader clicked to open it. */ background: linear-gradient(180deg, var(--dom-soft), var(--surface)); border-top: 4px solid var(--dom); } .modal-head h2 { margin: 0 0 4px; font-size: 20px; font-weight: 760; } .modal-body { padding: 22px; } .kv { display: grid; grid-template-columns: 168px 1fr; gap: 10px 18px; font-size: 13.5px; } .kv dt { color: var(--text-muted); font-weight: 680; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.055em; padding-top: 3px; } .kv dd { margin: 0; } .result-box { border-radius: var(--radius); padding: 16px 18px; margin-bottom: 16px; border: 1px solid var(--border); border-left-width: 5px; } .result-box.dir-benefit { background: var(--benefit-soft); border-color: color-mix(in srgb, var(--benefit) 30%, transparent); border-left-color: var(--benefit); } .result-box.dir-neutral { background: var(--neutral-soft); border-color: color-mix(in srgb, var(--neutral) 30%, transparent); border-left-color: var(--neutral); } .result-box.dir-harm { background: var(--harm-soft); border-color: color-mix(in srgb, var(--harm) 30%, transparent); border-left-color: var(--harm); } .result-box .big { font-family: var(--mono); font-size: 24px; font-weight: 720; letter-spacing: -0.025em; } .result-box .endpoint { font-size: 12.5px; color: var(--text-muted); margin-top: 5px; } blockquote.quote { margin: 0 0 9px; padding: 10px 15px; border-left: 3px solid var(--accent-line); background: var(--surface-2); font-size: 12.5px; color: var(--text-muted); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; } ul.plain { list-style: none; padding: 0; margin: 0; } ul.plain li { padding: 7px 0 7px 20px; position: relative; font-size: 13.5px; border-bottom: 1px solid var(--border); } ul.plain li:last-child { border-bottom: none; } ul.plain li::before { content: '▸'; position: absolute; left: 0; color: var(--accent-line); } .sec-list { display: flex; flex-direction: column; gap: 7px; } .sec-item { display: grid; grid-template-columns: 1fr auto; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .sec-item:last-child { border-bottom: none; } .sec-item .m { font-family: var(--mono); font-size: 12.5px; white-space: nowrap; } /* ------------------------------------------------------------ educational */ /* Reading-guide layout, glossary, concept articles and the inline term tooltip. Everything here is additive: the data-display classes above are used by views that predate this layer and are untouched. */ .learn-toc { position: sticky; top: var(--header-h); z-index: 20; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 10px 0 11px; margin: -4px 0 22px; background: color-mix(in srgb, var(--bg) 93%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--border); } .learn-toc a, .learn-toc button { font: inherit; font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--text-muted); padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; background: none; cursor: pointer; line-height: 1.5; } .learn-toc a:hover, .learn-toc button:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } .learn-toc .spacer { flex: 1 1 12px; } .learn-section { scroll-margin-top: calc(var(--header-h) + 62px); } .learn-section + .learn-section { margin-top: 30px; } .prose { max-width: 76ch; } .prose p { font-size: 14.5px; line-height: 1.72; } .prose p:last-child { margin-bottom: 0; } .learn-hero { border-radius: var(--radius-lg); padding: 26px 28px; margin-bottom: 22px; background: linear-gradient(135deg, var(--accent-soft), var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); } .learn-hero h1 { font-size: clamp(24px, 3.2vw, 31px); margin: 0 0 10px; font-weight: 780; } .learn-hero p { margin: 0; color: var(--text-muted); font-size: 15.5px; max-width: 76ch; } .learn-hero .hero-meta { margin-top: 15px; display: flex; gap: 8px; flex-wrap: wrap; } /* --- reading guide ------------------------------------------------------- */ .guide { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); } .guide-step { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 17px 18px 16px 54px; box-shadow: var(--shadow-xs); } .guide-step .n { position: absolute; left: 16px; top: 16px; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-family: var(--mono); font-size: 12px; font-weight: 700; background: var(--accent-soft); color: var(--accent); } .guide-step h3 { margin: 0 0 6px; font-size: 14px; font-weight: 680; letter-spacing: -0.01em; } .guide-step p { margin: 0; font-size: 12.8px; line-height: 1.6; color: var(--text-muted); } /* --- glossary ------------------------------------------------------------ */ .gloss-group + .gloss-group { margin-top: 26px; } .gloss-group > h3 { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin: 0 0 12px; padding-bottom: 7px; border-bottom: 1px solid var(--border); } .gloss-grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); } .gloss { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--header-h) + 76px); transition: box-shadow .18s, border-color .18s; } .gloss.hilite { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft), var(--shadow-xs); } .gloss > h4 { margin: 0 0 7px; font-size: 14.5px; font-weight: 700; letter-spacing: -0.01em; } .gloss > p { font-size: 13px; line-height: 1.65; color: var(--text-muted); margin: 0 0 10px; } .gloss > p:last-child { margin-bottom: 0; } /* Shared "see also" / "terms in this article" chip row, used by the glossary cards and by the concept articles. */ .see { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 11.5px; color: var(--text-faint); margin-top: 12px; } .see-link { font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer; background: var(--surface-3); color: var(--text-muted); border: 1px solid transparent; border-radius: 999px; padding: 3px 10px; } .see-link:hover { background: var(--accent-soft); color: var(--accent); } .misread { display: block; margin-top: 12px; padding: 10px 13px; background: var(--neutral-soft); border-left: 3px solid var(--neutral); border-radius: var(--radius-sm); font-size: 12.5px; line-height: 1.6; color: var(--text-muted); } .misread b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--neutral); margin-bottom: 3px; } /* --- concept articles ---------------------------------------------------- */ .concept { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); } .concept + .concept { margin-top: 18px; } .concept-head { padding: 20px 24px; border-bottom: 1px solid var(--border); background: var(--surface-2); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .concept-head h3 { margin: 0 0 7px; font-size: 18px; font-weight: 740; } .concept-head p { margin: 0; font-size: 13.5px; color: var(--text-muted); max-width: 82ch; } .concept-meta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 11px; font-family: var(--mono); font-size: 11.5px; color: var(--text-faint); } .concept-body { padding: 22px 24px; } .concept-body > *:first-child { margin-top: 0; } .concept-sec + .concept-sec { margin-top: 20px; } .concept-sec > h4 { font-size: 14px; font-weight: 700; margin: 0 0 9px; } .concept-sec p { font-size: 13.8px; line-height: 1.7; color: var(--text-muted); } .takeaway { margin: 20px 0 0; padding: 15px 18px; border-radius: var(--radius); background: var(--accent-soft); border-left: 3px solid var(--accent); font-size: 13.5px; line-height: 1.65; } .takeaway b { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); margin-bottom: 4px; } .examples { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; } .examples > h4 { font-size: 12px; font-weight: 750; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-faint); margin: 0; } .example { border: 1px solid var(--border); border-left: 3px solid var(--border-strong); border-radius: var(--radius); padding: 13px 16px; background: var(--surface); } .example[data-dir='benefit'] { border-left-color: var(--benefit); } .example[data-dir='neutral'] { border-left-color: var(--neutral); } .example[data-dir='harm'] { border-left-color: var(--harm); } .example-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; } .example-head a { font-weight: 700; font-size: 14px; text-decoration: none; } .example-head a:hover { text-decoration: underline; } .example-head .fx { font-family: var(--mono); font-size: 12.5px; color: var(--text-muted); } .example .pt { margin: 0; font-size: 12.8px; line-height: 1.6; color: var(--text-muted); } .example .abs { margin: 6px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-muted); } /* --- inline term tooltip ------------------------------------------------- */ /* The definition popover is a *sibling* of the trigger, not a child: a