/* 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;
  /* A4 screen dimensions mirror @page below. Keep both together when changing
     the print contract. The screen sheet is continuous, never paginated. */
  --paper-sheet-width: 210mm;
  --paper-margin-inline: 15mm;
  --paper-margin-block: 16mm;
  --paper-code-size: 0.9rem;
  --paper-print-code-size: 10pt;
  --paper-code-leading: 1.3;
}

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

/* Keep the source lines and their real anchors. A compact gutter replaces
   Pandoc's negative offsets, including its print-only hanging indent. */
main.content pre.sourceCode {
  margin: 0;
  padding: 0.85rem 0.9rem;
  font-family: Consolas, "Cascadia Mono", "SFMono-Regular", monospace;
  font-size: var(--paper-code-size);
  line-height: var(--paper-code-leading);
  tab-size: 4;
}

main.content pre.numberSource {
  margin-left: 0;
  padding-left: 3.3rem;
}

main.content pre.sourceCode > code {
  display: block;
  font: inherit;
  white-space: pre;
}

main.content pre.sourceCode > code > span {
  /* Pandoc retains a newline between spans. Block spans would count that
     newline as an extra empty line; inline blocks keep one source line. */
  display: inline-block;
  width: 100%;
  vertical-align: top;
  position: relative;
  left: 0 !important;
  min-height: 1.3em;
  padding: 0;
  text-indent: 0;
  line-height: inherit;
}

main.content pre.numberSource code > span > a:first-child::before {
  position: absolute;
  left: -2.8em;
  width: 2.1em;
  margin: 0;
  padding: 0 0.45em 0 0;
  border-right: 1px solid #606773;
  color: #b0b6c0;
  font-variant-numeric: tabular-nums;
  text-align: right;
  text-decoration: none;
}

/* Python joins the established graphite pseudocode treatment. The explicit
   token colors keep Quarto's light highlighting legible on a dark surface. */
main.content div.sourceCode:has(> pre.python) {
  border: 1px solid #3b414a;
  border-radius: 0.35rem;
  background: #1e2229;
  box-shadow: 0 0.15rem 0.45rem rgb(0 0 0 / 8%);
}

main.content div.sourceCode > pre.python {
  border: 0;
  background: transparent !important;
  color: #edf0f5;
}

