/* ==========================================================================
   Account pages (v1.0): sign-in, account, Plus, alerts, chain, tracker, explainer. The pieces that belong to these pages alone.
   Linked from templates/pages/account/_base.html, after components.css. Everything the account shares with other pages (notice and toast, error state,
   skeleton, switch, ticket, price figure, list rows, link rows, key / value rows, summary rows, the danger button, the code field, the areas layout) is in
   components.css and layout.css and used through the macros.

   Rules kept (README sections 3 and 6): tokens only, no literal colour; 44px targets, 48px+ fields; the 3px focus ring is the global one (nothing here
   removes an outline); no motion at all (Q20); both themes (every colour below is a token that flips, or a colour-mix of tokens); NEW class names only,
   under the .acct- prefix, in templates/pages/account/.
   ========================================================================== */


/* ==========================================================================
   Layout helpers
   .acct-col     one readable column (explainer)
   .acct-narrow  the one-task pages (sign-in, delete account)
   ========================================================================== */
.acct-col{max-width:46rem}
.acct-col--wide{max-width:58rem}
.acct-narrow{max-width:30rem;margin-inline:auto}
@media (min-width:720px){.acct-narrow{padding-top:var(--space-6)}}
@media (min-width:960px){.acct-narrow{padding-top:var(--space-10)}}

.acct-kicker{margin:var(--space-4) 0 0;font-size:.78rem;font-weight:var(--fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--visnja-ink)}
.acct-kicker+.page-title{margin-top:var(--space-1)}
@media (min-width:720px){.acct-kicker{margin-top:var(--space-8)}}
.acct-back{margin:var(--space-1) 0 0 calc(-1 * var(--space-4))}


/* ==========================================================================
   Sign-in, delete account      macro: auth_head()
   App tile, serif title, one line of lead, then the form in a white panel. Left-aligned like every page title.
   ========================================================================== */
.acct-auth-head{display:grid;justify-items:start;gap:var(--space-3);margin:var(--space-4) 0 var(--space-5)}
.acct-auth-head .page-title{margin:0}
.acct-auth-head .lead b{color:var(--ink);overflow-wrap:anywhere}
.acct-form{display:grid;gap:var(--space-4)}
/* "Code did not arrive?" + resend + use a different e-mail */
.acct-aux{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-1) var(--space-3);margin-top:var(--space-1);color:var(--ink-2);font-size:.92rem;text-align:center}
.acct-aux p{flex:0 0 100%;margin:0}
.acct-aux form{display:contents}


/* ==========================================================================
   Alert card      macro: alert_card(r, href)
   The deal card's surface: pinned snapshot, name (a link to the product), the cheapest price today, and a foot with the
   switch and the delete action. Real values: the lowest chain and price come from the product record.
   ========================================================================== */
.acct-alerts{display:grid;gap:var(--space-3)}
.acct-alerts>li{display:flex}
.acct-alerts>li>.card{flex:1 1 auto;min-width:0}
.acct-alert{display:flex;flex-direction:column;gap:var(--space-3);padding:var(--space-4)}
.acct-alert__top{display:flex;align-items:center;gap:16px}
.acct-alert__top .snap{margin-left:4px}
.acct-alert__info{min-width:0}
.acct-alert__name{margin:0;font-size:1rem;font-weight:var(--fw-bold);line-height:1.3;color:var(--ink)}
.acct-alert__name a{display:inline-block;padding-block:12px;margin-block:-12px;color:inherit;text-decoration:none}
.acct-alert__name a:hover{color:var(--visnja-ink);text-decoration:underline;text-underline-offset:.2em}
.acct-alert__sub{margin:0;font-size:.84rem;color:var(--muted)}
.acct-alert__meta{margin:2px 0 0;font-size:.84rem;color:var(--muted)}
.acct-alert__meta b{color:var(--ink-2);font-weight:var(--fw-bold)}
.acct-alert__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0 var(--space-3);padding-top:var(--space-2);border-top:1px dashed var(--line)}
.acct-alert__foot form{margin:0}
.acct-alert__foot form:last-child{margin-inline:calc(-1 * var(--space-4))}   /* the ghost button's own 16px padding: its text sits on the content edge */


