/* modules.post_quiet — 靜讀版面(2026-10-13 定稿)。
   One 680px column for the title, text, figures, tables, labs and footer; no cards; ink on paper; the accent colour
   only where something is truly emphasised; the left TOC from 1024px up; vertical spacing that also follows the
   window height (svh), so a short or non-fullscreen window does not spend its first screen on margins.
   Plain CSS on purpose: Stylus splits the commas inside :is()/:not() and evaluates min()/max() itself.
   Every rule starts with body[data-page="post"] (specificity 0,1,1) so it outranks the post.styl rule it replaces.
   The accent comes from palette.accent through --post-accent / --post-accent-rgb, set on .body in post.styl. */

/* ---------- details ---------- */
body[data-page="post"] ::selection { background: rgba(var(--post-accent-rgb), 0.14); }
body[data-page="post"] .post-content .post-content__body table { font-variant-numeric: tabular-nums lining-nums; }
html[lang="zh-tw"] body[data-page="post"] .post-content .post-content__body :is(td, th),
html[lang="zh-tw"] body[data-page="post"] .temp-lab__table :is(td, th) {
  font-family: "Noto Sans TC", "PingFang TC", sans-serif;
  letter-spacing: 0.02em;
}
body[data-page="post"] .temp-lab__table { font-variant-numeric: tabular-nums lining-nums; }
body[data-page="post"] .post-content .eml-lab .eml-term__body { gap: 18px; padding: 18px 22px 20px; }
body[data-page="post"] .post-content .eml-lab .eml-term__section { gap: 8px; }
body[data-page="post"] .post-content .eml-lab .eml-stat { padding: 10px 8px; }
/* Lab titles are h3 and status lines are p: the article's heading and paragraph margins leak into the widgets */
body[data-page="post"] .post-content :is(.eml-lab, .temp-lab, .fq) h3 { margin-top: 0; border: 0; padding: 0; }
body[data-page="post"] .post-content .eml-lab .eml-lab__msg { margin: 6px 0 0; min-height: 0; }
body[data-page="post"] .post-content .eml-lab .eml-lab__msg:empty { display: none; }

