/*
 * WallStreet0Name Liquid Glass layer (2026-10).
 * Loaded after style.css, redesign.css and sharing.css. Two layers only:
 *   - content (course cards, articles, lists, tables) stays solid;
 *   - controls floating above the content (bars, segmented controls, menus, dialogs, sheets, toasts,
 *     floating buttons) are glass. Glass never sits on glass, and long list items never get a backdrop filter.
 * Every colour, blur, radius and duration below comes from the tokens in the first section.
 */

/* ---------- 1. Tokens ---------- */

:root {
  /* 1.1 Transparency master control: 0 = most transparent, 1 = clearest. Every visitor gets the same level;
     the system Reduce Transparency setting is the only switch (section 2). */
  --glass-level: 0.5;
  --glass-alpha: calc(0.45 + var(--glass-level) * 0.43);
  --glass-blur: calc(16px + var(--glass-level) * 20px);
  --glass-sat: calc(1.9 - var(--glass-level) * 0.4);
  --lg-brightness: 1.04;

  /* 1.2 Materials. The tint is the colour the glass is made of; alpha comes from the master control. */
  --lg-tint: 255 255 255;
  --lg-regular: rgb(var(--lg-tint) / var(--glass-alpha));
  --lg-regular-top: rgb(var(--lg-tint) / calc(var(--glass-alpha) - 0.12));
  /* Menus and dialogs carry the most text: never thinner than 0.72, even at the most transparent level. */
  --lg-thick: rgb(var(--lg-tint) / clamp(0.72, calc(var(--glass-alpha) + 0.18), 0.96));
  --lg-clear: rgb(var(--lg-tint) / 0.25);
  /* Clear glass on cover art: a dimming layer under white text keeps it legible on any cover. */
  --lg-clear-dim: rgb(10 12 22 / 0.52);
  --lg-scrim: rgb(245 247 251 / 0.85);
  --lg-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--lg-brightness));

  /* 1.3 Glass recipe: dark hairline edge (separates glass from what is behind), inner highlights,
     a specular sheen and a soft drop shadow. */
  --lg-edge: 0 0 0 0.5px rgb(0 0 0 / 0.14);
  --lg-highlight: inset 0 1px 0 rgb(255 255 255 / 0.65), inset 0 -1px 0 rgb(255 255 255 / 0.12);
  --lg-drop: 0 8px 32px rgb(15 23 42 / 0.10);
  --lg-drop-sm: 0 2px 10px rgb(15 23 42 / 0.08);
  --lg-shadow: var(--lg-edge), var(--lg-highlight), var(--lg-drop);
  --lg-specular: linear-gradient(180deg, rgb(255 255 255 / 0.35), rgb(255 255 255 / 0) 46%);
  --lg-hairline: rgb(15 23 42 / 0.10);

  /* Selected item on glass: accent-tinted slider with accent text. */
  --lg-sel-bg: rgb(79 70 229 / 0.12);
  --lg-sel-fg: #4338ca;
  --lg-sel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.7), 0 0 0 0.5px rgb(79 70 229 / 0.2), 0 2px 8px rgb(15 23 42 / 0.08);

  /* 1.4 Labels (iOS label / secondaryLabel / tertiaryLabel), kept at WCAG AA on solid and glass surfaces. */
  --lg-label: #0f172a;
  --lg-label-2: #3f4b5e;
  --lg-label-3: #526176;
  --lg-label-on-glass: #1e293b;

  /* Solid content surfaces. */
  --lg-page: #f5f7fb;
  --lg-surface: #ffffff;
  --lg-surface-2: #f8fafc;
  --lg-surface-3: #f1f5f9;
  --lg-border: rgb(15 23 42 / 0.09);
  --lg-border-strong: rgb(15 23 42 / 0.16);

  /* Accent. */
  --lg-brand: #4f46e5;
  --lg-brand-hover: #4338ca;
  --lg-brand-soft: #eef2ff;
  --lg-on-brand: #ffffff;
  --lg-focus-ring: 0 0 0 4px rgb(79 70 229 / 0.22);

  /* Radii; nested shapes use outer radius minus the gap between them. */
  --lg-r-control: 12px;
  --lg-r-card: 18px;
  --lg-r-overlay: 24px;
  --lg-r-sheet: 30px;
  --lg-r-pill: 999px;

  /* Motion. */
  --lg-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --lg-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --lg-dur: 250ms;
  --lg-dur-morph: 420ms;

  /* Layout of the floating bars. */
  --lg-bar-gap: 10px;
  /* Safe areas (viewport-fit=cover): notch, home indicator and the landscape side insets. */
  --lg-safe-top: env(safe-area-inset-top, 0px);
  --lg-safe-right: env(safe-area-inset-right, 0px);
  --lg-safe-bottom: env(safe-area-inset-bottom, 0px);
  --lg-safe-left: env(safe-area-inset-left, 0px);
  --lg-edge-extra: 0px;
  /* Apple system fonts first; then Windows (Microsoft YaHei, so Chinese never falls back to SimSun) and Android. */
  --lg-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "PingFang SC", Inter, "Segoe UI", "Microsoft YaHei", "Noto Sans SC", "Noto Sans CJK SC", sans-serif;

  /* 1.5 The redesign tokens and every legacy token resolve to the values above. */
  --ws-page: var(--lg-page);
  --ws-surface: var(--lg-surface);
  --ws-surface-raised: var(--lg-surface);
  --ws-surface-subtle: var(--lg-surface-2);
  --ws-surface-muted: var(--lg-surface-3);
  --ws-border: var(--lg-border);
  --ws-border-strong: var(--lg-border-strong);
  --ws-text: var(--lg-label);
  --ws-text-secondary: var(--lg-label-2);
  --ws-text-muted: var(--lg-label-3);
  --ws-brand: var(--lg-brand);
  --ws-brand-hover: var(--lg-brand-hover);
  --ws-brand-soft: var(--lg-brand-soft);
  --ws-on-brand: var(--lg-on-brand);
  --ws-shadow-sm: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 1px rgb(15 23 42 / 0.02);
  --ws-shadow-md: 0 12px 32px rgb(15 23 42 / 0.09);
  --ws-shadow-overlay: var(--lg-drop);
  --ws-radius-control: var(--lg-r-control);
  --ws-radius-card: var(--lg-r-card);
  --ws-radius-overlay: var(--lg-r-overlay);

  --bg: var(--ws-page);
  --bg-2: var(--ws-surface-subtle);
  --glass: var(--ws-surface);
  --glass-heavy: var(--ws-surface-raised);
  --glass-light: var(--ws-surface-subtle);
  --glass-border: var(--ws-border);
  --border: var(--ws-border);
  --accent: var(--ws-brand);
  --accent-hover: var(--ws-brand-hover);
  --accent-light: var(--ws-brand-soft);
  --accent-gradient: linear-gradient(135deg, var(--ws-brand), var(--ws-brand-hover));
  --primary: var(--ws-brand);
  --text-1: var(--ws-text);
  --text-2: var(--ws-text-secondary);
  --text-3: var(--ws-text-muted);
  --radius: var(--lg-r-card);
  --radius-sm: var(--lg-r-control);
  --radius-xs: calc(var(--lg-r-control) - 2px);
  --shadow: var(--ws-shadow-sm);
  --shadow-sm: var(--ws-shadow-sm);
  --shadow-hover: var(--ws-shadow-md);
  --transition: var(--lg-dur) var(--lg-ease-out);
}

