/* ── FLASHCARDS (v3.10 — hero + scope strip + system/category card redesign) ─── */
.fc-page { max-width: 820px; 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; }
}

/* ── FC HERO (v3.10) ─────────────────────────────────────────────────────────── */
.fc-hero { margin-bottom: var(--sp-5); }
.fc-hero-title {
  font-size: 20px; font-weight: 400; color: var(--text);
  letter-spacing: 0; line-height: 1.2;
  margin: 0 0 var(--sp-4);
}

/* ── FC SCOPE STRIP (v3.10) — matches home-scope-strip treatment ────────────── */
.fc-scope-strip {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 4px; margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: 1px solid var(--border);
}
.fc-scope-item {
  font-size: 11.5px; color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}
.fc-scope-item strong { font-weight: 700; color: var(--text-secondary); }
.fc-scope-item--due strong { color: var(--reasoning); }
.fc-scope-sep { color: var(--border); font-size: 13px; margin: 0 2px; }

/* ── 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 ────────────────────────────────── */
/* ── REGION ROW LIST — scripts-group-header style ────────────────────────────── */
.fc-region-list { display: flex; flex-direction: column; gap: var(--sp-2); }

.fc-region-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  background: var(--surface); border-radius: var(--radius-sm);
  border-left: 4px solid var(--border); border: 1px solid var(--border);
  border-left-width: 4px;
  box-shadow: var(--shadow-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;
}
.fc-region-row-icon { font-size: 17px; flex-shrink: 0; }
.fc-region-row-name {
  font-size: 14px; font-weight: 700; color: var(--text); flex: 1;
}
.fc-region-row-count {
  margin-left: auto; flex-shrink: 0;
  font-size: 11px; font-weight: 600; color: var(--text-muted);
  background: var(--bg); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 20px;
  font-variant-numeric: tabular-nums;
}
.fc-region-row-check {
  flex-shrink: 0; font-size: 11px; font-weight: 900;
}

