/* ==========================================================================
   RUGBY AI DESIGN SYSTEM ("Night Session", September 2026)

   The single source for the site's look. Loaded on every page after styles.css, which is the
   older layer this one overrides. New visual work goes HERE, not into styles.css. The rules
   behind every choice are written up in docs/design/SYSTEM.md; read that before changing this.

   The idea: the site is a floodlit pitch at 9pm. Structure comes from the pitch (chalk lines, a
   touchline, a scoreboard), not from stacks of translucent cards.
     - Surfaces are solid steps of green. No glass, no backdrop blur on content.
     - Headlines are Archivo 800, sentence case. Anton is for numerals only.
     - Lists of things sit on chalk rules. A box is kept only for something that must read as one
       object (a tile you tap, a notice, a call to action).
     - Gold is light, used sparingly: the primary button, step numerals, the Ellis card rim.
     - Motion answers the reader or happens once. No hover lifts.

   Scoping: inner pages are body.home.inner, document pages (privacy, terms) are body.doc, the
   homepage is body.home.night and keeps its own layout in night.css.
   ========================================================================== */

:root {
  --pitch: #16231B;
  --turf: #22342A;
  --turf-edge: rgba(245, 245, 240, 0.42);
  --chalk-line: rgba(245, 245, 240, 0.55);
  --rule: rgba(245, 245, 240, 0.28);
  --muted: #A7B0A9;
  --cream: #EEE9DC;
  --ink: #0F1712;
  --ink-soft: #3B463F;
}

/* ---------- Header: the app icon, on every page ---------- */
.brand-app {
  gap: 0.65rem;
}

.brand-app img {
  width: 40px;
  height: 40px;
  border-radius: 22.5%;
  box-shadow: 0 0 0 1px rgba(245, 245, 240, 0.16);
}

.brand-app span {
  font-family: var(--body-font);
  font-weight: 800;
  font-size: 1.45rem;
  letter-spacing: -0.02em;
  line-height: 1;
}

/* ---------- Phones: one set of proportions at every size ---------- */
/* The case radius is a share of its own width; the screen reads the case's width through a
   container, so a 200px phone is the 340px hero phone scaled down, with no silver at the corners. */
.phone {
  container-type: inline-size;
  border-radius: 17.6% / 8%;
}

.phone-screen {
  border-width: 3cqi;
  border-radius: calc(17.6cqi - 3px);
}

.phone-screen img {
  border-radius: calc(14.6cqi - 3px);
}

/* ---------- Type on inner and document pages ---------- */
body.inner h1,
body.inner h2,
body.doc h1 {
  font-family: var(--body-font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.022em;
  line-height: 1.06;
  text-shadow: none;
}

body.inner .page-hero h1 {
  font-size: clamp(2.6rem, 5.6vw, 4.2rem);
  margin-bottom: 1.1rem;
}

body.inner main p,
body.inner main li {
  font-size: 1.0625rem;
  line-height: 1.6;
}

body.inner .page-hero .sub {
  font-size: 1.22rem;
  line-height: 1.55;
  max-width: 38rem;
  color: rgba(245, 245, 240, 0.9);
}

body.inner .kicker {
  font-family: var(--body-font);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: rgba(245, 245, 240, 0.72);
  margin-bottom: 0.8rem;
}

body.inner .crumbs {
  font-size: 0.9rem;
}

body.inner .crumbs a {
  text-underline-offset: 3px;
  display: inline-block;
  padding-block: 0.25rem;
}

body.inner .band {
  padding-top: 5.5rem;
}

body.inner .page-hero + .band {
  padding-top: 2.5rem;
}

body.inner .band-title h2,
body.inner .reject-copy h2,
body.inner .close h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -0.022em;
}

body.inner .close h2 {
  font-size: clamp(2.1rem, 4.2vw, 3.1rem);
}

