@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; }
/* 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; }
.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_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; }

/* Snazy admin-pane styles. Bundled into the active theme stylesheet at
   boot via ThemeManager::addExtensionCss() (Snazy\Admin\Css::register). */

/* ── Signup page (apex tenant) ───────────────────────────────────────── */

.snazy-signup {
  max-width: 42rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.snazy-signup-title    { font-size: 2.5rem; margin: 0 0 .5rem; }
.snazy-signup-tagline  { font-size: 1.15rem; color: var(--phpew-muted); margin: 0 0 2.5rem; }

.snazy-signup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.snazy-signup-row    { display: flex; flex-direction: column; gap: .25rem; }
.snazy-signup-row[hidden] { display: none; }
.snazy-signup-row label { font-weight: 600; }
.snazy-signup-row small { color: var(--phpew-muted); }
.snazy-signup-row input {
  padding: .65rem .75rem;
  background: var(--phpew-surface);
  color: var(--phpew-fg);
  border: 1px solid var(--phpew-border);
  border-radius: 4px;
  font-size: 1rem;
}
.snazy-signup-row input:focus { outline: 2px solid var(--phpew-accent); }

.snazy-signup-btn {
  /* inline-flex (not the <a> default of inline) so vertical padding is
     contained in the button box. As a raw inline <a> -- e.g. the upgrade
     pane, which isn't a flex container -- inline padding bleeds upward and
     overlaps the element above it ("Continue to payment" over the Card row). */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .75rem 1.25rem;
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  border: 0;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.snazy-signup-btn:hover { background: var(--phpew-accent-hover); }

.snazy-signup-flash       { padding: .75rem 1rem; border-radius: 4px; margin: 0 0 1.5rem; }
.snazy-signup-flash--err  { background: color-mix(in srgb, var(--phpew-error) 25%, transparent); color: var(--phpew-error); }
.snazy-signup-flash--ok   { background: color-mix(in srgb, var(--phpew-success) 25%, transparent); color: var(--phpew-success); }

.snazy-signup-plan-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
}
.snazy-signup-plan-card {
  position: relative;
  padding: 1rem 1.125rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: 8px;
  cursor: pointer;
  font-weight: normal;
  transition: border-color 120ms ease, background 120ms ease;
}
.snazy-signup-plan-card input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }
.snazy-signup-plan-card:hover { border-color: var(--phpew-accent); }
.snazy-signup-plan-card.is-selected {
  border-color: var(--phpew-accent);
  background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
}
.snazy-signup-plan-card-name  { display: block; font-size: 1.1rem; font-weight: 700; margin-bottom: .25rem; }
.snazy-signup-plan-card-price { display: block; font-size: .95rem; opacity: .85; }
.snazy-signup-plan-card-blurb { display: block; font-size: .8rem; opacity: .65; margin-top: .5rem; }

.snazy-signup-billing {
  display: inline-flex;
  gap: 0;
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  overflow: hidden;
}
.snazy-signup-billing label {
  padding: .5rem .85rem;
  cursor: pointer;
  font-weight: 500;
}
.snazy-signup-billing label.is-selected {
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
}
.snazy-signup-billing input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; }

.snazy-signup-save-badge {
  display: inline-block;
  margin-left: .375rem;
  padding: 1px 6px;
  background: var(--phpew-success);
  color: #fff;
  font-size: .7rem;
  border-radius: 999px;
  vertical-align: middle;
}

.snazy-signup-overlay { display: none; }
.snazy-signup-overlay.is-active {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  z-index: 9999;
}
.snazy-signup-overlay-card {
  background: var(--phpew-card-bg);
  padding: 2rem 2.5rem;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
}
.snazy-signup-spinner {
  width: 48px; height: 48px;
  margin: 0 auto 1rem;
  border: 4px solid var(--phpew-border);
  border-top-color: var(--phpew-accent);
  border-radius: 50%;
  animation: snazy-signup-spin 0.8s linear infinite;
}
@keyframes snazy-signup-spin { to { transform: rotate(360deg); } }

.snazy-signup-price-strike {
  color: var(--phpew-muted);
  text-decoration: line-through;
  font-weight: 400;
  opacity: 0.7;
  margin-right: 0.125rem;
}

.snazy-signup-billing-inline {
  display: flex;
  flex-direction: column;
  gap: .375rem;
  margin-top: .85rem;
  padding-top: .85rem;
  border-top: 1px solid var(--phpew-border);
}
.snazy-signup-billing-opt {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .5rem .65rem;
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  background: var(--phpew-card-bg);
}
.snazy-signup-billing-opt:hover { border-color: var(--phpew-accent); }
.snazy-signup-billing-opt.is-selected {
  border-color: var(--phpew-accent);
  background: color-mix(in srgb, var(--phpew-accent) 15%, transparent);
}
.snazy-signup-billing-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.snazy-signup-pay-opts {
  display: flex;
  gap: .5rem;
  margin-top: .35rem;
}
.snazy-signup-pay-opt {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem .65rem;
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 500;
  background: var(--phpew-card-bg);
}
.snazy-signup-pay-opt:hover { border-color: var(--phpew-accent); }
.snazy-signup-pay-opt.is-selected {
  border-color: var(--phpew-accent);
  background: color-mix(in srgb, var(--phpew-accent) 15%, transparent);
}
.snazy-signup-pay-opt input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.snazy-signup-save-badge--inline {
  background: var(--phpew-accent);
}

.snazy-signup-compare {
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  padding: .75rem 1rem;
  background: var(--phpew-card-bg);
}
.snazy-signup-compare summary {
  cursor: pointer;
  font-weight: 600;
  font-size: .95rem;
}
.snazy-signup-compare[open] summary { margin-bottom: .75rem; }
.snazy-signup-feature-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.snazy-signup-feature-table th,
.snazy-signup-feature-table td {
  padding: .4rem .6rem;
  text-align: left;
  border-bottom: 1px solid var(--phpew-border);
}
.snazy-signup-feature-table thead th {
  font-weight: 700;
  text-align: center;
}
.snazy-signup-feature-table thead th:first-child { text-align: left; }
.snazy-signup-feature-table tbody td:not(:first-child) {
  text-align: center;
  font-size: .85rem;
}
.snazy-signup-feature-table tbody tr:last-child td { border-bottom: none; }

.snazy-usage-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1rem;
}
.snazy-usage-table th,
.snazy-usage-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--phpew-border);
  text-align: left;
  vertical-align: middle;
}
.snazy-usage-table thead th {
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--phpew-muted);
}
.snazy-usage-table tbody td:nth-child(2),
.snazy-usage-table tbody td:nth-child(3),
.snazy-usage-table tbody td:nth-child(4) {
  font-variant-numeric: tabular-nums;
  font-size: .95rem;
}
.snazy-usage-bar-cell { width: 40%; }

/* Capacity pane — compact tables that size to their content instead of
   spanning the full page (the usage table is 100% wide for its 5 columns). */
.snazy-capacity-table {
  width: 100%;
  max-width: 54rem;
  border-collapse: collapse;
  margin: .5rem 0 1rem;
}
.snazy-capacity-table th,
.snazy-capacity-table td {
  padding: .35rem 1.25rem .35rem .5rem;
  border-bottom: 1px solid var(--phpew-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}
.snazy-capacity-table thead th {
  font-weight: 700;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--phpew-muted);
}
.snazy-capacity-table th:not(:first-child),
.snazy-capacity-table td:not(:first-child) {
  text-align: right;
  padding-right: .5rem;
  font-variant-numeric: tabular-nums;
}

/* Capacity trend charts — inline SVG, coloured via these classes (no inline
   styles / no script, so CSP-safe). */