/* One dark palette, derived from the page colour #090d16 (the glass tint is the same blue-black, lifted). */
:root[data-theme="dark"] {
  --lg-tint: 22 28 42;
  --lg-clear: rgb(var(--lg-tint) / 0.3);
  --lg-clear-dim: rgb(4 6 14 / 0.56);
  --lg-scrim: rgb(9 13 22 / 0.85);
  --lg-brightness: 0.96;

  --lg-edge: 0 0 0 0.5px rgb(0 0 0 / 0.5);
  --lg-highlight: inset 0 1px 0 rgb(255 255 255 / 0.14), inset 0 -1px 0 rgb(255 255 255 / 0.05);
  --lg-drop: 0 10px 36px rgb(0 0 0 / 0.40);
  --lg-drop-sm: 0 2px 12px rgb(0 0 0 / 0.32);
  --lg-specular: linear-gradient(180deg, rgb(255 255 255 / 0.10), rgb(255 255 255 / 0) 46%);
  --lg-hairline: rgb(255 255 255 / 0.10);

  --lg-sel-bg: rgb(129 140 248 / 0.20);
  --lg-sel-fg: #c7d2fe;
  --lg-sel-shadow: inset 0 1px 0 rgb(255 255 255 / 0.12), 0 0 0 0.5px rgb(129 140 248 / 0.3), 0 2px 10px rgb(0 0 0 / 0.3);

  --lg-label: #f8fafc;
  --lg-label-2: #cbd5e1;
  --lg-label-3: #9aa8bd;
  --lg-label-on-glass: #e2e8f0;

  --lg-page: #090d16;
  --lg-surface: #111827;
  --lg-surface-2: #131c2b;
  --lg-surface-3: #1e293b;
  --lg-border: rgb(255 255 255 / 0.09);
  --lg-border-strong: rgb(255 255 255 / 0.16);

  --lg-brand: #818cf8;
  --lg-brand-hover: #a5b4fc;
  --lg-brand-soft: rgb(99 102 241 / 0.16);
  --lg-on-brand: #0f172a;
  --lg-focus-ring: 0 0 0 4px rgb(129 140 248 / 0.3);

  --ws-surface-raised: #172033;
  --ws-shadow-sm: 0 1px 2px rgb(0 0 0 / 0.3);
  --ws-shadow-md: 0 14px 40px rgb(0 0 0 / 0.32);
}

/* ---------- 2. System settings and fallbacks ---------- */

/* With Reduce Transparency on, glass turns opaque. */
@media (prefers-reduced-transparency: reduce) {
  :root,
  :root[data-theme="dark"] {
    --glass-alpha: 0.97;
    --lg-regular-top: rgb(var(--lg-tint) / 0.97);
    --lg-thick: rgb(var(--lg-tint) / 0.98);
    --lg-clear: rgb(var(--lg-tint) / 0.92);
    --lg-filter: none;
    --lg-scrim: var(--lg-page);
  }
  .bg-deco { display: none; }
}

/* Increase Contrast: stronger edges and labels. */
@media (prefers-contrast: more) {
  :root {
    --glass-alpha: calc(0.72 + var(--glass-level) * 0.24);
    --lg-edge: 0 0 0 1px rgb(0 0 0 / 0.45);
    --lg-label-2: var(--lg-label);
    --lg-label-on-glass: var(--lg-label);
    --lg-border: rgb(15 23 42 / 0.28);
  }
  :root[data-theme="dark"] {
    --lg-edge: 0 0 0 1px rgb(255 255 255 / 0.45);
    --lg-border: rgb(255 255 255 / 0.3);
  }
}

/* Without backdrop-filter support the glass is simply opaque. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root {
    --glass-alpha: 0.96;
    --lg-regular-top: rgb(var(--lg-tint) / 0.96);
    --lg-thick: rgb(var(--lg-tint) / 0.98);
  }
}

/* ---------- 3. Base ---------- */

html {
  scroll-padding-top: calc(var(--lg-safe-top) + var(--ws-header) + var(--lg-bar-gap) + 24px);
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--ws-page);
  font-family: var(--lg-font);
}

/* Keyboard focus: a 2px accent ring with a soft glow, visible on glass and on solid surfaces alike. :not(#lg-focus)
   matches every element but carries ID weight, so the ring wins over any control's own selected-state shadow and
   over the older 3px rules in style.css. */
:is(button, a, input, textarea, select, summary, [tabindex]):focus-visible:not(#lg-focus) {
  outline: 2px solid var(--ws-brand);
  outline-offset: 2px;
  box-shadow: var(--lg-focus-ring);
}

/* ---------- 4. Background layer ---------- */

/* Pre-softened radial gradients (no blur filter, no animation) on a fixed layer of its own. */
.bg-deco {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 1;
  overflow: hidden;
  pointer-events: none;
  transform: translateZ(0);
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: none;
  opacity: 1;
  animation: none;
}

.blob-1 {
  width: 70vmax; height: 70vmax;
  top: -28vmax; right: -22vmax;
  background: radial-gradient(closest-side, rgb(99 102 241 / 0.30), rgb(99 102 241 / 0.12) 52%, rgb(99 102 241 / 0) 100%);
}

.blob-2 {
  width: 64vmax; height: 64vmax;
  bottom: -26vmax; left: -22vmax;
  background: radial-gradient(closest-side, rgb(34 211 238 / 0.24), rgb(34 211 238 / 0.09) 52%, rgb(34 211 238 / 0) 100%);
}

.blob-3 {
  width: 52vmax; height: 52vmax;
  top: 30%; left: 18%;
  background: radial-gradient(closest-side, rgb(168 85 247 / 0.16), rgb(168 85 247 / 0.06) 52%, rgb(168 85 247 / 0) 100%);
}

.blob-4 {
  width: 40vmax; height: 40vmax;
  top: 4%; left: 48%;
  background: radial-gradient(closest-side, rgb(236 72 153 / 0.12), rgb(236 72 153 / 0.04) 52%, rgb(236 72 153 / 0) 100%);
}

