/*
 * ════════════════════════════════════════════════════════════════════════
 * components.cards.responses.css
 * ════════════════════════════════════════════════════════════════════════
 *
 * Interactive cards where the user is expected to respond — question
 * cards, answer fields, and assessment inputs. For read-only display
 * cards see: components.cards.display.css
 *
 * 01. Question card     – Card wrapper, focus-within lift, ref bar
 * 02. Question body     – Question text, emphasis style
 * 03. Verse button      – Inline ☍ button that opens the verse popup
 * 04. Answer field      – Textarea, focus state, placeholder, char hint
 * 05. Mic button        – Voice-input trigger (rendered when available)
 * 06. Starred card      – .starred-card modifier on .question-card
 *                         (full starred summary panel → components.starred.css)
 * 07. Likert scale      – Card, rows, radio inputs, number headers
 * 08. Likert popup      – Bottom-sheet scale-explanation overlay
 * 09. AI Tutor localVal – checkAnswer or localValidate icon to check user answer
 *
 * ── DARK MODE ───────────────────────────────────────────────────────────
 * 10. Dark mode         – body.dark-mode overrides for all rules above
 *
 * ── MULTILINGUAL / RTL ──────────────────────────────────────────────────
 * 11. Script overrides  – Per-script resets grouped by script family:
 *                           A. Arabic script   — ar, ur
 *                           B. Hebrew script   — he
 *                           C. Devanagari      — ne, hi
 *                           D. Myanmar         — my
 *                           E. CJK             — zh (zh-CN), ja
 *                           F. Hangul          — ko
 *                           G. Cyrillic        — ru, uk  (labels only)
 *
 * ════════════════════════════════════════════════════════════════════════
 */


/* ── 01. QUESTION CARD ──────────────────────────────────────────────────── */
/* Each Bible question is wrapped in a .question-card.
   The card lifts (stronger gold shadow) when the user is typing inside it. */

.question-card {
  background: var(--card-bg);
  margin: 12px var(--content-margin);
  border-radius: 10px;
  box-shadow: 0 1px 6px var(--shadow);
  overflow: hidden;
  transition: box-shadow 0.2s;
}
.question-card:focus-within {
  box-shadow: 0 3px 16px rgba(184,146,42,0.18);
}

/* Reference bar — dark strip at top of card showing scripture reference */
.question-ref {
  background: var(--text);
  color: var(--accent-light);
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  font-weight: bold;
  letter-spacing: 0.12em;
  padding: 6px 14px;
  text-transform: uppercase;
}

/* Split ref bar layout — reference inline-start, action buttons inline-end */
.question-ref-split {
  display: flex;
  justify-content: space-between;
}

/* Custom header text in the ref bar for question subtype 'header'.
   Allows mixed-case and slightly looser tracking than the default
   all-caps mono ref bar style. */
.question-header-label {
  text-transform: none;
  letter-spacing: 0.04em;
  font-style: italic;
  opacity: 0.85;
}


/* ── 02. QUESTION BODY ──────────────────────────────────────────────────── */

.question-body {
  padding: 14px 16px 4px;
}
.question-text {
  font-size: 0.906rem;     /* was 14.5px — scales */
  color: var(--text);
  line-height: 1.6;
  font-weight: 400;
  margin-bottom: 12px;
}
.question-text em {
  font-style: italic;
  color: var(--emphasis);
}

/* "go deeper ↗" inline link within question text.
   Styled as subtle inline text, not a visible button. */
