/* Retirement Paycheck page (2026-09-25) — see js/26-paycheck.js */
#paycheckView .tx-empty { text-align:center; padding:44px 24px; }
#paycheckView .tx-empty strong { display:block; font-size:15px; color:var(--c-slate-25); margin-bottom:6px; }
#paycheckView .tx-empty p { margin:0 auto 16px; max-width:440px; font-size:13.5px; color:var(--c-slate-50); }
#paycheckView .panel { margin-bottom:18px; }
.pc-h { margin:0 0 6px; font-size:18px; font-weight:800; color:var(--c-sage-30); }
.pc-lead { margin:0 0 14px; font-size:13.5px; line-height:1.55; color:var(--c-slate-45); max-width:760px; }
.pc-note { margin:10px 0 0; font-size:12.5px; line-height:1.5; color:var(--c-slate-50); }
.pc-muted { color:var(--c-slate-60); }
.pc-link { padding:0; border:0; background:none; color:var(--c-teal-50); font:inherit; font-weight:700; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }

/* hero */
.pc-hero { display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); gap:22px 28px; align-items:start; }
.pc-eyebrow { font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--c-teal-50); }
.pc-amount { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 10px; margin:6px 0 4px; }
.pc-amount strong { font-size:44px; line-height:1.05; font-weight:800; color:var(--c-sage-30); font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.pc-amount span { font-size:14px; color:var(--c-slate-45); }
.pc-sub { font-size:13px; color:var(--c-slate-50); }
.pc-split { display:flex; flex-wrap:wrap; gap:6px 16px; margin:12px 0 0; font-size:13px; color:var(--c-sage-35); }
.pc-split span { display:inline-flex; align-items:center; gap:6px; }
.pc-split i { width:9px; height:9px; border-radius:3px; }
.pc-controls { margin-top:14px; }
.pc-warn { margin:10px 0 0; padding:8px 12px; border-radius:10px; background:var(--c-rose-95); color:var(--c-red-45); font-size:13px; }
.pc-hero-side { display:flex; flex-direction:column; gap:12px; }
.pc-target { display:flex; align-items:center; flex-wrap:wrap; gap:8px 10px; font-size:12.5px; color:var(--c-slate-45); }
.pc-safe { padding:14px 16px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); font-size:13px; color:var(--c-slate-45); }
.pc-safe p { margin:6px 0 0; font-size:12.5px; line-height:1.45; color:var(--c-slate-50); }
.pc-safe-row { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.pc-safe-row span { font-weight:700; color:var(--c-sage-35); }
.pc-safe-row strong { font-size:26px; font-weight:800; color:var(--c-sage-30); font-variant-numeric:tabular-nums; }
.pc-safe-row small { font-size:13px; font-weight:600; color:var(--c-slate-50); }
.pc-room { margin-top:6px; font-size:13.5px; }
.pc-room.pc-good { color:var(--c-green-50); } .pc-room.pc-bad { color:var(--c-red-50b); }
.pc-safe-good { border-color:var(--c-sage-90b); background:var(--c-gray-99); }
.pc-safe-bad { border-color:var(--c-rose-85); background:var(--c-gray-95); }
.pc-safe-bad strong { display:block; margin-bottom:4px; color:var(--c-red-45); }
.pc-safe-busy { display:flex; align-items:center; gap:10px; }
.pc-safe-busy i { flex:0 0 14px; width:14px; height:14px; border:2px solid var(--c-sage-90); border-top-color:var(--c-teal-50); border-radius:50%; animation:lbspin .8s linear infinite; }
.pc-plan-rate { font-size:12.5px; color:var(--c-slate-50); }

/* sources */
.pc-bar { display:flex; height:18px; overflow:hidden; border-radius:9px; background:var(--c-gray-95); }
.pc-bar span { min-width:3px; }
.pc-bar span + span { box-shadow:inset 2px 0 0 var(--c-gray-99); }
.pc-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:6px 22px; margin:12px 0 0; padding:0; list-style:none; font-size:13px; }
.pc-list li { display:flex; align-items:center; gap:8px; padding:5px 0; border-bottom:1px solid var(--c-gray-95); }
.pc-list i { flex:0 0 10px; width:10px; height:10px; border-radius:3px; }
.pc-list span { flex:1 1 auto; color:var(--c-sage-35); }
.pc-list b { font-variant-numeric:tabular-nums; color:var(--c-sage-30); }
.pc-list em { width:40px; text-align:right; font-style:normal; font-size:12px; color:var(--c-slate-60); font-variant-numeric:tabular-nums; }
.pc-order { display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px; margin:16px 0 0; font-size:13px; color:var(--c-slate-45); }
.pc-order b { padding:3px 10px; border:1px solid var(--c-gray-90); border-radius:999px; background:var(--c-gray-99); font-weight:700; font-size:12.5px; color:var(--c-sage-30); }
.pc-order em { font-style:normal; color:var(--c-slate-70); }
.pc-order .pc-link { margin-left:6px; font-size:12.5px; }
.pc-tax { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0 0; }
.pc-tax div { padding:10px 12px; border:1px solid var(--c-gray-95); border-radius:12px; background:var(--c-gray-99); }
.pc-tax span { display:block; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--c-slate-60); }
.pc-tax strong { display:block; margin:3px 0 1px; font-size:18px; font-weight:800; color:var(--c-sage-30); font-variant-numeric:tabular-nums; }
.pc-tax em { font-style:normal; font-size:12px; color:var(--c-slate-50); }
.pc-tips { margin:14px 0 0; padding:0; list-style:none; display:flex; flex-direction:column; gap:8px; }
.pc-tips li { position:relative; padding:10px 12px 10px 34px; border-radius:12px; background:var(--c-gray-99); font-size:13px; line-height:1.5; color:var(--c-sage-35); }
.pc-tips li::before { content:"✦"; position:absolute; left:13px; top:10px; color:var(--c-teal-50); }
.pc-tips a { color:var(--c-teal-50); font-weight:700; }

