/*
  Schedule Visualizer 2: print layouts, and the preview sheet that shows them.

  Two parts, kept apart by their first class:

    .print-doc   the root of a print document (ui/prints/document.js). A
                 document is its own page, shown in the preview sheet's frame
                 and sent to the printer from there. It loads tokens.css and
                 this file, and its root carries data-theme="light": paper is
                 light whatever the screen's theme.
    .preview     the preview sheet in the planner (ui/components/print-preview.js),
                 which loads this file once, the first time a preview opens.

  Nothing here styles a bare element outside those two, so loading it in the
  planner changes nothing else.

  Paper. The sheet's size and orientation are the one rule the document
  carries itself (<style id="page-size">@page { size: letter portrait; }</style>);
  the margins and the running footer are here. On screen a .page is drawn as
  the sheet: --page-w by --page-h (set on the root), padded by the margins.
*/

/* ---------- The document ---------- */

@page {
  margin: 12mm 12mm 16mm;

  @bottom-left {
    content: "Schedule Visualizer 2";
    font: 400 8pt "Public Sans", system-ui, sans-serif;
    color: #515761;
  }

  @bottom-right {
    content: "Page " counter(page) " of " counter(pages);
    font: 400 8pt "Public Sans", system-ui, sans-serif;
    color: #515761;
  }
}

.print-doc {
  --sheet: #ffffff;                 /* paper is white, not the screen's cream */
  font-size: 10pt;
  background: var(--sheet);
  color: var(--ink);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-doc body {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 10pt;
  line-height: 1.4;
  font-variant-numeric: var(--numeric);
  overflow-wrap: anywhere;
}

.print-doc .page {
  break-after: page;
}

.print-doc .page:last-of-type {
  break-after: auto;
}

.print-doc .doc-head {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 8mm;
  align-items: baseline;
  padding-bottom: 2.5mm;
  margin-bottom: 5mm;
  border-bottom: 0.5mm solid var(--ink);
}

.print-doc .doc-head__school {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 9pt;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.print-doc .doc-head__what {
  margin: 0;
  font-size: 18pt;
  line-height: 1.15;
  font-weight: 700;
}

.print-doc .doc-head__date {
  margin: 0;
  font-size: 9pt;
  color: var(--ink-2);
  white-space: nowrap;
}

/* The footer. A browser that prints the page boxes above puts the tool's name
   and the page number on every sheet, and the preview sheet marks the root so
   this line is not printed twice. Any other browser prints this line once, at
   the end. */
.print-doc .doc-foot {
  margin-top: 6mm;
  padding-top: 2mm;
  border-top: 0.2mm solid var(--line);
  font-size: 8pt;
  color: var(--ink-2);
}

.print-doc h2 {
  margin: 0 0 1.5mm;
  font-size: 12pt;
  line-height: 1.25;
  font-weight: 700;
  break-after: avoid;
}

.print-doc p {
  margin: 0 0 2.5mm;
}

.print-doc .doc-lead {
  font-size: 11pt;
  max-width: 170mm;
}

.print-doc .doc-meaning,
.print-doc .doc-none {
  color: var(--ink-2);
  font-size: 9pt;
  break-after: avoid;
}

.print-doc .doc-section {
  margin-top: 6mm;
}

.print-doc .doc-section:first-child {
  margin-top: 0;
}

.print-doc .doc-count {
  font-weight: 400;
  color: var(--ink-2);
}

.print-doc .doc-figures {
  display: flex;
  gap: 8mm;
  margin: 0 0 3mm;
  padding: 0;
  list-style: none;
}

.print-doc .doc-figure {
  padding-left: 2.5mm;
  border-left: 1mm solid var(--ink);
}

.print-doc .doc-figure--problem { border-left-style: solid; }
.print-doc .doc-figure--warning { border-left-style: double; }
.print-doc .doc-figure--note { border-left-style: dotted; }

.print-doc .doc-figure__n {
  font-family: var(--font-plan);
  font-size: 18pt;
  font-weight: 600;
  line-height: 1;
}

/* Tables */

.print-doc .doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}

.print-doc .doc-table thead {
  display: table-header-group;      /* the head repeats on every sheet */
}

.print-doc .doc-table tr {
  break-inside: avoid;
}

.print-doc .doc-table th,
.print-doc .doc-table td {
  padding: 1.2mm 2mm;
  border: 0.2mm solid var(--line-strong);
  text-align: left;
  vertical-align: top;
  font-weight: 400;
}

.print-doc .doc-table thead th {
  font-size: 8pt;
  font-weight: 600;
  background: #f1eee7;
}

.print-doc .doc-table tbody th {
  font-weight: 600;
}

.print-doc .doc-table .is-number {
  text-align: right;
}

.print-doc .doc-table .is-missing {
  font-weight: 400;
  font-style: italic;
  color: var(--ink-2);
}

.print-doc .doc-table--findings th:first-child {
  width: 11mm;
  white-space: nowrap;
}

.print-doc .doc-when {
  width: 34mm;
  color: var(--ink-2);
}

/* A finding's reference. The letter says the severity; the edge says it again
   in shape: solid for a problem, double for a warning, dotted for a note. */

.print-doc .mark {
  display: inline-block;
  min-width: 5mm;
  padding: 0 1mm;
  font-family: var(--font-plan);
  font-size: 8pt;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
  border: 0.35mm solid currentColor;
  border-radius: 0.6mm;
  background: var(--sheet);
}

.print-doc .mark--problem {
  color: var(--sheet);
  background: var(--problem);
  border-color: var(--problem);
}

.print-doc .mark--warning {
  color: var(--warning);
  border-style: double;
  border-width: 0.7mm;
}

.print-doc .mark--note {
  color: var(--note);
  border-style: dotted;
}

.print-doc .marks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6mm;
  margin-top: 0.8mm;
}

