/* ParaPrep, Flashcards (Brief 13) page styles.
   Reuses the design tokens + base components from styles.css (.btn, .card,
   .view-title, .bar, .pill) and the app shell from dashboard.css. Only adds
   what the gate, deck picker, review card and grade controls need. Mirrors the
   gate / demo-bar conventions in checklist.css / notes.css. */

/* ---- Demo dev bar (only shown in demo mode) ---- */
.demo-bar {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  background: #eef5f4; border: 1px dashed var(--teal); color: var(--teal-dark);
  border-radius: var(--radius); padding: .6rem .9rem; margin-bottom: 1.5rem; font-size: .82rem;
}
.demo-bar strong { font-weight: 700; }
.demo-bar .spacer { margin-left: auto; }
.btn.tiny { padding: .35rem .7rem; font-size: .8rem; }

/* ---- Upgrade prompt (paid gate), mirrors checklist.css / notes.css ---- */
.gate {
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow);
}
.gate .lock { font-size: 2rem; }
.gate h2 { margin: .4rem 0 .5rem; font-size: 1.6rem; }
.gate p { margin: 0 0 1.2rem; opacity: .95; max-width: 60ch; }
.gate .gate-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.btn.on-teal { background: #fff; color: var(--teal-dark); }
.btn.on-teal:hover { background: #eef3ff; }
.gate .btn.ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); }
.gate .btn.ghost:hover { background: rgba(255,255,255,.12); }
.gate ul.preview { margin: 1.3rem 0 0; padding: 0 0 0 1.1rem; opacity: .95; font-size: .92rem; }
.gate ul.preview li { margin: .25rem 0; }

/* ---- Red-box-only filter toggle ---------------------------------------- */
.fc-redbox-toggle { display: inline-flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin: 0 0 1rem; font-size: .9rem; font-weight: 700; color: var(--ink); cursor: pointer; }
.fc-redbox-toggle input { width: 1.05rem; height: 1.05rem; accent-color: var(--red); cursor: pointer; }
.fc-redbox-toggle .fc-redbox-hint { font-weight: 400; color: var(--muted); font-size: .82rem; }

/* ---- Deck picker -------------------------------------------------------- */
.fc-decks { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px,1fr)); gap: 1rem; }
.deck-card {
  display: flex; flex-direction: column; gap: .4rem; text-align: left; width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.2rem; box-shadow: var(--shadow); cursor: pointer; font: inherit; color: inherit;
  transition: transform .12s ease, box-shadow .12s ease;
}
.deck-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,50,55,.12); }
.deck-card .deck-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.deck-card h3 { margin: 0; font-size: 1.05rem; }
.deck-card .deck-blurb { margin: 0; color: var(--muted); font-size: .88rem; flex: 1; }
.deck-card .deck-meta { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; flex-wrap: wrap; }

/* "All decks" card stands out as the recommended starting point. */
.deck-card.all-decks { background: linear-gradient(135deg, var(--teal), var(--teal-dark)); color: #fff; border-color: transparent; }
.deck-card.all-decks h3, .deck-card.all-decks .deck-blurb { color: #fff; }
.deck-card.all-decks .deck-blurb { opacity: .92; }

/* Due / total badges */
.due-badge {
  font-size: .72rem; font-weight: 700; padding: .2rem .55rem; border-radius: 999px;
  background: var(--amber-bg); color: var(--amber); border: 1px solid #f0e3c4; white-space: nowrap;
}
.due-badge.zero { background: var(--teal-soft); color: var(--teal-dark); border-color: transparent; }
.all-decks .due-badge { background: rgba(255,255,255,.18); color: #fff; border-color: transparent; }
.count-chip { font-size: .76rem; color: var(--muted); }
.all-decks .count-chip { color: rgba(255,255,255,.85); }

/* ---- Review session ----------------------------------------------------- */
.fc-session-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fc-session-head .fc-deck-name { font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em; margin: 0; flex: 1; }
.fc-counts { display: flex; gap: .5rem; flex-wrap: wrap; }
.fc-counts .count {
  font-size: .76rem; font-weight: 700; padding: .25rem .6rem; border-radius: 999px;
  background: var(--teal-soft); color: var(--teal-dark);
}
.fc-counts .count .n { font-size: .92rem; }
.fc-progress { margin-bottom: 1.4rem; }

/* The card itself */
.fc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); max-width: 640px; margin: 0 auto; overflow: hidden;
}
.fc-card .fc-deck-tag {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
  color: var(--teal-dark); background: var(--teal-soft); padding: .5rem 1.4rem;
}
.fc-face { padding: 1.6rem 1.4rem; }
.fc-face .fc-label {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted);
  margin: 0 0 .4rem;
}
.fc-front-text { font-size: 1.25rem; font-weight: 600; margin: 0; line-height: 1.45; }
.fc-back {
  margin-top: 1.2rem; padding-top: 1.2rem; border-top: 1px dashed var(--line);
}
.fc-back-text { font-size: 1.05rem; margin: 0; line-height: 1.55; }
/* Draft + citation footer on unverified, source-cited cards (e.g. medications) */
.fc-back .fc-draft {
  margin: .9rem 0 0; font-size: .8rem; font-weight: 700;
  color: var(--amber); background: var(--amber-bg);
  border: 1px solid var(--amber-border); border-radius: var(--radius);
  padding: .4rem .6rem;
}
.fc-back .fc-source { margin: .5rem 0 0; font-size: .76rem; color: var(--muted); line-height: 1.4; }
.fc-reveal-row { padding: 0 1.4rem 1.6rem; }
.fc-reveal-row .btn { width: 100%; }

