/**
 * Order tracking, front end.
 *
 * Every colour resolves from an `--ot-*` custom property with a neutral
 * fallback. The plugin never reads a theme's own token names: a theme that
 * wants the timeline in its palette maps its tokens onto these in one place,
 * which is what the PrimePromoGear bridge does. That keeps the plugin usable
 * on a default theme without carrying another theme's vocabulary.
 *
 * The layout answers the question in order of how much the customer cares:
 * a headline band saying where the order is and when it arrives, then the
 * steps, then parcels and artwork, then a folded log. Everything sits on one
 * card so it reads as a single panel rather than a run of loose bordered
 * boxes.
 */

.ot-timeline,
.ot-lookup,
.ot-result {
	--ot-ink: #1e1e1e;
	--ot-ink-muted: #545454;
	--ot-line: #d5d5d5;
	--ot-line-soft: #ebebeb;
	--ot-surface: #ffffff;
	--ot-surface-sunken: #f6f7f8;
	--ot-accent: #2271b1;
	--ot-accent-ink: #ffffff;
	--ot-done: #1a7f37;
	--ot-warning: #8a4b00;
	--ot-radius: 10px;
	--ot-radius-small: 6px;
	--ot-gap: 1rem;
	--ot-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

	color: var(--ot-ink);
}

@media (prefers-color-scheme: dark) {
	.ot-timeline,
	.ot-lookup,
	.ot-result {
		--ot-ink: #f0f0f0;
		--ot-ink-muted: #b8b8b8;
		--ot-line: #3f3f3f;
		--ot-line-soft: #2e2e2e;
		--ot-surface: #1b1b1b;
		--ot-surface-sunken: #232323;
		--ot-accent: #7cb7e8;
		--ot-accent-ink: #10202c;
		--ot-done: #6cc48a;
		--ot-warning: #e0a458;
		--ot-shadow: none;
	}
}

.ot-timeline {
	background: var(--ot-surface);
	border: 1px solid var(--ot-line-soft);
	border-radius: var(--ot-radius);
	box-shadow: var(--ot-shadow);
	padding: clamp(1rem, 4vw, 1.75rem);
	margin: 0 0 2rem;
}

.ot-timeline__heading {
	font-size: 1.05rem;
	line-height: 1.3;
	margin: 0 0 1rem;
	color: var(--ot-ink-muted);
	font-weight: 600;
	letter-spacing: 0.01em;
}

.ot-timeline__subheading {
	font-size: 1rem;
	margin: 0 0 0.75rem;
}

/* ---------------------------------------------------------------- headline */

/* The one thing the customer came for, sized so it is the first thing read. */
.ot-headline {
	display: flex;
	gap: 0.9rem;
	align-items: flex-start;
	background: var(--ot-surface-sunken);
	border: 1px solid var(--ot-line-soft);
	border-radius: var(--ot-radius-small);
	padding: 1rem 1.1rem;
	margin: 0 0 1.5rem;
}

.ot-headline__icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	background: var(--ot-accent);
	color: var(--ot-accent-ink);
}

.ot-headline[data-state="finished"] .ot-headline__icon {
	background: var(--ot-done);
}

.ot-headline[data-state="hold"] .ot-headline__icon {
	background: var(--ot-warning);
}

.ot-headline__glyph {
	width: 1.5rem;
	height: 1.5rem;
}

.ot-headline__body {
	min-width: 0;
}

.ot-headline__status {
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.4rem 0.6rem;
}

.ot-headline__caption {
	color: var(--ot-ink-muted);
	font-size: 0.85rem;
}

.ot-headline__stage {
	font-size: clamp(1.15rem, 3.5vw, 1.45rem);
	line-height: 1.2;
	font-weight: 700;
}

.ot-headline__progress {
	margin: 0.5rem 0 0;
	color: var(--ot-ink-muted);
	font-size: 0.85rem;
}

.ot-timeline__hold {
	display: inline-block;
	padding: 0.05rem 0.55rem;
	border: 1px solid var(--ot-warning);
	border-radius: 999px;
	color: var(--ot-warning);
	font-size: 0.8rem;
	white-space: nowrap;
}

.ot-timeline__note {
	color: var(--ot-ink-muted);
	margin: 0.4rem 0 0;
	max-width: 60ch;
}

.ot-timeline__promise {
	margin: 0.65rem 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.5rem;
	align-items: baseline;
}

.ot-timeline__promise-caption {
	color: var(--ot-ink-muted);
	font-size: 0.9rem;
}

.ot-timeline__promise time {
	font-weight: 700;
	font-size: 1.05rem;
}

/* ------------------------------------------------------------------- steps */

/* A single column at every width. A horizontal stepper at 360px is either
   unreadable or scrolls the page sideways. */
.ot-steps {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ot-step {
	--ot-step-colour: var(--ot-line);

	position: relative;
	padding: 0 0 1.5rem 3.1rem;
	margin: 0;
	min-height: 2.25rem;
}

.ot-step::before {
	content: "";
	position: absolute;
	left: 1.09rem;
	top: 2.4rem;
	bottom: -0.35rem;
	width: 2px;
	background: var(--ot-line-soft);
}

.ot-step--done::before {
	background: var(--ot-done);
}

.ot-step:last-child {
	padding-bottom: 0;
}

.ot-step:last-child::before {
	display: none;
}

.ot-step__marker {
	position: absolute;
	left: 0;
	top: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	border: 2px solid var(--ot-step-colour);
	background: var(--ot-surface);
	color: var(--ot-step-colour);
}

.ot-step__glyph {
	width: 1.15rem;
	height: 1.15rem;
}

.ot-step--done {
	--ot-step-colour: var(--ot-done);
}

.ot-step--done .ot-step__marker {
	background: var(--ot-done);
	border-color: var(--ot-done);
	color: var(--ot-surface);
}

.ot-step--current {
	--ot-step-colour: var(--ot-accent);
}

.ot-step--current .ot-step__marker {
	border-color: var(--ot-accent);
	color: var(--ot-accent);
	/* A ring rather than a fill, so "in progress" and "completed" differ in
	   shape as well as in colour. */
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ot-accent) 20%, transparent);
}

.ot-step--upcoming .ot-step__marker {
	color: var(--ot-ink-muted);
	opacity: 0.65;
}

.ot-step__body {
	display: block;
	padding-top: 0.15rem;
}

.ot-step__label {
	display: block;
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.35;
}

.ot-step--upcoming .ot-step__label {
	font-weight: 400;
	color: var(--ot-ink-muted);
}

.ot-step__state {
	display: block;
	font-size: 0.8rem;
	color: var(--ot-ink-muted);
}

.ot-step--done .ot-step__state {
	color: var(--ot-done);
}

.ot-step--current .ot-step__state {
	color: var(--ot-accent);
	font-weight: 600;
}

.ot-step__time {
	display: block;
	font-size: 0.85rem;
	color: var(--ot-ink-muted);
	margin-top: 0.1rem;
}


.ot-timeline--compact .ot-step {
	padding-bottom: 1rem;
}


/* -------------------------------------------------- parcels, proofs, history */

.ot-shipments-panel,
.ot-proofs {
	margin-top: 1.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--ot-line-soft);
}

.ot-history,
.ot-shipments {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ot-shipment {
	border: 1px solid var(--ot-line-soft);
	border-radius: var(--ot-radius-small);
	background: var(--ot-surface-sunken);
	padding: 0.9rem 1rem;
	margin: 0 0 0.75rem;
}

.ot-shipment > p {
	margin: 0 0 0.4rem;
}

.ot-shipment > p:last-child {
	margin-bottom: 0;
}

.ot-shipment__line {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.6rem;
	align-items: baseline;
}

.ot-shipment__carrier {
	font-weight: 700;
	font-size: 1.02rem;
}

.ot-shipment__status {
	color: var(--ot-ink-muted);
	font-size: 0.9rem;
}

.ot-shipment__caption {
	display: block;
	color: var(--ot-ink-muted);
	font-size: 0.8rem;
}

.ot-shipment__number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	word-break: break-all;
}

.ot-shipment__items {
	margin: 0.25rem 0 0;
	padding: 0 0 0 1.1rem;
	list-style: disc;
	color: var(--ot-ink-muted);
	font-size: 0.9rem;
}

.ot-proofs__intro,
.ot-proofs__history-heading {
	max-width: 62ch;
}

.ot-proofs__intro {
	color: var(--ot-ink-muted);
	margin: 0 0 1rem;
}

.ot-proof {
	border: 1px solid var(--ot-line-soft);
	border-radius: var(--ot-radius-small);
	background: var(--ot-surface-sunken);
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
}

