/* ============================================================================
   Pixel Circle / Oval Generator — tool layer over base.css
   base.css supplies reset, type, forms, buttons, chips, badges, panels, tables,
   header, footer, focus rings. This file adds the accent and only what is
   unique to this tool.

   Accent — yellow-green, measured against base.css surfaces (WCAG relative
   luminance):
     dark  #a6ef61  13.6:1 on --bg   12.6:1 on --surface   14.1:1 on --bg-sunk
     light #4e7728   5.0:1 on --bg    5.3:1 on --surface    4.6:1 on --bg-sunk
   Both clear the 4.5:1 text floor on all three surfaces in both themes.
   ========================================================================= */
:root {
  --accent: #a6ef61;
  --accent-dim: rgba(166, 239, 97, 0.14);
}
@media (prefers-color-scheme: light) {
  :root {
    --accent: #4e7728;
    --accent-dim: rgba(78, 119, 40, 0.10);
  }
}

.brand svg .mark-bg { fill: var(--accent); }
.brand svg .mark-fg { fill: var(--on-accent); }

/* base has no visually-hidden helper; the live region and table captions need one */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================================
   Tool bay
   ========================================================================= */

.tool {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1rem, 3vw, 1.5rem);
}

.controls {
  display: grid;
  gap: 1rem 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
  margin-bottom: 1.1rem;
}

.controls .field input[type="number"] {
  background: var(--surface);
}

.toggle-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1.5rem;
  margin-bottom: 1.1rem;
}

.toggle-group { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.toggle-group .field-label { margin-right: 0.15rem; }

.zoom-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
  max-width: 22rem;
}
.zoom-row input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }
.zoom-row output {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--text-dim);
  min-width: 3.4em;
  text-align: right;
}

.toolbar { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.25rem; }

/* ------------------------------------------------------------ canvas bay -- */

.canvas-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 1rem;
  margin-bottom: 1.25rem;
}
.canvas-wrap canvas {
  display: block;
  /* crisp pixel edges regardless of the browser's default image smoothing
     for scaled canvases; we draw at devicePixelRatio ourselves so this only
     matters if a browser still tries to resample the backing store */
  image-rendering: pixelated;
}

.stats {
  display: grid;
  gap: 0.85rem;
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}

/* ============================================================================
   Article furniture shared with other tools
   ========================================================================= */

.section { max-width: 74ch; }
.section table { max-width: none; }

.callout {
  background: var(--bg-sunk);
  border: 1px solid var(--line);
  border-left: 2px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 1rem 1.1rem;
  margin: 0 0 1.2em;
  font-size: 0.9375rem;
  color: var(--text-dim);
}
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--text); }

.pagelinks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
  gap: 0.75rem;
  margin-top: 1.25rem;
}
.pagelinks a {
  display: block;
  text-decoration: none;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0.95rem 1.15rem;
}
.pagelinks a:hover { border-color: var(--accent); }
.pagelinks strong { display: block; color: var(--accent); margin-bottom: 0.15rem; }
.pagelinks span   { display: block; color: var(--text-dim); font-size: 0.875rem; }

.noscript {
  background: var(--err-bg);
  border: 1px solid var(--err);
  border-radius: var(--radius);
  padding: 0.9rem 1.1rem;
  color: var(--err);
  font-size: 0.9375rem;
}

td.num, th.num { font-family: var(--mono); font-feature-settings: "tnum" 1; white-space: nowrap; }