/* ==========================================================================
   Waxy × ak-ui  ——  工业几何 · 战术信息层级 · 终端式反馈
   --------------------------------------------------------------------------
   设计依据：ak-ui 设计契约（.claude/skills/ak-ui）
   风格强度：system（完整组件语言；不做沉浸式 terminal 编排——博客正文是主角）

   定位：纯视觉覆盖层，在 css/waxy-main.css 之后加载。
   本文件不改动的内容：
     · DOM 结构与 PHP 模板输出
     · JS 钩子类名：is-open / is-active / is-fixed / dark / waxy-has-toc /
       waxy-reading-mode / post__content--clamped / waxy-lazy-loaded / active
     · data-action 属性
   阅读模式规则位于 waxy-main.css 末尾且必须继续胜出；本文件对阅读模式
   控制的属性（图片 filter、布局 display、TOC 面板定位）一律不加 !important。

   色彩纪律
     · 品牌命令色 = 信号黄：按钮、Chip、强调条、404 主视觉、置顶/公告标记。
     · 信息与导航态 = 低饱和青：焦点环、当前项标记、目录激活、hint--info。
     · 状态色（success / warning / danger / disabled）只在真有状态时出现，
       且始终配文字或图形，不以颜色作为唯一指示。
     · 其余全部为中性灰阶阶梯，画面彩色总数受控。

   纹理分级
     · 列表页（首页 / 归档 / 分类 / 标签 / 404）：完整底层纹理
       （网格 + 斜线 + 出血块 + 幽灵层）。
     · 内容页（文章 / 独立页 / 时间线 / 友链）：降级为发丝线 + 单一切角，
       纹理不与正文争夺注意力。
     · 所有装饰层限定在 html:not(.waxy-reading-mode) 内。
   ========================================================================== */

/* ==========================================================================
   0. 统一设置点 —— 在这里独立调节各模块颜色
   --------------------------------------------------------------------------
   · 亮色改上面的 :root；暗色改下面的 html.dark。
   · 只改“值”（#hex 或 rgba(...)），不要改动变量名。
   · 底层色块 = 页面背后的装饰大色块 / 斜线 / 墨块 / 幽灵层。
   ========================================================================== */

:root {
  /* —— 底层色块（背景装饰，仅列表页） —— */
  --waxy-block-a: rgba(255, 242, 31, 0.95);       /* 左侧出血块（实端） */
  --waxy-block-a-fade: rgba(255, 242, 31, 0.15);  /* 左侧出血块（渐隐端） */
  --waxy-block-b: rgba(180, 183, 187, 0.50);      /* 右上灰块 */
  --waxy-block-c: #FFF21F;                        /* 右下黄方块 */
  --waxy-block-d: #E6DFA6;                        /* 左上淡化黄小方块 */
  --waxy-block-line-1: rgba(255, 242, 31, 0.55);  /* 最长斜线（黄） */
  --waxy-block-line-2: rgba(140, 144, 150, 0.42); /* 次斜线（灰） */
  --waxy-block-line-3: rgba(22, 24, 28, 0.20);    /* 近黑斜线 */
  --waxy-block-band: rgba(255, 242, 31, 0.50);    /* 黄色斜带 */
  --waxy-block-ink: #16181C;                      /* 右侧墨块 */
  --waxy-block-ink-opacity: 0.55;                 /* 墨块不透明度 */
  --waxy-block-ghost: #FFF21F;                    /* 左下幽灵梯形 */
  --waxy-block-ghost-opacity: 0.18;               /* 幽灵梯形不透明度 */

  /* —— 标签（文章分类 / 标签 chip） —— */
  --waxy-chip-bg: #F2E45A;
  --waxy-chip-text: #16181C;
  --waxy-chip-bg-hover: #FFF21F;

  /* —— 按钮（主按钮 / 分页） —— */
  --waxy-btn-bg: #FFF21F;
  --waxy-btn-text: #16181C;
  --waxy-btn-border: #FFF21F;
  --waxy-btn-bg-hover: #F2E45A;
  --waxy-btn-border-hover: #F2E45A;
}

html.dark {
  /* —— 底层色块（背景装饰） —— */
  --waxy-block-a: rgba(228, 212, 0, 0.85);
  --waxy-block-a-fade: rgba(228, 212, 0, 0.10);
  --waxy-block-b: rgba(78, 81, 91, 0.55);
  --waxy-block-c: #E4D400;
  --waxy-block-d: #7E7418;
  --waxy-block-line-1: rgba(228, 212, 0, 0.50);
  --waxy-block-line-2: rgba(140, 144, 150, 0.30);
  --waxy-block-line-3: rgba(0, 0, 0, 0.28);
  --waxy-block-band: rgba(228, 212, 0, 0.42);
  --waxy-block-ink: #2A2F37;
  --waxy-block-ink-opacity: 0.90;
  --waxy-block-ghost: #E4D400;
  --waxy-block-ghost-opacity: 0.16;

  /* —— 标签（文章分类 / 标签 chip） —— */
  --waxy-chip-bg: #C7B81A;
  --waxy-chip-text: #16181C;
  --waxy-chip-bg-hover: #E4D400;

  /* —— 按钮（主按钮 / 分页） —— */
  --waxy-btn-bg: #E4D400;
  --waxy-btn-text: #16181C;
  --waxy-btn-border: #E4D400;
  --waxy-btn-bg-hover: #C7B81A;
  --waxy-btn-border-hover: #C7B81A;
}

/* ==========================================================================
   1. 设计令牌 —— ak-ui 语义层
   --------------------------------------------------------------------------
   分层原则：--waxy-* 是原始品牌值，--ak-* 是语义角色。组件规则一律引用
   --ak-*；需要换色时只改上面的原始值，语义层不动。
   ========================================================================== */

