/* StatsTricks360 — styles for the home page.
   Loaded only by index.html; every section keeps its own stylesheet, and 404.html
   inlines its own because it is served from arbitrary depths. The palette is the
   one the sections already use, so the hub reads as part of the same site. */

:root {
  --ink:        #16233a;
  --ink-soft:   #46566f;
  --ink-faint:  #6b7a90;
  --blue:       #0f4c81;
  --blue-lit:   #1e7fbf;
  --blue-deep:  #0a3763;
  --green:      #0b7a5a;
  --ground:     #f4f6fa;
  --card:       #ffffff;
  --line:       #e3e9f2;
  --radius:     14px;
  --shadow:     0 1px 2px rgba(16, 36, 64, .04), 0 6px 18px rgba(16, 36, 64, .06);
  --shadow-up:  0 2px 6px rgba(16, 36, 64, .07), 0 16px 34px rgba(15, 76, 129, .14);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 22px; }

a { color: var(--blue-lit); }

:focus-visible {
  outline: 3px solid var(--blue-lit);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------ hero */

.hero {
  background:
    radial-gradient(1100px 380px at 78% -12%, rgba(255, 255, 255, .20), transparent 60%),
    linear-gradient(135deg, var(--blue-deep) 0%, var(--blue) 45%, var(--blue-lit) 100%);
  color: #fff;
  padding: 62px 0 0;
}

.brand {
  margin: 0;
  font-size: clamp(2.3rem, 6vw, 3.5rem);
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.1;
}

.brand .dot { color: #8fd0ff; }

/* "StatsTricks360" is 14 letters: on a phone, tighter spacing keeps it on one line. */
@media (max-width: 480px) {
  .brand { font-size: clamp(1.7rem, 8.4vw, 2.3rem); letter-spacing: .06em; }
}

.tagline {
  margin: 14px 0 0;
  font-size: clamp(1.02rem, 2.2vw, 1.22rem);
  font-weight: 600;
  color: #d6ecff;
  max-width: 46ch;
}

.lede {
  margin: 16px 0 0;
  max-width: 62ch;
  color: #cfe4f7;
  font-size: 1rem;
}

/* stat strip, sitting across the seam between hero and page */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  margin: 46px 0 -38px;
  box-shadow: var(--shadow);
}

.stat { background: var(--card); padding: 18px 14px; text-align: center; }
.stat b {
  display: block;
  font-size: 1.72rem;
  line-height: 1.15;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.stat span {
  display: block;
  margin-top: 3px;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--ink-faint);
  text-transform: uppercase;
}

/* ------------------------------------------------------------- structure */

/* main is also a .wrap, whose padding shorthand would otherwise win on specificity
   and reset the clearance the stat strip needs where it overhangs the hero. */
main.wrap { padding-top: 92px; }

section { margin-bottom: 62px; }

.section-head { margin-bottom: 22px; }

.section-head h2 {
  margin: 0;
  font-size: 1.42rem;
  color: var(--blue);
  letter-spacing: -.01em;
}

.section-head p {
  margin: 6px 0 0;
  color: var(--ink-soft);
  max-width: 68ch;
}

/* ------------------------------------------------------------ big cards */

.cards {
  display: grid;
  /* Four cards: two columns reads better than four cramped ones -- at 1280px
     the 4-across version made every card 254px wide and 638px tall. min()
     keeps a single column on a phone. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr));
  gap: 20px;
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 26px 22px;
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
  overflow: hidden;
}

.card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--blue) 0%, var(--blue-lit) 100%);
}

.card:hover,
.card:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-up);
  border-color: #c8dcf0;
}

.card .icon {
  width: 42px; height: 42px;
  color: var(--blue-lit);
  margin-bottom: 14px;
}

.card .kind {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-faint);
}

.card h3 {
  margin: 6px 0 10px;
  font-size: 1.3rem;
  color: var(--blue);
  letter-spacing: -.01em;
}

.card p { margin: 0 0 16px; color: var(--ink-soft); font-size: .95rem; }

.card .topics {
  margin: 0 0 18px;
  font-size: .84rem;
  color: var(--ink-faint);
  line-height: 1.7;
}

.card .foot {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: .84rem;
  font-weight: 600;
  color: var(--green);
}

.card .go { color: var(--blue-lit); white-space: nowrap; }
.card:hover .go { text-decoration: underline; }

/* --------------------------------------------------------- quick links */

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 9px 17px;
  text-decoration: none;
  color: var(--ink);
  font-size: .9rem;
  box-shadow: 0 1px 2px rgba(16, 36, 64, .04);
  transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.chip small { color: var(--ink-faint); font-size: .8rem; }

.chip:hover,
.chip:focus-visible {
  border-color: var(--blue-lit);
  color: var(--blue);
  transform: translateY(-1px);
}

/* ---------------------------------------------------------- principles */

.principles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 18px;
}

.principle {
  background: var(--card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue-lit);
  border-radius: 10px;
  padding: 18px 20px;
}

.principle h3 {
  margin: 0 0 6px;
  font-size: 1rem;
  color: var(--blue);
}

.principle p { margin: 0; font-size: .9rem; color: var(--ink-soft); }

/* -------------------------------------------------------------- footer */

footer {
  border-top: 1px solid var(--line);
  padding: 26px 0 50px;
  color: var(--ink-faint);
  font-size: .87rem;
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: baseline;
  justify-content: space-between;
}

footer b { color: var(--blue); letter-spacing: .1em; }

/* ------------------------------------------------- the home page's three columns */
/* Exams on the left, Topics A-Z in the middle, study material on the right.
   Between a phone and a wide screen the A-Z column spans the top, so the
   search box is never squeezed; a phone reads the three in source order. */

.home3 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
  grid-template-areas: "exams az study";
  gap: 26px;
  align-items: start;
  margin-bottom: 62px;
}
.home3 > section { margin-bottom: 0; min-width: 0; }
.col-exams { grid-area: exams; }
.col-az    { grid-area: az; }
.col-study { grid-area: study; }

