@layer phpew-layout, phpew-theme;
@layer phpew-theme {
:root {
  --phpew-bp-tablet: 768px;
  --phpew-bp-desktop: 1024px;
  --phpew-bp-wide: 1920px;
}
/* ==========================================================================
   PHPew default theme — light
   Token-driven; the dark theme is parallel with palette swaps only.
   ========================================================================== */

:root {
  /* Color palette (Tailwind zinc / indigo for the comfortable defaults) */
  --phpew-bg:            #fafaf9;
  --phpew-card-bg:       #ffffff;
  --phpew-surface:       #f4f4f5;
  --phpew-fg:            #18181b;
  --phpew-muted:         #71717a;
  --phpew-subtle:        #a1a1aa;
  --phpew-border:        #e4e4e7;
  --phpew-border-strong: #d4d4d8;
  --phpew-accent:        #4f46e5;
  --phpew-accent-fg:     #ffffff;
  --phpew-accent-hover:  #4338ca;
  /* Secondary accent (amber) — a structural counterpart to the indigo accent
     so "category" and "selected" read as different roles. */
  --phpew-accent-2:      #b45309;
  --phpew-link:          var(--phpew-accent);
  --phpew-error:         #dc2626;
  --phpew-error-hover:   #b91c1c;
  --phpew-error-bg:      #fef2f2;
  --phpew-success:       #16a34a;
  --phpew-success-bg:    #f0fdf4;
  --phpew-warning:       #d97706;
  --phpew-focus-ring:    rgba(79, 70, 229, 0.35);
  --phpew-header-bg:     rgba(255, 255, 255, 0.85);
  --phpew-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.04);
  --phpew-shadow:        0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);

  /* Typography */
  --phpew-font:          ui-sans-serif, -apple-system, "Segoe UI", Inter, Roboto, "Helvetica Neue", sans-serif;
  --phpew-font-mono:     ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, Consolas, monospace;
  --phpew-fs-xs:         0.75rem;
  --phpew-fs-sm:         0.875rem;
  --phpew-fs-base:       1rem;
  --phpew-fs-lg:         1.125rem;
  --phpew-fs-xl:         1.5rem;
  --phpew-fs-2xl:        2rem;
  --phpew-lh-tight:      1.2;
  --phpew-lh-base:       1.55;

  /* Sizing */
  --phpew-radius-sm:     4px;
  --phpew-radius:        8px;
  --phpew-radius-lg:     12px;
  --phpew-gap-sm:        0.5rem;
  --phpew-gap:           1rem;
  --phpew-gap-lg:        1.5rem;
}

/* ----- Reset / baseline -------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
/* Kill the default mobile tap-highlight box. Touch :active feedback comes
 * from per-component CSS (e.g. .phpew-btn:active transform). Keyboard
 * focus rings still apply via :focus-visible. */
html { -webkit-tap-highlight-color: transparent; }
/* Sticky-footer baseline: body is a vertical flex container that's always
 * at least viewport-tall, so short pages still push the footer to the
 * bottom of the screen instead of stranding it mid-viewport. The footer's
 * `margin-top: auto` consumes the leftover space. */
html, body { min-height: 100vh; }
body {
  margin: 0;
  display: flex;
  flex-direction: column;
  background: var(--phpew-bg);
  color: var(--phpew-fg);
  font-family: var(--phpew-font);
  font-size: var(--phpew-fs-base);
  line-height: var(--phpew-lh-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Admin / super-admin chrome takes precedence over any theme-authored body
 * display rule (e.g. `body { display: grid }`). Without this guard, a public
 * page using grid breaks the admin layout because the panes/header/footer
 * collapse into one overlapping grid cell. Higher specificity than plain
 * `body` so it wins by specificity, not !important. Same idea for overflow:
 * a public-page `body { overflow: hidden }` clips long admin forms. */
body.phpew-admin {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
/* The Edit page button is the live-page inline-editor entry — it has no
 * meaning inside an admin pane, where you're already in the editing UI.
 * Hide it on admin pages so it doesn't clutter the corner. */
body.phpew-admin .phpew-inline-enter { display: none; }

h1, h2, h3, h4, h5 {
  margin: 1.5em 0 0.5em;
  line-height: var(--phpew-lh-tight);
  letter-spacing: -0.015em;
  font-weight: 600;
}
h1 { font-size: var(--phpew-fs-2xl); margin-top: 0; letter-spacing: -0.025em; }
h2 { font-size: var(--phpew-fs-xl); }
h3 { font-size: var(--phpew-fs-lg); }

p { margin: 0 0 1em; }
small { font-size: var(--phpew-fs-sm); color: var(--phpew-muted); }

/* Baseline anchor styling. Wrapped in :where() so the rules sit at
   specificity (0,0,0) — any single-class override (custom theme,
   PHPewStyle Advanced CSS, package CSS) wins without needing
   !important or selector chaining. */
:where(a) {
  color: var(--phpew-link);
  text-decoration: none;
  transition: color 120ms ease;
}
:where(a:hover) { text-decoration: underline; }
:where(a:focus-visible) {
  outline: 2px solid var(--phpew-focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

code {
  font-family: var(--phpew-font-mono);
  font-size: 0.9em;
  background: var(--phpew-surface);
  padding: 0.1em 0.35em;
  border-radius: var(--phpew-radius-sm);
  color: var(--phpew-fg);
}
pre {
  font-family: var(--phpew-font-mono);
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  padding: 1rem 1.25rem;
  border-radius: var(--phpew-radius);
  overflow: auto;
  font-size: var(--phpew-fs-sm);
  line-height: 1.5;
}
pre code { background: none; padding: 0; }

hr {
  border: none;
  border-top: 1px solid var(--phpew-border);
  margin: 2rem 0;
}

dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.5rem 1.5rem;
  margin: 1rem 0;
}
dt { color: var(--phpew-muted); font-size: var(--phpew-fs-sm); font-weight: 500; }
dd { margin: 0; }

/* ----- Layout: header / main / footer ------------------------------------ */

.phpew-header {
  /* 3-column grid: brand on the left, page nav centered, user nav on the
   * right. Each track stays in its column regardless of whether siblings
   * render — previously a missing brand let space-between yank the page
   * nav all the way to the left.
   *
   * Full-bleed background with inner max-width: horizontal padding expands
   * to center the content at 1280px on wide viewports so it aligns with
   * any layout that uses .phpew-main--centered or scopes its own
   * comparable max-width. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  column-gap: 1rem;
  align-items: center;
  padding: 0.75rem max(2rem, calc((100% - 1280px) / 2 + 2rem));
  background: var(--phpew-header-bg);
  border-bottom: 1px solid var(--phpew-border);
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
}
.phpew-brand {
  font-weight: 700;
  font-size: var(--phpew-fs-lg);
  color: var(--phpew-fg);
  letter-spacing: -0.02em;
  justify-self: start;
  grid-column: 1;
}
.phpew-brand:hover { text-decoration: none; color: var(--phpew-fg); }

/* Image-mode brand — logo image instead of site name text. */
.phpew-brand--image {
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.phpew-brand--image img {
  display: block;
  height: var(--phpew-brand-img-h, 36px);
  max-height: var(--phpew-brand-img-h, 36px);
  width: auto;
  max-width: 240px;
  object-fit: contain;
}

/* Themes pane preview: a prominent live iframe of the selected theme
 * (?preview=<slug>) or the current default. Full-width, ~half-viewport
 * tall so the preview is the focus and the theme list sits beneath it. */
.phpew-theme-preview-frame {
  display: block;
  width: 100%;
  height: 55vh;
  min-height: 340px;
  margin: 0 0 1.5rem;
  border: 1px solid var(--phpew-border, #ccc);
  border-radius: var(--phpew-radius, 4px);
  background: var(--phpew-card-bg, #fff);
}

/* Media picker overlay — used by BrandingPane (logo picker) and any
 * future admin pane that needs to select an image from the Media
 * library. Same conventions as .phpew-medialib-overlay but smaller. */
.phpew-media-picker-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.phpew-media-picker-overlay[hidden] { display: none; }
.phpew-media-picker-panel {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius-lg);
  padding: 1rem;
  width: min(100%, 720px);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.phpew-media-picker-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.phpew-media-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 0.5rem;
  overflow: auto;
  min-height: 0;
  flex: 1 1 auto;
}
.phpew-media-picker-tile {
  display: block;
  padding: 0.25rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  cursor: pointer;
  aspect-ratio: 1 / 1;
}
.phpew-media-picker-tile:hover,
.phpew-media-picker-tile:focus-visible {
  border-color: var(--phpew-accent);
  outline: none;
}
.phpew-media-picker-tile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--phpew-radius-sm);
}

.phpew-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  justify-self: end;
  grid-column: 3;
}

/* Admin dropdown — `<details>` + `<summary>`. Closed by default; clicks
   on the summary toggle. JS in this header (below) closes the menu
   when a click lands outside. */
.phpew-admin-menu { position: relative; }
.phpew-admin-menu-trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
.phpew-admin-menu-trigger::-webkit-details-marker { display: none; }
.phpew-admin-menu-list {
  position: absolute;
  right: 0;
  top: calc(100% + 0.25rem);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  min-width: 12rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border-strong);
  border-radius: var(--phpew-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
  z-index: 20;
}
.phpew-admin-menu-list li { margin: 0; }
.phpew-admin-menu-list a {
  display: block;
  padding: 0.4rem 0.875rem;
  color: var(--phpew-fg);
  text-decoration: none;
  font-size: var(--phpew-fs-sm);
}
.phpew-admin-menu-list a:hover { background: var(--phpew-surface); text-decoration: none; }
.phpew-admin-menu-list a.is-active { color: var(--phpew-accent); font-weight: 500; }
.phpew-admin-menu-sep {
  padding: 0.4rem 0.875rem 0.2rem;
  font-size: var(--phpew-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted);
  border-top: 1px solid var(--phpew-border);
  margin-top: 0.25rem;
  cursor: default;
}

/* Admin lifeline — always-on floating dropdown for admins/mods. Fixed
   to the bottom-right corner so a customer can't accidentally lock
   themselves out by overriding the header. Compact icon-only when
   collapsed; opens upward into a menu list. */
.phpew-admin-lifeline {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 2147483646;
  font-family: var(--phpew-font);
}
.phpew-admin-lifeline-trigger {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 999px;
  background: var(--phpew-card-bg);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-border-strong);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
  font-size: var(--phpew-fs-sm);
}
.phpew-admin-lifeline-trigger::-webkit-details-marker { display: none; }
.phpew-admin-lifeline-trigger:hover {
  background: var(--phpew-surface);
}
.phpew-admin-lifeline-list {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.35rem);
  margin: 0;
  padding: 0.35rem 0;
  list-style: none;
  min-width: 13rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border-strong);
  border-radius: var(--phpew-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.phpew-admin-lifeline-list li { margin: 0; }
.phpew-admin-lifeline-list a {
  display: block;
  padding: 0.4rem 0.875rem;
  color: var(--phpew-fg);
  text-decoration: none;
  font-size: var(--phpew-fs-sm);
}
.phpew-admin-lifeline-list a:hover {
  background: var(--phpew-surface);
  text-decoration: none;
}
.phpew-admin-lifeline-sep {
  padding: 0.4rem 0.875rem 0.2rem;
  font-size: var(--phpew-fs-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted);
  border-top: 1px solid var(--phpew-border);
  margin-top: 0.25rem;
  cursor: default;
}
.phpew-admin-lifeline-sep:empty { padding: 0; border-top: 1px solid var(--phpew-border); margin: 0.3rem 0; }
.phpew-nav-link {
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--phpew-radius);
  transition: background 120ms ease, color 120ms ease;
}
.phpew-nav-link:hover {
  text-decoration: none;
  color: var(--phpew-fg);
  background: var(--phpew-surface);
}
.phpew-wiggle-link {
  color: var(--phpew-accent);
}
.phpew-wiggle-link:hover {
  color: var(--phpew-accent-hover, var(--phpew-accent));
}

/* Page nav (middle of header). The .is-active class is intentionally
   unstyled by default — themes can target it. */
.phpew-page-nav {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  flex-wrap: wrap;
  justify-self: center;
  grid-column: 2;
}
.phpew-page-nav-link {
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  padding: 0.4375rem 0.875rem;
  border-radius: var(--phpew-radius);
  transition: background 120ms ease, color 120ms ease;
}
.phpew-page-nav-link:hover {
  text-decoration: none;
  color: var(--phpew-fg);
  background: var(--phpew-surface);
}

/* Main content area — layout-neutral. The framework's `main` region
   carries this class so themes can target it generically, but the base
   rule applies NO width or padding constraints. Editor surfaces
   (Wiggle's scene editor, the style editor's preview pane) need full
   viewport access; marketing layouts (Snazy starter packs, AUHorde)
   scope their own max-width via per-layout selectors. Opt in to the
   classic centered + padded shell via the modifiers below. */
.phpew-main {
  /* Grow to fill the vertical space between header and footer so
   * main's background (gradient, image, solid color) reaches the
   * footer instead of leaving body-coloured gap. Pairs with the
   * body flex column + footer margin-top auto established above. */
  flex: 1 0 auto;
}

/* Opt-in: classic centered max-width container. */
.phpew-main--centered {
  max-width: 1280px;
  margin: 0 auto;
}
/* Opt-in: comfortable side padding. */
.phpew-main--padded {
  padding: 2.5rem 2rem;
}

.phpew-footer {
  border-top: 1px solid var(--phpew-border);
  padding: 1.5rem 2rem;
  color: var(--phpew-subtle);
  text-align: center;
  font-size: var(--phpew-fs-sm);
  /* Pushes the footer to the bottom of the viewport on short pages.
   * Pairs with the body flex column + min-height baseline above. */
  margin-top: auto;
}

/* ----- Sections ----------------------------------------------------------- */

/* Every rendered section gets <section class="phpew-section phpew-section--{slug}">. */
.phpew-section { margin-bottom: 2.5rem; }
.phpew-section:last-child { margin-bottom: 0; }
/* A bare block (no wrapper) that carries a whole-block Send/Receive jack is
 * wrapped in this host so the data-phpew-* attrs have a node to live on.
 * display:contents keeps it layout-neutral -- the body renders as if unwrapped. */
.phpew-signal-host { display: contents; }
/* show-if toggles the `hidden` attribute; a theme's own display rule on the
 * subscriber (grid/flex card layouts) would silently beat the UA's
 * [hidden]{display:none} and the verb would appear to do nothing. Any
 * subscriber the runtime hides must actually hide. */
[data-phpew-sub][hidden] { display: none !important; }
/* Sections rendered as datasource items live in a grid container whose own
 * `gap` handles inter-item spacing. The generic 2.5rem bottom-margin would
 * inflate row heights and (combined with the :last-child override above)
 * pull the last item down relative to its siblings in a flex/grid row.
 * Zero the margin for all items inside any datasource wrapper. */
.phpew-section-datasource > .phpew-section { margin-bottom: 0; }

.phpew-block-title {
  margin: 0;
  padding: 0;
}

.phpew-section-title {
  margin-top: 0;
  margin-bottom: 1rem;
  font-size: var(--phpew-fs-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--phpew-fg);
}

.phpew-section-body { line-height: var(--phpew-lh-base); }

/* ----- Pages / Articles -------------------------------------------------- */

.phpew-page > h1:first-child { margin-top: 0; }

.phpew-breadcrumb {
  margin: 0 0 1rem;
  font-size: var(--phpew-fs-sm);
}
.phpew-breadcrumb a {
  color: var(--phpew-muted);
}
.phpew-breadcrumb a:hover {
  color: var(--phpew-link);
}

.phpew-list--titles .phpew-list-items {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0;
  display: grid;
  gap: 0.5rem;
}
.phpew-list--titles .phpew-list-items li {
  border: 1px solid var(--phpew-border);
  background: var(--phpew-card-bg);
  border-radius: var(--phpew-radius);
  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
}
.phpew-list--titles .phpew-list-items li:hover {
  border-color: var(--phpew-border-strong);
  transform: translateY(-1px);
  box-shadow: var(--phpew-shadow-sm);
}
.phpew-list--titles .phpew-list-items a {
  display: block;
  padding: 0.875rem 1.125rem;
  color: var(--phpew-fg);
  font-weight: 500;
}
.phpew-list--titles .phpew-list-items a:hover { text-decoration: none; }
.phpew-draft-pill {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
  background: color-mix(in srgb, var(--phpew-error, #dc2626) 15%, transparent);
  color: var(--phpew-error, #dc2626);
  margin-left: 0.5rem;
  vertical-align: middle;
}
.phpew-article {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--phpew-border);
}

/* Article-list styles: 'excerpts' stacks teaser cards (title + excerpt +
 * read-more); 'full' streams each article body; 'titles' (default) is the
 * link list above. Selected via the list_style config; rendered by the list
 * selector as phpew-list--<style> blocks. */
.phpew-list--excerpts .phpew-list-items {
  display: grid;
  gap: 1.25rem;
  margin: 1rem 0 0;
}
.phpew-list-excerpt {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1rem 1.125rem;
}
/* Excerpt teaser: first link is the title (heading-styled), the text is the
 * excerpt, the last link is the read-more. */
.phpew-list-excerpt > a:first-child {
  display: block;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--phpew-fg);
  margin: 0 0 0.4rem;
}
.phpew-list-excerpt > a:first-child:hover { color: var(--phpew-accent); }
.phpew-list-excerpt .phpew-section-text { display: block; margin: 0 0 0.5rem; }
.phpew-list-excerpt > a:last-child { font-size: 0.85rem; }
.phpew-article-card { display: flex; flex-direction: column; }
.phpew-article-item-title {
  margin: 0 0 0.25rem 0;
  font-size: var(--phpew-fs-lg);
  line-height: 1.25;
}
.phpew-article-item-title a {
  color: var(--phpew-fg);
  text-decoration: none;
}
.phpew-article-item-title a:hover { color: var(--phpew-accent); }
.phpew-article-item-date {
  margin: 0 0 0.5rem 0;
  font-size: var(--phpew-fs-xs);
  color: var(--phpew-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phpew-article-item-excerpt {
  margin: 0 0 0.75rem 0;
  font-size: var(--phpew-fs-sm);
  color: var(--phpew-fg);
  line-height: var(--phpew-lh-base);
}
.phpew-article-card .phpew-article-item-excerpt { flex: 1 1 auto; }
.phpew-article-item-more { margin: 0; font-size: var(--phpew-fs-sm); }
.phpew-article-item-more a { color: var(--phpew-accent); font-weight: 500; }

/* ----- Multi-slot layouts ------------------------------------------------ */
.phpew-with-sidebar {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 2rem;
  align-items: start;
}
.phpew-with-sidebar-aside {
  border-right: 1px solid var(--phpew-border);
  padding-right: 1.5rem;
}
.phpew-sidebar-heading {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--phpew-muted);
  margin: 0 0 0.75rem 0;
}
@media (max-width: 720px) {
  .phpew-with-sidebar { grid-template-columns: 1fr; }
  .phpew-with-sidebar-aside { border-right: none; padding-right: 0; }
}

/* ----- Auth pages: vertically centred, narrow form ----------------------- */

main.phpew-main.login,
main.phpew-main.create-account,
main.phpew-main.forgot-password,
main.phpew-main.reset-password,
main.phpew-main.account {
  min-height: calc(100vh - 14rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}
main.phpew-main.login .phpew-form,
main.phpew-main.create-account .phpew-form,
main.phpew-main.forgot-password .phpew-form,
main.phpew-main.reset-password .phpew-form,
main.phpew-main.account .phpew-form,
main.phpew-main.account dl,
main.phpew-main.account h1,
main.phpew-main.account h2,
main.phpew-main.account > p,
main.phpew-main.account .phpew-notice,
main.phpew-main.account .phpew-error,
main.phpew-main.account .phpew-success,
main.phpew-main.account .phpew-inline-form {
  width: 100%;
  max-width: 22rem;
  text-align: left;
}

/* ----- Forms ------------------------------------------------------------- */

.phpew-form {
  display: flex;
  flex-direction: column;
  gap: var(--phpew-gap);
  max-width: 480px;
}
.phpew-form label {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  color: var(--phpew-fg);
}
.phpew-form input,
.phpew-form textarea,
.phpew-form select {
  padding: 0.5625rem 0.875rem;
  background: var(--phpew-card-bg);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  font: inherit;
  font-size: var(--phpew-fs-base);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
.phpew-form input::placeholder,
.phpew-form textarea::placeholder { color: var(--phpew-subtle); }
.phpew-form input:focus,
.phpew-form textarea:focus,
.phpew-form select:focus {
  outline: none;
  border-color: var(--phpew-accent);
  box-shadow: 0 0 0 3px var(--phpew-focus-ring);
}
.phpew-form textarea { resize: vertical; line-height: 1.5; }

/* Checkbox / radio labels: layout horizontally rather than the default
   vertical column the .phpew-form label sets. */
.phpew-form .phpew-checkbox {
  flex-direction: row;
  align-items: flex-start;
  gap: 0.5rem;
  font-weight: 400;
}
.phpew-form .phpew-checkbox input { width: auto; margin-top: 0.2rem; }
.phpew-form .phpew-checkbox span { flex: 1; }

/* Honeypot field — hidden off-screen for spam-bots to fill. Real users
   never see or tab into it (tabindex="-1" + aria-hidden in markup). */
.phpew-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ----- Buttons ----------------------------------------------------------- */

.phpew-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  border: 1px solid var(--phpew-accent);
  border-radius: var(--phpew-radius);
  font: inherit;
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
  white-space: nowrap;
}
.phpew-btn:hover {
  background: var(--phpew-accent-hover);
  border-color: var(--phpew-accent-hover);
  text-decoration: none;
  color: var(--phpew-accent-fg);
}
.phpew-btn:active { transform: translateY(1px); }
.phpew-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--phpew-focus-ring);
}
.phpew-btn.phpew-btn-danger,
.phpew-btn-danger {
  background: color-mix(in srgb, var(--phpew-error) 60%, transparent);
  border-color: color-mix(in srgb, var(--phpew-error) 60%, transparent);
}
.phpew-btn.phpew-btn-danger:hover,
.phpew-btn-danger:hover {
  background: color-mix(in srgb, var(--phpew-error) 80%, transparent);
  border-color: color-mix(in srgb, var(--phpew-error) 80%, transparent);
}
.phpew-btn.phpew-btn-success,
.phpew-btn-success {
  background: color-mix(in srgb, var(--phpew-success) 60%, transparent);
  border-color: color-mix(in srgb, var(--phpew-success) 60%, transparent);
  color: #09090b;
}
.phpew-btn.phpew-btn-success:hover,
.phpew-btn-success:hover {
  background: color-mix(in srgb, var(--phpew-success) 80%, transparent);
  border-color: color-mix(in srgb, var(--phpew-success) 80%, transparent);
}

/* Inline action forms (admin tables) */
.phpew-table form { display: inline; }

/* Action button groups (admin table action cells, theme picker, etc).
 * Wraps a stack of inline forms + anchor buttons in a flex container so
 * the buttons line up with a consistent gap, never overflow horizontally
 * (they wrap to a second visual row), and never truncate their text. The
 * default phpew-btn `white-space: nowrap` keeps each label on one line. */
.phpew-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.375rem;
  align-items: center;
}
.phpew-action-group form { display: inline-flex; margin: 0; }
.phpew-action-group .phpew-btn { flex: 0 0 auto; }

/* Single-row action group — never wraps. Used for tight cells where
 * stacking would be uglier than horizontal scroll (Users pane). */
.phpew-action-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.25rem;
  align-items: center;
  white-space: nowrap;
}
.phpew-action-row form { display: inline-flex; margin: 0; }
.phpew-action-row .phpew-btn { flex: 0 0 auto; padding: 0.1875rem 0.5rem; font-size: 0.6875rem; }

/* Datasource list chrome — search box + pager (panes-as-content lists).
 * Structural only (colors come from the theme): spaces the pager off the
 * content above it and keeps its buttons compact so they don't crowd or bleed. */
.phpew-datasource-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.phpew-datasource-search .phpew-admin-input { flex: 1 1 16rem; max-width: 28rem; }
.phpew-datasource-search .phpew-btn { flex: 0 0 auto; }

.phpew-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.phpew-pagination .phpew-btn { flex: 0 0 auto; padding: 0.25rem 0.625rem; font-size: 0.75rem; }
.phpew-pagination .phpew-muted { margin: 0 0.25rem; }

/* Inline roles form — checkboxes + small Save button on one line. */
.phpew-roles-form {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.625rem;
  align-items: center;
  white-space: nowrap;
  margin: 0;
}
.phpew-roles-form label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  color: var(--phpew-fg);
  cursor: pointer;
}
.phpew-roles-form .phpew-btn {
  padding: 0.1875rem 0.625rem;
  font-size: 0.6875rem;
  margin-left: 0.25rem;
}

/* ----- Cards ------------------------------------------------------------- */

.phpew-card {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1.25rem;
  box-shadow: var(--phpew-shadow-sm);
}

