/* ==========================================================================
   TRAINING MAP — Vertical node progression
   Game-grade visual system. Dark monochrome. Terminal meets skill tree.
   ========================================================================== */

/* ---- Header HUD ---- */
.tmap-header {
  text-align: center;
  margin-bottom: 48px;
  padding: 0 20px;
}
.tmap-depth {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fg-faint);
}
.tmap-depth-num {
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 6px;
  text-shadow: 0 0 20px rgba(255,255,255,0.15);
}
.tmap-streak {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  margin-top: 10px;
}
.tmap-streak::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  background: #c89050;
  border-radius: 1px;
  margin-right: 6px;
  vertical-align: middle;
}

/* ---- The vertical path (centered flowchart spine) ---- */
.tmap-path {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
  padding: 0 20px 80px;
  text-align: center;
}

/* ---- Connector lines between nodes (centered) ---- */
.tmap-connector {
  width: 2px;
  margin: 0 auto;
  height: 32px;
  position: relative;
  background: var(--border);
  transition: background 0.4s;
}
.tmap-connector--lit {
  background: var(--fg);
  box-shadow: 0 0 6px rgba(245,245,245,0.3);
}
.tmap-connector--dim {
  background: var(--border-soft);
  opacity: 0.3;
}

/* ---- Node card (centered column) ---- */
.tmap-node {
  position: relative;
  margin: 0 auto;
  padding: 22px 24px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg);
  text-align: center;
  transition: border-color 0.3s, opacity 0.4s, transform 0.15s, box-shadow 0.3s;
}

/* ---- Path marker (centered on the top edge, straddling the spine) ---- */
.tmap-dot {
  position: absolute;
  left: 50%;
  top: -9px;
  transform: translateX(-50%);
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1.5px solid var(--border);
  background: var(--bg);
  z-index: 2;
  transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

/* ================================================================
   STATE 1: COMPLETED
   Solid border, soft glow, checkmark inner shape
   ================================================================ */
.tmap-node--completed {
  border-color: var(--border);
  cursor: pointer;
}
.tmap-node--completed:hover {
  border-color: #444;
  transform: translateY(-1px);
  box-shadow: 0 2px 12px rgba(245,245,245,0.06);
}
.tmap-node--completed .tmap-dot {
  background: var(--fg);
  border-color: var(--fg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 0 8px rgba(255,255,255,0.25);
}
.tmap-node--completed .tmap-dot::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 2px;
  width: 10px;
  height: 6px;
  border-left: 1.5px solid var(--bg);
  border-bottom: 1.5px solid var(--bg);
  transform: rotate(-45deg);
}
.tmap-node--completed .tmap-title {
  color: var(--fg-dim);
}

/* ================================================================
   STATE 2: ACTIVE (current node)
   Double-ring glow, pulse animation. The ONLY bright element.
   ================================================================ */
.tmap-node--active {
  border-color: var(--fg);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.1),
    0 0 20px rgba(255,255,255,0.08);
  cursor: pointer;
}
.tmap-node--active:hover {
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.15),
    0 0 24px rgba(255,255,255,0.12);
}
.tmap-node--active .tmap-dot {
  background: var(--fg);
  border-color: var(--fg);
  box-shadow:
    0 0 0 3px var(--fg),
    0 0 16px rgba(255,255,255,0.6),
    0 0 32px rgba(255,255,255,0.2);
  animation: tmap-pulse 2s ease-in-out infinite;
}
.tmap-node--active .tmap-title {
  color: #ffe0b0;
}

@keyframes tmap-pulse {
  0%, 100% {
    box-shadow:
      0 0 0 3px var(--fg),
      0 0 16px rgba(255,255,255,0.6),
      0 0 32px rgba(255,255,255,0.2);
  }
  50% {
    box-shadow:
      0 0 0 3px var(--fg),
      0 0 24px rgba(255,255,255,0.9),
      0 0 48px rgba(255,255,255,0.35);
  }
}

/* ================================================================
   STATE 3: PREVIEW (next, locked)
   Dashed border. Title visible but dim. "Not yet real."
   ================================================================ */
.tmap-node--preview {
  border: 1px dashed rgba(255,255,255,0.2);
  opacity: 0.6;
  pointer-events: none;
}
.tmap-node--preview .tmap-dot {
  border: 1.5px dashed rgba(255,255,255,0.35);
  background: transparent;
}
.tmap-node--preview .tmap-title {
  color: var(--fg-faint);
  font-style: italic;
}

/* ================================================================
   STATE 4: FOG (unreachable)
   Nearly invisible. No label. Terminal placeholder.
   ================================================================ */
.tmap-node--fog {
  border-color: #151515;
  opacity: 0.25;
  pointer-events: none;
}
.tmap-node--fog .tmap-dot {
  border-color: #1a1a1a;
  background: #080808;
}
.tmap-node--fog .tmap-title,
.tmap-node--fog .tmap-skills,
.tmap-node--fog .tmap-meta,
.tmap-node--fog .tmap-timer {
  display: none;
}
.tmap-node--fog .tmap-fog-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: #1a1a1a;
}

