@import "./vendor/settings-menu.css";
@import "./design-tokens.css";
@import "./scrollbars.css";

/* Host-rendered package interface (X011). Drawn by the page at device resolution, above the canvas. */
.jig-ui {
  --ui-accent: #6ea8ff;
  --ui-on-accent: #081226;
  --ui-glass: rgba(18, 22, 30, 0.5);
  /* A modest blur keeps the scene readable behind panels and stays cheap over a canvas redrawn every frame. */
  --ui-blur: blur(10px) saturate(140%);
  --ui-glass-edge: rgba(255, 255, 255, 0.09);
  --ui-text: #f2f4f8;
  --ui-muted: #a7b0bf;
  --ui-faint: rgba(255, 255, 255, 0.16);
  --ui-control: rgba(255, 255, 255, 0.07);
  --ui-control-hover: rgba(255, 255, 255, 0.12);
  --ui-control-press: rgba(255, 255, 255, 0.04);
  --ui-shadow: 0 18px 50px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22);
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  grid-template: "top top top" auto "leading . trailing" 1fr "bottom bottom bottom" auto "guide guide guide" auto / minmax(0, auto) 1fr minmax(0, auto);
  gap: 12px;
  /* Keep panels clear of notches, home indicators and mobile browser toolbars. */
  padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right))
    max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  color: var(--ui-text);
  font: 14px/1.45 var(--ui-font-family, system-ui, -apple-system, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", sans-serif);
  -webkit-font-smoothing: antialiased;
}
.jig-ui[data-appearance="light"] {
  --ui-glass: rgba(250, 251, 253, 0.62);
  --ui-glass-edge: rgba(15, 23, 42, 0.09);
  --ui-text: #111827;
  --ui-muted: #5b6475;
  --ui-faint: rgba(15, 23, 42, 0.16);
  --ui-control: rgba(15, 23, 42, 0.06);
  --ui-control-hover: rgba(15, 23, 42, 0.1);
  --ui-control-press: rgba(15, 23, 42, 0.14);
  --ui-shadow: 0 18px 50px rgba(15, 23, 42, 0.18), 0 2px 6px rgba(15, 23, 42, 0.08);
}
.jig-ui[hidden] { display: none; }

.jig-slot { display: flex; flex-direction: column; gap: 12px; min-width: 0; min-height: 0; }
.jig-slot[data-placement="top"] { grid-area: top; align-items: center; }
.jig-slot[data-placement="bottom"] { grid-area: bottom; align-items: center; }
.jig-slot[data-placement="leading"] { grid-area: leading; justify-content: center; }
.jig-slot[data-placement="trailing"] { grid-area: trailing; justify-content: center; }

.jig-panel {
  pointer-events: auto;
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  max-height: 100%;
  background: var(--ui-glass);
  -webkit-backdrop-filter: var(--ui-blur);
  backdrop-filter: var(--ui-blur);
  border: 1px solid var(--ui-glass-edge);
  border-radius: var(--jig-radius-2xl);
  box-shadow: var(--ui-shadow);
}
.jig-slot[data-placement="top"] .jig-panel,
.jig-slot[data-placement="bottom"] .jig-panel { width: min(100%, 720px); }
.jig-slot[data-placement="leading"] .jig-panel,
.jig-slot[data-placement="trailing"] .jig-panel { width: 280px; }
.jig-panel-body { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; overflow: auto; min-height: 0; }
.jig-panel-toggle {
  display: none; place-items: center; position: absolute; top: 2px; right: 2px; z-index: 1; width: 44px; height: 44px;
  border: 0; border-radius: var(--jig-radius-md); background: none; color: var(--ui-muted); cursor: pointer;
}
.jig-panel-toggle svg { width: 16px; height: 16px; transform: rotate(-90deg); transition: transform 160ms ease; }
.jig-panel[data-collapsed="true"] .jig-panel-toggle svg { transform: rotate(90deg); }
/* Bottom panels can shrink to their first line on any screen, so they need not cover the scene. */
.jig-slot[data-placement="bottom"] .jig-panel-toggle { display: grid; }
.jig-slot[data-placement="bottom"] .jig-panel[data-collapsed="true"] .jig-panel-body > :not(:first-child) { display: none; }
.jig-slot[data-placement="bottom"] .jig-panel-body > :first-child { padding-right: 36px; }
.jig-slot[data-placement="bottom"] .jig-panel[data-collapsed="true"] { cursor: pointer; }

