/* ==========================================================================
   外起 · forthrise —— 桌面设计标准（Design Tokens for Desktop）
   --------------------------------------------------------------------------
   只被 /web/index.html 引用。手机版 /mini/、企业端、平台端、门户、法务页
   一律不引用本文件，因此本文件里的任何改动都不会影响它们。

   与 shared/tokens.css 的分工：
     shared/tokens.css  —— 全站共用的「色板、字体族、动效曲线」（改一处全站变）
     web-tokens.css     —— 桌面专属的「字号阶梯、间距节奏、留白、圆角、卡片材质」
   桌面屏的观看距离、可视面积、指针精度都与手机不同，尺度必须单独定，
   所以这里不叫「覆盖」，而是桌面这一端自己的标准。
   ========================================================================== */

/* --------------------------------------------------------------------------
   一、标准值
   -------------------------------------------------------------------------- */
.mp-stage {
  /* ---- 字号阶梯：五级，级差拉开，主次分明 ----
     桌面正文 15px 是舒适值；上一级与下一级至少差 1.5px 才能看出层级。 */
  --d-f-sec: 18px;      /* 区块标题（"编辑精选""最新动态"） */
  --d-lh-sec: 1.35;
  --d-f-card: 16.5px;   /* 卡片标题（职位名、帖子标题） */
  --d-lh-card: 1.42;
  --d-f-body: 15px;     /* 正文 */
  --d-lh-body: 1.72;    /* 桌面行长更长，行高给足，读起来才不累 */
  --d-f-aux: 12.5px;    /* 辅助信息（城市、经验、学历、计数） */
  --d-lh-aux: 1.55;
  --d-f-micro: 11.5px;  /* 标签、角标、页脚微文案 */

  /* ---- 间距节奏：全部取 8 的倍数，避免出现 13/18/22 这类散值 ---- */
  --d-sp-1: 4px;
  --d-sp-2: 8px;
  --d-sp-3: 12px;
  --d-sp-4: 16px;
  --d-sp-5: 24px;
  --d-sp-6: 32px;
  --d-sp-7: 40px;
  --d-sp-8: 56px;

  /* ---- 圆角：桌面比手机略收一点，观感更利落 ---- */
  --d-r-card: 14px;     /* 卡片 */
  --d-r-ctl: 10px;      /* 按钮、输入框、轨道条目 */
  --d-r-sm: 8px;        /* 标签、小色块 */

  /* ---- 阴影：分三层，桌面可承受比手机更细腻的层次 ----
     第 1 层贴边（交代轮廓），第 2 层扩散（交代高度） */
  --d-ring: inset 0 0 0 1px rgba(16, 17, 20, 0.045);          /* 极淡描边，让卡片"坐实" */
  --d-sh-card: 0 1px 2px rgba(16, 17, 20, 0.04), 0 4px 14px rgba(16, 17, 20, 0.05);
  --d-sh-hover: 0 2px 6px rgba(16, 17, 20, 0.05), 0 14px 32px rgba(16, 17, 20, 0.1);
  --d-sh-pop: 0 24px 64px rgba(16, 17, 20, 0.22), 0 2px 10px rgba(16, 17, 20, 0.08);

  /* ---- 栅格 ----
     --d-margin  : 内容区与窗口左右边缘之间的留白（随屏分档，见下方断点）
     --d-content : 内容列最大宽度
     --d-rail-w  : 右侧辅助栏宽度
     --d-rail-gap: 内容列与辅助栏之间的固定间隙 */
  --d-margin: 32px;
  --d-content: 1200px;
  --d-rail-w: 300px;
  /* 内容列与辅助栏的间隙。卡片本身还有 --pad-page(40px) 内边距，
     所以人眼看到的"呼吸"是 40 + 8 = 48px，正合适 */
  --d-rail-gap: 8px;

  /* ---- 页面节奏 ---- */
  --d-block-gap: 32px;  /* 区块与区块之间 */
  --d-nav-h: 56px;      /* 顶栏高度 */
  --d-aside-w: 228px;   /* 左侧主导航宽度 */

  /* 页面内边距：沿用 mini.css 的 --pad-page 变量名，桌面取值改为 40px，
     这样 app.js 里用 var(--pad-page) 做负 margin 的地方（筛选条等）自动对齐 */
  --pad-page: 40px;
}

/* --------------------------------------------------------------------------
   二、留白随屏分档（越大越舒展，但有上限，不让内容散开）
   -------------------------------------------------------------------------- */

/* 紧凑桌面（1024–1199）：iPad 横屏 + 实体键盘、小笔记本、分屏窗口。
   ⚠ 2026-09-24 起左侧栏的分界从 1200 下调到 1024（详见 web.css §十一），
   所以这一档**已经有左侧栏**了（228px），横向不再全宽。
   内容区因此收紧：页内边距取 24px（< 1024 那档是全宽下的 16px，≥1200 是 40px），
   1024 宽时内容区约 748px（= 1024 − 228 侧栏 − 2×24 留白）。
   --d-margin 在 ≥1024 重新参与左右留白（.web-body-row 的基准规则，
   归零那两条只对 < 1024 生效）。 */
@media (min-width: 1024px) and (max-width: 1199px) {
  .mp-stage { --d-margin: 24px; --pad-page: 24px; }
}

@media (min-width: 1440px) {
  .mp-stage { --d-margin: 40px; --d-content: 1280px; --d-block-gap: 36px; }
}
@media (min-width: 1600px) {
  .mp-stage { --d-margin: 48px; --d-content: 1360px; --d-block-gap: 40px; }
}
@media (min-width: 1920px) {
  .mp-stage {
    --d-margin: 64px; --d-content: 1480px; --d-block-gap: 48px;
    /* 超大屏可再放大半级字号，保持"内容不显小" */
    --d-f-sec: 19px; --d-f-card: 17px; --d-f-body: 15.5px;
  }
}
@media (min-width: 2400px) {
  .mp-stage { --d-margin: 80px; --d-content: 1720px; }
}

/* --------------------------------------------------------------------------
   三、深色模式：阴影换成更深的黑，描边换成极淡的白
   -------------------------------------------------------------------------- */
[data-theme="dark"] .mp-stage,
[data-theme="dark"] {
  --d-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  --d-sh-card: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.3);
  --d-sh-hover: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 32px rgba(0, 0, 0, 0.42);
  --d-sh-pop: 0 24px 64px rgba(0, 0, 0, 0.6), 0 2px 10px rgba(0, 0, 0, 0.4);
}