/* Scheduling page chrome added in the Scheduling redesign (PR2): the five-step
   New meeting wizard, its result panel, the header button that opens it, and
   the Meetings tab's list of links. Loaded from base/base.html because the
   wizard mounts as a drawer on the Scheduling page and the list renders on the
   Meetings tab — two templates, one stylesheet.

   Only tokens here. The drawer shell itself (scrim, panel, body padding) comes
   from the shared drawer component; everything below styles what sits inside. */

/* This button moved onto the tab strip in the redesign, where it sits a tab's
   width away from the Availability tab's own controls — and a Bootstrap `.btn`
   is 38px against their 36. Take the same token they take rather than the same
   number: on a coarse pointer every control on this strip grows to a 44px tap
   target (tokens.css), and this one has to grow with them. Padding-sized
   buttons need the flex centering to go with a fixed height. */
.scheduling-new-meeting-btn {
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    height: var(--control-h-base);
}

/* Step bar on top, the shown step in the middle, footer last — a column, so a
   short step still leaves the footer at the bottom of what's on screen. */
.scheduling-wizard {
    display: flex;
    flex-direction: column;
}

.scheduling-wizard-steps {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    list-style: none;
    margin: 0 0 var(--spacing-lg);
    padding: 0;
}

.scheduling-wizard-step {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex: 1 1 0;
    min-width: 0;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-wizard-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-card-bg);
    font-size: var(--font-size-2xs);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}

.scheduling-wizard-step__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scheduling-wizard-step.is-here {
    color: var(--color-text);
    font-weight: var(--font-weight-medium);
}

.scheduling-wizard-step.is-here .scheduling-wizard-step__num {
    border-color: var(--color-action);
    background: var(--color-action);
    color: var(--color-card-bg);
}

.scheduling-wizard-step.is-done .scheduling-wizard-step__num {
    border-color: var(--color-action);
    background: var(--color-action-tint-pressed);
    color: var(--color-action);
}

.scheduling-wizard-panel {
    min-height: 12rem;
}

.scheduling-wizard-hint {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.scheduling-wizard-field {
    margin-top: var(--spacing-lg);
}

.scheduling-wizard-people {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.scheduling-wizard-person {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

.scheduling-wizard-person:last-child {
    border-bottom: 0;
}

/* A teammate with no working hours can't be picked, so the row reads as
   inactive — the plain reason next to the name says why. */
.scheduling-wizard-person.is-off {
    background: var(--color-surface-subtle);
    color: var(--color-text-muted);
}

.scheduling-wizard-person__pick {
    flex-shrink: 0;
}

.scheduling-wizard-person__note {
    margin-left: auto;
    padding-left: var(--spacing-sm);
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    text-align: right;
}

.scheduling-wizard-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
}

.scheduling-wizard-chip {
    position: relative;
}

.scheduling-wizard-chip input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.scheduling-wizard-chip__label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 4.5rem;
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-card-bg);
    font-size: var(--font-size-sm);
    cursor: pointer;
}

