/* ============================================================================
   SCOPE PILLS AND THE PERIOD STEPPER
   The pills a report page states its scope with (a domain, a period) and
   the month stepper, one segmented pill: an arrow, the period, an arrow.
   Markup in includes/period_stepper.html and includes/period_menu.html.
   Layout only; every color reads a token.
   ============================================================================ */

/* A pill. A period's dates hold together; the pill may break between
   them when the row is too narrow for both. */
.scope-pill {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.15rem 0.35rem;
    max-width: 100%;
    padding: 0.2rem 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--text-secondary);
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

/* A pill that opens a filter overlay or steps the period. As a <button>
   it takes the reset the pill's own border and background do not cover;
   as an <a> it keeps the pill's color. Both light on hover to say they
   are the control and not a label. */
button.scope-pill {
    appearance: none;
    text-align: left;
    cursor: pointer;
}

a.scope-pill {
    text-decoration: none;
}

button.scope-pill:hover,
a.scope-pill:hover,
button.scope-pill[aria-expanded="true"] {
    background: var(--surface-3);
    color: var(--text-primary);
}

.scope-pill__name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.scope-pill__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* An icon-only pill, a circle the pill's height: Clear filters. */
.scope-pill--icon {
    justify-content: center;
    width: calc(0.8125rem * 1.5 + 0.4rem + 2px);
    height: calc(0.8125rem * 1.5 + 0.4rem + 2px);
    padding: 0;
    font-size: 0.75rem;
}

/* The stepper: one pill-shaped control split into three segments, an
   arrow, the period, an arrow, with a hairline between them. It never
   breaks; the row wraps the whole control instead. Each segment lights
   on its own hover, and the ends keep the pill's curve so the hover fill
   follows the outline. */
.period-stepper {
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    font-size: 0.8125rem;
    line-height: 1.5;
    background: var(--surface-2);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
}

.period-stepper__arrow,
.period-stepper__period {
    appearance: none;
    display: inline-flex;
    align-items: center;
    min-width: 0;
    margin: 0;
    padding: 0.2rem 0.7rem;
    font: inherit;
    color: var(--text-secondary);
    text-decoration: none;
    background: transparent;
    border: 0;
    border-radius: 0;
    cursor: pointer;
    transition-property: background-color, color;
    transition-duration: 150ms;
    transition-timing-function: ease-out;
}

.period-stepper__period {
    gap: 0.35rem;
    border-inline: 1px solid var(--border-subtle);
}

/* An arrow: wide enough to hit without aiming, its chevron small and
   centered. */
.period-stepper__arrow {
    justify-content: center;
    width: 2.25rem;
    padding-inline: 0;
    font-size: 0.6875rem;
}

.period-stepper__arrow:first-child {
    border-radius: 999px 0 0 999px;
}

.period-stepper__arrow:last-child {
    border-radius: 0 999px 999px 0;
}

.period-stepper__arrow:hover:not(:disabled),
.period-stepper__period:hover,
.period-stepper__period[aria-expanded="true"] {
    color: var(--text-primary);
    text-decoration: none;
    background: var(--surface-3);
}

/* The chevron nudges the way it points while pressed. */
.period-stepper__arrow .fas {
    transition: transform 150ms ease-out;
}

.period-stepper__arrow:active:not(:disabled):first-child .fas {
    transform: translateX(-2px);
}

.period-stepper__arrow:active:not(:disabled):last-child .fas {
    transform: translateX(2px);
}

.period-stepper__arrow:disabled {
    color: var(--text-muted);
    opacity: 0.5;
    cursor: default;
}

/* Inset, so the ring stays inside the pill's outline and never bleeds
   over the hairline beside it. */
.period-stepper__arrow:focus-visible,
.period-stepper__period:focus-visible {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* The menu takes focus back to the period when it closes; while it is
   open, the lit segment already says which control owns it. */
.period-stepper__period[aria-expanded="true"] {
    outline: none;
}

.period-stepper__icon {
    color: var(--text-muted);
}

.period-stepper__date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.period-stepper__to {
    color: var(--text-muted);
}

/* The custom range under the month list: a caption, the two dates on one
   line, and Apply on its own line so the dates never squeeze. The track is
   `minmax(0, 1fr)`, not `auto`: a date input has a wide intrinsic size, and
   an auto track would grow to fit both and spill out of the box. */
.period-range {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem;
}

.period-range__label {
    color: var(--text-tertiary);
    font-size: 0.75rem;
    font-weight: var(--font-weight-strong);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.period-range__fields {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 0;
}

/* Each date takes half the line and shrinks below its intrinsic width;
   `width: 0` keeps the flex basis from reading the input's own size. */
.period-range__fields .form-control {
    flex: 1 1 0;
    width: 0;
    min-width: 0;
}

.period-range__apply {
    justify-self: end;
}