/* Shared only by the redesigned website practice pages.
   Warm Perplexity-inspired surfaces with Poly-Puff's indigo action colour.
   Theme persistence and navigation interactions keep their existing owners. */
html:root {
  --bg: #191c1a;
  --bg2: #212522;
  --bg3: #2a302b;
  --surface: rgba(238,237,232,.04);
  --surface2: rgba(238,237,232,.08);
  --border: #3c443d;
  --border2: #727b71;
  --text: #eeede8;
  --muted: #b2b6ae;
  --sky: #b9b4ff;
  --sky2: #ccc8ff;
  --purple: #b9b4ff;
  --mint: #8ed2ae;
  --emerald: #8ed2ae;
  --gold: #e4c18d;
  --amber: #e4c18d;
  --red: #ffaaa4;
  --coral: #ffaaa4;
  --blue: #b9b4ff;
  --practice-card: #212522;
  --practice-accent-wash: #302e46;
  --practice-on-accent: #201b37;
}

html:root[data-theme="light"] {
  --bg: #faf8f5;
  --bg2: #f2efea;
  --bg3: #ece8e1;
  --surface: rgba(39,37,30,.025);
  --surface2: rgba(39,37,30,.05);
  --border: #dedad2;
  --border2: #89847b;
  --text: #27251e;
  --muted: #666158;
  --sky: #4d49fc;
  --sky2: #3d38d6;
  --purple: #4d49fc;
  --mint: #216346;
  --emerald: #216346;
  --gold: #845516;
  --amber: #845516;
  --red: #b23532;
  --coral: #b23532;
  --blue: #4d49fc;
  --practice-card: #ffffff;
  --practice-accent-wash: #eeedff;
  --practice-on-accent: #ffffff;
}

body.pp-practice { -webkit-font-smoothing: antialiased; }
body.pp-practice .grid-bg { display: none; }
body.pp-practice nav {
  background: var(--bg) !important;
  box-shadow: none !important;
}
/* One viewport-aligned header across public pages, readings and app shells.
   Sticky is the no-JavaScript fallback; measurement enables fixed positioning. */
