/* ============================================================
   PixelGif — editor styling
   Wears the PixelGif identity via theme.css tokens (no raw
   literals). Cyber-noir base shared structurally with the Swerve
   family; cyan = primary UI, magenta = active/selected/focus,
   teal = status only. Glow is reserved for focal/active elements.
   ============================================================ */

*,
*::before,
*::after { box-sizing: border-box; }

body {
  background:
    radial-gradient(120% 80% at 80% -10%, color-mix(in srgb, var(--pg-accent) 10%, transparent), transparent 60%),
    linear-gradient(135deg, var(--pg-bg-1) 0%, var(--pg-bg) 55%, var(--pg-surface) 100%);
  background-repeat: no-repeat;
  color: var(--pg-text);
  font-family: var(--pg-font-ui);
  margin: 0;
  overflow-x: hidden;
  position: relative;
  min-height: 100vh;
}

/* --- Accessibility helpers --- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
:focus-visible {
  outline: 2px solid var(--pg-focus);
  outline-offset: 2px;
  border-radius: var(--pg-radius-sm);
}

/* ============================================================
   App header
   ============================================================ */
.navbar {
  position: sticky;
  top: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--pg-space-4);
  background: color-mix(in srgb, var(--pg-bg-1) 72%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--pg-border);
  box-shadow: var(--pg-shadow-sm);
  z-index: var(--pg-z-header);
  padding: var(--pg-space-3) var(--pg-space-8);
}
.navbar .brand {
  font-family: var(--pg-font-ui);
  font-size: var(--pg-text-xl);
  font-weight: var(--pg-weight-display);
  letter-spacing: -0.02em;
  color: var(--pg-text);
  text-decoration: none;
}
.navbar .brand::first-letter { color: var(--pg-accent); }
.nav-meta {
  display: flex;
  align-items: center;
  gap: var(--pg-space-6);
}
.nav-tagline {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-medium);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-muted);
}

/* Status pill — repurposed as the export ready/encoding/done signal */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-2);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-status);
  border: 1px solid color-mix(in srgb, var(--pg-status) 35%, transparent);
  background: color-mix(in srgb, var(--pg-status) 8%, transparent);
  padding: 0.3rem 0.6rem;
  border-radius: var(--pg-radius-sm);
}
.status-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pg-status);
  box-shadow: 0 0 8px var(--pg-status);
  animation: pg-pulse 2s var(--pg-ease) infinite;
}
@keyframes pg-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* ============================================================
   Hero — lightweight family "face"
   ============================================================ */
.pg-hero {
  max-width: var(--pg-container);
  margin: 0 auto;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--pg-space-6) clamp(2rem, 4vw, 3rem);
  text-align: left;
}
.pg-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-3);
  margin: 0 0 var(--pg-space-4);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-medium);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-muted);
}
.pg-eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: linear-gradient(90deg, var(--pg-accent), var(--pg-accent-2));
  border-radius: 2px;
}
.pg-hero-title {
  margin: 0 0 var(--pg-space-4);
  max-width: 18ch;
  font-size: var(--pg-text-3xl);
  font-weight: var(--pg-weight-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--pg-text);
}
.pg-hero-sub {
  margin: 0 0 var(--pg-space-6);
  max-width: 56ch;
  color: var(--pg-muted);
  font-size: var(--pg-text-lg);
  line-height: 1.55;
}
.pg-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--pg-space-2);
  padding: 0.7rem 1.3rem;
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  font-weight: var(--pg-weight-bold);
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--pg-radius-full);
  box-shadow: var(--pg-glow);
  transition: transform var(--pg-dur) var(--pg-ease),
              background var(--pg-dur) var(--pg-ease),
              gap var(--pg-dur) var(--pg-ease);
}
.pg-cta:hover { background: var(--pg-accent-hi); transform: translateY(-2px); gap: var(--pg-space-3); }
.pg-cta span { transition: transform var(--pg-dur) var(--pg-ease); }
.pg-cta:hover span { transform: translateY(2px); }

/* ============================================================
   Editor shell  (layout geometry unchanged — Phase C reworks this)
   ============================================================ */
.container {
  display: flex;
  flex-direction: column;
  max-width: calc(100vw - 40px);
  width: 100%;
  min-height: calc(100vh - 80px);
  margin: 0 auto;
  background: color-mix(in srgb, var(--pg-surface) 35%, transparent);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-lg);
  backdrop-filter: blur(12px);
  box-shadow: var(--pg-shadow-lg);
  overflow: visible;
  position: relative;
}

.sidebar-left {
  width: 200px;
  background: color-mix(in srgb, var(--pg-surface) 70%, transparent);
  border-right: 1px solid var(--pg-border);
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: var(--pg-z-sidebar-l);
  display: flex;
  flex-direction: column;
}
.static-tools {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--pg-surface) 80%, transparent);
  padding: var(--pg-space-4);
  z-index: var(--pg-z-sticky);
}
.tool-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1px;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: var(--pg-space-2);
}
.scrollable-tools {
  flex: 1;
  overflow-y: auto;
  padding: var(--pg-space-4);
  padding-top: 0;
  padding-bottom: var(--pg-space-8);
}
.scrollable-tools::-webkit-scrollbar,
.scrollable-controls::-webkit-scrollbar { width: 8px; }
.scrollable-tools::-webkit-scrollbar-track,
.scrollable-controls::-webkit-scrollbar-track { background: var(--pg-bg); }
.scrollable-tools::-webkit-scrollbar-thumb,
.scrollable-controls::-webkit-scrollbar-thumb { background: var(--pg-accent); border-radius: 4px; }
.scrollable-tools::-webkit-scrollbar-thumb:hover,
.scrollable-controls::-webkit-scrollbar-thumb:hover { background: var(--pg-accent-hi); }