:root {
  /* —— 品牌主色：黄，分三档（核心 / 柔化 / 淡化）+ 一档深色按压态 —— */
  --waxy-accent-core: #FFF21F;   /* 主色填充（大色块 / 按钮 / 标签 / 高亮条） */
  --waxy-accent-soft: #F2E45A;
  --waxy-accent-pale: #E6DFA6;
  --waxy-accent-deep: #8A7300;

  /* 亮色下文字/链接用深琥珀以保证对比度；填充仍用信号黄 */
  --waxy-primary: var(--waxy-accent-deep);
  --waxy-primary-hover: #A8890A;
  --waxy-primary-light: var(--waxy-accent-soft);
  --waxy-primary-muted: rgba(255, 242, 31, 0.45);

  /* 黄底上的文字色 + 近黑结构色 */
  --waxy-on-accent: #16181C;
  --waxy-ink: #16181C;
  --waxy-dot-color: rgba(22, 24, 28, 0.10);

  /* —— 中性阶梯：亮色 = 昼间终端，冷灰 + 近白 —— */
  --waxy-bg: #E9EBEF;            /* 页面画布 */
  --waxy-surface: #F8F9FA;       /* 亮面板 */
  --waxy-bg-soft: #E3E6EB;       /* 静默面板 */
  --waxy-raised: #FFFFFF;        /* 抬升面板（比 surface 更亮） */
  --waxy-code-bg: #EDEFF3;
  --waxy-text: #2A2E35;
  --waxy-heading: #17191D;
  --waxy-meta: #646771;
  --waxy-footer-text: #646771;
  --waxy-border: #D4D8DE;
  --waxy-border-mid: #B9BFC7;
  --waxy-border-strong: #9E9B99;
  --waxy-hairline: rgba(22, 24, 28, 0.14);
  --waxy-text-content: #30343B;
  --waxy-text-strong: #111318;
  --waxy-text-light: #4E515B;
  --waxy-text-muted: #7F838A;
  --waxy-badge-bg: #E3E6EB;
  --waxy-badge-cat-bg: #DDE1E7;
  --waxy-divider-accent: #C2C7CF;
  --waxy-surface-0: rgba(248, 249, 250, 0);
  --waxy-surface-80: rgba(248, 249, 250, 0.82);
  --waxy-panel-bg: rgba(248, 249, 250, 0.50);
  --waxy-panel-blur: 10px;
  --waxy-radius: 0px;

  /* —— 信号黄（背景色块装饰用） —— */
  --waxy-signal-core: #FFF21F;
  --waxy-signal-soft: #F2E45A;
  --waxy-signal-pale: #E6DFA6;
  --waxy-signal-core-rgb: 255, 242, 31;
  --waxy-signal-soft-rgb: 242, 228, 90;
  --waxy-signal-pale-rgb: 230, 223, 166;
  --waxy-grid-line: rgba(23, 25, 29, 0.05);

  /* —— 功能状态色：亮色下取深一档保证 4.5:1 文字对比 —— */
  --waxy-info: #1B6B80;          /* 信息 / 导航当前态（低饱和青） */
  --waxy-info-rgb: 27, 107, 128;
  --waxy-success: #2E7D5F;
  --waxy-success-rgb: 46, 125, 95;
  --waxy-warning: #B96E1E;
  --waxy-warning-rgb: 185, 110, 30;
  --waxy-danger: #B84A4A;
  --waxy-danger-rgb: 184, 74, 74;
  --waxy-disabled: #9AA0A8;
  --waxy-disabled-rgb: 154, 160, 168;

  /* —— ak-ui 语义角色（组件规则只引用这一层） —— */
  --ak-surface-canvas: var(--waxy-bg);
  --ak-surface-panel: var(--waxy-surface);
  --ak-surface-muted: var(--waxy-bg-soft);
  --ak-surface-raised: var(--waxy-raised);
  --ak-surface-inverse: var(--waxy-ink);
  --ak-text-primary: var(--waxy-text);
  --ak-text-secondary: var(--waxy-meta);
  --ak-text-inverse: var(--waxy-surface);
  --ak-signal-info: var(--waxy-info);
  --ak-signal-action: var(--waxy-accent-core);
  --ak-signal-accent: var(--waxy-accent-soft);
  --ak-signal-success: var(--waxy-success);
  --ak-signal-warning: var(--waxy-warning);
  --ak-signal-danger: var(--waxy-danger);
  --ak-signal-disabled: var(--waxy-disabled);

  /* —— 几何：一处强手势（切角）+ 发丝线 —— */
  --ak-cut-sm: 6px;
  --ak-cut-md: 10px;
  --ak-cut-lg: 14px;
  --ak-line-hairline: 1px;
  --ak-line-strong: 3px;
  --ak-shadow-panel: 0 2px 0 rgba(22, 24, 28, 0.04);

  /* —— 动效：快而机械 —— */
  --ak-motion-fast: 120ms;
  --ak-motion-base: 200ms;
  --ak-motion-slow: 420ms;
  --ak-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ak-ease-emphasized: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* —— 焦点 —— */
  --ak-focus-color: var(--waxy-info);
  --ak-focus-width: 2px;
  --ak-focus-offset: 2px;
}

/* 暗色：canonical 方舟深炭灰阶梯（近黑为 #1F232A，不用纯黑） */
html.dark {
  /* 暗色下黄恢复为亮色（略降明度防刺眼），文字色可直接用黄 */
  --waxy-accent-core: #E4D400;
  --waxy-accent-soft: #C7B81A;
  --waxy-accent-pale: #7E7418;
  --waxy-primary: var(--waxy-accent-core);
  --waxy-primary-hover: #F2E23A;
  --waxy-primary-light: var(--waxy-accent-soft);
  --waxy-primary-muted: rgba(228, 212, 0, 0.5);
  --waxy-dot-color: rgba(255, 255, 255, 0.07);

  --waxy-bg: #1F232A;
  --waxy-surface: #272C34;
  --waxy-bg-soft: #333841;
  --waxy-raised: #2E343D;
  --waxy-code-bg: #242930;
  --waxy-text: #D7DADF;
  --waxy-heading: #FFFFFF;
  --waxy-meta: #9E9B99;
  --waxy-footer-text: #7F838A;
  --waxy-border: #333841;
  --waxy-border-mid: #4E515B;
  --waxy-border-strong: #646771;
  --waxy-hairline: rgba(255, 255, 255, 0.14);
  --waxy-text-content: #D7DADF;
  --waxy-text-strong: #FFFFFF;
  --waxy-text-light: #B9BEC6;
  --waxy-text-muted: #646771;
  --waxy-badge-bg: #333841;
  --waxy-badge-cat-bg: #333841;
  --waxy-divider-accent: #4E515B;
  --waxy-surface-0: rgba(39, 44, 52, 0);
  --waxy-surface-80: rgba(39, 44, 52, 0.82);
  --waxy-panel-bg: rgba(39, 44, 52, 0.58);
  --waxy-radius: 0px;

  /* 暗色下信号黄降明度，避免刺眼 */
  --waxy-signal-core: #E4D400;
  --waxy-signal-soft: #C7B81A;
  --waxy-signal-pale: #7E7418;
  --waxy-signal-core-rgb: 228, 212, 0;
  --waxy-signal-soft-rgb: 199, 184, 26;
  --waxy-signal-pale-rgb: 126, 116, 24;
  --waxy-grid-line: rgba(255, 255, 255, 0.05);

  /* 状态色：暗色下提亮，保证在 #272C34 面板上可读 */
  --waxy-info: #4FB8CE;
  --waxy-info-rgb: 79, 184, 206;
  --waxy-success: #4FC08D;
  --waxy-success-rgb: 79, 192, 141;
  --waxy-warning: #E0A45E;
  --waxy-warning-rgb: 224, 164, 94;
  --waxy-danger: #E07070;
  --waxy-danger-rgb: 224, 112, 112;
  --waxy-disabled: #6C717A;
  --waxy-disabled-rgb: 108, 113, 122;

  --ak-shadow-panel: 0 2px 0 rgba(0, 0, 0, 0.35);
}

/* ==========================================================================
   2. 字体与排版 —— 命令面 / 正文面 / 数据面三种角色
   ========================================================================== */

body {
  font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Noto Sans SC",
    -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
}

h1, h2, h3, h4, h5 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.post__title,
.page-404__title {
  font-weight: 900;
  letter-spacing: -0.04em;
}

.widget__title,
.comment-heading {
  font-weight: 700;
  letter-spacing: -0.02em;
}

.nav__item {
  letter-spacing: 0.04em;
}

/* 数字 / 时间戳 / 计数：等宽终端读数（数据面） */
code, pre, kbd, samp,
.post-meta__date,
.post-meta__count,
.excerpt__item,
.pagination__info,
.breadcrumb,
.comment__time,
.waxy-toc-sidebar__progress,
.recent-posts__date,
.card__stat-value,
.menu-list__count,
.post__permalink,
.page-404__code,
.archive-meta {
  font-family: "JetBrains Mono", "Roboto Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
}

.post-meta,
.excerpt__item,
.comment__time,
.breadcrumb {
  letter-spacing: 0.02em;
}

/* 元信息统一走次级文字色，层级靠字号与字重区分，不靠彩色 */
.post-meta__date,
.post-meta__count,
.excerpt__item,
.recent-posts__date,
.menu-list__count,
.archive-meta time {
  color: var(--ak-text-secondary);
}

