/* Retirement Decision Timeline (v3) — ported from test/retirement-timeline.html.
   Shared palette, --shadow*, and box-sizing come from styles.css; only the
   timeline-specific colours are declared here. */
:root{
  --clay:#B34A3A; --clay-deep:#8F3728;
  --prep:#5E7C8B; --prep-line:rgba(94,124,139,.65);
  --plan:#9A7B4F; --plan-line:rgba(154,123,79,.7);
  --amber-box:rgba(233,162,59,.10); --amber-box-line:rgba(190,154,42,.45);
}

.rt-controls{display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-bottom:18px}
.rt-key{display:flex; align-items:center; gap:14px; font-size:.84rem; color:var(--muted); flex-wrap:wrap}
.rt-key span{display:inline-flex; align-items:center; gap:.4rem; white-space:nowrap}
.rt-key .sw-fixed{width:11px; height:11px; border-radius:50%; background:var(--ember)}
.rt-key .sw-move{width:22px; height:10px; border-radius:3px; background:linear-gradient(90deg,var(--sage) 0 55%,var(--honey) 55% 100%)}
.rt-key .sw-line{width:2px; height:14px; background:var(--ink)}
.rt-key b{font-weight:600; color:var(--ink-2)}
.rt-presets{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.rt-preset{font:inherit; font-size:.8rem; font-weight:600; cursor:pointer; border:1.5px solid var(--line-2);
  background:var(--surface); color:var(--ink-2); border-radius:999px; padding:7px 13px; min-height:36px; line-height:1;
  transition:border-color .15s, color .15s, background .15s, transform .1s;}
.rt-preset:hover{border-color:var(--ember); color:var(--ember)}
.rt-preset[aria-pressed="true"]{background:var(--ink); color:var(--canvas); border-color:var(--ink)}
.rt-preset:active{transform:translateY(1px)}

/* ===================== HORIZONTAL CHART (all widths) ===================== */
.rt-scroll{overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; padding-bottom:4px}
.rt-plot{position:relative; height:880px; min-width:760px; user-select:none; touch-action:pan-y}
.rt-track{position:absolute; left:0; right:0; top:518px; height:40px; transform:translateY(-50%); cursor:ew-resize; z-index:4}

.rt-cw{position:absolute; top:100px; height:410px; background:var(--amber-box);
  border-left:2px dashed var(--amber-box-line); border-right:2px dashed var(--amber-box-line); pointer-events:none; z-index:1}
.rt-cw__label{position:absolute; top:-54px; left:50%; transform:translateX(-50%); font-size:.72rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:#a5720f; white-space:nowrap}

/* lane bands — label always sits ABOVE the bar so it never disappears */
.rt-band{position:absolute; height:24px; border-radius:7px; z-index:3; overflow:visible}
.rt-lablayer{position:absolute; inset:0; z-index:9; pointer-events:none}
.rt-band__lab{position:absolute; white-space:nowrap; font-size:.8rem; font-weight:600; pointer-events:none}
.rt-band--portfolio{background:linear-gradient(90deg,rgba(94,124,139,.06),rgba(94,124,139,.30)); border:1.5px solid var(--prep-line)}
.rt-band--portfolio .rt-band__lab{color:#38505c}
.rt-band--plan{background:linear-gradient(90deg,rgba(154,123,79,.08),rgba(154,123,79,.30)); border:1.5px solid var(--plan-line)}
.rt-band--plan .rt-band__lab{color:#6d5327}
.rt-band--bridge{background:var(--sage-soft); border:1.5px solid rgba(126,154,130,.55)}
.rt-band--bridge .rt-band__lab{color:#3f5540}
.rt-band--seq{background:var(--sage); border:1.5px solid #6c876f}
.rt-band--seq .rt-band__lab{color:#3f5540}
.rt-band--roth{background:rgba(233,162,59,.24); border:1.5px solid var(--honey)}
.rt-band--roth .rt-band__lab{color:#8a5a10}
.rt-band--catch{background:#F3E6C6; border:1.5px solid var(--gold)}
.rt-band--catch .rt-band__lab{color:#8a6a15}
.rt-band--ssclaim{background:var(--ember-tint); border:1.5px solid rgba(168,82,47,.55)}
.rt-band--ssclaim .rt-band__lab{color:#8f4526}
.rt-band--legacy{background:rgba(107,97,87,.10); border:1.5px solid rgba(107,97,87,.5)}
.rt-band--legacy .rt-band__lab{color:#4E463E}
.rt-band--seqrisk{background:repeating-linear-gradient(45deg,rgba(179,74,58,.30) 0 6px,rgba(179,74,58,.07) 6px 12px);
  border:1.5px solid rgba(143,55,40,.5)}
.rt-band--seqrisk .rt-band__lab{color:var(--clay-deep)}
.rt-band.is-dim{opacity:.42; filter:grayscale(.7)}
.rt-band__ghost{position:absolute; top:-1.5px; bottom:-1.5px; right:-1.5px;
  background:repeating-linear-gradient(45deg,rgba(120,110,95,.28) 0 4px,rgba(120,110,95,.08) 4px 8px);
  border-radius:0 7px 7px 0; pointer-events:none}
.rt-tomedicare{position:absolute; z-index:3; font-size:.8rem; font-weight:600; color:var(--sage);
  transform:translateX(-50%); white-space:nowrap; display:none}

.rt-axis{position:absolute; left:0; right:0; top:518px; height:2px; background:var(--line-2); border-radius:2px; z-index:2}
.rt-atick{position:absolute; top:-5px; width:1px; height:12px; background:var(--line-2)}
.rt-atick span{position:absolute; top:14px; left:50%; transform:translateX(-50%); font-size:.86rem; font-weight:600; color:var(--muted)}

.rt-pin{position:absolute; top:518px; z-index:5}
.rt-pin__dot{position:absolute; left:-5px; top:-5px; width:10px; height:10px; border-radius:50%;
  background:var(--ember); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--ember); cursor:pointer}
.rt-pin__stem{position:absolute; left:-.75px; top:5px; width:1.5px; background:var(--line-2)}
.rt-pin__label{position:absolute; left:50%; transform:translateX(-50%); width:134px; text-align:center;
  font-size:.79rem; color:var(--ink-2); line-height:1.2; cursor:pointer}
.rt-pin__label b{display:block; font-family:"Newsreader",serif; font-weight:600; font-size:.9rem; color:var(--muted); margin-bottom:1px}
.rt-pin__label strong{display:block; font-weight:600; color:var(--ink); font-size:.81rem}
/* edge pins: align their label inward so it never clips the chart edge */
.rt-pin--edgeL .rt-pin__label{left:0; transform:none; text-align:left}
.rt-pin--edgeR .rt-pin__label{left:auto; right:0; transform:none; text-align:right}
.rt-pin.is-emph .rt-pin__dot{width:14px; height:14px; left:-7px; top:-7px; background:var(--honey);
  box-shadow:0 0 0 1px var(--honey),0 0 0 5px rgba(233,162,59,.22)}
.rt-pin.is-emph .rt-pin__label strong{color:#a5720f}
.rt-pin.is-dim{opacity:.42}
.rt-pin.is-hi .rt-pin__dot{width:14px; height:14px; left:-7px; top:-7px; box-shadow:0 0 0 1px var(--ember),0 0 0 5px rgba(168,82,47,.20)}
.rt-lock{display:inline-block; vertical-align:-1px; margin-left:3px; width:11px; height:11px; color:var(--ink-2)}

.rt-irmaa{position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:4; overflow:visible}
.rt-irmaa path{fill:none; stroke:var(--ember); stroke-width:1.4; stroke-dasharray:4 4; opacity:.5;
  transition:opacity .18s, stroke-width .18s; pointer-events:stroke; cursor:pointer}
.rt-irmaa.is-bright path{opacity:.95; stroke-width:1.8}
.rt-irmaa__label{fill:var(--muted); font-size:11px; font-weight:600; font-family:"Figtree",sans-serif}

/* retirement — full-height vertical line ("playhead") */
.rt-rline{position:absolute; top:70px; height:448px; width:18px; transform:translateX(-50%); z-index:8; cursor:ew-resize; touch-action:none}
.rt-rline__bar{position:absolute; left:50%; transform:translateX(-50%); top:20px; bottom:0; width:2px; background:rgba(44,39,35,.5)}
.rt-rline__knob{position:absolute; top:0; left:50%; transform:translateX(-50%) rotate(45deg);
  width:17px; height:17px; background:var(--ink); border:3px solid var(--surface); box-shadow:0 0 0 1px var(--ink); border-radius:3px}
.rt-rline__flag{position:absolute; top:-2px; left:16px; background:var(--ink); color:#fff; font-size:.72rem; font-weight:700;
  white-space:nowrap; padding:3px 9px; border-radius:6px; box-shadow:var(--shadow)}
.rt-rline__hint{display:none}
.rt-rline:focus-visible{outline:none}
.rt-rline:focus-visible .rt-rline__knob{box-shadow:0 0 0 1px var(--ink),0 0 0 4px var(--honey)}

.rt-tip{position:fixed; z-index:50; max-width:230px; background:var(--ink); color:#fff; font-size:.78rem; line-height:1.35;
  padding:8px 11px; border-radius:8px; box-shadow:var(--shadow); pointer-events:none; opacity:0; transform:translateY(4px);
  transition:opacity .12s, transform .12s}
.rt-tip.is-on{opacity:1; transform:none}
.rt-tip b{display:block; color:#fff; font-weight:700; margin-bottom:2px}
.rt-foot{margin-top:22px; font-size:.76rem; color:var(--muted); max-width:72ch}

/* ===================== MOBILE (center axis) ===================== */
.rt-mobile{display:none}
.rt-mslider{margin:4px 0 18px}
.rt-mslider__val{font-size:.9rem; font-weight:700; color:var(--ink); margin-bottom:8px}
.rt-mslider__val span{color:var(--ember)}
.rt-range{-webkit-appearance:none; appearance:none; width:100%; height:8px; border-radius:999px; background:var(--line-2); outline:none; margin:0}
.rt-range::-webkit-slider-thumb{-webkit-appearance:none; appearance:none; width:30px; height:30px; border-radius:50%;
  background:var(--ink); border:3px solid var(--canvas); box-shadow:0 0 0 1px var(--ink),var(--shadow); cursor:pointer}
.rt-range::-moz-range-thumb{width:30px; height:30px; border-radius:50%; background:var(--ink); border:3px solid var(--canvas); box-shadow:0 0 0 1px var(--ink); cursor:pointer}
.rt-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 1px var(--ink),0 0 0 4px rgba(233,162,59,.5)}

.rt-vtimeline{position:relative}
.rt-vline{position:absolute; top:0; bottom:0; width:2px; background:var(--line-2)}
.rt-vcw{position:absolute; z-index:0; pointer-events:none; border-radius:8px; background:var(--amber-box);
  border-top:2px dashed var(--amber-box-line); border-bottom:2px dashed var(--amber-box-line)}
.rt-vcw__label{position:absolute; bottom:4px; right:6px; font-size:.56rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:#a5720f}
.rt-vpin{position:absolute; left:0; z-index:2}
.rt-vpin__dot{position:absolute; top:-5px; width:10px; height:10px; border-radius:50%; background:var(--ember); border:2px solid var(--surface); box-shadow:0 0 0 1px var(--ember)}
.rt-vpin__label{position:absolute; top:-9px; text-align:right; font-size:.73rem; color:var(--ink); line-height:1.2}
.rt-vpin__label b{color:var(--muted); font-weight:600}
.rt-vpin.is-emph .rt-vpin__dot{background:var(--honey); width:14px; height:14px; box-shadow:0 0 0 1px var(--honey),0 0 0 4px rgba(233,162,59,.22)}
.rt-vpin.is-dim{opacity:.45}
.rt-vband{position:absolute; border-radius:6px; z-index:1; overflow:visible; display:flex; align-items:flex-start; justify-content:center;
  padding-top:5px; transition:opacity .18s, filter .18s}
.rt-vband.is-dim{opacity:.4; filter:grayscale(.7)}
.rt-vband__tag{font-size:.56rem; font-weight:700; writing-mode:vertical-rl; transform:rotate(180deg); letter-spacing:.02em; white-space:nowrap}
.rt-vband--portfolio{background:linear-gradient(180deg,rgba(94,124,139,.06),rgba(94,124,139,.32)); border:1.5px solid var(--prep-line); color:#38505c}
.rt-vband--plan{background:linear-gradient(180deg,rgba(154,123,79,.08),rgba(154,123,79,.32)); border:1.5px solid var(--plan-line); color:#6d5327}
.rt-vband--bridge{background:var(--sage-soft); border:1.5px solid rgba(126,154,130,.55); color:#3f5540}
.rt-vband--seq{background:var(--sage); border:1.5px solid #6c876f; color:#fff}
.rt-vband--roth{background:rgba(233,162,59,.26); border:1.5px solid var(--honey); color:#8a5a10}
.rt-vband--catch{background:#F3E6C6; border:1.5px solid var(--gold); color:#8a6a15}
.rt-vband--seqrisk{background:repeating-linear-gradient(45deg,rgba(179,74,58,.32) 0 6px,rgba(179,74,58,.08) 6px 12px); border:1.5px solid rgba(143,55,40,.5); color:var(--clay-deep)}
.rt-vretire{position:absolute; left:0; right:0; z-index:7; height:0}
.rt-vretire__line{position:absolute; left:0; right:0; top:0; height:2px; background:var(--ink)}
.rt-vretire__diamond{position:absolute; top:0; transform:translate(-50%,-50%) rotate(45deg); width:22px; height:22px;
  background:var(--ink); border:3px solid var(--canvas); box-shadow:0 0 0 1px var(--ink); border-radius:3px}
.rt-vretire__flag{display:none}
.rt-vlock{display:inline-block; vertical-align:-1px; width:10px; height:10px; margin-left:2px; color:var(--ink-2)}

@media (max-width:860px){
  .rt-mobile{display:block}  /* show the slider control on narrow screens; the chart stays horizontal & scrolls */
  .rt-presets{margin-left:0; width:100%} .rt-preset{flex:1}
}