/* ============================================================================
   REVISIONIZER — READABILITY PASS
   Loaded last, so it wins the cascade.

   Problem this fixes:
     - study content sat at 13px, with labels down to 7-9px (unreadable)
     - reading text was set in serif (DM Serif Display / Crimson Pro) and
       monospace (DM Mono / Share Tech Mono), which is tiring for prose
     - tight containers clipped longer case names and question text

   Approach:
     - all reading content -> clean sans-serif (DM Sans + system fallbacks)
     - a proper type scale with a 12px floor and 16px body copy
     - containers allowed to grow so nothing is cut off
     - the arcade games keep their retro pixel identity on purpose
   ========================================================================== */

:root{
  --rv-sans:'DM Sans',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---------------------------------------------------------------------------
   1. SANS-SERIF FOR ALL READING CONTENT
   Scoped to the study tabs so game HUDs are untouched.
   -------------------------------------------------------------------------*/
#page-flashcards, #page-summaries, #page-skeleton,
#page-caserecall, #page-practice, #page-exammode,
#page-flashcards *, #page-summaries *, #page-skeleton *,
#page-caserecall *, #page-practice *, #page-exammode *{
  font-family:var(--rv-sans) !important;
}

/* Prose classes anywhere in the app (some render outside those wrappers) */
.sum-text, .sum-block-title, .q-text, .q-display-text, .q-display-year,
.card-front, .card-back, .case-ref, .bank-case, .case-bank-hdr,
.answer-textarea, .answer-label, .feedback-text, .issue-desc, .issue-title,
.drag-q-text, .drag-q-year, .chl-explain, .chl-opt, .reasoning-panel,
.q-item-title, .q-item-year, .q-issues-hdr, .judgment-note, .judgment-preview,
.pinned-note, .doc-meta, .fc-stats, .fc-search, .topic-select-btn,
.cr-answer-rule, .cr-answer-held, .cr-missed-item, .cr-missed-item-rule,
.result-row, .set-label, .no-q-selected, .help-toast, .mc-btn, .step-desc{
  font-family:var(--rv-sans) !important;
  letter-spacing:normal !important;
}

/* ---------------------------------------------------------------------------
   2. TYPE SCALE — nothing below 12px, body copy at 16px
   -------------------------------------------------------------------------*/

/* Main reading text: question stems, summaries, feedback, answers */
.sum-text, .q-display-text, .q-text, .drag-q-text, .feedback-text,
.chl-explain, .reasoning-panel, .cr-answer-rule, .judgment-preview{
  font-size:16px !important;
  line-height:1.7 !important;
}

/* Flashcard faces — the single most-read surface in the app */
.card-front{ font-size:17px !important; line-height:1.5 !important; }
.card-back{ font-size:12.5px !important; letter-spacing:.04em !important; }

/* Answer box: 16px also stops iOS zooming in on focus */
.answer-textarea{ font-size:16px !important; line-height:1.7 !important; }

/* Secondary copy */
.issue-desc, .issue-title, .cr-answer-held, .cr-missed-item,
.q-item-title, .chl-opt, .mc-btn, .result-row, .step-desc,
.judgment-note, .pinned-note, .no-q-selected, .help-toast{
  font-size:14.5px !important;
  line-height:1.6 !important;
}

/* Section headers / labels — uppercase, so they read smaller than they are */
.sum-block-title, .case-bank-hdr, .answer-label, .q-issues-hdr,
.set-label, .fc-stats, .doc-meta, .q-display-year, .q-item-year,
.drag-q-year, .arc-topic, .cr-clue-type, .cr-card-badge{
  font-size:13px !important;
  line-height:1.5 !important;
}

/* Buttons, chips, filters and pills — small but no longer tiny */
.fc-btn, .fc-mode-btn, .sum-btn, .topic-select-btn, .case-ref, .bank-case,
.case-count, .q-tag, .card-type, .fc-search, .clear-btn, .cd-filter,
.cr-filter-btn, .cr-diff-btn, .cr-skip-btn, .cr-next-btn, .cr-submit,
.cr-play-again, .drag-check-btn, .drag-start-btn, .big-start-btn,
.replay-btn, .judgment-submit-btn, .mode-pill, .stat-lbl, .key-badge,
.ss-key-badge, .kc-star-badge, .evidence-date, .arc-snip, .check-row-sub,
.q-island-name, .cr-results-lbl, .cr-results-grade, #rv-sens-open{
  font-size:12.5px !important;
  line-height:1.45 !important;
}

