/*! base.css —— 第 1 层：重置 / 骨架 / 无障碍基线（与母题无关的底盘）
 *
 * 骨架两层：
 *   .app    四屏容器 —— PC 是「左 rail + 主区」横排，移动是「主区 + 底 tabbar」竖排
 *   .stack  屏栈 —— 四个 .screen 叠在同一格里，只让 .on 那个显示
 * 用 100dvh 而不是 100vh：移动浏览器地址栏收放时，vh 会跳一截。
 */
* { box-sizing: border-box; }

html, body { height: 100%; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font: var(--fs-md)/var(--lh-tight) var(--font-ui);
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* iOS 上关掉「双击缩放」带来的 300ms 迟滞；画布自己管手势 */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* 浏览器表面也属于设计系统 —— 这是「被建造」而不是「被拼装」最便宜的信号 */
::selection { background: var(--blue-ln); color: var(--blue-2); }
body { caret-color: var(--blue); }

* { scrollbar-width: thin; scrollbar-color: var(--rail-2) transparent; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--rail-2);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--ink-3); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
  border-radius: var(--r-tag);
}

/* ---------- 骨架 ---------- */
.app {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* 移动端骨架是**竖排**：主区在上、底栏在下。
 * 早先 .app 恒为 row，而 .tabbar 是它和 .rail 的兄弟节点（flex:0 0 auto），
 * 于是底栏变成了**右侧一列**：88px 宽、四个标签各挤成两行竖排字，
 * 主区被压窄 88px。桌面上 .tabbar 是 display:none，所以这个错只在手机上出现。
 * 断点与导航那两套形体保持一致（见 css/ui/nav.css 的 1024）。 */
@media (max-width: 1023px) {
  .app { flex-direction: column; }
}

.stack {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  display: flex;
}

/* 四个屏叠在同一个格子里；只有 .on 那个参与布局 */
.screen {
  display: none;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
}
.screen.on { display: flex; }

/* 概览 / 大事 / 我的 是可滚动的长页；世系屏不许整页滚（画布自己管） */
.screen.page { overflow-y: auto; overflow-x: hidden; }

/* 长页的内容列：PC 居中收口，移动铺满 */
.page-col {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--page-pad) calc(28px + env(safe-area-inset-bottom, 0px));
}

/* 贴底的安全区：移动端底栏 + 刘海屏 */
.tabbar { padding-bottom: env(safe-area-inset-bottom, 0px); }

.hidden { display: none !important; }

/* 等宽只给真实元数据：年号、代数、计数、关系链 */
.mono, .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }