/* ═══════════════════════════════════════════════════════════════════
   右侧栏 —— 可折叠（结构优化）
   ───────────────────────────────────────────────────────────────
   审计（2026-10-28）：主区只占 71%（1138/1600），右侧栏常驻 302px，
   但里面 80% 是文字（阶梯进度 + 视图上下文 + 快捷动作）——
   **用 300px 换 300px 的文字，性价比很低**。

   参考图的做法：右侧是**内容的一部分**（与清单并列），
   不是浮在旁边的辅助栏。

   本平台的改法：右侧栏改为**可折叠**
     · 默认态 = 44px 窄条，只放一个「我在第几阶」的迷你指示 + 展开按钮
     · 展开态 = 300px 完整面板（悬浮在内容之上，不挤压布局）
   这样主区常态能到 87%，需要时随时拉出。

   实现：body[data-rr="collapsed"] 控制
   ═══════════════════════════════════════════════════════════════ */
.rail-right {
  position: sticky; top: calc(62 * var(--u));
  height: calc(100vh - calc(62 * var(--u)) - calc(28 * var(--u)));
  width: calc(44 * var(--u));
  flex: 0 0 calc(44 * var(--u));
  margin: 0 0 calc(14 * var(--u)) 0;
  padding: calc(8 * var(--u)) 0;
  border-radius: calc(16 * var(--u));
  background: var(--n-850);
  border: 1px solid var(--glass-line);
  display: flex; flex-direction: column; align-items: center;
  gap: calc(8 * var(--u));
  overflow: hidden;
  transition: width .32s var(--e-out), flex-basis .32s var(--e-out),
              padding .32s var(--e-out), background .32s var(--e-out);
  z-index: 25;
}
/* 折叠态：只显示迷你阶梯指示 + 展开把手 */
.rail-right .rr-card,
.rail-right .rr-foot { display: none; }
.rr-mini {
  display: flex; flex-direction: column; align-items: center; gap: calc(5 * var(--u));
  width: 100%; padding: calc(4 * var(--u)) 0;
}
.rr-mini-bar {
  display: flex; flex-direction: column; gap: calc(3 * var(--u));
  align-items: center;
}
.rr-mini-dot {
  width: calc(6 * var(--u)); height: calc(6 * var(--u));
  border-radius: 50%;
  background: var(--n-700);
}
.rr-mini-dot.done { background: color-mix(in srgb, var(--acc) 55%, var(--n-700)); }
.rr-mini-dot.on {
  width: calc(9 * var(--u)); height: calc(9 * var(--u));
  background: var(--acc);
  box-shadow: 0 0 calc(8 * var(--u)) var(--acc);
}
.rr-mini-n {
  font-size: calc(9 * var(--u)); font-weight: 800; color: var(--acc);
  font-variant-numeric: tabular-nums;
}
.rr-expand {
  margin-top: auto;
  width: calc(28 * var(--u)); height: calc(28 * var(--u));
  border-radius: calc(9 * var(--u));
  border: 1px solid var(--glass-line);
  background: var(--n-800); color: var(--ink-3);
  display: grid; place-items: center; cursor: pointer;
  transition: background .18s var(--e-out), color .18s var(--e-out);
}
.rr-expand:hover { background: var(--n-750); color: var(--ink); }
.rr-expand svg { width: calc(14 * var(--u)); height: calc(14 * var(--u)); }

/* 展开态：悬浮面板，不挤压主区 */
body[data-rr="open"] .rail-right {
  width: calc(300 * var(--u));
  flex-basis: calc(300 * var(--u));
  padding: calc(14 * var(--u)) calc(12 * var(--u));
  align-items: stretch;
  background: var(--n-850);
  box-shadow: var(--shadow-lg);
}
body[data-rr="open"] .rail-right .rr-card,
body[data-rr="open"] .rail-right .rr-foot { display: block; }
body[data-rr="open"] .rr-mini { display: none; }
body[data-rr="open"] .rr-expand {
  position: absolute; top: calc(10 * var(--u)); right: calc(10 * var(--u));
  margin-top: 0;
}
body[data-rr="open"] .rr-expand svg { transform: rotate(180deg); }

