/* public/site.css: every server-rendered page on this platform.
 *
 * It reads public/tokens.css and NOTHING ELSE. No literal colour, no second type scale, no
 * spacing invented here: the page a stranger lands on and the app they land in are one design
 * or they are two products wearing one name. lib/render-shell.mjs carried its own eight
 * variables until this file existed, and they had already drifted from the app's (a warm
 * canvas out here, a cool one in there).
 *
 * WHAT LIVES HERE: the apex marketing pages, /signin, /pricing, the legal pages, the receipt
 * and refusal pages. lib/render-school.mjs adds the handful of rules a SCHOOL host needs on
 * top, because a creator's page wears their accent and not ours.
 *
 * THE TWO OPTIMIZER SELECTORS, .hero-headline and .cta-primary, are sized here and used only
 * on Paideia's own pages. The hub rewrites the textContent of whatever selector an experiment
 * names, which is the point on a marketing hero and a catastrophe on a certificate or a
 * creator's course title: those wear .cert-title and .page-title, which share the type rule
 * below and nothing else.
 */

* { box-sizing: border-box; }

html {
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: var(--fs-md);
  line-height: var(--lh-body);
}

a { color: var(--accent); }

a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible {
  outline: 3px solid var(--accent-ring);
  outline-offset: 2px;
}

/* The first thing in the tab order on every page. */
.skip-link {
  position: absolute;
  left: -999px;
  top: var(--sp-2);
  background: var(--surface);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.skip-link:focus { left: var(--sp-2); z-index: 10; }

/* ── Chrome ─────────────────────────────────────────────────────────────── */

.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.site-nav .brand {
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  font-size: 18px;
  letter-spacing: -0.01em;
  min-height: var(--target-min);
  display: inline-flex;
  align-items: center;
}
.site-nav .links { display: flex; gap: var(--sp-5); align-items: center; flex-wrap: wrap; }
.site-nav .links a {
  text-decoration: none;
  color: var(--text-secondary);
  min-height: var(--target-min);
  display: inline-flex;
  align-items: center;
}
.site-nav .links a[aria-current="page"] { color: var(--text); font-weight: 600; }

main {
  flex: 1;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--sp-8) var(--sp-6);
}

.site-footer {
  border-top: 1px solid var(--border);
  padding: var(--sp-6);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  background: var(--surface);
}
.footer-columns {
  max-width: var(--content-max);
  margin: 0 auto;
  display: grid;
  gap: var(--sp-6);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.footer-columns h2 {
  font-size: var(--fs-sm);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0 0 var(--sp-2);
}
.footer-columns ul { list-style: none; margin: 0; padding: 0; }
.footer-columns li { margin: 0 0 var(--sp-1); }
.footer-columns a {
  color: var(--text-muted);
  min-height: var(--target-min);
  display: inline-flex;
  align-items: center;
}
.footer-legal {
  max-width: var(--content-max);
  margin: var(--sp-6) auto 0;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--border);
}

/* ── Type ───────────────────────────────────────────────────────────────── */

/* ONE RULE, THREE NAMES. .hero-headline is Paideia's own and an experiment may rewrite it;
   .cert-title is a person's name on a credential and .page-title is a creator's course, and
   neither may ever be rewritten. Sharing the rule is what stops them drifting in SIZE while
   staying apart in what can reach them. */
.hero-headline,
.cert-title,
.page-title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  margin: 0 0 var(--sp-3);
  font-weight: 800;
}

h2 { font-size: var(--fs-lg); line-height: 1.25; letter-spacing: -0.01em; margin: 0 0 var(--sp-3); }
h3 { font-size: var(--fs-md); margin: 0 0 var(--sp-2); }

.lede {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  max-width: 60ch;
  margin: 0 0 var(--sp-6);
  line-height: 1.45;
}

.note { color: var(--text-secondary); margin: var(--sp-3) 0; }
.muted { color: var(--text-muted); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Sections ───────────────────────────────────────────────────────────── */

.hero { padding: var(--sp-6) 0 var(--sp-4); }
.section { padding: var(--sp-8) 0; border-top: 1px solid var(--border); }
.section:first-of-type { border-top: 0; }
.section-title { margin: 0 0 var(--sp-5); }
.reading { max-width: var(--reading-max); }

.grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-6);
  box-shadow: var(--shadow-card);
}
/* The sign-in card, and anything else that is one column of controls. */
.card-narrow { max-width: 480px; }
.card h3 { margin: 0 0 var(--sp-2); }
.card p { margin: 0; color: var(--text-secondary); }

