/* ============================================================
   运营参谋 · 工具集（advisor）样式
   视觉语言：安静的面板 + 有分量的结论。面板只做容器，结论条是唯一的重音。
   值一律取 tokens.css 变量，零裸色值（tools/check-tokens 会扫，注释里也不许写
   色值字面量——连注释都进正则）。
   ------------------------------------------------------------------
   为什么面板底用实色而不是亚克力半透明：
     原型阶段验证过半透明（backdrop-filter + rgba 白底）观感确实好，但那是在单一
     浅色场景下测的。本系统有 [data-theme="dark"] 暗色主题，半透明底叠在海报预览上
     会让文字对比度随内容变化、无法保证可读。故落地版用 var(--card) 实色 + 三级阴影，
     亚克力感靠阴影与圆角承载，明暗两套主题都稳。
   ------------------------------------------------------------------
   批一〇六（李叔 10-06「入口不显眼、页面有点平」）三条硬约束，改前必读：
     ① 卡片根 class 恒为 class="adv-card"，一个字不许动——守闸⑦ 按这个精确串数
        应季卡片条数。要分级/分色一律走 data 属性（data-urg）或子元素（.adv-rk）。
     ② 入口三处（顶栏 .adv-top / 右下 .adv-fab / 首登 .adv-hint）共用一枚数字徽标，
        徽标只在缓存里已有数据时才显示，绝不为了显眼提前拉请求（纪律①的延伸）。
     ③ 新增视觉只用 tokens 里已存在的令牌，不许为了好看现造色（守闸⑩ 会查未定义令牌）。
   ------------------------------------------------------------------
   批一三一（李叔 10-07 外壳重构）改了五处：
     ④ 面板 372 → 404px，出场改缩放淡入（transform-origin 贴右下角，有"来处"）。
     ⑤ tab 固定下划线 → 分段控件 + 滑动指示器（位移暗示"切过去了"，比换色清楚）。
     ⑥ 加载态一行灰字 → 骨架屏（等待也要有反馈，而且暗示内容形状）。
     ⑦ 天气未来三天改「温区条」：最低—最高区间可视化，比两行数字高级。
     ⑧ 界面文字对比度提到 --t3（--text-3 只有 2.4:1，11px 小字读不清）。
   ============================================================ */

.adv { position: fixed; right: 24px; bottom: 24px; z-index: 60; font-family: var(--font-sans); }

/* ---- 顶栏常驻入口：全站任何页面都能一键叫出参谋 ----
   批一三一：原来是个绿底小胶囊，和右下实心绿 FAB 撞成两个实心绿；
   改成品牌色描边——顶栏的参谋是「入口」，右下的参谋是「主场」，不该同权重。
   徽标数字 = 未来 14 天营销节点数，无缓存时不显示。 */
