/*
 * The booking widget's styles.
 *
 * Self-contained, because this document lives in an iframe on somebody else's website - there
 * is no shared design system to inherit from and nothing of the practice's to collide with.
 *
 * It is the CLINIC DIARY WEBSITE's design, restated. The palette, the type scale, the radii,
 * the button treatments and the slot chip are all lifted from cd-web's Sass layer
 * (wwwroot/scss/abstracts/_tokens.scss and components/), so a patient who lands on the
 * directory and a patient who books from their optometrist's own page are looking at one
 * product. The values are COPIED rather than imported on purpose: a package dependency
 * between a patient's download and cd-web's stylesheet would ship a marketing site's CSS to
 * every booking, and the widget must stay a small standalone file.
 *
 * When cd-web's tokens move, move these. The source of truth is cd-web, not this file.
 */

:root {
    /* ---------------------------------------------------------------- palette
       cd-web's six. Ink is a near-black with warmth in it, not #000; canvas is the cream the
       whole site sits on, and white is reserved for cards so the layering reads. */
    --cdw-ink: #201f1e;
    --cdw-green: #3d8560;
    --cdw-mint: #6cae8a;
    --cdw-sand: #edeae3;
    --cdw-canvas: #f7f6f3;
    --cdw-surface: #ffffff;

    /* THE PRACTICE'S PALETTE. Set inline on the .cdw root from theme.palette, which the
       server derives from the one colour the practice chose (cd-shared WidgetThemes); these
       are fallbacks only, for the moment before the configuration arrives. Everything cd-web
       paints green is painted with these instead, so a practice whose brand is not green
       still gets a coherent form rather than two accent colours fighting.

       The split that keeps any chosen colour readable:
       --cdw-accent         the colour as chosen. NON-TEXT only: band, progress, rings, borders.
       --cdw-accent-strong  deepened until white on it (and it on white) passes AA. Anything
                            that is text, or sits under text: buttons, links, slot labels, ticks.
       --cdw-on-accent      text on --cdw-accent-strong.
       --cdw-accent-hover   one step deeper than strong, for filled hover states.
       --cdw-accent-soft    a tint over white: chosen cards, resting slots.
       --cdw-accent-border  a stronger tint: slot outlines, the progress track. */
    --cdw-accent: var(--cdw-green);
    --cdw-accent-strong: var(--cdw-accent);
    --cdw-on-accent: #fff;
    --cdw-accent-hover: #2c6247;
    --cdw-accent-soft: #eef4f1;
    --cdw-accent-border: #c2d7cd;

    /* Ink at cd-web's alphas, named by role. The text alphas have a hard floor of 0.66 and
       that is not taste: ink over the cream canvas needs alpha >= 0.63 to clear WCAG AA at
       4.5:1. Hierarchy is carried by size and weight, never by unreadable grey. Borders are
       not text, so they are unconstrained. */
    --cdw-border: rgba(32, 31, 30, 0.1);
    --cdw-border-strong: rgba(32, 31, 30, 0.16);
    --cdw-border-heavy: rgba(32, 31, 30, 0.2);

    --cdw-text-faint: rgba(32, 31, 30, 0.66);
    --cdw-text-muted: rgba(32, 31, 30, 0.7);
    --cdw-text-secondary: rgba(32, 31, 30, 0.72);
    --cdw-text-body: rgba(32, 31, 30, 0.74);

    /* cd-web's one red, from its error-ui layer. Used only for a failed submission. */
    --cdw-error: #b32121;

    /* ---------------------------------------------------------------- type
       Hanken Grotesk, the website's typeface, with a system fallback that is measured close
       enough that the swap does not reflow the form under the patient's cursor. */
    --cdw-font: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;

    /* Major third from 16px, nudged to cd-web's optical sizes. */
    --cdw-text-fine: 0.8125rem;
    --cdw-text-small: 0.9375rem;
    --cdw-text-body-size: 1rem;
    --cdw-text-lede: 1.1875rem;
    --cdw-text-h3: 1.3125rem;
    --cdw-text-h2: 1.9375rem;

    /* ---------------------------------------------------------------- shape
       cd-web's ladder, minus the rungs this form has no use for. Restating the whole scale
       would mean carrying tokens nothing reads, in a file whose reason to exist is that it
       is small. */
    --cdw-radius-sm: 6px;   /* slot chip */
    --cdw-radius: 9px;      /* button, input */
    --cdw-radius-lg: 14px;  /* card, panel */

    /* A single light design, like cd-web. Declared so a visitor whose OS is dark does not
       get form controls and scrollbars painted dark inside a cream form. */
    color-scheme: light only;
}

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

