/* Account pages (Verify email, Approve device, Delete account, Verify
   identity): the home page's green and gold look. Loaded after
   /seventeenth/styles.css, which supplies the colours (--deep, --green,
   --tan, --ink …), the header (.vault-nav), the footer (.vault-footer) and
   the hex background. Only the account page pieces live here. */

.account-page{position:relative;z-index:1;min-height:calc(100vh - 72px);padding:72px 0 96px}
.account-shell{width:min(720px,calc(100% - 40px));margin-inline:auto}

/* Header: "Back to site" stays visible on phones (the home page hides .cta). */
.account-back{
  display:inline-flex;align-items:center;gap:8px;margin-left:auto;min-height:40px;padding:0 16px;
  border:1px solid rgba(232,212,168,.35);border-radius:12px;color:var(--tan);
  font:800 12px/1 var(--sans);transition:background .2s,border-color .2s;
}
.account-back:hover{background:rgba(232,212,168,.08);border-color:rgba(232,212,168,.6)}

/* Heading block */
.account-kicker{
  display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;
  color:var(--tan);font:800 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;
}
.account-kicker .sigil{display:grid;place-items:center;width:28px;height:28px;border:1px solid currentColor;border-radius:8px;font-size:12px}
.account-page h1{margin:0;color:var(--ink);font-size:clamp(38px,5.4vw,60px);line-height:1.02;letter-spacing:-.055em}
.account-page h1 em{color:var(--tan);font-family:var(--serif);font-style:italic;font-weight:400}
.account-intro{max-width:620px;margin:20px 0 34px;color:var(--muted);font-size:18px;line-height:1.6}

/* Card */
.account-card{
  padding:28px;border:1px solid var(--line);border-radius:22px;
  background:linear-gradient(160deg,rgba(13,107,85,.42),rgba(6,40,32,.92));
  box-shadow:var(--shadow);
}
.account-card + .account-card,.account-card + .account-note{margin-top:16px}
.account-card p{margin:0;color:rgba(244,239,228,.78);line-height:1.6}
.account-card p + p{margin-top:12px}
.account-card h2{margin:0 0 8px;color:var(--ink);font-size:22px;letter-spacing:-.03em}
.account-card strong{color:var(--ink)}

/* Device row (Verify email, Approve device) */
.account-device{
  display:flex;align-items:center;gap:14px;margin:0 0 18px;padding:14px 16px;
  border:1px solid rgba(232,212,168,.22);border-radius:16px;background:rgba(3,28,23,.55);
}
.account-device img{border-radius:10px}
.account-device strong{display:block;color:var(--ink);font-size:17px;overflow-wrap:anywhere}
.account-device span{color:var(--tan);font:700 12px/1.4 var(--sans);letter-spacing:.04em}

/* Buttons */
.account-actions{display:grid;gap:10px;margin-top:20px}
.account-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:52px;padding:0 20px;overflow:hidden;border:0;border-radius:14px;
  background:linear-gradient(135deg,var(--tan-3),var(--tan-2));color:var(--ink-dark);
  font:800 15px/1 var(--sans);cursor:pointer;box-shadow:0 10px 28px rgba(212,184,122,.18);
  transition:transform .2s,box-shadow .25s,filter .2s;
}
.account-button:hover{transform:translateY(-1px);box-shadow:0 16px 34px rgba(212,184,122,.28)}
.account-button--quiet{
  background:transparent;border:1px solid rgba(232,212,168,.35);color:var(--tan);box-shadow:none;
}
.account-button--quiet:hover{background:rgba(232,212,168,.08);box-shadow:none}
.account-button--danger{background:#b42318;color:#fff;box-shadow:0 10px 28px rgba(180,35,24,.25)}
.account-button--danger:hover{box-shadow:0 16px 34px rgba(180,35,24,.35)}
.account-button:disabled{opacity:.6;cursor:wait;transform:none}
.account-button--inline{width:auto}

/* Messages */
.account-error{
  margin:0 0 16px;padding:12px 14px;border:1px solid rgba(255,138,122,.45);border-radius:12px;
  background:rgba(180,35,24,.18);color:#ffd9d3;
}
.account-ok{
  padding:18px;border:1px solid rgba(143,214,184,.45);border-radius:14px;
  background:rgba(18,134,106,.22);color:var(--mint);
}
.account-ok strong{color:#fff;font-size:17px}
.account-ok p{margin:8px 0 0;color:var(--mint)}

/* Numbered steps (help) */
.account-steps{display:grid;gap:22px;margin:0;padding:0;list-style:none}
.account-steps li{display:flex;gap:16px}
.account-steps li>span{
  display:grid;flex:0 0 32px;place-items:center;width:32px;height:32px;border-radius:50%;
  border:1px solid rgba(232,212,168,.45);background:rgba(232,212,168,.1);color:var(--tan);font:800 13px/1 var(--sans);
}
.account-steps strong{color:var(--ink);font-size:16px}
.account-steps p{margin:4px 0 0;color:var(--muted);font-size:14px}
.account-steps p strong{color:var(--ink);font-size:inherit}

/* Side note */
.account-note{
  padding:18px 20px;border-left:3px solid var(--tan-2);border-radius:0 14px 14px 0;
  background:rgba(232,212,168,.07);
}
.account-note strong{color:var(--tan);font-size:14px}
.account-note p{margin:4px 0 0;color:var(--muted);font-size:14px}
.account-support{margin-top:26px;color:var(--muted);font-size:14px}
.account-page a.account-link,.account-support a{color:var(--tan);font-weight:700;border-bottom:1px solid rgba(232,212,168,.35)}

/* Form (Delete account) */
.account-form label{display:block;margin:0 0 6px;color:var(--tan);font:800 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.account-form input{
  width:100%;margin:0 0 16px;padding:13px 14px;border:1px solid rgba(232,212,168,.28);border-radius:12px;
  background:rgba(3,28,23,.6);color:var(--ink);font:inherit;
}
.account-form input:focus{outline:none;border-color:var(--tan-2);box-shadow:0 0 0 3px rgba(212,184,122,.18)}

/* Confirm dialog (Delete account) */
.account-modal{display:none;position:fixed;inset:0;z-index:60;align-items:center;justify-content:center;background:rgba(1,12,9,.7);backdrop-filter:blur(6px)}
.account-modal.open{display:flex}
.account-modal__box{
  width:min(440px,calc(100% - 32px));padding:26px;border:1px solid var(--line);border-radius:20px;
  background:linear-gradient(160deg,#0d4f40,#062820);box-shadow:var(--shadow);
}
.account-modal__box h3{margin:0 0 8px;color:var(--ink);font-size:22px;letter-spacing:-.03em}
.account-modal__box p{margin:0;color:rgba(244,239,228,.78)}
.account-modal__actions{display:flex;gap:12px;margin-top:20px}
.account-modal__actions .account-button{flex:1}

@media(max-width:640px){
  .account-page{padding:48px 0 72px}
  .account-card{padding:22px}
  .account-intro{font-size:16px}
}

/* Space above a paragraph that follows a list or other block. */
.account-card .account-spaced{margin-top:16px}
.account-card .account-steps{margin-top:12px}