/* Truely — auth pages.
   Sign-up, sign-in, account. Uses the editorial tokens from style.css.
   Visual reference: a single column of paper, generous whitespace,
   ink-and-rule chrome. No gradients, no shadows. */

/* =========================================================== AUTH FORMS */
.auth-container {
  max-width: 560px;
  padding-top: 28px;
  padding-bottom: 56px;
}
.auth-card {
  margin-top: 0;
}
.auth-form {
  display: grid;
  gap: 18px;
}
.auth-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.auth-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.auth-optional {
  text-transform: none;
  letter-spacing: 0;
  font-style: italic;
  color: var(--ink-soft);
  font-weight: 400;
  font-family: var(--font-display);
  font-size: 12px;
}
.auth-form input[type="text"],
.auth-form input[type="email"],
.auth-form select {
  width: 100%;
  font-size: 16px;
  padding: 13px 14px;
}
.auth-help {
  font-family: var(--font-display);
  font-size: 13px;
  font-style: italic;
  color: var(--ink-soft);
  margin: 0;
  line-height: 1.55;
}

.auth-checkbox-row {
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  /* Pads the row to ~44px tall so the whole label is the tap target on
     mobile, not just the 18px checkbox. */
  padding: 4px 0;
  min-height: 44px;
}
.auth-checkbox-row input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.auth-checkbox-row label {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 4px 0;
}

/* ----- Signup consent block (replaces the legacy single-line marketing
   checkbox). The form-note explains the no-marketing-emails policy and
   each consent-checkbox is a self-contained card with title + detail. */
.form-note {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0;
  padding: 14px 16px;
  border-left: 2px solid var(--accent);
  background: var(--accent-soft);
}
.form-note strong {
  color: var(--ink);
  font-style: normal;
  font-weight: 600;
}

.consent-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.consent-checkbox:hover { border-color: var(--ink-soft); }
.consent-checkbox:has(input:checked) {
  border-color: var(--accent);
  background: var(--accent-soft);
}
.consent-checkbox input[type="checkbox"] {
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.consent-text {
  display: grid;
  gap: 6px;
  font-family: var(--font-sans);
  font-size: 14px;
  min-width: 0;
}
.consent-title {
  font-weight: 500;
  color: var(--ink);
  font-size: 15px;
}
.consent-detail {
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.55;
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: 6px;
  min-height: 50px;
}
.auth-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.auth-error {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--accent-deep);
  background: var(--accent-soft);
  border: 1px solid var(--accent);
  padding: 10px 14px;
  border-radius: 0;
}

.auth-success {
  text-align: left;
}
.auth-success h2 {
  font-family: var(--font-display);
  font-size: 26px;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
}
.auth-success p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 14px;
}

.auth-alt {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-soft);
  text-align: center;
}
.auth-alt a {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
}
.auth-alt a:hover { text-decoration: underline; }

.auth-promise {
  text-align: center;
  margin-top: 24px;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-soft);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* =========================================================== ACCOUNT PAGE */

.account-hero {
  padding-bottom: 22px;
}
.account-hero-inner {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.account-id {
  display: flex;
  align-items: flex-start;
  gap: 22px;
  min-width: 0;
  flex: 1 1 auto;
}
.account-id-text {
  min-width: 0;
}
.account-avatar {
  width: 64px; height: 64px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFF;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 500;
  flex-shrink: 0;
  margin-top: 6px;
}
.account-hero h1 {
  margin: 8px 0 6px;
}
.account-byline {
  margin-top: 6px;
  font-size: clamp(14px, 1.3vw, 16px);
}
.account-signout {
  margin-top: 10px;
  flex-shrink: 0;
}
@media (max-width: 540px) {
  /* On phones, drop avatar + text + sign-out into one stacked block.
     The avatar shrinks slightly so the heading has room to breathe at 380px. */
  .account-hero-inner { gap: 14px; }
  .account-id { gap: 16px; }
  .account-avatar {
    width: 52px; height: 52px;
    font-size: 22px; margin-top: 4px;
  }
  .account-signout {
    margin-top: 0;
    align-self: flex-start;
  }
  .account-hero h1 {
    font-size: clamp(28px, 6vw, 36px);
    line-height: 1.1;
  }
}

.account-main {
  padding-top: 8px;
  padding-bottom: 64px;
}

/* ----- Stat strip ----- */
.account-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  margin: 14px 0 36px;
}
.account-stat-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 22px 22px;
  border-right: 1px solid var(--rule);
  min-width: 0;
}
.account-stat-tile:last-child { border-right: 0; }
.account-stat-tile .eyebrow {
  margin: 0;
  font-size: 10.5px;
}
.account-stat-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.3vw, 30px);
  font-weight: 500;
  color: var(--ink);
  line-height: 1.05;
  letter-spacing: -0.01em;
  word-break: break-word;
}
@media (max-width: 760px) {
  .account-stats {
    grid-template-columns: 1fr;
  }
  .account-stat-tile {
    border-right: 0;
    border-bottom: 1px solid var(--rule);
    padding: 16px 4px;
  }
  .account-stat-tile:last-child { border-bottom: 0; }
}

