/* Guess the Font — a Letraset catalogue sheet.

   Four colours and no fifth. Hard edges everywhere: no border-radius, no
   box-shadow, no gradient, no transition longer than it takes to press a
   button. A printed sheet does not have any of those, and the moment one
   appears the page starts drifting toward the generic tasteful register that
   PLAYBOOK §12 is about.

   The interface never loads a webfont. Every grotesque worth using is in the
   deck, and the answer must not be sitting in the page's own body text. */

:root {
  --ink: #111111;
  --sheet: #ffffff;
  --orange: #f1541f;
  --grey: #8a8a8a;
  --hair: #111111;

  /* Letraset catalogues were set in Helvetica. So is this, where it exists. */
  --grot: Helvetica, "Helvetica Neue", Arial, "Liberation Sans", system-ui, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f2f2f2;
    --sheet: #111111;
    --grey: #8a8a8a;
    --hair: #f2f2f2;
  }
}
:root[data-theme="dark"] {
  --ink: #f2f2f2;
  --sheet: #111111;
  --grey: #8a8a8a;
  --hair: #f2f2f2;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--sheet);
  color: var(--ink);
  font-family: var(--grot);
  font-size: 16px;
  line-height: 1.45;
  -webkit-text-size-adjust: 100%;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 28px 16px 56px;
}

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

/* ---- head ---------------------------------------------------------- */

.head { margin: 0 0 24px; }

.sheetno {
  margin: 0 0 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--orange);
}

h1 {
  margin: 0;
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1;
}

.tagline {
  margin: 10px 0 0;
  font-size: 0.95rem;
  color: var(--grey);
}

/* ---- the specimen -------------------------------------------------- */

.rule { height: 2px; background: var(--hair); }

.word {
  margin: 0;
  padding: 6px 0 14px;
  /* The specimen face is loaded at runtime and named after its hash. Until it
     arrives the word must not flash in the interface font, which would be a
     free wrong answer, so the fallback is deliberately nothing. */
  font-family: var(--specimen), monospace;
  font-size: clamp(2.6rem, 15vw, 5.5rem);
  line-height: 1.15;
  text-align: center;
  word-break: break-word;
  min-height: 1.15em;
}
/* Anything wearing a face it has not received yet. */
.waiting { visibility: hidden; }

.hintrow {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 12px 0 0;
  flex-wrap: wrap;
}
.hintrow[hidden], .foot-nav[hidden] { display: none; }

.hint {
  border: 2px solid var(--hair);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  cursor: pointer;
}
.hint:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: #fff; }
.hint:disabled { opacity: 0.35; cursor: default; }

.hintcost { font-size: 0.75rem; color: var(--grey); }

.glyph {
  margin: 14px 0 0;
  font-family: var(--specimen), monospace;
  font-size: clamp(5rem, 26vw, 9rem);
  line-height: 1;
  text-align: center;
  color: var(--orange);
}

/* ---- the guess ----------------------------------------------------- */

.play { margin: 26px 0 0; }

.entry { display: flex; gap: 0; }
/* `display: flex` outranks the user-agent rule behind [hidden], so the entry
   would stay on screen after the round ended. Every author display rule in
   this file needs its own [hidden] escape. */
.entry[hidden] { display: none; }

#guess {
  flex: 1 1 auto;
  min-width: 0;
  border: 2px solid var(--hair);
  border-right: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 10px 12px;
}
#guess:focus { outline: 2px solid var(--orange); outline-offset: -2px; }

#submit {
  flex: 0 0 auto;
  border: 2px solid var(--hair);
  background: var(--ink);
  color: var(--sheet);
  font: inherit;
  font-weight: 700;
  padding: 10px 20px;
  cursor: pointer;
}
#submit:hover:not(:disabled) { background: var(--orange); border-color: var(--orange); color: #fff; }
#submit:disabled { opacity: 0.35; cursor: default; }

