/* ============================================================
   应季货盘（#/seasonal）· 独立样式
   独立成文件避让 app.css 战区（与 advisor.css / inspect.css 同款做法）。
   色彩一律引用 tokens.css 变量——本文件不出现任何硬编码色值（check-tokens 会拦）。

   批一二九：设计三语言落地（原型 seasonal-proto-v1.html 李叔拍板）——
   ① 年度节律带（月份导航 = 数据可视化）② 窗口 mini 甘特 ③ 知识抽屉；
   KPI 账单条五格 + 旺销聚焦带。类名一律 sea- 前缀，避让全局 .mask/.toast/.tip。
   ============================================================ */

/* 动效令牌（本屏自用；tokens.css 未收 motion 令牌，先定义后引用过 check-tokens） */
:root {
  --sea-ease: cubic-bezier(.22, 1, .36, 1);
  --sea-ease-spring: cubic-bezier(.34, 1.4, .44, 1);
  --sea-dur-f: .16s;
  --sea-dur-m: .24s;
  --sea-dur-d: .34s;  /* 抽屉滑程专用——480px 的距离，快了像瞬移、慢了发肉 */
  --sea-dur-s: .42s;
}

/* ---------- 入场编排：错峰 fade-up（仅首刷，JS 侧 booted 闸保证翻月不重放）---------- */
@keyframes sea-rise-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.sea-rise { opacity: 0; animation: sea-rise-in var(--sea-dur-s) var(--sea-ease) forwards; }
.sea-rise-1 { animation-delay: .03s; }
.sea-rise-2 { animation-delay: .10s; }
.sea-rise-3 { animation-delay: .17s; }
.sea-rise-4 { animation-delay: .24s; }
.sea-rise-5 { animation-delay: .31s; }
.sea-rise-6 { animation-delay: .38s; }

/* ---------- 骨架屏（取数节拍）---------- */
@keyframes sea-shimmer { from { background-position: -400px 0; } to { background-position: 400px 0; } }
.sea-skel {
  border-radius: var(--r-s);
  background: linear-gradient(90deg, var(--hover) 25%, var(--line) 50%, var(--hover) 75%);
  background-size: 800px 100%; animation: sea-shimmer 1.4s linear infinite;
}

/* ---------- 页头：kicker 溯源 + 大月份 ---------- */
.sea-phead { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; }
.sea-phead-l { flex: 1; min-width: 0; }
.sea-kicker {
  font-family: var(--font-mono); font-size: var(--t-weak); letter-spacing: .14em;
  color: var(--brand); text-transform: uppercase; margin-bottom: 10px;
}
.sea-title { font-size: 32px; font-weight: 700; letter-spacing: .01em; line-height: 1.2; margin: 0; color: var(--text); }
.sea-lead { margin-top: 10px; font-size: var(--t-aux); color: var(--text-2); max-width: 46ch; line-height: 1.7; }
.sea-lead b { color: var(--text); font-weight: 600; }
.sea-mm { text-align: right; flex: none; }
.sea-mm-big {
  font-family: var(--font-mono); font-size: 64px; font-weight: 600; line-height: .9;
  letter-spacing: -.03em; color: var(--text);
}
.sea-mm-big small { font-size: 18px; font-weight: 500; color: var(--text-2); letter-spacing: 0; }
.sea-mm-src { margin-top: 10px; font-size: var(--t-weak); color: var(--text-3); text-align: right; line-height: 1.7; }

/* ---------- 年度节律带（设计语言 ①：月份导航 = 数据可视化）---------- */
.sea-rhythm {
  margin-top: 34px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); padding: 18px 20px 14px; box-shadow: var(--shadow-1);
}
.sea-season-row { display: flex; margin-bottom: 4px; border-bottom: 1px dashed var(--line); padding-bottom: 6px; }
.sea-season { font-size: var(--t-weak); color: var(--text-3); text-align: center; user-select: none; }
.sea-months { display: flex; }
.sea-m {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 8px 0 6px; cursor: pointer; border-radius: var(--r-m);
  transition: background var(--sea-dur-f) var(--sea-ease);
  user-select: none;
}
.sea-m:hover { background: var(--hover); }
.sea-m .bar-zone { height: 34px; display: flex; align-items: flex-end; }
.sea-m .bar {
  width: 16px; border-radius: 3px 3px 1px 1px; background: var(--line-strong);
  transition: height var(--sea-dur-m) var(--sea-ease), background var(--sea-dur-f) var(--sea-ease), width var(--sea-dur-f) var(--sea-ease);
  transform-origin: bottom;
}
.sea-m:hover .bar { background: var(--text-3); }
.sea-m .num { font-family: var(--font-mono); font-size: var(--t-aux); color: var(--text-2); transition: color var(--sea-dur-f); }
.sea-m.on { background: var(--brand-soft); }
.sea-m.on .bar { background: var(--brand); width: 20px; }
.sea-m.on .num { color: var(--brand); font-weight: 700; }

