/* SMAU FILE
 * Path: css/smau-studio2-logic.css
 * Owns: Creator Studio 2.0 — Logic workspace visuals ONLY (stat cards, flag
 *       cards + inline rename, condition readouts, branch map, the
 *       plain-language Sequence editor's WHEN/CHECK/THEN step cards and the
 *       condition editor's rows + live "Example result" card). Generic
 *       Studio 2.0 primitives (.s2-screen, .s2-card, .s2-row, .s2-btn,
 *       .s2-empty, .s2-flag-row, …) are owned by css/smau-studio2.css; every
 *       rule here is scoped to an lg2- prefixed class so the two files never
 *       fight over the same name.
 * Depends: css/smau-studio2.css tokens on #studio-root — --s2-accent,
 *          --s2-warn, --s2-danger, --s2-ink, --s2-muted, --s2-card,
 *          --s2-card-border, --s2-radius. Falls back to sane defaults if a
 *          token is ever missing so this file never renders blank.
 */

#studio-root {
  --lg2-accent: var(--s2-accent, #8b7cf8);
  --lg2-ok: var(--s2-ok, #3ecf8e);
  --lg2-warn: var(--s2-warn, #ffb454);
  --lg2-danger: var(--s2-danger, #ff5c5c);
  --lg2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --lg2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --lg2-card: var(--s2-card, rgba(255, 255, 255, 0.035));
  --lg2-card-border: var(--s2-card-border, rgba(255, 255, 255, 0.09));
  --lg2-radius: var(--s2-radius, 16px);
  --lg2-chip: rgba(255, 255, 255, 0.05);
  --lg2-chip-border: rgba(255, 255, 255, 0.1);
  --lg2-code: rgba(255, 255, 255, 0.08);
  /* The CHECK step's hue — fixed across themes, like --lg2-accent. */
  --lg2-check: #4d9fff;
}

@media (prefers-color-scheme: light) {
  #studio-root {
    --lg2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
    --lg2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
    --lg2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
    --lg2-card-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
    --lg2-chip: rgba(20, 20, 30, 0.05);
    --lg2-chip-border: rgba(20, 20, 30, 0.12);
    --lg2-code: rgba(20, 20, 30, 0.07);
  }
}

/* Explicit theme toggle wins over the OS media query in both directions. */
:root[data-theme="dark"] #studio-root {
  --lg2-ink: var(--s2-ink, rgba(238, 240, 248, 0.94));
  --lg2-muted: var(--s2-muted, rgba(238, 240, 248, 0.55));
  --lg2-card: var(--s2-card, rgba(255, 255, 255, 0.035));
  --lg2-card-border: var(--s2-card-border, rgba(255, 255, 255, 0.09));
  --lg2-chip: rgba(255, 255, 255, 0.05);
  --lg2-chip-border: rgba(255, 255, 255, 0.1);
  --lg2-code: rgba(255, 255, 255, 0.08);
}

:root[data-theme="light"] #studio-root {
  --lg2-ink: var(--s2-ink, rgba(20, 20, 30, 0.92));
  --lg2-muted: var(--s2-muted, rgba(20, 20, 30, 0.55));
  --lg2-card: var(--s2-card, rgba(20, 20, 30, 0.035));
  --lg2-card-border: var(--s2-card-border, rgba(20, 20, 30, 0.12));
  --lg2-chip: rgba(20, 20, 30, 0.05);
  --lg2-chip-border: rgba(20, 20, 30, 0.12);
  --lg2-code: rgba(20, 20, 30, 0.07);
}

/* ── Logic home: stat cards ─────────────────────────────────────── */

.lg2-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
  margin: 4px 0 16px;
}

.lg2-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px 11px;
  min-width: 0;
}

.lg2-stat-n {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--lg2-ink);
  font-variant-numeric: tabular-nums;
}

.lg2-stat-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--lg2-ink);
}

