/* =============================================================================
   Modulysa design system
   Editorial type (DM Serif Display + DM Sans), bright blue accent, warm amber
   secondary, generous whitespace, soft radii. Works LTR and RTL.
   ========================================================================== */
:root {
  --bg: #ffffff;
  --bg-soft: #f6f7fb;
  --bg-card: #f2f4f9;
  --bg-card-hover: #e9edf6;
  --text: #15161c;
  --text-2: #4b4f5c;
  --text-3: #8a8f9c;
  --accent: #2563eb;
  --accent-strong: #1d4ed8;
  --accent-tint: #e8efff;
  --accent-glow: rgba(37, 99, 235, 0.16);
  --amber: #f59e0b;
  --amber-tint: #fff4df;
  --green: #0f9f6e;
  --green-tint: #e3f7ef;
  --red: #dc2626;
  --red-tint: #fdeaea;
  --border: rgba(20, 22, 30, 0.09);
  --border-strong: rgba(20, 22, 30, 0.18);
  --shadow-sm: 0 1px 2px rgba(20, 22, 30, 0.05), 0 2px 8px rgba(20, 22, 30, 0.04);
  --shadow-md: 0 6px 24px rgba(20, 22, 30, 0.08);
  --shadow-lg: 0 18px 48px rgba(20, 22, 30, 0.12);
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --font-display: 'DM Serif Display', Georgia, 'Times New Roman', serif;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --nav-h: 68px;
  --container: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }
img, svg { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); }
button { font: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; margin: 0 0 0.6em; letter-spacing: -0.01em; color: var(--text); }
h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }
h3 { font-size: 1.3rem; }
h4 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }
p { margin: 0 0 1em; }
.lead { font-size: 1.15rem; color: var(--text-2); line-height: 1.75; max-width: 46rem; }
.muted { color: var(--text-3); }
.small { font-size: 0.875rem; }
.tiny { font-size: 0.75rem; }
.serif { font-family: var(--font-display); }
.accent { color: var(--accent); }
.nowrap { white-space: nowrap; }
.text-center { text-align: center; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 1.25rem; }
.container.narrow { max-width: 760px; }
.section { padding: 4.5rem 0; }
.section.tight { padding: 2.5rem 0; }
.section.soft { background: var(--bg-soft); }
.section-label {
  display: inline-block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 1rem;
}
.section-head { max-width: 46rem; margin-bottom: 2.5rem; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* ---------------------------------------------------------------- nav --- */
.nav {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
}
.nav-inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* Wide screens: three columns of equal width, so the links sit on the true centre of the bar whatever the brand
   and the search box measure. Collapsed and phone navs keep the flex row. */
@media (min-width: 1025px) {
  .nav:not(.nav-collapsed) .nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .nav:not(.nav-collapsed) .nav-inner > .brand { grid-column: 1; justify-self: start; }
  .nav:not(.nav-collapsed) .nav-inner > .nav-links { grid-column: 2; justify-self: center; }
  .nav:not(.nav-collapsed) .nav-inner > .nav-actions { grid-column: 3; justify-self: end; }
}
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: var(--text); font-family: var(--font-display); font-size: 1.45rem; letter-spacing: -0.01em; }
.brand:hover { color: var(--text); }
.brand-mark { width: 34px; height: 34px; border-radius: 10px; background: linear-gradient(135deg, var(--accent) 0%, #60a5fa 100%); display: grid; place-items: center; color: #fff; box-shadow: 0 6px 16px var(--accent-glow); }
.brand-mark svg { width: 20px; height: 20px; }
.nav-links { display: flex; align-items: center; gap: 0.25rem; list-style: none; margin: 0; padding: 0; }
.nav-links a { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; border-radius: 999px; color: var(--text-2); font-weight: 500; font-size: 0.92rem; white-space: nowrap; }
.nav-links a:hover, .nav-links a.active { background: var(--bg-card); color: var(--text); }
.nav-links .mobile-only { display: none; }
.nav-actions { display: flex; align-items: center; gap: 0.5rem; }
.hamburger { display: none; width: 42px; height: 42px; border: 1px solid var(--border); background: #fff; border-radius: 10px; cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.hamburger span { width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform 0.2s; }
@media (max-width: 1180px) { .nav-links a { padding: 0.45rem 0.55rem; font-size: 0.86rem; } .nav-actions .btn { padding-inline: 0.9rem; } }
@media (max-width: 1024px) {
  .nav-links { position: absolute; top: var(--nav-h); inset-inline: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem 1rem; display: none; box-shadow: var(--shadow-md); }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 0.75rem 0.85rem; border-radius: 10px; }
  .hamburger { display: flex; }
  .nav-actions .hide-mobile { display: none; }
  .nav-links .mobile-only { display: block; }
}
.btn { white-space: nowrap; }

/* ---------------------------------------------------------- buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 44px; padding: 0.7rem 1.4rem;
  border-radius: var(--radius-sm); border: 1px solid transparent; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.01em;
  cursor: pointer; transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease, color 0.2s; text-decoration: none; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: #fff; box-shadow: 0 8px 20px var(--accent-glow); }
.btn-primary:hover { background: var(--accent-strong); color: #fff; transform: translateY(-1px); }
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: var(--accent); color: #fff; }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: var(--bg-card); color: var(--text); }
.btn-ghost { background: transparent; color: var(--text-2); }
.btn-ghost:hover { background: var(--bg-card); color: var(--text); }
.btn-danger { background: var(--red-tint); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-danger[disabled] { opacity: 0.5; cursor: not-allowed; }
.btn-danger[disabled]:hover { background: var(--red-tint); color: var(--red); }
.danger-zone { margin-top: 2rem; border-color: var(--red-tint); display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.danger-zone .card-title { color: var(--red); margin: 0 0 0.25rem; }

/* Welcome video: a rounded square on a dimmed backdrop above the first onboarding step */
.welcome-video { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background: rgba(21, 22, 28, 0.72); backdrop-filter: blur(6px); }
.welcome-video-box { position: relative; width: min(92vw, 560px); aspect-ratio: 1 / 1; border-radius: var(--radius-xl); overflow: hidden; background: #000; box-shadow: var(--shadow-lg); }
.welcome-video-box video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* The square box crops a landscape clip to its centre on purpose; fullscreen must show the whole frame, or a wide screen zooms in */
.welcome-video-box video:fullscreen { object-fit: contain; background: #000; }
.welcome-video-box video:-webkit-full-screen { object-fit: contain; background: #000; }
.welcome-video-close { position: absolute; top: 0.75rem; inset-inline-end: 0.75rem; z-index: 2; width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #15161c; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.welcome-video-play { position: absolute; inset: 0; margin: auto; width: 5rem; height: 5rem; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #15161c; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); }
.welcome-video-play svg { width: 2rem; height: 2rem; }
.welcome-video-play[hidden] { display: none; }
body.welcome-video-open { overflow: hidden; }
.welcome-video[hidden] { display: none; }
/* The round bubble on the hero art of the first onboarding step: first frame of the video, a small play badge, no label */
.welcome-bubble { position: absolute; inset-inline-end: -14px; bottom: -6px; width: 84px; height: 84px; padding: 0; border: 4px solid #fff; border-radius: 50%; background: #0f172a; overflow: hidden; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 28px var(--accent-glow), 0 0 0 6px rgba(37, 99, 235, 0.14); transition: transform 0.2s, box-shadow 0.2s; }
.welcome-bubble:hover, .welcome-bubble:focus-visible { transform: scale(1.05); box-shadow: 0 12px 32px var(--accent-glow), 0 0 0 8px rgba(37, 99, 235, 0.18); }
.welcome-bubble video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.welcome-bubble-play { position: relative; width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, 0.95); color: #15161c; display: grid; place-items: center; }
.welcome-bubble-play svg { width: 16px; height: 16px; }
.btn-amber { background: var(--amber); color: #2b1d00; }
.btn-amber:hover { background: #e08c00; color: #2b1d00; }
.btn-sm { min-height: 36px; padding: 0.4rem 0.9rem; font-size: 0.85rem; }
.btn-lg { min-height: 52px; padding: 0.9rem 1.9rem; font-size: 1rem; }
.btn-block { width: 100%; }
.btn[disabled], .btn.disabled { opacity: 0.5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
/* A discreet grey pill for a side action, e.g. the sound check on the album page */
.btn-pill { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 36px; padding: 0.35rem 0.95rem; border: 0; border-radius: 999px; background: var(--bg-card); color: var(--text-2); font: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.15s, color 0.15s; }
.btn-pill:hover { background: var(--bg-card-hover); color: var(--text); }
.btn-pill svg { width: 16px; height: 16px; flex: none; }

/* ------------------------------------------------------------- cards --- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; box-shadow: var(--shadow-sm); }
.card.soft { background: var(--bg-card); border-color: transparent; box-shadow: none; }
.card.accent { background: var(--accent-tint); border-color: transparent; box-shadow: none; }
.card-title { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin: 0 0 0.35rem; }
.grid { display: grid; gap: 1.5rem; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- feature --- */
.feature { padding: 1.75rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); margin-bottom: 1rem; }
.feature-icon svg { width: 22px; height: 22px; }
.feature h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; margin-bottom: 0.4rem; }
.feature p { color: var(--text-2); margin: 0; font-size: 0.95rem; }

/* -------------------------------------------------------------- hero --- */
.hero { position: relative; padding: 4.5rem 0 3rem; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 3rem; align-items: center; }
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } .hero { padding-top: 3rem; } }
.hero h1 { margin-bottom: 1.2rem; }
.hero .lead { margin-bottom: 2rem; }
/* "Is Modulysa for me?": a line of its own under the hero's buttons (views/fit.py). The films keep the hero as it was. */
.hero-art { position: relative; width: 100%; aspect-ratio: 1 / 1; max-width: 480px; margin: 0 auto; }
.hero-blob { position: absolute; inset: 0; border-radius: 42% 58% 60% 40% / 45% 40% 60% 55%; background: radial-gradient(circle at 30% 30%, #bfdbfe 0%, #e0e7ff 45%, #fde68a 100%); opacity: 0.9; animation: blob 14s ease-in-out infinite alternate; }
@keyframes blob { to { border-radius: 58% 42% 40% 60% / 55% 60% 40% 45%; } }
.hero-wave { position: absolute; inset: 15% 10%; display: flex; align-items: center; justify-content: space-between; gap: 2%; }
.hero-wave span { display: block; flex: 1 1 0; height: 100%; border-radius: 999px; background: var(--accent); transform-origin: 50% 50%; animation: eq 2.2s ease-in-out infinite; will-change: transform; }
.hero-wave span:nth-child(odd) { background: var(--amber); }
.hero-wave span:nth-child(2n) { animation-delay: -0.4s; }
.hero-wave span:nth-child(3n) { animation-delay: -0.9s; }
.hero-wave span:nth-child(5n) { animation-delay: -1.5s; }
@keyframes eq { 0%, 100% { transform: scaleY(0.35); } 50% { transform: scaleY(1); } }
.hero-badge { position: absolute; background: #fff; border-radius: 14px; padding: 0.7rem 1rem; box-shadow: var(--shadow-md); display: flex; gap: 0.6rem; align-items: center; font-size: 0.85rem; font-weight: 600; }
.hero-badge .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--green); }
.hero-badge svg { flex: none; width: 20px; height: 20px; color: var(--accent); }
.hero-badge.b1 { top: 6%; inset-inline-start: -4%; }
.hero-badge.b2 { bottom: 12%; inset-inline-end: -6%; }
.hero-badge.b3 { bottom: -2%; inset-inline-start: 18%; }
@media (max-width: 640px) { .hero-badge.b1, .hero-badge.b2 { inset-inline-start: auto; inset-inline-end: 0; } .hero-badge.b3 { inset-inline-start: 0; } }

/* -------------------------------------------------------------- stats --- */
.stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.stats-bar .stat { background: #fff; padding: 1.4rem 1.5rem; }
.stat-number { font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--text); margin-bottom: 0.3rem; }
.stat-number small { font-size: 1.1rem; color: var(--text-3); }
.stat-label { font-size: 0.85rem; color: var(--text-3); }
.stat-sub { font-size: 0.8rem; color: var(--text-2); margin-top: 0.25rem; }
@media (max-width: 900px) { .stats-bar { grid-template-columns: repeat(2, 1fr); } }

/* -------------------------------------------------------------- steps --- */
.steps { counter-reset: step; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
@media (max-width: 900px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .steps { grid-template-columns: 1fr; } }
.step { position: relative; padding: 1.5rem 1.5rem 1.5rem; background: var(--bg-card); border-radius: var(--radius-lg); }
.step-num { font-family: var(--font-display); font-size: 2.6rem; color: var(--accent); line-height: 1; margin-bottom: 0.75rem; opacity: 0.9; }
.step h3 { font-family: var(--font-body); font-size: 1.05rem; font-weight: 600; margin-bottom: 0.35rem; }
.step p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

/* ----------------------------------------------------------- outcomes --- */
.outcome { display: flex; gap: 1rem; align-items: flex-start; padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.outcome:last-child { border-bottom: 0; }
.outcome .check { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--green-tint); color: var(--green); display: grid; place-items: center; margin-top: 0.1rem; }
.outcome .check svg { width: 16px; height: 16px; }
.outcome h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.02rem; margin-bottom: 0.2rem; }
.outcome p { margin: 0; color: var(--text-2); font-size: 0.95rem; }

/* ------------------------------------------------------------ pricing --- */
.pricing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: stretch; }
@media (max-width: 800px) { .pricing { grid-template-columns: 1fr; } }
.price-card { position: relative; display: flex; flex-direction: column; padding: 2rem; border-radius: var(--radius-xl); background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-sm); }
.price-card.featured { border-color: var(--accent); box-shadow: 0 20px 50px var(--accent-glow); }
.price-card .ribbon { position: absolute; top: -12px; inset-inline-start: 2rem; background: var(--accent); color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.3rem 0.8rem; border-radius: 999px; }
.price { font-family: var(--font-display); font-size: 3rem; line-height: 1; margin: 1rem 0 0.25rem; }
.price small { font-family: var(--font-body); font-size: 0.95rem; color: var(--text-3); }
.price-card ul { list-style: none; padding: 0; margin: 1.25rem 0 1.75rem; flex: 1; }
.price-card li { display: flex; gap: 0.6rem; padding: 0.4rem 0; color: var(--text-2); font-size: 0.95rem; }
.price-card li svg { flex: none; width: 18px; height: 18px; color: var(--green); margin-top: 0.2rem; }

/* ----------------------------------------------------------------- faq --- */
.faq details { border-bottom: 1px solid var(--border); padding: 0.4rem 0; }
.faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; padding: 0.9rem 0; font-weight: 600; font-size: 1.02rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; color: var(--accent); font-size: 1.4rem; line-height: 1; transition: transform 0.2s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--text-2); margin: 0 0 1rem; max-width: 46rem; }

/* ------------------------------------------------------------- quotes --- */
.quote-mark { display: block; width: 28px; height: 28px; color: var(--accent); margin-bottom: 0.9rem; }
.quote-mark svg { width: 100%; height: 100%; }
[dir="rtl"] .quote-mark svg { transform: scaleX(-1); }
figure.quote, .spotlight { margin: 0; }
.quote blockquote, .spotlight blockquote, .endorsement blockquote { margin: 0; }
.quote { padding: 1.75rem; border-radius: var(--radius-lg); background: var(--bg-card); }
.quote p { font-family: var(--font-display); font-size: 1.15rem; line-height: 1.5; margin: 0 0 1rem; color: var(--text); }
.quote figcaption { font-size: 0.85rem; color: var(--text-3); }
/* The landing's family quote: a white card with the hairline border, so the blue "Is Modulysa for me?" card under it stays
   the only tinted one */
.spotlight { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.5rem, 6vw, 5rem); border: 1px solid var(--border); border-radius: var(--radius-xl); background: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.spotlight .quote-mark { width: 40px; height: 40px; margin: 0 auto 1.25rem; }
.spotlight p { max-width: 40rem; margin: 0 auto 1.25rem; font-family: var(--font-display); font-size: clamp(1.45rem, 3.2vw, 2.1rem); line-height: 1.3; color: var(--text); }
.spotlight figcaption { font-size: 0.9rem; font-weight: 500; color: var(--text-2); }
.endorsement { max-width: 44rem; margin: 3.5rem auto 0; text-align: center; }
.endorsement .quote-mark { margin: 0 auto 1rem; }
.endorsement p { margin: 0 0 0.9rem; font-family: var(--font-display); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.4; color: var(--text); }
.endorsement figcaption { font-size: 0.9rem; font-weight: 500; color: var(--text-2); }
/* A grid on wide screens; a swipeable row on phones so the quotes don't make a long scroll. */
.quote-wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.quote-wall .quote { display: flex; flex-direction: column; }
.quote-wall .quote figcaption { margin-top: auto; }
@media (max-width: 1000px) { .quote-wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .quote-wall { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: -1.25rem; padding: 0 1.25rem 0.25rem; scroll-padding-inline: 1.25rem; scrollbar-width: none; }
  .quote-wall::-webkit-scrollbar { display: none; }
  .quote-wall .quote { flex: 0 0 85%; scroll-snap-align: start; }
}

/* ------------------------------------------------------------- footer --- */
.footer { border-top: 1px solid var(--border); background: var(--bg-soft); padding: 3rem 0 2rem; margin-top: 3rem; font-size: 0.9rem; color: var(--text-2); }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h4 { margin-bottom: 0.6rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.footer ul { list-style: none; padding: 0; margin: 0; }
.footer li { margin-bottom: 0.4rem; }
.footer a { color: var(--text-2); }
.footer a:hover { color: var(--accent); }
.footer-bottom { border-top: 1px solid var(--border); padding-top: 1.25rem; display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; font-size: 0.8rem; color: var(--text-3); }

/* ------------------------------------------------------------ language --- */
.lang { position: relative; }
.lang-btn { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 40px; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text-2); font-weight: 500; font-size: 0.88rem; cursor: pointer; }
.lang-btn:hover { background: var(--bg-card); }
.lang-btn svg { flex: none; width: 16px; height: 16px; }
.lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; min-width: 180px; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.4rem; display: none; z-index: 60; }
.lang-menu.open { display: block; }
.lang-menu button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.55rem 0.75rem; border: 0; background: transparent; border-radius: 8px; text-align: start; cursor: pointer; color: var(--text); font-size: 0.92rem; }
.lang-menu button:hover { background: var(--bg-card); }
.lang-menu button.current { color: var(--accent); font-weight: 600; }
.lang-menu a { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--text); font-size: 0.92rem; text-decoration: none; }
.lang-menu a:hover { background: var(--bg-card); }
.user-menu { position: relative; }
.user-menu .avatar { border: 0; cursor: pointer; font-family: inherit; }
.user-menu .avatar:hover, .user-menu .avatar[aria-expanded="true"] { box-shadow: 0 0 0 3px var(--accent-glow); }
.menu-head { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.45rem 0.75rem 0.65rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.menu-head strong { font-size: 0.92rem; }
.menu-head small { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-3); font-size: 0.8rem; }
.nav-soon { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.8rem; color: var(--text-3); font-weight: 500; font-size: 0.92rem; white-space: nowrap; cursor: default; }
.nav-soon small { padding: 0.1rem 0.45rem; border-radius: 999px; background: var(--amber-tint); color: #a05a00; font-size: 0.68rem; font-weight: 700; }
.nav-links a svg { width: 18px; height: 18px; flex: none; }
.nav-actions .btn-sm svg { width: 16px; height: 16px; }
@media (max-width: 1180px) { .nav-soon { padding: 0.45rem 0.55rem; font-size: 0.86rem; } }
@media (max-width: 1024px) { .nav-soon { padding: 0.75rem 0.85rem; } .nav-links .nav-listen, .nav-links .nav-listen:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; background: var(--accent); color: #fff; font-weight: 600; }
  /* Exercises sits under Listen as a second full-width pill, in a quiet tint so Listen stays the one call to action */
  .nav-links .nav-exercises, .nav-links .nav-exercises:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; background: var(--accent-tint); color: var(--accent); font-weight: 600; } }
