/* The whole of the site's styling.
 *
 * It is one file on purpose: it is served once, cached forever under a hashed
 * name, and there is not enough of it to be worth splitting. The palette is the
 * four temperatures, a green for the guess that got it, and a paper - and
 * everything else is spacing.
 */

:root {
  color-scheme: light dark;

  --paper: #f6f4f0;
  --card: #ffffff;
  --ink: #16181d;
  --quiet: #5f6672;
  --line: #e2ded7;

  --hot: #c0392b;
  --hot-ink: #ffffff;
  --hot-wash: #fbeae7;
  --warm: #d3720f;
  --warm-ink: #ffffff;
  --warm-wash: #fdf0e2;
  --cold: #2a63b8;
  --cold-ink: #ffffff;
  --cold-wash: #e7eefa;
  --verycold: #4a6577;
  --verycold-ink: #ffffff;
  --verycold-wash: #eceff2;
  --win: #1f8a4c;
  --win-ink: #ffffff;
  --win-wash: #e4f3ea;

  --radius: 12px;
  --shadow: 0 1px 2px rgba(16, 18, 21, 0.06), 0 8px 24px rgba(16, 18, 21, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #0f1216;
    --card: #171b21;
    --ink: #eef1f5;
    --quiet: #9aa3b0;
    --line: #262c35;

    --hot: #e05a48;
    --hot-wash: #2a1a18;
    --warm: #e59444;
    --warm-wash: #2a2016;
    --cold: #5b91e8;
    --cold-wash: #16202f;
    --verycold: #8fa6b6;
    --verycold-wash: #1b2026;
    --win: #4cc47f;
    --win-wash: #14251c;
    --hot-ink: #14100f;
    --warm-ink: #1a1208;
    --cold-ink: #0d1219;
    --verycold-ink: #10161b;
    --win-ink: #0c1a12;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.35);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: inherit; }

/* ------------------------------------------------------------------ bar -- */

.bar {
  border-bottom: 1px solid var(--line);
  background: var(--card);
}

.bar nav {
  display: flex;
  align-items: center;
  gap: 4px;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  margin-right: 10px;
}

.brand .pips { letter-spacing: 1px; font-size: 13px; }

.tab {
  padding: 6px 10px;
  border-radius: 999px;
  color: var(--quiet);
  text-decoration: none;
  font-size: 14px;
  white-space: nowrap;
}

.tab:hover { background: var(--paper); color: var(--ink); }
.tab.on { background: var(--paper); color: var(--ink); font-weight: 600; }

/* How many messages are waiting, on the tab that leads to them.
 *
 * It is drawn hot, which is the one place on this site that colour is used for
 * something other than a guess: everywhere else red means a cold guess, and
 * here it means somebody is waiting on you. The two never appear on the same
 * page - a badge is on the console's bar and the temperatures are on the board -
 * and the alternative was a second attention colour for one circle.
 *
 * It has no shadow and does not move. A count that pulses is a notification;
 * this is a number sitting next to a word, and the inbox behind it has never
 * been urgent.
 */
.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  margin-left: 6px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--hot);
  color: var(--hot-ink);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  vertical-align: middle;
}

/* The console's own row, under the site's. It is quieter than the bar above it
 * and sits on the paper rather than on the card, so the two read as one bar
 * with a second row rather than as two bars of equal weight - the top one is
 * the site, and this is where in it you are. */
.console-bar {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.console-bar nav { padding: 6px 16px; }
.console-bar .tab { font-size: 13px; }
.console-bar .tab:hover, .console-bar .tab.on { background: var(--card); }

/* What the row is. Without it a second line of tabs under the first is a bar
 * that has simply wrapped. */
.bar-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--quiet);
  margin-right: 6px;
}

.spacer { flex: 1 1 auto; }

.who {
  font-size: 13px;
  color: var(--quiet);
  max-width: 14ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

button.link {
  background: none;
  border: 0;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--quiet);
  cursor: pointer;
  border-radius: 999px;
}

