/* Panel 2 (player/modern/panel2.html): a copy of Panel to rework without
   touching the original. Its own stylesheet, pn2- prefixed, loaded after
   modern.css (which still supplies the shared .mp-* rules). Laid out by the
   card's own width (container queries on .mp--panel2), not the window's.

   Colours are the client's player colours, used the way the Classic player
   uses them: the panel is --sv-main with --sv-text on it, --sv-hover marks
   the playing step and hovers, --sv-accent is Plyr and the step bar, and
   --sv-done greys finished steps. Lines and dimmed text are mixed from
   --sv-text rather than hard-coded white, so a light brand colour with dark
   text reads just as well as a dark one. */

/* =========================================================================
   PANEL 2 — copied from Panel, to rework on its own
   ========================================================================= */
.mp-body--panel2 {
  --mp-font: 'Inter', ui-sans-serif, system-ui, sans-serif;
  --pn2-ink: #192432;
  --pn2-muted: #697585;
  --pn2-line: #dce3eb;
  --pn2-paper: #f5f7fa;
  --pn2-sky: color-mix(in srgb, var(--sv-main) 8%, #fff);
  --pn2-dark: var(--sv-main);
  --pn2-dark-2: color-mix(in srgb, var(--sv-hover) 35%, var(--sv-main));
  --pn2-dark-line: color-mix(in srgb, var(--sv-text) 14%, transparent);
  --pn2-on: var(--sv-text);
  --pn2-on-dim: color-mix(in srgb, var(--sv-text) 62%, transparent);
  --pn2-on-soft: color-mix(in srgb, var(--sv-text) 10%, transparent);
  --mp-menu-bg: #fff; --mp-menu-fg: var(--pn2-ink);
  background: var(--pn2-paper); color: var(--pn2-ink);
}
.mp--panel2 { max-width: 1280px; margin: 0 auto; padding: 32px 24px 40px; container-type: inline-size; }
.mp-body--embed .mp--panel2 { max-width: none; padding: 0; }
@media (max-width: 767px) { .mp--panel2 { padding: 14px 12px 28px; } .mp-body--embed .mp--panel2 { padding: 0; } }

.pn2-card { background: #fff; border: 1px solid var(--pn2-line); border-radius: 18px; overflow: hidden; box-shadow: 0 18px 50px -20px rgba(16,32,57,.25); }
.mp-body--embed .pn2-card { box-shadow: none; border-radius: 14px; }

/* Picture + chapters */
.pn2-grid { display: grid; grid-template-columns: minmax(0, 1fr); background: var(--pn2-dark); color: var(--pn2-on); }
.pn2-screen { min-width: 0; }
.pn2-stage { position: relative; }
.pn2-stage .mp-stage-box { --mp-r: 0; }
.pn2-3d { position: absolute; z-index: 6; right: 14px; top: 14px; display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--pn2-dark-line); background: color-mix(in srgb, var(--sv-main) 85%, transparent); color: var(--sv-text); cursor: pointer; font: inherit; font-size: 13px; font-weight: 700; backdrop-filter: blur(6px); }
.pn2-3d svg { width: 16px; height: 16px; }
.pn2-3d:hover, .pn2-3d.active { background: var(--sv-hover); }

.pn2-deck { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px 12px; min-height: 64px; padding: 8px 12px; border-top: 1px solid var(--pn2-dark-line); }
.pn2-deck__steps { display: flex; align-items: center; gap: 8px; min-width: 0; }
.pn2-deck__play { display: flex; align-items: center; gap: 10px; }
.pn2-deck__end { display: flex; justify-content: flex-end; min-width: 0; }
/* Use your voice: a pill on the right of the step bar. While listening it
   fills with the accent and its dot pulses; the label shows what was heard. */
.pn2-mic { display: inline-flex; align-items: center; gap: 7px; height: 40px; max-width: 100%; padding: 0 14px 0 12px; border-radius: 999px; border: 1px solid var(--pn2-dark-line); background: var(--pn2-on-soft); color: var(--pn2-on); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; white-space: nowrap; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.pn2-mic svg { width: 17px; height: 17px; flex: 0 0 auto; }
.pn2-mic span { overflow: hidden; text-overflow: ellipsis; }
.pn2-mic:hover { background: var(--sv-hover); color: var(--sv-text); }
.pn2-mic.is-on { background: var(--sv-accent); color: var(--sv-text); border-color: var(--sv-accent); animation: pn2-listen 1.6s ease-in-out infinite; }
@keyframes pn2-listen { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sv-accent) 55%, transparent); } 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--sv-accent) 0%, transparent); } }
@media (prefers-reduced-motion: reduce) { .pn2-mic.is-on { animation: none; } }
/* Play/Pause: the one round, filled button, so it reads as the main control.
   player_plyr.js rewrites its contents on every play/pause (a <span> label
   and an <svg> with Tailwind size classes), so it is styled from here. */
