/* debby.health 05 — p-articles.css: 健康筆記 list (/articles/), 6 category pages and 8 articles (Builder C).
   Page-local layer on top of site.css「05 inner base」(.ai-phero, .ai-chips, .ai-card, .ai-prose, .ai-author, .ai-ctabox).
   Same tokens as the home; the home P.04 note pages (folio number + category tint) are the visual model.
   No live cover photos exist (articles.json cover = null): covers are typographic (folio, category tint, ruled paper). */

/* ---------- category tints (existing tokens only; card text stays ink / muted / teal-700, all ≥4.5:1) ---------- */
[data-ai-cat] { --ai-n-bg: var(--ai-sheet); --ai-n-acc: var(--ai-teal-700); }
[data-ai-cat="food-and-oils"], [data-ai-cat*="/food-and-oils/"] { --ai-n-bg: var(--ai-amber-50); --ai-n-acc: var(--ai-amber-700); }
[data-ai-cat="metabolic-weight"], [data-ai-cat*="/metabolic-weight/"] { --ai-n-bg: var(--ai-teal-50); }
[data-ai-cat="sleep-mood-focus"], [data-ai-cat*="/sleep-mood-focus/"] { --ai-n-bg: #DDF3E8; }          /* home P.04 mint */
[data-ai-cat="womens-health"], [data-ai-cat*="/womens-health/"] { --ai-n-bg: var(--ai-pink-50); --ai-n-acc: var(--ai-ink); }
[data-ai-cat="healthy-aging"], [data-ai-cat*="/healthy-aging/"] { --ai-n-bg: var(--ai-paper-2); --ai-n-acc: var(--ai-ink); }
/* ruled notebook paper (健康筆記): faint teal rules + the pink margin line */
[data-ai-cat], .ai-nhero__photo { --ai-n-rule: rgba(23, 98, 102, .1); }

/* ===================================================================== list + category pages */
.ai-nhero { padding-bottom: clamp(20px, 2.6vw, 40px); }
.ai-nhero__grid { display: grid; gap: 40px; align-items: center; margin-top: 18px; }
.ai-nhero__title { max-width: none; }
.ai-nhero__mark { white-space: nowrap; }
.ai-nhero__mark .ai-hl__svg { bottom: .06em; height: .5em; }
/* the page's one lively decoration: the highlighter is drawn once under the h1 on load (CSS only; reduced motion = drawn) */
@keyframes ai-n-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.ai-nhero__mark .ai-hl__svg path { animation: ai-n-draw .8s var(--ai-ease) .75s both; }
.ai-nhero__mark .ai-hl__p2 { animation-delay: .9s; }
.ai-nhero__lead { max-width: 30em; }
.ai-nhero__photo { display: none; }
@media (min-width: 1025px) {
  .ai-nhero__grid { grid-template-columns: minmax(0, 1fr) clamp(280px, 25vw, 360px); gap: clamp(48px, 6vw, 96px); margin-top: 6px; }
  .ai-nhero__photo { display: block; position: relative; margin: 0 22px 22px 0; }
  .ai-nhero__photo::before {     /* a notebook sheet tucked behind the photo */
    content: ""; position: absolute; inset: 22px -18px -22px 26px; z-index: 0; border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet);
    background: linear-gradient(to right, transparent 0 30px, rgba(252, 100, 148, .45) 30px 31px, transparent 31px),
      repeating-linear-gradient(to bottom, var(--ai-sheet) 0 31px, var(--ai-n-rule) 31px 32px);
  }
  .ai-nhero__photo img { position: relative; z-index: 1; display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; object-position: 50% 28%; border-radius: var(--ai-r-xs); box-shadow: var(--ai-shadow-sheet); }
}

