/* ASCII editor panel -- reuses the site's existing tokens (styles.css:1-11)
   rather than introducing a parallel palette. No new dependency, matches the
   rest of the site's hand-authored-stylesheet approach.

   Structure (redesigned after a 4-lens UI review found the previous one-row
   toolbar-above-palette-above-canvas stack read as "one undifferentiated
   pile of controls"): a docked left sidebar (Tools / Symmetry / Characters)
   next to a canvas stage (a slim History+Zoom+Done-editing strip, the
   framed canvas, a status bar) -- mirroring the generator's own existing
   left-panel/right-stage skeleton instead of abandoning it in edit mode. */

.ascii-editor-panel {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg-secondary);
  overflow: hidden;
}

.ascii-editor-panel[hidden] {
  display: none;
}

.editor-body {
  display: flex;
  align-items: stretch;
}

/* ---------- Sidebar: Tools / Symmetry / Characters ---------- */

.editor-sidebar {
  width: 220px;
  flex: 0 0 220px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  border-right: 1px solid var(--border);
  background: var(--bg-secondary);
}

.editor-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.editor-sidebar-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin: 0;
}

.editor-tools {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.editor-tool {
  width: 100%;
  min-height: 44px;
  padding: 0 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  justify-content: flex-start;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}

.editor-tool svg {
  flex: 0 0 auto;
}

/* Selected tool gets a solid fill, not just an outline -- the same
   treatment the character-swatch selector already used correctly, now
   applied consistently so "which tool is active" reads at a glance instead
   of requiring a close look at a thin focus-ring-like border. */
.editor-tool[aria-pressed="true"],
.editor-tool.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.editor-tool:hover {
  transform: translateY(-1px);
  border-color: var(--accent);
}

/* ---------- Symmetry ---------- */

.editor-mirror {
  display: flex;
  gap: 0.4rem;
}

/* Icon-only, like Undo/Redo (.editor-icon-btn) -- "Mirror ↔ / Mirror ↕" as
   visible text overflowed the 220px sidebar (two buttons needed ~204px in a
   187px-wide row). The label still exists for assistive tech via
   aria-label/title/the .sr-only span; sighted users get the icon plus a
   tooltip, same as Undo/Redo already work.
   Fixed compact size, NOT flex:1 -- stretching a now-textless button to
   fill half the row left a large mostly-empty box with a tiny icon
   adrift in the middle of it, which read as more broken than the
   overflow it replaced. Sized and aligned like the Undo/Redo icon
   buttons instead of like the full-width Tool buttons above them. */
.editor-toggle {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.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;
}

.editor-toggle[aria-pressed="true"],
.editor-toggle.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.editor-toggle:hover {
  border-color: var(--accent);
}

/* ---------- Characters ---------- */

.editor-sidebar-characters {
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.editor-palette {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 0.3rem;
  margin-bottom: 0.5rem;
  /* The default charset has 5 characters and never needed this, but larger
     sets (Extended Detail Set has ~70 unique characters) blew the sidebar
     out to 1500+px tall with no constraint here -- scroll internally past
     a reasonable height instead of ballooning the whole panel. */
  max-height: 220px;
  overflow-y: auto;
  padding-right: 2px; /* keeps swatches off the scrollbar itself */
}

.editor-swatch {
  width: auto;
  min-width: 36px;
  min-height: 36px;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 4px;
  font-family: "Roboto Mono", "Courier New", monospace;
  cursor: pointer;
}

.editor-swatch.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.editor-palette-custom {
  display: flex;
  gap: 0.5rem;
}

.editor-palette-custom input[type="text"] {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 6px;
  font-family: "Roboto Mono", "Courier New", monospace;
}

.editor-palette-custom button {
  width: auto;
  flex: 0 0 auto;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--border);
  background: var(--bg-primary);
  color: var(--text-primary);
  border-radius: 6px;
  cursor: pointer;
}

/* ---------- Stage: history/zoom/exit strip, canvas, status bar ---------- */

.editor-stage {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  gap: 0.75rem;
}

.editor-stage-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.editor-history {
  display: flex;
  gap: 0.35rem;
}

.editor-icon-btn {
  width: 36px;
  height: 36px;
  min-width: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.editor-icon-btn:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--text-primary);
}

.editor-icon-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.editor-zoom {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-secondary);
  padding-left: 0.75rem;
  border-left: 1px solid var(--border);
}

.editor-zoom input[type="range"] {
  width: 90px;
}

.editor-zoom-value {
  font-family: "Roboto Mono", "Courier New", monospace;
  display: inline-block;
  min-width: 2.5em; /* holds its width as the text changes (e.g. "6px" vs "24px") so the row doesn't jitter */
}

