/* #1426（T4）—— Tailwind 退场。这份文件原来以三行 `@tailwind base / components / utilities` 开头，
   规则包在 Tailwind 的 `@layer base` / `@layer components` 里，五处 `@apply`。现在：
   · `@tailwind` 三行删掉（preflight 与工具类不再产出）；
   · 🔴 两层 `@layer` 一并拆掉，规则原位留着。那两个 `@layer` 是 Tailwind 的指令、编译时会被拆掉 —— 留着它们，
     浏览器会把它们当原生 cascade layer，层里的规则就输给所有不在层里的规则（site.css 全是），按钮长相会变；
   · `@apply` 照 Tailwind 当时编出来的产物逐条展开成显式 CSS，`--tw-*` 变量代换成定值
     （焦点环 = `0 0 0 2px #fff, 0 0 0 4px <环色>`，即 ring-2 + ring-offset-2）。
   这份文件仍由 `layout.tsx` 的 import 进 Next 打包的那份 CSS、排在 `/site.css` 之前 —— 位置没变，跟 Bootstrap
   冲突的属性仍是 Bootstrap 赢，不冲突的仍由这里决定。 */

html {
  scroll-behavior: smooth;
}

body {
  color: rgb(31 41 55);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* #951: the theme's heading typeface. One rule instead of a `font-heading` class on every
   heading in 32 section components — no heading in src carries a font-family class today, so
   nothing overrides this. The fallback covers a site whose brand.json carries `fonts.heading: []` — an
   empty list, not a missing field: a config missing the field cannot be built at all (#953 item 10). */
h1,
h2,
h3 {
  font-family: var(--font-heading, var(--font-sans));
}

/* #1426 —— 正文字体（`layout.tsx` 的 <body className="… site-body">）。原来是 Tailwind 的 `.font-sans`，
   同一条声明、同一个特异度：一个类 (0,1,0) 压过 site.css 里 reboot 的 `body { font-family: var(--x-body-font-family) }`。
   写成 `body { … }` 会输 —— 这份文件排在 site.css 之前，同特异度后者赢。 */
.site-body {
  font-family: var(--font-sans);
}

/* #961 — 风格设定的默认值。没有应用 theme 的站不产生任何覆盖，就落在这里，
   而这些值与本票改动之前的字面值【逐字相同】，所以存量站算出来的样子一个像素都不变。
   写了风格设定的站由 layout.tsx 在 `:root` 上覆盖同名变量（表在 src/lib/themeSettings.ts）。
   🔴 改这里任何一个数，等于改掉全部存量站的样子 —— 这不是"调个默认值"。 */
:root {
  --radius-button: 0.5rem; /* = 今天三个按钮类写死的 rounded-lg；#1586 起 Webpixels 的 `.btn` 也读它（site-css.js §BTN_RADIUS） */
  /* #1718 —— 卡片 / 条目 / 色底块的外框（`--radius-card`）和图片、图片容器（`--radius-image`）。值 = Corner style 的 subtle 档
     （`scripts/theme-settings.js` §SURFACE_RADIUS）。读者：`blocks/<块>/block.css`，以及 `site-css.js` §SURFACE_RADIUS 把
     Webpixels 的 `rounded-3` / `rounded-4` / `.card` 接到 `--radius-card`。主题给 `settings.radius`px、客户选 Corner style 时覆盖。 */
  --radius-card: 0.75rem;
  --radius-image: 0.75rem;
  /* 📌 #1586 —— 圆角五档 `--radius-{DEFAULT,md,lg,xl,2xl}` 和阴影 `--shadow-{DEFAULT,sm,md,lg}` 在新模板里【没有】读者
     （读它们的 Tailwind 配置 #1426 删了），所以这里不再定义；它们只由 dashboard 试穿时发给存量站 ——
     见 `scripts/theme-settings.js` 的 `SITE_LEGACY_RADIUS` / `SITE_LEGACY_SHADOW`（为什么、什么时候删）。 */
  /* 区块上下留白的两档 = 段落外壳原来的 `py-16 py-lg-24`（#1541；左右三档已删，归 `.container`）。
     📌 `--section-x` / `--section-xSm` / `--section-xLg` 在新模板里【没有】消费者，所以这里不定义；
     它们的消费者是 #1541 之前建的**存量站**（它们自己的 globals.css），只由 dashboard 试穿时发给站
     —— 见 `scripts/theme-settings.js` 的 `SITE_LEGACY_DENSITY_X`（为什么、什么时候删）。 */
  --section-y: 4rem;
  --section-yMd: 6rem;
  /* #2274 —— 间距刻度另两组的默认值（density = 1），= `scripts/theme-settings.js` SPACING_BASE。读者在各块 block.css。 */
  --block-gap: 2.5rem;
  --card-pad: 2rem;

  /* #1078 —— 主题表（`public/themes/<id>.css`）里块的圆角与留白的**基准**。
     三个值分别是 `sheet-recipes.js` 那三档阶梯的最大公约数，规则里写整数倍
     （`calc(var(--radius-block) * 3)`），所以没有 custom.css 时算出来的长度与
     改造前那批字面值逐字相同 —— 本票 AC3 就是量这一条。

     🔴 名字前缀是承重的，不是命名风格：`tweaks.js` 的 `tweakFor()` 按
     `^--radius-` / `^--section-` 把变量归给 `radiusScale` / `densityScale`，
     换个前缀这三个就再也不被微调引擎缩放，本票等于白做。
     🔴 这三行与 `sheet-recipes.js` 的 `RADIUS_STEPS` / `PAD_STEPS` / `GAP_STEPS`
     是一对：改这里的基准值 = 改全部 80 套表算出来的几何，不是「调个默认值」。 */
  --radius-block: 0.25rem;
  --section-block-pad: 0.5rem;
  --section-block-gap: 0.25rem;
}

/* #961 — 按钮的圆角走自己的变量，不跟全局圆角共用一个。
     🔴 必须独立：`buttonShape` 的「胶囊」档如果借用全局圆角，每一张卡片也会变成胶囊。 */
  /* #1084 — 按钮上的字色跟着底色走。三个变量算在 `scripts/lib/button-ink.js`（那里写着每一个判断的
     读数：为什么深字是纯黑、为什么 hover 的底色反向走、为什么轮廓按钮是沿调色板下挪一档），由
     `scripts/sync-config.js` 从【最终生效】的那份配色里算出来写进 `public/theme.css`。
     🔴 每个 `var()` 都带兜底值，而兜底值 = 本票之前的字面行为 ⟹ 拿不到这些变量的页面（例如预览
     还没重画的那一刻）与改动前逐字相同，不会掉色。 */
  /* #1091 — 主按钮的底色也走变量了（Chris 2026-08-19 拍的做法 D：不动任何配色 token，只让按钮去取
     更深的那一档）。哪一档由 `scripts/lib/button-ink.js` §baseShadeFor 按【这套配色自己】算：从 500
     起朝深走，取第一个「压在它上面的那个字色」过线的档。
     🔴 兜底值 `var(--color-primary-500)` = 本票之前的字面行为（`bg-primary-500`）⟹ 拿不到这个变量的
     页面与改动前逐字相同。
     🔴 `focus:ring-primary-500` 没跟着动：它是焦点环，不是字压的那块底，不在本票射程里。 */
  .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-radius: var(--radius-button);
    background-color: var(--btn-primary-bg, var(--color-primary-500));
    color: var(--btn-primary-ink, #fff);
  }

  .btn-primary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
  }

  .btn-primary:hover {
    background-color: var(--btn-primary-hover, var(--color-primary-600));
  }

  /* 🔴 轮廓按钮的字**不是**压在 `primary-500` 上，它就是 `primary-500` 压在页面上 —— 所以换字色修不
     了它，这里换的是它自己那一档（见 button-ink.js ③）。

     📌 #1585 —— 这里原来还有一段讲 hero 里的那个轮廓按钮（`.hero__cta .btn-secondary` 静止态取
     `currentColor`、hover 态由一条 (0,3,0) 规则把字色交还 `--btn-primary-ink`，#1100 的读数）。那两条规则
     连同旧库 hero 的骨架一起删了 —— 今天没有任何块发 `hero__cta`。要考证原文：
     `git show b22a611d0 -- templates/nextjs/src/app/`（那时这份文件还在 `src/app/` 下，#1834 搬到 `styles/`），看 117–134 行。 */
  .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 2px;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-radius: var(--radius-button);
    color: var(--btn-outline-ink, var(--color-primary-500));
    border-color: var(--btn-outline-ink, var(--color-primary-500));
  }

  .btn-secondary:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-primary-500);
  }

  /* 🔴 #1100 — 这个按钮 hover 时**就是主按钮的静止态**：同一档底、同一个字色，两个变量都直接用
     `.btn-primary` 那两个（#1091 为它留的 `--btn-outline-hover-ink` 因此没有消费者了，已删）。
     为什么能共用而不是各算一遍：两处坏掉的是**同一批** —— 都是「白字压 `primary-500`」，一个字不差
     （role-user 核过：本票坏的 56 套 == #1091 里 base 落 600 的 56 套）。
     🔴 改前那个数有**两个口径，差一套**，本轮两个都量了：按今天真正写进 `--btn-outline-hover-ink` 的
     那个字色（= `inkFor(primary-500)`，#1084 起可能是纯黑）算是 **55/80，最差 4.170（`ember-59`）**；
     按正文与 role-user 说的「白字」算是 **56/80，最差 4.123（`magenta-27`）** —— 差的那一套正是
     `magenta-27`（500 档上白字不过、纯黑过）。页面上生效的是前者。改后：**0/80，最差 4.531
     （`magenta-27`）**。
     🔴 兜底值 = 本票之前的字面行为（底 `primary-500` / 字 `#fff`）⟹ 拿不到这两个变量的页面与改动前
     逐字相同。 */
  .btn-secondary:hover {
    background-color: var(--btn-primary-bg, var(--color-primary-500));
    color: var(--btn-primary-ink, #fff);
  }

  .btn-accent {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    background-color: var(--color-accent-400);
    color: rgb(17 24 39);
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    border-radius: var(--radius-button);
  }

  .btn-accent:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--color-accent-400);
  }

  /* 🔴 #1100 — hover 的底色从写死的 `hover:bg-accent-500` 换成算出来的那一档
     （`scripts/lib/button-ink.js` §accentHoverShadeFor）。**字色不动**（仍是 `text-gray-900`），手法同
     #1091：只挪档位。
     方向是**朝浅**，而那是 accent 色阶的性质不是偏好 —— 它只到 600，朝深走一档在 80 套池主题上比不改
     还差。三档实测（blended，`gray-900` 的字）：
         accent-500（今天）  坏 37/80  最差 4.206（crimson-64）
         accent-600（朝深）  坏 47/80  最差 2.534（jade-47）
         accent-300（本票）  坏  0/80  最差 6.789（violet-53）
     Chris 2026-08-19 把这一格委托 role-user 拍，它选了朝浅（票正文「做法 a」）。
     🔴 兜底值 `var(--color-accent-500)` = 本票之前的字面行为 ⟹ 拿不到这个变量的页面（accent 那一组
     解析不出来、或换装预览还没重画的那一刻）与改动前逐字相同。 */
  .btn-accent:hover {
    background-color: var(--btn-accent-hover, var(--color-accent-500));
  }

  /* #961 — 区块留白是 density 这一维【唯一】的落点（正文写死的收窄口径：不动全局的 spacing scale）。
     #1541 —— 消费者是段落外壳 `src/components/BlockSection.tsx` 的默认 class（加上 hero 自己那一串，
     `blocks/hero/Section.tsx`）。T4（#1426）之后原来那两处博客页不再用它，三档一度产出一样的页面。
     · 只管上下：左右边距归 Bootstrap 的 `.container`（PM 2026-10-04 裁定，新模板不再消费 density 的横向
       三个值；它们只为存量站留在试穿载荷里，见 `scripts/theme-settings.js` 的 `SITE_LEGACY_DENSITY_X`）。
     · 它替换的是 `py-16 py-lg-24` ⟹ 断点是 Bootstrap 的 lg（992px），`!important` 也照那两个工具类：
       standard 档（4rem / 6rem）与它们在每个宽度下逐像素相同，块 CSS 里压不过工具类的规则照样压不过它。 */
  .section-padding {
    padding-top: var(--section-y) !important;
    padding-bottom: var(--section-y) !important;
  }

  @media (min-width: 992px) {
    .section-padding {
      padding-top: var(--section-yMd) !important;
      padding-bottom: var(--section-yMd) !important;
    }
  }

  .container-width {
    margin-left: auto;
    margin-right: auto;
    max-width: 80rem;
  }