/* category chips: a small swatch in the category tint; the active one is solid ink (as the live .dh-chip) */
.ai-nchips { gap: 8px 10px; margin-top: 26px; }
.ai-nchips .ai-chip { gap: 8px; }
.ai-nchips .ai-chip[href*="/category/"]::before { content: ""; flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--ai-n-bg); box-shadow: inset 0 0 0 1px var(--ai-rule-strong); }
.ai-nchips .ai-chip[href*="/report-reading/"] { --ai-n-bg: var(--ai-sheet); }
.ai-nchips .ai-chip[href*="/food-and-oils/"] { --ai-n-bg: #F2C98A; }
.ai-nchips .ai-chip[href*="/metabolic-weight/"] { --ai-n-bg: var(--ai-teal-400); }
.ai-nchips .ai-chip[href*="/sleep-mood-focus/"] { --ai-n-bg: #9ED8BC; }
.ai-nchips .ai-chip[href*="/womens-health/"] { --ai-n-bg: var(--ai-pink); }
.ai-nchips .ai-chip[href*="/healthy-aging/"] { --ai-n-bg: #D9C7A8; }
.ai-nchips .ai-chip[aria-current] { background: var(--ai-ink); border-color: var(--ai-ink); color: var(--ai-on-dark); }
.ai-nchips .ai-chip[aria-current]::before { box-shadow: inset 0 0 0 1px rgba(251, 248, 243, .7); }
@media (max-width: 767px) { .ai-nchips { margin-top: 24px; gap: 8px; } .ai-nchips .ai-chip { min-height: 38px; padding: 0 13px; font-size: .875rem; } }

/* count bar (role=status): 「健康筆記 8 篇」 or the category + its live one-line intro */
.ai-notes-list { padding-top: clamp(8px, 1.4vw, 16px); }
.ai-nbar { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px; padding-bottom: 14px; margin-bottom: clamp(20px, 2.2vw, 32px); border-bottom: 1px solid var(--ai-rule-strong); }
.ai-nbar__status { display: flex; align-items: baseline; gap: 14px; margin: 0; }
.ai-nbar__name { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.25rem, 1rem + .8vw, 1.625rem); letter-spacing: .04em; }
.ai-nbar__n { display: inline-flex; align-items: baseline; gap: 4px; font-size: .875rem; color: var(--ai-muted); letter-spacing: .1em; }
.ai-nbar__n b { font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.75rem, 1.3rem + 1vw, 2.25rem); line-height: 1; color: var(--ai-teal-700); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.ai-nbar__intro { display: block; margin: 0; font-size: .9375rem; color: var(--ai-muted); }
.ai-nbar__intro:empty { display: none; }

/* cards: home P.04 language — folio number, category tint, sheet shadow; the first card is the cover story */
.ai-ncards { counter-reset: ai-n; }
.ai-ncards > .ai-card { counter-increment: ai-n; }
.ai-ncards > .ai-card[hidden] { display: none; counter-increment: none; }
.ai-card[data-ai-cat] { background: var(--ai-n-bg); box-shadow: inset 0 0 0 1px rgba(24, 52, 55, .07), var(--ai-shadow-sheet); transition: translate .45s var(--ai-ease), box-shadow .45s var(--ai-ease); }
.ai-card[data-ai-cat]:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px rgba(24, 52, 55, .1), 0 1px 0 rgba(24, 52, 55, .06), 0 26px 52px -20px rgba(24, 52, 55, .34); }
.ai-card[data-ai-cat]::after {     /* dog-ear on hover (the home P.04 page corner) */
  content: ""; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; pointer-events: none;
  background: linear-gradient(315deg, var(--ai-paper) 0 49%, rgba(24, 52, 55, .16) 50%, #FFFFFF 58%, #EFE9DF 100%);
  transform: scale(0); transform-origin: 100% 100%; transition: transform .45s var(--ai-ease);
}
.ai-card[data-ai-cat]:hover::after, .ai-card[data-ai-cat]:focus-within::after { transform: scale(1); }
.ai-ncards .ai-card__cat { display: flex; align-items: center; gap: 12px; color: var(--ai-n-acc); }
.ai-ncards .ai-card__cat::before { content: counter(ai-n, decimal-leading-zero) / ""; font-family: var(--ai-font-display); font-weight: 900; font-size: 2.25rem; line-height: 1; letter-spacing: 0; color: var(--ai-ink); }
.ai-card__title { word-break: normal; line-break: strict; text-wrap: pretty; }
.ai-card__more { color: var(--ai-teal-700); }
/* cover story = first visible card (works with the filter: [hidden] cards are skipped) */
.ai-ncards > .ai-card:not([hidden]):not(.ai-card:not([hidden]) ~ .ai-card) {
  --ai-n-rule: rgba(23, 98, 102, .09);
  background-image: repeating-linear-gradient(to bottom, transparent 0 35px, var(--ai-n-rule) 35px 36px);
}
.ai-ncards > .ai-card:not([hidden]):not(.ai-card:not([hidden]) ~ .ai-card) .ai-card__title { font-size: clamp(1.375rem, 1.05rem + 1.2vw, 2.125rem); line-height: 1.4; }
@media (min-width: 768px) {
  .ai-ncards > .ai-card:not([hidden]):not(.ai-card:not([hidden]) ~ .ai-card) { grid-column: span 2; padding: clamp(28px, 3vw, 44px); gap: 18px; }
  .ai-ncards > .ai-card:not([hidden]):not(.ai-card:not([hidden]) ~ .ai-card) .ai-card__cat::before { font-size: clamp(3rem, 2rem + 2vw, 4.25rem); }
  .ai-ncards > .ai-card:not([hidden]):not(.ai-card:not([hidden]) ~ .ai-card) .ai-card__sum { font-size: 1rem; max-width: 36em; }
}
/* filter swap (p-articles.js): the stage fades out/in; cards themselves keep the scroll stagger */
.ai-nstage { position: relative; }
.ai-notes-list .ai-ctabox { margin-top: clamp(48px, 6vw, 88px); }

/* ===================================================================== article */
.ai-art-page .ai-phero { padding-bottom: clamp(28px, 3.4vw, 52px); }
.ai-ahero__grid { display: grid; gap: 32px; align-items: end; }
.ai-ahero__title { font-size: clamp(1.75rem, 1.05rem + 2.5vw, 3.125rem); line-height: 1.34; max-width: 19em; word-break: normal; line-break: strict; text-wrap: pretty; }
.ai-art-page .ai-art-cat { background: var(--ai-n-bg); box-shadow: inset 0 0 0 1px var(--ai-rule-strong); gap: 8px; }
.ai-art-page .ai-art-cat::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ai-pink); }
.ai-art-page .ai-art-cat:hover { background: var(--ai-sheet); }
/* typographic cover (static: it only exists ≥900px, and a display:none → block switch would replay an entrance): notebook sheet in the category tint, vertical category title, highlighter, one small heart */
.ai-acover { display: none; }
@media (min-width: 900px) {
  .ai-ahero__grid { grid-template-columns: minmax(0, 1fr) clamp(240px, 24vw, 320px); gap: clamp(40px, 6vw, 96px); }
  .ai-acover {
    display: block; position: relative; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--ai-r-xs); rotate: 1.5deg;
    background: linear-gradient(to right, transparent 0 34px, rgba(252, 100, 148, .5) 34px 35px, transparent 35px),
      repeating-linear-gradient(to bottom, var(--ai-n-bg) 0 27px, var(--ai-n-rule) 27px 28px);
    box-shadow: inset 0 0 0 1px rgba(24, 52, 55, .08), var(--ai-shadow-sheet);
  }
  .ai-acover__top { position: absolute; left: 48px; right: 20px; top: 20px; display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; border-bottom: 1px solid var(--ai-rule-strong); font-size: .6875rem; letter-spacing: .24em; color: var(--ai-muted); }
  .ai-acover__top b { font-family: var(--ai-font-display); font-weight: 900; font-size: .9375rem; letter-spacing: .04em; color: var(--ai-teal-700); }
  .ai-acover__cat { position: absolute; z-index: 1; right: 30px; top: 66px; writing-mode: vertical-rl; font-family: var(--ai-font-display); font-weight: 900; font-size: clamp(1.75rem, 1rem + 1.4vw, 2.375rem); line-height: 1.15; letter-spacing: .14em; color: var(--ai-ink); max-height: calc(100% - 96px); }
  .ai-acover__hl { position: absolute; z-index: 0; right: 22px; top: 58px; width: 54px; height: calc(100% - 120px); overflow: visible; }
  .ai-acover__hl path { fill: none; stroke-width: 13; stroke-dasharray: 1 1; stroke-dashoffset: 0; }
  .ai-acover__hl .ai-hl__p1 { stroke: var(--ai-hl); }
  .ai-acover__hl .ai-hl__p2 { stroke: var(--ai-hl-2); stroke-width: 9; }
  .ai-acover__heart { position: absolute; left: 50px; bottom: 50px; width: 34px; height: 34px; color: var(--ai-pink); rotate: -10deg; }
  .ai-acover__vol { position: absolute; left: 50px; bottom: 22px; font-family: var(--ai-font-display); font-weight: 900; font-size: .8125rem; letter-spacing: .08em; color: var(--ai-teal-700); }
}

/* reading progress (fixed under the header; p-articles.js scrubs scaleX — motion only, hidden otherwise) */
.ai-art-progress { display: none; position: fixed; left: 0; right: 0; top: var(--ai-header-h); z-index: 870; height: 3px; pointer-events: none; }
.ai-art-progress.is-on { display: block; }
.ai-art-progress i { display: block; height: 100%; background: var(--ai-pink); transform: scaleX(0); transform-origin: 0 50%; }
.ai-menu-open .ai-art-progress { visibility: hidden; }

/* layout: reading column (≈ 36–40 CJK characters per line) + sticky 目錄 rail at ≥1200 */
.ai-art__layout { display: block; }
@media (max-width: 1199px) { .ai-art-page .ai-art__layout { margin-left: 0; } }   /* body lines up with the h1 (hero is full width) */
.ai-art-toc { display: none; }
@media (min-width: 1200px) {
  .ai-art-page .ai-art__layout { display: grid; grid-template-columns: 200px minmax(0, 720px); gap: 72px; justify-content: center; max-width: calc(200px + 72px + 720px + 2 * var(--ai-gutter)); }
  .ai-art-page .ai-ahero .ai-wrap { max-width: calc(200px + 72px + 720px + 2 * var(--ai-gutter)); }
  .ai-art-toc:not([hidden]) { display: block; position: sticky; top: calc(var(--ai-header-h) + 32px); align-self: start; max-height: calc(100vh - var(--ai-header-h) - 64px); overflow-y: auto; padding: 4px 4px 4px 0; }
}
.ai-art-toc__h { font-size: .75rem; letter-spacing: .28em; color: var(--ai-teal-700); padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--ai-rule-strong); }
.ai-art-toc__list { counter-reset: ai-toc; }
.ai-art-toc__list li { counter-increment: ai-toc; }
.ai-art-toc__list a { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 4px; padding: 7px 0 7px 12px; font-size: .875rem; line-height: 1.55; color: var(--ai-muted); text-decoration: none; transition: color .25s var(--ai-ease); }
.ai-art-toc__list a::before { content: counter(ai-toc, decimal-leading-zero) / ""; font-family: var(--ai-font-display); font-weight: 900; font-size: .75rem; line-height: 1.9; color: var(--ai-teal-700); }
.ai-art-toc__list a::after { content: ""; position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 2px; background: var(--ai-pink); transform: scaleY(0); transform-origin: 50% 0; transition: transform .35s var(--ai-ease); }
.ai-art-toc__list a:hover { color: var(--ai-ink); }
.ai-art-toc__list a[aria-current] { color: var(--ai-ink); font-weight: 600; }
.ai-art-toc__list a[aria-current]::after { transform: none; }

