/* Squaresville — visual direction per DESIGN.md: minimal, warm, crafty, and a
   compact editing workspace (palette manipulable while the pattern stays in
   view). All colors come from the tokens below; robin-egg blue is borders only
   (never text), khaki is pattern-paper panel fill, and chrome near the swatches
   and pattern preview stays neutral so it can't bias color judgments. */

@font-face {
  font-family: 'Delius';
  src: url('fonts/delius-latin.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #FAF6EF;          /* light warm off-white page background */
  --ink: #2E2A24;            /* warm near-black text */
  --stitch: #89CFC9;         /* robin-egg blue: dashed basting-stitch borders */
  --pattern-paper: #E9DFC4;  /* khaki panel fill, old-school pattern tissue */
  --pattern-line: #69603F;   /* darker khaki, captions/secondary text only */
  --hairline: rgb(46 42 36 / 0.35); /* thin neutral edges, derived from --ink */
  --font-hand: 'Delius', 'Segoe Print', 'Comic Sans MS', system-ui, sans-serif;
  --font-data: ui-monospace, 'Cascadia Mono', 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

body {
  margin: 0 auto;
  max-width: 96rem;
  padding: 0.75rem 1.25rem 2.5rem;
  font-family: var(--font-hand);
  font-size: 1.05rem;
  line-height: 1.45;
  color: var(--ink);
  background: var(--paper);
}

h1, h2, h3 {
  color: var(--ink);
  line-height: 1.15;
  font-weight: 400; /* Delius has one weight; size carries the hierarchy */
}

h1 { font-size: 1.7rem; margin: 0 0 0.1rem; }
h2 { font-size: 1.25rem; margin: 0.4rem 0; }
h3 { font-size: 1.1rem; margin: 0.4rem 0 0.25rem; }

header p {
  margin: 0;
  font-size: 0.95rem;
}

/* Long-dashed robin-egg separators between sections: a line of basting
   stitches, easily removable — drawn as a gradient because CSS `dashed`
   can't make long dashes. */
main > section ~ section,
header {
  background-image: repeating-linear-gradient(
    90deg,
    var(--stitch) 0 18px,
    transparent 18px 30px
  );
  background-size: 100% 2px;
  background-position: bottom left;
  background-repeat: no-repeat;
  padding-bottom: 0.75rem;
  margin-bottom: 0.75rem;
}

main > section ~ section {
  background-position: top left;
  padding-bottom: 0;
  padding-top: 0.75rem;
  margin-top: 0.75rem;
  margin-bottom: 0;
}

section {
  margin-block: 0.75rem;
}

/* Boxed basting-stitch outline — the same robin-egg motif as the section
   separators, but framing all four sides of a standalone panel (the final
   "Save the final pattern" area). Four gradients: top/bottom horizontal rules,
   left/right vertical rules. */
.basting-box {
  background-image:
    repeating-linear-gradient(90deg, var(--stitch) 0 18px, transparent 18px 30px),
    repeating-linear-gradient(90deg, var(--stitch) 0 18px, transparent 18px 30px),
    repeating-linear-gradient(0deg, var(--stitch) 0 18px, transparent 18px 30px),
    repeating-linear-gradient(0deg, var(--stitch) 0 18px, transparent 18px 30px);
  background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
  background-position: left top, left bottom, left top, right top;
  background-repeat: no-repeat;
  padding: 0.9rem 1.1rem;
  border-radius: 0.4rem;
}

/* Accessible label kept for screen readers where the visible heading already
   carries the instruction (DESIGN.md: form controls stay labeled). */
.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;
}

/* The parameter form sits on a khaki "pattern tissue" card. */
#parameters-form {
  background: var(--pattern-paper);
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  max-width: 42rem;
}

.field {
  margin-block: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.field label {
  min-width: 13rem;
}

input, select {
  font-family: var(--font-hand);
  font-size: 0.95rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.25rem;
  padding: 0.2rem 0.4rem;
}

input[type="number"] {
  width: 6rem;
  font-family: var(--font-data);
}

button {
  margin-top: 0.4rem;
  padding: 0.4rem 1.1rem;
  font-family: var(--font-hand);
  font-size: 1rem;
  color: var(--ink);
  background: var(--stitch);
  border: 1px solid var(--hairline);
  border-radius: 0.4rem;
  cursor: pointer;
}

button:hover {
  filter: brightness(1.05);
}

/* README: "the large Generate Pattern button under the pattern preview image" */
.big-button {
  font-size: 1.2rem;
  padding: 0.6rem 1.75rem;
}

#export-options {
  margin-top: 0.4rem;
  padding: 0.5rem 0.75rem;
  background: var(--pattern-paper);
  border-radius: 0.4rem;
  max-width: 42rem;
}

