/* =====================================================================
   ExamForge — tutorial player ("video" walkthrough)

   The player is a fixed 960×540 design canvas scaled to fit its column, so
   every scene is composed once and lands identically at any width — the same
   discipline a real screencast gets from its recording resolution.

   Mock chrome uses the workbench tokens from style.css (--wood-*, --brass-*,
   --parch*) so the walkthrough looks like the product, not like a diagram.
   ===================================================================== */

.tut{--stage-w:960px;--stage-h:540px;--scale:1;margin:0 0 8px}

/* ---------------- youtube facade ---------------- */
/* A poster and a play button standing in for the embed. The iframe is injected
   only on click, so the page loads and scrolls without ever pulling YouTube's
   player. 16:9 held by aspect-ratio so there is no layout shift when the real
   frame drops in. */
.yt-lite{position:relative;aspect-ratio:16/9;background:var(--wood-900);overflow:hidden}
.yt-lite-play{display:block;width:100%;height:100%;margin:0;padding:0;border:0;cursor:pointer;
  background:var(--wood-900);position:relative}
.yt-lite-play img{width:100%;height:100%;object-fit:cover;display:block;
  /* the thumbnail is letterboxed 4:3; scale it up so the 16:9 frame fills */
  transform:scale(1.35)}
.yt-lite-btn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:78px;height:54px;border-radius:12px;background:rgba(31,19,9,.78);
  border:1px solid var(--brass);box-shadow:0 6px 18px rgba(0,0,0,.45);transition:background .15s}
.yt-lite-btn::before{content:"";position:absolute;left:52%;top:50%;transform:translate(-50%,-50%);
  border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent var(--brass-pale)}
.yt-lite-play:hover .yt-lite-btn,.yt-lite-play:focus-visible .yt-lite-btn{background:var(--brass)}
.yt-lite-play:hover .yt-lite-btn::before{border-left-color:var(--wood-900)}
.yt-lite.is-playing{aspect-ratio:16/9}
.yt-lite iframe{width:100%;height:100%;border:0;display:block}

/* ---------------- frame ---------------- */
.tut-frame{
  background:var(--wood-800);
  background-image:var(--grain);background-size:cover;background-blend-mode:soft-light;
  border-bottom:3px solid var(--brass);
  box-shadow:0 1px 0 var(--wood-900),0 4px 0 var(--wood-600),var(--shadow);
  padding:10px 10px 0;
}
.tut-stage{
  position:relative;overflow:hidden;background:var(--parch);
  height:calc(var(--stage-h) * var(--scale));
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.35);
}
.tut-canvas{
  position:absolute;top:0;left:0;width:var(--stage-w);height:var(--stage-h);
  transform:scale(var(--scale));transform-origin:top left;
}

/* ---------------- scenes ---------------- */
/* The scene is a flex column so the body always gets exactly what the head
   leaves over — no magic offset to keep in step with the head's padding. */
.tut-scene{position:absolute;inset:0;opacity:0;visibility:hidden;
  display:flex;flex-direction:column;transition:opacity .32s ease}
.tut-scene.is-live{opacity:1;visibility:visible}
.tut-scene-head{
  flex:0 0 auto;display:flex;align-items:baseline;gap:10px;padding:10px 20px 7px;
  background:var(--wood-700);background-image:var(--grain);background-size:cover;
  background-blend-mode:soft-light;color:var(--on-timber);
}
.tut-scene-head b{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--on-timber-bright)}
.tut-scene-head i{font-style:normal;font-size:11px;text-transform:uppercase;
  letter-spacing:.09em;color:var(--brass-pale)}
.tut-scene-body{flex:1;min-height:0;padding:11px 20px;overflow:hidden}

/* Beats: anything with data-beat starts hidden and lands when its cue passes. */
.tut-scene [data-beat]{opacity:0;transform:translateY(9px);
  transition:opacity .3s ease,transform .3s ease}
.tut-scene [data-beat].on{opacity:1;transform:none}

/* fake pointer */
.tut-cursor{position:absolute;width:22px;height:22px;margin:-3px 0 0 -3px;z-index:40;
  opacity:0;pointer-events:none;transition:transform .5s cubic-bezier(.4,.1,.2,1),opacity .2s}
