/*
 * Asterism stylesheet.
 * Every colour, font, radius and spacing value is a token on :root, so the game
 * can adopt whichever site redesign wins by remapping the --ast-* variables.
 */

/* ------------------------------------------------------------------ tokens */
/* Field Notes: the home page's paper, ink and one vermilion accent;
   Newsreader for titles and text, IBM Plex Mono for labels. */
:root {
  /* Type */
  --ast-font-sans: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ast-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --ast-font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ast-text-xs: 11px;
  --ast-text-s: 13px;
  --ast-text-m: 16px;
  --ast-text-l: 20px;
  --ast-text-xl: 27px;
  --ast-tracking-caps: .08em;

  /* Shape and space */
  --ast-radius-s: 2px;
  --ast-radius-m: 3px;
  --ast-radius-l: 6px;
  --ast-space-1: 4px;
  --ast-space-2: 8px;
  --ast-space-3: 12px;
  --ast-space-4: 16px;
  --ast-space-5: 24px;
  --ast-space-6: 32px;
  --ast-space-7: 48px;
  --ast-gutter: 16px;
  --ast-board-max: 680px;
  --ast-side: 360px;

  /* Lines on the chart (px, not scaled with the board) */
  --ast-border-width: 2.75px;
  --ast-frame-width: 3px;
  --ast-grid-width: 1px;
  --ast-motion: 1;

  /* Light: paper and ink */
  --ast-bg: #f4efe5;
  --ast-surface: #faf7f0;
  --ast-surface-2: #ebe4d5;
  --ast-ink: #1a1c21;
  --ast-ink-2: #4a4741;
  --ast-ink-3: #686359;
  --ast-line: #d9d0be;
  --ast-line-strong: #bfb4a0;
  --ast-grid: rgba(26, 28, 33, .17);
  --ast-border: #1a1c21;
  --ast-star: #1a1c21;
  --ast-cross: #5f5b52;
  --ast-accent: #ad3a1f;
  --ast-conflict: #c4321f;
  --ast-conflict-wash: rgba(196, 50, 31, .13);
  --ast-hint: #2853b8;
  --ast-hint-wash: rgba(40, 83, 184, .12);
  --ast-focus: #ad3a1f;
  --ast-pattern: rgba(26, 28, 33, .2);
  --ast-fieldstar: rgba(26, 28, 33, .42);
  --ast-backdrop: rgba(17, 20, 25, .42);
  --ast-tint-l: 94%;
  --ast-tint-c: .034;
  --ast-tint-0: oklch(var(--ast-tint-l) var(--ast-tint-c) 25);
  --ast-tint-1: oklch(var(--ast-tint-l) var(--ast-tint-c) 62);
  --ast-tint-2: oklch(var(--ast-tint-l) var(--ast-tint-c) 98);
  --ast-tint-3: oklch(var(--ast-tint-l) var(--ast-tint-c) 135);
  --ast-tint-4: oklch(var(--ast-tint-l) var(--ast-tint-c) 172);
  --ast-tint-5: oklch(var(--ast-tint-l) var(--ast-tint-c) 208);
  --ast-tint-6: oklch(var(--ast-tint-l) var(--ast-tint-c) 244);
  --ast-tint-7: oklch(var(--ast-tint-l) var(--ast-tint-c) 280);
  --ast-tint-8: oklch(var(--ast-tint-l) var(--ast-tint-c) 316);
  --ast-tint-9: oklch(var(--ast-tint-l) var(--ast-tint-c) 352);
  color-scheme: light;
}

