/**
 * MyronCMS — CMS Shell Foundation
 * Shell chrome uses fixed --mc-shell-* variables so the utility bar, rail,
 * and shell navigation remain intentionally insulated from public JSONM
 * styling by default. The shared workspace and page-canvas layer below the
 * shell is token-responsive and follows active --myron-* semantics.
 */

[hidden] {
  display: none !important;
}

body.mc-shell-page,
body.myron-site-page--authenticated {
  --mc-shell-bar-height: 69px;
  --mc-shell-canvas: #f4f5f7;
  --mc-shell-surface: #ffffff;
  --mc-shell-surface-soft: #fafbfc;
  --mc-shell-border: #e3e7ee;
  --mc-shell-border-strong: #cfd6de;
  --mc-shell-text: #131821;
  --mc-shell-text-muted: #6c7481;
  --mc-shell-active: #111827;
  --mc-shell-active-surface: #eef2f6;
  --mc-shell-avatar-badge-bg: var(--mc-shell-active);
  --mc-shell-avatar-badge-text: #ffffff;
  --mc-shell-danger: #c03221;
  --mc-shell-shadow: 0 18px 44px rgba(15, 23, 42, 0.08);
}

.myron-form {
  display: grid;
  gap: var(--myron-space-md);
}

.myron-form__field {
  display: grid;
  gap: var(--myron-space-xs);
}

.myron-form__honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0.01;
}

.myron-form__submit,
.myron-form-cta {
  width: fit-content;
}

.myron-form-dialog {
  max-width: min(720px, calc(100vw - 32px));
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  padding: var(--myron-space-xl);
}

.myron-form-dialog__close {
  float: right;
}

.mc-forms-summary-widget__list {
  display: grid;
  gap: var(--myron-space-xs);
  padding-left: var(--myron-space-lg);
}

.mc-forms-template-panel {
  display: grid;
  gap: var(--myron-space-md);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-forms-template-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--myron-space-sm);
}

.mc-forms-template-card,
.mc-forms-template-card:visited {
  display: grid;
  gap: var(--myron-space-xs);
  min-width: 0;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
  color: var(--myron-color-text);
  text-decoration: none;
}

.mc-forms-template-card:hover,
.mc-forms-template-card:active {
  border-color: var(--myron-color-link);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  text-decoration: none;
}

.mc-forms-template-card__label {
  font-weight: 700;
}

.mc-forms-template-card__description {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
}

body.mc-shell-page {
  background-color: var(--mc-shell-canvas);
  color: var(--mc-shell-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

body.mc-shell-page[data-mc-shell-appearance="dark"],
body.myron-site-page--authenticated[data-mc-shell-appearance="dark"] {
  --mc-shell-canvas: #0f141b;
  --mc-shell-surface: #151b24;
  --mc-shell-surface-soft: #1d2530;
  --mc-shell-border: #2b3542;
  --mc-shell-border-strong: #3a4654;
  --mc-shell-text: #f4f7fb;
  --mc-shell-text-muted: #a7b0be;
  --mc-shell-active: #ffffff;
  --mc-shell-active-surface: #263241;
  --mc-shell-avatar-badge-bg: var(--mc-shell-active);
  --mc-shell-avatar-badge-text: var(--mc-shell-canvas);
  --mc-shell-danger: #ff7b68;
  --mc-shell-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}

.mc-shell {
  min-width: 0;
  max-width: 100%;
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr;
}

.mc-public-shell {
  --myron-site-shell-offset: var(--mc-shell-bar-height);
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--mc-shell-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.mc-shell__utility {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  padding: 14px 24px;
  background-color: var(--mc-shell-surface);
  border-bottom: 1px solid var(--mc-shell-border);
}

.mc-shell__utility-actions,
.mc-workspace__title-row,
.mc-workspace__tabs,
.mc-shell__avatar {
  display: flex;
  align-items: center;
}

.mc-shell__system-brand {
  font-size: 18px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--mc-shell-text);
  letter-spacing: -0.02em;
}

.mc-shell__environment-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 0 8px;
  margin-left: 8px;
  border: 1px solid var(--myron-color-border-strong);
  border-radius: var(--myron-radius-pill);
  font-size: 12px;
  line-height: 1;
  font-weight: 700;
  color: var(--myron-color-foreground);
  background: var(--myron-color-surface);
}

.mc-shell__environment-badge--dev {
  color: #5f4200;
  background: #fff3bf;
  border-color: #e0b341;
}

.mc-shell__environment-badge--stage {
  color: #743100;
  background: #ffe1c2;
  border-color: #d98232;
}

.mc-shell__environment-badge--live {
  color: #0f4d2a;
  background: #d9f7e5;
  border-color: #46a66d;
}

.mc-shell__environment-badge--local {
  color: #334155;
  background: #e5e7eb;
  border-color: #94a3b8;
}

.mc-shell__utility-slot {
  min-width: 0;
}

.mc-shell__utility-slot--brand {
  display: flex;
  align-items: center;
  justify-self: start;
}

.mc-shell__utility-slot--center {
  justify-self: center;
}

.mc-public-shell__lead {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mc-public-shell__manage,
.mc-public-shell__manage:visited,
.mc-public-shell__manage:active {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 14px 0 12px;
  border-radius: 2px;
  background-color: var(--mc-shell-surface);
  color: var(--mc-shell-text);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.mc-public-shell__manage:hover,
.mc-public-shell__manage:focus-visible {
  background-color: var(--mc-shell-surface-soft);
  color: var(--mc-shell-text);
  outline: none;
  text-decoration: none;
}

.mc-shell__context-action,
.mc-shell__context-action:visited,
.mc-shell__context-action:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--mc-shell-border-strong);
  border-radius: 2px;
  background-color: var(--mc-shell-surface);
  color: var(--mc-shell-text);
  font-size: 14px;
  line-height: 1.2;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.mc-shell__context-action:hover,
.mc-shell__context-action:focus-visible {
  background-color: var(--mc-shell-surface-soft);
  border-color: var(--mc-shell-text-muted);
  color: var(--mc-shell-text);
  outline: none;
  text-decoration: none;
}

.mc-workspace__eyebrow,
.mc-rail-group__title {
  font-size: 11px;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
}

.mc-workspace__eyebrow {
  color: var(--myron-color-text-muted);
}

.mc-admin-breadcrumbs {
  color: var(--myron-color-text-muted);
}

.mc-admin-breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45em;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-admin-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-width: 0;
}

.mc-admin-breadcrumbs__link,
.mc-admin-breadcrumbs__current {
  color: inherit;
  text-decoration: none;
}

.mc-admin-breadcrumbs__link:hover,
.mc-admin-breadcrumbs__link:focus-visible {
  color: var(--myron-color-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.mc-admin-breadcrumbs__separator {
  color: var(--myron-color-text-muted);
}

.mc-rail-group__title {
  color: var(--mc-shell-text-muted);
}

.mc-shell__toggle,
.mc-shell__utility-action,
.mc-shell__avatar {
  min-height: 40px;
  min-width: 40px;
  background-color: var(--mc-shell-surface);
  color: var(--mc-shell-text);
  transition: background-color 120ms ease, color 120ms ease;
}

.mc-shell__toggle,
.mc-shell__utility-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
}

.mc-shell__toggle:hover,
.mc-shell__utility-action:hover,
.mc-shell__avatar:hover {
  background-color: var(--mc-shell-surface-soft);
}

.mc-shell__utility-actions {
  gap: 10px;
  justify-self: end;
}

.mc-shell__utility-action--notice {
  position: relative;
}

.mc-shell__notification-menu-wrap {
  position: relative;
}

.mc-shell__appearance-toggle {
  border-radius: 999px;
}

.mc-shell__appearance-toggle-icon {
  display: none;
  line-height: 0;
}

.mc-shell__appearance-toggle[data-mc-shell-appearance-state="light"] .mc-shell__appearance-toggle-icon--light,
.mc-shell__appearance-toggle[data-mc-shell-appearance-state="dark"] .mc-shell__appearance-toggle-icon--dark {
  display: inline-flex;
}

.mc-shell__appearance-toggle-image {
  display: block;
}

.mc-shell__utility-action--has-dot {
  position: relative;
}

.mc-shell__utility-dot {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background-color: var(--mc-shell-danger);
}

.mc-shell__notification-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: grid;
  gap: 4px;
  width: min(320px, calc(100vw - 32px));
  padding: 8px;
  border: 1px solid var(--mc-shell-border);
  background-color: var(--mc-shell-surface);
  box-shadow: var(--mc-shell-shadow);
}

.mc-shell__notification-menu[hidden] {
  display: none;
}

.mc-shell__notification-menu-item {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  background-color: transparent;
  color: var(--mc-shell-text);
  font: inherit;
  text-decoration: none;
}

.mc-shell__notification-menu-item:hover,
.mc-shell__notification-menu-item:focus-visible {
  background-color: var(--mc-shell-active-surface);
  outline: none;
}

.mc-shell__notification-menu-item--empty {
  color: var(--mc-shell-text-muted);
}

.mc-shell__avatar {
  position: relative;
  gap: 10px;
  padding: 0 10px 0 6px;
  border-radius: 999px;
}

.mc-shell__avatar-menu-wrap {
  position: relative;
}

.mc-shell__avatar-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  min-width: 180px;
  padding: 8px;
  display: grid;
  gap: 4px;
  border: 1px solid var(--mc-shell-border);
  background-color: var(--mc-shell-surface);
  box-shadow: var(--mc-shell-shadow);
}

.mc-shell__avatar-menu[hidden] {
  display: none;
}

.mc-shell__avatar-menu-form {
  margin: 0;
}

