/* One stylesheet, no frameworks. Adjust these colors to personalize the site. */
:root { color-scheme: light; --ink:#233c4b; --muted:#586771; --navy:#173d54; --paper:#f4f5f1; --line:#d4dcd9; --accent:#b87924; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font:16px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif; }
.wrap { width:min(1240px,calc(100% - 48px)); margin-inline:auto; }
.masthead { color:white; background:var(--navy); border-bottom:5px solid var(--accent); padding:34px 0 30px; }
.eyebrow { margin:0 0 10px; color:#c9d7dc; text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; }
h1 { margin:0; font-size:clamp(27px,3.3vw,42px); line-height:1.18; letter-spacing:-.035em; }
.intro { margin:12px 0 0; color:#d4e0e4; }
main { padding-block:28px; }
.workspace { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:24px; align-items:start; }
.panel { background:white; border:1px solid var(--line); border-radius:8px; padding:25px; box-shadow:0 3px 12px #173d5405; }
.section-heading { display:flex; align-items:center; gap:10px; margin-bottom:20px; }
h2 { margin:0; font-size:19px; letter-spacing:-.02em; }
.step { font:12px ui-monospace,monospace; border:1px solid var(--line); padding:3px 6px; color:var(--muted); border-radius:3px; }
.unit-tag { margin-left:auto; font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); }
label { display:block; margin-bottom:7px; font-size:13px; font-weight:650; }
.optional { color:var(--muted); font-weight:400; font-size:12px; }
input,button { font:inherit; }
input { width:100%; min-width:0; padding:10px 11px; border:1px solid #aab9c0; border-radius:4px; background:#fff; color:var(--ink); }
input:focus-visible,button:focus-visible,a:focus-visible { outline:3px solid #bc8a39; outline-offset:3px; }
input:invalid { border-color:#a1342c; }
.lookup-row { display:flex; gap:9px; }
.lookup-row input { flex:1; }
button { cursor:pointer; border:0; border-radius:4px; padding:10px 14px; background:var(--navy); color:white; font-size:13px; font-weight:650; }
button:hover { background:#26576f; }
button:disabled { cursor:wait; opacity:.65; }
.hint { color:var(--muted); font-size:12px; margin:8px 0 12px; line-height:1.55; }
.status { font-size:12px; margin:10px 0; overflow-wrap:anywhere; }
.status.error { color:#9b302a; }
.divider { border-top:1px solid var(--line); margin:19px 0; }
.input-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:18px; }
.text-button { color:var(--navy); border:1px solid var(--line); padding:6px 10px; background:#f4f7f7; font-size:12px; }
.text-button:hover { background:#e6efef; }
.results-heading { border-top:1px solid var(--line); padding-top:22px; margin-top:22px; }
.results { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.result { padding:13px; border:1px solid var(--line); border-radius:5px; background:#fafbf9; }
.result span,.result small { display:block; font-size:12px; }
.result strong { display:block; margin:4px 0; font-size:23px; line-height:1.3; font-variant-numeric:tabular-nums; letter-spacing:-.03em; }
.result small { color:var(--muted); font-size:11px; }
.result.primary { background:#edf3f6; border-color:#a8bfcc; }
.result.primary strong { color:var(--navy); }
.placeholder strong { font-size:16px; color:var(--muted); font-weight:500; }
.diagram-panel { position:sticky; top:20px; }
.diagram-intro { color:var(--muted); font-size:14px; margin:0; }
svg { width:100%; height:auto; display:block; margin-block:16px; }
.svg-label { font:14px system-ui,sans-serif; fill:var(--ink); }
#diagramTx,#diagramRx { font-size:12px; }
.diagram-metric { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:16px 0; border-block:1px solid var(--line); font-size:13px; }
.diagram-metric strong { font:700 25px/1.2 system-ui,sans-serif; color:var(--navy); }
.notice { border-left:3px solid var(--accent); padding:13px 16px; background:#faf5ea; font-size:13px; margin-top:23px; }
.notice p { margin:7px 0 0; color:#665b47; }
.assumptions { margin-top:24px; }
.assumption-grid { display:grid; grid-template-columns:1fr 1fr; gap:32px; }
h3 { font-size:14px; margin:17px 0 7px; }
.assumptions p { color:var(--muted); font-size:13px; margin:8px 0; }
.assumptions .formula { font:13px/1.9 ui-monospace,Consolas,monospace; color:var(--ink); background:#f1f4f3; border-radius:4px; padding:12px; }
a { color:#235a79; text-underline-offset:3px; }
a:hover { color:#8b5b16; }
footer { border-top:1px solid var(--line); padding-block:20px 30px; }
.footer-title { font-size:12px; text-transform:uppercase; letter-spacing:.1em; font-weight:700; margin:0 0 8px; }
footer nav { display:flex; flex-wrap:wrap; gap:8px 22px; font-size:13px; }
footer .hint { max-width:850px; margin-top:15px; }
@media (max-width:900px) { .workspace { grid-template-columns:1fr; } .diagram-panel { position:static; } svg { max-width:650px; margin-inline:auto; } }
@media (max-width:520px) { .wrap { width:calc(100% - 24px); } .panel { padding:18px; } .masthead { padding-block:27px; } .input-grid,.assumption-grid { grid-template-columns:1fr; gap:14px; } .lookup-row { flex-wrap:wrap; } .lookup-row input { flex-basis:100%; } .lookup-row button { width:100%; } .result { padding:10px; } .result strong { font-size:21px; } .placeholder strong { font-size:14px; } .optional { display:block; } .assumption-grid { gap:0; } }