/* Generated by tokens/build.mjs from tokens/src/*.json. Do not edit. */
/* Foundations -> semantic roles -> component contracts. */
:root {
  /* foundations */
  --forest-950: #112e27;
  --forest-900: #173d33;
  --forest-800: #1d5545;
  --forest-700: #25634f;
  --forest-300: #86c7a8;
  --forest-200: #a9dcc2;
  --forest-100: #e7f0e9;
  --forest-50: #f1f6f2;
  --lime-300: #c2d8a4;
  --ink-950: #0b1311;
  --ink-900: #111b18;
  --ink-800: #18241f;
  --ink-700: #23332d;
  --ink-600: #34473f;
  --mist-50: #e8efeb;
  --mist-300: #b9c8bf;
  --mist-400: #98aaa0;
  --neutral-950: #1f2421;
  --neutral-700: #4b5450;
  --neutral-600: #5c6661;
  --neutral-500: #7a847f;
  --neutral-300: #c8cdca;
  --neutral-200: #dfe2e0;
  --neutral-100: #eef0ef;
  --neutral-50: #f7f8f7;
  --white: #ffffff;
  --red-800: #6e3030;
  --red-700: #a33332;
  --red-300: #f1a7a2;
  --red-100: #f5d8d4;
  --red-50: #fff3f1;
  --red-900: #3b1d1c;
  --sand-900: #33281a;
  --sand-700: #826429;
  --sand-300: #e2c27f;
  --sand-100: #f3eddd;
  --font-body: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC', sans-serif;
  --font-display: 'Bahnschrift', 'Microsoft YaHei UI', 'PingFang SC', sans-serif;
  --font-mono: 'Cascadia Code', Consolas, monospace;
  --text-xs: 0.75rem;
  --text-sm: 0.8125rem;
  --text-base: 0.875rem;
  --text-md: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.375rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2.125rem;
  --text-hero: clamp(2.125rem, 3.6vw, 3.5rem);
  --text-workspace-title: clamp(1.75rem, 2.7vw, 2.125rem);
  --tracking-tight: -0.025em;
  --tracking-label: 0.08em;
  --tracking-eyebrow: 0.12em;
  --tracking-brand: 0.15em;
  --leading-tight: 1.3;
  --leading-compact: 1.45;
  --leading-base: 1.65;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --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;
  --space-16: 4rem;
  --space-20: 5rem;
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 999px;
  --shadow-card: 0 1px 2px #1f24210f;
  --shadow-raised: 0 4px 16px #1f242114;
  --shadow-dialog: 0 16px 48px #1f242133;
  --duration-fast: 140ms;
  --duration-base: 220ms;
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --z-navigation: 10;
  --z-feedback: 30;
  --z-overlay: 40;
  --z-popover: 50;
  --z-toast: 60;
  /* semantic */
  --color-bg: var(--neutral-50);
  --color-surface: var(--white);
  --color-surface-subtle: var(--neutral-100);
  --color-text: var(--neutral-950);
  --color-text-secondary: var(--neutral-700);
  --color-text-muted: var(--neutral-600);
  --color-border: var(--neutral-200);
  --color-border-hover: var(--neutral-300);
  --color-control-border: var(--neutral-500);
  --color-brand: var(--forest-800);
  --color-brand-hover: var(--forest-950);
  --color-brand-subtle: var(--forest-100);
  --color-focus: var(--forest-700);
  --color-on-brand: var(--white);
  --color-danger: var(--red-700);
  --color-danger-hover: var(--red-800);
  --color-danger-subtle: var(--red-50);
  --color-danger-border: var(--red-100);
  --color-success: var(--forest-700);
  --color-success-subtle: var(--forest-50);
  --color-warning: var(--sand-700);
  --color-warning-subtle: var(--sand-100);
  --color-sidebar: var(--forest-950);
  --color-sidebar-active: var(--forest-800);
  --color-sidebar-divider: var(--forest-800);
  --color-sidebar-accent: var(--lime-300);
  --color-sidebar-text: #c4d3cb;
  --color-sidebar-text-active: var(--white);
  --color-sidebar-muted: #99b4a6;
  --color-backdrop: #102b2466;
  /* components */
  --sidebar-width: 14rem;
  --header-height: 3.5rem;
  --content-width: 76rem;
  --form-width: 40rem;
  --page-gutter: clamp(1rem, 3vw, 2rem);
  --control-height: 2.25rem;
  --control-height-lg: 2.5rem;
  --hit-target: 2.75rem;
  --row-height: 2.5rem;
  --control-radius: var(--radius-md);
  --card-radius: var(--radius-lg);
  --card-padding: var(--space-5);
  --launcher-icon: 2.5rem;
  --focus-ring: 2px solid var(--color-focus);
}

