/**
 * Typing Warriors Library — shared custom styles.
 * Tailwind utility classes handle almost everything; this file only holds
 * the handful of things Tailwind can't express (scrollbar hiding, text
 * selection color, a couple of component states used on more than one page).
 */

/* Hide scrollbars on horizontally-scrolling rows (dashboard file lists, etc.) */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Custom text selection color, on-brand instead of the OS default */
::selection {
  background: #c7d2fe;
  color: #1e1b4b;
}

/* library.html — drag/drop upload zone hover state */
.upload-zone:hover {
  border-color: #6366f1;
  background-color: #eef2ff;
}

/* app.html — inline text highlight + AI "simplify" callout block */
.highlight {
  background-color: #fef08a;
  padding: 0.125rem 0.25rem;
  border-radius: 0.25rem;
}
.ai-simplification-block {
  border-left: 4px solid #6366f1;
  background: #eef2ff;
  padding: 1rem;
  margin: 1.5rem 0;
  border-radius: 0 0.5rem 0.5rem 0;
}

/* app.html — reader body copy: justified paragraphs, and real styling for
   pasted <table> content so admin-authored tables (Book -> Topic ->
   Subtopic paste editor) actually look like tables instead of cramped,
   borderless rows. */
#editableDocument p {
  text-align: justify;
}
#editableDocument table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.25rem 0;
  font-size: 0.9rem;
}
#editableDocument th,
#editableDocument td {
  border: 1px solid #e2e8f0;
  padding: 0.5rem 0.75rem;
  text-align: left;
  vertical-align: top;
}
#editableDocument th {
  background-color: #f8fafc;
  font-weight: 700;
  color: #334155;
}
#editableDocument tr:nth-child(even) td {
  background-color: #fafafa;
}
.reader-dark #editableDocument th,
.reader-dark #editableDocument td {
  border-color: #334155 !important;
}
.reader-dark #editableDocument th {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}
.reader-dark #editableDocument tr:nth-child(even) td {
  background-color: #111827 !important;
}

/* app.html — reader dark mode. Scoped to .reader-dark rather than Tailwind's
   dark: variant, because the chapter body is HTML generated server-side
   (worker/src/lib/ingest.js) and injected as a raw string — touching every
   possible content class with a dark: twin isn't practical, so this
   overrides colors with higher specificity instead. */
.reader-dark {
  background-color: #0b1120 !important;
}
.reader-dark #editableDocument {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
  color: #e2e8f0 !important;
}
.reader-dark #editableDocument h1,
.reader-dark #editableDocument h2,
.reader-dark #editableDocument h3,
.reader-dark #editableDocument strong {
  color: #f8fafc !important;
}
.reader-dark #editableDocument p,
.reader-dark #editableDocument li,
.reader-dark #editableDocument span {
  color: #cbd5e1 !important;
}
.reader-dark #editableDocument [contenteditable="false"] {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
.reader-dark #editableDocument mark[data-annotated="highlight"] {
  filter: brightness(0.75);
}
.reader-dark #editableDocument mark[data-annotated="note"] {
  filter: brightness(0.8) saturate(1.3);
}

/* app.html — reader font-size scaling. `zoom` has broad modern support
   (Chrome/Edge/Safari always, Firefox 126+); documented here rather than
   silently assumed, since it's the one pragmatic cross-browser way to scale
   Tailwind's fixed rem-based type sizes without rewriting every generated
   content class. */
.reader-scale-90  { zoom: 0.9; }
.reader-scale-100 { zoom: 1; }
.reader-scale-112 { zoom: 1.12; }
.reader-scale-125 { zoom: 1.25; }

/* app.html — the reader page itself, styled to actually look like a sheet
   of A4 paper (210mm : 297mm) rather than an arbitrary card. aspect-ratio
   keeps that proportion at any width; overflow-y is a safety net (not the
   intended path) for the rare page whose content — a big table or image —
   runs longer than the fixed height word-count-based pagination aimed for. */
.a4-page {
  width: 100%;
  max-width: 800px;
  aspect-ratio: 210 / 297;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06), 0 12px 28px -12px rgba(15, 23, 42, 0.18);
  padding: 3rem 3.25rem;
  overflow-y: auto;
}
.reader-dark .a4-page {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}
/* Below ~640px an A4-proportioned box gets awkwardly tall relative to the
   viewport, so phones get a comfortable min-height instead of the fixed
   ratio — the page still reads as "a page", just not a literal A4 shape. */
@media (max-width: 640px) {
  .a4-page {
    aspect-ratio: auto;
    min-height: 70vh;
    padding: 1.5rem 1.25rem;
  }
}

/* app.html — book-style section headings inside a chapter. A topic heading
   is a proper (if modest) chapter title; a subtopic heading is deliberately
   smaller and lighter so the hierarchy reads at a glance, but both sit above
   an underline like a printed textbook's running heads — not the old
   landing-page-sized hero text. */
#editableDocument h1.reader-topic-heading {
  font-size: 1.5rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 1.25rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid #cbd5e1;
  line-height: 1.3;
}
#editableDocument h2.reader-subtopic-heading {
  font-size: 1.125rem;
  font-weight: 700;
  color: #1e293b;
  margin: 1.75rem 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  line-height: 1.3;
}
.reader-dark #editableDocument h1.reader-topic-heading {
  border-bottom-color: #334155 !important;
}
.reader-dark #editableDocument h2.reader-subtopic-heading {
  border-bottom-color: #1e293b !important;
}

