/* QORM Playground — split-pane editor + live device preview.
   This is a normal online page (no service worker). The shell is dark editor
   chrome; the device screen reuses the demo app's design tokens and widget
   CSS verbatim so a rendered app looks here exactly as it does shipped. */

/* ---- playground shell tokens ---- */
:root {
  --pg-bg: #0e0e12;
  --pg-panel: #16161c;
  --pg-panel-2: #1e1e26;
  --pg-border: #2a2a33;
  --pg-text: #e8e8ee;
  --pg-text-2: #94949f;
  --pg-accent: #0a84ff;
  --pg-error: #ff453a;
  --pg-warn: #ff9f0a;
  --pg-ok: #30d158;
  --pg-mono: ui-monospace, 'SF Mono', SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--pg-bg);
  color: var(--pg-text);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* ---- top bar ---- */
.pg-topbar {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 10px 16px;
  background: var(--pg-panel);
  border-bottom: 1px solid var(--pg-border);
}
.pg-topbar h1 {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.pg-hint { color: var(--pg-text-2); font-size: 12px; }
.pg-status {
  margin-left: auto;
  font-family: var(--pg-mono);
  font-size: 12px;
  color: var(--pg-text-2);
  transition: color 0.2s ease;
}
.pg-status.ok { color: var(--pg-ok); }
.pg-status.err { color: var(--pg-error); }

/* ---- split layout ---- */
.pg-split {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(360px, 1.15fr);
}
.pg-pane { min-height: 0; display: flex; flex-direction: column; }
.pg-left { border-right: 1px solid var(--pg-border); background: var(--pg-panel); }
.pg-right { background: var(--pg-bg); }

@media (max-width: 880px) {
  body { overflow: auto; }
  .pg-split { grid-template-columns: 1fr; grid-template-rows: minmax(320px, 1fr) minmax(420px, 1fr); }
  .pg-left { border-right: 0; border-bottom: 1px solid var(--pg-border); }
  .pg-hint { display: none; }
}

/* ---- toolbars ---- */
.pg-toolbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--pg-panel);
  border-bottom: 1px solid var(--pg-border);
}
.pg-right .pg-toolbar { background: var(--pg-bg); }
.pg-toolbar label,
.pg-toolbar-label { color: var(--pg-text-2); font-size: 12px; }
.pg-toolbar select,
.pg-toolbar button {
  background: var(--pg-panel-2);
  color: var(--pg-text);
  border: 1px solid var(--pg-border);
  border-radius: 8px;
  padding: 6px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.pg-toolbar select:hover,
.pg-toolbar button:hover { border-color: #454552; }
.pg-toolbar select:focus-visible,
.pg-toolbar button:focus-visible { outline: 2px solid var(--pg-accent); outline-offset: 1px; }
#run-btn {
  margin-left: auto;
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: #fff;
  font-weight: 600;
  padding: 6px 18px;
}
#run-btn:hover { background: #0b7ae6; }
#run-btn:active { transform: translateY(1px); }
.vp-btn[aria-pressed="true"] {
  background: var(--pg-accent);
  border-color: var(--pg-accent);
  color: #fff;
}

/* ---- editor mount ---- */
.pg-editor { flex: 1; min-height: 0; display: flex; background: var(--pg-panel); }
.pg-editor > * { flex: 1; min-height: 0; }

/* ---- diagnostics strip ---- */
.pg-diagnostics {
  flex: none;
  max-height: 148px;
  overflow: auto;
  padding: 7px 12px;
  background: var(--pg-panel);
  border-top: 1px solid var(--pg-border);
  font-family: var(--pg-mono);
  font-size: 12px;
  line-height: 1.5;
}
.pg-diag-line { padding: 1px 0; white-space: pre-wrap; word-break: break-word; }
.pg-diag-error { color: var(--pg-error); }
.pg-diag-warn { color: var(--pg-warn); }

/* ---- preview area + device frame ---- */
.pg-preview {
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 20px;
  background:
    radial-gradient(circle at 1px 1px, #1d1d24 1px, transparent 1px) 0 0 / 22px 22px,
    var(--pg-bg);
}
.pg-device-wrap { flex: none; position: relative; }
.pg-device {
  position: absolute;
  top: 0;
  left: 0;
  padding: 10px;
  background: #050507;
  border-radius: 46px;
  box-shadow:
    inset 0 0 0 2px #2e2e36,
    0 24px 64px rgba(0, 0, 0, 0.55);
  transform-origin: top left;
  transition: width 0.25s ease, height 0.25s ease;
}
.pg-device-wrap { transition: width 0.25s ease, height 0.25s ease; }
.pg-device::before { /* speaker slit */
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  width: 88px;
  height: 6px;
  margin-left: -44px;
  border-radius: 3px;
  background: #1c1c22;
  z-index: 2;
}

#qorm-stage {
  width: 100%;
  height: 100%;
  border-radius: 36px;
  overflow: hidden;
  display: flex;
  background: var(--bg);
  color: var(--label);
  font-family: var(--font);
}
#qorm-root { flex: 1; display: flex; overflow-y: auto; overflow-x: hidden; }
#qorm-root > * { flex: 1; }

/* ---- boot skeleton (qorm.wasm is ~3.3 MB gzipped) ---- */
.pg-boot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--label2, #8e8e93);
  font-size: 13px;
  text-align: center;
  padding: 24px;
}
.pg-boot-sub { font-size: 11px; opacity: 0.7; }
.pg-spinner {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 3px solid rgba(120, 120, 128, 0.3);
  border-top-color: var(--accent, #0a84ff);
  animation: pg-spin 0.8s linear infinite;
}
@keyframes pg-spin { to { transform: rotate(360deg); } }

/* ==== design tokens (themes) — copied from the demo app so rendered apps
   look identical here. The palettes live in internal/render/theme.go; "auto"
   follows the OS light/dark setting. Scoped to the device screen. ==== */
#qorm-stage, #qorm-stage.qorm-theme-apple, #qorm-stage.qorm-theme-auto {
  --accent:#007aff; --on-accent:#fff; --success:#34c759; --danger:#ff3b30; --warning:#ff9500;
  --bg:#f2f2f7; --surface:#fff; --label:#000; --label2:#3c3c4399; --sep:#3c3c4949;
  --fill:#78788033; --radius:12px; --radius-lg:20px; --stage-radius:38px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Arial,sans-serif;
  color-scheme: light;
}
#qorm-stage.qorm-theme-material {
  --accent:#2e7df6; --on-accent:#fff; --success:#16a34a; --danger:#dc2626; --warning:#f59e0b;
  --bg:#eef0f4; --surface:#fff; --label:#111827; --label2:#6b7280; --sep:#e5e7eb;
  --fill:#e5e7eb; --radius:8px; --radius-lg:12px; --stage-radius:14px;
  --font:'Segoe UI',Roboto,-apple-system,BlinkMacSystemFont,sans-serif;
  color-scheme: light;
}
#qorm-stage.qorm-theme-dark {
  --accent:#0a84ff; --on-accent:#fff; --success:#30d158; --danger:#ff453a; --warning:#ff9f0a;
  --bg:#000; --surface:#1c1c1e; --label:#fff; --label2:#ebebf599; --sep:#54545899;
  --fill:#7676803d; --radius:12px; --radius-lg:20px; --stage-radius:38px;
  --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Arial,sans-serif;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  #qorm-stage.qorm-theme-auto {
    --accent:#0a84ff; --on-accent:#fff; --success:#30d158; --danger:#ff453a; --warning:#ff9f0a;
    --bg:#000; --surface:#1c1c1e; --label:#fff; --label2:#ebebf599; --sep:#54545899;
    --fill:#7676803d; --radius:12px; --radius-lg:20px; --stage-radius:38px;
    --font:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Arial,sans-serif;
    color-scheme: dark;
  }
}