.lg2-stat-sub {
  font-size: 11px;
  color: var(--lg2-muted);
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Shared: clickable beat header, reference chips, warn chips ─── */

.lg2-beat {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 2px 0 8px;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.lg2-beat:focus-visible {
  outline: 2px solid var(--lg2-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.lg2-beat-icon {
  font-size: 18px;
  flex: 0 0 auto;
}

.lg2-beat-body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.lg2-beat-preview {
  font-size: 13px;
  font-weight: 600;
  color: var(--lg2-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg2-beat-loc {
  font-size: 11px;
  color: var(--lg2-muted);
}

.lg2-refs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.lg2-refs-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lg2-muted);
  flex: 0 0 100%;
}

.lg2-ref {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--lg2-chip-border);
  background: var(--lg2-chip);
  color: var(--lg2-ink);
  font: inherit;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  min-height: 32px;
}

.lg2-ref:hover {
  border-color: var(--lg2-accent);
}

.lg2-ref:focus-visible {
  outline: 2px solid var(--lg2-accent);
  outline-offset: 2px;
}

.lg2-ref code,
.lg2-flag-values code,
.lg2-choice-effect code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11px;
  background: var(--lg2-code);
  border-radius: 5px;
  padding: 1px 5px;
}

.lg2-warn {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--lg2-warn);
  background: color-mix(in srgb, var(--lg2-warn) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg2-warn) 35%, transparent);
}

.lg2-warn--soft {
  color: var(--lg2-muted);
  background: var(--lg2-chip);
  border-color: var(--lg2-chip-border);
}

.lg2-note {
  margin: 4px 0 12px;
  padding: 10px 14px;
  border-radius: var(--lg2-radius);
  border: 1px solid color-mix(in srgb, var(--lg2-ok) 35%, transparent);
  background: color-mix(in srgb, var(--lg2-ok) 12%, transparent);
  color: var(--lg2-ink);
  font-size: 13px;
}

/* ── Flags & State ──────────────────────────────────────────────── */

.lg2-flag {
  padding: 13px 14px;
  margin-bottom: 10px;
}

.lg2-flag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.lg2-flag-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 700;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-flag-meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--lg2-muted);
}

.lg2-flag-values {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 4px;
}

.lg2-flag-warns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.lg2-rename {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1 1 100%;
}

.lg2-rename-input {
  flex: 1 1 140px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.lg2-rename-error {
  flex: 1 1 100%;
  margin-top: 6px;
  font-size: 12px;
  color: var(--lg2-danger);
}

/* ── Condition Inspector ────────────────────────────────────────── */

.lg2-cond {
  padding: 13px 14px;
  margin-bottom: 10px;
}

.lg2-cond-rows {
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-top: 1px solid var(--lg2-card-border);
  padding-top: 10px;
}

.lg2-cond-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.lg2-cond-clause {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-cond-sentence {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--lg2-chip);
  border: 1px solid var(--lg2-chip-border);
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--lg2-muted);
}

/* ── Branch Map ─────────────────────────────────────────────────── */

.lg2-branch {
  padding: 13px 14px;
  margin-bottom: 10px;
}

.lg2-choice {
  position: relative;
  margin-top: 8px;
  padding: 10px 12px 10px 16px;
  border-left: 2px solid var(--lg2-accent);
  border-radius: 4px 12px 12px 4px;
  background: var(--lg2-chip);
}

.lg2-choice--implicit {
  border-left-color: var(--lg2-warn);
}

.lg2-choice--implicit .lg2-choice-label {
  font-style: italic;
}

.lg2-choice-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-choice-effect {
  margin-top: 3px;
  font-size: 12px;
  color: var(--lg2-muted);
}

.lg2-choice-effect--none {
  font-style: italic;
}

.lg2-choice-leads {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 8px;
}

.lg2-lead {
  border-radius: 10px;
  white-space: normal;
}

.lg2-lead em {
  color: var(--lg2-muted);
  font-size: 11px;
}

/* ── Sequences: plain-language WHEN / CHECK / THEN (blueprint 10) ── */