/* 品牌字：三层微偏移叠印 + 外描边（印压质感） */
.site-header__brand {
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--waxy-heading);
  -webkit-text-stroke: 0.5px var(--waxy-ink);
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 var(--waxy-signal-core),
    4px 4px 0 rgba(22, 24, 28, 0.16);
}

html.dark .site-header__brand {
  -webkit-text-stroke: 0;
  text-shadow:
    2px 2px 0 rgba(228, 212, 0, 0.55),
    4px 4px 0 rgba(0, 0, 0, 0.5);
  color: var(--waxy-heading);
}

/* ==========================================================================
   3. 氛围底层 —— 列表页完整纹理（阅读模式下整体移除）
   ========================================================================== */

/* 前景颗粒（最上，不遮挡交互） */
html:not(.waxy-reading-mode) body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 底层海报层：压在内容之后、页面背景之上 */
html:not(.waxy-reading-mode) body::after {
  content: "";
  position: fixed;
  inset: 0;
  /* 高度钉死到"地址栏收起"时的最大视口。移动端滚动过程中视口（ICB）高度会随地址栏
     收放而变，inset:0 会让本层跟着变高变矮，层内按百分比定位的色块与网格线随之整体
     挪位，表现为滚动时"卡跳一下"。不支持 lvh 的浏览器会整条忽略，退化为旧的 inset:0。 */
  height: 100lvh;
  z-index: -1;
  pointer-events: none;
  --u: calc(100vw / 33.5);
  transform-origin: 50% 60%;
  transform: translateY(clamp(0px, calc(var(--waxy-scroll, 0px) * 0.1), 48px)) scale(1.14);
  will-change: transform;
  background:
    /* 斜线族：最长斜线压过水平线，撕裂正交秩序 */
    linear-gradient(135deg, transparent calc(50% - 1px), var(--waxy-block-line-1) calc(50% - 1px), var(--waxy-block-line-1) calc(50% + 1px), transparent calc(50% + 1px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(45deg, transparent calc(50% - 0.75px), var(--waxy-block-line-2) calc(50% - 0.75px), var(--waxy-block-line-2) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(30deg, transparent calc(50% - 0.75px), var(--waxy-block-line-3) calc(50% - 0.75px), var(--waxy-block-line-3) calc(50% + 0.75px), transparent calc(50% + 0.75px)) 0 0 / 100% 100% no-repeat,
    /* 主网格：只保留 2 竖 + 3 横，线宽不等、不等距 */
    linear-gradient(90deg, transparent calc(30% - 0.5px), rgba(158, 155, 153, 0.28) calc(30% - 0.5px), rgba(158, 155, 153, 0.28) calc(30% + 0.5px), transparent calc(30% + 0.5px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, transparent calc(72% - 0.5px), rgba(158, 155, 153, 0.28) calc(72% - 0.5px), rgba(158, 155, 153, 0.28) calc(72% + 0.5px), transparent calc(72% + 0.5px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, transparent calc(18% - 1px), rgba(158, 155, 153, 0.3) calc(18% - 1px), rgba(158, 155, 153, 0.3) calc(18% + 1px), transparent calc(18% + 1px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, transparent calc(46% - 0.5px), rgba(158, 155, 153, 0.22) calc(46% - 0.5px), rgba(158, 155, 153, 0.22) calc(46% + 0.5px), transparent calc(46% + 0.5px)) 0 0 / 100% 100% no-repeat,
    linear-gradient(0deg, transparent calc(78% - 1px), rgba(158, 155, 153, 0.3) calc(78% - 1px), rgba(158, 155, 153, 0.3) calc(78% + 1px), transparent calc(78% + 1px)) 0 0 / 100% 100% no-repeat,
    /* 偏移网格副本：+7U, +2.6U 重影 */
    repeating-linear-gradient(90deg, rgba(158, 155, 153, 0.14) 0 1px, transparent 1px calc(var(--u) * 4.5)) calc(var(--u) * 7) calc(var(--u) * 2.6),
    repeating-linear-gradient(0deg, rgba(158, 155, 153, 0.12) 0 1px, transparent 1px calc(var(--u) * 2)) calc(var(--u) * 7) calc(var(--u) * 2.6),
    /* 半调点阵暗纹（机能终端） */
    radial-gradient(circle, var(--waxy-dot-color) 1px, transparent 1.6px) 0 0 / 18px 18px repeat,
    /* 出血大色块：左溢核心档 + 右上淡化档 */
    linear-gradient(90deg, var(--waxy-block-a), var(--waxy-block-a-fade)) 0 0 / calc(var(--u) * 3) 80% no-repeat,
    linear-gradient(90deg, var(--waxy-block-b), var(--waxy-block-b)) 100% 0 / calc(var(--u) * 7) calc(var(--u) * 7) no-repeat,
    linear-gradient(90deg, var(--waxy-block-c), var(--waxy-block-c)) 100% 100% / calc(var(--u) * 6) calc(var(--u) * 6) no-repeat,
    linear-gradient(135deg, transparent 38%, var(--waxy-block-band) 38%, var(--waxy-block-band) 54%, transparent 54%) 0 0 / 100% 100% no-repeat,
    linear-gradient(90deg, var(--waxy-block-d), var(--waxy-block-d)) 0 0 / calc(var(--u) * 3) calc(var(--u) * 3) no-repeat;
}

/* 幽灵 45° 菱形：右侧 1/3 氛围区 */
html:not(.waxy-reading-mode) .content-wrap::before {
  content: "";
  position: fixed;
  z-index: -1;
  top: 12%;
  top: 12lvh; /* 锚点改用最大视口，避免滚动中随地址栏收放漂移（同 body::after） */
  right: -12%;
  width: min(50vw, 700px);
  height: min(38vh, 400px);
  height: min(38lvh, 400px);
  background: var(--waxy-block-ink);
  opacity: var(--waxy-block-ink-opacity);
  clip-path: polygon(6% 32%, 20% 12%, 44% 0, 68% 8%, 86% 26%, 100% 58%, 88% 82%, 62% 100%, 32% 96%, 12% 76%);
  transform: translateY(clamp(0px, calc(var(--waxy-scroll, 0px) * 0.05), 160px));
  will-change: transform;
  pointer-events: none;
}

/* 斜切梯形：左下出血 */
html:not(.waxy-reading-mode) .content-wrap::after {
  content: "";
  position: fixed;
  z-index: -1;
  bottom: 5%;
  bottom: 5lvh; /* 锚点改用最大视口，避免滚动中随地址栏收放漂移（同 body::after） */
  left: -6%;
  width: min(46vw, 640px);
  height: min(26vh, 280px);
  height: min(26lvh, 280px);
  background: var(--waxy-block-ghost);
  opacity: var(--waxy-block-ghost-opacity);
  clip-path: polygon(14% 0, 100% 0, 78% 100%, 0 100%);
  transform: translateY(clamp(0px, calc(var(--waxy-scroll, 0px) * 0.09), 200px));
  will-change: transform;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   3b. 内容页纹理降级 —— 发丝线 + 单一切角
   文章 / 独立页 / 时间线 / 友链：只留最细的网格发丝线，去掉斜线、出血块、
   点阵与幽灵层，把注意力交还给正文。
   （:has() 不支持的浏览器会保留完整纹理，属可接受的降级方向）
   -------------------------------------------------------------------------- */

html:not(.waxy-reading-mode) body:has(.post--single, .post--timeline, .post--friends)::after {
  transform: none;
  background:
    repeating-linear-gradient(90deg, var(--waxy-grid-line) 0 1px, transparent 1px calc(var(--u) * 4.5)) 0 0,
    repeating-linear-gradient(0deg, var(--waxy-grid-line) 0 1px, transparent 1px calc(var(--u) * 2)) 0 0;
}

html:not(.waxy-reading-mode) body:has(.post--single, .post--timeline, .post--friends) .content-wrap::before,
html:not(.waxy-reading-mode) body:has(.post--single, .post--timeline, .post--friends) .content-wrap::after {
  display: none;
}

/* 内容页正文面：不铺网格，改由发丝线边框与单一切角定义边界。
   面板底色由 §7 的半透明面板规则提供（同权重、位置在后，此处不重复声明）。 */
html:not(.waxy-reading-mode) .post--single,
html:not(.waxy-reading-mode) .post--timeline,
html:not(.waxy-reading-mode) .post--friends {
  background-image: none;
  border: var(--ak-line-hairline) solid var(--waxy-hairline);
  box-shadow: var(--ak-shadow-panel);
}

/* ==========================================================================
   4. 顶部导航 / 状态栏
   ========================================================================== */

.site-header {
  border-top: 0;
  border-bottom: 1px solid var(--waxy-border);
  background: var(--waxy-surface);
}

/* 断裂横带：贯穿全宽的主色细带，中段挖空 */
html:not(.waxy-reading-mode) .site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg,
    var(--ak-signal-action) 0 38%,
    transparent 38% 62%,
    var(--ak-signal-action) 62% 100%);
}

.site-header__brand {
  color: var(--waxy-heading);
  letter-spacing: -0.04em;
}

.nav__link {
  letter-spacing: 0.03em;
}

/* 当前所在项：青色标记 + 下划线（形状）+ 加粗（字重），三重指示不依赖颜色单一通道 */
.nav__item--active {
  border-bottom-width: 2px;
  border-bottom-color: var(--ak-signal-info);
}

.nav__item--active > .nav__link {
  color: var(--ak-signal-info);
  font-weight: 600;
}

html:not(.waxy-reading-mode) .nav__item--active > .nav__link:hover {
  color: var(--ak-signal-info);
}

/* 图标按钮：切角矩形 + 快速机械反馈（移动端搜索钮与主题/阅读切换同族同手势） */
.waxy-theme-toggle,
.waxy-read-toggle,
.site-header__search-toggle {
  border-radius: 0;
  color: var(--ak-text-primary);
  border-color: var(--waxy-border-mid);
  clip-path: polygon(
    var(--ak-cut-sm) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-sm)),
    calc(100% - var(--ak-cut-sm)) 100%,
    0 100%,
    0 var(--ak-cut-sm)
  );
  transition:
    color var(--ak-motion-fast) var(--ak-ease-standard),
    border-color var(--ak-motion-fast) var(--ak-ease-standard),
    background-color var(--ak-motion-fast) var(--ak-ease-standard);
}

.waxy-theme-toggle:hover,
.waxy-read-toggle:hover,
.site-header__search-toggle:hover {
  color: var(--ak-text-primary);
  border-color: var(--ak-signal-action);
  background-color: var(--waxy-bg-soft);
}

/* 搜索可展开面板（details）：展开是“已接入”的持续状态，用信号色描边 + 信号色底，
   与 hover 的中性底区分开。waxy-main.css 的 .site-header__search-dropdown[open]
   规则权重高于裸 :hover，这里加 html:not(.waxy-reading-mode) 前缀再提一级，
   保证展开（含展开时悬停）不会回落成主色圆钮。 */
html:not(.waxy-reading-mode) .site-header__search-dropdown[open] .site-header__search-toggle {
  color: var(--ak-text-primary);
  border-color: var(--ak-signal-action);
  background-color: rgba(var(--waxy-signal-core-rgb), 0.22);
}

/* 抽屉导航：语义与焦点管理由 js/waxy-drawer-nav.js 负责，这里只管视觉 */
.waxy-drawer {
  background: var(--ak-surface-canvas);
}

.waxy-drawer__nav {
  background: var(--ak-surface-panel);
  border: var(--ak-line-hairline) solid var(--waxy-hairline);
}

/* 覆盖 waxy-main.css 里遗留的粉红激活底色，改用青色信号 */
.waxy-drawer__nav .nav__item--active > .nav__link {
  color: var(--ak-signal-info);
  background-color: rgba(var(--waxy-info-rgb), 0.14);
}

.waxy-drawer__nav .nav__item--active > .nav__link::before {
  background: var(--ak-signal-info);
}

/* ==========================================================================
   5. 输入框
   --------------------------------------------------------------------------
   waxy-main.css 里有 html.dark .form-field 与 html.dark input[type=text] 等
   高权重覆盖，故此处统一加 html:not(.waxy-reading-mode) 前缀提权，
   同时保证阅读模式下不介入。
   ========================================================================== */

html:not(.waxy-reading-mode) .search-form__input,
html:not(.waxy-reading-mode) .form-field {
  background-color: var(--ak-surface-panel);
  color: var(--ak-text-primary);
  border: 1px solid var(--waxy-border-mid);
  border-radius: 0;
  clip-path: polygon(4px 0, 100% 0, 100% 100%, 0 100%, 0 4px);
  transition: border-color var(--ak-motion-fast) var(--ak-ease-standard);
}

/* 焦点属于信息态，用青色；同时加粗左边框，形态与颜色一起变 */
html:not(.waxy-reading-mode) .search-form__input:focus,
html:not(.waxy-reading-mode) .form-field:focus {
  border-color: var(--ak-signal-info);
  border-left-width: var(--ak-line-strong);
  outline: none;
}

/* 表单校验：invalid 只在用户交互之后（:user-invalid）才提示 */
html:not(.waxy-reading-mode) .form-field:user-invalid {
  border-color: var(--ak-signal-danger);
  background-color: rgba(var(--waxy-danger-rgb), 0.06);
}

html:not(.waxy-reading-mode) .form-field:disabled,
html:not(.waxy-reading-mode) .form-field[disabled] {
  color: var(--ak-signal-disabled);
  border-color: var(--waxy-border);
  background-color: var(--ak-surface-muted);
  cursor: not-allowed;
}

/* ==========================================================================
   6. 按钮
   ========================================================================== */

.btn--default,
.btn--outline,
.post-content .protected input.submit,
.comment-form__submit {
  border-radius: 0;
  letter-spacing: 0.04em;
  clip-path: polygon(
    var(--ak-cut-sm) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-sm)),
    calc(100% - var(--ak-cut-sm)) 100%,
    0 100%,
    0 var(--ak-cut-sm)
  );
  transition:
    background-color var(--ak-motion-fast) var(--ak-ease-standard),
    border-color var(--ak-motion-fast) var(--ak-ease-standard),
    color var(--ak-motion-fast) var(--ak-ease-standard),
    transform var(--ak-motion-fast) var(--ak-ease-standard);
}

/* 按压：位移 + 缩放，配合颜色变化 */
.btn--default:active,
.btn--outline:active,
.comment-form__submit:active {
  transform: scale(0.97);
}

/* 主按钮：黄底黑字（品牌命令色） */
.btn--default,
.post-content .protected input.submit,
.comment-form__submit {
  background-color: var(--waxy-btn-bg);
  border-color: var(--waxy-btn-border);
  color: var(--waxy-btn-text);
}

.btn--default:hover,
.post-content .protected input.submit:hover,
.comment-form__submit:hover {
  background-color: var(--waxy-btn-bg-hover);
  border-color: var(--waxy-btn-border-hover);
  color: var(--waxy-btn-text);
}

/* 次按钮：透明底 + 强边框，hover 转为品牌色描边 */
.btn--outline {
  border-color: var(--waxy-border-strong);
  background: transparent;
  color: var(--ak-text-primary);
}

.btn--outline:hover {
  border-color: var(--ak-signal-action);
  color: var(--waxy-primary);
  background-color: var(--waxy-bg-soft);
}

.btn:disabled,
.btn--default:disabled,
.btn--outline:disabled,
button[disabled] {
  background-color: var(--ak-surface-muted);
  border-color: var(--waxy-border);
  color: var(--ak-signal-disabled);
  cursor: not-allowed;
  transform: none;
}

/* 阅读模式下的按钮字色 —— waxy-main.css 里那条 html.waxy-reading-mode .btn--default
   用的是 color:var(--waxy-bg)，它是为「底色 = --waxy-primary」写的；本皮肤把底色换成
   --waxy-btn-bg（信号黄），而亮色阅读模式下 --waxy-bg 是白，于是成了黄底白字。
   这里把字色交还给黄底上的墨色（--waxy-btn-text）。同权重靠文件顺序胜出，
   皮肤删掉时本规则一起消失，不影响原主题。
   排除 :disabled：本规则权重高于上面的禁用灰字规则，不排除会让禁用态看起来可用。 */
html.waxy-reading-mode .btn--default:not(:disabled),
html.waxy-reading-mode .post-content .protected input.submit:not(:disabled) {
  color: var(--waxy-btn-text);
}

/* 解锁按钮提交期间会被 JS 置为 disabled（见 js/waxy-main.js 的密码校验），而它只带
   .submit 类，匹配不到上面那组禁用规则，阅读模式下就会留下一个白字黄底的死按钮。
   这里按同一套禁用语汇补上中性底 + 灰字。 */
html.waxy-reading-mode .post-content .protected input.submit:disabled {
  background-color: var(--ak-surface-muted);
  border-color: var(--waxy-border);
  color: var(--ak-signal-disabled);
}

/* ==========================================================================
   7. 卡片 / 面板
   ========================================================================== */

.post,
.widget,
.breadcrumb,
.empty-state,
.post-nav__item,
.waxy-drawer__nav,
.page-404__card {
  border-radius: 0;
}

/* 非阅读模式下，面板半透明 + 轻微毛玻璃，让底层纹理透出来 */
html:not(.waxy-reading-mode) .post,
html:not(.waxy-reading-mode) .widget,
html:not(.waxy-reading-mode) .breadcrumb,
html:not(.waxy-reading-mode) .empty-state,
html:not(.waxy-reading-mode) .post-nav__item,
html:not(.waxy-reading-mode) .waxy-drawer__nav,
html:not(.waxy-reading-mode) .page-404__card {
  background-color: var(--waxy-panel-bg);
  -webkit-backdrop-filter: blur(var(--waxy-panel-blur)) saturate(1.08);
  backdrop-filter: blur(var(--waxy-panel-blur)) saturate(1.08);
}

/* 角标括号：左上用主色，右下用灰，形成不对称张力（唯一装饰手势） */
html:not(.waxy-reading-mode) .post::before,
html:not(.waxy-reading-mode) .widget::before {
  content: "";
  position: absolute;
  top: 10px;
  left: 10px;
  width: 13px;
  height: 13px;
  border-top: 1px solid var(--ak-signal-action);
  border-left: 1px solid var(--ak-signal-action);
  pointer-events: none;
  z-index: 1;
}

html:not(.waxy-reading-mode) .post::after,
html:not(.waxy-reading-mode) .widget::after {
  content: "";
  position: absolute;
  bottom: 10px;
  right: 10px;
  width: 13px;
  height: 13px;
  border-bottom: 1px solid var(--waxy-border-strong);
  border-right: 1px solid var(--waxy-border-strong);
  pointer-events: none;
  z-index: 1;
}

/* 带封面图的卡片：括号会压在图片上，隐藏它以保持封面干净 */
html:not(.waxy-reading-mode) .post:has(.post__head--has-bg)::before {
  display: none;
}

/* 内容页只保留一处切角标记（左上主色），右下灰括号去掉 */
html:not(.waxy-reading-mode) .post--single::after,
html:not(.waxy-reading-mode) .post--timeline::after,
html:not(.waxy-reading-mode) .post--friends::after {
  display: none;
}

/* 空状态：发丝线框 + 静默图标，作为“此处无内容”的明确信号 */
.empty-state {
  border: var(--ak-line-hairline) solid var(--waxy-hairline);
}

.empty-state__icon {
  color: var(--ak-signal-disabled);
}

.empty-state__text {
  color: var(--ak-text-secondary);
}

.excerpt__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* ==========================================================================
   8. 摘要缩略图 / 封面图 / 头像
   ========================================================================== */

.excerpt__img {
  border-radius: 0;
  clip-path: polygon(
    var(--ak-cut-md) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-md)),
    calc(100% - var(--ak-cut-md)) 100%,
    0 100%,
    0 var(--ak-cut-md)
  );
  filter: saturate(0.86) contrast(1.04);
}

