/**
 * Specifying a printed job, on the shop side.
 *
 * Deliberately restrained. This sits inside somebody else's theme, on their
 * product page, next to their buy button, and a supplier plugin that arrives
 * with its own visual opinions makes every shop it lands in look like two
 * shops. Sizes and spacing here; every colour comes off the theme, and the one
 * thing that gets a solid fill of its own is the price a shopper has actually
 * picked, because that is the answer to the question they came with.
 *
 * The palette is AddOnBoss's, on purpose and by name. Same tokens, same
 * fallback chains, so a shop running both reads as one product rather than as
 * two plugins that happened to meet on a page. The block below says how.
 *
 * THE ACCENT IS FOR THINGS YOU PRESS, never for states. It appears on focus and
 * nowhere else here: the picked cell is ink, and the row and column in play are
 * graded tints. A brand colour smeared across a table's selection states is how
 * a price grid ends up looking like somebody's highlighter test.
 */

/* ---- one palette, and it is not ours ----------------------------------
   These are AddOnBoss's storefront tokens, declared here with the same
   chains and the same literal fallbacks. Three things follow from that:

   STANDALONE, it follows the theme. A block theme publishes its palette as
   --wp--preset--color-- properties and they flow straight in; a classic
   theme defines none of them and the literals below take over.

   WITH ADDONBOSS, the two surfaces already match, because they are reading
   the same names off the same theme.

   AND NO COLOUR SETTINGS OF OUR OWN. The plugin this replaces ships sixteen
   colour pickers for this one table, which is what a component looks like
   when it has no design of its own and every shop has to invent one.

   ⚠️ DECLARED AT ZERO SPECIFICITY, and that is the load bearing part.
   AddOnBoss's Colours screen writes the merchant's palette to these same
   token names on a list of selectors that now includes .sb-spec. Two
   plain .sb-spec rules would tie on specificity and the winner would come
   down to which stylesheet printed last, which depends on when each
   plugin happened to enqueue. :where() takes these defaults out of the
   contest entirely, so a merchant's colours win whatever the order.

   Each derived token declares a literal first, so a browser without
   color-mix() keeps a real value instead of dropping the declaration. */