/* ----- Tables ------------------------------------------------------------ */

.phpew-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  overflow: hidden;
  font-size: var(--phpew-fs-xs);
}
.phpew-table th, .phpew-table td {
  text-align: left;
  padding: 0.4375rem 0.75rem;
  border-bottom: 1px solid var(--phpew-border);
  vertical-align: middle;
}
.phpew-table tbody tr:last-child td,
.phpew-table tbody tr:last-child th { border-bottom: none; }
.phpew-table th {
  background: var(--phpew-surface);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phpew-muted);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.phpew-table tbody tr { transition: background 80ms ease; }
.phpew-table tbody tr:hover { background: color-mix(in srgb, var(--phpew-surface) 50%, transparent); }
.phpew-table code { font-size: 0.7rem; }
.phpew-table small { font-size: 0.6875rem; }

/* Last column (actions, by convention) — keep buttons on one row,
   right-aligned, and compact so they don't squish the data columns. */
.phpew-table th:last-child,
.phpew-table td:last-child {
  white-space: nowrap;
  text-align: right;
  width: 1%;            /* shrinks to content; lets text columns expand */
}
.phpew-table .phpew-btn {
  padding: 0.1875rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 500;
  border-radius: var(--phpew-radius-sm);
  width: 6rem;
  text-align: center;
}
.phpew-table td:last-child form + form { margin-left: 0.25rem; }

/* ----- Toolbar (row of controls above content; e.g. log filter form) --- */

.phpew-toolbar {
  display: flex;
  align-items: end;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

/* ----- Log viewer (admin Logs pane) ------------------------------------- */

.phpew-logs {
  width: 100%;
  box-sizing: border-box;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  padding: 1rem;
  border-radius: var(--phpew-radius);
  font-size: 0.7rem;
  line-height: 1.5;
  /* Preserve newlines but wrap long lines (file paths, stack traces)
     so the pane can't burst its grid cell horizontally. */
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ----- Status / utility -------------------------------------------------- */

.phpew-error   { color: var(--phpew-error); }

/* Inline notice — used for soft warnings like "confirm your email". */
.phpew-notice {
  border: 1px solid var(--phpew-border);
  background: var(--phpew-surface);
  border-radius: var(--phpew-radius);
  padding: 0.875rem 1rem;
  margin: 1rem 0;
}
.phpew-notice p { margin: 0 0 0.5rem 0; }
.phpew-notice form { margin: 0; }
.phpew-success { color: var(--phpew-success); }
.phpew-muted   { color: var(--phpew-muted); }

/* ----- Admin layout ------------------------------------------------------ */

.phpew-admin {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 2rem;
}
.phpew-admin-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding-right: 1rem;
  border-right: 1px solid var(--phpew-border);
  align-self: start;
  position: sticky;
  top: 5rem;
}
.phpew-admin-nav a {
  color: var(--phpew-muted);
  padding: 0.5rem 0.75rem;
  border-radius: var(--phpew-radius-sm);
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  transition: background 120ms ease, color 120ms ease;
}
.phpew-admin-nav a:hover {
  text-decoration: none;
  background: var(--phpew-surface);
  color: var(--phpew-fg);
}
.phpew-admin-nav a.active {
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
}
.phpew-admin-nav a { display: flex; align-items: center; gap: 0.5rem; width: 100%; }
.phpew-admin-nav-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;       /* push to right edge regardless of label length */
  padding: 1px 7px;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.4;
  border-radius: 999px;
  background: var(--phpew-surface);
  color: var(--phpew-muted);
  border: 1px solid var(--phpew-border);
  flex: 0 0 auto;          /* never shrink — keep pill shape on narrow nav */
  white-space: nowrap;
}
.phpew-admin-nav a.active .phpew-admin-nav-badge {
  background: color-mix(in srgb, var(--phpew-accent-fg) 20%, transparent);
  border-color: transparent;
  color: var(--phpew-accent-fg);
}
.phpew-admin-nav-badge--pro {
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  border-color: transparent;
}
.phpew-admin-content > h2:first-child { margin-top: 0; }
.phpew-admin-nav-group {
  display: flex;
  flex-direction: column;
}
.phpew-admin-nav-group > summary {
  list-style: none;
  padding: 0.5rem 0.75rem;
  font-size: var(--phpew-fs-sm);
  font-weight: 600;
  color: var(--phpew-fg);
  cursor: pointer;
  user-select: none;
  border-radius: var(--phpew-radius-sm);
}
.phpew-admin-nav-group > summary::-webkit-details-marker { display: none; }
.phpew-admin-nav-group > summary::before {
  content: '▶';
  display: inline-block;
  font-size: .6em;
  margin-right: .4rem;
  transition: transform 120ms ease;
  vertical-align: middle;
}
.phpew-admin-nav-group[open] > summary::before { transform: rotate(90deg); }
.phpew-admin-nav-group > summary:hover { background: var(--phpew-surface); }
.phpew-admin-nav-group > a {
  display: flex;
  padding-left: 1.5rem;
}
.phpew-admin-nav-divider {
  height: 1px;
  background: var(--phpew-border, #3f3f46);
  margin: .5rem 0;
}

@media (max-width: 720px) {
  .phpew-main--padded { padding: 1.25rem 1rem; }
  .phpew-header { padding: 0.75rem 1.25rem; }
  .phpew-admin {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .phpew-admin-nav {
    flex-direction: row;
    overflow-x: auto;
    border-right: none;
    border-bottom: 1px solid var(--phpew-border);
    padding-right: 0;
    padding-bottom: 0.75rem;
    position: static;
  }
}

/* ── JSON layout system ──────────────────────────────────────────────── */

/* JSON layouts emit a `.phpew-layout` wrapper around the page body. As a
 * direct child of the body flex column, it needs to grow into the space
 * between header and footer so any per-page background (gradient, image)
 * reaches the footer. flex: 1 0 auto is a flex-ITEM property, so it works
 * whatever the wrapper's own display is. Do NOT set display here: this rule
 * lives in the phpew-theme layer, which outranks the phpew-layout layer
 * (ThemeManager declares `@layer phpew-layout, phpew-theme`), so a display
 * here silently kills the `display: grid` every v2 layout emits and all
 * areas collapse into a stacked column. */
.phpew-layout {
  flex: 1 0 auto;
}

/* v2 area stacking. When multiple slots target the same grid-area, the
 * renderer wraps them in `.phpew-area-stack` so they stack vertically
 * inside that area. Single-section areas skip the wrapper entirely
 * (the section's own wrapper carries data-area). */
.phpew-area-stack {
  display: flex;
  flex-direction: column;
  gap: var(--phpew-stack-gap, 1rem);
}

.phpew-layout-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.phpew-layout-row:last-child { margin-bottom: 0; }

.phpew-layout-col { min-width: 0; }
.phpew-layout-col--w1 { flex: 1 1 0; }
.phpew-layout-col--w2 { flex: 2 1 0; }
.phpew-layout-col--w3 { flex: 3 1 0; }
.phpew-layout-col--w4 { flex: 4 1 0; }

.phpew-layout-header,
.phpew-layout-footer { padding: 1rem 0; }

.phpew-layout-error {
  padding: 0.75rem 1rem;
  background: var(--phpew-error-bg, #fef2f2);
  border: 1px solid var(--phpew-error, #dc2626);
  border-radius: 6px;
  color: var(--phpew-error, #dc2626);
  font-size: 0.875rem;
}

@media (max-width: 720px) {
  .phpew-layout-row { flex-direction: column; gap: 1rem; }
  .phpew-layout-col { flex: 1 1 auto !important; width: 100%; }
}

/* Admin: shared editor surface (Articles, Pages, etc) */
.phpew-admin-editor-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 56rem;
  margin: 0 0 1.5rem;
}
.phpew-admin-editor-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.phpew-admin-editor-row[hidden] { display: none; }
.phpew-admin-editor-label {
  font-weight: 600;
  color: var(--phpew-fg);
}
.phpew-admin-input {
  width: 100%;
  box-sizing: border-box;
  padding: .55rem .65rem;
  background: var(--phpew-surface);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius, 4px);
  font-family: inherit;
  font-size: var(--phpew-fs-base, 1rem);
  line-height: 1.45;
}
.phpew-admin-input:focus {
  outline: 2px solid var(--phpew-accent, #6366f1);
  outline-offset: 1px;
}
.phpew-admin-input--textarea {
  resize: vertical;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: .9rem;
}
.phpew-admin-body {
  height: 22rem;
}
.phpew-admin-editor-error {
  color: var(--phpew-error, #dc2626);
  font-size: var(--phpew-fs-sm, .85rem);
}
.phpew-admin-editor-form {
  padding-bottom: 5rem;
}
.phpew-admin-editor-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  background: var(--phpew-surface, var(--phpew-bg));
  border-top: 1px solid var(--phpew-border);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .08);
  padding: .75rem 1.25rem;
  margin-top: 0;
}
.phpew-admin-flash {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-radius: var(--phpew-radius, .25rem);
}
.phpew-admin-flash--success {
  background: var(--phpew-success-bg, #dcfce7);
  color:      var(--phpew-success-fg, #166534);
}
.phpew-admin-flash--error {
  background: var(--phpew-error-bg, #fee2e2);
  color:      var(--phpew-error-fg, #b91c1c);
}
.phpew-admin-form-inline { display: inline; }

/* ── Repeater card grid ─────────────────────────────────────────────────── */
.phpew-video-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}
.phpew-video-grid-cell {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.phpew-video-grid-cell > * {
  flex: 1 1 auto;
  min-height: 0;
}
.phpew-video-grid-cell img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.phpew-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: max-content;
  align-items: start;
  gap: 1rem;
}
.phpew-cards[data-cols="1"] { grid-template-columns: 1fr; }
.phpew-cards[data-cols="2"] { grid-template-columns: repeat(2, 1fr); }
.phpew-cards[data-cols="4"] { grid-template-columns: repeat(4, 1fr); }
.phpew-cards[data-cols="5"] { grid-template-columns: repeat(5, 1fr); }
.phpew-cards[data-cols="6"] { grid-template-columns: repeat(6, 1fr); }
.phpew-cards + .phpew-cards { margin-top: 1.5rem; }
.phpew-card {
  display: flex;
  flex-direction: column;
}
.phpew-card-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}
.phpew-card-link { display: block; }
.phpew-card-link:hover .phpew-card-image { opacity: .85; }

/* ── Lightbox ───────────────────────────────────────────────────────────── */
.phpew-lb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.phpew-lb[hidden] { display: none; }
.phpew-lb-img {
  max-width: 90vw;
  max-height: 90vh;
  object-fit: contain;
  border-radius: var(--phpew-radius, .25rem);
  box-shadow: 0 0 3rem rgba(0,0,0,.6);
}
.phpew-lb-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  opacity: .8;
}
.phpew-lb-close:hover { opacity: 1; }

/* Generic admin-pane utility classes — used by panes that previously
 * leaked inline `style="..."` attrs that CSP would strip. Keep this
 * list short; if a pane needs more, give it its own scoped block. */
.phpew-inline-form     { display: inline; }
.phpew-pill-notice     { margin: 0; padding: 0.0625rem 0.4rem; }
.phpew-stack-tight     { margin-top: 0.75rem; }
.phpew-stack-section   { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--phpew-border); }

/* Branding pane scoped classes. */
.phpew-branding-form     { max-width: 36rem; }
.phpew-branding-fs       { border: 1px solid var(--phpew-border); border-radius: var(--phpew-radius); padding: 0.75rem 1rem; margin: 0 0 1rem; }
.phpew-branding-fs:last-child { margin-bottom: 0; }
.phpew-branding-fs legend { padding: 0 0.5rem; font-weight: 600; }
.phpew-branding-option   { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.375rem 0; cursor: pointer; }
.phpew-branding-option input[type="radio"] { margin-top: 0.25rem; flex: 0 0 auto; }
.phpew-branding-option--locked          { cursor: not-allowed; opacity: 0.7; }
.phpew-branding-option--locked strong   { color: var(--phpew-muted); }
.phpew-branding-upgrade-pill {
  display: inline-block;
  margin-left: 0.375rem;
  padding: 1px 7px;
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  text-decoration: none;
  vertical-align: middle;
}
.phpew-branding-upgrade-pill:hover { background: var(--phpew-accent-hover); }
.phpew-branding-field    { display: flex; flex-direction: column; gap: 0.3125rem; margin: 0 0 0.75rem; }
.phpew-branding-img-row  { display: flex; gap: 0.5rem; }
.phpew-branding-height-input { max-width: 6rem; }
.phpew-branding-img-row .phpew-input { flex: 1 1 auto; }
.phpew-branding-preview {
  margin-top: 0.5rem;
  padding: 0.75rem;
  background: var(--phpew-surface);
  border-radius: var(--phpew-radius);
  border: 1px solid var(--phpew-border);
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.phpew-branding-preview img {
  display: block;
  max-width: 100%;
  max-height: 80px;
  width: auto;
  height: auto;
  object-fit: contain;
}
.phpew-media-picker-head h3 { margin: 0; }
.phpew-media-picker-grid .phpew-muted,
.phpew-media-picker-grid .phpew-error { grid-column: 1 / -1; }

/* URL Manager (PagesPane) — list-first layout. */
.phpew-pages-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 1rem;
}
.phpew-pages-fronthelp {
  margin-top: 1.5rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  background: var(--phpew-card-bg);
}
.phpew-pages-fronthelp > summary {
  cursor: pointer;
  font-weight: 600;
}
.phpew-pages-fronthelp[open] > summary { margin-bottom: 0.5rem; }
.phpew-pages-add-form { max-width: 36rem; }
.phpew-inline-form { display: inline; margin: 0; }

/* Article editor — template-driven field form. */
.phpew-tpl-fields-header {
  margin: 0 0 0.75rem;
  padding: 0.5rem 0.75rem;
  background: var(--phpew-surface);
  border-radius: var(--phpew-radius);
}
.phpew-tpl-fields-header p { margin: 0.25rem 0 0; font-size: 0.85rem; }
.phpew-tpl-fields-settings {
  margin-top: 1rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
}
.phpew-tpl-fields-settings > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
}
.phpew-tpl-fields-settings[open] > summary { margin-bottom: 0.5rem; }

/* Page ↔ Article slug-link surfaces */
.phpew-pages-content-link {
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-left: 3px solid var(--phpew-accent);
  border-radius: var(--phpew-radius);
}
.phpew-pages-content-link small { display: block; margin-top: 0.25rem; }
.phpew-article-appears-at {
  padding: 0.5rem 0.85rem;
  margin: 0.25rem 0 1rem;
  background: var(--phpew-card-bg);
  border-radius: var(--phpew-radius);
  font-size: 0.9rem;
}
.phpew-article-justcreated {
  padding: 0.6rem 0.85rem;
  margin: 0 0 1rem;
  border-radius: var(--phpew-radius);
}
.phpew-btn--ghost {
  background: transparent;
  border: 1px solid var(--phpew-border);
  color: var(--phpew-fg);
}
.phpew-btn--ghost:hover { border-color: var(--phpew-accent); }

/* Inline checkbox row: [ ] **Heading** + muted explainer on the next line.
   Selectors are .phpew-form-scoped so they override the generic
   .phpew-form label { display: flex; flex-direction: column } rule. */
.phpew-form .phpew-checkbox-row,
.phpew-checkbox-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0.625rem;
  cursor: pointer;
  font-weight: normal;
}
.phpew-form .phpew-checkbox-row > input[type="checkbox"],
.phpew-checkbox-row > input[type="checkbox"] {
  flex: 0 0 auto;
  width: auto;
  margin: 0.2rem 0 0;
  padding: 0;
  background: transparent;
  border: 1px solid var(--phpew-border);
  box-shadow: none;
}
.phpew-checkbox-row-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.phpew-checkbox-row-text strong { font-weight: 600; }
.phpew-checkbox-row-text small  { color: var(--phpew-muted); font-size: 0.85rem; }

/* Pages — edit view: section cards, slot composer. */
.phpew-pages-section-card {
  margin: 1rem 0;
  padding: 0.75rem 1rem;
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  background: var(--phpew-card-bg);
}
.phpew-pages-section-card > summary {
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0;
}
.phpew-pages-section-card[open] > summary { margin-bottom: 0.5rem; }
.phpew-slot-table th { font-weight: 600; }

/* Pages edit — sticky save bar */
.phpew-pages-save-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--phpew-bg);
  border-top: 1px solid var(--phpew-border);
  padding: 0.75rem 0 calc(0.75rem + env(safe-area-inset-bottom, 0px));
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.phpew-pages-save-bar-status {
  font-size: var(--phpew-fs-sm);
  color: var(--phpew-muted);
}
.phpew-pages-unsaved .phpew-pages-save-bar-status {
  color: var(--phpew-warning);
  font-weight: 500;
}

/* Pages edit — anchor navigation */
.phpew-pages-edit-nav {
  display: flex;
  gap: 1rem;
  font-size: var(--phpew-fs-sm);
  margin: 0.75rem 0 1.25rem;
  flex-wrap: wrap;
}

