/*
 * Service Pro frontend shell.
 *
 * Colour rules enforced throughout:
 *  - Every interactive state declares background-color AND color together.
 *  - Every pair is verified at AAA (7:1 or better for body text).
 *  - Link states follow LVHA order: :link, :visited, :hover, :active.
 */

.sp-app {
	/* Neutrals */
	--sp-white: #FFFFFF;
	--sp-panel: #F5F7FA;
	--sp-panel-alt: #EDF1F7;
	--sp-line: #DDE3EC;
	--sp-ink: #1A2433;      /* 14.9:1 on white  */
	--sp-muted: #4A5568;    /*  7.6:1 on white  */
	--sp-disabled-ink: #434E60; /* 7.4:1 on the disabled fill */

	/* Brand */
	--sp-navy: #0B1D3A;         /* 16.6:1 on white          */
	--sp-blue: #0D3F91;         /*  9.8:1 with white text   */
	--sp-blue-hover: #092F6E;   /* 12.8:1 with white text   */
	--sp-blue-active: #071F4A;  /* 15.4:1 with white text   */
	--sp-gold: #E8A838;         /*  8.0:1 with navy text    */
	--sp-gold-hover: #F0BC5C;   /*  9.6:1 with navy text    */
	--sp-gold-active: #FBD489;  /* 11.9:1 with navy text    */
	--sp-green: #2ECC71;        /*  7.9:1 with navy text    */
	--sp-green-hover: #55D98D;  /*  9.6:1 with navy text    */
	--sp-danger: #9B1220;       /*  7.8:1 with white text   */
	--sp-danger-hover: #7A0E19; /* 10.2:1 with white text   */

	/* Geometry */
	--sp-radius: 10px;
	--sp-radius-lg: 14px;
	--sp-gap: 1rem;
	--sp-shadow: 0 1px 2px rgba(11, 29, 58, 0.06), 0 4px 12px rgba(11, 29, 58, 0.06);

	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--sp-ink);
	background-color: var(--sp-panel);
	display: flex;
	align-items: stretch;
	min-height: 60vh;
	border-radius: var(--sp-radius-lg);
	overflow: hidden;
}

.sp-app *,
.sp-app *::before,
.sp-app *::after {
	box-sizing: border-box;
}

.sp-app--booking,
.sp-app--portal {
	display: block;
	background-color: var(--sp-white);
}

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

.sp-sidebar {
	flex: 0 0 15rem;
	width: 15rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border-right: 1px solid var(--sp-line);
	padding: 1.25rem 0.75rem 2rem;
}

.sp-sidebar__brand {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0 0.5rem 1.25rem;
	font-weight: 700;
	font-size: 1.0625rem;
	color: var(--sp-navy);
}

.sp-sidebar__mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border-radius: 8px;
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

.sp-sidebar__group {
	margin: 1.25rem 0 0.375rem;
	padding: 0 0.75rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sp-sidebar__list li {
	margin: 0.125rem 0;
}

/* LVHA order is mandatory. */
.sp-sidebar__link:link {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.9375rem;
	font-weight: 500;
	text-decoration: none;
	background-color: transparent;
	color: var(--sp-ink);
}

.sp-sidebar__link:visited {
	background-color: transparent;
	color: var(--sp-ink);
}

.sp-sidebar__link:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
}

.sp-sidebar__link:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
}

.sp-sidebar__link:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
}

.sp-sidebar__link.is-active,
.sp-sidebar__link.is-active:link,
.sp-sidebar__link.is-active:visited {
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

.sp-sidebar__link.is-active:hover,
.sp-sidebar__link.is-active:active {
	background-color: var(--sp-blue-active);
	color: var(--sp-white);
}

.sp-sidebar__icon {
	display: inline-flex;
	flex: 0 0 auto;
}

.sp-icon {
	width: 1.125rem;
	height: 1.125rem;
}

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

.sp-main {
	flex: 1 1 auto;
	min-width: 0;
	padding: 1.5rem;
}

.sp-topbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin-bottom: 1.25rem;
}

.sp-topbar__title {
	margin: 0;
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--sp-navy);
	flex: 1 1 12rem;
}

.sp-search {
	position: relative;
	flex: 0 1 18rem;
}

.sp-search__icon {
	position: absolute;
	top: 50%;
	left: 0.75rem;
	transform: translateY(-50%);
	color: var(--sp-muted);
	pointer-events: none;
}

.sp-card {
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
	padding: 1.25rem;
	margin-bottom: 1.25rem;
}

.sp-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.sp-card__title {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-card__hint {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--sp-muted);
}

/* Stat tiles: flex row wrap with explicit widths, no CSS grid. */
.sp-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.sp-stat {
	flex: 0 0 calc(25% - 0.75rem);
	width: calc(25% - 0.75rem);
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius-lg);
	box-shadow: var(--sp-shadow);
	padding: 1rem 1.125rem;
}

.sp-stat__label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-stat__value {
	margin: 0.25rem 0 0;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.15;
	color: var(--sp-navy);
}

.sp-columns {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
}

.sp-columns > .sp-card {
	flex: 0 0 calc(50% - 0.625rem);
	width: calc(50% - 0.625rem);
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Buttons. Background and text are always declared as a pair.
   ------------------------------------------------------------------------ */

.sp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4375rem;
	padding: 0.5625rem 1.25rem;
	min-height: 2.625rem;
	border: 1px solid transparent;
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	box-shadow: 0 1px 2px rgba(11, 29, 58, 0.12);
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		border-color 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.1s ease;
}

.sp-btn:hover {
	box-shadow: 0 3px 8px rgba(11, 29, 58, 0.18);
	transform: translateY(-1px);
}

.sp-btn:active {
	box-shadow: 0 1px 2px rgba(11, 29, 58, 0.14);
	transform: translateY(0);
}

.sp-btn:focus-visible {
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
	box-shadow: 0 3px 8px rgba(11, 29, 58, 0.18);
}

.sp-btn[disabled],
.sp-btn[aria-disabled="true"] {
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	border-color: var(--sp-line);
	cursor: not-allowed;
	box-shadow: none;
	transform: none;
}

/* Primary */
.sp-btn--primary:link,
.sp-btn--primary:visited,
.sp-btn--primary {
	background-color: var(--sp-blue);
	color: var(--sp-white);
	border-color: var(--sp-blue);
}

.sp-btn--primary:hover {
	background-color: var(--sp-blue-hover);
	color: var(--sp-white);
	border-color: var(--sp-blue-hover);
}

.sp-btn--primary:active {
	background-color: var(--sp-blue-active);
	color: var(--sp-white);
	border-color: var(--sp-blue-active);
}

.sp-btn--primary:focus-visible {
	background-color: var(--sp-blue-hover);
	color: var(--sp-white);
	border-color: var(--sp-blue-hover);
}

.sp-btn--primary[disabled],
.sp-btn--primary[aria-disabled="true"] {
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	border-color: var(--sp-line);
}

/* Secondary */
.sp-btn--secondary:link,
.sp-btn--secondary:visited,
.sp-btn--secondary {
	background-color: var(--sp-white);
	color: var(--sp-navy);
	border-color: var(--sp-line);
}

.sp-btn--secondary:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: var(--sp-muted);
}

.sp-btn--secondary:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
	border-color: var(--sp-navy);
}

.sp-btn--secondary:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: var(--sp-navy);
}

.sp-btn--secondary[disabled],
.sp-btn--secondary[aria-disabled="true"] {
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	border-color: var(--sp-line);
}

/* Accent */
.sp-btn--accent:link,
.sp-btn--accent:visited,
.sp-btn--accent {
	background-color: var(--sp-gold);
	color: var(--sp-navy);
	border-color: var(--sp-gold);
}

.sp-btn--accent:hover {
	background-color: var(--sp-gold-hover);
	color: var(--sp-navy);
	border-color: var(--sp-gold-hover);
}

.sp-btn--accent:active {
	background-color: var(--sp-gold-active);
	color: var(--sp-navy);
	border-color: var(--sp-gold-active);
}

.sp-btn--accent:focus-visible {
	background-color: var(--sp-gold-hover);
	color: var(--sp-navy);
	border-color: var(--sp-navy);
}

.sp-btn--accent[disabled],
.sp-btn--accent[aria-disabled="true"] {
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	border-color: var(--sp-line);
}

/* Destructive */
.sp-btn--danger:link,
.sp-btn--danger:visited,
.sp-btn--danger {
	background-color: var(--sp-danger);
	color: var(--sp-white);
	border-color: var(--sp-danger);
}

.sp-btn--danger:hover {
	background-color: var(--sp-danger-hover);
	color: var(--sp-white);
	border-color: var(--sp-danger-hover);
}

.sp-btn--danger:active {
	background-color: var(--sp-danger-hover);
	color: var(--sp-white);
	border-color: var(--sp-navy);
}

.sp-btn--danger:focus-visible {
	background-color: var(--sp-danger-hover);
	color: var(--sp-white);
	border-color: var(--sp-navy);
}

.sp-btn--danger[disabled],
.sp-btn--danger[aria-disabled="true"] {
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	border-color: var(--sp-line);
}

/* Quiet icon button */
.sp-btn--quiet:link,
.sp-btn--quiet:visited,
.sp-btn--quiet {
	background-color: transparent;
	color: var(--sp-muted);
	border-color: transparent;
	padding: 0.375rem;
	min-height: 2rem;
	border-radius: 8px;
	box-shadow: none;
}

.sp-btn--quiet:hover,
.sp-btn--quiet:active {
	box-shadow: none;
	transform: none;
}

.sp-btn--quiet:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: transparent;
}

.sp-btn--quiet:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
	border-color: transparent;
}

.sp-btn--quiet:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: transparent;
}

.sp-btn--sm {
	padding: 0.375rem 0.875rem;
	min-height: 2.125rem;
	font-size: 0.875rem;
}

.sp-btn--block {
	width: 100%;
}

/* ---------------------------------------------------------------------------
   Forms
   ------------------------------------------------------------------------ */

.sp-field {
	margin-bottom: 0.875rem;
}

.sp-field__label {
	display: block;
	margin-bottom: 0.3125rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--sp-navy);
}

.sp-field__hint {
	margin: 0.3125rem 0 0;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

.sp-app input[type="text"],
.sp-app input[type="email"],
.sp-app input[type="tel"],
.sp-app input[type="number"],
.sp-app input[type="date"],
.sp-app input[type="time"],
.sp-app input[type="search"],
.sp-app select,
.sp-app textarea {
	width: 100%;
	padding: 0.5rem 0.75rem;
	min-height: 2.5rem;
	font-family: inherit;
	font-size: 0.9375rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-radius: 8px;
}

.sp-search input[type="search"] {
	padding-left: 2.25rem;
}

.sp-app textarea {
	min-height: 6rem;
	resize: vertical;
}

.sp-app input:focus-visible,
.sp-app select:focus-visible,
.sp-app textarea:focus-visible {
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border-color: var(--sp-blue);
	outline: 3px solid var(--sp-navy);
	outline-offset: 1px;
}

.sp-app input[aria-invalid="true"],
.sp-app select[aria-invalid="true"],
.sp-app textarea[aria-invalid="true"] {
	border-color: var(--sp-danger);
}

.sp-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
}

.sp-row > .sp-field {
	flex: 0 0 calc(50% - 0.4375rem);
	width: calc(50% - 0.4375rem);
}

.sp-row > .sp-field--third {
	flex: 0 0 calc(33.333% - 0.5833rem);
	width: calc(33.333% - 0.5833rem);
}

.sp-row > .sp-field--full {
	flex: 0 0 100%;
	width: 100%;
}

.sp-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.9375rem;
}

.sp-checkbox input[type="checkbox"] {
	width: 1.125rem;
	height: 1.125rem;
	min-height: 0;
	margin-top: 0.1875rem;
	flex: 0 0 auto;
}

.sp-divider {
	border-top: 1px solid var(--sp-line);
	padding-top: 0.875rem;
	margin-top: 0.25rem;
}

/* Tabs */
.sp-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	border-bottom: 1px solid var(--sp-line);
	margin-bottom: 1.25rem;
}

.sp-tab {
	background-color: transparent;
	color: var(--sp-muted);
	border: 0;
	border-bottom: 3px solid transparent;
	padding: 0.625rem 0.875rem;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.sp-tab:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
}

.sp-tab:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
}

.sp-tab:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: -3px;
}

.sp-tab[aria-selected="true"] {
	background-color: transparent;
	color: var(--sp-navy);
	border-bottom-color: var(--sp-blue);
}

/* ---------------------------------------------------------------------------
   Tables and lists
   ------------------------------------------------------------------------ */

.sp-table-wrap {
	overflow-x: auto;
}