.deeper-btn {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: inherit;
  color: var(--emphasis);
  opacity: 0.75;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.deeper-btn:hover { opacity: 1; }


/* ── 03. VERSE BUTTON ───────────────────────────────────────────────────── */
/* Floated to the inline-end of the ref bar. Opens the verse popup modal.
   Only rendered when a scripture reference is attached to the question.
   float: inline-end and padding-inline-start flip correctly in RTL. */

.verse-btn {
  float: inline-end;                              /* was float: right */
  background: none;
  border: none;
  color: var(--accent-light);
  font-size: 13px;         /* UI chrome — stays px */
  cursor: pointer;
  padding: 0;
  padding-inline-start: 8px;                     /* was padding: 0 0 0 8px */
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}
.verse-btn:hover { opacity: 1; }


/* ── 04. ANSWER FIELD ───────────────────────────────────────────────────── */
/* Textarea where users type their answers.
   Auto-resizes via autoResize() in JS (oninput handler).
   border-radius only on bottom corners so it sits flush under .question-ref.
   #globalNotesField gets a taller minimum height for the free-notes card. */

.answer-field {
  width: 100%;
  border: none;
  border-top: 1.5px solid var(--surface-mid);
  background: var(--surface);
  font-family: var(--main-font-family);
  font-size: 0.875rem;     /* was 14px — scales */
  color: var(--text);
  padding: 12px 14px;
  resize: none;
  min-height: 80px;
  outline: none;
  line-height: 1.65;
  transition: background 0.2s, border-color 0.2s;
  border-radius: 0 0 10px 10px;
}
.answer-field:focus {
  background: var(--input-focus-bg, var(--card-bg));
  border-color: var(--accent);
}
.answer-field::placeholder {
  color: var(--text-faint);
  font-style: italic;
  font-size: 0.8125rem;    /* was 13px — scales */
}

#globalNotesField {
  min-height: 450px;
}

/* Character count hint — text-align: end flips to left in RTL */
.char-hint {
  text-align: end;                                /* was text-align: right */
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  color: var(--text-faint);
  padding: 4px 14px 10px;
}


/* ── 05. MIC BUTTON ─────────────────────────────────────────────────────── */
/* Sits below the answer textarea, right-aligned.
   Only rendered when voice input is available (detected at runtime by
   voiceInputAvailable()). Pulses while recording is active. */
/* Mic button — flows inside .answer-action-row as a flex item */
.mic-btn {
  background: none;
  border: none;
  border-radius: 6px;
  padding: 6px 6px 4px 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.15s;
}
.mic-btn:hover {
  opacity: 1;
  color: var(--accent-light);
  background: var(--surface-mid);
}
.mic-btn.mic-btn-active {
  color: #c0392b;
  background: rgba(192,57,43,0.07);
  opacity: 1;
  animation: mic-pulse 1.2s ease-in-out infinite;
}

@keyframes mic-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}


/* ── 06. STARRED CARD ───────────────────────────────────────────────────── */
/* .starred-card is a modifier applied to .question-card when the user
   stars a question. Inline-start accent border + warm tint signals the
   starred state. border-inline-start flips to the right edge in RTL.
   The full starred summary panel lives in components.starred.css. */

.question-card.starred-card {
  border-inline-start: 3px solid var(--accent);  /* was border-left */
  background: #fffdf5;
}

/* Star button — floated to the inline-end of the ref bar.
   padding-inline-start provides the gap from the adjacent verse button. */
.star-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 13px;         /* UI chrome — stays px */
  padding: 0;
  padding-inline-start: 6px;                     /* was padding: 0 0 0 6px */
  line-height: 1;
  float: inline-end;                             /* was float: right */
  color: var(--accent-light) !important;
  opacity: 1 !important;
  transition: transform 0.15s;
}
.star-btn:active { transform: scale(1.3); }


/* ── 07. LIKERT SCALE ───────────────────────────────────────────────────── */
/* Agreement-scale assessment card. Header row has an ⓘ info button on the
   inline-start and numeric column headers on the inline-end. Each statement
   row has custom-styled radio inputs. */

.likert-card {
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px 16px 16px;
  margin: 12px var(--content-margin) 20px;
  box-shadow: var(--shadow) 0 1px 4px;
}

/* Header row: info button inline-start, number labels inline-end */
.likert-header-row {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  padding: 0 2px;
}