html,
body {
    margin: 0;
    padding: 0;
    background: var(--cdw-canvas);
    color: var(--cdw-ink);
    font-family: var(--cdw-font);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* cd-web styles <button> as bare text and re-adds chrome per variant, so the UA button is
   stripped entirely rather than overridden piecemeal. */
button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    cursor: pointer;
}

input,
select,
textarea {
    font-family: inherit;
    font-size: var(--cdw-text-small);
    color: var(--cdw-ink);
}

/* Strong, not the raw accent: the browser draws a white tick on this fill. */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--cdw-accent-strong);
}

input::placeholder,
textarea::placeholder {
    color: rgba(32, 31, 30, 0.45);
}

/* Never removed, only restyled. A booking form that cannot be completed by keyboard is one
   a whole category of patients cannot use. */
/* The focus ring is drawn in the STRONG shade: a light chosen colour (a pale yellow, say) is a
   fine band but an invisible ring on the cream canvas, and a ring nobody can see is no ring.
   For every preset the two are the same colour. */
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid var(--cdw-accent-strong);
    outline-offset: -2px;
}

input:focus,
select:focus,
textarea:focus {
    outline: 2px solid var(--cdw-accent-strong);
    outline-offset: -2px;
}

/* Buttons get the ring OUTSIDE their edge. Inside, it would vanish into a filled button or a
   slot chip of the same colour, and merge with a chosen card's own ring. */
button:focus-visible {
    outline-offset: 2px;
}

/* The practice's tint rather than cd-web's fixed mint, so selecting text in a blue form does
   not flash green. Ink on it, because the tint is light. */
::selection {
    background: var(--cdw-accent-border);
    color: var(--cdw-ink);
}

/* Every time, date and duration. Tabular figures are why a column of times lines up; without
   this the 1s are narrow and the rows drift. */
time,
.cdw__slot,
.cdw__summary {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
}

/* ------------------------------------------------------------------- shell */

.cdw {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 26px 24px 24px;
    gap: 20px;
}

/* The staging strip (EnvironmentBanner), above everything in the frame. The same yellow, ink
   and wording as every other Clinic Diary app's strip; it never renders in production. */
.cdw-env-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 28px;
    padding: 4px 16px;
    background: #fff4ce;
    border-bottom: 1px solid #f2e2a8;
    color: #6b4e00;
    font-size: var(--cdw-text-fine);
    font-weight: 600;
    text-align: center;
}

.cdw-env-banner__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #9d5d00;
    flex: none;
}

/* A thin strip of the practice's colour across the very top of the frame - the first thing
   that says "this is your optometrist's form" before a word is read. Full bleed, so it pulls
   back out through the shell's padding (and the 480px breakpoint's, below). */
.cdw__band {
    flex: none;
    height: 4px;
    margin: -26px -24px 0;
    background: var(--cdw-accent);
}

.cdw__header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-bottom: 1px solid var(--cdw-border);
    padding-bottom: 18px;
}

/* The mark on the left, "Step 2 of 6" on the right. */
.cdw__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cdw__stepof {
    margin-left: auto;
    font-size: var(--cdw-text-fine);
    font-weight: 500;
    color: var(--cdw-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* One segment per step THIS practice shows. Segments rather than a continuous bar so a
   patient can see at a glance how many are left, not just a proportion. */
.cdw__progress {
    display: flex;
    gap: 4px;
    margin-top: 10px;
}

.cdw__progress-step {
    flex: 1;
    min-width: 0;
    height: 4px;
    border-radius: 2px;
    background: var(--cdw-accent-border);
    transition: background-color 0.2s ease;
}

.cdw__progress-step--done {
    background: var(--cdw-accent);
}

/* The Clinic Diary mark: the outlined calendar, drawn in strokes rather than a filled tile.
   In a practice's header it is painted in the practice's own accent rather than the fixed
   green, so a surgery with a blue theme gets a blue mark instead of a green one beside blue
   buttons. Where there is no practice (the unavailable notice) it is the brand's own green.
   The strong accent, not the plain one: the mark is thin, and a pale accent would vanish. */
.cdw__marks {
    display: block;
    flex: none;
}

.cdw__mark-glyph {
    stroke: var(--cdw-accent-strong);
}

.cdw__marks--brand .cdw__mark-glyph {
    stroke: var(--cdw-mint);
}

.cdw__practice {
    margin: 0;
    font-size: var(--cdw-text-h3);
    font-weight: 600;
    letter-spacing: -0.3px;
    line-height: 1.14;
}

/* The practice's logo on the left, its name and address on the right - how a practice's own
   letterhead reads. Wraps rather than squeezes: on a narrow frame the text drops under the logo
   instead of being crushed beside it. */
.cdw__brand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px 20px;
}

/* Logos arrive in every shape a designer can produce, so the box is a ceiling, never a crop:
   contain keeps a wide wordmark and a square badge both whole. */
.cdw__logo {
    display: block;
    max-width: min(220px, 100%);
    max-height: 64px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.cdw__identity {
    flex: 1 1 14rem;
    min-width: 0;
    text-align: right;
}

.cdw__address {
    margin: 4px 0 0;
    font-size: var(--cdw-text-fine);
    color: var(--cdw-text-muted);
    overflow-wrap: anywhere;
}

/* The running summary of what has been chosen so far - the widget's equivalent of a
   breadcrumb. Sentence case and untracked, because it says something the heading cannot. */
.cdw__summary {
    margin: 0;
    font-size: var(--cdw-text-fine);
    font-weight: 500;
    color: var(--cdw-text-muted);
}

.cdw__heading {
    margin: 0;
    font-size: var(--cdw-text-h2);
    font-weight: 600;
    line-height: 1.14;
    letter-spacing: -1px;
    text-wrap: balance;
}

.cdw__fine {
    margin: 0;
    font-size: var(--cdw-text-fine);
    line-height: 1.5;
    color: var(--cdw-text-muted);
}

.cdw__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.cdw__body p {
    margin: 0;
    line-height: 1.55;
    max-width: 68ch;
}

.cdw__loading {
    padding: 48px 0;
    text-align: center;
    color: var(--cdw-text-muted);
}

/* The form's outline before it arrives: a practice-name line, a heading line, three cards.
   Sand rather than the accent, because the accent is not known until the configuration is -
   and a green skeleton that turns blue would be a flash of the wrong brand. The pulse is
   switched off entirely under reduced motion (below), not just shortened. */
.cdw__skeleton {
    display: block;
    background: var(--cdw-sand);
    border-radius: var(--cdw-radius-sm);
    animation: cdw-pulse 1.6s ease-in-out infinite;
}

.cdw__skeleton--line {
    width: 40%;
    height: 22px;
}

.cdw__skeleton--heading {
    width: 70%;
    height: 34px;
}

.cdw__skeleton--card {
    height: 76px;
    border-radius: var(--cdw-radius-lg);
}

@keyframes cdw-pulse {
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.55;
    }
}

/* Read out, never seen: the skeleton itself is aria-hidden. */
.cdw__sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ------------------------------------------------------------------- choices */

.cdw__choices {
    display: grid;
    gap: 12px;
}

/* min(220px, 100%) matters: inside a padded panel at ~375px a raw minmax(220px, 1fr) forces
   a track wider than the space available and the content spills out of the frame. */
.cdw__choices--two {
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
}

/* cd-web's card, made pressable. White on the cream canvas, hairline border, generous
   radius - the same object as a directory practice card, so choosing an appointment type
   feels like the same site as choosing a practice. */
/* The right padding is always reserved for the tick, chosen or not, so choosing a card never
   rewraps its text. */
.cdw__choice {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    padding: 18px 52px 18px 20px;
    text-align: left;
    background: var(--cdw-surface);
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.cdw__choice:hover {
    border-color: var(--cdw-accent);
}

/* An inset ring rather than a thicker border: a thicker border would shift every neighbour as
   the selection moves down the list. The 1px border plus a 1px inset shadow make a 2px ring
   drawn wholly inside the card's edge. The tint and the tick say "chosen" too, so it never
   rests on colour alone. */
.cdw__choice--chosen {
    background: var(--cdw-accent-soft);
    border-color: var(--cdw-accent);
    box-shadow: inset 0 0 0 1px var(--cdw-accent);
}

.cdw__tick {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cdw-accent-strong);
    color: var(--cdw-on-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.cdw__choice-name {
    font-size: var(--cdw-text-body-size);
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* ------------------------------------------------------------------- slots */

.cdw__practitioner {
    background: var(--cdw-surface);
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    padding: 20px;
}

.cdw__practitioner-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.cdw__who {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.cdw__avatar {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--cdw-sand);
}

/* Accent text on the accent tint, the same pairing as a resting slot. */
.cdw__avatar--initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--cdw-accent-soft);
    color: var(--cdw-accent-strong);
    font-size: var(--cdw-text-body-size);
    font-weight: 600;
}

/* Whose clock the times are on - a quiet tag under the name, as cd-web tags a listing. */
.cdw__zone {
    display: inline-block;
    margin: 4px 0 0;
    padding: 2px 8px;
    border-radius: var(--cdw-radius-sm);
    background: var(--cdw-sand);
    color: var(--cdw-text-secondary);
    font-size: var(--cdw-text-fine);
    font-weight: 500;
}

.cdw__day-name .cdw__zone {
    margin: 0 0 0 6px;
    padding: 1px 6px;
}

.cdw__practitioner-name {
    margin: 0;
    font-size: var(--cdw-text-h3);
    font-weight: 600;
    letter-spacing: -0.3px;
}

.cdw__close {
    flex: none;
    width: 32px;
    height: 32px;
    margin: -6px -6px 0 0;
    border-radius: var(--cdw-radius-sm);
    color: var(--cdw-ink);
    font-size: 24px;
    line-height: 1;
}

.cdw__close:hover {
    background: var(--cdw-accent-soft);
}

/* One row per day once a practitioner is opened: the day, its times, and Hide. */
.cdw__day {
    display: grid;
    grid-template-columns: 6.5rem 1fr auto;
    align-items: start;
    gap: 10px 14px;
    padding: 14px 0;
    border-top: 1px solid var(--cdw-border);
}

.cdw__day-name {
    margin: 0;
    padding-top: 8px;
    font-size: var(--cdw-text-small);
    font-weight: 600;
}

.cdw__day-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 7px;
}

.cdw__day-slots[hidden] {
    display: none;
}

.cdw__day .cdw__day-toggle {
    grid-column: 3;
    margin-top: 0;
    padding-top: 8px;
}

.cdw__more-days {
    display: block;
    width: 100%;
    margin-top: 0;
    padding-top: 12px;
    border-top: 1px solid var(--cdw-border);
    text-align: center;
}

.cdw__slots {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

/* cd-web's .cd-slot: green is not "the accent colour", green is BOOKABLE TIME. The chip is
   tinted when the time is offered and fills solid when it is taken - the same promise the
   directory's next-available strip makes. Its label is accent TEXT, so it is the strong
   shade. */
.cdw__slot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 13px;
    border: 1px solid var(--cdw-accent-border);
    border-radius: var(--cdw-radius-sm);
    background: var(--cdw-accent-soft);
    color: var(--cdw-accent-strong);
    font-size: var(--cdw-text-small);
    font-weight: 600;
    white-space: nowrap;
    transition: background-color 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.cdw__slot:hover,
.cdw__slot--chosen {
    background: var(--cdw-accent-strong);
    border-color: var(--cdw-accent-strong);
    color: var(--cdw-on-accent);
}

.cdw__link {
    display: inline-block;
    margin-top: 12px;
    color: var(--cdw-accent-strong);
    font-size: var(--cdw-text-small);
    font-weight: 500;
    text-decoration: none;
}

.cdw__link:hover {
    color: var(--cdw-ink);
    text-decoration: underline;
}

.cdw__source {
    margin-top: 4px;
}

/* ------------------------------------------------------------------- forms */

.cdw__fields {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: 14px;
}

.cdw__field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: var(--cdw-text-fine);
    font-weight: 500;
    color: var(--cdw-text-secondary);
}

.cdw__field--wide {
    grid-column: 1 / -1;
}

/* cd-web's .cd-field, in its --surface form. The default field is canvas-tinted because on
   that site it sits inside a white card; here the steps sit directly ON the canvas, so a
   canvas-tinted input would be an outline with nothing in it. */
.cdw__input {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid var(--cdw-border-strong);
    border-radius: var(--cdw-radius);
    background: var(--cdw-surface);
    font: inherit;
    font-size: var(--cdw-text-small);
    color: var(--cdw-ink);
}

/* A field filled in wrongly - today only a mobile number that is not 04 and ten digits. Red
   only on the field itself and the sentence under it: the step is not failed, one box is. */
.cdw__input--invalid {
    border-color: var(--cdw-error);
    box-shadow: 0 0 0 1px var(--cdw-error);
}

.cdw__field-error {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    font-weight: 400;
    color: var(--cdw-error);
}

.cdw__field-error::before {
    content: "!";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--cdw-error);
    color: var(--cdw-surface);
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

.cdw__question {
    margin: 0;
    padding: 20px;
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    background: var(--cdw-surface);
}

/* A <legend> is normally cut into the fieldset's top border, which leaves the question text
   sitting ON the card's edge with the border showing through either side of it. Floating it
   to full width takes it out of the notch and makes it an ordinary heading inside the card -
   the semantics a screen reader needs, with the appearance the design wants. */
.cdw__question legend {
    float: left;
    width: 100%;
    padding: 0;
    font-size: var(--cdw-text-body-size);
    font-weight: 600;
    letter-spacing: -0.2px;
}

/* A flex container does not overlap a float, it is placed BESIDE it - so without this the
   Yes/No row of a question that has no description is laid out in the zero-width strip next
   to the full-width legend and pushes the whole frame sideways. */
.cdw__question > *:not(legend) {
    clear: both;
}

.cdw__question::after {
    content: "";
    display: table;
    clear: both;
}

.cdw__question .cdw__fine {
    margin-top: 6px;
}

.cdw__yesno {
    display: flex;
    gap: 24px;
    margin-top: 14px;
}

.cdw__option {
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: var(--cdw-text-small);
    line-height: 1.5;
    color: var(--cdw-text-body);
    cursor: pointer;
}

.cdw__option input {
    width: 17px;
    height: 17px;
    margin: 0;
}

/* The warm panel: cd-web uses sand for anything the reader must take in before moving on. */
.cdw__policy {
    background: var(--cdw-sand);
    border-radius: var(--cdw-radius-lg);
    padding: 20px;
}

.cdw__policy h3 {
    margin: 0 0 6px;
    font-size: var(--cdw-text-h3);
    font-weight: 600;
    letter-spacing: -0.3px;
}

.cdw__policy p {
    margin: 0;
    color: var(--cdw-text-body);
    white-space: pre-wrap;
}

.cdw__calendar {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: 280px;
    font-size: var(--cdw-text-fine);
    font-weight: 500;
    color: var(--cdw-text-secondary);
}

/* ------------------------------------------------------------------- panels */

.cdw__panel {
    padding: 26px;
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    background: var(--cdw-surface);
}

.cdw__panel--quiet {
    text-align: center;
    color: var(--cdw-text-muted);
}

.cdw__panel p {
    margin: 0 0 10px;
}

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

/* No practice to show (unknown, suspended, widget off, or opened bare): a Clinic Diary card,
   centred on the canvas. The accent is cd-web's green here, since no practice colour exists. */
.cdw__notice {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 24px 0;
}

.cdw__notice-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    max-width: 520px;
    padding: 36px 32px 30px;
    overflow: hidden;
    background: var(--cdw-surface);
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    box-shadow: 0 1px 2px rgba(32, 31, 30, 0.04), 0 12px 32px -12px rgba(32, 31, 30, 0.14);
    text-align: center;
}

