/* Minshan: learning path screen. Every selector is scoped to #screen-path, except
   the Unit guide (.path-guide), whose sheet sits outside the screen. */

#screen-path {
  background: #11181D;
  overflow: hidden;
}

/* Scroll container ------------------------------------------------------- */

#screen-path .path-scroll {
  position: absolute;
  top: 0;
  right: 0;
  bottom: calc(var(--tabbar-h) + var(--safe-b));
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  background: #11181D;
  scrollbar-width: none;
}

#screen-path .path-scroll::-webkit-scrollbar {
  display: none;
}

/* Night sky behind the header and the upper half of the scene. It reaches
   one viewport above the content so an overscroll bounce never shows ground
   color at the top, and fades into the ground color at its lower end so
   wide viewports show no seam beside the scene. JS sets --path-sky-h. */
#screen-path .path-sky {
  position: absolute;
  z-index: 0;
  top: -100vh;
  left: 0;
  right: 0;
  height: calc(100vh + var(--path-sky-h, 420px));
  background: linear-gradient(to bottom,
    var(--bg) 0,
    var(--bg) calc(100% - 300px),
    #2C2B46 calc(100% - 140px),
    #11181D 100%);
  pointer-events: none;
}

/* Header ---------------------------------------------------------------- */

/* The header row (logo, streak, XP) sticks to the top of the scroller so
   the stats stay on screen on short phones. It spans the full width (its
   frosted backdrop must too) and centres its content in the 430 px column. */
#screen-path .path-header {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 10;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: calc(56px + var(--safe-t));
  margin: 0;
  padding-top: calc(var(--safe-t) + 8px);
  padding-left: max(16px, var(--safe-l), calc(50% - 199px));
  padding-right: max(16px, var(--safe-r), calc(50% - 199px));
}

/* Frosted backdrop, shown only while content is scrolled under the header
   (JS toggles .is-stuck). Only its opacity animates. */
#screen-path .path-header::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  border-bottom: 1px solid var(--line);
  background: rgba(21, 22, 43, .84);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  opacity: 0;
  transition: opacity 200ms var(--ease-out);
  pointer-events: none;
}

#screen-path .path-header.is-stuck::before {
  opacity: 1;
}

/* Entrance: the backdrop waits, then fades in with the header row. */
#screen-path .path-header.is-hold::before {
  opacity: 0;
  transition: none;
}

#screen-path .path-header.is-slow::before {
  transition-duration: 480ms;
}

#screen-path .path-start {
  display: flex;
  flex: none;
  align-items: center;
  gap: 2px;
}

/* The way back to the launch page on a phone. The Mac's phone outline has its
   own Back beside the frame. */
#screen-path .path-back {
  flex: none;
  margin-left: -12px;
}

.stage.is-framed #screen-path .path-back {
  display: none;
}

#screen-path .path-logo {
  display: flex;
  flex: none;
  width: 48px;
  height: 48px;
}

#screen-path .path-logo svg {
  display: block;
  width: 48px;
  height: 48px;
}

#screen-path .path-stats {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: -4px;
}

#screen-path .path-stat {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  height: 44px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 22px;
  background: transparent;
  color: var(--text);
  font: 500 16px/1 var(--font-ui);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-appearance: none;
  appearance: none;
}

#screen-path .path-stat__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(255, 255, 255, .06);
  box-sizing: border-box;
  transition: transform 120ms var(--ease-out);
}

#screen-path .path-stat:active .path-stat__pill {
  transform: scale(.96);
}

#screen-path .path-stat__icon {
  display: inline-flex;
  color: var(--text-2);
}

#screen-path .path-stat__icon svg {
  display: block;
}

#screen-path .path-stat__val {
  white-space: nowrap;
}

/* Unit card ------------------------------------------------------------- */

#screen-path .path-unit {
  position: relative;
  z-index: 2;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 398px;
  margin: 0 max(16px, var(--safe-r)) 0 max(16px, var(--safe-l));
  padding: 14px 14px 14px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface-glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* No live blur while the sky moves behind the card: recomputing it every frame
   is what stutters on a phone. The blur returns once the entrance has settled. */
#screen-path.path-entering .path-unit {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Inside the Mac's phone frame the viewport is wide but the screen is not. */
@media (min-width: 431px) {
  .stage:not(.is-framed) #screen-path .path-unit {
    margin-left: auto;
    margin-right: auto;
  }
}

#screen-path .path-unit__text {
  flex: 1;
  min-width: 0;
}

#screen-path .path-unit__eyebrow {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

#screen-path .path-unit__title {
  margin: 3px 0 0;
  color: var(--text);
  font-size: 19px;
  font-weight: 600;
  line-height: 24px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  outline: none;
}