.lg2-seq-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.lg2-seq-sentence {
  flex: 1 1 200px;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-live {
  flex: 0 0 auto;
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.lg2-live--true {
  color: var(--lg2-ok);
  background: color-mix(in srgb, var(--lg2-ok) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg2-ok) 40%, transparent);
}

.lg2-live--false {
  color: var(--lg2-danger);
  background: color-mix(in srgb, var(--lg2-danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--lg2-danger) 38%, transparent);
}

.lg2-step--when { border-color: color-mix(in srgb, var(--lg2-ok) 45%, transparent); }
.lg2-step--check { border-color: color-mix(in srgb, var(--lg2-check) 45%, transparent); }
.lg2-step--then { border-color: color-mix(in srgb, var(--lg2-accent) 50%, transparent); }

.lg2-step-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.lg2-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.lg2-step-num--when { background: var(--lg2-ok); }
.lg2-step-num--check { background: var(--lg2-check); }
.lg2-step-num--then { background: var(--lg2-accent); }

.lg2-step-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  border: 1px solid var(--lg2-chip-border);
  color: var(--lg2-ink);
}

.lg2-step-tag--when { border-color: color-mix(in srgb, var(--lg2-ok) 50%, transparent); color: var(--lg2-ok); }
.lg2-step-tag--check { border-color: color-mix(in srgb, var(--lg2-check) 50%, transparent); color: var(--lg2-check); }
.lg2-step-tag--then { border-color: color-mix(in srgb, var(--lg2-accent) 55%, transparent); color: var(--lg2-accent); }

.lg2-step-main {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: 0;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-height: 44px;
}

.lg2-step-main:focus-visible {
  outline: 2px solid var(--lg2-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.lg2-step-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.lg2-step-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-step-sub {
  font-size: 12px;
  color: var(--lg2-muted);
}

.lg2-step-cap {
  margin: 2px 0 8px;
  font-size: 12px;
  color: var(--lg2-muted);
  line-height: 1.45;
}

.lg2-step-rows {
  display: flex;
  flex-direction: column;
}

.lg2-step-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-height: 44px;
  padding: 8px 0;
  background: none;
  border: 0;
  border-top: 1px solid var(--lg2-card-border);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.lg2-step-row:focus-visible {
  outline: 2px solid var(--lg2-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.lg2-step-row-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-when-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--lg2-card-border);
}

.lg2-when-input {
  flex: 0 1 110px;
  width: 110px;
}

.lg2-when-unit {
  font-size: 12px;
  color: var(--lg2-muted);
}

/* ── Condition editor (blueprint 11) ────────────────────────────── */

.lg2-ce-mode {
  margin-top: 2px;
  max-width: 340px;
}

.lg2-ce-caption {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg2-muted);
  margin-top: 4px;
}

.lg2-ce-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 12px;
}

.lg2-ce-flag {
  flex: 1 1 160px;
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.lg2-ce-op { flex: 0 1 130px; min-width: 110px; }

.lg2-ce-value { flex: 1 1 110px; min-width: 90px; }

.lg2-ce-del { flex: 0 0 40px; }

.lg2-ce-then {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  border-color: color-mix(in srgb, var(--lg2-accent) 50%, transparent);
}

.lg2-ce-then:focus-visible {
  outline: 2px solid var(--lg2-accent);
  outline-offset: 2px;
}

.lg2-result { border-width: 1px; }

.lg2-result--true {
  border-color: color-mix(in srgb, var(--lg2-ok) 45%, transparent);
  background: color-mix(in srgb, var(--lg2-ok) 8%, transparent);
}

.lg2-result--false {
  border-color: color-mix(in srgb, var(--lg2-danger) 40%, transparent);
  background: color-mix(in srgb, var(--lg2-danger) 7%, transparent);
}

.lg2-result-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lg2-muted);
}

.lg2-result-label--sub { margin-top: 12px; }

.lg2-result-verdict {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lg2-ink);
  overflow-wrap: anywhere;
}

.lg2-result--true .lg2-result-verdict { color: var(--lg2-ok); }
.lg2-result--false .lg2-result-verdict { color: var(--lg2-danger); }

.lg2-testvals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}

.lg2-testval {
  display: flex;
  align-items: center;
  gap: 8px;
}

.lg2-testval code {
  flex: 0 1 auto;
  max-width: 45%;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: var(--lg2-code);
  border-radius: 5px;
  padding: 2px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lg2-testval-input {
  flex: 1 1 90px;
  min-width: 0;
}