/* =================================================================
   Habla — components
   ================================================================= */

/* ============ Home masthead ============ */
.home-masthead {
  padding: clamp(32px, 6vh, 64px) 0 clamp(40px, 6vh, 72px);
  max-width: 32ch;
}
.kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--amber);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(24px, 3vh, 40px);
}
.home-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35, 'SOFT' 30;
  font-size: clamp(76px, 14vw, 200px);
  line-height: 0.92;
  letter-spacing: -0.05em;
  color: var(--carbon);
  margin: 0;
}
.home-title .bang-open  { color: var(--cielo); }
.home-title .bang-close { color: var(--rojo); }
.home-title .accent     { color: var(--rojo); }
.home-lede {
  margin: clamp(20px, 3vh, 36px) 0 0;
  max-width: 44ch;
  font-size: clamp(17px, 1.1vw + 8px, 22px);
  color: var(--carbon-2);
  line-height: 1.5;
}

/* ============ Rotation hint ============ */
.rotation {
  margin: clamp(16px, 3vh, 32px) 0 clamp(36px, 5vh, 56px);
  padding: clamp(18px, 2vh, 28px) clamp(20px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius-md);
  background: var(--teal-soft);
  max-width: 60ch;
}
.rotation-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--teal);
  margin-bottom: 8px;
}
.rotation-text {
  margin: 0;
  font-size: clamp(15px, 0.8vw + 10px, 18px);
  color: var(--carbon);
}

/* ============ Tiles ============ */
.tiles {
  list-style: none;
  padding: 0;
  margin: 0 0 clamp(48px, 7vh, 80px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: clamp(14px, 2vw, 24px);
}
.tile { margin: 0; }
.tile-link {
  display: block;
  height: 100%;
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse at 10% 10%, rgba(232,136,43,0.06), transparent 55%),
    var(--navy-2);
  transition: border-color 240ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), background 240ms ease;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}
.tile-link:hover, .tile-link:focus-visible {
  border-color: var(--amber);
  transform: translateY(-2px);
  outline: none;
}
.tile[data-pillar="watch"] .tile-link { background: radial-gradient(ellipse at 10% 10%, rgba(40,168,200,0.08), transparent 55%), var(--navy-2); }
.tile[data-pillar="watch"] .tile-link:hover { border-color: var(--teal); }
.tile[data-pillar="review"] .tile-link { background: radial-gradient(ellipse at 10% 10%, rgba(232,136,43,0.04), rgba(40,168,200,0.04) 55%, transparent 75%), var(--navy-2); }
.tile-slug {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: clamp(16px, 2vh, 26px);
}
.tile[data-pillar="watch"] .tile-slug, .tile[data-pillar="talk"] .tile-slug { color: var(--teal); }
.tile-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(26px, 2.4vw + 10px, 40px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
  color: var(--paper);
}
.tile-body {
  margin: 0 0 clamp(18px, 3vh, 28px);
  font-size: clamp(15px, 0.6vw + 10px, 17px);
  color: var(--paper-2);
  line-height: 1.55;
  max-width: 42ch;
}
.tile-cta {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--paper);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ============ Progress ============ */
.progress {
  padding: clamp(22px, 3vh, 32px) 0;
  border-top: 1px solid var(--rule);
}
.progress-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-bottom: clamp(16px, 2vh, 24px);
}
.progress-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: clamp(14px, 2vw, 28px);
}
.progress-cell {
  border-left: 2px solid var(--rule);
  padding-left: clamp(14px, 2vw, 22px);
}
.progress-cell dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-bottom: 4px;
}
.progress-cell dd { margin: 0; }
.metric {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35;
  font-size: clamp(32px, 3vw + 14px, 56px);
  letter-spacing: -0.03em;
  color: var(--carbon);
  line-height: 1;
}
.metric-unit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-left: 6px;
}

/* ============ View head ============ */
.view-head {
  padding: clamp(16px, 3vh, 32px) 0 clamp(24px, 4vh, 40px);
  border-bottom: 1px solid var(--rule);
  margin-bottom: clamp(28px, 4vh, 48px);
}
.back {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--carbon-2);
  margin-bottom: clamp(20px, 3vh, 30px);
}
.back:hover { color: var(--rojo); }
.view-slug {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}
.view-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(32px, 4vw + 10px, 56px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}
.view-lede {
  margin: 0;
  max-width: 52ch;
  font-size: clamp(16px, 0.6vw + 10px, 19px);
  color: var(--carbon-2);
  line-height: 1.55;
}

/* ============ LISTEN player ============ */
.drill-summary, .drill-error {
  max-width: 56ch;
  padding: clamp(24px, 3vh, 36px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--navy-2);
}
.drill-summary h3, .drill-error h3 {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 700, 'WONK' 35;
  font-size: clamp(22px, 2vw + 6px, 30px);
  letter-spacing: -0.02em;
  color: var(--nieve);
}
.drill-summary p, .drill-error p { margin: 0 0 20px; color: var(--nieve-2); }

.cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
  background: var(--rojo);
  color: var(--nieve);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  transition: background 200ms ease, transform 160ms ease;
}
.cta:hover, .cta:focus-visible {
  background: var(--rojo-hot);
  transform: translateY(-1px);
  outline: none;
}

.player {
  padding: clamp(28px, 4vh, 56px);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--navy-2);
}
.player-line {
  text-align: center;
  padding: clamp(24px, 4vh, 48px) 0;
  min-height: clamp(200px, 32vh, 320px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.line-es {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(26px, 3vw + 12px, 48px);
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--paper);
  margin: 0 0 18px;
}
.line-en {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(16px, 0.6vw + 10px, 19px);
  color: var(--paper-3);
  margin: 0;
}

.player-progress {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  color: var(--paper-3);
  display: flex;
  align-items: center;
  gap: 12px;
  padding: clamp(16px, 2vh, 24px) 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.player-progress .slash { color: var(--paper-4); }
.player-progress .bar {
  flex: 1;
  height: 3px;
  background: var(--paper-4);
  border-radius: 2px;
  overflow: hidden;
}
.bar-fill {
  display: block;
  height: 100%;
  background: var(--amber);
  width: 0%;
  transition: width 260ms ease;
}

.player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: clamp(18px, 2vh, 26px);
  flex-wrap: wrap;
}
.player-controls .spacer { flex: 1; }
.player-controls button {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--paper-2);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
}
.player-controls button:hover { color: var(--paper); border-color: var(--paper-2); }
.ctl-play {
  min-width: 90px;
  background: var(--amber);
  color: var(--navy) !important;
  border-color: var(--amber) !important;
  font-weight: 600;
}
.ctl-play:hover {
  background: var(--amber-hot) !important;
  border-color: var(--amber-hot) !important;
  color: var(--navy) !important;
}
.speed {
  display: flex;
  gap: 4px;
}
.speed button.is-active {
  background: var(--paper);
  color: var(--navy) !important;
  border-color: var(--paper) !important;
}

/* ============ Entrance animations ============ */

/* Home masthead entrance */
.home-masthead {
  animation: fadeInUp 0.7s cubic-bezier(0.2, 0.6, 0.2, 1) 0.1s both;
}

/* Tile stagger entrance */
.tile {
  opacity: 0;
  transform: translateY(20px) scale(0.98);
  animation: fadeInScale 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.tile:nth-child(1) { animation-delay: 0.15s; }
.tile:nth-child(2) { animation-delay: 0.28s; }
.tile:nth-child(3) { animation-delay: 0.41s; }
.tile:nth-child(4) { animation-delay: 0.54s; }

/* ============ Enhanced tile hover ============ */
.tile-link {
  transition:
    border-color 280ms cubic-bezier(0.2, 0.6, 0.2, 1),
    transform 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 360ms cubic-bezier(0.2, 0.8, 0.2, 1),
    background 280ms ease;
}
.tile-link:hover, .tile-link:focus-visible {
  transform: translateY(-4px) scale(1.01);
  box-shadow: 0 18px 40px -14px rgba(26, 22, 20, 0.35);
}

/* ============ Layout differentiation ============ */
/* First tile breaks the grid rhythm on wide screens */
@media (min-width: 640px) {
  .tiles {
    grid-template-columns: 1fr 1fr;
  }
  .tile:first-child {
    grid-column: 1 / -1;
  }
  .tile:first-child .tile-link {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto auto;
    gap: 0 clamp(24px, 4vw, 40px);
    align-content: start;
  }
  .tile:first-child .tile-slug {
    grid-column: 1 / -1;
  }
  .tile:first-child .tile-title {
    font-size: clamp(32px, 3vw + 14px, 52px);
  }
  .tile:first-child .tile-body {
    max-width: 48ch;
  }
}

/* ============ CTA hover enhancement ============ */
.cta {
  transition:
    background 200ms ease,
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.cta:hover, .cta:focus-visible {
  box-shadow: 0 10px 24px -8px rgba(200, 16, 46, 0.4);
}

/* ============ Progress section entrance ============ */
.progress {
  animation: fadeInUp 0.6s cubic-bezier(0.2, 0.6, 0.2, 1) 0.5s both;
}

/* Metric number scale entrance */
.metric {
  animation: fadeInScale 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) 0.6s both;
}

/* Rotation hint entrance */
.rotation {
  animation: fadeInUp 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) 0.3s both;
}

/* ============ View head typography refinement ============ */
.view-title {
  font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35, 'SOFT' 30;
  transition: font-variation-settings 0.6s ease;
}

