/*
 * Yumao Apple-inspired design system
 * Shared presentation layer only. Existing page structure and business logic stay intact.
 */
:root {
  color-scheme: light;
  --apple-bg: #ffffff;
  --apple-bg-secondary: #f5f5f7;
  --apple-surface: rgba(255, 255, 255, 0.82);
  --apple-surface-solid: #ffffff;
  --apple-surface-raised: #fbfbfd;
  --apple-text: #1d1d1f;
  --apple-text-secondary: #6e6e73;
  --apple-text-tertiary: #86868b;
  --apple-blue: #007aff;
  --apple-blue-hover: #0071e3;
  --apple-blue-active: #0068d6;
  --apple-blue-soft: rgba(0, 122, 255, 0.1);
  --apple-border: rgba(0, 0, 0, 0.1);
  --apple-border-strong: rgba(0, 0, 0, 0.18);
  --apple-glass: saturate(180%) blur(20px);
  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --apple-shadow-md: 0 8px 28px rgba(0, 0, 0, 0.08);
  --apple-shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.14);
  --apple-focus: 0 0 0 4px rgba(0, 122, 255, 0.28);
  --apple-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display",
    "PingFang SC", "Helvetica Neue", "Segoe UI", sans-serif;
  --apple-radius-sm: 12px;
  --apple-radius-md: 16px;
  --apple-radius-lg: 24px;
  --apple-radius-xl: 32px;
  --apple-space-1: 8px;
  --apple-space-2: 16px;
  --apple-space-3: 24px;
  --apple-space-4: 32px;
  --apple-space-5: 48px;
  --apple-space-6: 64px;
  --apple-spring: cubic-bezier(0.22, 1.15, 0.36, 1);
  --apple-ease: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* Compatibility aliases used by the existing pages. */
  --bg: var(--apple-bg-secondary);
  --bg-elev: var(--apple-bg);
  --surface: var(--apple-surface);
  --surface-2: var(--apple-bg-secondary);
  --surface-inset: #ebebed;
  --panel: var(--apple-surface);
  --text: var(--apple-text);
  --ink: var(--apple-text);
  --text-muted: var(--apple-text-secondary);
  --ink-soft: var(--apple-text-secondary);
  --text-faint: var(--apple-text-tertiary);
  --ink-faint: var(--apple-text-tertiary);
  --primary: var(--apple-blue);
  --primary-hover: var(--apple-blue-hover);
  --primary-active: var(--apple-blue-active);
  --primary-soft: var(--apple-blue-soft);
  --accent: #2997ff;
  --accent-soft: var(--apple-blue-soft);
  --border: var(--apple-border);
  --line: var(--apple-border);
  --border-strong: var(--apple-border-strong);
  --shadow-sm: var(--apple-shadow-sm);
  --shadow-md: var(--apple-shadow-md);
  --shadow-lg: var(--apple-shadow-lg);
  --shadow-focus: var(--apple-focus);
  --font-sans: var(--apple-font);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --apple-bg: #000000;
  --apple-bg-secondary: #1c1c1e;
  --apple-surface: rgba(29, 29, 31, 0.82);
  --apple-surface-solid: #1d1d1f;
  --apple-surface-raised: #2c2c2e;
  --apple-text: #f5f5f7;
  --apple-text-secondary: #a1a1a6;
  --apple-text-tertiary: #86868b;
  --apple-blue: #0a84ff;
  --apple-blue-hover: #409cff;
  --apple-blue-active: #0071e3;
  --apple-blue-soft: rgba(10, 132, 255, 0.18);
  --apple-border: rgba(255, 255, 255, 0.15);
  --apple-border-strong: rgba(255, 255, 255, 0.26);
  --apple-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.38);
  --apple-shadow-md: 0 10px 32px rgba(0, 0, 0, 0.38);
  --apple-shadow-lg: 0 28px 72px rgba(0, 0, 0, 0.58);
  --apple-focus: 0 0 0 4px rgba(10, 132, 255, 0.42);
  --surface-inset: #1c1c1e;
}

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

html {
  background: var(--apple-bg);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--apple-text);
  background-color: var(--apple-bg);
  font-family: var(--apple-font);
  font-weight: 400;
  letter-spacing: -0.012em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: var(--apple-blue); text-underline-offset: 0.18em; }
button, input, select, textarea { font: inherit; }
button, [role="button"], a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: none !important;
  box-shadow: var(--apple-focus) !important;
}

button, [role="button"], .btn, .card, .chapter-card, .option-item, .shortcut {
  touch-action: manipulation;
  transition-timing-function: var(--apple-spring) !important;
}

.is-pointer-down,
button:active,
[role="button"]:active,
.btn:active,
.card:active,
.chapter-card:active,
.option-item:active,
.shortcut:active {
  transform: scale(0.975) !important;
  transition-duration: 80ms !important;
}

