/* =============================================================
   /tutorial player: chapter rail, title card, timeline, controls and
   the close-ups. Stage internals come from tutorial.css.
   ============================================================= */

/* ================= PLAYER (the chosen layout) ================= */
.tut-page.is-player { max-width: 1440px; }
.pl { display: grid; grid-template-columns: 220px 1fr; gap: 32px; padding: 30px 0 40px; align-items: start; }
/* chapter list: titles and a progress bar, nothing else */
.pl-rail { position: sticky; top: 16px; display: flex; flex-direction: column; gap: 4px; }
.pl-ch { display: grid; grid-template-columns: 28px 1fr; column-gap: 6px; row-gap: 7px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 8px; padding: 11px 12px 10px; cursor: pointer; font-family: inherit; color: var(--muted); transition: all 0.2s; }
.pl-ch .n { color: var(--gold); font-size: 11px; font-weight: 700; letter-spacing: 1px; padding-top: 2px; }
.pl-ch .t { font-size: 14px; font-weight: 600; color: rgba(255,255,240,0.72); }
.pl-ch:hover .t { color: var(--ivory); }
.pl-ch.active { background: rgba(30,30,30,0.85); border-color: var(--line); }
.pl-ch.active .t { color: var(--ivory); }
.pl-ch .bar { grid-column: 2; height: 2px; background: rgba(255,255,240,0.08); border-radius: 1px; overflow: hidden; }
.pl-ch .bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.4s; }
.pl-ch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.pl-main { min-width: 0; }
/* the main column never gets wider than the animation at this screen height */
.pl-head, .pl-stagewrap, .pl-after, .pl-main .gr-clicks, .pl-main .gr-ix { max-width: min(100%, calc((100vh - 200px) * 16 / 9)); }
.pl-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.pl-headtext { flex: 1; min-width: 0; }
.pl-title { margin: 0; font-size: 24px; letter-spacing: -0.4px; display: flex; align-items: baseline; gap: 10px; }
.pl-title .n { color: var(--gold); font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.pl-summary { margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: rgba(255,255,240,0.7); max-width: 62ch; }
.pl-ctls { display: flex; gap: 6px; flex: none; align-items: center; }
.pl-next.pulse { border-color: var(--gold); color: var(--ivory); animation: plPulse 1.4s ease-in-out infinite; }
@keyframes plPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(218,165,32,0); } 50% { box-shadow: 0 0 0 5px rgba(218,165,32,0.25); } }
.pl-stagewrap { position: relative; }
/* opening title card: what you're about to watch, then it fades into the animation */
.pl-card { position: absolute; inset: 0; z-index: 5; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 30px 14%; border: none; border-radius: 12px; cursor: pointer; font-family: inherit; color: var(--ivory); background: rgba(8, 7, 5, 0.86); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.pl-card.is-on { opacity: 1; pointer-events: auto; }
.pl-card .n { color: var(--gold); font-size: 14px; font-weight: 700; letter-spacing: 3px; }
.pl-card .t { font-size: 38px; font-weight: 700; letter-spacing: -0.8px; }
.pl-card .s { font-size: 17px; line-height: 1.5; color: rgba(255,255,240,0.78); max-width: 46ch; }
/* skip: clearly a button, but outlined — the card itself is clickable too */
.pl-card .skip { margin-top: 18px; display: inline-flex; align-items: center; gap: 9px; font-size: 15px; font-weight: 600; color: var(--ivory); border: 1px solid rgba(255,255,240,0.45); border-radius: 8px; padding: 10px 20px; background: rgba(255,255,240,0.06); transition: all 0.2s; }
.pl-card .skip i { font-size: 12px; color: var(--gold); }
.pl-card:hover .skip { border-color: var(--gold); background: rgba(218,165,32,0.14); }
/* how long until it starts: a thin bar filling along the bottom */
.pl-card .timer { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,240,0.08); border-radius: 0 0 12px 12px; overflow: hidden; }
.pl-card .timer i { display: block; height: 100%; width: 0; background: var(--gold); }
/* timeline bar: like a video's — fill, a tick per step, a knob to drag */
.pl-seek { display: flex; align-items: center; gap: 12px; margin-top: 12px; max-width: min(100%, calc((100vh - 200px) * 16 / 9)); }
.pl-time { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; }
.pl-time[data-role="total"] { text-align: right; }
.pl-track { position: relative; flex: 1; height: 22px; cursor: pointer; touch-action: none; }
.pl-track::before { content: ''; position: absolute; left: 0; right: 0; top: 9px; height: 4px; border-radius: 2px; background: rgba(255,255,240,0.12); }
.pl-fill { position: absolute; left: 0; top: 9px; height: 4px; width: 0; border-radius: 2px; background: var(--gold); }
.pl-ticks i { position: absolute; top: 6px; width: 2px; height: 10px; margin-left: -1px; background: rgba(255,255,240,0.45); border-radius: 1px; }
.pl-knob { position: absolute; top: 4px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: var(--ivory); box-shadow: 0 0 0 3px rgba(218,165,32,0.35); transform: scale(0.85); transition: transform 0.15s; }
.pl-track:hover .pl-knob { transform: scale(1); }
.pl-track:hover::before { background: rgba(255,255,240,0.2); }
.pl-tip { position: absolute; bottom: 24px; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--ivory); background: #16130d; border: 1px solid rgba(218,165,32,0.6); border-radius: 6px; padding: 4px 9px; opacity: 0; pointer-events: none; transition: opacity 0.15s; }
.pl-tip.is-on { opacity: 1; }
/* below the animation: only the one action */
.pl-after { display: flex; justify-content: flex-end; margin-top: 12px; }
.pl-main .gr-clicks { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line-soft); }

