/* MyBodyAI Encyclopedia (/encyclopedia/), built by _data/encyclopedia/build.py.
   Extends /blog/blog.css: the article column is .blog-page. Wide screen: the
   entries on the left, the text in the middle, "On this page" on the right
   (from 1320 px); narrower, the right column folds into the text and the
   entries move under the article. */

:root {
  /* Body Status states, the app's own colours (frontend stateColors.ts). */
  --enc-alert: #ff3313; --enc-recovery: #ff8e00; --enc-steady: #d0e200; --enc-strong: #00db77; --enc-peak: #46a4ff;
  /* Heart-rate zones, the app's own colours (frontend index.css --zone-N). */
  --enc-z0: #7a7468; --enc-z1: #8b97aa; --enc-z2: #4f8cf0; --enc-z3: #22b97a; --enc-z4: #f5b02e; --enc-z5: #ef4f68;
  --enc-muted: rgba(200, 206, 216, 0.28);
  --enc-accent: var(--color-cyan);
  --enc-answer-bg: linear-gradient(135deg, rgba(0, 240, 255, 0.07), rgba(123, 47, 247, 0.07));
}
html.light {
  --enc-alert: #b3122e; --enc-recovery: #e06c00; --enc-steady: #5a6b00; --enc-strong: #00a050; --enc-peak: #3358dd;
  --enc-z0: #a8a196; --enc-z1: #6b7587; --enc-z2: #2563d6; --enc-z3: #0f8f5c; --enc-z4: #c98306; --enc-z5: #b8102f;
  --enc-muted: rgba(45, 49, 66, 0.22);
  --enc-accent: #085f6d;
  --enc-answer-bg: linear-gradient(135deg, rgba(8, 95, 109, 0.07), rgba(123, 47, 247, 0.06));
}
.tone-alert { --tone: var(--enc-alert); } .tone-recovery { --tone: var(--enc-recovery); }
.tone-steady { --tone: var(--enc-steady); } .tone-strong { --tone: var(--enc-strong); }
.tone-peak { --tone: var(--enc-peak); }
.tone-z0 { --tone: var(--enc-z0); } .tone-z1 { --tone: var(--enc-z1); } .tone-z2 { --tone: var(--enc-z2); }
.tone-z3 { --tone: var(--enc-z3); } .tone-z4 { --tone: var(--enc-z4); } .tone-z5 { --tone: var(--enc-z5); }
.tone-s1 { --tone: var(--color-score-critical); } .tone-s2 { --tone: var(--color-score-low); }
.tone-s3 { --tone: var(--color-score-fair); } .tone-s4 { --tone: var(--color-score-good); }
.tone-s5 { --tone: var(--color-score-excellent); }
.tone-muted { --tone: var(--enc-muted); } .tone-accent { --tone: var(--enc-accent); }

/* ── Layout ─────────────────────────────────────────────────── */
.enc-wrap { max-width: 1240px; margin: 0 auto; }
.enc-side, .enc-rail { display: none; }
@media (min-width: 1100px) {
  .enc-wrap { display: grid; grid-template-columns: 230px minmax(0, 720px); column-gap: 44px; justify-content: center; padding: 0 20px; }
  .enc-side { display: block; position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; padding: 2.5rem 4px 2rem 0; font-size: 0.85rem; }
  .enc-side-mobile { display: none; }
  .enc-wrap .enc-article.blog-page { margin: 0; padding-left: 0; padding-right: 0; max-width: none; }
}
@media (min-width: 1320px) {
  .enc-wrap { grid-template-columns: 220px minmax(0, 720px) 210px; column-gap: 40px; }
  .enc-rail { display: block; position: sticky; top: 72px; align-self: start; max-height: calc(100vh - 88px); overflow-y: auto; padding: 2.5rem 0 2rem; font-size: 0.82rem; }
  .enc-toc { display: none; }
}
.enc-side-all { display: inline-block; color: var(--color-cyan); text-decoration: none; font-weight: 600; margin-bottom: 0.75rem; }
html.light .enc-side-all { color: var(--enc-accent); }
.enc-side-h, .enc-rail-h { margin: 1.1rem 0 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-muted); }
.enc-rail-h { margin-top: 0; }
.enc-side ul, .enc-side-mobile ul, .enc-rail ol { list-style: none; margin: 0; padding: 0; }
.enc-side li a, .enc-side-mobile li a { display: block; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--color-text-secondary); text-decoration: none; line-height: 1.35; }
.enc-side li a:hover, .enc-side-mobile li a:hover { color: var(--color-text-primary); background: var(--color-bg-hover); }
.enc-side li a[aria-current="page"], .enc-side-mobile li a[aria-current="page"] { color: var(--enc-accent); background: var(--color-bg-hover); font-weight: 600; }
.enc-rail ol a { display: block; padding: 5px 0 5px 12px; border-left: 2px solid var(--color-border-medium); color: var(--color-text-muted); text-decoration: none; line-height: 1.35; }
.enc-rail ol a:hover { color: var(--color-text-primary); }
.enc-rail ol a[aria-current="true"] { color: var(--color-text-primary); border-left-color: var(--enc-accent); font-weight: 600; }
.enc-rail-top { display: inline-block; margin-top: 1rem; font-size: 0.8rem; color: var(--color-text-muted); text-decoration: none; }
.enc-rail-top:hover { color: var(--enc-accent); }

