.ahr-appointments-page {
    min-width: 0;
}

/* 🔻 CORRECTED 2026-08-23 AFTER MEASURING THE DEPLOYED FIX AND FINDING IT DID NOT WORK.
   The first fix shipped, reached the mount, and the overlap was still exactly 15px — so the CAUSE
   recorded on the card was wrong, not the implementation.

   📏 What the boxes actually said at 1440, with the first fix live:
       row     326 -> 1374
       fields  326 ->  891     <- ends here
       actions 907 -> 1374     <- starts here, 16px clear. The row does NOT overflow.
       search  622 ->  922     <- overflows its OWN parent by 31px, into the actions block

   ⛔ SO IT WAS NEVER "a flex-end container growing leftwards". The fields and actions blocks never
   touched. The fields block was SHRUNK to 565 by flex, its 300px search input could not shrink with
   it, and overflow:visible let the input paint 31px outside its own parent and onto the sentence.

   ⭐ flex-wrap here is the half that DEGRADES: when the two blocks genuinely cannot share a line the
   actions column drops to its own row instead of colliding. Proven with a control at two widths —
   1440 overlapped by 15px and 1024 by 100px without these two declarations, and by 0 with them. */
.ahr-appointments-filter-row {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.ahr-appointments-filter-fields {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    min-width: 0;
    /* 🚨 THIS IS THE ONE THAT ACTUALLY FIXES IT, and it is on the container the first fix did not
       touch. Flex shrank this block to 565px while its own content needed 596, and the practitioner
       search inside it is a fixed 300px that cannot give any of it back — so the input rendered past
       its parent edge and over the sentence beside it.
       ⛔ Do not replace this with overflow:hidden: that hides the defect by clipping the search box
       rather than giving it the width it needs. */
    flex-shrink: 0;
}

.ahr-appointments-practitioner-filter {
    min-width: 280px;
}

.ahr-appointments-practitioner-filter .components-custom-select-control,
.ahr-appointments-practitioner-filter .components-custom-select-control__button {
    width: 100%;
    max-width: none;
}

.ahr-appointments-location-filter {
    min-width: 220px;
}

/* The practitioner filter is one type-ahead field, drawn as the deck's combo. */
.ahr-practitioner-combo {
    position: relative;
    width: 100%;
    max-width: 430px;
}

.ahr-practitioner-combo__label {
    display: block;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 500;
}

.ahr-practitioner-combo__box {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    cursor: text;
}

.ahr-practitioner-combo__box.is-open {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--blue-soft);
}

#akashic-health-records-patient-portal-root .ahr-practitioner-combo__input {
    flex: 0 1 auto;
    width: auto;
    field-sizing: content;
    min-width: 4ch;
    max-width: 100%;
    padding: 8px 0;
    font-size: 13.5px;
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-practitioner-combo__input.is-typing {
    flex: 1 1 auto;
}

.ahr-practitioner-combo__you {
    display: inline-block;
    flex: none;
    padding: 1px 8px;
    border: 1px solid var(--green-line, var(--line));
    border-radius: 999px;
    background: var(--green-soft);
    color: var(--ink-strong);
    font-size: 10.5px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ahr-practitioner-combo__name .ahr-practitioner-combo__you {
    margin-left: 7px;
}

.ahr-practitioner-combo__chevron {
    flex: none;
    width: 16px;
    height: 16px;
    margin-left: auto;
    color: var(--faint);
    transition: transform 0.15s ease;
}

.ahr-practitioner-combo__box.is-open .ahr-practitioner-combo__chevron {
    transform: rotate(180deg);
}

.ahr-practitioner-combo__menu {
    position: absolute;
    top: calc(100% + 5px);
    left: 0;
    right: 0;
    z-index: 20;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.12);
}

#akashic-health-records-patient-portal-root .ahr-practitioner-combo__list {
    max-height: 280px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.ahr-practitioner-combo__option {
    display: block;
    padding: 9px 12px;
    font-size: 13.5px;
    color: var(--ink-strong);
    cursor: pointer;
}

.ahr-practitioner-combo__option + .ahr-practitioner-combo__option {
    border-top: 1px solid var(--line);
}

.ahr-practitioner-combo__option.is-active,
.ahr-practitioner-combo__option[aria-selected='true'] {
    background: var(--sunken);
}