/* hover 读数气泡（fixed 定位，JS 算坐标） */
.sea-tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0;
  transform: translate(-50%, 6px); transition: opacity var(--sea-dur-f), transform var(--sea-dur-f) var(--sea-ease);
  background: var(--text); color: var(--bg); font-size: var(--t-weak);
  padding: 6px 12px; border-radius: var(--r-s); white-space: nowrap; box-shadow: var(--shadow-2);
}
.sea-tip.show { opacity: 1; transform: translate(-50%, 0); }
.sea-tip b { font-family: var(--font-mono); }

/* ---------- KPI 账单条（与知识库月报同款设计语言）---------- */
.sea-kpis { margin-top: 28px; display: flex; align-items: stretch; }
.sea-kpi { flex: 1; padding: 4px 20px; }
.sea-kpi + .sea-kpi { border-left: 1px solid var(--line); }
.sea-kpi:first-child { padding-left: 0; }
.sea-kpi .k-l { font-size: var(--t-weak); color: var(--text-3); letter-spacing: .04em; }
.sea-kpi .k-v { font-family: var(--font-mono); font-size: 30px; font-weight: 600; margin-top: 4px; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
.sea-kpi .k-v small { font-size: var(--t-weak); font-weight: 400; color: var(--text-3); letter-spacing: 0; }
.sea-kpi .k-v.peak { color: var(--brand); }
.sea-kpi .k-v.new { color: var(--gold); }

/* ---------- 旺销聚焦带 ---------- */
.sea-focus { margin-top: 30px; }
.sea-f-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.sea-f-title { font-size: var(--t-card); font-weight: 700; color: var(--text); }
.sea-f-sub { font-size: var(--t-weak); color: var(--text-3); }
.sea-fcards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.sea-fcard {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-l);
  padding: 18px 20px 16px; cursor: pointer; position: relative; overflow: hidden;
  transition: transform var(--sea-dur-m) var(--sea-ease), box-shadow var(--sea-dur-m) var(--sea-ease), border-color var(--sea-dur-m);
  box-shadow: var(--shadow-1);
}
.sea-fcard:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); border-color: var(--line-strong); }
.sea-fcard:active { transform: var(--lift-1); transition-duration: var(--sea-dur-f); }
.sea-fcard::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--brand);
}
.sea-fcard .fc-cat { font-size: var(--t-weak); color: var(--text-3); letter-spacing: .06em; }
.sea-fcard .fc-name { font-size: 19px; font-weight: 700; margin-top: 3px; letter-spacing: .01em; color: var(--text); }
.sea-fcard .fc-win { margin-top: 8px; font-size: var(--t-aux); color: var(--brand); font-weight: 500; }
.sea-fcard .fc-gantt { margin-top: 10px; }
.sea-fcard .fc-pitch {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line-strong);
  font-size: var(--t-aux); color: var(--text-2); line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sea-fcard .fc-pitch::before { content: '「 '; color: var(--text-3); }
.sea-fcard .fc-pitch::after { content: ' 」'; color: var(--text-3); }
.sea-fmore {
  margin-top: 12px; font-size: var(--t-aux); color: var(--text-2);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.sea-mchip {
  padding: 2px 10px; border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line);
  cursor: pointer; font-size: var(--t-aux); color: var(--text-2);
  transition: all var(--sea-dur-f) var(--sea-ease);
}
.sea-mchip:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- mini 甘特（设计语言 ②：months 浅色 / peakMonths 深色 / 当月描边）---------- */
.sea-gantt { display: flex; gap: 1.5px; align-items: center; }
.sea-gantt i {
  display: block; width: 7px; height: 8px; border-radius: 1.5px;
  background: var(--line);
}
.sea-gantt i.listing { background: var(--brand-soft); }
.sea-gantt i.peak { background: var(--brand); height: 12px; border-radius: 2px; }
.sea-gantt i.cur { outline: 1.5px solid var(--text-3); outline-offset: .5px; }

