/*
 * Front-end styling for the EDI connector.
 *
 * Highlander's own brand colours, sampled from their logo: #00A651 green and
 * #231F20 near-black.
 *
 * Laid out mobile-first because a dispatcher answering a tender is as likely to
 * be on a phone as at a desk, even though status entry is a desk job. Nothing
 * here depends on the WordPress theme — this is an application, and inheriting
 * a marketing theme's typography would fight it the whole way.
 */

/* Light is the default palette. Dark is defined twice below — once behind the
   OS preference, once behind an explicit choice — so all three states (light,
   dark, and "follow the system") resolve to a complete set. Every colour is a
   token: a literal anywhere else is a colour that only works in one theme. */
:root {
	--brand: #00a651;
	--brand-dark: #008542;
	--on-brand: #ffffff;
	--ink: #231f20;
	--muted: #6b7280;
	--line: #e3e5e8;
	--bg: #f4f6f5;
	--card: #ffffff;
	--field: #ffffff;
	--danger: #b32d2e;
	--warn: #bd5c00;
	--radius: 10px;

	/* A tender that has just landed. */
	--fresh: #e9f8f0;
	--fresh-line: #7fd3a8;

	/* Semantic washes, kept separate from the brand accent. */
	--ok-wash: #e6f6ed;   --ok-line: #a8ddc0;   --ok-ink: #008542;
	--bad-wash: #fdecec;  --bad-line: #f0b6b6;  --bad-ink: #b32d2e;
	--warn-wash: #fff4e5; --warn-line: #f3d3a5; --warn-ink: #bd5c00;
	--info-wash: #eef4fb; --info-line: #bcd3ee; --info-ink: #14568f;

	/* Raw EDI is shown on a dark ground in both themes — it is machine text. */
	--code-bg: #231f20;
	--code-ink: #dfe6e2;

	--shadow: rgba(0, 0, 0, .12);
	--shadow-lg: rgba(0, 0, 0, .22);
	--backdrop: rgba(15, 23, 20, .45);
	--halo: rgba(0, 166, 81, .16);
	--on-brand-soft: rgba(255, 255, 255, .85);
	--on-brand-chip: rgba(255, 255, 255, .28);

	/* Native form controls — the date and time picker panels, scrollbars,
	   spinners — follow this, not our tokens. Omitting it leaves a white
	   calendar popping out of a dark page. */
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--brand: #35c47c;
		--brand-dark: #7ddcab;
		--on-brand: #08130d;
		--ink: #e6ece8;
		--muted: #93a29a;
		--line: #2a352e;
		--bg: #0e1411;
		--card: #161d19;
		--field: #1b2420;
		--danger: #ef8b83;
		--warn: #e0a663;

		--fresh: #12291f;
		--fresh-line: #1f6a45;

		--ok-wash: #11291d;   --ok-line: #1f6a45;   --ok-ink: #7ddcab;
		--bad-wash: #2c1513;  --bad-line: #6d2b26;  --bad-ink: #ef8b83;
		--warn-wash: #2a1f10; --warn-line: #6b4a1c; --warn-ink: #e0a663;
		--info-wash: #11202e; --info-line: #22405c; --info-ink: #8fbde8;

		--code-bg: #080c0a;
		--code-ink: #cdd8d2;

		--shadow: rgba(0, 0, 0, .5);
		--shadow-lg: rgba(0, 0, 0, .6);
		--backdrop: rgba(0, 0, 0, .62);
		--halo: rgba(53, 196, 124, .22);
		--on-brand-soft: rgba(8, 19, 13, .72);
		--on-brand-chip: rgba(8, 19, 13, .18);
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--brand: #35c47c;
	--brand-dark: #7ddcab;
	--on-brand: #08130d;
	--ink: #e6ece8;
	--muted: #93a29a;
	--line: #2a352e;
	--bg: #0e1411;
	--card: #161d19;
	--field: #1b2420;
	--danger: #ef8b83;
	--warn: #e0a663;

	--fresh: #12291f;
	--fresh-line: #1f6a45;

	--ok-wash: #11291d;   --ok-line: #1f6a45;   --ok-ink: #7ddcab;
	--bad-wash: #2c1513;  --bad-line: #6d2b26;  --bad-ink: #ef8b83;
	--warn-wash: #2a1f10; --warn-line: #6b4a1c; --warn-ink: #e0a663;
	--info-wash: #11202e; --info-line: #22405c; --info-ink: #8fbde8;

	--code-bg: #080c0a;
	--code-ink: #cdd8d2;

	--shadow: rgba(0, 0, 0, .5);
	--shadow-lg: rgba(0, 0, 0, .6);
	--backdrop: rgba(0, 0, 0, .62);
	--halo: rgba(53, 196, 124, .22);
	--on-brand-soft: rgba(8, 19, 13, .72);
	--on-brand-chip: rgba(8, 19, 13, .18);
}

