/* StoryLoom shared design tokens. The base values in :root are the dark
   palette; the [data-theme="light"] block overrides them. menu.js applies
   data-theme on <html> and defaults new visitors to light (see THEME_KEY).
   Keep new colors here, not hardcoded in page <style> blocks, so every screen
   works in both themes automatically.

   --color-accent-text is a separate token from --color-accent: the gold accent
   used as a button/badge FILL keeps its exact hex in both themes, but that same
   hex read as foreground TEXT on a light surface falls below a readable contrast
   ratio — so text/icon usages get this deepened variant instead (identical to
   --color-accent in dark mode, darkened only in light mode). */

:root {
  --color-bg-page: #080c10;
  --color-bg-app: #0d1117;
  --color-bg-surface: #161c24;
  --color-bg-surface-hover: #1e2530;
  --color-border: #2a2820;
  --color-border-strong: #3a3428;
  --color-text-muted: #5a5448;
  --color-text-secondary: #7a7060;
  --color-text-secondary-hover: #b0a890;
  --color-text-body: #e8e0d0;
  --color-text-heading: #f0e6c8;
  --color-text-story: #d0c8b8;
  --color-accent: #c8a84b;
  --color-accent-hover: #dbb85a;
  --color-accent-dark: #8b6914;
  --color-accent-bright: #f0d070;
  --color-accent-text: #c8a84b;
  --color-on-accent: #0d1117;
  --color-header-bg: #0a0e14;
  --color-header-border: #1a1e1e;
  --color-error-bg: #1a1210;
  --color-error-border: #3a2020;
  --color-error-label: #8a4040;
  --color-error-text: #7a5050;
  --color-watermark: #4a4438;
}

:root[data-theme="light"] {
  --color-bg-page: #ece4d3;
  --color-bg-app: #faf6ee;
  --color-bg-surface: #f3ecdd;
  --color-bg-surface-hover: #e9dfc8;
  --color-border: #ddd0b0;
  --color-border-strong: #c7b78f;
  --color-text-muted: #8c7f68;
  --color-text-secondary: #6b5d47;
  --color-text-secondary-hover: #4a3f2c;
  --color-text-body: #2e2718;
  --color-text-heading: #1c1710;
  --color-text-story: #3a3020;
  --color-accent: #c8a84b;
  --color-accent-hover: #dbb85a;
  --color-accent-dark: #8b6914;
  --color-accent-bright: #f0d070;
  --color-accent-text: #8a6b1f;
  --color-on-accent: #1c1710;
  --color-header-bg: #f3ecdd;
  --color-header-border: #ddd0b0;
  --color-error-bg: #fbeceb;
  --color-error-border: #eec9c5;
  --color-error-label: #a23f3f;
  --color-error-text: #8a5050;
  --color-watermark: #b3a488;
}

/* HAMBURGER MENU (injected by menu.js, present on every page) */
.sl-hamburger-btn {
  position: fixed;
  top: 16px;
  inset-inline-start: max(16px, calc(50vw - 344px));
  z-index: 300;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-body);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.15s;
}
.sl-hamburger-btn:hover { border-color: var(--color-accent); color: var(--color-text-heading); }

.sl-appmenu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: none;
  align-items: flex-end;
  justify-content: center;
  z-index: 400;
  animation: sl-appmenu-fade 0.15s ease;
}
.sl-appmenu-overlay.open { display: flex; }
@keyframes sl-appmenu-fade { from { opacity: 0; } to { opacity: 1; } }
.sl-appmenu {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 28px;
  width: 100%;
  max-width: 480px;
  max-height: 85vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: sl-appmenu-slideup 0.2s ease;
}
@keyframes sl-appmenu-slideup { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.sl-appmenu-title { font-family: 'Lora', serif; font-size: 15px; color: var(--color-text-secondary); text-align: center; margin-bottom: 16px; }
.sl-appmenu-item {
  width: 100%;
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-body);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 15px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
  transition: all 0.15s;
}
.sl-appmenu-item:hover { border-color: var(--color-accent); background: var(--color-bg-surface-hover); }
.sl-appmenu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.sl-appmenu-item:disabled:hover { border-color: var(--color-border); background: var(--color-bg-app); }
.sl-appmenu-item i { font-size: 18px; color: var(--color-accent-text); width: 22px; text-align: center; }