/* ⓘ button that opens the scale explanation popup */
.likert-info-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-faint);
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  padding: 3px 8px;
  height: 22px;
  display: flex;
  align-items: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
  margin-inline-end: auto;                       /* was margin-right: auto */
  letter-spacing: 0.04em;
}
.likert-info-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}

/* Number column headers (1, 2, 3 … N) */
.likert-number-headers {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.likert-number-label {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  color: var(--text-faint);
  width: 22px;
  text-align: center;
  letter-spacing: 0.05em;
}

/* Statement rows */
.likert-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 0;
  border-top: 1px solid var(--border);
}
.likert-row:first-of-type { border-top: none; }

.likert-statement {
  flex: 1;
  font-size: 0.875rem;     /* was 14px — scales */
  color: var(--text);
  line-height: 1.45;
}

/* Radio input group */
.likert-options {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}
.likert-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: var(--surface);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.likert-radio:checked {
  background: var(--accent);
  border-color: var(--accent);
}
.likert-radio:hover:not(:checked) {
  border-color: var(--accent-light);
  background: var(--surface-mid);
}


/* ── 08. LIKERT POPUP ───────────────────────────────────────────────────── */
/* Bottom-sheet overlay explaining the scale. Shares animation keyframes
   with the verse modal (fadeIn, slideUp defined in overlays.css). */

.likert-popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44,36,22,0.55);
  z-index: var(--z-modal);
  align-items: flex-end;
  justify-content: center;
}
.likert-popup-overlay.open {
  display: flex;
  animation: fadeIn 0.2s ease;
}
.likert-popup {
  background: var(--surface);
  border-radius: 16px 16px 0 0;
  padding: 20px 20px 36px;
  max-width: 480px;
  width: 100%;
  max-height: 75vh;
  overflow-y: auto;
  animation: slideUp 0.25s ease;
}
.likert-popup-titlebar {
  font-family: var(--font-stack-mono);
  font-size: 10px;         /* UI chrome — stays px */
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--emphasis);
  margin-bottom: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.likert-popup-close {
  background: none;
  border: none;
  color: var(--text-faint);
  font-size: 18px;         /* UI chrome — stays px */
  cursor: pointer;
  padding: 0;
  line-height: 1;
  min-width: 44px;         /* Android accessibility standard */
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.likert-popup-instruction {
  font-family: var(--main-font-family);
  font-size: 0.906rem;     /* was 14.5px — scales */
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
  font-style: italic;
}
.likert-popup-key {
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.likert-popup-key-row {
  font-family: var(--font-stack-mono);
  font-size: 11px;         /* UI chrome — stays px */
  color: var(--text-secondary);
  letter-spacing: 0.04em;
  padding: 4px 0;
  display: flex;
  gap: 8px;
}
.likert-popup-key-num {
  color: var(--accent);
  min-width: 18px;
  font-weight: bold;
}


/* ── 09. AI TUTOR & LOCAL VALIDATE ───────────────────────────────────────── */
/* Action row: info icon pinned inline-start, validate + mic at inline-end  */
.answer-action-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 4px 8px 4px 6px;
}

/* Info button — muted, pinned to inline-start by margin-inline-end: auto */
.answer-info-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  color: var(--text-faint);
  opacity: 0.55;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-inline-end: auto;                       /* was margin-right: auto */
  transition: opacity 0.15s, background 0.15s;
}
.answer-info-btn:hover,
.answer-info-btn:focus {
  opacity: 1;
  background: var(--surface-mid);
  outline: none;
}

/* Validate + mic: no margins, sit flush at the inline-end edge */
.check-answer-btn,
.local-validate-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px 6px 4px 6px;
  border-radius: 6px;
  opacity: 0.75;
  transition: opacity 0.15s, background 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.check-answer-btn {
  color: var(--validate);
}
.local-validate-btn {
  color: var(--validate);
}

