/* /d/ — Driver portal stylesheet
 *
 * Phase 2a scope:
 *   - Mobile-first base layout (single column, 480px max, full-
 *     bleed on phones)
 *   - Login + placeholder home use these primitives
 *   - Periva brand palette (cribbed from app-wide CSS so the
 *     driver portal feels like part of the same product)
 *
 * Step-toggle pattern (used by login):
 *   <body class="d-step-email"> shows #d-form-email,
 *                                hides #d-form-code + #d-form-fleet
 *   <body class="d-step-code">  shows #d-form-code, hides others
 *   <body class="d-step-fleet"> shows #d-form-fleet, hides others
 * JS swaps the class on submit; CSS does the rest.
 */

:root {
	/* Brand palette pulled from drivers.css (the operator-side
	 * /drivers/ page); kept identical so the driver portal feels
	 * like the same product, just laid out for mobile. */
	--d-brand: #004E51;        /* Periva dark teal — primary actions */
	--d-brand-dark: #003436;
	--d-accent: #44A88C;       /* Periva green — success / positive */
	--d-text: #1a1a1a;
	--d-text-muted: #555;
	--d-text-fine: #9FA4B1;
	--d-bg: #F4F7FF;           /* Periva light-grey-2 page background */
	--d-card: #ffffff;
	--d-border: #e3e6ea;
	--d-error: #d93025;
	--d-radius: 10px;
	--d-tap: 48px;             /* min mobile tap target */

	/* Brand typefaces. These are declared here rather than inherited because
	 * the portal deliberately does not load the operator-side common.css —
	 * it is a separate, minimal shell. Same faces, same tokens, so drivers
	 * see the same product the operators do. */
	--d-font-body: Satoshi, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--d-font-display: Sora, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

@font-face {
	font-family: Satoshi;
	src: url('/fonts/Satoshi-Variable.woff2') format('woff2');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: Sora;
	src: url('/fonts/Sora-Variable.woff2') format('woff2');
	font-weight: 100 800;
	font-style: normal;
	font-display: swap;
}

* { box-sizing: border-box; }

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--d-font-body);
	color: var(--d-text);
	background: var(--d-bg);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

.d-app {
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* ===== Header (visible on authenticated screens) ===== */
.d-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 18px;
	background: #fff;
	border-bottom: 1px solid var(--d-border);
}
.d-header-brand {
	font-weight: 600;
	font-size: 17px;
	color: var(--d-brand);
}
.d-header-link {
	font-size: 14px;
	color: var(--d-text-muted);
	text-decoration: none;
}

/* ===== Main column ===== */
.d-main {
	flex: 1;
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	padding: 20px 16px 80px;
}
.d-main-narrow { max-width: 420px; }

/* ===== Brand block (login screen) ===== */
.d-brand-block {
	text-align: center;
	padding: 28px 0 18px;
}
.d-brand {
	font-size: 28px;
	font-weight: 600;
	color: var(--d-brand);
	letter-spacing: -0.5px;
}
.d-tagline {
	font-size: 13px;
	color: var(--d-text-muted);
	margin-top: 4px;
}

