:root {
  --font-family: "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif;
  --font-size-root: 100%;

  /* Blue operates the application; orange identifies the DutchBSD application family. */
  --blue-50: #f7fcff;
  --blue-100: #e4f5ff;
  --blue-200: #bce8ff;
  --blue-300: #95daff;
  --blue-400: #66caff;
  --blue-500: #33b8ff;
  --blue-600: #168ccc;
  --blue-700: #116f9f;
  --blue-800: #006195;
  --blue-900: #003b5a;
  --orange-700: #b94f16;
  --orange-600: #d96624;
  --orange-500: #ff914d;
  --orange-200: #ffd4b8;
  --orange-100: #fff0e6;
  --graphite-950: #171717;
  --graphite-900: #222222;
  --graphite-800: #2b2b2b;
  --graphite-700: #3a3a3a;
  --graphite-500: #6d6d6d;
  --graphite-300: #b8b8b8;
  --graphite-200: #d7d7d7;
  --graphite-100: #ececec;
  --graphite-050: #f7f7f5;
  --color-brand-primary: var(--graphite-800);
  --color-brand-accent: var(--orange-500);
  --brand-primary: var(--color-brand-accent);
  --brand-primary-strong: var(--orange-700);
  --brand-on-primary: #2b2b2b;
  --color-interactive-primary: var(--blue-700);
  --color-interactive-primary-hover: var(--blue-800);
  --color-interactive-primary-active: var(--blue-900);
  --color-interactive-primary-text: #ffffff;
  --color-interactive-secondary: var(--blue-100);
  --color-interactive-selected: #d7effc;
  --color-interactive-selected-text: #12334a;
  --color-interactive-selected-edge: #168ccc;
  --color-link: var(--blue-800);
  --color-link-hover: var(--blue-900);
  --color-focus-ring: var(--blue-600);
  --color-qr-background: #ffffff;

  /* Semantic status palette. Raw references live only in this token layer. */
  --status-success: #0C6B37;
  --status-success-surface: #e5f4eb;
  --status-success-border: #5a9d76;
  --status-success-text: #084b27;
  --status-warning: #F8B324;
  --status-warning-surface: #fff4d6;
  --status-warning-border: #d59600;
  --status-warning-text: #5c3b00;
  --status-elevated: #EB442C;
  --status-elevated-surface: #fde8e3;
  --status-elevated-border: #eb684f;
  --status-elevated-text: #7a1f13;
  --status-danger: #BC2023;
  --status-danger-surface: #fae4e4;
  --status-danger-border: #c95153;
  --status-danger-text: #701215;
  --semantic-success: var(--status-success);
  --semantic-info: #2f6f9a;
  --semantic-warning: var(--status-warning);
  --semantic-urgent: var(--status-elevated);
  --semantic-error: var(--status-danger);

  /* Neutral structural surfaces derived from #2b2b2b. */
  --surface-base: #f7f7f5;
  --surface-1: #ffffff;
  --surface-2: #efefec;
  --surface-3: #ececec;
  --text-1: #202020;
  --text-2: #626262;
  --text-muted: #626262;
  --border-subtle: #d7d7d2;
  --border-strong: #b8b8b8;

  /* Spacing scale tuned for denser dashboard rows/controls. */
  --space-0: 0;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-0-5: 0.25rem;
  --space-1: 0.25rem;
  --space-1-5: 0.5rem;
  --space-2: 0.5rem;
  --space-2-5: 0.75rem;
  --space-3: 0.75rem;
  --space-3-5: 1rem;
  --space-4: 1rem;

  /* Shared shape + size tokens (tightened to reduce puffy feel). */
  --radius-xs: 3px;
  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 8px;
  --radius-pill: 999px;
  --size-brand-logo: 1.75rem;
  --size-brand-glyph: 1rem;
  --size-shell-sidebar: 14rem;
  --size-preview-min-height: 22rem;
  --size-focus-outline: 2px;
  --size-status-stripe: 4px;
  --size-control-min-height: 2.5rem;
  --size-control-comfortable: 2.75rem;
  --size-control-min-height-compact: 2rem;
  --size-control-min-width-compact: 2rem;
  --size-chip-min-height: 1.45rem;

  /* Typography support tokens for compact controls/chips. */
  --font-size-caption: 0.85rem;
  --font-size-control: 0.9rem;
  --font-size-body: 0.95rem;
  --font-size-meta: 0.88rem;
  --line-height-compact: 1.25;
  --line-height-body: 1.4;

  /* Micro-spacing tokens for label/help/meta rhythm. */
  --space-text-2xs: 0.2rem;
  --space-text-xs: 0.25rem;
  --space-text-sm: 0.35rem;
  --space-text-md: 0.4rem;

  /* Dense-surface tokens: sites rows, chips, compact actions, and tables. */
  --density-stack-gap: var(--space-1-5);
  --density-action-gap: var(--space-1-5);
  --density-chip-gap: var(--space-0-5);
  --density-meta-gap: 0.1rem;
  --density-row-padding-block: var(--space-1-5);
  --density-row-padding-inline: var(--space-2-5);
  --density-row-border-radius: var(--radius-lg);
  --density-table-cell-padding-block: var(--space-1);
  --density-table-cell-padding-inline: var(--space-1-5);
  --density-table-font-size: var(--font-size-control);

  /* Auth card rhythm token to adjust spacing under bordered headers. */
  --auth-card-form-padding-block-start: var(--space-4);
  --auth-identity-background: var(--orange-500);
  --auth-identity-text: var(--graphite-900);

  /* Navigation role tokens */
  --nav-link-hover-bg: var(--color-interactive-secondary);
  --nav-link-current-bg: var(--color-interactive-selected);
  --nav-logout-text: color-mix(in srgb, var(--semantic-error) 68%, var(--text-1));
  --nav-logout-hover-bg: color-mix(in srgb, var(--semantic-error) 10%, transparent);
  --nav-logout-hover-text: color-mix(in srgb, var(--semantic-error) 88%, black);

  /* App-shell surface role tokens to prevent "everything is the same card". */
  --shell-panel-bg: var(--surface-1);
  --shell-main-bg: var(--surface-base);
  --shell-elevated-bg: var(--surface-1);
  --shell-muted-bg: var(--surface-2);

  /* Sites state-chip tokens */
  --chip-padding-block: 0.15rem;
  --chip-padding-inline: 0.55rem;
  --chip-gap-inline: var(--space-text-sm);
  --chip-font-size: var(--font-size-caption);
  --chip-border: 1px solid var(--border-subtle);
  --chip-site-unpublished-bg: color-mix(in srgb, var(--surface-1) 75%, var(--text-2) 8%);
  --chip-site-staged-bg: color-mix(in srgb, var(--semantic-info) 18%, transparent);
  --chip-site-live-bg: color-mix(in srgb, var(--semantic-success) 18%, transparent);
  --chip-draft-clean-bg: color-mix(in srgb, var(--semantic-success) 15%, transparent);
  --chip-draft-changed-bg: color-mix(in srgb, var(--semantic-warning) 20%, transparent);
  --chip-attention-healthy-bg: color-mix(in srgb, var(--semantic-success) 16%, transparent);
  --chip-attention-attention-bg: color-mix(in srgb, var(--semantic-warning) 22%, transparent);
  --chip-attention-urgent-bg: color-mix(in srgb, var(--semantic-urgent) 22%, transparent);
  --chip-attention-urgent-border: color-mix(in srgb, var(--semantic-urgent) 46%, var(--border-subtle));
  --chip-attention-error-bg: color-mix(in srgb, var(--semantic-error) 16%, transparent);
  --chip-attention-error-border: color-mix(in srgb, var(--semantic-error) 46%, var(--border-subtle));

  /* Alert + form-status tokens */
  --alert-info-bg: color-mix(in srgb, var(--semantic-info) 12%, transparent);
  --alert-info-border: var(--semantic-info);
  --alert-info-text: var(--text-1);
  --alert-success-bg: color-mix(in srgb, var(--status-success) 12%, var(--surface-1));
  --alert-success-border: var(--status-success);
  --alert-success-text: var(--text-1);
  --alert-warning-bg: color-mix(in srgb, var(--status-warning) 18%, var(--surface-1));
  --alert-warning-border: var(--status-warning-border);
  --alert-warning-text: var(--text-1);
  --alert-error-bg: color-mix(in srgb, var(--status-danger) 12%, var(--surface-1));
  --alert-error-border: var(--status-danger);
  --alert-error-text: var(--text-1);

  --form-error-text: var(--semantic-error);
  --form-error-border: color-mix(in srgb, var(--semantic-error) 40%, transparent);
  --form-error-bg: color-mix(in srgb, var(--semantic-error) 8%, transparent);

  /* Draft preview frame + srcdoc token bridge values. */
  --preview-frame-border: #d0d0d0;
  --preview-frame-bg: #ffffff;
  --preview-page-bg-light: #ffffff;
  --preview-page-bg-dark: #121212;
  --preview-page-text-light: #1a1a1a;
  --preview-page-text-dark: #f2f2f2;
  --preview-search-title: #1f5ca8;
  --preview-search-url: #2f7d46;
  --preview-search-description: #4f4f4f;
  --preview-search-card-radius: var(--radius-md);
  --preview-search-card-border: var(--preview-frame-border);

  /* DutchBSD mapping into Bootstrap 5.3. */
  --bs-primary: #168ccc;
  --bs-primary-rgb: 22, 140, 204;
  --bs-secondary: #6d6d6d;
  --bs-secondary-rgb: 109, 109, 109;
  --bs-body-bg: var(--surface-base);
  --bs-body-color: var(--text-1);
  --bs-secondary-color: var(--text-2);
  --bs-tertiary-bg: var(--surface-2);
  --bs-border-color: var(--border-subtle);
  --bs-border-radius-sm: var(--radius-sm);
  --bs-border-radius: var(--radius-md);
  --bs-border-radius-lg: var(--radius-lg);
  --bs-link-color: var(--color-link);
  --bs-link-hover-color: var(--color-link-hover);
  --bs-focus-ring-color: rgb(22 140 204 / .35);
  --bs-form-control-bg: var(--surface-1);
  --bs-form-control-border-color: var(--border-strong);
  --bs-table-bg: transparent;
  --bs-table-color: var(--text-1);
  --bs-table-border-color: var(--border-subtle);
  --bs-card-bg: var(--surface-1);
  --bs-card-border-color: var(--border-subtle);
  --bs-alert-border-radius: var(--radius-sm);
  --bs-offcanvas-bg: var(--surface-1);
  --bs-dropdown-bg: var(--surface-1);
  --bs-dropdown-border-color: var(--border-subtle);
  --overlay-shadow: 0 10px 28px rgb(0 0 0 / .18);
  --motion-fast: 120ms;
  --motion-normal: 180ms;
  --motion-easing: cubic-bezier(.2, 0, 0, 1);

  color-scheme: light;

  /* Canonical semantic interface roles. Legacy aliases below remain while
     adjacent account surfaces complete their migration. */
  --surface-application: var(--surface-base);
  --surface-workspace: var(--surface-2);
  --surface-navigation: var(--surface-1);
  --surface-panel: var(--surface-1);
  --surface-panel-secondary: var(--surface-2);
  --surface-elevated: var(--surface-1);
  --surface-preview-surround: var(--surface-3);
  --text-primary: var(--text-1);
  --text-secondary: var(--text-2);
  --text-disabled: color-mix(in srgb, var(--text-muted) 65%, transparent);
  --border-divider: var(--border-subtle);
  --interactive-accent: var(--color-interactive-primary);
  --interactive-hover: var(--color-interactive-secondary);
  --interactive-active: var(--blue-200);
  --interactive-selected: var(--color-interactive-selected-edge);
  --interactive-focus: var(--color-focus-ring);
  --color-status-success: var(--semantic-success);
  --color-status-warning: var(--semantic-warning);
  --color-status-danger: var(--semantic-error);
  --color-status-info: var(--semantic-info);
  --status-information: var(--semantic-info);
  --status-draft: var(--semantic-info);
  --status-review: var(--semantic-warning);
  --status-ready: var(--semantic-success);
  --status-blocked: var(--semantic-error);
  --publication-live: var(--semantic-success);
  --status-saving: var(--semantic-info);
  --status-saved: var(--semantic-success);
  --status-unsaved: var(--semantic-warning);
  --status-unavailable: var(--text-muted);
}

:root[data-theme="dark"] {
  --surface-base: #1d1d1d;
  --surface-1: #282828;
  --surface-2: #323232;
  --surface-3: #3a3a3a;
  --text-1: #f3f3f1;
  --text-2: #b9b9b4;
  --status-success-surface: #163d29;
  --status-success-border: #4f9a70;
  --status-success-text: #bce8cd;
  --status-warning-surface: #4a3816;
  --status-warning-border: #d5a33d;
  --status-warning-text: #ffe5a5;
  --status-elevated-surface: #4b251f;
  --status-elevated-border: #e56e5b;
  --status-elevated-text: #ffd0c7;
  --status-danger-surface: #421f21;
  --status-danger-border: #cf6668;
  --status-danger-text: #ffc9ca;
  --text-muted: #b9b9b4;
  --border-subtle: #494949;
  --border-strong: #616161;
  --preview-frame-border: #5a5a5a;
  --preview-frame-bg: #1e1e1e;
  --preview-search-description: #d5d5d5;
  --color-interactive-primary: var(--blue-400);
  --color-interactive-primary-hover: var(--blue-300);
  --color-interactive-primary-active: var(--blue-200);
  --color-interactive-primary-text: var(--blue-900);
  --color-interactive-secondary: #123348;
  --color-interactive-selected: #173b50;
  --color-interactive-selected-text: #e8f7ff;
  --color-interactive-selected-edge: #67c9ff;
  --color-link: var(--blue-300);
  --color-link-hover: var(--blue-100);
  --color-focus-ring: var(--blue-400);


  color-scheme: dark;
}

