/*
 * Notice strip — a standing message about the account or the session, held
 * above the page it applies to: operator mode, the missing-photo nudge. One
 * component because the two are the same object, a sentence and the single
 * control that ends it; only the tone differs.
 *
 * The slot sits flush under the top bar (Nick, 09-03). The strips carry no
 * margins of their own so they can mount anywhere; the slot places them.
 */

/* Edge to edge, and no bottom gap: the content column's top padding is the
   space below. That padding is also where the pinned gutter's repaint sits at
   rest, which is why it has to stay below this slot rather than hang off the
   bar — see components/page-header.css. */
.global-notice-slot {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    gap: var(--spacing-sm);
    /* Pin the band under the header so an account-level notice (a missing
       profile photo, an operator override) stays put as the page scrolls;
       everything below clears it because its height feeds --drawer-top
       (tokens.css). Painted with the page ground so the gap between two stacked
       strips never flashes the scrolling content through it. --z-sticky is the
       band's own layer: above the scrolling content, below the header (which
       carries the top edge at 1050). Nothing sticky in the content ever reaches
       this vertical band — it all clears --drawer-top, which is below here. */
    position: sticky;
    top: var(--header-bottom);
    z-index: var(--z-sticky);
    background-color: var(--color-page-bg);
}

/* A band, not a card (Nick, 09-03): square, so the bottom reads as one straight
   line across the section and the top meets the bar with no notch at either
   end. Only the block edges are drawn — run out to the section's own sides, a
   left and right border are 1px of nothing. Transparent keeps a tone that
   paints only a fill the same height as one that draws an edge. */
.global-notice {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-smd);
    padding: var(--spacing-sm) var(--page-gutter);
    border-block: 1px solid transparent;
    font-size: var(--font-size-md);
}

/* The platform's tint, never the org's: these state account-level facts that
   read the same on every tenant. */
.global-notice--info {
    background-color: var(--status-info-bg);
    border-color: var(--status-info-border);
    color: var(--color-text);
}

/* Opt-in, because a short sentence pushed away from its own button across a
   wide screen stops reading as one thought. */
.global-notice--split {
    justify-content: space-between;
}

/* Each half travels as one item, so a wrap breaks between the sentence and the
   control rather than inside either. */
.global-notice__side {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    min-width: 0;
}

.global-notice__arrow {
    color: var(--color-text-secondary);
}

/* The short label ("Add photo") exists for the compact shell only; the block
   below swaps it in. On a wide bar the full sentence fits. */
.global-notice__label--narrow {
    display: none;
}

/* ── Compact shell (<1024px) ────────────────────────────────────────────────
   The strip stops being sticky (nothing under the header is sticky here; the
   measurer in app.html reports --notice-height as 0 for the same reason),
   wraps its button onto a full-width row and shortens the label. Stays LAST. */
@media (max-width: 1023px) {
    .global-notice-slot {
        position: static;
    }

    .global-notice {
        flex-wrap: wrap;
        gap: var(--spacing-sm);
        padding: var(--spacing-sm) var(--page-gutter);
    }

    .global-notice__side {
        width: 100%;
    }

    .global-notice__arrow {
        display: none;
    }

    .global-notice__label--wide {
        display: none;
    }

    .global-notice__label--narrow {
        display: inline;
    }

    .global-notice .btn {
        min-height: var(--control-h-touch);
    }
}