.image-tools-container,
.frame-image-tools-container,
.trace-tools-container,
.zoom-tools-container,
.rotation-tools-container,
.text-tools-container,
.color-palette {
  margin-top: var(--pg-space-4);
  padding: var(--pg-space-2);
  background: color-mix(in srgb, var(--pg-surface-2) 55%, transparent);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
}
.palette-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.color-swatch {
  width: 22px; height: 22px;
  border: 2px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  cursor: pointer;
  transition: transform var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
}
.color-swatch:hover { transform: scale(1.12); border-color: var(--pg-accent); }
.color-swatch:focus-visible { outline: 2px solid var(--pg-focus); outline-offset: 2px; }

.sidebar-right {
  width: 200px;
  max-width: 200px;
  background: color-mix(in srgb, var(--pg-surface) 70%, transparent);
  border-left: 1px solid var(--pg-border);
  position: absolute;
  top: 0; bottom: 0; right: 0;
  z-index: var(--pg-z-sidebar-r);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.static-controls {
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--pg-surface) 80%, transparent);
  padding: var(--pg-space-4);
  z-index: var(--pg-z-sticky);
}
.scrollable-controls {
  flex: 1;
  overflow-y: auto;
  padding: var(--pg-space-4);
  padding-top: 0;
  padding-bottom: var(--pg-space-8);
}

/* S14 — desktop: keep every control reachable. The sidebars are absolute
   columns spanning the full container, and the container grows with the
   canvas/frames column — so at common window heights the inner scrollers'
   windows (and their scrollbars) extended below the fold: lower controls
   were effectively unreachable and the thumb looked detached mid-page.
   Cap each sidebar at the viewport and let the whole column scroll as one
   list. DOM untouched (the static/scrollable split is load-bearing for the
   C2 mobile sheets); ≤768px keeps the C1 column layout. */
@media (min-width: 769px) {
  .sidebar-left,
  .sidebar-right {
    bottom: auto;
    height: min(100%, calc(100vh - 80px));
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid var(--pg-border);
  }
  /* Left tool header keeps its sticky pin — it now sticks against the
     sidebar scroller, so pencil/eraser stay handy while adjusting sliders.
     The right header is far too tall to pin; it scrolls with the column. */
  .static-controls { position: static; }
  /* Content scrolls beneath the pinned header now — opaque backdrop so
     scrolled labels don't ghost through the 80%-translucent surface. */
  .static-tools {
    background: color-mix(in srgb, var(--pg-surface) 88%, var(--pg-bg));
  }
  .scrollable-tools,
  .scrollable-controls {
    flex: none;
    overflow-y: visible;
  }
  .sidebar-left::-webkit-scrollbar,
  .sidebar-right::-webkit-scrollbar { width: 8px; }
  .sidebar-left::-webkit-scrollbar-track,
  .sidebar-right::-webkit-scrollbar-track { background: var(--pg-bg); }
  .sidebar-left::-webkit-scrollbar-thumb,
  .sidebar-right::-webkit-scrollbar-thumb { background: var(--pg-accent); border-radius: 4px; }
  .sidebar-left::-webkit-scrollbar-thumb:hover,
  .sidebar-right::-webkit-scrollbar-thumb:hover { background: var(--pg-accent-hi); }
}

.main-content {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--pg-space-8);
  position: relative;
  z-index: 0;
  flex-direction: column;
}

/* ============================================================
   Canvas
   ============================================================ */
canvas {
  border: 2px solid var(--pg-border-hi);
  border-radius: var(--pg-radius-sm);
  image-rendering: pixelated;
  background: transparent;
  box-shadow: var(--pg-shadow-md);
  touch-action: none;
}
.canvas-wrapper { display: inline-block; position: relative; }

/* Checkerboard reveals transparent pixels on the drawing surface */
#drawingCanvas {
  background-color: var(--pg-check-base);
  background-image:
    linear-gradient(45deg, var(--pg-check-sq) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pg-check-sq) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pg-check-sq) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pg-check-sq) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
#previewCanvas {
  box-shadow: var(--pg-shadow-sm); /* lighter than the base canvas rule's md */
}
.preview-canvas-wrapper { display: inline-block; position: relative; background: var(--pg-paper); }

/* The small right-side preview is retired — the MAIN canvas is now the live preview.
   #previewCanvas + #previewFrameNumber stay in the DOM (the engine binds them by id and
   paints #previewCanvas as the clean composite the main-canvas FX overlay samples; m12's
   readout mirrors #previewFrameNumber) but are hidden from view. */
#previewCanvasWrapper,
#previewFrameNumber { display: none; }

/* Live hover pixel-coordinate readout (populated by src/m3-canvas-aids) */
.pg-coords {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: 0.06em;
  color: var(--pg-dim);
  margin-top: var(--pg-space-2);
  min-height: 1.1em;
}

/* ============================================================
   Buttons
   ============================================================ */
.tool-button,
.frame-button {
  background: var(--pg-surface-2);
  color: var(--pg-text);
  font-family: inherit;
  border: 1px solid var(--pg-border);
  padding: var(--pg-space-2);
  border-radius: var(--pg-radius-sm);
  cursor: pointer;
  transition: transform var(--pg-dur) var(--pg-ease),
              border-color var(--pg-dur) var(--pg-ease),
              background var(--pg-dur) var(--pg-ease);
  text-align: center;
  font-size: 1rem;
  width: 2rem; height: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}
.tool-button:hover,
.frame-button:hover { border-color: var(--pg-accent); transform: translateY(-2px); }

.tool-button.disabled,
.frame-button.disabled { background: var(--pg-surface); color: var(--pg-dim); cursor: not-allowed; opacity: 0.5; }
.tool-button.disabled:hover,
.frame-button.disabled:hover { transform: none; border-color: var(--pg-border); }

/* Active tool / selected state — magenta identity accent */
.tool-button.active {
  background: color-mix(in srgb, var(--pg-accent-2) 18%, var(--pg-surface-2));
  border-color: var(--pg-accent-2);
  color: var(--pg-text);
  box-shadow: var(--pg-glow-2);
}

