/* COLDCODE, one puzzle a day. The grid, the stamp, the case board.
   Colours and faces come from site.css; nothing here invents a token. */

.cc-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 2.4rem; align-items: start; }
@media (max-width: 860px) { .cc-wrap { grid-template-columns: 1fr; gap: 1.6rem; } }

/* --- the sheet ------------------------------------------------------- */
.cc-sheet { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 1.1rem 1.1rem 1.3rem; }
.cc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid var(--rule); padding-bottom: .7rem; margin-bottom: .9rem; }
.cc-no { font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 40;
  font-weight: 600; font-size: 2rem; line-height: 1; color: var(--ink); }
.cc-no small { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .2em;
  text-transform: uppercase; color: var(--graphite); margin-bottom: .2rem; font-weight: 400; }
.cc-ask { font-family: var(--font-mono); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink); text-align: right; }

/* --- the grid -------------------------------------------------------- */
/* You circle a find the way you would with a pencil: tap the first letter, tap
   the last, and the run between them is looped. Tapping a letter inside a loop
   rubs it out. The loops are drawn on an overlay, so they can be real capsules
   across a diagonal instead of eight squares pretending to be one.
   NOTHING HERE IS CHECKED. The tally counts your own pencil marks, as the page
   has no business telling you whether a circle is right — that is the count you
   type, and typing it is the move that opens the case. */
.cc-board-wrap { position: relative; display: grid; grid-template-columns: 1.9rem 1fr;
  gap: .35rem; align-items: start; }
.cc-ticks { display: grid; gap: 0; }
.cc-tick { border: 0; background: none; padding: 0; color: var(--rule); cursor: pointer;
  font-family: var(--font-mono); font-size: .7rem; line-height: 1; display: flex;
  align-items: center; justify-content: center; -webkit-tap-highlight-color: transparent; }
.cc-tick[aria-pressed="true"] { color: var(--red); }
.cc-tick:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cc-plot { position: relative; width: max-content; }
/* Sized in script to the grid's own pixels — never by `inset`, which an SVG
   carrying a viewBox quietly ignores in favour of its intrinsic ratio. */
.cc-loops { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.cc-grid { display: grid; gap: 0; touch-action: manipulation; }
.cc-cell { font-family: var(--font-mono); line-height: 1; display: flex; align-items: center;
  justify-content: center; background: none; border: 0; padding: 0; color: var(--ink);
  cursor: pointer; border-radius: 50%; -webkit-tap-highlight-color: transparent;
  position: relative; z-index: 1; }
.cc-cell[data-anchor="1"] { background: var(--blue-soft); font-weight: 700; }
.cc-cell:focus-visible { outline: 2px solid var(--blue); outline-offset: -2px; }
.cc-tally { font-family: var(--font-mono); font-size: .72rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--graphite); margin: .6rem 0 0; }
.cc-tally b { color: var(--ink); font-size: 1rem; }

/* --- the stamp ------------------------------------------------------- */
.cc-stamp { display: flex; align-items: center; gap: .7rem; margin-top: 1.1rem; padding-top: .9rem;
  border-top: 1px solid var(--rule); flex-wrap: wrap; }
.cc-stamp .box { display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-mono);
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--ink);
  border-radius: 3px; padding: .35rem .55rem; }
.cc-stamp input { width: 2.6rem; font-family: var(--font-mono); font-size: 1rem; text-align: center;
  border: 1px solid var(--ink); border-radius: 3px; padding: .35rem 0; background: var(--paper);
  color: var(--ink); min-height: 44px; }
.cc-stamp input:disabled { border-style: dashed; color: var(--graphite); }
.cc-said { font-family: var(--font-body); font-size: .95rem; color: var(--graphite); margin: .8rem 0 0; }
.cc-said b { color: var(--ink); font-family: var(--font-mono); font-size: .9rem; letter-spacing: .06em;
  text-transform: uppercase; }
.cc-said.no { color: var(--red); }

/* --- the board ------------------------------------------------------- */
.cc-board { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem; background: var(--sheet); }
.cc-board h2 { font-size: 1.05rem; margin: 0 0 .2rem; }
.cc-rows { display: grid; gap: .3rem; margin: .8rem 0 0; }
.cc-row { display: grid; grid-template-columns: 2.2rem 1fr; align-items: center; gap: .5rem; }
.cc-row > span:first-child { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .1em;
  color: var(--graphite); text-transform: uppercase; }