/* Shared floating theme control for pages that do not already provide one. */
.apple-theme-toggle {
  position: fixed;
  right: 20px;
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: inline-grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  color: var(--apple-text);
  background: var(--apple-surface);
  border: 1px solid var(--apple-border);
  border-radius: 999px;
  box-shadow: var(--apple-shadow-md);
  cursor: pointer;
  backdrop-filter: var(--apple-glass);
  -webkit-backdrop-filter: var(--apple-glass);
  transition: transform 220ms var(--apple-spring), background 180ms var(--apple-ease), box-shadow 180ms var(--apple-ease);
}
.apple-theme-toggle:hover { transform: translateY(-2px); box-shadow: var(--apple-shadow-lg); }
.apple-theme-toggle__icon { font-size: 20px; line-height: 1; }

/* Home page: reduce visual noise and preserve the wallpaper as a quiet backdrop. */
#bing-bg { filter: saturate(0.58) contrast(0.94) brightness(0.92); }
#bing-bg-overlay { background: rgba(255, 255, 255, 0.76) !important; }
[data-theme="dark"] #bing-bg-overlay { background: rgba(0, 0, 0, 0.72) !important; }
#orbs { display: none !important; }
.top-bar, .topbar, .doc-top, .paper-top {
  backdrop-filter: var(--apple-glass);
  -webkit-backdrop-filter: var(--apple-glass);
}
.card, .shortcuts-header, .shortcuts-body, .question-card, .chapter-card,
.stat-card, .answer-sheet, .result-card, .doc-section, .slide, .abs-box,
.explain-sub, .pdf-embed, .ps-left, .modal {
  background: var(--apple-surface);
  border-color: var(--apple-border);
  box-shadow: var(--apple-shadow-sm);
  backdrop-filter: var(--apple-glass);
  -webkit-backdrop-filter: var(--apple-glass);
}
.card:hover, .chapter-card:hover { box-shadow: var(--apple-shadow-md); }
.btn-primary, .btn.primary, .mode-tab.active {
  color: #fff;
  background: var(--apple-blue);
  border-color: var(--apple-blue);
}
.btn, .doc-btn, .mode-tab, .type-tab, .menu-btn { border-radius: 999px !important; }

/* Article library and documents. */
.hero, .paper-hero {
  background: linear-gradient(135deg, #007aff 0%, #2997ff 58%, #64d2ff 125%) !important;
  border-radius: var(--apple-radius-xl) !important;
  box-shadow: 0 18px 44px rgba(0, 122, 255, 0.22) !important;
}
.sidebar { backdrop-filter: var(--apple-glass); -webkit-backdrop-filter: var(--apple-glass); }
.doc-section, .slide, .abs-box, .explain-sub, .pdf-embed, .ps-left { border-radius: var(--apple-radius-lg); }
.paper-top, .doc-top { background: color-mix(in srgb, var(--apple-bg) 82%, transparent) !important; }
.pagenav { background: var(--apple-surface); border-color: var(--apple-border); backdrop-filter: var(--apple-glass); }
.pagenav a.active { background: var(--apple-blue) !important; }

/* Quiz: retain correctness colours while unifying structure and spacing. */
.top-bar { background: var(--apple-surface) !important; }
.sidebar-tip .tip-box { background: var(--apple-surface) !important; border-color: var(--apple-border) !important; }
.question-card, .chapter-card, .stat-card, .answer-sheet, .result-card { border-radius: var(--apple-radius-lg) !important; }
.option-item { border-radius: var(--apple-radius-md) !important; }
.option-item:hover:not(.disabled) { border-color: color-mix(in srgb, var(--apple-blue) 44%, transparent) !important; }

/* Netscape bookmark export remains importable, but is pleasant when opened directly. */
body.apple-bookmarks {
  max-width: 1120px;
  margin-inline: auto;
  padding: clamp(32px, 6vw, 80px) clamp(20px, 5vw, 64px);
  background: var(--apple-bg-secondary);
}
body.apple-bookmarks > h1 { margin: 0 0 32px; font-size: clamp(40px, 7vw, 72px); letter-spacing: -0.045em; }
body.apple-bookmarks dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; margin: 0; }
body.apple-bookmarks dl dl { display: block; padding: 20px; background: var(--apple-surface-solid); border: 1px solid var(--apple-border); border-radius: var(--apple-radius-lg); box-shadow: var(--apple-shadow-sm); }
body.apple-bookmarks h3 { margin: 0 0 12px; font-size: 17px; }
body.apple-bookmarks dt { margin: 8px 0; }
body.apple-bookmarks a { display: block; padding: 8px 10px; border-radius: 10px; text-decoration: none; }
body.apple-bookmarks a:hover { background: var(--apple-blue-soft); }

@media (max-width: 860px) {
  .apple-theme-toggle { right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); }
  .hero, .paper-hero { border-radius: var(--apple-radius-lg) !important; }
  .content, .doc-wrap { padding-inline: 16px !important; }
}

@media (forced-colors: active) {
  .apple-theme-toggle, button, .btn, .card { border: 1px solid ButtonText; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .is-pointer-down, button:active, [role="button"]:active, .btn:active,
  .card:active, .chapter-card:active, .option-item:active, .shortcut:active {
    transform: none !important;
  }
}