/* PTS Vehicle Hire — card vault demo. Brand: deep blue #0f6cb5, light blue #1ea6df (from ptsvehiclehire.co.uk logo). */

:root {
	--pts-blue: #0f6cb5;
	--pts-blue-dark: #0b5591;
	--pts-sky: #1ea6df;
	--ink: #1c2733;
	--muted: #5c6b7a;
	--line: #dde5ec;
	--bg: #f4f8fb;
	--card: #ffffff;
	--green: #157a3b;
	--green-bg: #e2f4e8;
	--red: #b42318;
	--red-bg: #fdebe9;
	--amber: #92600a;
	--amber-bg: #fdf2da;
	--blue-bg: #e3f1fb;
	--grey-bg: #eef1f4;
	--radius: 10px;

	/* Spacing on a 4px rhythm. Before this the file used every whole pixel
	   from 1 to 14 plus eight larger values — 23 in all, none of them a
	   decision. Structural measures (the 38px counter clearance, the 56px
	   page foot, the 92px ledger indent, the visually-hidden clip) stay
	   literal: they answer to a component, not to the rhythm. */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 20px;
	--sp-6: 24px;
	--sp-8: 32px;

	/* Type scale — seven steps. Anything between them is a decision nobody
	   can see: 0.82rem and 0.83rem are the same 13px on screen. */
	--fs-xs: 0.75rem;     /* 12px  badges, pills, micro-labels */
	--fs-sm: 0.8125rem;   /* 13px  fine print, table headers, dense labels */
	--fs-md: 0.875rem;    /* 14px  dense staff UI: table cells, buttons, nav */
	--fs-base: 1rem;      /* 16px  body copy and form controls */
	--fs-lg: 1.125rem;    /* 18px  lead paragraph, card headings */
	--fs-xl: 1.25rem;     /* 20px  section and page-section headings */
	--fs-2xl: 1.5rem;     /* 24px  page h1 */

	/* Weight. 500 is the one that was missing: labels used to reach for 700
	   because there was nothing between 400 and bold. 700 is reserved for
	   the single most important thing on a page. */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semi: 600;
	--fw-bold: 700;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ink);
	background: var(--bg);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	display: flex;
	min-height: 100vh;
	flex-direction: column;
}

.container { max-width: 880px; margin: 0 auto; padding: 0 var(--sp-5); width: 100%; }
.main-content { flex: 1; padding-top: var(--sp-8); padding-bottom: 56px; }

/* Header / footer */
.site-header { background: #fff; border-bottom: 3px solid var(--pts-blue); }
.header-inner { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
.logo { height: 44px; width: auto; display: block; }
.header-meta { margin-left: auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-1); }
.header-tag { color: var(--muted); font-size: var(--fs-md); }
/* .badge sets white-space: nowrap and is later in the file, so this override
   needs the extra specificity or the notice runs off a narrow screen. */
.header-meta .header-mode { white-space: normal; text-align: right; letter-spacing: 0.04em; }
.site-footer { text-align: center; background: #fff; border-top: 1px solid var(--line); padding: var(--sp-5) 0; font-size: var(--fs-sm); color: var(--muted); }
.site-footer p { margin: var(--sp-1) 0; }
.demo-note { color: var(--pts-sky); font-weight: var(--fw-semi); }

/* Typography */
h1, h2, h3, h4 { font-weight: var(--fw-semi); line-height: 1.25; letter-spacing: -0.015em; }
strong, b { font-weight: var(--fw-semi); }
/* Money and dates must not jitter between rows. */
.hire-table, .statement-table, .charge-amount, .ledger-summary, .instalment-number { font-variant-numeric: tabular-nums; }
h1 { font-size: var(--fs-2xl); margin: 0 0 var(--sp-3); }
.lead { font-size: var(--fs-lg); color: var(--ink); }
.muted { color: var(--muted); font-size: var(--fs-md); margin: var(--sp-1) 0 0; }
.optional { color: var(--muted); font-weight: var(--fw-normal); font-size: var(--fs-sm); }
.fine-print { color: var(--muted); font-size: var(--fs-sm); }

/* Hero / result pages */
.hero, .result-page, .form-page { max-width: 560px; margin: var(--sp-6) auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-8); }
.benefits { padding-left: var(--sp-5); margin: var(--sp-5) 0 var(--sp-6); }

/* Front door — the two-audience landing on "/". It carries its own card
   rather than reusing .hero because it is wider than a single column of
   prose: the two doors sit side by side above 560px and stack below it. */
.front-door { max-width: 720px; margin: var(--sp-6) auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-8); }
.door-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0; }
.door { display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-5); border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg); }
.door h2 { margin: 0; font-size: var(--fs-lg); }
.door p { margin: 0; font-size: var(--fs-md); }
/* Both doors' buttons sit on the same line however unequal the copy above. */
.door .btn { margin-top: auto; text-align: center; }
.front-door h2.front-door-steps-heading { font-size: var(--fs-lg); margin: var(--sp-6) 0 var(--sp-3); }
/* "How a hire runs" is two lanes, because the thing that confuses people about
   this system is who does what: PTS staff create and settle, the hirer answers
   the one-use links staff send them. Each lane flows on its own rather than
   sharing rows with the other — row-locked lanes leave a dead cell opposite
   every step, and ownership alternates unevenly enough (1 · 2 3 4 · 5 · 6 · 7 8)
   that the holes read as a mistake. Split four and four, both columns fill, and
   the numbers carry the running order instead of the vertical position. */
.front-door .flow-note { margin: 0 0 var(--sp-3); }
.flow-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.flow-lane { display: flex; flex-direction: column; gap: var(--sp-2); }
.lane-head { margin: 0; padding: var(--sp-2) var(--sp-3); border-radius: 6px; text-align: center; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.06em; text-transform: uppercase; }
.flow-lane-pts .lane-head { background: var(--pts-blue); color: #fff; }
.flow-lane-hirer .lane-head { background: var(--green); color: #fff; }
.flow-steps { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.flow-steps li { position: relative; padding: var(--sp-3) var(--sp-4) var(--sp-3) 42px; border-radius: 8px; font-size: var(--fs-md); }
/* The number is written into the markup, not counted: within a lane the steps
   run 1, 5, 7, 8, so a CSS counter would number them 1 to 4 and lie. */
.step-no { position: absolute; left: var(--sp-2); top: var(--sp-3); width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: var(--fw-semi); font-size: var(--fs-sm); }
.flow-lane-pts li { background: var(--blue-bg); }
.flow-lane-pts .step-no { background: var(--pts-blue); color: #fff; }
.flow-lane-hirer li { background: var(--green-bg); }
.flow-lane-hirer .step-no { background: var(--green); color: #fff; }
.benefits li { margin-bottom: var(--sp-2); }
.result-page { text-align: center; }
.result-icon { width: 64px; height: 64px; border-radius: 50%; margin: var(--sp-2) auto var(--sp-5); display: flex; align-items: center; justify-content: center; font-size: 2rem; }
.result-icon.success { background: var(--green-bg); color: var(--green); }

/* Forms */
form label { display: block; margin-bottom: var(--sp-4); font-weight: var(--fw-medium); font-size: var(--fs-md); }
form label .fine-print { display: block; margin-top: var(--sp-1); font-weight: var(--fw-normal); }
form input[type="text"], form input[type="email"], form input[type="tel"], form input[type="date"], form input[type="number"], form select, form textarea {
	display: block; width: 100%; margin-top: var(--sp-1); padding: var(--sp-3) var(--sp-3); font-size: var(--fs-base);
	border: 1px solid var(--line); border-radius: 6px; background: #fff; color: var(--ink);
}
form textarea { font-family: inherit; line-height: 1.5; resize: vertical; }
form fieldset:disabled input, form fieldset:disabled select, form fieldset:disabled textarea { background: var(--grey-bg); color: var(--muted); }
form input:focus { outline: 2px solid var(--pts-sky); outline-offset: 1px; border-color: var(--pts-sky); }
form select:focus, form textarea:focus { outline: 2px solid var(--pts-sky); outline-offset: 1px; border-color: var(--pts-sky); }
form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
form legend { margin-bottom: var(--sp-1); font-weight: var(--fw-semi); font-size: var(--fs-base); }

/* Buttons */
.btn { display: inline-block; border: none; cursor: pointer; font-weight: var(--fw-semi); border-radius: 6px; text-decoration: none; font-size: var(--fs-md); padding: var(--sp-3) var(--sp-5); transition: background 0.15s; }
.btn-primary { background: var(--pts-blue); color: #fff; }
.btn-primary:hover { background: var(--pts-blue-dark); }
.btn-primary:disabled { background: var(--muted); cursor: wait; }
.btn-lg { padding: var(--sp-3) var(--sp-6); font-size: var(--fs-base); }
.btn-ghost { background: #fff; color: var(--pts-blue); border: 1px solid var(--pts-blue); }
.btn-ghost:hover { background: var(--blue-bg); }
.btn-ghost:disabled { color: var(--muted); border-color: var(--muted); background: #fff; cursor: not-allowed; }
.btn-sm { padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); }
.btn-chip { background: var(--blue-bg); color: var(--pts-blue-dark); border: 1px solid #bcdcf2; padding: var(--sp-1) var(--sp-3); font-size: var(--fs-sm); font-weight: var(--fw-medium); border-radius: 999px; }
.btn-chip:hover { background: #d1e9f8; }

/* Flash messages */
.flash { padding: var(--sp-3) var(--sp-4); border-radius: 6px; font-weight: var(--fw-semi); font-size: var(--fs-md); margin: 0 0 var(--sp-4); }
.flash-success { background: var(--green-bg); color: var(--green); }
.flash-error { background: var(--red-bg); color: var(--red); }

/* Staff page */
.staff-page h1 { margin: 0; }
.staff-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-6); margin-bottom: var(--sp-5); }
.staff-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.staff-actions .btn { white-space: nowrap; }
/* The hire's status sits at the end of the driver line, so it needs its own
   gap: templ collapses the whitespace around it. */
.staff-header .muted .badge { margin-left: var(--sp-2); }
.new-driver { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); margin-bottom: var(--sp-5); }
.new-driver summary { font-weight: var(--fw-semi); cursor: pointer; }
.inline-form { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; margin-top: var(--sp-4); }
.inline-form label { flex: 1 1 160px; margin-bottom: 0; }
.inline-form .check-label { flex: 0 0 auto; display: flex; align-items: center; gap: var(--sp-2); padding-bottom: var(--sp-3); }
.inline-form .check-label input { width: auto; margin: 0; }
.inline-form button[type="submit"] { flex: 0 0 auto; }

/* Driver cards */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--sp-5) var(--sp-5); margin-bottom: var(--sp-4); }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.card-head h3 { margin: 0; font-size: var(--fs-lg); }
.card-meta { color: var(--muted); font-size: var(--fs-md); margin: var(--sp-2) 0 var(--sp-3); text-transform: capitalize; }
.empty-state { color: var(--muted); text-align: center; padding: var(--sp-8) 0; }

/* Badges */
.badge { display: inline-block; padding: var(--sp-1) var(--sp-3); border-radius: 999px; font-size: var(--fs-xs); font-weight: var(--fw-semi); white-space: nowrap; }
.badge-green { background: var(--green-bg); color: var(--green); }
.badge-red { background: var(--red-bg); color: var(--red); }
.badge-amber { background: var(--amber-bg); color: var(--amber); }
.badge-blue { background: var(--blue-bg); color: var(--pts-blue-dark); }
.badge-grey { background: var(--grey-bg); color: var(--muted); }

/* Link panel */
.link-panel { border-top: 1px dashed var(--line); margin-top: var(--sp-3); padding-top: var(--sp-3); }
.link-label, .charges-label, .presets-label { font-weight: var(--fw-medium); font-size: var(--fs-sm); margin: 0 0 var(--sp-2); }
.link-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.link-row input { flex: 1 1 260px; padding: var(--sp-2) var(--sp-3); font-size: var(--fs-sm); border: 1px solid var(--line); border-radius: 6px; color: var(--muted); background: var(--bg); }
.qr-details { margin-top: var(--sp-3); }
.qr-details summary { font-size: var(--fs-sm); color: var(--pts-blue); cursor: pointer; }
.qr { margin-top: var(--sp-3); border: 1px solid var(--line); border-radius: 6px; }

/* Charge form */
.charge-form { border-top: 1px dashed var(--line); margin-top: var(--sp-1); padding-top: var(--sp-3); }
.presets { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; margin-bottom: var(--sp-3); }
.charge-inputs { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.charge-inputs label { flex: 0 1 140px; margin-bottom: 0; font-size: var(--fs-sm); }
.charge-inputs label:nth-child(2) { flex: 1 1 260px; }
.charge-inputs button { flex: 0 0 auto; }

/* Charge history */
.charges { border-top: 1px dashed var(--line); margin-top: var(--sp-4); padding-top: var(--sp-3); }
.charges ul { list-style: none; margin: 0; padding: 0; }
.charge-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--bg); font-size: var(--fs-md); }
.charge-amount { font-weight: var(--fw-semi); min-width: 72px; }
.charge-desc { flex: 1 1 200px; }

/* Local V2 data-foundation preview */
.eyebrow { margin: 0 0 var(--sp-1); color: var(--pts-blue); font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.08em; text-transform: uppercase; }
.preview-card h2 { margin: 0; font-size: var(--fs-xl); }
.preview-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); margin-top: var(--sp-5); align-items: start; }
.preview-section { border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-4); background: #fbfdff; }
.preview-section h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); }
.preview-section dl { margin: 0; }
.preview-section dl div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--bg); }
.preview-section dt { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.preview-section dd { margin: 0; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }
.schedule-section { margin-top: var(--sp-4); }
.schedule-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.schedule-summary { margin: 0 0 var(--sp-4); }
.instalment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.instalment { display: grid; grid-template-columns: 28px 1fr auto; gap: var(--sp-2); align-items: center; padding: var(--sp-2) var(--sp-3); border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); }
.instalment-number { color: var(--pts-blue); font-weight: var(--fw-semi); }
.preview-notice { background: var(--amber-bg); color: var(--amber); border: 1px solid #eed18d; border-radius: var(--radius); padding: var(--sp-5); }
.preview-notice p { margin-bottom: 0; }
.ledger-section { margin-top: var(--sp-4); }
.ledger-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-4) 0; }
.ledger-summary div { display: flex; flex-direction: column; gap: var(--sp-1); background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: var(--sp-3); }
.ledger-summary span { color: var(--muted); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.ledger-summary strong { font-size: var(--fs-lg); }
.ledger-list { display: grid; gap: var(--sp-2); }
.ledger-row { background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: var(--sp-3); }
.ledger-main { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: var(--sp-3); align-items: start; }
.ledger-main .badge { text-align: center; }
.ledger-main p { margin: 1px 0 0; }
.ledger-posted { display: inline-block; margin: var(--sp-2) 0 0 92px; color: var(--green); font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.pay-link { display: grid; gap: var(--sp-1); margin: var(--sp-2) 0 0 92px; padding: var(--sp-3); border-radius: 6px; background: var(--amber-bg); color: var(--amber); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.schedule-head-actions { display: flex; align-items: center; gap: var(--sp-3); }
.statement-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.statement-table { width: 100%; border-collapse: collapse; margin: var(--sp-4) 0; font-size: var(--fs-sm); }
.statement-table th, .statement-table td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); vertical-align: top; }
.statement-table th.num, .statement-table td.num { text-align: right; white-space: nowrap; }
.statement-table td.mono { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.deposit-return-form { margin-top: var(--sp-3); }
.deposit-return { display: grid; gap: var(--sp-1); margin-top: var(--sp-3); padding: var(--sp-3); border-radius: 6px; background: #fff; border: 1px solid var(--line); font-size: var(--fs-sm); }
.deposit-return p { margin: 0; }
.attention-card { margin-bottom: var(--sp-4); }
.attention-card h2 { margin: 0; font-size: var(--fs-xl); }
.attention-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.attention-row { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; background: #fff; border: 1px solid var(--line); border-radius: 7px; padding: var(--sp-3); }
.attention-row .badge { text-align: center; }
.attention-main { display: grid; gap: var(--sp-1); overflow-wrap: anywhere; }
.attention-main p { margin: 0; }
.access-preview { margin-top: var(--sp-4); }
.access-preview h2 { margin: 0; font-size: var(--fs-xl); }
.staff-user-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); margin: var(--sp-5) 0; }
.staff-user-card { display: grid; gap: var(--sp-3); background: #fbfdff; border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-4); }
.staff-user-card p { margin: 0; }
.role-list { display: flex; flex-wrap: wrap; gap: var(--sp-1); }
.identity-subject { display: grid; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.audit-preview { border-top: 1px dashed var(--line); padding-top: var(--sp-4); }
.audit-preview h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-base); }
.audit-row { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: var(--sp-3); align-items: start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--bg); }
.audit-row .badge { text-align: center; text-transform: capitalize; }
.audit-row p { margin: var(--sp-1) 0 0; font-size: var(--fs-sm); }
.jobs-preview { margin-top: var(--sp-4); }
.jobs-preview h2 { margin: 0; font-size: var(--fs-xl); }
.job-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.job-card { display: grid; align-content: start; gap: var(--sp-3); background: #fbfdff; border: 1px solid var(--line); border-radius: 8px; padding: var(--sp-4); }
.job-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-3); }
.job-card-head .eyebrow { margin-bottom: var(--sp-1); }
.job-timeline { display: grid; gap: var(--sp-1); padding-top: var(--sp-2); border-top: 1px dashed var(--line); }
.job-event { display: grid; grid-template-columns: 102px 70px minmax(0, 1fr); gap: var(--sp-2); align-items: center; font-size: var(--fs-xs); }
.job-event .badge { text-align: center; }
.job-event code { overflow-wrap: anywhere; color: var(--red); }
.notification-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); margin-top: var(--sp-1); padding: var(--sp-3); border-radius: 7px; background: #fff; border: 1px solid var(--line); }
.notification-card p { margin: var(--sp-1) 0 0; }
.notification-events { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--sp-1); color: var(--muted); font-size: var(--fs-xs); }
.notification-events span { padding: var(--sp-1) var(--sp-2); border-radius: 4px; background: var(--bg); }
.retry-explainer { display: flex; gap: var(--sp-2); margin-top: var(--sp-3); padding: var(--sp-3) var(--sp-3); border-radius: 7px; background: var(--green-bg); color: var(--green); font-size: var(--fs-sm); }
.search-preview { margin-top: var(--sp-4); }
.search-preview h2 { margin: 0; font-size: var(--fs-xl); }
.search-readiness-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-5); }
.search-readiness-grid > div { padding: var(--sp-4); background: #fbfdff; border: 1px solid var(--line); border-radius: 8px; }
.search-readiness-grid h3 { margin: 0 0 var(--sp-3); font-size: var(--fs-md); }
.readiness-chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.readiness-chips span { padding: var(--sp-1) var(--sp-2); color: var(--pts-blue); background: var(--blue-bg); border-radius: 5px; font-size: var(--fs-xs); font-weight: var(--fw-medium); }
.search-proof { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); align-items: start; margin-top: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--line); border-radius: 8px; }
.search-proof p { margin-bottom: 0; }
.search-result { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) auto auto; gap: var(--sp-2); align-items: center; padding-top: var(--sp-3); border-top: 1px dashed var(--line); font-size: var(--fs-sm); }
.driver-details-summary { margin-top: var(--sp-5); }
.driver-details-summary .schedule-head { align-items: flex-start; }
.driver-details-summary .schedule-head p { margin: var(--sp-1) 0 0; }
.driver-details-summary > .muted { margin-top: var(--sp-3); }
.driver-details-summary > .btn { margin-top: var(--sp-3); }
.driver-details-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-5); margin: var(--sp-4) 0 var(--sp-1) !important; }
.hire-context { display: grid; grid-template-columns: minmax(180px, 0.7fr) minmax(0, 1.3fr); gap: var(--sp-5); align-items: start; margin-bottom: var(--sp-4); }
.hire-context h2 { margin: 0; font-size: var(--fs-xl); }
.hire-context dl { margin: 0; }
.hire-context dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-1) 0; border-bottom: 1px solid var(--bg); }
.hire-context dt { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.hire-context dd { margin: 0; font-size: var(--fs-sm); }
.choice-row { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--sp-3); align-items: start; margin: var(--sp-3) 0 0; font-weight: var(--fw-normal); }
.choice-row input { width: auto; margin: var(--sp-1) 0 0; }
.v2-hire-form { display: grid; gap: var(--sp-5); }
.v2-hire-form .fine-print { margin: 0 0 var(--sp-3); }
.v2-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--sp-4); }
.v2-form-grid label { min-width: 0; }
/* Payment-plan figures sit three to a row, top-aligned, so a hint under one
   field never pushes its neighbours out of line. The hint's own bottom margin
   (from .v2-hire-form .fine-print) is dropped for the same reason. */
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 var(--sp-4); align-items: start; }
.plan-grid label { min-width: 0; }
.plan-grid label .fine-print { margin: var(--sp-1) 0 0; }
.plan-grid-wide { grid-column: 1 / -1; }
/* Settings: each group is a row — its name and purpose on the left, its
   fields on the right — divided by a rule rather than boxed in its own card. */
.settings-section { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-6); padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.settings-section:first-of-type { padding-top: 0; border-top: 0; }
.settings-intro h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-base); }
.settings-intro .fine-print { margin: 0; }
.settings-history summary { font-size: var(--fs-lg); font-weight: var(--fw-semi); cursor: pointer; }
.settings-history[open] summary { margin-bottom: var(--sp-3); }
.v2-form-actions { display: flex; align-items: center; gap: var(--sp-4); padding-top: var(--sp-1); border-top: 1px solid var(--line); }
.v2-form-actions .btn { flex: 0 0 auto; white-space: nowrap; }
.v2-form-actions .fine-print { margin: 0; }
.agreement-review-document { margin-bottom: var(--sp-4); }
.agreement-review-document header { padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); }
.agreement-review-document h2 { margin-bottom: var(--sp-2); }
.agreement-review-document .mono { overflow-wrap: anywhere; }
.agreement-wording { margin-top: var(--sp-5); max-width: 70ch; white-space: pre-wrap; overflow: visible; max-height: none; color: var(--text); line-height: 1.7; }
.agreement-acceptance-form { display: grid; gap: var(--sp-4); }
.agreement-acceptance-form h2 { margin: 0; }
.agreement-review-confirmation { margin: 0; padding: var(--sp-4); border: 2px solid #d69e2e; border-radius: 8px; background: #fffdf6; }

/* Stage 7: staff navigation — a tab strip between the site header and the page title. */
.v2-nav { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0 var(--sp-1); margin: -10px 0 var(--sp-6); border-bottom: 1px solid var(--line); }
.v2-nav-link { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3) var(--sp-3); margin-bottom: -1px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: var(--fw-medium); font-size: var(--fs-md); letter-spacing: 0.01em; text-decoration: none; white-space: nowrap; transition: color 120ms ease, border-color 120ms ease; }
.v2-nav-link:first-child { padding-left: 0; }
.v2-nav-link:hover { color: var(--pts-blue-dark); border-bottom-color: #bcdcf2; }
.v2-nav-link:focus-visible { outline: 2px solid var(--pts-sky); outline-offset: -2px; border-radius: 4px; }
.v2-nav-active, .v2-nav-active:hover { color: var(--pts-blue-dark); border-bottom-color: var(--pts-blue); font-weight: var(--fw-semi); }
.nav-count { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--amber-bg); color: var(--amber); font-size: var(--fs-xs); line-height: 1.4; text-align: center; }
/* Hire list and Needs attention view */
.hire-search { display: grid; gap: var(--sp-3); }
.hire-search-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--sp-3); align-items: center; }
.hire-search-row label { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.hire-search-row input[type="search"] { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-base); }
.hire-filters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.hire-filters label { display: grid; gap: var(--sp-1); font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.hire-filters select { padding: var(--sp-2) var(--sp-2); border: 1px solid var(--line); border-radius: 6px; font-size: var(--fs-sm); font-weight: var(--fw-normal); background: #fff; }
.hire-search .fine-print { margin: 0; }
.hire-results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin: var(--sp-5) 0 var(--sp-3); }
.hire-results-head h2 { margin: 0; font-size: var(--fs-lg); }
/* Staff screens get a wider canvas than the driver-facing pages (tables). */
body:has(.staff-page) .container { max-width: 1160px; }
.nowrap { white-space: nowrap; }
.table-scroll { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.hire-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.hire-table th, .hire-table td { text-align: left; padding: var(--sp-3) var(--sp-3); border-bottom: 1px solid var(--line); vertical-align: top; }
.hire-table th { background: #fbfdff; font-size: var(--fs-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.hire-table tbody tr:last-child td { border-bottom: none; }
.hire-table a { color: var(--pts-blue-dark); }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.attention-actions { display: grid; gap: var(--sp-2); justify-items: stretch; }
.attention-main a { color: var(--pts-blue-dark); }
.v2-attention .staff-actions { align-items: center; flex-wrap: nowrap; gap: var(--sp-3); }
.v2-attention .staff-header .muted { max-width: 70ch; margin-top: var(--sp-2); line-height: 1.5; }
.attention-reasons { padding-left: var(--sp-5); }
.attention-reasons li { margin-top: var(--sp-1); }

@media (max-width: 640px) {
	.header-tag { display: none; }
	/* Two lanes will not hold a sentence each below 640px, so they stack. Each
	   keeps its own heading, so who does what survives the loss of the columns. */
	.flow-lanes { grid-template-columns: 1fr; gap: var(--sp-5); }
	.hero, .result-page, .form-page { padding: var(--sp-5); }
	.staff-header { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
	.preview-grid, .instalment-grid { grid-template-columns: 1fr; }
	.ledger-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ledger-main { grid-template-columns: 1fr; }
	.ledger-posted, .pay-link { margin-left: 0; }
	.attention-row { grid-template-columns: 1fr; }
	.hire-search-row { grid-template-columns: 1fr; }
	.hire-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.staff-user-grid { grid-template-columns: 1fr; }
	.audit-row { grid-template-columns: 1fr; }
	.job-grid { grid-template-columns: 1fr; }
	.job-event { grid-template-columns: 1fr; }
	.retry-explainer { flex-direction: column; }
	.search-readiness-grid, .search-result, .v2-form-grid, .plan-grid, .settings-section, .driver-details-grid, .hire-context { grid-template-columns: 1fr; }
	.settings-section { gap: var(--sp-3); }
	.v2-form-actions { align-items: flex-start; flex-direction: column; }
	/* Stacked, a long label such as the pay link's must wrap, not run past the card. */
	.v2-form-actions .btn { white-space: normal; max-width: 100%; }
}

/* ─── Staff sign-in, access management, audit trail (Stage 8) ─── */
.staff-bar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); padding-top: var(--sp-2); padding-bottom: var(--sp-3); font-size: var(--fs-sm); color: var(--muted); }
.staff-bar strong { color: var(--text, #1c2b39); }
.staff-bar .muted { font-size: var(--fs-sm); }
.staff-bar-link { font-weight: var(--fw-medium); color: var(--pts-blue-dark); }

/* Account menu: an avatar disclosure holding the identity, its roles, what
   those roles refuse, and sign out. */
.account-menu { position: relative; margin-left: auto; }
.account-menu-trigger { display: inline-flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) var(--sp-2) var(--sp-1) var(--sp-1); border: 1px solid transparent; border-radius: 999px; cursor: pointer; list-style: none; }
.account-menu-trigger::-webkit-details-marker { display: none; }
.account-menu-trigger:hover, .account-menu[open] .account-menu-trigger { border-color: var(--line); background: var(--card); }
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--pts-blue); color: #fff; font-size: var(--fs-xs); font-weight: var(--fw-semi); letter-spacing: 0.03em; }
.avatar-shared { background: var(--amber); }
.account-menu-label { font-weight: var(--fw-medium); color: var(--ink); }
.account-menu-caret { font-size: 0.6rem; color: var(--muted); }
.account-menu-panel { position: absolute; right: 0; z-index: 20; min-width: 260px; max-width: min(340px, calc(100vw - 32px)); margin-top: var(--sp-2); padding: var(--sp-4) var(--sp-4); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(28, 39, 51, 0.14); }
.account-menu-name { margin: 0; font-size: var(--fs-md); }
.account-menu-email { margin: var(--sp-1) 0 var(--sp-3); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.account-menu-panel .role-list { margin-bottom: var(--sp-3); }
.account-menu-signout { margin-top: var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); width: 100%; }

/* What a set of roles actually permits — role names alone hide the gap. */
.capability { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-2); margin: var(--sp-2) 0 0; font-size: var(--fs-xs); line-height: 1.45; color: var(--muted); }
.capability span { flex: none; font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.04em; font-size: var(--fs-xs); padding: 1px 6px; border-radius: 999px; }
.capability-can span { background: var(--green-bg); color: var(--green); }
.capability-cannot span { background: var(--red-bg); color: var(--red); }
/* Sign-in, set-password and the staff message pages are one 520px column
   inside the 1160px staff canvas, so without centring they sit against the
   left edge of a page that is otherwise empty. */
.narrow-page { max-width: 520px; margin-inline: auto; }
.auth-form { display: grid; gap: var(--sp-4); }
.auth-form label { display: grid; gap: var(--sp-1); font-weight: var(--fw-medium); font-size: var(--fs-md); }
.auth-form input { font: inherit; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: 6px; }
.flash-warn { background: var(--amber-bg); color: var(--amber); }
.invite-card { border-color: var(--pts-blue); }
.invite-url { overflow-wrap: anywhere; user-select: all; font-size: var(--fs-sm); margin: var(--sp-2) 0; }
/* Small one-action forms (role grant/revoke, links, sign-out); V1's .inline-form is left to the driver form. */
.mini-form { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); margin: 0; }
.mini-form select { display: inline-block; width: auto; margin: 0; font: inherit; font-size: var(--fs-sm); padding: var(--sp-1) var(--sp-2); border: 1px solid var(--line); border-radius: 6px; }
.access-list { display: grid; gap: var(--sp-3); }
.access-empty { margin: 0; }
.access-card { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--sp-3) var(--sp-5); padding: var(--sp-4) var(--sp-4); }
.access-name { margin: 0 0 var(--sp-2); font-size: var(--fs-md); overflow-wrap: anywhere; }
.access-name .muted { font-weight: var(--fw-normal); margin-left: var(--sp-1); }
.access-signin .fine-print { margin: var(--sp-1) 0 0; }
.access-controls { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); padding-top: var(--sp-3); border-top: 1px solid var(--line); }
.access-controls .mini-form:nth-child(2) { margin-left: auto; }
.inline-label { margin-right: var(--sp-1); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--muted); }
.role-table-head { margin: var(--sp-2) 0 var(--sp-2); font-weight: var(--fw-medium); font-size: var(--fs-md); }
.role-table { border: 1px solid var(--line); border-radius: 6px; margin-bottom: var(--sp-4); }
form label.role-row { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--sp-4); align-items: baseline; margin: 0; padding: var(--sp-3) var(--sp-4); cursor: pointer; }
.role-row + .role-row { border-top: 1px solid var(--line); }
.role-row:hover { background: var(--blue-bg); }
.role-pick { display: flex; align-items: center; gap: var(--sp-2); font-weight: var(--fw-semi); }
.role-pick input { margin: 0; }
.role-desc { color: var(--muted); font-size: var(--fs-sm); font-weight: var(--fw-normal); line-height: 1.5; }
.audit-table td.mono { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.audit-ranges { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.audit-count { margin: 0 0 var(--sp-2); }
.sort-btn { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: var(--sp-1); }
.sort-btn:hover { color: var(--pts-blue-dark); }
.sort-btn:focus-visible { outline: 2px solid var(--pts-sky); outline-offset: 2px; }
.sort-btn::after { content: "\2195"; opacity: 0.35; }
th[aria-sort="ascending"] .sort-btn::after { content: "\2191"; opacity: 1; }
th[aria-sort="descending"] .sort-btn::after { content: "\2193"; opacity: 1; }
.access-create { margin-top: 0; margin-bottom: var(--sp-5); }
.access-intro { margin: var(--sp-2) 0 0; padding-left: var(--sp-5); line-height: 1.5; }
.access-intro li { margin: 0; }
.access-search { margin-bottom: var(--sp-4); }
.access-search summary { font-weight: var(--fw-semi); cursor: pointer; }
.access-search[open] summary { margin-bottom: var(--sp-3); }
.access-search-note { margin: var(--sp-3) 0 0; }
.access-card[hidden] { display: none; }
/* Destructive actions stay folded away until deliberately opened. */
.danger-zone { margin-top: var(--sp-4); padding-top: var(--sp-3); border-top: 1px dashed var(--line); }
.danger-zone summary { color: var(--red); font-weight: var(--fw-semi); font-size: var(--fs-sm); cursor: pointer; }
.danger-zone .fine-print { margin: var(--sp-2) 0 var(--sp-3); }
.btn-danger { background: #fff; color: var(--red); border: 1px solid var(--red); }
.danger-zone label { max-width: 520px; }
.cancelled-note { border-color: var(--red); background: var(--red-bg); }
.cancelled-note h3 { margin-top: 0; color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.mode-badge { letter-spacing: 0.04em; }
.live-note { color: var(--red); font-weight: var(--fw-semi); }

@media (max-width: 640px) {
	.access-card { grid-template-columns: 1fr; }
	form label.role-row { grid-template-columns: 1fr; gap: var(--sp-1); }
	.access-controls .mini-form:nth-child(2) { margin-left: 0; }
}

/* ─── Hire next step: how far the hire has got and the one action that
   advances it. The only element on the page carrying this much weight, so the
   eye lands on it before the sections that merely report state. ─── */
.next-step { margin: var(--sp-5) 0; padding: var(--sp-5) var(--sp-5) var(--sp-5); border: 1px solid #cfe1f1; border-left: 3px solid var(--pts-blue); border-radius: 8px; background: linear-gradient(180deg, #f1f7fd 0%, #fbfdff 100%); }
.next-step h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-xl); letter-spacing: -0.01em; }
.next-step .fine-print { margin: 0; max-width: 68ch; }
.next-step form { margin: var(--sp-4) 0 0; }
.next-step-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.next-step-actions + .fine-print { margin-top: var(--sp-3); }
.next-step-blocked { border-color: #eed18d; border-left-color: var(--amber); background: linear-gradient(180deg, var(--amber-bg) 0%, #fffdf8 100%); }
.next-step-blocked .eyebrow { color: var(--amber); }

.workflow { display: flex; margin: 0 0 var(--sp-5); padding: 0; list-style: none; counter-reset: workflow; }
.workflow-step { position: relative; flex: 1 1 0; min-width: 88px; display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); counter-increment: workflow; }
.workflow-step::before { content: ""; position: absolute; left: 8px; right: 0; top: 8px; height: 2px; background: var(--line); }
.workflow-step:last-child::before { display: none; }
.workflow-mark { position: relative; z-index: 1; width: 17px; height: 17px; border-radius: 50%; border: 2px solid var(--line); background: #fff; display: grid; place-items: center; }
.workflow-mark::after { content: counter(workflow); color: var(--muted); font-size: 0.6rem; font-weight: var(--fw-semi); line-height: 1; }
.workflow-label { font-size: var(--fs-xs); line-height: 1.3; color: var(--muted); padding-right: var(--sp-3); }
.workflow-step.is-reached::before { background: var(--green); }
.is-done .workflow-mark { border-color: var(--green); background: var(--green); }
.is-done .workflow-mark::after { content: "✓"; color: #fff; font-size: 0.66rem; }
.is-done .workflow-label { color: var(--ink); }
.is-current .workflow-mark { border-color: var(--pts-blue); box-shadow: 0 0 0 3px rgba(15, 108, 181, 0.15); }
.is-current .workflow-mark::after { color: var(--pts-blue); }
.is-current .workflow-label { color: var(--pts-blue); font-weight: var(--fw-bold); }

.card-on-file { margin-top: var(--sp-4); }

/* A section with nothing in it is not rendered at all; one line names them
   together, so what has not started takes one row instead of four boxes. */
.not-started { margin: var(--sp-5) 0 0; padding: var(--sp-3) var(--sp-4); border: 1px dashed var(--line); border-radius: 8px; color: var(--muted); font-size: var(--fs-sm); }

@media (max-width: 640px) {
	.workflow { flex-wrap: wrap; gap: var(--sp-3) 0; }
	.workflow-step { flex: 1 1 50%; min-width: 0; }
	.workflow-step::before { display: none; }
	.next-step { padding: var(--sp-4); }
}