/* Is Converting Worth It? in plain words (2026-10-16, js/75-roth-worth.js; design _audits/2026-10-16-roth-worth-mockup.html):
   the answer, the plan run both ways, three notes, the Roth's own investments, the two rates per $10,000. */
#betrResult .rw-answer { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px 24px; align-items:start; }
#betrResult .rw-answer > p:first-child { margin:0; max-width:62ch; font-size:19px; line-height:1.45; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-15)); }
#betrResult .rw-answer b { font-weight:700; color:var(--s-ink, var(--c-slate-15)); }
.rw-verdict { padding:7px 14px; border-radius:20px; font-weight:700; font-size:14px; white-space:nowrap; }
.rw-verdict.is-good { background:var(--s-green-l, var(--c-green-95)); color:var(--s-green-ink, var(--s-green, var(--c-green-40))); }
.rw-verdict.is-mid { background:var(--s-amber-l, var(--c-amber-95)); color:var(--s-amber-ink, var(--c-amber-35)); }
.rw-verdict.is-bad { background:var(--s-red-l, var(--c-red-95)); color:var(--s-red, var(--c-red-50)); }
#betrResult .rw-how { grid-column:1 / -1; margin:2px 0 0; font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.rw-link { padding:0; border:0; background:none; font:inherit; font-weight:600; color:var(--s-link, var(--c-teal-45)); cursor:pointer; }
.rw-link:hover { text-decoration:underline; } .rw-link:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
.rw-table { width:100%; border-collapse:collapse; margin:20px 0 4px; font-variant-numeric:tabular-nums; }
.rw-table th, .rw-table td { padding:11px 12px; text-align:right; border-bottom:1px solid var(--s-line, var(--c-gray-90)); vertical-align:top; }
.rw-table thead th { font-size:13px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); border-bottom-color:var(--s-line2, var(--c-gray-90)); }
.rw-table th small, .rw-table td small { display:block; font-size:12.5px; font-weight:400; color:var(--s-muted, var(--c-slate-55)); }
.rw-table tbody th { text-align:left; font-size:15px; font-weight:500; text-transform:none; letter-spacing:normal; color:var(--s-ink2, var(--c-slate-35)); }
.rw-table thead th { text-align:right; text-transform:none; letter-spacing:normal; }
.rw-table td { color:var(--s-ink, var(--c-slate-15)); }
.rw-table th, .rw-table td { white-space:normal; overflow-wrap:anywhere; } /* styles.css keeps table cells on one line */
.rw-table tr.rw-total th, .rw-table tr.rw-total td { font-weight:700; color:var(--s-ink, var(--c-slate-15)); }
.rw-table tr.rw-group th { padding-top:18px; font-size:12.5px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); border-bottom:0; }
.rw-table td.rw-d { white-space:nowrap; overflow-wrap:normal; font-weight:600; }
.rw-table td.good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))); } .rw-table td.bad { color:var(--s-red, var(--c-red-50)); } .rw-table td.same { color:var(--s-muted, var(--c-slate-55)); }
.rw-table col.rw-label { width:34%; }
.rw-why { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px 28px; margin:22px 0 0; padding:20px 0 0; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.rw-why h3 { margin:0 0 6px; font-size:15px; color:var(--s-ink, var(--c-slate-15)); }
.rw-why p { margin:0; font-size:14.5px; line-height:1.6; color:var(--s-ink2, var(--c-slate-35)); }
.rw-mix { margin:22px 0 0; padding:14px 16px; border-left:3px solid var(--s-amber, var(--c-amber-55)); background:var(--s-amber-l, var(--c-amber-95)); border-radius:0 10px 10px 0; font-size:14.5px; line-height:1.6; color:var(--s-ink2, var(--c-slate-35)); }
.rw-mix b { color:var(--s-ink, var(--c-slate-15)); }
.rw-rates { margin:20px 0 0; padding:16px 18px; border-radius:12px; background:var(--s-soft, var(--c-gray-95)); display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 18px; align-items:baseline; }
.rw-rates .rw-k { grid-column:1 / -1; font-size:13px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); }
.rw-pair { display:flex; gap:22px; flex-wrap:wrap; } .rw-pair div { min-width:150px; }
.rw-pair b { display:block; font-size:22px; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-15)); } .rw-pair span { font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.rw-rates p { margin:0; font-size:14px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
.rw-wait { margin:0 0 4px; font-size:15px; color:var(--s-muted, var(--c-slate-55)); }
@media (max-width:760px){
  #betrResult .rw-answer { grid-template-columns:1fr; } #betrResult .rw-answer > p:first-child { font-size:17px; } .rw-verdict { justify-self:start; }
  .rw-table thead { display:none; }
  .rw-table tbody tr { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:2px 10px; padding:10px 0; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  .rw-table tbody tr.rw-group { padding:14px 0 0; border:0; }
  .rw-table tbody th { grid-column:1 / -1; padding:0 0 4px; border:0; }
  .rw-table td { padding:0; border:0; text-align:left; font-size:14.5px; }
  .rw-table td::before { content:attr(data-h); display:block; font-size:11.5px; font-weight:600; color:var(--s-muted, var(--c-slate-55)); }
  .rw-table td.rw-d:empty { display:none; }
  .rw-why { grid-template-columns:1fr; } .rw-rates { grid-template-columns:1fr; }
}
@media print { .rw-link { display:none; } }
/* The app's table rules (compass-app-theme.css, compass-themes.css: a teal header in dark, striped rows) are layered
   !important; @layer studio is declared first (index.html), so its !important wins. The card's own box, without the old
   tinted panel. */
@layer studio {
  #betrResult .rw-table thead th, #betrResult .rw-table thead td, #betrResult .rw-table tbody td, #betrResult .rw-table tbody th { background:transparent !important; }
  #betrResult .rw-table thead th, #betrResult .rw-table thead th * { color:var(--s-muted, var(--c-slate-55)) !important; border-color:var(--s-line2, var(--c-gray-90)) !important; }
  #betrResult .rw-table tbody td, #betrResult .rw-table tbody th { border-color:var(--s-line, var(--c-gray-90)) !important; }
  #betrResult.rc-betr:has(.rw-answer, .rw-wait) { padding:4px 0 0 !important; background:transparent !important; border:0 !important; }
  #rcPresets .rw-chip[aria-pressed="true"] { border-color:var(--s-blue, var(--c-teal-50)) !important; background:var(--s-blue-l, var(--c-teal-95)) !important; color:var(--s-ink, var(--c-slate-15)) !important; }
}

/* ---------- the Roth page, 2026-10-16 redesign (_audits/2026-10-16-roth-page-mockup.html): the answer first, the settings in a
   sentence, each year with the pauses said, the brackets both ways, amounts to tick */
#rwTop { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 20px; align-items:start; margin:0 0 6px; padding:20px 24px 16px; background:var(--s-card, var(--c-gray-99)); border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:16px; }
#rwTop[hidden] { display:none; }
#rothView #rwTop, #rothView .rc-years { max-width:960px; }
#rothView #ryTitle[hidden], #rothView #rcTabs[hidden] { display:none !important; }
/* with the answer at the top, the card under How it adds up doesn't say it again */
#rothView:has(#rwTop:not([hidden])) #betrResult .rw-answer > p:first-child, #rothView:has(#rwTop:not([hidden])) #betrResult .rw-answer > .rw-verdict { display:none; } /* the same width as the cards under them */
#rwTop .rw-top-a { margin:0; max-width:60ch; font-size:19px; line-height:1.45; letter-spacing:-.01em; color:var(--s-ink, var(--c-slate-15)); }
#rwTop .rw-top-a b { font-weight:700; }
#rwTop .rw-wait { grid-column:1 / -1; margin:0; }
.rw-top-three { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin:12px 0 2px; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.rw-top-three > div { display:flex; flex-direction:column; gap:1px; padding:12px 16px 4px 0; }
.rw-top-three > div + div { padding-left:16px; border-left:1px solid var(--s-line, var(--c-gray-90)); }
.rw-top-k { font-size:13px; color:var(--s-muted, var(--c-slate-55)); }
.rw-top-v { font-size:17px; font-weight:600; color:var(--s-ink, var(--c-slate-15)); font-variant-numeric:tabular-nums; } .rw-top-v small { font-size:15px; font-weight:400; color:var(--s-muted, var(--c-slate-55)); }
.rw-top-d { font-size:13.5px; font-weight:600; } .rw-top-d.good { color:var(--s-green-ink, var(--s-green, var(--c-green-40))); } .rw-top-d.bad { color:var(--s-red, var(--c-red-50)); } .rw-top-d.same { color:var(--s-muted, var(--c-slate-55)); }
#rwTop .rw-top-more { grid-column:1 / -1; margin:4px 0 0; font-size:13.5px; color:var(--s-muted, var(--c-slate-55)); }
.rc-title-sub { margin-left:8px; font-size:13.5px; font-weight:400; letter-spacing:0; color:var(--s-muted, var(--c-slate-55)); }
#rothView .rf-sub { margin:-2px 0 10px; font-size:14px; color:var(--s-ink2, var(--c-slate-35)); }
#rothView .rf-sub:empty { display:none; }
/* each year: the title is the page's; the paused years are a band; your spouse's bars outlined */
.rc-years .ry-h { display:block; margin:0 0 6px; font-size:14.5px; color:var(--s-ink2, var(--c-slate-35)); } .rc-years .ry-h b { color:var(--s-ink, var(--c-slate-15)); }
.rc-years rect.ry-pause { fill:var(--s-amber-l, var(--c-amber-95)); }
.rc-years .ry-pause-t { font-size:12px; font-weight:700; fill:var(--s-amber-ink, var(--c-amber-35)); text-anchor:middle; }
.rc-years .ry-pause-s { font-size:11px; fill:var(--s-amber-ink, var(--c-amber-35)); text-anchor:middle; }
.rc-years .ry-last { font-size:10.5px; fill:var(--s-muted, var(--c-slate-55)); text-anchor:middle; }
.rc-years rect.ry-sp { stroke:var(--c-purple-65); stroke-width:1; }
.rc-years .ry-tbl tr.ry-off td { color:var(--s-muted, var(--c-slate-55)); }
/* your tax bracket each year, both ways */
.rw-br { margin:22px 0 0; padding:18px 0 0; border-top:1px solid var(--s-line, var(--c-gray-90)); }
.rw-br h3 { margin:0 0 10px; font-size:15px; color:var(--s-ink, var(--c-slate-15)); } .rw-br h3 small { margin-left:6px; font-size:13px; font-weight:400; color:var(--s-muted, var(--c-slate-55)); }
.rw-br-row { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; align-items:center; margin:0 0 6px; }
.rw-br-k { font-size:13px; font-weight:600; color:var(--s-ink2, var(--c-slate-35)); }
.rw-br-bar { display:flex; height:28px; border-radius:8px; overflow:hidden; }
.rw-bk { display:flex; align-items:center; justify-content:center; min-width:0; overflow:hidden; font-size:12px; font-weight:700; white-space:nowrap; border-right:1px solid var(--s-card, var(--c-gray-99)); color:var(--s-ink, var(--c-slate-15)); }
.rw-bk:last-child { border-right:0; }
.rw-bk-0 { background:var(--s-soft, var(--c-gray-95)); color:var(--s-muted, var(--c-slate-55)); }
.rw-bk-10 { background:color-mix(in srgb, var(--s-blue, var(--c-teal-50)) 14%, var(--s-card, var(--c-gray-99))); }
.rw-bk-12 { background:color-mix(in srgb, var(--s-blue, var(--c-teal-50)) 26%, var(--s-card, var(--c-gray-99))); }
.rw-bk-22 { background:color-mix(in srgb, var(--s-blue, var(--c-teal-50)) 46%, var(--s-card, var(--c-gray-99))); }
.rw-bk-24 { background:color-mix(in srgb, var(--s-blue, var(--c-teal-50)) 62%, var(--s-card, var(--c-gray-99))); color:var(--s-on, var(--c-gray-99)); }
.rw-bk-32, .rw-bk-35, .rw-bk-37 { background:color-mix(in srgb, var(--s-blue, var(--c-teal-50)) 82%, var(--s-card, var(--c-gray-99))); color:var(--s-on, var(--c-gray-99)); }
.rw-br-ticks { position:relative; height:16px; font-size:11.5px; color:var(--s-muted, var(--c-slate-55)); }
.rw-br-ticks span { position:absolute; top:0; transform:translateX(0); }
.rw-br-say { margin:6px 0 0; font-size:14px; line-height:1.55; color:var(--s-ink2, var(--c-slate-35)); }
/* Compare amounts: choices to tick */
.rw-presets { display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px; }
.rw-chip { min-height:40px; padding:7px 14px; border:1px solid var(--s-line2, var(--c-gray-90)); border-radius:20px; background:var(--s-card, var(--c-gray-99)); font:inherit; font-size:14px; color:var(--s-ink2, var(--c-slate-35)); cursor:pointer; }
.rw-chip[aria-pressed="true"] { border-color:var(--s-blue, var(--c-teal-50)); background:var(--s-blue-l, var(--c-teal-95)); color:var(--s-ink, var(--c-slate-15)); font-weight:600; box-shadow:inset 0 0 0 1px var(--s-blue, var(--c-teal-50)); }
.rw-chip:focus-visible { outline:2px solid var(--s-blue, var(--c-teal-50)); outline-offset:2px; }
#rcTabs button { min-height:40px; } #rcTabs button.is-on { box-shadow:0 1px 3px rgba(var(--s-shadow-rgb, var(--c-shadow-rgb)), .14); }
@media (max-width:760px){
  #rwTop { grid-template-columns:1fr; padding:16px; } #rwTop .rw-top-a { font-size:17px; } #rwTop .rw-verdict { justify-self:start; }
  .rw-top-three { grid-template-columns:1fr; } .rw-top-three > div + div { padding-left:0; border-left:0; border-top:1px solid var(--s-line, var(--c-gray-90)); }
  .rw-br-row { grid-template-columns:1fr; gap:4px; } .rw-br-ages .rw-br-k { display:none; }
  .rc-years .ry-chart-wrap { overflow-x:auto; } .rc-years .ry-svg { min-width:600px; }
  .rc-years .ry-tbl thead { display:none; } .rc-years .ry-tbl, .rc-years .ry-tbl tbody { display:block; }
  .rc-years .ry-tbl tr { display:grid; grid-template-columns:auto 1fr auto; gap:2px 12px; padding:9px 0; border-bottom:1px solid var(--s-line, var(--c-gray-90)); }
  .rc-years .ry-tbl td { padding:0; border:0; } .rc-years .ry-tbl .ry-c-you, .rc-years .ry-tbl .ry-c-sp, .rc-years .ry-tbl .ry-c-rate { display:none; }
  .rc-years .ry-tbl .ry-c-tax::before { content:'tax '; color:var(--s-muted, var(--c-slate-55)); font-size:12.5px; }
  .rc-years .ry-tbl .ry-c-why { grid-column:1 / -1; font-size:13px; }
}