/* ---------- surface and column ---------- */
body[data-page="post"] .body { --measure: 680px; background: #f6f3ee; }
@media (min-width: 1024px) {
  /* the TOC lives in the margin left of the column */
  body[data-page="post"] .post-inner > .toc-outer {
    display: block;
    position: absolute;
    top: var(--pad-y);
    bottom: var(--pad-y);
    right: calc(50% + var(--measure) / 2 + 40px);
    width: min(220px, calc((100vw - var(--measure)) / 2 - 64px));
    margin: 0;
    padding: 0;
    border: 0;
  }
  body[data-page="post"] .toc-mobile { display: none; }
}
body[data-page="post"] .post-inner { background: transparent; box-shadow: none; backdrop-filter: none; }

/* header */
body[data-page="post"] .post-title { font-size: min(clamp(26px, 1.6vw + 18px, 42px), 5.4svh); line-height: 1.22; letter-spacing: 0; }
body[data-page="post"] .post-content__head { border-bottom: 1px solid rgba(28, 26, 25, 0.12); padding-bottom: 28px; }
body[data-page="post"] .post-content__head .post-info__description { font-size: 16px; line-height: 1.75; color: #4a4542; border-left: 1px solid rgba(var(--post-accent-rgb), 0.3); }

/* header on the reading column: one left edge from the title down to the text */
body[data-page="post"] .post-content__head {
  display: flex;
  flex-direction: column;
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
body[data-page="post"] .post-content__head::before { display: none; }
body[data-page="post"] .post-content__head .post-title { order: 1; }
body[data-page="post"] .post-content__head .post-info { order: 2; display: flex; flex-direction: column; gap: min(14px, var(--vh-s)); margin-top: min(18px, var(--vh-m)); }
body[data-page="post"] .post-content__head .post-info__description {
  order: 1;
  border: 0;
  padding: 0;
  font-size: clamp(16.5px, 15.4px + 0.3vw, 19px);
  line-height: 1.72;
  color: #5a5450;
}
body[data-page="post"] .post-content__head .post-info__meta { order: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; padding: 0; }
body[data-page="post"] .post-content__head .post-date { font-size: 13px; color: #7a736d; }
body[data-page="post"] .post-readtime { display: inline-flex; font-size: 13px; color: #7a736d; }
body[data-page="post"] .post-readtime::before { content: "·"; margin-right: 14px; color: #c2bcb5; }
body[data-page="post"] .post-content__head .post-tags-row { order: 3; margin: min(6px, var(--vh-s)) 0 0; }
body[data-page="post"] .post-content__head .post-tag {
  background: none !important;
  color: #7a736d !important;
  padding: 0;
  margin: 0 14px 0 0;
  font-size: 13px;
  font-weight: 500;
}
body[data-page="post"] .post-content__head .post-tag:hover { color: var(--post-accent) !important; }

/* prose: ink text on paper, colour stays on headings, markers, links and rules */
body[data-page="post"] .post-content .post-content__body p { color: #2b2826; line-height: 1.9; }
body[data-page="post"] .post-content .post-content__body li { line-height: 1.85; margin: 0.35em 0; }
body[data-page="post"] .post-content .post-content__body > h2 { border-bottom: 0; padding-bottom: 0; font-size: 1.6em; margin: clamp(1.5em, 7svh, 2.6em) 0 0.8em; }
body[data-page="post"] .post-content .post-content__body > h3 { margin: 2em 0 0.6em; }
body[data-page="post"] .post-content .post-content__body hr { height: 1px; background: linear-gradient(90deg, transparent, rgba(var(--post-accent-rgb), 0.5), transparent); margin: 3.2em 0; }
body[data-page="post"] .post-content .post-content__body blockquote {
  background: none;
  border-left: 2px solid var(--post-accent);
  border-radius: 0;
  padding: 0.15em 0 0.15em 1.3em;
  color: #3d3835;
}

/* tables sit on the text column like everything else; a table wider than that scrolls inside its frame */
body[data-page="post"] .post-content .post-content__body .table-wrapper {
  box-sizing: border-box;
  border: 1px solid rgba(28, 26, 25, 0.1);
  border-radius: 12px;
  background: #fffdfa;
  box-shadow: none;
}
body[data-page="post"] .post-content .post-content__body .table-wrapper table {
  width: auto;
  min-width: 100%;
  margin: 0;
  font-size: 0.9em;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}
/* rows are separated by hairlines only; the site-wide reset also draws a vertical grid */
body[data-page="post"] .post-content .post-content__body .table-wrapper table :is(th, td) { border-left: 0; border-right: 0; }
/* cells read from the left; a column the Markdown marks |---:| (numbers) lines up on the right */
body[data-page="post"] .post-content .post-content__body .table-wrapper table :is(thead th, tbody td):not([align]) { text-align: left; }
body[data-page="post"] .post-content .post-content__body .table-wrapper table :is(thead th, tbody td)[align="right"] { text-align: right; }
body[data-page="post"] .post-content .post-content__body .table-wrapper table :is(thead th, tbody td)[align="center"] { text-align: center; }
@media (max-width: 560px) {
  body[data-page="post"] .post-content .post-content__body .table-wrapper table :is(th, td) { padding-left: 0.75em; padding-right: 0.75em; }
}
body[data-page="post"] .post-content .post-content__body figure.highlight { box-shadow: 0 0 0 1px rgba(28, 26, 25, 0.12); }
body[data-page="post"] :is(.eml-lab, .temp-lab, .fq) { box-shadow: none; border: 1px solid rgba(28, 26, 25, 0.1); background: #fffdfa; }
body[data-page="post"] .anatomy-embed .iso-plate { box-shadow: 0 0 0 1px rgba(28, 26, 25, 0.1); }

/* restraint: ink everywhere, crimson only where something is truly emphasised */
body[data-page="post"] .post-title { background: none; -webkit-text-fill-color: #1c1a19; color: #1c1a19; font-weight: 600; }
body[data-page="post"] .post-content__head::before { background: rgba(28, 26, 25, 0.5); width: 28px; height: 2px; }
body[data-page="post"] .post-content__head .post-info__description { border-left-color: rgba(28, 26, 25, 0.15); }
body[data-page="post"] .post-content .post-content__body :is(h1, h2, h3, h4) { color: #1c1a19; }
body[data-page="post"] .post-content .post-content__body li::marker { color: #9a938c; }
body[data-page="post"] .post-content .post-content__body hr { background: rgba(28, 26, 25, 0.14); }
body[data-page="post"] .post-content .post-content__body blockquote { border-left: 1px solid rgba(28, 26, 25, 0.3); }
body[data-page="post"] .post-content .post-content__body .table-wrapper thead th { color: #1c1a19; border-bottom: 1px solid rgba(28, 26, 25, 0.25); }
body[data-page="post"] .post-content .post-content__body a:not(.post-tag) {
  color: inherit;
  font-weight: inherit;
  border-bottom: 1px solid rgba(var(--post-accent-rgb), 0.35);
}
body[data-page="post"] .post-content .post-content__body a:not(.post-tag):hover { color: var(--post-accent); border-bottom-color: var(--post-accent); }
body[data-page="post"] .post-content .post-content__body :is(p, blockquote) strong { color: var(--post-accent); }
body[data-page="post"] .post-content .post-content__body li > strong:first-child,
body[data-page="post"] .post-content .post-content__body td strong { color: #1c1a19; }

body[data-page="post"] .post-content .post-content__body .table-wrapper :is(thead, thead tr, thead th) { border-bottom-color: rgba(28, 26, 25, 0.25) !important; }
body[data-page="post"] .toc-outer .toc-title { color: #6f6862; }
body[data-page="post"] .toc-outer .toc-top { color: #6f6862; }
body[data-page="post"] .toc-outer .toc-top:hover { color: var(--post-accent); }
body[data-page="post"] .toc-mobile summary { color: #1c1a19; }

body[data-page="post"] .toc-outer .post-toc a { border-left-color: rgba(28, 26, 25, 0.1); }

body[data-page="post"] .toc-outer .post-toc-text[data-short] { font-size: 0; }
body[data-page="post"] .toc-outer .post-toc-text[data-short]::before { content: attr(data-short); font-size: 13px; }

/* ---------- footer written like the article: no cards, hairlines, the reading column ---------- */
body[data-page="post"] .post__foot {
  width: calc(100% - var(--gutter) * 2);
  max-width: calc(var(--measure) + var(--pad-x) * 2);
  padding: 0 var(--pad-x);
  box-sizing: border-box;
}
body[data-page="post"] .post__foot .author-bio {
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none;
  border-top: 1px solid rgba(28, 26, 25, 0.12);
  padding: var(--vh-l) 0 0; margin: 0;
}
body[data-page="post"] .post__foot .author-bio__inner { padding: 0; gap: 20px; }
body[data-page="post"] .post__foot .author-bio__avatar-wrapper { width: 60px; height: 60px; }
body[data-page="post"] .post__foot #author-front-face { border: 0; box-shadow: 0 0 0 1px rgba(28, 26, 25, 0.1); }
body[data-page="post"] .post__foot .author-bio__header { margin-bottom: 6px; }
body[data-page="post"] .post__foot .author-bio__description { margin-bottom: 14px; }
body[data-page="post"] .post__foot .author-bio__social-link { width: 32px; height: 32px; background: none; }
body[data-page="post"] .post__foot .author-bio__social-link:hover { background: rgba(28, 26, 25, 0.06); }
body[data-page="post"] .post__foot .author-bio__name { font-size: 18px; color: #1c1a19; }
body[data-page="post"] .post__foot .author-bio__title { color: #7a736d; font-size: 11px; letter-spacing: 0.08em; }
body[data-page="post"] .post__foot .author-bio__description { font-size: 15px; color: #5a5450; }
body[data-page="post"] .post__foot .author-bio__support-btn { background: none; border: 1px solid rgba(28, 26, 25, 0.25); color: #1c1a19; box-shadow: none; }
body[data-page="post"] .post__foot .author-bio__support-btn:hover { border-color: var(--post-accent); color: var(--post-accent); }

body[data-page="post"] .post__foot .post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  margin-top: var(--vh-l); padding-top: var(--vh-m);
  border-top: 1px solid rgba(28, 26, 25, 0.12);
}
body[data-page="post"] .post__foot :is(.post-nav-item-left, .post-nav-item-right) {
  background: none; border: 0; border-radius: 0; box-shadow: none; padding: 0; width: auto; min-height: 0;
  font-family: "Playfair Display", "Noto Serif TC", serif; font-size: 17px; line-height: 1.5; color: #1c1a19; transform: none;
}
body[data-page="post"] .post__foot :is(.post-nav-item-left, .post-nav-item-right):hover { color: var(--post-accent); transform: none; box-shadow: none; }
body[data-page="post"] .post__foot .post-nav-item-right { text-align: right; }
body[data-page="post"] .post__foot .post-nav .text-small { font-family: "Inconsolata", monospace; font-size: 12px; letter-spacing: 0.06em; color: #7a736d; }
body[data-page="post"] .post__foot .post-nav .text-align { margin-bottom: 6px; color: #7a736d; }

body[data-page="post"] .post__foot #comment-system {
  display: flex; flex-direction: column;
  max-width: none; margin: var(--vh-l) 0 0; padding: var(--vh-l) 0 0;
  border-top: 1px solid rgba(28, 26, 25, 0.12);
  font-family: inherit;
}
body[data-page="post"] .post__foot :is(.comments-section, .comment-form-wrapper) {
  background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; padding: 0;
}
body[data-page="post"] .post__foot .comments-section { order: 1; margin: 0 0 var(--vh-l); }
body[data-page="post"] .post__foot .comment-form-wrapper { order: 2; margin: 0; }
body[data-page="post"] .post__foot :is(.comments-title, .comment-title) {
  font-family: "Playfair Display", "Noto Serif TC", serif; font-weight: 600; font-size: 1.3rem; color: #1c1a19; margin: 0 0 min(14px, var(--vh-s));
}
body[data-page="post"] .post__foot .comments-section > div[style] { text-align: left !important; padding: 0 !important; color: #7a736d !important; }
body[data-page="post"] .post__foot .comments-section > div[style] p { margin: 0; font-size: 15px; }
body[data-page="post"] .post__foot .comment { gap: 14px; padding: clamp(14px, 2.6svh, 22px) 0; border-top: 1px solid rgba(28, 26, 25, 0.08); }
body[data-page="post"] .post__foot .avatar {
  width: 36px; height: 36px; font-size: 15px;
  background: #e7e1d8 !important; color: #5a5450; /* the script paints each initial a saturated colour inline */
}
body[data-page="post"] .post__foot .comment-author { font-family: inherit; font-size: 15px; color: #1c1a19; }
body[data-page="post"] .post__foot .comment-time { font-size: 12px; color: #9a938c; }
body[data-page="post"] .post__foot .comment-text { font-size: 15.5px; line-height: 1.8; color: #2b2826; }
body[data-page="post"] .post__foot .load-more-btn {
  margin: var(--vh-m) 0 0; font-size: 14px; font-weight: 500; padding: 8px 18px; border-radius: 999px;
  background: transparent; color: #1c1a19; border: 1px solid rgba(28, 26, 25, 0.3);
}
body[data-page="post"] .post__foot .load-more-btn:hover { border-color: var(--post-accent); color: var(--post-accent); background: transparent; transform: none; }
body[data-page="post"] .post__foot .comment-form { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 28px; }
body[data-page="post"] .post__foot .comment-form .form-group { margin: 0; }
body[data-page="post"] .post__foot .comment-form .form-group:nth-child(n+3),
body[data-page="post"] .post__foot .comment-form .submit-btn { grid-column: 1 / -1; }
body[data-page="post"] .post__foot .comment-form :is(input, textarea) {
  box-sizing: border-box; width: 100%;
  font-family: inherit; font-size: 15px; line-height: 1.6; color: #1c1a19;
  background: transparent; box-shadow: none;
}
body[data-page="post"] .post__foot .comment-form input {
  border: 0; border-bottom: 1px solid rgba(28, 26, 25, 0.22); border-radius: 0; padding: 10px 0;
}
body[data-page="post"] .post__foot .comment-form textarea {
  border: 1px solid rgba(28, 26, 25, 0.18); border-radius: 10px; padding: 12px 14px; margin-top: 14px; min-height: 120px;
  background: rgba(255, 255, 255, 0.45);
}
body[data-page="post"] .post__foot .comment-form :is(input, textarea)::placeholder { color: #9a938c; }
body[data-page="post"] .post__foot .comment-form input:focus { border-bottom-color: var(--post-accent); box-shadow: none; outline: none; }
body[data-page="post"] .post__foot .comment-form textarea:focus { border-color: var(--post-accent); box-shadow: none; outline: none; }
body[data-page="post"] .post__foot .char-counter { font-size: 12px; color: #9a938c; }
body[data-page="post"] .post__foot .submit-btn {
  justify-self: end; margin-top: 4px;
  font-family: inherit; font-size: 14px; font-weight: 500; letter-spacing: 0.04em;
  padding: 9px 20px; border-radius: 999px;
  background: transparent; color: #1c1a19; border: 1px solid #1c1a19; box-shadow: none;
}
body[data-page="post"] .post__foot .submit-btn:hover { background: #1c1a19; color: #fff; transform: none; }
@media (max-width: 767px) {
  /* the theme stacks the bio and centres it on phones; here it stays one left edge with everything else */
  body[data-page="post"] .post__foot .author-bio__inner { flex-direction: row; align-items: flex-start; text-align: left; gap: 16px; }
  body[data-page="post"] .post__foot .author-bio__avatar-wrapper { width: 48px; height: 48px; }
  body[data-page="post"] .post__foot :is(.author-bio__footer, .author-bio__support) { flex-direction: row; justify-content: flex-start; flex-wrap: wrap; gap: 10px 12px; }
  body[data-page="post"] .post__foot .comment { flex-direction: row; gap: 12px; }
  body[data-page="post"] .post__foot .avatar { width: 30px; height: 30px; font-size: 13px; }
}
@media (max-width: 560px) {
  body[data-page="post"] .post__foot .comment-form { grid-template-columns: 1fr; }
  body[data-page="post"] .post__foot .post-nav { grid-template-columns: 1fr; gap: 18px; }
  body[data-page="post"] .post__foot .post-nav-item-right { text-align: left; }
}

/* ---------- height-aware rhythm ----------
   Every vertical space takes the smaller of its width-based value and a share of the visible height (svh),
   so a short or non-fullscreen window does not spend its first screen on margins. */
body[data-page="post"] {
  --vh-s: clamp(8px, 1.6svh, 20px);
  --vh-m: clamp(14px, 3.2svh, 36px);
  --vh-l: clamp(20px, 5svh, 64px);
  --vh-xl: clamp(28px, 7.5svh, 96px);
}
@media (min-width: 1024px) {
  body[data-page="post"] { --nav-h: clamp(60px, 11svh, 90px); }
}
body[data-page="post"] .post-inner {
  margin-top: min(clamp(40px, 8vw - 8px, 80px), var(--vh-l));
  margin-bottom: min(clamp(40px, 8vw - 8px, 80px), var(--vh-xl));
  padding-top: min(var(--pad-y), var(--vh-l));
  padding-bottom: min(var(--pad-y), var(--vh-xl));
}
body[data-page="post"] .post-content__head {
  padding-top: min(clamp(20px, 2.4vw, 28px), var(--vh-m));
  padding-bottom: min(clamp(20px, 2.8vw, 32px), var(--vh-m));
  margin-bottom: min(clamp(32px, 4vw, 48px), var(--vh-l));
}
body[data-page="post"] .post-content__head .post-info { margin-top: min(24px, var(--vh-m)); }
body[data-page="post"] .post-content .post-content__body > :is(.anatomy-embed, .eml-lab, .temp-lab, .fq, .table-wrapper, blockquote, figure.highlight, pre) {
  margin-top: clamp(1.1em, 4.5svh, 2.2em);
  margin-bottom: clamp(1.1em, 4.5svh, 2.2em);
}
body[data-page="post"] .post-content .post-content__body hr { margin-top: clamp(1.6em, 6svh, 3.2em); margin-bottom: clamp(1.6em, 6svh, 3.2em); }
body[data-page="post"] .anatomy-embed .iso-svg { max-height: 66svh; }
body[data-page="post"] .post-content .post-content__body img { max-height: 80svh; width: auto; max-width: 100%; }
body[data-page="post"] :is(.eml-lab, .temp-lab, .fq) { padding-top: min(28px, var(--vh-m)); padding-bottom: min(28px, var(--vh-m)); }
body[data-page="post"] .toc-outer .toc-sticky {
  top: calc(var(--nav-h) + var(--vh-m));
  max-height: calc(100svh - var(--nav-h) - var(--vh-m) * 2);
}
body[data-page="post"] .toc-outer .post-toc a { padding-top: clamp(2px, 0.55svh, 5px); padding-bottom: clamp(2px, 0.55svh, 5px); }
body[data-page="post"] .toc-mobile { margin-bottom: var(--vh-m); }
body[data-page="post"] .post-content .post-content__body :is(h2, h3, h4)[id] { scroll-margin-top: calc(var(--nav-h) + var(--vh-s)); }
body[data-page="post"] .post__foot { margin-top: min(clamp(60px, 6vw, 80px), var(--vh-xl)); margin-bottom: min(clamp(40px, 5vw, 60px), var(--vh-l)); }
body[data-page="post"] .post__foot .post-nav { margin-top: var(--vh-l); }