/* Gap between local-validate and mic */
.local-validate-btn {
  margin-inline-end: 4px;                        /* was margin-right: 4px */
}
.answer-action-row .mic-btn {
  order: 99;
  margin-inline-start: 30px;                     /* was margin-left: 30px */
}

.check-answer-btn:hover,
.check-answer-btn:focus,
.local-validate-btn:hover,
.local-validate-btn:focus {
  opacity: 1;
  background: var(--surface-mid);
  outline: none;
}

/* Mic is last child visually — always at inline-end */
.answer-action-row .mic-btn {
  order: 99;
}

/* ── AI Tutor panel ────────────────────────────────────────────────────────── */
.ai-tutor-panel {
  margin: 8px 0 4px;
  border-radius: 10px;
  background: var(--card-bg);
  overflow: hidden;
  border: 1px solid var(--border);
}

/* ── Header ── */
.ai-tutor-header {
  background: var(--emphasis);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px 6px;
}
.ai-tutor-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--surface);           /* near-white on dark-brown header — high contrast */
}
.ai-tutor-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--surface-mid);       /* slightly dimmed but still legible on --emphasis */
  padding: 2px 4px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.ai-tutor-close:hover { color: var(--surface); }

/* ── Conversation thread ── */
.ai-tutor-thread {
  background: var(--text-faint);  /* clear separation from cards  */
  max-height: 320px;
  overflow-y: auto;
  padding: 10px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Individual turns ── */
.ai-tutor-turn {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ai-tutor-turn-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.ai-tutor-turn--user   .ai-tutor-turn-label { color: var(--text); }
.ai-tutor-turn--tutor .ai-tutor-turn-label { color: var(--surface-mid); }

/* Tutor bubble: white card on the mid-grey thread background */
.ai-tutor-turn--tutor .ai-tutor-turn-body {
  background: var(--card-bg);
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
}
.ai-tutor-turn-body p {
  margin: 0 0 4px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text);              /* near-black — maximum contrast on white/light bg */
}
.ai-tutor-turn-body p:last-child { margin-bottom: 0; }

/* User bubble: emphasis-tinted background so it reads as "sent" */
.ai-tutor-turn--user .ai-tutor-turn-body {
  background: var(--surface);      /* lightest warm surface — visually distinct       */
  border-radius: 8px;
  padding: 8px 10px;
  border: 1px solid var(--border);
}
.ai-tutor-turn--user .ai-tutor-turn-body p {
  color: var(--text-secondary);    /* slightly softer than tutor text — clear still   */
}

/* ── Typing indicator ── */
.ai-tutor-typing-dots {
  display: flex;
  gap: 4px;
  padding: 6px 2px;
}
.ai-tutor-typing-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  opacity: 0.5;
  animation: aiTutorPulse 1.2s infinite ease-in-out;
}
.ai-tutor-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.ai-tutor-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes aiTutorPulse {
  0%, 80%, 100% { opacity: 0.5; transform: scale(1);   }
  40%           { opacity: 1;   transform: scale(1.3); }
}

/* ── Composer ── */
.ai-tutor-composer {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
  background: var(--card-bg);
}
.ai-tutor-input {
  flex: 1;
  resize: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 14px;
  font-family: inherit;
  background: var(--surface);
  color: var(--text);              /* near-black on lightest warm surface — sharp     */
  line-height: 1.45;
  min-height: 38px;
  max-height: 120px;
  overflow-y: auto;
}
.ai-tutor-input::placeholder { color: var(--text-faint); }
.ai-tutor-input:focus {
  outline: none;
  border-color: var(--accent);
}
.ai-tutor-send {
  background: var(--accent);
  color: var(--surface);           /* lightest warm surface on mid-brown — good ratio */
  border: none;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}
.ai-tutor-send:hover    { background: var(--accent-light); }
.ai-tutor-send:disabled { opacity: 0.5; cursor: not-allowed; }


