/* Only this page has a form on it, so these do not belong in the shared
   stylesheet. It is a FILE rather than a <style> block so the page can
   keep style-src 'self': an inline block would have forced
   'unsafe-inline' for every stylesheet, to save one request. */
/* Scoped to this page. The shared stylesheet is used by every legal
   page and none of the others has a form on it. */
/* The whole sign in, confirm and delete flow sits in ONE block (owner,
   2026-09-17: it read as scattered text). Same card language as
   .legal-summary, with the red rule because this is the destructive action. */
.del {
    margin: 1.6rem 0 2.8rem;
    max-width: 820px;
    padding: 1.6rem 1.7rem 1.8rem;
    border: 1px solid var(--border-strong);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-md);
    background-color: var(--bg-card);
}
.del-title {
    font-family: var(--font-heading);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--primary);
    margin: 0 0 0.6rem;
}
.del-intro { font-size: 0.96rem; color: var(--text-secondary); line-height: 1.6; margin: 0 0 1.3rem; max-width: 62ch; }
/* Which account is about to go has to be impossible to miss. */
.del-account {
    display: grid;
    gap: 0.3rem;
    width: 100%;
    padding: 1rem 1.2rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background-color: rgba(255, 255, 255, 0.04);
}
.del-account-label {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-heading);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #36d3a0;
}
.del-dot { width: 8px; height: 8px; border-radius: 50%; background-color: #36d3a0; box-shadow: 0 0 10px rgba(54, 211, 160, 0.6); }
.del-account-email { font-family: var(--font-heading); font-size: 1.35rem; font-weight: 700; color: #fff; overflow-wrap: anywhere; }
.del-step { display: grid; gap: 0.75rem; justify-items: start; }
.del-who { font-size: 1.05rem; margin: 0; }
.del-fine { font-size: 0.92rem; opacity: 0.82; margin: 0; max-width: 60ch; line-height: 1.55; }
.del-label { font-size: 0.92rem; }
.del-input { max-width: 15rem; text-transform: uppercase; }
.del-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.4rem; }
/* Destructive, and it has to look it. */
.del-danger { background: #d3242f; color: #fff; border-color: #d3242f; }
.del-danger[disabled] { opacity: 0.45; cursor: not-allowed; }
.del-cancel { background: transparent; color: #fff; border-color: var(--border-strong); }
.del-cancel:hover { border-color: #fff; }
/* The message has to be impossible to miss: it is the only thing telling a
   person why nothing happened (owner, 2026-09-18). A block with its own
   ground, a red rule and an icon, not a line of red text among paragraphs. */
.del-error {
    display: flex;
    gap: 0.7rem;
    align-items: flex-start;
    margin-top: 1.2rem;
    padding: 0.95rem 1.1rem;
    max-width: 60ch;
    border: 1px solid rgba(211, 36, 47, 0.45);
    border-left: 3px solid #d3242f;
    border-radius: var(--radius-sm);
    background-color: rgba(211, 36, 47, 0.10);
    color: #ffd9dc;
    font-size: 0.98rem;
    line-height: 1.55;
}
.del-error::before {
    content: "!";
    flex: none;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.05rem;
    border-radius: 50%;
    background-color: #d3242f;
    color: #fff;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 0.85rem;
    line-height: 1.35rem;
    text-align: center;
}
[hidden] { display: none !important; }
/* THE PROVIDERS' OWN BUTTONS (owner, 2026-09-17), drawn to their published
   rules rather than in the site's red:
   Google, Sign in with Google branding guidelines, light theme (owner chose
   white): fill #FFFFFF, 1px stroke #747775, text #1F1F1F, the four-colour G unmodified, label
   "Sign in with Google", Roboto Medium (falls back to the system face here,
   because the page self-hosts its fonts and Roboto is not among them).
   Apple, Sign in with Apple HIG: white style on a dark page, the Apple logo
   and the label "Sign in with Apple" in the system font, same height as the
   button beside it. Both use the pill shape, which both guidelines allow. */
.del-provider {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 44px;
    padding: 0 18px 0 14px;
    border-radius: 22px;
    border: 1px solid transparent;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: 0.01em;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter 0.2s ease;
}
.del-provider-logo { width: 20px; height: 20px; flex: none; }
.del-google {
    background-color: #fff;
    border-color: #747775;
    color: #1f1f1f;
    font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif;
    font-weight: 600;
}
.del-apple {
    background-color: #fff;
    border-color: #fff;
    color: #000;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    font-weight: 600;
}
.del-apple-logo { width: 17px; height: 20px; margin-top: -3px; }
.del-provider:hover { filter: brightness(1.12); }
.del-google:hover,
.del-apple:hover { filter: brightness(0.92); }
.del-provider:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }