/* The paper.
 *
 * Everything here is measured in inches rather than pixels, because the output is a
 * physical sheet and "8.5in" is the actual answer. CSS resolves 1in to 96px on screen,
 * so the same boxes drive the on-screen preview — which is the print document itself,
 * scaled down — and the printer.
 *
 * The palette is hard-coded black-on-white and never reads an app token. Printing the
 * dark theme would empty a toner cartridge to produce a grey page, and a calendar
 * meant for a binder should look the same whichever theme the screen is wearing.
 */

.printdoc {
  --ink: #111214;
  --ink-soft: #4a4f57;
  --faint: #8b9099;
  --rule: #c9ced6;
  --rule-soft: #e4e7ec;
  --pad: .32in;
  --pt: 8.6pt;

  display: none;
  font-family: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--ink);
  /* Tints and colour bars are the point of the colour option; without this most
     browsers drop every background when printing and the pages come out unreadable. */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-preview .printdoc { display: block; }

/* ── sheets and panels ───────────────────────────────────────────────── */

.psheet {
  position: relative;
  background: #fff;
  overflow: hidden;
  display: flex;
  break-after: page;
  break-inside: avoid;
}
.psheet:last-child { break-after: auto; }

.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: var(--pad);
  font-size: var(--pt);
  line-height: 1.25;
}

/* A half-size page carries the same content in two-thirds of the width, so it needs
   its own type scale rather than the letter one shrunk by the printer. */
.panel--half { --pt: 7.1pt; --pad: .26in; }

/* One half-size page centred on a full sheet, for a full-size binder or to trim later. */
.psheet--centred { align-items: center; justify-content: center; }

/* The cut line on a two-up sheet. Dashed and pale: it is a guide for scissors, not
   something that should show up as a rule on the finished page. */
.psheet__cut {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 0;
  border-left: 1px dashed #b9bec6;
}
.psheet__cut::after {
  content: "\2702";
  position: absolute;
  top: .12in;
  left: -.07in;
  font-size: 7pt;
  color: #b9bec6;
  background: #fff;
  line-height: 1;
}

