/* The printable cheat sheet (/resources/cheat-sheet/), on its own instead of
   main.css. Colours come from tokens (/css/tokens.css), always the light ones
   (.theme-light on the sheet), since it is paper. Sizes are in mm and pt so
   print matches the PDF.

   One page on both A4 (210 x 297mm) and US Letter (215.9 x 279.4mm) at 100%:
   with 8mm margins the printable area is at least 194 x 263.4mm, so the sheet
   is exactly 194 x 263mm and overflow is never clipped silently: npm run
   cheatsheet fails if anything spills out of it. */

@page {
  size: portrait;
  margin: 8mm;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

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

body {
  margin: 0;
  background: var(--surface-page);
  color: var(--ink);
  font-family: var(--font-sans);
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 2px;
}

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

/* ---- Screen: the sheet as a sheet of A4 ---------------------------------- */

.print-page main {
  padding: var(--space-4) var(--space-3) var(--space-6);
}

.sheet-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  max-width: 210mm;
  margin: 0 auto var(--space-3);
  font-size: var(--type-small-size);
  line-height: var(--type-small-line);
  font-weight: 700;
}

.sheet-bar a {
  color: var(--brand-blue);
}

/* A sheet of A4 with 8mm margins. The bottom margin is deeper so the content
   box is the same 194 x 263mm as on paper. */
.sheet {
  display: flex;
  flex-direction: column;
  width: 210mm;
  height: 297mm;
  margin: 0 auto;
  padding: 8mm 8mm calc(297mm - 8mm - 263mm);
  background: var(--surface-card);
  color: var(--ink);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--book-shade) 12%, transparent);
}

/* Narrower screens shrink the whole sheet rather than reflowing it, so it
   always looks like the print; anything still too wide scrolls. Each step
   fits the sheet (794px at full size) plus the 16px gutters. */
.print-page main {
  overflow-x: auto;
}

@media screen and (max-width: 830px) {
  .sheet { zoom: 0.75; }
}

@media screen and (max-width: 630px) {
  .sheet { zoom: 0.55; }
}

@media screen and (max-width: 470px) {
  .sheet { zoom: 0.42; }
}

/* ---- Print --------------------------------------------------------------- */

@media print {
  body {
    background: none;
  }

  .print-page main {
    padding: 0;
  }

  .sheet-bar {
    display: none;
  }

  .sheet {
    width: 194mm;
    height: 263mm;
    padding: 0;
    box-shadow: none;
  }
}

/* ---- The sheet ----------------------------------------------------------- */

.sheet > * {
  flex: none;
}

.sheet > .sheet__foot {
  margin-top: auto;
}

/* Resets with no specificity, so the rules below always win. */
:where(.sheet) :where(p, h1, h2, h3, ul, ol, dl, dd) {
  margin: 0;
  padding: 0;
}

:where(.sheet) :where(ul, ol) {
  list-style: none;
}

.sheet__head {
  padding-bottom: 3.5mm;
  border-bottom: 0.4mm solid var(--border-subtle);
}

.sheet__kicker {
  font-size: 7.5pt;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.sheet__title {
  margin-top: 1.5mm;
  font-size: 23pt;
  line-height: 1.1;
  font-weight: 900;
  color: var(--brand-navy);
}

.sheet__h2 {
  font-size: 12pt;
  line-height: 1.2;
  font-weight: 800;
  color: var(--brand-navy);
}

.sheet__note {
  margin-top: 0.5mm;
  font-size: 7.5pt;
  line-height: 1.35;
  color: var(--ink-muted);
}

/* ---- The 16 types: one row per quadra, two dual pairs in each ------------- */

.sheet__types {
  padding-top: 4mm;
}

.quadras {
  display: grid;
  gap: 2.5mm;
  margin-top: 3mm;
}

.quadra {
  display: grid;
  grid-template-columns: 24mm 1fr;
  align-items: center;
}

/* The quadra's name beside a bar in its colour, like the type names table. */
.quadra__name {
  align-self: stretch;
  display: flex;
  align-items: center;
  padding-left: 3mm;
  border-left: 1.6mm solid;
  font-size: 10pt;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.quadra--alpha .quadra__name { border-color: var(--quadra-alpha); }
.quadra--beta .quadra__name { border-color: var(--quadra-beta); }
.quadra--gamma .quadra__name { border-color: var(--quadra-gamma); }
.quadra--delta .quadra__name { border-color: var(--quadra-delta); }

.duos {
  display: flex;
  justify-content: space-around;
}

/* A dual pair like the back cover's: two badges in a pill of the quadra's
   tint, joined by a bar in its colour. The book names sit under the pill. */
.duo {
  --duo-size: 14mm;
  --duo-gap: 16mm;
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, calc(var(--duo-size) + var(--duo-gap)));
  justify-items: center;
}

/* The pill, behind the badges, and the bar between them. */
.duo::before,
.duo::after {
  content: "";
  position: absolute;
  z-index: 0;
}

.duo::before {
  top: 0;
  left: calc(var(--duo-gap) / 2 - 1.6mm);
  right: calc(var(--duo-gap) / 2 - 1.6mm);
  height: calc(var(--duo-size) + 3.2mm);
  border-radius: 999px;
  background: var(--duo-tint);
}

.duo::after {
  top: calc(1.6mm + var(--duo-size) / 2 - 0.6mm);
  left: 25%;
  right: 25%;
  height: 1.2mm;
  background: var(--duo-colour);
}

.duo__type {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 1.6mm;
}

.duo__badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: var(--duo-size);
  height: var(--duo-size);
  border: 0.7mm solid var(--quadra-on-quadra);
  border-radius: 50%;
  background: var(--duo-colour);
  color: var(--duo-ink);
  line-height: 1;
}

