/* The booking flow.

   A frame on paper, no wider than 68rem: a narrow near-black rail on the
   left that says who the call is with, how far along the booking is and
   what has been chosen; a wide working area on the right that shows one
   step at a time and ends on Back and Continue. Sharp corners, hairlines
   used for structure only, and one blue for what is selected, what is
   done and what to press next. */

body.document {
    margin: 0;
    background: var(--paper);
    color: var(--fg);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

.sched {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: clamp(1rem, 3vh, 2.5rem) 24px;
    box-sizing: border-box;
}

.sched__frame {
    display: grid;
    grid-template-columns: 19rem minmax(0, 1fr);
    width: min(100%, 68rem);
    min-height: min(40rem, calc(100dvh - 5rem));
    background: var(--paper-pure);
    border: var(--hair) solid var(--rule-2);
}

.sched__frame--closed {
    grid-template-columns: minmax(0, 1fr);
    width: min(100%, 46rem);
    min-height: 0;
}

.sched__frame--closed .sched__rail {
    padding: 3rem 3rem 2.5rem;
}

.sched__frame--closed .sched__title {
    margin-bottom: 2rem;
    font-size: 1.875rem;
}

/* --- The rail ------------------------------------------------------------ */

.sched__rail {
    display: flex;
    flex-direction: column;
    padding: 2.5rem 2rem 2rem;
    background: var(--ink-050);
    color: var(--paper-pure);
}

.sched__firm {
    margin: 0 0 1.5rem;
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mist);
}

.sched__title {
    margin: 0 0 2.5rem;
    font-family: var(--font-display);
    font-size: 1.625rem;
    font-weight: var(--w-semibold, 600);
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--paper-pure);
}

/* Progress: three names, a mark before each; the current one in blue, the
   ones done filled, the ones ahead quiet. */

.sched__progress {
    margin: 0 0 2.5rem;
    padding: 0;
    list-style: none;
}

.sched__progress li {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.55rem 0;
    font-size: var(--t-small);
    color: var(--mist);
    transition: color var(--dur, 160ms) var(--ease, ease);
}

.sched__progress-mark {
    flex: none;
    width: 0.5rem;
    height: 0.5rem;
    border: var(--hair) solid var(--mist);
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease);
}

.sched__progress li.is-done {
    color: var(--haze);
}

.sched__progress li.is-done .sched__progress-mark {
    background: var(--haze);
    border-color: var(--haze);
}

.sched__progress li.is-current {
    color: var(--paper-pure);
    font-weight: var(--w-medium, 500);
}

.sched__progress li.is-current .sched__progress-mark {
    background: var(--signal);
    border-color: var(--signal);
}

/* The summary: what is chosen so far, kept in view through every step. */

.sched__summary {
    margin: auto 0 0;
    padding: 0;
    border-top: var(--hair) solid rgba(255, 255, 255, 0.16);
}

.sched__summary div {
    display: grid;
    grid-template-columns: 5.75rem minmax(0, 1fr);
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: var(--hair) solid rgba(255, 255, 255, 0.16);
}

.sched__summary dt {
    white-space: nowrap;
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mist);
    padding-top: 0.2rem;
}

.sched__summary dd {
    margin: 0;
    font-size: var(--t-small);
    line-height: 1.45;
    color: var(--haze);
}

.sched__summary dd.is-set {
    color: var(--paper-pure);
    font-weight: var(--w-medium, 500);
}

.sched__note {
    margin: auto 0 0;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--haze);
}

/* The confirmation: every fact on its own row with room to breathe, then
   what happens next in a section of its own, then the way back. */

.sched__summary--done {
    margin: 0;
}

.sched__summary--done div {
    grid-template-columns: 7.5rem minmax(0, 1fr);
    gap: 1rem;
    padding: 0.85rem 0;
}

.sched__summary--done dt {
    white-space: nowrap;
}

.sched__summary--done dd {
    color: var(--paper-pure);
    font-weight: var(--w-medium, 500);
    font-size: var(--t-body);
}

.sched__done {
    margin-top: 2.5rem;
}

.sched__done-lead {
    margin: 0 0 0.75rem;
    max-width: 34rem;
    font-size: var(--t-body);
    line-height: 1.6;
    color: var(--paper-pure);
}

.sched__join {
    color: var(--signal-lift);
    word-break: break-all;
}

.sched__done-note {
    margin: 0 0 2rem;
    font-size: var(--t-small);
    line-height: 1.6;
    color: var(--haze);
}

.sched__return {
    display: inline-block;
    padding: 0.85rem 1.5rem;
    border: var(--hair) solid var(--signal);
    background: var(--signal);
    color: var(--paper-pure);
    font-family: var(--font-display);
    font-size: var(--t-small);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.04em;
    text-decoration: none;
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease);
}