.post__head--has-bg::before {
  filter: saturate(0.88) contrast(1.04) brightness(0.94);
}

/* 封面图上的标题：基础样式把它降到 700，这里统一回命令面的 900 */
html:not(.waxy-reading-mode) .post__head--has-bg .post__title {
  font-weight: 900;
}

html:not(.waxy-reading-mode) .post-content img {
  border-radius: 0;
  filter: saturate(0.92) contrast(1.02);
}

/* 暗色下基础样式另有一套 brightness(.85)，这里保持同样的降饱和意图 */
html.dark:not(.waxy-reading-mode) .post-content img {
  border-radius: 0;
  filter: saturate(0.92) contrast(1.02) brightness(0.9);
}

/* ==========================================================================
   9. 侧栏 About 卡片
   ========================================================================== */

.card__bg {
  border-radius: 0;
  filter: saturate(0.85);
}

.card__avatar {
  border-radius: 0;
  box-shadow: none;
  border: 1px solid var(--waxy-border-mid);
  clip-path: polygon(
    var(--ak-cut-lg) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-lg)),
    calc(100% - var(--ak-cut-lg)) 100%,
    0 100%,
    0 var(--ak-cut-lg)
  );
}

.card__avatar:hover {
  transform: none;
}

.card__stats {
  border-top: 1px solid var(--waxy-border);
}