/* Dark: the home page's night ink. Defined twice: system preference and explicit choice. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ast-bg: #111419;
    --ast-surface: #161a21;
    --ast-surface-2: #1c2129;
    --ast-ink: #e9e3d6;
    --ast-ink-2: #b4aea2;
    --ast-ink-3: #948d80;
    --ast-line: #262b34;
    --ast-line-strong: #3a414d;
    --ast-grid: rgba(233, 227, 214, .14);
    --ast-border: #d6cfbf;
    --ast-star: #f4ecd8;
    --ast-cross: #9b958a;
    --ast-accent: #ec8a63;
    --ast-conflict: #ff7a66;
    --ast-conflict-wash: rgba(255, 122, 102, .15);
    --ast-hint: #93b2ff;
    --ast-hint-wash: rgba(147, 178, 255, .15);
    --ast-focus: #ec8a63;
    --ast-pattern: rgba(233, 227, 214, .16);
    --ast-fieldstar: rgba(244, 236, 216, .92);
    --ast-backdrop: rgba(0, 0, 0, .6);
    --ast-tint-l: 28.5%;
    --ast-tint-c: .036;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --ast-bg: #111419;
  --ast-surface: #161a21;
  --ast-surface-2: #1c2129;
  --ast-ink: #e9e3d6;
  --ast-ink-2: #b4aea2;
  --ast-ink-3: #948d80;
  --ast-line: #262b34;
  --ast-line-strong: #3a414d;
  --ast-grid: rgba(233, 227, 214, .14);
  --ast-border: #d6cfbf;
  --ast-star: #f4ecd8;
  --ast-cross: #9b958a;
  --ast-accent: #ec8a63;
  --ast-conflict: #ff7a66;
  --ast-conflict-wash: rgba(255, 122, 102, .15);
  --ast-hint: #93b2ff;
  --ast-hint-wash: rgba(147, 178, 255, .15);
  --ast-focus: #ec8a63;
  --ast-pattern: rgba(233, 227, 214, .16);
  --ast-fieldstar: rgba(244, 236, 216, .92);
  --ast-backdrop: rgba(0, 0, 0, .6);
  --ast-tint-l: 28.5%;
  --ast-tint-c: .036;
  color-scheme: dark;
}

/* -------------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--ast-bg);
  color: var(--ast-ink);
  font: 400 var(--ast-text-m)/1.55 var(--ast-font-sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3, p, figure, dl, dd, ol, ul { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; }
code, kbd, pre { font-family: var(--ast-font-mono); }
kbd {
  display: inline-block;
  min-width: 1.6em;
  padding: 0 .35em;
  border: 1px solid var(--ast-line-strong);
  border-bottom-width: 2px;
  border-radius: var(--ast-radius-s);
  font-size: .82em;
  line-height: 1.5;
  text-align: center;
}
:focus-visible { outline: 2.5px solid var(--ast-focus); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important;
}
.skip-link {
  position: fixed; z-index: 30; left: var(--ast-space-4); top: var(--ast-space-3);
  padding: var(--ast-space-2) var(--ast-space-3);
  background: var(--ast-ink); color: var(--ast-bg); border-radius: var(--ast-radius-s);
}
.skip-link:not(:focus) {
  width: 1px; height: 1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 20px; height: 20px; flex: none; }

/* ------------------------------------------------------------------ topbar */
.topbar {
  /* stays at the top while the page scrolls, like the site's running head */
  position: sticky; top: 0; z-index: 20;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: 56px;
  padding: 0 calc(var(--ast-gutter) - 6px);
  border-bottom: 1px solid var(--ast-line);
  background: var(--ast-bg);
}
.topbar__back {
  display: inline-flex; align-items: center; gap: 2px;
  justify-self: start;
  min-height: 44px; padding: 0 6px;
  color: var(--ast-ink-2);
  font: 500 var(--ast-text-xs)/1 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--ast-radius-s);
}
.topbar__back:hover { color: var(--ast-ink); }
.wordmark {
  display: inline-flex; align-items: center; gap: 7px;
  font: 600 17px/1 var(--ast-font-sans);
  letter-spacing: -.01em;
}
.wordmark__star { width: 15px; height: 15px; fill: var(--ast-accent); }
.topbar__actions { justify-self: end; display: flex; gap: 2px; }
.icon-button {
  display: inline-grid; place-items: center;
  width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: var(--ast-radius-m);
  background: transparent; color: var(--ast-ink-2);
}
.icon-button:hover { color: var(--ast-ink); background: var(--ast-surface-2); }
.icon-button--small { width: 36px; height: 36px; }

