
/* Chicken Temp Guide 设计画布样式：数值与 DESIGN.md 第 4 至 9 节一一对应 */
:root {
  --color-ground: #F5F2EC;
  --color-card: #FEFDFA;
  --color-sunken: #EDE9E1;
  --color-line: #DED8D0;
  --color-control: #867F76;
  --color-ink-900: #201B16;
  --color-ink-700: #47413C;
  --color-ink-500: #6A635D;
  --color-enamel-700: #183E76;
  --color-enamel-600: #295494;
  --color-enamel-100: #E2EEFF;
  --color-ember-700: #633000;
  --color-ember-600: #834100;
  --color-ember-100: #FBEAD4;
  --color-error-600: #AE2E27;
  --color-error-100: #FFEBE7;
  --color-meat: #ECDBC5;
  --color-meat-edge: #CEB196;
  --color-bone: #F8F7F2;

  --font-sans: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "Atkinson Hyperlegible Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;

  --text-display: clamp(2.25rem, 1.55rem + 2.4vw, 3.5rem);
  --text-h2: clamp(1.625rem, 1.37rem + 0.9vw, 2.125rem);
  --text-h3: 1.3125rem;
  --text-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-caption: 0.8125rem;
  --figure-hero: clamp(3.75rem, 2.9rem + 3.4vw, 5.5rem);
  --figure-sub: clamp(1.75rem, 1.45rem + 1.2vw, 2.5rem);
  --figure-input: 2.25rem;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --border-hair: 1px;
  --border-control: 1.5px;
  --border-state: 2px;
  --shadow-card: 0 1px 0 rgba(32, 27, 22, 0.05), 0 12px 32px -18px rgba(32, 27, 22, 0.28);
  --shadow-raised: 0 1px 0 rgba(32, 27, 22, 0.06), 0 24px 48px -28px rgba(32, 27, 22, 0.35);
  --dur-fast: 120ms;
  --dur-base: 180ms;
  --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1);

  --container: 73.75rem;
  --measure: 47.5rem;
  --rail: 15.5rem;
  --gutter: 20px;
}
@media (min-width: 640px) { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 48px; } }

/* 基础 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-ink-900);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.65;
}
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
p, li, dd { text-wrap: pretty; }
a { color: var(--color-enamel-600); text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-enamel-700); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-enamel-600); outline-offset: 3px; }
svg { display: block; }
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; }
.container { max-width: var(--container); margin: 0 auto; padding-inline: var(--gutter); }
.caption { font-size: var(--text-caption); line-height: 1.35; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-500); }
.h1 { font-size: var(--text-display); line-height: 1.04; font-weight: 800; letter-spacing: -0.022em; text-wrap: balance; }
.h2 { font-size: var(--text-h2); line-height: 1.15; font-weight: 800; letter-spacing: -0.012em; text-wrap: balance; }
.h3 { font-size: var(--text-h3); line-height: 1.3; font-weight: 700; }
.lead { font-size: var(--text-lead); line-height: 1.55; color: var(--color-ink-700); }
.small { font-size: var(--text-small); line-height: 1.5; }
.muted { color: var(--color-ink-500); }
.ext { display: inline-flex; align-items: baseline; gap: 3px; }
.ext svg { width: 13px; height: 13px; display: inline-block; align-self: center; }
.probe-mark { display: flex; align-items: center; width: 56px; margin-bottom: 4px; }
.probe-mark::before { content: ""; flex: 1; height: 2px; background: var(--color-ink-900); }
.probe-mark::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--color-ink-900); }
.placeholder { font-family: var(--font-mono); font-size: 0.9em; padding: 1px 6px; border: 1.5px dashed var(--color-control); border-radius: var(--radius-sm); background: var(--color-sunken); color: var(--color-ink-700); }

/* 跳转链接（聚焦态示意） */
.skip-link { position: absolute; left: 12px; top: -60px; padding: 10px 14px; background: var(--color-ink-900); color: var(--color-card); border-radius: var(--radius-md); font-weight: 700; }

