/**
 * Phase UI-1｜Global UI Foundation
 * 语义 Token + 基础组件壳。旧页面短期共存；业务模块逐步迁移。
 * 类名前缀：.ui-* ；变量前缀：--ui-*（默认映射现有 --knit-*）
 */

/* -------------------------------------------------------------------------- */
/* Tokens（兼容 --knit-* / data-knit-theme）                                   */
/* -------------------------------------------------------------------------- */

:root {
  /* Color / surface — map from knit chrome */
  --ui-bg: var(--knit-page-bg, #f4f5f7);
  --ui-surface: var(--knit-surface-bg, #ffffff);
  --ui-surface-elevated: var(--knit-panel-bg, #ffffff);
  --ui-text-primary: var(--knit-text-heading, #111318);
  --ui-text-secondary: var(--knit-text-body, #3a4050);
  --ui-text-muted: var(--knit-text-muted, #6b7280);
  --ui-border: var(--knit-surface-border, #e2e5ea);
  --ui-divider: var(--knit-divider, #e6e8ec);
  --ui-focus: #2563eb;
  --ui-danger: var(--knit-red, #c93030);
  --ui-danger-soft: #fef2f2;
  --ui-primary: var(--knit-black, #0a0a0a);
  --ui-primary-text: #ffffff;
  --ui-primary-hover: var(--knit-black-hover, #1a1a1a);
  --ui-overlay-backdrop: rgba(15, 23, 42, 0.45);

  /* Spacing scale (4px base) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* Radius */
  --radius-sm: var(--knit-radius-sm, 8px);
  --radius-md: var(--knit-radius-md, 12px);
  --radius-lg: var(--knit-radius-lg, 16px);
  --radius-pill: 999px;

  /* Shadow */
  --shadow-popover: 0 8px 28px rgba(15, 23, 42, 0.14);
  --shadow-drawer: -8px 0 32px rgba(15, 23, 42, 0.12);
  --shadow-sheet: 0 -8px 32px rgba(15, 23, 42, 0.14);
  --shadow-card: var(--knit-panel-shadow, 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 14px rgba(15, 23, 42, 0.04));

  /* Typography */
  --ui-font: inherit;
  --type-page-title-size: 1.5rem;
  --type-page-title-weight: 650;
  --type-page-title-lh: 1.25;
  --type-section-title-size: 1.125rem;
  --type-section-title-weight: 600;
  --type-section-title-lh: 1.3;
  --type-card-title-size: 1rem;
  --type-card-title-weight: 600;
  --type-card-title-lh: 1.35;
  --type-body-size: 0.9375rem;
  --type-body-weight: 400;
  --type-body-lh: 1.55;
  --type-body-secondary-size: 0.875rem;
  --type-body-secondary-weight: 400;
  --type-body-secondary-lh: 1.5;
  --type-meta-size: 0.8125rem;
  --type-meta-weight: 400;
  --type-meta-lh: 1.4;
  --type-label-size: 0.8125rem;
  --type-label-weight: 500;
  --type-label-lh: 1.3;
  --type-caption-size: 0.75rem;
  --type-caption-weight: 400;
  --type-caption-lh: 1.35;

  /* Control */
  --ui-control-h: 2.5rem;
  --ui-control-h-sm: 2rem;
  --ui-chip-h: 1.75rem;

  /* Z-index ladder (below legacy fullpage 12000; modules migrate later) */
  --ui-z-base: 1;
  --ui-z-dropdown: 8000;
  --ui-z-popover: 9000;
  --ui-z-drawer: 9100;
  --ui-z-sheet: 9200;
  --ui-z-modal: 9300;
  --ui-z-toast: 9400;

  /* Breakpoints (documented; CSS uses matching media) */
  --bp-mobile-max: 767px;
  --bp-tablet-max: 959px;
  --bp-laptop-max: 1199px;

  /* Containers */
  --container-reading: 42rem;
  --container-form: 40rem;
  --container-page: 72rem;
  --container-wide: 90rem;

  /* Motion */
  --ui-motion-fast: 140ms;
  --ui-motion-med: 220ms;
  --ui-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Breakpoint helpers as data attrs (set by JS) */
html[data-ui-bp="mobile"] { --ui-bp-current: mobile; }
html[data-ui-bp="tablet"] { --ui-bp-current: tablet; }
html[data-ui-bp="laptop"] { --ui-bp-current: laptop; }
html[data-ui-bp="desktop"] { --ui-bp-current: desktop; }
html[data-ui-bp="wide"] { --ui-bp-current: wide; }

/* -------------------------------------------------------------------------- */
/* Typography utilities                                                         */
/* -------------------------------------------------------------------------- */

.ui-type-page-title {
  font-size: var(--type-page-title-size);
  font-weight: var(--type-page-title-weight);
  line-height: var(--type-page-title-lh);
  color: var(--ui-text-primary);
  margin: 0;
}
.ui-type-section-title {
  font-size: var(--type-section-title-size);
  font-weight: var(--type-section-title-weight);
  line-height: var(--type-section-title-lh);
  color: var(--ui-text-primary);
  margin: 0;
}
.ui-type-card-title {
  font-size: var(--type-card-title-size);
  font-weight: var(--type-card-title-weight);
  line-height: var(--type-card-title-lh);
  color: var(--ui-text-primary);
  margin: 0;
}
.ui-type-body {
  font-size: var(--type-body-size);
  font-weight: var(--type-body-weight);
  line-height: var(--type-body-lh);
  color: var(--ui-text-secondary);
  margin: 0;
}
.ui-type-body-secondary {
  font-size: var(--type-body-secondary-size);
  font-weight: var(--type-body-secondary-weight);
  line-height: var(--type-body-secondary-lh);
  color: var(--ui-text-secondary);
  margin: 0;
}
.ui-type-meta {
  font-size: var(--type-meta-size);
  font-weight: var(--type-meta-weight);
  line-height: var(--type-meta-lh);
  color: var(--ui-text-muted);
  margin: 0;
}
.ui-type-label {
  font-size: var(--type-label-size);
  font-weight: var(--type-label-weight);
  line-height: var(--type-label-lh);
  color: var(--ui-text-primary);
  margin: 0;
}
.ui-type-caption {
  font-size: var(--type-caption-size);
  font-weight: var(--type-caption-weight);
  line-height: var(--type-caption-lh);
  color: var(--ui-text-muted);
  margin: 0;
}

/* -------------------------------------------------------------------------- */
/* Containers                                                                   */
/* -------------------------------------------------------------------------- */

.ui-container {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--space-4);
  box-sizing: border-box;
}
.ui-container--reading { max-width: var(--container-reading); }
.ui-container--form { max-width: var(--container-form); }
.ui-container--page { max-width: var(--container-page); }
.ui-container--wide { max-width: var(--container-wide); }

@media (min-width: 960px) {
  .ui-container { padding-inline: var(--space-6); }
}

/* -------------------------------------------------------------------------- */
/* Buttons                                                                      */
/* -------------------------------------------------------------------------- */

.ui-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--ui-control-h);
  padding: 0 var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--type-label-size);
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  background: var(--ui-surface);
  color: var(--ui-text-primary);
  transition: background var(--ui-motion-fast) var(--ui-ease), border-color var(--ui-motion-fast) var(--ui-ease), color var(--ui-motion-fast) var(--ui-ease);
}
.ui-btn:disabled,
.ui-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}
.ui-btn:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.ui-btn--primary {
  background: var(--ui-primary);
  color: var(--ui-primary-text);
  border-color: var(--ui-primary);
}
.ui-btn--primary:hover:not(:disabled) { background: var(--ui-primary-hover); }
.ui-btn--secondary {
  background: var(--ui-surface);
  border-color: var(--ui-border);
  color: var(--ui-text-primary);
}
.ui-btn--secondary:hover:not(:disabled) { background: var(--knit-control-hover-bg, #f3f4f6); }
.ui-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--ui-text-secondary);
}
.ui-btn--ghost:hover:not(:disabled) { background: var(--knit-chrome-hover, #eef0f3); }
.ui-btn--danger {
  background: var(--ui-danger);
  color: #fff;
  border-color: var(--ui-danger);
}
.ui-btn--icon {
  min-width: var(--ui-control-h);
  padding: 0;
}
.ui-btn--sm {
  min-height: var(--ui-control-h-sm);
  padding: 0 var(--space-3);
  font-size: var(--type-caption-size);
}
.ui-btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.ui-btn.is-loading::after {
  content: "";
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: inherit;
  opacity: 0.9;
  animation: ui-spin 0.7s linear infinite;
}
.ui-btn--primary.is-loading::after { color: #fff; border-color: rgba(255,255,255,0.35); border-right-color: #fff; }

.ui-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.ui-action-group__utility {
  display: flex;
  gap: var(--space-1);
  margin-inline-start: auto;
}

/* -------------------------------------------------------------------------- */
/* SearchField                                                                  */
/* -------------------------------------------------------------------------- */

.ui-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--ui-control-h);
  padding: 0 var(--space-3);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  box-sizing: border-box;
}
.ui-search:focus-within {
  border-color: var(--ui-focus);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
.ui-search__icon {
  flex: 0 0 auto;
  color: var(--ui-text-muted);
  font-size: 0.95rem;
  line-height: 1;
}
.ui-search__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  font: inherit;
  font-size: var(--type-body-size);
  color: var(--ui-text-primary);
  outline: none;
  padding: var(--space-2) 0;
}
.ui-search__input::placeholder { color: var(--ui-text-muted); }
.ui-search__clear {
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  cursor: pointer;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
}
.ui-search__clear:hover { color: var(--ui-text-primary); background: var(--knit-chrome-hover, #eef0f3); }
.ui-search.is-loading .ui-search__icon { animation: ui-spin 0.8s linear infinite; }

/* -------------------------------------------------------------------------- */
/* Primary Tabs                                                                 */
/* -------------------------------------------------------------------------- */

.ui-tabs {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-bottom: 1px solid var(--ui-divider);
}
.ui-tabs::-webkit-scrollbar { display: none; }
.ui-tabs__tab {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  min-height: 2.75rem;
  padding: 0 var(--space-3);
  font: inherit;
  font-size: var(--type-label-size);
  font-weight: 500;
  color: var(--ui-text-muted);
  cursor: pointer;
  position: relative;
  white-space: nowrap;
}
.ui-tabs__tab[aria-selected="true"] {
  color: var(--ui-text-primary);
  font-weight: 650;
}
.ui-tabs__tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: var(--space-2);
  right: var(--space-2);
  bottom: 0;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--ui-primary);
}
.ui-tabs__tab:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: -2px;
  border-radius: var(--radius-sm);
}

/* -------------------------------------------------------------------------- */
/* Chips / Tags                                                                 */
/* -------------------------------------------------------------------------- */

.ui-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--ui-chip-h);
  padding: 0 var(--space-3);
  border-radius: var(--radius-pill);
  border: 1px solid var(--ui-border);
  background: var(--ui-surface);
  color: var(--ui-text-secondary);
  font-size: var(--type-caption-size);
  font-weight: 500;
  cursor: pointer;
  line-height: 1;
}
.ui-filter-chip[aria-pressed="true"],
.ui-filter-chip.is-selected {
  background: var(--ui-primary);
  border-color: var(--ui-primary);
  color: var(--ui-primary-text);
}
.ui-filter-chip:disabled { opacity: 0.45; cursor: not-allowed; }
.ui-filter-chip:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.ui-filter-chip__remove {
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 0;
  margin-inline-start: 0.1rem;
  font-size: 0.95em;
  line-height: 1;
  opacity: 0.85;
}

.ui-content-tag {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--knit-tag-bg, #eef0f3);
  color: var(--knit-tag-text, #4b5563);
  font-size: var(--type-caption-size);
  font-weight: 500;
  line-height: 1.2;
  border: 0;
}

.ui-applied-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.ui-applied-filters--scroll {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ui-applied-filters--scroll::-webkit-scrollbar { display: none; }
.ui-applied-filters__clear {
  border: 0;
  background: transparent;
  color: var(--ui-text-muted);
  font-size: var(--type-caption-size);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  text-decoration: underline;
}

/* -------------------------------------------------------------------------- */
/* Status / Save                                                                */
/* -------------------------------------------------------------------------- */

.ui-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 1.35rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--type-caption-size);
  font-weight: 600;
  line-height: 1.2;
  background: var(--knit-tag-bg, #eef0f3);
  color: var(--ui-text-secondary);
}
.ui-status-badge[data-tone="success"] { background: #ecfdf5; color: #047857; }
.ui-status-badge[data-tone="warning"] { background: #fff7ed; color: #c2410c; }
.ui-status-badge[data-tone="danger"] { background: var(--ui-danger-soft); color: var(--ui-danger); }
.ui-status-badge[data-tone="info"] { background: #eff6ff; color: #1d4ed8; }
.ui-status-badge[data-tone="muted"] { background: #f1f5f9; color: #64748b; }

.ui-save-status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--type-meta-size);
  color: var(--ui-text-muted);
}
.ui-save-status[data-state="saving"] { color: var(--ui-text-secondary); }
.ui-save-status[data-state="saved"] { color: #047857; }
.ui-save-status[data-state="error"] { color: var(--ui-danger); }
.ui-save-status[data-state="dirty"] { color: #b45309; }

/* -------------------------------------------------------------------------- */
/* Card / Media                                                                 */
/* -------------------------------------------------------------------------- */

.ui-card-shell {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: box-shadow var(--ui-motion-fast) var(--ui-ease), border-color var(--ui-motion-fast) var(--ui-ease);
}
.ui-card-shell:hover { border-color: #cbd5e1; }
.ui-card-shell:focus-within {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.ui-card-shell__body { padding: var(--space-3) var(--space-4); }

.ui-media-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #eef0f3;
  border-radius: inherit;
}
.ui-media-frame--1x1 { aspect-ratio: 1 / 1; }
.ui-media-frame--4x3 { aspect-ratio: 4 / 3; }
.ui-media-frame--16x9 { aspect-ratio: 16 / 9; }
.ui-media-frame--auto { aspect-ratio: auto; min-height: 8rem; }
.ui-media-frame img,
.ui-media-frame video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ui-media-frame__empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--ui-text-muted);
  font-size: var(--type-caption-size);
}

/* -------------------------------------------------------------------------- */
/* Empty / Error / Skeleton / Loading                                           */
/* -------------------------------------------------------------------------- */

.ui-empty {
  text-align: center;
  padding: var(--space-10) var(--space-4);
  color: var(--ui-text-secondary);
}
.ui-empty__title {
  font-size: var(--type-section-title-size);
  font-weight: 600;
  color: var(--ui-text-primary);
  margin: 0 0 var(--space-2);
}
.ui-empty__desc {
  font-size: var(--type-body-secondary-size);
  color: var(--ui-text-muted);
  margin: 0 0 var(--space-5);
}
.ui-empty__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
}

.ui-error {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  border: 1px solid #fecaca;
  background: var(--ui-danger-soft);
  color: #991b1b;
  font-size: var(--type-body-secondary-size);
}
.ui-error--page {
  text-align: center;
  padding: var(--space-8) var(--space-4);
}
.ui-error__actions { margin-top: var(--space-3); }

.ui-skeleton {
  display: block;
  background: linear-gradient(90deg, #eef0f3 25%, #f8fafc 37%, #eef0f3 63%);
  background-size: 400% 100%;
  animation: ui-shimmer 1.2s ease infinite;
  border-radius: var(--radius-sm);
}
.ui-skeleton--line { height: 0.85rem; margin-bottom: var(--space-2); }
.ui-skeleton--title { height: 1.15rem; width: 60%; margin-bottom: var(--space-3); }
.ui-skeleton--media { width: 100%; aspect-ratio: 4 / 3; }

.ui-spinner {
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ui-border);
  border-top-color: var(--ui-primary);
  border-radius: 50%;
  animation: ui-spin 0.7s linear infinite;
}

@keyframes ui-spin { to { transform: rotate(360deg); } }
@keyframes ui-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-skeleton { animation: none; }
  .ui-spinner,
  .ui-btn.is-loading::after,
  .ui-search.is-loading .ui-search__icon { animation: none; }
  .ui-overlay,
  .ui-popover,
  .ui-drawer,
  .ui-sheet { transition: none !important; }
}

/* -------------------------------------------------------------------------- */
/* Overlay Foundation                                                           */
/* -------------------------------------------------------------------------- */

.ui-overlay-root {
  position: fixed;
  inset: 0;
  z-index: var(--ui-z-popover);
  pointer-events: none;
}
.ui-overlay-root.is-active { pointer-events: auto; }

.ui-backdrop {
  position: absolute;
  inset: 0;
  background: var(--ui-overlay-backdrop);
  opacity: 0;
  transition: opacity var(--ui-motion-med) var(--ui-ease);
}
.ui-overlay-root.is-open .ui-backdrop { opacity: 1; }

.ui-popover {
  position: absolute;
  z-index: 1;
  min-width: 12rem;
  max-width: min(22rem, calc(100vw - 1.5rem));
  background: var(--ui-surface-elevated);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  padding: var(--space-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity var(--ui-motion-fast) var(--ui-ease), transform var(--ui-motion-fast) var(--ui-ease);
}
.ui-overlay-root.is-open .ui-popover {
  opacity: 1;
  transform: none;
}

.ui-drawer {
  position: absolute;
  top: 0;
  bottom: 0;
  width: min(26rem, 92vw);
  background: var(--ui-surface-elevated);
  box-shadow: var(--shadow-drawer);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--ui-motion-med) var(--ui-ease);
}
.ui-drawer--left { left: 0; right: auto; transform: translateX(-100%); box-shadow: 8px 0 32px rgba(15, 23, 42, 0.12); }
.ui-drawer--right { right: 0; left: auto; }
.ui-overlay-root.is-open .ui-drawer { transform: none; }

.ui-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: min(92vh, 100%);
  background: var(--ui-surface-elevated);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--shadow-sheet);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform var(--ui-motion-med) var(--ui-ease);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.ui-sheet--full {
  top: 0;
  max-height: none;
  height: 100%;
  border-radius: 0;
}
.ui-overlay-root.is-open .ui-sheet { transform: none; }

.ui-overlay__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--ui-divider);
  flex: 0 0 auto;
}
.ui-overlay__title {
  flex: 1;
  min-width: 0;
  font-size: var(--type-section-title-size);
  font-weight: 600;
  margin: 0;
  color: var(--ui-text-primary);
}
.ui-overlay__body {
  flex: 1 1 auto;
  overflow: auto;
  padding: var(--space-4);
  -webkit-overflow-scrolling: touch;
}
.ui-overlay__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: flex-end;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--ui-divider);
  flex: 0 0 auto;
  background: var(--ui-surface-elevated);
}
.ui-sheet__grab {
  width: 2.5rem;
  height: 0.3rem;
  border-radius: var(--radius-pill);
  background: #cbd5e1;
  margin: var(--space-2) auto 0;
}

html.ui-overlay-open { overflow: hidden; }

/* Bottom nav collision: sheet sits above typical bottom nav (~56px) when not full */
@media (max-width: 959px) {
  .ui-sheet:not(.ui-sheet--full) {
    max-height: calc(92vh - 3.5rem);
    margin-bottom: 0;
  }
}

/* -------------------------------------------------------------------------- */
/* Authoring Shell (structure only)                                             */
/* -------------------------------------------------------------------------- */

.ui-authoring-shell {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background: var(--ui-bg);
}
.ui-authoring-shell__header {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  padding: var(--space-3) var(--space-4);
  background: var(--ui-surface);
  border-bottom: 1px solid var(--ui-divider);
  position: sticky;
  top: 0;
  z-index: 2;
}
.ui-authoring-shell__header-main {
  flex: 1;
  min-width: 12rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.ui-authoring-shell__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}
.ui-authoring-shell__layout {
  display: grid;
  grid-template-columns: 11rem minmax(0, 1fr) 15rem;
  gap: var(--space-4);
  padding: var(--space-4);
  align-items: start;
}
.ui-authoring-shell__nav {
  position: sticky;
  top: 4.5rem;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.ui-authoring-shell__nav button {
  text-align: left;
  border: 0;
  background: transparent;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  color: var(--ui-text-secondary);
  font: inherit;
  font-size: var(--type-label-size);
}
.ui-authoring-shell__nav button[aria-current="true"] {
  background: var(--knit-chrome-active, #e8eaee);
  color: var(--ui-text-primary);
  font-weight: 600;
}
.ui-authoring-shell__main {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  min-height: 16rem;
}
.ui-authoring-shell__side {
  position: sticky;
  top: 4.5rem;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}
.ui-authoring-shell__errors {
  margin: 0;
  padding-left: 1.1rem;
  color: #991b1b;
  font-size: var(--type-body-secondary-size);
}

@media (max-width: 959px) {
  .ui-authoring-shell__layout {
    grid-template-columns: 1fr;
  }
  .ui-authoring-shell__nav {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ui-authoring-shell__side { position: static; order: -1; }
}

/* -------------------------------------------------------------------------- */
/* Publish Chooser                                                              */
/* -------------------------------------------------------------------------- */

.ui-publish-chooser {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: min(20rem, 100%);
}
.ui-publish-chooser__item {
  display: grid;
  grid-template-columns: 2.25rem 1fr auto;
  gap: var(--space-3);
  align-items: center;
  width: 100%;
  text-align: left;
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  background: var(--ui-surface);
  padding: var(--space-3);
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.ui-publish-chooser__item:hover:not(:disabled) {
  border-color: #cbd5e1;
  background: var(--knit-surface-hover-bg, #f8f9fb);
}
.ui-publish-chooser__item.is-active,
.ui-publish-chooser__item[aria-current="true"] {
  border-color: var(--ui-primary);
  box-shadow: inset 0 0 0 1px var(--ui-primary);
}
.ui-publish-chooser__item:disabled,
.ui-publish-chooser__item[data-state="unavailable"] {
  opacity: 0.55;
  cursor: not-allowed;
}
.ui-publish-chooser__item:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 2px;
}
.ui-publish-chooser__icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-md);
  background: #eef0f3;
  display: grid;
  place-items: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ui-text-primary);
}
.ui-publish-chooser__title {
  font-size: var(--type-card-title-size);
  font-weight: 600;
  margin: 0 0 0.15rem;
}
.ui-publish-chooser__desc {
  font-size: var(--type-caption-size);
  color: var(--ui-text-muted);
  margin: 0;
}
.ui-publish-chooser__state {
  font-size: var(--type-caption-size);
  font-weight: 600;
  color: var(--ui-text-muted);
  white-space: nowrap;
}
.ui-publish-chooser__item[data-state="application_required"] .ui-publish-chooser__state {
  color: #c2410c;
}
.ui-publish-chooser__item[data-state="available"] .ui-publish-chooser__state {
  color: #047857;
}

/* -------------------------------------------------------------------------- */
/* Showcase page helpers (only used by ui-foundation.html)                      */
/* -------------------------------------------------------------------------- */

.ui-showcase {
  background: var(--ui-bg);
  color: var(--ui-text-primary);
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
.ui-showcase__hero {
  padding: var(--space-8) var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--ui-divider);
  background: var(--ui-surface);
}
.ui-showcase__grid {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-6) var(--space-4) var(--space-12);
}
.ui-showcase__section {
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.ui-showcase__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
  margin-top: var(--space-3);
}
.ui-showcase__note {
  margin-top: var(--space-3);
  font-size: var(--type-meta-size);
  color: var(--ui-text-muted);
}