.enc-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 1001; pointer-events: none; }
.enc-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-cyan), var(--color-purple)); transform: scaleX(0); transform-origin: 0 50%; }
.enc-top { position: fixed; right: 16px; bottom: 20px; z-index: 900; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--color-bg-elevated); border: 1px solid var(--color-border-glass-hover); color: var(--color-text-primary); text-decoration: none; font-size: 1.1rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); }
.enc-top[hidden] { display: none; }
@media (min-width: 1320px) { .enc-top { display: none; } }

/* ── Header and short answer ────────────────────────────────── */
.enc-crumbs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 0.8rem; color: var(--color-text-muted); margin-bottom: 1.25rem; }
.enc-crumbs a { color: var(--enc-accent); text-decoration: none; }
.enc-article .blog-header { text-align: left; margin-bottom: 1.75rem; padding-bottom: 0; border-bottom: 0; }
.enc-article .blog-header h1 { margin-bottom: 0.5rem; }
.enc-article .blog-meta { justify-content: flex-start; margin-bottom: 1.25rem; }
.enc-lead { font-size: 1.02rem; line-height: 1.7; color: var(--color-text-primary); margin: 0 0 1rem; }
.enc-lead a, .enc-gloss a, .enc-none a { color: var(--enc-accent); }
.enc-answer { position: relative; border: 1px solid var(--color-border-glass-hover); border-radius: var(--radius-lg); background: var(--enc-answer-bg), var(--color-bg-card); padding: 18px 22px 6px; scroll-margin-top: 80px; }
.enc-answer-k { margin: 0 0 0.5rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--enc-accent); }
.enc-answer .enc-lead { font-size: 1rem; }
.enc-answer ul, .enc-answer ol { margin: 0 0 1rem 1.1rem; padding: 0; }
.enc-answer li { font-size: 0.95rem; line-height: 1.65; color: var(--color-text-primary); margin-bottom: 0.35rem; }
.enc-answer p { font-size: 0.95rem; line-height: 1.7; color: var(--color-text-primary); }
.enc-answer a { color: var(--enc-accent); }

.enc-toc { border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); background: var(--color-bg-card); padding: 12px 18px; margin: 0 0 2rem; }
.enc-toc summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); font-size: 0.9rem; min-height: 28px; display: flex; align-items: center; }
.enc-toc ol { margin: 10px 0 2px 1.2rem; padding: 0; font-size: 0.88rem; line-height: 1.75; }
.enc-toc a { color: var(--color-text-secondary); text-decoration: none; }
.enc-toc a:hover { color: var(--enc-accent); }