.card__stat {
  border-left: 1px solid var(--waxy-border);
}

.card__footer {
  color: var(--ak-text-secondary);
  font-size: 0.9em;
}

/* 统计数值作为该卡片的“命令值”：品牌色 + 加粗。
   基础样式以 .card__stat-label,.card__stat-value 定义颜色，需用 .card__stats
   前缀取得同等权重。 */
.card__stats .card__stat-value {
  color: var(--waxy-primary);
  font-weight: 700;
}

.card__stats .card__stat-label {
  color: var(--ak-text-secondary);
  font-size: 0.85em;
  letter-spacing: 0.06em;
}

/* ==========================================================================
   10. 标签 / Chip —— 唯一的平行四边形手势，用于“标签”这一语义
   ========================================================================== */

.tag-cloud a,
.excerpt__badge,
.excerpt__badge-tip__item {
  border-radius: 0;
  letter-spacing: 0.03em;
  background-color: var(--waxy-chip-bg);
  color: var(--waxy-chip-text);
  clip-path: polygon(5px 0, 100% 0, calc(100% - 5px) 100%, 0 100%);
  transition:
    background-color var(--ak-motion-fast) var(--ak-ease-standard),
    color var(--ak-motion-fast) var(--ak-ease-standard);
}

.tag-cloud a:hover,
.excerpt__badge:hover,
.excerpt__badge-tip__item:hover {
  background-color: var(--waxy-chip-bg-hover);
  color: var(--waxy-chip-text);
}

