/* Ball Mount Drop Calculator — page styles. Theme tokens only. */

@font-face { font-family:"Barlow Cond Fallback"; src:local("Arial Narrow"),local("Roboto Condensed"),local("Arial"); size-adjust:90%; ascent-override:88%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"Inter Fallback"; src:local("Arial"); ascent-override:90.44%; descent-override:22.52%; line-gap-override:0%; size-adjust:107.12%; }
.hd-page { font-family:"Inter","Inter Fallback",system-ui,sans-serif; display:block; }
.hd-page .t-display, .hd-page .t-h2, .hd-card__val, .hd-vbadge { font-family:"Barlow Condensed","Barlow Cond Fallback",system-ui,sans-serif; }

/* ---- Inputs ---- */
.hd-tool { background:var(--color-bg-elevated); border:1px solid var(--color-line); border-radius:14px; padding:1.4rem 1.5rem; }
.hd-grid { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:700px){ .hd-grid { grid-template-columns:repeat(3,1fr); gap:1rem; } }
.hd-cell { display:flex; flex-direction:column; gap:.4rem; }
.hd-cell > span { font-size:.78rem; color:var(--color-ink-2); font-weight:600; display:flex; flex-direction:column; gap:.15rem; }
.hd-cell > span small { color:var(--color-ink-muted); font-weight:500; font-size:.72rem; }
.hd-ig { display:flex; align-items:center; gap:.4rem; border:1px solid var(--color-line-strong); border-radius:.55rem; background:var(--color-bg); padding:0 .8rem; }
.hd-ig:focus-within { outline:2px solid var(--color-amber-500); outline-offset:1px; }
.hd-input { width:100%; height:3rem; border:0; background:transparent; font-size:1.1rem; font-family:"JetBrains Mono",monospace; color:var(--color-ink); -moz-appearance:textfield; }
.hd-input:focus { outline:none; }
.hd-input::-webkit-outer-spin-button, .hd-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.hd-ig em { font-style:normal; font-size:.8rem; color:var(--color-ink-muted); font-weight:600; flex:0 0 auto; }

.hd-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; margin-top:1.2rem; }
.hd-presets { display:flex; flex-wrap:wrap; align-items:center; gap:.45rem; }
.hd-presets__lbl { font-size:.78rem; color:var(--color-ink-muted); font-weight:600; }
.hd-chip { padding:.45rem .8rem; border:1px solid var(--color-line-strong); border-radius:999px; background:var(--color-bg); color:var(--color-ink-2); font-weight:600; font-size:.82rem; cursor:pointer; transition:all .12s ease; }
.hd-chip:hover { border-color:var(--color-amber-500); color:var(--color-amber-700); }
.hd-hint { font-size:.82rem; color:var(--color-ink-muted); margin-top:.9rem; line-height:1.6; }

/* ---- Result ---- */
.hd-output { display:flex; flex-direction:column; gap:1.5rem; }
.hd-verdict { display:flex; align-items:center; gap:1rem; padding:1rem 1.2rem; border:1px solid var(--color-line); border-radius:14px; background:var(--color-bg-elevated); }
.hd-verdict--ok { border-color:var(--color-signal-green); }
.hd-verdict--caution { border-color:var(--color-amber-500); }
.hd-verdict--stop { border-color:var(--color-signal-red); }
.hd-vbadge { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; min-width:4.2rem; height:3.2rem; padding:0 .7rem; border-radius:10px; font-weight:900; font-size:1.9rem; line-height:1; background:var(--color-bg-subtle); color:var(--color-ink); }
.hd-verdict--ok .hd-vbadge { background:color-mix(in srgb, var(--color-signal-green) 16%, transparent); color:var(--color-signal-green); }
.hd-verdict--caution .hd-vbadge { background:var(--color-amber-50); color:var(--color-amber-700); }
.hd-verdict--stop .hd-vbadge { background:color-mix(in srgb, var(--color-signal-red) 14%, transparent); color:var(--color-signal-red); }
.hd-verdict__txt { font-size:1rem; line-height:1.5; color:var(--color-ink); font-weight:500; margin-top:.15rem; }

.hd-cards { display:grid; grid-template-columns:1fr; gap:.8rem; }
@media (min-width:640px){ .hd-cards { grid-template-columns:repeat(3,1fr); } }
.hd-card { border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:.95rem 1.1rem; display:flex; flex-direction:column; gap:.2rem; }
.hd-card--accent { border-color:var(--color-amber-300); background:var(--color-amber-50); }
.hd-card__lbl { font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink-muted); font-weight:700; }
.hd-card__val { font-weight:800; font-size:1.9rem; line-height:1.05; }
.hd-card--accent .hd-card__val { color:var(--color-amber-700); }
.hd-card__sub { font-size:.8rem; color:var(--color-ink-2); }

