/* ═══════════════════════════════════════════════════════
   HubFlow — Sentence Quiz shell styles
   Shared by the 13 multiple-choice sentence-quiz exercises (modals,
   conditionals, clauses, comparisons, gerunds-infinitives, made-of,
   parts-of-speech, plural-endings, preferences, reported-speech,
   used-to, word-stress-quiz, causative-verbs). Extracted 2026-07-10
   from identical inline <style> blocks in each exercises/*.html file.
   Category color varies via [data-color] on the page's .wrap element.
   ═══════════════════════════════════════════════════════ */

body { min-height: 100vh; padding: 0 14px; }
/* .header and h1 sizing → exercise-enhanced.css (single source of truth) */

.cat-bar { display: flex; gap: 4px; margin-bottom: 8px; overflow-x: auto; scrollbar-width: none; }
.cat-bar::-webkit-scrollbar { display: none; }

[data-area] { display: none; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
[data-area].show { display: flex; }

/* Align MCQ practice / study stacks across mode switches (matches flashcard 230px) */
.wrap:has(.ex-mode-stage) {
  --lp-mcq-mode-h: 230px;
  --lp-mcq-prompt-h: 130px;
  --lp-mcq-stack-gap: 4px;
}

[data-area="practice"] {
  gap: var(--lp-mcq-stack-gap);
}

[data-area="practice"] .sentence-card {
  height: var(--lp-mcq-prompt-h);
  min-height: var(--lp-mcq-prompt-h);
  max-height: var(--lp-mcq-prompt-h);
  padding: 12px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4px;
  overflow: hidden;
}
[data-area="practice"] .sentence-card .sc-icon {
  font-size: 1.5rem;
  margin-bottom: 0;
  flex-shrink: 0;
}
[data-area="practice"] .sentence-card .sc-text {
  font-size: 1.1rem;
  line-height: 1.35;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
[data-area="practice"] .sentence-card .sc-counter {
  margin-top: 0;
  flex-shrink: 0;
}

[data-area="practice"] .word-options {
  height: calc(var(--lp-mcq-mode-h) - var(--lp-mcq-prompt-h) - var(--lp-mcq-stack-gap));
  min-height: calc(var(--lp-mcq-mode-h) - var(--lp-mcq-prompt-h) - var(--lp-mcq-stack-gap));
  max-height: calc(var(--lp-mcq-mode-h) - var(--lp-mcq-prompt-h) - var(--lp-mcq-stack-gap));
  max-width: 720px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
  box-sizing: border-box;
}

[data-area="practice"] .word-options__choices {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  align-content: center;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

[data-area="practice"] .word-options .explain-box {
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  font-size: 0.68rem;
  line-height: 1.35;
  padding: 5px 8px;
}

[data-area="practice"] .word-options:has(.explain-box:not(:empty)) .word-opt {
  min-height: 44px;
  padding: 8px 14px;
  font-size: 0.8rem;
}
[data-area="practice"] .word-opt {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  line-height: 1.25;
}

[data-area="study"] .fc-card {
  height: var(--lp-mcq-mode-h);
  min-height: var(--lp-mcq-mode-h);
}

.sentence-card {
  width: 100%; max-width: 720px; background: var(--lp-surface); border: 1.5px solid var(--lp-border);
  border-radius: var(--lp-radius-lg); padding: 22px 20px; text-align: center;
  box-shadow: var(--lp-shadow-sm);
}
.sentence-card .sc-icon { font-size: 1.6rem; margin-bottom: 6px; }
.sentence-card .sc-text {
  font-family: var(--lp-font-display); font-size: 1.15rem; font-weight: 500;
  color: var(--lp-ink); line-height: 1.5;
}
.sentence-card .sc-text .blank {
  display: inline-block; min-width: 50px; border-bottom: 2.5px dashed transparent;
  font-weight: 700; padding: 0 4px;
}
.sentence-card .sc-counter {
  font-size: .62rem; font-weight: 700; color: var(--lp-muted); margin-top: 8px;
}

.fc-card--speak-in-nav .fc-emoji,
.sentence-card--speak-in-nav .sc-icon {
  display: none;
}

#studySpeakBtn.active {
  background: var(--lp-accent-soft);
  border-color: color-mix(in srgb, var(--lp-accent) 35%, var(--lp-border));
  color: var(--lp-accent-dark);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--lp-accent) 18%, transparent);
}