/* 折叠的「+N」徽章是控件而非标签，用中性底以示区别 */
.excerpt__badge--more {
  background-color: var(--waxy-badge-bg);
  color: var(--ak-text-primary);
}

.excerpt__badge--more:hover {
  background-color: var(--waxy-badge-cat-bg);
}

html.dark .post-meta .excerpt__badge--cat,
html.dark .post-meta .excerpt__badge-tip__item.excerpt__badge--cat {
  background-color: var(--waxy-chip-bg);
  color: var(--waxy-chip-text);
}

/* ==========================================================================
   11. 评论区
   ========================================================================== */

.comment-list > .comment--root {
  border-bottom: 1px solid var(--waxy-border);
}

.comment__children {
  border-top: 1px solid var(--waxy-border);
}

.comment__children > .comment--reply + .comment--reply {
  border-top: 1px solid var(--waxy-border);
}

.comment__avatar {
  border-radius: 0;
  clip-path: polygon(
    5px 0,
    100% 0,
    100% calc(100% - 5px),
    calc(100% - 5px) 100%,
    0 100%,
    0 5px
  );
}

.comment__reply-link {
  color: var(--ak-text-secondary);
  transition: color var(--ak-motion-fast) var(--ak-ease-standard);
}

.comment__reply-link:hover {
  color: var(--waxy-primary);
}

/* 待审核状态：信息色 + 文字说明，不靠颜色单独表意。
   基础样式含 html.dark .comment__pending，故加前缀提权。 */
html:not(.waxy-reading-mode) .comment__pending {
  color: var(--ak-signal-info);
  background-color: rgba(var(--waxy-info-rgb), 0.10);
  border: 1px solid rgba(var(--waxy-info-rgb), 0.32);
  border-left-width: var(--ak-line-strong);
  border-radius: 0;
  padding: 3px 9px;
}

.comment__reply-form {
  margin-top: 12px;
}

.comment-form__identity {
  border-radius: 0;
  border-left: var(--ak-line-strong) solid var(--waxy-border-mid);
  background: var(--ak-surface-muted);
}

.comment-form__identity-user a,
.comment-form__identity-logout {
  color: var(--waxy-primary);
}

.comment-form__hint {
  color: var(--ak-text-secondary);
}

/* ==========================================================================
   12. 目录 / 浮动按钮 / 返回顶部
   ========================================================================== */

.waxy-toc-sidebar__link {
  border-left-width: var(--ak-line-strong);
  transition:
    color var(--ak-motion-fast) var(--ak-ease-standard),
    background-color var(--ak-motion-fast) var(--ak-ease-standard);
}

/* 目录当前项属于“当前所在位置”，与导航一致使用青色 */
.waxy-toc-sidebar__link.is-active {
  color: var(--ak-signal-info);
  border-left-color: var(--ak-signal-info);
  background-color: rgba(var(--waxy-info-rgb), 0.14);
  font-weight: 600;
}

.waxy-toc-sidebar__bar,
.waxy-toc-float-panel .waxy-toc-sidebar__bar {
  border-radius: 0;
  background-color: var(--waxy-bg-soft);
}

.waxy-toc-sidebar__bar-fill {
  background-color: var(--ak-signal-action);
}

.waxy-toc-float-btn,
.waxy-toc-float-panel,
#back-to-top {
  border-radius: 0;
  clip-path: polygon(
    var(--ak-cut-sm) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-sm)),
    calc(100% - var(--ak-cut-sm)) 100%,
    0 100%,
    0 var(--ak-cut-sm)
  );
}

/* 返回顶部：品牌色实底，hover 提高不透明度而非换色 */
#back-to-top {
  background: var(--waxy-btn-bg);
  color: var(--waxy-btn-text);
  transition: background-color var(--ak-motion-fast) var(--ak-ease-standard);
}

#back-to-top:hover {
  background: var(--waxy-btn-bg-hover);
}

/* ==========================================================================
   13. 404 —— 唯一允许保留完整氛围的页面
   ========================================================================== */

.page-404__card {
  clip-path: polygon(
    var(--ak-cut-lg) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-lg)),
    calc(100% - var(--ak-cut-lg)) 100%,
    0 100%,
    0 var(--ak-cut-lg)
  );
}

.page-404__code {
  background: none;
  background-clip: initial;
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--waxy-primary);
  color: var(--waxy-primary);
  letter-spacing: -0.04em;
  text-shadow:
    3px 0 0 var(--waxy-signal-core),
    5px 4px 0 rgba(22, 24, 28, 0.18);
}

html.dark .page-404__code {
  text-shadow:
    3px 0 0 rgba(228, 212, 0, 0.5),
    5px 4px 0 rgba(0, 0, 0, 0.55);
}

.page-404__msg {
  color: var(--ak-text-secondary);
}

/* ==========================================================================
   14. 分页
   ========================================================================== */

.pagination a,
.page-number {
  border-radius: 0;
  background-color: var(--waxy-btn-bg);
  color: var(--waxy-btn-text);
  clip-path: polygon(
    var(--ak-cut-sm) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-sm)),
    calc(100% - var(--ak-cut-sm)) 100%,
    0 100%,
    0 var(--ak-cut-sm)
  );
  transition: background-color var(--ak-motion-fast) var(--ak-ease-standard);
}

.pagination a:hover {
  background-color: var(--waxy-btn-bg-hover);
  color: var(--waxy-btn-text);
}

.pagination__info {
  background: transparent;
  color: var(--ak-text-secondary);
  line-height: 36px;
  padding: 0 12px;
}

/* ==========================================================================
   15. 归档列表 / 时间轴 —— 内容是序列，编号与刻度在此成立
   ========================================================================== */

.archive-tip {
  color: var(--ak-text-secondary);
}

.archive-tip strong {
  color: var(--waxy-primary);
  font-weight: 700;
}

.archive-year {
  color: var(--ak-text-primary);
  border-bottom: 1px solid var(--waxy-hairline);
}

/* 时间轴脊线：发丝线；节点方块化 */
.archive-item::before {
  background: var(--waxy-hairline);
  width: 1px;
}

.archive-meta::after {
  border-radius: 0;
  background: var(--waxy-primary);
}

/* 覆盖 waxy-main.css 里遗留的 #ff5722 悬停色 */
.archive-item:hover {
  color: var(--ak-text-primary);
  background: var(--waxy-bg-soft);
}

.archive-item:hover .archive-meta::after {
  background: var(--ak-signal-info);
}

.archive-meta {
  color: var(--ak-text-secondary);
}

/* 时间轴：圆点改方点，脊线改发丝线 */
.post--timeline .post-content li::before {
  border-radius: 0;
}

.post--timeline .post-content li.timeline-epigraph::before {
  border-radius: 0;
  background: var(--ak-signal-action);
}

.post--timeline .post-content ul::before {
  width: 1px;
  background-image: linear-gradient(
    to bottom,
    var(--waxy-hairline),
    var(--waxy-hairline) 60%,
    transparent
  );
}

