/* 云记 — original editorial stylesheet. No external fonts, trackers, or CDNs.
   Independent visual identity: light-grey reading canvas, white rounded cards,
   restrained teal-blue accent. Themeable via data-theme. */

:root {
  --bg: #f3f4f6;
  --surface: #ffffff;
  --surface-2: #f7f9fa;
  --ink: #1b2430;
  --ink-soft: #3b4453;
  --ink-faint: #6b7480;
  --line: #e5e7eb;
  --line-soft: #eef0f3;
  --accent: #0e7c86;        /* restrained teal-blue */
  --accent-strong: #0b6870;
  --accent-soft: #e3f1f2;
  --focus: #2563eb;
  --radius: 14px;
  --radius-sm: 8px;
  --wrap: 74rem;
  --reading: 44rem;
  --shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --step: clamp(1rem, 0.94rem + 0.3vw, 1.09rem);
  /* Display stack for nav, brand and headings only (body keeps its CJH stack
     below). No external fonts are loaded — every family is a local/system face. */
  --font-display: "Punctuation SC", Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Dark tokens: applied on system-dark (unless overridden to light) or explicit toggle. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1319;
    --surface: #161b22;
    --surface-2: #1d232c;
    --ink: #e7eaee;
    --ink-soft: #bcc4ce;
    --ink-faint: #949dab;
    --line: #29313b;
    --line-soft: #222933;
    --accent: #3b82f6;
    --accent-strong: #60a5fa;
    --accent-soft: #172554;
    --focus: #6ea8fe;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .38);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  }
}
:root[data-theme="dark"] {
  --bg: #0f1319;
  --surface: #161b22;
  --surface-2: #1d232c;
  --ink: #e7eaee;
  --ink-soft: #bcc4ce;
  --ink-faint: #949dab;
  --line: #29313b;
  --line-soft: #222933;
  --accent: #3b82f6;
  --accent-strong: #60a5fa;
  --accent-soft: #172554;
  --focus: #6ea8fe;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px rgba(0, 0, 0, .38);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }

body {
  margin: 0;
  font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: var(--step);
  line-height: 1.75;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; }
.wrap--reading { max-width: calc(var(--reading) + 8rem); }

.visually-hidden, .skip-link {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: .75rem; left: .75rem; width: auto; height: auto;
  clip: auto; background: var(--surface); padding: .5rem .9rem;
  border: 1px solid var(--line); border-radius: var(--radius-sm); z-index: 60;
}

/* ============================ Header / nav ============================ */
.site-header {
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  position: sticky; top: 0; z-index: 30;
  backdrop-filter: saturate(1.1) blur(8px);
}
.site-header__inner { display: flex; align-items: center; gap: .9rem; min-height: 3.5rem; flex-wrap: wrap; }
.brand { margin: 0; font-size: .9rem; font-weight: 600; letter-spacing: .02em; font-family: var(--font-display); }
.brand a { color: var(--ink); display: inline-flex; align-items: center; gap: .4rem; }
.brand a:hover { text-decoration: none; color: var(--accent); }
.brand__mark { width: .85rem; height: .85rem; border-radius: 4px; background: var(--accent); flex: none; }
/* Tagline is preserved in markup but hidden on the desktop bar to keep the
   header compact; the mobile drawer keeps it hidden too (see media query). */
.brand__tagline { display: none; font-size: .78rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }

.nav-toggle {
  margin-left: auto; display: none; width: 2.75rem; height: 2.75rem;
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; padding: 0; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
}
.nav-toggle__bar { display: block; width: 20px; height: 2px; background: var(--ink); border-radius: 2px; }

.primary-nav { margin-left: auto; display: flex; align-items: center; gap: .9rem; }
.primary-nav__list { list-style: none; display: flex; align-items: center; gap: .9rem; margin: 0; padding: 0; flex-wrap: wrap; }
.primary-nav a, .dropdown-toggle {
  color: var(--ink-soft); font-size: .85rem; font-weight: 500; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); line-height: 1.4; padding: .25rem 0; display: inline-flex; align-items: center; gap: .32rem;
}
.primary-nav a:hover, .dropdown-toggle:hover { color: var(--accent); text-decoration: none; }
/* Small, muted black-grey glyph icons — decorative only (aria-hidden), never
   the sole meaning; the link text always carries the label. */
.nav-ico { font-size: .8rem; line-height: 1; color: var(--ink-faint); flex: none; }
/* Caret stays after the "浏览" label, centered inline (never absolute / before text). */
.caret { width: 0; height: 0; align-self: center; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; }

/* Dropdown: hover/focus reveals without JS; JS adds click + aria + Escape. */
.has-dropdown { position: relative; }
.dropdown {
  list-style: none; margin: 0; padding: .4rem; position: absolute; top: 100%; left: 0;
  min-width: 9rem; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow); display: none; z-index: 40;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown,
.dropdown-toggle[aria-expanded="true"] + .dropdown { display: block; }
.dropdown li { display: block; }
.dropdown a { display: inline-flex; align-items: center; gap: .5rem; width: 100%; padding: .48rem .6rem; border-radius: 6px; }
.dropdown__icon { display: inline-flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; color: var(--ink-faint); flex: none; }
.dropdown__icon .ico { width: 1rem; height: 1rem; }
.dropdown a:hover { background: var(--surface-2); }
.dropdown a:hover .dropdown__icon, .dropdown a:focus-visible .dropdown__icon { color: currentColor; }

/* Software clients: desktop hover menu shares the existing dropdown surface,
   but fades/slides in so it opens and closes without a hard display jump. */
.software-dropdown .dropdown {
  display: block; top: calc(100% + .18rem); opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-.28rem); transform-origin: top left;
  transition: opacity 160ms ease, transform 180ms cubic-bezier(.2,.7,.25,1), visibility 0s linear 180ms;
}
.software-dropdown::after { content: ""; position: absolute; z-index: 39; top: 100%; left: 0; width: 100%; height: .25rem; }
.software-dropdown:hover .dropdown, .software-dropdown:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s;
}
.software-dropdown:hover .caret, .software-dropdown:focus-within .caret { color: var(--accent); }
@media (prefers-reduced-motion: reduce) {
  .software-dropdown .dropdown { transition: none; transform: none; }
}

.theme-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 4.25rem; height: 2.15rem; padding: .18rem; border: 1px solid var(--line); border-radius: 999px;
  background: color-mix(in srgb, var(--surface-2) 88%, var(--accent) 12%); color: var(--ink-soft); cursor: pointer; font: inherit;
  box-shadow: inset 0 1px 0 color-mix(in srgb, white 40%, transparent), 0 1px 2px color-mix(in srgb, var(--ink) 8%, transparent);
  transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease, color 180ms ease;
}
.theme-toggle__track { position: relative; display: block; width: 100%; height: 100%; }
.theme-toggle .theme-ico { position: absolute; top: 50%; z-index: 1; width: .93rem; height: .93rem; transform: translateY(-50%); color: var(--ink-faint); opacity: .5; transition: opacity 180ms ease, color 180ms ease; }
.theme-toggle .theme-ico--sun { left: .33rem; }
.theme-toggle .theme-ico--moon { right: .33rem; }
.theme-toggle__thumb { position: absolute; z-index: 0; top: 0; left: 0; width: 1.55rem; height: 1.55rem; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 3px color-mix(in srgb, var(--ink) 20%, transparent); transform: translateX(0); transition: transform 220ms cubic-bezier(.2,.75,.25,1), background-color 180ms ease; }
.theme-toggle .theme-ico--sun { color: color-mix(in srgb, #d38a16 80%, var(--ink)); opacity: 1; }
.theme-toggle[aria-pressed="true"] { background: color-mix(in srgb, var(--surface-2) 80%, #52749b 20%); }
.theme-toggle[aria-pressed="true"] .theme-toggle__thumb { transform: translateX(2.14rem); }
.theme-toggle[aria-pressed="true"] .theme-ico--sun { color: var(--ink-faint); opacity: .5; }
.theme-toggle[aria-pressed="true"] .theme-ico--moon { color: #6b8eb5; opacity: 1; }
.theme-toggle:hover { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 58%, var(--line)); box-shadow: inset 0 1px 0 color-mix(in srgb, white 45%, transparent), 0 3px 10px color-mix(in srgb, var(--accent) 14%, transparent); }
.theme-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 70%, transparent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .theme-toggle, .theme-toggle .theme-ico, .theme-toggle__thumb { transition: none; } }
/* Compact search field (not a large button): ~9.5rem × 2rem pill with a light
   surface fill, a low-contrast hairline, the ⌕ glyph, a visible "搜索文章"
   label and a faint "/" shortcut hint. It is an <a> so the no-JS fallback is a
   real link to the search page; JS opens the inline panel instead. */
.search-open {
  display: inline-flex; align-items: center; gap: .4rem;
  width: 9.5rem; height: 2rem; padding: 0 .5rem;
  border: 1px solid var(--line); border-radius: 6px;
  background: var(--surface-2); color: var(--ink-soft); cursor: pointer; font: inherit;
}
.search-open:hover, .theme-toggle:hover { color: var(--accent); border-color: var(--accent); text-decoration: none; }
.search-open__icon { font-size: 1rem; line-height: 1; flex: none; color: var(--ink-faint); }
.search-open__label { font-size: .82rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-open__kbd {
  margin-left: auto; font: inherit; font-size: .68rem; line-height: 1; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: .08rem .28rem; min-width: 1rem; text-align: center; flex: none;
}
/* Thin vertical rule separating the theme toggle from the search control. */
.nav-divider { width: 1px; height: 1.3rem; background: var(--line); flex: none; }
.theme-toggle__icon::before { content: "☀"; font-size: 1rem; line-height: 1; }
.theme-toggle[aria-pressed="true"] .theme-toggle__icon::before { content: "☾"; }

.search-panel { border-bottom: 1px solid var(--line); background: var(--surface); }
.search-panel[hidden] { display: none; }
.search-form { display: flex; gap: .5rem; }
.search-form--panel { padding-block: .9rem; }
.search-form input {
  border: 1px solid var(--line); background: var(--surface); flex: 1;
  border-radius: var(--radius-sm); padding: .55rem .8rem; color: var(--ink); min-width: 6rem;
}
.btn, .search-form button {
  border: 1px solid var(--accent); background: var(--accent); color: #fff;
  border-radius: var(--radius-sm); padding: .55rem 1rem; cursor: pointer; font: inherit; white-space: nowrap;
}
.btn:hover, .search-form button:hover { filter: brightness(1.06); text-decoration: none; color: #fff; }

/* ============================ Layout ============================ */
.site-main { min-height: 62vh; padding-block: 2rem 3rem; }
.messages { margin-bottom: 1.5rem; }
.message { padding: .75rem 1rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); }
.message--success { border-color: #b7d8b7; background: #eef7ee; color: #1f5130; }
.message--error { border-color: #e6b3b3; background: #fbeeee; color: #7a2020; }

.layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 2.5rem; align-items: start; }
.layout__main { min-width: 0; }
.layout__aside { min-width: 0; }
.layout--home .layout__aside { position: sticky; top: 5rem; }

/* Article detail: the post card sits in a single reading column; the table of
   contents shares a grid with the body (see .post__content-grid) rather than
   living in a page-level rail, so it can appear right after the title in the
   DOM on every viewport. */
.post-detail { min-width: 0; }
.post__content-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 15rem;
  gap: 2.5rem; align-items: start;
}
/* Body is column 1, ToC column 2 — explicit placement so the ToC renders on the
   right on desktop even though it comes first in source order. */
.post__content-grid > .post__body { grid-column: 1; grid-row: 1; }
.post__content-grid > .post__toc-rail {
  grid-column: 2; grid-row: 1; position: sticky; top: 5rem; min-width: 0;
}
.post__content-grid--no-toc { display: block; }

/* ============================ Home intro (compact, no big hero) ============================ */
.page-intro { padding: .25rem 0 1.1rem; margin-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.page-intro__title { font-size: 1.35rem; margin: 0 0 .25rem; letter-spacing: .04em; display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.page-intro__tag { font-size: .82rem; font-weight: 400; color: var(--ink-faint); letter-spacing: 0; }
.page-intro__lede { color: var(--ink-soft); max-width: 44rem; margin: 0; font-size: .92rem; }

/* ============================ Sections ============================ */
.section { margin-block: 2.5rem; }
.section:first-child { margin-top: 1rem; }
.section__title { font-size: 1.3rem; margin: 0 0 1.25rem; padding-bottom: .5rem; border-bottom: 2px solid var(--accent-soft); }
.section__more { margin-top: 1.25rem; }
.empty { color: var(--ink-faint); padding: 1.5rem 0; }
.empty-state { padding: 2.5rem 0; }
.empty-state__cta { margin-top: 1rem; }

/* ============================ Article flow (editorial card stream) ============================ */
/* A vertical stream of self-contained cards: every article sits on its own white
   surface with a soft border, gentle radius and low shadow. Spacing between cards
   sets the rhythm — no hairline dividers. An optional thumbnail sits beside the
   text and is capped so it can never push the card into horizontal overflow. */
.post-flow { display: flex; flex-direction: column; gap: 1.1rem; }
.post-row {
  display: flex; gap: 1.4rem; align-items: flex-start;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 1.35rem 1.5rem; transition: box-shadow 180ms ease;
}
/* Article cards retain one neutral border at rest, on hover and while a child
   has focus. Only elevation changes, so pinned articles remain distinguishable
   by their TOP badge rather than a special card outline. */
.post-row:hover, .post-row:focus-within { border-color: var(--line); box-shadow: var(--shadow); }
.post-row--top { border-color: var(--line); }
.post-row__main { min-width: 0; display: flex; flex-direction: column; gap: .55rem; flex: 1; }
.post-row__thumb {
  order: 2; flex: none; width: 12rem; max-width: 38%; aspect-ratio: 16 / 10; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--accent-soft); display: block;
}
.post-row__thumb img { width: 100%; height: 100%; object-fit: cover; }
.post-row__title { font-size: 1.24rem; line-height: 1.45; margin: 0; display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-family: var(--font-display); }
.post-row__title a { color: var(--ink); }
.post-row__title a:hover { color: var(--accent); }
.post-row__summary { margin: .1rem 0 0; color: var(--ink-soft); font-size: .95rem; line-height: 1.72; }

.top-badge {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--accent-strong); background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 28%, transparent);
  padding: .04rem .42rem; border-radius: 4px; line-height: 1.5;
}

/* Visible "界面测试文章" tag on every placeholder row (home / list / search /
   related), so a test article is never mistaken for real editorial content. */
.test-badge {
  flex: none; font-size: .68rem; font-weight: 700; letter-spacing: .02em;
  color: #7a4a00; background: #fdeecb; border: 1px solid #eccf8f;
  padding: .05rem .45rem; border-radius: 4px; line-height: 1.5; white-space: nowrap;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .test-badge { color: #f2d79a; background: #3a2c10; border-color: #5c4713; }
}
:root[data-theme="dark"] .test-badge { color: #f2d79a; background: #3a2c10; border-color: #5c4713; }

.post-flow--related { margin-top: .5rem; gap: .85rem; }
.post-flow--related .post-row { padding: 1.05rem 1.15rem; }
.post-flow--related .post-row__title { font-size: 1.1rem; }

/* ============================ Metadata / chips ============================ */
.a-meta { display: flex; align-items: center; gap: .55rem; flex-wrap: wrap; font-size: .8rem; color: var(--ink-faint); margin: 0; }
.a-meta__item { display: inline-flex; align-items: center; }
.a-meta__item + .a-meta__item::before,
.cat-chip + .a-meta__item::before { content: "·"; margin-right: .55rem; color: var(--line); }

/* Tag group: a single meta item so the dot separators stay consistent; the
   tags inside carry their own tight gap and no interior dots. */
.a-meta__tags { gap: .3rem; }
@media (min-width: 48rem) {
  .post-card .a-meta, .post-row .a-meta { flex-wrap: nowrap; gap: .35rem; font-size: .75rem; white-space: nowrap; }
  .post-card .a-meta__item + .a-meta__item::before, .post-card .cat-chip + .a-meta__item::before, .post-row .a-meta__item + .a-meta__item::before, .post-row .cat-chip + .a-meta__item::before { margin-right: .35rem; }
  .post-card .a-meta__tags, .post-row .a-meta__tags { gap: .2rem; }
  .post-card .meta-tag, .post-row .meta-tag { font-size: .68rem; padding: .08rem .32rem; }
}
/* Pastel metadata tag: coloured text on a faint same-hue tint — a soft pill,
   never a bordered button. No border; a small 3px radius and tight padding keep
   it compact. Colour comes from --tag: the tag's safe_color when set (inline),
   otherwise a stable hue picked by nth-child from a small palette below.
   --tag-s/--tag-l are tuned per theme so text and tint stay readable on both
   light and dark surfaces; no JS, so colours never jitter. Spacing between tags
   comes from .a-meta__tags gap. */
.meta-tag {
  --tag-s: 42%; --tag-l: 38%;
  --tag: hsl(var(--tag-h, 215) var(--tag-s) var(--tag-l));
  display: inline-flex; align-items: center;
  padding: .05rem .34rem; border: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--tag) 12%, transparent);
  color: var(--tag); font-size: .72rem; line-height: 1.5; white-space: nowrap;
  text-decoration: none;
}
.meta-tag:hover, .meta-tag:focus-visible {
  color: var(--tag);
  background: color-mix(in srgb, var(--tag) 20%, transparent);
  text-decoration: none;
}
.a-meta__tags .meta-tag:nth-of-type(6n+1) { --tag-h: 355; }
.a-meta__tags .meta-tag:nth-of-type(6n+2) { --tag-h: 28; }
.a-meta__tags .meta-tag:nth-of-type(6n+3) { --tag-h: 135; }
.a-meta__tags .meta-tag:nth-of-type(6n+4) { --tag-h: 192; }
.a-meta__tags .meta-tag:nth-of-type(6n+5) { --tag-h: 222; }
.a-meta__tags .meta-tag:nth-of-type(6n+6) { --tag-h: 282; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .meta-tag { --tag-s: 46%; --tag-l: 70%; }
}
:root[data-theme="dark"] .meta-tag { --tag-s: 46%; --tag-l: 70%; }

.cat-chip {
  font-size: .78rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px;
  color: var(--chip, var(--accent));
  background: color-mix(in srgb, var(--chip, var(--accent)) 14%, transparent);
}
.cat-chip:hover { text-decoration: none; filter: brightness(.95); }

.chip-list { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; padding: 0; margin: 0; }
.chip-list--tags { gap: .45rem; }
.chip {
  display: inline-flex; align-items: center; gap: .35rem; padding: .28rem .7rem;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink-soft); font-size: .82rem;
}
.chip:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
/* Article tag: replace the generic .chip button box with the same pastel pill
   as the inline .meta-tag — same-hue tint, no border, small 3px radius, tight
   padding — so the detail footer, sidebar and tag index read consistently.
   --chip is each tag's safe_color when set (inline, wins), otherwise a stable
   hue picked by the palette below; --chip-s/--chip-l are theme-tuned so text and
   tint stay readable on both surfaces. Cloud keeps its own larger font/padding. */
.chip--tag {
  --chip-s: 42%; --chip-l: 38%;
  --chip: hsl(var(--chip-h, 215) var(--chip-s) var(--chip-l));
  padding: .1rem .42rem; border: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--chip) 12%, transparent);
  color: var(--chip);
}
.chip--tag:hover, .chip--tag:focus-visible {
  color: var(--chip);
  background: color-mix(in srgb, var(--chip) 20%, transparent);
  text-decoration: none;
}
/* Stable per-tag palette mirroring .meta-tag, keyed off the li so the detail
   footer, sidebar and tag cloud never fall back to a single grey. Inline
   safe_color still wins because it sets --chip directly on the element. */
.chip-list li:nth-child(6n+1) .chip--tag { --chip-h: 355; }
.chip-list li:nth-child(6n+2) .chip--tag { --chip-h: 28; }
.chip-list li:nth-child(6n+3) .chip--tag { --chip-h: 135; }
.chip-list li:nth-child(6n+4) .chip--tag { --chip-h: 192; }
.chip-list li:nth-child(6n+5) .chip--tag { --chip-h: 222; }
.chip-list li:nth-child(6n+6) .chip--tag { --chip-h: 282; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .chip--tag { --chip-s: 46%; --chip-l: 70%; }
}
:root[data-theme="dark"] .chip--tag { --chip-s: 46%; --chip-l: 70%; }
.chip__count { font-size: .72rem; color: var(--ink-faint); }
.chip-list--cloud .chip { font-size: .9rem; padding: .35rem .85rem; }

/* ============================ Sidebar ============================ */
.side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 5rem; }
.side-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem 1.2rem; box-shadow: var(--shadow-sm); }
.side-card__title { font-size: 1rem; margin: 0 0 .8rem; padding-bottom: .5rem; border-bottom: 1px solid var(--line-soft); }
.side-card--profile { text-align: center; }
.side-avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; margin: 0 auto .6rem; border: 1px solid var(--line); }
.side-card--profile .side-card__title { border: 0; padding: 0; margin-bottom: .3rem; }
.side-bio { color: var(--ink-soft); font-size: .88rem; margin: 0 0 .8rem; }
.side-contribute { display: flex; align-items: center; justify-content: center; gap: .55rem; margin: .82rem 0 0; padding-top: .72rem; border-top: 1px solid var(--line-soft); }
.side-contribute__label { color: var(--ink-faint); font-size: .76rem; }
.side-contribute__link { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; color: var(--ink-soft); transition: color .15s ease, background-color .15s ease, transform .15s ease; }
.side-contribute__link svg { width: 1.34rem; height: 1.34rem; fill: currentColor; }
.side-contribute__link:hover { color: var(--accent); background: var(--accent-soft); transform: translateY(-1px); text-decoration: none; }
.side-contribute__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.side-social { list-style: none; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; padding: 0; margin: .6rem 0 0; }
.side-social a { font-size: .82rem; padding: .25rem .65rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink-soft); }
.side-social a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

