/* ==========================================================
   styles.css — Shared stylesheet for all pages
   ==========================================================
   Design direction: clean, minimal, warm parchment palette.
   Uses CSS custom properties for easy theming later.
   Typography uses system fonts that include Thai glyph coverage
   (Tahoma has good Thai support on Windows; Noto Sans Thai on
   Linux). No external font loads — must work offline via file://.
   ========================================================== */

/* ----------------------------------------------------------
   CSS CUSTOM PROPERTIES (THEME)
   ----------------------------------------------------------
   Centralised here so a future theme system can swap them.
   Palette is intentionally restrained: warm off-whites, deep
   charcoal text, teal accent for positive, coral for negative.
   ---------------------------------------------------------- */
:root {
  /* Layout */
  --max-width: 640px;
  --gutter: 1.25rem;

  /* Colours */
  --bg:            #f6f4f0;
  --bg-card:       #ffffff;
  --bg-hover:      #edeae4;
  --text:          #2c2c2c;
  --text-muted:    #6b6560;
  --border:        #d6d1c9;
  --accent:        #2a7a6e;
  --accent-light:  #d0ebe6;
  --correct:       #1a7a4a;
  --correct-bg:    #d4edda;
  --incorrect:     #b5362a;
  --incorrect-bg:  #f8d7da;
  --focus-ring:    #2a7a6e;
  --shadow:        0 1px 3px rgba(0, 0, 0, 0.08);

  /* Typography — system stacks with Thai coverage */
  --font-body: "Segoe UI", "Helvetica Neue", "Noto Sans Thai", "Tahoma", sans-serif;
  --font-thai: "Noto Sans Thai", "Tahoma", "Segoe UI", sans-serif;
  --font-mono: "Consolas", "Liberation Mono", monospace;
}


/* ----------------------------------------------------------
   RESET & BASE
   ---------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}


/* ----------------------------------------------------------
   APP SHELL
   ----------------------------------------------------------
   Centred column, max-width constrained. Header sits above
   the main content area. Used by all three HTML pages.
   ---------------------------------------------------------- */
.app-header {
  width: 100%;
  max-width: var(--max-width);
  padding: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 3.5rem;
}

.app-header__title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.02em;
  text-decoration: none;
}

/* Make the title a clickable link back to index on sub-pages */
a.app-header__title:hover {
  text-decoration: underline;
}

.app-main {
  width: 100%;
  max-width: var(--max-width);
  padding: 0 var(--gutter) var(--gutter);
  flex: 1;
}