.scheduling-wizard-chip input:checked + .scheduling-wizard-chip__label {
    border-color: var(--color-action);
    background: var(--color-action-tint-pressed);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

.scheduling-wizard-chip input:focus-visible + .scheduling-wizard-chip__label {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* A saved meeting is a button, not a radio — picking one fills two fields
   rather than holding a value of its own. Stripped back to nothing so the
   shared __label pill inside is what shows. */
.scheduling-wizard-chip--pick {
    padding: 0;
    border: 0;
    background: none;
}

.scheduling-wizard-chip--pick.is-picked .scheduling-wizard-chip__label {
    border-color: var(--color-action);
    background: var(--color-action-tint-pressed);
    color: var(--color-action);
    font-weight: var(--font-weight-medium);
}

.scheduling-wizard-chip--pick:focus-visible .scheduling-wizard-chip__label {
    outline: 2px solid var(--color-focus-ring);
    outline-offset: 2px;
}

/* Sits in the chip row, so it lines up with the chips rather than the text. */
.scheduling-wizard-chip-link {
    align-self: center;
    font-size: var(--font-size-sm);
    color: var(--color-action);
}

.scheduling-wizard-picks {
    display: grid;
    gap: var(--spacing-sm);
}

.scheduling-wizard-pick {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    cursor: pointer;
}

.scheduling-wizard-pick:has(input:checked) {
    border-color: var(--color-action);
    background: var(--color-action-tint-pressed);
}

.scheduling-wizard-pick__body {
    min-width: 0;
}

.scheduling-wizard-pick__title {
    display: block;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-medium);
    color: var(--color-text);
}

.scheduling-wizard-pick__note {
    display: block;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-wizard-saved {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.scheduling-wizard-saved__pick {
    padding: var(--spacing-xs) var(--spacing-sm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-card-bg);
    font-size: var(--font-size-2xs);
    cursor: pointer;
}

.scheduling-wizard-when__title {
    margin: 0 0 var(--spacing-xs);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

.scheduling-wizard-when__error {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-error);
}

/* The preview inside is the shared availability picker markup — it brings its
   own rules; this wrapper only gives it room and a boundary. */
.scheduling-wizard-when__preview {
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--color-border);
}

.scheduling-wizard-review {
    padding: var(--spacing-md);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-card);
    background: var(--color-surface-subtle);
}

.scheduling-wizard-review__row {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
    border-bottom: 1px solid var(--color-border);
}

.scheduling-wizard-review__row:last-child {
    border-bottom: 0;
}

.scheduling-wizard-review__label {
    flex: 0 0 6rem;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
}

.scheduling-wizard-review__value {
    min-width: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.scheduling-wizard-review__people {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
}

/* Sticky inside .global-drawer-body (the scroll container) so Back/Next stay in reach
   on a long step. Negative side/bottom margins cancel the body's 1.25rem
   padding so the bar spans edge to edge — same recipe as .ml-drawer-footer. */
.scheduling-wizard-footer {
    position: sticky;
    bottom: -1.25rem;
    margin: var(--spacing-lg) -1.25rem -1.25rem;
    padding: var(--spacing-smd) var(--spacing-mdlg);
    background: var(--bs-body-bg);
    border-top: 1px solid var(--color-grey-200);
}

.scheduling-wizard-footer__row {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
}

/* Back is the quiet way out, so it sits apart from the primary button. */
.scheduling-wizard-back {
    margin-right: auto;
}

.scheduling-wizard-footer__note {
    margin: var(--spacing-xs) 0 0;
    font-size: var(--font-size-2xs);
    color: var(--color-text-muted);
    text-align: right;
}

.scheduling-wizard-done {
    padding: var(--spacing-lg) 0;
    text-align: center;
}

.scheduling-wizard-done__mark {
    font-size: var(--font-size-xl);
    color: var(--color-success);
}

.scheduling-wizard-done__title {
    margin: var(--spacing-sm) 0 var(--spacing-md);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-heading);
    color: var(--color-text);
}

.scheduling-wizard-done__url {
    text-align: center;
}

.scheduling-wizard-done__actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

/* The account rows sit in .scheduling-wizard-people, the wizard's own boxed
   list, so a worker reads two pickers with one shape. Only the row and its
   label are ours — and there is no is-off state, because an account that cannot
   host is never listed rather than listed and greyed. */
.scheduling-my-link-hosts__row {
    border-bottom: 1px solid var(--color-border);
}

.scheduling-my-link-hosts__row:last-child {
    border-bottom: 0;
}

/* The label is the row: a worker aiming at a 13px address should not have to
   find the circle beside it. */
.scheduling-my-link-hosts__pick {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
}

/* An address has no spaces to wrap at, so a long one would push the card
   sideways on a phone. */
.scheduling-my-link-hosts__email {
    font-size: var(--font-size-sm);
    color: var(--color-text);
    word-break: break-all;
}

/* An empty state is prose plus one door. The paragraph gives back its own bottom
   room so the button sits with the sentence that explains it. */
.scheduling-my-link__note {
    padding-bottom: var(--spacing-sm);
}

.scheduling-my-link__actions {
    display: flex;
    justify-content: center;
    padding-bottom: var(--spacing-md);
}

.scheduling-my-link-form {
    padding-top: var(--spacing-sm);
}

/* Sits where the wizard puts its people picker, saying there is nobody to pick. */
.scheduling-my-link-form__solo {
    margin-bottom: var(--spacing-sm);
}

.scheduling-my-link-form__actions {
    display: flex;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

@media (max-width: 575px) {
    /* On a phone the step labels don't fit next to five numbers, so the bar
       keeps the numbers and drops the words. */
    .scheduling-wizard-step__label {
        display: none;
    }

    .scheduling-wizard-step {
        flex: 0 0 auto;
    }

    .scheduling-wizard-steps {
        justify-content: space-between;
    }
}