[data-theme="dark"] .blob-1 { background: radial-gradient(closest-side, rgb(79 70 229 / 0.42), rgb(79 70 229 / 0.16) 52%, rgb(79 70 229 / 0) 100%); }
[data-theme="dark"] .blob-2 { background: radial-gradient(closest-side, rgb(8 145 178 / 0.34), rgb(8 145 178 / 0.12) 52%, rgb(8 145 178 / 0) 100%); }
[data-theme="dark"] .blob-3 { background: radial-gradient(closest-side, rgb(147 51 234 / 0.26), rgb(147 51 234 / 0.09) 52%, rgb(147 51 234 / 0) 100%); }
[data-theme="dark"] .blob-4 { background: radial-gradient(closest-side, rgb(219 39 119 / 0.16), rgb(219 39 119 / 0.05) 52%, rgb(219 39 119 / 0) 100%); }

/* The sharing index used to hide the background and paint the page white; it now shares the site background. */
body:has(.sharing-index) { background: var(--ws-page); }
body:has(.sharing-index) .bg-deco { display: block; }

/* ---------- 5. Scroll edge (iOS 27): a uniform backing appears behind the bars once content runs under them ---------- */

.lg-scroll-sentinel {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 8px;
  pointer-events: none;
  visibility: hidden;
}

/* A real element, not a pseudo-element: iOS Safari only extends a real fixed element's colour under the status bar. */
.lg-scroll-edge {
  position: fixed;
  inset: 0 0 auto;
  z-index: 15;
  height: calc(var(--lg-safe-top) + var(--lg-bar-gap) + var(--ws-header) + var(--lg-edge-extra) + 20px);
  /* Opaque behind the bars (so nothing shows in the gap above the sticky categories), then fading out. A solid
     background colour (the fade is a mask) lets iOS Safari extend it under the status bar. */
  background-color: var(--lg-page);
  -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 20px), rgb(0 0 0 / 0.85) calc(100% - 18px), transparent 100%);
  mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 20px), rgb(0 0 0 / 0.85) calc(100% - 18px), transparent 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--lg-dur) var(--lg-ease-out);
  /* Its own layer: fading it in must not repaint the page under it. */
  will-change: opacity;
}

body.lg-scrolled .lg-scroll-edge { opacity: 1; }

.lg-scroll-edge-bottom { display: none; }

/* With a dialog or the explore sheet open, iOS Safari tints its bars from a solid fixed element at least ~12px tall
   at the top and bottom edges; it skips a dimming layer that has a backdrop filter. So both backings turn into 14px
   bands in the dimmed page colour above the dimming layer (they only cover the margin above the top bar and below
   the sheet), and the status bar and toolbar match the dimmed page instead of staying light. */
:root {
  /* The page colour under the dimming layers (dialog 28%, sheet 24% of #0f172a), written out as plain colours. */
  --lg-page-dimmed: #b5b8c0;
  --lg-page-dimmed-sheet: #bec1c9;
}

:root[data-theme="dark"] {
  /* #090d16 under 50% / 46% black. */
  --lg-page-dimmed: #04060b;
  --lg-page-dimmed-sheet: #05070c;
}

body:has(.modal-overlay.active, .warning-overlay.active, .mobile-explore-overlay.active) :is(.lg-scroll-edge, .lg-scroll-edge-bottom) {
  z-index: 400;
  height: 14px;
  background-color: var(--lg-page-dimmed);
  -webkit-mask-image: none;
  mask-image: none;
  opacity: 1;
  transition: none;
}

body:has(.mobile-explore-overlay.active) :is(.lg-scroll-edge, .lg-scroll-edge-bottom) { background-color: var(--lg-page-dimmed-sheet); }

/* ---------- 6. Glass surfaces ---------- */

.lg-surface,
.header,
.header-market-panel,
.user-dropdown,
.tabs,
.sort-bar,
.settings-nav,
.mobile-bottom-nav::before,
.mobile-explore-sheet,
.modal,
.warning-modal,
.profile-toast,
.back-to-top-btn,
.sharing-scroll-nav .sharing-button,
.sharing-state {
  background: var(--lg-specular), var(--lg-regular);
  -webkit-backdrop-filter: var(--lg-filter);
  backdrop-filter: var(--lg-filter);
  box-shadow: var(--lg-shadow);
}

.lg-surface { border-radius: var(--lg-r-overlay); }

/* Thick glass: menus, dialogs, sheets and the paywall prompt. */
.header-market-panel,
.user-dropdown,
.mobile-explore-sheet,
.modal,
.warning-modal,
.sharing-state {
  background: var(--lg-specular), var(--lg-thick);
}

/* Menus that open from inside the top bar cannot blur the page: the bar's own backdrop filter makes it their
   backdrop root, so they would only be see-through and the page would show sharply behind their text (glass on
   glass). They use a solid material instead; even 3% see-through left a ghost of the text behind. */
.user-dropdown,
.header-market-panel {
  background: var(--lg-specular), rgb(var(--lg-tint));
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* Text on glass: secondary and tertiary labels step one shade darker (lighter in dark mode), since what shows
   through the glass can be darker than a solid surface. */
.header,
.user-dropdown,
.header-market-panel,
.mobile-explore-sheet,
.modal,
.warning-modal,
.profile-toast,
.sharing-state {
  --ws-text-secondary: var(--lg-label-on-glass);
  --ws-text-muted: var(--lg-label-2);
}

/* ---------- 7. Control layer ---------- */

/* 7.1 Top bar: a floating capsule; more transparent at the top of the page, backed by the scroll-edge
   scrim once content runs under it. */
.header {
  top: calc(var(--lg-safe-top) + var(--lg-bar-gap));
  right: max(calc(var(--lg-safe-right) + 12px), calc((100vw - var(--ws-content)) / 2 - 16px));
  bottom: auto;
  left: max(calc(var(--lg-safe-left) + 12px), calc((100vw - var(--ws-content)) / 2 - 16px));
  width: auto;
  height: var(--ws-header);
  padding: 0 10px 0 16px;
  border: 0;
  border-radius: var(--lg-r-pill);
  background: var(--lg-specular), var(--lg-regular-top);
  transition: background-color var(--lg-dur) var(--lg-ease-out), box-shadow var(--lg-dur) var(--lg-ease-out);
}

body.lg-scrolled .header {
  background: var(--lg-specular), var(--lg-regular);
  box-shadow: var(--lg-shadow), 0 1px 0 var(--lg-hairline);
}

.page-container {
  padding-top: calc(var(--lg-safe-top) + var(--ws-header) + var(--lg-bar-gap) + 34px);
  padding-right: max(var(--ws-gutter), calc(var(--lg-safe-right) + 12px));
  padding-left: max(var(--ws-gutter), calc(var(--lg-safe-left) + 12px));
}

.logo { border-radius: var(--lg-r-pill); }
.logo-avatar { border-radius: 10px; }

.header-nav-item,
.header-market-item,
.header .btn,
.user-menu-trigger {
  border-radius: var(--lg-r-pill);
}

.header-nav-item {
  color: var(--lg-label-on-glass);
  transition: color var(--lg-dur) var(--lg-ease-out), background-color var(--lg-dur) var(--lg-ease-out), box-shadow var(--lg-dur) var(--lg-ease-out), scale var(--lg-dur) var(--lg-ease-out);
}

.header-nav-item[aria-expanded="true"] {
  color: var(--lg-label);
  background: rgb(var(--lg-tint) / 0.5);
}

@media (hover: hover) and (pointer: fine) {
  .header-nav-item:hover {
    color: var(--lg-label);
    background: rgb(var(--lg-tint) / 0.5);
  }
}

/* The selected item: the same accent slider as the segmented controls. */
.header-nav-item.active,
.header-nav-item[aria-current="page"] {
  color: var(--lg-sel-fg);
  background: var(--lg-sel-bg);
  box-shadow: var(--lg-sel-shadow);
}

/* Buttons inside the bar take the material tint but no backdrop of their own (no glass on glass). */
.header .btn-ghost,
.header .btn-outline {
  border: 0;
  color: var(--lg-label-on-glass);
  background: rgb(var(--lg-tint) / 0.55);
  box-shadow: var(--lg-edge), var(--lg-highlight);
}

@media (hover: hover) and (pointer: fine) {
  .header .btn-ghost:hover,
  .header .btn-outline:hover {
    color: var(--lg-label);
    background: rgb(var(--lg-tint) / 0.8);
  }
}

@media (hover: hover) and (pointer: fine) {
  .user-menu-trigger:hover { background: rgb(var(--lg-tint) / 0.55); }
}

/* 7.2 Theme button: round, line icons instead of emoji. */
.btn-theme-toggle { gap: 6px; }

.theme-toggle-icon,
.dropdown-theme-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  flex: 0 0 18px;
}

