:root {
    color-scheme: light dark;
    --sand-50: #FEF7F0;
    --sand-100: #FAF0E6;
    --sand-200: #F2E4D3;
    --sand-300: #E6D3BC;
    --sand-500: #B39F87;
    --sand-600: #8C7A66;
    --slate-600: #56707C;
    --slate-900: #293A45;
    --teal-50: #E3F5F2;
    --teal-100: #C3EAE4;
    --teal-300: #63C8BA;
    --teal-400: #45C2B3;
    --teal-500: #2AB7A9;
    --teal-600: #219488;
    --teal-700: #1B786E;
    --green-500: #4FAE74;
    --green-50: #E7F5EC;
    --amber-50: #FCF1E0;
    --amber-500: #E8A33D;
    --amber-600: #B9791F;
    --coral-50: #FCEBE7;
    --coral-500: #E1604A;
    --coral-700: #A6392A;
    --bg-canvas: var(--sand-100);
    --bg-canvas-hover: var(--sand-200);
    --bg-surface: #FFFFFF;
    --bg-surface-hover: var(--sand-50);
    /* Sunken elements (inputs, slots). Same as the surface in light, darker than it in dark. */
    --bg-inset: #FFFFFF;
    --bg-accent: var(--teal-500);
    --bg-accent-hover: var(--teal-600);
    --bg-accent-active: var(--teal-700);
    --bg-slot-on: var(--teal-600);
    --text-primary: var(--slate-900);
    --text-secondary: var(--slate-600);
    --text-tertiary: var(--sand-600);
    --text-on-accent: #FFFFFF;
    --text-accent: var(--teal-700);
    --text-link: var(--teal-700);
    --text-link-hover: var(--teal-700);
    --border-default: var(--sand-300);
    --border-strong: var(--sand-500);
    --border-accent: var(--teal-500);
    --color-success: var(--green-500);
    --color-success-bg: var(--green-50);
    --color-pending: var(--amber-600);
    --color-pending-bg: var(--amber-50);
    --bg-question-on: var(--teal-50);
    --color-danger: var(--coral-500);
    --color-danger-bg: var(--coral-50);
    --text-danger: var(--coral-700);
    --switch-knob: #FFFFFF;
    --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%2356707C'/%3E%3C/svg%3E");
    --font-body: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
    --text-xs: 12px;
    --text-sm: 14px;
    --text-base: 16px;
    --text-lg: 19px;
    --text-xl: 23px;
    --text-2xl: 29px;
    --text-3xl: 38px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-full: 999px;
    --brand-bar-height: 72px;
    --shadow-sm: 0 1px 2px rgba(41, 58, 69, 0.08);
    --shadow-focus: 0 0 0 3px var(--teal-100);
    --ease-standard: cubic-bezier(.32, .08, .24, 1);
    --duration-fast: 120ms;
}

/* Dark scheme. Only the semantic tokens are re-pointed — every rule below keeps using   */
/* them, so the two schemes cannot drift apart. The warm sand neutrals give way to a cool */
/* ink ramp derived from --slate-900, and the teal accent moves up the ramp so it stays   */
/* legible against dark backgrounds.                                                      */
@media (prefers-color-scheme: dark) {
    :root {
        --ink-950: #10181C;
        --ink-900: #18232A;
        --ink-800: #202E36;
        --ink-700: #2B3C46;
        --ink-600: #3D525E;
        --ink-300: #8FA4AE;
        --ink-200: #AFC0C9;
        --ink-50: #E7EEF1;
        --bg-canvas: var(--ink-950);
        --bg-canvas-hover: var(--ink-800);
        --bg-surface: var(--ink-900);
        --bg-surface-hover: var(--ink-800);
        --bg-inset: var(--ink-950);
        --bg-accent: var(--teal-500);
        --bg-accent-hover: var(--teal-400);
        --bg-accent-active: var(--teal-300);
        --bg-slot-on: var(--teal-500);
        --text-primary: var(--ink-50);
        --text-secondary: var(--ink-200);
        --text-tertiary: var(--ink-300);
        /* Dark ink on the saturated teal — white would sit at ~2:1 on this fill. */
        --text-on-accent: #0C1618;
        --text-accent: var(--teal-300);
        --text-link: var(--teal-300);
        --text-link-hover: var(--teal-300);
        --border-default: var(--ink-700);
        --border-strong: var(--ink-600);
        --border-accent: var(--teal-500);
        --color-success: #6FC48F;
        --color-success-bg: rgba(79, 174, 116, 0.18);
        --color-pending: #E8B96B;
        --color-pending-bg: rgba(232, 163, 61, 0.18);
        --bg-question-on: rgba(42, 183, 169, 0.10);
        --color-danger: #F08A76;
        --color-danger-bg: rgba(225, 96, 74, 0.16);
        --text-danger: var(--color-danger);
        --switch-knob: var(--ink-50);
        --select-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238FA4AE'/%3E%3C/svg%3E");
        --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
        --shadow-focus: 0 0 0 3px rgba(42, 183, 169, 0.35);
    }
}

