/**
 * apple.css — Apple（毛玻璃 / SF 风）皮肤
 *
 * 只改材质：半透明表面 + backdrop blur + 更小圆角 + 更轻的描边与阴影。
 * 颜色仍然全部来自 M3 角色变量（--md-sys-color-*），所以种子色、error、
 * success、深浅色主题都继续生效。
 *
 * 重要：皮肤文件只声明 token，不写 st-* 宿主选择器。组件经常位于
 * o-page / o-app 的 shadow 内，文档树选择器跨不进去；而 CSS 变量可以
 * 正常继承穿透 shadow，因此 token 是唯一可靠的换肤通道。
 *
 * 使用：<html data-skin="apple"> + 引入本文件（或 setSkin("apple")）。
 */
[data-skin="apple"] {
  /* 尺寸：36px 高（14px 字号下 2.571em），比 M3 略紧凑 */
  --st-height: 2.571em;
  --st-font-size: 14px;
  --st-control-radius: 0.714em; /* 10px */
  --st-field-radius: 0.857em; /* 12px */
  --st-split-min-width: 9em;
  --st-split-padding: 0 1.429em;
  --st-control-padding: 0 1.143em;
  --st-textarea-padding: .786em .929em;
  --st-field-padding: 0 0.929em;
  --st-border-width: 1px;

  /* 通用形状：更小的圆角、更紧凑的浮层 */
  --st-radius-xs: 0.286em;
  --st-radius-sm: 0.5em;
  --st-radius-md: 0.857em;
  --st-radius-lg: 1.143em;
  --st-radius-xl: 1.429em;
  --st-radius-pill: 999px;

  /* 半透明表面：surface 系角色混入透明度，深浅色主题自动适配 */
  --st-outlined-bg: rgb(from var(--md-sys-color-surface) r g b / 0.38);
  --st-outlined-border: color-mix(in srgb, var(--md-sys-color-outline) 32%, transparent);
  --st-field-bg: rgb(from var(--md-sys-color-surface-container-high) r g b / 0.4);
  --st-field-filled-bg: rgb(from var(--md-sys-color-surface-container-high) r g b / 0.46);
  --st-field-border: color-mix(in srgb, var(--md-sys-color-outline) 35%, transparent);
  --st-field-underline: transparent;
  --st-fill-alpha: 68%;

  /* 毛玻璃与浮起：黑色阴影属于材质而非主题色，故不随配色变化 */
  --st-shadow: 0 1px 1px rgb(0 0 0 / 0.05), 0 8px 24px -6px rgb(0 0 0 / 0.18);
  --st-field-shadow: 0 1px 2px rgb(0 0 0 / 0.08);
  --st-shadow-1: 0 1px 2px rgb(0 0 0 / 0.06), 0 6px 18px -8px rgb(0 0 0 / 0.16);
  --st-shadow-2: 0 2px 4px rgb(0 0 0 / 0.06), 0 14px 32px -10px rgb(0 0 0 / 0.2);
  --st-shadow-3: 0 2px 8px rgb(0 0 0 / 0.08), 0 16px 40px -12px rgb(0 0 0 / 0.22);
  --st-shadow-4: 0 8px 24px -6px rgb(0 0 0 / 0.18), 0 32px 64px -20px rgb(0 0 0 / 0.28);
  --st-shadow-overlay: 0 8px 28px -10px rgb(0 0 0 / 0.22);
  --st-shadow-thumb: 0 1px 3px rgb(0 0 0 / 0.22);
  --st-backdrop-filter: blur(18px) saturate(180%);
  --st-sheen: linear-gradient(
    180deg,
    color-mix(in srgb, var(--md-sys-color-on-primary) 10%, transparent),
    transparent 55%
  );

  /* 焦点：按钮用 accent 半透明外发光；输入框隐藏内嵌描边，改画外侧光圈 */
  --st-focus-ring-width: 4px;
  --st-focus-ring-offset: 1px;
  --st-focus-ring-color: color-mix(in srgb, var(--md-sys-color-primary) 30%, transparent);
  /* 焦点外发光：颜色由组件用 --st-accent 组合，皮肤只提供几何与透明度 */
  --st-field-focus-shadow: var(--st-field-shadow);
  --st-field-focus-glow-spread: 4px;
  --st-field-focus-glow-alpha: 22%;
  --st-field-focus-ring-opacity: 0;
  --st-field-underline-color: transparent;

  /* 半透明浮层 + 毛玻璃：颜色仍来自 M3 角色 */
  --st-badge-radius: 1.429em;
  --st-badge-font-size: .786em;
  --st-badge-shadow: var(--st-shadow-1);
  --st-dialog-radius: 1.429em;
  --st-card-radius: .857em;
  --st-nav-gap: .286em;
  --st-nav-gap-vertical: .143em;
  --st-nav-padding-vertical: .286em;
  --st-nav-item-padding: .786em .929em;
  --st-tooltip-fg: var(--md-sys-color-inverse-on-surface);
  --st-tab-height: 3.429em;
  --st-tab-layer-radius: .571em;
  --st-tabs-indicator-height: .143em;
  --st-tabs-indicator-radius: 999px;
  --st-tabs-border: transparent;
  --st-nav-pill-radius: 2em;
  --st-nav-bar-bg: rgb(from var(--md-sys-color-surface-container) r g b / 0.42);
  --st-nav-bar-backdrop-filter: blur(18px) saturate(180%);
  --st-progress-size: 2.857em;
  --st-progress-thickness: .286em;
  --st-progress-radius: .286em;
  --st-progress-duration: .22s;
  --st-slider-track-radius: .286em;
  --st-slider-thumb-radius: 50%;
  --st-slider-tip-radius: .5em;
  --st-slider-fill-alpha: 72%;
  --st-slider-backdrop-filter: blur(8px) saturate(150%);
  --st-slider-thumb-shadow: var(--st-shadow-thumb);
  --st-checkbox-radius: .5em;
  --st-checkbox-border-width: .143em;
  --st-checkbox-fill-alpha: 72%;
  --st-checkbox-backdrop-filter: blur(10px) saturate(160%);
  --st-switch-border-width: .143em;
  --st-switch-fill-alpha: 68%;
  --st-switch-backdrop-filter: blur(12px) saturate(160%);
  --st-radio-border-width: .143em;
  --st-radio-radius: 50%;
  --st-radio-fill-alpha: 76%;
  --st-radio-backdrop-filter: blur(8px) saturate(150%);
  --st-icon-radius: 50%;
  --st-menu-radius: .857em;
  --st-menu-item-radius: .5em;
  --st-select-popup-radius: .857em;
  --st-select-option-radius: .5em;
  --st-list-gap: 0.143em;
  --st-list-item-radius: .5em;
  --st-list-item-radius-outer: 1.143em;
  --st-list-item-height: 2.857em;
  --st-list-item-padding: 0.5em 0.857em;
  --st-dialog-bg: rgb(from var(--md-sys-color-surface-container-high) r g b / 0.52);
  --st-dialog-border: color-mix(in srgb, var(--md-sys-color-outline) 18%, transparent);
  --st-dialog-backdrop-filter: blur(24px) saturate(180%);
  --st-dialog-scrim: rgb(0 0 0 / 0.18);
  --st-dialog-scrim-filter: blur(18px) saturate(160%);
  --st-dialog-enter-duration: 280ms;
  --st-dialog-exit-duration: 180ms;
  --st-dialog-scrim-duration: 240ms;
  --st-menu-bg: rgb(from var(--md-sys-color-surface-container) r g b / 0.46);
  --st-menu-border: color-mix(in srgb, var(--md-sys-color-outline) 18%, transparent);
  /* 菜单是贴近正文的弹层：模糊比大面积表面轻，才能看出底下的内容轮廓 */
  --st-menu-backdrop-filter: blur(8px) saturate(140%);
  --st-card-bg: rgb(from var(--md-sys-color-surface-container-low) r g b / 0.38);
  --st-card-filled-bg: rgb(from var(--md-sys-color-surface-container-high) r g b / 0.42);
  --st-card-outlined-bg: rgb(from var(--md-sys-color-surface) r g b / 0.34);
  --st-card-border: color-mix(in srgb, var(--md-sys-color-outline) 32%, transparent);
  --st-card-outline: color-mix(in srgb, var(--md-sys-color-outline) 32%, transparent);
  --st-card-backdrop-filter: blur(18px) saturate(180%);
  --st-select-popup-bg: rgb(from var(--md-sys-color-surface-container) r g b / 0.48);
  --st-select-popup-border: color-mix(in srgb, var(--md-sys-color-outline) 18%, transparent);
  --st-select-popup-backdrop-filter: blur(18px) saturate(180%);
  --st-snackbar-radius: .857em;
  --st-snackbar-shadow: var(--st-shadow-1);
  --st-snackbar-surface: rgb(from var(--md-sys-color-secondary) r g b / 0.62);
  --st-snackbar-on-surface: var(--md-sys-color-on-secondary);
  --st-snackbar-backdrop-filter: blur(18px) saturate(180%);
  --st-tooltip-radius: .5em;
  --st-tooltip-shadow: var(--st-shadow-1);
  --st-tooltip-bg: rgb(from var(--md-sys-color-inverse-surface) r g b / 0.7);
  --st-tooltip-backdrop-filter: blur(18px) saturate(180%);

  /* 密度 */
  --st-dialog-padding: 1.429em;
  --st-dialog-gap: 1em;
  --st-menu-padding: 0.286em;
  --st-menu-item-padding: 0.714em 0.643em;
  --st-card-padding: 1em;
  --st-snackbar-padding: 0.5em 0.929em;
  --st-tooltip-padding: 0.321em 0.571em;

  /* 状态与动效 */
  --st-state-hover: 0.06;
  --st-state-press: 0.1;
  --st-disabled-opacity: 0.4;
  --st-ripple-opacity: 0; /* Apple 风格无波纹 */
  --st-motion-duration: 220ms;
  --st-motion-duration-fast: 160ms;
  --st-motion-duration-base: 220ms;
  --st-motion-duration-slow: 280ms;
  --st-motion-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --st-overlay-enter-duration: 220ms;
  --st-overlay-exit-duration: 160ms;
  --st-tooltip-duration: 160ms;

  /* 字体：系统栈，不引入外部字体文件 */
  --st-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
  --st-letter-spacing: -0.01em;
}