/* Mime's kit (21 Oct 2026, the Web Director's craft): black and white only. The tile is a dashed rounded square in the
	logo's line with an ink glyph (mime_kit.tile); mime-kit.js marches its dashes and plays the glyph. Here: the tile's
	hover tint and press, where tiles sit (headings, cover captions, doc cards, pills), the New spine in Mime's dashes,
	and the missing page's scene. */
.mm-tile { display: inline-flex; flex: none; color: #000; line-height: 0; vertical-align: middle; }
.mm-svg { display: block; overflow: visible; transition: scale .6s var(--ease); }
.mm-fill { fill: currentColor; opacity: 0; transition: opacity .6s var(--ease); }
@media (hover: hover) { :is(a, [data-mm-hot], h2):hover .mm-fill { opacity: .08; transition-duration: .35s; } }
:is(a, [data-mm-hot], h2):focus-visible .mm-fill { opacity: .08; transition-duration: .35s; }
:is(a, [data-mm-hot]):active .mm-svg { scale: .9; transition-duration: .4s; }

/* where tiles sit */
.doc-h:has(> .mm-tile) { display: flex; align-items: center; gap: 12px; }
.doc-h > .mm-tile { margin: -4px 0; }
.doc-h:has(> .mm-tile)::after { content: ""; flex: 1; align-self: center; height: 2px; margin-left: 4px; border-radius: 2px; opacity: .14;
	background: repeating-linear-gradient(90deg, #000 0 7px, transparent 7px 13px); }
.doc-shot figcaption:has(> .mm-tile) { display: flex; align-items: center; gap: 9px; }
.doc .lrn-card .mm-tile, .doc.lrn2 .lrn-card .mm-tile { margin: -1px 0 2px -1px; }
.pill-ico:has(> .mm-tile) { background: none; }

/* a picture's invisible box (mime_kit.traced): mime-kit.js fades the outline in and crawls it on hover */
.mm-traced { position: relative; display: block; }
.mm-boxed { position: relative; }
.mm-trace { position: absolute; left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); overflow: visible; color: #000; pointer-events: none; }

/* Up and coming: each item an empty dashed box, still to be drawn */
.doc-list.mm-soon { padding-left: 0; list-style: none; }
.mm-soon > li { position: relative; padding-left: 28px; }
.mm-soon > li::before { content: ""; position: absolute; left: 0; top: .2em; width: 17px; height: 17px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Crect x='.87' y='.87' width='15.26' height='15.26' rx='3.76' fill='none' stroke='%23000' stroke-width='1.74' stroke-linecap='round' stroke-dasharray='3.48 3.34'/%3E%3C/svg%3E") center / contain no-repeat; }

/* New's spine, in Mime's dashes (spine.css draws it; here the line is dashed and a day is a small rounded square) */
.mime .spine-day::before { background: repeating-linear-gradient(to bottom, var(--spine-accent, #000) 0 8px, transparent 8px 14px); }
.mime .spine-node { border-radius: 4px; }

/* the missing page: the master's head pressed on a dashed wall */
.mm-lost { text-align: left; }
.mm-missing { display: flex; justify-content: flex-start; margin: 4px 0 6px -26px; }
.mm-scene { display: block; width: 236px; height: auto; overflow: visible; }

@media (max-width: 760px) {
	.mm-missing { margin-left: -18px; }
	.mm-scene { width: 196px; }
}
@media (prefers-reduced-motion: reduce) {
	.mm-svg, .mm-fill { transition-duration: 0s !important; }
}