/* Saved & Calm · printables: one sheet per challenge or game, A4 / US Letter / A6, colour or B&W.
   The sheet is always white paper, in light or dark mode. */

.print-options { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); }
.print-stage { display: grid; justify-items: center; padding-bottom: var(--s-6); }

.print-sheet {
  --u: 1;
  --line: #2B2B2B;
  --soft: #555;
  width: 100%; max-width: 720px; aspect-ratio: 210 / 297;
  padding: 34px 36px 26px; display: flex; flex-direction: column; gap: 14px;
  background: #fff; color: #111; border-radius: 6px; font-family: var(--font-body);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .04), 0 10px 30px rgba(20, 35, 27, .16);
  font-size: calc(15px * var(--u));
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
.print-sheet--letter { aspect-ratio: 8.5 / 11; }
.print-sheet--a6 { --u: .62; max-width: 400px; padding: 18px 18px 14px; gap: 8px; aspect-ratio: 105 / 148; }
.print-sheet--dense { --u: .85; }
.print-sheet--a6.print-sheet--dense { --u: .5; }

.print-sheet__head { text-align: center; }
.print-sheet__head h1 { font-family: var(--font-display); font-size: 2em; line-height: 1.1; color: #111; }
.print-sheet__head p { margin-top: .3em; color: var(--soft); font-size: .95em; }
.print-sheet__foot { margin-top: auto; text-align: center; font-size: .75em; color: var(--soft); }
.pnote { text-align: center; font-size: .85em; color: var(--soft); max-width: 46ch; margin-inline: auto; }

/* Done marks: a soft pencil cross in both modes */
.print-sheet .is-done { position: relative; }
.pcell.is-done::after, .ppx.is-done::after, .penv.is-done::after, .pcard.is-done::after, .pbsq.is-done::after {
  content: ""; position: absolute; inset: 16%; pointer-events: none;
  background:
    linear-gradient(45deg, transparent 45%, #111 45%, #111 55%, transparent 55%),
    linear-gradient(-45deg, transparent 46%, #111 46%, #111 54%, transparent 54%);
  opacity: .35;
}

/* ── Grids (classic, calendar, months) ── */
.pgrid { display: grid; grid-template-columns: repeat(var(--cols, 10), minmax(0, 1fr)); gap: calc(5px * var(--u)); }
.pgrid--7 { --cols: 7; }
.pgrid--5 { --cols: 5; }
.pgrid--7 .pcell__n { font-size: .78em; white-space: nowrap; }
.pweekday { text-align: center; font-size: .75em; font-weight: 600; color: var(--soft); }
.pcell {
  aspect-ratio: 1; display: grid; place-content: center; justify-items: center; gap: .1em;
  border: 1.5px solid var(--line); border-radius: calc(8px * var(--u));
  background: color-mix(in srgb, var(--pc) 45%, #fff); font-variant-numeric: tabular-nums; line-height: 1.05;
}
.pcell__n { font-weight: 700; font-size: .95em; }
.pcell__amt { font-size: .66em; color: #333; }
.print-sheet--dense .pcell__n { font-size: .8em; }
.pmonths { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(10px * var(--u)); }
.pmonth { border: 1.5px solid var(--line); border-radius: calc(10px * var(--u)); padding: calc(8px * var(--u)); background: color-mix(in srgb, var(--month-fill) 30%, #fff); }
.pmonth h3 { display: flex; justify-content: space-between; gap: .4em; font-size: .85em; margin-bottom: .4em; }
.pmonth h3 small { font-weight: 500; color: var(--soft); }
.pmonth .pcell { border-width: 1px; }
.pmonth .pcell__n { font-size: .6em; }

/* ── Hidden picture: blank pixels with amounts; the picture comes from your colouring ── */
.ppicture { display: grid; grid-template-columns: repeat(var(--cols), 1fr); border-top: 1.5px solid var(--line); border-left: 1.5px solid var(--line); width: min(100%, 92vmin); margin-inline: auto; }
.ppx { aspect-ratio: 1; display: grid; place-content: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .7em; font-variant-numeric: tabular-nums; }
.is-colour .ppx.is-done { background: var(--px); }
.is-colour .ppx.is-done::after { display: none; }

/* ── Wheel ── */
.pwheel { width: min(100%, 520px); margin-inline: auto; display: block; }
.pwheel__slice { fill: color-mix(in srgb, var(--pc) 55%, #fff); stroke: var(--line); stroke-width: 1.2; }
.pwheel__label { font-size: 9px; font-weight: 600; fill: #111; font-family: var(--font-body); }
.pwheel__rim { fill: none; stroke: var(--line); stroke-width: 3; }
.pwheel__hub { fill: #fff; stroke: var(--line); stroke-width: 2; }

/* ── Mystery envelopes + fold-under key ── */
.penv {
  aspect-ratio: 1.45; display: grid; place-content: center; border: 1.5px solid var(--line); border-radius: 6px;
  background: linear-gradient(160deg, transparent 49%, var(--line) 49.5%, transparent 50.5%) top / 100% 50% no-repeat,
              linear-gradient(20deg, transparent 49%, var(--line) 49.5%, transparent 50.5%) top / 100% 50% no-repeat,
              color-mix(in srgb, var(--fill-2) 40%, #fff);
  font-weight: 700; font-size: 1.05em;
}
.penv span { background: #fff; border-radius: 99px; padding: 0 .4em; margin-top: 1.2em; }
.pkey { border-top: 2px dashed var(--line); padding-top: .6em; }
.pkey__title { font-size: .8em; color: var(--soft); text-align: center; margin-bottom: .4em; }
.pkey__list { display: grid; grid-template-columns: repeat(6, 1fr); gap: .15em .6em; font-size: .72em; font-variant-numeric: tabular-nums; }
.pkey__list b { display: inline-block; min-width: 1.8em; }

/* ── Board game ── */
.pboard { display: grid; grid-template-columns: repeat(9, 1fr); grid-template-rows: repeat(9, 1fr); gap: calc(3px * var(--u)); aspect-ratio: 1; width: min(100%, 600px); margin-inline: auto; }
.psq {
  display: grid; align-content: center; justify-items: center; gap: .2em; border: 1.3px solid var(--line); border-radius: calc(6px * var(--u));
  background: color-mix(in srgb, var(--pc) 50%, #fff); font-size: .62em; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1;
}
.psq--special { font-size: 1.3em; background: #fff; border-style: dashed; }
.psq__laps { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 90%; }
.psq__laps i { width: calc(7px * var(--u) + 2px); aspect-ratio: 1; border-radius: 50%; border: 1px solid var(--line); background: #fff; }
.psq__laps i.on { background: #111; }
.pboard__middle { grid-row: 2 / 9; grid-column: 2 / 9; display: grid; align-content: center; gap: .8em; padding: 1em; text-align: center; font-size: .85em; color: var(--soft); }

/* ── Scratch cards ── */
.pgrid--cards { gap: calc(8px * var(--u)); }
.pcard {
  aspect-ratio: 1.6; display: grid; place-content: center; justify-items: center; gap: .15em;
  border: 1.5px dashed var(--line); border-radius: calc(10px * var(--u)); background: color-mix(in srgb, var(--fill-4) 35%, #fff);
}
.pcard small { font-size: .65em; color: var(--soft); }
.pcard b { font-size: 1.15em; font-variant-numeric: tabular-nums; }

/* ── Bingo ── */
.pbingo { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(5px * var(--u)); width: min(100%, 520px); margin-inline: auto; }
.pbingo__head { text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 2em; }
.pbsq { aspect-ratio: 1; display: grid; place-content: center; border: 1.5px solid var(--line); border-radius: 50%; background: color-mix(in srgb, var(--pc) 50%, #fff); font-weight: 600; font-variant-numeric: tabular-nums; font-size: .9em; }
.pbsq--free { background: #111; color: #fff; font-weight: 800; letter-spacing: .05em; }

/* ── Road trip ── */
.proad { width: min(100%, 440px); margin-inline: auto; display: block; }
.print-sheet--letter .proad { width: min(92%, 400px); }
.print-sheet--a6 .proad { width: 74%; }
.print-sheet--a6.is-fillable .proad { width: 68%; }
.proad__land { fill: color-mix(in srgb, var(--land) 70%, #fff); stroke: var(--line); stroke-width: 1.5; }
.proad__road { fill: none; stroke: #777; stroke-width: 16; stroke-linecap: round; }
.proad__dash { fill: none; stroke: #fff; stroke-width: 2; stroke-dasharray: 7 7; }
.proad__stop { fill: #fff; stroke: var(--line); stroke-width: 2; }
.proad .is-done .proad__stop { fill: var(--fill-2); stroke-width: 3.5; }
.proad__amt { font-size: 12px; font-weight: 700; fill: #111; paint-order: stroke; stroke: #fff; stroke-width: 4px; stroke-linejoin: round; font-family: var(--font-body); }

/* ── Blank / fillable: a line to write each amount on, plus Goal and Total ── */
.pline { display: inline-block; width: 70%; min-width: 2.2em; height: .9em; border-bottom: 1.2px solid var(--line); vertical-align: bottom; }
.pline--wide { width: 9em; }
.psq .pline, .ppx .pline { width: 60%; height: .6em; }
.pbsq .pline { width: 2.6em; }
.pkey__list .pline { width: 3.2em; }
.print-sheet.is-fillable { gap: calc(10px * var(--u)); }
.pgoal { font-family: var(--font-display); font-size: 1.15em; text-align: center; margin: 0; }
.print-sheet--letter.is-fillable .ppicture { width: 88%; }
.print-sheet--letter.is-fillable .pgrid--cards, .print-sheet--a6.is-fillable .pbingo { width: 92%; margin-inline: auto; }
.ptotal {
  display: flex; align-items: flex-end; justify-content: center; gap: .6em; align-self: center;
  padding: .55em 1.1em; border: 2px solid var(--line); border-radius: calc(10px * var(--u));
  font-family: var(--font-display); font-weight: 700; font-size: 1.25em;
}
.pwritten { font-family: var(--font-display); font-weight: 600; font-size: .95em; }
.pcell--write { aspect-ratio: 1.4; place-content: stretch; align-content: space-between; gap: 0; padding: .3em .25em .45em; }
.pcell--write .pcell__n { font-size: .8em; }
.print-sheet--dense .pcell--write { aspect-ratio: 1.8; padding: .1em .2em .25em; }
.pcell__date { font-size: .58em; color: var(--soft); white-space: nowrap; overflow: hidden; }
.pcell--write .pline { width: 78%; margin-inline: auto; }
.plines { list-style: none; columns: 2; column-gap: 2.4em; padding: 0; margin: 0; }
.plines li { display: flex; align-items: flex-end; gap: .6em; padding: .45em 0; break-inside: avoid; }
.plines b { min-width: 1.8em; font-size: .85em; color: var(--soft); text-align: right; }
.plines .pline { flex: 1; width: auto; }

/* ── Black & white: no fills, everything in ink; ticks become hatching ── */
.is-bw .pcell, .is-bw .pmonth, .is-bw .psq, .is-bw .pcard, .is-bw .pbsq:not(.pbsq--free), .is-bw .penv { background-color: #fff; }
.is-bw .penv { background: linear-gradient(160deg, transparent 49%, var(--line) 49.5%, transparent 50.5%) top / 100% 50% no-repeat, linear-gradient(20deg, transparent 49%, var(--line) 49.5%, transparent 50.5%) top / 100% 50% no-repeat, #fff; }
.is-bw .pwheel__slice { fill: #fff; }
.is-bw .proad__land { fill: #fff; }
.is-bw .proad__road { stroke: #bbb; }
.is-bw .proad .is-done .proad__stop { fill: #ccc; }
.is-bw .pwheel__slice.is-done { fill: #ddd; }

@media (max-width: 600px) {
  .print-sheet { aspect-ratio: auto; padding: 18px 14px; --u: .78; }
  .print-sheet--a6 { --u: .62; }
  .pmonths { grid-template-columns: repeat(2, 1fr); }
  .pgrid:not(.pgrid--7):not(.pgrid--5):not(.pgrid--cards) { --cols: 6 !important; }
  .print-sheet--dense .pgrid:not(.pgrid--7) { --cols: 8 !important; }
  .pkey__list { grid-template-columns: repeat(3, 1fr); }
}

@media print {
  html, body { background: #fff !important; }
  body::before, .nav, .topbar, .demo-banner, .toasts, .no-print, .skip, .privacy-toggle { display: none !important; }
  .app { display: block !important; padding: 0 !important; }
  .main { max-width: none !important; padding: 0 !important; margin: 0 !important; }
  .print-stage { padding: 0; display: block; }
  .print-sheet { max-width: none; width: 100%; aspect-ratio: auto; min-height: 0; box-shadow: none; border-radius: 0; padding: 0; break-inside: avoid; }
  .print-sheet--a6 { font-size: calc(15px * var(--u)); }
  .pcell, .psq, .pbsq, .pcard, .penv, .pmonth { break-inside: avoid; }
}