/* ── AI declaration marks ────────────────────────────────────────────────
   The need2know mark, where this site declares how much of something was
   made with AI: beside an aside's reading time, beside a book's price, and
   once in the app's own footer for the site itself.

   The artwork is one set of black SVGs used as a MASK over currentColor
   rather than drawn as a picture, so the shape comes from the file and the
   colour from the text the mark sits in. One set of files, any palette.

   ONE size, 48px, everywhere. A level is read by counting the pins around
   the chip; the scheme's own floor for that is 40px, which is where the
   count stops being possible at all and so a bad place to sit. Nothing here
   may shrink a mark below it. */

.ai-mark {
	display:		inline-flex;
	align-items:		center;
	gap:			0.5rem;
	text-decoration:	none;
	vertical-align:		middle;
	/* Pink, the site's own loud ink -- the same as the owl. Teal was the
	   quiet choice and it read as a stray green thing nobody could place. */
	color:			var(--col-pink, #ff3cc7);
}

.ai-mark-ink {
	display:		inline-block;
	flex:			none;
	width:			var(--ai-mark-size, 48px);
	height:			var(--ai-mark-size, 48px);
	background-color:	currentColor;
	-webkit-mask-repeat:	no-repeat;
	mask-repeat:		no-repeat;
	-webkit-mask-position:	center;
	mask-position:		center;
	-webkit-mask-size:	contain;
	mask-size:		contain;
}

.ai-mark-words {
	letter-spacing:		0.01em;
}

.ai-mark:hover,
.ai-mark:focus-visible {
	color:			var(--col-purple, #4c1a57);
}

.ai-mark:focus-visible {
	outline:		2px solid var(--col-purple, #4c1a57);
	outline-offset:		3px;
	border-radius:		2px;
}

/* ── Where the marks sit ─────────────────────────────────────────────── */

/* In the meta line of a card and of a post, immediately right of the reading
   time. That line is text-sized and the mark is 48px, so it becomes a
   centred row rather than a line of text with something tall dropped in. */
.aside-item-meta {
	display:		flex;
	align-items:		center;
	flex-wrap:		wrap;
}

/* The line separates its parts with a dot, which cannot be used before the
   mark -- it would sit inside the link and read as punctuation the mark
   owns. So the mark brings its own space instead. */
.aside-item-meta .ai-mark {
	margin-left:		0.7rem;
}

/* `asides.css` sets this line to `align-items: baseline`, so a 48px mark sat
   ON the text baseline and stuck up above the line -- which is what made it
   look oversized. Centred here, with a weight that beats it. */
.aside-item-meta {
	align-items:		center;
}

/* A book's mark in the detail pane, by the price, which is where a buyer is
   being told the other things they are deciding on. */
.detail-declare {
	margin:			0.85rem 0 0;
}

/* The app's own line, in the shell so it is there on every tab.

   Right-aligned, to the same edge as everything else in the shell, rather
   than centred under nothing. The shell is a column of fixed height, so this
   must not grow or shrink: it takes its own height and the window box takes
   the rest. Equal padding above and below -- it was sitting hard against the
   bottom of the viewport. */
.app-declare {
	display:		flex;
	justify-content:	flex-end;
	align-items:		center;
	flex-shrink:		0;
	/* The 28px is the shell's own gutter -- `--content-pad` insets the window
	   box by exactly that, so taking the same figure lines this up with the
	   box's right edge rather than overhanging it by the 8px the render
	   measured. */
	padding:		0.7rem 28px;
	font-size:		0.95rem;
}

@media (prefers-reduced-motion: no-preference) {
	.ai-mark {
		transition:	color 0.18s ease;
	}
}