/* ZiehOrgel UI. Phone first and laid out like a native iOS app: a large page
   title that folds into a slim translucent bar while scrolling, inset grouped
   lists, a tab bar at the bottom, the system font. Content leads and controls
   stay quiet; targets are 44 px (36 px for dense secondary controls), the play
   button 56 px. Red marks the one main action per view and "running / where
   you are", green only means "done". Every value lives in the tokens below;
   components refer to token names only. */

/* ── Tokens ──────────────────────────────── */

:root {
  color-scheme: light;

  /* spacing, 4 px grid */
  --space-25: 1px;
  --space-50: 2px;
  --space-100: 4px;
  --space-150: 6px;
  --space-200: 8px;
  --space-300: 12px;
  --space-400: 16px;
  --space-500: 24px;
  --space-600: 32px;
  --space-700: 40px;
  --space-800: 48px;
  --space-900: 64px;
  --space-1000: 80px;
  --space-text-to-control: var(--space-300);
  --space-text-to-visual: var(--space-300);
  --space-edge-to-text: var(--space-400);
  --space-section: var(--space-600);
  --space-page-x: var(--space-400);

  /* sizes */
  --size-tap: 44px;
  --size-control: 36px;
  --size-control-s: 32px;
  --size-control-l: 48px;
  --size-play: 56px;
  --size-icon: 20px;
  --size-icon-l: 24px;
  --size-icon-xl: 28px;
  --size-icon-s: 16px;
  --size-icon-xs: 12px;
  --size-check: 24px;
  --size-badge: 24px;
  --size-status: 28px;
  --size-avatar: 32px;
  --size-bar: 44px;
  --size-tabbar: 52px;
  --size-page: 1200px;
  --size-page-narrow: 760px;
  --size-page-form: 520px;
  --size-thumb-w: 64px;
  --size-thumb-h: 36px;
  --size-resume-media: 112px;
  --size-seek: 32px;
  --size-track: 4px;
  --size-knob: 16px;
  --size-hairline: 1px;

  --radius-s: 6px;
  --radius-m: 10px;
  --radius-seg: 8px;
  --radius-l: 14px;
  --radius-full: 999px;
  --border-width: 1px;
  --border-width-strong: 2px;
  --focus-width: 3px;

  /* type by role; the system face makes it feel native on every device */
  --font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-family-code: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --font-heading-xl: 700 30px/1.15 var(--font-family-display);
  --font-heading: 700 20px/1.25 var(--font-family-display);
  --font-title: 600 17px/1.3 var(--font-family);
  --font-title-s: 600 15px/1.3 var(--font-family);
  --font-body: 400 17px/1.45 var(--font-family);
  --font-body-s: 400 15px/1.45 var(--font-family);
  --font-detail: 400 13px/1.35 var(--font-family);
  --font-detail-strong: 600 13px/1.35 var(--font-family);
  --font-ui: 600 15px/1.2 var(--font-family);
  --font-ui-regular: 400 15px/1.2 var(--font-family);
  --font-ui-s: 500 14px/1.2 var(--font-family);
  --font-ui-l: 600 17px/1.2 var(--font-family);
  --font-nav: 400 17px/1.2 var(--font-family);
  --font-caption: 600 10px/1.2 var(--font-family);
  --font-index: 600 11px/1.15 var(--font-family);
  --font-display: 700 48px/1 var(--font-family-display);
  --font-code: 600 13px/1.4 var(--font-family-code);
  --tracking-tight: -.01em;

  /* colour: semantic */
  --color-accent: #b3261e;
  --color-accent-hover: #9d211a;
  --color-accent-pressed: #861c16;
  --color-accent-subtle: #fbecea;
  --color-accent-content: #ad241d;
  --color-on-accent: #ffffff;

  --color-neutral: #ebe9e5;
  --color-neutral-hover: #e2dfda;
  --color-neutral-pressed: #d8d4ce;
  --color-neutral-strong: #1d1c1a;
  --color-neutral-strong-hover: #3a3835;
  --color-on-neutral-strong: #ffffff;

  --color-positive: #1f7a38;
  --color-positive-hover: #1a6830;
  --color-positive-subtle: #e4f3e7;
  --color-positive-content: #1d7034;

  --color-negative: #c4271f;
  --color-negative-hover: #a8211a;
  --color-negative-subtle: #fdebe9;
  --color-negative-content: #b0231c;

  --color-informative: #1f63b8;
  --color-informative-subtle: #e8f0fb;
  --color-informative-content: #1b58a3;

  --color-notice: #8a5a00;
  --color-notice-subtle: #fbf1dc;
  --color-notice-content: #6e4800;

  /* colour: text */
  --text-heading: #1b1a18;
  --text-body: #2b2926;
  --text-detail: #6b6862;
  --text-disabled: #aeaaa3;

  /* colour: surfaces in layers */
  --surface-base: #f2f1ee;
  --surface-layer-1: #ffffff;
  --surface-layer-2: #f7f6f4;
  --surface-elevated: #ffffff;
  --surface-selected: #ffffff;
  --surface-sheet: #ffffff;
  --surface-media: #000000;
  --surface-bar: rgba(249, 248, 246, .84);
  --surface-bar-solid: #f9f8f6;
  --bar-filter: saturate(180%) blur(20px);

  --border-subtle: #e4e2de;
  --border-control: #8d8981;
  --color-focus: #1a66d2;

  --scrim: rgba(20, 18, 16, .45);
  --overlay-media: rgba(0, 0, 0, .55);
  --overlay-media-strong: rgba(0, 0, 0, .78);
  --on-media: #ffffff;
  --media-scrim: rgba(0, 0, 0, .32);
  --media-shade: rgba(0, 0, 0, .6);
  --media-track: rgba(255, 255, 255, .32);
  --media-loop: rgba(255, 255, 255, .3);
  --media-loop-off: rgba(255, 255, 255, .14);
  --media-hover: rgba(255, 255, 255, .14);
  --loop-range: rgba(179, 38, 30, .22);
  --loop-range-off: rgba(107, 104, 98, .18);
  --tap-zone: rgba(27, 26, 24, .06);
  --tap-zone-text: rgba(27, 26, 24, .5);
  --nav-ghost: rgba(27, 26, 24, .08);
  --nav-ghost-hover: rgba(27, 26, 24, .16);

  /* elevation: three steps */
  --shadow-raised: 0 1px 2px rgba(27, 26, 24, .12), 0 0 0 .5px rgba(27, 26, 24, .04);
  --shadow-floating: 0 12px 32px rgba(27, 26, 24, .18), 0 2px 6px rgba(27, 26, 24, .08);
  --shadow-dragging: 0 2px 6px rgba(27, 26, 24, .3);

  --duration-fast: 120ms;
  --duration-medium: 220ms;
  --ease-out: cubic-bezier(.2, .8, .2, 1);

  /* line icons as masks; colour comes from currentColor */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --icon-repeat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 2l4 4-4 4'/%3E%3Cpath d='M3 11v-1a4 4 0 0 1 4-4h14'/%3E%3Cpath d='M7 22l-4-4 4-4'/%3E%3Cpath d='M21 13v1a4 4 0 0 1-4 4H3'/%3E%3C/svg%3E");
  --icon-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --color-accent: #c8322b;
    --color-accent-hover: #d6433b;
    --color-accent-pressed: #b02a24;
    --color-accent-subtle: #3a1d1b;
    --color-accent-content: #ff8a80;
    --color-on-accent: #ffffff;
    --color-neutral: #2e2d2a;
    --color-neutral-hover: #383633;
    --color-neutral-pressed: #43413d;
    --color-neutral-strong: #f2f1ee;
    --color-neutral-strong-hover: #ffffff;
    --color-on-neutral-strong: #1b1a18;
    --color-positive: #24813d;
    --color-positive-hover: #2b9147;
    --color-positive-subtle: #1a2c1f;
    --color-positive-content: #7fd493;
    --color-negative: #cf3a31;
    --color-negative-hover: #dc4a41;
    --color-negative-subtle: #3a1d1a;
    --color-negative-content: #ff9a90;
    --color-informative: #4c8fe0;
    --color-informative-subtle: #18263a;
    --color-informative-content: #9cc4f5;
    --color-notice: #c9921f;
    --color-notice-subtle: #33280f;
    --color-notice-content: #f0cd85;
    --text-heading: #f5f4f2;
    --text-body: #e6e4e0;
    --text-detail: #a29e97;
    --text-disabled: #605d58;
    --surface-base: #0e0d0c;
    --surface-layer-1: #1c1b1a;
    --surface-layer-2: #242321;
    --surface-elevated: #2a2927;
    --surface-selected: #5a5753;
    --surface-sheet: #ffffff;
    --surface-bar: rgba(22, 21, 20, .82);
    --surface-bar-solid: #161514;
    --border-subtle: #33312e;
    --border-control: #85827b;
    --color-focus: #7fb0ff;
    --scrim: rgba(0, 0, 0, .6);
    --loop-range: rgba(255, 138, 128, .26);
    --loop-range-off: rgba(162, 158, 151, .22);
    --tap-zone: rgba(255, 255, 255, .06);
    --tap-zone-text: rgba(255, 255, 255, .55);
    --nav-ghost: rgba(255, 255, 255, .08);
    --nav-ghost-hover: rgba(255, 255, 255, .16);
    --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5);
    --shadow-floating: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
    --shadow-dragging: 0 2px 6px rgba(0, 0, 0, .6);
  }
}