/* Focus is a solid high-contrast outline (DESIGN.md: never dashed, so it can't
   be confused with the decorative stitching). */
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 2px;
}

#status-message:not(:empty) {
  padding: 0.35rem 0.6rem;
  background: var(--pattern-paper);
  border-radius: 0.25rem;
}

/* --- The editing workspace (DESIGN.md "Layout"): preview stays in view on the
   left while the palette tools live in a right-hand column. --- */
.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 26rem);
  gap: 0 1.5rem;
  align-items: start;
}

.preview-pane {
  position: sticky;
  top: 0.5rem;
  min-width: 0;
}

.palette-pane {
  min-width: 0;
}

.palette-pane .field label,
.toolbar .field label {
  min-width: 0;
}

.palette-pane h3 {
  margin-top: 0;
}

@media (max-width: 68rem) {
  .workspace { display: block; }
  .preview-pane { position: static; }
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 1.25rem;
  margin-block: 0.3rem;
}

.toolbar .field {
  margin: 0;
}

.toolbar button {
  margin-top: 0;
  padding: 0.3rem 0.8rem;
  font-size: 0.95rem;
}

figcaption {
  color: var(--pattern-line);
  font-size: 0.85rem;
}

/* DESIGN.md "Equal side-by-side previews": the original and pattern preview each
   take an equal-width half of the pane and are scaled to fill that half. Because
   the pattern is generated proportional to the image, they share an aspect ratio,
   so filling equal halves shows them at the same on-screen size, both fully
   visible (no cropping). */
.side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0.75rem;
  align-items: start;
}

.side-by-side figure {
  margin: 0;
  min-width: 0;
}

.side-by-side img {
  display: block;
  width: 100%;
  height: auto;
}

.original-figure img {
  border: 1px solid var(--hairline);
}

/* The pattern preview is pixel art: keep the squares crisp as CSS scales it up. */
.pattern-stack {
  position: relative;
  display: block;
  border: 1px solid var(--hairline);
  line-height: 0; /* no descender gap under the image */
}

#pattern-image {
  image-rendering: pixelated;
  cursor: pointer; /* clicking a square selects that color (README) */
}

/* Data readouts (dimensions, counts, hex codes) read as data: monospace. */
#pattern-stats,
#palette-list {
  font-family: var(--font-data);
  font-size: 0.85rem;
}

#pattern-stats {
  margin: 0.2rem 0;
}

/* Packed swatch area (DESIGN.md "Palette display"): plain color squares; hex and
   count appear only on hover (tooltip) or click (detail area below). */
#palette-list {
  list-style: none;
  padding: 0;
  margin: 0.4rem 0;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}

#palette-list li {
  display: contents; /* the button is the visual unit */
}

.palette-swatch {
  width: 1.75rem;
  height: 1.75rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--hairline);
  border-radius: 0.15rem;
  cursor: pointer;
  position: relative; /* anchor the lock badge (README "Locking a Color") */
}

/* README "Locking a Color": a lock icon marks a locked color on its palette
   swatches and in neighbor comparisons. The badge is decorative (aria-hidden);
   the locked state is also spoken via each swatch's accessible name. */
.lock-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  pointer-events: none;
  text-shadow: 0 0 2px rgba(255, 255, 255, 0.9), 0 0 3px rgba(0, 0, 0, 0.7);
}

.palette-swatch[aria-pressed="true"] {
  outline: 3px solid var(--ink);
  outline-offset: 1px;
  position: relative; /* keep the selection outline above neighboring swatches */
  z-index: 1;
}

#color-detail {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: var(--pattern-paper);
  border-radius: 0.4rem;
}

#color-detail[hidden] {
  display: none;
}

#color-detail h4 {
  margin: 0.5rem 0 0.2rem;
  font-weight: 400;
  font-size: 1rem;
}

.detail-summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
  font-family: var(--font-data);
  font-size: 0.9rem;
}

#neighbor-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.neighbor-chip {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0.25rem 0.45rem 0.2rem;
  font-family: var(--font-data);
  font-size: 0.8rem;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--hairline);
  border-radius: 0.25rem;
  cursor: pointer;
  margin-top: 0;
}

/* DESIGN.md "Nearest-neighbor comparison chips": selected and neighbor swatches
   touch with no divider, so the color difference reads at the shared edge. */
.compare-pair {
  display: flex;
  height: 2rem;
  border: 1px solid var(--ink);
  border-radius: 0.15rem;
  overflow: hidden; /* halves meet flush inside the rounded border */
}

.compare-half {
  flex: 1 1 50%;
  position: relative; /* anchor a lock badge over this half when its color is locked */
}