.ahr-practitioner-combo__detail {
    display: block;
    margin-top: 1px;
    font-size: 11.5px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-practitioner-combo__count {
    margin: 0;
    padding: 9px 12px;
    border-top: 1px solid var(--line);
    background: var(--sunken);
    font-size: 11.5px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-practitioner-combo__zero {
    margin: 0;
    padding: 9px 12px;
    font-size: 13px;
    color: var(--ink-strong);
}

.ahr-practitioner-combo__zero-hint {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: var(--ink-muted);
}

/* 🔴 THIS ROW PAINTED ITS HELPER TEXT UNDERNEATH THE SEARCH BOX, and the mechanism is worth stating
   because the fix looks like a style tweak and is not.

   📏 Measured in the DOM at 1440×900: helper text x=907 w=467 (right 1374); search input x=622 w=300
   (right 922). ⇒ A 15px overlap, with the sentence STARTING inside the input — so its first characters
   were unreadable, and the parent's `overflow: visible` meant nothing clipped it, it was painted over.

   🔑 THE CAUSE IS `justify-content: flex-end` ON A CONTAINER TOO NARROW FOR ITS CONTENT. When a flex
   container overflows, `flex-end` pushes the excess past its START edge — leftwards in LTR — so this
   block grew backwards across the field beside it instead of forwards into empty space. ⛔ Nothing
   about the sentence being long is the bug; a shorter one would have hidden it, not fixed it.

   ⭐ TWO CHANGES, AND EACH ONE ALONE IS INSUFFICIENT:
   · `min-width: 0` lets this item shrink at all — a flex item defaults to `min-width: auto`, which is
     its content's minimum, and that is what made overflow inevitable rather than merely possible;
   · the note takes a full-width basis below, so it never competes for the row in the first place.

   🔬 The same two-control row renders correctly on `/dashboard/schedules`, which is why the fix is
   local to this file rather than in a shared component — and that page is the regression check. */
.ahr-appointments-filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    flex-wrap: wrap;
    min-width: 0;
    margin-bottom: 1px;
}

.ahr-appointments-filter-actions .components-toggle-control {
    margin-bottom: 0;
}

/* Card 532 — replaces the Edit Availability button, which no caller of this page could ever use.
   Quiet by design: it is an explanation, not an action. */
.ahr-appointments-availability-note {
    margin: 0;
    font-size: 12px;
    color: var(--ak-text-muted, var(--ink-muted));
    /* 🚨 A FULL-WIDTH BASIS, SO THE SENTENCE NEVER SHARES A LINE WITH THE CONTROLS. With `flex-wrap`
       already on the parent this drops it onto its own row inside the actions column, which is what
       removes the horizontal competition with the practitioner search entirely rather than making it
       narrower and hoping.
       ⛔ Do NOT "tidy" this away as redundant once the overlap stops reproducing — it is the reason it
       stops. See the note on `.ahr-appointments-filter-actions` above for the leftwards-overflow
       mechanism it defeats. */
    flex-basis: 100%;
    text-align: left;
}

.ahr-appointments-toolbar {
    display: grid;
    grid-template-columns: minmax(190px, auto) minmax(240px, 1fr) minmax(360px, auto);
    align-items: center;
    gap: 18px;
    margin-bottom: 14px;
}

.ahr-appointments-toolbar__navigation,
.ahr-appointments-toolbar__selectors {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ahr-appointments-toolbar__selectors {
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* THE TOOLBAR'S RULES CARRY THE MOUNT ID, AND THAT IS LOAD-BEARING RATHER THAN TIDINESS.
   These buttons now carry `btn`, because the house rule for a pressed control keys on
   `.btn[aria-pressed="true"]` and could not reach them while they said pressed with a tint of their
   own - two answers to one question in one product.
   But `#...root .btn` is (1,1,0) and these rules were (0,1,1), so the class would have taken the
   toolbar's geometry with it: the height, the padding and the joined edges are this control's, not
   the generic button's. Raised to (1,1,1) they keep every measurement, while the pressed rule at
   (1,2,0) still outranks them and paints the selected segment.
   Lower any of these back to a bare class and the control silently becomes a row of loose buttons. */
#akashic-health-records-patient-portal-root .ahr-appointments-toolbar__button,
#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 34px;
    padding: 6px 12px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--surface);
    color: var(--ink);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease,
        color 0.15s ease;
}

#akashic-health-records-patient-portal-root .ahr-appointments-toolbar__button:hover,
#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button:hover:not(:disabled) {
    background: var(--paper);
    border-color: var(--line);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-toolbar__button:focus-visible,
#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button:focus-visible {
    outline: 2px solid var(--wp-admin-theme-color, var(--primary));
    outline-offset: 2px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-toolbar__button--icon {
    width: 34px;
    padding-inline: 0;
}

.ahr-appointments-toolbar__title {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
    text-align: center;
}

.ahr-appointments-toolbar__title strong {
    color: var(--ink-strong);
    font-size: 16px;
    line-height: 1.3;
}

.ahr-appointments-toolbar__title span {
    margin-top: 2px;
    color: var(--ink-muted);
    font-size: 12px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--surface);
    overflow: hidden;
}

