/* The Mindkind · ETR — interactive capability levels (driven by assets/js/levels.js).
   Everything is scoped to .levels.lvx-on / .lvx, which only exist when the script ran
   on an <ol class="levels" data-levels-interactive>. Phones (≤720px) keep the static list. */

.lvx, .lvx-hit, .lvx-line { display: none; }

@media (min-width: 721px) {
  /* Cards become compact, clickable steps; their full text moves to the panel. */
  .levels.lvx-on .lvx-hit { display: block; position: absolute; inset: 0; z-index: 2; margin: 0; padding: 0; border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; }
  .levels.lvx-on .lvx-hit:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; }
  .levels.lvx-on .level__text,
  .levels.lvx-on .level__use { display: none; }
  .levels.lvx-on .level__card { transition: opacity .5s var(--ease), box-shadow .5s var(--ease), border-color .5s var(--ease), transform .5s var(--ease); }
  .levels.lvx-on .level__node { position: relative; transition: opacity .5s var(--ease); }
  .levels.lvx-on .level.lvx-future .level__card,
  .levels.lvx-on .level.lvx-future .level__node { opacity: .4; }
  .levels.lvx-on .level:hover .level__card { border-color: color-mix(in srgb, var(--c) 70%, transparent); }
  .levels.lvx-on .level.lvx-active .level__card { border-color: var(--c); box-shadow: 0 0 0 1px var(--c), 0 0 46px -8px var(--c); transform: translateY(-4px); }
  .levels.lvx-on .level.lvx-active .level__node::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; border: 2px solid var(--c); animation: lvx-ring 1.8s ease-out infinite; }

  .levels.lvx-on .lvx-line { display: block; position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
  .lvx-line__base { fill: none; stroke: var(--line-strong); stroke-width: 2; stroke-dasharray: 4 8; }
  .lvx-line__prog { fill: none; stroke: rgba(255, 255, 255, .7); stroke-width: 2; stroke-linecap: round; transition: stroke-dashoffset .8s var(--ease); }

  /* Detail panel */
  .lvx { --c: var(--orange); display: block; margin-top: 28px; }
  .lvx p { margin: 0; }
  .lvx-panel { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, .9fr); gap: 40px; padding: 32px 36px; border-radius: var(--radius); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); background: linear-gradient(170deg, color-mix(in srgb, var(--c) 10%, transparent), rgba(11, 53, 99, .14) 70%); transition: border-color .5s var(--ease); }
  .lvx-panel > * { transition: opacity .18s ease; }
  .lvx-panel.is-swapping > * { opacity: 0; }
  .lvx-status { font: 500 .75rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--c); }
  .lvx-name { margin-top: 12px !important; font: 700 clamp(2.4rem, 4vw, 3.4rem)/1 var(--f-head); letter-spacing: .02em; color: var(--text); }
  .lvx-cap { margin-top: 10px !important; font-weight: 600; font-size: 1.2rem; color: var(--text); }
  .lvx-text { margin-top: 12px !important; color: var(--muted); font-size: 1rem; line-height: 1.55; }
  .lvx-label { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 12px !important; }
  .lvx-stack__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
  .lvx-stack__list li { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--muted); }
  .lvx-stack__list li.is-new { color: var(--text); font-weight: 600; }
  .lvx-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sc); flex-shrink: 0; }
  .lvx-stack__name { font: 500 .72rem/1.3 var(--f-mono); letter-spacing: .08em; width: 66px; flex-shrink: 0; }
  .lvx-tag { font: 500 .62rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; padding: 4px 7px; border-radius: 999px; border: 1px solid var(--sc); color: var(--sc); }
  .lvx-unlocks { border-left: 1px solid var(--line); padding-left: 32px; }
  .lvx-use { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; font-size: 1.15rem; line-height: 1.35; color: var(--c); }

  /* Icons */
  .lvx-icon { width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  .lvx-use .lvx-icon { width: 22px; height: 22px; margin-top: 2px; }
  .lvx-icon--fill { fill: currentColor; stroke: none; }

  /* Controls */
  .lvx-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 18px; }
  .lvx-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--text); font: 600 .9rem/1 var(--f-body); cursor: pointer; transition: background .2s ease, border-color .2s ease; }
  .lvx-btn:hover { background: rgba(255, 255, 255, .06); }
  .lvx-btn:focus-visible { outline: 2px solid var(--c); outline-offset: 3px; }
  .lvx-btn--next { border-color: var(--c); }
  .lvx-btn--icon { width: 44px; padding: 0; }
  .lvx-i-pause { display: none; }
  .lvx.is-playing .lvx-i-pause { display: block; }
  .lvx.is-playing .lvx-i-play { display: none; }
  .lvx-progress { flex: 1 1 160px; display: flex; gap: 6px; }
  .lvx-progress span { flex: 1; height: 4px; border-radius: 2px; background: var(--line); transition: background .5s var(--ease); }
  .lvx-progress span.is-on { background: var(--sc); }
  .lvx-count { font: 500 .75rem/1 var(--f-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
}

/* Desktop staircase: compact cards, rising by step. A gentler rise keeps the
   empty corner above WORM small, so the steps sit closer to the section intro. */
@media (min-width: 1181px) {
  .levels.lvx-on .level__card { min-height: calc(140px + var(--step) * 22px); }
}

/* Tighter section rhythm while the interactive version is on (the panel already adds height). */
@media (min-width: 721px) {
  .section--levels:has(.levels.lvx-on) { padding-bottom: calc(var(--section) * .4); }
  .section--levels:has(.levels.lvx-on) .section-head { margin-bottom: 28px; }
  .section--levels:has(.levels.lvx-on) .levels__note { margin-top: 24px; }
}

/* Tablet: panel in two columns. */
@media (min-width: 721px) and (max-width: 1180px) {
  .lvx-panel { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding: 28px; }
  .lvx-main { grid-column: 1 / -1; }
  .lvx-unlocks { padding-left: 24px; }
}

@keyframes lvx-ring { from { transform: scale(1); opacity: .9; } to { transform: scale(2.6); opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  .levels.lvx-on .level__card, .levels.lvx-on .level__node, .lvx-line__prog, .lvx-panel, .lvx-panel > *, .lvx-progress span { transition: none !important; }
  .levels.lvx-on .level.lvx-active .level__node::after { animation: none; }
  .levels.lvx-on .level.lvx-active .level__card { transform: none; }
}