body.inner .tagline {
  font-family: var(--body-font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.02em;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}

/* ---------- The glass kit is retired ---------- */
body.inner .glass {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

body.inner .glass-hover:hover {
  transform: none;
  box-shadow: none;
}

.cta-secondary,
body.doc .signup {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.inner .cta-secondary {
  background: rgba(15, 23, 18, 0.55);
  border-color: rgba(245, 245, 240, 0.45);
  box-shadow: none;
  min-height: 48px;
}

body.inner .cta-secondary:hover {
  transform: none;
  border-color: var(--chalk);
}

/* ---------- Sections on chalk rules (the default for a glass-card) ---------- */
body.inner .glass-card {
  border-top: 2px solid var(--chalk-line);
  padding: 1.3rem 0 0;
}

body.inner .glass-card h2,
body.inner .glass-card h3,
body.inner .skill-stack h2 {
  font-family: var(--body-font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.015em;
  font-size: 1.5rem;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

body.inner .glass-card p,
body.inner .glass-card li {
  color: rgba(245, 245, 240, 0.86);
}

body.inner .card-grid {
  gap: 2.6rem 2.8rem;
}

/* Step numbers are a real sequence, so they speak in Anton and gold, like the homepage steps. */
body.inner .glass-card .num {
  font-family: var(--display);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: 0;
  color: var(--gold);
  text-shadow: 0 0 24px rgba(224, 169, 62, 0.3);
  margin-bottom: 0.7rem;
}

/* ---------- Drill pages: a reading column on chalk rules ---------- */
body.inner .skill-stack {
  gap: 3rem;
  max-width: 46rem;
}

body.inner .skill-stack ul {
  list-style: none;
  padding: 0;
}

body.inner .skill-stack ul > li {
  position: relative;
  padding-left: 1.4rem;
}

body.inner .skill-stack ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.8em;
  width: 0.7rem;
  border-top: 2px solid var(--chalk-line);
}

/* The drill's steps: gold Anton numerals down the left, the same voice as the homepage steps. */
body.inner .skill-stack ol {
  list-style: none;
  padding: 0;
  counter-reset: step;
}

body.inner .skill-stack ol > li {
  counter-increment: step;
  position: relative;
  padding-left: 2.9rem;
  min-height: 2rem;
}

body.inner .skill-stack ol > li + li {
  margin-top: 0.9rem;
}

body.inner .skill-stack ol > li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -0.1rem;
  width: 2rem;
  text-align: center;
  font-family: var(--display);
  font-size: 1.7rem;
  line-height: 1;
  color: var(--gold);
}

/* ---------- Tiles: a box you tap (hub drills, guide families) ---------- */
body.inner a.glass-card {
  display: flex;
  flex-direction: column;
  background: var(--pitch);
  border-top: 2px solid var(--chalk-line);
  border-radius: 0 0 14px 14px;
  padding: 1.4rem 1.5rem 1.5rem;
  transition: background-color 160ms ease;
}

body.inner a.glass-card:hover,
body.inner a.glass-card:focus-visible {
  background: var(--turf);
}

body.inner a.glass-card:hover h2,
body.inner a.glass-card:focus-visible h2 {
  text-decoration: underline;
  text-underline-offset: 5px;
  text-decoration-thickness: 2px;
}

body.inner a.glass-card p {
  color: var(--muted);
}

body.inner .card-grid.two,
body.inner .card-grid.library {
  gap: 1.2rem;
}

body.inner .status {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: rgba(245, 245, 240, 0.72);
  margin-bottom: 0.7rem;
}

body.inner .status::before {
  content: "";
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  vertical-align: 0.05em;
  background: var(--muted);
}

body.inner .status.scored::before {
  background: var(--gold);
  box-shadow: 0 0 10px rgba(224, 169, 62, 0.6);
}

body.inner .status.counted::before {
  background: #9FB7A5;
}

body.inner .page-hero .status {
  margin: -0.2rem 0 1rem;
}

body.inner .drill-open {
  margin-top: auto;
  padding-top: 1rem;
  text-decoration: none;
  font-weight: 700;
}

body.inner .drill-open::after {
  content: "";
  display: block;
  width: 2.2rem;
  margin-top: 0.35rem;
  border-top: 2px solid var(--gold);
  transition: width 200ms ease;
}

body.inner a.glass-card:hover .drill-open::after,
body.inner a.glass-card:focus-visible .drill-open::after {
  width: 4.4rem;
}

/* ---------- Notice: the contact framing block, kept word for word ---------- */
body.inner .notice {
  background: var(--pitch);
  border-top: 0;
  border-left: 3px solid var(--cream);
  border-radius: 0 12px 12px 0;
  padding: 1.4rem 1.6rem;
}

body.inner .notice p {
  font-size: 1.1rem;
  color: var(--chalk);
}

/* ---------- The call to action inside a drill page ---------- */
body.inner .inline-cta {
  background: var(--turf);
  border: 1px solid rgba(224, 169, 62, 0.5);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  box-shadow: 0 0 36px rgba(224, 169, 62, 0.08);
}

/* ---------- About ---------- */
body.inner .founder-note .kicker {
  color: rgba(245, 245, 240, 0.72);
}

body.inner .founder-note h2 {
  font-size: clamp(2rem, 3.8vw, 2.8rem);
}

body.inner .founder-sig {
  border-top: 2px solid var(--chalk-line);
}

body.inner .score-line {
  font-family: var(--display);
}

/* ---------- Document pages (privacy, terms): styling only, never wording ---------- */
body.doc .page h1 {
  font-size: clamp(2.3rem, 5vw, 3.4rem);
  letter-spacing: -0.022em;
  line-height: 1.06;
}

body.doc .page h2,
body.doc .page h3 {
  font-family: var(--body-font);
  font-weight: 800;
  text-transform: none;
  letter-spacing: -0.012em;
  line-height: 1.25;
}

body.doc .page h2 {
  font-size: 1.4rem;
}

body.doc .page h3 {
  font-size: 1.15rem;
  font-weight: 700;
}

body.doc .page p,
body.doc .page li {
  font-size: 1.0625rem;
  line-height: 1.65;
  color: rgba(245, 245, 240, 0.84);
}

body.doc .policy-section {
  border-top: 2px solid var(--rule);
}

body.doc .page a {
  color: var(--chalk);
  text-underline-offset: 3px;
}

/* ---------- Footer tap targets ---------- */
.site-footer a {
  display: inline-block;
  padding-block: 0.4rem;
}

/* ---------- Phones ---------- */
@media (max-width: 840px) {
  .brand-app img {
    width: 34px;
    height: 34px;
  }

  .brand-app span {
    font-size: 1.25rem;
  }

  body.inner .page-hero,
  body.inner .page-hero > *,
  body.inner .reject-copy {
    text-align: left;
  }

  body.inner .page-hero > * {
    margin-left: 0;
    margin-right: 0;
  }

  body.inner .band {
    padding-top: 4rem;
  }

  body.inner .glass-card h2,
  body.inner .skill-stack h2 {
    font-size: 1.35rem;
  }

  body.inner .card-grid {
    gap: 2.2rem;
  }

  body.inner .card-grid.two,
  body.inner .card-grid.library {
    gap: 1rem;
  }

  body.inner .skill-stack {
    gap: 2.4rem;
  }
}