main.content pre.python code,
main.content pre.python code span { color: #edf0f5; }
main.content pre.python code :is(.kw, .cf, .im, .ot) { color: #9ed0f5; }
main.content pre.python code :is(.st, .ss, .ch) { color: #bcdfa6; }
main.content pre.python code :is(.dv, .bn, .fl) { color: #f0c899; }
main.content pre.python code :is(.fu, .bu) { color: #d9c6f3; }
main.content pre.python code :is(.co, .an, .cv, .do) { color: #afb8c5; }
main.content pre.python code :is(.op, .va) { color: #e5e9ef; }
main.content pre.python code :is(.er, .al) { color: #ffb7ad; }

main.content .quarto-layout-cell,
main.content .quarto-layout-cell > div,
main.content .code-copy-outer-scaffold { min-width: 0; }

main.content .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-row {
  gap: 1rem;
  align-items: stretch;
}

main.content .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-cell:not(:only-child) {
  flex-basis: calc(50% - 0.5rem) !important;
}

main.content .quarto-subfloat-lst > figcaption {
  font-weight: 700;
  color: var(--paper-ink);
}

/* Compact setup pairs keep independent listing/table captions. Unlike the
   four-alternative panels, these short displays fit the A4 reading measure. */
main.content .question-setup-panel .quarto-layout-row {
  display: flex;
  flex-flow: row nowrap;
  align-items: flex-start;
  gap: 1rem;
}

main.content .question-setup-panel .quarto-layout-cell {
  flex: 0 0 calc(50% - 0.5rem);
  width: calc(50% - 0.5rem) !important;
  max-width: calc(50% - 0.5rem);
}

main.content .quarto-float-caption {
  line-height: 1.4;
}

/* Tight question lists and solution paragraphs. Loose Markdown lists can
   contain paragraphs; their default margins must not add a gap per item. */
main.content :is(ul, ol) {
  margin-block: 0.4rem 0.6rem;
}

main.content li { margin-block: 0.15rem; }
main.content li > p { margin-block: 0; }
main.content li > p + p { margin-top: 0.3rem; }
main.content li > :is(ul, ol) { margin-block: 0.2rem; }
main.content .alpha-list li > p:only-child { display: inline; }

main.content .callout-body > p { margin-block: 0 0.5rem; }
main.content .callout-body > :last-child { margin-bottom: 0; }

/* Give separate help items a visible gap without adding code-line spacing. */
main.content .callout-body > :is(ul, ol) > li + li {
  margin-top: 0.4rem;
}

.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) {
  main.content .question-setup-panel .quarto-layout-row { display: block; }
  main.content .question-setup-panel .quarto-layout-cell {
    flex: none;
    width: 100% !important;
    max-width: 100%;
  }

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

  .paper-view-controls {
    grid-column: body-content-start / body-content-end;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.5rem 0 1rem;
    font-size: 0.85rem;
  }

  .paper-view-controls button {
    min-height: 2.5rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid #b7bfbb;
    border-radius: 0.25rem;
    color: var(--paper-ink);
    background: #fff;
    font: inherit;
    cursor: pointer;
  }

  .paper-view-controls button[aria-pressed="true"] {
    border-color: #187453;
    color: #fff;
    background: #187453;
  }

  .paper-view-controls button:focus-visible {
    outline: 3px solid #31688e;
    outline-offset: 2px;
  }

  .paper-view-description {
    flex-basis: 100%;
    color: #626a70;
  }

  body[data-paper-view="a4"] { background: #e9eceb; }

  body[data-paper-view="a4"] #quarto-content {
    display: block !important;
    padding-inline: 1rem;
  }

  body[data-paper-view="a4"] #quarto-sidebar-toc-left { display: none !important; }

  body[data-paper-view="a4"] .paper-view-controls {
    max-width: var(--paper-sheet-width);
    margin-inline: auto;
  }

  body[data-paper-view="a4"] main#quarto-document-content {
    box-sizing: border-box;
    width: 100%;
    max-width: var(--paper-sheet-width);
    margin: 0 auto 2rem !important;
    padding: var(--paper-margin-block) var(--paper-margin-inline) !important;
    background: #fff;
    border: 1px solid #d1d6d3;
    box-shadow: 0 0.35rem 1.5rem rgb(20 30 25 / 10%);
  }

  /* The A4 content measure is 180mm. Give code alternatives full width on
     screen rather than reduce their text size. Print keeps the 2-by-2 panel. */
  body[data-paper-view="a4"] .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-row {
    display: block;
  }

  body[data-paper-view="a4"] .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-cell {
    width: 100% !important;
    max-width: 100% !important;
  }

  body[data-paper-view="a4"] main.content pre.sourceCode > code {
    white-space: pre-wrap;
    overflow-wrap: normal;
    word-break: normal;
  }
}

/* The course contents column leaves less room for two code listings at
   intermediate widths. Stack them before either listing is clipped. */
@media screen 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 screen and (max-width: 600px) {
  body[data-paper-view="a4"] #quarto-content { padding-inline: 0.5rem; }
  body[data-paper-view="a4"] main#quarto-document-content {
    padding: 1.25rem 1rem !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,
  .paper-view-controls,
  .code-copy-button,
  .anchorjs-link {
    display: none !important;
  }

  body {
    font-size: 11pt;
    line-height: 1.4;
    background: #fff !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;
  }

  /* Source-level logical breaks are preferred. Whitespace wrapping is the
     print fallback; break-word is only an emergency for an indivisible token. */
  pre,
  pre code,
  div.sourceCode {
    overflow: visible !important;
    white-space: pre-wrap !important;
    overflow-wrap: break-word;
    word-break: normal;
    max-height: none !important;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  main.content pre.sourceCode {
    padding: 2.4mm;
    font-size: var(--paper-print-code-size);
    line-height: var(--paper-code-leading);
  }

  main.content pre.numberSource { padding-left: 8mm; }
  main.content pre.sourceCode > code > span { min-height: 1.3em; }

  main.content pre.numberSource code > span > a:first-child::before {
    border-color: #bbb;
    color: #555;
  }

  main.content div.sourceCode:has(> pre.python) {
    border-color: #aaa;
    background: #f7f7f7 !important;
    box-shadow: none;
  }

  main.content pre.python code,
  main.content pre.python code span { color: #111 !important; }
  main.content pre.python code :is(.co, .an, .cv, .do) { color: #555 !important; }

  .quarto-title h1 { font-size: 23pt; }
  main.content h2 { font-size: 14pt; margin-top: 6mm; }
  main.content h3 { font-size: 12pt; }
  main.content :is(p, li) { orphans: 3; widows: 3; }

  /* 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:has(.quarto-subfloat-lst) .quarto-layout-row {
    display: flex !important;
    flex-flow: row nowrap !important;
    gap: 4mm !important;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  .quarto-layout-panel:has(.quarto-subfloat-lst) .quarto-layout-row:has(> .quarto-layout-cell:nth-child(2):last-child) > .quarto-layout-cell {
    flex: 0 0 calc(50% - 2mm) !important;
    width: calc(50% - 2mm) !important;
    max-width: calc(50% - 2mm) !important;
  }

  main.content .question-setup-panel .quarto-layout-row {
    gap: 4mm;
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
  }

  main.content .question-setup-panel .quarto-layout-cell {
    flex: 0 0 calc(50% - 2mm);
    width: calc(50% - 2mm) !important;
    max-width: calc(50% - 2mm);
  }

  .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 question may span pages between listings. The paper's native Quarto
     pagebreaks start questions on new pages; other papers retain the open
     question fallback. Keep each heading with the start of its stem. */
  section:has(> h2.mcq-question) {
    break-inside: auto;
  }

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

  h2, h3, h4,
  .callout-header,
  .quarto-float-caption-top {
    break-after: avoid;
  }

  .callout,
  .callout .callout-body-container {
    break-inside: auto !important;
    overflow: visible !important;
  }

  /* Keep a snippet and its caption together, including the code-copy wrapper.
     Long answer callouts can still continue between individual listings. */
  .quarto-layout-cell,
  .quarto-subfloat-lst,
  .quarto-float-lst:not(:has(.quarto-subfloat-lst)),
  .code-copy-outer-scaffold {
    break-inside: avoid-page !important;
    page-break-inside: avoid !important;
    overflow: visible !important;
  }

  .quarto-layout-panel,
  .quarto-float-tbl > div[aria-describedby] { overflow: visible !important; }

  /* A setup table and its program need the full A4 measure. This leaves
     labelled code alternatives in their established 2-by-2 print panel. */
  .quarto-layout-panel:has(.excel-table):not(:has(.quarto-subfloat-lst)) .quarto-layout-row {
    display: block !important;
    break-inside: auto !important;
    page-break-inside: auto !important;
  }

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

  .excel-table { width: 100% !important; max-width: 100% !important; }
  .excel-table :is(th, td) {
    white-space: normal !important;
    overflow-wrap: break-word;
  }

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

  main.content .panel-tabset > .nav-tabs { display: none !important; }

  main.content .panel-tabset .tab-pane {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin-top: 4mm;
  }

  main.content .panel-tabset .tab-pane[data-print-label]::before {
    content: attr(data-print-label);
    display: block;
    margin-bottom: 2mm;
    font-weight: 700;
    break-after: avoid;
  }

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