.theme-toggle-icon svg,
.dropdown-theme-icon svg {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  /* Within the theme crossfade budget (300ms). */
  transition: opacity var(--lg-dur) var(--lg-ease-out), rotate var(--lg-dur) var(--lg-ease), scale var(--lg-dur) var(--lg-ease);
}

/* Light theme shows the moon (switch to dark); dark theme shows the sun. */
.lg-icon-sun { opacity: 0; rotate: -90deg; scale: 0.6; }
[data-theme="dark"] .lg-icon-sun { opacity: 1; rotate: 0deg; scale: 1; }
[data-theme="dark"] .lg-icon-moon { opacity: 0; rotate: 90deg; scale: 0.6; }

/* 7.3 Menus grow out of the button that opened them. */
.user-dropdown,
.header-market-panel {
  border: 0;
  border-radius: var(--lg-r-overlay);
  padding: 6px;
  opacity: 0;
  transform: translateY(-4px) scale(0.86);
  transform-origin: top right;
  transition: opacity 200ms var(--lg-ease-out), transform var(--lg-dur-morph) var(--lg-ease), visibility 0s linear var(--lg-dur-morph);
}

.user-dropdown:not(.active),
.header-market-panel:not(.active) { visibility: hidden; }

.user-dropdown.active,
.header-market-panel.active {
  opacity: 1;
  transform: none;
  visibility: visible;
  transition: opacity 200ms var(--lg-ease-out), transform var(--lg-dur-morph) var(--lg-ease), visibility 0s;
}

.header-market-panel { transform-origin: top left; }

.dropdown-item,
.header-market-item {
  min-height: 44px;
  border-radius: calc(var(--lg-r-overlay) - 6px);
  color: var(--lg-label-on-glass);
}

@media (hover: hover) and (pointer: fine) {
  .dropdown-item:hover,
  .header-market-item:hover {
    color: var(--lg-label);
    background: rgb(var(--lg-tint) / 0.6);
  }
}

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .dropdown-item:hover,
  [data-theme="dark"] .header-market-item:hover {
    background: rgb(255 255 255 / 0.08);
  }
}

.dropdown-divider { background: var(--lg-hairline); }

/* 7.4 Segmented controls: categories and sort. A glass groove; the selected slider is drawn by ::after and
   moved by src/liquid-glass.js (it stretches a little on the way, then settles). Without the script the
   selected button carries the slider itself. */
.tabs,
.sort-bar {
  position: relative;
  padding: 4px;
  gap: 2px;
  border: 0;
  border-radius: var(--lg-r-pill);
  isolation: isolate;
}

.sort-bar {
  width: fit-content;
  margin-left: auto;
  display: flex;
}