/* Pause / Replay / Next */
.gr-ctl { display: inline-flex; align-items: center; gap: 7px; background: rgba(255,255,240,0.06); border: 1px solid rgba(255,255,240,0.2); color: rgba(255,255,240,0.85); font-family: inherit; font-size: 13px; padding: 7px 12px; border-radius: 7px; cursor: pointer; transition: all 0.2s; }
.gr-ctl i { font-size: 11px; }
.gr-ctl:hover { border-color: var(--gold); color: var(--ivory); }
.gr-ctl:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* the one action under the animation */
.gr-try { flex: none; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; background: var(--gold); color: var(--ink); font-weight: 700; font-size: 14px; padding: 11px 18px; border-radius: 7px; }
.gr-try:hover { background: var(--gold-hover); }

/* "What you'll click" — one row of real-looking pieces, each with a two-word label */
/* one row: badges get the wider first column, the rest share the remainder */
.gr-clicks { display: grid; grid-template-columns: 1.5fr repeat(6, minmax(0, 1fr)); align-items: stretch; gap: 10px; margin-top: 18px; font-size: 13px; }
.gr-clicks-h { grid-column: 1 / -1; font-size: 10.5px; letter-spacing: 1.5px; text-transform: uppercase; color: rgba(255,255,240,0.4); }
.gr-clicks-h em { font-style: normal; text-transform: none; letter-spacing: 0; color: rgba(255,255,240,0.35); margin-left: 4px; font-size: 12px; }
/* each piece is a button that opens its close-up */
.gr-click { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; background: rgba(255,255,240,0.02); border: 1px solid rgba(255,255,240,0.09); border-radius: 10px; padding: 10px 12px; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: all 0.2s; }
.gr-click:hover { border-color: rgba(218,165,32,0.5); background: rgba(218,165,32,0.04); }
.gr-click.sel { border-color: var(--gold); background: rgba(218,165,32,0.08); }
.gr-click:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.gr-click { min-width: 0; overflow: hidden; }
.gr-click .ui { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; min-height: 26px; font-size: 11.5px; pointer-events: none; }
.gr-click .lbl { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: rgba(255,255,240,0.8); }
.gr-click .lbl::after { content: '▸'; color: var(--gold); font-size: 11px; transition: transform 0.2s; }
.gr-click.sel .lbl::after { transform: rotate(90deg); }

/* the close-up: animation of that one interaction, a little more text beside it */
.gr-ix { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 26px; align-items: center; margin-top: 12px; padding: 16px; background: #0b0a08; border: 1px solid rgba(218,165,32,0.4); border-radius: 12px; animation: grOpen 0.25s ease; }
.gr-ix[hidden] { display: none; }
.gr-ix-demo .tut-frame { box-shadow: none; }
.gr-ix-text h3 { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.2px; }
.gr-ix-text p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.55; color: rgba(255,255,240,0.88); }
.gr-ix-text p b { color: var(--gold); }
.gr-ix-text ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.gr-ix-text li { position: relative; padding-left: 15px; font-size: 13px; line-height: 1.45; color: rgba(255,255,240,0.65); }
.gr-ix-text li::before { content: ''; position: absolute; left: 0; top: 7px; width: 5px; height: 5px; border-radius: 50%; background: rgba(218,165,32,0.7); }
.gr-ix-text li b { color: rgba(255,255,240,0.9); font-weight: 600; }
.gr-ix-close { margin-top: 16px; background: none; border: 1px solid rgba(255,255,240,0.2); color: rgba(255,255,240,0.7); font: inherit; font-size: 12.5px; padding: 6px 12px; border-radius: 6px; cursor: pointer; }
.gr-ix-close:hover { border-color: var(--gold); color: var(--ivory); }

@media (max-width: 1100px) { .gr-clicks { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- phones ---------- */
@media (max-width: 860px) {
    .pl { grid-template-columns: 1fr; gap: 16px; }
    .pl-rail { position: static; flex-direction: row; overflow-x: auto; gap: 6px; }
    .pl-ch { flex: none; width: auto; }
    .pl-head { flex-direction: column; align-items: flex-start; }
    .pl-ctls .gr-ctl span { display: none; }
    .pl-card .t { font-size: 26px; } .pl-card .s { font-size: 14px; }
    .gr-ix { grid-template-columns: 1fr; gap: 14px; }
    .gr-clicks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}