/* Stili della shell. Nessuna regola qui deve toccare il documento dentro l'iframe:
   gli stili dell'editor nel canvas vivono solo in <style data-vl-ui>. */

:root {
  --vl-bg: #f6f7f9;
  --vl-surface: #ffffff;
  --vl-border: #dde1e6;
  --vl-text: #1d2330;
  --vl-muted: #5f6b7a;
  --vl-accent: #2f6fed;
  --vl-accent-text: #ffffff;
  --vl-focus: #2f6fed;
  --vl-error: #c62828;
  --vl-radius: 6px;
  --vl-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --vl-bg: #14171c;
    --vl-surface: #1c2027;
    --vl-border: #2e343e;
    --vl-text: #e6e9ee;
    --vl-muted: #9aa4b2;
    --vl-accent: #5b8ef5;
    --vl-focus: #7aa5ff;
    --vl-error: #ff8a80;
    color-scheme: dark;
  }
}

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

html, body { height: 100%; margin: 0; }

body {
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--vl-bg);
  color: var(--vl-text);
  font: 14px/1.4 var(--vl-font);
}

:focus-visible { outline: 2px solid var(--vl-focus); outline-offset: 2px; }

button, input { font: inherit; color: inherit; }

button {
  padding: 6px 12px;
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  background: var(--vl-surface);
  cursor: pointer;
}
/* Label per l'input file, stilizzata come bottone (l'input resta accessibile da tastiera) */
.vl-button {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  background: var(--vl-surface);
  cursor: pointer;
}
.vl-sources:has(#vl-file:focus-visible) .vl-button {
  outline: 2px solid var(--vl-focus); outline-offset: 2px;
}
button[type="submit"] { background: var(--vl-accent); border-color: var(--vl-accent); color: var(--vl-accent-text); }
button:disabled { opacity: .5; cursor: not-allowed; }

input {
  padding: 6px 10px;
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  background: var(--vl-surface);
  min-width: 0;
}

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

.vl-topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
  padding: 8px 16px;
  background: var(--vl-surface);
  border-bottom: 1px solid var(--vl-border);
}
.vl-brand { font-weight: 600; }
.vl-load { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; min-width: 0; }
.vl-load #vl-url { flex: 1 1 220px; }
.vl-load #vl-token { flex: 1 1 120px; max-width: 200px; }
.vl-sources { display: flex; gap: 8px; }
.vl-viewport { display: flex; gap: 4px; }

.vl-layout {
  display: grid;
  grid-template-columns: 260px 1fr 320px;
  min-height: 0;
}

.vl-panel {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--vl-surface);
  border-color: var(--vl-border);
  border-style: solid;
  border-width: 0;
}
.vl-panel--left { border-right-width: 1px; }
.vl-panel--right { border-left-width: 1px; }
.vl-panel__title {
  margin: 0; padding: 10px 12px;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
  color: var(--vl-muted);
  border-bottom: 1px solid var(--vl-border);
}
.vl-panel__body { flex: 1; overflow: auto; padding: 12px; }

.vl-stage { position: relative; overflow: auto; min-width: 0; }
.vl-canvas { height: 100%; }
.vl-frame { display: block; width: 100%; height: 100%; border: 0; background: #fff; }

.vl-empty { color: var(--vl-muted); }
.vl-canvas.vl-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px; text-align: center;
}
.vl-note { font-size: 12px; max-width: 46ch; }

.vl-statusbar {
  display: flex; gap: 16px; justify-content: space-between;
  padding: 4px 16px;
  font-size: 12px; color: var(--vl-muted);
  background: var(--vl-surface);
  border-top: 1px solid var(--vl-border);
}

.vl-source { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
[data-status="error"] #vl-status { color: var(--vl-error); font-weight: 600; }
[data-status="loading"] #vl-load-btn { opacity: .6; }

.vl-dialog {
  width: min(720px, calc(100vw - 32px));
  padding: 16px;
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  background: var(--vl-surface);
  color: var(--vl-text);
}
.vl-dialog::backdrop { background: rgb(0 0 0 / .4); }
.vl-dialog h2 { margin: 0 0 12px; font-size: 16px; }
.vl-dialog textarea {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--vl-border);
  border-radius: var(--vl-radius);
  background: var(--vl-bg);
  color: inherit;
  font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace;
  resize: vertical;
}
.vl-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; }

/* Sotto i 900px l'editor non è usabile davvero, ma la shell non deve rompersi:
   pannelli impilati sotto il canvas. */
@media (max-width: 900px) {
  .vl-layout { grid-template-columns: minmax(0, 1fr); grid-auto-rows: minmax(160px, auto); }
  .vl-stage { order: -1; min-height: 50vh; }
  .vl-panel--left, .vl-panel--right { border-width: 1px 0 0; }
}