.matches {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 2px solid var(--hair);
  border-top: 0;
  max-height: 210px;
  overflow-y: auto;
}
.matches li { border-top: 1px solid var(--grey); }
.matches button {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: inherit;
  padding: 8px 12px;
  cursor: pointer;
}
.matches button:hover, .matches button:focus { background: var(--orange); color: #fff; outline: 0; }

/* ---- the board ----------------------------------------------------- */

.board {
  width: 100%;
  margin: 22px 0 0;
  border-collapse: collapse;
  font-size: 0.82rem;
  table-layout: fixed;
}
.board th {
  text-align: left;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  padding: 0 8px 6px;
  border-bottom: 2px solid var(--hair);
}
.board th:first-child { width: 40%; }
.board td {
  padding: 9px 8px;
  border-bottom: 1px solid var(--grey);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.board tbody tr.empty td { color: transparent; }

/* The guessed face, set in today's word. It sits under its own scoreline with
   no rule between them so the two read as one entry, and it is big enough to
   compare against the specimen without being big enough to outrank it. */
.board tbody tr.spec td { border-bottom: 0; }
.board tr:not(.spec) + tr.spec td { padding-top: 0; }
.specword {
  font-size: clamp(1.9rem, 7.5vw, 2.6rem);
  line-height: 1.2;
  padding-bottom: 14px !important;
  white-space: nowrap !important;
  overflow: hidden;
  text-overflow: clip;
}
.board tbody tr.spec + tr td { border-top: 1px solid var(--grey); }
.board td.hit { background: var(--orange); color: #fff; font-weight: 700; }
.board td.name { font-weight: 700; }

.note {
  margin: 16px 0 0;
  font-size: 0.95rem;
  min-height: 1.45em;
}

/* ---- the reveal ---------------------------------------------------- */

.over { margin: 30px 0 0; }

.verdict {
  margin: 0 0 18px;
  font-size: 1.15rem;
  font-weight: 700;
}

.card {
  border: 2px solid var(--hair);
  padding: 16px;
}
.cardname {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.carddesigner { margin: 4px 0 0; font-size: 0.9rem; }
.cardclass {
  margin: 8px 0 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}
.cardget { margin: 12px 0 0; font-size: 0.85rem; }
.cardget a { color: var(--ink); }

.stats { margin: 18px 0 0; font-size: 0.85rem; color: var(--grey); }

.actions { margin: 16px 0 0; }
#copy {
  border: 2px solid var(--hair);
  background: var(--ink);
  color: var(--sheet);
  font: inherit;
  font-weight: 700;
  padding: 9px 18px;
  cursor: pointer;
}
#copy:hover { background: var(--orange); border-color: var(--orange); color: #fff; }

.next, .yesterday { margin: 12px 0 0; font-size: 0.85rem; color: var(--grey); }
.archive { margin: 18px 0 0; font-size: 0.9rem; font-weight: 700; }
.archive a, .matches a { color: var(--orange); }

/* ---- the archive --------------------------------------------------- */

/* Rendered at build time by build_site.py's data_table, so these class names
   come from the shared layer, not from this page. */

.archive .wrap { max-width: 860px; }

.table-group {
  margin: 38px 0 0;
  padding: 0 0 6px;
  border-bottom: 2px solid var(--hair);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
}

.value-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
  margin: 0;
}
.value-table th, .value-table td {
  text-align: left;
  vertical-align: baseline;
  padding: 9px 12px 9px 0;
  border-bottom: 1px solid var(--grey);
}
.value-table thead th {
  border-bottom: 2px solid var(--hair);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grey);
  padding-top: 10px;
}
/* The name column is a specimen, not a label: once archive.js has the face it
   sets the name in itself. That wants room and size, so it takes a third of
   the table and steps up from the body size. Until the face arrives the name
   sits in the interface font, which is the right name either way. */
.value-table .col-family {
  width: 34%;
  font-weight: 700;
  font-size: 1.15rem;
  line-height: 1.25;
}
.value-table thead .col-family { font-size: 0.66rem; }
.value-table .col-family.in-its-face { font-weight: 400; }
.value-table .col-designer { width: 28%; }
.value-table .col-spot { width: 38%; color: var(--grey); }

@media (max-width: 560px) {
  .value-table { font-size: 0.78rem; }
  .value-table th, .value-table td { padding-right: 8px; }
  .value-table .col-family { width: 38%; font-size: 1rem; }
  .value-table .col-designer { width: 26%; }
  .value-table .col-spot { width: 36%; }
}

/* ---- foot ---------------------------------------------------------- */

footer {
  margin: 48px 0 0;
  padding: 18px 0 0;
  border-top: 2px solid var(--hair);
  font-size: 0.78rem;
  color: var(--grey);
}
footer p { margin: 0 0 8px; }
.foot-nav { display: flex; gap: 16px; flex-wrap: wrap; margin: 0 0 8px; }
footer a { color: var(--grey); }

@media (max-width: 420px) {
  .board { font-size: 0.74rem; }
  .board td, .board th { padding-left: 5px; padding-right: 5px; }
  /* "X-HEIGHT" wraps to two lines at this width with the wide tracking on. */
  .board th { letter-spacing: 0.04em; white-space: nowrap; }
}