* { box-sizing: border-box; }

/* Author rules beat the UA stylesheet whatever their specificity, so anything
   with its own `display` — a .cedi-btn, say — ignores the hidden attribute
   without this. */
[hidden] { display: none !important; }

body.cedi {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font: 15px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
}

/* ---- chrome ---------------------------------------------------------- */

.cedi-bar {
	background: var(--field);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 20;
}
.cedi-bar-in { position: relative; }

.cedi-bar-in {
	max-width: 1100px;
	margin: 0 auto;
	padding: 10px 16px;
	display: flex;
	align-items: center;
	gap: 14px;
}

.cedi-brand { display: block; flex: 0 0 auto; }
.cedi-bar img { height: 38px; width: auto; display: block; }

.cedi-bar nav {
	display: flex;
	gap: 4px;
	margin-left: auto;
	align-items: center;
	flex-wrap: wrap;
}

.cedi-bar nav a {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
	font-size: 14px;
	padding: 7px 12px;
	border-radius: 7px;
}

.cedi-bar nav a:hover { background: var(--bg); }
.cedi-bar nav a.on { background: var(--brand); color: var(--on-brand); }
.cedi-bar nav .who { color: var(--muted); font-weight: 400; font-size: 13px; }
.cedi-navsep { display: none; }

.cedi-tools { display: flex; gap: 8px; align-items: center; flex: 0 0 auto; }

/* Hamburger, drawn rather than iconed so it inherits the theme and animates
   into a close button. Hidden entirely on desktop. */
.cedi-burger {
	display: none;
	width: 42px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: none;
	cursor: pointer;
	position: relative;
}
.cedi-burger span {
	position: absolute;
	left: 11px;
	width: 18px;
	height: 2px;
	background: var(--ink);
	border-radius: 2px;
	transition: transform .18s ease, opacity .12s ease;
}
.cedi-burger span:nth-child(1) { top: 13px; }
.cedi-burger span:nth-child(2) { top: 19px; }
.cedi-burger span:nth-child(3) { top: 25px; }

.cedi-burger[aria-expanded="true"] { border-color: var(--brand); }
.cedi-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.cedi-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.cedi-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) {
	.cedi-burger span { transition: none; }
}

/* ---- phone ----------------------------------------------------------
 *
 * Eight items wrapping across a sticky bar ate the top third of a phone
 * screen. Below this width the links collapse into a panel and only the two
 * one-tap controls stay out.
 */
@media (max-width: 760px) {
	.cedi-bar-in { padding: 8px 14px; gap: 10px; }
	.cedi-bar img { height: 30px; }
	.cedi-burger { display: block; }

	.cedi-bar nav {
		position: absolute;
		left: 0;
		right: 0;
		top: 100%;
		margin: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--field);
		border-bottom: 1px solid var(--line);
		box-shadow: 0 10px 24px var(--shadow);
		padding: 6px;
		display: none;
	}
	.cedi-bar nav.open { display: flex; }

	/* Full-width rows with a real tap target, not 14px links side by side. */
	.cedi-bar nav a {
		padding: 13px 14px;
		font-size: 15.5px;
		border-radius: 8px;
		min-height: 46px;
		display: flex;
		align-items: center;
	}
	.cedi-bar nav a.on { background: var(--brand); color: var(--on-brand); }

	.cedi-navsep {
		display: block;
		height: 1px;
		background: var(--line);
		margin: 6px 8px;
	}
	.cedi-bar nav .who {
		padding: 4px 14px 8px;
		font-size: 12.5px;
		text-transform: uppercase;
		letter-spacing: .06em;
	}
	.cedi-bar nav a.cedi-out { color: var(--danger); }
}

