/* Docs-site raw overrides (source of truth). Synced to docs/assets/docs.css on build. */
/* 文件頁中性版面（參考 NASA WDS 文件：側欄目錄 + 主內容層級） */
:root {
  --ds-doc-bg: #e8e8ea;
  --ds-doc-surface: #ffffff;
  --ds-doc-text: #1a1a1a;
  --ds-doc-text-muted: #5a5a5f;
  --ds-doc-border: #c8c8ce;
  --ds-doc-nav-pill-bg: #f0f0f2;
  --ds-sidenav-width: 17.25rem;
  --ds-sticky-top: 5.5rem;
  /* 文件站 chrome：高於區塊內 demo（drawer 45、tooltip 40 等），低於全頁 overlay token */
  --ds-doc-header-z: 100;
  --ds-doc-sidenav-z: 90;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-body);
  line-height: var(--psy-line-height-body);
  color: var(--ds-doc-text);
  background: var(--ds-doc-bg);
}

.ds-skip {
  position: absolute;
  left: -9999px;
  z-index: 100;
  padding: var(--psy-space-2) var(--psy-space-4);
  background: var(--ds-doc-surface);
  color: var(--ds-doc-text);
  border: 1px solid var(--ds-doc-border);
}

.ds-skip:focus {
  left: var(--psy-space-4);
  top: var(--psy-space-4);
}

.ds-top {
  position: sticky;
  top: 0;
  z-index: var(--ds-doc-header-z);
}

.ds-top__brand:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}

.ds-nav-chip {
  color: var(--ds-doc-text);
  text-decoration: none;
}

.ds-nav-chip:hover {
  color: var(--ds-doc-text);
}

/* ---------- 文件首屏（層級參考 Tailwind / shadcn；視覺仍用 Psychedelic token） ---------- */
.ds-landing__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(circle at 18% 12%, var(--psy-primitive-glow-orange-mix), transparent 28%),
    radial-gradient(circle at 82% 72%, var(--psy-primitive-glow-magenta-mix), transparent 32%),
    linear-gradient(165deg, var(--psy-surface-page-base), var(--psy-surface-page-deep));
}

.ds-landing__eyebrow {
  margin: 0 0 var(--psy-space-5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--psy-text-secondary);
}

.ds-landing__title {
  margin: 0 0 var(--psy-space-6);
  max-width: 20ch;
  font-family: var(--psy-font-family-display);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--psy-text-primary);
}

.ds-landing__subtitle {
  margin: 0 0 var(--psy-space-9);
  max-width: 40rem;
  font-size: var(--psy-font-size-subtitle);
  line-height: 1.6;
  color: var(--psy-text-secondary);
}

.ds-landing__subtitle code {
  font-size: 0.92em;
  color: var(--psy-text-primary);
}

.ds-landing__subtitle a {
  color: var(--psy-color-secondary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ds-landing__subtitle a:hover {
  color: var(--psy-text-primary);
}

.ds-landing__btn {
  text-decoration: none;
}

.ds-landing__btn--primary {
  color: var(--psy-action-primary-text);
}

.ds-landing__btn--ghost {
  background: color-mix(in srgb, var(--psy-surface-panel-prominent) 55%, transparent);
  color: var(--psy-text-primary);
  backdrop-filter: blur(8px);
}

.ds-landing__panel {
  margin-bottom: var(--psy-space-11);
  max-width: 36rem;
  padding: var(--psy-space-7) var(--psy-space-8);
  background: color-mix(in srgb, var(--psy-color-base) 32%, transparent);
}

.ds-landing__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--psy-space-4);
  margin-bottom: var(--psy-space-5);
}

.ds-landing__panel-label {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--psy-text-secondary);
}

.ds-landing__panel-pill {
  font-size: 10px;
  font-weight: 800;
  color: var(--psy-text-primary);
  background: var(--psy-surface-panel-soft);
}

.ds-landing__code {
  margin: 0;
  padding: var(--psy-space-5) var(--psy-space-6);
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: 13px;
  line-height: 1.55;
  color: var(--psy-text-primary);
  background: var(--psy-surface-page-deep);
  border: 1px solid color-mix(in srgb, var(--psy-color-white) 14%, transparent);
}

.ds-landing__features {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--psy-space-6);
}

.ds-landing__feature {
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-3);
  padding: var(--psy-space-7);
  background: color-mix(in srgb, var(--psy-surface-panel) 42%, transparent);
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  border-radius: 2px;
  box-shadow: var(--psy-shadow-hard);
}

.ds-landing__feature-title {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-h3);
  font-weight: 800;
  color: var(--psy-text-primary);
}

.ds-landing__feature-desc {
  font-size: var(--psy-font-size-small);
  line-height: 1.5;
  color: var(--psy-text-secondary);
}

.ds-layout {
  display: grid;
  grid-template-columns: var(--ds-sidenav-width) minmax(0, 1fr);
  gap: var(--psy-space-9);
  align-items: start;
}

