/* Home page — enhancements layered on top of styles.css.
   Owns: "What you'll learn" strip, station progress indicator,
   and richer journey-card altitude labelling + visited state. */

/* ---- What you'll learn strip ---- */
.learn-strip{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:18px;
}
.learn-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:22px; padding:8px 14px 8px 11px;
  font-size:.86rem; color:var(--ink-soft); line-height:1.2;
}
.learn-chip .dot{
  flex:0 0 auto; width:9px; height:9px; border-radius:50%;
  background:var(--amber); box-shadow:0 0 0 3px var(--amber-glow);
}
.learn-chip b{ color:var(--ink); font-weight:600; }

/* ---- Progress indicator ---- */
.progress-card{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  background:var(--surface-2); border:1px solid var(--line);
  border-radius:14px; padding:16px 18px; margin-top:8px;
}
.progress-copy{ min-width:0; flex:1 1 220px; }
.progress-copy .plabel{
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.12em; font-size:.62rem; color:var(--ink-faint);
}
.progress-copy .pcount{
  font-family:var(--font-display); font-size:1.05rem; color:var(--ink);
  margin-top:2px;
}
.progress-copy .pcount b{ color:var(--amber); }
.progress-track{
  flex:1 1 240px; height:10px; border-radius:99px;
  background:var(--bg-2); border:1px solid var(--line);
  overflow:hidden; position:relative;
}
.progress-fill{
  height:100%; width:0;
  background:linear-gradient(90deg, var(--amber), var(--amber-br));
  border-radius:99px; transition:width .4s ease;
}
.progress-reset{
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.1em; font-size:.6rem; color:var(--ink-soft);
  background:transparent; border:1px solid var(--line-2);
  border-radius:20px; padding:6px 12px; cursor:pointer;
}
.progress-reset:hover{ color:var(--ink); border-color:var(--amber); }
.progress-reset[hidden]{ display:none; }

/* ---- Richer journey card bits ---- */
.jcard-alt{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px; font-family:var(--font-label);
  text-transform:uppercase; letter-spacing:.1em;
  font-size:.58rem; color:var(--sky-deep);
  background:color-mix(in srgb, var(--sky) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--sky) 40%, transparent);
  border-radius:20px; padding:3px 9px;
}
.jcard-alt::before{ content:"◆"; font-size:.55rem; opacity:.7; }

.jcard.visited{ border-color:color-mix(in srgb, var(--moss) 55%, var(--line)); }
.jcard-seen{
  position:absolute; right:16px; bottom:14px;
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--font-label); text-transform:uppercase;
  letter-spacing:.1em; font-size:.55rem; color:var(--moss);
}
.jcard-seen::before{ content:"✓"; font-size:.7rem; }

@media (max-width:520px){
  .progress-card{ gap:12px; }
  .progress-track{ order:3; flex-basis:100%; }
}