/* ---- Visual + table ---- */
.hd-detail { display:grid; grid-template-columns:1fr; gap:1.4rem; }
@media (min-width:880px){ .hd-detail { grid-template-columns:1.05fr .95fr; gap:2rem; align-items:start; } }
.hd-visual { border:1px solid var(--color-line); border-radius:14px; background:var(--color-bg-elevated); padding:1.1rem 1.2rem; margin:0; }
.hd-visual svg { width:100%; height:auto; display:block; }
.hd-visual__cap { font-size:.8rem; color:var(--color-ink-muted); margin-top:.7rem; line-height:1.55; }
.hd-svg-ground { stroke:var(--color-line-strong); stroke-width:2; }
.hd-svg-ground-lbl { font-size:8px; fill:var(--color-ink-muted); font-family:"JetBrains Mono",monospace; }
.hd-svg-post { stroke:var(--color-line-strong); stroke-width:1; stroke-dasharray:3 3; }
.hd-svg-recv { fill:var(--color-ink-2); }
.hd-svg-coup { fill:var(--color-ink-2); }
.hd-svg-shank, .hd-svg-arm { stroke:var(--color-amber-600); stroke-width:4; stroke-linecap:round; }
.hd-svg-ball { fill:var(--color-amber-500); }
.hd-svg-tongue { stroke:var(--color-ink); stroke-width:2; stroke-linecap:round; }
.hd-svg-lbl { font-size:9px; fill:var(--color-ink-2); font-weight:600; }
.hd-svg-lbl--ball { fill:var(--color-amber-700); }

.hd-table { width:100%; border-collapse:collapse; font-size:.92rem; }
.hd-table th { text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; color:var(--color-ink-muted); font-weight:700; padding:.55rem .7rem; border-bottom:1px solid var(--color-line-strong); }
.hd-table td { padding:.7rem; border-bottom:1px solid var(--color-line); color:var(--color-ink-2); }
.hd-table tbody tr:last-child td { border-bottom:0; }
.hd-table--wide { border:1px solid var(--color-line); border-radius:12px; overflow:hidden; background:var(--color-bg-elevated); }
@media (max-width:640px){
	.hd-table thead { display:none; }
	.hd-table tr { display:block; border-bottom:1px solid var(--color-line); padding:.5rem 0; }
	.hd-table td { display:flex; justify-content:space-between; gap:1rem; border:0; padding:.35rem .8rem; }
	.hd-table td::before { content:attr(data-th); font-size:.7rem; text-transform:uppercase; letter-spacing:.03em; color:var(--color-ink-muted); font-weight:700; flex:0 0 auto; }
}

.hd-notes { border:1px solid var(--color-line); border-radius:14px; background:var(--color-bg-subtle); padding:1.2rem 1.4rem; }
.hd-notes__h { font-family:"Barlow Condensed",sans-serif; font-weight:800; font-size:1.3rem; margin-bottom:.6rem; }
.hd-notes ul { display:flex; flex-direction:column; gap:.6rem; }
.hd-notes li { font-size:.93rem; line-height:1.6; color:var(--color-ink-2); padding-left:1.1rem; position:relative; }
.hd-notes li::before { content:""; position:absolute; left:0; top:.6rem; width:.42rem; height:.42rem; border-radius:50%; background:var(--color-amber-500); }
.hd-disclaimer { font-size:.82rem; color:var(--color-ink-muted); line-height:1.6; max-width:74ch; }

/* ---- Steps ---- */
.hd-steps { display:grid; grid-template-columns:1fr; gap:1rem; counter-reset:hd; }
@media (min-width:760px){ .hd-steps { grid-template-columns:1fr 1fr; gap:1.2rem; } }
.hd-steps li { display:flex; gap:.9rem; border:1px solid var(--color-line); border-radius:12px; background:var(--color-bg-elevated); padding:1rem 1.1rem; }
.hd-steps li > span { flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:50%; background:var(--color-amber-500); color:#fff; font-weight:800; display:inline-flex; align-items:center; justify-content:center; font-size:.9rem; }
.hd-steps h3 { font-weight:700; font-size:1rem; margin-bottom:.25rem; }
.hd-steps p { font-size:.9rem; line-height:1.6; color:var(--color-ink-2); }

/* ---- Next tools ---- */
.hd-next { display:grid; grid-template-columns:1fr; gap:.9rem; }
@media (min-width:640px){ .hd-next { grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .hd-next { grid-template-columns:repeat(4,1fr); } }
.hd-next__item { display:block; text-decoration:none; }

/* ---- FAQ ---- */
.hd-faq { display:flex; flex-direction:column; gap:.5rem; }
.hd-faq__item { border:1px solid var(--color-line); border-radius:11px; background:var(--color-bg-elevated); padding:.85rem 1.1rem; }
.hd-faq__item summary { cursor:pointer; font-weight:700; color:var(--color-ink); list-style:none; display:flex; justify-content:space-between; gap:1rem; align-items:center; }
.hd-faq__item summary::-webkit-details-marker { display:none; }
.hd-faq__item summary::after { content:"+"; color:var(--color-amber-600); font-weight:800; font-size:1.2rem; flex:0 0 auto; }
.hd-faq__item[open] summary::after { content:"−"; }
.hd-faq__item p { margin-top:.6rem; font-size:.93rem; line-height:1.65; }