/* Same dark set when the page is switched explicitly */
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-accent: #c8322b;
  --color-accent-hover: #d6433b;
  --color-accent-pressed: #b02a24;
  --color-accent-subtle: #3a1d1b;
  --color-accent-content: #ff8a80;
  --color-on-accent: #ffffff;
  --color-neutral: #2e2d2a;
  --color-neutral-hover: #383633;
  --color-neutral-pressed: #43413d;
  --color-neutral-strong: #f2f1ee;
  --color-neutral-strong-hover: #ffffff;
  --color-on-neutral-strong: #1b1a18;
  --color-positive: #24813d;
  --color-positive-hover: #2b9147;
  --color-positive-subtle: #1a2c1f;
  --color-positive-content: #7fd493;
  --color-negative: #cf3a31;
  --color-negative-hover: #dc4a41;
  --color-negative-subtle: #3a1d1a;
  --color-negative-content: #ff9a90;
  --color-informative: #4c8fe0;
  --color-informative-subtle: #18263a;
  --color-informative-content: #9cc4f5;
  --color-notice: #c9921f;
  --color-notice-subtle: #33280f;
  --color-notice-content: #f0cd85;
  --text-heading: #f5f4f2;
  --text-body: #e6e4e0;
  --text-detail: #a29e97;
  --text-disabled: #605d58;
  --surface-base: #0e0d0c;
  --surface-layer-1: #1c1b1a;
  --surface-layer-2: #242321;
  --surface-elevated: #2a2927;
  --surface-selected: #5a5753;
  --surface-sheet: #ffffff;
  --surface-bar: rgba(22, 21, 20, .82);
  --surface-bar-solid: #161514;
  --border-subtle: #33312e;
  --border-control: #85827b;
  --color-focus: #7fb0ff;
  --scrim: rgba(0, 0, 0, .6);
  --loop-range: rgba(255, 138, 128, .26);
  --loop-range-off: rgba(162, 158, 151, .22);
  --tap-zone: rgba(255, 255, 255, .06);
  --tap-zone-text: rgba(255, 255, 255, .55);
  --nav-ghost: rgba(255, 255, 255, .08);
  --nav-ghost-hover: rgba(255, 255, 255, .16);
  --shadow-raised: 0 1px 2px rgba(0, 0, 0, .5);
  --shadow-floating: 0 12px 32px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .4);
  --shadow-dragging: 0 2px 6px rgba(0, 0, 0, .6);
}

/* Wider screens: a little more air and a taller bar, same roles */
@media (min-width: 600px) {
  :root {
    --font-heading-xl: 700 34px/1.12 var(--font-family-display);
    --font-heading: 700 22px/1.25 var(--font-family-display);
    --space-section: var(--space-700);
    --space-page-x: var(--space-600);
    --size-bar: 56px;
    --size-thumb-w: 96px;
    --size-thumb-h: 54px;
    --size-resume-media: 208px;
  }
}

/* ── Base ────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body {
  font: var(--font-body); background: var(--surface-base); color: var(--text-body); min-height: 100vh; min-height: 100dvh;
  overflow-x: hidden; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-variant-numeric: tabular-nums;
}
h1, h2, h3 { color: var(--text-heading); letter-spacing: var(--tracking-tight); }
a { color: inherit; text-underline-offset: 3px; }
button, input, select { font: inherit; color: inherit; }
button { -webkit-user-select: none; user-select: none; }
ol, ul { list-style: none; }
img, video, svg { display: block; max-width: 100%; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-50); border-radius: var(--radius-s); }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.meta { font: var(--font-detail); color: var(--text-detail); }
.eyebrow { font: var(--font-detail-strong); color: var(--text-detail); }
.icon { width: var(--size-icon); height: var(--size-icon); flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-s { width: var(--size-icon-s); height: var(--size-icon-s); }
.icon-l { width: var(--size-icon-l); height: var(--size-icon-l); }
.icon-fill { fill: currentColor; stroke: none; }
video.wach { position: fixed; width: 2px; height: 2px; left: -10px; bottom: 0; opacity: 0; pointer-events: none; }
kbd { font: var(--font-code); padding: 0 var(--space-150); border-radius: var(--radius-s); background: var(--surface-layer-2); border: var(--border-width) solid var(--border-subtle); }

/* ── Buttons ─────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-150);
  min-height: var(--size-control); padding: 0 var(--space-400); border: 0; border-radius: var(--radius-m);
  background: var(--color-neutral); color: var(--text-heading);
  font: var(--font-ui); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color var(--duration-fast), color var(--duration-fast), transform var(--duration-fast);
}
.btn:hover { background: var(--color-neutral-hover); }
.btn:active { background: var(--color-neutral-pressed); }
.btn:disabled, .btn[aria-disabled="true"] { color: var(--text-disabled); background: var(--color-neutral); cursor: default; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-hover); }
.btn-primary:active { background: var(--color-accent-pressed); }
.btn-strong { background: var(--color-neutral-strong); color: var(--color-on-neutral-strong); }
.btn-strong:hover { background: var(--color-neutral-strong-hover); }
.btn-negative { background: var(--color-negative); color: var(--color-on-accent); }
.btn-negative:hover { background: var(--color-negative-hover); }
.btn-quiet { background: transparent; color: var(--text-detail); }
.btn-quiet:hover { background: var(--color-neutral); color: var(--text-heading); }
.btn-quiet-negative { background: transparent; color: var(--color-negative-content); }
.btn-quiet-negative:hover { background: var(--color-negative-subtle); }
.btn-lg { min-height: var(--size-tap); padding: 0 var(--space-500); }
.btn-xl { min-height: var(--size-control-l); padding: 0 var(--space-500); border-radius: var(--radius-l); font: var(--font-ui-l); }
.btn-icon { width: var(--size-control); padding: 0; }
.btn-lg.btn-icon { width: var(--size-tap); }
.btn-on-media { background: var(--overlay-media); color: var(--on-media); }
.btn-on-media:hover { background: var(--overlay-media-strong); }
.btn-block { width: 100%; }
.btn-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.btn-link {
  display: inline-flex; align-items: center; min-height: var(--size-control); padding: 0; border: 0; background: none;
  font: var(--font-ui); color: var(--color-accent-content); cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }

/* ── Navigation bar and tab bar ──────────── */

.top {
  position: sticky; top: 0; z-index: 40; padding-top: env(safe-area-inset-top);
  background: var(--surface-bar); -webkit-backdrop-filter: var(--bar-filter); backdrop-filter: var(--bar-filter);
  box-shadow: 0 var(--size-hairline) 0 transparent; transition: box-shadow var(--duration-medium);
}
.top.is-scrolled { box-shadow: 0 var(--size-hairline) 0 var(--border-subtle); }
.top-inner {
  height: var(--size-bar); max-width: var(--size-page); margin: 0 auto; padding: 0 var(--space-200) 0 var(--space-page-x);
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: var(--space-300);
}
.brand { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-200); font: var(--font-title); color: var(--text-heading); text-decoration: none; min-height: var(--size-tap); }
.brand img { width: var(--size-icon-l); height: var(--size-icon-l); }
.top-title {
  grid-column: 2; max-width: 52vw; font: var(--font-title); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(var(--space-100)); transition: opacity var(--duration-medium), transform var(--duration-medium) var(--ease-out);
}
.top.is-scrolled .top-title { opacity: 1; transform: none; }
.top-nav { display: none; }

.account { grid-column: 3; justify-self: end; position: relative; }
.account summary {
  list-style: none; cursor: pointer; min-height: var(--size-tap); min-width: var(--size-tap); padding: 0;
  display: flex; align-items: center; justify-content: center; gap: var(--space-200); border-radius: var(--radius-full); font: var(--font-ui-regular); color: var(--text-body);
}
.account summary::-webkit-details-marker { display: none; }
.account-name { display: none; }
.avatar {
  width: var(--size-avatar); height: var(--size-avatar); flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--color-accent-subtle); color: var(--color-accent-content); font: var(--font-ui); text-transform: uppercase;
}
.menu {
  position: absolute; right: 0; top: calc(100% + var(--space-100)); z-index: 50; width: min(288px, calc(100vw - var(--space-600))); padding: var(--space-150);
  background: var(--surface-elevated); border-radius: var(--radius-l); box-shadow: var(--shadow-floating);
  transform-origin: top right; animation: zo-pop var(--duration-medium) var(--ease-out);
}
.menu-head { padding: var(--space-200) var(--space-300) var(--space-300); border-bottom: var(--border-width) solid var(--border-subtle); margin-bottom: var(--space-150); }
.menu form { display: contents; }
.menu .menu-item { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; }
.menu a, .menu .menu-item { display: flex; align-items: center; gap: var(--space-300); min-height: var(--size-tap); padding: 0 var(--space-300); border-radius: var(--radius-m); text-decoration: none; font: var(--font-ui-regular); color: var(--text-body); }
.menu a:hover, .menu .menu-item:hover { background: var(--color-neutral); }
.menu .icon { color: var(--text-detail); }
.menu .seg .icon { color: inherit; }
.menu-section { display: flex; flex-direction: column; gap: var(--space-200); padding: var(--space-100) var(--space-300) var(--space-300); margin-bottom: var(--space-150); border-bottom: var(--border-width) solid var(--border-subtle); }
.menu .menu-negative, .menu .menu-negative .icon { color: var(--color-negative-content); }
@keyframes zo-pop { from { opacity: 0; transform: scale(.96); } }