/* ── Body ───────────────────────────────────────────────────── */
.enc-body h2 { padding-top: 1.75rem; margin-top: 1.5rem; border-top: 1px solid var(--color-border-subtle); }
.enc-body > h2:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.enc-body h2, .enc-body h3, .enc-body h4 { scroll-margin-top: 80px; position: relative; }
.enc-body li { line-height: 1.75; }
.enc-anchor { margin-left: 8px; color: var(--color-text-muted) !important; text-decoration: none !important; font-weight: 400; opacity: 0; transition: opacity 0.15s; }
.enc-body h2:hover .enc-anchor, .enc-body h3:hover .enc-anchor, .enc-anchor:focus { opacity: 1; }
@media (hover: none) { .enc-anchor { opacity: 0.5; } }
.enc-body :target { animation: enc-flash 1.6s ease-out 1; }
@keyframes enc-flash { from { background: var(--color-bg-hover); } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { .enc-body :target { animation: none; } .enc-anchor { transition: none; } }

.enc-box { border: 1px solid var(--color-border-glass); border-left: 3px solid var(--enc-accent); border-radius: var(--radius-md); background: var(--color-bg-card); padding: 12px 18px 2px; margin: 0 0 1.5rem; }
.enc-box-k { margin: 0 0 0.4rem !important; font-size: 0.72rem !important; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--enc-accent) !important; line-height: 1.4 !important; }
.enc-box-example { border-left-color: var(--color-purple-light, #a78bfa); }
.enc-box-example .enc-box-k { color: var(--color-purple-light, #a78bfa) !important; }
.enc-box-warn { border-left-color: var(--enc-recovery); }
.enc-box-warn .enc-box-k { color: var(--enc-recovery) !important; }
.enc-box-tip { border-left-color: var(--enc-strong); }
.enc-box-tip .enc-box-k { color: var(--enc-strong) !important; }
.enc-box-premium { border-left-color: var(--color-yellow, #ffcc00); background: linear-gradient(135deg, rgba(255, 204, 0, 0.06), transparent), var(--color-bg-card); }
.enc-box-premium .enc-box-k { color: var(--color-yellow, #ffcc00) !important; }
html.light .enc-box-example .enc-box-k { color: #6a3fd0 !important; }
html.light .enc-box-premium { border-left-color: #8a6a00; }
html.light .enc-box-premium .enc-box-k { color: #7a5c00 !important; }
.enc-box p, .enc-box li { font-size: 0.92rem; }

/* Exact calculation: folded detail for the curious and for support links. */
.enc-calc { border: 1px dashed var(--color-border-glass-hover); border-radius: var(--radius-md); margin: 0 0 1.75rem; background: var(--color-bg-surface); }
.enc-calc > summary { list-style: none; cursor: pointer; padding: 12px 18px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; min-height: 44px; box-sizing: border-box; }
.enc-calc > summary::-webkit-details-marker { display: none; }
.enc-calc > summary::after { content: "+"; margin-left: auto; font-weight: 700; color: var(--enc-accent); font-size: 1.1rem; line-height: 1; }
.enc-calc[open] > summary::after { content: "\2212"; }
.enc-calc-k { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--enc-accent); }
.enc-calc-t { font-weight: 600; color: var(--color-text-primary); font-size: 0.95rem; }
.enc-calc-b { padding: 0 18px 4px; border-top: 1px dashed var(--color-border-glass); }
.enc-calc-b > h3:first-child, .enc-calc-b > p:first-child { margin-top: 1rem; }
.enc-calc-b h3 { font-size: 1.02rem; }

.enc-table { overflow-x: auto; margin: 0 0 1.5rem; }
.enc-table table { border-collapse: collapse; width: 100%; font-size: 0.88rem; }
.enc-table th, .enc-table td { border-bottom: 1px solid var(--color-border-glass); padding: 8px 10px; text-align: left; vertical-align: top; color: var(--color-text-secondary); line-height: 1.5; }
.enc-table th { color: var(--color-text-primary); font-weight: 600; }

/* ── Figures ────────────────────────────────────────────────── */
.enc-fig { margin: 0 0 1.75rem; padding: 16px 18px 12px; border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); background: var(--color-bg-card); }
.enc-fig-t { margin: 0 0 0.9rem !important; font-weight: 700; color: var(--color-text-primary) !important; font-size: 0.95rem !important; line-height: 1.4 !important; }
.enc-fig-u { font-weight: 400; color: var(--color-text-muted); }
.enc-fig figcaption { font-size: 0.82rem; color: var(--color-text-muted); line-height: 1.55; margin-top: 0.6rem; }
.enc-scale { position: relative; padding-bottom: 22px; }
.enc-scale-bar { display: flex; gap: 2px; height: 18px; border-radius: 9px; overflow: hidden; }
.enc-band { display: block; min-width: 2px; background: var(--tone); }
.enc-scale-ticks { position: absolute; left: 0; right: 0; bottom: 0; height: 18px; }
.enc-scale-ticks span { position: absolute; top: 2px; transform: translateX(-50%); font-size: 0.75rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.enc-scale-ticks span:first-child { transform: none; }
.enc-scale-ticks span:last-child { transform: translateX(-100%); }
.enc-legend { list-style: none; margin: 0.6rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px 16px; }
.enc-legend li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--color-text-secondary); line-height: 1.4; margin: 0 !important; }
.enc-legend strong { color: var(--color-text-primary); font-weight: 600; }
.enc-leg-r { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--color-text-muted); white-space: nowrap; }
.enc-sw { flex: none; width: 12px; height: 12px; border-radius: 3px; background: var(--tone); }
.enc-steps { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.enc-step { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 0 0 14px; margin: 0 !important; }
.enc-step:not(:last-child)::before { content: ""; position: absolute; left: 13px; top: 28px; bottom: 2px; width: 2px; background: var(--color-border-medium); }
.enc-step-n { flex: none; width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 700; color: var(--color-bg-deep); background: var(--tone); }
.enc-step-b { display: flex; flex-direction: column; gap: 1px; padding-top: 3px; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.enc-step-b strong { color: var(--color-text-primary); font-size: 0.95rem; }
html.light .enc-step-n { color: var(--color-bg-elevated); }
html.light .tone-muted .enc-step-n { color: var(--color-text-primary); }
.tone-muted .enc-step-n { color: var(--color-text-primary); }

/* ── End of an entry ────────────────────────────────────────── */
.enc-helpful { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 3rem 0 1.5rem; padding: 16px 20px; border: 1px solid var(--color-border-glass); border-radius: var(--radius-lg); background: var(--color-bg-card); }
.enc-helpful-q { margin: 0; font-weight: 600; color: var(--color-text-primary); font-size: 0.95rem; }
.enc-helpful-a { display: flex; gap: 8px; }
.enc-helpful button { min-height: 40px; min-width: 64px; padding: 6px 16px; border-radius: 999px; border: 1px solid var(--color-border-glass-hover); background: transparent; color: var(--color-text-primary); font: inherit; font-weight: 600; font-size: 0.9rem; cursor: pointer; }
.enc-helpful button:hover:not(:disabled) { border-color: var(--enc-accent); color: var(--enc-accent); }
.enc-helpful button:disabled { cursor: default; opacity: 0.55; }
.enc-helpful button[aria-pressed="true"] { opacity: 1; border-color: var(--enc-accent); color: var(--enc-accent); }
.enc-helpful-thanks { flex-basis: 100%; margin: 0; font-size: 0.88rem; color: var(--color-text-secondary); }
.enc-helpful-thanks a { color: var(--enc-accent); }
.enc-related { margin: 0 0 1.5rem; }
.enc-related-h { font-weight: 700; color: var(--color-text-primary); margin: 0 0 0.75rem; }
.enc-related ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .enc-related ul { grid-template-columns: repeat(3, 1fr); } }
.enc-related a { display: flex; flex-direction: column; gap: 4px; height: 100%; box-sizing: border-box; padding: 14px 16px; border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); background: var(--color-bg-card); text-decoration: none; }
.enc-related a:hover { border-color: var(--color-border-glass-hover); }
.enc-related strong { color: var(--enc-accent); font-size: 0.95rem; }
.enc-related span { color: var(--color-text-muted); font-size: 0.82rem; line-height: 1.5; }

.enc-ask { border: 1px solid var(--color-border-glass); border-radius: var(--radius-lg); background: var(--color-bg-card); padding: 20px 22px; margin: 1.5rem 0 1rem; }
.enc-ask p { margin: 0 0 0.75rem; color: var(--color-text-secondary); font-size: 0.92rem; line-height: 1.6; }
.enc-ask .enc-ask-h { color: var(--color-text-primary); font-weight: 700; font-size: 1rem; }
.enc-ask-a { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px; border: 1px solid var(--enc-accent); color: var(--enc-accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; min-height: 44px; box-sizing: border-box; }
.enc-disclaimer { font-size: 0.8rem; color: var(--color-text-muted); line-height: 1.6; }

.enc-pn { display: flex; gap: 12px; flex-wrap: wrap; margin: 1.5rem 0; }
.enc-pn a { flex: 1 1 200px; border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); padding: 12px 16px; text-decoration: none; color: var(--color-text-primary); font-weight: 600; font-size: 0.92rem; }
.enc-pn a span { display: block; font-size: 0.75rem; font-weight: 400; color: var(--color-text-muted); }
.enc-pn .enc-next { text-align: right; }

.enc-side-mobile { border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); padding: 12px 16px; margin-top: 1rem; background: var(--color-bg-card); }
.enc-side-mobile summary { cursor: pointer; font-weight: 600; color: var(--color-text-primary); min-height: 28px; }

/* ── Index ──────────────────────────────────────────────────── */
.enc-home .blog-header { text-align: left; }
.enc-search { margin: 0 0 2.25rem; position: relative; }
.enc-search label { display: block; font-weight: 600; font-size: 0.9rem; color: var(--color-text-primary); margin-bottom: 6px; }
.enc-search-box { position: relative; }
.enc-search input { width: 100%; box-sizing: border-box; min-height: 54px; padding: 12px 48px 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--color-border-glass-hover); background: var(--color-bg-surface); color: var(--color-text-primary); font: inherit; font-size: 1rem; }
.enc-search input:focus { outline: 2px solid var(--enc-accent); outline-offset: 1px; }
.enc-search kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font: inherit; font-size: 0.78rem; color: var(--color-text-muted); border: 1px solid var(--color-border-medium); border-radius: 6px; padding: 1px 7px; pointer-events: none; }
@media (hover: none) { .enc-search kbd { display: none; } }
.enc-results { list-style: none; margin: 10px 0 0; padding: 0; border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); background: var(--color-bg-card); max-height: 60vh; overflow-y: auto; }
.enc-results li a { display: block; padding: 10px 14px; text-decoration: none; border-bottom: 1px solid var(--color-border-glass); }
.enc-results li:last-child a { border-bottom: 0; }
.enc-results .r-t { display: block; color: var(--color-text-primary); font-weight: 600; font-size: 0.92rem; }
.enc-results .r-p { display: block; color: var(--color-text-muted); font-size: 0.78rem; }
.enc-none { margin-top: 10px; color: var(--color-text-secondary); font-size: 0.9rem; }
.enc-start h2, .enc-tiles h2, .enc-sec h2 { font-size: 1.2rem; margin: 2.25rem 0 0.9rem; color: var(--color-text-primary); }
.enc-start ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
@media (min-width: 700px) { .enc-start ul { grid-template-columns: 1fr 1fr; } }
.enc-start a { display: flex; flex-direction: column; gap: 3px; height: 100%; box-sizing: border-box; padding: 12px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border-glass); background: var(--color-bg-card); text-decoration: none; }
.enc-start a:hover { border-color: var(--color-border-glass-hover); }
.enc-start strong { color: var(--color-text-primary); font-size: 0.92rem; line-height: 1.45; font-weight: 600; }
.enc-start span { color: var(--color-text-muted); font-size: 0.78rem; }
.enc-tiles ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
@media (min-width: 700px) { .enc-tiles ul { grid-template-columns: repeat(3, 1fr); } }
.enc-tiles a { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: var(--radius-md); border: 1px solid var(--color-border-glass); background: var(--enc-answer-bg), var(--color-bg-card); text-decoration: none; min-height: 64px; box-sizing: border-box; }
.enc-tiles a:hover { border-color: var(--color-border-glass-hover); }
.enc-tiles strong { color: var(--color-text-primary); font-size: 0.95rem; }
.enc-tiles span { color: var(--color-text-muted); font-size: 0.8rem; }
.enc-sec { scroll-margin-top: 80px; }
.enc-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 700px) { .enc-cards { grid-template-columns: 1fr 1fr; } }
.enc-card { border: 1px solid var(--color-border-glass); border-radius: var(--radius-md); background: var(--color-bg-card); padding: 14px 18px; min-width: 0; }
.enc-card-t { color: var(--enc-accent); font-weight: 700; text-decoration: none; font-size: 1rem; }
.enc-card p { margin: 6px 0 0; color: var(--color-text-secondary); font-size: 0.88rem; line-height: 1.55; }
.enc-gloss { margin-top: 2rem; color: var(--color-text-secondary); font-size: 0.9rem; }

@media print {
  .enc-side, .enc-side-mobile, .enc-pn, .enc-ask, .enc-anchor, .enc-search, .enc-rail, .enc-progress, .enc-top, .enc-helpful { display: none !important; }
}