/* pages/live-editor.css */
/* ---------- Live editor shell (F.1) ---------- */
.le-shell { display: flex; flex-direction: column; height: 100%; }
.le-topbar {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-10) var(--space-16); border-bottom: 1px solid var(--border-subtle);
}
.le-title { color: var(--text-primary); font-weight: 600; }
.le-slug { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-label); }
.le-spacer { flex: 1; }
.le-split { flex: 1; display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-12); padding: var(--space-16) var(--space-16); overflow: hidden; }
.le-left, .le-right {
  background: var(--bg-surface); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-8); overflow: hidden;
  display: flex; flex-direction: column;
}
.le-left { overflow-y: auto; } /* accordion must scroll — was clipped with 3+ sections open */
@media (max-width: 768px) {
  /* Stack the form over the live stream and let the whole split scroll instead
     of squeezing two columns into a phone width. */
  .le-split { grid-template-columns: 1fr; overflow-y: auto; padding: var(--space-10); }
  .le-left, .le-right { overflow: visible; }
  .le-right { min-height: 320px; }
  .le-topbar { flex-wrap: wrap; row-gap: var(--space-6); }
}

/* ---------- Live editor accordion + Section 1 (F.2) ---------- */
.le-acc { display: flex; flex-direction: column; }
.le-acc__head {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-10) var(--space-16); background: var(--bg-elevated);
  border-bottom: 1px solid var(--border-subtle);
  cursor: pointer; user-select: none;
}
.le-acc__head:hover { background: var(--bg-input); }
.le-acc__head.is-open {
  background: var(--bg-input);
  /* padding-left ≈ base var(--space-16) minus the 3px accent border so the title stays put when the border appears */
  border-left: 3px solid var(--accent); padding-left: var(--space-12);
}
.le-acc__chev { color: var(--text-muted); }
.le-acc__title { color: var(--text-primary); font-weight: 600; flex: 1; }
.le-acc__body {
  padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--border-subtle);
  overflow-y: auto; max-height: 60vh;
}
.le-form { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
.le-form label { display: flex; flex-direction: column; gap: var(--space-4); font-size: var(--fs-small); }
.le-form label > span { color: var(--text-tertiary); text-transform: lowercase; }
.le-form__toggle { flex-direction: row; align-items: center; justify-content: space-between; }

/* ---------- Live editor Section 2: Аудитория (F.3) ---------- */
.le-form__full { grid-column: 1 / -1; }
.le-fieldset {
  grid-column: 1 / -1; border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
  padding: var(--space-8) var(--space-12); display: flex; gap: var(--space-16); align-items: center;
}
.le-fieldset legend { color: var(--text-tertiary); font-size: var(--fs-label); padding: 0 var(--space-4); }
/* --block: stack stacked textareas/labels vertically instead of the inline
   checkbox row layout the base .le-fieldset uses. */
.le-fieldset--block { flex-direction: column; align-items: stretch; gap: var(--space-8); }
.le-chk { display: inline-flex; gap: var(--space-6); align-items: center; font-size: var(--fs-secondary); }

/* ---------- Live editor Section 3: Шаги (F.4) ---------- */
.le-steps { display: flex; flex-direction: column; gap: var(--space-8); }
.le-steps__list { display: flex; flex-direction: column; gap: var(--space-4); }
.le-step {
  display: flex; gap: var(--space-8); align-items: center;
  padding: var(--space-8) var(--space-10); background: var(--bg-elevated); border-radius: var(--radius-4);
  border: 1px solid transparent; font-size: var(--fs-small);
}
.le-step:hover { border-color: var(--border-default); }
/* literal 1px vertical padding on these dense chips: no --space-1 token, and 1→4 is a 4× change (not imperceptible) — leave */
.le-step__num { background: var(--bg-canvas); color: var(--text-tertiary); padding: 1px var(--space-6); border-radius: var(--radius-4); font-family: var(--font-mono); font-size: var(--fs-micro); min-width: 22px; text-align: center; }
.le-step__tag { padding: 1px var(--space-6); border-radius: var(--radius-4); font-family: var(--font-mono); font-size: var(--fs-micro); font-weight: 600; }
.le-step-tag--info    { background: var(--info-soft-bg);   color: var(--info); }
.le-step-tag--ok      { background: var(--ok-soft-bg);     color: var(--ok); }
.le-step-tag--warn    { background: var(--warn-soft-bg);   color: var(--warn); }
.le-step-tag--danger  { background: var(--danger-soft-bg); color: var(--danger); }
.le-step-tag--accent  { background: var(--accent-soft-bg); color: var(--accent-soft-text); }
.le-step-tag--brand   { background: rgba(249,115,22,.15);  color: var(--brand-hh); }
.le-step-tag--pink    { background: rgba(236,72,153,.15);  color: #f9a8d4; }
.le-step-tag--muted   { background: var(--bg-canvas);      color: var(--text-muted); }
.le-step__sel { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-label); max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.le-step__arrow { color: var(--text-muted); font-size: var(--fs-micro); }
.le-step__val { color: var(--warn); font-family: var(--font-mono); font-size: var(--fs-label); flex: 1; overflow: hidden; text-overflow: ellipsis; }
.le-step__btns { display: flex; gap: var(--space-4); margin-left: auto; }
.le-step__btn {
  background: transparent; border: 0; color: var(--text-muted); cursor: pointer;
  padding: var(--space-4) var(--space-4); font-size: var(--fs-label); border-radius: var(--radius-4);
}
.le-step__btn:hover { color: var(--text-primary); background: var(--bg-canvas); }
.le-step__btn--danger:hover { color: var(--danger); }
/* Per-step editor form (slide-in) */
.le-step-editor__form { display: grid; gap: var(--space-12); }
.le-fe { display: grid; gap: var(--space-4); min-width: 0; }
.le-fe > span { font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); }
.le-fe textarea.input { resize: vertical; font-family: var(--font-mono); font-size: var(--fs-small); }
.le-fe--check { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-8); }
.le-fe--check > span { color: var(--text-primary); font-weight: var(--fw-normal); }
/* Advanced section — geo aliases + list textareas */
.le-adv-label { display: block; font-size: var(--fs-label); color: var(--text-secondary); font-weight: var(--fw-medium); margin-bottom: var(--space-4); }
.le-alias-list { display: grid; gap: var(--space-6); margin: var(--space-6) 0; }
.le-alias-row { display: grid; grid-template-columns: 1fr auto 1fr auto; gap: var(--space-6); align-items: center; }
.le-alias-arrow { color: var(--text-muted); }
.le-sub-banner { margin: 0 0 var(--space-10); }
/* offer editor — partner-account list (basic section) */
.le-accounts { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-4); }
.le-accounts__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-12); }
.le-accounts__head .caps { margin: 0; }
.le-accounts__head #le-acc-add { flex: 0 0 auto; white-space: nowrap; }
.le-account-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) 92px auto; gap: var(--space-6); align-items: center; }