@media (max-width: 420px) {
  .topbar__back span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

/* ------------------------------------------------------------------ layout */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "modes" "head" "stage" "controls";
  gap: var(--ast-space-4);
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: var(--ast-space-3) var(--ast-gutter) var(--ast-space-7);
}
.modebar { grid-area: modes; }
.head { grid-area: head; }
.stage { grid-area: stage; min-width: 0; }
.controls { grid-area: controls; display: grid; gap: var(--ast-space-4); align-content: start; min-width: 0; }

@media (min-width: 960px) {
  .layout {
    max-width: calc(var(--ast-board-max) + var(--ast-side) + 120px);
    grid-template-columns: minmax(0, 1fr) var(--ast-side);
    grid-template-rows: auto auto 1fr;
    grid-template-areas: "stage modes" "stage head" "stage controls";
    column-gap: 64px;
    row-gap: var(--ast-space-5);
    padding-top: var(--ast-space-6);
  }
}

/* ----------------------------------------------------------------- modebar */
.modebar {
  display: flex;
  gap: var(--ast-space-5);
  border-bottom: 1px solid var(--ast-line);
}
.modebar__tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
  text-decoration: none;
}
.modebar__tab:hover { color: var(--ast-ink); }
.modebar__tab[aria-current="page"] { color: var(--ast-ink); }
.modebar__tab[aria-current="page"]::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--ast-ink);
}

/* -------------------------------------------------------------------- head */
.head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: "eyebrow timer" "title timer" "meta timer" "practice practice";
  column-gap: var(--ast-space-4);
  align-items: end;
}
.head__eyebrow {
  grid-area: eyebrow;
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1.4 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.head__title {
  grid-area: title;
  margin-top: 2px;
  font: 600 var(--ast-text-xl)/1.15 var(--ast-font-sans);
  letter-spacing: -.015em;
}
.head__meta {
  grid-area: meta;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  margin-top: 6px;
  color: var(--ast-ink-2);
  font: 400 var(--ast-text-s)/1.4 var(--ast-font-mono);
}
.pips { display: inline-flex; gap: 3px; }
.pips i { width: 7px; height: 7px; border: 1.25px solid var(--ast-ink-2); transform: rotate(45deg); }
.pips i.on { background: var(--ast-ink-2); }
.timer-group { grid-area: timer; display: flex; align-items: center; gap: 2px; align-self: end; }
.timer {
  min-width: 4.2ch;
  font: 500 var(--ast-text-l)/1 var(--ast-font-mono);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.timer.is-hidden-by-setting { visibility: hidden; }
.practice-controls {
  grid-area: practice;
  display: flex; flex-wrap: wrap; align-items: end; gap: var(--ast-space-3);
  margin-top: var(--ast-space-4);
}
.field { display: grid; gap: 4px; }
.field span {
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.field select {
  min-height: 40px; padding: 0 30px 0 10px;
  border: 1px solid var(--ast-line-strong); border-radius: var(--ast-radius-m);
  background: var(--ast-surface);
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ast-ink-2) 50%), linear-gradient(135deg, var(--ast-ink-2) 50%, transparent 50%);
  background-position: right 15px top 50%, right 10px top 50%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}

/* ------------------------------------------------------------------- chart */
.chart {
  --n: 8;
  --coord: 16px;
  display: grid;
  grid-template-columns: var(--coord) minmax(0, 1fr);
  grid-template-rows: var(--coord) auto;
  width: 100%;
}
.chart.no-coords { --coord: 0px; }
.chart.no-coords .chart__cols, .chart.no-coords .chart__rows { visibility: hidden; }
.chart__cols, .chart__rows {
  display: grid;
  color: var(--ast-ink-3);
  font: 400 10px/1 var(--ast-font-mono);
  font-variant-numeric: tabular-nums;
}
.chart__cols { grid-template-columns: repeat(var(--n), 1fr); align-items: center; }
.chart__rows { grid-template-rows: repeat(var(--n), 1fr); justify-items: start; align-items: center; }
.chart__cols span, .chart__rows span { text-align: center; }
.chart__cols span.is-active, .chart__rows span.is-active { color: var(--ast-ink); font-weight: 500; }

@media (min-width: 960px) {
  .chart { --coord: 22px; width: min(100%, calc(100svh - 112px), calc(var(--ast-board-max) + var(--coord))); margin-left: auto; }
  .chart__cols, .chart__rows { font-size: 11px; }
}

.board-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  container-type: inline-size;
  border-radius: 2px;
}
.board {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: repeat(var(--n), minmax(0, 1fr));
  background: var(--ast-surface);
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
.board:focus { outline: none; }
.board__row { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); min-height: 0; }