.home3 .section-head { margin-bottom: 16px; }
.home3 .section-head h2 { font-size: 1.28rem; }
.home3 .section-head p { font-size: .92rem; }

.cards.stack { grid-template-columns: 1fr; gap: 14px; }
.home3 .card { padding: 18px 18px 14px; }
.home3 .card .icon { width: 30px; height: 30px; margin-bottom: 8px; }
.home3 .card h3 { font-size: 1.05rem; margin: 4px 0 6px; }
.home3 .card p { font-size: .88rem; margin-bottom: 10px; }
.home3 .card .topics { font-size: .78rem; line-height: 1.6; margin-bottom: 10px; }
.home3 .card .foot { font-size: .78rem; padding-top: 10px; }

/* The middle column is a panel of its own: search, letters, answers. */
.col-az {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px 20px 22px;
  position: sticky;
  top: 72px;
  max-height: calc(100vh - 88px);
  overflow-y: auto;
}
.col-az .section-head small { font-size: inherit; font-weight: 700; color: var(--ink); }
.col-az .search { max-width: none; margin: 0 0 14px; }
.col-az .search input { box-shadow: none; background: var(--ground); }

/* Inline results: a list in the column, not a box over the page. */
.search[data-inline] .results {
  position: static;
  box-shadow: none;
  border: 0;
  padding: 4px 0 0;
  max-height: none;
  overflow: visible;
  margin-top: 8px;
}
.search[data-inline] .results a { padding: 9px 10px; text-decoration: none; }
.search[data-inline] .results a:hover .rt,
.search[data-inline] .results a:focus-visible .rt { text-decoration: underline; }
.col-az .search.showing ~ .az-letters,
.col-az .search.showing ~ .az-panel { display: none; }

.az-letters {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 0 0 14px;
}
.az-letters a {
  min-width: 2.1em; padding: 5px 0; text-align: center;
  border: 1px solid var(--line); border-radius: 8px;
  font-size: .86rem; font-weight: 700; color: var(--blue);
  text-decoration: none; background: var(--card);
}
.az-letters a:hover, .az-letters a:focus-visible { border-color: var(--blue-lit); color: var(--blue-lit); }
.az-letters a[aria-current] { background: var(--blue); border-color: var(--blue); color: #fff; }

.az-hint { margin: 0 0 14px; color: var(--ink-soft); font-size: .9rem; }
.az-panel .azlink { display: inline-block; margin-top: 4px; box-shadow: none; }
.az-head { margin: 4px 0 10px; font-size: 1.02rem; color: var(--blue); outline: none; }
.az-list { margin: 0 0 14px; font-size: .88rem; }
.az-list dt { font-weight: 700; color: var(--ink); margin-top: 10px; }
.az-list dd { margin: 2px 0 0; color: var(--ink-soft); line-height: 1.55; }
.az-list dd a { color: var(--blue); }

@media (max-width: 1099px) {
  .home3 {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "az az" "exams study";
  }
  .col-az { position: static; max-height: none; overflow: visible; }
}
@media (max-width: 699px) {
  .home3 { grid-template-columns: minmax(0, 1fr); grid-template-areas: "exams" "az" "study"; gap: 34px; }
}

/* ---------------------------------------------------------- responsive */

@media (max-width: 900px) {
  /* Four tiles divide evenly, so they simply become two rows of two -- the
     sixths trick that used to live here existed only because there were five. */
  .stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .hero { padding-top: 44px; }
  .stats { margin-bottom: -30px; }
  .stat b { font-size: 1.42rem; }
  main.wrap { padding-top: 62px; }
  section { margin-bottom: 46px; }
  .card { padding: 22px 20px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .card:hover { transform: none; }
}

/* ---------------------------------------------------- the A–Z topic index
   topics.html is the catalogue for a reader who knows the topic but not where
   it sits in a syllabus. It is a root-level page like the home page, so it
   shares this stylesheet rather than a section's. */

.topics-head {
  background: linear-gradient(135deg, var(--blue-deep) 0%, var(--blue-lit) 100%);
  color: #fff;
  padding: 34px 0 26px;
}
.topics-head .eyebrow {
  margin: 0 0 10px;
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.topics-head .eyebrow a { color: inherit; text-decoration: none; }
.topics-head .eyebrow a:hover { text-decoration: underline; }
.topics-head h1 { margin: 0 0 8px; font-size: clamp(1.7rem, 4.5vw, 2.5rem); }
.topics-head .lede {
  margin: 0 0 20px;
  max-width: 56ch;
  color: rgba(255, 255, 255, .92);
}

/* The letter rail wraps rather than scrolling sideways: on a phone two rows of
   letters read better than one row that runs off the screen. */
.alpha {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.alpha a {
  display: inline-block;
  min-width: 30px;
  padding: 4px 7px;
  text-align: center;
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 6px;
}
.alpha a:hover { background: rgba(255, 255, 255, .28); }

main.topics { padding-top: 26px; padding-bottom: 60px; }

.letter { margin-bottom: 30px; scroll-margin-top: 14px; }
.letter h2 {
  margin: 0 0 10px;
  padding-bottom: 6px;
  font-size: 1.5rem;
  color: var(--blue);
  border-bottom: 2px solid var(--line);
}

/* Two columns of entries where there is room; one where there is not. Each
   entry is a topic and the pages that teach it, so dt/dd is the honest markup. */
.letter dl {
  margin: 0;
  columns: 2;
  column-gap: 34px;
}
.letter dt {
  font-weight: 600;
  color: var(--ink);
  break-inside: avoid;
  margin-top: 12px;
}
.letter dt:first-child { margin-top: 0; }
.letter dd {
  margin: 1px 0 0;
  font-size: .89rem;
  line-height: 1.5;
  color: var(--ink-faint);
  break-inside: avoid;
  overflow-wrap: break-word;
}
.letter dd a { color: var(--blue-lit); text-decoration: none; }
.letter dd a:hover { text-decoration: underline; }

@media (max-width: 760px) {
  .letter dl { columns: 1; }
}

/* -------------------------------------------- the choose-a-test guide
   which-statistical-test.html reuses the topic index's header, so only the
   filter controls and the table itself are new here. */

.sr-head {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden;
}

main.chooser { padding-top: 26px; padding-bottom: 60px; }

.filters {
  display: grid;
  gap: 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow);
}
.flabel {
  margin: 0 0 8px;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.fbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.fbtn {
  font: inherit;
  font-size: .88rem;
  padding: 7px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ground);
  color: var(--ink-soft);
  cursor: pointer;
}
.fbtn:hover { border-color: var(--blue-lit); color: var(--blue); }
.fbtn.on {
  background: var(--blue);
  border-color: var(--blue);
  color: #fff;
  font-weight: 600;
}
.fstatus {
  margin: 12px 2px 0;
  font-size: .88rem;
  color: var(--ink-faint);
}

/* The table is the page. Wide on a desktop, scrolling in its own box on a
   phone, so the document itself never moves sideways. */
.tablewrap { overflow-x: auto; margin: 22px 0 8px; }
table.tests {
  border-collapse: collapse;
  width: 100%;
  min-width: 56rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
table.tests th, table.tests td {
  text-align: left;
  vertical-align: top;
  padding: 13px 15px;
  border-top: 1px solid var(--line);
  font-size: .91rem;
  line-height: 1.55;
}
table.tests thead th {
  border-top: none;
  background: var(--blue);
  color: #fff;
  font-size: .78rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
table.tests tbody tr:nth-child(even) { background: var(--ground); }
table.tests td b { color: var(--ink); }
table.tests .tname {
  font-weight: 600;
  color: var(--blue);
  white-space: nowrap;
}
table.tests .eg {
  display: block;
  margin-top: 5px;
  font-size: .85rem;
  color: var(--ink-faint);
  font-style: italic;
}
table.tests a { color: var(--blue-lit); }

.notes { margin-top: 34px; }
.notes h2 {
  font-size: 1.35rem;
  color: var(--blue);
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 2px solid var(--line);
}
.notes p, .notes li, .notes dd { color: var(--ink-soft); }
.checks { margin: 0; }
.checks dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 14px;
}
.checks dd { margin: 4px 0 0; }
ul.plain { margin: 0; padding-left: 1.15rem; }
ul.plain li { margin-bottom: 8px; }
ul.plain li::marker { color: var(--ink-faint); }

@media (max-width: 760px) {
  table.tests { min-width: 44rem; }
}

/* ------------------------------------------------------------ site search */
/* The box ships with the `hidden` attribute and search.js removes it, so a
   reader without JavaScript is never shown a control that cannot work. */

.search { position: relative; max-width: 640px; margin: 22px 0 0; }

.search input {
  width: 100%;
  padding: 13px 18px;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  box-shadow: var(--shadow);
  -webkit-appearance: none;
  appearance: none;
}

.search input::placeholder { color: var(--ink-faint); }

/* The hero is dark, so the box needs its own light ground to sit on there. */
.hero .search input,
.topics-head .search input { border-color: transparent; }

.results {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  left: 0; right: 0;
  margin: 0; padding: 6px;
  list-style: none;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-up);
  max-height: 70vh;
  overflow-y: auto;
}

.results li { margin: 0; }

.results a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
}

.results a:hover,
.results li[aria-selected="true"] a { background: #eef4fb; }

.results .rt { display: block; font-weight: 600; color: var(--blue); }
.results .rs {
  display: inline-block;
  margin: 2px 8px 0 0;
  font-size: .72rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.results .rw { font-size: .88rem; color: var(--ink-soft); }

.results .none { padding: 12px 14px; color: var(--ink-soft); font-size: .92rem; }

.shint { margin: 8px 0 0; font-size: .82rem; color: var(--ink-faint); }
.hero .shint { color: rgba(255, 255, 255, .72); }

.shint kbd {
  padding: 1px 6px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 5px;
  background: var(--card);
  color: var(--ink-soft);
  font: inherit;
  font-size: .8rem;
}

@media (max-width: 620px) {
  .search { max-width: none; }
  .shint { display: none; }        /* there is no "/" key to press on a phone */
}

/* ------------------------------------------------- search + A–Z, side by side */
/* The A–Z link is a sibling of .search, never a child: .search ships with the
   `hidden` attribute until search.js removes it, and a reader without
   JavaScript needs this link most of all. */

.find {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin: 8px 0 34px;
}

.find .search { margin: 0; flex: 1 1 460px; }

.azlink {
  flex: 0 0 auto;
  padding: 13px 20px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  box-shadow: var(--shadow);
  color: var(--blue);
  font-size: .93rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.azlink:hover,
.azlink:focus-visible { border-color: var(--blue-lit); color: var(--blue-lit); }

@media (max-width: 620px) {
  .find { gap: 12px; }
  .find .search { flex-basis: 100%; }
  .azlink { flex-basis: 100%; text-align: center; }
}