/* ══════════════════════════════════════════════════════════════════════════
   10. DARK MODE
   body.dark-mode overrides for all rules in this file, gathered here.
   ══════════════════════════════════════════════════════════════════════════ */

/* ── Question card ── */
body.dark-mode .question-card {
  background: var(--dm-raised);
  box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}

/* ── Question text ── */
body.dark-mode .question-text {
  color: var(--dm-text);
}

/* ── Answer field ── */
body.dark-mode .answer-field {
  background: var(--dm-sunken);
  border-top-color: var(--dm-border);
  color: var(--dm-text);
}
body.dark-mode .answer-field:focus {
  background: var(--dm-sunken);
  border-color: var(--accent);
}
body.dark-mode .answer-field::placeholder {
  color: var(--dm-text-faint);
}

/* ── Mic button ── */
body.dark-mode .mic-btn {
  border-color: var(--dm-border);
  color: var(--dm-text-faint);
}
body.dark-mode .mic-btn:hover {
  border-color: var(--accent-light);
  color: var(--accent-light);
}
body.dark-mode .mic-btn.mic-btn-active {
  /* Slightly brighter red used in dark mode for sufficient contrast */
  border-color: #e74c3c;
  color: #e74c3c;
  background: rgba(231,76,60,0.1);
}

/* ── Starred card ── */
body.dark-mode .question-card.starred-card {
  background: var(--dm-sunken);
  border-inline-start-color: var(--accent);      /* was border-left-color */
}

/* ── Likert scale ── */
body.dark-mode .likert-card {
  background: var(--dm-raised);
  border-color: var(--dm-border);
}
body.dark-mode .likert-statement    { color: var(--dm-text); }
body.dark-mode .likert-number-label { color: var(--dm-text-faint); }
body.dark-mode .likert-row          { border-color: var(--dm-border); }
body.dark-mode .likert-info-btn {
  border-color: var(--dm-border);
  color: var(--dm-text-faint);
}
body.dark-mode .likert-radio {
  /* Unchecked: step the border up two levels from --dm-border so the circle
     outline is legible against the --dm-raised card background.            */
  border-color: var(--dm-text-faint);
  background: var(--dm-sunken);
}
body.dark-mode .likert-radio:checked {
  /* Use the lighter accent token — --accent (#8c6420) has insufficient
     contrast on dark surfaces; --accent-light (#b8882e) clears AA.        */
  background: var(--accent-light);
  border-color: var(--accent-light);
}
body.dark-mode .likert-radio:hover:not(:checked) {
  border-color: var(--accent-light);
  background: var(--dm-raised);
}

/* ── Likert popup ── */
body.dark-mode .likert-popup {
  background: var(--dm-raised);
}
body.dark-mode .likert-popup-titlebar   { color: var(--accent-light); }
body.dark-mode .likert-popup-instruction { color: var(--dm-text-mid); }
body.dark-mode .likert-popup-key        { border-color: var(--dm-border); }
body.dark-mode .likert-popup-key-row    { color: var(--dm-text-mid); }
body.dark-mode .likert-popup-close      { color: var(--dm-text-faint); }

/* ── Deeper button ── */
body.dark-mode .deeper-btn { color: var(--emphasis-light); }

/* ── AI Tutor ──────────────────────────────────────────────────────────────── */
body.dark-mode .ai-tutor-panel {
  background: var(--dm-raised);
  border-color: var(--dm-border);
}

/* Header: deepest dark surface keeps the emphasis-brown readable */
body.dark-mode .ai-tutor-header {
  background: var(--dm-base);
  border-bottom: 1px solid var(--dm-border);
}
body.dark-mode .ai-tutor-eyebrow {
  color: var(--dm-text);           /* primary light text on deepest dark — sharp      */
}
body.dark-mode .ai-tutor-close       { color: var(--dm-text-mid); }
body.dark-mode .ai-tutor-close:hover { color: var(--dm-text);     }