/* The teacher-by-period grid */

/* Anything that starts a new sheet of paper inside a .page. The preview sheet
   counts these when it says how many sheets a document takes. */
.print-doc .new-sheet {
  break-before: page;
}

.print-doc .doc-grid {
  table-layout: fixed;
  font-size: 8pt;
}

.print-doc .doc-grid th:first-child {
  width: 26mm;
}

.print-doc .doc-grid th,
.print-doc .doc-grid td {
  padding: 1mm;
}

.print-doc .doc-grid__time {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
  white-space: nowrap;
}

.print-doc .doc-grid__group {
  display: block;
  font-weight: 600;
}

.print-doc .doc-grid__room {
  margin-left: 1mm;
  font-weight: 400;
  color: var(--ink-2);
}

.print-doc .doc-grid__planning {
  color: var(--ink-2);
  font-style: italic;
}

.print-doc .doc-grid .is-marked {
  background: #f1eee7;
  box-shadow: inset 0 0 0 0.5mm var(--ink);
}

/* The floor plan */

.print-doc .plan-figure {
  margin: 0;
  break-inside: avoid;
}

.print-doc .plan-figure__plan {
  margin: 0 auto;
}

.print-doc .plan-figure__caption {
  margin-top: 3mm;
  font-size: 9pt;
  color: var(--ink-2);
  text-align: center;
}

.print-doc .plan {
  display: block;
  width: 100%;
  height: 100%;
  font-family: var(--font-plan);
}

.print-doc .plan text {
  text-anchor: middle;
  dominant-baseline: central;
}

.print-doc .plan__corridor { fill: var(--corridor); }
.print-doc .plan__stairs { fill: var(--stairs); }

.print-doc .plan__wall {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 0.6;
  stroke-linecap: square;
}

.print-doc .plan__chevron {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.2;
}

.print-doc .plan__letter {
  fill: var(--ink);
  font-weight: 600;
}

.print-doc .plan__outline {
  fill: none;
  stroke: var(--ink);
  stroke-width: 1;
  stroke-linecap: square;
}

.print-doc .plan__space--other .plan__outline {
  stroke: var(--line-strong);
  stroke-width: 0.7;
}

.print-doc .plan__space--unnumbered .plan__outline {
  stroke-dasharray: 3 2.5;
}

.print-doc .plan__number { font-weight: 600; }
.print-doc .plan__label,
.print-doc .plan__teacher { font-weight: 500; }