/* LANGUAGE PICKER */
.sl-lang-item { justify-content: space-between; }
.sl-lang-item.selected { border-color: var(--color-accent); }
.sl-lang-names { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: start; }
.sl-lang-native { font-size: 15px; color: var(--color-text-body); }
.sl-lang-english { font-size: 12px; color: var(--color-text-muted); }

.sl-appmenu-cancel {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px;
  cursor: pointer;
  margin-top: 4px;
}
.sl-appmenu-cancel:hover { color: var(--color-text-secondary-hover); }

.sl-feedback-modal textarea {
  width: 100%;
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-body);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 12px 14px;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  margin-bottom: 14px;
}
.sl-feedback-modal textarea:focus { border-color: var(--color-accent); }
.sl-feedback-modal textarea::placeholder { color: var(--color-border-strong); }
.sl-feedback-submit {
  width: 100%;
  background: var(--color-accent);
  border: none;
  color: var(--color-on-accent);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: background 0.15s;
}
.sl-feedback-submit:hover { background: var(--color-accent-hover); }
.sl-feedback-submit:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }
.sl-feedback-confirm { text-align: center; color: var(--color-text-heading); font-family: 'Lora', serif; font-size: 15px; padding: 20px 0; display: flex; align-items: center; justify-content: center; gap: 8px; }

@media (min-width: 600px) {
  .sl-appmenu-overlay { align-items: center; }
  .sl-appmenu { border-radius: 16px; max-width: 360px; }
}

/* ACCOUNT SHEETS (injected by account.js — login, code entry, settings).
   Reuses the sl-appmenu overlay/sheet shell; everything below is the
   content inside it. Theme tokens only, logical properties for RTL. */
.sl-account-sub {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-align: center;
  margin-bottom: 16px;
  line-height: 1.5;
  overflow-wrap: anywhere; /* email addresses shouldn't overflow the sheet */
}
.sl-account-input {
  width: 100%;
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-body);
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  padding: 13px 14px;
  border-radius: 8px;
  outline: none;
  margin-bottom: 12px;
}
.sl-account-input:focus { border-color: var(--color-accent); }
.sl-account-input::placeholder { color: var(--color-border-strong); }
.sl-account-primary, .sl-account-secondary {
  width: 100%;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  padding: 14px;
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.15s;
}
.sl-account-primary {
  background: var(--color-accent);
  border: none;
  color: var(--color-on-accent);
}
.sl-account-primary:hover:not(:disabled) { background: var(--color-accent-hover); }
.sl-account-secondary {
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-body);
}
.sl-account-secondary:hover:not(:disabled) { border-color: var(--color-accent); background: var(--color-bg-surface-hover); }
.sl-account-primary:disabled, .sl-account-secondary:disabled {
  background: var(--color-border);
  color: var(--color-text-muted);
  cursor: not-allowed;
}
.sl-account-error {
  font-size: 13px;
  color: var(--color-error-label);
  text-align: center;
  margin-bottom: 12px;
}
.sl-account-notice {
  font-size: 13px;
  color: var(--color-accent-text);
  text-align: center;
  margin-bottom: 14px;
  padding: 10px 12px;
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-accent);
  border-radius: 8px;
}
.sl-account-code-row {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 14px;
}
.sl-account-code-box {
  width: 44px;
  height: 52px;
  text-align: center;
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 500;
  background: var(--color-bg-app);
  border: 0.5px solid var(--color-border);
  color: var(--color-text-heading);
  border-radius: 8px;
  outline: none;
}
.sl-account-code-box:focus { border-color: var(--color-accent); }
.sl-account-resend {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-accent-text);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 10px;
  cursor: pointer;
}
.sl-account-resend:disabled { color: var(--color-text-muted); cursor: default; }
.sl-account-sent {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--color-text-body);
  font-size: 14px;
  line-height: 1.5;
  padding: 12px 0 20px;
}
.sl-account-sent i { font-size: 24px; color: var(--color-accent-text); flex-shrink: 0; }
.sl-account-rows { margin-bottom: 14px; }
.sl-account-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 2px;
  border-bottom: 0.5px solid var(--color-border);
}
.sl-account-row-label { font-size: 13px; color: var(--color-text-secondary); flex-shrink: 0; }
.sl-account-row-value { font-size: 14px; color: var(--color-text-body); overflow-wrap: anywhere; text-align: end; }
.sl-account-tier {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-accent-text);
  border: 1px solid var(--color-accent-text);
  border-radius: 999px;
  padding: 3px 12px;
}
.sl-account-name {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--color-border-strong);
  color: var(--color-text-body);
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  padding: 4px 2px;
  text-align: end;
  outline: none;
}
.sl-account-name:focus { border-bottom-color: var(--color-accent); }
.sl-account-name::placeholder { color: var(--color-text-muted); }
.sl-account-danger {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--color-error-label);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  padding: 10px;
  cursor: pointer;
}
.sl-account-danger:hover { text-decoration: underline; }
.sl-account-danger-solid {
  background: var(--color-error-bg);
  border: 0.5px solid var(--color-error-border);
  border-radius: 8px;
  font-size: 15px;
  padding: 14px;
  text-decoration: none !important;
}
.sl-account-danger-solid:disabled { opacity: 0.5; cursor: not-allowed; }
.sl-account-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-text-muted);
  font-size: 12px;
  margin: 4px 0 12px;
}
.sl-account-divider::before, .sl-account-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--color-border);
}
.sl-account-google {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 44px;
}
.sl-account-apple {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 44px;
}
.sl-account-apple #appleid-signin {
  width: 300px;
  max-width: 100%;
  height: 44px;
  cursor: pointer;
}