.side-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.side-list li { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--line-soft); }
.side-list li:last-child { border-bottom: 0; }
.side-list a { color: var(--ink-soft); display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.side-list a:hover { color: var(--accent); text-decoration: none; }
.side-list--plain li { justify-content: flex-start; }
.side-dot { width: .6rem; height: .6rem; border-radius: 50%; background: var(--dot, var(--accent)); flex: none; }
.side-count { font-size: .78rem; color: var(--ink-faint); flex: none; }
.side-more { margin: .8rem 0 0; font-size: .84rem; }

.side-card--popular { padding-block: 1rem 1.05rem; }
.side-card--popular .side-card__title { margin-bottom: .45rem; padding-bottom: .62rem; }
.side-rank { list-style: none; counter-reset: rank; padding: 0; margin: 0; display: flex; flex-direction: column; }
.side-rank li { counter-increment: rank; display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: .45rem; align-items: center; min-height: 2.23rem; }
.side-rank li::before { content: counter(rank); font-weight: 700; color: var(--ink-faint); font-size: .82rem; font-variant-numeric: tabular-nums; text-align: center; }
.side-rank li:nth-child(-n + 3)::before { color: #ef6c2f; }
.side-rank a { min-width: 0; overflow: hidden; color: var(--ink-soft); font-size: .85rem; line-height: 1.35; white-space: nowrap; text-overflow: ellipsis; }
.side-rank a:hover { color: var(--accent); text-decoration: none; }
.side-rank__meta { font-size: .76rem; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }

/* ============================ Breadcrumbs / page heads ============================ */
.breadcrumbs { margin: 0 0 1.25rem; font-size: .85rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: 0; color: var(--ink-faint); }
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: .4rem; color: var(--line); }

.page-head { margin-bottom: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.55rem, 1.3rem + 1.2vw, 2.1rem); margin: 0 0 .4rem; font-family: var(--font-display); }
.page-head h1.page-head__title { display: inline-flex; align-items: center; gap: .6rem; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); line-height: 1.2; font-family: inherit; }
/* Match the existing tag-page heading icon: a small, low-contrast inline SVG
   with no background, border or icon container. */
.page-head__icon { display: inline-flex; flex: none; color: var(--ink-soft); }
.page-head__icon .ico { width: 1.18rem; height: 1.18rem; }
.page-head__meta { color: var(--ink-faint); margin: 0; font-size: .9rem; }
.page-head__lede { color: var(--ink-soft); margin: .3rem 0; }

/* ============================ Taxonomy index ============================ */
.tax-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.tax-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); }
.tax-card__link { display: flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 600; }
.tax-card__link:hover { color: var(--accent); text-decoration: none; }
.tax-card__name { flex: 1; min-width: 0; }
.tax-card__count { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }
.tax-card__desc { margin: .5rem 0 0; color: var(--ink-soft); font-size: .88rem; }

/* ============================ Archives ============================ */
.archive-year { margin-bottom: 2rem; }
.archive-year__title { font-size: 1.25rem; margin: 0 0 .75rem; display: flex; align-items: baseline; gap: .6rem; }
.archive-year__count { font-size: .8rem; color: var(--ink-faint); font-weight: 400; }
.archive-list { list-style: none; padding: 0; margin: 0; }
.archive-item { display: flex; align-items: baseline; gap: .8rem; padding: .5rem 0; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.archive-item__date { color: var(--ink-faint); font-size: .82rem; font-variant-numeric: tabular-nums; flex: none; width: 4.5rem; }
.archive-item__title { color: var(--ink); flex: 1; min-width: 10rem; }
.archive-item__title:hover { color: var(--accent); }
.archive-item__cat { font-size: .74rem; padding: .1rem .5rem; border-radius: 999px; color: var(--chip, var(--accent)); background: color-mix(in srgb, var(--chip, var(--accent)) 12%, transparent); flex: none; }

/* ============================ Post (article detail) ============================ */
.post { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 2rem clamp(1.25rem, 4vw, 3rem); box-shadow: var(--shadow); }
.post__eyebrow { margin: 0 0 .5rem; }
.post__eyebrow a { text-transform: none; font-size: .8rem; font-weight: 600; padding: .12rem .55rem; border-radius: 999px; color: var(--chip, var(--accent)); background: color-mix(in srgb, var(--chip, var(--accent)) 14%, transparent); }
.post__eyebrow a:hover { text-decoration: none; }
.post__title { font-size: clamp(1.6rem, 1.3rem + 1.8vw, 2.4rem); line-height: 1.3; margin: 0 0 .75rem; font-family: var(--font-display); }
.post__meta { color: var(--ink-faint); font-size: .88rem; display: flex; gap: .55rem; align-items: center; flex-wrap: wrap; margin: 0; }
.post__cover { margin: 1.75rem 0 0; }
.post__cover img { display: block; width: 100%; height: auto; border-radius: var(--radius); background: var(--accent-soft); }

.post__body { max-width: var(--reading); margin: 1.75rem auto 0; }
.post__body > * + * { margin-top: 1.15rem; }
.post__body h2 { font-size: 1.45rem; margin-top: 2.25rem; padding-top: .25rem; scroll-margin-top: 5rem; font-family: var(--font-display); }
.post__body h3 { font-size: 1.2rem; margin-top: 1.75rem; scroll-margin-top: 5rem; font-family: var(--font-display); }
.post__body p { margin: 1.1rem 0; }
.post__body img { border-radius: var(--radius); margin: 1.5rem auto; }
.post__body blockquote { margin: 1.5rem 0; padding: .5rem 1.25rem; border-left: 3px solid var(--accent); color: var(--ink-soft); background: var(--accent-soft); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.post__body pre { background: #10161d; color: #e9edf1; padding: 1rem 1.25rem; border-radius: var(--radius-sm); overflow-x: auto; font-size: .9rem; }
.post__body code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.post__body :not(pre) > code { background: var(--accent-soft); padding: .1rem .35rem; border-radius: 4px; }
.post__body ul, .post__body ol { padding-left: 1.4rem; }
.post__body li + li { margin-top: .4rem; }
.post__body a { text-decoration: underline; text-underline-offset: 2px; }
.post__body table { display: block; overflow-x: auto; border-collapse: collapse; width: 100%; }
.post__body th, .post__body td { border: 1px solid var(--line); padding: .5rem .7rem; text-align: left; }
/* 界面测试文章 marker: a soft callout so placeholder copy reads as a test note. */
.post__body .test-note {
  margin: 0 0 1.5rem; padding: .7rem 1rem; font-size: .9rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.post__body .test-note strong { color: var(--ink); }
/* Inline test note in the article header (not inside the body prose). */
.test-note--inline {
  margin: 0 0 .75rem; padding: .55rem .9rem; font-size: .85rem; color: var(--ink-soft);
  background: var(--surface-2); border: 1px dashed var(--line); border-radius: var(--radius-sm);
}
.test-note--inline strong { color: var(--ink); }
.post__footer { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.related { margin-top: 3rem; }

/* ============================ Table of contents ============================ */
.toc { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.15rem; box-shadow: var(--shadow-sm); }
.toc__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.toc__title { font-size: 1rem; margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.toc__title .ico { color: var(--ink-faint); }
.toc__toggle { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); color: var(--ink-soft); font: inherit; font-size: .82rem; padding: .25rem .6rem; cursor: pointer; }
.toc__list { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; }
.toc__item a { color: var(--ink-soft); font-size: .88rem; line-height: 1.5; }
.toc__item a:hover { color: var(--accent); text-decoration: none; }
.toc__item--h3 { padding-left: 1rem; font-size: .84rem; }

/* ============================ Pagination (numbered) ============================ */
.pagination { margin-top: 1.6rem; }
.pagination ul { list-style: none; display: flex; align-items: center; justify-content: center; gap: .28rem; padding: 0; margin: 0; flex-wrap: wrap; }
.pagination a, .pagination .pagination__num, .pagination .pagination__step { min-height: 1.9rem; box-sizing: border-box; padding: .28rem .55rem; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink-soft); font-size: .78rem; line-height: 1.25; font-variant-numeric: tabular-nums; }
.pagination .pagination__num { min-width: 1.9rem; display: inline-flex; align-items: center; justify-content: center; }
.pagination a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.pagination .pagination__num.is-current { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }
.pagination .pagination__step.is-disabled { color: var(--ink-faint); border-color: transparent; background: transparent; }
.pagination__gap { padding: .25rem .12rem; color: var(--ink-faint); font-size: .78rem; }

.search-form--page { margin-top: 1rem; max-width: 32rem; }
.search-summary { color: var(--ink-soft); margin-bottom: 1.5rem; }

/* ============================ Comments ============================ */
.comments { margin-top: 3rem; border-top: 1px solid var(--line); padding-top: 2rem; }
.comment-list { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
.comment { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.25rem; }
.comment__meta { display: flex; gap: .75rem; align-items: baseline; margin: 0 0 .4rem; font-size: .85rem; color: var(--ink-faint); }
.comment__author { font-weight: 600; color: var(--ink); }
.comment__body { margin: 0; }
.comment__body p { margin: .35rem 0; }
.comment__actions { margin: .5rem 0 0; font-size: .85rem; }
.comment__reply-link { color: var(--ink-faint); }
.comment-list--replies { margin: 1rem 0 0; padding-left: 1.25rem; border-left: 2px solid var(--line); gap: 1rem; }
.comment--reply { background: var(--surface-2); }
.comment-form__note--reply { color: var(--ink); }

.comment-form-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem clamp(1.25rem, 3vw, 2rem); max-width: var(--reading); }
.comment-form__title { margin: 0 0 .3rem; font-size: 1.15rem; }
.comment-form__note { margin: 0 0 1.25rem; color: var(--ink-faint); font-size: .85rem; }
.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .4rem; }
.form-row label { font-size: .9rem; font-weight: 600; }
.form-row label span { color: #b23; margin-left: .15rem; }
.comment-form input, .comment-form textarea {
  width: 100%; border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--radius-sm); padding: .6rem .75rem; color: var(--ink); font: inherit;
}
.comment-form textarea { resize: vertical; min-height: 7rem; }
.field-error { color: #b23; font-size: .82rem; margin: .1rem 0 0; }
.form-errors { color: #7a2020; background: #fbeeee; border: 1px solid #e6b3b3; border-radius: var(--radius-sm); padding: .6rem .9rem; margin-bottom: 1rem; }
.hp-wrap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.hp-field { display: none; }

/* ============================ Footer ============================ */
.site-footer { border-top: 1px solid var(--line); margin-top: 3rem; padding-block: 2.5rem; background: var(--surface); }
.site-footer__inner { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; }
.site-footer__contribute { margin-top: .05rem; padding-top: .58rem; border-top: 1px solid var(--line-soft); }
.site-footer__brand { font-weight: 700; margin: 0; letter-spacing: .04em; }
.site-footer__note, .site-footer__meta { margin: 0; color: var(--ink-faint); font-size: .88rem; }
.site-footer__nav { display: flex; gap: 1.25rem; flex-wrap: wrap; }
.site-footer__nav a { color: var(--ink-soft); font-size: .9rem; }
.site-footer__contribute { display: flex; align-items: center; gap: .65rem; color: var(--ink-faint); font-size: .84rem; }
.site-footer__contribute a { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; border-radius: 50%; color: var(--ink-soft); }
.site-footer__contribute svg { width: 1.42rem; height: 1.42rem; fill: currentColor; }
.site-footer__contribute a:hover { color: var(--accent); background: var(--accent-soft); text-decoration: none; transform: translateY(-1px); }
.site-footer__contribute a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.notice { text-align: center; padding: 4rem 1rem; }
.notice h1 { font-size: 2rem; margin-bottom: .5rem; }

/* ============================ Responsive ============================ */
/* ~960px: sidebar drops below the main column. */
@media (max-width: 60rem) {
  .layout { grid-template-columns: 1fr; gap: 2rem; }
  .side { position: static; }
  /* Single column: the ToC keeps its natural DOM position (right after the
     title, before the body) and is no longer pinned or visually reordered. */
  .post__content-grid { display: block; }
  .post__content-grid > .post__toc-rail { position: static; margin-bottom: 1.5rem; }
  .post__content-grid > .post__body { margin-top: 0; }
  /* Mobile TOC: collapsible (JS on); still readable with JS off. */
  .js .toc__toggle { display: inline-block; }
  .js .toc__list { display: none; }
  .js .toc__list.is-open { display: flex; }
}

/* ~720px: stacked reading rows + mobile menu. */
@media (max-width: 48rem) {
  .post-row { flex-direction: column; gap: .8rem; padding: 1.1rem 1.15rem; }
  .post-row__thumb { order: -1; width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
  .post-flow--related .post-row { padding: .95rem 1rem; }
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    flex-basis: 100%; flex-direction: column; align-items: stretch; gap: .75rem;
    margin-left: 0; padding-bottom: 1rem;
  }
  .js .primary-nav { display: none; }
  .js .primary-nav.is-open { display: flex; }
  .primary-nav__list { flex-direction: column; align-items: stretch; gap: .25rem; }
  .primary-nav__list > li > a, .dropdown-toggle { display: block; padding: .5rem 0; border-bottom: 1px solid var(--line); width: 100%; }
  /* Keep the "浏览" toggle inline (still full-width row with its own bottom
     border and disclosure) so its caret stays after the label at this breakpoint. */
  .dropdown-toggle { display: inline-flex; align-items: center; justify-content: flex-start; gap: .32rem; }
  /* In the mobile drawer the dropdown is a flat inline list (no absolute overlay).
     No-JS: it stays visible so every browse link (全部文章 → /articles/, 分类,
     标签, 归档) is reachable without scripting. */
  .has-dropdown .dropdown { position: static; display: block; box-shadow: none; border: 0; padding: 0 0 .5rem 1rem; min-width: 0; }
  /* JS on: the "浏览" button becomes a true disclosure — aria-expanded, not
     hover/focus, controls visibility (collapsed by default, shown when open). */
  .js .has-dropdown .dropdown { display: none; }
  .js .dropdown-toggle[aria-expanded="true"] + .dropdown { display: block; }
  /* Hover has no reliable equivalent on touch; keep the software client links
     visible in the opened mobile drawer without requiring a second tap. */
  .software-dropdown .dropdown, .js .software-dropdown .dropdown { display: block; opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition: none; }
  .software-dropdown::after { display: none; }
  /* Caret is never hidden on mobile — small, non-shrinking, after the label. */
  .caret { flex: none; }
  /* Vertical rule is desktop-only; controls stack full-width in the drawer. */
  .nav-divider { display: none; }
  /* Search field goes full-width in the drawer (no overflow); the "搜索文章"
     label stays visible and the "/" hint is dropped to save room. */
  .search-open { width: 100%; border-radius: var(--radius-sm); height: 2.6rem; }
  .theme-toggle { width: 4.5rem; height: 2.25rem; border-radius: 999px; align-self: flex-start; }
  .search-open { justify-content: flex-start; }
  .search-open__kbd { display: none; }
}

/* ============================ Motion ============================ */
@media (prefers-reduced-motion: no-preference) {
  a, .chip, .tax-card, .side-social a, .pagination__num, .pagination__step { transition: color .15s ease, border-color .15s ease, transform .15s ease, background-color .15s ease; }
  .tax-card:hover { transform: translateY(-2px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

/* ============================================================
   Stats + unified icon/meta UI — additive isolation layer.
   Appended (never rewritten) so every baseline hero/card/grid/
   pagination/old-template rule stays intact; this block only adds
   new selectors and, by later cascade position, overrides the
   nav/search/theme/meta selectors this release restyles.
   ============================================================ */

/* --- SVG icon system --- */
.ico { width: 1em; height: 1em; flex: none; display: inline-block; vertical-align: -.14em; }
.meta-ico { display: inline-flex; align-items: center; margin-right: .3rem; color: var(--ink-faint); }
.meta-ico .ico { width: .95em; height: .95em; vertical-align: -.12em; }

/* --- Brand mark + nav leading icons --- */
.brand__mark { width: .85rem; height: .85rem; border-radius: 4px; background: var(--accent); flex: none; }
.nav-ico { display: inline-flex; align-items: center; font-size: .95rem; line-height: 1; color: var(--ink-faint); flex: none; }
.primary-nav a:hover .nav-ico, .dropdown-toggle:hover .nav-ico { color: currentColor; }

/* --- Search control: baseline square button -> labelled pill (override) --- */
.search-open {
  width: 9.5rem; height: 2rem; padding: 0 .5rem; gap: .4rem;
  justify-content: flex-start; border-radius: 6px; background: var(--surface-2);
}
.search-open__icon { display: inline-flex; align-items: center; font-size: 1rem; line-height: 1; flex: none; color: var(--ink-faint); }
.search-open__label { font-size: .82rem; line-height: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.search-open__kbd {
  margin-left: auto; font: inherit; font-size: .68rem; line-height: 1; color: var(--ink-faint);
  border: 1px solid var(--line); border-radius: 4px; padding: .08rem .28rem; min-width: 1rem; text-align: center; flex: none;
}
.nav-divider { width: 1px; height: 1.3rem; background: var(--line); flex: none; }

/* Theme toggle visuals live with the header control above: both icons remain visible
   while the thumb moves to the active mode, avoiding a layout shift. */

/* --- Article meta: inline tag group (unified meta row) --- */
.a-meta__tags { gap: .3rem; }
.meta-tag {
  --tag-s: 42%; --tag-l: 38%;
  --tag: hsl(var(--tag-h, 215) var(--tag-s) var(--tag-l));
  display: inline-flex; align-items: center;
  padding: .05rem .34rem; border: 0; border-radius: 3px;
  background: color-mix(in srgb, var(--tag) 12%, transparent);
  color: var(--tag); font-size: .72rem; line-height: 1.5; white-space: nowrap; text-decoration: none;
}
.meta-tag:hover, .meta-tag:focus-visible {
  color: var(--tag); background: color-mix(in srgb, var(--tag) 20%, transparent); text-decoration: none;
}
.a-meta__tags .meta-tag:nth-of-type(6n+1) { --tag-h: 355; }
.a-meta__tags .meta-tag:nth-of-type(6n+2) { --tag-h: 28; }
.a-meta__tags .meta-tag:nth-of-type(6n+3) { --tag-h: 135; }
.a-meta__tags .meta-tag:nth-of-type(6n+4) { --tag-h: 192; }
.a-meta__tags .meta-tag:nth-of-type(6n+5) { --tag-h: 222; }
.a-meta__tags .meta-tag:nth-of-type(6n+6) { --tag-h: 282; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .meta-tag { --tag-s: 46%; --tag-l: 70%; } }
:root[data-theme="dark"] .meta-tag { --tag-s: 46%; --tag-l: 70%; }

/* --- Detail-page meta item wrapper --- */
.post__meta-item { display: inline-flex; align-items: center; }

/* ============================ Stats page ============================ */
/* A clean, light-grey analytics dashboard: a toolbar of time controls above a
   full-width visit-trend card and two side-by-side ranking cards. No external
   chart library, no canvas, no JS — the trend is a pre-computed inline SVG.
   This is a standalone page: base.html drops the site header/footer for it and
   the template renders no sidebar, so the dashboard owns the whole canvas. */

/* Full-width shell: near-viewport width (not the reading-column --wrap), with a
   comfortable canvas margin. Left-aligned title sits at the top of the page. */
.stats-dashboard {
  /* Default (light) dashboard palette, scoped here so a stats-only hotfix works
     even where the global :root chart tokens are not yet released. The scoped
     system-dark and manual-dark rules below (after .stat-empty__note) override
     these on dark themes. */
  --chart-green: #4f9d76;
  --chart-green-soft: rgba(79, 157, 118, .16);
  --chart-blue: #5b82b8;
  --chart-blue-soft: rgba(91, 130, 184, .16);
  --chart-grid: rgba(16, 24, 40, .07);
  width: 100%; max-width: 90rem; margin-inline: auto;
  padding: 2.5rem clamp(1.25rem, 3vw, 2.75rem) 4rem;
}

/* Toolbar: preset range pills on the left, a custom date form on the right.
   The page title reads as a calm dashboard heading, no rule beneath it. */
.stats-head { margin-bottom: 1.75rem; border-bottom: 0; padding-bottom: 0; }
.stats-head h1 { margin: 0; font-size: clamp(1.5rem, 1.3rem + 1vw, 2rem); letter-spacing: -.01em; }
.stats-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: .75rem 1.25rem; margin: 0 0 2rem;
}
/* Range pills, date inputs and the apply button share one compact 2rem control
   height for a unified toolbar; each keeps a clear keyboard focus ring. */
.stat-range { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; }
.stat-range__opt {
  display: inline-flex; align-items: center; height: 2rem; padding: 0 .9rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft); font-size: .82rem; line-height: 1;
  transition: color .12s ease, border-color .12s ease, background-color .12s ease;
}
.stat-range__opt:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
.stat-range__opt:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stat-range__opt.is-current { border-color: var(--accent); background: var(--accent); color: #fff; font-weight: 600; }

/* Custom calendar range: two labelled date inputs + an apply button, no JS. */
.stat-daterange { display: flex; flex-wrap: wrap; align-items: end; gap: .5rem; }
.stat-daterange__field { display: flex; flex-direction: column; gap: .25rem; }
.stat-daterange__field label { font-size: .7rem; letter-spacing: .02em; color: var(--ink-faint); }
.stat-daterange input[type="date"] {
  font: inherit; font-size: .82rem; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  height: 2rem; padding: 0 .55rem; color-scheme: light dark; min-width: 8.5rem;
}
.stat-daterange input[type="date"]:hover { border-color: var(--accent); }
.stat-daterange input[type="date"]:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-color: var(--accent); }
.stat-daterange__sep { color: var(--ink-faint); align-self: center; padding-bottom: .4rem; }
.stat-daterange__apply {
  font: inherit; font-size: .82rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--ink-soft); height: 2rem; padding: 0 1rem;
  transition: color .12s ease, border-color .12s ease;
}
.stat-daterange__apply:hover { border-color: var(--accent); color: var(--accent); }
.stat-daterange__apply:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.stat-daterange.is-current input[type="date"] { border-color: var(--accent); }

/* A dashboard card: white/very-light surface, hairline border, soft shadow. */
.stat-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); padding: 1.5rem 1.6rem; margin: 0 0 1.5rem;
}
/* Section headings read as quiet labels above their data, on a hairline rule. */
.stat-block__title { display: flex; align-items: center; font-size: .95rem; font-weight: 600; letter-spacing: .01em; margin: 0 0 1.25rem; padding-bottom: .75rem; border-bottom: 1px solid var(--line-soft); color: var(--ink); font-family: var(--font-display); }
.stat-block__note { margin: .6rem 0 0; color: var(--ink-faint); font-size: .8rem; }

/* Visitor module: the headline UV number + its full-width daily trend chart.
   The hero card is roomier than the ranking cards so the trend reads big. Its
   heading is a faint label with no divider, letting the big number dominate. */
.stat-visitors { padding: 1.75rem 1.85rem 2rem; }
.stat-visitors .stat-block__title { margin-bottom: .4rem; padding-bottom: 0; border-bottom: 0; color: var(--ink-faint); font-weight: 500; }
.stat-visitors__lead { margin-bottom: 1.5rem; }
.stat-metric { margin: 0; display: flex; align-items: baseline; gap: .5rem; }
.stat-metric__value { font-size: clamp(2.8rem, 2rem + 2.6vw, 3.8rem); font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--ink); font-family: var(--font-display); line-height: 1; }
.stat-metric__unit { color: var(--ink-faint); font-size: .95rem; }

.stat-trend { margin: 0; }
/* Dense daily labels stay legible: the SVG keeps a sensible min-width and the
   wrapper scrolls horizontally rather than shrinking the chart (and its axis
   text) to an unreadable size. Scoped scroll — the document itself never
   overflows sideways. Focusable so it is keyboard- and touch-scrollable. */
.stat-trend__scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; }
.stat-trend__scroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); }
.stat-trend__svg { display: block; width: 100%; height: auto; }
.stat-trend__grid { stroke: var(--chart-grid); stroke-width: 1; }
.stat-trend__grid--base { stroke: var(--line); }
.stat-trend__baseline { stroke: var(--line); stroke-width: 1; }
.stat-trend__area { fill: var(--chart-green-soft); stroke: none; }
.stat-trend__line { fill: none; stroke: var(--chart-green); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.stat-trend__dot { fill: var(--surface); stroke: var(--chart-green); stroke-width: 1.5; }
.stat-trend__ylabel, .stat-trend__xlabel { fill: var(--ink-faint); font-size: 9px; font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* Two ranking cards side by side on desktop, single column when narrow. */
.stat-ranks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
/* Ranking cards echo the hero card but sit a touch tighter. */
.stat-ranks .stat-card { margin: 0; padding: 1.35rem 1.5rem; }

/* Compact horizontal bar ranking. The <ol> carries rank order for AT; the
   number badge is decorative, and each row shows its label, a proportional bar
   (aria-hidden, purely visual) and the real count as text — never a link. */
.rank { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .85rem; }
.rank__item { display: grid; grid-template-columns: 1.5rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; }
.rank__pos { font-weight: 700; color: var(--ink-faint); font-size: .8rem; font-variant-numeric: tabular-nums; text-align: center; }
.rank__body { min-width: 0; display: flex; flex-direction: column; gap: .4rem; }
.rank__label { min-width: 0; display: flex; flex-direction: column; gap: .1rem; }
.rank__name { color: var(--ink); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__path { color: var(--ink-faint); font-size: .76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank__track { height: .45rem; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.rank__bar { display: block; height: 100%; min-width: 2px; border-radius: 999px; background: var(--accent); }
/* Green bars for the page ranking, blue for the source ranking (dashboard hues). */
.rank--pages .rank__bar { background: var(--chart-green); }
.rank--sources .rank__bar { background: var(--chart-blue); }
/* The count is the emphasised figure; align it to the label row, not the bar. */
.rank__value { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--ink); font-weight: 600; font-size: .85rem; align-self: start; padding-top: .05rem; }

/* Interactive page-ranking rows only; source rankings remain display-only. */
.rank--pages .rank__link { color: inherit; text-decoration: none; }
.rank--pages .rank__link:hover { color: inherit; text-decoration: none; }
.rank--pages .rank__name { font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rank--pages .rank__item {
  border-radius: var(--radius-sm); padding: .5rem .6rem; margin: 0 -.6rem;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rank--pages .rank__item:hover,
.rank--pages .rank__item:focus-within {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line);
  transform: translateX(2px);
}
.rank--pages .rank__item:hover .rank__name,
.rank--pages .rank__item:focus-within .rank__name { color: var(--accent); }
.rank--pages .rank__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) {
  .rank--pages .rank__item { transition: background-color .18s ease, box-shadow .18s ease; }
  .rank--pages .rank__item:hover,
  .rank--pages .rank__item:focus-within { transform: none; }
}

.stat-empty { background: var(--surface); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2rem 1.5rem; text-align: center; margin-bottom: 2rem; }
.stat-empty__lead { margin: 0 0 .4rem; font-weight: 600; color: var(--ink); }
.stat-empty__note { margin: 0; color: var(--ink-faint); font-size: .88rem; }

/* Dashboard chart palette — dark theme (inherits the global theme switch
   via prefers-color-scheme and the [data-theme] attribute). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .stats-dashboard {
    --chart-green: #3b82f6;
    --chart-green-soft: rgba(92, 174, 134, .16);
    --chart-blue: #60a5fa;
    --chart-blue-soft: rgba(111, 151, 207, .16);
    --chart-grid: rgba(255, 255, 255, .08);
  }
}
:root[data-theme="dark"] .stats-dashboard {
  --chart-green: #3b82f6;
  --chart-green-soft: rgba(92, 174, 134, .16);
  --chart-blue: #60a5fa;
  --chart-blue-soft: rgba(111, 151, 207, .16);
  --chart-grid: rgba(255, 255, 255, .08);
}

/* --- Stats dashboard: narrow-screen stacking. Kept inside the stats block
   so a remote release without the global responsive rules still stacks the
   ranking cards and toolbar correctly below 48rem. --- */
@media (max-width: 48rem) {
  .stat-ranks { grid-template-columns: 1fr; }
  .stats-toolbar { flex-direction: column; align-items: stretch; }
  .stat-daterange { justify-content: flex-start; }
}

/* --- Responsive: mobile drawer drops the desktop-only divider + "/" hint --- */
@media (max-width: 48rem) {
  .nav-divider { display: none; }
  .search-open__kbd { display: none; }
}

/* --- Elevated search entry: compact field depth without modal styling --- */
.search-open {
  border-color: color-mix(in srgb, var(--line) 88%, var(--ink) 12%);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent),
              0 5px 14px color-mix(in srgb, var(--ink) 5%, transparent);
  transition: color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.search-open:hover {
  color: var(--ink);
  border-color: color-mix(in srgb, var(--accent) 42%, var(--line));
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 8%, transparent),
              0 8px 18px color-mix(in srgb, var(--accent) 9%, transparent);
  transform: translateY(-1px);
}
.search-open:focus-visible {
  color: var(--ink);
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 30%, transparent);
  outline-offset: 2px;
  box-shadow: 0 2px 5px color-mix(in srgb, var(--ink) 9%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 10%, transparent);
  text-decoration: none;
}
@media (prefers-reduced-motion: reduce) {
  .search-open { transition: none; }
  .search-open:hover { transform: none; }
}

/* --- Independent search page + stronger header field depth --- */
.search-open {
  box-shadow: 0 2px 4px color-mix(in srgb, var(--ink) 10%, transparent),
              0 9px 22px color-mix(in srgb, var(--ink) 9%, transparent);
}
.search-open:hover {
  box-shadow: 0 3px 7px color-mix(in srgb, var(--ink) 12%, transparent),
              0 12px 28px color-mix(in srgb, var(--accent) 13%, transparent);
}
.search-page { max-width: 60rem; padding-block: clamp(2rem, 7vw, 5rem); }
.search-page__head {
  padding: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  box-shadow: 0 12px 34px color-mix(in srgb, var(--ink) 10%, transparent);
}
.search-page__form { margin: 0; }
.search-page__field {
  display: flex; align-items: center; gap: .7rem; min-height: 3rem;
  padding: 0 .85rem; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
}
.search-page__field:focus-within {
  border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 12%, transparent);
}
.search-page__icon { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 1.1rem; flex: none; }
.search-page__field input { min-width: 0; flex: 1; border: 0; outline: 0; padding: .55rem 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; }
.search-page__field input::-webkit-search-cancel-button { display: none; }
.search-page__clear { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); font: 1.35rem/1 inherit; cursor: pointer; }
.search-page__clear:hover, .search-page__clear:focus-visible { color: var(--ink); background: var(--surface-2); outline: none; }
.search-page__shortcuts { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .85rem 0 0; color: var(--ink-faint); font-size: .78rem; }
.search-page__shortcuts span { display: inline-flex; align-items: center; gap: .25rem; }
.search-page__shortcuts kbd { min-width: 1.35rem; padding: .12rem .32rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); font: inherit; font-size: .72rem; line-height: 1.1; text-align: center; }
.search-page__empty { margin: 1.5rem 0 0; color: var(--ink-faint); }
.search-page .search-summary { margin: 1.6rem 0 1.1rem; }
.search-page .post-flow { margin-top: 0; }
.search-page .post-flow article.is-key-selected { outline: 2px solid color-mix(in srgb, var(--accent) 45%, transparent); outline-offset: 3px; }
@media (max-width: 48rem) {
  .search-page { padding-block: 1.5rem 2.5rem; }
  .search-page__head { padding: .85rem; }
  .search-page__shortcuts { gap: .45rem .7rem; }
}