/* The same strip as .cdw__band, drawn on the card itself. */
.cdw__notice-card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 4px;
    background: var(--cdw-accent);
}

.cdw__notice-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.cdw__wordmark {
    font-size: var(--cdw-text-small);
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--cdw-ink);
}

.cdw__notice-icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--cdw-accent-soft);
    color: var(--cdw-accent-strong);
}

.cdw__notice-heading {
    margin: 4px 0 0;
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.18;
    letter-spacing: -0.6px;
    text-wrap: balance;
}

.cdw__notice-text {
    max-width: 40ch;
    margin: 0;
    color: var(--cdw-text-body);
    text-wrap: pretty;
}

.cdw__notice-hint {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 12px 16px;
    border-radius: var(--cdw-radius);
    background: var(--cdw-sand);
    color: var(--cdw-ink);
    font-size: var(--cdw-text-small);
    font-weight: 500;
    text-align: left;
}

.cdw__notice-hint svg {
    flex: none;
    color: var(--cdw-accent-strong);
}

.cdw__notice-footer {
    margin: 0;
    font-size: var(--cdw-text-fine);
    color: var(--cdw-text-muted);
}

.cdw__notice-footer strong {
    font-weight: 600;
    color: var(--cdw-ink);
}

@media (max-width: 480px) {
    .cdw__notice {
        padding: 8px 0;
    }

    .cdw__notice-card {
        padding: 28px 20px 22px;
    }

    .cdw__notice-heading {
        font-size: var(--cdw-text-h3);
    }
}

