/* index.php, method.php, login.php, register.php, my-checks.php. */

/* check.php pins its own full-height layout. Everything else is short enough that the
   footer floated mid-screen without this. */
body {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

main.wrap { flex: 1 0 auto; }

.band {
  margin-top: clamp(2.4rem, 5vw, 4rem);
  padding-top: clamp(1.8rem, 4vw, 2.8rem);
  border-top: 1px solid var(--color-border-subtle);
}

.band > p { max-width: 62ch; }

.band h2 { margin-bottom: 1rem; }

.cta {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.85rem 1.6rem;
  background: var(--color-action);
  color: var(--color-action-text);
  font-weight: 600;
  border-radius: var(--radius-control);
  text-decoration: none;
  box-shadow: var(--shadow-control);
}

.cta:hover { background: var(--color-action-hover); color: var(--color-action-text); }
.cta:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }

.cta-secondary {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0.85rem 0.2rem;
  color: var(--color-text-link);
  font-weight: 600;
}

.hero { padding-top: 0.4rem; }

.hero h1 {
  max-width: 22ch;
  margin-bottom: 1.4rem;
  font-size: clamp(2rem, 5.4vw, 3.35rem);
  line-height: 1.06;
}

.hero .lede { max-width: 44ch; }

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.4rem;
  margin: 1.6rem 0 0;
}

.coast {
  margin: 2.2rem 0 0;
  padding: 0;
}

.coast svg {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-card);
}

.coast figcaption {
  max-width: 46ch;
  margin-top: 0.7rem;
  color: var(--color-text-muted);
  font-size: 0.82rem;
}

.pair {
  max-width: 34rem;
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.pair li {
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding: 0.9rem 0;
  border-top: 1px solid var(--color-border-subtle);
}

.pair-label {
  flex: 1 1 auto;
  order: 2;
  color: var(--color-text-muted-on-warm);
  font-size: 0.92rem;
}

.pair b {
  order: 1;
  min-width: 3rem;
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 2.6rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.pair i {
  order: 3;
  padding: 0.22rem 0.62rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-style: normal;
  font-weight: 700;
}

.pair .high { background: var(--color-negative-surface); color: var(--color-negative-text); }
.pair .low { background: var(--color-positive-surface); color: var(--color-positive); }

.pair-advice {
  max-width: 52ch;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--color-border-subtle);
}

.content-section { margin-top: clamp(2rem, 3.6vw, 3rem); }

.content-section > p { max-width: 70ch; }

.content-section h2 { margin-bottom: 0.9rem; }

.content-section h3 { margin: 1.6rem 0 0.5rem; font-size: 1.05rem; color: var(--color-text); }

.labelled-list,
.plain-list {
  margin: 1.25rem 0;
  padding: 0;
}

.labelled-list li,
.plain-list li { margin-bottom: 0.75rem; }

.labelled-list b {
  display: block;
  color: var(--color-text);
  font-size: 1.05rem;
}

.labelled-list span { display: block; color: var(--color-text-muted-on-warm); }

.data-list {
  max-width: 62rem;
  list-style: none;
}

.data-list li {
  margin: 0;
  padding: 0.8rem 0;
  border-top: 1px solid var(--color-border-subtle);
}

.data-list li:last-child { border-bottom: 1px solid var(--color-border-subtle); }

.limitation-list {
  padding-left: 1.25rem;
  color: var(--color-text-muted-on-warm);
}

.limitation-list li { margin-bottom: 0.4rem; }

.method-page { max-width: 74rem; }
.method-page .data-list span { font-size: 0.92rem; }

.method-head { max-width: 40rem; }
.method-head h1 { margin-bottom: 1rem; }

.method-body { margin-top: clamp(1.5rem, 4vw, 2.5rem); }

.method-toc {
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  background: var(--color-surface-sunken);
}

.method-toc h2 {
  margin-bottom: 0.6rem;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.method-toc ol {
  counter-reset: toc;
  margin: 0;
  padding: 0;
  list-style: none;
}

.method-toc li { display: flex; align-items: baseline; }

.method-toc li::before {
  counter-increment: toc;
  content: counter(toc);
  display: inline-block;
  width: 1.5rem;
  color: var(--color-text-muted);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
}

.method-toc a {
  display: inline-flex;
  align-items: center;
  flex: 1 1 auto;
  min-height: 44px;
  padding-right: 0.2rem;
  color: var(--color-text);
  font-size: 0.9rem;
  text-decoration: none;
}

.method-toc a:hover { color: var(--color-text-link); text-decoration: underline; }

.method-sections > .content-section:first-child { margin-top: 0; }

.content-section { scroll-margin-top: 1.5rem; }

.table-scroll { margin: 1.5rem 0; overflow-x: auto; }

.thresholds {
  width: 100%;
  min-width: 22rem;
  border-collapse: collapse;
  font-size: 0.94rem;
}

.thresholds caption {
  margin-bottom: 0.7rem;
  color: var(--color-text-muted);
  font-size: 0.84rem;
  text-align: left;
}

.thresholds th,
.thresholds td { padding: 0.5rem 0.8rem 0.5rem 0; text-align: left; vertical-align: baseline; }

.thresholds thead th {
  border-bottom: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.thresholds tbody th {
  padding-right: 1.4rem;
  color: var(--color-text);
  font-weight: 700;
}

/* The band rows read as one block per factor, so the rule goes above each factor rather
   than under every row. */
.thresholds tbody th[rowspan] { border-top: 1px solid var(--color-border); }
.thresholds tbody th[rowspan] ~ td { border-top: 1px solid var(--color-border); }

.thresholds td:last-child {
  width: 5rem;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

.narrow-column { max-width: 34rem; }

/* main is the growing flex child, and on these two pages main is also the card, so it was
   stretching to the viewport and leaving a hand span of empty paper under the last link.
   The footer takes the slack instead. */
main.auth-page { flex: none; }
body:has(.auth-page) > .footer { margin-top: auto; }

.auth-page {
  margin-top: clamp(1rem, 4vw, 3rem);
  margin-bottom: clamp(1rem, 4vw, 3rem);
  padding: clamp(1.25rem, 5vw, 2.5rem);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.auth-page h1 { margin-bottom: 0.8rem; }
.auth-page .lede { margin-bottom: 0.4rem; font-size: 1rem; }

/* The list is focused by hand after a failed sign in, and style.css only rings the
   controls, so the ring is set here rather than left to the browser default. */

.auth-alt { font-size: 0.95rem; }

.auth-alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

.auth-page > p:last-child { margin-bottom: 0; }

.auth-form { margin-top: 1.4rem; }
.auth-form p { margin-bottom: 1rem; }
.auth-form button { width: 100%; }

.saved-page { max-width: 58rem; }
.saved-page h1 { margin-bottom: 1rem; }

.saved-list {
  margin: 1.8rem 0 0;
  padding: 0;
  border-bottom: 1px solid var(--color-border-subtle);
  list-style: none;
}

.saved-list li {
  display: grid;
  gap: 0.4rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid var(--color-border-subtle);
}

.saved-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 0.7rem; margin: 0; }

.saved-score b {
  color: var(--color-text);
  font-family: var(--font-serif);
  font-size: 2.1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

.saved-scale { color: var(--color-text-muted); font-size: 0.8rem; }
.better { padding: 0.25rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-positive-surface); color: var(--color-positive); font-size: 0.78rem; font-weight: 700; }

.saved-detail { margin: 0; color: var(--color-text-muted-on-warm); font-size: 0.88rem; }
.saved-detail b { display: block; color: var(--color-text); font-size: 1rem; font-weight: 650; }
.saved-detail span { display: block; }

.saved-open { margin: 0; }
.saved-open a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

@media (min-width: 48rem) {
  .saved-list li {
    grid-template-columns: 7rem minmax(0, 1fr) auto;
    align-items: center;
  }

  .saved-score { flex-direction: column; align-items: flex-start; gap: 0.35rem; }
}

@media (min-width: 62rem) {
  .hero {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    column-gap: clamp(2.5rem, 5vw, 4.5rem);
    align-items: start;
  }

  .hero h1,
  .hero-body { grid-column: 1; }
  .hero h1 { font-size: clamp(2.4rem, 3.9vw, 3.5rem); }

  .coast { grid-column: 2; grid-row: 1 / span 2; margin: 0.5rem 0 0; }

  .method-body {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    column-gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }

  .method-toc { position: sticky; top: 1.5rem; }
}

@media (max-width: 420px) {
  .auth-page { border-radius: 16px; padding: 1.1rem; }
  .hero h1 { font-size: 1.85rem; }
}