/* Update banner — shown when new content is available */
.update-banner {
  width: 100%;
  max-width: var(--max-width);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem var(--gutter);
  background: rgba(33, 150, 243, 0.1);
  border-bottom: 1px solid rgba(33, 150, 243, 0.25);
  font-size: 0.85rem;
  color: var(--text);
  animation: updateBannerSlide 0.3s ease-out;
}
@keyframes updateBannerSlide {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.update-banner__btn {
  flex-shrink: 0;
}
.update-banner__dismiss {
  margin-left: auto;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 0.25rem;
  line-height: 1;
}
.update-banner__dismiss:hover {
  color: var(--text);
}


/* ----------------------------------------------------------
   VIEW SECTIONS (index.html only)
   ----------------------------------------------------------
   Each view is a <section class="view"> shown/hidden by the
   router via the .view--active class.
   ---------------------------------------------------------- */
.view {
  display: none;
}
.view--active {
  display: block;
}


/* ----------------------------------------------------------
   BUTTONS
   ---------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.6rem 1.25rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-decoration: none;
  line-height: 1.4;
}

.btn:hover,
.btn:focus-visible {
  background: var(--bg-hover);
  border-color: var(--accent);
}

.btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: #236b60;
}

.btn--danger {
  color: var(--incorrect);
  border-color: var(--incorrect);
}

.btn--danger:hover {
  background: var(--incorrect-bg);
}

.btn--wide {
  width: 100%;
  text-align: center;
}

.btn--small {
  padding: 0.35rem 0.75rem;
  font-size: 0.85rem;
}


/* ----------------------------------------------------------
   CARDS / PANELS
   ---------------------------------------------------------- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1.25rem;
  box-shadow: var(--shadow);
  margin-bottom: 1rem;
}


/* ----------------------------------------------------------
   MENU LIST
   ---------------------------------------------------------- */
.menu-list {
  list-style: none;
}

.menu-list li + li {
  margin-top: 0.5rem;
}

.menu-list .btn {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
}


/* ----------------------------------------------------------
   PROGRESS BAR (activity screens)
   ---------------------------------------------------------- */
.progress-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-bar__track {
  flex: 1;
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.progress-bar__fill {
  height: 100%;
  background: var(--accent);
  border-radius: 3px;
  transition: width 0.3s ease;
}


/* ----------------------------------------------------------
   THAI TEXT
   ---------------------------------------------------------- */
.thai {
  font-family: var(--font-thai);
  font-size: 1.6rem;
  line-height: 1.8;
  letter-spacing: 0.01em;
}

.thai--large {
  font-size: 2.2rem;
}


/* ----------------------------------------------------------
   WORD DISPLAY (language-agnostic)
   ----------------------------------------------------------
   Used in activity views where the displayed word could be
   from any language.  JS sets data-lang attribute for styling.
   ---------------------------------------------------------- */
.word-display {
  font-size: 1.6rem;
  line-height: 1.8;
}
.word-display--large {
  font-size: 2.2rem;
  line-height: 1.5;
}
.word-display[data-lang="thai"] {
  font-family: var(--font-thai);
  letter-spacing: 0.01em;
}
.word-display[data-lang="latin"] {
  font-style: italic;
}


.romanization {
  font-size: 0.95rem;
  color: var(--text-muted);
  font-style: italic;
}

.meaning {
  font-size: 1.05rem;
  margin-top: 0.25rem;
}


/* ----------------------------------------------------------
   FEEDBACK FLASH
   ---------------------------------------------------------- */
.feedback {
  padding: 0.6rem 1rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.95rem;
  margin: 0.75rem 0;
  text-align: center;
}

.feedback--correct {
  background: var(--correct-bg);
  color: var(--correct);
}

.feedback--incorrect {
  background: var(--incorrect-bg);
  color: var(--incorrect);
}


/* ----------------------------------------------------------
   OPTION GRID (Activity 2 — 6 cloze choices)
   ---------------------------------------------------------- */
.option-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin: 1rem 0;
}

.option-btn {
  padding: 0.7rem 0.75rem;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg-card);
  font-family: var(--font-thai);
  font-size: 1.15rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  line-height: 1.5;
}

.option-btn:hover,
.option-btn:focus-visible {
  border-color: var(--accent);
  background: var(--bg-hover);
}

.option-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.option-btn--correct {
  border-color: var(--correct);
  background: var(--correct-bg);
}

.option-btn--incorrect {
  border-color: var(--incorrect);
  background: var(--incorrect-bg);
}

.option-btn--disabled {
  pointer-events: none;
  opacity: 0.8;
}


/* ----------------------------------------------------------
   KEY HINT BADGES (show keyboard shortcut on buttons)
   ---------------------------------------------------------- */
.key-hint {
  display: inline-block;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0 0.3rem;
  font-size: 0.75rem;
  font-family: var(--font-mono);
  margin-left: 0.4rem;
  color: var(--text-muted);
  vertical-align: middle;
}


/* ----------------------------------------------------------
   REVEAL AREA (Activity 1 — hidden meaning)
   ---------------------------------------------------------- */
.reveal-area {
  min-height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  margin: 0.75rem 0;
  border: 1px dashed var(--border);
  border-radius: 6px;
  text-align: center;
}