button.link:hover { background: var(--paper); color: var(--ink); }

/* ---------------------------------------------------------------- shell -- */

main {
  max-width: 620px;
  margin: 0 auto;
  padding: 28px 16px 64px;
}

main.wide { max-width: 900px; }

/* The console's schedule is the widest table here: ten columns, three of them
 * figures about how a day played. It gets more room than the pages beside it
 * because it is the one page nobody reads - an editor is working at it, on the
 * screen they write puzzles on, rather than reading it on a phone. */
main.widest { max-width: 1140px; }

body.centered main {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 20px;
}

.card + .card { margin-top: 16px; }

h1 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
}

h2 {
  font-size: 17px;
  margin: 0 0 12px;
}

/* The third level exists on one page - the one that explains the scoring - and
   it is a heading inside a card rather than a card of its own, because the
   halves of a score are one subject. */
h3 {
  font-size: 15px;
  margin: 22px 0 10px;
}

/* A list that is prose rather than a table: the rules of the game, written out
   on the page that answers questions about them. */
.faq-list { margin: 0; padding-left: 20px; }
.faq-list li { margin-bottom: 10px; }
.faq-list li:last-child { margin-bottom: 0; }

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.quiet { color: var(--quiet); font-size: 14px; }
.center { text-align: center; }

/* --------------------------------------------------------------- puzzle -- */

.puzzle-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.puzzle-number {
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
}

.prompt {
  font-size: 22px;
  line-height: 1.35;
  letter-spacing: -0.01em;
  font-weight: 600;
  margin: 0 0 4px;
}

/* ---------------------------------------------------------------- form --- */

.guess-form {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

input[type="number"],
input[type="text"],
input[type="email"],
input[type="date"],
input[type="url"],
textarea {
  flex: 1 1 auto;
  width: 100%;
  font: inherit;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--paper);
  color: var(--ink);
  min-width: 0;
}

input:focus, textarea:focus {
  outline: 2px solid var(--cold);
  outline-offset: 1px;
}