/* Text */
.jig-text { margin: 0; overflow-wrap: anywhere; }
.jig-text[data-style="title"] { font-size: 19px; line-height: 1.25; font-weight: 650; letter-spacing: -0.012em; }
.jig-text[data-style="heading"] { font-size: 15px; line-height: 1.3; font-weight: 600; }
.jig-text[data-style="body"] { color: var(--ui-muted); max-width: 64ch; }
.jig-text[data-style="caption"] { font-size: 12.5px; color: var(--ui-muted); }
.jig-text[data-style="eyebrow"] { font-size: 12px; font-weight: 600; color: var(--ui-accent); letter-spacing: 0.01em; }
.jig-text:empty { display: none; }

/* Layout */
.jig-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.jig-column { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.jig-spacer { flex: 1 1 0; min-width: 4px; min-height: 2px; }
.jig-column > .jig-spacer, .jig-panel-body > .jig-spacer { flex: 0 0 6px; }
.jig-divider { align-self: stretch; border: 0; margin: 2px 0; height: 1px; background: var(--ui-glass-edge); }
.jig-row > .jig-divider { width: 1px; height: auto; min-height: 20px; margin: 0 2px; }

/* Buttons */
.jig-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--jig-radius-lg);
  border: 1px solid var(--ui-glass-edge);
  background: var(--ui-control);
  color: var(--ui-text);
  font: inherit;
  font-size: 13.5px;
  font-weight: 550;
  cursor: pointer;
  user-select: none;
  transition: background-color 120ms ease, border-color 120ms ease, transform 80ms ease, opacity 120ms ease;
}
.jig-button svg { width: 15px; height: 15px; flex: none; }
.jig-button:hover { background: var(--ui-control-hover); }
.jig-button:active { background: var(--ui-control-press); transform: scale(0.97); }
.jig-button[data-style="primary"] { background: var(--ui-accent); border-color: transparent; color: var(--ui-on-accent); }
.jig-button[data-style="primary"]:hover { filter: brightness(1.08); }
.jig-button[data-style="primary"]:active { filter: brightness(0.92); }
.jig-button[data-style="plain"] { background: transparent; border-color: transparent; }
.jig-button[data-style="plain"]:hover { background: var(--ui-control); }
.jig-button[aria-pressed="true"]:not([data-style="primary"]) {
  border-color: color-mix(in srgb, var(--ui-accent) 70%, transparent);
  background: color-mix(in srgb, var(--ui-accent) 18%, transparent);
  color: var(--ui-text);
}
.jig-button[aria-pressed="true"][data-style="primary"] { box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); }
.jig-button:disabled { opacity: 0.38; cursor: default; transform: none; filter: none; }

/* Toggle */
.jig-toggle {
  appearance: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--ui-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.jig-row > .jig-toggle { width: auto; }
.jig-switch { position: relative; flex: none; width: 36px; height: 22px; border-radius: var(--jig-radius-pill); background: var(--ui-faint); transition: background-color 140ms ease; }
.jig-switch::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: var(--jig-radius-circle);
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); transition: transform 140ms ease;
}
.jig-toggle[aria-checked="true"] .jig-switch { background: var(--ui-accent); }
.jig-toggle[aria-checked="true"] .jig-switch::after { transform: translateX(14px); }
.jig-toggle:hover .jig-switch { filter: brightness(1.12); }
.jig-toggle:disabled { opacity: 0.38; cursor: default; }

