/* ============================================================
   Finance Monitor — 共享外壳层（T40）
   ============================================================
   方向锁定 focus-split / 专注双栏（`DESIGN.md`，2026-09-10）。本文件只放
   跨路由复用的外壳：设计令牌、页面骨架、导航、卡片节奏、发丝线、焦点、
   按钮、徽标、涨跌文案、状态文案、表单、专注双栏。

   职责边界（避免第二套实现）：
     ../style.css  → 站点级令牌与通用类（:root 令牌 / .nav / .btn / .card /
                     .container / .skip-link / .footer）
     本文件        → 金融外壳层；颜色与卡片材质 100% 复用 style.css
     finance.css   → 金融功能区块（数据卡、图表、告警、管理台…）

   加载顺序必须是 style.css → shell.css → finance.css，功能区块永远能覆盖外壳。

   两条刻意的「不引入」决定（见 evidence/T40 视觉差异清单）：
     1. 页面宽度沿用 style.css 的 `.container`（1080px，移动端 20px gutter）。
        全站只保留一个页面宽度，金融板块不另开一套，避免与个人站节奏分叉。
     2. 卡片材质沿用 style.css 的 `.card`。本文件只补卡头/卡身的共同节奏，
        不定义第二种卡面。
   ============================================================ */

/* ---------- 令牌 ----------
   只新增 style.css 没有的东西：间距/字号刻度、目标尺寸、焦点环、纵向节奏。 */
:root {
  /* 间距刻度 */
  --fin-space-2: 8px;
  --fin-space-3: 12px;
  --fin-space-4: 16px;
  --fin-space-5: 24px;
  --fin-space-6: 32px;
  --fin-space-7: 48px;

  /* 字号刻度（body 在 320px 也保持 16px，craft floor 要求） */
  --fin-text-xs: 12.5px;
  --fin-text-sm: 14px;
  --fin-text-body: 16px;
  --fin-text-title: clamp(28px, 5vw, 40px);
  --fin-text-display: clamp(30px, 5vw, 42px);

  /* craft floor：交互目标 44×44，焦点可见 */
  --fin-target: 44px;
  --fin-focus-width: 2px;
  --fin-focus-offset: 3px;

  /* 页面纵向节奏：导航高度 + 呼吸 */
  --fin-header-top: calc(var(--nav-height) + 64px);
  --fin-header-top-sm: calc(var(--nav-height) + 44px);
  --fin-header-bottom: 28px;
}

/* ---------- 浏览器表面 ----------
   craft floor：选区、光标、滚动条、下划线偏移、表格数字都要用调色板一致地
   表达，否则页面会露出浏览器默认外观。 */
::selection {
  background: var(--c-blue-soft);
  color: var(--ink-1);
}

input,
select,
textarea,
[contenteditable] {
  caret-color: var(--link);
}

a:not(.btn):not(.nav-logo):not(.nav-link):not(.skip-link) {
  text-underline-offset: 3px;
}

/* 财务数字一律等宽对齐，避免行间跳动 */
.fin-num {
  font-variant-numeric: tabular-nums;
}

/* 窄滚动条只在真正可滚的金融区域出现（宽表 / 专注双栏右侧） */
.fin-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--ink-3) transparent;
}
.fin-scroll::-webkit-scrollbar { height: 10px; }
.fin-scroll::-webkit-scrollbar-thumb {
  background: var(--ink-3);
  border-radius: var(--radius-pill);
}
.fin-scroll::-webkit-scrollbar-track { background: transparent; }

/* ---------- 焦点 ---------- */
/* 外壳可聚焦元素的最小可见焦点环；功能区块可以细化，但不得取消。 */
.fin-focusable:focus-visible,
.fin-page-header a:focus-visible,
.fin-split a:focus-visible {
  outline: var(--fin-focus-width) solid var(--link);
  outline-offset: var(--fin-focus-offset);
  border-radius: 6px;
}

/* 键盘可达的最小目标尺寸（craft floor 44×44）。用于导航链接、选项卡这类
   文字型控件；按钮由 .btn / .btn-sm 的 min-height 保证。 */
