/**
 * DSK Booking — patient app.
 *
 * DESIGN NOTE
 *
 * The reference point here is not a SaaS dashboard. It is a well-set
 * appointment card: an unhurried, printed object a clinic would hand you.
 * Three decisions carry that, and they are the ones to preserve if this is
 * ever revised.
 *
 * 1. A SERIF carries every heading and every figure that matters — the
 *    price, the date, the time. The interface furniture around them is a
 *    sans. That pairing is what stops this reading as a plugin. Both come
 *    from the system stack, so nothing is downloaded and nothing blocks
 *    the first paint.
 *
 * 2. Structure is drawn with HAIRLINES and space, not with boxes inside
 *    boxes. A card nested in a card is the house style of every booking
 *    plugin and is exactly what was asked to be got away from.
 *
 * 3. The accent is a deep JADE, not the teal every medical template
 *    reaches for, and it is used sparingly: the thing you should press,
 *    the thing you have chosen, and nothing else.
 *
 * THEMING
 *
 * Tokens are declared once for light, then overridden for dark in two
 * places: when the patient has explicitly chosen dark, and when they have
 * chosen nothing and their device asks for it. Everything downstream reads
 * variables only, so a colour is never written twice.
 *
 * Tokens live on BOTH :host and .dsk-book because across a shadow boundary
 * a class on the host element is not an ancestor of anything inside it.
 */

:host,
.dsk-book {
	--ink: #14201b;
	--ink-2: #4a5b53;
	--ink-3: #7d8f86;

	--paper: #ffffff;
	--surface: #f6f7f4;
	--sunk: #eef1ed;
	--line: #e0e5e0;
	--line-2: #edf0ec;

	--rail: #14231d;
	--rail-2: #8fa79c;
	--rail-ink: #ffffff;
	--rail-line: rgba(255, 255, 255, 0.12);

	--accent: #1f6f4e;
	--accent-deep: #17553c;
	--accent-bright: #37a273;
	--accent-wash: #e6f2ec;
	--accent-line: #bfddcf;
	--accent-ring: rgba(31, 111, 78, 0.2);
	--on-accent: #ffffff;

	--warn: #8a6413;
	--warn-wash: #fbf3dd;
	--warn-line: #e8d7a9;
	--bad: #a3372f;
	--bad-wash: #fbeae7;
	--bad-line: #eec9c3;

	--shadow: 0 1px 2px rgba(20, 32, 27, 0.04), 0 10px 30px rgba(20, 32, 27, 0.07);
	--shadow-lift: 0 30px 70px rgba(12, 22, 18, 0.34);

	--radius: 10px;
	--radius-lg: 16px;
	--control: 46px;

	--sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, "Noto Sans", sans-serif;
	--serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
		"Times New Roman", serif;
}

/* Explicitly chosen dark. */
:host([data-dsk-theme="dark"]),
.dsk-book[data-dsk-theme="dark"] {
	--ink: #e8efea;
	--ink-2: #a5b7ad;
	--ink-3: #7d9086;

	--paper: #161c19;
	--surface: #1c2320;
	--sunk: #212926;
	--line: #2c3631;
	--line-2: #232b27;

	--rail: #101512;
	--rail-2: #8ba398;
	--rail-ink: #f2f6f3;
	--rail-line: rgba(255, 255, 255, 0.09);

	--accent: #3fae7c;
	--accent-deep: #56c492;
	--accent-bright: #56c492;
	--accent-wash: #182b23;
	--accent-line: #27473a;
	--accent-ring: rgba(63, 174, 124, 0.26);
	--on-accent: #08150f;

	--warn: #d9b263;
	--warn-wash: #2a2417;
	--warn-line: #40361f;
	--bad: #e8918a;
	--bad-wash: #2c1c1a;
	--bad-line: #452622;

	--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.36);
	--shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.6);
}

/* Following the device, and the device says dark. */
@media (prefers-color-scheme: dark) {
	:host([data-dsk-theme="auto"]),
	.dsk-book[data-dsk-theme="auto"] {
		--ink: #e8efea;
		--ink-2: #a5b7ad;
		--ink-3: #7d9086;

		--paper: #161c19;
		--surface: #1c2320;
		--sunk: #212926;
		--line: #2c3631;
		--line-2: #232b27;

		--rail: #101512;
		--rail-2: #8ba398;
		--rail-ink: #f2f6f3;
		--rail-line: rgba(255, 255, 255, 0.09);

		--accent: #3fae7c;
		--accent-deep: #56c492;
		--accent-bright: #56c492;
		--accent-wash: #182b23;
		--accent-line: #27473a;
		--accent-ring: rgba(63, 174, 124, 0.26);
		--on-accent: #08150f;

		--warn: #d9b263;
		--warn-wash: #2a2417;
		--warn-line: #40361f;
		--bad: #e8918a;
		--bad-wash: #2c1c1a;
		--bad-line: #452622;

		--shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 10px 30px rgba(0, 0, 0, 0.36);
		--shadow-lift: 0 30px 70px rgba(0, 0, 0, 0.6);
	}
}

:host {
	display: block;
}

.dsk-book,
.dsk-book *,
.dsk-book *::before,
.dsk-book *::after {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
 * Inheritance guard
 *
 * A shadow root blocks a theme's selectors but not inheritance, so
 * every inherited property is stated outright rather than left to
 * whatever the host page happens to set.
 * ------------------------------------------------------------- */

.dsk-book {
	font-family: var(--sans);
	font-size: 15.5px;
	font-weight: 400;
	font-style: normal;
	font-variant: normal;
	line-height: 1.6;
	letter-spacing: normal;
	word-spacing: normal;
	text-transform: none;
	text-indent: 0;
	text-align: left;
	text-shadow: none;
	white-space: normal;
	direction: ltr;
	color: var(--ink);
	-webkit-font-smoothing: antialiased;
}

.dsk-book button,
.dsk-book input,
.dsk-book select,
.dsk-book textarea,
.dsk-book a {
	font-family: var(--sans);
	letter-spacing: normal;
	text-transform: none;
	text-shadow: none;
}

.dsk-book a {
	color: var(--accent);
	text-decoration: underline;
	text-underline-offset: 2px;
	box-shadow: none;
}

/* ---------------------------------------------------------------
 * Type
 * ------------------------------------------------------------- */

.dsk-book h1,
.dsk-book h2,
.dsk-book h3 {
	margin: 0;
	padding: 0;
	font-family: var(--serif);
	font-weight: 600;
	color: var(--ink);
	line-height: 1.2;
	letter-spacing: -0.008em;
	text-transform: none;
}

.dsk-book h1 { font-size: 27px; }
.dsk-book h2 { font-size: 23px; }

.dsk-book p { margin: 0 0 12px; }
.dsk-book p:last-child { margin-bottom: 0; }

.dsk-book ul,
.dsk-book ol { margin: 0; padding: 0; list-style: none; }

.dsk-book b,
.dsk-book strong { font-weight: 600; }

/* ---------------------------------------------------------------
 * Surface
 * ------------------------------------------------------------- */

.dsk-book--app {
	max-width: 900px;
	margin: 0 auto;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.dsk-book-frame {
	display: grid;
	grid-template-columns: 246px minmax(0, 1fr);
	min-height: 540px;
}

.dsk-book-panel {
	min-width: 0;
	padding: 34px 38px 38px;
	background: var(--paper);
	display: flex;
	flex-direction: column;
}

/* ---------------------------------------------------------------
 * Rail
 *
 * The steps are a reading of where you are, not navigation. Jumping
 * to Confirm before a service is chosen means nothing, so they are
 * not buttons and do not pretend to be.
 * ------------------------------------------------------------- */

.dsk-book-rail {
	background: var(--rail);
	color: var(--rail-2);
	padding: 32px 0 24px;
	display: flex;
	flex-direction: column;
	gap: 34px;
}

.dsk-book-rail-brand {
	padding: 0 26px;
	color: var(--rail-ink);
	font-family: var(--serif);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.25;
	letter-spacing: -0.008em;
}

.dsk-book-logo {
	display: block;
	max-width: 150px;
	max-height: 54px;
	width: auto;
	height: auto;
	margin-bottom: 12px;
}

.dsk-book-stages {
	display: flex;
	flex-direction: column;
	position: relative;
}

.dsk-book-stage {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 11px 26px;
	font-size: 15px;
	color: var(--rail-2);
	position: relative;
}

.dsk-book-stage-label {
	display: block;
	line-height: 1.3;
}

/* The rule joining the markers: the sequence, drawn. */
.dsk-book-stage::before {
	content: "";
	position: absolute;
	left: 39px;
	top: -12px;
	width: 1px;
	height: 24px;
	background: var(--rail-line);
}

.dsk-book-stage:first-child::before { display: none; }

.dsk-book-stage-dot {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.24);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--serif);
	font-size: 13px;
	font-variant-numeric: tabular-nums lining-nums;
	line-height: 1;
	position: relative;
	z-index: 1;
	background: var(--rail);
}

.dsk-book-stage.is-now {
	color: var(--rail-ink);
}

.dsk-book-stage.is-now .dsk-book-stage-dot {
	border-color: var(--accent-bright);
	box-shadow: 0 0 0 4px var(--accent-ring);
	color: var(--rail-ink);
}

.dsk-book-stage.is-done { color: #c5d6cd; }

.dsk-book-stage.is-done .dsk-book-stage-dot {
	background: var(--accent-bright);
	border-color: var(--accent-bright);
	color: var(--on-accent);
}

.dsk-book-rail-foot {
	margin-top: auto;
	padding: 18px 26px 0;
	border-top: 1px solid var(--rail-line);
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: flex-start;
}

.dsk-book-rail-who {
	color: var(--rail-ink);
	font-size: 14.5px;
	font-weight: 600;
}

.dsk-book .dsk-book-rail .dsk-book-btn--link {
	color: var(--accent-bright);
	padding-left: 0;
	padding-right: 0;
}

.dsk-book .dsk-book-rail .dsk-book-btn--link:hover { color: #8ad9b4; }

/* Theme switch, bottom of the rail. */
.dsk-book-theme {
	appearance: none;
	background: none;
	border: 1px solid var(--rail-line);
	border-radius: 999px;
	color: var(--rail-2);
	font: inherit;
	font-size: 13px;
	padding: 4px 12px;
	cursor: pointer;
	margin-top: 8px;
}

.dsk-book-theme:hover {
	color: var(--rail-ink);
	border-color: rgba(255, 255, 255, 0.28);
}

/* ---------------------------------------------------------------
 * Panel header
 * ------------------------------------------------------------- */

.dsk-book-top {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 20px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--line-2);
}

.dsk-book-top p {
	margin: 4px 0 0;
	color: var(--ink-3);
	font-size: 14.5px;
}

.dsk-book-tabs {
	display: inline-flex;
	gap: 20px;
	margin-bottom: 22px;
	border-bottom: 1px solid var(--line);
	width: 100%;
}

.dsk-book-tabs button {
	appearance: none;
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 9px 0;
	font: inherit;
	font-size: 15px;
	color: var(--ink-3);
	cursor: pointer;
	border-radius: 0;
}

.dsk-book-tabs button.is-on {
	color: var(--ink);
	border-bottom-color: var(--accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Stage rows
 *
 * A stage already behind you is a button back to it. The names alone
 * carry it — echoing the chosen value under each one just rebuilds the
 * duplicate list this replaced.
 * ------------------------------------------------------------- */

.dsk-book-stage-text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	flex: 1 1 auto;
}

.dsk-book-stage-change {
	flex: 0 0 auto;
	font-size: 12.5px;
	color: var(--accent-bright);
	opacity: 0;
	transition: opacity 0.12s ease;
}

.dsk-book-stage-btn {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 14px;
	width: 100%;
	border-radius: 8px;
}

.dsk-book-stage.is-clickable:hover .dsk-book-stage-change,
.dsk-book-stage-btn:focus-visible .dsk-book-stage-change {
	opacity: 1;
}

.dsk-book-stage.is-clickable:hover .dsk-book-stage-label {
	color: var(--rail-ink);
}

.dsk-book-stage-btn:focus-visible {
	outline: 2px solid var(--accent-bright);
	outline-offset: 3px;
}

/* ---------------------------------------------------------------
 * Step
 * ------------------------------------------------------------- */

.dsk-book-step { padding: 0; margin-top: 24px; }
.dsk-book-step > h2 { margin-bottom: 6px; }

.dsk-book-step > p.dsk-book-lede {
	color: var(--ink-2);
	font-size: 15px;
	margin-bottom: 22px;
	max-width: 46em;
}

/* ---------------------------------------------------------------
 * Choices
 * ------------------------------------------------------------- */

.dsk-book-choices { display: flex; flex-direction: column; gap: 10px; }

.dsk-book-choice {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	width: 100%;
	min-height: var(--control);
	text-align: left;
	appearance: none;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 15px 18px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	transition: border-color 0.12s ease, background-color 0.12s ease;
}

.dsk-book-choice:hover { border-color: var(--ink-3); }

.dsk-book-choice.is-on {
	border-color: var(--accent);
	background: var(--accent-wash);
	box-shadow: inset 0 0 0 1px var(--accent);
}

.dsk-book-choice b {
	display: block;
	font-family: var(--serif);
	font-size: 17px;
	font-weight: 600;
}

.dsk-book-choice > span > span {
	display: block;
	color: var(--ink-2);
	font-size: 14.5px;
	margin-top: 3px;
}

.dsk-book-choice-side {
	flex: 0 0 auto;
	text-align: right;
	font-family: var(--serif);
	font-size: 17px;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	white-space: nowrap;
}

.dsk-book-choice-side small {
	display: block;
	font-family: var(--sans);
	font-weight: 400;
	font-size: 12.5px;
	color: var(--ink-3);
	margin-top: 2px;
}

/* ---------------------------------------------------------------
 * Dates and times
 * ------------------------------------------------------------- */

.dsk-book-days {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 2px 2px 10px;
	margin-bottom: 20px;
	scrollbar-width: thin;
}

.dsk-book-day {
	flex: 0 0 auto;
	appearance: none;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: 12px;
	padding: 10px 11px;
	font: inherit;
	color: inherit;
	cursor: pointer;
	text-align: center;
	min-width: 64px;
	line-height: 1.25;
}

.dsk-book-day small { display: block; color: var(--ink-3); font-size: 12px; }

.dsk-book-day b {
	display: block;
	font-family: var(--serif);
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
	font-size: 20px;
	margin: 2px 0;
}

.dsk-book-day:hover:not(:disabled) { border-color: var(--ink-3); }

.dsk-book-day.is-on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
}

.dsk-book-day.is-on small { color: var(--on-accent); opacity: 0.75; }

.dsk-book-day.is-empty {
	color: var(--ink-3);
	background: var(--surface);
	border-color: var(--line-2);
	cursor: default;
	opacity: 0.65;
}

.dsk-book-times {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
	gap: 9px;
}

.dsk-book-time {
	appearance: none;
	border: 1px solid var(--line);
	background: var(--paper);
	border-radius: var(--radius);
	padding: 0 12px;
	height: var(--control);
	font: inherit;
	font-family: var(--serif);
	font-size: 16px;
	font-variant-numeric: tabular-nums lining-nums;
	color: inherit;
	cursor: pointer;
}

.dsk-book-time:hover { border-color: var(--accent); color: var(--accent); }

.dsk-book-time.is-on {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--on-accent);
	font-weight: 600;
}

/* ---------------------------------------------------------------
 * Form controls
 * ------------------------------------------------------------- */

.dsk-book label.dsk-book-field { display: block; margin-bottom: 18px; }

.dsk-book-field > span {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-2);
}

.dsk-book-field small {
	display: block;
	margin-top: 6px;
	color: var(--ink-3);
	font-size: 13.5px;
}

.dsk-book input[type="text"],
.dsk-book input[type="tel"],
.dsk-book input[type="email"],
.dsk-book input[type="date"],
.dsk-book input[type="search"],
.dsk-book input[type="password"],
.dsk-book select,
.dsk-book textarea {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	min-height: var(--control);
	font-family: var(--sans);
	font-size: 15.5px;
	line-height: 1.4;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 11px 14px;
	margin: 0;
	box-shadow: none;
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.dsk-book textarea { min-height: 100px; resize: vertical; }

.dsk-book input::placeholder,
.dsk-book textarea::placeholder { color: var(--ink-3); }

.dsk-book input:focus,
.dsk-book select:focus,
.dsk-book textarea:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.dsk-book select {
	background-image: linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
		linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
	background-position: calc(100% - 19px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
	padding-right: 40px;
}

.dsk-book input.dsk-book-code {
	font-family: var(--serif);
	font-variant-numeric: tabular-nums lining-nums;
	letter-spacing: 0.48em;
	text-indent: 0.48em;
	font-size: 27px;
	font-weight: 600;
	text-align: center;
	max-width: 280px;
	height: 62px;
}

.dsk-book-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

/* ---------------------------------------------------------------
 * Buttons
 * ------------------------------------------------------------- */

.dsk-book-actions {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--line-2);
}

.dsk-book .dsk-book-btn {
	appearance: none;
	font-family: var(--sans);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	border: 1px solid var(--accent);
	background: var(--accent);
	color: var(--on-accent);
	border-radius: var(--radius);
	min-height: var(--control);
	padding: 0 24px;
	cursor: pointer;
	box-shadow: none;
	text-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: background-color 0.12s ease, border-color 0.12s ease;
}

.dsk-book .dsk-book-btn:hover {
	background: var(--accent-deep);
	border-color: var(--accent-deep);
	color: var(--on-accent);
}

.dsk-book button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.dsk-book .dsk-book-btn[disabled] {
	opacity: 0.45;
	cursor: default;
}

.dsk-book .dsk-book-btn--plain {
	background: var(--paper);
	border-color: var(--line);
	color: var(--ink);
	font-weight: 500;
}

.dsk-book .dsk-book-btn--plain:hover {
	background: var(--surface);
	border-color: var(--ink-3);
	color: var(--ink);
}

.dsk-book .dsk-book-btn--link,
.dsk-book .dsk-book-btn--danger {
	background: none;
	border-color: transparent;
	min-height: 0;
	padding: 6px 2px;
	font-weight: 500;
}

.dsk-book .dsk-book-btn--link { color: var(--accent); }

.dsk-book .dsk-book-btn--link:hover {
	background: none;
	border-color: transparent;
	color: var(--accent-deep);
}

.dsk-book .dsk-book-btn--danger { color: var(--bad); }

.dsk-book .dsk-book-btn--danger:hover {
	background: none;
	border-color: transparent;
	color: var(--bad);
}

/* ---------------------------------------------------------------
 * Notes
 * ------------------------------------------------------------- */

.dsk-book-note {
	border: 1px solid var(--line);
	background: var(--surface);
	border-radius: var(--radius);
	padding: 13px 16px;
	margin-bottom: 18px;
	font-size: 14.5px;
}

.dsk-book-note--bad { background: var(--bad-wash); border-color: var(--bad-line); color: var(--bad); }
.dsk-book-note--flag { background: var(--warn-wash); border-color: var(--warn-line); color: var(--warn); }

.dsk-book-note--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.dsk-book-quiet { color: var(--ink-3); font-size: 14px; }

/* ---------------------------------------------------------------
 * Summary
 * ------------------------------------------------------------- */

.dsk-book-summary {
	margin: 0;
	border-top: 1px solid var(--line-2);
}

.dsk-book-summary-row {
	display: flex;
	gap: 16px;
	padding: 12px 2px;
	border-bottom: 1px solid var(--line-2);
}

.dsk-book-summary-row dt {
	flex: 0 0 30%;
	margin: 0;
	color: var(--ink-3);
	font-size: 14.5px;
}

.dsk-book-summary-row dd {
	flex: 1 1 auto;
	margin: 0;
	font-family: var(--serif);
	font-size: 16.5px;
	font-weight: 600;
}

.dsk-book-total {
	border-bottom: 0;
	border-top: 1px solid var(--line);
	margin-top: 2px;
	padding-top: 16px;
}

.dsk-book-total dt { color: var(--ink-2); }

.dsk-book-total dd {
	font-variant-numeric: tabular-nums lining-nums;
	font-size: 25px;
	color: var(--accent);
}

.dsk-book-done { text-align: center; padding: 34px 0 10px; }

/* ---------------------------------------------------------------
 * Existing bookings
 * ------------------------------------------------------------- */

.dsk-book-list li {
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px 18px;
	margin-bottom: 10px;
	background: var(--paper);
}

.dsk-book-list-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 3px;
}