.tabbar {
  display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; padding-bottom: env(safe-area-inset-bottom);
  background: var(--surface-bar); -webkit-backdrop-filter: var(--bar-filter); backdrop-filter: var(--bar-filter);
  box-shadow: 0 calc(-1 * var(--size-hairline)) 0 var(--border-subtle);
}
.tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-50);
  height: var(--size-tabbar); font: var(--font-caption); color: var(--text-detail); text-decoration: none;
}
.tabbar .icon { width: var(--size-icon-l); height: var(--size-icon-l); }
.tabbar a.is-active { color: var(--color-accent-content); }
.tabbar a.is-active .icon { stroke-width: 2.4; }
body:not(.is-player):not(.is-notes) main { padding-bottom: calc(var(--size-tabbar) + env(safe-area-inset-bottom)); }

/* ── Page frame ──────────────────────────── */

.page { max-width: var(--size-page); margin: 0 auto; padding: var(--space-200) var(--space-page-x) var(--space-800); }
.page-narrow { max-width: var(--size-page-narrow); }
.page-form { max-width: var(--size-page-form); }
.page-head { display: flex; flex-direction: column; gap: var(--space-50); margin-bottom: var(--space-400); }
.page-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-400); flex-wrap: wrap; }
h1 { font: var(--font-heading-xl); }
h2 { font: var(--font-heading); }

/* Back link: inside the navigation bar on a phone, above the title on wider screens */
.back {
  display: inline-flex; align-items: center; gap: var(--space-50); min-height: var(--size-control); margin-left: calc(-1 * var(--space-150)); padding: 0 var(--space-200) 0 0;
  border-radius: var(--radius-m); font: var(--font-nav); color: var(--color-accent-content); text-decoration: none; align-self: flex-start; max-width: 100%;
}
.back .icon { width: var(--size-icon-l); height: var(--size-icon-l); stroke-width: 2.4; }
.back [data-back-label] { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.back:hover { background: var(--color-neutral); }
.lead { font: var(--font-body-s); color: var(--text-body); white-space: pre-line; max-width: 64ch; }
.lead.is-clamped { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.lead-wrap { margin-top: var(--space-500); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-200); margin-top: var(--space-400); }
.page-head + .actions { margin-top: 0; }
.actions-row { display: contents; }
.lesson-nav { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-300); margin-top: var(--space-section); }
.lesson-link { display: flex; align-items: center; gap: var(--space-200); padding: var(--space-300) var(--space-400); text-decoration: none; color: var(--text-detail); min-height: var(--size-tap); }
.lesson-link:hover { background: var(--surface-layer-2); }
.lesson-link > span { display: flex; flex-direction: column; gap: var(--space-50); min-width: 0; }
.lesson-link-title { font: var(--font-title-s); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lesson-link-next { justify-content: flex-end; text-align: right; grid-column: 2; }

/* progress */
.bar { height: var(--size-track); border-radius: var(--radius-full); background: var(--color-neutral); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: inherit; background: var(--color-positive); transition: width var(--duration-medium) var(--ease-out); }
.bar-s { width: var(--space-800); flex: none; }
.progress-line { display: flex; align-items: center; gap: var(--space-300); margin-top: var(--space-200); }
.progress-line .bar { flex: 1; max-width: 240px; }

/* ── Cards and sections ──────────────────── */

.card { background: var(--surface-layer-1); border-radius: var(--radius-l); padding: var(--space-edge-to-text); }
.card-flush { padding: 0; overflow: clip; }
.card-title { font: var(--font-title); color: var(--text-heading); }
.section { margin-top: var(--space-section); }
.section-tight { margin-top: var(--space-300); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-400); margin-bottom: var(--space-200); }
.section-head a { font: var(--font-nav); color: var(--color-accent-content); text-decoration: none; min-height: var(--size-control); display: inline-flex; align-items: center; }
.section-head a:hover { text-decoration: underline; }

/* ── List rows (inset grouped) ───────────── */

.list { --row-inset: var(--space-edge-to-text); }
.list:has(.row-num), .list:has(.avatar) { --row-inset: calc(var(--space-edge-to-text) + var(--size-status) + var(--space-300)); }
.list > li { position: relative; }
.list > li + li::before {
  content: ""; position: absolute; z-index: 1; top: 0; left: var(--row-inset); right: 0; height: var(--size-hairline); background: var(--border-subtle); pointer-events: none;
}
.row {
  display: flex; align-items: center; gap: var(--space-300); min-height: var(--size-tap);
  padding: var(--space-200) var(--space-edge-to-text); text-decoration: none; color: var(--text-body);
  transition: background-color var(--duration-fast);
}
a.row:hover { background: var(--surface-layer-2); }
a.row:active { background: var(--color-neutral); }
.row-num {
  position: relative; flex: none; width: var(--size-status); height: var(--size-status); border-radius: 50%;
  display: grid; place-items: center; background: var(--color-neutral); color: var(--text-detail);
  font: var(--font-detail-strong); font-variant-numeric: tabular-nums;
}
.row-thumb { flex: none; width: var(--size-thumb-w); height: var(--size-thumb-h); border-radius: var(--radius-s); object-fit: cover; background: var(--color-neutral); }
.row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--space-25); }
.row-title { flex: 1; min-width: 0; color: var(--text-heading); font: var(--font-body); line-height: 1.3; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-body .row-title { flex: none; }
.row-meta { flex: none; font: var(--font-detail); color: var(--text-detail); font-variant-numeric: tabular-nums; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-200); }
.row-chevron { flex: none; width: var(--size-icon-s); height: var(--size-icon-s); color: var(--text-disabled); stroke-width: 2.4; }

.is-current .row-num, .is-here .row-num { background: var(--color-accent); color: var(--color-on-accent); }
.is-current .row-title, .is-here .row-title { font-weight: 600; }
.is-current .row-meta { color: var(--color-accent-content); font-weight: 600; }
.is-here .row { background: var(--color-accent-subtle); }
.is-done .row-num { background: var(--color-positive-subtle); color: transparent; }
.is-done .row-num::after {
  content: ""; position: absolute; inset: 0; background: var(--color-positive-content);
  -webkit-mask: var(--icon-check) center / var(--size-icon-s) no-repeat; mask: var(--icon-check) center / var(--size-icon-s) no-repeat;
}
.is-done .row-meta { color: var(--color-positive-content); }
.is-done.is-here .row-num { background: var(--color-positive); }
.is-done.is-here .row-num::after { background: var(--color-on-accent); }

.row-wrap { display: flex; align-items: center; }
.row-wrap .row { flex: 1; min-width: 0; padding-right: var(--space-200); }
.row-notes { flex: none; margin-right: var(--space-200); color: var(--text-detail); width: var(--size-tap); height: var(--size-tap); padding: 0; }
.row-notes-text { display: none; }
.row-preview {
  flex: none; width: var(--size-control); height: var(--size-control); margin-right: var(--space-300); padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; background: var(--color-neutral); color: var(--text-heading); cursor: pointer;
  transition: background-color var(--duration-fast), transform var(--duration-fast);
}
.row-preview:hover { background: var(--color-neutral-hover); }
.row-preview:active { transform: scale(.92); }
.row-preview .icon { width: var(--size-icon-s); height: var(--size-icon-s); margin-left: var(--space-50); }

/* "Reinhören": the original in a window, step through the list without closing it */
.dialog.preview { padding: 0; width: min(640px, calc(100% - var(--space-600))); overflow: hidden; }
.preview-media { background: var(--surface-media); }
.preview-video { width: 100%; aspect-ratio: 16 / 9; background: var(--surface-media); }
.preview-body { padding: var(--space-400) var(--space-400) calc(var(--space-400) + env(safe-area-inset-bottom)); }
.preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-300); }
.preview-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-50); }
.preview-head h2 { font: var(--font-heading); overflow-wrap: anywhere; }
.preview-close { margin: calc(-1 * var(--space-100)) calc(-1 * var(--space-200)) 0 0; }
.preview-foot { display: flex; align-items: center; gap: var(--space-200); margin-top: var(--space-400); }
.preview-go { flex: 1; }

/* letter sections of the song list */
.letter-group + .letter-group { margin-top: var(--space-400); }
.letter { font: var(--font-detail-strong); color: var(--text-detail); padding: 0 var(--space-edge-to-text) var(--space-150); scroll-margin-top: calc(var(--size-bar) + env(safe-area-inset-top) + var(--space-1000) + var(--space-600)); }

/* badges */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-100); min-height: var(--size-badge); padding: 0 var(--space-200); border-radius: var(--radius-full);
  font: var(--font-detail-strong); background: var(--color-neutral); color: var(--text-detail); white-space: nowrap;
}
.badge-positive { background: var(--color-positive-subtle); color: var(--color-positive-content); }
.badge-accent { background: var(--color-accent-subtle); color: var(--color-accent-content); }
.badge-notice { background: var(--color-notice-subtle); color: var(--color-notice-content); }
.badge-informative { background: var(--color-informative-subtle); color: var(--color-informative-content); }
.badge .icon { width: var(--size-icon-xs); height: var(--size-icon-xs); stroke-width: 3; }

