/* 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. Below its breakpoint the TOC stays in normal article flow —
   nothing here applies.

   Two breakpoints, scoped by whether the post is canonical-managed (the
   Article System renderer; currently just PILOT-001/301, marked with
   .is-yfd-canonical in single.php) or a legacy long-form post (664, 4549,
   their /en/ mirrors): canonical posts get the lower 1100px breakpoint per
   Executive Office visual QA (PILOT-001 hotfix Slice 1, 17 July 2026);
   legacy posts keep the original 1400px so their layout is unaffected by
   this change. */
@media (min-width: 1400px) {
  .has-sidebar-toc:not(.is-yfd-canonical) .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:not(.is-yfd-canonical) .post-body .yfd-toc ol { columns: 1 !important; }
  .has-sidebar-toc:not(.is-yfd-canonical) .post-body .yfd-toc li { white-space: normal !important; overflow-wrap: break-word; }
}
@media (min-width: 1100px) {
  .has-sidebar-toc.is-yfd-canonical .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.is-yfd-canonical .post-body .yfd-toc ol { columns: 1 !important; }
  .has-sidebar-toc.is-yfd-canonical .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; }