/* Thread: sunken dark surface as the conversation well */
body.dark-mode .ai-tutor-thread {
  background: var(--dm-sunken);
}

/* Labels */
body.dark-mode .ai-tutor-turn--user  .ai-tutor-turn-label { color: var(--dm-text-mid); }
body.dark-mode .ai-tutor-turn--tutor .ai-tutor-turn-label { color: var(--dm-text);     }

/* Tutor bubble: raised card on sunken thread */
body.dark-mode .ai-tutor-turn--tutor .ai-tutor-turn-body {
  background: var(--dm-raised);
  border-color: var(--dm-border);
}
body.dark-mode .ai-tutor-turn-body p {
  color: var(--dm-text);           /* primary light on dark raised surface — clear    */
}

/* User bubble: slightly more sunken so it reads as "sent" */
body.dark-mode .ai-tutor-turn--user .ai-tutor-turn-body {
  background: var(--dm-sunken);
  border-color: var(--dm-border);
}
body.dark-mode .ai-tutor-turn--user .ai-tutor-turn-body p {
  color: var(--dm-text-mid);       /* secondary text — still legible, visually softer */
}

/* Typing dots */
body.dark-mode .ai-tutor-typing-dots span {
  background: var(--accent-light); /* lighter accent visible on dark backgrounds      */
}

/* Composer */
body.dark-mode .ai-tutor-composer {
  background: var(--dm-raised);
  border-top-color: var(--dm-border);
}
body.dark-mode .ai-tutor-input {
  background: var(--dm-sunken);
  border-color: var(--dm-border);
  color: var(--dm-text);
}
body.dark-mode .ai-tutor-input::placeholder { color: var(--dm-text-faint); }
body.dark-mode .ai-tutor-input:focus        { border-color: var(--accent-light); }

body.dark-mode .ai-tutor-send {
  background: var(--accent-light); /* lighter accent — sufficient contrast on dark    */
  color: var(--dm-base);           /* deepest dark text on light-accent button        */
}
body.dark-mode .ai-tutor-send:hover { background: var(--accent); color: var(--dm-text); }


/* ══════════════════════════════════════════════════════════════════════════
   11. SCRIPT-SPECIFIC OVERRIDES
   ──────────────────────────────────────────────────────────────────────────
   Elements targeted in this file, and why each needs treatment:

   CHROME LABELS (letter-spacing + text-transform resets):
     .question-ref           — scripture ref bar: 0.12em tracking, all-caps
     .question-header-label  — ref bar header variant: 0.04em + italic
     .likert-number-label    — numeric column headers: 0.05em (minor, but reset
                               for consistency — numbers are script-neutral)
     .likert-info-btn        — ⓘ label button: 0.04em tracking
     .likert-popup-titlebar  — popup heading: 0.18em + all-caps
     .likert-popup-key-row   — scale key rows: 0.04em tracking
     .ai-tutor-turn-label    — "YOU" / "TUTOR" labels: 0.07em + all-caps
     .ai-tutor-eyebrow       — panel header label: 0.1em + all-caps

   ITALIC SUPPRESSION (font-style: normal):
     .question-header-label  — italic applied to non-Latin header ref text
     .answer-field::placeholder — italic on placeholder text
     .likert-popup-instruction — italic on instruction paragraph

   LINE-HEIGHT BUMPS for scripts with tall vertical metrics:
     .question-text          — 1.6  → 2   for ar/ur/ne/hi/my
     .likert-statement       — 1.45 → 2   for ar/ur/ne/hi/my
     .likert-popup-instruction — 1.7 → 2  for ar/ur/ne/hi/my
     .ai-tutor-turn-body p   — 1.55 → 2  for ar/ur/ne/hi/my
     .ai-tutor-input         — 1.45 → 2  for ar/ur/ne/hi/my
     Hebrew gets slightly less (1.9) than Arabic/Devanagari/Myanmar (2).
     CJK gets 1.6, Hangul gets 1.7 — no change from base needed, stated
     explicitly only where the base value differs.

   NO CHANGES NEEDED for:
     .answer-field — uses --main-font-family, no letter-spacing, no heading font
     .mic-btn, .check-answer-btn, .local-validate-btn, .ai-tutor-send — icons only
     .likert-radio, .likert-options — no text
     .ai-tutor-typing-dots — animation only
     All dark mode and animation rules
   ══════════════════════════════════════════════════════════════════════════ */