body {
  margin: 0;
  font-family: var(--font-family);
  background: var(--surface-base);
  color: var(--text-1);
}

.util-mt-3 {
  margin-top: var(--space-3);
}

.util-m-0 {
  margin: 0;
}

.util-p-2 {
  padding: var(--space-2);
}

.util-hidden {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-areas: "sidebar main";
  grid-template-columns: var(--size-shell-sidebar) minmax(0, 1fr);
  min-height: 100vh;
  min-height: 100dvh;
}

[dir="rtl"] .app-shell {
  grid-template-areas: "main sidebar";
  grid-template-columns: minmax(0, 1fr) var(--size-shell-sidebar);
}

.app-sidebar {
  grid-area: sidebar;
  border-inline-end: 1px solid var(--border-subtle);
  background: var(--surface-1);
  padding: var(--space-3);
  position: sticky;
  inset-block-start: 0;
  block-size: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.app-sidebar__top {
  flex: 0 0 auto;
}

.app-sidebar__middle {
  flex: 1 1 auto;
  display: flex;
  align-items: flex-start;
}

.app-sidebar__bottom {
  flex: 0 0 auto;
  margin-block-start: var(--space-4);
}

.app-sidebar__controls {
  margin-block-end: 0;
  padding: var(--space-1) var(--space-2);
  border-block-start: 1px solid var(--border-subtle);
  background: transparent;
  display: grid;
  gap: var(--space-1);
}
.nav-icon { display: inline-grid; inline-size: 1.5rem; place-items: center; flex: 0 0 1.5rem; }
.app-nav__settings, .app-nav-post-button { display: flex; align-items: center; gap: var(--space-1); text-align: start; }
.app-nav-post-form { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-divider); }
.theme-selector { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1); }
.theme-selector button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-1); min-inline-size: 0; }

.app-nav {
  inline-size: 100%;
}
.shell-sidebar-toggle, .mobile-nav-trigger, .mobile-nav-backdrop { display: none; }

[dir="rtl"] .app-sidebar {
  border-inline-end: 0;
  border-inline-start: 1px solid var(--border-subtle);
}

.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: 700;
  margin-block-end: var(--space-3);
  inline-size: auto;
  padding-inline: 0;
}

.brand__logo {
  inline-size: 3.5rem;
  display: flex;
  border: 0;
  border-radius: 0;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
}

.brand__logo svg {
  inline-size: var(--size-brand-glyph);
  block-size: var(--size-brand-glyph);
  fill: none;
  stroke: currentcolor;
  stroke-width: 2;
}

.brand__logo img {
  inline-size: 3.5rem;
  block-size: auto;
  object-fit: contain;
  border-radius: var(--radius-md);
}

.app-group {
  border: 0;
  border-block-start: 1px solid var(--border-subtle);
  border-radius: 0;
  margin: 0;
  background: transparent;
  padding: 0;
}

.app-group summary {
  cursor: pointer;
  font-weight: 600;
  padding-block: var(--space-2);
}

.app-group summary .app-group__summary-label,
.app-group summary .app-group__summary-label:hover,
.app-group summary .app-group__summary-label:focus,
.app-group summary .app-group__summary-label:focus-visible,
.app-group summary .app-group__summary-label:active {
  color: var(--text-1);
  text-decoration: none;
}

.app-group ul {
  list-style: none;
  padding: 0 0 var(--space-2) 0;
  margin: 0;
}

.app-group li a {
  display: flex;
  border-radius: var(--radius-sm);
  min-block-size: var(--size-control-min-height);
  padding: var(--space-text-sm) var(--space-1);
  text-decoration: none;
  color: var(--text-2);
}

.app-nav__settings {
  display: flex;
  inline-size: 100%;
  min-block-size: var(--size-control-min-height);
  padding: var(--space-text-sm) var(--space-1);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--surface-panel-secondary);
  color: var(--text-2);
  text-decoration: none;
}
.app-nav__settings:hover, .app-nav__settings:focus-visible { border-color: var(--interactive-hover); background: var(--nav-link-hover-bg); color: var(--text-1); }
.app-nav__settings:active { background: var(--interactive-active); }
.app-nav__settings[aria-current="page"] { border-color: var(--interactive-selected); background: var(--nav-link-current-bg); color: var(--text-1); }

.app-nav-post-form {
  margin: 0;
}

.app-nav-post-button {
  display: flex;
  width: 100%;
  border: 0;
  border-radius: var(--radius-sm);
  min-block-size: var(--size-control-min-height);
  padding: var(--space-text-sm) var(--space-1);
  background: transparent;
  color: var(--text-2);
  text-align: start;
  font: inherit;
  cursor: pointer;
}

.app-nav-post-button:hover,
.app-nav-post-button:focus-visible {
  background: var(--nav-link-hover-bg);
  color: var(--text-1);
}

.app-nav-post-button--logout {
  color: var(--nav-logout-text);
  font-weight: 600;
}

.app-nav-post-button--logout:hover,
.app-nav-post-button--logout:focus-visible {
  background: var(--nav-logout-hover-bg);
  color: var(--nav-logout-hover-text);
}

.app-group li a[aria-current="page"] {
  background: var(--nav-link-current-bg);
  color: var(--text-1);
}

.app-main-wrap {
  grid-area: main;
  padding: var(--space-1) var(--space-3) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-block-size: 100vh;
  min-block-size: 100dvh;
}

.app-card,
.dashboard-block {
  border: 1px solid var(--border-subtle);
  background: var(--shell-elevated-bg);
  border-radius: var(--radius-lg);
}

.app-content,
.app-footer {
  background: var(--shell-panel-bg);
}

.language-control {
  margin: 0;
}

.language-control select {
  margin: 0;
  inline-size: 100%;
  min-height: var(--size-control-min-height);
}

.theme-toggle {
  border-color: var(--border-subtle);
  margin: 0;
  inline-size: 100%;
}

.messages-stack {
  display: grid;
  gap: var(--space-1);
}

.auth-shell__form > .messages-stack {
  margin-block-end: var(--space-4);
}

.app-alert {
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-md);
  border-inline-start: var(--size-status-stripe) solid var(--semantic-info);
  background: var(--alert-info-bg);
  display: flex;
  align-items: start;
  gap: var(--space-2);
}

.app-alert__content {
  flex: 1;
}

.app-alert__dismiss {
  border: 0;
  background: transparent;
  color: var(--text-2);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0;
  margin: 0;
  cursor: pointer;
}

.app-alert--info {
  border-inline-start-color: var(--alert-info-border);
  background: var(--alert-info-bg);
  color: var(--alert-info-text);
}

.app-alert--success {
  border-inline-start-color: var(--alert-success-border);
  background: var(--alert-success-bg);
  color: var(--alert-success-text);
}

.app-alert--warning {
  border-inline-start-color: var(--alert-warning-border);
  background: var(--alert-warning-bg);
  color: var(--alert-warning-text);
}

.app-alert--error,
.app-alert--danger {
  border-inline-start-color: var(--alert-error-border);
  background: var(--alert-error-bg);
  color: var(--alert-error-text);
}

.app-content {
  padding: var(--space-2) var(--space-3) var(--space-3);
  flex: 1 1 auto;
  min-block-size: 0;
}

.app-section-header {
  margin-block-end: 0;
}

.app-section-title {
  margin: 0;
}

.app-section-subtitle {
  margin: var(--space-text-xs) 0 0;
  color: var(--text-2);
}

.app-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-3);
}

.app-card,
.dashboard-block {
  padding: var(--space-3);
}

.dashboard-block + .dashboard-block {
  margin-top: var(--space-2);
}

.app-button-row {
  display: flex;
  gap: var(--density-action-gap);
  flex-wrap: wrap;
}

.app-footer {
  padding: var(--space-2) var(--space-3);
  color: var(--text-2);
  margin-block-start: auto;
}

a {
  color: var(--color-link);
}

:focus-visible {
  outline: 2px solid var(--color-focus-ring);
  outline-offset: 2px;
}

/* Avoid double focus indicators on form controls. */
:where(input:not([type=checkbox], [type=radio], [type=range], [type=file], [type=submit], [type=button], [type=reset]), textarea, select):focus-visible {
  outline: none;
}

.visually-hidden {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  clip-path: inset(50%);
}


.app-form {
  display: grid;
  gap: var(--space-3);
}

.auth-card__header + .app-form {
  padding-block-start: var(--auth-card-form-padding-block-start);
}


.form-row {
  display: grid;
  gap: var(--space-text-sm);
}

.form-row label {
  display: inline-block;
  font-weight: 600;
}

.required-indicator {
  color: var(--color-status-danger);
  margin-inline-start: var(--space-text-2xs);
}

.form-help {
  color: var(--text-2);
}

.form-error {
  margin: 0;
  color: var(--form-error-text);
  font-size: var(--font-size-body);
}

.form-error p {
  margin: 0;
}

.form-errors-summary {
  border: 1px solid var(--form-error-border);
  border-inline-start: var(--size-status-stripe) solid var(--form-error-text);
  border-radius: var(--radius-md);
  background: var(--form-error-bg);
  padding: var(--space-2) var(--space-3);
}

.form-errors-summary h3 {
  margin: 0 0 var(--space-text-xs);
  font-size: 1rem;
}

.form-errors-summary ul {
  margin: 0;
  padding-inline-start: 1rem;
}

.form-row--error input,
.form-row--error textarea,
.form-row--error select,
input[aria-invalid="true"],
textarea[aria-invalid="true"],
select[aria-invalid="true"] {
  border-color: var(--form-error-text);
}

ul.errorlist {
  margin: var(--space-text-xs) 0 0;
  padding-inline-start: 1rem;
  color: var(--form-error-text);
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--density-action-gap);
  align-items: center;
}

.form-actions .secondary-link {
  color: var(--text-2);
}

.template-filter-form {
  gap: var(--space-2);
}

.template-filter-bar {
  display: grid;
  gap: var(--space-1);
  grid-template-columns: minmax(14rem, 2fr) repeat(2, minmax(10rem, 1fr));
  align-items: end;
}

@media (max-width: 70rem) {
  .template-filter-bar {
    grid-template-columns: 1fr;
  }
}


.auth-page .app-shell { display: block; min-block-size: 100vh; gap: 0; padding: 0; }
.auth-page .app-main-wrap { min-block-size: 100vh; gap: 0; padding: 0; }
.auth-page .app-content { display: grid; min-block-size: 100vh; margin: 0; padding: 0; }
.auth-shell { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(24rem, 1.2fr); min-block-size: 100dvh; background: var(--surface-1); }
.auth-shell__identity { box-sizing: border-box; position: sticky; top: 0; display: grid; align-content: center; align-self: start; gap: var(--space-3); block-size: 100dvh; padding: clamp(var(--space-5), 6vw, var(--space-7)); border-inline-end: 1px solid var(--border-subtle); background: var(--auth-identity-background); color: var(--auth-identity-text); }
.auth-shell__identity h1 { max-inline-size: 12ch; margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); line-height: 1.02; }
.auth-shell__identity p { max-inline-size: 38ch; margin: 0; color: var(--auth-identity-text); }
.auth-shell__brand { display: inline-flex; align-items: center; gap: var(--space-1); inline-size: fit-content; color: var(--brand-on-primary); font-size: 1.25rem; font-weight: 800; text-decoration: none; }
.auth-shell__brand img { inline-size: var(--size-brand-logo); block-size: var(--size-brand-logo); object-fit: contain; }
.auth-shell__brand span { color: inherit; }
.auth-shell__form { display: grid; align-content: center; min-inline-size: 0; padding: clamp(var(--space-4), 5vw, var(--space-7)); }
.auth-layout { inline-size: min(100%, 42rem); margin-inline: auto; }
.signup-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 var(--space-2); }
.signup-form-grid > .form-row--full, .signup-form-grid > .account-type-choice, .signup-form-grid > .form-actions { grid-column: 1 / -1; }
.signup-password-help .form-help { font-size: var(--font-size-meta); line-height: 1.45; }

.auth-card {
  border: 0;
  background: var(--surface-1);
  border-radius: 0;
  padding: 0;
}

.auth-card--wide {
  max-width: 100%;
}

.auth-card__header {
  margin-block-end: 0;
}

.auth-card__header h2 {
  margin: 0;
}

.auth-card__header p {
  margin: var(--space-text-sm) 0 0;
  color: var(--text-2);
}

.auth-card__footer {
  margin-block-start: var(--space-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-text-sm);
  color: var(--text-2);
}

@media (max-width: 640px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-shell__identity { position: static; align-content: start; gap: var(--space-1); block-size: auto; min-block-size: auto; padding: var(--space-3); border-inline-end: 0; border-block-end: 1px solid var(--border-subtle); }
  .auth-shell__identity h1 { font-size: 1.35rem; max-inline-size: none; }
  .auth-shell__identity p { display: none; }
  .auth-shell__form { align-content: start; padding: var(--space-3); }
  .signup-form-grid { grid-template-columns: 1fr; }
  .signup-form-grid > * { grid-column: 1; }
}
.account-type-choice { margin: 0 0 var(--space-2); border: 0; padding: 0; }
.account-type-choice legend { margin-block-end: var(--space-1); font-weight: 650; }
.account-type-choice > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); }
.account-type-choice label { position: relative; display: flex; align-items: center; min-block-size: var(--size-control-min-height); margin: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); cursor: pointer; }
.account-type-choice input[type="radio"] { position: absolute; inline-size: 1px; block-size: 1px; margin: 0; opacity: 0; pointer-events: none; }
.account-type-choice label:has(input:focus-visible) { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.account-type-choice label:has(input:checked) { border-color: var(--color-interactive-selected-edge); background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); }