/* Done editing is the one action that ends the session and points you
   toward publishing -- it gets the same primary treatment as "Generate
   ASCII Art" (styles.css's solid-accent button), not the neutral chrome
   Undo/Redo use. Previously this looked identical to "Redo," which made it
   easy to miss as the thing you're supposed to press when you're done. */
.editor-close {
  margin-left: auto;
  padding: 0 1.25rem;
  min-height: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  white-space: nowrap;
  border: none;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.editor-close:hover {
  background: var(--accent-hover);
  transform: translateY(-1px);
}

.editor-canvas-wrap {
  flex: 1 1 auto;
  min-height: 0;
  max-height: 60vh;
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-primary);
  /* Centers the canvas on both axes -- when the fitted cell size doesn't
     divide the available width/height evenly (it rarely does), the leftover
     space becomes a symmetric margin around the art instead of a lopsided
     gap on one side, which is what a plain block-level wrap stretched to
     100% width (or align-items:flex-start, which only centers horizontally
     despite this comment previously claiming otherwise) produced before. */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Two-finger scroll still pans on touch even though the canvas itself sets
     touch-action:none for single-finger drawing (paint-surface.js). */
}

#editor-canvas {
  display: block;
  flex: 0 0 auto;
}

.editor-status-bar {
  font-size: 0.75rem;
  color: var(--text-secondary);
  font-family: "Roboto Mono", "Courier New", monospace;
}

.editor-lock-banner {
  display: none;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-left: 2px solid var(--accent);
  background: rgba(99, 102, 241, 0.08);
  color: var(--text-secondary);
  font-size: 0.85rem;
  border-radius: 4px;
}

.editor-lock-banner.is-visible {
  display: flex;
}

/* Raised from 720px to 768px to match styles.css/scripts.js's own mobile
   threshold -- a 720px cutoff left 720-768px devices (e.g. iPad portrait)
   on the desktop side of this rule while still being "mobile" everywhere
   else on the site, which meant they got the stretch-driven dead-space bug
   above AND width-starved zoom fitting, the worst of both layouts. */
@media (max-width: 768px) {
  .editor-body {
    flex-direction: column;
  }

  /* Canvas first, tools below -- matches how every mobile drawing app
     (Procreate, Notability, even mobile MS Paint) puts the canvas first and
     controls in a drawer/below it, and means a person sees the thing they
     just asked to create immediately instead of scrolling past the whole
     sidebar first. */
  .editor-stage {
    order: 1;
  }

  .editor-sidebar {
    order: 2;
    width: auto;
    flex: 0 0 auto;
    border-right: none;
    border-top: 1px solid var(--border);
  }

  .editor-tools {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .editor-tool {
    width: auto;
    flex: 1 1 auto;
  }

  /* Touch-target floor raised to 44px in the one cluster (character
     selection) where a mis-tap directly corrupts what you're about to
     paint, plus the icon/toggle buttons that were still sized for a mouse. */
  .editor-swatch {
    min-width: 44px;
    min-height: 44px;
  }

  .editor-icon-btn {
    width: 44px;
    height: 44px;
    min-width: 44px;
  }

  .editor-toggle {
    width: 44px;
    height: 44px;
  }

  .editor-stage-toolbar {
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .editor-canvas-wrap {
    max-height: 45vh;
  }

  .editor-zoom input[type="range"] {
    width: 70px;
  }
}

/* Phones only: the docked sidebar-beside-canvas layout above isn't just
   under-tuned here, it's arithmetically impossible to fix in place -- at a
   320px-wide phone the sidebar alone (Tools/Symmetry/Characters) measures
   taller than the entire visible viewport after browser chrome. No amount
   of hiding page chrome or scrolling changes that inequality; the only fix
   is to reclaim the space normal document flow can't reclaim on its own.
   Tablet/desktop don't need this -- their problem is dead space and a
   marketing-content "tax" before the fold, both fully solved above and by
   scripts.js's chrome-hiding/scrollIntoView, not an unreachable canvas. */
@media (max-width: 600px) {
  .ascii-editor-panel:not([hidden]) {
    position: fixed;
    inset: 0;
    z-index: 50;
    margin: 0;
    border: none;
    border-radius: 0;
    height: 100dvh;
    display: flex;
    flex-direction: column;
  }

  .editor-body {
    flex: 1 1 auto;
    min-height: 0;
  }

  .editor-stage {
    flex: 1 1 auto;
    min-height: 0;
  }

  .editor-sidebar {
    max-height: 34dvh;
    overflow-y: auto;
  }

  .editor-canvas-wrap {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
  }

  /* Only lock background scroll where the panel is actually a fixed
     full-viewport overlay (above). On desktop/tablet the editor is still
     normal document flow -- scripts.js adds this class unconditionally on
     open, but locking body scroll there trapped the page with no way to
     reach anything below the editor, including "Done editing" itself if
     the sidebar/palette made the panel taller than the viewport. */
  body.editor-modal-open {
    overflow: hidden;
  }
}