/* Szpica v3 — kolorystyka i hierarchia referencyjnej makiety. */
:root{--ink:#101f29;--muted:#405763;--green:#006b43;--light:#e5f6ec;--line:#dce3e8;--bg:#f3f5f8;--orange:#a54804}body,h1,h2,h3{font-family:Arial,Helvetica,sans-serif}.eyebrow,.nav-label,.stage-no{color:#4b6265}.label,.stage-metrics span,.stage-bottom,.subtitle{color:#52636d}.stage-card.active{border:2px solid #008457;background:#f2fff7}.badge.active{background:#d7f5de;color:#006323}.badge.warning{background:#fff0cc;color:#885000}.badge.done{color:#345547;background:#e5eee9}.badge{font-size:10px}.good{color:#00723d!important}.late{color:#a54604!important}.legend-dot{background:#006b43}.legend-dot.trailer{background:#d11121}
.detail-mode .topbar{display:none}.detail-mode main{padding:20px 28px 12px;max-width:1260px}.detail-screen{width:100%}.ui-icon{width:25px;height:25px;flex-shrink:0;display:inline-block;vertical-align:middle}.detail-masthead{display:flex;align-items:center;gap:16px;margin-bottom:18px;min-height:60px}.detail-masthead .back{margin:0;font-size:38px;min-width:48px;min-height:48px;color:#00563b}.detail-brand{display:flex;gap:12px;align-items:center}.detail-brand>.ui-icon{width:46px;height:51px;color:#005637;stroke-width:2.6}.detail-brand h1{font-size:32px;letter-spacing:-.8px;line-height:1.15}.detail-brand span{font-size:16px;color:#3c5361}.masthead-status{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:13px;color:#20363d}.masthead-status .live-dot{background:#009b36;width:10px;height:10px}.masthead-status.unhealthy{color:#a14200}.masthead-status.unhealthy .live-dot{background:#ca5b05}.settings-icon{display:grid;place-items:center;background:transparent;color:#006040;width:48px;height:48px}.settings-icon .ui-icon{width:30px;height:30px}
.detail-context{display:flex;gap:18px;align-items:center;padding:13px 17px;background:#e9eef4;border:1px solid #e2e7ee;border-radius:12px;margin-bottom:14px}.day-context{display:flex;flex-direction:column;gap:4px}.day-context strong{font-size:19px}.day-context>span{font-size:12px;color:#384f5e}.stage-context{display:flex;flex-direction:column;gap:6px;padding-left:18px;border-left:1px solid #cbd5df;font-size:13px}.stage-context .badge{align-self:flex-start}.detail-context .segmented{margin-left:auto;background:#d6e0e7;padding:3px}.segmented button{min-height:42px;color:#365362;font-size:12px;padding:9px 13px}.segmented button.on{background:#006d47;color:white;box-shadow:none}.context-details{background:#f8faff;font-size:12px;gap:9px;border-color:#ced9e1;padding:8px 13px}.context-details .ui-icon{width:21px;height:21px}
.detail-screen .progress-panel{padding:18px 22px 16px;margin:0 0 12px;border:1px solid #e0e5e9;box-shadow:0 2px 7px #102f3910;border-radius:13px}.progress-head h2{font-size:21px}.progress-head b{font-size:29px;color:#005c3a;font-family:Arial,sans-serif}.progress-distance{display:block;font-size:23px;font-weight:700;margin-top:5px;font-variant-numeric:tabular-nums}.route-progress{position:relative;margin:16px 12px 18px;height:14px}.route-progress .stage-progress{height:14px;margin:0;background:#cbd9e2;border-radius:10px;overflow:hidden}.route-progress .stage-progress>div{background:linear-gradient(90deg,#004a31,#008751)}.route-start,.route-end,.route-walker{position:absolute;top:50%;transform:translate(-50%,-50%);width:30px;height:30px;display:grid;place-items:center;border-radius:50%;border:2px solid white;box-shadow:0 2px 5px #102e2930}.route-start{background:#00663e;left:0}.route-end{background:#ffd0d4;color:#c70011;left:100%;font-size:21px}.route-walker{background:#005536;width:37px;height:37px;color:white;z-index:1}.route-walker .ui-icon{width:26px;height:26px}.detail-screen .progress-endpoints{margin:0;align-items:flex-start;color:var(--ink)}.progress-endpoints>div{display:flex;flex-direction:column;gap:4px;max-width:49%}.progress-endpoints>div:last-child{text-align:right}.progress-endpoints strong{font-size:20px;line-height:1.15}.progress-endpoints span{font-size:15px;color:#435562}.progress-endpoints b{color:#0c2431;font-size:20px;margin-left:4px;font-variant-numeric:tabular-nums}.progress-stale{font-size:12px;font-weight:600;color:#9b5002;margin-top:7px}
.journey-metrics{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid #e0e6eb;border-radius:12px;background:#fff;margin:0 0 13px;padding:17px 10px;box-shadow:0 2px 7px #102f3909}.distance-card{padding:0 20px;border-right:1px solid #d4dee5}.distance-card:last-child{border:0}.distance-card h3{font-size:15px;font-weight:400;margin-bottom:12px;color:#243a48}.paired-value{display:flex;align-items:center;gap:10px;margin-top:7px}.paired-value strong{font-size:26px;font-weight:750;white-space:nowrap;letter-spacing:-.6px;line-height:1.2;font-variant-numeric:tabular-nums}.paired-value .ui-icon{width:25px;height:25px;color:#152c38}.arrival-card p{font-size:14px;margin-top:10px;color:#3c5262}.arrival-card p>span{display:inline-block;margin-left:15px;font-weight:600}
.tracker-pair{display:grid;grid-template-columns:1fr 1fr;gap:13px;margin-bottom:13px}.pace-card{border:1px solid #bce3d1;background:#effbf4;border-radius:12px;padding:18px 20px 13px}.pace-card.trailer{background:#fff9eb;border-color:#f4d799}.pace-card-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:15px}.pace-card-head h3{display:flex;align-items:center;gap:11px;font-size:20px}.pace-card-head h3 small{font-size:15px}.pace-card-head h3>.ui-icon{width:34px;height:34px;color:#005638}.pace-card.trailer .pace-card-head h3>.ui-icon{color:#d11121}.pace-card-head .badge{font-size:11px;white-space:nowrap;padding:8px 9px}.pace-card-values{display:grid;grid-template-columns:1fr 1fr;gap:14px}.pace-card-values>div{display:flex;flex-direction:column;gap:7px}.pace-card-values>div+div{border-left:1px solid #d5dfdd;padding-left:18px}.pace-label{font-size:13px;color:#2e4450}.pace-card-values strong{font-size:26px;white-space:nowrap;line-height:1.2;letter-spacing:-.6px}.pace-card-values strong small{font-size:15px;letter-spacing:0}.planned-value{font-size:13px;color:#3c5260}.planned-value b{font-size:15px}.sample-time{font-size:12px;text-align:center;color:#4b5c66;margin-top:16px}.sample-time span{font-size:10px}
.column-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;border:1px solid #dfe7ed;background:#fff;border-radius:12px;margin-bottom:12px;padding:16px 20px;box-shadow:0 2px 7px #102f3909}.column-strip>div{display:flex;align-items:center;gap:15px;border-right:1px solid #d4dfe5}.column-strip>div:last-child{border:0}.column-strip .ui-icon{color:#005439;width:36px;height:36px}.column-strip>div>span{display:flex;flex-direction:column;gap:4px;font-size:13px}.column-strip strong{display:block;font-size:23px;font-weight:700;color:#102630;line-height:1.1}.column-strip small{font-size:12px;color:#405661}.column-health strong{font-size:17px;color:#00802c}.column-strip .health-icon{display:grid;place-items:center;background:#009936;color:white;width:35px;height:35px;flex-shrink:0;border-radius:50%;font-size:25px;font-weight:bold}
.detail-screen .actions{margin:0 0 12px;gap:13px}.detail-screen .actions button{border-radius:11px;min-height:78px;gap:5px;padding:10px 14px;opacity:1}.detail-screen .actions button.primary{background:#00723e}.detail-screen .actions button.primary:disabled{background:#dfebe5;color:#426253;border-color:#bfd0c6}.detail-screen .actions button.danger{background:#d10f1d;color:#fff;border-color:#d10f1d}.detail-screen .actions button.danger:disabled{background:#f9dcdf;color:#92333c;border-color:#e9bfc5}.action-title{display:flex;align-items:center;justify-content:center;gap:12px;font-size:19px;font-weight:700}.action-title i{font-style:normal;width:31px;height:31px;border-radius:50%;background:#fff;color:#007341;display:grid;place-items:center;font-size:18px}.danger .action-title i{color:#cb0c20}.detail-screen .actions small{font-size:12px}.detail-screen .map{min-height:350px;height:390px;border:1px solid #cbd8d0;border-radius:12px}.map-title{font-size:12px;color:#204736;background:white}.map-legend{font-size:12px;color:#203d31;background:#fffffff2}.map-controls button{width:48px;height:48px;color:#112f3c;font-size:27px}.map-controls button[data-map="north"]{font-size:14px}.map-alert{font-size:13px;background:#fff0cb;color:#8b4700;border:1px solid #efbf69}.map-credit{color:#41583e;font-size:9px;background:#ffffffa6}.detail-demo-label{text-align:center;color:#5b6b74;font-size:10px;margin-top:10px}.detail-screen .summary-banner{padding:14px 18px;margin-bottom:12px}.detail-screen .summary-actions{margin:10px 0 0}.detail-screen .summary-actions .btn{min-height:44px}
body.simple-mode{overflow:hidden}.simple-mode .shell{height:100dvh;display:flex;flex-direction:column}.simple-mode main{display:flex;flex:1;min-height:0;width:100%;padding:14px 24px max(10px,env(safe-area-inset-bottom));margin:0 auto}.simple-mode .app-footer{display:none}.simple.detail-screen{display:flex;flex-direction:column;min-height:0;height:100%}.simple>.detail-masthead,.simple>.detail-context,.simple>.progress-panel,.simple>.actions,.simple>.summary-banner,.simple>.summary-actions{flex-shrink:0}.simple .map{flex:1;min-height:0;height:auto;margin:0}.simple .detail-demo-label{font-size:9px;line-height:12px;margin:4px 0 0;flex-shrink:0}.simple .actions button{flex-direction:column;gap:4px}.simple .progress-panel{margin-bottom:12px}.simple .summary-actions{gap:6px;flex-wrap:nowrap}.simple .summary-actions .btn{font-size:11px;padding:6px 10px;flex:1}
@media(max-width:1100px){.detail-mode main{padding:17px 20px}.context-details span{display:none}.context-details{min-width:48px;padding:8px}.detail-context{gap:13px}.pace-card-head h3{font-size:17px}.pace-card-head h3 small{font-size:12px}.pace-card-values strong{font-size:23px}.pace-card-values strong small{font-size:12px}.pace-card{padding:16px}.paired-value strong{font-size:24px}.distance-card{padding:0 15px}.column-strip{padding:15px}.column-strip>div{gap:9px}.column-strip strong{font-size:21px}}
@media(max-width:760px){.detail-mode main{padding:12px 12px 8px}.detail-masthead{gap:9px;margin-bottom:10px;min-height:48px}.detail-masthead .back{font-size:30px;min-width:38px}.detail-brand{gap:5px}.detail-brand>.ui-icon{width:29px;height:40px}.detail-brand h1{font-size:25px;letter-spacing:-.6px}.detail-brand span{font-size:11px}.masthead-status{font-size:10px;gap:5px;max-width:91px;line-height:1.3}.masthead-status .live-dot{width:8px;height:8px}.settings-icon{width:36px;min-width:36px;height:48px}.settings-icon .ui-icon{width:25px;height:25px}.detail-context{gap:10px;padding:10px;margin-bottom:10px;flex-wrap:wrap}.day-context strong{font-size:17px}.day-context>span{font-size:11px}.stage-context{font-size:12px;padding-left:10px}.stage-context .badge{font-size:8px;padding:5px}.detail-context .segmented{margin-left:auto}.segmented button{font-size:11px;padding:8px 10px;min-height:40px}.context-details{margin-left:auto;min-height:42px}.full .detail-context .segmented{margin-left:0}.full .detail-context .day-context,.full .detail-context .stage-context{flex:1}.full .context-details span{display:inline}.full .context-details{font-size:11px}.detail-screen .progress-panel{padding:14px 14px 12px;margin-bottom:10px}.progress-head h2{font-size:18px}.progress-head b{font-size:27px}.progress-distance{font-size:20px;margin-top:5px}.route-progress{margin-top:17px;margin-bottom:19px;height:11px}.route-progress .stage-progress{height:11px}.route-start,.route-end{width:27px;height:27px}.route-walker{width:33px;height:33px}.progress-endpoints strong{font-size:18px}.progress-endpoints b{font-size:20px}.progress-endpoints span{font-size:13px}.progress-stale{font-size:11px}.journey-metrics{grid-template-columns:1fr 1fr;padding:14px 0 0;margin-bottom:10px;overflow:hidden}.distance-card{padding:0 13px 13px}.distance-card:nth-child(2){border-right:0}.distance-card h3{font-size:13px;margin-bottom:10px}.paired-value{gap:7px;margin-top:8px}.paired-value strong{font-size:22px}.paired-value .ui-icon{width:22px;height:22px}.arrival-card{grid-column:1/-1;background:#f6fafb;border-top:1px solid #dce7eb!important;padding:11px 13px;display:flex;align-items:center;gap:12px}.arrival-card h3{margin:0;font-size:12px}.arrival-card .paired-value{margin:0}.arrival-card .paired-value strong{font-size:22px}.arrival-card .paired-value .ui-icon{width:20px;height:20px}.arrival-card p{font-size:11px;margin:0 0 0 auto}.arrival-card p>span{display:block;margin:3px 0 0;text-align:right}.tracker-pair{gap:9px;margin-bottom:10px}.pace-card{padding:12px 10px 10px}.pace-card-head{gap:4px;flex-wrap:wrap;margin-bottom:12px}.pace-card-head h3{gap:5px;font-size:16px}.pace-card-head h3 small{font-size:10px;display:block;margin-top:1px}.pace-card-head h3>.ui-icon{width:26px;height:30px}.pace-card-head .badge{font-size:8px;padding:5px 6px;margin-left:auto}.pace-card-values{grid-template-columns:1fr;gap:11px}.pace-card-values>div{gap:5px}.pace-card-values>div+div{border-left:0;border-top:1px solid #d4dfd7;padding:10px 0 0}.pace-card-values strong{font-size:24px}.pace-card-values strong small{font-size:13px}.pace-label{font-size:11px}.planned-value{font-size:11px}.planned-value b{font-size:13px}.sample-time{font-size:10px;line-height:1.5;margin-top:10px;text-align:left}.sample-time span{display:block;font-size:9px}.column-strip{padding:12px 10px;gap:8px;grid-template-columns:1fr 1fr;margin-bottom:10px}.column-strip>div{gap:8px}.column-strip>div:nth-child(2){border:0}.column-strip .ui-icon{width:24px;height:24px}.column-strip>div>span{font-size:11px}.column-strip strong{font-size:21px}.column-strip small{font-size:10px}.column-strip .column-health{grid-column:1/-1;justify-content:center;border-top:1px solid #dce5e7;padding-top:10px}.column-health>span:last-child{flex-direction:row;gap:10px;align-items:center}.column-health strong{font-size:14px}.column-strip .health-icon{width:24px;height:24px;font-size:17px}.detail-screen .actions{gap:9px;margin-bottom:10px}.detail-screen .actions button{min-height:75px;padding:8px}.action-title{font-size:15px;gap:7px}.action-title i{width:26px;height:26px;font-size:15px}.detail-screen .actions small{font-size:10px}.detail-screen .map{height:330px;min-height:280px}.map-legend{font-size:10px;gap:9px;left:9px;bottom:17px;padding:8px}.map-title{font-size:10px;left:9px;top:9px;padding:7px}.map-controls{right:9px;top:9px;gap:5px}.map-alert{top:49px;left:9px;right:64px;font-size:11px;padding:8px}.map-credit{font-size:8px}.simple-mode main{padding:8px 10px max(5px,env(safe-area-inset-bottom))}.simple .detail-masthead{margin-bottom:6px}.simple .detail-context{gap:7px;padding:8px;margin-bottom:8px;flex-wrap:nowrap}.simple .day-context>span{display:none}.simple .day-context strong{font-size:14px;white-space:nowrap}.simple .stage-context{font-size:11px;padding-left:7px}.simple .stage-context .badge{font-size:7px}.simple .segmented button{font-size:10px;padding:6px 8px;min-height:38px}.simple .progress-panel{padding:12px;margin-bottom:8px}.simple .actions{margin-bottom:8px}.simple .actions button{min-height:66px}.simple .map{min-height:0;height:auto}.simple .detail-demo-label{font-size:8px}.simple .summary-banner{padding:8px;margin-bottom:6px;gap:8px}.simple .summary-banner h2{font-size:13px}.simple .summary-banner p{font-size:10px;margin-top:3px}.app-footer{flex-wrap:wrap}.app-footer>div{display:flex;justify-content:space-between;flex:1;white-space:nowrap}}
@media(max-height:650px){.simple-mode main{padding-top:5px;padding-bottom:4px}.simple .detail-masthead{min-height:42px;margin-bottom:4px}.simple .detail-brand h1{font-size:22px}.simple .detail-brand>svg{width:26px;height:32px}.simple .detail-brand span{display:none}.simple .detail-masthead .back,.simple .settings-icon{min-height:40px;height:40px}.simple .detail-context{padding:4px 9px;margin-bottom:6px}.simple .segmented button{min-height:34px;padding:5px 8px}.simple .day-context>span{display:none}.simple .progress-panel{padding:9px 12px;margin-bottom:6px}.simple .progress-head h2{font-size:15px}.simple .progress-head b{font-size:23px}.simple .progress-distance{font-size:16px;margin-top:0}.simple .progress-head>div{display:flex;align-items:center;gap:12px}.simple .route-progress{margin:12px 10px 12px;height:8px}.simple .route-progress .stage-progress{height:8px}.simple .route-start,.simple .route-end{width:23px;height:23px}.simple .route-walker{width:28px;height:28px}.simple .route-walker .ui-icon{width:20px;height:20px}.simple .progress-endpoints>div{gap:2px}.simple .progress-endpoints strong,.simple .progress-endpoints b{font-size:16px}.simple .progress-endpoints span{font-size:11px}.simple .actions{margin-bottom:6px}.simple .actions button{min-height:52px;padding:5px;gap:2px}.simple .actions .action-title{font-size:14px}.simple .action-title i{width:23px;height:23px;font-size:14px}.simple .actions small{font-size:9px}.simple .map-controls{display:flex;flex-wrap:wrap;max-width:110px;justify-content:flex-end}.simple .map-controls button{width:44px;height:44px}.simple .map-alert{right:115px}.simple .map-legend{padding:5px;font-size:9px}.simple .map-title{font-size:9px;padding:5px}.simple .summary-banner{padding:5px 10px;margin-bottom:5px}.simple .summary-banner h2{font-size:12px}.simple .summary-banner p{font-size:10px;margin-top:2px}.simple .summary-actions .btn{min-height:36px}.simple .detail-demo-label{display:none}}
@media(max-width:359px){.detail-brand h1{font-size:22px}.detail-brand span{font-size:9px}.masthead-status{font-size:9px;max-width:69px}.simple .day-context strong{font-size:12px}.simple .detail-context{gap:5px;padding:6px}.simple .segmented button{font-size:9px;padding:5px 6px}.progress-endpoints strong{font-size:17px}.pace-card-values strong{font-size:21px}.pace-card-head h3{font-size:14px}.paired-value strong{font-size:20px}}
@media(max-width:760px){.full .detail-context{display:grid;grid-template-columns:1fr 1fr}.full .day-context>span{white-space:nowrap}.full .context-details{justify-self:end}.full .detail-context .segmented{justify-self:start}.full .stage-context{align-self:stretch;justify-content:center}}
@media(max-height:500px) and (min-width:650px){.simple.detail-screen{display:grid;grid-template-columns:minmax(265px,.85fr) minmax(0,1.15fr);grid-template-rows:40px 44px minmax(0,1fr) 52px auto auto;gap:6px}.simple .detail-masthead{grid-column:1/-1;grid-row:1;margin:0}.simple .detail-context{grid-column:1/-1;grid-row:2;margin:0}.simple .progress-panel{grid-column:1;grid-row:3;margin:0;align-self:stretch;display:flex;flex-direction:column;justify-content:center}.simple .actions{grid-column:1;grid-row:4;margin:0}.simple .map{grid-column:2;grid-row:3/5;min-width:0;width:100%;height:100%}.simple .summary-banner{grid-column:1/-1;grid-row:5;margin:0}.simple .summary-actions{grid-column:1/-1;grid-row:6;margin:0}.simple .map-controls{max-width:110px;top:8px;right:8px}.simple .map-legend{left:8px;bottom:16px}.simple .map-title{left:8px;top:8px}}
.simple .map{container-type:size}
@container(max-height:260px){.map-controls{display:flex;flex-wrap:wrap;max-width:100px;gap:5px;justify-content:flex-end;top:8px;right:8px}.map-controls button{width:44px;height:44px}.map-alert{right:115px}.no-track-message{padding:12px;line-height:1.4}}
@container(max-height:160px){.map-controls{max-width:none;flex-wrap:nowrap}.map-title{display:none}.map-legend{padding:5px;font-size:9px}.map-alert{top:60px;right:8px;padding:5px;font-size:10px}.no-track-message{padding:8px;font-size:12px}.no-track-message p{font-size:10px}.no-track-message strong{margin-bottom:4px}}
/* All icon artwork is supplied by Lucide; sizing and containers are UI styles. */
.brand-icon .lucide{width:31px;height:36px}.nav-item>span:first-child .lucide{width:20px;height:20px}.mini-route .lucide{width:12px;height:12px}.date-select .lucide{width:19px;height:19px}.chevron .lucide{width:20px;height:20px}.arrow .lucide,.summary-item .lucide{width:18px;height:18px;vertical-align:middle}.badge .lucide{width:11px;height:11px}.btn .lucide{width:18px;height:18px}.action-title .lucide{width:18px;height:18px}.route-end .lucide{width:20px;height:20px}.health-icon .lucide{width:23px;height:23px}.detail-masthead .back{display:grid;place-items:center}.detail-masthead .back .lucide{width:30px;height:30px}.close{display:grid;place-items:center}.close .lucide{width:20px;height:20px}.summary-banner>span .lucide{width:28px;height:28px}.column-strip small .lucide{width:12px;height:12px}.app-footer .lucide{width:14px;height:14px}.map svg.lucide{position:static;inset:auto;width:24px;height:24px}.map-controls button{display:grid;place-items:center}.map .map-title .lucide{width:15px;height:15px;vertical-align:middle}.context-details .lucide:last-child{width:16px;height:16px}