/* readable body: device fonts, 17–18px, leading 1.95, CJK-friendly breaking */
.ai-art-page .ai-prose { line-break: strict; text-align: start; font-feature-settings: "palt" 0; }
@media (min-width: 1025px) { .ai-art-page .ai-prose { font-size: 1.125rem; } }
.ai-art-page .ai-prose p, .ai-art-page .ai-prose li { text-wrap: pretty; }
.ai-art-page .ai-prose h2 { position: relative; padding-top: 18px; word-break: normal; line-break: strict; text-wrap: balance; }
.ai-art-page .ai-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 36px; height: 3px; border-radius: 2px; background: var(--ai-pink); }
/* key points: highlighter under <strong>; with motion it is drawn as the line scrolls in and undrawn on the way up */
.ai-art-page .ai-prose strong { background-image: linear-gradient(var(--ai-hl), var(--ai-hl)); background-size: 100% .42em; background-position: 0 90%; background-repeat: no-repeat; }
.ai-motion [data-ai-mark] strong { background-size: 0 .42em; transition: background-size .9s var(--ai-ease); }
.ai-motion [data-ai-mark] strong.is-lit { background-size: 100% .42em; }
/* 「黛比先說結論」: a note sheet in the category tint with the handwritten label on a highlighter */
.ai-art-page .ai-prose .dh-summary { position: relative; padding: 26px clamp(20px, 3vw, 32px) 24px; background: var(--ai-n-bg, var(--ai-sheet)); border-top: 0; box-shadow: inset 0 0 0 1px rgba(24, 52, 55, .08), var(--ai-shadow-sheet); }
.ai-art-page .ai-prose .dh-summary::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--ai-pink); }
.ai-art-page .ai-prose .dh-summary__label { display: inline-block; font-size: 1.1875rem; color: var(--ai-ink); background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 88% / 100% .45em no-repeat; }
.ai-article[data-ai-cat] .ai-prose .dh-summary { background: var(--ai-n-bg); }
.ai-art-page .ai-prose .dh-summary li::marker { content: "✓  "; color: var(--ai-teal-700); font-weight: 700; }
.ai-art-page .ai-prose .dh-summary ul { padding-left: 1.5em; }
/* ordered steps: round folio numbers (「3 步驟」「先記住三句話」) */
.ai-art-page .ai-prose ol { list-style: none; padding-left: 0; counter-reset: ai-ol; }
.ai-art-page .ai-prose ol > li { position: relative; padding-left: 2.6em; counter-increment: ai-ol; }
.ai-art-page .ai-prose ol > li + li { margin-top: .7em; }
.ai-art-page .ai-prose ol > li::before {
  content: counter(ai-ol) / ""; position: absolute; left: 0; top: .28em; width: 1.7em; height: 1.7em; display: grid; place-items: center; border-radius: 50%;
  font-family: var(--ai-font-display); font-weight: 900; font-size: .9em; line-height: 1; color: var(--ai-teal-700); background: var(--ai-teal-50); box-shadow: inset 0 0 0 1px rgba(23, 98, 102, .35);
}
/* images added by the client in the block editor stay inside the reading column */
.ai-art-page .ai-art__main { min-width: 0; }
.ai-art-page .ai-prose img { max-width: 100%; height: auto; }
/* tables: horizontal scroll on phones with the first column pinned (region is focusable, set by JS) */
.ai-art-page .ai-prose figure { position: relative; border-top: 2px solid var(--ai-ink); background: var(--ai-sheet); box-shadow: var(--ai-shadow-sheet); }
.ai-art-page .ai-prose figure:focus-visible { outline-offset: 4px; }
.ai-art-page .ai-prose table { min-width: 600px; font-size: .9375rem; }
.ai-art-page .ai-prose th:first-child, .ai-art-page .ai-prose td:first-child { position: sticky; left: 0; z-index: 1; background: var(--ai-sheet); box-shadow: 1px 0 0 var(--ai-rule); font-weight: 600; min-width: 8.5em; }
.ai-art-page .ai-prose thead th:first-child { background: var(--ai-paper-2); }
/* 資料來源: a small label and a numbered reference list */
.ai-art-page .ai-prose h2:has(+ .dh-sources) { margin-top: 3em; padding-top: 20px; font-family: var(--ai-font-body); font-weight: 700; font-size: .875rem; letter-spacing: .28em; color: var(--ai-teal-700); border-top: 1px solid var(--ai-rule-strong); }
.ai-art-page .ai-prose h2:has(+ .dh-sources)::before { display: none; }
.ai-art-page .ai-prose .dh-sources { list-style: none; padding-left: 0; counter-reset: ai-src; margin-top: .6em; }
.ai-art-page .ai-prose .dh-sources li { display: grid; grid-template-columns: 2.4em 1fr; gap: 6px; padding: 10px 0; margin: 0; border-bottom: 1px solid var(--ai-rule); counter-increment: ai-src; }
.ai-art-page .ai-prose .dh-sources li::before { content: counter(ai-src, decimal-leading-zero) / ""; font-family: var(--ai-font-display); font-weight: 900; font-size: .8125rem; color: var(--ai-teal-700); line-height: 2.1; }
.ai-art-page .ai-prose .dh-sources a { color: var(--ai-muted); text-decoration-color: var(--ai-rule-strong); }
.ai-art-page .ai-prose .dh-sources a:hover { color: var(--ai-teal-700); }