.page-header {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  align-items: flex-start;
  flex-wrap: wrap;
  margin-block-end: var(--space-2);
}

.page-header h1,
.page-header h2 {
  margin: 0;
}

.site-editor-workspace__title { margin: 0; font-size: var(--font-size-body); font-weight: 700; }

.page-header p {
  margin: var(--space-text-sm) 0 0;
  color: var(--text-2);
}

.action-bar {
  display: flex;
  gap: var(--density-action-gap);
  flex-wrap: wrap;
  align-items: center;
}

.action-bar--end {
  justify-content: flex-end;
}

.table-wrap {
  overflow-x: auto;
}

.table-wrap table {
  width: 100%;
  margin: 0;
}

.table-wrap th {
  white-space: nowrap;
}

.table-wrap th,
.table-wrap td {
  padding: var(--density-table-cell-padding-block) var(--density-table-cell-padding-inline);
  font-size: var(--density-table-font-size);
}

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

.list-plain > li + li {
  margin-block-start: var(--space-2);
}

.site-rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

.site-row {
  border-block-end: 1px solid var(--border-divider);
  background: var(--surface-workspace);
}

.site-row:first-child { border-block-start: 1px solid var(--border-divider); }
.site-list-heading { display: grid; grid-template-columns: minmax(16rem, 2fr) repeat(4, minmax(8rem, 1fr)); gap: var(--density-action-gap); padding: var(--space-1) var(--density-row-padding-inline); color: var(--text-secondary); font-size: var(--font-size-meta); font-weight: 600; }

.site-row-summary {
  display: grid;
  grid-template-columns: minmax(0, 2.4fr) minmax(10rem, 1fr) minmax(10rem, 1fr) auto;
  align-items: center;
  gap: var(--density-action-gap);
  padding: var(--density-row-padding-block) var(--density-row-padding-inline);
}

.site-row-zone {
  min-inline-size: 0;
  display: grid;
  gap: var(--density-meta-gap);
}

.site-row-zone .state-chip { inline-size: fit-content; }

.site-chip-indicator {
  display: inline-flex;
  align-items: center;
  gap: var(--chip-gap-inline);
}

.site-row-zone__meta,
.site-row-zone__label {
  color: var(--text-2);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-compact);
}

.site-row-zone--disclosure {
  justify-self: end;
  color: var(--text-2);
  font-weight: 600;
}

.state-chip {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--size-chip-min-height);
  border-radius: var(--radius-pill);
  padding: var(--chip-padding-block) var(--chip-padding-inline);
  border: var(--chip-border);
  font-size: var(--chip-font-size);
  font-weight: 600;
  line-height: 1.3;
}

/* Site status chips */
.site-status-chip--unpublished {
  background: var(--chip-site-unpublished-bg);
}

.site-status-chip--staged {
  background: var(--chip-site-staged-bg);
}

.site-status-chip--live {
  background: var(--chip-site-live-bg);
}

/* Draft state chips */
.draft-state-chip--clean {
  background: var(--chip-draft-clean-bg);
}

.draft-state-chip--changed {
  background: var(--chip-draft-changed-bg);
}

/* Attention state chips */
.attention-state-chip--healthy {
  background: var(--chip-attention-healthy-bg);
}

.attention-state-chip--attention {
  background: var(--chip-attention-attention-bg);
}

.attention-state-chip--urgent {
  background: var(--chip-attention-urgent-bg);
  border-color: var(--chip-attention-urgent-border);
}

.attention-state-chip--error {
  background: var(--chip-attention-error-bg);
  border-color: var(--chip-attention-error-border);
}

.site-row-expanded {
  border-top: 1px solid var(--border-subtle);
  padding: var(--space-2-5) var(--space-3);
  background: var(--surface-1);
}

.site-expanded-section + .site-expanded-section {
  margin-top: var(--space-3);
}

.site-expanded-section h4 {
  margin: 0 0 var(--space-text-md);
}

.site-expanded-section p {
  margin: 0;
}

.action-bar--primary {
  margin-bottom: var(--space-1);
}

.site-row-edit-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: fit-content;
  min-block-size: var(--size-control-min-height-compact);
  border: 1px solid var(--color-interactive-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-1-5);
  text-decoration: none;
  color: var(--color-link);
  background: transparent;
  font-weight: 600;
}
.site-row-edit-button:hover, .site-row-edit-button:focus-visible { background: var(--interactive-hover); color: var(--color-link-hover); }
.site-row-edit-button--primary { color: var(--color-interactive-primary-text); background: var(--color-interactive-primary); }
.site-row-edit-button--primary:hover, .site-row-edit-button--primary:focus-visible { color: var(--color-interactive-primary-text); background: var(--color-interactive-primary-hover); }
.site-row-menu { padding-block-start: var(--space-1); }
.site-row-menu summary { inline-size: fit-content; cursor: pointer; color: var(--text-2); font-weight: 600; }
.site-row-menu nav { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block-start: var(--space-1-5); }

.action-bar--navigation a {
  color: var(--text-2);
}

@media (max-width: 900px) {
  .site-list-heading { display: none; }
  .site-row-summary {
    grid-template-columns: 1fr;
  }

  .site-row-zone--disclosure {
    justify-self: start;
  }
}

.empty-state {
  border: 1px dashed var(--border-subtle);
  border-radius: var(--radius-xl);
  padding: var(--space-4);
  text-align: center;
  color: var(--text-2);
  background: var(--surface-2);
}

.kv-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: var(--space-2) var(--space-3);
}

.kv-grid dt {
  font-weight: 600;
  color: var(--text-2);
}

.kv-grid dd {
  margin: var(--space-text-2xs) 0 0;
}

.token-key {
  display: inline-block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: var(--font-size-caption);
  background: var(--surface-2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: var(--space-0) var(--space-1);
  word-break: break-all;
}

.inline-form {
  display: inline-flex;
}

.link-subtle {
  color: var(--text-2);
}

.pagination {
  display: flex;
  gap: var(--space-1);
  list-style: none;
  padding: 0;
  margin: var(--space-3) 0 0;
}

.pagination a,
.pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--size-control-min-width-compact);
  min-height: var(--size-control-min-height);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  padding: 0 var(--space-1);
  text-decoration: none;
}

.pagination .is-current {
  border-color: var(--color-interactive-selected-edge);
  color: var(--color-interactive-selected-text);
}
.workflow-steps {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-inline-start: var(--space-4);
}

.workflow-steps li {
  padding-inline-start: var(--space-1);
}

.workflow-steps strong,
.workflow-steps span {
  display: block;
}

.workflow-steps span {
  color: var(--text-2);
  font-size: var(--font-size-meta);
}

.release-state-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  margin: 0 0 var(--space-2);
  padding: 0;
  list-style: none;
}

.release-state-list li {
  display: grid;
  gap: var(--space-text-2xs);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  background: var(--surface-1);
  padding: var(--space-1);
}

.release-state-list span {
  color: var(--text-2);
}

@media (max-width: 48rem) {
  .release-state-list {
    grid-template-columns: 1fr;
  }
}

/* The desktop editor inherits its height from the shell's flexible content row. */
.site-editor-page { overflow: hidden; }
.site-editor-page .app-shell,
.site-editor-page .app-main-wrap { block-size: 100dvh; min-block-size: 0; }
.site-editor-page .app-main-wrap { padding: .5rem; gap: 0; overflow: hidden; }
.site-editor-page .app-content {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
  border-radius: 0;
}
.site-editor-page #editor-form,
.site-editor-page .editor-content-region {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-block-size: 0;
}
.site-editor-page .app-footer { display: none; }

@media (min-width: 901px) {
  .site-editor-page .page-header,
  .site-editor-page .app-content > h3 {
    flex: 0 0 auto;
  }

}

.site-editor-workspace {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--space-1);
  flex: 1 1 auto;
  block-size: 100%;
  min-block-size: 0;
}
.site-editor-workspace__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-1-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--shell-elevated-bg);
}
.site-editor-workspace__header > div { display: grid; gap: var(--space-text-2xs); }
.site-editor-workspace__header .editor-draft-state { color: var(--text-2); font-size: var(--font-size-caption); }
.site-editor-workspace__mobile-switch { display: none; gap: .35rem; }
.site-editor-workspace__mobile-switch button[aria-pressed="true"] { background: var(--color-interactive-selected); border-color: var(--color-interactive-selected-edge); color: var(--color-interactive-selected-text); }
.site-editor-workspace__body {
  display: grid;
  grid-template-columns: minmax(34rem, 48%) minmax(24rem, 1fr);
  gap: var(--space-2);
  block-size: 100%;
  min-block-size: 0;
  overflow: hidden;
}
.site-editor-workspace__editor {
  display: grid;
  grid-template-columns: 12rem minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  min-block-size: 0;
  padding: 0;
  min-inline-size: 0;
}
.site-editor-workspace__editor-scroll {
  grid-column: 2;
  grid-row: 1;
  min-block-size: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  padding: var(--space-1) var(--space-1) var(--space-3) 0;
}
.editor-group-nav { grid-column: 1; grid-row: 1 / -1; display: flex; flex-direction: column; min-block-size: 0; min-inline-size: 0; padding-inline-end: var(--space-1); border-inline-end: 1px solid var(--border-subtle); }
.editor-group-nav__arrow { display: none !important; }
.editor-group-nav__arrow,
.editor-group-tabs [role="tab"] {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  block-size: var(--editor-tab-height);
  min-block-size: var(--editor-tab-height);
  margin: 0;
  border: 1px solid;
  border-radius: var(--radius-md);
  font-size: var(--font-size-caption);
  line-height: 1;
}
.editor-group-nav__arrow {
  inline-size: var(--editor-tab-height);
  min-inline-size: var(--editor-tab-height);
  padding: 0;
  border-color: var(--semantic-info);
  background: var(--semantic-info);
  color: white;
}
.editor-group-nav__arrow:hover { border-color: color-mix(in srgb, var(--semantic-info) 78%, black); background: color-mix(in srgb, var(--semantic-info) 78%, black); color: white; }
.editor-group-nav__arrow:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.editor-group-nav__arrow:disabled { border-color: var(--semantic-info); background: var(--semantic-info); color: white; opacity: .42; cursor: not-allowed; }
.editor-group-nav__arrow[hidden] { display: none; }
.editor-group-tabs {
  display: grid;
  grid-template-columns: 1fr;
  gap: .25rem;
  overflow-y: auto;
  max-block-size: none;
  min-inline-size: 0;
  padding-block: 0;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}
.editor-add-section-region { margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-divider); }
.editor-add-section-region summary { min-block-size: var(--size-control-min-height); padding: var(--space-1); color: var(--color-link); font-weight: 650; cursor: pointer; }
.editor-workflow-region { margin-block-start: auto; min-block-size: 0; max-block-size: min(42dvh, 24rem); overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--space-2); border-block-start: 1px solid var(--status-review-border); border-inline-start: 3px solid var(--status-review); background: var(--status-review-surface); }
.editor-workflow-region .publication-review-control { margin: 0; }

.editor-group-tabs [role="tab"] { justify-content: flex-start; block-size: auto; min-block-size: 2.35rem; padding: .4rem .6rem; border: 0; border-inline-start: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-1); text-align: start; line-height: 1.25; white-space: normal; }
.editor-group-tabs [role="tab"][aria-selected="true"] { border-color: var(--color-interactive-selected-edge); background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); }
.editor-group-tabs [role="tab"]:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.editor-group-error { font-size: .75em; font-weight: 700; color: var(--semantic-error); }
.editor-group { margin-block-end: var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: 0; }
.editor-group[hidden] { display: none; }
.editor-group > summary { padding: var(--space-1); font-weight: 700; }
.editor-group__content { padding: 0 var(--space-1) var(--space-2); }
.editor-group__content > .form-row + .form-row { margin-block-start: var(--space-2); }
.form-row { position: relative; }
.presence-remove-button { position: absolute; inset-block-start: 0; inset-inline-end: 0; inline-size: auto; min-block-size: 1.8rem; padding: .2rem .55rem; color: var(--semantic-error); font-size: var(--font-size-caption); }
.managed-asset-field { display: grid; gap: var(--space-1); margin-block-start: var(--space-1); padding: var(--space-1); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-panel-secondary); }
.managed-asset-actions { display: flex; align-items: center; gap: var(--space-1); }
.managed-asset-control { display: inline-flex; align-items: center; gap: .5rem; inline-size: auto; padding: .4rem .65rem; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); cursor: pointer; }
.managed-asset-control input { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.managed-asset-control:focus-within { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.managed-asset-status { display: block; color: var(--text-2); font-size: var(--font-size-caption); }
.managed-asset-summary { display: flex; align-items: center; gap: var(--space-1); padding: .5rem; border: 1px solid var(--border-subtle); border-inline-start: 3px solid var(--semantic-success); background: var(--surface-2); color: var(--text-1); }
.managed-asset-summary__copy { display: grid; gap: var(--space-0); min-inline-size: 0; }
.managed-asset-summary[data-asset-state="empty"] { border-inline-start-color: var(--border-strong); color: var(--text-secondary); }
.managed-asset-thumbnail { inline-size: 4rem; block-size: 3rem; object-fit: cover; border-radius: var(--radius-sm); }
.managed-asset-remove { flex: 0 0 auto; }
.managed-asset-summary[hidden] { display: none; }
.site-editor-workspace__preview { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; gap: var(--space-1); min-block-size: 0; min-inline-size: 0; overflow: hidden; padding: var(--space-1); }
.draft-preview-controls { flex: 0 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.draft-preview-context { display: grid; gap: var(--space-text-2xs); min-inline-size: 6rem; padding-inline-end: var(--space-1); border-inline-end: 1px solid var(--border-subtle); }
.draft-preview-context__label { color: var(--text-secondary); font-size: var(--font-size-caption); }
.draft-preview-controls > button { inline-size: auto; }
.draft-preview-viewport { display: inline-flex; gap: var(--space-0); }
.site-editor-workspace__actions { z-index: 2; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-1); padding: var(--space-1); border-block-start: 1px solid var(--border-subtle); background: var(--shell-elevated-bg); }
.site-editor-workspace__editor > .site-editor-workspace__actions { grid-column: 2; grid-row: 2; }
.site-editor-workspace__actions-copy { min-inline-size: 0; flex: 1 1 12rem; margin: 0; color: var(--text-2); font-size: var(--font-size-caption); overflow-wrap: anywhere; }
.site-editor-workspace__action-buttons { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.site-editor-workspace__actions button { margin: 0; }
.draft-preview-canvas { flex: 1 1 auto; min-block-size: 0; position: relative; display: grid; place-items: center; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--preview-frame-border); border-radius: var(--radius-md); background: #262b31; }
.draft-preview-stage { position: relative; inline-size: 100%; block-size: 100%; transform-origin: 0 0; }
.draft-preview-frame { display: block; border: 0; inline-size: 100%; block-size: 100%; min-block-size: 0; overflow: auto; background: white; }
.draft-preview-frame--buffer { position: absolute; inset: 0; visibility: hidden; pointer-events: none; }
@media (max-width: 1100px) {
  .site-editor-workspace { block-size: 100%; min-block-size: 0; }
  .site-editor-workspace__body { grid-template-columns: 1fr; block-size: 100%; overflow: hidden; }
  .site-editor-workspace__editor { overflow: hidden; }
  .site-editor-workspace__editor { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr) auto; }
  .editor-group-nav { grid-column: 1; grid-row: 1; padding-inline-end: 0; border-inline-end: 0; border-block-end: 1px solid var(--border-subtle); }
  .editor-group-tabs { grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr)); max-block-size: 7rem; }
  .site-editor-workspace__editor-scroll { grid-column: 1; grid-row: 2; }
  .site-editor-workspace__editor > .site-editor-workspace__actions { grid-column: 1; grid-row: 3; }
  .site-editor-workspace__editor-scroll { max-block-size: none; overflow: auto; padding-inline-end: var(--space-1); scrollbar-gutter: stable; }
  .site-editor-workspace__preview { min-block-size: 0; }
  .draft-preview-controls { grid-template-columns: 1fr; }
  .site-editor-workspace__editor :is(label, p, small, .form-error, .helptext) { min-inline-size: 0; overflow-wrap: anywhere; white-space: normal; }
  .site-editor-workspace__editor :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { inline-size: 100%; max-inline-size: 100%; min-inline-size: 0; }
  .site-editor-workspace__editor textarea { min-block-size: 8rem; }
}


.template-gallery-form { max-inline-size: 72rem; }
.template-option-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.template-chooser__grid, .template-option { min-inline-size: 0; }
.template-option { position: relative; display: block; block-size: 100%; overflow: hidden; padding: var(--space-1); border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--surface-panel); }
.template-option__radio { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; }
.template-option__button { display: grid; grid-template-rows: auto minmax(3.5rem, auto); place-items: stretch; inline-size: 100%; min-block-size: 0; margin: 0; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); cursor: pointer; }
.template-option__media { position: relative; display: block; overflow: hidden; border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.template-option__preview { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 10; overflow: hidden; border: 1px solid var(--border-subtle); border-radius: inherit; background: var(--surface-panel-secondary); }
.template-option__preview img { display: block; inline-size: 100%; block-size: 100%; object-fit: contain; object-position: center top; }
.template-option__label { display: grid; place-items: center; min-inline-size: 0; min-block-size: 3.5rem; padding: var(--space-2); background: transparent; color: var(--text-primary); text-align: center; line-height: var(--line-height-compact); transition: background var(--motion-fast) var(--motion-easing), color var(--motion-fast) var(--motion-easing); }
.template-option__button:hover .template-option__label, .template-option__button:focus-visible .template-option__label { background: var(--color-interactive-primary); color: var(--color-interactive-primary-text); }
.template-option__name, .template-option__action { grid-area: 1 / 1; transition: opacity var(--motion-fast) var(--motion-easing); }
.template-option__name { display: -webkit-box; min-inline-size: 0; overflow: hidden; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.template-option__action { opacity: 0; font-weight: 700; }
.template-option__button:hover .template-option__name, .template-option__button:focus-visible .template-option__name { opacity: 0; }
.template-option__button:hover .template-option__action, .template-option__button:focus-visible .template-option__action { opacity: 1; }
.template-option:has(.template-option__radio:checked) { border-color: var(--color-interactive-selected-edge); background: var(--color-interactive-selected); }
.template-option__button:focus-visible, .template-option__radio:focus-visible + .template-option__button { outline: var(--size-focus-outline) solid var(--interactive-focus); outline-offset: 3px; }
.template-selection-detail { display: none; gap: var(--space-2); align-items: start; margin-block-start: var(--space-2); padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-divider); }
.template-option__radio:checked ~ .template-selection-detail, .template-option--unavailable .template-selection-detail { display: grid; }
.template-option--unavailable .template-selection-detail__copy { display: none; }
.template-selection-detail h3 { margin-block: var(--space-0) var(--space-1); }
.template-selection-detail p { margin-block: var(--space-1); max-inline-size: 65ch; }
.template-selection-detail__meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: var(--space-2) 0 0; }
.template-selection-detail__meta div { display: grid; gap: var(--space-text-2xs); }
.template-selection-detail__meta dt { color: var(--text-secondary); font-size: var(--font-size-caption); }
.template-selection-detail__meta dd { margin: 0; }
.template-selection-detail__action { display: flex; align-items: flex-start; flex-wrap: wrap; gap: var(--space-1); }
.template-selection-detail__action details p { max-inline-size: 28rem; }
@media (max-width: 768px) { .template-filter-bar { grid-template-columns: 1fr; } .template-option-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .template-option-grid { grid-template-columns: 1fr; } }

/* M1-D outcome-focused dashboard and sites workspace patterns. */
.outcome-header { align-items: flex-start; }
.next-action-panel h3 { margin-block: .2rem .5rem; }
.state-chip-row { display: flex; flex-wrap: wrap; gap: .4rem; }
.state-chip--live, .state-chip--healthy, .state-chip--current, .state-chip--saved { border-color: var(--status-success-border); background: var(--status-success-surface); color: var(--status-success-text); }
.state-chip--review, .state-chip--changed { border-color: var(--status-warning-border); background: var(--status-warning-surface); color: var(--status-warning-text); }
.state-chip--attention { border-color: var(--status-elevated-border); background: var(--status-elevated-surface); color: var(--status-elevated-text); }
.state-chip--error { border-color: var(--status-danger-border); background: var(--status-danger-surface); color: var(--status-danger-text); }
.section-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.summary-list { display: grid; gap: .65rem; list-style: none; padding: 0; margin: 1rem 0 0; }
.summary-list__item div { display: grid; gap: .2rem; }
.site-rows--compact .site-row { border-inline: 0; border-radius: 0; }
.site-row-zone--action { align-items: flex-start; }
.dashboard-sites { padding: 0; border-radius: 0; }
.dashboard-sites .section-title-row { padding: var(--space-2); border-block-end: 1px solid var(--border-subtle); }
.filter-panel { display: grid; gap: .75rem; }
.site-search-form { position: relative; display: grid; grid-template-columns: minmax(18rem, 34rem) auto; justify-content: center; align-items: center; gap: var(--space-1); }
.site-search-field { margin: 0; }
.site-search-field input { inline-size: 100%; }
.filter-panel:has(.site-search-form) { padding-block: var(--space-2); }
.site-filter-toggle { inline-size: 2.5rem; block-size: 2.5rem; min-inline-size: 2.5rem; padding: 0; }
.site-filter-toggle { position: relative; inline-size: 2.75rem; min-inline-size: 2.75rem; padding: 0; }
html:not(.sites-search-enhanced) .site-filter-toggle { display: none !important; }
.sites-search-enhanced .site-filter-toggle { display: inline-grid !important; }
.filter-count { position: absolute; inset-block-start: -.35rem; inset-inline-end: -.35rem; display: inline-grid; place-items: center; min-inline-size: 1.25rem; block-size: 1.25rem; border-radius: var(--radius-pill); background: var(--semantic-info); color: white; font-size: var(--font-size-meta); }
.site-advanced-filters { display: grid; grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(10rem, 1fr)); gap: var(--space-2); inline-size: 100%; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-elevated); }
.sites-search-enhanced .site-advanced-filters { position: absolute; z-index: 6; inset-block-start: calc(100% + var(--space-1)); inset-inline-end: 0; grid-column: auto; inline-size: min(34rem, calc(100vw - 2 * var(--space-2))); box-shadow: var(--overlay-shadow); }
.site-advanced-filters[hidden] { display: none; }
.site-advanced-filters .filter-panel__actions { grid-column: 1 / -1; justify-content: space-between; }
.site-filter-grid { display: grid; grid-template-columns: minmax(12rem, 1.4fr) repeat(4, minmax(9rem, 1fr)) auto; gap: .75rem; align-items: end; }
.filter-panel__actions { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.outcome-site-rows .site-row-zone__label { display: none; }
.outcome-site-summary { grid-template-columns: minmax(16rem, 2fr) repeat(4, minmax(8rem, 1fr)); padding-block: var(--space-1); }
.outcome-site-expanded { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr); }
.empty-state--product { text-align: start; }
.empty-state--product h3 { margin-block-start: 0; }
@media (max-width: 70rem) { .next-action-panel, .outcome-site-expanded { grid-template-columns: 1fr; } .site-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .filter-panel__actions { align-self: center; } .site-list-heading { display: none; } .outcome-site-rows .site-row-zone__label { display: inline; }
.outcome-site-summary { grid-template-columns: minmax(14rem, 1fr) repeat(2, minmax(8rem, auto)); } }
@media (max-width: 44rem) { .next-action-panel, .next-action-panel__site { padding: 1rem; } .section-title-row, .summary-list__item { display: grid; } .site-filter-grid { grid-template-columns: 1fr; }
.outcome-site-summary { grid-template-columns: 1fr; } .site-row-zone { min-width: 0; } }
@media (max-width: 44rem) { .site-search-form { grid-template-columns: minmax(0, 1fr) auto; } .site-advanced-filters { grid-template-columns: 1fr; } }

