/* Notification Settings (/panel/admin-notification-settings) — EDS bridge overrides.
   Owned by this surface only. Corrects two type-scale drifts in the .ans-* section
   of eds-panel.css: Fraunces headings must sit at weight 430 (never 600), and Inter
   eyebrows must sit at weight 600 (never 650) — see docs/design-system.md and every
   other .fi-eds-*eyebrow / var(--ser) heading in the shared bridge for the convention. */

.ans .fi-eds-eyebrow,
.ans-card__eyebrow {
    font-weight: 600;
}

.ans-section__head h2 {
    font: 430 18px/1.25 var(--ser);
    letter-spacing: -.01em;
}

.ans-card__title {
    font: 430 17px/1.28 var(--ser);
    letter-spacing: -.01em;
}

/* Chevron reads as the disclosure control on the eyebrow/title row, not a
   glyph floating alone in the card's vertical middle. Alignment alone does
   the job — no off-scale nudge needed. */
.ans-card__status {
    align-items: flex-start;
}

/* Row height comes from each row's own tallest card — `.ans-card` already
   inherits `align-self: stretch` from eds-panel.css, which always wins over
   a parent `align-items`, so there's no separate grid-level rule to set.
   Make the closed-card summary fill that stretched height so
   `.ans-card__summaryline`'s `margin-top: auto` still pushes the meta row
   to the card's bottom edge instead of leaving dead air above it. */
.ans-card:not([open]) {
    display: flex;
    flex-direction: column;
}

.ans-card:not([open]) .ans-card__summary {
    flex: 1 1 auto;
    min-height: 0;
}

/* Expanded card: the status badge sits next to its own eyebrow label
   instead of flying to the far edge of the now full-width row. */
.ans-card[open] .ans-card__eyebrow {
    justify-content: flex-start;
    gap: 10px;
}

/* Expanded card: cap the form — and everything else in the body, so the
   copy note, actions row and advanced disclosure share the same right
   edge — at a readable width instead of stretching full-bleed across the
   row. Scoped to the shared single-column breakpoint in eds-panel.css
   (`@media (max-width: 720px)` on `.ans-primary-editor`) so mobile keeps
   its base one-column layout untouched. */
@media (min-width: 721px) {
    .ans-card[open] .ans-primary-editor {
        grid-template-columns: minmax(0, 620px) minmax(220px, 300px);
        justify-content: start;
    }

    .ans-card[open] .ans-card__body > * {
        max-width: 936px;
    }
}

/* display:flex on <summary> suppresses the native disclosure marker in
   Chromium; replace it with the same chevron geometry used on the cards
   so "More information and actions" and "Recent settings activity" carry
   an open/closed affordance. */
.ans-advanced > summary::after,
.ans-audit > summary::after {
    content: "";
    width: 8px;
    height: 8px;
    margin-left: auto;
    border-right: 1.5px solid var(--ink2);
    border-bottom: 1.5px solid var(--ink2);
    transform: rotate(45deg);
    transition: transform .18s cubic-bezier(.22, .61, .36, 1);
}

.ans-advanced[open] > summary::after,
.ans-audit[open] > summary::after {
    transform: rotate(225deg);
}

@media (prefers-reduced-motion: reduce) {
    .ans-advanced > summary::after,
    .ans-audit > summary::after {
        transition: none;
    }
}