/* check-in */
.pc-check-head { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:6px 12px; }
.pc-due { font-size:12px; font-weight:700; color:var(--c-slate-60); }
.pc-due.is-due { padding:3px 10px; border-radius:999px; background:var(--c-sand-95b); color:var(--c-amber-50b); }
.pc-stand { display:flex; flex-direction:column; gap:4px; margin:6px 0 12px; padding:12px 14px; border-left:4px solid var(--c-slate-70); border-radius:10px; background:var(--c-gray-99); font-size:13.5px; line-height:1.5; color:var(--c-sage-35); }
.pc-stand strong { font-size:16px; }
.pc-st-ahead { border-color:var(--c-green-60); } .pc-stand.pc-st-ahead strong { color:var(--c-green-50); }
.pc-st-on { border-color:var(--c-teal-50); } .pc-stand.pc-st-on strong { color:var(--c-teal-50); }
.pc-st-bit { border-color:var(--c-amber-70); } .pc-stand.pc-st-bit strong { color:var(--c-amber-50b); }
.pc-st-behind { border-color:var(--c-red-55b); } .pc-stand.pc-st-behind strong { color:var(--c-red-50b); }
.pc-chart > svg { display:block; width:100%; height:auto; }
.pc-cj { position:relative; height:260px; touch-action:pan-y; }
@media (max-width:600px){ .pc-cj { height:230px; } }
.pc-cj-hint { margin:4px 0 0; }
.pc-now { stroke:var(--c-teal-50); stroke-width:1; stroke-dasharray:2 3; }
.pc-dot { stroke:var(--c-gray-99); stroke-width:2; fill:var(--c-slate-60); }
.pc-dot.pc-st-ahead { fill:var(--c-green-60); } .pc-dot.pc-st-on { fill:var(--c-teal-50); } .pc-dot.pc-st-bit { fill:var(--c-amber-70); } .pc-dot.pc-st-behind { fill:var(--c-red-55b); }
.pc-legend { margin:6px 0 4px; }
.pc-legend i { display:inline-block; width:12px; height:10px; border-radius:3px; margin-right:6px; }
.pc-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px 14px; margin:14px 0 0; padding:14px; border:1px solid var(--c-gray-90); border-radius:14px; background:var(--c-gray-99); font-size:12.5px; font-weight:700; color:var(--c-slate-45); }
.pc-form label { display:flex; flex-direction:column; gap:5px; }
.pc-form input { min-height:40px; box-sizing:border-box; padding:6px 10px; border:1px solid var(--c-gray-90); border-radius:10px; background:var(--c-gray-99); font:inherit; font-size:14px; font-weight:500; color:var(--c-sage-30); }
.pc-form input[type=number] { width:170px; -moz-appearance:textfield; appearance:textfield; }
.pc-form input[type=number]::-webkit-outer-spin-button, .pc-form input[type=number]::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.pc-money { position:relative; display:block; }
.pc-money i { position:absolute; left:10px; top:50%; transform:translateY(-50%); font-style:normal; font-weight:500; color:var(--c-slate-60); }
.pc-money input { padding-left:22px !important; }
.pc-opt { font-style:normal; font-weight:500; color:var(--c-slate-60); }
.pc-log { margin-top:14px; }
.pc-chip { display:inline-block; padding:1px 8px; border-radius:999px; background:var(--c-gray-95); font-weight:700; }
.pc-chip.pc-st-ahead { background:var(--c-sage-95); color:var(--c-green-50); } .pc-chip.pc-st-on { background:var(--c-gray-95); color:var(--c-teal-50); }
.pc-chip.pc-st-bit { background:var(--c-sand-95b); color:var(--c-amber-50b); } .pc-chip.pc-st-behind { background:var(--c-rose-95); color:var(--c-red-50b); }
.pc-del { width:28px; height:28px; border:1px solid var(--c-gray-90); border-radius:50%; background:var(--c-gray-99); color:var(--c-slate-60); cursor:pointer; }
.pc-del:hover { border-color:var(--c-red-50b); color:var(--c-red-50b); }
.pc-base { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; margin:14px 0 0; font-size:12.5px; color:var(--c-slate-50); }