/* The genuinely microscopic ones (7-9px) get a hard floor */
.cd-bkey, .cd-bmaster, .det-rank, .cd-footer, .cd-prev-item, .hs .k,
.ib-score, .tb-sub, .sg-card .k, .ss-back-label, .cd-det-speech,
.ach-ds, .cd-cbadge, .cd-cc-topic, .cd-pcite, .cd-ptopic, .cd-stat-sub,
.cd-clue, .ib-name, .cd-pin, .cd-back, .cd-exp, .cd-mc, .cd-ri, .cd-search,
.cd-opt, .cd-tagline, .ss-back-text, .drag-hint{
  font-size:12px !important;
  line-height:1.45 !important;
}

/* Flashcard furniture found during browser testing */
.done-btn, .test-toggle, .cr-stat, .cr-stat-val, .cr-subtitle, .flag{
  font-size:12.5px !important;
  line-height:1.45 !important;
}
.tip-text, .kc-hidden, .key-section-sub, .week-badge{
  font-size:12.5px !important;
  line-height:1.55 !important;
}
.key-section-title{ font-size:14px !important; line-height:1.5 !important; }

/* JS-generated markup carries inline font-size, which beats normal rules.
   Match small values specifically (both "9px" and " 9px" spellings, since
   JS-set styles serialise with a space) so large text is untouched. */
/* inline 8-9px  -> 12px */
#page-flashcards [style*="font-size:8px"],
#page-flashcards [style*="font-size: 8px"],
#page-flashcards [style*="font-size:9px"],
#page-flashcards [style*="font-size: 9px"],
#page-summaries [style*="font-size:8px"],
#page-summaries [style*="font-size: 8px"],
#page-summaries [style*="font-size:9px"],
#page-summaries [style*="font-size: 9px"],
#page-skeleton [style*="font-size:8px"],
#page-skeleton [style*="font-size: 8px"],
#page-skeleton [style*="font-size:9px"],
#page-skeleton [style*="font-size: 9px"],
#page-caserecall [style*="font-size:8px"],
#page-caserecall [style*="font-size: 8px"],
#page-caserecall [style*="font-size:9px"],
#page-caserecall [style*="font-size: 9px"],
#page-practice [style*="font-size:8px"],
#page-practice [style*="font-size: 8px"],
#page-practice [style*="font-size:9px"],
#page-practice [style*="font-size: 9px"],
#page-exammode [style*="font-size:8px"],
#page-exammode [style*="font-size: 8px"],
#page-exammode [style*="font-size:9px"],
#page-exammode [style*="font-size: 9px"]{
  font-size:12px !important;
}

/* inline 10-11px -> 12.5px */
#page-flashcards [style*="font-size:10px"],
#page-flashcards [style*="font-size: 10px"],
#page-flashcards [style*="font-size:11px"],
#page-flashcards [style*="font-size: 11px"],
#page-summaries [style*="font-size:10px"],
#page-summaries [style*="font-size: 10px"],
#page-summaries [style*="font-size:11px"],
#page-summaries [style*="font-size: 11px"],
#page-skeleton [style*="font-size:10px"],
#page-skeleton [style*="font-size: 10px"],
#page-skeleton [style*="font-size:11px"],
#page-skeleton [style*="font-size: 11px"],
#page-caserecall [style*="font-size:10px"],
#page-caserecall [style*="font-size: 10px"],
#page-caserecall [style*="font-size:11px"],
#page-caserecall [style*="font-size: 11px"],
#page-practice [style*="font-size:10px"],
#page-practice [style*="font-size: 10px"],
#page-practice [style*="font-size:11px"],
#page-practice [style*="font-size: 11px"],
#page-exammode [style*="font-size:10px"],
#page-exammode [style*="font-size: 10px"],
#page-exammode [style*="font-size:11px"],
#page-exammode [style*="font-size: 11px"]{
  font-size:12.5px !important;
}

