/* ============================================================
   Mood pin — a pin-back button from the comic-shop counter (v0.7.41).

   The shell is CSS: a rolled rim in a palette shade, a shallow dome,
   grain and scuffs, and a contact shadow outside the clipped face.
   The face is one inline SVG from inc/mood-pin.php: a halftone field,
   a registration mark, the motif printed in two plates (the accent
   plate nudged under the ink plate, the ink plate roughened by a
   shared displacement filter), and the mood word set by layout —
   along the lower or upper rim, big and centered, stacked, or a touch
   crooked. Raw hexes on the pin are deliberate: a physical pin looks
   the same in dark mode; only its shadow on the page changes. The
   inks arrive as custom properties from inc/mood-pin.php.
   ============================================================ */

.cr-pin-set {
	display: inline-grid;
	justify-items: center;
	gap: 0.25rem;
	vertical-align: middle;
}

.cr-pin {
	--pin-size: 9rem;
	--pin-scale: 1;
	--pin-face: #ebebeb;
	--pin-ink: #241c4a;
	--pin-accent: #fb8500;
	--pin-rim-hi: #7a6fb8;
	--pin-rim-lo: #241c4a;
	--pin-tilt: 0deg;
	--pin-wear: 0deg;
	--pin-shadow: 36, 28, 74;
	position: relative;
	display: block;
	width: calc(var(--pin-size) * var(--pin-scale));
	height: calc(var(--pin-size) * var(--pin-scale));
	flex: none;
	margin: 0.2rem 0 0.1rem;
	transform: rotate(var(--pin-tilt));
	line-height: 1;
	color: var(--pin-ink);
}
.cr-pin--single {
	--pin-size: 12rem;
	--pin-scale: 1;
}

.cr-pin__rim,
.cr-pin__face,
.cr-pin__gloss,
.cr-pin__wear {
	position: absolute;
	inset: 0;
	display: block;
	border-radius: 50%;
}

/* Rolled edge in the pin's rim shade, lit from the upper left; the face
   sits up and to the left inside it, so the lower-right lip reads as
   thickness. The contact shadow lives here, outside the face's clip. */
.cr-pin__rim {
	background: conic-gradient(
		from 215deg,
		var(--pin-rim-hi),
		var(--pin-rim-lo) 24%,
		color-mix(in srgb, var(--pin-rim-hi) 55%, var(--pin-rim-lo)) 42%,
		var(--pin-rim-lo) 60%,
		color-mix(in srgb, var(--pin-rim-hi) 70%, var(--pin-rim-lo)) 76%,
		var(--pin-rim-hi)
	);
	box-shadow:
		inset 0 0 0 1px rgba(36, 28, 74, 0.4),
		inset -2px -3px 3px rgba(36, 28, 74, 0.45),
		inset 1px 1px 2px rgba(255, 255, 255, 0.35),
		0 1px 0 rgba(var(--pin-shadow), 0.55),
		0 2px 2px -1px rgba(var(--pin-shadow), 0.55),
		0 5px 6px -3px rgba(var(--pin-shadow), 0.38),
		0 12px 16px -10px rgba(var(--pin-shadow), 0.3);
}

/* The face: printed paper under matte laminate. The dome is one quiet
   light-to-dark sweep (v0.7.41: about a third softer than before). */
.cr-pin__face {
	inset: 2.2% 3.8% 3.8% 2.2%;
	overflow: hidden;
	background:
		linear-gradient(148deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.02) 40%, rgba(36, 28, 74, 0) 55%, rgba(36, 28, 74, 0.07) 100%),
		var(--pin-face);
	box-shadow:
		inset -2px -3px 5px -3px rgba(36, 28, 74, 0.24),
		inset 2px 2px 4px -3px rgba(255, 255, 255, 0.3),
		inset 0 0 0 1px rgba(36, 28, 74, 0.16);
}

/* ---- The printed face ---- */
.cr-pin__art {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	overflow: visible;
	color: var(--pin-ink);
}
/* Stroke widths live on the SVG as attributes (a plate's default of 7 is
   inherited; a motif's own thinner lines win), so the CSS sets only inks. */