/* Primary action pills — solid accent fill that inverts on hover */
#saveColorBtn,
#exportBtn,
#copyPrevTextBtn {
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  border: 1px solid transparent;
  width: 140px;
  padding: 0.5rem;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  font-family: var(--pg-font-ui);
  font-weight: var(--pg-weight-bold);
  transition: transform var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
  text-align: center;
  font-size: 0.9rem;
  margin: 0 auto 0.5rem;
  display: block;
  /* Long labels (e.g. "Copy Prev Settings") exceed the 140px pill inside the
     200px sidebar — wrap instead of clipping. .tool-button's fixed 2rem
     height would clip the second line, so release it here (S14). */
  white-space: normal;
  line-height: 1.25;
  height: auto;
  min-height: 2rem;
}
#saveColorBtn:hover,
#exportBtn:hover,
#copyPrevTextBtn:hover { background: var(--pg-accent-hi); transform: translateY(-2px); }
#exportBtn { box-shadow: var(--pg-glow); }

/* Destructive actions */
#resetProjectBtn,
#removeTextBtn {
  background: transparent;
  color: var(--pg-danger);
  border: 1px solid color-mix(in srgb, var(--pg-danger) 50%, transparent);
  width: 140px;
  padding: 0.5rem;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  font-family: var(--pg-font-ui);
  font-weight: var(--pg-weight-bold);
  transition: transform var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
  text-align: center;
  font-size: 0.9rem;
  margin: 0 auto 0.5rem;
  display: block;
  white-space: normal;
  line-height: 1.25;
  height: auto;
  min-height: 2rem;
}
#resetProjectBtn:hover,
#removeTextBtn:hover { background: color-mix(in srgb, var(--pg-danger) 15%, transparent); transform: translateY(-2px); }

.preview-controls,
.frame-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1px;
  flex-wrap: nowrap;
  width: 100%;
  margin-top: var(--pg-space-2);
}
.frame-controls-static {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 1px;
  flex-wrap: nowrap;
  width: 140px;
  margin: 0 auto;
}
.preview-frame-number {
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0.5rem auto;
}

/* ============================================================
   Live-loop playback bar (directly under the main canvas) — M12
   ============================================================ */
/* Media-player controls: circular secondary prev/next + a prominent filled,
   glowing play/pause (the focal control) + a tabular frame readout. SVG icons
   (crisp on any platform; the two ◀/▶ used to share a glyph). */
.pg-playbar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--pg-space-3);
  margin-top: var(--pg-space-3);
}
.pg-playbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--pg-surface-2);
  color: var(--pg-muted);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color var(--pg-dur) var(--pg-ease),
    border-color var(--pg-dur) var(--pg-ease),
    background var(--pg-dur) var(--pg-ease),
    box-shadow var(--pg-dur) var(--pg-ease),
    transform var(--pg-dur) var(--pg-ease);
}
.pg-playbar-btn svg { width: 1.05rem; height: 1.05rem; fill: currentColor; display: block; }
.pg-playbar-btn:hover {
  color: var(--pg-accent);
  border-color: var(--pg-border-hi);
  background: var(--pg-surface);
  transform: translateY(-1px);
}
.pg-playbar-btn:active { transform: translateY(0) scale(0.95); }

/* Play / pause — the primary, focal control: filled brand cyan with a soft glow,
   stepping up to magenta (the live-paint accent) while playing. */
.pg-playbar-toggle {
  width: 2.85rem;
  height: 2.85rem;
  background: var(--pg-accent);
  border-color: transparent;
  color: var(--pg-on-accent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--pg-accent) 40%, transparent);
}
.pg-playbar-toggle svg { width: 1.3rem; height: 1.3rem; }
.pg-playbar-toggle:hover {
  background: var(--pg-accent-hi);
  color: var(--pg-on-accent);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--pg-accent) 55%, transparent);
}
.pg-playbar-toggle.is-playing {
  background: var(--pg-accent-2);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--pg-accent-2) 45%, transparent);
}
.pg-playbar-toggle.is-playing:hover {
  background: var(--pg-accent-2-hi);
  box-shadow: 0 5px 18px color-mix(in srgb, var(--pg-accent-2) 60%, transparent);
}
/* Icon swap: ▶ when idle, ⏸ while playing (driven by m12's .is-playing toggle). */
.pg-playbar-toggle .pg-ico-pause { display: none; }
.pg-playbar-toggle.is-playing .pg-ico-play { display: none; }
.pg-playbar-toggle.is-playing .pg-ico-pause { display: block; }

.pg-playbar-frame {
  margin-left: var(--pg-space-1);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.03em;
  color: var(--pg-muted);
  min-width: 4.5ch;
  text-align: center;
}
.pg-playbar-frame .pg-frame-cur { color: var(--pg-text); font-weight: 700; }

/* The new under-canvas bar is the single playback control; keep the old ⏮⏹⏵⏭
   nodes in the DOM (the engine binds them by id at load) but hide them. The small
   #previewCanvas + its frame number stay as a secondary thumbnail. */
.preview-controls { display: none; }

/* On mobile the playback bar is a PERSISTENT slim dock fixed just above the
   tab-bar — so back / play-pause / forward + the frame readout are reachable in
   ANY tab and at any zoom (it used to sit under the canvas and hide while a sheet
   was open). The sheet's bottom + the content padding clear it (see below). */
body.pg-shell .pg-playbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--pg-tabbar-h);
  height: var(--pg-playbar-h);
  z-index: var(--pg-z-tabbar);
  margin: 0;
  gap: var(--pg-space-2);
  padding: 0 var(--pg-space-2);
  background: var(--pg-surface);
  border-top: 1px solid var(--pg-border);
}

/* ============================================================
   Frames timeline
   ============================================================ */
.frame {
  border: 2px solid var(--pg-border);
  margin: var(--pg-space-2);
  cursor: grab;
  transition: transform var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
  border-radius: var(--pg-radius-sm);
  position: relative;
}
.frame:hover { transform: translateY(-2px); border-color: var(--pg-accent); }
.frame.active { border-color: var(--pg-accent-2); box-shadow: var(--pg-glow-2); }
.frame-number {
  position: absolute;
  top: -10px; left: -10px;
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  border-radius: 50%;
  width: 20px; height: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
  font-weight: bold;
}

/* ============================================================
   Inputs, sliders, toggles
   ============================================================ */