.tut-cursor.on{opacity:1}
.tut-cursor svg{display:block;filter:drop-shadow(0 2px 3px rgba(31,19,9,.55))}
.tut-cursor::after{content:"";position:absolute;left:-9px;top:-9px;width:36px;height:36px;
  border:2px solid var(--brass-lt);opacity:0;transform:scale(.4)}
.tut-cursor.click::after{animation:tut-ping .45s ease-out}
@keyframes tut-ping{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.15)}}

/* ---------------- transport ---------------- */
.tut-bar{display:flex;align-items:center;gap:10px;padding:9px 4px;color:var(--on-timber-dim)}
.tut-btn{
  background:var(--wood-600);color:var(--on-timber);border:none;cursor:pointer;
  padding:7px 11px;font:inherit;font-size:12px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 var(--wood-900);
}
.tut-btn:hover{background:var(--wood-500)}
.tut-btn:active{transform:translateY(2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.tut-btn.play{background:var(--brass);color:var(--wood-900);min-width:74px}
.tut-btn.play:hover{background:var(--brass-lt)}
.tut-btn[aria-pressed="true"]{background:var(--wood-900);color:var(--brass-lt)}
.tut-time{font-size:12px;font-variant-numeric:tabular-nums;color:var(--brass-pale);
  letter-spacing:.04em;white-space:nowrap}

.tut-track{flex:1;display:flex;gap:2px;height:12px;cursor:pointer;min-width:80px}
.tut-seg{flex:var(--w,1);background:rgba(0,0,0,.42);position:relative;overflow:hidden}
.tut-seg span{position:absolute;inset:0;transform-origin:left;transform:scaleX(0);
  background:var(--brass-lt)}
.tut-track:hover .tut-seg{background:rgba(0,0,0,.55)}

/* ---------------- caption / narration ---------------- */
.tut-caption{
  background:var(--wood-900);color:var(--on-timber);padding:13px 18px;min-height:74px;
  border-bottom:1px solid var(--wood-600);font-size:14.5px;line-height:1.5;
}
.tut-caption b{color:var(--brass-pale);font-weight:700}
.tut-caption em{color:var(--on-timber);font-style:italic}

/* ---------------- track (audience) switch ---------------- */
.tut-tracks{display:flex;gap:1px;margin-bottom:0}
.tut-tracks button{
  flex:1;background:var(--parch-dk);color:var(--accent-ink);border:none;cursor:pointer;
  font:inherit;font-size:12px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  padding:11px 12px;box-shadow:inset 0 -3px 0 var(--wood-200);
}
.tut-tracks button:hover{background:var(--wood-050)}
.tut-tracks button[aria-selected="true"]{
  background:var(--wood-700);color:var(--on-timber);box-shadow:inset 0 -3px 0 var(--brass);
}

/* ---------------- chapters ---------------- */
.tut-chapters{list-style:none;margin:14px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--wood-100)}
.tut-chapters li{margin:0}
.tut-chapters button{
  width:100%;text-align:left;background:var(--parch-lt);border:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--ink-soft);padding:9px 12px;
  display:flex;gap:9px;align-items:baseline;
}
.tut-chapters button:hover{background:var(--wood-050)}
.tut-chapters button[aria-current="true"]{background:var(--wood-700);color:var(--on-timber)}
.tut-chapters button[aria-current="true"] .n{color:var(--brass-lt)}
.tut-chapters .n{font-weight:700;color:var(--wood-400);font-variant-numeric:tabular-nums}
.tut-chapters .t{flex:1}
.tut-chapters .d{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.tut-chapters button[aria-current="true"] .d{color:var(--brass-pale)}

/* poster / big play */
.tut-poster{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;cursor:pointer;
  background:rgba(31,19,9,.72);color:var(--on-timber);border:none;font:inherit;width:100%}
.tut-poster.gone{display:none}
.tut-poster .disc{width:78px;height:78px;background:var(--brass);color:var(--wood-900);
  display:flex;align-items:center;justify-content:center;font-size:30px;
  box-shadow:0 6px 0 var(--brass-dk)}
.tut-poster:hover .disc{background:var(--brass-lt)}
.tut-poster b{font-family:var(--serif);font-size:23px;font-weight:600}
.tut-poster span{font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brass-pale)}

/* =====================================================================
   Mock application chrome used inside the scenes
   ===================================================================== */
/* The mock window fills the scene body, so a scene reads as a screen recording
   of the app rather than a floating card on a coloured backdrop. */
.mk{background:var(--surface);box-shadow:0 8px 18px rgba(43,26,12,.22);border:1px solid var(--wood-200);
  height:100%;display:flex;flex-direction:column}
.mk-bar,.mk-top{flex:0 0 auto}
.mk-bar{display:flex;align-items:center;gap:6px;background:var(--wood-100);padding:6px 9px;
  border-bottom:1px solid var(--wood-200)}
.mk-bar .d{width:9px;height:9px;background:var(--wood-300);display:inline-block}
.mk-bar em{flex:1;margin-left:8px;background:var(--surface);border:1px solid var(--wood-200);
  font-style:normal;font-size:11px;color:var(--muted);padding:3px 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-top{display:flex;align-items:center;gap:12px;background:var(--wood-800);
  background-image:var(--grain);background-size:cover;background-blend-mode:soft-light;
  border-bottom:2px solid var(--brass);padding:0 12px;height:38px;color:var(--on-timber-dim)}
.mk-brand{font-family:var(--serif);font-size:16px;color:var(--on-timber-bright)}
.mk-brand i{font-style:normal;color:var(--brass-lt)}
.mk-chip{background:var(--wood-900);color:var(--brass-lt);font-size:11px;font-weight:700;
  padding:3px 9px;border:1px solid var(--wood-600)}
.mk-nav{margin-left:auto;display:flex;gap:2px}
.mk-nav a{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  color:var(--on-timber-dim);padding:5px 7px;border-top:2px solid transparent}
.mk-nav a.on{background:rgba(0,0,0,.3);color:var(--on-timber-bright);border-top-color:var(--brass-lt)}
.mk-nav .bdg{background:var(--danger-bg);color:var(--danger-ink);border:1px solid var(--danger-line);
  font-size:9px;padding:0 4px;margin-left:3px}
/* positioned so a modal's scrim covers the mock page only, not the scene's
   own title strip */
.mk-page{background:var(--parch);padding:10px;flex:1;min-height:0;position:relative}

/* The mock screens are pictures of the app drawn in HTML, not sections of the
   document — a real <h3> here would put "Credit ledger" and "Biology" into the
   outline of whatever page embeds the player, which on the home page buried the
   actual headings under fifty pieces of set dressing. They are divs now; these
   classes carry the type that the heading tags used to bring with them. */
.mk-h2,.mk-h3,.mk-h4{font-family:var(--serif);color:var(--heading);
  font-weight:600;letter-spacing:-.01em}
.mk-h2{font-size:17px;margin:0 0 8px}
.mk-h3{font-size:19px;margin:.2em 0 .5em}
.mk-h4{margin:.2em 0 .5em}
.mk-sub{font-size:11.5px;color:var(--muted);margin:0 0 10px}
.mk-card{background:var(--parch-lt);padding:9px 12px;
  box-shadow:inset 0 3px 0 var(--wood-700),0 1px 0 var(--wood-200),0 3px 0 var(--wood-400)}
.mk-card .mk-h3{font-family:var(--serif);font-size:14px;color:var(--heading);margin:0 0 7px}
.mk-label{display:block;font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--label-ink);margin:8px 0 3px}
.mk-in,.mk-sel,.mk-ta{display:block;width:100%;background:var(--surface);border:1px solid var(--wood-200);
  padding:5px 8px;font-size:12px;color:var(--ink);min-height:26px}
