/* Explain this chart (2026-10-16, js/74-explain.js; design _audits/2026-10-16-explain-mockup-3.html): the explanation
   joins the chart's card as one sheet; the points read by age; the chart stays in view while you read. */
.xc-btn { display:inline-flex; align-items:center; gap:8px; min-height:38px; margin-left:auto; padding:0 14px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px;
  background:var(--s-card, var(--c-gray-99)); color:var(--s-ink, var(--c-slate-15)); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.xc-btn:hover { border-color:var(--s-line3, var(--c-slate-85)); } .xc-btn.on { border-color:var(--s-ink, var(--c-slate-15)); }
.xc-btn:focus-visible, .xc-read li:focus-visible, .xc-link:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
#cashflowContent .cf-top { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.panel.xc-joined { border-bottom-left-radius:0 !important; border-bottom-right-radius:0 !important; margin-bottom:0 !important; }
.xc { margin:0 0 18px; background:var(--s-card, var(--c-gray-99)); border:1px solid var(--s-line, var(--c-gray-90)); border-top:0; border-radius:0 0 18px 18px; }
.xc[hidden] { display:none; }
.xc-in { padding:22px 28px 26px; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.xc-lede { margin:0; max-width:56ch; font-size:19px; line-height:1.45; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-15)); }
.xc-sub { margin:4px 0 18px; font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.xc-grid { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:0 40px; align-items:start; }
.xc-read { list-style:none; margin:0; padding:0; }
.xc-read li { display:grid; grid-template-columns:96px minmax(0,1fr); gap:16px; padding:14px 0 14px 14px; border-top:1px solid var(--s-line, var(--c-gray-90)); border-left:2px solid transparent; cursor:pointer; }
.xc-read li:last-child { border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
.xc-read li:hover { background:var(--s-soft, var(--c-gray-95)); }
.xc-age { font-size:13px; font-weight:700; color:var(--s-muted, var(--c-slate-55)); padding-top:2px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.xc-read p, .xc-step p { margin:0; max-width:64ch; font-size:15px; line-height:1.6; color:var(--s-ink2, var(--c-slate-35)); font-variant-numeric:tabular-nums; }
.xc-read p b, .xc-step p b { font-weight:600; color:var(--s-ink, var(--c-slate-15)); }
.xc-read li.on { border-left-color:var(--s-blue, var(--c-teal-50)); background:linear-gradient(90deg, rgba(var(--s-blue-rgb, var(--c-teal-50-rgb)), .06), transparent 60%); }
.xc-read li.on .xc-age { color:var(--s-blue, var(--c-teal-50)); }
.xc-link { display:inline-block; margin-top:12px; padding:0; border:0; background:none; font:inherit; font-size:14px; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
.xc-link:hover { text-decoration:underline; } .xc-inline { margin:0; font-size:inherit; }
.xc-step { padding:16px 18px 14px; border:1px solid var(--s-line, var(--c-gray-90)); border-left:2px solid var(--s-blue, var(--c-teal-50)); border-radius:0 12px 12px 0; }
.xc-step .xc-age { color:var(--s-blue, var(--c-teal-50)); } .xc-step p { margin:4px 0 14px; }
.xc-step nav { display:flex; justify-content:space-between; gap:10px; }
.xc-step nav button { min-width:104px; min-height:40px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.xc-step nav button:disabled { opacity:.4; cursor:default; }
.xc-side h3 { margin:0 0 8px; font-size:14px; color:var(--s-ink, var(--c-slate-15)); }
.xc-side p { margin:0; font-size:13.5px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
.xc-mini { display:flex; gap:14px; align-items:center; margin:2px 0 18px; } .xc-mini svg { flex:none; }
.xc-mini dl { margin:0; font-size:13px; line-height:1.45; color:var(--s-ink2, var(--c-slate-35)); } .xc-mini dt { font-weight:600; color:var(--s-ink, var(--c-slate-15)); } .xc-mini dd { margin:0 0 4px; }
.xc-m0 { stroke:var(--s-muted, var(--c-slate-55)); } .xc-m1 { fill:var(--c-amber-75b, var(--s-amber)); } .xc-m2 { fill:var(--c-blue-60c, var(--s-blue)); } .xc-m3 { fill:var(--c-pink-70, var(--s-violet)); } .xc-m4 { fill:var(--c-green-50, var(--s-green)); }
.xc-look { margin-top:16px; padding-top:14px; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.xc-ask { margin-top:16px; } .xc-ask label { display:block; margin-bottom:6px; font-size:13px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); }
.xc-ask div { display:flex; gap:6px; } .xc-ask input { flex:1; min-width:0; min-height:40px; padding:0 12px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; font:inherit; font-size:14px; background:var(--s-card, var(--c-gray-99)); color:var(--s-ink, var(--c-slate-15)); }
.xc-ask button { min-height:40px; padding:0 14px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-weight:600; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
/* questions about the chart: suggestions, then the answer under the box */
.xc-tries { display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 0; }
.xc-try { min-height:32px; padding:4px 11px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:16px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:13px; color:var(--s-ink2, var(--c-slate-35)); text-align:left; cursor:pointer; }
.xc-try:hover { border-color:var(--s-line3, var(--c-slate-85)); color:var(--s-ink, var(--c-slate-15)); }
.xc-try:focus-visible, .xc-done:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
.xc-ans { margin-top:12px; padding:12px 14px; border-left:2px solid var(--s-blue, var(--c-teal-50)); background:var(--s-soft, var(--c-gray-95)); border-radius:0 10px 10px 0; }
.xc-ans h4 { margin:0 0 4px; font-size:13.5px; color:var(--s-ink, var(--c-slate-15)); }
.xc-ans p { margin:0; font-size:13.5px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); font-variant-numeric:tabular-nums; }
.xc-ans p b { color:var(--s-ink, var(--c-slate-15)); font-weight:600; }
.xc-ans .xc-ans-acts { display:flex; flex-wrap:wrap; gap:4px 16px; }
.xc-ans .xc-link { margin-top:8px; font-size:13px; }
@media (max-width:700px){ .xc-try { min-height:44px; } .xc-ans .xc-link { min-height:44px; } }
/* open: the chart is compact (no legend, table or tools) so the chart and the points fit on the screen together */
.panel.xc-compact :is(.cf-legend, #cashflowBarLegend, #cfjKey, .fcj-tools, #cfjTable, .fan-chart-subtitle) { display:none !important; }
.panel.xc-compact .fcj-canvas { height:260px !important; }
.xc-head { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:0 0 10px; }
.xc-head h2 { margin:0; font-size:13px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); }
.xc-done { min-height:36px; padding:0 16px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:10px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); cursor:pointer; }
.xc-done:hover { border-color:var(--s-line3, var(--c-slate-85)); }
.xc-done:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
.xc-close { display:block; margin-top:14px; }
@media (max-width:980px){ .xc-grid { grid-template-columns:1fr; } .xc-side { margin-top:20px; } }
@media (max-width:700px){ .xc-in { padding:16px 14px 18px; } .panel.xc-compact .fcj-canvas { height:240px !important; } .xc-done { min-height:44px; } .xc-lede { font-size:17px; } .xc-btn { margin-left:0; } .xc-step nav button { min-width:0; flex:1; } }