.cc-dots { display: grid; grid-template-columns: repeat(10, 1fr); gap: 2px; }
/* A day you have reached is a control, not a picture: the board is the only way
   back to a puzzle or a chapter you have already earned. */
.cc-dots i, .cc-dots button { display: block; width: 100%; height: 15px; padding: 0;
  border: 1px solid var(--rule); border-radius: 2px; background: none;
  font-family: var(--font-mono); font-size: .55rem; text-align: center; line-height: 15px;
  color: var(--graphite); font-style: normal; }
.cc-dots button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.cc-dots button:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cc-dots .on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cc-dots .now { border-color: var(--red); }
.cc-fact { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 0;
  font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); cursor: pointer; }
.cc-fact:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.cc-next { font: inherit; font-family: var(--font-mono); font-size: .7rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink); background: none; border: 1px solid var(--rule);
  border-radius: 2px; padding: .25rem .6rem; margin-left: .5rem; cursor: pointer; }
.cc-next:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
/* The code is the state itself, so it is written again on every count and left
   in sight — a reader who wants it safe copies it, or photographs the board.
   Asking for a button press first made keeping your case an errand. */
.cc-keep { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--rule); }
.cc-code { font-family: var(--font-mono); font-size: .95rem; letter-spacing: .06em; color: var(--ink);
  margin: .2rem 0 .5rem; word-break: break-all; user-select: all; }
.cc-link { font: inherit; color: var(--ink); background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.cc-fact.pending { color: var(--rule); }

/* --- the chapter ----------------------------------------------------- */
.cc-chapter { margin-top: 2rem; }
.cc-chapter p { max-width: 64ch; }
.cc-gap { font-family: var(--font-mono); font-size: .92em; letter-spacing: .04em; text-transform: uppercase;
  border-bottom: 1px solid var(--ink); padding: 0 .2em; }
.cc-gap.empty { color: transparent; border-bottom-style: dashed; }
.cc-strip { display: flex; flex-wrap: wrap; gap: .35rem; margin: 1.2rem 0 0; }
/* Ten boxes do not fit across a phone, and left to wrap they broke 8 + 2.
   Measured at 383px: two rows of five read as two halves of one row. */
@media (max-width: 460px) {
  .cc-strip { display: grid; grid-template-columns: repeat(5, 1fr); }
  .cc-box input { width: 100%; }
}
.cc-box { display: inline-flex; flex-direction: column; align-items: center; gap: .15rem; }
.cc-box input { width: 2.3rem; height: 2.6rem; border: 1px solid var(--ink); border-radius: 3px;
  background: var(--paper); color: var(--ink); font-family: var(--font-hand); font-size: 1.5rem;
  text-align: center; padding: 0; text-transform: uppercase; }
.cc-box input:focus-visible { outline: 2px solid var(--blue); outline-offset: 1px; }
.cc-box b { font-family: var(--font-mono); font-size: .5rem; font-weight: 400; color: var(--graphite);
  letter-spacing: .04em; }

/* --- the last grid ---------------------------------------------------- */
.cc-facts { list-style: none; padding: 0; margin: 1rem 0; display: grid; gap: .2rem; }
.cc-facts li { font-family: var(--font-mono); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; }
.cc-facts b { color: var(--graphite); font-weight: 400; margin-right: .5rem; }
.cc-lastgrid { border-collapse: collapse; margin: 1rem 0; font-family: var(--font-mono); font-size: .78rem; }
.cc-lastgrid th { text-align: left; font-weight: 400; letter-spacing: .12em; text-transform: uppercase;
  color: var(--graphite); font-size: .62rem; border-bottom: 1px solid var(--rule); padding: .3rem .9rem .3rem 0; }
.cc-lastgrid td { padding: .18rem .9rem .18rem 0; }
.cc-reveal { font-family: var(--font-display); font-variation-settings: "SOFT" 30, "WONK" 1, "opsz" 48;
  font-weight: 600; font-size: clamp(1.8rem, 5vw, 2.8rem); line-height: 1.05; color: var(--ink);
  margin: .4rem 0 .6rem; }