/**
 * Slot styling — the poster and the states around it.
 *
 * The poster is load-bearing, not decoration: an unbooted Mason editor lays out about two pixels
 * tall, so without something occupying the space there is nothing for a visitor to click and the
 * brick reads as a rendering bug. It also reserves the height, so the page does not jump when the
 * real editor arrives.
 */

.mason-demo-slot {
    position: relative;
    display: block;
    min-height: 520px;
}

.mason-demo-slot.is-live {
    min-height: 0;
}

.mason-demo__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    border: 1px dashed #c3ccd9;
    border-radius: 8px;
    background: #f7f9fc;
    color: #3c4757;
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.mason-demo__poster:hover {
    background: #eef3fa;
    border-color: #9fb2cc;
}

.mason-demo__poster-title {
    font-size: 17px;
    font-weight: 600;
}

.mason-demo__poster-hint {
    max-width: 36em;
    font-size: 14px;
    color: #6b7789;
}

/* Failure has to say something. A silent empty box looks like a broken page. */
.mason-demo-slot.is-loading::after,
.mason-demo-slot.is-error::after,
.mason-demo-slot.is-empty::after {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #6b7789;
}

.mason-demo-slot.is-loading::after { content: "Loading the editor…"; }
.mason-demo-slot.is-error::after   { content: "The demo could not be loaded."; }
.mason-demo-slot.is-empty::after   { content: "No demo-ready bricks are available."; }

/* ---------------------------------------------------------------------------
   Tabs

   Deliberately shaped like the PageCraft embed's chrome so the two demos read as
   siblings, but styled here rather than by loading that product's stylesheet —
   this add-on has to work on any site, and /playground/embed.css exists on one.

   Only the panel carrying data-active is shown. Panels are not unmounted: the
   editor keeps its document and scroll position while you look at the JSON, and
   tearing the Vue app down per tab switch would lose both.
   --------------------------------------------------------------------------- */
.mason-demo__tabs {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 20px;
}

.mason-demo__tab {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: currentColor;
  opacity: 0.55;
  cursor: pointer;
  transition: background-color 0.12s, opacity 0.12s, color 0.12s;
}

.mason-demo__tab:hover { opacity: 0.85; }

.mason-demo__tab[aria-selected="true"] {
  background: var(--mason-accent, #5d63f1);
  color: #fff;
  opacity: 1;
}

.mason-demo__panel { display: none; }
.mason-demo__panel[data-active] { display: block; }

/* The document, shown as stored. Scrolls in its own box so a deep brick tree
   cannot push the page sideways. */
/* Fixed height, not max-height: all three panels match the height the author set on
   the field, so switching tabs does not resize the page under the pointer. */
.mason-demo__code {
  margin: 0;
  padding: 16px 18px;
  height: var(--mason-editor-height, 520px);
  box-sizing: border-box;
  overflow: auto;
  border: 1px solid var(--mason-border, #d7dce3);
  border-radius: var(--mason-radius, 6px);
  background: var(--mason-field-bg, #fff);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.55;
  white-space: pre;
  tab-size: 2;
}

/* The preview frame. Sandboxed with no allow-scripts, so animated bricks stay
   still here — see wirePreview() in slot.js for why that trade is deliberate. */
.mason-demo__preview {
  display: block;
  width: 100%;
  height: var(--mason-editor-height, 520px);
  box-sizing: border-box;
  border: 1px solid var(--mason-border, #d7dce3);
  border-radius: var(--mason-radius, 6px);
  background: #fff;
}

.mason-demo__note {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  opacity: 0.6;
  text-align: center;
}