#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button {
    min-height: 34px;
    border: 0;
    border-right: 1px solid var(--line);
    border-radius: 0;
    background: transparent;
}

#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button:last-child {
    border-right: 0;
}


#akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button:disabled {
    color: var(--faint);
    background: var(--paper);
    cursor: not-allowed;
}

.ahr-appointments-calendar-shell {
    position: relative;
    min-width: 0;
    min-height: 132px;
    overflow: hidden;
    border: 1px solid var(--line);
    border-radius: var(--ak-card-radius);
    background: var(--surface);
}

.ahr-appointments-calendar-loading {
    position: absolute;
    inset: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 132px;
    background: rgba(255, 255, 255, 0.82);
    cursor: wait;
}

.ahr-appointments-calendar-loading .components-spinner {
    margin: 0;
}

.ahr-appointments-calendar-shell .fc {
    color: var(--ink-strong);
    font-size: 13px;
}

.ahr-appointments-calendar-shell .fc-theme-standard td,
.ahr-appointments-calendar-shell .fc-theme-standard th,
.ahr-appointments-calendar-shell .fc-theme-standard .fc-scrollgrid {
    border-color: var(--line);
}

.ahr-appointments-calendar-shell .fc .fc-col-header-cell-cushion,
.ahr-appointments-calendar-shell .fc .fc-daygrid-day-number {
    color: var(--ink);
    text-decoration: none;
}

.ahr-appointments-calendar-shell .fc .fc-col-header-cell-cushion {
    padding: 8px 6px;
    font-weight: 600;
}

.ahr-appointments-calendar-shell .fc .fc-list {
    border: 0;
}

.ahr-appointments-calendar-shell .fc .fc-list-day-cushion {
    padding: 10px 12px;
    background: var(--paper);
    color: var(--ink-strong);
}

.ahr-appointments-calendar-shell .fc .fc-list-day-text,
.ahr-appointments-calendar-shell .fc .fc-list-day-side-text {
    color: var(--ink-strong);
    text-decoration: none;
}

.ahr-appointments-calendar-shell .fc .fc-list-event-time {
    width: 135px;
    padding: 12px 10px 12px 14px;
    color: var(--ink);
    white-space: nowrap;
}

.ahr-appointments-calendar-shell .fc .fc-list-event-graphic {
    padding-block: 14px;
}

.ahr-appointments-calendar-shell .fc .fc-list-event-title {
    padding: 10px 14px 10px 8px;
}

.ahr-appointments-calendar-shell .fc .fc-list-event-title a {
    color: inherit;
    text-decoration: none;
}

.ahr-appointments-calendar-shell .fc .fc-list-event:hover td {
    background: var(--paper);
}

.ahr-appointments-calendar-shell .fc .fc-list-empty {
    background: var(--surface);
    color: var(--ink-muted);
}

.ahr-appointments-event {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 2px;
}

.ahr-appointments-event--list {
    width: 100%;
}

.ahr-appointments-event__content {
    min-width: 0;
}

.ahr-appointments-event__primary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    min-width: 0;
}

.ahr-appointments-event__patient {
    min-width: 0;
    overflow: hidden;
    color: var(--ink-strong);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ahr-appointments-event__time {
    display: block;
    margin-bottom: 2px;
    font-size: 11px;
    font-weight: 600;
}

.ahr-appointments-event__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
    margin-top: 3px;
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.35;
}