/* ── A. Arabic script — ar, ur ────────────────────────────────────────── */

:lang(ar) .question-ref,
:lang(ur) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .question-header-label,
:lang(ur) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(ar) .question-text,
:lang(ur) .question-text {
  line-height: 2;
}

:lang(ar) .answer-field::placeholder,
:lang(ur) .answer-field::placeholder {
  font-style: normal;
}

:lang(ar) .likert-number-label,
:lang(ur) .likert-number-label {
  letter-spacing: 0;
}

:lang(ar) .likert-info-btn,
:lang(ur) .likert-info-btn {
  letter-spacing: 0;
}

:lang(ar) .likert-statement,
:lang(ur) .likert-statement {
  line-height: 2;
}

:lang(ar) .likert-popup-titlebar,
:lang(ur) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .likert-popup-instruction,
:lang(ur) .likert-popup-instruction {
  font-style: normal;
  line-height: 2;
}

:lang(ar) .likert-popup-key-row,
:lang(ur) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(ar) .ai-tutor-turn-label,
:lang(ur) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .ai-tutor-eyebrow,
:lang(ur) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ar) .ai-tutor-turn-body p,
:lang(ur) .ai-tutor-turn-body p {
  line-height: 2;
}

:lang(ar) .ai-tutor-input,
:lang(ur) .ai-tutor-input {
  line-height: 2;
}


/* ── B. Hebrew script — he ────────────────────────────────────────────── */

:lang(he) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(he) .question-text {
  line-height: 1.9;
}

:lang(he) .answer-field::placeholder {
  font-style: normal;
}

:lang(he) .likert-number-label {
  letter-spacing: 0;
}

:lang(he) .likert-info-btn {
  letter-spacing: 0;
}

:lang(he) .likert-statement {
  line-height: 1.9;
}

:lang(he) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .likert-popup-instruction {
  font-style: normal;
  line-height: 1.9;
}

:lang(he) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(he) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(he) .ai-tutor-turn-body p {
  line-height: 1.9;
}

:lang(he) .ai-tutor-input {
  line-height: 1.9;
}


/* ── C. Devanagari — ne (Nepali), hi (Hindi) ─────────────────────────── */

:lang(ne) .question-ref,
:lang(hi) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .question-header-label,
:lang(hi) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(ne) .question-text,
:lang(hi) .question-text {
  line-height: 2;
}

:lang(ne) .answer-field::placeholder,
:lang(hi) .answer-field::placeholder {
  font-style: normal;
}

:lang(ne) .likert-number-label,
:lang(hi) .likert-number-label {
  letter-spacing: 0;
}

:lang(ne) .likert-info-btn,
:lang(hi) .likert-info-btn {
  letter-spacing: 0;
}

:lang(ne) .likert-statement,
:lang(hi) .likert-statement {
  line-height: 2;
}

:lang(ne) .likert-popup-titlebar,
:lang(hi) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .likert-popup-instruction,
:lang(hi) .likert-popup-instruction {
  font-style: normal;
  line-height: 2;
}

:lang(ne) .likert-popup-key-row,
:lang(hi) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(ne) .ai-tutor-turn-label,
:lang(hi) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .ai-tutor-eyebrow,
:lang(hi) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ne) .ai-tutor-turn-body p,
:lang(hi) .ai-tutor-turn-body p {
  line-height: 2;
}

