/* Crowns: daily board, generator explainer and the Crowns lab page.
   Builds on the tokens in styles.css. The six region tones are mixed from the accent,
   rust, ink and card tokens, so one set of mixes follows both themes. The Lab specimen
   (lab.css) and the note thumbnail (notes.css) declare the same six lines; the tests
   keep the copies identical, keep every pair at least 0.10 apart in OKLab in both
   themes, and keep the ink crown at 4.3:1 or more on every tone. */

.crowns {
  container-type: inline-size;
  --cr-t0: color-mix(in oklab, var(--accent) 20%, var(--white));
  --cr-t1: color-mix(in oklab, var(--rust) 34%, var(--white));
  --cr-t2: color-mix(in oklab, var(--ink) 36%, var(--white));
  --cr-t3: color-mix(in oklab, var(--accent) 42%, var(--white));
  --cr-t4: color-mix(in oklab, var(--rust) 66%, var(--white));
  --cr-t5: color-mix(in oklab, var(--accent) 64%, var(--white));
  --cr-edge: var(--ink);
  --cr-hairline: color-mix(in oklab, var(--ink) 16%, transparent);
}

/* ---------- Shell ---------- */
.cr-daily,
.cr-gen {
  padding: clamp(14px, 2.2vw, 28px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.cr-layout {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  align-items: start;
}
@container (min-width: 700px) {
  .cr-layout {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .cr-board {
    max-width: none;
  }
  .cr-play {
    position: sticky;
    top: calc(var(--header-h) + 1rem);
  }
}
.cr-play {
  min-width: 0;
}
.cr-side {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  min-width: 0;
}

/* Lab page hero: the heading sits beside the board on wide screens, above it on narrow ones. */
.cr-daily.cr-hero {
  padding: clamp(1rem, 3vw, 2.25rem) 0 0;
  border: 0;
  border-radius: 0;
  background: none;
}
.cr-hero .cr-layout {
  grid-template-areas: "intro" "play" "side";
}
.cr-hero .cr-intro.crowns-heading {
  grid-area: intro;
  display: block;
  max-width: none;
  padding: 0;
}
.cr-hero .crowns-heading h1 {
  font-size: var(--step-5);
}
.cr-hero .crowns-heading > p:not(.readout) {
  margin-top: 1rem;
  font-size: var(--step-1);
  max-width: 34ch;
}
.cr-hero .cr-play {
  grid-area: play;
}
.cr-hero .cr-side {
  grid-area: side;
}
@container (min-width: 700px) {
  .cr-hero .cr-layout {
    grid-template-columns: minmax(0, 37.5rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "play intro" "play side";
    column-gap: clamp(2rem, 5.5vw, 6rem);
    row-gap: 1.75rem;
  }
  .cr-hero .cr-side,
  .cr-hero .cr-intro {
    max-width: 34rem;
  }
}

/* ---------- Board ---------- */
.cr-board {
  position: relative;
  isolation: isolate;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
  aspect-ratio: 1;
  border: 2px solid var(--cr-edge);
  border-radius: 12px;
  overflow: hidden;
  background: var(--paper);
}
.cr-hero .cr-board {
  max-width: 37.5rem;
}
.cr-grid {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
}
.cr-row {
  display: grid;
  grid-template-columns: repeat(var(--n), minmax(0, 1fr));
}
.cr-cell {
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0;
  background-color: var(--tone, transparent);
  color: var(--ink);
  -webkit-user-select: none;
  user-select: none;
  outline: 3px solid transparent;
  outline-offset: -3px;
  transition: background-color 0.3s var(--ease);
}
.cr-cell::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 3px;
}
.cr-edges {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}
.cr-hair {
  fill: none;
  stroke: var(--cr-hairline);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cr-bound {
  fill: none;
  stroke: var(--cr-edge);
  stroke-width: 3;
  stroke-linecap: square;
  vector-effect: non-scaling-stroke;
}
.cr-glyph {
  display: block;
  width: 64%;
  height: 64%;
  overflow: visible;
}
.cr-crown,
.cr-mark {
  display: none;
}
.cr-cell[data-state="2"] .cr-crown,
.cr-cell[data-state="1"] .cr-mark {
  display: inline;
}
.cr-crown {
  fill: currentColor;
  stroke: var(--white);
  stroke-width: 1.4px;
  stroke-linejoin: round;
  paint-order: stroke fill;
  transform-box: fill-box;
  transform-origin: 50% 70%;
}
.cr-mark {
  fill: none;
  stroke: color-mix(in oklab, var(--ink) 62%, transparent);
  stroke-width: 2.1px;
  stroke-linecap: round;
}
@media (prefers-reduced-motion: no-preference) {
  .cr-daily .cr-cell[data-state="2"] .cr-crown {
    animation: cr-pop 0.4s var(--spring);
  }
}
@keyframes cr-pop {
  from {
    transform: scale(0.55);
  }
}

/* Interaction */
.cr-daily .cr-cell {
  cursor: pointer;
  touch-action: manipulation;
}
@media (hover: hover) {
  .cr-daily:not([data-solved]) .cr-cell:hover {
    background-color: color-mix(in oklab, var(--tone) 86%, var(--ink));
  }
}
.cr-cell:focus-visible {
  outline-color: transparent;
}
.cr-cell:focus-visible::after {
  box-shadow:
    inset 0 0 0 3px var(--accent),
    inset 0 0 0 5px var(--white);
}
/* A rule break replaces the region tone with a rust tint and hatching; borders still show the region. */
.cr-cell[data-conflict] {
  color: var(--rust);
  background-color: color-mix(in oklab, var(--rust) 20%, var(--white));
  background-image: repeating-linear-gradient(
    135deg,
    color-mix(in oklab, var(--rust) 34%, transparent) 0 2px,
    transparent 2px 7px
  );
}
.cr-cell[data-hint]::after {
  box-shadow:
    inset 0 0 0 2px var(--white),
    inset 0 0 0 5px var(--accent);
}
.cr-daily[data-solved] .cr-cell {
  cursor: default;
}
.cr-daily[data-solved] .cr-cell[data-state="1"] .cr-mark {
  display: none;
}
.cr-daily[data-solved] .cr-cell[data-state="2"] {
  background-color: var(--ink);
  background-image: none;
  color: var(--white);
}
.cr-daily[data-solved] .cr-crown {
  stroke: none;
}
/* Solve: a ripple out from the last move, in discrete steps. */
.cr-daily[data-celebrate] .cr-cell:not([data-state="2"]) {
  animation: cr-wave 0.45s steps(3, jump-end) calc(var(--d, 0) * 70ms);
}
.cr-daily[data-celebrate] .cr-cell[data-state="2"] {
  animation: cr-lit 0.3s steps(2, jump-end) calc(var(--d, 0) * 70ms) backwards;
}
@keyframes cr-wave {
  from {
    background-color: color-mix(in oklab, var(--accent) 45%, var(--tone));
  }
}
@keyframes cr-lit {
  from {
    background-color: var(--tone);
    color: var(--ink);
  }
}

/* Generator board */
.cr-gen .cr-cell[data-alt] {
  color: var(--rust);
}
.cr-gen .cr-cell[data-alt] .cr-crown {
  stroke-width: 2px;
}
.cr-gen .cr-cell[data-focus]::after {
  box-shadow:
    inset 0 0 0 2px var(--white),
    inset 0 0 0 5px var(--accent);
}
.cr-gen .cr-cell[data-focus][data-alt]::after {
  box-shadow:
    inset 0 0 0 2px var(--white),
    inset 0 0 0 5px var(--rust);
}
/* Before a run: the finished board, quietly, without its crowns. */
.cr-gen[data-preview] .cr-cell {
  background-color: color-mix(in oklab, var(--tone) 55%, var(--white));
}
.cr-gen[data-preview] .cr-bound {
  stroke: var(--muted);
}

/* ---------- Side panel ---------- */
.cr-readout {
  margin: 0;
}
.cr-clock {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.25rem 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.cr-time {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.cr-daily[data-solved] .cr-time {
  color: var(--accent-ink);
}
.cr-progress {
  color: var(--muted);
}
.cr-status,
.cr-caption {
  min-height: 3.3em;
  color: var(--ink-2);
  font-size: var(--step-0);
  line-height: 1.5;
}
.cr-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.cr-actions .quiet-button,
.cr-actions .btn {
  min-height: 44px;
}
.crowns button[aria-disabled="true"] {
  opacity: 0.42;
  cursor: default;
}
.crowns .btn[aria-disabled="true"] {
  transform: none;
}
.cr-solved {
  display: grid;
  gap: 0.75rem;
  padding: 1rem 1.1rem 1.1rem;
  border-radius: 12px;
  background: var(--accent-soft);
}
.cr-solved .eyebrow {
  color: var(--accent-ink);
}
.cr-share-text {
  color: var(--ink);
  overflow-wrap: anywhere;
}
.cr-config {
  display: grid;
  gap: 0.9rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.cr-field {
  display: grid;
  gap: 0.4rem;
  justify-items: start;
}
.cr-seg {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  max-width: 100%;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
.cr-seg button {
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  transition:
    background-color 0.2s var(--ease),
    color 0.2s var(--ease);
}
.cr-seg button:hover {
  color: var(--ink);
}
.cr-seg button[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper);
}
.cr-app {
  font-size: var(--step--1);
}

/* Generator panel */
.cr-phases {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.cr-phases li {
  display: grid;
  gap: 0.15rem;
  margin: 0;
  padding: 0.55rem 0 0;
  border-top: 2px solid var(--line);
  color: var(--muted);
  font-size: var(--step--1);
  font-weight: 650;
  line-height: 1.25;
  transition:
    border-color 0.25s,
    color 0.25s;
}
.cr-phases li[data-done] {
  border-color: var(--ink);
  color: var(--ink);
}
.cr-phases li[data-current] {
  border-color: var(--accent);
  color: var(--accent-ink);
}
.cr-count {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2rem 0.9rem;
}
.cr-count .eyebrow {
  flex-basis: 100%;
}
.cr-count-value {
  font-size: var(--step-5);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.06em;
  font-variant-numeric: tabular-nums;
}
.cr-count-note {
  color: var(--muted);
}
.cr-count-value[data-empty] {
  color: var(--muted);
}
.cr-gen[data-unique] .cr-count-value,
.cr-gen[data-unique] .cr-count-note {
  color: var(--accent-ink);
}
.cr-bar {
  height: 2px;
  background: var(--line);
  overflow: hidden;
}
.cr-bar-fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform-origin: left;
  transform: scaleX(0);
}
.cr-step-count {
  margin-top: -0.6rem;
  color: var(--muted);
}
.cr-seed-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.75rem;
}
.cr-seed {
  color: var(--ink);
  min-width: 9ch;
}
.cr-seed-row .quiet-button {
  min-height: 44px;
}
.cr-outcome {
  padding: 0.85rem 1rem;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: var(--step--1);
}
.cr-outcome .link {
  color: var(--accent-ink);
}

/* Without JavaScript */
.crowns-fallback {
  display: grid;
  gap: 1rem;
  justify-items: start;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
}
.crowns-fallback ol {
  margin: 0;
  padding-left: 1.2rem;
}

/* ---------- Lab page ---------- */
.crowns-rules {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink);
}
/* Rules and keys start where the section heading does (the 9fr column of .section-head). */
.crowns-rules li {
  padding: 1.1rem 0 1.1rem calc((100% - var(--gutter)) / 4 + var(--gutter));
  border-bottom: 1px solid var(--line);
  font-size: var(--step-3);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.035em;
}
.crowns-keys {
  margin-top: 1.4rem;
  margin-left: calc((100% - var(--gutter)) / 4 + var(--gutter));
  color: var(--muted);
}
.crowns-next {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gutter);
}
.crowns-next a {
  display: grid;
  gap: 0.5rem;
  align-content: start;
  padding: clamp(1.25rem, 2.6vw, 2rem);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  transition:
    border-color 0.2s,
    transform 0.35s var(--spring);
}
.crowns-next a:hover {
  border-color: var(--ink);
}
.crowns-next strong {
  font-size: var(--step-2);
  letter-spacing: -0.03em;
}
.crowns-next a:hover strong {
  color: var(--accent-ink);
}
.crowns-next span:not(.eyebrow) {
  color: var(--muted);
}

/* ---------- Note embed ---------- */
.crowns-figure {
  margin: 2.25rem 0;
}
.crowns-figure figcaption {
  margin-top: 0.8rem;
  color: var(--muted);
  font-size: var(--step--1);
  line-height: 1.5;
}
.prose .crowns a.link {
  color: var(--accent-ink);
}
.prose .crowns p {
  margin: 0;
}
/* Article list styles must not reach the widget's own lists. */
.prose .crowns :is(ol, ul),
.prose .crowns li {
  margin: 0;
  padding-left: 0;
}
.prose .crowns .cr-phases li {
  padding-top: 0.55rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .crowns-rules li {
    padding-left: 0;
  }
  .crowns-keys {
    margin-left: 0;
  }
}
@media (max-width: 560px) {
  .cr-daily,
  .cr-gen {
    padding: 0;
    border: 0;
    background: none;
  }
  .cr-daily.cr-hero {
    padding-top: 0.5rem;
  }
  .cr-daily .cr-board[data-n="8"] {
    width: calc(100% + 2 * var(--pad) - 16px);
    max-width: none;
    margin-inline: calc(8px - var(--pad));
  }
  .crowns-next {
    grid-template-columns: 1fr;
  }
}
@media print {
  .cr-config,
  .cr-actions {
    display: none;
  }
}
.cr-compact .cr-board,
.cr-compact .cr-layout .cr-board {
  max-width: 500px;
}