/* empty states */
.empty { padding: var(--space-600) var(--space-edge-to-text); display: flex; flex-direction: column; align-items: center; gap: var(--space-300); text-align: center; color: var(--text-detail); font: var(--font-body-s); }
.empty-icon { width: var(--size-tap); height: var(--size-tap); border-radius: 50%; display: grid; place-items: center; background: var(--color-neutral); color: var(--text-detail); }
.empty p { max-width: 36ch; }

/* inline notices */
.notice { display: flex; align-items: flex-start; gap: var(--space-200); padding: var(--space-300); border-radius: var(--radius-m); font: var(--font-body-s); }
.notice .icon { margin-top: var(--space-50); }
.notice-negative { background: var(--color-negative-subtle); color: var(--color-negative-content); }
.notice-positive { background: var(--color-positive-subtle); color: var(--color-positive-content); }
.notice-informative { background: var(--color-informative-subtle); color: var(--color-informative-content); }

/* ── Start page ──────────────────────────── */

.home { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); align-items: start; }
.home-main { display: flex; flex-direction: column; gap: var(--space-section); }

/* "Weiterüben": one tappable card like "Up next" in a podcast app */
.resume {
  display: grid; grid-template-columns: var(--size-resume-media) minmax(0, 1fr) auto; align-items: center; gap: var(--space-300);
  padding: var(--space-300); text-decoration: none; color: inherit; transition: background-color var(--duration-fast);
}
.resume:hover { background: var(--surface-layer-2); }
.resume:active { background: var(--color-neutral); }
.still {
  position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-m);
  background: var(--surface-media) center / cover no-repeat;
}
.still-progress { position: absolute; left: 0; right: 0; bottom: 0; height: var(--size-track); background: var(--overlay-media); }
.still-progress span { display: block; height: 100%; background: var(--color-accent); }
.lesson-tile {
  aspect-ratio: 16 / 9; border-radius: var(--radius-m); display: grid; place-items: center; align-content: center; gap: var(--space-25);
  background: var(--color-accent-subtle); color: var(--color-accent-content);
}
.lesson-tile-num { font: var(--font-heading-xl); }
.resume-info { display: flex; flex-direction: column; gap: var(--space-25); min-width: 0; }
.resume-title { font: var(--font-title); color: var(--text-heading); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.resume-go {
  width: var(--size-tap); height: var(--size-tap); border-radius: 50%; display: grid; place-items: center; flex: none;
  background: var(--color-accent); color: var(--color-on-accent); transition: background-color var(--duration-fast);
}
.resume:hover .resume-go { background: var(--color-accent-hover); }
.resume-go svg { width: var(--size-icon); height: var(--size-icon); margin-left: var(--space-50); }
.kurs-summary { display: flex; flex-direction: column; gap: var(--space-200); padding: var(--space-300) var(--space-edge-to-text); border-bottom: var(--border-width) solid var(--border-subtle); }
.kurs-summary-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-300); }
.kurs-pct { font: var(--font-title); color: var(--text-heading); font-variant-numeric: tabular-nums; }

/* ── Search, chips, letter index ─────────── */

.search {
  position: sticky; top: calc(var(--size-bar) + env(safe-area-inset-top)); z-index: 5; background: var(--surface-base);
  margin: 0 calc(-1 * var(--space-page-x)) var(--space-300); padding: var(--space-100) var(--space-page-x) var(--space-200);
}
.search + .section, .search + .section-tight { margin-top: var(--space-200); }
.search-field { position: relative; display: flex; align-items: center; }
.search-field > .icon { position: absolute; left: var(--space-300); width: var(--size-icon-s); height: var(--size-icon-s); color: var(--text-detail); pointer-events: none; }
.search-field .field { min-height: var(--size-control); padding-left: var(--size-control); padding-right: var(--space-700); border: 0; background: var(--color-neutral); border-radius: var(--radius-m); }
.search-field .field:focus { outline-offset: 0; }
.search-clear { position: absolute; right: 0; color: var(--text-detail); }
.search-clear:hover { background: transparent; }
.search-field input::-webkit-search-cancel-button { display: none; }
.field, .form-input {
  width: 100%; min-height: var(--size-tap); padding: 0 var(--space-300); border: var(--border-width) solid var(--border-control); border-radius: var(--radius-m);
  background: var(--surface-layer-1); color: var(--text-heading); font: var(--font-body);
}
.field::placeholder, .form-input::placeholder { color: var(--text-detail); }
.form-input:hover { border-color: var(--text-detail); }
.field:focus, .form-input:focus { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--space-25); }
.form-input[aria-invalid="true"] { border-color: var(--color-negative); border-width: var(--border-width-strong); }
select.field { width: auto; min-height: var(--size-control); padding-right: var(--space-700); appearance: none; background: var(--color-neutral); border: 0; font: var(--font-ui); }
.select-wrap { position: relative; display: inline-flex; align-items: center; min-width: 0; }
.select-wrap::after { content: ""; position: absolute; right: var(--space-300); width: var(--size-icon-xs); height: var(--size-icon-xs); background: var(--text-detail); -webkit-mask: var(--icon-chevron-down) center / contain no-repeat; mask: var(--icon-chevron-down) center / contain no-repeat; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-200); margin-top: var(--space-200); }
.chip {
  display: inline-flex; align-items: center; gap: var(--space-100); min-height: var(--size-control-s); padding: 0 var(--space-300);
  border: 0; border-radius: var(--radius-full); background: var(--color-neutral);
  font: var(--font-ui-s); color: var(--text-body); cursor: pointer; white-space: nowrap; transition: background-color var(--duration-fast), color var(--duration-fast);
}
.chip:hover { background: var(--color-neutral-hover); }
.chip[aria-pressed="true"] { background: var(--color-neutral-strong); color: var(--color-on-neutral-strong); font-weight: 600; }

/* A–Z index along the right edge, like Contacts: tap or slide a finger */
.az {
  position: fixed; right: 0; top: 50%; z-index: 30; transform: translateY(-50%); display: none; flex-direction: column; align-items: center;
  padding: var(--space-100) var(--space-50); touch-action: none; -webkit-user-select: none; user-select: none; cursor: pointer; border-radius: var(--radius-full);
}
.az span { display: block; width: var(--space-400); text-align: center; font: var(--font-index); color: var(--color-accent-content); }
.az.is-active { background: var(--nav-ghost); }
.az-bubble {
  position: fixed; left: 50%; top: 50%; z-index: 60; width: var(--space-1000); height: var(--space-1000); margin: calc(var(--space-700) * -1) 0 0 calc(var(--space-700) * -1);
  border-radius: var(--radius-l); display: grid; place-items: center; background: var(--overlay-media-strong); color: var(--on-media); font: var(--font-heading-xl); pointer-events: none;
}

/* ── Segmented control (view or mode) and the tabs styled like one ── */

