/* ==========================================================================
   I Musicer · 白天（浅色）主题层（2026-09-26 上线；2026-09-27 昼夜手动切换重构）
   --------------------------------------------------------------------------
   为什么还需要这一层：
     style.css 的 :root 本来就是一整套浅色变量（--bg #FFFFFF / --bg-soft #F7F7F8 /
     --ink #111114 / --line #E4E4E7，源自最早的「配色方案 E」），ThinkPad 黑是后来
     叠上去的覆盖层。所以「关掉深色层，浅色就自动出来了」——**本文件不负责铺浅色，
     只负责修补那些写死认深背景的地方**（几乎全在首页唱片机里）。

   两条边界：
     · 配色类规则 → 本文件（浅色专属）或 theme-dark.css（深色专属）
     · 构图 / 唱片固有色 / 布局 → 一律在 theme-thinkpad.css 段 A，两套共用，别在这里重写

   加载位置：各页 <head> 末尾（style.css → theme-thinkpad.css → theme-dark.css → [home-vinyl.css] → 本文件）
   开关控制（2026-09-27）：<link> 挂 id="cssDay" + media="(prefers-color-scheme: light)"，
   深浅由 link.media / disabled 控制（机制详见 theme-dark.css 头注释）；
   本文件内不再包 @media —— 与 link.media 双重拦截会让手动模式失效。
   ========================================================================== */


:root,
[data-theme="thinkpad"] {
  color-scheme: light;        /* 原生表单控件走浅色 */
}

/* ═══════════════ 首页唱片机：白底适配 ═══════════════ */

/* ① 唱片投影：深色版 0 40px 100px rgba(0,0,0,.62) 是给黑底加体积用的，
     摆到白底上就是一团脏晕。换成冷灰、缩小半径、降不透明度。 */
body.home-vinyl .vinyl-platter {
  box-shadow:
    0 26px 64px rgba(17, 17, 20, .20),
    0 4px 18px rgba(17, 17, 20, .07),
    inset 0 0 0 1px rgba(255, 255, 255, .085),
    inset 0 1px 0 rgba(255, 255, 255, .16),
    inset 0 -1px 0 rgba(255, 255, 255, .045);
}

/* ② 中心孔：底色是 var(--bg)（已自动变白），但井壁写死了 82%/90% 的黑，
     在白色孔底旁会显脏 → 收到 55% / 70%，保留深井体积但不糊成一团黑。 */
body.home-vinyl .vinyl-platter::after {
  box-shadow:
    inset 0 0 4px 2px rgba(17, 17, 20, .55),
    inset 0 1px 1px rgba(17, 17, 20, .70),
    0 0 0 1px rgba(17, 17, 20, .10);
}

/* ③ 环境漫反射高光（固定在盘上那一层）：深色里 alpha .125 起，白底上会发灰 */
body.home-vinyl .vinyl-stage::after {
  opacity: .45;
}

/* ④ 唱臂 / 支点 / 托架：深色版是「白色金属」，白底上整根消失
     （只剩一道 rgba(0,0,0,.4) 的投影，像一条脏痕）。
      这里换成中性深灰金属：保留圆柱高光结构与反光流动动画，只把固有色压暗。
      ⚠ 反光流动那层（90deg 的白色分段）必须保留——它是 vinyl-arm-shine 动画
      在动的东西，删了金属就"死"了。 */
body.home-vinyl .vinyl-arm {
  background:
    linear-gradient(180deg,
      #4a4a52 0%, #9a9aa4 42%, #6e6e78 62%, #3a3a42 100%),
    linear-gradient(90deg,
      rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .48) 26%,
      rgba(255, 255, 255, .32) 58%, rgba(255, 255, 255, .58) 82%,
      rgba(255, 255, 255, .25) 100%);
  background-size: 100% 100%, 200% 100%;
  box-shadow: 0 6px 14px rgba(17, 17, 20, .18);
}
/* 支点：原为白色径向渐层，白底上只剩一圈淡影 → 改成深灰金属座 */
body.home-vinyl .vinyl-pivot {
  background: radial-gradient(circle,
    rgba(17, 17, 20, .55) 0%, rgba(17, 17, 20, .22) 68%, transparent 71%);
}
/* 唱针托架：同支点，走「深色玻璃」而非实色——它是装饰件，深色版在黑底上
   就只是一道微妙的高光（rgba(255,255,255,.18)），浅色版照搬等价灰阶，
   实色会在白底上变成一块突兀的灰砖（第一版截图实测）。 */