/* Slider */
.jig-slider { display: flex; flex-direction: column; gap: 6px; }
.jig-row > .jig-slider { flex: 1 1 200px; min-width: 160px; }
.jig-slider-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }
.jig-slider-value { color: var(--ui-muted); font-variant-numeric: tabular-nums; }
.jig-slider input {
  --fill: 50%;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 20px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.jig-slider input::-webkit-slider-runnable-track {
  height: 4px; border-radius: var(--jig-radius-pill);
  background: linear-gradient(to right, var(--ui-accent) var(--fill), var(--ui-faint) var(--fill));
}
.jig-slider input::-moz-range-track { height: 4px; border-radius: var(--jig-radius-pill); background: var(--ui-faint); }
.jig-slider input::-moz-range-progress { height: 4px; border-radius: var(--jig-radius-pill); background: var(--ui-accent); }
.jig-slider input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 18px; height: 18px; margin-top: -7px; border-radius: var(--jig-radius-circle);
  background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: transform 100ms ease;
}
.jig-slider input::-moz-range-thumb { width: 18px; height: 18px; border-radius: var(--jig-radius-circle); background: #fff; border: 0; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
.jig-slider input:hover::-webkit-slider-thumb { transform: scale(1.1); }
.jig-slider input:active::-webkit-slider-thumb { transform: scale(1.18); }
.jig-slider[data-disabled="true"] { opacity: 0.38; }
.jig-slider input:disabled { cursor: default; }

/* Progress */
.jig-progress { display: flex; flex-direction: column; gap: 6px; }
.jig-row > .jig-progress { flex: 1 1 160px; min-width: 120px; }
.jig-progress-head { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ui-muted); }
.jig-progress-head span:last-child { font-variant-numeric: tabular-nums; }
.jig-progress-track { height: 4px; border-radius: var(--jig-radius-pill); background: var(--ui-faint); overflow: hidden; }
.jig-progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--ui-accent); }

/* Steps: the chapter indicator is the one expressive control; the current dot stretches into a bar. */
.jig-steps { display: flex; align-items: center; gap: 2px; }
.jig-step {
  appearance: none; display: grid; place-items: center; width: 22px; height: 26px; padding: 0;
  border: 0; border-radius: var(--jig-radius-md); background: none; cursor: pointer;
}
.jig-step::before {
  content: ""; width: 7px; height: 7px; border-radius: var(--jig-radius-circle); background: var(--ui-faint);
  transition: width 180ms ease, background-color 180ms ease;
}
.jig-step[data-visited="true"]::before { background: color-mix(in srgb, var(--ui-text) 55%, transparent); }
.jig-step[aria-current="step"] { width: 34px; }
.jig-step[aria-current="step"]::before { width: 22px; border-radius: var(--jig-radius-pill); background: var(--ui-accent); }
.jig-step:hover::before { background: color-mix(in srgb, var(--ui-accent) 70%, var(--ui-text)); }
.jig-steps-count { margin-left: 6px; font-size: 12.5px; color: var(--ui-muted); font-variant-numeric: tabular-nums; }