.reveal-area--hidden .reveal-content {
  visibility: hidden;
  height: 0;
  overflow: hidden;
}

.reveal-area--shown {
  border-style: solid;
  background: var(--bg-card);
}


/* ----------------------------------------------------------
   ACTION ROW (two side-by-side buttons)
   ---------------------------------------------------------- */
.action-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.action-row .btn {
  flex: 1;
}


/* ----------------------------------------------------------
   HEADINGS
   ---------------------------------------------------------- */
.view-title {
  font-size: 1.3rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--text);
}

.view-subtitle {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}


/* ----------------------------------------------------------
   HAMBURGER / DROPDOWN MENU (index.html top-right)
   ---------------------------------------------------------- */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.hamburger-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

.hamburger-btn span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
  border-radius: 1px;
}

.header-right {
  position: relative;
}

.dropdown-menu {
  position: absolute;
  top: 3rem;
  right: 0;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 100;
  min-width: 180px;
  display: none;
}

.dropdown-menu--open {
  display: block;
}

.dropdown-menu a,
.dropdown-menu button {
  display: block;
  width: 100%;
  padding: 0.6rem 1rem;
  border: none;
  background: none;
  text-align: left;
  font-family: var(--font-body);
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text);
  text-decoration: none;
}

.dropdown-menu a:hover,
.dropdown-menu a:focus-visible,
.dropdown-menu button:hover,
.dropdown-menu button:focus-visible {
  background: var(--bg-hover);
}

.dropdown-menu a + a,
.dropdown-menu a + button,
.dropdown-menu button + a,
.dropdown-menu button + button {
  border-top: 1px solid var(--border);
}


/* ----------------------------------------------------------
   DEBUG OVERLAY
   ---------------------------------------------------------- */
.debug-info {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-muted);
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 4px;
  padding: 0.4rem 0.6rem;
  margin-top: 0.5rem;
}


/* ----------------------------------------------------------
   PROFILE STATS
   ---------------------------------------------------------- */
.stat-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}

.stat-row:last-child {
  border-bottom: none;
}

.stat-label {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.stat-value {
  font-weight: 600;
  font-size: 0.95rem;
}

.weak-words-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  margin-top: 0.5rem;
}

.weak-words-table th {
  text-align: left;
  padding: 0.4rem 0.5rem;
  border-bottom: 2px solid var(--border);
  font-weight: 600;
  color: var(--text-muted);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.weak-words-table td {
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--border);
}


/* ----------------------------------------------------------
   SESSION SUMMARY
   ---------------------------------------------------------- */
.summary-stat {
  text-align: center;
  padding: 1rem;
}

.summary-stat__number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--accent);
}

.summary-stat__label {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}

.summary-row {
  display: flex;
  gap: 1rem;
}

.summary-row .summary-stat {
  flex: 1;
}


/* ----------------------------------------------------------
   HELP PAGE
   ---------------------------------------------------------- */
.help-section {
  margin-bottom: 1.25rem;
}

.help-section h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.4rem;
}

