/* los.chips.us.ci —— 手写样式表。
 *
 * 约束（改动前请先读）：
 *   1. 零 JavaScript、零外部字体、零 CDN。因此这里不出现 @font-face，
 *      也不依赖任何 JS 才能工作的效果。
 *   2. 只动 transform / opacity / color。其它属性（width、height、box-shadow
 *      过渡）会触发 layout 或 paint，在长列表页上是无谓开销。
 *   3. 任何 :hover 效果都必须包在 @media (hover: hover) and (pointer: fine) 里。
 *      触屏在点击时会触发 hover，不门控就会出现「点一下就卡住高亮」的假状态。
 *   4. 时长一律 < 300ms。阅读类站点反复出现的交互（悬停、点击）越快越好；
 *      只有「用户正在做决定」的地方才允许慢（本表没有这种场景）。
 *
 * 配色说明：暖纸 / 墨。全部组合已按 WCAG 计算过对比度，正文 16.8:1，
 * 最低的一项也有 5.2:1（AA 正文要求 4.5:1）。
 */

:root {
  /* 暖纸 —— 取代默认的冷灰蓝 */
  --bg: #fdfcf9;
  --fg: #1c1b19;
  --muted: #6a645d;
  --border: #e6e1d8;
  --border-strong: #d5cec2;
  --surface: #f6f3ec;
  --code-bg: #f4f1ea;
  /* 强调色规则（重要）：
     --accent 只用于**可交互**的元素 —— 链接、标签、可点区域。
     标题、正文、站名一律用 --fg，不用强调色。
     唯一的例外是导语的左侧竖线：那是结构性强调，不是装饰。
     坚持这条规则，红色在页面上就始终意味着「这里可以点」。 */
  --accent: #9a3d16;
  --accent-soft: #f5e9e2;
  --mark: #f6e7bd;

  --measure: 44rem;
  --radius: 4px;
  --radius-sm: 3px;

  /* 自定义缓动：内置的 ease / ease-out 太弱，运动感不足 */
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);

  /* 时长：颜色变化比位移略快，位移需要一点时间才不显得突兀 */
  --t-color: 130ms;
  --t-move: 160ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    /* 暖墨 —— 深色不是把浅色反相，而是另一组独立取值 */
    --bg: #16150f;
    --fg: #e9e6df;
    --muted: #a09a90;
    --border: #2f2d27;
    --border-strong: #43403a;
    --surface: #1e1d17;
    --code-bg: #1c1b15;
    --accent: #e8a580;
    --accent-soft: #33211a;
    --mark: #4a3a12;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* 锚点跳转时给固定位置留出余量，标题不会贴顶 */
  scroll-padding-top: 1.5rem;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans CJK SC",
    "Source Han Sans SC", "PingFang SC", "Microsoft YaHei", Roboto, Helvetica, Arial, sans-serif;
  font-size: clamp(16px, 0.6vw + 14px, 17px);
  line-height: 1.75;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

::selection {
  background: var(--accent-soft);
  color: var(--fg);
}

/* ---------- 链接 ---------- */

a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--t-color) var(--ease);
}

/* 正文里的链接靠下划线区分，不靠颜色深浅 —— 色觉障碍下更可靠 */
article p a,
article li a:not(.plain),
article td a,
article th a,
nav.toc a {
  text-decoration: underline;
  text-decoration-color: var(--border-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--t-color) var(--ease),
              text-decoration-color var(--t-color) var(--ease);
}

/* 悬停效果统一门控：触屏点击不会误触发 */
@media (hover: hover) and (pointer: fine) {
  a:hover { color: var(--accent); }
  article p a:hover,
  article li a:hover,
  article td a:hover,
  nav.toc a:hover {
    text-decoration-color: var(--accent);
  }
  header.site nav a:hover { color: var(--fg); }
  ul.posts .t:hover { color: var(--accent); }
  ul.tagcloud a:hover,
  ul.taglist a:hover {
    border-color: var(--accent);
    color: var(--accent);
  }
  footer.site a:hover { color: var(--accent); }
}

/* 键盘可达性：只对键盘聚焦显示描边，鼠标点击不显示 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: 1rem; top: 1rem; z-index: 10;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: .4rem .7rem;
  border-radius: var(--radius);
}

/* ---------- 骨架 ---------- */

header.site, main, footer.site {
  width: 100%;
  max-width: var(--measure);
  margin-inline: auto;
  padding-inline: clamp(1.1rem, 4vw, 1.6rem);
}

header.site {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-block: 1.6rem .8rem;
  border-bottom: 1px solid var(--border);
}

/* 站名用字重和字距说话，不用大写微标签 */
header.site .brand {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--fg);
  letter-spacing: -0.01em;
}
@media (hover: hover) and (pointer: fine) {
  header.site .brand:hover { color: var(--accent); }
}

header.site nav {
  display: flex;
  gap: 1.1rem;
  font-size: .875rem;
}
header.site nav a { color: var(--muted); }
header.site nav a.on { color: var(--fg); font-weight: 600; }

/* 导航的按下反馈：这是「系统在回应你」的最短路径 */
header.site nav a:active {
  transform: scale(0.96);
  transition: transform 100ms var(--ease-out);
}
header.site nav a { transition: color var(--t-color) var(--ease),
                               transform 100ms var(--ease-out); }

main { flex: 1 1 auto; padding-block: 2.4rem 3.2rem; }

footer.site {
  border-top: 1px solid var(--border);
  padding-block: 1.2rem 2.4rem;
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.7;
}
footer.site p { margin: .25rem 0; }
footer.site a { color: var(--muted); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  footer.site a:hover { color: var(--accent); text-decoration-color: var(--accent); }
}
.muted { color: var(--muted); }

/* ---------- 标题与正文 ---------- */

h1, h2, h3, h4 {
  line-height: 1.3;
  font-weight: 600;
  margin: 2.2rem 0 .6rem;
  letter-spacing: -0.011em;
  text-wrap: balance;          /* 标题不留孤立词 */
}
h1 { font-size: 2.1rem; margin-top: 0; letter-spacing: -0.022em; }
h2 { font-size: 1.2rem; margin-top: 2.6rem; }
h3 { font-size: 1.02rem; margin-top: 1.9rem; }
h4 { font-size: .95rem; color: var(--muted); }

p {
  margin: 0 0 1.05rem;
  text-wrap: pretty;           /* 避免段落末行只剩一两个字 */
}
ul, ol { padding-left: 1.35rem; margin: 0 0 1.05rem; }
li { margin: .28rem 0; }
li > ul, li > ol { margin: .28rem 0; }

strong { font-weight: 600; }
mark { background: var(--mark); color: inherit; padding: 0 .15em; border-radius: 2px; }

hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin: 2.4rem 0;
}

blockquote {
  margin: 1.3rem 0;
  padding: .1rem 0 .1rem 1rem;
  border-left: 2px solid var(--border-strong);
  color: var(--muted);
}
blockquote p:last-child { margin-bottom: 0; }

/* ---------- 首页 ---------- */

.tagline {
  color: var(--muted);
  margin: -.2rem 0 1.8rem;
  font-size: .95rem;
}
.intro { margin-bottom: 3rem; max-width: 39rem; }
.intro p { color: var(--fg); }

/* 分区标签：中文没有大小写，不用 uppercase；
   靠上间距与颜色建立层级，而不是靠字距与全大写 */
h2.list-h {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--muted);
  border: 0;
  margin: 0 0 .3rem;
  padding: 0;
}
/* 第二个及之后的分区标题之前留出明显更大的空白 —— 这是页面节奏的换气点。
   均匀的间距会让长列表显得没有结构。 */
h2.list-h ~ h2.list-h,
h2.list-h:not(:first-of-type) { margin-top: 3.4rem; }

ul.posts { list-style: none; padding: 0; margin: 0 0 2.6rem; }
ul.posts > li {
  display: grid;
  /* 固定宽度的日期列 + 弹性内容列。日期列不许压缩，否则窄屏会搓成两行。 */
  grid-template-columns: 5.6rem minmax(0, 1fr);
  gap: 0 1.5rem;
  padding: .95rem 0;
  border-top: 1px solid var(--border);
  margin: 0;
}
ul.posts > li:last-child { border-bottom: 1px solid var(--border); }

ul.posts .d {
  color: var(--muted);
  font-size: .78rem;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  /* 与标题首行的视觉基线对齐（标题 1.04rem × 1.45 行高） */
  padding-top: .2rem;
}
ul.posts .b { min-width: 0; }
ul.posts .t {
  display: block;
  color: var(--fg);
  font-weight: 600;
  font-size: 1.04rem;
  letter-spacing: -0.008em;
  line-height: 1.45;
  transition: color var(--t-color) var(--ease);
}
ul.posts .s {
  margin: .3rem 0 0;
  color: var(--muted);
  font-size: .9rem;
  line-height: 1.62;
  max-width: 38rem;
  text-wrap: pretty;
}

/* 窄屏：日期退到标题上方一行，仍然紧邻，不回到「两端对齐」那种疏离排法 */
@media (max-width: 34rem) {
  ul.posts > li { grid-template-columns: 1fr; gap: 0; }
  ul.posts .d { padding-top: 0; margin-bottom: .18rem; }
}

p.more { margin: -1.4rem 0 2.8rem; font-size: .9rem; }

/* ---------- 文章 ---------- */

article > h1 { margin-bottom: .55rem; }

/* 元信息：日期用等宽数字，读起来整齐 */
article .meta {
  color: var(--muted);
  font-size: .8rem;
  margin: 0 0 1.6rem;
  font-variant-numeric: tabular-nums;
}

/* 导语：用左侧竖线 + 稍大字号，而不是填充色块。
   一个页面上少一个「盒子」，整体密度就降一档。 */