.adv-top {
  display: inline-flex; align-items: center; gap: 5px;
  height: 30px; padding: 0 11px;
  font-size: var(--t-aux); font-weight: 600; color: var(--brand); font-family: inherit;
  background: transparent; border: 1px solid var(--brand); border-radius: var(--r-pill);
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.adv-top svg { width: 15px; height: 15px; }
.adv-top:hover { background: var(--brand-soft); box-shadow: var(--shadow-1); }
.adv-top.on { background: var(--brand); color: var(--on-brand); }
.adv-top.on .adv-badge { background: var(--on-brand); color: var(--brand); }
.adv-top:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- 主入口：胶囊（图标 + 文字 + 徽标）----
   批一〇六：56px 裸圆球没人知道是啥，改成带字胶囊。仍是页面唯一的绿色实心按钮。 */
.adv-fab {
  height: var(--h-ctl); padding: 0 18px; border-radius: var(--r-pill); border: 0; cursor: pointer;
  background: var(--brand); color: var(--on-brand);
  display: flex; align-items: center; gap: 8px;
  box-shadow: var(--shadow-2);
  transition: transform .2s var(--ease-soft), box-shadow .2s var(--ease-soft), opacity .18s var(--ease);
}
.adv-fab:hover { transform: var(--lift-2); box-shadow: var(--shadow-3); }
.adv-fab:active { transform: translateY(0) scale(.98); }
.adv-fab svg { width: 19px; height: 19px; }
.adv-fab-t { font-size: var(--t-body); font-weight: 600; letter-spacing: .2px; }
.adv.open .adv-fab { opacity: .35; transform: scale(.96); box-shadow: var(--shadow-1); }
.adv-fab:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

/* ---- 首登引导气泡：只出现一次（localStorage 记），不点开面板也看得见 ---- */
.adv-hint {
  position: absolute; right: 0; bottom: 54px; width: 232px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--r-l);
  box-shadow: var(--shadow-3); padding: 12px 14px;
}
.adv-hint-t { font-size: var(--t-aux); color: var(--text); line-height: 1.6; }
.adv-hint-t b { color: var(--brand); font-weight: 600; }
.adv-hint-f { margin-top: 9px; display: flex; align-items: center; gap: 10px; }
.adv-hint-ok {
  border: 0; background: var(--brand-soft); color: var(--brand);
  font-size: var(--t-aux); font-weight: 600; font-family: inherit;
  padding: 5px 12px; border-radius: var(--r-s); cursor: pointer;
}
.adv-hint-x { border: 0; background: transparent; color: var(--t3); font-size: var(--t-weak); cursor: pointer; font-family: inherit; }

/* ---- 悬停微览：不点开也能扫一眼（只在已有缓存时显示真数据） ---- */
.adv-peek {
  position: absolute; right: 0; bottom: 54px; width: 220px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  box-shadow: var(--shadow-2); padding: 11px 13px;
  opacity: 0; transform: translateY(6px); pointer-events: none;
  transition: opacity .18s var(--ease), transform .18s var(--ease);
}
.adv:not(.open):hover .adv-peek { opacity: 1; transform: none; }
.adv.open .adv-peek { opacity: 0; }
.adv-pk-r { font-size: var(--t-aux); color: var(--text-2); line-height: 1.9; }
.adv-pk-r:first-child { color: var(--text); }

/* ---- 面板（批一三一：404px + 缩放淡入，出场有"来处"） ---- */
.adv-panel {
  position: absolute; right: 0; bottom: 56px; width: 404px; max-height: min(660px, 74vh);
  background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  box-shadow: var(--shadow-3); display: flex; flex-direction: column; overflow: hidden;
  opacity: 0; transform: translateY(10px) scale(.985); transform-origin: 100% 100%;
  pointer-events: none;
  transition: opacity .2s var(--ease), transform .26s var(--ease-soft);
}
.adv.open .adv-panel { opacity: 1; transform: none; pointer-events: auto; }
/* 收纳态：收成一条标题条（李叔「可折叠收纳」） */
.adv.open.mini .adv-panel .adv-conc, .adv.open.mini .adv-panel .adv-tabs,
.adv.open.mini .adv-panel .adv-body, .adv.open.mini .adv-panel .adv-foot,
.adv.open.mini .adv-panel .adv-flash { display: none; }

.adv-head { display: flex; align-items: flex-start; gap: 10px; padding: 15px 16px 13px; border-bottom: 1px solid var(--line); background: var(--card); }
.adv-title { font-size: var(--t-card); font-weight: 700; letter-spacing: -.2px; line-height: 1.25; }
.adv-sub { display: block; font-size: var(--t-weak); color: var(--t3); margin-top: 3px; }
.adv-sp { flex: 1; }
.adv-min, .adv-x {
  width: 26px; height: 26px; border-radius: var(--r-s);
  display: grid; place-items: center; color: var(--t3);
  transition: background .15s var(--ease), color .15s var(--ease);
}
.adv-min:hover, .adv-x:hover { background: var(--hover); color: var(--text); }
.adv-min svg, .adv-x svg { width: 15px; height: 15px; }