/* SEGMENT AUDIO PLAYER (shared by index.html + share.html via player.js).
   All colors are theme tokens, so it works in light and dark automatically.
   Logical properties (inline-start/end) keep it correct under RTL. */
.sl-ap {
  background: var(--color-bg-surface);
  border: 0.5px solid var(--color-border);
  border-inline-start: 3px solid var(--color-accent);
  border-radius: 10px;
  padding: 14px 18px;
  width: 100%;
  max-width: 580px;
  margin-bottom: 2.5rem;
  font-family: 'Inter', sans-serif;
}
.sl-ap-controls { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.sl-ap-spacer { flex: 1; }

.sl-ap-skip {
  position: relative;
  width: 38px; height: 38px; padding: 0;
  border-radius: 50%;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.15s;
  touch-action: none; /* pointer hold-to-repeat shouldn't scroll the page */
}
.sl-ap-skip:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-text-heading); }
.sl-ap-skip i { font-size: 17px; }
.sl-ap-skip-n { position: absolute; font-size: 9px; font-weight: 600; line-height: 1; }
.sl-ap-skip:disabled { opacity: 0.35; cursor: not-allowed; }

.sl-ap-play {
  width: 42px; height: 42px; padding: 0;
  border-radius: 50%;
  background: var(--color-accent);
  border: none;
  color: var(--color-on-accent);
  cursor: pointer;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 19px;
  transition: background 0.15s;
}
.sl-ap-play:hover:not(:disabled) { background: var(--color-accent-hover); }
.sl-ap-play:disabled { background: var(--color-border); color: var(--color-text-muted); cursor: not-allowed; }

.sl-ap-time {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  min-width: 92px;
  text-align: end;
  display: flex; align-items: center; justify-content: flex-end; gap: 5px;
}
.sl-ap-time-rem { color: var(--color-text-muted); }
.sl-ap-time-spin { font-size: 13px; }

.sl-ap-speed {
  width: 58px; height: 28px;
  font-size: 12px;
  padding: 0 4px;
  background: var(--color-bg-app);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
  font-family: 'Inter', sans-serif;
}

.sl-ap-track { position: relative; height: 18px; margin-bottom: 4px; }
.sl-ap-buffered, .sl-ap-played {
  position: absolute; top: 7px; inset-inline-start: 0;
  height: 4px; border-radius: 2px; width: 0%;
  pointer-events: none;
}
.sl-ap-buffered { background: var(--color-border-strong); }
.sl-ap-played { background: var(--color-accent); z-index: 1; }
.sl-ap-scrub {
  position: absolute; top: 0; inset-inline-start: 0;
  width: 100%; height: 18px; margin: 0;
  -webkit-appearance: none; appearance: none;
  background: transparent;
  z-index: 2;
  cursor: pointer;
}
.sl-ap-scrub:disabled { cursor: default; }
.sl-ap-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-accent); border: none; cursor: pointer;
}
.sl-ap-scrub::-moz-range-thumb {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--color-accent); border: none; cursor: pointer;
}
.sl-ap-scrub:disabled::-webkit-slider-thumb { opacity: 0; }
.sl-ap-scrub:disabled::-moz-range-thumb { opacity: 0; }
.sl-ap-scrub::-webkit-slider-runnable-track { background: transparent; }
.sl-ap-scrub::-moz-range-track { background: transparent; }

