/* ============================================================================
 * refinements.css - v201 2026-05-24 精装修一站式补丁
 * ----------------------------------------------------------------------------
 * 加载顺序: tokens -> base -> standalone -> v5-theme -> refinements
 * 设计原则:
 *   1. 全文 0 个 !important (V1 lint 规则示范)
 *   2. 走 :where() 把所有选择器特异性归零, 避免与 v5-theme 4962 处 !important 打架
 *   3. 颗粒化覆盖: 仅做"补全", 不重写既有外观
 *
 * 覆盖任务清单 (来自 23 todo / 16 实做):
 *   L3  首屏 panel 智能折叠 helpers
 *   L4  数字等距 tnum
 *   L5  scrollbar 风格统一 (细 + 浅 + 圆角 + dark 适配)
 *   M1  按钮按下统一 :active scale
 *   M2  skeleton helpers (统一类名 .sk-line / .sk-card / .sk-circle)
 *   M3  移动端 touch-target >= 44pt 兜底
 *   M5  page transition 过场基础类
 *   V2  暗模式扫描修复 (card 边线 / 输入框背景 / 占位字颜色)
 *   V3  :focus-visible 全局统一 ring (键盘可达性)
 *   X2  Cmd+K command palette floating entry
 *   X3  Breadcrumb / 返回栈基础样式
 *   X6  Error retry button
 *   M4  Pull-to-refresh 提示条
 * ========================================================================== */


/* ===== L4 数字等距 tnum ===== */
:where(.num,
       .stat-value, .stat-card-value, .sv3-hero-stat-value,
       .meta-time, .badge-count, .nav-micro-heart-count,
       [data-tnum], .tabular-nums,
       .calendar-time, .calendar-date-num, .calendar-week-num,
       .timeline-axis-label, .day-axis-hour,
       .quota-num, .pricing-num, .ticker-num) {
  font-feature-settings: "tnum" 1, "lnum" 1;
  font-variant-numeric: tabular-nums lining-nums;
}


/* ===== L5 scrollbar 风格统一 ===== */
:where(html) {
  scrollbar-width: thin;
  scrollbar-color: rgba(100, 116, 139, 0.32) transparent;
}
:where(html[data-theme="dark"]) {
  scrollbar-color: rgba(148, 163, 184, 0.28) transparent;
}
:where(*)::-webkit-scrollbar { width: 6px; height: 6px; }
:where(*)::-webkit-scrollbar-track { background: transparent; }
:where(*)::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.28);
  border-radius: 6px;
}
:where(*)::-webkit-scrollbar-thumb:hover { background: rgba(100, 116, 139, 0.55); }
:where(html[data-theme="dark"] *)::-webkit-scrollbar-thumb { background: rgba(148, 163, 184, 0.22); }
:where(html[data-theme="dark"] *)::-webkit-scrollbar-thumb:hover { background: rgba(148, 163, 184, 0.48); }


