/* ============================================================================
   BetterBreaks — account page
   Loaded by account.html only. Reuses site.css tokens and the pricing page's
   platform-card vocabulary (.req, .notify) so the two read as one family.
   ========================================================================== */

.acct-muted{color:var(--ink-muted)}

/* ---------- head: avatar + name ---------- */
.acct-who{display:flex;align-items:center;gap:var(--s5);margin-top:var(--s3)}
.acct-avatar{
  width:64px;height:64px;border-radius:50%;flex:none;
  background:var(--mint) center/cover no-repeat;border:2px solid var(--line);
  display:grid;place-items:center;font:700 var(--fs-xl)/1 var(--display);color:var(--forest);
}
.acct-who h1{font-size:var(--fs-h1-page);margin:0}
.acct-who .lede{margin-top:var(--s2);font-size:var(--fs-body)}
.acct-dot{color:var(--sage);padding:0 var(--s1)}
@media (max-width:560px){
  .acct-who{align-items:flex-start}
  .acct-avatar{width:52px;height:52px}
}

/* ---------- forest band with the cards ---------- */
.acct-grid-band{padding-top:var(--s7)}
.acct-flash{
  margin:0 0 var(--s5);padding:var(--s3) var(--s4);border-radius:var(--r-card);
  background:var(--mint);color:var(--forest);font-weight:500;font-size:var(--fs-md);
}
.acct-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:var(--s5)}
@media (max-width:1023px){ .acct-grid{grid-template-columns:1fr 1fr} .acct-plan{grid-column:1 / -1} }
@media (max-width:760px){ .acct-grid{grid-template-columns:1fr} }

.acct-card{
  background:rgba(255,255,255,.055);border:1px solid var(--forest-line);
  border-radius:var(--r-media);padding:var(--s6);
  display:flex;flex-direction:column;gap:var(--s4);color:var(--on-forest);
}
.acct-card h2{font-size:var(--fs-h3);color:var(--on-forest);margin:0}
.acct-card .req{font-size:var(--fs-md);color:var(--on-forest-muted);margin:0}

/* plan */
.acct-plan-name{font:700 var(--fs-3xl)/1 var(--display);letter-spacing:-0.03em;margin:0}
.acct-plan-note{font-size:var(--fs-md);color:var(--on-forest-muted);margin:0}
.acct-upgrade{margin-top:auto;align-self:flex-start}

/* redeem a code */
.acct-redeem{display:flex;flex-direction:column;gap:var(--s2)}
.acct-redeem-label{font-size:var(--fs-sm);color:var(--on-forest-muted)}
.acct-redeem-row{display:flex;gap:var(--s2)}
.acct-redeem input{
  flex:1;min-width:0;min-height:var(--tap);padding:0 var(--s4);border-radius:var(--r-pill);
  border:1px solid var(--forest-line);background:rgba(255,255,255,.06);color:var(--on-forest);
  font:500 var(--fs-sm)/1 var(--body);letter-spacing:.04em;text-transform:uppercase;
}
.acct-redeem input::placeholder{text-transform:none;letter-spacing:0;color:var(--on-forest-muted)}
.acct-redeem input:focus{outline:none;border-color:var(--mint)}
.acct-redeem .btn{padding:0 var(--s5);min-height:var(--tap);font-size:var(--fs-sm)}
.acct-redeem-msg{margin:0;font-size:var(--fs-sm);color:var(--amber)}
.acct-redeem-msg.is-ok{color:var(--mint)}

/* downloads */
.acct-dl-top{display:flex;align-items:center;gap:var(--s4)}
.acct-dl-top svg{width:30px;height:30px;color:var(--mint);flex:none}
.acct-steps{margin:0;padding-left:var(--s5);font-size:var(--fs-sm);line-height:1.55;color:var(--on-forest-muted)}
.acct-steps li{margin-bottom:var(--s2)}
.acct-steps li::marker{color:var(--sage);font-weight:600}
.acct-dl .notify{margin-top:auto;align-self:flex-start}
.acct-version{font-size:var(--fs-xs);color:var(--on-forest-muted);margin:0}
/* the platform whose download just started */
.acct-dl.is-active{border-color:var(--mint);box-shadow:0 0 0 1px var(--mint) inset}
.acct-dl.is-active .acct-steps{color:var(--on-forest)}

/* ---------- foot: sign out, delete ---------- */
.acct-foot{padding-top:var(--s7)}
.acct-actions{
  display:flex;align-items:center;justify-content:space-between;gap:var(--s5);
  padding:var(--s5) 0;border-top:1px solid var(--line);
}
.acct-actions:last-child{border-bottom:1px solid var(--line)}
.acct-actions h2{font-size:var(--fs-h3);margin:0 0 var(--s2)}
.acct-actions .prose{margin:0;font-size:var(--fs-md)}
.acct-actions .btn{flex:none}
@media (max-width:640px){ .acct-actions{flex-direction:column;align-items:flex-start} }