.cedi-wrap { max-width: 1100px; margin: 0 auto; padding: 20px 16px 60px; }

h1.cedi-h { font-size: 22px; margin: 0 0 4px; letter-spacing: -0.01em; }
.cedi-titlebar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 4px;
}
.cedi-titlebar h1.cedi-h { margin: 0; }
.cedi-titlebar .cedi-tags { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
h2.cedi-h { font-size: 16px; margin: 28px 0 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.cedi-sub { color: var(--muted); margin: 0 0 20px; font-size: 14px; }

/* ---- cards ----------------------------------------------------------- */

.cedi-card {
	background: var(--card);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 12px;
}

a.cedi-card { display: block; text-decoration: none; color: inherit; transition: border-color .12s, transform .12s; }
a.cedi-card:hover { border-color: var(--brand); transform: translateY(-1px); }

.cedi-card-top { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.cedi-id { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.cedi-lane { font-size: 15px; margin: 8px 0 0; }
.cedi-lane b { font-weight: 600; }
.cedi-arrow { color: var(--brand); font-weight: 700; margin: 0 6px; }
.cedi-meta { color: var(--muted); font-size: 13px; margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- countdown / badges ---------------------------------------------- */

/* The right-hand column. Every tag on every card starts at the same edge, so
 * the list reads as a column of states rather than badges scattered wherever
 * each Load ID happened to end. */
.cedi-badge {
	margin-left: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 7px;
	text-align: right;
	font-weight: 700;
	font-size: 15px;
	white-space: nowrap;
	flex-shrink: 0;
}
.cedi-badge small { display: block; font-weight: 400; font-size: 12px; color: var(--muted); }
.cedi-countdown { line-height: 1.25; }
.cedi-soon { color: var(--warn); }
.cedi-late { color: var(--danger); }

.cedi-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .04em;
	background: var(--bg);
	color: var(--muted);
}
.cedi-pill.ok { background: var(--ok-wash); color: var(--ok-ink); }
.cedi-pill.bad { background: var(--bad-wash); color: var(--bad-ink); }
.cedi-pill.warn { background: var(--warn-wash); color: var(--warn-ink); }

/* ---- revised tenders -------------------------------------------------
 *
 * A revision has to interrupt. QVC resends the whole load when anything
 * changes, so a dispatcher who does not notice the marker answers a tender
 * they have not actually read — which is why this is the loudest thing on the
 * card rather than a note in the metadata line.
 */

.cedi-flag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 800;
	font-size: 11.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 5px;
	background: var(--warn);
	color: var(--on-brand);
	white-space: nowrap;
	vertical-align: middle;
}
.cedi-flag .v {
	background: var(--on-brand-chip);
	padding: 1px 6px;
	border-radius: 3px;
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
}
.cedi-flag.killed { background: var(--danger); }

a.cedi-card.revised,
.cedi-card.revised { border-left: 4px solid var(--warn); }
a.cedi-card.killed,
.cedi-card.killed { border-left: 4px solid var(--danger); }

.cedi-changes { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.cedi-changes th {
	text-align: left;
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--muted);
	padding: 0 14px 7px 0;
	border-bottom: 1px solid var(--line);
	font-weight: 600;
}
.cedi-changes td { padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line); vertical-align: top; }
.cedi-changes tr:last-child td { border-bottom: 0; }
.cedi-changes .was { color: var(--muted); text-decoration: line-through; }
.cedi-changes .now { color: var(--warn); font-weight: 700; }
.cedi-changes .fld { font-weight: 600; }

/* ---- stops ----------------------------------------------------------- */

.cedi-stop { border-left: 4px solid var(--brand); }
.cedi-stop.drop { border-left-color: var(--ink); }
.cedi-stop h3 { margin: 0 0 8px; font-size: 15px; }
.cedi-stop .addr { font-size: 14px; }
.cedi-stop .when { margin-top: 8px; font-size: 13px; color: var(--muted); }
.cedi-stop .when b { color: var(--ink); font-weight: 600; }

/* ---- key/value ------------------------------------------------------- */

.cedi-kv { width: 100%; border-collapse: collapse; }
.cedi-kv th { text-align: left; font-weight: 500; color: var(--muted); padding: 7px 12px 7px 0; width: 190px; vertical-align: top; font-size: 14px; }
.cedi-kv td { padding: 7px 0; font-size: 14px; }
.cedi-kv tr + tr th, .cedi-kv tr + tr td { border-top: 1px solid var(--line); }

/* ---- forms ----------------------------------------------------------- */

label.cedi-l { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.cedi-hint { color: var(--muted); font-size: 12px; margin-top: 4px; }

input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
select,
textarea {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	background: var(--field);
	color: var(--ink);
}
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--brand);
	outline-offset: -1px;
	border-color: var(--brand);
}

.cedi-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.cedi-row > div { flex: 1 1 160px; min-width: 0; }

/* Date and time controls carry an intrinsic minimum width — their internal
   segments plus the picker button — that the browser enforces whatever we set
   on the wrapper. Given the same 160px basis as a text field they get squeezed
   past it and spill out to the right. These bases match what the controls
   actually need, so the row wraps instead of overflowing. */
.cedi-row > div.f-date { flex: 1 1 175px; min-width: 165px; }
.cedi-row > div.f-time { flex: 1 1 135px; min-width: 125px; }
.cedi-row > div.f-state { flex: 0 1 96px; min-width: 84px; }

/* Nothing in a field row may exceed its wrapper, whatever the control thinks
   its natural size is. */
.cedi-row input,
.cedi-row select { max-width: 100%; }

/* At phone width two per row reads better than five squeezed onto one. */
@media (max-width: 560px) {
	.cedi-row > div.f-date { flex: 1 1 150px; min-width: 140px; }
	.cedi-row > div.f-time { flex: 1 1 110px; min-width: 104px; }
	.cedi-row > div.f-state { flex: 0 1 84px; min-width: 72px; }
}

.cedi-btn {
	display: inline-block;
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	background: var(--brand);
	color: var(--on-brand);
}
.cedi-btn:hover { background: var(--brand-dark); }
.cedi-btn.ghost { background: var(--field); color: var(--ink); border: 1px solid var(--line); }
.cedi-btn.ghost:hover { border-color: var(--danger); color: var(--danger); background: var(--field); }
.cedi-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* ---- notices --------------------------------------------------------- */

.cedi-note {
	padding: 12px 16px;
	border-radius: var(--radius);
	margin-bottom: 16px;
	font-size: 14px;
	border: 1px solid;
}
.cedi-note.ok { background: var(--ok-wash); border-color: var(--ok-line); color: var(--ok-ink); }
.cedi-note.bad { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad-ink); }
.cedi-note.info { background: var(--info-wash); border-color: var(--info-line); color: var(--info-ink); }
.cedi-note.warn { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn-ink); }