/* inline 12-13px -> 14px */
#page-flashcards [style*="font-size:12px"],
#page-flashcards [style*="font-size: 12px"],
#page-flashcards [style*="font-size:13px"],
#page-flashcards [style*="font-size: 13px"],
#page-summaries [style*="font-size:12px"],
#page-summaries [style*="font-size: 12px"],
#page-summaries [style*="font-size:13px"],
#page-summaries [style*="font-size: 13px"],
#page-skeleton [style*="font-size:12px"],
#page-skeleton [style*="font-size: 12px"],
#page-skeleton [style*="font-size:13px"],
#page-skeleton [style*="font-size: 13px"],
#page-caserecall [style*="font-size:12px"],
#page-caserecall [style*="font-size: 12px"],
#page-caserecall [style*="font-size:13px"],
#page-caserecall [style*="font-size: 13px"],
#page-practice [style*="font-size:12px"],
#page-practice [style*="font-size: 12px"],
#page-practice [style*="font-size:13px"],
#page-practice [style*="font-size: 13px"],
#page-exammode [style*="font-size:12px"],
#page-exammode [style*="font-size: 12px"],
#page-exammode [style*="font-size:13px"],
#page-exammode [style*="font-size: 13px"]{
  font-size:14px !important;
}

/* Base size inside study tabs */
#page-flashcards, #page-summaries, #page-skeleton,
#page-caserecall, #page-practice, #page-exammode{
  font-size:16px;
  line-height:1.65;
}

/* ---------------------------------------------------------------------------
   3. NO CLIPPING — let text wrap and containers grow
   -------------------------------------------------------------------------*/
.sum-text, .q-display-text, .q-text, .drag-q-text, .feedback-text,
.card-front, .card-back, .issue-desc, .issue-title, .q-item-title,
.chl-explain, .chl-opt, .cr-answer-rule, .cr-answer-held, .cr-missed-item,
.bank-case, .case-ref, .reasoning-panel, .judgment-preview, .pinned-note{
  overflow-wrap:break-word !important;
  word-break:normal !important;
  white-space:normal !important;
  text-overflow:clip !important;
  max-width:100% !important;
}

/* Cards and panels grow with their content instead of cropping it */
.card, .flashcard, .card-inner, .sum-block, .q-item, .q-display,
.issue-drop-zone, .cr-card, .bank-case, .answer-box{
  height:auto !important;
  overflow:visible !important;
}

/* Flex children must be allowed to shrink or their text overflows */
.fc-grid > *, .sum-block > *, .q-item > *, .card > *,
.result-row > *, .cr-card > *{ min-width:0; }

/* Chips/badges that were sized for 8px text need room for 12px */
.case-ref, .q-tag, .card-type, .case-count, .key-badge, .ss-key-badge,
.kc-star-badge, .stat-lbl, .cd-cbadge, .mode-pill{
  padding-inline:8px !important;
  height:auto !important;
  min-height:0 !important;
  line-height:1.6 !important;
  white-space:nowrap;
}

/* Comfortable measure — long lines are hard to track */
.sum-text, .q-display-text, .feedback-text, .chl-explain, .reasoning-panel{
  max-width:74ch !important;
}

/* ---------------------------------------------------------------------------
   4. MOBILE
   -------------------------------------------------------------------------*/
@media (max-width:560px){
  .sum-text, .q-display-text, .q-text, .drag-q-text, .feedback-text,
  .chl-explain, .reasoning-panel, .answer-textarea{
    font-size:15.5px !important;
    line-height:1.65 !important;
  }
  .card-front{ font-size:16px !important; }
  .sum-text, .q-display-text, .feedback-text{ max-width:100% !important; }
}

/* ============================================================================
   SLIDESHOW READABILITY FIX
   The theme layer turned the slideshow card white but left the back text in
   dark-theme colours: rule text at rgb(200,204,200) and the held judgment in
   pale teal rgb(103,240,208) — light-on-light, effectively invisible — all at
   12px in a fixed 280px card. This forces black text, much larger sizes, and
   lets the card grow to fit its content so nothing clips or scrolls.
   ========================================================================== */