/* after the article: author, CTA, related, more */
.ai-art-page .ai-author { margin-top: clamp(40px, 5vw, 64px); align-items: center; }
.ai-art-page .ai-ctabox { margin-top: 24px; }
.ai-art-page .ai-related { margin-top: clamp(40px, 5vw, 64px); }
.ai-art-page .ai-related__h { display: flex; align-items: center; gap: 12px; }
.ai-art-page .ai-related__h::after { content: ""; flex: 1; height: 1px; background: var(--ai-rule-strong); }
@media (min-width: 640px) { .ai-art-page .ai-related .ai-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ai-art-more { display: grid; gap: 12px; margin-top: clamp(32px, 4vw, 48px); }
@media (min-width: 640px) { .ai-art-more { grid-template-columns: 1fr 1fr; } }
.ai-art-more__a { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; min-height: 72px; padding: 16px 22px; border-top: 3px solid var(--ai-ink); background: var(--ai-sheet); box-shadow: var(--ai-shadow-sheet); text-decoration: none; color: var(--ai-ink); }
.ai-art-more__a--cat { background: var(--ai-n-bg); }
.ai-art-more__p { font-family: var(--ai-font-display); font-weight: 900; font-size: .8125rem; color: var(--ai-teal-700); padding-right: 12px; border-right: 1px solid var(--ai-rule-strong); }
.ai-art-more__t { font-family: var(--ai-font-display); font-weight: 900; font-size: 1.1875rem; line-height: 1.4; background: linear-gradient(var(--ai-hl), var(--ai-hl)) 0 86% / 0 .42em no-repeat; transition: background-size .6s var(--ai-ease); justify-self: start; }
.ai-art-more__ar { font-size: 1.375rem; transition: transform .4s var(--ai-ease); }
.ai-art-more__a:hover .ai-art-more__t, .ai-art-more__a:focus-visible .ai-art-more__t { background-size: 100% .42em; }
.ai-art-more__a:hover .ai-art-more__ar { transform: translateX(6px); }

/* reduced motion: the h1 highlighter is simply drawn (site.css shortens durations but keeps delays) */
@media (prefers-reduced-motion: reduce) { .ai-nhero__mark .ai-hl__svg path { animation: none; } }