/* The confirmation: a calm tick, the heading, a receipt card of what was requested, then the
   honest copy. Centred, because it is an ending rather than another step. */
.cdw__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding-top: 8px;
    text-align: center;
}

.cdw__done-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cdw-accent-soft);
    color: var(--cdw-accent-strong);
    font-size: 22px;
    font-weight: 700;
    line-height: 1;
}

.cdw__receipt {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 10px 20px;
    width: 100%;
    max-width: 440px;
    margin: 4px 0 0;
    padding: 20px 22px;
    background: var(--cdw-surface);
    border: 1px solid var(--cdw-border);
    border-radius: var(--cdw-radius-lg);
    text-align: left;
    font-size: var(--cdw-text-small);
}

.cdw__receipt dt {
    color: var(--cdw-text-muted);
}

.cdw__receipt dd {
    margin: 0;
    font-weight: 500;
    color: var(--cdw-ink);
    overflow-wrap: anywhere;
}

.cdw__receipt-reference {
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.3px;
}

.cdw__alert {
    padding: 16px 18px;
    border: 1px solid;
    border-radius: var(--cdw-radius-lg);
}

.cdw__alert p {
    margin: 0 0 8px;
}

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

.cdw__alert--danger {
    background: var(--cdw-surface);
    border-color: var(--cdw-error);
    color: var(--cdw-error);
}