/* Guide console (X012): a stepped experience's panel with its one contextual action above it. */
.jig-guide-dock { grid-area: guide; display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.jig-guide-dock[hidden], .jig-guide-action[hidden], .jig-guide [hidden] { display: none !important; }
/* Only the visible action captures input; empty row space belongs to the scene. */
.jig-guide-action { pointer-events: none; display: flex; justify-content: flex-end; width: min(100%, 620px); min-width: 0; }
.jig-guide-action > * { pointer-events: auto; }
.jig-guide { width: min(100%, 620px); box-sizing: border-box; padding: 26px 20px 10px; border-radius: var(--jig-radius-2xl); }
.jig-guide:has(.jig-guide-progress[hidden]) { padding-top: 18px; }
.jig-guide-progress { position: absolute; top: 12px; left: 22px; right: 22px; height: 4px; border-radius: var(--jig-radius-pill); overflow: hidden; background: var(--ui-control); transition: opacity 300ms ease; }
.jig-guide-progress-fill {
  position: absolute; inset: 0; transform-origin: left center; transform: scaleX(0); border-radius: inherit;
  background: linear-gradient(90deg, color-mix(in srgb, var(--ui-text) 22%, transparent), color-mix(in srgb, var(--ui-text) 44%, transparent));
}
.jig-guide-progress[data-complete="true"] { opacity: 0.55; }
/* A scrubbable step: play/pause, scrub track and speed in one row level with the collapse chevron,
   the play glyph lined up with the step text. Coarse pointers get 44px targets. */
.jig-guide-transport { position: absolute; top: 6px; left: 12px; right: 44px; z-index: 1; display: flex; align-items: center; gap: 4px; height: 32px; }
.jig-guide.jig-guide[data-transport="true"] { padding-top: 44px; }
@media (pointer: coarse) {
  .jig-guide-transport { top: 0; left: 6px; height: 44px; gap: 0; }
  .jig-guide.jig-guide[data-transport="true"] { padding-top: 48px; }
}
.jig-guide-heading { display: flex; align-items: center; gap: 10px; min-width: 0; }
.jig-guide-alert { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--jig-radius-circle);
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 14%, transparent); }
.jig-guide-alert svg { width: 17px; height: 17px; }
.jig-guide[data-status="error"] .jig-guide-title { font-size: 16px; font-weight: 600; color: color-mix(in srgb, var(--ui-text) 80%, var(--ui-muted)); }
.jig-guide-enter { animation: jig-guide-enter 320ms ease; }
@keyframes jig-guide-enter { from { opacity: 0.35; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.jig-guide-title { margin: 0; font-size: 20px; line-height: 1.25; font-weight: 650; letter-spacing: -0.012em; overflow-wrap: anywhere; }
.jig-guide-body { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: color-mix(in srgb, var(--ui-text) 78%, var(--ui-muted)); overflow-wrap: anywhere; }
.jig-guide-note {
  display: flex; gap: 9px; align-items: flex-start; margin: 10px 0 0; padding: 9px 11px; border-radius: var(--jig-radius-lg);
  font-size: 13px; line-height: 1.45; color: var(--ui-muted); background: color-mix(in srgb, var(--ui-accent) 8%, transparent);
}
.jig-guide-glyph { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: -1px; border-radius: var(--jig-radius-circle);
  color: var(--ui-accent); background: color-mix(in srgb, var(--ui-accent) 16%, transparent); }
.jig-guide-glyph svg { width: 13px; height: 13px; }
/* The narration button on the left; the ‹ dots › stepper stays centred on the card while there is room. */
.jig-guide-nav { display: grid; grid-template-columns: 1fr minmax(0, max-content) 1fr; align-items: center; gap: 8px; margin-top: 12px; }
/* With the narration button, matching side columns keep the stepper centred at every width. */
.jig-guide-nav:has(> .jig-guide-audio:not([hidden])) { grid-template-columns: 28px minmax(0, 1fr) 28px; }
.jig-guide-stepper { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 10px; min-width: 0; }
.jig-guide-audio { grid-column: 1; justify-self: start; display: flex; align-items: center; gap: 2px; margin-left: -6px; }
.jig-guide-audio[hidden] { display: none; }
.jig-guide-audio-button {
  appearance: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--jig-radius-circle);
  background: transparent; color: var(--ui-muted); cursor: pointer; transition: background-color 120ms ease, color 120ms ease, transform 80ms ease, opacity 120ms ease;
}
.jig-guide-audio-button svg { width: 17px; height: 17px; }
.jig-guide-audio-button:hover { background: var(--ui-control); color: var(--ui-text); }
.jig-guide-audio-button:active { transform: scale(0.92); }
.jig-guide-audio-button:disabled { opacity: 0.28; cursor: default; background: transparent; transform: none; }
.jig-guide-audio-button[aria-pressed="true"] { color: var(--ui-text); }
/* A single-step guide hides only the stepper; the row goes when narration is absent too. */
.jig-guide-nav:has(> .jig-guide-stepper[hidden]):has(> .jig-guide-audio[hidden]) { display: none; }
.jig-guide-arrow {
  appearance: none; display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 0; border-radius: var(--jig-radius-circle);
  background: transparent; color: var(--ui-text); cursor: pointer; transition: background-color 120ms ease, transform 80ms ease, opacity 120ms ease;
}
.jig-guide-arrow svg { width: 17px; height: 17px; }
.jig-guide-arrow:hover { background: var(--ui-control); }
.jig-guide-arrow:active { transform: scale(0.92); }
.jig-guide-arrow:disabled { opacity: 0.28; cursor: default; background: transparent; transform: none; }
.jig-guide-crumbs { display: flex; align-items: center; flex: 0 1 200px; width: 200px; min-width: 48px; max-width: 100%; height: 26px; overflow: hidden; }
.jig-guide-crumbs[data-overflow="true"] {
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 22px, #000 calc(100% - 22px), transparent 100%);
}
.jig-guide-track { display: flex; align-items: center; gap: 8px; flex: none; transition: transform 350ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.jig-guide-dot {
  appearance: none; position: relative; flex: none; width: 7px; height: 7px; padding: 0; border: 0; border-radius: var(--jig-radius-circle);
  background: var(--ui-faint); cursor: pointer; transition: width 250ms ease, background-color 250ms ease;
}
.jig-guide-dot::before { content: ""; position: absolute; inset: -9px -4px; }
.jig-guide-dot[data-visited="true"] { background: color-mix(in srgb, var(--ui-text) 45%, transparent); }
.jig-guide-dot[aria-current="step"] { width: 22px; border-radius: var(--jig-radius-pill); background: var(--ui-accent); }
.jig-guide-dot:hover:not([aria-current="step"]) { background: color-mix(in srgb, var(--ui-text) 65%, transparent); }

/* Minimise: hides the step text, keeping the progress bar, ‹ dots › and the action above. */
.jig-guide-min {
  appearance: none; position: absolute; top: 4px; right: 6px; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px;
  padding: 0; border: 0; border-radius: var(--jig-radius-circle); background: transparent; color: var(--ui-muted); cursor: pointer;
}
.jig-guide-min:hover { background: var(--ui-control); color: var(--ui-text); }
.jig-guide-min svg { width: 17px; height: 17px; transform: rotate(-90deg); transition: transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.jig-guide[data-minimized="true"] .jig-guide-min svg { transform: rotate(90deg); }
.jig-guide .jig-guide-progress { right: 52px; }
.jig-guide-heading { padding-right: 28px; }
/* The step text folds by animating its grid row between 1fr and 0fr, so the card resizes smoothly both ways.
   Its overflow is clipped only while folded or folding, leaving edit overlays unclipped when open. */
.jig-guide { transition: padding 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.jig-guide-content { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 300ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 240ms ease; }
.jig-guide-content > div { min-height: 0; }
.jig-guide:is([data-minimized="true"], [data-folding="true"]) .jig-guide-content > div { overflow: hidden; }
.jig-guide-nav { transition: margin 300ms cubic-bezier(0.2, 0.8, 0.2, 1), padding 300ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.jig-guide[data-minimized="true"] { padding-top: 22px; padding-bottom: 6px; }
.jig-guide[data-minimized="true"] .jig-guide-content { grid-template-rows: 0fr; opacity: 0; }
.jig-guide[data-minimized="true"] .jig-guide-nav { margin-top: 2px; padding-right: 20px; }
/* A scrubbable step hides the bar too, but keeps its padding: the transport row sits there above ‹ dots ›. */
.jig-guide[data-minimized="true"]:not([data-transport="true"]):has(.jig-guide-progress[hidden]) { padding-top: 8px; }

/* Action: a solid accent pill for a button; a small glass capsule for a switch, slider or choice. */
.jig-guide-pill {
  appearance: none; position: relative; display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 20px 0 16px;
  border: 0; border-radius: var(--jig-radius-pill); background: var(--ui-accent); color: var(--ui-on-accent); font: inherit; font-size: 15px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--ui-accent) 45%, transparent), 0 2px 6px rgba(15, 23, 42, 0.15);
  transition: transform 150ms ease, filter 150ms ease, opacity 150ms ease;
}
.jig-guide-pill svg { width: 16px; height: 16px; }
.jig-guide-pill:hover { transform: translateY(-1px); filter: brightness(1.05); }
.jig-guide-pill:active { transform: scale(0.96); }
.jig-guide-pill:disabled { opacity: 0.45; cursor: default; transform: none; filter: none; }
.jig-guide-pill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; animation: jig-ping 2.8s ease-out infinite; }
.jig-guide-pill[data-pressed="true"]::after, .jig-guide-pill[data-busy="true"]::after, .jig-guide-pill:disabled::after { animation: none; }
.jig-guide-pill[data-busy="true"] { filter: saturate(0.8) brightness(0.97); }
@keyframes jig-ping {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ui-accent) 50%, transparent); }
  70%, 100% { box-shadow: 0 0 0 12px transparent; }
}
.jig-guide-capsule {
  position: relative; display: inline-flex; align-items: center; height: 42px; box-sizing: border-box; max-width: 100%;
  border-radius: var(--jig-radius-pill); border: 1px solid var(--ui-glass-edge); background: var(--ui-glass); color: var(--ui-text);
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.14), 0 1px 4px rgba(15, 23, 42, 0.08);
}
.jig-guide-toggle { padding: 0 8px 0 18px; }
.jig-guide-toggle .jig-toggle { width: auto; gap: 14px; padding: 0; font-size: 14px; font-weight: 600; }
.jig-guide-toggle .jig-switch { width: 44px; height: 26px; border-radius: var(--jig-radius-pill); }
.jig-guide-toggle .jig-switch::after { top: 3px; left: 3px; width: 20px; height: 20px; }
.jig-guide-toggle .jig-toggle[aria-checked="true"] .jig-switch::after { transform: translateX(18px); }
.jig-guide-slider { width: 260px; padding: 0 16px 0 18px; }
.jig-guide-capsule .jig-slider.jig-guide-slider { flex-direction: row; align-items: center; gap: 12px; width: 100%; padding: 0; }
.jig-guide-slider .jig-slider-head { flex: none; font-size: 14px; font-weight: 600; color: var(--ui-text); }
.jig-guide-slider .jig-slider-value { display: none; }
.jig-guide-slider input { flex: 1; min-width: 0; height: 28px; }
.jig-guide-slider input::-webkit-slider-runnable-track { height: 6px; border-radius: var(--jig-radius-pill); }
.jig-guide-slider input::-moz-range-track, .jig-guide-slider input::-moz-range-progress { height: 6px; border-radius: var(--jig-radius-pill); }
.jig-guide-slider input::-webkit-slider-thumb { width: 22px; height: 22px; margin-top: -8px; box-shadow: 0 0 0 2px var(--ui-accent), 0 2px 8px rgba(15, 23, 42, 0.25); }
.jig-guide-slider input::-moz-range-thumb { width: 22px; height: 22px; box-shadow: 0 0 0 2px var(--ui-accent), 0 2px 8px rgba(15, 23, 42, 0.25); }
.jig-guide-choice { min-width: 0; overflow: hidden; }
/* The choice row scrolls sideways when its options outgrow the capsule; each edge fades only
   while it hides more options. */