/* -------------------------------------------------------------------- cell */
.cell {
  --tint: var(--ast-surface);
  position: relative;
  display: grid;
  place-items: center;
  min-width: 0; min-height: 0;
  background-color: var(--tint);
  cursor: pointer;
  outline: none;
}
.cell[data-tint="0"] { --tint: var(--ast-tint-0); }
.cell[data-tint="1"] { --tint: var(--ast-tint-1); }
.cell[data-tint="2"] { --tint: var(--ast-tint-2); }
.cell[data-tint="3"] { --tint: var(--ast-tint-3); }
.cell[data-tint="4"] { --tint: var(--ast-tint-4); }
.cell[data-tint="5"] { --tint: var(--ast-tint-5); }
.cell[data-tint="6"] { --tint: var(--ast-tint-6); }
.cell[data-tint="7"] { --tint: var(--ast-tint-7); }
.cell[data-tint="8"] { --tint: var(--ast-tint-8); }
.cell[data-tint="9"] { --tint: var(--ast-tint-9); }

/* Optional textures: a second, colour-independent cue per constellation. */
.board.has-patterns .cell[data-tint="1"] { background-image: radial-gradient(var(--ast-pattern) 1.1px, transparent 1.5px); background-size: 7px 7px; }
.board.has-patterns .cell[data-tint="2"] { background-image: repeating-linear-gradient(0deg, var(--ast-pattern) 0 1px, transparent 1px 6px); }
.board.has-patterns .cell[data-tint="3"] { background-image: repeating-linear-gradient(90deg, var(--ast-pattern) 0 1px, transparent 1px 6px); }
.board.has-patterns .cell[data-tint="4"] { background-image: repeating-linear-gradient(45deg, var(--ast-pattern) 0 1px, transparent 1px 7px); }
.board.has-patterns .cell[data-tint="5"] { background-image: repeating-linear-gradient(-45deg, var(--ast-pattern) 0 1px, transparent 1px 7px); }
.board.has-patterns .cell[data-tint="6"] { background-image: repeating-linear-gradient(0deg, var(--ast-pattern) 0 1px, transparent 1px 7px), repeating-linear-gradient(90deg, var(--ast-pattern) 0 1px, transparent 1px 7px); }
.board.has-patterns .cell[data-tint="7"] { background-image: repeating-linear-gradient(45deg, var(--ast-pattern) 0 1px, transparent 1px 8px), repeating-linear-gradient(-45deg, var(--ast-pattern) 0 1px, transparent 1px 8px); }
.board.has-patterns .cell[data-tint="8"] { background-image: radial-gradient(var(--ast-pattern) 1.6px, transparent 2px); background-size: 12px 12px; }
.board.has-patterns .cell[data-tint="9"] { background-image: repeating-linear-gradient(0deg, transparent 0 4px, var(--ast-pattern) 4px 7px); }