.fin-target {
  display: inline-flex;
  align-items: center;
  min-height: var(--fin-target);
}

/* ---------- 页面骨架 ---------- */
/* 顶部留白由导航高度推导，每个路由不再各写一份。
   `.container` 负责宽度与左右 gutter，本类只负责纵向节奏。 */
.fin-hero-page {
  padding-top: var(--fin-header-top);
  padding-bottom: var(--fin-header-bottom);
}
/* 详情页原为更紧凑的 20px 收尾 */
.fin-hero-page--compact { padding-bottom: 20px; }

@media (max-width: 640px) {
  /* 移动端导航更矮，顶部呼吸相应收紧 */
  .fin-hero-page { padding-top: var(--fin-header-top-sm); }
}

/* 页面标题：原 holdings / alerts / admin 三个路由共用同一套数值 */
.fin-hero-title {
  margin-top: 18px;
  font-size: var(--fin-text-title);
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 标题 + 状态并排的页面头（桌面形态；窄屏自然堆叠） */
.fin-page-header {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fin-space-4);
}
.fin-page-header h1 {
  font-size: var(--fin-text-display);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* 页面导语：原 holdings / alerts / admin 三个 intro 共用同一套数值 */
.fin-page-sub {
  max-width: 68ch;
  margin-top: var(--fin-space-3);
  font-size: var(--fin-text-body);
  color: var(--ink-2);
  line-height: 1.7;
  text-wrap: pretty;
}

/* 发丝线：唯一分隔手段，不用阴影堆层级 */
.fin-hairline { border-top: 1px solid var(--hairline); }

/* ---------- 卡片节奏 ----------
   卡面材质唯一来源是 style.css 的 .card；外壳只补卡头/卡身的统一节奏。 */
.fin-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fin-space-3);
  padding: var(--fin-space-4) var(--fin-space-5);
  border-bottom: 1px solid var(--hairline);
}
.fin-card-body { padding: var(--fin-space-5); }

/* ---------- 专注双栏（focus split） ----------
   桌面：扫描列表在左，选中项完整解释在右。
   1024px 以下：解释直接落到选中行下方（单列），不做挤压式侧栏。 */
.fin-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--fin-space-5);
  align-items: start;
}
@media (min-width: 1024px) {
  .fin-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
}
.fin-split-main { min-width: 0; }
.fin-split-aside { min-width: 0; }

/* ---------- 按钮 ----------
   胶囊按钮在 style.css；外壳只补 craft floor 的最小目标高度。 */
.btn,
.btn-sm {
  min-height: var(--fin-target);
}
.fin-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--fin-space-2);
}

/* ---------- 徽标（badge） ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: var(--fin-text-xs);
  font-weight: 500;
  line-height: 1.4;
  white-space: nowrap;
}
.chip::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}
.chip-est   { background: var(--c-orange-soft); color: #8A4B00; }
.chip-nav   { background: var(--c-blue-soft);   color: var(--link-hover); }
.chip-stale { background: var(--hairline);      color: var(--ink-2); }
.chip-ok    { background: var(--c-green-soft);  color: #176A32; }

@media (prefers-color-scheme: dark) {
  /* 深色下浅色语义底不再成立，改为提亮前景 */
  .chip-est { color: var(--c-orange); }
  .chip-ok  { color: var(--c-green); }
}

/* ---------- 涨跌状态文案 ----------
   红涨绿跌是红线；颜色只上核心数字，且必须同时带 +/- 与文字（PRD §5）。 */
