*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg:      #0f0f0f; --bg2: #1a1a1a; --bg3: #242424; --bg4: #2e2e2e;
--border:  #2a2a2a; --border2: #383838; --border3: #4a4a4a;
--text:    #e8e8e8; --text2: #a0a0a0; --text3: #686868;
--green:   #4a7c59; --red: #7c4a4a;
--radius:  10px; --rsm: 6px;
--mono:    'SF Mono','Fira Code','Cascadia Code','Consolas',monospace;
}
body { background:var(--bg); color:var(--text); font-family:var(--mono);
min-height:100vh; display:flex; justify-content:center; padding:2rem 1rem 5rem; }
.wrap { width:100%; max-width:640px; }
h1 { font-size:11px; font-weight:400; letter-spacing:.2em; text-transform:uppercase;
color:var(--text3); text-align:center; margin-bottom:1.5rem; }

/* diagram */
.diagram-wrap { display:flex; justify-content:center; margin-bottom:1.1rem; }
.diag-container { position:relative; width:100%; max-width:620px; margin:0 auto; }
.diag-container svg { display:block; width:100%; height:auto; }
.dc { position:absolute; background:var(--bg3); border:0.5px solid var(--border2);
border-radius:5px; padding:3px 8px; pointer-events:none; }
.dc-lbl { font-size:9px; color:var(--text3); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1px; }
.dc-val { font-size:14px; font-weight:500; color:var(--text); white-space:nowrap; }
.dc-rise  { left:2px; top:42%; transform:translateY(-50%); }
.dc-run   { bottom:-9px; left:50%; transform:translateX(-50%); }
.dc-angle { right:52px; bottom:58px; }
.dc-ratio { left:64%; top:68%; transform:translateX(-50%); }
.dc-pitch { left:26%; bottom:29%; transform:translateX(-50%); }

/* field cards */
.fields { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-bottom:10px; }
.field { background:var(--bg2); border:0.5px solid var(--border2); border-radius:var(--radius); padding:12px 13px; }
.field.is-result { border-style:dashed; border-color:var(--border3); }
.field.elev-driven { border-color:var(--green); }
.field-top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.field-label { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); }
.lock-btn { display:flex; align-items:center; gap:5px; cursor:pointer; user-select:none;
background:none; border:none; padding:0; color:inherit; font-family:var(--mono); }
.dot { width:13px; height:13px; border-radius:50%; border:1.5px solid var(--border3); flex-shrink:0; order:2; }
.dot.on { background:var(--text3); border-color:var(--text3); }
.dot-lbl { font-size:10px; color:var(--text3); order:1; }
.input-row { display:flex; align-items:center; gap:6px; }
.num-input { background:var(--bg3); border:0.5px solid var(--border); border-radius:var(--rsm);
outline:none; font-family:var(--mono); font-size:20px; font-weight:500; color:var(--text);
width:100%; min-width:0; padding:6px 8px; -moz-appearance:textfield; }
.num-input::-webkit-outer-spin-button, .num-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.num-input:focus { border-color:var(--border3); }
.num-input.is-result { color:var(--text3); background:var(--bg); cursor:pointer; }
.num-input::placeholder { color:var(--text3); }
.unit-btn { background:var(--bg3); border:0.5px solid var(--border2); border-radius:var(--rsm);
font-size:12px; font-family:var(--mono); color:var(--text2); cursor:pointer;
padding:4px 9px; white-space:nowrap; flex-shrink:0; }
.unit-btn:hover { border-color:var(--border3); color:var(--text); }
.field-note { font-size:11px; color:var(--text3); margin-top:4px; min-height:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; max-width:100%; }

