/* ============================================================
   THE PUZZLE ARCHIVE - one look, every game
   ============================================================

   Star Miner, Objectivity, Towerpath and Chess Reactions each grew their
   own archive. They had already converged on the same class names -
   .archgrid, .archcell, .an, .ad, .as - and then styled them four
   different ways, so the shared vocabulary was doing the opposite of its
   job. This file is the single definition; each game links it AFTER its
   own stylesheet and deletes its local copy.

   It is written entirely in tokens every one of those games already
   defines (--display, --mono, --surface, --line, --ink, --ink-faint,
   --accent, --accent-soft, --gold, --gold-soft, --sunken, --good,
   --good-bg, --shadow). Nothing here hardcodes a colour, so each game
   keeps its own palette and its own light and dark themes for free.

   The trivia archive is the model - it was the best of the five - with
   the cards given a little more room and the state stripe made
   layout-neutral.
   ============================================================ */

/* ---- heading ---- */
.archhead{text-align:center; margin:0 0 1.4rem}
.archhead h2{
  font-family:var(--display); font-weight:600; font-size:1.5rem;
  color:var(--ink); margin:0 0 .3rem; letter-spacing:.01em;
}
.archhead p{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-faint); margin:0;
}

/* ---- grid ----
   Fixed column counts rather than auto-fill: the long date sets the card's
   minimum width, and auto-fill quietly drops to three across on a screen
   with room for four. */
.archgrid{display:grid; grid-template-columns:repeat(4,1fr); gap:.6rem; align-items:stretch}
@media (max-width:44rem){ .archgrid{grid-template-columns:repeat(3,1fr)} }
@media (max-width:30rem){ .archgrid{grid-template-columns:repeat(2,1fr)} }

/* ---- card ----
   The state stripe is a transparent 3px left border on every card, coloured
   in only when there is a state to show. Adding the border on the modifier
   instead would shift the text of played cards two pixels right of unplayed
   ones, which reads as a wobbling grid. */
.archcell{
  display:flex; flex-direction:column; align-items:flex-start; gap:.28rem;
  text-decoration:none; background:var(--surface);
  border:1px solid var(--line); border-left:3px solid transparent;
  border-radius:6px; padding:.72rem .7rem .78rem; min-height:5.3rem;
  transition:border-color .18s ease, transform .14s ease, box-shadow .18s ease, background .18s ease;
}
a.archcell:hover{border-color:var(--accent); transform:translateY(-2px); box-shadow:var(--shadow)}
a.archcell:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

.archcell .an{
  font-family:var(--display); font-weight:700; font-size:1.15rem;
  color:var(--ink); line-height:1; font-variant-numeric:tabular-nums;
}
.archcell .ad{
  font-family:var(--mono); font-size:.56rem; letter-spacing:.02em;
  color:var(--ink-faint); white-space:nowrap;
}

/* ---- the status pill ----
   Pushed to the bottom of the card so every pill in a row sits on one line
   however tall the date wraps. */
.archcell .as{
  margin-top:auto; display:inline-block;
  font-family:var(--mono); font-size:.6rem; font-weight:600; letter-spacing:.06em;
  padding:.16rem .42rem; border-radius:3px;
  background:var(--gold-soft); color:var(--gold); white-space:nowrap;
}
.archcell .as.open,
.archcell .as.none{background:var(--sunken); color:var(--ink-faint); font-weight:500}
.archcell .as.locked{background:transparent; color:var(--ink-faint); opacity:.55; padding-left:0}
.archcell .as.lost{background:var(--sunken); color:var(--ink-faint)}
.archcell .as.perfect{background:var(--good-bg); color:var(--good)}
/* ---- star rows ----
   Every game draws all five stars as the SAME solid glyph and distinguishes
   them by colour. The alternative - a filled ★ next to a hollow ☆ - fails at
   pill size: two glyphs of the same colour differing only in whether their
   middle is drawn, so an empty star reads as a slightly thinner full one and
   you cannot count your score at a glance.

   Earned stars are gold; the rest are near-black with a faint rim, which is
   Objectivity’s treatment and works on both the dark pill and the light one.
   Black alone would vanish into a dark card, so the rim is what keeps the
   silhouette countable. */
.archcell .as.stars{letter-spacing:.04em; background:var(--gold-soft); color:var(--gold)}
.archcell .as.stars i,
.archcell .as.stars .lit{font-style:normal; color:var(--gold)}
.archcell .as.stars i.out,
.archcell .as.stars .unlit{
  font-style:normal; color:#05060B;
  text-shadow:0 0 1px rgba(255,255,255,.42), 0 0 2px rgba(255,255,255,.42);
}

/* ---- states ---- */
.archcell.is-done{border-left-color:var(--gold)}
.archcell.is-today{border-color:var(--accent); background:var(--accent-soft)}
.archcell.is-today .an{color:var(--accent)}
.archcell.is-locked{opacity:.5; cursor:default}
.archcell.is-locked:hover{transform:none; border-color:var(--line); box-shadow:none}

/* ---- bonus puzzles: no date, always open, set apart from the calendar ---- */
.archcell.bonus{border-color:var(--gold); background:var(--gold-soft)}
.archcell.bonus .an{color:var(--gold)}
.archcell.bonus .ad{color:var(--gold); opacity:.85}

.archsplit{
  display:flex; align-items:center; gap:.7rem; margin:1.1rem 0 .7rem; color:var(--line);
  font-family:var(--mono); font-size:.58rem; letter-spacing:.18em;
  text-transform:uppercase;
}
.archsplit::before,.archsplit::after{content:""; flex:1; height:1px; background:currentColor}
.archsplit span{color:var(--ink-faint); white-space:nowrap}

.archnote{text-align:center; color:var(--ink-faint); font-size:.9rem; margin:2rem 0}

/* ---- pager ----
   Rendered only when a section has more than one page of puzzles, so most
   games never show it at all. See arc.js. */
.arcpager{
  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;
  gap:.35rem; margin:1.3rem 0 .4rem;
}
.arcpager .arcpage{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  min-width:2rem; padding:.34rem .5rem; cursor:pointer;
  background:var(--surface); color:var(--ink-faint);
  border:1px solid var(--line); border-radius:5px;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.arcpager .arcpage:hover:not(:disabled){border-color:var(--accent); color:var(--ink)}
.arcpager .arcpage:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.arcpager .arcpage.on{
  background:var(--accent-soft); border-color:var(--accent); color:var(--accent); font-weight:600;
}
.arcpager .arcpage:disabled{opacity:.35; cursor:default}