/* 页头 */
.site-header { background: var(--color-ground); border-bottom: 1px solid var(--color-line); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 24px; min-height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 56px; color: var(--color-ink-900); text-decoration: none; font-size: 17px; font-weight: 800; letter-spacing: -0.01em; }
.brand:hover { color: var(--color-ink-900); }
.brand svg { width: 26px; height: 26px; }
.nav { display: flex; gap: 20px; }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--text-small); font-weight: 700; color: var(--color-ink-700); text-decoration: none; }
.nav a:hover { color: var(--color-ink-900); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav a[aria-current="page"] { color: var(--color-ink-900); text-decoration: underline; text-decoration-color: var(--color-enamel-600); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 479px) {
  .site-header__inner { flex-direction: column; align-items: stretch; }
  .nav { border-top: 1px solid var(--color-line); }
}

/* 首屏：标题区通栏；下方答案卡、工具卡、测温提示卡。lg 时提示卡放在答案卡下方 */
.hero { padding-block: 24px 56px; }
@media (min-width: 1024px) { .hero { padding-top: 32px; } }
.hero__head { display: flex; flex-direction: column; gap: 12px; margin-bottom: 24px; }
.hero__head .lead { max-width: 46rem; }
.hero__grid { display: grid; gap: 20px; }
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; grid-template-areas: "answer checker"; column-gap: 32px; row-gap: 20px; align-items: start; }
  .hero__grid > .answer { grid-area: answer; }
  .hero__grid > .checker { grid-area: checker; }
}
.review-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-500); }
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border: 1.5px dashed var(--color-control); border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-700); }
.pill--solid { border-style: solid; }

/* 答案卡 */
.answer { background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); overflow: hidden; }
.answer__body { display: flex; flex-direction: column; gap: 14px; padding: 20px; }
@media (min-width: 640px) { .answer__body { padding: 28px; } }
.answer__title { font-size: 17px; line-height: 1.35; font-weight: 700; color: var(--color-ink-700); }
.answer__figures { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; }
.fig-hero { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--figure-hero); line-height: 0.95; letter-spacing: -0.03em; color: var(--color-ink-900); }
.fig-sub { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-weight: 700; font-size: var(--figure-sub); line-height: 1; color: var(--color-ink-500); }
.fig-unit { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.01em; }
.answer__statement { font-size: var(--text-lead); line-height: 1.45; font-weight: 700; }
.answer__detail { color: var(--color-ink-700); }
.answer__rounding { font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-500); }
.disclaimer { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 14px 20px; background: var(--color-ground); border-top: 1px solid var(--color-line); font-size: var(--text-small); line-height: 1.5; font-weight: 700; }
@media (min-width: 640px) { .disclaimer { padding: 14px 28px; } }
.disclaimer svg { width: 20px; height: 20px; margin-top: 1px; }

/* 工具卡 */
.checker { display: flex; flex-direction: column; gap: 16px; padding: 16px; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); box-shadow: var(--shadow-raised); }
@media (min-width: 640px) { .checker { padding: 28px; } }
.checker__title { font-size: 1.625rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.012em; text-wrap: balance; }
.fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.legend { display: block; margin-bottom: 8px; padding: 0; }

/* 单位切换 */
.segmented { display: inline-grid; grid-template-columns: repeat(2, minmax(64px, auto)); padding: 3px; border: 1.5px solid var(--color-control); border-radius: var(--radius-md); background: var(--color-card); }
.segmented__opt { display: flex; align-items: center; justify-content: center; min-height: 55px; padding: 0 16px; border-radius: 7px; font-family: var(--font-mono); font-size: 17px; font-weight: 700; color: var(--color-ink-700); }
.segmented__opt.is-hover { background: var(--color-sunken); }
.segmented__opt.is-checked { background: var(--color-ink-900); color: var(--color-card); }
.is-focus-ring { outline: 3px solid var(--color-enamel-600); outline-offset: 2px; }

/* 部位按钮 */
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .chips { display: flex; flex-wrap: wrap; } }
.chip { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--color-line); border-radius: var(--radius-md); background: var(--color-card); font-size: 16px; font-weight: 700; line-height: 1.2; color: var(--color-ink-900); }
.chip__mark { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--color-ink-500); border-radius: 50%; color: var(--color-card); }
.chip__mark svg { width: 12px; height: 12px; }
.chip.is-hover { border-color: var(--color-ink-500); background: var(--color-ground); }
.chip.is-checked { padding: 0 13.5px; border: 2px solid var(--color-enamel-600); background: var(--color-enamel-100); color: var(--color-enamel-700); }
.chip.is-checked .chip__mark { border-color: var(--color-enamel-600); background: var(--color-enamel-600); }

/* 读数输入 */
.reading { display: flex; flex-direction: column; gap: 8px; }
.reading__label { font-size: var(--text-small); line-height: 1.4; font-weight: 700; color: var(--color-ink-900); }
/* 读数行：base 为 输入框+单位 / 按钮通栏；md 起 输入框+单位+按钮 一行 */
.reading__grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label unitlabel" "input unit" "button button"; gap: 8px 12px; align-items: end; }
@media (min-width: 640px) { .reading__grid { grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "label unitlabel ." "input unit button"; } }
.reading__grid > .reading__label { grid-area: label; }
.reading__grid > .reading__unit-label { grid-area: unitlabel; }
.reading__grid > .input { grid-area: input; }
.reading__grid > .segmented { grid-area: unit; }
.reading__grid > .btn { grid-area: button; }
.input { display: flex; align-items: center; gap: 8px; height: 64px; padding: 0 16px; border: 1.5px solid var(--color-control); border-radius: var(--radius-md); background: var(--color-card); }
.input__value { flex: 1; display: flex; align-items: center; min-width: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--figure-input); line-height: 1; font-weight: 700; color: var(--color-ink-900); }
.input__unit { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--color-ink-500); }
.input.is-hover { border-color: var(--color-ink-500); }
.input.is-focus { padding: 0 15.5px; border: 2px solid var(--color-enamel-600); box-shadow: 0 0 0 3px rgba(41, 84, 148, 0.30); }
.input.is-error { padding: 0 15.5px; border: 2px solid var(--color-error-600); }
.input.is-error.is-focus { box-shadow: 0 0 0 3px rgba(174, 46, 39, 0.25); }
.caret { display: inline-block; width: 2px; height: 34px; margin-left: 2px; background: var(--color-ink-900); }
.hint { font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-700); }
.field-error { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 8px; align-items: start; padding: 8px 12px; border-radius: var(--radius-sm); background: var(--color-error-100); color: var(--color-error-600); font-size: var(--text-small); line-height: 1.45; font-weight: 700; }
.field-error svg { width: 18px; height: 18px; margin-top: 1px; }

/* 按钮 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 24px; border: 0; border-radius: var(--radius-md); background: var(--color-enamel-600); color: var(--color-card); font-family: var(--font-sans); font-size: 17px; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; }
a.btn:hover, .btn.is-hover { background: var(--color-enamel-700); color: var(--color-card); }
.btn.is-active { background: var(--color-enamel-700); transform: translateY(1px); }
.btn.is-focus { outline: 3px solid var(--color-enamel-600); outline-offset: 3px; }
@media (min-width: 640px) { .reading__grid > .btn { height: 64px; } }

/* 结果卡 */
.result { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; min-height: 132px; padding: 16px; border: 1.5px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-sunken); }
@media (min-width: 640px) { .result { grid-template-columns: 32px minmax(0, 1fr); gap: 14px; padding: 18px 20px; } }
.result__icon { color: var(--color-ink-700); }
.result__icon svg { width: 100%; height: auto; }
.result__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.result__label { font-size: var(--text-caption); line-height: 1.35; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-700); }
.result__main { font-size: var(--text-lead); line-height: 1.4; font-weight: 700; color: var(--color-ink-900); }
.result__meta { font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-700); }
.result__next { font-size: 16px; line-height: 1.5; color: var(--color-ink-700); }
.result[data-state="below"] { border: 2px dashed var(--color-ember-600); background: var(--color-ember-100); }
.result[data-state="below"] .result__icon { color: var(--color-ember-600); }
.result[data-state="below"] .result__label { color: var(--color-ember-700); }
.result[data-state="meets"] { border: 2px solid var(--color-enamel-600); background: var(--color-enamel-100); }
.result[data-state="meets"] .result__icon { color: var(--color-enamel-600); }
.result[data-state="meets"] .result__label { color: var(--color-enamel-700); }
.result[data-state="stale"] { background: var(--color-card); }
.footnote { margin-top: -8px; font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-700); }

