/* One overlay scale. Header stays under sheets and menus. Menus stay under modals.
   The nav drawer is a full-screen modal. It has to leave the header-start stacking
   context or the bell and sign-in icons paint over Close. */

:root {
    --cu-z-header: 40;
    --cu-z-dock: 30;
    --cu-z-menu: 60;
    --cu-z-sheet: 70;
    --cu-z-modal: 90;
    --cu-z-nav: 100;
}

.cu-shell__header { z-index: var(--cu-z-header); }
.cu-tabs { z-index: var(--cu-z-dock); }

body.cu-nav-open .cu-shell__header-start {
    z-index: 2;
}

body.cu-nav-open .cu-shell__actions,
body.cu-nav-open .cu-shell__back-slot {
    pointer-events: none;
}

.cu-nav__backdrop { z-index: var(--cu-z-nav); }
.cu-nav__drawer { z-index: calc(var(--cu-z-nav) + 1); }

.cu-filter-scrim,
.cu-compact-filters ~ .cu-filter-scrim { z-index: var(--cu-z-sheet); }

.cu-filter-sheet,
.cu-compact-filters ~ .cu-filter-sheet {
    z-index: calc(var(--cu-z-sheet) + 1);
    bottom: calc(var(--cu-tabs-h, 4.25rem) + env(safe-area-inset-bottom, 0px));
    max-height: min(70dvh, calc(100dvh - var(--cu-header-h, 4.5rem) - var(--cu-tabs-h, 4.25rem) - 1rem));
}

.cu-verify-gate {
    z-index: var(--cu-z-modal);
    padding:
        calc(var(--cu-header-h, 4.5rem) + 0.5rem)
        1rem
        calc(var(--cu-tabs-h, 4.25rem) + env(safe-area-inset-bottom, 0px) + 0.75rem);
}

.cu-verify-gate__panel {
    max-height: calc(100dvh - var(--cu-header-h, 4.5rem) - var(--cu-tabs-h, 4.25rem) - 1.5rem);
    overflow: auto;
}

.cu-card-overflow__menu,
.cu-more__menu,
.cu-shell__back-menu {
    z-index: var(--cu-z-menu);
}

.cu-more--open { z-index: var(--cu-z-menu); }

.cu-shell__back-menu {
    position: fixed;
    top: calc(var(--cu-header-h, 4.5rem) + 0.35rem);
    left: 0.5rem;
    right: 0.5rem;
    width: auto;
    max-width: 18rem;
    margin-left: auto;
}

.cu-alerts-panel__panel { padding-right: 3.4rem; }
.cu-alerts-panel__close { top: 0.45rem; right: 0.45rem; }
.cu-verify-gate__title { padding-right: 2.5rem; }

/* Header at 320: mark instead of the wide wordmark, Guest stays one line. */
@media (max-width: 390px) {
    .cu-shell__lockup-slot { display: none; }
    .cu-shell__mark-slot { display: block; flex: 0 0 auto; }
    .cu-shell__brand-cluster .cu-shell__county {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 7.5rem;
    }
}

/* Guest banner controls are real tap targets. */
.cu-shell .cu-guest-banner a.cu-pending-banner__cta,
.cu-shell .cu-guest-banner .cu-pending-banner__cta,
.cu-shell .cu-guest-banner a.cu-pending-banner__signin,
.cu-shell .cu-guest-banner .cu-pending-banner__signin,
.cu-shell[data-theme="light"] .cu-guest-banner a.cu-pending-banner__cta,
.cu-shell[data-theme="light"] .cu-guest-banner a.cu-pending-banner__signin,
.cu-shell .cu-guest-banner .cu-pending-banner__dismiss {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.35rem;
    box-sizing: border-box;
}

/* Dock labels stay one line. Each tab is at least 44px. */
.cu-tabs__label { white-space: nowrap; }
@media (max-width: 720px) {
    .cu-tabs__item {
        min-height: 44px;
        font-size: 0.68rem;
        padding: 0.15rem 0.05rem;
    }
}

/* Footer links were a 17px line. */
.cu-footer__list a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0.35rem 0;
    box-sizing: border-box;
}

