/* Replan Transit product tour (assets/ui-tour/ui-tour.js): the app's own layout (module bar, network editor,
   schedule editor with stringline and vehicle blocks, cost calculation, accessibility analysis), redrawn light
   and schematic. Fictional city and figures, no client data. The app is laid out at 1120 x 680 and scaled to fit. */
.uitour{--ui-ink:#1D1A1A;--ui-dim:rgba(29,26,26,0.6);--ui-faint:rgba(29,26,26,0.42);--ui-line:rgba(29,26,26,0.1);--ui-red:#FF3B30;--ui-red-t:#C9281D;--ui-teal:#2F7183;--ui-paper:#F6F5F2;--ui-green:#2E8B57;width:100%;color:var(--ui-ink)}
.ut-frame{position:relative;width:100%;aspect-ratio:1120/680;border-radius:6px;overflow:hidden;background:#fff;border:1px solid var(--ui-line);box-shadow:0 24px 60px rgba(29,26,26,0.12)}
.ut-app{position:absolute;left:0;top:0;width:1120px;height:680px;transform-origin:0 0;display:grid;grid-template-rows:38px 46px 34px 1fr;background:#fff;font-size:12.5px;line-height:1.3}
.ut-app *{box-sizing:border-box}
/* top bar, module bar, editor title */
.ut-top{display:flex;align-items:center;gap:12px;padding:0 16px;border-bottom:1px solid var(--ui-line)}
.ut-logo{display:flex;align-items:center;gap:7px;font-family:var(--fl,inherit);font-weight:700;letter-spacing:0.08em;font-size:11.5px}
.ut-logo b{width:15px;height:15px;border-radius:3px;background:var(--ui-red);display:block}
.ut-crumb{color:var(--ui-dim)}
.ut-user{margin-left:auto;display:flex;gap:16px;color:var(--ui-dim);font-size:12px}
.ut-mods{display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--ui-line);background:var(--ui-paper)}
.ut-sel,.ut-mod{display:flex;align-items:center;gap:7px;height:30px;padding:0 11px;border:1px solid var(--ui-line);border-radius:4px;background:#fff;white-space:nowrap}
.ut-sel{color:var(--ui-ink)}
.ut-sel::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--ui-faint);border-bottom:1.5px solid var(--ui-faint);transform:rotate(45deg) translate(-1px,-2px);margin-left:4px}
.ut-mod{color:var(--ui-dim);transition:background .3s,color .3s,border-color .3s}
.ut-mod.on{background:var(--ui-ink);color:#fff;border-color:var(--ui-ink)}
.ut-mod i{width:12px;height:12px;border:1.5px solid currentColor;border-radius:3px;display:block;opacity:.7}
.ut-sp{flex:1}
.ut-title{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--ui-line);font-weight:600}
.ut-title span{font-weight:400;color:var(--ui-faint);margin-left:10px;font-size:11.5px}
.ut-title em{font-style:normal;color:var(--ui-faint);font-size:16px}
.ut-body{position:relative;overflow:hidden;background:var(--ui-paper)}
.ut-screen{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
.ut-screen.on{opacity:1;visibility:visible;transition:opacity .45s ease}
.ut-screen>svg.ut-map{position:absolute;inset:0;width:100%;height:100%;display:block}
.ut-map text,.ut-chart text{paint-order:stroke;stroke:#fff;stroke-width:3.5px;stroke-linejoin:round}
/* floating map panels and toolbar */
.ut-mapbar{position:absolute;left:10px;top:10px;right:56px;display:flex;gap:6px;z-index:2}
.ut-btn{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border:1px solid var(--ui-line);border-radius:4px;background:#fff;color:var(--ui-dim);white-space:nowrap;font-size:12px}
.ut-btn.dark{background:var(--ui-ink);border-color:var(--ui-ink);color:#fff}
.ut-btn.green{color:var(--ui-green);border-color:rgba(46,139,87,0.35);font-weight:600}
.ut-panel{position:absolute;left:10px;top:48px;width:252px;bottom:10px;background:#fff;border:1px solid var(--ui-line);border-radius:4px;box-shadow:0 6px 18px rgba(29,26,26,0.07);padding:12px 12px 10px;display:flex;flex-direction:column;gap:9px;z-index:2;overflow:hidden}
.ut-h{display:flex;justify-content:space-between;align-items:center;font-family:var(--fl,inherit);font-weight:700;font-size:10px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-faint)}
.ut-h small{font-family:inherit;letter-spacing:0;text-transform:none;font-weight:400;color:var(--ui-red-t);font-size:10.5px}
.ut-ok{background:rgba(46,139,87,0.08);color:var(--ui-green);border-radius:4px;padding:7px 9px;font-size:12px}
.ut-kv{display:flex;justify-content:space-between;gap:10px;padding:2px 0}
.ut-kv b{font-weight:600;font-variant-numeric:tabular-nums}
.ut-kv b.g{color:var(--ui-green)}
.ut-stops{display:flex;flex-direction:column;gap:5px}
.ut-stop{display:grid;grid-template-columns:auto 1fr;gap:2px 8px;align-items:center}
.ut-badge{font-family:var(--fl,inherit);font-weight:700;font-size:9.5px;letter-spacing:0.08em;color:var(--ui-red-t);background:rgba(255,59,48,0.08);border-radius:3px;padding:2px 5px}
.ut-stop small{grid-column:2;color:var(--ui-faint);font-variant-numeric:tabular-nums;font-size:11px}
.ut-tools{position:absolute;right:10px;top:48px;display:flex;flex-direction:column;gap:6px;z-index:2}
.ut-tools i{width:30px;height:30px;border-radius:4px;background:#fff;border:1px solid var(--ui-line);display:block}
.ut-legend{position:absolute;right:10px;bottom:10px;background:#fff;border:1px solid var(--ui-line);border-radius:4px;padding:10px 12px;display:grid;gap:5px;z-index:2;box-shadow:0 6px 18px rgba(29,26,26,0.07)}
.ut-legend span{display:flex;align-items:center;gap:8px}.ut-legend i{width:14px;height:10px;border-radius:2px;display:block}
.ut-card{border:1px solid var(--ui-line);border-radius:4px;padding:8px 9px;display:grid;grid-template-columns:22px 1fr;gap:1px 8px;align-items:center}
.ut-card b{font-weight:600}.ut-card small{grid-column:2;color:var(--ui-faint);font-size:10.5px}
.ut-card i{grid-row:span 2;width:22px;height:22px;border-radius:50%;background:rgba(29,26,26,0.07);display:flex;align-items:center;justify-content:center;font-style:normal;font-weight:700;font-size:10.5px;color:var(--ui-dim)}
.ut-card:not(.on) small{display:none}
.ut-card.on{border-color:var(--ui-ink)}.ut-card.on i{background:var(--ui-ink);color:#fff}
.ut-field{border:1px solid var(--ui-line);border-radius:4px;padding:6px 9px;font-variant-numeric:tabular-nums}
.ut-check{display:flex;gap:7px;align-items:center;color:var(--ui-dim)}.ut-check i{width:13px;height:13px;border-radius:3px;background:var(--ui-ink);display:block}
.ut-go{background:var(--ui-ink);color:#fff;border-radius:4px;padding:8px;text-align:center}
/* schedule editor */
.ut-ed{position:absolute;inset:0;display:grid;grid-template-columns:52px 210px 1fr;background:#fff}
.ut-rail{border-right:1px solid var(--ui-line);display:flex;flex-direction:column;align-items:center;gap:14px;padding-top:12px;background:var(--ui-paper)}
.ut-rail span{display:flex;flex-direction:column;align-items:center;gap:4px;font-family:var(--fl,inherit);font-weight:700;font-size:7.5px;letter-spacing:0.08em;color:var(--ui-faint)}
.ut-rail span i{width:24px;height:24px;border-radius:4px;border:1.5px solid currentColor;display:block;opacity:.6}
.ut-rail span.on{color:var(--ui-ink)}.ut-rail span.on i{background:var(--ui-ink);border-color:var(--ui-ink);opacity:1}
.ut-lists{border-right:1px solid var(--ui-line);padding:10px;display:flex;flex-direction:column;gap:6px;overflow:hidden}
.ut-li{padding:5px 8px;border-radius:4px;display:flex;align-items:center;gap:7px;white-space:nowrap;overflow:hidden}
.ut-li.on{background:var(--ui-paper);font-weight:600}
.ut-li i{width:8px;height:8px;border-radius:50%;display:block;flex:none}
.ut-dir{font-family:var(--fl,inherit);font-weight:700;font-size:9px;letter-spacing:0.08em;color:var(--ui-faint);border:1px solid var(--ui-line);border-radius:3px;padding:1px 4px}
.ut-work{display:flex;flex-direction:column;min-width:0;min-height:0}
.ut-toolbar{display:flex;gap:6px;padding:8px 10px;border-bottom:1px solid var(--ui-line);overflow:hidden}
.ut-tabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--ui-line)}
.ut-tabs span{padding:8px 12px;color:var(--ui-dim);border-bottom:2px solid transparent;margin-bottom:-1px}
.ut-tabs span.on{color:var(--ui-ink);font-weight:600;border-color:var(--ui-ink)}
.ut-sub{display:flex;align-items:baseline;gap:12px;padding:9px 14px 0}
.ut-sub b{font-size:14px}.ut-sub span{color:var(--ui-faint);font-size:11.5px}
.ut-chart{flex:1;min-height:0;display:block;width:100%}
.ut-blocks{border-top:1px solid var(--ui-line);display:grid;grid-template-columns:1fr 190px;grid-template-rows:auto 1fr;height:232px;flex:none}
.ut-blocks-h{grid-column:1/-1;display:flex;align-items:center;gap:10px;padding:7px 12px;border-bottom:1px solid var(--ui-line)}
.ut-sum{border-left:1px solid var(--ui-line);padding:8px 12px;display:flex;flex-direction:column;gap:2px}
/* cost */
.ut-cost{padding:14px 18px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.ut-fields{display:grid;grid-template-columns:repeat(4,1fr);gap:12px 18px}
.ut-fields div{display:flex;flex-direction:column;gap:3px}
.ut-fields span{font-family:var(--fl,inherit);font-weight:700;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-faint)}
.ut-fields b{font-weight:500;font-size:14px;font-variant-numeric:tabular-nums}
.ut-total{border:1px solid var(--ui-line);border-radius:4px;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;background:var(--ui-paper)}
.ut-total b{font-size:26px;font-weight:500;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.ut-total span{color:var(--ui-dim)}.ut-total em{font-style:normal;font-weight:600;color:var(--ui-red-t)}
.ut-table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.ut-table th,.ut-table td{text-align:left;padding:8px 8px;border-bottom:1px solid var(--ui-line);white-space:nowrap}
.ut-table th{font-family:var(--fl,inherit);font-weight:700;font-size:9.5px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-faint)}
/* drawing and fading only run on the active screen */
.ut-draw{stroke-dasharray:var(--len);stroke-dashoffset:var(--len)}
.ut-screen.on .ut-draw{animation:utDraw 1.6s cubic-bezier(.16,1,.3,1) .25s forwards}
.ut-pop{opacity:0}
.ut-screen.on .ut-pop{animation:utPop .4s ease forwards;animation-delay:var(--d,0s)}
@keyframes utDraw{to{stroke-dashoffset:0}}
@keyframes utPop{to{opacity:1}}
/* steps under the window */
.ut-steps{display:grid;grid-template-columns:repeat(5,1fr);margin-top:18px;border-top:1px solid var(--ui-line)}
.ut-step{align-self:start;appearance:none;background:none;border:0;text-align:left;padding:12px 12px 0 0;cursor:pointer;font:inherit;color:var(--ui-dim);position:relative}
.ut-step::before{content:'';position:absolute;left:0;right:12px;top:-1px;height:2px;background:transparent}
.ut-step.on{color:var(--ui-ink)}
.ut-step.on::before{background:var(--ui-red)}
.ut-step b{display:block;font-family:var(--fl,inherit);font-weight:700;font-size:11px;letter-spacing:0.1em;text-transform:uppercase;color:var(--ui-red-t);margin-bottom:4px}
.ut-step span{font-size:14px;line-height:1.4}
.ut-step:focus-visible{outline:2px solid var(--ui-teal);outline-offset:3px}
@media(max-width:760px){.ut-steps{grid-template-columns:1fr 1fr}.ut-step{padding-bottom:10px}}
@media(prefers-reduced-motion:reduce){.ut-screen,.ut-screen.on{transition:none}.ut-screen.on .ut-draw{animation:none;stroke-dashoffset:0}.ut-screen.on .ut-pop{animation:none;opacity:1}}
.hero-tour{margin-top:56px}
@media(max-width:960px){.hero-tour{margin-top:36px}}

/* focus: the step's own panel is drawn in full with a red frame, the rest of the app stays as quiet placeholders */
.gh{color:transparent!important;background:#ECEBE7!important;border-color:transparent!important;box-shadow:none!important;border-radius:3px}
.gh *,.gh::after{visibility:hidden}
.ut-rail span.gh{background:none!important}.ut-rail span.gh i{visibility:visible;border-color:transparent;background:#ECEBE7;opacity:1}
.ut-tabs span.gh{margin:7px 4px;padding:3px 10px}
.ut-li.gh{width:72%;height:16px;padding:0;margin:5px 8px}
.ut-h.gh{width:40%}
.ut-tools i.gh{border:0}
.gh-soft{opacity:.25;filter:grayscale(1)}
.ut-focus{border-color:transparent!important;box-shadow:0 0 0 2px var(--ui-red),0 12px 30px rgba(29,26,26,0.10)!important;z-index:3}
.ut-btn.ut-focus{color:var(--ui-ink);font-weight:600}
.ut-focusbox{flex:1;min-height:0;display:flex;margin:6px 10px 10px;border-radius:4px;box-shadow:0 0 0 2px var(--ui-red)}
.ut-total.ut-focus{background:#fff}

/* polish (Impeccable pass): quieter placeholders, one focus per step, clearer figures */
.gh{background:#F0EFEB!important}
.ut-mods .gh{opacity:.7}
.ut-kv b em{font-style:normal;font-weight:600;color:var(--ui-green);margin-left:6px;font-size:11.5px}
.ut-table tr.ut-base td{color:var(--ui-faint)}
.ut-table td:first-child{font-weight:600}
.ut-panel{gap:10px;padding:14px}
.ut-stop{padding:2px 0}
.ut-badge{font-size:9px}
.ut-fields{grid-template-columns:repeat(4,minmax(0,1fr))}
.ut-fields b{font-size:16px}
.ut-total b{font-size:30px}

/* the app's own type: Roboto for the shell, map panels and analysis; Nunito Sans inside the schedule editor.
   Self-hosted variable fonts (no request to Google); browsers only fetch them where a tour is on the page. */
@font-face{font-family:'Roboto';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/roboto-var-latin.woff2) format('woff2')}
@font-face{font-family:'Nunito Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/nunito-sans-var-latin.woff2) format('woff2')}
.ut-app{font-family:'Roboto',system-ui,-apple-system,'Segoe UI',sans-serif}
.ut-ed{font-family:'Nunito Sans','Roboto',system-ui,sans-serif}
.ut-app .ut-h,.ut-app .ut-badge,.ut-app .ut-logo,.ut-app .ut-rail span,.ut-app .ut-fields span,.ut-app .ut-table th,.ut-app .ut-dir{font-family:inherit}
.ut-app .ut-h,.ut-app .ut-fields span,.ut-app .ut-table th{letter-spacing:0.06em;font-weight:600}

/* scenario comparison screen and still images */
.ut-cmp{padding:12px 22px 18px;display:flex;flex-direction:column;gap:16px}
.ut-cmp .ut-table td,.ut-cmp .ut-table th{padding:11px 10px;font-size:14px}
.ut-cmp .ut-table th{font-size:10.5px}
.ut-cmp .ut-table td:first-child{font-weight:400;color:var(--ui-dim)}
.ut-cmp .ut-table td:nth-child(2){color:var(--ui-faint)}
.ut-cmp .ut-table .us{font-weight:700;background:rgba(255,59,48,0.04)}
.ut-cmp .ut-table th.us{color:var(--ui-red-t)}
.ut-delta{display:inline-block;border-radius:3px;padding:2px 8px;font-weight:600;font-size:13px}
.ut-delta.up{color:var(--ui-green);background:rgba(46,139,87,0.09)}
.ut-delta.cost{color:var(--ui-red-t);background:rgba(255,59,48,0.08)}
.ut-still .ut-pop{opacity:1!important;animation:none!important}
.ut-still .ut-draw{stroke-dashoffset:0!important;animation:none!important}
.ut-still .ut-screen{transition:none}