.cell__star, .cell__x {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: scale(.55);
  transition: opacity calc(90ms * var(--ast-motion)) ease-out, transform calc(140ms * var(--ast-motion)) cubic-bezier(.3, 1.4, .5, 1);
}
.cell__star { width: 64%; height: 64%; fill: var(--ast-star); }
.cell__x { width: 40%; height: 40%; color: var(--ast-cross); }
.cell[data-state="2"] .cell__star { opacity: 1; transform: none; }
.cell[data-state="1"] .cell__x { opacity: 1; transform: none; }
.cell[data-state="0"][data-implied] .cell__x { opacity: .42; transform: scale(.8); }
.cell__label {
  position: absolute;
  top: 7%; left: 9%;
  color: var(--ast-ink-2);
  font: italic 400 clamp(11px, calc(100cqi / var(--n) * .27), 17px)/1 var(--ast-font-display);
  pointer-events: none;
}
.cell__field {
  position: absolute;
  left: var(--fx); top: var(--fy);
  width: calc(var(--fs) * 1px); height: calc(var(--fs) * 1px);
  margin: calc(var(--fs) * -.5px) 0 0 calc(var(--fs) * -.5px);
  border-radius: 50%;
  background: var(--ast-fieldstar);
  opacity: var(--fo);
  pointer-events: none;
  transition: opacity calc(160ms * var(--ast-motion));
}
.cell:not([data-state="0"]) .cell__field,
.cell[data-implied] .cell__field,
.cell.hint-target .cell__field { opacity: 0; }
.board-wrap.is-solved .cell:not([data-state="2"]) .cell__field { opacity: var(--fo); transition-duration: calc(600ms * var(--ast-motion)); }
.board.no-letters .cell__label { display: none; }
.cell:focus-visible { z-index: 3; outline: 3px solid var(--ast-focus); outline-offset: -5px; }
@media (hover: hover) {
  .board-wrap:not(.is-solved) .cell:hover::before { content: ""; position: absolute; inset: 0; background: var(--ast-ink); opacity: .05; pointer-events: none; }
}
.cell.is-pressed::before { content: ""; position: absolute; inset: 0; background: var(--ast-ink); opacity: .09; pointer-events: none; }

/* Conflicts: colour plus a dashed ring plus hatching, never colour alone. */
.cell.is-conflict .cell__star { fill: var(--ast-conflict); }
.cell.is-conflict::after {
  content: ""; position: absolute; inset: 9%;
  border: 1.75px dashed var(--ast-conflict); border-radius: 50%;
  pointer-events: none;
}
.cell.in-conflict, .cell.is-blocked {
  background-image: repeating-linear-gradient(-45deg, var(--ast-conflict-wash) 0 2px, transparent 2px 7px);
}

/* Hints: a wash over the houses involved, rings on the cells the hint changes. */
.cell.hint-house { box-shadow: inset 0 0 0 100cqi var(--ast-hint-wash); }
.cell.hint-target::after {
  content: ""; position: absolute; inset: 10%;
  border: 2px solid var(--ast-hint); border-radius: 50%;
  pointer-events: none;
}
.cell.hint-target[data-hint-kind="place"] .cell__star { opacity: .3; transform: none; fill: var(--ast-hint); }
.cell.hint-target[data-hint-kind="cross"][data-state="0"] .cell__x { opacity: .9; transform: none; color: var(--ast-hint); }
.cell.hint-target[data-hint-kind="check"] .cell__star,
.cell.hint-target[data-hint-kind="check"] .cell__x { color: var(--ast-hint); }

/* ------------------------------------------------------------- board lines */
.board-lines {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}
.board-lines .grid { stroke: var(--ast-grid); stroke-width: var(--ast-grid-width); stroke-dasharray: 1 3; fill: none; vector-effect: non-scaling-stroke; }
.board-lines .borders { stroke: var(--ast-border); stroke-width: var(--ast-border-width); fill: none; stroke-linecap: square; stroke-linejoin: miter; vector-effect: non-scaling-stroke; }
.board-lines .frame { stroke: var(--ast-border); stroke-width: var(--ast-frame-width); fill: none; vector-effect: non-scaling-stroke; }
.board-lines .constellation line {
  stroke: var(--ast-accent);
  stroke-width: 1.6px;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  opacity: .9;
}

.board-wrap.is-solved .cell[data-state="1"] .cell__x,
.board-wrap.is-solved .cell[data-implied] .cell__x { opacity: 0; transform: scale(.6); transition-duration: calc(400ms * var(--ast-motion)); }
.board-wrap.is-solved .cell { cursor: default; }
.board-wrap.is-celebrating .cell[data-state="2"] .cell__star { animation: ast-twinkle calc(700ms * var(--ast-motion)) ease-out both; animation-delay: calc(var(--order, 0) * 85ms * var(--ast-motion)); }
@keyframes ast-twinkle { 0% { transform: scale(1); } 35% { transform: scale(1.22) rotate(8deg); } 100% { transform: scale(1); } }