.cedi-empty { text-align: center; padding: 44px 16px; color: var(--muted); }

/* ---- tables ---------------------------------------------------------- */

.cedi-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.cedi-t { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 640px; }
table.cedi-t th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 9px 12px; border-bottom: 1px solid var(--line); }
table.cedi-t td { padding: 11px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.cedi-t tr:last-child td { border-bottom: 0; }

details.cedi-raw summary { cursor: pointer; font-weight: 600; font-size: 14px; }
details.cedi-raw pre {
	background: var(--code-bg);
	color: var(--code-ink);
	padding: 14px;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 11.5px;
	line-height: 1.5;
	margin: 12px 0 0;
}

/* ---- login ----------------------------------------------------------- */

.cedi-login { max-width: 360px; margin: 12vh auto; padding: 0 16px; }
.cedi-login .cedi-card { padding: 30px 28px 28px; }
.cedi-login img { height: 70px; display: block; margin: 0 auto 26px; }

/* With the heading gone the form is the whole card, so it carries the spacing
   the heading used to provide. */
.cedi-login #cedi-login p { margin: 0 0 14px; }
.cedi-login #cedi-login p.login-submit { margin: 20px 0 0; }
.cedi-login #cedi-login label { display: block; font-weight: 600; font-size: 13px; margin-bottom: 5px; }
.cedi-login #cedi-login .login-remember label { font-weight: 400; font-size: 13px; color: var(--muted); }
.cedi-login #cedi-login .login-remember input { width: auto; margin-right: 7px; }
.cedi-login #cedi-login input[type=submit] {
	width: 100%;
	padding: 11px 20px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
	background: var(--brand);
	color: var(--on-brand);
}
.cedi-login #cedi-login input[type=submit]:hover { background: var(--brand-dark); }

@media (max-width: 640px) {
	.cedi-badge {
		margin-left: 0;
		text-align: left;
		width: 100%;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
	.cedi-titlebar .cedi-tags { margin-left: 0; width: 100%; }
	.cedi-bar-in { gap: 10px; }
	.cedi-bar img { height: 30px; }
	.cedi-kv th { width: 130px; }
}

/* Live-update affordances ------------------------------------------------ */

.cedi-fresh { color: var(--brand-dark); font-weight: 600; }

.cedi-moved a { color: inherit; font-weight: 700; }

/* New cards arriving under someone's eyes should be noticeable without
   being animated furniture; one slow fade on the replaced list is enough. */
#cedi-live { animation: cedi-in .35s ease-out; }
@keyframes cedi-in { from { opacity: .45; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
	#cedi-live { animation: none; }
}

/* Status sequence buttons ------------------------------------------------
 *
 * The four QRG requires, in trip order, so the panel reads as a journey
 * rather than a menu. The expected one is the only thing styled as a primary
 * action; the rest are present but plainly not what to press next.
 */

.cedi-seq {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	margin-bottom: 18px;
}

.cedi-step {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 3px;
	padding: 13px 14px;
	border: 1px solid var(--line);
	border-radius: 9px;
	background: var(--field);
	font: inherit;
	text-align: left;
	cursor: pointer;
	min-width: 0;
	color: var(--ink);
}
.cedi-step:hover { border-color: var(--brand); }
.cedi-step:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.cedi-step .code {
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .07em;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
}
.cedi-step .name { font-size: 14px; font-weight: 600; line-height: 1.25; }
.cedi-step .sub { font-size: 11.5px; color: var(--muted); line-height: 1.3; }

/* The one to press. */
.cedi-step.next {
	background: var(--brand);
	border-color: var(--brand);
	color: var(--on-brand);
	box-shadow: 0 1px 3px var(--shadow);
}
.cedi-step.next .code,
.cedi-step.next .sub { color: var(--on-brand-soft); }

/* Already reported. Still pressable, but it has to look like a repeat. */
.cedi-step.done { background: var(--bg); border-style: dashed; color: var(--muted); }
.cedi-step.done .name { color: var(--muted); font-weight: 500; }
.cedi-step.done .name::before { content: "✓ "; color: var(--brand); font-weight: 700; }

/* Further down the trip than we have got. */
.cedi-step.ahead { opacity: .62; }
.cedi-step.ahead:hover { opacity: 1; border-color: var(--warn); }

.cedi-seq-rail {
	font-size: 12px;
	color: var(--muted);
	margin: 0 0 8px;
	text-transform: uppercase;
	letter-spacing: .06em;
	font-weight: 600;
}

.cedi-confirm { border-left: 3px solid var(--warn); }
.cedi-confirm h3 {
	margin: 0 0 6px;
	font-size: 16px;
	color: var(--warn);
}
.cedi-confirm .cedi-actions { margin-top: 14px; }

.cedi-other summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	padding: 4px 0;
}
.cedi-other summary:hover { color: var(--ink); }
.cedi-other[open] summary { margin-bottom: 12px; }

@media (max-width: 720px) {
	.cedi-seq { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 380px) {
	.cedi-seq { grid-template-columns: 1fr; }
}

/* Out-of-sequence confirmation ------------------------------------------
 *
 * Asked over the page. Replacing the page to pose a question throws the
 * reader back to the top and loses where they were.
 */

dialog.cedi-modal {
	border: 0;
	border-radius: 12px;
	padding: 26px 28px;
	max-width: 470px;
	width: calc(100% - 32px);
	background: var(--card);
	color: var(--ink);
	box-shadow: 0 18px 48px var(--shadow-lg);
	border-top: 4px solid var(--brand);
}
dialog.cedi-modal::backdrop { background: var(--backdrop); }
dialog.cedi-modal h3 {
	margin: 0 0 10px;
	font-size: 18px;
	color: var(--brand-dark);
	line-height: 1.25;
}
dialog.cedi-modal p { margin: 0 0 4px; font-size: 15px; line-height: 1.55; }
dialog.cedi-modal .cedi-actions { margin-top: 20px; }

/* What is about to go. The values are editable right up to the click, so this
   is read from the form at the moment it opens, not rendered with the page. */
.cedi-modal-sum {
	background: var(--bg);
	border-radius: 8px;
	padding: 11px 14px;
	font-size: 14.5px !important;
	color: var(--ink);
}
.cedi-modal-warn { display: none; }

/* Out of sequence: same dialog, different weight. */
dialog.cedi-modal.warning { border-top-color: var(--warn); }
dialog.cedi-modal.warning h3 { color: var(--warn); }
dialog.cedi-modal.warning .cedi-modal-warn {
	display: block;
	margin-top: 12px;
	color: var(--warn);
}
dialog.cedi-modal.warning #cedi-warn-yes { background: var(--warn); }

@media (prefers-reduced-motion: no-preference) {
	dialog.cedi-modal[open] { animation: cedi-pop .14s ease-out; }
	@keyframes cedi-pop {
		from { opacity: 0; transform: translateY(-6px); }
		to   { opacity: 1; transform: none; }
	}
}

/* Journey bar -----------------------------------------------------------
 *
 * Where the shipment is, as the load's own five states. The connector line
 * fills behind the completed half so progress reads at a glance, before any
 * label is read.
 */

.cedi-journey {
	list-style: none;
	margin: 0 0 20px;
	padding: 0;
	display: flex;
	counter-reset: j;
}

.cedi-journey li {
	flex: 1 1 0;
	min-width: 0;
	position: relative;
	padding-top: 26px;
	text-align: center;
	font-size: 12.5px;
	line-height: 1.3;
	color: var(--muted);
}

/* The rail, drawn behind the dots. */
.cedi-journey li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: -50%;
	width: 100%;
	height: 2px;
	background: var(--line);
}
.cedi-journey li:first-child::before { display: none; }
.cedi-journey li.done::before,
.cedi-journey li.current::before,
.cedi-journey li.skipped::before { background: var(--brand); }

/* The dot. */
.cedi-journey li::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 50%;
	transform: translateX(-50%);
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: var(--card);
	border: 2px solid var(--line);
	box-sizing: border-box;
}
.cedi-journey li.done::after { background: var(--brand); border-color: var(--brand); }
.cedi-journey li.skipped::after { background: var(--card); border-color: var(--brand); border-style: dashed; }
.cedi-journey li.current::after {
	background: var(--brand);
	border-color: var(--brand);
	width: 18px;
	height: 18px;
	top: 0;
	box-shadow: 0 0 0 4px var(--halo);
}

