:root{ /* ── Fallback design tokens ───────────────────────────────────────────────── These mirror the values in /shared.css so the page remains legible if shared.css fails to load (slow connection, wrong path, CDN outage). When shared.css loads successfully its :root block takes precedence because it appears earlier in the and cascades normally. */ --bg:#f8f9fa; --surface:#ffffff; --ink:#1a1f24; --ink-soft:#4a5568; --ink-muted:#718096; --line:#e2e8f0; --purple:#0052cc; --purple-soft:#ebf2ff; --purple-mid:#6699cc; --teal:#0891B2; --teal-soft:#e0f2fe; --teal-ink:#0369a1; --ok:#1A8A5A; --ok-soft:#E3F5EC; --ok-ink:#065f46; --warn:#D4820A; --warn-soft:#FEF3DA; --warn-ink:#92400e; --risk:#C53030; --risk-soft:#FDE8E8; --sh:0 2px 8px rgba(0,0,0,.07),0 1px 2px rgba(0,0,0,.04); --sh-lg:0 8px 24px rgba(0,0,0,.10),0 2px 8px rgba(0,0,0,.05); --r:8px; --r-sm:6px; --callout-danger-ink:#7f1d1d; --callout-warn-ink:#78350f; --callout-ok-ink:#14532d; --callout-info-ink:#0c4a6e; --callout-purple-ink:#1e1b4b; } /* ── Dark-mode fallback overrides ──────────────────────────────────────────── Re-applies dark token values so dark mode stays correct even when this style.css is parsed after shared.css (and its light-mode :root would otherwise silently undo shared.css's own dark-mode @media block). */ @media(prefers-color-scheme:dark){ :root{ --bg:#0f1117; --surface:#1a2030; --ink:#e2e8f0; --ink-soft:#a0aec0; --ink-muted:#64748b; --line:#2d3748; --purple:#4d94ff; --purple-soft:#0d1e3d; --purple-mid:#2e5fa3; --teal:#22d3ee; --teal-soft:#0c2a42; --teal-ink:#22d3ee; --ok:#34d399; --ok-soft:#064e3b; --ok-ink:#6ee7b7; --warn:#fbbf24; --warn-soft:#1c1300; --warn-ink:#fbbf24; --risk:#fc8181; --risk-soft:#3b1515; --sh:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25); --sh-lg:0 4px 16px rgba(0,0,0,.45),0 2px 6px rgba(0,0,0,.25); --callout-danger-ink:#fca5a5; --callout-warn-ink:#fde68a; --callout-ok-ink:#6ee7b7; --callout-info-ink:#7dd3fc; --callout-purple-ink:#c4b5fd; } } /* ── Layout ── */ .header-inner{max-width:1000px;margin:0 auto;padding:22px 16px 18px} /* shared.css's footer defaults to max-width:880px, which doesn't match this page's 1000px header/content — override so the footer lines up. */ footer{max-width:1000px} /* ── Layout grid ── Desktop: 2 columns (main 1fr + 240px sidebar), cards placed by name via grid-template-areas rather than relying on DOM/source order — lets the sidebar hold just Tapering Guidance while the main column holds both inputs, the "Convert To" results, and the reference table, independent of what order they appear in the HTML. Mobile overrides this to a single column with its own area order (see media query below) — much more direct than the flex-wrap tricks this used before, which broke in the flex-direction:column context (wrap operates on the cross-axis regardless of main-axis direction). */ .page-body{ max-width:1000px;margin:0 auto; padding:28px 16px 60px; display:grid; grid-template-columns:1fr 240px; grid-template-areas: "steroid tapering" "convert tapering" "equiv tapering" "dose tapering" "reference ."; gap:12px 28px; align-items:start; } .gc-steroid{grid-area:steroid} .gc-convert{grid-area:convert} .gc-tapering{grid-area:tapering} .gc-equiv{grid-area:equiv} .gc-dose{grid-area:dose} .gc-reference{grid-area:reference} .criterion{ background:var(--surface); border-radius:var(--r); padding:18px 20px; box-shadow:var(--sh); min-width:0; } .c-header{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px} .c-letter{ font-family:'IBM Plex Mono',monospace; font-size:14px;font-weight:600; width:32px;height:32px; display:flex;align-items:center;justify-content:center; border-radius:var(--r-sm); background:var(--purple-soft);color:var(--purple); flex-shrink:0; } .c-name{font-size:14px;font-weight:600;color:var(--ink);margin-bottom:3px} .c-desc{font-size:11.5px;color:var(--ink-muted);line-height:1.45} .c-opt{font-weight:400;font-size:11.5px;color:var(--ink-muted)} /* ── Form fields ── */ .field-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px 16px} .field{display:flex;flex-direction:column;gap:5px} .field.full-width{grid-column:1/-1} .field-label{font-family:'IBM Plex Mono',monospace;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-muted);font-weight:600} .field select,.field input[type=number]{ font-family:'IBM Plex Mono',monospace;font-size:14px;font-weight:500; width:100%;padding:8px 12px; border:1.5px solid var(--line);border-radius:var(--r-sm); background:var(--bg);color:var(--ink); transition:border-color .15s; } .field select:focus,.field input:focus{outline:none;border-color:var(--purple);box-shadow:0 0 0 1px var(--purple)} .dose-row{display:flex;align-items:center;gap:8px} .dose-row input{flex:1} .unit-label{font-family:'IBM Plex Mono',monospace;font-size:11px;color:var(--ink-muted);white-space:nowrap;flex-shrink:0} /* ── Reference card ── Spans the full grid width (see .gc-reference), same as the main column's other cards, so this uses normal comfortable sizing rather than the compact styling a narrow sidebar would need. */ .ref-card{ background:var(--surface);border-radius:var(--r); padding:18px 20px;box-shadow:var(--sh); min-width:0; } .ref-panel-head{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--purple);margin-bottom:12px;display:flex;align-items:baseline;gap:8px} .ref-note{font-size:9px;color:var(--ink-muted);font-weight:400;letter-spacing:.04em;text-transform:none} .tbl-wrap{overflow-x:auto} .ref-table{width:100%;border-collapse:collapse;font-size:12px} .ref-table th{font-family:'IBM Plex Mono',monospace;font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-muted);font-weight:600;padding:4px 10px 8px;text-align:left;border-bottom:1.5px solid var(--line)} .ref-table td{padding:7px 10px;border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.4} .ref-table td:first-child{color:var(--ink);font-weight:600} .ref-table td.mono{font-family:'IBM Plex Mono',monospace;font-size:11.5px;font-weight:600;color:var(--ink)} .ref-table tr:last-child td{border-bottom:none} .ref-table tr.warn-row td{background:var(--warn-soft)} .disclaimer-box{ font-size:11.5px;color:var(--ink-soft);line-height:1.65; padding:12px 14px;border-radius:var(--r-sm); border-left:3px solid var(--warn); background:var(--warn-soft);margin-top:14px;margin-bottom:12px; } .disclaimer-box strong{color:var(--ink)} /* Matches empiric/sepsis/etc — .source-note otherwise falls back to default paragraph styling (15px black), much larger and darker than every other page's footer citation text. */ .source-note{ font-family:'IBM Plex Mono',monospace; font-size:9.5px;color:var(--ink-muted); line-height:1.55;padding:0 2px; } .result-panel{ background:var(--surface); border-radius:var(--r); box-shadow:var(--sh); overflow:hidden; } .result-panel-head{ font-family:'IBM Plex Mono',monospace; font-size:9px;letter-spacing:.12em;text-transform:uppercase;font-weight:600; color:var(--ink-muted); padding:12px 16px 10px; border-bottom:1px solid var(--line); } .result-panel-body{padding:14px 16px} /* Generated result content */ .mme-placeholder{font-family:'IBM Plex Mono',monospace;font-size:24px;color:var(--line)} .mme-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .mme-num{font-family:'IBM Plex Mono',monospace;font-size:32px;font-weight:600;color:var(--ink);line-height:1} .mme-num.ok{color:var(--ok)} .mme-num.warn{color:var(--warn)} .mme-num.risk{color:var(--risk)} .mme-label{font-size:12px;font-weight:600;color:var(--ink-soft);margin-top:4px} .mme-flag{display:inline-block;margin-top:8px;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:var(--r-sm)} .mme-flag.warn{background:var(--warn-soft);color:var(--warn)} .mme-flag.risk{background:var(--risk-soft);color:var(--risk)} .mme-flag.ok{background:var(--ok-soft);color:var(--ok)} .conv-drug{font-weight:700;font-size:14px;margin-bottom:6px;color:var(--ink)} .conv-dose{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:600;color:var(--ink)} .conv-detail{font-size:11.5px;color:var(--ink-soft);margin-top:6px;line-height:1.55} .conv-warning{font-size:11.5px;font-weight:600;color:var(--warn);margin-top:8px;padding:6px 10px;background:var(--warn-soft);border-radius:var(--r-sm)} .taper-text{font-size:12px;color:var(--ink-soft);line-height:1.65} .taper-text strong{color:var(--ink)} .taper-sched{width:100%;border-collapse:collapse;font-size:11.5px;margin-top:10px} .taper-sched td{padding:5px 2px;border-bottom:1px solid var(--line)} .taper-sched tr:last-child td{border-bottom:none} .taper-sched td.mono{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--ink);white-space:nowrap} .copy-btn{ font-family:'IBM Plex Mono',monospace;font-size:11px;font-weight:600;letter-spacing:.05em; padding:8px 16px;border-radius:50px; border:1.5px solid var(--purple);background:transparent;color:var(--purple); cursor:pointer;transition:background .15s,color .15s; width:100%;margin-top:12px; } .copy-btn:hover{background:var(--purple);color:#fff} .copy-btn.copied{background:var(--ok);color:#fff;border-color:var(--ok)} .copy-btn:focus-visible{outline:2px solid var(--purple);outline-offset:2px} /* ── Mobile ── */ @media(max-width:700px){ /* Single column, reordered independently of desktop's grid-template-areas (and independent of DOM/source order) — Tapering Guidance stays right after the inputs since it's the primary feature (taper SIG generation doesn't depend on "Convert To" at all), Convert To's own results (equiv/dose) follow, and the reference table is a trailing appendix. */ .page-body{ grid-template-columns:1fr; grid-template-areas: "steroid" "convert" "tapering" "equiv" "dose" "reference"; } } /* ── Dark mode ── */ @media(prefers-color-scheme:dark){ .field select,.field input[type=number]{background:var(--surface)} .disclaimer-box{background:var(--warn-soft)} .ref-table tr.warn-row td{background:var(--warn-soft)} .mme-flag.warn{background:var(--warn-soft)} .mme-flag.ok{background:var(--ok-soft)} .conv-warning{background:var(--warn-soft)} }