/* 题记：基础样式用粉色 #e0a8a8 且权重较高，需同等权重覆盖 */
.post--timeline .post-content li.timeline-epigraph strong {
  color: var(--waxy-primary);
}

.post--timeline .post-content li.timeline-epigraph .timeline-epigraph__desc {
  color: var(--ak-text-secondary);
}

/* ==========================================================================
   16. 正文区块
   ========================================================================== */

.post-content {
  color: var(--waxy-text-content);
}

.post-content h1,
.post-content h2,
.post-content h3,
.post-content h4,
.post-content h5,
.post-content h6 {
  color: var(--waxy-heading);
}

.post-content blockquote {
  border-left: var(--ak-line-strong) solid var(--waxy-primary);
  background-color: var(--waxy-bg-soft);
  border-radius: 0;
}

.post-content pre,
.post-content code {
  font-family: "JetBrains Mono", "Roboto Mono", "SFMono-Regular", Consolas,
    "Liberation Mono", monospace;
}

.post-content pre {
  border-radius: 0;
  border-left: var(--ak-line-strong) solid var(--waxy-border-mid);
}

/* 正文内的正文链接沿用品牌色，与导航/状态色区分 */
.post-content a {
  color: var(--waxy-primary);
}

.post-content a:hover {
  color: var(--waxy-primary-hover);
}

/* 分页/上下篇导航 */
.post-nav__label {
  color: var(--waxy-primary);
}

.post-nav__link {
  color: var(--ak-text-primary);
}

/* ==========================================================================
   17. 语义色 —— hint / alert / shrink-box（状态只在真有状态时出现）
   ========================================================================== */

.post-content .hint,
.alert,
.shrink-box {
  border-radius: 0;
  border-left-width: var(--ak-line-strong);
}

/* hint 默认 = 信息 */
.post-content .hint,
html.dark .post-content .hint,
.post-content .hint.hint--info,
.post-content .hint.hint-info,
html.dark .post-content .hint.hint--info,
html.dark .post-content .hint.hint-info {
  background-color: rgba(var(--waxy-info-rgb), 0.10);
  border-color: var(--waxy-border-mid);
  border-left-color: var(--ak-signal-info);
}

.post-content .hint.hint--warning,
.post-content .hint.hint-warning,
html.dark .post-content .hint.hint--warning,
html.dark .post-content .hint.hint-warning {
  background-color: rgba(var(--waxy-warning-rgb), 0.10);
  border-left-color: var(--ak-signal-warning);
}

.post-content .hint.hint--danger,
.post-content .hint.hint-danger,
html.dark .post-content .hint.hint--danger,
html.dark .post-content .hint.hint-danger {
  background-color: rgba(var(--waxy-danger-rgb), 0.10);
  border-left-color: var(--ak-signal-danger);
}

/* 过时提示的图标跟随所在 hint 的语义色。
   基础样式以 .post-content .hint.hint--x .hint--x-icon 的权重定义图标色，
   此处必须用同等权重的选择器才能覆盖。 */
.post-content .hint.hint--warning .hint--warning-icon,
.post-content .hint.hint-warning .hint-warning-icon {
  color: var(--ak-signal-warning);
}

.post-content .hint.hint--info .hint--info-icon,
.post-content .hint.hint-info .hint-info-icon {
  color: var(--ak-signal-info);
}

.post-content .hint.hint--danger .hint--danger-icon,
.post-content .hint.hint-danger .hint-danger-icon {
  color: var(--ak-signal-danger);
}

/* 注意：此处不能用 `border` 简写，否则会把上面设的 border-left-width 重置回 1px。
   基础样式已提供 `border: 1px solid transparent`，各变体只需补 border-color。 */

.alert--success,
html.dark .alert--success {
  color: var(--ak-signal-success);
  background-color: rgba(var(--waxy-success-rgb), 0.12);
  border-color: rgba(var(--waxy-success-rgb), 0.35);
}

.alert--info,
html.dark .alert--info {
  color: var(--ak-signal-info);
  background-color: rgba(var(--waxy-info-rgb), 0.12);
  border-color: rgba(var(--waxy-info-rgb), 0.35);
}

.alert--warning,
html.dark .alert--warning {
  color: var(--ak-signal-warning);
  background-color: rgba(var(--waxy-warning-rgb), 0.12);
  border-color: rgba(var(--waxy-warning-rgb), 0.35);
}

.alert--danger,
html.dark .alert--danger {
  color: var(--ak-signal-danger);
  background-color: rgba(var(--waxy-danger-rgb), 0.12);
  border-color: rgba(var(--waxy-danger-rgb), 0.35);
}

.alert__close {
  border-radius: 0;
  color: inherit;
}

/* 折叠块：默认中性，展开态用品牌色标记 */
.shrink-box {
  background-color: var(--ak-surface-muted);
  border-color: var(--waxy-border);
}

.shrink-box--active {
  border-left-color: var(--ak-signal-action);
}

/* 状态变体：基础样式内置一套 bootstrap 风格配色，此处统一到语义令牌。
   每个变体先落两个组件级变量，再在共享规则里消费，避免四套重复声明。
   前缀 html:not(.waxy-reading-mode) 用于胜出基础样式的 html.dark 变体。 */
html:not(.waxy-reading-mode) .shrink-box--success { --sb-rgb: var(--waxy-success-rgb); --sb-fg: var(--ak-signal-success); }
html:not(.waxy-reading-mode) .shrink-box--info    { --sb-rgb: var(--waxy-info-rgb);    --sb-fg: var(--ak-signal-info); }
html:not(.waxy-reading-mode) .shrink-box--warning { --sb-rgb: var(--waxy-warning-rgb); --sb-fg: var(--ak-signal-warning); }
html:not(.waxy-reading-mode) .shrink-box--danger  { --sb-rgb: var(--waxy-danger-rgb);  --sb-fg: var(--ak-signal-danger); }

html:not(.waxy-reading-mode) .shrink-box--success,
html:not(.waxy-reading-mode) .shrink-box--info,
html:not(.waxy-reading-mode) .shrink-box--warning,
html:not(.waxy-reading-mode) .shrink-box--danger {
  border-color: rgba(var(--sb-rgb), 0.40);
}

html:not(.waxy-reading-mode) .shrink-box--success .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--info .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--warning .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--danger .shrink-box__title {
  color: var(--sb-fg);
  background-color: rgba(var(--sb-rgb), 0.10);
}

html:not(.waxy-reading-mode) .shrink-box--success.shrink-box--active .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--info.shrink-box--active .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--warning.shrink-box--active .shrink-box__title,
html:not(.waxy-reading-mode) .shrink-box--danger.shrink-box--active .shrink-box__title {
  border-bottom-color: rgba(var(--sb-rgb), 0.30);
}

/* 行内标记：高亮用品牌黄，强调用注意色（基础样式为 #ff9 / #c00） */
html:not(.waxy-reading-mode) .wrap_hi {
  background-color: rgba(var(--waxy-signal-core-rgb), 0.42);
  color: inherit;
}

html:not(.waxy-reading-mode) .wrap_em {
  color: var(--ak-signal-danger);
}

/* 加密文章表单的错误提示 */
.post-content .protected__error {
  color: var(--ak-signal-danger);
}

/* ==========================================================================
   18. 加载页 —— 扫描式进度条（禁转圈）
   ========================================================================== */

.loading__overlay {
  background-color: var(--ak-surface-canvas);
}

.loading {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 240px;
  height: 4px;
  margin: -2px 0 0 -120px;
  display: block;
  background-color: var(--waxy-bg-soft);
  overflow: hidden;
}

.loading span {
  display: none;
}

.loading::before {
  content: "";
  position: absolute;
  inset: 0;
  width: 40%;
  background-color: var(--ak-signal-action);
  animation: waxy-ark-scan 1.2s linear infinite;
}

@keyframes waxy-ark-scan {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(250%); }
}

/* ==========================================================================
   19. 页脚 —— 紧凑元信息 + 发丝线顶线
   ========================================================================== */

.site-footer {
  border-top: 1px solid var(--waxy-hairline);
  color: var(--ak-text-secondary);
  font-size: 0.9em;
}

.site-footer a {
  color: var(--ak-text-primary);
}

.site-footer a:hover {
  color: var(--waxy-primary);
}

/* ==========================================================================
   20. 面板网格线 —— 让底层网格叠加到各面板上（内容页除外）
   ========================================================================== */

.post,
.widget,
.breadcrumb,
.empty-state,
.post-nav__item,
.waxy-drawer__nav,
.page-404__card {
  background-image:
    linear-gradient(var(--waxy-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--waxy-grid-line) 1px, transparent 1px);
  background-size: 40px 40px, 40px 40px;
  background-position: 0 0, 0 0;
}

/* ==========================================================================
   21. 焦点可见性 —— 焦点是功能信号，统一用青色，且不被切角裁掉
   --------------------------------------------------------------------------
   clip-path 会连同 outline 一起裁剪，因此所有切角控件改用负 outline-offset，
   把焦点环画在形状内部。
   ========================================================================== */

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: var(--ak-focus-width) solid var(--ak-focus-color);
  outline-offset: var(--ak-focus-offset);
}

/* 切角控件：焦点环内缩到切角安全区之内 */
.btn--default:focus-visible,
.btn--outline:focus-visible,
.comment-form__submit:focus-visible,
.post-content .protected input.submit:focus-visible,
.search-form__input:focus-visible,
.form-field:focus-visible,
.waxy-theme-toggle:focus-visible,
.waxy-read-toggle:focus-visible,
.pagination a:focus-visible,
.page-number:focus-visible,
.waxy-toc-float-btn:focus-visible,
#back-to-top:focus-visible {
  outline-offset: calc(-1 * var(--ak-focus-width) - 2px);
}

/* 平行四边形标签：内缩量需大于切角尺寸 */
.tag-cloud a:focus-visible,
.excerpt__badge:focus-visible,
.excerpt__badge-tip__item:focus-visible {
  outline-offset: calc(-1 * var(--ak-focus-width) - 4px);
}

/* 封面图上的标题在图片背景上，焦点环补一层暗描边保证可见 */
.post__head--has-bg .post__title a:focus-visible {
  outline-color: var(--waxy-surface);
  outline-offset: 1px;
}

/* 移动端搜索钮：waxy-main.css 的 .site-header__search-toggle:focus-visible
   （主色描边）权重高于通用 summary 规则，这里颜色与切角内缩一并显式覆盖 */
html:not(.waxy-reading-mode) .site-header__search-toggle:focus-visible {
  outline: var(--ak-focus-width) solid var(--ak-focus-color);
  outline-offset: calc(-1 * var(--ak-focus-width) - 2px);
}

/* ==========================================================================
   22. 触控目标 —— 粗指针设备下保证 ≥ 44×44
   （例外：斜平行四边形 chip 取 30px，见本节的单独说明）
   ========================================================================== */

@media (pointer: coarse) {
  /* 仅补足高度，不改变已在使用的 display，避免影响桌面导航的 caret 定位 */
  .menu-list a,
  .recent-posts__title,
  .waxy-toc-sidebar__link {
    min-height: 44px;
  }

  .nav__sub-toggle,
  .waxy-theme-toggle,
  .waxy-read-toggle,
  .site-header__search-toggle,
  .site-header__toggle,
  .search-form__btn {
    min-width: 44px;
    min-height: 44px;
  }

  /* 行内元素需要转为 inline-flex 才能撑起最小高度 */
  .card__links a,
  .pagination a,
  .page-number,
  .waxy-toc-float-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* 斜平行四边形 chip（文章分类 / 标签）是次级元素，不套 44px：44px 会把它撑到
     同行的按钮（.excerpt__more ≈ 35px）之上，把摘要卡片顶肿。按 WCAG 2.5.8
     （AA 下限 24px）取 30px。放这里而不是上面那组，就是为了保住这条例外。 */
  .excerpt__badge,
  .tag-cloud a {
    min-height: 30px;
    display: inline-flex;
    align-items: center;
  }

  .waxy-toc-sidebar__link {
    display: flex;
    align-items: center;
  }

  #back-to-top {
    width: 48px;
    height: 48px;
  }
}

/* ==========================================================================
   23. 动效克制 + 降低动态偏好
   ========================================================================== */

.btn--default,
.btn--outline,
.comment-form__submit,
.nav__link,
.excerpt__badge,
.tag-cloud a {
  transition-timing-function: var(--ak-ease-standard);
  transition-duration: var(--ak-motion-fast);
}

/* 标题链接轻反馈 */
.excerpt__title a {
  transition: color var(--ak-motion-fast) var(--ak-ease-standard);
}

.excerpt__title a:hover {
  color: var(--waxy-primary);
}

/* 置顶 / 公告标记：品牌色实底 */
.post__featured {
  background: var(--waxy-chip-bg);
  color: var(--waxy-chip-text);
}

.announce .post__featured {
  background: var(--ak-signal-info);
  color: var(--waxy-surface);
}

@media (prefers-reduced-motion: reduce) {
  /* 环境循环动画停止 */
  .loading::before {
    animation: none;
    width: 100%;
    transform: none;
  }

  /* 视差与悬停位移停止，静态内容保持可用 */
  html:not(.waxy-reading-mode) body::after,
  html:not(.waxy-reading-mode) .content-wrap::before,
  html:not(.waxy-reading-mode) .content-wrap::after {
    transform: none;
  }

  .post__head--has-bg:hover::before {
    transform: none;
  }

  .btn--default,
  .btn--outline,
  .comment-form__submit,
  .nav__link,
  .excerpt__badge,
  .tag-cloud a,
  .waxy-theme-toggle,
  .waxy-read-toggle,
  .site-header__search-toggle,
  .search-form__input,
  .form-field,
  .excerpt__title a,
  .comment__reply-link,
  .archive-meta::after {
    transition: none;
  }

  .btn--default:active,
  .btn--outline:active,
  .comment-form__submit:active {
    transform: none;
  }
}

/* ==========================================================================
   24. 独立页模板补充 —— 友链 / 说说
   ========================================================================== */

/* 友链：头像框切角（不加边框——clip-path 会在斜边处切断边框线），
   网格由用户内容（ul）决定 */
.friends-img-box {
  border-radius: 0;
  background: var(--ak-surface-muted);
  clip-path: polygon(
    var(--ak-cut-md) 0,
    100% 0,
    100% calc(100% - var(--ak-cut-md)),
    calc(100% - var(--ak-cut-md)) 100%,
    0 100%,
    0 var(--ak-cut-md)
  );
}

.post--friends .post-content img {
  border-radius: 0;
}

/* 说说页：页头居中、标题下主色短杠（不改动 Says 插件自身的列表样式） */
.says-page .post__head {
  text-align: center;
}

.says-page .post__border {
  width: 60px;
  height: var(--ak-line-strong);
  background: var(--ak-signal-action);
  margin: 12px auto 0;
  border-radius: 0;
  border-bottom: 0;
}

.says-intro {
  margin-bottom: 20px;
}