/* LF Audio Help Center, matches lf-audio.com Shopify store */

:root {
  --color-bg: #ffffff;
  --color-text: #444444;
  --color-heading: #111111;
  /* Brand + semantic tokens, synced with app-portal/style.css,
     admin/theme.css, and the AuralSync mobile app (lib/constants.dart
     → AppColors + lib/main.dart). Theme-token changes here MUST flow
     to all four projects. See repo CLAUDE.md "Theme sync". */
  --color-accent: #0891b2;
  --color-accent-light: #cffafe;
  /* Near-black foreground that clears AA (>= 4.5:1) on BOTH the light
     accent (#0891b2) and the dark accent (#00d3f3), so filled-accent
     buttons don't need per-theme overrides. */
  --color-accent-contrast: #0c1429;
  --color-border: #e5e7eb;
  --color-surface: #f9fafb;
  --color-surface-alt: #f1f3f7;
  --color-muted: #6b7280;
  --color-success: #16a34a;
  --color-success-bg: #dcfce7;
  --color-warning: #d97706;
  --color-warning-bg: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-bg: #fee2e2;
  --color-info: #2563eb;
  --color-info-bg: #dbeafe;
  --color-purple: #9333ea;
  --color-purple-bg: #f3e8ff;
  --font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Type scale, synced across admin/theme.css, app-portal/style.css,
     and the AuralSync mobile app (lib/constants.dart → AppTypography).
     Existing inline font-size values are NOT migrated en masse; new code
     SHOULD prefer these. */
  --font-size-xs: 11px;
  --font-size-sm: 12px;
  --font-size-base: 14px;
  --font-size-md: 16px;
  --font-size-lg: 18px;
  --font-size-xl: 20px;
  --font-size-2xl: 24px;
  --font-size-3xl: 32px;

  /* Spacing scale, synced with the three other LF Audio projects.
     Use in place of bare px values for paddings/margins/gaps. */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-large: 16px;
  --radius-pill: 999px;

  /* Shadow scale, synced with admin/theme.css's --lf-shadow / --lf-shadow-lg
     (admin keeps both names via an alias). App-portal mirrors these
     identical values. Mobile is intentionally border-only (no elevation)
     by design, see CLAUDE.md "Theme sync". */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.1);

  --max-width: 1440px;
  --sidebar-width: 260px;
}

/* --- Dark theme --- */
[data-theme="dark"] {
  --color-bg: #1a1a2e;
  --color-text: #d1d5db;
  --color-heading: #f3f4f6;
  --color-accent: #00d3f3;
  --color-accent-light: #164e63;
  /* Bumped from #2d2d44 (1.28:1 vs page) to improve card-boundary
     perception per WCAG 1.4.11. Still below strict 3:1 but a clear
     improvement without lighting up the "ghost card" aesthetic. */
  --color-border: #3d3d5e;
  --color-surface: #22223a;
  --color-surface-alt: #2a2a45;
  --color-muted: #9ca3af;
  --color-success: #34d399;
  --color-success-bg: #103828;
  --color-warning: #f59e0b;
  --color-warning-bg: #3d2a0a;
  --color-danger: #f87171;
  --color-danger-bg: #3d1d1d;
  /* Lightened from #6b8cff to gain contrast headroom against info-bg
     for small labels (4.6:1 → 5.85:1). */
  --color-info: #8aa2ff;
  --color-info-bg: #1e2a4a;
  --color-purple: #caa4ff;
  --color-purple-bg: #3a1f4d;

  /* Dark-theme shadow values mirror admin/theme.css. */
  --shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.5);
}

/* Respect user preference for reduced motion, disables card hover lifts,
 * loading-dot animation, chevron rotations, etc. WCAG 2.3.3. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* Scrollbars, tinted to the theme palette so the default bright-white
 * browser scrollbar doesn't drift visually on dark surfaces. Transparent
 * track lets the underlying page/panel color show through. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--color-border) transparent;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-muted);
}
::-webkit-scrollbar-corner {
  background: transparent;
}
[data-theme="dark"] .search-dialog { background: var(--color-surface); }
[data-theme="dark"] .search-trigger { background: var(--color-surface); border-color: var(--color-border); }
[data-theme="dark"] .search-input-wrapper kbd { background: var(--color-surface-alt); border-color: var(--color-border); }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: underline; }
a:hover { color: var(--color-accent); text-decoration: none; }

/* Global focus ring, synced with app-portal + admin. Uses :focus-visible
 * so mouse clicks don't get the outline, only keyboard navigation does.
 * Theme-sync rule: mirrored in app-portal/style.css + admin/theme.css. */
:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 4px;
}

/* --- Header --- */
.site-header {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0.75rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-heading);
  font-weight: 600;
  font-size: 1.1rem;
  white-space: nowrap;
  text-decoration: none;
}
.logo-link:hover { text-decoration: none; color: var(--color-heading); }
.logo-img { height: 18px; width: auto; }
.logo-divider { color: var(--color-border); font-weight: 300; }
.logo-sub { color: var(--color-muted); font-weight: 400; }

/* --- Search trigger --- */
.search-trigger {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: var(--color-surface);
  color: var(--color-muted);
  font-family: var(--font-family);
  font-size: 0.875rem;
  cursor: pointer;
  transition: border-color 0.15s;
  min-width: 200px;
}
.search-trigger:hover { border-color: var(--color-accent); }
.search-trigger kbd {
  margin-left: auto;
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  background: var(--color-bg);
}

/* --- Nav bar (removed, navigation in sidebar) --- */

/* --- Page layout --- */
.page-layout {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  min-height: calc(100vh - 200px);
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  padding: 1.25rem 0.75rem 2rem 0.75rem;
  overflow-y: auto;
  max-height: calc(100vh - 60px);
  position: sticky;
  top: 60px;
}
.sidebar-inner { }
.sidebar-collection { margin-bottom: 0.25rem; }
.sidebar-collection-title {
  font-size: 0.95rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-muted);
  margin-bottom: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.35rem 0.25rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.sidebar-collection-title:hover { background: var(--color-surface-alt); }
.sidebar-collection-title a {
  color: var(--color-muted);
  text-decoration: none;
  flex: 1;
}
.sidebar-collection-title a:hover {
  color: var(--color-heading);
  text-decoration: none;
}
.sidebar-collection.open > .sidebar-collection-title a {
  color: var(--color-heading);
}

/* Chevron arrows */
.chevron {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--color-muted);
  transition: transform 0.15s;
  transform: rotate(-90deg);
  flex-shrink: 0;
}
.open > .sidebar-collection-title > .chevron,
.sidebar-section.open > .sidebar-section-title > .chevron {
  transform: rotate(0deg);
}

/* Collapse/expand body */
.sidebar-collection-body {
  display: none;
  padding-left: 0.25rem;
}
.sidebar-collection.open > .sidebar-collection-body {
  display: block;
}

.sidebar-section { margin-bottom: 0.25rem; margin-left: 0.5rem; }
.sidebar-section > ul {
  display: none;
}
.sidebar-section.open > ul {
  display: block;
}
.sidebar-section-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.15rem;
  padding: 0.2rem 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}
.sidebar-section-title:hover { background: var(--color-surface-alt); }
.sidebar-section ul { list-style: none; padding-left: 0.5rem; }
.sidebar-section li { margin-bottom: 0.1rem; }
.sidebar-section li a {
  display: block;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  font-size: 0.825rem;
  transition: background 0.1s;
  text-decoration: none;
}
.sidebar-section li a:hover {
  background: var(--color-surface-alt);
  text-decoration: none;
}
.sidebar-section li.active a {
  background: var(--color-accent-light);
  color: var(--color-accent);
  font-weight: 500;
}

/* --- Main content --- */
.main-content {
  flex: 1;
  min-width: 0;
  padding: 1.5rem 2rem 3rem;
}

/* --- Breadcrumb --- */
.breadcrumb {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin-bottom: 1.5rem;
}
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb span { margin: 0 0.35rem; }

/* --- Article --- */
.article-header { margin-bottom: 2rem; }
.article-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-heading);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}
.article-body h2 {
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 1.5rem 0 0.5rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--color-border);
  /* The site header is sticky and about 64px tall, so an anchored heading
     lands UNDERNEATH it and the reader arrives at a section whose title they
     cannot see. This was already true of every table-of-contents link; the
     copy-link anchors just make it the common case. */
  scroll-margin-top: 80px;
}
.article-body h3 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--color-heading);
  margin: 1rem 0 0.35rem;
  scroll-margin-top: 80px;
}
.article-body p { margin-bottom: 0.65rem; }
.article-body ul, .article-body ol {
  margin: 0 0 0.65rem 1.5rem;
}
.article-body li { margin-bottom: 0.2rem; }
.article-body img {
  max-width: 100%;
  border-radius: var(--radius-sm);
  margin: 1rem 0;
}
.article-body hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 1.25rem 0;
}