/* ==========================================================================
   Plans      macro: plan_card()
   ========================================================================== */
.acct-plans{display:grid;gap:var(--space-3);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.acct-plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}}
.acct-plan{display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-5)}
.acct-plan__name{margin:0;font-family:var(--serif);font-weight:var(--fw-regular);font-size:1.28rem;line-height:1.2;color:var(--ink)}
.acct-plan__trial{margin:0;font-size:.9rem;color:var(--ink-2)}
.acct-plan .btn{margin-top:var(--space-2)}

.acct-plus-head{padding-bottom:var(--space-2)}
.acct-plus-head .page-title{margin-bottom:var(--space-2)}


/* ==========================================================================
   Account page: identity
   ========================================================================== */
.acct-id{display:flex;align-items:center;gap:var(--space-3)}
.acct-id__icon{
  flex:0 0 auto;display:grid;place-items:center;width:44px;height:44px;border-radius:var(--radius-11);
  background:color-mix(in srgb,var(--visnja) 12%,var(--surface));color:var(--visnja-ink);
}
.acct-id__main{flex:1;min-width:0}
.acct-id__k{margin:0;font-size:.76rem;color:var(--muted)}
.acct-id__v{margin:0;font-weight:var(--fw-bold);color:var(--ink);overflow-wrap:anywhere}
.acct-id form{margin:0;flex:0 0 auto}

/* Delete confirmation */
.acct-warn{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:var(--radius-13);background:color-mix(in srgb,var(--danger) 8%,var(--surface));border:1px solid color-mix(in srgb,var(--danger) 32%,var(--line))}
.acct-warn__icon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:color-mix(in srgb,var(--danger) 14%,var(--surface));color:var(--danger)}
.acct-warn__body{min-width:0;padding-top:4px}
.acct-warn p{margin:0;font-weight:var(--fw-bold);color:var(--ink)}
.acct-bullets{margin:var(--space-2) 0 0;padding-left:var(--space-5);list-style:disc;color:var(--ink-2);font-size:.94rem}
.acct-bullets li+li{margin-top:var(--space-1)}
.acct-bullets li{overflow-wrap:anywhere}
.acct-form .field__error{margin-top:calc(-1 * var(--space-2))}


/* ==========================================================================
   Chain page
   ========================================================================== */
.acct-head{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-4)}
.acct-head .page-title{margin:0}
@media (min-width:720px){.acct-head{margin-top:var(--space-8)}}
.acct-stats{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--space-3) var(--space-8)}
.acct-stats .stat__v{font-size:1.5rem;font-weight:var(--fw-heavy)}


/* ==========================================================================
   Explainer      cards with a stamp
   ========================================================================== */
.acct-explain{display:grid;gap:var(--space-4);margin:var(--space-5) 0 var(--space-6);grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.acct-explain{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-5)}}
.acct-fact-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-5)}
.acct-fact-card__head{display:flex;align-items:center;gap:12px}
.acct-fact-card__icon{
  flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:var(--radius-11);
  background:color-mix(in srgb,var(--visnja) 12%,var(--surface));color:var(--visnja-ink);
}
.acct-fact-card__title{margin:0;font-family:var(--serif);font-weight:var(--fw-regular);font-size:1.2rem;line-height:1.2;color:var(--ink)}
.acct-fact-card__text{margin:0;color:var(--ink-2);font-size:.98rem}
.acct-stamp{
  display:inline-block;margin:0;padding:6px 14px;border-radius:var(--radius-11);
  background:color-mix(in srgb,var(--visnja) 9%,var(--surface));border:1px dashed color-mix(in srgb,var(--visnja) 40%,var(--line));
  color:var(--visnja-ink);font-size:1.6rem;font-weight:var(--fw-heavy);line-height:1.3;font-variant-numeric:tabular-nums;
}


/* ==========================================================================
   Forced colours (Windows high contrast): shapes that exist only as a fill get a border.
   ========================================================================== */
@media (forced-colors: active){
  .acct-stamp,.acct-warn{border:1px solid CanvasText}
}