.mc-shell__avatar-menu-item {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 40px;
  padding: 0 12px;
  border: none;
  background-color: transparent;
  color: var(--mc-shell-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mc-shell__avatar-menu-item:hover,
.mc-shell__avatar-menu-item:focus-visible {
  background-color: var(--mc-shell-active-surface);
  outline: none;
}

.mc-shell__avatar-menu-item[disabled] {
  color: var(--mc-shell-text-muted);
  cursor: default;
}

.mc-shell__avatar-menu-item--danger {
  color: var(--mc-shell-danger);
}

.mc-shell__avatar-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background-color: var(--mc-shell-avatar-badge-bg);
  color: var(--mc-shell-avatar-badge-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.mc-shell__avatar-image {
  width: 26px;
  height: 26px;
  border-radius: 999px;
  object-fit: cover;
  display: block;
}

.mc-icon {
  width: 16px;
  height: 16px;
  opacity: 0.9;
}

body.mc-shell-page[data-mc-shell-appearance="dark"] .mc-shell .mc-icon,
body.mc-shell-page[data-mc-shell-appearance="dark"] .mc-shell .mc-shell__toggle-icon,
body.myron-site-page--authenticated[data-mc-shell-appearance="dark"] .mc-public-shell .mc-icon {
  filter: invert(1) brightness(1.12);
}

.mc-icon--handle {
  width: 14px;
  height: 14px;
  opacity: 0.55;
}

.mc-icon--lead {
  opacity: 0.72;
}

.mc-shell__toggle-icon--expand {
  display: none;
}

.mc-shell__frame {
  min-width: 0;
  max-width: 100%;
  display: grid;
  grid-template-columns: minmax(248px, 280px) minmax(0, 1fr);
  min-height: calc(100vh - var(--mc-shell-bar-height));
  align-items: stretch;
}

.mc-rail {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 16px 20px;
  background-color: var(--mc-shell-surface);
  border-right: 1px solid var(--mc-shell-border);
  position: sticky;
  top: var(--mc-shell-bar-height);
  height: calc(100vh - var(--mc-shell-bar-height));
  min-height: calc(100vh - var(--mc-shell-bar-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.mc-rail__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 8px 0;
}

.mc-rail__meta {
  font-size: 12px;
  color: var(--mc-shell-text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.mc-shell__toggle--rail {
  border-radius: 2px;
}

.mc-rail__groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.mc-rail-group {
  border-top: 1px solid var(--mc-shell-border);
  padding-top: 14px;
}

.mc-rail-group:first-child {
  border-top: none;
  padding-top: 0;
}

.mc-rail-group--dragging {
  opacity: 0.42;
}

.mc-rail-group__header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.mc-rail-group__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mc-rail-group__body--nested {
  gap: 12px;
}

.mc-rail-branch {
  display: grid;
  gap: 8px;
}

.mc-rail-branch__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 34px;
  padding: 0 10px 0 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  background: transparent;
  color: var(--mc-shell-text);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-rail-branch__toggle:hover {
  background-color: var(--mc-shell-surface-soft);
  border-color: var(--mc-shell-border);
}

.mc-rail-branch__title {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--mc-shell-text);
}

.mc-rail-branch__toggle-icon {
  width: 14px;
  height: 14px;
  opacity: 0.68;
  transition: transform 140ms ease;
}

.mc-rail-branch__toggle[aria-expanded="true"] .mc-rail-branch__toggle-icon {
  transform: rotate(90deg);
}

.mc-rail-branch--collapsed .mc-rail-subnav {
  display: none;
}

.mc-rail-subnav {
  display: grid;
  gap: 2px;
  margin-left: 12px;
  padding-left: 12px;
  border-left: 1px solid var(--mc-shell-border);
}

.mc-rail-subnav__link {
  display: flex;
  align-items: center;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--mc-shell-text-muted);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.3;
}

.mc-rail-subnav__link:hover {
  color: var(--mc-shell-text);
  background-color: var(--mc-shell-surface-soft);
  border-color: var(--mc-shell-border);
}

.mc-rail-subnav__link--active {
  color: var(--mc-shell-active);
  background-color: var(--mc-shell-active-surface);
  border-color: var(--mc-shell-border);
  font-weight: 600;
}

.mc-rail-subnav__link--disabled {
  color: var(--mc-shell-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.mc-rail-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--mc-shell-text);
  text-decoration: none;
  font-size: 14px;
  line-height: 1.3;
}

.mc-rail-link:hover {
  background-color: var(--mc-shell-surface-soft);
  border-color: var(--mc-shell-border);
}

.mc-rail-link--active {
  background-color: var(--mc-shell-active-surface);
  border-color: var(--mc-shell-border);
  color: var(--mc-shell-active);
  font-weight: 600;
}

.mc-rail-link--disabled {
  color: var(--mc-shell-text-muted);
  opacity: 0.55;
  cursor: not-allowed;
}

.mc-rail-link__label {
  white-space: nowrap;
}

.mc-rail-group__jump {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 2px;
  color: var(--mc-shell-text);
  text-decoration: none;
}

.mc-rail-group__jump:hover {
  background-color: var(--mc-shell-surface-soft);
  border-color: var(--mc-shell-border);
}

.mc-rail-group__jump--active {
  background-color: var(--mc-shell-active-surface);
  border-color: var(--mc-shell-border);
  color: var(--mc-shell-active);
}

.mc-workspace {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-lg);
  padding: var(--myron-space-lg);
  background-color: var(--myron-color-bg);
  color: var(--myron-color-text);
}

.mc-workspace__header {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-s1_5);
}

.mc-workspace__header--auth {
  padding: var(--myron-space-none) var(--myron-space-none) var(--myron-space-lg);
  border: none;
}

.mc-workspace__title-row {
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-workspace__title-row--actions {
  align-items: center;
}

.mc-workspace__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1_5);
}

.mc-workspace__title {
  margin: 0;
  font-size: var(--myron-typography-size-3xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
}

.mc-workspace__subtitle {
  margin: 0;
  max-width: var(--myron-layout-container-sm);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
  color: var(--myron-color-text-muted);
}

.mc-workspace > .mc-workspace__header:not(.mc-workspace__header--auth) > .mc-workspace__subtitle {
  max-width: none;
}

.mc-workspace__tabs {
  gap: var(--myron-space-lg);
  flex-wrap: wrap;
  padding-bottom: 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-workspace__tab {
  display: inline-flex;
  align-items: center;
  min-height: var(--myron-size-control-md);
  padding: var(--myron-space-none) var(--myron-space-none) var(--myron-space-s1_5);
  border: none;
  border-bottom: var(--myron-border-thin) solid transparent;
  border-radius: 0;
  color: var(--myron-color-text-muted);
  text-decoration: none;
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  background-color: transparent;
}

.mc-workspace__tab:hover {
  color: var(--myron-color-text);
  border-bottom-color: var(--myron-color-border);
}

.mc-workspace__tab--active {
  color: var(--myron-color-accent);
  border-bottom-color: var(--myron-color-accent);
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-page-canvas {
  min-width: 0;
  max-width: 100%;
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
  border: none;
}

.mc-page-canvas--site {
  padding: var(--myron-space-xl) var(--myron-layout-gutter-lg) var(--myron-space-2xl);
}

.mc-page-canvas .sg-main {
  min-width: 0;
  width: 100%;
  max-width: none;
  padding: 0;
}

.mc-page-canvas .sg-section:first-child {
  margin-top: 0;
}

.mc-dashboard {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-dashboard__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

.mc-dashboard__tabs .sg-pill {
  color: var(--myron-color-text-muted);
  text-decoration: none;
}

.mc-dashboard__tabs .sg-pill:hover,
.mc-dashboard__tabs .sg-pill:focus-visible {
  color: var(--myron-color-text);
}

.mc-dashboard__tabs .sg-pill.sg-pill--active,
.mc-dashboard__tabs .sg-pill.sg-pill--active:hover,
.mc-dashboard__tabs .sg-pill.sg-pill--active:focus-visible,
.mc-dashboard__tabs .sg-pill[aria-selected="true"],
.mc-dashboard__tabs .sg-pill[aria-selected="true"]:hover,
.mc-dashboard__tabs .sg-pill[aria-selected="true"]:focus-visible {
  color: var(--myron-color-accent-text);
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

.mc-dashboard__tab-panel {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-dashboard__tab-panel[hidden] {
  display: none;
}

.mc-dashboard__grid {
  display: grid;
  gap: var(--myron-space-md);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.mc-dashboard__grid--administration {
  grid-template-columns: 1fr;
}

@media (min-width: 900px) {
  .mc-dashboard__grid--administration {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1200px) {
  .mc-dashboard__grid--administration {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .mc-dashboard__grid--administration > * {
    grid-column: span 1;
  }

  .mc-dashboard__grid--administration > :nth-child(4) {
    grid-column: 1 / span 2;
    grid-row: 2;
  }

  .mc-dashboard__grid--administration > :nth-child(5) {
    grid-column: 4;
    grid-row: 1;
  }

  .mc-dashboard__grid--administration > .mc-dashboard-ai-panel {
    grid-column: 3 / span 2;
    grid-row: 2;
  }
}

@media (max-width: 1199.98px) {
  .mc-dashboard__grid--administration > .mc-dashboard-ai-panel {
    grid-column: 1 / -1;
  }
}

.mc-dashboard-stat {
  min-width: 0;
  min-height: 176px;
  justify-content: space-between;
}

.mc-dashboard-stat__value {
  display: block;
  font-size: var(--myron-typography-size-3xl);
  line-height: var(--myron-typography-line-tight);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
}

.mc-dashboard-stat__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  align-items: center;
}

.mc-dashboard-list {
  display: grid;
  gap: var(--myron-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-dashboard-list__item {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  min-width: 0;
  padding-block: var(--myron-space-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-dashboard-list__item:last-child {
  border-bottom: none;
}

.mc-dashboard-list__label,
.mc-dashboard-list__value {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mc-dashboard-list__label {
  color: var(--myron-color-text);
}

.mc-dashboard-list__value {
  color: var(--myron-color-text-muted);
  text-align: right;
}

.mc-dashboard-ai-panel {
  border-left: 4px solid var(--myron-color-accent);
}

.mc-dashboard-ai-panel--security {
  border-left-color: var(--myron-color-danger);
}

.mc-dashboard-tips {
  display: grid;
  gap: var(--myron-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-dashboard-tip {
  display: grid;
  gap: var(--myron-space-xs);
  padding-block: var(--myron-space-xs);
}

.mc-dashboard-tip__title {
  margin: 0;
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.mc-dashboard-tip__summary {
  margin: 0;
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
  color: var(--myron-color-text-muted);
}

.mc-dashboard-personal__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-md);
  width: 100%;
}

.mc-dashboard-personal__col {
  display: grid;
  align-content: start;
  gap: var(--myron-space-md);
  min-width: 0;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
}

.mc-dashboard-personal__col-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-dashboard-personal__title,
.mc-dashboard-personal__subtitle {
  margin: 0;
  color: var(--myron-color-text);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: 0;
}

.mc-dashboard-personal__title {
  font-size: var(--myron-typography-size-xl);
}

.mc-dashboard-personal__subtitle {
  font-size: var(--myron-typography-size-md);
}

.mc-dashboard-personal__form {
  gap: var(--myron-space-sm);
}

.mc-dashboard-personal__section {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
}

.mc-dashboard-personal__divider {
  height: 1px;
  background: var(--myron-color-border);
}

.mc-dashboard-personal-list {
  display: grid;
  gap: var(--myron-space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mc-dashboard-personal-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  min-width: 0;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface-alt);
}

.mc-dashboard-personal-list__label,
.mc-dashboard-personal-list__meta,
.mc-dashboard-personal-list__stack {
  min-width: 0;
}

.mc-dashboard-personal-list__stack {
  display: grid;
  gap: 2px;
}

.mc-dashboard-personal-list__label {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  overflow-wrap: anywhere;
  color: var(--myron-color-text);
}

.mc-dashboard-personal-list__meta,
.mc-dashboard-personal-list__empty {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
}

.mc-dashboard-personal-list__empty {
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
}

.mc-dashboard-personal-list__caret {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  cursor: pointer;
}

.mc-dashboard-personal-list__caret:hover,
.mc-dashboard-personal-list__caret:focus-visible {
  background: var(--myron-color-surface-alt);
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.mc-dashboard-personal-list__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--myron-color-danger);
}

.mc-dashboard-personal-list__details {
  width: 100%;
  min-width: 0;
}

.mc-dashboard-personal-list__details summary {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: var(--myron-space-sm);
  cursor: pointer;
}

.mc-dashboard-personal-list__details p {
  margin: var(--myron-space-sm) 0;
  color: var(--myron-color-text);
  overflow-wrap: anywhere;
}

.mc-dashboard-message-detail {
  display: grid;
  gap: var(--myron-space-sm);
  margin: 0 0 var(--myron-space-md);
}

.mc-dashboard-message-detail div {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: var(--myron-space-sm);
}

.mc-dashboard-message-detail dt {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-dashboard-message-detail dd {
  margin: 0;
  color: var(--myron-color-text);
}

.mc-dashboard-message-detail__body {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 980px) {
  .mc-dashboard-personal__columns {
    grid-template-columns: 1fr;
  }
}

.mc-shell--rail-collapsed .mc-shell__frame {
  grid-template-columns: 72px minmax(0, 1fr);
}

.mc-shell--rail-collapsed .mc-shell__toggle-icon--collapse {
  display: none;
}

.mc-shell--rail-collapsed .mc-shell__toggle-icon--expand {
  display: block;
}

.mc-shell--rail-collapsed .mc-rail {
  padding-inline: 8px;
}

.mc-shell--rail-collapsed .mc-rail__meta,
.mc-shell--rail-collapsed .mc-rail-group__title,
.mc-shell--rail-collapsed .mc-rail-branch__title,
.mc-shell--rail-collapsed .mc-rail-branch__toggle,
.mc-shell--rail-collapsed .mc-rail-link__label,
.mc-shell--rail-collapsed .mc-icon--handle {
  display: none;
}

.mc-shell--rail-collapsed .mc-rail__groups {
  gap: 10px;
}

.mc-shell--rail-collapsed .mc-rail-group {
  border-top: none;
  padding-top: 0;
}

.mc-shell--rail-collapsed .mc-rail-group__header {
  margin-bottom: 0;
  justify-content: center;
}

.mc-shell--rail-collapsed .mc-rail-group__body,
.mc-shell--rail-collapsed .mc-rail-group__body--nested,
.mc-shell--rail-collapsed .mc-rail-subnav {
  display: none;
}

.mc-shell--rail-collapsed .mc-rail-group__jump {
  grid-template-columns: auto;
  justify-content: center;
  width: 44px;
  min-height: 44px;
  padding: 0;
  margin-inline: auto;
}

.sg-reference-layout {
  display: grid;
  grid-template-columns: minmax(calc(var(--myron-layout-container-sm) / 4), calc(var(--myron-layout-container-sm) / 3)) minmax(0, 1fr);
  gap: var(--myron-layout-gutter-lg);
  align-items: start;
}

.sg-reference-nav {
  position: sticky;
  top: var(--myron-space-lg);
  align-self: start;
}

.sg-reference-nav .sg-nav {
  display: grid;
  gap: 2px;
}

.sg-reference-nav .sg-nav__section-label {
  padding: 0;
}

.sg-reference-nav .sg-nav__link {
  padding-inline: 0;
  border-radius: 0;
}

.sg-reference-nav .sg-nav__link:hover {
  background-color: transparent;
  color: var(--myron-color-link);
}

.sg-main--reference {
  min-width: 0;
}

.mc-content-layout {
  display: grid;
  grid-template-columns: minmax(calc(var(--myron-layout-container-sm) / 2), 0.95fr) minmax(0, 1.25fr);
  gap: var(--myron-space-xl);
  align-items: start;
}

.mc-content-column {
  min-width: 0;
}

.mc-page-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-s1_5);
  margin-bottom: var(--myron-size-icon-md);
}

.mc-page-summary__item {
  display: grid;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-s1_5) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-page-summary__label {
  font-size: var(--myron-typography-size-xs);
  line-height: var(--myron-typography-line-tight);
  font-family: var(--myron-typography-font-mono);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--myron-color-text-muted);
}

.mc-page-grid {
  display: grid;
  max-width: 100%;
  margin-block-end: var(--myron-space-xl);
  overflow-x: auto;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-site-setup-matrix__table,
.sg-scale-table,
.sg-prop-table {
  margin-block-end: var(--myron-space-xl);
}

.mc-page-grid__row {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.75fr) minmax(0, 1.15fr);
  gap: var(--myron-space-sm);
  align-items: center;
  min-width: 0;
  padding: var(--myron-space-s1_5) var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-page-grid--pages .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.6fr) minmax(44px, 0.35fr) minmax(44px, 0.42fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 0.6fr) minmax(0, 0.7fr) minmax(0, 0.75fr) minmax(0, 1.15fr);
}

.mc-page-grid__row[hidden] {
  display: none !important;
}

.mc-page-grid__row:first-child {
  border-top: none;
}

.mc-page-grid__row--head {
  background-color: var(--myron-color-surface-alt);
  font-size: var(--myron-typography-size-xs);
  font-family: var(--myron-typography-font-mono);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-normal);
  color: var(--myron-color-text-muted);
}

.mc-page-grid__sort {
  width: 100%;
  min-height: var(--myron-size-control-sm);
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.mc-page-grid__sort:hover,
.mc-page-grid__sort:focus-visible {
  color: var(--myron-color-text);
}

.mc-page-grid__sort::after {
  content: "";
  display: inline-block;
  width: 0.55em;
  margin-left: var(--myron-space-xs);
}

[aria-sort="ascending"] > .mc-page-grid__sort::after {
  content: "↑";
}

[aria-sort="descending"] > .mc-page-grid__sort::after {
  content: "↓";
}

.mc-page-grid__row > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.mc-page-grid__cell {
  min-width: 0;
}

.mc-page-grid__cell--markup,
.mc-page-grid__cell--markdown {
  display: flex;
  align-items: center;
}

.mc-pages-list__markup-download {
  display: inline-grid;
  place-items: center;
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.mc-pages-list__markup-download:hover,
.mc-pages-list__markup-download:focus-visible {
  border-color: var(--myron-color-accent);
  color: var(--myron-color-accent);
}

.mc-pages-list__markup-download:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.mc-page-grid__cell,
.mc-page-grid__row--head > span:not(.mc-page-grid__header-actions) {
  overflow: hidden;
  text-overflow: ellipsis;
}

.mc-page-grid--files .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.75fr) minmax(0, 0.55fr) minmax(0, 1fr) minmax(0, 0.95fr) minmax(0, 0.65fr) minmax(0, 0.75fr) minmax(0, 1.35fr);
}

[data-myron-design-asset-manager="image"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-design-asset-manager="audio"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-content-asset-manager="image"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-content-asset-manager="audio"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-content-asset-manager="document"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-design-document-templates] .mc-page-grid--files .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.85fr) minmax(0, 0.5fr) minmax(0, 0.65fr) minmax(0, 0.75fr) minmax(0, 1.35fr);
}

[data-myron-design-asset-manager="video"] .mc-page-grid--files .mc-page-grid__row,
[data-myron-content-asset-manager="video"] .mc-page-grid--files .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.9fr) minmax(0, 0.65fr) minmax(0, 0.9fr) minmax(0, 1.25fr);
}

.mc-page-grid--users .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.55fr) minmax(0, 1.2fr) minmax(0, 0.9fr) minmax(0, 0.45fr);
}

.mc-page-grid--role-templates .mc-page-grid__row {
  grid-template-columns: minmax(0, 0.65fr) minmax(0, 1.35fr) minmax(0, 1.8fr);
}

.mc-page-grid--role-templates .mc-page-grid__row > *,
.mc-page-grid--users .mc-page-grid__row > * {
  overflow-wrap: normal;
  word-break: normal;
}

.mc-page-grid--role-templates .mc-page-grid__cell,
.mc-page-grid--users .mc-page-grid__cell {
  overflow: visible;
  text-overflow: clip;
}

.mc-page-grid--users .mc-page-grid__cell--email,
.mc-page-grid--users .mc-page-grid__row--head > span:nth-child(2),
.mc-page-grid--users .mc-page-grid__row--head > span:nth-child(4) {
  white-space: nowrap;
}

.mc-page-grid--users .mc-page-grid__link,
.mc-page-grid--users .mc-page-grid__subtle {
  display: block;
}

.mc-page-grid--vcards .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 0.9fr) minmax(0, 0.55fr) minmax(0, 0.55fr) minmax(0, 1fr);
}

.mc-page-grid--categories .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 0.45fr) minmax(0, 0.65fr) minmax(0, 1.25fr);
}

.mc-page-grid--comments .mc-page-grid__row {
  grid-template-columns: 2.75rem minmax(16rem, 1.4fr) minmax(12rem, 1fr) minmax(10rem, 0.75fr) minmax(6rem, 0.55fr) minmax(22rem, 1.2fr);
}

.mc-page-grid--comments .mc-page-grid__cell--actions {
  flex-wrap: nowrap;
}

.mc-page-grid--comments .mc-page-grid__cell--select {
  justify-content: center;
}

.mc-page-grid--comments .mc-page-grid__action-form,
.mc-page-grid--comments .mc-page-grid__cell--actions .sg-button {
  flex: 0 0 auto;
}

.mc-comments-bulk-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: end;
  margin-block-end: var(--myron-space-md);
}

.mc-comments-bulk-actions .sg-field {
  width: min(100%, calc(var(--myron-layout-container-sm) / 2));
}

.mc-comment-detail {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-comment-detail__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--myron-space-md);
  margin: 0;
}

.mc-comment-detail__meta div {
  display: grid;
  gap: var(--myron-space-xs);
}

.mc-comment-detail__meta dt {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
}

.mc-comment-detail__meta dd {
  margin: 0;
}

.mc-comment-detail__body {
  min-height: calc(var(--myron-size-control-lg) * 2);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface-alt);
  line-height: var(--myron-typography-line-normal);
}

@media (max-width: 720px) {
  .mc-comment-detail__meta {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mc-page-grid--dashboard-links {
  margin-block-end: 0;
}

.mc-page-grid--dashboard-links .mc-page-grid__row {
  grid-template-columns: minmax(0, 1.3fr) minmax(90px, 0.45fr) minmax(92px, 0.35fr);
}

.mc-page-grid--dashboard-links .mc-page-grid__cell--actions {
  justify-content: flex-start;
}

[data-page-blog-categories][hidden] {
  display: none;
}

.mc-page-grid--application-updates .mc-page-grid__row {
  grid-template-columns: minmax(120px, 0.55fr) minmax(90px, 0.4fr) minmax(180px, 0.85fr) minmax(420px, 2fr) minmax(280px, 1.25fr);
  min-width: 1120px;
}

.mc-page-grid--application-update-history .mc-page-grid__row {
  grid-template-columns: minmax(220px, 1.3fr) minmax(120px, 0.5fr) minmax(160px, 0.75fr) minmax(160px, 0.75fr);
}

.mc-page-grid--design-systems .mc-page-grid__row {
  grid-template-columns: minmax(240px, 1.15fr) minmax(420px, 2fr) 140px 220px;
  min-width: 980px;
  gap: var(--myron-space-lg);
  padding-block: var(--myron-space-md);
}

.mc-page-grid--design-systems .mc-page-grid__cell--actions {
  flex-wrap: nowrap;
}

.mc-design-system-preview {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-design-system-preview__toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-design-system-preview__modes {
  display: flex;
  gap: var(--myron-space-xs);
}

.mc-design-system-preview__modes .sg-button {
  min-height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
}

.mc-design-system-preview-frame {
  width: min(400px, 100%);
  justify-self: center;
  min-height: 640px;
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-bg);
  color: var(--myron-color-text);
  box-shadow: var(--myron-shadow-md);
}

.mc-design-system-preview-frame .myron-site__masthead {
  position: relative;
  z-index: 1;
  min-height: 48px;
  padding-inline: var(--myron-space-md);
}

.mc-design-system-preview-frame .myron-site__brand-subtitle,
.mc-design-system-preview-frame .myron-site__appearance-toggle,
.mc-design-system-preview-frame .myron-site__nav-toggle {
  display: none;
}

.mc-design-system-preview-frame__canvas {
  background: var(--myron-color-bg);
}

.mc-design-system-preview-frame .myron-public-page {
  min-height: auto;
}

.mc-design-system-preview-frame .myron-public-page__body > .myron-public-component {
  padding-block: var(--myron-space-lg);
}

.mc-design-system-preview-frame .myron-hero-simple__inner,
.mc-design-system-preview-frame .myron-cta-band__inner {
  grid-template-columns: 1fr;
  gap: var(--myron-space-md);
}

.mc-design-system-preview-frame .myron-hero-simple__headline {
  font-size: var(--myron-typography-size-3xl);
  line-height: var(--myron-typography-line-tight);
}

.mc-design-system-preview-frame .myron-public-hero-media {
  display: none;
}

.mc-design-system-preview-frame .myron-cta-band {
  background: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
}

.mc-design-system-preview-frame .myron-cta-band .myron-heading,
.mc-design-system-preview-frame .myron-cta-band .myron-paragraph {
  color: inherit;
}

.mc-page-grid--site-type-studio .mc-page-grid__row {
  grid-template-columns: minmax(220px, 1.2fr) 88px minmax(360px, 2fr) 130px 130px 150px;
  min-width: 1220px;
  gap: var(--myron-space-lg);
  padding-block: var(--myron-space-md);
}

.mc-page-grid--site-type-studio .mc-page-grid__cell--actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.mc-page-grid--studio-template-list,
.mc-page-grid--studio-page-list {
  margin-block-start: var(--myron-space-md);
}

.mc-page-grid--studio-template-list .mc-page-grid__row {
  grid-template-columns: minmax(260px, 1.5fr) minmax(260px, 1.2fr) 150px 130px 150px;
  min-width: 1050px;
  gap: var(--myron-space-lg);
  padding-block: var(--myron-space-md);
}

.mc-page-grid--studio-page-list .mc-page-grid__row {
  grid-template-columns: minmax(260px, 1.25fr) minmax(180px, 0.7fr) minmax(340px, 1.5fr) 130px 150px;
  min-width: 1120px;
  gap: var(--myron-space-lg);
  padding-block: var(--myron-space-md);
}

.mc-page-grid--studio-page-list-subtype .mc-page-grid__row {
  grid-template-columns: minmax(240px, 1.15fr) minmax(160px, 0.65fr) minmax(300px, 1.35fr) 110px 130px 150px;
  min-width: 1220px;
}

.mc-page-grid--studio-template-list .mc-page-grid__cell--actions,
.mc-page-grid--studio-page-list .mc-page-grid__cell--actions {
  flex-wrap: nowrap;
  justify-content: flex-end;
}

.mc-vcard-editor,
.mc-vcard-manage {
  max-width: 920px;
}

.mc-vcard-create-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--myron-layout-container-sm)) minmax(calc(var(--myron-layout-container-sm) / 3), calc(var(--myron-layout-container-sm) / 2));
  gap: var(--myron-space-lg);
  align-items: start;
  max-width: calc(var(--myron-layout-container-lg) + var(--myron-space-xl));
}

