/* ============================================================
   Visual tools (Oct 2026): Money Time Machine, Salary River, tax-regime tug of war.  Prefix: .vz-
   To revert the feature: delete this file together with the views / route lines (see VisualController.php).
   ============================================================ */
.vz-card { background: #fff; border-radius: 18px; box-shadow: 0 8px 30px rgba(10, 35, 66, .10); overflow: hidden; }
.vz-stage { position: relative; background: #0a2342; border-radius: 14px; overflow: hidden; }
.vz-stage svg { display: block; width: 100%; height: auto; touch-action: manipulation; }
.vz-controls .form-range { accent-color: #6b2fa0; }
.vz-controls label { font-weight: 600; }
.vz-val { font-weight: 700; color: #0a2342; font-variant-numeric: tabular-nums; }
.vz-stat { border-radius: 14px; padding: .8rem 1rem; background: #f4f6fb; height: 100%; }
.vz-stat small { display: block; color: #5b6475; }
.vz-stat b { display: block; font-size: 1.35rem; font-variant-numeric: tabular-nums; color: #0a2342; }
.vz-stat.vz-gold b { color: #b8860b; }
.vz-stat.vz-blue b { color: #1d4ed8; }
.vz-big { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.vz-readout { min-height: 2.6rem; font-size: .92rem; color: #e8ecf5; padding: .5rem .8rem; background: rgba(255, 255, 255, .08); }
.vz-chip { display: inline-block; border-radius: 999px; padding: .25rem .8rem; background: #eef2ff; color: #1e3a8a; font-size: .85rem; margin: 0 .35rem .35rem 0; }
.vz-chip.vz-star { background: #fff4d6; color: #7a5600; }
.vz-bld { cursor: pointer; transition: opacity .15s; }
.vz-bld:hover { opacity: .85; }
.vz-flow { stroke-dasharray: 6 14; animation: vz-flow 1.6s linear infinite; }
@keyframes vz-flow { to { stroke-dashoffset: -40; } }
.vz-twinkle { animation: vz-tw 3s ease-in-out infinite; }
@keyframes vz-tw { 50% { opacity: .25; } }
/* tug of war on the tax-regime result */
.vz-tug { background: linear-gradient(180deg, #f6f8ff, #ffffff); border-radius: 16px; padding: .5rem; }
.vz-tug svg { display: block; width: 100%; height: auto; max-height: 300px; }
@media (prefers-reduced-motion: reduce) {
    .vz-flow, .vz-twinkle { animation: none; }
}
@media print { .vz-stage, .vz-controls, .vz-tug { display: none !important; } }

/* ============================================================
   ITR journey (/itr-filing-guide/journey): scroll-driven walkthrough.  Prefix: .jr-
   ============================================================ */
.jr-bar { position: fixed; top: 0; left: 0; right: 0; height: 4px; z-index: 1040; background: rgba(10, 35, 66, .12); }
.jr-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #6b2fa0, #f59e0b); transition: width .12s linear; }
.jr-rail { position: fixed; left: 14px; top: 50%; transform: translateY(-50%); z-index: 1030; display: none; flex-direction: column; gap: 0; }
.jr-rail a { position: relative; display: flex; align-items: center; gap: 8px; padding: 9px 0; text-decoration: none; color: #64748b; font-size: .78rem; }
.jr-rail a::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #cbd5e1; background: #fff; flex: 0 0 auto; transition: all .3s; }
.jr-rail a::after { content: ""; position: absolute; left: 6px; top: 100%; width: 2px; height: 100%; background: #e2e8f0; z-index: -1; }
.jr-rail a:last-child::after { display: none; }
.jr-rail a span { opacity: 0; transform: translateX(-6px); transition: all .3s; background: #0a2342; color: #fff; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.jr-rail a.on { color: #0a2342; font-weight: 700; }
.jr-rail a.on::before { border-color: #6b2fa0; background: #6b2fa0; transform: scale(1.3); box-shadow: 0 0 0 5px rgba(107, 47, 160, .18); }
.jr-rail a.on span, .jr-rail a:hover span { opacity: 1; transform: none; }
.jr-rail a.done::before { border-color: #16a34a; background: #16a34a; }
@media (min-width: 1400px) { .jr-rail { display: flex; } }
.jr-top { position: sticky; top: 0; z-index: 1020; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-bottom: 1px solid #e2e8f0; padding: .4rem 0; font-size: .85rem; }
@media (min-width: 1400px) { .jr-top { display: none; } }
.jr-stage { padding: 56px 0; }
.jr-head { font-weight: 800; font-size: clamp(1.4rem, 3.4vw, 2.1rem); color: #0a2342; margin-bottom: .25rem; }
.jr-sub { color: #5b6475; margin-bottom: 1.5rem; }
.jr-reveal { opacity: 0; transform: translateY(26px); transition: opacity .6s ease, transform .6s cubic-bezier(.2, .8, .2, 1); transition-delay: var(--jr-d, 0s); }
.jr-reveal.jr-in { opacity: 1; transform: none; }
.jr-hero { min-height: 78vh; display: flex; align-items: center; background: linear-gradient(160deg, #0a2342, #241046 60%, #6b2fa0); color: #fff; position: relative; overflow: hidden; }
.jr-hero h1 { font-size: clamp(1.8rem, 5vw, 3.2rem); font-weight: 800; }
.jr-hero .jr-date { font-size: clamp(1.6rem, 4vw, 2.6rem); font-weight: 800; color: #fde68a; }
.jr-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(249, 199, 79, .35), transparent 70%); animation: jr-float 7s ease-in-out infinite; }
@keyframes jr-float { 50% { transform: translateY(-24px) scale(1.06); } }
.jr-scroll { display: inline-block; margin-top: 1.5rem; animation: jr-bob 1.6s ease-in-out infinite; font-size: 1.6rem; color: #fde68a; }
@keyframes jr-bob { 50% { transform: translateY(8px); } }
.jr-doc { display: flex; gap: .7rem; align-items: flex-start; background: #fff; border-radius: 14px; padding: .8rem 1rem; box-shadow: 0 4px 16px rgba(10, 35, 66, .08); height: 100%; }
.jr-doc i { color: #16a34a; font-size: 1.3rem; }
.jr-form { background: #fff; border-radius: 16px; padding: 1.2rem; box-shadow: 0 6px 22px rgba(10, 35, 66, .10); height: 100%; border-top: 5px solid #6b2fa0; }
.jr-form h3 { font-weight: 800; color: #6b2fa0; font-size: 1.15rem; }
.jr-steps { position: relative; padding-left: 0; }
.jr-steps::before { content: ""; position: absolute; left: 31px; top: 20px; bottom: 20px; width: 4px; border-radius: 4px; background: #e2e8f0; }
.jr-steps::after { content: ""; position: absolute; left: 31px; top: 20px; width: 4px; border-radius: 4px; background: linear-gradient(#6b2fa0, #f59e0b); height: calc((100% - 40px) * var(--jr-fill, 0)); transition: height .15s linear; }
.jr-step { position: relative; display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.6rem; }
.jr-num { flex: 0 0 66px; height: 66px; width: 66px; border-radius: 50%; background: #fff; border: 4px solid #cbd5e1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; color: #64748b; position: relative; z-index: 1; transition: all .4s; }
.jr-step.jr-in .jr-num { border-color: #6b2fa0; color: #6b2fa0; }
.jr-step.jr-done .jr-num { background: #16a34a; border-color: #16a34a; color: #fff; }
.jr-card { flex: 1 1 auto; background: #fff; border-radius: 16px; padding: 1rem 1.2rem; box-shadow: 0 6px 22px rgba(10, 35, 66, .10); }
.jr-card .jr-ico { font-size: 1.9rem; color: #6b2fa0; display: inline-block; }
.jr-step.jr-in .jr-ico { animation: jr-pop .7s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes jr-pop { from { transform: scale(0) rotate(-40deg); } to { transform: none; } }
.jr-step.jr-done .jr-card { background: #f0fdf4; }
.jr-time { position: relative; padding-left: 28px; margin-bottom: 1rem; }
.jr-time::before { content: ""; position: absolute; left: 6px; top: 8px; width: 14px; height: 14px; border-radius: 50%; background: #6b2fa0; box-shadow: 0 0 0 5px rgba(107, 47, 160, .15); }
.jr-time::after { content: ""; position: absolute; left: 12px; top: 24px; bottom: -18px; width: 2px; background: #e2e8f0; }
.jr-time:last-child::after { display: none; }
.jr-time.jr-past { opacity: .5; }
.jr-time.jr-past::before { background: #94a3b8; box-shadow: none; }
.jr-time.jr-next::before { background: #f59e0b; box-shadow: 0 0 0 7px rgba(245, 158, 11, .25); animation: jr-pulse 1.6s infinite; }
@keyframes jr-pulse { 50% { box-shadow: 0 0 0 12px rgba(245, 158, 11, 0); } }
.jr-pen { background: #fff7ed; border-left: 5px solid #f59e0b; border-radius: 12px; padding: .9rem 1.1rem; margin-bottom: .8rem; }
.jr-end { text-align: center; padding: 70px 0 30px; }
.jr-check { width: 110px; height: 110px; }
.jr-check circle { stroke: #16a34a; stroke-width: 5; fill: none; stroke-dasharray: 300; stroke-dashoffset: 300; }
.jr-check path { stroke: #16a34a; stroke-width: 7; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 80; stroke-dashoffset: 80; }
.jr-in .jr-check circle { animation: jr-draw 1s ease forwards; } .jr-in .jr-check path { animation: jr-draw .6s .8s ease forwards; }
@keyframes jr-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
    .jr-reveal { opacity: 1; transform: none; transition: none; }
    .jr-orb, .jr-scroll, .jr-time.jr-next::before, .jr-step.jr-in .jr-ico { animation: none; }
    .jr-check circle, .jr-check path { stroke-dashoffset: 0; animation: none !important; }
}
@media print { .jr-bar, .jr-rail, .jr-top, .jr-scroll, .jr-orb { display: none !important; } .jr-reveal { opacity: 1 !important; transform: none !important; } }