@media (max-width:900px){
  .pc-hero { grid-template-columns:1fr; }
  .pc-tax { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px){
  .pc-amount strong { font-size:36px; }
  .pc-form { flex-direction:column; align-items:stretch; }
  .pc-form input[type=number], .pc-form input[type=date] { width:100%; }
  .pc-list { grid-template-columns:1fr; }
}
/* Desktop shell: the Paycheck, Taxes and Net Worth pages sit in the content column with the same padding and
   canvas as the other views (they were placed there only by grid auto-placement, without padding). */
@media (min-width:1001px){
  #paycheckView, #taxesView, #networthView { grid-column:2 !important; grid-row:2 !important; min-width:0 !important; margin:0 !important;
    padding:32px 34px 54px !important; background:var(--compass-canvas, var(--c-gray-99)) !important; border-radius:0 0 20px 0 !important; }
}
#paycheckView .hero, #taxesView .hero, #networthView .hero { background:transparent !important; }
/* The theme keeps .hero overflow visible, so its decorative ring would widen the page on these views. */
#paycheckView .hero::after, #taxesView .hero::after, #networthView .hero::after,
#expensesView .hero::after, #rothView .hero::after, #cashflowView .hero::after, #summaryView .hero::after { display:none !important; }
.pc-legend { display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--c-slate-45); }
.pc-legend span { display:inline-flex; align-items:center; }
.pc-range { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:8px; }
.pc-range div { padding:8px 10px; border-radius:10px; background:var(--c-gray-99); border:1px solid var(--c-gray-95); }
.pc-range div.is-mid { border-color:var(--c-teal-50); }
.pc-range span { display:block; font-size:11px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; color:var(--c-slate-60); }
.pc-range strong { font-size:17px; font-weight:800; color:var(--c-sage-30); font-variant-numeric:tabular-nums; }
/* over the safe level (2026-10-03): the paycheck itself says so */
.pc-amount.pc-over strong { color:var(--c-red-50b); }
.pc-amount.pc-over b { color:var(--c-red-50b); font-weight:700; }
/* use the safe level (2026-10-03) */
.pc-apply-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px; font-size:13.5px; }
.pc-apply-row .tx-btn { min-height:38px; padding:7px 16px; font-size:13.5px; }