/* ============================================================
   v1 → v2 compatibility layer  (builder surface only)

   The builder's own CSS (builder.css / canvas.css / tweaks.css /
   cloud.css) is written against the v1 --app-* / --st-* chrome
   tokens and the v1 serif display font. Rather than rewrite all of
   it, this sheet REMAPS those v1 colour + font tokens to the v2
   "Floodlit" palette. Structural tokens (--sp-*, --fs-*, --tap-*,
   --lh-*) keep their v1 values from app-tokens.css.

   Load LAST, after app-tokens.css and builder.css.
   ============================================================ */

:root[data-chrome="dark"] {
  /* surfaces */
  --app-bg:            #07080B;
  --app-panel:         #0A0C11;
  --app-panel-2:       #0E1016;
  --app-panel-3:       #0B0D12;

  /* lines */
  --app-border:        rgba(255,255,255,.07);
  --app-border-strong: rgba(255,255,255,.16);
  --app-hairline:      1px solid rgba(255,255,255,.07);

  /* ink */
  --app-ink:           #E8EAF0;
  --app-ink-dim:       rgba(232,234,240,.6);
  --app-ink-inverse:   #07080B;

  /* brand + status */
  --app-accent:        #3EE68B;
  --app-accent-hover:  #7CF5B5;
  --app-live:          #F2545B;   /* live layer stays red */
  --st-good:           #3EE68B;
  --st-good-bg:        rgba(62,230,139,.10);
  --st-warn:           #F5C24E;
  --st-warn-bg:        rgba(245,194,78,.10);
  --st-bad:            #F2545B;
  --st-bad-bg:         rgba(242,84,91,.10);

  /* radii + elevation → v2 */
  --app-radius:        11px;
  --app-radius-sm:     8px;
  --app-radius-lg:     16px;
  --app-shadow:        0 30px 60px -20px rgba(0,0,0,.9);
  --app-shadow-1:      0 10px 26px -10px rgba(0,0,0,.6);
  --app-shadow-2:      0 30px 70px -20px rgba(0,0,0,.9);
  --app-shadow-3:      0 40px 90px -30px rgba(0,0,0,.9);

  /* type — v2 has no serif; everything is Instrument Sans / JetBrains Mono */
  --font-ui:      'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-display: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, monospace;

  /* focus ring → accent */
  --focus-ring:   2px solid #3EE68B;
}

/* ---------- builder: three-phase accordion navigator ---------- */
.sidebar .phase-block + .phase-block { margin-top: 4px; }
.sidebar .phase-head {
  display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin: 0 8px;
  border-radius: 11px; cursor: pointer; color: rgba(232,234,240,.72); border: 1px solid transparent;
  transition: background 140ms ease, color 140ms ease;
}
.sidebar .phase-head:hover { background: rgba(255,255,255,.04); color: #E8EAF0; }
.sidebar .phase-head.active {
  background: linear-gradient(150deg, rgba(62,230,139,.16), rgba(99,102,241,.16));
  border-color: rgba(255,255,255,.16); color: #fff;
}
.sidebar .phase-num {
  width: 22px; height: 22px; border-radius: 7px; flex: none; display: flex; align-items: center; justify-content: center;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; background: rgba(255,255,255,.06); color: rgba(232,234,240,.55);
}
.sidebar .phase-head.active .phase-num { background: #3EE68B; color: #07080B; }
.sidebar .phase-head.done:not(.active) .phase-num { background: rgba(62,230,139,.16); color: #3EE68B; }
.sidebar .phase-label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; letter-spacing: -.01em; display: flex; flex-direction: column; gap: 2px; }
.sidebar .phase-hint { font-size: 10.5px; font-weight: 400; color: rgba(232,234,240,.45); letter-spacing: 0; }
.sidebar .phase-head.active .phase-hint { color: rgba(232,234,240,.6); }
.sidebar .phase-chev { color: rgba(232,234,240,.38); font-size: 11px; flex: none; }
.sidebar .phase-steps { padding: 4px 0 8px 10px; }