/* ========================================================================== AFTER — one stylesheet, served from public/ verbatim. Why not Astro scoped styles: on this machine Astro 5.18.2's Vite style plugin emits no assets at all (no CSS, no client JS) in dev or build, while still stamping scope attributes. Files in public/ skip that pipeline. See TOOLING.md. Revisit if the toolchain is fixed. Palette rule (2026-08-28 decision): no green anywhere. Colour has jobs, not moods: ink structure and body text cobalt interactive — links, buttons, focus burgundy emergency, and nothing else brass position, and nothing else: the you-are-here dot on the rail and the section letter that opens each heading (Franck, 2026-09-11). It measures 3.4:1 on paper, so it marks position and never carries text. ========================================================================== */ :root { --paper: #FAF9F6; --panel: #F0EFE9; --panel-hover: #E8E7E0; --ink: #14243D; --ink-deep: #0E1A2D; --body: #3E4652; --muted: #5D6068; --faint: #6B6C66; /* was #8A8B85 — 3.3:1, failed AA */ --rule: #E6E4DD; --rule-strong: #D6D4CC; --cobalt: #1B4FA8; --cobalt-deep: #133A7C; --burgundy: #741620; --burgundy-ink: #FBEFEF; --burgundy-soft:#E8B4B8; /* on burgundy: eyebrow text */ --burgundy-deep:#5C111A; /* hover only */ --burgundy-tint:#FBF1F1; /* warning panel ground */ --burgundy-line:#E0BFC1; /* warning panel border */ --burgundy-text:#741620; /* burgundy TEXT on the tint panel */ --brass: #B0862F; /* non-text use only */ /* Severity ramp — gold to wine, for a rating the patient sets. A five-stop scale has four *fillable* segments (the first stop is "None" and never fills), so the ramp spans the full range in four; --sev-5 is spare, for a longer scale. UNRESOLVED: this ramp reuses both reserved colours. --sev-1 sits in --brass territory (#B0862F), which DESIGN.md gives one job, and --sev-4 is a near neighbour of --burgundy (#741620), which is supposed to mean emergency and nothing else. Fills only, so the never-behind-text half of the brass rule still holds. See the note in DESIGN.md. */ --sev-1: #C7A15E; /* gold */ --sev-2: #C08243; /* amber */ --sev-3: #B4623A; /* orange */ --sev-4: #B03A22; /* orange-red — deliberately NOT wine, so it cannot be mistaken for --burgundy #741620 on a page where both appear. Hotter and lighter: hue 10° vs 352°, lightness 41% vs 27%. */ --sev-5: #8F2D18; /* deeper, only for scales with 5 filled steps */ --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Public Sans', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; /* Body never drops below 16px: read one-handed, often by someone tired. */ --t-eyebrow: 11.5px; --t-small: 13px; --t-meta: 14.5px; --t-body: 16.5px; --t-lede: 17px; --t-fine: 12.5px; /* legal / meta only */ --t-h4: 19px; --t-h3: 21px; --t-h2-sm: 25px; --t-h2: 27px; --t-h1: 38px; --gutter: 30px; /* Height of the condensed site bar. The rail pins below it; both were pinned to 0, which put the rail's letters and its brass position dot behind the bar on every guide. */ --bar-h: 88px; /* fallback; measured emergency strip + menu header */ } /* Reader-controlled text size, set on by the footer control. */ html[data-textsize='larger'] { --bar-h: 96px; --t-eyebrow: 13px; --t-small: 14.5px; --t-meta: 16px; --t-body: 19px; --t-lede: 19px; --t-fine: 13.5px; --t-h4: 21px; --t-h3: 23px; /* the bar grows with the type scale */ --t-h2-sm: 27px; --t-h2: 29px; --t-h1: 40px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--cobalt); text-decoration: none; } a:hover { color: var(--cobalt-deep); } /* WCAG 2.2 AA — focus must be visible and never clipped. */ :focus-visible { outline: 2px solid var(--cobalt); outline-offset: 3px; } img { max-width: 100%; height: auto; } .shell { max-width: 460px; margin: 0 auto; background: var(--paper); } .eyebrow { margin: 0; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.22em; color: var(--faint); text-transform: uppercase; } .btn { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 26px; background: var(--ink); color: var(--paper); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; } .btn:hover { background: var(--ink-deep); color: var(--paper); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip-path: none; padding: 12px 18px; background: var(--ink); color: var(--paper); } /* ============================================================== dark mode === Only when the reader's phone asks for it — never a brand choice (decided 2026-09-01). Someone reads this hours after discharge, in a dark room, and a full-brightness page is a real cost. Only the tokens change. Every component below inherits, which is the whole reason colour lives in tokens. Ratios below were computed against the dark ground, not assumed from the light theme — brass and burgundy in particular cannot simply be inverted. */ @media (prefers-color-scheme: dark) { /* :not([data-theme="light"]) lets an explicit light choice below win over the system's own dark preference. */ :root:not([data-theme='light']) { color-scheme: dark; --paper: #0F1520; /* deep navy-black, same family as --ink */ --panel: #18202D; --panel-hover: #212B3A; --ink: #E8EAEE; /* 15.9:1 on paper */ --ink-deep: #F4F5F7; --body: #C8CDD6; /* 11.6:1 */ --muted: #A2A9B5; /* 7.8:1 */ --faint: #8D95A2; /* 5.9:1 */ --rule: #26303E; --rule-strong: #384454; --cobalt: #8FB4EE; /* 8.7:1 — links must lighten on dark */ --cobalt-deep: #B4CDF5; --burgundy: #8E2130; /* strip and E block keep their weight */ --burgundy-ink: #FDF0F0; /* 8.6:1 on burgundy */ --burgundy-soft:#EFBCC0; --burgundy-deep:#A6293A; --burgundy-tint:#241419; /* warning panel ground */ --burgundy-line:#5C2A32; --burgundy-text:#F3A2A9; /* 7.4:1 on the tint — the light value would vanish */ --brass: #C9A567; /* marker only, still never text */ /* Same gold-to-wine path, lifted for a dark ground. The light values would sit at 1.5:1 against #0F1520 and the low end would vanish. */ --sev-1: #C8A063; /* gold */ --sev-2: #CE8F55; /* amber */ --sev-3: #D2743F; /* orange */ --sev-4: #DC5A38; /* orange-red, clear of dark's --burgundy #8E2130 */ --sev-5: #C44A2C; } /* The takeaways rule reads as a hairline on light and as a bar on dark. */ :root:not([data-theme='light']) .guide .takeaways { border-top-color: var(--cobalt); } /* A white-hot search field is the brightest thing on a night page. */ :root:not([data-theme='light']) .search, :root:not([data-theme='light']) .compact .field { background: var(--panel); } :root:not([data-theme='light']) .search input { color: var(--ink); } /* The condensing bar's shadow was tuned for light ground. */ @keyframes condense { to { border-bottom-color: var(--rule); box-shadow: 0 1px 12px rgba(0, 0, 0, .5); } } } /* ------------------------------------------------------- manual dark theme Same tokens as the media query above, applied when the reader has picked Dark explicitly (footer toggle) regardless of what their system prefers. Duplicated rather than shared: this file has no preprocessor (TOOLING.md), so there is no way to factor the token list out without one — keep both blocks in sync if either changes. Wrapped in `@media screen` on purpose: `:root[data-theme="dark"]` is more specific than the print reset's bare `:root` below, and would otherwise win the cascade and print dark. `@media screen` keeps it out of print entirely, so specificity never gets the chance to matter. */ @media screen { :root[data-theme='dark'] { color-scheme: dark; --paper: #0F1520; --panel: #18202D; --panel-hover: #212B3A; --ink: #E8EAEE; --ink-deep: #F4F5F7; --body: #C8CDD6; --muted: #A2A9B5; --faint: #8D95A2; --rule: #26303E; --rule-strong: #384454; --cobalt: #8FB4EE; --cobalt-deep: #B4CDF5; --burgundy: #8E2130; --burgundy-ink: #FDF0F0; --burgundy-soft:#EFBCC0; --burgundy-deep:#A6293A; --burgundy-tint:#241419; --burgundy-line:#5C2A32; --burgundy-text:#F3A2A9; --brass: #C9A567; --sev-1: #C8A063; /* gold */ --sev-2: #CE8F55; /* amber */ --sev-3: #D2743F; /* orange */ --sev-4: #DC5A38; /* orange-red, clear of dark's --burgundy #8E2130 */ --sev-5: #C44A2C; } :root[data-theme='dark'] .guide .takeaways { border-top-color: var(--cobalt); } :root[data-theme='dark'] .search, :root[data-theme='dark'] .compact .field { background: var(--panel); } :root[data-theme='dark'] .search input { color: var(--ink); } } /* ---------------------------------------------------------------- site bar */ .site-chrome { position: sticky; top: 0; z-index: 30; background: var(--paper); } .site-chrome .bar { border-bottom-color: var(--rule); } @media print { .site-chrome { position: static; } } .estrip { position: relative; display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 44px; padding: 10px 16px; background: var(--burgundy); color: var(--burgundy-ink); font-size: var(--t-fine); font-weight: 600; letter-spacing: 0.02em; } .estrip a { color: var(--burgundy-ink); text-decoration: underline; text-underline-offset: 3px; } .bar { position: relative; z-index: 20; background: var(--paper); border-bottom: 1px solid transparent; } .barpad { padding: 22px 24px 0; } .brand { display: block; text-align: center; font-family: var(--serif); font-size: var(--t-h3); line-height: 1.5; letter-spacing: 0.34em; padding-left: 0.34em; color: var(--ink); } /* Wordmark: AFT plain, ER in burgundy (DECISIONS.md 2026-09-03). ER *is* the emergency the colour already means, so this is not a new job for burgundy. --burgundy-text is theme-aware (#741620 on paper, #F3A2A9 on night), so one rule covers both modes. Colour only — no italic. */ .brand-er, .sheet-brand .brand-er { color: var(--burgundy-text); } .brand-author { margin: 8px 0 0; text-align: center; font-size: var(--t-fine); color: var(--muted); } .bar[data-compact='true'] .brand-author { display: none; } .nav { display: flex; align-items: center; justify-content: center; gap: 13px; flex-wrap: wrap; padding: 10px 10px 14px; overflow: hidden; } .nav a { min-height: 44px; display: flex; align-items: center; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; color: var(--ink); white-space: nowrap; } .nav a:hover { color: var(--cobalt); } /* Appears as the bar condenses, so search and 911 stay in reach. */ .compact { display: flex; align-items: center; gap: 8px; padding: 0 16px; max-height: 0; opacity: 0; overflow: hidden; } .compact .field { flex: 1; display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 0 14px; background: var(--panel); color: var(--muted); font-size: var(--t-meta); } .compact .sos { display: flex; align-items: center; min-height: 42px; padding: 0 14px; background: var(--burgundy); color: var(--burgundy-ink); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.08em; } /* A guide is entered from a card, not browsed — start it condensed. */ .bar[data-compact='true'] .nav { display: none; } .bar[data-compact='true'] .compact { max-height: 60px; opacity: 1; padding-bottom: 12px; } .bar[data-compact='true'] .barpad { padding-top: 14px; } .bar[data-compact='true'] .brand { font-size: var(--t-meta); letter-spacing: 0.28em; } .bar[data-compact='true'] { border-bottom-color: var(--rule); } /* ------------------------------------------------------------------- rail */ .rail { width: 100%; display: flex; justify-content: space-between; gap: 4px; position: relative; } .rail::before { content: ''; position: absolute; left: 9%; right: 9%; top: 34px; height: 1px; background: var(--rule-strong); transform-origin: left center; } .rail .step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 9px; position: relative; min-height: 44px; color: var(--ink); } .rail a.step:hover .ltr { color: var(--cobalt); } .guide .rail .step { min-width: 0; } .guide .rail small { max-width: 100%; overflow-wrap: anywhere; } .rail .ltr { font-family: var(--serif); font-size: var(--t-h3); line-height: 1; } .rail .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--rule-strong); box-shadow: 0 0 0 4px var(--paper); } .rail small { font-size: var(--t-eyebrow); letter-spacing: 0.06em; color: var(--muted); text-align: center; line-height: 1.3; } .rail a.step[aria-current='true'] .dot { background: var(--brass); } /* R leads off the page to the recovery tool: the only step that is a link everywhere, including the homepage. Cobalt letter says "this goes somewhere". */ .rail .step-r .ltr { color: var(--cobalt); } .rail .step-r:hover .ltr { color: var(--cobalt-deep); } .rail a.step[aria-current='true'] .ltr, .rail a.step[aria-current='true'] small { color: var(--ink); } /* -------------------------------------------------------------- home page */ .hero { padding: 30px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; } .hero h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.16; letter-spacing: -0.005em; text-wrap: balance; max-width: 320px; } .hero .lede { margin: 0; font-size: var(--t-lede); line-height: 1.6; color: var(--muted); max-width: 280px; } .search { margin: 26px var(--gutter) 0; display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 0 20px; background: var(--panel); color: var(--faint); } .search input { flex: 1; min-height: 58px; border: 0; background: transparent; font-family: var(--sans); font-size: 16px; color: var(--ink); } .search input::placeholder { color: var(--faint); } .search input:focus { outline: none; } .search:focus-within { outline: 2px solid var(--cobalt); outline-offset: 3px; } .spine { padding: 44px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 16px; } .guides { padding: 46px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 20px; } .cards { width: 100%; display: flex; flex-direction: column; gap: 8px; } .card { padding: 18px 20px; background: var(--panel); color: inherit; display: flex; flex-direction: column; gap: 5px; transition: background 0.18s ease, transform 0.18s ease; } .card:hover { background: var(--panel-hover); transform: translateX(2px); color: inherit; } .card b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; } .card span { font-size: var(--t-meta); line-height: 1.45; color: var(--muted); } /* Two burgundy treatments doing different jobs must not look identical. The top strip is the phone number — loud, persistent, always reachable. This band is the warning SIGNS: information a reader may not recognise as an emergency. Same colour family, deliberately quieter, and no call button: this is an educational tool, not an alarm. The 911 pathway still lives in the strip, the condensed bar, and the footer disclaimer. */ .band { margin: 52px var(--gutter) 0; padding: 30px 24px; background: var(--burgundy-tint); border: 1px solid var(--burgundy-line); color: var(--ink); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .band .eyebrow { color: var(--burgundy-text); } .band h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.22; color: var(--burgundy-text); } .band p { margin: 0; font-size: var(--t-body); line-height: 1.6; max-width: 300px; } .band .band-btn { margin-top: 4px; background: var(--burgundy); color: var(--burgundy-ink); } .band .band-btn:hover { background: var(--burgundy-deep); color: var(--burgundy-ink); } .tools { margin: 46px var(--gutter) 0; padding: 28px 24px; background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; } .tools h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2-sm); line-height: 1.25; } .tools p { margin: 0; font-size: var(--t-meta); line-height: 1.6; color: var(--muted); max-width: 290px; } .about { padding: 48px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .about h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.25; } .about p { margin: 0; font-size: var(--t-body); line-height: 1.65; color: var(--body); max-width: 310px; } /* --------------------------------------------------- floating sheet link --- The follow-up sheet is the thing a reader comes back for, and it was three taps down. Deliberately NOT beside search or beside the emergency route: those are different jobs and pairing them made each read as the other. Hidden on the sheets themselves. */ .tools-fab { position: fixed; right: 16px; bottom: 16px; z-index: 25; display: inline-flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 18px; background: var(--ink); color: var(--paper); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em; box-shadow: 0 6px 20px -6px rgba(20, 36, 61, .45); } .tools-fab:hover { background: var(--ink-deep); color: var(--paper); } .tools-fab svg { flex-shrink: 0; } /* Never let it sit on top of the last line of the page. */ .shell { padding-bottom: 84px; } /* Mobile pass (Franck, 2026-09-11): fold to the icon while the reader scrolls down, so the button never sits on the line being read. The label is hidden by width, not display, so the fold animates and the link keeps its accessible name. Base.astro sets data-fab. */ html[data-fab='collapse'] .tools-fab { transition: padding 0.2s ease, gap 0.2s ease; } html[data-fab='collapse'] .tools-fab span { display: inline-block; max-width: 200px; overflow: hidden; white-space: nowrap; transition: max-width 0.2s ease, opacity 0.15s ease; } html[data-fab='collapse'] .tools-fab.is-min { padding: 0 15px; gap: 0; } html[data-fab='collapse'] .tools-fab.is-min span { max-width: 0; opacity: 0; } @media print { .tools-fab { display: none !important; } } /* ------------------------------------------------------------------ footer */ .sig { padding: 44px var(--gutter) 0; text-align: center; display: flex; flex-direction: column; gap: 5px; } .sig .name { font-family: var(--serif); font-style: italic; font-size: var(--t-h4); } .sig .role { font-size: var(--t-small); color: var(--muted); } .disclaimer { margin: 0; padding: 26px var(--gutter) 24px; text-align: center; font-size: var(--t-fine); line-height: 1.65; color: var(--faint); } .foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px var(--gutter); border-top: 1px solid var(--rule); } .foot .lbl { font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.16em; color: var(--faint); text-transform: uppercase; } .sizes { display: flex; flex-wrap: wrap; gap: 8px; } /* Reading editor on screen; original table remains the print/backup source. */ @media screen { .tracker-page .sugar-print-table { display: none; } } .tracker-page .sugar-entry { border-bottom: 1px solid var(--rule); } .tracker-page .sugar-entry > summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 44px; padding: 16px 0; cursor: pointer; font-size: var(--t-body); } .tracker-page .sugar-entry > summary span { overflow-wrap: anywhere; } .tracker-page .sugar-edit { color: var(--cobalt); font-size: var(--t-meta); flex-shrink: 0; } .tracker-page .sugar-body { display: grid; gap: 12px; padding-bottom: 20px; } .tracker-page .sugar-body .tap-label { margin: 8px 0 0; } .tracker-page .sugar-number { width: 100%; min-height: 52px; padding: 12px; border: 1px solid var(--rule-strong); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: var(--t-h3); } .tracker-page .sugar-body .field-input { box-sizing: border-box; min-width: 0; max-width: 100%; } .tracker-page .sugar-time > summary, .tracker-page .sugar-note > summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--cobalt); overflow-wrap: anywhere; } .tracker-page .sugar-time .tap-chip { margin-top: 12px; } .sizes button { min-height: 44px; padding: 0 16px; font-family: var(--sans); font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; background: transparent; color: var(--ink); border: 1px solid transparent; cursor: pointer; } .sizes button[aria-pressed='true'] { background: var(--ink); color: var(--paper); } .sizes button:hover:not([aria-pressed='true']) { border-color: var(--rule-strong); } /* ------------------------------------------------------------- guide page The guide body is authored Markdown. These rules are the contract between the writing house style and the page — a guide never needs to know they exist. Section wrappers come from the rehype plugin. */ .guide { padding: 0 0 8px; } .guide .guide-head { padding: 26px var(--gutter) 0; } .guide .guide-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.12; letter-spacing: -0.008em; } .guide .guide-head .deck { margin: 10px 0 0; padding: 0; font-family: var(--serif); font-style: italic; font-size: var(--t-h4); line-height: 1.35; color: var(--body); } .guide .reviewed { margin: 10px 0 0; padding: 0 var(--gutter); font-size: var(--t-fine); color: var(--faint); } .guide .guide-note { margin: 12px 0 0; padding: 0; font-size: var(--t-fine); line-height: 1.5; color: var(--faint); } .guide .guide-note a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; } /* Sticks to the top so the five sections are reachable from anywhere in a long guide. top:0 rather than a guessed offset — an earlier guess left a transparent strip that body text scrolled through. */ .guide .spine-wrap { position: sticky; top: var(--bar-h); z-index: 12; padding: 12px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 6px 14px -12px rgba(20, 36, 61, 0.5); } .guide .step { scroll-margin-top: calc(var(--bar-h) + 104px); } /* Key Takeaways reads as the summary it is, rather than as more prose. */ .guide .takeaways { display: block; margin: 22px var(--gutter) 6px; padding: 20px 22px; background: var(--panel); border-top: 2px solid var(--ink); } .guide .takeaways-head { margin: 0 0 12px; padding: 0; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .guide .takeaways ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; } .guide .takeaways li { font-size: var(--t-body); line-height: 1.55; } .guide .takeaways li::marker { color: var(--cobalt); font-weight: 600; } /* Each section shows its opening; the rest waits behind a control. Emergency is never collapsed — a red flag behind a click is a red flag nobody reads. */ .guide .unfold { margin: 0; } .guide .unfold > summary { cursor: pointer; list-style: none; margin: 6px var(--gutter) 0; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em; color: var(--cobalt); border-top: 1px solid var(--rule); } .guide .unfold > summary::-webkit-details-marker { display: none; } .guide .unfold > summary::before { content: '+'; color: var(--muted); font-size: 16px; } .guide .unfold[open] > summary::before { content: '-'; } .guide .unfold[open] > summary { color: var(--muted); } /* On paper everything is open: printing a page with content hidden inside it produces a document with holes in it. */ @media print { .guide .unfold > summary { display: none !important; } .guide .unfold { display: block !important; } .guide .spine-wrap { position: static; box-shadow: none; } } .guide .reviewed { padding-top: 8px; } .guide p, .guide ul, .guide ol { padding-left: var(--gutter); padding-right: var(--gutter); } .guide p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.7; } .guide ul, .guide ol { margin: 0 0 14px; } .guide li { margin-bottom: 10px; font-size: var(--t-body); line-height: 1.6; } .guide strong { font-weight: 600; } /* Hypoglycemia reference: readable teaching steps, with all exceptions visible. Native list markers preserve the sequence in speech, print and without JS. */ .guide[data-guide='hypoglycemia'] .takeaways { border: 0; border-radius: 16px; padding: 20px; } .guide[data-guide='hypoglycemia'] .takeaways ul { margin: 0; padding: 0 0 0 20px; } .guide[data-guide='hypoglycemia'] .takeaways li:last-child { margin-bottom: 0; } .guide[data-guide='hypoglycemia'] .step-head { text-wrap: balance; } .guide[data-guide='hypoglycemia'] #step-f h3 { font-size: var(--t-h3); letter-spacing: 0; margin-top: 24px; } .guide[data-guide='hypoglycemia'] #step-f > ol { margin: 20px var(--gutter) 24px; padding: 0 0 0 32px; } .guide[data-guide='hypoglycemia'] #step-f > ol > li { padding: 16px 0 16px 8px; margin: 0; border-bottom: 1px solid var(--rule); } .guide[data-guide='hypoglycemia'] #step-f > ol > li:first-child { border-top: 1px solid var(--rule); } .guide[data-guide='hypoglycemia'] #step-f > ol > li::marker { color: var(--cobalt); font-size: var(--t-h3); font-weight: 600; } .guide[data-guide='hypoglycemia'] #step-t > ul > li { margin-bottom: 20px; } .guide hr { display: none; } .guide .step { padding: 30px 0 0; } .guide .step-head { margin: 0 0 14px; padding: 0 var(--gutter); display: block; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.2; letter-spacing: -0.005em; } /* Franck, 2026-09-11: the section's letter is the heading's own first letter, set larger and in the italic, rather than a badge repeating it beside the heading. Every heading starts with its rail letter (the two that did not were renamed). The badge stays in the markup for the rail's scroll-spy and is hidden here. */ .guide .step-head .step-letter { display: none; } .guide .step-head::first-letter { font-size: 1.32em; font-style: italic; color: var(--brass); } .guide .step[data-step='E'] .step-head::first-letter { color: var(--brass); } .guide .step-letter { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); color: var(--muted); font-size: 16px; line-height: 1; } .guide .step h3 { margin: 18px 0 8px; padding: 0 var(--gutter); font-family: var(--sans); font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em; } /* A three-column table is unreadable at 390px, so it scrolls in its own container rather than squeezing the page. */ /* The wrapper scrolls, not the table: display:block on a removes it from the accessibility tree, taking the header relationships with it. */ .guide .table-scroll { overflow-x: auto; width: calc(100% - var(--gutter) * 2); margin: 0 var(--gutter) 18px; /* a visible hint that there is more to the right */ background: linear-gradient(to right, var(--paper) 30%, transparent), linear-gradient(to left, var(--paper) 30%, transparent) right, radial-gradient(farthest-side at 0 50%, rgba(20,36,61,.14), transparent), radial-gradient(farthest-side at 100% 50%, rgba(20,36,61,.14), transparent) right; background-repeat: no-repeat; background-size: 32px 100%, 32px 100%, 14px 100%, 14px 100%; background-attachment: local, local, scroll, scroll; } .guide table { width: 100%; border-collapse: collapse; font-size: var(--t-meta); } .guide th, .guide td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--rule); min-width: 130px; } .guide th { font-weight: 600; color: var(--muted); } .guide blockquote { margin: 0 var(--gutter) 18px; padding: 14px 16px; background: var(--panel); font-size: var(--t-meta); line-height: 1.6; } .guide blockquote p { padding: 0; margin: 0; font-size: inherit; } /* Emergency is the one section that changes colour, and it is derived from the [E] marker in the source — so it cannot be forgotten or misapplied. */ .guide .step[data-step='E'] { margin-top: 34px; padding: 30px 0 26px; background: var(--burgundy); color: var(--burgundy-ink); } .guide .step[data-step='E'] .step-head { color: var(--burgundy-ink); } .guide .step[data-step='E'] .step-letter { background: var(--burgundy-ink); color: var(--burgundy); border-color: var(--burgundy-ink); } .guide .step[data-step='E'] li::marker { color: var(--burgundy-soft); } .guide .step[data-step='E'] a { color: var(--burgundy-ink); text-decoration: underline; } /* ------------------------------------------------------------------ motion Every animation is opt-in. Without scroll timelines, or with reduced motion, the page is fully visible and readable — nothing starts hidden. */ @media (prefers-reduced-motion: no-preference) { .hero .eyebrow { animation: rise 0.5s 0.05s both ease-out; } .hero h1 { animation: rise 0.6s 0.12s both ease-out; } .hero .lede { animation: rise 0.6s 0.22s both ease-out; } .search { animation: rise 0.6s 0.30s both ease-out; } @supports (animation-timeline: view()) { .reveal { opacity: 0; transform: translateY(14px); animation-name: rise; animation-duration: auto; animation-fill-mode: forwards; animation-timing-function: linear; animation-timeline: view(); animation-range: entry 8% cover 24%; } .rail::before { transform: scaleX(0); animation-name: draw; animation-duration: auto; animation-fill-mode: forwards; animation-timing-function: linear; animation-timeline: view(); animation-range: entry 20% cover 50%; } } @supports (animation-timeline: scroll()) { .bar[data-compact='false'], .bar[data-compact='false'] .barpad, .bar[data-compact='false'] .brand, .bar[data-compact='false'] .nav, .bar[data-compact='false'] .compact { animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both; animation-timeline: scroll(root); } .bar[data-compact='false'] { animation-name: condense; animation-range: 100px 260px; } .bar[data-compact='false'] .barpad { animation-name: padshrink; animation-range: 100px 260px; } .bar[data-compact='false'] .brand { animation-name: brandshrink; animation-range: 100px 260px; } .bar[data-compact='false'] .nav { animation-name: navhide; animation-range: 100px 220px; } .bar[data-compact='false'] .compact { animation-name: compactshow; animation-range: 180px 260px; } } } @keyframes rise { to { opacity: 1; transform: none; } } @keyframes draw { to { transform: scaleX(1); } } @keyframes condense { to { border-bottom-color: var(--rule); box-shadow: 0 1px 12px rgba(20,36,61,.06); } } @keyframes padshrink { to { padding-top: 14px; } } @keyframes brandshrink { to { font-size: var(--t-meta); letter-spacing: 0.28em; } } @keyframes navhide { to { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; } } @keyframes compactshow { to { max-height: 60px; opacity: 1; padding-bottom: 12px; } } /* Sentence case: a 32-character uppercase run reads as body text, not a label. */ .spine .steps-label { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); text-align: center; } /* -------------------------------------------------- where-to-go comparison */ .page-head { padding: 30px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; } .page-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.008em; text-wrap: balance; } .page-head .lede { margin: 0; font-size: var(--t-lede); line-height: 1.6; color: var(--muted); max-width: 320px; } /* Says what the channel is not, before offering it. Patients must not read this as a route to medical advice — that is what their own doctor is for. */ .feedback { margin: 0; padding: 0 var(--gutter) 26px; text-align: center; font-size: var(--t-small); line-height: 1.65; color: var(--muted); } /* Quieter than the ER button on purpose: the person who needs the comparison is not the person who needs the emergency department right now. */ .band .band-link { margin-top: 2px; font-size: var(--t-meta); line-height: 1.45; color: var(--burgundy-text); text-decoration: underline; text-underline-offset: 3px; max-width: 280px; } .band .band-link:hover { color: var(--burgundy-deep); } /* ------------------------------------------------------------ guide index */ .guides-list { padding: 8px var(--gutter) 0; } .guides-list .cards { width: 100%; display: flex; flex-direction: column; gap: 8px; } .result-count { margin: 14px 0 0; padding: 0 var(--gutter); font-size: var(--t-meta); color: var(--muted); text-align: center; min-height: 1.2em; } .no-match { margin: 16px 0 0; padding: 20px 22px; background: var(--panel); font-size: var(--t-meta); line-height: 1.6; color: var(--muted); } /* The hidden attribute must beat display:flex on cards and anything else the search filter toggles. Without this the filter reports a count but hides nothing — the failure looks like a broken search. */ [hidden] { display: none !important; } /* ------------------------------------------------------- recovery tools */ .tools-list { padding: 12px var(--gutter) 0; display: flex; flex-direction: column; gap: 8px; } .tools-list .card em { font-size: var(--t-small); color: var(--faint); font-style: italic; } /* ---- printable sheets ------------------------------------------------- */ .sheet { padding: 26px var(--gutter) 0; } .sheet-brand { font-family: var(--serif); font-size: var(--t-meta); letter-spacing: 0.3em; color: var(--muted); padding-bottom: 14px; } .sheet-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.008em; } .sheet-intro { margin: 10px 0 0; font-size: var(--t-body); line-height: 1.55; color: var(--muted); } .sheet-date { margin: 16px 0 0; display: flex; align-items: baseline; gap: 10px; font-size: var(--t-meta); color: var(--muted); } .rule-inline { flex: 1; border-bottom: 1px solid var(--ink); height: 0; } .sheet .block { padding-top: 26px; break-inside: avoid; } .sheet .block h2 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.25; } .sheet .hint { margin: 6px 0 12px; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); } /* Lines to write on, not inputs — there is nowhere to submit anything. */ .write-line { border-bottom: 1px solid var(--rule-strong); height: 34px; } .sheet table.grid { width: 100%; border-collapse: collapse; } .sheet table.grid th, .sheet table.grid td { border: 1px solid var(--rule-strong); padding: 9px 8px; font-size: var(--t-small); text-align: left; vertical-align: top; height: 32px; } .sheet table.grid thead th { font-weight: 600; color: var(--muted); background: var(--panel); } .sheet table.grid tbody th { font-weight: 500; color: var(--muted); white-space: nowrap; } .sheet-foot { margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-eyebrow); line-height: 1.55; color: var(--muted); } .sheet-actions { padding: 26px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .sheet-note { margin: 0; font-size: var(--t-small); color: var(--muted); } /* ---- print ------------------------------------------------------------ Site chrome, navigation and the print button never reach paper. Black on white: these get printed on whatever is in the house, often nearly out of ink, and a tonal panel wastes what is left. */ /* Paper is always light. Without this, a reader whose phone is in dark mode prints the dark palette's pale greys onto a white page — the print rules force the ground white but leave every token dark. Reset the palette for print before anything else in this section runs. */ @media print { :root { color-scheme: light; --paper: #FFFFFF; --panel: #FFFFFF; --panel-hover: #FFFFFF; --ink: #000000; --ink-deep: #000000; --body: #222222; --muted: #333333; --faint: #444444; --rule: #999999; --rule-strong: #666666; --cobalt: #000000; --cobalt-deep: #000000; --burgundy: #6B1119; --burgundy-ink: #FFFFFF; --burgundy-soft: #E8B4B8; --burgundy-deep: #6B1119; --burgundy-tint: #FFFFFF; --burgundy-line: #666666; --burgundy-text: #6B1119; --brass: #6B5320; } } @page { size: letter; margin: 0.55in; } @media print { html, body, .shell { background: #fff !important; color: #000 !important; } .estrip, .bar, .foot, .sig, .disclaimer, .feedback, .sheet-actions { display: none !important; } .sheet { padding: 0; } .sheet-brand { color: #000; padding-bottom: 10px; } .sheet-head h1 { font-size: var(--t-h2); } .sheet-intro, .sheet .hint, .sheet-date { color: #333; font-size: 11pt; } .sheet .block { padding-top: 20px; } .sheet .block h2 { font-size: 15pt; } .write-line { border-bottom: 1px solid #666; height: 30px; } .sheet table.grid th, .sheet table.grid td { border-color: #666; color: #000; font-size: 10pt; } .sheet table.grid thead th { background: transparent !important; } .sheet table.grid tbody tr { break-inside: avoid; } .sheet-foot { color: #000; font-size: 8.5pt; border-top-color: #666; } a[href]::after { content: ''; } } .tools-sub { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); text-align: center; max-width: 300px; } .sheet-back { margin: 0; padding: 20px var(--gutter) 0; text-align: center; font-size: var(--t-small); color: var(--muted); } /* The hand-off, at the end of the guide where Reconnect leaves off. */ .take-sheet { margin: 30px var(--gutter) 0; padding: 22px; background: var(--panel); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; } .take-sheet b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); } .take-sheet p { margin: 0; font-size: var(--t-meta); line-height: 1.5; color: var(--muted); max-width: 280px; } @media print { .sheet-back, .take-sheet { display: none !important; } } /* ------------------------------------------------------ paper-only sheets */ .sheet-privacy { margin: 20px var(--gutter) 0; padding: 13px 15px; background: var(--panel); display: flex; gap: 11px; align-items: flex-start; font-size: var(--t-small); line-height: 1.55; color: var(--muted); } .sheet-privacy svg { flex-shrink: 0; margin-top: 2px; color: var(--ink); } .tool-lead { border-top: 3px solid var(--cobalt); margin-top: 24px; } .episode-list { display: flex; flex-direction: column; gap: 16px; } .episode-entry { border: 1px solid var(--rule-strong); padding: 16px; background: color-mix(in srgb, var(--panel) 58%, transparent); break-inside: avoid; } .episode-entry h3, .sheet .block > h3 { margin: 0 0 12px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h4); line-height: 1.25; } .episode-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; } .episode-grid p { margin: 0; min-width: 0; } .episode-grid b { display: block; min-height: 2.7em; font-size: var(--t-small); line-height: 1.35; } .episode-grid .wide { grid-column: 1 / -1; } .episode-grid .wide b { min-height: auto; } .episode-grid .write-line { display: block; } .write-area { display: flex; flex-direction: column; gap: 0; } .write-area span { display: block; height: 34px; border-bottom: 1px solid var(--rule-strong); } .paper-box { height: 128px; border: 1px solid var(--rule-strong); } .paper-grid td { height: 42px !important; } .glucose-grid { table-layout: fixed; } .glucose-grid th:nth-child(1) { width: 25%; } .glucose-grid th:nth-child(2) { width: 25%; } .glucose-grid th:nth-child(3) { width: 18%; } .glucose-grid th:nth-child(4) { width: 32%; } .topic-grid { table-layout: fixed; } .topic-grid th { width: calc(100% / var(--tool-columns)); overflow-wrap: anywhere; } .sheet-caution { margin: 9px 0 0; font-size: var(--t-small); line-height: 1.5; color: var(--muted); } .paper-checks { display: flex; flex-direction: column; } .paper-checks p { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--rule); display: flex; gap: 10px; align-items: flex-start; font-size: var(--t-meta); line-height: 1.5; break-inside: avoid; } .paper-checks p span { flex: 0 0 auto; font-size: 1.1em; line-height: 1.35; } .emergency-from-guide > *:not(.step), .emergency-from-guide .step:not([data-step='E']) { display: none !important; } .emergency-from-guide .step[data-step='E'] { margin: 0; } .emergency-from-guide .step[data-step='E'] .step-head { display: none; } .emergency-from-guide .step[data-step='E'] p, .emergency-from-guide .step[data-step='E'] ul, .emergency-from-guide .step[data-step='E'] ol, .emergency-from-guide .step[data-step='E'] blockquote { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } /* Any quote inside the burgundy section must read on burgundy: the default pale panel put pale text on a pale box (2026-09-11). */ .guide .step[data-step='E'] blockquote { background: rgba(255,255,255,.10); color: var(--burgundy-ink); } @media print { .sheet-privacy { display: none !important; } .episode-entry { background: transparent; border-color: #666; } .paper-checks p, .write-area span { border-bottom-color: #666; color: #000; } .paper-box { border-color: #666; } .sheet-caution { color: #333; font-size: 9pt; } } /* ------------------------------------------------------- QR landing page */ .start-head { padding: 34px var(--gutter) 0; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .start-head h1 { margin: 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-h1); line-height: 1.14; letter-spacing: -0.008em; text-wrap: balance; } .start-head .lede { margin: 0; font-size: var(--t-lede); line-height: 1.55; color: var(--muted); max-width: 300px; } .start-doors { padding: 26px var(--gutter) 0; display: flex; flex-direction: column; gap: 10px; } .door { display: flex; gap: 16px; align-items: flex-start; padding: 22px 20px; background: var(--panel); color: inherit; transition: background 0.18s ease, transform 0.18s ease; } .door:hover { background: var(--panel-hover); transform: translateX(2px); color: inherit; } .door-n { flex-shrink: 0; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--rule-strong); color: var(--muted); font-family: var(--serif); font-size: 16px; line-height: 1; } .door-body { display: flex; flex-direction: column; gap: 6px; } .door-body b { font-family: var(--serif); font-weight: 400; font-size: var(--t-h3); line-height: 1.2; } .door-body span { font-size: var(--t-meta); line-height: 1.5; color: var(--muted); } .door-body em { font-size: var(--t-small); color: var(--faint); font-style: italic; } /* ------------------------------------------------------------ pain chart */ .tracker-table { max-width: 260px; } .tracker-table tbody th { width: 46%; } .chart-wrap { margin: 20px 0 0; padding: 0; } .chart-wrap svg { width: 100%; height: auto; display: block; } .chart-title { margin: 10px 0 0; font-family: var(--serif); font-weight: 400; font-size: var(--t-lede); line-height: 1.25; } .chart-desc { margin: 6px 0 0; font-size: var(--t-small); line-height: 1.55; color: var(--muted); } .chart-notes { margin: 10px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; } .chart-notes li { font-size: var(--t-small); line-height: 1.5; color: var(--muted); } .chart-notes li::marker { color: var(--rule-strong); } @media print { .chart-wrap svg { max-width: 4.5in; } .chart-notes li, .chart-desc { color: #333; font-size: 9pt; } } /* The condition sheets lead; the general pair is the fallback beneath them. */ .tools-list { padding-top: 34px; } .tools-list .eyebrow, .tools-list .tools-sub { align-self: center; text-align: center; } .tools-list { align-items: center; } .tools-list .card { width: 100%; } .suggested { padding-bottom: 18px; } /* The published course, inside the Timeline section of a guide. */ .course-chart { margin: 18px var(--gutter) 4px; padding: 0; } .course-chart svg { width: 100%; height: auto; display: block; } .course-chart figcaption { margin-top: 8px; font-size: var(--t-small); line-height: 1.55; color: var(--muted); } @media print { .course-chart { break-inside: avoid; } .course-chart svg { max-width: 4.2in; } .course-chart figcaption { color: #333; font-size: 9pt; } } /* Reading pages: about, and anything else that is prose rather than a tool. */ .prose { padding: 30px var(--gutter) 0; } .prose h2 { margin: 34px 0 12px; font-family: var(--serif); font-weight: 400; font-size: var(--t-h2); line-height: 1.25; } .prose h2:first-child { margin-top: 0; } .prose p { margin: 0 0 14px; font-size: var(--t-body); line-height: 1.7; } .prose strong { font-weight: 600; } /* ===================================================== guide layout lab === Three treatments of the same guide. Shared fixes first, then what differs. */ .lab-flag { margin: 0; padding: 10px var(--gutter); background: var(--panel); border-bottom: 1px solid var(--rule); font-size: var(--t-small); color: var(--muted); text-align: center; } /* Shared: the summary block reads as a summary. */ .guide-v .takeaways { display: block; margin: 22px var(--gutter) 6px; padding: 20px 22px; background: var(--panel); border-top: 2px solid var(--ink); } .guide-v .takeaways-head { margin: 0 0 12px; padding: 0; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .guide-v .takeaways ol { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; } .guide-v .takeaways li { font-size: var(--t-body); line-height: 1.55; } .guide-v .takeaways li::marker { color: var(--cobalt); font-weight: 600; } /* Shared: the rail sticks, so the five sections are reachable from anywhere. Offset comes from the compact bar's own height, measured once in CSS rather than guessed — the earlier attempt guessed and left a transparent gap. */ .guide-v .spine-wrap { position: sticky; top: 0; z-index: 12; margin: 0; padding: 12px var(--gutter); background: var(--paper); border-bottom: 1px solid var(--rule); box-shadow: 0 6px 14px -12px rgba(20, 36, 61, 0.5); } .guide-v .step { scroll-margin-top: 96px; } /* ---- A: navigate. Nothing hidden; the rail does the work. --------------- */ /* ---- B: unfold. Most of each section behind a control. ------------------ */ .guide-v-b .unfold { margin: 0; } .guide-v-b .unfold > summary { cursor: pointer; list-style: none; margin: 6px var(--gutter) 0; padding: 12px 0; min-height: 44px; display: flex; align-items: center; gap: 8px; font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.02em; color: var(--cobalt); border-top: 1px solid var(--rule); } .guide-v-b .unfold > summary::-webkit-details-marker { display: none; } .guide-v-b .unfold > summary::before { content: '+'; color: var(--muted); font-size: 16px; } .guide-v-b .unfold[open] > summary::before { content: '–'; } .guide-v-b .unfold[open] > summary { color: var(--muted); } /* ---- C: pace. Same words, given rhythm. -------------------------------- */ .guide-v-c .step { padding-top: 40px; } .guide-v-c .step-head { padding-bottom: 4px; border-bottom: 1px solid var(--rule); margin-bottom: 18px; margin-left: var(--gutter); margin-right: var(--gutter); padding-left: 0; padding-right: 0; } .guide-v-c .step p.lead { font-size: var(--t-h4); line-height: 1.55; color: var(--ink); } .guide-v-c .step h3 { margin-top: 26px; font-size: var(--t-eyebrow); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .guide-v-c .step p { margin-bottom: 16px; } .guide-v-c .step[data-step='E'] .step-head { border-bottom-color: rgba(251, 239, 239, 0.35); } /* The guide's own follow-up text on the sheet. Set tighter than body copy: this is reference the patient reads once before the visit, sharing a page with space they have to write in. */ .followup-block .from-guide-followup .step[data-step='R'] { padding: 0; margin: 0; } .followup-block .from-guide-followup .step-head { display: none; } .followup-block .from-guide-followup p, .followup-block .from-guide-followup ul, .followup-block .from-guide-followup ol { padding-left: 0; padding-right: 0; } .followup-block .from-guide-followup p { font-size: var(--t-meta); line-height: 1.55; margin-bottom: 10px; } .followup-block .from-guide-followup li { font-size: var(--t-meta); line-height: 1.5; } .followup-block .from-guide-followup hr { display: none; } @media print { .followup-block .from-guide-followup p, .followup-block .from-guide-followup li { font-size: 9.5pt; line-height: 1.45; } } /* ============================================================================ Recovery tracker (/tools/) ---------------------------------------------------------------------------- Lives here, not in the page, because Astro's asset pipeline emits no component CSS on this machine — a