article .summary {
  margin: 0 0 2rem;
  padding: 0 0 0 1rem;
  border-left: 2px solid var(--accent);
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.7;
  text-wrap: pretty;
}

/* 目录：安静的一列，不填充底色 */
nav.toc {
  margin: 0 0 2.4rem;
  padding: .9rem 0 .9rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  font-size: .875rem;
}
nav.toc h2 {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  border: 0;
  margin: 0 0 .45rem;
  padding: 0;
  letter-spacing: 0;
}
nav.toc ul { list-style: none; padding-left: 0; margin: 0; }
nav.toc ul ul { padding-left: .95rem; }
nav.toc li { margin: .16rem 0; }
nav.toc a { color: var(--fg); text-decoration-color: var(--border-strong); }

ul.tags {
  list-style: none;
  padding: 0;
  margin: 2.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
ul.tags li { margin: 0; }
ul.tags a {
  display: inline-block;
  font-size: .78rem;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .12rem .5rem;
  background: var(--surface);
  transition: color var(--t-color) var(--ease),
              border-color var(--t-color) var(--ease),
              transform 100ms var(--ease-out);
}
ul.tags a:active { transform: scale(0.96); }
@media (hover: hover) and (pointer: fine) {
  ul.tags a:hover { color: var(--accent); border-color: var(--accent); }
}

p.back { margin-top: 1.8rem; font-size: .875rem; }
article.nf p { color: var(--muted); }

/* ---------- 归档（按年分组） ---------- */

h2.year {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: 0;
  margin: 2.6rem 0 .2rem;
}
h2.year:first-of-type { margin-top: 1.6rem; }
h2.year .n {
  font-size: .78rem;
  font-weight: 400;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ---------- 主题云 ---------- */

ul.tagcloud, ul.taglist {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
ul.tagcloud li, ul.taglist li { margin: 0; }
ul.tagcloud a, ul.taglist a {
  display: inline-flex;
  align-items: baseline;
  gap: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .15rem .55rem;
  background: var(--surface);
  color: var(--fg);
  font-size: .84rem;
  transition: color var(--t-color) var(--ease),
              border-color var(--t-color) var(--ease),
              transform 100ms var(--ease-out);
}
ul.tagcloud a:active, ul.taglist a:active { transform: scale(0.97); }
ul.tagcloud .n, ul.taglist .n {
  font-size: .74rem;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* 主题索引页：两列清单，比云状排列更好扫读 */
ul.taglist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: 0;
  margin-top: 1.6rem;
}
ul.taglist a {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  padding: .55rem .2rem;
  width: 100%;
  justify-content: space-between;
}

/* ---------- 文末上一篇 / 下一篇 ---------- */

nav.postnav {
  display: flex;
  justify-content: space-between;
  gap: 1.5rem;
  margin-top: 3rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  font-size: .875rem;
}
nav.postnav a {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  max-width: 48%;
  color: var(--fg);
  transition: color var(--t-color) var(--ease);
}
@media (hover: hover) and (pointer: fine) {
  nav.postnav a:hover .ttl { color: var(--accent); }
}
nav.postnav .lbl {
  font-size: .74rem;
  color: var(--muted);
}
nav.postnav .next { text-align: right; align-items: flex-end; }
nav.postnav .disabled { max-width: 0; }

/* ---------- 代码 ---------- */

code, pre, kbd, samp {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: .875em;
}

:not(pre) > code {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .08em .3em;
  white-space: break-spaces;
  overflow-wrap: anywhere;
}

pre {
  background: var(--code-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .85rem 1rem;
  overflow-x: auto;
  line-height: 1.58;
  margin: 0 0 1.25rem;
  tab-size: 4;
  /* 代码块内不换行，横向滚动；避免长命令被折成难以辨认的两行 */
  white-space: pre;
}
pre code { background: none; border: 0; padding: 0; }

/* ---------- 表格 ---------- */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 1.4rem;
  font-size: .875rem;
  display: block;
  overflow-x: auto;
}
th, td {
  border: 0;
  border-bottom: 1px solid var(--border);
  padding: .5rem .7rem .5rem 0;
  text-align: left;
  vertical-align: top;
}
thead th {
  border-bottom: 1px solid var(--border-strong);
  font-weight: 600;
  white-space: nowrap;
}
td code, th code { white-space: nowrap; }

/* ---------- 可访问性 ---------- */

/* 减少动态：保留颜色与透明度（它们帮助理解状态变化），去掉位移 */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
  }
  header.site nav a:active,
  ul.tags a:active,
  ul.tagcloud a:active,
  ul.taglist a:active {
    transform: none;
  }
}

@media print {
  header.site nav, footer.site, nav.toc, p.back, ul.tags, nav.postnav { display: none; }
  body { font-size: 11pt; background: #fff; color: #000; }
  a { color: inherit; text-decoration: none; }
  pre, table { break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}