@property --jig-fade-start { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --jig-fade-end { syntax: "<length>"; inherits: false; initial-value: 0px; }
.jig-guide-choice-scroll {
  --jig-fade-start: 0px; --jig-fade-end: 0px;
  position: relative; display: flex; align-items: center; flex: 1 1 auto; min-width: 0; height: 100%; box-sizing: border-box; padding: 4px;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--jig-fade-start), #000 calc(100% - var(--jig-fade-end)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--jig-fade-start), #000 calc(100% - var(--jig-fade-end)), transparent 100%);
  transition: --jig-fade-start 200ms ease, --jig-fade-end 200ms ease;
}
.jig-guide-choice-scroll::-webkit-scrollbar { display: none; }
.jig-guide-choice-scroll[data-fade-start="true"] { --jig-fade-start: 36px; }
.jig-guide-choice-scroll[data-fade-end="true"] { --jig-fade-end: 36px; }
.jig-guide-segment { flex: none; }
.jig-guide-highlight {
  position: absolute; top: 4px; bottom: 4px; left: 0; border-radius: var(--jig-radius-pill); background: var(--ui-accent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ui-accent) 45%, transparent);
  transition: transform 280ms cubic-bezier(0.3, 0.7, 0.3, 1), width 280ms ease;
}
.jig-guide-segment {
  appearance: none; position: relative; z-index: 1; height: 100%; padding: 0 16px; border: 0; border-radius: var(--jig-radius-pill); background: transparent;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ui-muted); cursor: pointer; white-space: nowrap; transition: color 200ms ease;
}
.jig-guide-segment[aria-checked="true"] { color: var(--ui-on-accent); }
.jig-guide-segment:hover:not([aria-checked="true"]) { color: var(--ui-text); }
.jig-guide-segment:disabled { opacity: 0.45; cursor: default; }

