/* YFD long-form article layout: TOC box + desktop sticky-left sidebar.
   Loaded only on posts explicitly opted in (yfd_long_form_post_ids()) via a
   conditional wp_enqueue_style() in functions.php and a matching
   .has-sidebar-toc class added in single.php.

   Base .yfd-toc box styling (this block) was previously duplicated as a
   per-post inline <style> block (see YFD-ASSET-001, post 4549/4577) — moved
   here so any post opted into this layout gets it from one shared source
   instead of copy-pasting the block again. Values unchanged from that
   original inline copy. !important kept for the same documented reason as
   every other rule in this file: this post's LiteSpeed CSS-combine output
   loads asynchronously and can otherwise land after this block in the
   cascade. Native <details>/<summary> gives keyboard access and mobile
   collapse for free — no JS needed for the TOC itself. */
.post-body .yfd-toc { background: var(--paper-card) !important; border: 1px solid var(--line) !important; border-radius: 10px !important; padding: 2px 20px 18px !important; margin: 1.8em 0 2.2em !important; }
.post-body .yfd-toc summary { cursor: pointer; padding: 14px 0 !important; font-weight: 600 !important; color: var(--ink) !important; font-size: 0.98rem !important; min-height: 24px; }
.post-body .yfd-toc summary:hover { color: var(--forest) !important; }
.post-body .yfd-toc ol { margin: 4px 0 0 !important; padding-left: 1.3em !important; }
.post-body .yfd-toc li { margin-bottom: 7px !important; font-size: 0.92rem !important; line-height: 1.5 !important; }
.post-body .yfd-toc a { color: var(--forest) !important; text-decoration: none !important; }
.post-body .yfd-toc a:hover { text-decoration: underline !important; color: var(--amber-deep) !important; }
@media (min-width: 640px) { .post-body .yfd-toc ol { columns: 2; column-gap: 28px; } }

/* Sticky-left desktop sidebar variant of the TOC above.
   The article shell/body is NEVER resized or repositioned by this file —
   .post-shell and .post-body keep their original width, padding and centered
   axis exactly as on every other article. The TOC is pulled left via a
   negative margin only, into the page's existing outer margin outside the
   760px article column, using position:sticky so it never overlaps or shifts
   the article. Breakpoint is 1400px (not 1200px) because the article's own
   centered margin at 1200px (~220px/side) is narrower than the TOC needs
   (~288px) — activating any earlier would force the shell to widen or the
   TOC to overlap the article, which is exactly what this fix removes.
   Below 1400px the TOC stays in normal article flow — nothing here applies. */
@media (min-width: 1400px) {
  .has-sidebar-toc .post-body .yfd-toc {
    float: left !important;
    width: 240px !important;
    margin: 0 0 2em -288px !important;
    position: sticky !important;
    top: 96px !important;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
  .has-sidebar-toc .post-body .yfd-toc ol { columns: 1 !important; }
  .has-sidebar-toc .post-body .yfd-toc li { white-space: normal !important; overflow-wrap: break-word; }
}

/* Chapter bands — restrained background tint grouping consecutive H2
   sections into reading "chapters." Applies at all widths (mobile through
   desktop), same as the rest of the article body — this is a reading-rhythm
   aid, not a desktop-only layout feature. Deliberately no border, no
   box-shadow, no width change: background-color only, fully inside the
   existing article column, so it cannot move/widen/narrow the article or
   interact with the sticky TOC in any way. Minimal padding (1px) exists only
   to stop the first/last child's own margin from collapsing through the
   band's edge — actual visual spacing still comes from each element's own
   existing margin, unchanged. */
.post-body .yfd-chapter { padding: 1px clamp(20px, 4vw, 28px); margin: 2em 0; border-radius: 12px; }
.post-body .yfd-chapter-cream { background: var(--amber-soft); }
.post-body .yfd-chapter-green { background: var(--forest-soft); }

/* Reader-intent router — compact jump-link block right after 先讲结论.
   Same restrained treatment as the rest of the article: no width change,
   no card shadow, just a light bordered box using the existing palette. */
.post-body .yfd-router { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 0 0 2em; display: grid; gap: 8px; }
.post-body .yfd-router-title { grid-column: 1 / -1; margin: 0 0 2px; font-weight: 600; font-size: 0.92rem; color: var(--ink); }
.post-body .yfd-router a { color: var(--forest); text-decoration: none; font-size: 0.95rem; line-height: 1.5; }
.post-body .yfd-router a:hover { text-decoration: underline; color: var(--amber-deep); }
@media (min-width: 640px) { .post-body .yfd-router { grid-template-columns: 1fr 1fr; } }

/* Self-assessment ("退出前 1 分钟自测") — sits right after the router.
   Progressive enhancement: #yfd-quiz starts [hidden] in markup and is only
   revealed by yfd-long-form-toc.js; a no-JS visitor sees the <noscript>
   fallback (styled by .yfd-assess-noscript) instead. No layout width change,
   same restrained card language as the rest of the article. */
.post-body .yfd-assessment { background: var(--paper-card); border: 1px solid var(--line); border-radius: 10px; padding: clamp(20px, 3vw, 28px); margin: 0 0 2em; }
.post-body .yfd-assessment h3 { margin-top: 0; }
.post-body .yfd-assess-noscript p { margin: 0.6em 0; }

.post-body .yfd-quiz-progress { font-size: 0.85rem; font-weight: 600; color: var(--ink-mute); margin-bottom: 14px; }

.post-body .yfd-quiz-step { border: 0; padding: 0; margin: 0 0 1.2em; }
.post-body .yfd-quiz-step legend { font-weight: 600; color: var(--red-ink); margin-bottom: 10px; padding: 0; }
.post-body .yfd-quiz-step label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin-bottom: 4px; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; min-height: 44px; }
.post-body .yfd-quiz-step label:hover { border-color: var(--forest); }
.post-body .yfd-quiz-step input[type="radio"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--forest); }

