/* Chrome autofill detection: fire a CSS animation so JS can dispatch a
   synthetic input event, causing Blazor to read the autofilled value and
   MudBlazor's floating label to move to its filled position. */
@keyframes onAutoFillStart { from { /**/ } to { /**/ } }
@keyframes onAutoFillCancel { from { /**/ } to { /**/ } }

input:-webkit-autofill {
    animation-name: onAutoFillStart;
    animation-duration: 0.001s;
}
input:not(:-webkit-autofill) {
    animation-name: onAutoFillCancel;
    animation-duration: 0.001s;
}

.tedx-grid-header-actions {
    display: none !important;
}

/* Suppress the focus outline/border on an H1 focused by <FocusOnNavigate Selector="h1">.
   FocusOnNavigate stamps tabindex="-1" and calls .focus(), so the H1 is reachable ONLY
   programmatically — never via keyboard Tab. The previous :not(:focus-visible) guard was
   meant to preserve the ring "for keyboard users", but no keyboard user can ever focus a
   tabindex="-1" element, so the guard protected a case that cannot occur. Worse, after an
   enhanced navigation Chromium often can no longer attribute the programmatic focus to the
   originating click and classifies it as :focus-visible, which made the guard let the ring
   through — the exact bug it was supposed to prevent. Suppress unconditionally on the
   programmatically-focused heading. (TM-76185 follow-up.) */
h1[tabindex="-1"]:focus {
    outline: none !important;
    box-shadow: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Petition history: allow text to wrap within its grid column */
.section-historical-petition-history .ted-card-field-value .mud-typography {
    overflow: visible !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    text-align: center;
}

.section-historical-petition-history .ted-card-body-grid {
    column-gap: 8px;
}

/* Petition history mobile: reduce padding */
@media (max-width: 960px) {
    .voter-info-wrapper .mud-expand-panel:has(.section-historical-petition-history) .mud-expand-panel-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    .section-historical-petition-history .ted-card-body-grid {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

/* Voting history: disable content-visibility skip to prevent missing border dividers */
.section-historical-voting-history .ted-card-item {
    content-visibility: visible !important;
}

/* Voting history mobile: reduce expansion panel padding */
@media (max-width: 960px) {
    .voter-info-wrapper .mud-expand-panel:has(.section-historical-voting-history) .mud-expand-panel-content {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }
}


.voter-info-wrapper .mud-expansion-panels {
    width: 100%;
}



.voter-info-wrapper .mud-expand-panel {
    margin-bottom: 8px;
    elevation: 0;
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-radius: 8px !important;
    overflow: hidden;
}

.voter-info-wrapper .mud-expand-panel-header {
    border-top: none !important;
}

/* Upcoming elections — card wrapper focus ring */
.upcoming-election-card-focusable:focus,
.upcoming-election-card-focusable:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #594AE2) !important;
    outline-offset: -2px !important;
    border-radius: 16px !important;
}

.voter-info-wrapper .mud-collapse-container.mud-collapse-entered {
    padding-top: 0;
}

.voter-info-wrapper .ted-card-container {
    gap: 4px !important;
}

.voter-info-wrapper .ted-card-body-grid {
    padding: 6px 16px;
}

.voter-info-wrapper .ted-card-field {
    margin-bottom: 2px;
}

/* Where Do I Vote — location card focus ring */
.wdiv-location-card:focus,
.wdiv-location-card:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #594AE2) !important;
    outline-offset: -2px !important;
    border-radius: 8px !important;
}

/* Voter profile accordion: headings are semantic H2 but styled at H6 visual scale */
.voter-info-wrapper .mud-expand-panel-header .mud-typography-h2 {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: 0.0075em;
    margin: 0;
}

/* MudBlazor label — prevent shrink scaling on all input labels.
   The :has(:-webkit-autofill) selector covers Chrome autofill: MudBlazor adds
   .mud-shrink only once Blazor knows the value, but Chrome's autofill *preview*
   state hides the value from JS, so .mud-shrink is never added and the label
   stays in its empty position overlapping the autofilled text. Matching the
   autofilled state here moves the label exactly like the focused/valued state. */
.mud-shrink~label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:focus-within~label.mud-input-label.mud-input-label-inputcontrol,
.mud-input:has(> input:-webkit-autofill)~label.mud-input-label.mud-input-label-inputcontrol {
    transform: translate(0, -5px) scale(1) !important;
    transform-origin: top left;
}

/* Allow form labels to wrap instead of truncating with ellipsis */
.mud-input-label {
    white-space: normal !important;
    text-overflow: unset !important;
    overflow: visible !important;
}

.mud-input-control.mud-input-required > .mud-input-control-input-container > .mud-input-label::after {
    color: var(--mud-palette-error) !important;
}

/* Non-input fields (chips, toggles, cards): label wraps naturally */
.mud-input-control:has(.mud-chipset) .mud-input-control-input-container,
.mud-input-control:has(.mud-toggle-group) .mud-input-control-input-container,
.mud-input-control:has(.ted-card-view) .mud-input-control-input-container {
    display: flex !important;
    flex-direction: column-reverse !important;
}

.mud-input-control:has(.mud-chipset) .mud-input-label,
.mud-input-control:has(.mud-toggle-group) .mud-input-label,
.mud-input-control:has(.ted-card-view) .mud-input-label {
    position: relative !important;
    transform: none !important;
}

.mud-input-control:has(.mud-chipset) .mud-input.mud-input-text-with-label,
.mud-input-control:has(.mud-toggle-group) .mud-input.mud-input-text-with-label,
.mud-input-control:has(.ted-card-view) .mud-input.mud-input-text-with-label {
    margin-top: 0 !important;
}

/* Mobile: wrap card fields naturally, fitting as many per row as possible */
@media (max-width: 960px) {
    .card-view-container .mud-grid {
        display: flex !important;
        flex-wrap: wrap !important;
    }

    .card-view-container .mud-grid-item {
        max-width: none !important;
        width: auto !important;
        min-width: 140px;
        flex-basis: auto !important;
        align-items: center;
    }
}

.step-display-container h5 {
    font-size: 18px !important;
}