#screen-path .path-unit__title code {
  font-family: var(--font-code);
  font-size: 17px;
  font-weight: 500;
}

#screen-path .path-unit__progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

#screen-path .path-unit__track {
  position: relative;
  flex: 0 1 150px;
  min-width: 56px;
  height: 5px;
  border-radius: 3px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}

#screen-path .path-unit__fill {
  position: absolute;
  inset: 0;
  border-radius: 3px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
}

#screen-path .path-unit__count {
  flex: none;
  color: var(--muted);
  font-size: 12px;
  line-height: 16px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

#screen-path .path-unit__guide {
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -4px;
  color: var(--text-2);
  touch-action: manipulation;
}

/* Scene ----------------------------------------------------------------- */

#screen-path .path-scene {
  position: relative;
  width: 100%;
  max-width: 430px;
  margin: 8px auto 0;
  aspect-ratio: 390 / 540;
  overflow: visible;
}

#screen-path .path-ridges {
  position: absolute;
  z-index: 0;
  left: 0;
  top: -55.556%;
  width: 100%;
  /* Ends with the scene: below it the scroller's own ground colour continues,
     so the ground never adds scroll length. */
  height: 155.556%;
  overflow: visible;
  pointer-events: none;
}

#screen-path .path-ridges svg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

@media (min-width: 431px) {
  .stage:not(.is-framed) #screen-path .path-ridges {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
}

/* Sunrise on entry: see the dawn functions in path.js. All of this exists only
   while the entrance plays. .999 and .001 are its solid and clear (see SOLID), and
   each part starts with the transform it will animate, so nothing repaints when the
   animations start. */

/* The sky's svg and the ridges each get one layer: painted into .path-ridges, the
   whole drawing would repaint as the bounds of what moves inside it change. */
#screen-path.path-entering .path-ridges > svg:first-child {
  will-change: transform;
}

#screen-path .path-dawn__land {
  position: absolute;
  inset: 0;
  will-change: transform;
}

/* In .path-ridges, which starts 55.556% of a scene higher and is 155.556% of a
   scene tall. In the scene this is top: -100vh - 200px; height: 100vh + 460px + 12%. */
#screen-path .path-dawn__sky {
  position: absolute;
  z-index: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  top: calc(35.7143% - 100vh - 200px);
  height: calc(100vh + 460px + 7.7143%);
  background: linear-gradient(to bottom, #000 calc(100% - 260px), rgba(0, 0, 0, 0) 100%);
  transform: translateY(0);
  will-change: transform;
  pointer-events: none;
}

/* A wide screen masks .path-ridges at the sides: the sky outside it is covered from
   behind, in the scene itself. */
#screen-path .path-dawn__sky--wide {
  display: none;
  top: calc(-100vh - 200px);
  height: calc(100vh + 460px + 12%);
}

@media (min-width: 431px) {
  .stage:not(.is-framed) #screen-path .path-dawn__sky--wide {
    display: block;
  }
}

#screen-path .path-dawn__night {
  opacity: .999;
  will-change: opacity;
}

#screen-path .path-dawn__light {
  position: absolute;
  z-index: 0;
  width: 0;
  height: 0;
  opacity: .001;
  transform: translateY(68px);
  will-change: transform, opacity;
  pointer-events: none;
}

#screen-path .path-dawn__aura {
  position: absolute;
  left: -250px;
  top: -110px;
  width: 500px;
  height: 220px;
  background: radial-gradient(closest-side, rgba(255, 190, 130, .62) 0%, rgba(236, 140, 104, .3) 42%, rgba(170, 100, 110, .1) 72%, rgba(170, 100, 110, 0) 100%);
}

#screen-path .path-dawn__sun {
  position: absolute;
  left: -30px;
  top: -30px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: radial-gradient(circle, #FFC98A 0%, #F7A866 55%, #EE8D52 85%, #E47E45 100%);
  box-shadow: 0 0 24px 8px rgba(255, 216, 150, .55), 0 0 72px 28px rgba(242, 164, 112, .32);
}

#screen-path .path-dawn__sun--pale {
  background: radial-gradient(circle, #FFF6D8 0%, #FCE6AE 55%, #F2CF80 85%, #E6C36A 100%);
  opacity: .001;
  will-change: opacity;
}

/* The trail shows from the bottom up: a clipping box slides up over it while the
   trail inside slides the other way, so it stays put and nothing repaints. The frame
   keeps the box's travel out of the scroller's scroll height. */
#screen-path .path-trail-frame {
  position: absolute;
  z-index: 1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

#screen-path .path-trail-clip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateY(100%);
  will-change: transform;
}