#colorPicker,
#imageInput,
#frameImageInput,
#frameTextInput,
#frameTextColorPicker {
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  margin-bottom: 0.5rem;
  cursor: pointer;
}
#colorPicker,
#frameTextColorPicker { width: 40px; height: 40px; padding: 2px; background: var(--pg-surface-2); }
#imageInput,
#frameImageInput,
#frameTextInput {
  width: 140px;
  height: auto;
  padding: 0.3rem;
  background: var(--pg-bg);
  color: var(--pg-text);
  margin: 0 auto 0.5rem;
  display: block;
}

#frameDuration {
  background: var(--pg-bg);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  padding: 0.3rem;
  color: var(--pg-text);
  width: 140px;
  margin: 0 auto 0.5rem;
  display: block;
}
#frameDurationLabel {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-muted);
  text-align: center;
  margin: 0 auto 0.2rem;
  width: 140px;
  white-space: nowrap;
  display: block;
}
#frameDurationWarning,
#frameLimitWarning {
  color: var(--pg-danger);
  font-size: 0.8rem;
  text-align: center;
  margin: 0 auto 0.5rem;
  display: none;
  width: 140px;
}

input[type="range"] {
  width: 140px;
  background: var(--pg-bg);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  padding: 0.25rem;
  color: var(--pg-text);
  margin: 0 auto 0.5rem;
  display: block;
  -webkit-appearance: none;
  appearance: none;
  touch-action: none;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 16px; height: 16px;
  background: var(--pg-accent);
  border-radius: 50%;
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px;
  background: var(--pg-accent);
  border: none;
  border-radius: 50%;
  cursor: pointer;
}
.slider-label {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-muted);
  text-align: center;
  margin: 0.2rem auto;
  /* Full container width + wrap — fixed 140px nowrap clipped long labels
     ("Include Overlay in GIF") at the panel edge (S14). */
  width: 100%;
  white-space: normal;
  display: block;
}

.toggle-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 140px;
  margin: 0 auto 0.5rem;
  position: relative;
}
/* Visually-hidden (NOT display:none) so the toggle stays keyboard-focusable */
#imagePosition,
#includeOverlay,
#frameImagePosition {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.toggle-label {
  display: flex;
  width: 140px; height: 30px;
  background: var(--pg-bg);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-full);
  position: relative;
  cursor: pointer;
  transition: border-color var(--pg-dur) var(--pg-ease);
}
.toggle-label::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 66px; height: 24px;
  background: var(--pg-accent);
  border-radius: var(--pg-radius-full);
  transition: transform var(--pg-dur) var(--pg-ease);
}
#imagePosition:checked + .toggle-label::before,
#includeOverlay:checked + .toggle-label::before,
#frameImagePosition:checked + .toggle-label::before { transform: translateX(66px); }
#imagePosition:focus-visible + .toggle-label,
#includeOverlay:focus-visible + .toggle-label,
#frameImagePosition:focus-visible + .toggle-label { outline: 2px solid var(--pg-focus); outline-offset: 2px; }
.toggle-text {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--pg-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pg-muted);
  pointer-events: none;
}
.toggle-text.below, .toggle-text.off { left: 14px; }
.toggle-text.above, .toggle-text.on { right: 14px; }
#imagePosition:checked + .toggle-label .toggle-text.below,
#imagePosition:not(:checked) + .toggle-label .toggle-text.above,
#includeOverlay:checked + .toggle-label .toggle-text.off,
#includeOverlay:not(:checked) + .toggle-label .toggle-text.on,
#frameImagePosition:checked + .toggle-label .toggle-text.below,
#frameImagePosition:not(:checked) + .toggle-label .toggle-text.above { color: var(--pg-on-accent); }

/* ============================================================
   Panel titles  (mono, machine-label grammar)
   ============================================================ */
.panel-title {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-sm);
  font-weight: var(--pg-weight-bold);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-muted);
  margin: 0 0 1rem;
}
.panel-subtitle {
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-medium);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pg-muted);
  margin: 0.5rem 0;
}

/* Group titles inside the Adjust tool cards — cyan, mirrors .pg-fx-title so the
   multi-control groups (image overlay / frame image / frame text) read as named
   sections instead of one flat slider stack with duplicated X/Y/Rotation labels. */
.tool-group-title {
  margin: 0 0 var(--pg-space-2);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-bold);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-accent);
  text-align: center;
}

/* ============================================================
   Confirmation dialog
   ============================================================ */
.confirmation-dialog {
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: var(--pg-surface);
  border: 1px solid var(--pg-border);
  padding: 20px;
  border-radius: var(--pg-radius-md);
  box-shadow: var(--pg-shadow-lg);
  z-index: var(--pg-z-modal);
  text-align: center;
  display: none;
}
.confirmation-dialog p { font-size: 1rem; margin-bottom: 1rem; color: var(--pg-text); }
.confirmation-dialog button {
  margin: 0 10px;
  padding: 6px 16px;
  border-radius: var(--pg-radius-sm);
  cursor: pointer;
  color: var(--pg-text);
  font-family: var(--pg-font-ui);
  border: 1px solid var(--pg-border);
}
#confirmYes { background: var(--pg-danger); color: var(--pg-on-accent); border-color: transparent; }
#confirmYes:hover { filter: brightness(1.1); }
#confirmNo { background: var(--pg-accent); color: var(--pg-on-accent); border-color: transparent; }
#confirmNo:hover { background: var(--pg-accent-hi); }

/* ============================================================
   Utility
   ============================================================ */
.field {
  width: 100%;
  padding: 0.5rem;
  margin-bottom: 0.5rem;
  border-radius: var(--pg-radius-sm);
  background: var(--pg-bg);
  color: var(--pg-text);
  border: 1px solid var(--pg-border);
}
#frameList.frame-list { display: flex; flex-wrap: wrap; }

