/* Colour Jars board. Inherits the existing theme tokens (--text, --muted, --line, --accent,
   --ink, --action-text, --canvas) and introduces no palette of its own: the four themes carry
   one accent between them, so a token is told apart by its glyph first, then by the weight of
   its chip and the style of its ring. Colour is never the only signal. */
.colourjars { display: grid; justify-items: center; gap: 1.25rem; width: 100%; color: inherit; }
/* Jars never shrink below a full-size target: a wider shelf scrolls inside this frame instead,
   so the page itself never scrolls sideways. */
.colourjars-frame { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
/* As wide as its jars and no wider, so it centres while it fits and scrolls once it does not.
   The padding above leaves room for the lift of the jar in hand, which the scrolling frame
   would otherwise clip. */
.colourjars-shelf { display: flex; align-items: flex-end; gap: .5rem; width: max-content; margin-inline: auto; padding: .5rem .35rem .5rem; }
.colourjars-jar { box-sizing: border-box; flex: 0 0 auto; display: grid; justify-items: center; gap: .3rem; width: 3.25rem; min-width: 44px; margin: 0; padding: .2rem; font: inherit; line-height: 1; color: inherit; background: transparent; border: 0; border-radius: .3rem; cursor: pointer; }
/* The jar itself: open at the top, closed and rounded at the foot. */
.colourjars-stack { box-sizing: border-box; display: grid; grid-auto-rows: minmax(2.1rem, 1fr); gap: .15rem; width: 100%; padding: .2rem; background: color-mix(in srgb, currentColor 4%, transparent); border: 2px solid var(--line, #c2ccbd); border-top: 0; border-radius: .25rem .25rem .9rem .9rem; }
.colourjars-slot { display: grid; place-items: center; min-height: 2.1rem; }
.colourjars-token { box-sizing: border-box; display: grid; place-items: center; width: 100%; height: 100%; min-height: 1.9rem; font-size: clamp(.95rem, 3.5vw, 1.3rem); line-height: 1; border: 2px solid transparent; border-radius: .35rem; }
/* Five token kinds, five glyphs, five treatments. The accent pairs only with --action-text,
   the one contrast the themes guarantee; every other chip is a tint of the text colour, which
   is safe in the light themes and the dark one alike. */
.colourjars-slot[data-colour="0"] .colourjars-token { color: var(--action-text, var(--canvas, #fff)); background: var(--accent, currentColor); border-color: var(--accent, currentColor); }
.colourjars-slot[data-colour="1"] .colourjars-token { background: color-mix(in srgb, currentColor 22%, transparent); border-style: solid; border-color: currentColor; }
.colourjars-slot[data-colour="2"] .colourjars-token { background: color-mix(in srgb, currentColor 12%, transparent); border-style: dashed; border-color: currentColor; }
.colourjars-slot[data-colour="3"] .colourjars-token { background: color-mix(in srgb, currentColor 6%, transparent); border-style: dotted; border-color: currentColor; }
.colourjars-slot[data-colour="4"] .colourjars-token { background: transparent; border-style: double; border-width: 3px; border-color: currentColor; }
.colourjars-mark { font-size: .8125rem; font-variant-numeric: tabular-nums; color: var(--muted, currentColor); }
/* The jar in hand lifts; a jar that can take the run shows an open rim. */
.colourjars-jar.is-held { background: color-mix(in srgb, currentColor 8%, transparent); }
.colourjars-jar.is-held .colourjars-stack { border-color: var(--accent, currentColor); transform: translateY(-.35rem); }
.colourjars-jar.is-open .colourjars-stack { border-color: var(--accent, currentColor); border-style: dashed; }
.colourjars-jar.is-settled .colourjars-stack { border-color: color-mix(in srgb, var(--accent, currentColor) 70%, transparent); background: color-mix(in srgb, currentColor 7%, transparent); }
.colourjars-jar:hover .colourjars-stack { border-color: var(--accent, currentColor); }
/* Both rings are drawn inside the jar: the shelf scrolls, and a scrolling frame clips anything
   painted outside its children. */
.colourjars-jar:focus-visible { outline: 3px solid var(--text, currentColor); outline-offset: -2px; }
.colourjars-jar[aria-current="true"] .colourjars-mark { color: inherit; font-weight: 650; }
.colourjars-jar[aria-current="true"] { box-shadow: inset 0 0 0 2px var(--text, currentColor); }
.colourjars[data-state="blocked"] .colourjars-jar, .colourjars[data-state="waiting"] .colourjars-jar, .colourjars[data-state="solved"] .colourjars-jar { cursor: default; }
.colourjars[data-state="solved"] .colourjars-stack { border-color: var(--accent, currentColor); }
.colourjars-tally { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.75rem; margin: 0; font-size: .875rem; }
.colourjars-metric { display: inline-flex; align-items: baseline; gap: .5rem; }
.colourjars-label { color: var(--muted, currentColor); }
.colourjars-value { font-size: 1.2rem; font-variant-numeric: tabular-nums; }
.colourjars-hint { max-width: 34rem; margin: 0; font-size: .875rem; line-height: 1.5; text-align: center; color: var(--muted, currentColor); }
@media (prefers-reduced-motion: no-preference) {
  .colourjars-stack, .colourjars-token { transition: background-color .18s ease, border-color .18s ease, transform .18s ease; }
}
@media (max-width: 380px) {
  .colourjars { gap: 1rem; }
  .colourjars-shelf { gap: .3rem; padding-inline: .2rem; }
  .colourjars-jar { width: 44px; padding: .1rem; }
  .colourjars-stack { gap: .1rem; grid-auto-rows: minmax(1.9rem, 1fr); }
  .colourjars-slot { min-height: 1.9rem; }
  .colourjars-token { min-height: 1.7rem; }
  .colourjars-tally { gap: .3rem 1.1rem; }
}
@media (forced-colors: active) {
  .colourjars-stack { border-color: CanvasText; background: Canvas; }
  .colourjars-token { background: Canvas; border-color: CanvasText; }
  .colourjars-slot[data-colour="0"] .colourjars-token { background: Highlight; color: HighlightText; border-color: HighlightText; }
  .colourjars-jar.is-held .colourjars-stack, .colourjars-jar.is-open .colourjars-stack { border-color: Highlight; }
  .colourjars-jar[aria-current="true"] { outline: 3px solid Highlight; outline-offset: -3px; }
}
/* The gallery miniature reads as jars: the walls between the columns stay, the rows do not
   divide, and a token is a chip. Keyed to this family, never to a column count. */
.catalogue-grid[data-family="colourjars"] span { border-bottom-color: transparent; }
.catalogue-grid[data-family="colourjars"] span[data-given] { background: color-mix(in srgb, var(--ink) 10%, transparent); }