.snazy-chart {
  width: 100%;
  max-width: 54rem;
  height: auto;
  display: block;
  margin: .25rem 0 1.25rem;
}
.snazy-chart-grid { stroke: var(--phpew-border); stroke-width: 1; }
.snazy-chart-line { fill: none; stroke-width: 2; }
.snazy-chart-line--req   { stroke: var(--phpew-muted); }
.snazy-chart-line--human { stroke: #2563eb; }
.snazy-chart-line--load  { stroke: #2563eb; }
.snazy-chart-dot--req   { fill: var(--phpew-muted); }
.snazy-chart-dot--human { fill: #2563eb; }
.snazy-chart-dot--load  { fill: #2563eb; }
.snazy-chart-label { fill: var(--phpew-muted); font-size: 11px; }
.snazy-chart-label--end { text-anchor: end; }
.snazy-chart-legend { margin: .25rem 0; font-size: .85rem; color: var(--phpew-muted); }
.snazy-chart-key { margin-right: 1rem; }
.snazy-chart-key::before {
  content: '';
  display: inline-block;
  width: .8rem;
  height: .2rem;
  margin-right: .35rem;
  vertical-align: middle;
  border-radius: 2px;
}
.snazy-chart-key--req::before   { background: var(--phpew-muted); }
.snazy-chart-key--human::before { background: #2563eb; }
.snazy-chart-key--load::before  { background: #2563eb; }

/* Per-customer line palette (cycled by index). */
.snazy-chart-line--c0 { stroke: #2563eb; } .snazy-chart-dot--c0 { fill: #2563eb; } .snazy-chart-key--c0::before { background: #2563eb; }
.snazy-chart-line--c1 { stroke: #e6194b; } .snazy-chart-dot--c1 { fill: #e6194b; } .snazy-chart-key--c1::before { background: #e6194b; }
.snazy-chart-line--c2 { stroke: #3cb44b; } .snazy-chart-dot--c2 { fill: #3cb44b; } .snazy-chart-key--c2::before { background: #3cb44b; }
.snazy-chart-line--c3 { stroke: #f58231; } .snazy-chart-dot--c3 { fill: #f58231; } .snazy-chart-key--c3::before { background: #f58231; }
.snazy-chart-line--c4 { stroke: #911eb4; } .snazy-chart-dot--c4 { fill: #911eb4; } .snazy-chart-key--c4::before { background: #911eb4; }
.snazy-chart-line--c5 { stroke: #00b8d4; } .snazy-chart-dot--c5 { fill: #00b8d4; } .snazy-chart-key--c5::before { background: #00b8d4; }
.snazy-chart-line--c6 { stroke: #f032e6; } .snazy-chart-dot--c6 { fill: #f032e6; } .snazy-chart-key--c6::before { background: #f032e6; }
.snazy-chart-line--c7 { stroke: #9a6324; } .snazy-chart-dot--c7 { fill: #9a6324; } .snazy-chart-key--c7::before { background: #9a6324; }
.snazy-chart-line--c8 { stroke: #469990; } .snazy-chart-dot--c8 { fill: #469990; } .snazy-chart-key--c8::before { background: #469990; }
.snazy-chart-line--c9 { stroke: #808000; } .snazy-chart-dot--c9 { fill: #808000; } .snazy-chart-key--c9::before { background: #808000; }
.snazy-usage-bar {
  height: 8px;
  background: var(--phpew-border);
  border-radius: 999px;
  overflow: hidden;
}
.snazy-usage-bar-fill {
  height: 100%;
  background: var(--phpew-accent);
  transition: width .25s ease;
  width: 0;
}
.snazy-usage-row.is-warning  .snazy-usage-bar-fill { background: #d97706; }
.snazy-usage-row.is-critical .snazy-usage-bar-fill { background: var(--phpew-error); }
.snazy-usage-upsell {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
  border-radius: 6px;
  border-left: 3px solid var(--phpew-accent);
}

.snazy-signup-auto-slug {
  padding: .75rem 1rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  font-size: 1rem;
}
.snazy-signup-auto-slug code {
  background: none;
  padding: 0;
  color: var(--phpew-fg);
}
.snazy-signup-auto-slug code #snazy-sample-slug {
  color: var(--phpew-muted);
  font-style: italic;
}

/* Upgrade gate block (rendered inside a pane when Free hits a Pro feature). */
.snazy-upgrade-block {
  margin: 2rem auto;
  max-width: 32rem;
  padding: 2rem 2.5rem;
  text-align: center;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: 8px;
}
.snazy-upgrade-block-icon  { font-size: 2.5rem; margin-bottom: .5rem; }
.snazy-upgrade-block-title { margin: 0 0 .5rem; }
.snazy-upgrade-block-body  { color: var(--phpew-muted); margin: 0 0 1.5rem; }

/* Upgrade page (full ?page=upgrade view). */
.snazy-upgrade-page {
  max-width: 48rem;
  margin: 0 auto;
  padding: 3rem 1.5rem;
}
.snazy-upgrade-lead {
  font-size: 1.1rem;
  color: var(--phpew-muted);
  margin: 0 0 2rem;
}
.snazy-upgrade-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .75rem;
  margin: 0 0 2rem;
}
.snazy-upgrade-feature-table tbody tr.is-highlighted {
  background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
}
.snazy-upgrade-feature-table tbody tr.is-highlighted td strong {
  color: var(--phpew-accent);
}
.snazy-upgrade-cta {
  margin: 2rem 0 0;
  text-align: center;
}

/* ── Account-first signup additions ─────────────────────────────────────── */
.snazy-signup-check { display: flex; align-items: flex-start; gap: .5rem; font-size: var(--phpew-fs-sm); cursor: pointer; }
.snazy-signup-check input { margin-top: .15rem; }
.snazy-signup-code-input {
    font-size: 1.75rem; letter-spacing: .6rem; text-align: center; font-family: ui-monospace, monospace;
}
.snazy-signup-linkbtn {
    background: none; border: none; padding: 0; color: var(--phpew-accent);
    text-decoration: underline; cursor: pointer; font: inherit;
}
.snazy-signup-plan-card.is-disabled { opacity: .5; cursor: not-allowed; }

.snazy-sites .snazy-sites-list { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.snazy-site-row {
    display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem;
    border: 1px solid var(--phpew-border, rgba(0,0,0,.12)); border-radius: var(--phpew-radius, .375rem);
    margin-bottom: .6rem;
}
.snazy-site-meta { display: flex; flex-direction: column; gap: .15rem; flex: 1; min-width: 0; }
.snazy-site-meta small { color: var(--phpew-muted); font-size: var(--phpew-fs-sm); }
.snazy-site-row .snazy-signup-btn { margin: 0; width: auto; flex: none; padding: .45rem 1.1rem; }
.snazy-site-actions { display: flex; align-items: center; gap: .5rem; flex: none; }
.snazy-site-reroll, .snazy-site-remove { margin: 0; }
.snazy-site-row--pending { opacity: .7; }
.snazy-site-pending { color: var(--phpew-error); font-weight: 600; }
.snazy-site-note { color: var(--phpew-muted); font-size: var(--phpew-fs-sm); align-self: center; }
/* Destructive action (Remove site) — distinct from the accent primary. */
.snazy-signup-btn--danger {
    background: transparent;
    color: var(--phpew-error);
    border: 1px solid color-mix(in srgb, var(--phpew-error) 50%, var(--phpew-border));
    font-weight: 500;
}
.snazy-signup-btn--danger:hover {
    background: var(--phpew-error);
    color: #fff;
    border-color: var(--phpew-error);
}
/* Secondary (ghost) button -- used for "Re-roll address" beside the primary Open. */
.snazy-signup-btn--ghost {
    background: transparent;
    color: var(--phpew-accent);
    border: 1px solid var(--phpew-border-strong, var(--phpew-border));
    font-weight: 500;
}
.snazy-signup-btn--ghost:hover {
    background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
}
/* Pro "change address" inline field: [ new-address ][.snazy.app] [Change] */
.snazy-site-changeslug { display: flex; align-items: center; gap: .5rem; margin: 0; }
.snazy-slug-field {
    display: inline-flex; align-items: center;
    border: 1px solid var(--phpew-border-strong, var(--phpew-border));
    border-radius: 4px; overflow: hidden; background: var(--phpew-bg);
}
.snazy-slug-input {
    border: 0; padding: .45rem .55rem; background: transparent; color: inherit;
    font: inherit; width: 9rem; min-width: 0; outline: none;
}
.snazy-slug-suffix { padding: .45rem .55rem .45rem 0; color: var(--phpew-muted); white-space: nowrap; }

/* ─────────────────────────────────────────────────────────────────────────
 * Snazy starter sites — CSS
 *
 * Layered into the active theme stylesheet via
 * ThemeManager::addExtensionCss(). Three concerns:
 *
 *   1. Per-layout visual variants  (.phpew-layout-snazy-*)
 *   2. Per-block responsive spec   (.phpew-section--snazy-*)
 *   3. Wizard + edit-pill UI       (.snazy-wizard-*, .snazy-edit-pill, .snazy-banner-*)
 *
 * Viewport tiers (matching Page::VIEWPORT_KEYS):
 *   mobile  < 768
 *   tablet  768–1023
 *   desktop 1024–1279
 *   wide    ≥ 1280
 *
 * No min-height / min-width — per CLAUDE.md rule.
 * ───────────────────────────────────────────────────────────────────────── */


/* ── Layout variants (v2 named-grid) ──────────────────────────────────────
 * JsonLayoutRenderer emits a `.phpew-layout-<slug>` CSS grid plus one
 * `[data-area]` wrapper per named area. The grid tracks come from the
 * layout definition (+ the renderer's minmax(0,1fr) column default), so
 * nothing here touches column sizing — these rules only dress the areas:
 * a centered content column, section rhythm, and the per-layout full-bleed
 * / sidebar treatments. All of it is overridable from the style editor. */

.phpew-layout-snazy-tall-marketing,
.phpew-layout-snazy-tall-marketing-6row,
.phpew-layout-snazy-split-hero,
.phpew-layout-snazy-cinema-gallery,
.phpew-layout-snazy-simple-page,
.phpew-layout-snazy-contact-page,
.phpew-layout-snazy-single,
.phpew-layout-snazy-sidebar-cv {
    --snazy-gutter: 0;
    --snazy-section-gap: 2.5rem;
    --snazy-content-max: 100%;
}

/* Stacked layouts: every area is a centered content column with vertical
 * section rhythm and a side gutter. Sections that need to span full width
 * (heroes, press/CTA bands, galleries) do it themselves via the `full-bleed`
 * behavior, which breaks out from THIS centered column to the viewport via
 * negative-margin math. That math needs a centered, constrained origin — so
 * every area stays constrained+centered here. Forcing an area full-width in
 * the layout is what made the breakout overflow. The layout constrains; the
 * behavior owns the bleed. */
.phpew-layout-snazy-tall-marketing > [data-area],
.phpew-layout-snazy-tall-marketing-6row > [data-area],
.phpew-layout-snazy-split-hero > [data-area],
.phpew-layout-snazy-cinema-gallery > [data-area],
.phpew-layout-snazy-simple-page > [data-area],
.phpew-layout-snazy-contact-page > [data-area],
.phpew-layout-snazy-single > [data-area] {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--snazy-content-max) + 2 * var(--snazy-gutter));
    margin-inline: auto;
    padding: var(--snazy-section-gap) var(--snazy-gutter);
}

/* Hero (first area) abuts the chrome — no top padding. */
.phpew-layout-snazy-tall-marketing > [data-area]:first-child,
.phpew-layout-snazy-tall-marketing-6row > [data-area]:first-child,
.phpew-layout-snazy-split-hero > [data-area]:first-child,
.phpew-layout-snazy-cinema-gallery > [data-area]:first-child,
.phpew-layout-snazy-simple-page > [data-area]:first-child,
.phpew-layout-snazy-contact-page > [data-area]:first-child {
    padding-top: 0;
}

/* ── Split Hero — the hero block splits into a side-by-side text / image
 * grid. The area stays constrained (above); the hero's own `full-bleed`
 * behavior takes it to viewport width, and this only lays out the two
 * halves inside it. */
.phpew-layout-snazy-split-hero > [data-area="hero"] .phpew-section--snazy-hero {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 0;
    align-items: stretch;
    padding: 0;
}
.phpew-layout-snazy-split-hero > [data-area="hero"] .phpew-section--snazy-hero .phpew-section-body,
.phpew-layout-snazy-split-hero > [data-area="hero"] .phpew-section--snazy-hero.phpew-section-body {
    padding: 4rem var(--snazy-gutter);
    align-self: center;
}
.phpew-layout-snazy-split-hero > [data-area="hero"] .phpew-section--snazy-hero img.phpew-section-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Sidebar CV ──────────────────────────────────────────────────────────
 * The grid columns (1:3) come from the layout definition. Center + cap the
 * whole grid, give it section rhythm, and make the sidebar sticky. */
.phpew-layout-snazy-sidebar-cv {
    box-sizing: border-box;
    max-width: calc(var(--snazy-content-max) + 2 * var(--snazy-gutter));
    margin-inline: auto;
    padding: var(--snazy-section-gap) var(--snazy-gutter);
}
.phpew-layout-snazy-sidebar-cv > [data-area="sidebar"] {
    position: sticky;
    top: 2rem;
    align-self: start;
}


/* ── Per-block responsive spec ──────────────────────────────────────────── */

/* Hero — image is rendered by Renderer as a plain <img> tag inside the
 * section body. We absolutely position it behind text + CTAs and overlay
 * a dark gradient for legibility. Generous padding (no min-height) gives
 * the hero its standing height. */
.phpew-section--snazy-hero {
    position: relative;
    overflow: hidden;
    padding: 0;
    color: #fff;
    /* Solid backdrop behind the (often transparent PNG) hero image so its
     * gaps don't show the page background through. */
    background-color: #0a1f4d;
}
.phpew-section--snazy-hero .phpew-section-body,
.phpew-section--snazy-hero.phpew-section-body {
    position: relative;
    text-align: center;
    padding: 9rem 1.5rem 7rem;
    z-index: 1;
}
.phpew-section--snazy-hero .phpew-section-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -2;
    margin: 0;
}
.phpew-section--snazy-hero .phpew-section-heading {
    color: #fff;
    font-size: clamp(2.25rem, 5vw, 4rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    margin: 0 auto 1.25rem;
    max-width: 48rem;
    border: 0;          /* themes add border-top on h1 — kill it inside the hero */
    padding: 0;
    background: transparent;
}
.phpew-section--snazy-hero .phpew-section-subheading {
    color: rgba(255, 255, 255, 0.88);
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    max-width: 38rem;
    margin: 0 auto 2.25rem;
}
.phpew-section--snazy-hero .phpew-section-link {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    margin: 0.35rem 0.5rem;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.15s, background 0.15s;
    background: #fff;
    color: #0f1c3d;
}
.phpew-section--snazy-hero .phpew-section-link:nth-of-type(2) {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255, 255, 255, 0.65);
}
.phpew-section--snazy-hero .phpew-section-link:hover {
    transform: translateY(-1px);
}

@media (max-width: 767px) {
    .phpew-section--snazy-hero .phpew-section-body,
.phpew-section--snazy-hero.phpew-section-body {
        padding: 5rem 1rem 4rem;
    }
    .phpew-section--snazy-hero .phpew-section-link {
        display: block;
        margin: 0.5rem auto;
        max-width: 16rem;
    }
}

/* Services grid / Testimonials grid — fluid tracks, partial rows
 * collapse instead of leaving empty cells. auto-fit means "as many
 * tracks of >=18rem as fit"; if the source returns 2 items, you get
 * 2 tracks (3rd empty track is collapsed away). minmax(min(...))
 * keeps tracks from overflowing on narrow viewports. */
.phpew-section--snazy-services-grid .phpew-section-datasource--cards,
.phpew-section--snazy-testimonials-grid .phpew-section-datasource--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 2rem;
    align-items: stretch;
    justify-content: center;
}
.phpew-section--snazy-services-grid .phpew-section--service,
.phpew-section--snazy-services-grid .phpew-section--snazy-services-grid .phpew-section,
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial {
    margin: 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: var(--snazy-card-bg, rgba(128, 128, 128, 0.07));
    height: 100%;
    /* Make the card a flex column so the body can fill its full height.
     * Without this, the body shrinks to content and margin-top: auto on
     * the avatar has no spare space to expand into — only cards whose
     * content already fills the grid track would push the avatar down. */
    display: flex;
    flex-direction: column;
}
.phpew-section--snazy-services-grid .phpew-section--service .phpew-section-body,
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial .phpew-section-body,
.phpew-section--snazy-services-grid .phpew-section--service.phpew-section-body,
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial.phpew-section-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}

/* Testimonial cards: avatar = small circle anchored to the byline, NOT a
 * full-width image dominating the card. */
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial .phpew-section-field--textarea {
    font-size: 1.05rem;
    line-height: 1.5;
    margin: 0 0 0.75rem;
    order: 1;
}
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial img.phpew-section-image {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0;
    order: 3;
    align-self: flex-start;
    /* Pin the avatar (and everything ordered after it — name, role) to
     * the bottom of the card so cards with shorter and longer quotes
     * line up their bylines. margin-top: auto on the *earliest* element
     * of the bottom group is the trick; later siblings stack under it. */
    margin-top: auto;
}
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial .phpew-section-text:nth-of-type(1) {
    font-weight: 600;
    order: 4;
}
.phpew-section--snazy-testimonials-grid .phpew-section--testimonial .phpew-section-text:nth-of-type(2) {
    opacity: 0.7;
    font-size: 0.9rem;
    order: 5;
}
/* services/testimonials use auto-fit minmax above — responsive without
 * media queries. Only the gap shrinks at narrow widths. */
@media (max-width: 767px) {
    .phpew-section--snazy-services-grid .phpew-section-datasource--cards,
    .phpew-section--snazy-testimonials-grid .phpew-section-datasource--cards {
        gap: 1.5rem;
    }
}

/* Pricing table — fluid tracks. Hide an unused 3rd track when only
 * 2 tiers are configured (auto-fit collapses empty tracks). */
.phpew-section--snazy-pricing-table .phpew-section-datasource--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
    gap: 1.5rem;
    align-items: stretch;
    justify-content: center;
}
.phpew-section--snazy-pricing-table .phpew-section--pricing_tier {
    margin: 0;
    padding: 2rem 1.5rem;
    border-radius: 0.5rem;
    background: var(--snazy-card-bg, rgba(128, 128, 128, 0.07));
    text-align: center;
}
.phpew-section--snazy-pricing-table .phpew-section--pricing_tier .phpew-section-body,
.phpew-section--snazy-pricing-table .phpew-section--pricing_tier.phpew-section-body {
    padding: 0;
}
.phpew-section--snazy-pricing-table .phpew-section--pricing_tier .phpew-section-list {
    list-style: none;
    padding: 0;
    margin: 1rem 0;
    text-align: left;
}
.phpew-section--snazy-pricing-table .phpew-section--pricing_tier .phpew-section-list-item {
    padding: 0.4rem 0;
    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
}
.phpew-section--snazy-pricing-table .phpew-section-link {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
    border-radius: 0.375rem;
    background: #508cf0;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
}
/* auto-fit already collapses to 1 track at narrow widths via the
 * minmax(min(18rem, 100%), 1fr) recipe — no media query needed. */

/* Menu section + gallery — auto-fit minmax. */
.phpew-section--snazy-menu-section .phpew-section-datasource--cards,
.phpew-section--snazy-menu-section .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
    gap: 1.5rem;
    justify-content: center;
}
/* Menu item cards: padded surface, image capped, category as small
 * pill, price pinned to bottom-right. The menu_item template renders
 * fields in fixed order — name (text), description (longtext), price
 * (text), image, category (text) — so positional child selectors
 * (nth-child) are the reliable way to address each one. */
.phpew-section--snazy-menu-section .phpew-section--menu_item {
    margin: 0;
    padding: 1.25rem;
    border-radius: 0.5rem;
    background: var(--snazy-card-bg, rgba(128, 128, 128, 0.07));
    display: flex;
    flex-direction: column;
    height: 100%;
}
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body,
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
}
/* Field-by-field ordering via nth-child on the body's direct children.
 * Order: image at top → category pill → name → description → price. */
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body > :nth-child(4),
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body > :nth-child(4) {
    /* image */
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: 0.375rem;
    margin: 0;
    order: 1;
}
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body > :nth-child(5),
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body > :nth-child(5) {
    /* category — small uppercase pill */
    align-self: flex-start;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    background: rgba(128, 128, 128, 0.18);
    opacity: 0.85;
    order: 2;
}
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body > :nth-child(1),
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body > :nth-child(1) {
    /* name */
    font-weight: 600;
    font-size: 1.1rem;
    order: 3;
}
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body > :nth-child(2),
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body > :nth-child(2) {
    /* description */
    font-size: 0.95rem;
    opacity: 0.85;
    line-height: 1.4;
    order: 4;
}
.phpew-section--snazy-menu-section .phpew-section--menu_item .phpew-section-body > :nth-child(3),
.phpew-section--snazy-menu-section .phpew-section--menu_item.phpew-section-body > :nth-child(3) {
    /* price — pinned to bottom-right */
    margin-top: auto;
    align-self: flex-end;
    font-weight: 600;
    font-size: 1.05rem;
    order: 5;
}

/* About block — two-column on wide screens (text left, image right),
 * stacks on narrow. Body is the grid container so the image stays a
 * direct child; section wraps everything as a normal block. Avoids
 * display: contents which Chrome's grid placement doesn't always
 * honour reliably across browsers. */
/* About-block: proper two-column card — text column on the left,
 * image on the right. Float-right doesn't work because the image
 * is LAST in the DOM and CSS float only affects siblings that come
 * AFTER it; nothing wraps. Grid approach previously failed because
 * `grid-row: 1 / span 99` + row gap multiplied empty implicit row
 * gaps (98 × 0.6rem ≈ 1000px) into phantom vertical space.
 *
 * Fix: 2-column grid, text auto-flows into col 1, image spans all
 * col-2 rows. Row gap set to 0 so the implicit empty tracks
 * created by span 99 contribute zero space; text spacing comes
 * from per-element margin-bottom instead. */
.phpew-section--snazy-about-block .phpew-section-body,
.phpew-section--snazy-about-block.phpew-section-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(28rem, 45%);
    /* Row gap ZERO — see comment above; gap-on-implicit-rows was
     * the 1232px-tall-section bug. Column gap stays at 2rem. */
    gap: 0 2rem;
    align-content: start;
}
.phpew-section--snazy-about-block .phpew-section-body > :not(img),
.phpew-section--snazy-about-block.phpew-section-body > :not(img) {
    grid-column: 1;
    /* Spacing between text elements via margin instead of grid gap. */
    margin: 0 0 0.6rem;
}
.phpew-section--snazy-about-block .phpew-section-body > img.phpew-section-image,
.phpew-section--snazy-about-block.phpew-section-body > img.phpew-section-image {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: stretch;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    border-radius: 0.5rem;
    margin: 0;
}
@media (max-width: 767px) {
    .phpew-section--snazy-about-block .phpew-section-body,
.phpew-section--snazy-about-block.phpew-section-body {
        grid-template-columns: 1fr;
    }
    .phpew-section--snazy-about-block .phpew-section-body > img.phpew-section-image,
.phpew-section--snazy-about-block.phpew-section-body > img.phpew-section-image {
        grid-column: 1;
        grid-row: auto;
        max-height: 16rem;
        margin-top: 1rem;
    }
}
.phpew-section--snazy-gallery .phpew-section-datasource--cards,
.phpew-section--snazy-gallery .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 0.5rem;
}

/* Logo wall — fluid tracks via auto-fit so a partial row centres
 * cleanly. Each card is a tight, fixed-height tile so the wall reads
 * as a row of marks, not a stack of paragraphs. */
.phpew-section--snazy-logo-wall .phpew-section-datasource--cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 1.5rem 2rem;
    align-items: center;
    justify-items: center;
    justify-content: center;
}
.phpew-section--snazy-logo-wall .phpew-section--logo_wall_item {
    margin: 0;
    padding: 0;
    width: 100%;
}
.phpew-section--snazy-logo-wall .phpew-section--logo_wall_item .phpew-section-body,
.phpew-section--snazy-logo-wall .phpew-section--logo_wall_item.phpew-section-body {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.phpew-section--snazy-logo-wall img.phpew-section-image {
    max-height: 2.75rem;
    max-width: 100%;
    width: auto;
    height: auto;
    margin: 0;
    opacity: 0.85;
}
/* auto-fit minmax above handles responsive — no media queries needed. */

/* Locations list — each card is a 2-column shape (info left, photo
 * right) so a single location doesn't render as a stack of bare
 * text above a billboard-sized photo. Same row pattern as the
 * about-block: zero row gap so an image spanning many rows doesn't
 * multiply gap into phantom space; spacing between info fields
 * comes from per-element margin instead. */
.phpew-section--snazy-locations-list .phpew-section-datasource--cards,
.phpew-section--snazy-locations-list .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(28rem, 100%), 1fr));
    gap: 1.5rem;
    justify-content: center;
}
.phpew-section--snazy-locations-list .phpew-section--location {
    margin: 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: var(--snazy-card-bg, rgba(128, 128, 128, 0.07));
}
.phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body {
    padding: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(14rem, 40%);
    gap: 0 1.5rem;
    align-content: start;
}
.phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body > :not(img),
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body > :not(img) {
    grid-column: 1;
    margin: 0 0 0.4rem;
}
.phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body > .phpew-section-text:first-of-type,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body > .phpew-section-text:first-of-type {
    /* location name — slightly larger, sits at the top */
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.6rem;
}
.phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body > .phpew-section-longtext,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body > .phpew-section-longtext {
    /* address + hours render with <br> — keep them readable. */
    line-height: 1.45;
    font-size: 0.95rem;
}
.phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body > img.phpew-section-image,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body > img.phpew-section-image {
    grid-column: 2;
    grid-row: 1 / span 99;
    align-self: start;
    width: 100%;
    max-height: 12rem;
    object-fit: cover;
    border-radius: 0.375rem;
    margin: 0;
}
@media (max-width: 767px) {
    .phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body {
        grid-template-columns: 1fr;
    }
    .phpew-section--snazy-locations-list .phpew-section--location .phpew-section-body > img.phpew-section-image,
.phpew-section--snazy-locations-list .phpew-section--location.phpew-section-body > img.phpew-section-image {
        grid-column: 1;
        grid-row: auto;
        max-height: 10rem;
        margin-top: 0.75rem;
    }
}

/* Stats strip, team grid, press mentions — auto-fit minmax. Partial
 * rows centre; empty tracks collapse. */
.phpew-section--snazy-stats-strip .phpew-section-datasource--cards,
.phpew-section--snazy-stats-strip .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr));
    gap: 2rem;
    text-align: center;
    justify-content: center;
}
.phpew-section--snazy-team-grid .phpew-section-datasource--cards,
.phpew-section--snazy-team-grid .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    gap: 2rem;
    justify-content: center;
}
/* FAQ items: question bold + slightly larger so it visually leads
 * the answer paragraph. Without per-card styling both fields rendered
 * as plain text with no hierarchy and ran together. Each item
 * separated by a hairline divider to make the list scannable. */