.help-section p {
  font-size: 0.9rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.help-section kbd {
  display: inline-block;
  padding: 0.1rem 0.4rem;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  border-radius: 3px;
}


/* ----------------------------------------------------------
   UTILITIES
   ---------------------------------------------------------- */
.text-center { text-align: center; }
.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.hidden { display: none !important; }


/* ==========================================================
   CHAPTER STYLES (added for chapter integration)
   ========================================================== */

/* -- Chapter list cards -- */
.chapter-card {
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.chapter-card:hover,
.chapter-card:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.chapter-card:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.chapter-card__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}
.chapter-card__desc {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.chapter-card__level {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  font-weight: 600;
}

/* -- Chapter sections -- */
.chapter-section {
  margin-bottom: 1.25rem;
}
.chapter-section__title {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.chapter-section__badge {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: var(--accent-light);
  color: var(--accent);
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  font-weight: 600;
}

/* -- Section content blocks -- */
.chapter-para {
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
.chapter-para__translation {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
}

.chapter-example {
  margin: 0.75rem 0;
  padding: 0.75rem 1rem;
  border-left: 3px solid var(--accent);
  background: var(--bg-hover);
  border-radius: 0 4px 4px 0;
}
.chapter-example__en {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.chapter-example__note {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.35rem;
}

.chapter-dialogue-line {
  margin: 0.5rem 0;
  padding: 0.4rem 0;
}
.chapter-dialogue-line__speaker {
  font-weight: 600;
  color: var(--accent);
  font-size: 0.85rem;
}
.chapter-dialogue-line__en {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-left: 1rem;
  margin-top: 0.15rem;
}

.chapter-note {
  background: #fef9e7;
  border: 1px solid #f0e6b8;
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  color: var(--text);
  margin: 0.75rem 0;
  line-height: 1.6;
}

.chapter-heading {
  font-size: 1rem;
  font-weight: 600;
  margin: 1rem 0 0.5rem;
}

.chapter-table-wrap {
  margin: 0.75rem 0;
  overflow-x: auto;
}
.chapter-table-title {
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.35rem;
  color: var(--text-muted);
}

/* -- Passage display -- */
.chapter-passage {
  background: #f9f7f3;
  border: 1px solid var(--border);
}
.chapter-glosses {
  margin-top: 0.75rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
}
.chapter-gloss {
  font-size: 0.8rem;
  color: var(--text-muted);
}

/* -- Latin text (parallels .thai for consistent sizing) -- */
.latin-text {
  font-size: 1.3rem;
  line-height: 1.7;
  font-style: italic;
}

/* -- Exercise styles -- */
.exercise-layer-badge {
  font-size: 0.8rem;
  color: var(--accent);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.75rem;
}
.exercise-prompt {
  font-size: 1rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.exercise-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.75rem 0;
}
.exercise-option {
  text-align: left;
  font-size: 1rem;
  padding: 0.75rem 1rem;
}

/* -- Back button row -- */
.back-row {
  margin-top: 1.5rem;
  margin-bottom: 1rem;
}


/* ==========================================================
   DIAGNOSTIC TRANSLATION EXERCISE
   ========================================================== */

/* Prompt area */
.translate-prompt {
  margin-bottom: 1.25rem;
}
.translate-instruction {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.translate-source {
  font-size: 1.15rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  background: var(--bg-card);
  border-radius: 8px;
  border-left: 3px solid var(--accent);
}

/* Hint */
.translate-hint-btn {
  margin-top: 0.5rem;
  font-size: 0.8rem;
}
.translate-hint-text {
  margin-top: 0.35rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Input area */
.translate-input-wrap {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
.translate-input {
  flex: 1;
  font-size: 1.05rem;
  padding: 0.65rem 0.85rem;
  border: 2px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s;
}
.translate-input:focus {
  outline: none;
  border-color: var(--accent);
}
.translate-input--disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.translate-submit-btn {
  white-space: nowrap;
}

/* Score summary line */
.translate-score {
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0.5rem 0 0.75rem 0;
}

/* Token row (colour-coded student words) */
.translate-token-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.75rem 0;
  font-size: 1.1rem;
  font-family: var(--font-serif, Georgia, serif);
}
.translate-token {
  display: inline-block;
  padding: 0.2rem 0.45rem;
  border-radius: 4px;
  border: 1px solid transparent;
  transition: background 0.15s;
}
.translate-token--ok {
  background: rgba(76, 175, 80, 0.15);
  border-color: rgba(76, 175, 80, 0.35);
  color: var(--text);
}
.translate-token--error {
  background: rgba(244, 67, 54, 0.12);
  border-color: rgba(244, 67, 54, 0.35);
  color: var(--text);
}
.translate-token--typo {
  background: rgba(255, 193, 7, 0.15);
  border-color: rgba(255, 193, 7, 0.4);
  color: var(--text);
  text-decoration: underline wavy rgba(255, 152, 0, 0.6);
}
.translate-token--extra {
  background: rgba(158, 158, 158, 0.12);
  border-color: rgba(158, 158, 158, 0.3);
  color: var(--text-muted);
  text-decoration: line-through;
}
.translate-token--unknown {
  background: rgba(156, 39, 176, 0.1);
  border-color: rgba(156, 39, 176, 0.3);
  color: var(--text-muted);
  font-style: italic;
}

/* Per-slot error details */
.translate-slot-error {
  font-size: 0.9rem;
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--border-light, rgba(0,0,0,0.06));
}
.translate-slot-role {
  font-weight: 600;
  color: var(--text);
  text-transform: capitalize;
}
.translate-error-msg {
  color: var(--danger, #d32f2f);
}

/* Link violation messages */
.translate-link-error {
  font-size: 0.9rem;
  margin: 0.5rem 0;
  padding: 0.5rem 0.75rem;
  background: rgba(244, 67, 54, 0.06);
  border-left: 3px solid var(--danger, #d32f2f);
  border-radius: 0 4px 4px 0;
  line-height: 1.45;
}

/* Notices (typos, extra words) */
.translate-notice {
  font-size: 0.85rem;
  margin: 0.35rem 0;
  padding: 0.35rem 0.65rem;
  border-radius: 4px;
}
.translate-notice--typo {
  background: rgba(255, 193, 7, 0.1);
  color: var(--text);
}
.translate-notice--extra {
  background: rgba(158, 158, 158, 0.08);
  color: var(--text-muted);
}

/* Partial-correct banner (in between correct and incorrect) */
.feedback--partial {
  background: rgba(255, 152, 0, 0.12);
  color: #e65100;
  border: 1px solid rgba(255, 152, 0, 0.3);
  padding: 0.6rem 0.85rem;
  border-radius: 6px;
  font-weight: 500;
  margin-bottom: 0.5rem;
}


/* ==========================================================
   SIDE-BY-SIDE TRANSLATION LAYOUT
   ==========================================================
   Paragraphs and examples with both target + English text
   use a two-column layout: target on left, translation on
   right.  The translation column is hidden by default and
   toggled with a button.
   ========================================================== */

/* -- Toggle button for translations -- */
.translation-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--bg-card);
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  font-family: var(--font-body);
}
.translation-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* -- Side-by-side paragraph -- */
.chapter-para--bilingual {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  margin-bottom: 0.75rem;
  line-height: 1.7;
}
.chapter-para__target {
  flex: 1;
  min-width: 0;
}
.chapter-para__translation {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  border-left: 2px solid var(--border);
  padding-left: 1rem;
}

/* When translations are hidden */
.translations-hidden .chapter-para__translation,
.translations-hidden .chapter-example__en,
.translations-hidden .chapter-dialogue-line__en {
  display: none;
}

/* When hidden, the target text takes full width */
.translations-hidden .chapter-para--bilingual {
  display: block;
}

/* -- Side-by-side example -- */
.chapter-example--bilingual {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
}
.chapter-example__target {
  flex: 1;
  min-width: 0;
}
.chapter-example__en--side {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-left: 2px solid var(--border);
  padding-left: 1rem;
  align-self: center;
}

.translations-hidden .chapter-example__en--side {
  display: none;
}
.translations-hidden .chapter-example--bilingual {
  display: block;
}


/* ==========================================================
   LANDING PAGE
   ========================================================== */
.landing-greeting {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.landing-stat-row {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
}
.landing-stat {
  flex: 1;
  text-align: center;
  padding: 0.75rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.landing-stat__number {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
}
.landing-stat__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-top: 0.15rem;
}


/* ==========================================================
   WELCOME HERO (first-visit splash page)
   ==========================================================
   Centred, airy layout with a large emoji "logo", title,
   tagline, and feature bullets.  Sits within the standard
   640px app column so it doesn't need its own max-width. */
.welcome-hero {
  text-align: center;
  padding: 2.5rem 1rem 1.5rem;
}

.welcome-logo {
  font-size: 3.5rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.welcome-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: 0.02em;
  margin-bottom: 0.5rem;
}

.welcome-tagline {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 380px;
  margin: 0 auto 1.5rem;
}

/* Feature bullets — small icon + text rows */
.welcome-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 340px;
  margin: 0 auto 0.5rem;
  text-align: left;
}

.welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}

.welcome-feature__icon {
  font-size: 1.2rem;
  line-height: 1.5;
  flex-shrink: 0;
}

.welcome-feature__text {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.5;
}


/* ==========================================================
   AUTH GATE (sign up / preview fork)
   ========================================================== */

/* "Log in" link styled as inline text button */
.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  cursor: pointer;
  font-size: inherit;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}
.link-btn:hover {
  color: #236b60;
}

/* -- Reveal area click/keyboard target -- */
.reveal-area--hidden {
  cursor: pointer;
}

/* The reveal prompt is a <button> for keyboard accessibility
   (Firefox requires a natively interactive element for
   Space/Enter to work reliably), styled to look like text. */
.reveal-prompt-btn {
  display: block;
  width: 100%;
  padding: 0.5rem;
  border: none;
  background: transparent;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--text-muted);
  cursor: pointer;
  text-align: center;
}
.reveal-prompt-btn:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 4px;
}


/* ==========================================================
   RESPONSIVE BREAKPOINTS
   ==========================================================
   The app's max-width is 640px, so the main breakpoint is
   for narrow phones (under ~480px) where side-by-side layouts
   need to stack.
   ========================================================== */

@media (max-width: 480px) {
  /* Side-by-side translations stack vertically on phones */
  .chapter-para--bilingual {
    flex-direction: column;
    gap: 0.5rem;
  }
  .chapter-para__translation {
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed var(--border);
    padding-top: 0.5rem;
  }

  .chapter-example--bilingual {
    flex-direction: column;
    gap: 0.5rem;
  }
  .chapter-example__en--side {
    border-left: none;
    padding-left: 0;
    border-top: 1px dashed var(--border);
    padding-top: 0.5rem;
  }

  /* Landing stats stack vertically */
  .landing-stat-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Action row (Remembered / Didn't Remember) stacks */
  .action-row {
    flex-direction: column;
  }

  /* Summary row stacks */
  .summary-row {
    flex-direction: column;
    gap: 0.5rem;
  }

  /* Reduce base font slightly on very small screens */
  html {
    font-size: 15px;
  }
}


/* ==========================================================
   TEACHING ENGINE STYLES
   ========================================================== */

.teach-word-card {
  text-align: center;
}

.teach-detail {
  font-size: 0.9rem;
  color: var(--text);
  margin-top: 0.3rem;
  padding: 0.3rem 0.75rem;
  text-align: left;
}

.teach-example {
  padding: 0.5rem 0.75rem;
  background: var(--bg);
  border-radius: 4px;
  text-align: left;
}

.teach-example__en {
  font-size: 0.9rem;
  color: var(--text-muted);
  font-style: italic;
  margin-top: 0.2rem;
}

/* -- Grammar typing -- */
.teach-typing-area {
  margin-top: 1rem;
}

.teach-typing-label {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.teach-typing-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.teach-typing-stem {
  font-size: 1.2rem;
  font-weight: 600;
  font-style: italic;
  color: var(--text);
}

.teach-typing-input {
  flex: 1;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--border);
  border-radius: 4px;
  font-family: var(--font-body);
  font-size: 1rem;
}

.teach-typing-input:focus {
  outline: 2px solid var(--focus-ring);
  outline-offset: 1px;
}

.teach-typing-feedback {
  padding: 0.5rem;
  border-radius: 4px;
  text-align: center;
  font-weight: 600;
  min-height: 1.5rem;
}


/* ==========================================================
   PROGRESS OVERVIEW (landing page)
   ========================================================== */

.progress-card {
  padding: 0.75rem 1rem;
}

.progress-card__title {
  font-weight: 600;
  font-size: 1rem;
  margin-bottom: 0.4rem;
}

.progress-card__items {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.progress-badge {
  font-size: 0.85rem;
  color: var(--text-muted);
}

.progress-badge--done {
  color: var(--text);
}


/* ==========================================================
   COURSE SELECTOR (main menu)
   ========================================================== */

/* Row showing current course name + switch button */
.course-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0;
  margin-bottom: 0.5rem;
}

.course-label {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--text);
}

/* Course picker buttons (when no course is selected yet) */
.course-pick-btn {
  margin-top: 0.5rem;
}


/* ==========================================================
   PROFILE FORM MESSAGES
   ========================================================== */

.profile-form {
  max-width: 300px;
}

.profile-msg {
  font-size: 0.85rem;
  margin-top: 0.5rem;
  padding: 0.3rem 0;
}

.profile-msg--error {
  color: #e53935;
}

.profile-msg--ok {
  color: #43a047;
}


/* ==========================================================
   BREADCRUMB NAVIGATION
   ========================================================== */

.breadcrumb {
  font-size: 0.82rem;
  color: var(--text-muted);
  padding: 0.4rem 0;
  margin-bottom: 0.25rem;
}

.breadcrumb__link {
  color: var(--primary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  text-decoration: underline;
}

.breadcrumb__sep {
  margin: 0 0.15rem;
  color: var(--text-muted);
}

.breadcrumb__current {
  color: var(--text);
}


/* ==========================================================
   SYNC STATUS INDICATOR
   ========================================================== */

.sync-status {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  padding: 0.3rem 0;
  margin-top: 0.5rem;
}

.sync-status--ok {
  color: #43a047;
}

.sync-status--error {
  color: #e53935;
}


/* ==========================================================
   SYNC TOAST (network error notification)
   ========================================================== */

.sync-toast {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.85rem;
  color: #fff;
  opacity: 0;
  transition: opacity 0.3s;
  z-index: 1000;
  pointer-events: none;
}

.sync-toast--visible {
  opacity: 1;
}

.sync-toast--error {
  background: #e53935;
}

.sync-toast--ok {
  background: #43a047;
}


/* ==========================================================
   CHAPTER LOADING SPINNER
   ========================================================== */

.chapter-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 1rem;
}

.chapter-loading--error {
  color: #e53935;
}


/* ==========================================================
   CHAPTER PROGRESS BAR
   ========================================================== */

.chapter-progress {
  margin-bottom: 1rem;
}

.chapter-progress__label {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
}

.chapter-progress__track {
  height: 6px;
  background: var(--border);
  border-radius: 3px;
  overflow: hidden;
}

.chapter-progress__fill {
  height: 100%;
  background: var(--primary);
  border-radius: 3px;
  transition: width 0.4s ease;
}


/* ==========================================================
   SECTION READ MARKERS
   ========================================================== */

/* Subtle left-border accent on sections that have been read */
.chapter-section--read {
  border-left: 3px solid var(--primary);
}

/* Fade the read marker in smoothly */
.chapter-section {
  border-left: 3px solid transparent;
  transition: border-left-color 0.4s ease;
}


/* ==========================================================
   SETTINGS: RESET PROGRESS
   ========================================================== */

.settings-reset__label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 0.3rem;
  color: var(--text);
}


/* ==========================================================
   CHAPTER CARD PROGRESS INDICATOR
   ========================================================== */

.chapter-card__progress {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.chapter-card__progress-bar {
  flex: 1;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  overflow: hidden;
}
.chapter-card__progress-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 2px;
  transition: width 0.3s ease;
}
.chapter-card__status {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  white-space: nowrap;
}
.chapter-card__status--progress {
  color: var(--accent);
}
.chapter-card__status--complete {
  color: var(--correct);
}


/* ==========================================================
   SESSION SUMMARY: MISSED ITEMS
   ========================================================== */

.sum-missed-row {
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
}
.sum-missed-row:last-of-type {
  border-bottom: none;
}
.sum-missed-row__prompt {
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 0.2rem;
}
.sum-missed-row__answers {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
}
.sum-missed-row__yours {
  color: var(--incorrect);
  text-decoration: line-through;
}
.sum-missed-row__arrow {
  color: var(--text-muted);
  font-size: 0.75rem;
}
.sum-missed-row__correct {
  color: var(--correct);
  font-weight: 600;
}


/* ==========================================================
   SYNC IN-PROGRESS INDICATOR
   ========================================================== */

.sync-indicator {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: var(--text-muted);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  box-shadow: var(--shadow);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 100;
  pointer-events: none;
}
.sync-indicator--visible {
  opacity: 1;
}


/* ==========================================================
   AUDIO / PRONUNCIATION BUTTON
   ========================================================== */

.audio-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  margin-left: 0.4rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-card);
  color: var(--accent);
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  vertical-align: middle;
  line-height: 1;
}
.audio-btn:hover {
  background: var(--accent-light);
  border-color: var(--accent);
}
.audio-btn:active {
  transform: scale(0.92);
}