/*
 * @catalytic/app-kit design system, part 1: base. Classes are prefixed `yh-`; state is carried by data-* and
 * aria-* attributes. Colour, type, spacing and shape come from design tokens only; structural values
 * (1px borders, percentages, breakpoints) are written directly. styles.css = tokens.css + the parts in
 * styles/ (base, controls, data, overlay, layout), in that order.
 */

:root {
  /* One control size for every form control: 36px with a mouse, 44px on touch screens. */
  --yh-control: var(--control-height);
  --yh-control-lg: var(--control-height-lg);
}

@media (pointer: coarse) {
  :root {
    --yh-control: var(--hit-target);
    --yh-control-lg: var(--hit-target);
  }
}

.yh-root,
.yh-shell,
.yh-entry {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-base);
  color: var(--color-text);
}

.yh-root *:focus-visible,
.yh-shell *:focus-visible,
.yh-entry *:focus-visible,
.yh-popup:focus-visible,
.yh-popup *:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
}

.yh-link {
  color: var(--color-brand);
  text-decoration: none;
  cursor: pointer;
}

.yh-link:hover {
  text-decoration: underline;
}

.yh-muted {
  color: var(--color-text-muted);
}

.yh-secondary {
  color: var(--color-text-secondary);
}

.yh-small {
  font-size: var(--text-sm);
}

.yh-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.yh-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.yh-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.yh-grow {
  flex: 1 1 auto;
  min-width: 0;
}

.yh-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.yh-section-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.yh-spinner {
  display: inline-block;
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: yh-spin 700ms linear infinite;
}

@keyframes yh-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yh-spinner {
    animation-duration: 2s;
  }
}

/* Part 2: form controls. Button, IconButton, Input, Textarea, Select, Checkbox, Radio, Switch, Field. */

/* ------------------------------------------------------------ button */

.yh-button,
.yh-icon-button {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  box-sizing: border-box;
  min-height: var(--yh-control);
  border: 1px solid var(--color-control-border);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.yh-button {
  padding: 0 var(--space-4);
}

.yh-icon-button {
  width: var(--yh-control);
  padding: 0;
  border-color: transparent;
  background: transparent;
}

.yh-button:hover,
.yh-icon-button:hover {
  background: var(--color-surface-subtle);
}

.yh-icon-button[aria-expanded='true'] {
  background: var(--color-surface-subtle);
}

.yh-button[data-variant='primary'] {
  border-color: var(--color-brand);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.yh-button[data-variant='primary']:hover {
  border-color: var(--color-brand-hover);
  background: var(--color-brand-hover);
}

.yh-button[data-variant='ghost'] {
  border-color: transparent;
  background: transparent;
}

.yh-button[data-variant='ghost']:hover {
  background: var(--color-surface-subtle);
}

.yh-button[data-variant='link'] {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-brand);
  font-weight: var(--weight-normal);
}

.yh-button[data-variant='link']:hover {
  background: transparent;
  text-decoration: underline;
}

.yh-button[data-variant='danger'] {
  border-color: var(--color-danger);
  background: var(--color-danger);
  color: var(--color-on-brand);
}

.yh-button[data-variant='danger']:hover {
  border-color: var(--color-danger-hover);
  background: var(--color-danger-hover);
}

.yh-button[data-variant='danger-outline'] {
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.yh-button[data-variant='danger-outline']:hover {
  background: var(--color-danger-subtle);
}

.yh-button[data-size='lg'] {
  min-height: var(--yh-control-lg);
  padding: 0 var(--space-5);
}

.yh-button:disabled,
.yh-button[aria-disabled='true'],
.yh-icon-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.yh-button[aria-busy='true'] {
  cursor: progress;
}

.yh-button[aria-busy='true']::before {
  content: '';
  box-sizing: border-box;
  width: 1em;
  height: 1em;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-full);
  animation: yh-spin 700ms linear infinite;
}

.yh-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
}

/* ------------------------------------------------------------ text inputs and native select */

.yh-input,
.yh-textarea,
.yh-select,
.yh-select-trigger {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--yh-control);
  padding: 0 var(--space-3);
  border: 1px solid var(--color-control-border);
  border-radius: var(--control-radius);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  line-height: var(--leading-compact);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.yh-textarea {
  min-height: 5.5rem;
  padding: var(--space-2) var(--space-3);
  line-height: var(--leading-base);
  resize: vertical;
}