/* A locked color cannot be altered, so its in-pane color picker is inert. */
.color-wheel.locked {
  opacity: 0.45;
  pointer-events: none;
}

.merge-group {
  border: 1px solid var(--hairline);
  border-radius: 0.25rem;
  margin-top: 0.3rem;
}

.merge-group label {
  display: block;
  margin-block: 0.15rem;
  font-size: 0.95rem;
}

/* DESIGN.md "In-pane color picker": a hue ring around a saturation/brightness
   square, always visible and preloaded with the selected color. Handles are
   positioned by percentage (geometry in src/ui/colorPicker.js), so no rendered
   pixel size is needed and it survives being laid out while the pane is hidden. */
.color-wheel {
  position: relative;
  width: 11rem;
  height: 11rem;
  margin: 0.3rem auto 0.5rem;
  touch-action: none; /* dragging a handle must not scroll the pane */
}

.color-wheel-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from 0deg,
    #FF0000, #FFFF00, #00FF00, #00FFFF, #0000FF, #FF00FF, #FF0000);
}

.color-wheel-square {
  /* Inscribed in the ring's inner circle; the paper-colored gap reads as a ring. */
  position: absolute;
  inset: 2.55rem;
  border-radius: 0.2rem;
  background:
    linear-gradient(to bottom, transparent, #000000),
    linear-gradient(to right, #FFFFFF, transparent),
    var(--wheel-hue-color, #FF0000);
  box-shadow: 0 0 0 0.55rem var(--paper); /* punches the ring's hole */
}

.wheel-handle {
  position: absolute;
  width: 0.85rem;
  height: 0.85rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
  transform: translate(-50%, -50%); /* left/top are the handle's center */
  cursor: pointer;
}

.wheel-handle:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

.slider-group {
  border: 1px solid var(--hairline);
  border-radius: 0.25rem;
  margin-top: 0.3rem;
}

.slider-group .field {
  margin-block: 0.15rem;
}

.slider-group .field label {
  min-width: 4.5rem;
}

/* DESIGN.md "Adjuster slider tracks": each track is a gradient scale of the colors
   this slider can reach, painted by the UI into --track-gradient. The thumb is a
   high-contrast ink ring so its position never relies on the track colors. */
.slider-group input[type="range"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  -webkit-appearance: none;
  appearance: none;
  height: 0.9rem;
  border: 1px solid var(--hairline);
  border-radius: 0.45rem;
  background: var(--track-gradient, var(--paper));
}

.slider-group input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.slider-group input[type="range"]::-moz-range-thumb {
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--ink);
}

.slider-group input[type="range"]::-moz-range-track {
  background: transparent; /* the gradient is painted on the input itself */
}

.slider-group output {
  font-family: var(--font-data);
  font-size: 0.85rem;
  min-width: 2.2rem;
  text-align: right;
}

#adjust-hex {
  font-family: var(--font-data);
  width: 7rem;
}

/* Selection pulse (README: the selected color's squares slowly pulse once). The
   overlay stretches to cover the CSS-scaled pattern image exactly. */
#pattern-highlight {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
}

#pattern-highlight.pulsing {
  animation: pulse-once 1.8s ease-in-out 1;
}

@keyframes pulse-once {
  0% { opacity: 0; }
  50% { opacity: 1; }
  100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #pattern-highlight.pulsing {
    animation-duration: 0.6s;
  }
}

.swatch {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 1px solid var(--ink);
  border-radius: 0.15rem;
}

/* Site footer: a small basting-stitch support panel plus a one-line colophon.
   Links are ink with a stitch-colored underline (robin-egg is never text);
   hover shifts the text to --pattern-line, which is legal khaki text on paper. */
.site-footer {
  margin-top: 1.5rem;
}

.site-footer .support {
  max-width: 34rem;
}

.site-footer .support p {
  margin: 0 0 0.6rem;
}

.kofi-badge img {
  display: block;
}

.site-footer a {
  color: var(--ink);
  text-decoration-color: var(--stitch);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.site-footer a:hover {
  color: var(--pattern-line);
}

.colophon {
  margin: 0.9rem 0 0;
  font-size: 0.95rem;
  color: var(--pattern-line);
}

/* Prose pages (the user guide): narrower measure than the app workspace,
   and an h4 tier the app itself never needs. */
.doc-page main {
  max-width: 46rem;
}

.doc-page h4 {
  color: var(--ink);
  line-height: 1.15;
  font-weight: 400;
  font-size: 1rem;
  margin: 0.4rem 0 0.25rem;
}

.doc-page a,
header a {
  color: var(--ink);
  text-decoration-color: var(--stitch);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.15em;
}

.doc-page a:hover,
header a:hover {
  color: var(--pattern-line);
}