/* ----- Section heads (editorial framing on each tab pane) ----- */
.account-section-head {
  margin: 6px 0 22px;
  max-width: 720px;
}
.account-section-head .eyebrow {
  margin-bottom: 8px;
}
.account-section-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 10px;
  line-height: 1.1;
}
.account-section-lede {
  /* v3 May 2026: roman not italic, matching the rest of the site
     (`.section-head-left p`, `.page-hero .lede`, `.hero--rich .tagline`).
     Long lede paragraphs in italic Fraunces read as 1990s magazine on
     mobile; roman feels modern editorial. */
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}
.account-section-head-quiet h2,
.account-section-head-quiet .eyebrow,
.account-section-head-quiet .account-section-lede {
  color: var(--ink-soft);
}
.account-section-head-quiet h2 {
  color: var(--ink);
}

.account-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 28px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.account-tab {
  background: transparent;
  border: 0;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 16px 20px;
  position: relative;
  white-space: nowrap;
  transition: color 0.18s ease;
  scroll-snap-align: start;
}
.account-tab:hover { color: var(--ink); }
.account-tab.active { color: var(--ink); }
.account-tab.active::after {
  content: "";
  position: absolute;
  left: 20px; right: 20px;
  bottom: -1px;
  height: 2px;
  background: var(--accent);
}
.account-tab-danger { margin-left: auto; color: var(--accent-deep); }
.account-tab-danger.active { color: var(--accent); }
@media (max-width: 760px) {
  .account-tab-danger { margin-left: 0; }
}
.account-tab-content { animation: account-tab-fade 0.24s ease; }
@keyframes account-tab-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .account-tab-content { animation: none; }
}

.account-pane { display: none; }
.account-pane.active { display: block; }
.account-pane[hidden] { display: none !important; }

.account-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  background: var(--paper-tinted);
  padding: 22px 24px;
  border: 1px solid var(--rule);
  margin: 0;
}

/* ----- Watchlist ----- */
.watchlist-list { display: grid; gap: 0; }
.watchlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  background-image: none;
}
.watchlist-list .watchlist-item:last-child { border-bottom: 1px solid var(--rule); }
.watchlist-item-main {
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-width: 0;
  flex-wrap: wrap;
}
.watchlist-pc {
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  background-image: none;
}
.watchlist-pc:hover { color: var(--accent); background-image: none; }
.watchlist-label {
  font-family: var(--font-sans);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.watchlist-when {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
  letter-spacing: 0.04em;
}
.watchlist-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.watchlist-open {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 12px;
  background-image: none;
}
.watchlist-open:hover { color: var(--accent); background-image: none; }
.watchlist-remove {
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink-soft);
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 14px;
  cursor: pointer;
}
.watchlist-remove:hover { border-color: var(--accent); color: var(--accent); }
@media (max-width: 540px) {
  .watchlist-item { flex-direction: column; align-items: flex-start; }
  .watchlist-actions { width: 100%; justify-content: space-between; }
}

/* ----- Search history ----- */
.history-list { display: grid; gap: 0; }
.history-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 20px;
  border: 1px solid var(--rule);
  border-bottom: 0;
  text-decoration: none;
  color: var(--ink);
  background-image: none;
}
.history-list .history-item:last-child { border-bottom: 1px solid var(--rule); }
.history-item:hover { background: var(--paper-tinted); }
.history-pc {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.01em;
}
.history-when {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}