/* A screening block is NOT an error - it means this appointment should be made by talking to
   somebody. Sand says "read this before you go on"; red would say "you have done something
   wrong", which is the one thing that message must never imply. */
.cdw__alert--warning {
    background: var(--cdw-sand);
    border-color: transparent;
    color: var(--cdw-ink);
}

/* ------------------------------------------------------------------- footer */

.cdw__footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    border-top: 1px solid var(--cdw-border);
    padding-top: 18px;
}

/* cd-web's .cd-btn--green and .cd-btn--outline. The fill is the STRONG shade, because white
   text sits on it; hover goes one step deeper in the practice's own colour rather than to
   ink, so a branded form does not flash black under the cursor. */
.cdw__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 22px;
    border: 1px solid transparent;
    border-radius: var(--cdw-radius);
    background: var(--cdw-accent-strong);
    color: var(--cdw-on-accent);
    font-size: var(--cdw-text-small);
    font-weight: 600;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cdw__btn:hover {
    background: var(--cdw-accent-hover);
    color: var(--cdw-on-accent);
}

.cdw__btn[disabled] {
    background: var(--cdw-sand);
    color: var(--cdw-text-faint);
    cursor: not-allowed;
}

.cdw__btn--quiet {
    background: none;
    border-color: var(--cdw-border-heavy);
    color: var(--cdw-ink);
}