/* 側欄目錄 */
.ds-sidenav {
  position: sticky;
  top: var(--ds-sticky-top);
  z-index: var(--ds-doc-sidenav-z);
  max-height: calc(100vh - var(--ds-sticky-top) - var(--psy-space-6));
  overflow: auto;
  padding: var(--psy-space-6);
  background: var(--ds-doc-surface);
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
}

.ds-sidenav__label {
  margin: 0 0 var(--psy-space-5);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ds-doc-text-muted);
}

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

/* NASA 式大分類：概覽 / 基礎 / 準則 / 參照 */
.ds-sidenav__group {
  margin: 0 0 var(--psy-space-6);
  padding-bottom: var(--psy-space-5);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.ds-sidenav__group:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ds-sidenav__group-label {
  display: block;
  margin: 0 0 var(--psy-space-2);
  padding: 0 var(--psy-space-2);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ds-doc-text-muted);
}

.ds-sidenav__group-list,
.ds-sidenav__sub {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-sidenav__group-list > li {
  margin-bottom: 2px;
}

.ds-sidenav__group-list > li > a {
  display: block;
  padding: var(--psy-space-2) var(--psy-space-3);
  font-size: var(--psy-font-size-small);
  font-weight: 600;
  color: var(--ds-doc-text);
  text-decoration: none;
  border-radius: 4px;
}

.ds-sidenav__group-list > li > a:hover {
  background: var(--ds-doc-nav-pill-bg);
}

/* 色彩下：調色板 / 對照 等小節標籤（對齊 NASA Colors → Palette 層級意涵） */
.ds-sidenav__micro {
  margin: var(--psy-space-4) 0 var(--psy-space-1);
  padding: 0 var(--psy-space-3);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ds-doc-text-muted);
}

.ds-sidenav__group-list > li > a + .ds-sidenav__micro {
  margin-top: var(--psy-space-2);
}

.ds-sidenav__sub {
  margin: 0 0 var(--psy-space-2);
  padding-left: var(--psy-space-3);
  border-left: 2px solid var(--ds-doc-border);
}

.ds-sidenav__sub:last-child {
  margin-bottom: 0;
}

.ds-sidenav__sub li {
  margin-bottom: 1px;
}

.ds-sidenav__sub a {
  display: block;
  padding: 6px var(--psy-space-3);
  font-size: 12px;
  color: var(--ds-doc-text-muted);
  text-decoration: none;
  border-radius: 4px;
}

.ds-sidenav__sub a:hover {
  color: var(--ds-doc-text);
  background: var(--ds-doc-nav-pill-bg);
}

.ds-content {
  min-width: 0;
  /* 靜態 tooltip / popover 會超出欄寬，勿裁切絕對定位子層 */
  overflow: visible;
}

/* 頁首說明（對應 usa-font-lead 區塊） */
.ds-page-header {
  scroll-margin-top: var(--psy-space-10);
  padding: var(--psy-space-10);
  margin-bottom: var(--psy-space-11);
  background: var(--ds-doc-surface);
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
}

.ds-page-header h1 {
  margin: 0 0 var(--psy-space-4);
  font-family: var(--psy-font-family-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: var(--psy-font-weight-h2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.ds-lead {
  margin: 0;
  max-width: 42rem;
  font-size: var(--psy-font-size-subtitle);
  line-height: 1.55;
  color: var(--ds-doc-text-muted);
}

.ds-lead a {
  color: var(--ds-doc-text);
  font-weight: 700;
}

.ds-lead code {
  font-size: 0.88em;
}

/* 大章節 */
.ds-section {
  margin-bottom: var(--psy-space-13);
  scroll-margin-top: var(--psy-space-10);
}

.ds-section__title {
  margin: 0 0 var(--psy-space-4);
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-h2);
  font-weight: var(--psy-font-weight-h2);
  line-height: var(--psy-line-height-h2);
  padding-bottom: var(--psy-space-3);
  border-bottom: 2px solid var(--ds-doc-border);
}

.ds-section__lead {
  margin: 0 0 var(--psy-space-9);
  max-width: 46rem;
  font-size: var(--psy-font-size-body);
  line-height: 1.6;
  color: var(--ds-doc-text-muted);
}

/* 小節卡片（對應 NASA 各 palette 區塊） */
.ds-doc-card {
  margin-bottom: var(--psy-space-9);
  padding: var(--psy-space-9) var(--psy-space-10);
  background: var(--ds-doc-surface);
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
}

.ds-doc-card:last-child {
  margin-bottom: 0;
}

/* 下一節含向上絕對定位展示（tooltip / popover）時預留間距 */
.ds-doc-card--spaced-next {
  margin-bottom: calc(var(--psy-space-13) + var(--psy-space-6));
  padding-bottom: var(--psy-space-9);
}

/* 靜態 tooltip / popover 會超出卡片框，勿裁切 */
#nav-ui-switch {
  margin-bottom: var(--psy-space-6);
}

#components-navigation-ui,
#components-overlays,
#nav-ui-tooltip,
#overlays-popover {
  overflow: visible;
  scroll-margin-top: var(--ds-sticky-top);
}

#nav-ui-tooltip,
#overlays-popover {
  padding-top: var(--psy-space-5);
}

#nav-ui-tooltip.ds-doc-card {
  margin-top: var(--psy-space-6);
}

/* 說明段與靜態錨點展示區之間：預留向上溢出的 tooltip / popover 空間 */
.ds-doc-card--demo .ds-doc-card__desc + .ds-anchor-grid,
.ds-doc-card--demo .ds-doc-card__desc + .ds-anchor-live,
.ds-doc-card--demo .ds-doc-card__desc + .ds-dropdown-demo,
.ds-doc-card--demo .ds-doc-card__desc + .ds-combobox-demo,
.ds-doc-card--demo .ds-doc-card__desc + .ds-carousel-demo {
  margin-top: var(--psy-space-12);
}

.ds-doc-card--demo,
.ds-doc-card:has(.ds-anchor-grid),
.ds-doc-card:has(.ds-combobox-demo),
.ds-doc-card:has(.ds-dropdown-demo),
.ds-doc-card:has(.ds-anchor-live),
.ds-doc-card:has(.ds-carousel-demo),
.ds-doc-card:has(.ds-stepper-demo),
.ds-doc-card:has(.carousel) {
  overflow: visible;
}

.ds-section:has(.ds-anchor-grid),
.ds-section:has(.ds-combobox-demo),
.ds-section:has(.ds-dropdown-demo),
.ds-section:has(.ds-carousel-demo) {
  overflow: visible;
}

#extended-combobox,
#extended-stepper,
#extended-carousel,
#components-extended {
  overflow: visible;
}

.ds-doc-card__desc + .ds-anchor-grid {
  margin-top: var(--psy-space-8);
}

#nav-ui-tooltip .ds-anchor-grid,
#overlays-popover .ds-anchor-grid {
  margin-top: var(--psy-space-9);
}

.ds-doc-card__title {
  margin: 0 0 var(--psy-space-3);
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-h3);
  font-weight: var(--psy-font-weight-h3);
  line-height: 1.25;
  color: var(--ds-doc-text);
}

.ds-doc-card__desc {
  margin: 0 0 var(--psy-space-7);
  max-width: 48rem;
  font-size: var(--psy-font-size-body);
  line-height: 1.65;
  color: var(--ds-doc-text-muted);
}

.ds-doc-card__desc:last-child {
  margin-bottom: 0;
}

/* code 區塊／清單後的小節標，與上方內容拉開 */
.ds-code-block + .ds-doc-card__desc,
.ds-prose-list + .ds-doc-card__desc {
  margin-top: var(--psy-space-6);
}

/* 色票網格 */
.ds-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: var(--psy-space-6);
}

.ds-swatch {
  display: flex;
  flex-direction: column;
  min-height: 118px;
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
  overflow: hidden;
  background: var(--psy-swatch-fill, #000);
  border-radius: 2px;
}

.ds-swatch__tone {
  flex: 1;
  min-height: 68px;
  background: var(--psy-swatch-fill);
}

.ds-swatch__meta {
  padding: var(--psy-space-3) var(--psy-space-4);
  background: var(--ds-doc-surface);
  border-top: 1px solid var(--ds-doc-border);
}

.ds-swatch__hex {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: var(--psy-font-size-caption);
  font-weight: 700;
  color: var(--ds-doc-text);
  letter-spacing: 0.04em;
}

.ds-swatch__token {
  display: block;
  margin-top: var(--psy-space-1);
  font-family: ui-monospace, monospace;
  font-size: 10px;
  line-height: 1.35;
  color: var(--ds-doc-text-muted);
  word-break: break-all;
}

/* 漸層：雙欄圖例 */
.ds-gradient-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--psy-space-6);
}

.ds-gradient-item {
  margin: 0;
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--ds-doc-surface);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.ds-gradient-item__bar {
  height: 56px;
  border-bottom: 1px solid var(--ds-doc-border);
  background: var(--psy-gradient-demo);
}

.ds-gradient-item__cap {
  margin: 0;
  padding: var(--psy-space-3) var(--psy-space-4);
  font-family: ui-monospace, monospace;
  font-size: 11px;
  line-height: 1.45;
  color: var(--ds-doc-text-muted);
  word-break: break-all;
}

/* Typography 示範 */
.ds-panel {
  padding: var(--psy-space-8);
  background: var(--ds-doc-surface);
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ds-typo-block {
  margin-bottom: var(--psy-space-7);
  padding-bottom: var(--psy-space-6);
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ds-typo-block:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.ds-typo-label {
  font-family: ui-monospace, monospace;
  font-size: var(--psy-font-size-caption);
  color: var(--ds-doc-text-muted);
  font-weight: 700;
  letter-spacing: var(--psy-letter-spacing-caption);
  margin-bottom: var(--psy-space-2);
}

.ds-sample-display {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-display);
  font-weight: var(--psy-font-weight-display);
  line-height: var(--psy-line-height-display);
  color: var(--ds-doc-text);
}

.ds-sample-h2 {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-h2);
  font-weight: var(--psy-font-weight-h2);
  line-height: var(--psy-line-height-h2);
  color: var(--ds-doc-text);
}

.ds-sample-h3 {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-h3);
  font-weight: var(--psy-font-weight-h3);
  color: var(--ds-doc-text);
}

.ds-sample-subtitle {
  font-size: var(--psy-font-size-subtitle);
  color: var(--ds-doc-text-muted);
}

.ds-sample-body {
  font-size: var(--psy-font-size-body);
  font-weight: var(--psy-font-weight-body);
  color: var(--ds-doc-text);
}

/* 文件示範用排版；前景色交給 .psy-kicker / .psy-kicker-on-dark（勿在此寫死 color，避免蓋掉 on-dark 萊姆） */
.ds-sample-kicker {
  margin: 0;
  font-size: var(--psy-font-size-small);
  font-weight: var(--psy-font-weight-kicker);
  letter-spacing: var(--psy-letter-spacing-kicker);
  line-height: var(--psy-line-height-ui-tight);
  text-transform: uppercase;
}

.ds-sample-caption {
  font-size: var(--psy-font-size-caption);
  letter-spacing: var(--psy-letter-spacing-caption);
  color: var(--ds-doc-text-muted);
}

.ds-sample-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psy-space-6);
  align-items: baseline;
}

.ds-sample-btn-text {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-button);
  font-weight: var(--psy-font-weight-button);
  color: var(--ds-doc-text);
}

.ds-sample-brand {
  font-family: var(--psy-font-family-display);
  font-size: var(--psy-font-size-brand);
  font-weight: var(--psy-font-weight-display);
  color: var(--ds-doc-text);
}

.ds-typeface-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--psy-space-4);
}

.ds-typeface-card {
  padding: var(--psy-space-5);
  border: 1px solid var(--ds-doc-border);
  background: var(--ds-doc-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ds-typeface-card h4 {
  margin: 0 0 var(--psy-space-2);
  font-family: var(--psy-font-family-display);
}

.ds-prose-content {
  max-width: var(--psy-content-max-readable);
}

.ds-rhythm-stack > * + * {
  margin-top: var(--psy-space-4);
}

.ds-rhythm-stack h3,
.ds-rhythm-stack h4,
.ds-rhythm-stack p,
.ds-rhythm-stack ul,
.ds-rhythm-stack ol {
  margin: 0;
}

.ds-link-demo {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--psy-space-2);
  padding: var(--psy-space-2) var(--psy-space-4);
  border: 2px solid var(--psy-link-demo-border);
  box-shadow: var(--psy-shadow-soft);
  background: var(--psy-link-demo-bg);
  font-weight: 700;
  color: var(--ds-doc-text);
}

.ds-link-demo a {
  color: var(--psy-link-demo-text);
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
  text-decoration-color: var(--psy-link-demo-underline);
}

.ds-link-visited {
  color: var(--psy-text-link-visited) !important;
  text-decoration-color: var(--psy-text-link-visited) !important;
}

.ds-link-on-dark {
  color: var(--psy-color-secondary-lime) !important;
  text-decoration-color: var(--psy-color-secondary-lime) !important;
}

.ds-dark-stage .ds-link-demo {
  color: var(--psy-link-demo-dark-text);
  border-color: var(--psy-border-strong);
  background: var(--psy-link-demo-dark-bg);
  box-shadow: var(--psy-shadow-soft);
}

.ds-list-demo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--psy-space-5);
}

.ds-list-demo__panel {
  padding: var(--psy-space-6) var(--psy-space-7) var(--psy-space-7);
  overflow: visible;
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
}

.ds-list-demo__note {
  margin: var(--psy-space-6) 0 0;
  padding-top: var(--psy-space-4);
  border-top: 1px solid color-mix(in srgb, var(--psy-color-base) 12%, transparent);
  font-size: var(--psy-font-size-caption);
  line-height: var(--psy-line-height-ui-normal);
  color: var(--ds-doc-text-muted);
}

.ds-list-demo__panel--unordered {
  background: color-mix(in srgb, var(--psy-color-secondary-amber) 14%, var(--psy-primitive-white));
}

.ds-list-demo__panel--ordered {
  background: color-mix(in srgb, var(--psy-color-secondary-orange) 16%, var(--psy-primitive-white));
}

.ds-list-demo__label {
  margin: 0 0 var(--psy-space-4);
  font-size: var(--psy-font-size-caption);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-doc-text-muted);
}

/* 清單 marker／分欄由 mimosa.css（chrome.css）提供；此處僅覆寫文件站文字色 */
.ds-list-demo ul.psy-list > li,
.ds-list-demo ol.psy-list--ordered > li {
  color: var(--ds-doc-text);
}

/* 間距表 */
.ds-space-preview {
  height: var(--psy-space-6);
  min-width: 2px;
  background: var(--psy-gradient-nav);
  border: 1px solid var(--psy-border-strong);
  border-radius: 2px;
}