.ahr-appointments-event__meta span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ahr-appointments-status {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    min-height: 22px;
    padding: 2px 8px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: var(--paper);
    color: var(--ink);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.ahr-appointments-status--booked,
.ahr-appointments-status--pending,
.ahr-appointments-status--proposed,
.ahr-appointments-status--waitlisted {
    border-color: var(--primary);
    background: var(--blue-soft);
    color: var(--primary);
}

.ahr-appointments-status--arrived-on-time,
.ahr-appointments-status--fulfilled,
.ahr-appointments-status--checked-in {
    border-color: var(--success);
    background: var(--green-soft);
    color: var(--success);
}

.ahr-appointments-status--arrived-late {
    border-color: var(--amber-line);
    background: var(--amber-soft);
    color: var(--warning);
}

.ahr-appointments-status--cancelled,
.ahr-appointments-status--no-show,
.ahr-appointments-status--entered-in-error {
    border-color: var(--danger);
    background: var(--red-soft);
    color: var(--danger);
}

.ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-status,
.ahr-appointments-calendar-shell .fc-daygrid-event .ahr-appointments-status {
    padding: 1px 5px;
    border-color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.9);
    color: var(--ink);
    font-size: 9px;
}

.ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__meta,
.ahr-appointments-calendar-shell .fc-daygrid-event .ahr-appointments-event__meta {
    color: inherit;
    font-size: 10px;
}

.ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__patient,
.ahr-appointments-calendar-shell .fc-daygrid-event .ahr-appointments-event__patient {
    color: inherit;
    font-size: 11px;
}

/* Tablet and narrower: a week column holds about one name, so a visit reads name, status, time, each on
   one line and clipped to its own box, instead of a wrapped time with the rest spilling into the next hour. */
@media (max-width: 1180px) {
    .ahr-appointments-calendar-shell .fc-timegrid-event .fc-event-main {
        overflow: hidden;
    }

    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event {
        gap: 0;
    }

    /* Two lines fit an hour-tall box; the grid row already says when. */
    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__time {
        display: none;
    }

    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__primary-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
    }

    /* A tablet column holds one visit at a time, so its name may take two lines rather than be cut. */
    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__patient {
        display: -webkit-box;
        max-width: 100%;
        line-height: 1.2;
        white-space: normal;
        overflow-wrap: anywhere;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
    }

    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-status {
        max-width: 100%;
        white-space: nowrap;
    }

    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-status {
        min-height: 0;
        padding: 0;
        border: 0;
        background: none;
        font-size: 10px;
    }

    .ahr-appointments-calendar-shell .fc-timegrid-event .ahr-appointments-event__meta {
        display: none;
    }
}