.sl-ap-buffer-note { font-size: 11px; color: var(--color-text-muted); margin: 0 0 8px; min-height: 13px; }

.sl-ap-footer { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.sl-ap-status { font-size: 12px; color: var(--color-text-muted); font-style: italic; }
.sl-ap-footer-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.sl-ap-mute {
  width: 30px; height: 30px; border-radius: 50%;
  background: none; border: 0.5px solid var(--color-border);
  color: var(--color-text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all 0.15s;
}
.sl-ap-mute:hover { border-color: var(--color-accent); color: var(--color-text-heading); }
.sl-ap-choices {
  font-size: 12px; padding: 5px 10px;
  background: transparent;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-secondary);
  border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; gap: 4px;
  transition: all 0.15s;
}
.sl-ap-choices:hover:not(:disabled) { border-color: var(--color-accent); color: var(--color-text-heading); }
.sl-ap-choices:disabled { opacity: 0.35; cursor: not-allowed; }
.sl-ap-choices i { font-size: 14px; }

.sl-ap-spin { animation: spin 1s linear infinite; }

/* --- Paginated reader ---------------------------------------------------- */
/* The frame is a fixed height set in JS from what is actually left on screen,
   because the chrome above it differs between the first chapter and the rest.
   Everything inside is laid out against that height so a page turn never
   changes how much text fits. */
.sl-reader { display: flex; flex-direction: column; position: relative; width: 100%; }

.sl-reader-top { display: flex; justify-content: space-between; align-items: center; min-height: 2rem; gap: .5rem; }
.sl-reader-jump {
  display: inline-flex; align-items: center; gap: .25rem;
  background: none; border: 0; padding: .25rem .35rem; cursor: pointer;
  font: inherit; font-size: .78rem; letter-spacing: .02em;
  color: var(--color-text-muted, #8a8a94); opacity: .85;
}
.sl-reader-jump:hover { opacity: 1; color: var(--color-accent); }
.sl-reader-jump[hidden] { display: none; }
.sl-reader-jump-left { margin-right: auto; }
.sl-reader-jump-right { margin-left: auto; }

.sl-reader-audio[hidden], .sl-reader-audio-toggle[hidden] { display: none; }
.sl-reader-audio-toggle {
  align-self: flex-end; display: inline-flex; align-items: center; gap: .3rem;
  background: none; border: 0; cursor: pointer; font: inherit; font-size: .78rem;
  color: var(--color-text-muted, #8a8a94); padding: .2rem .35rem;
}
.sl-reader-audio-toggle:hover { color: var(--color-accent); }

/* The pages themselves. overflow:hidden is what makes a column a page. */
.sl-reader-pages { flex: 1 1 auto; min-height: 0; position: relative; }
.sl-reader-pages[hidden] { display: none; }
.sl-pager-viewport { position: relative; overflow: hidden; width: 100%; height: 100%; }
.sl-pager-content {
  height: 100%;
  column-fill: auto;              /* fill each column before starting the next */
  transition: transform .22s ease;
  will-change: transform;
}
/* Headings must not be stranded at the foot of a column with their text on the
   next page. */
.sl-pager-content .sl-meta-card,
.sl-pager-content .sl-segment-label { break-inside: avoid; break-after: avoid; }

.sl-reader-action { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; justify-content: center; }
.sl-reader-action[hidden] { display: none; }

.sl-reader-nav { display: flex; align-items: center; justify-content: space-between; min-height: 2.25rem; gap: .5rem; }
.sl-reader-page {
  background: none; border: 0; cursor: pointer; padding: .35rem .6rem;
  font-size: 1.2rem; line-height: 1; color: var(--color-text-muted, #8a8a94);
}
.sl-reader-page:hover { color: var(--color-accent); }
.sl-reader-page[hidden] { visibility: hidden; display: inline-block; } /* keep the counter centred */
.sl-reader-count { font-size: .75rem; color: var(--color-text-muted, #8a8a94); opacity: .7; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
  .sl-reader-jump span { display: none; }   /* icons only where width is scarce */
}
