/* Neon theme skeleton: reads only tokens from css/tokens.css (body.tema-app.neon). */
html{background:var(--bg-deep)}
body.neon{background:var(--bg-grad);color:var(--ink)}
.neon a{color:var(--link)}
.neon a:hover{color:var(--link-hover)}
.neon :focus-visible{outline-color:var(--focus)}

/* header */
.neon header.top{background:transparent;border-bottom-color:var(--line)}
.neon .brand,.neon header.top nav a{color:var(--ink)}
.neon .brand .tld{color:var(--neon-lime)}
.neon header.top nav a[aria-current="page"],.neon header.top nav a:hover{color:var(--neon-cyan);text-shadow:0 0 12px rgba(34,230,255,.55)}

/* type */
.neon h1,.neon h2,.neon h3{font-family:var(--display);font-weight:var(--h-weight);color:var(--ink);letter-spacing:-.03em}
.neon h1{font-size:clamp(44px,7.6vw,84px);line-height:1;letter-spacing:-.04em}
.neon h2{font-weight:750}
.neon .eyebrow{display:inline-block;color:var(--on-neon);background:var(--neon-lime);padding:5px 12px;border-radius:999px;letter-spacing:.1em;font-size:12px;box-shadow:0 0 18px rgba(198,255,74,.45)}
.neon .lede,.neon .muted,.neon .small,.neon .note,.neon .scale,.neon .hint,.neon .estimate,.neon .note-line{color:var(--ink-soft)}
.neon .hero{padding:40px 0 26px}