/* Corner marks for the centred single half-page. */
.trim { position: absolute; width: .18in; height: .18in; }
.trim--tl { border-left: .5pt solid #b9bec6; border-top: .5pt solid #b9bec6; }
.trim--tr { border-right: .5pt solid #b9bec6; border-top: .5pt solid #b9bec6; }
.trim--bl { border-left: .5pt solid #b9bec6; border-bottom: .5pt solid #b9bec6; }
.trim--br { border-right: .5pt solid #b9bec6; border-bottom: .5pt solid #b9bec6; }

/* The leaf mark, high in the punch strip and well clear of the first hole. Small and
   pale: it is a check you make once, before running the job, not something anyone
   should notice on a page they are writing on. */
.pmark {
  position: absolute;
  font-size: 5.5pt;
  letter-spacing: .04em;
  color: #b9c2cc;
  transform: translateX(-50%);
  font-variant-numeric: tabular-nums;
}

/* Punch guides: where the holes go, so the page can be punched without eating a word.
   The gutter that keeps content clear of them is set inline, from the hole spacing. */
.hole {
  position: absolute;
  width: .28in;
  height: .28in;
  margin-top: -.14in;
  margin-left: -.14in;
  margin-right: -.14in;
  border: .5pt solid #d8dbe0;
  border-radius: 50%;
}

/* ── page furniture ──────────────────────────────────────────────────── */

.phead {
  display: flex;
  align-items: baseline;
  gap: .08in;
  padding-bottom: .07in;
  margin-bottom: .09in;
  border-bottom: 1pt solid var(--ink);
  flex: none;
}
.phead__title { font-size: 1.55em; font-weight: 700; letter-spacing: -.01em; }
.phead__sub { font-size: .95em; color: var(--ink-soft); }
.phead__right { margin-left: auto; font-size: .85em; color: var(--faint); text-align: right; }

.pfoot {
  flex: none;
  margin-top: .06in;
  padding-top: .05in;
  border-top: .5pt solid var(--rule-soft);
  font-size: .8em;
  color: var(--faint);
  display: flex;
  gap: .1in;
}
.pfoot__right { margin-left: auto; }

/* ── events ──────────────────────────────────────────────────────────── */

.pev {
  --pc: #4a4f57;
  display: flex;
  gap: .05in;
  align-items: baseline;
  padding: .015in .04in .015in .05in;
  border-left: 2.5pt solid var(--pc);
  background: color-mix(in srgb, var(--pc) 9%, #fff);
  margin-bottom: .025in;
  overflow: hidden;
  white-space: nowrap;
}
.pev--plain { background: none; }
.pev__t { font-variant-numeric: tabular-nums; color: var(--ink-soft); flex: none; }
.pev__title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.pev__loc { color: var(--faint); overflow: hidden; text-overflow: ellipsis; font-size: .9em; }
.pev--declined .pev__title { text-decoration: line-through; font-weight: 400; }

.pmore { font-size: .85em; color: var(--faint); padding-left: .05in; }

/* ── the hour grid ───────────────────────────────────────────────────── */

.pgrid { flex: 1; display: flex; min-height: 0; }
.pgrid__gutter { flex: none; position: relative; }
.pgrid__cols { flex: 1; display: grid; position: relative; min-width: 0; }

.phour {
  position: absolute;
  left: 0;
  right: 0;
  border-top: .5pt solid var(--rule);
}
.phour--half { border-top: .5pt dotted var(--rule-soft); }
.phourlabel {
  position: absolute;
  right: .04in;
  transform: translateY(-.055in);
  font-size: .78em;
  white-space: nowrap;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
/* The topmost label sits on the very edge of the page, where half of it would be
   trimmed off. It hangs below its line instead. */
.phourlabel--first { transform: translateY(0); }

.pcol { position: relative; border-left: .5pt solid var(--rule-soft); min-width: 0; }
.pcol:first-child { border-left: 0; }

/* Column shading is its own layer under the hour rules rather than a background on the
   column itself. A background on .pcol sits above the absolutely positioned rules and
   wipes them out — which is invisible on a week where most columns are white, and
   obvious on a single day, where the whole grid loses its lines. */
.pcolbg--weekend { background: #f6f7f8; }

.pblock {
  position: absolute;
  overflow: hidden;
  border-left: 2.5pt solid var(--pc);
  background: color-mix(in srgb, var(--pc) 11%, #fff);
  padding: 0 .02in 0 .03in;
  font-size: .92em;
  line-height: 1.12;
}
.pblock--plain { background: #fff; border: .5pt solid var(--rule); border-left: 2.5pt solid var(--pc); }
.pblock__t { color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.pblock__title { font-weight: 600; }

/* ── day headers, all-day strip ──────────────────────────────────────── */

.pdays { display: grid; flex: none; }
.pday { text-align: center; padding: .02in 0 .04in; border-left: .5pt solid var(--rule-soft); }
.pday:first-child { border-left: 0; }
.pday__dow { font-size: .8em; text-transform: uppercase; letter-spacing: .04em; color: var(--faint); }
.pday__num { font-size: 1.15em; font-weight: 700; }
.pday--today .pday__num { text-decoration: underline; text-underline-offset: .02in; }

.pallday { display: grid; flex: none; border-top: .5pt solid var(--rule); border-bottom: .5pt solid var(--rule); padding: .02in 0; }
.pallday__col { min-width: 0; padding: 0 .02in; border-left: .5pt solid var(--rule-soft); }
.pallday__col:first-child { border-left: 0; }

/* ── list layouts ────────────────────────────────────────────────────── */

.plist { flex: 1; min-height: 0; display: grid; gap: .09in; align-content: start; }
.pbox { min-width: 0; overflow: hidden; }
/* The same tinted tab the spread names its days with — grey through the week, blue at
   the weekend. A dashed underline was the old way of saying "weekend" and it said it
   far too quietly to find with a thumb. */
.pbox__head {
  display: flex;
  align-items: baseline;
  gap: .05in;
  padding: .025in .05in;
  margin-bottom: .03in;
  background: #eceff3;
  border-bottom: .75pt solid var(--rule);
}
.pbox--weekend .pbox__head { background: #d6eefb; }
.pbox__dow { font-size: .85em; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-soft); }
.pbox__num { font-weight: 700; font-size: 1.05em; }
.pbox--empty { color: var(--faint); }

/* One day per row, for a whole month on one page. */
.prow {
  display: flex;
  gap: .06in;
  align-items: center;
  border-bottom: .5pt solid var(--rule-soft);
  padding: .012in 0;
  overflow: hidden;
  white-space: nowrap;
}
.prow--weekend { background: #f6f7f8; }
.prow--month-start { border-top: .75pt solid var(--ink); }
.prow__day { flex: none; width: .62in; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.prow__day b { color: var(--ink); }
.prow__events { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.prow__one { margin-right: .07in; }
.prow__one::before {
  content: "";
  display: inline-block;
  width: .05in;
  height: .05in;
  border-radius: 50%;
  background: var(--pc);
  margin-right: .03in;
  vertical-align: middle;
}

/* ── the month grid ──────────────────────────────────────────────────── */

.pmonth { flex: 1; display: flex; flex-direction: column; min-height: 0; }
.pmonth__dows { display: grid; grid-template-columns: repeat(7, 1fr); flex: none; }
.pmonth__dow {
  text-align: center;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--faint);
  padding-bottom: .02in;
  border-bottom: .75pt solid var(--ink);
}
.pmonth__grid { flex: 1; display: grid; grid-template-columns: repeat(7, 1fr); min-height: 0; }
.pcell {
  min-width: 0;
  overflow: hidden;
  border-right: .5pt solid var(--rule-soft);
  border-bottom: .5pt solid var(--rule);
  padding: .02in .03in;
}
.pcell:nth-child(7n) { border-right: 0; }
.pcell--weekend { background: #f7f8f9; }
.pcell--outside { color: var(--faint); background: #fbfbfc; }
.pcell--outside .pev { opacity: .55; }
.pcell__num { font-weight: 700; font-size: .95em; }
.pcell--today .pcell__num { text-decoration: underline; text-underline-offset: .02in; }

/* ── the planner spread ──────────────────────────────────────────────────
 * A week over two graph-paper pages, after the A5 refills that live in a ring binder.
 * Nearly all of it is empty on purpose: what is printed is the skeleton of the week,
 * and the reason to carry it about is the part you fill in yourself.
 */

.pspread { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* Year and month as boxes to write in rather than only as printed text: the page is
   often filled in weeks before it is used, and a planner page one has written the
   month on oneself is easier to find by thumb. */
.pspread__head {
  display: flex; align-items: center; gap: .14in; flex: none;
  padding-bottom: .06in; margin-bottom: .07in;
  border-bottom: 1pt solid var(--ink);
}
.pfill { display: flex; align-items: baseline; gap: .05in; }
.pfill__k {
  font-size: .78em; text-transform: uppercase; letter-spacing: .08em; color: var(--faint);
}
.pfill__v {
  min-width: .62in; padding: 0 .04in .01in;
  border-bottom: .75pt solid var(--rule);
  font-weight: 600; text-align: center;
}
.pspread__wk {
  margin-left: auto; font-size: .82em; color: var(--faint);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

.pspread__cols { flex: 1; display: grid; min-height: 0; }
/* The same page turned through ninety degrees: on a full portrait sheet the days run
   down as bands rather than across as columns, because seven columns on 8.5in is an
   inch each — a week you can read and not write on. */
.pspread__rows { flex: 1; display: grid; min-height: 0; }
.pspread__rows > * { border-top: 1pt solid var(--ink-soft); }
.pspread__rows > :first-child { border-top: 0; }

.pdaycol--split {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-left: 1pt solid var(--ink-soft);
}
.pdaycol--split > .pdaybox { border-left: 0; }
.pdaycol--split-band { border-left: 0; }
.pdaycol--split-band > .pdaybox { border-top: 0; }
.pdaycol--split-band > .pdaybox + .pdaybox { border-top: 1pt solid var(--ink-soft); }
/* The rule between two days has to beat the graph under it, or the week reads as one
   undivided field of squares. */
.pdaybox {
  display: flex; flex-direction: column; min-height: 0; min-width: 0;
  border-left: 1pt solid var(--ink-soft);
}
.pdaybox--half + .pdaybox--half { border-top: 1pt solid var(--ink-soft); }

/* A band: the tab is a strip down the left instead of a bar across the top, which is
   how the paper refills read when they are the right way up. */
.pdaybox--band { flex-direction: row; border-left: 0; }
.pdaybox--band .pdaytab {
  flex: none; width: .95in;
  flex-direction: column; align-items: flex-start; justify-content: center; gap: 0;
  border-bottom: 0; border-right: .75pt solid var(--rule);
}
.pdaybox--band .pdaytab__num { margin-left: 0; font-size: 1.25em; line-height: 1.1; }
.pdaybox--half { flex: 1; }
.pspread__cols > :first-child > .pdaybox:first-child,
.pspread__cols > .pdaybox:first-child { border-left: 0; }

/* The tab that names the day. Grey through the week and blue at the weekend, which is
   the one piece of colour these pages carry and the thing you find with a thumb. */
.pdaytab {
  flex: none; display: flex; align-items: baseline; gap: .05in;
  padding: .025in .05in;
  background: #eceff3;
  border-bottom: .75pt solid var(--rule);
}
.pdaytab--weekend { background: #d6eefb; }
.pdaytab--today { box-shadow: inset 0 -2pt 0 var(--ink); }
.pdaytab__dow {
  font-size: .82em; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pdaytab__num { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

.pdaybody { flex: 1; min-height: 0; overflow: hidden; padding: .03in .04in; }
.pdaybody .pev { background: none; border-left-width: 2pt; font-size: .9em; }

/* 5mm graph, the same ground the refills use, with a heavier rule every fifth square.
 *
 * Four one-line gradients tiled by background-size rather than four repeating
 * gradients: a repeating gradient has to divide its stops into the element's own width,
 * and the rounding that follows shows up as a grid whose squares are visibly not
 * square. Tiling a single line at an absolute size cannot drift.
 */
.pgraph {
  --graph: 5mm;
  --graph-major: 25mm;
  /* 1px, not a fraction of a point: the tile is rasterised at about 19px square, and a
     sub-pixel line inside it rounds away to nothing — a grid that is simply absent
     rather than fine. On paper 1px is a quarter of a millimetre, which is a hairline. */
  background-image:
    linear-gradient(to right, var(--graph-major-line) 0, var(--graph-major-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graph-major-line) 0, var(--graph-major-line) 1px, transparent 1px),
    linear-gradient(to right, var(--graph-line) 0, var(--graph-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graph-line) 0, var(--graph-line) 1px, transparent 1px);
  background-size:
    var(--graph-major) var(--graph-major),
    var(--graph-major) var(--graph-major),
    var(--graph) var(--graph),
    var(--graph) var(--graph);
  background-position: 0 0;
}
.printdoc { --graph-line: #dde5ee; --graph-major-line: #c4d2e0; }

/* ── ruled space ─────────────────────────────────────────────────────── */

/* Lines drawn with a gradient rather than as elements, so the block rules whatever
   height is left over instead of needing a row count worked out in advance. */
/* Space to write, on the same 5mm graph as the planner spread rather than on rules.
   These pages share a binder with the spread, and two different grounds in one binder
   looks like two different products. Graph also takes a sketch and a column of figures,
   which rules do not. */
.plines {
  flex: 1;
  min-height: .5in;
  --graph: 5mm;
  --graph-major: 25mm;
  background-image:
    linear-gradient(to right, var(--graph-major-line) 0, var(--graph-major-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graph-major-line) 0, var(--graph-major-line) 1px, transparent 1px),
    linear-gradient(to right, var(--graph-line) 0, var(--graph-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--graph-line) 0, var(--graph-line) 1px, transparent 1px);
  background-size:
    var(--graph-major) var(--graph-major), var(--graph-major) var(--graph-major),
    var(--graph) var(--graph), var(--graph) var(--graph);
}
/* There is deliberately no finer variant. Two pages cut from one sheet sit next to each
   other in the binder, and a 4mm grid beside a 5mm one reads as a mistake rather than as
   a choice — the squares have to mean the same thing on every page. */
.plabel {
  flex: none;
  font-size: .8em;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--faint);
  margin: .07in 0 .03in;
  border-top: .75pt solid var(--ink);
  padding-top: .03in;
}

/* ── preview, on screen only ─────────────────────────────────────────── */

.print-preview {
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
  overflow: auto;
  max-height: min(52vh, 460px);
}
.print-preview__scaler { transform-origin: top left; }
.print-preview .psheet {
  box-shadow: 0 1px 2px rgba(16, 24, 38, .18), 0 8px 20px -12px rgba(16, 24, 38, .4);
  margin-bottom: .22in;
}
.print-preview .psheet:last-child { margin-bottom: 0; }

.print-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
/* Two columns of settings need about 480px between them; a phone gets one. */
@media (max-width: 560px) {
  .print-grid { grid-template-columns: 1fr; }
}
.print-grid .field { margin-bottom: 12px; }
.print-span { grid-column: 1 / -1; }
.print-checks { display: flex; flex-wrap: wrap; gap: 4px 14px; }
.print-checks label { display: flex; align-items: center; gap: 5px; font-size: 12.5px; }

/* ── printing ────────────────────────────────────────────────────────── */

@media print {
  /* Scoped to a print this app started. An unscoped rule would also catch the browser's
     own Ctrl+P, and hiding everything but a document that is not there prints a blank
     sheet — worse than the useless screenshot of the app it would otherwise produce. */
  .is-printing body > *:not(.printdoc) { display: none !important; }
  .is-printing .printdoc { display: block !important; }
  .psheet { box-shadow: none; margin: 0; }
}

/* ── the year planner ───────────────────────────────────────────────────
   Six months to a page, so a year is a spread and sits flat in a binder. Two
   columns of three rather than one of six: a month box a third of a page tall has
   room to write in, and a sixth of one does not. */
.pyear__head {
  display: flex; align-items: baseline; gap: .1in;
  border-bottom: 1.5pt solid var(--ink); padding-bottom: .04in; margin-bottom: .07in;
}
.pyear__title { font-size: 12pt; font-weight: 700; letter-spacing: -.01em; }
.pyear__note { font-size: 7.5pt; color: var(--ink-soft); margin-left: auto; text-transform: uppercase; letter-spacing: .06em; }

.pyear {
  flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr;
  gap: .08in; min-height: 0;
}
.pmonth {
  border: .75pt solid var(--ink-soft); border-radius: .04in;
  padding: .05in .06in; display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.pmonth__name {
  font-size: 8pt; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  border-bottom: .5pt solid var(--ink-soft); padding-bottom: .02in; margin-bottom: .04in;
}
/* Ruled, because a box you are meant to write in should say so. Faint enough that the
   writing is what you see afterwards, not the rules. */
.pmonth__lines { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.pmonth__line { height: .26in; border-bottom: .4pt solid var(--rule, #c9c9c9); }

.pmonth__list { flex: 1; display: flex; flex-direction: column; gap: .01in; min-height: 0; overflow: hidden; }
.pmonth__item { display: flex; gap: .05in; font-size: 7.5pt; line-height: 1.25; }
.pmonth__day { flex: none; width: .16in; text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.pmonth__what { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmonth__empty { font-size: 7.5pt; color: var(--ink-soft); }
.pmonth__more { font-size: 6.5pt; color: var(--ink-soft); margin-top: .02in; }

/* ── the journal as a document ──────────────────────────────────────────
   Not a planner page. The rest of this stylesheet fits content into fixed panels
   because a page of a diary is a shape you design; a journal is continuous writing
   and the only sensible page break is wherever the words happen to run out. So this
   is one column and the browser paginates it. */
.jdoc {
  width: 8.27in; min-height: 11.69in;
  padding: .85in .9in 1in;
  font-size: 10.5pt; line-height: 1.55; color: var(--ink);
}
.jdoc__head { margin-bottom: .34in; border-bottom: 1.5pt solid var(--ink); padding-bottom: .1in; }
.jdoc__head h1 { margin: 0; font-size: 21pt; letter-spacing: -.015em; }
.jdoc__sub { margin: .04in 0 0; font-size: 9pt; color: var(--ink-soft); }

/* The month heading pulls the next entry with it: a heading stranded at the foot of a
   page, with what it heads overleaf, is the classic printing fault. */
.jdoc__month {
  margin: .3in 0 .12in; font-size: 11pt; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft);
  border-bottom: .5pt solid var(--ink-soft); padding-bottom: .04in;
  break-after: avoid; break-inside: avoid;
}
.jdoc__month:first-child { margin-top: 0; }

/* An entry split across a page turn reads as two entries, so it is kept whole —
   unless it is longer than a page, where `avoid` is ignored and it flows, which is
   the right answer to the only case where it cannot be honoured. */
.jdoc__entry { margin: 0 0 .22in; break-inside: avoid; }
.jdoc__when { font-size: 8.5pt; color: var(--ink-soft); display: flex; gap: .08in; }
.jdoc__title { margin: .02in 0 .05in; font-size: 12pt; font-weight: 600; }
/* The writing as written: the line breaks somebody put in are part of what they wrote. */
.jdoc__note { white-space: pre-wrap; overflow-wrap: anywhere; }
.jdoc__empty { color: var(--ink-soft); font-style: italic; }

/* On screen — the preview and nothing else — it still needs to look like paper. */
.print-preview .jdoc { background: #fff; box-shadow: 0 1px 6px rgb(0 0 0 / .18); margin: 0 auto; }