/* 展开时右侧不占布局宽度 —— 用 position 让它浮起来 */
body[data-rr="open"] .shell {
  grid-template-columns: auto minmax(0, 1fr) 0;
}
body[data-rr="open"] .rail-right {
  position: fixed;
  right: calc(14 * var(--u));
  top: calc(62 * var(--u));
}

/* 折叠态下主区更宽 */
body[data-rr="collapsed"] .main-inner {
  max-width: min(100%, calc(1560 * var(--u)));
}

/* 右侧栏内部卡片在新基底下的样式 */
.rr-card {
  background: var(--n-800);
  border-color: var(--glass-line);
}
.rr-bar { gap: calc(4 * var(--u)); }
.rr-dot { background: var(--n-700); }
.rr-dot.done { background: color-mix(in srgb, var(--acc) 55%, var(--n-700)); }
.rr-dot.on { background: var(--acc); box-shadow: 0 0 calc(7 * var(--u)) var(--acc); }
.rr-go {
  background: var(--acc-soft);
  color: var(--acc);
  border-color: var(--acc-line);
}
.rr-watch {
  background: color-mix(in srgb, var(--c-amber) 9%, transparent);
  border-left: 2px solid var(--c-amber);
}
.rr-q {
  background: var(--n-750);
  border-color: var(--glass-line);
  color: var(--ink-1);
}
.rr-q:hover { background: var(--n-700); }
.rr-link {
  background: var(--n-750);
  border-color: var(--glass-line);
  color: var(--ink-2);
}
.rr-link:hover { background: var(--n-700); color: var(--ink); }

/* 悬浮时的遮罩提示 —— 让用户知道面板是浮层 */
body[data-rr="open"] .rr-scrim {
  position: fixed; inset: 0; z-index: 24;
  background: rgba(0,0,0,.28);
  pointer-events: auto;
}
.rr-scrim { display: none; }
body[data-rr="open"] .rr-scrim { display: block; }


/* ═══════════════════════════════════════════════════════════════════
   移动端 / 窄屏适配（结构优化第三轮）
   ───────────────────────────────────────────────────────────────
   审计发现：窄屏下左侧栏没有折叠，rail-nav 宽 359px 直接溢出屏幕
   （scrollWidth 723 > 视口 390）。这是老问题，
   但新的可折叠右栏把主区放宽后更容易触发。

   策略（按优先级）：
     ≤ 1100px  左侧栏改为**顶部抽屉**（点汉堡展开为覆盖层）
     ≤ 820px   顶栏胶囊分段改为**可横滑**，不再压缩
     ≤ 700px   KPI 带单列、图表组件竖排
   ═══════════════════════════════════════════════════════════════ */

/* 窄屏：左栏收成一条窄轨 + 汉堡按钮 */
@media (max-width: 1100px) {
  .rail {
    width: calc(48 * var(--u));
    margin-left: calc(8 * var(--u));
    padding: calc(10 * var(--u)) 0;
  }
  .rail .rail-brand { display: none; }
  .rail-nav {
    margin-top: calc(8 * var(--u));
    gap: calc(3 * var(--u));
    overflow-y: auto;
    max-height: calc(100vh - calc(120 * var(--u)));
  }
  .rail-item { width: calc(36 * var(--u)); height: calc(36 * var(--u)); }
  .rail-item .ri { width: calc(19 * var(--u)); height: calc(19 * var(--u)); }
  /* 窄轨：tooltip 会顶到主区，改为在图标正上方浮出 */
  .rail:not(.open) .rail-item::after {
    left: 50%; top: auto; bottom: calc(100% + 4 * var(--u));
    transform: translateX(-50%) translateY(calc(4 * var(--u)));
  }
  .rail:not(.open) .rail-item:hover::after { transform: translateX(-50%) translateY(0); }
  /* 展开态改为覆盖层 —— 不再挤压主区 */
  .rail.open {
    position: fixed;
    left: calc(8 * var(--u));
    top: calc(62 * var(--u));
    bottom: calc(12 * var(--u));
    width: calc(210 * var(--u));
    z-index: 30;
    box-shadow: var(--shadow-lg);
    background: var(--n-850);
  }
  .rail.open .rail-brand { display: flex; }
  .rail.open .rail-nav { align-items: stretch; max-height: none; }
  .rail.open .rail-item { width: auto; padding: 0 calc(14 * var(--u)); justify-content: flex-start; }
  .rail.open .rail-item .rl { display: block; }
  .rail.open .rail-item .rc { display: block; }
  /* 展开态把手已移到页头，窄屏不再需要额外的侧栏内把手 */
  .rail.open .rail-logo { width: calc(30 * var(--u)); height: calc(30 * var(--u)); }

  /* 右侧栏在窄屏改为顶部横条 */
  .rail-right {
    width: 100%;
    flex-basis: 100%;
    position: fixed;
    left: 0; right: 0;
    top: calc(62 * var(--u));
    height: auto;
    max-height: calc(70vh);
    z-index: 28;
    border-radius: 0;
    border-left: none; border-right: none;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
    padding: calc(12 * var(--u));
  }
  body[data-rr="open"] .rail-right {
    width: 100%;
    flex-basis: 100%;
    padding: calc(12 * var(--u));
  }
  body[data-rr="open"] .shell { grid-template-columns: auto minmax(0, 1fr); }
  body[data-rr="open"] .rail-right {
    position: fixed; left: 0; right: 0; top: calc(62 * var(--u));
  }
  .rr-mini { flex-direction: row; width: auto; padding: 0; }
  .rr-mini-bar { flex-direction: row; }
  .rr-expand { margin-top: 0; margin-left: auto; }
  body[data-rr="open"] .rr-expand { position: static; margin-left: auto; }
  .rail-right .rr-card { display: none; }
  body[data-rr="open"] .rail-right .rr-card { display: block; flex: 1 1 240px; }
}

