/* Dollop live: "Right now" on Paper and "Today's log" on Ink.
   Right now: the on-air badge (its dot the one thing that moves while live),
   then the brief, the story and the week's score as offset cards (Card, the
   Ink rule, the hard shadow, tilted a hair either way), the brief's line set
   like the stream's lower third, the cast as cards in their own colours, and
   the building as a stack of isometric floor plans, top floor first: a floor
   with someone on it open, the rest a slice, each of the cast a dot in their
   own colour in their room (it glides there when they move); beside it (on a
   phone, under it) each floor flat, one per swipe, its rooms named, with a
   tab per floor; the stack's floor labels are buttons for them.
   Today: the counts as big condensed numbers, then the log as ruled rows.
   What changes when the page updates itself rolls or lands once; with
   reduced motion it just changes. */
.wp-block-slop-dollop-live { --slop-live-gap: clamp(1.25rem, 2.5vw, 2rem); }

/* ----- Right now ----- */
.slop-now { display: grid; gap: var(--slop-live-gap); }
.slop-now__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}
.slop-now__status > * { margin: 0; }
.slop-now__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	padding: 0.35rem 0.85rem 0.35rem 0.7rem;
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.slop-now__badge.is-off { background: transparent; color: var(--wp--preset--color--ink); border: var(--wp--custom--border--rule); }
.slop-now__dot {
	width: 0.6rem;
	height: 0.6rem;
	border-radius: 50%;
	background: var(--wp--preset--color--orange);
	animation: slop-now-dot 1.6s ease-in-out infinite;
}
@keyframes slop-now-dot {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.45; transform: scale(0.8); }
}
.slop-now__note,
.slop-now__quiet {
	font-size: var(--wp--preset--font-size--small);
	opacity: 0.75;
}
.slop-now.is-quiet .slop-now__cards,
.slop-now.is-quiet .slop-now__cast,
.slop-now.is-quiet .slop-map { opacity: 0.6; }
.slop-now__empty { margin: 0; font-size: var(--wp--preset--font-size--large); }

.slop-now__cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	gap: var(--slop-live-gap);
	align-items: stretch;
}
.slop-now__card {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
	padding: 1.25rem 1.4rem 1.4rem;
	background: var(--wp--preset--color--card);
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--small);
	box-shadow: var(--wp--preset--shadow--hard);
	transform: rotate(-0.5deg);
}
.slop-now__card:nth-child(even) { transform: rotate(0.5deg); }
.slop-now__card > * { margin: 0; }
.slop-now__label,
.slop-now__line,
.slop-now__where,
.slop-today__time,
.slop-today__story,
.slop-today__count dt {
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 500;
	letter-spacing: 0.06em;
	line-height: 1.5;
	text-transform: uppercase;
}
.slop-now__title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
	text-transform: none;
	overflow-wrap: anywhere;
}
.slop-now__ask,
.slop-now__question { font-size: var(--wp--preset--font-size--medium); line-height: 1.35; }
.slop-now__ask { font-weight: 600; }
/* The brief's line as the stream's lower third has it: mono capitals on Ink. */
.slop-now__line {
	align-self: flex-start;
	margin-top: auto !important;
	padding: 0.4rem 0.7rem;
	border-radius: 4px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--paper);
}
.slop-now__card.is-outcome { background: var(--wp--preset--color--oat); }
.slop-now__score {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1.5rem;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
}
.slop-now__score strong { margin-left: 0.2em; color: var(--wp--preset--color--orange); font-variant-numeric: tabular-nums; }

/* The cast: a card each in its own colour. */
.slop-now__cast {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
	gap: var(--slop-live-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}
.slop-now__member {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-areas: "swatch name" "swatch where" "swatch doing";
	column-gap: 0.9rem;
	row-gap: 0.15rem;
	padding: 1rem 1.1rem;
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--small);
	background: var(--wp--preset--color--card);
	box-shadow: 6px 6px 0 var(--slop-who, var(--wp--preset--color--ink));
}
.slop-now__member > * { margin: 0; }
.slop-now__swatch {
	grid-area: swatch;
	align-self: start;
	width: 2.75rem;
	height: 2.75rem;
	border: var(--wp--custom--border--rule);
	border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
	background: var(--slop-who);
}
.slop-now__name {
	grid-area: name;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.1;
	text-transform: none;
}
.slop-now__where { grid-area: where; opacity: 0.7; }
.slop-now__doing { grid-area: doing; font-size: var(--wp--preset--font-size--small); }

/* The building: the floors as stacked slices (SVG), each floor's label a
   button over its own band beside them, and the plans one floor at a time
   with the names and the cast laid over them as text. Both SVGs take their
   height from their viewBox: no aspect-ratio box, which WebKit stretches past
   its margins. */
