/* =============================================================================
   Vegas Heat Check — Design System
   =============================================================================

   Direction: "The Marquee"
   Deep midnight-blue night sky, amber gold marquee title, teal/coral for
   outcomes. Bebas Neue carries the casino sign energy; DM Sans keeps body
   copy legible at any size. Mobile-first throughout.

   Token system
   ─────────────
   --bg          Deep midnight blue — the Vegas sky at 2am
   --bg-card     Slightly lighter — card/form surface
   --bg-surface  Toggle row backgrounds
   --border      Subtle structural lines
   --text-1      Primary text — warm off-white
   --text-2      Secondary text — muted blue-gray
   --amber       #F5A623 — the gold of every marquee on the Strip
   --teal        #00C9A7 — safe / cool / AC
   --coral       #FF5757 — danger / extreme heat
   ============================================================================= */


/* -----------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------------- */
:root {
  --bg:         #091520;
  --bg-card:    #0E1F30;
  --bg-surface: #132538;
  --border:     #1D3349;
  --border-mid: #2A4A66;

  --text-1: #EDE8DF;
  --text-2: #6B8099;

  --amber:      #F5A623;
  --amber-mid:  rgba(245, 166, 35, 0.20);
  --amber-dim:  rgba(245, 166, 35, 0.08);

  --teal:       #00C9A7;
  --teal-mid:   rgba(0, 201, 167, 0.20);
  --teal-dim:   rgba(0, 201, 167, 0.07);

  --coral:      #FF5757;
  --coral-mid:  rgba(255, 87, 87, 0.20);
  --coral-dim:  rgba(255, 87, 87, 0.07);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Typography scale */
  --font-display: 'Bebas Neue', 'Impact', sans-serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
}


/* -----------------------------------------------------------------------------
   2. RESET & BASE
   ----------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background-color: var(--bg);
  color: var(--text-1);
  min-height: 100dvh;
  /* Subtle star-field texture: tiny radial dots scattered across the background */
  background-image:
    radial-gradient(1px 1px at 15%  20%, rgba(255,255,255,0.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 75%  10%, rgba(255,255,255,0.06) 0%, transparent 100%),
    radial-gradient(1px 1px at 40%  70%, rgba(255,255,255,0.05) 0%, transparent 100%),
    radial-gradient(1px 1px at 88%  55%, rgba(255,255,255,0.07) 0%, transparent 100%),
    radial-gradient(1px 1px at 25%  85%, rgba(255,255,255,0.04) 0%, transparent 100%),
    radial-gradient(1px 1px at 60%  35%, rgba(255,255,255,0.06) 0%, transparent 100%);
  line-height: 1.5;
}

input, button {
  font-family: inherit;
}


/* -----------------------------------------------------------------------------
   3. APP LAYOUT
   Mobile: single column, full-bleed.
   Desktop: centred card with max-width.
   ----------------------------------------------------------------------------- */
.app {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 40px 20px 60px;
}

@media (min-width: 600px) {
  .app {
    padding: 60px 40px 80px;
  }
}


/* -----------------------------------------------------------------------------
   4. HEADER
   ----------------------------------------------------------------------------- */
.app-header {
  text-align: center;
  margin-bottom: 40px;
}

.header-eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 12px;
  opacity: 0.85;
}

/*
  The signature typographic moment: Bebas Neue at ~80px with an amber
  neon-glow text-shadow. This is the one element the page is remembered by.
  clamp() keeps it readable from 320px phones up to desktop.
*/
.header-title {
  font-family: var(--font-display);
  font-size: clamp(64px, 18vw, 96px);
  line-height: 0.92;
  letter-spacing: 0.03em;
  color: var(--amber);
  text-shadow:
    0 0 20px rgba(245, 166, 35, 0.55),
    0 0 60px rgba(245, 166, 35, 0.20);
  margin-bottom: 16px;
}

.header-sub {
  font-size: 0.875rem;
  color: var(--text-2);
  max-width: 30ch;
  margin: 0 auto;
  line-height: 1.6;
}


/* -----------------------------------------------------------------------------
   5. FORM LAYOUT
   ----------------------------------------------------------------------------- */
