/* ============================================================================
   ACCOUNT CLOSURE - the settings entry, the two-step dialog, the grace-period
   banner. Own .close-account-* / .closure-banner-* namespace over the base
   tokens, so it reads correctly in light and dark without a second sheet.

   THE CARD'S HEIGHT IS FIXED AND THAT IS THE POINT. Step one is a list of
   consequences, step two is two fields; sized to content the card would jump
   between them, and the owner's standing rule is that a modal must never move
   under the reader. The height lives here, the body scrolls inside it, and the
   footer is pinned - both steps occupy exactly the same box.
   ============================================================================ */

/* ---------- the entry in the settings panel ---------- */

.settings-section-danger {
    border-top: 1px solid var(--chronos-outline);
    padding-top: 10px;
}

/* Quiet on purpose. The path has to exist (Google Play requires it, the privacy
   policy promises it) but nothing here should invite anyone down it, so it is a
   muted text link rather than a button competing with the real controls. */
.settings-close-account {
    width: 100%;
    background: none;
    border: 0;
    padding: 4px 2px;
    font: inherit;
    font-size: 12px;
    text-align: left;
    color: var(--chronos-fg-muted);
    cursor: pointer;
    border-radius: 6px;
}

.settings-close-account:hover {
    color: var(--chronos-danger, #DC2626);
    text-decoration: underline;
}

/* ---------- the dialog ---------- */

/* Above the profile (1000) and inventory (1100) overlays, level with the shared
   confirm dialog - it can be raised from the settings popover, which sits in the
   top bar. */
.close-account-backdrop {
    z-index: 1200;
}

.close-account-card {
    /* The fixed box. Both steps live in it; neither resizes it. max-height keeps
       a short laptop window honest, and because it does not vary by step it
       cannot make the card move either. */
    height: 470px;
    max-height: 86vh;
    max-width: 480px;
    padding: 0;
    gap: 0;
    overflow: hidden;
}

.close-account-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 18px 22px 12px;
    border-bottom: 1px solid var(--chronos-outline);
    flex: 0 0 auto;
}

.close-account-title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--chronos-fg-primary);
}

.close-account-x {
    background: none;
    border: 0;
    font-size: 16px;
    line-height: 1;
    padding: 4px;
    cursor: pointer;
    color: var(--chronos-fg-muted);
    border-radius: 6px;
}

.close-account-x:hover {
    color: var(--chronos-fg-primary);
}

/* The only thing that scrolls. Everything above and below it is pinned, so the
   card's outline never moves between steps. */
.close-account-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 16px 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.close-account-foot {
    flex: 0 0 auto;
    padding: 12px 22px 16px;
    border-top: 1px solid var(--chronos-outline);
}

.close-account-lede {
    margin: 0;
    font-size: 14px;
    line-height: 1.55;
    color: var(--chronos-fg-primary);
}

.close-account-note {
    margin: 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--chronos-fg-muted);
}

.close-account-flash {
    margin: 0;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    background: rgba(124, 58, 237, 0.10);
    border: 1px solid rgba(124, 58, 237, 0.28);
    color: var(--chronos-fg-primary);
}

.close-account-flash.is-error {
    background: rgba(220, 38, 38, 0.10);
    border-color: rgba(220, 38, 38, 0.32);
}

/* ---------- what goes, what stays ---------- */

/* Two columns on a desktop, stacked on a phone. Honest rather than reassuring:
   the left column is the loss and it is listed first. */
.close-account-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.close-account-column {
    border: 1px solid var(--chronos-outline);
    border-radius: 10px;
    padding: 10px 12px;
}

.close-account-column.is-gone {
    border-color: rgba(220, 38, 38, 0.30);
    background: rgba(220, 38, 38, 0.06);
}

.close-account-column.is-kept {
    background: var(--chronos-surface-muted, rgba(124, 58, 237, 0.05));
}

.close-account-column-head {
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 6px;
    color: var(--chronos-fg-muted);
}

.close-account-list {
    margin: 0;
    padding-left: 16px;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--chronos-fg-primary);
}

.close-account-list li + li {
    margin-top: 4px;
}

/* ---------- the fields ---------- */

.close-account-form {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.close-account-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--chronos-fg-muted);
}

.close-account-input {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--chronos-outline);
    background: var(--chronos-input-bg, var(--chronos-card-bg));
    color: var(--chronos-fg-primary);
    /* 16px on phones or iOS zooms the whole page on focus. */
    font-size: 16px;
}

.close-account-input:focus {
    outline: 2px solid var(--chronos-violet);
    outline-offset: 1px;
}

.close-account-code {
    letter-spacing: 6px;
    font-family: Consolas, Menlo, "Courier New", monospace;
    text-align: center;
}

.close-account-danger {
    margin-top: 4px;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: #DC2626;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.close-account-danger:hover:not(:disabled) {
    filter: brightness(1.08);
}

.close-account-danger:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.close-account-resend {
    margin-top: 2px;
}

.close-account-quiet {
    background: none;
    border: 0;
    padding: 2px;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--chronos-violet);
    cursor: pointer;
    text-decoration: underline;
}

/* The way out is the loud one. Leaving is a text link; staying is the button. */
.close-account-keep {
    width: 100%;
    padding: 11px 18px;
    border: 0;
    border-radius: 999px;
    background: linear-gradient(135deg, #7C3AED 0%, #A855F7 100%);
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.close-account-keep:hover {
    filter: brightness(1.08);
}

/* ---------- phones ---------- */

@media (max-width: 480px) {
    .close-account-card {
        /* Still fixed, still identical across steps - just sized for a phone. */
        height: 78vh;
        max-height: 560px;
        width: 94%;
    }

    .close-account-columns {
        grid-template-columns: 1fr;
    }

    .close-account-head { padding: 14px 16px 10px; }
    .close-account-body { padding: 14px 16px; }
    .close-account-foot { padding: 10px 16px 14px; }
}

/* ============================================================================
   GRACE-PERIOD BANNER - the only visible difference between a normal account
   and one that is counting down. Lives in the layout, so it must not disturb a
   single page's geometry: it is a flow-level strip, not a fixed overlay.
   ============================================================================ */

.closure-banner {
    background: rgba(220, 38, 38, 0.10);
    border-bottom: 1px solid rgba(220, 38, 38, 0.30);
    padding: 9px 14px;
}

/* Capped and centred rather than stretched: a strip running the full width of a
   wide monitor is the look the owner's standing rule rejects. */
.closure-banner-inner {
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px 10px;
    font-size: 13px;
    line-height: 1.4;
    color: var(--chronos-fg-primary);
}

.closure-banner-icon {
    font-size: 14px;
    line-height: 1;
}

.closure-banner-text {
    text-align: center;
}

.closure-banner-form {
    display: contents;
}

.closure-banner-cancel {
    padding: 5px 14px;
    border: 1px solid rgba(220, 38, 38, 0.45);
    border-radius: 999px;
    background: var(--chronos-card-bg);
    color: var(--chronos-fg-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.closure-banner-cancel:hover {
    border-color: #DC2626;
    color: #DC2626;
}

@media (max-width: 480px) {
    .closure-banner {
        padding: 8px 12px;
    }

    .closure-banner-inner {
        font-size: var(--text-sm);
        gap: 6px 8px;
    }
}