/* ---- 今日结论条（批一〇六核心）：参谋给结论，不是摆三堆数据 ----
   只吃已有缓存，不主动拉任何一路（纪律①）；一路都没缓存时整条不显示。
   批一三一：加左侧品牌色竖条立成面板第一视觉重音，行动箭头 hover 右移。 */
.adv-conc {
  position: relative; margin: 13px 16px 0; padding: 12px 14px 12px 17px;
  border-radius: var(--r-m); background: var(--brand-soft);
}
.adv-conc::before {
  content: ''; position: absolute; left: 0; top: 13px; bottom: 13px;
  width: 3px; border-radius: 2px; background: var(--brand);
}
.adv-conc-t { flex: 1; font-size: var(--t-aux); color: var(--text); line-height: 1.65; }
.adv-conc-t b { color: var(--brand); font-weight: 700; }
.adv-conc-a {
  margin-top: 9px; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--t-aux); font-weight: 600; color: var(--brand); cursor: pointer;
}
.adv-conc-a svg { width: 13px; height: 13px; transition: transform .2s var(--ease); }
.adv-conc-a:hover svg { transform: translateX(3px); }

/* 行动闭环反馈：面板内提示，不弹全局 toast（不干扰主流程） */
.adv-flash {
  margin: 8px 16px 0; padding: 8px 11px; border-radius: var(--r-s);
  background: var(--brand-soft); color: var(--brand); font-size: var(--t-aux);
}

/* ---- 分段控件（批一三一）：滑动指示器，比固定下划线更能说明"切过去了" ---- */
.adv-tabs {
  position: relative; display: flex; margin: 13px 16px 0; padding: 3px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-btn);
}
.adv-ind {
  position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / 3);
  background: var(--card); border-radius: 8px; box-shadow: var(--shadow-1);
  transition: transform .28s var(--ease-soft);
}
.adv-tab {
  position: relative; z-index: 1; flex: 1; height: 30px;
  display: flex; align-items: center; justify-content: center; gap: 5px;
  background: transparent; border: 0; cursor: pointer;
  font-size: var(--t-aux); font-family: inherit; color: var(--t3);
  transition: color .18s var(--ease);
}
.adv-tab:hover { color: var(--text-2); }
.adv-tab.on { color: var(--brand); font-weight: 600; }
.adv-tab svg { width: 14px; height: 14px; }
.adv-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
.adv-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 17px; height: 17px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--on-brand);
  font-size: var(--t-weak); font-weight: 700; font-variant-numeric: var(--num);
}
.adv-tab.on .adv-badge { background: var(--brand); }

.adv-body { flex: 1; overflow-y: auto; padding: 14px 16px 16px; }
.adv-body::-webkit-scrollbar { width: 6px; }
.adv-body::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 3px; }
.adv-sec {
  display: flex; align-items: center; gap: 9px; margin: 0 0 9px;
  font-size: var(--t-weak); font-weight: 600; letter-spacing: .1em; color: var(--t3);
}
.adv-sec::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.adv-sec + .adv-sec { margin-top: 16px; }

/* 独立亮卡（批一三一：hover 上浮 1px，把"可点"写在手上）
   根 class 恒为 adv-card（守闸⑦ 精确计数），分级一律走 data 属性。 */
.adv-card {
  position: relative; margin-bottom: 8px; padding: 11px 13px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: var(--r-m);
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease);
}
.adv-card:hover { transform: var(--lift-1); box-shadow: var(--shadow-1); border-color: var(--line-strong); }
/* 整行就是按钮：行根带 data-act 时给手型（hover 上浮已由 .adv-card:hover 承担） */
.adv-card[data-act] { cursor: pointer; }
.adv-empty { font-size: var(--t-aux); color: var(--t3); padding: 12px 2px; }
.adv-more { font-size: var(--t-weak); color: var(--t3); text-align: center; padding: 2px 0; }