/* --- M2: image / PFP import --- */
.pg-import-bar { display: flex; align-items: center; gap: 0.75rem; margin: 0 0 0.5rem; flex-wrap: wrap; }
.pg-import-btn {
  background: var(--pg-accent);
  color: var(--pg-on-accent);
  font-weight: var(--pg-weight-bold);
  border: 1px solid transparent;
  border-radius: var(--pg-radius-full);
  padding: 0.55rem 0.95rem;
  cursor: pointer;
  font-family: var(--pg-font-ui);
  transition: transform var(--pg-dur) var(--pg-ease), background var(--pg-dur) var(--pg-ease);
}
.pg-import-btn:hover { background: var(--pg-accent-hi); transform: translateY(-2px); }
.pg-import-tip { color: var(--pg-muted); font-size: var(--pg-text-sm); }
.pg-drop-hint {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--pg-bg) 78%, transparent);
  border: 2px dashed var(--pg-accent);
  color: var(--pg-accent-hi);
  font-weight: var(--pg-weight-bold);
  font-size: 1.15rem;
  border-radius: var(--pg-radius);
  pointer-events: none;
  z-index: var(--pg-z-hint);
}
.pg-drop-hint.visible { display: flex; }

/* --- M3: animation preset engine --- */
.pg-fx {
  margin: 0.5rem 0 0.75rem;
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  background: var(--pg-surface-2);
}
.pg-fx-title {
  margin: 0 0 0.15rem;
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-bold);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-accent);
}
.pg-fx-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: var(--pg-text-sm);
  color: var(--pg-muted);
}
.pg-fx-row > span { flex: 0 0 auto; }
.pg-fx-row .field {
  flex: 1 1 auto;
  width: auto;
  max-width: 58%;
  margin-bottom: 0;
}
.pg-fx-row input[type="range"] {
  flex: 1 1 auto;
  max-width: 58%;
  accent-color: var(--pg-accent);
}
.pg-fx-status {
  margin: 0.2rem 0 0;
  min-height: 1.1em;
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  color: var(--pg-status);
}
/* Overlay canvas that renders pixel/generative effects over the live preview */
.pg-fx-overlay {
  position: absolute;
  display: none;
  pointer-events: none;
  image-rendering: pixelated;
  border-radius: var(--pg-radius-sm);
  z-index: var(--pg-z-fx-overlay);
}
/* The MAIN-canvas effect mirror (m4) reuses .pg-fx-overlay but also carries the
   checkerboard so it fully masks the live draw surface beneath it — no double-image
   when a transform effect offsets the frame, and transparent pixels read as the
   editor checkerboard (matching #drawingCanvas). */
