/* ============================================================
   Flashcards study mode — toolbar, progress strip, study chrome,
   and the Study-mode rules that enlarge / center the active card.

   Palette inherits the book's --ece-* design tokens (defined in
   custom.css :root). List mode is left completely alone — only
   Study mode (body:has(...study...on)) restyles the cards.
   ============================================================ */
.fc-toolbar,
.fc-study-chrome,
.fc-done {
  --fc-primary:  var(--ece-navy,    #14375f);
  --fc-accent:   var(--ece-steel,   #4a7aa8);
  --fc-rule:     var(--ece-rule,    #d4dde8);
  --fc-bg-soft:  var(--ece-surface, #f6f9fc);
  --fc-ink:      var(--ece-ink,     #0f1d2d);
  --fc-ink-soft: var(--ece-steel,   #4a7aa8);
  --fc-sans:     var(--ece-sans, "Inter Tight", system-ui, sans-serif);
  --fc-mono:     var(--ece-mono, ui-monospace, "Menlo", monospace);
}

/* ---- Toolbar -------------------------------------------------- */
.fc-toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 8px 12px;
  background: var(--fc-bg-soft);
  border: 1px solid var(--fc-rule);
  border-radius: 8px;
  margin: 0.5em 0 1.25em;
  font-family: var(--fc-sans);
  font-size: 13px;
}
.fc-modes {
  display: inline-flex;
  border: 1px solid var(--fc-rule);
  border-radius: 5px;
  overflow: hidden;
}
.fc-mode-btn {
  background: #fff;
  color: var(--fc-ink-soft);
  border: 0;
  padding: 6px 16px;
  font: inherit;
  cursor: pointer;
  min-height: 36px;
  letter-spacing: 0.02em;
}
.fc-mode-btn + .fc-mode-btn { border-left: 1px solid var(--fc-rule); }
.fc-mode-btn.on {
  background: var(--fc-primary);
  color: #fff;
  font-weight: 600;
}

/* ---- Progress ------------------------------------------------ */
.fc-progress {
  flex: 1;
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
}
.fc-progress-track {
  flex: 1;
  height: 8px;
  background: var(--fc-rule);
  border-radius: 4px;
  overflow: hidden;
}
.fc-progress-bar {
  height: 100%;
  width: 0;
  background: var(--fc-primary);
  transition: width 0.18s ease;
}
.fc-progress-label {
  font-family: var(--fc-mono);
  font-size: 12px;
  color: var(--fc-ink-soft);
  white-space: nowrap;
}

/* ---- Tools (shuffle / reset) --------------------------------- */
.fc-tools {
  display: inline-flex;
  gap: 6px;
}
.fc-tool {
  background: #fff;
  color: var(--fc-ink-soft);
  border: 1px solid var(--fc-rule);
  border-radius: 4px;
  padding: 5px 12px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  min-height: 32px;
}
.fc-tool:hover {
  background: var(--fc-bg-soft);
  color: var(--fc-primary);
  border-color: var(--fc-primary);
}

/* ---- Study mode: enlarge + center the active card ------------ */
/* Cards live in the article as siblings of the (empty) marker, so
   the active-card rules are scoped to .bd-article details. The JS
   sets display:none on the non-current cards inline. */
[data-flashcards] details { transition: none; }

body:has(.fc-mode-btn[data-mode="study"].on) .bd-article details {
  border: 1px solid var(--ece-rule, #d4dde8);
  border-radius: 8px;
  background: #fff;
  margin: 0;
  padding: 0;
}
body:has(.fc-mode-btn[data-mode="study"].on) .bd-article details summary {
  font-family: var(--ece-serif, Georgia, serif);
  font-size: 1.35em;
  font-weight: 600;
  color: var(--ece-navy-d, #0a223e);
  padding: 36px 28px;
  min-height: 32vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: default;
}
/* hide the list-mode +/- affordance while studying */
body:has(.fc-mode-btn[data-mode="study"].on) .bd-article details summary::before {
  content: none;
}
body:has(.fc-mode-btn[data-mode="study"].on) .bd-article details[open] summary {
  border-bottom: 1px solid var(--ece-rule, #d4dde8);
}
body:has(.fc-mode-btn[data-mode="study"].on) .bd-article details .card-answer {
  padding: 22px 28px;
  font-size: 1.05em;
}

/* ---- Study chrome (action row) ------------------------------- */
.fc-study-chrome { margin-top: 14px; }
.fc-study-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
}
.fc-study-actions button {
  background: #fff;
  color: var(--fc-ink);
  border: 1px solid var(--fc-rule);
  border-radius: 5px;
  padding: 8px 16px;
  font: inherit;
  font-family: var(--fc-sans);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  min-width: 88px;
}
.fc-study-actions button:hover { border-color: var(--fc-primary); }
.fc-reveal {
  background: var(--fc-primary) !important;
  color: #fff !important;
  border-color: var(--fc-primary) !important;
  font-weight: 600 !important;
}
.fc-know   { color: #047857 !important; border-color: #6ee7b7 !important; }
.fc-review { color: #b45309 !important; border-color: #fde68a !important; }

/* ---- Round-complete banner --------------------------------- */
.fc-done {
  text-align: center;
  padding: 32px 20px;
  margin: 0;
  border: 1px solid var(--fc-rule);
  border-radius: 8px;
  background: var(--fc-bg-soft);
}
.fc-done-msg {
  font-family: var(--fc-sans);
  font-size: 1.05em;
  color: var(--ece-navy-d, #0a223e);
  margin: 0 0 16px;
}
.fc-restart {
  background: var(--fc-primary);
  color: #fff;
  border: 1px solid var(--fc-primary);
  border-radius: 5px;
  padding: 8px 18px;
  font: inherit;
  font-family: var(--fc-sans);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
}