html.pp-header-root { --pp-header-gutter: 5vw; --pp-language-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cellipse cx='12' cy='12' rx='4' ry='10' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M2 12h20' stroke='black' stroke-width='2'/%3E%3C/svg%3E"); scroll-padding-top: calc(var(--pp-header-height,64px) + 16px); }
body.pp-header-page { padding-top: 0 !important; }
body.pp-header-page > .pp-site-header { position: sticky !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100%; margin: 0 !important; z-index: 1000 !important; background: var(--bg) !important; }
body.pp-header-page.pp-header-measured { padding-top: var(--pp-header-height,64px) !important; }
body.pp-header-page.pp-header-measured > .pp-site-header { position: fixed !important; }
body.pp-header-page .pp-header-bar { display: flex; align-items: center !important; justify-content: space-between; flex-wrap: wrap !important; width: 100%; max-width: none !important; min-height: 64px !important; height: auto !important; margin: 0 !important; padding: 10px var(--pp-header-gutter) !important; gap: 10px 20px !important; box-sizing: border-box; }
body.pp-header-page > header.pp-site-header > .pp-header-bar { position: static !important; }
body.pp-header-page .pp-header-bar > .logo { flex: 0 0 auto !important; justify-content: flex-start !important; margin: 0 !important; }
body.pp-header-page .pp-header-bar > .logo img { display: block; width: auto !important; height: 36px; max-width: 100%; margin: 0 !important; object-fit: contain; }
html[dir="rtl"] body.pp-header-page .pp-header-bar { flex-direction: row-reverse; }
body.pp-header-page .pp-header-bar > :is(.nav-links,.nav-actions,.nav-right) { display: flex !important; flex: 0 1 auto !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important; overflow: visible !important; }
html[dir="rtl"] body.pp-header-page .pp-header-bar > :is(.nav-links,.nav-actions,.nav-right) { flex-direction: row-reverse; }
body.pp-header-page .pp-header-bar > :is(.nav-links,.nav-actions,.nav-right) > * { flex: 0 0 auto !important; margin: 0 !important; }
body.pp-header-page .pp-header-bar :is(.nav-menu,.nav-login-wrap,.nav-signup-wrap,.lang-switcher,.site-lang-switcher) { width: auto !important; }
body.pp-header-page .pp-header-bar :is(.lang-switcher,.site-lang-switcher) { order: 1000 !important; flex: 0 0 42px !important; height: 42px !important; }
html[data-theme] body.pp-header-page .pp-header-bar :is(.lang-switcher-btn,.site-lang-btn) { display: inline-flex !important; align-items: center; justify-content: center; width: 42px !important; min-width: 42px !important; height: 42px !important; min-height: 42px !important; padding: 0 !important; border: 1px solid var(--border2); border-radius: 50% !important; color: var(--muted) !important; background: var(--surface); box-shadow: none; }
body.pp-header-page .pp-header-bar :is(.lang-switcher-btn,.site-lang-btn)::before { content: ''; display: block; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--pp-language-globe) center / contain no-repeat; mask: var(--pp-language-globe) center / contain no-repeat; }
body.pp-header-page .pp-header-bar :is(.site-lang-btn .flag,.site-lang-btn .chevron,.lang-switcher-btn .chevron,#navGlobeIcon) { display: none !important; }
body.pp-header-page .pp-header-bar :is(.site-lang-btn .label,#currentLangLabel) { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip-path: inset(50%); white-space: nowrap !important; }
html[data-theme] body.pp-header-page .pp-header-bar :is(.lang-switcher-btn,.site-lang-btn):hover { color: var(--sky) !important; background: var(--practice-accent-wash); border-color: var(--sky); }
body.pp-header-page .pp-header-bar :is(.lang-dropdown,.site-lang-menu) { left: auto !important; right: 0 !important; width: min(280px,calc(100vw - 28px)); max-height: max(80px,min(360px,calc(100dvh - var(--pp-header-height,64px) - 16px))); overflow-y: auto; background: var(--practice-card); border-color: var(--border2); }
body.pp-header-page .pp-header-bar :is(.lang-dropdown-item,.site-lang-option) { min-height: 44px; width: 100%; border: 0; background: transparent; color: var(--muted); font-family: inherit; text-align: start; }
body.pp-header-page .pp-header-bar :is(.lang-dropdown-item,.site-lang-option):is(:hover,.active) { color: var(--sky); background: var(--practice-accent-wash); }
body.pp-header-page > :is(.app-layout,.layout) { padding-top: 0 !important; height: calc(100dvh - var(--pp-header-height,64px)) !important; min-height: 0 !important; }
body.pp-header-page.pp-sidebar-collapsed .pp-sidebar-toggle { top: calc(var(--pp-header-height,64px) + 12px) !important; }
html.pp-embedded-exercise body.pp-header-page { padding-top: 0 !important; }
html.pp-embedded-exercise body.pp-header-page > .pp-site-header { display: none !important; }
@media (max-width: 860px) {
  html.pp-header-root { --pp-header-gutter: 14px; }
  body.pp-header-page > :is(.app-layout,.layout) { height: auto !important; min-height: calc(100dvh - var(--pp-header-height,64px)) !important; }
  body.pp-header-page .sidebar { top: var(--pp-header-height,64px) !important; max-height: calc(100dvh - var(--pp-header-height,64px)) !important; }
  body.pp-header-page:not(.pp-sidebar-open) .pp-sidebar-toggle { top: calc(var(--pp-header-height,64px) + 10px) !important; }
}
body.pp-practice .main-content { padding: 40px 32px 80px; }
body.pp-practice .main-content > :not(script):not(style) {
  max-width: 800px !important;
}
body.pp-practice .module-header { margin-bottom: 28px; }
body.pp-practice .module-header h1 {
  font-size: clamp(26px, 3vw, 34px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.025em;
}
body.pp-practice .module-header p { max-width: 60ch; line-height: 1.6; }

/* Native disclosure works with keyboard and without JavaScript. The selection
   summary uses existing translations and remains visible while closed. */
body.pp-practice .controls-panel { margin-bottom: 24px; }
body.pp-practice .practice-settings {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--practice-card);
  margin-bottom: 16px;
}
body.pp-practice .practice-settings summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-height: 64px;
  padding: 16px 20px;
  cursor: pointer;
  list-style: none;
  border-radius: 16px;
}
body.pp-practice .practice-settings summary::-webkit-details-marker { display: none; }
body.pp-practice .practice-settings-title { font-weight: 600; font-size: 14px; }
body.pp-practice .practice-selection {
  flex: 1 1 240px;
  min-width: 0;
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}
body.pp-practice .practice-settings-chevron {
  width: 8px;
  height: 8px;
  border-inline-end: 1.5px solid var(--muted);
  border-bottom: 1.5px solid var(--muted);
  transform: rotate(45deg);
  flex: 0 0 8px;
  margin-inline-start: auto;
}
body.pp-practice .practice-settings[open] .practice-settings-chevron { transform: rotate(225deg); }
body.pp-practice .practice-settings-body {
  border-top: 1px solid var(--border);
  padding: 20px;
}
/* Scope overrides to practice pages because the shared sidebar injects literal
   colours and !important declarations at runtime. Keep its geometry intact. */
body.pp-practice .pp-sidebar-head { background: var(--bg2) !important; box-shadow: none !important; border-color: var(--border) !important; }
body.pp-practice .pp-sidebar-mascot img { filter: none !important; animation: none !important; }
html[data-theme] body.pp-practice .sidebar-item,
html[data-theme] body.pp-practice .pp-sidebar-dropdown-toggle,
html[data-theme] body.pp-practice .pp-sidebar-chevron,
html[data-theme] body.pp-practice .pp-native-dropdown-chevron,
html[data-theme] body.pp-practice .pp-native-label,
html[data-theme] body.pp-practice .pp-sidebar-label { color: var(--muted) !important; }
html[data-theme] body.pp-practice .pp-sidebar-main .sidebar-item { background: var(--practice-accent-wash) !important; border-color: var(--border) !important; box-shadow: none !important; }
html[data-theme] body.pp-practice .sidebar-item.active { color: var(--sky) !important; background: var(--practice-accent-wash) !important; }
html[data-theme] body.pp-practice .sidebar-item:hover { color: var(--text) !important; background: var(--surface2) !important; }
html[data-theme] body.pp-practice .pp-sidebar-main .sidebar-item:is(:hover,.active) { color: var(--sky) !important; background: var(--practice-accent-wash) !important; border-color: var(--sky) !important; }
body.pp-practice .pp-sidebar-dropdown-toggle { background: var(--surface) !important; border-color: var(--border) !important; }
html[data-theme] body.pp-practice .pp-sidebar-dropdown-toggle:hover { color: var(--text) !important; background: var(--surface2) !important; border-color: var(--border2) !important; }
body.pp-practice .pp-native-dropdown-btn,
body.pp-practice .pp-native-dropdown-menu,
body.pp-practice .pp-sidebar-toggle { background: var(--bg2) !important; color: var(--text) !important; box-shadow: none !important; border-color: var(--border2) !important; }
body.pp-practice .pp-native-dropdown-option { color: var(--muted) !important; }
body.pp-practice .pp-native-dropdown-option.active,
body.pp-practice .pp-native-dropdown-option:hover { background: var(--practice-accent-wash) !important; color: var(--sky) !important; }

body.pp-practice :is(button, a, summary, input, select, textarea):focus-visible {
  outline: 2px solid var(--sky) !important;
  outline-offset: 4px;
}
body.pp-practice .main-content { scroll-padding-top: 24px; }

@media (prefers-reduced-motion: reduce) {
  body.pp-practice *, body.pp-practice *::before, body.pp-practice *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

@media (max-width: 860px) {
  body.pp-practice .module-header h1 { font-size: 26px !important; line-height: 1.3 !important; }
  body.pp-practice .practice-settings summary { padding: 14px 16px; gap: 6px 10px; }
  body.pp-practice .practice-selection { flex-basis: 100%; order: 3; }
  body.pp-practice .practice-settings-body { padding: 16px; }
}