/* 生成物：由 tools/web/sync-prototype-css.mjs 从 docs/prototypes/2026-09-21-阳光玻璃忠实延展/page-interactions.css 逐字复制，勿手改。
   原型是唯一视觉真值；要改视觉先改原型，再跑 `node tools/web/sync-prototype-css.mjs .` 同步。 */
/* 其余页面共用交互：内容卡轻回应，信息面板仅边光，表格/表单反馈贴近操作。 */
.page-polish {
  --surface-enter: 220ms;
  --surface-exit: 560ms;
  --control-enter: 180ms;
  --control-exit: 320ms;
}
.page-polish [data-surface-motion] {
  position: relative;
  isolation: isolate;
}
.page-polish [data-surface-motion="card"] {
  translate: 0 0;
  transition: translate 440ms var(--m-ease-out), box-shadow 440ms var(--m-ease-out);
}
.page-polish [data-surface-art] {
  scale: 1;
  transition: scale 600ms var(--m-ease-out);
}
/* 独立装饰节点，避免占用页面已有的伪元素与点击区域。 */
.page-polish .surface-light {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--surface-exit) var(--m-ease-out);
}
.page-polish .surface-light::before,
.page-polish .surface-light::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.page-polish .surface-light::before {
  padding: 1px;
  background: radial-gradient(240px circle at var(--surface-x, 50%) var(--surface-y, 0%),
    var(--b-primary-glow), var(--b-glass-edge-a) 36%, transparent 78%);
  -webkit-mask: linear-gradient(var(--b-text-1) 0 0) content-box, linear-gradient(var(--b-text-1) 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(var(--b-text-1) 0 0) content-box, linear-gradient(var(--b-text-1) 0 0);
  mask-composite: exclude;
}
.page-polish .surface-light::after { content: none; }
.page-polish [data-surface-motion="card"] > .surface-light::after {
  content: "";
  background: radial-gradient(320px circle at var(--surface-x, 50%) var(--surface-y, 0%), var(--b-primary-tint), transparent 72%);
  opacity: .28;
}
.page-polish [data-surface-motion]:has(:focus-visible) > .surface-light,
.page-polish [data-surface-motion]:focus-visible > .surface-light { opacity: .8; }
.page-polish [data-surface-motion]:has(:focus-visible) > .surface-light::before,
.page-polish [data-surface-motion]:focus-visible > .surface-light::before {
  background: linear-gradient(135deg, var(--b-primary-glow), var(--b-glass-edge-b));
}
.page-polish :is(main, .sheet, .dock) .btn {
  min-height: 40px;
  border-radius: var(--b-radius-control);
  border: 1px solid transparent;
  gap: 10px;
  transform: none;
  transition: background-color var(--control-exit) var(--m-ease-out),
    border-color var(--control-exit) var(--m-ease-out), box-shadow var(--control-exit) var(--m-ease-out),
    transform var(--control-exit) var(--m-ease-out);
}
.page-polish :is(main, .sheet, .dock) .btn-ghost {
  background: var(--b-bg-card);
  border-color: var(--b-line);
  color: var(--b-text-1);
  box-shadow: inset 0 1px 0 var(--b-card-edge), 0 2px 5px var(--b-card-shadow);
}
.page-polish :is(main, .sheet, .dock) .btn-primary {
  background: var(--b-primary);
  color: var(--b-on-primary);
  box-shadow: inset 0 1px 0 var(--b-primary-top), 0 4px 12px -7px var(--b-primary-glow);
}
.page-polish :is(main, .sheet, .dock) :is(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--b-focus);
  outline-offset: 3px;
}
.page-polish :is(main, .sheet) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea) {
  transition: border-color var(--control-exit) var(--m-ease-out), box-shadow var(--control-exit) var(--m-ease-out), background-color var(--control-exit) var(--m-ease-out);
}
.page-polish main :is(.site-table, .admin-table) tbody > tr > td {
  transition: background-color var(--control-exit) var(--m-ease-out);
}
.page-polish main :is(.site-table, .admin-table) tbody > tr:focus-within > td { background: var(--b-bg-inset); }
.page-polish :is(main, .sheet) :is(.user-text-button, .link-btn, .site-tabs button) {
  min-height: 40px;
  border-radius: var(--b-radius-control);
  transition: color var(--control-exit) var(--m-ease-out), background-color var(--control-exit) var(--m-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .page-polish :is(main, .sheet, .dock) .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    transform: translateY(-1px);
    transition-duration: var(--control-enter);
  }
  .page-polish :is(main, .sheet, .dock) .btn-ghost:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--b-bg-inset);
    border-color: var(--b-line-strong);
    box-shadow: inset 0 1px 0 var(--b-card-edge), 0 4px 10px -4px var(--b-card-shadow-far);
  }
  .page-polish :is(main, .sheet, .dock) .btn-primary:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):hover {
    background: var(--b-primary-hover);
    box-shadow: inset 0 1px 0 var(--b-primary-top), 0 5px 16px -7px var(--b-primary-glow);
  }
  .page-polish main :is(.site-table, .admin-table) tbody > tr:hover > td {
    background: var(--b-bg-inset);
    transition-duration: var(--control-enter);
  }
  .page-polish :is(main, .sheet) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]), select, textarea):not(:disabled):not([readonly]):not([aria-invalid="true"]):hover {
    box-shadow: inset 0 0 0 1px var(--b-line-strong);
  }
  .page-polish :is(main, .sheet) :is(.user-text-button, .link-btn, .site-tabs button):not(:disabled):not([aria-disabled="true"]):hover {
    color: var(--b-primary-text);
    background: var(--b-bg-inset);
    transition-duration: var(--control-enter);
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .page-polish [data-surface-active] > .surface-light {
    opacity: 1;
    transition-duration: var(--surface-enter);
  }
  .page-polish [data-surface-motion="card"][data-surface-active] {
    translate: 0 -1px;
    box-shadow: inset 0 0 0 1px var(--b-line), inset 0 1px 0 var(--b-card-edge), 0 8px 22px -14px var(--b-card-shadow-far);
    transition-duration: var(--surface-enter);
  }
  .page-polish [data-surface-motion="card"][data-surface-active] [data-surface-art] {
    scale: 1.025;
    transition-duration: 360ms;
  }
}
.page-polish :is(main, .sheet, .dock) .btn:not(:disabled):not([aria-disabled="true"]):not([aria-busy="true"]):active {
  transform: translateY(1px);
  transition-duration: 100ms;
}
/* 禁用和忙碌优先于旧样张的 hover；保留忙碌转环的占位。 */
.page-polish :is(main, .sheet, .dock) .btn:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) {
  background: var(--b-neutral-tint);
  border-color: var(--b-line);
  color: var(--b-text-disabled);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}
.page-polish :is(main, .sheet, .dock) .btn[aria-busy="true"] { color: transparent; }
.page-polish :is(main, .sheet, .dock) .btn[aria-busy="true"]::after {
  border-color: var(--b-text-3);
  border-right-color: transparent;
}
.page-polish :is(main, .sheet, .dock) .btn:is(:disabled, [aria-disabled="true"], [aria-busy="true"]) .arrow { transform: none; }
.page-polish :is(main, .sheet) [aria-invalid="true"]:focus-visible { outline-color: var(--b-danger); }
@media (prefers-reduced-motion: reduce) {
  .page-polish [data-surface-motion], .page-polish [data-surface-art], .page-polish .surface-light,
  .page-polish :is(main, .sheet, .dock) :is(.btn, .btn svg, input, select, textarea, .user-text-button, .link-btn, .site-tabs button),
  .page-polish main :is(.site-table, .admin-table) tbody > tr > td {
    transition: none !important;
    translate: none !important;
    scale: none !important;
    transform: none !important;
  }
}