* {
    box-sizing: border-box
}

html, body {
    margin: 0;
    font-family: var(--font-body);
    background: var(--bg-canvas);
    color: var(--text-primary)
}

h1, h2, p {
    margin: 0
}

a {
    color: var(--text-link)
}

a:hover {
    color: var(--text-link-hover)
}

.layout {
    display: grid;
    grid-template-columns:380px 1fr;
    min-height: 100vh
}

.brand-panel {
    background: var(--bg-canvas);
    padding: 56px 44px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    position: sticky;
    top: 0;
    height: 100vh
}

.brand-organisation {
    font-size: var(--text-lg);
    font-weight: 800;
    letter-spacing: -0.01em
}

.brand-lead {
    font-size: var(--text-3xl);
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em
}

.brand-lead em {
    color: var(--text-accent);
    font-style: normal
}

.brand-address {
    font-style: normal;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.6
}

.brand-address span {
    display: block
}

.form-panel {
    background: var(--bg-surface);
    display: flex;
    justify-content: center;
    padding: 56px 40px
}

.form-wrap {
    max-width: 520px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 24px
}

/* ---- wizard ---- */

/*
 * The wizard is driven by `:target`: navigating to a step's id shows it and hides the
 * rest, which is why every Next and Back is a link rather than a button. `:has()` covers
 * the two cases `:target` alone cannot express: no step targeted at all (a fresh load, or
 * a hash pointing at something else), and marking the steps already behind the visitor.
 */

form {
    display: flex;
    flex-direction: column;
    gap: 24px
}

.wizard-progress {
    display: flex;
    flex-direction: column;
    gap: 8px
}

.progress {
    display: flex;
    gap: 6px
}

.progress-bar {
    flex: 1;
    height: 16px;
    display: flex;
    align-items: center
}

.progress-bar::before {
    content: "";
    display: block;
    width: 100%;
    height: 4px;
    border-radius: var(--radius-full);
    background: var(--border-default);
    transition: background var(--duration-fast) var(--ease-standard)
}

.progress-bar:hover::before {
    background: var(--border-strong)
}

/* The current step and everything before it. */
form:not(:has(.step:target)) .progress-bar:first-child::before,
form:has(#step-concern:target) .progress-bar:nth-child(-n+1)::before,
form:has(#step-slots:target) .progress-bar:nth-child(-n+2)::before,
form:has(#step-details:target) .progress-bar:nth-child(-n+3)::before,
form:has(#step-summary:target) .progress-bar:nth-child(-n+4)::before {
    background: var(--bg-accent)
}

.step-label {
    display: none;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0
}

form:not(:has(.step:target)) [data-step-label="step-concern"],
form:has(#step-concern:target) [data-step-label="step-concern"],
form:has(#step-slots:target) [data-step-label="step-slots"],
form:has(#step-details:target) [data-step-label="step-details"],
form:has(#step-summary:target) [data-step-label="step-summary"] {
    display: block
}

.step {
    display: none;
    flex-direction: column;
    gap: 32px;
    /* Following a step link scrolls the step into view; leave it some room. */
    scroll-margin-top: 24px
}

.step:target {
    display: flex
}

form:not(:has(.step:target)) #step-concern {
    display: flex
}

/* The requester is the patient, so the separate patient name fields do not apply. Hiding
   them is the whole mechanism, the fields stay optional in the markup and `clean()` is the
   only place the rule is enforced. */
form:has(#id_requester_is_patient:checked) #patient-fields {
    display: none
}

.group {
    display: flex;
    flex-direction: column;
    gap: 16px
}

.group-centered {
    margin-block: auto
}

/* A group built from form controls carries its name in a legend, one built from anything
   else in a paragraph. As with `.field legend`, the legend is not a flex item and so takes
   the group gap as a margin. */
.group-label, .group > legend {
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-tertiary)
}

.group > legend {
    padding: 0;
    margin-bottom: 16px
}

.lead {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    margin: 0
}

.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
    min-width: 0
}

.field label {
    font-size: var(--text-sm);
    font-weight: 700
}

/* A group of controls carries its name in a legend, since no single control can own it.
   A legend is not a flex item, so it takes the gap of its siblings as a margin. */
.field legend {
    font-size: var(--text-sm);
    font-weight: 700;
    padding: 0;
    margin-bottom: 6px
}

.field label .label-note {
    font-weight: 400;
    color: var(--text-secondary)
}

.field .hint {
    font-size: var(--text-xs);
    color: var(--text-secondary)
}

.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=date], .field select, .field textarea {
    height: 46px;
    padding: 0 14px;
    border-radius: var(--radius-md);
    border: 1.5px solid var(--border-default);
    background: var(--bg-inset);
    font-family: var(--font-body);
    font-size: var(--text-base);
    color: var(--text-primary);
    width: 100%;
    appearance: none
}

.field textarea {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    min-height: 72px
}

.field input:focus, .field select:focus, .field textarea:focus {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--shadow-focus)
}

.field select {
    background-image: var(--select-arrow);
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px
}

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

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

.switch {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: 700
}

.switch input, .question input {
    appearance: none;
    margin: 0;
    width: 40px;
    height: 24px;
    border-radius: var(--radius-full);
    background: var(--border-strong);
    position: relative;
    cursor: pointer;
    flex-shrink: 0;
    transition: background var(--duration-fast) var(--ease-standard)
}

.switch input::after, .question input::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--switch-knob);
    box-shadow: var(--shadow-sm);
    transition: left var(--duration-fast) var(--ease-standard)
}

