/* ===== 主题样式页 ===== */
/* 设计与理由见 PROMPT/20_主题样式页.md
 * 页面外壳（.api-page / .api-header / .api-card / .api-tabs…）整套复用 css/setting-api.css，
 * 本文件只写「纯色主题的覆盖」和「主题样式页自己的部件」两块。
 * 因此在 index.html 里必须排在 setting-api.css、home.css、home-widgets.css 之后。
 * 日夜两套色值不在这里，在 base.css。
 * 本页同样禁止 backdrop-filter 和 will-change，滑入只动 transform。 */

/* ===== 纯色主题 ===== */
/*
 * :not(.is-bare) 不能省：拍立得和聊天示意本来就没有玻璃底，
 * 少了这层否定，本组规则会把实色底又给它们加回去。
 */
:root[data-material="solid"] {
  /* 实色件的唯一底色。桌面底是 --c-surface，元件要比它高一档才看得见轮廓，
     所以取设置页里「行 / 卡片」那一档，而不是页面底那一档 */
  --solid-fill: var(--c-surface-2);
}

:root[data-material="solid"] .home-widget-body:not(.is-bare) {
  background: var(--solid-fill);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* Dock 栏取桌面底那一档，比栏里的图标底低一级：两者本身就有色差了，
   home.css 那道用来把 Dock 从壁纸上托起来的投影在这里是多余的，一起关掉 */
:root[data-material="solid"] .dock-glass {
  background: var(--c-surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* 图标底另有一档：美化页的「图标底色」把 --icon-fill 写在元素行内样式上，
   没设过就退回 --solid-fill。玻璃态没有这条规则，所以那边挂了也不生效。
   Dock 里的图标底在 home.css 里比桌面上的多一道投影，这里一并抹平：
   纯色态下靠色差区分，两处必须长得一模一样 */
:root[data-material="solid"] .icon-bg,
:root[data-material="solid"] .dock-icon-bg {
  background: var(--icon-fill, var(--solid-fill));
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}

/* 玻璃描边是玻璃独有的，实色件不留 */
:root[data-material="solid"] .icon-bg::before,
:root[data-material="solid"] .icon-bg::after,
:root[data-material="solid"] .dock-icon-bg::before,
:root[data-material="solid"] .dock-icon-bg::after,
:root[data-material="solid"] .dock-glass::before,
:root[data-material="solid"] .dock-glass::after,
:root[data-material="solid"] .home-widget-body:not(.is-bare)::before,
:root[data-material="solid"] .home-widget-body:not(.is-bare)::after {
  content: none;
}

/* 横幅与「完成」也是主屏玻璃件，跟着一起变实，否则纯色主题里会突兀地剩两块毛玻璃 */
:root[data-material="solid"] .dev-banner,
:root[data-material="solid"] .edit-done-btn {
  background: var(--solid-fill);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* 聊天示意组件的输入栏：同层的气泡和菜单都是 --c-bg，实色态跟它们统一 */
:root[data-material="solid"] .wg-chat-field {
  background: var(--c-bg);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* ===== 页面 ===== */
/* .api-section-label 自带 10px 下边距，卡槽再叠 24px 会把两者拉开一大截 */
.theme-page .api-tabs {
  margin-top: 0;
}

/* ===== 卡槽 ===== */
/* 与美化页 .bt-tab / API 页 .voice-tab 同参数，只是各带各的类名前缀 */
.api-tabs.tm-tabs {
  height: 58px;
}

.tm-tab {
  flex-direction: column;
  gap: 2px;
}

.tm-tab-eyebrow {
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  line-height: 1.2;
  /* letter-spacing 会在最后一个字母后面也加一份，居中文本要补等量左边距抵消 */
  margin-left: 0.16em;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--c-hint);
  transition: color var(--dur) var(--ease);
}
.tm-tab.is-active .tm-tab-eyebrow { color: var(--c-sub); }

.tm-tab-name {
  font-size: var(--row-name-size);
  font-weight: var(--row-name-weight);
  line-height: 1.2;
}

/* ===== 说明 ===== */
.tm-note {
  margin-top: 12px;
  padding: 0 4px;
  font-size: var(--row-value-size);
  line-height: 1.5;
  color: var(--c-hint);
}

/* 减弱动态效果：取消横向位移，直接显示 / 隐藏 */
@media (prefers-reduced-motion: reduce) {
  .theme-page,
  .theme-page.show {
    transform: none;
    transition: visibility 0s;
  }
}