.mc-vcard-editor--create {
  max-width: var(--myron-layout-container-sm);
}

.mc-vcard-create-result {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.mc-vcard-create-result__empty {
  min-height: calc(var(--myron-layout-container-sm) / 3);
  display: grid;
  place-items: center;
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  color: var(--myron-color-text-muted);
  text-align: center;
}

.mc-vcard-qr-preview {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  padding-top: var(--myron-space-lg);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-vcard-qr-preview__image {
  width: min(calc(var(--myron-layout-container-sm) / 3), 100%);
  max-width: 100%;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.mc-vcard-qr-preview__image svg {
  display: block;
  width: 100%;
  height: auto;
}

.mc-vcard-qr-preview__actions,
.mc-vcard-result__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

@media (max-width: 960px) {
  .mc-vcard-create-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mc-page-grid__header-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
  min-width: 0;
}

.mc-page-grid__cell--name {
  padding-left: var(--myron-space-none);
}

.mc-page-grid__cell--depth-1 { padding-left: var(--myron-space-sm); }
.mc-page-grid__cell--depth-2 { padding-left: calc(var(--myron-space-sm) * 2); }
.mc-page-grid__cell--depth-3 { padding-left: calc(var(--myron-space-sm) * 3); }
.mc-page-grid__cell--depth-4 { padding-left: calc(var(--myron-space-sm) * 4); }
.mc-page-grid__cell--depth-5 { padding-left: calc(var(--myron-space-sm) * 5); }
.mc-page-grid__cell--depth-6 { padding-left: calc(var(--myron-space-sm) * 6); }

.mc-page-grid__name {
  font-weight: 600;
}

.mc-page-grid__cell--actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

[data-myron-design-asset-manager] .mc-page-grid__cell--actions,
[data-myron-content-asset-manager] .mc-page-grid__cell--actions,
[data-myron-design-document-templates] .mc-page-grid__cell--actions {
  flex-wrap: nowrap;
  overflow: visible;
  white-space: nowrap;
}

[data-myron-design-asset-manager] .mc-page-grid__cell--actions .sg-button,
[data-myron-content-asset-manager] .mc-page-grid__cell--actions .sg-button,
[data-myron-design-document-templates] .mc-page-grid__cell--actions .sg-button {
  flex: 0 0 auto;
}

.mc-page-grid__action-form {
  display: inline-flex;
  margin: 0;
}

.mc-page-grid__status-line {
  display: inline-block;
  margin-inline-end: var(--myron-space-md);
}

.mc-page-grid__muted {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-page-grid__meta-stack {
  display: grid;
  gap: var(--myron-space-xs);
}

.mc-page-grid__subtle {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-page-grid__preview {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-files-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--myron-space-lg);
  align-items: start;
}

.mc-files-layout--sheet-open {
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--myron-layout-container-sm) / 2), calc(var(--myron-layout-container-sm) / 2 + var(--myron-space-s7)));
}

.mc-files-upload,
.mc-asset-upload {
  margin-bottom: var(--myron-space-lg);
}

.mc-asset-upload--compact {
  max-width: min(100%, var(--myron-layout-container-lg));
}

.mc-asset-upload--compact .sg-field__control--textarea {
  min-height: calc(var(--myron-size-control-lg) * 1.75);
}

.mc-asset-upload__section {
  min-width: 0;
}

.mc-asset-upload__actions {
  align-self: end;
}

.mc-asset-manager-tabs {
  margin-bottom: var(--myron-space-lg);
}

@media (max-width: 900px) {
  .mc-asset-upload--compact .mc-admin-form__grid,
  .mc-asset-upload--compact .mc-admin-form__grid--three {
    grid-template-columns: 1fr;
  }
}

.mc-side-sheet {
  position: sticky;
  top: var(--myron-space-lg);
  display: grid;
  gap: var(--myron-size-icon-md);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-side-sheet__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-side-sheet__title {
  margin: 0;
  font-size: var(--myron-typography-size-2xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.mc-side-sheet__meta {
  display: grid;
  gap: var(--myron-space-xs);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-side-sheet__preview {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  overflow: hidden;
}

.mc-side-sheet__preview-frame {
  width: 100%;
  min-height: calc(var(--myron-layout-container-sm) / 3);
  border: none;
  display: block;
}

.mc-side-sheet__preview-image {
  width: 100%;
  display: block;
  object-fit: contain;
  max-height: calc(var(--myron-layout-container-sm) / 2);
}

.mc-side-sheet__preview-media {
  width: 100%;
  display: block;
  max-height: calc(var(--myron-layout-container-sm) / 2);
  background-color: var(--myron-color-text);
}

.mc-side-sheet__preview-generic {
  display: grid;
  place-items: center;
  min-height: calc(var(--myron-layout-container-sm) / 3);
  padding: var(--myron-space-lg);
  color: var(--myron-color-text-muted);
  text-align: center;
}

.mc-side-sheet__url-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--myron-space-sm);
  align-items: center;
}

.mc-side-sheet__url-control {
  width: 100%;
}

.mc-side-sheet__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
}

.mc-media-quality-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-media-quality-bar .sg-button[aria-pressed="true"] {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
}

.mc-side-sheet__danger {
  padding-top: var(--myron-space-sm);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-sidesheet-overlay {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  pointer-events: none;
}

.mc-sidesheet-overlay[hidden] {
  display: none;
}

.myron-dialog-backdrop--page-editor-delete {
  z-index: 1250;
}

.myron-dialog--page-editor-delete {
  z-index: 1260;
}

.mc-sidesheet-overlay[aria-hidden="false"] {
  pointer-events: auto;
}

.mc-sidesheet-overlay__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: color-mix(in srgb, var(--myron-color-text) 28%, transparent);
  cursor: default;
}

.mc-sidesheet-overlay__panel {
  position: relative;
  justify-self: end;
  z-index: 1;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(100vw, calc(var(--myron-layout-container-sm) + var(--myron-space-xl)));
  max-width: 100vw;
  height: 100dvh;
  overflow: hidden;
  border-left: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
  box-shadow: var(--myron-shadow-lg);
}

.mc-sidesheet-overlay--sm .mc-sidesheet-overlay__panel {
  width: min(100vw, calc(var(--myron-layout-container-sm) / 1.35));
}

.mc-sidesheet-overlay--lg .mc-sidesheet-overlay__panel {
  width: min(100vw, calc(var(--myron-layout-container-md) + var(--myron-space-xl)));
}

.mc-sidesheet-overlay__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--myron-space-md);
  align-items: start;
  padding: var(--myron-space-lg);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
}

.mc-sidesheet-overlay__header .mc-sidesheet-overlay__toolbar {
  grid-column: 1 / -1;
  margin: 0 calc(var(--myron-space-lg) * -1) calc(var(--myron-space-lg) * -1);
  position: static;
}

.mc-sidesheet-overlay__heading {
  display: grid;
  gap: var(--myron-space-xs);
  min-width: 0;
}

.mc-sidesheet-overlay__title {
  margin: 0;
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: 0;
}

.mc-sidesheet-overlay__description {
  margin: 0;
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
}

.mc-sidesheet-overlay__close {
  display: inline-grid;
  place-items: center;
  width: var(--myron-size-control-md);
  height: var(--myron-size-control-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  cursor: pointer;
}

.mc-sidesheet-overlay__close:hover {
  background: var(--myron-color-surface-alt);
}

.mc-sidesheet-overlay__close:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.mc-sidesheet-overlay__body {
  min-height: 0;
  overflow: auto;
  padding: var(--myron-space-lg);
}

.mc-shell--sidesheet-open {
  overflow: hidden;
}

@media (max-width: 720px) {
  .mc-sidesheet-overlay__panel,
  .mc-sidesheet-overlay--sm .mc-sidesheet-overlay__panel,
  .mc-sidesheet-overlay--lg .mc-sidesheet-overlay__panel {
    width: 100vw;
  }
}

.mc-users-header-note {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-users-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--myron-space-lg);
  align-items: start;
}

.mc-users-layout--sheet-open {
  grid-template-columns: minmax(0, 1fr) minmax(calc(var(--myron-layout-container-sm) / 2), calc(var(--myron-layout-container-sm) / 2 + var(--myron-space-s7)));
}

.mc-users-layout__main {
  min-width: 0;
}

.mc-page-grid__row--active {
  background-color: var(--myron-color-surface-alt);
}

.mc-page-grid__link {
  color: var(--myron-color-text);
  font-weight: 600;
  text-decoration: none;
}

.mc-page-grid__link:hover {
  text-decoration: underline;
}

.mc-page-grid__row--pending-save {
  background-color: var(--myron-color-surface-alt);
}

.mc-context-form {
  display: grid;
  gap: var(--myron-space-xs);
}

.mc-context-form__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-checkbox--compact {
  min-height: var(--myron-size-control-sm);
  padding: 0 var(--myron-space-sm);
}

.mc-user-access-list,
.mc-profile-layout {
  display: grid;
  gap: var(--myron-size-icon-md);
}

.mc-user-access-card,
.mc-profile-panel,
.mc-registration-policy {
  padding: var(--myron-size-icon-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-user-access-card {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-user-access-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--myron-space-md);
}

.mc-user-access-card__title,
.mc-profile-hero__title {
  margin: 0;
  font-size: var(--myron-typography-size-2xl);
  line-height: var(--myron-typography-line-tight);
  letter-spacing: var(--myron-typography-tracking-tight);
}

.mc-user-access-card__meta,
.mc-profile-hero__meta {
  margin: var(--myron-space-xs) var(--myron-space-none) var(--myron-space-none);
  color: var(--myron-color-text-muted);
}

.mc-user-access-card__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1_5);
}

.mc-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-sm);
  min-height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-s1_5);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
}

.mc-user-access-card__actions,
.mc-registration-policy__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1_5);
  align-items: center;
}

.mc-domain-list,
.mc-profile-social-grid {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-domain-list__control {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--myron-space-sm);
}

.mc-domain-list__actions {
  display: flex;
  justify-content: flex-end;
}

.mc-profile-layout {
  grid-template-columns: minmax(0, 1.25fr) minmax(calc(var(--myron-layout-container-sm) / 2), 0.85fr);
  align-items: start;
}

.mc-user-sheet-summary {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
}

.mc-user-sheet-summary__avatar {
  flex: 0 0 auto;
}

.mc-user-sheet-summary__meta {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-profile-hero {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  margin-bottom: var(--myron-space-lg);
}

.mc-profile-hero__avatar {
  width: var(--myron-space-s9);
  height: var(--myron-space-s9);
  border-radius: var(--myron-radius-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  background-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
}

.mc-profile-hero__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mc-editor-shell {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-editor-toolbar {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-md);
  align-items: center;
  flex-wrap: wrap;
}

.mc-editor-toolbar__summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-s1_5);
}

.mc-editor-toolbar__meta {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-editor-toolbar__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-s1_5);
}

.mc-editor-toolbar__breakpoint {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-editor-toolbar__breakpoint .sg-button {
  min-height: var(--myron-size-control-md);
  border-color: transparent;
  box-shadow: none;
}

.mc-editor-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(calc(var(--myron-layout-container-sm) / 2), 0.9fr);
  gap: var(--myron-space-lg);
  align-items: start;
}

.mc-editor-viewer {
  overflow: hidden;
}

.mc-editor-viewer__canvas {
  min-height: 640px;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-bg);
}

.mc-editor-section-tree {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-editor-section-surface {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-editor-section-surface--visual {
  overflow: hidden;
}

.mc-editor-visual-canvas__note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-s1_5);
}

.mc-editor-visual-canvas {
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-bg);
}

.mc-editor-visual-canvas [data-myron-editor-section],
[data-mc-visual-editor-canvas] [data-myron-editor-section] {
  position: relative;
  cursor: pointer;
}

.mc-editor-visual-canvas [data-myron-editor-section]:hover,
[data-mc-visual-editor-canvas] [data-myron-editor-section]:hover {
  outline: var(--myron-border-thin) solid var(--myron-color-focus);
  outline-offset: calc(var(--myron-border-thin) * -1);
}

.mc-editor-visual-canvas [data-myron-edit-slot],
[data-mc-visual-editor-canvas] [data-myron-edit-slot] {
  scroll-margin-top: var(--myron-space-lg);
}

[data-mc-visual-section-panel][hidden],
[data-mc-visual-section-empty][hidden] {
  display: none !important;
}

.mc-editor-section-node {
  display: grid;
  gap: var(--myron-space-md);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
}

.mc-editor-section-node__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-editor-section-node__badges {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--myron-space-xs);
}

.mc-editor-section-node__title {
  margin: 0;
  font-size: var(--myron-typography-size-lg);
}

.mc-template-section-composition__item[draggable="true"] {
  cursor: grab;
}

.mc-template-section-composition__item[draggable="true"]:active {
  cursor: grabbing;
}

.mc-template-section-composition__item.is-dragging {
  opacity: 0.52;
  outline: var(--myron-border-thin) solid var(--myron-color-focus);
}

.mc-template-section-picker {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-template-section-picker__groups {
  display: grid;
  gap: var(--myron-space-md);
  max-height: 28rem;
  overflow: auto;
  padding-right: var(--myron-space-xs);
}

.mc-template-section-picker__rows {
  display: grid;
  gap: var(--myron-space-xs);
}

.mc-template-section-picker__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: var(--myron-space-sm);
  align-items: center;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
}

.mc-template-section-picker__row > span:nth-of-type(1) {
  display: grid;
  min-width: 0;
  gap: var(--myron-space-xs);
}

.mc-template-section-picker__row.is-disabled {
  opacity: 0.62;
}

.sg-section__title--sm {
  font-size: var(--myron-typography-size-xl);
}

.mc-editor-assignment-group {
  margin-top: calc(var(--myron-space-lg) + var(--myron-space-xs));
}

