/* Live results bar (2026-09-25) — see js/25-live.js */
.lb { display:flex; align-items:center; justify-content:space-between; gap:8px 16px; flex-wrap:wrap; box-sizing:border-box;
  padding:9px 12px 9px 16px; border:1px solid var(--c-sage-90); border-radius:14px; background:rgba(var(--c-gray-99-rgb), 0.97);
  box-shadow:0 10px 30px rgba(var(--c-shadow-rgb), 0.14); color:var(--c-sage-30); font-size:13.5px; line-height:1.3; z-index:860; }
.lb[hidden] { display:none !important; }
.lb-main { display:flex; align-items:center; flex-wrap:wrap; gap:4px 18px; min-width:0; }
.lb-side { display:flex; align-items:center; gap:8px; margin-left:auto; }
.lb-item { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.lb-item strong { font-size:17px; font-weight:800; color:var(--c-sage-30); }
.lb-sr strong { font-size:19px; }
.lb-lbl { color:var(--c-slate-55); font-size:12.5px; }
.lb-dot { flex:0 0 10px; width:10px; height:10px; border-radius:50%; background:var(--c-gray-80); align-self:center; }
.lb-dot.lb-good { background:var(--c-green-60); } .lb-dot.lb-mid { background:var(--c-amber-70); } .lb-dot.lb-bad { background:var(--c-red-55b); }
.lb-delta { display:inline-block; padding:1px 7px; border-radius:999px; font-size:12px; font-weight:800; }
.lb-delta.up { background:var(--c-sage-95); color:var(--c-green-50); }
.lb-delta.down { background:var(--c-rose-95); color:var(--c-red-50b); }
.lb-state { display:inline-flex; align-items:center; gap:6px; color:var(--c-slate-55); font-size:12px; font-weight:700; white-space:nowrap; }
.lb-state.lb-ok::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--c-green-60); }
.lb-state.lb-warn { color:var(--c-orange-55); }
.lb-busy i { width:11px; height:11px; border:2px solid var(--c-sage-90); border-top-color:var(--c-teal-55); border-radius:50%; animation:lbspin .8s linear infinite; }
@keyframes lbspin { to { transform:rotate(360deg); } }
.lb-btn, .lb-live { min-height:32px; padding:5px 12px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); color:var(--c-sage-30); font:inherit; font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; }
.lb-btn:hover, .lb-live:hover { border-color:var(--c-teal-55); }
.lb-btn.lb-primary { background:var(--c-teal-55); border-color:var(--c-teal-55); color:var(--c-gray-99); }
.lb-go { color:var(--c-teal-55); }
.lb .lb-live { display:inline-flex; align-items:center; gap:6px; background:var(--c-gray-99) !important; color:var(--c-slate-55) !important; border:1px solid var(--c-gray-90) !important; box-shadow:none !important; }
.lb-live .lb-sw { position:relative; width:24px; height:14px; border-radius:999px; background:var(--c-gray-85); transition:background .15s; }
.lb-live .lb-sw::after { content:""; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:var(--c-gray-99); transition:left .15s; }
.lb .lb-live.is-on { color:var(--c-teal-55) !important; }
.lb-live.is-on .lb-sw { background:var(--c-teal-55); }
.lb-live.is-on .lb-sw::after { left:12px; }
.lb-btn:focus-visible, .lb-live:focus-visible { outline:2px solid var(--c-teal-55); outline-offset:2px; }
.lb.lb-flash { animation:lbflash 1.4s ease-out; }
@keyframes lbflash { 0% { box-shadow:0 0 0 3px rgba(var(--c-teal-55-rgb), 0.35), 0 10px 30px rgba(var(--c-shadow-rgb), 0.14); } 100% { box-shadow:0 10px 30px rgba(var(--c-shadow-rgb), 0.14); } }
.lb-main { transition:opacity .2s; }
.lb.lb-is-busy .lb-main { opacity:.6; }
.lb.lb-is-blocked .lb-main { opacity:.45; }
.lb-sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
@media (prefers-reduced-motion:reduce){ .lb.lb-flash, .lb-busy i { animation:none; } }

/* Desktop: floats over the bottom of the content column; js places left/width/bottom. */
@media (min-width:1001px){
  .lb { position:fixed; bottom:16px; }
  html.lb-on #toolView, html.lb-on #expensesView, html.lb-on #rothView { padding-bottom:96px !important; }
}
/* Smaller screens: a sticky strip under the app header. */
@media (max-width:1000px){
  .lb { position:sticky; top:var(--lb-top, 0px); margin:0 0 12px; border-radius:12px; padding:7px 10px; }
  .lb-lbl { font-size:11.5px; }
  .lb-sr strong { font-size:17px; }
  .lb-item strong { font-size:15px; }
}
@media (max-width:700px){
  .lb { flex-wrap:nowrap; gap:6px; margin:0 -4px 10px; padding:6px 8px 6px 10px; }
  .lb-main { flex-wrap:wrap; gap:0 10px; flex:1 1 auto; }
  .lb-sr .lb-lbl, .lb-at, .lb-st-t, .lb-live-t, .lb-go { display:none; }
  .lb-state.lb-busy { font-size:0; gap:0; }
  .lb-delta { padding:0 5px; font-size:11px; }
  .lb .lb-btn, .lb .lb-live { min-height:30px; padding:4px 8px; }
  .lb-side { gap:6px; flex:0 0 auto; }
  /* No result yet (2026-10-03): "No result yet" and "Still needed: Annual Spending Goal" overlapped; the state says it. */
  .lb.lb-nores .lb-main { display:none; }
  .lb.lb-nores .lb-side { flex:1 1 auto; min-width:0; margin-left:0; }
  .lb.lb-nores .lb-state { flex:1 1 auto; min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; }
}

/* Docked in the Expense Planner's budget line (computer, js/25 dock): no floating box, short labels (2026-10-04). */
.lb.lb-docked { position:static !important; flex:0 1 auto; margin:0; padding:4px 8px 4px 12px; box-shadow:none; border-color:var(--c-gray-90); background:var(--c-gray-99); gap:6px 12px; }
.lb.lb-docked .lb-main { gap:4px 12px; }
.lb.lb-docked .lb-at, .lb.lb-docked .lb-state.lb-ok .lb-st-t { display:none; }
.lb.lb-docked .lb-sr strong { font-size:17px; }

/* Desktop: docked across the content column, flush with the bottom (2026-10-13 Plan Details audit); its height is kept
   free at the end of the page and for jumps and focus. */
@media (min-width:1001px){
  .lb.lb-full { border-radius:0; border-width:1px 0 0; box-shadow:0 -6px 20px rgba(var(--c-shadow-rgb), 0.08); padding:10px 24px; }
  html:has(.lb.lb-full) { scroll-padding-bottom:calc(var(--lb-h, 80px) + 12px); }
  html.lb-on #toolView, html.lb-on #rothView { padding-bottom:calc(var(--lb-h, 80px) + 24px) !important; }
}
@layer studio { @media (min-width:1001px){ html.studio #liveBar.lb.lb-full { border-radius:0 !important; border-width:1px 0 0 !important; } } }