/* Player controls hover lift */
.player-controls button {
  transition:
    border-color 200ms ease,
    color 200ms ease,
    background 200ms ease,
    transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.player-controls button:hover {
  transform: translateY(-1px);
}

/* Placeholder view */
.placeholder .view-title { color: var(--carbon-2); max-width: 22ch; }

/* ============ Onboarding overlay ============ */
.onboard {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--cielo-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gutter);
  animation: fadeInUp 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.onboard-inner {
  width: 100%;
  max-width: 480px;
  position: relative;
}
.onboard-skip {
  position: absolute;
  top: -48px;
  right: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--nieve-3);
  padding: 8px 0;
  transition: color 200ms ease;
}
.onboard-skip:hover { color: var(--nieve); }
.onboard-slides {
  position: relative;
  min-height: 240px;
}
.onboard-slide {
  display: none;
  animation: fadeInUp 0.35s cubic-bezier(0.2, 0.6, 0.2, 1) both;
}
.onboard-slide.is-active { display: block; }
.onboard-slug {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--rojo);
  margin-bottom: 20px;
}
.onboard-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-variation-settings: 'opsz' 144, 'wght' 700, 'WONK' 35, 'SOFT' 30;
  font-size: clamp(30px, 4vw + 8px, 44px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin: 0 0 18px;
  color: var(--nieve);
}
.onboard-desc {
  margin: 0;
  font-size: clamp(15px, 0.6vw + 10px, 18px);
  color: var(--nieve-2);
  line-height: 1.6;
  max-width: 40ch;
}
.onboard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 44px;
  gap: 20px;
}
.onboard-dots { display: flex; gap: 10px; }
.onboard-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--nieve-4);
  transition: background 200ms ease, transform 200ms ease;
}
.onboard-dot.is-active {
  background: var(--nieve);
  transform: scale(1.2);
}
.onboard-dot:hover { background: var(--nieve-3); }

/* ============ Module intro card ============ */
.module-intro {
  margin: 0 0 clamp(24px, 3vh, 36px);
  padding: clamp(14px, 2vh, 20px) clamp(16px, 3vw, 24px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cielo);
  border-radius: var(--radius-md);
  background: var(--cielo-soft);
  max-width: 56ch;
  animation: fadeInUp 0.4s cubic-bezier(0.2, 0.6, 0.2, 1) 0.15s both;
}
.module-intro-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--cielo);
  margin-bottom: 6px;
}
.module-intro p {
  margin: 0;
  font-size: clamp(14px, 0.5vw + 9px, 16px);
  color: var(--carbon-2);
  line-height: 1.55;
}

/* ============ Nav guide replay button ============ */
.nav-guide {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--carbon-4);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--carbon-3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease;
  flex-shrink: 0;
}
.nav-guide:hover {
  border-color: var(--cielo);
  color: var(--cielo);
  background: var(--cielo-soft);
}

/* ============ Level selector ============ */
.level-selector {
  margin: 0 0 clamp(8px, 1.5vh, 16px);
  animation: fadeInUp 0.5s cubic-bezier(0.2, 0.6, 0.2, 1) 0.2s both;
}
.level-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--carbon-3);
  margin-bottom: 10px;
}
.level-pills {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.level-pill {
  padding: 10px 20px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--carbon-2);
  transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.level-pill:hover {
  border-color: var(--cielo);
  color: var(--cielo);
  transform: translateY(-1px);
}
.level-pill.is-active {
  background: var(--cielo);
  border-color: var(--cielo);
  color: var(--nieve);
}
.level-test-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.82rem;
  color: var(--cielo);
  transition: color 200ms ease;
}
.level-test-link:hover { color: var(--rojo); }

/* ============ Placement test ============ */
.placement-test {
  max-width: 56ch;
  margin-bottom: clamp(32px, 4vh, 48px);
}
.placement-test h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 700, 'WONK' 35;
  font-size: clamp(22px, 2vw + 6px, 30px);
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
.placement-test > p {
  margin: 0 0 20px;
  color: var(--carbon-2);
}
.placement-question {
  font-size: clamp(16px, 0.8vw + 10px, 19px);
  font-weight: 600;
  margin: 20px 0 16px;
  color: var(--carbon);
}
.placement-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.placement-opt {
  text-align: left;
  padding: 14px 20px;
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  font-size: clamp(14px, 0.6vw + 9px, 16px);
  color: var(--carbon);
  transition: border-color 200ms ease, background 200ms ease;
}
.placement-opt:hover:not(:disabled) {
  border-color: var(--cielo);
  background: var(--cielo-soft);
}
.placement-opt:disabled { cursor: default; opacity: 0.7; }
.placement-opt.is-correct {
  border-color: #2d8a4e;
  background: rgba(45, 138, 78, 0.12);
  opacity: 1;
}
.placement-opt.is-wrong {
  border-color: var(--rojo);
  background: var(--rojo-soft);
  opacity: 1;
}
.placement-result {
  margin-top: 24px;
  padding: clamp(20px, 3vh, 32px);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--cielo);
  border-radius: var(--radius-md);
  background: var(--cielo-soft);
}
.placement-result h3 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 700;
  font-size: clamp(20px, 1.5vw + 8px, 26px);
}
.placement-result p { margin: 0 0 16px; color: var(--carbon-2); }

/* ============ Settings ============ */
.settings-level {
  max-width: 56ch;
}
.settings-level h3 {
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 96, 'wght' 700, 'WONK' 35;
  font-size: clamp(20px, 1.5vw + 6px, 26px);
  margin: 0 0 12px;
}