/*
 * The admin is drawn with Auvyx UI (/assets/ui, MIT): its components and shadcn-style tokens.
 * This file holds what the library leaves to the app: a few token values and layout. The font is
 * in /assets/ui/fonts.css.
 * Own classes are prefixed `px-` so they never meet a library class.
 */

/*
 * The Payload CMS 4 preset: its type scale, weights, corner radii, control heights and colours
 * (Payload's design tokens, MIT), mapped onto Auvyx UI's tokens. Auvyx sizes everything from
 * `--spacing` and the `--text-*` steps, so setting those gives every component Payload's density.
 */
:root {
  --px-serif: ui-serif, 'New York', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;

  /* Type: Inter for text, Roboto Mono for code; body 12/16 at weight 450, bold 550. */
  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --text-xs: 0.6875rem; --text-xs--line-height: calc(1rem / 0.6875rem);
  --text-sm: 0.75rem; --text-sm--line-height: calc(1rem / 0.75rem);
  --text-base: 0.875rem; --text-base--line-height: calc(1.25rem / 0.875rem);
  --text-lg: 1rem; --text-lg--line-height: calc(1.375rem / 1rem);
  --text-xl: 1.25rem; --text-xl--line-height: calc(1.6875rem / 1.25rem);
  --text-2xl: 1.5rem; --text-2xl--line-height: calc(1.9375rem / 1.5rem);
  --font-weight-normal: 450; --font-weight-medium: 550; --font-weight-semibold: 600;

  /* Size: a field is 32px high (Payload's large field); gaps and paddings shrink with it. */
  --spacing: calc(2rem / 9);
  --sidebar-width: 13.75rem;
  --px-button-height: 2rem;

  /* Corners: 5px on controls, fields, cards and tiles; 13px on menus, dialogs and toasts. */
  --radius: 0.3125rem;
  --radius-sm: 0.1875rem; --radius-md: 0.3125rem; --radius-lg: 0.8125rem; --radius-xl: 0.3125rem;
  --radius-2xl: var(--radius-lg);
  --auvyx-r-control: var(--radius-md); --auvyx-r-field: var(--radius-md); --auvyx-r-card: var(--radius-md); --auvyx-r-surface: var(--radius-lg);

  /* Colours: white page, #f5f5f5 navigation, #e6e6e6 hairlines, Payload's brand blue. */
  --background: #ffffff; --foreground: rgb(0 0 0 / 0.9);
  --card: #ffffff; --card-foreground: rgb(0 0 0 / 0.9); --popover: #ffffff; --popover-foreground: rgb(0 0 0 / 0.9);
  --muted: #f5f5f5; --muted-foreground: rgb(0 0 0 / 0.5);
  --accent: #f5f5f5; --accent-foreground: rgb(0 0 0 / 0.9);
  --secondary: #f5f5f5; --secondary-foreground: rgb(0 0 0 / 0.9);
  /* One hairline for cards, tables, fields and the sidebar. */
  --border: #e0e0e0; --input: #e0e0e0;
  --primary: #0d99ff; --primary-foreground: #ffffff; --ring: #0d99ff;
  --destructive: #f24822;
  --sidebar: #f5f5f5; --sidebar-foreground: rgb(0 0 0 / 0.9); --sidebar-border: #e0e0e0;
  --sidebar-accent: #e6e6e6; --sidebar-accent-foreground: rgb(0 0 0 / 0.9);
  --sidebar-primary: #0d99ff; --sidebar-primary-foreground: #ffffff;
  --px-ok: #14ae5c; --px-warn: #ffcd29; --px-info: #0d99ff; --px-idle: #757575;
  --px-shadow: 0 0 0.5px 0 rgb(0 0 0 / 0.08), 0 10px 24px 0 rgb(0 0 0 / 0.18), 0 2px 5px 0 rgb(0 0 0 / 0.15);
}
.dark {
  --background: #2c2c2c; --foreground: #ffffff;
  --card: #2c2c2c; --card-foreground: #ffffff; --popover: #1e1e1e; --popover-foreground: #ffffff;
  --muted: #383838; --muted-foreground: rgb(255 255 255 / 0.7);
  --accent: #383838; --accent-foreground: #ffffff;
  --secondary: #383838; --secondary-foreground: #ffffff;
  --border: #444444; --input: #444444;
  --primary: #0d99ff; --primary-foreground: #ffffff; --ring: #0d99ff;
  --destructive: #e03e1a;
  --sidebar: #1e1e1e; --sidebar-foreground: #ffffff; --sidebar-border: #383838;
  --sidebar-accent: #383838; --sidebar-accent-foreground: #ffffff;
  --sidebar-primary: #0d99ff; --sidebar-primary-foreground: #ffffff;
  --px-ok: #14ae5c; --px-warn: #ffcd29; --px-info: #80caff; --px-idle: #757575;
  --px-shadow: 0 10px 24px 0 rgb(0 0 0 / 0.45), 0 3px 5px 0 rgb(0 0 0 / 0.35);
}

/* Body text is Payload's 12px at weight 450. Buttons use Payload's large size, 32px high. */
body { font-size: var(--text-sm); line-height: var(--text-sm--line-height); font-weight: var(--font-weight-normal); }
.btn:not([data-size]) { block-size: var(--px-button-height); min-block-size: var(--px-button-height); padding-inline: 0.625rem; font-size: 0.8125rem; font-weight: var(--font-weight-medium); }
.btn[data-size='sm'] { block-size: 1.75rem; min-block-size: 1.75rem; padding-inline: 0.5rem; font-size: 0.8125rem; font-weight: var(--font-weight-medium); }
.btn[data-size='lg'] { block-size: 2.25rem; min-block-size: 2.25rem; padding-inline: 1rem; font-size: 0.875rem; }
.btn[data-size='icon'] { inline-size: var(--px-button-height); block-size: var(--px-button-height); }
.btn[data-size='icon-sm'] { inline-size: 1.75rem; block-size: 1.75rem; }

body { min-block-size: 100svh; font-feature-settings: 'cv11', 'ss01'; -webkit-font-smoothing: antialiased; }
/* Keep the scrollbar's width reserved: a page that just fits must not shift sideways the moment
   a longer one brings the scrollbar in (and the rail must not end up under an overlay one). */
html { scrollbar-gutter: stable; }
#app { display: contents; }
.px-icon { flex: none; inline-size: 1rem; block-size: 1rem; }
.px-grow { flex: 1; }
.px-muted { color: var(--muted-foreground); }
.px-mono { font-family: var(--font-mono); font-size: 0.8125rem; }
.px-num { font-variant-numeric: tabular-nums; }