.cedi-journey .lbl { display: block; }
.cedi-journey li.done { color: var(--ink); }
.cedi-journey li.current .lbl { color: var(--brand-dark); font-weight: 700; }
.cedi-journey li.skipped .lbl { color: var(--warn); }
.cedi-journey .at { display: block; font-size: 11px; color: var(--muted); margin-top: 2px; }
.cedi-journey li.skipped .at { color: var(--warn); }

@media (max-width: 560px) {
	.cedi-journey li { font-size: 11px; }
	.cedi-journey .at { display: none; }
}

/* Sound toggle ----------------------------------------------------------- */

.cedi-sound {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 1px solid var(--line);
	border-radius: 7px;
	padding: 6px 10px;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	cursor: pointer;
}
.cedi-sound:hover { border-color: var(--brand); color: var(--ink); }
.cedi-sound .on { font-size: 15px; line-height: 1; }
.cedi-sound[aria-pressed="true"] { color: var(--brand-dark); border-color: var(--brand); }
.cedi-sound[aria-pressed="false"] .on { opacity: .4; text-decoration: line-through; }

/* Browsers refuse audio until the page has been interacted with; say so
   rather than letting the toggle look on while nothing happens. */
.cedi-sound.blocked { border-color: var(--warn); color: var(--warn); }