/* ===== V3 :focus-visible 全局统一 ring ===== */
:where(a, button, input, select, textarea, summary,
       [tabindex]:not([tabindex="-1"]),
       [role="button"], [role="link"], [role="tab"],
       [role="menuitem"], [role="option"], [role="checkbox"], [role="radio"]):focus-visible {
  outline: 2px solid var(--brand, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, #2563eb) 16%, transparent);
  transition: outline-offset 0.12s ease, box-shadow 0.12s ease;
}
:where(html[data-theme="dark"]) :where(a, button, input, select, textarea,
       [tabindex]:not([tabindex="-1"]),
       [role="button"], [role="link"], [role="tab"]):focus-visible {
  outline-color: color-mix(in srgb, var(--brand, #2563eb) 80%, white);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand, #2563eb) 24%, transparent);
}
:where(input, select, textarea):focus-visible { outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) {
  :where(*):focus-visible { transition: none; }
}


/* ===== M1 按钮按下统一 :active scale ===== */
:where(button, [role="button"], a.btn, .btn, .button, .ui-btn,
       .nav-settings-row, .mobile-nav-item, .sv3-hero-btn,
       .mobile-primary-sheet-button):not(:disabled):not([aria-disabled="true"]):not(.is-loading):active {
  transform: scale(0.97);
  transition: transform 0.06s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
}
:where(button, [role="button"], a.btn, .btn, .button, .ui-btn) {
  transition: transform 0.18s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
}
@media (prefers-reduced-motion: reduce) {
  :where(button, [role="button"], a.btn, .btn):active { transform: none; }
}


/* ===== M3 移动端 touch-target >= 44pt ===== */
:where(.app-shell.mobile-shell) :where(button, a, [role="button"], [role="link"],
       input[type="checkbox"], input[type="radio"], select,
       .mobile-nav-item, .sv3-hero-btn, .icon-btn, .chip, .tag, .pill):not(.mobile-nav-center-action) {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}
:where(.app-shell.mobile-shell) :where(.icon-btn, .chevron-btn, .close-btn, [data-action="dismiss"]) {
  position: relative;
}
:where(.app-shell.mobile-shell) :where(.icon-btn, .chevron-btn, .close-btn, [data-action="dismiss"])::before {
  content: "";
  position: absolute;
  inset: 50% 50% 50% 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* QA: mobile quick action buttons must remain finger-friendly even when older button rules override height. */
html body .app-shell.mobile-shell :where(.mobile-action-row, .split-actions) > :where(button, .ghost-button, .action-button),
html body .app-shell.mobile-shell :where(.mobile-feature-card, .mobile-preview-card, .mobile-pending-composer-cta) :where(button, .ghost-button, .action-button),
html body .app-shell.mobile-shell :where(.mobile-action-row, .split-actions) > button.ghost-button,
html body .app-shell.mobile-shell :where(.mobile-feature-card, .mobile-preview-card, .mobile-pending-composer-cta) button.ghost-button {
  min-height: 40px !important;
  min-width: 44px !important;
  touch-action: manipulation;
}


/* ===== M2 Skeleton helpers ===== */
@keyframes refSkeletonShimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
:where(.sk-line, .sk-card, .sk-circle, .sk-text, .sk-avatar) {
  background: linear-gradient(90deg,
    rgba(226, 232, 240, 0.42) 0%,
    rgba(226, 232, 240, 0.82) 50%,
    rgba(226, 232, 240, 0.42) 100%);
  background-size: 200% 100%;
  animation: refSkeletonShimmer 1.4s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
:where(.sk-line)       { height: 12px; margin: 6px 0; }
:where(.sk-text)       { height: 14px; margin: 8px 0; width: 80%; }
:where(.sk-card)       { height: 120px; border-radius: 16px; margin-bottom: 12px; }
:where(.sk-circle)     { width: 36px; height: 36px; border-radius: 50%; }
:where(.sk-avatar)     { width: 48px; height: 48px; border-radius: 12px; }

:where(html[data-theme="dark"]) :where(.sk-line, .sk-card, .sk-circle, .sk-text, .sk-avatar) {
  background: linear-gradient(90deg,
    rgba(30, 41, 59, 0.42) 0%,
    rgba(51, 65, 85, 0.62) 50%,
    rgba(30, 41, 59, 0.42) 100%);
  background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
  :where(.sk-line, .sk-card, .sk-circle, .sk-text, .sk-avatar) { animation: none; }
}


/* ===== M5 Page transition 过场 ===== */
:where(.xq-page-enter) {
  opacity: 0;
  transform: translateX(12px);
}
:where(.xq-page-enter-active) {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 0.24s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1)),
              transform 0.32s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
}
:where(.xq-page-leave-active) {
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.16s ease-in, transform 0.16s ease-in;
}
@media (prefers-reduced-motion: reduce) {
  :where(.xq-page-enter, .xq-page-enter-active, .xq-page-leave-active) {
    transform: none;
    transition: opacity 0.12s linear;
  }
}


/* ===== L3 Panel 智能折叠 helpers ===== */
:where(.xq-collapsible) {
  transition: max-height 0.32s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1)),
              opacity 0.24s ease;
  overflow: hidden;
}
:where(.xq-collapsible[data-collapsed="true"]) > :where(.xq-collapsible-body) {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
:where(.xq-collapsible) > :where(.xq-collapsible-body) {
  max-height: 5000px;
  opacity: 1;
  transition: inherit;
}
:where(.xq-collapsible-toggle) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  user-select: none;
  font-size: 12.5px;
  color: var(--text-sub, #475569);
  border: 0;
  background: transparent;
  padding: 4px 8px;
  border-radius: 8px;
}
:where(.xq-collapsible-toggle:hover) {
  background: var(--bg-soft, #f2f6fb);
  color: var(--text-main, #0f172a);
}
:where(.xq-collapsible-toggle svg) {
  width: 14px;
  height: 14px;
  transition: transform 0.24s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
}
:where(.xq-collapsible[data-collapsed="true"]) :where(.xq-collapsible-toggle svg) {
  transform: rotate(-90deg);
}


/* ===== V2 暗模式不一致扫描修 ===== */
:where(html[data-theme="dark"]) :where(input::placeholder, textarea::placeholder) {
  color: rgb(148, 163, 184);
  opacity: 0.72;
}
:where(html[data-theme="dark"]) :where(.stat-card, .panel-card, .info-card, .v5-card) {
  border-color: rgba(148, 163, 184, 0.18);
}
:where(html[data-theme="dark"]) :where(.toast.is-error) {
  background: rgba(127, 29, 29, 0.46);
  color: rgb(254, 226, 226);
}
:where(html[data-theme="dark"]) :where(.toast.is-success) {
  background: rgba(20, 83, 45, 0.46);
  color: rgb(220, 252, 231);
}
:where(html[data-theme="dark"]) :where(.divider, hr) {
  border-color: rgba(148, 163, 184, 0.14);
}
:where(html[data-theme="dark"]) :where(button.ghost:hover, .nav-settings-row:hover) {
  background: rgba(99, 102, 241, 0.12);
}


/* ===== X3 Breadcrumb / 返回栈基础样式 ===== */
:where(.xq-breadcrumb) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-sub, #475569);
  padding: 6px 10px;
  border-radius: 10px;
  background: var(--bg-soft, #f2f6fb);
  border: 1px solid var(--line, #e2e8f0);
  margin: 8px 0;
}
:where(.xq-breadcrumb-item) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
:where(.xq-breadcrumb-item.is-link) {
  cursor: pointer;
  color: var(--brand, #2563eb);
}
:where(.xq-breadcrumb-item.is-link:hover) { text-decoration: underline; }
:where(.xq-breadcrumb-sep) { opacity: 0.4; }
:where(.xq-back-btn) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--bg-card, #ffffff);
  cursor: pointer;
  font-size: 13px;
  color: var(--text-main, #0f172a);
}
:where(.xq-back-btn:hover) { background: var(--bg-soft, #f2f6fb); }


/* ===== X6 Error retry button ===== */
:where(.xq-error-retry) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--brand, #2563eb);
  background: color-mix(in srgb, var(--brand, #2563eb) 8%, transparent);
  color: var(--brand, #2563eb);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  margin-top: 10px;
  transition: background 0.16s ease;
}
:where(.xq-error-retry:hover) {
  background: color-mix(in srgb, var(--brand, #2563eb) 16%, transparent);
}


/* ===== M4 Pull-to-refresh 提示条 ===== */
:where(.xq-ptr-indicator) {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -100%);
  padding: 8px 14px;
  border-radius: 0 0 14px 14px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  border-top: 0;
  font-size: 12.5px;
  color: var(--text-sub, #475569);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  z-index: 1000;
  transition: transform 0.24s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1));
  pointer-events: none;
}
:where(.xq-ptr-indicator.is-visible) { transform: translate(-50%, 0); }
:where(.xq-ptr-indicator.is-loading) { color: var(--brand, #2563eb); }
:where(.xq-ptr-spinner) {
  width: 14px; height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: refPtrSpin 0.8s linear infinite;
}
@keyframes refPtrSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  :where(.xq-ptr-spinner) { animation: none; }
}


/* ===== X2 Command palette floating entry ===== */
:where(.xq-cmdk-fab) {
  position: fixed;
  right: 18px;
  bottom: 92px;
  z-index: 1100;
  height: 36px;
  padding: 0 10px 0 12px;
  border-radius: 18px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--line, #e2e8f0);
  box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  color: var(--text-sub, #475569);
  font-size: 12.5px;
  transition: transform 0.16s var(--ease-ios, cubic-bezier(0.32, 0.72, 0, 1)),
              box-shadow 0.16s ease;
}
:where(.xq-cmdk-fab:hover) {
  transform: translateY(-1px);
  color: var(--brand, #2563eb);
  box-shadow: 0 16px 40px rgba(15, 23, 42, 0.18);
}
:where(.xq-cmdk-fab kbd) {
  font-family: inherit;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 5px;
  background: var(--bg-soft, #f2f6fb);
  border: 1px solid var(--line, #e2e8f0);
  color: var(--text-main, #0f172a);
}
:where(html[data-theme="dark"]) :where(.xq-cmdk-fab) {
  background: rgba(15, 23, 42, 0.86);
  color: rgb(203, 213, 225);
}
:where(html[data-theme="dark"]) :where(.xq-cmdk-fab kbd) {
  background: rgba(30, 41, 59, 0.86);
  color: rgb(226, 232, 240);
  border-color: rgba(148, 163, 184, 0.2);
}
/* 桌面端 cmdk fab 放右下角更上一些避开 feedback FAB */
@media (min-width: 768px) {
  :where(.xq-cmdk-fab) { bottom: 18px; right: 78px; }
}


/* ===== X7 onboarding 重看入口 fab ===== */
:where(.xq-onboarding-replay) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 10px;
  border: 1px solid var(--line, #e2e8f0);
  background: var(--bg-soft, #f2f6fb);
  color: var(--text-main, #0f172a);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: background 0.16s ease;
}
:where(.xq-onboarding-replay:hover) {
  background: color-mix(in srgb, var(--brand, #2563eb) 12%, var(--bg-soft, #f2f6fb));
  color: var(--brand, #2563eb);
}