/* Delete Account (ACCOUNT_DELETION_CONTRACT.md).
 * .gj-acctdel*        the public /account/delete/ page (inside the auth stage, gj-auth-stage.css)
 * .gj-acctdel-card*   the danger card in Settings > Account (inside .gj-set, settings-workspace.css)
 * .gj-acctdel-dialog* its confirm dialog (a .gj-set-dialog)
 * Destructive actions use the shared danger token; persona accents stay on neutral surfaces.
 * Motion is transform/opacity only and is switched off under prefers-reduced-motion. */

.gj-acctdel,
.gj-acctdel-card,
.gj-acctdel-dialog {
  --ad-danger: var(--theme-danger, #b42318);
  --ad-danger-strong: #b42318;
  --ad-on-danger: #fff;
  --ad-danger-soft: color-mix(in srgb, var(--ad-danger) 9%, var(--theme-surface, #fff));
  --ad-danger-line: color-mix(in srgb, var(--ad-danger) 28%, var(--theme-line, #e3e8ee));
  --ad-warning: var(--theme-warning, #a36d0b);
  --ad-warning-soft: color-mix(in srgb, var(--ad-warning) 10%, var(--theme-surface, #fff));
  --ad-ink: var(--theme-ink, #17202a);
  --ad-muted: var(--theme-muted, #667085);
  --ad-line: var(--theme-line, #e3e8ee);
  --ad-surface: var(--theme-surface, #fff);
  --ad-elevated: color-mix(in srgb, var(--ad-surface) 86%, var(--theme-canvas, #f3f6f8));
}
[data-bs-theme="dark"] :is(.gj-acctdel, .gj-acctdel-card, .gj-acctdel-dialog) {
  /* Light danger tint in dark mode: dark ink on it keeps contrast. */
  --ad-danger-strong: var(--theme-danger, #ff8f86);
  --ad-on-danger: #2a0907;
  --ad-danger-soft: color-mix(in srgb, var(--ad-danger) 13%, var(--theme-surface, #171d24));
  --ad-danger-line: color-mix(in srgb, var(--ad-danger) 38%, var(--theme-line, #35404c));
  --ad-warning-soft: color-mix(in srgb, var(--ad-warning) 14%, var(--theme-surface, #171d24));
  --ad-elevated: #1d252e;
}

/* ---------------- Public page ---------------- */
.gj-acctdel .gj-acctdel__danger {
  color: var(--ad-on-danger);
  background: linear-gradient(135deg, var(--ad-danger-strong), color-mix(in srgb, var(--ad-danger-strong) 78%, #7a1d4f));
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--ad-danger-strong) 75%, transparent);
}
[data-bs-theme="dark"] .gj-acctdel .gj-acctdel__danger,
[data-bs-theme="dark"] .gj-acctdel .gj-acctdel__danger:hover {
  color: var(--ad-on-danger);
  background: linear-gradient(135deg, var(--ad-danger-strong), color-mix(in srgb, var(--ad-danger-strong) 80%, #f5b0c8));
  box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--ad-danger-strong) 60%, transparent);
}
.gj-acctdel .gj-acctdel__danger:hover { color: var(--ad-on-danger); box-shadow: 0 18px 34px -14px color-mix(in srgb, var(--ad-danger-strong) 85%, transparent); }
/* The stage reveal animation pins opacity, so the disabled look changes the fill instead. */
.gj-acctdel .gj-acctdel__danger:disabled,
[data-bs-theme="dark"] .gj-acctdel .gj-acctdel__danger:disabled {
  color: color-mix(in srgb, var(--ad-danger-strong) 70%, var(--ad-ink));
  background: color-mix(in srgb, var(--ad-danger-strong) 14%, var(--ad-surface));
  box-shadow: inset 0 0 0 1px var(--ad-danger-line); cursor: not-allowed; transform: none;
}
.gj-acctdel .gj-acctdel__danger:disabled::after { display: none; }
.gj-acctdel .gj-acctdel__danger:focus-visible { outline-color: color-mix(in srgb, var(--ad-danger-strong) 55%, transparent); }

/* The stage column scrolls with a max height; these blocks must keep their full height inside it. */
.gj-acctdel .gj-stage__main > * { flex-shrink: 0; }
.gj-acctdel__form { display: grid; gap: 1rem; }
.gj-acctdel .gj-acctdel__reason { min-height: 4.5rem; resize: vertical; }
.gj-acctdel .gj-acctdel__phrase { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.gj-acctdel .gj-acctdel__phrase::placeholder { letter-spacing: .12em; opacity: .55; }
.gj-acctdel__small { display: flex; align-items: baseline; gap: .4rem; margin: 0; color: var(--ad-muted); font-size: .78rem; line-height: 1.45; }
.gj-acctdel__hint { display: flex; align-items: flex-start; gap: .5rem; margin: 0; color: var(--ad-ink); font-size: .86rem; }
.gj-acctdel__hint i { color: var(--app-context); }

/* Status card: the pending banner with Cancel. */
.gj-acctdel__status {
  position: relative; display: grid; gap: 1rem; padding: 1.15rem 1.2rem; overflow: hidden;
  background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 18px;
  box-shadow: 0 1px 2px rgb(16 24 40 / .05), 0 16px 34px -18px rgb(16 24 40 / .3);
}
.gj-acctdel__status::before {
  position: absolute; inset: 0 0 auto; height: 4px; content: "";
  background: linear-gradient(90deg, var(--ad-tone, var(--ad-danger)), color-mix(in srgb, var(--ad-tone, var(--ad-danger)) 40%, var(--app-context-glow, #5fe0cf)));
}
.gj-acctdel__status[data-status="on_hold"] { --ad-tone: var(--ad-warning); }
.gj-acctdel__status[data-status="completed"],
.gj-acctdel__status[data-status="cancelled"] { --ad-tone: var(--theme-success, #207a45); }
.gj-acctdel__status-head { display: flex; align-items: flex-start; gap: .85rem; }
.gj-acctdel__status-head p { margin: .45rem 0 0; color: var(--ad-ink); font-size: .92rem; line-height: 1.5; }
.gj-acctdel__status-icon {
  display: inline-grid; flex: 0 0 2.75rem; width: 2.75rem; height: 2.75rem; place-items: center; font-size: 1.25rem;
  color: var(--ad-tone, var(--ad-danger)); background: color-mix(in srgb, var(--ad-tone, var(--ad-danger)) 12%, var(--ad-surface)); border-radius: 14px;
  animation: gj-acctdel-pulse 2.4s ease-in-out infinite;
}
.gj-acctdel__pill {
  display: inline-flex; align-items: center; gap: .4rem; padding: .2rem .65rem;
  color: var(--ad-tone, var(--ad-danger)); background: color-mix(in srgb, var(--ad-tone, var(--ad-danger)) 11%, var(--ad-surface));
  border: 1px solid color-mix(in srgb, var(--ad-tone, var(--ad-danger)) 32%, transparent); border-radius: 999px;
  font-size: .76rem; font-weight: 850;
}
.gj-acctdel__pill i { font-size: .45rem; }
.gj-acctdel__facts { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; padding: .8rem .9rem; background: var(--ad-elevated); border: 1px solid var(--ad-line); border-radius: 14px; }
.gj-acctdel__fact { display: grid; gap: .1rem; }
.gj-acctdel__fact span { color: var(--ad-muted); font-size: .7rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.gj-acctdel__fact strong { font-size: 1.05rem; font-weight: 850; font-variant-numeric: tabular-nums; }
.gj-acctdel__countdown { display: inline-flex; align-items: center; gap: .4rem; color: var(--ad-ink); font-size: .86rem; font-weight: 800; }
.gj-acctdel__countdown i { color: var(--ad-tone, var(--ad-danger)); }
.gj-acctdel__cancel { margin: 0; }

/* Notices: refused, identity provider. */
.gj-acctdel__notice {
  display: flex; align-items: flex-start; gap: .75rem; padding: .9rem 1rem;
  color: var(--ad-ink); background: var(--ad-warning-soft); border: 1px solid color-mix(in srgb, var(--ad-warning) 30%, transparent);
  border-radius: 14px; box-shadow: inset 3px 0 0 var(--ad-warning);
}
.gj-acctdel__notice[data-tone="info"] {
  background: color-mix(in srgb, var(--app-context) 8%, var(--ad-surface));
  border-color: color-mix(in srgb, var(--app-context) 28%, transparent); box-shadow: inset 3px 0 0 var(--app-context);
}
.gj-acctdel__notice > i { color: var(--ad-warning); font-size: 1.15rem; }
.gj-acctdel__notice[data-tone="info"] > i { color: var(--app-context); }
[data-bs-theme="dark"] .gj-acctdel__notice[data-tone="info"] > i { color: var(--app-context-glow); }
.gj-acctdel__notice strong { font-size: .9rem; font-weight: 850; }
.gj-acctdel__notice p { margin: .2rem 0 0; color: var(--ad-muted); font-size: .84rem; line-height: 1.45; }
.gj-acctdel__options { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.gj-acctdel__option {
  display: inline-flex; align-items: center; gap: .4rem; min-height: 2.35rem; padding: .4rem .85rem;
  color: var(--ad-ink); background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: 10px;
  font-size: .82rem; font-weight: 800; text-decoration: none; transition: transform .16s ease, border-color .16s ease;
}
.gj-acctdel__option:hover { color: var(--ad-ink); border-color: var(--app-context); transform: translateY(-1px); }

/* What happens: the three steps and what the employer keeps. */
.gj-acctdel__explain { display: grid; gap: .85rem; padding-top: .35rem; border-top: 1px dashed var(--ad-line); }
.gj-acctdel__explain h2 { margin: .6rem 0 0; font-size: 1rem; font-weight: 850; }
.gj-acctdel__timeline { position: relative; display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.gj-acctdel__timeline::before { position: absolute; top: .9rem; bottom: .9rem; left: .95rem; width: 2px; content: ""; background: linear-gradient(var(--app-context), var(--ad-danger)); opacity: .35; }
.gj-acctdel__timeline li { position: relative; display: flex; align-items: flex-start; gap: .75rem; }
.gj-acctdel__timeline strong { font-size: .86rem; font-weight: 850; }
.gj-acctdel__timeline p { margin: .1rem 0 0; color: var(--ad-muted); font-size: .82rem; line-height: 1.45; }
.gj-acctdel__dot {
  position: relative; display: inline-grid; flex: 0 0 1.9rem; width: 1.9rem; height: 1.9rem; place-items: center;
  color: var(--app-context); background: var(--ad-surface); border: 1px solid color-mix(in srgb, var(--app-context) 35%, var(--ad-line)); border-radius: 50%;
  font-size: .85rem;
}
[data-bs-theme="dark"] .gj-acctdel__dot { color: var(--app-context-glow); }
.gj-acctdel__timeline li:last-child .gj-acctdel__dot { color: var(--ad-danger); border-color: var(--ad-danger-line); }
.gj-acctdel__kept { display: flex; align-items: flex-start; gap: .7rem; padding: .85rem .95rem; background: var(--ad-elevated); border: 1px solid var(--ad-line); border-radius: 14px; }
.gj-acctdel__kept > i { color: var(--ad-muted); font-size: 1.05rem; }
.gj-acctdel__kept strong { font-size: .86rem; font-weight: 850; }
.gj-acctdel__kept p { margin: .2rem 0 0; color: var(--ad-muted); font-size: .8rem; line-height: 1.45; }

/* ---------------- Settings card ---------------- */
.gj-set .gj-acctdel-card {
  position: relative; overflow: hidden;
  background: linear-gradient(180deg, var(--ad-danger-soft), var(--ad-surface) 62%);
  border-color: var(--ad-danger-line);
}
.gj-set .gj-acctdel-card::before { position: absolute; inset: 0 auto 0 0; width: 3px; content: ""; background: var(--ad-danger); }
.gj-acctdel-card__eyebrow { display: block; color: var(--ad-danger-strong); font-size: .66rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.gj-acctdel-card__steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin: 0; padding: 0; list-style: none; }
.gj-acctdel-card__steps li {
  display: flex; align-items: flex-start; gap: .65rem; padding: .7rem .75rem;
  background: var(--ad-surface); border: 1px solid var(--ad-line); border-radius: .75rem;
  transition: transform .18s ease, box-shadow .18s ease;
}
.gj-acctdel-card__steps li:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -14px rgb(16 24 40 / .35); }
.gj-acctdel-card__steps i {
  display: inline-grid; flex: 0 0 1.9rem; width: 1.9rem; height: 1.9rem; place-items: center;
  color: var(--ad-danger); background: var(--ad-danger-soft); border: 1px solid var(--ad-danger-line); border-radius: .6rem; font-size: .9rem;
}
.gj-acctdel-card__steps span { display: grid; gap: .1rem; color: var(--ad-muted); font-size: .76rem; line-height: 1.4; }
.gj-acctdel-card__steps strong { color: var(--ad-ink); font-size: .8rem; font-weight: 850; }
.gj-acctdel-card__kept { display: flex; align-items: flex-start; gap: .6rem; margin: 0; color: var(--ad-muted); font-size: .78rem; line-height: 1.45; }
.gj-acctdel-card__kept strong { color: var(--ad-ink); }
.gj-acctdel-card__kept i { margin-top: .1rem; }
.gj-acctdel-card__public { margin-right: auto; }

/* ---------------- Dialog ---------------- */
.gj-acctdel-dialog .gj-set-dialog__head {
  background: radial-gradient(60% 140% at 100% 0%, color-mix(in srgb, var(--ad-danger) 14%, transparent), transparent 70%);
}
.gj-acctdel-dialog .gj-acctdel-dialog__icon {
  color: var(--ad-on-danger);
  background: linear-gradient(135deg, var(--ad-danger-strong), color-mix(in srgb, var(--ad-danger-strong) 70%, var(--st-accent2, #e6bd5c)));
  box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--ad-danger-strong) 60%, transparent);
}
.gj-acctdel-dialog__loading { display: flex; align-items: center; gap: .6rem; margin: 0; color: var(--ad-muted); font-size: .86rem; }
.gj-acctdel-dialog__spinner { width: 1rem; height: 1rem; border: 2px solid var(--ad-line); border-top-color: var(--ad-danger); border-radius: 50%; animation: gj-acctdel-spin .7s linear infinite; }
.gj-acctdel-dialog__timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.gj-acctdel-dialog__timeline li { display: grid; gap: .35rem; padding: .65rem .7rem; background: var(--ad-elevated); border: 1px solid var(--ad-line); border-radius: .7rem; }
.gj-acctdel-dialog__timeline li > span {
  display: inline-grid; width: 1.45rem; height: 1.45rem; place-items: center;
  color: var(--ad-on-danger); background: var(--ad-danger-strong); border-radius: 50%; font-size: .72rem; font-weight: 900;
}
.gj-acctdel-dialog__timeline strong { display: block; font-size: .78rem; font-weight: 850; }
.gj-acctdel-dialog__timeline small { display: block; color: var(--ad-muted); font-size: .72rem; line-height: 1.4; }
.gj-acctdel-dialog .gj-acctdel-dialog__phrase { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; text-transform: uppercase; }
.gj-acctdel-dialog__options { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .6rem; }
.gj-acctdel-dialog__sso { margin-top: .55rem; }
.gj-acctdel-dialog .gj-set-dialog__foot .gj-set__btn[data-tone="danger"]:disabled { opacity: .5; }

@keyframes gj-acctdel-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes gj-acctdel-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .gj-acctdel *, .gj-acctdel-card *, .gj-acctdel-dialog * { animation: none !important; transition: none !important; }
}

@media (max-width: 760px) {
  .gj-acctdel-card__steps, .gj-acctdel-dialog__timeline { grid-template-columns: minmax(0, 1fr); }
  .gj-acctdel-dialog__timeline { gap: .4rem; }
  .gj-acctdel-dialog__timeline li { grid-template-columns: auto minmax(0, 1fr); align-items: start; column-gap: .6rem; padding: .55rem .65rem; }
  .gj-acctdel-card .gj-set__card-foot { flex-direction: column-reverse; align-items: stretch; }
  .gj-acctdel-card__public { margin: 0 auto; }
  .gj-acctdel__facts { flex-direction: column; align-items: flex-start; }
}