.ds-btn-row {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--psy-space-4);
  row-gap: calc(var(--psy-space-4) + 8px);
  align-items: center;
}

.ds-btn {
  text-decoration: none;
}

/* 文件用：靜態展示 Hover / Active / Focus（對齊 NASA 以 class 預覽狀態） */
.ds-btn--primary.ds-btn--demo-hover {
  background: var(--psy-button-primary-bg-hover);
}

.ds-btn--primary.ds-btn--demo-active {
  background: var(--psy-button-primary-bg-active);
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--psy-border-strong);
}

.ds-btn--primary.ds-btn--demo-focus {
  outline: var(--psy-focus-ring-width) solid var(--psy-focus-ring-color);
  outline-offset: var(--psy-focus-ring-offset);
}

.ds-btn--secondary.ds-btn--demo-hover {
  background: var(--psy-button-secondary-bg-hover);
}

.ds-btn--secondary.ds-btn--demo-active {
  background: var(--psy-button-secondary-bg-active);
  transform: translate(2px, 2px);
  box-shadow: 4px 4px 0 var(--psy-border-strong);
}

.ds-btn--secondary.ds-btn--demo-focus {
  outline: var(--psy-focus-ring-width) solid var(--psy-focus-ring-color);
  outline-offset: var(--psy-focus-ring-offset);
}

/* 深底上的線框按鈕（對齊 NASA secondary-inverse 概念） */
.ds-btn--inverse {
  background: transparent;
  color: var(--psy-text-primary);
  border-color: var(--psy-text-primary);
  box-shadow: 4px 4px 0 color-mix(in srgb, var(--psy-text-primary) 35%, var(--psy-color-base));
}

.ds-btn--inverse:hover {
  background: color-mix(in srgb, var(--psy-primitive-white) 14%, transparent);
}

.ds-btn--inverse:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--psy-text-primary) 35%, var(--psy-color-base));
}

.ds-btn--inverse.ds-btn--demo-hover {
  background: color-mix(in srgb, var(--psy-primitive-white) 14%, transparent);
}

.ds-btn--inverse.ds-btn--demo-active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 color-mix(in srgb, var(--psy-text-primary) 35%, var(--psy-color-base));
}

.ds-btn--inverse.ds-btn--demo-focus {
  outline: var(--psy-focus-ring-width) solid var(--psy-focus-ring-color);
  outline-offset: var(--psy-focus-ring-offset);
}

.ds-btn--lg {
  min-height: 56px;
  padding: var(--psy-space-4) var(--psy-space-8);
  font-size: 20px;
}

.ds-button-matrix {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psy-space-7);
  align-items: flex-end;
}

.ds-button-matrix__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--psy-space-2);
}

.ds-button-matrix__cap {
  margin: 0;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ds-doc-text-muted);
}

.ds-card-showcase {
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-7);
}

.ds-card-muted-stage {
  padding: var(--psy-space-7);
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  background: var(--ds-doc-bg);
}

.ds-dark-stage {
  padding: var(--psy-space-9);
  border-radius: 8px;
  border: 1px solid var(--ds-doc-border);
  background:
    radial-gradient(circle at 18% 12%, var(--psy-primitive-glow-orange-mix), transparent 26%),
    radial-gradient(circle at 82% 70%, var(--psy-primitive-glow-magenta-mix), transparent 30%),
    linear-gradient(180deg, var(--psy-surface-page-base), var(--psy-surface-page-deep));
}

.ds-dark-stage .ds-button-matrix__cap {
  color: color-mix(in srgb, var(--psy-text-primary) 72%, transparent);
}

.ds-code-block {
  margin: var(--psy-space-6) 0 0;
  padding: var(--psy-space-5) var(--psy-space-6);
  overflow-x: auto;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.5;
  color: var(--ds-doc-text);
  background: #f4f4f6;
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
}

.ds-code-block code {
  font-family: inherit;
  font-size: inherit;
}

.ds-prose-list {
  margin: var(--psy-space-4) 0 0;
  padding-left: var(--psy-space-6);
  color: var(--ds-doc-text-muted);
  line-height: 1.6;
}

.ds-prose-list li {
  margin-bottom: var(--psy-space-2);
}

/* Alerts（對齊 NASA Alerts；文件用 ds-alert*） */
.ds-alert-stack {
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-6);
}

.ds-alert {
  margin: 0;
}

/* 圖示色由 .alert__icon + 狀態 token 決定，勿 inherit */

.ds-alert__body {
  min-width: 0;
}

.ds-alert__heading {
  color: inherit;
}

.ds-alert__text {
  color: inherit;
}

.ds-alert__text a {
  color: inherit;
  font-weight: 700;
}

.ds-alert--paragraph .ds-alert__text {
  max-width: 42rem;
}

/* Form controls（對齊 NASA WDS Form controls） */
.ds-form-demo {
  max-width: 32rem;
}

.ds-form-stack > * + * {
  margin-top: var(--psy-space-7);
}

