/*
  Styles for the two post-quiz learning tools: the flashcards modal
  (flashcards-ui.js) and the printable study guide (study-guide-ui.js).

  Both are rendered into overlays that sit on top of the results screen,
  so everything here is namespaced under .fc-* / .sg-* and nothing
  reaches into the app's own classes. The one shared dependency is
  .modal-overlay from assets/styles.css, which gives the dimmed backdrop
  and the centering — same primitive the Add-more and pack dialogs use.

  The study guide's palette is the LaTeX style guide's, hard-coded as
  custom properties rather than pulled from the app's purple theme: the
  guide is a print artifact and should look like the printed handouts it
  mirrors, not like the web app it launched from.
*/

:root {
  --sg-header-blue: #1C569E;
  --sg-accent-orange: #E27A1E;
  --sg-accent-green: #2E7D32;
  --sg-work-purple: #A020F0;
  --sg-warning-red: #C0392B;
  --sg-ink: #1a1a1e;
  --sg-ink-soft: #4a4a55;
  --sg-rule: #d8d8e0;
}

/* ==================================================================
   Keep Learning cards — now actionable, not placeholders
   ================================================================== */

.kl-card.kl-actionable {
  cursor: pointer;
  border: 1px solid transparent;
  transition: border-color .12s ease, transform .12s ease, box-shadow .12s ease;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
  display: block;
}
.kl-card.kl-actionable:hover,
.kl-card.kl-actionable:focus-visible {
  border-color: var(--purple-dark, #6d28d9);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(80, 40, 160, .13);
  outline: none;
}
.kl-card .kl-go {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--purple-dark, #6d28d9);
}

/* ==================================================================
   Flashcards
   ================================================================== */

.fc-overlay { z-index: 60; }

.fc-box {
  background: #fff;
  border-radius: 18px;
  width: 720px;
  max-width: 94vw;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.fc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--border, #e6e6ee);
}
.fc-title { font-size: 16px; font-weight: 700; margin: 0; }
.fc-sub { font-size: 12.5px; color: var(--text-muted, #6b6b76); margin-top: 2px; }
.fc-head-actions { display: flex; align-items: center; gap: 8px; }

/* The card itself. Flipping is a 3D rotation on an inner wrapper with
   both faces absolutely stacked — the back is pre-rotated so it reads
   correctly once the wrapper turns. min-height rather than height so a
   long explanation grows the card instead of overflowing it. */
.fc-stage {
  padding: 20px 22px;
  overflow-y: auto;
  flex: 1;
  perspective: 1600px;
}
.fc-card {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .45s cubic-bezier(.2, .7, .3, 1);
  min-height: 340px;
}
.fc-card.flipped { transform: rotateY(180deg); }
/* The card is focusable so Space/Enter can flip it, but the default ring
   draws a hard rectangle around a rotating 3D element and reads as a
   border on the card itself. Suppress it and put the affordance on the
   visible face instead. */
.fc-card:focus { outline: none; }
.fc-card:focus-visible .fc-face { border-color: var(--purple-dark, #6d28d9); }

.fc-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border: 1px solid var(--border, #e6e6ee);
  border-radius: 14px;
  padding: 22px;
  background: var(--gray-pill, #f6f5fa);
  min-height: 340px;
  box-sizing: border-box;
}
.fc-face-back {
  position: absolute;
  inset: 0;
  transform: rotateY(180deg);
  background: #fff;
  border-color: #cdbdf0;
  overflow-y: auto;
}

.fc-topic {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--purple-dark, #6d28d9);
  background: #efe9fd;
  border-radius: 999px;
  padding: 4px 11px;
  margin-bottom: 12px;
}
.fc-stem { font-size: 16.5px; line-height: 1.5; color: #1f2024; }
.fc-diagram { margin-top: 16px; text-align: center; }
.fc-diagram svg { max-width: 100%; height: auto; }
.fc-diagram-caption { font-size: 11.5px; color: var(--text-muted, #6b6b76); margin-top: 5px; }

.fc-hint-flip {
  margin-top: 18px;
  font-size: 12.5px;
  color: var(--text-muted, #6b6b76);
  font-style: italic;
}

.fc-answer-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sg-accent-green);
  margin-bottom: 7px;
}
.fc-answer {
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.45;
  color: #1f2024;
  border-left: 3px solid var(--sg-accent-green);
  padding-left: 12px;
  margin-bottom: 16px;
}
.fc-explain { font-size: 14.5px; line-height: 1.6; color: var(--sg-ink-soft); }
.fc-distractors { margin-top: 18px; border-top: 1px solid var(--border, #e6e6ee); padding-top: 14px; }
.fc-distractors-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sg-warning-red);
  margin-bottom: 8px;
}
.fc-distractor { font-size: 13px; line-height: 1.55; color: var(--sg-ink-soft); margin-bottom: 7px; }
.fc-distractor b { color: #1f2024; }

.fc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 22px 18px;
  border-top: 1px solid var(--border, #e6e6ee);
}
.fc-count { font-size: 13px; color: var(--text-muted, #6b6b76); font-variant-numeric: tabular-nums; }
.fc-nav { display: flex; gap: 8px; }
.fc-btn {
  border: 1px solid var(--border, #e6e6ee);
  background: #fff;
  border-radius: 999px;
  padding: 7px 16px;
  font-size: 13.5px;
  cursor: pointer;
  font-family: inherit;
}
.fc-btn:hover:not(:disabled) { background: var(--gray-pill, #f6f5fa); }
.fc-btn:disabled { opacity: .42; cursor: default; }
.fc-btn-primary {
  background: var(--purple-dark, #6d28d9);
  border-color: var(--purple-dark, #6d28d9);
  color: #fff;
}
.fc-btn-primary:hover:not(:disabled) { filter: brightness(1.08); background: var(--purple-dark, #6d28d9); }

.fc-empty { padding: 40px 24px; text-align: center; color: var(--text-muted, #6b6b76); font-size: 14px; }

/* ==================================================================
   Study guide
   ================================================================== */

.sg-overlay { z-index: 60; align-items: flex-start; overflow-y: auto; padding: 26px 0; }

.sg-shell {
  background: #fff;
  border-radius: 14px;
  width: 850px;
  max-width: 96vw;
  /* Horizontal only. A vertical `auto` margin on a flex item taller than
     its container wins over align-items and centres the item, which puts
     the overflowing top — the toolbar, and with it Export / Print PDF —
     above the scroll origin where nothing can reach it. The guide is
     routinely taller than the viewport, so this is the normal case, not
     an edge one. Centring horizontally is justify-content's job on the
     overlay and it already does it. */
  margin: 0 auto;
  overflow: hidden;
}

.sg-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 20px;
  background: var(--gray-pill, #f6f5fa);
  border-bottom: 1px solid var(--border, #e6e6ee);
  position: sticky;
  top: 0;
  z-index: 2;
}
.sg-toolbar-label { font-size: 13px; font-weight: 600; color: var(--text-muted, #6b6b76); }
.sg-toolbar-actions { display: flex; gap: 8px; align-items: center; }

/* The document itself. Sized in inches so what's on screen is what
   comes out of the printer — 6.5in of content inside US Letter's 1in
   margins. */
.sg-doc {
  padding: 0.55in 0.62in 0.7in;
  font-family: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  color: var(--sg-ink);
  font-size: 11.6pt;
  line-height: 1.5;
}

.sg-brandbar {
  border-bottom: 2.5px solid var(--sg-header-blue);
  padding-bottom: 9px;
  margin-bottom: 20px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
}
.sg-brand {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 12pt;
  font-weight: 700;
  color: var(--sg-header-blue);
  letter-spacing: .01em;
}
.sg-brand-sub {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 8.6pt;
  color: var(--sg-ink-soft);
}

.sg-doc h1 {
  font-size: 19pt;
  color: var(--sg-header-blue);
  margin: 0 0 4px;
  line-height: 1.22;
}
.sg-deck { font-size: 9.6pt; color: var(--sg-ink-soft); margin-bottom: 20px; }

.sg-doc h2 {
  font-size: 13.4pt;
  color: var(--sg-header-blue);
  margin: 22px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--sg-rule);
}
.sg-doc h3 { font-size: 11.4pt; margin: 15px 0 5px; color: var(--sg-ink); }
.sg-doc p { margin: 0 0 9px; }
.sg-doc ul, .sg-doc ol { margin: 0 0 9px; padding-left: 20px; }
.sg-doc li { margin-bottom: 4px; }

/* ---- The four boxes ---- */

.sg-box { margin: 13px 0 15px; padding: 12px 15px; border-radius: 4px; page-break-inside: avoid; break-inside: avoid; }
.sg-box-title {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 8.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 7px;
}
.sg-box p:last-child, .sg-box ul:last-child, .sg-box ol:last-child { margin-bottom: 0; }

/* topicsbox — full blue outline */
.sg-topicsbox {
  border: 1.4px solid var(--sg-header-blue);
  background: #f4f8fd;
}
.sg-topicsbox .sg-box-title { color: var(--sg-header-blue); }

/* formulabox — orange outline */
.sg-formulabox {
  border: 1.4px solid var(--sg-accent-orange);
  background: #fdf7f0;
}
.sg-formulabox .sg-box-title { color: #b35f11; }
.sg-formulabox .sg-formula {
  font-family: "Cambria Math", Cambria, "Latin Modern Math", Georgia, serif;
  font-size: 11.8pt;
  margin-bottom: 6px;
}
.sg-formulabox .sg-formula:last-child { margin-bottom: 0; }
.sg-formulabox .sg-formula-note { color: var(--sg-ink-soft); font-size: 9.6pt; }

/* examplebox — purple west border only */
.sg-examplebox {
  border-left: 4px solid var(--sg-work-purple);
  background: #faf5ff;
  border-radius: 0 4px 4px 0;
}
.sg-examplebox .sg-box-title { color: #7d13c0; }
.sg-ex-q { font-weight: 600; margin-bottom: 7px; }
.sg-ex-work { color: var(--sg-ink-soft); }
.sg-ex-answer { color: var(--sg-accent-green); font-weight: 600; }

/* warningbox — crimson west border only */
.sg-warningbox {
  border-left: 4px solid var(--sg-warning-red);
  background: #fdf5f4;
  border-radius: 0 4px 4px 0;
}
.sg-warningbox .sg-box-title { color: var(--sg-warning-red); }

.sg-missed-flag {
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 7.8pt;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--sg-warning-red);
  border: 1px solid var(--sg-warning-red);
  border-radius: 999px;
  padding: 1.5px 7px;
  margin-left: 7px;
  vertical-align: 2px;
  white-space: nowrap;
}

.sg-section { page-break-inside: auto; }
.sg-footer {
  margin-top: 26px;
  padding-top: 9px;
  border-top: 1px solid var(--sg-rule);
  font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 8.4pt;
  color: var(--sg-ink-soft);
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.sg-print-only { display: none; }

/* The document is wrapped in a single-column table purely as a printing
   device: Chromium repeats a thead/tfoot on every printed sheet AND
   reserves the space they occupy, which is the part `position: fixed`
   cannot do — it clamps a negative offset to the content box, so a fixed
   running head lands on top of the body text instead of in the margin.
   On screen the table is collapsed back to plain blocks and the head and
   foot are hidden, so it has no effect on the on-screen layout at all. */
.sg-pagetable { width: 100%; border-collapse: collapse; }
.sg-pagetable,
.sg-pagetable > tbody,
.sg-pagetable > tbody > tr,
.sg-pagetable > tbody > tr > td { display: block; }
.sg-pagetable > thead,
.sg-pagetable > tfoot { display: none; }
.sg-pagetable > tbody > tr > td { padding: 0; }

/* ==================================================================
   Print — the "Export / Print PDF" path
   ==================================================================
   Printing is the export. Rather than ship a PDF library, the guide is
   already laid out in inches, so the browser's own "Save as PDF" gives
   a clean file. That only works if everything else on the page is gone:
   the results screen underneath, the app header, the annotation layer,
   and the overlay's own dim backdrop would all otherwise print.
*/
@media print {
  @page {
    size: letter portrait;
    margin: 0.62in 0.72in 0.66in;
  }

  /* Nothing prints while the guide is printing; it re-enables its own
     subtree below.

     Scoped to body.sg-printing rather than applying to every print.
     Unscoped, this rule blanked any Ctrl+P of a page that merely loaded
     this stylesheet — harmless while that was quiz pages only, but the
     library page now loads it too so the Student Portal can launch the
     guide, and printing the library would have produced an empty sheet.
     The guide always sets this class before calling print(), so the
     printed guide is byte-for-byte unaffected. */
  body.sg-printing > * { display: none !important; }

  body.sg-printing {
    background: #fff !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  body.sg-printing > .sg-overlay {
    display: block !important;
    position: static !important;
    background: none !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    inset: auto !important;
  }
  .sg-overlay .sg-shell {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
  }
  .sg-toolbar { display: none !important; }
  /* The running foot already signs off every sheet, including the last
     one, so the in-flow footer would only stack a near-identical line
     directly under it. It stays for the on-screen view, where there is
     no running foot. */
  .sg-footer { display: none !important; }
  .sg-doc {
    display: block !important;
    padding: 0 !important;
    font-size: 10.8pt;
  }

  .sg-print-only { display: block !important; }

  /* Turn the wrapper back into a real table so Chromium repeats the head
     and foot on every sheet and reserves their height in the page box.
     This is what gets the branding onto pages 2+ without it landing on
     top of the text. */
  .sg-pagetable { display: table !important; width: 100% !important; }
  .sg-pagetable > thead { display: table-header-group !important; }
  .sg-pagetable > tfoot { display: table-footer-group !important; }
  .sg-pagetable > tbody { display: table-row-group !important; }
  .sg-pagetable > thead > tr,
  .sg-pagetable > tbody > tr,
  .sg-pagetable > tfoot > tr { display: table-row !important; }
  .sg-pagetable td,
  .sg-pagetable th { display: table-cell !important; padding: 0 !important; }

  .sg-running-head {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 8pt;
    color: var(--sg-header-blue);
    border-bottom: 1px solid var(--sg-header-blue);
    padding-bottom: 3px;
    margin-bottom: 11px;
    display: flex !important;
    justify-content: space-between;
    gap: 14px;
  }
  .sg-running-foot {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 7.8pt;
    color: var(--sg-ink-soft);
    border-top: 1px solid var(--sg-rule);
    padding-top: 3px;
    margin-top: 11px;
    display: flex !important;
    justify-content: space-between;
    gap: 14px;
  }

  .sg-doc h2 { page-break-after: avoid; break-after: avoid; }
  .sg-box, .sg-section > h3 { page-break-inside: avoid; break-inside: avoid; }
  .sg-brandbar { page-break-after: avoid; }

  /* Backgrounds are decorative here, but the west borders are load-bearing:
     they are what tells an example from a warning. Ask for exact color;
     if the browser or the user's settings refuse, the borders still print
     as gray rules and the box titles keep their labels. */
  .sg-box, .sg-brandbar, .sg-doc {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}