/* tilemap-palette.css: styles for R-Z5.4-SPK101-WK5-TILEMAP-PALETTE-2026-05-16.
 *
 * Houses the .va-cog-tilemap-* and .va-cog-tilemap-palette-* token
 * namespaces used by the two new portable primitives
 * (VaTilemapRenderer + VaPaletteRenderer) shipped this round.
 *
 * Lives in a separate file (NOT portal.css) per the now-triple-vouched
 * scoped-CSS-file pattern (Z5.1 polish bundle / Z5.2.X nes20 extension /
 * Z5.1 polish-bundle portal-toc). portal.css stays the typography +
 * shared-layout file; round-specific feature CSS ships standalone and is
 * `<link>`-imported from the markdown surface that uses it. render.py
 * copy_theme() auto-discovers any *.css in courses/_pipeline/theme/.
 *
 * Mobile-first per Z5.1 L1: every interactive surface is exercised on
 * both Pixel 5 (chromium) AND iPhone 13 (WebKit) in the round's mobile
 * spec, so the breakpoints below assume both engines.
 *
 * Tap-target floors:
 *   - sub-palette swatches and master-palette swatches are PRIMARY nav
 *     affordances; 44x44 minimum per WCAG 2.5.5.
 *   - the 8x8 tile-editor paint grid is a DENSE DATA grid; 32x32 minimum
 *     per the WCAG 2.5.5 essential-density exception (the same exception
 *     Z5.2 applied to the hex viewer's byte cells). Tap-to-effect is
 *     verified directly in the Playwright spec; pixel-size is the proxy.
 *
 * License: (c) 2026 Virtus Cyber Academy.
 */

/* ============================================================
 * Top-level visualizer wrapper.
 * ============================================================ */