/* ----- Email preferences ----- */
.email-prefs {
  display: grid;
  gap: 0;
  border: 1px solid var(--rule);
}
.email-pref-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
}
.email-prefs .email-pref-row:last-child { border-bottom: 0; }
.email-pref-row input[type="checkbox"] {
  width: 18px; height: 18px;
  margin-top: 4px;
  accent-color: var(--accent);
  flex-shrink: 0;
}
.email-pref-row > span {
  display: grid; gap: 4px;
  font-family: var(--font-sans);
  font-size: 14px;
}
.email-pref-row strong {
  font-weight: 500;
  color: var(--ink);
}
.email-pref-help {
  color: var(--ink-soft);
  font-size: 13px;
  font-family: var(--font-display);
  font-style: italic;
  line-height: 1.55;
}
.email-prefs-status {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 4px 0;
  min-height: 16px;
}
.email-prefs-future {
  /* v3 May 2026: roman, matches the rest of the site polish. */
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 18px 4px 0;
  max-width: 620px;
}

/* ----- Data export (Privacy tab) ----- */
.account-export-card {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
  border: 1px solid var(--rule);
  background: var(--paper-tinted);
  padding: 22px 24px;
  margin-top: 8px;
}
.account-export-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 540px;
}
.account-export-text strong {
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: -0.005em;
  color: var(--ink);
}
.account-export-text span {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.55;
}
.account-export-status {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 12px 4px 0;
  min-height: 16px;
}
@media (max-width: 640px) {
  .account-export-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px;
  }
  .account-export-card .btn {
    width: 100%;
  }
}

/* ----- Delete account ----- */
.account-delete-card {
  border-top: 1px solid var(--rule);
  padding-top: 22px;
  margin-top: 8px;
}
.account-delete-btn {
  border-color: var(--accent-deep);
  color: var(--accent-deep);
}
.account-delete-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--accent-soft);
}
/* The "yes, delete" button inside the modal IS the destructive action — it
   needs the filled-red treatment, not the ghost outline above. */