.tab,
.sort-btn {
  position: relative;
  z-index: 1;
  min-height: 44px;
  padding: 8px 16px;
  border: 0;
  border-radius: var(--lg-r-pill);
  color: var(--lg-label-on-glass);
  background: transparent;
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  transition: color var(--lg-dur) var(--lg-ease-out), background-color var(--lg-dur) var(--lg-ease-out), scale var(--lg-dur) var(--lg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .tab:hover,
  .sort-btn:hover {
    color: var(--lg-label);
    background: rgb(var(--lg-tint) / 0.45);
    border-color: transparent;
  }
}

.tab.active,
.sort-btn.active,
[data-theme="dark"] .tab.active,
[data-theme="dark"] .sort-btn.active {
  color: var(--lg-sel-fg);
  border-color: transparent;
  background: var(--lg-sel-bg);
  box-shadow: var(--lg-sel-shadow);
}

.lg-seg .tab.active,
.lg-seg .sort-btn.active,
[data-theme="dark"] .lg-seg .tab.active,
[data-theme="dark"] .lg-seg .sort-btn.active {
  background: transparent;
  box-shadow: none;
}

.lg-seg::after {
  content: "";
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  z-index: 0;
  width: var(--lg-seg-w, 0px);
  border-radius: var(--lg-r-pill);
  background: var(--lg-sel-bg);
  box-shadow: var(--lg-sel-shadow);
  transform: translateX(var(--lg-seg-x, 0px));
  transition: transform var(--lg-dur-morph) var(--lg-ease), width var(--lg-dur-morph) var(--lg-ease);
  pointer-events: none;
}

.lg-seg.lg-seg-instant::after,
.lg-seg-instant :is(.tab, .sort-btn) { transition: none; }
.lg-seg.lg-seg-moving::after { animation: lg-seg-stretch var(--lg-dur-morph) var(--lg-ease); }

@keyframes lg-seg-stretch {
  0% { scale: 1 1; }
  38% { scale: 1.07 0.9; }
  100% { scale: 1 1; }
}

/* 7.5 Settings navigation reads as the same control. */
.settings-nav {
  top: calc(var(--lg-safe-top) + var(--ws-header) + var(--lg-bar-gap) + 24px);
  padding: 6px;
  border: 0;
  border-radius: var(--lg-r-card);
}

.settings-nav-item {
  border-radius: calc(var(--lg-r-card) - 6px);
  color: var(--lg-label-on-glass);
}

@media (hover: hover) and (pointer: fine) {
  .settings-nav-item:hover { color: var(--lg-label); background: rgb(var(--lg-tint) / 0.5); }
}

.settings-nav-item.active {
  color: var(--lg-sel-fg);
  background: var(--lg-sel-bg);
  box-shadow: var(--lg-sel-shadow);
}

.settings-nav-title,
.settings-nav-section { color: var(--lg-label-3); }
.settings-nav-divider { background: var(--lg-hairline); }

/* 7.6 Dialogs: thick glass that scales in; the dimming layer has a light blur. */
.modal-overlay,
.warning-overlay {
  background: rgb(15 23 42 / 0.28);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  backdrop-filter: blur(8px) saturate(1.2);
  padding: max(16px, var(--lg-safe-top)) max(16px, var(--lg-safe-right)) max(16px, var(--lg-safe-bottom)) max(16px, var(--lg-safe-left));
}

[data-theme="dark"] .modal-overlay,
[data-theme="dark"] .warning-overlay { background: rgb(0 0 0 / 0.5); }

.modal,
.warning-modal,
.admin-order-modal-content {
  border: 0;
  border-radius: var(--lg-r-overlay);
}

/* Scale only: Safari pauses the backdrop blur of an element while its opacity animates, which would show the
   page sharp through a half-faded dialog. The dimming layer still fades. */
.modal {
  transform: translateY(8px) scale(0.94);
  transition: transform var(--lg-dur-morph) var(--lg-ease);
}

.modal-overlay.active .modal { transform: none; }

.admin-order-modal-content {
  background: var(--ws-surface-raised);
  box-shadow: var(--lg-edge), var(--lg-drop);
}

.modal-close,
.warning-close,
.mobile-explore-close {
  border: 0;
  border-radius: 50%;
  color: var(--lg-label-2);
  background: rgb(120 130 150 / 0.16);
  box-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .modal-close:hover,
  .warning-close:hover,
  .mobile-explore-close:hover {
    color: var(--lg-label);
    background: rgb(120 130 150 / 0.26);
  }
}

/* The image lightbox shows a photo: a dark dimming layer, no glass. */
.post-image-lightbox { background: rgb(2 6 23 / 0.82); }

/* 7.7 Explore: a bottom sheet with a grabber that slides up. */
.mobile-explore-overlay {
  padding: max(18px, var(--lg-safe-top)) max(18px, var(--lg-safe-right)) calc(18px + var(--lg-safe-bottom)) max(18px, var(--lg-safe-left));
  background: rgb(15 23 42 / 0.24);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

[data-theme="dark"] .mobile-explore-overlay { background: rgb(0 0 0 / 0.46); }

.mobile-explore-sheet {
  position: relative;
  padding: 26px 20px 20px;
  border: 0;
  border-radius: var(--lg-r-sheet);
}

.mobile-explore-sheet::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 50%;
  width: 36px;
  height: 5px;
  margin-left: -18px;
  border-radius: var(--lg-r-pill);
  background: rgb(120 130 150 / 0.4);
}

.mobile-explore-overlay.active .mobile-explore-sheet { animation: lg-sheet-in var(--lg-dur-morph) var(--lg-ease) both; }

@keyframes lg-sheet-in {
  from { transform: translateY(56px); opacity: 0; }
  to { transform: none; opacity: 1; }
}

.mobile-explore-grid :is(a, button) {
  border: 0;
  border-radius: calc(var(--lg-r-sheet) - 20px);
  color: var(--lg-label);
  background: rgb(var(--lg-tint) / 0.6);
  box-shadow: var(--lg-edge), var(--lg-highlight);
  transition: background-color var(--lg-dur) var(--lg-ease-out), scale var(--lg-dur) var(--lg-ease-out);
}

[data-theme="dark"] .mobile-explore-grid :is(a, button) { background: rgb(255 255 255 / 0.06); }

@media (hover: hover) and (pointer: fine) {
  .mobile-explore-grid :is(a, button):hover { background: var(--lg-sel-bg); }
}
.mobile-explore-grid span,
.mobile-explore-note { color: var(--lg-label-2); }
.mobile-explore-header p { color: var(--lg-sel-fg); }

/* 7.8 Toast: a glass capsule sliding down from the top. */
.profile-toast {
  top: calc(var(--lg-safe-top) + var(--lg-bar-gap) + var(--ws-header) + 12px);
  padding: 10px 20px;
  border: 0;
  border-radius: var(--lg-r-pill);
  color: var(--lg-label);
  font-weight: 600;
  transform: translateX(-50%) translateY(-14px) scale(0.96);
  transition: opacity var(--lg-dur) var(--lg-ease-out), transform var(--lg-dur-morph) var(--lg-ease);
}

.profile-toast.active { transform: translateX(-50%); }
.profile-toast-ok,
.profile-toast-err { border: 0; }
.profile-toast-ok { color: var(--ws-positive); }
.profile-toast-err { color: var(--ws-danger); }

/* 7.9 Floating round buttons. */
.back-to-top-btn {
  right: max(22px, calc(var(--lg-safe-right) + 14px));
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  color: var(--lg-sel-fg);
}

[data-theme="dark"] .back-to-top-btn {
  border: 0;
  color: var(--lg-sel-fg);
  background: var(--lg-specular), var(--lg-regular);
  box-shadow: var(--lg-shadow);
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top-btn:hover,
  [data-theme="dark"] .back-to-top-btn:hover {
    border: 0;
    color: var(--lg-sel-fg);
    background: var(--lg-specular), var(--lg-regular);
    box-shadow: var(--lg-shadow);
  }
}

@media (hover: hover) and (pointer: fine) {
  .back-to-top-btn:hover { transform: translateY(-2px); }
}
.back-to-top-btn:active { transform: scale(0.94); }

.sharing-scroll-nav .sharing-button {
  width: 44px;
  height: 44px;
  flex-basis: 44px;
  border: 0;
  border-radius: 50%;
  color: var(--lg-label-on-glass);
  opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
  .sharing-scroll-nav .sharing-button:hover:not(:disabled) { color: var(--lg-sel-fg); border-color: transparent; }
}

/* 7.10 Badges on cover art: clear glass. They sit inside every card of a long list, so they get the glass look
   (dimmed tint, highlight, dark edge) without a backdrop filter; the cover under them is a smooth gradient,
   which a blur would not change anyway. */
.card-duration,
.card-ep-badge,
.card-paid-badge,
.card-type-badge,
.card-complete-badge,
.card-status {
  min-height: 24px;
  padding: 3px 9px;
  border: 0;
  color: #ffffff;
  background: var(--lg-clear-dim);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 0 0 0.5px rgb(0 0 0 / 0.24);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
}

/* Corner badges are concentric with the card: card radius minus the 8px inset. */
.card-duration,
.card-ep-badge,
.card-paid-badge,
.card-complete-badge { border-radius: calc(var(--lg-r-card) - 8px); }
.card-type-badge,
.card-status { border-radius: var(--lg-r-pill); }

.card-ep-badge { top: 8px; left: 8px; }
.card-paid-badge,
[data-theme="dark"] .card-paid-badge { color: #ffffff; background: rgb(55 48 163 / 0.72); }
.card-type-badge,
[data-theme="dark"] .card-type-badge { color: #ffffff; background: rgb(7 89 133 / 0.72); }
.card-complete-badge { background: rgb(4 120 87 / 0.86); }
/* Completed but the quiz is still to do: a deep orange that keeps white text at WCAG AA. */
.card-complete-badge.is-pending { background: rgb(180 83 9 / 0.95); }

/* Where an access badge takes the top-left corner, the EP badge is not shown at all (it used to sit under it and
   show as a dark line). */
.card-thumbnail:has(.card-paid-badge) .card-ep-badge { display: none; }

.card-lock-overlay {
}

/* 7.11 Phone bars. */
@media (max-width: 900px) {
  :root {
    --lg-bar-gap: 8px;
    --ws-mobile-nav: 76px;
    --lg-nav-w: min(520px, calc(100vw - 24px - var(--lg-safe-left) - var(--lg-safe-right)));
    --lg-nav-col: calc((var(--lg-nav-w) - 10px) / 5);
    --lg-nav-sx: 1;
    --lg-nav-sy: 1;
    --lg-nav-dy: 0px;
    --lg-nav-icon-dy: 0px;
  }

  .header {
    left: calc(var(--lg-safe-left) + 10px);
    right: calc(var(--lg-safe-right) + 10px);
    padding: 0 6px 0 8px;
  }

  .page-container {
    padding-top: calc(var(--lg-safe-top) + var(--ws-header) + var(--lg-bar-gap) + 22px);
    padding-bottom: calc(var(--ws-mobile-nav) + var(--lg-safe-bottom) + 28px);
  }

  /* The sticky categories sit just under the bar; the scroll-edge backing runs down behind them, so no
     content shows in the gap any more. */
  .tabs {
    position: sticky;
    top: calc(var(--lg-safe-top) + var(--lg-bar-gap) + var(--ws-header) + 8px);
    z-index: 20;
    margin-inline: 0;
  }

  .sharing-editor .sharing-save-actions { z-index: 16; }

  :root:has(.home-layout .tabs) { --lg-edge-extra: 60px; }

  /* Bottom scroll edge behind the floating tab bar. */
  /* A real element with a solid colour and a mask fade, so iOS Safari extends it under its own toolbar. */
  .lg-scroll-edge-bottom {
    display: block;
    position: fixed;
    inset: auto 0 0;
    z-index: 15;
    height: calc(var(--ws-mobile-nav) + var(--lg-safe-bottom) + 14px);
    background-color: var(--lg-page);
    -webkit-mask-image: linear-gradient(0deg, rgb(0 0 0 / 0.85) 0, rgb(0 0 0 / 0.85) calc(100% - 34px), transparent 100%);
    mask-image: linear-gradient(0deg, rgb(0 0 0 / 0.85) 0, rgb(0 0 0 / 0.85) calc(100% - 34px), transparent 100%);
    pointer-events: none;
    transform: translateZ(0);
  }

  /* Floating capsule tab bar. The glass is ::before (so it can shrink on its own), the selected slider is
     ::after; both move with transform only. */
  .mobile-bottom-nav {
    inset: auto auto calc(10px + var(--lg-safe-bottom)) 50%;
    width: var(--lg-nav-w);
    height: 62px;
    margin-left: calc(var(--lg-nav-w) / -2);
    padding: 5px;
    border: 0;
    background: none;
    box-shadow: none;
    isolation: isolate;
  }

  .mobile-bottom-nav::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: var(--lg-r-pill);
    transform: scale(var(--lg-nav-sx), var(--lg-nav-sy));
    transform-origin: 50% 100%;
    transition: transform var(--lg-dur-morph) var(--lg-ease);
  }

  .mobile-bottom-nav::after {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: -1;
    width: var(--lg-nav-col);
    height: 52px;
    border-radius: var(--lg-r-pill);
    background: var(--lg-sel-bg);
    box-shadow: var(--lg-sel-shadow);
    opacity: 0;
    transform: translate(calc(var(--lg-nav-i, 0) * var(--lg-nav-col) + (2 - var(--lg-nav-i, 0)) * var(--lg-nav-col) * (1 - var(--lg-nav-sx))), var(--lg-nav-dy)) scale(var(--lg-nav-sx), var(--lg-nav-sy));
    transition: transform var(--lg-dur-morph) var(--lg-ease), opacity var(--lg-dur) var(--lg-ease-out);
  }

  .mobile-bottom-nav:has(> .active)::after { opacity: 1; }
  .mobile-bottom-nav:has(> :nth-child(1).active) { --lg-nav-i: 0; }
  .mobile-bottom-nav:has(> :nth-child(2).active) { --lg-nav-i: 1; }
  .mobile-bottom-nav:has(> :nth-child(3).active) { --lg-nav-i: 2; }
  .mobile-bottom-nav:has(> :nth-child(4).active) { --lg-nav-i: 3; }
  .mobile-bottom-nav:has(> :nth-child(5).active) { --lg-nav-i: 4; }

  .mobile-bottom-nav > :nth-child(1) { --lg-col: 0; }
  .mobile-bottom-nav > :nth-child(2) { --lg-col: 1; }
  .mobile-bottom-nav > :nth-child(3) { --lg-col: 2; }
  .mobile-bottom-nav > :nth-child(4) { --lg-col: 3; }
  .mobile-bottom-nav > :nth-child(5) { --lg-col: 4; }

  .mobile-bottom-nav :is(button, a) {
    min-height: 52px;
    border-radius: var(--lg-r-pill);
    color: var(--lg-label-on-glass);
    transform: translate(calc((2 - var(--lg-col, 2)) * var(--lg-nav-col) * (1 - var(--lg-nav-sx))), var(--lg-nav-icon-dy));
    transition: transform var(--lg-dur-morph) var(--lg-ease), color var(--lg-dur) var(--lg-ease-out);
  }

  .mobile-bottom-nav :is(button, a) span { transition: opacity var(--lg-dur) var(--lg-ease-out); }

  @media (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav :is(button, a):hover { color: var(--lg-label); background: transparent; }
  }

  .mobile-bottom-nav :is(button, a).active { color: var(--lg-sel-fg); background: transparent; }

  @media (hover: hover) and (pointer: fine) {
    .mobile-bottom-nav :is(button, a).active:hover { color: var(--lg-sel-fg); background: transparent; }
  }

  /* Scrolling down shrinks the bar to an icon-only capsule; scrolling up or reaching the top expands it. */
  /* The slider recentres in the shrunk capsule (7px); the icons, which sat above their labels, move further (16px). */
  .mobile-bottom-nav.lg-compact {
    --lg-nav-sx: 0.8;
    --lg-nav-sy: 0.76;
    --lg-nav-dy: 7px;
    --lg-nav-icon-dy: 16px;
  }

  .mobile-bottom-nav.lg-compact :is(button, a) span { opacity: 0; }

  .back-to-top-btn { bottom: calc(var(--ws-mobile-nav) + var(--lg-safe-bottom) + 14px); }

  /* The tabs wrap onto a second line on narrow phones, so the groove keeps card corners. */
  .settings-nav {
    position: static;
    padding: 4px;
    border-radius: var(--lg-r-card);
  }

  .settings-nav-item { border-radius: var(--lg-r-pill); }
}

@media (max-width: 560px) {
  .page-container { padding-top: calc(var(--lg-safe-top) + var(--ws-header) + var(--lg-bar-gap) + 16px); }
  .tabs { margin-bottom: 10px; }
  .tab { padding-inline: 13px; }
  .mobile-explore-sheet { padding: 26px 16px 16px; border-radius: var(--lg-r-sheet); }
  .mobile-explore-grid :is(a, button) { border-radius: calc(var(--lg-r-sheet) - 16px); }
}

@media (max-width: 900px) and (max-height: 520px) and (orientation: landscape) {
  :root { --ws-mobile-nav: 60px; }
  .mobile-bottom-nav { height: 48px; padding: 2px 5px; bottom: calc(6px + var(--lg-safe-bottom)); }
  .mobile-bottom-nav::after { top: 2px; height: 44px; }
  .mobile-bottom-nav :is(button, a) { min-height: 44px; }
}

/* ---------- 8. Content layer (solid) ---------- */

.episode-card,
.tool-card,
.mem-card,
.settings-card,
.faq-item,
.tos-card,
.trade-row,
.timeline-content,
.trades-stat-card,
.trades-section,
.trades-admin-form,
.sidebar-card,
.video-info,
.quiz-card,
.knowledge-card,
.mindmap-item,
.quote-card,
.quote-card-item,
.admin-section,
.admin-stat-card,
.admin-presence-card,
.membership-pause-banner,
.empty-state {
  border-color: var(--lg-border);
  background: var(--ws-surface);
}

.episode-card,
.tool-card,
.mem-card,
.settings-card,
.tos-card,
.sidebar-card,
.video-info,
.quiz-card,
.knowledge-card,
.mindmap-item,
.quote-card,
.admin-section {
  border-radius: var(--lg-r-card);
  box-shadow: var(--ws-shadow-sm);
}

.faq-item,
.trade-row,
.timeline-content,
.trades-stat-card,
.admin-stat-card,
.admin-presence-card { border-radius: calc(var(--lg-r-card) - 4px); }

/* Hover lifts a little; pressing gives way. */
.episode-card,
.tool-card,
.mem-card,
.knowledge-card {
  transition: translate var(--lg-dur) var(--lg-ease-out), scale var(--lg-dur) var(--lg-ease-out), box-shadow var(--lg-dur) var(--lg-ease-out), border-color var(--lg-dur) var(--lg-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  /* Lift 2px at most: the older transform lifts (4px, featured plan card also scaled) are cleared here. */
  .episode-card:hover,
  .tool-card:hover,
  .mem-card:hover,
  .mem-card-featured:hover,
  .knowledge-card:hover {
    transform: none;
    translate: 0 -2px;
    border-color: var(--lg-border-strong);
    box-shadow: var(--ws-shadow-md);
  }
}

.episode-card:active,
.tool-card:active,
.mem-card:active,
.knowledge-card:active { scale: 0.98; }

.card-body,
[data-theme="dark"] .card-body { background: var(--ws-surface); }
.card-progress { background: var(--lg-surface-3); }
.card-progress-fill { background: var(--ws-brand); }

.mem-card-featured { border: 2px solid var(--ws-brand); }
.mem-card-header { background: var(--lg-surface-2); }

/* Reading surfaces stay fully opaque, at reading width. */
.article-container,
.article-frame { background: var(--ws-surface); }

/* Sharing article and editor: an opaque reading card instead of text straight on the background. */
.sharing-page:has(> .sharing-prose),
.sharing-page:has(> .sharing-editor) {
  margin-top: 8px;
  padding: clamp(20px, 4vw, 40px);
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-r-card);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-sm);
}

.sharing-page:has(> .sharing-prose) { width: min(100%, calc(var(--ws-reading) + 80px)); }
.sharing-editor .sharing-save-actions { background: var(--ws-surface); }

/* Sharing index: an inset grouped list of solid rows, like the rest of the site. */
.sharing-index .sharing-list {
  overflow: hidden;
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-r-card);
  background: var(--ws-surface);
  box-shadow: var(--ws-shadow-sm);
}

