/* Markdown Studio — a toolbar bar (view, stats, style, customize, copy,
   export, sample, clear) over the editor and preview panes side by side as
   two cards (layout from styles/components/form.css); the Customize sheet is
   a dense form. Document typography lives in themes.js (injected as a <style>
   tag and reused verbatim by the PNG/PDF/HTML exporters); this file only
   styles the page's own chrome: the editor's fill (the pane itself is
   styles/components/editor.css), the page canvas, the export menu and the
   save row. */

/* Panes: equal height side by side; the view segment hides one. */
.mp-panes {
  align-items: stretch;
  min-height: 70vh;
}
.mp-panes[data-view="editor"]  .mp-pane--canvas { display: none; }
.mp-panes[data-view="preview"] .mp-pane--editor { display: none; }

/* The card and its one flush row fill the pane, so the editor does too. */
.mp-pane { flex: 1 1 auto; }
.mp-pane__fill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex: 1 1 auto;
}

textarea.mp-input {
  min-height: 0;
  flex: 1;
  resize: none;
}

/* Preview pane — a neutral desk surface with the themed page sheet on it.
   The sheet takes the theme's own background, so dark themes read as dark
   paper even in light app mode (and vice versa): what you see is exactly
   what the PNG / PDF exporters produce. */
.mp-canvas {
  flex: 1 1 auto;
  overflow-y: auto;
  background: var(--bg-fill-2);
  padding: var(--space-6) var(--space-5) var(--space-8);
  max-height: 86vh;
}

.mp-page {
  /* --d-width / --d-pad / --d-bg come from the injected theme stylesheet,
     which scopes its token block to `.doc, .mp-page`. */
  width: calc(var(--d-width, 720px) + var(--d-pad, 56px) * 2);
  max-width: 100%;
  margin: 0 auto;
  background: var(--d-bg, #fff);
  border-radius: 4px;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.07),
    0 1px 3px rgba(0, 0, 0, 0.10),
    0 12px 36px -12px rgba(0, 0, 0, 0.22);
}

/* Empty preview — the shared empty state on the page sheet, in place of
   the (empty) document. */
.doc:empty { display: none; }
.mp-empty {
  justify-content: center;
  min-height: 280px;
}

/* ── Export menu ─────────────────────────────────────────────────────────── */

.mp-export-wrap { position: relative; }

.mp-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  width: 210px;
  max-width: calc(100vw - 24px);
  padding: 5px;
  background: var(--bg-elev);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-3, 0 10px 38px -10px rgba(0, 0, 0, 0.3));
}

.mp-menu[hidden] { display: none; }

.mp-menu__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  padding: 7px 10px;
  border: 0;
  background: transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 13px;
  color: var(--text);
  cursor: pointer;
  text-align: left;
}

.mp-menu__item:hover,
.mp-menu__item:focus-visible {
  background: var(--accent);
  color: #fff;
}
.mp-menu__item:hover .mp-menu__hint,
.mp-menu__item:focus-visible .mp-menu__hint {
  color: rgba(255, 255, 255, 0.75);
}

.mp-menu__name { font-weight: 500; }

.mp-menu__hint {
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Busy state while an export renders (PNG rasterization, image inlining). */
.mp-export-wrap.is-busy .btn { opacity: 0.6; pointer-events: none; }

/* ── Customize sheet extras ──────────────────────────────────────────────── */

/* Action tray — Delete (destructive) sits at the leading edge; the
   Reset / Save pair is pushed to the trailing edge so the tray stays
   balanced whether or not Delete is shown. */
.mp-actions__end {
  display: inline-flex;
  gap: var(--space-2);
  margin-left: auto;
}

/* When the inline name field is revealed it takes over the whole tray in
   place of the buttons, keeping a single stable action row rather than
   stacking a second strip underneath. */
.mp-save-row {
  display: flex;
  gap: var(--space-2);
  width: 100%;
}
.mp-actions:has(> .mp-save-row:not(.hidden)) > .btn,
.mp-actions:has(> .mp-save-row:not(.hidden)) > .mp-actions__end {
  display: none;
}

.mp-save-row input { flex: 1; min-width: 0; }

@media (max-width: 760px) {
  .mp-panes { min-height: 0; }
  textarea.mp-input { min-height: 40vh; }
  .mp-canvas { max-height: none; padding: var(--space-4) var(--space-2) var(--space-6); }

  /* The action group becomes a tidy two-column grid so the buttons form
     aligned pairs instead of a ragged free-wrap. The Style field and the
     lone Clear button each span the full width; the in-group separators —
     whose grouping cue is lost once the row wraps — are hidden. */
  .mp-tools {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2);
    align-items: stretch;
    flex-basis: 100%;
  }
  .mp-tools .mp-field { grid-column: 1 / -1; }
  .mp-tools .mp-field .dropdown { flex: 1 1 auto; }
  .mp-tools > [aria-hidden="true"] { display: none; }
  .mp-tools .mp-export-wrap { display: flex; }
  .mp-tools .mp-export-wrap > .btn { flex: 1 1 auto; }
  .mp-tools #mp-clear { grid-column: 1 / -1; }
}