.mc-editor-menu-grid {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-editor-menu-card {
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
}

.mc-editor-danger-zone {
  margin-top: var(--myron-space-lg);
}

.mc-menu-layout {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-menu-screen {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-menu-tabs {
  display: flex;
  gap: 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-menu-tab {
  display: inline-flex;
  align-items: center;
  min-height: calc(var(--myron-size-control-lg) + var(--myron-space-xs));
  padding: var(--myron-space-none) var(--myron-size-icon-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-bottom: 0;
  background: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  text-decoration: none;
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-menu-tab + .mc-menu-tab {
  margin-left: var(--myron-space-sm);
}

.mc-menu-tab--active {
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.mc-menu-selector {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-menu-selector__form {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--myron-space-md);
  flex: 1 1 calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 2));
}

.mc-menu-selector__field {
  min-width: min(calc(var(--myron-layout-container-sm) / 2 + var(--myron-space-s7)), 100%);
  flex: 1 1 calc(var(--myron-layout-container-sm) / 2);
}

.mc-menu-selector__create-link {
  color: var(--myron-color-link);
  text-decoration: none;
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-menu-panel__header {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-md);
  align-items: center;
}

.mc-menu-add-form {
  margin-bottom: var(--myron-space-lg);
}

.mc-menu-workbench {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(calc(var(--myron-layout-container-sm) / 2), 0.9fr);
  gap: var(--myron-space-lg);
  align-items: start;
}

.mc-menu-tree-panel,
.mc-menu-browser-panel {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-menu-tree-panel__header,
.mc-menu-browser-panel__header {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-md);
  align-items: start;
}

.mc-menu-tree {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-menu-empty-state {
  padding: var(--myron-size-icon-md);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  background: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
}

.mc-menu-node {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-menu-node__row {
  display: flex;
  justify-content: space-between;
  gap: var(--myron-space-md);
  align-items: center;
  padding: var(--myron-space-s1_5) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface);
  cursor: move;
}

.mc-menu-node__row--depth-1 { padding-left: calc(var(--myron-space-md) + var(--myron-space-md)); }
.mc-menu-node__row--depth-2 { padding-left: calc(var(--myron-space-md) + (var(--myron-space-md) * 2)); }
.mc-menu-node__row--depth-3 { padding-left: calc(var(--myron-space-md) + (var(--myron-space-md) * 3)); }
.mc-menu-node__row--depth-4 { padding-left: calc(var(--myron-space-md) + (var(--myron-space-md) * 4)); }
.mc-menu-node__row--depth-5 { padding-left: calc(var(--myron-space-md) + (var(--myron-space-md) * 5)); }
.mc-menu-node__row--depth-6 { padding-left: calc(var(--myron-space-md) + (var(--myron-space-md) * 6)); }

.mc-menu-node__row--dragging {
  opacity: 0.5;
}

.mc-menu-node__main {
  display: flex;
  align-items: flex-start;
  gap: var(--myron-space-s1_5);
  min-width: 0;
}

.mc-menu-node__handle {
  color: var(--myron-color-text-muted);
  line-height: 1;
}

.mc-menu-node__content {
  display: grid;
  gap: var(--myron-space-xs);
  min-width: 0;
}

.mc-menu-node__title {
  font-size: var(--myron-typography-size-lg);
}

.mc-menu-node__context {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-menu-node__meta {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-menu-node__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
}

.mc-menu-drop-target {
  padding: var(--myron-space-sm) var(--myron-space-s1_5);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
}

.mc-menu-drop-target--active {
  border-color: var(--myron-color-link);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-link);
}

.mc-menu-browser {
  display: grid;
  gap: var(--myron-space-md);
  padding: var(--myron-size-icon-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
}

.mc-menu-browser__tree,
.mc-menu-browser__results {
  display: grid;
  gap: var(--myron-space-s1_5);
}

.mc-menu-browser__tree[hidden],
.mc-menu-browser__results[hidden],
.mc-menu-browser__empty[hidden] {
  display: none;
}

.mc-menu-browser__empty {
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  color: var(--myron-color-text-muted);
}

.mc-menu-browser-branch {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface-alt);
}

.mc-menu-browser-branch__summary {
  display: grid;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-s1_5) var(--myron-space-md);
  cursor: pointer;
  list-style: none;
}

.mc-menu-browser-branch__summary::-webkit-details-marker {
  display: none;
}

.mc-menu-browser-branch__title {
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-menu-browser-branch__meta,
.mc-menu-browser-row__meta {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-menu-browser-branch__body {
  display: grid;
  gap: var(--myron-space-s1_5);
  padding: var(--myron-space-none) var(--myron-space-md) var(--myron-space-md);
}

.mc-menu-browser-tree__children {
  display: grid;
  gap: var(--myron-space-s1_5);
  padding-left: var(--myron-space-md);
  border-left: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-menu-browser-row {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: var(--myron-space-md);
  padding: var(--myron-space-s1_5) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface-alt);
}

.mc-menu-browser-row__title {
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-menu-browser__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--myron-space-sm);
  flex: 0 0 auto;
}

.mc-mail-setup-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-s1_5);
}

.mc-auth-layout {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--myron-space-2xl) var(--myron-space-lg);
}

.myron-auth-form--standard {
  max-width: calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 2) - var(--myron-space-s5));
}

.myron-auth-form--wide {
  max-width: calc(var(--myron-layout-container-sm) - (var(--myron-space-s10) * 2));
}

.mc-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 960px) {
  .mc-shell__utility {
    padding: 12px 16px;
  }

  .mc-shell__frame {
    grid-template-columns: 1fr;
  }

  .mc-rail {
    position: fixed;
    top: 65px;
    left: 0;
    bottom: 0;
    width: min(280px, 82vw);
    max-height: none;
    transform: translateX(-100%);
    transition: transform 160ms ease;
    z-index: 20;
    box-shadow: var(--mc-shell-shadow);
  }

  .mc-shell-page.mc-shell--rail-open .mc-rail {
    transform: translateX(0);
  }

  .mc-shell-page.mc-shell--rail-collapsed .mc-rail {
    transform: translateX(-100%);
  }

  .mc-workspace {
    padding: var(--myron-size-icon-md) var(--myron-space-md) calc(var(--myron-space-lg) + var(--myron-space-xs));
  }

  .mc-page-canvas--site {
    padding: var(--myron-space-lg) var(--myron-size-icon-md) var(--myron-space-xl);
  }

  .mc-content-layout,
  .mc-page-summary,
  .mc-mail-setup-summary,
  .mc-editor-layout,
  .mc-files-layout--sheet-open,
  .mc-profile-layout,
  .mc-menu-workbench {
    grid-template-columns: 1fr;
  }

  .mc-page-grid__row {
    grid-template-columns: 1fr;
    gap: var(--myron-space-sm);
  }

  .mc-editor-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .mc-menu-node__row,
  .mc-menu-browser-row {
    flex-direction: column;
    align-items: stretch;
  }

  .mc-menu-selector__form {
    flex-direction: column;
    align-items: stretch;
  }

  .sg-reference-layout {
    grid-template-columns: 1fr;
    gap: var(--myron-space-lg);
  }

  .sg-reference-nav {
    position: static;
  }
}

@media (max-width: 640px) {
  .mc-workspace__title {
    font-size: var(--myron-typography-size-2xl);
  }

  .mc-shell__utility {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 8px;
  }

  .mc-shell__system-brand {
    font-size: 15px;
  }

  .mc-shell__context-action {
    min-height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  .mc-shell__utility-actions {
    gap: 6px;
  }

  .mc-shell__avatar {
    padding-right: 6px;
  }

  .mc-public-shell__manage span {
    display: none;
  }
}

/**
 * MyronCMS — Style Guide Shell
 * Shell UI only — not a governed component.
 * Uses --myron-* vars throughout.
 * Exception: sg-badge tint colors use direct hex values because
 * the token system has no tint/alpha variants in v1.
 */


/* ================================================================
   Layout shell
   ================================================================ */

.sg-layout {
  display: grid;
  grid-template-columns: 1fr;
  min-height: 100vh;
}

.sg-sidebar {
  position: static;
  height: auto;
  overflow-y: visible;
  background-color: var(--myron-color-surface-alt);
  border-right: none;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  padding: var(--myron-space-lg) var(--myron-space-md);
}

.sg-sidebar__brand {
  margin: 0 0 var(--myron-space-lg);
}

.sg-sidebar__product {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-md);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  display: block;
  margin: 0;
  line-height: var(--myron-typography-line-tight);
}

.sg-sidebar__meta {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  display: block;
  margin-top: var(--myron-space-xs);
  line-height: var(--myron-typography-line-normal);
}

.sg-sidebar__meta + .sg-sidebar__meta {
  margin-top: 0;
}

.sg-main {
  padding: var(--myron-space-lg) var(--myron-space-md);
  max-width: var(--myron-layout-container-md);
}


/* ================================================================
   Navigation
   ================================================================ */

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

.sg-nav__item {
  margin-bottom: 2px;
}

.sg-nav__section-label {
  display: block;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
  padding: 0 var(--myron-space-sm);
  margin: var(--myron-space-md) 0 var(--myron-space-xs);
}

.sg-nav__link {
  display: block;
  padding: var(--myron-space-xs) var(--myron-space-sm);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
  text-decoration: none;
  border-radius: var(--myron-radius-sm);
  transition: background-color var(--myron-motion-duration-fast) var(--myron-motion-easing-standard);
}

.sg-nav__link:hover {
  background-color: var(--myron-color-border);
}

.sg-nav__link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.sg-page-tabs {
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  padding: 0 var(--myron-space-md);
}

.sg-global-nav {
  display: flex;
  align-items: flex-end;
  gap: var(--myron-space-xs);
  margin: 0 auto;
  max-width: var(--myron-layout-container-md);
}

.sg-global-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: var(--myron-space-xs);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid transparent;
  border-bottom: none;
  border-radius: var(--myron-radius-sm) var(--myron-radius-sm) 0 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text-muted);
  text-decoration: none;
}

.sg-global-nav__link:hover {
  color: var(--myron-color-text);
  background-color: var(--myron-color-border);
}

.sg-global-nav__link--active {
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
  border-color: var(--myron-color-border);
  border-bottom-color: var(--myron-color-surface);
}

.sg-global-nav__link:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

/* Deterministic vanilla placeholder media for primitive image/figure specimens */
.sg-image-placeholder-svg {
  display: block;
  width: 100%;
  height: auto;
}

.sg-image-placeholder-svg__bg {
  fill: var(--myron-color-border);
}

.sg-image-placeholder-svg__text {
  fill: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.sg-image-placeholder-svg--figure .sg-image-placeholder-svg__bg {
  fill: var(--myron-color-surface-alt);
}

.sg-image-placeholder-svg--figure .sg-image-placeholder-svg__text {
  font-size: var(--myron-typography-size-sm);
}

/* Change log page rendering blocks */
.sg-changelog-feed {
  display: grid;
  gap: var(--myron-space-md);
}

.sg-changelog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  margin-bottom: var(--myron-space-sm);
}

.sg-changelog-tag {
  display: inline-flex;
  align-items: center;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 2px var(--myron-space-xs);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  background-color: var(--myron-color-surface-alt);
}

.sg-changelog-section-title {
  margin: var(--myron-space-md) 0 var(--myron-space-xs);
}

.sg-changelog-empty {
  margin: 0;
}


/* ================================================================
   Section structure
   ================================================================ */

.sg-section {
  min-width: 0;
  max-width: 100%;
  margin-bottom: var(--myron-space-2xl);
  padding-bottom: var(--myron-space-2xl);
  border-bottom: var(--myron-border-thin) solid var(--myron-color-border);
}

.sg-section:last-child {
  border-bottom: none;
}

.sg-section__title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
  letter-spacing: var(--myron-typography-tracking-tight);
  margin: 0 0 var(--myron-space-xs);
  line-height: var(--myron-typography-line-tight);
}

.sg-section__subtitle {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  margin: 0 0 var(--myron-space-xl);
  line-height: var(--myron-typography-line-normal);
}

.sg-section__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
  margin: calc(var(--myron-space-sm) * -1) 0 var(--myron-space-lg);
}

.sg-card-grid {
  display: grid;
  gap: var(--myron-space-md);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.sg-card {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface);
}

.sg-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.sg-card__title {
  margin: 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-bold);
  color: var(--myron-color-text);
}

.sg-card__text {
  margin: 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.sg-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

.sg-section > :where(form, .sg-form-grid, .sg-card__actions) + :where(form, .sg-form-grid, .mc-page-grid, .mc-site-setup-matrix, .sg-scale-table, .sg-prop-table),
.sg-section > :where(.mc-page-grid, .mc-site-setup-matrix, .sg-scale-table, .sg-prop-table) + :where(form, .sg-form-grid, .sg-card__actions) {
  margin-block-start: var(--myron-space-lg);
}

.sg-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 2px var(--myron-space-xs);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  text-transform: lowercase;
}

.sg-pill--active {
  color: var(--myron-color-accent-text);
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

.sg-pill--secondary {
  background-color: transparent;
  border-style: dashed;
}

.sg-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  list-style: none;
  margin: 0;
  padding: 0;
}

.mc-license-manager-table-wrap {
  margin-block: var(--myron-space-md) var(--myron-space-xl);
  border-radius: var(--myron-radius-sm);
}

.mc-license-manager-table,
.mc-license-manager-events-table {
  table-layout: fixed;
  min-width: 760px;
}

.mc-license-manager-table {
  min-width: 980px;
}

.mc-license-manager-table__col-module {
  width: 24%;
}

.mc-license-manager-table__col-package {
  width: 18%;
}

.mc-license-manager-table__col-entitlement,
.mc-license-manager-table__col-package-state {
  width: 13%;
}

.mc-license-manager-table__col-renews {
  width: 16%;
}

.mc-license-manager-table__col-actions {
  width: 16%;
}

.mc-license-manager-events-table__col-when {
  width: 18%;
}

.mc-license-manager-events-table__col-key {
  width: 20%;
}

.mc-license-manager-events-table__col-outcome {
  width: 14%;
}

.mc-license-manager-events-table__col-reason {
  width: 48%;
}

.mc-license-manager-table th,
.mc-license-manager-table td,
.mc-license-manager-events-table th,
.mc-license-manager-events-table td {
  vertical-align: top;
  line-height: 1.45;
}

.mc-license-manager-table th,
.mc-license-manager-events-table th {
  white-space: normal;
}

.mc-license-manager-table td,
.mc-license-manager-events-table td {
  min-height: var(--myron-size-control-md);
}

.mc-license-manager-table__module-cell {
  min-width: calc(var(--myron-layout-container-sm) / 3.5);
}

.mc-license-manager-table__package-cell,
.mc-license-manager-table__status-cell,
.mc-license-manager-table__renews-cell {
  min-width: 0;
}

.mc-license-manager-table__primary,
.mc-license-manager-table__secondary,
.mc-license-manager-table__action-state {
  display: block;
}

.mc-license-manager-table__primary {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  overflow-wrap: anywhere;
}