#screen-path .path-trail-slide {
  position: absolute;
  inset: 0;
  transform: translateY(-100%);
  will-change: transform;
}

#screen-path .path-trail {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

#screen-path .path-ahead {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: .5 10;
  opacity: .45;
}

/* While a popup is open, everything but the selected node steps back. */
#screen-path .path-trail {
  transition: opacity 200ms var(--ease-out);
}

#screen-path .path-scene.is-dim .path-trail,
#screen-path .path-scene.is-dim .path-node:not(.is-selected) {
  opacity: .35;
}

#screen-path .path-scene.is-dim .path-coach {
  opacity: 0;
  visibility: hidden;
}

#screen-path .path-walk {
  fill: none;
  stroke: #FFFFFF;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  opacity: .7;
}

/* Nodes ----------------------------------------------------------------- */

#screen-path .path-node {
  position: absolute;
  z-index: 3;
  box-sizing: border-box;
  width: 60px;
  height: 60px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 120ms var(--ease-out), opacity 200ms var(--ease-out);
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  appearance: none;
}

#screen-path .path-node:active {
  transform: translate(-50%, -50%) scale(.94);
}

#screen-path .path-node.is-current,
#screen-path .path-node.is-summit {
  width: 76px;
  height: 76px;
}

/* Breathing halo (current node) and unlock bloom live behind the disc. */
#screen-path .path-node::before,
#screen-path .path-node::after {
  content: '';
  position: absolute;
  z-index: -1;
  inset: 0;
  box-sizing: border-box;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}

#screen-path .path-node.is-current::before {
  border: 2px solid var(--gold);
  animation: path-breathe 2.4s var(--ease-out) infinite;
}

#screen-path .path-node::after {
  background: var(--gold);
  transform: scale(.6);
}

#screen-path .path-node.is-blooming::after {
  animation: path-bloom 600ms var(--ease-out) both;
}

#screen-path.path-halo-off .path-node.is-current::before,
#screen-path .path-node.is-current.no-halo::before {
  animation: none;
  opacity: 0;
}

#screen-path.path-paused .path-node::before,
#screen-path.path-paused .path-coach__tag {
  animation-play-state: paused;
}

@keyframes path-breathe {
  0% { transform: scale(1); opacity: .55; }
  100% { transform: scale(1.45); opacity: 0; }
}

@keyframes path-bloom {
  0% { transform: scale(.6); opacity: .6; }
  100% { transform: scale(1.6); opacity: 0; }
}

#screen-path .path-node__in {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

/* Selection ring: an overlay that fades with opacity (no box-shadow
   transition). It sits on the outer border edge of the disc. */
#screen-path .path-node__in::after {
  content: '';
  position: absolute;
  inset: calc(-1 * var(--path-bw, 0px));
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .55);
  opacity: 0;
  transition: opacity 160ms var(--ease-out);
  pointer-events: none;
}

#screen-path .path-node.is-selected .path-node__in::after {
  opacity: 1;
}

#screen-path .path-node__in svg {
  display: block;
  flex: none;
}

#screen-path .path-node.is-done .path-node__in {
  background: rgba(255, 255, 255, .88);
  color: var(--gold-ink);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

#screen-path .path-node.is-current .path-node__in {
  background: var(--gold);
  color: var(--gold-ink);
  box-shadow: 0 8px 24px rgba(230, 195, 106, .28);
}

/* The current lesson waits in white while the colour arrives, then turns gold by
   crossfade, so nothing repaints: the white copy fades out and the gold glow in. */
#screen-path .path-node.is-current.is-dawn .path-node__in {
  box-shadow: none;
}

#screen-path .path-dawn__white,
#screen-path .path-dawn__glow {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  will-change: opacity;
  pointer-events: none;
}

#screen-path .path-dawn__white {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F2F2F2;
  color: #000;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .08);
  opacity: .999;
}

#screen-path .path-dawn__glow {
  box-shadow: 0 8px 24px rgba(230, 195, 106, .28);
  opacity: .001;
}

#screen-path .path-node.is-locked .path-node__in {
  --path-bw: 1.5px;
  background: rgba(255, 255, 255, .10);
  border: 1.5px solid rgba(255, 255, 255, .35);
  color: rgba(255, 255, 255, .72);
}

#screen-path .path-node.is-summit .path-node__in {
  --path-bw: 2px;
  background: var(--ink-0);
  border: 2px solid rgba(255, 255, 255, .45);
  box-shadow: none;
}

#screen-path .path-node.is-summit.is-current .path-node__in {
  border-color: var(--gold);
  box-shadow: 0 8px 24px rgba(230, 195, 106, .28);
}