.guess-form input {
  font-size: 20px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* The one box left on the closed site: an address, and the button that keeps
   it. The guess form's shape - a field and a button on one line - without the
   guess's large figures, because an address is read rather than compared. */
.signup-form {
  display: flex;
  gap: 8px;
}

/* The spinners on a number input are a fiddly target next to a large button,
 * and the keyboard is the only way anybody actually enters a guess. */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

button.go, .button {
  font: inherit;
  font-weight: 600;
  padding: 12px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
}

button.go:hover, .button:hover { opacity: 0.9; }
button.go:disabled { opacity: 0.4; cursor: default; }

.button.quiet-button, button.go.quiet-button {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}

/* The admin's replay, which is a debugging tool sitting on the page everybody
 * else plays on: small, quiet, and never the thing the eye lands on. */
.clear-row {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.clear-row button.go.quiet-button { padding: 8px 14px; font-size: 14px; }

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

.board { margin-top: 18px; }

.play {
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 8px;
  background: var(--card);
}

/* The guess, the try it was and what it earned, on one line. It is its own row
   inside the play rather than the play itself, so that the opening can hang a
   second line under it without every other row growing a wrapper it does not
   use. */
.play-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* The opening is the one guess judged against the answer rather than against
   the guess before it, and the one whose verdict needs a sentence. It gets the
   room to say it. */
.play.opening {
  padding: 12px 14px 10px;
}

.play-note {
  margin: 6px 0 0;
  padding-left: calc(2.5ch + 12px);
  font-size: 13px;
  color: var(--quiet);
}

.play .try {
  font-size: 12px;
  color: var(--quiet);
  width: 2.5ch;
  font-variant-numeric: tabular-nums;
}

.play .number {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto;
}

/* The temperature in words, which one row in a game carries: the opening, and
   the guess that got it. It is a square solid, and the shape is the point - it
   is a different kind of answer from the direction below, and the two should
   not be mistakable for each other at a glance down the board. */
.verdict {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 4px;
}

/* The direction, which every row after the opening carries instead. A rounded
   outline against the temperature's square solid: two shapes for two questions,
   so a board read quickly never has to work out which one it is looking at. */
.move {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid currentColor;
  background: transparent;
}

.move.hot { color: var(--hot); }
.move.cold { color: var(--cold); }

.play.hot { background: var(--hot-wash); border-color: var(--hot); }
.play.hot .verdict { background: var(--hot); color: var(--hot-ink); }
.play.warm { background: var(--warm-wash); border-color: var(--warm); }
.play.warm .verdict { background: var(--warm); color: var(--warm-ink); }
.play.cold { background: var(--cold-wash); border-color: var(--cold); }
.play.cold .verdict { background: var(--cold); color: var(--cold-ink); }
.play.verycold { background: var(--verycold-wash); border-color: var(--verycold); }
.play.verycold .verdict { background: var(--verycold); color: var(--verycold-ink); }
.play.win { background: var(--win-wash); border-color: var(--win); }
.play.win .verdict { background: var(--win); color: var(--win-ink); }

.play.latest { transform: none; animation: land 0.28s ease-out; }

@keyframes land {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .play.latest { animation: none; }
}

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

.reveal { border-color: var(--win); }

.answer {
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  margin: 4px 0 12px;
}

/* What the number counts, on the same line as the number. "66" and "hot dogs"
   are one fact, and on two lines they were two thirds of the height of the box
   for the shortest thing in it. */
.answer-unit {
  color: var(--quiet);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0;
}

/* The squares are drawn in the rows the share text writes them in, so what is
   on the page and what lands in a group chat are the same shape. That is what
   the pre-wrap is for: the run arrives with its line breaks already in it. */
.squares {
  font-size: 22px;
  letter-spacing: 2px;
  line-height: 1.35;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0;
}

.score-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}

/* The score sits beside the squares rather than under them, because it is what
   they came to. */
.score {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  color: var(--win);
}

/* The word the number counts, said quietly beside it - the same word the paste
   uses, because the two are read one above the other. */
.score-unit {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--quiet);
  margin-left: 2px;
}

/* The editor's line on the reveal, when a puzzle carries one. It is set apart
   from the story above it by a rule down its left rather than by a box: it is an
   aside in the middle of the result and not a notice about it, and a bordered
   panel in there would read as an error. */
.puzzle-note {
  margin: 12px 0 0;
  padding: 2px 0 2px 12px;
  border-left: 3px solid var(--hot);
  color: var(--quiet);
  font-size: 14px;
  line-height: 1.55;
}

/* Where the score came from, under the score. It is quiet type because it is an
   explanation of the number above it rather than a second number. */
.score-parts {
  margin: 0 0 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--quiet);
}

.score-parts strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* A game that ran out is finished, and it is not a win. */
.reveal.spent { border-color: var(--line); }
.reveal.spent .score { color: var(--quiet); }

/* The copy button sits under the text it copies rather than over it, so that
   what lands on the clipboard is the thing directly above the button that put
   it there. */
.share-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 10px;
}

/* The way to the page that explains a score, beside the score itself. It is a
   question mark rather than a sentence because the sentence used to be under
   every result box, saying the same thing to somebody reading their thirtieth
   one. */
.score-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--quiet);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  vertical-align: middle;
}

.score-help:hover { color: var(--ink); border-color: var(--quiet); }

/* The foot of the reveal: where the number came from, and the way to say it is
   wrong. Both are things somebody does after reading the box rather than
   while, so they are under a rule at the bottom of it. */
.reveal-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 14px;
  font-size: 14px;
}

/* The icons beside those two links.
   
   The spacing is a margin on the icon rather than anything conditional on the
   icon being there. A kit that is blocked or slow leaves an empty <i> and seven
   pixels of nothing in front of the word, which is a link that looks very
   slightly wide; the rules that would close that gap all key off :empty, and an
   <i> drawn by a webfont rather than by an inline svg is still empty to CSS. A
   link that reads oddly is worth a great deal more than an icon that vanished
   because the kit was configured the other way. */
.reveal-links a {
  display: inline-flex;
  align-items: baseline;
}

.reveal-links a i {
  margin-right: 7px;
  font-size: 13px;
  line-height: 1;
}

.share-text {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  white-space: pre;
  overflow-x: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  margin-top: 12px;
}

.countdown { font-variant-numeric: tabular-nums; font-weight: 600; }

/* --------------------------------------------------------------- stats --- */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 12px;
  margin-top: 4px;
}

.figure { text-align: center; }

.figure .value {
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

.figure .name {
  font-size: 12px;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* -------------------------------------------------------------- tables --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--quiet);
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

td {
  padding: 10px;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

tr:last-child td { border-bottom: 0; }

td.number, th.number { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A date is one thing and should be on one line. The table it is in scrolls
 * sideways rather than wrapping, so this costs a narrow phone a scroll rather
 * than three lines of "Aug 27, 2026" stacked in a column. */
td.day { white-space: nowrap; }

/* The schedule's question is the one column that can be four hundred
 * characters, beside nine that are a number or a date each. Without a floor it
 * collapses to a word a line the moment the play columns have figures in them,
 * and the table it is in scrolls sideways rather than wrapping. */
td.question { min-width: 260px; }

.table-scroll { overflow-x: auto; }

.pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--paper);
  border: 1px solid var(--line);
  color: var(--quiet);
  white-space: nowrap;
}

.pill.live { background: var(--win-wash); border-color: var(--win); color: var(--win); }

/* A day that has been played. It is drawn in the coldest of the four rather
   than in the green, because the green on this site means the guess that got it
   and a month of green pills would drown the one square that is today. Nothing
   about a completed day is an achievement to mark; it is a state to read. */
.pill.done { background: var(--verycold-wash); border-color: var(--verycold); color: var(--verycold); }
.pill.draft { background: var(--hot-wash); border-color: var(--hot); color: var(--hot); }

/* The calendar's third mark, drawn like the square it stands for rather than
   like the two pills beside it: a hole in the schedule is an empty day, so the
   thing that explains one is empty too. */
.pill.gap { background: none; border-color: var(--hot); border-style: dashed; color: var(--hot); }

/* -------------------------------------------------- which site this is --- */

/* Drawn only on a deployment that is not the real one. It is deliberately not
   in the palette the game uses - every color in here means something on a board,
   and a strip that shared one would read as part of the puzzle. */
.environment-bar {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px 14px;
  background: #6b21a8;
  color: #ffffff;
  font-size: 13px;
  line-height: 1.4;
  text-align: center;
}

.environment-bar strong {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
}

.environment-bar span { opacity: 0.85; }

/* --------------------------------------------------------------- forms --- */

.field { margin-bottom: 14px; }

.field label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 5px;
}

.field .hint { font-size: 12px; color: var(--quiet); margin-top: 4px; }

.field textarea { min-height: 90px; resize: vertical; }

.checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.checkbox input { width: auto; flex: 0 0 auto; }

.actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 18px;
}

.actions .spacer { flex: 1 1 auto; }

.danger {
  background: none;
  border: 1px solid var(--hot);
  color: var(--hot);
}

/* -------------------------------------------------------------- notices -- */

.notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border-radius: 10px;
  margin-bottom: 16px;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--card);
}

.notice.bad { background: var(--hot-wash); border-color: var(--hot); color: var(--hot); }
.notice.good { background: var(--win-wash); border-color: var(--win); color: var(--win); }

#error { display: none; }

/* --------------------------------------------------------------- rules --- */

.rules { margin-top: 16px; }

.rules summary {
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: var(--quiet);
}

.rules ul { margin: 12px 0 0; padding-left: 20px; }
.rules li { margin-bottom: 8px; font-size: 14px; }

footer {
  max-width: 620px;
  margin: 0 auto;
  padding: 0 16px 40px;
  font-size: 13px;
  color: var(--quiet);
  text-align: center;
}

footer a { color: var(--quiet); }

@media (max-width: 480px) {
  h1 { font-size: 22px; }
  .prompt { font-size: 19px; }
  .answer { font-size: 34px; }
  .guess-form { flex-wrap: wrap; }
  .guess-form button { width: 100%; }
  .signup-form { flex-wrap: wrap; }
  .signup-form button { width: 100%; }
}

/* A report on the edit page: somebody's complaint, and the two buttons that
   answer it. The open ones are marked, because the whole point of the block is
   the queue and a wall of closed ones would bury it. */
.report-row {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.report-row:first-of-type { border-top: 0; }
.report-row.open { border-left: 3px solid var(--hot); padding-left: 12px; }
.report-row p { margin: 0 0 8px; }
.report-row a { word-break: break-all; }

/* The report form on the board, which is a details block like the rules above
   it rather than a card of its own: it is the least important thing on the page
   until it is the only thing somebody wants. */
/* Far enough below the reveal to be a separate thing. It used to sit directly
   against the box above it, which read as part of it. */
.report { margin-top: 24px; }
.report .field { margin-top: 12px; }
.report textarea { min-height: 70px; }

/* One message in the feedback inbox. It is the report row's shape, because the
   two pages are read the same way - a pile of things people wrote, with the
   ones nobody has been through marked. */
.feedback-row {
  border-top: 1px solid var(--line);
  padding-top: 14px;
  margin-top: 14px;
}

.feedback-row:first-of-type { border-top: 0; }
.feedback-row.open { border-left: 3px solid var(--hot); padding-left: 12px; }
.feedback-row p { margin: 0 0 8px; }
.feedback-row a { word-break: break-all; }

/* What somebody actually wrote, kept as they wrote it: a message typed with
   line breaks in it is a message with line breaks in it. */
.feedback-row .said { white-space: pre-wrap; }

/* The button in the footer, which is a link. It is not a tab and it is not a
   call to action - it sits under the sentence about midnight and is the size of
   the sentence. */
footer .button { margin-top: 4px; }

/* The folded half of the puzzle form. Most puzzles want the number exactly and
   have no link behind them, so those two fields are behind a summary rather
   than between the question and the publish box - a form whose every field has
   to be read is a form where the three that matter are harder to find. */
.advanced {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
}

.advanced summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--quiet);
}

.advanced[open] summary { margin-bottom: 14px; }
.advanced .field:last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- console -- */

/* Today, on the console, is a card rather than a row. The accent down its left
   edge is what tells somebody at a glance which of the four boxes on this page
   is the day being played - the rest of the page is a schedule, and this is the
   one part of it that is happening. */
.card.today {
  border-left: 3px solid var(--win);
}

/* A day with nothing written on it is the same card saying so, in the colour
   the rest of the site uses for something wrong rather than something live. */
.card.today.empty {
  border-left-color: var(--hot);
}

.today-question {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 6px;
}

.today .figures { margin-top: 14px; }

.today-reports {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}

.today-reports h3 { margin: 0 0 10px; }

/* The days gone, folded away. It is a card that opens rather than a card with a
   heading, so the summary has to carry the weight a heading would. */
.past-days summary {
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
}

.past-days[open] summary { margin-bottom: 12px; }

/* ------------------------------------------------------------- calendar -- */

/* The schedule as months. The thing this shape is for is the day nobody has
 * written: in a list it is not a row and cannot be seen at all, and here it is
 * an empty square in a run of them. So the styling spends everything it has on
 * the difference between a square with something on it and a square without,
 * and the rest of the grid stays out of the way. */