:lang(ne) .ai-tutor-input,
:lang(hi) .ai-tutor-input {
  line-height: 2;
}


/* ── D. Myanmar script — my (Burmese) ───────────────────────────────── */

:lang(my) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(my) .question-text {
  line-height: 2.2;
}

:lang(my) .answer-field::placeholder {
  font-style: normal;
}

:lang(my) .likert-number-label {
  letter-spacing: 0;
}

:lang(my) .likert-info-btn {
  letter-spacing: 0;
}

:lang(my) .likert-statement {
  line-height: 2.2;
}

:lang(my) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .likert-popup-instruction {
  font-style: normal;
  line-height: 2.2;
}

:lang(my) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(my) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}

:lang(my) .ai-tutor-turn-body p {
  line-height: 2.2;
}

:lang(my) .ai-tutor-input {
  line-height: 2.2;
}


/* ── E. CJK — zh (Chinese Simplified zh-CN), ja (Japanese) ──────────── */

:lang(zh) .question-ref,
:lang(ja) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .question-header-label,
:lang(ja) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(zh) .answer-field::placeholder,
:lang(ja) .answer-field::placeholder {
  font-style: normal;
}

:lang(zh) .likert-number-label,
:lang(ja) .likert-number-label {
  letter-spacing: 0;
}

:lang(zh) .likert-info-btn,
:lang(ja) .likert-info-btn {
  letter-spacing: 0;
}

:lang(zh) .likert-popup-titlebar,
:lang(ja) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .likert-popup-instruction,
:lang(ja) .likert-popup-instruction {
  font-style: normal;
  /* line-height: base 1.7 is acceptable for CJK — no change needed */
}

:lang(zh) .likert-popup-key-row,
:lang(ja) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(zh) .ai-tutor-turn-label,
:lang(ja) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(zh) .ai-tutor-eyebrow,
:lang(ja) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}


/* ── F. Hangul — ko (Korean) ─────────────────────────────────────────── */

:lang(ko) .question-ref {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .question-header-label {
  letter-spacing: 0;
  font-style: normal;
}

:lang(ko) .answer-field::placeholder {
  font-style: normal;
}

:lang(ko) .likert-number-label {
  letter-spacing: 0;
}

:lang(ko) .likert-info-btn {
  letter-spacing: 0;
}

:lang(ko) .likert-popup-titlebar {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .likert-popup-instruction {
  font-style: normal;
}

:lang(ko) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(ko) .ai-tutor-turn-label {
  letter-spacing: 0;
  text-transform: none;
}

:lang(ko) .ai-tutor-eyebrow {
  letter-spacing: 0;
  text-transform: none;
}


/* ── G. Cyrillic — ru (Russian), uk (Ukrainian) ─────────────────────── */
/* Cyrillic has case and italic so only letter-spacing on chrome labels
   is reset. font-style, text-transform, and font-family are unchanged. */

:lang(ru) .question-ref,
:lang(uk) .question-ref {
  letter-spacing: 0;
}

:lang(ru) .question-header-label,
:lang(uk) .question-header-label {
  letter-spacing: 0;
}

:lang(ru) .likert-number-label,
:lang(uk) .likert-number-label {
  letter-spacing: 0;
}

:lang(ru) .likert-info-btn,
:lang(uk) .likert-info-btn {
  letter-spacing: 0;
}

:lang(ru) .likert-popup-titlebar,
:lang(uk) .likert-popup-titlebar {
  letter-spacing: 0;
}

:lang(ru) .likert-popup-key-row,
:lang(uk) .likert-popup-key-row {
  letter-spacing: 0;
}

:lang(ru) .ai-tutor-turn-label,
:lang(uk) .ai-tutor-turn-label {
  letter-spacing: 0;
}

:lang(ru) .ai-tutor-eyebrow,
:lang(uk) .ai-tutor-eyebrow {
  letter-spacing: 0;
}