/*
 * Order status bar - the band under the header search that tells a logged-in
 * customer exactly where each in-flight order is. See inc/order-bar.php for
 * the data side and why it hydrates over AJAX.
 *
 * UNITS ARE PX ON PURPOSE: Bricks sets html { font-size: 62.5% }, so rem is
 * 10px on this site and any rem copied from a normal design is wrong. Same
 * rule as header-v2.css.
 *
 * TONE IS THE WHOLE VISUAL LANGUAGE. Four tones, each meaning one thing, used
 * identically on the dot, the stepper fill and the pill:
 *   go     lime   - moving as it should
 *   wait   amber  - with us or the courier, nothing for the shopper to do
 *   alert  coral  - the shopper must act (pay) or something went wrong
 *   done   slate  - finished, and about to leave the bar
 * Colour is never the ONLY carrier: every row also states its step in words,
 * so this reads correctly in greyscale and to a screen reader.
 */

.cwob {
	--ob-lime: var(--cw-lime, #80bc00);
	--ob-lime-deep: var(--cw-lime-deep, #5f8c00);
	--ob-ink: var(--cw-ink, #263238);
	--ob-ink-2: var(--cw-ink-2, #52575a);
	--ob-muted: var(--cw-grey, #6b6b6b);
	--ob-line: var(--cw-line, #e7e5df);
	--ob-track: var(--cw-line-2, #d6d3ca);
	--ob-card: var(--cw-card, #fff);
	/* The system's own order-state pair (cw-tokens.css: "pending, due soon" /
	 * "failed, cancelled"). The first cut invented #b26a00, #b3261e and
	 * #e0a52e here instead - flagged against the token file 2026-09-04 and
	 * retired; nothing in this sheet is off-system now. */
	--ob-amber: var(--cw-amber, #9a6414);
	--ob-amber-bg: var(--cw-amber-tint, #fdf4e6);
	--ob-coral: var(--cw-brick, #a3372c);
	--ob-coral-bg: var(--cw-brick-tint, #fbeeec);
	--ob-lime-bg: var(--cw-lime-wash, #f3f9e4);
	--ob-slate-bg: var(--cw-ground, #f7f7f5);

	/* Flat, per the system - a gradient is texture a status band does not need. */
	background: var(--cw-ground, #f7f7f5);
	border-top: 1px solid var(--ob-line);
	border-bottom: 1px solid var(--ob-line);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--ob-ink);
	/* Own the line-box strut. Every visible string sets its own size, but a
	 * block's EMPTY line height comes from the parent, and Bricks' body value
	 * was quietly adding ~8px to every line on phones. */
	line-height: 1.4;
}

.cwob *,
.cwob *::before,
.cwob *::after {
	box-sizing: border-box;
}

.cwob__inner {
	padding: 0 28px;
}

/* ---------------------------------------------------------------------------
 * One order = one row
 * ------------------------------------------------------------------------- */

/*
 * FIVE columns, one per child: dot, headline, mini stepper, actions, toggle.
 * Four leaves the toggle to wrap onto an implicit second row, which reads as a
 * stray chevron floating under every order.
 */
.cwob-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto auto auto;
	align-items: center;
	gap: 8px 14px;
	padding: 9px 0;
	border-top: 1px solid rgba(0, 0, 0, .05);
}

.cwob-row:first-child {
	border-top: 0;
}

/* The tone dot. A quiet pulse on anything actively moving - and none at all
 * for a shopper who has asked their OS for less motion. */
.cwob-dot {
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--ob-muted);
	position: relative;
}

.cwob-row--go .cwob-dot {
	background: var(--ob-lime);
}

.cwob-row--wait .cwob-dot {
	background: var(--ob-amber);
}

.cwob-row--alert .cwob-dot {
	background: var(--ob-coral);
}

.cwob-row--done .cwob-dot {
	background: var(--ob-ink-2);
}

.cwob-row--go .cwob-dot::after,
.cwob-row--alert .cwob-dot::after {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid currentColor;
	color: inherit;
	background: inherit;
	opacity: .35;
	animation: cwob-pulse 2.4s ease-out infinite;
}

.cwob-row--go .cwob-dot::after {
	border-color: var(--ob-lime);
}

.cwob-row--alert .cwob-dot::after {
	border-color: var(--ob-coral);
}

@keyframes cwob-pulse {
	0% {
		transform: scale(.6);
		opacity: .45;
	}

	70% {
		transform: scale(1.25);
		opacity: 0;
	}

	100% {
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * The headline block
 * ------------------------------------------------------------------------- */

.cwob-lead {
	min-width: 0;
	display: flex;
	align-items: baseline;
	flex-wrap: wrap;
	gap: 2px 10px;
}

.cwob-lead__head {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
}

.cwob-row--alert .cwob-lead__head {
	color: var(--ob-coral);
}

.cwob-lead__detail,
.cwob-lead__ref {
	font-size: 12.5px;
	color: var(--ob-muted);
	line-height: 1.4;
}

.cwob-lead__ref {
	white-space: nowrap;
}

/* ---------------------------------------------------------------------------
 * Mini stepper - five segments, filled to the current step
 * ------------------------------------------------------------------------- */

.cwob-mini {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cwob-mini__segs {
	display: flex;
	align-items: center;
	gap: 3px;
}

/* "3 of 5" - a phone-only aid, shown in the max-width:620px block. */
.cwob-mini__count {
	display: none;
	font-size: 11px;
	font-weight: 700;
	color: var(--ob-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.cwob-mini__seg {
	width: 22px;
	height: 5px;
	border-radius: 3px;
	background: var(--ob-track);
}

.cwob-mini__seg--done {
	background: var(--ob-lime-deep);
}

.cwob-mini__seg--current {
	background: var(--ob-lime);
}

.cwob-row--wait .cwob-mini__seg--current {
	background: var(--ob-amber);
}

.cwob-row--alert .cwob-mini__seg--current {
	background: var(--ob-coral);
}

.cwob-row--done .cwob-mini__seg--done,
.cwob-row--done .cwob-mini__seg--current {
	background: var(--ob-ink-2);
}

/* ---------------------------------------------------------------------------
 * Controls
 * ------------------------------------------------------------------------- */

.cwob-acts {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cwob-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1;
	padding: 8px 13px;
	border-radius: 999px;
	border: 1px solid transparent;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.cwob-btn--primary {
	background: var(--ob-lime);
	border-color: var(--ob-lime-deep);
	color: var(--cw-olive, #16210a);
}

.cwob-btn--primary:hover,
.cwob-btn--primary:focus-visible {
	background: var(--ob-lime-deep);
	color: #fff;
}

/* An alert row's primary action is the pay button - it must not look like a
 * cheerful "everything is fine" lime chip. */
.cwob-row--alert .cwob-btn--primary {
	background: var(--ob-coral);
	border-color: var(--ob-coral);
	color: #fff;
}

/* The system darkens on hover and has no brick-deep token; a brightness step
 * darkens the real brick rather than inventing a second red. */
.cwob-row--alert .cwob-btn--primary:hover,
.cwob-row--alert .cwob-btn--primary:focus-visible {
	background: var(--ob-coral);
	filter: brightness(.85);
}

.cwob-btn--ghost {
	background: var(--ob-card);
	border-color: var(--ob-line);
	color: var(--ob-ink-2);
}

.cwob-btn--ghost:hover,
.cwob-btn--ghost:focus-visible {
	border-color: var(--ob-ink-2);
	color: var(--ob-ink);
}

.cwob-toggle {
	flex: none;
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--ob-line);
	background: var(--ob-card);
	border-radius: 50%;
	cursor: pointer;
	color: var(--ob-ink-2);
	padding: 0;
}

.cwob-toggle:hover,
.cwob-toggle:focus-visible {
	border-color: var(--ob-ink-2);
	color: var(--ob-ink);
}

.cwob-toggle svg {
	width: 14px;
	height: 14px;
	transition: transform .18s ease;
}

.cwob-toggle[aria-expanded="true"] svg {
	transform: rotate(180deg);
}

.cwob-close {
	flex: none;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var(--ob-muted);
	line-height: 1;
	font-size: 12px;
}

.cwob-close:hover,
.cwob-close:focus-visible {
	color: var(--ob-ink);
	text-decoration: underline;
}

.cwob :focus-visible {
	outline: 2px solid var(--ob-lime-deep);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
 * Expanded detail
 * ------------------------------------------------------------------------- */

.cwob-detail {
	grid-column: 1 / -1;
	padding: 4px 0 14px 24px;
}

.cwob-detail[hidden] {
	display: none;
}

/*
 * Full stepper: dots on a track, labels beneath.
 *
 * It is a real <ol> because the steps are an ordered sequence and that is what
 * a screen reader should hear - which means the decimal markers Bricks' base
 * sheet puts on every ol have to be reset here, or each step renders as
 * "1. Ordered  2. Paid" with the numbers shoving the dots off centre.
 */
.cwob-steps {
	display: flex;
	align-items: flex-start;
	margin: 6px 0 16px;
	padding: 0;
	max-width: 640px;
	list-style: none;
}

.cwob-step {
	flex: 1 1 0;
	position: relative;
	text-align: center;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cwob-step::marker {
	content: "";
}

/* The connector is drawn on each step except the first, so it always spans
 * exactly the gap between two dots and never overhangs the ends. */
.cwob-step:not(:first-child)::before {
	content: "";
	position: absolute;
	top: 8px;
	right: 50%;
	left: -50%;
	height: 2px;
	background: var(--ob-track);
}

/* Matches the base rule's specificity rather than reaching for !important. */
.cwob-step--done:not(:first-child)::before,
.cwob-step--current:not(:first-child)::before {
	background: var(--ob-lime-deep);
}

.cwob-step__dot {
	position: relative;
	z-index: 1;
	width: 18px;
	height: 18px;
	margin: 0 auto 6px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--ob-track);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cwob-step--done .cwob-step__dot {
	background: var(--ob-lime-deep);
	border-color: var(--ob-lime-deep);
}

.cwob-step--done .cwob-step__dot svg {
	width: 10px;
	height: 10px;
	color: #fff;
}

.cwob-step--current .cwob-step__dot {
	border-color: var(--ob-lime);
	background: #fff;
	box-shadow: 0 0 0 4px var(--ob-lime-bg);
}

.cwob-step--current .cwob-step__dot::after {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ob-lime);
}

.cwob-row--wait .cwob-step--current .cwob-step__dot {
	border-color: var(--ob-amber);
	box-shadow: 0 0 0 4px var(--ob-amber-bg);
}

.cwob-row--wait .cwob-step--current .cwob-step__dot::after {
	background: var(--ob-amber);
}

.cwob-row--alert .cwob-step--current .cwob-step__dot {
	border-color: var(--ob-coral);
	box-shadow: 0 0 0 4px var(--ob-coral-bg);
}

.cwob-row--alert .cwob-step--current .cwob-step__dot::after {
	background: var(--ob-coral);
}

.cwob-step__label {
	display: block;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--ob-muted);
	padding: 0 2px;
}

.cwob-step--done .cwob-step__label {
	color: var(--ob-ink-2);
}

.cwob-step--current .cwob-step__label {
	color: var(--ob-ink);
	font-weight: 700;
}

/* Facts: label / value pairs, two columns on desktop. */
.cwob-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 28px;
	margin: 0 0 14px;
	max-width: 820px;
}

.cwob-fact {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 10px;
	font-size: 12.5px;
	line-height: 1.45;
	align-items: baseline;
}

.cwob-fact__label {
	color: var(--ob-muted);
	text-transform: uppercase;
	letter-spacing: .04em;
	font-size: 10.5px;
	font-weight: 700;
	padding-top: 1px;
}

.cwob-fact__value {
	min-width: 0;
	overflow-wrap: anywhere;
}

.cwob-fact--alert .cwob-fact__value {
	color: var(--ob-coral);
	font-weight: 700;
}

.cwob-fact--done .cwob-fact__value {
	color: var(--ob-lime-deep);
	font-weight: 700;
}

.cwob-fact__track {
	display: inline-block;
	margin-left: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11.5px;
	background: var(--ob-slate-bg);
	border-radius: 4px;
	padding: 1px 6px;
	color: var(--ob-ink-2);
	text-decoration: none;
}

a.cwob-fact__track:hover,
a.cwob-fact__track:focus-visible {
	background: var(--ob-lime-bg);
	color: var(--ob-lime-deep);
}

/*
 * The panel's copy of the action buttons. Hidden above 620px, where the row's
 * own inline copy is showing - see the note in order-bar.js: both copies are
 * always in the DOM and CSS picks one, so a resize can never strand an action.
 */
.cwob-detail__acts {
	display: none;
	flex-wrap: wrap;
	gap: 8px;
}

/* ---------------------------------------------------------------------------
 * Footer line - "+2 more" / all orders
 * ------------------------------------------------------------------------- */

.cwob-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0 10px;
	border-top: 1px solid rgba(0, 0, 0, .05);
	font-size: 12px;
	color: var(--ob-muted);
}

.cwob-foot a {
	color: var(--ob-lime-deep);
	font-weight: 700;
	text-decoration: none;
}

.cwob-foot a:hover,
.cwob-foot a:focus-visible {
	text-decoration: underline;
}

/* ---------------------------------------------------------------------------
 * Tablet / phone
 *
 * The row's four-column grid cannot survive a narrow viewport: the mini
 * stepper and the buttons both need their own line. Below 900px the row
 * becomes two rows of content, and below 620px the actions go full width so
 * "Pay now" is a comfortable tap target rather than a 60px chip.
 * ------------------------------------------------------------------------- */

@media (max-width: 900px) {
	.cwob__inner {
		padding: 0 16px;
	}

	.cwob-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		gap: 8px 12px;
	}

	.cwob-mini {
		grid-column: 2 / -1;
		margin-top: -2px;
	}

	.cwob-acts {
		grid-column: 2 / -1;
		flex-wrap: wrap;
	}

	/* Toggle stays pinned to the top-right cell while the stepper and the
	 * buttons take their own rows beneath the headline. */
	.cwob-toggle {
		grid-column: 3;
		grid-row: 1;
	}

	.cwob-lead {
		grid-column: 2;
		grid-row: 1;
	}

	.cwob-detail {
		padding-left: 0;
	}

	.cwob-facts {
		grid-template-columns: minmax(0, 1fr);
		gap: 7px;
	}
}

/* "Show N more" - phones only (the block below turns it on); desktop always
 * lists every row. */
.cwob-more {
	display: none;
	width: 100%;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--ob-lime-deep);
	background: none;
	border: 0;
	border-top: 1px solid rgba(0, 0, 0, .05);
	padding: 12px 0;
	cursor: pointer;
	text-align: left;
}

/*
 * PHONES - the anatomy is redrawn, not just squeezed (owner pick 2026-09-04:
 * "A, optimised visually for mobile").
 *
 * Three columns - dot, everything, chevron - and two lines per order. Line one
 * is the headline with its context underneath on ONE line ("with The Courier
 * Guy · Order #392787"); line two is the stepper, now with a "3 of 5" count,
 * because five tiny bars were the one part of this design that read as a
 * colour rather than a fact and a thumb-width screen has no room for step
 * names. The dot sits against the headline instead of owning a column down
 * the whole row, the chevron grows to a 44px target (and the whole row
 * toggles anyway - order-bar.js), buttons live in the panel, and anything
 * past the second order folds behind "Show N more" unless it needs the
 * shopper to act. Net: about 70px per order against ~90px before, with more
 * on screen, and a hard ceiling of two rows before the fold.
 */
@media (max-width: 620px) {
	.cwob__inner {
		padding: 0 14px;
	}

	.cwob-row {
		grid-template-columns: 10px minmax(0, 1fr) 44px;
		grid-template-rows: auto auto;
		gap: 6px 10px;
		padding: 9px 0;
		cursor: pointer;
	}

	.cwob-dot {
		grid-column: 1;
		grid-row: 1;
		align-self: start;
		margin-top: 5px;
	}

	.cwob-lead {
		grid-column: 2;
		grid-row: 1;
		display: block;
		padding-top: 1px;
		/* The context line is INLINE spans inside this block, so this - not
		 * the spans - decides that line box's height. Measured: the strut
		 * alone was ~30px of the 90px row. */
		font-size: 12px;
		line-height: 1.35;
	}

	.cwob-lead__head {
		display: block;
		font-size: 14px;
		line-height: 1.3;
	}

	.cwob-lead__detail,
	.cwob-lead__ref {
		display: inline;
		font-size: 12px;
		line-height: 1.4;
		white-space: normal;
	}

	/* Only drawn when both are present. */
	.cwob-lead__detail + .cwob-lead__ref::before {
		content: " · ";
	}

	.cwob-toggle {
		grid-column: 3;
		grid-row: 1;
		align-self: start;
		justify-self: end;
		width: 44px;
		height: 44px;
		margin-top: -8px;
		border-color: transparent;
		background: transparent;
	}

	.cwob-toggle svg {
		width: 16px;
		height: 16px;
	}

	.cwob-mini {
		grid-column: 2 / -1;
		grid-row: 2;
		width: 100%;
		gap: 10px;
		margin: 0;
	}

	.cwob-mini__segs {
		flex: 1 1 auto;
		gap: 4px;
	}

	.cwob-mini__seg {
		flex: 1 1 0;
		width: auto;
		height: 5px;
	}

	.cwob-mini__count {
		display: inline;
		line-height: 1;
	}

	/* The collapsed row is the answer; buttons move into the panel (see
	 * .cwob-detail__acts) - four rows of full-width buttons filled better than
	 * half an iPhone screen and buried the page underneath. */
	.cwob-acts {
		display: none;
	}

	.cwob-detail {
		cursor: default;
		padding: 4px 0 12px;
	}

	.cwob-detail__acts {
		display: flex;
	}

	.cwob-detail__acts .cwob-btn {
		flex: 1 1 auto;
		justify-content: center;
		padding: 12px 14px;
	}

	/* Five labelled steps do not fit a 360px screen legibly. The dots and the
	 * connector still show the shape of the journey; the wording is carried by
	 * the headline above, which is never truncated. */
	.cwob-step__label {
		font-size: 0;
	}

	.cwob-step--current .cwob-step__label {
		font-size: 11px;
	}

	/* The fold. Rows the script marked as overflow hide until "Show N more". */
	.cwob:not(.cwob--all) .cwob-row--overflow {
		display: none;
	}

	.cwob-more {
		display: block;
	}

	/* Foot controls get a real thumb target without growing the band. */
	.cwob-foot {
		padding: 4px 0 6px;
	}

	.cwob-foot a,
	.cwob-close {
		display: inline-block;
		padding: 9px 6px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.cwob *,
	.cwob *::before,
	.cwob *::after {
		animation: none !important;
		transition: none !important;
	}
}