.post-body .yfd-quiz-nav { display: flex; gap: 6px; margin-top: 4px; }
.post-body .yfd-quiz-nav button, .post-body .yfd-quiz-restart { font: inherit; font-weight: 600; padding: 12px 20px; min-height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-card); color: var(--ink); cursor: pointer; }
.post-body .yfd-quiz-next, .post-body .yfd-quiz-restart { background: var(--forest); color: #fff; border-color: var(--forest); }
.post-body .yfd-quiz-back:disabled { opacity: 0.4; cursor: not-allowed; }
.post-body .yfd-quiz-hint { font-size: 0.85rem; color: var(--red-ink); margin: 8px 0 0; }

.post-body .yfd-quiz-result h4 { margin-top: 0; }
.post-body .yfd-quiz-links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.post-body .yfd-quiz-links a { font-size: 0.92rem; color: var(--forest); text-decoration: none; }
.post-body .yfd-quiz-links a:hover { text-decoration: underline; }
.post-body .yfd-quiz-link-primary { font-weight: 600; padding: 10px 14px; border: 1px solid var(--forest); border-radius: 8px; }

.post-body .yfd-quiz-warning { font-size: 0.9rem; color: var(--ink-mute); border-left: 3px solid var(--amber-deep); padding: 8px 12px; margin: 10px 0 0; }
.post-body .yfd-quiz-extra { font-size: 0.92rem; color: var(--ink-mute); margin: 10px 0 0; }

/* Consultation CTA (outcome 2 only) — deliberately quiet: no button, no box,
   no colour block, just a dashed divider and an underlined text link, so it
   reads as an optional next step rather than a lead-gen pitch. */
.post-body .yfd-quiz-cta { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.post-body .yfd-quiz-cta-label { font-weight: 600; font-size: 0.9rem; margin: 0 0 6px; color: var(--ink-mute); }
.post-body .yfd-quiz-cta p { font-size: 0.88rem; color: var(--ink-mute); margin: 0 0 8px; }
.post-body .yfd-quiz-cta-link { font-size: 0.88rem; color: var(--forest); text-decoration: underline; }

.post-body .yfd-quiz *:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* Long-form heading hierarchy — this file only loads on posts opted into the
   long-form layout (yfd_long_form_post_ids()), so these overrides never reach
   any other post. Body colour (var(--ink), charcoal) and article width
   (.post-shell, 760px) are untouched — both still come from single.php's base
   rules exactly as before. !important matches this file's existing convention
   (needed because this post's LiteSpeed CSS-combine output loads
   asynchronously and can otherwise land after single.php's base h2/h3 rules).
   Single-property margin-top overrides (not the full margin shorthand) so
   each heading's existing bottom-spacing from single.php is left alone. */
.post-body h2 { color: var(--forest-deep) !important; font-weight: 700 !important; margin-top: 2.4em !important; position: relative; }
.post-body h2::after { content: ""; display: block; width: 48px; height: 3px; background: var(--amber-deep); border-radius: 2px; margin-top: 0.5em; }
.post-body h3 { color: var(--amber-deep) !important; margin-top: 1.8em !important; }

/* YFD Editorial Design System — reusable decision-question emphasis.
   For the actual decision/reflection prompt inside a checklist item or
   callout (e.g. "Does PRS improve my retirement plan?"), not for headings,
   educational Q&A, table cells, notes or disclaimers — apply this class only
   to the question text itself, leaving any label prefix ("Tax outcome:") in
   its own <strong> so only the question reads in YFD red. */
.post-body .yfd-question { color: var(--red-ink) !important; font-weight: 700 !important; }