.fc-card { max-width: 720px; }
.word-options { max-width: 720px; }
.art-front .fc-term { font-size: 1.3rem; line-height: 1.4; }

.scroll-body { padding: 8px 0 30px; }

@media (max-width: 639px) {
  .wrap:has(.ex-mode-stage) {
    --lp-mcq-mode-h: 165px;
    --lp-mcq-prompt-h: 102px;
  }
  [data-area="practice"] .word-opt { min-height: 52px; }
}

/* ─── Category color variants ─────────────────────────────────────────── */

[data-color="teal"] .progress__fill { background: var(--lp-cat-teal); }
[data-color="teal"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-teal); color: var(--lp-cat-teal); }
[data-color="teal"] .art-front .fc-term { color: var(--lp-cat-teal); }
[data-color="teal"] .fc-back { background: color-mix(in srgb, var(--lp-cat-teal) 10%, var(--lp-surface)); border-color: var(--lp-cat-teal); }

[data-color="amber"] .progress__fill { background: var(--lp-cat-amber); }
[data-color="amber"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-amber); color: var(--lp-cat-amber); }
[data-color="amber"] .art-front .fc-term { color: var(--lp-cat-amber); }
[data-color="amber"] .fc-back { background: color-mix(in srgb, var(--lp-cat-amber) 10%, var(--lp-surface)); border-color: var(--lp-cat-amber); }

[data-color="purple"] .progress__fill { background: var(--lp-cat-purple); }
[data-color="purple"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-purple); color: var(--lp-cat-purple); }
[data-color="purple"] .word-opt:hover:not(.disabled) {
  border-color: var(--lp-cat-purple);
  background: color-mix(in srgb, var(--lp-cat-purple) 8%, transparent);
}
[data-color="purple"] .art-front .fc-term { color: var(--lp-cat-purple); }
[data-color="purple"] .fc-back { background: color-mix(in srgb, var(--lp-cat-purple) 10%, var(--lp-surface)); border-color: var(--lp-cat-purple); }

[data-color="blue"] .progress__fill { background: var(--lp-cat-blue); }
[data-color="blue"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-blue); color: var(--lp-cat-blue); }
[data-color="blue"] .art-front .fc-term { color: var(--lp-cat-blue); }
[data-color="blue"] .fc-back { background: color-mix(in srgb, var(--lp-cat-blue) 10%, var(--lp-surface)); border-color: var(--lp-cat-blue); }

/* "azure" reuses the --lp-cat-blue variable (same as "blue") but keeps its
   own box-shadow tint — articles.html used a brighter rgba than the other
   blue-token pages before this file existed; preserved as-is rather than
   silently normalized. */
[data-color="azure"] .progress__fill { background: var(--lp-cat-blue); }
[data-color="azure"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-blue); color: var(--lp-cat-blue); }
[data-color="azure"] .art-front .fc-term { color: var(--lp-cat-blue); }
[data-color="azure"] .fc-back { background: color-mix(in srgb, var(--lp-cat-blue) 10%, var(--lp-surface)); border-color: var(--lp-cat-blue); }

[data-color="green"] .progress__fill { background: var(--lp-cat-green); }
[data-color="green"] .sentence-card .sc-text .blank { border-bottom-color: var(--lp-cat-green); color: var(--lp-cat-green); }
[data-color="green"] .art-front .fc-term { color: var(--lp-cat-green); }
[data-color="green"] .fc-back { background: color-mix(in srgb, var(--lp-cat-green) 10%, var(--lp-surface)); border-color: var(--lp-cat-green); }