/* Grade buttons */
.fc-grade-row {
  padding: 0 1.4rem 1.6rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .55rem;
}
.grade-btn {
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface);
  padding: .65rem .4rem; cursor: pointer; font: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .15rem;
  transition: transform .1s ease, background .1s ease, border-color .1s ease;
}
.grade-btn:hover { transform: translateY(-1px); }
.grade-btn .g-label { font-weight: 700; font-size: .92rem; }
.grade-btn .g-when { font-size: .68rem; color: var(--muted); }
.grade-btn[data-grade="again"] { border-color: #e3b4ad; }
.grade-btn[data-grade="again"]:hover { background: #fbe9e7; border-color: var(--red); }
.grade-btn[data-grade="hard"]:hover { background: var(--amber-bg); border-color: var(--amber); }
.grade-btn[data-grade="good"]:hover { background: var(--teal-soft); border-color: var(--teal); }
.grade-btn[data-grade="easy"] { border-color: #b8ddc7; }
.grade-btn[data-grade="easy"]:hover { background: #e6f5ec; border-color: var(--green); }

.fc-keyhint { text-align: center; color: var(--muted); font-size: .76rem; margin: 1rem 0 0; }
.fc-keyhint kbd {
  font-family: inherit; font-size: .72rem; background: var(--surface); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px; padding: .05rem .35rem; color: var(--ink);
}

/* Session toolbar (end early / back) */
.fc-session-actions { margin-top: 1.4rem; text-align: center; }

/* ---- "All caught up" / completion ---- */
.fc-done {
  text-align: center; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 2.2rem 1.6rem; box-shadow: var(--shadow); max-width: 560px; margin: 0 auto;
}
.fc-done .fc-done-icon { font-size: 2.4rem; }
.fc-done h3 { margin: .4rem 0 .5rem; font-size: 1.35rem; }
.fc-done p { margin: 0 auto 1.3rem; color: var(--muted); max-width: 46ch; }
.fc-done .fc-done-actions { display: flex; gap: .6rem; justify-content: center; flex-wrap: wrap; }
.fc-done .fc-summary { display: flex; gap: 1.4rem; justify-content: center; margin: 1.2rem 0; flex-wrap: wrap; }
.fc-done .fc-summary .stat { text-align: center; }
.fc-done .fc-summary .stat .n { display: block; font-size: 1.8rem; font-weight: 800; color: var(--teal-dark); line-height: 1; }
.fc-done .fc-summary .stat .lbl { font-size: .76rem; color: var(--muted); }

.fc-sample-note {
  margin-top: 1.8rem; padding: .9rem 1.1rem; font-size: .8rem; color: var(--muted);
  background: #f8fbfb; border: 1px solid var(--line); border-radius: var(--radius);
}

@media (max-width: 520px) {
  .fc-grade-row { grid-template-columns: repeat(2, 1fr); }
  .fc-session-head .fc-deck-name { flex: 1 1 100%; }
}