/* ==========================================================================
   3.1 · chapters: scroll-sequence rails (§02 / §04 / §06), §06 product boards
   ========================================================================== */


/* ------------------------------------------------- sequence rails (beats) */
/* The tabs of a sequence stage show where the scroll is: the active beat fills as it plays,
   finished beats stay full. Clicking travels to that beat (see main.js goToBeat). */
.beat-rail > button { position: relative; overflow: hidden; }
.beat-fill {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--blue), var(--blue-soft));
  transform-origin: left; transform: scaleX(0); transition: transform 0.18s linear, opacity var(--t-base);
}
.beat-rail > button[aria-pressed="true"] .beat-fill { transform: scaleX(var(--beat-local, 0)); }
.scene-track[data-beat="1"] .beat-rail > button:nth-child(1) .beat-fill,
.scene-track[data-beat="2"] .beat-rail > button:nth-child(-n+2) .beat-fill { transform: scaleX(1); opacity: 0.45; }
.motion-reduced .beat-fill { display: none; }

/* §04 rail: three numbered beats in a row */
.network-steps.beat-rail { display: flex; flex-wrap: wrap; gap: 6px; counter-reset: none; }
.network-steps.beat-rail button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px 0 12px;
  border-radius: 999px; border: 1px solid var(--hair); font-size: 13px; color: var(--text-2);
  transition: border-color var(--t-base), background var(--t-base), color var(--t-base);
}
.network-steps.beat-rail button b { font: 500 11px/1 var(--mono); color: var(--blue-soft); }
.network-steps.beat-rail button:hover { border-color: var(--hair-2); color: var(--text-1); }
.network-steps.beat-rail button[aria-pressed="true"] { border-color: var(--hair-3); background: rgba(36, 111, 241, 0.16); color: var(--text-1); }
.network-steps.beat-rail .beat-fill { left: 14px; right: 14px; }

/* ------------------------------------------------- § 06 growth copy (3.3) */
/* All three steps are in the HTML, stacked in one cell: the note keeps the size of the longest. */
.growth-note { display: grid; }
.growth-copy { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), visibility 0.42s; }
body[data-state-growth="teach"] [data-growth-copy="teach"],
body[data-state-growth="remember"] [data-growth-copy="remember"],
body[data-state-growth="improve"] [data-growth-copy="improve"] { opacity: 1; visibility: visible; transform: none; }
.motion-reduced .growth-copy, .motion-reduced .board { transition: none; }

/* ------------------------------------------------------ § 06 product boards */
/* One cell holds the three boards, so switching steps never changes the panel's size. */
.growth-boards { display: grid; }
.growth-boards > .board { grid-area: 1 / 1; align-self: start; }
.board {
  display: grid; align-content: start; gap: 10px; padding: 14px 16px 14px; border-radius: var(--r-m);
  border: 1px solid var(--hair-2); background: linear-gradient(160deg, rgba(36, 111, 241, 0.12), rgba(7, 16, 32, 0.6) 55%), var(--ink-1);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity 0.42s var(--ease-out), transform 0.42s var(--ease-out), visibility 0.42s;
}
body[data-state-growth="teach"] .board[data-board="teach"],
body[data-state-growth="remember"] .board[data-board="remember"],
body[data-state-growth="improve"] .board[data-board="improve"] { opacity: 1; visibility: visible; transform: none; }
.board header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font: 500 12px/1 var(--mono); letter-spacing: 0.1em; color: var(--text-2); }
.board header small { font-size: 11px; letter-spacing: 0.06em; color: var(--text-4); }
/* 你来教: the twin's reply, struck; the lawyer's line; the tag */
.board-q { font-size: 12.5px; color: var(--text-3); }
.board-was, .board-now { display: grid; gap: 3px; padding: 8px 10px; border-radius: var(--r-s); font-size: 13px; line-height: 1.55; }
.board-was { background: rgba(156, 193, 255, 0.05); color: var(--text-3); }
.board-was s { text-decoration-color: var(--blue-bright); text-decoration-thickness: 2px; }
.board-now { background: rgba(36, 111, 241, 0.16); color: var(--text-1); box-shadow: inset 2px 0 0 var(--blue-bright); }
.board-was span, .board-now span { font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.06em; color: var(--blue-soft); }
.board-tag { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--blue-mist); }
.board-tag i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); color: #fff; font-style: normal; font-size: 11px; }
/* 它记住: four drawers, one new entry */
.board-facets { display: flex; gap: 6px; }
.board-facets li { padding: 4px 10px; border-radius: 99px; border: 1px solid var(--hair-2); font-size: 12px; color: var(--text-3); }
.board-facets .is-on { border-color: var(--blue); background: rgba(36, 111, 241, 0.16); color: var(--text-1); }
.board-entry { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; padding: 10px 12px; border-radius: var(--r-s); background: rgba(156, 193, 255, 0.06); font-size: 13px; line-height: 1.5; color: var(--text-1); }
.board-entry b { padding: 1px 8px; border-radius: 6px; background: var(--blue); color: #fff; font-size: 11.5px; font-weight: 500; align-self: start; }
.board-entry em { grid-column: 2; font-style: normal; font: 500 10.5px/1.4 var(--mono); color: var(--blue-soft); }
/* 更好才留下: the loop, two versions and their tests */
.board-loop { display: flex; flex-wrap: wrap; gap: 4px 0; counter-reset: loop; }
.board-loop li { display: flex; align-items: center; font-size: 12px; color: var(--text-2); counter-increment: loop; }
.board-loop li::before { content: counter(loop); display: grid; place-items: center; width: 18px; height: 18px; margin-right: 6px; border-radius: 50%; border: 1px solid var(--hair-3); font: 500 10px/1 var(--mono); color: var(--blue-soft); }
.board-loop li:not(:last-child) { margin-right: 10px; }
.board-loop li:last-child { color: var(--text-1); }
.board-loop li:last-child::before { background: var(--blue); border-color: var(--blue); color: #fff; }
.board-versions { display: grid; gap: 6px; }
.board-versions p { display: flex; align-items: center; gap: 7px; padding: 7px 10px; border-radius: var(--r-s); background: rgba(156, 193, 255, 0.05); font-size: 12px; color: var(--text-3); }
.board-versions b { font: 600 12px/1 var(--mono); color: var(--text-2); }
.board-versions span { flex: 1; }
.board-versions i { width: 12px; height: 12px; border-radius: 50%; }
.board-versions .is-pass { background: #2fa36b; }
.board-versions .is-fail { background: #d9825f; }
.board-versions .is-new { background: rgba(36, 111, 241, 0.16); color: var(--text-1); box-shadow: inset 2px 0 0 var(--blue-bright); }
.board-versions .is-new b { color: var(--blue-soft); }
.board-rule { font-size: 12px; line-height: 1.7; color: var(--text-3); }
/* With the boards in view the step legend would repeat them; it returns where boards hide. */
.growth-panel .stage-steps { display: none; }

@media (max-width: 1080px) {
}
@media (max-width: 900px) {
  .growth-boards { display: none; }
  .growth-panel .stage-steps { display: grid; }
}
@media (max-width: 520px) {
  .network-steps.beat-rail { justify-content: center; }
  .network-steps.beat-rail button { padding: 0 12px 0 10px; font-size: 12px; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .growth-panel .stage-steps { display: none; }
  .network-steps.beat-rail { display: none; }
}