.switch input:checked, .question input:checked {
    background: var(--bg-accent)
}

.switch input:checked::after, .question input:checked::after {
    left: 18px
}

.check, .radio {
    display: inline-flex;
    align-items: flex-start;
    gap: 10px;
    font-size: var(--text-sm);
    cursor: pointer;
    line-height: 1.4
}

.check input, .radio input {
    appearance: none;
    margin: 2px 0 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--border-strong);
    background: var(--bg-inset);
    flex-shrink: 0;
    cursor: pointer;
    display: grid;
    place-content: center
}

.check input {
    border-radius: 6px
}

.radio input {
    border-radius: 50%
}

.check input:checked, .radio input:checked {
    background: var(--bg-accent);
    border-color: var(--bg-accent)
}

.check input:checked::after {
    content: "";
    width: 11px;
    height: 7px;
    border-left: 2px solid var(--text-on-accent);
    border-bottom: 2px solid var(--text-on-accent);
    transform: rotate(-45deg) translateY(-1px)
}

.radio input:checked::after {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--text-on-accent)
}

/* A yes/no question that needs explaining. The three of them read as one block: a single
   card, hairlines between the rows, the switch centred on the item it answers. The tint on
   an answered row is what makes the block scannable at a glance. */
.question-list {
    display: flex;
    flex-direction: column;
    border: 1.5px solid var(--border-default);
    border-radius: var(--radius-lg);
    background: var(--bg-inset);
    overflow: hidden
}

.question {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    transition: background var(--duration-fast) var(--ease-standard)
}

.question:has(input:checked) {
    background: var(--bg-question-on)
}

/* The whole item is the hit area, so it is also the item that carries the focus ring. An
   outline rather than a shadow, since the card clips anything drawn outside the row. */
.question:has(input:focus-visible) {
    outline: 2px solid var(--border-accent);
    outline-offset: -2px
}

.question + .question {
    border-top: 1.5px solid var(--border-default)
}

/* Question and explanation stack in one column, the switch sits on the question's line. */
.question-toggle {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer
}

/* Takes the row, so the switch is pushed to the edge whatever the question's length. */
.question-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0
}

.question-label {
    font-size: var(--text-base);
    font-weight: 700;
    /* Matches the height of the switch, so the two line up exactly. */
    line-height: 24px
}

.question input:focus-visible {
    outline: none
}

.question-hint {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5
}

fieldset {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px
}

.radio-row {
    display: flex;
    gap: 20px;
    flex-wrap: wrap
}

.check-list {
    display: flex;
    flex-direction: column;
    gap: 14px
}

.check small {
    color: var(--text-secondary);
    font-weight: 400
}

.watermark {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    text-decoration: none;
    align-self: center;
    margin-top: 8px
}

.watermark:hover {
    color: var(--text-accent)
}

.watermark img {
    width: 16px;
    height: 16px
}

dl.summary {
    display: grid;
    grid-template-columns:auto 1fr;
    gap: 10px 16px;
    margin: 0
}

dl.summary dt {
    font-size: var(--text-sm);
    color: var(--text-secondary)
}

dl.summary dd {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: right
}

/* The presenting concerns are free text and can run long. The summary is a glance at what
   was entered, not the place to read it back in full. */
dl.summary dd[data-summary="concern"] {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden
}

.note-box {
    background: var(--bg-canvas);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px
}

.note-box-success {
    background: var(--color-success-bg);
    border-color: var(--color-success)
}