/* Rate 1–5 stays one row of equal 44px buttons on a phone. */
@media (max-width: 430px) {
    .cu-rate .cu-voice-row,
    .cu-rate__scores,
    .cu-rate__scores--first {
        flex-wrap: nowrap;
        width: 100%;
        gap: 0.25rem;
    }

    .cu-rate__tick,
    .cu-rate [data-cu-rate-score] {
        flex: 1 1 44px;
        min-width: 44px;
        width: auto;
        min-height: 44px;
        padding-left: 0;
        padding-right: 0;
    }

    .cu-officials-hub .cu-hub-tabs {
        flex-wrap: nowrap;
        width: 100%;
        max-width: 100%;
    }

    .cu-officials-hub .cu-hub-tabs a {
        flex: 1 1 0;
        min-width: 0;
        justify-content: center;
        white-space: nowrap;
        min-height: 44px;
        padding: 0.15rem 0.2rem;
        font-size: 0.75rem;
    }
}

/* Page-title ring is for the keyboard, not the focus Blazor sets on load. */
h1:focus:not(:focus-visible),
.cu-page-title:focus:not(:focus-visible),
.cu-section-title:focus:not(:focus-visible) {
    outline: none;
}

.cu-title-with-info {
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.cu-title-with-info + p,
.cu-title-with-info + .cu-page-intro,
.cu-title-with-info + .cu-empty {
    clear: both;
}

/* Catch Up list grows with the page. The dock pads the scrollport; it does not cover a capped list. */
@media (max-width: 430px) {
    .cu-shell .cu-feed-list,
    .cu-shell--guest-banner .cu-feed-list {
        max-height: none;
        height: auto;
        overflow: visible;
    }

    .cu-feed-stage,
    .cu-feed-stage__center {
        height: auto;
        max-height: none;
        overflow: visible;
    }
}

/* Dossier meta is one column until there is room for finance cards beside it. */
@media (max-width: 960px) {
    .cu-dossier-hero--stacked .cu-dossier-hero__meta {
        grid-template-columns: minmax(0, 1fr);
    }

    .cu-dossier-hero--stacked .cu-dossier-hero__name,
    .cu-dossier-hero--stacked .cu-dossier__sub,
    .cu-dossier-hero--stacked .cu-dossier-chips,
    .cu-dossier-hero--stacked .cu-dossier-term {
        grid-column: 1;
        grid-row: auto;
    }
}

div.cu-tactics .cu-tactic__summary,
div.cu-tactics .cu-tactic__more,
.cu-note__open {
    min-height: 44px;
}

div.cu-tactics .cu-tactic__label {
    white-space: nowrap;
}

.cu-filter-sheet select,
.cu-filter-field select,
.cu-compact-filters select {
    min-height: 44px;
    height: 44px;
    field-sizing: auto;
    box-sizing: border-box;
}

.cu-shell[data-theme="dark"] .cu-filter-sheet select,
.cu-shell[data-theme="dark"] .cu-filter-field select,
.cu-shell[data-theme="dark"] .cu-compact-filters select,
html[data-theme="dark"] .cu-filter-sheet select {
    background: #1c1917;
    color: #f5f0e6;
    border-color: rgba(245, 240, 230, 0.28);
}

.cu-shell[data-theme="light"] .cu-filter-sheet select,
.cu-shell[data-theme="light"] .cu-filter-field select,
.cu-shell[data-theme="light"] .cu-compact-filters select {
    background: #fffdf8;
    color: #1c1917;
}

.cu-shell[data-theme="dark"] .cu-more__item,
html[data-theme="dark"] .cu-more__item,
.cu-shell[data-theme="dark"] .cu-more__menu .cu-chip-btn {
    color: #f5f0e6;
}

.cu-bill-row .cu-card-overflow--corner {
    z-index: 4;
}

.cu-shell[data-theme="dark"] .cu-bills-page .cu-bill-row__congress,
html[data-theme="dark"] .cu-bills-page .cu-bill-row__congress {
    color: #5eead4;
}

form.cu-learn-stage {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

form.cu-learn-stage > label {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    min-width: 0;
    white-space: normal;
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

form.cu-learn-stage > label .cu-send-input {
    width: 100%;
    min-height: 44px;
    box-sizing: border-box;
}