/* ---------- 筛选行 ---------- */
.sea-filters { margin-top: 30px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sea-search {
  display: flex; align-items: center; gap: 8px; background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-m); padding: 0 12px;
  transition: border-color var(--sea-dur-f), box-shadow var(--sea-dur-f);
  min-width: 220px; color: var(--text-2);
}
.sea-search:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.sea-search svg { flex: none; opacity: .45; }
.sea-search input { border: none; outline: none; background: none; height: 34px; font-size: var(--t-body); width: 100%; color: var(--text); font-family: inherit; }
.sea-search input::placeholder { color: var(--text-3); }
.sea-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sea-chip {
  padding: 5px 12px; border-radius: var(--r-pill); font-size: var(--t-aux);
  background: var(--card); border: 1px solid var(--line); color: var(--text-2);
  cursor: pointer; user-select: none;
  transition: all var(--sea-dur-f) var(--sea-ease);
}
.sea-chip:hover { border-color: var(--line-strong); color: var(--text); }
.sea-chip:active { transform: scale(.96); }
.sea-chip.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.sea-chip.on:hover { background: var(--brand-press); }
.sea-tgl-group { margin-left: auto; display: flex; gap: 8px; }
.sea-tgl {
  display: flex; align-items: center; gap: 7px; padding: 5px 12px 5px 6px;
  border-radius: var(--r-pill); background: var(--card); border: 1px solid var(--line);
  font-size: var(--t-aux); color: var(--text-2); cursor: pointer; user-select: none;
  transition: all var(--sea-dur-f) var(--sea-ease);
}
.sea-tgl .tk { width: 28px; height: 16px; border-radius: var(--r-pill); background: var(--line-strong); position: relative; transition: background var(--sea-dur-f); flex: none; }
.sea-tgl .tk::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: var(--white); box-shadow: var(--shadow-1);
  transition: transform var(--sea-dur-f) var(--sea-ease-spring);
}
.sea-tgl.on { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.sea-tgl.on .tk { background: var(--brand); }
.sea-tgl.on .tk::after { transform: translateX(12px); }

/* ---------- 货盘表 ---------- */
.sea-wrap {
  margin-top: 16px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-1);
}
.sea-tbl { width: 100%; border-collapse: collapse; }
.sea-tbl th {
  text-align: left; padding: 11px 14px; font-size: var(--t-weak); font-weight: 500;
  color: var(--text-3); letter-spacing: .05em; border-bottom: 1px solid var(--line);
  background: var(--card-2); white-space: nowrap;
}
.sea-th-win { min-width: 180px; }
.sea-tbl td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; font-size: var(--t-aux); color: var(--text-2); }
.sea-tbl tbody tr { transition: background var(--sea-dur-f) var(--sea-ease); }
.sea-tbl tbody tr:hover { background: var(--hover); }
.sea-tbl tbody tr:last-child td { border-bottom: 0; }
/* 旺销行：左侧绿条 + 极浅主色底（旺销＝该给堆头，视觉上要能一眼扫出来） */
.sea-tbl tr.pk { background: var(--brand-soft); }
.sea-tbl tr.pk:hover { background: var(--brand-soft); }
.sea-tbl tr.pk td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
/* 行闪高（聚焦卡跳入定位） */
@keyframes sea-row-flash { 0%, 100% { background: transparent; } 30% { background: var(--warn-soft); } }
.sea-tbl tr.flash { animation: sea-row-flash 1.2s var(--sea-ease) 2; }
.sea-tbl tr.flash td:first-child { box-shadow: inset 3px 0 0 var(--warn); }
/* 翻月 stagger */
@keyframes sea-row-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.sea-tbl tbody tr.rin { animation: sea-row-in var(--sea-dur-m) var(--sea-ease) backwards; }