.cdw__btn--quiet:hover {
    background: none;
    color: var(--cdw-accent-strong);
    border-color: var(--cdw-accent-strong);
}

#blazor-error-ui {
    color-scheme: light only;
    display: none;
    position: fixed;
    inset: auto 0 0 0;
    padding: 12px 18px;
    background: lightyellow;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    font-size: var(--cdw-text-small);
}

.blazor-error-boundary {
    padding: 1rem;
    background: var(--cdw-error);
    color: #fff;
}

@media (max-width: 480px) {
    /* Under the logo rather than beside it, so the text starts where the logo does. */
    .cdw__identity {
        text-align: left;
    }

    .cdw {
        padding: 18px 16px 16px;
    }

    .cdw__band {
        margin: -18px -16px 0;
    }

    .cdw__heading {
        font-size: var(--cdw-text-lede);
        letter-spacing: -0.4px;
    }

    .cdw__practitioner,
    .cdw__question,
    .cdw__policy,
    .cdw__panel,
    .cdw__receipt {
        padding: 16px;
    }

    /* Still room on the right for the tick. */
    .cdw__choice {
        padding: 16px 46px 16px 16px;
    }

    .cdw__tick {
        top: 14px;
        right: 14px;
    }

    .cdw__receipt {
        column-gap: 14px;
    }

    /* The day and Hide share the top line; the times take the full width under them. */
    .cdw__day {
        grid-template-columns: 1fr auto;
    }

    .cdw__day-slots {
        grid-column: 1 / -1;
        grid-row: 2;
        grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    }

    .cdw__day .cdw__day-toggle {
        grid-column: 2;
        grid-row: 1;
    }

    .cdw__footer {
        flex-direction: column-reverse;
    }

    .cdw__btn {
        width: 100%;
    }
}

/* Keyboard users get the focus ring; everybody gets the layout. Motion is decoration here and
   the first thing to go. */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
    }

    /* An INFINITE animation at 0.01ms is not "no motion", it is a flicker - so the skeleton's
       pulse is removed outright and it rests as a still sand block. */
    .cdw__skeleton {
        animation: none;
    }
}

/* "You have selected: …" above the details form.

   A restatement, not a control: the patient chose this four steps ago, and by the time they
   are typing a date of birth it has scrolled out of memory. Going back to check costs them
   the form.

   Painted in the practice's accent-soft rather than a grey, so it reads as part of their form
   and not as a system notice - and full-bleed through the shell's padding, like .cdw__band,
   so it sits as a band under the step header rather than as a floating card. */
.cdw__selected {
    margin: -4px -24px 22px;
    padding: 16px 24px;
    background: var(--cdw-accent-soft);
    border-top: 1px solid var(--cdw-accent-border);
    border-bottom: 1px solid var(--cdw-accent-border);
}

.cdw__selected-label {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--cdw-text-muted);
}

.cdw__selected-row {
    display: flex;
    /* Top, not centre. Centred against a three-line block the icon drifts down beside the
       practitioner instead of the time it belongs to - and the block is three lines whenever
       there is a branch to name, which is most of the time. */
    align-items: flex-start;
    gap: 14px;
}

/* accent-strong, not accent: it sits at text weight beside text. */
.cdw__selected-mark {
    flex: none;
    display: flex;
    /* Nudged to sit on the time line optically: the glyph box is taller than its cap height. */
    margin-top: 1px;
    color: var(--cdw-accent-strong);
}

.cdw__selected-when {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--cdw-ink);
}

.cdw__selected-who {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--cdw-text-muted);
}

/* The location, under the practitioner. Shown for single-location practices too - they never
   saw the branch step, and "where do I go" is what this band is for. */
.cdw__selected-where {
    margin: 2px 0 0;
    font-size: 14px;
    color: var(--cdw-text-muted);
}

@media (max-width: 480px) {
    .cdw__selected {
        margin-left: -16px;
        margin-right: -16px;
        padding: 14px 16px;
    }

    .cdw__selected-when {
        font-size: 16px;
    }
}