/* ==== widget CSS — copied from the demo so the preview renders the same way.
   App-like reset, scoped to the device screen only (the editor keeps normal
   text selection). ==== */
#qorm-stage * {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#qorm-stage input, #qorm-stage textarea, #qorm-stage [contenteditable="true"], #qorm-stage .qorm-selectable {
  -webkit-user-select: text;
  user-select: text;
}
#qorm-stage input, #qorm-stage button, #qorm-stage select, #qorm-stage textarea {
  font-family: inherit;
  letter-spacing: inherit;
}
#qorm-stage button { cursor: pointer; }
@media (hover:hover) {
  #qorm-stage button:hover { filter: brightness(0.96); }
  #qorm-stage a:hover { opacity: 0.85; }
  #qorm-stage .qorm-tab:hover { color: var(--label); }
  #qorm-stage th:hover .qorm-sort-ind { opacity: .7; }
  #qorm-stage .qorm-tree-sum:hover, #qorm-stage .qorm-tree-leaf:hover { background: var(--fill); }
  #qorm-stage .qorm-acc:hover, #qorm-stage .qorm-menu-panel button:hover, #qorm-stage .qorm-navitem:hover { background: var(--fill); }
  #qorm-stage .qorm-datatable tbody tr:hover { background: var(--fill); }
}

