/* Relocate — front end */

/* Tokens live on .reloc-form itself, not on the wrapper.
 *
 * They used to be scoped to .reloc-form-wrap. The portal renders its forms
 * OUTSIDE that wrapper — so every var() in there resolved to nothing, and
 * `border: 1px solid var(--reloc-line)` became an invalid declaration that the
 * browser simply dropped. The fields had no borders at all, and the cause was
 * three levels away in a selector nobody would think to look at.
 *
 * A token that only works inside one ancestor is a trap. Put them where they
 * are used. */
/* And the trap sprang again: the lead panel is not in the list below, so
 * `background: var(--reloc-accent)` on its buttons resolved to nothing while
 * `color: #fff` still applied — white text on a white dialog. Invisible
 * buttons. Tokens now start at :root so a new component cannot miss them; the
 * scoped list stays for anything relying on the override. */
:root,
.reloc-form-wrap,
.reloc-form,
.reloc-app,
.reloc-legal,
.reloc-consent,
.reloc-leadcal,
.reloc-lead-panel,
.reloc-portal {
	--reloc-ink: #16202b;
	--reloc-muted: #5d6b7a;
	--reloc-line: #dfe4ea;
	--reloc-line-strong: #c4ccd3;
	--reloc-accent: #1f6f5c;
	--reloc-accent-soft: #eaf3f0;
	--reloc-bg: #fff;
	--reloc-line-soft: #eef1f4;
}

.reloc-form-wrap {
	max-width: 780px;
	margin: 0 auto;
	color: var(--reloc-ink);
}

.reloc-form {
	background: var(--reloc-bg);
	border: 1px solid var(--reloc-line);
	border-radius: 10px;
	padding: 28px;
}

.reloc-form__title {
	margin: 0 0 6px;
	font-size: 1.6rem;
	line-height: 1.2;
}

.reloc-form__lede {
	margin: 0 0 20px;
	color: var(--reloc-muted);
	font-size: .95rem;
}

.reloc-fieldset {
	border: 0;
	border-top: 1px solid var(--reloc-line);
	margin: 0 0 24px;
	padding: 20px 0 0;
}

.reloc-fieldset:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.reloc-fieldset legend {
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--reloc-muted);
	padding: 0 0 10px;
}

.reloc-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

.reloc-field {
	display: block;
	margin: 0 0 16px;
}

.reloc-label {
	display: block;
	font-weight: 600;
	font-size: .9rem;
	margin-bottom: 5px;
}

.reloc-hint {
	display: block;
	color: var(--reloc-muted);
	font-size: .8rem;
	margin-top: 4px;
}

/* Style inputs by EXCLUSION, not by enumeration.
 *
 * This used to be a list — text, email, tel, date, number — and the day a
 * password field was added it fell straight through and rendered as a raw
 * browser default next to five styled siblings. A list of the types you
 * remembered is a list that is wrong the moment somebody adds a sixth.
 *
 * So: every input in a form is styled unless it is one of the handful that
 * genuinely must not be. New input types are covered automatically. */
.reloc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
.reloc-form select,
.reloc-form textarea {
	width: 100%;
	min-height: 46px;
	padding: 11px 13px;
	border: 1px solid var(--reloc-line);
	border-radius: 6px;
	font: inherit;
	font-size: 1rem;
	line-height: 1.4;
	background: #fff;
	color: var(--reloc-ink);
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
	transition: border-color .15s ease, box-shadow .15s ease;
}

/* A field has to look like a field. A 1px #dfe4ea hairline on white reads as
   a shadow, not an edge — people cannot see where to click, and on a phone in
   daylight they cannot see it at all. */
.reloc-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="hidden"]):not([type="file"]):not([type="range"]):not([type="color"]),
.reloc-form select,
.reloc-form textarea {
	border-color: var(--reloc-line-strong);
}

.reloc-form textarea {
	min-height: 0;
	resize: vertical;
}

.reloc-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b7a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 13px center;
	padding-right: 36px;
	cursor: pointer;
}

.reloc-form input:hover:not([type="checkbox"]):not([type="radio"]),
.reloc-form select:hover,
.reloc-form textarea:hover {
	border-color: #b9c2ca;
}

.reloc-form input:focus:not([type="checkbox"]):not([type="radio"]),
.reloc-form select:focus,
.reloc-form textarea:focus {
	outline: none;
	border-color: var(--reloc-accent);
	box-shadow: 0 0 0 3px rgba(31, 111, 92, .12);
}

/* A field the browser has flagged as wrong, but only after they have touched
   it. Turning a form red before somebody has typed anything is hostile. */
.reloc-form input:not(:placeholder-shown):invalid,
.reloc-form textarea:not(:placeholder-shown):invalid {
	border-color: #c0392b;
}

.reloc-form button:focus-visible,
.reloc-form a:focus-visible,
.reloc-form input[type="checkbox"]:focus-visible {
	outline: 2px solid var(--reloc-accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.reloc-choices {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}

.reloc-choice {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--reloc-line);
	border-radius: 6px;
	padding: 10px 14px;
	cursor: pointer;
	flex: 1;
	min-width: 200px;
	font-size: .9rem;
}

.reloc-choice:has(input:checked) {
	border-color: var(--reloc-accent);
	background: var(--reloc-accent-soft);
}

.reloc-stage {
	font-size: 1rem;
	margin: 18px 0 10px;
}

.reloc-services {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
	margin-bottom: 8px;
}

.reloc-service {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	border: 1px solid var(--reloc-line);
	border-radius: 8px;
	padding: 12px 14px;
	cursor: pointer;
}

.reloc-service:has(input:checked) {
	border-color: var(--reloc-accent);
	background: var(--reloc-accent-soft);
}

.reloc-service input {
	margin-top: 3px;
	flex: none;
}

.reloc-service__body {
	display: block;
}

.reloc-service__name {
	display: block;
	font-weight: 600;
	font-size: .92rem;
}

.reloc-service__price {
	display: block;
	font-size: .85rem;
	color: var(--reloc-accent);
	font-weight: 600;
	margin-top: 2px;
}

.reloc-service__price em {
	font-style: normal;
	font-weight: 400;
	color: var(--reloc-muted);
}

.reloc-service__price--free {
	color: var(--reloc-accent);
}

.reloc-service__blurb {
	display: block;
	font-size: .82rem;
	color: var(--reloc-muted);
	margin-top: 5px;
	line-height: 1.45;
}

.reloc-hp {
	position: absolute;
	left: -9999px;
}

.reloc-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}

.reloc-btn {
	background: var(--reloc-accent);
	color: #fff;
	border: 0;
	border-radius: 6px;
	padding: 13px 26px;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

.reloc-btn:hover {
	filter: brightness(1.1);
}

.reloc-btn[disabled] {
	opacity: .5;
	cursor: wait;
}

.reloc-btn--small {
	padding: 7px 14px;
	font-size: .85rem;
}

.reloc-note {
	margin: 0;
	color: var(--reloc-muted);
	font-size: .85rem;
}

.reloc-message {
	margin-top: 16px;
	padding: 0;
	font-size: .95rem;
}

.reloc-message.is-ok {
	padding: 14px 16px;
	border-radius: 6px;
	background: var(--reloc-accent-soft);
	border: 1px solid var(--reloc-accent);
}

.reloc-message.is-error {
	padding: 14px 16px;
	border-radius: 6px;
	background: #fdecea;
	border: 1px solid #c0392b;
	color: #8e2a1e;
}

/* Catalogue */

.reloc-catalogue__list {
	list-style: none;
	margin: 0 0 32px;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 14px;
}

.reloc-card {
	border: 1px solid #dfe4ea;
	border-radius: 8px;
	padding: 16px;
}

.reloc-card__name {
	margin: 0 0 4px;
	font-size: 1rem;
}

.reloc-card__price {
	margin: 0 0 8px;
	font-weight: 600;
	color: #1f6f5c;
}

.reloc-card__price em {
	font-style: normal;
	font-weight: 400;
	color: #5d6b7a;
	font-size: .85rem;
}

.reloc-card__blurb {
	margin: 0;
	font-size: .87rem;
	color: #5d6b7a;
	line-height: 1.5;
}

/* Account */

.reloc-account {
	max-width: 780px;
}

.reloc-booking,
.reloc-job {
	border: 1px solid #dfe4ea;
	border-radius: 8px;
	padding: 18px;
	margin-bottom: 16px;
}

.reloc-booking__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.reloc-ref {
	font-weight: 700;
	letter-spacing: .04em;
}

.reloc-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: .75rem;
	font-weight: 600;
	background: #eef1f4;
	color: #5d6b7a;
}

.reloc-badge--confirmed,
.reloc-badge--active {
	background: #eaf3f0;
	color: #1f6f5c;
}

.reloc-badge--completed {
	background: #e8eaf6;
	color: #3949ab;
}

.reloc-badge--cancelled {
	background: #fdecea;
	color: #8e2a1e;
}

.reloc-dates {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
	margin: 0 0 14px;
	padding: 14px 0;
	border-top: 1px solid #eef1f4;
	border-bottom: 1px solid #eef1f4;
}

.reloc-dates dt {
	font-size: .75rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #5d6b7a;
	margin-bottom: 3px;
}

.reloc-dates dd {
	margin: 0;
	font-weight: 600;
}

.reloc-booking__items {
	list-style: none;
	margin: 0;
	padding: 0;
}

.reloc-booking__items li {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #f2f4f6;
	font-size: .9rem;
	align-items: center;
}

.reloc-booking__when,
.reloc-booking__status {
	color: #5d6b7a;
	font-size: .82rem;
}

.reloc-booking__total {
	margin: 14px 0 0;
}

.reloc-jobs {
	list-style: none;
	margin: 0;
	padding: 0;
}

.reloc-job__name {
	margin: 0 0 6px;
}

.reloc-job p {
	margin: 0 0 6px;
	font-size: .9rem;
}

.reloc-empty {
	color: #5d6b7a;
}

@media (max-width: 640px) {
	.reloc-row,
	.reloc-services,
	.reloc-dates {
		grid-template-columns: 1fr;
	}

	.reloc-form {
		padding: 20px;
	}
}

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

/* ---- Service pages ---- */

.reloc-single {
	max-width: 780px;
	margin: 0 auto;
	padding: 32px 20px 64px;
	color: #16202b;
}

.reloc-crumbs {
	font-size: .82rem;
	color: #5d6b7a;
	margin-bottom: 24px;
}

.reloc-crumbs a {
	color: #5d6b7a;
}

.reloc-crumbs span {
	margin: 0 6px;
}

.reloc-eyebrow {
	margin: 0 0 6px;
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #1f6f5c;
}

.reloc-single__title {
	margin: 0 0 10px;
	font-size: clamp(1.8rem, 4vw, 2.6rem);
	line-height: 1.15;
	letter-spacing: -.015em;
}

.reloc-single__price {
	margin: 0 0 24px;
	font-size: 1.15rem;
	font-weight: 600;
	color: #1f6f5c;
}

.reloc-single__price em {
	font-style: normal;
	font-weight: 400;
	font-size: .9rem;
	color: #5d6b7a;
}

.reloc-single__image {
	margin: 0 0 28px;
}

.reloc-single__image img {
	width: 100%;
	height: auto;
	border-radius: 10px;
	display: block;
}

/* The local block. This is the only reason the suburb page deserves to exist,
   so it leads, and it looks like it leads. */
.reloc-local {
	border-left: 3px solid #1f6f5c;
	background: #eaf3f0;
	padding: 20px 24px;
	border-radius: 0 8px 8px 0;
	margin: 0 0 32px;
}

.reloc-local__title {
	margin: 0 0 8px;
	font-size: 1rem;
	letter-spacing: .01em;
}

.reloc-local p:last-child {
	margin-bottom: 0;
}

.reloc-single__body {
	line-height: 1.7;
}

.reloc-single__body h2 {
	margin-top: 34px;
	font-size: 1.3rem;
}

.reloc-cta {
	margin: 44px 0;
	padding: 28px;
	border: 1px solid #dfe4ea;
	border-radius: 10px;
	text-align: center;
}

.reloc-cta h2 {
	margin: 0 0 6px;
	font-size: 1.3rem;
}

.reloc-cta p {
	margin: 0 0 18px;
	color: #5d6b7a;
}

.reloc-cta .reloc-btn {
	display: inline-block;
	text-decoration: none;
}

.reloc-suburbs {
	margin: 40px 0;
	padding-top: 28px;
	border-top: 1px solid #dfe4ea;
}

.reloc-suburbs h2,
.reloc-related h2 {
	font-size: 1.1rem;
	margin: 0 0 14px;
}

.reloc-suburbs ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.reloc-suburbs li a {
	display: inline-block;
	padding: 6px 14px;
	border: 1px solid #dfe4ea;
	border-radius: 100px;
	font-size: .87rem;
	text-decoration: none;
	color: #16202b;
}

.reloc-suburbs li a:hover {
	border-color: #1f6f5c;
	background: #eaf3f0;
}

.reloc-related {
	margin: 40px 0 0;
	padding-top: 28px;
	border-top: 1px solid #dfe4ea;
}

.reloc-card__name a {
	text-decoration: none;
	color: inherit;
}

.reloc-card__name a:hover {
	color: #1f6f5c;
}

/* An unpriced service is a decision, not an omission. It should look
   deliberate, not like a figure failed to load. */
.reloc-service__price--quoted,
.reloc-card__price--quoted {
	color: #5d6b7a;
	font-weight: 400;
}

/* Tier picker inside a service checkbox. */
.reloc-service__tiers {
	display: block;
	margin-top: 10px;
}

.reloc-tier-select {
	width: 100%;
	padding: 8px 10px;
	min-height: 42px;
	border: 1px solid #dfe4ea;
	border-radius: 6px;
	background: #fff;
	font: inherit;
	font-size: .85rem;
	color: #16202b;
}

.reloc-service:has(input:checked) .reloc-tier-select {
	border-color: #1f6f5c;
}

/* =====================================================================
   The portal — an app, not a page.

   Three surfaces, nested:

     .reloc-app         the shell. Tinted, bordered. Holds the two panels.
       .reloc-app__nav    sidebar. White, bordered.
       .reloc-app__main   content. White, bordered.

   Nesting three borders is a good way to end up with something that looks
   like a spreadsheet, so the shell is TINTED rather than white — the two
   panels sit ON it, they do not float inside it. The eye reads a tray with
   two cards on it, not a box in a box in a box.

   On a phone the sidebar's links become a fixed bottom bar. A 232px sidebar
   on a 380px screen is not a sidebar, it is a mistake. The nav goes where
   the thumb already is.
   ================================================================== */

.reloc-app {
	--a-ink:     #16202b;
	--a-ink-2:   #5d6b7a;
	--a-ink-3:   #8c96a0;
	--a-line:    #dfe4ea;
	--a-line-2:  #eef1f4;
	--a-crate:   #1f6f5c;
	--a-deep:    #15503f;
	--a-soft:    #eaf3f0;
	--a-tray:    #f4f7f6;
	--a-bar-h:   64px;

	display: grid;
	grid-template-columns: 1fr;
	gap: 0;

	/* Wide. A four-column board inside a 68rem shell gives each column about
	   230px, and 230px is not enough for "Move Crates to New House" or for a
	   date — "Tue 7 Jul 2026" wraps onto two lines and stops looking like a
	   date at all. The constraint was never the design, it was the container. */
	max-width: 100rem;
	margin: 0 auto;
	padding: 0;
	color: var(--a-ink);
}

/* ---- Who ---- */

.reloc-app__who {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 16px 0;
	border-bottom: 1px solid var(--a-line-2);
}

.reloc-app__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--a-soft);
	color: var(--a-deep);
	font-weight: 700;
	font-size: .95rem;
}