/* 顶栏胶囊：窄屏可横滑 */
@media (max-width: 900px) {
  .topbar { gap: calc(10 * var(--u)); }
  .tb-seg { flex: 1 1 auto; min-width: 0; }
  .tb-name { display: none; }
}
@media (max-width: 640px) {
  .tb-skins { display: none; }   /* 窄屏省掉换色盘，用主题切换优先 */
  .tb-brand { flex: 0 0 auto; }
}

/* KPI 带：窄屏单列 */
@media (max-width: 700px) {
  .kpi-band { grid-template-columns: minmax(0, 1fr); }
  .kpi-band .kpi:nth-child(4) { grid-column: span 1; }
  .kpi-3 { grid-template-columns: minmax(0, 1fr); gap: calc(9 * var(--u)); }
  .kpi-3 .kpi-s { display: flex; align-items: baseline; justify-content: space-between; gap: calc(10 * var(--u)); }
  .kpi-3 .kpi-l { margin-bottom: 0; }
  .viz-row { flex-direction: column; align-items: stretch; }
  .donut { margin: 0 auto; }
  .spark-row { grid-template-columns: calc(48 * var(--u)) minmax(0, 1fr) auto; }
  .fs-strip { gap: calc(6 * var(--u)); }
  .fs-search { margin-left: 0; width: 100%; }
  .float-seg { width: 100%; justify-content: center; }
}

/* 分割面板：窄屏上下排 */
@media (max-width: 860px) {
  .split-panel { grid-template-columns: minmax(0, 1fr); }
  .sp-list { max-height: none; }
  .sp-sub { grid-template-columns: minmax(0, 1fr); }
  .sp-foot { flex-wrap: wrap; gap: calc(12 * var(--u)); }
  .sp-fa { margin-left: 0; width: 100%; }
}

/* ═══════════ 窄屏右栏修正（覆盖 theme.css 的 900px 规则）═══════════
   theme.css 里的 `@media (max-width: 900px) .rail-right`
   把右栏移到主区下方（grid-column:2），与新的可折叠机制冲突。
   这里用更高特异性重定义：窄屏下右栏变成**底部抽屉**，
   默认隐藏，点把手上滑展开。 */
@media (max-width: 900px) {
  body .shell > .rail-right,
  body[data-rr="collapsed"] .shell > .rail-right,
  body[data-rr="open"] .shell > .rail-right {
    grid-column: auto;
    grid-row: auto;
    position: fixed;
    left: calc(8 * var(--u));
    right: calc(8 * var(--u));
    bottom: calc(72 * var(--u));
    top: auto;
    width: auto;
    flex-basis: auto;
    height: auto;
    max-height: 62vh;
    overflow-y: auto;
    margin: 0;
    padding: calc(13 * var(--u)) calc(14 * var(--u));
    border-radius: calc(18 * var(--u));
    border: 1px solid var(--glass-line-2);
    background: var(--n-850);
    box-shadow: var(--shadow-lg);
    z-index: 34;
    flex-direction: column;
    align-items: stretch;
    display: none;
  }
  /* 展开时才出现 */
  body[data-rr="open"] .shell > .rail-right {
    display: flex;
  }
  /* 折叠态的把手固定在右下角 */
  body[data-rr="collapsed"] .shell > .rail-right {
    display: flex;
    left: auto; right: calc(10 * var(--u));
    bottom: calc(72 * var(--u));
    width: calc(40 * var(--u));
    padding: calc(5 * var(--u));
    border-radius: calc(13 * var(--u));
  }
  body[data-rr="collapsed"] .rail-right .rr-mini { display: none; }
  body[data-rr="collapsed"] .rail-right .rr-expand { margin-top: 0; }
  body[data-rr="open"] .rail-right .rr-expand {
    position: static; margin-left: auto; margin-top: calc(8 * var(--u));
  }
  body[data-rr="open"] .shell { grid-template-columns: minmax(0, 1fr); }
  body[data-rr="open"] .rail-right { grid-column: 1; }
}

/* 中屏：右栏保持窄条形态但不再被挤到主区下面 */
@media (min-width: 901px) and (max-width: 1100px) {
  body .shell > .rail-right {
    grid-column: 3;
    grid-row: 2;
  }
}

/* ═══════════ 窄屏右栏：最终覆盖（用 !important 结束级联）═══════════
   级联冲突链：
     theme.css  @media(900px) .rail-right → grid-column:2 / position:static
     skins.css  @media(1100px) .rail-right → position:fixed; left:0; right:0
     skins.css  @media(900px) body .shell > .rail-right → 又改回 auto
   三条规则互相覆盖，结果不确定。
   解法：窄屏下**彻底移除右栏的 grid 参与**，用 !important 一次性定死。 */
@media (max-width: 900px) {
  body .shell > .rail-right {
    grid-column: unset !important;
    grid-row: unset !important;
    position: fixed !important;
    left: auto !important;
    right: calc(10 * var(--u)) !important;
    top: auto !important;
    bottom: calc(74 * var(--u)) !important;
    width: calc(42 * var(--u)) !important;
    flex-basis: auto !important;
    height: auto !important;
    max-height: 62vh !important;
    margin: 0 !important;
    padding: calc(5 * var(--u)) !important;
    border-radius: calc(13 * var(--u)) !important;
    overflow: visible !important;
    flex-direction: column !important;
    align-items: stretch !important;
    background: var(--n-850) !important;
    border: 1px solid var(--glass-line) !important;
    box-shadow: var(--shadow) !important;
    z-index: 34 !important;
    transition: none !important;
  }
  /* 折叠态：只有一个把手按钮 */
  body[data-rr="collapsed"] .shell > .rail-right .rr-mini,
  body[data-rr="collapsed"] .shell > .rail-right .rr-card,
  body[data-rr="collapsed"] .shell > .rail-right .rr-foot { display: none !important; }
  body[data-rr="collapsed"] .shell > .rail-right .rr-expand {
    margin-top: 0 !important;
    width: calc(30 * var(--u)) !important;
    height: calc(30 * var(--u)) !important;
  }
  /* 展开态：变成上滑面板 */
  body[data-rr="open"] .shell > .rail-right {
    left: calc(8 * var(--u)) !important;
    right: calc(8 * var(--u)) !important;
    bottom: calc(74 * var(--u)) !important;
    width: auto !important;
    max-height: 62vh !important;
    padding: calc(13 * var(--u)) calc(14 * var(--u)) !important;
    border-radius: calc(18 * var(--u)) !important;
    overflow-y: auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }
  body[data-rr="open"] .shell > .rail-right .rr-card { display: block !important; }
  body[data-rr="open"] .shell > .rail-right .rr-mini { display: none !important; }
  body[data-rr="open"] .shell > .rail-right .rr-expand {
    position: static !important;
    margin-left: auto !important;
    margin-top: calc(8 * var(--u)) !important;
  }
  body[data-rr="open"] .shell,
  body[data-rr="collapsed"] .shell { grid-template-columns: minmax(0, 1fr) !important; }
}