/* redesign-pages.css — the remaining Zyentora-branded pages.

   Covers four groups, all on Track A (ivory/bronze):
     1. Content + legal  — help, about, contact, privacy, terms, refund, shipping
     2. Apply            — become-a-reseller
     3. Auth             — reseller-login, reset-password
     4. Download         — the post-purchase delivery page

   Requires redesign-tokens.css and redesign-components.css, which already
   carry the nav, footer, buttons, inputs, focus states and empty/error states.

   ---------------------------------------------------------------------------
   FUNCTIONALITY THIS MUST NOT BREAK

   None of the JS on these pages is touched. Between them they own:
     - authentication (reseller-auth.js, reset-password.js)
     - the real reseller application, which writes to the `resellers` table
       (become-a-reseller.js — 37 element ids)
     - post-purchase delivery, which calls the get-download-link Edge Function
       (download.js)

   Every selector below styles markup that already exists. No id is renamed,
   no field is added or removed, no form action changes.
   --------------------------------------------------------------------------- */

/* ============================================================
   1. Content + legal pages
   ============================================================ */
.legal-hero {
  padding-block: var(--space-xl) var(--space-l);
  max-width: 64ch;
}
.legal-hero h1 { margin-bottom: var(--space-s); }
.legal-updated {
  margin: 0;
  font-size: var(--type-small);
  color: var(--color-text-secondary);
}

/* Long-form reading: a real measure and generous leading. These pages are
   read, not scanned. */
.legal-body {
  max-width: 72ch;
  padding-bottom: var(--section-pad);
  font-size: var(--type-body);
  line-height: 1.75;
}
.legal-body h2 {
  margin: var(--space-xl) 0 var(--space-s);
  font-size: var(--type-section);
  scroll-margin-top: 88px;      /* so in-page links don't land under the nav */
}
.legal-body h2:first-child { margin-top: 0; }
.legal-body h3 {
  margin: var(--space-l) 0 var(--space-xs);
  font-size: var(--type-card);
  scroll-margin-top: 88px;
}
.legal-body p { margin: 0 0 var(--space-m); }
.legal-body ul, .legal-body ol { margin: 0 0 var(--space-m); padding-left: var(--space-m); }
.legal-body li { margin-bottom: var(--space-xs); }
.legal-body a { color: var(--color-accent-dark); font-weight: var(--weight-medium); }
.legal-body strong { font-weight: var(--weight-semibold); }

/* Table of contents. Real 44px targets — these are the primary navigation on
   a long policy page. */
