/* 应用窗口外壳样式。尺寸与配色逐项取自真机 DesktopShell / AppTopBar / NarrowSidebar
   与深色主题 token；改动前先回源码核对，别照着截图调。 */

/* 图标字体与真机同源：Material Symbols 承担绝大多数图标，KcUiIcons 只有「首页」一个。
   文件随原型自带（见 rrg_live.css 顶部注释）：跨出站点根的相对路径在 HTTP 下必 404，
   图标会静默画成豆腐块 */
@font-face { font-family: 'Kc Symbols'; font-display: block;
  src: url('assets/fonts/MaterialSymbolsRounded.ttf') format('truetype'); }
@font-face { font-family: 'Kc UiIcons'; font-display: block;
  src: url('assets/fonts/KcUiIcons.ttf') format('truetype'); }

.shl {
  position: relative; overflow: hidden;
  width: var(--shl-w); height: var(--shl-h);
  background: #0E1218;                       /* scaffold surface */
  font-family: 'Kc Noto SC', 'Microsoft YaHei', sans-serif;
}
.shl__ico {
  font-style: normal; line-height: 1; display: block;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* ── 顶栏 h=40，surfaceDim #05070B，底线 outlineVariant ── */
/* 底线色是 ThemeData.dividerColor，M3 下派生为 outline #2D343D（不是 outlineVariant） */
.shl__top {
  position: absolute; left: 0; top: 0; width: 100%; height: var(--shl-top);
  box-sizing: border-box; display: flex; align-items: stretch;
  background: #05070B; border-bottom: 1px solid #2D343D;
  color: #EEF1F5; font-size: 12px;
}
.shl__inset { width: 12px; flex: none; }      /* Win 左内缩；mac 是 80 */
.shl__brand { display: flex; align-items: center; gap: 6px; padding-right: 10px; flex: none; }
/* 22% 圆角与真机 TanghuluLogo 的 ClipRRect(size*0.22) 同比 */
.shl__logo { width: 24px; height: 24px; display: block; border-radius: 22%; }
.shl__bname { font-size: 12px; font-weight: 600; color: #EEF1F5; white-space: nowrap; }
.shl__tab {
  display: flex; align-items: center; padding: 0 14px;
  background: #151A22; color: #EEF1F5; white-space: nowrap;
}
/* 视图标签：真机每个窗格拍平成一条 Chrome 式标签，足弧向外翻与内容区连成一体。
   宽 176（挤时收到 64）、字 14、左右内缩 = 足弧 8 + 8 */
.shl__vtabs { display: flex; align-items: flex-end; min-width: 0; }
.shl__vtab {
  position: relative; flex: none; height: var(--shl-top);
  display: flex; align-items: center; justify-content: center;
}
.shl__vtab svg { position: absolute; left: 0; top: 0; }
.shl__vtab path { fill: transparent; }
.shl__vtab.is-on path { fill: #0E1218; stroke: rgba(27, 32, 39, .6); stroke-width: 1; }
.shl__vtablb {
  position: relative; max-width: calc(100% - 32px);
  font-size: 14px; color: #B6BFC9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.shl__vtab.is-on .shl__vtablb { color: #EEF1F5; }
.shl__vtab.is-drag { opacity: .4; }

/* 回播 chip：图标 16 + 间距 4 + labelSmall 10，内边距 8/4 */
.shl__play {
  display: flex; align-items: center; gap: 4px; padding: 0 8px;
  color: #B6BFC9; font-size: 10px; font-weight: 500;
}
.shl__gap { flex: 1 1 auto; }
.shl__acts { display: flex; align-items: center; gap: 2px; padding-right: 4px; }
.shl__act {
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 4px; color: #B6BFC9;
}
/* 布局键：装的是当前布局的实时缩略图 26×18，容器高 28、内边距 5/4 */
.shl__act--thumb { width: auto; height: 28px; padding: 5px 4px; box-sizing: border-box; }
/* 窗控 44×40；关闭键 hover 是 Windows 规范红 #E81123（此处静态展示不挂 hover） */
.shl__wbtns { display: flex; align-items: stretch; }
.shl__wb {
  width: 44px; display: flex; align-items: center; justify-content: center; color: #B6BFC9;
}

/* ── 导航轨 w=56，tile h=52，icon 20，label 10px ── */
.shl__rail {
  position: absolute; left: 0; top: var(--shl-top); width: var(--shl-rail);
  height: calc(var(--shl-h) - var(--shl-top));
  box-sizing: border-box; background: #05070B; border-right: .5px solid #2D343D;
  display: flex; flex-direction: column;
}
/* 导航项多于可用高度时按真机行为裁掉（真机是可滚列表），不伪造滚动条 */
.shl__navlist { flex: 1 1 auto; overflow: hidden; }
.shl__tile {
  position: relative; height: 52px; margin: 2px 4px; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #B6BFC9;
}
.shl__tile.is-on { background: rgba(95, 146, 255, .12); color: #5F92FF; }
/* 选中指示：左侧 3px 主色条 */
.shl__tile.is-on::before {
  content: ''; position: absolute; left: -4px; top: 8px; bottom: 8px;
  width: 3px; border-radius: 0 2px 2px 0; background: #5F92FF;
}
.shl__tile.is-on .shl__ico { font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
.shl__lb { font-size: 10px; line-height: 1; white-space: nowrap; }
.shl__draw { flex: none; margin-bottom: 6px; }

/* ── 页面主体：外壳只负责让出这块区域，内容由各演示组件自己挂 ── */
.shl__page {
  position: absolute; left: var(--shl-rail); top: var(--shl-top);
  width: calc(var(--shl-w) - var(--shl-rail));
  height: calc(var(--shl-h) - var(--shl-top));
}