.yh-input::placeholder,
.yh-textarea::placeholder {
  color: var(--color-text-muted);
}

.yh-input:hover,
.yh-textarea:hover,
.yh-select:hover,
.yh-select-trigger:hover {
  border-color: var(--color-text-muted);
}

.yh-input:focus-visible,
.yh-textarea:focus-visible,
.yh-select:focus-visible,
.yh-select-trigger:focus-visible,
.yh-select-trigger[data-state='open'] {
  border-color: var(--color-focus);
  outline: var(--focus-ring);
  outline-offset: -1px;
}

.yh-input[aria-invalid='true'],
.yh-textarea[aria-invalid='true'],
.yh-select[aria-invalid='true'],
.yh-select-trigger[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.yh-input:disabled,
.yh-textarea:disabled,
.yh-select:disabled,
.yh-select-trigger:disabled,
.yh-input[readonly] {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.yh-input[readonly] {
  cursor: default;
}

/* Native select: the chevron is drawn with two gradients so that it follows the text colour tokens. */
.yh-select {
  appearance: none;
  padding-right: var(--space-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.125rem) 50%,
    calc(100% - 0.8125rem) 50%;
  background-size:
    0.3125rem 0.3125rem,
    0.3125rem 0.3125rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* Radix select trigger is a button holding the value and a chevron icon. */
.yh-select-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  text-align: left;
  cursor: pointer;
}

.yh-select-trigger[data-placeholder] {
  color: var(--color-text-muted);
}

.yh-select-trigger > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.yh-select-icon {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--color-text-muted);
}

.yh-input[data-width='sm'],
.yh-select[data-width='sm'] {
  width: 10rem;
}

/* ------------------------------------------------------------ checkbox, radio, switch */

/* A label around the control gives touch screens a 44px target; the box itself stays small. */
.yh-check {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--yh-control);
  cursor: pointer;
}

.yh-check[aria-disabled='true'],
.yh-check:has(:disabled) {
  color: var(--color-text-secondary);
  cursor: not-allowed;
}

.yh-checkbox,
.yh-radio,
.yh-switch {
  appearance: none;
  position: relative;
  flex: none;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-control-border);
  background: var(--color-surface);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.yh-checkbox,
.yh-radio {
  width: 1.125rem;
  height: 1.125rem;
}

.yh-checkbox {
  border-radius: var(--radius-sm);
}

.yh-radio {
  border-radius: var(--radius-full);
}

.yh-checkbox:checked,
.yh-checkbox[data-state='checked'],
.yh-checkbox[data-state='indeterminate'],
.yh-radio:checked,
.yh-radio[data-state='checked'] {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.yh-checkbox:checked::after,
.yh-checkbox[data-state='checked']::after {
  content: '';
  position: absolute;
  left: 0.3125rem;
  top: 0.0625rem;
  width: 0.3125rem;
  height: 0.625rem;
  border: solid var(--color-on-brand);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.yh-checkbox:indeterminate::after,
.yh-checkbox[data-state='indeterminate']::after {
  content: '';
  position: absolute;
  left: 0.1875rem;
  top: 0.4375rem;
  width: 0.625rem;
  height: 2px;
  background: var(--color-on-brand);
}

.yh-radio:checked::after,
.yh-radio[data-state='checked']::after {
  content: '';
  position: absolute;
  inset: 0.25rem;
  border-radius: var(--radius-full);
  background: var(--color-on-brand);
}

.yh-switch {
  width: 2.25rem;
  height: 1.25rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
}

.yh-switch::after {
  content: '';
  position: absolute;
  left: 0.125rem;
  top: 0.125rem;
  width: 0.875rem;
  height: 0.875rem;
  border-radius: var(--radius-full);
  background: var(--color-text-muted);
  transition: transform var(--duration-fast) var(--ease-out);
}

.yh-switch:checked,
.yh-switch[data-state='checked'] {
  border-color: var(--color-brand);
  background: var(--color-brand);
}

.yh-switch:checked::after,
.yh-switch[data-state='checked']::after {
  background: var(--color-on-brand);
  transform: translateX(1rem);
}

.yh-checkbox:disabled,
.yh-radio:disabled,
.yh-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.yh-checkbox[aria-invalid='true'] {
  border-color: var(--color-danger);
}

.yh-radio-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.yh-radio-group[data-orientation='horizontal'] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

/* ------------------------------------------------------------ field and form */

.yh-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
}

.yh-label {
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
}

.yh-label[data-required]::after {
  content: ' *';
  color: var(--color-danger);
}

.yh-help {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.yh-error {
  margin: 0;
  color: var(--color-danger);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
}

.yh-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  box-sizing: border-box;
  width: 100%;
  max-width: var(--form-width);
}

.yh-form-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.yh-form-section > legend {
  padding: 0;
  margin-bottom: var(--space-3);
  font-weight: var(--weight-semibold);
}

.yh-form-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  padding-top: var(--space-2);
}

@media (max-width: 480px) {
  .yh-form-actions .yh-button {
    flex: 1 1 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yh-button,
  .yh-icon-button,
  .yh-input,
  .yh-checkbox,
  .yh-radio,
  .yh-switch,
  .yh-switch::after {
    transition: none;
  }
}

/* Part 3: content. Card, Table, Tabs, Badge, Alert, DescriptionList, EmptyState, Skeleton, Pagination, filter bar. */

/* ------------------------------------------------------------ card */

.yh-card {
  box-sizing: border-box;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  padding: var(--card-padding);
  min-width: 0;
}

.yh-card[data-flush] {
  padding: 0;
  overflow: hidden;
}

.yh-card[data-tone='danger'] {
  border-color: var(--color-danger-border);
}

.yh-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-4);
}

.yh-card-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.yh-card-text {
  margin: 0;
  color: var(--color-text-secondary);
}

/* ------------------------------------------------------------ table */

.yh-table-wrap {
  position: relative; /* contains the visually hidden labels, so they never widen the page */
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
}

.yh-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-base);
}

.yh-table th,
.yh-table td {
  box-sizing: border-box;
  height: var(--row-height);
  padding: 0 var(--space-4);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap; /* narrow screens scroll the table instead of breaking Chinese text one character per line */
  line-height: var(--leading-compact);
}

.yh-table tbody tr:last-child td {
  border-bottom: 0;
}

.yh-table thead th {
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

.yh-table [data-align='right'] {
  text-align: right;
}

.yh-table [data-wrap] {
  min-width: 12rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.yh-table tbody tr[data-clickable] {
  cursor: pointer;
}

.yh-table tbody tr[data-clickable]:hover,
.yh-table tbody tr[data-clickable]:focus-visible {
  background: var(--color-surface-subtle);
}

.yh-table tbody tr[aria-selected='true'] {
  background: var(--color-brand-subtle);
}

.yh-table tbody tr[data-clickable]:focus-visible {
  outline: var(--focus-ring);
  outline-offset: -2px;
}

/* The "..." cell: row actions stay at the right edge. */
.yh-table td[data-actions],
.yh-table th[data-actions] {
  width: 1%;
  white-space: nowrap;
  text-align: right;
}

.yh-table-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-1);
}

.yh-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: var(--row-height);
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.yh-sort:hover {
  color: var(--color-text);
}

.yh-sort[data-direction]::after {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
}

.yh-sort[data-direction='asc']::after {
  transform: translateY(2px) rotate(-135deg);
}

/* Content refreshing behind the old rows: keep the rows, dim them. */
.yh-table-wrap[aria-busy='true'] .yh-table tbody {
  opacity: 0.55;
}

/* ------------------------------------------------------------ filter bar and toolbar */

.yh-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-4);
}

.yh-filters .yh-input[type='search'] {
  width: 16rem;
  max-width: 100%;
}

.yh-filters .yh-select,
.yh-filters .yh-select-trigger {
  width: auto;
  min-width: 8rem;
}

.yh-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

/* ------------------------------------------------------------ tabs */

.yh-tabs-list {
  display: flex;
  gap: var(--space-1);
  overflow-x: auto;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-5);
}

.yh-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--yh-control-lg);
  padding: 0 var(--space-4);
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  font-weight: var(--weight-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.yh-tab:hover {
  color: var(--color-text);
}

.yh-tab[aria-selected='true'],
.yh-tab[data-state='active'],
.yh-tab[aria-current='page'] {
  color: var(--color-brand);
  box-shadow: inset 0 -2px 0 var(--color-brand);
}

.yh-tab:focus-visible {
  outline-offset: -2px;
}

/* ------------------------------------------------------------ badge */

.yh-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  min-height: 1.5rem;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  background: var(--color-surface-subtle);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: var(--leading-compact);
  white-space: nowrap;
}

.yh-badge[data-tone='success'] {
  background: var(--color-success-subtle);
  color: var(--color-success);
}

.yh-badge[data-tone='warning'] {
  background: var(--color-warning-subtle);
  color: var(--color-warning);
}