/* ==========================================================
   DARK MODE
   ==========================================================
   Two activation paths:
     1. System preference: @media (prefers-color-scheme: dark)
     2. Manual toggle: body.dark-mode class
   The manual toggle takes priority via specificity.
   ========================================================== */

/* Dark theme values — shared between auto and manual modes */
@media (prefers-color-scheme: dark) {
  :root:not(.light-mode) {
    --bg:            #1a1a1e;
    --bg-card:       #252529;
    --bg-hover:      #2e2e33;
    --text:          #e0ddd8;
    --text-muted:    #9a958e;
    --border:        #3d3d42;
    --accent:        #4ec9b0;
    --accent-light:  #1e3a35;
    --correct:       #4ec97a;
    --correct-bg:    #1e3a28;
    --incorrect:     #e06050;
    --incorrect-bg:  #3a1e1e;
    --focus-ring:    #4ec9b0;
    --shadow:        0 1px 3px rgba(0, 0, 0, 0.25);
  }
}

/* Manual dark mode toggle (overrides system preference) */
body.dark-mode {
  --bg:            #1a1a1e;
  --bg-card:       #252529;
  --bg-hover:      #2e2e33;
  --text:          #e0ddd8;
  --text-muted:    #9a958e;
  --border:        #3d3d42;
  --accent:        #4ec9b0;
  --accent-light:  #1e3a35;
  --correct:       #4ec97a;
  --correct-bg:    #1e3a28;
  --incorrect:     #e06050;
  --incorrect-bg:  #3a1e1e;
  --focus-ring:    #4ec9b0;
  --shadow:        0 1px 3px rgba(0, 0, 0, 0.25);
}

/* Manual light mode (overrides system dark preference) */
body.light-mode {
  --bg:            #f6f4f0;
  --bg-card:       #ffffff;
  --bg-hover:      #edeae4;
  --text:          #2c2c2c;
  --text-muted:    #6b6560;
  --border:        #d6d1c9;
  --accent:        #2a7a6e;
  --accent-light:  #d0ebe6;
  --correct:       #1a7a4a;
  --correct-bg:    #d4edda;
  --incorrect:     #b5362a;
  --incorrect-bg:  #f8d7da;
  --focus-ring:    #2a7a6e;
  --shadow:        0 1px 3px rgba(0, 0, 0, 0.08);
}