/**
 * The Paintbox STUDIO (beta) — the study notebook surface.
 *
 * Deliberately NOT auntgo-paintbox.css. That stylesheet dresses the classic mixer, and the
 * classic route must stay byte-identical for an anonymous visitor (spec_paintbox_study_surface).
 * Two surfaces, two stylesheets, no shared selectors — so nothing here can reach /paintbox/.
 *
 * Design's artefact carries almost all of its look as inline styles, and those are lifted
 * verbatim into paintbox-study-app.html. This file holds only what an inline style cannot
 * express: interaction states, focus rings, and the container-query scaffolding.
 *
 * Font substitution (Design's token table vs this site): Design specifies Playfair Display 500
 * as the display/body serif. The site loads exactly three families — Newsreader, Hanken Grotesk,
 * Caveat — and a fourth webfont is not added without the owner's say-so. Newsreader 500/600
 * stands in for Playfair; Hanken Grotesk caps at 700 here, so Design's 800 eyebrows render 700.
 */

/* ---------------------------------------------------------------------------------------------
 * The page ground (Design §1: `#E2D2B2`).
 *
 * The site's own body is `#FAF4E6` — which is exactly Design's PAPER colour, so without this the
 * torn cards sit on a background their own shade and have only their shadow to separate them.
 * This is the contrast every muted value in her token table was raised against: header text on
 * the ground uses the darker pair (#47554C, #5E5540) precisely because the ground is darker
 * than the paper.
 *
 * Scoped to the class WordPress already emits for this template, so it cannot reach any other
 * page — and needs no PHP to carry it. The site's fixed grain overlay (body::before) is left
 * alone: it is site chrome, and dropping it on one page would read as a different website.
 * ------------------------------------------------------------------------------------------- */
body.page-template-tmpl-paintbox-studio {
	background: #E2D2B2;
}

/* ---------------------------------------------------------------------------------------------
 * Controls. Design draws chips and pills as <span>; the product needs real buttons so they are
 * reachable by keyboard and announce themselves. These resets let a <button> inherit the inline
 * styling Design specified without the UA's own chrome fighting it.
 * ------------------------------------------------------------------------------------------- */
.pbs-btn {
	appearance: none;
	-webkit-appearance: none;
	margin: 0;
	font: inherit;
	color: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
}

/* Minimum hit target is 44px everywhere (Design §1). Where a control's own box would be
   smaller it is padded out rather than resized — so this is a floor, never a fixed height. */
.pbs-tap {
	min-height: 44px;
}

.pbs-btn:hover {
	filter: brightness(0.97);
}

.pbs-btn:focus-visible {
	outline: 2px solid #2F6F6B;
	outline-offset: 2px;
	border-radius: 999px;
}

/* ---------------------------------------------------------------------------------------------
 * The pan shape, and it is not this surface's to choose.
 *
 * auntgo-paintbox.css sets it for `.pbx-pan` and says why: "A square reads as a sample chip off a
 * colour chart; a rounded rectangle reads as the pan sitting in a paintbox, which is what all of
 * these actually are. One shape across the tray, the passage picker and the palette editor — the
 * same pan seen on three surfaces should not change shape between them."
 *
 * The Studio is the fourth surface and it was drawing squares. Same pans, same box, so: same
 * shape. 8:5, the Paintbox's 40x25, kept as a ratio rather than a fixed size because this tray
 * fills its column and the classic one does not.
 * ------------------------------------------------------------------------------------------- */
:root {
	--pbs-pan-ratio: 8 / 5;
	--pbs-pan-radius: 6px;
}

/* The pan must keep its corner radius when focused. */
.pbs-pan:focus-visible {
	outline: 2px solid #1C3B37;
	outline-offset: 3px;
	border-radius: var(--pbs-pan-radius);
}

/* ---------------------------------------------------------------------------------------------
 * The legend of marks, directly under the page H1.
 *
 * Its layout lives here and not inline because a media query cannot override an inline style
 * without !important, and the phone needs these changed. Everything else about the legend —
 * colour, weight, the two drawn chips — stays inline, because that is Design's look.
 *
 * Five marks will not hold a single line at 360px at any legible size, so below 600px they wrap
 * to two rows on purpose: the row gap tightens so the pair still reads as one block, and each
 * item keeps `nowrap` so a mark never separates from the word it explains.
 * ------------------------------------------------------------------------------------------- */