@media (max-width: 760px) { .cedi-sound .lbl { display: none; } }


/* Just arrived ----------------------------------------------------------
 *
 * Held for the first minute on the board, then released. The class is applied
 * and removed by the clock in the browser rather than by the server, so it
 * expires on the minute instead of whenever the next poll happens to land.
 */

a.cedi-card {
	transition: border-color .12s, transform .12s, background-color 1.2s ease-out;
}

a.cedi-card.fresh {
	background: var(--fresh);
	border-color: var(--fresh-line);
	transition: background-color .2s;
}

.cedi-new {
	display: inline-block;
	background: var(--brand);
	color: var(--on-brand);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 3px 9px;
	border-radius: 5px;
	white-space: nowrap;
}

/* Only shown while the card is fresh; removing the class hides it without a
   re-render. */
a.cedi-card:not(.fresh) .cedi-new { display: none; }

@media (prefers-reduced-motion: reduce) {
	a.cedi-card { transition: none; }
}

/* Live indicator --------------------------------------------------------- */

.cedi-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--brand);
	margin-right: 8px;
	vertical-align: 1px;
}
@media (prefers-reduced-motion: no-preference) {
	.cedi-dot { animation: cedi-pulse 2.4s ease-in-out infinite; }
	@keyframes cedi-pulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
}

.cedi-checked { color: var(--muted); font-weight: 400; }
.cedi-fresh .cedi-dot { background: var(--brand); }

/* Theme toggle ----------------------------------------------------------- */

.cedi-theme .ico { font-size: 14px; line-height: 1; }
.cedi-theme[aria-pressed="true"] { color: var(--brand-dark); border-color: var(--brand); }

/* The whole page shifts at once rather than each surface easing on its own
   schedule, which reads as flicker. Excluded from anything that already
   animates. */
@media (prefers-reduced-motion: no-preference) {
	body.cedi,
	.cedi-bar,
	.cedi-card,
	input, select, textarea {
		transition: background-color .18s ease, border-color .18s ease, color .18s ease;
	}
	a.cedi-card.fresh { transition: background-color .2s; }
}

/* Partner profile picker -------------------------------------------------- */

.cedi-profile {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 13px 15px;
	border: 1px solid var(--line);
	border-radius: 9px;
	margin-bottom: 9px;
	cursor: pointer;
}
.cedi-profile:hover { border-color: var(--brand); }
.cedi-profile.on { border-color: var(--brand); background: var(--ok-wash); }
.cedi-profile input { width: auto; margin-top: 3px; flex: 0 0 auto; }
.cedi-profile .body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cedi-profile b { font-size: 15px; }
.cedi-profile .meta { font-size: 12.5px; color: var(--muted); word-break: break-word; }
.cedi-profile .meta code { font-size: .92em; }

/* Date and time fields ---------------------------------------------------
 *
 * These carry an internal picker indicator that browsers size and colour
 * themselves, so left alone they sit at a different height to their text
 * siblings in the same row and their icon can vanish against a dark field.
 */

input[type=date],
input[type=time] {
	/* Deliberately NOT `appearance: none`. It is the usual fix for Safari
	   sizing these to their content, but on Safari it can also strip the
	   native picker button — trading a few pixels of width for a field nobody
	   can open. width:100% from the rule above handles the sizing on its own.
	   min-width:0 stops the intrinsic size overriding it inside a flex row. */
	min-width: 0;
	min-height: 38px;
	line-height: 1.2;
}

/* The calendar and clock buttons. Tinted to the brand so they read as part of
   the field rather than as browser furniture, and made visible in dark mode
   where the default glyph is near-black. */
input[type=date]::-webkit-calendar-picker-indicator,
input[type=time]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: .55;
	padding: 2px;
	border-radius: 4px;
	transition: opacity .12s, background-color .12s;
}
input[type=date]::-webkit-calendar-picker-indicator:hover,
input[type=time]::-webkit-calendar-picker-indicator:hover {
	opacity: 1;
	background: var(--ok-wash);
}

:root[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator,
:root[data-theme="dark"] input[type=time]::-webkit-calendar-picker-indicator {
	filter: invert(1) brightness(1.6);
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) input[type=date]::-webkit-calendar-picker-indicator,
	:root:not([data-theme="light"]) input[type=time]::-webkit-calendar-picker-indicator {
		filter: invert(1) brightness(1.6);
	}
}

/* The editable segments inside the field. */
input[type=date]::-webkit-datetime-edit,
input[type=time]::-webkit-datetime-edit { color: var(--ink); padding: 0; }
input[type=date]::-webkit-datetime-edit-fields-wrapper,
input[type=time]::-webkit-datetime-edit-fields-wrapper { padding: 0; }
input[type=date]::-webkit-datetime-edit-text,
input[type=time]::-webkit-datetime-edit-text { color: var(--muted); padding: 0 1px; }

/* An empty field should read as a prompt, not as a filled value. */
input[type=date]:invalid::-webkit-datetime-edit,
input[type=time]:invalid::-webkit-datetime-edit { color: var(--muted); }

/* Firefox puts its own clear button in; it fights the layout. */
input[type=date]::-moz-calendar-picker-indicator { cursor: pointer; }

select {
	/* Match the pickers rather than sitting a pixel or two off. */
	min-height: 38px;
}

/* ---- date and time on touch devices ------------------------------------
 *
 * iOS Safari sizes a native date/time control to the box it wants and ignores
 * width, max-width and its flex wrapper entirely, so in a two-up row it draws
 * itself wider than the column it was given and spills past the card's right
 * edge. `appearance: none` is what makes width apply again.
 *
 * The note above says not to use it — that holds for mouse browsers, where it
 * can take the native calendar button with it. On a coarse pointer there is no
 * button to lose: the picker is a full-screen wheel that opening the field
 * summons, so the field keeps working exactly as before and merely obeys its
 * width. Scoped to `pointer: coarse` so desktop keeps its button.
 */
@media (pointer: coarse) {
	input[type=date],
	input[type=time] {
		-webkit-appearance: none;
		appearance: none;
	}

	/* WebKit centres the value once the native appearance is off; left-align it
	   so the date and time read along the same line as every other field. */
	input[type=date]::-webkit-date-and-time-value,
	input[type=time]::-webkit-date-and-time-value {
		text-align: left;
		margin: 0;
	}

	/* With width honoured, split the row exactly in half rather than leaving
	   the two controls to negotiate it from different bases. */
	@media (max-width: 560px) {
		.cedi-row > div.f-date,
		.cedi-row > div.f-time { flex: 1 1 calc(50% - 6px); min-width: 0; }
	}
}

/* ---- deadline reminders (settings) ------------------------------------
 *
 * A row per reminder: how many rows there are is how many emails a tender
 * produces, so the list is the control for both the count and the timing.
 */
.cedi-reminders { display: flex; flex-direction: column; gap: 8px; }
.cedi-reminders:empty { display: none; }

.cedi-reminder { display: flex; gap: 8px; align-items: center; }
.cedi-reminder select { flex: 1 1 auto; min-width: 0; max-width: 280px; }
.cedi-reminder .cedi-btn { flex: 0 0 auto; }

.cedi-noremind { margin: 0 0 4px; }

.cedi-btn.small { padding: 8px 14px; font-size: 13.5px; }

/* Neutral sibling of .ghost: that one hovers to danger because it is worn by
   Decline, and an Add button must not. */
.cedi-btn.quiet {
	margin-top: 10px;
	background: var(--field);
	color: var(--ink);
	border: 1px solid var(--line);
}
.cedi-btn.quiet:hover { border-color: var(--brand); color: var(--brand); background: var(--field); }