.print-doc .plan__corridor-name {
  fill: var(--ink-2);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.print-doc .plan__exit {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3.2;
}

.print-doc .plan__exit-name {
  fill: var(--accent);
  font-weight: 600;
}

.print-doc .plan .plan__exit-name--w { text-anchor: end; }
.print-doc .plan .plan__exit-name--e { text-anchor: start; }

/* On screen, in the preview's frame: each .page is drawn as its sheet. */

@media screen {
  .print-doc {
    background: var(--paper);       /* the desk the sheets lie on */
  }

  .print-doc body {
    display: grid;
    gap: 6mm;
    justify-items: start;
    padding: 8px;                   /* the room print-preview.js leaves around the sheets */
  }

  .print-doc .page {
    box-sizing: border-box;
    width: var(--page-w);
    min-height: var(--page-h);
    padding: 12mm 12mm 16mm;
    background: var(--sheet);
    outline: 1px solid var(--line-strong);
  }

  .print-doc .doc-foot {
    display: none;
  }

  .print-doc .new-sheet {
    margin-top: 10mm;
    padding-top: 6mm;
    border-top: 1px dashed var(--line-strong);   /* where the next sheet starts */
  }
}

@media print {
  .print-doc.has-page-boxes .doc-foot {
    display: none;
  }
}

/* ---------- The preview sheet (in the planner) ---------- */

.preview {
  width: min(1040px, calc(100vw - var(--s-5)));
  height: calc(100vh - var(--s-5));
  max-height: calc(100vh - var(--s-5));
  padding: 0;
  background: var(--card);
  color: var(--ink);
  border: var(--border, 1px solid var(--line));
  border-radius: var(--r-2);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.preview[open] {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}

.preview::backdrop {
  background: rgba(0, 0, 0, 0.45);
}

.preview__head {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--s-3) var(--s-5);
  padding: var(--s-4) var(--s-5) var(--s-3);
  border-bottom: 1px solid var(--line);
}

.preview__title {
  flex: 1 1 14rem;
  margin: 0;
  font-size: var(--t-lg);
  line-height: var(--lh-lg);
  font-weight: 600;
}

.preview__control {
  display: grid;
  gap: var(--s-1);
  font-size: var(--t-sm);
}

.preview__label {
  color: var(--ink-2);
}

/* a sentence where a choice would be: why this output has none */
.preview__note {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--t-sm);
  line-height: var(--lh-sm, 1.35);
}

.preview__control[hidden] {
  display: none;
}

.preview__check {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  min-height: 2.25rem;
  color: var(--ink);
}

.preview__check-box {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  accent-color: var(--accent);
}

.preview__select {
  min-height: 2.25rem;
  padding: 0 var(--s-2);
  font: inherit;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
}

.preview__stage {
  overflow: auto;
  padding: var(--s-4);
  background: var(--paper);
}

.preview__fit {
  margin: 0 auto;
  overflow: hidden;
}

.preview__frame {
  display: block;
  border: 0;
  background: transparent;
  transform-origin: 0 0;
}

.preview__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-top: 1px solid var(--line);
}

.preview__status {
  flex: 1 1 12rem;
  margin: 0;
  font-size: var(--t-sm);
  color: var(--ink-2);
}

@media (max-width: 640px) {
  .preview {
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
    border: 0;
    border-radius: 0;
  }

  .preview__head,
  .preview__foot {
    padding-left: var(--s-3);
    padding-right: var(--s-3);
  }
}

/* ---------- SV2-24: batch sheets (ui/prints/batch.js) ----------
   Every teacher's schedule, or every door sign, as one document: a cover
   sheet that lists what follows, then one .new-sheet each. */

.print-doc .batch-cover__list {
  margin: 4mm 0 0;
  padding-left: 6mm;
  columns: 2;
  column-gap: 10mm;
}

.print-doc .batch-cover__list li {
  break-inside: avoid;
  padding: 0.5mm 0;
}

.print-doc .batch-cover__detail {
  color: var(--ink-2);
}

.print-doc .batch-sheet {
  break-inside: avoid;
}

.print-doc .batch-sheet__line {
  display: flex;
  justify-content: space-between;
  gap: 6mm;
  margin: 0;
  font-size: 8pt;
  color: var(--ink-2);
}

.print-doc .batch-sheet__name {
  margin: 2mm 0 0;
  font-size: 20pt;
  line-height: 1.15;
  font-weight: 600;
}

.print-doc .batch-sheet__facts {
  margin: 1mm 0 0;
}

.print-doc .batch-sheet__says {
  margin: 1mm 0 0;
  color: var(--ink-2);
}

.print-doc .batch-days {
  display: grid;
  grid-template-columns: repeat(var(--batch-days, 1), minmax(0, 1fr));
  gap: 6mm;
  margin-top: 5mm;
  align-items: start;
}

.print-doc .batch-day__name {
  margin: 0 0 1.5mm;
  font-size: 11pt;
  font-weight: 600;
}

.print-doc .batch-day__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 9pt;
}

