/* Report toolbar and loading screen. Loaded by the app pages and injected above a
   report — kept apart from web.css, whose class names (.chip, .hint, .row, .v …) would
   otherwise restyle the report's own components. */
/* ---- loading screen ---- */
.loading {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    background: rgba(231, 229, 221, .92)
}

.loading[hidden] {
    display: none
}

.loading .box {
    max-width: 320px;
    text-align: center;
    padding: 24px;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: 0 18px 48px -24px rgba(28, 43, 42, .4)
}

.spinner {
    width: 36px;
    height: 36px;
    margin: 0 auto 12px;
    border: 4px solid var(--rule);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin 1s linear infinite
}

@keyframes spin {
    to {
        transform: rotate(360deg)
    }
}

/* ---- report toolbar (injected above the report) ---- */
.report-toolbar {
    position: sticky;
    top: 0;
    z-index: 40;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 14px;
    align-items: center;
    max-width: 860px;
    margin: 0 auto 8px;
    padding: 10px 16px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
    font-size: 14px
}

.report-toolbar a {
    color: var(--brand);
    font-weight: 700
}

.report-toolbar form {
    display: inline
}

.report-toolbar button {
    font: inherit;
    font-size: 14px;
    min-height: 36px;
    padding: 4px 12px;
    border: 1px solid var(--brand);
    border-radius: 8px;
    background: var(--paper);
    color: var(--brand);
    cursor: pointer
}

.report-toolbar .meta {
    font-size: 12px;
    color: var(--ink-2)
}

/* ---- "made with an earlier method" notice (A48): quiet, above the report ---- */
.report-notice {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    align-items: center;
    max-width: 860px;
    margin: 0 auto 8px;
    padding: 10px 16px;
    border: 1px solid var(--rule);
    border-radius: 10px;
    background: var(--rule-2);
    color: var(--ink-2);
    font-size: 13.5px;
    line-height: 1.6
}

.report-notice p {
    margin: 0;
    flex: 1 1 260px
}

.report-notice form {
    margin: 0
}

.report-notice button {
    font: inherit;
    font-weight: 700;
    color: var(--brand);
    background: var(--paper);
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 4px 14px;
    min-height: 32px;
    cursor: pointer
}

/* "Save as PDF" while the PDF is being made (A95) */
.report-toolbar a.pdf-busy {
    pointer-events: none;
    opacity: .8;
    display: inline-flex;
    align-items: center;
    gap: 6px
}

.report-toolbar .pdf-spin {
    width: 12px;
    height: 12px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: pdf-spin .8s linear infinite
}

.report-toolbar .pdf-msg {
    flex-basis: 100%;
    color: #b42318;
    font-size: 13px
}

@keyframes pdf-spin {
    to {
        transform: rotate(360deg)
    }
}

@media (prefers-reduced-motion: reduce) {
    .report-toolbar .pdf-spin {
        animation: none
    }
}