.ds-form-stack--tight > * + * {
  margin-top: var(--psy-space-6);
}

.ds-form-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--psy-space-5);
  row-gap: var(--psy-space-7);
}

.ds-form-grid > * {
  min-width: 0;
}

.ds-form-col-sm {
  grid-column: span 4;
}

.ds-form-col-md {
  grid-column: span 6;
}

.ds-form-note {
  margin: var(--psy-space-2) 0 0;
  font-size: var(--psy-font-size-small);
  line-height: 1.55;
  color: var(--ds-doc-text-muted);
}

/* 表單關聯標籤（對齊 shadcn Label）；勿與狀態 badge .label 混用 class */
.ds-label:not(.label) {
  display: block;
  margin-bottom: var(--psy-space-3);
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-small);
  font-weight: 700;
  line-height: var(--psy-line-height-body);
  color: var(--ds-doc-text);
}

.ds-label--error {
  color: var(--psy-alert-error-accent);
}

.ds-hint {
  display: block;
  margin: var(--psy-space-2) 0 var(--psy-space-3);
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-small);
  color: var(--ds-doc-text-muted);
}

.ds-input,
.ds-select,
.ds-textarea {
  max-width: 100%;
}

.ds-textarea {
  min-height: 6.5rem;
  resize: vertical;
}

.ds-input + .ds-label:not(.label),
.ds-select + .ds-label:not(.label),
.ds-textarea + .ds-label:not(.label) {
  margin-top: calc(var(--psy-space-3) + 4px);
}

.ds-input--demo-focus {
  outline: var(--psy-focus-ring-width) solid var(--psy-focus-ring-color);
  outline-offset: var(--psy-focus-ring-offset);
}

.ds-input-error-group {
  padding-left: var(--psy-space-4);
  border-left: 4px solid var(--psy-alert-error-accent);
}

.ds-input-error-msg {
  display: block;
  margin-bottom: var(--psy-space-2);
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-small);
  font-weight: 700;
  color: var(--psy-alert-error-accent);
}

.ds-fieldset {
  margin: 0;
  padding: 0;
  border: none;
  min-width: 0;
}

.ds-legend {
  padding: 0;
  margin-bottom: var(--psy-space-3);
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-small);
  font-weight: 700;
  color: var(--ds-doc-text);
}

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

.ds-choice-list li + li {
  margin-top: var(--psy-space-3);
}

.ds-choice {
  display: flex;
  align-items: flex-start;
  gap: var(--psy-space-3);
  cursor: pointer;
  font-family: var(--psy-font-family-body);
  font-size: var(--psy-font-size-body);
  color: var(--ds-doc-text);
}

.ds-choice input[type="checkbox"],
.ds-choice input[type="radio"] {
  flex-shrink: 0;
  width: 1.125rem;
  height: 1.125rem;
  margin-top: 0.15em;
  accent-color: var(--psy-color-secondary-lime);
}

.ds-date-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psy-space-4);
}

.ds-date-field {
  flex: 1 1 5rem;
  max-width: 8rem;
}

.ds-date-field .ds-input {
  max-width: 100%;
}

.ds-form-demo-on-dark .ds-label,
.ds-form-demo-on-dark .ds-legend,
.ds-form-demo-on-dark .ds-choice {
  color: var(--psy-form-label-text);
}

.ds-form-demo-on-dark .ds-hint {
  color: var(--psy-form-hint-text);
}

.ds-form-demo-on-dark .ds-input,
.ds-form-demo-on-dark .ds-select,
.ds-form-demo-on-dark .ds-textarea {
  color: var(--psy-form-input-text);
}

.ds-search-wrap {
  max-width: 42rem;
}

.ds-label-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--psy-space-3);
}

/* 文件站：覆疊層靜態展示（非 position:fixed） */
.ds-overlay-stage {
  position: relative;
  z-index: 0;
  isolation: isolate;
  min-height: 18rem;
  padding: var(--psy-space-7);
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  background: var(--ds-doc-bg);
  overflow: hidden;
}

.ds-overlay-stage .modal,
.ds-overlay-stage .drawer {
  position: absolute;
  inset: 0;
  z-index: auto;
  padding: var(--psy-space-5);
}

.ds-overlay-stage .toast-stack {
  position: absolute;
  right: var(--psy-space-4);
  bottom: var(--psy-space-4);
}

.ds-toast-demo-row {
  display: flex;
  flex-direction: column;
  gap: var(--psy-space-4);
  max-width: 24rem;
}

.ds-feedback-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--psy-space-7);
}

.ds-skeleton-demo {
  max-width: 20rem;
}

/*
 * 錨點型元件（tooltip / popover / dropdown）文件展示：
 * 靜態常駐時預留空間，避免絕對定位與鄰近區塊重疊。
 */
.ds-anchor-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--psy-space-9);
  width: 100%;
  max-width: min(56rem, 100%);
  margin: var(--psy-space-8) auto var(--psy-space-10);
  clear: both;
}