/* M1-E compact review and publish status/action bar. */
.publication-panel { display: grid; gap: .85rem; }
.publication-status-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border: 1px solid var(--mkst-border);
  border-radius: var(--mkst-radius-lg);
  background: var(--mkst-surface);
}
.site-editor-page .publication-panel { flex: 0 0 auto; gap: var(--space-1); }
.site-editor-page .publication-status-bar { align-items: flex-start; padding: var(--space-1); }
.site-editor-page .publication-workflow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); flex-basis: 100%; gap: 0; }
.site-editor-page .publication-stage { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: var(--space-0) var(--space-1); min-block-size: 0; padding: var(--space-1); border-inline-start: 0; border-block-start: 2px solid var(--border-strong); }
.site-editor-page .publication-stage--ready { border-block-start-color: var(--status-success-border); }
.site-editor-page .publication-stage--blocked { border-block-start-color: var(--status-elevated-border); }
.site-editor-page .publication-stage__heading { grid-column: 1; }
.site-editor-page .publication-stage__state { grid-column: 2; font-weight: 600; }
.site-editor-page .publication-stage__actions,
.site-editor-page .publication-stage__details,
.site-editor-page .publication-stage__notice { grid-column: 1 / -1; }
.site-editor-page .publication-stage__actions { flex-basis: auto; }
.site-editor-page .publication-stage__details:not([open]) > :not(summary),
.site-editor-page .publication-stage__notice:not([open]) > :not(summary) { display: none; }
@media (max-width: 70rem) {
  .site-editor-page .publication-workflow { grid-template-columns: 1fr; }
  .site-editor-page .publication-stage { grid-template-columns: auto minmax(0, 1fr) auto; }
  .site-editor-page .publication-stage__actions { grid-column: 3; }
  .site-editor-page .publication-stage__details,
  .site-editor-page .publication-stage__notice { grid-column: 1 / -1; }
}
.publication-workflow { display: flex; flex: 1 1 40rem; flex-wrap: wrap; align-items: center; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.publication-stage { position: relative; display: flex; flex: 1 1 12rem; flex-wrap: wrap; align-items: center; gap: var(--space-1); min-inline-size: 0; padding: var(--space-1); border-inline-start: .2rem solid var(--border-strong); }
.publication-stage + .publication-stage { border-block-start: 0; }
.site-editor-page .publication-stage + .publication-stage { border-block-start: 2px solid var(--border-strong); }
.site-editor-page .publication-stage--ready { border-block-start-color: var(--status-success-border); }
.site-editor-page .publication-stage--blocked { border-block-start-color: var(--status-elevated-border); }
.publication-stage--ready { border-inline-start-color: var(--status-success-border); }
.publication-stage--blocked { border-inline-start-color: var(--status-elevated-border); }
.publication-stage__heading { display: flex; align-items: center; gap: var(--space-1); }
.publication-stage__heading h3 { margin: 0; font-size: var(--font-size-body); }
.publication-stage__number { display: inline-grid; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--font-size-meta); font-weight: 700; }
.publication-stage__state { flex: 1 1 auto; margin: 0; font-size: var(--font-size-meta); font-weight: 700; }
.publication-stage__description, .publication-stage__notice p { margin: 0; color: var(--text-2); font-size: var(--font-size-meta); }
.publication-stage__details summary, .publication-stage__notice summary { color: var(--text-secondary); font-size: var(--font-size-meta); cursor: pointer; }
.publication-stage__actions { display: flex; flex: 1 1 100%; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; }
.publication-stage__details { flex: 1 1 100%; }
.workflow-confirmation { color: var(--status-success-text); font-weight: 700; }
.publication-help-button { display: inline-grid; place-items: center; min-inline-size: 2rem; min-block-size: 2rem; padding: 0; border-radius: 50%; background: transparent; color: var(--color-link); }
.workflow-help-dialog { max-inline-size: min(30rem, calc(100vw - 2rem)); border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: var(--space-3); background: var(--surface-1); color: var(--text-1); }
.workflow-help-dialog::backdrop { background: rgb(0 0 0 / .45); }
.workflow-help-dialog h3 { margin-block-start: 0; }
.publication-status-bar__summary {
  display: flex;
  flex: 1 1 28rem;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  align-items: center;
  min-width: 0;
}
.publication-status-pill {
  border: 1px solid var(--mkst-border);
  border-radius: .45rem;
  padding: .22rem .5rem;
  background: var(--mkst-bg-subtle);
  color: var(--mkst-text);
  font-size: .85rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.publication-status-pill--draft { border-color: color-mix(in srgb, var(--mkst-accent) 35%, var(--mkst-border)); }
.publication-status-pill--ready { border-color: var(--status-success-border); background: var(--status-success-surface); color: var(--status-success-text); }
.publication-status-pill--blocked { border-color: var(--status-danger-border); background: var(--status-danger-surface); color: var(--status-danger-text); }
.publication-status-bar__message {
  color: var(--mkst-muted);
  flex: 1 1 16rem;
  font-size: .9rem;
  line-height: 1.35;
  min-width: 12rem;
}
.publication-status-bar__actions { display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: flex-end; }
.production-publish-controls:not([hidden]) { display: contents; }
.publication-details-row { display: grid; gap: .65rem; }
.readiness-issue--blocker { border-inline-start-color: var(--status-danger-border); }
.readiness-issue--warning { border-inline-start-color: var(--status-warning-border); }
.readiness-issue--information { border-inline-start-color: #0172ad; }
.readiness-list { margin: .25rem 0 0; padding-inline-start: 1.1rem; }
.publish-confirmation-control { flex: 1 1 18rem; display: inline-flex; align-items: center; gap: .5rem; margin: 0; color: var(--mkst-muted); font-size: .92rem; }
.publish-confirmation-control input { margin: 0; }
@media (max-width: 70rem) { .publication-stage { flex-basis: 15rem; } }
@media (max-width: 44rem) { .publication-stage__actions { display: grid; } .publish-confirmation-control { align-items: flex-start; } }


/* Canonical MakeSite components layer on Bootstrap 5.3 primitives. */
a { color: var(--bs-link-color); text-underline-offset: .16em; }
a:hover { color: var(--bs-link-hover-color); }
.btn, button, [type="submit"], [type="button"], [type="reset"], [role="button"], .button-like {
  --bs-btn-border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-block-size: var(--size-control-min-height); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-interactive-primary); border-radius: var(--bs-btn-border-radius);
  background: var(--color-interactive-primary); box-shadow: none; color: var(--color-interactive-primary-text);
  font: inherit; font-weight: 650; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: color var(--motion-fast) var(--motion-easing), background-color var(--motion-fast) var(--motion-easing), border-color var(--motion-fast) var(--motion-easing);
}
:is(.btn, button, [type="submit"], [type="button"], [type="reset"], [role="button"], .button-like):hover { border-color: var(--color-interactive-primary-hover); background: var(--color-interactive-primary-hover); color: var(--color-interactive-primary-text); }
:is(.btn, button, [type="submit"], [type="button"], [role="button"], .button-like):active { background: var(--color-interactive-primary-active); }
:is(.btn-secondary, .btn-outline-secondary, button.secondary, .secondary-link, a.secondary, [role="button"].secondary) { border-color: var(--border-strong); background: var(--surface-1); color: var(--text-1); }
:is(.btn-secondary, .btn-outline-secondary, button.secondary, .secondary-link, a.secondary, [role="button"].secondary):hover { border-color: var(--color-interactive-primary); background: var(--surface-2); color: var(--color-link); }
:is(.btn-link, .button-like.tertiary) { min-block-size: auto; padding-inline: var(--space-1); border-color: transparent; background: transparent; color: var(--color-link); }
:is(.btn-danger, button.destructive) { border-color: var(--status-danger); background: transparent; color: var(--status-danger-text); }
:is(.btn-danger, button.destructive):hover { background: var(--status-danger); color: #fff; }
.btn-icon { inline-size: var(--size-control-min-height); padding: 0; }
.form-control, .form-select, input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
  inline-size: 100%; min-block-size: var(--size-control-min-height); padding: var(--space-2) var(--space-3);
  border: 1px solid var(--bs-form-control-border-color); border-radius: var(--radius-sm); background: var(--bs-form-control-bg); color: var(--text-1); font: inherit; line-height: 1.3;
}
:is(.form-control, .form-select, input, select, textarea):focus { border-color: var(--color-focus-ring); box-shadow: 0 0 0 .2rem var(--bs-focus-ring-color); outline: 0; }
:is(.btn, button, [role="button"], a, summary):focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
label, .form-label { display: grid; gap: var(--space-1); margin-block-end: var(--space-2); font-size: var(--font-size-control); font-weight: 650; }
.form-text, .form-help { color: var(--text-muted); font-size: var(--font-size-caption); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--color-interactive-primary); }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-2); cursor: pointer; }
.checkbox-row input[type="checkbox"] { flex: 0 0 1.5rem; inline-size: 1.5rem; block-size: 1.5rem; }
.card, article { box-shadow: none; }
.page-header { align-items: start; gap: var(--space-4); margin-block-end: var(--space-5); padding-block-end: var(--space-4); border-block-end: 1px solid var(--border-divider); }
.page-header h1 { font-size: clamp(1.5rem, 2vw, 1.75rem); line-height: 1.15; }
.page-header p { max-inline-size: 68ch; }
.table, .table-wrap table { --bs-table-bg: transparent; --bs-table-color: var(--text-1); --bs-table-border-color: var(--border-subtle); margin-block-end: 0; }
.table > :not(caption) > * > *, .table-wrap :is(th, td) { padding: var(--space-2) var(--space-3); border-block-end: 1px solid var(--border-subtle); }
.badge, .state-chip, .template-badge { display: inline-flex; align-items: center; gap: var(--space-1); min-block-size: var(--size-chip-min-height); padding: .2rem .5rem; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-1); font-size: .75rem; font-weight: 650; }
.alert, .app-alert { border-width: 1px; border-inline-start-width: 3px; border-radius: var(--radius-sm); box-shadow: none; }
.empty-state { max-inline-size: 42rem; padding: var(--space-6) var(--space-4); border: 0; border-block: 1px solid var(--border-divider); border-radius: 0; background: transparent; text-align: start; }
.density-comfortable { --size-control-min-height: var(--size-control-comfortable); }
.density-compact { --size-control-min-height: var(--size-control-min-height-compact); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* Customer Settings uses one route-backed list/detail shell. */
.secondary-nav__heading { margin: var(--space-3) 0 var(--space-0); color: var(--text-secondary); font-size: var(--font-size-caption); letter-spacing: .04em; text-transform: uppercase; }
.secondary-nav__item { box-sizing: border-box; display: flex; align-items: center; min-block-size: var(--size-control-min-height); padding: var(--space-1); border: 0; border-inline-start: 3px solid transparent; border-radius: 0; background: transparent; color: var(--text-secondary); text-align: start; text-decoration: none; }
.secondary-nav__item:hover { background: var(--interactive-hover); color: var(--color-link-hover); }
.secondary-nav__item:focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.secondary-nav__item[aria-current="page"], .secondary-nav__item[aria-selected="true"] { border-inline-start-color: var(--color-interactive-selected-edge); background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); font-weight: 650; }
.settings-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-4); inline-size: 100%; }
.settings-nav { border-inline-end: 1px solid var(--border-divider); padding-inline-end: var(--space-3); }
.settings-nav__desktop { display: grid; gap: var(--space-0); position: sticky; inset-block-start: var(--space-3); }
.settings-nav__desktop .secondary-nav__item { white-space: nowrap; }
.settings-nav__desktop h1 { margin: 0 0 var(--space-2); font-size: 1.4rem; }
.settings-nav__mobile { display: none; }
.settings-content { min-inline-size: 0; max-inline-size: 48rem; }
.settings-header { margin-block-end: var(--space-4); border-block-end: 1px solid var(--border-divider); padding-block-end: var(--space-3); }
.settings-header h2 { margin: var(--space-0) 0; }
.settings-header p { margin: var(--space-0) 0; color: var(--text-secondary); }
.settings-header .eyebrow { color: var(--color-link); font-size: var(--font-size-caption); font-weight: 700; text-transform: uppercase; }
.settings-section { display: grid; gap: var(--space-2); }
.settings-section--security { border-block-start: 1px solid var(--border-divider); padding-block-start: var(--space-3); }
.workspace-dashboard { display: grid; align-content: start; }
.workspace-quick-actions { display: flex; gap: var(--space-3); align-items: center; padding-block: var(--space-2); border-block: 1px solid var(--border-divider); }
.workspace-journey { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--border-divider); border-inline-start: 4px solid var(--color-interactive-selected-edge); background: var(--surface-panel-secondary); }
.workspace-journey h2 { margin-block: 0 var(--space-1); }
.site-journey-steps { display: grid; gap: var(--space-1); margin: 0; padding-inline-start: var(--space-4); }
.site-journey-steps li[aria-current="step"] { color: var(--color-link); font-weight: 700; }
.workspace-quick-actions h2 { flex: 0 0 auto; margin: 0; font-size: var(--font-size-body); }
.workspace-quick-actions ul { display: flex; flex-wrap: wrap; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
.workspace-matrix { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; align-items: start; border-inline-start: 1px solid var(--border-divider); }
.workspace-columns { display: grid; grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr); gap: var(--space-4); margin-block-start: var(--space-4); align-items: start; }
.workspace-columns__primary, .workspace-columns__secondary { display: grid; gap: var(--space-4); min-inline-size: 0; }
.workspace-panel { min-inline-size: 0; padding: var(--space-3); border: 1px solid var(--border-divider); border-radius: var(--radius-md); background: var(--surface-panel); }
.workspace-panel__header { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; margin-block-end: var(--space-2); }
.workspace-panel__header h2, .workspace-panel__header p { margin: 0; }
.workspace-panel__header h2 { font-size: 1.15rem; }
.workspace-panel__header p { color: var(--text-secondary); font-size: var(--font-size-caption); }
.site-dashboard-list a { color: var(--text-primary); text-decoration: none; }
.site-dashboard-list a:hover { color: var(--color-link-hover); text-decoration: underline; }
.two-factor-setup__qr { display: inline-flex; padding: var(--space-3); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--color-qr-background); }
.two-factor-setup__qr img { display: block; inline-size: min(15rem, 100%); block-size: auto; }
.two-factor-setup__secret code { display: inline-block; padding: var(--space-2); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface-panel-secondary); font-size: 1rem; letter-spacing: .08em; overflow-wrap: anywhere; }
.two-factor-setup__uri { max-inline-size: 100%; overflow-wrap: anywhere; }
.workspace-quadrant { min-inline-size: 0; padding: var(--space-3); border-inline-end: 1px solid var(--border-divider); border-block-end: 1px solid var(--border-divider); background: var(--surface-panel); }
.workspace-quadrant__header { display: flex; justify-content: space-between; gap: var(--space-2); align-items: baseline; margin-block-end: var(--space-3); }
.workspace-quadrant__header h2, .workspace-quadrant__header p { margin: 0; }
.workspace-quadrant__header h2 { font-size: 1.15rem; }
.workspace-quadrant__header p, .dashboard-note, .resource-label { color: var(--text-secondary); font-size: var(--font-size-caption); }
.dashboard-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.dashboard-list li { display: flex; justify-content: space-between; gap: var(--space-2); align-items: center; padding-block: var(--space-2); border-block-start: 1px solid var(--border-subtle); }
.dashboard-list p, .dashboard-list strong { margin: 0; }
.dashboard-list p, .activity-list time { color: var(--text-secondary); font-size: var(--font-size-caption); }
.dashboard-empty { max-inline-size: 30rem; color: var(--text-secondary); }
.detail-list, .metric-list { margin: 0 0 var(--space-3); }
.detail-list div, .metric-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2); }
.detail-list div { padding-block: var(--space-2); border-block-start: 1px solid var(--border-subtle); }
.detail-list dd, .detail-list dt, .metric-list dd, .metric-list dt { margin: 0; }
.metric-list dd { font-size: 1.5rem; font-weight: 700; }
.usage-trend { display: flex; align-items: end; gap: var(--space-1); block-size: 5rem; border-block-end: 1px solid var(--border-strong); }
.usage-trend progress { flex: 1; inline-size: auto; block-size: 100%; border: 0; background: transparent; writing-mode: vertical-lr; }
.usage-trend progress::-webkit-progress-bar { background: transparent; }
.usage-trend progress::-webkit-progress-value, .usage-trend progress::-moz-progress-bar { background: var(--color-interactive-primary); }
@media (max-width: 64rem) { .workspace-matrix, .workspace-columns { grid-template-columns: 1fr; grid-template-rows: none; } }
@media (max-width: 44rem) {
  .workspace-dashboard { min-block-size: 0; }
  .workspace-quick-actions { align-items: flex-start; flex-direction: column; }
  .workspace-journey { align-items: flex-start; flex-direction: column; }
  .workspace-quick-actions li, .workspace-quick-actions a { inline-size: 100%; }
  .workspace-matrix { display: flex; flex-direction: column; }
  .workspace-quadrant--next { order: 1; } .workspace-quadrant--activity { order: 2; } .workspace-quadrant--billing { order: 3; } .workspace-quadrant--usage { order: 4; }
  .dashboard-list li { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 760px) {
  .settings-layout { grid-template-columns: 1fr; gap: var(--space-3); }
  .settings-nav { border-inline-end: 0; border-block-end: 1px solid var(--border-divider); padding: 0 0 var(--space-3); }
  .settings-nav__desktop { display: none; }
  .settings-nav__mobile { display: grid; }
  .settings-content, .settings-content input, .settings-content select, .settings-content textarea { max-inline-size: 100%; }
  .settings-content table, .settings-content tbody, .settings-content tr, .settings-content td { display: block; inline-size: 100%; }
  .settings-content thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .settings-content tr { padding-block: var(--space-2); border-block-end: 1px solid var(--border-divider); }
  .settings-content td { padding: var(--space-1) 0; overflow-wrap: anywhere; }
  .settings-content form { max-inline-size: 100%; }
  .settings-content td .inline-form { display: flex; inline-size: 100%; gap: var(--space-1); margin-block-end: var(--space-1); }
  .settings-content td .inline-form select { flex: 1 1 auto; min-inline-size: 0; }
  .settings-content td .inline-form button { flex: 0 0 auto; white-space: nowrap; }
}

/* Canonical editor preview: independent scroll panes and an in-pane page fit. */
.draft-preview-controls {
  align-items: center;
}
.draft-preview-context {
  display: grid;
  gap: .15rem;
  align-self: stretch;
  align-content: center;
  min-block-size: var(--size-control-min-height);
  padding: .35rem .6rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-2);
}
.draft-preview-context__label { color: var(--text-2); font-size: var(--font-size-caption); font-weight: 650; }
.draft-preview-context strong { color: var(--text-1); font-size: .95rem; }
.draft-preview-theme { margin-inline-start: auto; }
.draft-preview-canvas { align-items: stretch; justify-items: center; padding: .85rem; background: var(--preview-shell-bg); }
.draft-preview-stage {
  overflow: hidden;
  border: 1px solid var(--preview-frame-border);
  border-radius: var(--radius-md);
  background: white;
  transition: inline-size .16s ease;
}
.draft-preview-canvas[data-preview-state="page"] { overflow: hidden; }
.draft-preview-canvas[data-preview-state="page"] .draft-preview-stage { align-self: start; justify-self: center; }
.draft-preview-canvas[data-preview-state="page"] .draft-preview-frame { max-inline-size: none; max-block-size: none; }
.draft-preview-canvas[data-preview-state="focus"] .draft-preview-stage { align-self: stretch; block-size: 100%; }
.draft-preview-canvas[data-preview-state="focus"] .draft-preview-frame { block-size: 100%; }
.draft-preview-canvas[data-preview-viewport="desktop"] .draft-preview-stage { inline-size: min(100%, 84rem); }
.draft-preview-canvas[data-preview-viewport="tablet"] .draft-preview-stage { inline-size: min(100%, 48rem); }
.draft-preview-canvas[data-preview-viewport="mobile"] .draft-preview-stage { inline-size: min(100%, 24rem); }
@media (max-width: 1100px) {
  .site-editor-workspace { block-size: 100%; }
  .site-editor-workspace__header { align-items: start; flex-direction: column; }
  .site-editor-workspace__mobile-switch { display: inline-flex; }
  .site-editor-workspace__body { grid-template-columns: 1fr; overflow: hidden; }
  .site-editor-workspace[data-editor-narrow-view="edit"] .site-editor-workspace__preview,
  .site-editor-workspace[data-editor-narrow-view="preview"] .site-editor-workspace__editor { display: none; }
  .site-editor-workspace[data-editor-narrow-view="preview"] .site-editor-workspace__preview { display: grid; }
  .site-editor-workspace__editor,
  .site-editor-workspace__preview,
  .draft-preview-canvas { min-block-size: 0; }
  .site-editor-workspace__editor-scroll,
  .draft-preview-canvas { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
  .draft-preview-theme { margin-inline-start: 0; }
}

.presence-add-list {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .75rem 0 1rem;
}
.add-section-control {
  margin-block-end: var(--space-2);
  border-block: 1px solid var(--border-subtle);
  background: var(--surface-panel-secondary);
}
.add-section-control > summary { cursor: pointer; padding: var(--space-1) var(--space-2); font-weight: 650; }
.add-section-control[open] > summary { border-block-end: 1px solid var(--border-subtle); }
.add-section-control .presence-add-sections { padding: var(--space-1) var(--space-2); }
.presence-add-section-single { margin-block-end: var(--space-2); }
.template-option .template-option__button,
.template-option .template-option__button:hover,
.template-option .template-option__button:active {
  display: grid;
  inline-size: 100%;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-primary);
  text-align: start;
}
.presence-add-sections { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-end: var(--space-1); }
.presence-add-sections button { margin: 0; }
.presence-add-sections[hidden] { display: none; }
.presence-add-section-single[hidden] { display: none; }
.presence-add-list[hidden] { display: none; }
.repeater-item {
  display: grid;
  gap: var(--space-1);
  margin-block: var(--space-1);
  padding: var(--space-1-5);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--shell-elevated-bg);
}
.repeater-item--image { gap: 0; padding: 0; overflow: clip; }
.repeater-item--image[data-expanded="true"] { border-color: var(--color-interactive-selected-edge); }
.repeater-item__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.repeater-item--image .repeater-item__header { min-block-size: 4.5rem; padding: var(--space-1); }
.repeater-item__summary { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; }
.repeater-item__summary-copy { display: grid; gap: var(--space-text-2xs); min-inline-size: 0; }
.repeater-item__summary-copy strong,
.repeater-item__summary-copy small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.repeater-item__summary-copy small { color: var(--text-secondary); }
.repeater-item__status--needed { color: var(--status-warning-text) !important; font-weight: 650; }
.repeater-item__thumbnail { flex: 0 0 auto; inline-size: 4rem; block-size: 3rem; border-radius: var(--radius-sm); object-fit: cover; background: var(--shell-bg); }
.repeater-item__thumbnail[hidden] { display: none; }
.repeater-item__thumbnail--fallback { display: grid; place-items: center; border: 1px solid var(--border-subtle); color: var(--text-secondary); font-size: 1.4rem; }
.repeater-item__header-actions { display: flex; flex: 0 0 auto; align-items: center; }
.repeater-item__toggle { inline-size: auto; min-block-size: var(--size-control-min-height); margin: 0; padding-inline: var(--space-1-5); }
.repeater-item__fields { display: grid; gap: var(--space-3); }
.repeater-item--image .repeater-item__fields { padding: var(--space-2); border-block-start: 1px solid var(--border-subtle); }
.repeater-item__fields[hidden] { display: none; }
.repeater-item__fields .form-row { gap: var(--space-text-2xs); margin: 0; }
.repeater-item__fields .form-row > label:first-child { margin: 0; line-height: 1.25; }
.repeater-item__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .45rem; padding-block-start: .35rem; border-block-start: 1px solid var(--border-subtle); }
.repeater-item__actions--footer { margin-block-start: calc(-1 * var(--space-1)); }
.repeater-item__actions button { inline-size: auto; min-block-size: 2rem; margin: 0; padding: .25rem .6rem; }
.repeater-item__add-caption { justify-self: start; inline-size: auto; min-block-size: var(--size-control-min-height); margin: calc(-1 * var(--space-1)) 0 0; }
.managed-asset-repeater-thumbnail { display: block; max-inline-size: 12rem; max-block-size: 8rem; border-radius: var(--radius-sm); object-fit: contain; background: var(--shell-bg); }
.managed-asset-repeater-remove { inline-size: fit-content; }
button.destructive { border-color: var(--semantic-error); background: transparent; color: var(--semantic-error); }
button.destructive:hover,
button.destructive:focus-visible { background: var(--semantic-error); color: white; }
.presence-add-button,
.presence-remove-button { font-size: .875rem; }
.presence-remove-button { margin-top: .65rem; }
.presence-remove-dialog {
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--mkst-text);
}
.presence-remove-dialog::backdrop { background: rgba(15, 23, 42, .48); }
.presence-remove-dialog__surface {
  width: min(34rem, calc(100vw - 2rem));
  padding: 1.25rem;
  border: 1px solid var(--mkst-border);
  border-radius: var(--mkst-radius-lg);
  background: var(--mkst-surface);
}
.presence-remove-dialog__surface h2 { margin-top: 0; }
.presence-remove-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: .75rem;
  margin-top: 1rem;
}
.presence-undo-toast {
  position: fixed;
  inset-inline: 1rem;
  bottom: 1rem;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  max-width: 42rem;
  margin-inline: auto;
  padding: .85rem 1rem;
  border: 1px solid var(--mkst-border);
  border-radius: var(--mkst-radius-lg);
  background: var(--mkst-surface);
  color: var(--mkst-text);
}
.presence-undo-toast[hidden] { display: none; }
/* Canonical navigation contract: root data attributes are the sole mode owner. */
.nav-icon { inline-size: 1.25rem; block-size: 1.25rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 1.25rem; }
.mobile-nav-trigger, .mobile-nav-close, .mobile-nav-backdrop, .editor-sidebar-toggle { display: none; }
.app-sidebar__top { display: flex; align-items: flex-start; justify-content: space-between; }
.app-navigation { display: grid; gap: var(--space-1); inline-size: 100%; }
.app-navigation__group { margin: 0 0 var(--space-1); color: var(--text-muted); font-size: .8125rem; font-weight: 700; }
.app-navigation__row, .app-nav__settings, .app-nav-post-button { display: flex; align-items: center; gap: var(--space-2); min-block-size: 2.75rem; inline-size: 100%; padding: var(--space-2); border: 1px solid transparent; border-radius: var(--radius-md); background: transparent; color: var(--text-primary); text-align: start; text-decoration: none; }
.app-navigation__row:hover, .app-nav__settings:hover, .app-nav-post-button:hover { border-color: var(--border-subtle); background: var(--interactive-hover); color: var(--text-primary); }
.app-navigation__row[aria-current="page"], .app-nav__settings[aria-current="page"] { border-color: var(--color-interactive-selected-edge); background: var(--color-interactive-selected); color: var(--color-interactive-selected-text); }
.app-navigation__row:focus-visible, .editor-sidebar-toggle:focus-visible, .mobile-nav-trigger:focus-visible, .mobile-nav-close:focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.app-sidebar__utilities, .app-sidebar__bottom { display: grid; gap: var(--space-1); margin-block-start: auto; padding-block-start: var(--space-3); }
.app-navigation__logout { margin: var(--space-1) 0 0; padding-block-start: var(--space-2); border-block-start: 1px solid var(--border-divider); }
.app-navigation__logout :is(.app-navigation__row, .app-nav-post-button):hover { border-color: var(--status-danger-border); background: var(--status-danger-surface); color: var(--status-danger-text); }
.theme-control { min-block-size: 2.75rem; display: flex; align-items: center; }
.theme-selector { display: inline-flex; align-items: center; gap: var(--space-1); padding-inline: var(--space-2); }
.theme-selector button, .theme-toggle--rail { inline-size: 2.25rem; block-size: 2.25rem; min-inline-size: 2.25rem; padding: 0; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); }
.theme-selector button:hover, .theme-toggle--rail:hover { background: var(--interactive-hover); color: var(--text-primary); }
.theme-selector button[aria-pressed="true"] { color: var(--text-primary); box-shadow: inset 0 -2px var(--color-interactive-selected-edge); }
.theme-selector button[aria-pressed="false"] { opacity: .65; }
.theme-selector button:focus-visible, .theme-toggle--rail:focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 1px; }
.theme-selector__divider { color: var(--text-muted); user-select: none; }
.theme-toggle--rail { display: none; }