.nav-links .nav-exercises svg { width: 16px; height: 16px; }
.nav-links .nav-space { border: 1px solid var(--border-strong); background: #fff; color: var(--text); font-weight: 600; }
.nav-links .nav-space:hover, .nav-links .nav-space.active { background: var(--bg-card); border-color: var(--bg-card); }
@media (max-width: 1024px) { .nav-links .nav-space, .nav-links .nav-space:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; } }
/* Navs can be wider than the space above 1024 px (role links, long languages; German and Spanish signed out). app.js
   measures it: .nav-compact tightens the links as the 1180 px rule does and drops the Exercises teaser, .nav-collapsed
   folds the links into the phone menu. */
/* The open phone menu scrolls on its own when it is taller than the screen (all languages are listed in it); the page behind stays put */
.nav-links.open { max-height: calc(100vh - var(--nav-h)); max-height: calc(100dvh - var(--nav-h)); overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
body.nav-open { overflow: hidden; }
.nav.nav-compact .nav-soon-item { display: none; }
.nav.nav-compact .nav-links a { padding: 0.45rem 0.55rem; font-size: 0.86rem; }
.nav.nav-compact .nav-actions .btn { padding-inline: 0.9rem; }
.nav.nav-collapsed .nav-links { position: absolute; top: var(--nav-h); inset-inline: 0; flex-direction: column; align-items: stretch; background: #fff; border-bottom: 1px solid var(--border); padding: 0.75rem 1.25rem 1rem; display: none; box-shadow: var(--shadow-md); }
.nav.nav-collapsed .nav-links.open { display: flex; }
.nav.nav-collapsed .nav-links a, .nav.nav-collapsed .nav-soon { padding: 0.75rem 0.85rem; border-radius: 10px; }
.nav.nav-collapsed .nav-soon-item { display: list-item; }
.nav.nav-collapsed .hamburger { display: flex; }
.nav.nav-collapsed .nav-actions .hide-mobile { display: none; }
.nav.nav-collapsed .nav-links .mobile-only { display: block; }
.nav.nav-collapsed .nav-links .nav-listen, .nav.nav-collapsed .nav-links .nav-listen:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; background: var(--accent); color: #fff; font-weight: 600; }
.nav.nav-collapsed .nav-links .nav-exercises, .nav.nav-collapsed .nav-links .nav-exercises:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; background: var(--accent-tint); color: var(--accent); font-weight: 600; }
.nav.nav-collapsed .nav-links .nav-space, .nav.nav-collapsed .nav-links .nav-space:hover { display: flex; justify-content: center; margin-bottom: 0.35rem; }

/* Signed-in navigation: Listen is a filled pill first in the list; About Modulysa is a dropdown for listeners
   (desktop) and a flat group in the phone menu; admins and country managers see the practice they have opened. */
.nav-links .nav-listen, .nav-links .nav-listen:hover { background: var(--accent); color: #fff; font-weight: 600; box-shadow: 0 6px 16px var(--accent-glow); }
.nav-links .nav-listen.active, .nav-links .nav-listen:active { background: var(--accent-strong); color: #fff; box-shadow: none; }
.nav-links .nav-listen + .nav-soon-item { margin-inline-start: 0.35rem; }
.nav-links a .count { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--amber); color: #fff; font-size: 0.68rem; font-weight: 700; display: inline-grid; place-items: center; margin-inline-start: 0.1rem; }
.nav-drop, .nav-split { position: relative; display: inline-flex; align-items: center; }
.nav-drop-btn { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.5rem 0.65rem 0.5rem 0.8rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: inherit; font-weight: 500; font-size: 0.92rem; white-space: nowrap; cursor: pointer; }
.nav-drop-btn:hover, .nav-drop-btn.active, .nav-drop-btn[aria-expanded="true"] { background: var(--bg-card); color: var(--text); }
.nav-drop-btn svg, .nav-caret svg { width: 14px; height: 14px; flex: none; }
.nav-drop .lang-menu, .nav-split .lang-menu { inset-inline-end: auto; inset-inline-start: 0; }
.nav-split .nav-practice { padding-inline-end: 0.5rem; }
.nav-practice-name { max-width: 11rem; overflow: hidden; text-overflow: ellipsis; }
.nav-caret { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-start: -0.35rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-2); cursor: pointer; }
.nav-caret:hover, .nav-caret[aria-expanded="true"] { background: var(--bg-card); color: var(--text); }
.nav-group { border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.3rem; }
.nav-group-btn { display: flex; width: 100%; align-items: center; gap: 0.5rem; padding: 0.75rem 0.85rem; border: 0; border-radius: 10px; background: transparent; font: inherit; font-weight: 500; font-size: 0.95rem; color: var(--text-2); cursor: pointer; text-align: start; }
.nav-group-btn:hover, .nav-group.open .nav-group-btn { background: var(--bg-card); color: var(--text); }
.nav-group-btn > svg { width: 16px; height: 16px; flex: none; margin-inline-start: auto; transition: transform 0.15s; }
.nav-group.open .nav-group-btn > svg { transform: rotate(180deg); }
.nav-group-now { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; color: var(--text-3); margin-inline-start: 0.25rem; }
.nav-group-list { display: none; list-style: none; margin: 0; padding: 0 0 0.3rem 0.6rem; }
.lang-menu .menu-group-fold { margin: 0 0 0.2rem; padding: 0 0 0.2rem; border-top: 0; border-bottom: 1px solid var(--border); }
.lang-menu .menu-group-fold .nav-group-btn { padding: 0.5rem 0.75rem; font-size: 0.92rem; }
.lang-menu .menu-group-fold .nav-group-list { padding: 0 0 0.2rem; }
.nav-group.open .nav-group-list { display: block; }
.nav-group-label { padding: 0.9rem 0.85rem 0.25rem; margin-top: 0.35rem; border-top: 1px solid var(--border); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.menu-group { padding-bottom: 0.3rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.menu-label { display: block; padding: 0.35rem 0.75rem 0.2rem; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
@media (max-width: 1180px) { .nav-drop-btn { padding: 0.45rem 0.5rem 0.45rem 0.55rem; font-size: 0.86rem; } .nav-practice-name { max-width: 8rem; } }
@media (max-width: 1024px) { .nav-links .desktop-only { display: none; } }
.nav.nav-collapsed .nav-links .desktop-only { display: none; }
.lang-menu .code { font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }

/* ------------------------------------------------------------ messages --- */
.messages { position: fixed; top: calc(var(--nav-h) + 12px); inset-inline-end: 1rem; z-index: 90; display: flex; flex-direction: column; gap: 0.5rem; max-width: min(420px, calc(100vw - 2rem)); }
.msg { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: 12px; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); font-size: 0.92rem; animation: slidein 0.25s ease; }
@keyframes slidein { from { opacity: 0; transform: translateY(-6px); } }
.msg > svg { width: 18px; height: 18px; flex: none; margin-top: 0.1rem; color: var(--accent); }
.msg.success > svg { color: var(--green); }
.msg.error > svg { color: var(--red); }
.msg.warning > svg { color: var(--amber); }
.msg button { margin-inline-start: auto; border: 0; background: transparent; color: var(--text-3); cursor: pointer; font-size: 1.1rem; line-height: 1; }

/* ---------------------------------------------------------------- forms --- */
.form-grid { display: grid; gap: 1.1rem; }
.form-grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .form-grid.cols-2 { grid-template-columns: 1fr; } }
.field { display: flex; flex-direction: column; gap: 0.35rem; }
.field.span-2 { grid-column: 1 / -1; }
.field label, .field .label { font-weight: 600; font-size: 0.9rem; color: var(--text); }
.field .help { font-size: 0.8rem; color: var(--text-3); }
.simple .field .help, .simple .field .muted.tiny { display: none; }
.more { border: 1px dashed var(--border-strong); border-radius: 12px; padding: 0.25rem 1rem; }
.more summary { cursor: pointer; font-weight: 600; font-size: 0.9rem; padding: 0.6rem 0; color: var(--text-2); list-style: none; display: flex; justify-content: space-between; }
.more summary::-webkit-details-marker { display: none; }
.more summary::after { content: '+'; color: var(--accent); font-size: 1.2rem; line-height: 1; }
.more[open] summary::after { content: '-'; }
.more .form-grid { padding: 0.25rem 0 1rem; }
.big-action { display: grid; gap: 1.5rem; grid-template-columns: 1fr; align-items: start; }
.invite-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--border); }
.invite-row:last-child { border-bottom: 0; }
.invite-row .who { flex: 1 1 220px; }
.invite-row .copy-box { flex: 1 1 320px; margin: 0; }
.invite-row .copy-box .input { min-height: 38px; font-size: 0.8rem; }
.field .errors { font-size: 0.82rem; color: var(--red); }
.input { width: 100%; min-height: 46px; padding: 0.65rem 0.9rem; border: 1.5px solid var(--border-strong); border-radius: 10px; background: #fff; font: inherit; color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; }
.input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.input[readonly], .input:disabled { background: var(--bg-card); color: var(--text-2); }
.textarea { min-height: 110px; resize: vertical; }
.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%234b4f5c' stroke-width='2'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.8rem center; padding-inline-end: 2.4rem; }
[dir="rtl"] .select { background-position: left 0.8rem center; }
.field.has-error .input { border-color: var(--red); }
.check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.95rem; }
.check input { width: 18px; height: 18px; margin-top: 0.2rem; accent-color: var(--accent); flex: none; }
.choice-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0.4rem; }
.choice-list li, .choice-list > div { display: block; }
.choice-list label { display: flex; gap: 0.6rem; align-items: center; padding: 0.55rem 0.75rem; border: 1px solid var(--border); border-radius: 10px; font-weight: 500; font-size: 0.92rem; cursor: pointer; background: #fff; }
.choice-list label:hover { background: var(--bg-card); }
.choice-list input { width: 17px; height: 17px; accent-color: var(--accent); flex: none; }
.file-input { font-size: 0.9rem; }
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin-top: 1.5rem; }
.nonfield { background: var(--red-tint); color: var(--red); border-radius: 10px; padding: 0.75rem 1rem; font-size: 0.9rem; margin-bottom: 1rem; }
.auth-wrap { min-height: calc(100vh - var(--nav-h)); display: grid; place-items: center; padding: 2rem 1rem; background: radial-gradient(1200px 600px at 20% -10%, var(--accent-tint), transparent 60%), radial-gradient(800px 500px at 110% 110%, var(--amber-tint), transparent 60%); }
.auth-card { width: 100%; max-width: 440px; background: #fff; border-radius: var(--radius-xl); padding: 2.25rem; box-shadow: var(--shadow-lg); border: 1px solid var(--border); }
.auth-card.wide { max-width: 560px; }
.auth-card h1 { font-size: 2rem; margin-bottom: 0.4rem; }
@media (max-width: 480px) { .auth-card { padding: 1.5rem; border-radius: var(--radius-lg); } }

/* ---------------------------------------------------------- app layout --- */
/* Every signed-in page shares one container width, so the top nav never moves between Listen, My practice, Administration, Profile and the About pages. Signed-out pages keep 1120px. */
body.signed-in, body.app-shell { --container: 1320px; }
.app { display: grid; grid-template-columns: 230px 1fr; min-height: calc(100vh - var(--nav-h)); max-width: var(--container); width: 100%; margin: 0 auto; }
.app > * { min-width: 0; }
.app.app-solo { grid-template-columns: 1fr; }
.app.app-solo > .sidebar { display: none; }
.sidebar nav { min-width: 0; }
.sidebar { border-inline-end: 1px solid var(--border); background: var(--bg-soft); padding: 1.5rem 1rem; }
.sidebar-title { font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); padding: 0 0.75rem; margin: 0 0 0.6rem; font-weight: 700; }
.sidebar nav a { display: flex; gap: 0.7rem; align-items: center; padding: 0.6rem 0.75rem; border-radius: 10px; color: var(--text-2); font-weight: 500; font-size: 0.93rem; margin-bottom: 2px; }
.sidebar nav a svg { width: 18px; height: 18px; flex: none; opacity: 0.8; }
.sidebar nav a:hover { background: #fff; color: var(--text); }
.sidebar nav a.active { background: #fff; color: var(--accent); box-shadow: var(--shadow-sm); }
.sidebar .group { margin-bottom: 1.5rem; }
/* Grouped side menu: the pages under small group headings. The action buttons in the markup are for the phone's
   "More" sheet only (the script copies them there); on a desktop the pages carry their own action buttons. */
.sidebar-actions { display: none; }
.sidebar-group { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; margin: 0.9rem 0 0.3rem; padding: 0 0.75rem; }
.sidebar nav > .sidebar-group:first-child { margin-top: 0.4rem; }
.app-main { padding: 2rem 1.75rem 4rem; min-width: 0; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.75rem; }   /* top-aligned: the title sits at the same height on every page, whatever the button row measures */
.page-head h1 { font-size: 2rem; margin: 0; }
.page-head .sub { color: var(--text-3); margin: 0.2rem 0 0; }
/* The title block takes the room and the buttons stay on its right; a long subtitle wraps instead of pushing them down */
.page-head > div:first-child { flex: 1 1 420px; min-width: 0; }
.page-head > .btn, .page-head > form { flex: none; }
.page-head > .btn-row { flex: 0 1 auto; max-width: 100%; }   /* keeps its own width, but on a phone it wraps instead of widening the page */
/* The head's buttons at the size of .btn-sm, icons included, so that a row of four stays one row at 1180 px. With a
   large system font they grow only so far (min): in rem alone the four on a listener page needed 980 px of the 900
   there in Swedish. */
.page-head .btn-row { gap: min(0.5rem, 8px); }
.page-head .btn-row .btn { min-height: 36px; padding: min(0.4rem, 7px) min(0.9rem, 14px); gap: min(0.4rem, 6px); font-size: min(0.85rem, 15px); }
.page-head .btn-row .btn svg { width: 16px; height: 16px; }

/* -------------------------------------------------------------- guides --- */
.guide-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.guide-card { display: flex; flex-direction: column; gap: 0.9rem; align-items: stretch; color: var(--text); }
.guide-card:hover { border-color: var(--accent); }
.guide-card .feature-icon { margin: 0; flex: none; }
/* the guide's thumbnail: its opening card in small, the dark blue with the logo and the guide's title */
.guide-thumb { position: relative; flex: none; width: 100%; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; background: #0b1222; color: #fff;
               display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; text-align: center; }
.guide-thumb .glow { position: absolute; left: 50%; top: 45%; width: 90%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
                     background: radial-gradient(closest-side, rgba(37, 99, 235, 0.32), rgba(37, 99, 235, 0)); }
.guide-thumb .wordmark { position: relative; display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-display); font-size: 1.7rem; line-height: 1; direction: ltr; white-space: nowrap; }
.guide-thumb .mark { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--accent), #60a5fa); display: grid; place-items: center; box-shadow: 0 6px 18px rgba(37, 99, 235, 0.45); }
.guide-thumb .mark svg { width: 18px; height: 18px; color: #fff; }
.guide-thumb .title { position: relative; max-width: 85%; font-size: 0.82rem; line-height: 1.3; color: #cbd5e1; }
.guide-btn svg { width: 14px; height: 14px; }
.guide-drop .lang-menu { min-width: 240px; inset-inline-start: 0; }
.guide-drop .btn svg:last-child { width: 12px; height: 12px; margin-inline-start: 0.1rem; }
.game-showcase { width: 100%; }
.game-grid.compact { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 0.6rem; }
.game-grid.compact .game-body { padding: 0.5rem 0.6rem 0.6rem; gap: 0.1rem; }
.game-grid.compact .game-top .track-pill { display: none; }
.game-grid.compact .card-title { font-size: 0.82rem; }
.guide { display: grid; gap: 1rem; }
.guide-intro { max-width: 62ch; color: var(--text-2); font-size: 1rem; }
.guide-pip { position: absolute; right: 1.5rem; bottom: 1.5rem; width: 220px; border-radius: 16px; box-shadow: var(--shadow-lg); background: #000; z-index: 6; }
.guide-stage { position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-lg); border: 1px solid var(--border); background: var(--bg-soft); box-shadow: var(--shadow-lg); }
.guide-canvas { position: absolute; top: 0; left: 0; width: 1120px; transform-origin: top left; min-height: 0; pointer-events: none; user-select: none; }
.guide-canvas.app { grid-template-columns: 220px 1fr; max-width: none; margin: 0; }
.guide-canvas .app-main { padding: 1.5rem 1.75rem 2rem; position: relative; height: 100%; overflow: hidden; }
.guide-canvas.no-side { grid-template-columns: 1fr; }
.guide-canvas.no-side .sidebar { display: none; }
.guide-topbar { display: flex; justify-content: space-between; align-items: center; margin: -0.5rem 0 1.25rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--border); }
.guide-topbar .brand { font-size: 1.25rem; }
.guide-topbar .brand-mark { width: 28px; height: 28px; }
.guide-topbar .brand-mark svg { width: 16px; height: 16px; }
.guide-canvas .page-head { margin-bottom: 1.25rem; }
.guide-canvas .page-head h1 { font-size: 1.7rem; }
.guide-canvas .table th, .guide-canvas .table td { padding-inline: 0.75rem; }
.guide-scene { display: none; }
.guide-scene.on { display: block; animation: guidefade 0.4s ease; }
@keyframes guidefade { from { opacity: 0; } }
.guide-canvas .is-focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); border-radius: 10px; transition: box-shadow 0.3s; }
.guide-canvas th.is-focus, .guide-canvas td.is-focus { box-shadow: none; outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 0; }
.guide-canvas .stat.is-focus { box-shadow: inset 0 0 0 3px var(--accent); border-radius: 0; }
.guide-canvas .flash:not(tr) { animation: guiderow 1.2s ease; }
.guide-canvas .btn.pressed { transform: scale(0.97); background: var(--accent-strong); }
.guide-canvas tr.flash td { animation: guiderow 1.2s ease; }
@keyframes guiderow { 0% { background: var(--accent-tint); } 100% { background: transparent; } }
.guide-cursor { position: absolute; left: 60%; top: 60%; width: 22px; height: 22px; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0,0,0,0.3)); transition: left 0.9s cubic-bezier(.4,.1,.2,1), top 0.9s cubic-bezier(.4,.1,.2,1); }
.guide-cursor.click::after { content: ""; position: absolute; left: -9px; top: -9px; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--accent); animation: guidering 0.5s ease-out; }
@keyframes guidering { from { transform: scale(0.3); opacity: 1; } to { transform: scale(1.2); opacity: 0; } }
.guide-phone { position: absolute; right: 2rem; top: 1.5rem; width: 240px; border-radius: 28px; background: #fff; border: 8px solid #15161c; box-shadow: var(--shadow-lg); padding: 1rem 1rem 1.1rem; text-align: center; }
.guide-phone .onb-art { width: 130px; margin: 0.25rem auto 0.75rem; }
.guide-phone h2 { font-size: 1.25rem; margin: 0.2rem 0 0.3rem; }
.guide-phone p { font-size: 0.72rem; color: var(--text-2); line-height: 1.45; margin: 0 0 0.8rem; }
.guide-phone .btn { font-size: 0.85rem; }
.guide-phone .field label { font-size: 0.65rem; margin-bottom: 0.15rem; }
.guide-phone .input { font-size: 0.75rem; padding: 0.3rem 0.5rem; min-height: 0; }
.guide-canvas .auth-wrap { min-height: 0; padding: 1rem 1rem 2rem; }
.guide-onb { display: flex; flex-direction: column; min-height: 100%; margin: -1.5rem -1.75rem -2rem; padding-bottom: 1rem; background: radial-gradient(1200px 600px at 20% -10%, var(--accent-tint), transparent 60%), radial-gradient(800px 500px at 110% 110%, var(--amber-tint), transparent 60%); }
.guide-onb .onb-step { display: flex; }
.guide-onb .onb-art { width: 150px; margin-bottom: 1rem; }
.guide-onb .onb-step h1 { font-size: 2rem; }
.guide-onb .onb-name { margin-top: 1rem; }
/* in a guide's stage the welcome keeps Next in view under the line about the questionnaire: a smaller picture */
.guide-stage .guide-onb .onb-art { width: 100px; margin-bottom: 0.75rem; }
.guide-onb .onb-note { margin-top: 0.75rem; }
.guide-onb .onb-actions { padding-bottom: 0; }
.guide-player { grid-template-columns: 280px 1fr; }
.guide-player .player-card { position: static; }
.guide-player .player-card .cover { aspect-ratio: auto; height: 140px; }
.guide-focus { position: absolute; inset: 0; z-index: 4; background: #0b1020; color: #e8ecf7; overflow: hidden; }
.guide-focus-art { position: absolute; inset: 22% 8%; display: flex; align-items: center; justify-content: space-between; gap: 1.2%; }
.guide-focus-art span { display: block; flex: 1 1 0; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #7dd3fc, #6366f1); opacity: 0.85; transform-origin: 50% 50%; animation: eq 2.6s ease-in-out infinite; }
.guide-focus-art span:nth-child(2n) { animation-delay: -0.5s; opacity: 0.6; }
.guide-focus-art span:nth-child(3n) { animation-delay: -1.1s; }
.guide-focus-art span:nth-child(5n) { animation-delay: -1.7s; opacity: 0.7; }
.guide-focus .focus-track { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; }
.guide-focus .focus-top, .guide-focus .focus-bottom { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.guide-script summary { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; cursor: pointer; list-style: none; font-weight: 600; }
.guide-script summary::-webkit-details-marker { display: none; }
.guide-script summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid var(--text-3); border-bottom: 2px solid var(--text-3); transform: rotate(45deg); margin-inline-start: auto; transition: transform 0.2s; }
.guide-script[open] summary::after { transform: rotate(-135deg); }
.guide-script .guide-lines { margin-bottom: 1rem; }
.dropzone { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 2rem 1rem; border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--bg-soft); text-align: center; transition: border-color 0.15s, background 0.15s; }
.dropzone.over { border-color: var(--accent); background: var(--accent-tint); }
.dropzone > svg { width: 28px; height: 28px; color: var(--accent); margin-bottom: 0.25rem; }
.upload-log { margin: 1rem 0 0; padding: 0 0 0 1.25rem; font-size: 0.88rem; color: var(--text-2); display: grid; gap: 0.25rem; max-height: 16rem; overflow: auto; }
.upload-log li.ok { color: var(--green); }
.upload-log li.err { color: var(--red); }
table.recordings td { vertical-align: top; }
table.recordings .inline-form { margin-top: 0.25rem; }
.guide-caption { min-height: 4rem; display: flex; align-items: center; justify-content: center; text-align: center; padding: 0.9rem 1.2rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); font-size: 1.05rem; }
.guide-transport { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; }
.guide-transport .ctrl.main { width: 54px; height: 54px; }
.guide-bar { flex: 1 1 200px; height: 6px; display: flex; gap: 3px; }
.guide-bar span { flex: 1; border-radius: 999px; background: var(--bg-card); position: relative; overflow: hidden; }
.guide-bar span::after { content: ""; position: absolute; inset: 0; background: var(--accent); transform: scaleX(var(--p, 0)); transform-origin: left; }
.guide-lines { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.guide-lines li { display: grid; grid-template-columns: 2.4rem 1fr; gap: 0.6rem; padding: 0.6rem 0.75rem; border-radius: 10px; border: 1px solid transparent; cursor: pointer; font-size: 0.95rem; }
.guide-lines li:hover { background: var(--bg-soft); }
.guide-lines li.on { border-color: var(--accent); background: var(--accent-tint); }
.guide-lines .n { color: var(--text-3); font-variant-numeric: tabular-nums; }
.guide-lines li.on .n { color: var(--accent); font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .guide-cursor { transition: none; } .guide-scene.on { animation: none; } }
/* The canvas always shows the desktop interface at 1120px, whatever the viewer's screen: the phone breakpoints further
   down must not fold its menu into a top bar, stack its forms or lift the player card above the Focus screen */
.guide-canvas.app { grid-template-rows: none; }
.guide-canvas .sidebar { border-inline-end: 1px solid var(--border); border-bottom: 0; padding: 1.5rem 1rem; }
.guide-canvas .sidebar nav { display: block; overflow: visible; padding-bottom: 0; }
.guide-canvas .sidebar nav a { white-space: normal; width: auto; }
.guide-canvas .sidebar .group { display: block; margin-bottom: 1.5rem; }
.guide-canvas .sidebar-title { display: block; }
.guide-canvas .form-grid.cols-2, .guide-canvas .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-canvas .stats-bar { grid-template-columns: repeat(4, 1fr); }
.guide-canvas .player-layout { grid-template-columns: 280px 1fr; gap: 2rem; }
.guide-canvas .player-card { position: static; z-index: auto; margin: 0; border-radius: var(--radius-xl); border-inline: 1px solid var(--border); }
.guide-canvas .player-card .cover { display: block; }
.guide-canvas table.table { font-size: 0.92rem; }
.guide-canvas .table th { font-size: 0.72rem; }
.guide-canvas .table .col-role { display: table-cell; }
.guide-canvas .role-inline { display: none; }
/* The narrator's video moves to the other corner when a scene shows the listener's phone on the right */
.guide-canvas:has(.guide-scene.on .guide-phone) .guide-pip { right: auto; left: 1.5rem; }   /* the video is on the canvas, beside the column */
/* The questionnaires guide draws the practitioner's pages with followup.css (Guide.styles): its narrow-screen layouts
   stay out of the 1120 px canvas. A respondent's link page needs a few rules of questionnaire.css, which cannot load
   beside followup.css (the two share class names), so its card and its pills are drawn here. */
.guide-canvas .q-radars { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
.guide-canvas .q-radars.single { grid-template-columns: minmax(0, 1fr); }
.guide-canvas .q-two { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
.guide-canvas .q-goal { grid-template-columns: minmax(0, 1fr) minmax(0, 420px) 6.5rem; gap: 1.25rem; }
.guide-canvas .q-goal > .q-chart { grid-column: auto; grid-row: auto; }
.guide-canvas .q-goal.axis > div { display: block; }
.guide-canvas .q-db-row { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.guide-canvas .q-db-row.head .q-db-label { display: inline; }
.guide-canvas .q-share-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.guide-canvas .q-status td { white-space: normal; }   /* the card as at 1120 px: a long badge wraps in its cell */
.guide-canvas .q-status .badge { white-space: normal; border-radius: 10px; line-height: 1.3; }
.guide-canvas .q-wrap { padding-block: 1rem; }
.guide-canvas .q-lead { margin-bottom: 1.25rem; font-size: 1.05rem; }
.guide-canvas .q-foot { margin: 1.5rem 0 0; }
.guide-canvas .q-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.guide-canvas .q-opt { position: relative; display: block; min-width: 0; }
.guide-canvas .q-opt input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.guide-canvas .q-opt span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 0.5rem; border: 1.5px solid var(--border-strong); border-radius: 999px; background: var(--bg); color: var(--text); font-size: 0.92rem; font-weight: 600; line-height: 1.2; text-align: center; }
.guide-canvas .q-opt input:checked + span { background: var(--accent); border-color: var(--accent); color: var(--bg); box-shadow: 0 6px 16px var(--accent-glow); }
/* Full screen: the Fullscreen API where it exists, a fixed overlay elsewhere (iPhone). guide.js sizes the stage to the
   largest 16:10 box that leaves room for the caption and the controls */
.guide-full-btn { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 8; display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--border); border-radius: 10px; background: rgba(255, 255, 255, 0.92); color: var(--text-2); cursor: pointer; box-shadow: var(--shadow-sm); opacity: 0.75; transition: opacity 0.2s; }
.guide-full-btn svg { width: 18px; height: 18px; }
.guide-full-btn:hover, .guide-full-btn:focus-visible { opacity: 1; color: var(--accent); border-color: var(--accent); }
.guide.guide-full { position: fixed; inset: 0; z-index: 200; box-sizing: border-box; width: auto; height: auto; max-width: none; margin: 0; padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); overflow: auto; background: var(--bg); gap: 0.75rem; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; grid-template-areas: "stage" "caption" "transport"; align-content: center; justify-items: center; }
.guide.guide-full::backdrop { background: var(--bg); }
.guide.guide-full .guide-stage { grid-area: stage; align-self: center; max-width: 100%; }
.guide.guide-full .guide-caption { grid-area: caption; }
.guide.guide-full .guide-transport { grid-area: transport; justify-content: center; }
.guide.guide-full .guide-caption, .guide.guide-full .guide-transport { width: 100%; max-width: 72rem; justify-self: center; }
.guide.guide-full .guide-script, .guide.guide-full .guide-lines { display: none; }
html.guide-full-lock { overflow: hidden; }
/* A phone held sideways: the stage fills the height, the caption and the controls sit beside it */
@media (max-height: 560px) and (orientation: landscape) {
  .guide.guide-full { grid-template-columns: minmax(0, 1fr) minmax(13rem, 32%); grid-template-rows: minmax(0, 1fr) auto; grid-template-areas: "stage caption" "stage transport"; align-content: stretch; }
  .guide.guide-full .guide-caption { align-self: end; min-height: 0; font-size: 0.92rem; padding: 0.7rem 0.9rem; }
  .guide.guide-full .guide-transport { align-self: start; }
}

/* -------------------------------------------------------- focus screen --- */
.focus-open { margin-top: 0.9rem; }
.focus-open svg { width: 18px; height: 18px; }
.exercise-prompt { margin-top: 0.9rem; padding: 0.9rem 1rem; border-radius: var(--radius-md); background: var(--accent-tint); text-align: center; }
.exercise-prompt strong { display: block; }
.exercise-prompt .small { display: block; margin-top: 0.1rem; }
.exercise-prompt .btn { margin-top: 0.7rem; }
.focus { position: fixed; inset: 0; z-index: 1000; background: #0b1020; color: #e8ecf7; }
.focus canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.focus-hud { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between; padding: max(1rem, env(safe-area-inset-top, 0px)) 1.25rem max(1.25rem, env(safe-area-inset-bottom, 0px)); pointer-events: none; }
.focus-hud > * { pointer-events: auto; }
.focus-top, .focus-bottom { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.focus-bottom { align-items: flex-end; flex-wrap: wrap; }
.focus-track { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; min-width: 0; }
.focus-track span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focus-track .brand-mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; }
.focus-track .brand-mark svg { width: 16px; height: 16px; }
.focus-time { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; }
.focus-time small { display: block; font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(232,236,247,0.6); margin-top: 0.4rem; }
.focus-looks { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); }
.focus-looks button { border: 0; background: transparent; color: rgba(232,236,247,0.75); font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.4rem 0.85rem; border-radius: 999px; cursor: pointer; }
.focus-looks button[aria-pressed="true"] { background: #e8ecf7; color: #0b1020; }
.focus-ctrl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.08); color: #e8ecf7; display: grid; place-items: center; cursor: pointer; flex: none; }
.focus-ctrl.main { width: 60px; height: 60px; background: #e8ecf7; color: #0b1020; border: 0; }
.focus-ctrl svg { width: 20px; height: 20px; }
.focus-ctrl:focus-visible, .focus-looks button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.focus-hud.dim > * { opacity: 0; transition: opacity 0.8s; }
.focus-hud.dim .focus-bottom { opacity: 1; }
.focus-hud.dim .focus-bottom > * { opacity: 0; transition: opacity 0.8s; }
.focus-hud.dim .focus-time { opacity: 0.45; }
html.focus-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .focus-hud.dim > *, .focus-hud.dim .focus-bottom > * { transition: none; } }

/* ---------------------------------------------------------- onboarding --- */
.onb { min-height: calc(100vh - 0px); display: flex; flex-direction: column; background: radial-gradient(1200px 600px at 20% -10%, var(--accent-tint), transparent 60%), radial-gradient(800px 500px at 110% 110%, var(--amber-tint), transparent 60%); }
.onb-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; max-width: 640px; margin: 0 auto; padding: 1rem 1.25rem; }
.onb-top > * { min-width: 48px; }
.onb-back { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text-2); cursor: pointer; }
.onb-back svg { width: 18px; height: 18px; }
.onb-skip { background: none; border: 0; color: var(--text-3); font: inherit; font-size: 0.95rem; cursor: pointer; padding: 0.4rem 0; }
.onb-skip:hover { color: var(--text); }
.onb-dots { display: flex; gap: 6px; align-items: center; }
.onb-dots span { width: 8px; height: 8px; border-radius: 999px; background: var(--border-strong); transition: width 0.25s, background 0.25s; }
.onb-dots span.on { width: 28px; background: var(--accent); }
.onb-step { display: none; flex: 1; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 640px; margin: 0 auto; padding: 0.5rem 1.25rem 1.5rem; }
.onb-step.on { display: flex; }
.onb-step h1 { font-size: clamp(2rem, 6vw, 2.6rem); margin: 0 0 0.6rem; text-wrap: balance; }
.onb-step .lead { font-size: 1.05rem; margin: 0; max-width: 34rem; }
.onb-step .section-label { margin-bottom: 0.6rem; }
.onb-art { position: relative; width: min(300px, 70vw); aspect-ratio: 1 / 1; margin: 0 auto 2rem; }
.onb-tips { display: grid; gap: 0.75rem; width: 100%; max-width: 480px; text-align: start; margin: 1.75rem auto 0; }
.onb-tip { display: flex; gap: 0.9rem; align-items: center; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.9rem 1.1rem; box-shadow: var(--shadow-sm); }
.onb-tip .feature-icon { margin: 0; flex: none; }
.onb-tip strong { display: block; font-weight: 600; }
.onb-tip span:last-child { color: var(--text-2); font-size: 0.92rem; }
.onb-albums { display: grid; gap: 0.6rem; width: 100%; max-width: 480px; text-align: start; margin: 1.75rem auto 0; }
.onb-album { position: relative; display: flex; gap: 0.9rem; align-items: center; padding: 0.7rem 0.8rem; border-radius: var(--radius-lg); border: 2px solid var(--border); background: #fff; cursor: pointer; }
.onb-album input { position: absolute; opacity: 0; pointer-events: none; }
.onb-album:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }
.onb-album img, .onb-album .cover-mini { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: linear-gradient(135deg, #dbeafe, #fef3c7); display: grid; place-items: center; color: var(--accent); }
.onb-album .cover-mini svg { width: 24px; height: 24px; }
.onb-album > span:nth-of-type(2) { display: grid; min-width: 0; }
.onb-album strong { font-weight: 600; }
.onb-check { margin-inline-start: auto; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-card); color: transparent; flex: none; }
.onb-album:has(input:checked) .onb-check { background: var(--accent); color: #fff; }
.onb-check svg { width: 14px; height: 14px; }
.onb-actions { width: 100%; max-width: 640px; margin: 0 auto; padding: 0 1.25rem 1.5rem; }
.onb .auth-card { width: 100%; max-width: 560px; }
.onb-form { display: contents; }
.onb-name { width: 100%; max-width: 440px; margin-top: 1.5rem; text-align: start; }
.onb-note { width: 100%; max-width: 440px; margin: 1rem 0 0; text-align: start; }   /* the questionnaire, under the first step's fields */
.onb [hidden] { display: none !important; }

/* ------------------------------------------------------------ quota --- */
.quota { margin-top: 1rem; width: 100%; max-width: 26rem; }
.quota-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; flex-wrap: wrap; margin-bottom: 0.45rem; font-size: 0.93rem; color: var(--text-2); }
.quota-label strong { color: var(--text); font-weight: 600; }
.quota-bar { display: flex; height: 8px; border-radius: 999px; background: var(--bg-card); overflow: hidden; }
.quota-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--accent) 0%, #60a5fa 100%); transition: width 0.4s ease; }
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .sidebar { border-inline-end: 0; border-bottom: 1px solid var(--border); padding: 0.75rem 1rem; }
  .sidebar nav { display: flex; gap: 0.25rem; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  /* Each item is exactly as wide as its text, whatever the phone's font size: never shrink, never wrap */
  .sidebar nav a { white-space: nowrap; flex: 0 0 auto; width: max-content; max-width: none; }
  .sidebar .group { margin: 0; display: contents; }
  .sidebar-title { display: none; }
  /* The listener's side menu repeats the top menu, so on a phone it is left out (and the empty bar with it) */
  .sidebar .group.phone-hidden { display: none; }
  .app > .sidebar:not(:has(.group:not(.phone-hidden))) { display: none; }
  .app-main { padding: 1.5rem 1.25rem 3rem; }
}