/* Per-region idle colouring (left border + bg tint) */
.fc-region-row[data-colour="cervical"]  { border-left-color: var(--col-cervical);   background: color-mix(in srgb, var(--col-cervical-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="lumbar"]    { border-left-color: var(--col-lumbar);     background: color-mix(in srgb, var(--col-lumbar-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="shoulder"]  { border-left-color: var(--col-shoulder);   background: color-mix(in srgb, var(--col-shoulder-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="hip"]       { border-left-color: var(--col-hip);        background: color-mix(in srgb, var(--col-hip-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="knee"]      { border-left-color: var(--col-knee);       background: color-mix(in srgb, var(--col-knee-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="ankle"]     { border-left-color: var(--col-ankle);      background: color-mix(in srgb, var(--col-ankle-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="upper-limb"]{ border-left-color: var(--col-upper-limb); background: color-mix(in srgb, var(--col-upper-limb-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="systemic"]  { border-left-color: var(--col-systemic);   background: color-mix(in srgb, var(--col-systemic-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="neuro"]     { border-left-color: var(--col-neuro);      background: color-mix(in srgb, var(--col-neuro-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="medications"]{ border-left-color: var(--col-medications); background: color-mix(in srgb, var(--col-medications-bg) 60%, var(--surface)); }
.fc-region-row[data-colour="thoracic"]  { border-left-color: var(--col-thoracic);    background: color-mix(in srgb, var(--col-thoracic-bg)  60%, var(--surface)); }

/* Per-region label colour */
.fc-region-row[data-colour="cervical"]   .fc-region-row-name { color: var(--col-cervical); }
.fc-region-row[data-colour="lumbar"]     .fc-region-row-name { color: var(--col-lumbar); }
.fc-region-row[data-colour="shoulder"]   .fc-region-row-name { color: var(--col-shoulder); }
.fc-region-row[data-colour="hip"]        .fc-region-row-name { color: var(--col-hip); }
.fc-region-row[data-colour="knee"]       .fc-region-row-name { color: var(--col-knee); }
.fc-region-row[data-colour="ankle"]      .fc-region-row-name { color: var(--col-ankle); }
.fc-region-row[data-colour="upper-limb"] .fc-region-row-name { color: var(--col-upper-limb); }
.fc-region-row[data-colour="systemic"]   .fc-region-row-name { color: var(--col-systemic); }
.fc-region-row[data-colour="neuro"]      .fc-region-row-name { color: var(--col-neuro); }
.fc-region-row[data-colour="medications"].fc-region-row-name { color: var(--col-medications); }
.fc-region-row[data-colour="thoracic"]   .fc-region-row-name { color: var(--col-thoracic); }

/* Active: full saturation + glow ring matching region colour */
.fc-region-row[data-colour="cervical"].active   { background: var(--col-cervical-bg);   box-shadow: 0 0 0 2px var(--col-cervical); }
.fc-region-row[data-colour="lumbar"].active     { background: var(--col-lumbar-bg);     box-shadow: 0 0 0 2px var(--col-lumbar); }
.fc-region-row[data-colour="shoulder"].active   { background: var(--col-shoulder-bg);   box-shadow: 0 0 0 2px var(--col-shoulder); }
.fc-region-row[data-colour="hip"].active        { background: var(--col-hip-bg);        box-shadow: 0 0 0 2px var(--col-hip); }
.fc-region-row[data-colour="knee"].active       { background: var(--col-knee-bg);       box-shadow: 0 0 0 2px var(--col-knee); }
.fc-region-row[data-colour="ankle"].active      { background: var(--col-ankle-bg);      box-shadow: 0 0 0 2px var(--col-ankle); }
.fc-region-row[data-colour="upper-limb"].active { background: var(--col-upper-limb-bg); box-shadow: 0 0 0 2px var(--col-upper-limb); }
.fc-region-row[data-colour="systemic"].active   { background: var(--col-systemic-bg);   box-shadow: 0 0 0 2px var(--col-systemic); }
.fc-region-row[data-colour="neuro"].active      { background: var(--col-neuro-bg);      box-shadow: 0 0 0 2px var(--col-neuro); }
.fc-region-row[data-colour="medications"].active{ background: var(--col-medications-bg); box-shadow: 0 0 0 2px var(--col-medications); }
.fc-region-row[data-colour="thoracic"].active   { background: var(--col-thoracic-bg);   box-shadow: 0 0 0 2px var(--col-thoracic); }

.fc-region-row.active .fc-region-row-count { display: none; }
.fc-region-row.active .fc-region-row-check { display: inline; }

/* ── 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--special-tests  { background: #EFF6FF;           border-color: #BFDBFE; }
.fc-cat--management     { background: #F0FDFA;           border-color: #99F6E4; }
.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; }
.fc-cat--special-tests.active  { border-color: #1D4ED8;             box-shadow: 0 0 0 2px #1D4ED8; }
.fc-cat--management.active     { border-color: #0D9488;             box-shadow: 0 0 0 2px #0D9488; }

/* 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--special-tests.active  .fc-cat-label { color: #1D4ED8; }
.fc-cat--management.active     .fc-cat-label { color: #0D9488; }

.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;
}

/* Per-row due signal: makes rows actionable, not just descriptive */
.fc-due-mini {
  flex-shrink: 0;
  font-size: 10.5px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  color: var(--primary); background: var(--primary-bg);
  border-radius: 9px; padding: 1px 7px;
}
.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; }
.fc-cat--special-tests.active  .fc-cat-check { color: #1D4ED8; }
.fc-cat--management.active     .fc-cat-check { color: #0D9488; }

/* ── 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-3) var(--sp-5);
  font-size: var(--fs-body); font-weight: 600; cursor: pointer;
  min-height: 40px; 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); }

/* ── SYSTEM / DISCIPLINE CARDS (v3.10) — light card pattern matching More cards ─
   Replaces old dark gradient fc-system-btn panels.
   Old fc-system-btn/fc-system-btn--* rules kept below for safety (no longer rendered). */
.fc-system-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-2);
}
.fc-system-card {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: 14px var(--sp-3);
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer; text-align: left; min-height: 72px;
  transition: border-color 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  border-left-width: 3px;
}
.fc-system-card-body { flex: 1; min-width: 0; }
.fc-system-card-name {
  display: block; font-size: 13px; font-weight: 700;
  color: var(--text); line-height: 1.2; margin-bottom: 3px;
}
.fc-system-card-sub {
  display: block; font-size: 11px; color: var(--text-muted);
  line-height: 1.3; white-space: normal;
}
.fc-system-card-count {
  font-size: 12px; font-weight: 600; color: var(--text-muted);
  font-variant-numeric: tabular-nums; flex-shrink: 0;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 10px; padding: 2px 7px; white-space: nowrap;
}
.fc-system-card-check {
  font-size: 11px; font-weight: 900; flex-shrink: 0;
}

/* Region color accents per discipline — idle left border */
.fc-system-card[data-colour="medications"] {
  border-left-color: var(--col-medications);
  background: color-mix(in srgb, var(--col-medications-bg) 50%, var(--surface));
}
.fc-system-card[data-colour="neuro"] {
  border-left-color: var(--col-neuro);
  background: color-mix(in srgb, var(--col-neuro-bg) 50%, var(--surface));
}
.fc-system-card[data-colour="systemic"] {
  border-left-color: var(--col-systemic);
  background: color-mix(in srgb, var(--col-systemic-bg) 50%, var(--surface));
}
.fc-system-card[data-colour="pain-psych"] {
  border-left-color: var(--col-pain-psych);
  background: color-mix(in srgb, var(--col-pain-psych-bg) 50%, var(--surface));
}

/* Active state */
.fc-system-card[data-colour="medications"].active {
  border-color: var(--col-medications);
  box-shadow: 0 0 0 2px var(--col-medications);
  background: var(--col-medications-bg);
}
.fc-system-card[data-colour="medications"].active .fc-system-card-name { color: var(--col-medications); }
.fc-system-card[data-colour="neuro"].active {
  border-color: var(--col-neuro);
  box-shadow: 0 0 0 2px var(--col-neuro);
  background: var(--col-neuro-bg);
}
.fc-system-card[data-colour="neuro"].active .fc-system-card-name { color: var(--col-neuro); }
.fc-system-card[data-colour="systemic"].active {
  border-color: var(--col-systemic);
  box-shadow: 0 0 0 2px var(--col-systemic);
  background: var(--col-systemic-bg);
}
.fc-system-card[data-colour="systemic"].active .fc-system-card-name { color: var(--col-systemic); }
.fc-system-card[data-colour="pain-psych"].active {
  border-color: var(--col-pain-psych);
  box-shadow: 0 0 0 2px var(--col-pain-psych);
  background: var(--col-pain-psych-bg);
}
.fc-system-card[data-colour="pain-psych"].active .fc-system-card-name { color: var(--col-pain-psych); }

/* Hover */
.fc-system-card:hover { border-color: var(--primary); box-shadow: var(--shadow-sm); }
.fc-system-card.active:hover { box-shadow: 0 0 0 2px currentColor; }

/* Mobile: 1-col stack */
@media (max-width: 767px) {
  .fc-system-card-grid { grid-template-columns: 1fr; }
  .fc-system-card { min-height: 60px; padding: 11px var(--sp-3); }
  .fc-system-card-name { font-size: 13px; }
  .fc-system-card-sub  { font-size: 10.5px; }
}

/* ── CATEGORY LIST — chevron arrow (v3.10) ───────────────────────────────────── */
.fc-cat-row {
  /* Override grid to add arrow column */
  grid-template-columns: 32px 1fr auto auto auto;
}
.fc-cat-arrow {
  font-size: 20px; color: var(--text-muted); font-weight: 300;
  line-height: 1; flex-shrink: 0;
  transition: transform var(--transition), color var(--transition);
}
.fc-cat-row:hover .fc-cat-arrow { transform: translateX(2px); color: var(--text-secondary); }
/* Hide arrow on active — check takes its place */
.fc-cat-row.active .fc-cat-arrow { display: none; }

/* ── 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; }
.fc-card:has(.fc-badge--special-tests)::before  { background: #2563EB; opacity: 0.7; }
.fc-card:has(.fc-badge--management)::before     { background: #0D9488; 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--special-tests  { background: #DBEAFE;           color: #1E40AF; }
.fc-badge--management     { background: #CCFBF1;           color: #0D9488; }
.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.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 rows: tighter gap on mobile */
  .fc-region-list { gap: var(--sp-1); }
  .fc-region-row  { padding: 8px 12px; }

  /* 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 rows: ensure tap target height */
  .fc-region-row  { min-height: 44px; }
}

/* ── 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); }



/* ════════════════════════════════════════════════════════════════════════════
   v2.80 : filter alignment pass (colour dots, group subheads, mobile density)
   ════════════════════════════════════════════════════════════════════════════ */
.fc-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  background: var(--border);
}
.fc-dot--cervical    { background: var(--col-cervical); }
.fc-dot--thoracic    { background: var(--col-thoracic); }
.fc-dot--lumbar      { background: var(--col-lumbar); }
.fc-dot--shoulder    { background: var(--col-shoulder); }
.fc-dot--upper-limb  { background: var(--col-upper-limb); }
.fc-dot--hip         { background: var(--col-hip); }
.fc-dot--knee        { background: var(--col-knee); }
.fc-dot--ankle       { background: var(--col-ankle); }
.fc-dot--neuro       { background: var(--col-neuro); }
.fc-dot--systemic    { background: var(--col-systemic); }
.fc-dot--medications { background: var(--col-medications); }

.fc-region-subhead {
  font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--text-muted);
  margin: 10px 2px 4px;
}
.fc-region-list .fc-region-subhead:first-child { margin-top: 0; }

@media (max-width: 480px) {
  /* Category descriptions live on desktop; rows compact to one line on mobile */
  .fc-cat-desc { display: none; }
  .fc-cat-row { min-height: 42px; }
}