.yh-badge[data-tone='danger'] {
  background: var(--color-danger-subtle);
  color: var(--color-danger);
}

.yh-badge[data-tone='info'] {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

/* Status badges carry a dot so that the state is not told by colour alone. */
.yh-badge[data-dot]::before {
  content: '';
  width: 0.375rem;
  height: 0.375rem;
  border-radius: var(--radius-full);
  background: currentColor;
}

/* ------------------------------------------------------------ alert */

.yh-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-sizing: border-box;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--control-radius);
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.yh-alert[data-tone='info'] {
  border-color: var(--color-brand-subtle);
  background: var(--color-brand-subtle);
}

.yh-alert[data-tone='success'] {
  border-color: var(--color-success-subtle);
  background: var(--color-success-subtle);
}

.yh-alert[data-tone='warning'] {
  border-color: var(--color-warning-subtle);
  background: var(--color-warning-subtle);
}

.yh-alert[data-tone='danger'] {
  border-color: var(--color-danger-border);
  background: var(--color-danger-subtle);
}

.yh-alert-icon {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 1px;
}

.yh-alert[data-tone='info'] .yh-alert-icon {
  color: var(--color-brand);
}

.yh-alert[data-tone='success'] .yh-alert-icon {
  color: var(--color-success);
}

.yh-alert[data-tone='warning'] .yh-alert-icon {
  color: var(--color-warning);
}

.yh-alert[data-tone='danger'] .yh-alert-icon {
  color: var(--color-danger);
}

.yh-alert-body {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.yh-alert-title {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.yh-alert-text {
  margin: 0;
  color: var(--color-text-secondary);
}

.yh-alert-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* ------------------------------------------------------------ description list */

.yh-dl {
  margin: 0;
}

.yh-dl > div {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.yh-dl > div:last-child {
  border-bottom: 0;
}

.yh-dl dt {
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  line-height: var(--leading-base);
}

.yh-dl dd {
  margin: 0;
  overflow-wrap: anywhere;
}

@media (max-width: 480px) {
  .yh-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }
}

/* ------------------------------------------------------------ empty state and skeleton */

.yh-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-4);
  color: var(--color-text-secondary);
  text-align: center;
}

.yh-empty > p {
  margin: 0;
}

.yh-skeleton {
  display: block;
  min-height: 1rem;
  border-radius: var(--radius-sm);
  background: var(--color-surface-subtle);
  animation: yh-pulse 1.4s ease-in-out infinite;
}

.yh-skeleton[data-shape='line'] {
  height: 0.875rem;
}

.yh-skeleton[data-shape='block'] {
  height: 5rem;
}

@keyframes yh-pulse {
  50% {
    opacity: 0.5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yh-skeleton {
    animation: none;
  }
}

/* ------------------------------------------------------------ pagination */

.yh-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
}

.yh-pagination-controls {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* Part 4: floating layers. Dialog, Menu, Popover, Tooltip, Toast, Select list, Launcher panel. */

/* Radix portals render outside .yh-root, so every floating layer sets the type itself. */
.yh-popup {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-compact);
  color: var(--color-text);
}

/* ------------------------------------------------------------ dialog (Radix and native <dialog>) */

.yh-dialog-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  background: var(--color-backdrop);
}

dialog.yh-dialog::backdrop {
  background: var(--color-backdrop);
}

.yh-dialog {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-overlay) + 1);
  box-sizing: border-box;
  width: min(28rem, calc(100vw - var(--space-8)));
  max-height: calc(100vh - var(--space-8));
  height: fit-content;
  margin: auto;
  padding: var(--space-5);
  overflow: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-dialog);
  color: var(--color-text);
  line-height: var(--leading-base);
}

.yh-dialog[data-size='lg'] {
  width: min(40rem, calc(100vw - var(--space-8)));
}

.yh-dialog-title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.yh-dialog-body {
  margin: 0 0 var(--space-5);
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.yh-dialog-footer {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
  margin-top: var(--space-5);
}

.yh-dialog-body + .yh-dialog-footer {
  margin-top: 0;
}

@media (max-width: 480px) {
  .yh-dialog-footer {
    flex-direction: column-reverse;
  }

  .yh-dialog-footer .yh-button {
    width: 100%;
  }
}

/* ------------------------------------------------------------ menu */

.yh-menu-root {
  position: relative;
  display: inline-block;
}

.yh-menu {
  box-sizing: border-box;
  min-width: 12rem;
  max-width: calc(100vw - var(--space-8));
  padding: var(--space-1);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-popover);
}