.account-modal .account-delete-btn {
  background: var(--accent-deep);
  border-color: var(--accent-deep);
  color: #FFF;
}
.account-modal .account-delete-btn:hover {
  background: #6c2114;
  border-color: #6c2114;
  color: #FFF;
}
.account-modal .account-delete-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* ----- Delete confirmation modal ----- */
.account-modal {
  position: fixed; inset: 0;
  background: rgba(26, 22, 18, 0.55);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.account-modal[hidden] { display: none; }
body.modal-open { overflow: hidden; }
.account-modal-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  max-width: 460px; width: 100%;
  padding: 28px 28px 22px;
}
.account-modal-card .eyebrow {
  margin-bottom: 8px;
  display: block;
}
.account-modal-card h3 {
  font-family: var(--font-display);
  font-size: 28px;
  letter-spacing: -0.01em;
  margin: 0 0 14px;
  line-height: 1.1;
}
.account-modal-card p {
  color: var(--ink-soft);
  line-height: 1.65;
  margin: 0 0 14px;
}
.account-modal-prompt {
  font-family: var(--font-display);
  font-style: italic;
  margin: 0 0 8px !important;
}
.account-modal-prompt strong {
  font-style: normal;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 500;
}
.account-modal-input {
  width: 100%;
  font-family: var(--font-mono);
  font-size: 15px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--paper-tinted);
  margin-bottom: 18px;
}
.account-modal-input:focus {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.account-modal-actions {
  display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap;
}

/* =========================================================== HEADER AUTH SLOT */
/* New site-header tail: signed-out shows two CTAs; signed-in shows an
   avatar + dropdown. Matches the rest of the editorial nav. */
.nav-auth {
  display: inline-flex; align-items: center; gap: 12px;
  margin-left: 14px;
  font-family: var(--font-sans);
}
.nav-auth-link {
  /* v2 May 2026: matches the bolder .nav-links treatment so SIGN IN
     reads with the same presence as HOME / COVERAGE / ABOUT instead of
     fading into the paper.
     v3 May 2026: white-space:nowrap added — on the postcode report
     page the header has an inline "Another postcode..." search box
     squeezing horizontal space, which was wrapping "SIGN" and "IN"
     onto two lines. The CTA button beside it already had nowrap;
     the link did not. */
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 8px 4px;
  background-image: none;
  white-space: nowrap;
  transition: color 0.18s ease;
}
.nav-auth-link:hover { color: var(--accent); }
.nav-auth-cta {
  /* v2 May 2026: bumped weight to 600 to match the rest of the nav. */
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #FFF;
  background: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease;
}
.nav-auth-cta:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #FFF; }

/* v4 May 2026: outlined-pill companion to .nav-auth-cta. Same shape, same
   uppercase letterforms — just inverted colours so the secondary action
   (Sign in when signed-out; Sign out when signed-in) reads as a button
   rather than a faded text link. Hover fills with ink to feel deliberate
   without competing with the accent CTA next to it. */
.nav-auth-ghost {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 9px 16px;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.nav-auth-ghost:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

.nav-avatar-wrap { position: relative; }
.nav-avatar {
  width: 36px; height: 36px;
  border-radius: 999px;
  background: var(--accent);
  color: #FFF;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--accent);
  cursor: pointer;
}
.nav-avatar:hover { background: var(--accent-deep); border-color: var(--accent-deep); }

.nav-avatar-menu {
  position: absolute; top: 44px; right: 0;
  min-width: 200px;
  background: var(--paper);
  border: 1px solid var(--rule);
  padding: 6px 0;
  z-index: 60;
  display: none;
}
.nav-avatar-menu.open { display: block; }
.nav-avatar-menu a, .nav-avatar-menu button {
  display: block; width: 100%; text-align: left;
  background: transparent; border: 0;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
  padding: 10px 16px;
  text-decoration: none;
  cursor: pointer;
}
.nav-avatar-menu a:hover, .nav-avatar-menu button:hover {
  background: var(--paper-tinted);
}
.nav-avatar-menu hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 6px 0;
}

@media (max-width: 760px) {
  .nav-auth { display: none; }
  /* On mobile the nav-links drawer hosts the auth links inline. The
     classes auth-mobile-only / auth-mobile-cta below are emitted by
     the mobile flavour of the header injection.
     IMPORTANT: use :not([hidden]) so the JS-driven hidden attribute
     (which toggles signed-in vs signed-out items) actually wins —
     a plain "display: block !important" used to override [hidden]
     and showed every auth link at once regardless of session state. */
  .auth-mobile-only:not([hidden]) { display: block !important; }
  .auth-mobile-only[hidden] { display: none !important; }

  /* Auth pills inside the burger drawer. The default
     `.site-header .nav-links a` rule applies `padding: 16px 12px` and
     a bottom rule line, which fights with the pill shape. These
     more-specific overrides restore the pill geometry, centre the
     label, and replace the rule line with the pill's own border. */
  .site-header .nav-links a.nav-auth-cta,
  .site-header .nav-links a.nav-auth-ghost {
    display: block;
    text-align: center;
    border-radius: 999px;
    margin: 6px 0;
    padding: 13px 22px;
    font-size: 13px;
    width: 100%;
    box-sizing: border-box;
  }
  .site-header .nav-links a.nav-auth-cta {
    border-bottom: 1px solid var(--accent);
  }
  .site-header .nav-links a.nav-auth-ghost {
    border-bottom: 1px solid var(--ink);
  }
}
@media (min-width: 761px) {
  .auth-mobile-only { display: none !important; }
}

/* =============================================== CHECKOUT INTERSTITIAL */
/* Wraps the plan name + price in a single row at the top of the
   checkout card. Eyebrow + name on the left, price stacked on the right. */
.checkout-plan-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 0;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 18px;
}
.checkout-plan-name {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 4px 0 0;
}
.checkout-plan-price {
  text-align: right;
  white-space: nowrap;
}
.checkout-plan-amount {
  display: block;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 28px;
  letter-spacing: -0.015em;
  color: var(--ink);
}
.checkout-plan-period {
  display: block;
  margin-top: 2px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-soft);
}

/* Cooling-off waiver block — visually distinct from the plain plan row so
   the user can't miss that it's the thing they must explicitly tick. */
.checkout-waiver-card {
  margin: 24px 0;
  padding: 22px;
  background: var(--paper-tinted);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.checkout-waiver-card h3 {
  margin-top: 0;
  margin-bottom: 8px;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  letter-spacing: -0.005em;
}
.checkout-waiver-card p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin: 6px 0 12px;
}
.checkout-waiver-card .consent-checkbox {
  margin-top: 14px;
}

/* =============================================== ACCOUNT — SUBSCRIPTION */
/* Subscription tile shown on the account page. Mirrors the editorial
   tone of .account-export-card. */