@media (min-width: 901px) {
  html[data-navigation-viewport="desktop"] .app-sidebar { position: sticky; inset-block-start: 0; block-size: 100dvh; overflow-y: auto; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-shell { grid-template-columns: 4.5rem minmax(0, 1fr); }
  [dir="rtl"][data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-shell { grid-template-columns: minmax(0, 1fr) 4.5rem; }
  html[data-navigation-page="editor"] .editor-sidebar-toggle { z-index: 40; display: inline-grid; place-items: center; position: fixed; inset-block-start: 50%; inset-inline-start: var(--size-shell-sidebar); transform: translate(-50%, -50%); inline-size: 2rem; block-size: 2.75rem; min-inline-size: 2rem; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-pill); background: var(--surface-1); color: var(--text-primary); }
  [dir="rtl"][data-navigation-page="editor"] .editor-sidebar-toggle { transform: translate(50%, -50%); }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .editor-sidebar-toggle { inset-inline-start: 4.5rem; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .editor-sidebar-toggle svg { transform: none; }
  html[data-navigation-page="editor"][data-navigation-sidebar="expanded"] .editor-sidebar-toggle svg { transform: rotate(180deg); }
  [dir="rtl"][data-navigation-page="editor"] .editor-sidebar-toggle svg { transform: scaleX(-1); }
  [dir="rtl"][data-navigation-page="editor"][data-navigation-sidebar="expanded"] .editor-sidebar-toggle svg { transform: scaleX(-1) rotate(180deg); }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-sidebar { padding-inline: .75rem; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .brand { align-items: center; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .brand__logo { inline-size: 2.5rem; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-navigation__group,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-navigation__label,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .theme-selector { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-navigation__row { justify-content: center; padding: 0; inline-size: 2.75rem; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .theme-control { justify-content: center; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .theme-toggle--rail { display: inline-grid; place-items: center; }
}

@media (max-width: 900px) {
  .app-shell, [dir="rtl"] .app-shell { grid-template-areas: "sidebar" "main"; grid-template-columns: minmax(0, 1fr); }
  html:not(.navigation-enhanced) .app-sidebar { position: static; block-size: auto; min-block-size: auto; }
  html.navigation-enhanced .app-shell, html.navigation-enhanced[dir="rtl"] .app-shell { grid-template-areas: "main"; grid-template-columns: minmax(0, 1fr); }
  html.navigation-enhanced .mobile-nav-trigger { z-index: 42; display: inline-grid; place-items: center; position: fixed; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); inline-size: 2.75rem; block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0; }
  html.navigation-enhanced .app-main-wrap { padding-block-start: calc(3.5rem + env(safe-area-inset-top, 0px)); }
  html.navigation-enhanced .app-sidebar { z-index: 44; display: flex; position: fixed; inset-block: 0; inset-inline-start: 0; inline-size: min(18rem, calc(100vw - 2.5rem)); block-size: 100dvh; padding: var(--space-2); overflow-y: auto; transform: translateX(-105%); transition: transform .16s ease; }
  html.navigation-enhanced[dir="rtl"] .app-sidebar { transform: translateX(105%); }
  html.navigation-enhanced[data-navigation-drawer="open"] .app-sidebar { transform: translateX(0); }
  html.navigation-enhanced .mobile-nav-close { display: inline-grid; place-items: center; inline-size: 2.75rem; block-size: 2.75rem; min-inline-size: 2.75rem; padding: 0; }
  html.navigation-enhanced .mobile-nav-backdrop:not([hidden]) { z-index: 43; display: block; position: fixed; inset: 0; inline-size: 100%; block-size: 100%; border: 0; border-radius: 0; background: rgb(0 0 0 / .45); }
  .editor-sidebar-toggle, .theme-toggle--rail { display: none !important; }
}
@media (prefers-reduced-motion: reduce) { .app-sidebar { transition: none !important; } }

.search-preview {
  inline-size: min(44rem, calc(100% - (2 * var(--space-4))));
  margin: var(--space-4) auto;
  color: var(--text-primary);
}
.search-preview h2 { margin-block: var(--space-1) 0; font-size: 1.25rem; }
.search-preview__note { color: var(--text-secondary); margin-block: var(--space-1) var(--space-4); }
.search-result-preview {
  padding: var(--space-3);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
}
.search-result-preview p,
.search-result-preview h3 { margin-block: var(--space-0); }
.search-result-preview__url { color: var(--preview-search-url); font-size: var(--font-size-meta); }
.search-result-preview h3 { color: var(--preview-search-title); font-size: 1.25rem; font-weight: 500; }
.search-result-preview [data-search-preview-description] { color: var(--preview-search-description); }
[data-preview-state="search"] { align-items: start; overflow-y: auto; }
@media (min-width: 1101px) {
  .site-editor-workspace__mobile-switch { display: none !important; }
}
@media (max-width: 1100px) {
  .site-editor-workspace__mobile-switch { display: inline-flex !important; }
}

.template-selection-region .template-selection-detail[hidden] { display: none; }
.template-selection-region { background: var(--surface-application); }
.template-selection-sticky { position: sticky; z-index: 5; top: var(--space-1); margin-block-end: var(--space-2); padding-block: env(safe-area-inset-top, 0); background: var(--surface-application); }
.template-selection-sticky[hidden] { display: none; }
.template-selection-compact { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-1); align-items: center; padding: var(--space-1); border-block: 1px solid var(--border-divider); background: var(--surface-panel); }
.template-selection-compact img { inline-size: 4.5rem; aspect-ratio: 16 / 10; object-fit: cover; }
.template-selection-expanded { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(16rem, .8fr); gap: var(--space-3); align-items: start; }

/* Shared ordered workflow presentation used by template creation and editor publication. */
.workflow-progress { min-inline-size: 0; }
.template-guidance { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); max-inline-size: 72rem; margin-block: var(--space-3); padding: 0; list-style: none; border-block: 1px solid var(--border-divider); }
.template-guidance .workflow-progress__step { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; padding: var(--space-2); color: var(--text-muted); }
.template-guidance .workflow-progress__step + .workflow-progress__step { border-inline-start: 1px solid var(--border-divider); }
.workflow-progress__number, .publication-stage__number { display: inline-grid; flex: 0 0 auto; place-items: center; inline-size: 1.5rem; block-size: 1.5rem; border: 1px solid var(--border-strong); border-radius: 50%; font-size: var(--font-size-meta); font-weight: 700; }
.template-guidance .is-current { color: var(--text-primary); }
.template-guidance .is-current .workflow-progress__number { border-color: var(--interactive-selected); background: var(--interactive-selected); color: var(--interactive-selected-text); }
.template-guidance .is-complete { color: var(--text-secondary); }
.template-guidance .is-complete .workflow-progress__number { border-color: var(--color-success); color: var(--color-success); }

.template-selection-region:has(.template-selection-detail:not([hidden])) { margin-block-end: var(--space-4); }
.template-selection-detail { padding-block: var(--space-3); border-block: 1px solid var(--border-divider); }
.template-selection-detail:not([hidden]) { display: grid; }
.template-selection-detail__preview > img, .template-selection-detail__fallback { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--border-subtle); background: var(--surface-preview-surround); }
.template-selection-detail__fallback { display: grid; place-items: center; color: var(--text-muted); }
.template-selection-detail__fallback { max-block-size: 12rem; aspect-ratio: 16 / 6; }
.template-screenshot-controls { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-1); align-items: center; margin-block-start: var(--space-1); }
.template-screenshot-controls > button { min-inline-size: 2.25rem; padding-inline: var(--space-1); }
[dir="rtl"] .template-screenshot-controls > [data-screenshot-previous],
[dir="rtl"] .template-screenshot-controls > [data-screenshot-next] { transform: scaleX(-1); }
.template-screenshot-thumbnails { display: flex; gap: var(--space-1); min-inline-size: 0; overflow-x: auto; padding: var(--size-focus-outline); }
.template-screenshot-thumbnail { flex: 0 0 4.5rem; padding: 0; border: 2px solid transparent; border-radius: var(--radius-sm); background: transparent; }
.template-screenshot-thumbnail.is-active { border-color: var(--interactive-selected); }
.template-screenshot-thumbnail img { display: block; inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.template-selection-detail__copy h2 { margin-block: var(--space-1); }
.template-selection-detail__copy > p { overflow-wrap: anywhere; }

@media (max-width: 768px) {
  .template-guidance { grid-template-columns: 1fr; }
  .template-guidance .workflow-progress__step + .workflow-progress__step { border-inline-start: 0; border-block-start: 1px solid var(--border-divider); }
  .template-selection-expanded { grid-template-columns: 1fr; }
  .template-selection-compact { grid-template-columns: auto minmax(0, 1fr) auto; }
  .template-selection-compact img { display: none; }
  .template-selection-compact [type="submit"] { grid-column: 1 / -1; }
}
@media (min-width: 901px) {
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-group > summary { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-group > ul { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-sidebar__controls { margin: 0; padding: 0; border: 0; }
}

/* UI follow-up polish pass: compact operational editor strip and icon actions. */
.publication-status-strip {
  align-items: center;
  border-color: var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-1) 4%, transparent);
}
.site-editor-page .publication-status-strip { padding: .5rem .65rem; }
.publication-status-strip .publication-status-bar__summary { flex: 1 1 26rem; gap: .35rem; }
.publication-status-strip .publication-status-bar__actions { margin-inline-start: auto; }
.publication-status-bar__details { flex: 1 1 100%; font-size: var(--font-size-meta); }
.publication-status-bar__details summary { cursor: pointer; color: var(--text-secondary); }
.publication-status-bar__detail-grid { display: grid; gap: var(--space-1); margin-block-start: var(--space-1); }
.publication-status-bar__detail-grid p { margin: 0; }
.publication-status-strip .publication-help-button { min-inline-size: 1.75rem; min-block-size: 1.75rem; }
.field-icon-action {
  display: inline-grid;
  place-items: center;
  inline-size: 2rem;
  block-size: 2rem;
  min-inline-size: 2rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-link);
  line-height: 1;
}
.field-icon-action:hover { border-color: var(--color-interactive-selected-edge); background: var(--interactive-hover); }
.field-icon-action:focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.field-icon-action--danger { color: var(--status-danger-text); }
.field-icon-action--danger:hover, .field-icon-action--danger:focus-visible { border-color: var(--status-danger-border); background: var(--status-danger-surface); }
.form-row[data-editor-field-row] { position: relative; }
.form-row[data-editor-field-row] > .presence-remove-button { position: absolute; inset-block-start: 0; inset-inline-end: 0; }
.form-row[data-editor-field-row] > label:first-child { padding-inline-end: 2.35rem; }
.presence-add-list, .presence-add-sections, .presence-section-actions { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.draft-preview-fallback { margin: 0; padding: .5rem .65rem; display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); }
.draft-preview-fallback[hidden] { display: none; }

/* UI follow-up polish pass: shell alignment and iconography. */
.app-navigation__row, .app-nav__settings, .app-nav-post-button {
  align-items: center;
  gap: .625rem;
  min-block-size: 2.625rem;
  padding-block: .5rem;
  padding-inline: .625rem;
  line-height: 1.2;
}
.app-nav__icon { display: inline-grid; place-items: center; flex: 0 0 1.25rem; inline-size: 1.25rem; block-size: 1.25rem; }
.app-nav__icon .nav-icon { display: block; flex: none; }
.app-navigation__row .nav-icon, .app-nav__settings .nav-icon, .app-nav-post-button .nav-icon,
.theme-selector .nav-icon, .theme-toggle--rail .nav-icon { inline-size: 1.25rem; block-size: 1.25rem; flex: 0 0 1.25rem; }
.theme-toggle--rail .nav-icon[hidden] { display: none; }
.app-navigation__label { line-height: 1.2; }
.theme-control { min-block-size: 2.625rem; align-items: center; }
.theme-selector { padding-inline: .625rem; min-block-size: 2.625rem; }
.theme-selector button { display: inline-grid; place-items: center; inline-size: 2rem; block-size: 2rem; min-inline-size: 2rem; }
.theme-toggle--rail { place-items: center; inline-size: 2rem; block-size: 2rem; min-inline-size: 2rem; }
.theme-selector button[aria-pressed="true"] { opacity: 1; color: var(--text-primary); }
.theme-selector button[aria-pressed="false"] { opacity: .72; }
@media (min-width: 901px) {
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-navigation__row,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav__settings,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav-post-button { justify-content: center; inline-size: 2.625rem; min-block-size: 2.625rem; padding: 0; }
}

/* UI follow-up polish pass: Sites workspace hierarchy and semantic status colors. */
.filter-panel { background: var(--surface-panel); border-color: var(--border-subtle); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-1) 5%, transparent); }
.site-list-heading {
  background: color-mix(in srgb, var(--surface-panel-secondary) 78%, var(--surface-panel));
  border: 1px solid var(--border-subtle);
  border-block-end: 0;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  color: var(--text-secondary);
  font-size: var(--font-size-meta);
  font-weight: 700;
}
.outcome-site-rows { border: 1px solid var(--border-subtle); border-radius: 0 0 var(--radius-md) var(--radius-md); background: var(--surface-panel); overflow: hidden; }
.site-row { border-block-end: 1px solid var(--border-subtle); }
.site-row:last-child { border-block-end: 0; }
.site-row:nth-child(even) { background: color-mix(in srgb, var(--surface-panel-secondary) 34%, transparent); }
.site-row:hover, .site-row:focus-within { background: color-mix(in srgb, var(--color-interactive-selected) 46%, var(--surface-panel)); }
.state-chip--healthy, .state-chip--live, .state-chip--current, .state-chip--saved, .state-chip--succeeded {
  border-color: #0C6B37;
  background: color-mix(in srgb, #0C6B37 13%, var(--surface-panel));
  color: var(--status-success-text);
}
:root:not([data-theme="dark"]) .state-chip--healthy,
:root:not([data-theme="dark"]) .state-chip--live,
:root:not([data-theme="dark"]) .state-chip--current,
:root:not([data-theme="dark"]) .state-chip--saved,
:root:not([data-theme="dark"]) .state-chip--succeeded { color: #0C6B37; }
.state-chip--attention, .state-chip--warning, .state-chip--review, .state-chip--staged, .state-chip--pending {
  border-color: #F8B324;
  background: color-mix(in srgb, #F8B324 18%, var(--surface-panel));
  color: var(--text-1);
}
.state-chip--resolve_issue, .state-chip--needs_attention, .state-chip--stale {
  border-color: #EB442C;
  background: color-mix(in srgb, #EB442C 13%, var(--surface-panel));
  color: var(--status-elevated-text);
}
:root:not([data-theme="dark"]) .state-chip--resolve_issue,
:root:not([data-theme="dark"]) .state-chip--needs_attention,
:root:not([data-theme="dark"]) .state-chip--stale { color: #9a2415; }
.state-chip--error, .state-chip--failed, .state-chip--blocked {
  border-color: #BC2023;
  background: color-mix(in srgb, #BC2023 13%, var(--surface-panel));
  color: var(--status-danger-text);
}
:root:not([data-theme="dark"]) .state-chip--error,
:root:not([data-theme="dark"]) .state-chip--failed,
:root:not([data-theme="dark"]) .state-chip--blocked { color: #8f1719; }

/* Editor follow-up: compact review bar, field action geometry, modal surface, and rail alignment. */
.publication-review-control { display: grid; gap: var(--space-1); }
.publication-review-control__toggle {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-1);
  width: 100%;
  min-block-size: 2.5rem;
  padding: .5rem .65rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  background: var(--surface-panel);
  color: var(--text-primary);
  text-align: start;
  cursor: pointer;
  list-style: none;
}
.publication-review-control__toggle::-webkit-details-marker { display: none; }
.publication-review-control__toggle:hover { border-color: var(--interactive-hover); background: var(--nav-link-hover-bg); }
.publication-review-control__toggle:focus-visible { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.publication-review-control__label { color: var(--text-primary); font-weight: 700; }
.publication-review-control__next { color: var(--text-secondary); font-size: var(--font-size-meta); white-space: nowrap; }
.publication-review-control[open] .publication-review-control__icon { transform: rotate(180deg); }
.publication-workflow-panel .publication-status-strip { align-items: flex-start; margin-block-start: var(--space-1); }
.publication-status-bar__details { display: grid; gap: var(--space-1); margin-block-start: var(--space-1); }
.publication-help-button, .workflow-help-dialog { display: none; }
.field-control-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--space-1); }
.field-control-row__control { min-inline-size: 0; }
.field-control-row__control > input:not([type="checkbox"]):not([type="radio"]), .field-control-row__control > textarea, .field-control-row__control > select { width: 100%; }
.field-control-row__actions { display: flex; align-items: center; justify-content: flex-end; min-inline-size: 2rem; min-block-size: var(--size-control-min-height); }
.form-row[data-editor-field-row] > .presence-remove-button { position: static; inset: auto; }
.form-row[data-editor-field-row] > label:first-child { padding-inline-end: 0; }
.presence-remove-button { margin: 0; }
.presence-section-actions { justify-content: flex-end; margin-block-end: var(--space-1); }
.presence-section-button, .presence-add-button { display: inline-flex; align-items: center; gap: .35rem; }
.repeater-item__header { align-items: center; }
.repeater-item__header > strong { min-inline-size: 0; }
.repeater-item__actions { border-block-start: 0; padding-block-start: 0; }
.repeater-item__actions--footer { display: flex; }
.presence-remove-dialog.modal { max-inline-size: none; border: 0; padding: 0; background: transparent; color: var(--text-primary); }
.presence-remove-dialog.modal[open] { display: block; }
.presence-remove-dialog .modal-dialog { margin: 1.75rem auto; width: min(34rem, calc(100vw - 2rem)); }
.presence-remove-dialog__surface.modal-content { padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-elevated); color: var(--text-primary); box-shadow: 0 1rem 3rem rgb(0 0 0 / .28); }
.presence-remove-dialog .modal-header, .presence-remove-dialog .modal-body, .presence-remove-dialog .modal-footer { padding: var(--space-2); }
.presence-remove-dialog .modal-title { margin: 0; }
.presence-remove-dialog .modal-body p { margin: 0; }
.presence-remove-dialog::backdrop { background: rgb(0 0 0 / .55); }
.app-navigation__row, .app-nav__settings, .app-nav-post-button { display: flex; justify-content: flex-start; text-align: start; }
.app-nav-post-button--logout { align-items: center; }
@media (min-width: 901px) {
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-navigation__row,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav__settings,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav-post-button,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .theme-toggle--rail {
    display: inline-grid;
    place-items: center;
    inline-size: 2.75rem;
    block-size: 2.75rem;
    min-inline-size: 2.75rem;
    min-block-size: 2.75rem;
    padding: 0;
  }
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-group li,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-nav-post-form,
  html[data-navigation-page="editor"][data-navigation-sidebar="collapsed"] .app-sidebar__controls { display: grid; justify-items: center; }
}
@media (max-width: 44rem) {
  .publication-review-control__toggle { grid-template-columns: minmax(0, 1fr) auto; }
  .publication-review-control__next { grid-column: 1 / -1; }
}

/* Template composer contract follow-up: canonical navigation groups and scalar action rows. */
.editor-group-tabs__heading {
  display: block;
  grid-column: 1 / -1;
  margin-block: var(--space-1) .25rem;
  padding-inline: .6rem;
  color: var(--text-secondary);
  font-size: var(--font-size-meta);
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.editor-group-tabs__heading:first-child { margin-block-start: 0; }
.field-control-row {
  --field-action-column-size: var(--size-control-min-height);
  grid-template-columns: minmax(0, 1fr) var(--field-action-column-size);
  align-items: center;
  column-gap: var(--space-2);
}
.field-control-row__actions {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--field-action-column-size);
  min-inline-size: var(--field-action-column-size);
  min-block-size: var(--size-control-min-height);
}
.field-control-row__control:has(textarea) + .field-control-row__actions { align-self: start; padding-block-start: var(--space-1); }
.presence-remove-button.field-icon-action {
  position: static;
  inset: auto;
  margin: 0;
  inline-size: var(--field-action-column-size, var(--size-control-min-height));
  block-size: var(--field-action-column-size, var(--size-control-min-height));
  min-inline-size: var(--field-action-column-size, var(--size-control-min-height));
  min-block-size: var(--field-action-column-size, var(--size-control-min-height));
  padding: 0;
}
.preview-toggle-control { display: flex; align-items: center; gap: var(--space-1); min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.preview-toggle-control legend { float: none; inline-size: auto; margin: 0; color: var(--text-secondary); font-size: var(--font-size-caption); font-weight: 650; }
.preview-toggle-group { flex-wrap: nowrap; }
.preview-toggle-group .btn { inline-size: auto; min-block-size: 2rem; padding: var(--space-1) var(--space-2); white-space: nowrap; }
.preview-toggle-group .btn-check + .btn, .segmented-choice-group .btn-check + .btn { border-color: var(--color-interactive-primary); background: transparent; color: var(--color-link); }
.preview-toggle-group .btn-check:checked + .btn, .segmented-choice-group .btn-check:checked + .btn { border-color: var(--color-interactive-primary); background: var(--blue-900); color: #fff; }
.preview-toggle-group .btn-check:not(:checked) + .btn:hover, .segmented-choice-group .btn-check:not(:checked) + .btn:hover, .template-preset-option .btn-check:not(:checked) + .btn:hover, .template-palette-option .btn-check:not(:checked) + .btn:hover { border-color: var(--color-interactive-primary); background: color-mix(in srgb, var(--color-interactive-primary) 10%, transparent); color: var(--text-primary); }
.preview-toggle-group .btn-check:focus-visible + .btn, .segmented-choice-group .btn-check:focus-visible + .btn { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; box-shadow: none; }
.preview-toggle-group .btn-check:disabled + .btn, .segmented-choice-group .btn-check:disabled + .btn { border-color: var(--border-strong); background: transparent; color: var(--text-disabled); opacity: .55; cursor: not-allowed; }
.segmented-choice-group { display: inline-flex; flex-wrap: wrap; gap: 0; }
.segmented-choice-group .btn { inline-size: auto; min-block-size: 2rem; margin: 0; padding: var(--space-1) var(--space-2); border-radius: 0; }
.segmented-choice-group .btn:first-of-type { border-start-start-radius: var(--radius-sm); border-end-start-radius: var(--radius-sm); }
.segmented-choice-group .btn:last-of-type { border-start-end-radius: var(--radius-sm); border-end-end-radius: var(--radius-sm); }
.template-preset-picker, .template-palette-picker { display: grid; gap: var(--space-1); margin-block: var(--space-3); padding: 0; border: 0; }
.template-preset-picker legend, .template-palette-picker legend { margin: 0; color: var(--text-secondary); font-size: var(--font-size-control); font-weight: 700; }
.template-preset-grid, .template-palette-grid { display: grid; gap: var(--space-1); }
.template-preset-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.template-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.template-preset-option, .template-palette-option { display: grid; min-inline-size: 0; }
.template-preset-option .btn, .template-palette-option .btn { display: grid; place-items: center; inline-size: 100%; min-block-size: 3.5rem; margin: 0; padding: var(--space-1); border: 1px solid var(--color-interactive-primary); border-radius: var(--radius-sm); background: transparent; color: var(--text-primary); line-height: var(--line-height-compact); text-align: center; white-space: normal; cursor: pointer; }
.template-preset-option .btn-check:checked + .btn, .template-palette-option .btn-check:checked + .btn { border-color: var(--blue-900); background: var(--blue-900); color: #fff; }
.template-preset-option .btn-check:focus-visible + .btn, .template-palette-option .btn-check:focus-visible + .btn { outline: var(--size-focus-outline) solid var(--color-focus-ring); outline-offset: 2px; }
.template-preset-more { display: grid; gap: var(--space-2); justify-items: start; margin-block-start: var(--space-1); }
.template-preset-more [data-preset-search] { display: grid; inline-size: 100%; gap: var(--space-text-2xs); }
.template-preset-more [data-preset-search][hidden] { display: none; }
@media (max-width: 34rem) { .template-preset-grid, .template-palette-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.template-review-open { overflow: hidden; }
.template-review-workspace[hidden] { display: none; }
.template-review-workspace.modal { position: fixed; inset: 0; z-index: 1200; display: grid; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none; margin: 0; border: 0; background: transparent; padding: var(--space-3); }
.template-review-workspace__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--text-primary) 72%, transparent); }
.template-review-workspace__panel.modal-content { position: relative; display: grid; grid-template-rows: auto 1fr; min-block-size: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-lg); background: var(--surface-elevated); box-shadow: var(--overlay-shadow); overflow: hidden; }
.template-review-workspace__toolbar { display: flex; gap: var(--space-3); align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--border-subtle); }
.template-review-workspace__toolbar h2 { margin: 0; font-size: var(--font-size-body); }
.template-review-workspace__body { display: grid; grid-template-columns: minmax(16rem, 24rem) 1fr; min-block-size: 0; }
.template-review-workspace__details { min-block-size: 0; overflow: hidden; border-inline-end: 1px solid var(--border-subtle); }
.template-review-workspace__details [data-template-review-details]:not([hidden]) { display: grid; grid-template-rows: minmax(0, 1fr) auto; block-size: 100%; min-block-size: 0; }
.template-selection-detail__scroll { min-block-size: 0; overflow: auto; padding: var(--space-4); }
.template-review-workspace__details .template-selection-detail__action { padding: var(--space-3) var(--space-4); border-block-start: 1px solid var(--border-subtle); background: var(--surface-elevated); }
.template-review-workspace__preview { min-inline-size: 0; min-block-size: 0; padding: var(--space-4); background: var(--surface-preview-surround); overflow: auto; }
.template-preview-frame-shell { margin: auto; block-size: 100%; inline-size: min(100%, 80rem); transition: inline-size .18s ease; }
.template-preview-frame-shell[data-viewport="tablet"] { inline-size: min(100%, 48rem); }
.template-preview-frame-shell[data-viewport="mobile"] { inline-size: min(100%, 24.375rem); }
.template-preview-frame-shell iframe { inline-size: 100%; block-size: 100%; min-block-size: 70vh; border: 1px solid var(--preview-frame-border); border-radius: var(--radius-lg); background: var(--preview-frame-bg); }
.template-preview-error { padding: var(--space-4); border: 1px solid var(--status-warning-border); border-radius: var(--radius-lg); background: var(--status-warning-surface); color: var(--status-warning-text); }
@media(max-width: 52.5rem) { .template-review-workspace__body { grid-template-columns: 1fr; } .template-review-workspace__details { border-inline-end: 0; border-block-end: 1px solid var(--border-subtle); max-block-size: 35vh; } .template-review-workspace__toolbar { align-items: flex-start; flex-direction: column; } .template-preview-frame-shell iframe { min-block-size: 60vh; } }


/* Final launch UI fit: use header space, stable editor panels, and a bounded workflow overlay. */
.site-editor-workspace__header {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto;
}
.site-editor-workspace__header > .draft-preview-controls {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-1);
}
.site-editor-workspace__preview {
  grid-template-rows: minmax(0, 1fr) auto;
}
.editor-group__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-1);
  padding: var(--space-1);
  font-weight: 700;
}
.editor-workflow-region {
  position: relative;
  overflow-y: auto;
  max-block-size: min(42dvh, 24rem);
}
.editor-workflow-region .publication-review-control {
  position: relative;
}
.editor-workflow-region .publication-workflow-panel {
  position: static;
  inline-size: 100%;
  max-block-size: min(42dvh, 24rem);
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  background: var(--surface-elevated);
  box-shadow: none;
}
.editor-autosave-feedback { display: inline-flex; align-items: center; gap: var(--space-1); max-inline-size: 32rem; }
.editor-autosave-feedback #autosave-retry { flex: 0 0 auto; inline-size: auto; }
.publication-next-steps { display: grid; gap: var(--space-2); margin: var(--space-1) 0 0; padding: 0; list-style: none; }
.publication-next-step { display: grid; justify-items: start; gap: var(--space-1); padding-block-end: var(--space-2); border-block-end: 1px solid var(--border-subtle); }
.publication-next-step:last-child { padding-block-end: 0; border-block-end: 0; }
.editor-workflow-region .publication-status-bar {
  align-items: stretch;
}
.editor-workflow-region .publication-status-bar__summary,
.editor-workflow-region .publication-status-bar__actions,
.editor-workflow-region .publication-status-bar__details {
  min-inline-size: 0;
}
@media (min-width: 1101px) {
  .site-editor-workspace__editor {
    overflow: hidden;
  }
}
.draft-preview-canvas[data-preview-state="page"] {
  overflow: hidden;
}
.draft-preview-canvas[data-preview-state="page"] .draft-preview-stage,
.draft-preview-canvas[data-preview-state="focus"] .draft-preview-stage {
  align-self: start;
  justify-self: center;
}
@media (max-width: 1100px) {
  .site-editor-workspace__header {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .site-editor-workspace__header > .draft-preview-controls {
    grid-column: 1 / -1;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  .site-editor-workspace[data-editor-narrow-view="edit"] .draft-preview-controls {
    display: none;
  }
}