.seg, .tabs { display: inline-flex; padding: var(--space-50); border-radius: var(--radius-m); background: var(--color-neutral); }
.seg button, .tabs [role="tab"] {
  flex: 1; min-height: var(--size-control-s); padding: 0 var(--space-300); border: 0; border-radius: var(--radius-seg); background: transparent; color: var(--text-body);
  cursor: pointer; font: var(--font-ui-s); white-space: nowrap; transition: background-color var(--duration-fast);
}
.seg button:hover, .tabs [role="tab"]:hover { color: var(--text-heading); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"],
.tabs [role="tab"][aria-selected="true"] { background: var(--surface-selected); color: var(--text-heading); font-weight: 600; box-shadow: var(--shadow-raised); }

/* ── Player: one fixed screen, only the panels scroll ──
   The controls belong to the video: they sit directly under it as one unit,
   the notes panel next to it (wide) or below it (narrow) is separate. */

body.is-player { height: 100vh; height: 100dvh; overflow: hidden; background: var(--surface-layer-1); }
.is-player .top, .is-player .tabbar { display: none !important; }
.player {
  height: 100vh; height: 100dvh; display: grid;
  grid-template-rows: auto minmax(0, 1fr); grid-template-columns: minmax(0, 1fr);
}

.p-head {
  display: flex; align-items: center; gap: var(--space-100); min-height: calc(var(--size-bar) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) var(--space-200) 0 var(--space-100);
  background: var(--surface-bar-solid); box-shadow: 0 var(--size-hairline) 0 var(--border-subtle); position: relative; z-index: 2;
}
.p-back { flex: none; color: var(--color-accent-content); padding: 0 var(--space-200) 0 var(--space-50); gap: 0; font: var(--font-nav); }
.p-back .icon { width: var(--size-icon-l); height: var(--size-icon-l); stroke-width: 2.4; }
.p-back:hover { color: var(--color-accent-content); }
.p-back-text { display: none; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; }
.p-head-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.p-title { font: var(--font-title-s); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: 0; }
.p-count { font: var(--font-detail); color: var(--text-detail); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-btn { flex: none; padding: 0 var(--space-300); gap: var(--space-100); }
.next-btn .icon { width: var(--size-icon-s); height: var(--size-icon-s); }
.next-label { display: none; }

/* "Fertig": a round check like a reminder */
.done-btn { flex: none; gap: var(--space-150); padding: 0 var(--space-150); background: transparent; color: var(--text-detail); min-width: var(--size-control); }
.done-btn:hover { background: var(--color-neutral); }
.done-text { display: none; }
.done-box { position: relative; width: var(--size-check); height: var(--size-check); border: var(--border-width-strong) solid currentColor; border-radius: 50%; transition: background-color var(--duration-fast), border-color var(--duration-fast); }
.done-btn[aria-pressed="true"] { color: var(--color-positive-content); background: transparent; }
.done-btn[aria-pressed="true"] .done-box { border-color: var(--color-positive); background: var(--color-positive); animation: zo-check var(--duration-medium) var(--ease-out); }
.done-btn[aria-pressed="true"] .done-box::after {
  content: ""; position: absolute; inset: 0; background: var(--color-on-accent);
  -webkit-mask: var(--icon-check) center / var(--size-icon-xs) no-repeat; mask: var(--icon-check) center / var(--size-icon-xs) no-repeat;
}
.done-btn.is-error { outline: var(--border-width-strong) solid var(--color-negative); }
@keyframes zo-check { 50% { transform: scale(1.2); } }

/* one column (default): video, its controls, then the panel fills the rest */
.p-body { min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.p-main { min-height: 0; display: flex; flex-direction: column; }
.stage { position: relative; overflow: hidden; background: var(--surface-media); }
.video { width: 100%; aspect-ratio: 16 / 9; max-height: 42vh; max-height: 42dvh; object-fit: contain; background: var(--surface-media); }
.stage:fullscreen { border-radius: 0; display: flex; align-items: center; }
.stage:fullscreen .video { height: 100%; max-height: none; }
.stage-tap { position: absolute; inset: 0; z-index: 1; border: 0; background: transparent; cursor: pointer; }
/* Schnelles Tippen soll den Knopf treffen, nicht die Seite zoomen */
.stage-tap, .stage-ui button, .dock button, .row-preview, .preview-step { touch-action: manipulation; }
.stage-ui {
  position: absolute; inset: 0; z-index: 2; display: grid; grid-template-rows: minmax(0, 1fr) auto; pointer-events: none;
  background: linear-gradient(to top, var(--media-shade), transparent 45%), var(--media-scrim); color: var(--on-media);
  transition: background-color var(--duration-medium);
}
.stage-ui button, .stage-ui .seek { pointer-events: auto; }
.ctl-transport { place-self: center; display: flex; align-items: center; gap: var(--space-700); }
.skip {
  display: grid; place-items: center; width: var(--size-tap); height: var(--size-tap); padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer; color: var(--on-media); transition: background-color var(--duration-fast), transform var(--duration-fast);
}
.skip .icon { width: var(--size-icon-xl); height: var(--size-icon-xl); stroke-width: 1.8; filter: drop-shadow(0 1px 2px var(--media-shade)); }
.skip:hover { background: var(--media-hover); }
.skip:active { transform: scale(.9); }
.play {
  width: var(--size-play); height: var(--size-play); flex: none; border: 0; border-radius: 50%;
  background: var(--color-accent); color: var(--color-on-accent); display: grid; place-items: center; cursor: pointer;
  box-shadow: var(--shadow-floating); transition: background-color var(--duration-fast), transform var(--duration-fast);
}
.play:hover { background: var(--color-accent-hover); }
.play:active { transform: scale(.94); }
.play svg { width: var(--size-icon-l); height: var(--size-icon-l); fill: currentColor; }
.play .i-play { margin-left: var(--space-50); }
.play .i-pause, .is-playing .play .i-play { display: none; }
.is-playing .play .i-pause { display: block; }
.stage-full {
  display: grid; place-items: center; width: var(--size-control); height: var(--size-control); margin-right: calc(-1 * var(--space-200));
  border: 0; border-radius: 50%; background: none; color: var(--on-media); cursor: pointer;
}
.stage-full:hover { background: var(--media-hover); }

/* Playing and left alone: only a thin progress line stays in the picture */
.ctl-transport, .time, .stage-full, .seek-thumb, .seek-label, .seek-marker { transition: opacity var(--duration-medium); }
.stage.is-idle { cursor: none; }
.stage.is-idle .stage-ui { background: transparent; }
.stage.is-idle .stage-ui button, .stage.is-idle .stage-ui .seek { pointer-events: none; }
.stage.is-idle .ctl-transport, .stage.is-idle .time, .stage.is-idle .stage-full,
.stage.is-idle .seek-thumb, .stage.is-idle .seek-label, .stage.is-idle .seek-marker { opacity: 0; }

.skip-flash {
  position: absolute; top: 50%; z-index: 3; width: var(--space-900); height: var(--space-900); margin-top: calc(var(--space-600) * -1);
  border-radius: 50%; display: grid; place-items: center; background: var(--overlay-media); color: var(--on-media); opacity: 0; pointer-events: none;
}
.skip-flash .icon { width: var(--size-icon-xl); height: var(--size-icon-xl); }
.skip-flash[data-side="-1"] { left: var(--space-300); }
.skip-flash[data-side="1"] { right: var(--space-300); }
.skip-flash.is-on { animation: zo-flash 600ms var(--ease-out); }
@keyframes zo-flash { 0% { opacity: 1; transform: scale(.85); } 60% { opacity: 1; transform: none; } 100% { opacity: 0; } }

.plaques { position: absolute; left: var(--space-200); top: var(--space-200); z-index: 3; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-100); pointer-events: none; }
.plaque { background: var(--overlay-media); color: var(--on-media); font: var(--font-detail-strong); padding: var(--space-50) var(--space-200); border-radius: var(--radius-s); font-variant-numeric: tabular-nums; }
.plaque-loop { box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-accent); }
.ended {
  position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-300);
  background: var(--overlay-media-strong); color: var(--on-media); padding: var(--space-300); text-align: center; font: var(--font-title);
}
.ended-actions { display: flex; flex-wrap: wrap; gap: var(--space-200); justify-content: center; }

.panel { min-height: 0; display: flex; flex-direction: column; background: var(--surface-layer-1); }
.panel-head { display: flex; align-items: center; gap: var(--space-200); padding: var(--space-200) var(--space-300); box-shadow: 0 var(--size-hairline) 0 var(--border-subtle), 0 calc(-1 * var(--size-hairline)) 0 var(--border-subtle); position: relative; z-index: 1; }
.panel-head .tabs { flex: 1; min-width: 0; }
.panel-tools { display: none; gap: var(--space-100); }
.panel-body { flex: 1; min-height: 0; overflow: auto; overscroll-behavior: contain; padding-bottom: env(safe-area-inset-bottom); }
.pane-tools { display: flex; justify-content: flex-end; padding: var(--space-200) var(--space-200) 0; background: var(--surface-layer-2); }
.sheets { background: var(--surface-layer-2); padding: var(--space-200); display: flex; flex-direction: column; gap: var(--space-200); min-height: 100%; }
.sheet-name { font: var(--font-detail-strong); color: var(--text-detail); padding: 0 var(--space-100); }
.sheet-page { width: 100%; height: auto; background: var(--surface-sheet); border-radius: var(--radius-s); box-shadow: var(--shadow-raised); }
.pane-videos .list { padding: var(--space-100) 0; }

/* "Stelle üben": under the video (two columns) or the third tab (one column) */
.pane-stelle { padding: var(--space-400); display: flex; flex-direction: column; gap: var(--space-300); }
.pane-stelle-head { display: flex; align-items: center; gap: var(--space-200); }
.pane-stelle-head .icon { color: var(--color-accent-content); }
.pane-title { font: var(--font-title); }
/* Ohne gemerkte Stellen keine leere Überschrift, das spart eine Zeile */
.pane-stelle:not(:has(.preset)) .presets-title, .presets-empty { display: none; }
.loop-howto { max-width: 70ch; font: var(--font-body-s); color: var(--text-detail); }
.presets { display: flex; flex-wrap: wrap; gap: var(--space-200); }
.preset { display: inline-flex; align-items: center; border-radius: var(--radius-full); background: var(--color-neutral); }
.preset-btn {
  display: flex; align-items: center; gap: var(--space-200); min-height: var(--size-control); padding: 0 var(--space-100) 0 var(--space-300);
  border: 0; background: none; cursor: pointer; font: var(--font-ui); color: var(--text-heading); border-radius: var(--radius-full) 0 0 var(--radius-full);
}
.preset-btn::before { content: ""; width: var(--size-icon-s); height: var(--size-icon-s); background: var(--color-accent-content); -webkit-mask: var(--icon-repeat) center / contain no-repeat; mask: var(--icon-repeat) center / contain no-repeat; }
.preset-btn:hover { background: var(--color-neutral-hover); }
.preset-time { font: var(--font-detail); color: var(--text-detail); font-variant-numeric: tabular-nums; }
.preset-del { width: var(--size-control); height: var(--size-control); border: 0; background: none; cursor: pointer; color: var(--text-detail); border-radius: 0 var(--radius-full) var(--radius-full) 0; display: grid; place-items: center; }
.preset-del:hover { color: var(--color-negative-content); background: var(--color-negative-subtle); }
.preset-del svg { width: var(--size-icon-s); height: var(--size-icon-s); }
.stelle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100) var(--space-400); }
.check { display: flex; align-items: center; gap: var(--space-300); min-height: var(--size-tap); cursor: pointer; font: var(--font-body-s); color: var(--text-body); }
.check input { width: var(--size-check); height: var(--size-check); accent-color: var(--color-accent); flex: none; cursor: pointer; }
.nudge { display: flex; flex-wrap: wrap; gap: var(--space-200) var(--space-500); }
.nudge-group { display: flex; align-items: center; gap: var(--space-200); }
.nudge-group .meta { min-width: 88px; }
.stepper { display: inline-flex; align-items: stretch; border-radius: var(--radius-m); background: var(--color-neutral); }
.stepper > .btn { background: transparent; border-radius: 0; min-width: var(--size-control); padding: 0 var(--space-200); }
.stepper > .btn:first-child { border-radius: var(--radius-m) 0 0 var(--radius-m); }
.stepper > .btn:last-child { border-radius: 0 var(--radius-m) var(--radius-m) 0; }
.stepper > .btn:hover { background: var(--color-neutral-hover); }
.stepper > .btn:disabled { background: transparent; }
.stepper .icon { width: var(--size-icon-s); height: var(--size-icon-s); stroke-width: 2.4; }
.keys-wrap summary { min-height: var(--size-tap); display: inline-flex; align-items: center; gap: var(--space-200); cursor: pointer; font: var(--font-ui-regular); color: var(--text-detail); }
.keys { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-200) var(--space-400); font: var(--font-body-s); padding-bottom: var(--space-200); }
.keys dd { color: var(--text-detail); }