.duo__code {
  font-size: 10.5pt;
  font-weight: 800;
}

.duo__four {
  margin-top: 0.5mm;
  font-size: 7pt;
  font-weight: 700;
}

.duo__name {
  margin-top: 1.6mm;
  font-size: 7.5pt;
  line-height: 1.2;
  font-weight: 600;
  white-space: nowrap;
}

/* Text colours follow main.css's .badge: alpha-ink on alpha, and gamma-deep
   rather than gamma under small white text. */
.duo--alpha {
  --duo-colour: var(--quadra-alpha);
  --duo-ink: var(--quadra-alpha-ink);
  --duo-tint: var(--quadra-alpha-tint);
}

.duo--beta {
  --duo-colour: var(--quadra-beta);
  --duo-ink: var(--quadra-on-quadra);
  --duo-tint: var(--quadra-beta-tint);
}

.duo--gamma {
  --duo-colour: var(--quadra-gamma-deep);
  --duo-ink: var(--quadra-on-quadra);
  --duo-tint: var(--quadra-gamma-tint);
}

.duo--delta {
  --duo-colour: var(--quadra-delta);
  --duo-ink: var(--quadra-on-quadra);
  --duo-tint: var(--quadra-delta-tint);
}

/* ---- The 14 relations: two columns of groups ------------------------------ */

.sheet__relations {
  margin-top: 4.5mm;
  padding-top: 4mm;
  border-top: 0.4mm solid var(--border-subtle);
}

.groups {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7mm;
  margin-top: 2.5mm;
}

.groups__column {
  display: grid;
  align-content: start;
  gap: 4mm;
}

.group__name {
  margin-bottom: 1.8mm;
  font-size: 7pt;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brand-blue);
}

.group__list {
  display: grid;
  gap: 2.2mm;
}

/* The name runs into its line, to fit 14 relations in half a page. */
.relation {
  font-size: 7.5pt;
  line-height: 1.4;
}

.relation__name,
.relation__line {
  display: inline;
}

.relation__name {
  margin-right: 0.4em;
  font-size: 8.5pt;
  font-weight: 800;
  color: var(--brand-navy);
}

.group__note {
  margin-top: 2.2mm;
  padding: 1.8mm 2.5mm;
  border-radius: 1.5mm;
  background: var(--surface-page);
  font-size: 7pt;
  line-height: 1.35;
  font-style: italic;
}

/* ---- Footer ---------------------------------------------------------------- */

.sheet__foot {
  display: flex;
  align-items: center;
  gap: 4mm;
  padding-top: 3.5mm;
  border-top: 0.4mm solid var(--border-subtle);
}

.sheet__cover {
  width: 12.5mm;
  border-radius: 0.6mm;
  box-shadow: 0 0.3mm 1mm color-mix(in srgb, var(--book-shade) 25%, transparent);
}

.sheet__foot-text {
  display: grid;
  gap: 0.6mm;
  font-size: 7.5pt;
  line-height: 1.3;
}

.sheet__cta {
  font-size: 9pt;
  font-weight: 700;
  color: var(--brand-navy);
}

.sheet__url {
  font-weight: 700;
  color: var(--brand-blue);
}

.sheet__url a {
  color: inherit;
  text-decoration: none;
}

.sheet__copy {
  color: var(--ink-muted);
}