.sched__return:hover {
    background: var(--signal-deep);
    border-color: var(--signal-deep);
}

.sched__return:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.sched__address {
    margin: 2rem 0 0;
    font-size: var(--t-nano);
    line-height: 1.6;
    letter-spacing: 0.04em;
    color: var(--mist);
}

/* --- The flow ------------------------------------------------------------ */

.sched__flow {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 2.5rem 3rem 2rem;
}

.sched__error {
    margin: 0 0 1.5rem;
    padding: 0.8rem 1rem;
    border-left: 3px solid var(--error);
    background: var(--error-wash);
    color: var(--error);
    font-size: var(--t-small);
}

.sched__step {
    flex: 1 1 auto;
}

/* Without the script the steps stand one under another. */
.sched__flow:not(.is-flow) .sched__step + .sched__step {
    margin-top: 3rem;
}

.sched__kicker {
    margin: 0 0 0.75rem;
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--signal);
}

.sched__heading {
    margin: 0 0 0.5rem;
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 1.3rem + 1.2vw, 2.25rem);
    font-weight: var(--w-semibold, 600);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--fg);
}

.sched__lede {
    margin: 0 0 2rem;
    font-size: var(--t-small);
    line-height: 1.5;
    color: var(--fg-2);
}

/* Days: three columns of text, a hairline between rows, no boxes. The
   chosen one carries a blue rule on its left and turns blue. */

.sched__days {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--hair) solid var(--rule-2);
}

.sched__day {
    position: relative;
    display: grid;
    gap: 0.2rem;
    padding: 1.1rem 1rem 1.1rem 1.25rem;
    border-bottom: var(--hair) solid var(--rule-2);
    cursor: pointer;
    transition: background-color var(--dur, 160ms) var(--ease, ease);
}

.sched__day::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: -1px;
    left: 0;
    width: 3px;
    background: transparent;
    transition: background-color var(--dur, 160ms) var(--ease, ease);
}

.sched__day:hover {
    background: var(--paper);
}

.sched__day input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sched__day-week {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-3);
}

.sched__day-date {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--w-semibold, 600);
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--fg);
}

.sched__day-open {
    font-size: var(--t-micro);
    color: var(--fg-3);
}

.sched__day:has(input:checked) {
    background: var(--signal);
    border-bottom-color: var(--signal);
}

.sched__day:has(input:checked)::before {
    background: var(--signal-deep);
}

.sched__day:has(input:checked) .sched__day-date {
    color: var(--paper-pure);
}

.sched__day:has(input:checked) .sched__day-week,
.sched__day:has(input:checked) .sched__day-open {
    color: var(--signal-wash);
}

.sched__day:has(input:focus-visible) {
    outline: 2px solid var(--signal);
    outline-offset: -2px;
}

/* Times: morning and afternoon side by side, each a column of rows with a
   hairline between them. A row is plainly a control: bordered, with the
   length at its right, tinted on hover, filled blue when chosen. */

.sched__times {
    display: block;
}

.sched__times[hidden] {
    display: none;
}

.sched__part + .sched__part {
    margin-top: 1.75rem;
}

.sched__part-name {
    margin: 0 0 0.5rem;
    padding-bottom: 0.5rem;
    border-bottom: var(--hair) solid var(--fg);
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.sched__slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: 0.4rem;
}

.sched__slot {
    position: relative;
    display: block;
    cursor: pointer;
}

.sched__slot input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sched__slot span {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.55rem 0.8rem;
    border: var(--hair) solid var(--rule-2);
    background: var(--paper-pure);
    font-family: var(--font-display);
    font-size: 0.9375rem;
    font-weight: var(--w-medium, 500);
    font-variant-numeric: tabular-nums;
    color: var(--fg);
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease), color var(--dur, 160ms) var(--ease, ease);
}

.sched__slot span small {
    font-family: var(--font-sans);
    font-size: var(--t-nano);
    font-weight: var(--w-regular, 400);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-3);
    transition: color var(--dur, 160ms) var(--ease, ease);
}

.sched__slot:hover span {
    border-color: var(--fg);
    background: var(--paper);
}

.sched__slot input:checked + span {
    background: var(--signal);
    border-color: var(--signal);
    color: var(--paper-pure);
}

.sched__slot input:checked + span small {
    color: var(--signal-wash);
}