#pgMainFxOverlay {
  background-color: var(--pg-check-base);
  background-image:
    linear-gradient(45deg, var(--pg-check-sq) 25%, transparent 25%),
    linear-gradient(-45deg, var(--pg-check-sq) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--pg-check-sq) 75%),
    linear-gradient(-45deg, transparent 75%, var(--pg-check-sq) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
/* Determinate export progress (shown only during encode) */
.pg-fx-progress {
  display: none;
  width: 100%;
  height: 6px;
  margin: 0.15rem 0 0;
  border: none;
  border-radius: var(--pg-radius-full);
  background: var(--pg-bg);
  overflow: hidden;
  appearance: none;
  -webkit-appearance: none;
}
.pg-fx-progress::-webkit-progress-bar { background: var(--pg-bg); border-radius: var(--pg-radius-full); }
.pg-fx-progress::-webkit-progress-value { background: var(--pg-accent); border-radius: var(--pg-radius-full); }
.pg-fx-progress::-moz-progress-bar { background: var(--pg-accent); border-radius: var(--pg-radius-full); }
#exportBtn:disabled { opacity: 0.6; cursor: progress; }

/* ============================================================
   Responsive
   ============================================================ */
/* The add/copy/delete trio now lives in the Frames tab (#sheetFrames). The empty
   placeholder kept in .main-content (so the engine's load-time
   '.main-content .frame-controls' query still resolves) and the moved trio are
   both hidden by default; the mobile block reveals the #sheetFrames one. */
.main-content .frame-controls,
#sheetFrames .frame-controls { display: none; }

/* ------------------------------------------------------------
   Mobile shell — single column, canvas-first (Phase C / C1).
   The @media query is inherently reactive; src/m5-responsive.ts only undoes
   the engine's one-shot DOM reparent so these rules own the layout.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Slim top bar: tighter vertical padding + hide the tagline so the navbar is a
     single compact row (brand + status pill + donate), reclaiming vertical space.
     The pinned canvas adapts automatically via m6's --pg-app-bar-h measurement. */
  .navbar { padding: var(--pg-space-2) var(--pg-space-3); flex-wrap: wrap; gap: var(--pg-space-2); }
  .navbar .brand { font-size: var(--pg-text-lg); }
  .nav-meta { gap: var(--pg-space-3); }
  .nav-tagline { display: none; }

  /* Slim hero — keep the brand, drop the paragraph, reach the canvas fast. */
  .pg-hero { padding: clamp(1.25rem, 6vw, 2rem) var(--pg-space-4) var(--pg-space-4); }
  .pg-hero-title { font-size: var(--pg-text-xl); }
  .pg-hero-sub { display: none; }

  /* Single column: canvas first, then tools, then preview / export / frames. */
  .container { min-height: auto; max-width: 100%; }
  .content-wrapper { display: flex; flex-direction: column; gap: var(--pg-space-3); }
  .main-content { order: 1; padding: var(--pg-space-3); align-items: center; justify-content: flex-start; }
  .sidebar-left { order: 2; }
  .sidebar-right { order: 3; }
  .sidebar-left,
  .sidebar-right {
    /* static (not relative) so the engine's GSAP left/right:-150 entrance
       can't shove the column off-screen on mobile (left/right are ignored). */
    position: static;
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--pg-border);
  }
  /* Canvas keeps its native 256px backing — NEVER CSS-scaled (handleDraw maps
     taps via a fixed pixelSize). But Canvas Zoom grows the BACKING (256×zoom, up
     to 1280px), which used to overflow the screen with no way to pan and (when
     pinned) bury the control sheet. So on mobile the wrapper is a bounded scroll
     VIEWPORT: an oversized canvas pans inside it (two-finger, m13) instead of
     overflowing. `safe center` centres a canvas that fits the box yet keeps the
     top-left reachable when it overflows; the `max(260px, …)` floor guarantees
     the unzoomed 256 canvas never needlessly scrolls. */
  .canvas-wrapper {
    display: grid;
    place-content: safe center;
    max-width: 100%;
    max-height: max(260px, calc(100svh - var(--pg-app-bar-h, 4rem) - 13rem));
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .static-controls,
  .static-tools { position: relative; }
  .static-tools {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--pg-space-2);
    margin-bottom: var(--pg-space-2);
  }
  .static-tools .panel-title { display: none; }
  .tool-controls { width: auto; justify-content: center; flex-wrap: wrap; margin-bottom: var(--pg-space-2); }
  #colorPicker,
  #frameTextColorPicker { margin: 0 auto 0.5rem; }
  .scrollable-tools { padding: var(--pg-space-2); }
  .scrollable-tools .slider-label { font-size: var(--pg-text-sm); margin: 0.1rem auto; }
  .image-tools-container,
  .frame-image-tools-container,
  .trace-tools-container,
  .zoom-tools-container,
  .rotation-tools-container,
  .text-tools-container { margin-top: var(--pg-space-2); padding: var(--pg-space-1); }

  /* Reveal the add/copy/delete trio that moved into the Frames tab and PIN it to
     the top so it stays usable while the frame grid scrolls under it. The
     --pg-surface background (matching the sheet) covers frames scrolling behind. */
  #sheetFrames .frame-controls {
    display: flex;
    width: auto;
    justify-content: center;
    gap: var(--pg-space-2);
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 0 var(--pg-space-2);
    padding-block: var(--pg-space-2);
    background: var(--pg-surface);
  }
  .frame-controls-static { display: none; }

  /* The small preview canvas is retired (the MAIN canvas is the live preview) — keep
     it hidden even where m11 relocates the block into the Frames tab. Only the frame
     duration travels with the frames now; it centres via auto margins. */
  #sheetFrames .preview-canvas-wrapper { display: none; }

  /* Frames wrap into an aligned grid and scroll VERTICALLY inside the sheet (the
     .pg-sheet-active panel owns the bounded height + overflow-y). overflow-x is
     visible and the top/left padding give the .frame-number badge's -10px corner
     overhang room — the old overflow-x:auto scroller clipped both axes and cut
     the number off. */
  #frameList.frame-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
    justify-items: center;
    align-content: start;
    overflow-x: visible;
    gap: var(--pg-space-4) var(--pg-space-3);
    padding: var(--pg-space-3) var(--pg-space-2) var(--pg-space-2) var(--pg-space-3);
  }
  #frameList.frame-list .frame { margin: 0; }

  /* --- Touch ergonomics: >= 44px targets, no iOS focus-zoom --- */
  .tool-button,
  .frame-button {
    min-width: var(--pg-touch-target);
    min-height: var(--pg-touch-target);
    font-size: 1.2rem;
  }
  /* (.pg-playbar-btn keeps its own circular media-control sizing.) */
  .color-swatch { width: 38px; height: 38px; }
  .field,
  #frameDuration,
  select,
  input[type='number'] {
    min-height: var(--pg-touch-target);
    font-size: 16px; /* >= 16px prevents iOS Safari zoom-on-focus */
  }
  input[type='range'] { width: 100%; }

  /* Effects panel: stack full-width instead of the cramped label-beside-control. */
  .pg-fx-row { flex-wrap: wrap; }
  .pg-fx-row .field,
  .pg-fx-row input[type='range'] { flex: 1 1 100%; max-width: 100%; }

  /* Toggles back to a comfortable size (the engine shrinks them to 24px). */
  .toggle-container { width: 120px; }
  .toggle-label { width: 120px; height: var(--pg-touch-target); }
  .toggle-label::before { width: 56px; height: calc(var(--pg-touch-target) - 8px); }
  #imagePosition:checked + .toggle-label::before,
  #includeOverlay:checked + .toggle-label::before,
  #frameImagePosition:checked + .toggle-label::before { transform: translateX(56px); }
  .toggle-text { font-size: var(--pg-text-xs); }
  .toggle-text.below, .toggle-text.off { left: 12px; }
  .toggle-text.above, .toggle-text.on { right: 12px; }

  /* The hover-only pixel coordinate readout is dead weight on touch. */
  .pg-coords { display: none; }
}

/* ------------------------------------------------------------
   Footer (S16) — version + provenance
   ------------------------------------------------------------ */
