/* =========================================================================
   The period picker — a row of buttons for quarters, with the months under
   the label and the deadline on the hover.

   Shared by the Sales Tax page (filing periods) and the TIS page's Tax
   Estimate tab (estimated tax installments). One definition rather than
   two, because the two are meant to behave identically: a quarter button
   should look and feel the same wherever a quarter is being picked, and a
   copy in each stylesheet is a copy that drifts.

   Page-specific behaviour — what a selected quarter reveals, how an
   overdue one is marked — stays in that page's own stylesheet.
   ========================================================================= */

.period-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1;
}

.period-btn {
    padding: 0.4rem 0.7rem;
    background: rgba(13, 40, 73, 0.4);
    border: 1px solid rgba(206, 186, 76, 0.2);
    border-radius: 5px;
    color: rgba(242, 242, 242, 0.7);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

/* The months, under the quarter number — lighter, because the quarter is
   what you are picking and the months are how you recognise it. */
.period-btn span {
    font-weight: 400;
    font-size: 0.72rem;
    color: rgba(242, 242, 242, 0.4);
    margin-left: 0.15rem;
}

.period-btn:hover {
    border-color: rgba(206, 186, 76, 0.5);
    color: #f2f2f2;
}

.period-btn:focus-visible {
    outline: 2px solid rgb(206, 186, 76);
    outline-offset: 2px;
}

.period-btn.selected {
    border-color: rgb(206, 186, 76);
    background: rgba(206, 186, 76, 0.12);
    color: rgb(206, 186, 76);
}

.period-btn.selected span {
    color: rgba(206, 186, 76, 0.7);
}

@media (max-width: 700px) {
    .period-presets {
        width: 100%;
    }
    .period-btn {
        flex: 1 1 auto;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .period-btn { transition: none; }
}