:where( .sb-spec ) {
	--aob-accent: var( --wp--preset--color--primary, var( --wp--preset--color--accent, #fd4730 ) );
	--aob-ink: var( --wp--preset--color--contrast, #16181d );
	--aob-surface: var( --wp--preset--color--base, #ffffff );
	--aob-text: #3a3f47;
	--aob-text: color-mix( in srgb, var( --aob-ink ) 84%, var( --aob-surface ) );
	--aob-mut: #7d8590;
	--aob-mut: color-mix( in srgb, var( --aob-ink ) 55%, var( --aob-surface ) );
	--aob-line: #e6e4df;
	--aob-soft: #faf9f7;
	--aob-soft: color-mix( in srgb, var( --aob-surface ) 82%, var( --aob-line ) );
	--aob-radius: 15px;

	/* Our own, because three states have to read as three states: hover, the
	   column in play, and the row a price has been taken from. --aob-soft is
	   the faintest; these grade above it without reaching the picked cell,
	   which is solid ink. */
	--sb-tint: #f0eeea;
	--sb-tint: color-mix( in srgb, var( --aob-surface ) 92%, var( --aob-ink ) );
}

.sb-spec {
	margin: 0 0 1.5em;
}

.sb-spec-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
	margin: 0 0 14px;
}

/* The tracked uppercase label AddOnBoss uses for a group, so a shop running
   both reads one voice rather than two. */
.sb-spec-field label {
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --aob-mut );
}

/* A theme's own select is a coin toss: some are 40px tall with a custom
   arrow, some are the browser default. Given a border, a radius and a
   consistent height it stops looking like a form somebody forgot. */
.sb-spec-select {
	max-width: 32em;
	width: 100%;
	padding: 10px 34px 10px 12px;
	border: 1.5px solid var( --aob-line );
	border-radius: calc( var( --aob-radius ) - 7px );
	background-color: var( --aob-surface );
	color: var( --aob-text );
	font: inherit;
	line-height: 1.4;
	/* The arrow drawn rather than left to the platform, because half of them
	   paint a grey wedge that clashes with everything around it. */
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-image: url( "data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%237d8590' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 11px 8px;
}

.sb-spec-select:hover {
	border-color: var( --aob-mut );
}

.sb-spec-select:focus-visible {
	outline: 2px solid var( --aob-accent );
	outline-offset: 1px;
	border-color: var( --aob-accent );
}

.sb-spec-hint {
	margin: 12px 0;
	opacity: 0.75;
	font-size: 0.95em;
}

.sb-spec-prices {
	margin-top: 18px;
}

/* Two shapes of the same information, and only one is ever on screen.
   Given room it is the table every trade printer shows. Squeezed, it is speed
   cards over a single column, because a four column price table in a narrow
   space is a sideways scroll and no amount of styling fixes that.

   ⚠️ Measured on the CONTAINER, not the window, and that is not pedantry. A
   theme gives its product column about 650px on a 1180px desktop, and four
   speeds do not fit that: the last one sat half off the edge of its own scroll
   box, which looks like a broken table rather than a scrollable one. A window
   width says nothing about how much room this block was actually given.

   The media query underneath is the fallback for a browser too old for
   container queries. Both say the same thing, so they compose rather than
   fight. Swapped in CSS either way, so rotating a phone just works. */
.sb-spec-prices {
	container-type: inline-size;
}

.sb-narrow {
	display: none;
}

/* ⚠️ Calibrated on REAL money, not on the sandbox's. A four speed grid of
   ordinary print prices needs roughly a quantity column and four times a
   hundred and ten pixels, which is a shade over five hundred. Tradeprint's
   sandbox invents figures like £24,786.95 and blows the same table out to
   nearly eight hundred, so on the test store this falls back to cards at
   widths where a real shop would rightly keep the table. That is the sandbox
   being wrong, not the threshold. */
@container ( max-width: 560px ) {
	.sb-grid-wrap {
		display: none;
	}

	.sb-narrow {
		display: block;
	}
}

@supports not ( container-type: inline-size ) {
	@media ( max-width: 782px ) {
		.sb-grid-wrap {
			display: none;
		}

		.sb-narrow {
			display: block;
		}
	}
}

/* The table still scrolls inside its own box, so the PAGE never scrolls
   sideways on the awkward widths between a phone and a desk. */
.sb-grid-wrap {
	overflow-x: auto;
	max-height: 30em;
	overflow-y: auto;
}

.sb-grid {
	width: 100%;
	max-width: 44em;
	border-collapse: collapse;
}

.sb-grid th,
.sb-grid td {
	padding: 0;
	text-align: center;
	border: 1px solid var( --aob-line );
	white-space: nowrap;
	font-size: 0.95em;
}

.sb-grid tbody th,
.sb-grid tr th:first-child {
	padding: 6px 10px;
}

.sb-grid th {
	font-weight: 650;
	background: var( --aob-soft );
	position: sticky;
	top: 0;
	vertical-align: bottom;
}

/* The quantity column stays put while the speeds scroll, because a price with
   no quantity beside it is not a price. */
.sb-grid tr th:first-child {
	position: sticky;
	left: 0;
	z-index: 1;
}

.sb-grid tr.is-row > th {
	background: var( --sb-tint );
}

/* The heading is a button that takes the whole column, which is how the
   supplier's own shop behaves and what a shop reordering the same job wants. */
.sb-grid-speed {
	display: block;
	width: 100%;
	padding: 7px 10px;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
	line-height: 1.25;
}

.sb-grid-speed:hover,
.sb-grid-speed:focus-visible {
	background: var( --aob-soft );
}

.sb-grid-speed.is-speed {
	background: var( --sb-tint );
}

.sb-grid-speed-name {
	display: block;
	font-weight: 650;
}

/* The delivery date, which is the reason this heading has three lines. It
   answers "when do I get it" before a single price has been read. */
.sb-grid-speed-when {
	display: block;
	font-size: 0.72em;
	opacity: 0.6;
	margin-top: 1px;
}

.sb-grid-speed-date {
	display: block;
	font-weight: 650;
	font-size: 0.92em;
}

.sb-grid-pick {
	display: block;
	width: 100%;
	padding: 8px 10px;
	border: 0;
	background: transparent;
	cursor: pointer;
	font: inherit;
	font-variant-numeric: tabular-nums;
	color: inherit;
}

.sb-grid-pick:hover,
.sb-grid-pick:focus-visible {
	background: var( --aob-soft );
}

/* The column in play, before anything is picked. Faint on purpose: it is a
   hint about where the eye is, not an answer. */
.sb-grid-pick.is-column {
	background: color-mix( in srgb, var( --aob-soft ) 55%, transparent );
}

/* The one thing on this table that gets a real colour: what they picked. */
.sb-grid-pick.is-picked {
	background: var( --aob-ink );
	color: var( --aob-surface );
	font-weight: 650;
}

/* A speed the supplier does not offer at that quantity, and their refusals are
   NOT tidy: Same Day is there at fifty and two hundred, gone at two hundred and
   fifty, back at three hundred. Said in words, because a blank cell reads as a
   page that failed to load. Never a greyed out price: there is no price. */
.sb-grid-none {
	background: repeating-linear-gradient(
		45deg,
		transparent,
		transparent 4px,
		color-mix( in srgb, var( --aob-line ) 60%, transparent ) 4px,
		color-mix( in srgb, var( --aob-line ) 60%, transparent ) 8px
	);
}

.sb-grid-none-say {
	display: block;
	padding: 8px 6px;
	font-size: 0.74em;
	opacity: 0.55;
	white-space: normal;
}

/* ---- the phone shape ---- */

.sb-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
	margin-bottom: 14px;
}

.sb-card {
	text-align: left;
	padding: 10px 12px;
	border: 1.5px solid var( --aob-line );
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.sb-card.is-speed {
	border-color: var( --aob-ink );
	box-shadow: inset 0 0 0 1px var( --aob-ink );
}

.sb-card-name {
	display: block;
	font-weight: 650;
}

.sb-card-date {
	display: block;
	font-size: 0.85em;
	opacity: 0.7;
	margin-top: 1px;
}

.sb-rungs {
	display: grid;
	gap: 2px;
}

.sb-rung {
	display: grid;
	grid-template-columns: 4.5em 1fr auto;
	align-items: baseline;
	gap: 10px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
}

.sb-rung:hover,
.sb-rung:focus-visible {
	background: var( --aob-soft );
}

.sb-rung.is-picked {
	background: var( --aob-ink );
	color: var( --aob-surface );
}

.sb-rung-qty {
	font-weight: 650;
}

.sb-rung-each {
	font-size: 0.82em;
	opacity: 0.6;
}

.sb-rung-total {
	font-weight: 620;
}

/* ---- unfolding the tail, and asking for your own quantity ---- */

.sb-tail {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
}

.sb-tail-more {
	padding: 6px 12px;
	border: 1.5px solid var( --aob-line );
	border-radius: 3px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.9em;
	cursor: pointer;
}

.sb-tail-or {
	font-size: 0.88em;
	opacity: 0.65;
}

.sb-tail-own {
	width: 7em;
	padding: 6px 8px;
	font-variant-numeric: tabular-nums;
}

.sb-tail-note {
	margin: 8px 0 0;
	font-size: 0.88em;
	opacity: 0.75;
}

/* ---- what they have chosen, and what it costs ---- */

.sb-answer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 26px;
	margin-top: 16px;
	padding: 12px 14px;
	border: 1px solid var( --aob-line );
	border-radius: 4px;
}

.sb-answer.is-empty {
	opacity: 0.7;
}

.sb-answer-wait {
	font-size: 0.95em;
}

.sb-answer-key {
	display: block;
	font-size: 0.7em;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.6;
}

.sb-answer-value {
	font-weight: 620;
	font-variant-numeric: tabular-nums;
}

.sb-answer-total {
	margin-left: auto;
}

.sb-answer-big {
	font-size: 1.5em;
	font-weight: 660;
	font-variant-numeric: tabular-nums;
	line-height: 1.2;
}

/* Out of reach until the shop knows what it would be selling. */
.sb-not-yet {
	opacity: 0.5;
	cursor: not-allowed;
}

.sb-shop-note {
	margin: 1em 0;
	padding: 10px 14px;
	border-left: 3px solid rgba( 0, 0, 0, 0.2 );
	font-size: 0.95em;
}

/*
 * The way back out of a narrowed set of choices. A link rather than a button,
 * because it undoes rather than does, and pressing it should feel like nothing
 * has been spent.
 */
.sb-spec-clear {
	background: none;
	border: 0;
	padding: 0;
	margin: 0.25em 0 1.25em;
	display: inline-block;
	/* Quiet on purpose. It undoes rather than does, and on a theme with a large
	   base size it was reading louder than the labels above it. */
	font-size: 0.8em;
	line-height: 1.4;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	text-decoration: underline;
}

.sb-spec-clear:hover,
.sb-spec-clear:focus {
	opacity: 0.9;
}

/* A choice the printer will not make, greyed where it was rather than removed,
   so the shopper can see their last pick ruled it out. */
.sb-spec-select option:disabled {
	color: #767676;
}