/* elevation panel */
.elev-panel { background:var(--bg2); border:0.5px solid var(--border2);
border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; }
.elev-panel-title { font-size:10px; letter-spacing:.1em; text-transform:uppercase;
color:var(--text3); margin-bottom:10px; }
.elev-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.elev-row:last-child { margin-bottom:0; }
.elev-row-lbl { font-size:10px; letter-spacing:.07em; text-transform:uppercase;
color:var(--text3); white-space:nowrap; width:48px; flex-shrink:0; }
.elev-input { background:var(--bg3); border:0.5px solid var(--border); border-radius:var(--rsm);
outline:none; font-family:var(--mono); font-size:18px; font-weight:500; color:var(--text);
padding:5px 8px; flex:1; min-width:0; -moz-appearance:textfield; }
.elev-input::-webkit-outer-spin-button, .elev-input::-webkit-inner-spin-button { -webkit-appearance:none; }
.elev-input:focus { border-color:var(--border3); }
.elev-input::placeholder { color:var(--text3); }
.elev-unit { font-size:13px; color:var(--text3); flex-shrink:0; }
.delta-box { flex:1; background:var(--bg3); border-radius:var(--rsm);
padding:7px 12px; display:flex; align-items:center; gap:12px; }
.delta-info { flex:1; }
.delta-val { font-size:16px; font-weight:500; color:var(--text); }
.delta-sub { font-size:11px; color:var(--text3); margin-top:1px; }
.delta-use-btn { background:var(--bg4); border:0.5px solid var(--border3);
border-radius:var(--rsm); font-family:var(--mono); font-size:11px; color:var(--text2);
cursor:pointer; padding:4px 10px; white-space:nowrap; }
.delta-use-btn:hover { color:var(--text); border-color:var(--text3); }
.delta-use-btn.active { border-color:var(--green); color:#6abf85; }

.err-row { font-size:12px; color:#c07070; text-align:center; min-height:16px; margin-bottom:8px; }
.divider { border:none; border-top:0.5px solid var(--border); margin:12px 0; }

/* summary */
.summary { display:none; }
.g2 { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin-bottom:8px; }
.g3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.card { background:var(--bg2); border-radius:var(--rsm); padding:10px 13px; border:0.5px solid transparent; }
.card.hi  { background:var(--bg); border-color:var(--border3); }
.card.e-hi { border-left:3px solid var(--green); }
.card.e-lo { border-left:3px solid var(--red); }
.card-lbl { font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text3); margin-bottom:4px; }
.card-val { font-size:14px; font-weight:500; color:var(--text); }
.card-sub { font-size:11px; color:var(--text3); margin-top:2px; }

/* tolerance */
.tol-row { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tol-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); white-space:nowrap; }
.tol-group { display:flex; }
.tol-btn { background:var(--bg3); border:0.5px solid var(--border2);
font-family:var(--mono); font-size:12px; color:var(--text2); cursor:pointer; padding:4px 12px; }
.tol-btn:first-child { border-radius:6px 0 0 6px; }
.tol-btn:last-child  { border-radius:0 6px 6px 0; }
.tol-btn+.tol-btn { border-left:none; }
.tol-btn.on { background:var(--bg4); color:var(--text); border-color:var(--border3); position:relative; z-index:1; }
.section-lbl { font-size:10px; text-transform:uppercase; letter-spacing:.07em; color:var(--text3); margin-bottom:8px; }

/* mini calc */
.calc-wrap { margin-top:2rem; border-top:0.5px solid var(--border); padding-top:1rem; }
.calc-toggle { background:none; border:none; font-family:var(--mono); font-size:11px;
letter-spacing:.12em; text-transform:uppercase; color:var(--text3); cursor:pointer;
display:flex; align-items:center; gap:6px; margin:0 auto; padding:4px 8px; }
.calc-toggle:hover { color:var(--text2); }
.calc-arrow { font-size:9px; transition:transform .2s; display:inline-block; }
.calc-arrow.open { transform:rotate(180deg); }

