/* =========================================================================
   Collapsible setup sections.

   The heading becomes the control, so the whole line is the target rather
   than a small chevron off to one side. Closed, a section is just its own
   heading — which is the point: the setup is something you fill in once and
   then want out of the way of the results.

   Shared by the Smart Labeler, the Sales Tax page and the TIS page's
   forecast and estimate tabs. One definition rather than three: these
   sections are meant to behave identically everywhere, and a copy per
   stylesheet is a copy that drifts.

   Paired with makeSectionsCollapsible() in src/pages/collapsible-sections.ts,
   which builds the markup these rules expect.
   ========================================================================= */

.config-section.is-collapsible h3 {
    margin-bottom: 0;
}

/* Closed, the section is just its own heading. */
.config-section.is-collapsible:has(.config-body.hidden) {
    padding-bottom: 0.9rem;
}

/* A button *inside* the heading, never a heading inside a button: nesting a
   block element in a button is invalid and the browser quietly drops the
   click. It carries the heading's look. */
.config-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
}

.config-toggle svg {
    flex: none;
    width: 1.15rem;
    height: 1.15rem;
}

.config-toggle:focus-visible {
    outline: 2px solid rgb(206, 186, 76);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Reads as the action available, not the current state. */
.config-toggle-hint {
    margin-left: auto;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgba(206, 186, 76, 0.85);
}

.config-body {
    padding-top: 1rem;
}

/* The heading the Smart Labeler wraps its own sections in. */
.section-heading {
    margin: 0;
}