/* Hide and Seek — the one stylesheet.
   Color is built, not picked: every grade hue sits at the same OKLCH lightness,
   so white text clears 4.5:1 on all of them by construction; every tint is the
   same hue at L 95 for large areas with ink text. The page's grade sets the hue. */

/* Fonts, self-hosted: Latin subsets of Bricolage Grotesque (700 and 800,
   optical size kept variable), Figtree (400–700, variable), and DM Mono
   (400, 500). All SIL Open Font License; the licenses are in /fonts/. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-700.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-grotesque-800.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Figtree";
  src: url("/fonts/figtree.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Mono";
  src: url("/fonts/dm-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ground: oklch(98.5% 0.006 85);
  --paper: #fff;
  --ink: oklch(22% 0.03 265);
  --ink-soft: oklch(45% 0.02 265);
  --ink-faint: oklch(58% 0.02 265);  /* the lightest ink that still clears 4.5:1 on the tints */
  --line: oklch(90% 0.01 265);

  --l-solid: 48%;
  --l-tint: 95%;
  --l-tint-deep: 90%;

  --hue-a: 265;  /* cobalt */
  --hue-b: 350;  /* raspberry */
  --hue-c: 45;   /* persimmon */
  --hue-d: 190;  /* lagoon */
  --hue-f: 305;  /* grape */

  --grade-a: oklch(var(--l-solid) 0.22 var(--hue-a));
  --grade-b: oklch(var(--l-solid) 0.20 var(--hue-b));
  --grade-c: oklch(var(--l-solid) 0.17 var(--hue-c));
  --grade-d: oklch(var(--l-solid) 0.12 var(--hue-d));
  --grade-f: oklch(var(--l-solid) 0.20 var(--hue-f));

  --pass: oklch(var(--l-solid) 0.14 160);
  --warn: oklch(var(--l-solid) 0.16 70);
  --fail: oklch(var(--l-solid) 0.20 25);
  --info: var(--ink-soft);

  /* The page's grade. Overridden per grade below. */
  --hue: var(--hue-b);
  --chroma: 0.20;

  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-text: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --radius: 20px;
  --radius-small: 12px;
  --measure: 60rem;
  --gutter: clamp(16px, 4vw, 40px);
}

/* Any element can carry a grade; the page does, and so can a card. The derived
   colors are declared on every such element, not only :root, because a custom
   property built from var(--hue) resolves where it is declared. */
:root, [data-grade] {
  --grade: oklch(var(--l-solid) var(--chroma) var(--hue));
  --tint: oklch(var(--l-tint) 0.03 var(--hue));
  --tint-deep: oklch(var(--l-tint-deep) 0.05 var(--hue));
}

[data-grade="a"] { --hue: var(--hue-a); --chroma: 0.22; }
[data-grade="b"] { --hue: var(--hue-b); --chroma: 0.20; }
[data-grade="c"] { --hue: var(--hue-c); --chroma: 0.17; }
[data-grade="d"] { --hue: var(--hue-d); --chroma: 0.12; }
[data-grade="f"] { --hue: var(--hue-f); --chroma: 0.20; }

* { box-sizing: border-box; }

html { background: var(--ground); color: var(--ink); }

body {
  margin: 0;
  font: 400 1.0625rem/1.5 var(--font-text);
  font-feature-settings: "tnum";
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0; }

.page {
  max-width: var(--measure);
  margin: 0 auto;
  padding: 0 var(--gutter) 4rem;
}

/* Header --------------------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem 0;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  text-decoration: none;
  letter-spacing: -0.01em;
}

.mark { width: 28px; height: 28px; }

.masthead nav a { font-size: .9375rem; text-decoration: none; margin-left: 1.25rem; }
.masthead nav a:hover { text-decoration: underline; }

/* Subject line --------------------------------------------------------- */

.subject {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin: 1.5rem 0 1rem;
}

.site {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .5rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: .9375rem;
  background: var(--paper);
}

h1.site { font-weight: 400; letter-spacing: 0; line-height: 1.5; }

.site::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--grade);
}

.when { color: var(--ink-soft); font-size: .9375rem; }

/* Scores --------------------------------------------------------------- */

.scores {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 1rem;
}

.score {
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.5rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr;
  gap: .25rem 1rem;
  align-items: end;
}

.score h2 {
  grid-column: 1 / -1;
  font-family: var(--font-text);
  font-weight: 500;
  font-size: .9375rem;
  color: var(--ink-soft);
  letter-spacing: 0;
}

.number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4.5rem, 12vw, 7.5rem);
  line-height: .9;
  letter-spacing: -0.04em;
}

.grade {
  display: grid;
  place-items: center;
  width: clamp(4rem, 9vw, 5.5rem);
  aspect-ratio: 1;
  border-radius: var(--radius-small);
  background: var(--grade);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.5rem, 5.5vw, 3.5rem);
  line-height: 1;
  align-self: center;
}

