/* ---- The plate's game, and the Auray band --------------------------------
   Two things that arrived together and share nothing with the page's
   structure: the catalog plate becomes something a reader can work, and the
   last band before the footer says who is behind the platform. They live here
   rather than in `landing.css` because that file is the page's skeleton and
   this is what was built on top of it.

   Tokens only, canonical names: see `tokens.css`. Loaded after `landing.css`. */

/* ---- The plate as a board ------------------------------------------------
   `is-game` is added by `plate-game.js`, so with no script there is no cursor
   change, no focus ring on a list item and no progress bar. */

.catalog-map.is-game .id-cell { cursor: pointer; }
/* The one focus rule is in `base.css`; on the dark band only its colour
   changes, because the page accent has no contrast there. */
.catalog-map.is-game .id-cell:focus-visible {
  outline-color: var(--accent-on-band);
}
/* A satisfied cell reads exactly like a satisfied cell everywhere else in the
   product: the `--ok` fill, never a colour invented for this page. */
.id-cell.is-done {
  background: var(--ok);
  color: var(--on-ok);
  border-color: var(--ok);
}

/* The counted state is two numbers the script owns (`--done`, `--total`) and
   one width CSS derives from them, so nothing here knows how many items the
   catalog carries. */
.plate-progress {
  --done: 0;
  --total: 1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-8) var(--sp-20);
  margin-top: var(--sp-20);
}
.plate-progress__track {
  flex: 1 1 14rem;
  /* A track, not a control: half the smallest space step. */
  height: calc(var(--sp-8) * 0.75);
  border-radius: var(--radius-pill);
  background: var(--band-raised);
  overflow: hidden;
}
.plate-progress__fill {
  display: block;
  height: 100%;
  width: calc(var(--done) / var(--total) * 100%);
  background: var(--ok);
  border-radius: var(--radius-pill);
  transition: width var(--dur-2) var(--ease);
}
.plate-progress__count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-micro);
  color: var(--band-text);
  white-space: nowrap;
}
.plate-progress__finish {
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--accent-on-band);
}


/* ---- Who is behind it ---------------------------------------------------- */

/* One centred column: the logo above the words, everything on the axis, so
   the band reads as a signature rather than a two-column feature. */
.auray__grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-20);
}
/* The wordmark inside the logo is `currentColor`, so the container is what
   carries it into dark mode. The two yellow marks are Auray's own and stay. */
.auray__logo { color: var(--ink-2); }
/* Somebody else's mark, reproduced at a fixed height: artwork, not a
   space step. */
.auray-logo__svg { display: block; height: 4.5rem; width: auto; }
.auray h2 { margin-inline: auto; margin-bottom: var(--sp-8); text-wrap: balance; }
.auray__body {
  margin: 0 0 var(--sp-20);
  color: var(--slate);
  max-width: 56ch;
  margin-inline: auto;
  font-size: var(--fs-small);
  line-height: var(--lh-body);
}
.auray .action-row { justify-content: center; }
.auray__note {
  margin: var(--sp-12) 0 0;
  font-size: var(--fs-small);
  line-height: var(--lh-small);
  color: var(--slate);
}

@media (max-width: 48rem) {
  .auray-logo__svg { height: 3.5rem; }
}