.print-doc .batch-day__table th,
.print-doc .batch-day__table td {
  padding: 1.4mm 1.5mm;
  border-top: 0.2mm solid var(--line-strong);
  text-align: left;
  vertical-align: top;
}

.print-doc .batch-day__table tr:last-child th,
.print-doc .batch-day__table tr:last-child td {
  border-bottom: 0.2mm solid var(--line-strong);
}

.print-doc .batch-day__table th {
  font-weight: 600;
  white-space: nowrap;
}

.print-doc .batch-day__time {
  display: block;
  font-weight: 400;
  color: var(--ink-2);
  font-size: 8pt;
}

.print-doc .batch-day__quiet {
  color: var(--ink-2);
}

/* A door sign's sheet. What is on it is the staff browser's own sign
   (doorSignMarkup, staff/views/door-sign.js), so the rules below it are the
   sign's paper rules from staff/staff.css, said again because a print
   document does not load that file; test/engine/prints-batch.test.mjs holds
   the two together. A print document has no reset, so each line of the sign
   takes its own margin off here (one rule for every p in the sign would
   outrank the lines' own margins). The sheet is as tall as the paper inside
   its margins (28 mm) less a millimetre, so the school's name stands at its
   foot and the sign is still one sheet. (The preview counts sheets from what
   is on paper, not from the gap it draws between two of them, so the sign
   leaves no room for that gap: print-preview.js, sheetsOf.) The door signs
   are upright sheets: batch.js never lays one on its side. */
.print-doc .batch-sign {
  container-type: inline-size;      /* the sheet the sign's names are measured against (36cqw, below) */
  display: flex;
  flex-direction: column;
  min-height: calc(var(--page-h) - 29mm);
}

.print-doc .sign {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  align-items: center;
  padding: 12mm 0 0;
  text-align: center;
}

.print-doc .sign__card {
  display: contents;
}

.print-doc .sign__word {
  margin: 0;
  color: var(--ink-2);
  font-family: var(--font-plan, var(--font-ui));
  font-size: 22pt;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.2;
  text-transform: uppercase;
}

.print-doc .sign__number {
  max-width: 100%;
  margin: 0;
  font-family: var(--font-plan, var(--font-ui));
  font-size: calc(120pt * var(--sign-fit, 1));
  font-weight: 600;
  line-height: 1;
  overflow-wrap: anywhere;          /* a number too long for one line at the smallest size wraps */
}

.print-doc .sign__teacher {
  margin: 0;
  margin-top: 8mm;
  font-size: 32pt;
  font-weight: 700;
  line-height: 1.15;
}

.print-doc .sign__subject {
  margin: 0;
  margin-top: 3mm;
  color: var(--ink-2);
  font-size: 22pt;
  line-height: 1.2;
}

.print-doc .sign__day {
  display: flex;
  flex-wrap: wrap;
  gap: 6mm;
  order: 1;
  width: 100%;
  margin-top: 8mm;
  text-align: left;
}

.print-doc .sign__kind {
  flex: 1 1 42%;
  min-width: min-content;
  max-width: 100%;
}

.print-doc .sign__kindname {
  margin: 0;
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.3;
}

.print-doc .sign__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11pt;
  font-variant-numeric: var(--numeric);
  line-height: 1.3;
}

.print-doc .sign__table th,
.print-doc .sign__table td {
  padding: 1mm 2mm 1mm 0;
  border-top: 0.2mm solid var(--line);
  font-weight: 400;
  text-align: left;
  vertical-align: top;
  overflow-wrap: normal;            /* a word is never cut: a column is as wide as its longest */
}

.print-doc .sign__table th {
  font-weight: 600;
}

.print-doc .sign__table td span[dir] {
  display: inline-block;
  max-width: 67mm;                  /* for a browser with no container units: 36% of the narrower sheet, A4's 186 mm */
  max-width: 36cqw;                 /* a name longer than the sheet can hold is broken there, never run past its edge */
  overflow-wrap: break-word;
  vertical-align: top;
}

.print-doc .sign__with {
  white-space: nowrap;              /* a name and the comma after it go to a line together */
}

.print-doc .sign__with > span {
  white-space: normal;
}

.print-doc .sign__school {
  order: 2;
  margin: 0;
  margin-top: auto;
  padding-top: 8mm;
  color: var(--ink-2);
  font-size: 12pt;
  line-height: 1.3;
}