/* Practice bar under the video: tempo, section, metronome in one row. Its
   layout follows its own width, not the window. */
.dock { container: dock / inline-size; background: var(--surface-layer-1); }
.dock-inner { display: flex; align-items: center; gap: var(--space-200); padding: var(--space-200) var(--space-300); }
.ctl-group { display: flex; align-items: center; gap: var(--space-100); }
.ctl-tempo { flex: none; }
.ctl-loop { flex: 1; min-width: 0; }
.dock .metro { margin-left: auto; }
.ctl-label { display: none; font: var(--font-detail); color: var(--text-detail); margin-right: var(--space-100); }
.ctl-tempo .stepper > .btn { min-width: var(--size-control-s); padding: 0 var(--space-150); }
.tempo {
  white-space: nowrap; min-width: 56px; height: var(--size-control); border: 0; background: none; cursor: pointer;
  font: var(--font-ui); color: var(--text-heading); font-variant-numeric: tabular-nums;
}
.tempo:hover { background: var(--color-neutral-hover); }
.is-slow .tempo { color: var(--color-accent-content); }
.loop-main { min-width: 0; max-width: 100%; gap: var(--space-150); padding: 0 var(--space-300); font: var(--font-ui); overflow: hidden; text-overflow: ellipsis; }
.loop-main::before { content: ""; flex: none; width: var(--size-icon-s); height: var(--size-icon-s); background: currentColor; -webkit-mask: var(--icon-repeat) center / contain no-repeat; mask: var(--icon-repeat) center / contain no-repeat; }
.loop-main[data-state="start"] { background: var(--surface-layer-1); color: var(--color-accent-content); box-shadow: inset 0 0 0 var(--border-width-strong) var(--color-accent); animation: zo-pulse 1.5s ease-in-out infinite; }
.loop-main[data-state="on"] { background: var(--color-accent); color: var(--color-on-accent); }
.loop-main[data-state="off"] { background: var(--surface-layer-1); box-shadow: inset 0 0 0 var(--border-width) var(--border-control); }
.loop-clear { flex: none; color: var(--text-detail); }
.loop-clear:hover { color: var(--color-negative-content); background: var(--color-negative-subtle); }
.loop-clear.is-idle { display: none; }
@keyframes zo-pulse { 50% { box-shadow: inset 0 0 0 3px var(--color-accent); } }
@container dock (max-width: 519px) {
  .dock .metro-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .dock .metro-btn { padding: 0 var(--space-200); min-width: var(--size-control); }
}
@container dock (max-width: 379px) {
  .loop-main::before { display: none; }
}
@container dock (min-width: 720px) {
  .ctl-label { display: inline; }
}

/* timeline at the bottom of the picture */
.seek-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--space-300); padding: 0 var(--space-300) var(--space-50); }
.time { font: var(--font-detail-strong); color: var(--on-media); min-width: 4ch; font-variant-numeric: tabular-nums; white-space: nowrap; text-shadow: 0 1px 2px var(--media-shade); }
.time-dur { text-align: right; }
.seek { position: relative; height: var(--size-seek); display: flex; align-items: center; cursor: pointer; touch-action: none; }
.seek:focus-visible { outline-offset: 0; }
.seek-track { position: relative; flex: 1; height: var(--size-track); border-radius: var(--radius-full); background: var(--media-track); }
.seek-fill { position: absolute; inset: 0 auto 0 0; border-radius: var(--radius-full); background: var(--color-accent); }
.seek-loop { position: absolute; top: calc(-1 * var(--space-150)); bottom: calc(-1 * var(--space-150)); border-radius: var(--radius-s); background: var(--media-loop); }
.seek-loop.is-off { background: var(--media-loop-off); }
.seek-thumb {
  position: absolute; top: 50%; width: var(--size-knob); height: var(--size-knob); margin: calc(var(--size-knob) / -2) 0 0 calc(var(--size-knob) / -2); border-radius: 50%;
  background: var(--color-accent); box-shadow: var(--shadow-dragging); pointer-events: none;
}
.seek:active .seek-thumb { transform: scale(1.3); }
.seek-marker { position: absolute; top: 50%; width: var(--size-seek); height: var(--size-seek); margin: calc(var(--size-seek) / -2) 0 0 calc(var(--size-seek) / -2); cursor: ew-resize; z-index: 1; }
.seek-marker::after {
  content: ""; position: absolute; left: var(--space-300); top: var(--space-150); width: var(--space-200); height: 20px; border-radius: var(--space-50);
  background: var(--on-media) linear-gradient(var(--color-accent), var(--color-accent)) center / 2px 10px no-repeat; box-shadow: var(--shadow-dragging); pointer-events: none;
}
.is-off ~ .seek-marker::after { background-color: var(--text-disabled); }
.seek-label { position: absolute; top: calc(-1 * var(--space-150)); transform: translateX(-50%); font: var(--font-index); color: var(--on-media); white-space: nowrap; pointer-events: none; font-variant-numeric: tabular-nums; text-shadow: 0 1px 2px var(--media-shade); }
.seek-tip {
  position: absolute; bottom: var(--size-seek); transform: translateX(-50%); padding: var(--space-50) var(--space-200); border-radius: var(--radius-s);
  background: var(--surface-elevated); color: var(--text-heading); font: var(--font-detail-strong); pointer-events: none; opacity: 0; font-variant-numeric: tabular-nums; box-shadow: var(--shadow-floating);
}
.seek-tip.is-visible { opacity: 1; }

/* two columns: wide and landscape (desktop, tablet held sideways) */
@media (min-width: 900px) and (min-aspect-ratio: 5/4) {
  body.is-player { background: var(--surface-base); }
  .p-head { padding: var(--space-200) var(--space-500) var(--space-200) var(--space-300); gap: var(--space-200); background: var(--surface-layer-1); }
  .p-body { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-400); padding: var(--space-400) var(--space-500); }
  .is-notes-wide .p-body { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  /* Video takes the free height, the controls hang directly under it */
  .p-main { display: grid; grid-template-rows: minmax(55%, 1fr) auto minmax(0, auto); }
  .stage { min-height: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .video { height: 100%; aspect-ratio: auto; max-height: none; }
  .dock { border-radius: 0 0 var(--radius-l) var(--radius-l); }
  .dock-inner { padding: var(--space-200) var(--space-300); }
  .p-main > .pane-stelle {
    margin-top: var(--space-300); min-height: 0; overflow: auto; overscroll-behavior: contain;
    background: var(--surface-layer-1); border-radius: var(--radius-l);
  }
  .panel { border-radius: var(--radius-l); overflow: hidden; }
  .panel-head { box-shadow: 0 var(--size-hairline) 0 var(--border-subtle); }
  .panel-head .tabs { flex: none; }
  .panel-head .panel-tools { margin-left: auto; }
  .tab-stelle { display: none; }
  .panel-tools { display: flex; }
}
@media (min-width: 600px) {
  .p-back-text { display: inline; }
  .done-text { display: inline; font: var(--font-ui); }
  .done-btn { padding: 0 var(--space-300) 0 var(--space-200); }
}
@media (min-width: 1100px) {
  .next-label { display: inline; }
  .next-short { display: none; }
}

/* ── Notes view ──────────────────────────── */

.is-notes { background: var(--surface-layer-2); }
.is-notes .top, .is-notes .tabbar { display: none !important; }
.n-bar {
  position: sticky; top: 0; z-index: 20; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-100) var(--space-200);
  min-height: calc(var(--size-bar) + env(safe-area-inset-top)); padding: calc(var(--space-100) + env(safe-area-inset-top)) var(--space-300) var(--space-100) var(--space-100);
  background: var(--surface-bar); -webkit-backdrop-filter: var(--bar-filter); backdrop-filter: var(--bar-filter); box-shadow: 0 var(--size-hairline) 0 var(--border-subtle);
}
.n-back { color: var(--color-accent-content); font: var(--font-nav); gap: 0; padding: 0 var(--space-200) 0 var(--space-50); }
.n-back:hover { color: var(--color-accent-content); }
.n-back .icon { width: var(--size-icon-l); height: var(--size-icon-l); stroke-width: 2.4; }
.n-title { flex: 1; min-width: 0; font: var(--font-title); color: var(--text-heading); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.n-sep { width: var(--border-width); height: var(--space-500); background: var(--border-subtle); }
.n-stage { position: relative; display: flex; justify-content: center; align-items: flex-start; gap: var(--space-400); padding: var(--space-400); touch-action: pan-y pinch-zoom; }
.n-page { background: var(--surface-sheet); box-shadow: var(--shadow-raised); border-radius: var(--space-50); }
.fit-page { padding-bottom: calc(var(--size-tap) + var(--space-400) + env(safe-area-inset-bottom)); }
.fit-page .n-page {
  max-height: calc(100vh - var(--size-bar) - var(--size-tap) - 4 * var(--space-400));
  max-height: calc(100dvh - var(--size-bar) - var(--size-tap) - 4 * var(--space-400) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
  width: auto; max-width: 100%;
}
.fit-page.is-spread .n-page { max-width: calc(50% - var(--space-200)); }
.fit-width .n-stage { flex-direction: column; align-items: center; }
.fit-width .n-page { width: 100%; max-width: 1100px; height: auto; }
.fit-width .n-foot, .fit-width .n-nav { display: none; }
.n-nav {
  position: fixed; top: 50%; z-index: 10; width: var(--size-control-l); height: 96px; margin-top: calc(var(--space-800) * -1); border: 0; border-radius: var(--radius-l);
  background: var(--nav-ghost); color: var(--text-heading); cursor: pointer; display: grid; place-items: center;
}
.n-nav svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.n-nav:hover { background: var(--nav-ghost-hover); }
.n-nav:disabled { opacity: 0; pointer-events: none; }
.n-prev { left: var(--space-200); }
.n-next { right: var(--space-200); }
.n-foot {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; align-items: center; justify-content: center; gap: var(--space-300);
  padding: var(--space-200) var(--space-300) calc(var(--space-200) + env(safe-area-inset-bottom));
  background: var(--surface-bar); -webkit-backdrop-filter: var(--bar-filter); backdrop-filter: var(--bar-filter); box-shadow: 0 calc(-1 * var(--size-hairline)) 0 var(--border-subtle);
}
.n-step { flex: 1; max-width: 200px; min-height: var(--size-tap); }
.n-step .icon { width: var(--size-icon-s); height: var(--size-icon-s); stroke-width: 2.4; }
.n-count { min-width: 104px; text-align: center; font: var(--font-ui); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.n-zones { position: fixed; left: 0; right: 0; top: calc(var(--size-bar) + env(safe-area-inset-top)); bottom: calc(var(--size-tap) + var(--space-400)); z-index: 12; display: flex; justify-content: space-between; pointer-events: none; }
.n-zones span { width: 33%; display: grid; place-items: center; color: var(--tap-zone-text); background: var(--tap-zone); }
.n-zones svg { width: var(--size-tap); height: var(--size-tap); }
.n-top {
  position: fixed; right: var(--space-400); bottom: calc(var(--space-400) + env(safe-area-inset-bottom)); z-index: 15;
  min-height: var(--size-tap); padding: 0 var(--space-500); border: 0; border-radius: var(--radius-full);
  background: var(--color-neutral-strong); color: var(--color-on-neutral-strong); font: var(--font-ui); cursor: pointer; box-shadow: var(--shadow-floating);
}
.n-compact { width: var(--size-control); padding: 0; }
.n-hide { display: none; }
@media (min-width: 1000px) {
  .n-bar { padding-left: var(--space-300); padding-right: var(--space-500); gap: var(--space-200); }
  .n-hide { display: inline; }
  .n-compact { width: auto; padding: 0 var(--space-300); }
}
@media (hover: none) and (pointer: coarse) {
  .n-nav { display: none; }
  .keys-wrap { display: none; }
}

/* ── Login, password, konto, admin, errors ── */

.login-wrap { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: calc(var(--space-500) + env(safe-area-inset-top)) var(--space-400) var(--space-500); }
.login-box { width: 100%; max-width: 400px; }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: var(--space-200); margin-bottom: var(--space-500); text-align: center; }
.login-brand img { width: var(--space-900); height: var(--space-900); }
.login-title { font: var(--font-heading-xl); color: var(--text-heading); }
.login-sub { font: var(--font-body-s); color: var(--text-detail); }
.login-foot { margin-top: var(--space-400); text-align: center; }
.login-form, .form { display: flex; flex-direction: column; gap: var(--space-400); }
.login-form > .btn, .form > .btn-block { width: 100%; margin-top: var(--space-100); }
.form-group { display: flex; flex-direction: column; gap: var(--space-150); }
.form-label { font: var(--font-title-s); color: var(--text-heading); }
.form-help { font: var(--font-detail); color: var(--text-detail); }
.form-error { display: flex; align-items: center; gap: var(--space-150); font: var(--font-detail-strong); color: var(--color-negative-content); }
.form-error .icon { width: var(--size-icon-s); height: var(--size-icon-s); }
.form-check { display: flex; align-items: center; gap: var(--space-300); min-height: var(--size-tap); cursor: pointer; font: var(--font-body-s); }
.form-check input { width: var(--size-check); height: var(--size-check); accent-color: var(--color-accent); flex: none; }
.form-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-200); }
.pw-field { position: relative; }
.pw-field .form-input { padding-right: 96px; }
.pw-show { position: absolute; right: var(--space-100); top: var(--space-100); bottom: var(--space-100); min-height: 0; color: var(--color-accent-content); }

.seg-wide { display: flex; }
.seg-wide button { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-150); padding: 0 var(--space-200); }

/* Verwaltung */
.sync-card { display: flex; flex-direction: column; gap: var(--space-400); }
.sync-row { display: flex; align-items: flex-start; gap: var(--space-300); }
.sync-icon { flex: none; width: var(--size-tap); height: var(--size-tap); border-radius: var(--radius-m); display: grid; place-items: center; background: var(--color-accent-subtle); color: var(--color-accent-content); }
.sync-card[data-busy="1"] .sync-icon .icon { animation: zo-spin 2s linear infinite; }
@keyframes zo-spin { to { transform: rotate(360deg); } }
.sync-text { min-width: 0; display: flex; flex-direction: column; gap: var(--space-50); }
.sync-status { font: var(--font-body-s); color: var(--text-body); }
.sync-card[data-state="failed"] .sync-status { color: var(--color-negative-content); }
.sync-dot { display: inline-block; width: var(--space-200); height: var(--space-200); margin-right: var(--space-150); border-radius: 50%; background: var(--text-disabled); vertical-align: 0; }
.sync-dot.is-online { background: var(--color-positive); }
.sync-form { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-200); }
.sync-log summary { min-height: var(--size-control); display: flex; align-items: center; cursor: pointer; font: var(--font-ui-regular); color: var(--text-detail); }
.sync-log pre { margin-top: var(--space-200); padding: var(--space-300); border-radius: var(--radius-m); background: var(--surface-layer-2); font: var(--font-code); font-weight: 400; white-space: pre-wrap; overflow-wrap: anywhere; max-height: 240px; overflow: auto; }
.user-row { width: 100%; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; }
.user-row:hover { background: var(--surface-layer-2); }
.user-row:active { background: var(--color-neutral); }
.user-row .avatar { width: var(--size-status); height: var(--size-status); font: var(--font-detail-strong); }
.is-locked .row-title, .is-locked .avatar { opacity: .55; }
.user-badges { flex: none; display: flex; gap: var(--space-100); }
.pw-gen { display: flex; gap: var(--space-200); }
.pw-gen .form-input { flex: 1; min-width: 0; font: var(--font-code); font-size: 17px; letter-spacing: .02em; }
.user-sheet .dialog-body { gap: var(--space-500); }
.sheet-group { display: flex; flex-direction: column; gap: var(--space-200); }
.sheet-group > .btn { align-self: flex-start; }
.seg form { display: contents; }
.sheet-actions { display: flex; flex-direction: column; gap: var(--space-200); padding-top: var(--space-400); border-top: var(--border-width) solid var(--border-subtle); }
.sheet-actions .btn { justify-content: flex-start; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-section); align-items: start; }
.user-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-300); padding: var(--space-300) var(--space-edge-to-text); }
.user-main { flex: 1; min-width: 200px; display: flex; align-items: center; gap: var(--space-300); }
.user-text { display: flex; flex-direction: column; gap: var(--space-100); min-width: 0; }
.user-name { font: var(--font-title); color: var(--text-heading); }
.user-badges { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-150); }
.user-actions { display: flex; flex-wrap: wrap; gap: var(--space-200); }
.user-actions form { display: contents; }

.mt-300 { margin-top: var(--space-300); }
.mb-300 { margin-bottom: var(--space-300); }

.error-page { min-height: calc(100vh - var(--size-bar) - var(--size-tabbar)); min-height: calc(100dvh - var(--size-bar) - var(--size-tabbar)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-300); text-align: center; padding: var(--space-700) var(--space-400); }
.error-icon { width: var(--space-900); height: var(--space-900); border-radius: 50%; display: grid; place-items: center; background: var(--color-accent-subtle); color: var(--color-accent-content); }
.error-icon svg { width: var(--size-icon-l); height: var(--size-icon-l); }
.error-msg { font: var(--font-heading); color: var(--text-heading); max-width: 28ch; }
.error-page .actions { justify-content: center; }

/* ── Dialogs and toast ───────────────────── */