/* ===== Card ===== */
.d-card {
	background: var(--d-card);
	border-radius: var(--d-radius);
	border: 1px solid var(--d-border);
	padding: 24px 22px;
	box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
/* Display face on the screen title, matching the operator side where page
 * titles carry Sora and everything smaller stays on the UI face. */
.d-card-title {
	font-family: var(--d-font-display);
	font-size: 20px;
	margin: 0 0 6px;
	font-weight: 600;
}
.d-card-body {
	font-size: 14px;
	color: var(--d-text-muted);
	margin: 0 0 18px;
	line-height: 1.5;
}

/* ===== Forms ===== */
.d-form {
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.d-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.d-field-label {
	font-size: 13px;
	color: var(--d-text-muted);
	font-weight: 500;
}
.d-field input {
	font: inherit;
	font-size: 16px;            /* >=16px stops iOS auto-zoom on focus */
	padding: 14px;
	border: 1px solid var(--d-border);
	border-radius: 8px;
	min-height: var(--d-tap);
	background: #fff;
	color: var(--d-text);
}
.d-field input:focus {
	outline: 2px solid var(--d-brand);
	outline-offset: -1px;
	border-color: var(--d-brand);
}
.d-field input::placeholder { color: #aaa; }

/* ===== Buttons ===== */
.d-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--d-tap);
	padding: 12px 18px;
	border: 0;
	border-radius: 8px;
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: background 0.12s ease, opacity 0.12s ease;
}
.d-btn-primary {
	background: var(--d-brand);
	color: #fff;
}
.d-btn-primary:hover:not(:disabled) { background: var(--d-brand-dark); }
.d-btn-secondary {
	background: #fff;
	color: var(--d-text);
	border: 1px solid var(--d-border);
}
.d-btn-link {
	background: transparent;
	color: var(--d-brand);
	font-weight: 500;
	min-height: 40px;
	padding: 6px;
}
/* 2026-08-10: .d-btn-quiet is gone — transparent, borderless, and used for the two
   per-stop actions, which is why neither of them looked like a button. Both are
   .d-btn-secondary now. Nothing in the portal is a borderless button any more. */
.d-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ===== Form errors ===== */
.d-form-error {
	color: var(--d-error);
	font-size: 13px;
	background: #fdecea;
	border: 1px solid #f5c6c2;
	border-radius: 6px;
	padding: 10px 12px;
	margin: -4px 0 4px;
}

/* ===== Auth screen — show/hide steps ===== */
.d-auth #d-form-code,
.d-auth #d-form-fleet { display: none; }
.d-auth.d-step-email #d-form-email { display: flex; }
.d-auth.d-step-code  #d-form-email { display: none; }
.d-auth.d-step-code  #d-form-code  { display: flex; }
.d-auth.d-step-fleet #d-form-email { display: none; }
.d-auth.d-step-fleet #d-form-fleet { display: flex; }

/* ---------------------------------------------------------------------
   2026-07-28: sign-in gets the same treatment as the operator login it
   sits beside — brand backdrop, a centred card with real depth, green
   primary action. It was a pale card on a pale page anchored to the top
   of the screen with a text wordmark, which read as unfinished next to
   the page drivers arrive from.
   Everything here is scoped to .d-auth: the signed-in portal screens are
   their own (already shipped) design and are deliberately untouched.
   --------------------------------------------------------------------- */
body.d-auth {
	background: var(--d-brand) url('/img/periva-bg.png') center / cover no-repeat;
}
.d-auth .d-main {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px 16px;
}
.d-auth .d-brand-block {
	padding: 0 0 22px;
}
.d-auth .d-brand-mark {
	display: block;
	width: 168px;
	max-width: 70%;
	height: auto;
	margin: 0 auto;
}
.d-auth .d-tagline {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.72);
	font-weight: 500;
	letter-spacing: 0.02em;
}
.d-auth .d-card {
	border: 0;
	border-radius: 18px;
	padding: 28px 24px;
	box-shadow: 0 4px 10px rgba(0, 27, 28, 0.18), 0 20px 44px -18px rgba(0, 27, 28, 0.55);
}
.d-auth .d-card-title {
	color: var(--d-brand);
}
.d-auth .d-field-label {
	font-weight: 700;
	color: var(--d-brand);
}
.d-auth .d-field input {
	border-radius: var(--d-radius);
	border-color: #A8B6C1;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* A 2px outline drawn inside the field's own edge doubled up with the border
   and read as an error state. Ring outside it instead, like the operator side. */
.d-auth .d-field input:focus {
	outline: none;
	border-color: var(--d-accent);
	box-shadow: 0 0 0 3px rgba(68, 168, 140, 0.22);
}
.d-auth .d-btn-primary {
	border-radius: 11px;
	background: linear-gradient(180deg, var(--d-accent) 0%, #3A8F77 100%);
	box-shadow: 0 8px 18px -8px rgba(68, 168, 140, 0.75);
	transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.15s ease;
}
.d-auth .d-btn-primary:hover:not(:disabled) {
	background: linear-gradient(180deg, var(--d-accent) 0%, #3A8F77 100%);
	transform: translateY(-1px);
	box-shadow: 0 12px 24px -8px rgba(68, 168, 140, 0.85);
}
.d-auth .d-btn-primary:active:not(:disabled) {
	transform: translateY(1px);
}
.d-auth .d-btn-link {
	color: #2F7A65;
}
.d-auth .d-fleet-pick {
	border-radius: var(--d-radius);
}
/* On the dark backdrop rather than the pale page it started on. */
.d-auth .d-fineprint {
	color: rgba(255, 255, 255, 0.66);
	margin-top: 20px;
}

/* ===== Fleet picker ===== */
.d-fleet-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.d-fleet-pick {
	display: block;
	width: 100%;
	background: #fff;
	border: 1px solid var(--d-border);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 15px;
	color: var(--d-text);
	cursor: pointer;
	text-align: left;
	min-height: var(--d-tap);
}
.d-fleet-pick:hover { background: #f8f9fa; }

/* ===== Misc ===== */
.d-fineprint {
	text-align: center;
	font-size: 12px;
	color: var(--d-text-fine);
	margin: 24px 0 0;
}
.d-meta {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 6px 18px;
	font-size: 14px;
	margin: 0 0 18px;
}
.d-meta dt { color: var(--d-text-muted); font-weight: 500; }
.d-meta dd { margin: 0; color: var(--d-text); }

/* =========================================================
 * Phase 2b additions
 * Driver header (signed-in), bottom-tab nav, vehicle cards,
 * confirm modal, toggle switch, status pills, skeleton.
 * ========================================================= */

.d-header-driver {
	font-size: 13px;
	color: var(--d-text-muted);
	max-width: 55%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ===== Navigation =====================================
 *
 * Two presentations of the SAME <nav> rendered once in
 * _chrome.php's <header>:
 *
 *   Mobile (<520px): fixed bottom-tab bar (thumb-friendly,
 *     mobile-app convention).
 *   Desktop (≥520px): inline tabs in the page header. The
 *     fixed-footer pattern reads as a footer on big screens
 *     and the user reported it was easy to miss.
 *
 * Default styles here are the MOBILE bottom-tab; the @media
 * query below switches to inline-header for desktop.
 * ====================================================== */

.d-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.d-tabs {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	display: grid;
	/* Six tabs on a 320px phone is ~53px each, under the 48px tap minimum only
	   if the label wraps — so labels are single words and the font drops a point
	   below 360px rather than the bar scrolling sideways. */
	grid-template-columns: repeat(6, 1fr);
	background: #fff;
	border-top: 1px solid var(--d-border);
	z-index: 100;
	/* iOS safe-area: keep the tabs above the home-bar */
	padding-bottom: env(safe-area-inset-bottom);
}
.d-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	gap: 2px;
	color: var(--d-text-fine);
	text-decoration: none;
	font-size: 11px;
	font-weight: 500;
}
.d-tab-active { color: var(--d-brand); }
.d-tab-label { white-space: nowrap; }
.d-tab-icon { width: 22px; height: 22px; display: inline-flex; }

@media (max-width: 359px) {
	.d-tab { font-size: 10px; }
	.d-tab-icon { width: 20px; height: 20px; }
}
.d-tab-icon svg { width: 100%; height: 100%; }

/* Bump main padding so content doesn't slide under the
 * fixed bottom bar on mobile. Reset by the desktop query. */
.d-app[class*="d-page-"] .d-main { padding-bottom: 96px; }

@media (min-width: 520px) {
	.d-header {
		gap: 18px;
		padding: 12px 24px;
	}
	.d-header-brand { flex-shrink: 0; }
	.d-header-driver { flex-shrink: 0; max-width: none; }

	/* Un-fix the nav; it now sits in the header's flex row,
	 * between brand and driver-name, and uses inline pill tabs. */
	.d-tabs {
		position: static;
		display: flex;
		gap: 4px;
		background: transparent;
		border-top: 0;
		padding-bottom: 0;
		margin: 0 auto;   /* eat the spare flex space; center the nav */
	}
	.d-tab {
		flex-direction: row;
		min-height: 40px;
		padding: 8px 14px;
		gap: 8px;
		font-size: 14px;
		border-radius: 8px;
	}
	.d-tab:hover { background: rgba(0, 78, 81, 0.06); }
	.d-tab-active { background: rgba(0, 78, 81, 0.10); }
	.d-tab-icon { width: 18px; height: 18px; }

	/* No bottom bar = no need for the extra bottom padding. */
	.d-app[class*="d-page-"] .d-main { padding-bottom: 32px; }
}

/* ===== Card variants ===== */
.d-card + .d-card { margin-top: 14px; }
.d-card-eyebrow {
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--d-text-fine);
	margin: 0 0 4px;
	font-weight: 600;
}
.d-card-title-sm {
	font-size: 16px;
	font-weight: 600;
	margin: 0 0 4px;
}
.d-card-subtitle {
	font-size: 13px;
	color: var(--d-text-muted);
	margin: 0 0 12px;
}
.d-card-secondary { background: #fafbfc; }
.d-card-loading { min-height: 120px; }

/* Today's route on the home screen. A card that is also a link, so the whole thing is
   the tap target — a driver holding a phone in one hand should not have to find a
   word inside it. */
.d-card-route {
	display: block;
	color: inherit;
	text-decoration: none;
	border-left: 3px solid var(--d-brand);
}
.d-card-route .d-card-subtitle { margin-bottom: 10px; }
.d-card-go {
	display: inline-block;
	font-size: 13px;
	font-weight: 600;
	color: var(--d-brand);
}
.d-card-go::after { content: ' \203A'; }

.d-route-progress { margin: 0 0 10px; }
.d-route-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--d-border);
	overflow: hidden;
}
.d-route-bar span {
	display: block;
	height: 100%;
	background: var(--d-brand);
	transition: width 0.3s ease;
}
.d-route-progress-text {
	margin-top: 5px;
	font-size: 12px;
	color: var(--d-text-muted);
}

/* ===== Skeleton placeholders ===== */
@keyframes d-shimmer {
	0%   { background-position: -200px 0; }
	100% { background-position: 200px 0; }
}
.d-skeleton-line {
	height: 14px;
	background: linear-gradient(90deg, #eef0f3 0%, #f7f8fa 50%, #eef0f3 100%);
	background-size: 400px 100%;
	border-radius: 6px;
	margin: 6px 0;
	animation: d-shimmer 1.4s linear infinite;
}
.d-skeleton-line:nth-child(1) { width: 60%; }
.d-skeleton-line:nth-child(2) { width: 80%; }
.d-skeleton-line:nth-child(3) { width: 40%; }

/* ===== Status pills ===== */
.d-pill {
	display: inline-block;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 4px 9px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.d-pill-on    { background: rgba(68, 168, 140, 0.12); color: #00795A; }
.d-pill-muted { background: #f0f2f5;                  color: var(--d-text-muted); }

/* ===== Vehicle list ===== */
.d-veh-list[hidden] { display: none; }
.d-veh-list:not([hidden]) {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.d-veh {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--d-border);
	border-radius: 10px;
	padding: 14px 16px;
	min-height: var(--d-tap);
	font: inherit;
	color: var(--d-text);
	text-align: left;
	cursor: pointer;
	transition: background 0.12s ease, transform 0.06s ease;
}
.d-veh:hover, .d-veh:focus-visible { background: #f8f9fa; }
.d-veh:active { transform: scale(0.99); }
.d-veh-main { flex: 1; min-width: 0; }
.d-veh-name {
	font-size: 16px;
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.d-veh-plate {
	font-size: 13px;
	color: var(--d-text-muted);
	margin-top: 2px;
}
.d-veh-meta {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-end;
	flex-shrink: 0;
}
.d-veh-meta-fresh {
	font-size: 11px;
	color: var(--d-text-fine);
}
.d-veh-meta-pill {
	background: rgba(0, 78, 81, 0.08);
	color: var(--d-brand);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.3px;
	text-transform: uppercase;
	padding: 2px 6px;
	border-radius: 999px;
}
/* Offline is now only a freshness HINT — the vehicle is still
 * pickable, so this is muted/amber rather than a hard "blocked" red. */
.d-veh-meta-offline {
	background: rgba(180, 120, 0, 0.12);
	color: #9a6a00;
}

/* ===== Modal (confirm-claim) =====
 *
 * IMPORTANT: scope display:flex behind :not([hidden]) so the
 * `hidden` HTML attribute actually hides the modal. Without the
 * scoping, `display: flex` here wins over the UA's
 * `[hidden] { display: none }` and the modal stays visible on
 * page load even though the markup has `hidden`. Caught on
 * staging /d/vehicles/ when the picker had no available
 * vehicles — the confirm popup was floating over the empty-
 * state card with non-working buttons. Same pattern would
 * silently break any other [hidden]-toggled element with an
 * explicit display rule, hence the dedicated comment here.
 */
.d-modal[hidden] { display: none; }
.d-modal:not([hidden]) {
	position: fixed;
	inset: 0;
	background: rgba(20, 24, 32, 0.55);
	z-index: 200;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding: 0;
	animation: d-fade-in 0.16s ease;
}
@media (min-width: 520px){
	/* Must match the base rule's specificity (.d-modal:not([hidden]) == 0,2,0),
	 * otherwise this override loses the cascade and every popup stays glued to
	 * the bottom of the screen on desktop. Bottom-sheet is intentional on
	 * mobile; centered is what we want on web. */
	.d-modal:not([hidden]) { align-items: center; padding: 24px; }
}
@keyframes d-fade-in { from { opacity: 0; } to { opacity: 1; } }
.d-modal-card {
	background: #fff;
	border-radius: 14px 14px 0 0;
	padding: 22px 22px 28px;
	width: 100%;
	max-width: 480px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 -8px 30px rgba(0,0,0,0.18);
	/* iOS safe-area: keep buttons above home-bar */
	padding-bottom: calc(28px + env(safe-area-inset-bottom));
}
@media (min-width: 520px){
	.d-modal-card { border-radius: 14px; padding-bottom: 28px; }
}
.d-modal-title {
	font-size: 18px;
	font-weight: 600;
	margin: 0 0 4px;
}
.d-modal-vehicle {
	font-size: 15px;
	color: var(--d-text-muted);
	margin: 0 0 18px;
}
.d-modal-section-label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--d-text-muted);
	margin: 6px 0 8px;
}
.d-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.d-modal-actions .d-btn { flex: 1; }

/* ===== Duration picker (radio "pills") ===== */
.d-duration {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.d-duration-opt {
	flex: 1 1 calc(50% - 4px);
	min-width: 100px;
	cursor: pointer;
}
.d-duration-opt input { position: absolute; opacity: 0; pointer-events: none; }
.d-duration-opt span {
	display: block;
	text-align: center;
	padding: 12px 8px;
	border: 1px solid var(--d-border);
	border-radius: 8px;
	font-size: 14px;
	background: #fff;
	color: var(--d-text);
	min-height: var(--d-tap);
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-duration-opt input:checked + span {
	border-color: var(--d-brand);
	background: rgba(0, 78, 81, 0.06);
	color: var(--d-brand);
	font-weight: 600;
}

/* ===== Toggle switch (notification opt-in) ===== */
.d-toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	cursor: pointer;
	min-height: var(--d-tap);
}
.d-toggle-label {
	font-size: 14px;
	color: var(--d-text);
	line-height: 1.4;
	flex: 1;
}
.d-toggle-switch {
	position: relative;
	width: 46px;
	height: 26px;
	flex-shrink: 0;
}
.d-toggle-switch input {
	opacity: 0;
	position: absolute;
	inset: 0;
	margin: 0;
	cursor: pointer;
	z-index: 1;
}
.d-toggle-track {
	position: absolute;
	inset: 0;
	background: #cfd4da;
	border-radius: 999px;
	transition: background 0.18s ease;
}
.d-toggle-track::after {
	content: '';
	position: absolute;
	top: 3px; left: 3px;
	width: 20px; height: 20px;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.18s ease;
	box-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.d-toggle-switch input:checked ~ .d-toggle-track { background: var(--d-brand); }
.d-toggle-switch input:checked ~ .d-toggle-track::after { transform: translateX(20px); }
.d-toggle-switch input:disabled ~ .d-toggle-track { opacity: 0.5; }

/* =========================================================
 * Wave 2 #C — "My trips" (/d/trips/)
 * Day nav + shift banner, per-vehicle trip cards, reason
 * editor. Reuses the card/pill/modal primitives above.
 * ========================================================= */

.d-trips-head { margin-bottom: 14px; }
.d-trips-daynav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	background: #fff;
	border: 1px solid var(--d-border);
	border-radius: var(--d-radius);
	padding: 6px 8px;
}
.d-daynav-btn {
	width: 40px; height: 40px;
	border: 0;
	background: transparent;
	color: var(--d-brand);
	font-size: 24px;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
}
.d-daynav-btn:hover { background: rgba(0, 78, 81, 0.06); }
.d-daynav-label {
	flex: 1;
	text-align: center;
	font-size: 15px;
	font-weight: 600;
	color: var(--d-text);
	/* Now a <button> that opens the date picker (Wave 2.1 #3b). */
	border: 0;
	background: transparent;
	cursor: pointer;
	font-family: inherit;
	padding: 8px 10px;
	border-radius: 8px;
}
.d-daynav-label:hover { background: rgba(0, 78, 81, 0.06); }

/* ===== Date picker calendar (Wave 2.1 #3b) ===== */
.d-cal-card { max-width: 360px; }
.d-cal-head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 12px;
}
.d-cal-title {
	flex: 1;
	text-align: center;
	font-size: 16px;
	font-weight: 600;
	color: var(--d-text);
}
.d-cal-nav {
	width: 40px; height: 40px;
	border: 0;
	background: transparent;
	color: var(--d-brand);
	font-size: 24px;
	line-height: 1;
	border-radius: 8px;
	cursor: pointer;
}
.d-cal-nav:hover { background: rgba(0, 78, 81, 0.06); }
.d-cal-weekdays,
.d-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.d-cal-weekdays { margin-bottom: 4px; }
.d-cal-wd {
	text-align: center;
	font-size: 11px;
	font-weight: 600;
	color: var(--d-text-muted);
	padding: 4px 0;
}
.d-cal-day {
	aspect-ratio: 1 / 1;
	border: 0;
	background: transparent;
	border-radius: 8px;
	font-family: inherit;
	font-size: 14px;
	color: var(--d-text);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}
.d-cal-day:hover:not(.d-cal-disabled):not(.d-cal-blank) { background: rgba(0, 78, 81, 0.08); }
.d-cal-blank { visibility: hidden; cursor: default; }
.d-cal-disabled { color: #C7CCD6; cursor: default; }
.d-cal-today { box-shadow: inset 0 0 0 1px var(--d-brand); }
.d-cal-selected {
	background: var(--d-brand);
	color: #fff;
	font-weight: 600;
}
.d-cal-selected:hover { background: var(--d-brand); }
.d-trips-shift {
	margin-top: 10px;
	font-size: 14px;
	color: var(--d-text-muted);
}
.d-trips-shift[hidden] { display: none; }

/* Per-vehicle group */
.d-trips-veh { padding: 16px 16px 8px; }
.d-trips-veh-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--d-border);
}
.d-trips-veh-head .d-veh-name { font-size: 15px; }

.d-trip-list { display: flex; flex-direction: column; }

/* One trip row (a tap-target that opens the reason editor) */
.d-trip {
	display: grid;
	grid-template-columns: 58px 1fr auto;
	align-items: center;
	gap: 12px;
	width: 100%;
	border: 0;
	border-top: 1px solid #f0f2f5;
	background: transparent;
	padding: 12px 2px;
	font: inherit;
	text-align: left;
	color: var(--d-text);
	cursor: pointer;
}
/* 2026-09-12 (§6.2): the trip's own little map, on its own line under the row so
   the addresses keep the width they had. Nothing is reserved for it — a row whose
   picture is not drawn yet, or never will be, looks exactly as it did before. */
.d-trip-map { grid-column: 1 / -1; }
.d-trip-map:empty { display: none; }
.d-trip-map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.d-trip:first-child { border-top: 0; }
.d-trip:hover { background: #f8f9fa; }
.d-trip-time {
	font-size: 12px;
	font-weight: 600;
	color: var(--d-brand);
	line-height: 1.35;
}
.d-trip-arrow { display: block; color: var(--d-text-fine); font-weight: 400; }
.d-trip-body { min-width: 0; }
.d-trip-route {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	overflow: hidden;
}
.d-trip-loc {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 45%;
}
.d-trip-loc-arrow { color: var(--d-text-fine); flex-shrink: 0; }
.d-trip-stats {
	font-size: 12px;
	color: var(--d-text-muted);
	margin-top: 2px;
}
.d-trip-comment {
	font-size: 12px;
	color: var(--d-text-fine);
	margin-top: 2px;
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.d-trip-reason { flex-shrink: 0; text-align: right; }
.d-trip-reason-tag {
	display: inline-block;
	background: rgba(0, 78, 81, 0.08);
	color: var(--d-brand);
	font-size: 12px;
	font-weight: 600;
	padding: 4px 10px;
	border-radius: 999px;
	max-width: 110px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.d-trip-reason-add {
	font-size: 12px;
	color: var(--d-text-fine);
	font-weight: 500;
}

/* Reason editor choices */
.d-reason-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.d-reason-opt {
	border: 1px solid var(--d-border);
	background: #fff;
	color: var(--d-text);
	border-radius: 999px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
	min-height: 40px;
}
.d-reason-opt:hover { background: #f8f9fa; }
.d-reason-opt-on {
	border-color: var(--d-brand);
	background: rgba(0, 78, 81, 0.08);
	color: var(--d-brand);
	font-weight: 600;
}
.d-reason-opt-clear { color: var(--d-text-muted); }
.d-reason-none {
	font-size: 13px;
	color: var(--d-text-muted);
}

/* =========================================================
 * Wave 2 #D — "My driving" (/d/driving/)
 * Score ring, KPI grid, daily-score trend bars.
 * ========================================================= */

.d-drive-rangelabel {
	font-size: 12px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--d-text-fine);
	font-weight: 600;
	margin: 0 2px 12px;
}

/* Score hero */
.d-drive-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 12px;
}
.d-drive-score-ring {
	width: 150px;
	height: 150px;
	border-radius: 50%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	/* conic-gradient fill set inline by JS; this mask carves the ring */
	background: #eef0f3;
	position: relative;
}
.d-drive-score-ring::before {
	content: '';
	position: absolute;
	inset: 12px;
	background: var(--d-card);
	border-radius: 50%;
}
.d-drive-score-num {
	position: relative;
	font-family: var(--d-font-display);
	font-size: 44px;
	font-weight: 700;
	line-height: 1;
	color: var(--d-brand);
}
.d-drive-score-cap {
	position: relative;
	font-size: 11px;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	color: var(--d-text-fine);
	margin-top: 4px;
}
.d-drive-hero-note {
	font-size: 14px;
	color: var(--d-text-muted);
	line-height: 1.45;
	max-width: 320px;
}

/* KPI grid */
.d-kpi-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 14px 0;
}
.d-kpi {
	background: var(--d-card);
	border: 1px solid var(--d-border);
	border-radius: var(--d-radius);
	padding: 16px 10px;
	text-align: center;
}
.d-kpi-val {
	font-size: 20px;
	font-weight: 700;
	color: var(--d-text);
	line-height: 1.1;
}
.d-kpi-cap {
	font-size: 11px;
	color: var(--d-text-muted);
	margin-top: 5px;
}

/* Daily-score trend */
.d-trend {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 6px;
	height: 140px;
	margin-top: 10px;
}
.d-trend-col {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100%;
}
.d-trend-val {
	font-size: 11px;
	font-weight: 600;
	color: var(--d-text-muted);
	height: 16px;
}
.d-trend-bar-wrap {
	flex: 1;
	width: 100%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}
.d-trend-bar {
	width: 60%;
	max-width: 26px;
	min-height: 4px;
	border-radius: 4px 4px 0 0;
	background: var(--d-accent);
	transition: height 0.3s ease;
}
.d-trend-day {
	font-size: 11px;
	color: var(--d-text-fine);
	margin-top: 6px;
}

/* ===== Trip detail sheet (Wave 2.1 #1c) =====
 * Map + driver KPIs + reason editor, opened when a driver taps a trip. */
.d-td-card { max-width: 560px; }
.d-td-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}
.d-td-close {
	border: none;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--d-text-muted);
	cursor: pointer;
	padding: 0 4px;
}
.d-td-map {
	position: relative;
	width: 100%;
	height: 240px;
	border-radius: 12px;
	overflow: hidden;
	background: #eef0f3;
	border: 1px solid var(--d-border);
	z-index: 0;   /* keep Leaflet panes below the modal chrome */
}
.d-td-map .leaflet-map, .d-td-map .leaflet-container { width: 100%; height: 100%; }
.d-td-map-msg {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	color: var(--d-text-muted);
	z-index: 500;
	pointer-events: none;
	text-align: center;
	padding: 12px;
}
.d-td-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	margin: 12px 2px 4px;
	font-size: 12px;
	color: var(--d-text-muted);
}
.d-td-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.d-td-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.d-td-kpis {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 14px 0 4px;
}
.d-td-kpi {
	background: var(--d-bg);
	border: 1px solid var(--d-border);
	border-radius: 12px;
	padding: 12px 8px;
	text-align: center;
}
.d-td-kpi-val { font-size: 20px; font-weight: 700; color: var(--d-brand); line-height: 1.1; }
.d-td-kpi-label { font-size: 11px; color: var(--d-text-muted); margin-top: 4px; }
.d-td-kpi-sub { font-size: 10px; color: var(--d-text-fine); margin-top: 2px; }
.d-td-route {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 12px 2px 4px;
	font-size: 13px;
	color: var(--d-text);
}
.d-td-loc-arrow { color: var(--d-text-fine); }
@media (max-width: 420px){
	.d-td-kpis { grid-template-columns: repeat(2, 1fr); }
}

/* ===== /d/route/ — the day's stops ==========================================
 *
 * Read in a cab, so: one card per route, one expanded stop inside it, and the
 * expanded stop's primary action full-width and thumb-high. Numbers are large
 * because they are read at a glance while parking, not studied.
 */

.d-rt-route {
	background: var(--d-card);
	border: 1px solid var(--d-border);
	border-radius: var(--d-radius);
	overflow: hidden;
	margin-bottom: 14px;
}

.d-rt-head { padding: 18px 16px 14px; }
.d-rt-day {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--d-accent);
}
.d-rt-title {
	font-family: var(--d-font-display);
	font-size: 21px;
	font-weight: 600;
	color: var(--d-text);
	margin: 3px 0 4px;
	line-height: 1.2;
}
.d-rt-meta { font-size: 13px; color: var(--d-text-muted); }

.d-rt-bar {
	height: 6px;
	border-radius: 3px;
	background: var(--d-bg);
	margin: 12px 0 5px;
	overflow: hidden;
}
.d-rt-bar span {
	display: block;
	height: 100%;
	background: var(--d-accent);
	border-radius: 3px;
	transition: width 0.25s ease;
}
.d-rt-barnote { font-size: 11.5px; color: var(--d-text-fine); }

/* How the day went (§8.6). Sits between the head and the stop list, and only on a
   run whose last stop is settled — so it is the first thing under the thumb at the
   moment it is worth reading, and does not exist for the rest of the day.

   A tinted panel rather than a card of its own: it belongs to this route, and a
   separate card would float free of the day it is about. The figures are big
   because they are read at arm's length in a cab, and there are at most three of
   them across so none of them shrinks to fit. */
.d-rt-sum {
	padding: 14px 16px 16px;
	border-bottom: 1px solid var(--d-border);
	background: linear-gradient(180deg, #F4F8FF 0%, var(--d-surface-sunk, #F1F3F7) 100%);
}

.d-rt-sum-title {
	font-family: var(--d-font-display);
	font-size: 15px;
	font-weight: 600;
	color: var(--d-text);
	margin: 0 0 12px;
}

.d-rt-sum-figures {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
	gap: 12px;
}

.d-rt-sum-fig { min-width: 0; }

.d-rt-sum-num {
	font-family: var(--d-font-display);
	font-size: 24px;
	font-weight: 600;
	line-height: 1.1;
	color: var(--d-text);
}

.d-rt-sum-lab {
	margin-top: 2px;
	font-size: 12px;
	font-weight: 500;
	color: var(--d-text-muted);
}

.d-rt-sum-note {
	margin-top: 1px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--d-text-fine);
}

/* Planned against actual. Two rows, label on the left and the pair on the right,
   because the comparison is the point and stacking it as four more big figures
   would bury it among the three above. */
.d-rt-sum-vs {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px solid var(--d-border);
}

.d-rt-sum-vsrow {
	display: flex;
	align-items: baseline;
	gap: 8px;
	font-size: 12.5px;
	line-height: 1.5;
}

.d-rt-sum-vsrow > span:first-child {
	flex: 0 0 66px;
	font-weight: 600;
	color: var(--d-text-muted);
}

.d-rt-sum-vsval { flex: 1 1 auto; color: var(--d-text); }

/* Deliberately not coloured green or red. Over the plan is not a fault and under
   it is not a win — most often it is the plan that was wrong. */
.d-rt-sum-vsdiff {
	flex: 0 0 auto;
	font-weight: 500;
	color: var(--d-text-muted);
}

.d-rt-sum-wait {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.45;
	color: var(--d-text-fine);
}

/* 2026-09-12 (§6.2): the day on a map. Full width of the card and no taller than
   it has to be — it is here to be recognised at a glance, not studied. */
.d-rt-sum-map {
	margin: 14px 0 0;
	padding-top: 12px;
	border-top: 1px solid var(--d-border);
}

.d-rt-sum-map img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
	background: var(--d-surface-sunk, #F1F3F5);
}

.d-rt-sum-map figcaption {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	font-size: 12px;
	color: var(--d-text-fine);
}

/* Two short rules rather than words for the colours: at this size a key is read
   by matching the line on the map, not by reading a sentence about it. */
.d-rt-legend {
	display: inline-block;
	width: 16px;
	height: 3px;
	border-radius: 2px;
}
/* The pair the picture is drawn in — D_MAP_PLAN_COLOR / D_MAP_DROVE_COLOR in
   d/lib.php, which is where the choice is explained. Changing one without the
   other leaves a key that describes a different map. */
.d-rt-legend-plan  { background: #E9A23B; }
.d-rt-legend-drove { background: #14705A; margin-left: 10px; }

/* The basemap credit, collapsed behind a marker (D.mapCredit in d/js/common.js).
   The same shape as the operator's live maps use, for the same reason: the words
   are owed, a plate of them across the corner of a thumbnail is not. */
.d-map-credit {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	/* Away from the key it shares the caption with, at the far end of the row. */
	margin-left: auto;
	color: var(--d-text-fine);
}

.d-map-credit-i {
	flex: none;
	width: 18px;
	height: 18px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--d-surface-sunk, #F1F3F5);
	color: #3c3c3c;
	font: italic 700 11px/18px Georgia, "Times New Roman", serif;
	cursor: pointer;
}

.d-map-credit-text {
	display: none;
	font-size: 11px;
}

.d-map-credit-open .d-map-credit-text { display: block; }

/* Opened, the credit takes a line of its own rather than squeezing the key it
   shares the caption with: at the width a phone gives this, the two together wrap
   "you drove" onto a second line and the caption reads as neither one thing nor
   the other. */
.d-rt-sum-map figcaption { flex-wrap: wrap; }

.d-rt-sum-map figcaption .d-map-credit-open {
	flex: 1 0 100%;
	justify-content: flex-end;
	margin-top: 4px;
}

/* A trip list's pictures share one credit, under the last card. */
.d-trips-credit {
	display: flex;
	justify-content: flex-end;
	margin: 8px 2px 0;
}

.d-rt-stops { list-style: none; margin: 0; padding: 0; }
.d-rt-stop { border-top: 1px solid var(--d-border); }
.d-rt-stop-open { background: #FAFCFF; }

/* The whole row is the tap target — a chevron would be a smaller one for no
   gain, and the row already says it is pressable by being a button. */
.d-rt-row {
	display: flex;
	align-items: center;
	gap: 12px;
	width: 100%;
	min-height: var(--d-tap);
	padding: 13px 16px;
	background: none;
	border: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.d-rt-seq {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--d-brand);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.d-rt-seq svg { width: 17px; height: 17px; }

.d-rt-rowtext { flex: 1; min-width: 0; display: block; }
.d-rt-name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: var(--d-text);
	line-height: 1.25;
}
/* "added 14:32" beside the name of a stop that arrived mid-shift (§8.3.1).
   Amber rather than red: this is news, not a problem. */
.d-rt-added {
	display: inline-block;
	margin-left: 7px;
	padding: 1px 7px;
	border-radius: 999px;
	background: #FEF3C7;
	color: #92400E;
	font-size: 11px;
	font-weight: 700;
	vertical-align: 1px;
	white-space: nowrap;
}
.d-rt-addr {
	display: block;
	font-size: 12.5px;
	color: var(--d-text-muted);
	line-height: 1.35;
	margin-top: 1px;
	/* Two lines, then clipped: a full address can be four lines on a phone and
	   would push the next stop off the screen. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.d-rt-eta {
	flex: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--d-brand);
	font-variant-numeric: tabular-nums;
}

/* Done stops stay in the list — a driver scrolling back to check they did a
   drop needs to find it — but stop competing for attention. */
.d-rt-stop-done .d-rt-seq { background: var(--d-accent); }
.d-rt-stop-done .d-rt-name { color: var(--d-text-muted); }
.d-rt-stop-done .d-rt-eta  { color: var(--d-text-fine); }
.d-rt-stop-bad .d-rt-seq   { background: var(--d-error); }

.d-rt-body { padding: 0 16px 16px 58px; }
.d-rt-detail { font-size: 13px; color: var(--d-text-muted); margin-bottom: 6px; }
.d-rt-detail a { color: var(--d-brand); font-weight: 600; }

/* Whatever the operator typed for this stop. Tinted because it is the one thing
   on the card that the driver has to actually read rather than glance at. */
.d-rt-note {
	background: #FFFBEB;
	border: 1px solid #FDE68A;
	border-radius: 8px;
	padding: 9px 11px;
	font-size: 13px;
	line-height: 1.45;
	color: #78350F;
	margin: 8px 0;
	white-space: pre-wrap;
}

/* 2026-08-10: .d-rt-nav is gone, and so is the comment that stood here describing
   .d-rt-navall as "secondary because the per-stop Navigate is still the right
   button" — the per-stop Navigate was removed on 2026-08-04 and .d-rt-navall has
   been the primary button ever since. Both were left behind by that change. */

/* 2026-08-10: .d-rt-auto is gone with the three sentences that used it — "we will
   log your arrival automatically", "we can see you are here" and "from your
   position". Between them they explained the same rule once per stop, fourteen
   times down a phone screen. .d-rt-how below states it once, above the list. */

/* The rule, once. Above the stops rather than in them, and worded as a rule rather
   than as a status, because that is the difference between a line the driver reads
   on their first day and a line they have to re-read at every address. */
.d-rt-how {
	margin: 0;
	padding: 10px 16px 12px;
	border-bottom: 1px solid var(--d-border);
	background: var(--d-surface-sunk, #F1F3F7);
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--d-text-muted);
}
.d-rt-how strong { color: var(--d-text); font-weight: 600; }

/* A stop the office called off (§8.3, phase 5g). Kept on the list on purpose:
   a driver who memorised nine addresses and now counts eight has to work out
   which one went. Struck through, greyed and inert — there is nothing to press,
   because every button would be a way to make the drop by accident. */
.d-rt-stop-cx { opacity: 0.62; }
.d-rt-row-cx {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	width: 100%;
	padding: 13px 14px;
	text-align: left;
}
.d-rt-stop-cx .d-rt-name,
.d-rt-stop-cx .d-rt-addr { text-decoration: line-through; }
.d-rt-seq-cx {
	background: var(--d-surface-sunk, #F1F3F7);
	color: var(--d-text-fine);
	font-weight: 700;
}
.d-rt-cx {
	display: block;
	margin-top: 3px;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--d-text-muted);
	text-decoration: none;
}
.d-rt-cxwhy {
	display: block;
	font-weight: 400;
	font-style: italic;
	color: var(--d-text-fine);
}

/* No achievable time for this one yet (§8.3, phase 5g). Amber, like an added
   stop: it is news the driver needs, not a fault of his. */
.d-rt-eta-risk {
	font-size: 11px;
	font-weight: 700;
	color: #92400E;
	white-space: nowrap;
}
/* margin-left is the same correction as .d-rt-actions below: a full-width block in a
   body indented on one side only needs the indent taken back off, or it sits 58px
   from the left and 16px from the right. */
.d-rt-risk {
	margin: 9px 0 2px -42px;
	padding: 9px 11px;
	border-radius: 8px;
	background: #FEF3C7;
	color: #7C2D12;
	font-size: 12.5px;
	line-height: 1.45;
}

.d-rt-navall { width: 100%; margin-top: 12px; }
.d-rt-navallnote {
	margin: 6px 0 0;
	font-size: 11.5px;
	line-height: 1.45;
	color: var(--d-text-fine);
}

/* 2026-08-09 (§21): "I have a problem", under Navigate.
   Full width so it is a thumb target rather than a link to aim at, and quiet so it
   cannot be mistaken for the button the driver reaches for forty times a day. It has
   to be in the same place every morning — a driver looking for it has usually just
   had a bad minute — which is why it is up here and not at the foot of a list that
   might be fourteen stops long. */
/* 2026-08-10: was .d-btn-link, which is transparent with no border — so the one
   button on the screen for "I have crashed" read as a footnote under Navigate.
   Bordered now, and full width beneath Navigate so the pair reads as the two
   things you can do with the day. Still secondary, not primary: Navigate is what
   the driver reaches for forty times a shift and this is what they reach for
   twice a year, and that ordering has to survive being obvious. */
.d-rt-trouble {
	display: block;
	width: 100%;
	margin-top: 8px;
}

/* The three kinds. Stacked, full width, and in the order accident-vehicle-stuck:
   worst first, because the driver reading this is not reading carefully. */
.d-trouble-kinds { display: grid; gap: 8px; margin: 14px 0 4px; }
.d-trouble-kinds .d-btn { width: 100%; }

/* The only red in the driver app. Reserved for this one button: an accident is the
   single thing in here where being unmissable matters more than being calm. */
.d-btn-danger {
	background: #B91C1C;
	color: #fff;
}
.d-btn-danger:hover:not(:disabled) { background: #991B1B; }

/* .d-field only ever styled <input> — this is the portal's first textarea, and
   without it the box arrives unpadded and at the browser's default 13px, which on
   iOS also means the page zooms when it is focused. */
.d-field textarea {
	font: inherit;
	font-size: 16px;
	padding: 12px 14px;
	border: 1px solid var(--d-border);
	border-radius: 8px;
	background: #fff;
	color: var(--d-text);
	resize: vertical;
}
.d-field textarea:focus {
	outline: 2px solid var(--d-brand);
	outline-offset: -1px;
	border-color: var(--d-brand);
}
.d-field textarea::placeholder { color: #aaa; }

/* 2026-08-04: pulled back out of the body's left indent.
   .d-rt-body is inset 58px on the left so the detail lines up under the stop name
   rather than under its number — right for text, wrong for buttons, which ended up
   16px from the right edge of the card and 58px from the left and so read as pushed
   over rather than centred. -42px undoes the difference, leaving 16px on both sides,
   and justify-content centres whatever does not fill the row. */
/* Two buttons, side by side, centred, neither of them full width.
   2026-08-10: `flex: 1 1 auto` used to stretch whichever buttons were present
   across the whole row, so "Done" on its own was a 300px-wide bar as loud as
   Navigate at the top of the page — for the fallback that is only needed when
   the tracker fails. They are the same size as each other now and no larger
   than their text, which is also what puts them on one line.
   margin-left cancels the .d-rt-body indent: the body is padded 58px on the
   left and 16px on the right, so without this the pair centres 21px off. */
.d-rt-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 12px;
	margin-left: -42px;
}
.d-rt-actions .d-btn {
	flex: 0 1 auto;
	padding: 9px 16px;
	min-height: 42px;
	font-size: 14px;
}

.d-rt-foot {
	margin: 0;
	padding: 11px 16px 13px;
	border-top: 1px solid var(--d-border);
	text-align: center;
}
/* Reads as part of the sentence but is tapped like a button: the hit area is the
   full 44px, pulled back with negative margin so the footer stays one line high
   rather than growing a gap around it. */
.d-rt-changebtn {
	min-height: 44px;
	padding: 0 8px;
	margin: -13px 0;
	font-size: inherit;
	vertical-align: middle;
	text-decoration: underline;
}

.d-navpick { display: grid; gap: 8px; margin: 14px 0 4px; }