.app-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Each labelled section of the form */
.field-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.field-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-2);
}


/* -----------------------------------------------------------------------------
   6. TEMPERATURE INPUT
   ----------------------------------------------------------------------------- */
.temp-input-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.temp-input-wrap input[type="number"] {
  width: 100%;
  background: var(--bg-surface);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: clamp(36px, 10vw, 52px);
  letter-spacing: 0.04em;
  padding: 16px 72px 16px 20px;  /* right pad leaves room for °F label */
  appearance: textfield;
  -moz-appearance: textfield;
  transition: border-color 0.2s, box-shadow 0.2s;
  line-height: 1;
}

/* Remove browser spinner arrows */
.temp-input-wrap input[type="number"]::-webkit-inner-spin-button,
.temp-input-wrap input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

.temp-input-wrap input[type="number"]:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-dim);
}

/* The °F label floated inside the input on the right */
.temp-unit {
  position: absolute;
  right: 18px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--amber);
  pointer-events: none;
  letter-spacing: 0.05em;
}


/* -----------------------------------------------------------------------------
   7. HEAT BAR
   The signature live-feedback element. Fills left-to-right as the user types.
   The background is a fixed-size gradient (teal → amber → coral) so expanding
   the fill width reveals more of the gradient rather than compressing it.
   ----------------------------------------------------------------------------- */
.heat-bar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.heat-track {
  width: 100%;
  height: 6px;
  background: var(--bg-surface);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.heat-fill {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  /*
    Fixed background-size means the gradient stays full-spectrum
    regardless of the element's current width. As width grows from 0%
    to 100%, the fill sweeps across the gradient left-to-right.
  */
  background: linear-gradient(to right,
    #00C9A7 0%,    /* teal  — cool/safe */
    #F5A623 55%,   /* amber — hot */
    #FF5757 85%,   /* coral — extreme */
    #FF1A1A 100%   /* deep red — beyond extreme */
  );
  background-size: 520px 100%;
  transition: width 0.45s cubic-bezier(0.34, 1.3, 0.64, 1);
}

/* Tier labels below the bar */
.heat-tiers {
  display: flex;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  padding: 0 2px;
}

/* Live tier badge text — appears / updates as user types */
.temp-badge {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  min-height: 1.2em;
  transition: color 0.3s;
}

.temp-badge.badge-cool   { color: var(--teal); }
.temp-badge.badge-warm   { color: var(--amber); }
.temp-badge.badge-hot    { color: var(--coral); }


/* -----------------------------------------------------------------------------
   8. TOGGLE ROWS
   Each row is a <label> wrapping an icon, text block, and the switch.
   Making the whole row a <label> gives a large accessible tap target.
   ----------------------------------------------------------------------------- */
.toggles-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  min-height: 64px;        /* 64px minimum touch target */
  transition: border-color 0.2s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
}

.toggle-row:hover {
  border-color: var(--border-mid);
}

/* Highlight the row when its checkbox is checked */
.toggle-row:has(input:checked) {
  border-color: var(--amber);
  background: var(--amber-dim);
}

.toggle-info {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  flex: 1;
  min-width: 0;
}

.toggle-icon {
  font-size: 1.25rem;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;  /* aligns icon with first line of label text */
}

.toggle-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toggle-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--text-1);
  line-height: 1.3;
}

.toggle-desc {
  font-size: 0.72rem;
  color: var(--text-2);
  line-height: 1.3;
}


/* -----------------------------------------------------------------------------
   9. TOGGLE SWITCH — iOS-style pill, amber accent
   ----------------------------------------------------------------------------- */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 26px;
  flex-shrink: 0;
}

/* Hide native checkbox — preserved for keyboard and screen reader access */
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

/* The pill track */
.slider {
  position: absolute;
  inset: 0;
  background: var(--border-mid);
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.22s ease;
}