/* ---- Node content ---- */
.tmap-title {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #ffe0b0;
  font-weight: 400;
  margin-bottom: 10px;
  text-decoration: none;
}

/* Skill dots row */
.tmap-skills {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
}
.tmap-skill-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  border: 1px solid var(--fg-faint);
  background: transparent;
  transition: background 0.3s, border-color 0.3s, transform 0.2s;
}
.tmap-skill-dot--done {
  background: var(--fg);
  border-color: var(--fg);
}
.tmap-skill-dot--active {
  background: var(--fg-dim);
  border-color: var(--fg-dim);
}

/* Meta line */
.tmap-meta {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

/* Timer */
.tmap-timer {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--fg-dim);
  margin-top: 8px;
}
.tmap-timer--urgent {
  color: #c89050;
}

/* Fog label */
.tmap-fog-label {
  display: none;
}

/* ---- Unlock animation (3-beat) ---- */
@keyframes tmap-unlock {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  30%  { transform: scale(1.15); box-shadow: 0 0 0 6px rgba(255,255,255,0.5); }
  60%  { transform: scale(0.97); box-shadow: 0 0 20px rgba(255,255,255,0.4); }
  100% { transform: scale(1);    box-shadow: 0 0 8px rgba(255,255,255,0.25); }
}
.tmap-node--just-unlocked {
  animation: tmap-unlock 0.5s cubic-bezier(0.36, 0.07, 0.19, 0.97) forwards;
}

@keyframes tmap-skill-fill {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.tmap-skill-dot--just-completed {
  animation: tmap-skill-fill 0.5s ease-out;
}

/* ---- Loading + gate ---- */
.tmap-loading {
  text-align: center;
  padding: 80px 20px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--fg-faint);
  letter-spacing: 0.1em;
}
.tmap-gate {
  text-align: center;
  padding: 60px 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--fg-faint);
  line-height: 1.8;
}
.tmap-gate a {
  color: var(--fg);
  text-decoration: none;
  border-bottom: 1px solid var(--fg-faint);
}

/* ---- Viewport fade on fog ---- */
.tmap-node--fog:last-child {
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}

/* ============================================================
   THREADED LEARNING-TYPE SUB-SKILLS
   Nested under the active area node like a comment thread.
   A left rail + elbow connectors pivot the flow down into the
   six skills the area trains, then the spine resumes to the
   next (locked) area.
   ============================================================ */
.tmap-thread {
  position: relative;
  max-width: 460px;
  margin: 0 auto;
  padding: 16px 0 16px 24px;
  text-align: left;
}
/* vertical rail */
.tmap-thread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 24px;
  width: 2px;
  background: var(--border);
}
.tmap-sub {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border-soft);
  border-radius: 4px;
  background: var(--bg);
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.15s;
}
.tmap-sub:first-child { margin-top: 0; }
/* elbow connector from rail to block */
.tmap-sub::before {
  content: '';
  position: absolute;
  left: -24px;
  top: 22px;
  width: 24px;
  height: 2px;
  background: var(--border);
}
.tmap-sub--open {
  cursor: pointer;
  border-color: #3a3a3a;
  box-shadow: 0 0 16px rgba(245, 245, 245, 0.06);
}
.tmap-sub--open:hover {
  border-color: #555;
  transform: translateX(2px);
  box-shadow: 0 0 22px rgba(245, 245, 245, 0.1);
}
.tmap-sub--locked {
  opacity: 0.4;
  pointer-events: none;
}
.tmap-sub-idx {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.1em;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.tmap-sub--open .tmap-sub-idx { color: var(--fg-dim); }
.tmap-sub-body { flex: 1; }
.tmap-sub-title {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--fg-dim);
  line-height: 1.4;
}
.tmap-sub--open .tmap-sub-title {
  color: #ffe0b0;
  text-shadow: 0 0 12px rgba(255, 224, 176, 0.18);
}
.tmap-sub-tag {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: var(--fg-faint);
  margin-top: 5px;
  line-height: 1.5;
}
.tmap-sub-state {
  font-family: var(--font-mono);
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
  flex-shrink: 0;
}
.tmap-sub--open .tmap-sub-state { color: #6a6a6a; }

/* ---- Training intro header centered (aligns with PRIVATE badge) ---- */
.value-landing--tcenter { text-align: center; }
.value-landing--tcenter .value-kicker,
.value-landing--tcenter h1,
.value-landing--tcenter .value-lede {
  margin-left: auto;
  margin-right: auto;
}

/* ---- Desktop adjustments ---- */
@media (min-width: 768px) {
  .tmap-node {
    padding: 24px 28px;
  }
  .tmap-dot {
    width: 18px;
    height: 18px;
    top: -10px;
  }
  .tmap-dot::after {
    top: 4px;
    left: 3px;
    width: 11px;
    height: 7px;
  }
  .tmap-connector {
    height: 40px;
  }
}