.sharing-index .sharing-row,
.sharing-index .sharing-row:first-child {
  position: relative;
  padding: 20px 24px 22px;
  border: 0;
  transition: background-color var(--lg-dur) var(--lg-ease-out);
}

.sharing-index .sharing-row + .sharing-row::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: 24px;
  height: 1px;
  background: var(--lg-border);
}

@media (hover: hover) and (pointer: fine) {
  .sharing-index .sharing-row:hover { background: var(--lg-surface-2); }
}
.sharing-index .sharing-row time,
[data-theme="dark"] .sharing-index .sharing-row time { margin-bottom: 6px; color: var(--lg-label-3); font-size: 13px; }
.sharing-index .sharing-title-link,
[data-theme="dark"] .sharing-index .sharing-title-link { color: var(--lg-label); font-size: 20px; line-height: 1.5; }
@media (hover: hover) and (pointer: fine) {
  .sharing-index .sharing-title-link:hover,
  [data-theme="dark"] .sharing-index .sharing-title-link:hover {
    color: var(--ws-brand);
    text-decoration: none;
  }
}
.sharing-index > .sharing-header { margin-bottom: 20px; }

/* Plain sharing lists (management) read as the same grouped list. */
.sharing-page:not(.sharing-index) .sharing-list {
  padding: 0 20px;
  border: 1px solid var(--lg-border);
  border-radius: var(--lg-r-card);
  background: var(--ws-surface);
}