/* ── Controls ───────────────────────────────────────────────────────────── */

.cta-primary,
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--sp-5);
  background: var(--accent-solid);
  color: var(--accent-contrast);
  border: 1px solid var(--accent-solid);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.cta-primary:hover,
.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.cta-secondary,
.btn-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--target-min);
  padding: 0 var(--sp-5);
  border: 1px solid var(--border-strong);
  color: var(--text);
  background: var(--surface);
  border-radius: var(--radius-sm);
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary[disabled],
.cta-primary[disabled],
.cta-secondary[disabled] { opacity: 0.6; cursor: default; }

/* A row of actions. The gap is the rule, never a margin on the control, so a single button
   is not carrying a left margin it did not ask for. */
.actions { display: flex; gap: var(--sp-3); align-items: center; flex-wrap: wrap; }
.actions-stack { display: flex; flex-direction: column; gap: var(--sp-3); }

/* ── Fields ─────────────────────────────────────────────────────────────── */

.field { margin: 0 0 var(--sp-4); }
.field label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 600;
  margin-bottom: var(--sp-1);
  color: var(--text);
}
.field input {
  width: 100%;
  min-height: var(--target-min);
  padding: 0 var(--sp-3);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.field-hint { font-size: var(--fs-sm); color: var(--text-muted); margin: var(--sp-1) 0 0; }

.block { width: 100%; }

/* The two quiet controls under the sign-in form: switching between signing in and creating an
   account, and asking for a reset.

   THEY ARE BUTTONS AND NOT LINKS, because neither one navigates. Both act on the form above
   them, and a person who middle-clicks a link expecting a new tab should not get a silent
   nothing. Styled as text so the form's own submit stays the one thing that looks pressable,
   and padded to the full touch target because an underlined word at 14px is not something a
   thumb can hit. */
.signin-alt {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-4);
  justify-content: space-between;
  margin: 0;
}
.link-button {
  background: none;
  border: 0;
  padding: var(--sp-2) 0;
  min-height: var(--target-min);
  color: var(--accent);
  font: inherit;
  text-align: left;
  text-decoration: underline;
  cursor: pointer;
}
.link-button:hover { color: var(--accent-hover); }
.link-button[disabled] { opacity: 0.6; cursor: default; text-decoration: none; }

/* A sentence that reports what just happened. Reserved height, so the page does not jump
   when it fills. */
.status-line {
  margin: var(--sp-4) 0 0;
  min-height: 1.5em;
  color: var(--text-secondary);
}

.divider {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: var(--sp-5) 0;
  color: var(--text-muted);
  font-size: var(--fs-sm);
}
.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

/* ── Disclosure, used for the FAQ. No JavaScript anywhere in it. ─────────── */

.faq { margin: 0; }
.faq details {
  border-bottom: 1px solid var(--border);
  padding: var(--sp-4) 0;
}
.faq summary {
  cursor: pointer;
  min-height: var(--target-min);
  display: flex;
  align-items: center;
  font-weight: 600;
  color: var(--text);
}
.faq details p { margin: var(--sp-3) 0 0; color: var(--text-secondary); max-width: 60ch; }

/* ── Pricing ────────────────────────────────────────────────────────────── */

.plan { display: flex; flex-direction: column; gap: var(--sp-3); }
.plan-price { font-size: var(--fs-lg); font-weight: 700; color: var(--text); }
.plan ul { margin: 0; padding-left: var(--sp-5); color: var(--text-secondary); }
.plan li { margin: 0 0 var(--sp-1); }

/* ── Prose, for the legal pages ─────────────────────────────────────────── */

.prose { max-width: var(--reading-max); }
.prose h2 { margin: var(--sp-7) 0 var(--sp-3); }
.prose p { margin: 0 0 var(--sp-4); color: var(--text-secondary); }
.prose ul { margin: 0 0 var(--sp-4); padding-left: var(--sp-5); color: var(--text-secondary); }

/* ── Phone ──────────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
  main { padding: var(--sp-6) var(--sp-4); }
  .site-nav { padding: var(--sp-3) var(--sp-4); }
  .section { padding: var(--sp-6) 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}