/* © 2026 Gozapp — Living the Grid by Clément Gonzalvez. All rights reserved.
   https://living-the-grid.gozapp.dev — see LICENSE. */
/* Off-DOM anchor kept for layout-metrics instrumentation. Intentionally
   never rendered — see tokens.css --gz-build. */
.gz-anchor-4dcb5b33 { display: none; }

/* When a swatch is focused (hovered or pinned), every other cell in the
   palette fades out so the picked colour is unmistakable. Works for both
   the Game blob grid and the flat swatch cards. */
.palette-display.pal-focused .pal-cell,
.palette-display.pal-focused .swatch {
  transition: opacity 0.12s ease, filter 0.12s ease;
}
.palette-display.pal-focused .pal-cell:not(.is-focused),
.palette-display.pal-focused .swatch:not(.is-focused) {
  opacity: 0.55;
  filter: grayscale(0.3) drop-shadow(0 1px 1px rgba(43, 30, 15, 0.12));
}
.palette-display.pal-focused .pal-cell.is-focused {
  z-index: 5;
  filter: brightness(1.05) drop-shadow(0 3px 5px rgba(43, 30, 15, 0.45));
}
.palette-display.pal-focused .swatch.is-focused {
  background: var(--sun);
  box-shadow: 2.5px 2.5px 0 var(--ink);
}

/* Palette House grid rendering ("Game" palette in its native shape).
   In-game each swatch is an organic paint-blob sitting on a cream "plate".
   We draw both as SVG paths — border-radius can't produce the bumpy edges
   of the real palette. */
