/* RRIF timing: "What age should I start my RRIF?"
   Maple Groove Financial brand styling for /calculators/rrif-timing.
   Colours come from the site tokens in /styles.css (maple-red controls, blue
   OAS, violet CPP, green RRIF, amber for tax and cautions). The tool is built
   by rrif-timing.js into .rt; every figure comes from /api/rrif-timing.

   Two roots on purpose. .rt holds the inputs and the answer. .rt-chart is the
   year-by-year chart: on a phone (<=720px) the phone-cockpit engine moves it
   out of .rt into its dock, so nothing about the chart may be scoped under
   .rt. Both roots carry the same custom properties. */

.rtx {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  width: 100%;
  font-family: 'Space Mono', ui-monospace, monospace;
  font-size: 14px;
  color: var(--ink);
}
.rtx, .rtx *, .rtx *::before, .rtx *::after,
.rt-chart, .rt-chart *, .rt-chart *::before, .rt-chart *::after { box-sizing: border-box; }

.rtx .calc-eyebrow { max-width: none; padding: 0; margin: 0 0 14px; }
.rtx .page-header { margin: 6px 0 22px; }
.rtx .page-header h1 {
  font-family: 'Bebas Neue', sans-serif; font-size: clamp(32px, 4vw, 46px); font-weight: 400;
  letter-spacing: .04em; line-height: 1.05; color: var(--ink); margin-bottom: 8px;
}
.rtx .page-header p { font-size: 13.5px; color: var(--ink-dim); max-width: 76ch; line-height: 1.65; }

.rt, .rt-chart {
  --rt-panel: #0b0b0b;
  --rt-well: #111;
  --rt-pension: #f472b6;
  --rt-cpp: var(--violet);
  --rt-oas: var(--blue);
  --rt-rrif: var(--green);
  --rt-nonreg: #d0d0d0;
  --rt-tfsa: #7d7d7d;
  --rt-you: #ffffff;
  --rt-partner: var(--amber-glow);
  --rt-warn: var(--amber);
}