/* Server-rendered menus are positioned by CSS; Radix menus by its popper. */
.yh-menu-root > .yh-menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
}

.yh-menu-root > .yh-menu[data-align='end'] {
  right: 0;
  left: auto;
}

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

.yh-menu-head {
  padding: var(--space-2) var(--space-3) var(--space-3);
  margin-bottom: var(--space-1);
  border-bottom: 1px solid var(--color-border);
}

.yh-menu-name {
  font-weight: var(--weight-semibold);
  overflow-wrap: anywhere;
}

.yh-menu-detail {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  overflow-wrap: anywhere;
}

.yh-menu-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-2);
  box-sizing: border-box;
  width: 100%;
  min-height: var(--yh-control);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  outline: none;
}

.yh-menu-item:hover,
.yh-menu-item:focus-visible,
.yh-menu-item[data-highlighted] {
  background: var(--color-surface-subtle);
}

.yh-menu-item[data-tone='danger'] {
  color: var(--color-danger);
}

.yh-menu-item[data-disabled],
.yh-menu-item:disabled,
.yh-menu-item[aria-disabled='true'] {
  opacity: 0.5;
  pointer-events: none;
}

.yh-menu-separator {
  height: 1px;
  margin: var(--space-1) 0;
  background: var(--color-border);
}

/* ------------------------------------------------------------ popover and tooltip */

.yh-popover {
  box-sizing: border-box;
  width: max-content;
  max-width: min(22rem, calc(100vw - var(--space-8)));
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-popover);
  line-height: var(--leading-base);
}

.yh-tooltip {
  box-sizing: border-box;
  max-width: 20rem;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: var(--text-sm);
  z-index: var(--z-toast);
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------ select list (Radix) */

.yh-select-content {
  box-sizing: border-box;
  min-width: var(--radix-select-trigger-width, 8rem);
  max-height: min(20rem, var(--radix-select-content-available-height, 20rem));
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  z-index: var(--z-popover);
}

.yh-select-viewport {
  padding: var(--space-1);
}

.yh-select-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--yh-control);
  padding: 0 var(--space-3);
  border-radius: var(--radius-sm);
  cursor: pointer;
  outline: none;
  user-select: none;
}

.yh-select-item[data-highlighted] {
  background: var(--color-surface-subtle);
}

.yh-select-item[data-state='checked'] {
  color: var(--color-brand);
  font-weight: var(--weight-medium);
}

.yh-select-item[data-disabled] {
  opacity: 0.5;
  pointer-events: none;
}

/* ------------------------------------------------------------ toast */

.yh-toast-region {
  position: fixed;
  right: var(--space-4);
  bottom: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  width: min(22rem, calc(100vw - var(--space-8)));
  margin: 0;
  padding: 0;
  list-style: none;
  pointer-events: none;
}

.yh-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  box-sizing: border-box;
  width: 100%;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-left-width: 3px;
  border-radius: var(--control-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
  pointer-events: auto;
}

.yh-toast[data-tone='success'] {
  border-left-color: var(--color-success);
}

.yh-toast[data-tone='danger'] {
  border-left-color: var(--color-danger);
}

.yh-toast[data-tone='warning'] {
  border-left-color: var(--color-warning);
}

.yh-toast[data-tone='info'] {
  border-left-color: var(--color-brand);
}

.yh-toast-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

.yh-toast-title {
  margin: 0;
  font-weight: var(--weight-semibold);
}

.yh-toast-close {
  flex: none;
}

@media (prefers-reduced-motion: no-preference) {
  .yh-toast {
    animation: yh-toast-in var(--duration-base) var(--ease-out);
  }
}

@keyframes yh-toast-in {
  from {
    opacity: 0;
    transform: translateY(0.5rem);
  }
}

@media (max-width: 480px) {
  .yh-toast-region {
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
    align-items: stretch;
  }
}

/* ------------------------------------------------------------ launcher panel (the "nine dots" menu) */

.yh-launcher {
  position: relative;
  display: inline-flex;
}

.yh-launcher-panel {
  position: absolute;
  top: calc(100% + var(--space-1));
  right: 0;
  z-index: var(--z-popover);
  box-sizing: border-box;
  width: 21rem;
  max-width: calc(100vw - var(--space-4));
  max-height: calc(100vh - var(--header-height) - var(--space-4));
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-raised);
}

.yh-launcher-panel[hidden] {
  display: none;
}

.yh-launcher-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3) var(--space-3);
}