/* 維持 2×2：四欄在扣除側欄後欄寬不足，側向 tooltip／popover 會重疊 */

.ds-anchor-cell {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  min-width: 0;
  padding: var(--psy-space-9) var(--psy-space-5);
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-anchor-cell .tooltip__content,
.ds-anchor-cell .popover__panel {
  z-index: 20;
}

/* 勿對 .tooltip / .popover 外層設 width:100% 或 max-width:100% */

.ds-anchor-cell .tooltip,
.ds-anchor-cell .popover {
  position: relative;
  z-index: 1;
  display: inline-block;
  vertical-align: middle;
}

.ds-anchor-cell__cap {
  position: absolute;
  z-index: 1;
  top: var(--psy-space-3);
  left: var(--psy-space-4);
  right: var(--psy-space-4);
  margin: 0;
  font-size: var(--psy-font-size-caption);
  font-weight: 700;
  line-height: 1.3;
  color: var(--ds-doc-text-muted);
  pointer-events: none;
}

.ds-anchor-cell .tooltip__content,
.ds-anchor-live .tooltip__content {
  min-width: 8rem;
  width: max-content;
  max-width: var(--psy-tooltip-max-width);
}

.ds-anchor-cell--tooltip-side .tooltip__content {
  white-space: nowrap;
}

/* Tooltip 靜態格：觸發元素 flex 置中，四向留白一致（勿把觸發推到邊緣導致 tooltip 裁切） */
.ds-anchor-grid--tooltip .ds-anchor-cell {
  align-items: center;
  justify-content: center;
  min-height: 22rem;
  padding: var(--psy-space-11) var(--psy-space-9);
}

.ds-anchor-cell--tooltip-top,
.ds-anchor-cell--tooltip-bottom,
.ds-anchor-cell--tooltip-side,
.ds-anchor-cell--tooltip-side.ds-anchor-cell--end {
  /* 保留 class 供文件說明；版面以 .ds-anchor-grid--tooltip 為準 */
}

/* Popover 靜態格：觸發元素 flex 置中（同 tooltip；面板較高故 min-height 略大） */
.ds-anchor-grid--popover .ds-anchor-cell {
  align-items: center;
  justify-content: center;
  min-height: 26rem;
  padding: var(--psy-space-11) var(--psy-space-9);
}

.ds-anchor-cell--popover-top,
.ds-anchor-cell--popover-bottom,
.ds-anchor-cell--popover-side,
.ds-anchor-cell--popover-side.ds-anchor-cell--end {
  /* 保留 class 供文件說明；版面以 .ds-anchor-grid--popover 為準 */
}

.ds-anchor-cell .popover__panel {
  min-width: 10rem;
  max-width: min(var(--psy-popover-max-width), 14rem);
}

.ds-anchor-live {
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: var(--psy-space-8) 0 var(--psy-space-10);
  padding: 7.5rem var(--psy-space-10) var(--psy-space-8);
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-anchor-live--tooltip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: min(28rem, 100%);
  min-height: 16rem;
  margin-inline: auto;
  padding: var(--psy-space-11) var(--psy-space-9);
}

.ds-anchor-live .tooltip {
  display: inline-block;
}

.ds-dropdown-demo {
  position: relative;
  display: block;
  width: fit-content;
  max-width: 100%;
  min-height: 17rem;
  margin: var(--psy-space-8) 0 var(--psy-space-10);
  padding: var(--psy-space-6) var(--psy-space-10) 12.5rem var(--psy-space-6);
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-dropdown-demo .dropdown {
  position: relative;
  z-index: 1;
}

.ds-combobox-demo {
  position: relative;
  margin: var(--psy-space-8) 0 var(--psy-space-10);
  /* 預留 listbox + control 4px 硬陰影高度 */
  padding: var(--psy-space-7) var(--psy-space-8) 18rem;
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-combobox-demo .combobox {
  position: relative;
  margin: 0;
  max-width: 100%;
}

.ds-combobox-demo .combobox__control {
  position: relative;
  z-index: 1;
}

.ds-combobox-demo .combobox__listbox {
  z-index: 2;
  left: 0;
  right: 0;
  width: 100%;
  box-sizing: border-box;
  /* 與套件一致：不疊 card-wash，對齊 control 寬度 */
  background: var(--psy-combobox-list-bg);
}

.ds-combobox-demo--tags {
  margin-top: var(--psy-space-8);
  padding-bottom: var(--psy-space-8);
}

.ds-combobox-demo--tags .combobox__tags {
  margin-bottom: var(--psy-space-3);
}

.ds-combobox-demo--tags .form-input {
  max-width: 100%;
}

.ds-carousel-demo {
  margin: var(--psy-space-8) 0 var(--psy-space-10);
  padding: var(--psy-space-7) var(--psy-space-8) var(--psy-space-9);
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-carousel-demo .carousel {
  margin: 0;
}

.ds-stepper-demo {
  margin: var(--psy-space-7) 0 var(--psy-space-9);
  padding: var(--psy-space-7) var(--psy-space-8);
  overflow: visible;
  border: 1px dashed var(--ds-doc-border);
  border-radius: 6px;
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
}

.ds-stepper-demo + .ds-stepper-demo {
  margin-top: var(--psy-space-8);
}

.ds-doc-card:has(.ds-stepper-demo) {
  overflow: visible;
}

@media (max-width: 42rem) {
  .ds-anchor-grid {
    grid-template-columns: 1fr;
    gap: var(--psy-space-9);
  }

  .ds-anchor-grid--tooltip .ds-anchor-cell {
    min-height: 20rem;
    padding: var(--psy-space-10) var(--psy-space-7);
  }

  .ds-anchor-grid--popover .ds-anchor-cell {
    min-height: 24rem;
    padding: var(--psy-space-10) var(--psy-space-7);
  }
}

.ds-grid-demo {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--psy-space-3);
}

.ds-grid-demo--12 {
  /* 文件用：12 欄比例示範的語意標籤（視覺等同 .ds-grid-demo） */
  grid-template-columns: repeat(12, minmax(0, 1fr));
}

.ds-grid-cell {
  border: 2px solid var(--psy-color-base);
  /* Grid 是版面系統示意：用中性 surface，避免把 cyan 當成預設容器底色 */
  background: color-mix(in srgb, var(--ds-doc-surface) 92%, var(--ds-doc-bg));
  padding: var(--psy-space-3);
  font-size: var(--psy-font-size-small);
  font-weight: 700;
  text-align: center;
}

.ds-col-12 { grid-column: span 12; }
.ds-col-8 { grid-column: span 8; }
.ds-col-6 { grid-column: span 6; }
.ds-col-4 { grid-column: span 4; }
.ds-col-3 { grid-column: span 3; }

@media (max-width: 900px) {
  .ds-form-col-sm,
  .ds-form-col-md {
    grid-column: span 12;
  }

  .ds-list-demo {
    grid-template-columns: 1fr;
  }

  .ds-col-8,
  .ds-col-6,
  .ds-col-4,
  .ds-col-3 {
    grid-column: span 12;
  }
}

.ds-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.ds-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--psy-font-size-subtitle);
  color: var(--ds-doc-text);
}

.ds-table th,
.ds-table td {
  padding: var(--psy-space-4) var(--psy-space-5);
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.ds-table thead th {
  background: #f0f0f2;
  font-family: var(--psy-font-family-display);
  font-weight: 800;
  color: var(--ds-doc-text);
  font-size: var(--psy-font-size-body);
  letter-spacing: 0.02em;
}

.ds-table tbody th {
  font-family: var(--psy-font-family-body);
  font-weight: 700;
  font-size: inherit;
  background: transparent;
  letter-spacing: normal;
}

.ds-table tbody th a {
  color: inherit;
  font-weight: inherit;
}

.ds-table td code {
  font-size: 0.94em;
}

.ds-table tr:last-child td {
  border-bottom: none;
}

.ds-side-nav-demo {
  max-width: 22rem;
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-hard);
  background: var(--psy-sidenav-panel-bg);
}

.ds-note {
  margin-top: var(--psy-space-7);
  padding: var(--psy-space-5) var(--psy-space-6);
  background: #f4f4f5;
  border: 1px solid var(--ds-doc-border);
  border-radius: 8px;
  color: var(--ds-doc-text-muted);
  font-size: var(--psy-font-size-small);
  line-height: 1.55;
}

.ds-note__title {
  display: block;
  margin-bottom: var(--psy-space-2);
  font-size: var(--psy-font-size-body);
  font-weight: 700;
  color: var(--ds-doc-text);
}

.ds-note p {
  margin: var(--psy-space-2) 0 0;
}

.ds-a11y-list {
  margin: var(--psy-space-4) 0 0;
  padding-left: var(--psy-space-6);
  color: var(--ds-doc-text-muted);
}

.ds-a11y-list li {
  margin-bottom: var(--psy-space-2);
}

.ds-note kbd {
  padding: 2px 6px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  background: var(--ds-doc-surface);
  border: 1px solid var(--ds-doc-border);
  border-radius: 4px;
}

.ds-shadow-demo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--psy-space-7);
}

.ds-shadow-box {
  height: 100px;
  background: var(--psy-surface-panel-soft);
  border: var(--psy-border-width-block) solid var(--psy-border-strong);
  box-shadow: var(--psy-shadow-demo, var(--psy-shadow-hard));
}

.ds-muted-cap {
  margin: var(--psy-space-3) 0 0;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--ds-doc-text-muted);
}

@media (max-width: 960px) {
  .ds-layout {
    grid-template-columns: 1fr;
  }

  .ds-sidenav {
    position: static;
    max-height: none;
  }

  .ds-sidenav__sub {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--psy-space-1);
    border-left: none;
    padding-left: 0;
  }
}

@media (max-width: 640px) {
  .ds-shell {
    padding-left: var(--psy-space-6);
    padding-right: var(--psy-space-6);
  }
}