/* Warning paragraph — amber tone for "this works but is not ideal". */
.phpew-warning {
  padding: 0.6rem 0.75rem;
  background: color-mix(in srgb, var(--phpew-warning, #d97706) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--phpew-warning, #d97706) 40%, transparent);
  border-radius: var(--phpew-radius);
  color: var(--phpew-fg);
  margin: 0 0 0.75rem;
  font-size: 0.875rem;
}
.phpew-slot-table td code { font-size: 0.85rem; }
.phpew-slot-no-label { font-size: 0.8rem; text-decoration: none; }

/* Drag-reorder handle column in the slot composition table. Only
 * shown for slots in a rows-variant region where every row has one
 * column — multi-column rows aren't reorderable in v1. */
.phpew-slot-drag-col { width: 1.5rem; text-align: center; padding: 0; }
.phpew-slot-drag {
  cursor: grab;
  color: var(--phpew-muted);
  user-select: none;
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.25rem;
}
.phpew-slot-drag:hover { color: var(--phpew-fg); }
.phpew-slot-table tr[draggable="true"]:hover { background: color-mix(in srgb, var(--phpew-accent, #4f46e5) 4%, transparent); }
.phpew-slot-table tr.is-dragging { opacity: 0.45; }

/* Image fields: text input + Browse-media button side by side.
 * Used by both the section editor and the content editor. Defined
 * here in the shared admin stylesheet so any pane that renders an
 * image field gets the layout for free. */
.phpew-image-field { display: flex; gap: 0.5rem; align-items: stretch; }
.phpew-image-field-input { flex: 1; min-width: 0; }
.phpew-image-field-browse { flex-shrink: 0; white-space: nowrap; }

/* One-shot toast for "your reorder forked the layout" and similar
 * after-the-reload notifications. Floats top-right, auto-fades. */
.phpew-toast {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 100;
  padding: 0.75rem 1rem;
  border-radius: var(--phpew-radius, 0.375rem);
  background: var(--phpew-fg, #1f2937);
  color: var(--phpew-bg, #ffffff);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  max-width: 28rem;
  font-size: 0.875rem;
  opacity: 1;
  transition: opacity 0.8s ease;
}
.phpew-toast--info { background: var(--phpew-accent, #4f46e5); color: var(--phpew-accent-fg, #ffffff); }
.phpew-toast.is-fading { opacity: 0; }

/* Users pane: roles cell shows three inline checkboxes; the save bar
 * lives below the table since the wrapping form is rendered outside
 * the table (HTML5 form="" attribute associates the inputs). */
.phpew-roles-row { display: inline-flex; gap: 0.6rem; align-items: center; }
.phpew-roles-row label { font-size: 0.9rem; }
.phpew-users-roles-save { margin-top: 0.75rem; display: flex; justify-content: flex-end; }

/* Empty-slot placeholder (rendered on the public page when admin viewing). */
.phpew-empty-slot {
  padding: 0.85rem 1rem;
  border: 1px dashed var(--phpew-border);
  border-radius: var(--phpew-radius);
  background: color-mix(in srgb, var(--phpew-accent) 6%, transparent);
  margin: 0.5rem 0;
}

/* Content pane — "+ Add content ▾" split button menu. */
.phpew-content-toolbar { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; flex-wrap: wrap; }
.phpew-content-filter { display: flex; gap: 0.4rem; align-items: center; margin-left: auto; flex-wrap: wrap; }
.phpew-content-filter input[type="search"] { min-width: 12rem; }
.phpew-content-filter select { max-width: 14rem; }
.phpew-content-add { position: relative; }
.phpew-content-add-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  min-width: 14rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  padding: 0.25rem 0;
  z-index: 10;
}
.phpew-content-add-menu a {
  display: block;
  padding: 0.4rem 0.75rem;
  color: var(--phpew-fg);
  font-size: 0.9rem;
  text-decoration: none;
}
.phpew-content-add-menu a:hover { background: var(--phpew-surface); }
.phpew-content-add-group + .phpew-content-add-group { border-top: 1px solid var(--phpew-border); }
.phpew-content-add-group-label {
  display: block;
  padding: 0.3rem 0.75rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.phpew-content-add-group-label::-webkit-details-marker { display: none; }
.phpew-content-add-group-label::before { content: '▸ '; font-size: 0.6rem; }
.phpew-content-add-group[open] > .phpew-content-add-group-label::before { content: '▾ '; }

/* Templates pane — grid of template cards. */
.phpew-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.phpew-template-card {
  padding: 0.85rem 1rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.phpew-template-card-name { margin: 0; font-size: 1rem; }
.phpew-template-card-slug {
  font-size: 0.72rem;
  color: var(--phpew-muted);
  background: var(--phpew-surface);
  padding: 1px 6px;
  border-radius: 3px;
  align-self: flex-start;
}
.phpew-template-card-desc { margin: 0; font-size: 0.85rem; }
.phpew-template-card-meta { margin: 0; }
.phpew-template-card-actions { margin-top: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.phpew-template-toggle { display: inline; margin: 0; }
.phpew-template-card--disabled { opacity: 0.55; }
.phpew-template-cat-badge {
  background: var(--phpew-surface);
  color: var(--phpew-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.72rem;
}
.phpew-template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}
.phpew-btn--active {
  background: var(--phpew-accent);
  color: #fff;
  border-color: var(--phpew-accent);
}

/* Article-list block render styles */
.phpew-list--full .phpew-list-items > article { margin: 0 0 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid var(--phpew-border); }
.phpew-list--full .phpew-list-items > article:last-child { border-bottom: none; }

/* Forum datasource renderers */
.phpew-forum-cat-list,
.phpew-forum-thread-list    { list-style: none; margin: 0; padding: 0; }
.phpew-forum-cat-item       { display: flex; align-items: baseline; gap: 0.5rem;
                               padding: 0.6rem 0; border-bottom: 1px solid var(--phpew-border); }
.phpew-forum-cat-item:last-child { border-bottom: none; }
.phpew-forum-cat-link       { flex: 1; text-decoration: none; color: var(--phpew-fg); display: flex; flex-direction: column; gap: 0.15rem; }
.phpew-forum-cat-link:hover .phpew-forum-cat-title { color: var(--phpew-accent); }
.phpew-forum-cat-title      { font-weight: 600; }
.phpew-forum-cat-desc       { font-size: 0.82rem; color: var(--phpew-muted); }
.phpew-forum-cat-count      { font-size: 0.78rem; color: var(--phpew-muted); white-space: nowrap; }
.phpew-forum-thread-item    { padding: 0.45rem 0; border-bottom: 1px solid var(--phpew-border); font-size: 0.9rem; }
.phpew-forum-thread-item:last-child { border-bottom: none; }
.phpew-forum-thread-item a  { color: var(--phpew-fg); text-decoration: none; }
.phpew-forum-thread-item a:hover { color: var(--phpew-accent); }

/* ── First-run wizard ──────────────────────────────────────────────── */
.phpew-wizard-wrap         { max-width: 640px; margin: 3rem auto; padding: 0 1rem; }
.phpew-wizard-card         { background: var(--phpew-card-bg); border: 1px solid var(--phpew-border);
                              border-radius: var(--phpew-radius); padding: 2rem; }
.phpew-wizard-card--hidden { display: none; }
.phpew-wizard-heading      { margin: 0 0 0.25rem; font-size: 1.35rem; font-weight: 600; }
.phpew-wizard-hint         { margin: 0 0 0.5rem; color: var(--phpew-muted); font-size: 0.9rem; }
.phpew-wizard-input        { width: 100%; box-sizing: border-box; margin-top: 1rem; }
.phpew-wizard-type-row     { display: flex; gap: 1rem; margin-top: 1.5rem; }
.phpew-wizard-type-btn     { flex: 1; display: flex; flex-direction: column; align-items: center;
                              gap: 0.4rem; padding: 1.25rem 1rem; border: 2px solid var(--phpew-border);
                              border-radius: var(--phpew-radius); background: var(--phpew-surface);
                              cursor: pointer; color: var(--phpew-fg); text-align: center; }
.phpew-wizard-type-btn:hover { border-color: var(--phpew-accent); }
.phpew-wizard-type-btn.is-selected { border-color: var(--phpew-accent); }
.phpew-wizard-type-icon    { font-size: 2rem; line-height: 1; }
.phpew-wizard-type-label   { font-weight: 600; }
.phpew-wizard-type-desc    { font-size: 0.82rem; color: var(--phpew-muted); }
.phpew-wizard-layout-more  { text-align: right; margin-top: 0.75rem; font-size: 0.875rem; }
.phpew-wizard-more-link    { color: var(--phpew-accent); text-decoration: none; }
.phpew-wizard-more-link:hover { text-decoration: underline; }
.phpew-wizard-layout-grid  { display: grid; grid-template-columns: repeat(3, 1fr);
                              gap: 0.75rem; margin-top: 0.5rem; }
/* Layout tile — mini web-page thumbnail */
.phpew-wizard-layout-card  { border: 2px solid var(--phpew-border); border-radius: var(--phpew-radius);
                              cursor: pointer; overflow: hidden; background: var(--phpew-bg);
                              box-shadow: 0 1px 3px rgba(0,0,0,0.07);
                              transition: border-color 0.1s, box-shadow 0.1s; }
.phpew-wizard-layout-card:hover { border-color: var(--phpew-accent);
                              box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.phpew-wizard-layout-card.is-selected { border-color: var(--phpew-accent);
                              box-shadow: 0 0 0 2px var(--phpew-accent); }
/* Thumbnail scaffold */
.phpew-wiz-thumb           { display: flex; flex-direction: column; }
.phpew-wiz-thumb-header    { height: 8px; background: var(--phpew-border-strong); flex-shrink: 0; }
.phpew-wizard-layout-card.is-selected .phpew-wiz-thumb-header { background: var(--phpew-accent); }
.phpew-wiz-thumb-body      { display: flex; gap: 3px; padding: 4px;
                              background: var(--phpew-surface); flex: 1; }
.phpew-wiz-thumb-footer    { height: 6px; background: var(--phpew-border); flex-shrink: 0; }
/* Columns inside the body */
.phpew-wiz-thumb-col       { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.phpew-wiz-thumb-col[data-flex="2"] { flex: 2; }
.phpew-wiz-thumb-col[data-flex="3"] { flex: 3; }
/* Skeleton shapes */
.phpew-wiz-skel            { border-radius: 2px; background: var(--phpew-border); flex-shrink: 0; }
.phpew-wiz-skel--img       { height: 22px; background: var(--phpew-border-strong); }
.phpew-wiz-skel--line      { height: 3px; }
.phpew-wiz-skel--line[data-w="80"] { width: 80%; }
.phpew-wiz-skel--line[data-w="60"] { width: 60%; }
/* Label strip below thumbnail */
.phpew-wizard-layout-label { font-size: 0.78rem; text-align: center; padding: 0.3rem 0.5rem 0.35rem;
                              color: var(--phpew-fg); border-top: 1px solid var(--phpew-border);
                              background: var(--phpew-card-bg); }
.phpew-wizard-form         { display: none; }
.phpew-wizard-nav          { display: flex; justify-content: space-between; margin-top: 1.5rem; }
.phpew-wizard-nav > :only-child { margin-left: auto; }
.phpew-forum-thread-meta    { font-size: 0.78rem; }

/* ── Super-admin "Edit this" hover pills ─────────────────────────────────
 *
 * Activated when <body data-admin="1"> is set by the
 * ?page=phpew-edit-pills.js endpoint (Phpew\Admin\EditPills). Pills are
 * appended by JS to every [data-section] and [data-article-id] node and
 * rendered invisible until hover.
 *
 * All rules are gated by body[data-admin="1"] so the entire system costs
 * zero pixels and zero pointer-events for non-admins.
 */
.phpew-edit-pill {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.3rem 0.85rem;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0.25rem;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 50;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Positioning context for the edit pill / inline blockbar (both absolutely
 * positioned children) so they sit at the section corner. :where() zeroes the
 * selector's specificity so this acts as a default that ONLY positions sections
 * which are otherwise statically positioned. Any page/theme rule that sets
 * position (e.g. an absolutely-positioned layout section) now wins, so an
 * admin sees the same layout as a visitor. Without :where() this (0,2,1) rule
 * clobbered author positioning -- a super-admin's page rendered differently
 * from a regular user's. The absolute pill still anchors fine: an
 * author-positioned section is itself a positioning context. */
:where(body[data-admin="1"]) :where([data-section], [data-article-id]) {
    position: relative;
}
body[data-admin="1"] [data-section]:hover > .phpew-edit-pill,
body[data-admin="1"] [data-section]:focus-within > .phpew-edit-pill,
body[data-admin="1"] [data-article-id]:hover > .phpew-edit-pill,
body[data-admin="1"] [data-article-id]:focus-within > .phpew-edit-pill {
    opacity: 1;
    pointer-events: auto;
}
body[data-admin="1"] .phpew-edit-pill:hover {
    background: rgba(0, 0, 0, 1);
    text-decoration: none;
}
body.phpew-si-on .phpew-edit-pill {
    display: none !important;
}
/* When hovering an inner article card, suppress the OUTER block pill —
 * show only the deepest "edit" target. Without this, hovering a
 * datasource card would reveal both "Edit this content" AND "Edit this
 * block" stacked at the section corner. */
body[data-admin="1"] [data-section]:has([data-article-id]:hover) > .phpew-edit-pill {
    opacity: 0;
    pointer-events: none;
}


/* Site-not-ready landing — public page for a tenant pending first-run setup. */
.phpew-site-not-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
  text-align: center;
}
.phpew-site-not-ready-card { max-width: 34rem; }
.phpew-site-not-ready-title {
  font-size: var(--phpew-fs-xl, 2rem);
  margin: 0 0 .5rem;
  color: var(--phpew-fg);
}
.phpew-site-not-ready-lead {
  font-size: var(--phpew-fs-lg, 1.1rem);
  color: var(--phpew-fg);
  opacity: .7;
  margin: 0 0 1.75rem;
}
.phpew-site-not-ready-owner { font-size: var(--phpew-fs-sm, .9rem); }

/* ── Button content type ──────────────────────────────────────────────────
 * Authored as content (template=button), placed by slug. Layered structure:
 *   .phpew-button (outer <a>)
 *   ├─ .phpew-button-bg     (optional <img>, absolutely positioned, sits
 *   │                       behind everything via z-index 0)
 *   ├─ .phpew-button-image  (main <img>, e.g. small icon or large hero)
 *   ├─ .phpew-button-label  (text, sits next to / over / around the image)
 *   └─ .phpew-button-pill   (optional badge, top-right corner)
 *
 * The default layout is a horizontal flex row (image then label). Use
 * the style inspector to switch flex-direction / justify / align — or to
 * stack the label above/below the image — without writing CSS by hand.
 * Three states (default, :hover, :active) plus focus-visible for keyboards. */
.phpew-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: transparent;
  color: inherit;
  border: 0;
  border-radius: var(--phpew-radius, 6px);
  font: 600 var(--phpew-fs-base, 1rem)/1.2 inherit;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, transform 80ms ease, box-shadow 120ms ease;
  overflow: hidden;
}
.phpew-button:hover { text-decoration: none; }
.phpew-button:active { transform: translateY(1px); }

/* Prominence variant: a filled accent button for the one call to action that
 * should stand out (upsell CTAs, "Upgrade to Pro"). The base .phpew-button is
 * a transparent ghost; this fills it. Opt in per instance via the Button
 * template's `variant` field ("primary"), so the base style is untouched. */
.phpew-button--primary {
  background: var(--phpew-accent, #4f46e5);
  color: var(--phpew-accent-fg, #ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
}
.phpew-button--primary:hover {
  background: var(--phpew-accent-hover, var(--phpew-accent, #4f46e5));
}
.phpew-button--primary .phpew-button-label { color: inherit; }
.phpew-button:focus-visible {
  outline: 2px solid var(--phpew-focus-ring, var(--phpew-accent, #6366f1));
  outline-offset: 2px;
}

.phpew-button-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* All non-background children sit above the bg layer. */
.phpew-button-image,
.phpew-button-label,
.phpew-button-pill { position: relative; z-index: 1; }

.phpew-button-image {
  flex: 0 0 auto;
  height: 1.2em;
  width: auto;
  max-width: 100%;
  display: block;
}

.phpew-button-label { display: inline-block; }

/* Pill / badge — sits at the top-right corner like a notification dot. */
.phpew-button-pill {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.2rem;
  padding: 0 0.35rem;
  height: 1.2rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--phpew-error, #ef4444);
  color: #fff;
  font: 600 0.7rem/1 inherit;
  border-radius: 999px;
}
.phpew-button-pill:empty { display: none; }

/* ── Account page (auth/account.php) — default layout for the field rows
 * and the password section. Per-row classes (.phpew-account-field--<key>)
 * give themes a targeting hook for individual rows. */
.phpew-account-fields {
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
}
.phpew-account-field {
  display: contents;  /* dt+dd become direct grid items */
}
.phpew-account-field-label {
  font-weight: 600;
  color: var(--phpew-muted);
}
.phpew-account-field-value {
  margin: 0;
}
.phpew-account-section {
  margin: 1.5rem 0;
}
.phpew-account-pw-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: .5rem;
}
.phpew-account-pw-reset {
  display: flex;
  align-items: center;
  gap: .5rem;
}
.phpew-account-pw-change-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 22rem;
  margin: 0 0 1rem;
}
.phpew-account-pw-field {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.phpew-account-pw-field input {
  width: 100%;
}
.phpew-account-pw-change-form .phpew-account-pw-change {
  align-self: flex-start;
}

/* ── Social — header bell + people / notifications pages ──────────────── */
.phpew-nav-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.phpew-nav-bell-count {
  position: absolute;
  top: -0.4rem;
  right: -0.4rem;
  min-width: 1.1rem;
  padding: 0 0.3rem;
  height: 1.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--phpew-error, #ef4444);
  color: #fff;
  font: 600 0.65rem/1 inherit;
  border-radius: 999px;
}
.phpew-people-list { list-style: none; padding: 0; margin: 1rem 0; }
.phpew-people-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--phpew-border);
}
.phpew-people-row-link {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
}
.phpew-people-row-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: var(--phpew-surface);
}
.phpew-people-row-username { color: var(--phpew-muted); }
.phpew-people-row-actions { display: flex; gap: 0.4rem; }
.phpew-notifications-list { list-style: none; padding: 0; }
.phpew-notifications-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--phpew-border);
}
.phpew-notifications-row.is-unread { background: var(--phpew-card-bg); }
.phpew-notifications-when { margin-left: auto; color: var(--phpew-muted); }
.phpew-privacy-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.phpew-player-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.phpew-player-avatar {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  background: var(--phpew-card-bg);
}

/* ── Chat: two-pane DM UI ───────────────────────────────────────────── */
.phpew-chat {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1rem;
  min-height: 60vh;
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius, .5rem);
  overflow: hidden;
}
.phpew-chat-inbox {
  border-right: 1px solid var(--phpew-border);
  padding: 0.75rem;
  background: var(--phpew-surface);
  overflow-y: auto;
}
.phpew-chat-inbox-list { list-style: none; padding: 0; margin: 0; }
.phpew-chat-inbox-row a {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border-radius: var(--phpew-radius, .25rem);
  color: inherit;
  text-decoration: none;
}
.phpew-chat-inbox-row.is-on a { background: var(--phpew-accent); color: var(--phpew-accent-fg); }
.phpew-chat-inbox-row.has-unread .phpew-chat-inbox-name { font-weight: 700; }
.phpew-chat-inbox-badge {
  margin-left: auto;
  background: var(--phpew-error, #ef4444);
  color: #fff;
  border-radius: 999px;
  font-size: 0.7rem;
  padding: 0 0.4rem;
  min-width: 1.2rem;
  text-align: center;
}
.phpew-chat-thread {
  display: flex;
  flex-direction: column;
  padding: 0.75rem;
  min-width: 0;
}
.phpew-chat-thread-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--phpew-border);
  margin-bottom: 0.5rem;
}
.phpew-chat-messages {
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.phpew-chat-message {
  max-width: 75%;
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: var(--phpew-card-bg);
  position: relative;
}
.phpew-chat-message.is-mine {
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  align-self: flex-end;
}
.phpew-chat-message.is-theirs { align-self: flex-start; }
.phpew-chat-message-when {
  display: block;
  font-size: 0.7rem;
  opacity: 0.65;
  margin-top: 0.2rem;
}
.phpew-chat-message-report {
  position: absolute;
  top: 0.1rem;
  right: -1.6rem;
}
.phpew-chat-message:not(:hover) .phpew-chat-message-report { display: none; }
.phpew-chat-send {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.phpew-chat-send textarea {
  flex: 1 1 auto;
  resize: vertical;
  padding: 0.5rem;
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius, .25rem);
  background: var(--phpew-card-bg);
  color: var(--phpew-fg);
  font: inherit;
}
.phpew-chat-empty {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

/* ── E2E setup / unlock modal ──────────────────────────────────────── */
#phpew-e2e-modal-host {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
  padding: 1.5rem;
}
#phpew-e2e-modal-host:empty { display: none; }
.phpew-e2e-modal {
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  padding: 1.75rem;
  border-radius: 12px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
  max-height: 90vh;
  overflow-y: auto;
}
.phpew-e2e-modal h2 { margin-top: 0; }
.phpew-e2e-choice { display: grid; gap: 0.75rem; margin-top: 1rem; }
.phpew-e2e-choice button {
  text-align: left;
  padding: 1rem;
  border: 1px solid var(--phpew-border, #ccc);
  background: transparent;
  color: inherit;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
}
.phpew-e2e-choice button:hover { background: var(--phpew-hover-bg, rgba(0,0,0,0.05)); }
.phpew-e2e-choice button strong { display: block; margin-bottom: 0.35rem; font-size: 1.05em; }
.phpew-e2e-choice button p { margin: 0; font-size: 0.92em; opacity: 0.85; }
.phpew-e2e-phrase {
  font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
  background: var(--phpew-code-bg, rgba(0,0,0,0.05));
  padding: 1rem;
  border-radius: 6px;
  font-size: 1.05em;
  line-height: 1.6;
  letter-spacing: 0.02em;
  white-space: pre-wrap;
  word-break: break-word;
}
.phpew-e2e-actions {
  display: flex;
  gap: 0.5rem;
  margin: 1rem 0 0.5rem;
  flex-wrap: wrap;
}
.phpew-e2e-confirm {
  display: flex; align-items: center; gap: 0.5rem;
  margin: 0.75rem 0;
  font-size: 0.95em;
}
.phpew-e2e-footer { margin-top: 1rem; }
.phpew-e2e-password input[type="password"],
.phpew-e2e-password input[type="text"],
.phpew-e2e-unlock   input[type="password"],
.phpew-e2e-unlock   input[type="text"] {
  width: 100%;
  padding: 0.6rem 0.75rem;
  border-radius: 6px;
  border: 1px solid var(--phpew-border, #ccc);
  background: var(--phpew-input-bg, #fff);
  color: inherit;
  font: inherit;
  margin-bottom: 0.5rem;
}

/* Modal-style admin tool pages — hide the customer-facing site header
 * and footer so the picker / tool fills its own window. Currently:
 *   ?page=phpew-media-picker  → phpew-page--phpew-media-picker
 * Add more here as we discover them. */
body.phpew-page--phpew-media-picker .phpew-header,
body.phpew-page--phpew-media-picker .phpew-footer {
  display: none;
}

/* ==========================================================================
   PHPew default theme — dark
   Overrides-only. Loaded by ThemeManager AFTER phpew_light.css, so any
   structural rule lives in light and only diverging tokens live here.
   When you edit light, dark inherits automatically.
   ========================================================================== */

:root {
  --phpew-bg:            #09090b;
  --phpew-card-bg:       #18181b;
  --phpew-surface:       #27272a;
  --phpew-fg:            #fafafa;
  --phpew-muted:         #a1a1aa;
  --phpew-subtle:        #71717a;
  --phpew-border:        #27272a;
  --phpew-border-strong: #3f3f46;
  --phpew-accent:        #818cf8;
  --phpew-accent-fg:     #09090b;
  --phpew-accent-hover:  #a5b4fc;
  --phpew-accent-2:      #fbbf24;
  --phpew-error:         #f87171;
  --phpew-error-hover:   #fca5a5;
  --phpew-error-bg:      rgba(248, 113, 113, 0.1);
  --phpew-success:       #4ade80;
  --phpew-success-bg:    rgba(74, 222, 128, 0.1);
  --phpew-warning:       #fbbf24;
  --phpew-focus-ring:    rgba(129, 140, 248, 0.4);
  --phpew-header-bg:     rgba(24, 24, 27, 0.85);
  --phpew-shadow-sm:     0 1px 2px rgba(0, 0, 0, 0.3);
  --phpew-shadow:        0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Tells the browser this is a dark surface so native form widgets,
   scrollbars, and the canvas background match. Not a token. */
html { color-scheme: dark; }

/* ── JSON layout system ──────────────────────────────────────────────── */

.phpew-layout-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  margin-bottom: 1.5rem;
}
.phpew-layout-row:last-child { margin-bottom: 0; }

.phpew-layout-col { min-width: 0; }
.phpew-layout-col--w1 { flex: 1 1 0; }
.phpew-layout-col--w2 { flex: 2 1 0; }
.phpew-layout-col--w3 { flex: 3 1 0; }
.phpew-layout-col--w4 { flex: 4 1 0; }

.phpew-layout-header,
.phpew-layout-footer { padding: 1rem 0; }

.phpew-layout-error {
  padding: 0.75rem 1rem;
  background: var(--phpew-error-bg, #2c0e0e);
  border: 1px solid var(--phpew-error, #f87171);
  border-radius: 6px;
  color: var(--phpew-error, #f87171);
  font-size: 0.875rem;
}

@media (max-width: 720px) {
  .phpew-layout-row { flex-direction: column; gap: 1rem; }
  .phpew-layout-col { flex: 1 1 auto !important; width: 100%; }
}


/* Site-not-ready landing — public page for a tenant pending first-run setup. */
.phpew-site-not-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
  text-align: center;
}
.phpew-site-not-ready-card { max-width: 34rem; }
.phpew-site-not-ready-title {
  font-size: var(--phpew-fs-xl, 2rem);
  margin: 0 0 .5rem;
  color: var(--phpew-fg);
}
.phpew-site-not-ready-lead {
  font-size: var(--phpew-fs-lg, 1.1rem);
  color: var(--phpew-fg);
  opacity: .7;
  margin: 0 0 1.75rem;
}
.phpew-site-not-ready-owner { font-size: var(--phpew-fs-sm, .9rem); }

/* phpew_forms — default styling for form-shaped sections.
 *
 * Folded into the theme stylesheet via ThemeManager::addExtensionCss,
 * so theme tokens + advanced_css can override anything here.
 *
 * Uses the .phpew-form-section outer class so the rules don't collide
 * with .phpew-form on auth-form views.
 */

.phpew-form-section {
  margin: 0 0 1.5rem;
  max-width: 42rem;
  color: var(--phpew-fg, #111);
}

.phpew-form-heading {
  margin: 0 0 .5rem;
  font-size: var(--phpew-fs-lg, 1.3rem);
  font-weight: 700;
}

.phpew-form-intro {
  margin: 0 0 1rem;
  color: var(--phpew-muted, #555);
  font-size: var(--phpew-fs-base, 1rem);
}

.phpew-form-success {
  padding: .75rem 1rem;
  background: var(--phpew-success-bg, #f0fdf4);
  border: 1px solid var(--phpew-success, #16a34a);
  border-radius: var(--phpew-radius, 4px);
  color: var(--phpew-success, #16a34a);
}

.phpew-form-progress {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: .75rem 0;
}
.phpew-form-progress[data-hidden] { display: none; }
.phpew-form-progress-bar { flex: 1; height: .9rem; }
.phpew-form-progress-text { color: var(--phpew-muted); font-size: var(--phpew-fs-sm); white-space: nowrap; }

.phpew-form-body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.phpew-form-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}

/* Label sits on its own line ABOVE the input, with the required
 * indicator inline next to the label text (NOT stacked below it). */
.phpew-form-label {
  display: inline-flex;
  align-items: baseline;
  gap: .25rem;
  font-weight: 600;
  font-size: var(--phpew-fs-sm, .9rem);
  color: var(--phpew-fg, #111);
}

.phpew-form-required {
  color: var(--phpew-error, #dc2626);
  font-weight: 700;
}

.phpew-form-input {
  padding: .5rem .75rem;
  font-size: var(--phpew-fs-base, 1rem);
  font-family: inherit;
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  border: 1px solid var(--phpew-border, #ccc);
  border-radius: var(--phpew-radius, 4px);
  width: 100%;
  box-sizing: border-box;
}
.phpew-form-input:focus {
  outline: 2px solid var(--phpew-focus-ring, var(--phpew-accent, #6366f1));
  outline-offset: 1px;
  border-color: transparent;
}
.phpew-form-input--textarea {
  resize: vertical;
}
.phpew-form-input--checkbox {
  width: auto;
  margin-right: .5rem;
  accent-color: var(--phpew-accent, #6366f1);
}

/* Image field: URL input + Browse button on one row, with a thumbnail
 * preview of the current value below it (hidden until a URL is set,
 * updated live on type/pick by the form's media-picker JS). */
.phpew-form-image-field {
  display: flex;
  gap: .5rem;
  align-items: center;
}
.phpew-form-image-field .phpew-form-image-input {
  flex: 1;
}
.phpew-form-image-preview {
  display: block;
  /* .phpew-form-row is a flex column (align-items:stretch), which would force
   * this img to full width and distort it once a height is set. Opt out so it
   * sizes to its own content at the given height, keeping aspect ratio. */
  align-self: flex-start;
  width: auto;
  height: auto;
  max-width: auto;
  max-height: 120px;
  margin-top: .5rem;
  border: 1px solid var(--phpew-border, #ccc);
  border-radius: var(--phpew-radius, 4px);
  /* Transparency checkerboard: reveals a logo of any color (white, dark, or
   * partly transparent) instead of hiding a white logo on a dark card or a
   * dark logo on a light one -- branding has one logo, not a themed variant. */
  background-color: #fff;
  background-image:
    linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
    linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
    linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.phpew-form-image-preview[hidden] {
  display: none;
}
/* preview_bg overrides: judge the logo against the surface it targets. */
.phpew-form-image-preview--light {
  background-color: #fff;
  background-image: none;
}
.phpew-form-image-preview--dark {
  background-color: #111;
  background-image: none;
}

/* Checkbox + label as one inline unit: the box sits directly before its
 * text, the whole thing left-aligned and clickable. Replaces the stacked
 * label-above-control layout that left the checkbox floating on its own row. */
.phpew-form-checkbox {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--phpew-fs-sm, .9rem);
  color: var(--phpew-fg, #111);
  cursor: pointer;
}
.phpew-form-checkbox .phpew-form-input--checkbox {
  margin: 0;
  flex: 0 0 auto;
}

.phpew-form-error {
  color: var(--phpew-error, #dc2626);
  font-size: var(--phpew-fs-sm, .85rem);
  margin-top: .15rem;
}

.phpew-form-row--error .phpew-form-input {
  border-color: var(--phpew-error, #dc2626);
}

.phpew-form-submit {
  padding: .55rem 1rem;
  font-size: var(--phpew-fs-base, 1rem);
  font-weight: 600;
  background: var(--phpew-accent, #6366f1);
  color: var(--phpew-accent-fg, #fff);
  border: 1px solid var(--phpew-accent, #6366f1);
  border-radius: var(--phpew-radius, 4px);
  cursor: pointer;
  align-self: flex-start;
}
.phpew-form-submit:hover {
  background: var(--phpew-accent-hover, #4f46e5);
  border-color: var(--phpew-accent-hover, #4f46e5);
}

/* Admin: per-submission reply form on the detail view */
.phpew-admin-reply-form {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-width: 42rem;
  margin: 0 0 1.5rem;
}
.phpew-admin-reply-row {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.phpew-admin-reply-label {
  font-size: var(--phpew-fs-sm, .85rem);
  font-weight: 600;
  color: var(--phpew-fg-muted, #94a3b8);
}
.phpew-admin-reply-form .phpew-admin-input {
  width: 100%;
  box-sizing: border-box;
}
.phpew-admin-reply-form .phpew-admin-textarea {
  resize: vertical;
  font-family: inherit;
  line-height: 1.5;
}
.phpew-admin-reply-form .phpew-admin-input[disabled] {
  opacity: .7;
  cursor: not-allowed;
}
.phpew-admin-reply-form .phpew-btn {
  align-self: flex-start;
}

/* Admin: submission list view */
.phpew-admin-toolbar--filters,
.phpew-admin-toolbar--bulk,
.phpew-admin-toolbar--actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
  align-items: flex-end;
}
.phpew-admin-toolbar--filters { margin-bottom: 1rem; }
.phpew-admin-toolbar--bulk    { margin-bottom: .5rem; }

.phpew-admin-flash {
  margin: 1rem 0;
  padding: .75rem 1rem;
  border-radius: var(--phpew-radius, .25rem);
}
.phpew-admin-flash--success {
  background: var(--phpew-success-bg, #dcfce7);
  color:      var(--phpew-success-fg, #166534);
}
.phpew-admin-flash--error {
  background: var(--phpew-error-bg, #fee2e2);
  color:      var(--phpew-error-fg, #b91c1c);
}

.phpew-admin-meta-list { display: block; }

.phpew-admin-form-inline { display: inline; }

/* Signals form fields: inline rows (a control + its emit button on one line)
   and the live preview frame. */
.phpew-form-row--inline {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 12px;
}
.phpew-form-signal-btn { margin-bottom: 2px; }
/* Preview: the wrapper clips overflow so the iframe's scrollbar (which lives in
   the extra 17px of iframe width) is hidden, while wheel-scroll still works --
   overflow:hidden is on the WRAPPER, never on the scrollable iframe. */
.phpew-form-iframe-wrap {
  width: 100%;
  height: 460px;
  overflow: hidden;
  border: 1px solid var(--phpew-border, #d1d5db);
  border-radius: var(--phpew-radius, .25rem);
  background: #fff;
  margin-top: .5rem;
}
.phpew-form-iframe {
  width: calc(100% + 17px);
  height: 100%;
  border: 0;
  display: block;
}

/* phpew_forum — default styles.
   Bundled into the theme stylesheet via ThemeManager::addExtensionCss()
   so no separate HTTP request is needed. All values use host theme tokens;
   override via PHPewStyle's token editor or advanced_css. */

/* ── Breadcrumb ──────────────────────────────────────────────────────── */

.phpew-forum-breadcrumb {
    margin-bottom: var(--phpew-gap);
    font-size: var(--phpew-fs-sm);
    color: var(--phpew-muted);
}

.phpew-forum-breadcrumb a {
    color: var(--phpew-link);
    text-decoration: none;
}

.phpew-forum-breadcrumb a:hover {
    text-decoration: underline;
}

/* ── Page header ─────────────────────────────────────────────────────── */

.phpew-forum-header {
    margin-bottom: var(--phpew-gap-lg);
}

.phpew-forum-header h1,
.phpew-forum-header h2 {
    margin: 0 0 var(--phpew-gap-sm);
    line-height: var(--phpew-lh-tight);
}

.phpew-forum-actions {
    margin-top: var(--phpew-gap-sm);
}

.phpew-forum-mod-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--phpew-gap-sm);
    margin-top: var(--phpew-gap-sm);
}

/* ── Shared meta text ────────────────────────────────────────────────── */

.phpew-forum-meta {
    font-size: var(--phpew-fs-sm);
    color: var(--phpew-muted);
}

/* ── Sticky / locked flag badge ──────────────────────────────────────── */

.phpew-forum-flag {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: var(--phpew-fs-xs);
    font-weight: 600;
    vertical-align: middle;
    background: var(--phpew-surface);
    color: var(--phpew-muted);
    border: 1px solid var(--phpew-border);
}

/* ── Category list ───────────────────────────────────────────────────── */

.phpew-forum-categories {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--phpew-gap-sm);
}

.phpew-forum-category {
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius);
    background: var(--phpew-card-bg);
    box-shadow: var(--phpew-shadow-sm);
}

.phpew-forum-category > a {
    display: block;
    padding: var(--phpew-gap);
    text-decoration: none;
    color: inherit;
}

.phpew-forum-category > a:hover {
    background: var(--phpew-surface);
    border-radius: var(--phpew-radius);
}

.phpew-forum-category h2 {
    margin: 0 0 0.25rem;
    font-size: var(--phpew-fs-lg);
    color: var(--phpew-fg);
}

.phpew-forum-category-desc {
    margin: 0 0 0.35rem;
    font-size: var(--phpew-fs-sm);
    color: var(--phpew-muted);
}

/* ── Thread list ─────────────────────────────────────────────────────── */

.phpew-forum-threads {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius);
    overflow: hidden;
}

.phpew-forum-thread {
    border-bottom: 1px solid var(--phpew-border);
    background: var(--phpew-card-bg);
}

.phpew-forum-thread:last-child {
    border-bottom: 0;
}

.phpew-forum-thread.is-sticky {
    background: var(--phpew-surface);
}

.phpew-forum-thread.is-locked {
    opacity: 0.8;
}

.phpew-forum-thread > a {
    display: block;
    padding: 0.65rem var(--phpew-gap);
    text-decoration: none;
    color: inherit;
}

.phpew-forum-thread > a:hover {
    background: var(--phpew-surface);
}

.phpew-forum-thread h3 {
    margin: 0 0 0.2rem;
    font-size: var(--phpew-fs-base);
    font-weight: 600;
    color: var(--phpew-fg);
}

/* ── Posts list ──────────────────────────────────────────────────────── */

.phpew-forum-posts {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--phpew-gap);
}

.phpew-forum-post {
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius);
    background: var(--phpew-card-bg);
    box-shadow: var(--phpew-shadow-sm);
    overflow: hidden;
}

.phpew-forum-post-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem var(--phpew-gap);
    background: var(--phpew-surface);
    border-bottom: 1px solid var(--phpew-border);
    font-size: var(--phpew-fs-sm);
}

.phpew-forum-post-author {
    font-weight: 600;
    color: var(--phpew-fg);
}

.phpew-forum-post-author a {
    color: var(--phpew-link);
    text-decoration: none;
}

.phpew-forum-post-author a:hover {
    text-decoration: underline;
}

.phpew-forum-post-date,
.phpew-forum-post-edited {
    color: var(--phpew-muted);
    font-size: var(--phpew-fs-xs);
}

.phpew-forum-post-reply {
    margin-left: auto;
}

/* ── Post body (rendered Markdown) ───────────────────────────────────── */

.phpew-forum-post-body {
    padding: var(--phpew-gap);
    line-height: var(--phpew-lh-base);
    color: var(--phpew-fg);
    overflow-wrap: break-word;
}

.phpew-forum-post-body p { margin: 0 0 0.75rem; }
.phpew-forum-post-body p:last-child { margin-bottom: 0; }

.phpew-forum-post-body h1,
.phpew-forum-post-body h2,
.phpew-forum-post-body h3,
.phpew-forum-post-body h4 {
    margin: 1rem 0 0.4rem;
    line-height: var(--phpew-lh-tight);
}

.phpew-forum-post-body ul,
.phpew-forum-post-body ol {
    margin: 0 0 0.75rem;
    padding-left: 1.5rem;
}

.phpew-forum-post-body li { margin-bottom: 0.2rem; }

.phpew-forum-post-body a {
    color: var(--phpew-link);
    text-decoration: underline;
}

.phpew-forum-post-body blockquote {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--phpew-border-strong);
    color: var(--phpew-muted);
    background: var(--phpew-surface);
    border-radius: 0 var(--phpew-radius-sm) var(--phpew-radius-sm) 0;
}

.phpew-forum-post-body code {
    font-family: var(--phpew-font-mono);
    font-size: 0.875em;
    background: var(--phpew-surface);
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    padding: 0.1em 0.35em;
}

.phpew-forum-post-body pre {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    background: var(--phpew-surface);
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius);
    overflow-x: auto;
}

.phpew-forum-post-body pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: var(--phpew-fs-sm);
}

/* Imported posts inline full-resolution images (XenForo spoilers / attachments
   came across as plain Markdown images). With no constraint they render at
   native size and blow past the column. Cap to the column width and a sane
   height so a screenshot reads as an inline thumbnail. */
.phpew-forum-post-body img,
.phpew-forum-post-signature img {
    max-width: 100%;
    max-height: 24rem;
    height: auto;
    border-radius: var(--phpew-radius-sm);
}

/* Inline video players (YouTube links upgraded to embeds). Keep a 16:9 box
   capped to a readable width so a video doesn't dominate the column. */
.phpew-forum-embed {
    aspect-ratio: 16 / 9;
    width: 100%;
    max-width: 40rem;
    margin: 0.75rem 0;
}
.phpew-forum-embed iframe {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: var(--phpew-radius);
}

/* ── Post actions (votes + edit/delete) ──────────────────────────────── */

.phpew-forum-post-actions {
    display: flex;
    align-items: center;
    gap: var(--phpew-gap);
    padding: 0.4rem var(--phpew-gap);
    border-top: 1px solid var(--phpew-border);
    background: var(--phpew-surface);
}

.phpew-forum-votes {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.phpew-forum-vote-btn {
    background: none;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    padding: 0.2rem 0.4rem;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    color: var(--phpew-muted);
    transition: background 120ms ease, border-color 120ms ease;
}

.phpew-forum-vote-btn:hover {
    background: var(--phpew-card-bg);
    border-color: var(--phpew-border-strong);
}

.phpew-forum-vote-up.is-active {
    background: var(--phpew-success-bg);
    border-color: var(--phpew-success);
    color: var(--phpew-success);
}

.phpew-forum-vote-down.is-active {
    background: var(--phpew-error-bg);
    border-color: var(--phpew-error);
    color: var(--phpew-error);
}

.phpew-forum-vote-score {
    font-size: var(--phpew-fs-sm);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    min-width: 1.5rem;
    text-align: center;
    color: var(--phpew-fg);
}

.phpew-forum-owner-actions {
    display: flex;
    gap: var(--phpew-gap-sm);
    margin-left: auto;
}

/* ── Forms ───────────────────────────────────────────────────────────── */

.phpew-forum-form {
    display: flex;
    flex-direction: column;
    gap: var(--phpew-gap);
    margin-top: var(--phpew-gap-lg);
}

.phpew-forum-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    font-size: var(--phpew-fs-sm);
    font-weight: 500;
    color: var(--phpew-fg);
}

.phpew-forum-field input[type="text"],
.phpew-forum-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-surface);
    color: var(--phpew-fg);
    font-family: inherit;
    font-size: var(--phpew-fs-base);
    resize: vertical;
}

.phpew-forum-field input[type="text"]:focus,
.phpew-forum-field textarea:focus {
    outline: 2px solid var(--phpew-focus-ring);
    outline-offset: -1px;
    border-color: var(--phpew-accent);
}

.phpew-forum-form-actions {
    display: flex;
    gap: var(--phpew-gap-sm);
    align-items: center;
}

.phpew-forum-format-hint {
    margin: 0;
    font-size: var(--phpew-fs-xs);
}

/* ── Markdown toolbar ────────────────────────────────────────────────── */

.phpew-forum-md-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    margin-bottom: 0.25rem;
}

.phpew-forum-md-toolbar button {
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-card-bg);
    color: var(--phpew-fg);
    font-size: var(--phpew-fs-xs);
    font-family: inherit;
    cursor: pointer;
    line-height: 1.4;
}

.phpew-forum-md-toolbar button:hover {
    background: var(--phpew-surface);
    border-color: var(--phpew-border-strong);
}

/* Image upload label — styled to look like the other toolbar buttons. */
.phpew-forum-md-toolbar-upload {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.55rem;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-card-bg);
    color: var(--phpew-fg);
    font-size: var(--phpew-fs-xs);
    cursor: pointer;
    line-height: 1.4;
    user-select: none;
}

.phpew-forum-md-toolbar-upload:hover {
    background: var(--phpew-surface);
    border-color: var(--phpew-border-strong);
}

.phpew-forum-md-toolbar-upload input[type="file"] {
    display: none;
}

.phpew-forum-md-toolbar-upload.is-uploading {
    opacity: 0.6;
    pointer-events: none;
}

.phpew-forum-md-toolbar-upload.is-error {
    border-color: var(--phpew-danger, #c0392b);
    color: var(--phpew-danger, #c0392b);
}

/* The live-preview pane reuses phpew-forum-post-body styles. */
.phpew-forum-preview {
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-surface);
    min-height: 4rem;
}

/* ── Search ──────────────────────────────────────────────────────────── */

.phpew-forum-search {
    display: flex;
    gap: var(--phpew-gap-sm);
    margin-bottom: var(--phpew-gap-lg);
}

.phpew-forum-search-input {
    flex: 1;
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-surface);
    color: var(--phpew-fg);
    font-size: var(--phpew-fs-base);
    font-family: inherit;
}

.phpew-forum-search-input:focus {
    outline: 2px solid var(--phpew-focus-ring);
    outline-offset: -1px;
    border-color: var(--phpew-accent);
}

.phpew-forum-search-section {
    margin-bottom: var(--phpew-gap-lg);
}

.phpew-forum-search-section h2 {
    margin: 0 0 var(--phpew-gap-sm);
    font-size: var(--phpew-fs-base);
    color: var(--phpew-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phpew-forum-search-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius);
    overflow: hidden;
}

.phpew-forum-search-list li {
    padding: 0.5rem var(--phpew-gap);
    border-bottom: 1px solid var(--phpew-border);
    background: var(--phpew-card-bg);
}

.phpew-forum-search-list li:last-child {
    border-bottom: 0;
}

.phpew-forum-search-list a {
    color: var(--phpew-link);
    text-decoration: none;
}

.phpew-forum-search-list a:hover {
    text-decoration: underline;
}

.phpew-forum-search-post-link {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.phpew-forum-search-post-meta {
    font-size: var(--phpew-fs-xs);
    color: var(--phpew-muted);
}

.phpew-forum-search-post-snippet {
    font-size: var(--phpew-fs-sm);
    color: var(--phpew-fg);
}

/* ── User profile ────────────────────────────────────────────────────── */

.phpew-forum-stats {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 0.35rem var(--phpew-gap);
    margin: 0 0 var(--phpew-gap-lg);
    font-size: var(--phpew-fs-sm);
}

.phpew-forum-stats dt {
    color: var(--phpew-muted);
    font-weight: 500;
}

.phpew-forum-stats dd {
    margin: 0;
    color: var(--phpew-fg);
}

.phpew-forum-stats-section {
    margin-bottom: var(--phpew-gap-lg);
}

.phpew-forum-stats-section h2 {
    margin: 0 0 var(--phpew-gap-sm);
    font-size: var(--phpew-fs-base);
    color: var(--phpew-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phpew-forum-stats-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.phpew-forum-stats-list li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    font-size: var(--phpew-fs-sm);
}

.phpew-forum-stats-list a {
    color: var(--phpew-link);
    text-decoration: none;
}

.phpew-forum-stats-list a:hover {
    text-decoration: underline;
}

/* ── Sidebar sections ────────────────────────────────────────────────── */

.phpew-forum-sidebar-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.phpew-forum-sidebar-list a {
    font-size: var(--phpew-fs-sm);
    color: var(--phpew-link);
    text-decoration: none;
}

.phpew-forum-sidebar-list a:hover {
    text-decoration: underline;
}

/* ── Pagination ──────────────────────────────────────────────────────── */

.phpew-forum-pagination {
    display: flex;
    align-items: center;
    gap: var(--phpew-gap-sm);
    margin: var(--phpew-gap) 0;
    font-size: var(--phpew-fs-sm);
}

.phpew-forum-pagination-info {
    color: var(--phpew-muted);
}

.phpew-forum-pagination .phpew-btn[aria-disabled="true"] {
    opacity: 0.4;
    pointer-events: none;
}

/* ── Report link ─────────────────────────────────────────────────────── */

.phpew-forum-report-link {
    margin-left: auto;
    font-size: var(--phpew-fs-xs);
    color: var(--phpew-muted);
}

.phpew-forum-report-link:hover {
    color: var(--phpew-error);
}

/* ── Avatars ─────────────────────────────────────────────────────────── */

.phpew-forum-avatar {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.phpew-forum-avatar-lg {
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* When the profile header contains a large avatar, lay out as a flex row. */
.phpew-forum-header:has(.phpew-forum-avatar-lg) {
    display: flex;
    align-items: center;
    gap: var(--phpew-gap);
    flex-wrap: wrap;
}

.phpew-forum-header:has(.phpew-forum-avatar-lg) h1 {
    margin-bottom: 0;
}

/* ── Levels ──────────────────────────────────────────────────────────── */

.phpew-forum-level {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.1rem 0.45rem;
    border-radius: 999px;
    font-size: var(--phpew-fs-xs);
    font-weight: 600;
    background: var(--phpew-surface);
    border: 1px solid var(--phpew-border);
    color: var(--phpew-muted);
    white-space: nowrap;
}

.phpew-forum-level-icon {
    line-height: 1;
}

/* ── Badges (post header inline pills) ───────────────────────────────── */

.phpew-forum-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-items: center;
}

.phpew-forum-badge {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: var(--phpew-fs-xs);
    font-weight: 600;
    background: var(--phpew-surface);
    border: 1px solid var(--phpew-accent);
    color: var(--phpew-fg);
    white-space: nowrap;
}

/* ── Badge list (user profile) ───────────────────────────────────────── */

.phpew-forum-badge-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--phpew-gap-sm);
}

.phpew-forum-badge-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.phpew-forum-badge-name {
    font-size: var(--phpew-fs-sm);
    font-weight: 500;
    color: var(--phpew-fg);
}

.phpew-forum-badge-count {
    font-size: var(--phpew-fs-xs);
    color: var(--phpew-muted);
}

/* ── Subcategories ───────────────────────────────────────────────────── */

/* Nested under a root category card, separated from the parent link. */
.phpew-forum-subcategories {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--phpew-border);
}

.phpew-forum-subcategory + .phpew-forum-subcategory {
    border-top: 1px solid var(--phpew-border);
}

.phpew-forum-subcategory > a {
    display: flex;
    align-items: baseline;
    gap: var(--phpew-gap-sm);
    padding: 0.4rem var(--phpew-gap) 0.4rem calc(var(--phpew-gap) * 2);
    text-decoration: none;
    color: inherit;
    font-size: var(--phpew-fs-sm);
}

.phpew-forum-subcategory > a:hover {
    background: var(--phpew-surface);
}

.phpew-forum-subcategory-title {
    font-weight: 500;
    color: var(--phpew-link);
}

/* ── Responsive ──────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    .phpew-forum-post-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .phpew-forum-post-reply {
        margin-left: 0;
    }
    .phpew-forum-post-actions {
        flex-wrap: wrap;
    }
    .phpew-forum-owner-actions {
        margin-left: 0;
    }
    .phpew-forum-stats {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .phpew-forum-stats dt {
        margin-top: 0.4rem;
    }
}

/* ── Profile: edit link, avatar drop-zone, signature, bio ──────────────── */
.phpew-forum-edit-profile {
    margin-left: auto;
    align-self: center;
}
.phpew-forum-profile-form .phpew-avatar-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    min-height: 150px;
    padding: 1.25rem;
    border: 2px dashed var(--phpew-border, rgba(128, 128, 128, 0.4));
    border-radius: 10px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.phpew-forum-profile-form .phpew-avatar-drop.is-dragover {
    border-color: var(--phpew-accent, #66ccff);
    background: var(--phpew-accent-soft, rgba(102, 204, 255, 0.08));
}
.phpew-avatar-preview {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
    background: var(--phpew-surface-2, rgba(128, 128, 128, 0.12));
}
.phpew-avatar-drop-hint {
    color: var(--phpew-muted, #8a8a8a);
    font-size: 0.9rem;
}
.phpew-avatar-browse {
    text-decoration: underline;
}
.phpew-forum-post-signature {
    margin-top: 0.6rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--phpew-border, rgba(128, 128, 128, 0.25));
    font-size: 0.85em;
    color: var(--phpew-muted, #8a8a8a);
}
.phpew-forum-post-signature p {
    margin: 0.2rem 0;
}
.phpew-forum-bio-body {
    line-height: 1.55;
}
.phpew-account-forum-profile {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1rem;
}
.phpew-account-forum-profile-fields {
    flex: 1 1 240px;
    margin: 0;
}

/* ── Datasources pane (Admin → Section types) ────────────────────────── */

.phpew-ds-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  margin: 1rem 0;
}
.phpew-ds-group {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 0.875rem 1rem 1rem;
}
.phpew-ds-group-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 0.5rem 0;
}
.phpew-ds-group-title {
  margin: 0;
  font-size: var(--phpew-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phpew-muted);
}
.phpew-btn-ghost {
  background: none;
  border: none;
  padding: 0;
  font-size: 0.75rem;
  color: var(--phpew-accent);
  cursor: pointer;
  font-weight: 500;
}
.phpew-btn-ghost:hover { text-decoration: underline; }
.phpew-ds-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.phpew-ds-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.375rem 0;
  border-bottom: 1px solid var(--phpew-border);
}
.phpew-ds-row:last-child { border-bottom: none; }
.phpew-ds-toggle {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  font-weight: 400;
}
.phpew-ds-toggle input[type="checkbox"] {
  flex: 0 0 auto;
  margin: 0;
}
.phpew-ds-name {
  display: flex;
  flex-direction: column;
  gap: 0.0625rem;
  min-width: 0;
}
.phpew-ds-label {
  font-weight: 600;
  color: var(--phpew-fg);
  font-size: var(--phpew-fs-sm);
  line-height: 1.2;
}
.phpew-ds-slug {
  font-size: 0.6875rem;
  color: var(--phpew-muted);
  font-family: var(--phpew-font-mono);
  background: none;
  padding: 0;
}
.phpew-ds-count {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--phpew-accent-fg);
  background: var(--phpew-accent);
  padding: 1px 6px;
  border-radius: 999px;
  margin-left: auto;
}
.phpew-ds-count--empty {
  background: var(--phpew-surface);
  color: var(--phpew-muted);
  font-weight: 400;
}
.phpew-ds-tpl {
  flex: 0 0 auto;
  font-size: 0.6875rem;
  color: var(--phpew-muted);
  font-family: var(--phpew-font-mono);
  background: var(--phpew-surface);
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}
.phpew-ds-actions {
  margin: 1rem 0 0;
  padding-top: 0.875rem;
  border-top: 1px solid var(--phpew-border);
}

/* ── Pages pane: sub-page layouts (param rules) ───────────────────────── */

.ppl-intro       { margin-top: 0; }
.ppl-drag-col    { width: 2rem; }
.ppl-empty-cell  { padding: 0.75rem; }
.ppl-actions     { gap: 0.5rem; }
.ppl-drag        { cursor: grab; color: var(--phpew-muted); }
.ppl-drag:active { cursor: grabbing; }

/* ── CSP-safe utility classes (replacements for inline style="…") ──────── */

.phpew-inline           { display: inline; }
.phpew-hidden           { display: none; }
.phpew-indent           { margin-left: 1rem; }
.phpew-mt-lg            { margin-top: 2rem; }
.phpew-mb-sm            { margin-bottom: 0.5rem; }
.phpew-text-success     { color: var(--phpew-success, #22c55e); }
.phpew-form--narrow     { max-width: 28rem; }
.phpew-notice--inline   { margin: 0; padding: 0.1rem 0.4rem; }
.phpew-inline-label     { display: flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.phpew-form-actions {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  position: sticky;
  bottom: 0;
  z-index: 20;
  background: var(--phpew-bg);
  border-top: 1px solid var(--phpew-border);
  padding: 0.75rem 0;
  margin-top: 1.5rem;
}
.phpew-form-actions--tight { gap: 0.75rem; display: flex; }
.phpew-template-desc-field { flex: 1 1 300px; }
.phpew-col-w2           { width: 2rem; }

/* Param-layouts table — widen value/layout columns and let inputs fill them. */
#ppl-table              { width: 100%; table-layout: fixed; }
#ppl-table th:nth-child(2), #ppl-table td:nth-child(2) { width: 20%; } /* param */
#ppl-table th:nth-child(3), #ppl-table td:nth-child(3) { width: 28%; } /* value */
#ppl-table th:nth-child(4), #ppl-table td:nth-child(4) { width: 32%; } /* layout */
#ppl-table input,
#ppl-table select       { width: 100%; box-sizing: border-box; }

/* Behaviors pane — row action cluster */
.phpew-behaviors-actions {
  white-space: nowrap;
  display: flex;
  gap: 0.375rem;
  align-items: center;
}

/* ── Content pane: Cards view ─────────────────────────────────────────── */

.phpew-content-toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 1.25rem;
}

.phpew-content-viewtoggle {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: 6px;
  overflow: hidden;
}
.phpew-content-viewtoggle .phpew-btn {
  border-radius: 0;
  border: none;
  border-right: 1px solid var(--phpew-border, #ddd);
  padding: 0.4rem 0.85rem;
  font-size: 0.85rem;
}
.phpew-content-viewtoggle .phpew-btn:last-child { border-right: none; }
.phpew-content-viewtoggle .phpew-btn--active {
  background: var(--phpew-accent, #2563eb);
  color: var(--phpew-accent-fg, #fff);
}

.phpew-content-empty { padding: 2rem; text-align: center; }

.phpew-content-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1.25rem;
}

.phpew-content-card {
  display: flex;
  flex-direction: column;
  background: var(--phpew-card-bg, #fff);
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.12s, box-shadow 0.12s;
  position: relative;
}
.phpew-content-card:hover {
  border-color: var(--phpew-accent, #2563eb);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--phpew-fg, #000) 10%, transparent);
}

.phpew-content-card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  background: var(--phpew-surface, #f4f4f5);
  overflow: hidden;
  text-decoration: none;
}
.phpew-content-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.phpew-content-card-thumb-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 3rem;
  font-weight: 700;
  color: color-mix(in srgb, var(--phpew-fg, #111) 25%, var(--phpew-surface, #f4f4f5));
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
}

.phpew-content-card-status {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phpew-content-card-status.is-published {
  background: color-mix(in srgb, var(--phpew-success, #16a34a) 22%, var(--phpew-card-bg, #fff));
  color: var(--phpew-success, #16a34a);
}
.phpew-content-card-status.is-draft {
  background: color-mix(in srgb, var(--phpew-muted, #6b7280) 22%, var(--phpew-card-bg, #fff));
  color: var(--phpew-muted, #6b7280);
}
.phpew-content-card-featured {
  position: absolute;
  top: 0.5rem;
  left: 0.5rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: color-mix(in srgb, var(--phpew-accent, #f59e0b) 22%, var(--phpew-card-bg, #fff));
  color: var(--phpew-accent, #f59e0b);
}
.phpew-content-card.is-featured {
  border-color: var(--phpew-accent, #f59e0b);
}
.phpew-content-filter-featured {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: var(--phpew-fs-sm, 0.875rem);
  white-space: nowrap;
  cursor: pointer;
}
.phpew-admin-editor-row--checkboxes {
  display: flex;
  gap: 0.5rem 1.5rem;
  flex-wrap: wrap;
  align-items: center;
}
/* The "Who can view this page" heading sits on its own full-width line above
   the checkbox row. */
.phpew-admin-editor-row--checkboxes .phpew-admin-checkbox-heading {
  flex-basis: 100%;
  margin: 0 0 0.15rem;
}
/* One role = one inline unit: checkbox + label on the same line, whole thing
   clickable. Replaces the old bare-input + block-field-label that stacked. */
.phpew-admin-checkbox-row {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  font-weight: 400;
  margin: 0;
}

.phpew-content-card-body {
  padding: 0.85rem 0.9rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
}
.phpew-content-card-type {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-accent, #2563eb);
}
.phpew-content-card-title {
  font-size: 1rem;
  line-height: 1.25;
  margin: 0;
  font-weight: 700;
}
.phpew-content-card-title a {
  color: var(--phpew-fg, #111);
  text-decoration: none;
}
.phpew-content-card-title a:hover { color: var(--phpew-accent, #2563eb); }
.phpew-content-card-slug {
  font-size: 0.75rem;
  color: var(--phpew-muted, #6b7280);
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
}
.phpew-content-card-appears {
  font-size: 0.75rem;
  color: var(--phpew-accent, #2563eb);
  text-decoration: none;
  margin-top: 0.15rem;
}
.phpew-content-card-appears:hover { text-decoration: underline; }

.phpew-content-card-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.9rem 0.9rem;
  flex-wrap: wrap;
}
.phpew-content-card-actions .phpew-btn {
  flex: 1;
  text-align: center;
  font-size: 0.78rem;
  padding: 0.35rem 0.5rem;
}
.phpew-content-card-actions form { flex: 1; display: flex; }
.phpew-content-card-actions form button { width: 100%; }

/* ── Revisions / Recent edits panel ──────────────────────────────────── */

.phpew-behaviors-history,
.phpewstyle-history {
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: 6px;
  background: var(--phpew-surface, #f4f4f5);
}
.phpew-behaviors-history summary,
.phpewstyle-history summary {
  cursor: pointer;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.phpew-behaviors-history-table,
.phpewstyle-history-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.85rem;
}
.phpew-behaviors-history-table th,
.phpewstyle-history-table th {
  text-align: left;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted, #6b7280);
  padding: 0.4rem 0.5rem;
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-behaviors-history-table td,
.phpewstyle-history-table td {
  padding: 0.45rem 0.5rem;
  border-bottom: 1px dashed var(--phpew-border, #ddd);
  vertical-align: top;
}
.phpew-behaviors-history-preview,
.phpewstyle-history-preview {
  font-size: 0.75rem;
  color: var(--phpew-muted, #6b7280);
  display: block;
  max-width: 60ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.phpewstyle-history-heading {
  margin: 1rem 0 0.25rem;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted, #6b7280);
}
.phpewstyle-history-blurb {
  font-size: 0.8rem;
  color: var(--phpew-muted, #6b7280);
  margin: 0.25rem 0 0.75rem;
}
.phpewstyle-history-restore { display: inline; }

.phpew-section-heading {
  margin: 1.5rem 0 0.5rem;
  font-size: 1.1rem;
  /* No border-top — used to paint a thin horizontal rule above
   * every heading, which looked OK in admin panes but jarring on
   * public starter pages where the rule sliced across every card.
   * Drop. Admin panes that genuinely want a section divider can
   * use .phpew-stack-section or a plain <hr>. */
}

/* ── Forms pane: field editor ─────────────────────────────────────── */
.phpew-form-fields-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.phpew-form-field-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.75rem;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: 4px;
}
.phpew-form-field-row-handle {
  cursor: grab;
  padding: 0.25rem 0.25rem 0 0;
  color: var(--phpew-muted-color, #999);
  font-size: 1rem;
  line-height: 1;
  user-select: none;
}
.phpew-form-field-row-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem 1rem;
}
/* Options row: hidden by default, visible when type needs options */
.phpew-form-field-options-row { display: none; }
.phpew-form-field-row[data-type="select"]      .phpew-form-field-options-row,
.phpew-form-field-row[data-type="multiselect"] .phpew-form-field-options-row,
.phpew-form-field-row[data-type="radio"]       .phpew-form-field-options-row {
  display: block;
}
.phpew-form-field-file-row { display: none; }
.phpew-form-field-row[data-type="file"] .phpew-form-field-file-row { display: block; }
/* Jack config: hidden unless the field is a jack; then only the direction-
   relevant sub-group (send vs receive) shows. */
.phpew-form-field-jack-row { display: none; }
.phpew-form-field-row[data-type="jack"] .phpew-form-field-jack-row { display: block; }
.phpew-form-field-jack-send,
.phpew-form-field-jack-receive { display: none; }
.phpew-form-field-jack-row[data-jackdir="send"]    .phpew-form-field-jack-send,
.phpew-form-field-jack-row[data-jackdir="receive"] .phpew-form-field-jack-receive { display: block; }
/* Auto-reply fields: hidden when auto-reply is off */
.phpew-auto-reply-fields[data-hidden] { display: none; }

/* ── Wizard step 3: slot-filling UI ──────────────────────────────── */
.phpew-wizard-step3 {
  max-width: 640px;
}
.phpew-wizard-step3-header {
  margin-bottom: 1.5rem;
}
.phpew-wizard-step-label {
  font-size: var(--phpew-fs-sm, 0.875rem);
  color: var(--phpew-muted-color, #888);
  margin: 0 0 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phpew-wizard-slots {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  margin-bottom: 2rem;
}
.phpew-wizard-slot {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.phpew-wizard-slot-label {
  font-weight: 600;
  font-size: var(--phpew-fs-sm, 0.875rem);
}
.phpew-wizard-slot-controls {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.phpew-wizard-slot-select {
  flex: 1;
}
.phpew-wizard-step3-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 1rem;
}
.phpew-wizard-skip {
  font-size: var(--phpew-fs-sm, 0.875rem);
}
.phpew-btn--lg {
  padding: 0.65rem 1.5rem;
  font-size: 1rem;
}

/* Forum admin pane utilities — replaces inline style="" (CSP blocks those). */
.phpew-input-w-xs { width: 8rem; }
.phpew-input-w-sm { width: 20rem; }
.phpew-input-w-md { width: 24rem; }
.phpew-input-w-lg { width: 28rem; }
.phpew-input-w-xl { width: 36rem; max-width: 100%; }
.phpew-flex-row   { display: flex; gap: 0.5rem; align-items: center; }
.phpew-filter-row { display: flex; gap: 0.5rem; align-items: flex-end; margin-bottom: 1rem; }
.phpew-hr-spaced  { margin: 1.5rem 0; }
.phpew-nowrap     { white-space: nowrap; }
.phpew-cell-actions { white-space: nowrap; display: flex; gap: 0.25rem; }
.phpew-btn-sp     { margin-right: 0.25rem; }
.phpew-muted-sm   { color: var(--phpew-muted, #888); font-size: 0.85em; }
.phpew-weight-normal { font-weight: normal; }
.phpew-mt-row     { margin: 0.25rem 0 1rem; }
.phpew-mb-1       { margin-bottom: 1rem; }
.phpew-mb-q       { margin-bottom: 0.25rem; }

/* ──────────────────────────────────────────────────────────────────
   Admin pane polish — applies to every pane under .phpew-admin-content
   via cascade. No PHP changes needed. Matches the design language of
   the Style + Layout editors: generous spacing, card grouping,
   typography hierarchy, consistent button stack, sticky action bars.
   ────────────────────────────────────────────────────────────────── */

/* Pane container: give every pane breathing room + a consistent rhythm.
   No max-width — panes (and their full-width inputs/tables) use the whole
   content area instead of being capped + left-aligned on wide screens. */
.phpew-admin-content {
  --pane-gap: 1.25rem;
  padding: 1.5rem 1.75rem 4rem;
}

/* Title + intro typography. Most panes lead with <h2> followed by a
   <p class="phpew-muted"> intro — give that pairing structure. */
.phpew-admin-content > h2:first-of-type,
.phpew-admin-content > h1:first-of-type {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--phpew-fg);
  padding-bottom: 0.875rem;
  border-bottom: 1px solid var(--phpew-border);
}
.phpew-admin-content > h2 {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  margin-top: 2rem;
  margin-bottom: 0.5rem;
  color: var(--phpew-fg);
}
.phpew-admin-content > h3 {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted);
  margin-top: 1.75rem;
  margin-bottom: 0.5rem;
}
.phpew-admin-content > h2 + p,
.phpew-admin-content > h1 + p {
  margin-top: 0;
  margin-bottom: 1.25rem;
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  line-height: 1.55;
  max-width: 60rem;
}

/* Code in intro prose — keep the same family as labels for visual rhyme. */
.phpew-admin-content > h2 + p code,
.phpew-admin-content > h1 + p code,
.phpew-admin-content p code {
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: 3px;
  padding: 0.05rem 0.35rem;
  font-size: 0.85em;
}

/* Form labels — the canonical .phpew-admin-editor-label gets a tighter
   weight + colour. Bare <label> elements are left alone (a lot of
   existing panes wrap an inline checkbox in a bare label and would
   look wrong with "label above input" treatment). */
.phpew-admin-content .phpew-admin-editor-label {
  display: block;
  font-size: var(--phpew-fs-sm);
  font-weight: 600;
  color: var(--phpew-fg);
  margin-top: 1rem;
}
.phpew-admin-content form > p {
  margin: 0.5rem 0 1rem;
}

/* Inputs: consistent shape + focus state, regardless of class. */
.phpew-admin-content input[type="text"],
.phpew-admin-content input[type="email"],
.phpew-admin-content input[type="password"],
.phpew-admin-content input[type="url"],
.phpew-admin-content input[type="number"],
.phpew-admin-content input[type="search"],
.phpew-admin-content input[type="date"],
.phpew-admin-content input[type="datetime-local"],
.phpew-admin-content input[type="time"],
.phpew-admin-content select,
.phpew-admin-content textarea {
  font: inherit;
  color: var(--phpew-fg);
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  line-height: 1.4;
  margin-top: 0.35rem;
  transition: border-color 80ms ease, box-shadow 80ms ease;
}
.phpew-admin-content input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="color"]):focus-visible,
.phpew-admin-content select:focus-visible,
.phpew-admin-content textarea:focus-visible {
  outline: none;
  border-color: var(--phpew-accent);
  box-shadow: 0 0 0 3px var(--phpew-focus-ring);
}
.phpew-admin-content textarea {
  min-height: 6rem;
  resize: vertical;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: 0.85em;
}

/* Tables — already styled in phpew_light, but a few admin-context tweaks. */
.phpew-admin-content .phpew-table {
  margin: 0.5rem 0 1.5rem;
}
.phpew-admin-content table:not([class]) {
  /* Plain unstyled tables in older panes — borrow phpew-table look. */
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  overflow: hidden;
  font-size: var(--phpew-fs-sm);
  margin: 0.5rem 0 1.5rem;
}
.phpew-admin-content table:not([class]) th,
.phpew-admin-content table:not([class]) td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--phpew-border);
}
.phpew-admin-content table:not([class]) th {
  background: var(--phpew-surface);
  font-weight: 600;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phpew-muted);
}
.phpew-admin-content table:not([class]) tbody tr:last-child td { border-bottom: none; }
.phpew-admin-content table:not([class]) tbody tr:hover {
  background: color-mix(in srgb, var(--phpew-surface) 50%, transparent);
}

/* Cards / panels — reusable container for grouped content. Wrap any
   logically-grouped block in <div class="phpew-card"> for an instant
   pane-quality container. Existing .phpew-ds-group, .phpew-pages-section-card,
   .phpew-content-card already follow this shape; this just generalises. */
.phpew-card {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1rem 1.125rem;
  margin: 0.5rem 0 1.25rem;
}
.phpew-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin: -0.25rem 0 0.5rem;
}
.phpew-card-title {
  margin: 0;
  font-size: var(--phpew-fs-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--phpew-muted);
}

/* Empty state — pane lists that have nothing to show. Drop in
   <div class="phpew-empty">…</div> for a centred muted placeholder. */
.phpew-empty {
  text-align: center;
  padding: 2.5rem 1.5rem;
  background: var(--phpew-card-bg);
  border: 1px dashed var(--phpew-border);
  border-radius: var(--phpew-radius);
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  margin: 0.5rem 0 1.25rem;
}

/* Notices — consistent positive/negative/info colouring on top of any
   .phpew-notice block. The base class lives in phpew_light; this adds
   variants the admin panes use. */
.phpew-admin-content .phpew-notice {
  margin: 0.75rem 0;
  padding: 0.625rem 0.875rem;
  border-radius: var(--phpew-radius);
  border-left: 3px solid var(--phpew-border);
  background: var(--phpew-surface);
  font-size: var(--phpew-fs-sm);
}
.phpew-admin-content .phpew-notice--ok    { border-left-color: var(--phpew-success); }
.phpew-admin-content .phpew-notice--warn  { border-left-color: var(--phpew-warning, #d97706); }
.phpew-admin-content .phpew-notice--error { border-left-color: var(--phpew-error); }

/* Inline status pills (Live/Draft, Auth "Yes", domain state) in admin tables.
   The --inline modifier must beat .phpew-admin-content .phpew-notice on
   specificity, so it carries the same admin-content prefix. Renders a compact
   tinted badge -- text + subtle fill + full-perimeter border in the status
   colour -- not the full callout box with a heavy left accent. */
.phpew-admin-content .phpew-notice--inline {
  display: inline-block;
  margin: 0;
  padding: 0.05rem 0.5rem;
  border: 1px solid var(--phpew-border);
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.55;
  vertical-align: baseline;
  background: transparent;
}
.phpew-admin-content .phpew-notice--inline.phpew-notice--ok {
  color: var(--phpew-success);
  border-color: color-mix(in srgb, var(--phpew-success) 45%, transparent);
  background: color-mix(in srgb, var(--phpew-success) 14%, transparent);
}
.phpew-admin-content .phpew-notice--inline.phpew-notice--warn {
  color: var(--phpew-warning, #d97706);
  border-color: color-mix(in srgb, var(--phpew-warning, #d97706) 45%, transparent);
  background: color-mix(in srgb, var(--phpew-warning, #d97706) 14%, transparent);
}
.phpew-admin-content .phpew-notice--inline.phpew-notice--error {
  color: var(--phpew-error);
  border-color: color-mix(in srgb, var(--phpew-error) 45%, transparent);
  background: color-mix(in srgb, var(--phpew-error) 14%, transparent);
}

/* Button hierarchy — already defined in phpew_light, but lock in the
   secondary "ghost" button class panes already use ad-hoc. */
.phpew-btn--ghost {
  background: transparent;
  color: var(--phpew-fg);
  border-color: var(--phpew-border);
}
.phpew-btn--ghost:hover {
  background: var(--phpew-surface);
  border-color: var(--phpew-border);
  color: var(--phpew-fg);
}
.phpew-btn--sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}

/* Admin table action cells — a tidy, right-aligned button row instead of
   inline links + inline <form>s flowing with default whitespace on mismatched
   baselines. Buttons are compact and uniform; delete reads as a subtle danger
   tint with the same footprint, not a stark outline. */
.phpew-admin-table th,
.phpew-admin-table td { padding: 0.55rem 0.85rem; }   /* rows had only the 1px UA default */
.phpew-admin-table td { vertical-align: middle; }
.phpew-admin-table .phpew-table-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.375rem;
}
.phpew-admin-table .phpew-table-actions form { display: inline-flex; margin: 0; }
.phpew-admin-table .phpew-table-actions .phpew-btn {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
  border-radius: 6px;
}
/* Publish/Unpublish toggle: fixed width so swapping the label doesn't shift the
   Edit/Submissions columns out of alignment from row to row. */
.phpew-admin-table .phpew-table-actions .phpew-btn--toggle { min-width: 5.75rem; }
.phpew-admin-table .phpew-table-actions .phpew-btn--danger {
  color: var(--phpew-error);
  background: color-mix(in srgb, var(--phpew-error) 12%, transparent);
  border-color: color-mix(in srgb, var(--phpew-error) 40%, transparent);
}
.phpew-admin-table .phpew-table-actions .phpew-btn--danger:hover {
  background: color-mix(in srgb, var(--phpew-error) 22%, transparent);
  border-color: color-mix(in srgb, var(--phpew-error) 60%, transparent);
}

/* Action group at the bottom of forms — make sure the existing
   .phpew-form-actions sticky bar has a soft drop-shadow so it stands
   off the content visually when sticky. */
.phpew-admin-content .phpew-form-actions {
  padding: 0.85rem 0;
  border-top: 1px solid var(--phpew-border);
  background: color-mix(in srgb, var(--phpew-bg) 95%, transparent);
  backdrop-filter: blur(6px);
  box-shadow: 0 -8px 16px -12px color-mix(in srgb, var(--phpew-fg) 25%, transparent);
}

/* Pane-level toolbar pattern — when a pane has a row of filters + a
   primary action across the top, wrap in <div class="phpew-pane-toolbar">. */
.phpew-pane-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  margin: 0.25rem 0 1rem;
  padding: 0.625rem 0.75rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
}
.phpew-pane-toolbar > .phpew-spacer { flex: 1; }
.phpew-pane-toolbar input,
.phpew-pane-toolbar select { margin-top: 0; }

/* Content multi-select + bulk operations bar. */
.phpew-content-bulk-bar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  position: sticky;
  top: 0;
  z-index: 5;
  padding: 0.5rem 0.65rem;
  margin-bottom: 0.75rem;
  background: var(--phpew-card-bg, #fff);
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: 8px;
}
.phpew-content-bulk-bar .phpew-content-bulk-spacer { flex: 1; }
.phpew-content-bulk-bar button[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Per-card select checkbox, top-left corner. */
.phpew-content-card-select {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  z-index: 3;
  display: inline-flex;
  padding: 0.25rem;
  background: rgba(0, 0, 0, 0.35);
  border-radius: 6px;
  cursor: pointer;
}
.phpew-content-card-select input { margin: 0; cursor: pointer; }

/* phpew_wiggle — Wiggle Scene Builder UI */

/* Layer accent colours — the single source of truth (theme token). Both the CSS
   (layer headers/picker) and layerColor() in the JS read these; nothing hardcodes
   the colours anymore. Override per-theme to restyle layers. */
:root {
  --wiggle-layer-background: #475569;
  --wiggle-layer-midground:  #0f766e;
  --wiggle-layer-foreground: #b45309;
}

/* =========================================================
   App shell
   ========================================================= */

.pu-app {
  font-family: var(--phpew-font);
  color: var(--phpew-fg);
}

.pu-app--editor {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--phpew-dock-bottom, 0px));
  overflow: hidden;
  margin-left: var(--phpew-dock-left, 0px);
  margin-right: var(--phpew-dock-right, 0px);
  transition: none;
}

/* =========================================================
   Editor top bar
   ========================================================= */

.pu-editor-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  height: 44px;
  padding: 0 1rem;
  border-bottom: 1px solid var(--phpew-border);
  background: var(--phpew-card-bg);
  flex-shrink: 0;
}

.pu-back {
  color: var(--phpew-muted);
  text-decoration: none;
  font-size: var(--phpew-fs-sm);
  white-space: nowrap;
}

.pu-back:hover { color: var(--phpew-fg); }

.pu-editor-bar__name {
  flex: 1;
  font-weight: 600;
  font-size: var(--phpew-fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Three-panel split
   ========================================================= */

.pu-editor-split {
  display: flex;
  flex: 1;
  overflow: hidden;
}

/* =========================================================
   Sidebar (object list)
   ========================================================= */

.pu-sidebar {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  border-right: 1px solid var(--phpew-border);
  background: var(--phpew-card-bg);
}

/* Floating-panel mode: the sidebar uses the shared .phpew-panel chrome
   from phpew_content_browser, so the static flex-layout sizing has to
   yield. The titlebar stays fixed; the .pu-sidebar-body scrolls. */
.pu-sidebar.phpew-panel {
  width: 220px;
  height: 60vh;
  top: 80px;
  left: 16px;
  overflow: hidden;
  border-right: 1px solid var(--phpew-border);
}
.pu-sidebar-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}
.pu-props.phpew-panel {
  width: 240px;
  height: 60vh;
  top: 80px;
  right: 16px;
  overflow: hidden;
}
.pu-props-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 0.5rem;
}

/* Layer accent colors */
.pu-layer--background .pu-layer__header { border-left-color: var(--wiggle-layer-background, #475569); }
.pu-layer--midground  .pu-layer__header { border-left-color: var(--wiggle-layer-midground,  #0f766e); }
.pu-layer--foreground .pu-layer__header { border-left-color: var(--wiggle-layer-foreground, #b45309); }

.pu-layer__header {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.5rem 0.4rem 0.625rem;
  border-left: 3px solid var(--phpew-border-strong);
  background: var(--phpew-surface);
  border-bottom: 1px solid var(--phpew-border);
  position: sticky;
  top: 0;
  z-index: 1;
  cursor: pointer;
  user-select: none;
}
.pu-layer__name { flex: 1; }
.pu-layer__z {
  width: 38px;
  height: 20px;
  padding: 0 0.2rem;
  border: 1px solid var(--phpew-border);
  border-radius: 3px;
  background: var(--phpew-card-bg);
  color: var(--phpew-fg);
  font-family: var(--phpew-font-mono);
  font-size: 0.7rem;
  text-align: center;
}
.pu-layer__remove {
  width: 18px;
  height: 18px;
  border: 0;
  background: transparent;
  color: var(--phpew-muted);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  border-radius: 3px;
}
.pu-layer__remove:hover { background: var(--phpew-error, #dc2626); color: #fff; }

.pu-layer-add-row {
  padding: 0.4rem;
  display: flex;
  gap: 0.35rem;
  align-items: stretch;
}
.pu-layer-add-select {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.35rem 0.4rem;
  border: 1px solid var(--phpew-border-strong);
  border-radius: 4px;
  background: var(--phpew-surface, #18181b);
  color: var(--phpew-fg, #e4e4e7);
  font-size: 0.75rem;
  cursor: pointer;
}
.pu-layer-add-btn {
  flex: 0 0 auto;
  padding: 0.35rem 0.7rem;
  border: 1px dashed var(--phpew-border-strong);
  border-radius: 4px;
  background: transparent;
  color: var(--phpew-muted);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.pu-layer-add-btn:hover {
  border-color: var(--phpew-accent, #4f46e5);
  color: var(--phpew-accent, #4f46e5);
}

/* Layer picker popover — shown on drop-on-empty-canvas when no working
   layer is active. Floating, anchored to the cursor, click-outside dismiss. */
.pu-layer-picker {
  position: fixed;
  z-index: 200;
  min-width: 160px;
  background: var(--phpew-card-bg, #18181b);
  border: 1px solid var(--phpew-border, #3f3f46);
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  padding: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  user-select: none;
}
.pu-layer-picker-heading {
  padding: 0.2rem 0.55rem 0.3rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--phpew-muted, #71717a);
  border-bottom: 1px solid var(--phpew-border, #3f3f46);
  margin-bottom: 0.15rem;
}
.pu-layer-picker-btn {
  padding: 0.4rem 0.6rem;
  border: 0;
  background: transparent;
  color: var(--phpew-fg, #e4e4e7);
  font-family: var(--phpew-font, system-ui, sans-serif);
  font-size: 0.85rem;
  cursor: pointer;
  text-align: left;
  border-radius: 3px;
  border-left: 3px solid transparent;
}
.pu-layer-picker-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--phpew-accent, #4f46e5);
}
.pu-layer-picker-btn.pu-layer--background  { border-left-color: var(--wiggle-layer-background, #475569); }
.pu-layer-picker-btn.pu-layer--midground   { border-left-color: var(--wiggle-layer-midground,  #0f766e); }
.pu-layer-picker-btn.pu-layer--foreground  { border-left-color: var(--wiggle-layer-foreground, #b45309); }

.pu-layer__header:hover { background: var(--phpew-card-bg); }

.pu-layer--active .pu-layer__header {
  background: var(--phpew-card-bg);
}

.pu-layer--background.pu-layer--active .pu-layer__header { background: color-mix(in srgb, var(--wiggle-layer-background, #475569) 18%, transparent); }
.pu-layer--midground.pu-layer--active  .pu-layer__header { background: color-mix(in srgb, var(--wiggle-layer-midground,  #0f766e) 18%, transparent); }
.pu-layer--foreground.pu-layer--active .pu-layer__header { background: color-mix(in srgb, var(--wiggle-layer-foreground, #b45309) 18%, transparent); }

/* Active layer name in green — Don's chosen "selected" signal. */
.pu-layer--active .pu-layer__name { color: #22c55e; font-weight: 600; }

.pu-layer--drag-over .pu-layer__header {
  outline: 2px dashed var(--phpew-accent, #7c3aed);
  outline-offset: -2px;
}
.pu-object-item { user-select: none; }

.pu-layer-clip {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 4px;
}
.pu-layer-clip__slug {
  font-family: var(--phpew-font-mono);
  font-size: 10px;
  color: rgba(167,139,250,0.8);
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pu-layer-clip__set,
.pu-layer-clip__clear {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 10px;
  padding: 1px 4px;
  border-radius: var(--phpew-radius-sm);
  line-height: 1;
  color: var(--phpew-subtle);
}
.pu-layer-clip__set { opacity: 0; }
.pu-layer__header:hover .pu-layer-clip__set { opacity: 1; }
.pu-layer-clip__set:hover { color: rgba(167,139,250,0.8); }
.pu-layer-clip__clear { color: rgba(167,139,250,0.8); }
.pu-layer-clip__clear:hover { color: #fff; }

.pu-layer__name {
  flex: 1;
  font-size: var(--phpew-fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--phpew-muted);
}

.pu-layer__add-wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.pu-layer__add {
  background: none;
  border: none;
  color: var(--phpew-muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.2rem;
  border-radius: var(--phpew-radius-sm) 0 0 var(--phpew-radius-sm);
}

.pu-layer__add:hover {
  color: var(--phpew-fg);
  background: var(--phpew-border);
}

.pu-layer__add-arrow {
  background: none;
  border: none;
  border-left: 1px solid transparent;
  color: var(--phpew-muted);
  cursor: pointer;
  font-size: 0.65rem;
  line-height: 1;
  padding: 0 0.15rem;
  border-radius: 0 var(--phpew-radius-sm) var(--phpew-radius-sm) 0;
}
.pu-layer__add-arrow:hover {
  color: var(--phpew-fg);
  background: var(--phpew-border);
  border-left-color: var(--phpew-border);
}
.pu-layer__add-wrap:hover .pu-layer__add-arrow {
  border-left-color: var(--phpew-border);
}

.pu-layer__add-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius-sm);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  z-index: 500;
  white-space: nowrap;
}

.pu-layer__add-menu-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: var(--phpew-fg);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  width: 100%;
  text-align: left;
  border-radius: var(--phpew-radius-sm);
}
.pu-layer__add-menu-item:hover {
  background: var(--phpew-border);
}

.pu-shape-section {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--phpew-muted);
  padding: 0.5rem 0.5rem 0.2rem;
}
.pu-shape-section--radii {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.pu-radii-link {
  background: none;
  border: 1px solid var(--phpew-border, #444);
  border-radius: 3px;
  color: var(--phpew-muted);
  cursor: pointer;
  padding: 2px 4px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.pu-radii-link--on {
  border-color: var(--phpew-accent, #7c6fcd);
  color: var(--phpew-accent, #7c6fcd);
}

.pu-color-alpha {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 1;
}

.pu-color-alpha .pu-color-pick {
  width: 2rem;
  height: 1.6rem;
  padding: 0.1rem;
  border: 1px solid var(--phpew-border);
  border-radius: 3px;
  background: none;
  cursor: pointer;
  flex-shrink: 0;
}

.pu-color-alpha .pu-alpha-slide {
  flex: 1;
  height: 4px;
  accent-color: var(--phpew-accent, #7c3aed);
  cursor: pointer;
}

.pu-alpha-val {
  font-size: 0.7rem;
  color: var(--phpew-muted);
  width: 2.5rem;
  text-align: right;
  flex-shrink: 0;
}

.pu-subuv-options {
  padding: 0 0.25rem 0.25rem;
}

.pu-subuv-canvas {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 4px;
  border: 1px solid var(--phpew-border);
  cursor: crosshair;
  margin: 0.35rem 0;
}

.pu-shape-corners {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0 0.25rem 0.25rem;
}

.pu-shape-corner { display: flex; flex-direction: column; gap: 0.15rem; }
.pu-shape-corner .pu-label { font-size: 0.65rem; }

.pu-object-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pu-object-item {
  display: flex;
  align-items: center;
  padding: 0.35rem 0.75rem 0.35rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid var(--phpew-border);
  gap: 0.5rem;
}

.pu-object-item:hover { background: var(--phpew-surface); }

.pu-object-item.selected {
  border-left: 3px solid var(--phpew-accent);
  padding-left: 0.75rem;
  background: rgba(167, 139, 250, 0.18);
  color: #fff;
}

.pu-object-item__label {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.pu-object-item__slug {
  font-size: var(--phpew-fs-xs);
  font-family: var(--phpew-font-mono);
  color: var(--phpew-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pu-object-item__prefab {
  font-size: var(--phpew-fs-xs);
  color: var(--phpew-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pu-object-item__z {
  font-size: var(--phpew-fs-xs);
  color: var(--phpew-muted);
  opacity: 0.6;
  min-width: 1.6em;
  text-align: right;
  flex-shrink: 0;
}

.pu-object-item__remove {
  background: none;
  border: none;
  color: var(--phpew-subtle);
  cursor: pointer;
  font-size: 0.875rem;
  padding: 0 0.1rem;
  line-height: 1;
  border-radius: var(--phpew-radius-sm);
  flex-shrink: 0;
}

.pu-object-item__remove:hover {
  color: var(--phpew-error);
  background: var(--phpew-error-bg);
}

.pu-object-item__lock {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0 0.1rem;
  line-height: 1;
  border-radius: var(--phpew-radius-sm);
  flex-shrink: 0;
  opacity: 0;
  color: var(--phpew-subtle);
}
.pu-object-item__lock::before { content: '○'; }
.pu-object-item__lock--on { opacity: 1; color: rgba(255,160,80,0.85); }
.pu-object-item__lock--on::before { content: '●'; }
.pu-object-item:hover .pu-object-item__lock { opacity: 1; }
.pu-object-item--locked .pu-object-item__slug { opacity: 0.5; }

.pu-group-header {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  background: rgba(99,102,241,0.12);
  border-top: 1px solid rgba(99,102,241,0.3);
  border-bottom: 1px solid rgba(99,102,241,0.2);
  font-size: 10px;
  color: rgba(165,180,252,0.9);
  margin-top: 2px;
}
.pu-group-header__name {
  flex: 1;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.pu-group-header__name::before { content: '⬡ '; opacity: 0.7; }
.pu-group-header__name:hover { color: #a5b4fc; }
.pu-group-header__ungroup {
  background: none;
  border: none;
  color: rgba(165,180,252,0.5);
  cursor: pointer;
  font-size: 11px;
  padding: 0 2px;
  line-height: 1;
}
.pu-group-header__ungroup:hover { color: rgba(165,180,252,0.9); }
.pu-object-item--grouped {
  padding-left: 18px;
  border-left: 2px solid rgba(99,102,241,0.25);
}

.pu-object-item__handle {
  cursor: grab;
  color: var(--phpew-muted);
  opacity: 0;
  font-size: 0.85rem;
  flex-shrink: 0;
  padding: 0 2px;
  line-height: 1;
}
.pu-object-item:hover .pu-object-item__handle { opacity: 0.5; }
.pu-object-item__handle:active { cursor: grabbing; opacity: 1; }

.pu-object-item__up,
.pu-object-item__down {
  background: none;
  border: none;
  color: var(--phpew-subtle);
  cursor: pointer;
  font-size: 0.6rem;
  padding: 0 1px;
  line-height: 1;
  border-radius: var(--phpew-radius-sm);
  flex-shrink: 0;
  opacity: 0;
}
.pu-object-item:hover .pu-object-item__up,
.pu-object-item:hover .pu-object-item__down { opacity: 0.6; }
.pu-object-item__up:hover,
.pu-object-item__down:hover { opacity: 1 !important; color: var(--phpew-fg); background: var(--phpew-border); }

.pu-object-item--drop-above { box-shadow: inset 0 2px 0 var(--phpew-accent); }
.pu-object-item--drop-below { box-shadow: inset 0 -2px 0 var(--phpew-accent); }

/* =========================================================
   Canvas
   ========================================================= */

.pu-canvas-wrap {
  flex: 1;
  position: relative;
  overflow: hidden;
  background: #12121e;
}

.pu-canvas-wrap--draw canvas { cursor: crosshair; }

.pu-canvas-wrap--drop-target {
  box-shadow: inset 0 0 0 3px var(--phpew-accent);
}

.pu-draw-hint {
  position: absolute;
  bottom: 8px;
  right: 8px;
  font-size: var(--phpew-fs-xs);
  font-family: var(--phpew-font-mono);
  color: rgba(255,255,255,0.6);
  background: rgba(0,0,0,0.45);
  border-radius: var(--phpew-radius-sm);
  padding: 0.2rem 0.6rem;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  display: none;
}

.pu-canvas-wrap canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.pu-view-controls {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(14, 14, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--phpew-radius);
  padding: 4px;
  z-index: 10;
}

.pu-view-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 4px 7px;
  border-radius: var(--phpew-radius-sm);
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
}
.pu-view-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.pu-zoom-level {
  font-family: var(--phpew-font-mono);
  font-size: var(--phpew-fs-xs);
  color: rgba(255, 255, 255, 0.45);
  min-width: 38px;
  text-align: center;
  user-select: none;
  cursor: default;
}

.pu-view-sep {
  width: 1px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  align-self: center;
  margin: 0 2px;
}

.pu-toolbar {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 3px;
  background: rgba(14, 14, 22, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--phpew-radius);
  padding: 4px;
  z-index: 10;
}

.pu-tool-btn {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--phpew-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  transition: color 0.1s, background 0.1s;
}

.pu-tool-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

.pu-tool-btn.active {
  color: #fff;
  background: var(--phpew-accent);
}

.pu-toolbar-sep {
  width: 1px;
  height: 20px;
  background: rgba(255,255,255,0.12);
  align-self: center;
  margin: 0 1px;
}

.pu-tool-split {
  display: flex;
  align-items: stretch;
}

.pu-tool-split__arrow {
  background: none;
  border: none;
  color: rgba(255,255,255,0.35);
  cursor: pointer;
  font-size: 0.6rem;
  padding: 0 3px;
  border-radius: 0 var(--phpew-radius-sm) var(--phpew-radius-sm) 0;
  line-height: 1;
  align-self: stretch;
  display: flex;
  align-items: center;
}
.pu-tool-split__arrow:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.08); }

.pu-draw-mode-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: rgba(14, 14, 22, 0.96);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--phpew-radius-sm);
  box-shadow: 0 4px 14px rgba(0,0,0,0.5);
  z-index: 500;
  white-space: nowrap;
  padding: 3px;
}

.pu-draw-mode-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: none;
  border: none;
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  font-size: 0.78rem;
  padding: 0.3rem 0.5rem;
  width: 100%;
  text-align: left;
  border-radius: var(--phpew-radius-sm);
}
.pu-draw-mode-item:hover { background: rgba(255,255,255,0.1); color: #fff; }

.pu-snap-step {
  width: 42px;
  height: 24px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--phpew-radius-sm);
  color: rgba(255,255,255,0.5);
  font-size: 11px;
  font-family: var(--phpew-font-mono);
  padding: 0 4px;
  text-align: center;
  outline: none;
  -moz-appearance: textfield;
}
.pu-snap-step::-webkit-outer-spin-button,
.pu-snap-step::-webkit-inner-spin-button { -webkit-appearance: none; }
.pu-snap-step:focus {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

/* Background-color swatch — wraps a <input type="color"> and shows it as
   a small clickable square that opens the native color picker. */
.pu-bg-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 4px;
  border: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  overflow: hidden;
  position: relative;
}
.pu-bg-swatch:hover { border-color: rgba(255,255,255,0.3); }
.pu-bg-swatch input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 200%;
  height: 200%;
  cursor: pointer;
  /* Hide native chrome by overscaling and clipping via overflow:hidden on parent. */
}
.pu-bg-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.pu-bg-swatch input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 0; }
.pu-bg-swatch input[type="color"]::-moz-color-swatch { border: 0; }

.pu-coords {
  position: absolute;
  bottom: 8px;
  left: 8px;
  font-family: var(--phpew-font-mono);
  font-size: var(--phpew-fs-xs);
  color: rgba(255, 255, 255, 0.5);
  pointer-events: none;
  user-select: none;
}

/* =========================================================
   Properties panel
   ========================================================= */

.pu-props {
  width: 280px;
  flex-shrink: 0;
  overflow-y: auto;
  border-left: 1px solid var(--phpew-border);
  background: var(--phpew-card-bg);
}

.pu-props__placeholder {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
}

.pu-props__form {
  padding: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.pu-props__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem;
  border-bottom: 1px solid var(--phpew-border);
  font-size: var(--phpew-fs-sm);
  font-weight: 600;
  font-family: var(--phpew-font-mono);
  color: var(--phpew-fg);
}
.pu-props__rename {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--phpew-muted);
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1;
  padding: 0;
}
.pu-props__rename:hover {
  border-color: var(--phpew-accent, #4f46e5);
  color: var(--phpew-accent, #4f46e5);
  background: rgba(79, 70, 229, 0.1);
}
.pu-props__name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================
   Shared form controls
   ========================================================= */

.pu-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pu-field--row {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
}

.pu-field-row {
  display: flex;
  gap: 0.5rem;
}

/* min-width:0 lets the number inputs shrink below their intrinsic width so the
   W/H row (which also holds the aspect-lock button) fits without overflowing the
   panel and forcing a horizontal scrollbar. */
.pu-field-row .pu-field { flex: 1; min-width: 0; }
.pu-field-row--linked { align-items: flex-end; }
.pu-field-row--linked .pu-radii-link { margin-bottom: 0.25rem; flex-shrink: 0; }

.pu-label {
  font-size: var(--phpew-fs-xs);
  font-weight: 500;
  color: var(--phpew-muted);
}

.pu-label--inline {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  cursor: pointer;
  color: var(--phpew-fg);
}

.pu-input {
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius-sm);
  color: var(--phpew-fg);
  font-family: var(--phpew-font);
  font-size: var(--phpew-fs-sm);
  padding: 0.3rem 0.5rem;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}

.pu-input:focus {
  border-color: var(--phpew-accent);
  box-shadow: 0 0 0 2px var(--phpew-focus-ring);
}

.pu-form-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Property category headers */
.pu-prop-section {
  border-top: 1px solid var(--phpew-border, #333);
}
.pu-prop-section:first-of-type { border-top: none; }
.pu-prop-cat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--phpew-muted);
  padding: 0.45rem 0.5rem 0.2rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.pu-prop-cat::-webkit-details-marker { display: none; }
.pu-prop-cat::after { content: '▾'; font-size: 0.7rem; }
.pu-prop-section:not([open]) .pu-prop-cat::after { content: '▸'; }

/* =========================================================
   Modal
   ========================================================= */

.pu-modal {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pu-modal--hidden { display: none; }
.pu-muted { color: var(--phpew-muted, #888); }
.pu-modal__box--narrow { width: 480px; }
.pu-hidden { display: none; }
.pu-picker-search-input { margin-bottom: .75rem; }
.pu-picker-list { max-height: 320px; overflow-y: auto; }
.pu-tool-split { position: relative; }

.pu-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
}

.pu-modal__box {
  position: relative;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  box-shadow: var(--phpew-shadow);
  width: 380px;
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.pu-modal__header {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--phpew-border);
}

.pu-modal__title {
  flex: 1;
  font-weight: 600;
  font-size: var(--phpew-fs-sm);
}

.pu-modal__close {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  color: var(--phpew-muted);
  padding: 0 0.25rem;
  border-radius: var(--phpew-radius-sm);
}

.pu-modal__close:hover { color: var(--phpew-fg); }

.pu-modal__body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.pu-modal__footer {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--phpew-border);
}

/* =========================================================
   Scene list
   ========================================================= */

.pu-app-bar {
  display: flex;
  align-items: center;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--phpew-border);
  background: var(--phpew-card-bg);
  gap: 1rem;
}

.pu-app-bar__title {
  flex: 1;
  margin: 0;
  font-size: var(--phpew-fs-lg);
  font-weight: 700;
}

.pu-app-bar__nav {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.pu-app-bar__dropdown {
  position: relative;
}

.pu-app-bar__dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 200;
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  white-space: nowrap;
  min-width: 180px;
}

.pu-app-bar__dropdown:hover .pu-app-bar__dropdown-menu,
.pu-app-bar__dropdown:focus-within .pu-app-bar__dropdown-menu {
  display: block;
}

.pu-app-bar__dropdown-menu li a {
  display: block;
  padding: 0.45rem 1rem;
  color: var(--phpew-fg);
  text-decoration: none;
  font-size: var(--phpew-fs-sm);
}

.pu-app-bar__dropdown-menu li a:hover {
  background: var(--phpew-surface);
}

.pu-app-bar__dropdown-divider {
  height: 1px;
  background: var(--phpew-border);
  margin: 0.25rem 0;
}

.pu-app-bar__dropdown-empty {
  padding: 0.45rem 1rem;
  font-size: var(--phpew-fs-sm);
  color: var(--phpew-muted);
}

.pu-new-scene-form {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--phpew-border);
  background: var(--phpew-surface);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.pu-new-scene-form .pu-field { flex: 1; min-width: 160px; }

.pu-scene-grid {
  padding: 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.pu-scene-card {
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1rem;
  background: var(--phpew-card-bg);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.15s;
}

.pu-scene-card:hover { border-color: var(--phpew-accent); }

.pu-scene-card__name {
  font-weight: 600;
  font-size: var(--phpew-fs-sm);
  cursor: text;
}

.pu-scene-card__name-input {
  width: 100%;
  font-weight: 600;
  font-size: var(--phpew-fs-sm);
  font-family: inherit;
  background: var(--phpew-surface);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-accent);
  border-radius: 3px;
  padding: 0.1rem 0.3rem;
  outline: none;
}

.pu-scene-card__slug {
  font-family: var(--phpew-font-mono);
  font-size: var(--phpew-fs-xs);
  color: var(--phpew-muted);
  background: var(--phpew-surface);
  border-radius: var(--phpew-radius-sm);
  padding: 0.1rem 0.35rem;
  align-self: flex-start;
}

.pu-scene-card__meta {
  font-size: var(--phpew-fs-xs);
  color: var(--phpew-subtle);
}

.pu-scene-card__actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.25rem;
}

.pu-scene-card--new {
  border-style: dashed;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.pu-scene-card__new-label {
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
}

.pu-scene-card--new:hover .pu-scene-card__new-label {
  color: var(--phpew-accent);
}

.pu-error {
  padding: 1rem;
  color: var(--phpew-error);
}

/* =========================================================
   Asset bar (content browser panel)
   ========================================================= */

.pu-asset-bar {
  flex-shrink: 0;
  border-top: 2px solid var(--phpew-border);
  overflow-y: auto;
  background: var(--phpew-card-bg);
}

/* Export modal — scene JSON copy/download dialog. */
.pu-export-modal__box {
  width: min(720px, 90vw);
  max-width: 720px;
}
.pu-export-instructions {
  font-size: 0.85rem;
  color: var(--phpew-muted);
  margin-bottom: 0.75rem;
  line-height: 1.5;
}
.pu-export-upm-url {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.1rem 0.4rem;
  border-radius: 3px;
  background: rgba(255,255,255,0.05);
  font-family: var(--phpew-font-mono);
  color: var(--phpew-fg);
  user-select: all;
}
.pu-export-textarea {
  width: 100%;
  height: 320px;
  resize: vertical;
  background: var(--phpew-input-bg, #0f0f10);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-border);
  border-radius: 4px;
  padding: 0.5rem;
  font-family: var(--phpew-font-mono);
  font-size: 0.78rem;
  line-height: 1.4;
}
.pu-export-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.5rem;
}
.pu-export-status {
  font-size: 0.8rem;
  color: var(--phpew-muted);
  margin-left: 0.25rem;
}
.pu-export-status--ok  { color: #22c55e; }
.pu-export-status--err { color: var(--phpew-error, #dc2626); }

/* Export modal — folder picker row. */
.pu-export-folder-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--phpew-muted);
}
.pu-export-folder-meta {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#pu-export-folder-label {
  font-family: var(--phpew-font-mono);
  color: var(--phpew-fg);
}

/* Layer visibility eye button — sits at the leftmost end of the layer
   header, before the layer name. Dims slightly when the layer is hidden. */
.pu-layer__eye {
  width: 22px;
  height: 18px;
  border: 0;
  background: transparent;
  color: var(--phpew-muted);
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 3px;
  flex-shrink: 0;
}
.pu-layer__eye:hover { color: var(--phpew-fg); background: rgba(255,255,255,0.06); }
.pu-layer--hidden .pu-layer__eye { color: var(--phpew-muted); opacity: 0.55; }
.pu-layer--hidden .pu-layer__name,
.pu-layer--hidden .pu-layer__z,
.pu-layer--hidden .pu-layer-clip { opacity: 0.45; }
.pu-layer--hidden .pu-object-list { opacity: 0.45; }

/* ── Section picker ── */
.pu-picker-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .5rem;
  padding: .5rem .75rem; cursor: pointer; border-radius: 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.pu-picker-item:hover { background: rgba(124,58,237,0.18); }
.pu-picker-item__name { font-size: .875rem; color: var(--phpew-fg); font-weight: 600; }
.pu-picker-item__slug { font-size: .75rem; color: var(--phpew-muted); font-family: ui-monospace, monospace; }
.pu-picker-item__tpl  { font-size: .7rem; color: #a78bfa; font-family: ui-monospace, monospace; margin-left: auto; }

/* ── Draft banner ── */
.pu-draft-banner {
  display: flex; align-items: center; gap: .75rem;
  padding: .5rem 1rem;
  background: #1e3a5f; border-bottom: 1px solid #3b82f6;
  font-size: .8125rem; color: #93c5fd;
}
.pu-draft-banner__msg { flex: 1; }
.pu-draft-banner__btn {
  padding: .25rem .75rem; border-radius: 4px; font-size: .8125rem;
  background: #3b82f6; color: #fff; border: none; cursor: pointer;
}
.pu-draft-banner__btn:hover { background: #2563eb; }
.pu-draft-banner__btn--discard {
  background: transparent; color: #93c5fd; border: 1px solid rgba(147,197,253,0.3);
}

/* ── Preset panel ── */
.pu-preset-panel {
  border-top: 1px solid var(--phpew-border, #3f3f46);
  margin-top: .5rem;
}
.pu-preset-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .4rem .75rem;
  font-size: .8125rem; font-weight: 600; color: var(--phpew-fg, #e4e4e7);
  cursor: pointer; user-select: none;
}
.pu-preset-panel__header:hover { background: rgba(255,255,255,0.04); }
.pu-preset-panel__toggle { font-size: .75rem; color: var(--phpew-muted, #71717a); }
.pu-preset-panel__body { padding: .25rem .5rem .5rem; }
.pu-preset-section { margin-bottom: .5rem; }
.pu-preset-section__title {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--phpew-muted, #71717a); padding: .25rem .25rem .125rem;
}
.pu-preset-list { list-style: none; margin: 0; padding: 0; }
.pu-preset-item {
  display: flex; align-items: center; gap: .25rem;
  padding: .2rem .25rem; border-radius: 3px;
  font-size: .8125rem;
}
.pu-preset-item:hover { background: rgba(255,255,255,0.05); }
.pu-preset-item__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--phpew-fg, #e4e4e7); }
.pu-preset-item button {
  background: none; border: none; cursor: pointer; padding: .1rem .3rem;
  color: var(--phpew-muted, #71717a); border-radius: 3px; font-size: .8125rem;
  line-height: 1;
}
.pu-preset-item button:hover { background: rgba(255,255,255,0.1); color: var(--phpew-fg, #e4e4e7); }
.pu-draft-banner__btn--discard:hover { background: rgba(147,197,253,0.1); }
.pu-text-content { resize: vertical; font-family: inherit; line-height: 1.4; }

/* ── Centered save-busy overlay ─────────────────────────────────────────── */
.pu-save-busy {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    align-items: center;
    gap: 0.6em;
    background: rgba(24,24,27,0.92);
    color: #e4e4e7;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.6em 1.1em;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 4px 24px rgba(0,0,0,0.5);
    z-index: 9999;
    pointer-events: none;
}
.pu-save-busy__spinner {
    width: 1em;
    height: 1em;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    animation: pu-spin 0.55s linear infinite;
    flex-shrink: 0;
}
@keyframes pu-spin { to { transform: rotate(360deg); } }

/* Local preview mode — body.pu-preview-mode hides editor chrome so the
   canvas (already drawing with previewMode=true: no grid, no
   annotations) presents the scene full-bleed. No iframe needed.
   When a remote site is connected, showPreviewOverlay mounts an
   iframe of the remote page on top instead and this class isn't set. */
body.pu-preview-mode .pu-app-bar,
body.pu-preview-mode .pu-toolbar,
body.pu-preview-mode .pu-side-panel,
body.pu-preview-mode .pu-layer-list,
body.pu-preview-mode .pu-props,
body.pu-preview-mode .pu-editor-bar,
body.pu-preview-mode .pu-view-controls,
body.pu-preview-mode .pu-coords {
  display: none !important;
}
/* Canvas takes the whole viewport. */
body.pu-preview-mode .pu-canvas-wrap,
body.pu-preview-mode .pu-editor-split {
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
}

/* Standalone exit button injected into <body> when entering preview
   mode. Lives at top-right; subtle until hover. The real toolbar's
   preview-toggle can't be made visible because its parent (.pu-toolbar)
   is display:none in preview mode. */
#pu-preview-exit {
  /* Mounted inside .pu-canvas-wrap (the scene viewport) so absolute
     positioning floats over the actual scene, not in the empty
     viewport-corner real estate around the canvas. */
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 99999;
  padding: 0.5rem 0.9rem;
  background: rgba(20, 20, 28, 0.85);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  font: 600 0.85rem/1 system-ui, sans-serif;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity 120ms ease;
}
#pu-preview-exit:hover {
  opacity: 1;
  background: rgba(40, 40, 56, 0.95);
}

/* ── Edit chooser (Content vs Layout landing) ───────────────────────────── */
.pu-app-bar__subtitle {
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  margin-left: 0.75rem;
}

.pu-chooser {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 22rem));
  gap: 1.5rem;
  justify-content: center;
  padding: 3rem 1.5rem;
}

.pu-chooser-card {
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  background: var(--phpew-card-bg);
  padding: 2.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  text-align: center;
  text-decoration: none;
  color: var(--phpew-fg);
  transition: border-color 0.15s, transform 0.15s;
}

.pu-chooser-card:hover {
  border-color: var(--phpew-accent);
  transform: translateY(-2px);
}

.pu-chooser-card__icon {
  font-size: 2.75rem;
  line-height: 1;
  color: var(--phpew-accent);
}

.pu-chooser-card__title {
  font-weight: 600;
  font-size: var(--phpew-fs-lg);
}

.pu-chooser-card__desc {
  font-size: var(--phpew-fs-sm);
  color: var(--phpew-muted);
}

@media (max-width: 600px) {
  .pu-chooser { grid-template-columns: minmax(0, 22rem); }
}

/* Object rename pencil — matches the up/down item buttons (hover-reveal). */
.pu-object-item__rename {
  background: none;
  border: none;
  color: var(--phpew-subtle);
  cursor: pointer;
  font-size: 0.7rem;
  padding: 0 2px;
  line-height: 1;
  border-radius: var(--phpew-radius-sm);
  flex-shrink: 0;
  opacity: 0;
}
.pu-object-item:hover .pu-object-item__rename { opacity: 0.6; }
.pu-object-item__rename:hover { opacity: 1 !important; color: var(--phpew-fg); background: var(--phpew-border); }

/* Logged-out / save-failed banner — loud, fixed, can't be missed. */
.pu-auth-lost {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 99999;
  background: #b91c1c;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: center;
  padding: 0.6rem 1rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.pu-auth-lost a { color: #fff; text-decoration: underline; }

.pu-group-header__rename {
  background: none; border: none; color: var(--phpew-subtle);
  cursor: pointer; font-size: 0.7rem; padding: 0 2px; line-height: 1;
  border-radius: var(--phpew-radius-sm); flex-shrink: 0; opacity: 0;
}
.pu-group-header:hover .pu-group-header__rename { opacity: 0.7; }
.pu-group-header__rename:hover { opacity: 1 !important; color: var(--phpew-fg); }

.pu-preset-item__handle {
  cursor: grab; color: var(--phpew-subtle); font-size: 0.8rem;
  padding: 0 2px; flex-shrink: 0; user-select: none;
}
.pu-preset-item__handle:active { cursor: grabbing; }
.pu-preset-item:hover .pu-preset-item__handle { color: var(--phpew-fg); }

/* =========================================================
   Wiggle interface — the tool as a phpew Layout.
   The tool is the `wiggle-editor` Page; the `wiggle-interface` layout lays
   out docked regions inside the site header/footer. Chrome regions sit on a
   surface tone; the viewport (canvas) is the darkest surface so it reads as
   distinct. Rows are compact: this is a tool, not a content page.
   ========================================================= */
.phpew-layout-wiggle-interface {
  --wg-chrome-h: 96px;              /* site header + footer allowance; tune per theme */
  --wg-surface: #191922;           /* chrome region background */
  --wg-surface-2: #14141c;         /* nested / scrolled panel background */
  --wg-canvas: #0c0c12;            /* the viewport, darkest */
  --wg-line: #2e2e42;              /* visible region divider */
  height: calc(100vh - var(--wg-chrome-h));
  min-height: 480px;
  overflow: hidden;
  background: var(--wg-line);       /* shows through the 1px gaps as dividers */
  color: var(--phpew-fg, #e6e6ef);
  gap: 1px;                         /* hairline dividers between cells */
}
/* Every region is a docked, self-contained surface box. Region wrappers are
   .phpew-section elements — kill the theme's 2.5rem section margin (it was
   showing the layout background through as thick bands) and any padding. */
.phpew-layout-wiggle-interface > [data-area] {
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  margin: 0;
  background: var(--wg-surface);
  border: 0;                        /* separation comes from the 1px grid gap */
}
.phpew-layout-wiggle-interface > [data-area].phpew-section { padding: 0; }
/* Placeholder empty-state text ("No content configured yet.") never shows
   inside the tool — functional regions are filled by the editor JS, the rest
   are hidden below. Only the section's own direct-child message is targeted. */
.phpew-layout-wiggle-interface > [data-area] > .phpew-muted { display: none; }
/* Search has no functionality yet — hidden until built out. Its row collapses. */
/* Search region: an input over the view + a results dropdown that escapes the
   cell (overflow visible + a stacking context above the neighbouring regions). */
.phpew-layout-wiggle-interface > [data-area="search"] {
  display: flex; align-items: center; padding: 0 .5rem; overflow: visible; position: relative; z-index: 20;
}
.pu-search { position: relative; width: 100%; }
.pu-search__input { width: 100%; background: #0f0f17; color: #e6e6ef; border: 1px solid var(--wg-line, #2e2e42); border-radius: 5px; padding: 3px 8px; font: 12px/1.3 system-ui, sans-serif; outline: none; }
.pu-search__input:focus { border-color: var(--phpew-accent, #7c3aed); }
.pu-search__results { position: absolute; top: calc(100% + 3px); left: 0; right: 0; z-index: 30; max-height: 260px; overflow-y: auto; background: #14141c; border: 1px solid var(--wg-line, #2e2e42); border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.pu-search__item { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; width: 100%; text-align: left; background: transparent; border: 0; color: #e6e6ef; padding: 5px 9px; font: 12px/1.3 system-ui, sans-serif; cursor: pointer; }
.pu-search__item:hover { background: #23233a; }
.pu-search__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pu-search__sub { color: #9aa0b4; font-size: 11px; font-family: var(--phpew-font-mono, monospace); flex-shrink: 0; }
.pu-search__empty { padding: 6px 9px; color: #6b7180; font-size: 12px; }

/* Bottom status strip: compact, single-line cells. */
.phpew-layout-wiggle-interface > [data-area="status"],
.phpew-layout-wiggle-interface > [data-area="details"],
.phpew-layout-wiggle-interface > [data-area="controls"],
.phpew-layout-wiggle-interface > [data-area="functions"],
.phpew-layout-wiggle-interface > [data-area="connection"] {
  display: flex; align-items: center; height: 26px; padding: 0 .6rem; overflow: hidden;
}
.pu-strip { display: flex; align-items: center; gap: .55rem; width: 100%; font-size: 11px; white-space: nowrap; overflow: hidden; }
.pu-strip__k { font-weight: 600; color: var(--phpew-fg, #e6e6ef); }
.pu-strip__s { color: #9aa0b4; font-family: var(--phpew-font-mono, monospace); }
.pu-strip__muted { color: #6b7180; }
.pu-strip__ok { color: #34d399; }
.pu-strip__btn { background: #23233a; color: #e6e6ef; border: 1px solid var(--wg-line, #2e2e42); border-radius: 5px; padding: 2px 10px; font: 600 11px/1.4 system-ui, sans-serif; cursor: pointer; }
.pu-strip__btn:hover { background: #2d2d4e; }
.pu-controls { gap: .6rem; }
.pu-fn { width: 100%; }
.pu-fn__input { width: 100%; background: #0f0f17; color: #e6e6ef; border: 1px solid var(--wg-line, #2e2e42); border-radius: 5px; padding: 3px 8px; font: 12px/1.3 var(--phpew-font-mono, monospace); outline: none; }
.pu-fn__input:focus { border-color: var(--phpew-accent, #7c3aed); }

/* Controls region: the persistent timeline transport, centered. */
.phpew-layout-wiggle-interface > [data-area="controls"] { justify-content: center; }
.pu-transport { display: flex; align-items: center; gap: 2px; }
.pu-tp { background: transparent; color: #cfd3e0; border: 1px solid transparent; border-radius: 4px; padding: 1px 6px; font: 12px/1 system-ui, sans-serif; line-height: 1.4; cursor: pointer; min-width: 22px; text-align: center; }
.pu-tp:hover:not(:disabled) { background: #23233a; color: #fff; }
.pu-tp:disabled { opacity: .32; cursor: default; }
.pu-tp--play { color: #a78bfa; font-size: 13px; padding: 1px 9px; }
.pu-tp--play:hover { background: #2d2d4e; color: #fff; }
.pu-tp-sep { width: 1px; height: 14px; background: var(--wg-line, #2e2e42); margin: 0 5px; }
.pu-tp-speed { color: #9aa0b4; font-family: var(--phpew-font-mono, monospace); font-size: 11px; min-width: 26px; text-align: center; }

/* Header: compact title bar. */
.phpew-layout-wiggle-interface > [data-area="header"] { display: flex; align-items: center; }
.pu-wiggle-header { display: flex; align-items: center; gap: .6rem; padding: 0 .75rem; width: 100%; height: 30px; font-size: 12px; }
.pu-wh-brand { font-weight: 700; letter-spacing: .02em; }
.pu-wh-scene { opacity: .65; }
.pu-wh-status { margin-left: auto; opacity: .6; font-family: var(--phpew-font-mono, monospace); font-size: 11px; }

/* Menu cell. */
.phpew-layout-wiggle-interface > [data-area="menu"] { display: flex; align-items: center; padding: 0 .35rem; }

/* Tools region: the toolbar docks (was absolute-floating over the canvas). */
.phpew-layout-wiggle-interface > [data-area="tools"] { display: flex; align-items: center; overflow-x: auto; }
.phpew-layout-wiggle-interface .pu-toolbar {
  position: static; background: transparent; border: 0; border-radius: 0; padding: 3px 6px; flex-wrap: nowrap;
}

/* Panel + scene columns dock and scroll on the nested surface tone. */
.phpew-layout-wiggle-interface > [data-area="panel"],
.phpew-layout-wiggle-interface > [data-area="scene"] { overflow-y: auto; background: var(--wg-surface-2); }
.phpew-layout-wiggle-interface .pu-sidebar,
.phpew-layout-wiggle-interface .pu-props { position: static; width: 100%; height: 100%; border: 0; background: transparent; }

/* Main viewport: darkest surface, canvas fills it. The wrap is absolutely
   positioned to fill main (and contributes nothing to grid width, so it can't
   force horizontal overflow). The JS pins its inline position to `absolute` so
   the physics preview's `wrap.style.position ||= 'relative'` is a no-op and the
   wrap never collapses. */
.phpew-layout-wiggle-interface > [data-area="main"] { position: relative; padding: 0; background: var(--wg-canvas); overflow: hidden; }
.phpew-layout-wiggle-interface .pu-canvas-wrap { position: absolute; inset: 0; flex: none; background: var(--wg-canvas); }

/* phpew_section — section editor styles.
   Uses host theme tokens with hex fallbacks so the editor renders
   reasonably even if the active theme doesn't define the tokens. */

/* Full-bleed editor — same shape as phpew_layout so the two read as
   sibling tools in the admin surface. */
.phpew-admin-editor {
  margin: 0;
  padding: 0.75rem;
  color: var(--phpew-fg, #111);
  font-family: var(--phpew-font, system-ui, sans-serif);
}

.phpew-admin-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-admin-header h1 {
  margin: 0;
  font-size: var(--phpew-fs-xl, 1.5rem);
}

/* ── Notices ──────────────────────────────────────────────────────────── */

.phpew-admin-notice {
  padding: 0.6rem 1rem;
  border-radius: var(--phpew-radius, 4px);
  margin-bottom: 1rem;
  font-size: var(--phpew-fs-sm, 0.9rem);
}
.phpew-admin-notice--ok {
  background: var(--phpew-success-bg, #f0fdf4);
  border: 1px solid var(--phpew-success, #16a34a);
  color: var(--phpew-success, #16a34a);
}
.phpew-admin-notice--warn {
  background: var(--phpew-error-bg, #fffbeb);
  border: 1px solid var(--phpew-warning, #d97706);
  color: var(--phpew-warning, #92400e);
}

/* ── List view table ─────────────────────────────────────────────────── */

.phpew-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--phpew-fs-sm, 0.9rem);
  color: var(--phpew-fg, #111);
}
.phpew-table th,
.phpew-table td {
  text-align: left;
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-table th {
  font-weight: 600;
  color: var(--phpew-muted, #6b7280);
  font-size: var(--phpew-fs-xs, 0.8rem);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.phpew-table tbody tr:hover {
  background: var(--phpew-subtle, rgba(0, 0, 0, 0.03));
}
.phpew-admin-actions {
  white-space: nowrap;
}
.phpew-admin-template-badge {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--phpew-radius-sm, 3px);
  background: var(--phpew-subtle, #eef);
  color: var(--phpew-fg, #111);
  font-size: var(--phpew-fs-xs, 0.8rem);
  font-weight: 500;
}
/* Legacy template-backed block — flagged for conversion to a content source. */
.phpew-admin-badge-deprecated {
  display: inline-block;
  padding: 0.15rem 0.5rem;
  border-radius: var(--phpew-radius-sm, 3px);
  background: var(--phpew-warning, #f59e0b);
  color: #1f2937;
  font-size: var(--phpew-fs-xs, 0.8rem);
  font-weight: 700;
}

/* ── Edit view: toolbar ──────────────────────────────────────────────── */

.phpew-admin-toolbar {
  display: flex;
  gap: 1rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-admin-toolbar-meta {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  flex: 1;
}
.phpew-admin-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-shrink: 0;
}

/* Labels + inputs — match phpew_layout exactly so the two editors feel
   like the same tool family. */
.phpew-admin-label {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: var(--phpew-fs-sm, 0.9rem);
  font-weight: 600;
  color: var(--phpew-fg, #111);
  min-width: 180px;
}
/* Respect the HTML `hidden` attribute — without this, the flex display
   above wins over the UA `[hidden] { display: none }` rule. */
.phpew-admin-label[hidden] { display: none; }
.phpew-admin-label small {
  font-weight: 400;
  color: var(--phpew-muted, #6b7280);
  font-size: var(--phpew-fs-xs, 0.8rem);
}

.phpew-admin-input,
.phpew-admin-fields input[type="text"],
.phpew-admin-fields input[type="url"],
.phpew-admin-fields input[type="number"],
.phpew-admin-fields textarea,
.phpew-admin-fields select {
  padding: 0.5rem 0.75rem;
  font-size: var(--phpew-fs-base, 1rem);
  font-family: inherit;
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius, 4px);
  box-sizing: border-box;
}
.phpew-admin-input::placeholder,
.phpew-admin-fields input::placeholder,
.phpew-admin-fields textarea::placeholder {
  color: var(--phpew-muted, #9ca3af);
  opacity: 0.7;
}
.phpew-admin-input:focus,
.phpew-admin-fields input:focus,
.phpew-admin-fields textarea:focus,
.phpew-admin-fields select:focus {
  outline: 2px solid var(--phpew-focus-ring, var(--phpew-accent, #6366f1));
  outline-offset: 1px;
  border-color: transparent;
}
.phpew-admin-input--textarea,
.phpew-admin-fields textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--phpew-font, inherit);
}
/* Image fields render as text input + "Browse media" button side by side. */
.phpew-image-field {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
}
.phpew-image-field-input {
  flex: 1;
  min-width: 0;
}
.phpew-image-field-browse {
  flex-shrink: 0;
  white-space: nowrap;
}

.phpew-admin-input--number {
  width: 120px;
}
.phpew-admin-input--sm {
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
  max-width: 200px;
}
.phpew-admin-checkbox-text {
  margin-left: 0.4rem;
  font-weight: 400;
}
.phpew-admin-input--color {
  padding: 0.2rem;
  width: 48px;
  height: 34px;
  cursor: pointer;
}
.phpew-admin-checkbox {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--phpew-accent, #6366f1);
}

/* ── Split pane ──────────────────────────────────────────────────────── */

.phpew-admin-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  min-height: 500px;
}
.phpew-admin-split--swapped .phpew-admin-split-pane--fields  { order: 2; }
.phpew-admin-split--swapped .phpew-admin-split-pane--preview { order: 1; }

/* The preview PINS to the viewport instead of stretching to the fields
   column — a long content list (grid items stretch by default) was pulling
   the iframe to thousands of pixels tall. Sticky + viewport-bounded height
   keeps it beside you while you scroll the list. */
.phpew-admin-split-pane--preview {
  position: sticky;
  top: 1rem;
  align-self: start;
  height: calc(100vh - 2rem);
}

.phpew-admin-split-pane {
  display: flex;
  flex-direction: column;
  background: var(--phpew-card-bg, #fff);
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius, 4px);
  overflow: hidden;
}

.phpew-admin-pane-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.75rem;
  background: var(--phpew-surface, var(--phpew-subtle, #f9fafb));
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-admin-pane-title {
  margin: 0;
  font-size: var(--phpew-fs-xs, 0.8rem);
  font-weight: 600;
  color: var(--phpew-muted, #374151);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phpew-admin-pane-title small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.phpew-admin-btn-mini {
  font-size: var(--phpew-fs-xs, 0.75rem);
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius-sm, 3px);
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  cursor: pointer;
  font-family: inherit;
}
.phpew-admin-btn-mini:hover {
  background: var(--phpew-subtle, rgba(0, 0, 0, 0.04));
}

/* Fields pane */
.phpew-admin-fields {
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
  background: var(--phpew-card-bg, #fff);
}
.phpew-admin-field-row {
  margin-bottom: 0.85rem;
}
.phpew-admin-field-row .phpew-admin-label {
  width: 100%;
  min-width: 0;
}
.phpew-admin-field-row .phpew-admin-input,
.phpew-admin-field-row input[type="text"],
.phpew-admin-field-row input[type="url"],
.phpew-admin-field-row input[type="number"],
.phpew-admin-field-row textarea,
.phpew-admin-field-row select {
  width: 100%;
}

/* Preview iframe */
.phpew-admin-preview-frame {
  flex: 1;
  width: 100%;
  border: none;
  background: var(--phpew-bg, #fff);
}

/* ── Section preview rendering (used inside the preview iframe) ──────── */

.phpew-section {
  padding: 1rem;
  color: var(--phpew-fg, #111);
}
.phpew-section-title {
  margin-top: 0;
  margin-bottom: 0.75rem;
  font-size: var(--phpew-fs-lg, 1.3rem);
  font-weight: 700;
  color: var(--phpew-fg, #111);
}
.phpew-section-body {
  font-size: var(--phpew-fs-base, 1rem);
}
.phpew-section-error {
  padding: 0.6rem 0.9rem;
  background: var(--phpew-error-bg, #fef2f2);
  border: 1px solid var(--phpew-error, #dc2626);
  border-radius: var(--phpew-radius, 4px);
  color: var(--phpew-error, #dc2626);
  font-size: var(--phpew-fs-sm, 0.85rem);
}

/* ── Shared phpew button overrides ───────────────────────────────────── */

.phpew-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.45rem 0.9rem;
  border-radius: var(--phpew-radius, 4px);
  border: 1px solid var(--phpew-border, #ddd);
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  font-size: var(--phpew-fs-sm, 0.875rem);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
}
.phpew-btn:hover {
  background: var(--phpew-subtle, #f3f4f6);
}
.phpew-btn--primary {
  background: var(--phpew-accent, #6366f1);
  border-color: var(--phpew-accent, #6366f1);
  color: var(--phpew-accent-fg, #fff);
}
.phpew-btn--primary:hover {
  background: var(--phpew-accent-hover, #4f46e5);
  border-color: var(--phpew-accent-hover, #4f46e5);
}
.phpew-btn--danger {
  background: transparent;
  border-color: var(--phpew-error, #dc2626);
  color: var(--phpew-error, #dc2626);
}
.phpew-btn--danger:hover {
  background: var(--phpew-error-bg, #fef2f2);
}
.phpew-muted {
  color: var(--phpew-muted, #6b7280);
  font-size: var(--phpew-fs-xs, 0.82rem);
}

/* ── Template editor: field rows ─────────────────────────────────────── */

.pt-fields-section {
  margin-top: 1rem;
}

.pt-field-row {
  margin: 0.6rem 0;
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius, 4px);
  background: var(--phpew-card-bg, #fff);
}

.pt-field-head {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px dashed var(--phpew-border, #ddd);
}
/* Collapse toggle — narrow button at the start of the head row. */
.pt-field-toggle {
  align-self: center;
  padding: 0.25rem 0.55rem;
  min-width: auto;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
}
/* When collapsed, kill the dashed separator that hung below the head. */
.pt-field-row--collapsed .pt-field-head {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.pt-field-head .phpew-admin-label { min-width: 140px; flex: 1; }
.pt-field-head .pt-field-type { min-width: 140px; }

.pt-field-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* The collapse toggle sets `hidden`; an authored display beats the UA's
   [hidden] rule, so restate it or the fold only kills the separator. */
.pt-field-body[hidden] {
  display: none;
}
.pt-field-render-wrap {
  flex-direction: row !important;
  align-items: center;
  font-weight: 400;
}
.pt-field-options {
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: var(--phpew-fs-sm, 0.875rem);
}

/* Per-type typed form. Friendly inputs that own the common option keys
   for a given field type. Sits above the raw JSON textarea — typed-form
   changes write back into the JSON so save behaviour is unchanged. */
.pt-field-typed-host {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin: 0.25rem 0;
  padding: 0.5rem 0.65rem;
  border: 1px dashed var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius, 4px);
  background: color-mix(in srgb, var(--phpew-fg, #000) 3%, transparent);
}
.pt-field-typed-host[hidden] { display: none; }
.pt-field-typed { display: flex; flex-direction: column; gap: 0.4rem; }
.pt-field-typed-summary {
  font-size: var(--phpew-fs-sm, 0.825rem);
  color: var(--phpew-muted, #6b7280);
  line-height: 1.4;
  padding-bottom: 0.35rem;
  border-bottom: 1px dashed var(--phpew-border, #ddd);
  margin-bottom: 0.1rem;
}

/* Nested subfields editor inside a repeater/group typed form. Visually
   indented + bordered so the nesting level is obvious. Sub-sub fields
   stack the indentation naturally. */
.pt-subfields-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pt-subfields-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pt-subfields-title {
  font-weight: 600;
  font-size: var(--phpew-fs-sm, 0.875rem);
  color: var(--phpew-fg, inherit);
}
.pt-subfields-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--phpew-border, #ddd);
}

/* Repeater's field-map block. One row per declared subfield key —
   each row maps that subfield onto a datasource column name. Rows
   regenerate when the subfield list changes. */
.pt-fieldmap-editor { display: flex; flex-direction: column; gap: 0.4rem; }
.pt-fieldmap-rows {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding-left: 0.5rem;
  border-left: 2px solid var(--phpew-border, #ddd);
}
.pt-fieldmap-row > .phpew-admin-label {
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-weight: 600;
}
.pt-fieldmap-row > .phpew-admin-label > input {
  flex: 1;
  font-family: var(--phpew-font);
  font-weight: 400;
}
.pt-field-checkbox-default {
  flex-direction: row;
  align-items: center;
  font-weight: 400;
}

/* Per-type help shown below the Options JSON — stays visible while the
   author edits the textarea so they don't have to remember which keys
   apply to the current type. */
.pt-field-help {
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  border-left: 3px solid var(--phpew-accent, #2563eb);
  background: color-mix(in srgb, var(--phpew-accent, #2563eb) 6%, transparent);
  font-size: var(--phpew-fs-sm, 0.8125rem);
  line-height: 1.4;
  border-radius: 0 var(--phpew-radius, 4px) var(--phpew-radius, 4px) 0;
}
.pt-field-help-summary { color: var(--phpew-fg, inherit); }
.pt-field-help-keys {
  margin: 0.4rem 0 0;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.15rem 0.6rem;
}
.pt-field-help-keys dt {
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-weight: 600;
  color: var(--phpew-accent, #2563eb);
}
.pt-field-help-keys dd {
  margin: 0;
  color: var(--phpew-muted, inherit);
}

/* ── Form-fields composite editor ────────────────────────────────────── */

.phpew-admin-form-fields-editor {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.phpew-admin-form-fields-row {
  display: flex;
  gap: .6rem;
  align-items: flex-end;
  padding: .5rem;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius, 4px);
  background: var(--phpew-card-bg, transparent);
}
.phpew-admin-form-fields-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1.5fr 1fr;
  gap: .5rem;
  flex: 1;
}
.phpew-admin-form-fields-row-actions {
  display: flex;
  gap: .25rem;
  align-items: center;
}
.phpew-admin-form-fields-required {
  flex-direction: row !important;
  align-items: center;
  font-weight: 400;
}
@media (max-width: 800px) {
  .phpew-admin-form-fields-grid { grid-template-columns: 1fr 1fr; }
}

/* Responsive: stack panes on narrow viewports (and un-pin the preview —
   sticky-beside-the-list only makes sense in the two-column layout) */
@media (max-width: 800px) {
  .phpew-admin-split { grid-template-columns: 1fr; }
  .phpew-admin-split-pane--preview { position: static; height: auto; }
  .phpew-admin-preview-frame { min-height: 300px; }
}

/* ── Group / list composite editors ──────────────────────────────────────── */

.phpew-admin-group-editor {
  border: 1px solid var(--phpew-border, #3f3f46);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin: 0.25rem 0;
  background: rgba(255,255,255,0.02);
}
.phpew-admin-group-editor > .phpew-admin-field-row { margin: 0.3rem 0; }

.phpew-admin-list-editor {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.3rem 0;
}
.phpew-admin-list-rows {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.phpew-admin-list-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.phpew-admin-list-row > .phpew-admin-input,
.phpew-admin-list-row > input { flex: 1 1 auto; }
.phpew-btn--mini {
  padding: 0.1rem 0.5rem;
  font-size: 0.75rem;
}

.phpew-admin-input--json {
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: 0.8rem;
}

/* Rendered output ──────────────────────────────────────────────────────── */
.phpew-section-group {
  border: 1px solid var(--phpew-border, #3f3f46);
  border-radius: 4px;
  padding: 0.4rem 0.75rem;
  margin: 0.3rem 0;
}
.phpew-section-group > legend { font-weight: 600; padding: 0 0.3rem; }
.phpew-section-group-row {
  display: flex;
  gap: 0.5rem;
  align-items: baseline;
}
.phpew-section-group-label {
  font-weight: 600;
  color: var(--phpew-muted, #71717a);
  min-width: 6rem;
}
.phpew-section-list { margin: 0.25rem 0; padding-left: 1.25rem; }
.phpew-section-list--empty { color: var(--phpew-muted, #71717a); font-style: italic; }
.phpew-section-json {
  background: rgba(0,0,0,0.3);
  color: var(--phpew-fg, #e4e4e7);
  padding: 0.5rem 0.75rem;
  border-radius: 4px;
  font-size: 0.8rem;
  overflow-x: auto;
}

/* Section reference field (picker + rendered output). */
.phpew-admin-input--section-ref { min-width: 16rem; }
.phpew-section-ref {
  display: inline-flex;
  gap: 0.4rem;
  align-items: baseline;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: 0.85rem;
}
.phpew-section-ref-template {
  color: var(--phpew-muted, #71717a);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.phpew-section-ref-title { color: var(--phpew-fg, #e4e4e7); }
.phpew-section-ref--empty,
.phpew-section-ref--missing { color: var(--phpew-error, #dc2626); font-style: italic; }

/* ── Repeater editor ────────────────────────────────────────────────────── */
.phpew-admin-repeater-editor {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.phpew-admin-repeater-map {
  border: 1px solid var(--phpew-border, #3f3f46);
  border-radius: var(--phpew-radius, .25rem);
  padding: 0.75rem;
  margin-top: 0.25rem;
}
.phpew-admin-repeater-map legend {
  padding: 0 0.4rem;
  font-size: var(--phpew-fs-sm, .85rem);
  color: var(--phpew-muted, #71717a);
}
.phpew-admin-repeater-map-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.4rem 0;
}
.phpew-admin-repeater-map-label {
  flex: 0 0 8rem;
  font-size: var(--phpew-fs-sm, .85rem);
  color: var(--phpew-muted, #71717a);
}

/* ── Content source panel ──────────────────────────────────────────────── */

.phpew-admin-pane-title-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.phpew-source-empty {
  padding: 1rem 0.75rem;
}
.phpew-source-entry {
  padding: 0.75rem;
  border-bottom: 1px solid var(--phpew-border, #ddd);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.phpew-source-badge {
  display: inline-block;
  font-size: var(--phpew-fs-xs, 0.75rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--phpew-accent, #6366f1) 15%, var(--phpew-card-bg, #fff));
  color: var(--phpew-accent, #6366f1);
}
.phpew-source-badge--advanced {
  background: color-mix(in srgb, var(--phpew-warning, #f59e0b) 15%, var(--phpew-card-bg, #fff));
  color: var(--phpew-warning, #b45309);
}
.phpew-source-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.phpew-source-card-thumb {
  width: 3.5rem;
  height: 2.5rem;
  object-fit: cover;
  border-radius: var(--phpew-radius-sm, 3px);
  flex-shrink: 0;
}
.phpew-source-card-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.phpew-source-card-title {
  font-size: var(--phpew-fs-sm, 0.875rem);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phpew-source-card-meta {
  font-size: var(--phpew-fs-xs, 0.75rem);
}
.phpew-source-remove {
  align-self: flex-start;
  font-size: var(--phpew-fs-xs, 0.75rem);
  background: none;
  border: none;
  color: var(--phpew-danger, #ef4444);
  cursor: pointer;
  padding: 0;
}
.phpew-source-remove:hover { text-decoration: underline; }
.phpew-source-actions {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
/* New-channel dialog (native <dialog>; backdrop + centring come for free). */
.phpew-newchannel-dialog {
  border: 1px solid var(--phpew-border, #cbd5e1);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 24rem;
}
.phpew-newchannel-dialog::backdrop { background: rgba(15, 23, 42, 0.4); }
.phpew-newchannel-dialog h2 { margin: 0 0 0.5rem; font-size: 1.05rem; }
.phpew-newchannel-dialog label { display: block; margin: 0.5rem 0; font-size: var(--phpew-fs-sm, 0.85rem); }
.phpew-newchannel-dialog input { width: 100%; margin-top: 0.25rem; }
.phpew-newchannel-actions { display: flex; gap: 0.5rem; justify-content: flex-end; margin-top: 1rem; }

/* Layer visibility toggle (the eye) on each stacked block. */
.phpew-source-vis {
  font-size: var(--phpew-fs-xs, 0.75rem);
  padding: 0.15rem 0.5rem 0.15rem 1.4rem;
  border-radius: 999px;
  border: 1px solid var(--phpew-border, #cbd5e1);
  background: var(--phpew-surface, #fff) no-repeat 0.5rem center / 0.75rem;
  color: var(--phpew-muted, #64748b);
  cursor: pointer;
  position: relative;
  /* open eye */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
}
.phpew-source-vis--off {
  color: var(--phpew-muted, #94a3b8);
  border-style: dashed;
  /* eye with a slash */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-10-8-10-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 10 8 10 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24'/%3E%3Cline x1='1' y1='1' x2='23' y2='23'/%3E%3C/svg%3E");
}
/* A hidden block stays in the editor but reads as "off". */
.phpew-source-entry--hidden {
  opacity: 0.55;
}
.phpew-source-entry--hidden .phpew-source-badge,
.phpew-source-entry--hidden [class$="-title"] {
  text-decoration: line-through;
}

/* Signal-chain Send/Receive control on each stacked block. */
.phpew-source-jack {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--phpew-border, #e2e8f0);
}
.phpew-jack-toggle {
  font-size: var(--phpew-fs-xs, 0.75rem);
  font-weight: 600;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  border: 1px solid var(--phpew-border, #cbd5e1);
  background: var(--phpew-surface, #fff);
  color: var(--phpew-muted, #64748b);
  cursor: pointer;
  line-height: 1.4;
}
.phpew-jack-toggle:hover { border-color: var(--phpew-accent, #6366f1); }
.phpew-jack-toggle--send    { border-color: #1D9E75; color: #1D9E75; background: rgba(29,158,117,.08); }
.phpew-jack-toggle--receive { border-color: #6366f1; color: #6366f1; background: rgba(99,102,241,.08); }
.phpew-jack-toggle--both    { border-color: #ba7517; color: #ba7517; background: rgba(186,117,23,.08); }
.phpew-jack-pill {
  font-size: var(--phpew-fs-xs, 0.72rem);
  font-family: monospace;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  background: rgba(99,102,241,.1);
  color: #6366f1;
}
.phpew-jack-pill--send { background: rgba(29,158,117,.12); color: #1D9E75; }
.phpew-jack-pill--dead { background: rgba(192,57,43,.1); color: #c0392b; }
.phpew-jack-verb {
  font-size: var(--phpew-fs-xs, 0.75rem);
  padding: 0.15rem 0.35rem;
  border-radius: 4px;
  border: 1px solid var(--phpew-border, #cbd5e1);
  background: var(--phpew-surface, #fff);
}
.phpew-jack-param {
  font-size: var(--phpew-fs-xs, 0.75rem);
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  border: 1px solid var(--phpew-border, #cbd5e1);
  background: var(--phpew-surface, #fff);
  min-width: 12rem;
  flex: 1 1 12rem;
}
.phpew-jack-cordnote {
  flex-basis: 100%;
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-muted, #71717a);
  text-decoration: none;
}
.phpew-jack-cordnote:hover { color: var(--phpew-fg, #18181b); text-decoration: underline; }
.phpew-jack-fieldnote {
  flex-basis: 100%;
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-muted, #71717a);
  padding: 0.3rem 0.45rem;
  border-left: 2px solid var(--phpew-accent, #6366f1);
  background: var(--phpew-surface, #fafafa);
  border-radius: 0 4px 4px 0;
}
.phpew-jack-fieldnote a { color: var(--phpew-accent, #6366f1); }

/* Template editor: per-field Signals form (Send/Receive jacks) */
.pt-field-signals {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--phpew-border, #e4e4e7);
  border-radius: 6px;
  background: var(--phpew-surface, #fafafa);
}
.pt-field-signals-title {
  font-size: var(--phpew-fs-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phpew-muted, #71717a);
  margin-bottom: 0.35rem;
}
.pt-field-signals-detail {
  margin: 0.25rem 0 0.5rem 0.85rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--phpew-border, #e4e4e7);
}
.pt-field-signals-check { display: flex; align-items: center; gap: 0.4rem; }
.phpew-source-edit {
  align-self: flex-start;
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-accent, #6366f1);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}
.phpew-source-edit:hover { text-decoration: underline; }

.phpew-source-advanced-json {
  font-size: 0.7rem;
  background: var(--phpew-subtle, #f9fafb);
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius-sm, 3px);
  padding: 0.4rem 0.6rem;
  margin: 0;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.phpew-source-missing {
  font-size: var(--phpew-fs-sm, 0.875rem);
}

/* Picker panel */
.phpew-source-picker {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.phpew-source-tabs {
  display: flex;
  border-bottom: 1px solid var(--phpew-border, #ddd);
}
.phpew-source-tab {
  flex: 1;
  padding: 0.5rem 0.75rem;
  font-size: var(--phpew-fs-sm, 0.875rem);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  color: var(--phpew-muted, #6b7280);
}
.phpew-source-tab--active {
  border-bottom-color: var(--phpew-accent, #6366f1);
  color: var(--phpew-fg, #111);
  font-weight: 600;
}
.phpew-source-panel {
  padding: 0.75rem;
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
/* Respect the HTML `hidden` attribute on the tab panels — the flex display
   above otherwise wins over the UA `[hidden] { display: none }`, so both the
   Specific-item and Data-source panels would show at once. */
.phpew-source-panel[hidden] { display: none; }
.phpew-source-search {
  width: 100%;
  box-sizing: border-box;
}
.phpew-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius-sm, 3px);
}
.phpew-source-list-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--phpew-border, #ddd);
  transition: background 0.1s;
}
.phpew-source-list-item:last-child { border-bottom: none; }
.phpew-source-list-item--active {
  background: color-mix(in srgb, var(--phpew-accent, #6366f1) 14%, var(--phpew-card-bg, #fff));
}
.phpew-source-list-item:hover {
  background: color-mix(in srgb, var(--phpew-accent, #6366f1) 8%, var(--phpew-card-bg, #fff));
}
.phpew-source-list-thumb {
  width: 3rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.phpew-source-list-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.phpew-source-list-title {
  font-size: var(--phpew-fs-sm, 0.875rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phpew-source-list-meta {
  font-size: var(--phpew-fs-xs, 0.75rem);
}
.phpew-source-list-empty {
  padding: 0.75rem;
}
.phpew-source-picker-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--phpew-border, #ddd);
}
.phpew-source-show-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  font-size: var(--phpew-fs-sm, 0.875rem);
  color: var(--phpew-muted, #888);
  cursor: pointer;
}

/* Data-source picker: renderer template selector + use button spacing. */
.phpew-source-renderer { display: block; margin-top: 0.5rem; }
.phpew-source-usebtn   { margin-top: 0.5rem; }

/* Data-source field map — bind renderer fields to datasource keys. */
.phpew-source-fieldmap { margin-top: 0.6rem; }
.phpew-source-fieldmap-title { font-size: 0.8rem; font-weight: 600; color: var(--phpew-fg-muted, #94a3b8); margin-bottom: 0.35rem; }
.phpew-source-fieldmap-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
.phpew-source-fieldmap-key { flex: 0 0 9rem; font-family: var(--phpew-font-mono, monospace); font-size: 0.8rem; }
.phpew-source-fieldmap-row .phpew-admin-input { flex: 1 1 auto; }

/* Multi-input source list — one row per input, with reorder controls. */
.phpew-source-entry + .phpew-source-entry {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--phpew-border, #e2e8f0);
}
.phpew-source-reorder {
  font-size: var(--phpew-fs-xs, 0.75rem);
  line-height: 1;
  width: 1.4rem;
  height: 1.4rem;
  background: var(--phpew-card-bg, #fff);
  color: var(--phpew-fg, #111);
  border: 1px solid var(--phpew-border, #cbd5e1);
  border-radius: 0.25rem;
  cursor: pointer;
}
.phpew-source-reorder:disabled { opacity: 0.4; cursor: not-allowed; }
.phpew-source-reorder:hover:not(:disabled) { background: var(--phpew-surface, #f1f5f9); }

/* List options (datasource search / pagination / row actions) in the source picker */
.phpew-source-listopts { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,0.12); }
.phpew-source-toggle { display: flex; align-items: center; gap: .4rem; }
.phpew-source-rowactions { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0; }
.phpew-rowaction { display: flex; gap: .4rem; align-items: center; }
.phpew-rowaction .pt-ra-action { flex: 1 1 40%; }
.phpew-rowaction .pt-ra-label, .phpew-rowaction .pt-ra-confirm { flex: 1 1 25%; }


}

.phpew-section--wiggle-coming-soon {
    position: fixed !important;
    inset: 0 !important;
    margin: 0 !important;
    padding: 2rem !important;
    max-width: none !important;
    width: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1.5rem !important;
    text-align: center !important;
    background: #09090b !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
}
.phpew-section--wiggle-coming-soon .phpew-article-excerpt-thumb,
.phpew-section--wiggle-coming-soon .phpew-article-excerpt-content {
    margin: 0 !important;
    padding: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    transform: none !important;
    position: static !important;
}
.phpew-section--wiggle-coming-soon .phpew-section-image {
    max-width: 20rem !important;
    width: 100% !important;
    height: auto !important;
    position: static !important;
    margin: 0 auto !important;
    transform: none !important;
}
.phpew-section--wiggle-coming-soon .phpew-section-longtext {
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    opacity: 0.85;
}
body { overflow: hidden; }


/* ── Wiggle toolbar internals (framework toolbar; ported from wiggle.css) ── */
.phpew-layout-wiggle-interface .pu-toolbar { display:flex; gap:3px; align-items:center; }
.pu-tool-btn { background:none; border:none; color:rgba(255,255,255,.45); cursor:pointer; padding:6px; border-radius:var(--phpew-radius-sm,4px); display:flex; align-items:center; justify-content:center; width:32px; height:32px; transition:color .1s, background .1s, box-shadow .1s; box-shadow:inset 1px 0 0 rgba(255,255,255,.08), inset -1px 0 0 rgba(255,255,255,.08); }
.pu-tool-btn:hover { color:#fff; background:#2d2d4e; box-shadow:inset 1px 0 0 rgba(255,255,255,.35), inset -1px 0 0 rgba(255,255,255,.35); }
.pu-tool-btn.active { color:#fff; background:var(--phpew-accent); }
.pu-toolbar .phpew-btn-icon { width:16px; height:16px; display:block; flex:none; }
.pu-toolbar-sep { width:1px; height:20px; background:rgba(255,255,255,.12); align-self:center; margin:0 1px; flex:none; }
.pu-tool-split { display:flex; align-items:stretch; position:relative; }
.pu-tool-split__arrow { background:none; border:none; color:rgba(255,255,255,.35); cursor:pointer; font-size:.6rem; padding:0 3px; border-radius:0 var(--phpew-radius-sm,4px) var(--phpew-radius-sm,4px) 0; line-height:1; align-self:stretch; display:flex; align-items:center; }
.pu-tool-split__arrow:hover { color:#fff; background:#2d2d4e; }
.pu-draw-mode-menu:not([hidden]) { position:absolute; top:calc(100% + 4px); left:0; background:rgba(14,14,22,.96); border:1px solid rgba(255,255,255,.15); border-radius:var(--phpew-radius-sm,4px); box-shadow:0 4px 14px rgba(0,0,0,.5); z-index:500; white-space:nowrap; padding:3px; display:flex; flex-direction:column; }
.pu-draw-mode-item { display:flex; align-items:center; gap:.4rem; background:none; border:none; color:rgba(255,255,255,.8); cursor:pointer; font-size:.78rem; padding:.3rem .5rem; width:100%; text-align:left; border-radius:var(--phpew-radius-sm,4px); }
.pu-draw-mode-item:hover { background:rgba(255,255,255,.1); color:#fff; }
.pu-draw-mode-item .phpew-btn-icon { width:14px; height:14px; display:block; flex:none; }
.pu-snap-step { width:42px; height:24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); border-radius:var(--phpew-radius-sm,4px); color:rgba(255,255,255,.5); font-size:11px; font-family:var(--phpew-font-mono,monospace); padding:0 4px; text-align:center; outline:none; -moz-appearance:textfield; flex:none; }
.pu-snap-step::-webkit-outer-spin-button, .pu-snap-step::-webkit-inner-spin-button { -webkit-appearance:none; }
.pu-snap-step:focus { border-color:rgba(255,255,255,.3); color:#fff; }
.pu-bg-swatch { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; border-radius:4px; border:1px solid rgba(255,255,255,.15); cursor:pointer; overflow:hidden; position:relative; flex:none; }
.pu-bg-swatch:hover { border-color:rgba(255,255,255,.3); }
.pu-bg-swatch input[type="color"] { appearance:none; -webkit-appearance:none; border:0; background:transparent; padding:0; width:200%; height:200%; cursor:pointer; }
.pu-bg-swatch input[type="color"]::-webkit-color-swatch-wrapper { padding:0; }
.pu-bg-swatch input[type="color"]::-webkit-color-swatch { border:0; border-radius:0; }
.pu-bg-swatch input[type="color"]::-moz-color-swatch { border:0; }
.pu-canvas-tools:not([hidden]) { display:inline-flex; align-items:center; gap:3px; }
.pu-canvas-width { width:52px; }
/* Transport placeholder buttons (timeline lands later): dimmed + inert. */
.pu-tp--off { opacity:.32; pointer-events:none; }


/* ── Region surface fills (ported from wiggle.css; keeps chrome consistent) ── */
.phpew-layout-wiggle-interface > [data-area] { background: var(--wg-surface, #191922); }
.phpew-layout-wiggle-interface > [data-area="panel"],
.phpew-layout-wiggle-interface > [data-area="scene"] { background: var(--wg-surface-2, #14141c); }
.phpew-layout-wiggle-interface > [data-area="main"] { background: var(--wg-canvas, #0c0c12); }


/* Canvas wrap fills the main viewport. !important so the physics preview's
   `wrap.style.position ||= 'relative'` inline write can't override it (replaces
   the old JS inline pin). */
.phpew-layout-wiggle-interface .pu-canvas-wrap { position: absolute !important; inset: 0; }


/* ── File menu (the create-scene form, compacted into the menu strip) ── */
.pu-file-menu { padding: 3px 8px; display: flex; align-items: center; }
.pu-file-menu .phpew-form-title, .pu-file-menu .phpew-form-intro, .pu-file-menu .phpew-form-heading { display: none; }
.pu-file-menu .phpew-form-body { display: flex; gap: 6px; align-items: center; margin: 0; }
.pu-file-menu .phpew-form-row { margin: 0; }
.pu-file-menu .phpew-form-label { display: none; }
.pu-file-menu .phpew-form-row:has(.phpew-form-input--select) { display: none; }
.pu-file-menu .phpew-honeypot { display: none; }
.pu-file-menu .phpew-form-input { height: 26px; padding: 2px 8px; font-size: 12px; width: 150px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); border-radius: 4px; color: #e6e8ee; }
.pu-file-menu .phpew-form-submit { height: 26px; padding: 2px 12px; font-size: 12px; margin: 0; white-space: nowrap; }
.pu-file-menu .phpew-form-error { color: #f87171; font-size: 11px; margin-left: 6px; }


/* ── Snazy file menu + scenes popup (toggled by the file.open jack) ── */
.pu-file-menu { display:flex; align-items:flex-end; gap:.5rem; }
.pu-file-menu .phpew-form-body { display:flex; align-items:flex-end; gap:.5rem; flex-wrap:nowrap; margin:0; }
.pu-file-menu .phpew-form-row { margin:0; }
.pu-file-menu .phpew-form-label { font-size:10px; text-transform:uppercase; letter-spacing:.05em; opacity:.6; margin-bottom:2px; }
.pu-file-menu .phpew-form-input { height:30px; padding:0 .5rem; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:6px; color:#e9eaf0; }
.pu-file-menu .phpew-form-signal-btn { height:30px; padding:0 .85rem; border-radius:6px; border:1px solid rgba(255,255,255,.14); background:#2d2d4e; color:#fff; font-weight:600; cursor:pointer; }
.pu-file-menu .phpew-form-signal-btn:hover { background:#3a3a63; }
/* the scenes list: a floating toast, hidden until file.open toggles .open */
.pu-scene-popup { position:fixed; top:56px; left:50%; width:min(560px,92vw); max-height:62vh; overflow:auto;
  background:var(--wg-surface-2,#14141c); border:1px solid rgba(255,255,255,.14); border-radius:14px;
  box-shadow:0 22px 60px rgba(0,0,0,.6); padding:.4rem; z-index:1000;
  opacity:0; visibility:hidden; pointer-events:none; transform:translateX(-50%) translateY(-8px);
  transition:opacity .15s ease, transform .15s ease; }
.pu-scene-popup.open { opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.pu-scene-popup table { width:100%; border-collapse:collapse; }
.pu-scene-popup td { padding:.55rem .7rem; border-bottom:1px solid rgba(255,255,255,.06); color:#cfd3e0; }
.pu-scene-popup tr:last-child td { border-bottom:0; }
.pu-scene-popup tr:hover td { background:rgba(255,255,255,.05); }
.pu-scene-popup a { color:#a78bfa; text-decoration:none; font-weight:600; }
.pu-scene-popup a:hover { color:#fff; }


/* the scenes-popup signal host must be a real box (signal hosts default to display:contents) */
.pu-scene-popup { display:block; }