.mk-in.ph,.mk-ta.ph{color:var(--muted)}
.mk-sel{background:var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='9' height='6'><path d='M0 0h9L4.5 6z' fill='%2387582E'/></svg>") no-repeat right 8px center}
.mk-ta{min-height:46px;line-height:1.4}
.mk-cursorbar{display:inline-block;width:1px;height:12px;background:var(--wood-700);
  vertical-align:-2px;animation:tut-blink 1s steps(1) infinite}
@keyframes tut-blink{50%{opacity:0}}

.mk-btn{display:inline-block;background:var(--wood-700);color:var(--on-timber);font-size:10.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.06em;padding:6px 11px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 var(--wood-900)}
.mk-btn.brass{background:var(--brass);color:var(--wood-900);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 #7E5A1C}
.mk-btn.ghost{background:var(--parch-dk);color:var(--accent-ink);box-shadow:inset 0 0 0 1px var(--wood-200)}
.mk-btn.danger{background:var(--danger);color:#FBEDE9;box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 2px 0 #63200F}
.mk-btn.xs{font-size:9.5px;padding:4px 8px}

.mk-badge{display:inline-block;font-size:10px;font-weight:700;padding:1px 7px;
  border:1px solid var(--wood-100);background:var(--neutral-bg);color:var(--neutral-ink)}
.mk-badge.green{background:var(--ok-bg);color:var(--ok-ink);border-color:var(--ok-line)}
.mk-badge.red{background:var(--danger-bg);color:var(--danger-ink);border-color:var(--danger-line)}
.mk-badge.warn{background:var(--warn-bg);color:var(--warn-ink);border-color:var(--warn-line)}
.mk-badge.brass{background:var(--parch-dk);color:var(--accent-ink);border-color:var(--wood-200)}

.mk-table{width:100%;border-collapse:collapse;font-size:11.5px;background:var(--parch-lt)}
.mk-table th{background:var(--wood-700);color:var(--on-timber);text-align:left;font-size:9.5px;
  text-transform:uppercase;letter-spacing:.06em;padding:4px 8px;font-weight:700}
.mk-table td{padding:4px 8px;border-top:1px solid var(--wood-100);color:var(--ink-soft)}
.mk-table tr:nth-child(even) td{background:var(--parch-dk)}
.mk-table .num{text-align:right;font-variant-numeric:tabular-nums}

.mk-cols{display:grid;gap:10px}
.mk-cols.c2{grid-template-columns:1fr 1fr}
.mk-cols.c3{grid-template-columns:repeat(3,1fr)}
.mk-cols.bank{grid-template-columns:1.25fr 1fr}

/* question bank rows */
.mk-q{background:var(--surface);border:1px solid var(--wood-100);padding:7px 9px;margin-bottom:6px;
  display:flex;gap:9px;align-items:flex-start}
.mk-q .txt{flex:1;font-size:11.5px;color:var(--ink-soft);line-height:1.35}
.mk-q .txt b{display:block;font-size:10px;color:var(--accent-ink);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:2px}
.mk-q .acts{display:flex;flex-direction:column;gap:4px;flex:0 0 auto}

/* chosen list — reorders when the container lights up (the drag) */
.mk-pick{display:flex;flex-direction:column;gap:5px}
.mk-pick .row{display:flex;align-items:center;gap:8px;background:var(--surface);
  border:1px solid var(--wood-100);padding:6px 8px;font-size:11.5px;color:var(--ink-soft);
  transition:transform .45s cubic-bezier(.4,.1,.2,1),box-shadow .25s}
.mk-pick .row .grip{color:var(--wood-300);letter-spacing:-1px}
.mk-pick .row .n{background:var(--wood-700);color:var(--on-timber);font-size:10px;font-weight:700;
  width:17px;height:17px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.mk-pick .row .mk-badge{margin-left:auto}
.mk-pick.on .row.a{transform:translateY(78px);box-shadow:0 6px 14px rgba(43,26,12,.3)}
.mk-pick.on .row.b,.mk-pick.on .row.c{transform:translateY(-39px)}

.mk-tot{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-soft);
  border-top:1px solid var(--wood-100);margin-top:8px;padding-top:7px}
.mk-tot b{font-size:15px;color:var(--heading);font-family:var(--serif)}

/* modal */
.mk-modal{position:absolute;inset:0;background:rgba(31,19,9,.55);
  display:flex;align-items:center;justify-content:center;z-index:20}
.mk-modal .box{width:470px;background:var(--parch-lt);box-shadow:var(--shadow)}
.mk-modal .hd{background:var(--wood-700);color:var(--on-timber);font-size:12px;font-weight:700;
  padding:7px 11px;display:flex;justify-content:space-between}
.mk-modal .bd{padding:12px;background:var(--surface)}
.mk-modal .ft{padding:9px 11px;display:flex;gap:7px;background:var(--parch-dk)}

/* the deliverable — a white exam sheet, deliberately not timbered */
.mk-sheet{background:#fff;border:1px solid var(--wood-200);padding:14px 18px;
  font-family:'Times New Roman',Times,serif;color:#111;box-shadow:0 4px 12px rgba(43,26,12,.18);
  position:relative;overflow:hidden}
.mk-sheet .logo{width:34px;height:34px;margin:0 auto 5px;background:var(--wood-100);
  border:1px solid var(--wood-300);display:flex;align-items:center;justify-content:center;
  font-size:14px}
.mk-sheet .mk-h4{text-align:center;margin:0 0 2px;font-size:14px;letter-spacing:.02em}
.mk-sheet .ttl{text-align:center;font-size:12px;margin:0 0 8px}
.mk-sheet .fields{display:grid;grid-template-columns:1fr 1fr;gap:3px 14px;font-size:10.5px;
  margin:8px 0}
.mk-sheet .fields i{font-style:normal;display:inline-block;border-bottom:1px solid #999;
  width:58%;margin-left:5px}
.mk-sheet .instr{font-size:10px;line-height:1.45;border-top:1px solid #ccc;margin-top:7px;
  padding-top:6px}
.mk-sheet .score{border:1px solid #333;width:74px;height:34px;margin-left:auto;
  display:flex;align-items:center;justify-content:center;font-size:9px}
.mk-sheet .wm{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:34px;font-weight:700;color:rgba(140,47,30,.17);transform:rotate(-20deg);
  letter-spacing:.1em;pointer-events:none}
.mk-sheet .foot{font-size:9.5px;text-align:center;margin-top:8px;color:#444}

/* status flash strip, as the app renders it */
.mk-flash{padding:7px 11px;font-size:11.5px;border-left:4px solid;margin-bottom:9px}
.mk-flash.ok{background:var(--ok-bg);border-color:var(--ok);color:var(--ok-ink)}
.mk-flash.info{background:var(--parch-dk);border-color:var(--wood-400);color:var(--ink)}
.mk-flash.warn{background:var(--warn-bg);border-color:var(--warn);color:var(--warn-ink)}

/* stat tiles */
.mk-stat{background:var(--wood-700);background-image:var(--grain);background-size:cover;
  background-blend-mode:soft-light;color:var(--on-timber);padding:10px 12px}
.mk-stat b{display:block;font-family:var(--serif);font-size:24px;color:var(--on-timber-bright);line-height:1.1}
.mk-stat span{font-size:9.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--brass-pale)}

/* email / notification card */
.mk-mail{background:var(--surface);border:1px solid var(--wood-200);font-size:11px;color:var(--ink-soft)}
.mk-mail .hd{background:var(--wood-050);padding:6px 10px;border-bottom:1px solid var(--wood-100);
  font-weight:700;color:var(--heading)}
.mk-mail .bd{padding:9px 10px;line-height:1.45}

/* subject tiles */
.mk-subj{background:var(--parch-lt);padding:9px 11px;
  box-shadow:inset 0 3px 0 var(--wood-700),0 1px 0 var(--wood-200),0 3px 0 var(--wood-400)}
.mk-subj .mk-h4{font-family:var(--serif);font-size:13px;margin:2px 0 3px;color:var(--heading)}
.mk-subj p{font-size:10.5px;color:var(--muted);margin:0 0 7px}

/* batch tiles for credit purchase */
.mk-batch{background:var(--surface);border:1px solid var(--wood-200);padding:9px;text-align:center}
.mk-batch b{display:block;font-family:var(--serif);font-size:19px;color:var(--heading)}
.mk-batch span{font-size:10px;color:var(--muted)}
.mk-batch.best{border-color:var(--brass);box-shadow:0 0 0 2px var(--brass-pale)}

/* ---------------- page + homepage embed ---------------- */
.tut-wrap{max-width:960px;margin:0 auto}
.tut-embed{background:var(--wood-900);background-image:var(--grain);background-size:cover;
  background-blend-mode:soft-light;padding:26px 0 34px}
.tut-embed .section-head{margin-top:0}
.tut-embed .section-head h2{color:var(--on-timber-bright)}
.tut-embed .section-head h2::before,.tut-embed .section-head h2::after{background:var(--wood-500)}
.tut-embed .section-head p{color:var(--on-timber-dim)}
.tut-note{font-size:12.5px;color:var(--muted);margin:12px 2px 0}

@media (max-width:760px){
  .tut-chapters{grid-template-columns:1fr}
  .tut-bar{flex-wrap:wrap}
  .tut-track{order:5;flex-basis:100%}
  .tut-caption{font-size:13.5px;min-height:88px}
}

@media (prefers-reduced-motion:reduce){
  .tut-scene,.tut-scene [data-beat],.tut-cursor,.mk-pick .row{transition:none}
  .tut-cursor.click::after{animation:none}
  .mk-cursorbar{animation:none}
}

@media print{.tut,.tut-embed{display:none}}