#screen-path .path-node.is-summit .path-dawn__glow {
  display: none;
}

#screen-path .path-node.is-summit.is-done .path-node__in {
  border-color: rgba(255, 255, 255, .88);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, .12);
}

#screen-path .path-node .lock-shackle {
  transform-box: view-box;
  transform-origin: 16px 11px;
}

/* Coach tag -------------------------------------------------------------- */

#screen-path .path-coach {
  position: absolute;
  z-index: 4;
  width: 0;
  height: 0;
  pointer-events: none;
}

#screen-path .path-coach__tag {
  position: absolute;
  /* JS sets --coach-dx on narrow scenes so the tag clears the next node. */
  left: var(--coach-dx, 0px);
  bottom: 46px;
  padding: 6px 10px;
  border-radius: 12px;
  background: var(--gold);
  color: var(--gold-ink);
  font: 600 12px/12px var(--font-ui);
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .28);
  transform: translateX(-50%);
  animation: path-bob 1.6s var(--ease-in-out) infinite alternate;
}

#screen-path .path-coach__tag::after {
  content: '';
  position: absolute;
  top: 100%;
  left: calc(50% - var(--coach-dx, 0px));
  margin-left: -6px;
  border-style: solid;
  border-width: 6px 6px 0;
  border-color: var(--gold) transparent transparent;
}

#screen-path.path-halo-off .path-coach__tag {
  animation: none;
}

@keyframes path-bob {
  0% { transform: translateX(-50%) translateY(0); }
  100% { transform: translateX(-50%) translateY(-4px); }
}

/* Popup ----------------------------------------------------------------- */

#screen-path .path-pop {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 240px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--surface-2);
  color: var(--text);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

#screen-path .path-pop:focus {
  outline: none;
}

#screen-path .path-pop__arrow {
  position: absolute;
  left: calc(var(--path-ax, 120px) - 7px);
  width: 14px;
  height: 14px;
  border-radius: 2px;
  background: var(--surface-2);
  transform: rotate(45deg);
}

#screen-path .path-pop[data-side="top"] .path-pop__arrow {
  bottom: -7px;
}

#screen-path .path-pop[data-side="bottom"] .path-pop__arrow {
  top: -7px;
}

#screen-path .path-pop__eyebrow {
  position: relative;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-path .path-pop__title {
  position: relative;
  margin: 4px 0 0;
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  line-height: 22px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#screen-path .path-pop .btn {
  position: relative;
  width: 100%;
  height: 44px;
  min-height: 44px;
  margin-top: 12px;
  touch-action: manipulation;
}

#screen-path .path-pop__note {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  margin-top: 6px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 18px;
}

#screen-path .path-pop__note svg {
  flex: none;
  color: var(--muted);
}

/* Unit guide, inside ui.sheet ---------------------------------------------- */

.path-guide__goal {
  color: var(--text-2);
  font-size: 15px;
  line-height: 1.5;
}

.path-guide__head {
  margin: 20px 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.path-guide__stops {
  display: grid;
  gap: 14px;
}

.path-guide__stop {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 12px;
}

.path-guide__mark {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border: 1.5px solid var(--line-strong);
  border-radius: 50%;
  color: var(--text-2);
}

.path-guide__stop.is-done .path-guide__mark {
  border-color: transparent;
  background: rgba(255, 255, 255, .14);
}

.path-guide__stop.is-current .path-guide__mark {
  border: 2px solid var(--gold);
}

.path-guide__name {
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
}

.path-guide__stop.is-done .path-guide__name { color: var(--text-2); }

.path-guide__code {
  color: var(--muted);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.path-guide__line {
  margin-top: 2px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}

.path-guide__ahead {
  display: grid;
  gap: 6px;
  color: var(--text-2);
  font-size: 14px;
  line-height: 1.45;
}

.path-guide__ahead li {
  display: grid;
  grid-template-columns: 116px minmax(0, 1fr);
  gap: 10px;
}

.path-guide__ahead-name { color: var(--muted); }

/* Reduced motion --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  #screen-path .path-node,
  #screen-path .path-node__in,
  #screen-path .path-stat__pill,
  #screen-path .path-trail,
  #screen-path .path-header::before {
    transition: none;
  }

  #screen-path .path-node.is-current::before,
  #screen-path .path-node.is-blooming::after,
  #screen-path .path-coach__tag {
    animation: none;
  }

  #screen-path .path-node.is-current::before {
    opacity: 0;
  }

  #screen-path .path-node.is-current .path-node__in {
    box-shadow: 0 0 0 8px var(--gold-soft);
  }

  #screen-path .path-node__in::after {
    transition: none;
  }
}