.palette-display { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Non-Game palettes (Auto / curated): switch to a true grid so every
   swatch card occupies exactly the same cell width. Flex-wrap let
   trailing rows expand unevenly when the last row had fewer cards. */
.palette-display:not(.pal-game-wrap) {
  display: grid;
  /* Min cell width is sized so three press chips + their "×NNN" counts
     fit inside the card padding without clipping. Lower than ~165px and
     the rightmost count (e.g. ×110) overflows the card edge. */
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
}

/* Two side-by-side grids using explicit widths (not flex ratios) because
   Chrome and Safari disagreed when aspect-ratio'd cells lived inside
   flex:1 0 children — Chrome kept the intrinsic min width, so the side
   column overflowed onto the main grid. calc() widths sidestep that. */
.pal-game {
  display: flex; gap: 10px; align-items: stretch; flex-wrap: nowrap;
  width: 100%;
}
.pal-main {
  display: grid; grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 6px;
  width: calc((100% - 10px - 2px - 10px) * 11 / 12);
  flex: 0 0 auto; min-width: 0;
}
.pal-side {
  display: grid; grid-template-rows: repeat(7, 1fr);
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  width: calc((100% - 10px - 2px - 10px) / 12);
  flex: 0 0 auto; min-width: 0;
  padding-left: 10px;
  border-left: 2px dashed var(--ink);
  box-sizing: content-box;
}
.pal-cell {
  position: relative; aspect-ratio: 1; width: 100%;
  background: transparent; border: none; padding: 0;
  cursor: pointer;
  filter: drop-shadow(0 1px 1px rgba(43, 30, 15, 0.12));
  /* Suppress iOS Safari's long-press callout (copy / share / "save image")
     so our own long-press menu is the only thing that fires. Also disables
     text selection during the hold. */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.pal-cell .pal-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pal-cell .pal-plate {
  fill: #FFF6DC;
  stroke: rgba(43, 30, 15, 0.28);
  stroke-width: 2;
}
.pal-cell .pal-blob { fill: var(--chip); }
/* Hover uses filter only — no transforms — so neighbours never shift and
   the response feels instant. z-index lift keeps the shadow on top. */
.pal-cell:hover {
  z-index: 2;
  filter: brightness(1.08) drop-shadow(0 2px 3px rgba(43, 30, 15, 0.35));
}

/* Selected/used in design: outline the paint blob itself in dark ink and
   drop a checkmark in the corner. No fill change, no scale. */
.pal-cell.used {
  z-index: 3;
  filter: drop-shadow(0 2px 3px rgba(43, 30, 15, 0.32));
}
.pal-cell.used .pal-plate { stroke: var(--ink); stroke-width: 2.5; }
.pal-cell.used .pal-blob { stroke: var(--ink); stroke-width: 2.5; stroke-linejoin: round; }

/* R·C label overlay — visible only on used cells in Game mode. Sits
   centered on the blob so users can read it without opening a tooltip. */
.pal-rc {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.62rem; font-weight: 600;
  color: var(--ink);
  text-shadow:
    0 0 2px #FFF6DC, 0 0 2px #FFF6DC,
    1px 0 0 #FFF6DC, -1px 0 0 #FFF6DC,
    0 1px 0 #FFF6DC, 0 -1px 0 #FFF6DC;
  pointer-events: none;
  z-index: 3;
  letter-spacing: -0.02em;
}
.pal-cell.used .pal-rc { display: flex; }

/* Sequential 1-based number badge for used cells when Numbers toggle is
   on. Top-left corner so it doesn't fight with the used-checkmark badge
   in the bottom-right. Only renders when the palette container has the
   `show-numbers` class, otherwise it stays out of the way. */
.pal-num {
  position: absolute;
  top: -4%; left: -4%;
  min-width: 44%; height: 44%;
  padding: 0 4px;
  background: var(--sun);
  border: 1.8px solid var(--ink);
  border-radius: 100px;
  display: none;
  align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem; font-weight: 700;
  color: var(--ink);
  pointer-events: none;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
  z-index: 4;
  line-height: 1;
}
.palette-display.show-numbers .pal-cell.used .pal-num { display: flex; }

.pal-check {
  position: absolute;
  right: -6%; bottom: -6%;
  width: 44%; height: 44%;
  background: #2B1E0F;
  border: 2.5px solid #FFF6DC;
  border-radius: 50%;
  display: none;
  align-items: center; justify-content: center;
  pointer-events: none;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
  z-index: 4;
}
.pal-check svg { width: 62%; height: 62%; display: block; }
.pal-cell.used .pal-check { display: flex; }

.pal-legend {
  font-family: 'Fredoka', sans-serif; font-size: 0.72rem; color: var(--ink-muted);
  display: flex; gap: 0.5rem; align-items: center; margin-top: 0.7rem;
  flex-basis: 100%;
}
/* Miniature of the .pal-cell used-state — same BLOB_PATH SVG + inked
   outline + check badge as a real cell, just scaled down. Rebuilt from
   SVG because outline/border don't clip to clip-path cleanly across
   browsers, which produced the earlier "broken rectangle" look. */
.pal-legend-chip {
  position: relative;
  width: 24px; height: 24px;
  flex-shrink: 0;
}
.pal-legend-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.pal-legend-plate {
  fill: #FFF6DC;
  stroke: var(--ink);
  stroke-width: 3.5;
}
.pal-legend-blob {
  fill: var(--teal);
  stroke: var(--ink);
  stroke-width: 3.5;
  stroke-linejoin: round;
}
.pal-legend-check {
  position: absolute;
  right: -8%; bottom: -8%;
  width: 50%; height: 50%;
  background: #2B1E0F;
  border: 1.8px solid #FFF6DC;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 1px 1px 0 rgba(43, 30, 15, 0.45);
}
.pal-legend-check svg { width: 65%; height: 65%; display: block; }

/* Flat swatch cards for the non-Game palettes. Styled as miniature
   "apartment windows" — rounded frame, colour block as the lit interior
   (with a top-edge gloss highlight), hex label reads as the name plate. */
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  cursor: pointer; padding: 0.4rem 0.4rem 0.35rem;
  background: var(--paper); border: 1.5px solid var(--ink);
  border-radius: 14px; box-shadow: 1.5px 1.5px 0 var(--ink);
  transition: transform 0.22s var(--ease-back), box-shadow 0.22s var(--ease-back);
  min-width: 112px;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
}
.swatch:hover { transform: translate(-2px, -2px) rotate(-1deg); box-shadow: 3px 3px 0 var(--ink); }
.swatch-head {
  display: flex; align-items: center; gap: 4px; width: 100%; justify-content: center;
}
.swatch-num {
  font-family: 'JetBrains Mono', monospace; font-size: 0.58rem; font-weight: 700;
  color: var(--ink); background: var(--sun);
  border: 1.2px solid var(--ink); border-radius: 100px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.swatch-box {
  width: 32px; height: 32px;
  border: 1.5px solid var(--ink); border-radius: 8px;
  /* Top-edge gloss + bottom-edge shade — makes each swatch read as a lit
     apartment window rather than a flat chip. Inset shadows don't affect
     the computed colour, just the perceived lighting. */
  box-shadow:
    inset 0 3px 0 rgba(255, 255, 255, 0.28),
    inset 0 -2px 0 rgba(43, 30, 15, 0.14);
}
.swatch-hex { font-family: 'JetBrains Mono', monospace; font-size: 0.6rem; font-weight: 600; color: var(--ink); }
.swatch-hsb { font-family: 'JetBrains Mono', monospace; font-size: 0.54rem; color: var(--ink-muted); line-height: 1; }

/* ---- Press-count strip on each swatch (non-Game palettes) ---------------
   Translates the H/S/B target into "press this button this many times"
   from the Colour picker's default position. ZR cap mimics the in-game
   shoulder-button glyph; arrow caps stand in for the D-pad. */
/* Three equal columns so the Zr / → / ↑ groups line up vertically across
   every swatch even when the digit-count differs (×4 vs ×110). Each press
   group keeps its keycap + count tight on the left of its column, with
   the leftover space falling to the right as the gutter to the next. */
.swatch-presses {
  display: grid; grid-template-columns: repeat(3, 1fr);
  align-items: center; gap: 0.2rem;
  margin-top: 2px;
  width: 100%;
}
.swatch-press {
  display: inline-flex; align-items: center; gap: 2px;
  font-family: 'JetBrains Mono', monospace; font-size: 0.62rem; font-weight: 700;
  color: var(--ink);
  justify-self: start;
  /* Let grid shrink the press group below its natural width on very
     narrow viewports (e.g. mobile portrait) — better to truncate than
     to overflow the card edge. */
  min-width: 0;
}
/* Uniform keycap: same width/height regardless of label so the three
   chips line up on a fixed grid and the eye doesn't have to retrack
   when reading press-counts down a column. */
.kcap {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 16px;
  background: var(--ink, #2B1E0F);
  color: #FFFDF6;
  font-family: 'Fredoka', sans-serif;
  font-size: 0.62rem; font-weight: 700;
  border-radius: 5px;
  box-shadow: inset 0 -1.5px 0 rgba(0,0,0,0.35), 0 0.5px 0 rgba(255,255,255,0.18);
  line-height: 1;
  flex-shrink: 0;
}
.kcap-zr { letter-spacing: 0.02em; }
.kcap-arrow { font-size: 0.78rem; padding-bottom: 1px; }
.kcap-count { color: var(--ink); }

/* Mini 2-D picker preview — mirrors the in-game advanced picker UI
   (saturation/brightness square + hue strip) so users can aim by sight. */
.swatch-picker {
  width: 100px; height: 72px;
  border: 1.5px solid var(--ink); border-radius: 4px;
  display: block; background: var(--paper);
  overflow: visible;
}