/* dates-print.css: the "Print a year calendar" button and the one-page school-year sheet (js/dates-print.js).
   Class prefix dp-. The sheet is hidden on screen and prints only while html.dp-print is set.
   Print colors are fixed black / gray / white (never the dark theme) and every mark is a shape or a pattern,
   so the page reads on a black-and-white printer. Sized for one landscape page, US Letter or A4 (the @page rule is added by the script while printing). */

.dp-head-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.dp-bar[hidden] { display: none; }
.dp-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 16px; border-radius: 12px;
  border: 1px solid var(--hc-field, #C9D4DF); background: var(--surface, #fff); color: var(--ink, #14324F);
  font: inherit; font-weight: 700; cursor: pointer; }
.dp-btn:hover { background: var(--hover, #EEF1F5); }
.dp-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
@media (max-width: 640px) { .dp-btn { min-height: 44px; padding: 0 12px; font-size: .875rem; } }

.dp-sheet { display: none; }

@media print {
  html.dp-print, html.dp-print body { background: #fff !important; color: #000 !important; margin: 0 !important; padding: 0 !important; }
  html.dp-print body > *:not(#dp-sheet) { display: none !important; }
  html.dp-print #dp-sheet { display: block !important; }

  .dp-sheet { color: #000; background: #fff; font-family: Inter, Arial, Helvetica, sans-serif; font-size: 8pt; line-height: 1.25;
    -webkit-print-color-adjust: exact; print-color-adjust: exact; break-inside: avoid; }
  .dp-sheet * { box-sizing: border-box; }
  .dp-sheet h2, .dp-sheet h3, .dp-sheet p, .dp-sheet ul { margin: 0; padding: 0; }
  .dp-sheet ul { list-style: none; }
  .dp-sheet h2, .dp-sheet h3, .dp-sheet b, .dp-sheet a { color: #000 !important; }

  .dp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16pt; padding-bottom: 5pt; border-bottom: 1.5pt solid #000; }
  .dp-kicker { font-size: 7.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #333; }
  .dp-title { font-size: 16pt; font-weight: 800; line-height: 1.15; }
  .dp-change { max-width: 3.4in; text-align: right; font-size: 8pt; }

  .dp-body { display: flex; gap: 12pt; margin-top: 7pt; }
  .dp-months { flex: 1 1 auto; min-width: 0; display: grid; grid-template-columns: repeat(4, 1fr); column-gap: 9pt; row-gap: 8pt; }
  .dp-month { break-inside: avoid; }
  .dp-mname { font-size: 9pt; font-weight: 800; padding: 0 1pt 2pt; border-bottom: .75pt solid #000; margin-bottom: 1pt; }
  .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
  .dp-wd { font-size: 6.5pt; font-weight: 700; text-align: center; height: 9pt; line-height: 9pt; }
  .dp-we { color: #555; }

  /* One day: the number centered; marks are fills, patterns, rings, dotted underlines and corner triangles. */
  .dp-d, .dp-sym { position: relative; display: flex; align-items: center; justify-content: center; height: 20.5pt; font-size: 8pt; }
  .dp-d > span, .dp-sym > span { display: inline-flex; align-items: center; justify-content: center; min-width: 12pt; height: 12pt; line-height: 1; }
  .dp-sym { display: inline-flex; flex: none; width: 17pt; height: 15pt; border: .5pt solid #999; vertical-align: middle; }
  .dp-m-off { background: #222 !important; color: #fff !important; font-weight: 800; }
  .dp-m-early { background: repeating-linear-gradient(135deg, #000 0 .8pt, #fff .8pt 3.2pt) !important; }
  .dp-m-early > span { background: #fff; padding: 0 1pt; font-weight: 700; }
  .dp-m-firstlast > span { border: 1.4pt solid #000; border-radius: 50%; width: 13.5pt; height: 13.5pt; font-weight: 800; }
  .dp-m-other > span { border: 1pt dashed #000; font-weight: 700; }
  .dp-m-test::before { content: ""; position: absolute; left: 1pt; right: 1pt; bottom: 1.2pt; border-bottom: 2pt dotted #000; }
  .dp-m-off.dp-m-test::before { border-bottom-color: #fff; }
  .dp-m-enroll::after { content: ""; position: absolute; top: 0; right: 0; width: 0; height: 0;
    border-top: 7pt solid #000; border-left: 7pt solid transparent; }
  .dp-m-off.dp-m-enroll::after { border-top-color: #fff; }
  .dp-m-enroll > span { font-weight: 800; }

  .dp-side { flex: 0 0 2.85in; display: flex; flex-direction: column; gap: 7pt; min-width: 0; }
  .dp-side h3 { font-size: 8.5pt; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; border-bottom: .75pt solid #000; padding-bottom: 1.5pt; margin-bottom: 3pt; }
  .dp-legend ul { display: grid; grid-template-columns: 1fr 1fr; gap: 3pt 6pt; }
  .dp-legend li { display: flex; align-items: center; gap: 4pt; font-size: 7.5pt; line-height: 1.15; }
  .dp-list ul { display: flex; flex-direction: column; gap: 2.5pt; }
  .dp-item { display: grid; grid-template-columns: 17pt 1fr; column-gap: 5pt; align-items: start; break-inside: avoid; }
  .dp-item .dp-sym { grid-row: span 2; }
  .dp-when { font-weight: 800; font-size: 7.5pt; }
  .dp-what { font-size: 7.5pt; }
  .dp-what i { font-style: normal; color: #444; }
  .dp-noown { font-size: 7.5pt; margin-bottom: 3pt; font-style: italic; }
  .dp-qrbox { display: flex; align-items: center; gap: 7pt; margin-top: auto; padding-top: 4pt; border-top: .75pt solid #000; }
  .dp-qr { width: .95in; height: .95in; flex: none; }
  .dp-qrbox p { font-size: 7.5pt; }
  .dp-url { overflow-wrap: anywhere; color: #333; }

  .dp-foot { margin-top: 6pt; padding-top: 3pt; border-top: .75pt solid #000; font-size: 6.5pt; color: #333; display: flex; justify-content: space-between; gap: 12pt; }
  .dp-foot p:first-child { flex: 1 1 auto; }
  .dp-foot p:last-child { flex: 0 0 auto; text-align: right; max-width: 40%; }
}