.legal-toc, .help-toc {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-bottom: var(--space-l);
  padding-bottom: var(--space-m);
  border-bottom: 1px solid var(--color-border);
}
.legal-toc a, .help-toc a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 var(--space-s);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: border-color var(--motion-base) var(--ease-out),
              color var(--motion-base) var(--ease-out);
}
.legal-toc a:hover, .help-toc a:hover {
  border-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

.legal-callout, .help-callout {
  margin: 0 0 var(--space-m);
  padding: var(--space-m);
  background: var(--color-accent-tint);
  border-radius: var(--radius-card);
  font-size: var(--type-body);
  line-height: 1.65;
}
.legal-callout p:last-child, .help-callout p:last-child { margin-bottom: 0; }

/* Worked fee example on the help page. */
.help-example {
  margin: 0 0 var(--space-m);
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.help-example-title {
  margin: 0 0 var(--space-s);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.help-table { width: 100%; border-collapse: collapse; font-size: var(--type-body); }
.help-table td {
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}
.help-table td:last-child {
  text-align: right;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.help-table-total td {
  border-bottom: 0;
  border-top: 2px solid var(--color-text-primary);
  padding-top: var(--space-s);
  font-weight: var(--weight-semibold);
}
.help-table-total td:last-child { color: var(--color-success-dark); }

/* Contact page. */
.contact-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-m);
  margin-bottom: var(--space-l);
}
.contact-email-highlight {
  display: block;
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  color: var(--color-text-primary);
  text-decoration: none;
  word-break: break-word;
}
.contact-email-highlight:hover { border-color: var(--color-accent-dark); }

/* ============================================================
   2. Apply — become-a-reseller
   ============================================================ */
.apply-intro { padding-block: var(--space-xl) var(--space-l); max-width: 62ch; }
.apply-intro h1 { margin-bottom: var(--space-s); }

/* A single-column form at a readable width. Wide form fields are harder to
   scan, not easier. */
.form-narrow { max-width: 560px; padding-bottom: var(--section-pad); }

.form-section {
  margin-bottom: var(--space-l);
  padding: var(--space-m);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
}
.form-section h2 {
  margin: 0 0 var(--space-s);
  font-family: var(--font-body);
  font-size: var(--type-card);
  font-weight: var(--weight-semibold);
  letter-spacing: 0;
}
.form-section > p { font-size: var(--type-body); color: var(--color-text-secondary); }
.form-section label { display: block; margin-bottom: var(--space-xs); font-size: var(--type-small); font-weight: var(--weight-medium); }
.form-section input,
.form-section select,
.form-section textarea { margin-bottom: var(--space-s); }

/* Platform + handle sit together; they are one answer, not two. */
.social-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }

.checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-s);
  padding: var(--space-xs) 0;
}
.checkbox-row input[type="checkbox"] {
  flex: none;
  width: 22px;
  height: 22px;
  min-height: 0;
  margin-top: 2px;
  accent-color: var(--color-accent-dark);
}
.checkbox-row label { margin: 0; font-size: var(--type-body); font-weight: var(--weight-regular); line-height: 1.55; }

/* Live availability feedback under the store-name field. */
.store-slug-preview {
  margin: calc(var(--space-s) * -1) 0 var(--space-s);
  padding: var(--space-xs) var(--space-s);
  background: var(--color-background);
  border-radius: var(--radius-input);
  font-size: var(--type-small);
  color: var(--color-text-secondary);
  word-break: break-all;
}
.field-status { margin: calc(var(--space-s) * -1) 0 var(--space-s); font-size: var(--type-small); }
.field-status[hidden] { display: none; }

.login-note {
  margin: var(--space-s) 0 0;
  font-size: var(--type-small);
  color: var(--color-text-secondary);
}
.login-toggle {
  background: none;
  border: 0;
  padding: 0;
  min-height: 44px;
  color: var(--color-accent-dark);
  font: inherit;
  font-size: var(--type-small);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  cursor: pointer;
}

.success-panel {
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}
.success-panel h2 { margin-bottom: var(--space-s); }

/* ============================================================
   3. Auth — login and password reset
   ============================================================ */
/* Deliberately centred and narrow: one task, nothing else on screen. */
.login-shell {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--space-l) var(--container-margin);
}
.login-card {
  width: 100%;
  max-width: 420px;
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
}
.login-logo {
  display: inline-flex;
  align-items: center;
  min-height: 44px;             /* was 43px — a link, so it needs a real target */
  margin-bottom: var(--space-m);
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
  text-decoration: none;
}
.login-heading { margin-bottom: var(--space-s); font-size: var(--type-section); }
.login-card label { display: block; margin-bottom: var(--space-xs); font-size: var(--type-small); font-weight: var(--weight-medium); }
.login-card input { margin-bottom: var(--space-s); }
.login-card .btn-primary { width: 100%; margin-top: var(--space-xs); }

/* Auth feedback is announced, not just coloured. */
.login-error {
  margin: var(--space-s) 0 0;
  padding: var(--space-s);
  border-radius: var(--radius-input);
  background: rgba(184, 74, 58, 0.10);
  color: var(--color-error);
  font-size: var(--type-small);
  line-height: 1.5;
}
.login-success {
  margin: var(--space-s) 0 0;
  padding: var(--space-s);
  border-radius: var(--radius-input);
  background: rgba(47, 125, 75, 0.12);
  color: var(--color-success-dark);
  font-size: var(--type-small);
  line-height: 1.5;
}
.login-error[hidden], .login-success[hidden] { display: none; }