.dialog {
  margin: auto; width: min(400px, calc(100% - var(--space-600))); max-height: calc(100dvh - var(--space-500)); overflow: auto;
  padding: var(--space-500); border: 0; border-radius: var(--radius-l); background: var(--surface-elevated); color: var(--text-body); box-shadow: var(--shadow-floating);
}
.dialog[open] { animation: zo-pop var(--duration-medium) var(--ease-out); }
.dialog::backdrop { background: var(--scrim); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-300); }
.dialog-head h2 { font: var(--font-heading); }
.dialog-head .btn-icon { margin-right: calc(-1 * var(--space-200)); }
.dialog-body { margin-top: var(--space-200); display: flex; flex-direction: column; gap: var(--space-400); font: var(--font-body-s); }
.dialog-foot { margin-top: var(--space-500); display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--space-200); }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--space-400) + env(safe-area-inset-bottom)); z-index: 100; transform: translate(-50%, var(--space-400));
  display: flex; align-items: center; gap: var(--space-300); max-width: calc(100% - var(--space-600)); min-height: var(--size-tap); padding: var(--space-200) var(--space-500);
  border-radius: var(--radius-full); background: var(--color-neutral-strong); color: var(--color-on-neutral-strong); font: var(--font-ui); box-shadow: var(--shadow-floating);
  opacity: 0; pointer-events: none; transition: opacity var(--duration-medium), transform var(--duration-medium) var(--ease-out);
}
body:not(.is-player):not(.is-notes) .toast { bottom: calc(var(--size-tabbar) + var(--space-300) + env(safe-area-inset-bottom)); }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast-positive { background: var(--color-positive); color: var(--color-on-accent); }
.toast-negative { background: var(--color-negative); color: var(--color-on-accent); }

/* ── Metronom ───────────────────────────── */

.metro { display: flex; align-items: center; gap: var(--space-50); flex: none; }
.metro-btn { gap: var(--space-150); padding: 0 var(--space-300); font-variant-numeric: tabular-nums; }
.metro-btn .metro-icon { width: var(--size-icon); height: var(--size-icon); transition: transform var(--duration-fast); }
.metro.is-on .metro-btn { background: var(--color-accent); color: var(--color-on-accent); }
.metro.is-on .metro-btn:hover { background: var(--color-accent-hover); }
.metro.is-on.is-beat .metro-icon { transform: scale(1.15); }
.metro-dots { display: inline-flex; gap: var(--space-100); }
.metro-dots i { width: var(--space-150); height: var(--space-150); border-radius: 50%; background: currentColor; opacity: .35; }
.metro-dots i.is-on { opacity: 1; }
.metro-dots i.is-one { transform: scale(1.35); }
.metro-set { color: var(--text-detail); }

.metro-panel { width: min(520px, calc(100% - var(--space-500))); }
.metro-panel .dialog-body { gap: var(--space-500); }
.metro-row { display: flex; flex-direction: column; gap: var(--space-200); }
.metro-key { font: var(--font-title-s); color: var(--text-heading); }
.metro-key .metro-vol-text { font: var(--font-ui-regular); color: var(--text-detail); margin-left: var(--space-150); }
.metro-row .chips { margin-top: 0; }
.metro-row .seg { align-self: flex-start; }
.metro-tempo { display: flex; align-items: center; gap: var(--space-150); }
.metro-tempo .stepper > .btn { min-width: var(--size-tap); min-height: var(--size-tap); }
.metro-bpm-box { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--space-50); }
.metro-bpm { font: var(--font-display); color: var(--text-heading); font-variant-numeric: tabular-nums; }
.metro-range { width: 100%; height: var(--size-control); accent-color: var(--color-accent); cursor: pointer; }
.metro-scale { display: flex; justify-content: space-between; margin-top: calc(-1 * var(--space-200)); }
.metro-tap { align-self: flex-start; }
.metro-actions {
  position: sticky; bottom: calc(-1 * var(--space-500)); display: flex; gap: var(--space-200);
  margin: var(--space-400) calc(-1 * var(--space-500)) calc(-1 * var(--space-500)); padding: var(--space-300) var(--space-500) calc(var(--space-300) + env(safe-area-inset-bottom));
  background: var(--surface-elevated); box-shadow: 0 calc(-1 * var(--size-hairline)) 0 var(--border-subtle);
}
.metro-actions .btn { flex: 1; }

/* ── Wider screens ───────────────────────── */

@media (min-width: 600px) {
  .top { box-shadow: 0 var(--size-hairline) 0 var(--border-subtle); }
  .top-inner { display: flex; gap: var(--space-600); padding: 0 var(--space-page-x); }
  .top-title { display: none; }
  .top-nav { display: flex; gap: var(--space-100); flex: 1; height: 100%; }
  .top-nav a {
    position: relative; display: flex; align-items: center; padding: 0 var(--space-300);
    font: var(--font-ui-regular); color: var(--text-detail); text-decoration: none;
  }
  .top-nav a:hover { color: var(--text-heading); }
  .top-nav a.is-active { color: var(--text-heading); font-weight: 600; }
  .top-nav a.is-active::after { content: ""; position: absolute; left: var(--space-300); right: var(--space-300); bottom: 0; height: var(--border-width-strong); border-radius: var(--radius-full) var(--radius-full) 0 0; background: var(--color-accent); }
  .account summary { padding: 0 var(--space-200) 0 var(--space-100); }
  .account summary:hover { background: var(--color-neutral); }
  .account-name { display: inline; }
  .account summary::after { content: ""; width: var(--size-icon-xs); height: var(--size-icon-xs); background: currentColor; -webkit-mask: var(--icon-chevron-down) center / contain no-repeat; mask: var(--icon-chevron-down) center / contain no-repeat; }
  .tabbar { display: none; }
  body:not(.is-player):not(.is-notes) main { padding-bottom: 0; }
  body:not(.is-player):not(.is-notes) .toast { bottom: calc(var(--space-500) + env(safe-area-inset-bottom)); }
  .page { padding-top: var(--space-600); }
  .page-head { margin-bottom: var(--space-500); }
  .back { margin-bottom: var(--space-100); }
  .row { min-height: var(--space-800); }
  .row-notes-text { display: inline; }
  .row-notes { width: auto; padding: 0 var(--space-300); height: var(--size-control); }
  .row-notes .icon { width: var(--size-icon-s); height: var(--size-icon-s); }
  .resume { padding: var(--space-400); gap: var(--space-400); }
  .resume-title { font: var(--font-heading); }
  .resume-go { width: var(--size-play); height: var(--size-play); }
  .resume-go svg { width: var(--size-icon-l); height: var(--size-icon-l); }
  .error-page { min-height: calc(100dvh - var(--size-bar)); }
}
@media (min-width: 900px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr) 380px; }
}
@media (min-width: 1100px) {
  .home { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* ── Phone ───────────────────────────────── */

@media (max-width: 599px) {
  /* Back link sits in the navigation bar, where iOS puts it */
  .page-head .back {
    position: fixed; top: env(safe-area-inset-top); left: var(--space-200); z-index: 41; height: var(--size-bar); margin: 0;
    max-width: 34vw; border-radius: 0; background: transparent;
  }
  .page-head .back:hover { background: transparent; }
  body:has(.page-head .back) .brand { visibility: hidden; }
  .az { display: flex; }
  .actions { flex-direction: column; align-items: stretch; }
  .actions > .btn { width: 100%; }
  .actions-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--space-200); }
  .actions-row .btn { min-width: 0; padding: 0 var(--space-300); }
  .chips {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--space-page-x); scrollbar-width: none;
    margin: var(--space-200) calc(-1 * var(--space-page-x)) 0; padding: 0 var(--space-page-x);
  }
  #lied-list .card { margin-right: var(--space-200); }
  .chips::-webkit-scrollbar { display: none; }
  .chip { scroll-snap-align: start; }
  .metro-row .chips { margin: 0; padding: 0; }
  .lesson-nav { gap: var(--space-200); }
  .dialog-foot .btn { flex: 1 1 auto; }

  /* The metronome settings open as a sheet from the bottom edge */
  .metro-panel, .dialog.dialog-sheet { margin: auto 0 0; width: 100%; max-width: 100%; max-height: 90dvh; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .metro-panel[open], .dialog-sheet[open] { animation: zo-sheet var(--duration-medium) var(--ease-out); }
  .n-bar .metro-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .n-bar .metro-btn { padding: 0 var(--space-200); min-width: var(--size-control); }

  .n-title, .n-sep { display: none; }
  .n-bar .seg { margin-right: auto; }
  .n-bar .select-wrap { order: 10; flex: 1 1 100%; }
  .n-bar .select-wrap .field { width: 100%; }
  .n-stage { padding: var(--space-200); }
}
@keyframes zo-sheet { from { transform: translateY(100%); } }

/* phone held sideways: the picture and one slim practice bar */
@media (orientation: landscape) and (max-height: 500px) {
  .p-head, .panel, .pane-stelle { display: none !important; }
  .p-body { grid-template-rows: minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); padding: 0; }
  .p-main { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
  .stage { height: 100%; min-height: 0; border-radius: 0; }
  .video { height: 100%; aspect-ratio: auto; max-height: none; min-height: 0; }
  .seek-row { padding-left: calc(var(--space-300) + env(safe-area-inset-left)); padding-right: calc(var(--space-300) + env(safe-area-inset-right)); }
  .dock { border-radius: 0; }
  .dock-inner { padding: var(--space-100) calc(var(--space-300) + env(safe-area-inset-right)) calc(var(--space-100) + env(safe-area-inset-bottom)) calc(var(--space-300) + env(safe-area-inset-left)); }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}