/* ---------- SV2-66: door cards (ui/prints/door-cards.js) ----------
   One card per room: the room and its floor, the maps of the way out, the
   numbered steps, the exit and the assembly point. door-cards.js works out
   how many steps fit on the first sheet from the sizes here; change one and
   change its constant there too. Upright, the maps stand over the steps; on
   a sheet turned on its side they stand left of them. */

.print-doc .card__room {
  margin-bottom: 4mm;
}

.print-doc .card__name {
  margin: 0;
  font-size: 26pt;
  line-height: 1.1;
  font-weight: 700;
}

.print-doc .card__floor {
  margin: 0;
  font-size: 13pt;
  line-height: 1.3;
  color: var(--ink-2);
}

.print-doc .card__body--side {
  display: grid;
  grid-template-columns: 58fr 42fr;
  column-gap: 6mm;
  align-items: start;
}

.print-doc .card__maps {
  display: flex;
  gap: 4mm;
  justify-content: center;
}

.print-doc .card__maps--row {
  align-items: flex-end;
}

.print-doc .card__maps--stack {
  flex-direction: column;
  align-items: center;
}

/* the maps cut into rows under one another, or columns side by side
   (mapLayout in door-cards.js: whichever lets the cells be largest) */
.print-doc .card__maps--rows {
  flex-direction: column;
  align-items: center;
}

.print-doc .card__maps--columns {
  align-items: flex-start;
}

.print-doc .card__maps-group {
  display: flex;
  gap: 4mm;
}

.print-doc .card__maps--rows .card__maps-group {
  align-items: flex-end;
  justify-content: center;
}

.print-doc .card__maps--columns .card__maps-group {
  flex-direction: column;
  align-items: center;
}

.print-doc .card__map {
  margin: 0;
  break-inside: avoid;
}

.print-doc .card__map-name {
  margin-top: 1mm;
  font-size: 9pt;
  line-height: 1.3;
  color: var(--ink-2);
  text-align: center;
}

.print-doc .card__key {
  margin: 2mm 0 0;
  font-size: 8.5pt;
  line-height: 1.4;
  color: var(--ink-2);
}

.print-doc .card__body--up .card__directions {
  margin-top: 4mm;
}

.print-doc .card__steps {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* upright, short steps stand in two columns when that leaves the maps more
   room; door-cards.js counts each column (6 mm apart) at half the width */
.print-doc .card__steps--two {
  columns: 2;
  column-gap: 6mm;
}

.print-doc .card__step {
  display: grid;
  grid-template-columns: 8mm 1fr;
  margin: 0 0 1.6mm;
  font-size: 11pt;
  line-height: 1.35;
  break-inside: avoid;
}

.print-doc .card__n {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.print-doc .card__exit {
  margin-top: 3mm;
  padding-top: 3mm;
  border-top: 0.5mm solid var(--ink);
  font-size: 12pt;
  line-height: 1.35;
  break-inside: avoid;
}

.print-doc .card__exit-line,
.print-doc .card__assembly {
  margin: 0;
}

.print-doc .card__label {
  margin-right: 2mm;
  font-weight: 700;
}

.print-doc .card__assembly--none {
  color: var(--ink-2);
}

.print-doc .card__continued {
  margin: 0 0 4mm;
  padding-bottom: 2mm;
  border-bottom: 0.2mm solid var(--line-strong);
  font-size: 10pt;
  line-height: 1.4;
  color: var(--ink-2);
}

.print-doc .card__none {
  margin: 6mm 0 3mm;
  font-size: 16pt;
  line-height: 1.3;
  font-weight: 600;
}

.print-doc .card-cover__all {
  font-weight: 600;
}

.print-doc .card-cover__missing {
  margin: 0 0 5mm;
  padding-left: 6mm;
}

.print-doc .card-cover__list {
  margin: 2mm 0 0;
  padding-left: 6mm;
  columns: 2;
  column-gap: 10mm;
}

.print-doc .card-cover__list li {
  break-inside: avoid;
  padding: 0.5mm 0;
}

.print-doc .card-cover__to {
  color: var(--ink-2);
}

/* the way out over a plan (planSvg's route option) */
.print-doc .plan__route-band {
  fill: none;
  stroke: #ffffff;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print-doc .plan__route {
  fill: none;
  stroke: var(--ink);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.print-doc .plan__start {
  fill: var(--ink);
  stroke: #ffffff;
  stroke-width: 2;
}

.print-doc .plan__end {
  fill: var(--accent);
  stroke: #ffffff;
  stroke-width: 2;
}