@layer phpew-layout, phpew-theme;
@layer phpew-theme {
:root {
  --phpew-bp-tablet: 768px;
  --phpew-bp-desktop: 1024px;
  --phpew-bp-wide: 1920px;
}
:root {
  --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;
  --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);

  /* Chart series, in a FIXED order that is never cycled: the ordering is the
     colour-blind-safety mechanism, not a preference. Validated as a set against
     this theme's card surface -- worst adjacent pair separates by dE 9.1 for a
     protan viewer and 19.6 for a normal-vision one. Re-ordering or substituting
     one of these without re-validating the whole set breaks that.
     A ninth series is not a ninth colour: it folds into "other". */
  --phpew-chart-1:       #2a78d6;
  --phpew-chart-2:       #eb6834;
  --phpew-chart-3:       #1baf7a;
  --phpew-chart-4:       #eda100;
  --phpew-chart-5:       #e87ba4;
  --phpew-chart-6:       #008300;
  --phpew-chart-7:       #4a3aa7;
  --phpew-chart-8:       #e34948;
  --phpew-chart-grid:    rgba(0, 0, 0, 0.08);

  /* How a chart LOOKS, as opposed to what colour its series are. Declared here
     rather than written into the component rules so the Style editor offers
     them: the shape of a bar and the weight of a line are design decisions, and
     a decision an author can only reach by hand-writing advanced CSS is one
     they do not have. */
  --phpew-chart-height:       240px;
  --phpew-chart-bar-radius:   4px;
  --phpew-chart-bar-gap:      2px;
  --phpew-chart-bar-max:      96px;
  --phpew-chart-group-gap:    1px;
  --phpew-chart-line-width:   2;
  --phpew-chart-slice-border: var(--phpew-bg);
  --phpew-chart-slice-gap:    1;
  --phpew-chart-label-color:  #ffffff;
  --phpew-chart-swatch-size:  0.7rem;
  --phpew-chart-motion:       240ms;

  --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;

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


*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html { -webkit-tap-highlight-color: transparent; }
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;
}
body.phpew-admin {
  display: flex;
  flex-direction: column;
  overflow: visible;
}
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); }

: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; }


/* The site header is sticky at the top, so anything else that sticks has to
   start below it. One number, declared beside the thing it measures. */
:root {
  --phpew-header-h: 5rem;
  /* One gutter for the admin: the nav strip pads by it, the content pads by
     it, and a full-bleed toolbar breaks out of it by exactly this much. */
  --phpew-admin-gutter: 1.75rem;
}
.phpew-header {
  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); }

.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;
}

.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);
}

.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;
}

.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;
}

.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));
}

.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);
}

/* A nav fold. details/summary carries the open state, the keyboard and the
   screen reader for free; the panel only needs somewhere to sit. Closing on
   blur or outside click is a JS behaviour this deliberately does not have --
   a second click on the summary closes it, and so does opening another. */
.phpew-nav-fold {
  position: relative;
}
.phpew-nav-fold > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.phpew-nav-fold > summary::-webkit-details-marker { display: none; }
.phpew-nav-fold > summary::after {
  content: "";
  width: 0.35em;
  height: 0.35em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-0.15em) rotate(45deg);
  transition: transform 120ms ease;
}
.phpew-nav-fold[open] > summary::after { transform: translateY(0.1em) rotate(-135deg); }
.phpew-nav-fold.is-active > summary { color: var(--phpew-fg); }
.phpew-nav-fold-panel {
  position: absolute;
  top: calc(100% + 0.35rem);
  left: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-width: max-content;
  padding: 0.35rem;
  background: var(--phpew-card-bg, #fff);
  border: 1px solid var(--phpew-border, #e2e8f0);
  border-radius: var(--phpew-radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.phpew-nav-fold-panel .phpew-page-nav-link { white-space: nowrap; }

/* On a narrow screen the header already wraps, so the panel opens in the flow
   rather than over the top of the page it belongs to. */
@media (max-width: 767px) {
  .phpew-nav-fold-panel {
    position: static;
    border: none;
    box-shadow: none;
    background: none;
    padding: 0 0 0 0.75rem;
  }
}

.phpew-main {
  flex: 1 0 auto;
}

.phpew-main--centered {
  max-width: 1280px;
  margin: 0 auto;
}
.phpew-main--padded {
  padding: 2.5rem 2rem;
}

.phpew-footer {
  border-top: 1px solid var(--phpew-border);
  /* One line of small print, sized to one line of small print. */
  padding: 0.5rem 2rem;
  color: var(--phpew-subtle);
  text-align: center;
  font-size: var(--phpew-fs-sm);
  margin-top: auto;
}


.phpew-section { margin-bottom: 2.5rem; }
.phpew-section:last-child { margin-bottom: 0; }
.phpew-signal-host { display: contents; }
[data-phpew-sub][hidden] { display: none !important; }
.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); }


.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);
}

.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;
}
.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; }

.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; }
}


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


.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; }

.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; }

.phpew-honeypot {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}


.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);
}

.phpew-table form { display: inline; }

.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; }

.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; }

.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; }

.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;
}


.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);
}


.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; }

.phpew-table th:last-child,
.phpew-table td:last-child {
  white-space: nowrap;
  text-align: right;
  width: 1%;
}
.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; }


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


.phpew-graph {
  margin: 0 0 1rem;
}

.phpew-graph-plot {
  height: var(--phpew-chart-height); /* the default; data-phpew-height picks another */
  display: flex;
  align-items: flex-end;
  /* Three bars sharing 1200px made each one 400 wide: not a chart, three
     colour fields. A bar is capped and the row centres what is left over. The
     key row below carries the same cap so the labels stay under their bars. */
  justify-content: center;
  /* A real gap between neighbouring fills, so two bars of a similar colour are
     still two bars. */
  gap: var(--phpew-chart-bar-gap);
  border-bottom: 1px solid var(--phpew-chart-grid);
}

/* The column holds the fill and NOTHING that competes with it for height: a
   label inside made the fill a flex item that shrank to fit beside it, and the
   percentage never applied. */
.phpew-graph-bar {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--phpew-chart-bar-max);
  align-self: stretch;
  position: relative;
}

/* One series fills the column; several share it side by side. The stack is what
   the fills are positioned against, so a grouped chart needs no other rule. */
.phpew-graph-stack {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: var(--phpew-chart-group-gap);
}

.phpew-graph-fill {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  align-self: flex-end;
  /* Rounded at the data end only: the other end is the baseline, and rounding
     it would lift the bar off the number it is measured from. */
  border-radius: var(--phpew-chart-bar-radius) var(--phpew-chart-bar-radius) 0 0;
  transition: height var(--phpew-chart-motion) cubic-bezier(0.4, 0, 0.2, 1);
}

.phpew-graph[data-phpew-animate="none"] .phpew-graph-fill {
  transition: none;
}

/* The value sits at the head of its column, in ink -- never in the series
   colour. A number wearing the mark's colour is a second, worse legend. */
.phpew-graph-value {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  font: 600 var(--phpew-fs-xs) / 1 var(--phpew-font);
  color: var(--phpew-fg);
  white-space: nowrap;
}

.phpew-graph-keys {
  display: flex;
  justify-content: center;
  gap: var(--phpew-chart-bar-gap);
  padding-top: 0.35rem;
}

/* A line's key row has no bars to sit under: it labels POINTS, and the first
   and last of those sit hard against the edges of the box because a line spans
   its plot. Equal-width cells centre their labels a sixth of the way in, so
   every label but the middle one pointed at nothing. */
.phpew-graph--line .phpew-graph-keys {
  justify-content: space-between;
}

.phpew-graph--line .phpew-graph-key {
  flex: 0 1 auto;
  max-width: none;
}

.phpew-graph-key {
  flex: 1 1 0;
  min-width: 0;
  max-width: var(--phpew-chart-bar-max);
  text-align: center;
  font: var(--phpew-fs-xs) / 1.2 var(--phpew-font);
  color: var(--phpew-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phpew-graph-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* A line takes the series hue as a STROKE and a slice takes it as a FILL, both
   from the one `--phpew-graph-ink` the colour class publishes. That is why there
   is a single c1..c8 family instead of three parallel ones, and why a theme
   restyles every mark by moving the eight --phpew-chart-N it already ships. */
.phpew-graph-line {
  stroke: var(--phpew-graph-ink);
  stroke-width: var(--phpew-chart-line-width);
  stroke-linejoin: round;
  stroke-linecap: round;
  background: none;
}

/* A pie is round. preserveAspectRatio is left at its default here, and the box
   is square, because a pie stretched to its container is an ellipse and an
   ellipse lies about every slice in it. */
.phpew-graph-svg--pie {
  aspect-ratio: 1;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
}

.phpew-graph-plot--pie {
  border-bottom: 0;
  justify-content: center;
  align-items: center;
}

.phpew-graph-slice {
  fill: var(--phpew-graph-ink);
  /* The gap between neighbours, in the card's own colour, so slices separate
     without a line of some third colour appearing between them. */
  stroke: var(--phpew-chart-slice-border);
  stroke-width: var(--phpew-chart-slice-gap);
  background: none;
}

.phpew-graph-slice-label {
  fill: var(--phpew-chart-label-color);
  font: 600 var(--phpew-fs-xs) / 1 var(--phpew-font);
  paint-order: stroke;
  stroke: rgba(0, 0, 0, 0.35);
  stroke-width: 2.5;
  stroke-linejoin: round;
}

/* The value carriers. They hold what the runtime needs to redraw a mark that is
   not a box; nothing about them is for a reader, and the numbers they carry are
   on the page in the table. */
.phpew-graph-point,
.phpew-graph-points {
  display: none;
}

.phpew-graph-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.9rem;
  padding-top: 0.5rem;
  font: var(--phpew-fs-xs) / 1.2 var(--phpew-font);
  color: var(--phpew-muted);
}

.phpew-graph-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.phpew-graph-swatch {
  width: var(--phpew-chart-swatch-size);
  height: var(--phpew-chart-swatch-size);
  border-radius: 2px;
  flex: none;
}

.phpew-graph-table {
  margin-top: 0.5rem;
  font-size: var(--phpew-fs-xs);
}

.phpew-graph-table summary {
  color: var(--phpew-muted);
  cursor: pointer;
}

/* Asked for less movement, given less movement. */
@media (prefers-reduced-motion: reduce) {
  .phpew-graph-fill {
    transition: none;
  }
}

/* Chart geometry as CLASSES. The CSP is style-src self + nonce with no
   unsafe-inline, so a style attribute is refused however it gets there --
   including one a script sets. A bar height is therefore a class, in whole
   percent: on a 240px chart one step is 2.4px. */
.phpew-graph-h0 { height: 0%; }
.phpew-graph-h1 { height: 1%; }
.phpew-graph-h2 { height: 2%; }
.phpew-graph-h3 { height: 3%; }
.phpew-graph-h4 { height: 4%; }
.phpew-graph-h5 { height: 5%; }
.phpew-graph-h6 { height: 6%; }
.phpew-graph-h7 { height: 7%; }
.phpew-graph-h8 { height: 8%; }
.phpew-graph-h9 { height: 9%; }
.phpew-graph-h10 { height: 10%; }
.phpew-graph-h11 { height: 11%; }
.phpew-graph-h12 { height: 12%; }
.phpew-graph-h13 { height: 13%; }
.phpew-graph-h14 { height: 14%; }
.phpew-graph-h15 { height: 15%; }
.phpew-graph-h16 { height: 16%; }
.phpew-graph-h17 { height: 17%; }
.phpew-graph-h18 { height: 18%; }
.phpew-graph-h19 { height: 19%; }
.phpew-graph-h20 { height: 20%; }
.phpew-graph-h21 { height: 21%; }
.phpew-graph-h22 { height: 22%; }
.phpew-graph-h23 { height: 23%; }
.phpew-graph-h24 { height: 24%; }
.phpew-graph-h25 { height: 25%; }
.phpew-graph-h26 { height: 26%; }
.phpew-graph-h27 { height: 27%; }
.phpew-graph-h28 { height: 28%; }
.phpew-graph-h29 { height: 29%; }
.phpew-graph-h30 { height: 30%; }
.phpew-graph-h31 { height: 31%; }
.phpew-graph-h32 { height: 32%; }
.phpew-graph-h33 { height: 33%; }
.phpew-graph-h34 { height: 34%; }
.phpew-graph-h35 { height: 35%; }
.phpew-graph-h36 { height: 36%; }
.phpew-graph-h37 { height: 37%; }
.phpew-graph-h38 { height: 38%; }
.phpew-graph-h39 { height: 39%; }
.phpew-graph-h40 { height: 40%; }
.phpew-graph-h41 { height: 41%; }
.phpew-graph-h42 { height: 42%; }
.phpew-graph-h43 { height: 43%; }
.phpew-graph-h44 { height: 44%; }
.phpew-graph-h45 { height: 45%; }
.phpew-graph-h46 { height: 46%; }
.phpew-graph-h47 { height: 47%; }
.phpew-graph-h48 { height: 48%; }
.phpew-graph-h49 { height: 49%; }
.phpew-graph-h50 { height: 50%; }
.phpew-graph-h51 { height: 51%; }
.phpew-graph-h52 { height: 52%; }
.phpew-graph-h53 { height: 53%; }
.phpew-graph-h54 { height: 54%; }
.phpew-graph-h55 { height: 55%; }
.phpew-graph-h56 { height: 56%; }
.phpew-graph-h57 { height: 57%; }
.phpew-graph-h58 { height: 58%; }
.phpew-graph-h59 { height: 59%; }
.phpew-graph-h60 { height: 60%; }
.phpew-graph-h61 { height: 61%; }
.phpew-graph-h62 { height: 62%; }
.phpew-graph-h63 { height: 63%; }
.phpew-graph-h64 { height: 64%; }
.phpew-graph-h65 { height: 65%; }
.phpew-graph-h66 { height: 66%; }
.phpew-graph-h67 { height: 67%; }
.phpew-graph-h68 { height: 68%; }
.phpew-graph-h69 { height: 69%; }
.phpew-graph-h70 { height: 70%; }
.phpew-graph-h71 { height: 71%; }
.phpew-graph-h72 { height: 72%; }
.phpew-graph-h73 { height: 73%; }
.phpew-graph-h74 { height: 74%; }
.phpew-graph-h75 { height: 75%; }
.phpew-graph-h76 { height: 76%; }
.phpew-graph-h77 { height: 77%; }
.phpew-graph-h78 { height: 78%; }
.phpew-graph-h79 { height: 79%; }
.phpew-graph-h80 { height: 80%; }
.phpew-graph-h81 { height: 81%; }
.phpew-graph-h82 { height: 82%; }
.phpew-graph-h83 { height: 83%; }
.phpew-graph-h84 { height: 84%; }
.phpew-graph-h85 { height: 85%; }
.phpew-graph-h86 { height: 86%; }
.phpew-graph-h87 { height: 87%; }
.phpew-graph-h88 { height: 88%; }
.phpew-graph-h89 { height: 89%; }
.phpew-graph-h90 { height: 90%; }
.phpew-graph-h91 { height: 91%; }
.phpew-graph-h92 { height: 92%; }
.phpew-graph-h93 { height: 93%; }
.phpew-graph-h94 { height: 94%; }
.phpew-graph-h95 { height: 95%; }
.phpew-graph-h96 { height: 96%; }
.phpew-graph-h97 { height: 97%; }
.phpew-graph-h98 { height: 98%; }
.phpew-graph-h99 { height: 99%; }
.phpew-graph-h100 { height: 100%; }

.phpew-graph-c1 { background: var(--phpew-chart-1); --phpew-graph-ink: var(--phpew-chart-1); }
.phpew-graph-c2 { background: var(--phpew-chart-2); --phpew-graph-ink: var(--phpew-chart-2); }
.phpew-graph-c3 { background: var(--phpew-chart-3); --phpew-graph-ink: var(--phpew-chart-3); }
.phpew-graph-c4 { background: var(--phpew-chart-4); --phpew-graph-ink: var(--phpew-chart-4); }
.phpew-graph-c5 { background: var(--phpew-chart-5); --phpew-graph-ink: var(--phpew-chart-5); }
.phpew-graph-c6 { background: var(--phpew-chart-6); --phpew-graph-ink: var(--phpew-chart-6); }
.phpew-graph-c7 { background: var(--phpew-chart-7); --phpew-graph-ink: var(--phpew-chart-7); }
.phpew-graph-c8 { background: var(--phpew-chart-8); --phpew-graph-ink: var(--phpew-chart-8); }

.phpew-graph[data-phpew-height="120"] .phpew-graph-plot { height: 120px; }
.phpew-graph[data-phpew-height="160"] .phpew-graph-plot { height: 160px; }
.phpew-graph[data-phpew-height="200"] .phpew-graph-plot { height: 200px; }
.phpew-graph[data-phpew-height="220"] .phpew-graph-plot { height: 220px; }
.phpew-graph[data-phpew-height="240"] .phpew-graph-plot { height: 240px; }
.phpew-graph[data-phpew-height="280"] .phpew-graph-plot { height: 280px; }
.phpew-graph[data-phpew-height="320"] .phpew-graph-plot { height: 320px; }
.phpew-graph[data-phpew-height="400"] .phpew-graph-plot { height: 400px; }
.phpew-graph[data-phpew-height="480"] .phpew-graph-plot { height: 480px; }

.phpew-code-block {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  line-height: 1.6;
  background: var(--phpew-surface);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius);
  padding: 0.875rem 1rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
}