.month + .month { margin-top: 16px; }

.calendar { margin-top: 14px; }

.weekdays, .week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}

.week + .week { margin-top: 6px; }

.weekdays {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--quiet);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 92px;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  overflow: hidden;
}

/* A day either side of the month. It holds the column open and says nothing. */
.cell.blank { border-color: transparent; background: none; min-height: 0; }

.cell:hover { border-color: var(--quiet); }

/* A hole in the run: somebody wrote either side of this day and missed it, so
 * it will arrive with nothing on it. It is the one thing on this page that is
 * wrong, and it is drawn in the colour the rest of the site uses for that.
 *
 * The empty days past the end of the written run get nothing at all. They are
 * how far ahead the schedule reaches rather than a list of failures, and marking
 * them the same way would mean the further ahead somebody wrote, the more the
 * page looked like it was on fire. */
.cell.gap {
  background: var(--hot-wash);
  border-color: var(--hot);
  border-style: dashed;
}

.cell.gap .cell-question { color: var(--hot); }

/* A day that has been. It is drawn because the weeks have to line up under
 * their weekdays, and it is drawn quietly because nothing on it can be changed
 * usefully any more. */
.cell.gone { opacity: 0.55; }

/* A written day players cannot see. It is the one thing on this page worth a
 * colour: it looks exactly like a published day from a distance, and a
 * fortnight of them is a fortnight that will arrive empty. */
.cell.draft { border-color: var(--hot); background: var(--hot-wash); }

/* The day being played, marked the way the console marks it. */
.cell.today { border-color: var(--win); background: var(--win-wash); }

.cell-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
}

.cell-day { font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; }

.cell-mark { font-size: 11px; white-space: nowrap; }
.cell.today .cell-mark { font-weight: 600; color: var(--win); }

/* The tick in the corner of a day that has run. It sits where the puzzle number
   sits on the days that have not, because they are the same corner answering
   the same question - what is this day - and a square cannot say both without
   becoming a paragraph. */
.cell-done {
  font-size: 14px;
  line-height: 1;
  color: var(--verycold);
}

/* A day gone is drawn faint because nothing useful can be done to it. A day
   gone with a puzzle on it is also a record somebody has come here to read, and
   at 0.55 a whole month of them is a page of grey. So a completed square comes
   most of the way back up: still settled, still legible. */
.cell.gone.completed { opacity: 0.85; }

/* The question, clamped. A square holds about as much of one as somebody needs
 * to recognise which puzzle it is; the whole of it is one click away on the
 * page that can change it. */
