/* Shared, deliberately restrained foundation for every Family product page. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body[data-family-ui] {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  color: var(--family-text);
  background: var(--family-bg);
  font-family: var(--family-font);
  font-size: var(--family-text-body);
  line-height: var(--family-line-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body[data-family-ui],
body[data-family-ui] *,
body[data-family-ui] *::before,
body[data-family-ui] *::after {
  box-sizing: border-box;
}

body[data-family-ui] :where(button, input, select, textarea) {
  min-width: 0;
  max-width: 100%;
  font: inherit;
}

body[data-family-ui] :where(button, [role="button"], a[href], input, select, textarea, summary) {
  -webkit-tap-highlight-color: transparent;
}

body[data-family-ui] :where(button, [role="button"], a[href], input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--family-info);
  outline-offset: 2px;
  box-shadow: var(--family-focus-ring);
}

body[data-family-ui] :where(button, input, select, textarea):disabled,
body[data-family-ui] [aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--family-disabled-opacity);
}

body[data-family-ui] :where(img, svg, video, canvas) {
  max-width: 100%;
}

body[data-family-ui] :where(p, li, dd, td, th, label, button, a) {
  overflow-wrap: break-word;
}

body[data-family-ui] [hidden] {
  display: none !important;
}

body[data-family-ui] .family-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body[data-family-ui] .family-empty-state {
  padding: var(--family-space-8) var(--family-space-5);
  border: 1px dashed var(--family-border-strong);
  border-radius: var(--family-radius-lg);
  color: var(--family-text-muted);
  background: var(--family-surface-subtle);
  text-align: center;
}

body[data-family-ui] .family-inline-status {
  display: inline-flex;
  min-height: 28px;
  align-items: center;
  gap: var(--family-space-2);
  padding: 4px 10px;
  border: 1px solid var(--family-border);
  border-radius: var(--family-radius-pill);
  color: var(--family-text-secondary);
  background: var(--family-surface-subtle);
  font-size: var(--family-text-caption);
  font-weight: var(--family-weight-medium);
  line-height: var(--family-line-compact);
}

body[data-family-ui] .family-inline-status[data-tone="success"] {
  border-color: color-mix(in srgb, var(--family-success) 28%, var(--family-border));
  color: var(--family-success-text);
  background: var(--family-success-soft);
}

body[data-family-ui] .family-inline-status[data-tone="warning"] {
  border-color: color-mix(in srgb, var(--family-warning) 28%, var(--family-border));
  color: var(--family-warning);
  background: var(--family-warning-soft);
}

body[data-family-ui] .family-inline-status[data-tone="danger"] {
  border-color: color-mix(in srgb, var(--family-danger) 28%, var(--family-border));
  color: var(--family-danger);
  background: var(--family-danger-soft);
}

body[data-family-ui] .family-scroll-lock {
  overflow: hidden;
  overscroll-behavior: contain;
}

@media (max-width: 640px) {
  body[data-family-ui] :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
    font-size: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body[data-family-ui],
  body[data-family-ui] *,
  body[data-family-ui] *::before,
  body[data-family-ui] *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  body[data-family-ui] :where(button, [role="button"], a[href], input, select, textarea, summary):focus-visible {
    outline: 2px solid CanvasText;
    box-shadow: none;
  }

  body[data-family-ui] .family-inline-status,
  body[data-family-ui] .family-empty-state {
    border-color: CanvasText;
  }
}

/* 兼容入口只承担旧链接过渡，也应服从现行工作台的视觉秩序。 */
body[data-family-ui="legacy"] :where(.frame, .focus-frame, .portal-card) {
  background: var(--family-surface) !important;
  border: 1px solid var(--family-border) !important;
  border-radius: var(--family-radius-lg) !important;
  box-shadow: var(--family-shadow-xs) !important;
  backdrop-filter: none !important;
}

body[data-family-ui="legacy"] :where(.frame::before, .frame::after, .focus-frame::before, .focus-frame::after) {
  display: none !important;
}