/* gradeone.press — the site layer.
 *
 * This file is deliberately thin. build/css/epub.css is the design system: it
 * carries the palette, the type stack, the table rules and the dark mode, and
 * it is written against WCAG 2.1 AA because the European Accessibility Act
 * requires it of the book. A site that failed where the book passes would be
 * the drift failure docs/BUILD.md keeps recording, so the site loads the book's
 * stylesheet first and adds only what a web page needs and an EPUB does not:
 * a page container, a masthead, a footer, and the affordances that make a
 * 200-row table usable in a browser.
 *
 * The same rules bind here as bind there:
 *
 *   - No fixed font sizes. Readers resize text.
 *   - No colour used alone to carry meaning. Grades are digits, never swatches.
 *   - Real <table> markup, never a div grid, because screen readers need the
 *     header association.
 *   - No web fonts. Nothing is fetched from another host, which is also why
 *     there is no cookie banner to write.
 *
 * Palette, restated from epub.css so an editor of this file does not have to
 * go and look:
 *
 *   accent  #1d3557 light / #9dc4ea dark
 *   rule    #c9c9c9 light / #4a4f57 dark
 *   body    #1a1a1a on #ffffff  /  #e8e8e8 on #16181c
 *   links   #10457a light (8.6:1) / #8ab8e8 dark (7.4:1)
 *   muted   #595959 (7.0:1)
 *   panel   #f4f5f7
 *
 * SIGNAL (#d1502e) is the cover's accent and appears here only where the cover
 * appears. It is not a UI colour; at 4.1:1 on paper white it does not clear AA
 * for body text and must never be used for one.
 */

/* ------------------------------------------------------------ paragraphs */

/* epub.css sets `p { margin: 0; text-indent: 1.2em }` — the printed convention,
 * where a new paragraph is signalled by an indent and vertical space is saved.
 * It is right in a book and wrong here.
 *
 * On a screen a reader scans before they read, and run-on indented paragraphs
 * give them no landing points; the eye has to parse the text to find the
 * structure. Space between paragraphs is what a web reader is calibrated for,
 * and it is the convention every reading-mode implementation applies anyway.
 *
 * This is the one place the site deliberately departs from the book's
 * typography, and it applies everywhere — including the free chapters. Two
 * conventions across one site would read as a bug rather than as fidelity.
 */
main p {
  text-indent: 0;
  margin: 0 0 1em;
}

main li > p { margin-bottom: 0.5em; }

/* -------------------------------------------------------------- container */

body {
  /* epub.css sets `margin: 0 5%`, which is right for a reader that supplies
   * its own frame and wrong for a browser at 1600px. */
  margin: 0;
  padding: 0;
}