/* -------------------------------------------------------------- tables --- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: #fff; }
.table-wrap.plain { border: 0; border-radius: 0; }
.card { min-width: 0; }
table.table { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
.table th { text-align: start; font-size: 0.72rem; letter-spacing: 0.06em; line-height: 1.3; text-transform: uppercase; color: var(--text-3); padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.table td { padding: 0.8rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafbfe; }
.table tr.ended td { opacity: 0.55; }
.table tr.ended:hover td { opacity: 0.85; }
.table tr.ended td { opacity: 0.55; }
.table tr.ended:hover td { opacity: 0.85; }
.table a.row-link { color: var(--text); font-weight: 600; }
.table a.row-link:hover { color: var(--accent); }
.table .actions { display: flex; gap: 0.4rem; justify-content: flex-end; }
.table .ua { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn-icon { display: inline-flex; align-items: center; justify-content: center; width: 36px; min-height: 36px; padding: 0.4rem; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; background: var(--accent-tint); color: var(--accent); font-weight: 700; font-size: 0.8rem; flex: none; }
.avatar.lg { width: 56px; height: 56px; font-size: 1.1rem; }
.who { display: flex; align-items: center; gap: 0.75rem; }
.who > div { min-width: 0; }
.who .name { font-weight: 600; }
.who .sub { font-size: 0.8rem; color: var(--text-3); }
/* The programme chooser beside a listener's name, when the listener has more than one: a pill opening a menu */
.who-title { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.75rem; }
.programme-pick { position: relative; }
.programme-pill { list-style: none; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.7rem 0.3rem 0.8rem; border-radius: 999px; background: var(--accent-tint); color: var(--accent); font-size: 0.85rem; font-weight: 600; white-space: nowrap; cursor: pointer; }
.programme-pill::-webkit-details-marker { display: none; }
.programme-pill svg { width: 14px; height: 14px; flex: none; transition: transform 0.2s; }
.programme-pick[open] .programme-pill svg { transform: rotate(180deg); }
.programme-menu { position: absolute; top: calc(100% + 6px); inset-inline-start: 0; min-width: 100%; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 0.4rem; z-index: 60; }
.programme-menu a { display: block; padding: 0.55rem 0.75rem; border-radius: 8px; color: var(--text); font-size: 0.92rem; text-decoration: none; white-space: nowrap; }
.programme-menu a:hover { background: var(--bg-card); }
.programme-menu a.current { color: var(--accent); font-weight: 600; }
/* Under the listening card: the extra sessions a practitioner added, and the form to add them */
.listen-extra { display: grid; gap: 0.75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.listen-extra > p { display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.listen-extra > p svg { width: 14px; height: 14px; flex: none; color: var(--accent); }
.add-sessions { display: grid; grid-template-columns: 14rem minmax(0, 1fr) auto; gap: 0.75rem 1rem; align-items: end; padding: 0.25rem 0 1rem; }
.add-sessions .field { margin: 0; }
.add-sessions .form-actions { margin: 0; }
@media (max-width: 640px) { .add-sessions { grid-template-columns: 1fr; } }
.role-inline { display: none; }

/* ------------------------------------------------------------- badges --- */
.badge { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; background: var(--bg-card); color: var(--text-2); white-space: nowrap; }
.badge.green { background: var(--green-tint); color: var(--green); }
.badge.amber { background: var(--amber-tint); color: #a05a00; }
.badge.red { background: var(--red-tint); color: var(--red); }
.badge.blue { background: var(--accent-tint); color: var(--accent); }
.badge.purple { background: #efe9fb; color: #5b3fa0; }

/* ------------------------------------------------------------ toolbar --- */
.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1rem; }
.toolbar .input { min-height: 42px; max-width: 320px; }
.toolbar .btn { min-height: 42px; }
.toolbar .check { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 42px; font-size: 0.9rem; cursor: pointer; }
.toolbar .select { max-width: 200px; }
.empty { text-align: center; padding: 3rem 1.5rem; color: var(--text-3); background: var(--bg-card); border-radius: var(--radius-lg); }
.empty h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--text-2); }

/* -------------------------------------------------------------- charts --- */
.chart { display: flex; align-items: flex-end; gap: 3px; height: 160px; padding-top: 0.5rem; }
.chart .bar { flex: 1; min-width: 4px; background: var(--accent); border-radius: 4px 4px 0 0; opacity: 0.85; position: relative; transition: opacity 0.15s; }
.chart .bar:hover { opacity: 1; }
.chart .bar.zero { background: var(--border); min-height: 3px; }
.chart .bar .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; font-size: 0.7rem; padding: 0.2rem 0.45rem; border-radius: 6px; white-space: nowrap; display: none; z-index: 2; }
.chart .bar:hover .tip { display: block; }
.chart-axis { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-3); margin-top: 0.4rem; }
.hbar { display: grid; grid-template-columns: minmax(120px, 1fr) 2fr auto; gap: 0.75rem; align-items: center; padding: 0.5rem 0; font-size: 0.92rem; }
.hbar .meter { height: 10px; border-radius: 999px; background: var(--bg-card); overflow: hidden; }
.hbar .fill { height: 100%; background: linear-gradient(90deg, var(--accent), #60a5fa); border-radius: 999px; }
.hbar .val { font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.hbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }

/* -------------------------------------------------------------- albums --- */
.album-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1.5rem; }
.album-card { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; color: var(--text); transition: transform 0.2s, box-shadow 0.2s; }
.album-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); color: var(--text); }
.cover { aspect-ratio: 1; background: linear-gradient(135deg, #dbeafe, #fef3c7); display: grid; place-items: center; color: var(--accent); position: relative; overflow: hidden; }
.cover img { width: 100%; height: 100%; object-fit: cover; }
.cover svg { width: 38%; height: 38%; opacity: 0.6; }
.cover .play { position: absolute; inset-inline-end: 12px; bottom: 12px; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--accent); display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; transform: translateY(6px); transition: all 0.2s; }
.album-card:hover .cover .play { opacity: 1; transform: none; }
.cover .play svg { width: 18px; height: 18px; opacity: 1; }
.album-meta { padding: 1rem 1.1rem 1.1rem; }
.album-meta h3 { font-family: var(--font-body); font-weight: 600; font-size: 1rem; margin: 0 0 0.2rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.album-meta p { margin: 0; font-size: 0.82rem; color: var(--text-3); }

/* -------------------------------------------------------------- player --- */
.player-layout { display: grid; grid-template-columns: 340px 1fr; gap: 2rem; align-items: start; }
@media (max-width: 900px) { .player-layout { grid-template-columns: 1fr; gap: 1rem; } }
.player-card { position: sticky; top: calc(var(--nav-h) + 1rem); background: #fff; border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-md); }
@media (max-width: 900px) { .player-card { position: sticky; top: var(--nav-h); z-index: 20; border-radius: 0 0 var(--radius-lg) var(--radius-lg); margin: 0 -1.25rem; border-inline: 0; } .player-card .cover { display: none; } }
.player-body { padding: 1.25rem 1.25rem 1.25rem; }
.now-playing { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); font-weight: 700; }
.now-title { font-weight: 600; font-size: 1.05rem; margin: 0.15rem 0 0.1rem; min-height: 1.5em; }
.now-status { font-size: 0.82rem; color: var(--text-3); min-height: 1.2em; }
.progress { position: relative; height: 8px; border-radius: 999px; background: var(--bg-card); cursor: pointer; margin: 1rem 0 0.4rem; overflow: hidden; }
.progress .buffered { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--accent-tint); }
.progress .played { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--accent); border-radius: 999px; }
.times { display: flex; justify-content: space-between; font-size: 0.78rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.controls { display: flex; justify-content: center; align-items: center; gap: 1rem; margin: 0.75rem 0 0.25rem; }
.ctrl { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--border); background: #fff; color: var(--text); display: grid; place-items: center; cursor: pointer; transition: background 0.15s; }
.ctrl:hover { background: var(--bg-card); }
.ctrl[disabled] { opacity: 0.35; cursor: default; }
.ctrl svg { width: 20px; height: 20px; }
.ctrl.main { width: 64px; height: 64px; background: var(--accent); color: #fff; border-color: transparent; box-shadow: 0 10px 24px var(--accent-glow); }
.ctrl.main:hover { background: var(--accent-strong); }
.ctrl.main svg { width: 26px; height: 26px; }
.volume { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.75rem; color: var(--text-3); }
.volume input { flex: 1; accent-color: var(--accent); }
.volume svg { width: 20px; height: 20px; flex: none; }
.track-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.track { display: grid; grid-template-columns: 2.2rem 1fr auto; align-items: center; gap: 0.75rem; padding: 0.85rem 1rem; border-bottom: 1px solid var(--border); cursor: pointer; transition: background 0.15s; }
.track:last-child { border-bottom: 0; }
.track:hover { background: #fafbfe; }
.track.done { background: var(--green-tint); }
.track.done:not(.active):hover { background: #d6f2e5; }
.track.active { background: var(--accent-tint); }
.track .num { color: var(--text-3); font-variant-numeric: tabular-nums; font-size: 0.85rem; text-align: center; }
.track.active .num { color: var(--accent); }
.track .title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.track .dur { font-size: 0.82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
/* A complete session: a green row with a check. The one up next: an arrow and a label. */
.track .mark-done, .track .mark-next { display: none; align-items: center; justify-content: center; vertical-align: middle; }
.track .num svg { width: 16px; height: 16px; }
.track.done .num .n, .track.next .num .n { display: none; }
.track.done .mark-done { display: inline-flex; color: var(--green); }
.track.next:not(.done) .mark-next { display: inline-flex; color: var(--accent); }
.track-note { display: inline-block; margin-inline-start: 0.5rem; font-size: 0.75rem; font-weight: 600; color: var(--accent); }
.track .next-note { display: none; }
.track.next .next-note { display: inline-block; padding: 0.1rem 0.55rem; border-radius: 999px; background: var(--accent); color: #fff; }
@media (max-width: 600px) { .track .title { white-space: normal; } }
.eq { display: inline-flex; gap: 2px; align-items: flex-end; height: 14px; }
.eq span { width: 3px; background: var(--accent); border-radius: 2px; animation: eq 1s ease-in-out infinite; height: 100%; transform-origin: bottom; }
.eq span:nth-child(2) { animation-delay: -0.3s; } .eq span:nth-child(3) { animation-delay: -0.6s; }

/* ------------------------------------------------------- sound check --- */
/* The dialog from includes/sound_check.html, run by soundcheck.js. The answer pads follow the B3 game's pads. */
.sc { width: min(440px, calc(100vw - 2rem)); max-height: calc(100vh - 2rem); max-height: calc(100dvh - 2rem); padding: 1.25rem 1.25rem 1.4rem; border: 0; border-radius: var(--radius-lg); background: #fff; color: var(--text); box-shadow: var(--shadow-lg); overflow-y: auto; }
.sc::backdrop { background: rgba(20, 22, 30, 0.45); }
.sc:not([open]) { display: none; }
.sc [hidden] { display: none !important; }
.sc-head { display: flex; align-items: center; gap: 0.85rem; }
.sc-head .feature-icon { margin: 0; flex: none; }
.sc-head > div { flex: 1 1 auto; min-width: 0; }
.sc-title { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; line-height: 1.3; }
.sc-label { display: block; font-size: 0.8rem; line-height: 1.4; color: var(--text-2); }
.sc-bar { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 1rem 0 0.25rem; }
.sc-bar span { height: 6px; border-radius: 999px; background: var(--bg-card-hover); }
.sc-bar span.on { background: var(--accent); }
.sc-changed { margin-top: 1rem; }
.sc section { font-size: 0.95rem; color: var(--text-2); }
.sc h3 { margin: 0.9rem 0 0.4rem; font-size: 1.4rem; }
.sc h3:focus { outline: none; }
.sc-intro { margin: 0.9rem 0 0; }
.sc-q { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.9rem 0 0.4rem; }
.sc-q h3 { margin: 0; }
.sc-stage { display: grid; justify-items: center; gap: 0.25rem; padding: 1rem 0; border-radius: var(--radius-md); background: var(--bg-soft); }
.sc-phones svg { width: 88px; height: 88px; color: var(--accent); stroke-width: 1.4; }
.sc-ears { display: flex; justify-content: space-between; width: 88px; padding: 0 14px; font-weight: 700; font-size: 0.9rem; color: var(--text-2); }
.sc-wave { width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.sc-wave svg { width: 40px; height: 40px; }
.sc-next { margin-top: 1.1rem; }
.sc-pads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0.9rem; }
.sc-pads.four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.sc-pad { height: 64px; border-radius: 16px; background: var(--bg-card); border: 2px solid var(--border-strong); font: inherit; font-size: 1.15rem; font-weight: 600; color: var(--text); cursor: pointer; transition: background 0.1s, transform 0.1s; }
.sc-pads.four .sc-pad { font-size: 1.6rem; }
.sc-pad.wide { width: 100%; height: 56px; margin-top: 10px; font-size: 1.05rem; }
.sc-pad:hover { background: var(--bg-card-hover); }
.sc-pad:active { transform: translateY(1px); }
.sc-pad:disabled { opacity: 0.5; cursor: default; }
.sc-links { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.5rem; }
.sc-result { text-align: center; }
.sc-ok { width: 64px; height: 64px; margin: 1rem auto 0; border-radius: 50%; display: grid; place-items: center; background: var(--green-tint); color: var(--green); }
.sc-ok svg { width: 30px; height: 30px; }
.sc .callout { margin-top: 1rem; }
.sc .callout h3 { margin: 0 0 0.2rem; font-family: var(--font-body); font-weight: 700; font-size: 1rem; line-height: 1.4; color: inherit; }
.sc-fixes { list-style: none; counter-reset: fix; margin: 0.9rem 0 0; padding: 0; display: grid; gap: 0.55rem; }
.sc-fixes li { display: flex; gap: 0.65rem; align-items: flex-start; font-size: 0.9rem; line-height: 1.5; counter-increment: fix; }
.sc-fixes li::before { content: counter(fix); flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; background: var(--bg-card); color: var(--text); font-size: 0.75rem; font-weight: 700; }
.sc-then { margin: 0.8rem 0 0; font-weight: 600; color: var(--text); }
.sc-actions { display: grid; gap: 0.5rem; margin-top: 1.1rem; }

/* The human check of the public forms (includes/fit_check.html, run by fit-check.js): the box drawn as an .input. On
   every page since the contact dialog, so here and not in fit.css. fit-check.js marks the row: data-state idle,
   checking, done or failed, and .has-error when the check failed or the box was left unticked. An error looks like a
   field's (.field.has-error, .errors): the red border and red words. */
.fit-hc { min-height: 46px; padding: 0.65rem 0.9rem; border: 1.5px solid var(--border-strong); border-radius: 10px; background: #fff; font-size: 1rem; line-height: 1.65; color: var(--text); }
.fit-hc .check { align-items: center; gap: 0.6rem; font-size: 1rem; font-weight: 400; color: var(--text); }
.fit-hc .check input { margin-top: 0; }
.fit-hc.has-error, .fit-hc[data-state="failed"] { border-color: var(--red); }
.fit-hc.has-error .check, .fit-hc[data-state="failed"] .check { color: var(--red); }
.fit-trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; opacity: 0; pointer-events: none; }

/* The contact dialog of every page (includes/contact_modal.html, contact.js): the sound check's dialog (.sc) with a
   form. A modal only: without JS it never opens and its links stay mailto: links. */
.contact-modal { max-width: calc(100vw - 2rem); overscroll-behavior: contain; }   /* the browser's own modal margin would make it 352px on a phone */
.contact-modal .sc-title:focus { outline: none; }
.contact-close { margin: 0; flex: none; }
.contact-intro { color: var(--text-2); }
.contact-form { margin-top: 1rem; }
.contact-form > .contact-error { margin: 0; }
.contact-error { font-size: 0.82rem; color: var(--red); }
.contact-error:focus { outline: none; }
.contact-sent { margin: 1rem 0 1.25rem; }
.contact-sent p { margin: 0 0 0.5rem; }
.contact-sent .small { margin: 0; color: var(--text-2); }
@media (max-width: 640px) { .contact-modal:modal { margin-top: 1rem; } }   /* phone: 16px from the top of the screen */
@media (prefers-reduced-motion: no-preference) {
  .contact-modal[open] { animation: contact-in 0.18s ease-out; }
  .contact-modal[open]::backdrop { animation: contact-fade 0.18s ease-out; }
}
@keyframes contact-in { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes contact-fade { from { opacity: 0; } to { opacity: 1; } }

/* -------------------------------------------------------------- misc --- */
.callout { display: flex; gap: 0.9rem; align-items: flex-start; padding: 1rem 1.2rem; border-radius: var(--radius-md); background: var(--amber-tint); color: #5b3a00; font-size: 0.93rem; }
.callout.blue { background: var(--accent-tint); color: #1e3a8a; }
.callout.green { background: var(--green-tint); color: #065f46; }
.callout.red { background: var(--red-tint); color: #7f1d1d; }
.callout svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; }
.copy-box { display: flex; gap: 0.5rem; align-items: center; }
.copy-box .input { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.8rem; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 1.25rem; font-size: 0.92rem; }
.kv dt { color: var(--text-3); }
.kv dd { margin: 0; font-weight: 500; }
.divider { height: 1px; background: var(--border); margin: 2rem 0; }
.inline-form { display: inline; }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .eq span { animation: none; } }
.prose { max-width: 46rem; }
.prose h2 { margin-top: 2.5rem; }
.prose h3 { margin-top: 1.75rem; font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; }
.prose ul { padding-inline-start: 1.25rem; }   /* the same ink as the paragraphs: a list is not an aside */
.prose li { margin-bottom: 0.4rem; }
.prose table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: 1rem 0 1.5rem; }
.prose th, .prose td { text-align: start; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.prose th { font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.timeline { list-style: none; padding: 0; margin: 0; border-inline-start: 2px solid var(--accent-tint); }
.timeline li { position: relative; padding: 0 0 1.5rem 1.5rem; }
[dir="rtl"] .timeline li { padding: 0 1.5rem 1.5rem 0; }
.timeline li::before { content: ''; position: absolute; inset-inline-start: -7px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: var(--accent); }
.timeline .when { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); font-weight: 700; }
.timeline p { margin: 0.25rem 0 0; color: var(--text-2); }

/* Desktop: long e-mails in list tables may break rather than force a horizontal scroller; on phones the table scrolls instead */
@media (min-width: 901px) {
  .table .who .sub, .table .sub { overflow-wrap: anywhere; }
  .table .contact { min-width: 180px; }
  .table .contact .sub { overflow-wrap: normal; }
}
/* Narrow desktops (above the phone breakpoint): a slimmer sidebar so the admin lists fit without a scroller */
@media (min-width: 901px) and (max-width: 1180px) {
  .app { grid-template-columns: 200px 1fr; }
  .app-main { padding-inline: 1.25rem; }
  .table .contact { min-width: 0; }
  .table .contact .sub { overflow-wrap: anywhere; }
}
/* Narrow screens: slightly denser tables, role shown on the name line */
@media (max-width: 1180px) {
  table.table { font-size: 0.88rem; }
  .table th { font-size: 0.68rem; }
  .table .badge { font-size: 0.72rem; }
  .table .ua { max-width: 120px; }
  .table .col-role { display: none; }
  .role-inline { display: inline; }
}

/* ---------------------------------------------------- research page --- */
.filter-figure { margin: 0; padding: 1.75rem; }
.flow { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; }
.flow li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; font-size: 0.8rem; font-weight: 600; color: var(--text-2); }
.flow li svg { width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
.flow li:not(:last-child)::after { content: ""; position: absolute; top: 20px; inset-inline-start: calc(50% + 26px); inset-inline-end: calc(-50% + 26px); border-top: 2px dashed var(--border-strong); }
.filter-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.filter-panel { padding: 1rem; border-radius: var(--radius-md); background: var(--bg-soft); }
.filter-panel h3 { font-family: var(--font-body); font-size: 0.95rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
.filter-panel p { margin: 0; font-size: 0.85rem; color: var(--text-2); }
.filter-bars { display: flex; align-items: flex-end; gap: 4px; height: 70px; }
.filter-bars span { flex: 1; border-radius: 3px; background: var(--border-strong); transform-origin: bottom; animation: bar-bounce var(--t, 1s) ease-in-out var(--d, 0s) infinite alternate; }
.filter-bars.loud span { --lo: 0.7; }
.filter-bars.calm span { --lo: 0.4; }
.filter-bars.calm span.voice { --lo: 0.75; }
@keyframes bar-bounce { from { transform: scaleY(var(--lo, 0.6)); } to { transform: scaleY(1); } }
.filter-bars span.voice, .filter-legend i.voice { background: var(--accent); }
.filter-legend { display: flex; gap: 1.25rem; margin-top: 0.9rem; font-size: 0.8rem; color: var(--text-3); }
.filter-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--border-strong); margin-inline-end: 0.4rem; vertical-align: -1px; }
.stage-track .when { display: block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.35rem; }
.bar-compare { display: grid; gap: 1rem; margin-top: 1.25rem; }
.bar-row { display: grid; grid-template-columns: 9rem 1fr 3.5rem; gap: 0.75rem; align-items: center; }
.bar-label { font-size: 0.9rem; color: var(--text-2); }
.bar-track { height: 28px; border-radius: 8px; background: var(--bg-card); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 8px; background: var(--accent); }
.bar-fill.muted { background: var(--text-3); }
.bar-value { font-family: var(--font-display); font-size: 1.25rem; text-align: end; white-space: nowrap; }
.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li { display: flex; gap: 0.6rem; padding: 0.35rem 0; color: var(--text-2); font-size: 0.95rem; }
.check-list li svg { flex: none; width: 18px; height: 18px; color: var(--green); margin-top: 0.2rem; }
.evidence { padding: 1.5rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); }
.evidence.accent { background: var(--accent-tint); border-color: transparent; }
.evidence p { margin: 0; color: var(--text-2); font-size: 0.93rem; }
.tag { display: inline-block; margin-bottom: 0.75rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); }
.range { position: relative; height: 10px; border-radius: 999px; background: var(--bg-card); margin: 0.5rem 0 2rem; }
.range-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent); }
.range span { position: absolute; top: 14px; transform: translateX(-50%); font-size: 0.8rem; color: var(--text-3); }
[dir="rtl"] .range span { transform: translateX(50%); }
.stage-track { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
.stage-track li { position: relative; padding: 1.5rem; border-radius: var(--radius-lg); background: #fff; border: 1px solid var(--border); }
.stage-track li:not(:last-child)::after { content: ""; position: absolute; z-index: 1; top: 50%; inset-inline-end: -1.625rem; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232563eb' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E") center / 0.9rem no-repeat; border: 1px solid var(--border); box-shadow: var(--shadow-sm); transform: translateY(-50%); }
[dir="rtl"] .stage-track li:not(:last-child)::after { transform: translateY(-50%) scaleX(-1); }
.stage-track p { margin: 0; color: var(--text-2); font-size: 0.95rem; }
.toc { padding: 1.75rem 2rem; }
.toc a { display: flex; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); color: var(--text); font-weight: 500; text-decoration: none; }
.toc a:last-child { border-bottom: 0; padding-bottom: 0; }
.toc a svg { flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 12px; background: var(--accent-tint); color: var(--accent); }
.toc a::after { content: ""; flex: none; margin-inline-start: auto; width: 1rem; height: 1rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a8f9c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / 1rem no-repeat; }
.toc a:hover span { color: var(--accent); }
.evidence { display: flex; flex-direction: column; }
.ev-visual { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; min-height: 96px; padding: 1rem 1.25rem; margin-bottom: 1.1rem; border-radius: var(--radius-md); background: var(--bg-soft); }
.evidence.accent .ev-visual { background: rgba(255, 255, 255, 0.65); }
.ev-visual .range { width: 100%; margin: 0.25rem 0 1.4rem; }
.ev-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }
.ev-chip svg { width: 16px; height: 16px; }
.ev-chip.yes { background: var(--green-tint); color: var(--green); }
.ev-chip.same { background: #fff; color: var(--text-2); border: 1px solid var(--border); }
.ev-num { display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--accent); }
.ev-num small { font-family: var(--font-body); font-size: 0.88rem; color: var(--text-2); }
.ev-bars { width: 100%; display: grid; gap: 0.55rem; }
.ev-bars .bar-row { grid-template-columns: 10rem 1fr 3rem; }
.ev-bars .bar-track { height: 14px; background: #fff; }
.ev-bars .bar-label { font-size: 0.82rem; }
.ev-bars .bar-value { font-size: 1rem; }
.ev-icons { display: flex; align-items: center; gap: 0.75rem; color: var(--accent); }
.ev-icons svg { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--accent-tint); }
.evidence.accent .ev-icons svg { background: #fff; }
.ev-link { width: 48px; border-top: 2px dashed var(--border-strong); }

/* ----------------------------------------------- practitioners page --- */
.browser-frame { margin: 0; border-radius: var(--radius-lg); overflow: hidden; background: #fff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.browser-bar { display: flex; gap: 6px; padding: 0.6rem 0.8rem; background: var(--bg-card); border-bottom: 1px solid var(--border); }
.browser-bar i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }
.browser-frame img, .phone-frame img, .reach-map img { display: block; width: 100%; height: auto; }
.phone-pair { display: flex; gap: 1.25rem; justify-content: center; }
.phone-frame { margin: 0; flex: 0 1 220px; border-radius: 28px; overflow: hidden; border: 6px solid #15161c; box-shadow: var(--shadow-lg); background: #fff; }
.phone-pair .phone-frame:last-child { margin-top: 2.5rem; }
.reach-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 3rem; align-items: center; }
.points { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1rem; }
.points li { color: var(--text-2); }
.points strong { color: var(--text); }
.reach-map { margin: 0; }
.map-legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem 1.5rem; margin-top: 1rem; font-size: 0.85rem; color: var(--text-2); }
.map-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-inline-end: 0.45rem; vertical-align: -1px; }
.map-legend i.amber { background: var(--amber); }
.map-legend i.blue { background: var(--accent); }
.tour-row { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 3rem; align-items: center; padding: 4rem 0; }
.tour-row.flip > :first-child { order: 2; }
.tour-row h3 { font-size: 1.6rem; margin-bottom: 1rem; }
.goals-mock { padding: 1.5rem; }
.goals-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.goal { padding: 0.9rem 0; border-top: 1px solid var(--border); }
.goal p { margin: 0 0 0.75rem; font-weight: 500; }
.goal-track { position: relative; height: 8px; border-radius: 999px; background: var(--bg-card); }
.goal-bar { position: absolute; top: 0; bottom: 0; border-radius: 999px; background: var(--accent-tint); }
.goal-from, .goal-to { position: absolute; top: 50%; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%); }
[dir="rtl"] .goal-from, [dir="rtl"] .goal-to { transform: translate(50%, -50%); }
.goal-from { background: var(--text-3); }
.goal-to { background: var(--accent); }
.goal-scale { display: flex; justify-content: space-between; margin-top: 0.5rem; font-size: 0.78rem; color: var(--text-3); }
.cta-card { display: flex; flex-direction: column; align-items: flex-start; padding: 2rem; }
.cta-card h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.15rem; }
.cta-card p { flex: 1; }
.card.accent .feature-icon { background: #fff; }
.features-narrow { max-width: 920px; }
.features-break { margin-top: 4.5rem; }
.features-break h3 { font-size: 1.9rem; margin-bottom: 0.4rem; }
.features-break .lead { margin: 0 auto; }
.tour-row h3 .badge { vertical-align: middle; font-family: var(--font-body); }
.phone-pair .phone-frame:only-child { margin-top: 0; flex-basis: 240px; }
.focusbox { position: relative; margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-lg); overflow: hidden; background: #0b1020; box-shadow: var(--shadow-lg); }
.focusbox canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.focusbox .looks { position: absolute; top: 12px; inset-inline-end: 12px; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); }
.focusbox .looks button { border: 0; border-radius: 999px; padding: 0.35rem 0.8rem; font: inherit; font-size: 0.8rem; font-weight: 600; color: #e8ecf5; background: transparent; cursor: pointer; }
.focusbox .looks button[aria-pressed="true"] { background: #e8ecf5; color: #0b1020; }
.focusbox .hud { position: absolute; inset-inline-start: 16px; bottom: 12px; color: #e8ecf5; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; }
.focusbox .hud small { display: block; margin-top: 4px; font-family: var(--font-body); font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase; color: #9aa3b8; }
.game-screen { display: flex; flex-direction: column; align-items: center; aspect-ratio: 430 / 900; padding: 1.25rem 1rem; text-align: center; background: linear-gradient(180deg, var(--bg-soft), #fff); }
.game-top { display: flex; justify-content: space-between; width: 100%; font-size: 0.7rem; font-weight: 600; color: var(--text-3); }
.game-steps { display: flex; gap: 4px; width: 100%; margin: 0.6rem 0 2.5rem; }
.game-steps i { flex: 1; height: 4px; border-radius: 999px; background: var(--border); }
.game-steps i.on { background: var(--accent); }
.game-name { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.game-circle { width: 58%; aspect-ratio: 1; margin: 2rem 0 1.5rem; border-radius: 50%; background: var(--border-strong); animation: game-go 3.2s ease-in-out infinite; }
.game-screen p { margin: 0; font-size: 0.85rem; color: var(--text-2); }
.game-next { display: flex; gap: 0.5rem; margin-top: auto; }
.game-next span { padding: 0.25rem 0.6rem; border-radius: 999px; background: var(--bg-card); font-size: 0.7rem; color: var(--text-3); }
@keyframes game-go { 0%, 45% { background: var(--border-strong); transform: scale(0.94); box-shadow: none; } 55%, 85% { background: var(--green); transform: scale(1); box-shadow: 0 0 0 14px var(--green-tint); } 100% { background: var(--border-strong); transform: scale(0.94); box-shadow: none; } }
@media (max-width: 1000px) {
  .reach-grid, .tour-row { grid-template-columns: 1fr; gap: 2rem; }
  .tour-row.flip > :first-child { order: 0; }
}
@media (max-width: 760px) {
  .stage-track { grid-template-columns: 1fr; }
  .stage-track li:not(:last-child)::after, [dir="rtl"] .stage-track li:not(:last-child)::after { top: auto; bottom: -1.625rem; inset-inline-end: auto; inset-inline-start: calc(50% - 0.875rem); transform: rotate(90deg); }
}
@media (max-width: 560px) {
  .filter-compare { grid-template-columns: 1fr; }
  .flow { grid-template-columns: repeat(2, 1fr); row-gap: 1.25rem; }
  .flow li:nth-child(2)::after { display: none; }
  .bar-row { grid-template-columns: 1fr 3.5rem; }
  .bar-label { grid-column: 1 / -1; }
  .phone-frame { border-width: 4px; border-radius: 22px; }
}

/* -------------------------------------------------- admin user page --- */
.page-head h1 .badge { vertical-align: middle; font-family: var(--font-body); }
.user-form { padding: 1.75rem; margin-top: 1.5rem; }
.user-form-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2.5rem; align-items: start; }
.user-form-cols .card-title { margin-bottom: 0.15rem; }
.user-switches { display: grid; gap: 0.35rem; }
.user-form-wide { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.user-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; margin-top: 1.5rem; }
.action-card { display: flex; flex-direction: column; }
.action-card p { margin: 0 0 1rem; }
.action-card > form:last-child { margin-top: auto; }
.user-block { margin-top: 1.5rem; }
.user-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; align-items: start; }
.user-section-title { font-size: 1.4rem; margin: 2.5rem 0 0; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; }
.card-head .card-title { margin: 0; }
@media (max-width: 1100px) { .user-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 900px) { .user-form-cols, .user-actions, .user-pair { grid-template-columns: 1fr; } }

/* ---- practitioner home: attention feed, checklist, task cards ---- */
.attention { list-style: none; margin: 0; padding: 0; }
.attention-row { display: flex; align-items: center; gap: 0.9rem; padding: 0.75rem 0; border-top: 1px solid var(--border); }
.attention-row:first-child { border-top: 0; padding-top: 0.25rem; }
.attention-who { flex: none; width: 38px; height: 38px; display: grid; place-items: center; color: var(--text-3); }
.attention-who svg { width: 20px; height: 20px; }
.attention-text { min-width: 0; flex: 1; }
.attention-text strong { font-weight: 600; }
.attention-row.sev3 .attention-text strong { color: #7f1d1d; }
.attention-actions { display: flex; align-items: center; gap: 0.4rem; flex: none; }
.attention-actions form { margin: 0; }
.attention-dismiss { width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); cursor: pointer; display: grid; place-items: center; }
.attention-dismiss:hover { background: var(--bg-card); color: var(--text); }
.attention-dismiss svg { width: 14px; height: 14px; }
.attention-dismiss-gap { flex: none; width: 30px; height: 30px; }   /* a row without Hide keeps its button in line */
.checklist { list-style: none; margin: 0.75rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.checklist li { display: flex; gap: 0.8rem; align-items: flex-start; }
.checklist .tick { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: grid; place-items: center; font-size: 0.78rem; font-weight: 700; color: var(--text-2); }
.checklist li.done .tick { background: var(--green); border-color: var(--green); color: #fff; }
.checklist li.done strong { color: var(--text-3); text-decoration: line-through; }
.checklist .tick svg { width: 14px; height: 14px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.home-card { display: grid; gap: 0.5rem; padding: 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); color: inherit; box-shadow: var(--shadow-sm); }
.home-card:hover { box-shadow: var(--shadow-md); color: inherit; }
.home-card strong { font-size: 1.05rem; }
.home-card .feature-icon.b { background: var(--amber-tint); color: #b45309; } .home-card .feature-icon.c { background: #f1eaff; color: #6d28d9; }
.invite-card summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; }
.invite-card summary::-webkit-details-marker { display: none; }
.invite-card summary > svg { width: 16px; height: 16px; margin-inline-start: auto; transition: transform 0.2s; }
.invite-card[open] summary > svg { transform: rotate(180deg); }
.try-controls { display: flex; gap: 0.75rem; align-items: center; font-size: 0.85rem; }
.try-controls .input { min-height: 36px; padding: 0.3rem 0.6rem; width: auto; }

/* ---- listener landing: one centred column, listening first ---- */
.lh { max-width: 640px; margin: 0 auto; text-align: center; }
.lh .page-head { display: block; }
.lh h1 { font-size: clamp(2rem, 5vw, 2.6rem); margin: 0 0 0.4rem; }
.lh .sub { color: var(--text-3); margin: 0; }
.lh-progress { max-width: 420px; margin: 1.5rem auto 0; }
.lh-progress-row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; font-size: 0.9rem; color: var(--text-2); margin-bottom: 0.45rem; }
.lh-progress-row strong { color: var(--text); font-weight: 600; }
.lh-hero { margin: 2rem auto 0; }
.lh-hero .btn-lg { padding: 1rem 2rem; font-size: 1.1rem; box-shadow: 0 10px 28px var(--accent-glow); }
.lh-hero .btn-lg svg { width: 20px; height: 20px; }
.lh-hero p { margin: 0.7rem 0 0; }
.lh-today { display: flex; align-items: center; gap: 0.9rem; max-width: 460px; margin: 1.5rem auto 0; padding: 0.9rem 1.1rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit; text-align: start; }
.lh-today:hover { box-shadow: var(--shadow-md); color: inherit; }
.lh-today .feature-icon { flex: none; margin: 0; }
.lh-today > span:nth-child(2) { flex: 1; min-width: 0; }
.lh-today > svg:last-child { width: 18px; height: 18px; color: var(--text-3); flex: none; }
.album-grid-few { max-width: 760px; margin: 2.5rem auto 0; grid-template-columns: repeat(auto-fit, minmax(200px, 220px)); justify-content: center; }
.album-grid-home:not(.album-grid-few) { max-width: 1120px; margin: 2.5rem auto 0; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.lh-tips, .lh-other { margin: 2.5rem auto 0; max-width: 520px; text-align: start; }
.lh-tips summary, .lh-other summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.4rem; color: var(--text-3); font-size: 0.9rem; }
.lh-tips summary::-webkit-details-marker, .lh-other summary::-webkit-details-marker { display: none; }
.lh-tips summary svg, .lh-other summary svg { width: 14px; height: 14px; transition: transform 0.2s; }
.lh-tips[open] summary svg, .lh-other[open] summary svg { transform: rotate(180deg); }
.lh-tips-body { margin-top: 1rem; display: grid; gap: 0.6rem; font-size: 0.93rem; color: var(--text-2); }
.lh-tips-body p { margin: 0; }
/* After the first complete listening session: one card for the album of the most recent one, the programme's
   sessions as a strip (complete filled, the next outlined) and the track to play next. A single album before it. */
.lh-album { margin: 2rem auto 0; padding: 1.25rem; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); text-align: start; }
.lh-album-head { display: flex; align-items: center; gap: 1.1rem; }
.lh-album-head .cover { flex: none; width: 112px; border-radius: var(--radius-md); }
.lh-album-head > div:last-child { min-width: 0; }
.lh-album .section-label { margin-bottom: 0.3rem; }
.lh-album h2 { font-size: 1.6rem; margin: 0; overflow-wrap: anywhere; }
.lh-album-count { margin: 0.35rem 0 0; color: var(--text-2); font-weight: 600; }
.lh-album-head + .btn { margin-top: 1.25rem; }
.session-strip { display: flex; gap: 4px; margin: 1.25rem 0; }
.session-strip i { flex: 1; height: 10px; border-radius: 999px; background: var(--bg-card-hover); }
.session-strip i.done { background: var(--green); }
.session-strip i.next { background: #fff; box-shadow: inset 0 0 0 2px var(--accent); }
.lh-album-track { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.lh-album-next { display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--text-3); }
.lh-album-next svg { width: 15px; height: 15px; flex: none; }
.lh-album-done { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin: 0; padding: 0.85rem 1rem; border-radius: var(--radius-md); background: var(--green-tint); color: var(--green); font-weight: 600; }
.lh-album-done svg { width: 18px; height: 18px; flex: none; }
.lh-album ~ .lh-today { max-width: none; }   /* as wide as the album card above it */
/* A finished programme with another waiting: the exercise passes left, then the button; a finished one may be bought again */
.lh-next-warn { margin: 0 0 1rem; text-align: start; }
.lh-next-form { margin: 0; }
.lh-album-buy { margin-top: 0.75rem; }
@media (max-width: 600px) { .lh-album { padding: 1rem; } .lh-album-head .cover { width: 84px; } .lh-album h2 { font-size: 1.35rem; } .session-strip { gap: 3px; } }
/* The other albums, folded under the card */
.lh-other { max-width: none; }
.lh-other-body { margin-top: 1rem; }
.lh-other-body > p { margin: 0 0 0.75rem; text-align: center; font-size: 0.93rem; color: var(--text-2); }
.lh-other-list { list-style: none; margin: 0; padding: 0; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); }
.lh-other-list li { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem 0.9rem; }
.lh-other-list li + li { border-top: 1px solid var(--border); }
.lh-other-list .cover { flex: none; width: 44px; border-radius: var(--radius-sm); }
.lh-other-title { flex: 1; min-width: 0; font-weight: 600; overflow-wrap: anywhere; }
/* Under the card: the exercises, Listening well and the other albums as rows of one style (.lh-row), each a 48 px icon
   tile, a title, one line under it and a chevron at the end. A link row's chevron points ahead; a folded row's points
   down and turns when it opens. (.lh-today, .lh-tips and .lh-other above now draw only the guide's picture of the
   home, guides/parts/listener_home.html.) */
.lh-rows { display: grid; gap: 0.75rem; margin-top: 1.5rem; text-align: start; }
.lh-row { display: block; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); color: inherit; transition: box-shadow 0.2s; }
.lh-row:hover { box-shadow: var(--shadow-md); color: inherit; }
.lh-row-head { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 1.1rem; cursor: pointer; list-style: none; }
.lh-row-head::-webkit-details-marker { display: none; }
.lh-row-icon { flex: none; width: 48px; height: 48px; border-radius: var(--radius-md); display: grid; place-items: center; background: var(--accent-tint); color: var(--accent); }
.lh-row-icon svg { width: 22px; height: 22px; }
.lh-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }
.lh-row-text strong { font-weight: 600; color: var(--text); }
.lh-row-head > svg:last-child { flex: none; width: 18px; height: 18px; color: var(--text-3); transition: transform 0.2s; }
a.lh-row-head > svg:last-child { transform: rotate(-90deg); }
[dir="rtl"] a.lh-row-head > svg:last-child { transform: rotate(90deg); }
.lh-row[open] > .lh-row-head > svg:last-child { transform: rotate(180deg); }
/* Up to three covers of the other albums, overlapping across the tile, the first on top */
.lh-row-covers { display: flex; align-items: center; justify-content: center; background: none; }
.lh-row-covers img { flex: none; width: 30px; height: 30px; border-radius: 7px; object-fit: cover; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(20, 22, 30, 0.18); }
.lh-row-covers img + img { margin-inline-start: -21px; }
.lh-row-covers img:first-child:nth-last-child(2) + img { margin-inline-start: -12px; }
.lh-row-covers img:nth-child(1) { z-index: 3; } .lh-row-covers img:nth-child(2) { z-index: 2; }
.lh-row-body { border-top: 1px solid var(--border); padding: 1rem 1.1rem 1.1rem; font-size: 0.93rem; color: var(--text-2); }
.lh-row-tips { margin: 0; padding-inline-start: 1.2rem; display: grid; gap: 0.45rem; }
.lh-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.25rem; margin: 1rem 0 0; }
.lh-row-actions a { font-weight: 600; }
.lh-row-list { list-style: none; margin: 0; padding: 0; }
.lh-row-list li { display: flex; align-items: center; gap: 0.9rem; padding: 0.7rem 1.1rem; border-top: 1px solid var(--border); }
.lh-row-list .cover { flex: none; width: 48px; border-radius: var(--radius-sm); }
@media (max-width: 600px) { .lh-row-head { padding: 0.85rem 0.9rem; gap: 0.75rem; } .lh-row-body { padding-inline: 0.9rem; } .lh-row-list li { padding-inline: 0.9rem; gap: 0.75rem; } }
/* Before the first complete listening session: the albums to choose from, each card one link. At most three to a row,
   for large covers: a column is never narrower than 30 % of the row. Narrow screens get two, then one. */
.lh-pick { max-width: 640px; margin: 2rem auto 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(max(140px, 30%), 1fr)); gap: 1rem; }
.album-pick { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.album-pick:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.album-pick:focus-within { box-shadow: 0 0 0 3px var(--accent-glow); }
.album-pick h3 { flex: 1; margin: 0; padding: 0.75rem 0.85rem 0.6rem; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
/* the card's one action: a soft accent button with the play sign, filled while the card is pointed at */
.album-pick .btn { margin: 0 0.85rem 0.85rem; gap: 0.4rem; background: var(--accent-tint); border-color: transparent; color: var(--accent); }
.album-pick .btn svg { width: 14px; height: 14px; }
.album-pick .btn::after { content: ""; position: absolute; inset: 0; }
.album-pick:hover .btn, .album-pick:focus-within .btn { background: var(--accent); color: #fff; }
.lh-access { margin: 1.5rem 0 0; font-size: 0.85rem; color: var(--text-3); }

/* ---- practitioner acting for a listener ---- */
.nav-drop-btn.acting { background: var(--amber-tint); color: #7c4a03; }
.nav-drop-btn.acting:hover { background: #fde9c4; }
.nav-listeners { min-width: 240px; max-height: 60vh; overflow: auto; }
.nav-listeners form { margin: 0; }
/* The context bar under the header: where an admin, manager or practitioner is right now (country, practice, listener),
   one chip per level with its own X, centred, and a link that closes all of it. Replaces the old amber acting banner. */
.context-bar { background: var(--accent-tint); border-bottom: 1px solid rgba(37, 99, 235, 0.18); color: var(--accent-strong); font-size: 0.88rem; }
.context-bar .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.3rem 0.4rem; padding-block: 0.45rem; }
.ctx-label { font-weight: 600; color: var(--text-2); margin-inline-end: 0.3rem; }
.ctx-sep { color: var(--text-3); padding-inline: 0.2rem; }
.ctx-chip { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; height: 30px; border-radius: 999px; background: #fff; font-weight: 600; }
.ctx-chip > a { display: inline-flex; align-items: center; gap: 0.35rem; min-width: 0; padding: 0 0.25rem 0 0.7rem; color: inherit; text-decoration: none; }
.ctx-chip svg { width: 14px; height: 14px; flex: none; }
.ctx-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ctx-chip form { margin: 0; display: inline-flex; }
.ctx-x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-end: 0.1rem; border: 0; border-radius: 999px; background: transparent; color: var(--text-3); cursor: pointer; }
.ctx-x:hover { background: var(--accent-tint); color: var(--text); }
.ctx-acting { background: var(--amber-tint); border: 1px solid rgba(245, 158, 11, 0.35); color: #7c4a03; }
.ctx-acting .ctx-x { color: #9a5b00; }
.ctx-acting .ctx-x:hover { background: #fff; }
.ctx-note { font-weight: 400; color: #9a5b00; padding-inline-end: 0.3rem; white-space: nowrap; }
.ctx-home { margin: 0; display: inline-flex; }
.ctx-home .nav-form-link { padding: 0.2rem 0.3rem; font-size: 0.85rem; font-weight: 600; color: var(--accent); }
@media (max-width: 720px) { .ctx-note { display: none; } .ctx-chip { max-width: 16rem; } }
.nav-form-link { width: 100%; text-align: start; border: 0; background: transparent; font: inherit; color: var(--text-2); padding: 0.75rem 0.85rem; border-radius: 10px; cursor: pointer; }
.nav-form-link:hover, .nav-form-link.active { background: var(--bg-card); color: var(--text); }

/* Directional arrows in copy flip for right-to-left languages */
.arrow { display: inline-block; }
[dir="rtl"] .arrow { transform: scaleX(-1); }

/* Text-and-figure pairs on the programme guide stack before the general 640px breakpoint, so the figure keeps room */
@media (max-width: 900px) { .grid-2.stack-md { grid-template-columns: 1fr; } }

/* The signed-in guide pages: more air between sections than the public pages, so each reads as its own chapter */
.section-roomy { padding: 6.5rem 0; }
@media (max-width: 760px) { .section-roomy { padding: 4rem 0; } }

/* Top-navigation search for admins and country managers, and the opened-practice chip with its X */
.nav-search { position: relative; display: flex; align-items: center; gap: 0.4rem; padding: 0 0.3rem 0 0.75rem; border-radius: 999px; background: var(--bg-card); color: var(--text-3); }
.nav-search > svg { width: 15px; height: 15px; flex: none; }
.nav-search input { width: 15rem; max-width: 100%; padding: 0.5rem 0.5rem 0.5rem 0; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 0.92rem; outline: none; }
.nav-search input::placeholder { color: var(--text-3); }
.nav-search:focus-within { box-shadow: 0 0 0 2px var(--accent-tint); color: var(--accent); }
.nav-search-results { inset-inline-end: auto; inset-inline-start: 0; min-width: 20rem; max-height: 60vh; overflow: auto; }
.nav-search-results a { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 0.4rem; padding: 0.55rem 0.7rem; border-radius: 8px; color: var(--text); text-decoration: none; font-size: 0.92rem; }
.nav-search-results a:hover, .nav-search-results a.current { background: var(--bg-soft); }
.nav-search-results a .type { color: var(--accent); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.nav-search-results a small { flex-basis: 100%; color: var(--text-3); }
.nav-chip { display: inline-flex; align-items: center; border-radius: 999px; background: var(--bg-card); }
.nav-chip .nav-practice { padding-inline-end: 0.4rem; }
.nav-x { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-inline-end: 0.2rem; border-radius: 999px; color: var(--text-3); }
.nav-x svg { width: 14px; height: 14px; }
.nav-x:hover { background: #fff; color: var(--text); }
.nav-acting-form { margin: 0; }
.mobile-only.nav-search { margin: 0.5rem 0; border: 1px solid var(--border); }
.mobile-only.nav-search input { width: 100%; padding-inline-start: 0.75rem; }
.mobile-only .nav-search-results { position: static; box-shadow: none; border: 0; }
@media (max-width: 1180px) { .nav-search input { width: 11rem; } }

/* Reserve the scrollbar gutter so a page that scrolls does not sit a few pixels left of one that does not */
html { scrollbar-gutter: stable; }
@supports not (scrollbar-gutter: stable) { html { overflow-y: scroll; } }

/* Language choices inside the account menu and the phone menu */
.menu-lang { margin: 0 0 0.3rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--border); }
.menu-lang .menu-label { display: block; padding: 0.4rem 0.75rem 0.2rem; }
.menu-lang button { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.45rem 0.75rem; border: 0; background: transparent; border-radius: 8px; text-align: start; cursor: pointer; color: var(--text); font: inherit; font-size: 0.92rem; }
.menu-lang button:hover { background: var(--bg-card); }
.menu-lang button.current { color: var(--accent); font-weight: 600; }
.menu-lang .code { font-size: 0.72rem; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; }
.menu-lang.plain { border: 0; margin: 0; padding: 0; }
.menu-lang.plain button { padding: 0.6rem 0.85rem; }
.nav-actions .nav-search { margin-inline-end: 0.25rem; }

.nav-search { flex-wrap: nowrap; max-width: 30rem; }
@media (max-width: 1024px) {
  /* On a phone the search box gives way before the page widens: the chip and the field shrink, the brand and the menu button never do */
  .nav-inner > .brand, .hamburger { flex: none; }
  .nav-inner > .nav-actions { flex: 1 1 auto; min-width: 0; justify-content: flex-end; }
  .nav-actions .nav-search { flex: 0 1 auto; min-width: 0; }
  .nav-search input { flex: 1 1 4rem; width: auto; min-width: 3rem; }
}

/* The whole bar turns blue while something is chosen: the same signal for admins, managers and practitioners */
.nav.nav-context { background: var(--accent); border-bottom-color: transparent; }
.nav.nav-context .brand, .nav.nav-context .brand:hover { color: #fff; }
.nav.nav-context .brand-mark { background: #fff; color: var(--accent); }
.nav.nav-context .nav-links > li > a, .nav.nav-context .nav-drop-btn, .nav.nav-context .nav-soon { color: rgba(255, 255, 255, 0.85); }
.nav.nav-context .nav-links > li > a:hover, .nav.nav-context .nav-links > li > a.active, .nav.nav-context .nav-drop-btn:hover, .nav.nav-context .nav-drop-btn.active, .nav.nav-context .nav-drop-btn[aria-expanded="true"] { background: rgba(255, 255, 255, 0.16); color: #fff; }
/* ...but the dropdown menus stay white panels with dark text */
.nav.nav-context .lang-menu a, .nav.nav-context .lang-menu a.active { color: var(--text); background: transparent; }
.nav.nav-context .lang-menu a:hover, .nav.nav-context .lang-menu a.active { background: var(--bg-card); }
.nav.nav-context .nav-links .nav-listen, .nav.nav-context .nav-links .nav-listen:hover, .nav.nav-context .nav-links .nav-listen.active { background: #fff; color: var(--accent); box-shadow: none; }
.nav.nav-context .nav-soon small { background: rgba(255, 255, 255, 0.2); color: #fff; }
.nav.nav-context .nav-drop-btn.acting, .nav.nav-context .nav-drop-btn.acting:hover { background: #fff; color: var(--accent); }
/* The area pill (Administration, My country, My practice) on the blue header: outlined in white, filled when active, like Listen */
.nav.nav-context .nav-links > li > a.nav-space { background: transparent; border-color: rgba(255, 255, 255, 0.55); color: #fff; }
.nav.nav-context .nav-links > li > a.nav-space:hover, .nav.nav-context .nav-links > li > a.nav-space.active { background: #fff; border-color: #fff; color: var(--accent); }
.nav.nav-context .nav-search { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.nav.nav-context .nav-search input { color: #fff; }
.nav.nav-context .nav-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.nav.nav-context .nav-search:focus-within { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35); color: #fff; }
.nav.nav-context .avatar { background: #fff; color: var(--accent); }
.nav.nav-context .hamburger { background: transparent; border-color: rgba(255, 255, 255, 0.4); }
.nav.nav-context .hamburger span { background: #fff; }
/* The phone sheet is white whatever the header colour, so the blue-header link colours above must not reach it.
   Two ways into the sheet: the phone media query, and .nav-collapsed when the links overflow a narrow desktop. */
.nav.nav-context.nav-collapsed .nav-links > li > a, .nav.nav-context.nav-collapsed .nav-soon { color: var(--text-2); }
.nav.nav-context.nav-collapsed .nav-links > li > a:hover, .nav.nav-context.nav-collapsed .nav-links > li > a.active { background: var(--bg-card); color: var(--text); }
.nav.nav-context.nav-collapsed .nav-links .nav-listen, .nav.nav-context.nav-collapsed .nav-links .nav-listen:hover, .nav.nav-context.nav-collapsed .nav-links .nav-listen.active { background: var(--accent); color: #fff; }
.nav.nav-context.nav-collapsed .nav-links .nav-exercises, .nav.nav-context.nav-collapsed .nav-links .nav-exercises:hover, .nav.nav-context.nav-collapsed .nav-links .nav-exercises.active { background: var(--accent-tint); color: var(--accent); }
.nav.nav-context.nav-collapsed .nav-links > li > a.nav-space { background: #fff; border-color: var(--border-strong); color: var(--text); }
.nav.nav-context.nav-collapsed .nav-links > li > a.nav-space:hover, .nav.nav-context.nav-collapsed .nav-links > li > a.nav-space.active { background: var(--bg-card); border-color: var(--bg-card); color: var(--text); }
@media (max-width: 1024px) {
  .nav.nav-context .nav-links > li > a, .nav.nav-context .nav-soon { color: var(--text-2); }
  .nav.nav-context .nav-links > li > a:hover, .nav.nav-context .nav-links > li > a.active { background: var(--bg-card); color: var(--text); }
  .nav.nav-context .nav-links .nav-listen, .nav.nav-context .nav-links .nav-listen:hover, .nav.nav-context .nav-links .nav-listen.active { background: var(--accent); color: #fff; }
  .nav.nav-context .nav-links .nav-exercises, .nav.nav-context .nav-links .nav-exercises:hover, .nav.nav-context .nav-links .nav-exercises.active { background: var(--accent-tint); color: var(--accent); }
  .nav.nav-context .nav-links > li > a.nav-space { background: #fff; border-color: var(--border-strong); color: var(--text); }
  .nav.nav-context .nav-links > li > a.nav-space:hover, .nav.nav-context .nav-links > li > a.nav-space.active { background: var(--bg-card); border-color: var(--bg-card); color: var(--text); }
}

/* Dropdowns that live in the right-hand actions open towards the left edge of the screen */
.nav-actions .nav-drop .lang-menu { inset-inline-start: auto; inset-inline-end: 0; }

/* Guide mock-ups of the new interface: the top bar, the exercises pages, the programme guide */
.guide-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: -1.5rem -1.75rem 1.25rem; padding: 0.6rem 1.25rem; background: #fff; border-bottom: 1px solid var(--border); font-size: 0.82rem; color: var(--text-2); }
.guide-nav .brand { font-size: 1.1rem; color: var(--text); }
.guide-nav .brand-mark { width: 26px; height: 26px; }
.guide-nav .brand-mark svg { width: 15px; height: 15px; }
.guide-nav .links, .guide-nav .right { display: flex; align-items: center; gap: 0.25rem; }
.guide-nav .links > span, .guide-nav .pill { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.6rem; border-radius: 999px; white-space: nowrap; }
.guide-nav .links svg, .guide-nav .pill svg, .guide-nav .search svg { width: 13px; height: 13px; }
.guide-nav .pill.listen { background: var(--accent); color: #fff; font-weight: 600; }
.guide-nav .pill.chooser { background: var(--bg-card); color: var(--text); }
.guide-nav .pill.chooser.acting { background: var(--amber-tint); color: #7c4a03; }
.guide-nav .search { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.3rem 0.6rem; border-radius: 999px; background: var(--bg-card); color: var(--text-3); min-width: 11rem; }
.guide-nav .search .ph { color: var(--text-3); }
.guide-nav .token { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.3rem 0.15rem 0.5rem; border-radius: 999px; background: #fff; color: var(--accent); font-weight: 600; max-width: 9rem; }
.guide-nav .token > span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.guide-nav .token .x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; opacity: 0.7; }
.guide-nav .avatar { width: 28px; height: 28px; font-size: 0.72rem; }
.guide-nav.blue { background: var(--accent); border-bottom-color: transparent; color: rgba(255, 255, 255, 0.85); }
.guide-nav.blue .brand { color: #fff; }
.guide-nav.blue .brand-mark { background: #fff; color: var(--accent); }
.guide-nav.blue .pill.listen, .guide-nav.blue .pill.chooser, .guide-nav.blue .pill.chooser.acting, .guide-nav.blue .avatar { background: #fff; color: var(--accent); }
.guide-nav.blue .search { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.guide-nav.blue .search .ph { color: rgba(255, 255, 255, 0.75); }
.guide-nav ~ .guide-topbar { display: none; }
.guide-nav-menu, .guide-nav-results { position: absolute; z-index: 5; min-width: 15rem; padding: 0.4rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); font-size: 0.85rem; }
.guide-nav-menu { right: 4.5rem; top: 3.6rem; }
.guide-nav-results { right: 3.5rem; top: 3.6rem; min-width: 18rem; }
.guide-nav-menu > span, .guide-nav-results > span { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; padding: 0.45rem 0.7rem; border-radius: 8px; color: var(--text); }
.guide-nav-menu .current { color: var(--accent); font-weight: 600; background: var(--bg-soft); }
.guide-nav-menu .code, .guide-nav-results small { color: var(--text-3); font-size: 0.72rem; }
.guide-nav-results > span { flex-wrap: wrap; justify-content: flex-start; }
.guide-nav-results em { font-style: normal; color: var(--accent); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.guide-nav-results small { flex-basis: 100%; }
.guide-nav-menu.account { right: 1rem; }
.guide-nav-menu.account .head { flex-direction: column; align-items: flex-start; gap: 0; border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0.3rem; }
.guide-nav-menu.account .label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-bottom: 0.1rem; }
.guide-nav-menu.account .sep { display: block; height: 1px; padding: 0; margin: 0.3rem 0; background: var(--border); }
.guide-ex { max-width: 34rem; margin: 0 auto; }
.guide-ex h1 { font-size: 1.8rem; margin: 0.2rem 0 0.4rem; }
.guide-ex-progress { position: relative; height: 6px; margin: 1rem 0 1.25rem; border-radius: 3px; background: var(--border); }
.guide-ex-progress > span { position: absolute; top: -1.4rem; left: 0; font-size: 0.8rem; color: var(--text-2); }
.guide-ex-progress > i { display: block; height: 100%; border-radius: 3px; background: var(--accent); }
.guide-ex-session { padding: 1.25rem; }
.guide-ex-games { list-style: none; margin: 0.75rem 0 1rem; padding: 0; }
.guide-ex-games li { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-top: 1px solid var(--border); }
.guide-ex-games li:first-child { border-top: 0; }
.guide-ex-games li > div { flex: 1; min-width: 0; }
.guide-ex-games small { display: block; color: var(--text-3); }
.guide-ex-games .code { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; font-size: 0.72rem; font-weight: 700; }
.guide-ex-games .code.a { background: var(--accent-tint); color: var(--accent); }
.guide-ex-games .code.b { background: var(--amber-tint); color: #a05a00; }
.guide-ex-games .code.c { background: #ede9fe; color: #6d28d9; }
.guide-ex-measures { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin-top: 0.75rem; }
.guide-ex-measures > div { display: flex; flex-direction: column; gap: 0.15rem; font-size: 0.85rem; }
.guide-ex-measures span { color: var(--text-2); }
.guide-ex-dots { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.5rem 0 0.75rem; }
.guide-ex-dots span { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--bg-card); color: var(--text-3); font-size: 0.68rem; }
.guide-ex-dots span.done { background: var(--accent); color: #fff; }
.guide-ex-dots span.open { background: var(--amber-tint); color: #a05a00; }
.guide-try-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
/* The exercises guide: the track's games on the left, the game being spoken about on the right, in the game's own classes */
.guide-split { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 1.25rem; align-items: start; }
.guide-gl { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.3rem; }
.guide-gl li { display: flex; align-items: center; gap: 0.7rem; padding: 0.35rem 0.5rem; border-radius: 12px; transition: background 0.3s; }
.guide-gl li.is-focus { background: var(--accent-tint); box-shadow: none; }
.guide-gl .game-thumb { width: 72px; flex: none; border-radius: 8px; overflow: hidden; }
.guide-gl strong { display: block; font-size: 0.92rem; line-height: 1.2; }
.guide-gl small { display: block; color: var(--text-3); font-size: 0.72rem; line-height: 1.3; }
.guide-cycle > :not(.on) { display: none; }
.guide-game { display: none; border-radius: var(--radius-lg); border: 1px solid var(--border); background: #fff; box-shadow: var(--shadow-md); }
.guide-game.on { display: block; animation: guidefade 0.4s ease; }
.guide-game .stage { padding: 1.5rem 1.25rem; min-height: 500px; }
.guide-game .stage h2 { font-size: 1.5rem; }
.guide-game .stage .lead { font-size: 0.98rem; margin-bottom: 1.2rem; }
.guide-game .a1-stim { width: 200px; height: 200px; }
.guide-game .a2-field, .guide-game .a3-grid, .guide-game .a4-box, .guide-game .b2-board, .guide-game .c3-area, .guide-game .c4-area { width: 250px; }
.guide-game .a3-grid { grid-template-columns: repeat(3, 1fr); }
.guide-game .a5-ear { width: 160px; height: 160px; }
.guide-game .b1-pond { width: 320px; }
.guide-game .b3-pads { width: 220px; } .guide-game .b3-pad { height: 48px; font-size: 1.25rem; }
.guide-game .b4-grid { width: 320px; min-height: 0; } .guide-game .b4-item { width: 64px; height: 64px; }
.guide-game .b5-grid { width: 250px; grid-template-columns: repeat(4, 1fr); }
.guide-game .breath-ring { width: 210px; }
.guide-game .b2-board { width: 290px; margin-top: 1rem; }
.guide-game .a6-prompt { min-height: 0; margin-bottom: 0.6rem; }
.guide-game .a6-cut { display: grid; place-items: center; }
.guide-game .a6-scene { width: 300px; height: 190px; margin: 0 auto; background: #e0f2fe; display: grid; grid-template-columns: repeat(4, 1fr); place-items: center; }
.guide-game .fl-row { margin: 1rem 0 0.75rem; min-height: 0; }
.guide-game .dir-btns { min-height: 0; }
.guide-game .a8-big { display: grid; place-items: center; height: 130px; } .guide-game .a8-big svg { width: 100px; height: 100px; color: var(--text); }
.guide-game .c2-calm { width: 190px; height: 190px; }
.guide-game .obj.emoji { font-size: 1.9rem; line-height: 1; }
.guide-game .c5-count { margin-top: 0.6rem; }
.guide-prog { max-width: 40rem; }
.guide-prog h1 { font-size: 1.9rem; margin: 0.2rem 0 0.5rem; }
.guide-prog h2 { font-size: 1.4rem; margin: 0.2rem 0 0.5rem; }
.guide-prog .lead { font-size: 0.95rem; }
.guide-toc { margin-top: 1rem; padding: 1rem 1.25rem; }
.guide-toc a { padding: 0.5rem 0; font-size: 0.9rem; }
.guide-toc a svg { width: 30px; height: 30px; padding: 7px; }

/* ---- staff on a phone: the bottom tab bar (built by app.js from the side menu; the side menu itself is hidden) ---- */
.tabbar { display: none; }
.tab-sheet { display: none; }
@media (max-width: 900px) {
  .app.has-tabbar .sidebar .group:has(> nav[data-tabbar]) { display: none; }
  .app.has-tabbar .sidebar:not(:has(.group:not(:has(> nav[data-tabbar])))) { display: none; }
  body.has-tabbar .app-main { padding-bottom: 6.5rem; }
  .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 6px 6px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(20, 22, 30, 0.06); }
  .tabbar[hidden] { display: none; }
  .tabbar a, .tabbar .more { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 4px 2px; border: 0; border-radius: 10px; background: transparent; font: inherit; font-size: 0.68rem; font-weight: 500; line-height: 1.1; color: var(--text-2); text-align: center; cursor: pointer; }
  .tabbar a svg, .tabbar .more svg { width: 22px; height: 22px; opacity: 0.85; }
  .tabbar a.active, .tabbar .more.active, .tabbar .more.open { color: var(--accent); background: var(--accent-tint); }
  .tabbar a.active svg, .tabbar .more.active svg { opacity: 1; }
  .tab-sheet { display: block; position: fixed; inset: 0; z-index: 89; background: rgba(21, 22, 28, 0.35); }
  .tab-sheet[hidden] { display: none; }
  .tab-sheet-grid { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 14px calc(92px + env(safe-area-inset-bottom)); background: #fff; border-radius: 22px 22px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; box-shadow: 0 -18px 48px rgba(20, 22, 30, 0.14); }
  .tab-sheet-grid a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 72px; padding: 10px 6px; border-radius: 12px; background: var(--bg-soft); color: var(--text-2); font-size: 0.78rem; font-weight: 500; text-align: center; line-height: 1.15; }
  .tab-sheet-grid a svg { width: 22px; height: 22px; opacity: 0.85; }
  .tab-sheet-grid a.active { background: var(--accent-tint); color: var(--accent); }
  /* The sheet keeps the side menu's shape: the action buttons on top, then the pages under their group headings */
  .tab-sheet-grid .tab-sheet-actions { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  .tab-sheet-grid .tab-sheet-actions a { flex-direction: row; min-height: 44px; }
  .tab-sheet-grid .tab-sheet-actions .btn-primary { background: var(--accent); color: #fff; }
  .tab-sheet-grid .sidebar-group { grid-column: 1 / -1; margin: 6px 0 0; padding: 0 4px; }
}

/* ---- practitioner home: listening rhythm (one cell per day, two slots), arrivals, urgent banner ---- */
.days { display: inline-flex; gap: 2px; align-items: flex-end; height: 20px; vertical-align: middle; }
.days i { display: block; position: relative; width: 10px; height: 20px; border-radius: 3px; background: var(--bg-card); }
.days i::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 3px; background: var(--accent); }
.days i.d1::before { height: 50%; }
.days i.d2::before { height: 100%; }
.days i.d0 { background: var(--amber-tint); }
.days i.t { outline: 2px solid var(--accent-tint); outline-offset: 1px; }
.days i.f { background: transparent; border: 1px dashed var(--border-strong); }
.days.lg { height: 28px; gap: 3px; }
.days.lg i { width: 14px; height: 28px; }
.days-legend { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; font-size: 0.75rem; color: var(--text-3); }
.days-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 0.3rem; vertical-align: middle; background: var(--accent); }
.days-legend i.one { background: linear-gradient(to top, var(--accent) 50%, var(--bg-card) 50%); }
.days-legend i.zero { background: var(--amber-tint); }
.days-legend i.fut { background: transparent; border: 1px dashed var(--border-strong); }
.rhythm { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.6rem; }
.rhythm > a, .rhythm > div { display: block; padding: 0.7rem 0.8rem; border-radius: var(--radius-md); background: var(--bg-soft); color: inherit; min-width: 0; }
.rhythm .n { font-family: var(--font-display); font-size: 1.8rem; line-height: 1; }
.rhythm .l { font-size: 0.8rem; font-weight: 600; margin-top: 0.2rem; }
.rhythm .who { display: block; font-size: 0.75rem; color: var(--text-3); margin-top: 0.15rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rhythm .green { background: var(--green-tint); } .rhythm .green .l { color: #0b6e4d; }
.rhythm .blue { background: var(--accent-tint); } .rhythm .blue .l { color: var(--accent); }
.rhythm .amber { background: var(--amber-tint); } .rhythm .amber .l { color: #8a4b00; }
.rhythm .red { background: var(--red-tint); } .rhythm .red .l { color: #991b1b; }
@media (max-width: 640px) { .rhythm { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rhythm-row { gap: 1rem; margin-bottom: 0.25rem; }
.rhythm-row > a.card { padding: 1.1rem 1.25rem; border-color: transparent; box-shadow: none; }
.rhythm-row .n { font-size: 2.2rem; }
.rhythm-row .l { font-size: 0.92rem; }
.rhythm-row .who { font-size: 0.82rem; white-space: normal; }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 2rem; }
@media (max-width: 900px) { .news-grid { grid-template-columns: 1fr; } }
.news-grid .news-row:nth-child(2) { border-top: 0; padding-top: 0; }
.news-row { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.55rem 0; border-top: 1px solid var(--border); font-size: 0.92rem; }
.news-row:first-child { border-top: 0; padding-top: 0; }
.news-row .k { flex: none; width: 88px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); padding-top: 0.25rem; }
.news-row .t { flex: 1; min-width: 0; }
.news-row .sub { font-size: 0.8rem; color: var(--text-3); }
.urgent { margin-bottom: 1.5rem; padding: 0.4rem 1.1rem; border-radius: var(--radius-md); background: var(--red-tint); border: 1px solid #f5c6c6; }
.urgent .attention-row { border-top-color: #f5c6c6; }
.urgent .attention-text strong { color: #991b1b; }
.stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; gap: 2px; background: transparent; }
.stack i { display: block; height: 100%; }
.stack .b { background: var(--accent); } .stack .s { background: #cfd4e0; } .stack .w { background: var(--amber); }
.stack-grid { display: grid; grid-template-columns: minmax(140px, 1fr) 2fr auto; gap: 0.5rem 1rem; align-items: center; font-size: 0.9rem; }
.hbar .fill.amber { background: var(--amber); }
.period-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 999px; padding: 3px; background: #fff; flex-wrap: wrap; }
.period-seg a { padding: 0.3rem 0.85rem; border-radius: 999px; font-size: 0.85rem; font-weight: 500; color: var(--text-2); }
.period-seg a.on { background: var(--text); color: #fff; }
.period-seg button { font: inherit; font-size: 0.85rem; font-weight: 500; padding: 0.3rem 0.85rem; border: 0; border-radius: 999px; background: none; color: var(--text-2); cursor: pointer; }
.period-seg button[aria-pressed="true"] { background: var(--text); color: #fff; }
.what-it-means { font-size: 0.9rem; color: var(--text-2); margin: 0.75rem 0 0; }
.what-it-means strong { color: var(--text); }

/* ---- the follow-up sheet: an A4 page; in the practice's pages it lies in the main column like a sheet of paper ---- */
.sheet { max-width: 794px; margin: 0 auto; padding: 48px 56px; font-size: 13px; line-height: 1.5; color: var(--text); background: #fff; }
.app-main .sheet { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }
.sheet-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid var(--text); padding-bottom: 10px; margin-bottom: 18px; }
.sheet-head .brand { font-family: var(--font-display); font-size: 1.3rem; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); }
.sheet-head .brand-mark { width: 28px; height: 28px; border-radius: 8px; box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sheet-head .brand-mark svg { width: 16px; height: 16px; }
.sheet-head .meta { text-align: end; font-size: 11px; color: var(--text-2); line-height: 1.4; }
.sheet h1 { font-size: 26px; margin: 0 0 2px; }
.sheet h2 { font-family: var(--font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); margin: 18px 0 6px; }
.sheet .ex-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem 1rem; margin-top: 0.5rem; }
.sheet .ex-chart-head span { display: none; }
.sheet-foot { margin-top: 28px; padding-top: 12px; border-top: 1px solid var(--border-strong); font-size: 10.5px; color: var(--text-3); line-height: 1.45; }
.sheet-tools { max-width: 794px; margin: 0 auto 1rem; display: flex; flex-wrap: wrap; gap: 0.6rem; }
@media (max-width: 600px) { .sheet { padding: 28px 20px; } }
@media print {
  @page { size: A4; margin: 14mm; }
  html { scrollbar-gutter: auto; }   /* no room kept for a scroll bar on paper */
  body { background: #fff; }
  .sheet h2 { break-after: avoid; }
  .nav, .sheet-tools, .context-bar, .tabbar, .tab-sheet { display: none !important; }
  .sheet-page .sidebar, .sheet-page .messages, .guide-btn, .guide-drop { display: none !important; }   /* no Video guide on paper */
  .sheet-page .app { display: block; max-width: none; min-height: 0; }
  .sheet-page .app-main { padding: 0; }
  .sheet { max-width: none; padding: 0; border: 0 !important; border-radius: 0; box-shadow: none !important; }
  .sheet .card { border: 0; box-shadow: none; padding: 0; }
}
/* The PDF the server prints (views/practice.listener_sheet_pdf, services/pdf.py): the sheet alone, its colours as on the
   screen, and the practice's name at the foot of every page. Chromium repeats a fixed element on every printed page;
   the body's bottom padding, cloned onto every page, keeps the text clear of it. */
.sheet-pdf-foot { display: none; }
@media print {
  body.sheet-pdf { display: block; min-height: 0; padding-bottom: 11mm; -webkit-box-decoration-break: clone; box-decoration-break: clone;
                   -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .sheet-pdf .sheet-pdf-foot { display: block; position: fixed; inset-inline: 0; bottom: 0; padding-top: 2.5mm; border-top: 1px solid var(--border-strong);
                               font-size: 10px; line-height: 1.3; color: var(--text-3); background: #fff; }
}

/* ---- admin home and the Platform page ---- */
.tiles4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.tiles4 > a.card, .tiles4 > div.card { display: block; padding: 1.1rem 1.25rem; color: inherit; }
.tiles4 .stat-number { font-size: 2.4rem; }
.tiles4 .stat-label { font-size: 0.95rem; color: var(--text-2); font-weight: 600; }
@media (max-width: 900px) { .tiles4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ring { display: flex; flex-wrap: wrap; gap: 1.25rem; align-items: center; }   /* the legend drops under the ring on the narrowest phones */
.ring svg { flex: none; width: 132px; height: 132px; }
.ring-legend { flex: 1 1 7rem; display: grid; gap: 0.35rem; min-width: 0; font-size: 0.9rem; overflow-wrap: anywhere; }
.ring-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 0.4rem; vertical-align: middle; }
.line-chart { width: 100%; height: 118px; display: block; overflow: visible; }
.line-chart text { font-family: var(--font-body); }
.status { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.status span { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.8rem; border-radius: 999px; background: var(--bg-card); font-size: 0.85rem; font-weight: 500; }
.status i { width: 9px; height: 9px; border-radius: 50%; background: var(--green); display: inline-block; flex: none; }
.status i.warn { background: var(--amber); } .status i.bad { background: var(--red); } .status i.off { background: var(--border-strong); }
.mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 0.85rem; overflow-wrap: anywhere; }
.bars2 { display: flex; align-items: flex-end; gap: 2px; height: 110px; }
.bars2 > span { flex: 1; min-width: 2px; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; position: relative; }
.bars2 > span i { display: block; border-radius: 3px 3px 0 0; background: var(--accent); opacity: 0.85; min-height: 2px; }
.bars2 > span i.zero { background: var(--border); }
.bars2 > span b { position: absolute; top: 0; left: 0; right: 0; height: 100%; }
.bars2 > span b::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: var(--p95, 0%); border-top: 2px solid var(--amber); }
.bars2 > span .tip { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--text); color: #fff; font-size: 0.7rem; padding: 0.2rem 0.45rem; border-radius: 6px; white-space: nowrap; display: none; z-index: 2; }
.bars2 > span:hover .tip { display: block; }
.status-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0.4rem 0 0.9rem; }
.status-pills .pill { display: inline-flex; align-items: center; gap: 0.4rem; font: inherit; font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; padding: 0.28rem 0.7rem; border: 1px solid var(--border-strong); border-radius: 999px; background: #fff; color: var(--text-2); cursor: pointer; }
.status-pills .pill:hover { border-color: var(--text-3); }
.status-pills .pill[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: #fff; }
.status-pills .pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex: none; }
.status-pills .pill i.green { background: var(--green); } .status-pills .pill i.blue { background: var(--accent); }
.status-pills .pill i.amber { background: var(--amber); } .status-pills .pill i.red { background: var(--red); }
.status-pills .pill .n { font-weight: 500; opacity: 0.7; }
.status-pills .presets { display: inline-flex; gap: 0.1rem; margin-inline-start: 0.35rem; }
.status-pills .presets button { font: inherit; font-size: 0.8rem; font-weight: 500; padding: 0.28rem 0.5rem; border: 0; border-radius: 6px; background: none; color: var(--accent); cursor: pointer; }
.status-pills .presets button:hover { background: var(--accent-tint); }
.traffic-table td:first-child { min-width: 16rem; }
.traffic-table tr.more td { background: var(--bg-soft); }
.kv-tight { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem 1rem; font-size: 0.9rem; margin: 0; }
.kv-tight dt { color: var(--text-3); white-space: nowrap; } .kv-tight dd { margin: 0; }
.urgent > svg { width: 22px; height: 22px; flex: none; }

/* A video guide opened on top of the page it is about (app.js): the guide's page in a frame, the site's shell left out */
.guide-modal { position: fixed; inset: 0; z-index: 200; background: rgba(20, 22, 30, 0.55); display: flex; align-items: center; justify-content: center; padding: 24px; }
.guide-modal-box { position: relative; width: min(1180px, 96vw); height: min(92vh, 900px); background: var(--bg); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.guide-modal-frame { width: 100%; height: 100%; border: 0; display: block; background: var(--bg); }
.guide-modal-x { position: absolute; top: 10px; inset-inline-end: 10px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--border); background: var(--bg); color: var(--text-2); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--shadow-sm); }
.guide-modal-x:hover { color: var(--text); background: var(--bg-card); }
html.guide-modal-lock { overflow: hidden; }
body.embed .tabbar, body.embed .tab-sheet { display: none !important; }
body.embed .app-main { padding-top: 1.25rem; }
body.embed .page-head.embed-head { margin-top: 0; padding-inline-end: 56px; }
body.embed .guide-intro { display: none; }   /* the overlay is for watching: the title, then the stage */

/* Cookie notice */
/* One white pill at the bottom (includes/cookie_notice.html); app.js shows it until OK sets modulysa_cookies_ok.
   Below the overlays (welcome video, tab sheet, exercise flow, player), above the page. */
.cookie-notice {
  position: fixed; inset-inline: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 55;
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.85rem;
  width: fit-content; max-width: 56rem; margin-inline: auto; padding-block: 0.55rem; padding-inline: 1rem 0.55rem;
  background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);
  animation: cookie-in 0.35s ease-out;
}
.cookie-notice[hidden] { display: none; }
.cookie-notice-icon { width: 22px; height: 22px; flex: none; color: var(--amber); }
.cookie-notice-text { flex: 1 1 15rem; margin: 0; font-size: 0.9rem; line-height: 1.45; color: var(--text-2); }
.cookie-notice-text a { font-weight: 600; white-space: nowrap; }
.cookie-notice .btn { margin-inline-start: auto; min-width: 4.5rem; box-shadow: none; }
@keyframes cookie-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .cookie-notice { animation: none; } }
@media (max-width: 900px) { body.has-tabbar .cookie-notice { bottom: calc(80px + env(safe-area-inset-bottom)); } }
@media print { .cookie-notice { display: none !important; } }
body.embed .cookie-notice { display: none !important; }   /* a guide in the overlay frame: the page behind has its own */