.mc-license-manager-table__secondary,
.mc-license-manager-table__muted,
.mc-license-manager-table__action-state,
.mc-license-manager-table__empty {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-license-manager-table__secondary,
.mc-license-manager-table__code,
.mc-license-manager-table__reason {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.mc-license-manager-table__code {
  display: inline-block;
  max-width: 100%;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  line-height: 1.45;
}

.mc-license-manager-table__actions {
  min-width: calc(var(--myron-size-control-lg) * 2.25);
  white-space: nowrap;
  text-align: right;
}

.mc-license-manager-table__actions .sg-inline-form {
  margin: 0;
  justify-content: flex-end;
}

.mc-license-manager-table__reason {
  max-width: calc(var(--myron-layout-container-sm) / 1.25);
}

@media (max-width: 980px) {
  .mc-license-manager-table,
  .mc-license-manager-events-table {
    min-width: 860px;
  }

  .mc-license-manager-table__actions {
    text-align: left;
  }
}

.mc-inspection-filters {
  display: grid;
  gap: var(--myron-space-md);
  padding-block: var(--myron-space-sm);
}

.mc-filter-group {
  display: grid;
  grid-template-columns: minmax(calc(var(--myron-layout-container-sm) / 4), calc(var(--myron-layout-container-sm) / 3)) minmax(0, 1fr);
  gap: var(--myron-space-sm);
  align-items: start;
}

.mc-filter-group__label {
  min-height: var(--myron-size-control-sm);
  display: inline-flex;
  align-items: center;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  letter-spacing: 0;
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
}

.mc-filter-pill-row {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-filter-pill {
  min-height: var(--myron-size-control-sm);
  cursor: pointer;
  appearance: none;
}

.mc-filter-pill:not(.sg-pill--active):hover {
  border-color: var(--myron-color-text-muted);
  color: var(--myron-color-text);
}

.mc-filter-pill.sg-pill--active:hover,
.mc-filter-pill.sg-pill--active:active,
.mc-filter-pill.sg-pill--active:focus-visible,
.mc-filter-pill[aria-pressed="true"]:hover,
.mc-filter-pill[aria-pressed="true"]:active,
.mc-filter-pill[aria-pressed="true"]:focus-visible {
  color: var(--myron-color-accent-text);
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
}

.mc-filter-pill:focus-visible {
  outline: var(--myron-border-focus) solid var(--myron-color-focus);
  outline-offset: 2px;
}

.mc-filter-pill[hidden] {
  display: none !important;
}

.mc-filter-pill--unavailable[aria-pressed="true"] {
  border-style: dashed;
}

@media (max-width: 760px) {
  .mc-filter-group {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* APO-063 R7: Primitive Explorer side-sheet (rendered inline, not as a modal drawer
   — the surface is a panel above the existing primitives reference gallery so the
   operator can pick a primitive, see its archetype-realized renders, and scroll
   down to the bare specimen list. */
.mc-primitive-explorer {
  margin-bottom: var(--myron-space-xl);
}

.mc-primitive-explorer__header {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  margin-bottom: var(--myron-space-md);
}

.mc-primitive-explorer__picker {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--myron-space-md);
  margin-bottom: var(--myron-space-lg);
}

.mc-primitive-explorer__panel {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  padding: var(--myron-space-lg);
  background-color: var(--myron-color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-lg);
}

.mc-primitive-explorer__panel-header dl {
  margin-top: var(--myron-space-sm);
}

.mc-primitive-explorer__usages {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.mc-primitive-explorer__usage {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  padding: var(--myron-space-md);
  background-color: var(--myron-color-surface);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.mc-primitive-explorer__usage-header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  align-items: center;
}

.mc-primitive-explorer__template-id {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
}

.mc-primitive-explorer__notes {
  font-style: italic;
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
}

.mc-primitive-explorer__render {
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: var(--myron-space-md);
  background-color: var(--myron-color-bg);
  /* Prevent overflow from large hero specimens */
  overflow: hidden;
}

.sg-status {
  margin-top: var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
}

.sg-status--success {
  border-color: var(--myron-color-success-border-soft);
  background-color: var(--myron-color-success-surface-soft);
  color: var(--myron-color-success);
}

.sg-status--error {
  border-color: var(--myron-color-danger-border-soft);
  background-color: var(--myron-color-danger-surface-soft);
  color: var(--myron-color-danger);
}

.mc-component-preview {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-component-preview__frame {
  position: relative;
  isolation: isolate;
  overflow: auto;
  background: var(--myron-color-bg);
}

.mc-component-preview__frame--intrinsic,
.mc-component-preview__frame--control,
.mc-component-preview__frame--narrow,
.mc-component-preview__frame--panel,
.mc-component-preview__frame--toolbar,
.mc-component-preview__frame--grid,
.mc-component-preview__frame--contained-section {
  padding: var(--myron-space-lg);
}

.mc-component-preview__frame--intrinsic {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.mc-component-preview__frame--control,
.mc-component-preview__frame--narrow,
.mc-component-preview__frame--panel {
  display: grid;
  justify-items: start;
}

.mc-component-preview__surface {
  min-width: 0;
}

.mc-component-preview__surface--envelope-intrinsic {
  display: inline-block;
}

.mc-component-preview__surface--envelope-control {
  width: min(100%, calc(var(--myron-size-control-md) * 10));
}

.mc-component-preview__surface--envelope-narrow {
  width: min(100%, var(--myron-layout-container-sm));
}

.mc-component-preview__surface--envelope-panel {
  width: min(100%, var(--myron-layout-container-md));
}

.mc-component-preview__surface--envelope-toolbar,
.mc-component-preview__surface--envelope-grid,
.mc-component-preview__surface--envelope-contained-section,
.mc-component-preview__surface--envelope-full-bleed {
  width: 100%;
}

.mc-component-preview__fallback {
  display: grid;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-component-preview__media-placeholder {
  display: block;
  min-height: 180px;
  border-radius: var(--myron-radius-md);
  background:
    linear-gradient(135deg, var(--myron-color-surface-alt), var(--myron-color-border));
}

.mc-component-preview__field {
  display: grid;
  gap: var(--myron-space-xs);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.mc-component-preview__choice {
  display: inline-flex;
  gap: var(--myron-space-xs);
  align-items: center;
}

.mc-component-preview__field input,
.mc-component-preview__field textarea,
.mc-component-preview__field select {
  width: 100%;
  min-height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  font: inherit;
}

.mc-component-preview__field textarea {
  padding-block: var(--myron-space-sm);
}

.mc-component-preview__overlay-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: min(100%, var(--myron-layout-container-md));
  min-height: 320px;
  padding: var(--myron-space-lg);
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-alt);
}

.mc-component-preview__overlay-stage .myron-dialog-backdrop,
.mc-component-preview__overlay-stage .myron-drawer-backdrop {
  position: absolute;
  inset: var(--myron-space-sm);
  border-radius: var(--myron-radius-md);
}

.mc-component-preview__overlay-stage .myron-dialog {
  position: relative;
  top: auto;
  left: auto;
  width: min(100%, 480px);
  max-height: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
}

.mc-component-preview__overlay-stage .myron-dialog[aria-hidden="false"] {
  transform: none;
}

.mc-component-preview__overlay-stage .myron-drawer {
  position: relative;
  inset: auto;
  width: min(100%, 360px);
  height: auto;
  min-height: 240px;
  transform: none;
}

.mc-component-preview__overlay-stage .myron-drawer--side-right,
.mc-component-preview__overlay-stage .myron-drawer--side-left,
.mc-component-preview__overlay-stage .myron-drawer--side-top,
.mc-component-preview__overlay-stage .myron-drawer--side-bottom,
.mc-component-preview__overlay-stage .myron-drawer[aria-hidden="false"] {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: min(100%, 360px);
  transform: none;
}

.mc-component-preview__overlay-stage .myron-toast-region {
  position: relative;
  inset: auto;
  z-index: var(--myron-z-toast);
  width: min(100%, 360px);
  padding: 0;
  align-items: stretch;
}

.mc-component-taxonomy {
  display: grid;
  gap: var(--myron-space-2xl);
}

.mc-component-filter,
.mc-component-taxonomy-shell {
  position: relative;
  z-index: auto;
}

.mc-component-taxonomy__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  align-items: center;
  margin-bottom: var(--myron-space-lg);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-alt);
}

.mc-component-taxonomy__nav .sg-nav__item {
  margin-bottom: 0;
}

.mc-component-taxonomy__nav .sg-nav__link {
  border: var(--myron-border-hairline) solid transparent;
  background: var(--myron-color-surface);
}

.mc-component-taxonomy__nav .sg-nav__link:hover,
.mc-component-taxonomy__nav .sg-nav__link:focus-visible {
  border-color: var(--myron-color-border);
}

.mc-component-section {
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-component-specimen-list {
  display: grid;
  gap: var(--myron-space-xl);
}

.mc-component-specimen {
  margin-bottom: 0;
}

.mc-component-specimen__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
  justify-content: space-between;
}

.mc-component-specimen__header .sg-subsection__title {
  margin: 0;
}

.mc-template-browser {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-template-browser__tools {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-template-browser__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  align-items: center;
}

.mc-template-browser__preview {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-template-preview__frame {
  width: 100%;
  min-height: 760px;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-template-manager-viewer {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-template-manager-viewer__canvas {
  overflow: hidden;
}

.mc-studio-preview__canvas {
  --studio-breakpoint-sm: 640px;
  display: grid;
  justify-items: stretch;
  align-items: start;
  padding: var(--myron-space-md);
  transition: max-width 160ms ease;
}

.mc-studio-preview__viewport {
  width: 100%;
  max-width: none;
  margin: 0;
  transform: none;
  transform-origin: top center;
  transition: max-width 160ms ease, transform 160ms ease;
}

.mc-studio-preview__viewport[data-breakpoint="desktop"] {
  max-width: none;
  transform: none;
}

.mc-studio-preview__viewport[data-breakpoint="tablet"] {
  max-width: var(--studio-breakpoint-sm);
  margin-right: auto;
  margin-left: auto;
  transform: none;
}

.mc-studio-preview__viewport[data-breakpoint="mobile"] {
  width: 390px;
  max-width: 390px;
  margin-right: auto;
  margin-left: auto;
  transform-origin: top center;
}

.mc-site-type-studio__preview-card {
  gap: var(--myron-space-lg);
}

.mc-site-type-studio__preview {
  max-height: 720px;
  min-height: 420px;
  overflow: auto;
}

.mc-section-render-preview {
  display: grid;
  gap: var(--myron-space-md);
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-section-render-preview > .myron-public-component,
.mc-section-render-preview > .myron-definition-section {
  margin: 0;
}

.mc-template-insert-form {
  display: grid;
  gap: var(--myron-space-md);
  margin-top: var(--myron-space-lg);
  padding-top: var(--myron-space-lg);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-preview-document {
  margin: 0;
  min-height: 100vh;
}

.mc-preview-document__canvas {
  display: grid;
  gap: var(--myron-space-lg);
  padding: var(--myron-layout-gutter-md);
}

.mc-preview-document__header {
  display: grid;
  gap: var(--myron-space-xs);
  max-width: var(--myron-layout-container-lg);
  margin-inline: auto;
  width: 100%;
}

.mc-preview-document__header h1 {
  margin: 0;
  font-size: var(--myron-typography-size-xl);
  line-height: var(--myron-typography-line-tight);
}

.mc-preview-document__eyebrow {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  text-transform: uppercase;
}

.sg-definition-list {
  display: grid;
  gap: var(--myron-space-xs);
  margin: 0;
}

.sg-definition-list__row {
  display: grid;
  grid-template-columns: minmax(72px, 96px) 1fr;
  gap: var(--myron-space-sm);
  align-items: start;
}

.sg-definition-list__row dt,
.sg-definition-list__row dd {
  margin: 0;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  line-height: var(--myron-typography-line-normal);
}

.sg-definition-list__row dt {
  color: var(--myron-color-text-muted);
}

.sg-definition-list__row dd {
  color: var(--myron-color-text);
}

.sg-form-grid {
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--myron-space-md);
}

.mc-admin-form {
  min-width: 0;
  max-width: min(100%, var(--myron-layout-container-sm));
  display: grid;
  gap: var(--myron-space-lg);
}

.mc-admin-form--wide {
  max-width: min(100%, var(--myron-layout-container-lg));
}

.mc-admin-form__section {
  min-width: 0;
  display: grid;
  gap: var(--myron-space-md);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-admin-form__section-header {
  display: grid;
  gap: var(--myron-space-2xs);
}

.mc-admin-form__section-title {
  margin: 0;
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-sm);
  font-weight: 700;
  line-height: var(--myron-typography-line-tight);
}

.mc-admin-form__section-description {
  margin: 0;
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
  line-height: var(--myron-typography-line-normal);
}

.mc-admin-form__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--myron-space-md);
  align-items: start;
}

.mc-admin-form__grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.mc-admin-form__grid--compact {
  gap: var(--myron-space-sm);
}

.mc-admin-form__span-full {
  grid-column: 1 / -1;
}

.mc-admin-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: var(--myron-space-sm);
}

.mc-field-builder {
  gap: var(--myron-space-md);
}

.mc-field-builder__quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-field-builder__rows {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-field-builder__row {
  display: grid;
  grid-template-columns: minmax(8rem, 1fr) minmax(8rem, 1fr) minmax(7rem, 0.75fr) minmax(10rem, 1fr) auto auto auto;
  gap: var(--myron-space-sm);
  align-items: end;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-field-builder__row-actions {
  display: flex;
  align-items: end;
  justify-content: flex-end;
}

.mc-field-builder__advanced {
  margin-top: var(--myron-space-xs);
}

.mc-sidesheet-form {
  min-width: 0;
  display: grid;
  gap: var(--myron-space-md);
}

.mc-sidesheet-form__section {
  min-width: 0;
  display: grid;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-sidesheet-form__grid {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--myron-space-sm);
}

.mc-sidesheet-form__span-full {
  grid-column: 1 / -1;
}

.mc-forms-editor {
  padding-bottom: var(--myron-space-xl);
}

.mc-forms-field-list {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-forms-field-card {
  min-width: 0;
  display: grid;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-forms-field-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-forms-field-card__title {
  margin: 0;
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-tight);
}

.mc-forms-field-card__required {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-xs);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-forms-routing-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-sm);
}

.mc-forms-routing-summary__item {
  min-width: 0;
  display: grid;
  gap: var(--myron-space-2xs);
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-forms-routing-summary__label {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  text-transform: uppercase;
}

.mc-forms-submissions-table td {
  vertical-align: top;
}

.mc-forms-submission-detail {
  margin-top: var(--myron-space-xs);
}

.mc-forms-submission-detail summary {
  color: var(--myron-color-link);
  cursor: pointer;
  font-size: var(--myron-typography-size-sm);
}

.mc-forms-submission-detail__fields {
  display: grid;
  gap: var(--myron-space-xs);
  margin: var(--myron-space-xs) 0 0;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-forms-submission-detail__fields div {
  display: grid;
  grid-template-columns: minmax(6rem, 0.35fr) minmax(0, 1fr);
  gap: var(--myron-space-sm);
}

.mc-forms-submission-detail__fields dt {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.mc-forms-submission-detail__fields dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 760px) {
  .mc-admin-form__grid,
  .mc-admin-form__grid--three,
  .mc-field-builder__row,
  .mc-sidesheet-form__grid {
    grid-template-columns: 1fr;
  }

  .mc-forms-routing-summary,
  .mc-forms-submission-detail__fields div {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1100px) {
  .mc-forms-template-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .mc-forms-template-grid {
    grid-template-columns: 1fr;
  }
}

details.sg-fieldset--collapsible {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 0;
}

details.sg-fieldset--collapsible > summary.sg-fieldset__summary {
  list-style: none;
  padding: var(--myron-space-sm) var(--myron-space-md);
  cursor: pointer;
  font-size: var(--myron-typography-size-sm);
  font-weight: 600;
  color: var(--myron-color-text);
  user-select: none;
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

details.sg-fieldset--collapsible > summary.sg-fieldset__summary::-webkit-details-marker { display: none; }
details.sg-fieldset--collapsible > summary.sg-fieldset__summary::marker { display: none; }

details.sg-fieldset--collapsible > summary.sg-fieldset__summary::before {
  content: "▶";
  font-size: 0.65em;
  display: inline-block;
  transition: transform 0.15s ease;
}

details.sg-fieldset--collapsible[open] > summary.sg-fieldset__summary::before {
  transform: rotate(90deg);
}

details.sg-fieldset--collapsible > .sg-form-grid {
  padding: var(--myron-space-sm) var(--myron-space-md) var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-layout-settings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-md);
}

.mc-site-logo-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
}

.mc-site-setup-matrix {
  --mc-site-setup-page-column: calc(var(--myron-layout-container-sm) / 5);
  --mc-site-setup-type-column: calc(var(--myron-layout-container-sm) / 6);
  min-width: 0;
  max-width: 100%;
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-site-setup-matrix--primary {
  width: 100%;
  max-width: 100%;
}

.mc-site-setup-matrix--subtype {
  --mc-site-setup-type-column: calc(var(--myron-layout-container-sm) / 4);
  width: 100%;
  max-width: 100%;
}

.mc-site-setup-matrix__scroller {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface);
}

.mc-site-setup-matrix__legend {
  display: grid;
  gap: var(--myron-space-none);
  margin: 0;
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  line-height: var(--myron-typography-line-normal);
  list-style-position: inside;
}

.mc-site-setup-matrix__table {
  width: max-content;
  min-width: 100%;
  table-layout: auto;
  border-collapse: collapse;
  font-family: var(--myron-typography-font-sans);
  color: var(--myron-color-text);
}

.mc-site-setup-matrix__table th,
.mc-site-setup-matrix__table td {
  padding: var(--myron-space-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: left;
  vertical-align: top;
}

.mc-site-setup-matrix__table th:first-child {
  width: var(--mc-site-setup-page-column);
  min-width: var(--mc-site-setup-page-column);
}

.mc-site-setup-matrix__table th:not(:first-child),
.mc-site-setup-matrix__table td:not(:first-child) {
  width: var(--mc-site-setup-type-column);
  min-width: var(--mc-site-setup-type-column);
  text-align: center;
}

.mc-site-setup-matrix__table thead th {
  background-color: var(--myron-color-surface-alt);
  font-weight: var(--myron-typography-weight-regular);
}

.mc-site-setup-matrix__table tbody th,
.mc-site-setup-matrix__table tbody td {
  background-color: var(--myron-color-surface);
}

.mc-site-setup-matrix__table tbody th {
  font-weight: var(--myron-typography-weight-semibold);
}

.mc-site-setup-matrix__bundle,
.mc-site-setup-matrix__requirement {
  display: block;
}

.mc-site-setup-matrix__bundle {
  margin-bottom: var(--myron-space-xs);
  font-weight: var(--myron-typography-weight-regular);
  line-height: var(--myron-typography-line-tight);
  overflow-wrap: anywhere;
}

.mc-site-setup-matrix__controls {
  display: grid;
  gap: var(--myron-space-xs);
  align-items: start;
  font-weight: var(--myron-typography-weight-regular);
}

.mc-site-setup-matrix__requirement {
  margin-bottom: var(--myron-space-sm);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.mc-site-setup-matrix__cell {
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--myron-color-text);
}

.mc-site-setup-matrix__cell--suppressed,
.mc-site-setup-matrix__cell--disabled,
.mc-site-setup-matrix__empty {
  color: var(--myron-color-text-muted);
}

.sg-field {
  min-width: 0;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.sg-field--full {
  grid-column: 1 / -1;
}

.sg-field__label {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.sg-field__control {
  width: 100%;
  min-height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.sg-field__control--textarea {
  min-height: 120px;
  padding-top: var(--myron-space-sm);
  padding-bottom: var(--myron-space-sm);
  resize: vertical;
}

.sg-field__control[type="file"] {
  padding-top: var(--myron-space-xs);
  padding-bottom: var(--myron-space-xs);
}

.sg-field__control:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.sg-field__control[multiple],
.sg-field__control[size] {
  min-height: 0;
  padding-block: var(--myron-space-xs);
}

.sg-field__hint {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-field--checkbox .sg-field__checkbox {
  display: flex;
  gap: var(--myron-space-sm);
  align-items: flex-start;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text);
}

.sg-field--checkbox input[type="checkbox"] {
  margin-top: 2px;
}

@media (max-width: 760px) {
  .mc-layout-settings-grid,
  .mc-site-logo-grid {
    grid-template-columns: 1fr;
  }
}

.sg-button,
.sg-button:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--myron-size-control-md);
  padding: 0 var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  text-decoration: none;
}

.sg-button:hover,
.sg-button:active {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
  text-decoration: none;
}

.sg-button:focus-visible {
  outline: var(--myron-focus-ring-width) var(--myron-focus-outline-style) var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset);
}

.sg-button:disabled,
.sg-button[aria-disabled="true"] {
  border-color: var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  cursor: not-allowed;
  opacity: 1;
}

.sg-button--primary,
.sg-button--primary:visited {
  background-color: var(--myron-color-accent);
  border-color: var(--myron-color-accent);
  color: var(--myron-color-accent-text);
}

.sg-button--primary:hover,
.sg-button--primary:active {
  background-color: var(--myron-color-link-hover);
  border-color: var(--myron-color-link-hover);
  color: var(--myron-color-accent-text);
  text-decoration: none;
}

.sg-button--secondary,
.sg-button--secondary:visited {
  background-color: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.sg-button--danger,
.sg-button--danger:visited {
  background-color: var(--myron-color-surface);
  border-color: var(--myron-color-danger-border-soft);
  color: var(--myron-color-danger);
}

.sg-button--danger:hover,
.sg-button--danger:active {
  background-color: var(--myron-color-danger-surface-soft);
  border-color: var(--myron-color-danger);
  color: var(--myron-color-danger);
  text-decoration: none;
}

.sg-button:disabled,
.sg-button:disabled:hover,
.sg-button:disabled:active,
.sg-button[aria-disabled="true"],
.sg-button[aria-disabled="true"]:hover,
.sg-button[aria-disabled="true"]:active {
  border-color: var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  cursor: not-allowed;
  opacity: 1;
  pointer-events: none;
}

.sg-inline-form {
  margin: 0;
}

.sg-inline-note {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.sg-inline-note--favicon {
  display: flex;
  align-items: center;
  gap: var(--myron-space-s1_5);
  flex-wrap: wrap;
}

.sg-inline-note__favicon {
  width: var(--myron-size-control-sm);
  height: var(--myron-size-control-sm);
  object-fit: contain;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  padding: var(--myron-space-xs);
}

.sg-checkbox--spaced {
  margin-top: var(--myron-space-s1_5);
}

.sg-empty-state {
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background-color: var(--myron-color-surface-alt);
}

.sg-empty-state__title {
  margin: 0 0 var(--myron-space-xs);
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.sg-empty-state__text {
  margin: 0;
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.sg-subsection {
  margin-bottom: var(--myron-space-xl);
}

.sg-subsection__title {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  letter-spacing: var(--myron-typography-tracking-wide);
  text-transform: uppercase;
  margin: 0 0 var(--myron-space-md);
  padding-bottom: var(--myron-space-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
}


/* ================================================================
   Specimen containers
   ================================================================ */

.sg-specimen {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
  margin-bottom: var(--myron-space-md);
}

.sg-specimen__label {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  background-color: var(--myron-color-surface-alt);
  padding: var(--myron-space-xs) var(--myron-space-md);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.sg-specimen__canvas {
  padding: var(--myron-space-lg) var(--myron-space-md);
}

.sg-specimen__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  align-items: center;
}

.sg-specimen__stack {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.sg-specimen__col {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  flex: 1;
}


/* ================================================================
   Token reference — color swatches
   ================================================================ */

.sg-color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--myron-space-sm);
}

.sg-swatch {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  overflow: hidden;
}

.sg-swatch__color {
  height: var(--myron-space-s7);
  width: 100%;
  background-color: var(--myron-token-reference-swatch, transparent);
}

.sg-swatch__label {
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-surface);
}

.sg-swatch__name {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-medium);
  color: var(--myron-color-text);
}

.sg-swatch__hex {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-swatch__meta {
  display: block;
  margin-top: 4px;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-token-effects {
  display: grid;
  gap: var(--myron-space-xs);
  margin-top: var(--myron-space-sm);
}

.sg-token-effects__counts,
.sg-token-effects__preview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.sg-token-effects__surface {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 2px var(--myron-space-xs);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-token-effects__empty {
  margin: 0;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}


/* ================================================================
   Token reference — scale rows (space, radius)
   ================================================================ */

.sg-scale-table {
  width: 100%;
  border-collapse: collapse;
}

.sg-scale-table th {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-align: left;
  padding: var(--myron-space-xs) var(--myron-space-sm) var(--myron-space-xs) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.sg-scale-table td {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
  padding: var(--myron-space-xs) var(--myron-space-sm) var(--myron-space-xs) 0;
  vertical-align: middle;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-surface-alt);
}

.sg-scale-bar {
  display: block;
  height: 16px;
  background-color: var(--myron-color-accent);
  border-radius: var(--myron-radius-sm);
  opacity: 0.18;
  min-width: 2px;
}

/* color row in the Token Map keeps the row-style geometry of sg-scale-table
   but renders the swatch at full saturation with a thin token-defined border. */
.sg-scale-table--color td .sg-scale-bar.sg-swatch__color {
  height: 16px;
  width: 100%;
  max-width: 320px;
  opacity: 1;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
}

.sg-scale-muted {
  color: var(--myron-color-text-muted);
}


/* ================================================================
   Token reference — typography specimens
   ================================================================ */

.sg-type-row {
  display: flex;
  align-items: baseline;
  gap: var(--myron-space-lg);
  padding: var(--myron-space-sm) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-surface-alt);
}

.sg-type-row:last-child {
  border-bottom: none;
}

.sg-type-meta {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  min-width: 96px;
  flex-shrink: 0;
}


/* ================================================================
   Token reference — radius, shadow, motion, zIndex
   ================================================================ */

.sg-ref-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--myron-space-md);
}

.sg-ref-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--myron-space-xs);
}

.sg-ref-item__label {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-radius-box {
  width: 64px;
  height: 40px;
  background-color: var(--myron-color-accent);
  opacity: 0.15;
}

.sg-shadow-box {
  width: 80px;
  height: 48px;
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
}

.sg-motion-row {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-xs) 0;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-surface-alt);
}

.sg-zindex-row {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-xs) 0;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-surface-alt);
}

.sg-zindex-row__value {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.sg-zindex-row__key {
  color: var(--myron-color-text-muted);
  min-width: 80px;
}


/* ================================================================
   Badges — geometry compliance markers
   Note: tint colors are direct hex values; token system has no
   tint/alpha variants in v1. This is shell-only UI, not a
   governed component.
   ================================================================ */

.sg-badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  padding: 1px var(--myron-space-xs);
  border-radius: var(--myron-radius-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  white-space: nowrap;
}

.sg-badge--base8 {
  background-color: var(--myron-color-success-surface-soft);
  color: var(--myron-color-success);
  border-color: var(--myron-color-success-border-soft);
}

.sg-badge--halfstep {
  background-color: var(--myron-color-warning-surface-soft);
  color: var(--myron-color-warning);
  border-color: var(--myron-color-warning-border-soft);
}

.sg-badge--exempt {
  background-color: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  border-color: var(--myron-color-border);
}


/* ================================================================
   Structure placeholder content
   ================================================================ */

.sg-placeholder {
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) dashed var(--myron-color-border-strong);
  border-radius: var(--myron-radius-sm);
  padding: var(--myron-space-md);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  text-align: center;
}


/* ================================================================
   State label for input demos
   ================================================================ */

.sg-state-label {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-bottom: var(--myron-space-xs);
}

.sg-input-group {
  margin-bottom: var(--myron-space-md);
}


/* ================================================================
   States section — state pack cards
   ================================================================ */

.sg-state-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--myron-space-md);
}

.sg-state-pack {
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
}

.sg-state-pack__header {
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.sg-state-pack__name {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
}

.sg-state-pack__body {
  padding: var(--myron-space-md);
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.sg-state-pack__desc {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  margin: 0;
  line-height: var(--myron-typography-line-normal);
}

.sg-state-pack__deltas {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.sg-state-pack__delta-label {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  text-transform: uppercase;
  letter-spacing: var(--myron-typography-tracking-wide);
}

.sg-state-pack__delta-row {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-sm);
}

.sg-state-pack__delta-token {
  color: var(--myron-color-accent);
}

.sg-state-pack__delta-applies {
  color: var(--myron-color-text-muted);
}

.sg-state-pack__rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.sg-state-pack__rule {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  padding-left: var(--myron-space-md);
  position: relative;
  line-height: var(--myron-typography-line-normal);
}

.sg-state-pack__rule::before {
  content: "→";
  position: absolute;
  left: 0;
  color: var(--myron-color-border-strong);
}

.sg-state-pack__example {
  padding-top: var(--myron-space-sm);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  display: flex;
  align-items: center;
  gap: var(--myron-space-sm);
  flex-wrap: wrap;
}

.sg-state-pack__example-label {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-state-pack--empty .sg-state-pack__body {
  padding: var(--myron-space-md);
}


/* ================================================================
   Spacer visual indicator
   Note: height uses inline style driven by token value
   ================================================================ */

.sg-spacer-demo {
  display: flex;
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-xs) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-surface-alt);
}

.sg-spacer-demo:last-child {
  border-bottom: none;
}

.sg-spacer-demo__bar {
  background-color: var(--myron-color-accent);
  opacity: 0.18;
  width: 100%;
  border-radius: var(--myron-radius-sm);
}

.sg-spacer-demo__meta {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  min-width: 120px;
  flex-shrink: 0;
}


/* ================================================================
   Stub section — placeholder for future sections
   ================================================================ */

.sg-stub {
  border: var(--myron-border-hairline) dashed var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  padding: var(--myron-space-xl) var(--myron-space-lg);
  text-align: center;
}

.sg-stub__label {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
  display: block;
  margin-bottom: var(--myron-space-xs);
}

.sg-stub__note {
  font-family: var(--myron-typography-font-sans);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin: 0;
}


/* ================================================================
   Table specimen overrides for style guide tables
   (sg-scale-table already defined above — this is for component demos)
   ================================================================ */

.sg-table-specimen {
  width: 100%;
  overflow-x: auto;
}


/* ================================================================
   sg-specimen__canvas--flush
   No padding — for full-bleed pattern demos (header, footer, hero)
   ================================================================ */

.sg-specimen__canvas--flush {
  padding: 0;
  overflow: hidden;
}


/* ================================================================
   sg-label-mono
   Small monospace annotation label above a specimen
   ================================================================ */

.sg-label-mono {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-bottom: var(--myron-space-xs);
}

.sg-feature-grid-gap-label {
  margin: 0;
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}


/* ================================================================
   sg-meta-block
   Meta row showing component level, html tag, token rules
   ================================================================ */

.sg-meta-block {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--myron-space-xs);
  margin-bottom: var(--myron-space-md);
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
}

.sg-meta-block__tag {
  display: inline-block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
  background-color: var(--myron-color-surface);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 2px var(--myron-space-xs);
}

.sg-meta-block__rule {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-meta-block__rule--forbidden {
  color: var(--myron-color-danger);
}

.sg-meta-block__rule--token {
  color: var(--myron-color-text-muted);
}

.sg-annotation {
  margin: var(--myron-space-xs) 0 0;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-normal);
}

.sg-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* ================================================================
   sg-prop-table
   Compact property table for component specs
   ================================================================ */

.sg-prop-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
}

.sg-prop-table th,
.sg-prop-table td {
  text-align: left;
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  vertical-align: top;
}

.sg-prop-table th {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text-muted);
  background-color: var(--myron-color-surface-alt);
}

.sg-prop-table tr:last-child td {
  border-bottom: none;
}

.sg-token-table__meta {
  margin-top: 4px;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-token-table__empty {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-token-table__stack {
  display: grid;
  gap: var(--myron-space-sm);
}

.sg-token-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.sg-token-list__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: 2px var(--myron-space-xs);
  background-color: var(--myron-color-surface-alt);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text);
}


/* ================================================================
   sg-template-diagram
   Slot-map composition diagram for §8 Templates
   ================================================================ */

.sg-template-diagram {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.sg-template-slot {
  border: 1px dashed var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: var(--myron-space-sm) var(--myron-space-md);
  background-color: var(--myron-color-surface-alt);
  display: flex;
  align-items: flex-start;
  gap: var(--myron-space-md);
}

.sg-template-slot__name {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  white-space: nowrap;
  min-width: 120px;
}

.sg-template-slot__allowed {
  color: var(--myron-color-text-muted);
  line-height: var(--myron-typography-line-relaxed);
}

.sg-template-slot--primary {
  background-color: var(--myron-color-surface);
  border-color: var(--myron-color-accent);
}

.sg-template-slot__group {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
  flex: 1;
}

.sg-template-slot__sub {
  border: 1px dashed var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  background-color: var(--myron-color-bg);
  display: flex;
  gap: var(--myron-space-sm);
  align-items: baseline;
}

.sg-template-slot__sub-name {
  font-weight: var(--myron-typography-weight-semibold);
  color: var(--myron-color-text);
  white-space: nowrap;
}

.sg-template-slot__sub-allowed {
  color: var(--myron-color-text-muted);
}

/* ================================================================
   Inline remediation utility promotions (APO-009)
   Shell-only helpers promoted from repeated specimen inline styles.
   ================================================================ */

.sg-u-mono-muted {
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-u-flex-1 {
  flex: 1;
}

.sg-u-w-120 {
  width: 120px;
}

.sg-u-label-mono-sm {
  display: block;
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-bottom: var(--myron-space-sm);
}

.sg-u-swatch-light {
  background-color: var(--myron-color-surface);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
}

.sg-u-swatch-surface-alt {
  background-color: var(--myron-color-surface-alt);
}

.sg-u-swatch-text {
  background-color: var(--myron-color-text);
}

.sg-u-swatch-text-muted {
  background-color: var(--myron-color-text-muted);
}

.sg-u-swatch-border {
  background-color: var(--myron-color-border);
}

.sg-u-swatch-border-strong {
  background-color: var(--myron-color-border-strong);
}

.sg-u-swatch-focus {
  background-color: var(--myron-color-focus);
}

.sg-u-swatch-link {
  background-color: var(--myron-color-link);
}

.sg-u-swatch-link-hover {
  background-color: var(--myron-color-link-hover);
}

.sg-u-swatch-accent {
  background-color: var(--myron-color-accent);
}

.sg-u-swatch-danger {
  background-color: var(--myron-color-danger);
}

.sg-u-swatch-success {
  background-color: var(--myron-color-success);
}

.sg-u-swatch-warning {
  background-color: var(--myron-color-warning);
}

.sg-u-annotation-top-md {
  margin-top: var(--myron-space-md);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-u-text-xs-muted-mb-4 {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
  margin-bottom: var(--myron-space-xs);
}

.sg-u-col-stretch {
  flex-direction: column;
  align-items: stretch;
}

.sg-u-stack-xs {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-xs);
}

.sg-u-stack-sm {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-sm);
}

.sg-u-stack-md {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
}

.sg-u-table-full {
  width: 100%;
  border-collapse: collapse;
}

.sg-u-text-sm-muted {
  font-size: var(--myron-typography-size-sm);
  color: var(--myron-color-text-muted);
}

.sg-u-label-micro {
  font-size: 0.7rem;
  margin-bottom: var(--myron-space-xs);
}

.sg-u-w-80 {
  width: 80px;
}

.sg-u-w-48 {
  width: 48px;
}

.sg-u-mt-lg {
  margin-top: var(--myron-space-lg);
}

.sg-u-heading-sm {
  font-weight: var(--myron-typography-weight-semibold);
  font-size: var(--myron-typography-size-sm);
  margin-bottom: var(--myron-space-sm);
}

.sg-u-text-xs-muted {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-text-muted);
}

.sg-u-text-xs-link {
  font-size: var(--myron-typography-size-xs);
  color: var(--myron-color-link);
}

.sg-u-text-xs {
  font-size: var(--myron-typography-size-xs);
}

.sg-u-text-sm-semibold {
  font-size: var(--myron-typography-size-sm);
  font-weight: var(--myron-typography-weight-semibold);
}

.sg-u-price-2xl {
  font-size: var(--myron-typography-size-2xl);
  font-weight: var(--myron-typography-weight-bold);
  margin-top: var(--myron-space-xs);
}

.sg-u-flex-1-min-160 {
  flex: 1;
  min-width: 160px;
}

.sg-u-flex-shrink-0 {
  flex-shrink: 0;
}

.sg-u-radius-0-m-0 {
  border-radius: 0;
  margin: 0;
}

.sg-u-flex-2 {
  flex: 2;
}

.sg-u-w-0 {
  width: 0;
}

.sg-u-w-4 {
  width: 4px;
}

.sg-u-w-8 {
  width: 8px;
}

.sg-u-w-12 {
  width: 12px;
}

.sg-u-w-16 {
  width: 16px;
}

.sg-u-w-24 {
  width: 24px;
}

.sg-u-w-32 {
  width: 32px;
}

.sg-u-w-40 {
  width: 40px;
}

.sg-u-w-56 {
  width: 56px;
}

.sg-u-w-64 {
  width: 64px;
}

.sg-u-w-72 {
  width: 72px;
}

.sg-u-w-96 {
  width: 96px;
}

.sg-u-w-160 {
  width: 160px;
}

.sg-u-size-16 {
  width: 16px;
  height: 16px;
}

.sg-u-size-20 {
  width: 20px;
  height: 20px;
}

.sg-u-size-24 {
  width: 24px;
  height: 24px;
}

.sg-u-w-40-h-8 {
  width: 40px;
  height: 8px;
}

.sg-u-radius-0 {
  border-radius: 0;
}

.sg-u-radius-4 {
  border-radius: 4px;
}

.sg-u-radius-8 {
  border-radius: var(--myron-radius-md);
}

.sg-u-radius-16 {
  border-radius: var(--myron-radius-lg);
}

.sg-u-shadow-none {
  box-shadow: none;
}

.sg-u-shadow-sm {
  box-shadow: var(--myron-shadow-sm);
}

.sg-u-shadow-md {
  box-shadow: var(--myron-shadow-md);
}

.sg-u-m-0 {
  margin: 0;
}

.sg-u-h-4 {
  height: var(--myron-space-xs);
}

.sg-u-h-8 {
  height: 8px;
}

.sg-u-h-16 {
  height: 16px;
}

.sg-u-h-24 {
  height: 24px;
}

.sg-u-h-32 {
  height: 32px;
}

.sg-u-h-48 {
  height: 48px;
}

.sg-u-max-w-400 {
  max-width: 400px;
}

.sg-u-max-w-320 {
  max-width: 320px;
}

.sg-u-max-w-280 {
  max-width: 280px;
}

.sg-u-max-w-220 {
  max-width: 220px;
}

.sg-u-reset-box {
  border: none;
  padding: 0;
  margin: 0;
}

.sg-u-cart-drawer-specimen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 300px;
  max-width: 100%;
  height: 100%;
}



/* BEGIN APO-011 INLINE MIGRATION CLASSES */
/* Deterministic classes generated from former inline style attributes. */

.sg-il-00aebd8c {
  margin:0;
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-md);
}

.sg-il-05b38105 {
  font-family:var(--myron-typography-font-mono);
  font-size:var(--myron-typography-size-xs);
  color:var(--myron-color-text-muted);
  display:block;
}

.sg-il-082f6cb2 {
  display:flex;
  flex-wrap:wrap;
  gap:var(--myron-space-sm);
  align-items:center;
}

.sg-il-09561fe9 {
  width:48px;
  height:48px;
  border-radius:var(--myron-radius-sm);
}

.sg-il-0ca7e5d0 {
  display:flex;
  gap:var(--myron-space-md);
}

.sg-il-0d74edef {
  margin:0 0 var(--myron-space-md);
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-md);
}

.sg-il-0e40ae26 {
  display:flex;
  gap:var(--myron-space-md);
  align-items:center;
  flex-wrap:wrap;
}

.sg-il-151f9b64 {
  align-items:flex-start;
  gap:var(--myron-space-md);
  margin-top:var(--myron-space-md);
}

.sg-il-1b970838 {
  width:32px;
  height:32px;
  border-radius:var(--myron-radius-sm);
}

.sg-il-1bd2e527 {
  display:flex;
  gap:var(--myron-space-sm);
  justify-content:center;
  margin-top:var(--myron-space-lg);
  flex-wrap:wrap;
}

.sg-il-1ef1b4d5 {
  margin:0 0 var(--myron-space-md);
}

.sg-il-23f26c85 {
  gap:var(--myron-space-md);
  margin-top:var(--myron-space-md);
}

.sg-il-25ca8395 {
  display:block;
  padding:var(--myron-space-xs) var(--myron-space-sm);
  border-radius:var(--myron-radius-sm);
  color:var(--myron-color-text);
  text-decoration:none;
  font-size:var(--myron-typography-size-sm);
}

.sg-il-28880c89 {
  max-width:220px;
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-md);
  overflow:hidden;
}

.sg-il-2c77c08c {
  display:inline-block;
  padding:var(--myron-space-xs) var(--myron-space-md);
  background:var(--myron-color-surface-alt);
  border-radius:var(--myron-radius-sm);
  outline:2px solid var(--myron-color-focus);
  outline-offset:2px;
  font-size:var(--myron-typography-size-sm);
  font-family:var(--myron-typography-font-mono);
}

.sg-il-31768e46 {
  display:flex;
  gap:var(--myron-space-sm);
}

.sg-il-31aeb0f2 {
  height:200px;
  overflow:hidden;
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-md);
}