.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;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}


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

.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); }


/* The nav runs across the top. A 200px column down the side cost every pane
   that width for the whole session, and the panes are the point. */
.phpew-admin {
  display: block;
}
.phpew-admin-nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.125rem;
  /* The strip owns no space below it. What follows decides how close it sits. */
  margin-bottom: 0;
  /* The strip runs edge to edge; its words line up with the panes below it. */
  padding: 0 var(--phpew-admin-gutter) 0.35rem;
  border-bottom: 1px solid var(--phpew-border);
  position: sticky;
  /* Under the site header, not on top of it. The header's height is its
     content's -- a logo, at whatever size the theme sets -- so it is measured
     rather than guessed; a guess put the nav across the middle of the logo. */
  top: var(--phpew-header-h);
  z-index: 9;
  background: var(--phpew-bg);
}
/* .phpew-admin-content's padding belongs to phpew_admin.css, which is the
   sheet that has always set it. Two sheets padding one element is how the
   toolbar ended up with 24px above it that nothing here could explain. */
.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; }
/* A tab is as wide as its word; a menu row fills the panel it sits in. */
.phpew-admin-nav > a { white-space: nowrap; }
.phpew-admin-nav-menu a { width: 100%; white-space: nowrap; }
.phpew-admin-nav-badge {
  display: inline-flex;
  align-items: center;
  margin-left: auto;
  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;
  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 {
  position: relative;
}
.phpew-admin-nav-group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.5rem 0.75rem;
  font-size: var(--phpew-fs-sm);
  font-weight: 600;
  color: var(--phpew-fg);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border-radius: var(--phpew-radius-sm);
}
.phpew-admin-nav-group > summary::-webkit-details-marker { display: none; }
.phpew-admin-nav-group > summary::after {
  content: '▾';
  font-size: .7em;
  opacity: .6;
  transition: transform 120ms ease;
}
.phpew-admin-nav-group[open] > summary::after { transform: rotate(180deg); }
.phpew-admin-nav-group > summary:hover { background: var(--phpew-surface); }
/* Which group you are inside is worth showing; hanging it open is not. */
.phpew-admin-nav-group--current > summary { color: var(--phpew-accent); }

.phpew-admin-nav-menu {
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: 40;
  min-width: 12rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  padding: 0.3rem;
  background: var(--phpew-card-bg);
  border: 1px solid var(--phpew-border);
  border-radius: var(--phpew-radius-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
}
/* The last groups sit near the right edge, so their panels open leftward
   rather than off the page. */
.phpew-admin-nav-group:nth-last-child(-n+2) .phpew-admin-nav-menu {
  left: auto;
  right: 0;
}
.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-nav {
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-bottom: 1rem;
  }
  /* Scrolling clips an absolutely-positioned panel, so on a narrow screen the
     group opens in flow and pushes the page down instead. */
  .phpew-admin-nav-menu {
    position: static;
    box-shadow: none;
    min-width: 0;
  }
}


.phpew-layout {
  flex: 1 0 auto;
}

.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%; }
}

.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;
}
/* A notice, not a slab. It used to be a full-width bar in the flow above the
   nav, which pushed the page down, sat over the header and never went away. */
.phpew-admin-flash {
  position: fixed;
  top: calc(var(--phpew-header-h) + 3.25rem);
  right: 1.25rem;
  z-index: 8;
  max-width: min(28rem, calc(100vw - 2.5rem));
  margin: 0;
  padding: .6rem .9rem;
  font-size: var(--phpew-fs-sm);
  border-radius: var(--phpew-radius, .25rem);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
  transition: opacity 400ms ease;
}
.phpew-admin-flash[hidden] { display: none; }
.phpew-admin-flash--fading { opacity: 0; }
.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);
}
/* It worked, and something still wants looking at. */
.phpew-admin-flash--warning {
  background: var(--phpew-warn-bg, #fef3c7);
  color:      var(--phpew-warn-fg, #92400e);
}
.phpew-admin-form-inline { display: inline; }

.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; }

.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; }

.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); }

.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; }

.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; }

.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; }

.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); }

.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; }

.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; }

.phpew-pages-save-bar {
  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;
}

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

.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; }

.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; }

.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-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; }

.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; }

.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;
}

.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: '▾ '; }

.phpew-templates-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--phpew-card-min, 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-filters { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.phpew-template-search { flex: 1 1 16rem; max-width: 28rem; }
.phpew-filter-menu { position: relative; }
.phpew-filter-count {
  display: inline-block;
  min-width: 1.1rem;
  margin-left: 0.35rem;
  padding: 0 0.3rem;
  border-radius: 999px;
  background: var(--phpew-accent, #6c63ff);
  color: #fff;
  font-size: 0.75rem;
  text-align: center;
}
.phpew-filter-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 0.3rem);
  left: 0;
  min-width: 13rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--phpew-border);
  border-radius: 6px;
  background: var(--phpew-bg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}
.phpew-filter-clear { width: 100%; margin-bottom: 0.4rem; }
.phpew-filter-group-label {
  margin: 0.5rem 0 0.2rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--phpew-muted);
}
.phpew-filter-option {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.15rem 0.2rem;
  border-radius: 4px;
  cursor: pointer;
}
.phpew-filter-option:hover { background: var(--phpew-surface); }
.phpew-template-count { margin-left: auto; font-size: 0.85rem; }
.phpew-template-card-name { margin: 0; font-size: 0.95rem; line-height: 1.3; }
.phpew-template-card-desc { margin: 0; font-size: 0.85rem; color: var(--phpew-muted); }
.phpew-template-card-meta { margin: 0; }
.phpew-template-type-badge--form {
  background: var(--phpew-accent, #6c63ff);
  color: #fff;
  padding: 1px 6px;
  border-radius: 3px;
}
.phpew-template-card-actions { margin-top: auto; display: flex; gap: 0.4rem; flex-wrap: wrap; }
.phpew-template-toggle { display: inline; margin: 0; }
.phpew-template-card--disabled { opacity: 0.55; }
.phpew-template-cat-badge {
  background: var(--phpew-surface);
  color: var(--phpew-muted);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 0.72rem;
}
.phpew-template-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.75rem 0 0;
}
.phpew-btn--active {
  background: var(--phpew-accent);
  color: #fff;
  border-color: var(--phpew-accent);
}

.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; }

.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); }

.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; }
.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); }
.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; }
.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; }
.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%; }
.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; }

.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);
}
: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;
}
body[data-admin="1"] [data-section]:has([data-article-id]:hover) > .phpew-edit-pill {
    opacity: 0;
    pointer-events: none;
}


.phpew-site-not-ready {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
  text-align: center;
}
.phpew-site-not-ready-card { max-width: 34rem; }
.phpew-site-not-ready-title {
  font-size: var(--phpew-fs-xl, 2rem);
  margin: 0 0 .5rem;
  color: var(--phpew-fg);
}
.phpew-site-not-ready-lead {
  font-size: var(--phpew-fs-lg, 1.1rem);
  color: var(--phpew-fg);
  opacity: .7;
  margin: 0 0 1.75rem;
}
.phpew-site-not-ready-owner { font-size: var(--phpew-fs-sm, .9rem); }

.phpew-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); }

.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;
}

.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; }

.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; }

.phpew-account-fields {
  margin: 0 0 1.5rem;
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: .35rem 1rem;
}
.phpew-account-field {
  display: contents;
}
.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;
}

.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);
}

.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;
}

#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;
}

body.phpew-page--phpew-media-picker .phpew-header,
body.phpew-page--phpew-media-picker .phpew-footer {
  display: none;
}

/* A field authored to hold a value rather than show one. Replaces the old
   per-field `render: false`, which produced no element at all and so could
   not be targeted, overridden, or seen in the editor's preview. */
.phpew-hidden { display: none; }

.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;
}

.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-row:has(> .phpew-form-label--inline) {
  flex-direction: row;
  align-items: baseline;
  gap: .5rem;
}

.phpew-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.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);
}

