/* Playground editor chrome. Built with Marvelous UI tokens + components. */
@layer mv.reset, mv.tokens, mv.base, mv.components, mv.utilities, pg;

@layer pg {
  [hidden] { display: none !important; }
  .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html, body { height: 100%; }
  .pg {
    margin: 0; display: grid; grid-template: "top top top" auto "lib stage side" 1fr / 15.5rem minmax(0, 1fr) 17rem;
    background: var(--mv-bg-subtle); color: var(--mv-fg); font: 400 .875rem/1.5 var(--mv-font-sans); overflow: hidden;
  }
  .pg.is-preview { grid-template-areas: "top top top" "stage stage stage"; }
  .pg.is-preview .pg-lib, .pg.is-preview .pg-side { display: none; }

  /* Top bar */
  .pg-top { grid-area: top; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; padding: .5rem .75rem; border-bottom: 1px solid var(--mv-border); background: var(--mv-bg); }
  .pg-brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; text-decoration: none; color: inherit; margin-right: .25rem; }
  .pg-brand svg { width: 1.6rem; height: 1.6rem; }
  .pg-select { height: 2rem; padding: 0 .6rem; border: 1px solid var(--mv-input); border-radius: var(--mv-radius-md); background: var(--mv-bg); color: inherit; font: inherit; }
  .pg-group { display: inline-flex; align-items: center; gap: .15rem; padding-left: .6rem; border-left: 1px solid var(--mv-border); }
  .pg-group .mv-button[aria-pressed="true"] { background: var(--mv-accent-subtle); color: var(--mv-accent-fg); }
  .pg-group .mv-button svg { width: 1rem; height: 1rem; }
  .pg-theme { gap: .75rem; }
  .pg-mini { display: inline-flex; align-items: center; gap: .45rem; font-size: .75rem; color: var(--mv-fg-muted); }
  .pg-mini .mv-slider { width: 5.5rem; }
  .pg-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
  @media (max-width: 1180px) { .pg-theme .pg-mini:nth-child(2) { display: none; } }

  /* Library */
  .pg-lib { grid-area: lib; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--mv-border); background: var(--mv-bg); }
  .pg-search { margin: .75rem; width: auto; }
  .pg-lib-list { flex: 1; overflow-y: auto; padding: 0 .75rem .75rem; }
  .pg-lib-group { margin: .9rem 0 .4rem; font: 600 .6875rem/1 var(--mv-font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--mv-fg-subtle); }
  .pg-lib-item { all: unset; box-sizing: border-box; display: grid; gap: .1rem; width: 100%; margin-bottom: .35rem; padding: .55rem .7rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-md); background: var(--mv-surface); cursor: grab; transition: border-color .15s, background-color .15s, translate .15s; }
  .pg-lib-item:hover { border-color: var(--mv-accent); background: var(--mv-accent-subtle); translate: 2px 0; }
  .pg-lib-item:focus-visible { outline: 2px solid var(--mv-ring); }
  .pg-lib-item b { font-weight: 600; font-size: .8125rem; }
  .pg-lib-item small { font-size: .72rem; color: var(--mv-fg-muted); }
  .pg-tip { margin: .5rem .75rem .75rem; font-size: .75rem; color: var(--mv-fg-subtle); }

  /* Stage */
  .pg-stage { grid-area: stage; display: grid; justify-items: center; min-height: 0; padding: .9rem; overflow: auto; }
  .pg-frame { width: 100%; height: 100%; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); overflow: hidden; background: var(--mv-bg); box-shadow: var(--mv-shadow-lg); transition: width .35s var(--mv-ease-out); }
  .pg-frame iframe { display: block; width: 100%; height: 100%; border: 0; }

  /* Side panel */
  .pg-side { grid-area: side; min-height: 0; overflow-y: auto; border-left: 1px solid var(--mv-border); background: var(--mv-bg); }
  .pg-panel { padding: .9rem .9rem 1rem; border-bottom: 1px solid var(--mv-border); }
  .pg-h { display: flex; align-items: center; justify-content: space-between; margin: 0 0 .6rem; font-size: .8125rem; font-weight: 700; }
  .pg-count { padding: .05rem .45rem; border-radius: 1em; background: var(--mv-bg-muted); font-size: .7rem; color: var(--mv-fg-muted); }
  .pg-layers { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; }
  .pg-layers li { display: flex; align-items: center; gap: .35rem; padding: .1rem .35rem; border: 1px solid transparent; border-radius: var(--mv-radius-sm); }
  .pg-layers li:hover { background: var(--mv-bg-muted); }
  .pg-layers li.is-selected { border-color: var(--mv-accent); background: var(--mv-accent-subtle); }
  .pg-layers li.is-dragging { opacity: .4; }
  .pg-layers li.drop-before { box-shadow: inset 0 2px 0 var(--mv-accent); }
  .pg-layers li.drop-after { box-shadow: inset 0 -2px 0 var(--mv-accent); }
  .pg-layers button { all: unset; flex: 1; padding: .3rem 0; cursor: pointer; font-size: .8125rem; }
  .pg-grip { cursor: grab; color: var(--mv-fg-subtle); }
  .pg-empty { margin: 0; font-size: .8125rem; color: var(--mv-fg-muted); }
  .pg-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
  .pg-panel .pg-tip { margin: .75rem 0; }
  .pg-fields { display: grid; gap: .6rem; }
  .pg-f { display: grid; gap: .25rem; }
  .pg-f span { font: 500 .6875rem var(--mv-font-mono); color: var(--mv-fg-subtle); }
  .pg-f .mv-input, .pg-f .mv-textarea { width: 100%; font-size: .8125rem; }

  /* Export dialog */
  .pg-code { position: relative; margin-top: 1rem; border: 1px solid var(--mv-border); border-radius: var(--mv-radius-lg); background: var(--mv-bg-subtle); overflow: hidden; }
  .pg-code-head { display: flex; align-items: center; justify-content: space-between; min-height: 2.4rem; padding: 0 .4rem 0 .9rem; border-bottom: 1px solid var(--mv-border); font: .75rem var(--mv-font-mono); color: var(--mv-fg-muted); }
  .pg-code pre { margin: 0; max-height: 22rem; padding: .9rem 1rem; overflow: auto; font: .75rem/1.6 var(--mv-font-mono); }
  .pg-code.is-locked pre { overflow: hidden; -webkit-mask-image: linear-gradient(#000 25%, transparent 62%); mask-image: linear-gradient(#000 25%, transparent 62%); user-select: none; }
  .pg-lock { position: absolute; inset: auto 0 0; display: grid; place-items: center; padding: 1rem; }
  .pg-lock-card { display: grid; gap: .6rem; width: min(100%, 30rem); padding: 1.1rem 1.2rem; border: 1px solid var(--mv-border-strong); border-radius: var(--mv-radius-xl); background: var(--mv-surface-raised); box-shadow: var(--mv-shadow-xl); text-align: center; }
  .pg-lock-title { margin: 0; font-weight: 700; font-size: .95rem; }
  .pg-lock-sub { margin: 0; font-size: .8125rem; color: var(--mv-fg-muted); }
  .pg-lock-actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: center; }
  .pg-key { display: flex; gap: .4rem; }
  .pg-key .mv-input { flex: 1; font-size: .8125rem; }
  .pg-key-msg { margin: 0; font-size: .8125rem; color: var(--mv-fg-muted); text-wrap: pretty; }
  .pg-key-msg b { color: var(--mv-fg); }
  .pg-fine { margin-right: auto; font-size: .75rem; color: var(--mv-fg-subtle); }

  @media (max-width: 900px) {
    .pg { grid-template: "top" auto "stage" 1fr "lib" 14rem / 1fr; overflow: auto; }
    .pg-side { display: none; }
    .pg-lib { border-right: 0; border-top: 1px solid var(--mv-border); }
  }
}