.up   { color: var(--c-red); }
.down { color: #1F7A3D; }
.flat { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .down { color: var(--c-green); }
}

/* ---------- 状态文案 ---------- */
.fin-status {
  display: block;
  font-size: var(--fin-text-sm);
  color: var(--ink-2);
}
.fin-status[data-kind="ok"]    { color: #176A32; }
.fin-status[data-kind="warn"]  { color: #8A4B00; }
.fin-status[data-kind="error"] { color: var(--c-red); }
.fin-status[data-kind="muted"] { color: var(--ink-3); }
@media (prefers-color-scheme: dark) {
  .fin-status[data-kind="ok"]   { color: var(--c-green); }
  .fin-status[data-kind="warn"] { color: var(--c-orange); }
}

/* ---------- 表单 ---------- */
.fin-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.fin-label {
  font-size: var(--fin-text-sm);
  font-weight: 500;
  color: var(--ink-2);
}
.fin-input,
.fin-select,
.fin-textarea {
  width: 100%;
  min-height: var(--fin-target);
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: var(--bg-soft);
  color: var(--ink-1);
  font-family: var(--font);
  font-size: var(--fin-text-body);
}
.fin-textarea { min-height: 96px; padding: 10px 12px; }
.fin-input:focus,
.fin-select:focus,
.fin-textarea:focus {
  outline: none;
  border-color: var(--link-hover);
  box-shadow: 0 0 0 3px var(--c-blue-soft);
}
.fin-input:disabled,
.fin-select:disabled {
  color: var(--ink-3);
  cursor: not-allowed;
}
.fin-help {
  font-size: var(--fin-text-xs);
  color: var(--ink-3);
}
.fin-error {
  font-size: var(--fin-text-xs);
  color: var(--c-red);
}

/* ---------- 导航 ----------
   身份与链接顺序必须与个人站完全一致（DESIGN.md「Reuse the personal site's
   identity and navigation」）。外壳只加两件事：
     1. craft floor：交互目标 44×44。个人站是 18px 高、27px 宽，金融板块必须
        达标。做法是 gap 28px→8px 并把差额还给链接的左右内边距，视觉间距仍然
        是 28px，命中区变成 47×44。
     2. 640px 以下折叠成汉堡菜单（移动端视觉资产 02 就是这个形态）。
   不加域名第二行——个人站的 `.nav-logo` 是单行「王浩宇」，T40 要求「归一化到
   现有个人站身份」，加第二行反而与个人站分叉。 */
.nav-menu {
  gap: 8px;
}
.nav-logo,
.nav-link {
  min-height: var(--fin-target);
}
.nav-logo {
  display: inline-flex;
  align-items: center;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--fin-target);
  padding: 0 10px;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: var(--fin-target);
  height: var(--fin-target);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-1);
  cursor: pointer;
}
.nav-toggle-icon,
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  display: block;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.2s var(--ease), top 0.2s var(--ease);
}
.nav-toggle-icon { position: relative; }
.nav-toggle-icon::before,
.nav-toggle-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav-toggle-icon::before { top: -5px; }
.nav-toggle-icon::after  { top: 5px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon::after  { top: 0; transform: rotate(-45deg); }

/* 折叠菜单只在 `html.js` 下生效：脚本没跑起来时菜单照常横向可见，
   不会出现「按钮在、菜单打不开」的死路。 */
@media (max-width: 640px) {
  /* 无 JS 兜底：5 个紧凑链接在 320px 不至于换行，但仍保持 44px 最小高度。
     命中宽度由文字天然决定（27~41px），高度始终 ≥44px。 */
  .nav-link { min-width: 0; padding: 0; }

  html.js .nav { flex-wrap: wrap; }
  html.js .nav-toggle { display: inline-flex; }

  /* 收起态：只留当前页，其余收进菜单（移动端视觉资产 02 的形态）。
     当前页链接保持 44px 最小命中高度；横向命中由内边距补足到 ≥44px。 */
  html.js .nav-menu { gap: 0; }
  html.js .nav-menu > li > .nav-link { padding: 0 12px; min-width: var(--fin-target); }
  html.js .nav-menu > li > .nav-link:not(.active) { display: none; }

  /* 展开态：导航变高，菜单纵向铺满，每一行都是 ≥44px 的整宽目标 */
  html.js .nav.is-expanded { height: auto; }
  html.js .nav.is-expanded .nav-menu {
    order: 3;
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    padding: var(--fin-space-2) 0 var(--fin-space-3);
    border-top: 1px solid var(--hairline);
  }
  html.js .nav.is-expanded .nav-menu > li > .nav-link {
    display: inline-flex;
    width: 100%;
  }
}

/* ---------- 减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  .nav-toggle-icon,
  .nav-toggle-icon::before,
  .nav-toggle-icon::after { transition: none; }
}