/* Reading preferences: background tint and reading font, matching the
   Background and Text menus students get in the OctoDecks app.
   Tint colours mirror the app's BG_THEMES (student.html / author.html):
   --bg = sl-bg, --bg-alt = sl-surface2, --bg-card = sl-surface,
   --border = sl-border, --text = sl-text, --text-2 = sl-muted, --text-3 = sl-subtle.
   Loaded on every page; reading-prefs.js sets data-bg / data-font on <html>. */

/* Brand blue is darkened a step on every tint so links and labels keep
   4.5:1 contrast on the tinted surfaces (#086bb5 drops to 4.3:1 on Blue/Peach). */
html[data-bg] { --brand: #06599a; --brand-2: #054a80; }

html[data-bg="pastel-blue"] {
  --bg: #e3eef9; --bg-alt: #d6e5f4; --bg-card: #f7fbff; --border: #b4cde6;
  --text: #03090f; --text-2: #2a4057; --text-3: #445a70; --nav-bg: rgba(227,238,249,0.92);
}
html[data-bg="pastel-green"] {
  --bg: #e3f3e8; --bg-alt: #d3eadb; --bg-card: #f7fcf9; --border: #a9d3b6;
  --text: #040e09; --text-2: #284632; --text-3: #41614b; --nav-bg: rgba(227,243,232,0.92);
}
html[data-bg="yellow"] {
  --bg: #fcf5d2; --bg-alt: #f4e9b8; --bg-card: #fffdf2; --border: #e2cf7e;
  --text: #171203; --text-2: #504113; --text-3: #6c5b2a; --nav-bg: rgba(252,245,210,0.92);
}
html[data-bg="cream"] {
  --bg: #fbf7ec; --bg-alt: #f2ebd9; --bg-card: #fffdf8; --border: #ddd1b3;
  --text: #18150e; --text-2: #4c4431; --text-3: #675e46; --nav-bg: rgba(251,247,236,0.92);
}
html[data-bg="peach"] {
  --bg: #fdeadf; --bg-alt: #f8dccb; --bg-card: #fff8f3; --border: #ebbb9f;
  --text: #100804; --text-2: #5b3624; --text-3: #76503c; --nav-bg: rgba(253,234,223,0.92);
}

/* Reading font. The menu's own samples keep their face so each option
   shows what it looks like. */
html[data-font="lexend"] body,
html[data-font="lexend"] body *:not(.odp-sample) { font-family: 'Lexend', sans-serif !important; }
html[data-font="dyslexic"] body,
html[data-font="dyslexic"] body *:not(.odp-sample) { font-family: 'OpenDyslexic', sans-serif !important; }
html[data-font="dyslexic"] body { line-height: 1.75; }

/* ── Display menu in the nav ── */
.odp { position: relative; display: flex; }
.odp-btn {
  background: none; border: none; border-radius: 8px;
  height: 32px; padding: 0 0.45rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--text-3); font: inherit; font-size: 0.85rem; font-weight: 700;
  transition: color 0.2s, background 0.2s;
}
.odp-btn:hover, .odp-btn[aria-expanded="true"] { color: var(--text); background: var(--bg-alt); }
.odp-btn:focus-visible { outline: 3px solid #e0a542; outline-offset: 2px; }
.odp-aa { font-size: 0.95rem; letter-spacing: -0.02em; }
.odp-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; }

.odp-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000;
  width: 236px; max-height: calc(100vh - 80px); overflow-y: auto;
  padding: 6px; border-radius: 12px;
  background: var(--bg-card); border: 1px solid var(--border);
  box-shadow: 0 12px 32px rgba(0,0,0,0.16);
  color: var(--text); text-align: left;
}
.odp-menu[hidden] { display: none; }
.odp-head { padding: 8px 10px 4px; font-size: 0.75rem; font-weight: 800; color: var(--text-3); }
.odp-sep { height: 1px; margin: 6px 4px; background: var(--border); }
.odp-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px; border: none; border-radius: 8px; background: none;
  font: inherit; font-size: 0.9rem; font-weight: 600; color: var(--text);
  text-align: left; cursor: pointer;
}
.odp-item:hover, .odp-item:focus-visible { background: var(--brand-glow); outline: none; }
.odp-item:focus-visible { box-shadow: inset 0 0 0 2px var(--brand); }
.odp-item small { font-weight: 500; color: var(--text-2); }
.odp-check { width: 14px; flex-shrink: 0; color: var(--brand); visibility: hidden; }
.odp-item[aria-checked="true"] .odp-check { visibility: visible; }
.odp-item[aria-checked="true"] { color: var(--brand); }
.odp-swatch { width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; border: 1px solid rgba(0,0,0,0.18); }
[data-theme="dark"] .odp-swatch { border-color: rgba(255,255,255,0.25); }

/* Narrow screens: hang the menu from the right edge of the (fixed) nav bar
   rather than the button, so it never runs off the left of the screen. */
@media (max-width: 600px) {
  .odp { position: static; }
  .odp-menu { top: calc(100% + 4px); right: 16px; max-height: calc(100vh - 90px); }
}
@media (max-width: 420px) {
  .odp-label { display: none; }
  .odp-btn { padding: 0 0.35rem; }
}
@media (prefers-reduced-motion: reduce) { .odp-btn { transition: none; } }