.sharing-page:not(.sharing-index) .sharing-list .sharing-row:last-child { border-bottom: 0; }

/* Paywall and sign-in prompts float over the page: thick glass. */
.sharing-state {
  padding: 28px;
  border-radius: var(--lg-r-overlay);
  color: var(--lg-label-2);
}

p.sharing-state { padding: 20px 24px; }

.video-paywall-overlay .btn { border-radius: var(--lg-r-pill); }

/* ---------- 9. Buttons and fields ---------- */

.btn,
.btn-send-code,
.back-btn,
.page-btn,
.sharing-button,
.price-tab {
  border-radius: var(--lg-r-pill);
  transition: color var(--lg-dur) var(--lg-ease-out), background-color var(--lg-dur) var(--lg-ease-out), border-color var(--lg-dur) var(--lg-ease-out), box-shadow var(--lg-dur) var(--lg-ease-out), filter var(--lg-dur) var(--lg-ease-out), scale var(--lg-dur) var(--lg-ease-out);
}

.sharing-button { min-height: 44px; padding-inline: 16px; }
.sharing-button.sharing-icon { width: 44px; height: 44px; flex-basis: 44px; }

/* Primary: solid accent capsule. */
.btn-primary,
.btn-send-code,
.sharing-button.sharing-primary {
  border: 0;
  color: var(--ws-on-brand);
  background: var(--ws-brand);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), 0 4px 14px rgb(79 70 229 / 0.24);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover,
  .btn-send-code:hover,
  .sharing-button.sharing-primary:hover:not(:disabled) {
    background: var(--ws-brand-hover);
  }
}

/* Secondary: a material-tinted capsule (no backdrop of its own, so it is fine on any surface). */
.btn-ghost,
.btn-outline,
.back-btn,
.sharing-button:not(.sharing-primary) {
  border: 0;
  color: var(--lg-label);
  background: rgb(var(--lg-tint) / 0.72);
  box-shadow: var(--lg-edge), var(--lg-highlight), var(--lg-drop-sm);
}

@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover,
  .btn-outline:hover,
  .back-btn:hover,
  .sharing-button:not(.sharing-primary):hover:not(:disabled) {
    border-color: transparent;
    color: var(--lg-label);
    background: rgb(var(--lg-tint) / 0.95);
  }
}

[data-theme="dark"] .btn-ghost,
[data-theme="dark"] .btn-outline,
[data-theme="dark"] .back-btn,
[data-theme="dark"] .sharing-button:not(.sharing-primary) { background: rgb(255 255 255 / 0.07); }

@media (hover: hover) and (pointer: fine) {
  [data-theme="dark"] .btn-ghost:hover,
  [data-theme="dark"] .btn-outline:hover,
  [data-theme="dark"] .back-btn:hover,
  [data-theme="dark"] .sharing-button:not(.sharing-primary):hover:not(:disabled) {
    background: rgb(255 255 255 / 0.13);
  }
}

/* Press feedback on everything that can be tapped. */
:is(.btn, .btn-send-code, .back-btn, .sharing-button, .tab, .sort-btn, .header-nav-item, .user-menu-trigger, .logo,
  .mobile-explore-grid button, .mobile-explore-close, .modal-close, .settings-nav-item, .price-tab, .page-btn,
  .site-footer-links button):active:not(:disabled) { scale: 0.96; }

.btn-primary:active:not(:disabled),
.btn-send-code:active:not(:disabled),
.sharing-button.sharing-primary:active:not(:disabled) { filter: brightness(0.92); }

.dropdown-item:active,
.header-market-item:active { scale: 0.98; }

.mobile-bottom-nav :is(button, a):active svg { scale: 0.88; }

/* Fields: solid, 12px corners, accent ring on focus. */
.form-input,
.trades-input,
.admin-plan-input,
.admin-plan-select,
.admin-cms-textarea,
.sharing-editor input:not([type=file]),
.sharing-editor textarea,
.sharing-editor select,
.sharing-comment-form textarea,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
textarea,
select {
  border-color: var(--lg-border-strong);
  border-radius: var(--lg-r-control);
  color: var(--ws-text);
  background: var(--ws-surface);
}

:where(input, textarea, select):focus,
.sharing-editor :is(input, textarea, select):focus {
  border-color: var(--ws-brand);
  outline: 2px solid var(--ws-brand);
  outline-offset: 0;
  box-shadow: var(--lg-focus-ring);
}

.sharing-settings,
.sharing-code,
.sharing-image-slot img { border-radius: var(--lg-r-control); }

/* ---------- 10. Page details on the shared materials ---------- */

/* Navigation entries are links: no underline, colour from the control they look like. */
a.logo,
a.header-nav-item,
.site-footer-links a,
.mobile-bottom-nav a,
.mobile-explore-grid a {
  text-decoration: none;
}

a.logo { color: inherit; }

.home-quotes { border-radius: var(--lg-r-card); }

.tool-icon { border-radius: calc(var(--lg-r-card) - 8px); }
.tools-disclaimer,
.stat-box,
.sub-plan-row,
.billing-item { border-radius: var(--lg-r-control); }

.site-footer {
  border-top: 1px solid var(--lg-hairline);
  background: rgb(var(--lg-tint) / 0.6);
}

[data-theme="dark"] .site-footer { background: rgb(9 13 22 / 0.7); }

.site-footer-links :is(button, a) { border-radius: var(--lg-r-pill); }

/* Until the app has rendered the page, the footer would sit at the bottom of the empty viewport and then jump down
   (a 0.09 layout shift on desktop): keep it hidden while the main area is still empty. */
.page-container:has(> #mainContent:empty) + .site-footer { visibility: hidden; }

/* The admin area only takes the tokens. */
.admin-board-tabs,
.admin-user-subtabs { border-radius: var(--lg-r-pill); }
.admin-board-tab,
.admin-user-subtabs button { border-radius: var(--lg-r-pill); }
.admin-board-tab.active,
.admin-user-subtabs button.active { color: var(--lg-sel-fg); background: var(--lg-sel-bg); box-shadow: var(--lg-sel-shadow); }

/* ---------- 11. Reduced motion: no shrinking, morphing or springs; fades stay ---------- */

@media (prefers-reduced-motion: reduce) {
  .mobile-bottom-nav.lg-compact {
    --lg-nav-sx: 1;
    --lg-nav-sy: 1;
    --lg-nav-dy: 0px;
    --lg-nav-icon-dy: 0px;
  }
  .mobile-bottom-nav.lg-compact :is(button, a) span { opacity: 1; }
  .lg-seg.lg-seg-moving::after { animation: none; }
  .mobile-explore-overlay.active .mobile-explore-sheet { animation-name: lg-fade-in; }
  .user-dropdown,
  .header-market-panel,
  .modal { transform: none; }
  .profile-toast,
  .profile-toast.active { transform: translateX(-50%); }
}

@keyframes lg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- 12. Touch screens, fields and low-power devices ---------- */

/* Fields stay at 16px or more on touch screens (iPad landscape included), so iOS does not zoom in on focus. */
@media (pointer: coarse), (max-width: 900px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  textarea,
  select,
  .sharing-editor :is(input, textarea, select),
  .sharing-editor textarea.sharing-code-input,
  .sharing-comment-form textarea {
    font-size: max(16px, 1em);
  }
}

/* Low-power devices (html.lg-lite, set in index.html when the browser reports fewer than 4 cores or at most 4 GB):
   a lighter blur, and the secondary controls on solid material, so fewer blurred layers share the screen. The bars,
   menus and dialogs stay glass. */
:root.lg-lite { --glass-blur: calc((16px + var(--glass-level) * 20px) * 0.55); }

:root.lg-lite :is(.tabs, .sort-bar, .settings-nav, .back-to-top-btn, .sharing-scroll-nav .sharing-button, .sharing-state) {
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: var(--lg-specular), rgb(var(--lg-tint) / 0.94);
}

@media print {
  .lg-scroll-edge,
  .lg-scroll-edge-bottom { display: none; }
}