/* The deletion page's only stylesheet: varnethra.com's tokens (website/site/src/styles/site.css), fonts self-hosted beside it.
   Sign-in buttons follow the providers: Google's is GIS's own rendered button (outline, large, rectangular); Apple's is the white
   "Continue with Apple" button from Apple's HIG, drawn here at Google's height, corner and width so the two match. */
@font-face { font-family: "Cinzel"; src: url("/delete-account-cinzel.woff2") format("woff2"); font-weight: 400 900; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/delete-account-alegreya.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Alegreya Sans"; src: url("/delete-account-alegreya-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  color-scheme: dark;
  --night: #060b16; --navy: #0b1426; --navy-2: #12203a; --line: #2a3a5c;
  --gold: #d9b45a; --gold-hi: #f0d58a; --gold-lo: #8a6d2c;
  --ink: #f3e6c4; --muted: #b9ac8c; --red: #b3382d;
  --display: "Cinzel", Georgia, serif; --body: "Alegreya Sans", system-ui, sans-serif;
  --button: min(320px, 100%);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh; color: var(--ink); font: 18px/1.55 var(--body);
  background: radial-gradient(120% 60% at 50% 0%, #1a2a4f 0%, var(--navy) 45%, var(--night) 100%) fixed, var(--night);
  padding: 20px 16px 40px;
}
a { color: var(--gold-hi); text-underline-offset: 3px; }
a:hover { color: #fff3cf; }
:focus-visible { outline: 2px solid var(--gold-hi); outline-offset: 3px; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
h1, h2 { font-family: var(--display); font-weight: 700; letter-spacing: .04em; line-height: 1.2; color: var(--gold-hi); overflow-wrap: break-word; }
h1 { font-size: clamp(26px, 6.4vw, 44px); margin: 4px 0 14px; text-shadow: 0 2px 12px #000a; }
h2 { font-size: clamp(19px, 4.6vw, 23px); margin: 0 0 .6em; }

.top { max-width: 760px; margin: 0 auto 22px; text-align: center; }
.logo { display: block; width: clamp(168px, 46vw, 240px); height: auto; margin: 0 auto 6px; filter: drop-shadow(0 8px 22px #000c); }
.orn { display: flex; align-items: center; gap: 12px; max-width: 420px; margin: 0 auto; }
.orn::before, .orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold-lo), var(--gold), var(--gold-lo), transparent); }
.orn span { width: 10px; height: 10px; transform: rotate(45deg); border: 1px solid var(--gold); background: var(--navy); }

main { max-width: 680px; margin: 0 auto; display: grid; gap: 16px; }
.col { display: grid; gap: 16px; align-content: start; }
.card {
  background: linear-gradient(180deg, rgba(18, 32, 58, .92), rgba(11, 20, 38, .94)); border: 1px solid var(--line);
  border-radius: 12px; padding: 20px 18px; box-shadow: 0 18px 40px #0008, inset 0 1px 0 #ffffff0d;
}
.card.action { border-color: color-mix(in srgb, var(--gold) 45%, var(--line)); }

/* the three in-game steps, numbered in gold */
.steps { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps li { counter-increment: s; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; }
.steps li::before {
  content: counter(s); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  font: 700 16px/1 var(--display); color: var(--night); background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo)); margin-top: -1px;
}

/* what stays: gold diamonds */
.stays { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.stays li { position: relative; padding-left: 22px; }
.stays li::before { content: ""; position: absolute; left: 3px; top: .62em; width: 7px; height: 7px; transform: rotate(45deg); background: var(--gold); }

/* sign-in: Apple and Google stacked, centred, one width, one height */
#signin { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 18px 0 4px; }
#signin[hidden], #confirm[hidden], #apple[hidden] { display: none; }
#google { width: var(--button); min-height: 40px; display: flex; justify-content: center; }
#google:empty { min-height: 0; }
#google svg { width: 18px; height: 18px; } /* GIS's logo has no size of its own before its styles arrive */
#apple {
  position: relative; width: var(--button); height: 40px; padding: 0 44px; border: 0; border-radius: 4px; cursor: pointer;
  background: #fff; color: #000; display: inline-flex; align-items: center; justify-content: center;
  font: 500 16px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif; letter-spacing: -.01em;
}
#apple svg { position: absolute; left: 14px; top: 50%; width: 15px; height: 18px; margin-top: -10px; fill: #000; }
#apple:hover { background: #f2f2f2; }

/* confirm, deleting */
#confirm { margin-top: 16px; padding: 16px; border-radius: 10px; border: 1px solid #7a2b25; background: rgba(120, 30, 24, .22); }
#delete {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: var(--button); min-height: 48px; margin: 4px auto 0; padding: 0 22px;
  border: 1px solid #e0786d; border-radius: 8px; cursor: pointer; color: #fff; background: linear-gradient(180deg, #c8463a, var(--red) 60%, #8f2a22);
  font: 700 16px/1 var(--display); letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 2px 0 #0008, inset 0 1px 0 #ffffff40;
}
#delete:hover { filter: brightness(1.08); }
#delete:disabled { cursor: progress; filter: saturate(.6); }
#delete:disabled::before { content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #ffffff59; border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }

/* every answer the script writes: hidden while empty */
#status { margin: 16px 0 0; padding: 12px 14px; border-radius: 8px; border: 1px solid var(--gold-lo); border-left: 4px solid var(--gold); background: rgba(6, 11, 22, .6); font-weight: 700; color: var(--ink); }
#status:empty { display: none; }

.foot { max-width: 680px; margin: 24px auto 0; text-align: center; color: var(--muted); font-size: 16px; }

@media (min-width: 1024px) {
  body { padding: 32px 32px 56px; }
  .top { margin-bottom: 30px; }
  main { max-width: 1120px; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
  .col { gap: 20px; }
  .card { padding: 26px 28px; }
  .foot { max-width: 1120px; }
}
@media (prefers-reduced-motion: reduce) { #delete:disabled::before { animation: none; } }