.pause-cover {
  position: absolute; inset: 0; z-index: 4;
  display: grid; place-content: center; justify-items: center; gap: var(--ast-space-3);
  background: var(--ast-surface);
  border: var(--ast-frame-width) solid var(--ast-border);
}
.pause-cover p {
  color: var(--ast-ink-2);
  font: 500 var(--ast-text-xs)/1 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps); text-transform: uppercase;
}

/* ---------------------------------------------------------------- controls */
.toolbar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ast-space-2); }
.tool {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  min-height: 52px;
  padding: 6px 4px;
  border: 1px solid var(--ast-line);
  border-radius: var(--ast-radius-m);
  background: var(--ast-surface);
  color: var(--ast-ink);
  font: 500 12px/1 var(--ast-font-sans);
  touch-action: manipulation;
}
.tool .icon { color: var(--ast-ink-2); }
.tool:hover:not(:disabled) { border-color: var(--ast-line-strong); }
.tool:active:not(:disabled) { background: var(--ast-surface-2); }
.tool:disabled { color: var(--ast-ink-3); cursor: default; opacity: .55; }
@media (min-width: 960px) {
  .tool { flex-direction: row; gap: 7px; min-height: 44px; font-size: var(--ast-text-s); }
}

.status {
  min-height: 1.55em;
  color: var(--ast-ink-2);
  font: 400 var(--ast-text-s)/1.55 var(--ast-font-mono);
}
.status .is-bad { color: var(--ast-conflict); }

.button {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--ast-line-strong);
  border-radius: var(--ast-radius-m);
  background: var(--ast-surface);
  color: var(--ast-ink);
  font: 500 14px/1 var(--ast-font-sans);
  text-decoration: none;
  touch-action: manipulation;
}
.button:hover { border-color: var(--ast-ink-3); }
.button--primary { background: var(--ast-ink); border-color: var(--ast-ink); color: var(--ast-bg); }
.button--primary:hover { border-color: var(--ast-ink); opacity: .9; }
.button--quiet { border-color: transparent; background: transparent; color: var(--ast-ink-2); }
.button--quiet:hover { border-color: var(--ast-line); color: var(--ast-ink); }
.button--danger { color: var(--ast-conflict); }

