/* ============================================================
   Caam 首页覆写层 (assets/home/overrides.v1.css)
   ------------------------------------------------------------
   本文件由 index.html 的原内联 <style> 抽出，并做了去重整理。

   整理前的问题：同一批选择器被反复追加定义了多次，
   后面的覆盖前面的，废弃声明从未删除。例如
   .market-rail--top 的背景被写了 2 遍、内距被写了 3 遍。

   整理原则：只保留「最终实际生效」的那一条，
   被覆盖的废弃声明一律删除，视觉输出保持完全一致。

   层次（自底向上）：
     tokens.css  → 设计令牌
     home/paint.v1.css → 首页配色与控件
     home/layout.v1.css → 首页网格与栅格
     home/overrides.v1.css（本文件）→ 首页细节覆写
   ============================================================ */

/* ---------- 1. 用户账户面板 ---------- */
[data-route="home"] .profile-trigger{
  font-size:18px;color:var(--charcoal);flex:0 0 var(--circular-icon-btn-size);
  box-sizing:border-box;line-height:0;align-items:center;justify-content:center}

[data-route="home"] .profile-trigger img{
  width:100%;height:100%;object-fit:cover;border-radius:inherit}

[data-route="home"] #profileFallback{
  width:100%;height:100%;flex:0 0 100%;display:grid;place-items:center;line-height:0}

[data-route="home"] #profileFallback svg,
[data-route="home"] #userPanelFallback svg{width:22px;height:22px;display:block}

[data-route="home"] .user-panel{padding:14px;gap:12px;min-width:230px}

[data-route="home"] .user-card-head{display:flex;align-items:center;gap:10px}

[data-route="home"] .user-card-head img,
[data-route="home"] #userPanelFallback{
  width:42px;height:42px;border-radius:50%;object-fit:cover;
  display:grid;place-items:center;background:rgba(255,255,255,.75)}

[data-route="home"] .user-card-copy{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-width:0}

[data-route="home"] .user-card-copy span{
  font-size:12px;color:var(--text-sub);overflow:hidden;
  text-overflow:ellipsis;max-width:170px}

[data-route="home"] .user-logout{
  font-size:13px;color:var(--charcoal);text-decoration:none;
  border-top:1px solid rgba(34,29,34,.12);padding-top:10px}

/* ---------- 2. 全站动效语言 ---------- */
/* 响应式、有触感、且尊重系统的「减少动态」偏好。 */
[data-route="home"] button,
[data-route="home"] a{
  transition:transform .18s ease,box-shadow .18s ease,
             background-color .18s ease,border-color .18s ease}

[data-route="home"] button:hover,
[data-route="home"] a:hover{transform:translateY(-2px)}

[data-route="home"] button:active,
[data-route="home"] a:active{transform:translateY(0) scale(.97)}

[data-route="home"] .stock,
[data-route="home"] .market-glass{
  transition:box-shadow .25s ease,border-color .25s ease}

[data-route="home"] .portfolio-panel{animation:panel-in .25s ease both}
@keyframes panel-in{
  from{opacity:0;transform:translateY(8px)}
  to{opacity:1;transform:translateY(0)}}

@media(prefers-reduced-motion:reduce){
  [data-route="home"] button,
  [data-route="home"] a,
  [data-route="home"] .stock,
  [data-route="home"] .market-glass,
  [data-route="home"] .portfolio-panel{
    transition:none!important;animation:none!important}
  [data-route="home"] button:hover,
  [data-route="home"] a:hover{transform:none}
}

/* ---------- 3. 行情卡片的玻璃质感 ---------- */
/* 取色自插画本身的暖粉调，不是贴白板。
   saturate(120%) 让透出的插画颜色更饱满，强化背景存在感。
   整理说明：此处原有两条更早的定义（角度 135deg / 内距 7px 9px /
   blur(14px)）已完全被下方声明覆盖，属于废弃代码，已删除。 */
[data-route="home"] .market-rail--top,
[data-route="home"] .stock{
  position:relative;isolation:isolate;background-clip:padding-box;
  background:linear-gradient(135deg,rgba(255,246,242,.86) 0%,
             rgba(253,243,239,.80) 52%,rgba(255,241,245,.84) 100%);
  border:1px solid rgba(255,255,255,.86);
  box-shadow:0 12px 34px rgba(96,56,64,.14),inset 0 1px 0 rgba(255,255,255,.92);
  backdrop-filter:blur(16px) saturate(120%);
  -webkit-backdrop-filter:blur(16px) saturate(120%)}

/* 高光扫过：给玻璃面加一层极淡的斜向反光 */
[data-route="home"] .market-rail--top::after,
[data-route="home"] .stock::after{
  content:"";position:absolute;inset:1px;border-radius:inherit;
  pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(120deg,rgba(255,255,255,.07),
             transparent 32%,transparent 68%,rgba(255,185,204,.05))}

@media(prefers-reduced-transparency:reduce){
  [data-route="home"] .market-rail--top,
  [data-route="home"] .stock{
    backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,235,239,.72)}
}

/* ---------- 4. 背景插画取景 ---------- */
/* 目标：人物主体完整露出，不压暗插画，只做「托底 + 让位」。
   取景随视口高度微调 —— 矮视口时再往下一点，保住人物主体。
   整理说明：原有一条 height 与 background 拆分写在两处
   （height:64% / background-position:center 22%），
   已合并为单条声明。 */
[data-route="home"] .artwork{
  background-image:url('/img/home-anime.webp?v=20260912');
  background-size:cover;
  background-repeat:no-repeat;
  height:64%;
  background-position:center clamp(12%,calc(22% - (900px - 100vh)*0.06),30%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 68%,transparent 92%);
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 68%,transparent 92%)}

/* 桌面横屏：插画为侧栏时不套用手机取景规则 */
[data-route="home"][data-orientation="landscape"] .artwork{
  mask-image:linear-gradient(90deg,transparent,#000 12%);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%)}

/* ---------- 5. 内容下压与可读性 ---------- */
/* 让插画完整占据上部，消除与行情数字的叠印。 */
[data-route="home"] .information-scaler{
  grid-template-rows:auto minmax(0,1fr) auto auto auto auto}

[data-route="home"] .hero-title{margin-top:auto}

/* 文字投影：任何插画区域上都能读清 */
[data-route="home"] .indices b,
[data-route="home"] .indices small{text-shadow:0 1px 2px rgba(255,255,255,.92)}
[data-route="home"] .price{text-shadow:0 2px 10px rgba(255,255,255,.78)}
[data-route="home"] .hero-title{text-shadow:0 2px 12px rgba(255,255,255,.8)}

/* ---------- 6. 顶栏自适应 ---------- */
/* 修复浏览器工具条高度差异导致的显示不一致。
   根因：插画高度用 %（随视口缩放），顶栏高度却是固定 px。
   解法：把顶栏字号/内距/间距绑定到 vh，与插画同步缩放。 */
[data-route="home"] .market-rail--top{
  padding:clamp(4px,1vh,9px) clamp(6px,1.4vw,10px);
  gap:clamp(2px,.6vh,5px);
  grid-auto-rows:auto}

[data-route="home"] .market-rail--top > *{min-height:0}

[data-route="home"] .market-rail--top .indices{
  font-size:clamp(10.5px,1.72vh,13.5px);
  gap:clamp(1px,.4vh,3px) clamp(2px,.7vw,4px);
  line-height:1.2}