/* app.html — end-of-section "take the quiz" prompt, auto-generated when the
   admin publishes that topic/subtopic (see lib/quiz.js). */
.reader-quiz-cta {
  margin: 1.75rem 0;
  text-align: center;
}
.reader-quiz-cta button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1.25rem;
  background: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
  border-radius: 9999px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease;
}
.reader-quiz-cta button:hover {
  background: #e0e7ff;
}
.reader-quiz-cta.reader-quiz-generating {
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
}
.reader-dark .reader-quiz-cta button {
  background: #1e1b4b !important;
  color: #c7d2fe !important;
  border-color: #312e81 !important;
}

/* settings.html — settings tab active/inactive states */
.tab-active {
  background-color: #eef2ff;
  color: #4f46e5;
  border-color: #6366f1;
}

/* app.html — reader page turns. Every page of a chapter is pre-rendered in
   the DOM and normally just flips its `hidden` class (an instant cut, no
   transition possible on display:none). updateReaderPageDisplay() instead
   adds/removes `.reader-page-fade` a beat before/after the swap so the old
   page fades out, the new one fades in, and the turn reads as one smooth
   motion instead of a hard jump-cut. */
.reader-page {
  opacity: 1;
  transition: opacity 140ms ease;
}
.reader-page.reader-page-fade {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .reader-page {
    transition: none;
  }
}
.tab-inactive {
  color: #64748b;
  border-color: transparent;
}
.tab-inactive:hover {
  background-color: #f8fafc;
  color: #0f172a;
}


/* Quiz in Hindi (reader quiz window) */
.quiz-hi { font-family: 'Noto Sans Devanagari', 'Inter', sans-serif; line-height: 1.75; }


/* ------------------------------------------------------------------
   Reader header (app.html) — two fixed rows that can never overlap.
   Row 1: Book > Sub-book > Topic trail + page actions.
   Row 2: reading toolbar. On narrow screens the toolbar scrolls sideways
   instead of colliding with anything.
   ------------------------------------------------------------------ */
.reader-row1 { height: 3.5rem; }
.reader-trail {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}
.reader-crumb {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  max-width: 14rem;
  padding: 0.2rem 0.55rem;
  border-radius: 0.5rem;
  line-height: 1.15;
  transition: background-color 0.15s ease;
}
a.reader-crumb:hover { background: #eef2ff; }
.reader-crumb-label {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #94a3b8;
  white-space: nowrap;
}
.reader-crumb-label i { margin-right: 0.2rem; font-size: 0.55rem; }
.reader-crumb-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reader-crumb.is-current { flex: 1 1 auto; max-width: none; }
.reader-crumb.is-current .reader-crumb-name { color: #0f172a; font-weight: 800; }
.reader-crumb.is-current .reader-crumb-label { color: #6366f1; }
.reader-crumb-sep { font-size: 0.55rem; color: #cbd5e1; flex-shrink: 0; }
/* Phones: keep only the topic (and the book if there is room) so the row stays one line. */
@media (max-width: 639px) {
  .reader-crumb-mid, #readerTrail > a#breadcrumbSubject, #readerTrail > .reader-crumb-sep { display: none; }
}
@media (min-width: 640px) and (max-width: 1023px) {
  .reader-crumb-mid { display: none; }
}

.reader-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  height: 2.9rem;
  padding: 0 0.75rem;
  background: #f8fafc;
  border-top: 1px solid #eef2f7;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
}
@media (min-width: 640px) { .reader-toolbar { padding: 0 1.25rem; } }
.reader-toolbar::-webkit-scrollbar { display: none; }
.tb-group {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  height: 2.1rem;
  padding: 0 3px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 0.6rem;
}
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  height: 1.7rem;
  min-width: 1.85rem;
  padding: 0 0.35rem;
  border-radius: 0.45rem;
  font-size: 0.82rem;
  color: #475569;
  white-space: nowrap;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.tb-btn:hover { background: #eef2ff; color: #3730a3; }
.tb-btn-text { padding: 0 0.6rem; font-size: 0.75rem; font-weight: 700; }
.tb-label { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; color: #ca8a04; font-size: 0.82rem; }
.tb-sep { width: 1px; height: 1.1rem; background: #e2e8f0; margin: 0 2px; flex-shrink: 0; }
.tb-swatch {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 9999px;
  background: var(--sw, #facc15);
  border: 2px solid #fff;
  box-shadow: 0 0 0 1px #cbd5e1;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.tb-swatch:hover { transform: scale(1.18); box-shadow: 0 0 0 2px var(--sw, #facc15); }

/* Dark reader: the header stays light (it is app chrome), nothing to override. */
@media (prefers-reduced-motion: reduce) {
  .tb-swatch, .tb-btn, a.reader-crumb { transition: none; }
}

/* Maps and pictures inside lessons */
.reader-page img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0.75rem auto 0.25rem;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  background: #fff;
}
.reader-page p:has(> img) + p > i:only-child {
  display: block;
  text-align: center;
  font-size: 0.85em;
  color: #64748b;
}