.hint {
  display: grid; gap: var(--ast-space-2);
  padding: var(--ast-space-4);
  border: 1px solid var(--ast-line);
  border-left: 3px solid var(--ast-hint);
  border-radius: var(--ast-radius-m);
  background: var(--ast-surface);
}
.hint__title {
  color: var(--ast-hint);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.hint__text { font-size: var(--ast-text-m); line-height: 1.5; }
.hint__actions { display: flex; flex-wrap: wrap; gap: var(--ast-space-2); margin-top: var(--ast-space-1); }

/* ------------------------------------------------------------------ result */
.result {
  display: grid; gap: var(--ast-space-4);
  padding: var(--ast-space-5);
  border: 1px solid var(--ast-line);
  border-radius: var(--ast-radius-l);
  background: var(--ast-surface);
}
.result:focus { outline: none; }
.result__eyebrow {
  color: var(--ast-accent);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.result__name {
  margin-top: calc(var(--ast-space-3) * -1);
  font: italic 400 26px/1.15 var(--ast-font-display);
  letter-spacing: -.01em;
}
.result__facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ast-space-3); }
.result__facts div { display: grid; gap: 2px; }
.result__facts dt, .stat-grid dt {
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.result__facts dd { font: 500 var(--ast-text-l)/1.2 var(--ast-font-mono); font-variant-numeric: tabular-nums; }
.curve { display: grid; gap: 6px; }
.curve__bars, .week__bars { display: block; width: 100%; height: 44px; }
.curve__bars rect, .week__bars rect { fill: var(--ast-ink-2); }
.curve__bars rect.is-hinted { fill: var(--ast-hint); }
.week__bars rect.is-empty { fill: var(--ast-line); }
.curve figcaption, .week figcaption { color: var(--ast-ink-3); font-size: var(--ast-text-xs); line-height: 1.45; }
.result__actions { display: flex; flex-wrap: wrap; gap: var(--ast-space-2); }
.result__next { color: var(--ast-ink-2); font: 400 var(--ast-text-s)/1.4 var(--ast-font-mono); font-variant-numeric: tabular-nums; }
.result__next:empty { display: none; }

/* -------------------------------------------------------------- rules card */
.rules-card {
  display: grid; gap: var(--ast-space-2);
  padding-top: var(--ast-space-4);
  border-top: 1px solid var(--ast-line);
  color: var(--ast-ink-2);
  font-size: var(--ast-text-s);
}
.rules-card h2, .agent summary {
  color: var(--ast-ink);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.rules-card ol { padding-left: 1.2em; display: grid; gap: 4px; }
.rules-card strong { color: var(--ast-ink); font-weight: 600; }

/* -------------------------------------------------------------- agent mode */
.agent { border-top: 1px solid var(--ast-line); padding-top: var(--ast-space-4); font-size: var(--ast-text-s); color: var(--ast-ink-2); }
.agent summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; min-height: 28px; cursor: pointer; list-style: none; }
.agent summary::-webkit-details-marker { display: none; }
.agent summary::before { content: "+"; width: 1ch; color: var(--ast-ink-2); }
.agent[open] summary::before { content: "\2212"; }
.agent summary span { color: var(--ast-ink-3); text-transform: none; letter-spacing: 0; font-family: var(--ast-font-sans); font-weight: 400; }
.agent > p, .agent__form, .agent__text { margin-top: var(--ast-space-3); }
.agent__text {
  max-width: 100%;
  margin: var(--ast-space-3) 0 0;
  padding: var(--ast-space-3);
  overflow-x: auto;
  border-radius: var(--ast-radius-s);
  background: var(--ast-surface-2);
  color: var(--ast-ink);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.agent__form label {
  display: block; margin-bottom: 4px;
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.agent__row { display: flex; gap: var(--ast-space-2); }
.agent__row input {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 12px;
  border: 1px solid var(--ast-line-strong); border-radius: var(--ast-radius-m);
  background: var(--ast-surface);
  font-family: var(--ast-font-mono);
}
.agent__result { min-height: 1.5em; margin-top: var(--ast-space-2); font-family: var(--ast-font-mono); font-size: 12.5px; }
.agent__result.is-ok { color: var(--ast-ink); }
.agent__result.is-bad { color: var(--ast-conflict); }
.agent__note { margin-top: var(--ast-space-3); color: var(--ast-ink-3); }
.agent code { font-size: .92em; }

/* ----------------------------------------------------------------- dialogs */
.dialog {
  width: min(540px, calc(100vw - 2 * var(--ast-gutter)));
  max-height: calc(100svh - 2 * var(--ast-space-5));
  padding: var(--ast-space-5);
  border: 1px solid var(--ast-line);
  border-radius: var(--ast-radius-l);
  background: var(--ast-surface);
  color: var(--ast-ink);
  overflow: auto;
}
.dialog::backdrop { background: var(--ast-backdrop); }
.dialog h2 { margin-right: 44px; font: 600 var(--ast-text-l)/1.3 var(--ast-font-sans); }
.dialog h3 {
  margin: var(--ast-space-5) 0 var(--ast-space-3);
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.dialog__close { position: absolute; top: 10px; right: 10px; }
.dialog__note { margin-top: var(--ast-space-4); color: var(--ast-ink-3); font-size: var(--ast-text-s); }
.rule-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--ast-space-3); margin-top: var(--ast-space-4); }
.rule { display: grid; gap: var(--ast-space-2); align-content: start; font-size: var(--ast-text-s); color: var(--ast-ink-2); }
.rule strong { display: block; color: var(--ast-ink); font-weight: 600; }
.rule__art { width: 100%; max-width: 120px; aspect-ratio: 1; }
.rule__art .cellbg { fill: var(--ast-surface-2); }
.rule__art .grid { stroke: var(--ast-grid); stroke-width: 1; fill: none; vector-effect: non-scaling-stroke; }
.rule__art .borders { stroke: var(--ast-border); stroke-width: 2.25; fill: none; stroke-linecap: square; vector-effect: non-scaling-stroke; }
.rule__art .star { fill: var(--ast-star); }
.rule__art .bad { fill: var(--ast-conflict); }
.rule__art .ring { fill: none; stroke: var(--ast-conflict); stroke-width: 1.4; stroke-dasharray: 2.5 2; vector-effect: non-scaling-stroke; }
.rule__art .x { stroke: var(--ast-cross); stroke-width: 1.4; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.keys { display: grid; gap: 7px; padding: 0; list-style: none; font-size: var(--ast-text-s); color: var(--ast-ink-2); }
.keys li span { display: inline-block; min-width: 8.5em; color: var(--ast-ink); }
@media (max-width: 520px) {
  .rule-grid { grid-template-columns: 1fr; }
  .rule { grid-template-columns: 76px 1fr; align-items: center; gap: var(--ast-space-3); }
  .keys li span { display: block; min-width: 0; }
}

.stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ast-space-3); }
.stat-grid div { display: grid; gap: 2px; }
.stat-grid dd { font: 500 var(--ast-text-l)/1.2 var(--ast-font-mono); font-variant-numeric: tabular-nums; }
@media (max-width: 520px) { .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.week { display: grid; gap: 6px; margin-top: var(--ast-space-4); }

.settings { display: grid; gap: var(--ast-space-3); margin-top: var(--ast-space-4); }
.switch { display: grid; grid-template-columns: auto 1fr; gap: var(--ast-space-3); align-items: start; cursor: pointer; }
.switch input { appearance: none; width: 38px; height: 22px; margin: 2px 0 0; border-radius: 11px; background: var(--ast-line-strong); position: relative; cursor: pointer; transition: background calc(120ms * var(--ast-motion)); }
.switch input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--ast-surface); transition: transform calc(140ms * var(--ast-motion)); }
.switch input:checked { background: var(--ast-ink); }
.switch input:checked::after { transform: translateX(16px); }
.switch__text { display: grid; font-size: var(--ast-text-s); color: var(--ast-ink-2); }
.switch__text strong { color: var(--ast-ink); font-weight: 500; font-size: var(--ast-text-m); }
.segmented { display: flex; flex-wrap: wrap; gap: var(--ast-space-3); margin: var(--ast-space-2) 0 0; padding: 0; border: 0; font-size: var(--ast-text-s); }
.segmented legend {
  width: 100%; margin-bottom: var(--ast-space-2); padding: 0;
  color: var(--ast-ink-3);
  font: 500 var(--ast-text-xs)/1.3 var(--ast-font-mono);
  letter-spacing: var(--ast-tracking-caps);
  text-transform: uppercase;
}
.segmented label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; }
.segmented input { accent-color: var(--ast-ink); margin: 0; }
.segmented__note { width: 100%; margin: calc(-1 * var(--ast-space-2)) 0 0; color: var(--ast-ink-2); }

