.commute-tool{--paper:#f6f5f1;--ink:#292b27;--muted:#68685f;--gold:#968363;--line:#d8d4ca;--map-font:"Helvetica Neue",Helvetica,Arial,"PingFang TC","Microsoft JhengHei",sans-serif}.commute-tool *{box-sizing:border-box}.commute-tool{margin:0;background:var(--paper);color:var(--ink);font-family:var(--map-font);font-variant-numeric:lining-nums tabular-nums;font-size:15px}.commute-tool button,.commute-tool select,.commute-tool input,.commute-tool textarea{font:inherit}.commute-tool button,.commute-tool a,.commute-tool summary{touch-action:manipulation}.commute-tool button{cursor:pointer;color:inherit}.commute-tool button:disabled{cursor:wait;opacity:.6}.commute-tool button:focus-visible,.commute-tool a:focus-visible,.commute-tool select:focus-visible,.commute-tool input:focus-visible,.commute-tool summary:focus-visible{outline:3px solid #9a8965;outline-offset:3px}.commute-tool [hidden]{display:none!important}.commute-tool .site-head{height:88px;border-bottom:1px solid var(--line);padding:0 4%;display:flex;align-items:center;justify-content:space-between}.commute-tool .wordmark{font:22px var(--map-font);letter-spacing:2px}.commute-tool .wordmark span{font:9px Arial;letter-spacing:4px;display:block;margin-top:8px}.commute-tool .head-right{display:flex;gap:28px;align-items:center}.commute-tool .dev{font-size:11px;letter-spacing:1px;border:1px solid #b6ae9e;padding:6px 10px;color:#71654e}.commute-tool .text-button{border:0;background:transparent;padding:8px 0;min-height:40px;font-size:13px}.commute-tool #saved-count{display:inline-flex;align-items:center;justify-content:center;background:#e9e4da;border-radius:50%;width:22px;height:22px;margin:0 5px}.commute-tool{max-width:1700px;margin:auto;padding:0 4%}.commute-tool .intro{display:flex;align-items:center;justify-content:space-between;padding:34px 0 30px;gap:24px}.commute-tool .eyebrow{font-size:10px;letter-spacing:2px;color:#807359;margin:0 0 12px}.commute-tool h1{font:400 clamp(29px,2.6vw,43px)/1.4 var(--map-font);margin:0 0 12px;letter-spacing:.03em}.commute-tool .intro-text{margin:0;color:var(--muted);font-size:14px;line-height:1.7}.commute-tool .intro-aside{font-size:11px;letter-spacing:2px;line-height:2.5;text-align:right;color:#807359}.commute-tool .intro-aside span{font-size:12px;letter-spacing:.04em;color:var(--muted)}.commute-tool .workspace{display:grid;grid-template-columns:365px minmax(0,1fr);border:1px solid var(--line);background:#fff;height:760px;min-height:600px}.commute-tool .sidebar{overflow:auto;border-right:1px solid var(--line);scrollbar-width:thin}.commute-tool .filters{padding:25px 26px 22px;border-bottom:1px solid var(--line)}.commute-tool .field-label{font-size:14px;font-weight:600;display:block;margin-bottom:12px}.commute-tool .field-label>span{color:var(--gold);font-size:11px;margin-right:8px;letter-spacing:1px}.commute-tool select{width:100%;padding:13px 10px;background:white;border:1px solid #c9c5bb;color:var(--ink);font-size:14px}.commute-tool .pin-row{display:flex;align-items:center;justify-content:space-between;margin:4px 0 19px;gap:8px}.commute-tool .pin-row>span{font-size:10px;color:var(--muted)}.commute-tool .pin-row button{color:#79694a}.commute-tool .segmented{display:grid;grid-template-columns:1fr 1fr;background:#f0eee8;padding:4px}.commute-tool .segmented button{border:0;background:transparent;padding:10px 8px;font-size:13px}.commute-tool .segmented button[aria-pressed=true]{background:white;box-shadow:0 1px 4px #292b2712}.commute-tool .range-heading{display:flex;justify-content:space-between;align-items:center;margin:20px 0 8px;font-size:13px}.commute-tool output{font:500 28px var(--map-font)}.commute-tool output small{font:12px Arial;color:var(--muted)}.commute-tool input[type=range]{width:100%;accent-color:var(--gold);cursor:pointer;min-height:26px;margin:0}.commute-tool .range-ticks{display:flex;justify-content:space-between;font-size:10px;color:#858279}.commute-tool .fine{font-size:11px;line-height:1.8;color:var(--muted);margin:12px 0 0}.commute-tool .primary{background:var(--ink);color:#fff;border:0;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:48px;margin-top:14px;font-size:14px}.commute-tool .results{padding:23px 26px}.commute-tool .results-heading{display:flex;align-items:center;justify-content:space-between}.commute-tool .results-heading .eyebrow{font-size:9px;margin-bottom:8px}.commute-tool h2{font:400 23px/1.45 var(--map-font);margin:0}.commute-tool .results-heading>span{font:500 20px var(--map-font);color:#8b7954}.commute-tool .result-caption{color:var(--muted);font-size:11px;line-height:1.7;margin:9px 0 18px}.commute-tool .area-card{border-top:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:1fr 36px;gap:10px}.commute-tool .area-card.selected{border-top:2px solid var(--gold)}.commute-tool .area-.commute-tool{border:0;background:transparent;text-align:left;padding:0;min-width:0}.commute-tool .area-main strong{font:20px var(--map-font);display:block;margin-bottom:6px}.commute-tool .area-main small{color:var(--muted);font-size:11px}.commute-tool .area-main .metric{display:block;margin-top:10px;font-size:12px;color:#79694a}.commute-tool .save{height:36px;width:36px;border:1px solid var(--line);background:transparent;font-size:19px;border-radius:50%}.commute-tool .save[aria-pressed=true]{background:#e9e4da;border-color:#968363}.commute-tool .empty{background:#f6f5f1;padding:20px;font-size:13px;line-height:1.9}.commute-tool .map-column{position:relative;min-width:0;isolation:isolate;overflow:hidden;background:#e8e6df}.commute-tool #map{height:100%;width:100%;z-index:0}.commute-tool .leaflet-tile-pane{filter:saturate(.1) brightness(1.045) contrast(.93)}.commute-tool .leaflet-container{font-family:var(--map-font);background:#e9e6df}.commute-tool .map-toolbar{position:absolute;z-index:500;top:20px;left:20px;right:20px;display:flex;justify-content:space-between;gap:12px;pointer-events:none}.commute-tool .map-toolbar>span,.commute-tool .map-toolbar button{background:#fffefbf2;padding:12px 16px;border:1px solid #d3cdbf;box-shadow:0 3px 16px #292b270c;font-size:12px;pointer-events:auto}.commute-tool .map-toolbar button{border-radius:0}.commute-tool .map-message{position:absolute;top:80px;left:20px;right:20px;background:#292b27ee;color:white;z-index:500;padding:12px 16px;font-size:12px;line-height:1.7}.commute-tool .map-legend{position:absolute;left:20px;bottom:24px;display:flex;gap:16px;background:#fffefbf0;padding:12px 15px;z-index:500;pointer-events:none;font-size:11px;border:1px solid #d3cdbf}.commute-tool .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:7px}.commute-tool .dark{background:#4285f4}.commute-tool .gold{background:#968363}.commute-tool .area-pin{width:max-content!important;height:auto!important;background:#fffdf9;border:1px solid #9d8b69;border-radius:18px;padding:8px 12px;box-shadow:0 2px 8px #292b271a;white-space:nowrap;color:#4c463b;font-size:11px;font-weight:600}.commute-tool .area-pin.chosen{background:#292b27;color:white;border-color:#292b27}.commute-tool .work-pin{background:transparent;border:0;display:grid;place-items:center}.commute-tool .work-pin-symbol{width:16px;height:16px;background:#4285f4;border:2px solid #fff;border-radius:50%;box-shadow:0 0 0 4px #4285f426,0 1px 4px #152b4d33}.commute-tool .work-tip{background:#292b27;color:white;border:0;box-shadow:none;padding:8px 12px;font-size:12px}.commute-tool .work-tip.leaflet-tooltip-top:before{border-top-color:#292b27}.commute-tool .map-detail{position:absolute;right:24px;bottom:24px;width:min(340px,calc(100% - 48px));background:#fffefa;z-index:500;padding:22px;border-top:3px solid var(--gold);box-shadow:0 8px 30px #292b2720}.commute-tool .detail-top{display:flex;justify-content:space-between;gap:12px}.commute-tool .detail-top button{border:0;background:none;font-size:22px;padding:0 2px}.commute-tool .map-detail h3{font:500 26px var(--map-font);margin:0}.commute-tool .map-detail p{font-size:13px;line-height:1.9;color:var(--muted);margin:10px 0}.commute-tool .map-detail .detail-metric{color:#79694a}.commute-tool .detail-actions{display:flex;flex-wrap:wrap;gap:12px;border-top:1px solid var(--line);padding-top:10px}.commute-tool .detail-actions button,.commute-tool .detail-actions a{font-size:12px;color:#51472f;border:0;background:none;text-decoration:underline;text-underline-offset:4px;min-height:36px;display:inline-flex;align-items:center;padding:0}.commute-tool .leaflet-control-zoom{border:1px solid #c9c5bb!important;box-shadow:none!important;margin-bottom:75px!important;margin-right:20px!important}.commute-tool .leaflet-control-attribution{font-size:9px!important;background:#fffffff0!important}.commute-tool .page-foot{display:flex;justify-content:space-between;gap:40px;padding:22px 0 36px;font-size:13px;line-height:1.9}.commute-tool .page-foot>p{margin:0}.commute-tool .page-foot>p>span{display:block;font-size:11px;color:var(--muted);max-width:650px}.commute-tool .page-foot details{max-width:430px;font-size:11px;color:var(--muted)}.commute-tool summary{cursor:pointer;font-size:12px;min-height:36px}.commute-tool a{color:inherit}.commute-tool dialog{border:1px solid var(--line);background:#fffefa;color:var(--ink);width:min(540px,calc(100% - 32px));padding:28px}.commute-tool dialog::backdrop{background:#24251f80}.commute-tool .dialog-heading{display:flex;justify-content:space-between}.commute-tool .dialog-heading button{border:0;background:none;font-size:24px}.commute-tool dialog h2{font-size:27px;margin:12px 0}.commute-tool dialog p{font-size:13px;line-height:1.8;color:var(--muted)}.commute-tool dialog label{font-size:12px}.commute-tool textarea{display:block;width:100%;resize:vertical;font-size:13px;line-height:1.8;padding:14px;margin-top:8px;border:1px solid var(--line);background:#f6f5f1}.commute-tool #copy-status{min-height:20px}
@media(min-width:1600px){.commute-tool .workspace{grid-template-columns:390px minmax(0,1fr)}}@media(max-width:1000px){.commute-tool .intro-aside{display:none}.commute-tool .workspace{grid-template-columns:325px minmax(0,1fr)}.commute-tool .filters,.commute-tool .results{padding-left:20px;padding-right:20px}.commute-tool .map-legend{bottom:18px;left:12px;gap:10px}.commute-tool .map-detail{bottom:70px;right:16px}.commute-tool .page-foot{gap:20px}.commute-tool .site-head{padding:0 3%}.commute-tool{padding:0 3%}}@media(max-width:700px){.commute-tool .site-head{height:76px;padding:0 20px}.commute-tool .wordmark{font-size:15px;letter-spacing:1px}.commute-tool .wordmark span{font-size:7px;letter-spacing:2.5px}.commute-tool .head-right{gap:10px}.commute-tool .dev{padding:4px 6px;font-size:9px}.commute-tool .head-right .text-button{font-size:0}.commute-tool .head-right #saved-count{font-size:12px}.commute-tool{padding:0 16px}.commute-tool .intro{padding:26px 4px 24px}.commute-tool h1{font-size:28px;max-width:330px}.commute-tool .intro-text{font-size:13px;max-width:310px}.commute-tool .workspace{display:flex;flex-direction:column;height:auto;border:0;background:transparent;min-height:0}.commute-tool .sidebar{display:contents}.commute-tool .filters{order:0;border:1px solid var(--line);background:white;padding:20px}.commute-tool .map-column{order:1;height:420px;margin-top:16px;border:1px solid var(--line)}.commute-tool .results{order:2;background:#fff;border:1px solid var(--line);border-top:0;padding:24px 20px}.commute-tool .area-card{padding:18px 0}.commute-tool .range-heading{margin-top:14px}.commute-tool .map-toolbar{top:12px;left:12px;right:12px}.commute-tool .map-toolbar>span,.commute-tool .map-toolbar button{padding:10px 12px;font-size:11px}.commute-tool .map-toolbar button span{display:none}.commute-tool .map-legend{padding:9px 10px;font-size:10px;bottom:22px}.commute-tool .map-detail{width:calc(100% - 24px);right:12px;bottom:65px;padding:16px}.commute-tool .map-detail h3{font-size:23px}.commute-tool .map-detail p{font-size:12px;line-height:1.7}.commute-tool .page-foot{display:block;padding:22px 4px 32px}.commute-tool .page-foot details{margin-top:14px}.commute-tool .intro .eyebrow{font-size:9px}.commute-tool .map-message{top:62px;left:12px;right:12px;font-size:11px}.commute-tool .leaflet-control-zoom{margin-right:12px!important;margin-bottom:76px!important}}@media(prefers-reduced-motion:reduce){.commute-tool *{scroll-behavior:auto!important}}.commute-tool .marker-number,.commute-tool .card-number{display:none}@media(max-width:700px){.commute-tool h1>span{display:block}.commute-tool .head-right .text-button:after{content:'清單';font-size:10px}.commute-tool .area-pin{width:28px!important;height:28px!important;padding:0;display:grid;place-items:center;font-size:12px}.commute-tool .marker-name{display:none}.commute-tool .marker-number{display:inline}.commute-tool .card-number{display:inline-block;font:11px Arial;border:1px solid #c9bea9;border-radius:50%;width:22px;height:22px;text-align:center;line-height:20px;margin-right:9px;vertical-align:middle}.commute-tool .intro{padding-top:22px;padding-bottom:22px}.commute-tool .filters{padding:18px 20px}}

@media(max-width:700px){.commute-tool .area-pin{width:22px!important;height:22px!important;font-size:10px}}.commute-tool /* v2: precise radius,.commute-tool distance units and searchable workplace directory. */
.work-search{position:relative;z-index:700}.commute-tool .search-box{display:flex;align-items:center;border:1px solid #c9c5bb;background:#fff;min-height:48px}.commute-tool .search-box>span{padding-left:12px;color:#807359;font-size:23px}.commute-tool .search-box input{width:100%;min-width:0;border:0;background:transparent;padding:13px 7px;font-size:14px;color:var(--ink);outline-offset:-2px}.commute-tool .search-box button{background:none;border:0;padding:10px;min-width:36px;min-height:44px}.commute-tool #place-menu{position:absolute;top:calc(100% + 5px);left:0;right:0;background:#fffefa;border:1px solid #bcb29e;box-shadow:0 12px 28px #292b2720;max-height:330px;overflow:auto}.commute-tool #place-status{margin:0;padding:12px 14px;font-size:11px;color:#686052;line-height:1.7;border-bottom:1px solid #e9e4da}.commute-tool #place-results{list-style:none;margin:0;padding:0}.commute-tool #place-results li{padding:13px 14px;cursor:pointer;border-bottom:1px solid #eae5db;min-height:64px}.commute-tool #place-results li:last-child{border-bottom:0}.commute-tool #place-results li[aria-selected=true],.commute-tool #place-results li:hover{background:#ede8dd}.commute-tool #place-results strong{font-size:13px;font-weight:500;line-height:1.5;display:block}.commute-tool #place-results small{font-size:10px;line-height:1.6;display:block;color:#757064;margin-top:4px}.commute-tool .selected-workplace{font-size:10px;line-height:1.7;color:var(--muted);margin-top:8px}.commute-tool .selected-workplace strong{font-weight:400;display:block}.commute-tool .selected-workplace a{color:#7c6b49;text-underline-offset:3px}.commute-tool .quick-places{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}.commute-tool .quick-places button{border:1px solid #d7d0c2;background:#f9f7f2;padding:7px 8px;font-size:10px;min-height:34px}.commute-tool .unit-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:16px 0;color:var(--muted);font-size:11px}.commute-tool .unit-row>div{display:flex;border:1px solid #d5cdbc}.commute-tool .unit-row button{border:0;background:transparent;padding:7px 9px;font-size:11px;min-height:34px}.commute-tool .unit-row button[aria-pressed=true]{background:#e7e0d3;color:#4a402e}.commute-tool .radius-entry{display:flex;align-items:center;gap:8px}.commute-tool .radius-entry input{width:92px;text-align:right;background:#fcfbf8;border:1px solid #c9c0ad;border-radius:0;font:500 24px var(--map-font);padding:7px 8px;min-height:44px;color:var(--ink);appearance:textfield}.commute-tool .radius-entry input::-webkit-inner-spin-button{appearance:none}.commute-tool .radius-entry>span{font-size:11px;color:var(--muted)}.commute-tool .range-heading{margin-top:12px}.commute-tool .error{color:#8e4432}.commute-tool .radius-entry input[aria-invalid=true]{border-color:#a75540}@media(max-width:700px){.commute-tool .search-box input{font-size:16px}.commute-tool .radius-entry input{font-size:22px}.commute-tool .filters{padding-bottom:18px}.commute-tool #place-menu{max-height:300px}}.commute-tool .search-disclosure{font-size:10px;line-height:1.6;color:#777065;margin:7px 0 0}.commute-tool #search-more{width:100%;background:#f1ece1;border:0;border-top:1px solid #d5cdbc;text-align:left;padding:13px 14px;font-size:12px;min-height:44px}

body.page-commute-map .header{position:relative;background:#f6f5f1;color:#292b27}body.page-commute-map #main{padding-top:0}.commute-tool{max-width:1700px;margin:auto;padding:0 4%;font-size:15px}.commute-tool .map-page-actions{display:flex;justify-content:space-between;align-items:center;padding-top:20px;gap:20px;font-size:13px}.commute-tool .map-page-actions a{color:#6b593c}.commute-tool .intro h1{max-width:650px}.commute-tool .intro h1 span{display:inline}.commute-tool .leaflet-control-attribution a{color:#51472f}.commute-tool #add-plan{display:block;text-decoration:none;text-align:center;padding:14px;background:#292b27;color:#fff;margin-top:14px}.commute-tool .page-foot p{max-width:650px}@media(max-width:700px){.commute-tool{padding:0 16px}.commute-tool .map-page-actions{font-size:12px}.commute-tool .intro h1{font-size:28px}}

.commute-tool button.area-main{display:block;border:0;background:transparent;text-align:left;box-shadow:none;border-radius:0;height:auto;width:100%;color:var(--ink)}.commute-tool .area-main strong{text-align:left}.commute-tool .intro{margin:0;border:0;max-width:none;background:transparent}.commute-tool .primary{color:#fff}.commute-tool .intro-text{margin-top:0}

.commute-tool h1{text-wrap:balance}.commute-tool .intro{padding-top:30px;padding-bottom:28px}.commute-tool .intro h1{margin-bottom:14px}.commute-tool .intro p{padding:0}.commute-tool .intro-text{line-height:1.8}@media(max-width:700px){.commute-tool .intro{padding-top:20px;padding-bottom:24px}.commute-tool .intro h1{max-width:330px;font-size:28px}}

/* One finite road-trace animation; the completed route stays visible. */
.commute-tool .commute-road-route{stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 5px #007b8366)}
.commute-tool .route-direction{display:block;font-size:11px;color:#57594f;margin:8px 0}.commute-tool .route-direction select{min-height:40px;padding:6px;font-size:12px;margin-top:4px}
.commute-tool #road-estimate{background:#e7f1ef;color:#14565a;padding:12px 16px;margin:12px 0;line-height:1.5}
.commute-tool #road-estimate strong{display:block;font:500 32px/1.25 var(--map-font);color:#12565b}.commute-tool #road-estimate strong span{font:400 14px/1.4 var(--map-font)}
.commute-tool #road-estimate>small,.commute-tool #road-estimate>span{font-size:11px}.commute-tool #road-estimate p{margin:4px 0;color:#14565a}
.commute-tool .area-main .area-road-time{display:block;margin-top:8px;color:#14565a;font-size:12px}
@media(max-width:700px){.commute-tool:has(.route-direction) .map-detail{bottom:44px;max-height:220px;overflow:auto}.commute-tool #road-estimate strong{font-size:27px}}
@media(prefers-reduced-motion:reduce){.commute-tool .commute-road-route{animation:none!important}}

/* Data labels share the map's neutral UI type, including generated shortlist rows. */
.commute-tool :is(h1,h2,h3){font-family:var(--map-font)}
.commute-tool :is(output,.radius-entry input,#road-estimate strong,.metric,.area-road-time,.marker-number,.card-number){font-variant-numeric:lining-nums tabular-nums}

/* A quiet moving highlight remains after the route has drawn. */
.commute-tool .commute-route-flow{pointer-events:none;opacity:0;animation:commute-route-travel 2.4s linear 1.6s infinite}
@keyframes commute-route-travel{from{stroke-dashoffset:178;opacity:.95}to{stroke-dashoffset:0;opacity:.95}}
@media(prefers-reduced-motion:reduce){.commute-tool .commute-route-flow{display:none;animation:none}}