/* 测温面板 */
.measure { display: grid; gap: 16px; padding: 16px; border-radius: 12px; background: var(--color-ground); }
@media (min-width: 640px) { .measure { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 20px; padding: 20px; } }
.tips-card { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.measure__col { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.measure__title { font-size: 17px; line-height: 1.35; font-weight: 700; }
.measure__figure { max-width: 280px; }
.measure__figure svg, .diagram-card svg, .whole__figure svg { width: 100%; height: auto; }
.steps { list-style: none; counter-reset: step; display: flex; flex-direction: column; gap: 8px; font-size: 16px; line-height: 1.5; }
.steps li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; counter-increment: step; }
.steps li::before { content: counter(step); display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background: var(--color-enamel-600); color: var(--color-card); font-size: 12px; font-weight: 700; line-height: 1; }
.tips { list-style: none; display: flex; flex-direction: column; gap: 12px; font-size: 16px; line-height: 1.5; }
.tips li { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 10px; }
.tips svg { width: 18px; height: 18px; margin-top: 3px; color: var(--color-ink-700); }
.noscript-note { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border: 1px solid var(--color-control); border-radius: var(--radius-md); background: var(--color-sunken); font-size: 16px; line-height: 1.5; }
.noscript-note svg { width: 20px; height: 20px; margin-top: 2px; }

/* 正文区 */
.content { padding-block: 24px 96px; }
.content__grid { display: grid; gap: 40px; }
@media (min-width: 1024px) {
  .content__grid { grid-template-columns: minmax(0, 1fr) var(--rail); column-gap: 64px; align-items: start; }
  .content__grid > .toc { grid-column: 2; grid-row: 1; position: sticky; top: 24px; }
  .content__grid > .article { grid-column: 1; grid-row: 1; }
}
.toc { display: flex; flex-direction: column; gap: 8px; padding-top: 14px; border-top: 2px solid var(--color-ink-900); }
.toc__list { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
@media (min-width: 1024px) { .toc__list { grid-template-columns: minmax(0, 1fr); } }
.toc a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; border-bottom: 1px solid var(--color-line); font-size: 15px; line-height: 1.3; font-weight: 700; color: var(--color-ink-700); text-decoration: none; }
.toc a:hover { color: var(--color-ink-900); text-decoration: underline; }
.article { display: flex; flex-direction: column; gap: 64px; max-width: var(--measure); min-width: 0; }
@media (min-width: 1024px) { .article { gap: 96px; } }
.section { display: flex; flex-direction: column; gap: 16px; }
.section__sub { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* 数据表 */
.table-wrap { overflow: hidden; border: 1px solid var(--color-line); border-radius: var(--radius-sm); background: var(--color-card); }
.data { width: 100%; border-collapse: collapse; font-size: var(--text-small); line-height: 1.5; }
.data caption { padding: 12px 16px; border-bottom: 1px solid var(--color-line); text-align: left; font-size: 15px; font-weight: 700; color: var(--color-ink-700); }
.data th, .data td { padding: 14px 16px; border-top: 1px solid var(--color-line); text-align: left; vertical-align: top; }
.data thead th { border-top: 0; background: var(--color-sunken); font-size: var(--text-caption); line-height: 1.35; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-500); }
.data tbody th { font-size: 16px; font-weight: 700; color: var(--color-ink-900); }
.data .temp { font-family: var(--font-sans); font-variant-numeric: tabular-nums; font-size: 16px; font-weight: 700; white-space: nowrap; }
.cell-label { display: none; }
.table-note { font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-500); }
@media (max-width: 639px) {
  .data thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .data tr { display: block; padding: 12px 16px; border-top: 1px solid var(--color-line); }
  .data tbody tr:first-child { border-top: 0; }
  .data th, .data td { display: block; padding: 3px 0; border: 0; }
  .cell-label { display: block; margin-bottom: 1px; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-ink-500); }
}