.sg-il-335dedf7 {
  align-items:flex-start;
  gap:var(--myron-space-md);
}

.sg-il-39bda452 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--myron-space-md);
}

.sg-il-3aabed6d {
  margin-top:var(--myron-space-md);
}

.sg-il-3e0661d2 {
  display:flex;
  gap:var(--myron-space-xl);
  flex-wrap:wrap;
}

.sg-il-46468c6c {
  font-family:var(--myron-typography-font-mono);
  font-size:var(--myron-typography-size-md);
}

.sg-il-48fc3383 {
  font-size:var(--myron-typography-size-xs);
  border:none;
  padding:0;
  margin-bottom:var(--myron-space-sm);
}

.sg-il-4ce4666b {
  position:relative;
  height:340px;
  overflow:hidden;
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-sm);
}

.sg-il-4dcd5bc5 {
  color:var(--myron-color-border-strong);
}

.sg-il-5320efc1 {
  margin-top:var(--myron-space-md);
  display:flex;
  gap:var(--myron-space-sm);
  flex-wrap:wrap;
}

.sg-il-652e8c14 {
  font-size:var(--myron-typography-size-xl);
  font-weight:var(--myron-typography-weight-semibold);
}

.sg-il-65ea9076 {
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:var(--myron-space-md);
}