.wrap {
  max-width: 42rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* The data tables need the room. Prose does not — a 42rem measure is about 75
 * characters, and a longer line is measurably harder to track back from. */
.wrap.wide { max-width: 80rem; }

/* ---------------------------------------------------------------- masthead */

.masthead {
  border-bottom: 1px solid #c9c9c9;
  margin-bottom: 2rem;
}

.masthead .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.6rem 1.4rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.masthead a { text-decoration: none; }
.masthead a:hover, .masthead a:focus { text-decoration: underline; }

.masthead .imprint {
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1d3557;
  margin-right: auto;
}

.masthead nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.masthead nav li { margin: 0; }

.masthead nav a {
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 0.94em;
}

/* aria-current marks the page you are on. It is announced by screen readers,
 * so the underline here is reinforcement rather than the only signal. */
.masthead nav a[aria-current="page"] {
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ------------------------------------------------------------- skip link */

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: #ffffff;
  color: #10457a;
  padding: 0.6rem 1rem;
  z-index: 10;
}

.skip:focus { left: 0; }

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

.sitefoot {
  border-top: 1px solid #c9c9c9;
  margin-top: 4rem;
  padding: 1.5rem 0 3rem;
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 0.9em;
  color: #595959;
}

.sitefoot p { margin: 0 0 0.5em; text-indent: 0; }
.sitefoot a { color: #10457a; }

/* --------------------------------------------------------------- lede */

/* The subtitle, and the one-sentence answer at the top of a data page. Large
 * enough to read as a deck rather than as a first paragraph. */
main p.lede {
  font-size: 1.25em;
  line-height: 1.4;
  color: #1a1a1a;
  margin: 0 0 1.5em;
  max-width: 34rem;
}

h1 + p.lede { margin-top: -0.4em; }

/* --------------------------------------------------------- call to action */

.buy {
  display: inline-block;
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-weight: 700;
  background: #1d3557;
  color: #ffffff;
  text-decoration: none;
  padding: 0.7em 1.4em;
  border: 2px solid #1d3557;
  border-radius: 2px;
}

.buy:hover, .buy:focus {
  background: #ffffff;
  color: #1d3557;
  text-decoration: underline;
}

.buy.secondary {
  background: transparent;
  color: #10457a;
  border-color: #10457a;
}

.buy.secondary:hover, .buy.secondary:focus {
  background: #10457a;
  color: #ffffff;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 1.5rem 0;
}

/* ---------------------------------------------------------------- panels */

.panel {
  background: #f4f5f7;
  border-left: 3px solid #1d3557;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
}

.panel > :first-child { margin-top: 0; }
.panel > :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- data table */

/* A 200-row table must scroll inside its own box. The page body never scrolls
 * sideways — that breaks reading position on a phone and is a WCAG 1.4.10
 * reflow failure. */
.scroller {
  overflow-x: auto;
  margin: 1.5rem 0;
  border: 1px solid #c9c9c9;
}

/* The scroller carries tabindex="0" so a keyboard user can reach and scroll it
 * (axe: scrollable-region-focusable). Anything focusable needs a visible focus
 * ring, or the keyboard user can reach it and not know they have. */
.scroller:focus-visible {
  outline: 3px solid #1d3557;
  outline-offset: 2px;
}

.scroller table { margin: 0; border: 0; width: 100%; }

/* A reference table with eight columns of prose cannot be made to fit a phone,
 * and squeezing it produces six-line cells that are harder to read than a
 * horizontal scroll. So the wide tables declare a floor and scroll below it,
 * inside .scroller, which is why the page body still never scrolls sideways. */
table.data.roomy { min-width: 76rem; }
table.data.roomy td, table.data.roomy th { min-width: 6rem; }

/* Long prose columns get the room; short factual ones do not need it. */
table.data col.w-wide  { width: 18%; }
table.data col.w-mid   { width: 12%; }
table.data col.w-tight { width: 6%; }

table.data {
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 0.88em;
  border-collapse: collapse;
}

table.data th, table.data td {
  padding: 0.5em 0.7em;
  vertical-align: top;
  border-bottom: 1px solid #e3e3e3;
}

table.data thead th {
  position: sticky;
  top: 0;
  background: #ffffff;
  border-bottom: 2px solid #1d3557;
  text-align: left;
  white-space: nowrap;
}

table.data tbody tr:hover { background: #f4f5f7; }

/* Grades are digits and stay digits. The weight change is secondary emphasis,
 * never the carrier of the meaning. */
td.grade { text-align: center; font-weight: 700; white-space: nowrap; }
td.num   { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
td.date  { white-space: nowrap; font-variant-numeric: tabular-nums; }

.muted { color: #595959; }

/* ------------------------------------------------------------------ filter */

.filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  margin: 1.5rem 0 0.5rem;
  font-family: "Segoe UI", "Open Sans", "Noto Sans", Helvetica, Arial, sans-serif;
  font-size: 0.92em;
}

.filter label { font-weight: 700; }

.filter input[type="search"], .filter select {
  font: inherit;
  padding: 0.4em 0.6em;
  border: 1px solid #767676;
  border-radius: 2px;
  background: #ffffff;
  color: #1a1a1a;
  min-width: 12rem;
}

.filter input[type="search"]:focus, .filter select:focus {
  outline: 2px solid #1d3557;
  outline-offset: 1px;
}

/* Announced via aria-live, so a filter that returns nothing says so out loud
 * rather than presenting an empty table and no explanation. */
.count { color: #595959; }

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

.cards {
  list-style: none;
  margin: 1.5rem 0;
  padding: 0;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}

.cards li {
  margin: 0;
  border: 1px solid #c9c9c9;
  padding: 1rem 1.1rem;
}

.cards h3 { margin-top: 0; }
.cards p:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- definition */

.terms dt { margin-top: 1.1em; }

/* ---------------------------------------------------------------- dark mode */

@media (prefers-color-scheme: dark) {
  .masthead, .sitefoot { border-color: #4a4f57; }
  .masthead .imprint { color: #9dc4ea; }
  .sitefoot { color: #a8a8a8; }
  .sitefoot a { color: #8ab8e8; }
  main p.lede { color: #e8e8e8; }

  .skip { background: #16181c; color: #8ab8e8; }

  .buy {
    background: #9dc4ea;
    color: #16181c;
    border-color: #9dc4ea;
  }
  .buy:hover, .buy:focus { background: #16181c; color: #9dc4ea; }
  .buy.secondary { background: transparent; color: #8ab8e8; border-color: #8ab8e8; }
  .buy.secondary:hover, .buy.secondary:focus { background: #8ab8e8; color: #16181c; }

  .panel { background: #1e2126; border-left-color: #9dc4ea; }

  .scroller { border-color: #4a4f57; }
  table.data th, table.data td { border-bottom-color: #303439; }
  table.data thead th { background: #16181c; border-bottom-color: #9dc4ea; }
  table.data tbody tr:hover { background: #1e2126; }

  .muted, .count { color: #a8a8a8; }

  .filter input[type="search"], .filter select {
    background: #1e2126;
    color: #e8e8e8;
    border-color: #6b7178;
  }
  .filter input[type="search"]:focus, .filter select:focus { outline-color: #9dc4ea; }

  .cards li { border-color: #4a4f57; }
}

/* ------------------------------------------------------------------- print */

@media print {
  .masthead nav, .filter, .actions { display: none; }
  .scroller { overflow: visible; border: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; }
}