/**
 * The print sheet.
 *
 * Loaded at media="print", as its own file rather than an @media print block
 * inside the main stylesheet, so it never costs render-blocking bytes on the
 * play path and tools/print-check.js can diff it on its own.
 *
 * Two things govern every rule in here, and both are about what a real printer
 * actually does rather than what the screen looks like:
 *
 * 1. "Background graphics" is OFF by default in Chrome's print dialog. Any rule
 *    that depends on a background colour, a gradient or a colour-mix fill prints
 *    as nothing. print-color-adjust: exact does not help, because it only takes
 *    effect once the user has opted in - and a print stylesheet that works only
 *    for people who changed a setting is not a print stylesheet. So everything
 *    here is carried by borders, weight and glyphs.
 *
 * 2. The board sizes its type in cqi against container-type: inline-size. In a
 *    paginated context that container resolves against the print box, not the
 *    screen box, and engines disagree about what that is - the observed failure
 *    is a grid printed at about 6pt or about 40pt. Every font size on the sheet
 *    is therefore an explicit pt value, and print-check.js asserts the COMPUTED
 *    size rather than the declared one.
 */

/* ------------------------------------------------------------------ page --- */

@page {
	margin: 12mm;
}

/* ---------------------------------------------------------- full inversion --- */

/*
 * The whole palette, flipped by overriding the nine tokens and nothing else.
 * This is the second time the token contract earns its keep: the board survived
 * the port from a light nature site to a dark astronomy one without a structural
 * change, and it survives light-on-dark to black-on-white the same way.
 */
.wsg {
	--wsg-ink: #000;
	--wsg-cream: #fff;
	--wsg-mint: #fff;
	--wsg-cell: #fff;
	--wsg-cell-hover: #fff;
	--wsg-sky: #000;
	--wsg-leaf: #000;
	--wsg-coral: #000;

	--wsg-ink-72: #222;
	--wsg-ink-55: #444;
	--wsg-ink-38: #666;
	--wsg-ink-18: #999;
	--wsg-ink-08: #bbb;

	--wsg-shadow: none;
	--wsg-font-scale: 1;

	background: #fff !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	color: #000 !important;

	/*
	 * Drop the container context entirely. Nothing below sizes in cqi any more,
	 * and leaving it in place invites an engine to resolve one it finds in an
	 * inherited rule against a box that does not exist on paper.
	 */
	container-type: normal;
}

/* --------------------------------------------------------------- hidden --- */

/*
 * Everything interactive, and every ad container. The named Mediavine and
 * grow-for-wp containers rather than a blanket iframe rule: hiding all iframes
 * would take embedded content with it, and this page may carry some in its prose.
 */
.wsg-tools,
.wsg-stats,
.wsg-nav,
.wsg-complete,
.wsg-btn-hint,
.wsg-toast,
.wsg-sheets,
.wsg-topics,
.wsg-topic-foot,
.wsg-capsules,
.wsg-directory,
.wsg-postpromo,
[id^="mv-"],
[id^="mv_"],
[class*="mv-ad"],
[class*="mv-sticky"],
#mv-grow-root,
.mv-video-target,
.adthrive,
[class*="grow-sticky"],
.site-header,
.site-footer,
.t33-page-hero,
.t33-stars,
.breadcrumbs,
.ruki-related-posts-wrapper,
#comments,
.comments-area,
.widget-area,
.sidebar,
nav {
	display: none !important;
}

/* ---------------------------------------------------------------- layout --- */

.wsg-board {
	display: block !important;
	grid-template-columns: none !important;
}

.wsg-grid-wrap {
	page-break-inside: avoid;
	break-inside: avoid;
	margin: 0 0 8mm;
}

.wsg-grid {
	/*
	 * 12mm margins leave 186mm printable on A4 (210mm) and 192mm on US Letter
	 * (216mm), so 186mm is the number that covers both and print-check.js fails
	 * above it. The grid is held well inside that at 160mm, which keeps a 16x16
	 * cell at 10mm -- big enough to write a circle around by hand, which is what
	 * a printed word search is for.
	 */
	max-width: 160mm;
	margin: 0 auto;
	background: #fff !important;
	border: 0 !important;
	box-shadow: none !important;
}

.wsg-cell {
	/*
	 * Real <button> elements. UA print stylesheets strip button chrome
	 * inconsistently, so every visual property is restated rather than assumed.
	 */
	border: 0.5pt solid #000 !important;
	background: none !important;
	background-color: transparent !important;
	color: #000 !important;
	box-shadow: none !important;
	font-size: 11pt !important;
	font-weight: 500 !important;
	-webkit-appearance: none;
	appearance: none;
}

/* The answer key: an outline and a bold letter, both of which survive
   background-graphics-off. */
.wsg-cell.is-solution {
	border: 1.6pt solid #000 !important;
	box-shadow: none !important;
	font-weight: 900 !important;
	color: #000 !important;
}

/* ------------------------------------------------------------- word list --- */

.wsg-side {
	page-break-inside: avoid;
	break-inside: avoid;
}

.wsg-list-title {
	font-size: 11pt !important;
	color: #000 !important;
	margin: 0 0 3mm;
}

.wsg-wordlist {
	column-count: 3;
	column-gap: 8mm;
	display: block !important;
	grid-template-columns: none !important;
}

.wsg-keylist {
	column-count: 2;
}

.wsg-word {
	break-inside: avoid;
	page-break-inside: avoid;
	background: none !important;
	border: 0 !important;
	color: #000 !important;
	font-size: 10pt !important;
	padding: 0 0 1.5mm !important;
	text-decoration: none !important;
}

/* A found word is struck through on screen by colour alone; on paper the colour
   is gone, so nothing should look different from an unfound one. */
.wsg-word.is-found .wsg-word-text {
	text-decoration: none !important;
}

.wsg-keylist .wsg-word-where {
	color: #333 !important;
	font-size: 8.5pt !important;
}

/* ---------------------------------------------------------------- header --- */

.wsg-head {
	display: block !important;
	margin: 0 0 5mm;
}

.wsg-theme {
	font-size: 16pt !important;
	color: #000 !important;
	margin: 0 0 1.5mm;
}

.wsg-blurb {
	font-size: 9.5pt !important;
	color: #333 !important;
	margin: 0;
}

/* ------------------------------------------------------------ print mark --- */

/*
 * The only thing on the sheet that is invisible on screen. A photocopied
 * worksheet circulating in a school is a brand impression, and when somebody
 * types the line back in it is a visit. It is the entire mechanism by which a
 * printable earns anything, and it costs one line of paper.
 */
.wsg-printmark {
	display: block !important;
	margin-top: 6mm;
	font-size: 8pt;
	color: #555 !important;
	text-align: center;
	letter-spacing: 0.06em;
}