.cell-question {
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cell-question.empty { color: var(--quiet); }

.cell-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.cell-foot .pill { font-size: 10px; padding: 1px 6px; }


/* Dragging a day onto another one.
 *
 * The grid already spends its colour on the difference between a square with
 * something on it and a square without, and a drag must not compete with that:
 * a page that lights up while a puzzle is being carried is a page where the
 * gaps stop being the loudest thing on it. So the states here are the outline
 * and the cursor, and the fills are left alone. */

/* A square that can be picked up says so under the cursor. The rest keep the
 * pointer they had, because they are still links and still open. */
.cell[draggable="true"] { cursor: grab; }
.calendar .cell[draggable="true"]:active { cursor: grabbing; }

/* The one being carried. It stays where it was - the browser is already drawing
 * the copy that follows the cursor - and goes faint so that the square it came
 * from reads as the hole it is about to become. */
.cell.carrying { opacity: 0.4; }

/* Where it would land. The outline is the whole of the mark: it has to be
 * legible over a published day, a draft and a gap alike, all three of which
 * already have a fill and a border colour of their own. */
.cell.over { outline: 2px solid var(--win); outline-offset: -2px; }

/* Landing on a day that already has a puzzle, which is a swap rather than a
 * move: both days end up with something on them and both change number. It is
 * worth being able to tell before letting go, so it is a different mark rather
 * than the same one. */
.cell.over-swap { outline-color: var(--ink); outline-style: dashed; }

/* While a drag is in the air, the squares stop being hover targets - the
 * border the grid lifts on hover reads as "you may drop here" when something is
 * being carried, and it is drawn on squares that would refuse. */
#schedule.dragging .cell:hover { border-color: var(--line); }
#schedule.dragging .cell.blank { pointer-events: none; }

/* And while the move is actually being written, nothing on the grid takes a
 * click: the tail of a drag must not walk off the page mid-request. */
#schedule.moving .cell { pointer-events: none; }
#schedule.moving .cell.busy { opacity: 0.5; }

.legend { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 0; }

/* A seven column month on a narrow screen is seven columns whatever else is
 * given up, because a calendar with the weeks broken is not a calendar. What
 * goes is the question: the squares keep their day, their state and their
 * colour, which is the whole of what this page is read for at a glance. */
@media (max-width: 720px) {
  .cell { min-height: 44px; padding: 4px; }
  .cell-question, .cell-foot, .cell-mark { display: none; }
  .weekdays { font-size: 10px; }

  /* The month and how it stands, stacked rather than squeezed. Side by side in
   * this width the heading wraps mid-name, which reads as two months. */
  .month .puzzle-head { flex-wrap: wrap; }
}

/* --------------------------------------------------------------- report -- */

/* The question a report is about, on the page where one is written. It is the
   puzzle read back rather than the puzzle played, so it is quieter than the
   board's prompt and louder than the line above it. */
.report-question {
  font-size: 18px;
  line-height: 1.4;
  font-weight: 600;
  margin: 0 0 14px;
}

/* Stepping the calendar a month at a time. It is a row of links rather than a
   select, because there are two of them and they are the whole of the choice -
   a menu of every month this site has ever had would be a list that grows by
   one every thirty days and is never the thing anybody wanted. */
.months {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
}

/* --------------------------------------------------------------- spread -- */

/* The shape of a puzzle: seventeen bands running from far under the answer,
   through the answer itself, to far over it.
 *
 * The bands are one colour and the answer's own column is another. They are not
 * drawn hot and cold, deliberately: hotter and colder mean nearer and further
 * in this game, and colouring the high side red would be a second meaning for
 * the word on the one page where being high and being wrong are different
 * things. Which side of the answer a column is on is where it is drawn. */
.spread-scroll {
  overflow-x: auto;
  margin: 16px 0 4px;
}

.spread {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  min-width: 520px;
}

.spread-band {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

/* The column is a fixed height that the fill grows inside, so every band shares
   one baseline and the tallest one reaches the top. */
.spread-column {
  height: 150px;
  display: flex;
  align-items: flex-end;
  border-bottom: 1px solid var(--line);
}

.spread-fill {
  width: 100%;
  min-height: 1px;
  background: var(--verycold);
  border-radius: 3px 3px 0 0;
}

/* An empty band is a fact rather than a gap - nobody guessed anything that far
   out - so it keeps a hairline rather than disappearing. */
.spread-fill[style*="height:0.0%"] { background: var(--line); }

.spread-band.answer .spread-fill { background: var(--win); }

.spread-band.answer .spread-label {
  color: var(--win);
  font-weight: 600;
}

.spread-count {
  font-size: 11px;
  color: var(--quiet);
  font-variant-numeric: tabular-nums;
  height: 16px;
  white-space: nowrap;
}

.spread-label {
  font-size: 11px;
  color: var(--quiet);
  padding-top: 5px;
  white-space: nowrap;
}

/* Which end is which, under the whole thing rather than on every column. */
.spread-axis {
  display: flex;
  justify-content: space-between;
  min-width: 520px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--quiet);
}

.spread-axis .spread-here {
  color: var(--win);
  font-weight: 600;
}