.yh-launcher-group {
  grid-column: 1 / -1;
  margin: var(--space-2) var(--space-1) 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.yh-launcher-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-1);
  box-sizing: border-box;
  min-height: var(--hit-target);
  padding: var(--space-2) var(--space-1);
  border-radius: var(--control-radius);
  color: var(--color-text);
  font-size: var(--text-sm);
  line-height: var(--leading-compact);
  text-align: center;
  text-decoration: none;
  overflow-wrap: anywhere;
}

.yh-launcher-item:hover,
.yh-launcher-item:focus-visible {
  background: var(--color-surface-subtle);
}

.yh-launcher-item[aria-current='true'] {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
}

.yh-launcher-icon {
  width: var(--launcher-icon);
  height: var(--launcher-icon);
  object-fit: contain;
}

.yh-launcher-message {
  grid-column: 1 / -1;
  margin: 0;
  padding: var(--space-4);
  color: var(--color-text-secondary);
}

.yh-launcher-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  padding: var(--space-1) var(--space-3);
  border-top: 1px solid var(--color-border);
}

.yh-launcher-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--yh-control);
  color: var(--color-brand);
  text-decoration: none;
}

.yh-launcher-footer a:hover {
  text-decoration: underline;
}

/* Under 480px the panel is a full-width sheet below the header. */
@media (max-width: 480px) {
  .yh-launcher {
    position: static;
  }

  .yh-launcher-panel {
    position: fixed;
    top: var(--header-height);
    right: 0;
    left: 0;
    width: auto;
    max-width: none;
    max-height: calc(100vh - var(--header-height));
    border-width: 1px 0;
    border-radius: 0 0 var(--card-radius) var(--card-radius);
  }
}

/* Part 5: page frame. Header, Sidebar, PageHeader, Breadcrumb, standard (entry/status) pages. */

.yh-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--color-bg);
}

/* ------------------------------------------------------------ header (fixed at the top) */

.yh-skip {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--hit-target);
  position: absolute;
  left: var(--space-2);
  top: -100%;
  z-index: var(--z-toast);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--control-radius);
  background: var(--color-brand);
  color: var(--color-on-brand);
}

.yh-skip:focus {
  top: var(--space-2);
}

.yh-header {
  position: sticky;
  top: 0;
  z-index: var(--z-navigation);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.yh-header-bar {
  display: flex;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  box-sizing: border-box;
  min-height: var(--header-height);
  padding: 0 var(--space-4);
}

.yh-brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
  flex: 0 1 auto;
}

.yh-logo {
  display: inline-flex;
  flex: none;
}

.yh-app-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
}

.yh-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
}

.yh-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--yh-control);
  padding: 0 var(--space-3);
  border-radius: var(--control-radius);
  color: var(--color-text-secondary);
  text-decoration: none;
  white-space: nowrap;
}

.yh-nav a:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.yh-nav a[aria-current],
.yh-nav a[aria-current='page'] {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-weight: var(--weight-medium);
}

.yh-header-end {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.yh-account {
  position: relative;
}

.yh-account-button {
  gap: var(--space-2);
  width: auto;
  padding: 0 var(--space-2);
}

.yh-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-full);
  background: var(--color-brand);
  color: var(--color-on-brand);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
}

.yh-account-name {
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------------------------ body, sidebar and main */

.yh-body {
  display: flex;
  flex: 1 1 auto;
  align-items: flex-start;
  min-width: 0;
}

.yh-main {
  flex: 1 1 auto;
  box-sizing: border-box;
  min-width: 0;
  max-width: var(--ak-content-width, var(--content-width));
  margin: 0 auto;
  padding: var(--space-6) var(--page-gutter);
}

.yh-shell[data-sidebar='true'] .yh-main {
  margin: 0;
  max-width: none;
}

.yh-main:focus {
  outline: none;
}

.yh-content {
  max-width: var(--ak-content-width, var(--content-width));
  margin: 0 auto;
}

.yh-sidebar {
  position: sticky;
  top: var(--header-height);
  flex: none;
  box-sizing: border-box;
  width: var(--sidebar-width);
  height: calc(100vh - var(--header-height));
  padding: var(--space-3);
  overflow-y: auto;
  border-right: 1px solid var(--color-border);
  background: var(--color-surface);
}

.yh-sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.yh-sidebar-group {
  margin: var(--space-4) var(--space-3) var(--space-1);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
}

.yh-nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  box-sizing: border-box;
  min-height: var(--yh-control);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--control-radius);
  background: transparent;
  color: var(--color-text-secondary);
  font: inherit;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

.yh-nav-item:hover {
  background: var(--color-surface-subtle);
  color: var(--color-text);
}