/* iOS press feedback */
.qorm-tap { transition: transform .12s ease, opacity .12s ease; -webkit-tap-highlight-color: transparent; }
.qorm-tap:active { transform: scale(.96); opacity: .7; }

/* drag feedback */
.qorm-draggable { transition: opacity .15s ease; }
.qorm-dragging { opacity: .5; }
.qorm-dragover {
  outline: 2px dashed var(--accent, #0a84ff);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--accent, #0a84ff) 8%, transparent);
}

/* iOS switch */
.qorm-switch { position: relative; width: 51px; height: 31px; flex: none; }
.qorm-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.qorm-switch span { position: absolute; inset: 0; background: var(--fill); border-radius: 16px; transition: background .25s; }
.qorm-switch span::before {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 27px; height: 27px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,.25);
  transition: transform .25s;
}
.qorm-switch input:checked + span { background: var(--success); }
.qorm-switch input:checked + span::before { transform: translateX(20px); }

/* underline tabs */
.qorm-tab {
  border: none; background: none; padding: 12px 16px; min-height: 44px; cursor: pointer;
  font-size: 14px; color: var(--label2); font-weight: 400;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s ease, border-color .15s ease;
}
.qorm-tab:active { opacity: .7; }
.qorm-tab-active { border-bottom-color: var(--accent) !important; color: var(--accent); font-weight: 600; }

/* hairline tables */
.qorm-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.qorm-table th { text-align: left; font-weight: 600; color: var(--label2); font-size: 13px; padding: 10px 12px; border-bottom: 1px solid var(--sep); white-space: nowrap; }
.qorm-table td { padding: 10px 12px; border-bottom: 1px solid var(--sep); color: var(--label); }
.qorm-datatable { border-collapse: collapse; width: 100%; font-size: 14px; }
.qorm-datatable th { text-align: left; font-weight: 600; color: var(--label2); padding: 10px 12px; border-bottom: 1px solid var(--sep); white-space: nowrap; }
.qorm-datatable td { padding: 10px 12px; border-bottom: 1px solid var(--sep); color: var(--label); }
.qorm-datatable tbody tr.qdt-sel { background: var(--fill); }
.qorm-datatable .qdt-check { width: 36px; text-align: center; cursor: pointer; }
.qorm-table button.qdt-sort, .qorm-datatable button.qdt-sort {
  background: none; border: none; font: inherit; font-weight: 600; color: var(--label2);
  cursor: pointer; padding: 0; display: inline-flex; align-items: center; gap: 3px; min-height: 32px;
}
.qorm-sort-ind { opacity: .3; transition: opacity .15s ease, color .15s ease; font-size: 11px; line-height: 1; }
.qorm-sort-ind.on { opacity: 1; color: var(--accent); }