/* ============================================================
   4. Download — the post-purchase delivery page
   ============================================================ */
/* The page a customer lands on straight after paying. Its job is to make the
   download obvious and the 24-hour limit impossible to miss. */
/* Column, not row. This wrapper holds TWO cards -- the download itself and
   the free-resources card beneath it -- and as a flex ROW they were laid out
   side by side, each squeezed to ~187px and running 49px off a 320px screen.
   This is the page a customer lands on straight after paying, so it has to be
   right on the narrowest phone. */
.download-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding-block: var(--space-xl);
}
.download-card,
.resources-card {
  width: 100%;
  min-width: 0;
  max-width: 560px;
  padding: var(--space-l);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-1);
  text-align: center;
}
.resources-card { margin: var(--space-l) auto 0; }

.download-icon,
.download-icon-error {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: var(--space-m);
  border-radius: var(--radius-pill);
  font-size: 30px;
}
.download-icon { background: rgba(47, 125, 75, 0.12); color: var(--color-success-dark); }
.download-icon-error { background: rgba(184, 74, 58, 0.10); color: var(--color-error); }

.download-eyebrow, .resources-eyebrow {
  margin: 0 0 var(--space-xs);
  font-size: var(--type-label);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-accent-dark);
}
.download-card h1, .download-card h2, .resources-card h2 { margin-bottom: var(--space-s); }

.download-subnote, .resources-subnote, .resources-note {
  margin: 0 0 var(--space-m);
  font-size: var(--type-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.download-btn.btn-primary,
.resources-btn { width: 100%; margin-bottom: var(--space-s); }
.resources-actions { display: grid;
  grid-template-columns: minmax(0, 1fr); gap: var(--space-xs); }

/* Stated before it becomes a support ticket. Amber tint with dark ink —
   never amber text, which fails contrast outright. */
.download-expiry-warning {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  margin: var(--space-m) 0 0;
  padding: var(--space-s);
  border-radius: var(--radius-input);
  background: rgba(197, 139, 27, 0.12);
  color: var(--color-warning-text);
  font-size: var(--type-small);
  line-height: 1.55;
  text-align: left;
}
.download-expiry-warning i { flex: none; font-size: 18px; }

.download-note {
  margin: var(--space-m) 0 0;
  font-size: var(--type-small);
  line-height: 1.55;
  color: var(--color-text-secondary);
}
.download-started-note {
  margin: var(--space-s) 0 0;
  font-size: var(--type-small);
  color: var(--color-success-dark);
  font-weight: var(--weight-medium);
}
.download-started-note[hidden] { display: none; }

/* This page carries the store footer rather than the full site footer, since
   the buyer arrived from a reseller's store, not from Zyentora. */
.store-footer {
  border-top: 1px solid var(--color-border);
  padding: var(--space-l) var(--container-margin) var(--space-m);
  text-align: center;
}
.store-footer p { margin: 0; color: var(--color-text-secondary); }
.store-footer p.store-footer-links { font-size: var(--type-small); line-height: 1.6; margin-bottom: var(--space-xs); }
.store-footer .store-footer-links a {
  display: inline-block;
  padding-block: 10px;
  color: var(--color-text-secondary);
  text-decoration: none;
}
.store-footer .store-footer-links a:hover { color: var(--color-text-primary); }
.store-footer p.store-footer-brand { font-size: var(--type-small); cursor: default; }

/* ============================================================
   Breakpoints
   ============================================================ */
@media (min-width: 640px) {
  .form-section { padding: var(--space-l); }
  .social-row { grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-s); }
  .contact-detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-card, .resources-card { padding: var(--space-xl); }
  .resources-actions { grid-auto-flow: column; justify-content: center; }
  .download-btn.btn-primary, .resources-btn { width: auto; min-width: 260px; }
}