/* ── #1426 博客两页（`src/components/pages/BlogIndexPage.tsx` / `BlogPostPage.tsx`）────────────────────────────
   原来全是 Tailwind 工具类，现在是 Webpixels / Bootstrap 的类。这里只写那些类给不了的：主题色（`--color-primary-*`，
   主题表那一层的 token）、封面的高度与悬停、两行截断。
   🔴 跟 Bootstrap 抢同一个属性的选择器都写成两个类：这份文件排在 site.css 之前，同特异度会输（`.badge` 定字色、
      Webpixels 的 `.article a` 定链接色）。 */
.badge.blog-tag {
  background-color: var(--color-primary-50);
  color: var(--color-primary-700);
}
.blog-accent,
.article.blog-body a,
.blog-card:hover .blog-card-title {
  color: var(--color-primary-600);
}
[data-bs-theme="dark"] .blog-accent,
[data-bs-theme="dark"] .article.blog-body a,
[data-bs-theme="dark"] .blog-card:hover .blog-card-title {
  color: var(--color-primary-300);
}
.blog-card.card {
  transition: box-shadow 0.15s;
}
.blog-card.card:hover {
  box-shadow: var(--x-box-shadow) !important;
}
.blog-card-cover {
  height: 12rem;
  transition: transform 0.15s;
}
.blog-card:hover .blog-card-cover {
  transform: scale(1.05);
}
.blog-card-excerpt {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 正文里的代码块折行，不横向滚动：Webpixels 的 `.article pre` 是一条可横滑的条，手机上一打开就切掉半行
   （theme-css 检查 ⑦ sideways strip 在 320–368px 判红过）。小商家博客里的代码多半是一两行说明，折行比横滑好读。 */
.article.blog-body pre {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
/* Webpixels 给里面的 <code> 写了 `min-width: max-content`（把那一块撑到整行宽），不放开它外层折了也没用。 */
.article.blog-body pre > code {
  min-width: 0;
}