.reloc-app__name { display: grid; min-width: 0; flex: 1; }
.reloc-app__name strong { font-size: .92rem; }
.reloc-app__name small {
	font-size: .76rem;
	color: var(--a-ink-3);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Mobile only: a log-out affordance up here, because the bottom bar is full. */
.reloc-app__out-sm {
	display: grid;
	place-items: center;
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 8px;
	color: var(--a-ink-3);
	text-decoration: none;
}
.reloc-app__out-sm:hover { background: var(--a-line-2); color: var(--a-ink); }

/* ---- Another move ---- */

/* "Another move" lives in the foot, above Profile. It is the one thing in the
   sidebar that can earn, so it keeps a filled background while Profile and Log
   out stay as plain links — but it sits with them, at the bottom, because it is
   an action rather than a place. */
.reloc-app__new {
	display: flex;
	align-items: center;
	gap: 11px;
	margin: 0 0 6px;
	padding: 11px 13px;
	background: var(--a-soft);
	color: var(--a-deep);
	border-radius: 8px;
	font-size: .9rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease;
}
.reloc-app__new:hover { background: #dcebe5; color: var(--a-deep); }

/* ---- Links ---- */

.reloc-app__links {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: saturate(1.4) blur(10px);
	border-top: 1px solid var(--a-line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.reloc-app__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 3px;
	min-height: var(--a-bar-h);
	padding: 8px 4px;
	font-size: .7rem;
	font-weight: 500;
	color: var(--a-ink-3);
	text-decoration: none;
	transition: color .15s ease, background .15s ease;
}

.reloc-app__link:hover { color: var(--a-crate); }
.reloc-app__link.is-on { color: var(--a-crate); }
.reloc-app__icon { flex: none; }

/* Short label in the thumb bar, long label in the sidebar. */
.reloc-app__long { display: none; }
.reloc-app__short { display: inline; }

/* ---- Foot ----
   On mobile the foot's links do not exist: Profile is in the thumb bar, and
   Log out is the icon in the who-row. Only "Another move" survives, and it
   flows into the page as a button.

   The previous version pinned the foot's Profile link at 33% width on the
   right of the bar — which worked with three items and silently overlapped the
   third the moment there were four. Rendering Profile twice and hiding one is
   uglier in the markup and correct at every width, which is the trade. */

.reloc-app__foot { display: contents; }

.reloc-app__link--desk,
.reloc-app__link--out { display: none; }

/* On mobile the foot IS the bottom bar. "Another move" cannot join a three-up
   thumb bar without making it a four-up thumb bar — and a 95px tap target with
   a label under it is a target people miss. So it flows into the page instead,
   as a full-width button under the name, where it is more visible anyway.

   No `order` here. The foot comes after the nav in the DOM, and the nav is
   fixed-positioned out of flow, so this lands directly under the name on its
   own. Reordering it would put it ABOVE the name, which is nobody's idea of a
   sidebar. */
.reloc-app__new {
	justify-content: center;
	margin: 16px 0 0;
}

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

.reloc-app__main {
	min-width: 0;
	background: #fff;
	border: 1px solid var(--a-line);
	border-radius: 14px;
	padding: 20px;
	margin-top: 18px;
	padding-bottom: calc(var(--a-bar-h) + env(safe-area-inset-bottom, 0px) + 24px);
}

.reloc-app__head {
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--a-line-2);
}

.reloc-app__title {
	margin: 0;
	font-size: 1.4rem;
	letter-spacing: -0.02em;
}

/* =========================================================================
   Desktop: a real sidebar, inside a real tray.
   ====================================================================== */

@media (min-width: 52em) {

	.reloc-app {
		grid-template-columns: 244px minmax(0, 1fr);
		gap: 20px;
		padding: 20px;
		background: var(--a-tray);
		border: 1px solid var(--a-line);
		border-radius: 18px;
	}

	/* The sidebar becomes its own panel. */
	.reloc-app__nav {
		display: flex;
		flex-direction: column;
		position: sticky;
		top: 20px;
		align-self: start;
		min-height: 30rem;
		padding: 0 16px 16px;
		background: #fff;
		border: 1px solid var(--a-line);
		border-radius: 14px;
	}

	.reloc-app__links {
		position: static;
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: 18px;
		background: none;
		backdrop-filter: none;
		border: 0;
		padding: 0;
	}

	.reloc-app__link {
		flex-direction: row;
		justify-content: flex-start;
		gap: 11px;
		min-height: 0;
		padding: 11px 13px;
		border-radius: 8px;
		font-size: .92rem;
		color: var(--a-ink-2);
	}

	.reloc-app__link:hover { background: var(--a-line-2); color: var(--a-ink); }

	.reloc-app__link.is-on {
		background: var(--a-soft);
		color: var(--a-deep);
		font-weight: 600;
	}

	/* Another move, Profile, Log out — pinned to the bottom of the sidebar. */
	.reloc-app__foot {
		display: flex;
		flex-direction: column;
		gap: 2px;
		margin-top: auto;
		padding-top: 16px;
		border-top: 1px solid var(--a-line-2);
	}

	.reloc-app__link--desk { display: flex; }

	.reloc-app__link--out {
		display: flex;
		color: var(--a-ink-3);
	}
	.reloc-app__link--out:hover { background: var(--a-line-2); color: var(--a-ink); }

	/* Profile is in the sidebar foot on desktop, so its copy in the top nav
	   goes away. Exactly one of the two is ever visible. */
	.reloc-app__link--bar-only { display: none; }

	.reloc-app__long { display: inline; }
	.reloc-app__short { display: none; }

	.reloc-app__out-sm { display: none; }

	.reloc-app__main {
		margin-top: 0;
		padding: 26px 28px;
		padding-bottom: 26px;
	}

	.reloc-app__title { font-size: 1.6rem; }
}

@media (max-width: 560px) {
	.reloc-app__main {
		padding: 18px;
		border-radius: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.reloc-app *,
	.reloc-app *::before { transition: none !important; }
}

/* =====================================================================
   Portal content
   ================================================================== */

/* ---- First arrival ----
   Shown once, straight after booking. They came for a price, got one, and
   have been put somewhere they have never been. Lead with the good news,
   then explain where they are. */

.reloc-welcome {
	margin: 0 0 26px;
	padding: 24px 26px;
	background: #fff;
	border: 1px solid var(--a-crate, #1f6f5c);
	border-radius: 12px;
	box-shadow: 0 22px 50px -38px rgba(20, 32, 27, .45);
}

.reloc-welcome__mark {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0 0 13px;
	background: #eaf3f0;
	color: #1f6f5c;
	border-radius: 50%;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1;
}

.reloc-welcome__title {
	margin: 0 0 7px;
	font-size: 1.25rem;
	line-height: 1.25;
	letter-spacing: -0.012em;
}

.reloc-welcome__body {
	margin: 0;
	color: #5d6b7a;
	font-size: .93rem;
	line-height: 1.6;
}

.reloc-welcome__orient {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px dashed #dfe4ea;
}

.reloc-welcome__orient p {
	margin: 0 0 6px;
	font-size: .89rem;
	line-height: 1.6;
	color: #5d6b7a;
}
.reloc-welcome__orient p:last-child { margin-bottom: 0; }
.reloc-welcome__orient strong { color: #16202b; }

/* ---- The move card ---- */

.reloc-card-move {
	background: #fff;
	border: 1px solid #e4e8eb;
	border-radius: 12px;
	padding: 22px;
	margin-bottom: 18px;
}

.reloc-card-move__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding-bottom: 14px;
	border-bottom: 1px solid #f1f4f6;
}

.reloc-ref {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 600;
	font-size: .9rem;
	letter-spacing: .03em;
}

/* The date is what they came for. Let it be the biggest thing here. */
.reloc-card-move__date {
	margin: 16px 0 18px;
	font-size: .74rem;
	font-weight: 600;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8c96a0;
}

.reloc-card-move__date strong {
	display: block;
	margin-top: 4px;
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.012em;
	color: #16202b;
	text-transform: none;
}

.reloc-lines { list-style: none; margin: 0; padding: 0; }

.reloc-line {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 14px;
	align-items: baseline;
	padding: 13px 0;
	border-bottom: 1px solid #f1f4f6;
	font-size: .93rem;
}
.reloc-line:last-child { border-bottom: 0; }

.reloc-line__name { font-weight: 500; }
.reloc-line__name small {
	display: block;
	margin-top: 2px;
	font-weight: 400;
	font-size: .78rem;
	color: #8c96a0;
}

.reloc-line__when {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .82rem;
	color: #5d6b7a;
	white-space: nowrap;
}

.reloc-line__price {
	font-weight: 600;
	font-size: .9rem;
	color: #1f6f5c;
	white-space: nowrap;
}

.reloc-card-move__total {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid #e4e8eb;
	text-align: right;
	font-size: .9rem;
	color: #5d6b7a;
}
.reloc-card-move__total strong { margin-left: 8px; font-size: 1.15rem; color: #16202b; }

/* ---- Add a service ----
   The only thing in this whole portal that earns money without the owner in
   the room. It gets its own surface and nothing competes with it. */

.reloc-add {
	margin: 22px -22px -22px;
	padding: 20px 22px;
	background: #f7f9f8;
	border-top: 1px solid #e4e8eb;
	border-radius: 0 0 12px 12px;
}

.reloc-add__title { margin: 0 0 4px; font-size: 1.02rem; }
.reloc-add__list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 10px; }

.reloc-add__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid #e4e8eb;
	border-radius: 9px;
	transition: border-color .15s ease, opacity .25s ease;
}
.reloc-add__item:hover { border-color: #1f6f5c; }

.reloc-add__item strong { font-size: .95rem; }
.reloc-add__item p { margin: 4px 0 0; font-size: .83rem; line-height: 1.5; color: #5d6b7a; }
.reloc-add__item .reloc-btn { flex: none; }
.reloc-add__note { margin: 14px 0 0; font-size: .8rem; color: #8c96a0; }

/* ---- The house record ---- */

.reloc-timeline {
	list-style: none;
	margin: 16px 0 0;
	padding: 0 0 0 20px;
	border-left: 2px solid #e4e8eb;
}

.reloc-timeline li { position: relative; padding: 0 0 18px; }
.reloc-timeline li:last-child { padding-bottom: 0; }

.reloc-timeline li::before {
	content: "";
	position: absolute;
	left: -26px;
	top: 6px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #1f6f5c;
}

.reloc-timeline__date {
	display: block;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .75rem;
	color: #8c96a0;
	margin-bottom: 2px;
}

.reloc-timeline__detail {
	display: block;
	margin-top: 3px;
	font-size: .86rem;
	color: #5d6b7a;
	line-height: 1.55;
}

/* ---- Empty. An invitation, not an apology. ---- */

.reloc-empty-card {
	background: #fff;
	border: 1px dashed #c9d2d9;
	border-radius: 12px;
	padding: 40px 28px;
	text-align: center;
}

.reloc-empty-card h3 { margin: 0 0 8px; font-size: 1.15rem; }
.reloc-empty-card p {
	margin: 0 auto 18px;
	max-width: 34ch;
	color: #5d6b7a;
	font-size: .92rem;
	line-height: 1.6;
}

/* ---- Forms inside the portal ---- */

.reloc-app .reloc-form {
	max-width: 30rem;
	margin: 0 0 20px;
	padding: 24px;
	background: #fff;
	border: 1px solid #e4e8eb;
	border-radius: 12px;
	box-shadow: none;
}

.reloc-app .reloc-form__title { font-size: 1.08rem; margin: 0 0 18px; }
.reloc-app .reloc-form .reloc-btn { width: auto; }
.reloc-app .reloc-form .reloc-actions { display: block; margin-top: 20px; }

/* ---- Phone ---- */

@media (max-width: 560px) {
	.reloc-card-move { padding: 18px; border-radius: 10px; }

	.reloc-line { grid-template-columns: 1fr auto; row-gap: 4px; }
	.reloc-line__when { grid-column: 1; grid-row: 2; font-size: .78rem; }
	.reloc-line__price { grid-row: 1 / span 2; align-self: center; }

	.reloc-add { margin: 20px -18px -18px; padding: 18px; border-radius: 0 0 10px 10px; }
	.reloc-add__item { flex-direction: column; align-items: stretch; gap: 12px; }
	.reloc-add__item .reloc-btn { width: 100%; }

	.reloc-welcome { padding: 20px; border-radius: 10px; }
	.reloc-welcome__title { font-size: 1.12rem; }

	.reloc-app .reloc-form { padding: 18px; }
	.reloc-app .reloc-form .reloc-btn { width: 100%; }
}



/* ---- Service picker, in the portal ---- */

.reloc-form--wide { max-width: none; }

.reloc-pick__stage {
	margin: 18px 0 10px;
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--reloc-muted, #5d6b7a);
}

.reloc-pick {
	display: grid;
	gap: 10px;
}

.reloc-pick__item {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--reloc-line, #dfe4ea);
	border-radius: 9px;
	cursor: pointer;
	transition: border-color .15s ease, background .15s ease;
}

.reloc-pick__item:hover { border-color: var(--reloc-accent, #1f6f5c); }

.reloc-pick__item:has(input:checked) {
	border-color: var(--reloc-accent, #1f6f5c);
	background: var(--reloc-accent-soft, #eaf3f0);
}

.reloc-pick__item input {
	flex: none;
	margin-top: 3px;
	width: 18px;
	height: 18px;
	accent-color: var(--reloc-accent, #1f6f5c);
}

.reloc-pick__item > span { display: grid; gap: 2px; }
.reloc-pick__item strong { font-size: .94rem; }

.reloc-pick__item em {
	font-style: normal;
	font-size: .82rem;
	font-weight: 600;
	color: var(--reloc-accent, #1f6f5c);
}

.reloc-pick__item small {
	font-size: .82rem;
	line-height: 1.5;
	color: var(--reloc-muted, #5d6b7a);
}

@media (min-width: 40em) {
	.reloc-pick { grid-template-columns: 1fr 1fr; }
}

/* The "Another move" button lights up when you're on its tab. */
.reloc-app__new.is-on {
	background: var(--a-crate, #1f6f5c);
	color: #fff;
}
.reloc-app__new.is-on:hover { background: var(--a-deep, #15503f); color: #fff; }

/* The option select, inside a service row. Appears only when the service has
   options, and it must not look like part of the checkbox label. */
.reloc-service__opt,
.reloc-pick__opt {
	display: block;
	width: 100%;
	margin-top: 10px;
	padding: 9px 32px 9px 11px;
	font: inherit;
	font-size: .87rem;
	color: var(--reloc-ink, #16202b);
	background: #fff;
	border: 1px solid var(--reloc-line-strong, #c4ccd3);
	border-radius: 6px;
	-webkit-appearance: none;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235d6b7a' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 11px center;
	cursor: pointer;
}

.reloc-service__opt:focus,
.reloc-pick__opt:focus {
	outline: none;
	border-color: var(--reloc-accent, #1f6f5c);
	box-shadow: 0 0 0 3px rgba(31, 111, 92, .12);
}

/* =====================================================================
   The board.

   Read-only. The customer watches; you move the cards. That is the whole
   point — they can see where a job has got to without ringing you, and you
   do not get a phone call that says "any news?"

   Mobile: horizontal scroll with snap. A kanban stacked into one column is
   not a kanban, it is a list with headings, and it loses the one thing the
   layout is for — seeing at a glance where the weight is.
   ================================================================== */

.reloc-board__lede {
	margin: 0 0 20px;
	font-size: .9rem;
	line-height: 1.6;
	color: var(--reloc-muted, #5d6b7a);
	max-width: 52ch;
}

.reloc-board {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 78%;
	gap: 12px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
	padding-bottom: 8px;
	margin: 0 -18px;
	padding-inline: 18px;
}

.reloc-board__col {
	scroll-snap-align: start;
	min-width: 0;
	padding: 14px;
	background: #f5f7f6;
	border: 1px solid #e4e8eb;
	border-radius: 11px;
}

.reloc-board__head {
	padding-bottom: 12px;
	margin-bottom: 12px;
	border-bottom: 1px solid #e4e8eb;
}

.reloc-board__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 4px;
	font-size: .92rem;
}

.reloc-board__count {
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	background: #e4e8eb;
	border-radius: 100px;
	font-size: .72rem;
	font-weight: 600;
	color: #5d6b7a;
}

.reloc-board__note {
	margin: 0;
	font-size: .76rem;
	line-height: 1.45;
	color: #8c96a0;
}

.reloc-board__empty {
	margin: 0;
	padding: 18px 0;
	text-align: center;
	color: #b6bfc6;
}

/* The last column is where things end up. It should feel like an ending. */
.reloc-board__col--done { background: #eef5f2; border-color: #cfe3da; }
.reloc-board__col--done .reloc-board__count { background: #d6e8e0; color: #15503f; }

/* ---- Cards ---- */

.reloc-job-card {
	padding: 13px 14px;
	margin-bottom: 8px;
	background: #fff;
	border: 1px solid #e4e8eb;
	border-radius: 8px;
}
.reloc-job-card:last-child { margin-bottom: 0; }

.reloc-job-card__name {
	margin: 0;
	font-size: .9rem;
	line-height: 1.35;
}

.reloc-job-card__opt {
	display: inline-block;
	margin: 6px 0 0;
	padding: 2px 9px;
	background: #eaf3f0;
	color: #15503f;
	border-radius: 100px;
	font-size: .74rem;
	font-weight: 600;
}

.reloc-job-card__meta {
	display: grid;
	gap: 4px;
	margin: 10px 0 0;
}

.reloc-job-card__meta > div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
}

.reloc-job-card__meta dt {
	font-size: .75rem;
	color: #8c96a0;
}

.reloc-job-card__meta dt { flex: none; }

.reloc-job-card__meta dd {
	margin: 0;
	font-size: .78rem;
	font-weight: 600;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: #16202b;
	text-align: right;

	/* A date is one thing. Breaking "Tue 7 Jul 2026" across two lines does not
	   save space, it just stops it being a date. */
	white-space: nowrap;
}

.reloc-job-card__ref {
	margin: 10px 0 0;
	padding-top: 8px;
	border-top: 1px solid #f1f4f6;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .7rem;
	letter-spacing: .04em;
	color: #b6bfc6;
}

/* ---- Not going ahead ---- */

.reloc-board__dead {
	margin-top: 24px;
	padding: 16px 18px;
	background: #fafbfb;
	border: 1px dashed #dfe4ea;
	border-radius: 10px;
}

.reloc-board__dead h3 { margin: 0 0 10px; font-size: .92rem; color: #8c96a0; }
.reloc-board__dead ul { list-style: none; margin: 0 0 10px; padding: 0; }

.reloc-board__dead li {
	padding: 5px 0;
	font-size: .88rem;
	color: #8c96a0;
	text-decoration: line-through;
	text-decoration-color: #dfe4ea;
}

.reloc-board__dead small {
	margin-left: 6px;
	font-size: .76rem;
	text-decoration: none;
	display: inline-block;
}

@media (min-width: 52em) {
	.reloc-board {
		grid-auto-columns: minmax(0, 1fr);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-flow: row;
		overflow-x: visible;
		margin: 0;
		padding-inline: 0;

		/* Columns size to their contents rather than all stretching to match
		   the fullest one. Four tall empty boxes next to one full one is what a
		   kanban looks like when nobody thought about the empty state, and this
		   board is read-only — nothing is ever dragged into those columns, so
		   they have no reason to be drop-sized. */
		align-items: start;
	}

	.reloc-board__col { min-height: 190px; }
}

/* =====================================================================
   Measure.

   The shell is wide because the BOARD needs to be — four columns and a card
   with a date on it. Nothing else in the portal does.

   A move card stretched to 1300px is a line of text you have to move your
   head to read, and a form field 1300px wide is a field nobody can tell the
   ends of. Width is for the thing that needs it, not for everything that
   happens to be in the same container.
   ================================================================== */

.reloc-app__main > .reloc-card-move,
.reloc-app__main > .reloc-empty-card,
.reloc-app__main > .reloc-welcome,
.reloc-app__main > .reloc-form:not(.reloc-form--wide) {
	max-width: 46rem;
}

/* The "Another move" form has two address blocks and a service picker. It can
   take more room than a login box, but not the whole screen. */
.reloc-app__main > .reloc-form--wide { max-width: 58rem; }

/* The house record is a timeline. Long lines of prose in a timeline are the
   same problem. */
.reloc-app__main > .reloc-card-move .reloc-timeline { max-width: 44rem; }

/* The board is the exception, and it is the reason the shell is wide at all. */
.reloc-app__main > .reloc-board,
.reloc-app__main > .reloc-board__lede { max-width: none; }
.reloc-app__main > .reloc-board__lede { max-width: 60ch; }

/* =====================================================================
   The move table, and the quote decision.
   ================================================================== */

.reloc-quote-alert {
	margin: 0 0 16px;
	padding: 13px 16px;
	background: #fff8e5;
	border: 1px solid #e8c766;
	border-radius: 8px;
	font-size: .88rem;
	line-height: 1.55;
}
.reloc-quote-alert strong { display: block; margin-bottom: 2px; }

.reloc-table-move {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem;
}

.reloc-table-move th {
	padding: 0 10px 9px 0;
	text-align: left;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #8c96a0;
	border-bottom: 1px solid #e4e8eb;
}
.reloc-table-move th:last-child { padding-right: 0; }

.reloc-table-move td {
	padding: 13px 10px 13px 0;
	border-bottom: 1px solid #f1f4f6;
	vertical-align: middle;
}
.reloc-table-move td:last-child { padding-right: 0; }
.reloc-table-move tr:last-child td { border-bottom: 0; }

/* A row with a decision on it should look like one. */
.reloc-table-move tr.is-quoted td {
	background: #fffdf6;
	border-bottom-color: #f0e4c0;
}

.reloc-table-move__name small {
	display: block;
	margin-top: 3px;
	font-size: .76rem;
	color: #8c96a0;
}

.reloc-table-move__when {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .8rem;
	color: #5d6b7a;
	white-space: nowrap;
}

.reloc-table-move__price {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-weight: 600;
	color: #1f6f5c;
	white-space: nowrap;
}

.reloc-table-move__act { text-align: right; white-space: nowrap; }

.reloc-pill-status {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 100px;
	font-size: .72rem;
	font-weight: 600;
	background: #eef1f4;
	color: #5d6b7a;
	white-space: nowrap;
}
.reloc-pill-status--quoted { background: #fdf1d5; color: #8a6412; }
.reloc-pill-status--booked { background: #eaf3f0; color: #15503f; }
.reloc-pill-status--done   { background: #e5eef9; color: #1f4b7a; }

.reloc-quote-actions { display: inline-flex; gap: 8px; align-items: center; }

.reloc-btn-ghost {
	padding: 8px 14px;
	background: none;
	border: 1px solid #dfe4ea;
	border-radius: 6px;
	font: inherit;
	font-size: .85rem;
	font-weight: 500;
	color: #5d6b7a;
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.reloc-btn-ghost:hover { border-color: #b6bfc6; color: #16202b; }

.reloc-btn--danger { background: #b3341c; border-color: #b3341c; }
.reloc-btn--danger:hover { background: #96290f; border-color: #96290f; }

/* ---- Declined ---- */

.reloc-declined {
	margin-top: 18px;
	padding: 14px 16px;
	background: #fafbfb;
	border: 1px dashed #dfe4ea;
	border-radius: 8px;
}
.reloc-declined h4 { margin: 0 0 8px; font-size: .8rem; color: #8c96a0; text-transform: uppercase; letter-spacing: .08em; }
.reloc-declined ul { list-style: none; margin: 0 0 8px; padding: 0; }
.reloc-declined li { padding: 4px 0; font-size: .88rem; color: #8c96a0; }
.reloc-declined li small { margin-left: 8px; font-size: .76rem; color: #b6bfc6; }

/* ---- The dialog ---- */

.reloc-modal {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(20, 32, 27, .45);
	backdrop-filter: blur(3px);
	overflow-y: auto;
}
.reloc-modal[hidden] { display: none; }

.reloc-modal__box {
	width: 100%;
	max-width: 27rem;
	padding: 26px;
	background: #fff;
	border-radius: 14px;
	box-shadow: 0 30px 70px -30px rgba(20, 32, 27, .5);
}

.reloc-modal__title { margin: 0 0 8px; font-size: 1.2rem; }

.reloc-modal__lede {
	margin: 0 0 20px;
	font-size: .9rem;
	line-height: 1.6;
	color: #5d6b7a;
}
.reloc-modal__lede [data-decline-service] { font-weight: 600; color: #16202b; }

.reloc-modal__actions {
	display: flex;
	gap: 10px;
	justify-content: flex-end;
	margin-top: 20px;
}

/* Admin-side tag, so a decline reason is visible where you actually look. */
.reloc-declined-tag {
	display: inline-block;
	padding: 2px 8px;
	border-radius: 100px;
	background: #fdecea;
	color: #8e2a1e;
	font-size: .72rem;
	font-weight: 600;
}

@media (max-width: 640px) {
	.reloc-table-move thead { display: none; }
	.reloc-table-move,
	.reloc-table-move tbody,
	.reloc-table-move tr,
	.reloc-table-move td { display: block; width: 100%; }

	.reloc-table-move tr {
		padding: 14px 0;
		border-bottom: 1px solid #f1f4f6;
	}

	.reloc-table-move td {
		padding: 0 0 6px;
		border: 0;
	}

	.reloc-table-move__act { text-align: left; padding-top: 8px; }
	.reloc-quote-actions { width: 100%; }
	.reloc-quote-actions .reloc-btn,
	.reloc-quote-actions .reloc-btn-ghost { flex: 1; }

	.reloc-modal__box { padding: 20px; }
	.reloc-modal__actions { flex-direction: column-reverse; }
	.reloc-modal__actions button { width: 100%; }
}

/* ---- Payment ---- */

.reloc-paid-tag {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 100px;
	background: #eaf3f0;
	color: #15503f;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
}

.reloc-pill-status--accepted { background: #fdeee6; color: #b3441c; }

/* "To pay" is a call to action wearing a status label. Make it look like one. */
.reloc-board__col--accepted {
	background: #fff8f4;
	border-color: #f3d5c4;
}
.reloc-board__col--accepted .reloc-board__count { background: #f9dfd0; color: #b3441c; }

.reloc-board { grid-auto-columns: 78%; }

@media (min-width: 52em) {
	.reloc-board { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* =====================================================================
   Lead calendar
   ===================================================================== */

.reloc-leadcal {
	margin: 24px 0;
}

.reloc-leadcal.is-loading {
	opacity: .5;
	pointer-events: none;
}

.reloc-leadcal__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.reloc-leadcal__title {
	margin: 0;
	font-size: 1.15rem;
}

.reloc-leadcal__nav {
	background: none;
	border: 1px solid currentColor;
	border-radius: 6px;
	cursor: pointer;
	font-size: 1rem;
	line-height: 1;
	padding: 8px 12px;
}

.reloc-leadcal__balance {
	font-size: .85rem;
	margin: 0 0 12px;
	opacity: .85;
}

.reloc-leadcal__grid {
	display: grid;
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 4px;
}

.reloc-leadcal__dow {
	font-size: .72rem;
	font-weight: 600;
	letter-spacing: .04em;
	opacity: .6;
	padding: 4px 2px;
	text-align: center;
	text-transform: uppercase;
}

.reloc-leadcal__cell {
	border: 1px solid rgba(128, 128, 128, .22);
	border-radius: 6px;
	min-height: 78px;
	padding: 4px;
}

.reloc-leadcal__cell--empty {
	border-color: transparent;
}

.reloc-leadcal__cell.is-today {
	border-color: currentColor;
	border-width: 2px;
}

.reloc-leadcal__day {
	display: block;
	font-size: .72rem;
	font-weight: 600;
	opacity: .65;
	margin-bottom: 3px;
}

/* One lead — a button, because it opens a dialog.
   ---------------------------------------------------------------------
   A cell is about 120px wide. That is room for the trade, the suburb,
   and what it costs — and nothing else. Bedrooms, bathrooms, masked
   contacts and the full response line all live in the panel, where
   there is space to read them.

   The earlier version put all of it in the cell, and every line wrapped
   to two or three: a wall of fragments rather than a calendar. */

.reloc-lead {
	background: #fff;
	border: 1px solid rgba(31, 111, 92, .28);
	border-left: 3px solid var(--reloc-accent, #1f6f5c);
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	font: inherit;
	gap: 1px;
	line-height: 1.25;
	margin-bottom: 3px;
	padding: 5px 6px;
	text-align: left;
	width: 100%;
}

.reloc-lead:hover,
.reloc-lead:focus-visible {
	background: rgba(31, 111, 92, .07);
}

.reloc-lead__service {
	color: #16202b;
	font-size: .72rem;
	font-weight: 600;
	/* Two lines then ellipsis: "Exterior House Washing" should not push
	   the price out of the cell. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.reloc-lead__where {
	color: #5d6b7a;
	font-size: .68rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reloc-lead__foot {
	align-items: baseline;
	display: flex;
	gap: 5px;
	justify-content: space-between;
	margin-top: 3px;
}

.reloc-lead__cost {
	color: #16202b;
	font-size: .72rem;
	font-weight: 700;
}

.reloc-lead__slots {
	color: #5d6b7a;
	font-size: .66rem;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.reloc-lead.is-mine {
	background: rgba(46, 160, 100, .1);
	border-left-color: #2e7d55;
}

.reloc-lead.is-full {
	border-left-color: #c4ccd3;
	opacity: .6;
}

.reloc-lead.is-pending {
	background: rgba(230, 180, 60, .12);
	border-color: rgba(180, 130, 20, .45);
	border-left-color: #b4791a;
	border-style: dashed;
}

/* Give the cells room to hold a card without the row growing unevenly. */
.reloc-leadcal__cell {
	min-height: 92px;
}

.reloc-leadcal__grid { gap: 5px; }

/* The day button. Invisible on desktop, where the cards themselves are the
   tap targets; on a phone it covers the whole cell. */
.reloc-leadcal__more {
	display: none;
}

.reloc-leadcal__dot {
	align-items: center;
	background: var(--reloc-accent, #1f6f5c);
	border-radius: 999px;
	color: #fff;
	display: inline-flex;
	font-size: .68rem;
	font-weight: 700;
	height: 18px;
	justify-content: center;
	min-width: 18px;
	padding: 0 5px;
}

/* ---------------------------------------------------------------------
   Phones.

   A seven-column month at 360px gives each day about 46px. That will not
   hold a job card — but it will hold a date and a count, which is what a
   calendar is for: seeing where the work is. Tapping a day opens a sheet
   with the jobs in it.

   The earlier version collapsed to a list and hid the grid entirely,
   which meant there was no calendar on a phone at all.
   ------------------------------------------------------------------ */

@media (max-width: 700px) {
	.reloc-leadcal__grid {
		gap: 3px;
	}

	.reloc-leadcal__dow {
		font-size: .62rem;
		padding: 2px 0;
	}

	.reloc-leadcal__cell {
		align-items: center;
		aspect-ratio: 1 / 1;
		display: flex;
		justify-content: center;
		min-height: 0;
		padding: 2px;
		position: relative;
	}

	.reloc-leadcal__day {
		font-size: .82rem;
		margin: 0;
		opacity: .85;
	}

	/* The cards are the desktop view. On a phone the day sheet replaces
	   them — they cannot be read at this width and they break the grid. */
	.reloc-leadcal__cell .reloc-lead {
		display: none;
	}

	.reloc-leadcal__cell.has-leads {
		background: rgba(31, 111, 92, .09);
		border-color: rgba(31, 111, 92, .35);
	}

	.reloc-leadcal__more {
		align-items: flex-end;
		background: none;
		border: 0;
		cursor: pointer;
		display: flex;
		inset: 0;
		justify-content: center;
		padding: 0 0 3px;
		position: absolute;
		/* The whole cell is the target. Anything smaller than this is a
		   miss-tap waiting to happen. */
		width: 100%;
	}

	.reloc-leadcal__more:focus-visible {
		outline: 2px solid var(--reloc-accent, #1f6f5c);
		outline-offset: -2px;
	}

	.reloc-leadcal__bar { gap: 8px; }
	.reloc-leadcal__title { font-size: 1rem; }

	.reloc-leadcal__nav {
		min-height: 44px;
		min-width: 44px;
	}
}

/* ---------------------------------------------------------------------
   Day sheet
   ------------------------------------------------------------------ */

.reloc-daylist {
	list-style: none;
	margin: 8px 0 0;
	padding: 0;
}

.reloc-daylist li + li {
	border-top: 1px solid #e6e8ea;
}

.reloc-daylist__item {
	align-items: center;
	background: none;
	border: 0;
	color: #16202b;
	cursor: pointer;
	display: flex;
	font: inherit;
	gap: 12px;
	justify-content: space-between;
	/* 56px: comfortably above the 44px minimum, with a thumb in a van. */
	min-height: 56px;
	padding: 12px 2px;
	text-align: left;
	width: 100%;
}

.reloc-daylist__item:hover,
.reloc-daylist__item:focus-visible {
	background: rgba(128, 128, 128, .07);
}

.reloc-daylist__main {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.reloc-daylist__main strong { color: #16202b; font-size: .95rem; }
.reloc-daylist__main span { color: #5d6b7a; font-size: .8rem; opacity: 1; }

.reloc-daylist__masked {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: .76rem !important;
}

.reloc-daylist__side {
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	text-align: right;
}

.reloc-daylist__cost { color: #16202b; font-size: .92rem; font-weight: 700; }
.reloc-daylist__slots,
.reloc-daylist__tag { color: #5d6b7a; font-size: .72rem; opacity: 1; }

/* =====================================================================
   Supplier portal
   ===================================================================== */

.reloc-supplier__head {
	align-items: baseline;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: space-between;
}

.reloc-supplier__balance {
	font-size: .9rem;
	margin: 0;
}

.reloc-tabs {
	border-bottom: 1px solid rgba(128, 128, 128, .25);
	display: flex;
	gap: 4px;
	margin: 16px 0 20px;
}

.reloc-tabs__tab {
	border-bottom: 2px solid transparent;
	padding: 8px 12px;
	text-decoration: none;
}

.reloc-tabs__tab.is-active {
	border-bottom-color: currentColor;
	font-weight: 600;
}

.reloc-notice {
	background: rgba(128, 128, 128, .12);
	border-radius: 6px;
	font-size: .88rem;
	margin: 0 0 16px;
	padding: 10px 12px;
}

.reloc-notice--warn {
	background: rgba(220, 160, 30, .18);
}

.reloc-notice--ok {
	background: rgba(46, 160, 100, .18);
}

.reloc-job__contact {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 10px;
	font-size: .9rem;
	margin: 8px 0;
}

.reloc-job__contact dt {
	opacity: .6;
}

.reloc-job__contact dd {
	margin: 0;
	overflow-wrap: anywhere;
}

.reloc-job__meta {
	font-size: .8rem;
	opacity: .7;
	margin: 6px 0 0;
}

.reloc-job--unlocked {
	border-left: 3px solid rgba(46, 160, 100, .8);
}

/* Credit packs */

.reloc-packs {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
}

.reloc-pack {
	border: 1px solid rgba(128, 128, 128, .25);
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 16px;
	text-align: center;
}

.reloc-pack__label {
	font-size: .75rem;
	letter-spacing: .05em;
	opacity: .6;
	text-transform: uppercase;
}

.reloc-pack__credits {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
}

.reloc-pack__unit {
	font-size: .78rem;
	opacity: .65;
}

.reloc-pack__price {
	font-weight: 600;
	margin: 6px 0 10px;
}

.reloc-ledger {
	border-collapse: collapse;
	font-size: .85rem;
	width: 100%;
}

.reloc-ledger td {
	border-bottom: 1px solid rgba(128, 128, 128, .18);
	padding: 8px 6px;
	vertical-align: top;
}

.reloc-ledger__amount {
	font-variant-numeric: tabular-nums;
	font-weight: 600;
	text-align: right;
	white-space: nowrap;
}

.reloc-ledger__amount.is-spend {
	opacity: .7;
}

.reloc-ledger__amount.is-gain {
	color: #2e7d55;
}

/* Lead consent */

.reloc-consent-card {
	border-top: 1px solid rgba(128, 128, 128, .2);
	margin-top: 16px;
	padding-top: 14px;
}

.reloc-check {
	align-items: flex-start;
	cursor: pointer;
	display: flex;
	gap: 10px;
}

.reloc-check input {
	flex: 0 0 auto;
	margin-top: 3px;
}

.reloc-check strong {
	display: block;
	font-size: .92rem;
}

.reloc-check small {
	display: block;
	font-size: .8rem;
	line-height: 1.45;
	margin-top: 2px;
	opacity: .72;
}

/* On the booking form this sits among required consents. It is optional, and
   it should not look like one of the boxes you must tick to continue. */
.reloc-check--offer {
	background: rgba(128, 128, 128, .07);
	border-radius: 8px;
	margin: 14px 0;
	padding: 12px 14px;
}

/* =====================================================================
   Lead detail dialog
   ===================================================================== */

.reloc-noscroll {
	overflow: hidden;
}

.reloc-lead-panel {
	inset: 0;
	position: fixed;
	z-index: 9999;
}

.reloc-lead-panel[hidden] {
	display: none;
}

.reloc-lead-panel__scrim {
	background: rgba(0, 0, 0, .5);
	inset: 0;
	position: absolute;
}

.reloc-lead-panel__box {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
	left: 50%;
	max-height: 85vh;
	max-width: 420px;
	overflow-y: auto;
	padding: 24px;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
}

.reloc-lead-panel__x {
	background: none;
	border: 0;
	color: #16202b;
	cursor: pointer;
	font-size: 1.6rem;
	line-height: 1;
	padding: 4px 8px;
	position: absolute;
	right: 10px;
	top: 10px;
}

.reloc-lead-panel__title {
	color: #16202b;
	font-size: 1.15rem;
	margin: 0 28px 2px 0;
}

.reloc-lead-panel__title small {
	color: #5d6b7a;
	display: block;
	font-size: .82rem;
	font-weight: 400;
	opacity: 1;
}

.reloc-lead-panel__when {
	color: #5d6b7a;
	font-size: .88rem;
	margin: 0 0 14px;
	opacity: 1;
}

.reloc-lead-panel__facts {
	display: grid;
	font-size: .9rem;
	gap: 6px 12px;
	grid-template-columns: auto 1fr;
	margin: 0 0 12px;
}

.reloc-lead-panel__facts dt {
	color: #5d6b7a;
	opacity: 1;
}

.reloc-lead-panel__facts dd {
	color: #16202b;
	margin: 0;
	overflow-wrap: anywhere;
	/* Masked runs of asterisks need a fixed pitch or they read as a glitch. */
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.reloc-lead-panel__facts.is-revealed dd {
	font-family: inherit;
	font-weight: 500;
}

.reloc-lead-panel__hint,
.reloc-lead-panel__slots,
.reloc-lead-panel__bal {
	color: #5d6b7a;
	font-size: .8rem;
	margin: 0 0 10px;
	opacity: 1;
}

.reloc-lead-panel__pitch {
	color: #16202b;
	font-size: .9rem;
	margin: 0 0 12px;
}

.reloc-lead-panel__act {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 16px;
}

.reloc-lead-panel__act .reloc-btn {
	background: var(--reloc-accent, #1f6f5c);
	border-radius: 6px;
	color: #fff;
	display: block;
	font-weight: 600;
	padding: 13px 20px;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.reloc-lead-panel__act .reloc-btn:hover,
.reloc-lead-panel__act .reloc-btn:focus-visible {
	background: #17594a;
	color: #fff;
	filter: none;
	opacity: 1;
}

.reloc-lead-panel__act .reloc-btn--ghost {
	background: none;
	border: 1px solid var(--reloc-line-strong, #c4ccd3);
	color: var(--reloc-ink, #16202b);
}

.reloc-lead-panel__act .reloc-btn--ghost:hover,
.reloc-lead-panel__act .reloc-btn--ghost:focus-visible {
	background: #f0efe9;
	color: var(--reloc-ink, #16202b);
}

.reloc-btn--ghost {
	background: none;
	border: 1px solid currentColor;
}

.reloc-lead-panel__msg:empty {
	display: none;
}

.reloc-lead-panel__msg {
	font-size: .85rem;
	margin: 12px 0 0;
}

.reloc-lead-panel__loading {
	color: #5d6b7a;
	padding: 20px 0;
	text-align: center;
}

/* No dark-mode override here.
 *
 * There used to be one: it flipped the box to #1e1e1e on a phone set to dark
 * mode, while every text colour inside stayed a fixed dark value — dark on
 * dark, unreadable, and only on other people's phones. The site itself is
 * light, so the panel is light too, stated explicitly rather than inherited.
 *
 * color-scheme: light stops the browser from inverting form controls and
 * scrollbars inside it. */
.reloc-lead-panel__box {
	color: #16202b;
	color-scheme: light;
}

.reloc-consent__notice {
	background: rgba(128, 128, 128, .09);
	border-radius: 8px;
	font-size: .84rem;
	line-height: 1.5;
	margin: 14px 0;
	padding: 12px 14px;
}

.reloc-lead__cost {
	font-weight: 600;
	opacity: .9;
}

.reloc-lead-panel__act .reloc-lead-panel__bal {
	text-align: center;
}

.reloc-req {
	color: #b3341c;
}

.reloc-form__req {
	font-size: .8rem;
	opacity: .6;
	margin: 0 0 12px;
}

.reloc-form .is-invalid {
	border-color: #b3341c;
	outline: 2px solid rgba(179, 52, 28, .25);
}

/* =====================================================================
   Supplier portal
   ---------------------------------------------------------------------
   Read in a van, one-handed, between jobs. So: a fixed rail on the left
   that never moves, dates set large enough to scan at arm's length, and
   the phone number as the biggest tap target on every card.

   The wallet block is the one loud thing. A balance of "25" tells a
   cleaner nothing; "buys 2 more jobs" is the number they came to check.
   Everything else stays quiet so that block carries the page.
   ===================================================================== */

.reloc-sp {
	--sp-ink: #12211c;
	--sp-paper: #fbfaf7;
	--sp-rail: #16352c;
	--sp-rail-ink: #e8efe9;
	--sp-edge: #e3e2dc;
	--sp-accent: var(--reloc-accent, #1f6f5c);
	--sp-warn: #b4791a;

	align-items: start;
	color: var(--sp-ink);
	display: grid;
	gap: 28px;
	grid-template-columns: 232px minmax(0, 1fr);
	margin: 0 auto;
	max-width: 1080px;
}

/* ---- the rail ---- */

.reloc-sp__side {
	background: var(--sp-rail);
	border-radius: 14px;
	color: var(--sp-rail-ink);
	display: flex;
	flex-direction: column;
	gap: 22px;
	padding: 22px 18px;
	position: sticky;
	top: 24px;
}

.reloc-sp__eyebrow {
	display: block;
	font-size: .66rem;
	letter-spacing: .16em;
	opacity: .55;
	text-transform: uppercase;
}

.reloc-sp__biz {
	font-size: 1.08rem;
	line-height: 1.25;
	margin: 4px 0 0;
	color: inherit;
}

.reloc-sp__pending {
	background: rgba(230, 180, 60, .18);
	border-radius: 999px;
	color: #f0cd82;
	display: inline-block;
	font-size: .7rem;
	margin-top: 8px;
	padding: 3px 9px;
}

/* ---- wallet: the signature block ---- */

.reloc-sp__wallet {
	background: rgba(255, 255, 255, .07);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	padding: 14px 14px 12px;
}

.reloc-sp__wallet-n {
	font-size: 2.6rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1;
	/* Tabular figures so the number does not jump when the balance changes. */
	font-variant-numeric: tabular-nums;
}

.reloc-sp__wallet-u {
	font-size: .74rem;
	letter-spacing: .1em;
	opacity: .6;
	text-transform: uppercase;
}

.reloc-sp__wallet-sub {
	font-size: .78rem;
	margin-top: 8px;
	opacity: .85;
}

.reloc-sp__topup {
	border: 1px solid rgba(255, 255, 255, .3);
	border-radius: 6px;
	color: inherit;
	display: block;
	font-size: .8rem;
	font-weight: 600;
	margin-top: 12px;
	padding: 8px;
	text-align: center;
	text-decoration: none;
}

.reloc-sp__topup:hover,
.reloc-sp__topup:focus-visible {
	background: rgba(255, 255, 255, .12);
	color: inherit;
}

/* ---- nav ---- */

.reloc-sp__nav {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.reloc-sp__link {
	align-items: center;
	border-radius: 8px;
	color: inherit;
	display: flex;
	font-size: .92rem;
	gap: 10px;
	padding: 10px 12px;
	text-decoration: none;
}

.reloc-sp__link:hover,
.reloc-sp__link:focus-visible {
	background: rgba(255, 255, 255, .09);
	color: inherit;
}

.reloc-sp__link.is-on {
	background: #fff;
	color: var(--sp-rail);
	font-weight: 600;
}

.reloc-sp__ico {
	fill: none;
	flex: 0 0 auto;
	height: 18px;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
	width: 18px;
}

.reloc-sp__label {
	flex: 1 1 auto;
}

.reloc-sp__count {
	background: rgba(255, 255, 255, .16);
	border-radius: 999px;
	font-size: .72rem;
	font-variant-numeric: tabular-nums;
	padding: 2px 8px;
}

.reloc-sp__link.is-on .reloc-sp__count {
	background: rgba(22, 53, 44, .12);
}

.reloc-sp__out {
	border-top: 1px solid rgba(255, 255, 255, .14);
	color: inherit;
	font-size: .8rem;
	opacity: .65;
	padding-top: 14px;
	text-decoration: none;
}

.reloc-sp__out:hover { opacity: 1; color: inherit; }

/* ---- main column ---- */

.reloc-sp__main {
	min-width: 0;
}

.reloc-sp__h {
	font-size: 1.02rem;
	letter-spacing: -.01em;
	margin: 0 0 14px;
}

.reloc-sp__h + .reloc-sp__grid { margin-bottom: 32px; }

.reloc-sp__note {
	color: #5d6b7a;
	font-size: .9rem;
}

.reloc-sp__grid {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
}

/* ---- job card ---- */

.reloc-jobcard {
	background: var(--sp-paper);
	border: 1px solid var(--sp-edge);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	padding: 16px;
}

.reloc-jobcard--assigned {
	border-left: 3px solid var(--sp-accent);
}

.reloc-jobcard__top {
	align-items: center;
	display: flex;
	gap: 12px;
	margin-bottom: 12px;
}

/* The date is the first thing a supplier looks for — big enough to read
   without picking the phone up off the dash. */
.reloc-jobcard__date {
	background: var(--sp-rail);
	border-radius: 8px;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	line-height: 1;
	padding: 8px 10px;
	text-align: center;
}

.reloc-jobcard__d {
	font-size: 1.35rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.reloc-jobcard__m {
	font-size: .62rem;
	letter-spacing: .1em;
	opacity: .75;
	text-transform: uppercase;
}

.reloc-jobcard__what {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.reloc-jobcard__what strong { font-size: .98rem; }
.reloc-jobcard__what small { color: #5d6b7a; font-size: .78rem; }

.reloc-jobcard__name {
	font-size: 1rem;
	font-weight: 600;
	margin: 0;
}

.reloc-jobcard__addr {
	color: #5d6b7a;
	font-size: .85rem;
	margin: 2px 0 14px;
}

.reloc-jobcard__acts {
	display: flex;
	gap: 8px;
	margin-top: auto;
}

.reloc-jobcard__act {
	background: var(--sp-accent);
	border: 1px solid var(--sp-accent);
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	flex: 1 1 auto;
	font: inherit;
	font-size: .88rem;
	font-weight: 600;
	padding: 11px 10px;
	text-align: center;
	text-decoration: none;
}

.reloc-jobcard__act:hover { filter: brightness(1.08); color: #fff; }

.reloc-jobcard__act--alt {
	background: none;
	color: var(--sp-ink);
	border-color: var(--sp-edge);
	flex: 0 0 auto;
}

.reloc-jobcard__act--alt:hover { background: #f0efe9; color: var(--sp-ink); }

.reloc-jobcard__foot {
	border-top: 1px solid var(--sp-edge);
	color: #5d6b7a;
	display: flex;
	font-size: .76rem;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 10px;
}

/* ---- empty state: an invitation, not an apology ---- */

.reloc-sp__empty {
	border: 1px dashed var(--sp-edge);
	border-radius: 14px;
	padding: 44px 28px;
	text-align: center;
}

.reloc-sp__empty h2 { font-size: 1.15rem; margin: 0 0 8px; }

.reloc-sp__empty p {
	color: #5d6b7a;
	margin: 0 auto 20px;
	max-width: 38ch;
}

.reloc-sp__cta {
	background: var(--sp-accent);
	border-radius: 7px;
	color: #fff;
	display: inline-block;
	font-weight: 600;
	padding: 12px 22px;
	text-decoration: none;
}

.reloc-sp__cta:hover { filter: brightness(1.08); color: #fff; }

/* ---- credit packs ---- */

.reloc-sp__packs {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
	margin-bottom: 32px;
}

.reloc-pk {
	background: var(--sp-paper);
	border: 1px solid var(--sp-edge);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	padding: 18px 16px;
	text-align: center;
}

.reloc-pk__tag {
	font-size: .66rem;
	letter-spacing: .13em;
	color: #5d6b7a;
	text-transform: uppercase;
}

.reloc-pk__n {
	font-size: 2.1rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.1;
}

.reloc-pk__u {
	font-size: .72rem;
	letter-spacing: .1em;
	color: #5d6b7a;
	text-transform: uppercase;
}

.reloc-pk__price {
	font-size: 1.05rem;
	font-weight: 700;
	margin-top: 12px;
}

.reloc-pk__each {
	color: #5d6b7a;
	font-size: .74rem;
	margin-bottom: 14px;
}

.reloc-pk__buy {
	background: var(--sp-accent);
	border: 0;
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-top: auto;
	padding: 11px;
}

.reloc-pk__buy:hover { filter: brightness(1.08); }
.reloc-pk__buy[disabled] { opacity: .5; cursor: wait; }

/* ---- ledger ---- */

.reloc-ledger {
	list-style: none;
	margin: 0;
	padding: 0;
}

.reloc-ledger__row {
	align-items: baseline;
	border-bottom: 1px solid var(--sp-edge);
	display: grid;
	gap: 12px;
	grid-template-columns: 84px minmax(0, 1fr) auto;
	padding: 11px 2px;
}

.reloc-ledger__when { color: #5d6b7a; font-size: .78rem; }
.reloc-ledger__what { font-size: .88rem; }

.reloc-ledger__n {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
	text-align: right;
}

.reloc-ledger__n.is-in { color: var(--sp-accent); }
.reloc-ledger__n.is-out { color: #5d6b7a; }

/* ---- narrow: the rail becomes a strip across the top ---- */

@media (max-width: 860px) {
	.reloc-sp {
		grid-template-columns: minmax(0, 1fr);
		gap: 18px;
	}

	.reloc-sp__side {
		gap: 16px;
		position: static;
	}

	.reloc-sp__wallet {
		align-items: baseline;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 8px;
	}

	.reloc-sp__wallet-sub { margin-top: 0; width: 100%; }
	.reloc-sp__topup { margin-top: 0; padding: 8px 16px; }

	.reloc-sp__nav {
		flex-direction: row;
		/* Scrolls rather than wraps: three items that wrap to two lines look
		   like a mistake on a 360px screen. */
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.reloc-sp__link { flex: 0 0 auto; }
	.reloc-sp__out { border-top: 0; padding-top: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.reloc-sp * { transition: none !important; }
}

/* ---- supplier profile forms ---- */

.reloc-sp__form {
	background: var(--sp-paper, #fbfaf7);
	border: 1px solid var(--sp-edge, #e3e2dc);
	border-radius: 12px;
	margin-bottom: 30px;
	padding: 20px;
}

.reloc-sp__fields {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.reloc-sp__fields p { margin: 0; }

.reloc-sp__fields label {
	display: block;
	font-size: .82rem;
	font-weight: 600;
	margin-bottom: 5px;
}

.reloc-sp__fields input {
	border: 1px solid var(--sp-edge, #e3e2dc);
	border-radius: 7px;
	font: inherit;
	padding: 11px 12px;
	width: 100%;
}

.reloc-sp__fields input:focus-visible {
	border-color: var(--sp-accent, #1f6f5c);
	outline: 2px solid rgba(31, 111, 92, .25);
}

.reloc-sp__fields input.is-invalid {
	border-color: #b3341c;
	outline: 2px solid rgba(179, 52, 28, .22);
}

.reloc-sp__fields small {
	color: #5d6b7a;
	display: block;
	font-size: .76rem;
	margin-top: 4px;
}

.reloc-sp__save {
	background: var(--sp-accent, #1f6f5c);
	border: 0;
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	margin-top: 16px;
	padding: 12px 22px;
}

.reloc-sp__save:hover { filter: brightness(1.08); }
.reloc-sp__save[disabled] { opacity: .55; cursor: wait; }

.reloc-sp__msg { font-size: .88rem; margin: 14px 0 0; }
.reloc-sp__msg:empty { display: none; }
.reloc-sp__msg.is-ok { color: var(--sp-accent, #1f6f5c); }
.reloc-sp__msg.is-bad { color: #b3341c; }

.reloc-sp__meta {
	display: grid;
	font-size: .88rem;
	gap: 6px 16px;
	grid-template-columns: auto 1fr;
	margin: 0;
}

.reloc-sp__meta dt { color: #5d6b7a; }
.reloc-sp__meta dd { margin: 0; }

/* Below the bidding floor. Amber, not red — nothing is broken, they just
   cannot take a job until they top up. */
.reloc-sp__wallet.is-low {
	background: rgba(230, 180, 60, .15);
	box-shadow: inset 0 0 0 1px rgba(240, 205, 130, .4);
}

.reloc-sp__wallet.is-low .reloc-sp__wallet-sub {
	color: #f0cd82;
	font-weight: 600;
	opacity: 1;
}

/* =====================================================================
   Job tiles
   ---------------------------------------------------------------------
   The calendar answers "what is on Tuesday". This answers "what is
   there for me" — so the service filter is the first thing, not an
   afterthought, and each tile carries enough to decide without opening
   anything.
   ===================================================================== */

.reloc-tiles {
	--tl-ink: #12211c;
	--tl-paper: #fbfaf7;
	--tl-edge: #e3e2dc;
	--tl-muted: #5d6b7a;
	--tl-accent: var(--reloc-accent, #1f6f5c);

	color: var(--tl-ink);
	margin: 20px 0;
}

.reloc-tiles.is-loading { opacity: .5; pointer-events: none; }

/* ---- filter chips ---- */

.reloc-tiles__bar { margin-bottom: 18px; }

.reloc-tiles__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.reloc-chip {
	align-items: center;
	background: none;
	border: 1px solid var(--tl-edge);
	border-radius: 999px;
	color: inherit;
	cursor: pointer;
	display: inline-flex;
	font: inherit;
	font-size: .86rem;
	gap: 7px;
	padding: 8px 14px;
}

.reloc-chip:hover { border-color: var(--tl-accent); }

.reloc-chip.is-on {
	background: var(--tl-accent);
	border-color: var(--tl-accent);
	color: #fff;
	font-weight: 600;
}

.reloc-chip__n {
	background: rgba(0, 0, 0, .07);
	border-radius: 999px;
	font-size: .74rem;
	font-variant-numeric: tabular-nums;
	padding: 1px 7px;
}

.reloc-chip.is-on .reloc-chip__n { background: rgba(255, 255, 255, .22); }

/* ---- the grid ---- */

.reloc-tiles__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.reloc-tile {
	background: var(--tl-paper);
	border: 1px solid var(--tl-edge);
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	padding: 16px;
}

.reloc-tile.is-mine { border-left: 3px solid var(--tl-accent); }
.reloc-tile.is-full { opacity: .6; }

.reloc-tile.is-pending {
	background: rgba(230, 180, 60, .1);
	border-color: rgba(180, 130, 20, .45);
	border-style: dashed;
}

.reloc-tile__top {
	align-items: center;
	display: flex;
	gap: 12px;
}

.reloc-tile__date {
	background: #16352c;
	border-radius: 8px;
	color: #fff;
	display: flex;
	flex: 0 0 auto;
	flex-direction: column;
	line-height: 1;
	padding: 8px 10px;
	text-align: center;
}

.reloc-tile__d {
	font-size: 1.3rem;
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.reloc-tile__m {
	font-size: .6rem;
	letter-spacing: .1em;
	opacity: .75;
	text-transform: uppercase;
}

.reloc-tile__head {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.reloc-tile__service { font-size: 1rem; }
.reloc-tile__when,
.reloc-tile__where { color: var(--tl-muted); font-size: .8rem; }

.reloc-tile__option {
	color: var(--tl-muted);
	font-size: .82rem;
	margin: 10px 0 0;
}

.reloc-tile__facts {
	display: grid;
	font-size: .84rem;
	gap: 3px 10px;
	grid-template-columns: auto minmax(0, 1fr);
	margin: 12px 0 0;
}

.reloc-tile__facts dt { color: var(--tl-muted); }

.reloc-tile__facts dd {
	margin: 0;
	overflow-wrap: anywhere;
	/* Masked runs need a fixed pitch or they read as a rendering fault. */
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.reloc-tile__facts.is-revealed dd {
	font-family: inherit;
	font-weight: 500;
}

.reloc-tile__foot {
	align-items: baseline;
	border-top: 1px solid var(--tl-edge);
	display: flex;
	justify-content: space-between;
	margin-top: 14px;
	padding-top: 10px;
}

.reloc-tile__slots { color: var(--tl-muted); font-size: .78rem; }
.reloc-tile__cost { font-size: .95rem; font-weight: 700; }

.reloc-tile__btn {
	background: var(--tl-accent);
	border: 0;
	border-radius: 7px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: .9rem;
	font-weight: 600;
	margin-top: 12px;
	padding: 11px;
	width: 100%;
}

/* State every property on hover.
 *
 * `filter: brightness()` alone left the theme free to supply its own
 * button:hover — which set a pale background and kept the label white,
 * so the text disappeared the moment the pointer touched it. Anything
 * that can be inherited is now stated outright. */
.reloc-tile__btn:hover,
.reloc-tile__btn:focus-visible {
	background: #17594a;
	border: 0;
	color: #fff;
	filter: none;
	opacity: 1;
}

.reloc-tile__btn:focus-visible {
	outline: 2px solid var(--tl-accent);
	outline-offset: 2px;
}

.reloc-tile.is-full .reloc-tile__btn,
.reloc-tile.is-mine .reloc-tile__btn {
	background: none;
	border: 1px solid var(--tl-edge);
	color: var(--tl-ink);
}

.reloc-tile.is-full .reloc-tile__btn:hover,
.reloc-tile.is-mine .reloc-tile__btn:hover,
.reloc-tile.is-full .reloc-tile__btn:focus-visible,
.reloc-tile.is-mine .reloc-tile__btn:focus-visible {
	background: #f0efe9;
	border: 1px solid var(--tl-edge);
	color: var(--tl-ink);
}

/* Take it exclusively — the rarer, dearer choice, so a link rather than a
   second button competing with Bid. */
.reloc-tile__exclusive {
	color: var(--tl-accent);
	display: block;
	font-size: .82rem;
	margin-top: 8px;
	text-align: center;
	text-decoration: underline;
}

.reloc-tile__exclusive:hover,
.reloc-tile__exclusive:focus-visible {
	color: #17594a;
	text-decoration: none;
}

.reloc-tiles__empty {
	border: 1px dashed var(--tl-edge);
	border-radius: 12px;
	color: var(--tl-muted);
	padding: 40px 20px;
	text-align: center;
}

/* ---- board view switch in the portal ---- */

.reloc-sp__views {
	display: inline-flex;
	border: 1px solid var(--sp-edge, #e3e2dc);
	border-radius: 8px;
	margin-bottom: 4px;
	overflow: hidden;
}

.reloc-sp__view {
	color: inherit;
	font-size: .86rem;
	padding: 8px 16px;
	text-decoration: none;
}

.reloc-sp__view.is-on {
	background: var(--sp-accent, #1f6f5c);
	color: #fff;
	font-weight: 600;
}

/* =====================================================================
   Phone pass — the rest of the front end
   ---------------------------------------------------------------------
   Read on a phone, one-handed. Targets at 44px minimum, nothing that
   forces a sideways scroll, and dialogs that behave like sheets rather
   than shrunken desktop modals.
   ===================================================================== */

@media (max-width: 700px) {

	/* A dialog centred with translate(-50%,-50%) on a 640px-tall screen
	   leaves the buttons below the fold with no way to reach them. Dock it
	   to the bottom and let it scroll, the way every native sheet does. */
	.reloc-lead-panel__box {
		border-radius: 14px 14px 0 0;
		bottom: 0;
		left: 0;
		max-height: 88vh;
		max-width: none;
		top: auto;
		transform: none;
		width: 100%;
		/* Clear of the home indicator on iOS. */
		padding-bottom: calc(24px + env(safe-area-inset-bottom));
	}

	.reloc-lead-panel__x {
		min-height: 44px;
		min-width: 44px;
	}

	.reloc-lead-panel__act .reloc-btn {
		min-height: 48px;
	}

	/* Tiles: one per row rather than a cramped two. */
	.reloc-tiles__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.reloc-tile__btn { min-height: 48px; }

	/* The chip row scrolls sideways rather than wrapping to four lines. */
	.reloc-tiles__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		padding-bottom: 4px;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}

	.reloc-tiles__chips::-webkit-scrollbar { display: none; }

	.reloc-chip {
		flex: 0 0 auto;
		min-height: 40px;
	}

	/* Supplier portal */
	.reloc-sp__grid { grid-template-columns: minmax(0, 1fr); }
	.reloc-jobcard__act { min-height: 48px; }
	.reloc-sp__packs { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.reloc-pk__buy,
	.reloc-sp__save { min-height: 48px; }

	.reloc-sp__fields { grid-template-columns: minmax(0, 1fr); }

	/* 16px on inputs: anything smaller and iOS zooms the page on focus,
	   which then leaves the form scrolled off to one side. */
	.reloc-sp__fields input,
	.reloc-form input,
	.reloc-form select,
	.reloc-form textarea {
		font-size: 16px;
	}

	/* The ledger's three columns become two lines rather than squeezing. */
	.reloc-ledger__row {
		grid-template-columns: minmax(0, 1fr) auto;
		row-gap: 2px;
	}

	.reloc-ledger__when {
		grid-column: 1 / -1;
		order: -1;
	}
}

/* Nothing on the front end should be able to push the page sideways. */
.reloc-tiles,
.reloc-leadcal,
.reloc-sp {
	max-width: 100%;
	overflow-x: hidden;
}

.reloc-tiles__note {
	background: rgba(128, 128, 128, .1);
	border-radius: 8px;
	font-size: .85rem;
	margin: 0 0 14px;
	padding: 10px 14px;
}

.reloc-tiles__hint {
	font-size: .8rem;
	margin: 14px auto 0;
	max-width: 46ch;
	opacity: .75;
}

/* The panel sits on top of the theme, and the theme may be doing anything —
   including its own dark mode. Pin the surface and let nothing inside it
   inherit a colour that could turn out to be light-on-light or dark-on-dark. */
.reloc-lead-panel__box,
.reloc-lead-panel__box p,
.reloc-lead-panel__box li,
.reloc-lead-panel__box dd,
.reloc-lead-panel__box span,
.reloc-lead-panel__box strong,
.reloc-lead-panel__box h2 {
	background-color: transparent;
}

.reloc-lead-panel__box {
	background-color: #fff;
}

/* Links inside the panel: the customer's phone and email once unlocked. */
.reloc-lead-panel__box a:not(.reloc-btn) {
	color: var(--reloc-accent, #1f6f5c);
}

/* Per-service questions on the booking form ---------------------------
   These sit inside the service label, revealed when it is ticked. */

.reloc-service__ask {
	border-top: 1px solid rgba(128, 128, 128, .2);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
}

.reloc-service__ask[hidden] { display: none; }

.reloc-ask {
	display: flex;
	flex: 1 1 120px;
	flex-direction: column;
	gap: 4px;
}

.reloc-ask label {
	font-size: .76rem;
	font-weight: 600;
	opacity: .8;
}

.reloc-ask input,
.reloc-ask select {
	border: 1px solid var(--reloc-line, #dfe4ea);
	border-radius: 6px;
	font: inherit;
	font-size: .9rem;
	padding: 8px 10px;
	width: 100%;
}

@media (max-width: 700px) {
	.reloc-ask input,
	.reloc-ask select { font-size: 16px; }
}

/* Job details wherever a lead is shown. Never masked. */
.reloc-jobdetail {
	background: rgba(31, 111, 92, .1);
	border-radius: 6px;
	color: #1f6f5c;
	display: inline-block;
	font-size: .78rem;
	font-weight: 600;
	margin-top: 8px;
	padding: 4px 9px;
}

.reloc-lead-panel__detail {
	background: rgba(31, 111, 92, .1);
	border-radius: 8px;
	color: #1a5c4c;
	font-size: .92rem;
	font-weight: 600;
	margin: 0 0 12px;
	padding: 10px 12px;
}

.reloc-daylist__detail {
	color: #1f6f5c !important;
	font-size: .76rem !important;
	font-weight: 600;
}


/* Date fields ---------------------------------------------------------
   The control itself is the browser's, and it shows whatever order the
   visitor's machine is set to. The line under it is ours. */

.reloc-date__hint {
	color: var(--reloc-muted, #5d6b7a);
	display: block;
	font-size: .78rem;
	margin-top: 4px;
}

.reloc-date__hint.is-set {
	color: var(--reloc-accent, #1f6f5c);
	font-weight: 600;
}

.reloc-ask__checks {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 14px;
}

.reloc-ask__check {
	align-items: center;
	display: flex;
	font-size: .84rem;
	font-weight: 400;
	gap: 6px;
}

/* What the job involves, in the operator's own words. */

.reloc-tile__brief {
	color: #16202b;
	font-size: .84rem;
	line-height: 1.45;
	margin: 10px 0 0;
}

.reloc-lead-panel__brief {
	color: #16202b;
	font-size: .9rem;
	line-height: 1.5;
	margin: 0 0 12px;
}

/* Taking a job exclusively. A link, not a second button: it is the rarer,
   more expensive choice and should not compete with Bid for attention. */

.reloc-lead-exclusive {
	color: var(--reloc-accent, #1f6f5c);
	display: block;
	font-size: .84rem;
	line-height: 1.45;
	text-align: center;
	text-decoration: underline;
}

.reloc-lead-exclusive:hover {
	color: var(--reloc-accent, #1f6f5c);
	text-decoration: none;
}

/* Shown once the free credits are gone. Not a banner ad — a short case,
   made at the one moment the supplier has evidence for it. */

.reloc-sp__pitch {
	background: rgba(31, 111, 92, .08);
	border-left: 3px solid var(--sp-accent, #1f6f5c);
	border-radius: 10px;
	margin-bottom: 24px;
	padding: 18px 20px;
}

.reloc-sp__pitch h2 {
	font-size: 1.05rem;
	margin: 0 0 8px;
}

.reloc-sp__pitch p {
	font-size: .9rem;
	line-height: 1.55;
	margin: 0 0 8px;
	max-width: 62ch;
}

.reloc-sp__pitch p:last-child { margin-bottom: 0; }

.reloc-jobcard__cancelled {
	background: rgba(200, 60, 60, .12);
	border-radius: 5px;
	color: #a03232;
	display: inline-block;
	font-size: .76rem;
	font-weight: 600;
	margin-bottom: 8px;
	padding: 4px 9px;
}

/* Walkthrough video. Public — it shows the job, not the customer. */

.reloc-lead-panel__video {
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 8px;
	margin: 0 0 14px;
	overflow: hidden;
}

.reloc-lead-panel__video iframe {
	border: 0;
	display: block;
	height: 100%;
	width: 100%;
}

/* On a tile it is a still, not a player: a dozen embedded players on one
   board is a dozen network requests nobody asked for. Tapping the tile
   opens the panel, where the real player is. */
.reloc-tile__video {
	border-radius: 8px;
	display: block;
	margin-top: 10px;
	overflow: hidden;
	position: relative;
}

.reloc-tile__video img {
	display: block;
	height: auto;
	width: 100%;
}

.reloc-tile__play {
	color: #fff;
	font-size: 1.6rem;
	left: 50%;
	position: absolute;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
	top: 50%;
	transform: translate(-50%, -55%);
}

.reloc-tile__videolabel {
	background: rgba(0, 0, 0, .65);
	border-radius: 4px;
	bottom: 6px;
	color: #fff;
	font-size: .7rem;
	font-weight: 600;
	left: 6px;
	padding: 3px 7px;
	position: absolute;
}

/* Booking photos. Public, like the video and the job details. */

.reloc-lead-panel__photos {
	display: grid;
	gap: 6px;
	grid-template-columns: repeat(3, 1fr);
	margin: 0 0 14px;
}

.reloc-lead-panel__photos a {
	aspect-ratio: 1;
	border-radius: 6px;
	display: block;
	overflow: hidden;
}

.reloc-lead-panel__photos img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.reloc-tile__photos {
	display: grid;
	gap: 4px;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 10px;
	position: relative;
}

.reloc-tile__photos img {
	aspect-ratio: 1;
	border-radius: 5px;
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.reloc-tile__more {
	align-items: center;
	background: rgba(0, 0, 0, .6);
	border-radius: 5px;
	bottom: 0;
	color: #fff;
	display: flex;
	font-size: .8rem;
	font-weight: 700;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 0;
	width: calc(33.333% - 3px);
}

/* Manager portal */

.reloc-mgr { max-width: 860px; }
.reloc-mgr__head h1 { margin: 0 0 4px; }
.reloc-mgr__head p { color: #5d6b7a; margin: 0 0 20px; }
.reloc-mgr__back { margin-bottom: 12px; }

.reloc-mgr__list { list-style: none; margin: 0; padding: 0; }
.reloc-mgr__list li + li { margin-top: 10px; }

.reloc-mgr__card {
	align-items: center;
	background: #fff;
	border: 1px solid #e3e2dc;
	border-radius: 10px;
	color: #16202b;
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 14px 16px;
	text-decoration: none;
}

.reloc-mgr__card:hover { border-color: var(--reloc-accent, #1f6f5c); }

.reloc-mgr__ref {
	background: #16352c;
	border-radius: 5px;
	color: #fff;
	font-size: .74rem;
	font-weight: 700;
	padding: 4px 8px;
}

.reloc-mgr__who { display: flex; flex-direction: column; }
.reloc-mgr__who span { color: #5d6b7a; font-size: .82rem; }
.reloc-mgr__meta { color: #5d6b7a; font-size: .82rem; margin-left: auto; }

.reloc-mgr__tag.is-off {
	background: rgba(200, 60, 60, .12);
	border-radius: 4px;
	color: #a03232;
	font-size: .72rem;
	font-weight: 600;
	padding: 3px 7px;
}

.reloc-mgr__job {
	background: #fff;
	border: 1px solid #e3e2dc;
	border-radius: 10px;
	margin-bottom: 16px;
	padding: 18px 20px;
}

.reloc-mgr__job.is-won { border-left: 3px solid #2e7d55; }
.reloc-mgr__job header { align-items: baseline; display: flex; gap: 12px; justify-content: space-between; }
.reloc-mgr__job h2 { font-size: 1.05rem; margin: 0; }
.reloc-mgr__job header span { color: #5d6b7a; font-size: .84rem; }

.reloc-mgr__detail { color: #1f6f5c; font-size: .84rem; font-weight: 600; margin: 6px 0 0; }
.reloc-mgr__winner { color: #2e7d55; font-weight: 600; margin: 10px 0 0; }
.reloc-mgr__none { color: #5d6b7a; font-size: .88rem; margin: 12px 0 0; }

.reloc-mgr__bidders { border-collapse: collapse; margin-top: 14px; width: 100%; }
.reloc-mgr__bidders th {
	border-bottom: 1px solid #e6e8ea;
	color: #5d6b7a;
	font-size: .74rem;
	font-weight: 600;
	padding: 0 8px 6px 0;
	text-align: left;
}
.reloc-mgr__bidders td { border-bottom: 1px solid #f0f1f2; font-size: .86rem; padding: 10px 8px 10px 0; vertical-align: top; }
.reloc-mgr__bidders tr.is-winner td { background: rgba(46, 125, 85, .07); }

.reloc-mgr__won { align-items: flex-end; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.reloc-mgr__won label { display: flex; flex-direction: column; gap: 4px; }
.reloc-mgr__won label span { font-size: .78rem; font-weight: 600; }
.reloc-mgr__won small { color: #5d6b7a; flex-basis: 100%; font-size: .76rem; }

.reloc-mgr__notice {
	background: rgba(31, 111, 92, .1);
	border-radius: 8px;
	margin-bottom: 16px;
	padding: 12px 14px;
}

.reloc-mgr__notice.is-bad { background: rgba(200, 60, 60, .1); color: #a03232; }

.reloc-mgr__empty {
	border: 1px dashed #e3e2dc;
	border-radius: 10px;
	padding: 40px 20px;
	text-align: center;
}

@media (max-width: 700px) {
	.reloc-mgr__meta { margin-left: 0; flex-basis: 100%; }
	.reloc-mgr__won { flex-direction: column; align-items: stretch; }
}

/* How bidding works ---------------------------------------------------
   A numbered run-through for a supplier who has not spent anything yet.
   Step three is the one that decides whether they win, so it is the one
   that looks different. */

.reloc-how { max-width: 64ch; }

.reloc-how__lead {
	font-size: 1rem;
	line-height: 1.6;
	margin: 0 0 22px;
}

.reloc-how__steps {
	counter-reset: how;
	list-style: none;
	margin: 0;
	padding: 0;
}

.reloc-how__steps > li {
	border-left: 2px solid var(--sp-edge, #e3e2dc);
	counter-increment: how;
	padding: 0 0 22px 22px;
	position: relative;
}

.reloc-how__steps > li:last-child { border-left-color: transparent; padding-bottom: 0; }

.reloc-how__steps > li::before {
	align-items: center;
	background: var(--sp-accent, #1f6f5c);
	border-radius: 999px;
	color: #fff;
	content: counter(how);
	display: flex;
	font-size: .78rem;
	font-weight: 700;
	height: 24px;
	justify-content: center;
	left: -13px;
	position: absolute;
	top: 0;
	width: 24px;
}

.reloc-how__steps h3 {
	font-size: .98rem;
	margin: 0 0 6px;
}

.reloc-how__steps p {
	font-size: .9rem;
	line-height: 1.6;
	margin: 0 0 8px;
}

.reloc-how__steps > li.is-urgent::before { background: #b4791a; }

.reloc-how__steps > li.is-urgent h3 {
	color: #8a5d00;
}

.reloc-how__aside {
	background: rgba(31, 111, 92, .08);
	border-radius: 10px;
	margin-top: 22px;
	padding: 16px 18px;
}

.reloc-how__aside h3 { font-size: .95rem; margin: 0 0 6px; }
.reloc-how__aside p { font-size: .88rem; line-height: 1.6; margin: 0 0 8px; }
.reloc-how__aside p:last-child { margin-bottom: 0; }

.reloc-how__aside.is-plain { background: rgba(128, 128, 128, .09); }

.reloc-how__aside.is-low {
	background: rgba(230, 180, 60, .14);
	text-align: center;
}

/* Per-service dates on the booking form */

.reloc-service__when[hidden] { display: none; }

.reloc-service__when {
	border-top: 1px solid rgba(128, 128, 128, .2);
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 10px;
	padding-top: 10px;
}

.reloc-svcdate__hint {
	color: var(--reloc-accent, #1f6f5c);
	display: block;
	font-size: .74rem;
	margin-top: 3px;
}

/* Changing a date from the customer portal */

.reloc-job-card__move {
	align-items: flex-end;
	border-top: 1px solid rgba(128, 128, 128, .18);
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
	padding-top: 12px;
}

.reloc-job-card__move label {
	display: flex;
	flex: 1 1 130px;
	flex-direction: column;
	gap: 3px;
}

.reloc-job-card__move label span { font-size: .72rem; font-weight: 600; opacity: .75; }

.reloc-job-card__move input,
.reloc-job-card__move select {
	border: 1px solid var(--reloc-line, #dfe4ea);
	border-radius: 6px;
	font: inherit;
	font-size: .84rem;
	padding: 7px 8px;
	width: 100%;
}

.reloc-job-card__save {
	background: var(--reloc-accent, #1f6f5c);
	border: 0;
	border-radius: 6px;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-size: .82rem;
	font-weight: 600;
	padding: 8px 14px;
}

.reloc-job-card__saved { color: #2e7d55; font-size: .78rem; font-weight: 600; }
.reloc-job-card__when { font-size: .8rem; margin: 8px 0 0; opacity: .75; }

@media (max-width: 700px) {
	.reloc-job-card__move input,
	.reloc-job-card__move select { font-size: 16px; }
}

/* An outbound link on a service card. Deliberately a link, not a button —
   it leaves the site, and it should not compete with picking the service. */

.reloc-service__link {
	color: var(--reloc-accent, #1f6f5c);
	display: inline-block;
	font-size: .82rem;
	font-weight: 600;
	margin-top: 6px;
	text-decoration: underline;
}

.reloc-service__link:hover,
.reloc-service__link:focus-visible {
	text-decoration: none;
}