/* --- Header search modal: focused query surface without inline expansion --- */
.search-open {
  width: 9.75rem;
  padding-inline: .7rem;
  gap: .48rem;
  box-shadow: 0 3px 7px color-mix(in srgb, var(--ink) 14%, transparent),
              0 12px 26px color-mix(in srgb, var(--ink) 12%, transparent);
}
.search-open__icon { margin-left: .05rem; }
.search-open__kbd { margin-right: .05rem; }
.search-open:hover {
  box-shadow: 0 4px 9px color-mix(in srgb, var(--ink) 16%, transparent),
              0 15px 31px color-mix(in srgb, var(--accent) 16%, transparent);
}
.search-modal { position: fixed; z-index: 100; inset: 0; display: grid; align-items: start; justify-items: center; padding: clamp(3.5rem, 10vh, 7rem) 1rem 1rem; background: color-mix(in srgb, #111 58%, transparent); backdrop-filter: blur(2px); opacity: 0; transition: opacity .18s ease; }
.search-modal[hidden] { display: none; }
.search-modal.is-open { opacity: 1; }
.search-modal__dialog { width: min(100%, 58rem); padding: .75rem; border: 1px solid color-mix(in srgb, var(--line) 75%, #fff 25%); border-radius: calc(var(--radius) + 3px); background: var(--surface); box-shadow: 0 20px 56px color-mix(in srgb, #000 35%, transparent); transform: translateY(-6px); transition: transform .18s ease; }
.search-modal.is-open .search-modal__dialog { transform: translateY(0); }
.search-modal__form { margin: 0; }
.search-modal__field { display: flex; align-items: center; gap: .75rem; min-height: 3.15rem; padding-inline: 1.05rem .75rem; border: 1px solid color-mix(in srgb, var(--line) 82%, var(--ink) 18%); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 84%, var(--ink) 16%); box-shadow: inset 0 1px 2px color-mix(in srgb, #000 10%, transparent); }
.search-modal__field:focus-within { border-color: color-mix(in srgb, var(--accent) 68%, var(--line)); box-shadow: inset 0 1px 2px color-mix(in srgb, #000 10%, transparent), 0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent); }
.search-modal__icon { display: inline-flex; align-items: center; color: var(--ink-soft); font-size: 1.12rem; flex: none; }
.search-modal__field input { flex: 1; min-width: 0; padding: .6rem 0; border: 0; outline: 0; background: transparent; color: var(--ink); font: inherit; font-size: 1rem; }
.search-modal__field input::-webkit-search-cancel-button { display: none; }
.search-modal__clear { width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--ink-faint); font: 1.3rem/1 inherit; cursor: pointer; }
.search-modal__clear:hover, .search-modal__clear:focus-visible { color: var(--ink); background: color-mix(in srgb, var(--surface) 70%, var(--ink) 12%); outline: none; }
.search-modal__shortcuts { display: flex; flex-wrap: wrap; gap: .55rem 1rem; margin: .8rem .05rem .05rem; color: var(--ink-faint); font-size: .78rem; }
.search-modal__shortcuts span { display: inline-flex; align-items: center; gap: .25rem; }
.search-modal__shortcuts kbd { min-width: 1.35rem; padding: .12rem .32rem; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 4px; background: var(--surface-2); color: var(--ink-soft); font: inherit; font-size: .72rem; line-height: 1.1; text-align: center; }
@media (max-width: 48rem) {
  .search-open { width: 100%; padding-inline: .8rem; }
  .search-modal { padding: 4.2rem .7rem .7rem; }
  .search-modal__dialog { padding: .6rem; }
  .search-modal__field { min-height: 3rem; padding-inline: .85rem .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  .search-modal, .search-modal__dialog { transition: none; }
}

/* --- Search modal refinement: full viewport veil, softer dialog, distinct trigger fill --- */
.search-open {
  background: color-mix(in srgb, var(--surface-2) 78%, var(--ink) 22%);
  border-color: color-mix(in srgb, var(--line) 72%, var(--ink) 28%);
}
.search-open:hover { background: color-mix(in srgb, var(--surface-2) 70%, var(--ink) 30%); }
.search-modal {
  inset: 0;
  width: 100vw;
  min-width: 100vw;
  height: 100dvh;
  min-height: 100vh;
  background: color-mix(in srgb, #111 52%, transparent);
}
.search-modal__dialog {
  border-color: color-mix(in srgb, var(--line) 88%, #fff 12%);
  box-shadow: 0 8px 24px color-mix(in srgb, #000 16%, transparent);
}
.search-modal__field {
  background: var(--surface);
  box-shadow: inset 0 1px 1px color-mix(in srgb, #000 5%, transparent);
}
.search-modal__field:focus-within {
  box-shadow: inset 0 1px 1px color-mix(in srgb, #000 5%, transparent),
              0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}

/* Higher specificity than .primary-nav a: give only the header search its own inner fill. */
.primary-nav .search-open {
  background: linear-gradient(180deg, #29323e 0%, #202833 100%);
  border-color: #354151;
}
.primary-nav .search-open:hover { background: linear-gradient(180deg, #313c4a 0%, #26313d 100%); }

/* --- Search modal compact pass: lighter veil and denser query control --- */
.search-modal {
  background: color-mix(in srgb, #111 42%, transparent);
  backdrop-filter: blur(1px);
}
.search-modal__dialog {
  padding: .55rem;
  box-shadow: 0 5px 16px color-mix(in srgb, #000 11%, transparent);
}
.search-modal__field {
  min-height: 2.7rem;
  padding-inline: .88rem .6rem;
}
.search-modal__field input { padding-block: .42rem; }
.search-modal__clear { width: 1.55rem; height: 1.55rem; font-size: 1.18rem; }
.search-modal__shortcuts { margin-top: .58rem; }
@media (max-width: 48rem) {
  .search-modal__dialog { padding: .5rem; }
  .search-modal__field { min-height: 2.65rem; padding-inline: .78rem .55rem; }
}

/* --- Search modal micro-compact: reduce only the popup query field height. --- */
.search-modal__field { min-height: 2.35rem; padding-inline: .8rem .55rem; }
.search-modal__field input { padding-block: .28rem; }
.search-modal__icon { font-size: 1.02rem; }
.search-modal__clear { width: 1.42rem; height: 1.42rem; font-size: 1.08rem; }
.search-modal__shortcuts { margin-top: .5rem; }
@media (max-width: 48rem) {
  .search-modal__field { min-height: 2.35rem; padding-inline: .74rem .5rem; }
}

/* --- Desktop modal anchor: begin exactly at the header divider. --- */
@media (min-width: 48.0625rem) {
  .search-modal { padding-top: 3.5rem; }
}

/* --- Header search balance: more inner breathing room, softer neutral elevation. --- */
.primary-nav .search-open {
  padding-inline: .86rem;
  gap: .46rem;
  box-shadow: 0 1px 3px rgba(148, 163, 184, .22),
              0 3px 8px rgba(148, 163, 184, .12);
}
.primary-nav .search-open__icon { margin-left: .04rem; }
.primary-nav .search-open__kbd { margin-right: .04rem; }
.primary-nav .search-open:hover {
  box-shadow: 0 1px 4px rgba(148, 163, 184, .28),
              0 4px 10px rgba(148, 163, 184, .16);
}
@media (max-width: 48rem) {
  .primary-nav .search-open { padding-inline: .9rem; }
}

/* --- Header search inset treatment: quiet input-like depth, not a floating card. --- */
.primary-nav .search-open {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .08),
              inset 0 -1px 2px rgba(0, 0, 0, .18),
              0 1px 2px rgba(148, 163, 184, .10);
}
.primary-nav .search-open:hover {
  box-shadow: inset 0 1px 1px rgba(255, 255, 255, .1),
              inset 0 -1px 2px rgba(0, 0, 0, .2),
              0 1px 3px rgba(148, 163, 184, .14);
}

/* --- Header search reference style: light native-field surface with Ctrl K badge. --- */
.primary-nav .search-open {
  width: 13rem;
  height: 2.5rem;
  padding-inline: .9rem .6rem;
  gap: .55rem;
  border-color: #e2e8f0;
  background: #f8fafc;
  color: #334155;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05),
              0 2px 5px rgba(15, 23, 42, .035);
}
.primary-nav .search-open__icon { color: #475569; margin-left: 0; font-size: 1rem; }
.primary-nav .search-open__label { color: #475569; font-size: .86rem; }
.primary-nav .search-open__kbd {
  min-width: auto;
  margin-left: auto;
  margin-right: 0;
  padding: .22rem .45rem;
  border-color: #dbe3ec;
  border-radius: 5px;
  background: #f1f5f9;
  color: #475569;
  font-size: .7rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9);
}
.primary-nav .search-open:hover {
  border-color: #cbd5e1;
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .07),
              0 3px 7px rgba(15, 23, 42, .05);
}
.primary-nav .search-open:hover .search-open__icon,
.primary-nav .search-open:hover .search-open__label { color: #334155; }
.primary-nav .search-open:focus-visible {
  outline-color: rgba(59, 130, 246, .35);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, .12), 0 1px 3px rgba(15, 23, 42, .06);
}
@media (max-width: 48rem) {
  .primary-nav .search-open { width: 100%; height: 2.6rem; padding-inline: .9rem .7rem; }
}

/* --- Compact slash search: short popup field and a truthful single-key badge. --- */
.primary-nav .search-open__kbd {
  min-width: 1.15rem;
  padding: .16rem .32rem;
  font-size: .72rem;
}
.search-modal__dialog {
  width: min(100%, 42rem);
  padding: .45rem;
}
.search-modal__field {
  min-height: 2.1rem;
  padding-inline: .72rem .48rem;
}
.search-modal__field input { padding-block: .18rem; font-size: .94rem; }
.search-modal__icon { font-size: .96rem; }
.search-modal__clear { width: 1.28rem; height: 1.28rem; font-size: 1rem; }
.search-modal__shortcuts { margin-top: .42rem; font-size: .74rem; }
.search-modal__shortcuts kbd { padding: .1rem .28rem; font-size: .68rem; }
@media (max-width: 48rem) {
  .search-modal__dialog { width: min(100%, 42rem); padding: .45rem; }
  .search-modal__field { min-height: 2.1rem; padding-inline: .68rem .45rem; }
}

/* --- Correction: restore popup dimensions; compact the header trigger only. --- */
/* Restore the popup values that existed before the last (mis-targeted) adjustment. */
.search-modal__dialog {
  width: min(100%, 58rem);
  padding: .55rem;
}
.search-modal__field {
  min-height: 2.35rem;
  padding-inline: .8rem .55rem;
}
.search-modal__field input { padding-block: .28rem; font-size: 1rem; }
.search-modal__icon { font-size: 1.02rem; }
.search-modal__clear { width: 1.42rem; height: 1.42rem; font-size: 1.08rem; }
.search-modal__shortcuts { margin-top: .5rem; font-size: .78rem; }
.search-modal__shortcuts kbd { padding: .12rem .32rem; font-size: .72rem; }
/* The requested compact sizing applies only to the header search trigger. */
.primary-nav .search-open {
  width: 11.75rem;
  height: 2.2rem;
  padding-inline: .78rem .52rem;
  gap: .42rem;
}
.primary-nav .search-open__icon { font-size: .94rem; }
.primary-nav .search-open__label { font-size: .82rem; }
.primary-nav .search-open__kbd { min-width: 1.05rem; padding: .12rem .28rem; font-size: .68rem; }
@media (max-width: 48rem) {
  .search-modal__dialog { width: min(100%, 58rem); padding: .5rem; }
  .search-modal__field { min-height: 2.35rem; padding-inline: .74rem .5rem; }
  .primary-nav .search-open { width: 100%; height: 2.4rem; padding-inline: .82rem .62rem; }
}

/* Header trigger width: owner-selected desktop width; compact inner spacing remains. */
.primary-nav .search-open {
  width: 10.5rem;
  padding-inline: .55rem .38rem;
  gap: .3rem;
}
.primary-nav .search-open__icon { font-size: .88rem; }
.primary-nav .search-open__label { font-size: .75rem; }
.primary-nav .search-open__kbd {
  margin-right: .4rem;
  min-width: 1rem;
  padding: .1rem .24rem;
  font-size: .64rem;
}
@media (max-width: 48rem) {
  .primary-nav .search-open { width: 100%; padding-inline: .82rem .62rem; gap: .42rem; }
  .primary-nav .search-open__icon { font-size: .94rem; }
  .primary-nav .search-open__label { font-size: .82rem; }
  .primary-nav .search-open__kbd { margin-right: 0; min-width: 1.05rem; padding: .12rem .28rem; font-size: .68rem; }
}

/* --- Header search contrast pass: clearer icon, label, and especially slash key. --- */
.primary-nav .search-open__icon {
  color: #1f2937;
  font-size: .96rem;
}
.primary-nav .search-open__label { color: #1f2937; }
.primary-nav .search-open__kbd {
  min-width: 1.08rem;
  border-color: #cbd5e1;
  background: #e8eef5;
  color: #0f172a;
  font-size: .72rem;
  font-weight: 700;
}
.primary-nav .search-open:hover .search-open__icon,
.primary-nav .search-open:hover .search-open__label { color: #0f172a; }
@media (max-width: 48rem) {
  .primary-nav .search-open__icon { font-size: 1rem; }
  .primary-nav .search-open__kbd { min-width: 1.1rem; font-size: .74rem; }
}

/* --- Sidebar browse: compact three-card access above popular articles. --- */
.side-browse {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .42rem;
  padding: .72rem;
  border: 1px solid color-mix(in srgb, var(--line) 72%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--surface-2) 72%, var(--bg) 28%);
}
.side-browse__item {
  display: flex;
  min-width: 0;
  min-height: 3.85rem;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .3rem;
  padding: .45rem .25rem;
  border: 1px solid color-mix(in srgb, var(--line) 78%, #fff 22%);
  border-radius: calc(var(--radius-sm) + 2px);
  background: var(--surface);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-soft);
  font-size: .78rem;
  line-height: 1.1;
  text-align: center;
}
.side-browse__item:hover {
  border-color: color-mix(in srgb, var(--accent) 32%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
  color: var(--accent);
  text-decoration: none;
  transform: translateY(-1px);
}
.side-browse__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }
.side-browse__icon { display: inline-flex; align-items: center; justify-content: center; color: #5c7f9e; }
.side-browse__icon .ico { width: 1.05rem; height: 1.05rem; }
@media (max-width: 32rem) {
  .side-browse { gap: .35rem; padding: .55rem; }
  .side-browse__item { min-height: 3.55rem; font-size: .75rem; }
}

/* --- Tag index picker: local selection state; article tag links remain untouched. --- */
.tag-index-card {
  padding: clamp(1.1rem, 2.8vw, 1.55rem);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 2px);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.tag-index-card__head { display: flex; align-items: center; gap: .6rem; margin-bottom: 1rem; }
.tag-index-card__icon { display: inline-flex; flex: none; color: var(--ink-soft); }
.tag-index-card__icon .ico { width: 1.18rem; height: 1.18rem; }
.tag-index-card__head h1 { margin: 0; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.55rem); line-height: 1.2; }
.tag-index-card__head p { margin: .18rem 0 0; color: var(--ink-faint); font-size: .78rem; }
.tag-picker { list-style: none; display: flex; flex-wrap: wrap; gap: .58rem .62rem; padding: 0; margin: 0; }
.tag-picker li { --tag-s: 47%; --tag-l: 42%; --tag: hsl(var(--tag-h, 215) var(--tag-s) var(--tag-l)); }
.tag-picker li:nth-child(8n+1) { --tag-h: 197; }
.tag-picker li:nth-child(8n+2) { --tag-h: 24; }
.tag-picker li:nth-child(8n+3) { --tag-h: 328; }
.tag-picker li:nth-child(8n+4) { --tag-h: 173; }
.tag-picker li:nth-child(8n+5) { --tag-h: 228; }
.tag-picker li:nth-child(8n+6) { --tag-h: 276; }
.tag-picker li:nth-child(8n+7) { --tag-h: 43; }
.tag-picker li:nth-child(8n+8) { --tag-h: 351; }
.tag-picker__item {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  min-height: 1.8rem;
  padding: .23rem .58rem;
  border: 1px solid color-mix(in srgb, var(--tag) 21%, var(--line));
  border-radius: 6px;
  background: color-mix(in srgb, var(--tag) 10%, var(--surface));
  color: color-mix(in srgb, var(--tag) 80%, var(--ink) 20%);
  font: inherit;
  font-size: .82rem;
  line-height: 1.15;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.tag-picker__count { color: inherit; font-size: .76rem; opacity: .85; font-variant-numeric: tabular-nums; }
.tag-picker__item:hover { border-color: color-mix(in srgb, var(--tag) 42%, var(--line)); background: color-mix(in srgb, var(--tag) 16%, var(--surface)); }
.tag-picker__item[aria-pressed="true"] {
  border-color: color-mix(in srgb, var(--tag) 75%, #1f2937);
  background: color-mix(in srgb, var(--tag) 70%, #1f2937);
  color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, #000 14%, transparent);
}
.tag-picker__item[aria-pressed="true"] .tag-picker__count { opacity: .9; }
.tag-picker__item:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tag-picker li { --tag-s: 46%; --tag-l: 70%; }
}
:root[data-theme="dark"] .tag-picker li { --tag-s: 46%; --tag-l: 70%; }
@media (max-width: 32rem) {
  .tag-index-card { padding: 1rem; }
  .tag-picker { gap: .45rem; }
  .tag-picker__item { padding: .21rem .5rem; font-size: .78rem; }
}

/* --- Tag picker selection lock: visible after pointer leaves or focus changes. --- */
.tag-picker__item[aria-pressed="true"],
.tag-picker__item[aria-pressed="true"]:hover,
.tag-picker__item[aria-pressed="true"]:focus-visible {
  border-color: color-mix(in srgb, var(--tag) 84%, #111827);
  background: color-mix(in srgb, var(--tag) 84%, #111827);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
              0 2px 4px color-mix(in srgb, #000 18%, transparent);
}
.tag-picker__item[aria-pressed="true"] .tag-picker__count {
  color: #fff;
  opacity: .96;
  font-weight: 700;
}

/* --- Header live-search result list: scoped to the modal only. --- */
.search-modal__results { display: grid; gap: .28rem; max-height: min(46vh, 24rem); margin: .55rem 0 0; padding: 0; overflow: auto; list-style: none; overscroll-behavior: contain; scrollbar-gutter: stable; }
.search-modal__results[hidden] { display: none; }
.search-modal__results a { display: grid; gap: .18rem; padding: .68rem .8rem; border: 1px solid var(--line-soft); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--surface-2) 58%, var(--surface)); color: var(--ink); text-decoration: none; }
.search-modal__results a strong { font-size: .92rem; line-height: 1.35; }
.search-modal__results a span { display: -webkit-box; overflow: hidden; color: var(--ink-soft); font-size: .78rem; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.search-modal__results a:hover, .search-modal__results a.is-key-selected { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); background: color-mix(in srgb, var(--accent-soft) 62%, var(--surface)); }
.search-modal__results a:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 62%, transparent); outline-offset: 2px; }
.search-modal__results mark { padding: 0 .1em; border-radius: .2em; background: #dbeafe; color: #1d4ed8; font: inherit; font-weight: 750; }
[data-theme="dark"] .search-modal__results mark { background: #1e3a8a; color: #bfdbfe; }
@media (max-width: 48rem) { .search-modal__results { max-height: min(50vh, 22rem); } }

/* ============================ Home article grid ============================ */
/* Home landing only: a full-width Hero card (the first article of the final home
   ordering) above a responsive grid of compact cards — ~3 columns on desktop, 2
   on tablet, 1 on phones. Scoped to home; the stream card (.post-row) is left
   untouched for the list / search / related pages. minmax(0, 1fr) columns keep a
   long title or wide image from ever forcing horizontal overflow. */
.home-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
.post-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden;
}
.post-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); box-shadow: var(--shadow); }
.post-card:focus-within { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); box-shadow: var(--shadow); }
.post-card--top { border-color: var(--line); }

/* Hero: spans every column, stacked on phones (thumb over text). */
.home-hero { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); }
.home-hero__main:only-child { grid-column: 1 / -1; }
.home-hero__thumb { display: block; width: 100%; min-height: 0; align-self: start; overflow: hidden; background: var(--accent-soft); }
.home-hero__thumb img { display: block; width: 100%; height: auto; }
.home-hero__main { min-width: 0; display: flex; flex-direction: column; gap: .7rem; padding: 1.6rem 1.75rem; }
.home-hero__title {
  font-size: 1.5rem; line-height: 1.32; margin: 0; min-width: 0;
  display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
  font-family: var(--font-display); overflow-wrap: anywhere;
}
.home-hero__title a { color: var(--ink); }
.home-hero__title a:hover { color: var(--accent); }
.home-hero__summary { margin: 0; color: var(--ink-soft); font-size: 1rem; line-height: 1.72; }

/* Compact grid card: thumb on top, text below; height:100% makes every card in a
   row share the tallest one's height for an even grid. */
.home-card { display: flex; flex-direction: column; height: 100%; }
.home-card__thumb { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--accent-soft); }
.home-card__thumb img { width: 100%; height: 100%; object-fit: cover; }
.home-card__main { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: .5rem; padding: 1.1rem 1.2rem; }
.home-card__title {
  font-size: 1.12rem; line-height: 1.4; margin: 0; min-width: 0;
  display: flex; align-items: baseline; gap: .45rem; flex-wrap: wrap;
  font-family: var(--font-display); overflow-wrap: anywhere;
}
.home-card__title a { color: var(--ink); }
.home-card__title a:hover { color: var(--accent); }
.home-card__summary {
  margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.65;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}

/* Tablet: two columns; the Hero splits into image beside text. */
@media (min-width: 48rem) {
  .home-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .home-hero { grid-template-columns: 1.15fr 1fr; align-items: stretch; }
  .home-hero__main { justify-content: center; }
}
/* Desktop: three columns. */
@media (min-width: 64rem) {
  .home-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* featured-hover-neutral-20260718 */
.home-hero.post-card:hover,
.home-hero.post-card:focus-within { border-color: var(--line); box-shadow: var(--shadow); }

/* article-adjacent-nav-20260718 */
.article-adjacent{border-top:1px solid var(--line);margin:2.5rem 0 0;padding-top:1.5rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr));gap:1rem}.article-adjacent__card{min-width:0;border:1px solid var(--line);border-radius:var(--radius);padding:1.15rem;display:flex;flex-direction:column;gap:.35rem;color:var(--ink);text-decoration:none}.article-adjacent__card--next{text-align:right}.article-adjacent__card span{font-size:.85rem;color:var(--ink-soft)}.article-adjacent__card strong{font-size:.95rem;line-height:1.55;font-weight:500;color:var(--accent)}.article-adjacent__card:hover,.article-adjacent__card:focus-visible{border-color:var(--line);box-shadow:var(--shadow);text-decoration:none}@media(max-width:680px){.article-adjacent{grid-template-columns:1fr}.article-adjacent__card--next{text-align:left}}

/* article-adjacent-white-card-20260718 */
.article-adjacent__card{background:#fff;border-color:rgba(15,55,95,.14);box-shadow:0 6px 18px rgba(24,55,88,.06)}.article-adjacent__card:hover,.article-adjacent__card:focus-visible{background:#fff;border-color:rgba(36,115,190,.28);box-shadow:0 10px 24px rgba(24,55,88,.11)}

/* comment-emoji-picker-20260718 */
.comment-emoji{position:relative;margin:-.4rem 0 1rem}.comment-emoji__toggle{appearance:none;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:.38rem .68rem;color:var(--ink-soft);font:inherit;font-size:.85rem;cursor:pointer}.comment-emoji__toggle:hover,.comment-emoji__toggle:focus-visible{color:var(--accent);border-color:rgba(36,115,190,.32)}.comment-emoji__picker{position:absolute;z-index:4;top:calc(100% + .45rem);left:0;display:grid;grid-template-columns:repeat(5,2rem);gap:.3rem;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.comment-emoji__picker[hidden]{display:none}.comment-emoji__item{border:0;background:transparent;border-radius:.4rem;font-size:1.1rem;line-height:2rem;cursor:pointer}.comment-emoji__item:hover,.comment-emoji__item:focus-visible{background:var(--surface-2)}

/* comment-emoji-more-and-submit-20260718 */
.comment-emoji__picker{grid-template-columns:repeat(6,2rem);max-width:calc(100vw - 3rem)}.comment-form__actions{display:flex;justify-content:flex-end;margin-top:.25rem}.comment-form__submit{font-size:.84rem;line-height:1.2;padding:.5rem .85rem;min-height:2rem}@media(max-width:480px){.comment-emoji__picker{grid-template-columns:repeat(5,2rem)}.comment-form__submit{font-size:.82rem;padding:.48rem .76rem}}

/* comment-emoji-actionbar-20260718 */
.comment-form__actions{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.35rem}.comment-form__actions .comment-emoji{margin:0}.comment-emoji__picker{grid-template-columns:repeat(8,2rem);max-width:min(22rem,calc(100vw - 2rem));max-height:13.7rem;overflow:auto;scrollbar-gutter:stable}.comment-form__submit{margin-left:auto}@media(max-width:480px){.comment-form__actions{gap:.55rem}.comment-emoji__toggle{font-size:.8rem;padding:.35rem .58rem}.comment-emoji__picker{grid-template-columns:repeat(6,2rem);max-width:calc(100vw - 2rem)}.comment-form__submit{font-size:.8rem;padding:.46rem .7rem;white-space:nowrap}}

/* comment-form-compact-20260718 */
.comment-form-wrap{padding:1.05rem clamp(1rem,2.2vw,1.35rem)}.comment-form__title{margin-bottom:.18rem;font-size:1.05rem}.comment-form__note{margin-bottom:.8rem;font-size:.82rem}.form-row{margin-bottom:.75rem;gap:.28rem}.form-row label{font-size:.86rem}.comment-form input,.comment-form textarea{padding:.58rem .68rem}.comment-form textarea{min-height:5.5rem}.comment-form__actions{margin-top:.1rem}@media(max-width:480px){.comment-form-wrap{padding:.95rem}.comment-form textarea{min-height:5rem}}

/* comment-form-ultra-compact-20260718 */
.comment-form-wrap{padding:.85rem clamp(.85rem,1.8vw,1.05rem)}.comment-form__title{margin-bottom:.1rem;font-size:1rem;line-height:1.25}.comment-form__note{margin-bottom:.58rem;font-size:.78rem;line-height:1.35}.form-row{margin-bottom:.55rem;gap:.2rem}.form-row label{font-size:.82rem;line-height:1.25}.comment-form input,.comment-form textarea{padding:.48rem .6rem;font-size:.88rem;line-height:1.35}.comment-form textarea{min-height:4.5rem}.comment-form__actions{gap:.5rem;margin-top:0}.comment-emoji__toggle{font-size:.78rem;padding:.3rem .52rem}.comment-form__submit{font-size:.78rem;padding:.4rem .66rem;min-height:1.85rem}@media(max-width:480px){.comment-form-wrap{padding:.8rem}.comment-form textarea{min-height:4.35rem}.comment-form__actions{gap:.45rem}}

/* article-tail-compact-and-reading-progress-20260718 */
.article-adjacent{margin-top:1.5rem;padding-top:.9rem;gap:.75rem}.article-adjacent__card{padding:.9rem;gap:.22rem}.comments{margin-top:1.4rem;padding-top:1rem}.comments h2{margin:0 0 .7rem;font-size:1.18rem}.comment-list{margin-bottom:1rem;gap:.8rem}.comment-list:empty{margin:0}.comment-empty{margin:.4rem 0 .8rem;font-size:.9rem}.article-backtop{--reading-progress:0;position:fixed;right:clamp(1rem,2.4vw,2rem);bottom:clamp(1rem,2.4vw,2rem);z-index:20;width:2.7rem;height:2.7rem;padding:0;border:0;border-radius:50%;background:conic-gradient(var(--accent) calc(var(--reading-progress)*1%),rgba(36,115,190,.15) 0);box-shadow:0 5px 18px rgba(24,55,88,.16);cursor:pointer;opacity:0;visibility:hidden;transform:translateY(.45rem);transition:opacity .18s ease,transform .18s ease,visibility .18s ease}.article-backtop::before{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--surface)}.article-backtop svg{position:relative;width:100%;height:100%;padding:.42rem;fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}.article-backtop__track,.article-backtop__progress{display:none}.article-backtop.is-visible{opacity:1;visibility:visible;transform:translateY(0)}.article-backtop:hover,.article-backtop:focus-visible{box-shadow:0 7px 22px rgba(24,55,88,.23);transform:translateY(-2px)}@media(max-width:680px){.article-adjacent{margin-top:1.2rem;padding-top:.75rem}.comments{margin-top:1.2rem;padding-top:.85rem}.article-backtop{width:2.55rem;height:2.55rem;right:.85rem;bottom:.85rem}}@media(prefers-reduced-motion:reduce){.article-backtop{transition:none}.article-backtop:hover,.article-backtop:focus-visible{transform:none}}

/* article-backtop-position-20260718 */
.article-backtop{bottom:clamp(4.5rem,7vw,6rem)}@media(max-width:680px){.article-backtop{bottom:4rem}}

/* toc-scrollspy-20260718 */
.toc__item a{display:block;border-radius:var(--radius-sm);padding:.18rem .38rem;transition:color .16s ease,background-color .16s ease}.toc__item a.is-active{color:var(--accent);background:rgba(36,115,190,.09);font-weight:600;text-decoration:none}.toc__item a:focus-visible{outline:2px solid rgba(36,115,190,.42);outline-offset:2px}@media(prefers-reduced-motion:reduce){.toc__item a{transition:none}}

/* article-comments-popular-20260718 */
.article-comments-layout{display:grid;grid-template-columns:minmax(0,var(--reading)) minmax(15rem,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}.article-comments-layout .comments{min-width:0}.article-comments-popular{min-width:0;padding-top:1.4rem}.article-comments-popular .side-card{margin:0}@media(max-width:680px){.article-comments-layout{display:block}.article-comments-popular{padding-top:1rem}.article-comments-popular .side-card{max-width:var(--reading)}}

/* article-comments-popular-align-toc-20260718 */
.article-comments-layout{grid-template-columns:minmax(0,1fr) 15rem;gap:2.5rem}

/* article-comments-popular-exact-rail-alignment-20260718 */
.article-comments-layout{margin-inline:clamp(1.25rem,4vw,3rem)}@media(max-width:680px){.article-comments-layout{margin-inline:0}}

/* article-detail-unified-right-rail-20260718 */
.article-detail-layout{display:grid;grid-template-columns:minmax(0,1fr) 15rem;gap:2.5rem;align-items:start}.article-detail-main{min-width:0}.article-detail-main .post{margin:0}.article-detail-main .post__body{min-width:0}.article-detail-rail{position:sticky;top:5rem;min-width:0;display:flex;flex-direction:column;gap:1rem}.article-detail-rail__toc .toc{margin:0;max-height:min(58vh,34rem);overflow-y:auto;scrollbar-gutter:stable}.article-detail-rail__popular{margin:0}@media(max-width:60rem){.article-detail-layout{display:block}.article-detail-rail{position:static;margin-top:1.5rem}.article-detail-rail__toc .toc{max-height:none;overflow:visible}}

/* article-detail-rail-natural-toc-20260718 */
.article-detail-rail__toc .toc{max-height:none;overflow:visible;scrollbar-gutter:auto}

/* article-rail-toc-single-line-20260718 */
.article-detail-rail .toc__item{min-width:0}.article-detail-rail .toc__item a{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* article-detail-title-scale-20260718 */
.article-detail-main .post__title{font-size:clamp(1.45rem,1.2rem + 1.45vw,2.1rem);line-height:1.28}

/* article-detail-title-meta-layout-20260718 */
.article-detail-main .post__title{font-size:1.15rem;line-height:1.5;margin-bottom:.55rem}
.article-detail-main .post__eyebrow{margin:0 0 .65rem}
.article-detail-main .post__header-divider{margin:1rem 0 1.25rem;border:0;border-top:1px solid var(--line)}
.article-detail-main .post__header-divider + .post__cover{margin-top:0}
.post-row__title a .top-badge,.home-hero__title a .top-badge,.home-card__title a .top-badge{display:inline-block;margin-right:.4rem;vertical-align:.12em}

/* article-detail-meta-tags-20260718 */
.article-detail-main .post__title{font-size:1.25rem}
.article-detail-main .post__meta-tags{display:flex;min-width:0}
.article-detail-main .post__meta-tags .chip-list--tags{align-items:center;gap:.35rem}

/* article-detail-title-row-20260718 */
.article-detail-main .post__title-row{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin:0 0 .55rem}
.article-detail-main .post__title-row .post__eyebrow{margin:0;flex:none}
.article-detail-main .post__title-row .post__title{font-size:1.35rem;line-height:1.45;margin:0;min-width:0}
.article-detail-main .post__meta-tags{align-items:center;gap:.35rem}
.article-detail-main .post__meta-tags>.meta-ico{flex:none}

/* article-detail-title-inline-category-20260718 */
.article-detail-main .post__title-row{flex-wrap:nowrap;align-items:flex-start}
.article-detail-main .post__title-row .post__eyebrow{margin-top:.08em}
.article-detail-main .post__title-row .post__title{flex:1 1 0;min-width:0}

/* article-detail-title-size-145-20260718 */
.article-detail-main .post__title-row .post__title{font-size:1.45rem}

/* article-detail-title-size-150-20260718 */
.article-detail-main .post__title-row .post__title{font-size:1.5rem}

/* article-detail-title-size-150-20260718 (post-detail) */
.article-detail-main .post__title{font-size:1.5rem}

/* article-single-divider-20260718 */
.article-detail-main .post__body hr:has(+ :is(h2, h3, h4)){display:none}

/* article-table-fit-20260718 */
.article-detail-main .post__body .table-scroll{width:100%;max-width:100%;overflow-x:visible}
.article-detail-main .post__body .table-scroll > table{width:100%!important;max-width:100%!important;min-width:0!important;table-layout:fixed}
.article-detail-main .post__body .table-scroll th,.article-detail-main .post__body .table-scroll td{min-width:0!important;padding:.45rem .5rem;overflow-wrap:anywhere;word-break:break-word}
@media (max-width:48rem){.article-detail-main .post__body .table-scroll th,.article-detail-main .post__body .table-scroll td{padding:.35rem .28rem}}

/* article-table-cell-spacing-20260718 */
.article-detail-main .post__body .table-scroll th,.article-detail-main .post__body .table-scroll td{padding:.45rem .5rem!important}
@media (max-width:48rem){.article-detail-main .post__body .table-scroll th,.article-detail-main .post__body .table-scroll td{padding:.35rem .28rem!important}}

/* article-toc-scroll-20260718 */
@media (min-width:60.0625rem){.article-detail-rail__toc .toc{max-height:calc(100vh - 6.5rem);overflow-y:auto;overscroll-behavior:contain;scrollbar-gutter:stable}}

/* article-toc-hide-scrollbar-20260718 */
@media (min-width:60.0625rem){.article-detail-rail__toc .toc{scrollbar-gutter:auto;scrollbar-width:none;-ms-overflow-style:none}.article-detail-rail__toc .toc::-webkit-scrollbar{width:0;height:0}}

/* article-title-category-tag-icon-20260718 */
.article-detail-main .post__title-row{align-items:center}
.article-detail-main .post__title-row .post__eyebrow{margin-top:0}

/* card-body-excerpts-20260718: generated previews stay compact per card. */
.post-row__summary,.home-hero__summary{overflow-wrap:anywhere}
.post-row__summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.home-hero__summary{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden}
@media(max-width:42rem){.home-hero__summary{-webkit-line-clamp:3}}

/* card-excerpt-length-tuning-20260718 */
.home-hero__summary{-webkit-line-clamp:3}
@media(max-width:42rem){.home-hero__summary{-webkit-line-clamp:2}}

/* home-hero-top-inline-20260718: TOP shares the title's first text line. */
.home-hero__title{display:block}
.home-hero__title .top-badge,.home-hero__title .test-badge{display:inline-block;vertical-align:middle;margin-right:.12em;white-space:nowrap}
.home-hero__title a{display:inline;overflow-wrap:anywhere}

/* ========================= Image lightbox =========================
   Article-detail cover and body images become zoom triggers (JS adds the
   role/keyboard handling; the class alone just hints the affordance). The
   overlay is inert until JS opens it — the [hidden] attribute keeps it out of
   the layout with no JS. The zoomed image is contained inside the viewport, so
   it never stretches and never causes horizontal overflow. */
.img-zoom { cursor: zoom-in; }

.img-lightbox {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 9, 15, .86);
  overflow: hidden;
}
.img-lightbox[hidden] { display: none; }
.lightbox-open, .lightbox-open body { overflow: hidden; }

.img-lightbox__dialog {
  position: relative;
  max-width: 100%; max-height: 100%;
  display: flex; align-items: center; justify-content: center;
}
.img-lightbox__img {
  display: block;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  cursor: zoom-out;
  box-shadow: 0 18px 60px rgba(0, 0, 0, .55);
}
.img-lightbox__close {
  position: absolute; top: -.5rem; right: -.5rem;
  transform: translate(50%, -50%);
  width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; line-height: 1; color: #fff;
  background: rgba(20, 24, 32, .92); border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 50%; cursor: pointer;
}
.img-lightbox__close:hover,
.img-lightbox__close:focus-visible { background: rgba(40, 46, 58, .98); }
@media (max-width: 640px) {
  .img-lightbox__close { top: 0; right: 0; transform: none; }
}

@media (prefers-reduced-motion: no-preference) {
  .img-lightbox { animation: img-lightbox-in .16s ease; }
}
@keyframes img-lightbox-in { from { opacity: 0; } to { opacity: 1; } }

/* yunmoo-wordmark-20260719 */
.brand__logo{display:block;width:6.35rem;height:auto;color:var(--ink);flex:none}.brand a:hover .brand__logo{color:var(--accent)}@media(max-width:48rem){.brand__logo{width:5.8rem}}

/* yunmoo-emblem-20260719 */
.brand__emblem{width:1.65rem;height:1.65rem;flex:none;display:block}@media(max-width:48rem){.brand__emblem{width:1.5rem;height:1.5rem}}

/* Keep external Yunmoo wordmark legible in dark theme. */
:root[data-theme="dark"] .brand__logo { filter: brightness(0) invert(1); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .brand__logo { filter: brightness(0) invert(1); } }

/* Selected tag remains dark until another tag is chosen. */
.tag-picker__item.is-active, .tag-picker__item[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); box-shadow: 0 1px 2px color-mix(in srgb, #000 18%, transparent); }
.tag-picker__item.is-active .tag-picker__count, .tag-picker__item[aria-pressed="true"] .tag-picker__count { color: inherit; opacity: .78; }

/* Persistent active state uses the selected tag’s own deeper colour. */
.tag-picker__item.is-active, .tag-picker__item[aria-pressed="true"] { background: color-mix(in srgb, var(--tag) 76%, var(--ink) 24%); border-color: color-mix(in srgb, var(--tag) 82%, var(--ink) 18%); color: var(--surface); }
.tag-picker__item.is-active .tag-picker__count, .tag-picker__item[aria-pressed="true"] .tag-picker__count { color: var(--surface); opacity: .82; }

/* Tag picker hover previews the same deeper per-tag state without changing selection. */
.tag-picker__item:hover:not(.is-active):not([aria-pressed="true"]) { background: color-mix(in srgb, var(--tag) 76%, var(--ink) 24%); border-color: color-mix(in srgb, var(--tag) 82%, var(--ink) 18%); color: var(--surface); }
.tag-picker__item:hover:not(.is-active):not([aria-pressed="true"]) .tag-picker__count { color: var(--surface); opacity: .82; }

/* A quiet divider separates tag name from its article count. */
.tag-picker__count { display: inline-flex; align-items: center; min-height: 1em; padding-left: .38rem; border-left: 1px solid currentColor; opacity: .58; font-variant-numeric: tabular-nums; }

/* Reusable editorial callout: applied only by the admin paragraph-shadow tool. */
.post__body p.article-shadow,
.post p.article-shadow {
  margin-block: 1.2rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--line, #d9dde3);
  border-radius: 8px;
  background: var(--surface, #fff);
  box-shadow: 0 7px 18px rgba(15, 23, 42, .09);
}

.post__body .article-folds, .post .article-folds { margin: 1.2rem 0 1.6rem; border-top: 1px solid var(--line, #e2e2e3); } .post__body .article-fold, .post .article-fold { border-bottom: 1px solid var(--line, #e2e2e3); } .post__body .article-fold summary, .post .article-fold summary { display:flex; align-items:center; gap:.55rem; padding:1rem .25rem; cursor:pointer; font-weight:650; list-style:none; } .post__body .article-fold summary::-webkit-details-marker, .post .article-fold summary::-webkit-details-marker { display:none; } .post__body .article-fold summary::before, .post .article-fold summary::before { content:'›'; font-size:1.55rem; line-height:1; transition:transform .18s ease; } .post__body .article-fold[open] summary::before, .post .article-fold[open] summary::before { transform:rotate(90deg); } .post__body .article-fold>div, .post .article-fold>div { padding:0 .25rem 1rem 1.9rem; color:var(--ink-soft, #4b5563); } .post__body .article-fold>div p:first-child, .post .article-fold>div p:first-child { margin-top:0; }
.post__body .article-rank-table, .post .article-rank-table { width:100% !important; min-width:0 !important; margin:1.25rem 0; border-collapse:separate; border-spacing:0; overflow:hidden; border:1px solid var(--line, #e2e2e3); border-radius:10px; font-size:.9rem; } .post__body .article-rank-table th, .post .article-rank-table th { position:sticky; top:0; background:color-mix(in srgb, var(--surface, #fff) 88%, #eef4ff); font-weight:650; } .post__body .article-rank-table th, .post__body .article-rank-table td, .post .article-rank-table th, .post .article-rank-table td { min-width:0 !important; padding:.72rem .8rem !important; border-width:0 0 1px !important; vertical-align:middle; line-height:1.45; } .post__body .article-rank-table tr:last-child td, .post .article-rank-table tr:last-child td { border-bottom:0 !important; } .post__body .article-rank-table tr:nth-child(even) td, .post .article-rank-table tr:nth-child(even) td { background:color-mix(in srgb, var(--surface, #fff) 97%, var(--ink, #111)); } @media(max-width:700px){.post__body .article-rank-table,.post .article-rank-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;font-size:.82rem}.post__body .article-rank-table th,.post__body .article-rank-table td,.post .article-rank-table th,.post .article-rank-table td{white-space:nowrap;padding:.62rem .68rem!important}}/* Editorial ranking table: compact full-grid layout, matching the reference table. */
.post__body .article-rank-table,
.post .article-rank-table {
  display: table;
  width: 100% !important;
  min-width: 46rem !important;
  margin: 1.25rem 0;
  overflow: visible;
  border: 1px solid #dfe1e5;
  border-collapse: collapse;
  border-spacing: 0;
  border-radius: 0;
  background: #fff;
  color: #343a40;
  font-size: .92rem;
  table-layout: fixed;
}
.post__body .article-rank-table th,
.post__body .article-rank-table td,
.post .article-rank-table th,
.post .article-rank-table td {
  min-width: 0 !important;
  padding: .74rem .9rem !important;
  border: 1px solid #dfe1e5 !important;
  vertical-align: middle;
  line-height: 1.55;
  text-align: left;
  white-space: normal;
  overflow-wrap: anywhere;
}
.post__body .article-rank-table th,
.post .article-rank-table th {
  position: static;
  background: #f5f5f6;
  color: #535b65;
  font-weight: 650;
  text-align: center;
}
.post__body .article-rank-table tbody tr:nth-child(even) td,
.post .article-rank-table tbody tr:nth-child(even) td { background: #fafafa; }
.post__body .article-rank-table tbody tr:hover td,
.post .article-rank-table tbody tr:hover td { background: #f4f7fb; }
.post__body .article-rank-table th:nth-child(1), .post .article-rank-table th:nth-child(1) { width: 13%; }
.post__body .article-rank-table th:nth-child(2), .post .article-rank-table th:nth-child(2) { width: 21%; }
.post__body .article-rank-table th:nth-child(3), .post .article-rank-table th:nth-child(3) { width: 13%; }
.post__body .article-rank-table th:nth-child(4), .post .article-rank-table th:nth-child(4) { width: 19%; }
.post__body .article-rank-table th:nth-child(5), .post .article-rank-table th:nth-child(5) { width: 18%; }
.post__body .article-rank-table th:nth-child(6), .post .article-rank-table th:nth-child(6) { width: 16%; }
.post__body .article-rank-table a,
.post .article-rank-table a { color: #3d5afe; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 700px) {
  .post__body .article-rank-table,
  .post .article-rank-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; font-size: .84rem; }
  .post__body .article-rank-table th,
  .post__body .article-rank-table td,
  .post .article-rank-table th,
  .post .article-rank-table td { padding: .62rem .7rem !important; }
}

.post__body .article-plan-table,.post .article-plan-table{width:100%;margin:1rem 0 1.35rem;border-collapse:collapse;border:1px solid #dfe1e5;background:#fff;color:#343a40;font-size:.9rem}.post__body .article-plan-table th,.post__body .article-plan-table td,.post .article-plan-table th,.post .article-plan-table td{padding:.7rem .78rem;border:1px solid #dfe1e5;vertical-align:middle;line-height:1.5;text-align:left;overflow-wrap:anywhere}.post__body .article-plan-table th,.post .article-plan-table th{background:#f5f5f6;color:#535b65;font-weight:650;text-align:center;white-space:nowrap}.post__body .article-plan-table tbody tr:nth-child(even) td,.post .article-plan-table tbody tr:nth-child(even) td{background:#fafafa}.post__body .article-plan-table a,.post .article-plan-table a{color:#3d5afe;text-decoration:underline;text-underline-offset:2px}@media(max-width:700px){.post__body .article-plan-table,.post .article-plan-table{display:block;overflow-x:auto;min-width:42rem;font-size:.83rem}.post__body .article-plan-table th,.post__body .article-plan-table td,.post .article-plan-table th,.post .article-plan-table td{padding:.6rem .65rem;white-space:nowrap}}/* The global article table rule uses display:block; restore table layout here so no empty grid area remains. */
.post__body .article-plan-table,
.post .article-plan-table { display: table !important; table-layout: fixed !important; }
.post__body .article-plan-table thead,
.post .article-plan-table thead { display: table-header-group !important; }
.post__body .article-plan-table tbody,
.post .article-plan-table tbody { display: table-row-group !important; }
.post__body .article-plan-table tr,
.post .article-plan-table tr { display: table-row !important; }
.post__body .article-plan-table th,
.post__body .article-plan-table td,
.post .article-plan-table th,
.post .article-plan-table td { display: table-cell !important; }
@media (max-width: 700px) {
  .post__body .article-plan-table,
  .post .article-plan-table { display: block !important; table-layout: auto !important; }
}

.post__body .article-major-heading,.post .article-major-heading{font-size:16px!important;line-height:28px!important;font-weight:600!important;letter-spacing:0!important}.post__body summary.article-major-heading,.post summary.article-major-heading{padding-block:16px!important}.post__body a.article-major-heading,.post .article-major-heading a{color:inherit!important;text-decoration:none!important}
.post__body h3.service-description,.post h3.service-description{font-size:16px!important;line-height:28px!important;font-weight:400!important;letter-spacing:0!important;margin:16px 0!important}.post__body h3.service-description *,.post h3.service-description *{font-size:inherit!important;line-height:inherit!important}.post__body h3.service-description strong,.post h3.service-description strong{font-weight:600!important}/* Normalize legacy editor spans inside service descriptions; retain only intentional emphasis. */
.post__body h3.service-description span,
.post .post-content h3.service-description span,
.post h3.service-description span {
  font-size: 16px !important;
  line-height: 28px !important;
  font-family: inherit !important;
}
.post__body h3.service-description span[style*='font-weight'],
.post .post-content h3.service-description span[style*='font-weight'],
.post h3.service-description span[style*='font-weight'] { font-weight: 600 !important; }

.post__body .article-seo-section,.post .article-seo-section{font-size:16px;line-height:28px;color:rgb(60,60,67)}.post__body .article-seo-section p,.post .article-seo-section p{font-size:16px!important;line-height:28px!important;margin:16px 0}.post__body .article-seo-section ul,.post__body .article-seo-section ol,.post .article-seo-section ul,.post .article-seo-section ol{font-size:16px!important;line-height:28px!important;margin:12px 0 16px;padding-left:1.25rem}.post__body .article-seo-section li,.post .article-seo-section li{margin:6px 0}.post__body h3.article-section-subheading,.post h3.article-section-subheading{font-size:16px!important;line-height:28px!important;font-weight:600!important;letter-spacing:0!important;margin:20px 0 8px!important;padding:0!important;border:0!important;color:rgb(60,60,67)}
.post__body p.service-description,.post p.service-description{font-size:16px!important;line-height:28px!important;font-weight:400!important;letter-spacing:0!important;margin:16px 0!important}.post__body p.service-description *,.post p.service-description *{font-size:inherit!important;line-height:inherit!important}.post__body p.service-description strong,.post p.service-description strong{font-weight:600!important}.post__body p.service-description span,.post .post-content p.service-description span,.post p.service-description span{font-size:16px!important;line-height:28px!important;font-family:inherit!important}.post__body p.service-description span[style*='font-weight'],.post .post-content p.service-description span[style*='font-weight'],.post p.service-description span[style*='font-weight']{font-weight:600!important}
/* Unified article rail: ToC and popular posts share a single calm card. */
.article-detail-rail__panel{overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow-sm)}
.article-detail-rail__panel .article-detail-rail__toc .toc{margin:0;padding:1rem 1.15rem;background:transparent;border:0;border-radius:0;box-shadow:none}
.article-detail-rail__panel .article-detail-rail__popular{margin:.15rem 1.15rem 0!important;padding:.95rem 0 1.05rem!important;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.article-detail-rail__panel .article-detail-rail__popular .side-card__title{margin-bottom:.45rem;padding-bottom:.62rem}
@media(max-width:60rem){.article-detail-rail__panel{margin:0}.article-detail-rail__panel .article-detail-rail__toc .toc{padding:1rem}.article-detail-rail__panel .article-detail-rail__popular{margin:.15rem 1rem 0!important}}
/* Minimal editorial article rail: an outline-like ToC and a separated popular list. */
.article-detail-rail__panel{overflow:visible;background:transparent;border:0;border-radius:0;box-shadow:none}
.article-detail-rail__panel .article-detail-rail__toc{border-left:1px solid var(--line);padding-left:1rem}
.article-detail-rail__panel .article-detail-rail__toc .toc{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.article-detail-rail__panel .toc__list{margin:0;gap:.46rem}
.article-detail-rail__panel .toc__item a{display:block;color:var(--ink-soft);font-size:.86rem;line-height:1.55}
.article-detail-rail__panel .toc__item--h3{padding-left:.2rem}
.article-detail-rail__panel .article-detail-rail__popular{margin:2rem 0 0!important;padding:1.25rem 0 0!important;background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;box-shadow:none}
.article-detail-rail__panel .article-detail-rail__popular .side-card__title{font-size:.95rem;font-weight:650;margin:0 0 .65rem;padding:0;color:var(--ink)}
.article-detail-rail__panel .side-rank li{min-height:2.18rem;gap:.4rem}
.article-detail-rail__panel .side-rank a{font-size:.84rem}
@media(min-width:60.0625rem){.article-detail-rail__panel .toc__head{display:none}}
@media(max-width:60rem){.article-detail-rail__panel .article-detail-rail__toc{padding-left:.9rem}.article-detail-rail__panel .article-detail-rail__toc .toc{padding:0}.article-detail-rail__panel .article-detail-rail__popular{margin:1.5rem 0 0!important;padding-top:1rem!important}}
/* Editorial article detail layout: original reading-focused treatment, scoped to post detail. */
.post-detail{max-width:69rem}
.post-detail .article-detail-layout{grid-template-columns:minmax(0,44rem) minmax(12.5rem,14rem);gap:clamp(2.25rem,5vw,4rem);align-items:start}
.post-detail .article-detail-main .post{padding:0;background:transparent;border:0;border-radius:0;box-shadow:none}
.post-detail .article-detail-main .post__header{padding:0}
.post-detail .article-detail-main .post__title-row{margin:0 0 .8rem}
.post-detail .article-detail-main .post__title{font-size:clamp(1.5rem,1.2rem + 1.1vw,1.8rem);line-height:1.4;font-weight:700;letter-spacing:-.015em}
.post-detail .post__meta{gap:.45rem;color:var(--ink-faint);font-size:.86rem;line-height:1.5}
.post-detail .post__meta-tags .chip-list--tags{gap:.3rem}
.post-detail .post__header-divider{margin:1.1rem 0 1.35rem;border-top-color:var(--line)}
.post-detail .post__cover{margin:0}
.post-detail .post__cover img{border-radius:.45rem}
.post-detail .post__body{max-width:none;margin:1.55rem 0 0;font-size:1rem;line-height:1.75}
.post-detail .post__body>p{line-height:1.75}
.post-detail .post__body>p:first-child{margin-top:0}
.post-detail .post__body h2{font-size:1.48rem;line-height:1.42;margin-top:2.75rem;padding-top:1.55rem;border-top:1px solid var(--line);font-weight:700}
.post-detail .post__body h3{font-size:1.12rem;line-height:1.5;margin-top:1.85rem;font-weight:650}
.post-detail .post__body h2+h3{margin-top:1.25rem}
.post-detail .post__body p{margin:1.15rem 0}
.post-detail .post__body ul,.post-detail .post__body ol{margin:1.1rem 0;padding-left:1.45rem}
.post-detail .post__body li+li{margin-top:.42rem}
.post-detail .post__body a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:2px}
.post-detail .post__body table{font-size:.88rem;line-height:1.55;border-color:var(--line)}
.post-detail .post__body th{background:color-mix(in srgb,var(--surface) 75%,var(--ink-faint) 5%);font-weight:600}
.post-detail .post__body th,.post-detail .post__body td{border-color:var(--line);padding:.52rem .68rem}
.post-detail .post__body blockquote{border-radius:0 .35rem .35rem 0}
.post-detail .article-adjacent{margin-top:2.5rem}
@media(max-width:60rem){.post-detail{max-width:none}.post-detail .article-detail-layout{display:block}.post-detail .article-detail-main .post{padding:0}.post-detail .post__title{font-size:clamp(1.4rem,5.6vw,1.7rem)}.post-detail .post__body{margin-top:1.3rem}.post-detail .post__body h2{margin-top:2.25rem;padding-top:1.25rem}.post-detail .article-detail-rail{margin-top:2rem}}
/* Keep legacy article headings in the same editorial flow instead of old white strips. */
.post-detail .post__body h2{background:transparent!important;box-shadow:none!important;border-radius:0!important}
/* Article reading refinement: one calm editorial rhythm for the active detail DOM. */
.post-detail .post__meta{column-gap:.5rem;row-gap:.35rem}
.post-detail .post__meta>[aria-hidden="true"]{color:var(--line);font-size:.8em}
/* Tags are supporting context, not a fifth piece of metadata that breaks mid-row. */
.post-detail .post__meta-tags{flex:0 1 auto;order:initial;padding-top:0}
.post-detail .post__meta-tags .chip-list--tags{gap:.32rem}
/* Sections should read as a continuous article, not stacked white blocks. */
.post-detail .post__body h2{border-top:0!important;padding-top:0!important;margin-top:2.6rem}
.post-detail .post__body h3{margin-top:1.65rem}
.post-detail .post__body h2+h3{margin-top:1.1rem}
/* The rail remains informational but deliberately quieter than the article. */
.post-detail .article-detail-rail__panel,
.post-detail .article-detail-rail__popular{background:transparent!important;border-radius:0!important;box-shadow:none!important}
.post-detail .article-detail-rail__popular{border-top:1px solid var(--line)!important;margin-top:2rem!important;padding-top:1rem!important}
/* Previous/next links stay easy to scan without reintroducing card visual weight. */
.post-detail .article-adjacent{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.5rem;margin-top:2.75rem;padding-top:1rem;border-top:1px solid var(--line)}
.post-detail .article-adjacent__card{min-width:0;padding:.45rem 0;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important}
.post-detail .article-adjacent__card--next{text-align:right;border-left:1px solid var(--line)!important;padding-left:1.5rem!important}
.post-detail .article-adjacent__card strong{display:block;margin-top:.25rem;line-height:1.55}
@media(max-width:60rem){
  .post-detail .post__meta-tags{flex-basis:auto;order:initial;padding-top:0}
  .post-detail .article-adjacent{display:block;margin-top:2rem}
  .post-detail .article-adjacent__card--next{margin-top:1rem;border-left:0!important;border-top:1px solid var(--line)!important;padding:1rem 0 0!important;text-align:left}
}
/* Scannable audience group: semantic list, quiet editorial treatment. */
.post-detail .article-reader-list{margin:1.35rem 0 1.6rem;padding:.1rem 0 .1rem 1rem;border-left:2px solid color-mix(in srgb,var(--accent) 68%,var(--line))}
.post-detail .article-reader-list__title{margin:0 0 .6rem;font-weight:600;color:var(--ink)}
.post-detail .article-reader-list ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem 1.4rem;margin:0;padding:0;list-style:none}
.post-detail .article-reader-list li{position:relative;margin:0;padding-left:1rem;line-height:1.7}
.post-detail .article-reader-list li::before{content:'•';position:absolute;left:0;color:var(--accent);font-weight:700}
@media(max-width:42rem){.post-detail .article-reader-list ul{grid-template-columns:1fr;gap:.35rem}}
/* Article detail grid balance: let the reading column use the existing frame. */
@media (min-width:60.0625rem){
  .post-detail .article-detail-layout{
    grid-template-columns:minmax(0,1fr) 14rem;
    gap:clamp(2rem,4vw,3rem);
  }
}
/* Article detail compact balance: fill the editorial frame without widening mobile reading. */
@media (min-width:60.0625rem){
  .post-detail{max-width:71rem}
  .post-detail .article-detail-layout{
    grid-template-columns:minmax(0,1fr) 12.75rem;
    gap:clamp(1.75rem,3vw,2.5rem);
  }
  .post-detail .post__body{margin-top:1.35rem}
  .post-detail .article-detail-rail__panel .toc__list{gap:.38rem}
}
/* Article TOC: the rail sticks; its links remain part of the page scroll. */
@media (min-width:60.0625rem){
  .post-detail .article-detail-rail{position:sticky;top:5rem;align-self:start}
  .post-detail .article-detail-rail__toc .toc{
    max-height:none!important;
    overflow:visible!important;
    overscroll-behavior:auto!important;
    scrollbar-gutter:auto!important;
  }
}
.post-detail .post__body :is(h2,h3)[id]{scroll-margin-top:6.5rem}
.post-detail .toc__item a[aria-current="location"]{color:var(--accent);background:rgba(36,115,190,.09);font-weight:600;text-decoration:none}
/* Release wheel scrolling from every desktop TOC wrapper. */
@media (min-width:60.0625rem){
  .post-detail .article-detail-rail,
  .post-detail .article-detail-rail__panel,
  .post-detail .article-detail-rail__toc,
  .post-detail .article-detail-rail__toc .toc{
    overflow:visible!important;
    overflow-y:visible!important;
    overscroll-behavior:auto!important;
  }
}
/* Desktop TOC: quick local scan; at either edge, wheel scrolling chains to the page. */
@media (min-width:60.0625rem){
  .post-detail .article-detail-rail,
  .post-detail .article-detail-rail__panel,
  .post-detail .article-detail-rail__toc{
    overflow:visible!important;
  }
  .post-detail .article-detail-rail__toc .toc{
    max-height:calc(100vh - 6.5rem)!important;
    overflow-y:auto!important;
    overscroll-behavior-y:auto!important;
    scrollbar-gutter:stable;
    -webkit-overflow-scrolling:touch;
  }
}
/* Article previous/next: clear paired navigation cards at the end of the reading flow. */
.post-detail .article-adjacent{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
  margin-top:3rem;
  padding-top:1.5rem;
  border-top:1px solid var(--line);
}
.post-detail .article-adjacent__card{
  min-width:0;
  min-height:5.35rem;
  padding:.82rem 1rem;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:.32rem;
  background:var(--surface)!important;
  border:1px solid color-mix(in srgb,var(--line) 88%,var(--ink-faint) 12%)!important;
  border-radius:.5rem!important;
  box-shadow:none!important;
  color:var(--ink);
  text-decoration:none;
  transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease;
}
.post-detail .article-adjacent__card--next{
  text-align:right;
  border-left:1px solid color-mix(in srgb,var(--line) 88%,var(--ink-faint) 12%)!important;
  padding-left:1rem!important;
}
.post-detail .article-adjacent__card span{
  font-size:.83rem;
  line-height:1.35;
  color:var(--ink-soft);
}
.post-detail .article-adjacent__card strong{
  display:block;
  margin:0;
  color:var(--accent);
  font-size:.92rem;
  line-height:1.55;
  font-weight:550;
  overflow-wrap:anywhere;
}
.post-detail .article-adjacent__card:hover,
.post-detail .article-adjacent__card:focus-visible{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--line))!important;
  box-shadow:0 7px 18px rgba(24,55,88,.09)!important;
  transform:translateY(-1px);
  text-decoration:none;
}
.post-detail .article-adjacent__card:focus-visible{outline:2px solid color-mix(in srgb,var(--accent) 52%,transparent);outline-offset:3px}
@media(max-width:60rem){
  .post-detail .article-adjacent{grid-template-columns:1fr;margin-top:2.25rem;padding-top:1.15rem;gap:.75rem}
  .post-detail .article-adjacent__card--next{margin-top:0;border-top:1px solid color-mix(in srgb,var(--line) 88%,var(--ink-faint) 12%)!important;text-align:left}
}
@media(prefers-reduced-motion:reduce){.post-detail .article-adjacent__card{transition:none}.post-detail .article-adjacent__card:hover,.post-detail .article-adjacent__card:focus-visible{transform:none}}

/* Airport-review entries share one quiet, recognizable TOC icon. */
.post-detail .toc__icon{display:inline-block;width:1.1em;margin-right:.22rem;line-height:1;text-align:center;font-size:.88em;vertical-align:.02em}

/* Home hero: allow a fuller body-derived opening excerpt without changing grid cards. */
.home-hero__summary{-webkit-line-clamp:7}
@media(max-width:42rem){.home-hero__summary{-webkit-line-clamp:5}}

/* Align the desktop homepage reading baseline with article-detail body content. */
@media(min-width:60.0625rem){.home-hero__main{padding-inline:1.4375rem}}

/* Homepage cards share the same desktop reading baseline as article content. */
@media(min-width:60.0625rem){.post-flow--home .post-row{padding-inline:1.4375rem}}

/* Emphasise only the Yunmoo brand word in the home navigation label. */
.primary-nav__list .nav-home-brand{font-weight:700;color:#111827}
:root[data-theme="dark"] .primary-nav__list .nav-home-brand{color:#f8fafc}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .primary-nav__list .nav-home-brand{color:#f8fafc}}

/* risk-records-table-20260720 */
/* Historical risk records table: compact full-grid reading layout. */
.post-detail .post__body .risk-status-guide {
  display: grid;
  gap: .52rem;
  margin: 1rem 0 1.25rem;
  padding-left: 1.15rem;
}
.post-detail .post__body .risk-status-guide li {
  display: flex;
  align-items: flex-start;
  gap: .62rem;
  margin: 0;
  line-height: 1.65;
}
.post-detail .post__body .risk-status {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 2.65rem;
  padding: .12rem .48rem;
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: nowrap;
}
.post-detail .post__body .risk-status--warning { background: #e4f4f7; color: #367d87; }
.post-detail .post__body .risk-status--high { background: #fff3dc; color: #97723c; }
.post-detail .post__body .risk-status--runaway { background: #fde9ee; color: #b34e66; }
.post-detail .post__body .table-scroll.risk-records-scroll { overflow-x: auto; }
.post-detail .post__body table.risk-records-table {
  display: table !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 1rem 0 1.35rem;
  border: 1px solid #dfe1e5;
  border-collapse: collapse;
  table-layout: fixed !important;
  background: #fff;
  color: #343a40;
  font-size: .88rem;
  line-height: 1.55;
}
.post-detail .post__body .risk-records-table th,
.post-detail .post__body .risk-records-table td {
  display: table-cell !important;
  min-width: 0 !important;
  padding: .68rem .72rem !important;
  border: 1px solid #dfe1e5 !important;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: break-word;
  text-align: left;
}
.post-detail .post__body .risk-records-table th {
  position: static;
  background: #f5f5f6;
  color: #535b65;
  font-weight: 650;
}
.post-detail .post__body .risk-records-table tbody tr:nth-child(even) td { background: #fafafa; }
.post-detail .post__body .risk-records-table tbody tr:hover td { background: #f4f7fb; }
.post-detail .post__body .risk-records-table th:nth-child(1) { width: 15%; }
.post-detail .post__body .risk-records-table th:nth-child(2) { width: 18%; }
.post-detail .post__body .risk-records-table th:nth-child(3) { width: 13%; }
.post-detail .post__body .risk-records-table th:nth-child(4) { width: 54%; }
.post-detail .post__body .risk-records-table td:nth-child(3) { text-align: center; vertical-align: middle; }
@media (max-width: 48rem) {
  .post-detail .post__body .table-scroll.risk-records-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .post-detail .post__body table.risk-records-table { min-width: 43rem !important; font-size: .83rem; }
  .post-detail .post__body .risk-records-table th,
  .post-detail .post__body .risk-records-table td { padding: .6rem .65rem !important; white-space: normal; }
  .post-detail .post__body .risk-status-guide li { gap: .5rem; }
}
/* risk-status-icons-20260720: visual cues retain text labels for accessibility. */
.post-detail .post__body .risk-status { min-width: 3.55rem; gap: .25rem; }
.post-detail .post__body .risk-status--warning::before { content: "\26A0\FE0F"; }
.post-detail .post__body .risk-status--high::before { content: "\1F6A8"; }
.post-detail .post__body .risk-status--runaway::before { content: "\26D4"; }

/* risk-observation-structure-20260720 */
/* risk-observation-structure-20260720: decision-first fields and same-page details. */
.post-detail .post__body .risk-records-table th:nth-child(1) { width: 13%; }
.post-detail .post__body .risk-records-table th:nth-child(2) { width: 20%; }
.post-detail .post__body .risk-records-table th:nth-child(3) { width: 13%; }
.post-detail .post__body .risk-records-table th:nth-child(4) { width: 38%; }
.post-detail .post__body .risk-records-table th:nth-child(5) { width: 16%; }
.post-detail .post__body .risk-records-table td:nth-child(5) { text-align: center; vertical-align: middle; }
.post-detail .post__body .risk-detail-link,
.post-detail .post__body .risk-observation__back {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  color: var(--accent);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.post-detail .post__body .risk-detail-link:hover,
.post-detail .post__body .risk-detail-link:focus-visible,
.post-detail .post__body .risk-observation__back:hover,
.post-detail .post__body .risk-observation__back:focus-visible { text-decoration: underline; text-underline-offset: .16em; }
.post-detail .risk-observations { margin-top: 2.6rem; scroll-margin-top: 5rem; }
.post-detail .risk-observations > h2 { margin-bottom: .7rem; }
.post-detail .risk-observations > p { margin-top: 0; color: var(--ink-soft); }
.post-detail .risk-observation-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; margin-top: 1.2rem; }
.post-detail .risk-observation {
  min-width: 0;
  padding: .9rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  scroll-margin-top: 5rem;
}
.post-detail .risk-observation__title { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; margin: 0 0 .72rem; line-height: 1.45; }
.post-detail .risk-observation__title > strong { font-size: .98rem; }
.post-detail .risk-observation__history { color: var(--ink-faint); font-size: .75rem; }
.post-detail .risk-observation__facts { display: grid; gap: .55rem; margin: 0; }
.post-detail .risk-observation__facts > div { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); gap: .55rem; }
.post-detail .risk-observation__facts dt { color: var(--ink-faint); font-size: .8rem; }
.post-detail .risk-observation__facts dd { margin: 0; overflow-wrap: anywhere; }
.post-detail .risk-observation__notice { margin: .75rem 0 .5rem !important; color: var(--ink-soft); font-size: .82rem; line-height: 1.55; }
.post-detail .risk-observation__back { font-size: .82rem; }
@media (max-width: 48rem) {
  .post-detail .post__body table.risk-records-table { min-width: 56rem !important; }
  .post-detail .risk-observation-list { grid-template-columns: 1fr; }
}

/* external-risk-source-note-20260720 */
/* external-risk-source-note-20260720: provenance for externally sourced historical leads. */
.post-detail .post__body .risk-source-note {
  margin: 1rem 0 1.15rem;
  padding: .7rem .82rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 55%, var(--line));
  background: color-mix(in srgb, var(--surface) 96%, var(--accent) 4%);
  color: var(--ink-soft);
  font-size: .84rem;
  line-height: 1.65;
}
.post-detail .post__body .risk-source-note p { margin: 0; }
.post-detail .post__body .risk-source-note a { color: var(--accent); text-underline-offset: .16em; }

/* toc-title-visible-20260720: right-rail section index heading. */
@media (min-width:60.0625rem){.article-detail-rail__panel .toc__head{display:flex}}

/* toc-title-size-20260720: keep the rail label quieter than its section links. */
.article-detail-rail__panel .toc__title{font-size:.78rem;font-weight:600;line-height:1.45}

/* BEGIN naiyun-standalone-article-css naiyun-standalone-history-20260720
 * Scoped styles for the standalone 奈云 history article body only.
 *
 * Everything is namespaced under `.naiyun-history-article` (the class wrapping
 * that one article's body) so it cannot touch the risk-summary table, the 25
 * other risk observations, or any other article. It reuses the site's existing
 * theme tokens (--line, --surface-2, --ink-faint, --radius-sm, --line-soft) so
 * it follows light/dark automatically without redefining any colours.
 *
 * This file is the single source of truth: the publish script reads it verbatim
 * and inserts it (markers included) where the old `.risk-observation--naiyun-
 * history` snippet used to live. Do not edit the BEGIN/END marker lines.
 */

/* Two responsive columns for the evidence figures; one column on narrow screens. */
.naiyun-history-article .naiyun-history-evidence {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

@media (max-width: 640px) {
  .naiyun-history-article .naiyun-history-evidence {
    grid-template-columns: 1fr;
  }
}

.naiyun-history-article .naiyun-history-evidence figure {
  margin: 0;
  border: 1px solid var(--line, #e5e7eb);
  border-radius: var(--radius-sm, 8px);
  overflow: hidden;
  background: var(--surface-2, #f7f9fa);
}

/* Images stay inside their column, never overflow, and are letterboxed rather
 * than cropped so a screenshot is never distorted or cut off. */
.naiyun-history-article .naiyun-history-evidence img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: 460px;
  object-fit: contain;
  background: var(--surface-2, #f7f9fa);
}

.naiyun-history-article .naiyun-history-evidence figcaption {
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--ink-faint, #6b7480);
  border-top: 1px solid var(--line-soft, #eef0f3);
}
/* END naiyun-standalone-article-css naiyun-standalone-history-20260720 */

/* BEGIN risk-library-css risk-library-20260720
 * Scoped styles for the airport historical-risk "case library" additions that
 * live ONLY inside Article 78 (slug jichang-paolu-huizong).
 *
 * Every selector is namespaced under a `risk-library-*` class or the
 * `.risk-observation__review` module class. Those class names exist only in
 * that one article body, so nothing here can reach the home page, tag pages,
 * search, other articles, or the standalone 奈云 article (which uses
 * `.naiyun-history-article` and has none of these classes).
 *
 * It reuses the site theme tokens (--surface-2, --line, --line-soft, --ink,
 * --ink-soft, --ink-faint, --radius-sm) so it follows light/dark automatically,
 * and adds only three LOW-SATURATION info-label tints (teal / amber / red) that
 * are themed the same way the site themes its own tokens: a light default,
 * dark under `@media (prefers-color-scheme: dark) :root:not([data-theme=light])`,
 * and an explicit `:root[data-theme=dark]` override.
 *
 * This file is the single source of truth: the publish script reads it verbatim
 * (BEGIN/END markers included) and appends it to the source and collected CSS.
 * Do not edit the BEGIN/END marker lines.
 */

/* --- Local low-saturation info-label tints (light default) ----------------- */
.risk-library-guide,
.risk-library-boundary,
.risk-library-evidence-note,
.risk-library-revisions,
.risk-observation__review {
  --rl-teal-bg: #e9f2f3;
  --rl-teal-ink: #2c6d74;
  --rl-teal-line: #c4dcdf;
  --rl-amber-bg: #f6efe0;
  --rl-amber-ink: #856521;
  --rl-amber-line: #e4d6ac;
  --rl-red-bg: #f4e8e6;
  --rl-red-ink: #97473f;
  --rl-red-line: #e3c7c2;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .risk-library-guide,
  :root:not([data-theme="light"]) .risk-library-boundary,
  :root:not([data-theme="light"]) .risk-library-evidence-note,
  :root:not([data-theme="light"]) .risk-library-revisions,
  :root:not([data-theme="light"]) .risk-observation__review {
    --rl-teal-bg: #172554;
    --rl-teal-ink: #93c5fd;
    --rl-teal-line: #1e3a8a;
    --rl-amber-bg: #322b17;
    --rl-amber-ink: #d6b665;
    --rl-amber-line: #493d1e;
    --rl-red-bg: #341f1d;
    --rl-red-ink: #d99a92;
    --rl-red-line: #4a2c29;
  }
}
:root[data-theme="dark"] .risk-library-guide,
:root[data-theme="dark"] .risk-library-boundary,
:root[data-theme="dark"] .risk-library-evidence-note,
:root[data-theme="dark"] .risk-library-revisions,
:root[data-theme="dark"] .risk-observation__review {
  --rl-teal-bg: #172554;
  --rl-teal-ink: #93c5fd;
  --rl-teal-line: #1e3a8a;
  --rl-amber-bg: #322b17;
  --rl-amber-ink: #d6b665;
  --rl-amber-line: #493d1e;
  --rl-red-bg: #341f1d;
  --rl-red-ink: #d99a92;
  --rl-red-line: #4a2c29;
}

/* --- Guide / boundary / revision blocks (shared shell) --------------------- */
.risk-library-guide,
.risk-library-boundary,
.risk-library-revisions {
  margin: 1.75rem 0;
}
.risk-library-guide > p,
.risk-library-boundary > p,
.risk-library-revisions > p {
  color: var(--ink-soft);
}
.risk-library-layers,
.risk-library-boundary__list {
  margin: 1rem 0;
  padding: 0;
}
.risk-library-layers {
  display: grid;
  gap: .6rem;
}
.risk-library-layers > div {
  border: 1px solid var(--line);
  border-left: 3px solid var(--rl-teal-line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2, #f7f9fa);
  padding: .6rem .8rem;
}
.risk-library-layers dt {
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .15rem;
}
.risk-library-layers dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: .95rem;
  line-height: 1.7;
}

/* --- Verification-order flow chart (original inline SVG) -------------------- */
.risk-library-flow {
  margin: 1.25rem 0 0;
}
.risk-library-flow__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2, #f7f9fa);
  padding: .9rem;
}
.risk-library-flow svg {
  display: block;
  width: 100%;
  min-width: 620px;
  height: auto;
}
.risk-library-flow .rl-flow-node {
  fill: var(--surface, #fff);
  stroke: var(--rl-teal-line);
  stroke-width: 1.2;
}
.risk-library-flow .rl-flow-node--end {
  fill: var(--rl-amber-bg);
  stroke: var(--rl-amber-line);
}
.risk-library-flow .rl-flow-text {
  fill: var(--ink-soft, #3b4453);
  font-size: 13px;
  font-family: inherit;
}
.risk-library-flow .rl-flow-arrow {
  stroke: var(--ink-faint, #6b7480);
  stroke-width: 1.4;
  fill: none;
}
.risk-library-flow .rl-flow-arrow-head {
  fill: var(--ink-faint, #6b7480);
}
.risk-library-flow figcaption {
  margin-top: .5rem;
  font-size: .82rem;
  color: var(--ink-faint, #6b7480);
  line-height: 1.6;
}

/* --- Evidence-status note (non-heading aside) ------------------------------ */
.risk-library-evidence-note {
  margin: 1.5rem 0;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface-2, #f7f9fa);
  padding: .9rem 1rem;
}
.risk-library-note__label,
.rl-mod__label {
  margin: 0 0 .4rem;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .02em;
  color: var(--ink-faint, #6b7480);
  text-transform: none;
}
.risk-library-evidence-note ul {
  margin: .3rem 0 0;
  padding-left: 1.15rem;
}
.risk-library-evidence-note li {
  color: var(--ink-soft);
  line-height: 1.7;
  margin: .2rem 0;
}

/* --- Per-card review modules (inside each .risk-observation) ---------------- */
.risk-observation__review {
  margin: 1rem 0 0;
  padding-top: .85rem;
  border-top: 1px dashed var(--line-soft, #eef0f3);
  display: grid;
  gap: .75rem;
}
@media (min-width: 720px) {
  .risk-observation__review {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.risk-observation__review .rl-mod {
  min-width: 0;
}
.risk-observation__review p,
.risk-observation__review li {
  font-size: .92rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* Dimension chips */
.rl-chips {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.rl-chip {
  display: inline-flex;
  align-items: center;
  padding: .12rem .55rem;
  font-size: .78rem;
  line-height: 1.5;
  border-radius: 999px;
  color: var(--rl-teal-ink);
  background: var(--rl-teal-bg);
  border: 1px solid var(--rl-teal-line);
}

/* Material-status pill */
.rl-status {
  display: inline-flex;
  align-items: center;
  padding: .18rem .6rem;
  border-radius: var(--radius-sm, 8px);
  font-size: .85rem;
  font-weight: 500;
}
.rl-status--third {
  color: var(--rl-red-ink);
  background: var(--rl-red-bg);
  border: 1px solid var(--rl-red-line);
}
.rl-status--record {
  color: var(--rl-amber-ink);
  background: var(--rl-amber-bg);
  border: 1px solid var(--rl-amber-line);
}
.rl-status__note {
  display: block;
  margin-top: .35rem;
  font-size: .82rem;
  color: var(--ink-faint, #6b7480);
}

/* Review steps + interpretation boundary */
.rl-steps {
  margin: 0;
  padding-left: 1.15rem;
}
.rl-steps li {
  margin: .2rem 0;
}
.rl-boundary {
  margin: 0;
  color: var(--ink-faint, #6b7480);
}

/* --- No required motion: keep it inert under reduced-motion ----------------- */
@media (prefers-reduced-motion: reduce) {
  .risk-library-guide,
  .risk-library-boundary,
  .risk-library-evidence-note,
  .risk-library-revisions,
  .risk-library-flow,
  .risk-observation__review,
  .risk-library-flow *,
  .risk-observation__review * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}
/* END risk-library-css risk-library-20260720 */
/* Desktop article ToC: keep a calm breath between the visible title and its first entry. */
@media (min-width: 60.0625rem){
  .post-detail .article-detail-rail__panel .toc__list{
    margin-top:.7rem;
    gap:.5rem;
  }
}
/* -------------------------------------------------------------------------
   Article #152 — 奈云历史风险资料 (slug naiyun-lishi-fengxian-ziliao-2026)
   Scoped, article-only reading polish. EVERY rule below is nested under
   `.naiyun-history-article`, the wrapper carried by that one article's stored
   body (also tagged data-history-revision). Nothing here leaks to other
   articles, the nav, the sidebar, the TOC or the theme. Built only from the
   local design tokens above — no external assets, no !important, no changes to
   the article body/DOM. The image lightbox still works: JS marks every
   `.post__body img` (incl. the evidence figures) as a zoom trigger, and these
   rules never block pointer events on those images.
   ------------------------------------------------------------------------- */
.naiyun-history-article {
  /* Restrained amber, scoped locally so it never touches the global palette.
     Ink chosen for AA contrast on the soft amber surface. */
  --nh-amber-bg: #fdf6e8;
  --nh-amber-border: #e3c477;
  --nh-amber-ink: #6f4c14;
  --nh-amber-accent: #8a5a12;
  --nh-rule: var(--line);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .naiyun-history-article {
    --nh-amber-bg: #2a2110;
    --nh-amber-border: #5c4713;
    --nh-amber-ink: #e9d2a3;
    --nh-amber-accent: #f2d79a;
  }
}
:root[data-theme="dark"] .naiyun-history-article {
  --nh-amber-bg: #2a2110;
  --nh-amber-border: #5c4713;
  --nh-amber-ink: #e9d2a3;
  --nh-amber-accent: #f2d79a;
}

/* Reading hierarchy: H2 gets a calm left accent bar (section landmark), H3
   sits tighter as a scannable sub-head. No heavy dividers or shadows. */
.naiyun-history-article h2 {
  padding-left: .85rem;
  border-left: 3px solid var(--accent);
  line-height: 1.35;
}
.naiyun-history-article h3 {
  margin-top: 1.6rem;
  font-size: 1.12rem;
  line-height: 1.4;
}
.naiyun-history-article ul,
.naiyun-history-article ol { padding-left: 1.35rem; }
.naiyun-history-article li { line-height: 1.7; }
.naiyun-history-article li + li { margin-top: .45rem; }
.naiyun-history-article li strong { color: var(--ink); }

/* Backlinks to the risk summary: quiet, self-evidently a return link. */
.naiyun-history-article .article-backlink { font-size: .9rem; margin: .25rem 0; }
.naiyun-history-article .article-backlink a {
  color: var(--accent-strong);
  text-decoration: none;
  transition: color .15s ease;
}
.naiyun-history-article .article-backlink a:hover { text-decoration: underline; }

/* Amber risk-advisory card — mature, low-key: soft fill, thin border, a slightly
   heavier left edge for emphasis without a loud banner. Inert on revisions of
   the body that carry no .history-warning element. */
.naiyun-history-article .history-warning {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--nh-amber-bg);
  border: 1px solid var(--nh-amber-border);
  border-left-width: 4px;
  border-radius: var(--radius-sm);
  color: var(--nh-amber-ink);
}
.naiyun-history-article .history-warning > :first-child { margin-top: 0; }
.naiyun-history-article .history-warning > :last-child { margin-bottom: 0; }
.naiyun-history-article .history-warning strong,
.naiyun-history-article .history-warning b { color: var(--nh-amber-accent); }

/* Timeline: a single quiet vertical rule with a node per entry. Dates lead in
   the accent; descriptions read as calm secondary text. No animation. */
.naiyun-history-article .naiyun-timeline {
  margin: 1.5rem 0;
  padding-left: 1.35rem;
  border-left: 2px solid var(--nh-rule);
  display: grid;
  gap: 1.15rem;
}
.naiyun-history-article .naiyun-timeline > div { position: relative; }
.naiyun-history-article .naiyun-timeline > div::before {
  content: "";
  position: absolute;
  left: calc(-1.35rem - 5px);
  top: .5rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--bg);
}
.naiyun-history-article .naiyun-timeline dt {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: .95rem;
  color: var(--accent-strong);
}
.naiyun-history-article .naiyun-timeline dd {
  margin: .25rem 0 0;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* Evidence figures: strictly single column, full-width, never cropped. Unified
   rounded corners, a hairline border and a faint fill so screenshots of varying
   sizes read as one consistent set. width:100%/height:auto guarantees no mobile
   horizontal overflow. */
.naiyun-history-article .naiyun-history-evidence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin: 1.5rem 0;
}
.naiyun-history-article .naiyun-history-evidence figure { margin: 0; }
.naiyun-history-article .naiyun-history-evidence img {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface-2);
}
.naiyun-history-article .naiyun-history-evidence figcaption {
  margin-top: .6rem;
  font-size: .85rem;
  line-height: 1.6;
  color: var(--ink-faint);
}

/* Closing update note: muted, set off by a soft top rule. */
.naiyun-history-article .history-update-note {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line-soft);
  font-size: .88rem;
  line-height: 1.7;
  color: var(--ink-faint);
}

/* Honor reduced-motion: drop the only transitions this scope introduces. */
@media (prefers-reduced-motion: reduce) {
  .naiyun-history-article .article-backlink a { transition: none; }
}

/* Article #152 guide card: a calm blue reader aid distinct from the amber risk notice. */
.naiyun-history-article .history-guide {
  margin: 1.25rem 0 1.75rem;
  padding: 1rem 1.15rem;
  background: #edf3ff;
  border: 1px solid #cbdaf5;
  border-left: 4px solid #5b82b8;
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.naiyun-history-article .history-guide p { margin: .35rem 0; line-height: 1.7; }
.naiyun-history-article .history-guide__title { margin-top: 0; font-weight: 700; color: #315b94; }
.naiyun-history-article .history-guide__link a { font-weight: 600; text-decoration: underline; text-underline-offset: .14em; }
.naiyun-history-article .history-guide > :last-child { margin-bottom: 0; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .naiyun-history-article .history-guide { background: #172235; border-color: #30496e; border-left-color: #60a5fa; color: var(--ink-soft); }
  :root:not([data-theme="light"]) .naiyun-history-article .history-guide__title { color: #a9c8f0; }
}
:root[data-theme="dark"] .naiyun-history-article .history-guide { background: #172235; border-color: #30496e; border-left-color: #60a5fa; color: var(--ink-soft); }
:root[data-theme="dark"] .naiyun-history-article .history-guide__title { color: #a9c8f0; }

/* Article #152 guide card compact refinement: keep the referral useful without competing with the warning. */
.naiyun-history-article .history-guide { margin: .85rem 0 1.2rem; padding: .68rem .85rem; }
.naiyun-history-article .history-guide p { margin: .18rem 0; font-size: .9rem; line-height: 1.55; }
.naiyun-history-article .history-guide__title { font-size: .92rem; }
.naiyun-history-article .history-guide__link a { font-size: .92rem; }


/* Homepage-only historical-risk reminder: compact, calm, and evidence-bounded. */
.risk-card-notice {
  margin: .72rem 0 0;
  padding: .62rem .72rem;
  border: 1px solid #c7e4eb;
  border-radius: var(--radius-sm);
  background: #e9f7fa;
  color: #38515a;
  font-size: .82rem;
  line-height: 1.58;
}
.risk-card-notice p { margin: 0; }
.risk-card-notice__title {
  margin-bottom: .18rem !important;
  color: #255e6d;
  font-weight: 750;
}
.risk-card-notice a {
  margin-left: .25rem;
  color: #176a7c;
  font-weight: 650;
  text-decoration: underline;
  text-underline-offset: .14em;
}
.risk-card-notice a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (max-width: 40rem) { .risk-card-notice { padding: .58rem .64rem; font-size: .8rem; } }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .risk-card-notice { background: #172554; border-color: #1e40af; color: #dbeafe; }
  :root:not([data-theme="light"]) .risk-card-notice__title, :root:not([data-theme="light"]) .risk-card-notice a { color: #93c5fd; }
}
:root[data-theme="dark"] .risk-card-notice { background: #172554; border-color: #1e40af; color: #dbeafe; }
:root[data-theme="dark"] .risk-card-notice__title, :root[data-theme="dark"] .risk-card-notice a { color: #93c5fd; }
.article-content .history-warning,.article-content .risk-monitor-card{box-sizing:border-box}.article-content .history-warning{margin:1.2rem 0 0;padding:.8rem 1rem;border:1px solid #ead08a;border-left:3px solid #d6a62f;border-radius:8px 8px 0 0;background:#fffaf0;color:#76531d;line-height:1.65}.article-content .history-warning strong{color:#76531d;font-weight:650}.article-content .risk-monitor-card{margin:0 0 1.6rem;padding:.72rem 1rem .78rem;border:1px solid #dbeafe;border-top:0;border-radius:0 0 8px 8px;background:#eff6ff;color:#334e7d;line-height:1.65}.article-content .risk-monitor-card__title{margin:0 0 .12rem;color:#1d4ed8;font-weight:700;font-size:.93rem}.article-content .risk-monitor-card p{margin:.12rem 0 0;font-size:.92rem}.article-content .risk-monitor-card a{color:#2563eb;font-weight:700;text-decoration:none;border-bottom:1px solid #bfdbfe}.article-content .risk-monitor-card a:hover{color:#1e3a8a;border-bottom-color:currentColor}
/* Repair: monitor notice must remain a quiet companion panel, never a warning box. */
.article-content .risk-monitor-card{display:block !important;box-sizing:border-box !important;margin:0 0 1.6rem !important;padding:.72rem 1rem .78rem !important;border:1px solid #dbeafe !important;border-top:0 !important;border-radius:0 0 8px 8px !important;outline:0 !important;box-shadow:none !important;background:#eff6ff !important;color:#334e7d !important;line-height:1.65 !important}.article-content .risk-monitor-card__title{display:block !important;margin:0 0 .1rem !important;padding:0 !important;border:0 !important;background:transparent !important;color:#1d4ed8 !important;font-size:.92rem !important;font-weight:700 !important}.article-content .risk-monitor-card p{margin:.1rem 0 0 !important;padding:0 !important;border:0 !important;background:transparent !important;color:#334e7d !important;font-size:.92rem !important}.article-content .risk-monitor-card a{color:#2563eb !important;font-weight:700 !important;text-decoration:none !important;border-bottom:1px solid #bfdbfe !important}.article-content .risk-monitor-card a:hover{color:#1e3a8a !important;border-bottom-color:currentColor !important}
/* One quiet outer card keeps the paired notices visually contained. */
.article-content .risk-notice-stack{margin:1.2rem 0 1.6rem;border:1px solid #dce7eb;border-radius:10px;overflow:hidden;background:#fff;box-shadow:0 5px 16px rgba(35,74,92,.06)}
.article-content .risk-notice-stack .history-warning{margin:0 !important;border:0 !important;border-left:3px solid #d6a62f !important;border-radius:0 !important}
.article-content .risk-notice-stack .risk-monitor-card{margin:0 !important;border:0 !important;border-top:1px solid #d6e9f0 !important;border-radius:0 !important}
/* Restored monitor card: one contained, quiet blue reading aid. */
.article-content .risk-monitor-card{display:block !important;margin:1.1rem 0 1.6rem !important;padding:.72rem 1rem !important;border:1px solid #dbeafe !important;border-radius:8px !important;background:#eff6ff !important;color:#1e40af !important;box-shadow:none !important;line-height:1.65 !important}.article-content .risk-monitor-card__title{display:inline !important;margin:0 .45rem 0 0 !important;color:#1d4ed8 !important;font-size:.93rem !important;font-weight:700 !important}.article-content .risk-monitor-card p{display:inline !important;margin:0 !important;color:#334e7d !important;font-size:.92rem !important}.article-content .risk-monitor-card a{margin-left:.25rem;color:#2563eb !important;font-weight:700 !important;text-decoration:none !important;border-bottom:1px solid #bfdbfe !important}.article-content .risk-monitor-card a:hover{color:#1e3a8a !important;border-bottom-color:currentColor !important}@media(max-width:600px){.article-content .risk-monitor-card{padding:.68rem .8rem !important}.article-content .risk-monitor-card__title{display:block !important;margin:0 0 .2rem !important}.article-content .risk-monitor-card p{display:block !important}.article-content .risk-monitor-card a{margin-left:0}}
/* The article body does not use .article-content; keep this component globally scoped by its unique class. */
.risk-monitor-card{display:block !important;box-sizing:border-box !important;margin:1.1rem 0 1.6rem !important;padding:.72rem 1rem !important;border:1px solid #dbeafe !important;border-radius:8px !important;background:#eff6ff !important;color:#1e40af !important;box-shadow:none !important;line-height:1.65 !important}.risk-monitor-card__title{display:inline !important;margin:0 .45rem 0 0 !important;padding:0 !important;border:0 !important;background:transparent !important;color:#1d4ed8 !important;font-size:.93rem !important;font-weight:700 !important}.risk-monitor-card p{display:inline !important;margin:0 !important;padding:0 !important;border:0 !important;background:transparent !important;color:#334e7d !important;font-size:.92rem !important}.risk-monitor-card a{margin-left:.25rem;color:#2563eb !important;font-weight:700 !important;text-decoration:none !important;border-bottom:1px solid #bfdbfe !important}.risk-monitor-card a:hover{color:#1e3a8a !important;border-bottom-color:currentColor !important}@media(max-width:600px){.risk-monitor-card{padding:.68rem .8rem !important}.risk-monitor-card__title{display:block !important;margin:0 0 .2rem !important}.risk-monitor-card p{display:block !important}.risk-monitor-card a{margin-left:0 !important}}
.img-lightbox__dialog{max-width:calc(100vw - 2rem);max-height:calc(100vh - 2rem);box-sizing:border-box;overflow:auto}.img-lightbox__img{display:block;max-width:calc(100vw - 3rem)!important;max-height:calc(100vh - 3rem)!important;width:auto!important;height:auto!important;object-fit:contain!important;margin:auto}
.article-cta{margin:1.1rem 0 1.5rem}.article-cta .btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;padding:.66rem 1.05rem;border-radius:.6rem;background:linear-gradient(135deg,#2563eb,#3b82f6);box-shadow:0 6px 16px rgba(31,101,114,.16);font-weight:700;letter-spacing:.01em;line-height:1.25}.article-cta .btn:hover{transform:translateY(-1px);box-shadow:0 9px 20px rgba(31,101,114,.22)}
.article-cta .btn,.article-cta .btn:visited{color:#fff!important;-webkit-text-fill-color:#fff!important;text-decoration:none!important;text-shadow:0 1px 1px rgba(0,0,0,.16)}.article-cta .btn:hover,.article-cta .btn:focus{color:#fff!important;-webkit-text-fill-color:#fff!important}
.article-cta .btn,.article-cta .btn:visited{display:inline-flex!important;align-items:center!important;justify-content:center!important;background:#d97706!important;color:#fff!important;-webkit-text-fill-color:#fff!important;border:1px solid #b45309!important;min-width:9.4rem!important;padding:.7rem 1.15rem!important;border-radius:.65rem!important;font-weight:800!important;text-decoration:none!important;box-shadow:0 5px 14px rgba(180,83,9,.25)!important}.article-cta .btn:hover,.article-cta .btn:focus{background:#b45309!important;color:#fff!important;-webkit-text-fill-color:#fff!important}
.article-purchase-link,.article-purchase-link:visited{color:#2563eb!important;-webkit-text-fill-color:#2563eb!important;font-weight:700;text-decoration:none!important}.article-purchase-link:hover,.article-purchase-link:focus{color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important;text-decoration:underline!important;text-underline-offset:.18em}
:root{--theme-blue:#2563eb;--theme-blue-hover:#1d4ed8;--theme-blue-soft:#eff6ff;--theme-blue-border:#bfdbfe}.article-content a:not(.article-purchase-link),.post-content a{color:var(--theme-blue)}.article-content a:hover,.post-content a:hover{color:var(--theme-blue-hover)}
.post__body a,.post__body a:visited{color:#2563eb!important;-webkit-text-fill-color:#2563eb!important;text-decoration:none!important}.post__body a:hover,.post__body a:focus{color:#1d4ed8!important;-webkit-text-fill-color:#1d4ed8!important;text-decoration:underline!important;text-underline-offset:.18em}.post__body .article-purchase-link{color:#2563eb!important;-webkit-text-fill-color:#2563eb!important;font-weight:700!important}
/* Purchase-link typography intentionally matches the standard 前往官网 inline link. */.post__body .article-purchase-link,.post__body .article-purchase-link:visited{font-family:inherit!important;font-size:inherit!important;font-weight:inherit!important;line-height:inherit!important;letter-spacing:normal!important;text-transform:none!important;text-shadow:none!important}.post__body .article-purchase-link:hover,.post__body .article-purchase-link:focus{font-weight:inherit!important;line-height:inherit!important;letter-spacing:normal!important}

/* Listing rails match the homepage: remain in view on desktop, but naturally stop at the layout boundary. */
@media (min-width: 60.0625rem) {
  .layout > .layout__aside { position: sticky; top: 5rem; align-self: start; }
}

/* Unified article warning card: muted danger treatment, matching risk-summary warnings. */
.naiyun-history-article .history-warning {
  margin: 1.5rem 0;
  padding: 1.1rem 1.2rem;
  background: #fce4e7;
  border: 1px solid #f3c6cc;
  border-left: 4px solid #cf4a5a;
  border-radius: var(--radius-sm);
  color: #3f3033;
}
.naiyun-history-article .history-warning::before {
  content: "❌ 警告";
  display: block;
  margin: 0 0 .7rem;
  font-weight: 750;
  color: #8f2635;
}
.naiyun-history-article .history-warning strong,
.naiyun-history-article .history-warning b { color: #3f3033; }

/* Refined editorial notice cards: paired blue monitoring and red warning treatment. */
.naiyun-history-article .risk-monitor-card,
.naiyun-history-article .history-warning {
  margin: 1.35rem 0;
  padding: 1.35rem 1.45rem;
  border: 0;
  border-radius: 10px;
  box-sizing: border-box;
  line-height: 1.8;
  box-shadow: none;
}
.naiyun-history-article .risk-monitor-card {
  background: #e8efff;
  color: #303946;
}
.naiyun-history-article .risk-monitor-card::before {
  content: "💡 避坑提醒";
  display: block;
  margin-bottom: .8rem;
  color: #27323f;
  font-weight: 750;
}
.naiyun-history-article .risk-monitor-card p { margin: .55rem 0; }
.naiyun-history-article .risk-monitor-card strong { color: inherit; }
.naiyun-history-article .risk-monitor-card a { color: #285da8; text-decoration: underline; text-underline-offset: 2px; }
.naiyun-history-article .history-warning {
  background: #fee4e7;
  color: #332d30;
  border-left: 0;
}
.naiyun-history-article .history-warning::before {
  content: "❌ 警告";
  margin: 0 0 .8rem;
  color: #302a2d;
  font-weight: 750;
}
.naiyun-history-article .history-warning strong,
.naiyun-history-article .history-warning b { color: inherit; }
.naiyun-history-article .history-warning a { color: #a5303f; text-decoration: underline; text-underline-offset: 2px; }
@media (max-width: 640px) {
  .naiyun-history-article .risk-monitor-card,
  .naiyun-history-article .history-warning { padding: 1.1rem 1.15rem; border-radius: 8px; }
}

/* Compact notice-card typography and editorial line breaks. */
.naiyun-history-article .risk-monitor-card,
.naiyun-history-article .history-warning { padding: 1rem 1.15rem; font-size: .9rem; line-height: 1.65; }
.naiyun-history-article .risk-monitor-card::before,
.naiyun-history-article .history-warning::before { margin-bottom: .5rem; font-size: .96rem; line-height: 1.35; }
.naiyun-history-article .risk-monitor-card p { margin: .42rem 0; }
.naiyun-history-article .history-warning strong,
.naiyun-history-article .history-warning b { font-weight: 500; }
@media (max-width: 640px) { .naiyun-history-article .risk-monitor-card, .naiyun-history-article .history-warning { padding: .9rem 1rem; font-size: .88rem; } }

/* End-of-article internal recommendation tag. */
.article-related-tag{margin:2rem 0 .2rem}.article-related-tag a{display:inline-flex;align-items:center;padding:.38rem .72rem;border:1px solid #b9d7eb;border-radius:999px;background:#eef7fc;color:#176b9c;font-size:.88rem;font-weight:650;line-height:1;text-decoration:none;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.article-related-tag a:hover,.article-related-tag a:focus-visible{background:#dceffc;border-color:#74b9de;color:#0e527c}.article-related-tag a:focus-visible{outline:2px solid #5aaedb;outline-offset:2px}

/* Compact end-of-article airport directory, styled as a reading continuation. */
.article-airport-summary{margin:2.25rem 0 .25rem;padding-top:1.35rem;border-top:1px solid rgba(117,138,152,.24)}.article-airport-summary h2{margin:0 0 .72rem;font-size:1.18rem;line-height:1.35;font-weight:650;color:#27313a}.article-airport-summary p{margin:0}.article-airport-summary a{color:#477b94;font-size:.9rem;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}.article-airport-summary a:hover,.article-airport-summary a:focus-visible{color:#176b9c}.article-airport-summary a:focus-visible{outline:2px solid #5aaedb;outline-offset:3px;border-radius:2px}

/* Emphasize the article-end recommendation destination. */
.article-airport-summary a{font-size:1rem;font-weight:700;letter-spacing:.01em}

/* Scoped airport-review structure: comparison table, evidence and reader-first CTA. */
.airport-review-detail .article-cta{margin:1rem 0 1.65rem}.airport-review-detail .article-cta .btn{display:inline-flex;align-items:center;padding:.62rem 1rem;border-radius:8px}.airport-review-detail .table-scroll{margin:1rem 0 1.5rem;overflow-x:auto}.airport-review-detail .review-plan-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.92rem}.airport-review-detail .review-plan-table th,.airport-review-detail .review-plan-table td{padding:.78rem .82rem;border:1px solid #dce5ea;text-align:left;vertical-align:top}.airport-review-detail .review-plan-table th{background:#f0f5f8;color:#2b3b45;font-weight:700}.airport-review-detail .review-plan-table tbody tr:nth-child(even){background:#f9fbfc}.airport-review-detail .airport-review-evidence{margin:1rem 0 1.1rem}.airport-review-detail .airport-review-evidence img{display:block;width:100%;height:auto;border:1px solid #dbe6ed;border-radius:8px;background:#f7fafc}.airport-review-detail h2{scroll-margin-top:5rem}.airport-review-detail h3{margin-top:1.25rem;font-size:1rem}@media(max-width:640px){.airport-review-detail .review-plan-table{font-size:.86rem}.airport-review-detail .review-plan-table th,.airport-review-detail .review-plan-table td{padding:.64rem .66rem}}


/* button-color-system-20260721: primary actions use one restrained blue scale. */
:root{--button-blue:#2563eb;--button-blue-hover:#1d4ed8;--button-blue-border:#1d4ed8;--button-blue-shadow:rgba(37,99,235,.24)}
.btn,.search-form button,.article-cta .btn,.article-cta .btn:visited,.comment-form__submit{background:var(--button-blue)!important;border-color:var(--button-blue-border)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 5px 14px var(--button-blue-shadow)!important}
.btn:hover,.btn:focus,.search-form button:hover,.search-form button:focus,.article-cta .btn:hover,.article-cta .btn:focus,.comment-form__submit:hover,.comment-form__submit:focus{background:var(--button-blue-hover)!important;border-color:var(--button-blue-hover)!important;color:#fff!important;-webkit-text-fill-color:#fff!important;box-shadow:0 8px 18px rgba(29,78,216,.28)!important}
.article-backtop{--accent:var(--button-blue)}
:root[data-theme="dark"] .article-backtop{--accent:#60a5fa}
@media(prefers-reduced-motion:reduce){.btn,.search-form button,.article-cta .btn,.comment-form__submit{transition:none!important}}

/* software-menu-free-apple-id-one-line-20260721 */
@media (min-width: 480px) {
  .software-dropdown #software-menu { min-width: 10rem; }
  .software-dropdown #software-menu > li > a { white-space: nowrap; }
}
@media (max-width: 479px) {
  .software-dropdown #software-menu > li > a { white-space: nowrap; font-size: .875rem; }
}

/* software-menu-stacking-20260721 */
.site-header { z-index: 70; }
.software-dropdown #software-menu {
  z-index: 80;
  background: color-mix(in srgb, var(--surface) 98%, var(--bg));
}

/* software-menu-compact-spacing-20260721 */
.software-dropdown #software-menu { padding: .25rem; }
.software-dropdown #software-menu > li > a { gap: .42rem; padding: .34rem .5rem; }

/* software-menu-horizontal-fit-20260721 */
.software-dropdown #software-menu a[href="https://ccbaohe.com/appleID/"] { font-size: .875rem; }

/* post-contributor-footer-20260721: compact universal article update and contributor footer. */
.post-detail .post__contributor {
  margin: 2.25rem 0 1.5rem;
  padding: .85rem 0 1.05rem;
  border-bottom: 1px solid #e4e8ef;
  text-align: center;
  color: #7a828f;
  font-size: .78rem;
  line-height: 1.85;
}
.post-detail .post__contributor p { margin: 0; }
.post-detail .post__contributor span { color: #5d6571; }
:root[data-theme="dark"] .post-detail .post__contributor { border-color: rgba(148,163,184,.22); color: #9ba5b4; }
:root[data-theme="dark"] .post-detail .post__contributor span { color: #c1c9d4; }
@media (max-width: 42rem) { .post-detail .post__contributor { margin-top: 1.8rem; font-size: .75rem; } }

/* stats-source-rank-interaction-20260721: source rows intentionally share the page-ranking hover/focus affordance. */
.rank--sources .rank__link { color: inherit; text-decoration: none; }
.rank--sources .rank__link:hover { color: inherit; text-decoration: none; }
.rank--sources .rank__name { font-size: .9rem; font-weight: 600; line-height: 1.35; color: var(--ink); }
.rank--sources .rank__item {
  border-radius: var(--radius-sm); margin-inline: -.6rem; padding: .5rem .6rem;
  transition: background-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.rank--sources .rank__item:hover, .rank--sources .rank__item:focus-within {
  background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); transform: translateX(2px);
}
.rank--sources .rank__item:hover .rank__name, .rank--sources .rank__item:focus-within .rank__name { color: var(--accent); }
.rank--sources .rank__link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--radius-sm); }
@media (prefers-reduced-motion: reduce) { .rank--sources .rank__item { transition: background-color .18s ease, box-shadow .18s ease; } .rank--sources .rank__item:hover, .rank--sources .rank__item:focus-within { transform: none; } }

/* sujie-review-blue-theme */
.sujie-review .history-warning { color: #163a63; background: #eff6ff; border-color: #93c5fd; box-shadow: none; }
.sujie-review h2 { color: #123e73; border-bottom: 1px solid #bfdbfe; padding-bottom: .48rem; }
.sujie-review table { border-color: #bfdbfe; }
.sujie-review th { color: #123e73; background: #eff6ff; }
.sujie-review td { border-color: #dbeafe; }
.sujie-review tr:nth-child(even) td { background: #f8fbff; }
.sujie-review .article-cta .btn { background: #1769aa; border-color: #1769aa; }
.sujie-review .article-cta .btn:hover { background: #12558b; border-color: #12558b; }

/* sujie-review-blue-table-cascade */
.sujie-review .table-scroll table thead th, .sujie-review table thead th { color: #123e73; background-color: #eff6ff !important; border-color: #bfdbfe !important; }
.sujie-review .table-scroll table tbody td, .sujie-review table tbody td { border-color: #dbeafe !important; }

/* bianjieyun-review-blue-theme */
.bianjieyun-review .history-warning { color: #163a63; background: #eff6ff; border-color: #93c5fd; box-shadow: none; }
.bianjieyun-review h2 { color: #123e73; border-bottom: 1px solid #bfdbfe; padding-bottom: .48rem; }
.bianjieyun-review table { border-color: #bfdbfe; }
.bianjieyun-review .table-scroll table thead th, .bianjieyun-review table thead th { color: #123e73; background-color: #eff6ff !important; border-color: #bfdbfe !important; }
.bianjieyun-review .table-scroll table tbody td, .bianjieyun-review table tbody td { border-color: #dbeafe !important; }
.bianjieyun-review .article-cta .btn { background: #1769aa; border-color: #1769aa; }
.bianjieyun-review .article-cta .btn:hover { background: #12558b; border-color: #12558b; }

/* category-tree-layout-20260722 */
/* /categories/: a compact folder → article tree. The page keeps the site's
   semantic links and existing focus style; lines use low-contrast tokens. */
.cat-tree { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 1.1rem 1.3rem 1.25rem; }
.cat-tree__title { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem; padding-bottom: .7rem; border-bottom: 1px solid var(--line-soft); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.cat-tree__title .ico, .cat-tree__folder .ico { color: var(--accent); }
.cat-tree__total { margin-left: auto; font-size: .8rem; font-weight: 400; color: var(--ink-faint); }
.cat-tree__root, .cat-tree__leaves { list-style: none; margin: 0; padding: 0; }
.cat-tree__branch + .cat-tree__branch { margin-top: .4rem; }
.cat-tree__folder { display: flex; align-items: center; gap: .5rem; padding: .38rem .55rem; border-radius: var(--radius-sm); color: var(--ink); font-weight: 600; }
.cat-tree__folder:hover, .cat-tree__folder:focus-visible { background: var(--accent-soft); color: var(--accent-strong); text-decoration: none; }
.cat-tree__name { min-width: 0; }
.cat-tree__count { flex: none; font-size: .78rem; font-weight: 400; color: var(--ink-faint); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 0 .55rem; line-height: 1.6; }
.cat-tree__leaves { margin: .1rem 0 .55rem; padding-left: 1.6rem; }
.cat-tree__leaf { position: relative; }
.cat-tree__leaf::after { content: ""; position: absolute; left: -.65rem; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.cat-tree__leaf:last-child::after { bottom: auto; height: .95em; }
.cat-tree__leaf::before { content: ""; position: absolute; left: -.65rem; top: .95em; width: .5rem; border-top: 1px solid var(--line); }
.cat-tree__doc { display: flex; align-items: flex-start; gap: .45rem; padding: .16rem .45rem; border-radius: var(--radius-sm); color: var(--ink-soft); font-size: .95rem; }
.cat-tree__doc:hover, .cat-tree__doc:focus-visible { background: var(--surface-2); color: var(--accent); text-decoration: none; }
.cat-tree__doc .ico { flex: none; color: var(--ink-faint); margin-top: .42em; }
.cat-tree__doc-title { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 40rem) { .cat-tree { padding: .9rem .85rem 1rem; } .cat-tree__leaves { padding-left: 1.25rem; } }
@media (prefers-reduced-motion: reduce) { .cat-tree__folder, .cat-tree__doc { transition: none; } }

/* category-tree-toggle-20260722 */
.cat-tree__toggle { display: inline-flex; align-items: center; justify-content: center; width: 1.65rem; height: 1.65rem; margin: -.2rem -.12rem -.2rem -.24rem; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--accent); cursor: pointer; }
.cat-tree__toggle:hover { background: var(--accent-soft); color: var(--accent-strong); }
.cat-tree__toggle .ico { width: 1em; height: 1em; }
.cat-tree__root[hidden] { display: none; }

/* category-tree-branch-disclosure-20260722 */
/* Each category is a native, initially-open disclosure. No JavaScript is
   required: mouse, keyboard and assistive technology all toggle its own list. */
.cat-tree__branch > details { margin: 0; }
.cat-tree__folder { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; }
.cat-tree__folder::-webkit-details-marker { display: none; }
.cat-tree__folder::marker { content: ""; }
.cat-tree__folder::after { content: "⌄"; margin-left: auto; color: var(--ink-faint); font-size: .9em; transition: transform .16s ease; }
.cat-tree__branch > details:not([open]) .cat-tree__folder::after { transform: rotate(-90deg); }
.cat-tree__branch > details:not([open]) .cat-tree__folder { color: var(--ink-soft); }
@media (prefers-reduced-motion: reduce) { .cat-tree__folder::after { transition: none; } }

/* category-tree-minimal-controls-20260722 */
/* Keep the native category disclosure clickable, but avoid a separate visible
   interaction glyph: the category row itself is the sole control. */
.cat-tree__folder::after { content: none; display: none; }

/* category-tree-rounded-labels-20260722 */
/* Keep article titles neutral; only the directory title and category rows gain
   a friendlier rounded, stronger hierarchy. */
.cat-tree__title,
.cat-tree__folder {
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Microsoft YaHei", sans-serif;
  font-weight: 700;
  letter-spacing: .018em;
}

/* yinyun-review-note-20260722 */
/* A normal review needs a neutral methodological note, not a risk warning. */
.post--review .review-note {
  margin: 1.5rem 0;
  padding: 1rem 1.15rem;
  background: var(--accent-soft);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
}
.post--review .review-note > :first-child { margin-top: 0; }
.post--review .review-note > :last-child { margin-bottom: 0; }
.post--review .review-note strong { color: var(--accent-strong); }

/* archive-title-density-20260722 */
/* Archive rows are compact scanning links: smaller than body copy, but stronger
   than surrounding metadata. */
.archive-item__title { font-size: .94rem; font-weight: 700; line-height: 1.55; }

/* global-type-refinement-20260722 */
/* System-only refinement: no font download or render-blocking request. Rounded
   Latin faces are used when present; Chinese falls through to PingFang/YaHei.
   The root rem scale makes the established typography ~5% more compact while
   keeping media-query breakpoints and code's monospace stack intact. */
:root {
  --font-display: "Punctuation SC", ui-rounded, "SF Pro Rounded", Inter, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
html { font-size: 100%; }
body {
  font-family: ui-rounded, "SF Pro Rounded", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* listing-meta-legibility-20260722 */
/* Listing-card metadata is a small but high-value scanning row. Lift it slightly
   above the new global scale without changing article body or detail metadata. */
.post-flow .a-meta { font-size: .86rem; }
.post-flow .meta-tag { font-size: .77rem; padding: .06rem .38rem; }
.post-flow .cat-chip { font-size: .83rem; padding: .13rem .58rem; }
@media (min-width: 48rem) {
  .home-hero .a-meta { font-size: .80rem; }
  .home-hero .meta-tag { font-size: .72rem; padding: .08rem .34rem; }
  .home-hero .cat-chip { font-size: .78rem; }
}

/* review-client-guides-20260722 */
/* Contextual, first-party guides for normal airport-review articles. The panel
   deliberately sits before the update/contributor footer so it is useful after
   the review conclusion without interrupting the article body or risk records. */
.review-client-guides {
  margin: 2rem 0 1.4rem;
  padding: 1rem 1.1rem;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line));
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
}
.review-client-guides h2 { margin: 0 0 .35rem; font-family: var(--font-display); font-size: 1rem; }
.review-client-guides p { margin: 0; color: var(--ink-soft); font-size: .88rem; line-height: 1.65; }
.review-client-guides ul { display: flex; flex-wrap: wrap; gap: .42rem .85rem; margin: .7rem 0 0; padding: 0; list-style: none; }
.review-client-guides li { margin: 0; }
.review-client-guides a { font-size: .86rem; font-weight: 600; }
@media (max-width: 40rem) {
  .review-client-guides { margin-top: 1.5rem; padding: .9rem 1rem; }
  .review-client-guides ul { display: grid; gap: .55rem; }
}

/* review-client-guides-distinct-20260722 */
/* Device tutorials must scan as four independent destinations, not one dense
   sentence. The grid/card treatment preserves the existing calm blue panel. */
.review-client-guides ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .6rem;
}
.review-client-guides li { min-width: 0; }
.review-client-guides a {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  min-height: 100%;
  padding: .72rem .8rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, var(--line));
  border-radius: .5rem;
  background: var(--surface);
  color: var(--ink);
  line-height: 1.45;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.review-client-guides a:hover,
.review-client-guides a:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 42%, var(--surface));
  color: var(--accent-strong);
  text-decoration: none;
  transform: translateY(-1px);
}
.review-client-guides__platform {
  flex: none;
  min-width: 5.1rem;
  color: var(--accent-strong);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.6;
}
@media (max-width: 40rem) {
  .review-client-guides ul { grid-template-columns: 1fr; gap: .5rem; }
  .review-client-guides a { padding: .68rem .72rem; }
}
@media (prefers-reduced-motion: reduce) {
  .review-client-guides a { transition: none; }
  .review-client-guides a:hover, .review-client-guides a:focus-visible { transform: none; }
}

/* review-client-guides-single-column-20260722 */
/* The tutorial destinations intentionally scan one per line; this leaves each
   platform and its guide title unmistakable at desktop and mobile widths. */
.review-client-guides ul { grid-template-columns: minmax(0, 1fr); }

/* today-review-recommendation-20260722 */
/* A calm internal-reading card for newly published airport reviews: contextual,
   visibly separate from commercial CTAs, and scoped to editorial body markup. */
.review-airport-recommendation {
  margin: 2rem 0;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  background: color-mix(in srgb, var(--accent-soft) 58%, var(--surface));
}
.post__body .review-airport-recommendation h2 { margin: 0 0 .35rem; padding: 0; font-size: 1rem; }
.post__body .review-airport-recommendation p { margin: 0; color: var(--ink-soft); font-size: .9rem; line-height: 1.7; }
.post__body .review-airport-recommendation a { font-weight: 700; }
@media (max-width: 40rem) {
  .review-airport-recommendation { margin: 1.5rem 0; padding: .9rem 1rem; }
}


/* home-card-meta-single-line-20260722 */
/* Homepage-only desktop metadata: keep one compact reading line after the 16px
   baseline restoration. These values were measured against every active home
   row; mobile retains its natural wrapping rule below this breakpoint. */
@media (min-width: 48rem) {
  .post-flow--home .post-row .a-meta {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: .80rem;
    gap: .10rem;
  }
  .post-flow--home .post-row .meta-tag {
    font-size: .72rem;
    padding: .08rem .34rem;
  }
  .post-flow--home .post-row .cat-chip {
    font-size: .78rem;
    padding: .13rem .58rem;
  }
  .post-flow--home .post-row .a-meta__item + .a-meta__item::before,
  .post-flow--home .post-row .cat-chip + .a-meta__item::before {
    margin-right: .10rem;
  }
}


/* Align featured-card metadata spacing with the compact home card row. */
@media (min-width: 48rem) {
  .post-flow--home .home-hero .a-meta { gap: .10rem; }
  .post-flow--home .home-hero .a-meta__item + .a-meta__item::before,
  .post-flow--home .home-hero .cat-chip + .a-meta__item::before { margin-right: .10rem; }
}


/* yunmoo-lightbox-native-resolution-20260723 */
/* Preserve every source pixel in image preview. The dialog itself scrolls so a
   tall or wide original remains fully reachable instead of being downscaled. */
.img-lightbox { padding: 1rem; overflow: auto; align-items: flex-start; }
.img-lightbox__dialog { width: 100%; height: 100%; max-width: none !important; max-height: none !important; display: block; overflow: auto !important; }
.img-lightbox__img { max-width: none !important; max-height: none !important; width: auto !important; height: auto !important; object-fit: initial !important; margin: 0 auto; }
.img-lightbox__close { position: fixed; top: 1rem; right: 1rem; transform: none; z-index: 1; }
@media (max-width: 640px) { .img-lightbox { padding: .65rem; } .img-lightbox__close { top: .65rem; right: .65rem; } }


/* sujie-inline-image-native-width-20260723 */
/* Do not upscale narrow source screenshots in the article flow: retain their
   intrinsic reading width and center them; they remain fluid on narrow screens. */
.post__body figure.naiyun-history-evidence > img[src*="/media/reviews/sujie/"] {
  display: block;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  margin-left: auto;
  margin-right: auto;
}


/* yunmoo-lightbox-contained-preview-20260723 */
/* Center a complete image inside a restrained preview card, matching the
   site preview treatment: the whole image remains visible without scrolling. */
.img-lightbox { padding: 1rem; overflow: hidden; align-items: center; justify-content: center; }
.img-lightbox__dialog { position: relative; width: auto; height: auto; max-width: calc(100vw - 2rem) !important; max-height: calc(100vh - 2rem) !important; display: flex; align-items: center; justify-content: center; overflow: hidden !important; }
.img-lightbox__img { display: block; max-width: calc(100vw - 3rem) !important; max-height: calc(100vh - 3rem) !important; width: auto !important; height: auto !important; object-fit: contain !important; margin: auto; }
.img-lightbox__close { position: absolute; top: -.5rem; right: -.5rem; transform: translate(50%, -50%); z-index: 1; }
@media (max-width: 640px) { .img-lightbox { padding: .65rem; } .img-lightbox__dialog { max-width: calc(100vw - 1.3rem) !important; max-height: calc(100vh - 1.3rem) !important; } .img-lightbox__img { max-width: calc(100vw - 2rem) !important; max-height: calc(100vh - 2rem) !important; } .img-lightbox__close { top: 0; right: 0; transform: none; } }

/* ==================== "本页内容" outline affordance (review-rhythm-20260723) ==================== */
/* Component-level polish for the shared TOC: hover and keyboard focus now share
   the same quiet tint the scroll-spy active state already uses, so pointer AND
   keyboard users get one visible affordance. Accent token only (theme-aware);
   no new motion, so reduced-motion needs no override. */
.post-detail .toc__item a:hover,
.post-detail .toc__item a:focus-visible {
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  text-decoration: none;
}

/* ==================== Airport-review reading rhythm (review-rhythm-20260723) ====================
   article_detail.html emits .post-detail--review / .post--review ONLY when the
   article's category slug is "airport-reviews" (a database fact — never derived
   from the title text). Every rule below sits under one of those hooks, so
   ordinary articles, listings and archive cards are untouched. The inner rules
   are additionally gated on the .article-section structure emitted by the
   review publish scripts, so review articles with bespoke bodies (e.g. the
   sujie / bianjieyun themes) keep their established styling. Original Yunmoo
   treatment: local tokens only, no external assets, no added motion. */

/* Opening review-boundary note (aside[role="note"]): a quiet bordered reading
   aid instead of an unstyled paragraph, so the article's evidence boundary is
   scannable before the verdict. */
.post--review .post__body .article-section > aside[role="note"] {
  margin: .25rem 0 0;
  padding: .9rem 1.05rem;
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  color: var(--ink-soft);
  font-size: .92rem;
  line-height: 1.7;
}
.post--review .post__body .article-section > aside[role="note"] > p { margin: 0; }

/* Section landmarks: each review section's H2 closes with a hairline rule so a
   reader skimming for one decision point finds section boundaries fast. */
.post--review .post__body .article-section > h2 {
  padding-bottom: .5rem;
  border-bottom: 1px solid var(--line);
}

/* Sub-heads (优点 / 不足 / 适合 / FAQ questions …): a short accent bar keys
   them as scannable entries without turning them into loud banners. */
.post--review .post__body .article-section h3 {
  padding-left: .75rem;
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, var(--line));
}

/* Data tables lead with their caption as a left-aligned label (default UA
   rendering centres it), matching the quiet metadata voice of the article. */
.post--review .post__body .article-section table caption {
  caption-side: top;
  text-align: left;
  padding: 0 0 .5rem;
  font-size: .85rem;
  font-weight: 600;
  color: var(--ink-faint);
}

/* Review outlines run long (15 sections): give the rail list a touch more
   breathing room, scoped so ordinary articles keep the tighter rhythm. */
.post-detail--review .toc__list { gap: .5rem; }

/* sujie dark table readability 20260724 */
:root[data-theme="dark"] .post--review .sujie-review .history-warning{color:#d9edf2!important;background:#172632!important;border-color:#2e6273!important}:root[data-theme="dark"] .post--review .sujie-review .history-warning strong,:root[data-theme="dark"] .post--review .sujie-review h2{color:#d8eef5!important}:root[data-theme="dark"] .post--review .sujie-review .table-scroll table thead th,:root[data-theme="dark"] .post--review .sujie-review table thead th{color:#d8eef5!important;background:#1b303d!important;border-color:#2e6273!important}:root[data-theme="dark"] .post--review .sujie-review .table-scroll table tbody td,:root[data-theme="dark"] .post--review .sujie-review table tbody td{color:var(--ink)!important;background:#161f28!important;border-color:var(--line)!important}:root[data-theme="dark"] .post--review .sujie-review .table-scroll table tbody tr:nth-child(even) td,:root[data-theme="dark"] .post--review .sujie-review table tbody tr:nth-child(even) td{background:#1d2732!important;color:var(--ink)!important}

/* article dark readability audit 20260724: Bianjie review + risk monitor cards */
:root[data-theme="dark"] .post--review .bianjieyun-review .history-warning{color:#d9edf2!important;background:#172632!important;border-color:#2e6273!important}:root[data-theme="dark"] .post--review .bianjieyun-review .history-warning strong,:root[data-theme="dark"] .post--review .bianjieyun-review h2{color:#d8eef5!important}:root[data-theme="dark"] .post--review .bianjieyun-review .table-scroll table thead th,:root[data-theme="dark"] .post--review .bianjieyun-review table thead th{color:#d8eef5!important;background:#1b303d!important;border-color:#2e6273!important}:root[data-theme="dark"] .post--review .bianjieyun-review .table-scroll table tbody td,:root[data-theme="dark"] .post--review .bianjieyun-review table tbody td{color:var(--ink)!important;background:#161f28!important;border-color:var(--line)!important}:root[data-theme="dark"] .post--review .bianjieyun-review .table-scroll table tbody tr:nth-child(even) td,:root[data-theme="dark"] .post--review .bianjieyun-review table tbody tr:nth-child(even) td{background:#1d2732!important;color:var(--ink)!important}:root[data-theme="dark"] .post__body .risk-monitor-card{background:#142b35!important;border-color:#285866!important;color:#c9dde2!important}:root[data-theme="dark"] .post__body .risk-monitor-card__title,:root[data-theme="dark"] .post__body .risk-monitor-card a{color:#91d8e5!important;border-color:#5b9baa!important}:root[data-theme="dark"] .post__body .risk-monitor-card p{color:#c9dde2!important}

/* dark-table-readability-audit-20260728: preserve contrast for every reader-authored data table. */
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table){
  color:#e8f0f4 !important;
  border-color:#3a5361 !important;
  background:#151e27 !important;
}
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table) :is(th,td){
  color:#e8f0f4 !important;
  border-color:#3a5361 !important;
  background:#151e27 !important;
}
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table) thead th{
  color:#e3f5fa !important;
  background:#1d3542 !important;
  border-color:#477083 !important;
}
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table) tbody tr:nth-child(even) td{
  color:#e8f0f4 !important;
  background:#1b2833 !important;
}
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table) tbody tr:hover td{
  color:#f5fbfd !important;
  background:#22333f !important;
}
:root[data-theme="dark"] .post__body :is(.review-plan-table,.article-plan-table,.article-rank-table,.risk-records-table) a:not(.btn){
  color:#9be4f2 !important;
}