.phpew-section--snazy-faq-section .phpew-section-datasource--cards,
.phpew-section--snazy-faq-section .phpew-section-datasource {
    display: flex;
    flex-direction: column;
}
.phpew-section--snazy-faq-section .phpew-section--faq_item {
    margin: 0;
    padding: 1.1rem 0;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
}
.phpew-section--snazy-faq-section .phpew-section--faq_item:first-child {
    border-top: 0;
}
.phpew-section--snazy-faq-section .phpew-section--faq_item .phpew-section-body,
.phpew-section--snazy-faq-section .phpew-section--faq_item.phpew-section-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.phpew-section--snazy-faq-section .phpew-section--faq_item .phpew-section-text {
    font-weight: 600;
    font-size: 1.05rem;
}
.phpew-section--snazy-faq-section .phpew-section--faq_item .phpew-section-longtext {
    font-size: 0.95rem;
    line-height: 1.55;
    opacity: 0.85;
}

/* Team cards: avatar at top (small + circular), name bold below,
 * role small + muted on its own line, bio underneath. Without per-
 * card styling the name and role smushed onto one line as bare
 * spans with the avatar dropping to the bottom of the card. */
.phpew-section--snazy-team-grid .phpew-section--team_member {
    margin: 0;
    text-align: center;
}
.phpew-section--snazy-team-grid .phpew-section--team_member .phpew-section-body,
.phpew-section--snazy-team-grid .phpew-section--team_member.phpew-section-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}
.phpew-section--snazy-team-grid .phpew-section--team_member img.phpew-section-image {
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 0 0.5rem;
    order: 1;
}
.phpew-section--snazy-team-grid .phpew-section--team_member .phpew-section-text:nth-of-type(1) {
    /* name */
    font-weight: 600;
    font-size: 1.05rem;
    order: 2;
}
.phpew-section--snazy-team-grid .phpew-section--team_member .phpew-section-text:nth-of-type(2) {
    /* role */
    font-size: 0.85rem;
    opacity: 0.75;
    margin-bottom: 0.5rem;
    order: 3;
}
.phpew-section--snazy-team-grid .phpew-section--team_member .phpew-section-longtext {
    /* bio */
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.9;
    order: 4;
}
.phpew-section--snazy-press-mentions .phpew-section-datasource--cards,
.phpew-section--snazy-press-mentions .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr));
    gap: 1.5rem;
    justify-content: center;
}
/* Press-mention cards: clear hierarchy — small uppercase publication
 * + muted date at top, bold headline, italic pull quote. Without
 * per-card styling the four fields rendered as bare lines of text
 * with no visual rhythm. Card surface from --snazy-card-bg so
 * it stays visible against any backdrop. */
.phpew-section--snazy-press-mentions .phpew-section--press_mention {
    margin: 0;
    padding: 1.25rem;
    border-radius: 0.5rem;
    background: var(--snazy-card-bg, rgba(128, 128, 128, 0.07));
    display: flex;
    flex-direction: column;
    height: 100%;
}
.phpew-section--snazy-press-mentions .phpew-section--press_mention .phpew-section-body,
.phpew-section--snazy-press-mentions .phpew-section--press_mention.phpew-section-body {
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 1;
}
.phpew-section--snazy-press-mentions .phpew-section--press_mention .phpew-section-text:first-of-type {
    /* publication — small uppercase label */
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    opacity: 0.75;
}
.phpew-section--snazy-press-mentions .phpew-section--press_mention .phpew-section-field--date {
    font-size: 0.78rem;
    opacity: 0.6;
    margin-bottom: 0.25rem;
}
.phpew-section--snazy-press-mentions .phpew-section--press_mention .phpew-section-text:nth-of-type(2) {
    /* headline — bold body-size lead */
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.35;
}
.phpew-section--snazy-press-mentions .phpew-section--press_mention .phpew-section-longtext {
    /* pull quote — italic + slight indent + accent border */
    font-style: italic;
    font-size: 0.92rem;
    line-height: 1.45;
    opacity: 0.85;
    padding-left: 0.75rem;
    border-left: 2px solid color-mix(in srgb, currentColor 25%, transparent);
    margin-top: 0.25rem;
}

