/* Standing alone, as the site's other pages don't yet: the site's styles that
   this page uses, from src/style.css, as scripts/chrome.js links that from
   pages that aren't. */

/* The build copies this file to the top of the site from @fontsource-variable/inter. */
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../inter-latin.woff2) format("woff2");
}

:root {
  --sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: Georgia, "Times New Roman", serif;
  --paper: #fff;
  --ink: #222;
  --muted: #666;
  --underline: #999;
  --rule: #ddd;
  --accent: #f60;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #121212;
    --ink: #e6e6e6;
    --muted: #9a9a9a;
    --underline: #666;
    --rule: #333;
    --accent: #ff7a26;
  }
}

/* A column 960px wide. */
body {
  box-sizing: border-box;
  margin: 0 auto;
  padding: 0 16px;
  max-width: 992px;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--paper);
}

h1, h2 {
  font-family: var(--sans);
  line-height: 1.2;
  text-rendering: optimizeLegibility;
}

h1 {
  font-size: clamp(2rem, 6vw, 2.5rem);
  font-weight: 300;
  letter-spacing: -.02em;
  margin: .75em 0 .5em;
}

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -.01em;
  margin: 2em 0 .75em;
}

/* Each section ruled off, and the byline. */
h2, .by {
  border-top: 1px solid var(--rule);
  padding-top: 1.25em;
}

p, ul {
  max-width: 720px;
}

li + li {
  margin-top: .35em;
}

a {
  color: inherit;
  text-decoration-color: var(--underline);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--accent);
  text-decoration-color: currentColor;
}

button, input[type=button] {
  padding: 8px 14px;
  border: 0;
  border-radius: 5px;
  font: 14px/1.2 var(--sans);
  color: var(--paper);
  background: var(--ink);
  cursor: pointer;
}

@media (hover: hover) {
  button:hover, input[type=button]:hover {
    background: var(--accent);
  }
}

input[type=range], input[type=checkbox] {
  accent-color: var(--ink);
}

label, output {
  font-family: var(--sans);
  font-size: 14px;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Touch: controls big enough to hit. */
@media (pointer: coarse) {
  button, input[type=button] {
    min-height: 40px;
  }
  input[type=range] {
    height: 40px;
  }
  input[type=checkbox] {
    width: 22px;
    height: 22px;
  }
}

.by {
  color: var(--muted);
  margin-top: 2em;
}

/* The page's own: the polygon blue, its vertices rings, the first filled and
   bigger, so told by more than colour, the polygons before it faint, and the
   ellipse it will become grey and dashed. */

:root {
  --line: #000;
  --polygon: #1f63b0;
  --destiny: #999;
}

@media (prefers-color-scheme: dark) {
  :root {
    --line: #ddd;
    --polygon: #6aa6ec;
    --destiny: #777;
  }
}

#controls p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: .75em 0;
}

#n {
  flex: 1;
  max-width: 300px;
  min-width: 140px;
}

#n-value {
  min-width: 3ch;
  font-variant-numeric: tabular-nums;
}

/* Buttons as icons: Randomise, a refresh; Step, a step forward; and Go,
   play, or, while it runs, stop; each named for those who can't see it, and in its tooltip. */
button.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  align-self: stretch;
}

/* As Domineering's: 18px on a grid of 24, filled, or drawn in round-ended
   lines of 2. */
button.icon {
  padding-top: 6px;
  padding-bottom: 6px;
}

button.icon svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1px;
  stroke-linejoin: round;
}

button.icon svg.stroked {
  fill: none;
  stroke-width: 2px;
  stroke-linecap: round;
}

#go .stop, #go.running .play {
  display: none;
}

#go.running .stop {
  display: block;
}

/* What step it's at, and when it untangled and became its ellipse: a
   caption, under the picture, centred, as the snapshots below it are. */
#count {
  font: 14px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  max-width: 560px;
  text-align: center;
  margin: 1.25em 0 1.5em;
}

#vis {
  margin: 1em 0 0;
}

#vis svg {
  display: block;
  max-width: 100%;
  height: auto;
  -webkit-tap-highlight-color: transparent;
}

#vis svg.over {
  cursor: grab;
}

#vis svg.dragging {
  cursor: grabbing;
}

.polygon, .trail polygon {
  fill: none;
  stroke: var(--polygon);
  stroke-width: 1.5px;
  stroke-linejoin: round;
}

.trail polygon {
  stroke-width: 1px;
}

/* Snapshots, small, in rows the picture's width, each its step below it. */
/* In columns, centred under the picture. */
.snapshots {
  display: grid;
  grid-template-columns: repeat(auto-fill, 72px);
  justify-content: center;
  gap: 10px 8px;
  max-width: 560px;
  margin: 0 0 1em;
}

.snapshots figure {
  margin: 0;
  text-align: center;
}

.snapshots svg {
  display: block;
}

.snapshots .polygon {
  stroke-width: 1px;
}

.snapshots figcaption {
  font: 11px var(--sans);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

/* The ellipse it will become: grey and dashed, unlike the polygon. */
.ellipse {
  fill: none;
  stroke: var(--destiny);
  stroke-width: 1.5px;
  stroke-dasharray: 6 5;
}

.vertex {
  fill: var(--paper);
  stroke: var(--line);
  stroke-width: 1px;
}

.vertex.first {
  fill: var(--line);
}