/* EMBERWALL — the map editor (.me-* namespace only). render/mapEditor.js + mapLibrary.js +
   mapCanvas.js. The editor may be mounted outside #ui, so its controls are styled from scratch
   here instead of inheriting the shared button/input chrome from styles.css.
   Sibling of styles.css (tokens + shared chrome), loaded after it per the four-stylesheet split
   recorded in index.html and docs/decisions.md. */

/* --------------------------------------------------------------- map editor ------ */
/* render/mapEditor.js + mapLibrary.js + mapCanvas.js. The screen is shown and hidden with an
   inline `display` (mapEditorShared.show), so every rule here describes the VISIBLE state —
   a hidden node carries `display: none` inline and wins regardless.
   The editor may be mounted outside #ui, so its controls are styled from scratch instead of
   inheriting the shared button/input chrome. */

.me-root {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  box-sizing: border-box;
  background: radial-gradient(120% 120% at 50% 0%, var(--bg-2), var(--bg-0) 70%);
  color: var(--text);
  font: 15px/1.45 var(--font);
  pointer-events: auto;
}

.me-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(28, 24, 30, 0.96), rgba(28, 24, 30, 0.74));
}

.me-title { flex: 1 1 auto; margin: 0; font-size: 18px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--accent); }
.me-dirty { padding: 3px 10px; border: 1px dashed rgba(255, 194, 74, 0.6); border-radius: 999px;
  font-size: 11px; letter-spacing: 0.08em; color: var(--warn); }
.me-status { font-family: var(--mono); font-size: 12px; color: var(--good); }

/* --- controls --- */

.me-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--tap);
  min-width: var(--tap);
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--panel-soft);
  color: inherit;
  font: inherit;
  font-size: 13px;
  text-align: center;
  cursor: pointer;
  touch-action: manipulation;
  transition: background var(--ui-fade) var(--ease), border-color var(--ui-fade) var(--ease),
    color var(--ui-fade) var(--ease), opacity var(--ui-fade) var(--ease);
}

.me-btn:hover:not(:disabled) { border-color: var(--line-hot); background: color-mix(in srgb, var(--accent) 10%, var(--panel-soft)); }
.me-btn:active:not(:disabled) { transform: translateY(1px); }
.me-btn:disabled { opacity: 0.42; cursor: default; }
/* Same filled treatment as .ui-btn-primary, for the same reason — "Save & Play" and "Confirm" are
   the editor's commit actions and should not look like "Cancel". */
.me-btn-primary { border-color: transparent; background: var(--accent); color: var(--ink-on-accent); font-weight: 600; }
.me-btn-primary:hover:not(:disabled) { border-color: transparent; background: var(--accent); filter: brightness(1.06); }
.me-btn-ghost { background: none; }
.me-btn-danger, .me-btn.is-danger { border-color: rgba(255, 93, 108, 0.4); color: #ffb3ba; }
.me-btn-danger:hover:not(:disabled), .me-btn.is-danger:hover:not(:disabled) {
  border-color: var(--bad); background: rgba(255, 93, 108, 0.12); }
.me-btn.is-active { border-color: var(--line-hot); background: var(--tint); color: var(--accent); }

.me-field { display: flex; align-items: center; gap: 8px; min-width: 0; }
.me-field-label { flex: 0 0 auto; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--faint); }

.me-input, .me-select, .me-textarea {
  flex: 1 1 auto;
  min-width: 0;
  min-height: var(--tap);
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--sunken);
  color: inherit;
  font: inherit;
  font-size: 14px;
}

.me-input:focus, .me-select:focus, .me-textarea:focus { border-color: var(--line-hot); outline: none; }
.me-input-num { flex: 0 0 88px; font-family: var(--mono); }
.me-textarea { display: block; width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--mono); font-size: 13px; }
.me-range { flex: 1 1 auto; min-height: var(--tap); padding: 0; border: 0; background: none;
  accent-color: var(--accent); }
.me-brush-value { flex: 0 0 auto; min-width: 22px; font-family: var(--mono); text-align: center; }

.me-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.me-sub { margin: 0; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--dim); }
.me-hint { margin: 0; font-size: 12px; line-height: 1.4; color: var(--faint); }
.me-inline-error { margin: 0; font-size: 12px; color: var(--bad); }
.me-empty { margin: 0; padding: 24px 4px; font-size: 13px; color: var(--faint); }

/* --- library --- */

.me-library {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.me-lib-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.me-lib-count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--faint); }

.me-panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--sunken);
}

.me-panel-text { margin: 0; font-size: 13px; color: var(--dim); }

.me-lib-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }

.me-card {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
}

/* A canvas is a replaced element: without an explicit box it falls back to 300x150 and tears
   the card grid apart. These are the exact pixel dimensions mapEditorShared.thumbnail draws. */
.me-thumb {
  display: block;
  width: 132px;
  height: 88px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--bg-1);
}

