/* Written paper: one HTML for screen and for browser printing (Ctrl+P).
   Every rule targets a class, never a question identifier, so any bank
   question can enter or leave a paper without touching this file. */
:root {
  --paper-ink: #202124;
  --paper-rule: #8a8a8a;
  --paper-tint: #f2f2f2;
}

body {
  color: var(--paper-ink);
}

.paper-instructions {
  margin: 1rem 0 1.4rem;
  padding: 0.9rem 1rem;
  border-left: 0.3rem solid var(--paper-ink);
  background: var(--paper-tint);
}

.student-fields {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 1.25rem;
  margin: 1rem 0 1.5rem;
}

.student-field {
  min-height: 1.7rem;
  border-bottom: 1px solid var(--paper-ink);
}

.question-group-title {
  margin: 2rem 0 0.75rem;
  padding: 0.4rem 0.65rem;
  border-top: 2px solid var(--paper-ink);
  border-bottom: 1px solid var(--paper-rule);
  font-size: 1.05rem;
  font-weight: 700;
}

/* M1 and Q1 labels are real heading text written by exercise-include.lua. */
.exercise-label {
  margin-right: 0.15rem;
  font-weight: 700;
}

.answer-space {
  min-height: var(--answer-space, 8rem);
  margin: 1rem 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.55rem,
    #b8b8b8 1.58rem
  );
}

.answer-space.short { --answer-space: 5rem; }
.answer-space.medium { --answer-space: 9rem; }
.answer-space.long { --answer-space: 14rem; }

@media screen and (max-width: 720px) {
  .student-fields {
    grid-template-columns: 1fr;
  }

  /* Keep detailed flowchart labels readable on a phone. The diagram scrolls
     inside its existing viewport while the page remains at viewport width. */
  .flowchart-mobile-scroll .flowchart-viewport > svg.flowchart[style*="--flowchart-ratio"] {
    min-width: 28rem;
    width: 28rem !important;
    height: auto !important;
  }
}

/* Screen: a readable measure inside the full-width layout. */
@media screen {
  main#quarto-document-content,
  .quarto-container main {
    max-width: 62rem;
  }

  /* Keep paired code alternatives inside the reading column when their
     minimum widths exceed it. Wide screens retain the two-column layout. */
  .quarto-layout-panel:has(.quarto-subfloat-lst) {
    max-width: 100%;
    overflow-x: auto;
  }
}

/* The course contents column leaves less room for two code listings at
   intermediate widths. Stack them before either listing is clipped. */
@media screen and (min-width: 721px) and (max-width: 1100px) {
  .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-row {
    display: block;
  }

  .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-cell {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media print {
  @page {
    size: A4;
    margin: 16mm 15mm;
  }

  /* The question list is for the screen; paper has page numbers instead. */
  #quarto-margin-sidebar,
  #quarto-sidebar-toc-left,
  nav[role="doc-toc"],
  .quarto-title-block .quarto-title-meta {
    display: none !important;
  }

  /* The screen layout is a grid with a column for that list: on paper the
     content takes the whole measure instead. */
  body,
  .quarto-container,
  #quarto-content,
  .page-columns,
  .page-full,
  .page-rows-contents {
    display: block !important;
  }

  main#quarto-document-content,
  .quarto-container main,
  #quarto-content > * {
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    grid-column: 1 / -1 !important;
  }

  /* Paper cannot scroll: wrap long code lines instead of clipping them. */
  pre,
  pre code,
  div.sourceCode {
    overflow: visible !important;
    white-space: pre-wrap !important;
    overflow-wrap: anywhere;
  }

  /* Keep four alternatives as a 2-by-2 grid of sublistings on paper. A
     question with long lines uses layout-ncol=1; its lone cell keeps the
     full width. */
  .quarto-layout-panel > figure.quarto-float {
    break-inside: auto !important;
  }

  .quarto-layout-panel .quarto-layout-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 4mm !important;
    break-inside: avoid-page !important;
  }

  .quarto-layout-panel .quarto-layout-cell:not(:only-child) {
    flex: 0 0 calc(50% - 2mm) !important;
    width: calc(50% - 2mm) !important;
    max-width: calc(50% - 2mm) !important;
  }

  .paper-instructions {
    padding: 2.5mm 3mm !important;
    border-left-width: 1.5mm !important;
    background: #eee !important;
  }

  .question-group-title {
    margin: 5mm 0 2mm !important;
    padding: 1.5mm 2mm !important;
  }

  /* A short MCQ stays on one page; each open question starts a page. */
  section:has(> h2.mcq-question) {
    break-inside: avoid-page;
  }

  section:has(> h2.open-question) {
    break-before: page;
  }

  h2, h3, h4,
  .callout-header {
    break-after: avoid;
  }

  /* Paper cannot expand a callout: print every collapsible one open, in
     plain black on white. */
  .callout .callout-collapse.collapse {
    display: block !important;
    height: auto !important;
    visibility: visible !important;
  }

  .callout .callout-btn-toggle {
    display: none !important;
  }

  .callout.callout-style-default,
  .callout .callout-header,
  .callout .callout-body-container {
    border-color: #888 !important;
    color: var(--paper-ink) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  .answer-space {
    min-height: var(--answer-space, 55mm);
    break-inside: avoid-page;
  }

  .answer-space.short { --answer-space: 28mm; }
  .answer-space.medium { --answer-space: 50mm; }
  .answer-space.long { --answer-space: 82mm; }
}