/* ==========================================================================
   web/src/styles/pages/delete-account.css

   The one rule this page needs beyond the secondary-page shell: the register break between an
   instruction and a cross-reference into the Privacy Policy.

   THE ONE DELIBERATE BREAK ON THE PAGE (visual-rhythm rule 2, one property, applied once). The
   page's first two groups, the in-app route and the written route, are plain instructions in the
   page's primary ink, same as every other secondary page's body copy. The last two groups each
   carry one sentence the copy deck already marks Legal rather than Utility
   (web/content/copy-deck.md Part 7, del.what.p2 and del.consent.p1): a cross-reference to the
   Privacy Policy's own retention table, and the voice-consent-withdrawal equivalence. Those two
   sentences alone take the page's secondary ink, so the break reads as a register the deck already
   drew rather than as a new one invented for the page, and it only reads as a break because the
   two groups above it are plain first (visual-rhythm rule 2, "the regular field it departs from
   must be visibly regular first, above the thing that breaks it").

   Nothing else on this page needs its own rule: the masthead, the reading column, the two grouping
   steps and the one lit button all come from web/src/styles/page.css and web/src/styles/
   components.css unchanged.

   THE EMAIL BUTTON MUST BE ALLOWED TO BREAK. `contact@hotpot.dating` is a single unbreakable
   token about 360px wide; `.button` (components.css) sets no overflow-wrap, so a flex item's
   automatic min-width is that token's min-content, which is wider than the 358px `.page-actions`
   row gets at a 390 or 320px viewport once the root text size is raised to 200%. The row then
   forces the whole page 38 to 108px past the viewport edge rather than letting the address wrap
   onto its own line. Scoped here rather than in components.css or page.css because this is the
   one page whose lit button's label is a long unbreakable address; every other `.button` on the
   site carries a short label that never approaches this width.

   Connected files:
     - web/src/pages/delete-account.html   (the one page this loads for)
     - web/src/styles/page.css             (the shell this sits beside, never edited here)
     - web/src/styles/components.css       (.button, .button--primary, never edited here)
     - web/src/styles/tokens.css           (--hotpot-text-secondary, the only value spent here)
     - web/content/copy-deck.md            (Part 7, the Legal/Utility split this reflects)
   ========================================================================== */

.page-actions > .button {
  min-width: 0;
  overflow-wrap: break-word;
  /* MATTE, NOT LIT. The shared .button--primary face is the warm lit one, "press this first". The
     founder took it off this page (founder call, 2026-09-04, Pin, in the founder-nudge thread
     1788329584.269439 at 1788530872, read there first-hand: "Delete button should stay matt.";
     web/DECISIONS.md D126), so this page's one control wears the quiet ceramic face the app gives
     a pressable thing that is not first: the inactive-capacity recipe, frame and inner, and its
     shadow. The class on the markup is .button alone; nothing here reaches components.css. */
  border: var(--frame-width) solid transparent;
  background:
    var(--surface-inactive-inner) padding-box,
    var(--surface-inactive-frame) border-box;
  box-shadow: var(--shadow-inactive);
  color: var(--hotpot-text-primary);
}

/* The address never breaks inside itself: at a raised text size the label wraps between "Email"
   and the address, and the address stays one piece (the standards pass read "Email /
   contact@hotpot.da / ting" at 200 percent before the span existed). */
.del-address {
  white-space: nowrap;
}