/* 测温示意卡 */
.diagram-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .diagram-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.diagram-card { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.do-avoid { display: grid; gap: 16px; }
@media (min-width: 640px) { .do-avoid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.do-avoid__col { display: flex; flex-direction: column; gap: 12px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.check-list { list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; }
.check-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; }
.check-list svg { width: 20px; height: 20px; margin-top: 2px; }

/* 整鸡 */
.whole { display: grid; gap: 20px; }
@media (min-width: 1024px) { .whole { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; } }
.whole__figure { padding: 16px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.spot-list { list-style: none; display: flex; flex-direction: column; gap: 14px; font-size: 16px; line-height: 1.5; }
.spot-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 12px; }
.spot-num { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--color-enamel-600); color: var(--color-card); font-size: 14px; font-weight: 700; }
.spot-num--dashed { border: 2px dashed var(--color-enamel-600); background: var(--color-card); color: var(--color-enamel-700); }

/* 提示框 */
.callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; padding: 16px 20px; border: 1px solid var(--color-control); border-radius: var(--radius-md); background: var(--color-sunken); font-size: 16px; line-height: 1.55; }
.callout svg { width: 20px; height: 20px; margin-top: 3px; }
.callout strong { display: block; margin-bottom: 2px; }

/* FAQ */
.faq { display: flex; flex-direction: column; }
.faq__item { display: flex; flex-direction: column; gap: 10px; padding-block: 24px; border-top: 1px solid var(--color-line); }
.faq__item:last-child { border-bottom: 1px solid var(--color-line); }

/* 来源卡 */
.source-list { display: flex; flex-direction: column; gap: 16px; }
.source-card { display: flex; flex-direction: column; gap: 8px; padding: 20px; border: 1px solid var(--color-line); border-radius: var(--radius-lg); background: var(--color-card); }
.source-card__title { font-size: 17px; line-height: 1.35; font-weight: 700; }
.source-card__url { font-family: var(--font-mono); font-size: 13px; line-height: 1.45; color: var(--color-ink-500); overflow-wrap: anywhere; }
.meta-list { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin-top: 6px; font-size: var(--text-small); line-height: 1.5; }
.meta-list dt { font-weight: 700; color: var(--color-ink-500); }
@media (max-width: 479px) { .meta-list { grid-template-columns: minmax(0, 1fr); gap: 0; } .meta-list dd { margin-bottom: 8px; } }
.quote { padding-left: 12px; border-left: 2px solid var(--color-line); color: var(--color-ink-700); font-style: italic; }

/* 页脚 */
.site-footer { padding-block: 48px 28px; border-top: 1px solid var(--color-line); background: var(--color-sunken); font-size: var(--text-small); line-height: 1.5; color: var(--color-ink-700); }
.footer__grid { display: grid; gap: 28px; }
@media (min-width: 640px) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; } }
.footer__block { display: flex; flex-direction: column; gap: 10px; }
.footer__links { list-style: none; display: flex; flex-direction: column; }
.footer__links a { display: flex; align-items: center; min-height: 44px; color: var(--color-ink-700); font-weight: 700; text-decoration: none; }
.footer__links a:hover { color: var(--color-ink-900); text-decoration: underline; }
.footer__copy { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--color-line); font-size: 13px; color: var(--color-ink-500); }

/* 404 页的快捷操作行与常规按钮规则共用。 */
.home__actions { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center; }
/* 内页 */
.page-head { padding-block: 48px 32px; border-bottom: 1px solid var(--color-line); }
.page-head__inner { display: flex; flex-direction: column; gap: 14px; max-width: var(--measure); }
.prose { display: flex; flex-direction: column; gap: 48px; max-width: var(--measure); padding-block: 40px 96px; }
.prose section { display: flex; flex-direction: column; gap: 14px; }
.bullets { list-style: disc; display: flex; flex-direction: column; gap: 6px; padding-left: 1.25em; }
.bullets li::marker { color: var(--color-ink-500); }

/* 404 */
.notfound { padding-block: 96px; }
.notfound__inner { display: flex; flex-direction: column; gap: 18px; max-width: 34rem; }

/* 首页以紧凑答案引导操作；长文用分隔线和目录建立层级。 */
.guide-home .hero { padding-bottom: 40px; }
.guide-home .hero__head { gap: 10px; }
.guide-home .answer { box-shadow: none; background: var(--color-card); border: 1px solid var(--color-line); }
.guide-home .answer__body { padding: 24px; gap: 12px; }
.guide-home .answer__detail { font-size: var(--text-small); }
.guide-home .checker { box-shadow: none; min-width: 0; }
.guide-home .content { border-top: 1px solid var(--color-line); padding-top: 40px; }
.guide-home .article { gap: 56px; }
.guide-home .section + .section { border-top: 1px solid var(--color-line); padding-top: 40px; }
.guide-home .probe-mark { display: none; }
.guide-home .do-avoid { display: block; }
.guide-home .do-avoid__col { padding: 0; border: 0; background: transparent; }
.guide-home .toc a { min-height: 48px; }
.guide-home :is(section, .section__sub, .faq__item) { scroll-margin-top: 24px; }
/* 工具所在栏决定输入区宽度，防止平板及小桌面按钮挤压读数。 */
.guide-home .reading__grid { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "label unitlabel" "input unit" "button button"; }
.guide-home .reading__grid > .btn { height: 52px; }
@media (min-width: 1024px) {
  /* 等宽双栏共享上下边界，左栏承载答案与图解，右栏集中输入和结果。 */
  .guide-home .hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto 1fr; grid-template-areas: "answer checker" "measure checker"; gap: 20px 24px; align-items: stretch; }
  .guide-home .hero__grid > .measure { grid-area: measure; }
  .guide-home .checker { padding: 24px; gap: 20px; }
  .guide-home .checker .footnote { margin-top: auto; padding-top: 12px; }
  .guide-home .hero__grid > .measure .measure__figure { max-width: 280px; }
  .guide-home .fig-hero { font-size: 4.5rem; }
}
/* 图解作为独立面板与答案、表单使用相同表面和圆角。 */
.guide-home .hero__grid > .measure { min-width: 0; background: var(--color-card); border: 1px solid var(--color-line); border-radius: var(--radius-lg); padding: 24px; }
@media (max-width: 639px) {
  .guide-home .h1 { font-size: clamp(1.875rem, 7.5vw, 2.5rem); line-height: 1.12; text-align: left; }
  .guide-home .lead { font-size: 16px; line-height: 1.5; }
  .guide-home .hero__head { margin-bottom: 24px; }
  .guide-home .answer__body { gap: 8px; }
  .guide-home .answer__body, .guide-home .hero__grid > .measure { padding: 16px; }
  .guide-home .fig-hero { font-size: 3.5rem; }
  .guide-home .fig-sub { font-size: 1.75rem; }
  .guide-home .answer__statement { font-size: 16px; }
  .guide-home .answer__detail { display: none; }
  .guide-home .checker__title { font-size: 1.375rem; text-wrap: pretty; }
  .guide-home .chip { height: 100%; min-height: 48px; gap: 8px; font-size: 15px; }
  .guide-home .chips { align-items: stretch; }
  .guide-home .measure__figure { max-width: 300px; }
  .guide-home .toc__list { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .guide-home .content { padding-top: 28px; padding-bottom: 56px; }
  .guide-home .content__grid { gap: 32px; }
  .guide-home .article { gap: 40px; }
  .guide-home .section + .section { padding-top: 32px; }
  .guide-home .h2 { font-size: 1.5rem; line-height: 1.2; text-wrap: pretty; }
  .guide-home .h3 { font-size: 1.125rem; }
  .guide-home .section { gap: 12px; }
  .guide-home .faq__item { padding-block: 20px; }
  .guide-home .source-card { padding: 16px; }
}

/* 原生控件与最终设计的静态样式连接，保持尺寸和响应式规则。 */
@font-face{font-family:"Atkinson Hyperlegible Next";src:url('/assets/fonts/next.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:"Atkinson Hyperlegible Mono";src:url('/assets/fonts/mono.woff2') format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
[hidden]{display:none!important}.sr-only{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{z-index:10}.skip-link:focus{top:12px}
.checker__form{display:flex;flex-direction:column;gap:16px}.choice{position:relative;display:block;cursor:pointer}.choice>input{position:absolute;opacity:0;width:1px;height:1px}.choice>input:focus-visible+span{outline:3px solid var(--color-enamel-600);outline-offset:2px}.choice>input:checked+.chip{padding:0 13.5px;border:2px solid var(--color-enamel-600);background:var(--color-enamel-100);color:var(--color-enamel-700)}.chip__mark svg{visibility:hidden}.choice>input:checked+.chip .chip__mark{border-color:var(--color-enamel-600);background:var(--color-enamel-600)}.choice>input:checked+.chip .chip__mark svg{visibility:visible}.chip:hover{border-color:var(--color-ink-500);background:var(--color-ground)}.choice>input:checked+.segmented__opt{background:var(--color-ink-900);color:var(--color-card)}.segmented__opt:hover{background:var(--color-sunken)}.segmented.fieldset{padding:3px;border:1.5px solid var(--color-control)}
.input__value{width:100%;padding:0;border:0;background:transparent;outline:none;appearance:none;height:100%}.input:focus-within{outline:3px solid var(--color-enamel-600);outline-offset:3px}.btn{cursor:pointer}.btn:hover{background:var(--color-enamel-700);color:var(--color-card)}.btn:active{transform:translateY(1px)}.field-error{display:block}.result[data-state=below],.result[data-state=meets]{animation:result-in var(--dur-base) var(--ease-out)}.source-card dd{overflow-wrap:anywhere}
@keyframes result-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.chip,.segmented,.input,.result{border-color:ButtonText}.choice>input:checked+span{outline:2px solid Highlight}.input:focus-within{outline-color:Highlight}}
@media print{.site-header,.site-footer,.toc,.checker,.skip-link{display:none!important}body{background:white;color:black;font-size:11pt}.hero__grid,.content__grid{display:block}.answer,.tips-card,.source-card{box-shadow:none;break-inside:avoid}.source-card__url{color:black}.container{max-width:none;padding:0}.article{max-width:none}.hero{padding:0}.hero__head{margin-bottom:20px}}
/* 320px 窄屏给完整五位读数留空间，单位选项仍保留 44px 点击宽度。 */
@media(max-width:374px){.segmented{grid-template-columns:repeat(2,minmax(44px,auto))}.segmented__opt{padding-inline:8px}.input{padding-inline:12px}.input__value{font-size:2rem}}
/* 测温插图保持统一比例；同一 SVG 文件在工具、正文与整鸡说明中复用。 */
.placement-art{display:block;width:100%;height:auto;object-fit:contain}.measure__figure{max-width:none}.whole__figure .placement-art{max-width:560px;margin-inline:auto}.home__mark>svg{width:100%;height:100%}
/* 工具内插图单独占一行，避免标注被压缩成难读的缩略图。 */
.measure{grid-template-columns:minmax(0,1fr);gap:12px}.measure__figure{width:100%;max-width:420px;margin-inline:auto}
