/* Printing a planner means printing a week: a month on paper is either six
   sheets of guesswork about where the browser will cut it, or one unreadable
   page. Every week is already its own group in the markup, so here each one
   becomes a grid of its own and takes a sheet.

   Loaded after planner.css by the :app manifest, which is what lets these rules
   undo the screen layout without reaching for !important. */
@media print {
	/* Landscape, because the planner is wider than it is tall: seven days down
	   the side against however many people are in the household. */
	@page {
		size: A4 landscape;
		margin: 10mm;
	}

	html,
	body {
		background: #fff;
	}

	body {
		/* Points, not percentages: paper has no viewport to be relative to, and
		   the whole planner is sized in em off this. */
		font-size: 10pt;
	}

	/* Colour is not decoration here — it is which column an item belongs to and
	   whether it is pencilled in. Without this the browser drops the fills and
	   the sheet says nothing. */
	.planner-stack,
	.planner-stack * {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}

	/* Nothing you can press survives the trip to paper. */
	.month-menu-wrapper,
	.flash-container,
	dialog,
	.day--add,
	.day--add-item {
		display: none;
	}

	/* The sticky header belongs to the scroll container; each week carries its
	   own copy of the column names instead, so every sheet is labelled. Only
	   where those copies exist — the home page's preview has no week groups and
	   still wants its one header row. */
	.planner-stack:has(.planner-week) .planner-headers {
		display: none;
	}

	.planner-stack {
		box-shadow: none;
		max-width: none;
		/* Fill the sheet rather than the screen's measure, and let the columns
		   divide whatever is left after the day gutter. */
		--planner-day-width: 18mm;
		--planner-column-min: 0;
	}

	.planner-wrapper {
		background: none;
		overflow: visible;
		padding: 0;
	}

	/* Stops being the grid: the weeks inside it are the grids now, and a block
	   parent is what lets them break onto separate sheets. Guarded on the groups
	   being there, so the home page's preview keeps its own single grid. */
	.planner:has(.planner-week) {
		display: block;
		min-width: 0;
	}

	.planner .planner-week {
		display: grid;
		grid-template-columns: var(--planner-template);
		/* A week and its heading, then the next sheet. */
		break-after: page;
		/* The heading and the column names take only what they need; the seven
		   day rows below them get a floor of 20mm each, so a quiet week still
		   has room written in — on paper the empty half of a day is where you
		   write — rather than collapsing to a strip of nothing. 7 × 20mm leaves
		   slack inside an A4 sheet's 190mm for the days that run long. */
		grid-template-rows: auto auto;
		grid-auto-rows: minmax(20mm, auto);
	}

	/* Otherwise the last week is followed by a blank sheet. */
	.planner .planner-week:last-child {
		break-after: auto;
	}

	/* A day should not be torn in half if a heavy week does spill. */
	.planner .day,
	.planner .day-row,
	.planner .day-cell {
		break-inside: avoid;
	}

	.planner .planner-week-heading {
		align-items: baseline;
		display: flex;
		gap: 0.75em;
		grid-column: 1 / -1;
		justify-content: space-between;
		padding: 0 0 1em;
	}

	.planner-week-heading-range {
		font-size: 1.5em;
		font-weight: 800;
		letter-spacing: -0.02em;
	}

	.planner-week-heading-meta {
		color: var(--color-text-muted);
		font-size: 0.95em;
		font-weight: 600;
	}

	/* display: contents, so the header cells drop straight into the week's grid
	   and land on its tracks. */
	.planner .planner-week-headers {
		display: contents;
	}

	.planner .planner-week-headers .header {
		align-items: center;
		border-bottom: 1px solid var(--color-text-subtle);
		display: flex;
		font-size: 0.8em;
		font-weight: 700;
		gap: 0.5em;
		justify-content: center;
		letter-spacing: 0.05em;
		padding: 0 0.25em 0.4em;
		text-transform: uppercase;
	}

	.planner .planner-week-headers .header-dot {
		background: var(--item-accent-color, var(--color-text-subtle));
		border-radius: 50%;
		height: 0.65em;
		width: 0.65em;
	}

	/* Nothing is pinned on paper — there is nothing to scroll past. */
	/* Relative rather than static: sticky paginates badly and has to go, but the
	   date column is what a household run's stroke is positioned against, and a
	   static box is not something to position against at all. */
	.planner .day {
		font-size: 1.5rem;
		position: relative;
	}

	/* A grid row is taller than one line of items, so start them at the top
	   instead of floating them in the middle of the box. */
	.planner .day-cell {
		justify-content: flex-start;
		min-height: 0;
		padding: 0.3em 0.4em;
		padding-left: calc(0.4em + var(--run-lanes, 0) * var(--run-pitch));
	}

	/* A week comes off the printer on its own, so a sheet can hold nothing but
	   the middle of a run. The name is written again at the top of each one —
	   the only place it is ever repeated, and only because the sheet before it
	   is not in your hand. */
	.planner .day--run-name--continued {
		display: block;
	}

	/* And with it the band it is written in, and the row that band needs. */
	.planner .day-row--continued {
		display: flex;
	}


	.planner .day--banded-in-print {
		grid-row: span 2;
	}

	.planner .day--item-stack {
		gap: 0.25em;
	}

	/* Faded is fine on screen, where you can lean in. Printed it is just hard to
	   read, and a week is often printed after it has begun. */
	.planner .day--item-container.day--item-past,
	.planner .day--run-past {
		opacity: 1;
	}

	.planner .day--item {
		box-shadow: none;
		padding: 0.35em 0.5em;
	}

	/* On paper there is no truncating and coming back to it later: a title that
	   does not fit wraps. */
	/* Ink, not colour: the card is drawn as an outline on paper, and the mark
	   goes with the title in the same weight the rest of the line has. */
	.planner .day--item-shared-mark {
		opacity: 1;
	}

	.planner .day--item-title {
		font-size: 0.85em;
		overflow: visible;
		white-space: normal;
	}

	.planner .day--item-container.day--item-all .day--item {
		flex-wrap: wrap;
	}

	/* The "3 more items" fold is a screen affordance; paper shows the lot. */
	.planner .day--more > .day--more-toggle {
		display: none;
	}

	.planner .day--more::details-content {
		content-visibility: visible;
		display: block;
	}

	.planner .day--more > .day--more-items {
		display: flex;
		padding-top: 0.25em;
	}

	/* Stickers hang off the right of their card by design. Shrunk and pulled in,
	   so the last column's stickers stay on the sheet. */
	.planner .day--item-sticky {
		height: 26px;
		right: -13px;
		width: 26px;
	}

	.planner .day--item-sticky-standalone {
		height: 34px;
		transform: none;
		width: 34px;
	}
}