/* tree outline */
.qorm-tree summary.qorm-tree-sum { list-style: none; display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; font-weight: 500; color: var(--label); }
.qorm-tree summary.qorm-tree-sum::-webkit-details-marker { display: none; }
.qorm-tree summary.qorm-tree-sum::before { content: "\203A"; color: var(--label2); font-weight: 700; display: inline-block; transition: transform .15s ease; }
.qorm-tree details[open] > summary.qorm-tree-sum::before { transform: rotate(90deg); }
.qorm-tree-kids { padding-left: 18px; }
.qorm-tree-leaf { padding: 5px 8px 5px 26px; border-radius: 6px; color: var(--label); }

/* iOS slider */
.qorm-slider { -webkit-appearance: none; appearance: none; height: 28px; background: transparent; outline: none; cursor: pointer; }
.qorm-slider::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--pct, 0%), var(--fill) var(--pct, 0%)); }
.qorm-slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.3); cursor: pointer; margin-top: -12px; }
.qorm-slider::-moz-range-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--accent) var(--pct, 0%), var(--fill) var(--pct, 0%)); }
.qorm-slider::-moz-range-thumb { width: 28px; height: 28px; border: none; border-radius: 50%; background: #fff; box-shadow: 0 1px 5px rgba(0,0,0,.3); }

/* dual-thumb range */
.qorm-range-lo, .qorm-range-hi { -webkit-appearance: none; appearance: none; background: transparent; pointer-events: none; }
.qorm-range-lo::-webkit-slider-thumb, .qorm-range-hi::-webkit-slider-thumb {
  -webkit-appearance: none; pointer-events: auto; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3); cursor: pointer; margin-top: -9px;
}
.qorm-range-lo::-moz-range-thumb, .qorm-range-hi::-moz-range-thumb {
  pointer-events: auto; width: 22px; height: 22px; border: none; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}

/* skeleton shimmer + spinners */
@keyframes qorm-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.qorm-skel { background: linear-gradient(90deg, #e9ecef 25%, #f3f5f7 50%, #e9ecef 75%); background-size: 200% 100%; animation: qorm-shimmer 1.3s ease-in-out infinite; }
@keyframes qorm-spin { to { transform: rotate(360deg); } }
.qorm-spin { animation: qorm-spin .8s linear infinite; }
.qorm-activity svg { animation: qorm-ios-spin 1s steps(8) infinite; }
@keyframes qorm-ios-spin { to { transform: rotate(360deg); } }

/* tooltip */
#qorm-stage [data-tooltip] { position: relative; }
#qorm-stage [data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
  background: #111827; color: #fff; padding: 4px 8px; border-radius: 6px;
  font-size: 12px; white-space: nowrap; margin-bottom: 6px; z-index: 100; pointer-events: none;
}

/* motion catalog: a widget's animation prop selects one of these */
@keyframes qa-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes qa-fadeup { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes qa-fadedown { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes qa-slideup { from { transform: translateY(100%); } to { transform: none; } }
@keyframes qa-slidedown { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes qa-slideleft { from { transform: translateX(100%); } to { transform: none; } }
@keyframes qa-slideright { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes qa-scale { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: none; } }
@keyframes qa-zoomout { from { opacity: 0; transform: scale(1.15); } to { opacity: 1; transform: none; } }
@keyframes qa-rotate { from { opacity: 0; transform: rotate(-180deg) scale(.6); } to { opacity: 1; transform: none; } }
@keyframes qa-flip { from { opacity: 0; transform: perspective(600px) rotateY(90deg); } to { opacity: 1; transform: none; } }
@keyframes qa-pop { 0% { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.06); } 100% { opacity: 1; transform: none; } }
@keyframes qa-bounce { 0% { transform: translateY(-120%); } 60% { transform: translateY(8%); } 80% { transform: translateY(-4%); } 100% { transform: none; } }
@keyframes qa-shake { 0%, 100% { transform: none; } 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
@keyframes qa-pulse { 0%, 100% { transform: none; } 50% { transform: scale(1.08); } }
@keyframes qa-spin { to { transform: rotate(360deg); } }
@keyframes qa-size { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } }