/**
 * Cando Workforce — the staff portal shell and screens.
 *
 * Builds on cando-ui.css. Light, dense enough for real work, readable on a
 * phone in a warehouse doorway.
 */

.cdo-portal {
	display: grid;
	grid-template-columns: 264px minmax(0, 1fr);
	min-height: 80vh;
	background: var(--cdo-bg);
	font-family: var(--cdo-font);
	color: var(--cdo-ink);
	border-radius: var(--cdo-r-lg);
	overflow: hidden;
	border: 1px solid var(--cdo-line);
}

/* ------------------------------------------------------------- Sidebar */

.cdo-portal__side {
	display: flex;
	flex-direction: column;
	background: var(--cdo-navy);
	color: #dbe7f5;
	padding: 1.3rem 0;
}

.cdo-portal__brand { display: flex; align-items: center; gap: .7rem; padding: 0 1.3rem 1.3rem; }

.cdo-portal__brandmark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: rgba(255, 255, 255, .12);
	color: #fff;
	font-weight: 800;
	font-size: .92rem;
	flex: none;
}

.cdo-portal__brandtext { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.cdo-portal__brandtext strong { color: #fff; font-size: .95rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdo-portal__brandtext small { font-size: .74rem; color: #8fb0d6; }

.cdo-portal__nav { flex: 1; overflow-y: auto; padding: 0 .7rem; }
.cdo-portal__navgroup { margin-bottom: 1.15rem; }
.cdo-portal__navtitle { margin: 0 0 .35rem; padding: 0 .6rem; font: 700 .68rem/1 var(--cdo-font); letter-spacing: .12em; text-transform: uppercase; color: #7ea3cd; }
.cdo-portal__nav ul { list-style: none; margin: 0; padding: 0; }

.cdo-portal__navlink {
	display: flex;
	align-items: center;
	gap: .6rem;
	padding: .58rem .6rem;
	border-radius: var(--cdo-r-sm);
	color: #cfe0f2;
	text-decoration: none;
	font-size: .89rem;
	font-weight: 500;
	transition: background-color .15s ease, color .15s ease;
}

.cdo-portal__navlink:hover { background: rgba(255, 255, 255, .08); color: #fff; }
.cdo-portal__navlink.is-active { background: #fff; color: var(--cdo-navy); font-weight: 700; }
.cdo-portal__navlink .cdo-icon { opacity: .85; }
.cdo-portal__navlink.is-active .cdo-icon { opacity: 1; color: var(--cdo-blue); }

.cdo-portal__user {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .6rem .7rem;
	align-items: center;
	margin: .8rem 1rem 0;
	padding-top: 1rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
}

.cdo-portal__avatar {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .14);
	color: #fff;
	font-weight: 700;
	font-size: .88rem;
}

.cdo-portal__userinfo { display: flex; flex-direction: column; min-width: 0; }
.cdo-portal__userinfo strong { color: #fff; font-size: .87rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdo-portal__userinfo small { font-size: .72rem; color: #8fb0d6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cdo-portal__signout { grid-column: 1 / -1; font-size: .8rem; color: #8fb0d6; text-decoration: none; }
.cdo-portal__signout:hover { color: #fff; text-decoration: underline; }

.cdo-portal__navtoggle { display: none; }

/* ---------------------------------------------------------------- Main */

.cdo-portal__main { display: flex; flex-direction: column; min-width: 0; background: var(--cdo-bg); }

.cdo-portal__head {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
	justify-content: space-between;
	padding: 1.3rem clamp(1rem, 3vw, 2rem);
	background: var(--cdo-surface);
	border-bottom: 1px solid var(--cdo-line);
}

.cdo-portal__crumb { margin: 0 0 .15rem; font: 700 .72rem/1 var(--cdo-font); letter-spacing: .1em; text-transform: uppercase; color: var(--cdo-blue); }
.cdo-portal__head h1 { margin: 0; font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.2; color: var(--cdo-navy); letter-spacing: -.02em; }
.cdo-portal__headtools { display: flex; align-items: center; gap: .7rem; flex-wrap: wrap; }
.cdo-portal__clock { font-size: .84rem; color: var(--cdo-ink-3); font-variant-numeric: tabular-nums; }

.cdo-portal__bell { position: relative; }
.cdo-portal__bell summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: .3rem; padding: .45rem .7rem; border: 1px solid var(--cdo-line); border-radius: var(--cdo-r-sm); background: #fff; }
.cdo-portal__bell summary::-webkit-details-marker { display: none; }
.cdo-portal__bellcount { display: grid; place-items: center; min-width: 1.2rem; height: 1.2rem; padding: 0 .3rem; border-radius: 999px; background: var(--cdo-bad); color: #fff; font-size: .7rem; font-weight: 700; }

.cdo-portal__belldrop {
	position: absolute;
	right: 0;
	top: calc(100% + .4rem);
	width: min(24rem, 88vw);
	max-height: 26rem;
	overflow-y: auto;
	background: #fff;
	border: 1px solid var(--cdo-line);
	border-radius: var(--cdo-r);
	box-shadow: var(--cdo-shadow-lg);
	padding: 1rem;
	z-index: 40;
}

.cdo-portal__belldrop h3 { margin: 0 0 .6rem; font-size: .9rem; color: var(--cdo-navy); }
.cdo-portal__belldrop ul { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .4rem; }
.cdo-notif a { display: block; padding: .6rem .7rem; border-radius: var(--cdo-r-sm); background: var(--cdo-bg); text-decoration: none; border-left: 3px solid var(--cdo-line); }
.cdo-notif a:hover { background: var(--cdo-blue-50); }
.cdo-notif strong { display: block; font-size: .86rem; color: var(--cdo-ink); }
.cdo-notif span { display: block; font-size: .8rem; color: var(--cdo-ink-3); margin-top: .15rem; line-height: 1.5; }
.cdo-notif time { display: block; font-size: .72rem; color: var(--cdo-ink-3); margin-top: .25rem; }
.cdo-notif--warning a { border-left-color: var(--cdo-warn); }
.cdo-notif--critical a { border-left-color: var(--cdo-bad); }
.cdo-notif--info a { border-left-color: var(--cdo-blue); }

/* min-width: 0 on the grid columns, or a wide table inside a panel — a month
   of order columns, say — stretches the whole page instead of scrolling
   inside its own box. */
.cdo-portal__body { flex: 1; min-width: 0; padding: clamp(1rem, 3vw, 1.8rem); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.15rem; align-content: start; }
.cdo-portal__body > .cdo-notice { margin-bottom: 0; }

.cdo-portal__foot { padding: 1rem clamp(1rem, 3vw, 2rem); border-top: 1px solid var(--cdo-line); background: var(--cdo-surface); }
.cdo-portal__foot p { margin: 0; font-size: .78rem; color: var(--cdo-ink-3); }

/* --------------------------------------------------------------- Panels */

.cdo-panel {
	min-width: 0;
	background: var(--cdo-surface);
	border: 1px solid var(--cdo-line);
	border-radius: var(--cdo-r-lg);
	padding: 1.35rem 1.5rem;
	box-shadow: 0 1px 2px rgba(19, 26, 38, .04);
}

.cdo-panel--flush { padding: 0; overflow: hidden; }
.cdo-panel--actions { border-left: 3px solid var(--cdo-blue); }
.cdo-panel__head { display: flex; flex-wrap: wrap; gap: .6rem 1rem; align-items: center; justify-content: space-between; margin-bottom: 1.05rem; }
.cdo-panel__title { margin: 0 0 1rem; font-size: 1.05rem; line-height: 1.3; color: var(--cdo-navy); letter-spacing: -.01em; }
.cdo-panel__head .cdo-panel__title { margin: 0; }
.cdo-panel__hint { font-size: .82rem; color: var(--cdo-ink-3); }
.cdo-panel__hint--warn { color: var(--cdo-warn); font-weight: 600; }
.cdo-panel__link { font-size: .84rem; font-weight: 600; color: var(--cdo-blue); text-decoration: none; }
.cdo-panel__link:hover { text-decoration: underline; }

/* ----------------------------------------------------------------- KPIs */

.cdo-kpis { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.cdo-kpis--compact { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }

.cdo-kpi {
	background: var(--cdo-surface);
	border: 1px solid var(--cdo-line);
	border-radius: var(--cdo-r);
	padding: 1rem 1.15rem;
	display: flex;
	flex-direction: column;
	gap: .18rem;
	border-top: 3px solid var(--cdo-line);
}

.cdo-kpi--primary { border-top-color: var(--cdo-blue); }
.cdo-kpi--good { border-top-color: var(--cdo-good); }
.cdo-kpi--link { text-decoration: none; color: inherit; transition: transform .12s ease, box-shadow .12s ease; }
.cdo-kpi--link:hover, .cdo-kpi--link:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px -10px rgba(18, 58, 107, .45); }
.cdo-linkbtn { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(18, 58, 107, .3); text-underline-offset: 3px; }
.cdo-linkbtn:hover, .cdo-linkbtn:focus-visible { text-decoration-color: currentColor; }
.cdo-kpi--warn { border-top-color: var(--cdo-warn); }
.cdo-kpi--bad { border-top-color: var(--cdo-bad); }
.cdo-kpi--muted { border-top-color: var(--cdo-line); }

.cdo-kpi__label { font-size: .78rem; font-weight: 600; color: var(--cdo-ink-3); line-height: 1.35; }
.cdo-kpi__value { font-size: clamp(1.4rem, 3vw, 1.8rem); font-weight: 800; line-height: 1.1; color: var(--cdo-ink); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
/* An empty state sitting inside a panel, rather than standing in for a page. */
.cdo-empty--inline { padding: 1.4rem; text-align: left; background: transparent; border: 1px dashed var(--cdo-line); }
.cdo-empty--inline p { margin: 0 0 .8rem; max-width: none; }

/* A KPI that is also a shortcut into the list still reads as a number. */
.cdo-kpi__value a { color: inherit; text-decoration: none; }
.cdo-kpi__value a:hover, .cdo-kpi__value a:focus-visible { text-decoration: underline; }
.cdo-kpi__meta { font-size: .76rem; color: var(--cdo-ink-3); line-height: 1.4; display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; }

.cdo-delta { font-weight: 700; padding: .05rem .35rem; border-radius: 4px; font-size: .72rem; }
.cdo-delta--up { color: var(--cdo-good); background: var(--cdo-good-bg); }
.cdo-delta--down { color: var(--cdo-bad); background: var(--cdo-bad-bg); }

/* --------------------------------------------------------------- Tables */

.cdo-tablewrap { overflow-x: auto; margin: 0 -.35rem; padding: 0 .35rem; }
.cdo-tablewrap--scroll { max-height: 24rem; overflow-y: auto; }
/* The order grid is a working surface rather than a preview, so it gets more
   height before it starts scrolling — a fortnight of lines fits without one. */
.cdo-tablewrap--tall { max-height: 40rem; }

.cdo-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.cdo-table th, .cdo-table td { text-align: left; padding: .7rem .75rem; vertical-align: top; }
.cdo-table thead th { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--cdo-ink-3); border-bottom: 1px solid var(--cdo-line); white-space: nowrap; }
.cdo-table tbody tr { border-bottom: 1px solid var(--cdo-line-2); }
.cdo-table tbody tr:last-child { border-bottom: 0; }
.cdo-table tbody tr:hover { background: var(--cdo-bg); }
.cdo-table tbody tr.is-flagged { background: #fef7f6; }
.cdo-table tbody tr.is-flagged:hover { background: #fdeceb; }
.cdo-table tfoot td { padding-top: .9rem; border-top: 2px solid var(--cdo-line); font-size: .88rem; }
.cdo-table--compact th, .cdo-table--compact td { padding: .5rem .6rem; font-size: .84rem; }
.cdo-table--nested { margin-top: .5rem; background: var(--cdo-bg); border-radius: var(--cdo-r-sm); }
.cdo-table__check { width: 2.4rem; }
.cdo-table__actions { width: 1%; white-space: nowrap; text-align: right; }
.cdo-table__subrow td { padding-top: 0; }
.cdo-table__subrow summary { cursor: pointer; font-size: .8rem; color: var(--cdo-ink-3); }

.cdo-table a { color: var(--cdo-blue); text-decoration: none; }
.cdo-table a:hover { text-decoration: underline; }
/* A button inside a table is still a button: the link colour above is more
   specific than .cdo-btn and was painting blue text onto a blue button. */
.cdo-table a.cdo-btn { color: var(--btn-fg); }
.cdo-table a.cdo-btn:hover { text-decoration: none; color: #fff; }
.cdo-table a.cdo-btn--ghost:hover { color: var(--cdo-blue); }
.cdo-table code { font: 600 .82rem var(--cdo-mono); color: var(--cdo-ink-2); background: var(--cdo-line-2); padding: .1rem .35rem; border-radius: 4px; }

.cdo-cell-sub { display: block; font-size: .76rem; color: var(--cdo-ink-3); margin-top: .12rem; }
.cdo-cell-sub--bad { color: var(--cdo-bad); font-weight: 600; }
.cdo-cell-notes { max-width: 22rem; }

/* ------------------------------------------------------------- Toolbars */

.cdo-toolbar { display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; justify-content: space-between; }
.cdo-toolbar__actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }

.cdo-filterform { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.cdo-filterform--tight { gap: .35rem; }

.cdo-filterform input[type="search"],
.cdo-filterform input[type="date"],
.cdo-filterform select {
	padding: .48rem .7rem;
	font: 400 .87rem var(--cdo-font);
	border: 1px solid var(--cdo-line);
	border-radius: var(--cdo-r-sm);
	background: #fff;
	color: var(--cdo-ink);
	min-width: 8rem;
}

.cdo-filterform input:focus, .cdo-filterform select:focus { outline: 0; border-color: var(--cdo-blue); box-shadow: 0 0 0 3px rgba(26, 95, 180, .14); }
.cdo-filterform .cdo-check { font-size: .85rem; white-space: nowrap; }

.cdo-datenav { display: flex; align-items: center; gap: .6rem; }
.cdo-datenav__label { font-size: 1rem; color: var(--cdo-navy); display: inline-flex; align-items: center; gap: .5rem; }

.cdo-disclosure summary { list-style: none; cursor: pointer; }
.cdo-disclosure summary::-webkit-details-marker { display: none; }
.cdo-disclosure__body { margin-top: .8rem; }
.cdo-disclosure[open] > summary { margin-bottom: .3rem; }
/* A confirm that opens inside a table row, without stretching the column. */
.cdo-disclosure--end { position: relative; }
.cdo-disclosure--end .cdo-disclosure__body { position: absolute; right: 0; z-index: 5; width: 20rem; padding: .9rem 1rem; background: var(--cdo-surface); border: 1px solid var(--cdo-line); border-radius: var(--cdo-r-md); box-shadow: 0 12px 30px rgba(18,58,107,.16); }
.cdo-disclosure--end .cdo-disclosure__body .cdo-hint { margin: 0 0 .7rem; }

.cdo-inlineform { display: inline-block; }

/* ------------------------------------------------------------------ Tabs */

.cdo-tabs { display: flex; flex-wrap: wrap; gap: .25rem; border-bottom: 1px solid var(--cdo-line); }

.cdo-tabs__tab {
	padding: .6rem .95rem;
	font-size: .89rem;
	font-weight: 600;
	color: var(--cdo-ink-3);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
}

.cdo-tabs__tab:hover { color: var(--cdo-blue); }
.cdo-tabs__tab.is-active { color: var(--cdo-navy); border-bottom-color: var(--cdo-blue); }

/* ------------------------------------------------------------ Row menus */

.cdo-rowmenu { position: relative; display: inline-block; }
.cdo-rowmenu summary { list-style: none; cursor: pointer; padding: .25rem .5rem; border-radius: var(--cdo-r-sm); font-size: .82rem; color: var(--cdo-ink-3); border: 1px solid transparent; }
.cdo-rowmenu summary::-webkit-details-marker { display: none; }
.cdo-rowmenu summary:hover { background: var(--cdo-line-2); color: var(--cdo-ink); }

.cdo-rowmenu__drop {
	position: absolute;
	right: 0;
	top: calc(100% + .25rem);
	min-width: 12rem;
	background: #fff;
	border: 1px solid var(--cdo-line);
	border-radius: var(--cdo-r);
	box-shadow: var(--cdo-shadow-lg);
	padding: .35rem;
	z-index: 30;
	text-align: left;
}

.cdo-rowmenu__drop--wide { min-width: 17rem; padding: .8rem; }
.cdo-rowmenu__btn { display: block; width: 100%; text-align: left; padding: .45rem .6rem; border: 0; background: none; font: 500 .84rem var(--cdo-font); color: var(--cdo-ink-2); border-radius: var(--cdo-r-sm); cursor: pointer; text-decoration: none; }
.cdo-rowmenu__btn:hover { background: var(--cdo-blue-50); color: var(--cdo-blue); }

/* Deleting is not the same kind of act as the rest of the menu, so it does not
   look the same as the rest of the menu. */
.cdo-rowmenu__btn--danger { color: var(--cdo-bad); }
.cdo-rowmenu__btn--danger:hover { background: var(--cdo-bad-bg); color: var(--cdo-bad); }

/* -------------------------------------------------------------- Widgets */

.cdo-actionlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cdo-actionlist a { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .9rem; border-radius: var(--cdo-r-sm); background: var(--cdo-bg); text-decoration: none; color: var(--cdo-ink-2); font-size: .89rem; font-weight: 500; border-left: 3px solid var(--cdo-line); }
.cdo-actionlist a:hover { background: var(--cdo-blue-50); color: var(--cdo-navy); }
.cdo-actionlist__go { color: var(--cdo-blue); font-weight: 700; }
.cdo-actionlist__item--warning a { border-left-color: var(--cdo-warn); }
.cdo-actionlist__item--critical a { border-left-color: var(--cdo-bad); }
.cdo-actionlist__item--info a { border-left-color: var(--cdo-blue); }

.cdo-steplist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .1rem; }
.cdo-steplist li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cdo-line-2); font-size: .88rem; color: var(--cdo-ink-3); }
.cdo-steplist li:last-child { border-bottom: 0; }
.cdo-steplist strong { font-size: 1.02rem; color: var(--cdo-ink); font-variant-numeric: tabular-nums; }

.cdo-barlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .65rem; }
.cdo-barlist li { display: grid; grid-template-columns: minmax(6rem, 10rem) 1fr auto; gap: .7rem; align-items: center; font-size: .85rem; }
.cdo-barlist__label { color: var(--cdo-ink-2); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cdo-barlist__track { height: 8px; border-radius: 999px; background: var(--cdo-line-2); overflow: hidden; }
.cdo-barlist__fill { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cdo-blue), var(--cdo-teal)); }
.cdo-barlist__fill.is-low { background: linear-gradient(90deg, var(--cdo-warn), #d98c00); }
.cdo-barlist__value { text-align: right; font-weight: 700; color: var(--cdo-ink); font-variant-numeric: tabular-nums; }
.cdo-barlist__value small { display: block; font-weight: 400; font-size: .74rem; color: var(--cdo-ink-3); }

.cdo-meter { display: block; width: 100%; max-width: 6rem; height: 6px; border-radius: 999px; background: var(--cdo-line-2); overflow: hidden; }
.cdo-meter--sm { max-width: 4rem; height: 5px; margin-top: .25rem; }
.cdo-meter__fill { display: block; height: 100%; background: var(--cdo-blue); border-radius: 999px; }

.cdo-scorering {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: conic-gradient(var(--cdo-blue) calc(var(--pct) * 1%), var(--cdo-line-2) 0);
	font-size: .78rem;
	font-weight: 800;
	color: var(--cdo-navy);
}

.cdo-scorering span { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #fff; }

.cdo-pipeline { display: grid; gap: .5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 120px), 1fr)); }
.cdo-pipeline__step { display: flex; flex-direction: column; gap: .1rem; padding: .85rem .9rem; background: var(--cdo-surface); border: 1px solid var(--cdo-line); border-radius: var(--cdo-r); text-decoration: none; transition: border-color .15s ease; }
.cdo-pipeline__step:hover, .cdo-pipeline__step.is-active { border-color: var(--cdo-blue); background: var(--cdo-blue-50); }
.cdo-pipeline__step strong { font-size: 1.35rem; font-weight: 800; color: var(--cdo-navy); line-height: 1; }
.cdo-pipeline__step span { font-size: .76rem; color: var(--cdo-ink-3); line-height: 1.3; }

.cdo-timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: .1rem; }
.cdo-timeline li { display: flex; align-items: center; gap: .8rem; padding: .55rem 0; border-bottom: 1px solid var(--cdo-line-2); }
.cdo-timeline li:last-child { border-bottom: 0; }
.cdo-timeline__date { flex: none; width: 3.4rem; font-size: .8rem; font-weight: 700; color: var(--cdo-blue); }
.cdo-timeline__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cdo-timeline__body strong { font-size: .88rem; color: var(--cdo-ink); }
.cdo-timeline__body small { font-size: .78rem; color: var(--cdo-ink-3); }

.cdo-deflist { display: grid; gap: 0; margin: 0 0 1rem; }
.cdo-deflist > div { display: grid; grid-template-columns: minmax(8rem, 38%) 1fr; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cdo-line-2); }
.cdo-deflist > div:last-child { border-bottom: 0; }
.cdo-deflist dt { font-size: .82rem; font-weight: 600; color: var(--cdo-ink-3); margin: 0; }
.cdo-deflist dd { margin: 0; font-size: .89rem; color: var(--cdo-ink); }
.cdo-deflist dd code { font: 600 .84rem var(--cdo-mono); background: var(--cdo-line-2); padding: .1rem .35rem; border-radius: 4px; }
.cdo-deflist--stacked > div { grid-template-columns: 1fr; gap: .2rem; }
.cdo-deflist--stacked dd { font-size: .84rem; color: var(--cdo-ink-3); line-height: 1.55; }

.cdo-prose { font-size: .92rem; line-height: 1.7; color: var(--cdo-ink-2); margin: 0 0 1rem; white-space: pre-line; }
.cdo-notelog { font: 400 .82rem/1.6 var(--cdo-mono); background: var(--cdo-bg); padding: .9rem 1rem; border-radius: var(--cdo-r-sm); white-space: pre-wrap; word-break: break-word; color: var(--cdo-ink-2); max-height: 18rem; overflow-y: auto; margin: 0; }

.cdo-recordhead { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.cdo-recordhead__ref { margin: 0 0 .2rem; font: 700 .78rem var(--cdo-mono); color: var(--cdo-ink-3); letter-spacing: .04em; }
.cdo-recordhead__sub { margin: .3rem 0 0; font-size: .9rem; color: var(--cdo-ink-3); }
.cdo-recordhead__contact { margin: .3rem 0 0; font-size: .88rem; }
.cdo-recordhead__badges { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; }

.cdo-contactlist, .cdo-sitelist, .cdo-doclist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cdo-contactlist li, .cdo-sitelist li { padding: .75rem .9rem; background: var(--cdo-bg); border-radius: var(--cdo-r-sm); font-size: .88rem; }
.cdo-contactlist strong, .cdo-sitelist strong { display: inline-block; margin-right: .4rem; }
.cdo-contactlist small, .cdo-sitelist small { display: block; color: var(--cdo-ink-3); font-size: .8rem; margin: .1rem 0; }
.cdo-contactlist span, .cdo-sitelist span { display: block; font-size: .82rem; color: var(--cdo-ink-3); }
.cdo-doclist li { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--cdo-line-2); }
.cdo-doclist a { display: inline-flex; align-items: center; gap: .45rem; color: var(--cdo-blue); text-decoration: none; font-size: .88rem; }
.cdo-doclist a:hover { text-decoration: underline; }
.cdo-doclist small { color: var(--cdo-ink-3); font-size: .78rem; }

.cdo-pagination { display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center; margin-top: 1.1rem; }
.cdo-pagination__link { min-width: 2rem; padding: .35rem .6rem; text-align: center; border: 1px solid var(--cdo-line); border-radius: var(--cdo-r-sm); font-size: .84rem; color: var(--cdo-ink-2); text-decoration: none; }
.cdo-pagination__link:hover { border-color: var(--cdo-blue); color: var(--cdo-blue); }
.cdo-pagination__link.is-current { background: var(--cdo-blue); border-color: var(--cdo-blue); color: #fff; font-weight: 700; }
.cdo-pagination__gap { padding: .35rem .3rem; color: var(--cdo-ink-3); }

/* ------------------------------------------------------- Site board (ops) */

.cdo-siteboard__head { align-items: flex-start; }
.cdo-siteboard__client { display: block; font-size: .82rem; font-weight: 500; color: var(--cdo-ink-3); margin-top: .15rem; }
.cdo-siteboard__meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; margin: .6rem 0 0; font-size: .82rem; color: var(--cdo-ink-3); }
.cdo-siteboard__meta span { display: inline-flex; align-items: center; gap: .3rem; }
.cdo-siteboard__meta a { color: var(--cdo-blue); }
.cdo-siteboard__counts { display: flex; align-items: center; gap: .7rem; font-size: .85rem; color: var(--cdo-ink-3); }
.cdo-siteboard__counts strong { font-size: 1.2rem; color: var(--cdo-navy); }

/* ------------------------------------------------------------- Checklist */

.cdo-checklist { display: grid; gap: .5rem; }

.cdo-checkitem { border: 1px solid var(--cdo-line); border-radius: var(--cdo-r); background: var(--cdo-surface); overflow: hidden; }
.cdo-checkitem summary { display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem; cursor: pointer; list-style: none; }
.cdo-checkitem summary::-webkit-details-marker { display: none; }
.cdo-checkitem summary:hover { background: var(--cdo-bg); }
.cdo-checkitem__state { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--cdo-line-2); color: var(--cdo-ink-3); flex: none; }
.cdo-checkitem--verified .cdo-checkitem__state { background: var(--cdo-good-bg); color: var(--cdo-good); }
.cdo-checkitem--expired .cdo-checkitem__state, .cdo-checkitem--rejected .cdo-checkitem__state { background: var(--cdo-bad-bg); color: var(--cdo-bad); }
.cdo-checkitem--pending .cdo-checkitem__state { background: var(--cdo-warn-bg); color: var(--cdo-warn); }
.cdo-checkitem__label { flex: 1; min-width: 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .92rem; }
.cdo-checkitem__meta { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cdo-checkitem__meta small { font-size: .76rem; color: var(--cdo-ink-3); }
.cdo-checkitem__body { padding: 0 1rem 1.1rem; border-top: 1px solid var(--cdo-line-2); padding-top: 1rem; }

.cdo-checkstatus { list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem; }
.cdo-checkstatus__item { display: flex; align-items: center; gap: .7rem; padding: .6rem .8rem; background: var(--cdo-bg); border-radius: var(--cdo-r-sm); }
.cdo-checkstatus__icon { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cdo-line-2); color: var(--cdo-ink-3); flex: none; }
.cdo-checkstatus__item--verified .cdo-checkstatus__icon { background: var(--cdo-good-bg); color: var(--cdo-good); }
.cdo-checkstatus__item--expired .cdo-checkstatus__icon { background: var(--cdo-bad-bg); color: var(--cdo-bad); }
.cdo-checkstatus__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cdo-checkstatus__body strong { font-size: .88rem; }
.cdo-checkstatus__body small { font-size: .76rem; color: var(--cdo-ink-3); }

/* ------------------------------------------------------- Clock in / out */

.cdo-clockcard {
	background: linear-gradient(135deg, var(--cdo-navy) 0%, #17497f 100%);
	border-radius: var(--cdo-r-lg);
	color: #fff;
	overflow: hidden;
}

.cdo-clockcard__inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 0; }
.cdo-clockcard__info { padding: clamp(1.4rem, 4vw, 2.2rem); }
.cdo-clockcard__eyebrow { margin: 0 0 .35rem; font: 700 .74rem/1 var(--cdo-font); letter-spacing: .12em; text-transform: uppercase; color: #8fb0d6; }
.cdo-clockcard__info h2 { margin: 0 0 .4rem; font-size: clamp(1.4rem, 3.5vw, 1.95rem); line-height: 1.2; letter-spacing: -.02em; color: #fff; }
.cdo-clockcard__lead { margin: 0 0 1.1rem; color: #c5d9ef; font-size: .98rem; line-height: 1.55; }

.cdo-clockcard__facts { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 0 0 1.1rem; padding: 0; }
.cdo-clockcard__facts li { display: inline-flex; align-items: center; gap: .4rem; font-size: .88rem; color: #dbe7f5; background: rgba(255, 255, 255, .1); padding: .35rem .7rem; border-radius: 999px; }
.cdo-clockcard__ppe { background: rgba(255, 205, 120, .18) !important; color: #ffd89a !important; }

.cdo-clockcard__details { margin-top: 1rem; }
.cdo-clockcard__details h3 { margin: 0 0 .3rem; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8fb0d6; }
.cdo-clockcard__details p { margin: 0; font-size: .92rem; line-height: 1.6; color: #dbe7f5; }

.cdo-clockcard__action { background: rgba(0, 0, 0, .16); padding: clamp(1.4rem, 4vw, 2.2rem); display: flex; flex-direction: column; gap: .9rem; justify-content: center; }
.cdo-clockcard__status { display: flex; align-items: center; gap: .5rem; font-size: .92rem; font-weight: 600; color: #fff; }
.cdo-clockcard__done { display: flex; align-items: center; gap: .6rem; margin: 0; font-size: .92rem; color: #a9e5c4; }
.cdo-clockcard__note { margin: 0; font-size: .78rem; line-height: 1.55; color: #94b4d9; }

.cdo-geostatus { display: flex; align-items: center; gap: .5rem; padding: .6rem .8rem; border-radius: var(--cdo-r-sm); background: rgba(255, 255, 255, .1); font-size: .82rem; color: #dbe7f5; line-height: 1.45; }
.cdo-geostatus.is-ready { background: rgba(16, 185, 129, .18); color: #a9e5c4; }
.cdo-geostatus.is-error { background: rgba(239, 68, 68, .18); color: #ffc4bf; }
.cdo-geostatus.is-working { background: rgba(255, 255, 255, .16); }

.cdo-clockbtn {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .15rem;
	width: 100%;
	padding: 1.15rem 1.5rem;
	border: 0;
	border-radius: var(--cdo-r);
	font-family: var(--cdo-font);
	cursor: pointer;
	transition: transform .12s ease, box-shadow .18s ease, opacity .18s ease;
	background: #12a05f;
	color: #fff;
}

.cdo-clockbtn:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .55); }
.cdo-clockbtn:focus-visible { outline: 3px solid rgba(255, 255, 255, .6); outline-offset: 3px; }
.cdo-clockbtn[disabled] { opacity: .6; cursor: wait; transform: none; }
.cdo-clockbtn--out { background: #d1493c; }
.cdo-clockbtn__label { font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; }
.cdo-clockbtn__sub { font-size: .76rem; opacity: .85; }

.cdo-clockresult { padding: .8rem 1rem; border-radius: var(--cdo-r-sm); font-size: .88rem; line-height: 1.55; }
.cdo-clockresult.is-success { background: rgba(16, 185, 129, .2); color: #c6f0d9; }
.cdo-clockresult.is-error { background: rgba(239, 68, 68, .2); color: #ffd0cb; }

.cdo-shiftlist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.cdo-shiftlist__item { display: flex; align-items: center; gap: .9rem; padding: .8rem .9rem; background: var(--cdo-bg); border-radius: var(--cdo-r-sm); }
.cdo-shiftlist__date { flex: none; display: flex; flex-direction: column; align-items: center; width: 3rem; }
.cdo-shiftlist__date strong { font-size: .95rem; color: var(--cdo-navy); line-height: 1.1; }
.cdo-shiftlist__date small { font-size: .72rem; color: var(--cdo-ink-3); text-transform: uppercase; }
.cdo-shiftlist__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.cdo-shiftlist__body strong { font-size: .92rem; color: var(--cdo-ink); }
.cdo-shiftlist__body span { font-size: .82rem; color: var(--cdo-ink-3); }
.cdo-shiftlist__transport { display: inline-flex !important; align-items: center; gap: .35rem; color: var(--cdo-blue) !important; }

/* ------------------------------------------------------------------ Map */

.cdo-map { height: clamp(320px, 55vh, 620px); width: 100%; background: var(--cdo-line-2); }
.cdo-map__noscript { padding: 2rem; text-align: center; color: var(--cdo-ink-3); }
.cdo-maplegend { display: flex; flex-wrap: wrap; gap: 1rem; padding: .8rem 1.2rem; border-top: 1px solid var(--cdo-line); font-size: .8rem; color: var(--cdo-ink-3); }
.cdo-maplegend span { display: inline-flex; align-items: center; gap: .35rem; }
.cdo-swatch { display: inline-block; width: 14px; height: 10px; border-radius: 3px; }
.cdo-swatch--fence { background: rgba(26, 95, 180, .18); border: 1px solid var(--cdo-blue); }
.cdo-updated { font-size: .78rem; color: var(--cdo-ink-3); font-variant-numeric: tabular-nums; }

.cdo-livestate { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 600; }
.cdo-livestate--moving { color: var(--cdo-good); }
.cdo-livestate--idling { color: var(--cdo-warn); }
.cdo-livestate--parked { color: var(--cdo-ink-3); }
.cdo-livestate--offline, .cdo-livestate--no_signal { color: var(--cdo-bad); }

/* Leaflet popups, restyled to match */
.cdo-map .leaflet-popup-content-wrapper { border-radius: var(--cdo-r); box-shadow: var(--cdo-shadow-lg); }
.cdo-map .leaflet-popup-content { margin: .8rem 1rem; font: 400 .85rem/1.55 var(--cdo-font); color: var(--cdo-ink-2); }
.cdo-map .leaflet-popup-content strong { display: block; font-size: .95rem; color: var(--cdo-navy); margin-bottom: .2rem; }
.cdo-map .leaflet-popup-content a { color: var(--cdo-blue); font-weight: 600; }

/* ----------------------------------------------------------- Trip list */

.cdo-triplist { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }

.cdo-trip {
	display: grid;
	grid-template-columns: auto 1fr auto;
	gap: .9rem;
	align-items: start;
	padding: .85rem 1rem;
	background: var(--cdo-bg);
	border-radius: var(--cdo-r);
	border-left: 3px solid var(--cdo-line);
}

.cdo-trip.is-flagged { border-left-color: var(--cdo-bad); background: #fef7f6; }
.cdo-trip.is-selected { outline: 2px solid var(--cdo-blue); }
.cdo-trip__time { display: flex; flex-direction: column; align-items: center; min-width: 3rem; }
.cdo-trip__time strong { font-size: .95rem; color: var(--cdo-navy); }
.cdo-trip__time span { font-size: .78rem; color: var(--cdo-ink-3); }
.cdo-trip__route { margin: 0 0 .3rem; font-size: .88rem; line-height: 1.5; color: var(--cdo-ink-2); }
.cdo-trip__route span { margin: 0 .3rem; color: var(--cdo-ink-3); }
.cdo-trip__meta { display: flex; flex-wrap: wrap; gap: .3rem .8rem; margin: 0; font-size: .79rem; color: var(--cdo-ink-3); align-items: center; }
.cdo-trip__flag { display: flex; align-items: center; gap: .4rem; margin: .4rem 0 0; font-size: .8rem; color: var(--cdo-bad); font-weight: 600; }
.cdo-trip__actions { display: flex; flex-direction: column; gap: .35rem; align-items: flex-end; }

/* --------------------------------------------------------------- Charts */

.cdo-chart { display: flex; align-items: flex-end; gap: .35rem; height: 190px; padding: .5rem 0; }
.cdo-chart__col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: .3rem; min-width: 0; height: 100%; }
.cdo-chart__stack { position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.cdo-chart__bar { width: 100%; border-radius: 4px 4px 0 0; background: var(--cdo-blue); transition: opacity .15s ease; }
.cdo-chart__bar--margin { background: var(--cdo-teal); border-radius: 4px 4px 0 0; margin-top: 2px; }
.cdo-chart__col:hover .cdo-chart__bar { opacity: .8; }
.cdo-chart__label { font-size: .68rem; color: var(--cdo-ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }

/* ------------------------------------------------------------ Responsive */

@media (max-width: 1024px) {
	.cdo-portal { grid-template-columns: 1fr; border-radius: 0; }

	.cdo-portal__navtoggle {
		display: inline-flex;
		align-items: center;
		gap: .55rem;
		margin: .9rem 1rem;
		padding: .6rem 1rem;
		background: var(--cdo-navy);
		color: #fff;
		border: 0;
		border-radius: var(--cdo-r-sm);
		font: 600 .9rem var(--cdo-font);
		cursor: pointer;
	}

	.cdo-portal__navtoggle-bars { display: block; width: 16px; height: 2px; background: currentColor; box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }

	.cdo-portal__side { display: none; }
	.cdo-portal__side.is-open { display: flex; }
	.cdo-clockcard__inner { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
	.cdo-portal__head { padding: 1rem; }
	.cdo-panel { padding: 1.1rem 1rem; border-radius: var(--cdo-r); }
	.cdo-table th, .cdo-table td { padding: .55rem .5rem; font-size: .82rem; }
	.cdo-deflist > div { grid-template-columns: 1fr; gap: .15rem; }
	.cdo-trip { grid-template-columns: 1fr; }
	.cdo-trip__actions { flex-direction: row; align-items: center; }
	.cdo-barlist li { grid-template-columns: 1fr; gap: .25rem; }
	.cdo-barlist__value { text-align: left; }
}

@media print {
	.cdo-portal__side, .cdo-portal__headtools, .cdo-toolbar, .cdo-table__actions, .cdo-portal__navtoggle { display: none !important; }
	.cdo-portal { grid-template-columns: 1fr; border: 0; }
	.cdo-panel { break-inside: avoid; box-shadow: none; }
}

/* A logo dropped into assets/img replaces the lettermark in the sidebar. */
.cdo-portal__brandlogo { display: block; max-width: 100%; max-height: 46px; width: auto; }

/* -----------------------------------------------------------------------
 * Clickable tallies and the dialogs behind them
 * -------------------------------------------------------------------- */

.cdo-tally { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: .7rem; margin: .2rem 0 1rem; }
.cdo-tally__item {
	display: grid; gap: .15rem; padding: .85rem .9rem; cursor: pointer; text-align: left;
	background: #fff; border: 1px solid var(--cdo-line, #e3e9f2); border-radius: 12px;
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.cdo-tally__item:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -18px rgba(19, 26, 38, .7); }
.cdo-tally__item strong { font-size: 1.6rem; line-height: 1.1; font-variant-numeric: tabular-nums; }
.cdo-tally__item span { font-size: .82rem; color: #5b6884; }
.cdo-tally__item--good strong { color: #146c43; }
.cdo-tally__item--good:hover { border-color: #146c43; }
.cdo-tally__item--bad strong { color: #b42318; }
.cdo-tally__item--bad:hover { border-color: #b42318; }
.cdo-tally__item--warn strong { color: #b76e00; }
.cdo-tally__item--warn:hover { border-color: #b76e00; }

.cdo-dialog { position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 1.2rem; }
.cdo-dialog[hidden] { display: none; }
.cdo-dialog::before { content: ""; position: absolute; inset: 0; background: rgba(13, 42, 78, .5); }
.cdo-dialog__panel {
	position: relative; width: min(920px, 100%); max-height: min(80vh, 760px);
	display: flex; flex-direction: column; background: #fff; border-radius: 16px;
	box-shadow: 0 30px 70px -30px rgba(13, 42, 78, .6); overflow: hidden;
}
.cdo-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.1rem 1.3rem; border-bottom: 1px solid #e3e9f2; }
.cdo-dialog__head h2 { margin: 0; font-size: 1.15rem; color: #123a6b; }
.cdo-dialog__head p { margin: .25rem 0 0; font-size: .88rem; color: #5b6884; }
.cdo-dialog__close { background: none; border: 0; padding: .3rem; cursor: pointer; color: #5b6884; display: grid; place-items: center; }
.cdo-dialog__close:hover { color: #123a6b; }
.cdo-dialog__close, .cdo-dialog__close:hover { text-decoration: none; }
.cdo-dialog__body { flex: 1 1 auto; min-height: 0; overflow: auto; padding: 0 1.3rem 1rem; -webkit-overflow-scrolling: touch; }
.cdo-dialog__body .cdo-table { margin-top: .9rem; }
.cdo-dialog__empty { padding: 2rem 0; text-align: center; color: #5b6884; }
.cdo-dialog__foot { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: .6rem; padding: .9rem 1.3rem; border-top: 1px solid #e3e9f2; background: #f7f9fd; }
body.cdo-dialog-open { overflow: hidden; }

/* The booking review. An order can run to a hundred and fifty names, so the
   window is wider than a tally list, the day heading stays put while the list
   under it scrolls, and the footer holding Book all never leaves the screen. */
.cdo-dialog__panel--wide { width: min(1180px, 100%); max-height: min(88vh, 900px); }
.cdo-dialog__body .cdo-daycard { background: #fff; }
.cdo-dialog__body .cdo-daycard__head {
	position: sticky; top: 0; z-index: 2; margin: -1rem -1.1rem .8rem; padding: .7rem 1.1rem;
	background: #fff; border-bottom: 1px solid var(--cdo-line, #e3e9f2); border-radius: 12px 12px 0 0;
}
.cdo-dialog__foot--stack { display: block; text-align: left; }

/* A filter bar that is fetching. Deliberately quiet: a spinner on every
   keystroke is worse than the wait it is reporting. */
.cdo-filterform.is-working { position: relative; }
.cdo-filterform.is-working::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
	border-radius: 2px; background: var(--cdo-navy, #123a6b); opacity: .25;
	animation: cdo-working 1s ease-in-out infinite;
}
@keyframes cdo-working {
	0%, 100% { transform: scaleX(.2); transform-origin: left; opacity: .18; }
	50% { transform: scaleX(1); transform-origin: left; opacity: .38; }
}
@media (prefers-reduced-motion: reduce) {
	.cdo-filterform.is-working::after { animation: none; opacity: .3; }
}

/* Invicta, in the corner of every portal screen.
   A link that JavaScript turns into a window. It sits above the page but below
   the window it opens, and gets out of the way while that window is open. */
.cdo-bubble {
	position: fixed; right: 1.15rem; bottom: 1.15rem; z-index: 250;
	display: inline-flex; align-items: center; gap: .55rem;
	padding: .7rem .95rem .7rem .75rem; border-radius: 999px;
	background: var(--cdo-navy, #123a6b); color: #fff; text-decoration: none;
	font-size: .92rem; font-weight: 600; line-height: 1;
	box-shadow: 0 14px 32px -14px rgba(13, 42, 78, .75);
	transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.cdo-bubble:hover, .cdo-bubble:focus-visible {
	color: #fff; text-decoration: none; transform: translateY(-2px);
	box-shadow: 0 18px 38px -14px rgba(13, 42, 78, .85);
}
.cdo-bubble__mark { display: grid; place-items: center; width: 26px; height: 26px; }
.cdo-bubble__mark svg { width: 24px; height: 24px; }
.cdo-bubble__name { letter-spacing: .01em; }
body.cdo-dialog-open .cdo-bubble { opacity: 0; pointer-events: none; }

/* Nothing at the bottom of a page should end up underneath it. */
.cdo-portal__foot { padding-bottom: 4.5rem; }

@media (max-width: 640px) {
	.cdo-bubble { right: .8rem; bottom: .8rem; padding: .7rem; }
	.cdo-bubble__name { display: none; }
}

/* The help chat. A transcript rather than a page, so an answer arrives under
   the question that asked for it and the earlier ones stay readable above. */
.cdo-dialog__panel--chat { width: min(760px, 100%); max-height: min(86vh, 820px); }
.cdo-dialog__foot--chat { display: block; text-align: left; }
.cdo-chat { display: flex; flex-direction: column; gap: .8rem; padding-top: .9rem; }
.cdo-chat__msg { max-width: 92%; padding: .8rem 1rem; border-radius: 14px; font-size: .92rem; line-height: 1.65; }
.cdo-chat__msg--them { align-self: flex-start; background: var(--cdo-bg, #f4f7fb); border: 1px solid var(--cdo-line, #e3e9f2); }
.cdo-chat__msg--us { align-self: flex-end; background: var(--cdo-navy, #123a6b); color: #fff; }
.cdo-chat__msg p { margin: 0 0 .55rem; }
.cdo-chat__msg p:last-child { margin-bottom: 0; }
.cdo-chat__msg h4 { margin: 0 0 .5rem; font-size: 1rem; color: var(--cdo-navy, #123a6b); }
.cdo-chat__msg ul { margin: .3rem 0 .6rem; padding-left: 1.15rem; }
.cdo-chat__msg li { margin: .2rem 0; }
.cdo-chat__msg strong { color: inherit; }
.cdo-chat__waiting { color: #5b6884; font-style: italic; }
.cdo-chat__more { margin: .7rem 0 .3rem !important; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; color: #5b6884; }
.cdo-chat__go { margin-top: .7rem !important; }
.cdo-chat__starters { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .35rem; }
.cdo-chat__starter {
	width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: .88rem;
	padding: .5rem .7rem; border-radius: 10px; color: var(--cdo-navy, #123a6b);
	background: #fff; border: 1px solid var(--cdo-line, #e3e9f2);
}
.cdo-chat__starter:hover { border-color: var(--cdo-navy, #123a6b); }
.cdo-chat__form { display: flex; gap: .5rem; margin: 0; }
.cdo-chat__form input[type="text"] { flex: 1 1 auto; }
.cdo-chat__note { margin: .55rem 0 0; font-size: .82rem; color: #5b6884; }
.cdo-chat__note a { margin-left: .35rem; }

/* Article prose on the Help screen. */
.cdo-prose { font-size: .95rem; line-height: 1.75; color: var(--cdo-ink-2, #3d4a63); max-width: 46rem; }
.cdo-prose p { margin: 0 0 .9rem; }
.cdo-prose ul { margin: 0 0 1rem; padding-left: 1.25rem; }
.cdo-prose li { margin: .3rem 0; }
.cdo-prose strong { color: var(--cdo-navy, #123a6b); }
.cdo-prose code, .cdo-chat__msg code { font-size: .88em; padding: .1rem .3rem; border-radius: 5px; background: rgba(18, 58, 107, .08); }
.cdo-chat__msg--us code { background: rgba(255, 255, 255, .18); }
.cdo-prose--phrased { padding: .9rem 1.1rem; border-left: 3px solid var(--cdo-navy, #123a6b); background: var(--cdo-bg, #f4f7fb); border-radius: 0 10px 10px 0; }

.cdo-field--grow { flex: 1 1 22rem; }

@media (max-width: 640px) {
	.cdo-chat__msg { max-width: 100%; }
}
.cdo-dialog__foot--stack .cdo-form { margin: 0; }
.cdo-dialog__foot--stack .cdo-field { margin: 0 0 .4rem; }
.cdo-dialog__foot--stack .cdo-field__hint { display: block; margin: .5rem 0 0; }

@media (max-width: 640px) {
	.cdo-dialog { padding: .6rem; }
	.cdo-dialog__panel { max-height: 88vh; }
	.cdo-dialog__body { padding: 0 .9rem 1rem; }
	.cdo-dialog__body .cdo-table { font-size: .82rem; }
}

/* The lookup button that sits beside the registration field. */
.cdo-lookup { display: flex; gap: .5rem; align-items: flex-start; }
.cdo-lookup input { flex: 1 1 auto; }
.cdo-lookup__result { margin: .5rem 0 0; font-size: .86rem; }
.cdo-lookup__result.is-good { color: #146c43; }
.cdo-lookup__result.is-bad { color: #b42318; }
.cdo-lookup__result.is-busy { color: #5b6884; }

/* Section subheads and inline row actions used by the settings and users screens. */
.cdo-subhead { margin: 1.6rem 0 .6rem; font-size: .95rem; color: var(--cdo-navy); }
.cdo-panel__subtitle { margin: 1.4rem 0 .6rem; font-size: .95rem; color: var(--cdo-navy); }
.cdo-subhead .cdo-badge { margin-left: .5rem; vertical-align: middle; }
.cdo-statusrow { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; }

/* Pick-up points on the booking screen.
   This panel always sits inside the narrow half of a split layout, so it is
   laid out in one column rather than trying to be clever about width. */
.cdo-pickups { margin: 1.4rem 0 0; padding: 1rem; background: var(--cdo-bg); border: 1px solid var(--cdo-line); border-radius: var(--cdo-r); }
.cdo-pickups__layout { display: grid; gap: 1rem; }
.cdo-pickups__list { display: grid; gap: .55rem; max-height: 22rem; overflow-y: auto; }
.cdo-pickup { padding: .65rem .75rem; background: var(--cdo-surface); border: 1px solid var(--cdo-line); border-radius: var(--cdo-r-sm); }
.cdo-pickup__head { display: flex; align-items: center; gap: .5rem; margin-bottom: .45rem; font-size: .9rem; }
.cdo-pickup__head .cdo-badge { margin-left: auto; }
.cdo-pickup__pin { display: grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--cdo-blue); color: #fff; font-size: .72rem; font-weight: 700; }
.cdo-pickup__fields { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "point point" "time locate"; gap: .45rem; align-items: center; }
.cdo-pickup__fields [data-cdo-pickup-point] { grid-area: point; }
.cdo-pickup__fields [data-cdo-pickup-slot] { grid-area: time; }
.cdo-pickup__fields [data-cdo-pickup-locate] { grid-area: locate; white-space: nowrap; }
.cdo-pickup__fields input { width: 100%; min-width: 0; }
.cdo-pickups__map [data-cdo-pickup-map] { height: 17rem; border-radius: var(--cdo-r-sm); border: 1px solid var(--cdo-line); background: var(--cdo-line-2); }
.cdo-field__hint--bad { color: var(--cdo-bad); font-weight: 600; }
.cdo-field__hint--warn { color: var(--cdo-warn); font-weight: 600; }
.cdo-form--inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.cdo-form--inline .cdo-field { margin-bottom: 0; }
.cdo-inline-form { display: inline; }
.cdo-panel__sub { margin: -.2rem 0 1rem; font-size: .9rem; color: var(--cdo-ink-3, #5b6884); }

/* Sortable column headings on the booking table. */
.cdo-sortlink { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; }
.cdo-sortlink:hover { color: var(--cdo-blue); }
.cdo-sortlink.is-active { color: var(--cdo-navy); font-weight: 700; }
input.is-autofilled, select.is-autofilled { background: #eef7f1; }

/* The run a driver currently has open. */
.cdo-shiftlist__item.is-active { border-color: var(--cdo-blue); background: #eef4fd; }

/* Transport runs: a boarding list is a table of small inputs, and the default
   full-width field would push the row off the screen. */
.cdo-input--tiny { width: 4.5rem; }
.cdo-table--compact input[type="text"],
.cdo-table--compact input[type="time"],
.cdo-table--compact input[type="number"] { padding: .35rem .5rem; font-size: .85rem; }
.cdo-table--compact input[type="text"] { min-width: 9rem; }
.cdo-table__actions .cdo-form--inline { display: inline-block; margin-left: .35rem; }
.cdo-btn--danger { --btn-fg: var(--cdo-bad); }
.cdo-btn--danger:hover { background: var(--cdo-bad-bg); border-color: var(--cdo-bad); color: var(--cdo-bad); }

/* A signed onboarding document, as the office reads it back. */
.cdo-signed { display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	background: var(--cdo-good-bg); border: 1px solid var(--cdo-good); border-radius: 10px;
	padding: .85rem 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.cdo-signed strong { display: block; color: var(--cdo-good); }
.cdo-signed__mark { max-height: 60px; max-width: 220px; background: #fff; border-radius: 6px; padding: .25rem; }
.cdo-doc__h { margin: 1.1rem 0 .35rem; font-size: .98rem; color: var(--cdo-navy); }
.cdo-doc__note { background: var(--cdo-warn-bg); border-left: 3px solid var(--cdo-warn);
	padding: .6rem .85rem; border-radius: 0 8px 8px 0; margin: .6rem 0; line-height: 1.55; }
.cdo-doc__list { margin: .4rem 0 .8rem 1.1rem; line-height: 1.6; }
.cdo-doc__list li { margin-bottom: .28rem; }
.cdo-deflist--answer { margin: .35rem 0 .8rem; }
.cdo-deflist--answer dt { font-weight: 600; }

/* Deleting a run is the one action here with no undo, so it is not dressed to
   look like the buttons next to it. */
.cdo-panel--danger { border-color: var(--cdo-bad); }
.cdo-panel--danger .cdo-panel__title { color: var(--cdo-bad); }
.cdo-btn--danger.cdo-btn--solid { --btn-bg: var(--cdo-bad); --btn-bd: var(--cdo-bad); --btn-fg: #fff; }
.cdo-btn--danger.cdo-btn--solid:hover { background: #8d1c14; border-color: #8d1c14; color: #fff; }

/* Employment records: a period of employment reads as a block, not a row. */
.cdo-engagement { border-left: 3px solid var(--cdo-line); padding: .1rem 0 .1rem .9rem; margin-bottom: 1.1rem; }
.cdo-engagement__head { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-bottom: .35rem; }
.cdo-deflist--tight > div { padding: .3rem 0; }

/* The order: a week of work, three ways of looking at it.

   The day sheet is a list you work down with your thumb on a laptop, so its
   rows are tall and its buttons are big. The grid is the opposite — as much of
   the week as will fit, in as little space as possible — so its cells are
   small, fixed width and colour-coded, and it scrolls sideways rather than
   wrapping into something unreadable. */
.cdo-daynav { display: flex; flex-wrap: wrap; align-items: stretch; gap: .4rem; margin: .9rem 0; }
.cdo-daynav__step {
	flex: 0 0 auto; display: grid; place-items: center; min-width: 2.4rem; padding: 0 .5rem;
	border: 1px solid var(--cdo-line); border-radius: 10px; background: #fff;
	text-decoration: none; color: var(--cdo-ink-3); font-size: 1rem;
}
.cdo-daynav__step:hover { border-color: var(--cdo-blue); color: var(--cdo-blue); }
.cdo-daynav__day {
	flex: 1 1 6.5rem; min-width: 6.5rem; text-align: center; padding: .5rem .4rem;
	border: 1px solid var(--cdo-line); border-radius: 10px; background: #fff;
	text-decoration: none; color: var(--cdo-navy); line-height: 1.35;
}
.cdo-daynav__day strong { display: block; font-size: .86rem; }
.cdo-daynav__day span { font-size: .82rem; color: var(--cdo-ink-3); }
.cdo-daynav__day:hover { border-color: var(--cdo-blue); }
.cdo-daynav__day.is-active { border-color: var(--cdo-blue); box-shadow: inset 0 -3px 0 var(--cdo-blue); }
.cdo-daynav__day.is-filled span { color: #0a5c32; }
.cdo-daynav__day.is-part span { color: #7A4E00; }
.cdo-daynav__day.is-none span { color: #b02a2a; }
.cdo-daynav__day.is-empty { opacity: .55; }

.cdo-segmented { display: inline-flex; border: 1px solid var(--cdo-line); border-radius: 999px; overflow: hidden; background: #fff; }
.cdo-segmented__item { padding: .35rem .9rem; font-size: .86rem; text-decoration: none; color: var(--cdo-ink-3); }
.cdo-segmented__item + .cdo-segmented__item { border-left: 1px solid var(--cdo-line); }
.cdo-segmented__item.is-active { background: var(--cdo-blue); color: #fff; }
.cdo-toolbar--tight { margin: .2rem 0 .8rem; }

.cdo-daysheet { list-style: none; margin: 0; padding: 0; }
.cdo-daysheet__row {
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: .8rem 0; border-bottom: 1px solid var(--cdo-line);
}
.cdo-daysheet__row.is-done { opacity: .7; }
.cdo-daysheet__what { flex: 1 1 18rem; min-width: 0; }
.cdo-daysheet__what strong { display: block; color: var(--cdo-navy); }
.cdo-daysheet__what span { font-size: .92rem; }
.cdo-daysheet__what small { display: block; color: var(--cdo-ink-3); font-size: .82rem; }
.cdo-daysheet__count { flex: 0 0 9rem; text-align: right; }
.cdo-daysheet__count strong { display: block; font-size: 1.05rem; color: var(--cdo-navy); }
.cdo-daysheet__go { flex: 0 0 auto; }

.cdo-ordergrid__day { text-align: center; white-space: nowrap; }
.cdo-ordergrid__cell { text-align: center; }
.cdo-ordergrid__num {
	display: inline-block; min-width: 3.4rem; padding: .2rem .35rem; border-radius: 6px;
	font-variant-numeric: tabular-nums; text-decoration: none; font-size: .86rem;
}
.cdo-ordergrid__num--good { background: var(--cdo-good-bg); color: #0a5c32; }
.cdo-ordergrid__num--warn { background: var(--cdo-warn-bg); color: #7A4E00; }
.cdo-ordergrid__num--bad { background: var(--cdo-bad-bg); color: #8d1c14; }
.cdo-numbox { width: 4rem; text-align: center; padding: .3rem; }

/* The calendar: a month of demand against cover.

   Every cell is a link, because the point of looking at a month is to find the
   day you have to do something about and go straight to it. The numbers are
   booked against ordered, coloured the same way as the order grid so the two
   screens read the same. */
.cdo-calendar { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.cdo-calendar th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--cdo-ink-3); padding: .2rem 0; text-align: left; }
.cdo-calendar__cell { vertical-align: top; padding: 0; }
.cdo-calendar__cell > a {
	display: block; min-height: 5.2rem; padding: .45rem .5rem; text-decoration: none;
	border: 1px solid var(--cdo-line); border-radius: 10px; background: #fff; color: var(--cdo-navy);
}
.cdo-calendar__cell > a:hover { border-color: var(--cdo-blue); }
.cdo-calendar__cell.is-weekend > a { background: var(--cdo-bg); }
.cdo-calendar__cell.is-outside > a { opacity: .45; }
.cdo-calendar__cell.is-past > a { opacity: .65; }
.cdo-calendar__cell.is-today > a { border-color: var(--cdo-blue); }
.cdo-calendar__cell.is-chosen > a { box-shadow: inset 0 0 0 2px var(--cdo-blue); }
.cdo-calendar__date { display: block; font-weight: 700; font-size: .95rem; }
.cdo-calendar__count {
	display: inline-block; margin-top: .3rem; padding: .1rem .4rem; border-radius: 6px;
	font-size: .8rem; font-variant-numeric: tabular-nums;
}
.cdo-calendar__count--good { background: var(--cdo-good-bg); color: #0a5c32; }
.cdo-calendar__count--warn { background: var(--cdo-warn-bg); color: #7A4E00; }
.cdo-calendar__count--bad { background: var(--cdo-bad-bg); color: #8d1c14; }
.cdo-calendar__open { display: block; margin-top: .25rem; font-size: .76rem; color: var(--cdo-ink-3); }

@media (max-width: 700px) {
	.cdo-calendar { border-spacing: 2px; }
	.cdo-calendar__cell > a { min-height: 4rem; padding: .3rem; }
	.cdo-calendar__date { font-size: .82rem; }
	.cdo-calendar__count { font-size: .72rem; }
	.cdo-calendar__open { display: none; }
}

/* --------------------------------------------------- The screening screen */

/* A row of buttons that belong together — save and sign, or send again and
   set by hand — laid out so they wrap onto a phone rather than overflow. */
.cdo-btnrow { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; margin: .8rem 0 0; }
.cdo-btnrow form { margin: 0; }

.cdo-bullets { margin: 0 0 1rem; padding-left: 1.2rem; font-size: .92rem; line-height: 1.7; color: var(--cdo-ink-2); }
.cdo-bullets li { margin: .25rem 0; }

/* What the office still needs from a candidate. A tick appears against each
   kind the moment they send one, so the list answers "what is left" rather
   than repeating the whole thing at somebody nearly finished. */
.cdo-checklist__item { display: flex; align-items: flex-start; gap: .75rem; padding: .7rem .9rem; border: 1px solid var(--cdo-line); border-radius: var(--cdo-r); background: var(--cdo-surface); }
.cdo-checklist__item > span:nth-child(2) { flex: 1; min-width: 0; }
/* An empty ring for something not sent yet, a filled tick once it is. A solid
   grey disc read as a radio button somebody had failed to fill in. */
.cdo-checklist__mark { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; border: 1px dashed var(--cdo-line); color: var(--cdo-good); }
.cdo-checklist__mark:not(:empty) { border-style: solid; border-color: transparent; background: var(--cdo-good-bg); }
.cdo-checklist__item .cdo-badge { flex: none; }

/* The signature box is the one thing on this screen a finger has to land on
   accurately, so it is given room on a phone rather than shrunk with the rest. */
.cdo-portal .cdo-sigpad { max-width: 30rem; }

/* -------------------------------------------------- Ready to book */

/* One day of the order, with everything pencilled in on it and the van
   chosen once for the whole day. Reads as a card because a day is the unit
   the office actually thinks in: one van, one site, one morning. */
.cdo-daycard { border: 1px solid var(--cdo-line); border-radius: var(--cdo-r); padding: 1rem 1.1rem; margin: 0 0 1.1rem; background: var(--cdo-surface); }
.cdo-daycard__head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 .8rem; }
.cdo-daycard__head h4 { margin: 0; font-size: 1rem; color: var(--cdo-navy); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cdo-daycard__transport { margin: .9rem 0 0; padding: .9rem 0 0; border-top: 1px dashed var(--cdo-line); }
.cdo-daycard .cdo-tablewrap { margin: 0 0 .6rem; }
.cdo-daycard .cdo-field { margin-bottom: .6rem; }

.cdo-table__caption { caption-side: top; text-align: left; padding: .45rem 0; font-size: .86rem; color: var(--cdo-ink-2); display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }

.cdo-daylist { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .4rem; }
.cdo-daylist__item { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; padding: .5rem .7rem; background: var(--cdo-bg); border: 1px solid var(--cdo-line); border-radius: 10px; font-size: .9rem; }
.cdo-daylist__item strong { min-width: 7.5rem; color: var(--cdo-navy); }

.cdo-panel--sunk { background: var(--cdo-bg); border: 1px solid var(--cdo-line); box-shadow: none; }


/* The suggested vans. An order can run to a hundred and fifty names, so the
   panel sits in the scrolling part of the window rather than in the footer
   beside Book all — the button has to stay in reach however long the list is.
   Its fields are tied back to the form by the form attribute instead. */
.cdo-crew { margin: 1rem 0 .4rem; }
.cdo-crew > summary { display: inline-flex; }
.cdo-crew__body thead th { position: sticky; top: 0; z-index: 1; background: #fff; }

/* The transport panel: one card per van, and the people in it. Dragging is the
   quick way to move somebody; the select on each row is what actually posts,
   and it is what a keyboard, a screen reader or a browser with scripting off
   still uses, so it is only hidden once the script has taken over. */
/* Flex rather than grid so the fullest van can be floated to the top with
   `order` — which reorders what the eye sees without moving the cards, and so
   without moving the hidden driver and vehicle fields inside them. */
.cdo-vans { display: flex; flex-direction: column; gap: .75rem; }
.cdo-van { border: 1px solid var(--cdo-line); border-radius: var(--cdo-r-md); background: #fff; }
.cdo-van--idle { background: #fbfcfe; border-style: dashed; }
.cdo-van--own { background: #f7f9fd; }
.cdo-van.is-over { border-color: var(--cdo-blue); box-shadow: 0 0 0 2px rgba(18, 88, 173, .15); }
.cdo-van.is-full.is-over { border-color: var(--cdo-warn); box-shadow: 0 0 0 2px rgba(154, 99, 0, .18); }
.cdo-van__head {
	display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem;
	padding: .6rem .8rem; border-bottom: 1px solid var(--cdo-line);
}
.cdo-van--idle .cdo-van__head, .cdo-van--own .cdo-van__head { border-bottom-color: transparent; }
.cdo-van__reg { color: #123a6b; }
.cdo-van__driver { display: flex; align-items: center; gap: .4rem; margin: 0; }
.cdo-van__label { font-size: .8rem; color: var(--cdo-ink-3); }
.cdo-van__driver select { max-width: 15rem; }
.cdo-van__seats, .cdo-van__spread { font-size: .85rem; color: var(--cdo-ink-3); }
.cdo-van__off { margin-left: auto; }
.cdo-van__riders { list-style: none; margin: 0; padding: .25rem .4rem; display: grid; gap: .15rem; }
/* An empty van still has to be a place you can drop somebody. */
.cdo-van__riders:empty { min-height: 2.2rem; }
.cdo-van__empty { margin: 0; padding: .55rem .8rem .7rem; font-size: .85rem; color: var(--cdo-ink-3); }
.cdo-van__riders:not(:empty) + .cdo-van__empty { display: none; }

.cdo-rider {
	display: flex; align-items: center; gap: .5rem;
	padding: .3rem .4rem; border-radius: var(--cdo-r-sm, 8px);
}
.cdo-rider:hover { background: #f4f7fb; }
.cdo-rider.is-lifted { opacity: .45; }
.cdo-rider__grip { color: var(--cdo-ink-3); cursor: grab; letter-spacing: -.1em; }
.cdo-rider__who { display: flex; align-items: baseline; flex-wrap: wrap; gap: .45rem; }
.cdo-rider__postcode { font-size: .8rem; color: var(--cdo-ink-3); }
.cdo-rider__pick { margin-left: auto; }
.cdo-rider__pick select { max-width: 14rem; }

/* Dragging is on, so the per-person dropdown steps out of the way. It keeps
   posting, and it comes back the moment a row is focused by keyboard. */
.cdo-crew.is-draggable .cdo-rider__pick { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
.cdo-crew.is-draggable .cdo-rider__pick:focus-within {
	position: static; width: auto; height: auto; clip: auto; margin-left: auto;
}

/* The day the transport panel is working on. */
.cdo-crew__days { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin: 0 0 .8rem; }
.cdo-crew__dayslabel { font-size: .85rem; color: var(--cdo-ink-3); margin-right: .2rem; }
.cdo-chip {
	display: inline-flex; align-items: baseline; gap: .35rem;
	padding: .3rem .7rem; border: 1px solid var(--cdo-line); border-radius: 999px;
	font-size: .85rem; color: var(--cdo-ink-2, #33415c); text-decoration: none; background: #fff;
}
.cdo-chip small { color: var(--cdo-ink-3); font-size: .78em; }
.cdo-chip:hover { border-color: var(--cdo-blue); color: var(--cdo-blue); }
.cdo-chip.is-on { background: var(--cdo-blue); border-color: var(--cdo-blue); color: #fff; }
.cdo-chip.is-on small { color: rgba(255, 255, 255, .8); }

/* Folding a van away, and the buttons that act on one. */
.cdo-van__fold {
	flex: none; border: 0; background: none; cursor: pointer; padding: .1rem .3rem;
	color: var(--cdo-ink-3); font-size: .9rem; line-height: 1;
}
.cdo-van__fold:hover { color: var(--cdo-blue); }
.cdo-van__acts { margin-left: auto; display: flex; gap: .4rem; align-items: center; }
.cdo-van.is-folded .cdo-van__riders,
.cdo-van.is-folded .cdo-van__empty { display: none; }

/* A form that exists only to be submitted from a button somewhere else. */
.cdo-form--hidden { display: none; }

/* A disclosure tucked inside a fieldset, so it does not read as a section of
   its own next to the checkboxes it belongs to. */
.cdo-disclosure--tight { margin: .75rem 0 0; padding: .5rem .75rem; }
.cdo-disclosure--tight > summary { font-size: .9rem; font-weight: 600; }
.cdo-disclosure--tight .cdo-field__hint { display: block; margin-top: .4rem; }

/* ---------------------------------------------------------------- crews ---
   Vans that are booked and waiting on their crew to answer. One block per van,
   one row per seat, and the answer on the right where the eye lands. */
.cdo-panel--inset { background: var(--cdo-surface-2, #f7f9fc); border-radius: 10px; padding: 1rem; margin: 1rem 0; }
.cdo-crews { display: grid; gap: .8rem; }
.cdo-crew { border: 1px solid var(--cdo-line, #dbe2ec); border-radius: 10px; padding: .75rem .9rem; background: var(--cdo-surface, #fff); }
.cdo-crew.is-ready { border-color: #9ad3a8; box-shadow: inset 3px 0 0 #2e8b57; }
.cdo-crew__head { display: flex; flex-wrap: wrap; align-items: center; gap: .55rem; }
.cdo-crew__pick { margin: 0; }
.cdo-crew__reg { font-weight: 700; letter-spacing: .02em; }
.cdo-crew__when,
.cdo-crew__driver { font-size: .88rem; color: var(--cdo-muted, #5b6884); }
.cdo-crew__driver::before { content: "· "; }
.cdo-crew__return { margin: .45rem 0 0; font-size: .85rem; color: var(--cdo-muted, #5b6884); }
.cdo-crew__seats { list-style: none; margin: .6rem 0 0; padding: 0; display: grid; gap: .3rem; }
.cdo-seat { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; padding: .3rem .45rem; border-radius: 7px; }
.cdo-seat--accepted { background: rgba(46, 139, 87, .08); }
.cdo-seat--declined { background: rgba(180, 35, 24, .08); }
.cdo-seat__who { font-weight: 600; }
.cdo-seat__who code { font-weight: 400; }
.cdo-seat__where { font-size: .85rem; color: var(--cdo-muted, #5b6884); }
.cdo-seat > .cdo-badge { margin-left: auto; }
.cdo-crew__act { margin: .6rem 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }

/* Pick-up and drop-off on each van, and the second van for the way home. */
.cdo-van__times { display: flex; flex-wrap: wrap; align-items: end; gap: .7rem; padding: .45rem .6rem .1rem; }
.cdo-van__time { display: grid; gap: .15rem; font-size: .85rem; }
.cdo-van__round { margin: 0 0 .35rem; font-size: .85rem; }
.cdo-van__return { display: flex; flex-wrap: wrap; gap: .7rem; padding: .1rem .6rem .5rem; }
.cdo-van__return[hidden] { display: none; }

@media ( max-width: 620px ) {
	.cdo-seat > .cdo-badge { margin-left: 0; }
	.cdo-van__times,
	.cdo-van__return { padding-left: .35rem; padding-right: .35rem; }
}

/* A worker already chosen on the pencil-in list. Searching the list swaps the
   rows underneath you, so who you have chosen has to be visible on the row
   itself and not only in a tick box. */
[data-cdo-pick-row].is-chosen { background: rgba(46, 139, 87, .07); }
[data-cdo-pick-row].is-chosen td:first-child { box-shadow: inset 3px 0 0 #2e8b57; }
.cdo-pick-chosen[hidden] { display: none; }

/* Too many ticked for what the line still wants. Said while they are ticking
   rather than one refusal at a time after they press. */
.cdo-pick-toomany { display: block; margin: .6rem 0; }
.cdo-pick-toomany[hidden] { display: none; }
.cdo-pick-toomany strong { display: block; }
[data-cdo-pick-count]:disabled { opacity: .55; cursor: not-allowed; }

/* A pick-up nobody has filled in. Amber, because it is a gap rather than a
   decision — "Making their own way" made the two look identical. */
.cdo-cell-sub--warn { color: #9a6700; font-weight: 600; }

/* Booked, with no van — the way back onto one after a breakdown. */
.cdo-stranded { border: 1px solid var(--cdo-line, #dbe2ec); border-radius: 10px; padding: .8rem .9rem; background: var(--cdo-surface, #fff); margin-bottom: .8rem; }
.cdo-stranded__day { margin: 0 0 .6rem; font-size: .98rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.cdo-stranded__list { list-style: none; margin: 0 0 .8rem; padding: 0; display: grid; gap: .25rem; }
.cdo-stranded__one { display: flex; flex-wrap: wrap; align-items: baseline; gap: .6rem; padding: .25rem .4rem; border-radius: 7px; background: rgba(154, 103, 0, .06); }
.cdo-stranded__who code { font-weight: 400; }
.cdo-stranded__where { font-size: .85rem; color: var(--cdo-muted, #5b6884); margin-left: auto; }
@media ( max-width: 620px ) { .cdo-stranded__where { margin-left: 0; } }