body.home-vinyl .vinyl-rest {
  background: linear-gradient(rgba(17, 17, 20, .20), rgba(17, 17, 20, .08));
  border-color: rgba(17, 17, 20, .16);
  box-shadow: 0 2px 6px rgba(17, 17, 20, .10);
}

/* ⑤ Hero 文字护读：深色版给标题压了一层黑色光晕（theme-thinkpad 段 B），
     浅色版需要「白色描边」而非「白色光晕」。
     ---------------------------------------------------------------
     ★ 2026-10-05 修正：原方案是 `text-shadow: 0 1px 16px rgba(255,255,255,.92)`
       这层**外发光**，在白底上有效，但压到黑盘上时是「白字发灰光」——
       字号越大光晕越淡，54px 标题尾段几乎等于没有。
       截图实测（1440 宽，浅色）：黑盘左缘 x≈604，标题右缘 x≈844，
       约 220px（4 个字宽）压在盘上，「馆」字完全读不出来。
     ★ 为什么不能用垫底：曾试过 hero-text 加 92% 实白渐变带，
       1024 实测一条白横幅硬压在黑盘上、非常突兀，已废（不再重试）。
     ★ 为什么不能用光晕：见上，外发光对大字号黑字无效。
     ✓ 采用方案：**白色描边（paint-order 式双层阴影）**——
       字形本身保持黑色（浅色下的正确色），在字四周生成 2px 白边。
       压到黑盘上时 = 黑字带白边浮在盘上，可读；
       落在白底上时白边与底色同色 = 视觉零副作用。
       描边半径 2px 是实测值：1px 太细在黑盘上仍发糊，3px 在白底上
       能看出白字发胖（微软雅黑字怀空隙被填）。
     移动端（≤720px）标题降到 32px、且 hero 改为单列不压盘，
     故描边同步收细到 1.5px，避免小字白边糊成一片。 */
body.home-vinyl .hero-title {
  text-shadow:
    1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
    0 0 8px rgba(255, 255, 255, .75);
}
body.home-vinyl .hero-desc {
  text-shadow:
    1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff,
    0 0 6px rgba(255, 255, 255, .6);
}
@media (max-width: 720px) {
  body.home-vinyl .hero-title {
    text-shadow:
      0.5px 0 0 #fff, -0.5px 0 0 #fff, 0 0.5px 0 #fff, 0 -0.5px 0 #fff,
      0 0 5px rgba(255, 255, 255, .7);
  }
  body.home-vinyl .hero-desc {
    text-shadow: 0 0 4px rgba(255, 255, 255, .7);
  }
}

/* ⑥ 移动端幽灵按钮：这个构图里按钮右半压在黑盘上，
     style.css 给的是「深字浅边压白底」，落到黑盘上文字直接消失 ——
     补回深色层的白边浅字值，压盘可读。
     桌面端按钮落在左侧纯白区，走 style.css 原版，不动。 */
@media (max-width: 720px) {
  .btn-ghost-light {
    border-color: rgba(255, 255, 255, .22);
    color: #e8e6e3;      /* = 深色层的 var(--ink) 值，保持两版观感一致 */
  }
  .btn-ghost-light:hover { border-color: rgba(255, 255, 255, .45); }
}

/* ⑦ 详情页底部「免费试用 Apple Music」幽灵按钮（2026-10-06 修）
   同一个 .btn-ghost-light 被用在两种完全不同的底色上：
     · 首页 Hero —— 白底，深字（style.css 原版，正确，不动）
     · 详情页 .playlist-cta —— **深色卡**（background: var(--dark)，
       浅色主题下它仍然是深底，设计上就是要这块深下去）
   深色主题下靠 theme-dark.css 刷成白字；浅色主题下那层不生效，
   文字回落成 var(--ink)（浅色下＝深字）→ **黑底黑字、文字整个消失，
   只剩 🎵 图标**。上面 ⑥ 只修了「移动端压黑盘」那一种情况，
   没覆盖桌面端这个黑底卡——所以桌面端浅色下按钮一直是坏的。
   ⛔ 必须限定 .playlist-cta 作用域：全局改会把首页 Hero 的白底按钮
      一起刷成白字，那里就反过来看不见了。 */
.playlist-cta .btn-ghost-light {
  border-color: rgba(255, 255, 255, .22);
  color: #e8e6e3;
}
.playlist-cta .btn-ghost-light:hover {
  background: rgba(255, 255, 255, .08);
  border-color: rgba(255, 255, 255, .45);
}