.cr-pin__art .i { fill: none; stroke: var(--pin-ink); stroke-linecap: round; stroke-linejoin: round; }
.cr-pin__art .if { fill: var(--pin-ink); stroke: none; }
.cr-pin__art .a { fill: var(--pin-accent); stroke: none; }
.cr-pin__art .as { fill: none; stroke: var(--pin-accent); stroke-linecap: round; stroke-linejoin: round; }
/* The accent plate, printed first and a hair off register. */
.cr-pin__plate--a { opacity: 0.85; }
.cr-pin__plate--a .i,
.cr-pin__plate--a .as { stroke: var(--pin-accent); fill: none; }
.cr-pin__plate--a .if,
.cr-pin__plate--a .a { fill: var(--pin-accent); stroke: none; }
.cr-pin__halftone { opacity: 0.9; }
.cr-pin__echo { fill: var(--pin-accent); opacity: 0.6; stroke: none; }
.cr-pin__void { fill: var(--pin-face); opacity: 0.55; }
/* Print-defect levels from the seed: clean pins skip the grain, the
   off-register subset gets more of it. */
.cr-pin--print-0 .cr-pin__wear { opacity: 0.06; }
.cr-pin--print-2 .cr-pin__wear { opacity: 0.22; }
.cr-pin--print-2 .cr-pin__plate--a { opacity: 0.95; }
.cr-pin__rays { opacity: 0.85; }
.cr-pin__reg { opacity: 0.5; }

/* The word, set in the face's units so it scales with the pin. */
.cr-pin__word {
	fill: var(--pin-ink);
	font-weight: 700;
	paint-order: stroke fill;
	stroke: var(--pin-face);
	stroke-width: 0.9;
	stroke-linejoin: round;
}
.cr-pin__word--mono {
	font-family: var(--cr-font-mono, ui-monospace, Menlo, monospace);
	letter-spacing: 0.08em;
}
.cr-pin__word--condensed {
	font-family: var(--cr-font-body, "Barlow", system-ui, sans-serif);
	font-weight: 800;
	letter-spacing: 0.04em;
}
.cr-pin__word--slab {
	font-family: var(--cr-font-accent, "Roboto Slab", serif);
	font-weight: 800;
	letter-spacing: 0.005em;
}
.cr-pin__word--hand {
	font-family: var(--cr-font-display, "Rock Salt", cursive);
	font-weight: 400;
	stroke-width: 0.6;
}

/* A saved emoji with no catalog entry prints as a text glyph over the
   art (the word still comes from the SVG). */
.cr-pin__glyph {
	position: absolute;
	top: 41%;
	left: 50%;
	display: grid;
	place-items: center;
	width: 56%;
	height: 56%;
	transform: translate(-50%, -50%);
	font-size: calc(var(--pin-size) * 0.4);
	line-height: 1;
	font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
	filter: saturate(0.75) contrast(1.05);
}
.cr-pin--l-word-big .cr-pin__glyph { top: 30%; font-size: calc(var(--pin-size) * 0.26); }

/* The laminate: one narrow reflection along the upper-left curve,
   faded to one side so it never reads as a ring. */
.cr-pin__gloss {
	inset: 4% 7% 7% 4%;
	border: 2px solid transparent;
	border-top-color: rgba(255, 255, 255, 0.4);
	border-left-color: rgba(255, 255, 255, 0.14);
	transform: rotate(-32deg);
	filter: blur(0.6px);
	-webkit-mask-image: linear-gradient(105deg, #000 18%, rgba(0, 0, 0, 0.3) 46%, transparent 60%);
	mask-image: linear-gradient(105deg, #000 18%, rgba(0, 0, 0, 0.3) 46%, transparent 60%);
	pointer-events: none;
}

/* Wear: photocopy grain multiplied over face and word, a sparser light
   abrasion screened over everything, and two laminate scratches. Two
   tiny SVG noise tiles; the angle comes from the pin's seed. */
.cr-pin__wear {
	z-index: 3;
	pointer-events: none;
	opacity: 0.14;
	mix-blend-mode: multiply;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.14 0 0 0 0 0.11 0 0 0 0 0.29 0 0 0 7 -3.6'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E") center / 120px 120px;
	transform: rotate(var(--pin-wear));
}
.cr-pin__wear::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	opacity: 0.8;
	mix-blend-mode: screen;
	background:
		linear-gradient(118deg, transparent 43%, rgba(255, 255, 255, 0.3) 43.5%, transparent 44.1%),
		linear-gradient(62deg, transparent 71%, rgba(255, 255, 255, 0.24) 71.4%, transparent 71.9%),
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.7' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 9 -5.2'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23s)'/%3E%3C/svg%3E") center / 96px 96px;
}

