/* ==========================================================================
   Account — /account
   --------------------------------------------------------------------------
   Linked only from dist/pages/account-shell.html, the frame the build renders
   from templates/partials and src/lib/accounts-api.js fills with the sign-in
   form or the account panel.

   No new colour value is introduced. Every surface, ink and border is one of
   the theme tokens the other 1,600 pages already define (DESIGN.md §1.1), or a
   color-mix() of two of them - the same trick blog-reading.css and fan-art.css
   use so one sheet reads correctly in both palettes.

   Contrast on the light palette: body ink #2d3436 on the page #f5f6fa is
   12.4:1; --text-light #636e72 on #f5f6fa is 4.9:1 (AA for text); the primary
   button's white label on --primary-color clears AA; the focus ring is the page
   ink rather than --secondary-color, because #00cec9 measures 1.9:1 on the light
   page - a ring a low-vision reader cannot see.

   Layout: one column on a phone, the two plans side by side once there is room,
   every control a 44px target, logical properties throughout so dir="rtl"
   mirrors the page without an entry in rtl.css.
   ========================================================================== */

.account {
  max-width: 40rem;
  margin-inline: auto;
  padding: 1.5rem 1rem 3rem;
}

.account-crumbs { margin: 0 0 .75rem; font-size: .9rem; color: var(--text-light); }
.account-crumbs a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }
.account-crumbs a:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }
.account-crumbs span { margin-inline: .35rem; }

.account h1 { margin: 0 0 1rem; font-size: 1.75rem; line-height: 1.2; }

.account-card {
  margin-block-end: 1rem;
  padding: 1.25rem;
  background: var(--light-color);
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius);
}

.account-card h2 { margin: 0 0 .5rem; font-size: 1.15rem; }
.account-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.account-card p { margin: 0 0 .75rem; line-height: 1.55; }

.account-form { display: grid; gap: .5rem; }
.account-form label { font-weight: 600; }

.account-form input {
  min-height: 44px;
  padding: .5rem .75rem;
  font: inherit;
  color: var(--text-color);
  background: #fff;
  border: 1px solid color-mix(in oklab, var(--text-color) 35%, transparent);
  border-radius: var(--border-radius);
}

.account-form input:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }

.account-button {
  min-height: 44px;
  margin-block-start: .25rem;
  padding: .6rem 1.1rem;
  font: inherit;
  font-weight: 600;
  color: #fff;
  background: var(--primary-color);
  border: 2px solid var(--primary-color);
  border-radius: var(--border-radius);
  cursor: pointer;
}
.account-button:focus-visible { outline: 3px solid var(--text-color); outline-offset: 2px; }

/* The quiet variant is the secondary action (sign out, the non-featured plan).
   Ink on the page rather than white on a fill, so it stays AA without a second
   accent colour. */
.account-button--quiet {
  color: var(--text-color);
  background: transparent;
  border-color: color-mix(in oklab, var(--text-color) 35%, transparent);
}

.account-fine { font-size: .875rem; color: var(--text-light); }
.account-fine a { color: inherit; text-decoration: underline; text-underline-offset: .18em; }

.account-notice {
  margin: 0 0 .75rem;
  padding: .6rem .75rem;
  border-inline-start: 4px solid var(--text-color);
  border-radius: var(--border-radius);
  background: color-mix(in oklab, var(--text-color) 6%, transparent);
}
.account-notice--error { border-inline-start-color: var(--text-color); }
.account-notice--info { border-inline-start-color: var(--secondary-color); }

.account-plans { display: grid; gap: .75rem; margin-block-end: .75rem; }

/* One column on a phone; two once the viewport has room for both. */
@media (min-width: 34rem) {
  .account-plans { grid-template-columns: 1fr 1fr; }
}

.account-plan {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  padding: 1rem;
  border: 1px solid color-mix(in oklab, var(--text-color) 18%, transparent);
  border-radius: var(--border-radius);
}
.account-plan .account-button { margin-block-start: auto; }

.account-price { margin: 0; font-size: 1.5rem; font-weight: 700; }
.account-cadence { font-size: .9rem; font-weight: 400; color: var(--text-light); }

.account-email { margin: 0 0 .5rem; }
.account-status {
  margin: 0 0 1rem;
  padding: .6rem .75rem;
  border-radius: var(--border-radius);
  background: color-mix(in oklab, var(--text-color) 6%, transparent);
}
.account-status--on { border-inline-start: 4px solid var(--secondary-color); }