/* ---- the frame: inputs on the left, the answer on the right ---- */
.rt {
  display: grid;
  grid-template-columns: minmax(300px, 372px) minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  line-height: 1.55;
  margin: 0 0 28px;
}
.rt__noscript { grid-column: 1 / -1; font-size: 14px; line-height: 1.7; color: var(--ink-dim); max-width: 76ch; }
.rt__inputs { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.rt__answer { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

.rt__card, .rt-chart {
  background: var(--rt-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 16px;
}
.rt__label, .rt-chart__label {
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 10px;
}
.rt__h, .rt-chart__h {
  font-family: 'Bebas Neue', sans-serif; font-size: 22px; font-weight: 400; letter-spacing: .04em;
  line-height: 1.1; color: var(--ink); margin: 0 0 6px;
}
.rt__note, .rt-chart__note { font-size: 11.5px; line-height: 1.55; color: var(--ink-dim); margin: 8px 0 0; }
.rt__note b, .rt-chart__note b { color: var(--ink); font-weight: 700; }
.rt [hidden], .rt-chart [hidden] { display: none !important; }
.rt button, .rt input, .rt-chart button { font-family: inherit; }
.rt button:focus-visible, .rt input:focus-visible, .rt a:focus-visible, .rt summary:focus-visible,
.rt-chart summary:focus-visible, .rt-chart__plot:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- inputs ---- */
.rt__group + .rt__group { border-top: 1px solid var(--rule-2); margin-top: 9px; padding-top: 9px; }
.rt__gh { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.rt__f { margin: 0 0 10px; }
.rt__f:last-child { margin-bottom: 0; }
.rt__fl { display: flex; gap: 8px; align-items: baseline; font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; line-height: 1.3; }
.rt__fl i { font-style: normal; font-weight: 400; font-family: 'Bebas Neue', sans-serif; font-size: 18px; line-height: 1; color: var(--accent-glow); min-width: 11px; }
.rt__fl--sub { font-size: 11.5px; font-weight: 400; color: var(--ink-dim); margin-bottom: 4px; }
.rt__frow {
  display: flex; align-items: center; gap: 6px; padding: 0 10px;
  background: var(--rt-well); border: 1px solid var(--rule-2); border-radius: 8px;
}
.rt__frow:focus-within { border-color: var(--accent); }
.rt__cur { color: var(--ink-dim); font-size: 14px; }
.rt__num {
  flex: 1; min-width: 0; background: transparent; border: 0; color: var(--ink);
  font-size: 16px; font-weight: 700; padding: 6px 0; font-variant-numeric: tabular-nums;
}
.rt__num:focus { outline: none; }
.rt__unit { color: var(--ink-dim); font-size: 11px; white-space: nowrap; }
.rt input[type=range] { width: 100%; accent-color: var(--accent); height: 26px; margin: 2px 0 0; cursor: pointer; display: block; }
.rt__srow { display: flex; align-items: center; gap: 12px; }
.rt__srow input[type=range] { flex: 1; min-width: 0; margin: 0; }
.rt__val { font-family: 'Bebas Neue', sans-serif; font-size: 24px; line-height: 1; min-width: 30px; text-align: right; font-variant-numeric: tabular-nums; }
.rt__hint { font-size: 11px; line-height: 1.45; color: var(--ink-dim); margin: 3px 0 0; }
.rt__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.rt__link {
  font-size: 11.5px; color: var(--blue); background: transparent; border: 0; padding: 4px 0;
  min-height: 28px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; text-align: left;
}
.rt__link:hover { color: var(--ink); }

.rt__seg { display: flex; flex-wrap: wrap; gap: 6px; }
.rt__seg button {
  font-size: 12px; padding: 8px 12px; min-height: 38px; border-radius: 999px; line-height: 1.25;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer;
}
.rt__seg button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-glow); background: rgba(214, 40, 40, .08); }
.rt__seg button small { display: block; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }

/* "Sharpen it": collapsed, every item with its default */
.rt__sharp { padding: 0; }
.rt__sharp > summary {
  list-style: none; cursor: pointer; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center;
}
.rt__sharp > summary::-webkit-details-marker { display: none; }
.rt__sharp > summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--accent-glow); line-height: 1; }
.rt__sharp[open] > summary::after { content: '\2212'; }
.rt__sharp-t { font-family: 'Bebas Neue', sans-serif; font-size: 22px; letter-spacing: .04em; line-height: 1.1; }
.rt__sharp-s { font-size: 11.5px; color: var(--ink-dim); grid-column: 1; }
.rt__sharp-body { padding: 2px 16px 16px; border-top: 1px solid var(--rule-2); }
.rt__sharp-body > .rt__group:first-child { padding-top: 14px; }
.rt__dflt { font-size: 10.5px; letter-spacing: .04em; color: var(--ink-dim); margin: 0 0 8px; }
.rt__sub { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); margin: 14px 0 8px; }
.rt__reset { margin-top: 14px; }

/* ---- the answer ---- */
.rt__status { margin: 0; font-size: 12.5px; color: var(--rt-warn); display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; }
.rt__status:empty { display: none; }
.rt__status button {
  font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--rule-2);
  border-radius: 999px; padding: 5px 12px; min-height: 32px; cursor: pointer;
}
.rt__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rt-warn); animation: rt-pulse 1.1s ease-in-out infinite; }
@keyframes rt-pulse { 50% { opacity: .25; } }
.rt--busy .rt__fade, .rt-chart--busy .rt-chart__plot, .rt-chart--busy .rt-chart__chips { opacity: .5; transition: opacity .25s; }
.rt--empty .rt__after, .rt--empty .rt-chart__head, .rt--empty .rt-chart__note, .rt--empty .rt-chart__tbl { display: none; }

.rt__verdict { border-color: #3a1414; background: linear-gradient(180deg, #120808, var(--rt-panel) 70%); }
.rt__vhead {
  font-family: 'Bebas Neue', sans-serif; font-weight: 400; font-size: clamp(32px, 3.6vw, 46px);
  line-height: 1; letter-spacing: .03em; margin: 0 0 10px; color: var(--ink);
}
.rt__vhead b { font-weight: 400; color: var(--green); text-shadow: 0 0 22px rgba(74, 222, 128, .35); }
.rt__vline { font-size: 15px; line-height: 1.65; color: var(--ink); margin: 0; max-width: 70ch; }
.rt__vnotes { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; }
.rt__vnotes li { position: relative; padding-left: 16px; font-size: 12.5px; line-height: 1.55; color: var(--ink-dim); max-width: 78ch; }
.rt__vnotes li::before { content: ''; position: absolute; left: 0; top: .62em; width: 7px; height: 1px; background: var(--accent); }
.rt__vnotes li.rt__vshort { color: var(--amber-glow); }
.rt__vnotes li.rt__vshort::before { background: var(--rt-warn); }
.rt__flag {
  display: inline-flex; gap: 8px; align-items: baseline; margin-top: 12px; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.45; color: #fde68a; background: #1a0e00; border: 1px solid var(--rt-warn); text-decoration: none;
}
.rt__flag:hover { border-color: var(--amber-glow); }

/* the scoreboard and the two dials that redraw it, side by side under the chart */
.rt__deck { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.rt__cols { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.rt__col {
  display: flex; flex-direction: column; align-items: center; gap: 5px; min-width: 0;
  background: transparent; border: 1px solid transparent; border-radius: 10px; padding: 6px 1px 7px;
  color: var(--ink); cursor: pointer;
}
.rt__col:hover:not(:disabled) { border-color: var(--rule-2); }
.rt__col[aria-pressed="true"] { border-color: var(--accent); background: rgba(214, 40, 40, .07); }
.rt__col:disabled { cursor: default; color: var(--ink-faint); }
.rt__tag { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; line-height: 1.2; min-height: 21px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; color: var(--ink-dim); }
.rt__tag b { color: var(--green); font-weight: 700; }
.rt__tag i { font-style: normal; color: var(--amber-glow); }
.rt__track { position: relative; width: min(38px, 78%); height: 112px; }
.rt__fill {
  position: absolute; left: 0; right: 0; bottom: 0; border-radius: 4px 4px 0 0;
  background: linear-gradient(to top, rgba(74, 184, 255, 0), rgba(74, 184, 255, .55) 34%);
  transition: height .35s;
}
.rt__col--best .rt__fill { background: linear-gradient(to top, rgba(74, 222, 128, 0), var(--green) 34%); }
.rt__bite { position: absolute; left: 0; right: 0; top: 0; border: 1px dashed #3d3d3d; border-bottom: 0; border-radius: 4px 4px 0 0; transition: height .35s; }
.rt__age { font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; }
.rt__gap { font-family: 'Bebas Neue', sans-serif; font-size: 15px; line-height: 1.05; letter-spacing: .02em; text-align: center; font-variant-numeric: tabular-nums; }
.rt__gap small { display: block; font-family: 'Space Mono', monospace; font-size: 8.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.rt__col--best .rt__gap { color: var(--green); }
.rt__key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 10px 0 0; padding: 0; list-style: none; font-size: 11px; color: var(--ink-dim); }
.rt__key li { display: flex; align-items: center; gap: 6px; }
.rt__key span { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rt__key .k-best { background: var(--green); }
.rt__key .k-shown { border: 1px solid var(--accent); background: rgba(214, 40, 40, .2); }
.rt__key .k-tax { background: var(--amber-glow); border-radius: 50%; width: 8px; height: 8px; }
.rt__none { font-size: 13px; line-height: 1.6; color: var(--ink-dim); margin: 4px 0 0; }

.rt__dials { display: flex; flex-direction: column; }
.rt__big { font-family: 'Bebas Neue', sans-serif; font-size: 34px; line-height: 1; margin: 0 0 4px; font-variant-numeric: tabular-nums; }
.rt__big span { font-size: 15px; letter-spacing: .04em; color: var(--ink-dim); margin-left: 6px; }
.rt__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-dim); }
.rt__dial + .rt__dial { border-top: 1px solid var(--rule-2); margin-top: 14px; padding-top: 14px; }
.rt__dial[hidden] + .rt__dial { border-top: 0; margin-top: 0; padding-top: 0; }

/* why: the ranked reasons */
.rt__reasons { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.rt__reason { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; }
.rt__reason b { font-size: 13px; font-weight: 700; }
.rt__reason em { font-style: normal; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.rt__reason p { grid-column: 1 / -1; margin: 0; font-size: 11.5px; color: var(--ink-dim); line-height: 1.5; }
.rt__rbar { grid-column: 1 / -1; height: 6px; border-radius: 3px; background: #161616; position: relative; overflow: hidden; margin-top: 3px; }
.rt__rbar span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 3px; background: var(--blue); transition: width .35s; }
.rt__reason--neg .rt__rbar span { background: var(--rt-warn); }
.rt__reason--neg em { color: var(--amber-glow); }
.rt__rsum { display: flex; justify-content: space-between; gap: 14px; border-top: 1px solid var(--rule-2); margin-top: 12px; padding-top: 10px; font-size: 13px; font-weight: 700; }

/* would this hold up? */
.rt__hold { padding: 0; }
.rt__hold > summary { list-style: none; cursor: pointer; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; align-items: center; }
.rt__hold > summary::-webkit-details-marker { display: none; }
.rt__hold > summary::after { content: '+'; grid-column: 2; grid-row: 1 / span 2; font-family: 'Bebas Neue', sans-serif; font-size: 26px; color: var(--accent-glow); line-height: 1; }
.rt__hold[open] > summary::after { content: '\2212'; }
.rt__hold-body { padding: 0 16px 16px; }
.rt__holds { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.rt__holds li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--rule); font-size: 12.5px; line-height: 1.5; }
.rt__holds li b { display: block; font-size: 13px; }
.rt__holds li span { color: var(--ink-dim); }
.rt__led { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; background: #2c2c2c; }
.rt__holds li[data-s="run"] .rt__led { background: var(--ink-dim); animation: rt-pulse 1.1s ease-in-out infinite; }
.rt__holds li[data-s="ok"] .rt__led { background: var(--green); box-shadow: 0 0 10px rgba(74, 222, 128, .45); }
.rt__holds li[data-s="moves"] .rt__led { background: var(--rt-warn); box-shadow: 0 0 10px rgba(232, 166, 52, .5); }
.rt__holds li[data-s="fail"] .rt__led { background: transparent; border: 1px solid var(--ink-dim); }
.rt__holdv { margin: 12px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--ink); }
.rt__holdv button { font-size: 12px; color: var(--ink); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 5px 12px; min-height: 32px; cursor: pointer; margin-left: 8px; }

/* lowest tax against best overall; the caution */
.rt__lowtax p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink); max-width: 80ch; }
.rt__lowtax dl { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px 18px; margin: 12px 0 0; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rt__lowtax dt { color: var(--ink-dim); }
.rt__lowtax dd { margin: 0; text-align: right; font-weight: 700; }
.rt__lowtax .rt__lt-h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; }
.rt__warn {
  border: 1px solid var(--rt-warn); border-radius: 14px; background: #1a0e00; padding: 16px; scroll-margin-top: calc(var(--bar-h) + 14px);
}
.rt__warn .rt__h { color: #fde68a; }
.rt__warn p { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: #f3e3b4; max-width: 84ch; }
.rt__warn p:last-of-type { margin-bottom: 12px; }
.rt__warn .cta { padding: 10px 16px; }

.rt__book { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule-2); padding-top: 16px; }
.rt__book p { margin: 0; max-width: 64ch; color: var(--ink-dim); font-size: 12.5px; }
.rt__book p b { color: var(--ink); }
.rt__book .cta { padding: 11px 18px; font-size: 12px; }

/* ---- the year-by-year chart (its own root: the phone dock moves it) ---- */
.rt-chart { display: flex; flex-direction: column; font-family: 'Space Mono', ui-monospace, monospace; color: var(--ink); min-width: 0; }
.rt-chart__head { order: -2; }
.rt-chart__read { order: -1; margin: 6px 0 8px; }
.rt-chart__plot { position: relative; height: 310px; min-width: 0; touch-action: pan-y; cursor: crosshair; user-select: none; -webkit-user-select: none; border-radius: 6px; }
.rt-chart__plot svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; }
.rt-chart__sub { font-size: 12px; color: var(--ink-dim); margin: 0; line-height: 1.5; max-width: 86ch; }
.rt-chart__mini { display: none; }
.rt-chart__when { font-size: 12.5px; font-weight: 700; color: var(--ink); margin: 0 0 6px; }
.rt-chart__when span { font-weight: 400; color: var(--ink-dim); }
.rt-chart__chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); gap: 3px 14px; margin: 0; padding: 0; list-style: none; }
.rt-chart__chips li { display: flex; align-items: center; gap: 7px; font-size: 11.5px; color: var(--ink-dim); min-width: 0; }
.rt-chart__chips li span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-chart__chips li b { margin-left: auto; color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rt-chart__sw { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.rt-chart__sw--pension { background: var(--rt-pension); }
.rt-chart__sw--cpp { background: var(--rt-cpp); }
.rt-chart__sw--oas { background: var(--rt-oas); }
.rt-chart__sw--rrif { background: var(--rt-rrif); }
.rt-chart__sw--rrsp { background: repeating-linear-gradient(45deg, var(--rt-rrif) 0 2px, var(--rt-panel) 2px 4px); outline: 1px solid var(--rt-rrif); outline-offset: -1px; }
.rt-chart__sw--nonreg { background: var(--rt-nonreg); }
.rt-chart__sw--tfsa { background: var(--rt-tfsa); }
.rt-chart__sw--you { height: 0; border-top: 2px solid var(--rt-you); border-radius: 0; width: 12px; }
.rt-chart__sw--partner { height: 0; border-top: 2px solid var(--rt-partner); border-radius: 0; width: 12px; }
.rt-chart__sw--best { height: 0; border-top: 2px dashed var(--rt-you); border-radius: 0; width: 12px; }
.rt-chart__sw--none { background: transparent; }
.rt-chart__tbl { margin-top: 10px; font-size: 12px; }
.rt-chart__tbl summary { cursor: pointer; color: var(--blue); padding: 6px 0; min-height: 32px; }
.rt-chart__tblwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-top: 6px; border: 1px solid var(--rule-2); border-radius: 8px; max-height: 420px; overflow-y: auto; }
.rt-chart__tblwrap table { border-collapse: collapse; width: 100%; min-width: 760px; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rt-chart__tblwrap th, .rt-chart__tblwrap td { padding: 5px 8px; text-align: right; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.rt-chart__tblwrap thead th { position: sticky; top: 0; background: #141414; color: var(--ink-dim); font-weight: 400; font-size: 10.5px; letter-spacing: .04em; }
.rt-chart__tblwrap th:first-child, .rt-chart__tblwrap td:first-child { text-align: left; }
.rt-chart__tblwrap tr.is-open td { color: var(--green); }

/* the drawing */
.rt-chart svg text { font-family: 'Space Mono', ui-monospace, monospace; }
.rt-chart .c-grid { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.rt-chart .c-axis { fill: var(--ink-dim); font-size: 10.5px; }
.rt-chart .c-ytick { font-size: 10.5px; font-variant-numeric: tabular-nums; }
.rt-chart .c-band { fill: var(--rt-warn); }
.rt-chart .c-bandline { stroke: rgba(232, 166, 52, .28); stroke-width: 1; }
.rt-chart .c-rate { fill: var(--amber-glow); font-size: 10px; }
.rt-chart .c-mark { stroke: var(--rt-warn); stroke-width: 1; stroke-dasharray: 5 4; opacity: .75; }
.rt-chart .c-marktxt { fill: var(--rt-warn); font-size: 9.5px; stroke: #0b0b0b; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.rt-chart .c-alone { fill: rgba(255, 255, 255, .045); }
.rt-chart .c-note { fill: var(--ink-dim); font-size: 9.5px; letter-spacing: .04em; stroke: #0b0b0b; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.rt-chart .c-open { stroke: var(--rt-rrif); stroke-width: 1; opacity: .7; }
.rt-chart .c-opentxt { fill: var(--rt-rrif); font-size: 9.5px; letter-spacing: .04em; stroke: #0b0b0b; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; }
.rt-chart .l-pension { fill: var(--rt-pension); }
.rt-chart .l-cpp { fill: var(--rt-cpp); }
.rt-chart .l-oas { fill: var(--rt-oas); }
.rt-chart .l-rrif { fill: var(--rt-rrif); }
.rt-chart .l-rrsp { fill: url(#rt-hatch); }
.rt-chart .l-nonreg { fill: var(--rt-nonreg); }
.rt-chart .l-tfsa { fill: var(--rt-tfsa); }
.rt-chart .c-short { fill: rgba(255, 58, 58, .13); }
.rt-chart .c-shortcap { stroke: var(--accent-glow); stroke-width: 1.5; opacity: .8; }
.rt-chart .c-halo { fill: none; stroke: #000; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; opacity: .55; }
.rt-chart .c-you { fill: none; stroke: var(--rt-you); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-chart .c-partner { fill: none; stroke: var(--rt-partner); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.rt-chart .c-cmp { stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .85; }
.rt-chart .c-hair { stroke: rgba(255, 255, 255, .3); stroke-width: 1; }
.rt-chart .c-ring { fill: rgba(10, 10, 10, .55); stroke-width: 2.5; filter: drop-shadow(0 1px 4px rgba(0, 0, 0, .7)); }
.rt-chart .c-ring--you { stroke: var(--rt-you); }
.rt-chart .c-ring--partner { stroke: var(--rt-partner); }

/* ---- the reading below the tool (the pension calculators' pattern) ---- */
.rtx .explain { max-width: 780px; margin: 8px auto 20px; }
.rtx .explain h2 { font-family: 'Bebas Neue', sans-serif; font-size: 26px; font-weight: 400; letter-spacing: .04em; color: var(--ink); margin: 28px 0 10px; }
.rtx .explain p, .rtx .explain li { font-family: 'Instrument Serif', Georgia, serif; font-size: 18px; line-height: 1.55; color: #cfcfcf; }
.rtx .explain p { margin-bottom: 12px; }
.rtx .explain ul { margin: 0 0 12px 20px; padding: 0; }
.rtx .explain li { margin-bottom: 8px; }
.rtx .explain em { color: var(--ink); }
.rtx .explain a { color: var(--blue); }
.rtx .related { list-style: none; margin-left: 0 !important; }
.rtx .related li::before { content: '\2192  '; color: var(--accent); }
.rtx .rt-assume { margin: 18px 0 0; border-top: 1px solid var(--rule-2); border-bottom: 1px solid var(--rule-2); }
.rtx .rt-assume summary { cursor: pointer; padding: 12px 0; font-family: 'Bebas Neue', sans-serif; font-size: 19px; letter-spacing: .05em; color: var(--blue); }
.rtx .rt-assume summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.rtx .rt-assume ul { margin: 0 0 14px 20px; }
.rtx .rt-assume li { font-size: 16px; }
.rtx .rates-note { font-size: 11px; color: var(--ink-dim); text-align: center; margin: 10px auto 24px; line-height: 1.6; max-width: 820px; }
.rtx .legal-disclaimer { max-width: 780px; margin-left: auto; margin-right: auto; }

/* The shared sheet sets overflow-x:hidden on html and body, which turns body
   into a scroll container and stops position:sticky. clip trims the same
   overflow without one. Only this page loads this file. */
html, body { overflow-x: clip; }

/* desktop: the inputs ride beside the answer while it scrolls */
@media (min-width: 981px) and (min-height: 640px) {
  .rt__inputs {
    position: sticky; top: calc(var(--bar-h) + 12px);
    max-height: calc(100vh - var(--bar-h) - 116px); overflow-y: auto; overscroll-behavior: contain;
    padding-right: 4px; scrollbar-width: thin; scrollbar-color: #2a2a2a transparent;
  }
}

/* ---- narrower screens ---- */
@media (max-width: 980px) {
  .rt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  .rtx { padding: 0 4px; font-size: 13.5px; }
  .rtx .page-header { margin: 2px 0 14px; }
  .rtx .page-header p { font-size: 12.5px; }
  .rt { gap: 12px; margin-bottom: 20px; }
  .rt__card { padding: 12px; }
  .rt__sharp, .rt__hold { padding: 0; }
  .rt__sharp > summary, .rt__hold > summary { padding: 12px; }
  .rt__sharp-body { padding: 2px 12px 12px; }
  .rt__hold-body { padding: 0 12px 12px; }
  .rt__deck { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .rt__vline { font-size: 14px; }
  .rt__track { height: 84px; }
  .rt__age { font-size: 20px; }
  .rt__gap { font-size: 14px; }
  .rt__lowtax dl { gap: 6px 10px; font-size: 11.5px; }
  .rtx .explain p, .rtx .explain li { font-size: 17px; }
  .rt-chart { padding: 12px; }
  .rt-chart__plot { height: 260px; }
}

/* Phone cockpit (<=720px): the engine moves .rt-chart into .mgpc-dock. Only
   the plot (the first child, the holder) and the .lgd readout stay docked;
   the heading, the note and the table go back to the scroll pane. */
html.mg-phone-lock .mgpc-dock .rt-chart { padding: 0 2px 4px; border: 0; border-radius: 0; background: transparent; }
html.mg-phone-lock .mgpc-dock .rt-chart__plot { touch-action: none; }
html.mg-phone-lock .mgpc-dock .rt-chart__read { flex: 0 0 auto; margin: 0 0 4px; }
html.mg-phone-lock .mgpc-dock .rt-chart__mini { display: block; font-family: 'Bebas Neue', sans-serif; font-size: 17px; letter-spacing: .04em; line-height: 1.1; margin: 0 0 3px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mg-phone-lock .mgpc-dock .rt-chart__mini b { font-weight: 400; color: var(--green); }
html.mg-phone-lock .mgpc-dock .rt-chart__when { font-size: 11px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.mg-phone-lock .mgpc-dock .rt-chart__chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px 12px; }
html.mg-phone-lock .mgpc-dock .rt-chart__chips li { font-size: 10.5px; gap: 5px; }
html.mg-phone-lock .mgpc-dock .rt-chart__chips li.is-more { display: none; }
html.mg-phone-lock .mgpc-dock .rt-chart__sw { width: 8px; height: 8px; }
html.mg-phone-lock .rt-chart__head, html.mg-phone-lock .rt-chart__note, html.mg-phone-lock .rt-chart__tbl { padding: 0 2px; }
html.mg-phone-lock .rt-chart__head .rt-chart__h { font-size: 20px; }
html.mg-phone-lock .rt-chart__tbl { margin: 0 0 12px; }
html.mg-phone-lock .rt-chart__note { margin: 0 0 6px; }
html.mg-phone-lock .rtx .page-header h1 { font-size: 28px; }
html.mg-phone-lock .rtx .calc-eyebrow { display: none; }   /* the lock gives the room to the tool */

@media (prefers-reduced-motion: reduce) {
  .rt__fill, .rt__bite, .rt__rbar span { transition: none; }
  .rt__dot, .rt__holds li[data-s="run"] .rt__led { animation: none; }
}

/* Beta notice (Trevor, 2026-10-06: "put a big label at the top currently in beta testing"). Remove when the
   beta ends; nothing else depends on it. */
.rtx .rt-beta {
  display: flex; gap: 16px; align-items: center;
  margin: 0 0 22px; padding: 16px 20px;
  border: 2px solid var(--amber); border-radius: 12px;
  background: #1a0e00; color: #fde68a;
}
.rtx .rt-beta__tag {
  flex: none; padding: 6px 12px; border-radius: 8px;
  background: var(--amber); color: #1a0e00;
  font-family: 'Bebas Neue', sans-serif; font-size: 26px; font-weight: 400;
  letter-spacing: .08em; text-transform: uppercase; line-height: 1;
}
.rtx .rt-beta__text p { margin: 0; font-size: 14px; line-height: 1.5; }
.rtx .rt-beta__text .rt-beta__title {
  margin: 0 0 4px; color: #fff; font-family: 'Bebas Neue', sans-serif;
  font-size: 34px; font-weight: 400; letter-spacing: .02em; text-transform: uppercase; line-height: 1;
}
@media (max-width: 600px) {
  .rtx .rt-beta { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 16px; }
  .rtx .rt-beta__text .rt-beta__title { font-size: 28px; }
}