/* =========================================================================
   Confirmations — Design 2.0, Batch 3
   =========================================================================

   ⭐ ONE SHAPE FOR EVERY IRREVERSIBLE DECISION. Four screens asked the same
   question four different ways: a centred card with a red "Are you sure?"
   (entry, person), a warning box with a bulleted schema (account), and an
   amber alert above a four-row table including a device hash (token). Each
   ended in a FILLED RED button and a button called "Cancel".

   ⛔ WHAT CHANGED, AND WHY IT IS NOT DECORATION:

   1. **The loss is stated in her own terms, first.** "This action cannot be
      undone" describes the mechanism. "847 entries, 23 people, 512 days of
      writing" describes what she is about to lose. Only one of those is a
      thing a person can weigh.

   2. **"Cancel" became "Keep it".** ⛔ "Cancel" is ambiguous on a
      confirmation screen — it can read as cancelling the THING as easily as
      cancelling the decision, and it is the button that should be easiest to
      pick. Naming the outcome removes the ambiguity: `Keep it`, `Leave it
      on`.

   3. **The destructive button is outlined, not filled** — see
      `components/buttons.css`, where `.btn-danger` itself changed. A filled
      red block is the loudest thing on the page, which makes the loud path
      the obvious one. Outlined still reads as danger; it just stops
      shouting.

   ⚠️ The three colours here are all `--danger`. That is deliberate — this
   component may not invent a red.
   ========================================================================= */

.confirm {
    max-width: 520px;
    /* ⚠️ The page-header these screens used to carry supplied the top space.
       Without it the question sat flush against the top of the content area. */
    margin: var(--space-lg) auto 0;
}

/* The question, set as a question. No eyebrow, no "Are you sure?" above it:
   the heading IS the thing being asked. */
.confirm__question {
    margin: 0 0 var(--space-sm);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text-color);
}

/* What she is deleting, named. */
.confirm__subject {
    margin: 0 0 var(--space-lg);
    font-size: var(--text-lg);
    color: var(--text-color);
}

.confirm__subject-meta {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* ⭐ THE LOSS, IN HER OWN NUMBERS. This is the block that replaced a bulleted
   schema listing "API tokens and notifications" beside "All journal
   entries" as though those weighed the same. */
.confirm__loss {
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    border-left: var(--border-width-lg) solid var(--danger);
    background: var(--background-hover);
    border-radius: 0 var(--border-radius-sm) var(--border-radius-sm) 0;
}

/* ⭐ FIGURES, not prose. Numbers carry at this weight; a paragraph of
   someone's own writing set in bold `--text-lg` shouts it back at them, which
   is the opposite of what the entry-delete page is trying to do. */
.confirm__loss-figures {
    margin: 0 0 var(--space-2xs);
    font-size: var(--text-lg);
    font-weight: 600;
    color: var(--text-color);
}

/* Her own words, set the way she wrote them: reading type, normal weight. */
.confirm__loss-quote {
    margin: 0 0 var(--space-xs);
    font-size: var(--text-base-sm);
    line-height: 1.65;
    color: var(--text-color);
}

.confirm__loss-note {
    margin: 0;
    font-size: var(--text-md);
    line-height: 1.6;
    color: var(--text-secondary);
}

/* What survives. ⭐ A confirmation that only lists losses is not honest —
   most of these leave something behind, and saying so is what lets someone
   decide rather than flinch. */
.confirm__keeps {
    margin: 0 0 var(--space-lg);
    padding-left: var(--space-md);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-secondary);
}

.confirm__keeps li {
    margin-bottom: var(--space-2xs);
}

/* ⭐ THE WAY OUT, OFFERED BEFORE THE WAY THROUGH. On account deletion the
   export is the one action that makes the decision reversible, so it sits
   above the form rather than in a settings page she has already left. */
.confirm__escape {
    display: block;
    margin: 0 0 var(--space-lg);
    padding: var(--space-md);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius-sm);
    text-decoration: none;
    color: var(--text-color);
}

.confirm__escape:hover {
    border-color: var(--primary);
}

.confirm__escape-title {
    display: block;
    font-weight: 600;
}

.confirm__escape-note {
    display: block;
    margin-top: var(--space-2xs);
    font-size: var(--text-md);
    color: var(--text-muted);
}

/* ⛔ THE SAFE ONE IS FIRST IN THE DOM. Not only visually — keyboard order and
   screen-reader order reach "Keep it" before the destructive button. */
.confirm__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding-top: var(--space-md);
    border-top: var(--border-width) solid var(--border-color);
}

.confirm__actions .btn {
    min-height: 44px;
}

@media (max-width: 480px) {
    /* Full-width and stacked, so neither is the one your thumb happens to
       land on. */
    .confirm__actions {
        flex-direction: column;
        align-items: stretch;
    }
}