/* ===========================================================
   共享组件补丁
   -----------------------------------------------------------
   本文件承接原先由 components/header.js 动态注入的 <style> 内容。
   那段样式游离在 CSS 文件体系之外、优先级最高，是「补丁摞补丁」
   的根源。迁回此处后不再需要任何 !important。

   加载顺序：tokens.css → site.css → components.css → (chart.css)
   =========================================================== */

/* [hidden] 属性必须真的隐藏 —— 这是 UA 样式表的默认行为，显式声明一道。
   ⚠ 这里**必须带 !important**。原注释写的是「无需 !important，只要本文件
     在组件样式之前加载即可」—— 那是错的：[hidden] 与 .pet-field 这类
     单类选择器特指度同为 (0,1,0)，**平手时按加载顺序定胜负**，而
     components.css 恰恰排在 pet.css 之前，于是 .pet-field{display:block}
     稳赢，JS 里 el.hidden = true 之后元素照常显示。
     页面上看着像「JS 没跑」，其实 JS 完全没错 —— 2026-09-26 时间轴页
     的「选体重时照片框还在」就是这个原因。
     与其在每处写了 display 的组件里各补一条，不如在这一处把话说死。 */
[hidden] { display: none !important; }

/* 同源页面使用浏览器原生跨文档转场：链接仍然立即发起请求，不像旧实现那样
   先等 320ms 动画再跳。只做极轻的透明度衔接，避免整页位移影响定位感；
   不支持 View Transitions 的浏览器会自动退化成普通跳转。 */
@view-transition { navigation: auto; }

::view-transition-old(root) {
  animation: lq-page-out 100ms cubic-bezier(.4, 0, 1, 1) both;
}

::view-transition-new(root) {
  animation: lq-page-in 180ms cubic-bezier(.16, 1, .3, 1) 20ms both;
}

/* 克制动效系统：所有位移与显隐只使用 transform / opacity。 */
:where(a, button, input, select, textarea, summary, [role="button"]) {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(154, 113, 50, .12);
}

/* 可点元素与文字不可在快速连点时被误选中；横向日历和长文内容不受影响。 */
:where(a, button, summary, [role="button"], .portal, .card-link, .sample, .slot) {
  -webkit-user-select: none;
  user-select: none;
}

:where(a, button, summary, [role="button"]):focus-visible,
:where(input, select, textarea):focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

:where(button, .button, .portal, .card-link, .sample, .slot, .star-chip, .rel-index-chip) {
  transition:
    transform var(--dur-fast) var(--ease),
    box-shadow var(--dur) var(--ease),
    border-color var(--dur) var(--ease),
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease),
    opacity var(--dur-fast) var(--ease);
}

:where(button, .button, .portal, .card-link, .sample, .slot, .star-chip, .rel-index-chip):active {
  transform: scale(var(--press-scale));
}

:where(button, .button):disabled,
[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

body.motion-ready { animation: page-enter var(--dur) var(--ease-in) both; }
body.page-leaving { animation: page-exit var(--dur-fast) var(--ease-out) both; pointer-events: none; }

.site-header {
  transition: background-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.site-header.is-scrolled { box-shadow: 0 8px 28px rgba(10,35,32,.08); }

.motion-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-fast) var(--ease-in), transform var(--dur-fast) var(--ease-in);
}

.motion-reveal.is-visible { opacity: 1; transform: none; }

.back-to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px));
  z-index: var(--z-sticky);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--gold-line);
  border-radius: 2px 14px 2px 14px;
  background: color-mix(in srgb, var(--card) 92%, transparent);
  color: var(--jade);
  box-shadow: var(--sh-2);
  opacity: 0;
  transform: translateY(var(--move-md));
  pointer-events: none;
  backdrop-filter: blur(12px);
}

.back-to-top.show { opacity: 1; transform: none; pointer-events: auto; }

.spinner {
  display: inline-block;
  width: 17px;
  height: 17px;
  margin-right: 8px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  vertical-align: -3px;
  animation: spin .75s linear infinite;
}

.skeleton-line,
.skeleton-block {
  overflow: hidden;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: transparent;
}

.skeleton-line::after,
.skeleton-block::after {
  content: '';
  display: block;
  width: 45%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.62), transparent);
  animation: shimmer 1.25s ease-in-out infinite;
}

.is-invalid { border-color: var(--red) !important; animation: field-shake 300ms var(--ease); }
.form-error:not(:empty) { animation: error-enter var(--dur) var(--ease-in) both; }
.is-success { border-color: var(--green) !important; }
.form-grid.is-submitting { opacity: .72; pointer-events: none; }
.slots.is-invalid { outline: 1px solid var(--red); outline-offset: 5px; animation: field-shake 300ms var(--ease); }

@keyframes page-enter { from { opacity: 0; transform: translateY(var(--move-md)); } }
@keyframes page-exit { to { opacity: 0; transform: translateY(-8px); } }
@keyframes lq-page-out { to { opacity: .94; } }
@keyframes lq-page-in { from { opacity: .94; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer { from { transform: translateX(-140%); } to { transform: translateX(320%); } }
@keyframes error-enter { from { opacity: 0; transform: translateY(-4px); } }
@keyframes field-shake { 0%,100%{transform:none} 25%{transform:translateX(-4px)} 75%{transform:translateX(4px)} }

@media (hover: hover) and (pointer: fine) {
  :where(button:not(:disabled), .button, .slot:not(.disabled)):hover { transform: translateY(-1px); box-shadow: var(--sh-1); }
  :where(.card-link, .portal, .sample):hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .motion-reveal { opacity: 1; transform: none; }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}

/* ---------- 窄屏下的专业细盘 ----------
   细盘表格列多，620px 以下需要压缩：去掉横向滚动、
   收窄行首宽度、干支字号随之下调。 */
@media (max-width: 620px) {
  .pro-table { min-width: 100%; }

  .pro-table tbody th { width: 52px; }

  .pro-table th,
  .pro-table td { padding: 7px 2px; }

  .pro-table .stem,
  .pro-table .branch { font-size: var(--fs-ganzhi-sm); }

  .tiny-lines { font-size: 11px; }
}