.sea-name { font-size: var(--t-body); font-weight: 600; color: var(--text); }
.sea-sub { font-size: var(--t-weak); color: var(--text-3); font-weight: 400; margin-left: 6px; }
.sea-grade {
  display: inline-block; min-width: 22px; text-align: center; padding: 1px 7px;
  border-radius: var(--r-s); font-size: var(--t-weak); font-weight: 600;
}
.sea-grade.g-a { background: var(--brand-soft); color: var(--brand); }
.sea-grade.g-b { background: var(--hover); color: var(--text-2); }
.sea-win-text { font-size: var(--t-weak); color: var(--text-3); margin-top: 4px; white-space: nowrap; }
.sea-win-text.pk { color: var(--brand); }
.sea-conf { display: inline-flex; gap: 3px; align-items: center; }
.sea-conf i { width: 5px; height: 5px; border-radius: 50%; background: var(--line-strong); }
.sea-conf i.f { background: var(--brand); }
.sea-conf span { margin-left: 4px; font-size: var(--t-weak); color: var(--text-3); }
.sea-conf-none { color: var(--text-3); }
.sea-ops { display: flex; gap: 8px; white-space: nowrap; }
.sea-op {
  padding: 3px 10px; border-radius: var(--r-s); font-size: var(--t-weak);
  border: 1px solid var(--line); color: var(--text-2); background: var(--card);
  cursor: pointer; font-family: inherit;
  transition: all var(--sea-dur-f) var(--sea-ease);
}
.sea-op:hover { border-color: var(--brand); color: var(--brand); }
.sea-op.sea-know { border-color: var(--brand-soft); color: var(--brand); }
.sea-op.sea-know:hover { background: var(--brand-soft); }
.sea-op.done { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }

/* ---------- 知识抽屉（设计语言 ③）----------
   抽屉+遮罩是 body 常驻节点，开合只切 show 类走 transition（JS 侧有守闸钉死）；
   visibility 与过渡同步：收起后不挡焦点、不被读屏读出。 */
.sea-mask {
  position: fixed; inset: 0; background: var(--mask); z-index: 80;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--sea-dur-m) var(--sea-ease), visibility 0s var(--sea-dur-m);
}
.sea-mask.show {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--sea-dur-m) var(--sea-ease);
}
.sea-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 92vw;
  background: var(--card); z-index: 90; box-shadow: var(--shadow-3);
  transform: translateX(103%); visibility: hidden; will-change: transform;
  transition: transform var(--sea-dur-d) var(--sea-ease), visibility 0s var(--sea-dur-d);
  display: flex; flex-direction: column;
}
.sea-drawer.show {
  transform: none; visibility: visible;
  transition: transform var(--sea-dur-d) var(--sea-ease);
}
/* 内容比壳慢半拍入场——壳滑到位的同时内容轻轻浮起，避免「一堵墙拍过来」 */
@keyframes seaDwIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.sea-drawer.show .sea-dw-head,
.sea-drawer.show .sea-dw-body { animation: seaDwIn var(--sea-dur-m) var(--sea-ease) .08s both; }
.sea-dw-head { padding: 22px 26px 16px; border-bottom: 1px solid var(--line); position: relative; flex: none; }
.sea-dw-cat { font-size: var(--t-weak); color: var(--text-3); letter-spacing: .08em; }
.sea-dw-name { font-size: 22px; font-weight: 700; margin-top: 4px; color: var(--text); }
.sea-dw-name .sea-grade { vertical-align: 3px; margin-left: 8px; }
.sea-dw-win { margin-top: 8px; display: flex; align-items: center; gap: 10px; }
.sea-dw-win .sea-gantt i { width: 9px; height: 10px; }
.sea-dw-win .sea-gantt i.peak { height: 14px; }
.sea-dw-win-t { font-size: var(--t-weak); color: var(--text-2); }
.sea-dw-close {
  position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: var(--text-2); font-size: 16px; transition: all var(--sea-dur-f);
  cursor: pointer; border: none; background: none; font-family: inherit;
}
.sea-dw-close:hover { background: var(--hover); color: var(--text); transform: rotate(90deg); }
.sea-dw-body { overflow-y: auto; padding: 20px 26px 40px; flex: 1; }
.sea-dw-quote {
  border-left: 3px solid var(--brand); background: var(--brand-soft);
  padding: 12px 16px; border-radius: 0 var(--r-m) var(--r-m) 0;
  font-size: var(--t-aux); line-height: 1.7; color: var(--text);
}
.sea-dw-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.sea-dw-cell { background: var(--card-2); border-radius: var(--r-m); padding: 10px 12px; }
.sea-dw-cell .dc-k { font-size: var(--t-weak); color: var(--text-3); }
.sea-dw-cell .dc-v { font-size: var(--t-aux); font-weight: 600; color: var(--text); margin-top: 3px; line-height: 1.5; }
.sea-dw-sec { margin-top: 24px; }
.sea-dw-sec-h { display: flex; align-items: baseline; gap: 10px; padding-bottom: 8px; border-bottom: 1px solid var(--line); }
.sea-dw-sec-t { font-size: var(--t-card); font-weight: 700; color: var(--text); }
.sea-dw-sec-s { font-size: var(--t-weak); color: var(--text-3); }
.sea-dw-src {
  margin-left: auto; font-size: var(--t-weak); padding: 1px 8px; border-radius: var(--r-s);
  background: var(--hover); color: var(--text-3);
}
.sea-dw-src.it { background: var(--brand-soft); color: var(--brand); font-weight: 500; }
.sea-dw-list { margin: 10px 0 0; padding-left: 18px; font-size: var(--t-aux); line-height: 1.9; color: var(--text); }
.sea-dw-dims { display: flex; gap: 10px; margin-top: 12px; }
.sea-dw-dim { flex: 1; text-align: center; background: var(--card-2); border-radius: var(--r-m); padding: 10px 6px; }
.sea-dw-dim .dd-v { font-size: var(--t-card); font-weight: 700; color: var(--brand); }
.sea-dw-dim .dd-k { font-size: var(--t-weak); color: var(--text-3); margin-top: 2px; }
.sea-dw-p { margin-top: 10px; font-size: var(--t-aux); line-height: 1.75; color: var(--text); }
.sea-dw-p .k2 { color: var(--text-3); font-size: var(--t-weak); margin-right: 8px; }
.sea-dw-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.sea-dw-tag { background: var(--card-2); border-radius: var(--r-s); padding: 4px 12px; font-size: var(--t-aux); color: var(--text); }
.sea-dw-pitch {
  margin-top: 28px; padding: 20px 22px; background: var(--card-2); border-radius: var(--r-l);
  position: relative;
}
.sea-dw-pitch::before {
  content: '“'; position: absolute; top: -6px; left: 12px; font-size: 44px;
  color: var(--brand); font-family: Georgia, serif; line-height: 1;
}
.sea-dw-pitch .dp-t { font-size: 15.5px; line-height: 1.8; color: var(--text); font-weight: 500; }
.sea-dw-pitch .dp-k { font-size: var(--t-weak); color: var(--text-3); margin-top: 8px; }