/* glass cards */
.neon .card,.neon .table-wrap{background:var(--glass);border:1px solid var(--glass-line);box-shadow:var(--glass-shadow);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* toggles: filled neon pills, dark text */
.neon .seg{background:var(--field-bg);border:1px solid var(--field-line);--tg:var(--toggle-unit)}
.neon .seg+.seg{--tg:var(--toggle-sex)}
.neon .seg span{color:var(--ink-soft);transition:box-shadow .15s,color .15s}
.neon .seg label:hover span{color:var(--ink)}
.neon .seg input:checked+span{background:var(--tg);color:var(--on-neon);font-weight:700;box-shadow:0 0 var(--glow-near) color-mix(in srgb,var(--tg) 70%,transparent),0 0 var(--glow-far) color-mix(in srgb,var(--tg) 30%,transparent)}
.neon .seg input:focus-visible+span{outline-color:var(--tg)}

/* inputs */
.neon .field label{color:var(--ink)}
.neon .inp input{background:var(--field-bg);border-color:var(--field-line);color:var(--ink)}
.neon .inp input::placeholder{color:#8f99ad}
.neon .inp input:focus{border-color:var(--neon-cyan);box-shadow:0 0 0 3px rgba(34,230,255,.22),0 0 18px rgba(34,230,255,.25)}
.neon .inp .unit{color:var(--ink-soft)}
.neon .field.bad input{border-color:var(--err)}
.neon .err{color:var(--err)}

/* result: colour follows the category */
.neon .result{--c:var(--neon-cyan);box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 0 34px color-mix(in srgb,var(--c) 24%,transparent),var(--glass-shadow);border-color:transparent}
.neon .result[data-cat=underweight]{--c:var(--cat-under)}
.neon .result[data-cat=healthy]{--c:var(--cat-healthy)}
.neon .result[data-cat=overweight]{--c:var(--cat-over)}
.neon .result[data-cat=obesity]{--c:var(--cat-obese)}
.neon .k{color:var(--ink-soft)}
.neon .big{font-family:var(--display);font-weight:800;font-size:clamp(56px,8vw,83px);letter-spacing:-.045em;color:var(--ink)}
.neon .result:not([data-cat=none]) .big{color:var(--c);text-shadow:0 0 6px color-mix(in srgb,var(--c) 45%,transparent),0 0 16px color-mix(in srgb,var(--c) 20%,transparent)}
.neon .cat{font-family:var(--display);font-weight:750;color:var(--c);text-shadow:0 0 16px color-mix(in srgb,var(--c) 45%,transparent)}
.neon .result[data-cat=none] .cat{color:var(--ink)}
.neon .result.empty .cat{color:var(--ink-soft);text-shadow:none}

/* band: full neon segments (no dimming), glowing marker */
.neon .b-underweight{fill:var(--cat-under)}.neon .b-healthy{fill:var(--cat-healthy)}.neon .b-overweight{fill:var(--cat-over)}.neon .b-obesity{fill:var(--cat-obese)}
.neon .band rect{transition:opacity .15s}
.neon .band>rect{stroke:#fff;stroke-opacity:.2}
.neon .band>line{stroke:var(--ink);opacity:.5}
.neon .band .tk{fill:var(--ink-soft)}
.neon .band g[clip-path]{filter:drop-shadow(0 0 10px rgba(255,255,255,.12))}
.neon #marker line{stroke:#fff}
.neon #marker path{fill:#fff}
.neon #marker{filter:drop-shadow(0 0 4px var(--c)) drop-shadow(0 0 10px var(--c))}
.neon .band .mk{fill:var(--c);font-weight:800}

/* legend: glowing swatches, active category lit */
.neon .legend li{color:var(--ink);padding:3px 10px 3px 6px;border-radius:999px;border:1px solid transparent}
.neon .legend span{color:var(--ink-soft)}
.neon .sw{border:0;border-radius:999px}
.neon .cats .sw{margin-right:8px}
.neon .sw-underweight{background:var(--cat-under);box-shadow:0 0 10px var(--cat-under)}
.neon .sw-healthy{background:var(--cat-healthy);box-shadow:0 0 10px var(--cat-healthy)}
.neon .sw-overweight{background:var(--cat-over);box-shadow:0 0 10px var(--cat-over)}
.neon .sw-obesity{background:var(--cat-obese);box-shadow:0 0 10px var(--cat-obese)}
.neon .result[data-cat=underweight] .legend li:has(.sw-underweight),.neon .result[data-cat=healthy] .legend li:has(.sw-healthy),.neon .result[data-cat=overweight] .legend li:has(.sw-overweight),.neon .result[data-cat=obesity] .legend li:has(.sw-obesity){border-color:color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 12%,transparent);font-weight:600}

.neon .child{background:rgba(255,79,216,.09);border:1px solid rgba(255,79,216,.38)}

/* buttons, chips */
.neon .btn{background:var(--btn-bg);color:var(--on-neon);font-weight:700;box-shadow:0 0 18px rgba(198,255,74,.35)}
.neon .btn:hover{background:var(--btn-bg);color:var(--on-neon);box-shadow:0 0 26px rgba(198,255,74,.6)}
.neon .jump a{background:var(--glass);border-color:var(--glass-line);color:var(--ink)}
.neon .jump a:hover{border-color:var(--neon-cyan);box-shadow:0 0 16px rgba(34,230,255,.35);color:var(--ink)}

/* tables and chart */
.neon th,.neon td{border-top-color:var(--line)}
.neon thead th{background:var(--surface-2);color:var(--ink)}
.neon .bmigrid th,.neon .bmigrid td{border-color:rgba(255,255,255,.07)}
.neon .bmigrid tbody th{background:var(--surface)}
.neon .bmigrid thead th:first-child{background:var(--surface-2)}
.neon .c-underweight,.neon .c-healthy,.neon .c-overweight,.neon .c-obesity{color:var(--on-neon);font-weight:600}
.neon .cats tr.sub td{color:var(--ink-soft)}
.neon .chart .rl,.neon .chart .bl,.neon .chart .rl-light,.neon .chart .bl-light{fill:var(--on-neon)}
.neon .chart .gl{stroke:#fff;stroke-opacity:.08}
.neon .chart .ax,.neon .chart .at{fill:var(--ink-soft)}
.neon .chart>line{stroke:var(--ink)}
.neon .chart>rect{stroke:#fff;stroke-opacity:.25}
.neon .faq details{border-color:var(--line)}
.neon .faq summary{color:var(--ink)}
.neon .faq details p{color:var(--ink-soft)}
.neon footer.site{border-top-color:var(--line);color:var(--ink-soft)}
.neon footer.site a,.neon .f-brand b{color:var(--ink)}
.neon .crumbs,.neon .crumbs a{color:var(--ink-soft)}

/* mobile first screen: compact hero + one-row toggles so the result shows */
@media (max-width:520px){
  .neon .hero{padding:16px 0 14px}
  .neon .hero .eyebrow{margin-bottom:8px}
  .neon h1{font-size:44px;margin-bottom:.2em}
  .neon .hero .lede{font-size:16px;line-height:1.45;margin:0}
  .neon .form{padding:16px}
  .neon .seg-row{gap:8px;margin-bottom:14px;flex-wrap:nowrap}
  .neon .seg span{padding:7px 11px;font-size:15px}
  .neon .grid{grid-template-columns:1fr 1fr 1fr;gap:10px}
  .neon .field.wide{grid-column:auto}
  .neon .field label{font-size:15px;margin-bottom:4px}
  .neon .inp input{font-size:18px;padding:10px 34px 10px 11px}
  .neon .inp .unit{right:9px;font-size:13px}
  .neon .imperial-only .inp input{padding-right:22px}
  .neon .inp-pair{gap:4px}
  .neon .hint{margin-top:10px;font-size:14px}
  .neon .tool{gap:14px}
  .neon .result{padding:16px 18px}
  .neon .big{font-size:54px}
}
@media (max-width:520px){.neon .field[data-field=height]:has(.imperial-only:not([hidden])){grid-column:1/-1}}
@media (max-width:420px){.neon header.top .wrap{gap:8px}.neon .brand{font-size:17px;gap:8px}.neon header.top ul{gap:12px}.neon header.top nav a{font-size:14.5px}}