.dsk-book-when {
	font-family: var(--serif);
	font-size: 17px;
	font-variant-numeric: tabular-nums lining-nums;
	font-weight: 600;
}

.dsk-book-pill {
	display: inline-block;
	padding: 3px 11px;
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 500;
	background: var(--surface);
	color: var(--ink-2);
	border: 1px solid var(--line);
	white-space: nowrap;
}

.dsk-book-pill--approved,
.dsk-book-pill--completed {
	background: var(--accent-wash);
	color: var(--accent);
	border-color: var(--accent-line);
}

.dsk-book-pill--pending {
	background: var(--warn-wash);
	color: var(--warn);
	border-color: var(--warn-line);
}

.dsk-book-pill--canceled,
.dsk-book-pill--rejected,
.dsk-book-pill--no_show {
	background: var(--bad-wash);
	color: var(--bad);
	border-color: var(--bad-line);
}

.dsk-book-empty {
	border: 1px dashed var(--line);
	border-radius: 12px;
	padding: 40px 24px;
	text-align: center;
	color: var(--ink-2);
	background: var(--surface);
}

.dsk-book-empty b {
	display: block;
	font-family: var(--serif);
	font-size: 18px;
	color: var(--ink);
	margin-bottom: 5px;
	font-weight: 600;
}

.dsk-book-loading { padding: 32px 2px; color: var(--ink-3); }

/* ---------------------------------------------------------------
 * Launcher
 *
 * Lives in the page, not the shadow root, so it is written without
 * variables and defensively enough to survive any theme.
 * ------------------------------------------------------------- */

.dsk-book-launcher { display: flex; }
.dsk-book-launcher--center { justify-content: center; }
.dsk-book-launcher--right { justify-content: flex-end; }

.dsk-book-launcher button.dsk-book-launch {
	appearance: none;
	-webkit-appearance: none;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	border: 1px solid #1f6f4e !important;
	background: #1f6f4e !important;
	color: #fff !important;
	border-radius: 10px !important;
	padding: 0 26px !important;
	min-height: 48px !important;
	cursor: pointer;
	box-shadow: none !important;
	text-shadow: none !important;
	display: inline-flex;
	align-items: center;
}

.dsk-book-launcher button.dsk-book-launch:hover,
.dsk-book-launcher button.dsk-book-launch:focus {
	background: #17553c !important;
	border-color: #17553c !important;
	color: #fff !important;
}

/* ---------------------------------------------------------------
 * Dialog
 * ------------------------------------------------------------- */

.dsk-book-scrim {
	position: fixed;
	inset: 0;
	z-index: 999999;
	background: rgba(8, 18, 14, 0.62);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 5vh 16px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

.dsk-book.dsk-book--modal {
	position: relative;
	background: var(--paper);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lift);
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
}

.dsk-book-frame--modal .dsk-book-panel { max-height: 86vh; overflow-y: auto; }
.dsk-book--modal .dsk-book-top { padding-right: 44px; }

.dsk-book button.dsk-book-close {
	position: absolute;
	top: 16px;
	right: 16px;
	appearance: none;
	background: none;
	border: 0;
	border-radius: 8px;
	width: 34px;
	height: 34px;
	line-height: 1;
	font-size: 14px;
	color: var(--ink-2);
	cursor: pointer;
	padding: 0;
	z-index: 2;
}

.dsk-book button.dsk-book-close:hover { background: var(--surface); color: var(--ink); }

/* ---------------------------------------------------------------
 * Narrow
 * ------------------------------------------------------------- */

@media (max-width: 760px) {
	.dsk-book-frame { grid-template-columns: minmax(0, 1fr); min-height: 0; }

	.dsk-book-rail { padding: 16px 0 14px; gap: 14px; }

	.dsk-book-rail-brand { font-size: 17px; }
	.dsk-book-logo { max-height: 40px; margin-bottom: 8px; }
	.dsk-book-rail-foot { display: none; }

	.dsk-book-stages {
		flex-direction: row;
		overflow-x: auto;
		padding: 0 16px;
		gap: 8px;
	}

	.dsk-book-stage { padding: 4px 6px; font-size: 14px; white-space: nowrap; }
	.dsk-book-stage::before { display: none; }
	.dsk-book-stage:not(.is-now) .dsk-book-stage-label { display: none; }

	.dsk-book-panel { padding: 22px 20px 28px; }

	.dsk-book h1 { font-size: 23px; }
	.dsk-book h2 { font-size: 20px; }

	.dsk-book-grid2 { grid-template-columns: minmax(0, 1fr); }

	.dsk-book-summary-row { flex-direction: column; gap: 2px; }
	.dsk-book-summary-row dt { flex: none; }

	.dsk-book .dsk-book-btn { flex: 1 1 auto; }

	.dsk-book-scrim { padding: 0; }
	.dsk-book.dsk-book--modal { border-radius: 0; min-height: 100%; }
	.dsk-book-frame--modal .dsk-book-panel { max-height: none; }
}

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

/* PayPal renders its own buttons into this host. */
.dsk-book-paypal {
	margin-top: 18px;
	max-width: 420px;
}

/* Same sizing problem on the patient side: a date field given a text
   field's full width leaves its picker stranded at the far edge. */
.dsk-book input[type="date"],
.dsk-book input[type="time"] {
	width: 100%;
	max-width: 260px;
}

.dsk-book input[type="date"]::-webkit-calendar-picker-indicator,
.dsk-book input[type="time"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

/* A textarea in a two-column row spans both, or it reads as a stub. */
.dsk-book-grid2 > .dsk-book-span {
	grid-column: 1 / -1;
}

/* ---------------------------------------------------------------
 * Field layout corrections
 *
 * The same three problems as the console: rows of unequal height, a
 * date input that sizes itself from its content and so ignores its
 * column, and WebKit's extra chrome on date fields.
 * ------------------------------------------------------------- */

.dsk-book-grid2 {
	align-items: end;
}

.dsk-book-grid2 > * {
	min-width: 0;
}

.dsk-book input[type="date"],
.dsk-book input[type="time"] {
	width: 100%;
	min-width: 0;
	max-width: 100%;
	-webkit-appearance: none;
	appearance: none;
	font-variant-numeric: tabular-nums lining-nums;
}

.dsk-book input[type="date"]::-webkit-date-and-time-value {
	text-align: left;
}

.dsk-book input[type="date"]::-webkit-calendar-picker-indicator {
	cursor: pointer;
	opacity: 0.6;
}

.dsk-book input[type="date"]::-webkit-inner-spin-button {
	display: none;
}

/* ---------------------------------------------------------------
 * Payment confirmation
 *
 * A patient who has just handed over money needs to see three things
 * without reading: that it worked, what they bought, and a reference
 * they can quote. The tick is decorative and hidden from screen
 * readers, because the heading already says it.
 * ------------------------------------------------------------- */

.dsk-book-tick {
	width: 54px;
	height: 54px;
	margin: 0 auto 14px;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
}

.dsk-book-receipt {
	margin: 24px auto 0;
	max-width: 420px;
	text-align: left;
}

/*
 * The confirmation, after payment.
 *
 * It was rendering in a narrow column — the receipt list constrained
 * its own parent, so the heading wrapped one word per line. The step
 * states its width rather than inheriting whatever the widest child
 * happens to be.
 */

.dsk-book-done {
	width: 100%;
	max-width: 520px;
	margin: 0 auto;
	box-sizing: border-box;
	text-align: center;
}

.dsk-book-done h2 {
	font-size: 22px;
	line-height: 1.3;
	margin: 0 0 8px;
	white-space: normal;
}

.dsk-book-done p {
	margin: 0 auto 10px;
	max-width: 42ch;
}

.dsk-book-receipt {
	width: 100%;
	box-sizing: border-box;
}

.dsk-book-receipt .dsk-book-summary-row {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
}

.dsk-book-receipt dt {
	color: var(--book-ink-faint, #6b7a72);
	flex: 0 0 auto;
}

.dsk-book-receipt dd {
	margin: 0;
	text-align: right;
}

/*
 * A frame with no rail is one column, not two.
 *
 * The gateway-return screen renders the panel on its own, but the
 * frame's grid still reserved 246px for a rail that was not there — so
 * the panel landed in that first column and the confirmation rendered
 * in a 246px strip on the left, one word per line. Nothing was wrong
 * with the card; it was in the wrong column.
 */

.dsk-book-frame--solo {
	grid-template-columns: minmax(0, 1fr);
	min-height: 0;
}

.dsk-book-frame--solo .dsk-book-panel {
	align-items: center;
	justify-content: center;
	padding: 48px 38px 52px;
}

/* ---------------------------------------------------------------
 * Waiting
 *
 * A bare "Loading…" left-aligned in the corner reads as a page that
 * has broken rather than one that is working. It sits in the middle
 * with something moving, so the wait looks deliberate.
 * ------------------------------------------------------------- */

.dsk-book-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 220px;
	padding: 40px 20px;
	text-align: center;
	color: var(--ink-2);
	font-size: 14.5px;
}

.dsk-book-spinner {
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 2px solid var(--line);
	border-top-color: var(--accent);
	animation: dsk-book-spin 0.7s linear infinite;
}

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

/*
 * Respect a system setting that asks for less movement. A spinner is
 * a convenience; nobody should get a headache from it.
 */
@media (prefers-reduced-motion: reduce) {
	.dsk-book-spinner {
		animation-duration: 2.4s;
	}
}

/* A face beside the name, when choosing who to see. */

.dsk-book-face {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
	margin-right: 12px;
	background: var(--sunk, rgba(0, 0, 0, 0.04));
	border: 1px solid var(--line, rgba(0, 0, 0, 0.1));
}

.dsk-book-face--blank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 15px;
	color: var(--ink-2);
}

.dsk-book-choice {
	align-items: center;
}

/* ---------------------------------------------------------------
 * Sign in with: mobile number | email
 *
 * A choice the patient makes, not a guess from what they type. One
 * box that took "either" left people unsure what to put in it, and
 * sent a number without its country code off as a different person.
 * ------------------------------------------------------------- */

.dsk-book-seg {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	margin: 2px 0 20px;
	background: var(--sunk);
	border: 1px solid var(--line);
	border-radius: 999px;
	max-width: 100%;
}

.dsk-book .dsk-book-seg button {
	appearance: none;
	border: 0;
	background: none;
	border-radius: 999px;
	padding: 8px 18px;
	min-height: 38px;
	font: inherit;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--ink-2);
	cursor: pointer;
	white-space: nowrap;
}

.dsk-book .dsk-book-seg button.is-on {
	background: var(--paper);
	color: var(--ink);
	font-weight: 600;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}

.dsk-book .dsk-book-seg button:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 1px;
}

/* ---------------------------------------------------------------
 * Phone field: country code + number
 *
 * The real <select> sits invisibly over a compact face showing the
 * flag and code, so the phone's own picker opens on tap while the box
 * stays narrow enough to leave room for the number.
 * ------------------------------------------------------------- */

.dsk-book div.dsk-book-field { display: block; margin-bottom: 18px; }

.dsk-book-phone {
	display: flex;
	align-items: stretch;
	width: 100%;
	min-width: 0;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--paper);
	transition: border-color 0.12s ease, box-shadow 0.12s ease;
}

.dsk-book-phone:focus-within {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-ring);
}

.dsk-book .dsk-book-phone input[type="tel"] {
	flex: 1 1 auto;
	min-width: 0;
	border: 0;
	border-radius: 0 var(--radius) var(--radius) 0;
	box-shadow: none;
	background: transparent;
}

.dsk-book .dsk-book-phone input[type="tel"]:focus { box-shadow: none; }

.dsk-book-cc {
	position: relative;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	border-right: 1px solid var(--line);
	background: var(--sunk);
	border-radius: var(--radius) 0 0 var(--radius);
	cursor: pointer;
}

.dsk-book-cc-face {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0 10px 0 12px;
	font-size: 15.5px;
	font-variant-numeric: tabular-nums;
	color: var(--ink);
	white-space: nowrap;
	pointer-events: none;
}

.dsk-book-cc-flag { font-size: 18px; line-height: 1; }
.dsk-book-cc-face svg { color: var(--ink-3); }

.dsk-book .dsk-book-cc select {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	opacity: 0;
	cursor: pointer;
	padding: 0;
	border: 0;
	font-size: 16px;
}

/* ---------------------------------------------------------------
 * Whose appointments
 * ------------------------------------------------------------- */

.dsk-book-people {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0 0 16px;
}

.dsk-book .dsk-book-people button {
	appearance: none;
	border: 1px solid var(--line);
	background: var(--paper);
	color: var(--ink-2);
	border-radius: 999px;
	padding: 7px 14px;
	min-height: 36px;
	font: inherit;
	font-size: 14px;
	cursor: pointer;
}

.dsk-book .dsk-book-people button.is-on {
	border-color: var(--accent);
	background: var(--accent-wash);
	color: var(--ink);
	font-weight: 600;
}

/* A link-button that sits inside a sentence. */
.dsk-book .dsk-book-btn.dsk-book-inline {
	display: inline;
	min-height: 0;
	padding: 0;
	font-size: inherit;
	font-weight: 600;
	vertical-align: baseline;
	flex: none;
}

/* ---------------------------------------------------------------
 * Phones
 *
 * iOS zooms the whole page into any field set below 16px and never
 * zooms back out, which is what made the form feel broken on an
 * iPhone. Every control is 16px on a narrow screen. Tap targets are
 * at least 44px, the modal is the whole screen, and it respects the
 * notch and the home bar.
 * ------------------------------------------------------------- */

@media (max-width: 760px) {
	.dsk-book input[type="text"],
	.dsk-book input[type="tel"],
	.dsk-book input[type="email"],
	.dsk-book input[type="date"],
	.dsk-book input[type="search"],
	.dsk-book input[type="password"],
	.dsk-book select,
	.dsk-book textarea,
	.dsk-book-cc-face {
		font-size: 16px;
	}

	.dsk-book .dsk-book-btn { min-height: 46px; }
	.dsk-book .dsk-book-btn.dsk-book-inline { min-height: 0; }

	.dsk-book-actions { gap: 10px; margin-top: 20px; padding-top: 18px; }

	/* The primary action fills the row; quiet links sit below it. */
	.dsk-book-actions .dsk-book-btn:not(.dsk-book-btn--link) { flex: 1 1 100%; }
	.dsk-book-actions .dsk-book-btn--link { flex: 0 1 auto; }

	.dsk-book-seg { display: flex; width: 100%; }
	.dsk-book .dsk-book-seg button { flex: 1 1 0; padding: 8px 10px; }

	.dsk-book-tabs { gap: 18px; overflow-x: auto; }
	.dsk-book-tabs button { white-space: nowrap; }

	.dsk-book input.dsk-book-code { max-width: none; }

	.dsk-book-scrim { padding: 0; align-items: stretch; }

	.dsk-book.dsk-book--modal {
		min-height: 100vh;
		min-height: 100dvh;
		padding-bottom: env(safe-area-inset-bottom, 0);
	}

	.dsk-book button.dsk-book-close {
		top: calc(10px + env(safe-area-inset-top, 0px));
		right: 10px;
		width: 44px;
		height: 44px;
		background: var(--paper);
	}

	.dsk-book--modal .dsk-book-rail { padding-top: calc(16px + env(safe-area-inset-top, 0px)); padding-right: 56px; }

	.dsk-book-list li { padding: 14px; }
	.dsk-book-times { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); }
}

/* The short stage name only appears in the phone stepper. */
.dsk-book-stage-short { display: none; }

/* ---------------------------------------------------------------
 * Phone stepper
 *
 * Four equal columns across the header, centred: a numbered dot with
 * its short name underneath, joined by a line that fills in as the
 * patient moves on. Where they are is a solid, glowing dot and a white
 * label; what is done is a ticked dot; what is still to come is dim.
 * Replaces the old row that showed one label and left the rest as bare
 * numbers pushed to the left.
 * ------------------------------------------------------------- */

@media (max-width: 760px) {
	.dsk-book-rail { align-items: stretch; text-align: center; padding: 18px 0 16px; }

	.dsk-book-rail > :first-child { display: flex; flex-direction: column; align-items: center; }
	.dsk-book-logo { margin-left: auto; margin-right: auto; }

	.dsk-book-stages {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 0;
		overflow: visible;
		width: 100%;
		max-width: 420px;
		margin: 4px auto 0;
		padding: 0 8px;
		list-style: none;
		box-sizing: border-box;
	}

	.dsk-book-stage,
	.dsk-book-stage-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: flex-start;
		gap: 7px;
		padding: 0;
		margin: 0;
		min-width: 0;
		white-space: normal;
		text-align: center;
		font-size: 12px;
		line-height: 1.2;
	}

	.dsk-book-stage-btn { width: 100%; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; }

	/* The connecting line, from the previous dot to this one. */
	.dsk-book-stage::before {
		display: block;
		content: "";
		position: absolute;
		top: 16px;
		left: -50%;
		right: 50%;
		width: auto;
		height: 2px;
		background: rgba(255, 255, 255, 0.16);
		z-index: 0;
	}

	.dsk-book-stage:first-child::before { display: none; }

	.dsk-book-stage.is-done::before,
	.dsk-book-stage.is-now::before { background: var(--accent-bright); }

	.dsk-book-stage-dot {
		width: 34px;
		height: 34px;
		font-size: 14px;
		font-family: inherit;
		font-weight: 600;
		border: 2px solid rgba(255, 255, 255, 0.28);
		background: var(--rail);
		color: rgba(255, 255, 255, 0.6);
		box-shadow: none;
	}

	.dsk-book-stage.is-now .dsk-book-stage-dot {
		background: var(--accent-bright);
		border-color: var(--accent-bright);
		color: var(--on-accent);
		box-shadow: 0 0 0 5px rgba(88, 196, 140, 0.25);
		transform: scale(1.06);
	}

	.dsk-book-stage.is-done .dsk-book-stage-dot {
		background: var(--accent-bright);
		border-color: var(--accent-bright);
		color: var(--on-accent);
	}

	.dsk-book-stage-text { display: block; min-width: 0; max-width: 100%; }
	.dsk-book-stage-label { display: none; }

	.dsk-book-stage .dsk-book-stage-short,
	.dsk-book-stage:not(.is-now) .dsk-book-stage-short {
		display: block;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		color: rgba(255, 255, 255, 0.55);
		font-weight: 500;
		letter-spacing: 0.1px;
	}

	.dsk-book-stage.is-done .dsk-book-stage-short { color: rgba(255, 255, 255, 0.78); }

	.dsk-book-stage.is-now .dsk-book-stage-short {
		color: #ffffff;
		font-weight: 700;
	}

	/* On a phone the whole ticked stage is the button; no separate pill. */
	.dsk-book-stage-change { display: none; }
}

/* Room above a step when it is scrolled into view, so a sticky site
   header does not cover its heading. None inside the full-screen popup. */
.dsk-book-panel { scroll-margin-top: 90px; }
.dsk-book--modal .dsk-book-panel { scroll-margin-top: 0; }

/* "Booked before using your email?" — finding an existing record. */
.dsk-book-findbox {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 22px 0 6px;
	padding: 16px 18px;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	background: var(--sunk);
}

.dsk-book-findbox > b { font-size: 15px; color: var(--ink); }
.dsk-book-findbox > span { font-size: 14px; color: var(--ink-2); line-height: 1.5; }
.dsk-book-findbox > .dsk-book-btn { align-self: flex-start; margin-top: 4px; }
.dsk-book-findbox .dsk-book-actions { margin-top: 10px; padding-top: 0; border-top: 0; }