/*
 * delete.css — the parts of /ritmi/delete-account the design does not draw
 * (RITMI prompt 115): the form's real controls, its field errors, the state
 * lines under the send button and the hidden honeypot. Hand-written, never
 * rewritten by the build (tools/build-ritmi.py makes the places, js/ritmi.js
 * fills them).
 *
 * Every value is the page's own: the card #0E1433, the field #070B24 and their
 * lavender hairlines, the text colours #F4F6FF / #E2E6FA / #A7B0DA / #7C86B8,
 * cyan #67E8F9 / #A5F3FC, the rose of the confirmation row and of the send
 * button (#FB7185, #E11D48 → #9F1239). System fonts only, every control at
 * least 44 px (the house rules).
 */

/* site.css's button reset (`.ritmi-root button` — no background, no border,
   no padding, inherited colour) outranks the classes of the drawn controls
   that became <button>s. Their drawn look, restated at the reset's weight:
   the design's chip() and sendStyle values, unchanged (the chips were a row of
   bare words on the page as built — 115 found it). */
.ritmi-root .reason-chip {
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(140, 160, 255, .2);
  background: #070B24;
  color: #A7B0DA;
  font-size: 13.5px;
  font-weight: 600;
  box-sizing: border-box;
}
.ritmi-root .reason-chip.is-on {
  border-color: #67E8F9;
  background: rgba(34, 211, 238, .13);
  color: #A5F3FC;
}

.ritmi-root .send-btn {
  width: 100%;
  min-height: 54px;
  border-radius: 16px;
  border: 1px solid rgba(140, 160, 255, .18);
  background: #131A3D;
  color: #6B76A8;
  font-size: 16.5px;
  font-weight: 800;
  text-align: center;
  box-sizing: border-box;
  cursor: not-allowed;
}
.ritmi-root .send-btn.is-ready {
  border-color: transparent;
  background: linear-gradient(90deg, #E11D48, #9F1239);
  box-shadow: 0 12px 30px rgba(225, 29, 72, .28);
  color: #FFFFFF;
  cursor: pointer;
}
.ritmi-root .send-btn[aria-busy="true"] { cursor: progress; opacity: .82; }
.send-btn:focus-visible, .reason-chip:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }

/* The confirmation: the drawn row is the <label> of a real checkbox. The box
   stays the drawn 22 px square; the input sits under it, invisible but
   focusable, and its state and focus paint the box. */
.confirm-row { position: relative; }
.confirm-input {
  position: absolute;
  width: 22px; height: 22px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}
.confirm-input:checked + .confirm-box { border-color: #FB7185; background: #FB7185; }
.confirm-input:checked + .confirm-box svg { opacity: 1; }
.confirm-input:focus-visible + .confirm-box { outline: 2px solid #67E8F9; outline-offset: 3px; }

/* A field's own error, under its hint, tied to it with aria-describedby. */
.delete-error {
  margin: 0;
  color: #FDA4AF;
  font-size: 13.5px;
  line-height: 1.5;
  font-weight: 600;
}
.delete-form [aria-invalid="true"] { border-color: #FB7185 !important; }

/* The states, under the send button: one live region that is always in the
   page (so a screen reader announces what appears in it); empty, it gives the
   card's 16 px gap back. */
.delete-status { display: flex; flex-direction: column; gap: 6px; }
.delete-status.is-empty { margin-top: -16px; }
.delete-status [hidden], .delete-error[hidden], .delete-form [hidden] { display: none !important; }
.delete-state {
  margin: 0;
  color: #FDA4AF;
  font-size: 13.5px;
  line-height: 1.55;
  font-weight: 600;
  text-align: center;
}
.delete-state--sending { color: #A7B0DA; font-weight: 400; }
.delete-state--already { color: #A5F3FC; }
.delete-state--sent {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(103, 232, 249, .35);
  background: rgba(34, 211, 238, .08);
  text-align: left;
}
.delete-state--sent:focus { outline: none; }
.delete-state--sent:focus-visible { outline: 2px solid #67E8F9; outline-offset: 3px; }
.delete-sent__title { color: #A5F3FC; font-size: 15.5px; font-weight: 700; }
.delete-sent__body { color: #A7B0DA; font-size: 14px; line-height: 1.55; font-weight: 400; }

/* Without JavaScript: the form cannot send — the line says where to go instead
   (the direct address under the button, the in-app route beside the form). */
.delete-noscript {
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(251, 191, 36, .28);
  background: rgba(251, 191, 36, .07);
  color: #E2E6FA;
  font-size: 14px;
  line-height: 1.55;
}

/* The honeypot (099): a field no person sees or reaches; a bot that fills it is
   answered like anyone and nothing is stored. */
.delete-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}