/* The "Not today?" card (docs/growth/WHY_NOT_QUESTION.md; mock docs/mocks/site/why-not.html): a corner card, a sheet
   across the bottom on a phone, never a modal. Its fields are the site's .field. */
.why-not {
    position: fixed;
    right: var(--space-6);
    bottom: var(--space-6);
    z-index: var(--z-sticky);
    display: grid;
    gap: var(--space-3);
    width: min(360px, calc(100vw - 2 * var(--space-4)));
    max-height: calc(100vh - 2 * var(--space-4));
    max-height: calc(100dvh - 2 * var(--space-4));
    overflow-y: auto;
    padding: var(--space-5);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-panel);
    color: var(--text);
    box-shadow: var(--shadow-pop);
}
.why-not [hidden] { display: none; }
/* Stays in reach when a short screen or a phone's keyboard scrolls the card */
.why-not__head { position: sticky; top: 0; display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); background: var(--bg-panel); }
.why-not h2 { margin: 0; font-family: var(--font-display); font-weight: var(--font-display-weight); font-size: var(--fs-lg); line-height: 1.2; outline: none; }
.why-not__dismiss { padding: 0; border: 0; background: none; color: var(--text-muted); font: inherit; font-size: var(--fs-sm); cursor: pointer; }
.why-not__dismiss:hover { color: var(--ink); text-decoration: underline; }
.why-not p { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
.why-not__reasons { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* The compare page's "You also need" pill, .cmp-need */
.why-not__reason {
    padding: 6px var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--r-pill);
    background: var(--bg-panel);
    color: var(--ink);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.why-not__reason:hover { border-color: var(--gold); }
.why-not__reason[aria-pressed="true"] { border-color: var(--gold); background: var(--gold-wash); }
.why-not__reason:focus-visible, .why-not__dismiss:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.why-not__more { display: grid; gap: var(--space-2); }
.why-not__optional { font-weight: 400; color: var(--text-muted); }
.why-not .field textarea { min-height: 72px; }
.why-not p.why-not__error { color: var(--overdue-fg); }
.why-not__send { justify-self: start; }

@media (pointer: coarse) {
    /* iOS zooms into a field under 16px; a bigger tap area without a taller head */
    .why-not .field :is(input, textarea) { font-size: 16px; }
    .why-not__dismiss { min-height: 44px; margin-block: -12px; }
}

@media (max-width: 640px) {
    .why-not {
        right: var(--space-4);
        bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
        left: var(--space-4);
        width: auto;
    }
}