/* ------------------------------------------------------------------- toast */
.toast {
  position: fixed; z-index: 40; left: 50%; bottom: max(24px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 16px;
  border-radius: var(--ast-radius-m);
  background: var(--ast-ink); color: var(--ast-bg);
  font: 500 var(--ast-text-s)/1.3 var(--ast-font-sans);
}

.noscript { padding: var(--ast-space-5) var(--ast-gutter); text-align: center; }

/* --------------------------------------------------------- plain-text view */
.plain-output { margin: 0; padding: 16px; background: #fff; color: #000; font: 13px/1.5 ui-monospace, Menlo, monospace; white-space: pre-wrap; }

/* ------------------------------------------------------ motion & contrast */
@media (prefers-reduced-motion: reduce) {
  :root { --ast-motion: 0; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
}
:root.reduce-motion { --ast-motion: 0; }

@media (forced-colors: active) {
  .cell { forced-color-adjust: none; background: Canvas; color: CanvasText; }
  .cell__star { fill: CanvasText; }
  .cell__x { color: CanvasText; }
  .board-lines .borders, .board-lines .frame { stroke: CanvasText; }
  .board-lines .grid { stroke: GrayText; }
  .cell.is-conflict .cell__star { fill: Highlight; }
  .cell:focus-visible { outline-color: Highlight; }
}