.note-box-danger {
    background: var(--color-danger-bg);
    border-color: var(--color-danger)
}

.note-box .note-title {
    font-weight: 800;
    color: var(--text-primary);
    font-size: var(--text-sm)
}

.note-box p {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0
}

/* Set apart from the steps above it, since it is the one thing that is not a next step. */
.note-box .note-waiting-time {
    margin-top: 10px
}

/* The consent fine print below the confirm button: mandatory, but never the thing to read
   first. */
.consent-details {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.consent-details p {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--text-tertiary);
    line-height: 1.5
}

.wizard-actions {
    display: flex;
    gap: 12px;
    margin-top: 8px
}

/* Direct children rather than `.btn`, so an action wrapped in its own `<form>` is sized
   the same as a bare link. */
.wizard-actions > * {
    flex: 1
}

/* Next and Back are links, so the button styles have to beat the anchor defaults for the
   underline and for the link colour in every state. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border-radius: var(--radius-md);
    border: none;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: var(--text-base);
    cursor: pointer;
    background: var(--bg-accent);
    width: 100%;
    text-decoration: none;
    transition: background var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard)
}

.btn, .btn:hover, .btn:active, .btn:focus-visible {
    color: var(--text-on-accent)
}

.btn:hover {
    background: var(--bg-accent-hover)
}

.btn:active {
    background: var(--bg-accent-active);
    transform: scale(0.98)
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus)
}

.btn-secondary {
    background: var(--bg-surface);
    border: 1.5px solid var(--border-default)
}

.btn-secondary, .btn-secondary:hover, .btn-secondary:active, .btn-secondary:focus-visible {
    color: var(--text-primary)
}

.btn-secondary:hover {
    background: var(--bg-surface-hover)
}

.btn-danger {
    background: var(--color-danger-bg);
    border: 1.5px solid var(--color-danger)
}

.btn-danger, .btn-danger:active, .btn-danger:focus-visible {
    color: var(--text-danger)
}

.btn-danger:hover {
    background: var(--color-danger);
    color: var(--text-on-accent)
}

.back-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 6px;
    margin-left: -8px;
    padding: 4px 8px;
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--duration-fast) var(--ease-standard), background var(--duration-fast) var(--ease-standard)
}

.back-link, .back-link:active, .back-link:focus-visible {
    color: var(--text-secondary)
}

.back-link:hover {
    background: var(--bg-canvas-hover);
    color: var(--text-primary)
}

.back-link:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus)
}

.back-link svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0
}

.success {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 40px 0;
    margin-block: auto;
}

.success .emblem {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: var(--color-success-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-success)
}

.success .emblem svg {
    width: 48px;
    height: 48px
}

.success .emblem-pending {
    background: var(--color-pending-bg);
    color: var(--color-pending)
}

.success h2 {
    font-size: var(--text-2xl);
    font-weight: 800
}

.success p {
    color: var(--text-secondary);
    max-width: 340px
}

@media (max-width: 780px) {
    .layout {
        grid-template-columns:1fr;
        grid-template-rows:var(--brand-bar-height) 1fr
    }

    .brand-panel {
        position: static;
        height: var(--brand-bar-height);
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 0 20px;
        gap: 16px
    }

    /* A long practice name has to be clipped rather than wrap the bar past its height. */
    .brand-organisation {
        min-width: 0;
        font-size: var(--text-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .brand-lead {
        display: none
    }

    /* Three address lines at this size still fit the fixed-height bar. */
    .brand-address {
        font-size: var(--text-xs);
        line-height: 1.4;
        text-align: right;
        flex-shrink: 0
    }

    .form-panel {
        padding: 32px 20px
    }
}

@media (max-width: 420px) {
    .row, .row-street, .row-zip {
        grid-template-columns:1fr
    }
}

.field-inline {
    display: flex;
    flex-direction: column;
    gap: 6px
}

.errorlist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px
}

.errorlist li {
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--text-danger)
}

.form-errors, .gate-error {
    background: var(--color-danger-bg);
    border: 1.5px solid var(--color-danger);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    color: var(--text-danger)
}

.gate-error {
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0
}

.decision-countdown {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 16px 0 0;
    font-size: var(--text-sm);
    color: var(--text-secondary)
}

.decision-countdown-pulse {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
    background: var(--color-pending)
}

.decision-countdown-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-pending);
    animation: decision-countdown-pulse 1.6s ease-out infinite
}

@keyframes decision-countdown-pulse {
    from {
        transform: scale(1);
        opacity: 0.6
    }
    to {
        transform: scale(2.8);
        opacity: 0
    }
}

@media (prefers-reduced-motion: reduce) {
    .decision-countdown-pulse::after {
        animation: none
    }
}