.account-sub-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  border: 1px solid var(--rule);
  background: var(--paper);
  border-radius: 8px;
}
.account-sub-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.account-sub-row:last-of-type { border-bottom: 0; }
.account-sub-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
}
.account-sub-value {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink);
  text-align: right;
}
.account-sub-value strong { font-weight: 600; }
.account-sub-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.account-sub-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--paper-tinted);
  color: var(--ink-soft);
}
.account-sub-status.is-active   { background: #E6F0E2; color: #2F5A2A; }
.account-sub-status.is-canceling{ background: #F6E9D6; color: #7A5418; }
.account-sub-status.is-past-due { background: #F6D9D9; color: #813131; }
.account-sub-empty {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink-soft);
  margin: 8px 0 18px;
  line-height: 1.5;
}
.account-sub-history {
  margin-top: 24px;
}
.account-sub-history h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 18px;
  margin: 0 0 12px;
}
.account-sub-invoice-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13px;
}
.account-sub-invoice-row:last-of-type { border-bottom: 0; }
.account-sub-invoice-amount {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* =========================================================== DEVELOPER PANE
   API key management UI inside /account#developer. Reuses .account-* tokens
   for cards + labels; adds dev-* classes for the key list, reveal-once
   panel, and per-endpoint usage rows. */
.dev-card {
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 20px 22px;
  background: var(--paper);
  margin-bottom: 18px;
}
.dev-card-head { margin-bottom: 14px; }
.dev-card-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.005em;
  margin: 4px 0 6px;
  color: var(--ink);
}
.dev-card-lede {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.6;
  margin: 0;
}

.dev-mint-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: end;
  margin-top: 4px;
}
.dev-mint-form label {
  grid-column: 1 / -1;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-soft);
  margin-bottom: -4px;
}
.dev-mint-form input {
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 14.5px;
}
.dev-mint-form input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(216, 73, 42, 0.12);
}
@media (max-width: 600px) {
  .dev-mint-form { grid-template-columns: 1fr; }
}

.dev-reveal {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1.5px solid var(--accent);
  border-radius: 6px;
  background: var(--paper-tinted);
}
.dev-reveal-head {
  display: flex; flex-direction: column;
  gap: 4px; margin-bottom: 12px;
}
.dev-reveal-head strong {
  font-family: var(--font-sans);
  font-size: 14px; font-weight: 700;
  color: var(--ink);
}
.dev-reveal-head span {
  font-family: var(--font-sans);
  font-size: 13.5px;
  color: var(--ink-soft);
}
.dev-reveal-keyrow {
  display: flex;
  gap: 8px;
  align-items: center;
  background: var(--paper);
  border: 1px solid var(--rule);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 12px;
  overflow-x: auto;
}
.dev-reveal-keyrow code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13.5px;
  color: var(--ink);
  white-space: nowrap;
  flex: 1;
  user-select: all;
}
.dev-copy-btn,
.dev-dismiss-btn {
  font-family: var(--font-sans);
  font-size: 12.5px;
  padding: 7px 14px;
  flex-shrink: 0;
}
.dev-copy-btn.copied { color: #1F7A3D; border-color: #1F7A3D; }

.dev-keys-list { display: flex; flex-direction: column; gap: 10px; }

.dev-key-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 6px;
  background: var(--paper);
}
.dev-key-row.dev-key-revoked { opacity: 0.55; }
.dev-key-meta {
  display: flex; flex-direction: column;
  gap: 4px; min-width: 0;
}
.dev-key-name {
  font-family: var(--font-sans);
  font-size: 14.5px; font-weight: 600;
  color: var(--ink);
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}
.dev-key-prefix {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink-soft);
  background: var(--paper-tinted);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1px 7px;
}
.dev-key-tier {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  padding: 2px 8px;
  border: 1px solid currentColor;
  border-radius: 12px;
}
.dev-key-tier.dev-tier-revoked { color: var(--ink-soft); }
.dev-key-sub {
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.dev-key-actions {
  display: flex; gap: 8px; align-items: center;
}
.dev-key-revoke {
  padding: 6px 12px;
  font-size: 12.5px;
  color: #a3201f;
  border-color: #a3201f;
  background: transparent;
}
.dev-key-revoke:hover { background: #a3201f; color: #fff; }

.dev-usage-snapshot { display: flex; flex-direction: column; gap: 4px; }
.dev-usage-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-sans);
  font-size: 13.5px;
}
.dev-usage-row:last-child { border-bottom: 0; }
.dev-usage-endpoint {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  color: var(--ink);
}
.dev-usage-count {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  text-align: right;
  font-weight: 600;
}
.dev-usage-ok    { color: #1F7A3D; }
.dev-usage-fail  { color: #a3201f; }
.dev-usage-total {
  margin-top: 10px;
  padding-top: 12px;
  border-top: 2px solid var(--rule);
  font-weight: 700;
  font-size: 14px;
}