/* ============================================================
   AirFloor | Building-height control (unit toggle + slider)
   All classes prefixed .hc-  |  light-first, theme-aware via the app's existing
   CSS custom properties (--violet, --grad, --glass, --ink*, --bg*, --hair, etc.)
   ============================================================ */

/* Scoped border-box: guarantees width:100% + padding never overflows the card
   (fixes the .hc-slider horizontal-padding overflow) and centers the fixed-size
   thumb exactly. Scoped to the control so it never touches the rest of the app. */
.hc,.hc *{box-sizing:border-box;}

.hc{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:100%;margin-top:2px;}

/* ---------- segmented unit toggle ---------- */
.hc-seg{position:relative;align-self:center;display:inline-flex;gap:2px;padding:5px;border-radius:100px;max-width:100%;
  background:linear-gradient(135deg,rgba(167,139,250,.14),rgba(124,92,224,.07));
  border:1px solid var(--glass-brd);
  -webkit-backdrop-filter:blur(16px) saturate(160%);backdrop-filter:blur(16px) saturate(160%);
  box-shadow:0 0 0 1px rgba(124,92,224,.05),0 8px 22px -12px rgba(124,92,224,.28),inset 0 1px 0 rgba(255,255,255,.6);
  overflow:hidden;}
.hc-seg-glider{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:100px;
  background:var(--grad);will-change:transform,width;
  box-shadow:0 5px 16px -3px rgba(124,92,224,.75),inset 0 1px 0 rgba(255,255,255,.45);}
.hc-seg-btn{position:relative;z-index:1;border:0;cursor:pointer;background:transparent;font-family:inherit;
  font-weight:700;font-size:13.5px;letter-spacing:.01em;color:var(--ink-soft);white-space:nowrap;
  padding:10px 20px;border-radius:100px;min-height:40px;transition:color .22s ease,transform .22s ease;}