/* ---- shell ---- */
.px-mark { display: inline-flex; flex: none; align-items: center; justify-content: center; inline-size: 2rem; block-size: 2rem; border-radius: var(--radius); background: var(--sidebar-primary); color: var(--sidebar-primary-foreground); }
.px-mark svg { inline-size: 1.125rem; block-size: 1.125rem; }
.px-search { display: flex; align-items: center; gap: 0.5rem; inline-size: 100%; block-size: 2rem; margin-block-start: 0.5rem; padding-inline: 0.5rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--background); color: var(--muted-foreground); font: inherit; font-size: 0.875rem; cursor: pointer; }
.px-search:hover { color: var(--foreground); }
.px-search .kbd { margin-inline-start: auto; }
.sidebar[data-state='collapsed'] .px-search { display: none; }
.sidebar > nav > footer .dropdown-menu { display: flex; inline-size: 100%; }
.px-header { display: flex; align-items: center; gap: 0.5rem; block-size: 3.25rem; padding-inline: 1rem; border-block-end: 1px solid var(--border); }
/* A rule above the account menu, so it reads apart from the navigation. */
.sidebar > nav > footer { border-block-start: 1px solid var(--sidebar-border); }
.px-header > hr[aria-orientation='vertical'] { align-self: center; block-size: 1rem; margin-inline-end: 0.25rem; }
.px-header .breadcrumb { min-inline-size: 0; }
.px-view { padding: 0.5rem 1.5rem 3rem; min-inline-size: 0; }
.px-view > * { animation: px-in 0.18s ease-out both; }
@keyframes px-in { from { opacity: 0; transform: translateY(4px); } }
@media (prefers-reduced-motion: reduce) { .px-view > * { animation: none; } }
.px-boot { display: grid; place-items: center; min-block-size: 100svh; color: var(--muted-foreground); }

/* ---- page head ---- */
.px-head { display: flex; align-items: flex-start; gap: 0.75rem; flex-wrap: wrap; margin-block-end: 1.25rem; }
.px-head h1 { margin: 0; font-size: 1.5rem; line-height: 1.9375rem; font-weight: 600; letter-spacing: -0.085px; }
.px-head p { margin: 0.125rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; max-inline-size: 44rem; }
.px-head-actions { display: flex; gap: 0.5rem; align-items: center; margin-inline-start: auto; }
.px-section-title { display: flex; align-items: center; gap: 0.5rem; margin: 2rem 0 0.75rem; font-size: 0.875rem; font-weight: 600; }
.px-section-title small { color: var(--muted-foreground); font-weight: 400; }

/* ---- dashboard ---- */
.px-hero { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; padding: 2.5rem 0 2rem; text-align: center; }
.px-hero-mark { color: var(--foreground); margin-block-end: 0.5rem; }
.px-hero-mark svg { inline-size: 2.25rem; block-size: 2.25rem; }
.px-hero h1 { margin: 0; font-family: var(--px-serif); font-size: 2rem; line-height: 1.2; font-weight: 400; letter-spacing: -0.01em; }
.px-hero > p { margin: 0 0 1rem; color: var(--muted-foreground); font-size: 0.875rem; }
.px-hero auvyx-prompt-input { inline-size: min(42rem, 100%); text-align: start; }
.px-hero .suggestions { justify-content: center; margin-block-start: 0.75rem; }
.prompt-input > footer > small { padding-inline-start: 0.5rem; }
.px-connect { inline-size: min(42rem, 100%); text-align: start; }
.px-command { display: block; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.5; overflow-wrap: anywhere; }

.px-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; }
.px-stat { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; }
a.px-stat:hover { border-color: var(--ring); }
.px-stat span { display: flex; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.px-stat b { font-size: 1.625rem; line-height: 2rem; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.px-stat small { color: var(--muted-foreground); font-size: 0.75rem; }

.px-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.75rem; }
.px-tile { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); color: inherit; text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.px-tile:hover { border-color: var(--ring); box-shadow: 0 1px 2px rgb(0 0 0 / 0.05); }
.px-tile-icon { display: grid; place-items: center; flex: none; inline-size: 2.25rem; block-size: 2.25rem; border-radius: var(--radius); background: var(--muted); color: var(--muted-foreground); }
.px-tile-text { display: grid; min-inline-size: 0; line-height: 1.3; }
.px-tile-text strong { font-weight: 500; font-size: 0.875rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-tile-text small { color: var(--muted-foreground); font-size: 0.8125rem; }
.px-tile .btn { margin-inline-start: auto; }

/* ---- status ---- */
.px-status { display: inline-flex; align-items: center; gap: 0.375rem; white-space: nowrap; }
.px-status::before { content: ''; inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--px-idle); }
.px-status[data-tone='ok']::before { background: var(--px-ok); }
.px-status[data-tone='warn']::before { background: var(--px-warn); }
.px-status[data-tone='bad']::before { background: var(--destructive); }
.px-status[data-tone='info']::before { background: var(--px-info); }

/* ---- list ---- */
.px-role-panel { display: grid; gap: 1rem; margin-block-start: 1.25rem; }
.px-role-head { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: start; }
.px-role-head h2 { margin: 0; font-size: 1rem; font-weight: var(--font-weight-semibold); }
.px-role-head p { margin: 0.25rem 0 0; font-size: 0.875rem; max-inline-size: 40rem; }
.px-role-actions { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.px-feature-group { display: grid; gap: 0.25rem; }
.px-feature-group > h3 { margin: 0.5rem 0 0.25rem; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground); }
.px-feature { display: flex; gap: 0.75rem; align-items: start; padding: 0.625rem 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.px-feature:has(input:checked) { background: color-mix(in oklch, var(--primary) 6%, transparent); border-color: color-mix(in oklch, var(--primary) 35%, var(--border)); }
.px-feature > input { margin-block-start: 0.125rem; flex: none; }
.px-feature-text { display: grid; gap: 0.25rem; min-inline-size: 0; font-size: 0.875rem; }
.px-feature-text > span:first-child { font-weight: var(--font-weight-medium); }
.px-feature-text code { font-size: 0.75rem; color: var(--muted-foreground); }
.px-feature-text > .px-muted { font-size: 0.75rem; }
.px-feature-routes { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.px-route { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.6875rem; padding: 0.0625rem 0.375rem; border-radius: 0.25rem; background: var(--muted); }
.px-related { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-block-end: 0.75rem; font-size: 0.8125rem; }
.px-related a.badge { text-decoration: none; }
.px-toolbar { position: relative; z-index: 5; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-block-end: 0.75rem; }
.px-toolbar .input-group { inline-size: min(22rem, 100%); }
.px-frame { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.px-frame .table-container { border: 0; border-radius: 0; }
.px-frame table { inline-size: 100%; }
.px-frame th, .px-frame td { white-space: nowrap; max-inline-size: 22rem; overflow: hidden; text-overflow: ellipsis; }
.px-frame thead th { background: color-mix(in oklch, var(--muted) 50%, transparent); font-size: 0.8125rem; }
.px-frame tbody tr { cursor: pointer; }
.px-frame tbody tr:last-child td { border-block-end: 0; }
.px-check { inline-size: 2.5rem; cursor: default; }
.px-end { text-align: end; }
.px-sort { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: inherit; cursor: pointer; }
.px-sort svg { inline-size: 0.875rem; block-size: 0.875rem; opacity: 0.45; }
.px-sort:hover svg, .px-sort[data-dir] svg { opacity: 1; }
.px-title-link { color: inherit; font-weight: 500; text-decoration: none; }
.px-title-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-pager { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-block-start: 0.75rem; color: var(--muted-foreground); font-size: 0.8125rem; }
.px-pager .select { inline-size: auto; }
.px-bulk { position: fixed; inset-block-end: 1.5rem; inset-inline-start: 50%; translate: -50% 0; z-index: 30; display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.375rem 0.375rem 1rem; border-radius: 999px; background: var(--foreground); color: var(--background); font-size: 0.875rem; box-shadow: var(--px-shadow); animation: px-in 0.18s ease-out both; }
.px-bulk .btn { border-radius: 999px; color: inherit; }
.px-bulk .btn:hover { background: color-mix(in oklch, var(--background) 18%, transparent); color: inherit; }
.px-bulk .btn[data-danger] { background: var(--destructive); color: #fff; }

/* ---- edit ---- */
/* The page keeps its full width: the form in a card, the rail in a card of its own beside it. */
.px-edit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(17rem, 20rem); gap: 1.25rem; align-items: start; }
.px-form { display: grid; gap: 1.25rem; }
/* Short fields sit two to a row, so a wide page reads as a form and not as a wall of inputs;
   anything tall (text area, rich text, group, array, a file or a list of relations) keeps the row. */
.px-form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.25rem; }
.px-form > :not([data-span='half']) { grid-column: 1 / -1; }
@media (width < 64rem) { .px-form { grid-template-columns: minmax(0, 1fr); } }
.px-form .fieldset { margin: 0; }
.px-form .select { inline-size: 100%; }
.px-form > [hidden] { display: none; }

/* ---- a module's settings: one card per group, the rarely changed folded away ---- */
.px-settings { max-inline-size: 56rem; }
.px-settings-group { display: grid; gap: 1.25rem; }
.px-settings-group[hidden] { display: none; }
.px-settings-group > header { display: grid; gap: 0.25rem; }
.px-settings-group > header h2 { margin: 0; font-size: 1rem; font-weight: var(--font-weight-semibold); }
.px-settings-group > header p { margin: 0; font-size: 0.875rem; }
.px-advanced { border-block-start: 1px solid var(--border); padding-block-start: 1rem; }
.px-advanced > summary { display: inline-flex; align-items: center; gap: 0.375rem; cursor: pointer; list-style: none; color: var(--muted-foreground); font-size: 0.875rem; font-weight: var(--font-weight-medium); }
.px-advanced > summary::-webkit-details-marker { display: none; }
.px-advanced > summary svg { inline-size: 1rem; block-size: 1rem; transition: rotate 0.15s; }
.px-advanced[open] > summary svg { rotate: 90deg; }
.px-advanced[open] > .px-form { margin-block-start: 1.25rem; }
.px-secret { display: flex; gap: 0.375rem; align-items: center; }
.px-secret > .input { flex: 1; min-inline-size: 0; font-family: var(--font-mono, ui-monospace, monospace); }
.px-doc-sections { display: grid; gap: 1.5rem; }
.px-doc-section { display: grid; gap: 1rem; }
.px-doc-section + .px-doc-section { padding-block-start: 1.5rem; border-block-start: 1px solid var(--border); }
.px-doc-section > h2 { margin: 0; font-size: 0.9375rem; font-weight: var(--font-weight-semibold); }
.px-doc-section > p { margin: -0.75rem 0 0; font-size: 0.8125rem; }
.px-settings-tabs { display: flex; flex-wrap: wrap; gap: 0.25rem; border-block-end: 1px solid var(--border); max-inline-size: 56rem; }
.px-settings-tabs a { padding: 0.5rem 0.75rem; margin-block-end: -1px; border-block-end: 2px solid transparent; color: var(--muted-foreground); font-size: 0.875rem; font-weight: var(--font-weight-medium); text-decoration: none; }
.px-settings-tabs a:hover { color: var(--foreground); }
.px-settings-tabs a[aria-current='page'] { color: var(--foreground); border-color: var(--primary); }
.px-providers { display: grid; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.px-provider + .px-provider { border-block-start: 1px solid var(--border); }
.px-provider > summary { display: flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1rem; cursor: pointer; list-style: none; min-block-size: 3.25rem; }
.px-provider > summary::-webkit-details-marker { display: none; }
.px-provider > summary > svg { inline-size: 1rem; block-size: 1rem; flex: none; color: var(--muted-foreground); transition: rotate 0.15s; }
.px-provider[open] > summary > svg { rotate: 90deg; }
.px-provider[data-default='true'] > summary { background: color-mix(in oklch, var(--primary) 6%, transparent); }
.px-provider-name { flex: 1; min-inline-size: 0; font-weight: var(--font-weight-medium); }
.px-provider-ready { font-size: 0.8125rem; }
.px-provider-body { display: grid; gap: 1.25rem; padding: 0.25rem 1rem 1.25rem 2.625rem; margin: 0; }
@media (width < 40rem) { .px-provider-ready { display: none; } .px-provider-body { padding-inline-start: 1rem; } }
.px-setting-name { display: grid; gap: 0.125rem; }
.px-setting-name > span { font-size: 0.75rem; color: var(--muted-foreground); }
.px-setting-name code { font-size: inherit; }
.px-settings-table td:last-child { text-align: end; }
.px-setting-value { display: inline-block; max-inline-size: min(16rem, 30vw); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
.px-settings-save { position: sticky; inset-block-end: 0; padding-block: 0.75rem; background: linear-gradient(transparent, var(--background) 40%); }
.px-panel { padding: 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }
.px-row { display: grid; gap: 1rem; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: color-mix(in oklch, var(--muted) 40%, transparent); }
.px-row-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted-foreground); font-size: 0.8125rem; }
.px-rows { display: grid; gap: 0.5rem; }
.px-choices { display: grid; gap: 0.5rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: var(--radius); max-block-size: 14rem; overflow: auto; }
.px-choices label { display: flex; align-items: center; gap: 0.5rem; font-weight: 400; }
.px-req { color: var(--destructive); margin-inline-start: 0.125rem; }
textarea.px-code { font-family: var(--font-mono); font-size: 0.8125rem; min-block-size: 9rem; }
/* A properties row whose value can be copied: the button sits at the row's end. */
.properties dd:has(> .btn) { display: flex; align-items: center; gap: 0.25rem; }
.properties dd:has(> .btn) > :first-child { min-inline-size: 0; overflow-wrap: anywhere; }
.properties dd > .btn { margin-inline-start: auto; flex: none; }

/* ---- plugins ---- */
.px-plugins { display: grid; gap: 0.75rem; }
.px-plugin-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.px-plugin-head h2 { margin: 0; font-size: 1rem; font-weight: 600; }
.px-plugin p { margin: 0.375rem 0 0; color: var(--muted-foreground); font-size: 0.875rem; }
.px-effects { display: grid; grid-template-columns: max-content 1fr; gap: 0.5rem 1rem; margin-block-start: 1rem; font-size: 0.8125rem; }
.px-effects dt { color: var(--muted-foreground); padding-block-start: 0.125rem; }
.px-effects dd { display: flex; flex-wrap: wrap; gap: 0.25rem; margin: 0; }
.px-plugin-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
.px-plugin-actions .btn:last-child { margin-inline-start: auto; }
.px-tree { display: grid; font-size: 0.8125rem; }
.px-tree > div { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 1rem; border-block-end: 1px solid var(--border); }
.px-tree > div:last-child { border-block-end: 0; }
.px-tree .px-muted { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-source { max-block-size: 60svh; overflow: auto; margin: 0; padding: 1rem; border-radius: var(--radius); background: var(--muted); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.6; white-space: pre; }
/* The Plugins table: actions as links under the name. */
.px-plugin-avatar { display: inline-grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 999px; background: oklch(0.7 0.16 var(--hue)); color: #fff; font-size: 1.25rem; font-weight: 600; flex: none; }
.px-plugin-table td { vertical-align: top; white-space: normal; padding-block: 0.875rem; block-size: auto; overflow: visible; }
.px-plugin-table td:first-child { inline-size: 2.5rem; }
.px-plugin-table td:nth-child(2) { inline-size: 4.5rem; }
.px-plugin-table td:nth-child(3) { inline-size: 24rem; }
.px-plugin-table td:last-child { inline-size: 8rem; }
.px-plugin-table tr[data-off] .px-plugin-avatar { filter: grayscale(1); opacity: 0.6; }
.px-plugin-name { font-weight: 600; margin-block-end: 0.5rem; }
.px-plugin-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; }
.px-link { all: unset; cursor: pointer; color: var(--primary); }
.px-link:hover { text-decoration: underline; }
.px-link:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 2px; }
.px-link[data-danger] { color: var(--destructive); }
.px-plugin-desc { font-size: 0.8125rem; }
.px-plugin-desc > * + * { margin-block-start: 0.5rem; }
.px-plugin-desc p { margin: 0; }
.px-plugin-desc .px-surfaces { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.px-plugin-deps { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem; }

/* Add new: the catalog as cards. */
.px-catalog-search { margin-block-end: 1rem; }
.px-catalog { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(30rem, 100%), 1fr)); gap: 1rem; }
.px-catalog-card { display: flex; flex-direction: column; padding: 0; }
.px-catalog-body { display: flex; gap: 1rem; padding: 1rem; flex: 1; }
.px-catalog-side { display: flex; flex-direction: column; align-items: center; gap: 1rem; flex: none; }
.px-catalog-side .px-plugin-avatar { inline-size: 4.5rem; block-size: 4.5rem; border-radius: var(--radius); font-size: 1.75rem; }
.px-catalog-side .btn { inline-size: 100%; }
.px-catalog-text { display: grid; gap: 0.375rem; align-content: start; font-size: 0.8125rem; min-inline-size: 0; }
.px-catalog-text h2 { margin: 0 0 0.25rem; font-size: 1.125rem; font-weight: 600; }
.px-catalog-text p { margin: 0; }
.px-catalog-foot { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 0.75rem 1rem; border-block-start: 1px solid var(--border); font-size: 0.75rem; }

dialog.px-wide > div { inline-size: min(56rem, calc(100vw - 2rem)); max-inline-size: none; }

/* ---- agent ---- */
.px-chat { display: flex; flex-direction: column; gap: 1.25rem; inline-size: min(46rem, 100%); margin-inline: auto; }
.px-chat .bubble { white-space: pre-wrap; word-break: break-word; }
.px-chat .trace pre { margin: 0.5rem 0 0; padding: 0.625rem; border-radius: var(--radius); background: var(--muted); font-size: 0.75rem; white-space: pre-wrap; word-break: break-word; max-block-size: 16rem; overflow: auto; }
.px-chat auvyx-prompt-input { position: sticky; inset-block-end: 1rem; }
.px-notice { padding: 0.75rem 1rem; border-radius: var(--radius); background: color-mix(in oklch, var(--destructive) 10%, transparent); color: var(--destructive); font-size: 0.875rem; white-space: pre-wrap; }
.px-spin { animation: px-spin 0.9s linear infinite; }
@keyframes px-spin { to { rotate: 360deg; } }
.px-tools summary { cursor: pointer; list-style: none; }
.px-tools summary::-webkit-details-marker { display: none; }
.px-tools summary svg { transition: rotate 0.15s; }
.px-tools[open] summary svg { rotate: 90deg; }

.px-page { display: block; inline-size: 100%; block-size: calc(100svh - 11rem); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; }

/* ---- plugin admin pages: the fragment's own headings read like the admin's ---- */
.px-plugin-page h1 { margin: 0; font-size: 1.5rem; line-height: 1.9375rem; font-weight: 600; letter-spacing: -0.085px; }
.px-plugin-page header > p { margin: 0; color: var(--muted-foreground); font-size: 0.875rem; }
.px-plugin-page td a { color: inherit; font-weight: 500; text-decoration: none; }
.px-plugin-page td a:hover { text-decoration: underline; text-underline-offset: 3px; }
.px-plugin-page .table-container { border: 1px solid var(--border); border-radius: var(--radius); background: var(--card); }

/* ---- login ---- */
.px-login { display: grid; place-items: center; min-block-size: 100svh; padding: 1rem; background: var(--sidebar); }
.px-login .card { inline-size: min(24rem, 100%); }
.px-login-brand { display: flex; align-items: center; gap: 0.625rem; margin-block-end: 1.25rem; font-weight: 600; }
.px-login form { display: grid; gap: 1rem; }

@media (width < 60rem) {
  .px-edit { grid-template-columns: 1fr; }
  .px-side { position: static; }
  .px-view { padding-inline: 1rem; }
  .px-hide-sm { display: none; }
}

/* The page fills the window beside the sidebar, set off by one hairline. */
.sidebar[data-variant='inset'] + * { box-shadow: none; border: 0; border-inline-start: 1px solid var(--sidebar-border); border-radius: 0; margin-block: 0; margin-inline-end: 0; min-block-size: 100svh; }
.sidebar[data-variant='inset'][aria-hidden='true'] + * { margin-inline-start: 0; border-inline-start: 0; }

/* The library tints the page for an inset sidebar only when the sidebar is a child of <body>; ours sits in #app. */
@media (width >= 48rem) {
  body:has(.sidebar[data-variant='inset']) { background: var(--sidebar); }
}

/* Accounts */
.px-login .btn[data-variant="link"] { justify-self: center; }
.px-dialog-form { display: grid; gap: 1rem; }
.px-readonly { min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.px-password-field { margin-block-start: 1.25rem; padding-block-start: 1.25rem; border-block-start: 1px solid var(--border); }
.px-side-action { margin-block-start: 0.875rem; inline-size: 100%; }
.px-edit-alert { margin-block-end: 1rem; }

/* ---- media ---- */
/* A file's tile is a surface like a field, not a menu: one radius for cards and controls, the
   larger one only for menus, dialogs and toasts. */
.tile { border-radius: var(--radius-md); }
.px-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: 0.75rem; }
.px-media-tile > figcaption { gap: 0.5rem; padding: 0.125rem 0.25rem; font-size: 0.8125rem; }
.px-media-tile > figcaption > a, .px-media-tile > figcaption > .px-tile-pick { font-weight: 500; }
.px-media-tile > figcaption > small { margin-inline-start: auto; flex: none; color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.px-media-tile:hover { border-color: var(--ring); }
.px-media-tile[data-state='selected'] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }
.px-media-tile:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
.px-media-thumb { display: grid; place-items: center; border-radius: calc(var(--radius) - 2px); background: var(--muted); color: var(--muted-foreground); }
.px-media-thumb > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
/* A drawing (logo, icon) is shown whole; a photo fills the square. */
.px-media-thumb > img[src$='.svg'], .px-file-thumb > img[src$='.svg'] { object-fit: contain; padding: 0.5rem; }
.px-media-thumb > .px-icon { inline-size: 2rem; block-size: 2rem; }
.px-tile-pick { min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: start; cursor: pointer; outline: none; }
.px-tile-pick::after { content: ''; position: absolute; inset: 0; }
/* In a dialog, the library already positions the surface. */
.px-view .px-drop { position: relative; }
.px-drop[data-dragging]::after { content: attr(data-label); position: absolute; inset: -0.5rem; z-index: 40; display: grid; place-items: center; border: 2px dashed var(--ring); border-radius: var(--radius); background: color-mix(in oklch, var(--background) 85%, transparent); color: var(--foreground); font-weight: 500; pointer-events: none; }
.px-uploads { margin-block-end: 0.75rem; }
.px-uploads:empty { display: none; }
.px-uploads .attachment { max-inline-size: min(24rem, 100%); }
.px-media-detail { display: grid; gap: 1.25rem; }
.px-media-preview { display: grid; place-items: center; min-block-size: 14rem; padding: 1rem; border-radius: var(--radius); background: var(--muted); overflow: hidden; }
.px-media-preview > img, .px-media-preview > video { max-inline-size: 100%; max-block-size: 60svh; border-radius: calc(var(--radius) - 2px); }
.px-media-preview > audio { inline-size: 100%; }
.px-media-file { display: grid; justify-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.875rem; }
.px-media-file > .px-icon { inline-size: 2.5rem; block-size: 2.5rem; }
.px-upload { display: grid; gap: 0.5rem; }
.px-upload .attachment-group { padding-block: 0; }
.px-upload .attachment { max-inline-size: min(24rem, 100%); }
.px-upload-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.px-picker { display: grid; gap: 0.5rem; max-block-size: min(60svh, 36rem); overflow: auto; margin-inline: -0.25rem; padding: 0.25rem; }
.px-picker .px-toolbar { margin-block-end: 0; }
.px-picker .px-media-grid { grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); }
.px-picker .empty { grid-column: 1 / -1; }
.px-cell-files { display: inline-flex; gap: 0.25rem; vertical-align: middle; }
.px-file-chip { display: inline-flex; align-items: center; gap: 0.5rem; max-inline-size: 14rem; }
.px-file-chip > span:last-child:not(.px-file-thumb) { overflow: hidden; text-overflow: ellipsis; }
.px-file-thumb { display: grid; place-items: center; flex: none; inline-size: 2rem; block-size: 2rem; border-radius: calc(var(--radius) - 2px); background: var(--muted); color: var(--muted-foreground); overflow: hidden; }
.px-file-thumb > img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.px-frame td:has(.px-file-chip) { padding-block: 0.375rem; }
@media (width < 30rem) {
  .px-media-grid, .px-picker .px-media-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
}

/* Sidebar: tighter groups, and top-level items a step larger than the items inside a menu. */
.sidebar > nav > section { gap: 0; }
.sidebar > nav > section > [role='group'] { padding-block: 0.25rem; }
.sidebar > nav > section > [role='group'] > h3 { block-size: 1.5rem; margin-block-start: 0.375rem; }
.sidebar > nav > section > [role='group']:first-child > h3 { margin-block-start: 0; }
.sidebar > nav > section > [role='group'] > ul > li > :is(a, button), .sidebar > nav > section > [role='group'] > ul > li > details > summary { font-size: 0.8125rem; font-weight: var(--font-weight-medium); }
.sidebar > nav > section ul ul > li > :is(a, button) { font-size: var(--text-sm); font-weight: var(--font-weight-normal); block-size: 1.875rem; }
/* One line an item: a long name ends in an ellipsis (its tooltip has it whole), the count always shows. */
.sidebar > nav > section li > :is(a, button), .sidebar > nav > section li > details > summary { min-inline-size: 0; gap: 0.5rem; }
.sidebar > nav > section li > :is(a, button) > span:not([data-badge]), .sidebar > nav > section li > details > summary > span:not([data-badge]) { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar > nav > section li > :is(a, button) > [data-badge] { flex: none; margin-inline-start: auto; padding-inline-start: 0.25rem; font-variant-numeric: tabular-nums; }
.sidebar > nav > section ul ul { gap: 1px; }
.sidebar > nav > section .px-nav-sub { padding-block: 0.625rem 0.25rem; }

/* Tables: 13px text in 44px rows, so a list reads at a glance (Payload's tables are this roomy). */
.table { font-size: 0.8125rem; }
.table th { block-size: 2.5rem; padding-inline: 0.75rem; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--muted-foreground); }
.table td { block-size: 2.75rem; padding: 0.625rem 0.75rem; }

/* A date field: the day picker, and beside it the time. */
.px-datetime { display: flex; gap: 0.5rem; }
.px-datetime > .date-picker { flex: 1 1 auto; min-inline-size: 0; }
.px-datetime > .select { flex: 0 0 7rem; }
.field > .select > button, .px-datetime .select > button { inline-size: 100%; }
.px-listbox { max-block-size: 16rem; overflow-y: auto; }
.px-datetime > .date-picker > button { inline-size: 100%; justify-content: flex-start; }

/* Fields draw the same hairline as cards, with no shadow of their own. The rule sits in the
   library's layer on purpose: unlayered, it would also win over the library's hover and focus
   states, and a field would stop reacting to the pointer. */
@layer components {
  .input, .textarea, .select > button, .date-picker > button, .input-group { box-shadow: none; border-color: var(--input); }
}
/* A filled button covers its whole box, as an outlined one does: the library clips the fill to
   the padding box, which leaves it 2px shorter than a button beside it. */
.btn { background-clip: border-box; }
/* The palette's search box is a field and its rows are list items: the same 5px corner as every
   control, not the dialog's larger one. */
.command > header, .command [role='menuitem'] { border-radius: var(--radius-md); }
/* The calendar keeps its own width however wide the field is. */
.date-picker [data-popover] { inline-size: max-content; min-inline-size: 0; inset-inline-end: auto; }

/* Rich text: a toolbar over the editing surface, one frame like a field. */
.px-rt { border: 1px solid var(--input); border-radius: var(--radius-md); background: var(--background); }
.px-rt:focus-within { border-color: var(--ring); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ring) 25%, transparent); }
.px-rt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.125rem; padding: 0.25rem; border-block-end: 1px solid var(--border); }
.px-rt-toolbar .btn[aria-pressed='true'] { background: var(--accent); color: var(--primary); }
.px-rt-sep { inline-size: 1px; block-size: 1rem; margin-inline: 0.25rem; background: var(--border); }
.px-rt-surface { min-block-size: 12rem; padding: 0.75rem 0.875rem; font-size: 0.875rem; line-height: 1.375rem; outline: none; }
.px-rt-surface > * + * { margin-block-start: 0.625rem; }
.px-rt-p { margin: 0; }
.px-rt-h2 { margin: 0; font-size: 1.25rem; line-height: 1.6875rem; font-weight: 600; }
.px-rt-h3 { margin: 0; font-size: 1rem; line-height: 1.375rem; font-weight: 600; }
.px-rt-quote { margin: 0; padding-inline-start: 0.75rem; border-inline-start: 3px solid var(--border); color: var(--muted-foreground); }
.px-rt-ul { margin: 0; padding-inline-start: 1.25rem; list-style: disc; }
.px-rt-ol { margin: 0; padding-inline-start: 1.25rem; list-style: decimal; }
.px-rt-nested { list-style: none; }
.px-rt-link { color: var(--primary); text-decoration: underline; }
.px-rt-bold { font-weight: 600; }
.px-rt-italic { font-style: italic; }
.px-rt-underline { text-decoration: underline; }
.px-rt-strike { text-decoration: line-through; }
.px-rt-code { font-family: var(--font-mono); font-size: 0.8125rem; padding: 0.0625rem 0.25rem; border-radius: var(--radius-sm); background: var(--muted); }