/* 空态 / 失败 / 脚注 */
.sea-empty { text-align: center; color: var(--text-3); padding: 56px 20px; font-size: var(--t-aux); }
.sea-err {
  background: var(--danger-soft); color: var(--text); padding: 14px 16px;
  border-radius: var(--r-m); font-size: var(--t-aux); line-height: 1.7;
}
.sea-retry { margin-top: 12px; }
.sea-note { margin-top: 16px; font-size: var(--t-weak); color: var(--text-3); line-height: 1.8; }

/* ---------- 响应式 ---------- */
@media (max-width: 1080px) {
  .sea-fcards { grid-template-columns: 1fr; }
  .sea-mm-big { font-size: 48px; }
  .sea-kpis { flex-wrap: wrap; row-gap: 14px; }
  .sea-kpi { flex: 1 1 30%; }
  .sea-kpi:nth-child(4) { border-left: 0; padding-left: 0; }
  .sea-drawer { width: 420px; }
  .sea-tgl-group { margin-left: 0; width: 100%; }
}
@media (max-width: 760px) {
  /* 系统口径：PC 端桌面底线，窗口更窄允许横滚不散架（V2.46.0 甲案）——给可读降级 */
  .sea-phead { flex-direction: column; align-items: flex-start; }
  .sea-mm { text-align: left; }
  .sea-mm-src { text-align: left; }
  .sea-m .num { font-size: 10px; }
  .sea-m .bar { width: 10px; }
  .sea-m.on .bar { width: 12px; }
  .sea-wrap { overflow-x: auto; }
  .sea-tbl { min-width: 760px; }
  .sea-dw-grid3 { grid-template-columns: 1fr 1fr; }
}

/* ---------- 降级动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .sea-rise { opacity: 1; animation: none; }
  .sea-tbl tbody tr.rin, .sea-tbl tr.flash { animation: none; }
  .sea-m, .sea-m .bar, .sea-chip, .sea-tgl, .sea-tgl .tk, .sea-tgl .tk::after,
  .sea-fcard, .sea-mchip, .sea-op, .sea-drawer, .sea-mask, .sea-tip { transition: none; }
  .sea-drawer.show .sea-dw-head, .sea-drawer.show .sea-dw-body { animation: none; }
}