/* Card grows with content: stack the two faces in one grid cell instead of
   absolute-positioning them, so the taller face sets the card height. The
   3D flip still works because the transform lives on .ss-card. */
.ss-scene{ height:auto !important; min-height:340px !important; max-width:760px !important; }
.ss-card{ display:grid !important; height:auto !important; min-height:340px !important; }
.ss-face{
  grid-area:1/1 !important;
  position:static !important;
  inset:auto !important;
  height:auto !important;
  overflow:visible !important;
  padding:2rem 2.25rem !important;
}

/* White card, black words */
.ss-front, .ss-back{ background:#ffffff !important; border:1px solid #dbe4ee !important; }
.ss-front *, .ss-back *{ color:#0c1116 !important; letter-spacing:normal !important; }

/* Front face */
.ss-front-label{ font-size:14px !important; font-family:var(--rv-sans) !important; font-weight:800 !important; color:#3a4552 !important; }
.ss-front-name{ font-size:clamp(26px,3.4vw,36px) !important; font-family:var(--rv-sans) !important; font-weight:800 !important; line-height:1.25 !important; }
.ss-front-topic{ font-size:14px !important; font-family:var(--rv-sans) !important; font-weight:700 !important; color:#0c1116 !important; border:1.5px solid #9fb2c6 !important; padding:4px 14px !important; }
.ss-front-hint{ font-size:13.5px !important; font-family:var(--rv-sans) !important; color:#3a4552 !important; opacity:1 !important; }

/* Back face */
.ss-back{ text-align:left !important; }
.ss-back-name{ font-size:24px !important; font-family:var(--rv-sans) !important; font-weight:800 !important; line-height:1.3 !important; margin-bottom:.9rem !important; }
.ss-back-label{ font-size:13.5px !important; font-family:var(--rv-sans) !important; font-weight:800 !important; color:#3a4552 !important; letter-spacing:.04em !important; }
.ss-back-text{ font-size:18px !important; font-family:var(--rv-sans) !important; line-height:1.65 !important; }
.ss-back-held{
  font-size:18px !important; font-family:var(--rv-sans) !important; line-height:1.65 !important;
  border-left:3px solid #0f7a5c !important; padding-left:.75rem !important;
}
.ss-back-tip{
  font-size:15.5px !important; font-family:var(--rv-sans) !important; line-height:1.6 !important;
  color:#5b4300 !important; background:#fff7e0 !important; border:1px solid #e8d48a !important;
  padding:.6rem .8rem !important; border-radius:8px !important;
}
.ss-back-section{ margin-bottom:1rem !important; max-width:100% !important; }
.ss-key-badge{
  font-size:13px !important; font-family:var(--rv-sans) !important; font-weight:800 !important;
  color:#0f5132 !important; background:#e7f8ee !important; border:1px solid #9fd8b4 !important;
  padding:3px 12px !important; border-radius:999px !important;
}

/* Wrapping safety — long case names and quotes never clip */
.ss-front-name, .ss-back-name, .ss-back-text, .ss-back-held, .ss-back-tip{
  overflow-wrap:break-word !important; white-space:normal !important; max-width:100% !important;
}

/* Controls around the card, brought up to readable size */
.ss-filter-btn, .ss-shuffle-btn, .ss-key-toggle, .ss-nav-btn, .ss-flip-hint{
  font-size:13px !important; font-family:var(--rv-sans) !important; line-height:1.5 !important;
}
#fcSlideshowPanel [style*="font-size:9px"], #fcSlideshowPanel [style*="font-size: 9px"],
#fcSlideshowPanel [style*="font-size:10px"], #fcSlideshowPanel [style*="font-size: 10px"]{
  font-size:13px !important;
}

@media (max-width:560px){
  .ss-face{ padding:1.25rem 1.1rem !important; }
  .ss-front-name{ font-size:23px !important; }
  .ss-back-name{ font-size:20px !important; }
  .ss-back-text, .ss-back-held{ font-size:16.5px !important; }
}