.va-cog-tilemap-root {
  display: block;
  margin: 1.5rem 0 2rem 0;
  padding: 1rem;
  background: var(--bg-card, #111);
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.92rem;
}

.va-cog-tilemap-stage {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1.2rem;
  align-items: start;
  margin: 0.6rem 0 0.4rem 0;
}

.va-cog-tilemap-panel {
  min-width: 0;
}

.va-cog-tilemap-panel-head {
  margin: 0 0 0.4rem 0;
  color: var(--gold, #fbbf24);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.va-cog-tilemap-panel-help {
  margin: 0 0 0.5rem 0;
  color: var(--fg-muted, #94a3b8);
  font-size: 0.84rem;
  line-height: 1.4;
}

/* ============================================================
 * Panel A: tilemap canvas + hover-cell readout.
 * ============================================================ */
.va-cog-tilemap-canvas-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
  background: rgba(74, 222, 128, 0.04);
  border: 1px dashed rgba(74, 222, 128, 0.35);
  border-radius: 4px;
  /* let very wide canvases scroll horizontally rather than overflow the
   * page on narrow viewports; canvas internal pixel size stays fixed. */
  overflow: auto;
}

.va-cog-tilemap-canvas {
  display: block;
  /* Sharp pixels at any browser-zoom level: */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  border: 1px solid var(--border, #333);
  /* canvas internal width may exceed the panel; flex container scrolls. */
  max-width: none;
  cursor: crosshair;
}

.va-cog-tilemap-cell-readout {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin-top: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: var(--bg-deep, #0a0a0a);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  color: var(--fg, #e2e8f0);
  font-size: 0.85rem;
  min-height: 2.4rem;
}

.va-cog-tilemap-cell-readout-row {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
}

.va-cog-tilemap-cell-readout-label {
  color: var(--fg-muted, #94a3b8);
  font-weight: 600;
}

.va-cog-tilemap-cell-readout-value {
  color: var(--green, #4ade80);
  font-family: var(--mono, ui-monospace, monospace);
}

/* ============================================================
 * Panel B: VaPaletteRenderer root + swatches.
 * ============================================================ */
.va-cog-tilemap-palette-root {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.5rem;
  background: rgba(251, 191, 36, 0.04);
  border: 1px dashed rgba(251, 191, 36, 0.35);
  border-radius: 4px;
}

.va-cog-tilemap-palette-subs {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.va-cog-tilemap-palette-sub-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.va-cog-tilemap-palette-sub-label {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.8rem;
  font-weight: 700;
  min-width: 3.6rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Primary affordance: 44x44 floor per WCAG 2.5.5. */
.va-cog-tilemap-palette-swatch {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, transform 100ms ease;
}

.va-cog-tilemap-palette-swatch:hover {
  border-color: rgba(255, 255, 255, 0.55);
  transform: translateY(-1px);
}

.va-cog-tilemap-palette-swatch:focus-visible {
  outline: 2px solid var(--green, #4ade80);
  outline-offset: 2px;
}

.va-cog-tilemap-palette-swatch-active {
  border-color: var(--green, #4ade80);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.45);
}

/* ============================================================
 * Active-swatch status readout.
 * ============================================================ */
.va-cog-tilemap-palette-status {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0.4rem 0.6rem;
  background: var(--bg-deep, #0a0a0a);
  border: 1px solid var(--border, #333);
  border-radius: 4px;
  font-size: 0.85rem;
}

.va-cog-tilemap-palette-status-label {
  color: var(--fg-muted, #94a3b8);
  font-weight: 600;
}

.va-cog-tilemap-palette-status-value {
  color: var(--green, #4ade80);
  font-family: var(--mono, ui-monospace, monospace);
}

/* ============================================================
 * Master-palette picker (64-color grid).
 * Primary affordance per WCAG 2.5.5; 44x44 floor on each color.
 * ============================================================ */
.va-cog-tilemap-palette-master {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.va-cog-tilemap-palette-master-head {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.82rem;
  line-height: 1.4;
}

.va-cog-tilemap-palette-master-grid {
  display: grid;
  /* 16-wide stays close to the canonical 4x16 NES master palette layout
   * on desktop; mobile collapses to fewer columns via the breakpoint. */
  grid-template-columns: repeat(16, minmax(44px, 1fr));
  gap: 3px;
  align-content: start;
}

.va-cog-tilemap-palette-master-swatch {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 3px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 120ms ease, transform 80ms ease;
}

.va-cog-tilemap-palette-master-swatch:hover {
  border-color: rgba(255, 255, 255, 0.55);
  transform: scale(1.04);
}

.va-cog-tilemap-palette-master-swatch:focus-visible {
  outline: 2px solid var(--gold, #fbbf24);
  outline-offset: 2px;
}

/* ============================================================
 * Tile-pattern editor (Scene C). Dense 8x8 grid; WCAG 2.5.5
 * essential-density exception (same as Z5.2's hex byte cells).
 * ============================================================ */
.va-cog-tilemap-tile-editor {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1rem 0 0 0;
  padding: 0.7rem;
  background: var(--bg-deep, #0a0a0a);
  border: 1px dashed var(--gold, #fbbf24);
  border-radius: 4px;
}

.va-cog-tilemap-tile-editor-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: baseline;
}

.va-cog-tilemap-tile-editor-title {
  color: var(--gold, #fbbf24);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 0.85rem;
}

.va-cog-tilemap-tile-editor-help {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.82rem;
  line-height: 1.45;
  margin: 0;
}

.va-cog-tilemap-tile-editor-stage {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
}

.va-cog-tilemap-tile-editor-grid {
  display: grid;
  grid-template-columns: repeat(8, 32px);
  grid-template-rows: repeat(8, 32px);
  gap: 1px;
  background: rgba(255, 255, 255, 0.18);
  padding: 1px;
  border-radius: 3px;
}

/* Dense-grid cells: WCAG 2.5.5 essential-density exception applied; the
 * 32x32 floor keeps the cells visible without forcing 8 * 44 = 352px+
 * grid width on a 360px mobile viewport. Tap-to-effect is verified in
 * the Playwright spec via "tap then read pixel color." */
.va-cog-tilemap-tile-editor-cell {
  appearance: none;
  -webkit-appearance: none;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 0;
  cursor: pointer;
  transition: outline 80ms ease;
}

.va-cog-tilemap-tile-editor-cell:focus-visible {
  outline: 2px solid var(--green, #4ade80);
  outline-offset: -2px;
}

.va-cog-tilemap-tile-editor-side {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.va-cog-tilemap-tile-editor-paint-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
}

.va-cog-tilemap-tile-editor-paint-label {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.va-cog-tilemap-tile-editor-paint-swatch {
  appearance: none;
  -webkit-appearance: none;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.15);
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
}

.va-cog-tilemap-tile-editor-paint-swatch-active {
  border-color: var(--green, #4ade80);
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.45);
}

.va-cog-tilemap-tile-editor-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.va-cog-tilemap-tile-editor-btn {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 0.55rem 0.95rem;
  background: transparent;
  color: var(--fg, #e2e8f0);
  border: 1px solid var(--gold, #fbbf24);
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.va-cog-tilemap-tile-editor-btn:hover {
  background: rgba(251, 191, 36, 0.10);
}

.va-cog-tilemap-tile-editor-btn:focus-visible {
  outline: 2px solid var(--gold, #fbbf24);
  outline-offset: 2px;
}

/* ============================================================
 * Scrollytelling scenes (3a / 3b / 3c style; reuses Z3.1 / Z5.2 pattern).
 * Active scene gets a left-border highlight + slight opacity bump.
 * ============================================================ */
.va-cog-tilemap-scene {
  position: relative;
  margin: 1rem 0;
  padding: 0.8rem 1rem 0.8rem 1.1rem;
  border-left: 3px solid var(--border, #333);
  opacity: 0.85;
  transition: opacity 200ms ease, border-left-color 200ms ease;
}

.va-cog-tilemap-scene[data-active="true"] {
  border-left-color: var(--gold, #fbbf24);
  opacity: 1;
}

.va-cog-tilemap-scene-tag {
  display: inline-block;
  margin-bottom: 0.3rem;
  padding: 0.18rem 0.55rem;
  background: rgba(251, 191, 36, 0.10);
  border: 1px solid rgba(251, 191, 36, 0.45);
  border-radius: 3px;
  color: var(--gold, #fbbf24);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ============================================================
 * Polish #3 forward-fold: inline 8x8 tile preview inside the hex
 * viewer's CHR-region tooltip. Single-cell VaTilemapRenderer.
 * ============================================================ */
.va-cog-hex-tooltip-tile-preview {
  display: inline-block;
  vertical-align: middle;
  margin: 0.4rem 0.4rem 0.2rem 0;
  padding: 2px;
  background: #000;
  border: 1px solid var(--border, #333);
  border-radius: 3px;
}

/* The single-cell tilemap canvas sits inside this preview wrapper. */
.va-cog-hex-tooltip-tile-preview .va-cog-tilemap-canvas {
  display: block;
  border: 0;
  cursor: default;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.va-cog-hex-tooltip-tile-preview-label {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.4rem;
  color: var(--fg-muted, #94a3b8);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
}

/* ============================================================
 * Mobile breakpoints. Pixel 5 (393px) + iPhone 13 (390px) both pass
 * the "no horizontal overflow" gate at <=820px and shrink further at
 * <=480px to keep the 64-swatch master grid usable.
 * ============================================================ */
@media (max-width: 820px) {
  .va-cog-tilemap-stage {
    grid-template-columns: minmax(0, 1fr);
  }
  .va-cog-tilemap-palette-master-grid {
    grid-template-columns: repeat(8, minmax(40px, 1fr));
  }
  .va-cog-tilemap-tile-editor-stage {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 480px) {
  .va-cog-tilemap-root {
    padding: 0.7rem;
  }
  .va-cog-tilemap-palette-swatch {
    min-width: 44px;
    min-height: 44px;
    font-size: 0.7rem;
  }
  .va-cog-tilemap-palette-master-swatch {
    min-width: 44px;
    min-height: 44px;
    font-size: 0;          /* hide hex label at narrow widths so 8-col grid fits */
  }
  .va-cog-tilemap-tile-editor-grid {
    grid-template-columns: repeat(8, 32px);
    grid-template-rows: repeat(8, 32px);
  }
}

/* ============================================================
 * R-Z5.4.X-GB-GRAYSCALE-2026-05-16: NES/GB mode toggle + GB palette.
 * ============================================================ */
.va-cog-tilemap-mode-toggle {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  margin: 0 0 0.8rem 0;
  padding: 0.4rem 0.6rem;
  background: rgba(74, 222, 128, 0.06);
  border: 1px dashed rgba(74, 222, 128, 0.3);
  border-radius: 4px;
}

.va-cog-tilemap-mode-toggle-label {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.va-cog-tilemap-mode-toggle-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 64px;
  min-height: 44px;
  padding: 0 1rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: var(--bg-deep, #0a0a0a);
  color: var(--fg, #e2e8f0);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.va-cog-tilemap-mode-toggle-btn:hover {
  border-color: rgba(74, 222, 128, 0.6);
}

.va-cog-tilemap-mode-toggle-btn:focus-visible {
  outline: 2px solid var(--green, #4ade80);
  outline-offset: 2px;
}

.va-cog-tilemap-mode-toggle-btn-active {
  border-color: var(--green, #4ade80);
  background: rgba(74, 222, 128, 0.18);
  color: var(--green, #4ade80);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35) inset;
}

.va-cog-tilemap-mode-content {
  display: block;
}

/* GB-mode palette renderer: single 4-swatch row, no master picker. */
.va-cog-tilemap-palette-root-gb {
  /* Inherits .va-cog-tilemap-palette-root box; flex column stacks the
   * single GB row + status readout vertically. */
}

.va-cog-tilemap-palette-gb-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.va-cog-tilemap-palette-gb-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  padding: 0 0.4rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.78rem;
  font-weight: 700;
  user-select: none;
}

/* ============================================================
 * R-Z5.4.X-GB-PALETTE-PICKER-2026-05-16: GB palette picker that
 * mounts above the Panel A / Panel B stage in GB mode only.
 * 4 preset buttons + 4 native color inputs that appear when Custom
 * is the active preset. WCAG 2.5.5 tap-target floor on both rows.
 * ============================================================ */
.va-cog-tilemap-gb-picker {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 0.8rem;
  margin: 0 0 0.8rem 0;
  padding: 0.5rem 0.7rem;
  background: rgba(74, 222, 128, 0.05);
  border: 1px dashed rgba(74, 222, 128, 0.28);
  border-radius: 4px;
}

.va-cog-tilemap-gb-picker-label {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.va-cog-tilemap-gb-picker-preset-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.va-cog-tilemap-gb-picker-preset-btn {
  appearance: none;
  -webkit-appearance: none;
  min-width: 84px;
  min-height: 44px;
  padding: 0 0.8rem;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: var(--bg-deep, #0a0a0a);
  color: var(--fg, #e2e8f0);
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.va-cog-tilemap-gb-picker-preset-btn:hover {
  border-color: rgba(74, 222, 128, 0.6);
}

.va-cog-tilemap-gb-picker-preset-btn:focus-visible {
  outline: 2px solid var(--green, #4ade80);
  outline-offset: 2px;
}

.va-cog-tilemap-gb-picker-preset-btn-active {
  border-color: var(--green, #4ade80);
  background: rgba(74, 222, 128, 0.18);
  color: var(--green, #4ade80);
  box-shadow: 0 0 0 1px rgba(74, 222, 128, 0.35) inset;
}

.va-cog-tilemap-gb-picker-custom-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.6rem;
  width: 100%;
  padding: 0.4rem 0.5rem;
  background: var(--bg-deep, #0a0a0a);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 4px;
}

.va-cog-tilemap-gb-picker-custom-row[hidden] {
  display: none;
}

.va-cog-tilemap-gb-picker-custom-label {
  color: var(--fg-muted, #94a3b8);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.va-cog-tilemap-gb-picker-custom-input {
  /* Native color inputs render their own UI; tap-target floor of 44x44
   * keeps each picker reachable on touch. Browser-specific paddings are
   * normalized so the swatch fills the box. */
  appearance: none;
  -webkit-appearance: none;
  width: 44px;
  height: 44px;
  padding: 2px;
  border: 2px solid rgba(255, 255, 255, 0.18);
  border-radius: 4px;
  background: transparent;
  cursor: pointer;
}

.va-cog-tilemap-gb-picker-custom-input:focus-visible {
  outline: 2px solid var(--green, #4ade80);
  outline-offset: 2px;
}

/* WebKit's color input wraps the swatch in an inner wrapper; flatten it
 * so the picked color reaches the border edge. */
.va-cog-tilemap-gb-picker-custom-input::-webkit-color-swatch-wrapper {
  padding: 0;
}
.va-cog-tilemap-gb-picker-custom-input::-webkit-color-swatch {
  border: 0;
  border-radius: 2px;
}
.va-cog-tilemap-gb-picker-custom-input::-moz-color-swatch {
  border: 0;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .va-cog-tilemap-gb-picker {
    /* keep the picker visible without crowding the canvas on narrow phones */
    padding: 0.4rem 0.5rem;
  }
  .va-cog-tilemap-gb-picker-preset-btn {
    min-width: 72px;
    font-size: 0.78rem;
    padding: 0 0.6rem;
  }
}