.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;
  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);
  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;
}
.phpew-form-image-preview--light {
  background-color: #fff;
  background-image: none;
}
.phpew-form-image-preview--dark {
  background-color: #111;
  background-image: none;
}

.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-note {
  color: var(--phpew-muted, #555);
  font-size: var(--phpew-fs-sm, .85rem);
  margin: .15rem 0 0;
}

.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);
}

.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;
}

.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; }

.phpew-form-row--inline {
  display: inline-block;
  vertical-align: bottom;
  margin-right: 12px;
}
.phpew-form-signal-btn { margin-bottom: 2px; }
.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-form-objlist,
.phpew-form-objfield {
  border: 1px solid var(--phpew-border, #d1d5db);
  border-radius: var(--phpew-radius, .25rem);
  padding: .75rem;
  margin: .5rem 0;
}
.phpew-form-objitem {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: .5rem;
  padding: .5rem 0;
  border-bottom: 1px solid var(--phpew-border, #d1d5db);
}
.phpew-form-objitem:last-child { border-bottom: 0; }
.phpew-form-objitem .phpew-form-row { flex: 1 1 8rem; }
.phpew-form-objadd { margin-top: .5rem; }

.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;
}


.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);
}


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


.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);
}


.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);
}


.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);
}


.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;
}


.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);
}

.phpew-forum-post-body img,
.phpew-forum-post-signature img {
    max-width: 100%;
    max-height: 24rem;
    height: auto;
    border-radius: var(--phpew-radius-sm);
}

.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);
}


.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;
}


.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);
}


.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);
}

.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);
}

.phpew-forum-preview {
    border: 1px solid var(--phpew-border);
    border-radius: var(--phpew-radius-sm);
    background: var(--phpew-surface);
    min-height: 4rem;
}


.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);
}


.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;
}


.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;
}


.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;
}


.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);
}


.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;
}

.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;
}


.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;
}


.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;
}


.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);
}


.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);
}


@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;
    }
}

.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;
}

.phpew-ds-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--phpew-card-min, 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);
}


.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; }


.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; }

#ppl-table              { width: 100%; table-layout: fixed; }
#ppl-table th:nth-child(2), #ppl-table td:nth-child(2) { width: 20%; }
#ppl-table th:nth-child(3), #ppl-table td:nth-child(3) { width: 28%; }
#ppl-table th:nth-child(4), #ppl-table td:nth-child(4) { width: 32%; }
#ppl-table input,
#ppl-table select       { width: 100%; box-sizing: border-box; }

.phpew-behaviors-actions {
  white-space: nowrap;
  display: flex;
  gap: 0.375rem;
  align-items: center;
}


.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(var(--phpew-card-min, 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;
}
.phpew-admin-editor-row--checkboxes .phpew-admin-checkbox-heading {
  flex-basis: 100%;
  margin: 0 0 0.15rem;
}
.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; }

/* ══ A card's height is the card's, not its longest word's ═════════════════
   Every text part of a card wrapped freely, so narrowing the column did not
   make a card smaller: it made it TALLER. A three-word template name became
   three lines, a slug became a paragraph of monospace, and the two buttons
   stopped sharing a row and stacked. At the small end of the size slider the
   tiles were several times taller than they were wide.

   Each part is given the number of lines it is worth instead. The card then
   shrinks in both directions at once, which is what "smaller card" means. */
.phpew-content-card-type,
.phpew-content-card-slug,
.phpew-template-card-meta {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phpew-content-card-title,
.phpew-template-card-desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
/* The badge floats over the thumbnail, so it has no column to be bounded by
   and ran off the edge of a narrow card. */
.phpew-content-card-status,
.phpew-content-card-featured {
  max-width: calc(100% - 1rem);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phpew-content-card-actions {
  display: flex;
  gap: 0.35rem;
  padding: 0 0.9rem 0.9rem;
  /* Two narrow buttons beside each other, not two wide ones stacked: wrapping
     is what turned the action row into two rows on every card at once. */
  flex-wrap: nowrap;
}

/* Below a certain width a card cannot carry everything it carries at full
   size, and clamping alone still leaves it twice as tall as it is wide. So it
   drops what it can spare: the slug and the type label are both repeated in
   the editor one click away, the title and the two buttons are not.

   Keyed to the CARD's own width rather than the viewport's, so it holds for a
   small card in a wide window and a large card in a narrow region alike. The
   size slider and the region width both go through it without knowing it is
   there. */
.phpew-content-card,
.phpew-template-card {
  container-type: inline-size;
}
@container (max-width: 11rem) {
  /* What a small card DROPS is the chrome: the state pill, and the buttons.
     Both are recoverable -- the thumbnail is still a link into the editor, and
     state is what the list and the filters are for.

     What it KEEPS is the answer to "what is this": the type, and the slug.
     The slug rather than the title, because at this size a title truncates to
     something that identifies nothing while a slug is already short by
     construction. The title comes back at full size, where it fits. */
  .phpew-content-card-status,
  .phpew-content-card-featured,
  .phpew-content-card-actions,
  .phpew-content-card-appears,
  .phpew-content-card-title,
  .phpew-template-card-desc {
    display: none;
  }
  /* The identifier is the whole point of a small card, so it gets two lines
     rather than an ellipsis that would eat half of it. */
  .phpew-content-card-slug {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    overflow-wrap: anywhere;
    line-height: 1.3;
  }
  .phpew-content-card-type {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .phpew-content-card-body {
    padding: 0.45rem 0.5rem 0.5rem;
    gap: 0.2rem;
  }
  .phpew-content-card-thumb-fallback {
    font-size: 1.75rem;
  }
}
.phpew-content-card-actions .phpew-btn {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  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%; }


.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;
}

.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;
}
.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; }
.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; }
.phpew-auto-reply-fields[data-hidden] { display: none; }

.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;
}

.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; }


/* No space above the first thing under the nav strip: a pane's own toolbar
   runs flush against it, and a pane that wants air asks for it. The side
   padding is the admin gutter, which the strip pads by and the toolbar breaks
   out of -- one number, so the three of them line up. */
.phpew-admin-content {
  --pane-gap: 1.25rem;
  padding: 0 var(--phpew-admin-gutter, 1.75rem) 4rem;
}
.phpew-admin-content > h1:first-child,
.phpew-admin-content > h2:first-child { margin-top: 1.25rem; }

/* ══ A bar is one row ══════════════════════════════════════════════════════
   Every toolbar in the admin was written to sit across a page: the trailing
   cluster pushed to the far edge so the two ends line up with the column's
   margins, and its controls inheriting `.phpew-admin-input`'s `width: 100%`,
   which is right in a stacked form and wrong in a row.

   Together those two make a bar fall apart as it gets wider. One search box
   claims the whole line, everything after it wraps, and the Content toolbar
   stands four rows tall with a canyon down the middle. Docked in a region,
   which is often twice a column's width, it was 193px of chrome above the
   thing you came to look at.

   The bar spreads in exactly three ways in this codebase, so all three are
   undone here rather than a pane at a time: an `auto` margin on the trailing
   cluster, a spacer element, and `space-between` on the bar. The Studio's own
   toolbar already had to undo the width rule for itself, which is the tell
   that it belonged here and not there.

   A bar written after this is covered without being named, as long as it
   spreads the same ways and carries one of these class names. */
.phpew-admin-content :is(
  .phpew-content-toolbar,
  .phpew-content-bulk-bar,
  .phpew-pages-toolbar,
  .phpew-pane-toolbar,
  .phpew-template-filters,
  .phpew-admin-header,
  .phpew-form-actions,
  .phpew-toolbar
) {
  justify-content: flex-start;
}
.phpew-admin-content :is(
  .phpew-content-toolbar,
  .phpew-content-bulk-bar,
  .phpew-pages-toolbar,
  .phpew-pane-toolbar,
  .phpew-template-filters,
  .phpew-admin-header,
  .phpew-form-actions,
  .phpew-toolbar
) > * {
  margin-left: 0;
  margin-right: 0;
}
.phpew-admin-content :is(.phpew-spacer, .phpew-content-bulk-spacer) {
  display: none;
}
/* A control in a bar is as wide as it needs to be. The search keeps a floor so
   it stays usable and a ceiling so it cannot take the row back. */
.phpew-admin-content :is(
  .phpew-content-toolbar,
  .phpew-content-bulk-bar,
  .phpew-pages-toolbar,
  .phpew-pane-toolbar,
  .phpew-template-filters,
  .phpew-admin-header,
  .phpew-form-actions,
  .phpew-toolbar
) :is(input, select, textarea, .phpew-admin-input) {
  width: auto;
}
.phpew-admin-content :is(
  .phpew-content-toolbar,
  .phpew-content-bulk-bar,
  .phpew-pages-toolbar,
  .phpew-pane-toolbar,
  .phpew-template-filters,
  .phpew-admin-header,
  .phpew-form-actions,
  .phpew-toolbar
) :is(input[type="search"], input[type="text"]) {
  flex: 1 1 12rem;
  min-width: 8rem;
  max-width: 22rem;
}
.phpew-admin-content :is(
  .phpew-content-toolbar,
  .phpew-content-bulk-bar,
  .phpew-pages-toolbar,
  .phpew-pane-toolbar,
  .phpew-template-filters,
  .phpew-admin-header,
  .phpew-form-actions,
  .phpew-toolbar
) select {
  max-width: 12rem;
}

/* A pane's name, what you can do, and a `?` holding the explanation. */
.phpew-pane-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 1rem 0 0.75rem;
}
/* It is the first thing in the pane, so there is nothing above it to be
   separated from. */
.phpew-pane-head:first-child { margin-top: 0; }
.phpew-pane-head .phpew-pane-title {
  margin: 0 0.35rem 0 0;
  padding: 0;
  border: 0;
  font-size: 1.15rem;
  font-weight: 600;
}
/* Two classes, because .phpew-btn's own padding is one class too and loads
   from a different sheet: at equal weight it kept its 1.125rem sides and
   squeezed the glyph inside to nothing. */
.phpew-btn.phpew-pane-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  min-width: 1.7rem;
  padding: 0;
  gap: 0;
  line-height: 0;
}
.phpew-btn.phpew-pane-icon svg { display: block; }
.phpew-pane-help {
  margin: -0.35rem 0 0.9rem;
  max-width: 60rem;
  font-size: var(--phpew-fs-sm);
  line-height: 1.55;
}
.phpew-pane-help[hidden] { display: none; }

.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;
}

.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;
}

.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;
}

.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;
}

.phpew-admin-content .phpew-table {
  margin: 0.5rem 0 1.5rem;
}
.phpew-admin-content table:not([class]) {
  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);
}

.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);
}

.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;
}

.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); }

.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);
}

.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;
}

.phpew-admin-table th,
.phpew-admin-table td { padding: 0.55rem 0.85rem; }
.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;
}
.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);
}

.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);
}

.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; }

.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; }

.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; }

/* Your sites: one card per site. Header (name + host + plan pill), an
   optional address-editor row (Pro), then a wrapping actions row — so the
   inline address field never competes with the site name for width. */
.snazy-sites .snazy-sites-list {
    list-style: none; margin: 0 0 1.5rem; padding: 0;
    display: flex; flex-direction: column; gap: .85rem;
}
.snazy-site-card {
    display: flex; flex-direction: column; gap: .85rem;
    padding: 1.25rem 1.35rem;
    border: 1px solid var(--phpew-border, rgba(0,0,0,.12));
    border-radius: .75rem;
    background: var(--phpew-card-bg, var(--phpew-surface, #fff));
}
.snazy-site-card--pending { opacity: .75; border-style: dashed; }

.snazy-site-card-head {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
}
.snazy-site-titles { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.snazy-site-name { font-size: 1.15rem; font-weight: 700; line-height: 1.2; color: var(--phpew-fg); }
.snazy-site-host { color: var(--phpew-muted); font-size: var(--phpew-fs-sm, .85rem); word-break: break-all; }

.snazy-site-plan {
    flex: none; align-self: flex-start;
    padding: .2rem .6rem; border-radius: 999px;
    font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
    background: var(--phpew-surface, #f4f4f5); color: var(--phpew-muted);
    border: 1px solid var(--phpew-border);
}
.snazy-site-plan--pro {
    background: color-mix(in srgb, var(--phpew-accent) 14%, transparent);
    color: var(--phpew-accent);
    border-color: color-mix(in srgb, var(--phpew-accent) 35%, transparent);
}

.snazy-site-pending { margin: 0; color: var(--phpew-error); font-weight: 600; font-size: var(--phpew-fs-sm); }

.snazy-site-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0; }
.snazy-site-actions form { margin: 0; }
.snazy-site-card .snazy-signup-btn { margin: 0; width: auto; padding: .5rem 1.15rem; font-size: .92rem; }
.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" row: [ new-address ][.snazy.com] [Change]. Its own
   line under the header, so the field can grow without squeezing anything. */
.snazy-site-address { display: flex; align-items: center; gap: .5rem; margin: 0; flex-wrap: wrap; }
.snazy-slug-field {
    display: inline-flex; align-items: center; flex: 1 1 15rem; min-width: 0;
    border: 1px solid var(--phpew-border-strong, var(--phpew-border));
    border-radius: 6px; overflow: hidden; background: var(--phpew-bg);
}
.snazy-slug-field:focus-within { outline: 2px solid var(--phpew-accent); outline-offset: 1px; }
.snazy-slug-input {
    flex: 1; border: 0; padding: .5rem .6rem; background: transparent; color: inherit;
    font: inherit; min-width: 0; outline: none;
}
.snazy-slug-suffix { padding: .5rem .6rem .5rem 0; color: var(--phpew-muted); white-space: nowrap; }

/* Account → Connected apps: cross-site OAuth grant table */
.snazy-connected-apps .snazy-signup-sub { color: var(--phpew-muted); margin: -.4rem 0 1.4rem; }
.snazy-connected-apps .snazy-muted { color: var(--phpew-muted); }
.snazy-connected-apps .snazy-empty { padding: 1.5rem; border: 1px dashed var(--phpew-border, rgba(0,0,0,.14)); border-radius: var(--phpew-radius, .5rem); }
.snazy-connected-apps .snazy-empty p { margin: 0 0 .5rem; }
.snazy-apps-table { width: 100%; border-collapse: collapse; }
.snazy-apps-table th, .snazy-apps-table td { text-align: left; padding: .7rem .75rem; border-bottom: 1px solid var(--phpew-border, rgba(0,0,0,.1)); vertical-align: middle; }
.snazy-apps-table th { font-size: var(--phpew-fs-sm, .82rem); text-transform: uppercase; letter-spacing: .04em; color: var(--phpew-muted); }
.snazy-apps-app strong { font-weight: 650; }
.snazy-apps-revoke { margin: 0; }
.snazy-btn--danger { background: transparent; border: 1px solid rgba(200,40,40,.55); color: #c62828; padding: .4rem .9rem; border-radius: var(--phpew-radius, .375rem); font: inherit; font-weight: 600; cursor: pointer; }
.snazy-btn--danger:hover { background: rgba(200,40,40,.1); }
@media (max-width: 720px) {
    .snazy-apps-table thead { display: none; }
    .snazy-apps-table tr { display: block; border: 1px solid var(--phpew-border, rgba(0,0,0,.12)); border-radius: var(--phpew-radius, .5rem); margin-bottom: .7rem; padding: .5rem .75rem; }
    .snazy-apps-table td { display: flex; justify-content: space-between; gap: 1rem; border: none; padding: .3rem 0; }
}

/* ─────────────────────────────────────────────────────────────────────────
 * 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: var(--phpew-accent-fg, #fff);
    /* Solid backdrop behind the (often transparent PNG) hero image so its
     * gaps don't show the page background through. The ACCENT token, not a
     * baked navy -- the picked theme owns the hero's tint. */
    background-color: var(--phpew-accent, #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: var(--phpew-accent-fg, #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: color-mix(in srgb, var(--phpew-accent-fg, #fff) 88%, transparent);
    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: var(--phpew-accent-fg, #fff);
    color: var(--phpew-accent, #0f1c3d);
}
.phpew-section--snazy-hero .phpew-section-link:nth-of-type(2) {
    background: transparent;
    color: var(--phpew-accent-fg, #fff);
    border: 2px solid color-mix(in srgb, var(--phpew-accent-fg, #fff) 65%, transparent);
}
.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-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);
}


.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--error {
  background: var(--phpew-error-bg, #fef2f2);
  border: 1px solid var(--phpew-error, #dc2626);
  color: var(--phpew-error, #dc2626);
}
.phpew-admin-notice--error[hidden] { display: none; }
.phpew-admin-notice--warn {
  background: var(--phpew-error-bg, #fffbeb);
  border: 1px solid var(--phpew-warning, #d97706);
  color: var(--phpew-warning, #92400e);
}


.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;
}
.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;
}


.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);
}
/* Four fields, two rows: Name and Type, then Description and Category. Sized
   to what they need rather than to the width available. */
.phpew-admin-toolbar-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 0.75rem;
  align-items: start;
  flex: 1;
  max-width: 46rem;
}
.phpew-admin-toolbar-meta .phpew-admin-label { margin: 0; }
.phpew-admin-toolbar-meta small { line-height: 1.3; }
@media (max-width: 40rem) {
  .phpew-admin-toolbar-meta { grid-template-columns: minmax(0, 1fr); }
}
.phpew-admin-toolbar-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  flex-shrink: 0;
}

.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;
}
.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);
}
.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);
}


.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--preview {
  position: sticky;
  top: 1rem;
  align-self: start;
  height: calc(100vh - 2rem);
}
.phpew-admin-split-pane--fields {
  align-self: start;
}
.phpew-admin-split--preview-folded {
  grid-template-columns: 1fr;
  max-width: 60rem;
}
.phpew-admin-split--preview-folded .phpew-admin-split-pane--preview {
  position: static;
  height: auto;
}
.phpew-admin-split--preview-folded .phpew-admin-preview-frame {
  display: none;
}

.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));
}

.phpew-admin-fields {
  padding: 0.75rem;
  overflow-y: auto;
  flex: 1;
  background: var(--phpew-card-bg, #fff);
}
.phpew-admin-fields-footer {
  display: flex;
  justify-content: flex-end;
  padding: 0.5rem 0.75rem;
  background: var(--phpew-surface, var(--phpew-subtle, #f9fafb));
  border-top: 1px solid var(--phpew-border, #ddd);
}
.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%;
}

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


.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);
}


.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);
}


.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);
}
.pt-field-toggle {
  align-self: center;
  padding: 0.25rem 0.55rem;
  min-width: auto;
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
}
/* A row's delete is a small mark in the corner, not a button competing with
   the field's own controls for attention. */
.pt-field-remove {
  margin-left: auto;
  align-self: center;
  flex: 0 0 auto;
  width: 1.6rem;
  height: 1.6rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  line-height: 1;
  border-radius: var(--phpew-radius, 4px);
  border: 1px solid var(--phpew-border, #e4e4e7);
  background: transparent;
  color: var(--phpew-muted, #71717a);
  cursor: pointer;
}
.pt-field-remove {
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 14%, transparent);
  border-color: color-mix(in srgb, var(--pt-group-hue, var(--phpew-border, #e4e4e7)) 30%, transparent);
}
.pt-field-remove:hover,
.pt-field-remove:focus-visible {
  background: color-mix(in srgb, var(--phpew-error, #dc2626) 14%, transparent);
  border-color: var(--phpew-error, #dc2626);
  color: var(--phpew-error, #dc2626);
}

.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-body[hidden] {
  display: none;
}
.pt-field-render-wrap {
  flex-direction: row !important;
  align-items: center;
  font-weight: 400;
}
.pt-field-options {
  font-family: var(--phpew-font-mono, ui-monospace, monospace);
  font-size: var(--phpew-fs-sm, 0.875rem);
}

.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;
}

.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);
}

.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;
}

.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);
}


.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; }
}

@media (max-width: 800px) {
  .phpew-admin-split { grid-template-columns: 1fr; }
  .phpew-admin-split-pane--preview { position: static; height: auto; }
  .phpew-admin-preview-frame { min-height: 300px; }
}


.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;
}

.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;
}

.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; }

.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);
}


.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;
}

.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;
  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;
  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");
}
.phpew-source-entry--hidden {
  opacity: 0.55;
}
.phpew-source-entry--hidden .phpew-source-badge,
.phpew-source-entry--hidden [class$="-title"] {
  text-decoration: line-through;
}

.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);
}
/* A setting is a name above a box. The name is what the placeholder used to
   have to carry, which is why every placeholder had become a sentence. */
.phpew-jack-param-row {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 12rem;
  flex: 1 1 12rem;
}
.phpew-jack-param-label {
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-muted, #71717a);
  line-height: 1.2;
}
.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;
}
/* Inside a labelled row the input is the row's only child that grows, and the
   row already carries the width. */
.phpew-jack-param-row .phpew-jack-param { min-width: 0; flex: 1 1 auto; }
.phpew-jack-cordnote {
  flex-basis: 100%;
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-muted, #71717a);
  text-decoration: none;
}
.phpew-jack-cordnote:hover { color: var(--phpew-fg, #18181b); text-decoration: underline; }
.phpew-jack-fieldnote {
  flex-basis: 100%;
  font-size: var(--phpew-fs-xs, 0.75rem);
  color: var(--phpew-muted, #71717a);
  padding: 0.3rem 0.45rem;
  border-left: 2px solid var(--phpew-accent, #6366f1);
  background: var(--phpew-surface, #fafafa);
  border-radius: 0 4px 4px 0;
}
.phpew-jack-fieldnote a { color: var(--phpew-accent, #6366f1); }

.pt-field-signals {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--phpew-border, #e4e4e7);
  border-radius: 6px;
  background: var(--phpew-surface, #fafafa);
}
.pt-field-signals-title {
  font-size: var(--phpew-fs-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phpew-muted, #71717a);
  margin-bottom: 0.35rem;
}
.pt-field-signals-detail {
  margin: 0.25rem 0 0.5rem 0.85rem;
  padding-left: 0.6rem;
  border-left: 2px solid var(--phpew-border, #e4e4e7);
}
.pt-field-signals-check { display: flex; align-items: center; gap: 0.4rem; }

.pt-field-typed-row[hidden] { display: none; }
/* The two blocks with the most area were carrying the most weight: the help
   sat in a filled box and the pills were solid buttons, both reading as
   loudly as the controls. Both go quiet -- no fill, thin border, muted until
   the pointer arrives -- so the row's own values are the only filled things
   in it. */
/* The type's summary is a footnote about the row, not a heading over it: the
   controls come first and it explains them afterwards. The typed form is a
   flex column, so ordering it last beats depending on append order. */
.pt-field-typed-summary {
  order: 99;
  background: none;
  border: 0;
  border-top: 1px dashed var(--phpew-border, #ddd);
  padding: 0.35rem 0 0;
  margin-top: 0.15rem;
  color: var(--phpew-muted, #71717a);
}
/* The pills take their card's hue rather than a neutral outline, a step above
   the 7% the card sits at so they lift off it without becoming a second thing
   to look at. */
.pt-config-attach {
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pt-group-hue, var(--phpew-border, #e4e4e7)) 30%, transparent);
  color: var(--phpew-muted, #71717a);
  font-weight: 500;
  padding: 0.22rem 0.55rem;
}
.pt-config-attach:hover,
.pt-config-attach:focus-visible {
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 26%, transparent);
  border-color: color-mix(in srgb, var(--pt-group-hue, var(--phpew-fg, #52525b)) 60%, transparent);
  color: var(--phpew-fg, inherit);
}
.pt-config-attach-bar { border-top: 0; padding-top: 0.15rem; }
.pt-field-row { margin-bottom: 0.9rem; }
.pt-field-moves { display: inline-flex; flex-direction: column; gap: 1px; align-self: center; }
.pt-field-move {
  width: 1.35rem;
  height: 0.95rem;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  line-height: 1;
  border-radius: 3px;
  cursor: pointer;
  /* Same step off the card as the pills take, so every control in a row
     belongs to the same hue rather than to a neutral system laid over it. */
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--pt-group-hue, var(--phpew-border, #e4e4e7)) 30%, transparent);
  color: var(--phpew-muted, #71717a);
}
.pt-field-move:hover,
.pt-field-move:focus-visible {
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 26%, transparent);
  border-color: color-mix(in srgb, var(--pt-group-hue, var(--phpew-fg, #52525b)) 60%, transparent);
  color: var(--phpew-fg, inherit);
}

/* A row is tinted by its type's group, so a long field list shows where one
   kind of field ends and the next begins before anything is read. Mixed into
   the surface rather than set outright, so it lands the same on either theme
   and stays a hint rather than a colour. */
.pt-field-row[data-group] {
  background: color-mix(in srgb, var(--pt-group-hue, transparent) 7%, var(--phpew-surface, transparent));
  border-left: 3px solid color-mix(in srgb, var(--pt-group-hue, transparent) 55%, transparent);
}
.pt-field-row[data-group="text"]        { --pt-group-hue: #64748b; }
.pt-field-row[data-group="form"]        { --pt-group-hue: #8b5cf6; }
.pt-field-row[data-group="input"]       { --pt-group-hue: #6366f1; }
.pt-field-row[data-group="choice"]      { --pt-group-hue: #0ea5e9; }
.pt-field-row[data-group="data"]        { --pt-group-hue: #14b8a6; }
.pt-field-row[data-group="media"]       { --pt-group-hue: #ec4899; }
.pt-field-row[data-group="reference"]   { --pt-group-hue: #f59e0b; }
.pt-field-row[data-group="structure"]   { --pt-group-hue: #a3a3a3; }
.pt-field-row[data-group="interactive"] { --pt-group-hue: #22c55e; }
.pt-field-row[data-group="chrome"]      { --pt-group-hue: #78716c; }
.pt-field-body { gap: 0.55rem; }

/* Hierarchy inside a row: the key IS the field, so it reads first. The
   captions over Key and Type name two obvious controls and recede; the help
   and the pills sit quieter still. */
.pt-field-head .pt-field-key,
.pt-field-head .pt-field-type {
  font-size: var(--phpew-fs-md, 1rem);
  font-weight: 600;
}
.pt-field-head > .phpew-admin-label {
  font-size: var(--phpew-fs-xs, 0.7rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phpew-muted, #71717a);
}
.pt-field-typed-summary,
.pt-field-typed-row small {
  font-size: var(--phpew-fs-xs, 0.75rem);
}
.pt-config-attach { font-size: var(--phpew-fs-sm, 0.8rem); }
.pt-field-typed-row > .phpew-admin-label {
  font-size: var(--phpew-fs-sm, 0.8rem);
  font-weight: 600;
}

/* An attached control's remove sits in its corner, clear of the help text. */
.pt-field-typed-row,
.pt-field-signals,
.pt-field-class-wrap { position: relative; }
/* The remove is absolute, so anything holding one has to be its origin --
   otherwise it resolves against some outer ancestor and leaves the block it
   belongs to looking like it cannot be removed. */
.pt-field-signals .pt-config-detach,
.pt-field-class-wrap .pt-config-detach { top: 0.35rem; right: 0.35rem; }
.pt-field-class-wrap { padding-right: 2rem; }
/* Box first, words beside it, on one line -- and the words keep the weight
   the stacked captions have so a checkbox row does not read as lighter than
   the controls around it. */
.pt-config-check {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 0.45rem;
  padding-right: 1.8rem;
}
.pt-config-check input[type="checkbox"] { flex: 0 0 auto; margin: 0; }
.pt-config-check span { font-weight: 600; }
.pt-config-detach { position: absolute; top: 0; right: 0; margin: 0; }
.pt-config-remove { margin-left: 0; align-self: center; }
.pt-config-ref { display: block; }
.pt-config-group {
  margin: 0.2rem 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--phpew-border, #e4e4e7);
  border-radius: 6px;
  background: var(--phpew-surface, #fafafa);
}
.pt-config-group-title {
  font-size: var(--phpew-fs-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--phpew-muted, #71717a);
  margin-bottom: 0.35rem;
}
.pt-config-group-toggle { display: flex; align-items: center; gap: 0.4rem; }
.pt-config-group-body { display: flex; flex-direction: column; gap: 0.4rem; }
.pt-config-group-body[hidden] { display: none; }
.pt-config-list, .pt-config-pairs { display: flex; flex-direction: column; gap: 0.4rem; }
.pt-config-list-item {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
}
.pt-config-list-item > .pt-config-group { flex: 1; }
.pt-config-pairs-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.4rem;
  align-items: center;
}
.pt-config-add { align-self: flex-start; margin-top: 0.4rem; }
.pt-config-attach-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--phpew-border, #ddd);
}
.pt-config-attach-bar[hidden] { display: none; }
/* .phpew-btn sets display: inline-flex, which outranks the hidden attribute,
   so every one of these needs saying explicitly or an attached control keeps
   offering to be added. */
.pt-config-attach[hidden],
.pt-config-detach[hidden],
.pt-field-remove[hidden],
.pt-field-move[hidden],
.pt-field-signals[hidden] { display: none; }
.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);
}

.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;
}
.phpew-source-panel[hidden] { display: none; }
.phpew-source-search {
  width: 100%;
  box-sizing: border-box;
}
.phpew-source-list {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  overflow-y: auto;
  border: 1px solid var(--phpew-border, #ddd);
  border-radius: var(--phpew-radius-sm, 3px);
}
.phpew-source-list-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.6rem;
  cursor: pointer;
  border-bottom: 1px solid var(--phpew-border, #ddd);
  transition: background 0.1s;
}
.phpew-source-list-item:last-child { border-bottom: none; }
.phpew-source-list-item--active {
  background: color-mix(in srgb, var(--phpew-accent, #6366f1) 14%, var(--phpew-card-bg, #fff));
}
.phpew-source-list-item:hover {
  background: color-mix(in srgb, var(--phpew-accent, #6366f1) 8%, var(--phpew-card-bg, #fff));
}
.phpew-source-list-thumb {
  width: 3rem;
  height: 2rem;
  object-fit: cover;
  border-radius: 2px;
  flex-shrink: 0;
}
.phpew-source-list-info {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  min-width: 0;
}
.phpew-source-list-title {
  font-size: var(--phpew-fs-sm, 0.875rem);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.phpew-source-list-meta {
  font-size: var(--phpew-fs-xs, 0.75rem);
}
.phpew-source-list-empty {
  padding: 0.75rem;
}
.phpew-source-picker-footer {
  padding: 0.75rem;
  border-top: 1px solid var(--phpew-border, #ddd);
}
.phpew-source-show-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0;
  font-size: var(--phpew-fs-sm, 0.875rem);
  color: var(--phpew-muted, #888);
  cursor: pointer;
}

.phpew-source-renderer { display: block; margin-top: 0.5rem; }
.phpew-source-usebtn   { margin-top: 0.5rem; }

.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; }

.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); }

.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%; }


:root {
  --phpew-bg: #e9edf2;
  --phpew-fs-base: 1rem;
  --snazy-gutter: 0;
  --snazy-section-gap: 0;
  --snazy-content-max: 72rem;
  --snazy-hero-bg: #12285e;
  --snazy-bg-tint: #5671d3;
  --snazy-feature-bg: #dacfc0;
  --snazy-quote-outline: #57389f;
  --snazy-bgc-00: #ff00ea;
  --snazy-bgc-01: #00ff9d;
  --snazy-bgc-02: #007bff;
  --snazy-bgc-03: #c2ff52;
  --snazy-bgc-04: #ff00ea;
  --snazy-bgc-05: #007bff;
  --snazy-bgc-06: #0d558c;
  --snazy-bgc-07: #1290af;
  --snazy-bgc-08: #9949b6;
  --snazy-bgc-10: #5432a4;
  --snazy-bgc-09: #061532;
}

}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap'); /* phpew-style-inspector:start (auto — edit via Edit style) */ .phpew-section--saas-logos .phpew-section-datasource--cards {
  grid-template-columns: repeat(4, auto);
  grid-template-rows: repeat(2, auto);
}
/* phpew-style-inspector:end */

.phpew-i-1 {
  padding: 0;
}

.phpew-section {
  padding: 2rem 1rem 1rem 1rem;
    margin: auto;
}

body.phpew-page.phpew-page--pricing > div.phpew-layout.phpew-layout-snazy-simple-page > .phpew-section.phpew-section--saas-pricing > div.phpew-section-datasource.phpew-section-datasource--cards {
  width: fit-content;
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: auto auto;
    grid-template-rows: 1fr;
    margin: auto;
}

.phpew-section-longtext {
  background-color: var(--phpew-card-bg);
    padding: 1rem;
    border-radius: 0 1rem 1rem;
}

.phpew-section-text {
  padding: 0.5rem;
    border-radius: 0;
}

.phpew-section-list {
  padding: 0.5rem;
    background-color: var(--phpew-surface);
    border-radius: 0.5rem;
}

.phpew-section--saas-pricing-hero {
  background-image: url('https://snazy-apex-300272448281-us-east-2-an.s3.us-east-2.amazonaws.com/uploads/snazy/images/snazy-theme/features-bg.webp?v=1782676449');
    display: grid;
}

.phpew-content--snazy-pricing-hero {
  background-image: url('https://snazy-apex-300272448281-us-east-2-an.s3.us-east-2.amazonaws.com/uploads/snazy/images/snazy-theme/features-bg.webp?v=1782676449');
    background-size: cover;
    background-color: var(--phpew-accent);
}

.phpew-content--snazy-home-hero {
  display: grid;
    height: 20rem;
    background: var(--snazy-hero-bg);
}

#snazy-home-hero-primary_cta {
  width: 17rem;
    margin: auto;
    z-index: 2;
    position: relative;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-pricing > div.phpew-section-datasource.phpew-section-datasource--cards {
  display: flex;
  grid-template-columns: auto auto;
  width: fit-content;
  margin: 2rem auto;
}

.phpew-section-heading {
  align-self: start;
    margin: 0;
    padding: 1rem;
}

#snazy-home-hero-heading {
  margin: auto;
    z-index: 1;
    position: relative;
    font-size: 37px;
    letter-spacing: 9px;
    font-family: "Inter", sans-serif;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-testimonials > div.phpew-section-datasource.phpew-section-datasource--cards {
  width: 72rem;
    margin: auto;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-testimonials > div.phpew-section-datasource.phpew-section-datasource--cards > section.phpew-section.phpew-section--testimonial.phpew-section-body.content > div.phpew-section-longtext {
  border-radius: 1rem 1rem 1rem 0;
  margin: 0 0 2rem 4rem;
  align-self: end;
  height: 100%;
  corner-shape: round;
  border-width: 0.2rem;
  border-style: solid;
  outline-style: solid !important;
  outline-width: 0.25rem;
  outline-color: var(--snazy-quote-outline);
  border-color: var(--phpew-accent);
}

#snazy-hero-heading {
  margin: auto;
}

.phpew-content--snazy-features-cta {
  width: 72rem;
    background: var(--phpew-focus-ring);
}

body.phpew-page.phpew-page--forum div.phpew-section.phpew-section--article-list {
  display: none;
}

#snazy-pricing-hero-heading {
  margin: auto;
}

.phpew-section-list-item {
  text-decoration: none;
}

#snazy-home-hero-image {
  z-index: 0;
    opacity: 0.5;
    object-fit: cover;
    object-position: top left;
}

#snazy-home-hero-subhead {
  z-index: 1;
    position: relative;
    font-family: "Inter", sans-serif;
}

.phpew-section--saas-hero {
  background-color: var(--snazy-bgc-10);
}

.features-bg-section {
  position: relative;
    z-index: 0;
}

.features-bg-section::before {
  content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://snazy-apex-300272448281-us-east-2-an.s3.us-east-2.amazonaws.com/uploads/snazy/images/snazy-theme/press-bg.webp?v=1782676463');
    opacity: 0.5;
}

.snazy-feature-group {
  background: var(--snazy-feature-bg);
}

.snazy-features-content {
  background: var(--snazy-feature-bg);
    position: relative;
    z-index: 0;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-pricing {
  background: var(--phpew-bg);
}

/* x */

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-logos {
  background: var(--phpew-bg);
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-testimonials {
  background: var(--phpew-card-bg);
  width: 72rem;
}

body.phpew-page.phpew-page--home div.phpew-section.phpew-section--saas-cta {
  position: relative;
  z-index: 0;
  background-color: var(--snazy-quote-outline);
}

body.phpew-page.phpew-page--home div.phpew-section.phpew-section--saas-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url('https://snazy-apex-300272448281-us-east-2-an.s3.us-east-2.amazonaws.com/uploads/snazy/images/snazy-theme/press-bg.webp?v=1782676463');
  background-position: bottom left;
  opacity: 0.5;
}

.snazy-features-content::before {
  content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url('https://snazy-apex-300272448281-us-east-2-an.s3.us-east-2.amazonaws.com/uploads/snazy/images/snazy-theme/press-bg.webp?v=1782676463');
    opacity: 1.0;
}

@media (max-width: 1023px) {

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-logos > div.phpew-section-datasource.phpew-section-datasource--cards {
    display: grid;
    grid-template-columns: repeat(8, auto);
    grid-template-rows: auto;
    grid-auto-flow: row;
}
}

@media (max-width: 767px) {

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-logos > div.phpew-section-datasource.phpew-section-datasource--cards {
    display: none;
}
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-logos > div.phpew-section-datasource.phpew-section-datasource--cards > section.phpew-section.phpew-section--logo_wall_item.phpew-section-body.content {
  grid-column: auto;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-testimonials > div.phpew-section-datasource.phpew-section-datasource--cards > section.phpew-section.phpew-section--testimonial.phpew-section-body.content > img.phpew-section-image {
  width: 4rem;
    height: auto;
}

body.phpew-page.phpew-page--home .phpew-section.phpew-section--saas-pricing > div.phpew-section-datasource.phpew-section-datasource--cards > section.phpew-section.phpew-section--pricing_tier.phpew-section-body.content > span.phpew-section-text {
  font-weight: 700;
    font-size: 1.5rem;
}

.phpew-content--snazy-hero {
  position: relative;
    z-index: 0;
    display: grid;
}

.phpew-content--snazy-hero::before {
  content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: .5;
}

#snazy-hero-image {
  opacity: .5;
    object-fit: cover;
    object-position: top;
}

#snazy-features-cta-heading {
  color: var(--phpew-card-bg);
}

body.phpew-page.phpew-page--pricing > div.phpew-layout.phpew-layout-snazy-simple-page > .phpew-section.phpew-section--saas-pricing {
  padding: 5rem;
}

body.phpew-page.phpew-page--pricing > footer.phpew-footer {
  background: var(--snazy-hero-bg);
}

body.phpew-page.phpew-page--features > footer.phpew-footer {
  background: var(--phpew-fg);
}

body.phpew-page.phpew-page--forum > div.phpew-layout.phpew-layout-forum > main.phpew-main.forum > div.phpew-section.phpew-section--forum-content {
  width: 72rem;
}

body.phpew-page.phpew-page--home > div.phpew-layout.phpew-layout-snazy-tall-marketing-6row > div.phpew-section.phpew-section--saas-pricing.phpew-section--snazy-pricing-table > div.pricing_tier.phpew-section-datasource.phpew-section-datasource--cards.phpew-section-datasource--source-pricing-tiers {
  display: grid;
}

.phpew-section-datasource--cards {
  gap: 1rem;
    max-width: 72rem;
    margin: auto;
}

body.phpew-page.phpew-page--forum > div.phpew-layout.phpew-layout-forum {
  margin: auto;
}

body.phpew-page.phpew-page--forum > div.phpew-layout.phpew-layout-forum > div.phpew-section.phpew-section--forum-recent-threads {
  position: relative;
    top: 1rem;
    align-self: start;
    flex: auto;
    display: grid;
    width: 100%;
    margin: 1rem 0;
}

/* FAQ cards */
.phpew-section--saas-faq {
    max-width: 60rem;
    margin: 0 auto;
    padding: .5rem;
}
.phpew-section--saas-faq .phpew-section-datasource--cards,
.phpew-section--saas-faq .phpew-section-datasource {
    display: flex;
    flex-direction: column;
    gap: .7rem;
    width: auto;
    margin: 0;
    padding: 0;
}
.phpew-section--saas-faq .phpew-section--faq_item {
    margin: 0;
    padding: 1.15rem 1.4rem;
    opacity: 1;
    background: var(--phpew-card-bg, #fff);
    border: 1px solid var(--phpew-border, #e4e4e7);
    border-left: 3px solid var(--phpew-accent, #4f46e5);
    border-radius: .8rem;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.phpew-section--saas-faq .phpew-section--faq_item:hover {
    opacity: 1;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .09);
    border-color: var(--phpew-accent, #4f46e5);
}
.phpew-section--saas-faq .phpew-section--faq_item .phpew-section-text {
    margin: 0 0 .35rem;
    padding: 0;
    background: none;
    border-radius: 0;
    font-weight: 700;
    font-size: 1.05rem;
    line-height: 1.35;
    color: var(--phpew-fg, #18181b);
}
.phpew-section--saas-faq .phpew-section--faq_item .phpew-section-longtext {
    color: var(--phpew-muted, #71717a);
    font-size: .93rem;
    line-height: 1.6;
    opacity: 1;
}

/* Feature cards */
.phpew-section--saas-features {
    max-width: 72rem;
    margin: 0 auto;
    padding: 1rem;
}
.phpew-section--saas-features .phpew-section-datasource--cards,
.phpew-section--saas-features .phpew-section-datasource {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
    gap: 1.1rem;
}
.phpew-section--saas-features .phpew-section--service {
    margin: 0;
    padding: 1.6rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    background: var(--phpew-card-bg, #fff);
    border: 1px solid var(--phpew-border, #e4e4e7);
    border-radius: 1rem;
    transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.phpew-section--saas-features .phpew-section--service:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .08);
    border-color: var(--phpew-accent, #4f46e5);
}
.phpew-section--saas-features .phpew-section--service :is(h2, h3, .phpew-section-heading) {
    margin: 0;
    font: 700 1.2rem/1.25 system-ui, sans-serif;
    color: var(--phpew-fg, #18181b);
}
.phpew-section--saas-features .phpew-section--service :is(p, .phpew-section-text) {
    margin: 0;
    color: var(--phpew-muted, #71717a);
    font-size: .93rem;
    line-height: 1.55;
}
.phpew-section--saas-features .phpew-section--service :is(ul, ol) {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.phpew-section--saas-features .phpew-section--service li {
    position: relative;
    padding-left: 1.5rem;
    font-size: .9rem;
    line-height: 1.4;
    color: var(--phpew-fg, #18181b);
}
.phpew-section--saas-features .phpew-section--service li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .12rem;
    width: 1rem;
    height: 1rem;
    background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%234f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10l4 4 8-9"/></svg>');
}

/* Features hero signup CTA: hug the label like the home hero's button */
#snazy-hero-primary_cta {
  width: fit-content;
  margin-inline: auto;
  padding-inline: 2rem;
  position: relative;
  z-index: 2;
}

/* ══ snazy wheel showcase — start ══ */
/* Features page: wheel hub left, one revealed card right */
.phpew-page--features .phpew-area-stack[data-area="body"] {
  display: grid;
  grid-template-columns: minmax(20rem, 26rem) minmax(0, 1fr);
  gap: 3rem;
  align-items: center;
  max-width: 72rem !important;
  margin: 0 auto;
  padding: 2rem 1.25rem 2.5rem;
  box-sizing: border-box;
}

/* Wheel column: heading + intro above the wheel, hint below */
.phpew-page--features .phpew-section--snazy-wheel-hub { display: flex; flex-direction: column; }
.phpew-page--features .phpew-section--snazy-wheel-hub .phpew-section-heading { order: 1; padding: 0 0 .5rem; font-size: clamp(1.45rem, 2.2vw, 1.9rem); line-height: 1.2; }
.phpew-page--features .phpew-section--snazy-wheel-hub .phpew-section-longtext { order: 2; background: none; padding: 0; }
.phpew-page--features .phpew-section--snazy-wheel-hub .snazy-wheel-face { order: 3; }
.phpew-page--features .snazy-wheel-hint { order: 4; text-align: center; opacity: .65; font-size: .85rem; }

/* The wheel: dashed outer ring + solid inner ring + halo, like the editor's */
.snazy-wheel-face {
  position: relative;
  width: min(24rem, 86vw);
  aspect-ratio: 1;
  margin: 1.25rem auto .5rem;
}
.snazy-wheel-face::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--phpew-accent) 55%, transparent);
  background: radial-gradient(circle, color-mix(in srgb, var(--phpew-accent) 14%, transparent) 0%, transparent 72%);
}
.snazy-wheel-face::after {
  content: "";
  position: absolute;
  inset: 27%;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--phpew-accent) 30%, transparent);
}

.snazy-glyph {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .28rem;
  width: 5.2rem;
  height: 5.2rem;
  padding: .35rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: var(--phpew-card-bg, #fff);
  border: 2px solid var(--phpew-accent);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
  text-decoration: none;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.15;
  text-align: center;
  color: inherit;
  z-index: 1;
  scroll-margin: 45vh;
  transition: transform .15s ease, box-shadow .15s ease;
}
.snazy-glyph:hover { transform: translate(-50%, -50%) scale(1.09); box-shadow: 0 4px 16px rgba(0, 0, 0, .22); z-index: 2; }
.snazy-glyph::before {
  content: "";
  width: 1.55rem;
  height: 1.55rem;
  background-color: var(--phpew-accent);
  -webkit-mask: var(--glyph-icon) center / contain no-repeat;
  mask: var(--glyph-icon) center / contain no-repeat;
}

/* Ring seats: 6 glyphs at 60° steps on the outer ring (r = 42%) */
.snazy-glyph--why    { left: 50%;   top: 8%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 21C5 14 2 10.5 2 7.5 2 5 4 3 6.5 3 8.5 3 11 4.5 12 6.5 13 4.5 15.5 3 17.5 3 20 3 22 5 22 7.5c0 3-3 6.5-10 13.5z'/%3E%3C/svg%3E"); }
.snazy-glyph--blocks { left: 89.9%; top: 37%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 3h8v8H3zM13 3h8v8h-8zM3 13h8v8H3zM13 13h8v8h-8z'/%3E%3C/svg%3E"); }
.snazy-glyph--themes { left: 74.7%; top: 84%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c4 5 7 8.5 7 12a7 7 0 1 1-14 0c0-3.5 3-7 7-12z'/%3E%3C/svg%3E"); }
.snazy-glyph--pro    { left: 25.3%; top: 84%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2l2.9 6.3 6.9.8-5.1 4.7 1.4 6.8L12 17l-6.1 3.6 1.4-6.8L2.2 9.1l6.9-.8z'/%3E%3C/svg%3E"); }
.snazy-glyph--editor { left: 10.1%; top: 37%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 21l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L7 20l-4 1z'/%3E%3C/svg%3E"); }
/* The Wheel itself holds the centre */
.snazy-glyph--wheel  { left: 50%;   top: 50%; width: 6.6rem; height: 6.6rem; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' %3E%3Cpath fill='none' stroke='black' stroke-width='2' d='M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zm0 5a4 4 0 1 0 0 8 4 4 0 0 0 0-8z'/%3E%3C/svg%3E"); }

/* Active glyph — toggled by each glyph's own wheel.pick subscribe */
.snazy-glyph.is-active {
  background: var(--phpew-accent);
  color: var(--phpew-accent-contrast, #fff);
}
.snazy-glyph.is-active::before {
  background-color: var(--phpew-accent-contrast, #fff);
}

/* Card panel: signals pick the card. Each card Receives on wheel.pick
   (show-if, matched on its slug — the block's "Apply to: each item" jack);
   the centre glyph's initial emit collapses the grid to the Wheel card on
   load. Without JS every card stays visible — graceful degradation. */
.phpew-page--features [data-section="saas-features"] .phpew-section-datasource--cards { display: block; }
.phpew-page--features [data-section="saas-features"] section[data-article] { animation: snazy-card-in .25s ease-out; }

@keyframes snazy-card-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

/* Small screens: stack, shrink the wheel */
@media (max-width: 760px) {
  .phpew-page--features .phpew-area-stack[data-area="body"] { grid-template-columns: 1fr; }
  .snazy-wheel-face { width: min(19rem, 88vw); }
  .snazy-glyph { width: 4.3rem; height: 4.3rem; font-size: .6rem; }
  .snazy-glyph--wheel { width: 5.4rem; height: 5.4rem; }
}
/* ══ snazy wheel showcase — end ══ */

/* ══ snazy mobile pass — start ══ */
/* Features layout (snazy-features-wheel): same constrained, centered areas
   as the other stacked layouts — without this the CTA band sizes to content
   and drags the page sideways. */
.phpew-layout-snazy-features-wheel {
  --snazy-gutter: 0;
  --snazy-section-gap: 2.5rem;
  --snazy-content-max: 100%;
}
.phpew-layout-snazy-features-wheel > [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);
}
.phpew-layout-snazy-features-wheel > [data-area]:first-child { padding-top: 0; }
@media (max-width: 600px) {
  .phpew-layout-snazy-features-wheel { --snazy-gutter: 0; --snazy-section-gap: 0; --snazy-content-max: 72rem; }
}

@media (max-width: 760px) {
  /* Header: brand + sign-in row, then the page nav on its own row.
     The desktop 3-column grid overflowed the viewport (60px of sideways
     scroll on every page) and stacked the page nav into a tall column. */
  .phpew-header {
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    row-gap: .25rem;
    align-items: center;
  }
  .phpew-header .phpew-brand { grid-column: 1; grid-row: 1; }
  .phpew-header .phpew-brand img { max-width: 8.5rem; max-height: 3rem; width: auto; height: auto; }
  .phpew-header .phpew-nav { grid-column: 2; grid-row: 1; justify-self: end; flex-wrap: nowrap; }
  .phpew-header .phpew-page-nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; column-gap: .25rem; }

  /* Safety net: nothing drags the page sideways */
  html, body { overflow-x: clip; }

  /* Home pricing cards: stack full-width instead of two crushed columns */
  body.phpew-page--home .phpew-section--saas-pricing .phpew-section-datasource--cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }
  body.phpew-page--home .phpew-section--saas-pricing .phpew-section-datasource--cards > * {
    width: 100%;
    box-sizing: border-box;
  }

  /* CTA bands: desktop padding is 4rem — too tall on a phone */
  .phpew-section--snazy-call-to-action { padding: 2.5rem 1rem; }
}
/* The Style-editor rule pins this CTA to 72rem; cap it to its container */
.phpew-content--snazy-features-cta { width: min(72rem, 100%); box-sizing: border-box; }

/* ══ snazy mobile pass — end ══ */

/* ══ snazy hero backdrop — start ══ */
/* Interior-page heroes wear the wizard's backdrop: deep-purple ground,
   the editor wheel's dashed-ring signature in the corners, and the same
   indigo → pink → cyan → amber hue cycle. Replaces the stock photos. */
.phpew-content--snazy-pricing-hero,
.phpew-content--snazy-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(90rem 90rem at -10% -30%, var(--snazy-bgc-06) 0%, transparent 60%),
    radial-gradient(100rem 100rem at 110% 130%, var(--snazy-bgc-07) 0%, transparent 62%),
    radial-gradient(70rem 70rem at 85% -20%, var(--snazy-bgc-08) 0%, transparent 60%),
    var(--snazy-bgc-09) !important;
  color: var(--snazy-bgc-05);
  padding: 4.25rem 1rem 4rem;
}
.phpew-content--snazy-pricing-hero,
.phpew-content--snazy-hero { isolation: isolate; }

.phpew-content--snazy-pricing-hero::before,
.phpew-content--snazy-hero::before,
.phpew-content--snazy-pricing-hero::after,
.phpew-content--snazy-hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  aspect-ratio: 1;
  pointer-events: none;
  background-color: var(--snazy-bgc-09);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='black' stroke-width='.5' stroke-dasharray='2 2'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='black' stroke-width='.5' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='black' stroke-width='.5' stroke-dasharray='2 2'/%3E%3Ccircle cx='50' cy='50' r='36' fill='none' stroke='black' stroke-width='.5' stroke-dasharray='2 2'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: snazy-hero-hue 14s linear infinite, snazy-hero-turn 80s linear infinite;
}
.phpew-content--snazy-pricing-hero::before,
.phpew-content--snazy-hero::before {
  width: 30rem; top: -13rem; left: -8rem; opacity: .26;
}
.phpew-content--snazy-pricing-hero::after,
.phpew-content--snazy-hero::after {
  width: 44rem; bottom: -22rem; right: -12rem; opacity: .18;
  animation-delay: -7s, -40s;
}
@keyframes snazy-hero-hue {
  0%   { background-color: var(--snazy-bgc-00); }
  25%  { background-color: var(--snazy-bgc-01); }
  50%  { background-color: var(--snazy-bgc-02); }
  75%  { background-color: var(--snazy-bgc-03); }
  100% { background-color: var(--snazy-bgc-04); }
}
@keyframes snazy-hero-turn { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .phpew-content--snazy-pricing-hero::before, .phpew-content--snazy-hero::before,
  .phpew-content--snazy-pricing-hero::after,  .phpew-content--snazy-hero::after {
    animation: none;
  }
}
/* ══ snazy hero backdrop — end ══ */

/* ══ snazy legal pages — start ══ */
/* Terms + Privacy: one readable column of numbered clauses (the datasource
   default was a 3-col card grid — wrong shape for a legal document). */
.phpew-page--terms .phpew-section-datasource--cards,
.phpew-page--privacy .phpew-section-datasource--cards {
  display: block;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1rem;
}
.phpew-section--term-of-service-schema,
.phpew-section--privacy-policy-schema {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  column-gap: .85rem;
  align-items: baseline;
  padding: 0 0 1.6rem;
  margin: 0 0 1.6rem;
  border-bottom: 1px solid var(--phpew-border, #e4e4e7);
}
.phpew-section--term-of-service-schema:last-child,
.phpew-section--privacy-policy-schema:last-child { border-bottom: none; }
/* Clause number leads the line: "1.0  License" */
.tos-subsection-number {
  grid-column: 1; grid-row: 1;
  margin: 0; padding: 0;
  font-size: 1rem;
  color: var(--phpew-accent, #4f46e5);
  font-variant-numeric: tabular-nums;
}
.tos-section-number {
  grid-column: 2; grid-row: 1;
  margin: 0; padding: 0;
  font-size: 1.3rem;
  line-height: 1.25;
}
.tos-term-detail {
  grid-column: 2; grid-row: 2;
  background: none;
  padding: .35rem 0 0;
  font-size: .95rem;
  line-height: 1.65;
  color: var(--phpew-fg, #18181b);
}
.tos-term-detail p { margin: 0 0 .8rem; }
.tos-term-detail p:last-child { margin-bottom: 0; }
.tos-term-detail ul, .tos-term-detail ol { margin: 0 0 .9rem 1.15rem; padding: 0; }
.tos-term-detail li { margin-bottom: .4rem; }
.tos-term-detail a { color: var(--phpew-accent, #4f46e5); }
@media (max-width: 600px) {
  .phpew-section--term-of-service-schema,
  .phpew-section--privacy-policy-schema { grid-template-columns: 2.6rem minmax(0, 1fr); }
}
/* ══ snazy legal pages — end ══ */

/* ══ snazy pricing comparison — start ══ */
/* The pricing-comparison BLOCK (content-driven; replaced the code section).
   Scoped to the block so home/pricing-table tier renders are untouched. */
[data-section="pricing-comparison"] { max-width: 72rem; margin: 0 auto; padding: 1rem; }

/* Section intros */
[data-section="pricing-comparison"] .phpew-section--section-intro { text-align: center; padding: 0; margin: 2.2rem 0 1.6rem; }
[data-section="pricing-comparison"] .phpew-section--section-intro .phpew-section-heading { font-size: 1.9rem; line-height: 1.15; margin: 0 0 .4rem; padding: 0; }
[data-section="pricing-comparison"] .phpew-section--section-intro .phpew-section-text { color: var(--phpew-muted, #71717a); max-width: 40rem; margin: 0 auto; padding: 0; font-size: 1.02rem; }
[data-section="pricing-comparison"] .phpew-content--comparison-footnote .phpew-section-text { color: var(--phpew-fg, #18181b); font-size: 1rem; }

/* Card grids */
[data-section="pricing-comparison"] .phpew-section-datasource--source-pricing-tiers {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  max-width: 44rem; margin: 0 auto;
}
[data-section="pricing-comparison"] .phpew-section-datasource--source-competitor-tiers {
  display: grid; gap: 1rem; align-items: stretch;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

/* Cards */
[data-section="pricing-comparison"] .phpew-section--pricing_tier,
[data-section="pricing-comparison"] .phpew-section--competitor_tier {
  position: relative; display: flex; flex-direction: column; gap: .55rem;
  padding: 1.5rem 1.35rem; margin: 0;
  border: 1px solid var(--phpew-border, #e4e4e7); border-radius: .9rem;
  background: var(--phpew-card-bg, #fff);
}
[data-section="pricing-comparison"] .phpew-section--competitor_tier { padding: 1.25rem 1.1rem; }
[data-section="pricing-comparison"] .snazy-tier-featured {
  border-color: var(--phpew-accent, #4f46e5);
  box-shadow: 0 0 0 1.5px var(--phpew-accent, #4f46e5), 0 12px 30px rgba(0, 0, 0, .08);
}

/* Fields, by their stable data-phpew-field hooks */
[data-section="pricing-comparison"] [data-phpew-field="badge"] {
  position: absolute; top: -.7rem; left: 1.2rem; margin: 0; padding: .3rem .55rem;
  font: 600 .68rem/1 system-ui, sans-serif; text-transform: uppercase; letter-spacing: .04em;
  border-radius: .4rem; background: var(--phpew-accent, #4f46e5); color: var(--phpew-accent-fg, #fff);
}
[data-section="pricing-comparison"] .phpew-section--competitor_tier [data-phpew-field="badge"] {
  background: var(--phpew-surface, #f4f4f5); color: var(--phpew-muted, #71717a);
  border: 1px solid var(--phpew-border, #e4e4e7);
}
[data-section="pricing-comparison"] [data-phpew-field="badge"]:empty { display: none; }
[data-section="pricing-comparison"] [data-phpew-field="name"] { font: 700 1.25rem/1.1 system-ui, sans-serif; margin: 0; padding: 0; color: var(--phpew-fg, #18181b); }
[data-section="pricing-comparison"] [data-phpew-field="price"] { font: 800 2.1rem/1 system-ui, sans-serif; margin: 0; padding: 0; color: var(--phpew-fg, #18181b); }
[data-section="pricing-comparison"] .phpew-section--competitor_tier [data-phpew-field="price"] { font-size: 1.7rem; }
[data-section="pricing-comparison"] [data-phpew-field="period"] { font: 500 .85rem/1 system-ui, sans-serif; color: var(--phpew-muted, #71717a); margin: -0.35rem 0 0; padding: 0; }
[data-section="pricing-comparison"] [data-phpew-field="note"],
[data-section="pricing-comparison"] [data-phpew-field="renew"] { color: var(--phpew-muted, #71717a); font-size: .85rem; margin: 0; padding: 0; min-height: 1.1rem; }
[data-section="pricing-comparison"] [data-phpew-field="renew"] { color: var(--phpew-fg, #18181b); }
[data-section="pricing-comparison"] [data-phpew-field="storage"] {
  color: var(--phpew-muted, #71717a); font-size: .85rem; margin: .2rem 0 0; padding: .2rem 0 0;
  border-top: 1px solid var(--phpew-border, #e4e4e7);
}
[data-section="pricing-comparison"] [data-phpew-field="cta"] {
  display: block; text-align: center; text-decoration: none; padding: .6rem 1rem; margin: .2rem 0 .4rem;
  border-radius: .6rem; font: 600 .92rem/1.3 system-ui, sans-serif;
  border: 1px solid var(--phpew-border-strong, #d4d4d8);
  color: var(--phpew-fg, #18181b); background: var(--phpew-surface, #f4f4f5);
}
[data-section="pricing-comparison"] .snazy-tier-featured [data-phpew-field="cta"] {
  background: var(--phpew-accent, #4f46e5); border-color: var(--phpew-accent, #4f46e5); color: var(--phpew-accent-fg, #fff);
}
[data-section="pricing-comparison"] [data-phpew-field="features"] {
  list-style: none; margin: .3rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem;
  background: none; border-radius: 0;
}
[data-section="pricing-comparison"] [data-phpew-field="features"] li {
  position: relative; padding-left: 1.5rem; color: var(--phpew-fg, #18181b); font-size: .9rem; line-height: 1.4;
}
[data-section="pricing-comparison"] [data-phpew-field="features"] li::before {
  content: ""; position: absolute; left: 0; top: .15rem; width: 1rem; height: 1rem;
  background: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="none" stroke="%234f46e5" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4 10l4 4 8-9"/></svg>');
}
[data-section="pricing-comparison"] .phpew-section--competitor_tier [data-phpew-field="features"] li { font-size: .82rem; color: var(--phpew-muted, #71717a); }
[data-section="pricing-comparison"] .phpew-section--competitor_tier [data-phpew-field="features"] li::before { opacity: .55; }

@media (max-width: 640px) {
  [data-section="pricing-comparison"] .phpew-section-datasource--source-competitor-tiers { grid-template-columns: 1fr 1fr; }
}
/* ══ snazy pricing comparison — end ══ */

.phpew-section--service {
    padding: var(--phpew-gap, 1rem);
    background: var(--phpew-card-bg, #fff);
    border: 1px solid var(--phpew-border, rgba(0, 0, 0, .08));
    border-radius: var(--phpew-radius-lg, .75rem);
    box-shadow: var(--phpew-shadow, 0 1px 3px rgba(0, 0, 0, .10), 0 6px 16px rgba(0, 0, 0, .06));
    max-width: 48rem;
    margin-inline: auto;
}

.phpew-section--service img {
    border-radius: var(--phpew-radius, .5rem);
    width: 100%;
    height: auto;
    display: block;
}

/* Docs: markdown-block images stay inside the column */
.phpew-section-markdown img { max-width: 100%; height: auto; border-radius: 8px; border: 1px solid rgba(127,127,127,0.25); }

/* Docs: the editor-wheel demo on the docs-the-wheel page */
.phpew-content--docs-wheel { text-align: center; }
.docs-wheel-face {
  position: relative;
  width: min(30rem, 88vw);
  aspect-ratio: 1;
  margin: 1.5rem auto 3rem;
}
.docs-wheel-face::before,
.docs-wheel-face::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 2px dashed color-mix(in srgb, var(--phpew-accent) 45%, transparent);
  pointer-events: none;
}
.docs-wheel-face::before { inset: 0; }
.docs-wheel-face::after { inset: 17%; border-color: color-mix(in srgb, var(--phpew-accent) 75%, transparent); }

.dw-seat {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.18rem;
  width: 3.9rem;
  height: 3.9rem;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #17181d;
  border: 2px solid #34363f;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: 600;
  line-height: 1.1;
  text-align: center;
  color: #e8e8ee;
  z-index: 1;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.dw-seat:hover { transform: translate(-50%, -50%) scale(1.1); z-index: 2; color: #fff; }
.dw-seat.is-active {
  border-color: var(--phpew-accent);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--phpew-accent) 30%, transparent), 0 2px 10px rgba(0, 0, 0, 0.28);
}
.dw-seat::before {
  content: "";
  width: 1.25rem;
  height: 1.25rem;
  background-color: #fff;
  -webkit-mask: var(--glyph-icon) center / contain no-repeat;
  mask: var(--glyph-icon) center / contain no-repeat;
}

/* Outer ring: cardinal add-arrows, bin NW, save NE */
.dw-seat--up    { left: 50%; top: 0%;   --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4l7 7-1.4 1.4L13 7.8V20h-2V7.8l-4.6 4.6L5 11z'/%3E%3C/svg%3E"); }
.dw-seat--right { left: 100%; top: 50%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M20 12l-7-7-1.4 1.4 4.6 4.6H4v2h12.2l-4.6 4.6L13 19z'/%3E%3C/svg%3E"); }
.dw-seat--down  { left: 50%; top: 100%; --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 20l-7-7 1.4-1.4 4.6 4.6V4h2v12.2l4.6-4.6L19 13z'/%3E%3C/svg%3E"); }
.dw-seat--left  { left: 0%; top: 50%;   --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M4 12l7-7 1.4 1.4L7.8 11H20v2H7.8l4.6 4.6L11 19z'/%3E%3C/svg%3E"); }
.dw-seat--trash { left: 15%; top: 15%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M3 6h18M8 6V4h8v2M19 6l-1 14H6L5 6M10 11v6M14 11v6'/%3E%3C/svg%3E"); }
.dw-seat--save  { left: 85%; top: 15%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Cpath d='M5 3h11l5 5v12a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z'/%3E%3Cpath d='M8 3v6h8V3M8 21v-8h8v8'/%3E%3C/svg%3E"); }

/* Inner ring: edit NE, style NW, +/- at the bottom, ? centre */
.dw-seat--edit  { left: 70%; top: 24%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M3 21l1-4L16.5 4.5a2.1 2.1 0 0 1 3 3L7 20l-4 1z'/%3E%3C/svg%3E"); }
.dw-seat--style { left: 30%; top: 24%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 2c4 5 7 8.5 7 12a7 7 0 1 1-14 0c0-3.5 3-7 7-12z'/%3E%3C/svg%3E"); }
.dw-seat--addc  { left: 67%; top: 79%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z'/%3E%3C/svg%3E"); }
.dw-seat--remc  { left: 33%; top: 79%;  --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M5 11h14v2H5z'/%3E%3C/svg%3E"); }
.dw-seat--help  { left: 50%; top: 50%; width: 4.4rem; height: 4.4rem; background: var(--phpew-accent); border-color: color-mix(in srgb, var(--phpew-accent) 70%, #fff); --glyph-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='black'%3E%3Cpath d='M12 4a5 5 0 0 1 5 5c0 2-1.5 3-2.7 3.9-.9.7-1.3 1.1-1.3 2.1h-2c0-1.9 1-2.8 2-3.6 1-.8 2-1.4 2-2.4a3 3 0 0 0-6 0H7a5 5 0 0 1 5-5zM11 17h2v2.5h-2z'/%3E%3C/svg%3E"); }

[class*="phpew-page--docs"] .snazy-wheel-hint { display: block; margin-top: 1rem; opacity: 0.75; }

/* The glyph explanation panels under the demo wheel */
.phpew-section-datasource--source-docs-glyph { min-height: 11rem; }
.phpew-section-datasource--source-docs-glyph {
  display: block !important;
  grid-template-columns: none !important;
  max-width: 44rem;
  width: 100%;
  margin: 0 auto;
}
.phpew-section-datasource--source-docs-glyph > * {
  display: block;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  background: var(--phpew-card-bg);
  border: 1px solid color-mix(in srgb, var(--phpew-accent) 35%, transparent);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  text-align: left;
}
.phpew-section-datasource--source-docs-glyph > *[hidden] { display: none !important; }

/* Docs pages: readable measure, calm hierarchy, friendly type */
[class*="phpew-page--docs"] main.phpew-main > .phpew-section { padding: 3rem 1.25rem 4.5rem; }
[class*="phpew-page--docs"] .phpew-section-markdown {
  max-width: 46rem;
  margin: 0 auto;
  font-size: 1.05rem;
  line-height: 1.75;
}
[class*="phpew-page--docs"] .phpew-section-markdown h2 {
  font-size: 2.1rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 1.1rem;
}
[class*="phpew-page--docs"] .phpew-section-markdown h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  border-radius: 2px;
  background: var(--phpew-accent);
  margin-top: 0.65rem;
}
[class*="phpew-page--docs"] .phpew-section-markdown h3 {
  font-size: 1.3rem;
  line-height: 1.3;
  margin: 2.4rem 0 0.65rem;
}
[class*="phpew-page--docs"] .phpew-section-markdown p { margin: 0 0 1.05rem; }
[class*="phpew-page--docs"] .phpew-section-markdown ul { margin: 0 0 1.2rem; padding-left: 1.35rem; }
[class*="phpew-page--docs"] .phpew-section-markdown li { margin: 0.45rem 0; }
[class*="phpew-page--docs"] .phpew-section-markdown li::marker { color: var(--phpew-accent); }
[class*="phpew-page--docs"] .phpew-section-markdown a {
  color: var(--phpew-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 2.5px;
}
[class*="phpew-page--docs"] .phpew-section-markdown a:hover { text-decoration-thickness: 2px; }
[class*="phpew-page--docs"] .phpew-section-markdown code {
  background: color-mix(in srgb, var(--phpew-accent) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--phpew-accent) 18%, transparent);
  border-radius: 6px;
  padding: 0.12em 0.4em;
  font-size: 0.9em;
}
[class*="phpew-page--docs"] .phpew-section-markdown img {
  margin: 1.4rem 0 1.8rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
}
[class*="phpew-page--docs"] .phpew-section-markdown table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.95rem;
  line-height: 1.5;
}
[class*="phpew-page--docs"] .phpew-section-markdown th,
[class*="phpew-page--docs"] .phpew-section-markdown td {
  text-align: left;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid color-mix(in srgb, var(--phpew-accent) 18%, transparent);
  vertical-align: top;
}
[class*="phpew-page--docs"] .phpew-section-markdown th {
  border-bottom-width: 2px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
/* Wheel demo page: breathe between the demo, the cards, and the prose */
.phpew-content--docs-wheel { padding-top: 1rem; }

/* "The Wheel" title: above the demo, set left, with a slowly turning
   dashed mini-wheel as its mark. Flex ordering lifts it over the face
   (ungrouped fields render after the column group). */
.phpew-content--docs-wheel { display: flex; flex-direction: column; }
#docs-wheel-heading {
  order: -2;
  align-self: flex-start;
  text-align: left;
  position: relative;
  margin: 0 0 0.5rem;
  padding-left: 2.4rem;
  font-size: clamp(2.4rem, 5vw, 3.4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
#docs-wheel-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 1.35rem;
  height: 1.35rem;
  border: 3px dashed var(--phpew-accent);
  border-radius: 50%;
  animation: dw-title-spin 16s linear infinite;
}
#docs-wheel-heading::after {
  content: "";
  display: block;
  height: 6px;
  width: 70%;
  margin-top: 0.5rem;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--phpew-accent), color-mix(in srgb, var(--phpew-accent) 12%, transparent));
}
@keyframes dw-title-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { #docs-wheel-heading::before { animation: none; } }
.phpew-section-datasource--source-docs-glyph { margin-bottom: 2rem; }

/* The documentation layout: header | key · main · glossary | footer */
.phpew-layout-documentation {
  display: grid;
  grid-template-areas: "header header header" "key main glossary" "footer footer footer";
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr) minmax(0, 17rem) !important;
  gap: 0 2rem;
  max-width: 90rem;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.phpew-layout-documentation .phpew-section--docs-header {
  padding: 1.1rem 0 0.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--phpew-accent) 20%, transparent);
}
.phpew-layout-documentation .phpew-section--docs-header .phpew-section-markdown { max-width: none; font-size: 0.95rem; }
.phpew-layout-documentation .phpew-section--docs-header p { margin: 0; }
.phpew-layout-documentation .phpew-section--docs-footer {
  padding: 1rem 0 2.5rem;
  border-top: 1px solid color-mix(in srgb, var(--phpew-accent) 20%, transparent);
  margin-top: 2rem;
}
.phpew-layout-documentation .phpew-section--docs-footer .phpew-section-markdown { max-width: none; font-size: 0.9rem; opacity: 0.85; }
.phpew-layout-documentation .phpew-section--docs-footer p { margin: 0; }

/* The theme's global .phpew-section { margin: auto } vertically centres grid
   children; the docs areas must pin to the top of their row instead. */
.phpew-layout-documentation > .phpew-section { margin: 0; }

/* Key (left): the site outline, sticky and quiet */
.phpew-layout-documentation .phpew-section--docs-outline {
  position: sticky;
  top: 1.25rem;
  align-self: start;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.5rem 0;
  font-size: 0.88rem;
  line-height: 1.5;
}
.phpew-layout-documentation .phpew-section--docs-outline .phpew-section-markdown { max-width: none; font-size: inherit; }
.phpew-layout-documentation .phpew-section--docs-outline ul { list-style: none; padding: 0 0 0 0.25rem; margin: 0 0 0.9rem; }
.phpew-layout-documentation .phpew-section--docs-outline li { margin: 0.15rem 0; }
.phpew-layout-documentation .phpew-section--docs-outline p { margin: 0.9rem 0 0.25rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.phpew-layout-documentation .phpew-section--docs-outline a { text-decoration: none; }
.phpew-layout-documentation .phpew-section--docs-outline a:hover { text-decoration: underline; }

/* Glossary (right): searchable term list, sticky */
.phpew-layout-documentation .phpew-section--docs-gloss-side {
  position: sticky;
  top: 1.25rem;
  align-self: start;
  max-height: calc(100vh - 2.5rem);
  overflow-y: auto;
  padding: 1.5rem 0;
  font-size: 0.88rem;
}
.phpew-section--docs-gloss-side .gloss-def,
.phpew-section--docs-gloss-side .gloss-feature { display: none; }
.phpew-section--docs-gloss-side .phpew-section-datasource {
  display: block !important;
  grid-template-columns: none !important;
}
.phpew-section--docs-gloss-side .phpew-section-datasource > * {
  display: block;
  padding: 0.1rem 0;
  background: none;
  border: none;
}
.phpew-section--docs-gloss-side .gloss-term { text-decoration: none; }
.phpew-section--docs-gloss-side .gloss-term:hover { text-decoration: underline; }

/* The search input (both glossary blocks) */
.phpew-section-search {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.75rem;
  margin: 0 0 0.75rem;
  font: inherit;
  border: 1px solid color-mix(in srgb, var(--phpew-accent) 30%, transparent);
  border-radius: 8px;
  background: var(--phpew-card-bg);
  color: inherit;
}
.phpew-section-search:focus {
  outline: 2px solid color-mix(in srgb, var(--phpew-accent) 55%, transparent);
  outline-offset: 1px;
}

/* The full glossary (main slot of the glossary page): definition cards */
.phpew-section--docs-gloss-full { max-width: 46rem; margin: 0 auto; padding: 2.5rem 0; }
.phpew-section--docs-gloss-full .phpew-section-datasource {
  display: block !important;
  grid-template-columns: none !important;
}
.phpew-section--docs-gloss-full .phpew-section-datasource > * {
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--phpew-card-bg);
  border: 1px solid color-mix(in srgb, var(--phpew-accent) 18%, transparent);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin: 0 0 0.8rem;
}
.phpew-section--docs-gloss-full .gloss-term {
  font-size: 1.1rem;
  font-weight: 700;
  text-decoration: none;
  color: inherit;
}
.phpew-section--docs-gloss-full .gloss-def { margin: 0.4rem 0 0.5rem; scroll-margin-top: 1.5rem; }
.phpew-section--docs-gloss-full .gloss-feature { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.phpew-section--docs-gloss-full .gloss-feature li {
  font-size: 0.75rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--phpew-accent) 12%, transparent);
  margin: 0;
}

/* Small screens: stack key above, glossary below the main column */
@media (max-width: 960px) {
  .phpew-layout-documentation {
    grid-template-areas: "header" "key" "main" "glossary" "footer";
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .phpew-layout-documentation .phpew-section--docs-outline,
  .phpew-layout-documentation .phpew-section--docs-gloss-side {
    position: static;
    max-height: none;
  }
}

.phpew-section--service > h3.phpew-section-heading {
    color: #fff;
}