/* ---------- Live editor Section 5: Подписка / Publish (F.6) ---------- */
.le-sub { display: flex; flex-direction: column; gap: var(--space-8); align-items: flex-start; font-size: var(--fs-secondary); }
.le-sub p { margin: 0; color: var(--text-tertiary); line-height: 1.45; }
/* literal 1px vertical padding: tight inline-code chip, no --space-1 token — leave */
.le-sub code { background: var(--bg-input); padding: 1px var(--space-4); border-radius: var(--radius-4); font-family: var(--font-mono); color: var(--accent-soft-text); }
.le-hint { color: var(--text-muted); font-size: var(--fs-label); line-height: 1.4; }

/* ---------- Live editor right panel: live stream (F.7) ---------- */
.le-right__toolbar { display: flex; gap: var(--space-8); align-items: center; padding: var(--space-8) var(--space-12); background: var(--bg-elevated); border-bottom: 1px solid var(--border-subtle); }
.le-right__canvas { flex: 1; padding: var(--space-12); background: radial-gradient(circle at 50% 50%, var(--bg-elevated), var(--bg-canvas)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; cursor: crosshair; }

/* ---------- Live editor history + JSON drawer (F.8/F.9) ----------
   The old hand-rolled singleton shell (backdrop, root container, head/title/
   close-button — "le-history-overlay"/"le-history" + its __head/__title/
   __close children) is gone (Phase 5) — the shared overlay.js core now
   supplies the backdrop, surface, title, and the ≥44px .overlay__close close
   button (see js/pages/live-editor.js's ensureHistoryOverlay(), which adds
   the `.overlay--le-history` class for the wide/scrolling sizing this dialog
   needs — rules in overlay.css). Only the content sub-classes below remain,
   unscoped so they still work inside the core's `.overlay__body`. */
.le-history__body {
  flex: 1; overflow: auto;
}
/* Table STRUCTURE (width/border-collapse/th·td padding) now comes from the
   shared .data-table (BB3 Ph2 T1) — only the row-state survivor and the
   content sub-classes below remain here. store-detail.js's version rows also
   carry .data-table (+ .data-table--versions, BB3 Ph2 T3) and .is-current, so
   this un-scoped rule reaches them too — but store.css's
   .data-table--versions tr.is-current has the same specificity and loads
   LATER, so it wins there with the accent highlight instead; see store.css. */
.data-table tr.is-current { background: var(--bg-elevated); }
.le-history__when { color: var(--text-muted); font-family: var(--font-mono); font-size: var(--fs-small); white-space: nowrap; }
.le-history__keys { color: var(--text-tertiary); font-family: var(--font-mono); font-size: var(--fs-label); }

/* JSON viewer (F.9) — reuses the le-history dialog's overlay.js core shell */
.le-history__jsonbar { display: flex; gap: var(--space-10); align-items: center; padding-bottom: var(--space-10); }
.le-history__hint { color: var(--text-muted); font-size: var(--fs-label); }
.le-history__json {
  margin: 0; padding: var(--space-12) var(--space-16);
  background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-6);
  color: var(--text-primary); font-family: var(--font-mono); font-size: var(--fs-small);
  line-height: 1.45; white-space: pre; overflow: auto;
  max-height: 65vh;
}

/* ---------- Publish modal (G.6) ----------
   The old hand-rolled shell (backdrop, root container, header/h3/code,
   footer actions — "le-publish-overlay"/"le-publish" + its header* and
   __actions children) is gone (Phase 5) — the shared overlay.js core
   (openModal → openOverlay variant:"modal") now supplies the backdrop,
   surface, title ("Опубликовать <slug> в магазин"), footer
   (Опубликовать/Отмена), and the ≥44px .overlay__close close button. This
   same `.le-publish__body` rule is also reused by the migrated 5th dialog
   (settings/test-profiles.js's edit modal). */
.le-publish__body {
  display: flex; flex-direction: column; gap: var(--space-12);
}