.score.recall {
  background: transparent;
  border: 2px dashed var(--line);
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr auto;
  align-items: start;
  align-content: start;
}

.score.recall .number {
  color: var(--line);
  font-size: clamp(3rem, 8vw, 5rem);
}

.score.recall p { margin: .25rem 0 0; font-size: .9375rem; color: var(--ink-soft); }
.badge { margin: 1rem 0 0; }
.badge p { margin: 0 0 .4rem; font-size: .9375rem; color: var(--ink-soft); }
.badge pre { margin: 0; padding: .75rem 1rem; border-radius: var(--radius-small); background: var(--paper); overflow-x: auto; }
.badge code { font-family: var(--font-mono); font-size: .8125rem; }

.score.recall .hiding { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--ink-soft); margin-top: .75rem; }

.button {
  display: inline-block;
  padding: .6rem 1rem;
  border: 2px solid var(--ink);
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: .9375rem;
  text-decoration: none;
  justify-self: start;
  margin-top: 1rem;
}

.button.quiet { background: transparent; color: var(--ink); }

/* Verdict -------------------------------------------------------------- */

.verdict {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.25rem, 2.6vw, 1.625rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 34em;
  margin: 1.5rem 0 1.25rem;
}

/* Categories ----------------------------------------------------------- */

.categories {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.categories a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  padding: .7rem .9rem;
  border-radius: var(--radius-small);
  background: var(--paper);
  text-decoration: none;
  font-size: .9375rem;
}

.categories strong { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; }

.categories .lowest a { background: var(--grade); color: #fff; }

section.category {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: 1rem 1.5rem;
  background: var(--paper);
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  margin-bottom: .75rem;
}

section.category.lowest { background: var(--tint); box-shadow: inset 0 0 0 2px var(--grade); }

section.category h2 { font-size: 1.25rem; }
section.category h2 span { font-family: var(--font-text); font-weight: 500; color: var(--ink-soft); margin-left: .4rem; }
section.category .note { display: block; font-size: .875rem; color: var(--grade); font-weight: 600; margin-top: .35rem; }

.findings { list-style: none; margin: 0; padding: 0; }

.finding {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: .35rem .6rem;
  align-items: start;
  padding: .45rem 0;
  font-size: .9375rem;
}

.finding + .finding { border-top: 1px solid var(--line); }

.finding b { font-weight: 600; margin-right: .35rem; }

.finding .fix {
  grid-column: 2;
  margin: 0;
  padding: .5rem .75rem;
  border-radius: 8px;
  background: var(--tint);
  color: var(--ink);
  font-size: .9rem;
}
.finding .fix::before { content: "→ "; color: var(--grade); font-weight: 700; }

.status {
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  display: grid; place-items: center;
  color: #fff;
  font-family: var(--font-mono);
  font-size: .8rem;
  font-weight: 500;
  margin-top: .05rem;
}
.status.pass { background: var(--pass); }
.status.warn { background: var(--warn); }
.status.fail { background: var(--fail); }
.status.info { background: transparent; color: var(--info); box-shadow: inset 0 0 0 1.5px var(--line); }
.status.skip { background: transparent; color: var(--info); box-shadow: inset 0 0 0 1.5px var(--line); }

/* Under Authority when it is low: one plain line. */
.funnel { margin: -.25rem 0 .75rem 1.5rem; font-size: .9375rem; color: var(--ink-soft); }

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

footer {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 2px solid var(--ink);
  font-size: .9375rem;
  color: var(--ink-soft);
}

footer a { text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* Plain pages and the count ------------------------------------------ */

.plain { max-width: 40rem; margin: 2.5rem 0; }
.plain h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 1rem; }
.plain h2 { font-size: 1.25rem; margin: 2rem 0 .5rem; }
.plain p { margin: 0 0 1rem; }
.plain code { font-family: var(--font-mono); font-size: .875rem; word-break: break-all; }
.plain pre { background: var(--paper); border-radius: var(--radius-small); padding: 1rem 1.25rem; margin: 0 0 1rem; overflow-x: auto; }
.plain pre code { word-break: normal; }
.plain .seek { margin-top: 1.5rem; }
.price { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; }

.counting { background: var(--paper); border-radius: var(--radius); padding: 1.5rem; margin-top: 1rem; }
.counting h1 { font-size: 1.5rem; margin-bottom: .5rem; }
.counting .number { margin-bottom: 1rem; }
.counting .finding small { color: var(--ink-soft); font-size: .8125rem; }

/* Phone ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .scores { grid-template-columns: 1fr; }
  .categories { grid-template-columns: repeat(2, 1fr); }
  .categories li:last-child { grid-column: 1 / -1; }
  section.category { grid-template-columns: 1fr; }
  .masthead nav { display: none; }
}