.hc-seg-btn:hover{transform:translateY(-1px);}
.hc-seg-btn[aria-checked="true"]{color:#fff;}
.hc-seg-btn:focus-visible{outline:2px solid var(--violet);outline-offset:3px;}

/* ---------- numeric readout ---------- */
.hc-readout{display:flex;align-items:baseline;justify-content:center;gap:11px;padding:2px 0;max-width:100%;}
/* fixed width (fits up to 4 digits, e.g. 1308 ft) so the number changing never
   reflows the layout and never disturbs the glider/slider geometry */
.hc-field{width:138px;max-width:100%;font-family:inherit;font-weight:800;font-size:48px;line-height:1;
  letter-spacing:-.03em;color:var(--ink);background:var(--glass-2);border:2px solid var(--glass-brd);
  border-radius:18px;padding:10px 8px;text-align:center;outline:none;caret-color:var(--violet);
  transition:border-color .2s ease,box-shadow .2s ease;-moz-appearance:textfield;}
.hc-field::-webkit-outer-spin-button,.hc-field::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.hc-field::placeholder{color:var(--ink-faint);opacity:.5;font-size:20px;font-weight:700;letter-spacing:0;}
.hc-field:focus{border-color:var(--violet);box-shadow:0 0 0 5px rgba(124,92,224,.20);}
.hc-suffix{font-size:19px;font-weight:700;color:var(--ink-soft);}

/* ---------- approx helper chip (Meters/Feet only) ---------- */
.hc-approx{align-self:center;font-size:13px;font-weight:700;letter-spacing:.01em;color:var(--violet-deep);
  background:var(--grad-soft);border:1px solid var(--hair);border-radius:100px;padding:5px 13px;
  max-width:100%;margin-top:-6px;}
.hc-approx[hidden]{display:none;}

/* ---------- slider ---------- */
.hc-slider{position:relative;width:100%;max-width:460px;margin:2px auto 0;padding:16px 13px 4px;
  touch-action:pan-y;cursor:pointer;-webkit-user-select:none;user-select:none;}
.hc-rail{position:relative;height:12px;border-radius:100px;
  background:linear-gradient(180deg,rgba(120,100,190,.14),rgba(120,100,190,.10));
  box-shadow:inset 0 1px 2px rgba(60,45,110,.12);}
.hc-fill{position:absolute;left:0;top:0;height:100%;width:0%;border-radius:100px;
  background:var(--grad);box-shadow:0 3px 12px -3px rgba(124,92,224,.6);will-change:width;}
.hc-thumb{position:absolute;top:50%;left:0;width:26px;height:26px;margin-top:-13px;margin-left:-13px;
  border-radius:50%;background:var(--bg-1);border:2px solid rgba(124,92,224,.55);
  box-shadow:0 4px 14px -3px rgba(124,92,224,.55),0 1px 3px rgba(40,30,90,.18);
  display:flex;align-items:center;justify-content:center;cursor:grab;touch-action:pan-y;
  will-change:transform;transition:box-shadow .2s ease;}
.hc-thumb::before{content:"";position:absolute;inset:-13px;border-radius:50%;} /* ~52px touch target */
.hc-thumb-dot{width:11px;height:11px;border-radius:50%;background:var(--grad);
  transition:transform .18s cubic-bezier(.5,1.3,.4,1);}
.hc-thumb:focus{outline:none;}
.hc-thumb:focus-visible{box-shadow:0 0 0 5px rgba(124,92,224,.28),0 4px 14px -3px rgba(124,92,224,.55);}
.hc-slider.hc-drag .hc-thumb{cursor:grabbing;box-shadow:0 6px 20px -3px rgba(124,92,224,.7),0 1px 3px rgba(40,30,90,.2);}
.hc-slider.hc-drag .hc-thumb-dot{transform:scale(1.35);}

/* unset (no value chosen yet): muted thumb + gentle invite pulse */
.hc-slider.hc-unset .hc-thumb{border-color:rgba(124,92,224,.4);}
.hc-slider.hc-unset .hc-thumb-dot{background:var(--ink-faint);opacity:.6;}
@media (prefers-reduced-motion:no-preference){
  .hc-slider.hc-unset .hc-thumb{animation:hcInvite 2.4s ease-in-out infinite;}
}
@keyframes hcInvite{
  0%,100%{box-shadow:0 0 0 0 rgba(124,92,224,.0),0 4px 14px -3px rgba(124,92,224,.4);}
  55%{box-shadow:0 0 0 8px rgba(124,92,224,.16),0 4px 14px -3px rgba(124,92,224,.5);}
}

/* scale = functional min | max bounds in the active unit */
.hc-scale{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-top:9px;
  font-size:12.5px;font-weight:600;color:var(--ink-faint);}

/* ---------- responsive ---------- */
@media (max-width:640px){
  .hc-field{font-size:42px;width:120px;}
  .hc-suffix{font-size:18px;}
  .hc-seg-btn{padding:10px 16px;}
}
/* extra-narrow safety so a ~330px card never overflows even off the mobile query */
@media (max-width:360px){
  .hc-seg-btn{padding:9px 12px;font-size:13px;}
  .hc-slider{padding-left:8px;padding-right:8px;}
}

/* ---------- dark theme accents (app vars already flip; a couple of surfaces tuned) ---------- */
:root[data-theme="dark"] .hc-seg{
  background:linear-gradient(135deg,rgba(40,20,70,.55),rgba(10,7,20,.6));
  border-color:rgba(180,150,255,.26);
  box-shadow:0 0 0 1px rgba(168,140,255,.1),0 10px 30px -10px rgba(139,92,246,.55),inset 0 1px 0 rgba(255,255,255,.12);}
:root[data-theme="dark"] .hc-rail{background:linear-gradient(180deg,rgba(180,150,255,.14),rgba(180,150,255,.08));
  box-shadow:inset 0 1px 2px rgba(0,0,0,.35);}
:root[data-theme="dark"] .hc-thumb{background:var(--bg-2);}