/* The media dialog: the picture and its tools on the left, what the host knows on the right. */
.px-media-dialog > div { inline-size: min(68rem, calc(100vw - 2rem)); max-inline-size: none; }
.px-media-body { overflow: auto; }
.px-media-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 1.25rem; align-items: start; }
.px-media-left { display: grid; gap: 0.75rem; min-inline-size: 0; }
.px-media-stage { position: relative; display: grid; place-items: center; min-block-size: 18rem; max-block-size: 60svh; padding: 0.75rem; border-radius: var(--radius-md); background: var(--muted); overflow: hidden; user-select: none; touch-action: none; }
.px-media-stage[data-cropping='true'] { cursor: crosshair; }
.px-media-stage > img, .px-media-stage > video, .px-media-canvas { max-inline-size: 100%; max-block-size: calc(60svh - 1.5rem); object-fit: contain; }
.px-media-canvas { display: block; inline-size: auto; block-size: auto; background: repeating-conic-gradient(var(--border) 0 25%, transparent 0 50%) 0 0 / 16px 16px; }
.px-crop { position: absolute; border: 1.5px solid #fff; box-shadow: 0 0 0 9999px rgb(0 0 0 / 0.45); cursor: move; pointer-events: none; }
.px-crop-size { position: absolute; inset-block-end: 0.25rem; inset-inline-end: 0.25rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm); background: rgb(0 0 0 / 0.6); color: #fff; font-size: var(--text-xs); font-variant-numeric: tabular-nums; }
.px-media-tools { display: grid; gap: 0.5rem; }
.px-media-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--text-sm); }
.px-media-tool[hidden] { display: none; }
.px-media-tool > .input { inline-size: 5.5rem; }
.px-media-tool > .select { inline-size: 7rem; }
.px-media-tool .btn[aria-pressed='true'] { background: var(--accent); border-color: var(--primary); color: var(--primary); }
.px-lock { display: inline-flex; align-items: center; gap: 0.375rem; }
.px-media-side { display: grid; gap: 1rem; min-inline-size: 0; }
.px-media-side dd { overflow-wrap: anywhere; }
@media (width < 48rem) { .px-media-body { grid-template-columns: 1fr; } }

/* The right rail: details beside a document or a file, set off by a hairline, and closable. */
/* The rail is a card of its own, a gap away from the form's: a filled strip to the window's edge
   read as a second sidebar, and a divider beside the form's own border read as a doubled line. */
.px-side {
  position: sticky;
  inset-block-start: 1rem;
  display: grid;
  gap: 0.75rem;
  align-self: start;
  align-content: start;
  padding: 1.25rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--muted);
}
.px-side > .px-panel { padding: 0; border: 0; background: none; }
.px-side > .px-panel + .px-panel { margin-block-start: 1rem; padding-block-start: 1rem; border-block-start: 1px solid var(--border); }
/* A ghost button on the filled rail: the library's muted hover is the rail's own colour, so its
   press would be invisible. One step darker shows the control under the cursor. */
.px-side .btn[data-variant='ghost']:hover,
.px-side .btn[data-variant='ghost'][aria-expanded='true'] { background: var(--sidebar-accent); }
.px-media-side { align-self: stretch; padding-inline-start: 1.25rem; border-inline-start: 1px solid var(--border); }
.px-media-body { gap: 0; }
.px-media-left { padding-inline-end: 1.25rem; }
/* The rail's toggle is its own control, not part of Delete: a gap and a hairline keep them apart. */
@media (width < 64rem) {
  .px-edit { grid-template-columns: 1fr; }
  /* Below the form the rail is a full-width card, so it keeps the same frame as its neighbour. */
  .px-side { position: static; }
}

/* Lists and pages use the whole width; a document's page splits it between its content and the rail. */

/* The permissions table of a role. */
.px-grants th[scope='row'] { text-align: start; font-weight: var(--font-weight-medium); color: var(--foreground); }
.px-grants th[scope='row'] > small { display: block; font-weight: var(--font-weight-normal); color: var(--muted-foreground); }
.px-grants thead th:not(:first-child), .px-grants td { inline-size: 5.5rem; text-align: center; }
.px-grants tr[data-all='true'] > * { background: var(--muted); }
.px-grants td { block-size: 2.5rem; padding-block: 0.375rem; }

.px-rt-note { margin: 0; padding: 0.5rem 0.875rem; border-block-start: 1px solid var(--border); color: var(--destructive); font-size: var(--text-sm); }

/* History in the rail, and the Changes pages. */
.px-rail-title { display: flex; align-items: center; gap: 0.375rem; margin: 0 0 0.5rem; font-size: var(--text-sm); font-weight: var(--font-weight-semibold); }
.px-rail-title > svg { inline-size: 0.875rem; block-size: 0.875rem; color: var(--muted-foreground); }
.px-history { display: grid; gap: 0.125rem; margin: 0; padding: 0; list-style: none; max-block-size: 28rem; overflow-y: auto; }
.px-history > li { display: grid; gap: 0.125rem; }
.px-history button { display: flex; align-items: flex-start; gap: 0.5rem; inline-size: 100%; padding: 0.375rem; border: 0; border-radius: var(--radius-md); background: none; color: inherit; text-align: start; cursor: pointer; }
.px-history button:hover { background: var(--accent); }
.px-history button > span:last-child { display: grid; min-inline-size: 0; }
.px-history strong { font-size: var(--text-sm); font-weight: var(--font-weight-medium); }
.px-history strong > small, .px-history small { color: var(--muted-foreground); font-weight: var(--font-weight-normal); font-size: var(--text-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-history-icon { display: grid; place-items: center; flex: none; inline-size: 1.5rem; block-size: 1.5rem; border-radius: 50%; background: var(--muted); color: var(--muted-foreground); }
.px-history-icon > svg { inline-size: 0.8125rem; block-size: 0.8125rem; }
.px-history-icon[data-kind='agent'] { background: color-mix(in oklch, var(--primary) 15%, transparent); color: var(--primary); }
.px-history-set { margin-inline-start: 2.375rem; font-size: var(--text-xs); color: var(--primary); }
.px-revision-dialog > div { inline-size: min(52rem, calc(100vw - 2rem)); max-inline-size: none; }
.px-diff td { vertical-align: top; overflow-wrap: anywhere; block-size: auto; }
.px-diff th[scope='row'] { inline-size: 9rem; font-weight: var(--font-weight-medium); color: var(--foreground); }
.px-diff-before { background: color-mix(in oklch, var(--destructive) 7%, transparent); }
.px-diff-after { background: color-mix(in oklch, var(--px-ok) 9%, transparent); }

/* A date field wraps its time under the day when its column is narrow. */
.px-datetime { flex-wrap: wrap; }
.px-datetime > .date-picker { flex: 1 1 9rem; }
.px-datetime > .select { flex: 1 0 6rem; }

/* The rail, WordPress style: how the document is filed and published, its details, its history.
   Its fields stack one per line. */
.px-edit { grid-template-columns: minmax(0, 1fr) 21rem; }
.px-side-fields .px-form { grid-template-columns: minmax(0, 1fr); gap: 0.875rem; }
.px-side-fields .px-form > * { grid-column: 1 / -1; }
.px-side-fields .px-datetime > * { flex-basis: 100%; }
/* The main column reads top to bottom, one field a line, as in WordPress's editor. */
.px-edit > .px-panel > .px-form, .px-edit > .px-panel > .px-readonly > .px-form { grid-template-columns: minmax(0, 1fr); }
.px-edit > .px-panel .px-form > * { grid-column: 1 / -1; }

/* The dashboard: system health, then activity beside the agent, then the collections. */
.px-live { display: inline-flex; align-items: center; gap: 0.375rem; font-size: var(--text-sm); color: var(--muted-foreground); }
.px-live > i { inline-size: 0.5rem; block-size: 0.5rem; border-radius: 50%; background: var(--px-ok); box-shadow: 0 0 0 3px color-mix(in oklch, var(--px-ok) 25%, transparent); }
.px-dash-alerts { display: grid; gap: 0.75rem; }
.px-dash-alerts:not(:empty) { margin-block-end: 1rem; }
.px-dash-health { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1rem; margin-block-end: 1.5rem; }
.px-health { display: grid; gap: 0.75rem; align-content: start; padding: 1rem; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--card); }
.px-health[data-state='down'] { border-color: color-mix(in oklch, var(--destructive) 50%, var(--border)); }
.px-health > header { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.px-health-title { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: var(--font-weight-semibold); font-size: 0.8125rem; }
.px-health-title > svg { inline-size: 1rem; block-size: 1rem; color: var(--muted-foreground); }
.px-health-numbers { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.px-health-numbers > div { display: grid; }
.px-health-numbers b { font-size: 1.25rem; line-height: 1.6875rem; font-weight: var(--font-weight-semibold); font-variant-numeric: tabular-nums; }
.px-health-numbers small { color: var(--muted-foreground); font-size: var(--text-xs); }
.px-health-numbers > div[data-tone='bad'] b { color: var(--destructive); }
.px-health > footer { color: var(--muted-foreground); font-size: var(--text-xs); }
.px-health > footer a, .px-dash-head a { color: var(--primary); font-size: var(--text-sm); }
.px-spark { inline-size: 100%; block-size: 2rem; }
.px-spark-ok { fill: color-mix(in oklch, var(--primary) 70%, transparent); }
.px-spark-bad { fill: var(--destructive); }
.px-plugin-dots { display: flex; flex-wrap: wrap; gap: 0.25rem 0.875rem; margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
.px-dash-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; margin-block-end: 1.5rem; }
@media (width < 72rem) { .px-dash-columns { grid-template-columns: minmax(0, 1fr); } }
.px-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-block-end: 0.75rem; }
.px-dash-head > h2 { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.875rem; font-weight: var(--font-weight-semibold); }
.px-dash-head > h2 > svg { inline-size: 1rem; block-size: 1rem; color: var(--muted-foreground); }
.px-activity { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.px-activity > li { display: flex; gap: 0.625rem; padding-block: 0.5rem; border-block-end: 1px solid var(--border); }
/* long words (ids, timestamps) wrap instead of pushing the row out of its card */
.px-activity > li > * { min-inline-size: 0; overflow-wrap: anywhere; }
.px-activity > li:last-child { border-block-end: 0; }
.px-activity p { margin: 0; font-size: 0.8125rem; }
.px-activity a { color: var(--primary); }
.px-dash-chat { gap: 0.75rem; }
.px-dash-chat .message .bubble { max-inline-size: 100%; }
.px-connect-line { display: flex; align-items: center; gap: 0.5rem; }
.px-connect-line > code { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.px-group-row > th { padding-block: 0.5rem; background: var(--muted); color: var(--muted-foreground); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-transform: uppercase; letter-spacing: 0.04em; text-align: start; }
.px-coll { display: inline-flex; align-items: center; gap: 0.625rem; color: inherit; font-weight: var(--font-weight-medium); }
.px-coll .px-tile-icon { inline-size: 1.75rem; block-size: 1.75rem; }
.px-coll-table td.px-num { text-align: end; font-variant-numeric: tabular-nums; }

/* Fields are white wherever they sit, the grey rail included. */
.input:not([type='checkbox']):not([type='radio']), .textarea, .select > button, .date-picker > button, .input-group, .px-rt { background-color: var(--background); }

/* The API list on the dashboard. */
.px-dash-api { margin-block-end: 1.5rem; }
.px-api-tabs { display: inline-flex; gap: 0.25rem; padding: 0.1875rem; border: 1px solid var(--border); border-radius: var(--radius-md); }
.px-api-tabs .btn[aria-pressed='true'] { background: var(--accent); color: var(--foreground); }
.px-api-search { inline-size: min(22rem, 100%); }
.px-api-table td { vertical-align: middle; }
.px-api-table td:nth-child(2) { white-space: normal; overflow-wrap: anywhere; }
.px-method { display: inline-block; min-inline-size: 3.25rem; padding: 0.0625rem 0.375rem; border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: var(--text-xs); font-weight: var(--font-weight-semibold); text-align: center; background: var(--muted); }
.px-method[data-method='GET'] { color: #0768cf; background: #e5f4ff; }
.px-method[data-method='POST'] { color: #008043; background: #edfcf0; }
.px-method[data-method='PATCH'], .px-method[data-method='PUT'] { color: #b86200; background: #fff1c2; }
.px-method[data-method='DELETE'] { color: #bd2915; background: #fff5f5; }
.dark .px-method { background: var(--muted); }

/* Where a plugin shows up, and the theme that is active. */
.px-surfaces { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; }
.px-surface { display: inline-flex; align-items: center; gap: 0.25rem; }
.px-surface > svg { inline-size: 0.75rem; block-size: 0.75rem; }
.px-surface[data-surface='admin'] { background: #e5f4ff; color: #0768cf; border-color: transparent; }
.px-surface[data-surface='web'] { background: #edfcf0; color: #008043; border-color: transparent; }
.px-surface[data-surface='site'] { background: #f9f5ff; color: #7c2bda; border-color: transparent; }
.px-surface[data-surface='agent'] { background: #fff1c2; color: #b86200; border-color: transparent; }
.dark .px-surface[data-surface] { background: var(--muted); }
.px-plugin[data-active='true'] { border-color: var(--primary); box-shadow: 0 0 0 1px var(--primary); }

.px-route { display: inline-flex; align-items: center; gap: 0.375rem; }
.px-route > .px-method { min-inline-size: 0; padding: 0 0.25rem; }
.px-route > svg { inline-size: 0.75rem; block-size: 0.75rem; opacity: 0.6; }
a.px-route:hover { border-color: var(--ring); }

.px-plugin[data-off='true'] { background: color-mix(in oklch, var(--muted) 45%, var(--card)); }
.px-preview-note { display: flex; align-items: center; gap: 0.375rem; margin: 0.25rem 0 0; color: var(--muted-foreground); font-size: var(--text-sm); }
.px-preview-note > svg { inline-size: 0.875rem; block-size: 0.875rem; }
.px-plugin .alert ul { margin: 0; padding-inline-start: 1.125rem; }
.px-static-pages .table-container { margin-block-start: 0.75rem; }
.px-static-pages a { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--primary); }
.px-static-pages a > svg { inline-size: 0.75rem; block-size: 0.75rem; }

/* A plugin's group name inside its menu entry. */
.px-nav-sub { padding: 0.5rem 0.5rem 0.125rem; font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted-foreground); list-style: none; }

/* two fields side by side (Sites → Make a site) */
.px-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; }
@media (max-width: 30rem) { .px-pair { grid-template-columns: minmax(0, 1fr); } }

/* a site on a platform plan: the plan in a line above its plugins, and what the plan leaves out */
.px-plan-banner { display: flex; gap: 0.875rem; align-items: flex-start; padding: 0.875rem 1rem; margin-block-end: 1rem; border: 1px solid var(--border); border-radius: var(--radius-lg); background: color-mix(in oklch, var(--muted) 50%, transparent); }
.px-plan-banner p { margin: 0.125rem 0 0; color: var(--muted-foreground); font-size: 0.8125rem; }
.px-locked { gap: 0.25rem; color: var(--muted-foreground); }
.px-locked svg { width: 0.75rem; height: 0.75rem; }