.yh-nav-item[aria-current],
.yh-nav-item[aria-current='page'],
.yh-nav-item[data-active] {
  background: var(--color-brand-subtle);
  color: var(--color-brand);
  font-weight: var(--weight-medium);
}

.yh-sidebar-toggle {
  display: none;
}

.yh-sidebar-backdrop {
  display: none;
}

/* Narrow screens: the sidebar becomes a drawer opened from the header. */
@media (max-width: 800px) {
  .yh-sidebar-toggle {
    display: inline-flex;
  }

  .yh-sidebar {
    position: fixed;
    top: var(--header-height);
    bottom: 0;
    left: 0;
    z-index: var(--z-popover);
    height: auto;
    width: min(var(--sidebar-width), calc(100vw - var(--space-12)));
    box-shadow: var(--shadow-raised);
    transform: translateX(-100%);
    visibility: hidden;
    transition:
      transform var(--duration-base) var(--ease-out),
      visibility 0s linear var(--duration-base);
  }

  .yh-sidebar[data-open='true'] {
    transform: none;
    visibility: visible;
    transition-delay: 0s;
  }

  .yh-sidebar-backdrop[data-open='true'] {
    display: block;
    position: fixed;
    inset: var(--header-height) 0 0;
    z-index: calc(var(--z-popover) - 1);
    background: var(--color-backdrop);
  }
}

@media (max-width: 720px) {
  .yh-nav {
    display: none;
  }

  /* Without a sidebar the top navigation moves into a scrollable second row. */
  .yh-shell[data-sidebar='false'] .yh-header-bar {
    flex-wrap: wrap;
    padding-bottom: var(--space-1);
  }

  .yh-shell[data-sidebar='false'] .yh-nav {
    display: flex;
    order: 3;
    flex-basis: 100%;
  }
}

@media (max-width: 480px) {
  .yh-header-bar {
    gap: var(--space-1) var(--space-2);
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .yh-account-name {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .yh-main {
    padding-top: var(--space-4);
    padding-bottom: var(--space-4);
  }
}

@media (prefers-reduced-motion: reduce) {
  .yh-sidebar {
    transition: none;
  }
}

/* ------------------------------------------------------------ page header and breadcrumb */

.yh-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
}

.yh-page-heading {
  min-width: 0;
  flex: 1 1 16rem;
}

.yh-page-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
}

.yh-page-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.yh-count {
  color: var(--color-text-secondary);
  font-size: var(--text-base);
  font-variant-numeric: tabular-nums;
}

.yh-page-desc {
  margin: var(--space-1) 0 0;
  color: var(--color-text-secondary);
}

.yh-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.yh-breadcrumb {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
}

.yh-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
  color: var(--color-text-secondary);
}

.yh-breadcrumb li + li::before {
  content: '/';
  margin-right: var(--space-1);
  color: var(--color-text-muted);
}

.yh-breadcrumb a {
  color: var(--color-brand);
  text-decoration: none;
}

.yh-breadcrumb a:hover {
  text-decoration: underline;
}

.yh-page-section {
  margin-top: var(--space-6);
}

/* The bottom "危险操作" section of a detail page. */
.yh-danger-zone {
  margin-top: var(--space-8);
}

.yh-danger-zone .yh-danger-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border);
}

.yh-danger-zone .yh-danger-item:last-child {
  border-bottom: 0;
}

.yh-danger-item p {
  margin: 0;
}

/* ------------------------------------------------------------ standard pages (sign-in, status, errors) */

.yh-entry {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 100vh;
  padding: var(--space-4);
  background: var(--color-bg);
}

.yh-entry-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  box-sizing: border-box;
  width: 100%;
  max-width: 26rem;
  padding: var(--space-8) var(--space-6);
  border: 1px solid var(--color-border);
  border-radius: var(--card-radius);
  background: var(--color-surface);
  text-align: center;
}

.yh-entry-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
}

.yh-entry-text {
  margin: 0;
  color: var(--color-text-secondary);
  overflow-wrap: anywhere;
}

.yh-entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
}

@media (max-width: 480px) {
  .yh-entry-card {
    padding: var(--space-6) var(--space-4);
  }

  .yh-entry-actions .yh-button {
    flex: 1 1 100%;
  }
}

/* A status page inside the frame (403, 404, 500, empty): left-aligned, no card. */
.yh-state-page {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  max-width: 32rem;
  padding: var(--space-12) 0;
}

.yh-state-page h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
}

.yh-state-page p {
  margin: 0;
  color: var(--color-text-secondary);
}