.pg-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--pg-space-2);
  padding: var(--pg-space-8) var(--pg-space-4);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pg-muted);
  text-align: center;
}
.pg-footer a {
  color: var(--pg-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--pg-border);
  transition: color var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
}
.pg-footer a:hover { color: var(--pg-accent); border-color: var(--pg-accent); }
.pg-footer a:focus-visible { outline: 2px solid var(--pg-focus); outline-offset: 2px; }
.pg-footer-ver { color: var(--pg-accent); }
.pg-footer a.pg-footer-feedback { color: var(--pg-accent-2); border-bottom-color: rgba(247, 37, 133, 0.5); }
.pg-footer a.pg-footer-feedback:hover { color: var(--pg-accent-2-hi); border-color: var(--pg-accent-2-hi); }
@media (max-width: 768px) {
  /* Clear the fixed bottom tab-bar + iOS safe area. */
  .pg-footer { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ------------------------------------------------------------
   Phase C / C2 — mobile bottom-sheet shell (JS-enhanced: body.pg-shell,
   set by src/m6-mobile-sheets.ts only at <=768px). Progressive enhancement
   over the C1 @media column above; without JS that column is the fallback.
   ------------------------------------------------------------ */
.pg-tabbar { display: none; }
.pg-sheet-backdrop { display: none; }

body.pg-shell .pg-tabbar {
  display: flex;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--pg-z-tabbar);
  gap: var(--pg-space-1);
  padding: var(--pg-space-1) var(--pg-space-2);
  padding-bottom: max(var(--pg-space-1), env(safe-area-inset-bottom));
  background: var(--pg-surface);
  border-top: 1px solid var(--pg-border);
}
body.pg-shell .pg-tab {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  min-height: var(--pg-touch-target);
  padding: var(--pg-space-1);
  background: none;
  border: 1px solid transparent;
  border-radius: var(--pg-radius-sm);
  color: var(--pg-muted);
  font-family: var(--pg-font-ui);
  cursor: pointer;
}
body.pg-shell .pg-tab-ico { font-size: 1.2rem; line-height: 1; }
body.pg-shell .pg-tab-label { font-size: var(--pg-text-xs); }
body.pg-shell .pg-tab[aria-selected='true'] {
  color: var(--pg-accent-2);
  background: var(--pg-surface-2);
  border-color: var(--pg-border-hi);
}

/* The four sidebar groups are hidden until opened as a sheet. */
body.pg-shell .static-tools,
body.pg-shell .scrollable-tools,
body.pg-shell .static-controls,
body.pg-shell .scrollable-controls { display: none; }
body.pg-shell .sidebar-left,
body.pg-shell .sidebar-right {
  border: none;
  /* The sidebars carry a base z-index:10 and are flex items here — a flex item
     with a z-index makes a stacking context that would TRAP the fixed sheet's
     z-index below the body-level backdrop. Drop it so the sheet stacks at root. */
  z-index: auto;
}

/* The editor's glass .container has backdrop-filter:blur, which makes it a
   CONTAINING BLOCK for fixed descendants — that would anchor the fixed sheet +
   pinned canvas to .container instead of the viewport. Drop it in the shell so
   they position against the viewport. (Over the solid dark bg the blur is
   invisible anyway.) The GSAP entrance transform — even at its identity end state
   — would ALSO make these a containing block (and anchor the fixed playback dock
   to .main-content, which scrolls), so clear it on mobile for the whole shell, not
   just on sheet-open as m6 did. !important beats GSAP's inline transform; the
   opacity fade still plays. */
body.pg-shell .container,
body.pg-shell .main-content {
  transform: none !important;
}
body.pg-shell .container {
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Leave room for the fixed tab-bar below the canvas (incl. iOS home-indicator
   inset, live now that the viewport meta sets viewport-fit=cover). */
body.pg-shell .main-content {
  /* Clear the bottom dock (tab-bar + persistent playback bar) so in-flow content
     (the canvas + below) isn't hidden behind it when no sheet is open. */
  padding-bottom: calc(var(--pg-tabbar-h) + var(--pg-playbar-h) + var(--pg-space-4));
  /* Desktop gives .main-content z-index:0 — a stacking context that would TRAP
     the pinned canvas's z-index below the body-level sheet backdrop (same trap
     as the sidebars above). Drop it so the pin stacks at root. */
  z-index: auto;
}

/* Active group slides up above the tab-bar as a bottom sheet. */
body.pg-shell .pg-sheet-active {
  display: block;
  position: fixed;
  left: 0; right: 0;
  /* Anchored top AND bottom → a fixed lower-half panel whose height never
     depends on content (max-height alone let tall groups escape to the top).
     The canvas pins to the top above it; tall groups scroll WITHIN the sheet. */
  top: 50vh;
  bottom: calc(var(--pg-tabbar-h) + var(--pg-playbar-h)); /* clear the tab-bar + the persistent playback dock */
  z-index: var(--pg-z-sheet);
  overflow-y: auto;
  /* Keep the scroll INSIDE the sheet: don't chain to the page behind it (the
     "grabbing the background" when you scroll/overscroll the controls). */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  /* A visible scrollbar on the side so you can scroll cleanly without dragging on
     the sliders. scrollbar-gutter reserves its lane so it never overlaps a control. */
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: var(--pg-accent) transparent;
  scrollbar-gutter: stable;
  margin: 0;
  padding: var(--pg-space-6) var(--pg-space-4) var(--pg-space-6);
  background: var(--pg-surface);
  border-top: 1px solid var(--pg-border-hi);
  border-radius: var(--pg-radius-lg) var(--pg-radius-lg) 0 0;
  box-shadow: var(--pg-shadow-lg);
  animation: pg-sheet-up var(--pg-dur) var(--pg-ease);
}
/* Grabbable cyan scrollbar (Chromium/Android; iOS keeps its overlay bar). Wider
   than the desktop sidebars so it's easy to drag with a thumb; the thumb is inset
   via a transparent border so the touch target stays generous. */
body.pg-shell .pg-sheet-active::-webkit-scrollbar { width: 10px; }
body.pg-shell .pg-sheet-active::-webkit-scrollbar-track {
  background: color-mix(in srgb, var(--pg-bg) 55%, transparent);
  border-radius: 5px;
}
body.pg-shell .pg-sheet-active::-webkit-scrollbar-thumb {
  background: var(--pg-accent);
  border-radius: 6px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
body.pg-shell .pg-sheet-active::-webkit-scrollbar-thumb:active { background: var(--pg-accent-hi); }
/* Grabber handle — signals a dismissible bottom sheet. */
body.pg-shell .pg-sheet-active::before {
  content: '';
  position: absolute;
  top: var(--pg-space-2);
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  border-radius: var(--pg-radius-full);
  background: var(--pg-border-hi);
}
@keyframes pg-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* While a sheet is open, pin the canvas to the top — ABOVE the backdrop (so it
   stays bright) and above the sheet (so it stays drawable even where they
   overlap on short/landscape viewports) — so edits are visible live.
   translateX only (never scale) keeps the engine's tap→pixel mapping correct.
   !important on the transform: the engine runs gsap.fromTo('#canvasWrapper',
   {scale}) juice on frame add/select/navigate; run while the sheet is closed it
   leaves an inline identity-matrix transform (no translate) that would override
   this centering and shove the pinned canvas off-screen to the right. Author
   !important beats GSAP's inline (non-important) transform, restoring centering
   AND keeping the pinned canvas unscaled. */
body.pg-shell.pg-sheet-open .canvas-wrapper {
  position: fixed;
  top: calc(var(--pg-app-bar-h, 4rem) + var(--pg-space-2)); /* clear the real app bar (m6 measures it; navbar wraps taller on narrow mobile) + a small gap */
  /* Full-width bounded box between the app bar and the sheet top (50vh): a zoomed
     canvas pans INSIDE it (m13) and can never cover the sheet, which the old
     content-sized wrapper did once it grew to 1280px. The canvas centres via the
     grid above; transform:none beats GSAP's inline entrance transform (no shove). */
  left: var(--pg-space-2);
  right: var(--pg-space-2);
  max-height: calc(50vh - var(--pg-app-bar-h, 4rem) - var(--pg-space-4));
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  transform: none !important;
  z-index: var(--pg-z-canvas-pin);
  margin: 0;
}

body.pg-shell.pg-sheet-open .pg-sheet-backdrop {
  display: block;
  position: fixed;
  /* Start BELOW the pinned canvas so the canvas stays bright AND interactive
     (you can draw with a sheet open); the scrim covers only the gap + behind
     the sheet, and catches outside-taps to dismiss. */
  top: 40vh;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--pg-z-scrim);
  background: color-mix(in srgb, var(--pg-bg) 40%, transparent);
}

/* ============================================================
   Donate (☕ header button + modal — src/m9-donate.ts)
   ============================================================ */
.pg-donate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--pg-radius-sm);
  font-size: var(--pg-text-base);
  line-height: 1;
  cursor: pointer;
  filter: grayscale(1) opacity(0.65);
  transition: filter var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease),
    transform var(--pg-dur) var(--pg-ease);
}
.pg-donate-btn:hover {
  filter: none;
  border-color: var(--pg-accent-2);
  transform: translateY(-2px);
}

.pg-donate-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--pg-z-modal);
  background: color-mix(in srgb, var(--pg-bg) 65%, transparent);
}
.pg-donate-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: var(--pg-z-modal);
  width: min(92vw, 340px);
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--pg-space-6);
  background: var(--pg-surface);
  border: 1px solid var(--pg-border-hi);
  border-radius: var(--pg-radius-lg);
  box-shadow: var(--pg-shadow-lg);
  text-align: center;
}
.pg-donate-eyebrow {
  margin: 0 0 var(--pg-space-2);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-muted);
}
.pg-donate-title {
  margin: 0 0 var(--pg-space-2);
  font-size: var(--pg-text-xl);
  font-weight: var(--pg-weight-display);
  color: var(--pg-text);
}
.pg-donate-sub {
  margin: 0 0 var(--pg-space-4);
  font-size: var(--pg-text-sm);
  color: var(--pg-muted);
}
.pg-donate-tabs {
  display: inline-flex;
  gap: var(--pg-space-1);
  margin: 0 auto var(--pg-space-4);
  padding: var(--pg-space-1);
  background: var(--pg-bg-1);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-full);
}
.pg-donate-tab {
  min-height: var(--pg-touch-target);
  padding: 0 var(--pg-space-6);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  font-weight: var(--pg-weight-medium);
  letter-spacing: var(--pg-tracking-label);
  color: var(--pg-muted);
  background: none;
  border: none;
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  transition: background var(--pg-dur) var(--pg-ease), color var(--pg-dur) var(--pg-ease);
}
.pg-donate-tab:hover { color: var(--pg-text); }
.pg-donate-tab.is-active {
  /* magenta = active / selected, per palette */
  color: var(--pg-on-accent);
  background: var(--pg-accent-2);
}
.pg-donate-panel[hidden] { display: none; }
.pg-donate-qr {
  display: block;
  margin: 0 auto var(--pg-space-3);
  border-radius: var(--pg-radius-sm);
  /* the SVG bakes its own white quiet zone — no border needed */
}
.pg-donate-net {
  margin: 0 0 var(--pg-space-2);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  letter-spacing: var(--pg-tracking-label);
  text-transform: uppercase;
  color: var(--pg-status); /* teal: status-grade info */
}
.pg-donate-addr {
  display: block;
  margin: 0 0 var(--pg-space-4);
  padding: var(--pg-space-2);
  font-family: var(--pg-font-mono);
  font-size: var(--pg-text-xs);
  word-break: break-all;
  color: var(--pg-text);
  background: var(--pg-bg-1);
  border: 1px solid var(--pg-border);
  border-radius: var(--pg-radius-sm);
  user-select: all;
}
.pg-donate-actions {
  display: flex;
  gap: var(--pg-space-2);
  justify-content: center;
}
.pg-donate-copy,
.pg-donate-close {
  min-height: var(--pg-touch-target);
  padding: var(--pg-space-2) var(--pg-space-4);
  font-family: var(--pg-font-ui);
  font-size: var(--pg-text-sm);
  font-weight: var(--pg-weight-medium);
  border-radius: var(--pg-radius-full);
  cursor: pointer;
  transition: background var(--pg-dur) var(--pg-ease), border-color var(--pg-dur) var(--pg-ease);
}
.pg-donate-copy {
  color: var(--pg-on-accent);
  background: var(--pg-accent);
  border: 1px solid transparent;
}
.pg-donate-copy:hover { background: var(--pg-accent-hi); }
.pg-donate-copy.pg-copied {
  color: var(--pg-on-accent);
  background: var(--pg-status);
}
.pg-donate-close {
  color: var(--pg-muted);
  background: none;
  border: 1px solid var(--pg-border);
}
.pg-donate-close:hover { border-color: var(--pg-accent-2); color: var(--pg-text); }

/* On touch (no hover), don't let decorative :hover transforms stick after a tap. */
@media (hover: none) {
  .tool-button:hover,
  .frame-button:hover,
  .pg-import-btn:hover,
  .color-swatch:hover { transform: none; }
}

/* ============================================================
   Reduced motion — kill decorative animation & transforms
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .tool-button:hover,
  .frame-button:hover,
  .frame:hover,
  .pg-cta:hover,
  .pg-import-btn:hover,
  #exportBtn:hover,
  #saveColorBtn:hover,
  #copyPrevTextBtn:hover,
  #resetProjectBtn:hover,
  #removeTextBtn:hover { transform: none; }
}