/* Split-hero mobile collapse */
@media (max-width: 767px) {
    .phpew-layout-snazy-split-hero .phpew-layout-row:first-child .phpew-section--snazy-hero {
        grid-template-columns: 1fr;
    }
    .phpew-layout-snazy-split-hero .phpew-layout-row:first-child .phpew-section--snazy-hero img.phpew-section-image {
        max-height: 16rem;
    }
}

/* Sidebar-CV mobile collapse */
@media (max-width: 767px) {
    .phpew-layout-snazy-sidebar-cv .phpew-layout-row {
        grid-template-columns: 1fr;
    }
    .phpew-layout-snazy-sidebar-cv .phpew-layout-col:first-child {
        position: static;
    }
}

/* CTA block */
.phpew-section--snazy-call-to-action {
    text-align: center;
    padding: 4rem var(--snazy-gutter);
    border-radius: 0.5rem;
    /* --snazy-cta-bg from the template's `background` field (css_var).
     * Applied via color-mix so the picker controls the *hue* — the
     * tint is mixed onto the surrounding card surface at fixed alpha
     * so chosen colours never produce an unreadable fully-opaque block.
     * Unset → no tint (inherits parent surface). */
    background: color-mix(in srgb, var(--snazy-cta-bg, transparent) 18%, transparent);
}
.phpew-section--snazy-call-to-action .phpew-section-heading {
    font-size: clamp(1.75rem, 4vw, 3rem);
    margin: 0 0 0.75rem;
}
.phpew-section--snazy-call-to-action .phpew-section-link {
    display: inline-block;
    padding: 0.85rem 1.75rem;
    margin: 1rem 0.5rem 0;
    border-radius: 0.375rem;
    text-decoration: none;
    font-weight: 600;
    /* Solid accent button. Without the bg+fg pair the link inherited
     * the theme's body text colour (just black/dark text in light
     * themes), reading as plain text rather than a button. */
    background: var(--phpew-accent, #4f46e5);
    color: var(--phpew-accent-fg, #ffffff);
}
.phpew-section--snazy-call-to-action .phpew-section-link:hover {
    background: var(--phpew-accent-hover, var(--phpew-accent, #4338ca));
}


/* Edit-pill UI moved into phpew-core (phpew_light.css). Class name is now
 * .phpew-edit-pill — same behaviour, ships with every phpew site. */


/* ── Skip-for-now banner ────────────────────────────────────────────────── */
.snazy-starter-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    margin: 0 0 1rem 0;
    border-radius: 0.375rem;
    background: rgba(80, 140, 240, 0.12);
    border-left: 3px solid #508cf0;
}
.snazy-starter-banner-text {
    flex: 1;
}
.snazy-starter-banner-cta {
    text-decoration: none;
    font-weight: 600;
    color: inherit;
}
.snazy-starter-banner-dismiss {
    background: transparent;
    border: 0;
    color: inherit;
    opacity: 0.6;
    cursor: pointer;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0.25rem 0.5rem;
}
.snazy-starter-banner-dismiss:hover {
    opacity: 1;
}


/* ── Wizard UI ──────────────────────────────────────────────────────────── */
.snazy-wizard-wrap {
    max-width: 56rem;
    margin: 3rem auto;
    padding: 0 1rem;
}
.snazy-wizard-step {
    display: none;
}
.snazy-wizard-step.is-active {
    display: block;
}
.snazy-wizard-heading {
    font-size: 1.75rem;
    margin: 0 0 0.5rem;
}
.snazy-wizard-hint {
    opacity: 0.75;
    margin: 0 0 2rem;
}

/* Step 1 — starter cards */
.snazy-wizard-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}
.snazy-wizard-card {
    display: block;
    text-align: left;
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.08);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    transition: border-color 0.15s, transform 0.15s;
}
.snazy-wizard-card:hover {
    border-color: rgba(80, 140, 240, 0.5);
    transform: translateY(-2px);
}
.snazy-wizard-card.is-selected {
    border-color: #508cf0;
}
.snazy-wizard-card-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    background: rgba(128, 128, 128, 0.2);
}
.snazy-wizard-card-body {
    padding: 0.75rem 1rem 1rem;
}
.snazy-wizard-card-title {
    font-weight: 600;
    margin: 0 0 0.25rem;
}
.snazy-wizard-card-tagline {
    font-size: 0.85rem;
    opacity: 0.75;
    margin: 0;
}

.snazy-wizard-exits {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(128, 128, 128, 0.2);
    text-align: center;
}
.snazy-wizard-exit-link {
    text-decoration: none;
    opacity: 0.7;
    font-size: 0.9rem;
}
.snazy-wizard-exit-link:hover {
    opacity: 1;
    text-decoration: underline;
}

/* Step 2 — theme swatches */
.snazy-wizard-theme-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.snazy-wizard-theme-card {
    border: 2px solid transparent;
    border-radius: 0.5rem;
    background: rgba(128, 128, 128, 0.08);
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    /* Force colour inheritance — the card is a <button> and Chromium
     * doesn't propagate body's `color` into form elements; without
     * this the label below the swatch falls back to the UA's
     * `buttontext` system colour (white in dark UA, illegible on
     * light themes like Slate/Mint/Citrus). */
    color: inherit;
    font: inherit;
}
/* Same reasoning for the pack-picker buttons on step 1 — they're
 * <button> elements too, so the title/tagline inside need explicit
 * inheritance. */
.snazy-wizard-card {
    color: inherit;
    font: inherit;
}
.snazy-wizard-theme-card.is-selected {
    border-color: #508cf0;
}
.snazy-wizard-theme-preview {
    padding: 0.85rem 0.9rem 0.7rem;
    border-bottom: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-height: 9rem;
    /* bg / colour / border-color all set inline from theme tokens */
}
.snazy-wizard-theme-preview-heading {
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1;
}
.snazy-wizard-theme-preview-text {
    font-size: 0.78rem;
    line-height: 1.35;
    /* colour set inline (muted token) */
}
.snazy-wizard-theme-preview-btn-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.25rem;
}
.snazy-wizard-theme-preview-btn {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 0.3rem 0.6rem;
    border-radius: 0.3rem;
}
.snazy-wizard-theme-preview-link {
    font-size: 0.72rem;
    font-weight: 500;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
}
.snazy-wizard-theme-preview-chips {
    display: flex;
    gap: 0.3rem;
    margin-top: auto;
    padding-top: 0.5rem;
}
.snazy-wizard-theme-preview-chip {
    width: 0.85rem;
    height: 0.85rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
}
.snazy-wizard-theme-label {
    padding: 0.5rem 0.75rem;
    font-weight: 500;
    text-align: center;
}
.snazy-wizard-theme-more {
    text-align: center;
    margin-bottom: 1.5rem;
}

/* Step 3 — site name */
.snazy-wizard-name-input {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1.1rem;
    border-radius: 0.375rem;
    border: 1px solid rgba(128, 128, 128, 0.4);
    background: rgba(128, 128, 128, 0.05);
    color: inherit;
    margin-bottom: 0.5rem;
}
.snazy-wizard-name-input:focus {
    outline: 2px solid #508cf0;
    outline-offset: 2px;
}

/* Wizard nav */
.snazy-wizard-nav {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2rem;
}
.snazy-wizard-btn {
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    border: 1px solid transparent;
    background: rgba(128, 128, 128, 0.15);
    color: inherit;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
}
.snazy-wizard-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.snazy-wizard-btn--primary {
    background: #508cf0;
    color: #fff;
}
.snazy-wizard-btn--primary:hover:not(:disabled) {
    background: #3a78dc;
}

/* Re-apply destructive confirm */
.snazy-wizard-confirm-input {
    margin-top: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-family: monospace;
    border: 1px solid rgba(220, 80, 80, 0.5);
    border-radius: 0.25rem;
    background: rgba(220, 80, 80, 0.05);
    color: inherit;
}
.snazy-wizard-confirm-warning {
    color: #c33;
    margin: 1rem 0 0.5rem;
}

/* Portfolio + featured-project card grids used to ship as behaviors
 * (auto-fit-card-track, image-card-with-thumbs, featured-project,
 * showcase-with-thumb-column) -- removed with the behavior layer. These
 * sections currently render bare; their card-grid treatment is to be
 * reimplemented as section CSS in the render-tree redesign. */

/* ── Upgrade page (?page=upgrade — the Free vs Pro upsell) ────────────────
 * Rendered by Snazy\PlanComparisonDatasource::renderUpgradeBody into the
 * snazy-single layout's one area. Header + two plan cards + the computed
 * feature matrix (Pro column emphasised). Tokens only, so it themes. */