.sched__slot input:focus-visible + span {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

.sched__slot input:disabled + span {
    color: var(--fg-3);
    border-color: var(--rule);
    background: transparent;
    text-decoration: line-through;
    cursor: default;
}

/* Format: two controls side by side, the chosen one blue. */

.sched__format {
    margin: 0 0 2rem;
    padding: 0;
    border: 0;
    min-width: 0;
}

.sched__label {
    display: block;
    margin: 0 0 0.75rem;
    padding: 0;
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.sched__options {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
    max-width: 28rem;
}

.sched__option {
    position: relative;
    cursor: pointer;
}

.sched__option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.sched__option span {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: var(--hair) solid var(--rule-2);
    background: var(--paper-pure);
    font-size: var(--t-small);
    font-weight: var(--w-medium, 500);
    color: var(--fg);
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease), color var(--dur, 160ms) var(--ease, ease);
}

.sched__option span::before {
    content: "";
    width: 0.6rem;
    height: 0.6rem;
    border: var(--hair) solid var(--fg-3);
    flex: none;
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease);
}

.sched__option:hover span {
    border-color: var(--fg);
}

.sched__option input:checked + span {
    border-color: var(--signal);
    background: var(--signal);
    color: var(--paper-pure);
}

.sched__option input:checked + span::before {
    background: var(--paper-pure);
    border-color: var(--paper-pure);
}

.sched__option input:focus-visible + span {
    outline: 2px solid var(--signal);
    outline-offset: 2px;
}

/* Details: labels in small caps, a rule under each field, blue on focus. */

.sched__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.75rem 2.5rem;
}

.sched__field {
    display: grid;
    gap: 0.5rem;
}

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

.sched__field label {
    font-size: var(--t-nano);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fg-2);
}

.sched__field label span {
    margin-left: 0.5rem;
    font-weight: var(--w-regular, 400);
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--fg-3);
}

.sched__field input {
    width: 100%;
    min-height: 2.75rem;
    padding: 0.5rem 0.75rem;
    box-sizing: border-box;
    border: 0;
    border-bottom: 2px solid var(--rule-2);
    border-radius: 0;
    background: var(--paper);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--t-body);
    line-height: 1.4;
    transition: border-color var(--dur, 160ms) var(--ease, ease), background-color var(--dur, 160ms) var(--ease, ease);
}

.sched__field input:hover {
    border-bottom-color: var(--fg-2);
}

.sched__field input:focus {
    outline: none;
    border-bottom-color: var(--signal);
    background: var(--paper-pure);
}

.sched__field:focus-within label {
    color: var(--signal);
}

.sched__field[hidden] {
    display: none;
}

/* Back and Continue, in the same place on every step. */

.sched__actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.25rem;
    border-top: var(--hair) solid var(--rule-2);
}

.sched__back {
    padding: 0.7rem 0;
    border: 0;
    background: transparent;
    color: var(--fg-2);
    font-family: var(--font-sans);
    font-size: var(--t-small);
    font-weight: var(--w-medium, 500);
    cursor: pointer;
    transition: color var(--dur, 160ms) var(--ease, ease);
}

.sched__back::before {
    content: "\2190\00a0\00a0";
}

.sched__back:hover {
    color: var(--fg);
}

.sched__back:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.sched__back[hidden] {
    visibility: hidden;
    display: block;
}

.sched__continue {
    margin-left: auto;
    min-width: 11rem;
    padding: 0.9rem 1.75rem;
    border: var(--hair) solid var(--signal);
    background: var(--signal);
    color: var(--paper-pure);
    font-family: var(--font-display);
    font-size: var(--t-small);
    font-weight: var(--w-semibold, 600);
    letter-spacing: 0.04em;
    cursor: pointer;
    transition: background-color var(--dur, 160ms) var(--ease, ease), border-color var(--dur, 160ms) var(--ease, ease), color var(--dur, 160ms) var(--ease, ease);
}

.sched__continue:hover {
    background: var(--signal-deep);
    border-color: var(--signal-deep);
}

.sched__continue:focus-visible {
    outline: 2px solid var(--signal);
    outline-offset: 3px;
}

.sched__continue:disabled {
    background: transparent;
    border-color: var(--rule-2);
    color: var(--fg-3);
    cursor: default;
}

.sched__continue[hidden] {
    display: none;
}

/* --- Narrower ------------------------------------------------------------ */

@media (max-width: 900px) {
    .sched__frame {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }

    .sched__rail {
        padding: 2rem 1.5rem 1.5rem;
    }

    .sched__title {
        margin-bottom: 1.5rem;
    }

    .sched__progress {
        display: flex;
        gap: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .sched__summary {
        margin-top: 0;
    }

    .sched__address {
        display: none;
    }

    .sched__flow {
        padding: 2rem 1.5rem 1.5rem;
    }

    .sched__days {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .sched__frame--closed .sched__rail {
        padding: 2rem 1.5rem;
    }
}

@media (max-width: 560px) {
    .sched {
        padding: 12px;
    }

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

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

    .sched__summary div,
    .sched__summary--done div {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.2rem;
    }

    .sched__progress {
        gap: 1rem;
    }
}