.sg-il-6653d4b1 {
  font-size:var(--myron-typography-size-lg);
  font-weight:var(--myron-typography-weight-medium);
}

.sg-il-773c4539 {
  font-size:var(--myron-typography-size-2xl);
  font-weight:var(--myron-typography-weight-bold);
}

.sg-il-815f188f {
  font-size:var(--myron-typography-size-3xl);
  font-weight:var(--myron-typography-weight-bold);
}

.sg-il-88be745b {
  margin:0;
  padding-left:var(--myron-space-lg);
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-xs);
  color:var(--myron-color-text-muted);
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-sm);
}

.sg-il-8cdc081d {
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-md);
  overflow:hidden;
}

.sg-il-8d02633a {
  padding-bottom:var(--myron-space-2xl);
}

.sg-il-913258f3 {
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-xs);
}

.sg-il-a03df361 {
  font-size:var(--myron-typography-size-md);
  font-weight:var(--myron-typography-weight-regular);
}

.sg-il-a243aa46 {
  font-size:var(--myron-typography-size-sm);
  font-weight:var(--myron-typography-weight-regular);
}

.sg-il-a3d0f34c {
  display:flex;
  gap:var(--myron-space-xs);
  flex-wrap:wrap;
}

.sg-il-aa51a97d {
  display:grid;
  grid-template-columns:220px 1fr;
  gap:0;
  border:1px solid var(--myron-color-border);
  border-radius:var(--myron-radius-sm);
}

.sg-il-ae6cbd9b {
  display:flex;
  gap:var(--myron-space-lg);
  align-items:center;
}

.sg-il-b3064fd5 {
  flex:1;
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-xs);
}

.sg-il-b751f4a5 {
  margin-top:var(--myron-space-sm);
}

.sg-il-b761d891 {
  display:flex;
  gap:var(--myron-space-sm);
  flex-wrap:wrap;
  align-items:center;
}

.sg-il-b97110b7 {
  display:flex;
  gap:var(--myron-space-xl);
  padding:var(--myron-space-2xl) 0;
  align-items:center;
}

.sg-il-bc64bc21 {
  display:flex;
  gap:var(--myron-space-xs);
  align-items:flex-start;
  flex-wrap:wrap;
}

.sg-il-bcad7c57 {
  display:flex;
  gap:var(--myron-space-lg);
  align-items:center;
  flex-wrap:wrap;
}

.sg-il-bfb4c639 {
  aspect-ratio:4/3;
  background-color:var(--myron-color-surface);
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-md);
  display:flex;
  align-items:center;
  justify-content:center;
}

.sg-il-c0f031cf {
  background:var(--myron-color-surface-alt);
  padding:var(--myron-space-xs);
  margin-bottom:var(--myron-space-sm);
}

.sg-il-c3854f09 {
  gap:var(--myron-space-md);
  align-items:flex-start;
  padding:var(--myron-space-md) 0;
}

.sg-il-c73a8db2 {
  margin-top:var(--myron-space-xs);
  font-family:var(--myron-typography-font-mono);
  font-size:var(--myron-typography-size-xs);
  color:var(--myron-color-text-muted);
}

.sg-il-c8629a97 {
  width:40px;
  height:40px;
  border-radius:var(--myron-radius-sm);
}

.sg-il-c8828bc0 {
  gap:var(--myron-space-lg);
}

.sg-il-c8e4b4dd {
  display:block;
  padding:var(--myron-space-xs) var(--myron-space-sm);
  border-radius:var(--myron-radius-sm);
  color:var(--myron-color-danger);
  text-decoration:none;
  font-size:var(--myron-typography-size-sm);
}

.sg-il-c91e4d8e {
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-sm);
}

.sg-il-cad3737e {
  display:flex;
  align-items:center;
  gap:var(--myron-space-sm);
}

.sg-il-cb34346c {
  font-size:var(--myron-typography-size-xs);
  font-weight:var(--myron-typography-weight-regular);
}

.sg-il-d6a881e3 {
  display:flex;
  align-items:flex-start;
  gap:var(--myron-space-md);
}

.sg-il-d6bd5502 {
  gap:var(--myron-space-md);
}

.sg-il-e099fb6e {
  background:var(--myron-color-surface-alt);
  padding:var(--myron-space-xs);
}

.sg-il-e1fbbb76 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:var(--myron-space-md);
}

.sg-il-e2b28889 {
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-xs);
}

.sg-il-e9d7b1ac {
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-sm);
  color:var(--myron-color-text-muted);
}

.sg-il-ee24f122 {
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-md);
}

.sg-il-f1de7ff3 {
  display:flex;
  gap:var(--myron-space-lg);
  flex-wrap:wrap;
  align-items:flex-end;
}

.sg-il-f5e3c894 {
  padding:var(--myron-space-md) 0;
  font-family:var(--myron-typography-font-sans);
  font-size:var(--myron-typography-size-sm);
  color:var(--myron-color-text-muted);
}

.sg-il-f6ad0e23 {
  margin-top:var(--myron-space-lg);
  padding:var(--myron-space-2xl);
  background-color:var(--myron-color-surface-alt);
  border:var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius:var(--myron-radius-md);
  text-align:center;
}

.sg-il-fe33c76d {
  display:flex;
  flex-direction:column;
  gap:var(--myron-space-lg);
}

.sg-il-fe45e1f5 {
  border-right:1px solid var(--myron-color-border);
  border-radius:0;
  margin:0;
}

/* END APO-011 INLINE MIGRATION CLASSES */

.mc-navigation-design-form {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-navigation-design-form .sg-card__actions {
  align-self: end;
  justify-content: flex-start;
  min-width: 0;
}

.mc-navigation-design-form .sg-card__actions .sg-button {
  min-height: var(--myron-size-control-md);
  white-space: nowrap;
}

.mc-navigation-settings-group {
  grid-column: 1 / -1;
}

.mc-navigation-settings-group__body {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mc-asset-picker-field {
  display: grid;
  gap: var(--myron-space-sm);
}

.mc-asset-picker-field__preview {
  min-height: calc(var(--myron-size-control-lg) * 2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-alt);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-asset-picker-field__preview img {
  max-width: 100%;
  max-height: calc(var(--myron-size-control-lg) * 2);
  object-fit: contain;
}

.mc-asset-picker-field__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-asset-picker-field__row .sg-field__control {
  min-width: min(100%, 18rem);
  flex: 1 1 18rem;
}

.myron-dialog--asset-picker {
  width: min(var(--myron-layout-container-lg), calc(100vw - (var(--myron-space-xl) * 2)));
}

.mc-asset-picker__header {
  align-items: flex-start;
}

.mc-asset-picker__title,
.mc-asset-picker__subtitle {
  margin: 0;
}

.mc-asset-picker__title {
  font-size: var(--myron-typography-size-xl);
  line-height: var(--myron-typography-line-tight);
}

.mc-asset-picker__subtitle {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-asset-picker__body {
  gap: var(--myron-space-lg);
}

.mc-asset-picker__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: var(--myron-space-md);
  max-height: 50vh;
  overflow: auto;
  padding-right: var(--myron-space-xs);
}

.mc-asset-picker__empty {
  grid-column: 1 / -1;
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text-muted);
}

.mc-asset-picker-card {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-asset-picker-card__preview {
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--myron-color-surface-alt);
  border-radius: var(--myron-radius-xs);
}

.mc-asset-picker-card__preview img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.mc-asset-picker-card__body {
  display: grid;
  gap: var(--myron-space-xs);
  min-width: 0;
}

.mc-asset-picker-card__title,
.mc-asset-picker-card__meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-asset-picker-card__meta {
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-xs);
}

.mc-asset-picker__upload {
  padding-top: var(--myron-space-lg);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-navigation-collapsible {
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  padding-top: var(--myron-space-lg);
}

.mc-navigation-collapsible__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-md);
  min-height: var(--myron-size-control-lg);
  color: var(--myron-color-text);
  cursor: pointer;
  list-style: none;
}

.mc-navigation-collapsible__summary::-webkit-details-marker {
  display: none;
}

.mc-navigation-collapsible__summary::after {
  width: 0.5rem;
  height: 0.5rem;
  border-right: var(--myron-border-width-md, 2px) solid currentColor;
  border-bottom: var(--myron-border-width-md, 2px) solid currentColor;
  content: "";
  transform: rotate(45deg);
}

.mc-navigation-collapsible[open] .mc-navigation-collapsible__summary::after {
  transform: rotate(225deg);
}

.mc-navigation-collapsible__summary:focus-visible {
  outline: var(--myron-focus-ring-width, 2px) solid var(--myron-color-focus);
  outline-offset: var(--myron-focus-ring-offset, 2px);
}

.mc-navigation-collapsible__title {
  min-width: 0;
  font-size: var(--myron-typography-size-lg);
  font-weight: var(--myron-typography-weight-bold);
}

.mc-navigation-collapsible__body {
  display: grid;
  gap: var(--myron-space-md);
  padding-top: var(--myron-space-md);
}

.mc-navigation-validation-grid,
.mc-navigation-preview-grid,
.mc-navigation-override-grid,
.mc-navigation-override-list {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-navigation-validation-grid {
  grid-template-columns: 1fr;
}

.mc-navigation-validation-card {
  display: grid;
  grid-template-columns: minmax(12rem, 0.38fr) minmax(0, 1fr);
  gap: var(--myron-space-lg);
  align-items: center;
}

.mc-navigation-validation-card__label,
.mc-navigation-preview__label {
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
  text-transform: uppercase;
}

.mc-navigation-validation-card__label {
  color: var(--myron-color-text);
  font-weight: var(--myron-typography-weight-bold);
}

.mc-navigation-validation-card--ready {
  border-color: var(--myron-color-success);
}

.mc-navigation-validation-card--warning {
  border-color: var(--myron-color-warning);
}

.mc-navigation-preview {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
}

.mc-navigation-preview__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-navigation-preview-frame {
  width: 100%;
  min-height: 180px;
  overflow: hidden;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-bg);
}

.mc-navigation-preview-frame--desktop {
  max-width: 100%;
}

.mc-navigation-preview-frame--tablet {
  max-width: 720px;
}

.mc-navigation-preview-frame--mobile {
  max-width: 360px;
}

.mc-navigation-preview-frame__body {
  min-height: 104px;
  background:
    linear-gradient(var(--myron-color-surface-alt), var(--myron-color-surface-alt)) left var(--myron-space-md) top var(--myron-space-md) / 45% 12px no-repeat,
    linear-gradient(var(--myron-color-surface-alt), var(--myron-color-surface-alt)) left var(--myron-space-md) top calc(var(--myron-space-md) + 24px) / 72% 12px no-repeat;
}

.mc-navigation-preview-frame--mobile .myron-site__masthead {
  align-items: center;
  gap: var(--myron-space-md);
  padding: var(--myron-space-md);
  flex-wrap: nowrap;
}

.mc-navigation-preview-frame--mobile .myron-site__masthead--align-centered .myron-site__brand {
  position: static;
}

.mc-navigation-preview-frame--mobile .myron-site__masthead--menu-left .myron-site__brand,
.mc-navigation-preview-frame--mobile .myron-site__masthead--menu-right .myron-site__nav,
.mc-navigation-preview-frame--mobile .myron-site__masthead--menu-center .myron-site__nav {
  margin-left: 0;
  margin-right: 0;
}

.mc-navigation-preview-frame--mobile .myron-site__masthead--menu-left .myron-site__nav {
  order: initial;
}

.mc-navigation-preview-frame--mobile .myron-site__brand {
  min-height: var(--myron-size-control-md);
  display: inline-flex;
  align-items: center;
  min-width: 0;
  max-width: calc(100% - 7rem);
}