.slop-map { --slop-gutter: clamp(2.25rem, 17vw, 15.5rem); display: grid; gap: 1rem; margin: 0; }
.slop-map__head { display: grid; gap: 0.35rem; }
.slop-map__head > * { margin: 0; }
.slop-map__title {
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 800;
	line-height: 1.15;
	text-transform: none;
}
.slop-map__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(15rem, 26rem);
	align-items: start;
	gap: clamp(1.5rem, 4vw, 3.5rem);
}
.slop-map__box { position: relative; margin-left: var(--slop-gutter); }
.slop-map__plans,
.slop-plan__svg { display: block; width: 100%; height: auto; }
.slop-map svg polygon { stroke: var(--wp--preset--color--ink); stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.slop-map__slab { fill: var(--wp--preset--color--ink); stroke-width: 1.5px; }
.slop-map__plate { fill: #e4ddcd; stroke-width: 1.25px; transition: fill 0.3s ease, stroke 0.3s ease; }
.slop-map__room { fill: var(--wp--preset--color--card); stroke-width: 0.6px; stroke-opacity: 0.55; transition: fill 0.4s ease; }
.slop-map__room.is-way { fill: var(--wp--preset--color--oat); }
.slop-map__room.is-wc { fill: #e3ddd0; }
.slop-map__room.is-lift { fill: #8f8b85; }
.slop-map__room.is-stairs { fill: #b9b2a3; }
.slop-map__room.is-here { fill: color-mix(in srgb, var(--slop-who) 32%, var(--wp--preset--color--card)); stroke-width: 1.5px; stroke-opacity: 1; }
/* The stack: every floor a plain slice, clickable; the one shown opened up,
   its rooms and the cast on it, the floors above it slid up out of its way. */
/* The view script finds the floor under the pointer itself (WebKit hit-tests these shapes unlike it paints them). */
.slop-map__plans { pointer-events: none; }
.slop-map__box.is-pointing { cursor: pointer; }
.slop-map__floor:not(.is-shown) .slop-map__inside { opacity: 0; }
.slop-map__floor.is-above .slop-map__plate { fill: #efeadf; }
.slop-map__floor.is-pointed .slop-map__plate { fill: var(--wp--preset--color--oat); }
.slop-map__floor.is-shown .slop-map__plate { fill: #d9d1bf; stroke: var(--wp--preset--color--orange); stroke-width: 3px; }
.slop-map__inside { transition: opacity 0.3s ease; }
.slop-map__plans .slop-map__dot { fill: var(--slop-who); stroke: var(--wp--preset--color--ink); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.slop-map.is-ready .slop-map__floor { transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1); }

.slop-map__marks { position: absolute; inset: 0; pointer-events: none; }
.slop-map__marks > * { position: absolute; margin: 0; }
/* A floor's label: a button over its band of the stack's left side, from
   halfway to the label above to halfway to the label below, so no two meet. */
.slop-map__level {
	right: calc(100% + 0.5rem);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	width: calc(var(--slop-gutter) - 0.5rem);
	padding: 0;
	overflow: hidden;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.9rem;
	line-height: 1.2;
	text-align: right;
	cursor: pointer;
	pointer-events: auto;
}
.slop-map.is-ready .slop-map__level { transition: top 0.55s cubic-bezier(0.22, 1, 0.36, 1), height 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
.slop-map__level-in {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	max-width: 100%;
	padding: 0.15rem 0 0.15rem 0.6rem;
	border-radius: var(--wp--custom--radius--pill);
	opacity: 0.75;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}
.slop-map__level.is-busy .slop-map__level-in { font-weight: 700; opacity: 1; }
.slop-map__level:is(:hover, :focus-visible, [aria-current="true"]) .slop-map__level-in { opacity: 1; background: var(--wp--preset--color--oat); }
.slop-map__level-name { min-width: 0; }
/* A band too narrow for the name keeps the number (the name stays its label and tooltip). */
.slop-map__level.is-tight .slop-map__level-name { display: none; }
.slop-map__level-dots { display: inline-flex; flex: none; }
.slop-map__level-dots span,
.slop-map__tab-dots span { width: 0.6rem; height: 0.6rem; margin-left: -0.15rem; border: 1px solid var(--wp--preset--color--ink); border-radius: 50%; background: var(--slop-who); }
.slop-map__level:focus-visible { outline: none; }
.slop-map__level:focus-visible .slop-map__level-in,
.slop-map__tab:focus-visible,
.slop-map__row:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 2px; }
.slop-map__level[aria-current="true"] .slop-map__no { box-shadow: 0 0 0 2px var(--wp--preset--color--orange); }
.slop-map__no {
	display: grid;
	flex: none;
	place-items: center;
	min-width: 1.7rem;
	height: 1.7rem;
	border: var(--wp--custom--border--rule);
	border-radius: 50%;
	background: var(--wp--preset--color--card);
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: 1rem;
	font-weight: 900;
	line-height: 1;
}
.slop-map__level.is-busy .slop-map__no { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.slop-map__who {
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 0.15rem;
	translate: -0.55rem calc(-100% - 0.15rem);
}
.slop-map__who .slop-map__dot {
	flex: none;
	width: 1.1rem;
	height: 1.1rem;
	border: 2px solid var(--wp--preset--color--ink);
	border-radius: 50%;
	background: var(--slop-who);
	box-shadow: 2px 2px 0 var(--wp--preset--color--ink);
}
.slop-map__tag {
	margin-left: 0.2rem;
	padding: 0.05rem 0.45rem;
	border: 1.5px solid var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
}
.slop-map__who.is-roomless { translate: 0 -50%; }
.slop-map__who.is-east { translate: calc(-100% + 0.55rem) calc(-100% - 0.15rem); }
.slop-map__who.is-east .slop-map__tag { order: -1; margin: 0 0.2rem 0 0; }
/* Moving: the view script puts a dot where it was, then lets it glide to where it is. */
.slop-map__dot.is-moving { transition: transform 1.1s cubic-bezier(0.34, 1.3, 0.64, 1); }
.slop-map__who .slop-map__dot.is-moved { animation: slop-map-land 0.9s ease-out 1s both; }
/* The plans: one floor per swipe, a tab per floor. */
.slop-map__floors { display: grid; gap: 0.75rem; min-width: 0; }
.slop-map__tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.slop-map__tab {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	min-width: 2.4rem;
	justify-content: center;
	padding: 0.3rem 0.7rem;
	border: var(--wp--custom--border--rule);
	border-radius: var(--wp--custom--radius--pill);
	background: var(--wp--preset--color--card);
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-weight: 900;
	text-decoration: none;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.slop-map__tab[aria-current="true"] { background: var(--wp--preset--color--ink); color: var(--wp--preset--color--paper); }
.slop-map__tab-dots { display: inline-flex; }
.slop-map__row {
	position: relative;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 100%;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	/* Swiped, or moved by the tabs and the stack: never a scrollbar (desktop Safari showed its thumb moving under the plan). */
	scrollbar-width: none;
}
.slop-map__row::-webkit-scrollbar { display: none; }
/* Each plan keeps inside its own column: its box is inset by padding, never margins. */
.slop-plan { display: grid; gap: 0.6rem; align-content: start; min-width: 0; padding: 0 0.35rem 0.5rem; scroll-snap-align: start; }
.slop-plan__title {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	line-height: 1.2;
	text-transform: none;
}
.slop-plan__who { display: block; font-weight: 500; font-size: var(--wp--preset--font-size--small); opacity: 0.75; }
.slop-plan__box { position: relative; min-width: 0; contain: layout; }
.slop-plan__svg .slop-map__plate { fill: #d9d1bf; stroke-width: 2px; }
.slop-plan__svg .slop-map__room { stroke-width: 0.9px; stroke-opacity: 0.8; cursor: help; }
.slop-plan__svg .slop-map__room:hover,
.slop-plan__svg .slop-map__room.is-pointed { fill: var(--wp--preset--color--oat); stroke-opacity: 1; }
.slop-plan__svg .slop-map__room.is-here:is(:hover, .is-pointed) { fill: color-mix(in srgb, var(--slop-who) 45%, var(--wp--preset--color--card)); }
/* A room's name: the box is the biggest rectangle inside the room; the view
   script shows the name only where it fits that box as drawn (is-fit), at the
   biggest of three sizes it fits at, its number dropped first. */
.slop-plan__name {
	display: flex;
	align-items: center;
	justify-content: center;
	visibility: hidden;
	font-family: var(--wp--preset--font-family--plex-mono);
	font-size: 0.68rem;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-align: center;
}
.slop-plan__name.is-fit { visibility: visible; }
.slop-plan__name.is-m { font-size: 0.6rem; }
.slop-plan__name.is-s { font-size: 0.54rem; }
.slop-plan__name.is-top { align-items: flex-start; }
.slop-plan__name.is-bottom { align-items: flex-end; }
.slop-plan__name.is-up { writing-mode: vertical-rl; }
.slop-plan__name.is-bare .slop-plan__number { display: none; }
.slop-plan__text { display: flex; flex-direction: column; align-items: center; max-width: 100%; max-height: 100%; overflow-wrap: normal; word-break: normal; hyphens: none; }
.slop-plan__name.is-here .slop-plan__text { font-weight: 600; }
.slop-plan__number { font-size: 0.85em; opacity: 0.7; }
.slop-plan__room { margin: 0; min-height: 1.4em; font-family: var(--wp--preset--font-family--plex-mono); font-size: var(--wp--preset--font-size--small); opacity: 0.75; }
.slop-plan__room.is-named { opacity: 1; font-weight: 600; }

@keyframes slop-map-land {
	0% { box-shadow: 2px 2px 0 var(--wp--preset--color--ink), 0 0 0 0 var(--slop-who); }
	100% { box-shadow: 2px 2px 0 var(--wp--preset--color--ink), 0 0 0 0.9rem transparent; }
}

/* ----- Today in the building (on Ink) ----- */
.slop-today { display: grid; gap: var(--slop-live-gap); }
.slop-today__empty { margin: 0; font-size: var(--wp--preset--font-size--large); }
.slop-today__counts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
	gap: 1rem var(--slop-live-gap);
	margin: 0;
}
.slop-today__count {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.35rem;
	padding-top: 1rem;
	border-top: 1.5px solid rgb(244 240 230 / 0.3);
}
.slop-today__count dt { opacity: 0.7; }
.slop-today__count dd {
	margin: 0;
	font-family: var(--wp--preset--font-family--archivo-condensed);
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 900;
	line-height: 0.95;
	font-variant-numeric: tabular-nums;
}
.slop-today__count:first-child dd { color: var(--wp--preset--color--orange); }

.slop-today__log { margin: 0; padding: 0; list-style: none; }
.slop-today__entry {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	gap: 0.25rem 1rem;
	padding: 0.85rem 0;
	border-top: 1.5px solid rgb(244 240 230 / 0.2);
}
.slop-today__entry > * { margin: 0; }
.slop-today__time { padding-top: 0.2em; opacity: 0.6; }
.slop-today__text { line-height: 1.5; overflow-wrap: anywhere; }
.slop-today__who { margin-right: 0.35em; }
.slop-today__entry.is-verdict .slop-today__who,
.slop-today__entry.is-story .slop-today__who { color: var(--wp--preset--color--orange); }
.slop-today__story { grid-column: 2; opacity: 0.6; }
.slop-today__entry.is-fresh { animation: slop-today-land 0.9s ease-out; }
@keyframes slop-today-land {
	from { background: rgb(238 91 43 / 0.35); }
	to { background: transparent; }
}
.slop-today__more summary {
	padding: 0.85rem 0;
	border-top: 1.5px solid rgb(244 240 230 / 0.2);
	cursor: pointer;
	font-weight: 600;
	text-decoration: underline wavy var(--wp--preset--color--orange) 1.5px;
	text-underline-offset: 0.3em;
}
.slop-today__more summary:focus-visible { outline: 2px solid var(--wp--preset--color--orange); outline-offset: 3px; }

[data-count].is-rolling { display: inline-block; animation: slop-live-roll 0.5s cubic-bezier(0.34, 1.56, 0.64, 1); }
@keyframes slop-live-roll {
	from { transform: translateY(0.35em); opacity: 0.2; }
	to { transform: none; opacity: 1; }
}

@media (max-width: 899px) {
	.slop-map__layout { grid-template-columns: minmax(0, 1fr); }
	.slop-map__floors { width: 100%; max-width: 30rem; }
}

@media (max-width: 599px) {
	.slop-now__member { grid-template-columns: auto 1fr; }
	.slop-map { --slop-gutter: 2.3rem; }
	.slop-map__level { right: calc(100% + 0.3rem); }
	.slop-map__level-in { gap: 0.25rem; padding-left: 0.2rem; }
	.slop-map__no { min-width: 1.15rem; height: 1.15rem; border-width: 1px; font-size: 0.7rem; }
	.slop-map__level-name,
	.slop-map__level-dots { display: none; }
	.slop-map__tag { font-size: 0.66rem; }
	.slop-today__entry { grid-template-columns: 3.4rem minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	.slop-now__dot,
	.slop-today__entry.is-fresh,
	.slop-map__dot.is-moved,
	[data-count].is-rolling { animation: none; }
	.slop-map__dot.is-moving,
	.slop-map.is-ready .slop-map__floor,
	.slop-map.is-ready .slop-map__level,
	.slop-map__inside { transition: none; }
	.slop-now__card,
	.slop-now__card:nth-child(even) { transform: none; }
}