/* On the dark ground the violet contact shadow disappears; a black one
   sits the pin down the same way. */
:root[data-theme="dark"] .cr-pin {
	--pin-shadow: 0, 0, 0;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .cr-pin {
		--pin-shadow: 0, 0, 0;
	}
}

/* A long custom mood's word, printed under the pin. */
.cr-pin__word-below {
	display: block;
	max-width: 14rem;
	font-family: var(--cr-font-mono, monospace);
	font-size: max(0.7rem, var(--cr-text-floor, 0.7rem));
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	line-height: 1.3;
	color: var(--cr-ink, #241c4a);
}

/* Family sticker under the single's pin: navigation metadata, kept small. */
.cr-pin__family {
	display: inline-block;
	margin-top: 0.1rem;
	padding: 0.12rem 0.5rem;
	border-radius: 1px;
	background: var(--cr-tape, #f3e5b8);
	font-family: var(--cr-font-mono, monospace);
	font-size: max(0.62rem, var(--cr-text-floor, 0.7rem));
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: #241c4a;
	transform: rotate(var(--cr-rotate-1, -1.2deg));
}

/* ---- Where the pin sits ---------------------------------------------- */

/* Single: the mood-card block is the pin, centered, no card box. The
   plugin's badge and kind label repeat the header's MOOD chip and go. */
body.single-post .pk-card.k-mood.wp-block-post-kinds-indieweb-mood-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: center;
	gap: 0.25rem;
	padding: 0.5rem 0 0.75rem;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-align: center;
}
body.single-post .pk-card.k-mood .pk-badge,
body.single-post .pk-card.k-mood .pk-kindlabel,
body.single-post .pk-card.k-mood::before {
	display: none;
}
body.single-post .pk-card.k-mood .pk-body {
	width: auto;
	display: grid;
	justify-items: center;
	gap: 0.25rem;
}
body.single-post .pk-card.k-mood .pk-mood {
	display: grid;
	justify-items: center;
	gap: 0.5rem;
}
body.single-post .pk-card.k-mood .pk-mood__note {
	max-width: 32rem;
	margin: 0;
	font-family: var(--cr-font-accent, "Roboto Slab", serif);
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--cr-ink, #241c4a);
}
body.single-post .pk-card.k-mood .pk-meta {
	margin: 0;
}
body.single-post .pk-card.k-mood .pk-meta .dt-published {
	font-family: var(--cr-font-accent, "Roboto Slab", serif);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cr-cerulean, #126782);
}

/* Stream: the pin is the hero but the title and date sit close under it;
   a note that only repeats the word on the pin stays out of the caption. */
.cr-stream-page .pk-card.k-mood .cr-pin-set { margin-bottom: 0; }
.cr-stream-page .pk-card.k-mood { padding-top: 0.5rem; }
.cr-stream-page .pk-card.k-mood .pk-caption,
.cr-stream-page .pk-card.k-mood .pk-meta,
.cr-stream-page .pk-card.k-mood .pk-mood__note { margin-top: 0.1rem; }
/* The plugin's synthetic "Mood" heading on a title-less post stays the
   card's link for assistive tech and hides visually. */
.cr-stream-page .pk-card.k-mood.cr-pin-card--untitled .pk-title {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}
.cr-stream-page .pk-card.k-mood .pk-mood__note.cr-pin-note-dup {
	display: none;
}

/* Editor sidebar preview (inc/mood-pin.php enqueues this sheet there). */
.cr-mood-pin-preview {
	display: grid;
	justify-items: center;
	padding: 1rem 0 0.5rem;
	background: #fbfaf5;
	border-radius: 4px;
}
.cr-mood-pin-help {
	margin: 0.5rem 0 0;
	font-size: 12px;
	color: #50575e;
}