/* ── FLASHCARDS (v2.68 — due block quieter/smaller) ─────────────────────────── */
.fc-page { max-width: 560px; margin: 0 auto; }

@media (max-width: 767px) {
  /* Flashcard page: reduce top padding so the study button appears high on screen */
  .fc-page.page { padding-top: 6px; }
}

/* ── FILTER SCREEN (v2.55) ───────────────────────────────────────────────────── */
.fc-filter-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-5);
}
.fc-total-chip { display: none; }
.fc-filter-subtitle {
  font-size: var(--fs-caption); color: var(--text-muted);
  margin: 3px 0 0; line-height: 1.4;
}

/* ── Section shell ───────────────────────────────────────────────────────────── */
.fc-filter-section        { margin-bottom: var(--sp-6); }
.fc-filter-section--cats  { margin-bottom: var(--sp-5); }
.fc-filter-section-hd {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.fc-filter-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted); margin: 0;
}
.fc-section-clear {
  background: none; border: none; font-size: var(--fs-caption);
  color: var(--primary); cursor: pointer; padding: 0; font-weight: 600;
}
.fc-section-clear:hover { text-decoration: underline; }

/* ── REGION GROUPS — anatomical sub-sections ────────────────────────────────── */
.fc-region-group { margin-bottom: var(--sp-3); }
.fc-region-group:last-child { margin-bottom: 0; }
.fc-region-group-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--sp-2) 0;
}

/* ── REGION GRID — compact pills with count ──────────────────────────────────── */
.fc-region-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: var(--sp-2);
}
.fc-region-btn {
  position: relative; display: flex; align-items: center;
  justify-content: space-between; gap: var(--sp-2);
  padding: 7px var(--sp-3);
  background: var(--surface); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent; text-align: left;
  min-height: 38px;
}
.fc-region-btn:hover {
  border-color: var(--primary); background: var(--primary-bg);
}
.fc-region-btn.active {
  border-color: var(--primary); background: var(--primary-bg);
  box-shadow: 0 0 0 2px var(--primary);
}
.fc-region-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  line-height: 1.2; flex: 1;
}
.fc-region-btn.active .fc-region-name { color: var(--primary); }
.fc-region-count {
  font-size: 10.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
}
.fc-region-check {
  position: absolute; top: 50%; right: 7px; transform: translateY(-50%);
  font-size: 10px; font-weight: 900; color: var(--primary);
}
/* Hide count on active pills — check mark is the selection signal; avoids overlap */
.fc-region-btn.active .fc-region-count { visibility: hidden; }

/* Region colour accents on active state */
.fc-region-btn[data-colour="cervical"].active  { border-color: var(--col-cervical);  background: var(--col-cervical-bg);  box-shadow: 0 0 0 2px var(--col-cervical); }
.fc-region-btn[data-colour="cervical"].active .fc-region-name  { color: var(--col-cervical); }
.fc-region-btn[data-colour="shoulder"].active  { border-color: var(--col-shoulder);  background: var(--col-shoulder-bg);  box-shadow: 0 0 0 2px var(--col-shoulder); }
.fc-region-btn[data-colour="shoulder"].active .fc-region-name  { color: var(--col-shoulder); }
.fc-region-btn[data-colour="lumbar"].active    { border-color: var(--col-lumbar);    background: var(--col-lumbar-bg);    box-shadow: 0 0 0 2px var(--col-lumbar); }
.fc-region-btn[data-colour="lumbar"].active .fc-region-name    { color: var(--col-lumbar); }
.fc-region-btn[data-colour="hip"].active       { border-color: var(--col-hip);       background: var(--col-hip-bg);       box-shadow: 0 0 0 2px var(--col-hip); }
.fc-region-btn[data-colour="hip"].active .fc-region-name       { color: var(--col-hip); }
.fc-region-btn[data-colour="knee"].active      { border-color: var(--col-knee);      background: var(--col-knee-bg);      box-shadow: 0 0 0 2px var(--col-knee); }
.fc-region-btn[data-colour="knee"].active .fc-region-name      { color: var(--col-knee); }
.fc-region-btn[data-colour="neuro"].active       { border-color: var(--col-neuro);       background: var(--col-neuro-bg);       box-shadow: 0 0 0 2px var(--col-neuro); }
.fc-region-btn[data-colour="neuro"].active .fc-region-name     { color: var(--col-neuro); }
.fc-region-btn[data-colour="ankle"].active      { border-color: var(--col-ankle);      background: var(--col-ankle-bg);      box-shadow: 0 0 0 2px var(--col-ankle); }
.fc-region-btn[data-colour="ankle"].active .fc-region-name     { color: var(--col-ankle); }
.fc-region-btn[data-colour="upper-limb"].active { border-color: var(--col-upper-limb); background: var(--col-upper-limb-bg); box-shadow: 0 0 0 2px var(--col-upper-limb); }
.fc-region-btn[data-colour="upper-limb"].active .fc-region-name { color: var(--col-upper-limb); }
.fc-region-btn[data-colour="systemic"].active   { border-color: var(--col-systemic);   background: var(--col-systemic-bg);   box-shadow: 0 0 0 2px var(--col-systemic); }
.fc-region-btn[data-colour="systemic"].active .fc-region-name  { color: var(--col-systemic); }
.fc-region-btn[data-colour="medications"].active { border-color: var(--col-medications); background: var(--col-medications-bg); box-shadow: 0 0 0 2px var(--col-medications); }
.fc-region-btn[data-colour="medications"].active .fc-region-name { color: var(--col-medications); }

/* ── SYSTEM / DISCIPLINE GROUP — gradient panels ────────────────────────────── */
.fc-system-group {
  margin-top: var(--sp-4);
  padding-top: var(--sp-4);
  border-top: 1px dashed var(--border);
}
.fc-system-label {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--text-muted);
  margin: 0 0 var(--sp-3) 0;
}
.fc-system-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}

.fc-system-btn {
  position: relative; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: space-between;
  padding: var(--sp-4) var(--sp-3) var(--sp-3);
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; min-height: 70px;
  transition: filter 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

/* Gradient backgrounds per discipline */
.fc-system-btn--neuro {
  background: linear-gradient(135deg, #1E3A8A 0%, #1E40AF 50%, #3B82F6 100%);
  border-color: #1E3A8A;
}
.fc-system-btn--systemic {
  background: linear-gradient(135deg, #4C1D95 0%, #7C3AED 50%, #A78BFA 100%);
  border-color: #4C1D95;
}
.fc-system-btn--medications {
  background: linear-gradient(135deg, #1F2937 0%, #374151 50%, #6B7280 100%);
  border-color: #1F2937;
}

.fc-system-btn .fc-system-name {
  font-size: 13px; font-weight: 700; color: #fff;
  line-height: 1.2; letter-spacing: -0.01em;
}
.fc-system-btn .fc-system-count {
  font-size: 11px; color: rgba(255,255,255,0.65);
  font-variant-numeric: tabular-nums; margin-top: auto; padding-top: var(--sp-2);
}
.fc-system-btn .fc-system-check {
  position: absolute; top: 8px; right: 8px;
  font-size: 12px; font-weight: 900; color: #fff;
  background: rgba(255,255,255,0.2); border-radius: 50%;
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
}

/* Hover */
.fc-system-btn:hover { filter: brightness(1.12); }

/* Active = glow ring */
.fc-system-btn--neuro.active       { box-shadow: 0 0 0 2.5px #93C5FD, 0 4px 16px rgba(30,64,175,0.4); border-color: #93C5FD; }
.fc-system-btn--systemic.active    { box-shadow: 0 0 0 2.5px #C4B5FD, 0 4px 16px rgba(124,58,237,0.4); border-color: #C4B5FD; }
.fc-system-btn--medications.active { box-shadow: 0 0 0 2.5px #9CA3AF, 0 4px 16px rgba(55,65,81,0.4); border-color: #9CA3AF; }

/* ── CATEGORY LIST — full-width rows with icon + description + count ─────────── */
.fc-cat-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.fc-cat-row {
  display: grid;
  grid-template-columns: 32px 1fr auto auto;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; width: 100%;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Category colour schemes — idle state (tinted bg) */
.fc-cat--red-flag     { background: var(--tier1-bg);  border-color: #FECACA; }
.fc-cat--high-spec    { background: #FEF9EE;           border-color: #FDE68A; }
.fc-cat--differential { background: #FFFBEB;           border-color: #FDE68A; }
.fc-cat--history      { background: #F0FDF4;           border-color: #BBF7D0; }
.fc-cat--triage       { background: #FAF5FF;           border-color: #E9D5FF; }
.fc-cat--default      { background: var(--surface);    border-color: var(--border); }

/* Active = stronger border + ring */
.fc-cat-row.active { box-shadow: 0 0 0 2px currentColor; }
.fc-cat--red-flag.active     { border-color: var(--tier1-color);  box-shadow: 0 0 0 2px var(--tier1-color); }
.fc-cat--high-spec.active    { border-color: #B45309;             box-shadow: 0 0 0 2px #B45309; }
.fc-cat--differential.active { border-color: #B45309;             box-shadow: 0 0 0 2px #B45309; }
.fc-cat--history.active      { border-color: #15803D;             box-shadow: 0 0 0 2px #15803D; }
.fc-cat--triage.active       { border-color: #7C3AED;             box-shadow: 0 0 0 2px #7C3AED; }

/* Hover */
.fc-cat-row:hover { filter: brightness(0.97); }

.fc-cat-icon {
  font-size: 1.25rem; line-height: 1; display: flex;
  align-items: center; justify-content: center;
}
.fc-cat-body   { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.fc-cat-label  { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.2; }
.fc-cat-desc   { font-size: 11.5px; color: var(--text-muted); line-height: 1.3; }

/* Active label colours */
.fc-cat--red-flag.active     .fc-cat-label { color: var(--tier1-color); }
.fc-cat--high-spec.active    .fc-cat-label { color: #92400E; }
.fc-cat--differential.active .fc-cat-label { color: #B45309; }
.fc-cat--history.active      .fc-cat-label { color: #15803D; }
.fc-cat--triage.active       .fc-cat-label { color: #7C3AED; }

.fc-cat-count {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  min-width: 28px; text-align: right;
}
.fc-cat-check {
  font-size: 12px; font-weight: 900; color: var(--text-secondary);
  width: 16px; text-align: center;
}
.fc-cat--red-flag.active     .fc-cat-check { color: var(--tier1-color); }
.fc-cat--high-spec.active    .fc-cat-check { color: #92400E; }
.fc-cat--differential.active .fc-cat-check { color: #B45309; }
.fc-cat--history.active      .fc-cat-check { color: #15803D; }
.fc-cat--triage.active       .fc-cat-check { color: #7C3AED; }

/* ── Footer ──────────────────────────────────────────────────────────────────── */
.fc-filter-footer { display: flex; flex-direction: column; gap: var(--sp-3); padding-top: var(--sp-3); }

/* Empty state */
.fc-empty-state {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-2);
  padding: var(--sp-4); background: var(--bg); border-radius: var(--radius-sm);
  border: 1px solid var(--border); text-align: center;
}
.fc-empty-icon { font-size: 1.5rem; }
.fc-empty-msg  { font-size: var(--fs-caption); color: var(--text-muted); margin: 0; }
.fc-clear-prominent {
  background: none; border: 1.5px solid var(--border); border-radius: 20px;
  padding: 5px 14px; font-size: var(--fs-caption); font-weight: 600;
  color: var(--text-secondary); cursor: pointer; margin-top: var(--sp-1);
  transition: border-color var(--transition), color var(--transition);
}
.fc-clear-prominent:hover { border-color: var(--primary); color: var(--primary); }

/* Study button — top position gets bottom margin to separate from filters */
.fc-start-btn--top { margin-bottom: var(--sp-4); }

/* Study button */
.fc-start-btn {
  display: block; width: 100%; text-align: center;
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: var(--sp-4) var(--sp-5);
  font-size: var(--fs-body); font-weight: 700; cursor: pointer;
  min-height: 52px; transition: background var(--transition);
  letter-spacing: 0.01em;
}
.fc-start-btn:hover:not([disabled]) { background: var(--primary-dark); }
.fc-start-btn--disabled {
  background: var(--bg); color: var(--text-muted);
  border: 1.5px solid var(--border); cursor: default;
}
@keyframes fc-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.fc-start-btn.shake { animation: fc-shake 0.32s ease; }

/* Clear all (footer) */
.fc-clear-btn {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-caption); cursor: pointer; text-align: center;
  padding: var(--sp-1) 0; min-height: 36px; font-weight: 500;
}
.fc-clear-btn:hover { color: var(--primary); }

/* ── TASK A — DUE-CARD PRIMARY ACTION BLOCK ─────────────────────────────────── */
/* v3.7: appears above filter controls; gives SR state an immediate action path   */
.fc-due-block {
  margin-bottom: var(--sp-5);
  padding: var(--sp-3) var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
}
.fc-due-block__body {
  display: flex; align-items: baseline; gap: var(--sp-2);
}
.fc-due-count {
  font-size: 1.1rem; font-weight: 700; color: var(--reasoning);
  line-height: 1; font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.fc-due-label {
  font-size: var(--fs-caption); color: var(--text-muted); font-weight: 500;
}
.fc-due-btn {
  flex-shrink: 0;
  background: none; color: var(--reasoning);
  border: 1.5px solid var(--reasoning); border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-caption); font-weight: 700; cursor: pointer;
  white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.fc-due-btn:hover { background: var(--primary-bg); }
.fc-due-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Zero-due state — calm confirmation, not a dead end */
.fc-due-block--clear {
  background: var(--surface); border-color: var(--border);
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-1);
}
.fc-due-clear-msg {
  font-size: var(--fs-body); font-weight: 600; color: var(--text-secondary);
  margin: 0; line-height: 1.4;
}
.fc-due-clear-sub {
  font-size: var(--fs-caption); color: var(--text-muted); margin: 0; line-height: 1.4;
}

/* ── TASK B — SESSION BAR (replaces breadcrumb + fc-header) ─────────────────── */
/* v3.7: compact single row → back link | context label | progress counter        */
.fc-session-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  margin-bottom: var(--sp-3);
  min-height: 36px;
}
.fc-session-context {
  flex: 1; font-size: var(--fs-caption); font-weight: 600;
  color: var(--text-secondary); text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Back link — inline, no underline by default (less noise) */
.fc-back-link {
  background: none; border: none; color: var(--text-muted);
  font-size: var(--fs-caption); cursor: pointer; padding: 0;
  white-space: nowrap; flex-shrink: 0; font-weight: 600;
  line-height: 1; align-self: center;
  transition: color var(--transition);
}
.fc-back-link:hover { color: var(--primary); }
.fc-back-link:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Progress counter (pill) */
.fc-progress {
  font-size: var(--fs-caption); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 20px; padding: 3px 10px; white-space: nowrap;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
}

/* Ghost button on done screen */
.fc-btn-ghost {
  display: block; text-align: center; text-decoration: none;
  background: none; color: var(--text-muted); border: none;
  font-size: var(--fs-caption); cursor: pointer; padding: var(--sp-2) 0;
}
.fc-btn-ghost:hover { color: var(--text-secondary); }

/* fc-header kept for any legacy references but no longer rendered in study session */
.fc-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--sp-4);
}
.fc-title { font-size: 1.15rem; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* v2.51 / v2.54 — progress bar (slimmer, reasoning-blue fill) */
.fc-progress-bar-wrap {
  height: 5px; border-radius: 3px;
  background: var(--border);
  margin-bottom: var(--sp-5); overflow: hidden;
}
.fc-progress-bar-fill {
  height: 100%; border-radius: 3px;
  background: var(--reasoning);
  transition: width 0.35s cubic-bezier(.4,0,.2,1);
}

/* ── v2.54 — STUDY CARD: dedicated focused-learning surface ─────────────────── */
.fc-card {
  position: relative;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--sp-8) var(--sp-6) var(--sp-6);
  box-shadow: var(--shadow-md); display: flex; flex-direction: column;
  gap: var(--sp-5); min-height: 320px;
}
/* Thin reasoning rail at the top — signals "study surface", not generic card */
.fc-card::before {
  content: ""; position: absolute; inset: 0 0 auto 0;
  height: 3px; border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--reasoning);
}
/* Category-specific top rails — signals card type at a glance */
.fc-card:has(.fc-badge--red-flag)::before    { background: var(--risk); }
.fc-card:has(.fc-badge--high-spec)::before   { background: #B45309; }   /* amber — "lock this pattern in" */
.fc-card:has(.fc-badge--differential)::before { background: #92400E; opacity: 0.5; }
.fc-card:has(.fc-badge--triage)::before      { background: #6B21A8; opacity: 0.6; }

/* Pathognomonic card: subtle amber background tint to reinforce memorisation priority */
.fc-card:has(.fc-badge--high-spec) {
  background: #FFFBF0;
  border-color: #FDE68A;
}

.fc-card__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }

.fc-badge {
  font-size: 10.5px; font-weight: 700; padding: 3px 8px; border-radius: 4px;
  text-transform: uppercase; letter-spacing: 0.05em; flex-shrink: 0;
}
.fc-badge--red-flag     { background: var(--tier1-bg);  color: var(--tier1-color); }
.fc-badge--history      { background: #E8F5E9;           color: #2E7D32; }
.fc-badge--high-spec    { background: #FEF3C7;           color: #92400E; }   /* amber — distinct from reasoning blue */
.fc-badge--differential { background: #FFF8E1;           color: #B45309; }
.fc-badge--triage       { background: #F3E8FF;           color: #6B21A8; }
.fc-badge--default      { background: var(--bg);         color: var(--text-muted); }

.fc-cond-chip {
  font-size: var(--fs-caption); font-weight: 500;
  background: var(--col-shoulder-bg); color: var(--col-shoulder);
  border-radius: 20px; padding: 3px 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px;
}
/* Region-aware chip colours */
.fc-cond-chip--cervical    { background: var(--col-cervical-bg);    color: var(--col-cervical); }
.fc-cond-chip--shoulder    { background: var(--col-shoulder-bg);    color: var(--col-shoulder); }
.fc-cond-chip--lumbar      { background: var(--col-lumbar-bg);      color: var(--col-lumbar); }
.fc-cond-chip--hip         { background: var(--col-hip-bg);         color: var(--col-hip); }
.fc-cond-chip--knee        { background: var(--col-knee-bg);        color: var(--col-knee); }
.fc-cond-chip--neuro       { background: var(--col-neuro-bg);       color: var(--col-neuro); }
.fc-cond-chip--ankle_foot  { background: var(--col-ankle-bg);       color: var(--col-ankle); }
.fc-cond-chip--upper_limb  { background: var(--col-upper-limb-bg);  color: var(--col-upper-limb); }
.fc-cond-chip--systemic    { background: var(--col-systemic-bg);    color: var(--col-systemic); }
.fc-cond-chip--medications { background: var(--col-medications-bg); color: var(--col-medications); }

/* MCQ tag */
.fc-mcq-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.08em;
  background: var(--col-cervical-bg); color: var(--col-cervical);
  border-radius: 4px; padding: 2px 6px; text-transform: uppercase;
}

/* MCQ options */
.fc-mcq-options {
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.fc-mcq-btn {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--bg); border: 1.5px solid var(--border);
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body); cursor: pointer; text-align: left;
  min-height: var(--tap-min); transition: border-color var(--transition), background var(--transition);
  width: 100%;
}
.fc-mcq-btn:hover:not(:disabled) { border-color: var(--primary); background: var(--primary-bg); }
.fc-mcq-btn:disabled { cursor: default; }
.fc-mcq-btn--correct { background: #E8F5E9 !important; border-color: #2E7D32 !important; color: #1B5E20; }
.fc-mcq-btn--wrong   { background: var(--tier1-bg) !important; border-color: var(--tier1-color) !important; color: var(--tier1-color); }
.fc-mcq-label {
  font-weight: 700; font-size: 13px; min-width: 20px;
  color: var(--text-muted);
}
.fc-mcq-btn--correct .fc-mcq-label { color: #2E7D32; }
.fc-mcq-btn--wrong   .fc-mcq-label { color: var(--tier1-color); }

/* v2.54 — question is the primary element: larger, airier, clearly dominant */
.fc-card__question {
  font-size: 1.25rem; font-weight: 600; color: var(--text);
  line-height: 1.6; letter-spacing: -0.005em; flex: 1;
  padding-bottom: var(--sp-2);
}

.fc-reveal-btn {
  align-self: stretch; background: var(--reasoning); color: #fff;
  border: none; border-radius: var(--radius-sm);
  padding: var(--sp-4) var(--sp-5); font-size: var(--fs-body); font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer; min-height: 50px; transition: background var(--transition);
}
.fc-reveal-btn:hover { background: var(--primary-dark); }
.fc-reveal-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* v2.51 — keyboard shortcut hint (desktop only) */
.fc-kbd-hint {
  font-size: 11px; color: var(--text-muted);
  margin-top: var(--sp-2); display: flex; gap: 10px; flex-wrap: wrap;
}
.fc-kbd-hint kbd {
  display: inline-block; padding: 1px 5px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 3px; font-family: inherit; font-size: 10px;
  color: var(--text-muted); line-height: 1.5;
}
@media (max-width: 767px) { .fc-kbd-hint { display: none; } }

/* v2.54.1 — phones: tighter padding + size-to-content (drop the 280px floor that wasted space) */
@media (max-width: 767px) {
  .fc-card {
    padding: var(--sp-5) var(--sp-4) var(--sp-4);  /* 20 top (clears rail) / 16 sides / 16 bottom */
    min-height: 0;                                  /* size to content — no forced empty space */
    gap: var(--sp-4);
  }
  .fc-card__question { font-size: 1.1rem; }
  .fc-rating-row { gap: 6px; }
  .fc-rating-btn { font-size: 12.5px; padding: var(--sp-3) 4px; }
}

/* ── v3.8 — MOBILE LAYOUT POLISH (≤767px) ───────────────────────────────────── */
/* Landing + study view spacing, tap targets, grid stability, answer readability  */
@media (max-width: 767px) {

  /* Filter header: minimal gap to study button */
  .fc-filter-header  { margin-bottom: var(--sp-2); }         /* 20→8px */
  /* Title: smaller on mobile */
  .fc-title          { font-size: 13px; }

  /* Study button top: tight gap to filters below */
  .fc-start-btn--top { margin-bottom: var(--sp-3); }         /* 20→12px */

  /* Section spacing: compact rhythm */
  .fc-filter-section       { margin-bottom: var(--sp-3); }   /* 24→12px */
  .fc-filter-section--cats { margin-bottom: var(--sp-2); }   /* 20→8px */
  .fc-filter-section-hd    { margin-bottom: 4px; }           /* 12→4px: heading glued to group */

  /* Region sub-groups: tighter stacking */
  .fc-region-group          { margin-bottom: var(--sp-2); }  /* 12→8px */
  .fc-region-group-label    { margin-bottom: 4px; }          /* 8→4px */

  /* Region pills: reduce padding, keep 44px tap target via min-height */
  .fc-region-btn  { padding: 5px var(--sp-2); min-height: 44px; }

  /* System group separator: tighter */
  .fc-system-group { margin-top: var(--sp-2); padding-top: var(--sp-2); }
  .fc-system-label { margin-bottom: var(--sp-2); }

  /* System discipline panels: compact height + smaller type */
  .fc-system-btn              { min-height: 52px; padding: var(--sp-2) var(--sp-2) var(--sp-1); }
  .fc-system-btn .fc-system-name  { font-size: 11.5px; }
  .fc-system-btn .fc-system-count { font-size: 10px; padding-top: 2px; }
  .fc-system-btn .fc-system-check { width: 18px; height: 18px; top: 6px; right: 6px; font-size: 10px; }

  /* Category rows: 48px tap target; hide description */
  .fc-cat-list { gap: var(--sp-1); }                         /* 8→4px between rows */
  .fc-cat-row  { min-height: 48px; padding: var(--sp-2) var(--sp-3); }
  .fc-cat-desc { display: none; }
  .fc-cat-label { font-size: 13px; }

  /* Due block at bottom: already compact in new row layout */
  .fc-due-block        { padding: var(--sp-2) var(--sp-3); }
  .fc-due-block--clear { padding: var(--sp-2) var(--sp-3); }

  /* ── Study session ──────────────────────────────────────────────────────── */
  .fc-session-bar { gap: var(--sp-2); margin-bottom: var(--sp-2); }
  .fc-back-link   { min-height: 44px; display: inline-flex; align-items: center; }
  .fc-progress-bar-wrap { margin-bottom: var(--sp-3); }
  .fc-answer__text      { padding: var(--sp-3) var(--sp-3); }
}

/* ── v3.8 — EXTRA NARROW ≤480px (stable 2-column region grid) ──────────────── */
@media (max-width: 480px) {
  /* Region grid: 2 even columns instead of unpredictable auto-fill count */
  .fc-region-grid { grid-template-columns: repeat(2, 1fr); }
  .fc-region-btn  { min-height: 44px; }   /* Apple HIG tap target */
}

/* ── v3.8 — VERY NARROW ≤400px (iPhone SE) ──────────────────────────────────── */
@media (max-width: 400px) {
  /* Category label: drop 0.5px to avoid wrapping on very short viewport */
  .fc-cat-label        { font-size: 12.5px; }
  /* System name: extra safety for 'Medications' at ~107px column width */
  .fc-system-btn .fc-system-name { font-size: 11px; letter-spacing: -0.02em; }
}

/* v2.54 — answer "emerges": intentional reveal with a divider + soft entrance */
/* v2.541 — [hidden] must win: an explicit display overrides the hidden attribute,
   which was leaving the answer permanently visible. Keep this rule first. */
.fc-answer[hidden] { display: none !important; }
.fc-answer {
  display: flex; flex-direction: column; gap: var(--sp-4);
  border-top: 1px solid var(--border); padding-top: var(--sp-5);
  animation: fc-answer-in 0.28s cubic-bezier(.4,0,.2,1);
}
@keyframes fc-answer-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fc-answer__text {
  font-size: 1.0625rem; color: var(--text); line-height: 1.7;
  padding: var(--sp-4) var(--sp-5); background: var(--surface-sunken);
  border-radius: var(--radius-sm); border-left: 4px solid var(--reasoning);
}
/* Pathognomonic answer: amber left-bar to reinforce "lock this in" signal */
.fc-card:has(.fc-badge--high-spec) .fc-answer__text {
  border-left-color: #B45309;
  background: #FFFDF5;
}
/* Red-flag answer: risk red left-bar */
.fc-card:has(.fc-badge--red-flag) .fc-answer__text {
  border-left-color: var(--risk);
}
.fc-answer__hint {
  font-size: var(--fs-caption); color: var(--text-muted);
  font-style: italic; padding-left: var(--sp-2); margin-top: calc(var(--sp-1) * -1);
}

/* v2.54 — rating row: semantic colour-coding (Again=risk, Hard=caution, Good=reasoning) */
.fc-rating-row {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-2); margin-top: var(--sp-1);
}
.fc-rating-btn {
  border: 1.5px solid transparent; border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-2);
  font-size: 13px; font-weight: 700; cursor: pointer; min-height: 48px;
  letter-spacing: 0.01em;
  transition: filter var(--transition), transform var(--transition);
}
.fc-rating-btn:hover { filter: brightness(0.96); transform: translateY(-1px); }
.fc-rating-btn:active { transform: translateY(0); }
.fc-rating-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
.fc-again { background: var(--risk-bg);    color: var(--risk);      border-color: rgba(183,28,28,0.18); }
.fc-hard  { background: var(--caution-bg); color: var(--caution);   border-color: rgba(146,96,10,0.18); }
.fc-good  { background: var(--primary-bg); color: var(--reasoning); border-color: rgba(15,94,168,0.18); }
.fc-easy  { background: #E8F5E9;           color: #2E7D32;          border-color: rgba(46,125,50,0.18); }

.fc-done {
  text-align: center; padding: var(--sp-8) var(--sp-4);
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-5);
}
.fc-done__icon {
  font-size: 2rem; background: #E8F5E9; color: #2E7D32;
  border-radius: 50%; width: 72px; height: 72px;
  display: flex; align-items: center; justify-content: center;
}
.fc-done__title { font-size: 1.4rem; font-weight: 700; color: var(--text); }
.fc-done__sub   { font-size: var(--fs-body); color: var(--text-secondary); }
.fc-done__actions {
  display: flex; flex-direction: column; gap: var(--sp-3);
  width: 100%; max-width: 280px;
}
.fc-btn-primary {
  display: block; text-align: center; text-decoration: none;
  background: var(--primary); color: #fff; border: none;
  border-radius: var(--radius-sm); padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  min-height: var(--tap-min); line-height: calc(var(--tap-min) - 2*var(--sp-3));
  transition: background var(--transition);
}
.fc-btn-primary:hover  { background: var(--primary-dark); color: #fff; }
.fc-btn-secondary {
  display: block; text-align: center;
  background: var(--surface); color: var(--primary);
  border: 1.5px solid var(--primary); border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  min-height: var(--tap-min); transition: background var(--transition);
  width: 100%;
}
.fc-btn-secondary:hover { background: var(--primary-bg); }