.me-card-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.me-card-name { margin: 0; font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.me-card-line { margin: 0; font-size: 12px; color: var(--dim); }
.me-card-warn { color: var(--warn); }
.me-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.me-card-actions .me-btn { flex: 1 1 auto; }

.me-badge {
  align-self: flex-start;
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--dim);
}

.me-badge.is-valid, .me-vstate.is-valid { border-color: rgba(158, 222, 122, 0.5); color: var(--good); }
.me-badge.is-invalid, .me-vstate.is-invalid { border-color: rgba(255, 93, 108, 0.55); color: #ffb3ba; }

/* --- editor --- */

.me-editor { display: flex; flex: 1 1 auto; min-height: 0; min-width: 0; }

/* The painting surface. mapCanvas appends its own <canvas class="me-canvas"> here and stretches
   it inline, so this box is what actually decides the drawing resolution. */
.me-canvas-host {
  flex: 1;
  min-height: 320px;
  min-width: 0;
  position: relative;
  overflow: hidden;
  background: var(--bg-1);
  touch-action: none;
}

.me-side {
  display: flex;
  flex-direction: column;
  /* Deliberately not --side-w: the in-game side panel collapses to 0 on phones, and the editor
     needs its own width there. */
  flex: 0 0 clamp(268px, 30vw, 350px);
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  border-left: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(30, 26, 33, 0.92), rgba(28, 24, 30, 0.96));
}

.me-tools, .me-settings, .me-validation {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

.me-section-head { display: flex; align-items: center; gap: 8px; }
.me-tools.is-collapsed { padding-bottom: 8px; }
.me-tool-body { display: flex; flex-direction: column; gap: 8px; }
.me-tool-body .me-row .me-btn { flex: 1 1 auto; }

.me-tile-list { display: grid; gap: 6px; }

.me-tile-btn {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  height: auto;
  padding: 8px 10px;
  text-align: left;
}

.me-swatch {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

.me-tile-copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.me-tile-name { font-size: 13px; font-weight: 600; }
.me-tile-desc {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: 11px;
  line-height: 1.35;
  font-weight: 400;
  color: var(--faint);
}

.me-vstate { padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--sunken); font-size: 13px; }
.me-vlist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; line-height: 1.4; }
.me-vlist:empty { display: none; }
.me-vitem-error { color: #ffb3ba; }
.me-vitem-warning { color: var(--warn); }
.me-vstats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; margin: 0; font-size: 12px; }
.me-vstat-label { color: var(--faint); }
.me-vstat-value { margin: 0; font-family: var(--mono); text-align: right; color: var(--text); }

.me-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 12px calc(12px + var(--safe-r)) calc(12px + var(--safe-b)) 12px;
}

.me-footer .me-btn { flex: 1 1 auto; }

/* --- shared modal --- */

.me-modal {
  position: fixed;
  inset: 0;
  z-index: 12;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  box-sizing: border-box;
  background: rgba(20, 17, 23, 0.72);
  backdrop-filter: blur(3px);
}

.me-modal-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: min(460px, 100%);
  max-height: 100%;
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
  box-sizing: border-box;
}

.me-modal-title { margin: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; color: var(--accent); }
.me-modal-body { display: flex; flex-direction: column; gap: 10px; }
.me-modal-text { margin: 0; font-size: 13px; color: var(--dim); }
.me-modal-card .me-row .me-btn { flex: 1 1 auto; }

/* Phones and short windows: the side panel drops below the board and the whole screen scrolls. */
@media (max-width: 860px), (max-height: 560px) {
  .me-editor { flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
  .me-canvas-host { flex: 0 0 auto; height: min(52vh, 420px); min-height: 240px;
    border-bottom: 1px solid var(--line); }
  .me-side { flex: 1 0 auto; overflow: visible; border-left: 0; }
  .me-lib-list { grid-template-columns: 1fr; }
  .me-card { grid-template-columns: 1fr; justify-items: start; }
  .me-thumb { width: 100%; height: 120px; object-fit: contain; }
  .me-bar { padding: 8px 10px; }
  .me-title { font-size: 15px; }
}

/* D50: the Variety row — the specific-asset brush's palette. A dense wrap of small chips rather
   than the tall descriptive cards the terrain row uses: there are twenty-odd of them and the name
   is the whole description. */
.me-prop-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.me-prop-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 4px 9px;
  font-size: 11px;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* D65: the role row sits above the kinds and reads as the primary choice — a role chip names the
   meaning on its face and this world's answer underneath it, so the mapping is visible rather than
   something the author has to remember. Wider chips than the kind row because they carry two lines. */
.me-role-list {
  margin-bottom: 8px;
}
.me-role-list .me-prop-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  min-height: 34px;
  line-height: 1.2;
}
.me-role-kind {
  font-size: 9px;
  opacity: 0.62;
  text-transform: none;
  letter-spacing: 0.02em;
}