.mc-navigation-preview-frame--mobile .myron-site__brand-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--myron-space-xs);
  min-height: var(--myron-size-control-md);
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  font: inherit;
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars,
.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::before,
.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::after {
  display: block;
  width: calc(var(--myron-size-control-sm) / 2);
  height: var(--myron-border-hairline);
  border-radius: var(--myron-radius-pill);
  background: currentColor;
  content: "";
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars {
  position: relative;
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::before,
.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::after {
  position: absolute;
  left: 0;
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::before {
  top: calc(var(--myron-space-xs) * -1);
}

.mc-navigation-preview-frame--mobile .myron-site__nav-toggle-bars::after {
  top: var(--myron-space-xs);
}

.mc-navigation-preview-frame--mobile .myron-site__nav-panel {
  display: none;
  flex-basis: 100%;
  position: static;
  inset: auto;
  padding: 0;
  opacity: 0;
  pointer-events: none;
  transform: none;
}

.mc-navigation-preview-frame--mobile-open .myron-site__masthead {
  align-items: flex-start;
  flex-wrap: wrap;
}

.mc-navigation-preview-frame--mobile-open .myron-site__nav-panel {
  display: block;
  opacity: 1;
  pointer-events: auto;
}

.mc-navigation-preview-frame--mobile .myron-site__nav-panel-header {
  display: none;
}

.mc-navigation-preview-frame--mobile .myron-site__nav {
  display: grid;
  width: 100%;
  gap: var(--myron-space-xs);
}

.mc-navigation-preview-frame--mobile .myron-site__utility {
  display: grid;
  gap: var(--myron-space-xs);
}

.mc-navigation-preview-frame--mobile .myron-site__nav a,
.mc-navigation-preview-frame--mobile .myron-site__nav a:visited,
.mc-navigation-preview-frame--mobile .myron-site__nav a:active,
.mc-navigation-preview-frame--mobile .myron-site__utility a,
.mc-navigation-preview-frame--mobile .myron-site__utility a:visited,
.mc-navigation-preview-frame--mobile .myron-site__utility a:active {
  min-height: var(--myron-size-control-lg);
  display: flex;
  align-items: center;
  padding: var(--myron-space-sm) 0;
  font-size: var(--myron-typography-size-xl);
}

.mc-navigation-override-grid {
  grid-template-columns: 1fr;
}

.mc-navigation-override-card {
  min-width: 0;
}

.mc-navigation-override-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) repeat(4, minmax(7.5rem, 0.7fr)) minmax(5rem, auto);
  gap: var(--myron-space-sm);
  align-items: end;
  padding: var(--myron-space-sm) 0;
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  min-width: 0;
}

.mc-navigation-override-row__label {
  align-self: center;
  min-width: 0;
  font-weight: var(--myron-typography-weight-semibold);
  overflow-wrap: anywhere;
}

.mc-navigation-override-row .sg-field,
.mc-navigation-override-row .sg-field__control {
  min-width: 0;
  width: 100%;
}

.mc-navigation-override-row .sg-button {
  justify-self: end;
  min-width: 0;
  width: auto;
  white-space: nowrap;
}

.mc-footer-recommendation {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-md);
  border-color: var(--myron-color-warning);
}

.mc-footer-recommendation form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
}

.mc-footer-variant-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  align-items: stretch;
  gap: var(--myron-space-lg);
}

.mc-footer-variant-card {
  display: flex;
  flex-direction: column;
  gap: var(--myron-space-md);
  min-width: 0;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-footer-variant-card--deactivated {
  opacity: 0.68;
}

.mc-footer-variant-card__button {
  display: grid;
  width: 100%;
  gap: var(--myron-space-sm);
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--myron-color-text);
  text-align: left;
}

.mc-footer-variant-card--selected,
.mc-footer-variant-card--default {
  border-color: var(--myron-color-focus);
  box-shadow: 0 0 0 var(--myron-border-thin) var(--myron-color-focus);
}

.mc-footer-variant-card .sg-card__actions {
  margin-top: auto;
}

.mc-footer-variant-card .sg-card__actions form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-sm);
  width: 100%;
}

.mc-footer-variant-card__header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-footer-variant-card__name {
  font-weight: var(--myron-typography-weight-bold);
}

.mc-footer-variant-card__badge,
.mc-footer-variant-card__recommended,
.mc-footer-chrome-seed-hint {
  display: inline-flex;
  width: fit-content;
  max-width: 100%;
  padding: 0.15rem var(--myron-space-xs);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.mc-footer-variant-card__recommended {
  border-color: var(--myron-color-success);
  color: var(--myron-color-text);
}

.mc-footer-variant-card__diagram {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  gap: var(--myron-space-xs);
  min-height: 42px;
}

.mc-footer-variant-card__diagram-zone {
  display: block;
  min-height: 42px;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-alt);
}

.mc-footer-variant-card__zones {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-typography-size-sm);
}

.mc-footer-zone-list {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-footer-zone-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-footer-repeater {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
  padding-top: var(--myron-space-sm);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-footer-repeater__item {
  display: grid;
  gap: var(--myron-space-sm);
  min-width: 0;
  padding: var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-footer-repeater__row-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--myron-space-sm);
}

.mc-footer-config-zone {
  display: grid;
  gap: var(--myron-space-md);
  min-width: 0;
}

.mc-footer-config-zone__meta {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--myron-space-sm);
  align-items: center;
}

.mc-footer-config-zone__meta .myron-paragraph {
  margin: 0;
}

.mc-footer-config-zone__visible {
  min-height: var(--myron-size-control-sm);
}

.mc-footer-config-zone__content {
  gap: var(--myron-space-md);
  align-items: start;
}

.mc-footer-config-zone__span-full,
.mc-footer-config-zone__content > .sg-field--full,
.mc-footer-config-zone__defaults {
  grid-column: 1 / -1;
}

.mc-footer-config-zone .mc-asset-picker-field {
  max-width: 42rem;
}

.mc-footer-repeater__item-fields {
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--myron-space-sm);
}

.mc-navigation-version-library {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--myron-space-md);
}

.mc-navigation-version-card {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-navigation-version-card--deactivated {
  opacity: 0.68;
}

.mc-navigation-version-card--default {
  border-color: var(--myron-color-focus);
  box-shadow: 0 0 0 var(--myron-border-thin) var(--myron-color-focus);
}

.mc-template-chrome-assignment-form,
.mc-template-chrome-assignment-slot {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-footer-repeater__controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-footer-repeater > .sg-button {
  justify-self: stretch;
}

@media (max-width: 760px) {
  .mc-footer-config-zone__meta,
  .mc-footer-repeater__item-fields {
    grid-template-columns: 1fr;
  }
}

.mc-footer-override-row {
  grid-template-columns: minmax(14rem, 1fr) minmax(12rem, 0.8fr) minmax(5rem, auto) minmax(5rem, auto);
}

.mc-navigation-preview-frame .myron-site__footer {
  margin-top: 0;
}

/* Richtext alignment utilities */
.myron-align--start {
  text-align: start;
}

.myron-align--center {
  text-align: center;
}

.myron-align--end {
  text-align: end;
}

.mc-sidesheet-overlay__toolbar {
  position: sticky;
  top: 0;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  padding: var(--myron-space-sm) var(--myron-space-lg);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  background: var(--myron-color-surface);
}

.mc-richtext-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  overflow-x: visible;
}

.mc-richtext-toolbar__group {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.mc-richtext-toolbar__group + .mc-richtext-toolbar__group {
  padding-left: var(--myron-space-xs);
  border-left: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-richtext-toolbar__table-tools[hidden] {
  display: none;
}

.mc-richtext-toolbar__table-tools {
  order: 2;
  flex: 0 0 100%;
  width: 100%;
  padding-top: var(--myron-space-xs);
  padding-left: 0;
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
  border-left: 0;
}

.mc-richtext-toolbar__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.875rem;
  min-height: 1.875rem;
  padding: 0 var(--myron-space-xs);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-alt);
  color: var(--myron-color-text);
  font: inherit;
  font-size: var(--myron-typography-size-xs);
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
}

.mc-richtext-toolbar__button:hover,
.mc-richtext-toolbar__button:focus-visible,
.mc-richtext-toolbar__button[aria-pressed="true"] {
  border-color: var(--myron-color-focus);
  outline: none;
}

.mc-richtext-toolbar__button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.mc-richtext-toolbar__icon {
  width: 1rem;
  height: 1rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.mc-richtext-toolbar__glyph {
  min-width: 1rem;
  text-align: center;
  font-weight: var(--myron-typography-weight-bold);
}

.mc-richtext-toolbar__mode-toggle {
  margin-left: auto;
  gap: 0;
  padding: 2px;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-alt);
  flex-shrink: 0;
}

.mc-richtext-toolbar__mode-toggle.mc-richtext-toolbar__group + .mc-richtext-toolbar__group,
.mc-richtext-toolbar__group + .mc-richtext-toolbar__mode-toggle {
  border-left: 0;
}

.mc-richtext-toolbar__mode-button {
  min-width: 3rem;
  border-color: transparent;
  background: transparent;
}

.mc-richtext-toolbar__mode-button[aria-pressed="true"] {
  border-color: var(--myron-color-border-strong);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
}

.mc-richtext-surface {
  min-height: 8rem;
  width: 100%;
  padding: var(--myron-space-sm);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
  color: var(--myron-color-text);
  font: inherit;
  line-height: var(--myron-typography-line-normal);
  overflow-wrap: anywhere;
}

.mc-richtext-surface--singleline {
  min-height: 2.5rem;
}

.mc-richtext-surface a {
  color: var(--myron-color-link);
  text-decoration: underline;
}

.mc-richtext-surface table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--myron-space-sm);
}

.mc-richtext-surface th,
.mc-richtext-surface td {
  padding: var(--myron-space-xs);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: start;
  vertical-align: top;
}

.mc-richtext-surface th {
  background: var(--myron-color-surface-alt);
  font-weight: 700;
}

.mc-richtext-html-source {
  font-family: var(--myron-typography-font-mono);
}

/* Mic failure-mode + pill styles */
.myron-mic-missing,
.mc-mic-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--myron-space-2xs);
  max-width: 100%;
  padding: 0.1rem 0.4rem;
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-muted);
  color: var(--myron-color-text-muted);
  font-size: 0.875em;
  line-height: 1.4;
  vertical-align: baseline;
  white-space: nowrap;
}

.mc-mic-pill {
  cursor: default;
  user-select: none;
}

.mc-mic-pill.is-selected {
  border-color: var(--myron-color-accent);
  color: var(--myron-color-text);
}

.mc-mic-pill--missing {
  border-style: dashed;
}

.myron-mic-table {
  width: 100%;
  overflow-x: auto;
  margin: var(--myron-space-md) 0;
}

.myron-mic-table table {
  width: 100%;
  border-collapse: collapse;
}

.myron-mic-table caption {
  caption-side: top;
  padding: var(--myron-space-xs) 0;
  color: var(--myron-color-text-muted);
  text-align: start;
}

.myron-mic-table th,
.myron-mic-table td {
  padding: var(--myron-space-xs) var(--myron-space-sm);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  vertical-align: top;
}

.myron-mic-table--header-emphatic th {
  background: var(--myron-color-surface-muted);
}

.myron-mic-table__cell--center {
  text-align: center;
}

.myron-mic-table__cell--end {
  text-align: end;
}

.mc-content-banks__tabs,
.mc-richtext-toolbar__mic-picker-types,
.mc-richtext-toolbar__mic-picker-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
}

.mc-content-banks__tab-panel[hidden] {
  display: none;
}

.mc-tables-bank__grid,
.mc-tables-bank__row-grid {
  width: 100%;
  border-collapse: collapse;
}

.mc-tables-bank__grid th,
.mc-tables-bank__grid td,
.mc-tables-bank__row-grid th,
.mc-tables-bank__row-grid td {
  padding: var(--myron-space-xs);
  border-bottom: var(--myron-border-hairline) solid var(--myron-color-border);
  text-align: start;
  vertical-align: top;
}

.mc-tables-bank__cell {
  min-width: 9rem;
}

.mc-richtext-toolbar__mic-picker {
  margin-top: var(--myron-space-sm);
  padding: var(--myron-space-sm);
  border: var(--myron-border-thin) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

@media (max-width: 900px) {
  .mc-navigation-design-form,
  .mc-navigation-settings-group__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mc-navigation-override-row {
    grid-template-columns: 1fr;
  }

  .mc-navigation-validation-card {
    grid-template-columns: 1fr;
    gap: var(--myron-space-xs);
  }

  .mc-navigation-override-row .sg-button {
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .mc-navigation-design-form,
  .mc-navigation-settings-group__body {
    grid-template-columns: 1fr;
  }

  .mc-navigation-design-form .sg-card__actions .sg-button {
    width: 100%;
  }
}


/* ================================================================
   Responsive — medium and up enhancements (>= 960px)
   ================================================================ */

@media (min-width: 960px) {
  .sg-layout {
    grid-template-columns: 220px 1fr;
  }

  .sg-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: var(--myron-border-hairline) solid var(--myron-color-border);
    border-bottom: none;
  }

  .sg-main {
    padding: var(--myron-space-2xl) var(--myron-space-2xl);
  }

  .sg-page-tabs {
    padding: 0 var(--myron-space-2xl);
  }

  .sg-color-grid {
    grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  }
}

.mc-site-setup__bundle-table {
  display: grid;
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  overflow: hidden;
}

.mc-site-setup__bundle-row {
  display: grid;
  grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 0.6fr) minmax(220px, 1fr);
  gap: var(--myron-space-md);
  align-items: center;
  padding: var(--myron-space-sm) var(--myron-space-md);
  border-top: var(--myron-border-hairline) solid var(--myron-color-border);
}

.mc-site-setup__bundle-row:first-child {
  border-top: 0;
}

.mc-site-setup__bundle-row--head {
  background: var(--myron-color-surface-muted);
  color: var(--myron-color-text-muted);
  font-size: var(--myron-font-size-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.mc-site-setup__bundle-row code {
  display: block;
  margin-top: 0.125rem;
  color: var(--myron-color-text-muted);
  font-size: var(--myron-font-size-xs);
}

.mc-site-setup__bundle-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  justify-content: flex-end;
}

.mc-site-setup__bundle-modal {
  max-width: min(720px, calc(100vw - 2rem));
}

.mc-site-setup__impact details {
  margin-top: var(--myron-space-sm);
}

.mc-site-setup__impact ul {
  margin: var(--myron-space-xs) 0 0;
  padding-left: 1.25rem;
}

.mc-site-setup__event-json {
  max-height: 420px;
  overflow: auto;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface-muted);
  white-space: pre-wrap;
}

.mc-rail-preview-panel {
  min-height: 7rem;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface);
}

.mc-rail-preview-panel p {
  margin: var(--myron-space-xs) 0 0;
  color: var(--myron-color-text-muted);
}

.mc-rails-status__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--myron-space-sm);
}

.mc-rails-default-form {
  display: grid;
  grid-template-columns: minmax(260px, 420px) auto;
  gap: var(--myron-space-sm);
  align-items: end;
  max-width: min(100%, 620px);
}

.mc-rails-library {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-rails-card {
  display: grid;
  gap: var(--myron-space-md);
  padding: var(--myron-space-lg);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
  background: var(--myron-color-surface);
}

.mc-rails-card--deactivated {
  opacity: 0.68;
}

.mc-rails-card--default {
  border-color: var(--myron-color-border-strong, var(--myron-color-border));
}

.mc-rails-card__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--myron-space-md);
}

.mc-rails-card__title {
  margin: 0;
  color: var(--myron-color-text);
  font-size: var(--myron-typography-size-lg);
  font-weight: 700;
  line-height: var(--myron-typography-line-tight);
}

.mc-rails-card__meta {
  margin: var(--myron-space-2xs) 0 0;
  color: var(--myron-color-text-muted);
  font-family: var(--myron-typography-font-mono);
  font-size: var(--myron-typography-size-xs);
}

.mc-rails-card__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--myron-space-xs);
  justify-content: flex-end;
}

.mc-rails-card__body {
  display: grid;
  grid-template-columns: minmax(320px, 0.75fr) minmax(0, 1.4fr);
  gap: var(--myron-space-lg);
  align-items: start;
}

.mc-rails-preview {
  min-width: 0;
  order: 2;
}

.mc-rails-config-form {
  max-width: none;
  gap: var(--myron-space-md);
  order: 1;
}

.mc-rails-card__body > .mc-admin-form__section {
  order: 1;
}

.mc-rails-slot-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--myron-space-sm);
}

.mc-repeatable-fieldset {
  display: grid;
  gap: var(--myron-space-sm);
  margin: 0;
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-md);
}

.mc-repeatable-fieldset__items {
  display: grid;
  gap: var(--myron-space-md);
}

.mc-repeatable-item {
  display: grid;
  gap: var(--myron-space-sm);
  padding: var(--myron-space-md);
  border: var(--myron-border-hairline) solid var(--myron-color-border);
  border-radius: var(--myron-radius-sm);
  background: var(--myron-color-surface-muted);
}

.mc-repeatable-item__header,
.mc-repeatable-item__actions,
.mc-repeatable-fieldset__footer {
  display: flex;
  align-items: center;
  gap: var(--myron-space-xs);
}

.mc-repeatable-item__header,
.mc-repeatable-fieldset__footer {
  justify-content: space-between;
}

.mc-repeatable-item__actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

.mc-page-grid--rail-assignments .mc-page-grid__row {
  grid-template-columns: minmax(260px, 1.4fr) minmax(190px, 0.7fr) minmax(160px, 0.55fr) minmax(120px, 0.4fr) minmax(92px, 0.3fr);
}

.mc-page-grid--rail-assignments .sg-field__control {
  min-height: var(--myron-size-control-md);
}

@media (max-width: 760px) {
  .mc-site-setup__bundle-row {
    grid-template-columns: 1fr;
  }

  .mc-site-setup__bundle-actions {
    justify-content: flex-start;
  }

  .mc-rails-status__grid,
  .mc-rails-default-form,
  .mc-rails-card__body,
  .mc-rails-slot-grid,
  .mc-page-grid--rail-assignments .mc-page-grid__row {
    grid-template-columns: 1fr;
  }

  .mc-rails-card__header {
    display: grid;
  }

  .mc-rails-card__badges {
    justify-content: flex-start;
  }

  .mc-repeatable-item__header,
  .mc-repeatable-fieldset__footer {
    align-items: stretch;
    flex-direction: column;
  }

  .mc-repeatable-item__actions {
    justify-content: flex-start;
  }
}