/* Settings: a cog in the top trailing corner opening a small menu. */
.jig-settings { position: absolute; z-index: 3; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right)); pointer-events: auto; }
.jig-settings[hidden] { display: none; }
.jig-settings-menu, .jig-settings-submenu {
  -webkit-backdrop-filter: var(--ui-blur); backdrop-filter: var(--ui-blur);
}
.jig-settings-submenu { min-width: min(180px, calc(100vw - 156px)); }
/* The phone settings sheet uses the site's light sheet palette rather than the player's glass. */
.jig-settings-sheet { --ui-text: #082c5c; --ui-muted: #2d5b8c; --ui-glass-edge: rgba(8, 44, 92, 0.14); color: var(--ui-text); }

@media (prefers-reduced-motion: reduce) {
  .jig-guide-pill::after { animation: none; }
}

.jig-ui :focus-visible { outline: 2px solid var(--ui-accent); outline-offset: 2px; }
.jig-ui .jig-step:focus-visible { outline-offset: -1px; }

@media (prefers-reduced-motion: reduce) {
  .jig-ui *, .jig-ui *::before, .jig-ui *::after { transition: none !important; }
}

/* Narrow screens: every panel docks to the bottom as a full-width sheet that can be collapsed. */
@media (max-width: 640px) {
  .jig-ui {
    grid-template: "top" auto "." 1fr "leading" auto "trailing" auto "bottom" auto "guide" auto / 1fr;
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
      max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .jig-slot[data-placement] { align-items: stretch; }
  .jig-slot .jig-panel { width: 100% !important; border-radius: var(--jig-radius-xl); }
  .jig-panel-body { padding: 12px 14px; max-height: 48vh; max-height: 48dvh; }
  .jig-slot .jig-panel-toggle { display: grid; }
  .jig-slot .jig-panel[data-collapsed="true"] .jig-panel-body > :not(:first-child) { display: none; }
  .jig-slot .jig-panel-body > :first-child { padding-right: 36px; }
  /* A collapsed sheet opens from anywhere on its remaining line, not only the chevron. */
  .jig-slot .jig-panel[data-collapsed="true"] { cursor: pointer; }
  .jig-row > .jig-slider { min-width: 0; }
  .jig-guide-dock { gap: 10px; }
  .jig-guide, .jig-guide-action { width: 100%; }
  .jig-guide { padding: 24px 16px 8px; border-radius: var(--jig-radius-2xl); }
  .jig-guide-title { font-size: 18px; }
  .jig-guide-body { font-size: 14.5px; }
  /* Keep the track usable even when an authored label needs multiple lines. */
  .jig-guide-capsule.jig-guide-slider { width: 100%; height: auto; padding: 8px 16px; border-radius: var(--jig-radius-xl); }
  .jig-guide-capsule .jig-slider.jig-guide-slider { flex-direction: column; align-items: stretch; gap: 2px; min-width: 0; }
  .jig-guide-slider .jig-slider-head { min-width: 0; overflow-wrap: anywhere; }
  .jig-guide-slider input { flex: none; height: 32px; }
  .jig-guide-crumbs { width: 180px; flex-basis: 180px; }
  .jig-guide-transport { left: 8px; }
}
@media (max-width: 640px) and (pointer: coarse) {
  .jig-guide-transport { left: 2px; }
}

/* Recovery stays above the guide even when the embed hides the developer drawer. */
#playback-error:not([hidden]) {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: grid;
  place-items: center;
  padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right))
    max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  background: rgba(8, 44, 92, .3);
  --control-hover-brightness: .96;
  --control-pressed-brightness: .92;
  --ui-accent: #2f6fde;
  --ui-glass-edge: rgba(8, 44, 92, .16);
}
.jig-playback-recovery {
  max-width: 320px;
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  color: #082c5c;
  text-align: center;
  font: 15px/1.5 var(--ui-font-family, system-ui, sans-serif);
  box-shadow: 0 12px 40px rgba(8, 44, 92, .2);
}
.jig-playback-recovery h2 { margin: 0; font-size: 20px; }
.jig-playback-recovery p { margin: 8px 0 20px; }