.ot-proof__file {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.75rem;
	align-items: center;
	margin: 0 0 0.35rem;
}

.ot-proof__name,
.ot-proof__version,
.ot-proof__status {
	color: var(--ot-ink-muted);
	font-size: 0.85rem;
}

.ot-proof__status {
	margin: 0 0 0.75rem;
}

.ot-proof__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0;
}

.ot-proofs__history {
	color: var(--ot-ink-muted);
	font-size: 0.9rem;
	padding-left: 1.1rem;
}

.ot-history-panel {
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--ot-line-soft);
}

.ot-history-panel__summary {
	cursor: pointer;
	font-weight: 600;
	color: var(--ot-accent);
	min-height: 44px;
	display: flex;
	align-items: center;
}

.ot-history__item {
	display: flex;
	flex-wrap: wrap;
	gap: 0.15rem 0.75rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--ot-line-soft);
}

.ot-history__item:last-child {
	border-bottom: 0;
}

.ot-history__item time {
	color: var(--ot-ink-muted);
	font-size: 0.85rem;
	flex: 0 0 auto;
	min-width: 11rem;
}

.ot-timeline__updated {
	margin: 1.25rem 0 0;
	color: var(--ot-ink-muted);
	font-size: 0.8rem;
}

/* ------------------------------------------------------- lookup and buttons */

.ot-lookup {
	max-width: 32rem;
	background: var(--ot-surface);
	border: 1px solid var(--ot-line-soft);
	border-radius: var(--ot-radius);
	box-shadow: var(--ot-shadow);
	padding: clamp(1rem, 4vw, 1.75rem);
}

.ot-lookup__heading {
	margin: 0 0 0.35rem;
	font-size: clamp(1.2rem, 4vw, 1.5rem);
}

.ot-lookup__intro {
	margin: 0 0 1.25rem;
	color: var(--ot-ink-muted);
}

.ot-lookup__field {
	margin: 0 0 1.1rem;
}

.ot-lookup__field label {
	display: block;
	font-weight: 600;
}

.ot-lookup__hint {
	display: block;
	color: var(--ot-ink-muted);
	font-size: 0.85rem;
	margin: 0.1rem 0 0.35rem;
}

.ot-lookup__field input,
.ot-lookup__field textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 44px;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--ot-line);
	border-radius: var(--ot-radius-small);
	background: var(--ot-surface);
	color: var(--ot-ink);
	font: inherit;
}

.ot-lookup__field input:focus-visible,
.ot-lookup__field textarea:focus-visible,
.ot-history-panel__summary:focus-visible,
.ot-button:focus-visible {
	outline: 2px solid var(--ot-accent);
	outline-offset: 2px;
}

.ot-lookup__submit {
	margin: 0;
}

/* Styled only where a theme has not already styled the element, so a store
   with its own button design keeps it. */
.ot-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 44px;
	padding: 0.5rem 1rem;
	border-radius: var(--ot-radius-small);
	border: 1px solid var(--ot-line);
	background: var(--ot-surface);
	color: var(--ot-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.ot-button--primary {
	background: var(--ot-accent);
	border-color: var(--ot-accent);
	color: var(--ot-accent-ink);
}

.ot-button--quiet {
	font-weight: 600;
	background: var(--ot-surface);
}

.ot-notice {
	padding: 0.75rem 1rem;
	border-left: 4px solid var(--ot-accent);
	background: color-mix(in srgb, var(--ot-accent) 8%, transparent);
	border-radius: var(--ot-radius-small);
	margin: 0 0 1rem;
}

.ot-notice--error {
	border-left-color: var(--ot-warning);
	background: color-mix(in srgb, var(--ot-warning) 10%, transparent);
}

.ot-result__heading {
	margin: 0 0 1rem;
	font-size: clamp(1.2rem, 4vw, 1.5rem);
}

.ot-account-orders__caption {
	display: block;
	color: var(--ot-ink-muted);
	font-size: 0.8rem;
}

.ot-screen-reader-text {
	border: 0;
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

@media (min-width: 48em) {
	.ot-headline {
		align-items: center;
		padding: 1.15rem 1.35rem;
	}

	.ot-shipment__line {
		align-items: center;
	}
}

@media (max-width: 30em) {
	.ot-history__item time {
		min-width: 100%;
	}

	.ot-proof__actions .ot-button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ot-timeline * {
		transition: none !important;
		animation: none !important;
	}
}