/* Catalyst8 theme for the step-by-step player (the P3 engine's common/stepper.css), in the skill's colour.
   Loaded by each video page with <html data-skill="N">; every rule starts with html[data-skill] so it wins over
   stepper.css, which the engine injects later. Never shown in a render (?render=1 has no step player). */
/* Catalyst8: one colour per skill, shared by the site (site.css) and the step player (player.css).
   Each page sets <html data-skill="1".."8"> (the hub uses "hub"). --c main · --c-t tint · --c-d darker (button step). */
/* one colour per skill (light) */
[data-skill="hub"] { --c: #E8407A; --c-t: #FCE4EE; --c-d: #B32A5C; }
[data-skill="1"] { --c: #6547BD; --c-t: #EEE8FB; --c-d: #47308F; }   /* Observation: violet */
[data-skill="2"] { --c: #0E7C78; --c-t: #DDF2F0; --c-d: #0A5B58; }   /* Comparing: teal */
[data-skill="3"] { --c: #2E7A4E; --c-t: #E1F2E7; --c-d: #1F5A38; }   /* Specimen drawing: leaf green */
[data-skill="4"] { --c: #1F6C9E; --c-t: #E0EEF8; --c-d: #154E74; }   /* Measuring: blue */
[data-skill="5"] { --c: #B26A00; --c-t: #FDF0CC; --c-d: #855000; }   /* Calculating: amber */
[data-skill="6"] { --c: #C2402F; --c-t: #FCE4E0; --c-d: #932E21; }   /* Variables: coral red */
[data-skill="7"] { --c: #B3306A; --c-t: #FBE3EC; --c-d: #86224F; }   /* Communicating: rose */
[data-skill="8"] { --c: #3D4A9E; --c-t: #E5E8F8; --c-d: #2B3576; }   /* Graphs: indigo */

/* dark: lighter skill colours */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  &[data-skill="hub"] { --c: #F27CA8; --c-t: rgba(242,124,168,.15); --c-d: #F27CA8; }
  &[data-skill="1"] { --c: #B9A4F6; --c-t: rgba(185,164,246,.14); --c-d: #B9A4F6; }
  &[data-skill="2"] { --c: #6FD6CE; --c-t: rgba(111,214,206,.14); --c-d: #6FD6CE; }
  &[data-skill="3"] { --c: #72D19A; --c-t: rgba(114,209,154,.14); --c-d: #72D19A; }
  &[data-skill="4"] { --c: #82C3EC; --c-t: rgba(130,195,236,.14); --c-d: #82C3EC; }
  &[data-skill="5"] { --c: #F5C84B; --c-t: rgba(245,200,75,.13); --c-d: #F5C84B; }
  &[data-skill="6"] { --c: #F68D80; --c-t: rgba(246,141,128,.14); --c-d: #F68D80; }
  &[data-skill="7"] { --c: #F27CA8; --c-t: rgba(242,124,168,.14); --c-d: #F27CA8; }
  &[data-skill="8"] { --c: #A3AEF5; --c-t: rgba(163,174,245,.14); --c-d: #A3AEF5; }
} }
:root[data-theme="dark"] {
  &[data-skill="hub"] { --c: #F27CA8; --c-t: rgba(242,124,168,.15); --c-d: #F27CA8; }
  &[data-skill="1"] { --c: #B9A4F6; --c-t: rgba(185,164,246,.14); --c-d: #B9A4F6; }
  &[data-skill="2"] { --c: #6FD6CE; --c-t: rgba(111,214,206,.14); --c-d: #6FD6CE; }
  &[data-skill="3"] { --c: #72D19A; --c-t: rgba(114,209,154,.14); --c-d: #72D19A; }
  &[data-skill="4"] { --c: #82C3EC; --c-t: rgba(130,195,236,.14); --c-d: #82C3EC; }
  &[data-skill="5"] { --c: #F5C84B; --c-t: rgba(245,200,75,.13); --c-d: #F5C84B; }
  &[data-skill="6"] { --c: #F68D80; --c-t: rgba(246,141,128,.14); --c-d: #F68D80; }
  &[data-skill="7"] { --c: #F27CA8; --c-t: rgba(242,124,168,.14); --c-d: #F27CA8; }
  &[data-skill="8"] { --c: #A3AEF5; --c-t: rgba(163,174,245,.14); --c-d: #A3AEF5; }
}


/* worksheet levels: the same colours as the Catalyst8 worksheets (_build/c8style.py LEVELS) */
.tier-f { --t: #C0392B; --t-d: #A93226; --t-t: #FDEDEC; }   /* Foundation: red */
.tier-c { --t: #D68910; --t-d: #B9770C; --t-t: #FDF3E3; }   /* Core: amber */
.tier-e { --t: #27865B; --t-d: #1E6B49; --t-t: #E8F5EE; }   /* Extension: green */
/* Catalyst8 loading animation: the flask with its liquid rippling and bubbles rising inside, and "Loading…".
   Used by every page (site.css) and by the step players (player.css). The element is made by site.ts / player.ts.
   It fades in only after .3 s, so quick page changes never flash it; it fades out at once. */
.c8-loading { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--paper, #F7F6FB) 72%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: opacity .2s ease 0s; }
.c8-loading.on { opacity: 1; pointer-events: auto; transition: opacity .3s ease .3s; }
.c8-loading .ld-card { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 30px 18px; border-radius: 26px;
  background: var(--surface, #fff); border: 1px solid var(--line, #E2E0EC); box-shadow: 0 30px 54px -26px rgba(40, 30, 80, .5); }
.c8-loading svg { width: 84px; height: 84px; overflow: visible; }
.c8-loading .ld-txt { font: 800 18px "Baloo 2", "Arial Rounded MT Bold", "Segoe UI", sans-serif; letter-spacing: .04em; color: var(--ink, #1E1B2E); }
.c8-loading .ld-txt::after { content: ""; display: inline-block; width: 1.2em; text-align: left; animation: ld-dots 1.2s steps(4) infinite; }
.c8-loading .ld-wave { animation: ld-wave 1.4s linear infinite; }
.c8-loading .ld-fill { animation: ld-fill 2.8s ease-in-out infinite alternate; }
.c8-loading .ld-b { transform-box: fill-box; transform-origin: center; animation: ld-rise 1.6s ease-in infinite; opacity: 0; }
.c8-loading .ld-b:nth-of-type(2) { animation-delay: .55s; }
.c8-loading .ld-b:nth-of-type(3) { animation-delay: 1.1s; }
.c8-loading .ld-spark { transform-box: fill-box; transform-origin: center; animation: ld-spark 1.6s ease-in-out infinite; }
@keyframes ld-wave { to { transform: translateX(-16px); } }
@keyframes ld-fill { from { transform: translateY(2px); } to { transform: translateY(-3px); } }
@keyframes ld-rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { transform: translateY(-24px) scale(1.1); opacity: 0; } }
@keyframes ld-spark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .6; } 50% { transform: scale(1.15) rotate(45deg); opacity: 1; } }
@keyframes ld-dots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }
@media (prefers-reduced-motion: reduce) { .c8-loading * { animation: none !important; } .c8-loading .ld-b { opacity: .8; } }
html[data-skill] {
  --ink: #1E1B2E; --ink-2: #4C4762; --paper: #F7F6FB; --surface: #FFFFFF; --track: #DFE2EA; --on-c: #FFFFFF; --btn-sh: #D6D9E2;
  --display: "Baloo 2", "Arial Rounded MT Bold", "Segoe UI Black", sans-serif;
  --body: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
}

/* dark mode: follows the device, or the site's saved choice (player.js copies it to <html data-theme>). The video
   picture itself stays as rendered; only the player around it changes. */
@media (prefers-color-scheme: dark) { html[data-skill]:not([data-theme="light"]) {
  --ink: #F3F1FA; --ink-2: #CFCAE0; --paper: #15131F; --surface: #232033; --track: #36324A; --on-c: #15131F; --btn-sh: #0C0B12; } }
html[data-skill][data-theme="dark"] {
  --ink: #F3F1FA; --ink-2: #CFCAE0; --paper: #15131F; --surface: #232033; --track: #36324A; --on-c: #15131F; --btn-sh: #0C0B12; }
html[data-skill] body.pv-steps { background: var(--paper) radial-gradient(60% 40% at 50% 0%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%);
  font-family: var(--body); color: var(--ink); }
html[data-skill] body.pv-steps #pv-stage { border-radius: 0 0 18px 18px; box-shadow: 0 10px 30px -18px color-mix(in srgb, var(--c) 70%, #000); }

/* Start */
html[data-skill] #pv-start { background: color-mix(in srgb, var(--paper) 55%, transparent); }
html[data-skill] #pv-go { background: var(--c); color: var(--on-c); font-family: var(--display); font-weight: 800; letter-spacing: .01em;
  box-shadow: 0 5px 0 var(--c-d), 0 14px 30px -10px color-mix(in srgb, var(--c) 70%, transparent); }
html[data-skill] #pv-go:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--c-d); }
html[data-skill] #pv-start .pv-hint { color: var(--ink); background: var(--surface); font-family: var(--body); }

/* progress */
html[data-skill] #pv-bar .seg i { background: color-mix(in srgb, var(--c) 18%, var(--track)); }
html[data-skill] #pv-bar .seg b { background: var(--c); }
html[data-skill] #pv-bar .seg.cur i { box-shadow: 0 0 0 2px var(--paper), 0 0 0 3.5px var(--c); }

/* info row: back button · scene title · step count */
html[data-skill] #pv-info { align-items: center; }
html[data-skill] #pv-scene { font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--ink); flex: 1; }
html[data-skill] #pv-count { color: var(--ink-2); font-family: var(--body); }
html[data-skill] .pv-home { display: inline-flex; align-items: center; gap: 4px; flex: none; min-height: 36px; padding: 0 14px 0 8px;
  border-radius: 999px; border: 2px solid color-mix(in srgb, var(--c) 40%, transparent); background: var(--c-t); color: var(--c);
  font: 700 14px var(--body); text-decoration: none; white-space: nowrap; box-shadow: 0 2px 0 color-mix(in srgb, var(--c) 30%, transparent); }
html[data-skill] .pv-home svg { width: 18px; height: 18px; transition: transform .2s; }
@media (hover: hover) { html[data-skill] .pv-home:hover { background: var(--c); color: var(--on-c); border-color: var(--c); } }
@media (hover: hover) { html[data-skill] .pv-home:hover svg { transform: translateX(-3px); } }
html[data-skill] .pv-home:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

html[data-skill] .pv-tier { flex: none; padding: 5px 12px 4px; border-radius: 999px; background: var(--t); color: #fff; box-shadow: 0 2px 0 var(--t-d);
  font: 800 13px var(--display); letter-spacing: .06em; text-transform: uppercase; transform: rotate(-3deg); }
html[data-skill] body.pv-side .pv-tier { display: none; }

/* buttons */
html[data-skill] #pv-btns button { font-family: var(--body); font-weight: 700; border-radius: 16px; color: var(--ink); background: var(--surface);
  box-shadow: 0 3px 0 color-mix(in srgb, var(--c) 22%, var(--btn-sh)); }
html[data-skill] #pv-btns button svg { color: var(--c); }
html[data-skill] #pv-btns button .ms { color: var(--ink-2); }
html[data-skill] #pv-btns button.pri { background: var(--c); color: var(--on-c); box-shadow: 0 4px 0 color-mix(in srgb, var(--c-d) 70%, #000); }
html[data-skill] #pv-btns button.pri svg, html[data-skill] #pv-btns button.pri .ms { color: var(--on-c); }
html[data-skill] #pv-btns button:not(:disabled):active { transform: translateY(2px); }
@media (hover: hover) {
  @media (hover: hover) { html[data-skill] #pv-btns button:not(:disabled):hover { background: var(--c-t); } }
  @media (hover: hover) { html[data-skill] #pv-btns button.pri:not(:disabled):hover { background: color-mix(in srgb, var(--c) 82%, var(--ink)); } }
}
html[data-skill] #pv-btns button:focus-visible, html[data-skill] #pv-go:focus-visible { outline-color: var(--c); }
html[data-skill] #pv-turn svg { color: var(--c); }
html[data-skill] #pv-turn { color: var(--ink-2); }
/* phone held upright: the title gets its own line under the back button and level badge (up to 2 lines) */
@media (max-width: 620px) {
  html[data-skill] #pv-info { flex-wrap: wrap; row-gap: 6px; }
  html[data-skill] #pv-scene { order: 3; flex-basis: 100%; white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 17px; line-height: 1.15; min-height: 2.3em; }   /* always 2 lines tall, so the layout never jumps between steps */
  html[data-skill] #pv-count { margin-left: auto; }
}
html[data-skill] body.pv-side .pv-home .lbl { display: none; }       /* landscape phone: the back button shows just its arrow */
html[data-skill] body.pv-side .pv-home { padding: 0 8px; }
/* the scrub bar (?scrub) in the skill colour too */
html[data-skill] #ui button { background: var(--c); }
html[data-skill] #ui input[type=range] { accent-color: var(--c); }

/* the sound is still downloading: the Catalyst8 loading animation shows (player.ts), so not stepper.css's "· loading sound…" */
html[data-skill] #pv-steps[data-loading="1"] .pv-hint::after { content: none; }

/* iPhone in Safari (player.ts): Safari shrinks its address bar only when the page itself is scrolled. So the page gets
   blank space below the player, the player stays pinned at the top (sticky), and when a swipe ends the page settles in
   the direction of the swipe (player.ts): up to the end, where the bar stays shrunk, or down to the top. The page
   does the scrolling, not body: base.css fixes html and body to the screen with overflow hidden and stepper.css then
   scrolls body, which Safari's bar ignores (and which would stop sticky). */
html.c8-roll { height: auto; overflow: visible; overflow-x: clip; }
html.c8-roll body.pv-steps { height: auto; overflow: visible; min-height: calc(100lvh + 160px); }
html.c8-roll #pv-steps { position: sticky; top: 0; }
  padding: 9px 16px 9px 12px; border-radius: 999px; background: var(--c); color: var(--on-c); box-shadow: 0 14px 30px -12px rgba(40, 30, 80, .55);