/* ---- 排期行卡（批三〇九）：一行一个条目 ----
   旧竖卡三行（名称 / 日期+主推 / 行动条），404px 面板一屏只装 3 个，且三张长得一样。
   行卡横排「日期塔 ｜ 主区 ｜ 右侧天数与行动」，同屏装 6 个以上，扫一眼就有先后。
   🔴 行卡身份走 data-row 属性，根 class 恒为 adv-card——守闸⑦⑮ 按 class="adv-card" 精确
      串数条数，往 class 里加一个字就是给那条闸开后门。
   🔴 等分列的隐含下限是 minmax(auto,1fr)：主区必须 min-width:0 + overflow:hidden，
      否则长品名把整行顶宽、右侧行动被裁到画布外（2026-10-10 电商长图实测同款病）。 */
.adv-card[data-row] { display: flex; align-items: center; gap: 10px; padding: 8px 10px; margin-bottom: 6px; }
.adv-c-main { flex: 1 1 auto; min-width: 0; }
.adv-card[data-row] .adv-c-n {
  display: block; font-size: var(--t-body); font-weight: 600; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.adv-card[data-row] .adv-c-s {
  display: block; margin-top: 2px; font-size: var(--t-weak); color: var(--t3); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 日期塔：日号 + 月份两行，底色吃 data-urg 三档——颜色比文字快，不用读「还有几天」 */
.adv-dt {
  flex: none; width: 42px; padding: 5px 0; border-radius: var(--r-s);
  text-align: center; background: var(--hover); color: var(--t3);
}
.adv-dt b { display: block; font-size: 17px; font-weight: 700; line-height: 1.15; font-variant-numeric: var(--num); }
.adv-dt i { display: block; font-style: normal; font-size: 11px; line-height: 1.4; }
.adv-card[data-urg="today"] .adv-dt { background: var(--brand); color: var(--on-brand); }
.adv-card[data-urg="soon"] .adv-dt { background: var(--gold-soft); color: var(--on-gold); }
.adv-card[data-urg="later"] .adv-dt { background: var(--hover); color: var(--t3); }
/* 行卡里序号的右边距交给 gap，别再叠一次 margin（否则序号与主区空出一大块） */
.adv-card[data-row] .adv-rk { margin-right: 0; }
/* 右侧：天数在上、行动在下。只有最近一枚节点给实底按钮，其余行尾一个 ›（动作收敛） */
.adv-c-r { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.adv-c-gap { font-size: var(--t-weak); color: var(--t3); font-variant-numeric: var(--num); white-space: nowrap; }
.adv-c-go {
  flex: none; font-size: var(--t-weak); font-weight: 600; color: var(--brand);
  white-space: nowrap; cursor: pointer;
}
.adv-c-go[data-go="next"] {
  padding: 3px 9px; border-radius: var(--r-s);
  background: var(--brand); color: var(--on-brand);
}

/* 应季序号推荐位：Top1 用品牌色，其余弱化——有主次，不是流水账 */
.adv-rk { font-size: 17px; font-weight: 600; line-height: 1; margin-right: 9px; color: var(--t3); flex: none; }
.adv-rk.top { color: var(--brand); }

/* 天气（批一三一：主数字 44px + 温区条）
   批三〇九：行卡把日历/应季的密度拉起来了，主卡 padding 与主数字收一档，
   免得三个 tab 一密一松像两个产品。温区条与建议条结构不动。 */
.adv-now { display: flex; gap: 14px; align-items: center; padding: 10px 12px; }
.adv-now-l { min-width: 92px; }
.adv-temp { font-size: 40px; line-height: 1; font-weight: 600; letter-spacing: -1.5px; color: var(--text); font-variant-numeric: var(--num); }
.adv-unit { font-size: 17px; font-weight: 400; vertical-align: 15px; color: var(--t3); }
.adv-now-t { font-size: var(--t-aux); color: var(--text-2); margin-top: 5px; }
.adv-now-r { flex: 1; min-width: 0; }
/* 温区条：最低—最高区间可视化（--link 冷端 → --warn 暖端），比两行数字高级 */
.adv-tr { display: grid; grid-template-columns: 32px 1fr 62px; gap: 10px; align-items: center; line-height: 1.95; font-size: var(--t-aux); }
.adv-tr-n { color: var(--t3); }
.adv-tr-bar { position: relative; height: 5px; border-radius: 3px; background: var(--line); }
.adv-tr-seg { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: linear-gradient(90deg, var(--link), var(--warn)); }
.adv-tr-t { text-align: right; color: var(--text-2); font-variant-numeric: var(--num); }
.adv-tr-t b { color: var(--text); font-weight: 600; }

/* 参谋建议 / 降级横幅 */
.adv-call {
  margin-top: 10px; padding: 9px 11px; border-radius: var(--r-s);
  background: var(--brand-soft); color: var(--brand); font-size: var(--t-aux); line-height: 1.65;
}
.adv-call-warn { background: var(--warn-soft); color: var(--warn); }

/* 单模块降级：只占自己 tab，不弹全局 */
.adv-err { border-color: var(--warn); background: var(--warn-soft); }
.adv-err-t { font-size: var(--t-body); color: var(--warn); font-weight: 600; }
.adv-err-s { font-size: var(--t-aux); color: var(--text-2); margin-top: 4px; }
.adv-err-f { font-size: var(--t-weak); color: var(--t3); margin-top: 6px; }

/* 徽标 */
.adv-pill {
  display: inline-block; padding: 0 5px; border-radius: var(--r-s);
  font-size: var(--t-weak); line-height: 16px; vertical-align: 1px;
}
.adv-pill.peak { background: var(--brand-soft); color: var(--brand); }
.adv-pill.a { background: var(--warn-soft); color: var(--warn); }
/* 备稿期（批三〇九）：暖金——与「旺销」绿、「A 级」琥珀三分，各自一个语义位 */
.adv-pill.lead { background: var(--gold-soft); color: var(--on-gold); }

/* 加载骨架屏（批一三一）：等待也要有反馈，而且暗示内容形状 */
.adv-sk {
  border-radius: var(--r-m);
  background: linear-gradient(90deg, var(--card-2) 25%, var(--hover) 37%, var(--card-2) 63%);
  background-size: 400% 100%;
  animation: adv-sk 1.4s ease infinite;
}
@keyframes adv-sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.adv-sk-card { height: 62px; margin-bottom: 8px; }
.adv-sk-line { height: 12px; margin-bottom: 8px; }

/* 溯源三件套：状态点 + 来源 + 更新时间（批一三一：提对比度 + 上分隔线） */
.adv-foot {
  margin-top: 10px; padding-top: 9px; border-top: 1px solid var(--line);
  font-size: var(--t-weak); color: var(--t3);
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
}
.adv-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--t3); flex: none; }
.adv-dot.ok { background: var(--brand); }
.adv-dot.warn { background: var(--warn); }
.adv-dot.err { background: var(--danger); }
.adv-foot-r { width: 100%; color: var(--warn); }
.adv-loading { font-size: var(--t-aux); color: var(--t3); padding: 10px 2px; }

/* ---- 响应式：≤720 参谋转底部全宽抽屉（浮层在小屏就该吃满宽） ---- */
@media (max-width: 720px) {
  .adv { right: 12px; left: 12px; bottom: 12px; }
  .adv-fab { width: 100%; justify-content: center; }
  .adv-panel {
    position: fixed; left: 12px; right: 12px; bottom: 68px; width: auto;
    max-height: 72vh; transform-origin: 50% 100%;
  }
  .adv-peek { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .adv-panel, .adv-fab, .adv-card, .adv-ind { transition-duration: .01ms; }
  .adv-sk { animation-duration: .01ms; }
}