.calc-display { background:var(--bg3); border:0.5px solid var(--border2); border-radius:var(--rsm);
padding:10px 14px; text-align:right; margin-bottom:8px; }
.calc-expr { font-size:11px; color:var(--text3); min-height:14px; word-break:break-all; }
.calc-val  { font-size:28px; font-weight:500; color:var(--text); word-break:break-all; }
.calc-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.cb { background:var(--bg2); border:0.5px solid var(--border2); border-radius:var(--rsm);
font-family:var(--mono); font-size:16px; color:var(--text2); cursor:pointer;
padding:13px 0; text-align:center; user-select:none; transition:background .1s; }
.cb:hover  { background:var(--bg3); color:var(--text); }
.cb:active { background:var(--bg4); }
.cb.op  { color:#7aabcc; }
.cb.eq  { background:var(--bg3); color:var(--text); border-color:var(--border3); }
.cb.eq:hover { background:var(--bg4); }
.cb.fn  { font-size:13px; color:var(--text3); }
.cb.span2 { grid-column:span 2; }

/* ── ADA panel ── */
.ada-wrap { margin-bottom:10px; }
.ada-toggle {
width:100%; background:var(--bg2); border:0.5px solid var(--border2);
border-radius:var(--radius); display:flex; align-items:center; gap:8px;
padding:10px 14px; cursor:pointer; font-family:var(--mono); text-align:left;
transition:border-color .15s;
}
.ada-toggle:hover { border-color:var(--border3); }
.ada-toggle.open { border-radius:var(--radius) var(--radius) 0 0; }
.ada-toggle-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); flex:1; }
.ada-badges { display:flex; gap:5px; }
.ada-badge { font-size:10px; padding:2px 7px; border-radius:4px; font-family:var(--mono); white-space:nowrap; }
.ada-badge.good { background:#1a2e20; color:#6abf85; border:0.5px solid #2d5c3d; }
.ada-badge.warn { background:#2d2510; color:#c8a84b; border:0.5px solid #5c4a1a; }
.ada-badge.bad  { background:#2e1515; color:#c87070; border:0.5px solid #5c2a2a; }
.ada-badge.none { background:var(--bg3); color:var(--text3); border:0.5px solid var(--border2); }
.ada-arrow-ic { font-size:9px; color:var(--text3); transition:transform .2s; display:inline-block; flex-shrink:0; }
.ada-arrow-ic.open { transform:rotate(180deg); }

.ada-body {
display:none; background:var(--bg2);
border:0.5px solid var(--border2); border-top:none;
border-radius:0 0 var(--radius) var(--radius);
padding:14px 14px 10px;
}
.ada-body.open { display:block; }

.ada-cols { display:grid; grid-template-columns:1fr 1px 1fr; gap:0; }
.ada-col-div { background:var(--border); margin:0 14px; }
.ada-col { }
.ada-col:first-child { padding-right:14px; }
.ada-col:last-child  { padding-left:14px; }
.ada-col-title {
font-size:10px; letter-spacing:.08em; text-transform:uppercase;
color:var(--text3); margin-bottom:10px; display:flex; align-items:center; gap:6px;
}
.ada-sdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.ada-sdot.good { background:#6abf85; }
.ada-sdot.warn { background:#c8a84b; }
.ada-sdot.bad  { background:#c87070; }

.ada-item { margin-bottom:7px; display:flex; gap:7px; align-items:baseline; }
.ada-item-ic { font-size:10px; flex-shrink:0; margin-top:1px; }
.ada-item-ic.good { color:#6abf85; }
.ada-item-ic.warn { color:#c8a84b; }
.ada-item-ic.bad  { color:#c87070; }
.ada-item-ic.info { color:var(--text3); }
.ada-item-txt { font-size:11px; color:var(--text2); line-height:1.5; }
.ada-item-txt b { font-weight:500; }

.ada-links { margin-top:10px; display:flex; flex-direction:column; gap:3px; }
.ada-lnk {
font-size:10px; color:#5a8acc; text-decoration:none;
display:inline-flex; align-items:center; gap:4px; width:fit-content;
}
.ada-lnk:hover { text-decoration:underline; }

.ada-disclaimer {
font-size:10px; color:var(--text3); margin-top:12px;
padding-top:10px; border-top:0.5px solid var(--border); line-height:1.6;
}

/* ── metric toggle ── */
.title-row { display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:1.5rem; }
.title-row h1 { margin:0; }
.metric-pill { display:flex; background:var(--bg3); border:0.5px solid var(--border2); border-radius:20px; overflow:hidden; cursor:pointer; }
.metric-pill span { font-family:var(--mono); font-size:11px; color:var(--text3); padding:3px 10px; }
.metric-pill span.on { background:var(--bg4); color:var(--text); }

/* ── ADA tabs ── */
.ada-tabs { display:flex; border-bottom:0.5px solid var(--border); margin-bottom:12px; }
.ada-tab { background:none; border:none; border-bottom:2px solid transparent; margin-bottom:-1px; font-family:var(--mono); font-size:11px; color:var(--text3); cursor:pointer; padding:4px 14px 7px; }
.ada-tab:hover { color:var(--text2); }
.ada-tab.on { color:var(--text); border-bottom-color:var(--text3); }
.ada-pane { display:none; }
.ada-pane.on { display:block; }
.codes-sect { margin-bottom:14px; }
.codes-head { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--text2); margin-bottom:6px; padding-bottom:4px; border-bottom:0.5px solid var(--border); display:flex; align-items:center; justify-content:space-between; }
.codes-lnk { font-size:10px; color:#5a8acc; text-decoration:none; }
.codes-lnk:hover { text-decoration:underline; }

/* ── save states ── */
.saves-wrap { margin-bottom:10px; }
.saves-toggle { width:100%; background:var(--bg2); border:0.5px solid var(--border2); border-radius:var(--radius); display:flex; align-items:center; gap:8px; padding:10px 14px; cursor:pointer; font-family:var(--mono); text-align:left; }
.saves-toggle:hover { border-color:var(--border3); }
.saves-toggle.open { border-radius:var(--radius) var(--radius) 0 0; }
.saves-toggle-lbl { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--text3); flex:1; }
.saves-count { font-size:10px; color:var(--text3); background:var(--bg3); border:0.5px solid var(--border2); border-radius:10px; padding:1px 7px; }
.saves-body { display:none; background:var(--bg2); border:0.5px solid var(--border2); border-top:none; border-radius:0 0 var(--radius) var(--radius); padding:10px 14px; }
.saves-body.open { display:block; }
.saves-top { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.save-name-inp { background:var(--bg3); border:0.5px solid var(--border2); border-radius:var(--rsm); font-family:var(--mono); font-size:13px; color:var(--text); padding:5px 10px; flex:1; outline:none; }
.save-name-inp:focus { border-color:var(--border3); }
.save-name-inp::placeholder { color:var(--text3); }
.save-do-btn { background:var(--bg3); border:0.5px solid var(--green); border-radius:var(--rsm); font-family:var(--mono); font-size:12px; color:#6abf85; cursor:pointer; padding:5px 14px; white-space:nowrap; flex-shrink:0; }
.save-do-btn:hover { background:var(--bg4); }
.saves-list { display:flex; flex-direction:column; gap:6px; }
.save-item { display:flex; align-items:center; gap:8px; background:var(--bg3); border-radius:var(--rsm); padding:8px 10px; }
.save-info { flex:1; min-width:0; }
.save-name { font-size:13px; font-weight:500; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.save-meta { font-size:10px; color:var(--text3); margin-top:1px; }
.save-info:hover .save-name { color:#6abf85; }
.save-btns { display:flex; gap:5px; flex-shrink:0; }
.s-btn { background:var(--bg4); border:0.5px solid var(--border2); border-radius:var(--rsm); font-family:var(--mono); font-size:11px; color:var(--text2); cursor:pointer; padding:3px 9px; }
.s-btn:hover { border-color:var(--border3); color:var(--text); }
.s-btn.del:hover { border-color:#7c4a4a; color:#c87070; }
.save-empty { font-size:12px; color:var(--text3); text-align:center; padding:10px 0; }

/* ── print button ── */
.util-row { display:flex; justify-content:flex-end; margin-bottom:6px; }
.print-btn { background:none; border:0.5px solid var(--border2); border-radius:var(--rsm); font-family:var(--mono); font-size:11px; color:var(--text3); cursor:pointer; padding:4px 12px; }
.print-btn:hover { color:var(--text2); border-color:var(--border3); }

/* ── print styles ── */

/* ── slope slider ── */
.ss-wrap { background:var(--bg2); border:0.5px solid var(--border2); border-radius:var(--radius); padding:12px 14px; margin-bottom:10px; }
.ss-head { display:flex; align-items:center; gap:8px; margin-bottom:10px; }
.ss-brand { font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--text3); flex:1; }
.snap-btn { background:none; border:0.5px solid var(--border2); border-radius:var(--rsm);
font-family:var(--mono); font-size:10px; color:var(--text2); cursor:pointer; padding:2px 8px; }
.snap-btn:hover { border-color:var(--border3); color:var(--text); }
.snap-btn.free { border-color:var(--green); color:#6abf85; }
.ss-pct { font-size:16px; font-weight:500; color:var(--text); min-width:52px; text-align:right; font-family:var(--mono); }
.ss-range { width:100%; height:5px; -webkit-appearance:none; appearance:none; cursor:pointer; border-radius:3px; outline:none; margin-bottom:6px;
background:linear-gradient(to right,#1e7a40 0%,#1e7a40 8%,#2a8a50 8%,#2a8a50 20%,#c8a84b 20%,#c8a84b 33.32%,#8a2020 33.32%,#8a2020 100%); }
.ss-range::-webkit-slider-thumb { -webkit-appearance:none; width:20px; height:20px; border-radius:50%; background:var(--text); border:3px solid var(--bg); cursor:pointer; box-shadow:0 0 0 1.5px var(--border3); }
.ss-range::-moz-range-thumb { width:18px; height:18px; border-radius:50%; background:var(--text); border:3px solid var(--bg); cursor:pointer; }
.ss-marks { position:relative; height:16px; font-size:9px; color:var(--text3); font-family:var(--mono); }
.ss-mark { position:absolute; transform:translateX(-50%); white-space:nowrap; }

/* ── calc history ── */
.calc-body { display:none; margin-top:1rem; }
.calc-body.open { display:block; }
.calc-inner { display:flex; gap:8px; align-items:flex-start; }
.calc-hist { width:88px; flex-shrink:0; display:flex; flex-direction:column; gap:4px; }
.ch-item { background:var(--bg3); border:0.5px solid var(--border2); border-radius:var(--rsm); padding:5px 8px; cursor:pointer; transition:border-color .12s; }
.ch-item:hover { border-color:var(--border3); }
.ch-expr { font-size:9px; color:var(--text3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:1px; }
.ch-val  { font-size:14px; font-weight:500; color:var(--text); font-family:var(--mono); }
.ch-empty { font-size:10px; color:var(--text3); text-align:center; padding:8px 0; }
.calc-main { flex:1; min-width:0; }


/* ── slider snap ripple (JS-created div over slider) ── */
@keyframes ripple-out {
0%   { transform:translate(-50%,-50%) scale(1);   opacity:0.85; }
100% { transform:translate(-50%,-50%) scale(5.5); opacity:0; }
}
.ss-wrap { position:relative; overflow:visible; }
.slider-ripple {
position:absolute; width:7px; height:7px; border-radius:50%;
border:1px solid #c8a84b; pointer-events:none; z-index:10;
animation:ripple-out 0.75s ease-out forwards;
}
/* ── mobile ── */
@media (max-width:520px) {
.fields { grid-template-columns:1fr; }
.calc-inner { flex-direction:column; }
.calc-hist { width:100%; flex-direction:row; flex-wrap:wrap; max-height:none; }
.ch-item { flex:0 0 calc(50% - 2px); }
.ss-mark { font-size:8px; }
.num-input { font-size:clamp(16px,4vw,20px); }
}

@media print {
@page { size:letter; margin:0.6in; }
body { background:#fff !important; color:#111 !important; padding:0; }
.metric-pill, .unit-btn, .lock-btn, .tol-btn, .delta-use-btn,
.s-btn, .save-do-btn, .save-top, .saves-toggle, .saves-body,
.calc-wrap, .ada-tabs, .ada-arrow-ic, .util-row,
.print-btn, .ada-lnk, .codes-lnk { display:none !important; }
.field, .elev-panel, .card, .ada-body, .summary { background:#f9f9f9 !important; border-color:#ddd !important; }
.ada-toggle { background:#f0f0f0 !important; border-color:#ccc !important; border-radius:8px !important; }
.ada-toggle-lbl { color:#333 !important; }
.delta-box { background:#f0f0f0 !important; border:0.5px solid #ccc !important; }
.delta-val { color:#111 !important; }
.delta-sub { color:#555 !important; }
.saves-wrap { display:none !important; }
.field.is-result { border-style:dashed !important; }
.num-input, .elev-input { background:#fff !important; color:#111 !important; border-color:#ccc !important; }
.text,.field-label,.elev-row-lbl,.card-lbl,.section-lbl,.ada-col-title,.ada-toggle-lbl,.saves-toggle-lbl { color:#555 !important; }
.field-note,.card-sub,.ada-item-txt,.ada-disclaimer,.dot-lbl { color:#777 !important; }
.card-val,.delta-val,.ada-toggle-lbl { color:#111 !important; }
.ada-body { display:block !important; }
.ada-pane { display:block !important; border-top:0.5px solid #ddd; padding-top:8px; margin-top:8px; }
.ada-item-ic.good { color:#1a6e3f !important; } .ada-item-ic.warn { color:#7a5a00 !important; } .ada-item-ic.bad { color:#8a1010 !important; }
.ada-badge.good { background:#e8f5ee !important; color:#1a6e3f !important; border-color:#aad4bb !important; }
.ada-badge.warn { background:#fdf3dc !important; color:#7a5a00 !important; border-color:#e8cc80 !important; }
.ada-badge.bad  { background:#fde8e8 !important; color:#8a1010 !important; border-color:#e8aaaa !important; }
.summary { display:block !important; }
svg polyline { stroke:#333 !important; } svg line,svg path { stroke:#aaa !important; } svg text { fill:#555 !important; }
.ada-cols { grid-template-columns:1fr 1px 1fr; }
}