/* The circular thumb */
.slider::before {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 3px;
  top: 3px;
  background: var(--text-1);
  border-radius: 50%;
  transition: transform 0.22s ease;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

/* Checked: amber track */
.toggle-switch input:checked + .slider {
  background: var(--amber);
}

/* Checked: thumb slides right */
.toggle-switch input:checked + .slider::before {
  transform: translateX(22px);
}

/* Keyboard focus ring */
.toggle-switch input:focus-visible + .slider {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   10. SUBMIT BUTTON
   Bebas Neue + amber + full-width — feels like pressing a casino chip onto the table.
   ----------------------------------------------------------------------------- */
.submit-btn {
  width: 100%;
  padding: 18px 24px;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 0.18em;
  color: var(--bg);
  background: var(--amber);
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  -webkit-tap-highlight-color: transparent;
  /* Subtle ambient glow on the button at rest */
  box-shadow: 0 0 20px rgba(245, 166, 35, 0.15);
}

.submit-btn:hover {
  background: #FFB733;
  box-shadow: 0 0 30px rgba(245, 166, 35, 0.30);
}

.submit-btn:active {
  transform: scale(0.985);
  box-shadow: 0 0 10px rgba(245, 166, 35, 0.10);
}

.submit-btn:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
}


/* -----------------------------------------------------------------------------
   11. RESULT PANEL
   The neon-glow pulse is the signature animation — green when safe,
   red when dangerous — evoking a flashing casino sign.
   ----------------------------------------------------------------------------- */
.result-panel {
  border-radius: var(--radius-lg);
  padding: 28px 24px;
  text-align: center;
  border: 1px solid transparent;
  transition: opacity 0.25s;
}

.result-panel.hidden {
  display: none;
}

/* Slide-in entrance */
@keyframes slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Neon pulse — safe (teal) */
@keyframes neon-safe {
  0%, 100% {
    box-shadow: 0 0 8px var(--teal), 0 0 20px var(--teal-mid);
  }
  50% {
    box-shadow: 0 0 16px var(--teal), 0 0 40px var(--teal-mid), 0 0 80px var(--teal-dim);
  }
}

/* Neon pulse — danger (coral) */
@keyframes neon-danger {
  0%, 100% {
    box-shadow: 0 0 8px var(--coral), 0 0 20px var(--coral-mid);
  }
  50% {
    box-shadow: 0 0 16px var(--coral), 0 0 40px var(--coral-mid), 0 0 80px var(--coral-dim);
  }
}

/* SAFE state */
.result-panel.result-safe {
  background: var(--teal-dim);
  border-color: var(--teal);
  animation: slide-in 0.3s ease forwards, neon-safe 2.8s ease-in-out 0.3s infinite;
}

/* DANGER state */
.result-panel.result-danger {
  background: var(--coral-dim);
  border-color: var(--coral);
  animation: slide-in 0.3s ease forwards, neon-danger 2.8s ease-in-out 0.3s infinite;
}

/* LOADING state (no glow, just neutral) */
.result-panel.result-loading {
  background: var(--bg-surface);
  border-color: var(--border-mid);
  animation: slide-in 0.2s ease forwards;
}

.result-icon {
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 10px;
}

.result-title {
  font-family: var(--font-display);
  font-size: clamp(28px, 8vw, 40px);
  letter-spacing: 0.08em;
  margin-bottom: 8px;
}

.result-panel.result-safe   .result-title { color: var(--teal); }
.result-panel.result-danger .result-title { color: var(--coral); }
.result-panel.result-loading .result-title { color: var(--text-2); }

.result-message {
  font-size: 0.875rem;
  color: var(--text-2);
  line-height: 1.6;
  max-width: 34ch;
  margin: 0 auto;
}


/* -----------------------------------------------------------------------------
   12. FOOTER
   ----------------------------------------------------------------------------- */
.app-footer {
  text-align: center;
  margin-top: 40px;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-2);
  opacity: 0.6;
}


/* -----------------------------------------------------------------------------
   13. REDUCED MOTION
   Users who prefer reduced motion get instant transitions, no pulsing glow.
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .heat-fill {
    transition: width 0.1s linear;
  }

  .result-panel.result-safe,
  .result-panel.result-danger {
    animation: slide-in 0.15s ease forwards;
  }

  .submit-btn {
    transition: none;
  }
}