/* The ALYSSIUN Engine editor inside ALY: the canvas frame, and the Publish,
   Versions and Backups sections of Settings. Engine's own Hierarchy,
   Inspector, Files and Scenes are drawn by the editor in the frame
   (docs/engine-embed-contract.md, `show-panel`), never here.

   ALYSSIUN semantic tokens only. No brand colour, font, shadow or button
   treatment is written here, and there is no theme toggle: the editor follows
   ALY's atmosphere over the embed contract. */

.engine-canvas { position: absolute; inset: 0; display: flex; }

.engine-canvas-frame {
  flex: 1;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--void);
}

.engine-canvas-status,
.engine-canvas-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 24px;
  text-align: center;
  font-size: 13px;
  color: var(--muted);
  background: var(--void);
  z-index: 1;
}

.engine-canvas-status[hidden] { display: none; }

/* --- Panel sections (Settings → Publish / Versions / Backups) -------------- */

.engine-panel { display: grid; gap: 18px; padding: 4px 0 20px; }

.engine-panel-section { display: grid; gap: 8px; }

.engine-panel-section h3 {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

.engine-panel-empty { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted); }

.engine-panel-note { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }

/* Versions, backups and the live link, as rows in Settings.
 *
 * Every colour, border and radius is an ALYSSIUN semantic token, so LUX and NEO
 * both come from the OS rather than from anything decided here (/root/AGENTS.md).
 */
.engine-history-row {
  border: 1px solid var(--hair);
  border-radius: 4px;
  display: grid;
  gap: 2px;
  padding: 8px 10px;
}

/* What is live is the one thing worth finding at a glance. */
.engine-history-row.is-live { border-color: var(--hair-2); }

.engine-history-head { align-items: center; display: flex; gap: 8px; justify-content: space-between; }
.engine-history-label { color: var(--text); font-size: 13px; }

.engine-history-badge {
  border: 1px solid var(--hair-2);
  border-radius: 3px;
  color: var(--muted);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  text-transform: uppercase;
}

.engine-history-meta { color: var(--muted); font-size: 11.5px; margin: 0; }
/* Open, then Restore: the same row holds what a snapshot is and what can be
   done with it, so nobody is sent "to the editor" to do the second part. */
.engine-history-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 4px; }
.engine-history-link { color: var(--muted); font-size: 11.5px; justify-self: start; padding: 4px 0; }
.engine-history-link:hover { color: var(--text); }
.engine-history-action { font-size: 11.5px; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); cursor: pointer; min-height: 30px; }
.engine-history-action:hover:not(:disabled) { border-color: var(--text); }
.engine-history-action:disabled { color: var(--muted); cursor: default; }
/* Phase 6: the live link a client receives, shown in full with a one-tap copy. */
.engine-history-share { display: grid; gap: 6px; margin-top: 6px; }
.engine-history-url { color: var(--text); font-size: 11px; line-height: 1.4; overflow-wrap: anywhere; user-select: all; -webkit-user-select: all; }
.engine-history-copy { justify-self: start; font-size: 11.5px; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--hair); background: var(--surface); color: var(--text); cursor: pointer; }
.engine-history-copy:hover { border-color: var(--text); }

.engine-history-publish {
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
  margin: 10px 0 8px;
}

.engine-history-publish:disabled { color: var(--muted); cursor: default; }
/* Inside Settings the rows sit in a section body that is already padded. */
.workspace-settings-section-body .engine-history-row { margin: 0 0 8px; }

/* An editor that will not load, saying why and offering the fix.
 *
 * This replaced a single line of status text that named no cause and suggested
 * a page reload for every one of them — including the one a reload can never
 * fix, where the 3D editor has simply never been connected.
 */
/* `hidden` must win. A class rule's `display: grid` outranks the UA's
 * `[hidden] { display: none }`, and an invisible full-canvas overlay still
 * receives every pointer event — which is exactly what happened: with no
 * problem to show, this panel silently swallowed every click on the editor. */
.engine-canvas-problem[hidden] {
  display: none;
}

.engine-canvas-problem {
  align-content: center;
  display: grid;
  gap: 10px;
  inset: 0;
  justify-items: center;
  padding: 24px;
  position: absolute;
  text-align: center;
}

.engine-canvas-problem-title { color: var(--text); font-size: 15px; margin: 0; }

.engine-canvas-problem-detail {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  margin: 0;
  max-width: 44ch;
}

.engine-canvas-problem-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }

.engine-canvas-problem-action,
.engine-canvas-problem-reload {
  background: transparent;
  border: 1px solid var(--hair-2);
  border-radius: 4px;
  color: var(--text);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 7px 12px;
}

/* The primary action reads as the primary one without a brand colour: the
 * secondary recedes instead of the primary shouting. */
.engine-canvas-problem-reload { border-color: var(--hair); color: var(--muted); }