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

/* A native, explicitly authored blank leaf for duplex imposition. */
.print-blank-page { display: none; }

.exam-cover .student-fields {
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.exam-cover .student-field {
  min-height: 3rem;
}

.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 {
  body {
    --paper-ink: var(--bs-body-color);
    --paper-rule: var(--bs-border-color);
    --paper-tint: var(--bs-tertiary-bg);
  }

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

  section.print-blank-page {
    display: block !important;
    break-before: page !important;
    break-after: page !important;
  }

  section.print-blank-page > h1 {
    display: block !important;
    break-before: auto !important;
    break-after: auto !important;
    margin: 0 !important;
    font-size: 12pt !important;
    font-weight: normal !important;
  }

  .exam-cover h2 {
    margin-block: 6mm 2mm;
    break-before: auto !important;
  }

  .exam-cover .student-fields {
    display: block;
    margin-block: 5mm 0;
  }

  .exam-cover .student-field {
    min-height: 13mm;
    margin-block: 3mm;
    break-inside: avoid-page;
  }

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

  /* Inline code must print legibly from either screen color scheme. */
  main code:not(pre code),
  main code:not(pre code) span {
    color: inherit !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Keep figure and diagram alternatives in their authored grid on paper.
     Code alternatives use the full-width listing rule below. */
  .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;
  }

  /* Give code and its tabular output the full A4 measure at the ordinary
     code size. Keep comparison grids on screen. Panels containing diagrams
     or images retain their authored layout. */
  .quarto-layout-panel:has(pre.sourceCode):not(:has(.mermaid, img)) .quarto-layout-row {
    display: block !important;
    break-inside: auto !important;
  }

  .quarto-layout-panel:has(pre.sourceCode):not(:has(.mermaid, img)) .quarto-layout-cell {
    flex: none !important;
    width: 100% !important;
    max-width: 100% !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;
  }

  /* Optional placement applies to native question and group sections. The
     exercise selector also outranks a first-question page-start exception. */
  main#quarto-document-content section[data-print-start="page"],
  main#quarto-document-content section.exercise[data-print-start="page"] {
    page-break-before: always !important;
    break-before: page !important;
    break-inside: auto !important;
  }

  main#quarto-document-content section[data-print-start="verso"],
  main#quarto-document-content section.exercise[data-print-start="verso"] {
    page-break-before: left !important;
    break-before: left !important;
    break-inside: auto !important;
  }

  main#quarto-document-content section[data-print-start="recto"],
  main#quarto-document-content section.exercise[data-print-start="recto"] {
    page-break-before: right !important;
    break-before: right !important;
    break-inside: auto !important;
  }

  /* The group owns its break. Its heading and first unannotated question
     must not request another break immediately inside that same group. */
  main#quarto-document-content section[data-print-start]:not(.exercise)
    > :is(h1, h2, h3, h4, h5, h6):first-child,
  main#quarto-document-content section[data-print-start]:not(.exercise)
    > section.exercise:first-of-type:not([data-print-start]) {
    page-break-before: auto !important;
    break-before: auto !important;
  }

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