/* --------------------------------------------------------------------------- Embedding Citrinate's tools inside the DBOPH site. Each tool ships `body, html { width: 948px; }` on a bare white page, because each was written as a standalone site. Loaded as-is inside ours, the tool simply *is* the page - white, fixed width, no chrome. This file loads AFTER each tool's own stylesheet and does two things: hands the page back to the site, and re-applies the tool's 948px to an inner surface instead, so the tool's own layout still works untouched. Nothing here targets the tools' internal classes. Their markup and styling are their business; this only governs the frame around them. --------------------------------------------------------------------------- */ /* Undo the page-level takeover. */ html, body { width: auto !important; margin: 0 !important; padding: 0 !important; background: var(--bg, #070b12) !important; color: var(--text, #f2f4f7) !important; font: 16px/1.65 "Segoe UI", system-ui, -apple-system, sans-serif !important; } .tool-shell { max-width: 1120px; margin: 0 auto; padding: 34px 24px 64px; } .tool-head { margin-bottom: 20px; } .tool-head h1 { margin: 0 0 6px; font-size: 27px; line-height: 1.15; color: var(--text, #f2f4f7); } .tool-head p { margin: 0; color: var(--dim, #97a2b0); font-size: 15.5px; max-width: 60ch; } /* The tool itself. Its CSS assumes a white page with black Arial, so give it exactly that - just contained, rounded, and sitting on our dark ground. The 948px moves here from ; the horizontal scroll keeps it usable on a phone rather than forcing the whole page sideways. */ .tool-frame { background: #fff; border: 1px solid var(--edge, #1e2a3a); border-radius: 10px; padding: 18px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .tool-surface { width: 948px; color: #000; font: 10pt Arial, sans-serif; } /* Anything the tool draws inherits its own styles again from here down, so reset the few things our site font would otherwise leak in. */ .tool-surface table, .tool-surface td, .tool-surface th, .tool-surface input, .tool-surface select, .tool-surface button { font: inherit; color: inherit; } .tool-credit { margin: 18px 0 0; font-size: 13px; color: var(--faint, #6b7684); } .tool-credit a { color: var(--gold, #f1a500); } @media (max-width: 1000px) { .tool-shell { padding: 24px 14px 48px; } .tool-frame { padding: 12px; border-radius: 8px; } .tool-head h1 { font-size: 23px; } }