.pbs-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
}

.pbs-legend-item {
	gap: 9px;
	font-size: 14px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	.pbs-legend {
		gap: 7px 14px;
	}

	.pbs-legend-item {
		gap: 5px;
		font-size: 11.5px;
	}
}

/* ---------------------------------------------------------------------------------------------
 * "find a tube" — the name search, beside the Filter button.
 *
 * Its WIDTH is the reason this is CSS and not an inline style: on a phone the filter row already
 * wraps, and a search box squeezed in beside the Filter button would leave room for about four
 * characters. Below 600px it takes a line of its own instead (`flex-basis:100%`), which the
 * wrapping row gives for free.
 *
 * The × sits inside the pill on the padding the input reserves for it, so showing and hiding it
 * never moves the text.
 * ------------------------------------------------------------------------------------------- */
.pbs-search {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex: 0 1 210px;
	min-width: 150px;
}

.pbs-search__in {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	min-height: 44px;
	margin: 0;
	padding: 9px 34px 9px 15px;
	border: 1.5px solid rgba(28, 59, 55, 0.2);
	border-radius: 999px;
	background: #FFFDF6;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: #1C3B37;
}

.pbs-search__in::placeholder {
	font-weight: 500;
	color: #7A7052;
}

.pbs-search__in:focus-visible {
	outline: 2px solid #2F6F6B;
	outline-offset: 2px;
}

/* The UA's own clear affordance would sit beside ours. */
.pbs-search__in::-webkit-search-cancel-button {
	appearance: none;
	-webkit-appearance: none;
}

.pbs-search__x {
	position: absolute;
	right: 4px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	font-size: 12px;
	line-height: 1;
	color: #3d4f47;
	background: rgba(28, 59, 55, 0.08);
}

@media (max-width: 600px) {
	.pbs-search {
		flex: 1 0 100%;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Owner-only reference forms (spec_paintbox_owner_doors §3).
 *
 * These two rules exist because a <select> and an <input> are the only elements on this surface
 * the theme's own form styling would otherwise reach, and the studio shares no selector with the
 * classic mixer by design. 44px minimum on both: the form is used standing at a table with a wet
 * brush in the other hand, which is the least forgiving pointer there is.
 * ------------------------------------------------------------------------------------------- */
.pbs-ref-select,
.pbs-ref-input {
	width: 100%;
	min-height: 44px;
	padding: 10px 13px;
	border: 1.5px solid rgba(28, 59, 55, 0.2);
	border-radius: 3px;
	background: #fffdf6;
	font-family: "Newsreader", serif;
	font-size: 16px; /* iOS zooms a focused field below 16px. */
	line-height: 1.4;
	color: #1c3b37;
}

.pbs-ref-select:focus-visible,
.pbs-ref-input:focus-visible {
	outline: 2px solid #2f6f6b;
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------------------------
 * Reduced motion / high contrast courtesies. The surface has no animation yet, but the paper
 * relies on SVG displacement filters for its torn edge; on a forced-colours display those
 * render as noise, so the paper falls back to a flat card.
 * ------------------------------------------------------------------------------------------- */
@media (forced-colors: active) {
	.pbs-paper,
	.pbs-grain {
		filter: none !important;
		background: Canvas !important;
	}
}

/* ---------------------------------------------------------------------------------------------
 * Container-query scaffolding. Design §9: the breakpoints that govern the tube card must be
 * CONTAINER queries, not viewport queries — the column collapse is driven by the grid box, and
 * a viewport query leaves dead space at tablet-portrait widths. The tube card itself lands in
 * the next stage; the container is declared here so both stages share one definition.
 * ------------------------------------------------------------------------------------------- */
.tube-cols {
	container-type: inline-size;
}

.pair-lead {
	display: none;
}

@container (min-width: 524px) {
	/* The h2 line box, held open so the pairing stripe lands at the same height in both columns.
	   Must be a real height on an empty div — an &nbsp; text node gets stripped by the template
	   compiler and the block collapses to 0. */
	.pair-lead {
		display: block;
		height: calc(clamp(27px, 3vw, 34px) * 1.08);
	}
}