@media (max-width: 1180px) {
    .ahr-appointments-toolbar {
        grid-template-columns: 1fr auto;
    }

    .ahr-appointments-toolbar__title {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .ahr-appointments-toolbar__navigation {
        grid-column: 1;
        grid-row: 2;
    }

    .ahr-appointments-toolbar__selectors {
        grid-column: 2;
        grid-row: 2;
    }
}

@media (max-width: 900px) {
    .ahr-appointments-filter-row {
        align-items: stretch;
        flex-direction: column;
    }

    .ahr-appointments-filter-fields {
        flex-wrap: wrap;
    }

    /* A phone stacks the two filters full width, as the deck's phone frame does. */
    .ahr-appointments-practitioner-filter,
    .ahr-appointments-location-filter {
        flex: 1 1 100%;
        min-width: 0;
    }

    .ahr-practitioner-combo {
        max-width: none;
    }

    .ahr-appointments-filter-actions {
        justify-content: flex-start;
    }

    .ahr-appointments-toolbar {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .ahr-appointments-toolbar__title {
        order: -1;
    }

    .ahr-appointments-toolbar__navigation,
    .ahr-appointments-toolbar__selectors {
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .ahr-appointments-filter-fields {
        align-items: stretch;
        flex-direction: column;
        width: 100%;
    }

    .ahr-appointments-practitioner-filter,
    .ahr-appointments-practitioner-search {
        min-width: 0;
        width: 100%;
    }

    .ahr-appointments-toolbar__selectors {
        flex-direction: column;
        align-items: stretch;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-segmented-control {
        width: 100%;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-segmented-control button {
        flex: 1 1 auto;
    }

    .ahr-appointments-calendar-shell .fc .fc-list-event-time {
        width: auto;
        padding-left: 8px;
    }

    .ahr-appointments-event__primary-row {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }
}


/* 🎨 A CANCELLED APPOINTMENT RECEDES — Spencer, 2026-08-23.
   The recessive palette is set on the event itself in AppointmentService's
   transformAppointmentToFullCalendarEvent; the strike-through lives here because it is presentation.

   🔑 These selectors target OUR OWN classes, not FullCalendar's. This calendar renders a custom
   eventContent (renderEventContent in AppointmentsPage.tsx), so .fc-event-title is never emitted for an
   appointment and a rule written against it would be silently dead.

   🚨 The appointment is still DRAWN, always. appointmentRangeSource.test.tsx states it as a ruling:
   the calendar keeps the cancelled ones. Receding is the only move available; hiding is not. */
.ahr-appointment--cancelled .ahr-appointments-event__patient,
.ahr-appointment--cancelled .ahr-appointments-event__time {
    text-decoration: line-through;
}

/* The custom content sets its own colours, so the event-level textColor cannot reach it on its own. */
.ahr-appointment--cancelled .ahr-appointments-event__content,
.ahr-appointment--cancelled .ahr-appointments-event__patient,
.ahr-appointment--cancelled .ahr-appointments-event__meta,
.ahr-appointment--cancelled .ahr-appointments-event__time {
    color: var(--ink-muted);
}


/* The title row and the gaps the removed spacers used to hold. */
#akashic-health-records-patient-portal-root .ahr-appointments-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-head h1.ahr-view-title {
    margin: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page > .ahr-appointments-filter-row,
#akashic-health-records-patient-portal-root .ahr-appointments-page > .ahr-appointments-alert {
    margin-bottom: 24px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-error-text {
    white-space: pre-line;
}

/* THE FRONT DESK'S PAGE, from the receptionist deck's .ctitle / .frow / .datebar / .fclist. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-head {
    margin-bottom: 8px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk > .ahr-appointments-filter-row {
    margin-bottom: 10px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk > .ahr-appointments-alert {
    margin-bottom: 10px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-filter-fields {
    flex: 1 1 100%;
    gap: 10px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-practitioner-filter {
    flex: 0 0 280px;
}

/* The deck's pair sits on one line: the select at its width, the name search taking the rest. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-filter-fields {
    align-items: flex-end;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-practitioner-search {
    flex: 1 1 auto;
    min-width: 0;
}

/* The deck's filter label (p.flabel) is the small muted line over the field, not the form label. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk [data-slot="custom-select-control-label"] {
    margin: 8px 0 5px;
    font-size: 12.5px;
    font-weight: var(--ak-label-weight);
    letter-spacing: 0;
    text-transform: none;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-toolbar {
    gap: 8px;
    margin: 10px 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-toolbar__title strong {
    font-size: 17px;
    font-weight: var(--ak-heading-weight);
    line-height: 1.55;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-toolbar__title span {
    margin-top: 0;
    font-size: 12.5px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-day-cushion {
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
    font-size: 13.5px;
    font-weight: var(--ak-heading-weight);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-day-side-text {
    display: none;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event td {
    border-top: 1px solid var(--line-soft);
    border-bottom: 0;
    vertical-align: top;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-time {
    width: 130px;
    padding: 12px 0 11px 16px;
    font-size: 13px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-graphic {
    padding: 17px 0 11px 14px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-dot {
    border-width: 4.5px;
    border-radius: 50%;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-title {
    padding: 11px 16px 11px 14px;
}

/* Name over service, and the status as coloured words at the right, as the desk deck draws them. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 14px;
    row-gap: 2px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-event__content,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-event__primary-row {
    display: contents;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-event__patient {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
    font-weight: var(--ak-heading-weight);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-event__meta {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    font-size: 13px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-status {
    grid-column: 2;
    grid-row: 1;
    justify-self: end;
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
    font-size: 11px;
    font-weight: var(--ak-heading-weight);
    color: var(--sage-deep);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-status--arrived-late,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-status--no-show {
    color: var(--danger);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-status--fulfilled {
    color: var(--primary);
}

/* The deck's faint is for large text; at 11px the words keep the muted ink. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-status--cancelled,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-status--entered-in-error {
    color: var(--ink-muted);
}

@media (max-width: 640px) {
    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-practitioner-filter,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-practitioner-search {
        flex: 1 1 100%;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-toolbar__button,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-segmented-control button {
        min-height: 44px;
    }

    /* A phone reads a row top to bottom: the time and its mark, then the name, the service and the status. */
    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr);
        border-top: 1px solid var(--line-soft);
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event td {
        display: block;
        border-top: 0;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-time {
        width: auto;
        padding: 12px 0 0 16px;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-graphic {
        padding: 17px 0 0 14px;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-list-event-title {
        grid-column: 1 / -1;
        padding: 6px 16px 11px 42px;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list {
        grid-template-columns: minmax(0, 1fr);
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .ahr-appointments-event--list .ahr-appointments-status {
        grid-column: 1;
        grid-row: 3;
        justify-self: start;
        margin-top: 2px;
    }
}


/* The desk's calendar, from the receptionist deck's .calhead / .calh / .calev / .mcell / .mchip. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-col-header-cell {
    background: var(--sunken);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-col-header-cell-cushion {
    padding: 7px 8px;
    font-size: 12px;
    font-weight: var(--ak-label-weight);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-day-today {
    background: var(--amber-soft);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-slot {
    height: 13px;
}

/* At tablet width an hour is tall enough for a two-line name over its status. */
@media (max-width: 1180px) {
    #akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-slot {
        height: 28px;
    }
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-slot-minor {
    border-top-style: none;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-slot-label-cushion,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-axis-cushion {
    padding-right: 8px;
    padding-block: 0;
    line-height: 13px;
    font-size: 11px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-event,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-daygrid-event {
    border-radius: 4px;
    box-shadow: none;
}

/* A visit stays inside its own time box; what does not fit opens with the visit. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-timegrid-event {
    overflow: hidden;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-timegrid-event .ahr-appointments-event {
    padding: 2px 5px;
    gap: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-timegrid-event .ahr-appointments-event__time {
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 10.5px;
    font-weight: var(--ak-body-weight);
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-timegrid-event .ahr-appointments-event__patient {
    font-size: 11.5px;
    font-weight: var(--ak-label-weight);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-timegrid-event .ahr-appointments-event__meta {
    margin-top: 0;
    font-size: 10.5px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-timegrid-event .ahr-appointments-status {
    padding: 0;
    border: 0;
    background: none;
    font-size: 10px;
    color: var(--ink-muted);
}

/* A month day is a stack of one-line chips: the time and the patient. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-dayGridMonth-view .fc-daygrid-day-frame {
    min-height: 88px;
    padding: 4px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-daygrid-day-number {
    padding: 0;
    font-size: 11px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event {
    margin-top: 2px;
    border-radius: 3px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event__content,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event__primary-row {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event {
    padding: 2px 5px;
    overflow: hidden;
    white-space: nowrap;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event__time,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event__patient {
    margin: 0;
    font-size: 10px;
    font-weight: var(--ak-body-weight);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-event__meta,
#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc-daygrid-event .ahr-appointments-status {
    display: none;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--desk .fc .fc-daygrid-more-link {
    font-size: 10px;
    color: var(--primary);
}

/* The clinician's page, from the practitioner deck's .filters / .datebar / .daycard / .arow. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-head {
    margin-bottom: 4px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic > .ahr-appointments-filter-row {
    row-gap: 0;
    margin-bottom: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-filter-fields {
    flex: 1 1 100%;
    gap: 14px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-practitioner-filter,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-location-filter {
    flex: 1 1 300px;
    min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-practitioner-combo__label,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic [data-slot="custom-select-control-label"] {
    display: block;
    margin: 11.5px 0 7px;
    font-size: 11.5px;
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-location-filter [data-slot="select-trigger"],
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-practitioner-combo__box {
    box-sizing: border-box;
    width: 100%;
    max-width: 430px;
    height: 43px;
    min-height: 43px;
    padding: 0 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
    font-size: 13.5px;
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-availability-note {
    margin: 9px 0 8px;
    font-size: 13.5px;
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-filter-row > .btn {
    margin-bottom: 6px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar {
    gap: 9px;
    margin: 6px 0 12px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__button {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 400;
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__button--icon {
    width: 34px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-segmented-control {
    border-radius: 8px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-segmented-control button {
    min-height: 35px;
    padding: 8px 12px;
    border-right: 0;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ink-strong);
}

/* Pressed segments keep the house rule: primary fill, white label. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-segmented-control button[aria-pressed="true"] {
    color: var(--primary-foreground);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__title strong {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.55;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__title span {
    margin-top: 0;
    font-size: 11.5px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-calendar-shell {
    border-radius: var(--ak-card-radius);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-day-cushion {
    padding: 11px 15px;
    background: var(--sunken);
    font-size: 13.5px;
    font-weight: 500;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-day-side-text {
    display: none;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event td {
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event-time {
    width: 132px;
    padding: 13px 0 13px 15px;
    font-size: 13px;
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event-graphic {
    padding: 13px 0 13px 14px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event-dot {
    border-width: 4px;
    border-radius: 50%;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event-title {
    padding: 13px 15px 13px 14px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event:hover td {
    background: var(--surface);
}

/* Name over service, then where it happens and its status, as the clinician deck's row draws them. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    column-gap: 14px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__content,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__primary-row {
    display: contents;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__patient {
    grid-column: 1;
    grid-row: 1;
    font-size: 13.5px;
    font-weight: 500;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__meta {
    grid-column: 1;
    grid-row: 2;
    margin-top: 0;
    font-size: 12px;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-where {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding: 3px 9px;
    border: 1px solid var(--line);
    border-radius: 6px;
    background: var(--sunken);
    color: var(--ink-muted);
    font-size: 12px;
    line-height: 1.55;
    white-space: nowrap;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-where--virtual {
    border-color: var(--blue-line);
    background: var(--blue-soft);
    color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-status {
    grid-column: 3;
    grid-row: 1 / span 2;
    min-height: 0;
    padding: 3px 11px;
    font-size: 11.5px;
    font-weight: 500;
    line-height: 1.2;
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--no-show {
    border-color: var(--red-line);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--arrived-on-time,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--checked-in {
    border-color: var(--green-line);
}

/* A visit that is over is the deck's quiet pill (.pill.cx, .pill.dn), not an alarm or a success. */
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--cancelled,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--entered-in-error,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--fulfilled {
    border-color: var(--line);
    background: var(--sunken);
    color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--booked,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--pending,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--proposed,
#akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-status--waitlisted {
    border-color: var(--blue-line);
}

@media (max-width: 640px) {
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-filter-fields {
        gap: 0;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-practitioner-filter,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-location-filter {
        flex: 1 1 100%;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-location-filter [data-slot="select-trigger"],
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-practitioner-combo__box {
        max-width: none;
        height: 44px;
        min-height: 44px;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__button,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-segmented-control button {
        min-height: 44px;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-toolbar__title strong {
        font-size: 17px;
    }

    /* A phone reads who first, with the status beside it, then when and where underneath. */
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event {
        display: grid;
        grid-template-columns: 8px minmax(0, 1fr) auto;
        column-gap: 9px;
        row-gap: 2px;
        padding: 12px 14px;
        border-top: 1px solid var(--line);
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event td,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event-title > a,
    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list {
        display: contents;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event td.fc-list-event-graphic {
        display: block;
        grid-column: 1;
        grid-row: 1;
        padding: 6px 0 0;
        border: 0;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__patient {
        grid-column: 2;
        white-space: normal;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-event__meta {
        grid-column: 2 / -1;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-event--list .ahr-appointments-status {
        grid-column: 3;
        grid-row: 1;
        align-self: start;
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .fc .fc-list-event td.fc-list-event-time {
        display: block;
        grid-column: 2 / -1;
        grid-row: 3;
        width: auto;
        padding: 3px 0 0;
        border: 0;
        font-size: 12px;
        color: var(--ink-muted);
    }

    #akashic-health-records-patient-portal-root .ahr-appointments-page--clinic .ahr-appointments-where {
        grid-column: 1 / -1;
        grid-row: 4;
        justify-self: start;
        margin-top: 4px;
    }
}