.pn2-play { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--sv-accent); color: var(--sv-text); cursor: pointer; transition: background .15s ease, transform .15s ease; }
.pn2-play:hover { background: var(--sv-hover); transform: scale(1.05); }
.pn2-play svg { width: 22px; height: 22px; }
.pn2-play span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.pn2-dbtn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; border-radius: 10px; border: 0; background: var(--pn2-on-soft); color: var(--pn2-on); cursor: pointer; font: inherit; font-size: 13px; font-weight: 650; transition: background .15s ease, color .15s ease; }
.pn2-dbtn svg { width: 18px; height: 18px; }
.pn2-dbtn:hover { background: var(--sv-hover); color: var(--sv-text); }
.pn2-deck__now { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; padding: 0 4px; }
.pn2-deck__k { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--pn2-on-dim); }
.pn2-deck__k b { color: var(--sv-accent); }
.pn2-deck__t { font-size: 15px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pn2-side { display: flex; flex-direction: column; min-width: 0; background: var(--pn2-dark); border-top: 1px solid var(--pn2-dark-line); }
.pn2-side__h { display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 16px; border-bottom: 1px solid var(--pn2-dark-line); flex: 0 0 auto; }
.pn2-side__h strong { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.pn2-side__h span { font-size: 12px; color: var(--pn2-on-dim); }
.pn2-side__body { display: flex; flex: 1 1 auto; min-width: 0; min-height: 0; }
.pn2-page { display: none; place-items: center; flex: 0 0 auto; width: 30px; border: 0; background: var(--pn2-on-soft); color: var(--pn2-on); cursor: pointer; transition: background .15s ease, opacity .15s ease; }
.pn2-page svg { width: 18px; height: 18px; }
.pn2-page:hover { background: var(--sv-hover); color: var(--sv-text); }
/* At an end the arrow stays put (the strip must not change width) but stops inviting a click. */
.pn2-page[disabled] { opacity: .3; cursor: default; background: var(--pn2-on-soft); color: var(--pn2-on); }
.pn2-list { flex: 1 1 auto; min-width: 0; display: flex; gap: 6px; padding: 8px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; }
/* No visible scrollbar, as in the Classic player's rail: the list still scrolls by wheel, touch and the auto-follow of the playing step. */
.pn2-list::-webkit-scrollbar { width: 0; height: 0; display: none; }
.pn2-row { display: grid; grid-template-columns: 26px 86px minmax(0, 1fr); align-items: center; gap: 10px; flex: 0 0 auto; width: 260px; padding: 8px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--pn2-on); cursor: pointer; font: inherit; text-align: left; scroll-snap-align: start; transition: background .15s ease, border-color .15s ease; }
.pn2-row:hover { background: var(--pn2-dark-2); }
.pn2-row.active { background: var(--sv-hover); color: var(--sv-text); box-shadow: inset 4px 0 0 var(--sv-accent); }
.pn2-row__n { width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--pn2-on-dim); display: grid; place-items: center; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.pn2-row.active .pn2-row__n { background: var(--sv-text); color: var(--sv-hover); border-color: var(--sv-text); }
.pn2-row.done .pn2-row__n { background: var(--pn2-on-soft); border-color: transparent; color: var(--sv-done); }
.pn2-row__img { width: 86px; height: 49px; border-radius: 5px; overflow: hidden; background: var(--pn2-on-soft); display: block; }
.pn2-row__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn2-row__img.is-empty { background: linear-gradient(135deg, var(--pn2-on-soft), transparent); }
.pn2-row__t { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.pn2-row__t b { font-size: 13px; line-height: 1.2; font-weight: 650; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.pn2-row__t small { font-size: 12px; color: var(--pn2-on-dim); font-variant-numeric: tabular-nums; }
.pn2-row.active .pn2-row__t small { color: inherit; opacity: .85; }
.pn2-row.done .pn2-row__t b { color: var(--sv-done); font-weight: 500; }

/* Wide card: chapters beside the picture, as tall as the picture column. */
@container (min-width: 860px) {
  .pn2-grid--list { grid-template-columns: minmax(0, 1fr) 272px; }
  /* height: 0 + min-height: 100% = exactly as tall as the picture column, so the list scrolls instead of stretching the card. */
  .pn2-side { border-top: 0; border-left: 1px solid var(--pn2-dark-line); height: 0; min-height: 100%; }
  .pn2-list { flex-direction: column; gap: 2px; overflow-x: hidden; overflow-y: auto; flex: 1 1 auto; min-height: 0; padding: 6px; scroll-snap-type: none; }
  /* The rail matches the picture column's height, so how many steps show
     depends on the card's width: at the 1280px cap the picture is ~960px
     wide and about eight of these full-size rows fit. */
  .pn2-row { width: 100%; }
}
/* Narrow card: three zones do not fit one row, so the transport takes its
   own centred row and the step controls and More share the one below. */
/* Narrow card (640px and under):
   - the step bar stays one row — step name, transport, voice — with the step
     name taking whatever the buttons leave and truncating;
   - the chapter strip loses its heading (its paging arrows show from 860px down);
   - the chapter count and running time sit beside More instead. */
/* Whenever the chapters run in a row under the picture (below the 860px
   side-by-side layout), page them with an arrow either side. */
@container (max-width: 859.98px) {
  .pn2-page { display: grid; }
}
@container (max-width: 640px) {
  .pn2-deck { grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; }
  .pn2-deck__play { gap: 6px; }
  .pn2-side__h { display: none; }
  .pn2-product .pn2-product__ch { display: inline; }
}
@container (max-width: 480px) {
  .pn2-deck { padding: 8px; gap: 8px 6px; }
  .pn2-dbtn { width: 36px; height: 36px; }
  .pn2-play { width: 42px; height: 42px; }
  .pn2-play svg { width: 20px; height: 20px; }
  .pn2-deck__k { font-size: 10px; letter-spacing: .08em; }
  .pn2-deck__t { font-size: 13.5px; }
  .pn2-mic { width: 36px; height: 36px; padding: 0; justify-content: center; }
  .pn2-mic span { display: none; }
  .pn2-row { width: 220px; grid-template-columns: 22px 64px minmax(0, 1fr); gap: 8px; }
  .pn2-row__img { width: 64px; height: 36px; }
  .pn2-row__n { width: 22px; height: 22px; font-size: 11px; }
}

/* Narrow card: three steps across the strip at any width. Each row is a third
   of the visible strip (card width less the two 30px arrows, the list padding
   and two gaps), so it stacks: frame on top, the step number as a badge on
   the frame, the name underneath. Placed after the 480px block so it wins. */
@container (max-width: 640px) {
  .pn2-row { position: relative; width: calc((100cqw - 96px) / 3); grid-template-columns: minmax(0, 1fr); align-items: start; gap: 6px; padding: 6px; }
  .pn2-row__img { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .pn2-row__n { position: absolute; z-index: 1; top: 10px; left: 10px; width: 20px; height: 20px; font-size: 10.5px; border: 0; background: color-mix(in srgb, var(--sv-main) 78%, transparent); }
  .pn2-row.done .pn2-row__n { background: color-mix(in srgb, var(--sv-main) 78%, transparent); }
  .pn2-row__t { gap: 2px; }
  .pn2-row__t b { font-size: 12px; }
  .pn2-row__t small { font-size: 11px; }
  .pn2-row.active { box-shadow: inset 0 -3px 0 var(--sv-accent); }
}

/* Info row */
.pn2-info { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); background: #fff; }
.pn2-product { display: flex; align-items: center; gap: 20px; padding: 22px 24px; min-width: 0; }
.pn2-product img { width: 132px; aspect-ratio: 16 / 10; object-fit: contain; border-radius: 10px; background: #eef2f6; flex: 0 0 auto; }
.pn2-product h2 { font-size: 22px; letter-spacing: -.03em; line-height: 1.15; margin: 0; }
.pn2-product p { margin: 6px 0 0; color: var(--pn2-muted); font-size: 14px; line-height: 1.45; }
.pn2-product__by { font-weight: 600; color: var(--pn2-muted); }
/* More: one pill-shaped button where the feature tags were. The menu and the
   share sheet open upward from it and line up with its left edge, so they stay
   inside the card (which clips overflow). The sheet's styles are here because
   Panel 2 does not load the Classic player's _theme.html. */
.pn2-more { position: relative; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 12px; }
.pn2-product > div { flex: 1 1 auto; min-width: 0; }
.pn2-product__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.pn2-product__head h2 { min-width: 0; }
.pn2-product__ch { display: none; flex: 0 0 auto; font-size: 13px; color: var(--pn2-muted); white-space: nowrap; }
.pn2-product__ch strong { color: var(--pn2-ink); font-weight: 650; }
.pn2-more .sv-menu-btn { width: auto; gap: 6px; padding: 6px 10px; border: 1px solid color-mix(in srgb, var(--sv-accent) 40%, #fff); border-radius: 6px; background: color-mix(in srgb, var(--sv-accent) 8%, #fff); color: color-mix(in srgb, var(--sv-accent) 80%, #000); font-size: 13px; font-weight: 650; transition: background .15s ease, color .15s ease; }
.pn2-more .sv-menu-btn:hover, .pn2-more .sv-menu.open .sv-menu-btn { background: var(--sv-accent); color: var(--sv-text); border-color: var(--sv-accent); }
.pn2-more .sv-menu-btn svg { width: 14px; height: 14px; }
.pn2-more .sv-menu-panel { left: 0; right: auto; }
.pn2-more .sv-menu-item:hover, .pn2-more .sv-menu-item:focus-visible { background: color-mix(in srgb, var(--sv-accent) 10%, #fff); }
.pn2-more .sv-share { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 41; width: min(340px, 86vw); padding: 12px; border-radius: 12px; background: #fff; color: var(--pn2-ink); box-shadow: 0 16px 40px -8px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.06); }
.pn2-more .sv-share[hidden] { display: none; }
.sv-share__h { display: flex; align-items: center; justify-content: space-between; font-size: 15px; font-weight: 650; margin-bottom: 10px; }
.sv-share__x { width: 30px; height: 30px; display: grid; place-items: center; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; }
.sv-share__x svg { width: 16px; height: 16px; }
.sv-share__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.sv-share__b { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border: 0; border-radius: 8px; background: var(--pn2-paper); color: inherit; font: inherit; font-size: 13px; font-weight: 500; text-decoration: none; cursor: pointer; }
.sv-share__b svg { width: 20px; height: 20px; }
.sv-share__more { width: 100%; margin-top: 8px; padding: 9px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.sv-share__x:hover, .sv-share__b:hover, .sv-share__more:hover { background: color-mix(in srgb, var(--sv-accent) 10%, #fff); color: color-mix(in srgb, var(--sv-accent) 80%, #000); }
.pn2-help { margin: 18px; background: var(--pn2-sky); border-radius: 12px; padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pn2-help b { display: block; font-size: 17px; letter-spacing: -.01em; }
.pn2-help span { display: block; color: #566779; font-size: 13px; margin-top: 4px; line-height: 1.4; }
.pn2-help a { background: var(--sv-main); color: var(--sv-text); text-decoration: none; font-weight: 700; font-size: 14px; padding: 11px 15px; border-radius: 8px; white-space: nowrap; flex: 0 0 auto; transition: background .15s ease; }
.pn2-help a:hover { background: var(--sv-hover); }
@container (max-width: 860px) {
  .pn2-info { grid-template-columns: 1fr; }
  .pn2-help { margin: 0 18px 18px; }
}
@container (max-width: 480px) {
  .pn2-product { flex-direction: column; align-items: flex-start; padding: 18px; gap: 14px; }
  .pn2-product > div { align-self: stretch; }
  .pn2-product h2 { font-size: 19px; }
  .pn2-help { flex-direction: column; align-items: stretch; padding: 16px; margin: 0 12px 12px; }
  .pn2-help a { text-align: center; }
}

.mp-body--panel2 .mp-switch { bottom: 18px; }


/* Phone-size card (420px and under — a 360 to 430px phone less the page
   gutter): the step bar drops the "1 of 22 · name" text and centres the
   transport between two equal sides; the More button moves up beside the
   product picture, with the title and the rest underneath. The text column
   becomes display: contents so its children can join the product grid. */
@container (max-width: 420px) {
  .pn2-deck { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .pn2-deck__now { display: none; }

  .pn2-product { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px 14px; }
  .pn2-product > div { display: contents; }
  .pn2-product > div > * { grid-column: 1 / -1; }
  .pn2-product > img { grid-row: 1; grid-column: 1; }
  .pn2-product .pn2-more { grid-row: 1; grid-column: 2; justify-self: start; margin-top: 0; position: static; }
  .pn2-product p { margin-top: 0; }
  /* The button now sits right of centre: the menu opens leftward from its
     right edge, and the share sheet spans the card instead of the button. */
  .pn2-more .sv-menu-panel { left: auto; right: 0; }
  .pn2-more .sv-share { left: 12px; right: 12px; width: auto; bottom: calc(100% + 8px); }
}

/* Chapter rows without a frame picture (every video but the /test/player/
   samples, until per-chapter thumbnails exist): number and name only. Kept
   last so each width's version wins; the 640px stacked one comes after the
   480px one because below 480 the rows are still stacked. */
.pn2-list--noimg .pn2-row { grid-template-columns: 26px minmax(0, 1fr); }
@container (max-width: 480px) {
  .pn2-list--noimg .pn2-row { grid-template-columns: 22px minmax(0, 1fr); }
}
@container (max-width: 640px) {
  .pn2-list--noimg .pn2-row { grid-template-columns: minmax(0, 1fr); }
  .pn2-list--noimg .pn2-row__n { position: static; }
}