.snazy-upgrade {
    max-width: 62rem;
    margin-inline: auto;
}
.snazy-upgrade-note {
    background: var(--phpew-success-bg, #ecfdf5);
    border: 1px solid var(--phpew-success, #10b981);
    color: var(--phpew-fg, #111);
    border-radius: var(--phpew-radius, 8px);
    padding: 0.75rem 1rem;
    margin-bottom: 1.75rem;
    font-size: var(--phpew-fs-sm, 0.9rem);
}
.snazy-upgrade-head { margin-bottom: 2rem; }
.snazy-upgrade-title {
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin: 0 0 0.5rem;
}
.snazy-upgrade-lead {
    font-size: var(--phpew-fs-lg, 1.15rem);
    color: var(--phpew-muted, #6b7280);
    max-width: 42rem;
    margin: 0;
}

/* Plan cards */
.snazy-upgrade-plans {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-bottom: 2.75rem;
    align-items: stretch;
}
.snazy-plan {
    position: relative;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--phpew-border, #e5e7eb);
    border-radius: var(--phpew-radius-lg, 14px);
    background: var(--phpew-card-bg, #fff);
    padding: 1.6rem;
}
.snazy-plan--pro {
    border-color: var(--phpew-accent, #4f46e5);
    box-shadow: 0 0 0 1px var(--phpew-accent, #4f46e5),
                0 16px 34px -16px color-mix(in srgb, var(--phpew-accent, #4f46e5) 55%, transparent);
}
.snazy-plan-flag {
    position: absolute;
    top: -0.72rem;
    right: 1.25rem;
    background: var(--phpew-accent, #4f46e5);
    color: var(--phpew-accent-fg, #fff);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.24rem 0.65rem;
    border-radius: 999px;
}
.snazy-plan-name {
    font-size: var(--phpew-fs-sm, 0.85rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--phpew-muted, #6b7280);
}
.snazy-plan-price {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.03em;
    margin-top: 0.4rem;
}
.snazy-plan-per {
    font-size: var(--phpew-fs-sm, 0.85rem);
    font-weight: 500;
    color: var(--phpew-muted, #6b7280);
}
.snazy-plan-pitch {
    margin: 0.8rem 0 0;
    color: var(--phpew-muted, #6b7280);
    font-size: var(--phpew-fs-sm, 0.9rem);
}
.snazy-plan-quotas {
    list-style: none;
    margin: 1.1rem 0 0;
    padding: 0;
    display: grid;
    gap: 0.45rem;
}
.snazy-plan-quotas li {
    position: relative;
    padding-left: 1.5rem;
    font-size: var(--phpew-fs-sm, 0.9rem);
}
.snazy-plan-quotas li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--phpew-success, #10b981);
    font-weight: 700;
}
.snazy-plan-cta {
    margin-top: auto;
    justify-content: center;
    padding: 0.72rem 1rem;
    font-size: 1rem;
}
.snazy-plan-cta:not(:first-of-type),
.snazy-plan-quotas + .snazy-plan-cta { margin-top: 1.4rem; }

/* Feature matrix */
.snazy-upgrade-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--phpew-fs-base, 1rem);
}
.snazy-upgrade-matrix thead th {
    text-align: left;
    font-size: var(--phpew-fs-sm, 0.8rem);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--phpew-muted, #6b7280);
    padding: 0 1rem 0.7rem;
    border-bottom: 2px solid var(--phpew-border-strong, #d1d5db);
}
.snazy-upgrade-matrix thead th:not(:first-child) { text-align: center; width: 6.5rem; }
.snazy-upgrade-matrix thead th.is-pro { color: var(--phpew-accent, #4f46e5); }
.snazy-upgrade-matrix td {
    padding: 0.9rem 1rem;
    border-bottom: 1px solid var(--phpew-border, #eee);
    vertical-align: middle;
}
.snazy-upgrade-matrix tbody tr:hover { background: var(--phpew-subtle, rgba(0,0,0,0.02)); }
.snazy-mx-feature { vertical-align: top; }
.snazy-mx-feature strong { display: block; font-size: 1rem; }
.snazy-mx-desc {
    display: block;
    margin-top: 0.15rem;
    color: var(--phpew-muted, #6b7280);
    font-size: var(--phpew-fs-sm, 0.85rem);
}
.snazy-mx-cell { text-align: center; font-size: 1.15rem; }
.snazy-mx-cell.is-pro {
    background: color-mix(in srgb, var(--phpew-accent, #4f46e5) 7%, transparent);
}
.snazy-upgrade-matrix tbody tr:last-child .snazy-mx-cell.is-pro {
    border-bottom-left-radius: var(--phpew-radius, 6px);
    border-bottom-right-radius: var(--phpew-radius, 6px);
}
.snazy-mx-yes { color: var(--phpew-success, #10b981); font-weight: 700; }
.snazy-mx-no { color: var(--phpew-border-strong, #cbd5e1); }

@media (max-width: 640px) {
    .snazy-upgrade-plans { grid-template-columns: 1fr; }
    .snazy-upgrade-matrix thead th:not(:first-child) { width: 3.5rem; }
    .snazy-mx-desc { display: none; }
}

/* phpew/store — public-page styles.
 * Folded into the theme stylesheet by StoreRoutes::register()
 * via ThemeManager::addExtensionCss(), so it inherits theme tokens
 * and can be overridden by site-level Advanced CSS.
 *
 * Class prefix is `pst-` (PHPew STore) to avoid collisions.
 */

/* Storefront — Customer Portal email form */
.pst-portal-form {
    margin-top: .5rem;
}
.pst-portal-email {
    width: 20rem;
}

/* Platform billing page (apex tenant subscription management) */
.pst-billing-container {
    max-width: 640px;
    margin: 3rem auto;
}
.pst-billing-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ── Admin panes ──────────────────────────────────────────────────────────
 * Width modifiers + small utilities used across StoreConfigPane,
 * ProductsPane, ConnectPane, OrdersPane, SubscriptionsPane,
 * PlatformBillingPane. Atomic so panes can compose widths inline
 * without each one defining its own bespoke class.
 */
.pst-w-6    { width: 6rem; }
.pst-w-8    { width: 8rem; }
.pst-w-16   { width: 16rem; }
.pst-w-24   { width: 24rem; }
.pst-w-28   { width: 28rem; }
.pst-w-36   { width: 36rem; }
.pst-w-full { width: 100%; }

.pst-textarea-sm { width: 100%; height: 4rem; }

.pst-hr          { margin: 1.5rem 0; }
.pst-mt-3        { margin-top: .75rem; }
.pst-list-indent { margin: .25rem 0 .75rem 1.5rem; }

.pst-form-inline { display: inline; }
.pst-self-end    { align-self: flex-end; }
.pst-actions-row { display: flex; gap: .5rem; flex-wrap: wrap; align-items: flex-end; }
/* Inline status pill — self-contained, NOT layered on .phpew-notice (which is a
   block banner and renders as a floating button inside a table cell). */
.pst-pill {
  display: inline-block;
  margin: 0;
  padding: .1rem .5rem;
  border-radius: 999px;
  font-size: .8125rem;
  line-height: 1.4;
  font-weight: 500;
  border: 1px solid transparent;
}
.pst-pill--ok    { background: rgba(34, 160, 90, .15);  color: #1c7c46; border-color: rgba(34, 160, 90, .35); }
.pst-pill--warn  { background: rgba(200, 140, 0, .15);  color: #9a6a00; border-color: rgba(200, 140, 0, .35); }
.pst-pill--error { background: rgba(200, 60, 60, .15);  color: #a23030; border-color: rgba(200, 60, 60, .35); }

/* ── Add-Product wizard ─────────────────────────────────────────────── */

.pst-wizard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 1rem 0 2rem;
  max-width: 48rem;
}
.pst-wiz-step {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1rem 1.25rem 1.25rem;
}
.pst-wiz-step[hidden] { display: none; }

.pst-wiz-step-head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 0.875rem 0;
}
.pst-wiz-step-head h3 {
  margin: 0;
  font-size: var(--phpew-fs-lg);
  font-weight: 600;
}
.pst-wiz-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem; height: 1.75rem;
  border-radius: 50%;
  background: var(--phpew-accent);
  color: var(--phpew-accent-fg);
  font-weight: 700;
  font-size: var(--phpew-fs-sm);
  flex: 0 0 auto;
}

.pst-wiz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.625rem;
}
.pst-wiz-card {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.875rem 1rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--phpew-fg);
  transition: border-color 120ms ease, background 120ms ease;
}
.pst-wiz-card:hover { border-color: var(--phpew-accent); }
.pst-wiz-card.is-selected {
  border-color: var(--phpew-accent);
  background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
}
.pst-wiz-card-title { font-weight: 700; font-size: var(--phpew-fs-base); }
.pst-wiz-card-sub   { font-size: var(--phpew-fs-xs); color: var(--phpew-muted); }

.pst-wiz-field      { display: flex; flex-direction: column; gap: 0.3125rem; margin-bottom: 0.875rem; }
.pst-wiz-field:last-child { margin-bottom: 0; }
.pst-wiz-field label { font-weight: 600; font-size: var(--phpew-fs-sm); }
.pst-wiz-input {
  padding: 0.5rem 0.75rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  color: var(--phpew-fg);
  font: inherit;
  font-size: var(--phpew-fs-sm);
}
.pst-wiz-textarea { min-height: 4rem; resize: vertical; }

.pst-wiz-img-row { display: flex; gap: 0.5rem; }
.pst-wiz-img-row .pst-wiz-input { flex: 1 1 auto; }
.pst-wiz-img-preview {
  display: block;
  max-height: 120px;
  max-width: 100%;
  margin-top: 0.625rem;
  padding: 0.5rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  object-fit: contain;
}

.pst-wiz-price-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 480px) { .pst-wiz-price-row { grid-template-columns: 1fr; } }
.pst-wiz-price-input {
  display: inline-flex;
  align-items: stretch;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
}
.pst-wiz-price-input .pst-wiz-input {
  border: none;
  background: transparent;
  min-width: 0;
  width: 100%;
}
.pst-wiz-price-sym, .pst-wiz-price-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 0.625rem;
  color: var(--phpew-muted);
  font-size: var(--phpew-fs-sm);
  font-weight: 500;
  white-space: nowrap;
}

.pst-wiz-submit {
  display: flex;
  justify-content: flex-start;
}

.pst-wiz-list-title { margin-top: 2rem; font-size: var(--phpew-fs-lg); }

/* ── Payments setup wizard ──────────────────────────────────────────── */

.pst-setup-block {
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 1rem 1.25rem 1.25rem;
  max-width: 48rem;
}
.pst-setup-head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin: 0 0 0.875rem 0;
}
.pst-setup-head h3 { margin: 0; font-size: var(--phpew-fs-lg); font-weight: 600; }

.pst-mode-badge {
  display: inline-block;
  padding: 2px 8px;
  font-size: var(--phpew-fs-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: 999px;
}
.pst-mode-badge--test {
  background: color-mix(in srgb, var(--phpew-warning) 18%, transparent);
  color: var(--phpew-warning);
  border: 1px solid color-mix(in srgb, var(--phpew-warning) 45%, transparent);
}
.pst-mode-badge--live {
  background: color-mix(in srgb, var(--phpew-success) 18%, transparent);
  color: var(--phpew-success);
  border: 1px solid color-mix(in srgb, var(--phpew-success) 45%, transparent);
}

.pst-setup-form { display: flex; flex-direction: column; gap: 0.875rem; }
.pst-setup-field { display: flex; flex-direction: column; gap: 0.3125rem; }
.pst-setup-field label { font-weight: 600; font-size: var(--phpew-fs-sm); }
.pst-setup-input {
  padding: 0.5rem 0.75rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  color: var(--phpew-fg);
  font: inherit;
  font-size: var(--phpew-fs-sm);
}

.pst-setup-dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 0.375rem 1rem;
  margin: 0 0 1rem 0;
  font-size: var(--phpew-fs-sm);
}
.pst-setup-dl dt { color: var(--phpew-muted); font-weight: 600; }
.pst-setup-dl dd { margin: 0; color: var(--phpew-fg); }
.pst-setup-dl code {
  background: var(--phpew-surface);
  padding: 1px 6px;
  border-radius: 3px;
  font-family: var(--phpew-font-mono);
  font-size: var(--phpew-fs-xs);
}

.pst-setup-edit { display: inline-block; }
.pst-setup-edit summary {
  cursor: pointer;
  list-style: none;
}
.pst-setup-edit summary::-webkit-details-marker { display: none; }

.pst-setup-url {
  display: inline-block;
  margin: 0.25rem 0 0.5rem 0;
  padding: 0.375rem 0.625rem;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  font-family: var(--phpew-font-mono);
  font-size: var(--phpew-fs-xs);
  user-select: all;
}

/* ── Wizard helpers (no inline style="" allowed under CSP) ──────────── */
.pst-inline-form     { display: inline; }
.pst-stack-tight     { margin-top: 0.75rem; }
.pst-media-picker-msg { grid-column: 1 / -1; }
.pst-setup-edit-form  { margin-top: 0.75rem; }
.pst-setup-webhook    { margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--phpew-border); }
.pst-paypal-block     { margin-top: 1.5rem; }
.pst-paypal-block .pst-setup-form { margin-top: 0.75rem; }
.pst-setup-webhook h4 { margin: 0 0 0.5rem 0; }

/* phpew_json — default widget and layout styles.
   Colors and spacing consume the host theme's custom properties so the
   output integrates with phpew-light, phpew-dark, and any custom theme
   built with PHPewStyle. Override via advanced_css or custom tokens. */

/* ── Page wrapper ─────────────────────────────────────────────────────── */

.phpew-json-page {
    padding: var(--phpew-gap, 1.5rem) 0;
}

.phpew-json-title {
    margin: 0 0 var(--phpew-gap-lg, 2rem);
    font-size: var(--phpew-fs-2xl, 1.75rem);
    line-height: var(--phpew-lh-tight, 1.2);
    color: var(--phpew-fg, #111);
}

/* ── Layout: single — centred article ────────────────────────────────── */

.phpew-json-single {
    max-width: 680px;
    margin-inline: auto;
}

/* ── Layout: wide — full-width (tables, large arrays) ────────────────── */

.phpew-json-wide {
    width: 100%;
}

/* ── Layout: grid — auto-fit card grid ───────────────────────────────── */

.phpew-json-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--phpew-gap, 1.5rem);
}

/* ── Layout: two-column — primary + sidebar ──────────────────────────── */

.phpew-json-two-col-inner {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.phpew-json-primary {
    flex: 1 1 0;
    min-width: 0;
}

.phpew-json-secondary {
    flex: 0 0 260px;
    min-width: 0;
    background: var(--phpew-surface, #f5f5f5);
    border: 1px solid var(--phpew-border, #ddd);
    border-radius: var(--phpew-radius, 6px);
    padding: var(--phpew-gap, 1.5rem);
}

/* ── Layout: regions — author-defined flex columns ───────────────────── */

.phpew-json-regions {
    display: flex;
    gap: 2rem;
    align-items: flex-start;
}

.phpew-json-region {
    min-width: 0;
}

.phpew-json-region--w1 { flex: 1 1 0; }
.phpew-json-region--w2 { flex: 2 1 0; }
.phpew-json-region--w3 { flex: 3 1 0; }
.phpew-json-region--w4 { flex: 4 1 0; }

/* ── Stat widget ─────────────────────────────────────────────────────── */

.phpew-json-stat {
    display: inline-flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.5rem 0.75rem;
    background: var(--phpew-surface, #f5f5f5);
    border: 1px solid var(--phpew-border, #ddd);
    border-radius: var(--phpew-radius-sm, 4px);
}

.phpew-json-stat-label {
    font-size: var(--phpew-fs-xs, 0.75rem);
    color: var(--phpew-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phpew-json-stat-value {
    font-size: var(--phpew-fs-2xl, 1.75rem);
    font-weight: 700;
    line-height: var(--phpew-lh-tight, 1.2);
    color: var(--phpew-fg, #111);
    font-variant-numeric: tabular-nums;
}

/* ── Badge widget ────────────────────────────────────────────────────── */

.phpew-json-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--phpew-fs-xs, 0.75rem);
    font-weight: 600;
    background: var(--phpew-surface, #f5f5f5);
    color: var(--phpew-muted, #666);
    border: 1px solid var(--phpew-border, #ddd);
    vertical-align: middle;
}

.phpew-json-badge--true,
.phpew-json-badge--yes {
    background: var(--phpew-success-bg, #f0fdf4);
    color: var(--phpew-success, #16a34a);
    border-color: var(--phpew-success, #16a34a);
}

.phpew-json-badge--false,
.phpew-json-badge--no {
    background: var(--phpew-error-bg, #fef2f2);
    color: var(--phpew-error, #dc2626);
    border-color: var(--phpew-error, #dc2626);
}

/* ── Date widget ─────────────────────────────────────────────────────── */

.phpew-json-date {
    font-size: var(--phpew-fs-sm, 0.875rem);
    color: var(--phpew-muted, #666);
    font-variant-numeric: tabular-nums;
}

/* ── Null / empty sentinel ───────────────────────────────────────────── */

.phpew-json-null {
    font-size: var(--phpew-fs-sm, 0.875rem);
    color: var(--phpew-subtle, #999);
    font-style: italic;
}

/* ── Text ────────────────────────────────────────────────────────────── */

.phpew-json-text {
    color: var(--phpew-fg, #111);
    line-height: var(--phpew-lh-base, 1.6);
}

p.phpew-json-text {
    margin: 0;
}

/* ── Link ────────────────────────────────────────────────────────────── */

.phpew-json-link {
    color: var(--phpew-link, #2563eb);
    text-decoration: underline;
    word-break: break-all;
}

.phpew-json-link:hover {
    color: var(--phpew-accent-hover, #1d4ed8);
}

/* ── Image ───────────────────────────────────────────────────────────── */

.phpew-json-image {
    max-width: 100%;
    height: auto;
    border-radius: var(--phpew-radius-sm, 4px);
    display: block;
}

/* ── Scalar list ─────────────────────────────────────────────────────── */

.phpew-json-list {
    margin: 0;
    padding-left: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.phpew-json-list li {
    color: var(--phpew-fg, #111);
    font-size: var(--phpew-fs-base, 1rem);
}

/* ── Table ───────────────────────────────────────────────────────────── */

.phpew-json-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--phpew-border, #ddd);
    border-radius: var(--phpew-radius, 6px);
}

.phpew-json-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--phpew-fs-sm, 0.875rem);
}

.phpew-json-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: var(--phpew-fs-xs, 0.75rem);
    font-weight: 600;
    color: var(--phpew-muted, #666);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    background: var(--phpew-surface, #f5f5f5);
    border-bottom: 1px solid var(--phpew-border, #ddd);
    white-space: nowrap;
}

.phpew-json-table td {
    padding: 0.5rem 0.75rem;
    border-bottom: 1px solid var(--phpew-border, #ddd);
    color: var(--phpew-fg, #111);
    vertical-align: top;
}

.phpew-json-table tr:last-child td {
    border-bottom: 0;
}

.phpew-json-table tbody tr:hover td {
    background: var(--phpew-surface, #f5f5f5);
}

/* ── Card ────────────────────────────────────────────────────────────── */

.phpew-json-card {
    background: var(--phpew-card-bg, #fff);
    border: 1px solid var(--phpew-border, #ddd);
    border-radius: var(--phpew-radius, 6px);
    box-shadow: var(--phpew-shadow-sm, 0 1px 3px rgba(0,0,0,.08));
    overflow: hidden;
}

.phpew-json-card-title {
    padding: 0.5rem 0.75rem;
    font-size: var(--phpew-fs-xs, 0.75rem);
    font-weight: 600;
    color: var(--phpew-muted, #666);
    background: var(--phpew-surface, #f5f5f5);
    border-bottom: 1px solid var(--phpew-border, #ddd);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.phpew-json-card-body {
    padding: 0.75rem;
}

.phpew-json-card-list {
    display: flex;
    flex-direction: column;
    gap: var(--phpew-gap-sm, 0.75rem);
}

/* ── Object / nested — key→value definition list ─────────────────────── */

.phpew-json-object,
.phpew-json-nested {
    width: 100%;
}

.phpew-json-props {
    display: block;
    margin: 0;
}

.phpew-json-prop {
    display: grid;
    grid-template-columns: minmax(100px, auto) minmax(0, 1fr);
    gap: 0.5rem;
    align-items: baseline;
    padding: 0.35rem 0;
    border-bottom: 1px dashed var(--phpew-border, #ddd);
}

.phpew-json-prop:last-child {
    border-bottom: 0;
}

.phpew-json-key {
    font-size: var(--phpew-fs-xs, 0.75rem);
    font-family: var(--phpew-font-mono, monospace);
    color: var(--phpew-muted, #666);
    font-weight: 600;
    word-break: break-word;
}

.phpew-json-val {
    margin: 0;
    font-size: var(--phpew-fs-sm, 0.875rem);
    color: var(--phpew-fg, #111);
}

/* ── Error message ───────────────────────────────────────────────────── */

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

.phpew-json-error p {
    margin: 0;
}

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

@media (max-width: 700px) {
    .phpew-json-two-col-inner,
    .phpew-json-regions {
        flex-direction: column;
    }
    .phpew-json-secondary,
    .phpew-json-region {
        flex: 1 1 auto !important;
        width: 100%;
    }
    .phpew-json-prop {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
    .phpew-json-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Video field (type=video) ─────────────────────────────────────────── */

/* 16:9 responsive container — every embed/file/fallback fills the box. */
.phpew-section-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--phpew-surface, #f5f5f5);
  border-radius: var(--phpew-radius, 6px);
  overflow: hidden;
}

.phpew-section-video-iframe,
.phpew-section-video-file {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

.phpew-section-video-file {
  background: #000;
  object-fit: contain;
}

/* Fallback link for unknown providers — centred call-to-action so the
   card still looks intentional instead of showing a bare URL. */
.phpew-section-video-fallback {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  text-align: center;
  font-size: var(--phpew-fs-sm, 0.875rem);
  font-weight: 600;
  color: var(--phpew-accent, #2563eb);
  text-decoration: none;
  background: var(--phpew-surface, #f5f5f5);
}
.phpew-section-video-fallback:hover {
  background: color-mix(in srgb, var(--phpew-accent, #2563eb) 8%, transparent);
}

/* 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; }

.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;
}
.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 */
@media (max-width: 800px) {
  .phpew-admin-split { grid-template-columns: 1fr; }
  .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-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: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%; }


}

/* Content column: the platform layouts default to full-bleed
 * (--snazy-content-max: 100%) and expect the THEME to set the column.
 * Restore the classic centered 72rem column with side gutters; the
 * per-area rules in snazy_sections.css read these vars. */
.phpew-layout-snazy-tall-marketing-6row,
.phpew-layout-snazy-simple-page,
.phpew-layout-snazy-contact-page,
.phpew-layout-snazy-single {
    --snazy-gutter: 1.5rem;
    --snazy-content-max: 72rem;
}

/* Full-bleed heroes: the navy band runs edge to edge. An area either IS
 * the hero section (flattened single-section area, data-area on the
 * section) or WRAPS it (the main landmark wrapping the slug block which
 * wraps the templated instance) -- so match any DESCENDANT hero.
 * :first-child does not work here: the layout's first child is its
 * emitted style tag. */
.phpew-layout > [data-area].phpew-section--snazy-hero,
.phpew-layout > [data-area]:has(.phpew-section--snazy-hero) {
    max-width: 100%;
    padding-inline: 0;
}