/* --- Tables --- */
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
  table-layout: auto;
}
.article-body th, .article-body td {
  padding: 0.6rem 0.75rem;
  text-align: left;
  border: 1px solid var(--color-border);
}
.article-body th:first-child, .article-body td:first-child {
  white-space: nowrap;
}
.article-body th {
  background: var(--color-surface-alt);
  font-weight: 600;
  color: var(--color-heading);
}
.article-body tr:nth-child(even) td {
  background: var(--color-surface);
}

/* --- Code --- */
.article-body code {
  background: var(--color-surface-alt);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-size: 0.85em;
}
.article-body pre {
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1rem;
  overflow-x: auto;
  margin: 1rem 0 1.5rem;
}
.article-body pre code {
  background: none;
  padding: 0;
}

/* --- Callouts --- */
.callout {
  border-left: 4px solid;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin: 1rem 0 1.5rem;
}
.callout-label {
  font-weight: 600;
  display: block;
  margin-bottom: 0.25rem;
}
.callout-note {
  border-color: var(--color-info);
  background: var(--color-info-bg);
}
.callout-note .callout-label { color: var(--color-info); }
.callout-warning {
  border-color: var(--color-warning);
  background: var(--color-warning-bg);
}
.callout-warning .callout-label { color: var(--color-warning); }
.callout-tip {
  border-color: var(--color-success);
  background: var(--color-success-bg);
}
.callout-tip .callout-label { color: var(--color-success); }
.callout-danger {
  border-left-width: 6px;
  border-color: var(--color-danger);
  background: var(--color-danger-bg);
  box-shadow: 0 1px 3px rgba(220, 38, 38, 0.15);
}
.callout-danger .callout-label {
  color: var(--color-danger);
  font-size: 1rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
[data-theme="dark"] .callout-danger {
  box-shadow: 0 1px 3px rgba(248, 113, 113, 0.2);
}

/* --- Badges --- */
.badge {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: capitalize;
}
.badge-basic { background: var(--color-info-bg); color: var(--color-info); }
.badge-advanced { background: var(--color-purple-bg); color: var(--color-purple); }

/* --- Homepage --- */
.home-hero {
  text-align: center;
  padding: 3rem 1rem 2rem;
}
.home-hero h1 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 0.5rem;
}
.home-hero p {
  color: var(--color-muted);
  font-size: 1.1rem;
}
.getting-started-section {
  max-width: 700px;
  margin: 0 auto 2rem;
  padding: 1.5rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.getting-started-section h2 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: 1rem;
}
.getting-started-links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.getting-started-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  color: var(--color-text);
}
.getting-started-link:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}
.getting-started-link strong { font-size: 1.05rem; }
.getting-started-link span { font-size: 0.85rem; color: var(--color-muted); margin-top: 0.25rem; }
.app-download { margin-bottom: 1rem; }
.app-download p { font-size: 0.95rem; color: var(--color-text); margin-bottom: 0.75rem; }
.app-badges { display: flex; gap: 0.75rem; align-items: center; }
.app-badge { height: 48px; width: auto; border-radius: 6px; }
.getting-started-footer { font-size: 0.9rem; color: var(--color-muted); margin: 0; }

.collection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.25rem;
  padding: 0 1rem 3rem;
  max-width: 900px;
  margin: 0 auto;
}
.collection-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
  color: var(--color-text);
}
.collection-card:hover {
  border-color: var(--color-accent);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  text-decoration: none;
}
.collection-icon { font-size: 2rem; margin-bottom: 0.75rem; }
.collection-product-img {
  width: 100px;
  height: 100px;
  object-fit: contain;
  margin-bottom: 0.75rem;
  border-radius: var(--radius-sm);
}
.collection-card h2 {
  font-size: 1.2rem;
  color: var(--color-heading);
  margin-bottom: 0.25rem;
}
.collection-card p { font-size: 0.9rem; color: var(--color-muted); margin-bottom: 0.5rem; }
.article-count { font-size: 0.8rem; color: var(--color-muted); }

/* --- Collection page --- */
.collection-header {
  margin-bottom: 1.5rem;
}
.collection-header h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--color-heading);
}
.collection-desc { color: var(--color-muted); margin-top: 0.25rem; }

.category-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.cat-tab {
  padding: 0.4rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  background: var(--color-bg);
  font-family: var(--font-family);
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.cat-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
.cat-tab.active {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-accent-contrast);
}

.article-list { display: flex; flex-direction: column; gap: 0.5rem; }
.article-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  transition: border-color 0.15s, background 0.15s;
  color: var(--color-text);
}
.article-card:hover {
  border-color: var(--color-accent);
  background: var(--color-surface);
  text-decoration: none;
}
.card-content h3 {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-heading);
  margin-bottom: 0.15rem;
}
.card-content p {
  font-size: 0.85rem;
  color: var(--color-muted);
  margin: 0;
}

/* --- Footer --- */
.site-footer {
  border-top: 1px solid var(--color-border);
  background: var(--color-bg);
  margin-top: 3rem;
  padding: 1.25rem 1.5rem;
}
.footer-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
  color: var(--color-muted);
  font-size: 0.85rem;
}
.site-footer a { color: var(--color-muted); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent); }

/* --- Search modal --- */
.search-modal[hidden] { display: none; }
.search-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 15vh;
}
.search-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}
.search-dialog {
  position: relative;
  background: var(--color-bg);
  border-radius: var(--radius);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 560px;
  max-height: 70vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.search-input-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}
.search-input-wrapper svg { flex-shrink: 0; color: var(--color-muted); }
.search-input-wrapper input {
  flex: 1;
  border: none;
  outline: none;
  font-family: var(--font-family);
  font-size: 1rem;
  color: var(--color-heading);
  background: transparent;
}
.search-input-wrapper kbd {
  padding: 0.15rem 0.4rem;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--color-muted);
  background: var(--color-surface);
}
.search-results {
  overflow-y: auto;
  padding: 0.5rem;
}
.search-result {
  display: block;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-sm);
  color: var(--color-text);
  transition: background 0.1s;
}
.search-result:hover, .search-result.focused {
  background: var(--color-surface-alt);
  text-decoration: none;
}
.search-result-title {
  font-weight: 600;
  color: var(--color-heading);
  font-size: 0.9rem;
}
.search-result-meta {
  font-size: 0.8rem;
  color: var(--color-muted);
}
.search-empty {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-muted);
  font-size: 0.9rem;
}

/* --- YouTube embeds --- */
.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  margin: 0.75rem 0 1rem;
  border-radius: var(--radius-sm);
}
.video-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: var(--radius-sm);
}

/* --- Related Videos thumbnail grid --- */
.related-videos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin: 0.75rem 0 1.5rem;
}
.related-video-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.related-video-card:hover {
  transform: translateY(-2px);
  border-color: var(--color-accent);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.related-video-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.related-video-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.related-video-play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: none;
  transition: background 0.15s ease;
}
.related-video-play::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 55%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 9px 0 9px 14px;
  border-color: transparent transparent transparent #ffffff;
}
.related-video-card:hover .related-video-play {
  background: var(--color-accent);
}
.related-video-body {
  padding: 0.85rem 0.9rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.related-video-title {
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1.4;
  color: var(--color-heading);
}
.related-video-caption {
  font-size: 0.85rem;
  color: var(--color-muted);
  line-height: 1.5;
}

/* --- Table of Contents (right rail) --- */
.article-with-toc {
  display: flex;
  gap: 2rem;
}
.article-with-toc .article {
  flex: 1;
  min-width: 0;
}
.toc {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 100px;
  align-self: flex-start;
  max-height: calc(100vh - 120px);
  overflow-y: auto;
  border-left: 1px solid var(--color-border);
  padding-left: 1rem;
}
.toc h4 {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-muted);
  margin-bottom: 0.5rem;
}
.toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.toc li {
  margin-bottom: 0.15rem;
}
.toc li a {
  display: block;
  padding: 0.2rem 0;
  font-size: 0.8rem;
  color: var(--color-muted);
  text-decoration: none;
  line-height: 1.35;
  transition: color 0.1s;
}
.toc li a:hover {
  color: var(--color-accent);
  text-decoration: none;
}
.toc .toc-indent {
  padding-left: 0.75rem;
}

/* --- No-underline nav links --- */
.collection-card,
.article-card,
.search-result,
.breadcrumb a {
  text-decoration: none;
}
.article-card:hover,
.collection-card:hover {
  text-decoration: none;
}
/* Footer anchor styles consolidated into the .site-footer block above. */

/* --- Theme toggle --- */
.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
  transition: background 0.15s;
}
.theme-toggle:hover { background: var(--color-surface-alt); color: var(--color-heading); }
.icon-moon { display: none; }
[data-theme="dark"] .icon-sun { display: none; }
[data-theme="dark"] .icon-moon { display: block; }

/* --- Header right area --- */
.header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
}
.menu-toggle:hover { background: var(--color-surface-alt); }

/* --- Sidebar backdrop (mobile) --- */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 149;
}
.sidebar-backdrop.open { display: block; }

/* --- Responsive --- */
@media (max-width: 768px) {
  .menu-toggle { display: flex; }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 280px;
    max-height: 100vh;
    z-index: 150;
    background: var(--color-bg);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    padding-top: 1.5rem;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15);
  }

  .toc { display: none; }
  /* There is no hover on a phone, and the line above has just taken away the
     table of contents, so this is the ONLY way left to link to a section.
     Shown at rest rather than revealed. */
  .article-body .heading-anchor { opacity: 0.55; }
  .article-with-toc { flex-direction: column; }
  .main-content { padding: 1rem; }
  .header-inner { padding: 0.5rem 1rem; }
  .search-trigger { min-width: 0; }
  .search-trigger span { display: none; }
  .search-trigger kbd { display: none; }
  .home-hero { padding: 2rem 1rem 1.5rem; }
  .home-hero h1 { font-size: 1.6rem; }
  .getting-started-section { margin: 0 0.5rem 1.5rem; padding: 1rem 1.25rem; }
  .getting-started-links { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
  .collection-grid { grid-template-columns: 1fr 1fr; padding: 0 0.5rem 2rem; gap: 0.75rem; }
  .collection-card { padding: 1.25rem 1rem; }
  .article-header h1 { font-size: 1.5rem; }
  .article-body h2 { font-size: 1.2rem; }
  .article-card { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .footer-inner { flex-direction: column; text-align: center; gap: 0.75rem; }

  .search-modal { padding-top: 5vh; }
  .search-dialog { width: 95%; }

  .breadcrumb { font-size: 0.8rem; }
}

@media (max-width: 480px) {
  .collection-grid { grid-template-columns: 1fr; }
  .collection-product-img { width: 70px; height: 70px; }
}

/* --- Heading anchors ---
   Every article heading carries a "#" that copies a link straight to that
   section. The markup comes from build.js; the glyph and both tooltip labels
   are drawn here rather than sitting in the document, because anything with
   text content inside the heading would land in the MiniSearch body index once
   per heading on every page. */
.article-body .heading-anchor {
  position: relative;
  display: inline-block;
  margin-left: 0.4rem;
  opacity: 0;
  color: var(--color-muted);
  font-weight: 400;
  /* Required: the base rule underlines every anchor in the article body. */
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.12s ease, color 0.12s ease;
}
.article-body .heading-anchor::before { content: "#"; }
.article-body h2:hover .heading-anchor,
.article-body h3:hover .heading-anchor,
.article-body .heading-anchor:focus-visible,
.article-body .heading-anchor[data-copied] { opacity: 1; }
.article-body .heading-anchor:hover { color: var(--color-accent); }

/* The tooltip. Its text is selected by the state attribute the script sets, so
   the label cannot claim a copy that did not happen. */
.article-body .heading-anchor::after {
  content: "Copy link to this section";
  position: absolute;
  /* BELOW the anchor, not above, and this is a fix rather than a preference.
     Clicking an anchor takes the fragment jump, which parks the heading
     scroll-margin-top from the viewport top: about 16px of clear space under a
     64px sticky header that carries z-index 100. A tooltip drawn above the
     heading lands in that gap and is clipped by the header at the exact moment
     it is saying "Link copied", so the one message the reader needs is the one
     they cannot read. Below, there is always body text under it and never a
     fixed element over it. */
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  color: var(--color-text);
  font-size: 0.72rem;
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
.article-body .heading-anchor:hover::after,
.article-body .heading-anchor:focus-visible::after,
.article-body .heading-anchor[data-copied]::after { opacity: 1; }
.article-body .heading-anchor[data-copied="true"]::after { content: "Link copied"; }
/* Named honestly. A reader whose browser refused the write needs to know the
   clipboard does not hold what they think it holds. */
.article-body .heading-anchor[data-copied="failed"]::after { content: "Could not copy: use the address bar"; }