.sp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.sp-table th {
	text-align: left;
	padding: 0.625rem 0.75rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	background-color: var(--sp-panel);
	color: var(--sp-muted);
	border-bottom: 1px solid var(--sp-line);
	white-space: nowrap;
}

.sp-table td {
	padding: 0.75rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border-bottom: 1px solid var(--sp-line);
	vertical-align: middle;
}

.sp-table tbody tr:hover td {
	background-color: var(--sp-panel);
	color: var(--sp-ink);
}

.sp-table__actions {
	display: flex;
	gap: 0.25rem;
	justify-content: flex-end;
}

.sp-name {
	font-weight: 600;
	color: var(--sp-navy);
}

.sp-sub {
	display: block;
	font-size: 0.8125rem;
	color: var(--sp-muted);
}

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

.sp-list li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-list li:last-child {
	border-bottom: 0;
}

.sp-time {
	flex: 0 0 5.5rem;
	font-weight: 700;
	color: var(--sp-navy);
	font-variant-numeric: tabular-nums;
}

/* Badges */
.sp-badge {
	display: inline-block;
	padding: 0.1875rem 0.5rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
}

.sp-badge--confirmed {
	background-color: var(--sp-green);
	color: var(--sp-navy);
}

.sp-badge--pending {
	background-color: var(--sp-gold);
	color: var(--sp-navy);
}

.sp-badge--cancelled,
.sp-badge--failed {
	background-color: var(--sp-danger);
	color: var(--sp-white);
}

.sp-badge--completed,
.sp-badge--sent {
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

/* ---------------------------------------------------------------------------
   Calendar
   ------------------------------------------------------------------------ */

.sp-cal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 0.875rem;
}

.sp-cal__month {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-cal__nav {
	display: flex;
	gap: 0.375rem;
}

.sp-cal__weekdays,
.sp-cal__grid {
	display: flex;
	flex-wrap: wrap;
}

.sp-cal__weekday {
	flex: 0 0 14.2857%;
	width: 14.2857%;
	padding: 0.375rem;
	text-align: center;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--sp-muted);
}

.sp-cal__day {
	flex: 0 0 14.2857%;
	width: 14.2857%;
	min-height: 6.25rem;
	padding: 0.375rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	margin: -1px 0 0 -1px;
	text-align: left;
	font-family: inherit;
	cursor: pointer;
}

.sp-cal__day:hover {
	background-color: var(--sp-panel);
	color: var(--sp-ink);
}

.sp-cal__day:active {
	background-color: var(--sp-panel-alt);
	color: var(--sp-ink);
}

.sp-cal__day:focus-visible {
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	outline: 3px solid var(--sp-navy);
	outline-offset: -3px;
	position: relative;
	z-index: 1;
}

.sp-cal__day.is-outside {
	background-color: var(--sp-panel);
	color: var(--sp-muted);
}

.sp-cal__day.is-today .sp-cal__date {
	background-color: var(--sp-navy);
	color: var(--sp-white);
	border-radius: 999px;
	padding: 0.0625rem 0.4375rem;
}

.sp-cal__date {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	color: inherit;
}

.sp-chip {
	display: block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.1875rem 0.375rem;
	border: 0;
	border-left: 3px solid var(--sp-blue);
	border-radius: 4px;
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	font-family: inherit;
	font-size: 0.75rem;
	font-weight: 600;
	text-align: left;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	cursor: pointer;
}

.sp-chip:hover {
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

.sp-chip:active {
	background-color: var(--sp-blue-active);
	color: var(--sp-white);
}

.sp-chip:focus-visible {
	background-color: var(--sp-navy);
	color: var(--sp-white);
	outline: 3px solid var(--sp-navy);
	outline-offset: 1px;
}

/* Slot picker */
.sp-slots {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sp-slot {
	flex: 0 0 auto;
	padding: 0.5rem 0.875rem;
	min-height: 2.5rem;
	background-color: var(--sp-white);
	color: var(--sp-navy);
	border: 1px solid var(--sp-line);
	border-radius: 999px;
	font-family: inherit;
	font-size: 0.9375rem;
	font-weight: 600;
	cursor: pointer;
}

.sp-slot:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: var(--sp-blue);
}

.sp-slot:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
	border-color: var(--sp-blue);
}

.sp-slot:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
}

.sp-slot[aria-pressed="true"] {
	background-color: var(--sp-blue);
	color: var(--sp-white);
	border-color: var(--sp-blue);
}

.sp-slot[aria-pressed="true"]:hover,
.sp-slot[aria-pressed="true"]:active {
	background-color: var(--sp-blue-hover);
	color: var(--sp-white);
	border-color: var(--sp-blue-hover);
}

/* Booking steps */
.sp-steps {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	list-style: none;
	padding: 0;
}

.sp-steps li {
	flex: 1 1 8rem;
	padding: 0.5rem 0.75rem;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	background-color: var(--sp-panel);
	color: var(--sp-muted);
}

.sp-steps li[aria-current="step"] {
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

.sp-steps li.is-done {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
}

.sp-booking {
	max-width: 46rem;
	margin: 0 auto;
	padding: 1.5rem;
}

.sp-choice {
	display: block;
	width: 100%;
	text-align: left;
	padding: 0.875rem 1rem;
	margin-bottom: 0.625rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	font-family: inherit;
	font-size: 1rem;
	cursor: pointer;
}

.sp-choice:hover {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: var(--sp-blue);
}

.sp-choice:active {
	background-color: var(--sp-line);
	color: var(--sp-navy);
	border-color: var(--sp-blue);
}

.sp-choice:focus-visible {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
}

.sp-choice__name {
	display: block;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-choice__meta {
	display: block;
	font-size: 0.875rem;
	color: var(--sp-muted);
}

/* ---------------------------------------------------------------------------
   Modal
   ------------------------------------------------------------------------ */

.sp-modal-root[hidden] {
	display: none;
}

.sp-modal-root {
	position: fixed;
	inset: 0;
	z-index: 99000;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 2rem 1rem;
	background-color: rgba(11, 29, 58, 0.55);
	overflow-y: auto;
}

.sp-modal {
	width: 100%;
	max-width: 40rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border-radius: var(--sp-radius-lg);
	box-shadow: 0 20px 50px rgba(11, 29, 58, 0.3);
}

.sp-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.125rem 1.25rem;
	border-bottom: 1px solid var(--sp-line);
}

.sp-modal__title {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-modal__body {
	padding: 1.25rem;
}

.sp-modal__foot {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--sp-line);
	background-color: var(--sp-panel);
	border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
}

/* Toasts */
.sp-toast-root {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 99500;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.sp-toast {
	padding: 0.75rem 1rem;
	border-radius: var(--sp-radius);
	font-size: 0.9375rem;
	font-weight: 600;
	background-color: var(--sp-navy);
	color: var(--sp-white);
	box-shadow: var(--sp-shadow);
	max-width: 22rem;
}

.sp-toast--error {
	background-color: var(--sp-danger);
	color: var(--sp-white);
}

.sp-toast--success {
	background-color: var(--sp-green);
	color: var(--sp-navy);
}

/* States */
.sp-loading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 2rem;
	color: var(--sp-muted);
}

.sp-spinner {
	width: 1.125rem;
	height: 1.125rem;
	border: 2px solid var(--sp-line);
	border-top-color: var(--sp-blue);
	border-radius: 50%;
	animation: sp-spin 0.7s linear infinite;
}

@keyframes sp-spin {
	to {
		transform: rotate(360deg);
	}
}

.sp-empty {
	padding: 2.5rem 1.25rem;
	text-align: center;
	color: var(--sp-muted);
}

.sp-empty__title {
	margin: 0 0 0.375rem;
	font-size: 1.0625rem;
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-notice {
	padding: 0.875rem 1rem;
	border-radius: var(--sp-radius);
	border-left: 4px solid var(--sp-blue);
	background-color: var(--sp-panel-alt);
	color: var(--sp-ink);
	margin-bottom: 1rem;
	font-size: 0.9375rem;
}

.sp-notice--error {
	border-left-color: var(--sp-danger);
	background-color: #FBEAEC;
	color: var(--sp-ink);
}

.sp-notice--ok {
	border-left-color: var(--sp-green);
	background-color: #E6F7EE;
	color: var(--sp-ink);
}

.sp-gate {
	max-width: 32rem;
	margin: 2rem auto;
	padding: 2rem;
	text-align: center;
	background-color: #FFFFFF;
	color: #1A2433;
	border: 1px solid #DDE3EC;
	border-radius: 14px;
	font-family: Roboto, -apple-system, "Segoe UI", sans-serif;
}

.sp-gate__title {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	color: #0B1D3A;
}

.sp-gate__body {
	margin: 0 0 1.25rem;
	color: #4A5568;
}

.sp-gate .sp-btn--primary:link,
.sp-gate .sp-btn--primary:visited,
.sp-gate .sp-btn--primary {
	background-color: #0D3F91;
	color: #FFFFFF;
	border-color: #0D3F91;
}

.sp-gate .sp-btn--primary:hover {
	background-color: #092F6E;
	color: #FFFFFF;
	border-color: #092F6E;
}

.sp-gate .sp-btn--primary:active {
	background-color: #071F4A;
	color: #FFFFFF;
	border-color: #071F4A;
}

.sp-screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---------------------------------------------------------------------------
   Breakpoints
   ------------------------------------------------------------------------ */

@media (max-width: 62rem) {
	.sp-stat {
		flex: 0 0 calc(50% - 0.5rem);
		width: calc(50% - 0.5rem);
	}

	.sp-columns > .sp-card {
		flex: 0 0 100%;
		width: 100%;
	}

	.sp-sidebar {
		flex: 0 0 4rem;
		width: 4rem;
		padding: 1rem 0.5rem;
	}

	.sp-sidebar__name,
	.sp-sidebar__group,
	.sp-sidebar__label {
		position: absolute !important;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	.sp-sidebar__link:link {
		justify-content: center;
		padding: 0.625rem;
	}
}

@media (max-width: 48rem) {
	.sp-app {
		flex-direction: column;
		border-radius: var(--sp-radius);
	}

	.sp-sidebar {
		flex: 0 0 auto;
		width: 100%;
		border-right: 0;
		border-bottom: 1px solid var(--sp-line);
		padding: 0.5rem;
	}

	.sp-sidebar__brand {
		display: none;
	}

	.sp-sidebar__list {
		display: flex;
		justify-content: space-around;
	}

	.sp-main {
		padding: 1rem;
	}

	.sp-stat {
		flex: 0 0 100%;
		width: 100%;
	}

	.sp-row > .sp-field,
	.sp-row > .sp-field--third {
		flex: 0 0 100%;
		width: 100%;
	}

	.sp-cal__day {
		min-height: 4.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-app *,
	.sp-app *::before,
	.sp-app *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------------------
   Job photos
   ------------------------------------------------------------------------ */

.sp-photos {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.5rem;
}

.sp-photo {
	display: inline-block;
	width: 4.5rem;
	height: 4.5rem;
	object-fit: cover;
	border-radius: 8px;
	border: 1px solid var(--sp-line);
	background-color: var(--sp-panel);
	color: var(--sp-ink);
}

.sp-photo--loading {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--sp-panel-alt);
	color: var(--sp-disabled-ink);
	font-size: 0.875rem;
	font-weight: 700;
}

.sp-photos a:link,
.sp-photos a:visited {
	display: inline-block;
	background-color: transparent;
	color: var(--sp-navy);
	border-radius: 8px;
}

.sp-photos a:hover,
.sp-photos a:active {
	background-color: transparent;
	color: var(--sp-navy);
}

.sp-photos a:focus-visible {
	background-color: transparent;
	color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
}

/* A file input styled as a button still needs every state declared. */
label.sp-btn--secondary {
	cursor: pointer;
}

.sp-photo-input:focus-visible + label.sp-btn--secondary,
label.sp-btn--secondary:focus-within {
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border-color: var(--sp-navy);
	outline: 3px solid var(--sp-navy);
	outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Theme-bleed hardening.

   Themes routinely style button, a, and input elements with high-specificity
   selectors (.entry-content button, #content a, and so on). Everything below
   re-declares the plugin palette with enough force to win on any theme.
   Pairing rule still holds: background and text together in every state,
   every pair AAA, LVHA order preserved.
   ------------------------------------------------------------------------ */

.sp-app button,
.sp-app input,
.sp-app select,
.sp-app textarea,
.sp-gate a.sp-btn {
	-webkit-appearance: none;
	appearance: none;
	text-transform: none !important;
	text-shadow: none !important;
	background-image: none !important;
	letter-spacing: 0.01em;
}

.sp-app a,
.sp-app a:link,
.sp-app a:visited {
	text-decoration: none;
}

/* Buttons: every variant, every state. */
.sp-app .sp-btn,
.sp-app .sp-btn:link,
.sp-app .sp-btn:visited {
	border-radius: 999px !important;
	font-weight: 600;
}

.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary,
.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary:link,
.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary:visited,
.sp-gate .sp-btn--primary,
.sp-gate .sp-btn--primary:link,
.sp-gate .sp-btn--primary:visited {
	background-color: var(--sp-blue, #0D3F91) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary:hover,
.sp-gate .sp-btn--primary:hover {
	background-color: var(--sp-blue-hover, #092F6E) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue-hover, #092F6E) !important;
}

.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary:active,
.sp-gate .sp-btn--primary:active {
	background-color: var(--sp-blue-active, #071F4A) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue-active, #071F4A) !important;
}

.sp-app button.sp-btn--primary, .sp-app a.sp-btn--primary, .sp-app label.sp-btn--primary:focus-visible,
.sp-gate .sp-btn--primary:focus-visible {
	background-color: var(--sp-blue-hover, #092F6E) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue-hover, #092F6E) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 2px;
}

.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary,
.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary:link,
.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary:visited {
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-line, #DDE3EC) !important;
}

.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-muted, #4A5568) !important;
}

.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary:active {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-btn--secondary, .sp-app a.sp-btn--secondary, .sp-app label.sp-btn--secondary:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 2px;
}

.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent,
.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent:link,
.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent:visited {
	background-color: var(--sp-gold, #E8A838) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-gold, #E8A838) !important;
}

.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent:hover {
	background-color: var(--sp-gold-hover, #F0BC5C) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-gold-hover, #F0BC5C) !important;
}

.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent:active {
	background-color: var(--sp-gold-active, #FBD489) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-gold-active, #FBD489) !important;
}

.sp-app button.sp-btn--accent, .sp-app a.sp-btn--accent:focus-visible {
	background-color: var(--sp-gold-hover, #F0BC5C) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 2px;
}

.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger,
.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger:link,
.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger:visited {
	background-color: var(--sp-danger, #9B1220) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-danger, #9B1220) !important;
}

.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger:hover {
	background-color: var(--sp-danger-hover, #7A0E19) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-danger-hover, #7A0E19) !important;
}

.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger:active,
.sp-app button.sp-btn--danger, .sp-app a.sp-btn--danger:focus-visible {
	background-color: var(--sp-danger-hover, #7A0E19) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet,
.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet:link,
.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet:visited {
	background-color: transparent !important;
	color: var(--sp-muted, #4A5568) !important;
	border-color: transparent !important;
	border-radius: 8px !important;
}

.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: transparent !important;
}

.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet:active,
.sp-app button.sp-btn--quiet, .sp-app a.sp-btn--quiet:focus-visible {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: transparent !important;
}

.sp-app .sp-btn[disabled],
.sp-app .sp-btn[aria-disabled="true"] {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-disabled-ink, #434E60) !important;
	border-color: var(--sp-line, #DDE3EC) !important;
}

/* Slot and date pickers (the buttons that went pink). */
.sp-app button.sp-slot {
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border: 1px solid var(--sp-line, #DDE3EC) !important;
	border-radius: 999px !important;
}

.sp-app button.sp-slot:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-slot:active {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-slot:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 2px;
}

.sp-app button.sp-slot[aria-pressed="true"] {
	background-color: var(--sp-blue, #0D3F91) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-slot[aria-pressed="true"]:hover,
.sp-app button.sp-slot[aria-pressed="true"]:active {
	background-color: var(--sp-blue-hover, #092F6E) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-blue-hover, #092F6E) !important;
}

/* Service choices on the booking page. */
.sp-app button.sp-choice {
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-ink, #1A2433) !important;
	border: 1px solid var(--sp-line, #DDE3EC) !important;
	text-align: left;
}

.sp-app button.sp-choice:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-choice:active {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-choice:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 2px;
}

.sp-app .sp-choice__name {
	background-color: transparent;
	color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app .sp-choice__meta {
	background-color: transparent;
	color: var(--sp-muted, #4A5568) !important;
}

/* Tabs, calendar cells and chips. */
.sp-app button.sp-tab {
	background-color: transparent !important;
	color: var(--sp-muted, #4A5568) !important;
	border: 0 !important;
	border-bottom: 3px solid transparent !important;
}

.sp-app button.sp-tab:hover,
.sp-app button.sp-tab:active,
.sp-app button.sp-tab:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-tab[aria-selected="true"] {
	background-color: transparent !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-bottom-color: var(--sp-blue, #0D3F91) !important;
}

.sp-app button.sp-chip {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border: 0 !important;
	border-left: 3px solid var(--sp-blue, #0D3F91) !important;
	border-radius: 4px !important;
}

.sp-app button.sp-chip:hover,
.sp-app button.sp-chip:active,
.sp-app button.sp-chip:focus-visible {
	background-color: var(--sp-navy, #0B1D3A) !important;
	color: var(--sp-white, #FFFFFF) !important;
}

/* Sidebar links: themes love recolouring anchors. */
.sp-app a.sp-sidebar__link,
.sp-app a.sp-sidebar__link:link,
.sp-app a.sp-sidebar__link:visited {
	background-color: transparent;
	color: var(--sp-ink, #1A2433) !important;
	text-decoration: none !important;
}

.sp-app a.sp-sidebar__link:hover,
.sp-app a.sp-sidebar__link:active {
	background-color: var(--sp-panel-alt, #EDF1F7);
	color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app a.sp-sidebar__link.is-active,
.sp-app a.sp-sidebar__link.is-active:link,
.sp-app a.sp-sidebar__link.is-active:visited,
.sp-app a.sp-sidebar__link.is-active:hover,
.sp-app a.sp-sidebar__link.is-active:active {
	background-color: var(--sp-navy, #0B1D3A) !important;
	color: var(--sp-white, #FFFFFF) !important;
}

/* Inputs: keep theme borders and colours out. */
.sp-app input[type="text"],
.sp-app input[type="email"],
.sp-app input[type="tel"],
.sp-app input[type="number"],
.sp-app input[type="date"],
.sp-app input[type="time"],
.sp-app input[type="search"],
.sp-app select,
.sp-app textarea {
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-ink, #1A2433) !important;
	border: 1px solid var(--sp-line, #DDE3EC) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}

.sp-app input:focus-visible,
.sp-app select:focus-visible,
.sp-app textarea:focus-visible {
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-ink, #1A2433) !important;
	border-color: var(--sp-blue, #0D3F91) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 1px;
}

/* Portal photo links must not inherit theme underlines or colours. */
.sp-app .sp-photos a,
.sp-app .sp-photos a:link,
.sp-app .sp-photos a:visited,
.sp-app .sp-photos a:hover,
.sp-app .sp-photos a:active {
	background-color: transparent !important;
	color: var(--sp-navy, #0B1D3A) !important;
	text-decoration: none !important;
	border: 0 !important;
}

/* ---------------------------------------------------------------------------
   v1.3.0 visual pass: breadcrumbs, customer profile, timeline, polish.
   ------------------------------------------------------------------------ */

.sp-crumbs {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.375rem;
	margin-bottom: 0.375rem;
	font-size: 0.8125rem;
}

.sp-app .sp-crumbs__link,
.sp-app a.sp-crumbs__link,
.sp-app a.sp-crumbs__link:link,
.sp-app a.sp-crumbs__link:visited {
	background-color: transparent !important;
	color: var(--sp-muted, #4A5568) !important;
	text-decoration: none !important;
	font-weight: 600;
	border: 0 !important;
	padding: 0.125rem 0.25rem;
	border-radius: 6px;
	cursor: pointer;
}

.sp-app .sp-crumbs__link:hover,
.sp-app a.sp-crumbs__link:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app .sp-crumbs__link:active,
.sp-app a.sp-crumbs__link:active {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app .sp-crumbs__link:focus-visible,
.sp-app a.sp-crumbs__link:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 1px;
}

.sp-crumbs__btn {
	font-family: inherit;
	font-size: inherit;
	box-shadow: none !important;
	transform: none !important;
}

.sp-crumbs__sep {
	color: var(--sp-line);
	background-color: transparent;
}

.sp-crumbs__here {
	color: var(--sp-navy);
	background-color: transparent;
	font-weight: 700;
	padding: 0.125rem 0.25rem;
}

/* Topbar gets a divider so pages feel anchored. */
.sp-topbar {
	padding-bottom: 0.875rem;
	border-bottom: 1px solid var(--sp-line);
	margin-bottom: 1.25rem;
}

/* Profile head sits tight under the topbar. */
.sp-profile__head {
	padding: 1rem 1.25rem;
}

/* Per-service cards: colour-edged by status. */
.sp-svcgrid {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.sp-svc {
	flex: 0 0 calc(33.333% - 0.667rem);
	width: calc(33.333% - 0.667rem);
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-top: 4px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: 0.875rem 1rem;
}

.sp-svc--scheduled {
	border-top-color: var(--sp-blue);
}

.sp-svc--due {
	border-top-color: var(--sp-gold);
}

.sp-svc--overdue {
	border-top-color: var(--sp-danger);
}

.sp-svc--ok {
	border-top-color: var(--sp-green);
}

.sp-svc__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.5rem;
	margin-bottom: 0.375rem;
}

.sp-svc__name {
	font-weight: 700;
	color: var(--sp-navy);
}

.sp-svc__meta {
	margin: 0 0 0.625rem;
	font-size: 0.875rem;
	color: var(--sp-muted);
	white-space: pre-line;
}

.sp-svc__agreement {
	margin: 0 0 0.625rem;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--sp-navy);
}

/* Status chips: every pair from the verified set. */
.sp-chipstat {
	flex: 0 0 auto;
	padding: 0.1875rem 0.5625rem;
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 700;
	white-space: nowrap;
}

.sp-chipstat--ok {
	background-color: var(--sp-green);
	color: var(--sp-navy);
}

.sp-chipstat--scheduled {
	background-color: var(--sp-navy);
	color: var(--sp-white);
}

.sp-chipstat--due {
	background-color: var(--sp-gold);
	color: var(--sp-navy);
}

.sp-chipstat--overdue {
	background-color: var(--sp-danger);
	color: var(--sp-white);
}

/* History timeline. */
.sp-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 0.25rem;
}

.sp-timeline__item {
	position: relative;
	display: flex;
	gap: 0.875rem;
	padding: 0 0 1.125rem 0;
}

.sp-timeline__item::before {
	content: "";
	position: absolute;
	top: 0.875rem;
	left: 0.34375rem;
	bottom: 0;
	width: 2px;
	background-color: var(--sp-line);
}

.sp-timeline__item:last-child::before {
	display: none;
}

.sp-timeline__dot {
	position: relative;
	z-index: 1;
	flex: 0 0 auto;
	width: 0.75rem;
	height: 0.75rem;
	margin-top: 0.3125rem;
	border-radius: 50%;
	background-color: var(--sp-blue);
	border: 2px solid var(--sp-white);
	box-shadow: 0 0 0 1px var(--sp-line);
}

.sp-timeline__note {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	color: var(--sp-ink);
	background-color: var(--sp-panel);
	border-radius: 8px;
	padding: 0.5rem 0.625rem;
}

/* General polish: softer tables, roomier cards. */
.sp-table td {
	padding: 0.875rem 0.75rem;
}

.sp-table th {
	padding: 0.6875rem 0.75rem;
}

.sp-card {
	box-shadow: 0 1px 2px rgba(11, 29, 58, 0.05), 0 6px 18px rgba(11, 29, 58, 0.05);
}

@media (max-width: 62rem) {
	.sp-svc {
		flex: 0 0 calc(50% - 0.5rem);
		width: calc(50% - 0.5rem);
	}
}

@media (max-width: 48rem) {
	.sp-svc {
		flex: 0 0 100%;
		width: 100%;
	}
}


/* Activity feed dots by kind, and tighter feed rows. */
.sp-timeline__body {
	min-width: 0;
	flex: 1 1 auto;
}

.sp-timeline__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.625rem;
	flex-wrap: wrap;
}

.sp-timeline__dot--job {
	background-color: var(--sp-green, #2ECC71);
}

.sp-timeline__dot--appointment {
	background-color: var(--sp-blue, #0D3F91);
}

.sp-timeline__dot--reminder {
	background-color: var(--sp-gold, #E8A838);
}

.sp-timeline__dot--message {
	background-color: var(--sp-navy, #0B1D3A);
}

.sp-timeline__dot--call {
	background-color: var(--sp-danger, #9B1220);
}

/* ---------------------------------------------------------------------------
   Service checklists: close-out fill form and finished report.
   ------------------------------------------------------------------------ */

.sp-checkfill {
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: 0.875rem 1rem;
	margin: 0.875rem 0;
	background-color: var(--sp-panel);
	color: var(--sp-ink);
}

.sp-checkfill__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.375rem 0.75rem;
	align-items: center;
	padding: 0.5rem 0;
	border-bottom: 1px solid var(--sp-line);
}

.sp-checkfill__row input[type="text"] {
	grid-column: 1 / -1;
}

.sp-checkfill__item {
	font-weight: 600;
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-checkfill__marks {
	display: flex;
	gap: 0.375rem;
}

.sp-app button.sp-mark {
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	font-weight: 700;
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-muted, #4A5568) !important;
	border: 1px solid var(--sp-line, #DDE3EC) !important;
	box-shadow: none;
}

.sp-app button.sp-mark:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-mark:active,
.sp-app button.sp-mark:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 1px;
}

.sp-app button.sp-mark[aria-checked="true"] {
	background-color: var(--sp-navy, #0B1D3A) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-mark--poor[aria-checked="true"] {
	background-color: var(--sp-danger, #9B1220) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-danger, #9B1220) !important;
}

.sp-checkfill__extra {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.375rem 0;
}

.sp-checkfill__extra label {
	color: var(--sp-ink);
	background-color: transparent;
	font-size: 0.9375rem;
}

/* Finished report. */
.sp-report {
	background-color: var(--sp-white);
	color: var(--sp-ink);
}

.sp-report__title {
	margin: 0 0 0.25rem;
	font-size: 1.25rem;
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-report__meta {
	margin: 0 0 0.875rem;
	color: var(--sp-muted);
	background-color: transparent;
	font-size: 0.875rem;
}

.sp-report__table {
	width: 100%;
	border-collapse: collapse;
	margin-bottom: 0.875rem;
}

.sp-report__table th,
.sp-report__table td {
	border: 1px solid var(--sp-line);
	padding: 0.4375rem 0.5625rem;
	font-size: 0.875rem;
	text-align: left;
	background-color: var(--sp-white);
	color: var(--sp-ink);
}

.sp-report__table th {
	background-color: var(--sp-panel);
	color: var(--sp-navy);
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.sp-report__label {
	font-weight: 600;
	color: var(--sp-navy);
}

.sp-report__mark {
	text-align: center;
	width: 5.25rem;
}

.sp-report__check {
	font-weight: 700;
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-report__mark--poor .sp-report__check {
	color: var(--sp-danger);
}

.sp-report__extra {
	display: flex;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0.25rem 0;
	padding: 0.375rem 0.5625rem;
	border: 1px solid var(--sp-line);
	border-radius: 6px;
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	font-size: 0.875rem;
}

.sp-report__overall {
	margin: 0.875rem 0 0;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--sp-line);
	border-radius: 8px;
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	white-space: pre-line;
}

.sp-report-btn {
	margin-top: 0.5rem;
}

/* Print: only the open report. */
@media print {
	body.sp-printing * {
		visibility: hidden;
	}

	body.sp-printing #sp-print-report,
	body.sp-printing #sp-print-report * {
		visibility: visible;
	}

	body.sp-printing #sp-print-report {
		position: absolute;
		inset: 0;
		padding: 1.5rem;
		background-color: #FFFFFF;
		color: #1A2433;
	}
}

/* ---------------------------------------------------------------------------
   Fillable checklist: the paper form on screen.
   ------------------------------------------------------------------------ */

.sp-checkform {
	background-color: var(--sp-white);
	color: var(--sp-ink);
	margin: 0.875rem 0;
}

.sp-checkform__title {
	margin: 0 0 0.625rem;
	font-size: 1.125rem;
	color: var(--sp-navy);
	background-color: transparent;
	text-align: center;
}

.sp-checkform__table {
	width: 100%;
	border-collapse: collapse;
}

.sp-checkform__table th {
	padding: 0.375rem 0.5rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	background-color: var(--sp-white);
	color: var(--sp-navy);
	border-bottom: 2px solid var(--sp-navy);
}

.sp-checkform__table th.sp-checkform__notecol {
	text-align: left;
}

.sp-checkform__label {
	background-color: var(--sp-white);
	color: var(--sp-navy);
	font-weight: 700;
	font-size: 0.9375rem;
	padding: 0.5rem 0.5625rem;
	border: 1px solid var(--sp-navy);
}

.sp-checkform__mark {
	border: 1px solid var(--sp-navy);
	padding: 0.1875rem;
	width: 5.5rem;
	text-align: center;
	background-color: var(--sp-white);
	color: var(--sp-ink);
}

.sp-app button.sp-checkform__cell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.375rem;
	font-size: 1.125rem;
	font-weight: 800;
	cursor: pointer;
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border: 1px dashed var(--sp-line, #DDE3EC) !important;
	border-radius: 6px !important;
	box-shadow: none;
	transform: none;
}

.sp-app button.sp-checkform__cell:hover {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-checkform__cell:active {
	background-color: var(--sp-line, #DDE3EC) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border-color: var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-checkform__cell:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 1px;
}

.sp-app button.sp-checkform__cell[aria-checked="true"] {
	background-color: var(--sp-panel, #F5F7FA) !important;
	color: var(--sp-navy, #0B1D3A) !important;
	border: 2px solid var(--sp-navy, #0B1D3A) !important;
}

.sp-app button.sp-checkform__cell--poor[aria-checked="true"] {
	background-color: var(--sp-danger, #9B1220) !important;
	color: var(--sp-white, #FFFFFF) !important;
	border-color: var(--sp-danger, #9B1220) !important;
}

.sp-checkform__notecell {
	border: 1px solid var(--sp-navy);
	padding: 0.25rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
}

.sp-app input.sp-checkform__note {
	width: 100%;
	border: 0 !important;
	border-radius: 4px !important;
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-ink, #1A2433) !important;
	font-size: 0.875rem;
	min-height: 2.125rem;
}

.sp-app input.sp-checkform__note:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-ink, #1A2433) !important;
	outline: 2px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 0;
}

.sp-checkform__extra {
	display: grid;
	grid-template-columns: 1fr 8rem;
	gap: 0.5rem;
	align-items: stretch;
	margin-top: 0.375rem;
}

.sp-checkform__extra .sp-checkform__label {
	display: flex;
	align-items: center;
}

.sp-app button.sp-checkform__cell--yes {
	min-height: 2.5rem;
	font-size: 0.9375rem;
	border-style: solid !important;
}

.sp-checkform__overallhead {
	margin: 0.75rem 0 0.25rem;
	font-weight: 700;
	color: var(--sp-navy);
	background-color: transparent;
	font-size: 0.9375rem;
}

.sp-app textarea.sp-checkform__overall {
	width: 100%;
	border: 1px solid var(--sp-navy) !important;
	border-radius: 6px !important;
	background-color: var(--sp-white, #FFFFFF) !important;
	color: var(--sp-ink, #1A2433) !important;
}

/* The checklist needs room: widen its modal (progressive enhancement). */
.sp-modal__panel:has(.sp-checkform) {
	max-width: 56rem;
	width: min(56rem, calc(100vw - 2rem));
}

@media (max-width: 40rem) {
	.sp-checkform__table thead {
		display: none;
	}

	.sp-checkform__table,
	.sp-checkform__table tbody,
	.sp-checkform__table tr,
	.sp-checkform__table td {
		display: block;
		width: 100%;
	}

	.sp-checkform__table tr {
		border: 1px solid var(--sp-navy);
		border-radius: 8px;
		margin-bottom: 0.625rem;
		overflow: hidden;
	}

	.sp-checkform__label,
	.sp-checkform__mark,
	.sp-checkform__notecell {
		border: 0;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-checkform__mark {
		display: inline-block;
		width: 33.333%;
		border-bottom: 1px solid var(--sp-line);
	}

	.sp-app button.sp-checkform__cell::after {
		content: attr(aria-label);
		font-size: 0.6875rem;
		font-weight: 600;
		display: none;
	}

	.sp-app button.sp-checkform__cell--excellent[aria-checked="false"]::before {
		content: "Exc";
	}

	.sp-app button.sp-checkform__cell--good[aria-checked="false"]::before {
		content: "Good";
	}

	.sp-app button.sp-checkform__cell--poor[aria-checked="false"]::before {
		content: "Poor";
	}

	.sp-app button.sp-checkform__cell::before {
		font-size: 0.75rem;
		font-weight: 700;
	}
}

/* ---------------------------------------------------------------------------
   Work Board.
   ------------------------------------------------------------------------ */

.sp-pillrow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.875rem;
	margin-bottom: 1.25rem;
}

.sp-bigpill {
	flex: 1 1 8.5rem;
	min-width: 8.5rem;
	background-color: var(--sp-white);
	color: var(--sp-ink);
	border: 1px solid var(--sp-line);
	border-left: 5px solid var(--sp-line);
	border-radius: var(--sp-radius);
	padding: 0.875rem 1rem;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.sp-bigpill--overdue {
	border-left-color: var(--sp-danger);
}

.sp-bigpill--due {
	border-left-color: var(--sp-gold);
}

.sp-bigpill--scheduled {
	border-left-color: var(--sp-blue);
}

.sp-bigpill--ok {
	border-left-color: var(--sp-green);
}

.sp-bigpill__num {
	font-size: 1.75rem;
	font-weight: 800;
	line-height: 1;
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-bigpill__label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--sp-muted);
	background-color: transparent;
}

.sp-arearow {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.sp-areachip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	border-radius: 999px;
	background-color: var(--sp-panel-alt);
	color: var(--sp-navy);
	border: 1px solid var(--sp-line);
	font-size: 0.875rem;
}

.sp-areachip strong {
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-list__day {
	border-bottom: 0 !important;
	padding-bottom: 0 !important;
}

.sp-list__daylabel {
	display: inline-block;
	margin-top: 0.375rem;
	font-size: 0.75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sp-muted);
	background-color: transparent;
}

.sp-app button.sp-linklike {
	background-color: transparent !important;
	color: var(--sp-blue, #0D3F91) !important;
	border: 0 !important;
	padding: 0;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	text-align: left;
	box-shadow: none;
	transform: none;
}

.sp-app button.sp-linklike:hover,
.sp-app button.sp-linklike:active {
	background-color: transparent !important;
	color: var(--sp-blue-hover, #092F6E) !important;
	text-decoration: underline;
}

.sp-app button.sp-linklike:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7) !important;
	color: var(--sp-blue-hover, #092F6E) !important;
	outline: 3px solid var(--sp-navy, #0B1D3A) !important;
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Day map.
   ------------------------------------------------------------------------ */

.sp-daymap {
	height: 24rem;
	border: 1px solid var(--sp-line);
	border-radius: var(--sp-radius);
	overflow: hidden;
	background-color: var(--sp-panel);
	color: var(--sp-ink);
	z-index: 0;
}

.sp-maplegend {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-bottom: 0.75rem;
}

.sp-maplegend__item {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	font-size: 0.875rem;
	color: var(--sp-ink);
	background-color: transparent;
}

.sp-maplegend__dot {
	display: inline-block;
	width: 0.875rem;
	height: 0.875rem;
	border-radius: 50%;
	border: 2px solid var(--sp-white);
	box-shadow: 0 0 0 1px var(--sp-line);
}

.sp-pin-wrap {
	background-color: transparent;
	border: 0;
}

.sp-pin {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	font-size: 0.875rem;
	font-weight: 800;
	border: 2px solid #FFFFFF;
	box-shadow: 0 1px 4px rgba(11, 29, 58, 0.45);
}

@media (max-width: 40rem) {
	.sp-daymap {
		height: 18rem;
	}
}

/* ---------------------------------------------------------------------------
   Manage-your-visit page and clickable board pills.
   ------------------------------------------------------------------------ */

.sp-managecard {
	max-width: 34rem;
	margin: 0 auto;
}

.sp-manageline {
	margin: 0.375rem 0;
	color: var(--sp-ink);
	background-color: transparent;
	font-size: 1rem;
}

.sp-manageline strong {
	color: var(--sp-navy);
	background-color: transparent;
}

.sp-manageactions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.625rem;
	margin: 0.875rem 0;
}

.sp-app button.sp-bigpill {
	cursor: pointer;
	text-align: left;
	font: inherit;
}

.sp-app button.sp-bigpill:hover {
	background-color: var(--sp-panel-alt, #EDF1F7);
	color: var(--sp-ink, #1A2433);
	border-color: var(--sp-navy, #0B1D3A);
}

.sp-app button.sp-bigpill:focus-visible {
	background-color: var(--sp-panel-alt, #EDF1F7);
	color: var(--sp-ink, #1A2433);
	outline: 3px solid var(--sp-navy, #0B1D3A);
	outline-offset: 1px;
}

.sp-app button.sp-bigpill:active {
	background-color: var(--sp-line, #DDE3EC);
	color: var(--sp-ink, #1A2433);
}