/* BodyType.app neon 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)}

/* shape colours: anything carrying data-shape gets its own neon in --c */
.neon [data-shape]{--c:var(--shape-none)}
.neon [data-shape=hourglass]{--c:var(--shape-hourglass)}
.neon [data-shape=pear]{--c:var(--shape-pear)}
.neon [data-shape=apple]{--c:var(--shape-apple)}
.neon [data-shape=rectangle]{--c:var(--shape-rectangle)}
.neon [data-shape=inverted-triangle]{--c:var(--shape-inverted-triangle)}
/* shape pages, tiles and "other shapes" links pick up the colour of the shape they show */
.neon .shape-page:has(.shape-hero [data-shape=hourglass]),.neon .shape-tile:has([data-shape=hourglass]),.neon .others a[href$="/hourglass/"]{--c:var(--shape-hourglass)}
.neon .shape-page:has(.shape-hero [data-shape=pear]),.neon .shape-tile:has([data-shape=pear]),.neon .others a[href$="/pear/"]{--c:var(--shape-pear)}
.neon .shape-page:has(.shape-hero [data-shape=apple]),.neon .shape-tile:has([data-shape=apple]),.neon .others a[href$="/apple/"]{--c:var(--shape-apple)}
.neon .shape-page:has(.shape-hero [data-shape=rectangle]),.neon .shape-tile:has([data-shape=rectangle]),.neon .others a[href$="/rectangle/"]{--c:var(--shape-rectangle)}
.neon .shape-page:has(.shape-hero [data-shape=inverted-triangle]),.neon .shape-tile:has([data-shape=inverted-triangle]),.neon .others a[href$="/inverted-triangle/"]{--c:var(--shape-inverted-triangle)}

/* 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: Outfit, heavy, white */
.neon h1,.neon h2,.neon h3{font-family:var(--display);font-weight:var(--h-weight);font-variation-settings:normal;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 h3{font-weight:700}
.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 .note,.neon .tape,.neon .hint,.neon .estimate,.neon .alt,.neon .shape-alt{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 .field label small{color:var(--ink-soft)}
.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)}

/* silhouettes: filled with the shape's neon, dark measuring lines */
.neon .sil .sf{fill:var(--c)}
.neon .sil .st{fill:var(--c);opacity:.55}
.neon .sil .sf-m{fill:color-mix(in srgb,var(--ink) 22%,transparent)}
.neon .sil .sf-m.st{opacity:1}
.neon .sil line{stroke:var(--on-neon);opacity:.5}
.neon .sil-box,.neon .sil-sm{background:color-mix(in srgb,var(--c) 13%,transparent);border:1px solid color-mix(in srgb,var(--c) 38%,transparent)}
.neon .sil-result:not([hidden]){filter:drop-shadow(0 0 10px color-mix(in srgb,var(--c) 40%,transparent))}

/* result card: colour follows the shape, headline moderate with a soft glow only */
.neon .shape-card{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 60%,transparent),0 0 34px color-mix(in srgb,var(--c) 22%,transparent),var(--glass-shadow);border-color:transparent}
.neon .k,.neon .k small{color:var(--ink-soft)}
.neon .shape-name{font-family:var(--display);font-weight:800;letter-spacing:-.03em;color:var(--c);text-shadow:0 0 var(--text-glow-near) color-mix(in srgb,var(--c) var(--text-glow-near-a),transparent),0 0 var(--text-glow-far) color-mix(in srgb,var(--c) var(--text-glow-far-a),transparent)}
.neon .shape-card.empty .shape-name{color:var(--ink);text-shadow:none;font-weight:700}
.neon .shape-why{color:var(--ink)}
.neon .badge{background:color-mix(in srgb,var(--neon-yellow) 16%,transparent);color:var(--neon-yellow);border:1px solid color-mix(in srgb,var(--neon-yellow) 45%,transparent)}
.neon .shape-link a{color:var(--c)}
.neon .metric .v{font-family:var(--display);font-weight:750;letter-spacing:-.02em;color:var(--ink)}
.neon .metric .n{color:var(--ink-soft)}

/* advice: dots and accents in the shape colour */
.neon .advice-card h3{color:var(--ink)}
.neon .dot.good{background:var(--c);box-shadow:0 0 10px var(--c)}
.neon .dot.bad{border-color:var(--ink-soft)}
.neon .advice-grid>.card:first-child{border-color:color-mix(in srgb,var(--c) 45%,transparent)}
.neon .cuts li{border-top-color:var(--line)}
.neon .cuts b{color:var(--ink)}
.neon .cuts span{color:var(--ink-soft)}
.neon .more a{color:var(--c)}

/* shape pages */
.neon .shape-hero{box-shadow:0 0 0 1px color-mix(in srgb,var(--c) 55%,transparent),0 0 34px color-mix(in srgb,var(--c) 18%,transparent),var(--glass-shadow);border-color:transparent}
.neon .shape-hero h1{text-shadow:0 0 var(--text-glow-far) color-mix(in srgb,var(--c) var(--text-glow-far-a),transparent)}
.neon .shape-hero .eyebrow{background:var(--c);box-shadow:0 0 18px color-mix(in srgb,var(--c) 45%,transparent)}
.neon .rule{background:color-mix(in srgb,var(--c) 9%,transparent);border:1px solid color-mix(in srgb,var(--c) 35%,transparent);color:var(--ink)}
.neon .others a{background:var(--glass);border-color:color-mix(in srgb,var(--c) 45%,transparent);color:var(--c)}
.neon .others a:hover{box-shadow:0 0 16px color-mix(in srgb,var(--c) 40%,transparent);color:var(--c)}
.neon .shape-tile{color:var(--ink)}
.neon .shape-tile b{font-family:var(--display);font-weight:800;color:var(--c);letter-spacing:-.02em}
.neon .shape-tile small{color:var(--ink-soft)}
.neon .shape-tile:hover{border-color:var(--c);box-shadow:0 0 0 1px var(--c),0 0 26px color-mix(in srgb,var(--c) 30%,transparent),var(--glass-shadow)}

/* buttons */
.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)}

/* tables, faq, footer */
.neon th,.neon td{border-top-color:var(--line)}
.neon thead th{background:var(--surface-2);color:var(--ink)}
.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 and form so the result starts on screen */
@media (max-width:520px){
  .neon .hero{padding:16px 0 14px}
  .neon .hero .eyebrow{margin-bottom:8px}
  .neon h1{font-size:42px;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 label{font-size:15px;margin-bottom:4px;white-space:nowrap}
  .neon .inp input{font-size:18px;padding:10px 30px 10px 11px}
  .neon .inp input::placeholder{font-size:13px}
  .neon .inp .unit{right:9px;font-size:13px}
  .neon .field[data-field=height]:has(.imperial-only:not([hidden])){grid-column:1/-1}
  .neon .imperial-only .inp input{padding-right:22px}
  .neon .hint{margin-top:10px;font-size:14px}
  .neon .tool{gap:14px}
  .neon .shape-card{padding:16px}
}
@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}}
/* small coloured text (links) gets a lighter tint of the shape neon so it stays >= 4.5:1 on glass */
.neon .shape-link a,.neon .more a,.neon .others a,.neon .others a:hover{color:color-mix(in srgb,var(--c) 75%,#fff)}